/* The phone play screen prioritizes the picture, answer and typing surface. */
.game-menu,.game-collection{display:none}
.picture-open{position:absolute;inset:0;border:0;background:transparent;border-radius:inherit;cursor:zoom-in;z-index:1}
.picture-open-label{position:absolute;bottom:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;background:#fffdf2db;border-radius:9px;color:#8c7854}
.picture-open-label svg{width:16px;height:16px}
.picture-dialog .dialog-heading{font-size:25px;margin-right:20px}
.zoom-image{width:100%;height:min(62dvh,450px);object-fit:contain}
.zoom-image.flipped{transform:scaleX(-1)}
.key{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.keyboard-row{width:100%;margin-inline:auto}
.keyboard-row:nth-child(2){width:97%}
.keyboard-row:nth-child(3){width:94%}
.keyboard-row:nth-child(3) .key{flex-basis:calc((100% - 9*var(--key-gap))/10.6)}
.key-backspace{flex-grow:1}
.key.is-pressed{background:var(--yellow)!important;transform:translateY(1px);filter:none}
.key-preview{position:fixed;z-index:80;width:56px;height:64px;display:grid;place-items:center;background:#fff4c9;color:var(--ink);border:2px solid #ad9058;border-radius:16px;box-shadow:0 5px 14px #302c4225;font-size:34px;font-weight:900;pointer-events:none}
.key-preview:after{content:'';position:absolute;width:11px;height:11px;background:#fff4c9;border-right:2px solid #ad9058;border-bottom:2px solid #ad9058;bottom:-8px;left:20px;transform:rotate(45deg)}

@media(max-width:760px){
  body.playing{--dock-bottom:calc(12px + env(safe-area-inset-bottom));padding-bottom:0}
  body.playing #header{display:none}
  body.playing #app{padding:calc(8px + env(safe-area-inset-top)) 16px calc(210px + var(--dock-bottom) + 16px)}
  body.playing .game-screen{max-width:480px;animation:none}
  body.playing .game-top{display:flex;gap:8px;min-height:52px;margin-bottom:12px;align-items:center}
  body.playing .game-top .back-link{display:inline-flex;align-items:center;justify-content:center;gap:0;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;line-height:0}
  body.playing .game-level{flex:1;min-width:0;text-align:left}
  body.playing .game-level .overline,body.playing .level-pill{display:none}
  body.playing .game-level h1{font-size:20px;margin:0;white-space:nowrap}
  body.playing .game-collection{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;padding:7px 0}
  body.playing .game-collection svg{width:18px;height:18px;color:#9a6714;fill:var(--yellow)}
  body.playing .game-menu{display:grid;flex:0 0 44px;width:44px;height:44px;place-items:center;background:transparent;border:0;box-shadow:none}
  body.playing .game-layout{display:grid;grid-template-columns:1fr;gap:16px}
  body.playing .picture-card{width:min(100%,clamp(96px,calc(100dvh - 438px - env(safe-area-inset-top)),300px));border-radius:26px}
  body.playing .picture-tag{display:none}
  body.playing .answer-caption,body.playing .keyboard-note,body.playing .game-footer{display:none}
  body.playing .answer-status{height:30px;font-size:11px;padding:4px 0}
  body.playing .answer-tools{margin:4px 0 0;gap:18px;min-height:44px}
  body.playing .hint-button{min-height:44px}
  body.playing .keyboard-dock{position:fixed;z-index:20;left:0;right:0;bottom:var(--dock-bottom);padding:12px max(6px,env(safe-area-inset-right)) 8px max(6px,env(safe-area-inset-left));border:1px solid #e0d0bb;border-radius:23px;background:linear-gradient(180deg,#fff8ed,#f0e4d2);box-shadow:inset 0 2px 0 #fffdf6,0 -5px 22px #71532e0d}
  body.playing .keyboard{--key-gap:2px;gap:7px;max-width:560px;margin:0 auto}
  body.playing .key{--key-face:#fff0bb;--key-edge:#ddc485;--key-depth:#c8ac69;background:linear-gradient(180deg,#ffffff5c,transparent 55%),var(--key-face);border:1px solid var(--key-edge);border-bottom:3px solid var(--key-depth);border-radius:10px;min-height:58px;font-size:22px;font-weight:800;color:#383046;box-shadow:inset 0 2px 0 #ffffffa6,0 2px 3px #71532e0a;text-shadow:0 1px 0 #ffffff66}
  body.playing .key:nth-child(4n+2){--key-face:#ffe0c7;--key-edge:#dfb391;--key-depth:#c89c79}
  body.playing .key:nth-child(4n+3){--key-face:#e9dbfa;--key-edge:#bfa7d9;--key-depth:#a68cc3}
  body.playing .key:nth-child(4n+4){--key-face:#dceccf;--key-edge:#b2c99f;--key-depth:#98b383}
  body.playing .key:hover:not(:disabled){transform:none;filter:brightness(1.025)}
  body.playing .key:active:not(:disabled),body.playing .key.is-pressed{background:var(--yellow);transform:translateY(1px);box-shadow:inset 0 2px 4px #b1831926}
  body.playing .key.key-backspace{--key-face:#d9c5ef;--key-edge:#b49bcd;--key-depth:#9880b3;color:#634587}
  body.playing .key-backspace svg{width:22px;height:22px}
  body.playing #toast{bottom:calc(var(--dock-bottom) + 220px)}
}

@media(max-width:760px) and (max-height:620px){
  body.playing .game-top{min-height:44px;margin-bottom:8px}
  body.playing .game-layout{gap:10px}
  body.playing .slot,body.playing .slots.long .slot{height:39px}
  body.playing .answer-status{height:24px;font-size:10px}
  body.playing .answer-tools{margin-top:0}
  body.playing .key{min-height:56px}
}