/* Checkpoint 1: one responsive touch dock and clear match pause controls.
 * Comes last. Does not modify site layout outside the battle view.
 */
#view-game .mobile-input-toggle{display:none}
#view-game .battle-pause-button{
  border:1px solid rgba(179,221,236,.32);border-radius:9px;
  padding:5px 10px;min-height:36px;background:#174e71;color:#fff;font-weight:800
}
#view-game .battle-pause-button:focus-visible,
#view-game .mobile-input-toggle:focus-visible,
#view-game .key:focus-visible,
#view-game .battle-pause-overlay button:focus-visible{outline:3px solid #ffd15b;outline-offset:2px}
#view-game .battle-pause-overlay{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(6,30,48,.78);backdrop-filter:blur(6px);padding:20px
}
#view-game .pause-dialog{
  width:min(390px,100%);text-align:center;padding:25px 20px;border-radius:18px;
  border:1px solid #c6e7ed;background:#f8fffd;box-shadow:0 20px 48px #051b32b0
}
#view-game .pause-dialog h3{font-size:24px;color:#194b69;margin:0 0 10px}
#view-game .pause-dialog p{font-size:14px;color:#457486;line-height:1.6}
#view-game #resume-game{min-height:54px;width:100%;font-size:17px;margin-top:14px}
#view-game #keyboard .key:disabled{opacity:.5}
@media(max-width:820px){
  #view-game{--touch-dock-h:126px;--skills-dock-h:58px}
  #view-game[data-input-mode="full"]{--touch-dock-h:158px}
  body[data-screen="game"] main{
    max-width:650px;
    padding:4px 7px calc(var(--touch-dock-h) + var(--skills-dock-h) + 20px + env(safe-area-inset-bottom,0px));
    min-height:100svh
  }
  #view-game .mobile-input-toggle{
    display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;
    background:#e9f9fc;color:#104e6e;border:1px solid #abd6e1;
    border-radius:9px;font-size:12px;font-weight:800;min-height:34px;
    touch-action:manipulation
  }
  #view-game .game-heading{margin-bottom:6px}
  #view-game .scores{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:4px;justify-content:center;width:100%
  }
  #view-game .scores>span{flex:1 1 18%;font-size:11px;min-width:0;padding:6px 2px}
  #view-game .scores>span:nth-of-type(5){display:none}
  #view-game .scores>button{flex:0 0 auto;min-height:34px;font-size:12px}
  #view-game .scores #leave-game{grid-column:auto;min-height:34px;padding:4px 9px;font-size:12px}
  #view-game .battle-pause-button{min-height:34px;padding:4px 9px}
  #view-game .mission-card{display:none}
  #view-game .battle{padding:6px}
  #view-game canvas{height:clamp(125px,20svh,176px)}
  #view-game .word-slots{scroll-margin-bottom:calc(var(--touch-dock-h) + var(--skills-dock-h) + 17px)}
  #view-game .controls{scroll-margin-bottom:calc(var(--touch-dock-h) + var(--skills-dock-h) + 12px)}
  #view-game .power-section{
    position:fixed;left:0;right:0;bottom:calc(var(--touch-dock-h) + env(safe-area-inset-bottom,0px));
    z-index:32;max-width:650px;width:100%;height:var(--skills-dock-h);
    margin:0 auto;padding:6px 8px 3px;
    border:1px solid #b2d5d9;border-bottom:0;border-radius:12px 12px 0 0;
    background:#eafcf7f7;box-shadow:0 -3px 10px #0d344b2e
  }
  #view-game .power-section .powers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}
  #view-game .power-section .power-button{
    min-height:45px;padding:5px 3px;font-size:12px;line-height:1.1;
    border-radius:10px;touch-action:manipulation
  }
  #view-game .power-section .active-powers{display:none}
  #view-game .keyboard{
    position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);
    z-index:32;max-width:650px;width:100%;height:var(--touch-dock-h);
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
    column-gap:7px;row-gap:6px;margin:0 auto;padding:6px 8px 10px;
    background:#e9f6fb;border-top:1px solid #b5d5e0;box-shadow:0 -4px 12px #092e492c;
    touch-action:manipulation
  }
  #view-game #keyboard .key,#view-game .keyboard>.key{
    grid-column:auto;grid-row:auto;min-width:0;width:100%;height:100%;min-height:49px;
    margin:0;border:1px solid #a9cbd7;border-bottom:3px solid #86afbd;
    border-radius:11px;font-size:24px;font-weight:850;background:#fff;
    -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
    touch-action:manipulation
  }
  #view-game #keyboard .key:active{background:#b8f0db;transform:translateY(1px)}
  #view-game[data-input-mode="full"] .keyboard{
    grid-template-columns:repeat(20,minmax(0,1fr));
    grid-template-rows:repeat(3,1fr);column-gap:0;row-gap:5px
  }
  #view-game[data-input-mode="full"] #keyboard .key{
    grid-column:span 2;height:100%;min-height:43px;
    border-radius:7px;font-size:17px;margin:0 1px
  }
  #view-game[data-input-mode="full"] #keyboard .key:nth-child(11){grid-column:2/span 2}
  #view-game[data-input-mode="full"] #keyboard .key:nth-child(20){grid-column:4/span 2}
}
@media(max-width:820px) and (max-height:680px){
  #view-game canvas{height:clamp(100px,16svh,130px)}
  #view-game .mascot-coach{display:none}
  #view-game .hint{font-size:10px}
}
@media(max-width:350px){
  #view-game .scores>button{font-size:11px;padding:4px 5px}
  #view-game[data-input-mode="full"] #keyboard .key{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  #view-game .key{transition:none}
  #view-game .battle-pause-overlay{backdrop-filter:none}
}