@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#e2ddcf;background:#11171b;font-size:13px;color-scheme:dark;--gold:#d3ac6b;--teal:#8cc6ba}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.3}button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button{transition:background .15s,border-color .15s}button:not(:disabled):hover{border-color:var(--gold)}
#app{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:100dvh}.world{height:100dvh;min-height:480px;position:sticky;top:0;overflow:hidden;background:#344047}#view{position:absolute;inset:0}#view canvas{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#05080a66)}.crosshair{position:absolute;pointer-events:none;top:49%;left:50%;transform:translate(-50%,-50%);color:#f0deb8a9;text-shadow:0 1px 3px #000}
.world-top,.world-bottom{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px 26px}.world-top{top:0;background:linear-gradient(#070b0d78,transparent)}.world-bottom{bottom:0;background:linear-gradient(transparent,#070b0d9a)}.brand{font:700 26px 'Cormorant Garamond',serif;letter-spacing:.14em;color:#f6e7c9}.brand span{font:500 8px 'Noto Sans JP',sans-serif;letter-spacing:.21em;color:#b0b4ae;display:block}.iconbutton{border:1px solid #ddcaa460;color:#ead9b8;background:#152125b0;border-radius:50%;width:44px;height:44px;flex:none;font-size:20px}.perspective-label{font-size:11px;letter-spacing:.04em;text-shadow:0 1px 5px #000}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px #e7c68b;margin-right:8px}.bearing{color:#e3cc9d;font-size:10px;letter-spacing:.12em;border:1px solid #c1ad8655;padding:7px 10px;background:#11191baa}.notification{z-index:10;position:absolute;top:82px;left:50%;transform:translateX(-50%);background:#10191bf2;border:1px solid var(--gold);color:#f1e8d7;padding:10px 16px;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;width:max-content;max-width:90%;text-align:center;font-size:11px}.notification.show{opacity:1}
.dashboard{background:#171f20;border-left:1px solid #3b403c;display:flex;flex-direction:column;min-width:0}.section{padding:18px 20px;border-bottom:1px solid #363f3b}.top-status{padding-top:22px}.statusline{display:flex;align-items:center;gap:10px}.statusline h2{font-size:19px;font-weight:500;margin:0;flex:1}.pill{border:1px solid #bbac854e;padding:4px 8px;border-radius:20px;font-size:10px;color:#dac49e}.top-status>p{color:#94a49c;font-size:10px;margin:8px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.section-heading h3{font-size:11px;letter-spacing:.12em;font-weight:500;color:#d9c49b;margin:0}.section-heading span{font-size:10px;color:#a6b6ad}.help{font-size:10px;line-height:1.6;color:#a1afa6;margin:0 0 10px}.pieces{background:#141c1d}.piece-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.piece-button{background:#222c2a;border:1px solid #3a4841;border-radius:5px;color:#ddd2b9;padding:7px 0 5px;min-width:0;min-height:55px;position:relative;text-align:center}.piece-button strong{display:block;font:500 27px Georgia,serif;line-height:1}.piece-button small{display:block;font-size:9px;color:#a3b1a6;margin-top:5px}.piece-button.active{border-color:var(--gold);background:#423626;box-shadow:inset 0 0 0 1px #a98b5a44}.piece-button.assigned{border-color:#6c9d8d}.watch-badge{position:absolute;right:1px;top:1px;font:700 8px sans-serif;color:#d1f5e9;background:#2b5549;border-radius:2px;padding:1px 2px}.piece-button.watching{box-shadow:inset 0 -3px 0 var(--teal)}.piece-button.discovered{opacity:.28}.piece-button.discovered strong{text-decoration:line-through}.pieces.picking{box-shadow:inset 0 0 0 1px var(--teal)}.pieces.picking .piece-button:not(:disabled){background:#213b34}.pieces.picking .piece-button:not(:disabled):hover{border-color:var(--teal)}
.panel-tabs{display:none}.compass{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,44px);gap:5px;justify-content:center;margin:10px auto 14px}.compass button,.move-diagram button{background:#24322f;border:1px solid #4b6155;border-radius:7px;color:#ead4ad;font-size:25px;line-height:1}.compass button:not(:disabled):hover,.move-diagram button:not(:disabled):hover{background:#58492d}.compass-center{align-self:center;text-align:center;color:#8d9e94;font-size:21px}.distance-row{display:flex;align-items:center;gap:8px;min-width:0}.distance-row label{font-size:10px;color:#bcb5a7}.distance-row input{flex:1;min-width:30px;width:60px;height:40px;accent-color:#b99a63}.distance-row strong{font-size:13px;color:#dac49b;min-width:14px;text-align:center}.step-button{width:40px;height:40px;flex:none;border:1px solid #48574d;border-radius:6px;background:#26312d;color:#dfccaa;font-size:18px}.castle-row{display:flex;gap:8px}.secondary{flex:1;background:transparent;color:#cdb28a;border:1px solid #867451;margin:8px 0 0;padding:9px;border-radius:5px;min-height:42px}.watch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.watch-card{display:flex;flex-direction:column;align-items:center;gap:5px;background:#202d29;border:1px solid #4c685a;color:#d8e7dd;border-radius:7px;padding:10px 4px;min-height:92px;min-width:0}.watch-card small{font-size:10px;color:#abc4b5}.watch-card strong{font:500 28px Georgia,serif}.watch-card span{font-size:10px;color:var(--teal)}.watch-card.picking{border-color:var(--teal);background:#315346;box-shadow:0 0 0 1px var(--teal)}.watch-card.active{border-color:var(--gold)}.watch-card:disabled{opacity:.55}.textbutton{border:0;background:none;color:#cdb180;font-size:11px;padding:12px;min-height:44px}.surveillance>.textbutton{width:100%;margin-top:6px}.hidden{display:none!important}
.overlay{position:fixed;inset:0;z-index:30;background:#0a0e0fbd;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain}.splash-card{width:min(430px,100%);max-height:100%;overflow-y:auto;flex:none;border:1px solid #96805a7f;border-radius:12px;background:#182021f5;box-shadow:0 14px 80px #0008;padding:30px;text-align:center}.eyebrow{font-size:9px;letter-spacing:.25em;color:#c3a778;margin:0 0 10px}.splash-card h1{font:600 clamp(36px,6vw,60px) 'Cormorant Garamond',serif;color:#f5e4c8;margin:5px 0 10px;letter-spacing:.1em}.splash-card h2{font-size:26px;font-weight:500;color:#f5e4c8;margin:0 0 20px}.splash-card>p:not(.eyebrow){font-size:11px;line-height:1.8;color:#b7c1b8;margin:0 0 20px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 0;border-top:1px solid #3b453d;text-align:left}.setting-row>span{font-size:11px;color:#cdbf9f;white-space:nowrap}.segmented{display:flex;background:#111a1a;border:1px solid #4b5044;border-radius:6px;overflow:hidden}.segmented button{background:transparent;border:0;color:#a9b6ad;padding:10px 12px;min-height:44px;font-size:11px}.segmented button.active{background:#b89b66;color:#101717}.primary{background:#b49460;border:1px solid #dac393;color:#0e1615;font-weight:700;letter-spacing:.1em;padding:13px 22px;border-radius:6px;min-height:46px}.primary:hover{background:#cfb37f}.start{width:100%;margin:16px 0 0}.promotion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promotion-options button{background:#2b342d;border:1px solid #88704c;color:#dfccaa;padding:14px 4px;border-radius:7px;font:36px Georgia,serif}.slider-label{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:16px 0;font-size:22px}.slider-label input{accent-color:#b49460;height:44px;flex:1;min-width:0}
@media(max-width:1000px){
 html,body{height:100%;overflow:hidden}#app{height:100dvh;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) auto}.world{position:relative;height:auto;min-height:0}.world-top,.world-bottom{padding:12px 16px}.brand{font-size:22px}.world-top .iconbutton{width:42px;height:42px}.dashboard{border-left:0;border-top:1px solid #4b5146;max-height:64dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);scrollbar-width:thin}.section{padding:10px 12px}.top-status{padding:7px 12px}.statusline h2{font-size:15px}.statusline .iconbutton{width:36px;height:36px;font-size:19px}.top-status>p{display:none}.pieces{padding-top:8px;padding-bottom:9px}.pieces .section-heading{margin-bottom:6px}.piece-list{gap:4px}.piece-button{min-height:48px;padding:5px 0 4px}.piece-button strong{font-size:25px}.piece-button small{font-size:9px;margin-top:3px}.panel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px 12px;background:#131c1b;border-bottom:1px solid #35433a}.panel-tabs button{min-height:38px;background:transparent;border:1px solid transparent;border-radius:6px;color:#8ea69a;font-size:17px}.panel-tabs button span{font-size:11px;margin-left:5px}.panel-tabs button[aria-pressed=true]{background:#2b3a31;color:#ead4ad;border-color:#6f795b}.dashboard[data-panel=move] .surveillance,.dashboard[data-panel=watch] .move-panel{display:none}.move-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:center;padding-bottom:12px}.move-panel .section-heading{grid-column:2;grid-row:1;margin:0}.move-panel .help{grid-column:2;grid-row:2;font-size:9px;margin:0}.compass,.move-diagram{grid-column:1;grid-row:1 / 5;margin:0}.compass{grid-template-columns:repeat(3,minmax(38px,48px));grid-template-rows:repeat(3,44px);gap:4px}.distance-row{grid-column:2;grid-row:3;flex-wrap:wrap;gap:4px}.distance-row label{display:none}.distance-row input{order:3;flex-basis:100%;height:32px}.step-button{width:40px;height:40px}.distance-row strong{flex:1}.castle-row{grid-column:2;grid-row:4}.secondary{padding:4px 2px;min-height:36px;font-size:16px}.surveillance{min-height:166px}.watch-card{min-height:90px}.splash-card{padding:24px}.notification{top:66px}
}
@media(max-width:1000px) and (orientation:landscape){
 #app{grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:1fr}.dashboard{height:100dvh;max-height:100dvh;border-top:0;border-left:1px solid #4b5146}.world-top,.world-bottom{padding:10px}.brand{font-size:18px}.brand span{display:none}.perspective-label{font-size:10px}.bearing{padding:5px}.splash-card{padding:16px 24px}.splash-card h1{font-size:34px;margin:0 0 4px}.splash-card .eyebrow{display:none}.splash-card>p:not(.eyebrow){margin-bottom:10px}.setting-row{padding:5px 0}.start{margin-top:10px}.pieces{padding-top:5px;padding-bottom:6px}.piece-button{min-height:43px}.piece-button strong{font-size:23px}.panel-tabs button{min-height:34px}.section-heading{margin-bottom:6px}.move-panel{padding-top:8px}
}
@media(max-width:360px) and (orientation:portrait){.section{padding-left:9px;padding-right:9px}.piece-list{gap:3px}.piece-button strong{font-size:23px}.watch-badge{font-size:7px}.move-panel{column-gap:8px}.compass{grid-template-columns:repeat(3,40px)}.splash-card{padding:20px 16px}.segmented button{padding:8px 10px}}
@media(max-width:1000px){.distance-row strong{order:1}#distancePlus{order:2}.distance-row input{order:3}}
@media(max-width:1000px) and (max-height:650px) and (orientation:portrait){
 .top-status{padding-top:5px;padding-bottom:5px}.statusline .iconbutton{width:32px;height:32px}.pieces{padding-top:6px;padding-bottom:6px}.piece-button{min-height:44px;padding:3px 0}.piece-button strong{font-size:23px}.piece-button small{line-height:1;margin-top:2px}.panel-tabs button{min-height:34px}.compass{grid-template-rows:repeat(3,40px)}.move-panel{padding-top:8px;padding-bottom:8px}.distance-row input{height:24px}.step-button{height:36px}.surveillance{min-height:150px}
}
.slider-label{font-size:14px}
.move-hints{margin-bottom:12px}.move-hints .help{margin:0}.move-hints #moveLegend{margin-top:6px;color:#c9c5a7}
.compass [data-dir=fl]{grid-area:1 / 1}.compass [data-dir=f]{grid-area:1 / 2}.compass [data-dir=fr]{grid-area:1 / 3}.compass [data-dir=l]{grid-area:2 / 1}.compass-center{grid-area:2 / 2;color:var(--gold)}.compass [data-dir=r]{grid-area:2 / 3}.compass [data-dir=bl]{grid-area:3 / 1}.compass [data-dir=b]{grid-area:3 / 2}.compass [data-dir=br]{grid-area:3 / 3}
.move-diagram{display:grid;grid-template-columns:repeat(var(--diagram-size),minmax(0,1fr));gap:3px;width:220px;max-width:100%;margin:10px auto 14px;aspect-ratio:1;padding:4px;border:1px solid #526356;border-radius:7px;background:#101a17}.move-diagram[data-size="3"]{width:160px}.move-cell{display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:1;border:1px solid transparent;border-radius:3px;padding:0}.move-cell.light{background:#34433a}.move-cell.dark{background:#24342d}.move-diagram button.target{border-color:#7baf96;background:#2d5948;color:#d2f2df;font-size:17px;line-height:1}.move-diagram button.capture{color:#f4d7a0;background:#50412c;border-color:#ad8e58;font-size:24px}.move-diagram button.target:not(:disabled):hover{background:#487b61;border-color:#d2f2df}.move-diagram button.capture:not(:disabled):hover{background:#76603c;border-color:#f4d7a0}.move-cell.origin{border-color:var(--gold);background:#493b26;color:#f3dfb7;font:28px Georgia,serif;line-height:1}
@media(max-width:1000px){
 .move-panel .move-hints{grid-column:2;grid-row:2;margin:0}.move-panel[data-control=diagram]{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.move-diagram{width:100%;margin:0;justify-self:center}.move-diagram[data-size="3"]{width:150px;max-width:100%}.move-panel[data-control=diagram] .castle-row{grid-row:3 / 5;align-self:start}.move-cell.origin{font-size:24px}
}
@media(max-width:1000px) and (max-height:650px) and (orientation:portrait){
 .dashboard:has(.move-panel[data-control=diagram]){max-height:calc(100dvh - 180px)}.move-diagram{max-width:166px}.move-cell.origin{font-size:22px}.move-diagram button.target{font-size:14px}.move-diagram button.capture{font-size:20px}
}
@media(max-width:1000px) and (max-height:400px) and (orientation:landscape){
 .top-status{padding-top:4px;padding-bottom:4px}.statusline .iconbutton{width:32px;height:32px}.move-diagram{max-width:140px}.move-cell.origin{font-size:21px}.move-diagram button.target{font-size:13px}.move-diagram button.capture{font-size:19px}
}
.end-actions{display:grid;gap:10px}.end-actions .secondary{margin:0}
.reviewing .pieces,.reviewing .panel-tabs,.reviewing .move-panel,.reviewing .surveillance,.reviewing .world-top,.reviewing .world-bottom,.reviewing .crosshair,.reviewing .vignette{display:none!important}
.reviewing .dashboard{height:100dvh;max-height:100dvh;overflow:hidden}
.review-piece-label{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);font:clamp(10px,1.4vw,18px) Georgia,serif;line-height:1;width:1.4em;height:1.4em;border:1px solid #bb9a60;border-radius:50%;box-shadow:0 1px 3px #0005;text-shadow:none}.review-piece-label.w{color:#182721;background:#f0e5cb}.review-piece-label.b{color:#ead2a0;background:#142720}
.review-panel{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 20px 20px;gap:12px}.review-panel>.section-heading{margin:0}.review-actions{display:flex;gap:6px}.review-actions .iconbutton{width:36px;height:36px;font-size:19px}.review-transport{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.review-transport button{min-height:44px;border:1px solid #55644e;border-radius:6px;background:#24352d;color:#e6d3ac;font-size:22px}.review-transport #reviewPlay{background:#b49460;border-color:#dac393;color:#111b16}.review-progress{display:flex;align-items:center;gap:10px}.review-progress input{width:0;min-width:0;flex:1;height:30px;accent-color:#bc9b63}.review-progress output{font:11px monospace;white-space:nowrap;color:#d8c39e}.review-caption{font-size:12px;line-height:1.6;color:#e0cfaa;min-height:20px;margin:0}.review-moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:start;overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;padding:2px 3px 2px 2px;scrollbar-width:thin}.review-move{display:grid;grid-template-columns:21px minmax(0,1fr);gap:4px;align-items:center;text-align:left;min-height:44px;padding:7px 6px;border:1px solid #3c4d42;border-radius:5px;background:#202d27;color:#d9dfd2;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.review-step{font:10px monospace;color:#99ae9f}.review-move[data-step="0"]{grid-column:1 / -1}.review-move[aria-current="step"]{border-color:var(--gold);background:#4b3e29;color:#fff0d0}.review-coordinates{position:absolute;pointer-events:none;color:#ebdfc3;font:10px monospace;text-shadow:0 1px 3px #000}.review-files{position:absolute;left:0;right:0;bottom:-17px;display:grid;grid-template-columns:repeat(8,1fr);text-align:center}.review-ranks{position:absolute;top:0;bottom:0;left:-17px;display:grid;grid-template-rows:repeat(8,1fr);align-items:center}
@media(max-width:1000px) and (orientation:portrait){
 .reviewing#app{grid-template-rows:minmax(180px,1fr) minmax(0,43dvh)}.reviewing .dashboard{height:100%;max-height:none;padding-bottom:env(safe-area-inset-bottom)}.review-panel{padding:10px 12px;gap:7px}.review-panel .review-actions .iconbutton{width:32px;height:32px}.review-transport button{min-height:36px}.review-progress input{height:24px}.review-caption{font-size:11px}.review-move{min-height:40px;font-size:10px}
}
@media(max-width:1000px) and (orientation:landscape){
 .review-panel{padding:8px 12px 10px;gap:6px}.review-transport button{min-height:36px}.review-progress input{height:24px}.review-move{min-height:38px;font-size:10px}.review-caption{font-size:11px}
}
@media(max-width:1000px) and (max-height:650px) and (orientation:portrait){.reviewing#app{grid-template-rows:minmax(180px,1fr) minmax(0,52dvh)}}