/* Canonical active-play geometry. It must use the visible viewport, not 100vh. */
body:not(.keyboard-navigation) button:focus-visible{outline:none}
#round-feedback button.auto-focused:focus-visible{outline:none}
#round-feedback .answer-prefix{display:inline;font:inherit;margin:0}
body[data-game-phase="idle"] #story-card,body[data-game-phase="idle"] #play-controls{visibility:hidden}
@media(min-width:1001px){#menu-button{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:44px;padding:8px;font-size:11px}}
.story-text{width:100%;max-width:calc(30ch + 2px);margin-inline:auto;white-space:pre;overflow:hidden;font-size:20px;line-height:1.4;height:1.4em;min-height:1.4em;letter-spacing:0;text-align:left}
.story-text>span{white-space:pre}
@media(max-width:1000px){
  body.mobile-playing #round-feedback .answer-prefix{display:none}
  body.mobile-playing .return-panel{top:var(--return-center-top,50%);width:min(390px,calc(100vw - 24px));max-height:calc(var(--visible-height,100dvh) - 16px);padding:14px;overflow:auto;overscroll-behavior:contain}
  body.mobile-playing .return-panel p{margin:0 0 10px;font-size:13px;line-height:1.5}
  body.mobile-playing .return-panel button{min-height:44px;padding:8px 16px}
  body.mobile-playing #app{position:fixed;top:var(--viewport-top,0px);left:0;width:100%;height:var(--visible-height,100dvh);min-height:0;max-height:var(--visible-height,100dvh);padding:4px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:grid;grid-template-rows:44px minmax(0,1fr);gap:4px;overflow:visible}
  body.mobile-playing .topbar{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;min-height:44px;height:44px;padding:0;gap:6px;background:none}
  body.mobile-playing .brand{display:none!important}
  body.mobile-playing .topbar>.stats{flex:none;margin:0;gap:4px;width:auto;justify-content:flex-start}
  body.mobile-playing .stat{height:32px;padding:4px;gap:0;border-radius:6px}
  body.mobile-playing .stat strong{font-size:18px;line-height:1.1;min-width:0}
  body.mobile-playing .time-stat strong{min-width:49px}
  body.mobile-playing .stat small{display:none}
  body.mobile-playing .top-actions{display:flex;flex:none;align-items:center;flex-wrap:nowrap;gap:4px;margin:0}
  body.mobile-playing .top-actions>:not(#guess-button):not(#menu-button):not(#sound-button){display:none!important}
  body.mobile-playing .top-actions #menu-button,body.mobile-playing .top-actions #sound-button{display:block!important;min-width:44px;min-height:44px;width:44px;height:44px;padding:4px;font-size:11px}
  body.mobile-playing #sound-button{font-size:19px}
  body.mobile-playing #guess-button{display:inline-flex!important;align-items:center;justify-content:center;min-width:0;min-height:44px;height:44px;padding:4px 8px;gap:0;font-size:12px;line-height:1.2;white-space:nowrap;background:#173b43;border:1px solid #8eab9d70;border-radius:7px}
  body.mobile-playing #guess-button kbd{display:none}
  body.mobile-playing #game-area{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:46px minmax(0,1fr) 14px;gap:4px;min-height:0;max-height:100%;width:100%;max-width:none;margin:0;padding:0}
  body.mobile-playing .chapter-heading{display:none!important}
  body.mobile-playing #story-card{position:relative;grid-column:1;grid-row:1;align-self:stretch;order:initial;display:block;height:46px;min-height:46px;max-height:46px;margin:0;padding:9px 6px;border-radius:8px;overflow:hidden}
  body.mobile-playing .story-eyebrow{display:none}
  body.mobile-playing #story{width:100%;max-width:100%;font-size:clamp(16px,calc((100vw - 28px)/18),21px)!important;line-height:26px;height:26px;min-height:26px;max-height:26px;letter-spacing:0;white-space:pre;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body.mobile-playing .typing-input{left:8px;bottom:8px;width:calc(100% - 16px);height:28px;font-size:16px;opacity:.015;pointer-events:none}
  body.mobile-playing #painting-stage,body.mobile-playing.showing-result #painting-stage{grid-column:1;grid-row:2;order:initial;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;height:100%;width:100%;margin:0;padding:15px 0 0;overflow:visible}
  body.mobile-playing #art-frame{flex:none;width:var(--mobile-frame-width,100%);max-width:100%;margin:0 auto}
  body.touch-input .brass-plaque{padding-inline:19px}
  body.touch-input .brass-plaque::before,body.touch-input .brass-plaque::after{content:'';top:50%;width:3px;height:3px;transform:translateY(-50%);border-radius:50%;background:#75512a;box-shadow:0 1px #f1c78b}
  body.touch-input .brass-plaque::before{left:6px}
  body.touch-input .brass-plaque::after{right:6px}
  body.mobile-playing .brass-plaque{top:-16px;padding:2px 19px;font-size:7px;line-height:9px;letter-spacing:.4px;max-width:95%;white-space:nowrap}
  body.mobile-playing .canvas-label{flex:none;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:100%;height:12px;min-height:12px;margin:0;padding:0 80px 0 1px;font-size:7px;line-height:12px;letter-spacing:.2px}
  body.mobile-playing #play-controls{grid-column:1;grid-row:3;order:initial;position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:8px;width:100%;height:14px;min-height:14px;max-height:14px;margin:0;padding:0 80px 0 0}
  body.mobile-playing .attempts{font-size:8px;line-height:12px;gap:4px;letter-spacing:0}
  body.mobile-playing #attempt-dots{display:flex;gap:3px}
  body.mobile-playing #attempt-dots i{width:5px;height:5px}
  body.mobile-playing .round-time{display:inline!important;font-size:8px;line-height:12px;letter-spacing:.3px}
  body.mobile-playing .control-divider,body.mobile-playing #touch-type,body.mobile-playing .mobile-note{display:none!important}
  body.mobile-playing.showing-result #story-card{display:block!important;visibility:hidden;pointer-events:none}
  body.mobile-playing.showing-result #game-area #round-feedback.show{position:relative;inset:auto;transform:none;grid-column:1;grid-row:1;order:initial;align-self:stretch;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:22px 14px;gap:2px 7px;width:100%;height:46px;min-height:46px;max-height:46px;margin:0;padding:3px 6px;overflow:hidden;border-radius:8px}
  body.mobile-playing #round-feedback b{grid-column:1;grid-row:1;margin:0;align-self:center;font-size:18px;line-height:22px;white-space:nowrap}
  body.mobile-playing #round-feedback>span{grid-column:2;grid-row:1;align-self:center;min-width:0;margin:0;font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-playing #round-feedback em{grid-column:1/3;grid-row:2;align-self:center;min-width:0;max-width:100%;margin:0;font-size:10px;line-height:12px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  body.mobile-playing #round-feedback button{position:relative;isolation:isolate;grid-column:3;grid-row:1/3;align-self:center;margin:0;width:64px;min-width:64px;min-height:44px;height:44px;padding:0;border:0;background:transparent;box-shadow:none;font-size:11px;line-height:1.2}
  body.mobile-playing #round-feedback button::before{content:'';position:absolute;inset:6px 0;z-index:-1;border:1px solid #56c8bd66;border-bottom:3px solid #087d7d;border-radius:6px;background:#0caaa6;pointer-events:none}
  body.mobile-playing.showing-result #play-controls{visibility:hidden;pointer-events:none}
  body.mobile-playing .practice-guide{position:absolute;left:0;right:0;top:auto;bottom:14px;width:auto;max-height:24px;padding:2px 6px;font-size:8px;line-height:11px;overflow:auto;z-index:3}
  body.mobile-playing .practice-guide button{display:none}
  body.mobile-playing.compact-play #practice-guide{display:none!important}
  body.mobile-playing .gun-slot{position:absolute;right:0;bottom:auto;margin:0;pointer-events:none;overflow:visible}
  body.mobile-playing #gun-viewport{overflow:visible!important}
  body.touch-input:not(.scene-intro):not(.mobile-playing) #gun-viewport,body.touch-input:not(.scene-intro):not(.mobile-playing) #gun-slot,body.touch-input:not(.scene-intro):not(.mobile-playing) #gun{visibility:hidden!important;pointer-events:none}
  body.touch-input:not(.scene-intro):not(.mobile-playing) #gun-slot{display:none}
}

/* Home selection keeps existing workshop controls; progress is chapter-specific. */
.start-actions{display:grid;gap:7px;width:100%;max-width:330px;margin:0 auto}
.start-actions>button{width:100%;min-height:44px;font-size:12px;line-height:1.3;padding:9px 12px;white-space:normal}
.start-panel .difficulty-picker{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;margin-top:8px}
.start-panel .difficulty-picker .mode-label{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}
.start-panel .difficulty-picker label{margin:0;font-size:11px}
.start-panel #difficulty-info{position:relative;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font:700 11px/1 Arial,sans-serif;color:#285e61}
.start-panel #difficulty-info::before{content:'';position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border:1px solid currentColor;border-radius:50%;pointer-events:none}
.start-panel .difficulty-picker select{width:100%;min-width:0;min-height:44px}
#replay-rule{font-size:10px;line-height:1.4;margin-top:10px}
#difficulty-dialog p{font-size:13px;line-height:1.65}
