/* Shared welcome, setup and controls; phone navigation stays close to the board. */
.header-styles,.shelf-arrow,.recent-moves,.review-shortcuts,.phone-tool-icon,#open-chat{display:none}
.welcome{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);overflow:hidden;border-radius:18px;border:1px solid #819577;background:#163b34;color:#fff4d6}
body.welcome-open{display:block;padding:12px;height:var(--app-height);background:#102f2b}
body.welcome-open>.mast,body.welcome-open>.workspace,body.welcome-open>.preview-footer{display:none}
.welcome-stage{position:relative;min-height:0;overflow:hidden;background:linear-gradient(0deg,#132e3280,transparent 60%),url('assets/backgrounds/courtyard.png') center/cover}
#welcome-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;opacity:0;transition:opacity .3s}
#welcome-poster{position:absolute;inset:6% 0 9%;width:100%;height:85%;object-fit:contain;pointer-events:none}
.model-ready #welcome-canvas{opacity:1}.model-ready #welcome-poster{display:none}
.welcome-character{position:absolute;left:24px;bottom:22px;right:20px;pointer-events:none;text-shadow:0 2px 9px #041719;background:linear-gradient(90deg,#102b3580,transparent);padding:12px;border-radius:9px}
.welcome-character .eyebrow{color:#e7c67e;font-size:10px}.welcome-character h1{font:600 28px Georgia,serif;margin:4px 0 8px}.welcome-character p{font-size:12px;margin:0;color:#d9e3da}
.welcome-menu{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(24px,4vw,62px);min-height:0;overflow:auto;background:radial-gradient(ellipse at top right,#396047,#173d34 65%)}
.welcome-menu .brand{color:#fff2cf;margin-bottom:24px}.welcome-menu .brand img{width:35px;height:35px}.welcome-menu .brand small{color:#ddca8e}
.welcome-intro h2{font:500 clamp(27px,3vw,43px)/1.12 Georgia,serif;margin:0 0 14px}.welcome-intro p{font-size:14px;line-height:1.6;color:#c7d6c7;margin:0 0 10px}
.welcome button{font-family:inherit;min-height:44px}.welcome .welcome-start{border-radius:10px;background:#254d40;border:1px solid #a5b28a;color:#fff3d3;font-size:16px;padding:13px}
.welcome .welcome-start.primary{background:linear-gradient(120deg,#eddb9c,#cfb56e);color:#233f30;border-color:#efdfab;box-shadow:0 4px 15px #071b2433}
.welcome-looks{padding:0;border:0;margin:0}.welcome-looks legend{font-size:12px;color:#d4dcc5;margin:0 0 9px}.welcome-look-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.welcome-look-options button{padding:5px;border:1px solid #81957566;background:#193c33;color:#e8e5cf;border-radius:9px;overflow:hidden;font-size:11px}
.welcome-look-options img{display:block;width:100%;height:68px;object-fit:cover;border-radius:5px;margin-bottom:6px}.welcome-look-options button[data-quick-style='2d'] img{object-fit:contain;background:#819774}
.welcome-look-options button[aria-pressed=true]{border-color:#efd28a;box-shadow:0 0 0 1px #efd28a;background:#315141}.welcome .welcome-link{border:0;box-shadow:none;color:#efdcaa;background:transparent;padding:0;font-size:12px}
.welcome-links{display:flex;align-items:center;justify-content:center;gap:18px}.welcome-links button,.welcome-links a{color:#c7d4bd;font-size:11px;background:transparent;border:0;padding:0;box-shadow:none;text-decoration:none}
.welcome-links a{padding:12px 0}
.quick-views{gap:12px}.quick-views #open-game,.quick-views #open-appearance{min-width:70px;min-height:40px;padding:8px 16px;font-size:12px;display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center}
.style-shortcuts{display:flex;border:1px solid #80997c66;border-radius:10px;padding:3px;gap:2px;background:#183c34}
.quick-views .style-shortcuts button{min-width:52px;min-height:36px;border:0;background:transparent;box-shadow:none;padding:7px 12px;color:#e3e7d6;font-size:12px}
.quick-views .style-shortcuts button[aria-pressed=true]{background:#d7c58b;color:#264333}
.quick-views button[aria-expanded=true]{border-color:#cfc38b!important}
#panel-view{padding:0;overflow:hidden}#panel-view .appearance-picker{position:static;inset:auto;display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:auto;max-height:none;max-width:none;border:0;border-radius:0;box-shadow:none;background:#f8f9ee}
.appearance-heading{padding:12px 16px}.appearance-heading h2{font:600 20px Georgia,serif}.appearance-scroll{padding:0 16px 12px;flex:1}.appearance-section{padding:12px 0}.appearance-picker button{min-height:40px}.appearance-footer{padding:10px 12px}
.view-camera-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.view-camera-buttons button{min-height:44px}.view-camera #advanced-camera{margin-top:12px}.view-camera:has(#inspect[hidden]) .view-camera-buttons{grid-template-columns:1fr}
#camera-controls{padding-top:12px;display:flex;flex-direction:column;gap:12px}#camera-controls .panel-heading{display:none}#camera-controls .camera-help{padding:8px 0}
.display-options{display:flex;gap:8px;flex-wrap:wrap}.display-options button{flex:1;font-size:11px}#install-help{flex-basis:100%;font-size:12px;line-height:1.6}
.game-extras{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid #d0d8bc;flex-shrink:0}.game-extras button,.game-extras a{min-height:38px;font-size:11px}.game-extras a{display:grid;place-items:center;color:#657b58}
.setup-modes,.difficulty-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.setup-modes button,.difficulty-picks button{min-height:44px;font-size:12px;padding:8px 4px}.setup-modes button[aria-pressed=true],.difficulty-picks button[aria-pressed=true]{background:#dae7c3;border-color:#829765;color:#254634;box-shadow:inset 0 0 0 1px #91a774}
#setup-dialog{width:min(510px,calc(100vw - 24px));max-height:calc(var(--app-height) - 24px);padding:22px}#setup-form{gap:16px}#setup-form fieldset{min-width:0}.setup-clock{border:1px solid #d1d8bd;border-radius:9px;padding:12px}.setup-clock summary{font-size:13px;cursor:pointer}.setup-clock .clock-fields{margin-top:14px;border:0;padding:0}.setup-clock .clock-fields legend{display:none}
#setup-play{min-height:48px;font-size:15px}#setup-friends{margin-top:16px}#setup-friends form{display:flex;flex-direction:column;gap:14px;margin-top:12px}#setup-friends form label{font-size:13px}#setup-friends input,#setup-friends select{width:100%;font-size:16px}#setup-friends .hint{font-size:12px}
.board-result{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);width:min(350px,calc(100% - 30px));max-height:calc(100% - 20px);overflow:auto;padding:22px;text-align:center;border:1px solid #d7c794;border-radius:16px;background:linear-gradient(140deg,#fff9e9f5,#eaf0ddf5);color:#274b3c;box-shadow:0 15px 55px #071d3270;backdrop-filter:blur(9px)}
.result-close{position:absolute;top:7px;right:7px;width:36px;height:36px;padding:0;font-size:22px;border:0;background:transparent!important}.board-result>img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid #c5ad70;background:#274c40}.board-result .eyebrow{margin:10px 0 5px;color:#8e602e;font-size:12px}.board-result h2{font:600 30px Georgia,serif;margin:7px 0 18px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-actions button{min-height:44px;font-size:13px}.text-button{border:0;box-shadow:none;background:transparent;color:#476c50;font-size:12px;min-height:40px;padding:8px 12px}
.check-notice{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;max-width:calc(100% - 24px);padding:10px 18px;border:1px solid #d19b83;border-radius:9px;background:#fff6e6f2;color:#873c32;box-shadow:0 3px 16px #10252c40;font-weight:bold;font-size:13px;pointer-events:none;text-align:center}
.scene:has(.check-notice:not([hidden])) .scene-caption{visibility:hidden}.panel .result-card{flex-shrink:0}
@media(max-width:760px){
  body{display:grid;grid-template-rows:calc(52px + env(safe-area-inset-top)) minmax(0,1fr);gap:0;padding:0 0 env(safe-area-inset-bottom);height:var(--app-height);overflow:hidden;background:#173d34}body>.mast{display:flex}body>.preview-footer{display:none}
  .mast{padding:calc(5px + env(safe-area-inset-top)) 9px 5px;gap:8px;background:#eef0d9}.mast .account-nav,.mast .preview-pill,.mast .brand small{display:none}.mast .brand{gap:5px;min-height:42px}.mast .brand>span{font-size:11px;letter-spacing:.7px}.mast .brand img{width:24px;height:24px}.shelf-arrow{display:block;width:17px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .header-styles{display:flex;gap:2px;padding:2px;border:1px solid #b9c9aa;border-radius:9px;background:#dfe7cf}.header-styles button{min-width:41px;min-height:40px;padding:5px;font-size:12px;border:0;box-shadow:none;background:transparent}.header-styles button[aria-pressed=true]{background:#2d5949;color:#fff2cc}
  .workspace{display:block;height:100%;min-height:0;padding:0;align-self:start}.arena,.sheet-open .arena{height:100%;grid-template-rows:36px 62px minmax(0,1fr) 62px 62px;border-radius:0 0 12px 12px;border:0}
  .recent-moves{display:flex;min-width:0;align-items:center;background:#1a3430;border-bottom:1px solid #8b9a7333;color:#ebebd4;padding:0 5px;gap:6px}.recent-moves>div{min-width:0;flex:1;display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;position:relative;overscroll-behavior:contain}.recent-moves button{flex-shrink:0;min-height:32px;padding:5px 7px;border:0;background:transparent;color:inherit;white-space:nowrap;font-size:12px}.recent-moves button small{font-size:10px;margin-right:6px;color:#aebfa4}.recent-moves button[aria-current=step]{background:#cabb8655;border-radius:5px}.recent-moves #return-live{font-size:11px;background:#ead89e;color:#244739}.recent-empty{font-size:11px;padding:9px 7px;color:#c5d1b8}
  .player-strip{grid-template-columns:34px minmax(0,1fr) auto 65px;grid-template-rows:29px 19px;padding:6px 9px;gap:2px 6px}.player-strip.untimed{grid-template-columns:34px minmax(0,1fr) auto}.player-strip.untimed .captured-strip{grid-column:2/4}.avatar.portrait{width:34px;height:34px}.player-name>strong{font-size:12px}.player-name small{display:block;font-size:9px;margin:1px 0 0}.turn-tag{font-size:10px;padding:3px 5px}.clock{font-size:22px;padding:5px;grid-column:4;min-width:65px}.captured-strip{gap:4px}.captured-strip>small{font-size:0}.captured-strip>small b{font-size:0}.capture-group{height:18px;min-width:20px;padding:0;border:0;background:transparent!important;gap:1px}.capture-group .token{width:19px;height:19px}.capture-group b{font-size:10px;color:#f0e5c7}.no-captures{font-size:10px}.captured-strip:has(.no-captures){visibility:hidden}
  .flat-wrap,.scene:has(#replay-tools:not([hidden])) .flat-wrap{padding:3px}.flat-board{border-width:2px;border-radius:4px;box-shadow:none}.scene-caption{display:none}#replay-tools{display:none!important}
  .quick-views,.sheet-open .quick-views{padding:5px 8px;gap:6px;border-top:1px solid #728c6560}.quick-views .style-shortcuts{display:none}.quick-views #open-game,.quick-views #open-appearance,.quick-views #open-chat{display:flex;flex:1;flex-direction:column;min-width:0;min-height:48px;padding:4px;gap:4px;font-size:11px;border:0;background:transparent}.quick-views button[aria-expanded=true]{background:#cedbbf22!important}.quick-views .phone-tool-icon{display:block;width:19px;height:19px}.review-shortcuts{display:flex;flex:2;gap:6px;min-width:0}.review-shortcuts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:48px;flex:1;border:0;background:transparent;padding:4px;font-size:11px}.review-shortcuts button svg{height:19px;width:19px}#open-chat{position:relative}#open-chat .unread{position:absolute;top:0;right:8px;font-size:9px;background:#e7d38d;color:#244739}
  .sheet-open .workspace .dock{display:flex;position:absolute;top:0;bottom:64px;left:6px;right:6px;border-radius:14px;z-index:15;box-shadow:0 0 0 100vmax #0d292c88}.sheet-handle{min-height:40px;padding:5px 12px}.sheet-handle>span{display:none}.sheet-handle button{margin-left:auto;min-height:32px}.tabs,.sheet-open .dock .tabs{display:grid;padding:4px 8px}.tabs button{min-height:36px}.appearance-heading{padding:9px 13px}.appearance-heading .eyebrow{display:none}.appearance-scroll{padding:0 13px 10px}.appearance-heading h2{font-size:19px}.appearance-footer{padding:7px 12px}.appearance-footer>span{font-size:10px;max-width:150px}
  #setup-dialog{padding:17px;max-height:calc(var(--app-height) - 16px)}#setup-form{gap:12px}.game-dialog .panel-heading h2{font-size:23px}#setup-form .army-picks img{height:50px}.board-result{padding:16px}.board-result>img{width:54px;height:54px}.board-result h2{font-size:25px;margin:6px 0 14px}.board-result .eyebrow{margin-top:7px;font-size:11px}.check-notice{top:8px;font-size:12px;padding:8px 12px}
  body.welcome-open{padding:0}.welcome{grid-template-columns:1fr;grid-template-rows:minmax(160px,1fr) auto;border:0;border-radius:0;position:relative}.welcome-menu{padding:12px 18px 8px;gap:8px;overflow:visible}.welcome-menu .brand{position:absolute;left:17px;top:14px;z-index:2;margin:0;text-shadow:0 2px 6px #061b24}.welcome-menu .brand img{width:29px;height:29px}.welcome-menu .brand small{display:none}.welcome-intro{display:none}.welcome .welcome-start{padding:10px;font-size:15px;min-height:44px}.welcome-character{left:11px;right:11px;bottom:3px;padding:9px}.welcome-character h1{font-size:23px;margin:2px 0 5px}.welcome-character .eyebrow{font-size:9px}.welcome-character p{font-size:11px}.welcome-look-options img{height:43px;margin-bottom:4px}.welcome-look-options button{font-size:11px;padding:4px}.welcome-looks legend{margin-bottom:5px;font-size:11px}.welcome .welcome-link{min-height:32px;font-size:12px}.welcome-links{gap:20px}.welcome-links button{min-height:32px}.welcome-links a{padding:8px 0}#welcome-poster{top:12%;height:74%}
}
@media(max-height:580px) and (max-width:760px){.welcome{grid-template-rows:minmax(110px,1fr) auto}.welcome-look-options img{height:30px}.welcome-menu{gap:5px;padding:8px 15px}.welcome-character h1{font-size:19px}.welcome-character p{font-size:10px}.welcome .welcome-start{min-height:40px;padding:8px}.welcome-links{display:none}}
@media(prefers-reduced-motion:reduce){#welcome-canvas{transition:none}}

.end-inspection{position:absolute;right:12px;bottom:12px;z-index:6;min-height:44px;padding:9px 15px;background:#f3eddb;color:#284a3b;border:1px solid #c4b883;border-radius:9px;box-shadow:0 4px 15px #112c3c40;font-size:12px}