/* Mobile portrait battle: gameplay first, with always-accessible touch controls. */
#view-game .mobile-quick-toggle{display:none}
@media(max-width:820px){
  body[data-screen="game"] .top,body[data-screen="game"] footer{display:none!important}
  body[data-screen="game"] main{max-width:650px;padding:5px 7px calc(223px + env(safe-area-inset-bottom,0px));min-height:100svh}
  #view-game{--keyboard-h:140px}
  #view-game .game-heading{display:block;margin:0 0 4px}
  #view-game .game-heading h2,#view-game .under-title{display:none}
  #view-game .game-heading .eyebrow{font-size:12px;letter-spacing:.3px;line-height:1.3;color:white}
  #view-game .scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;justify-content:stretch}
  #view-game .scores>span{font-size:11px;line-height:1.1;min-width:0;padding:5px 2px;white-space:nowrap;text-align:center}
  #view-game .scores>span:nth-of-type(5){display:none}
  #view-game .mobile-quick-toggle{display:block;background:#15466b;color:white;border:1px solid #7ba9c7;border-radius:8px;min-height:27px;font-size:14px;padding:2px 5px;touch-action:manipulation}
  #view-game #leave-game{grid-column:3/5;border-radius:8px;background:#155276;color:white;border:1px solid #7ba9c7;min-height:27px;font-size:12px;padding:3px}
  #view-game .battle-layout{grid-template-columns:minmax(0,1fr);gap:4px}
  #view-game .mission-card{position:static;display:block;padding:4px 7px;min-height:0;margin:0;border-radius:8px}
  #view-game .mission-card h3,#view-game .mission-card ul,#view-game .mission-card .mini-status span{display:none}
  #view-game .mini-status{display:block;border:0;background:transparent;margin:0;padding:0;text-align:center}
  #view-game .mini-status strong{font-size:10px;line-height:1.2;display:block;color:#ebfaff}
  #view-game .battle{padding:5px;border:1px solid #bfdeeb;border-radius:14px;min-width:0}
  #view-game .energy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:5px}
  #view-game .energy-card{padding:5px 6px;min-width:0;border-radius:9px}
  #view-game .energy-head{font-size:10px;line-height:1.1;margin-bottom:4px;gap:3px}
  #view-game .energy-head strong,#view-game .energy-head span{white-space:nowrap}
  #view-game .energy-bar{height:8px}
  #view-game canvas{height:clamp(118px,20svh,165px);min-height:0;border-width:1px;border-radius:9px;box-shadow:none}
  #view-game .boss-banner{padding:5px;margin:0 0 4px;font-size:11px}
  #view-game .mascot-coach{padding:4px 6px;min-height:0;font-size:11px;line-height:1.2;margin:5px auto 0;gap:5px}
  #view-game .mascot-face{font-size:18px}
  #view-game .word-slots{gap:3px;margin:6px 0 4px;flex-wrap:wrap}
  #view-game .slot{width:clamp(18px,6.6vw,27px);min-width:0;height:31px;font-size:16px;padding:1px 2px;border-radius:5px;border-bottom-width:2px}
  #view-game .slot.space{min-width:8px;width:8px}
  #view-game .hint{min-height:0;font-size:10px;line-height:1.25;margin:3px 0}
  #view-game .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 0}
  #view-game .controls .button{padding:6px 2px;min-height:36px;font-size:11px;line-height:1.15;border-radius:9px;white-space:normal;box-shadow:none}
  #view-game .feedback{font-size:11px;min-height:0;line-height:1.25;padding:5px 7px;margin:4px 0;border-radius:9px}
  #view-game .power-section{position:fixed;left:0;right:0;bottom:calc(var(--keyboard-h) + env(safe-area-inset-bottom,0px));z-index:31;max-width:650px;width:100%;margin:0 auto;padding:5px 7px 3px;border:1px solid #94c9c8;border-radius:11px 11px 0 0;background:#e9fff3f7;box-shadow:0 -4px 15px #062a4470}
  #view-game .power-label{display:none}
  #view-game .powers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
  #view-game .power-button{min-height:39px;padding:3px 2px;font-size:11px;line-height:1;gap:3px;border-radius:9px;white-space:nowrap}
  #view-game .power-button small{display:none}
  #view-game .power-button .stock{padding:1px 4px}
  #view-game .active-powers{font-size:10px;min-height:12px;line-height:1.1;margin:3px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  #view-game .keyboard{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);z-index:31;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));grid-template-rows:repeat(3,39px);gap:4px 0;max-width:650px;width:100%;height:var(--keyboard-h);margin:0 auto;padding:6px 5px 8px;background:linear-gradient(#f2faff,#dff4ff);border-top:1px solid #9ccfe0;box-shadow:0 -3px 13px #06355055;touch-action:manipulation}
  #view-game .keyboard>.key{min-width:0;width:auto;grid-column:span 2;height:39px;margin:0 1px;border-radius:7px;padding:0;font-size:16px;font-weight:900;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  #view-game .keyboard>.key:nth-child(11){grid-column:2/span 2}
  #view-game .keyboard>.key:nth-child(20){grid-column:4/span 2}
}
@media(max-width:820px) and (max-height:700px){
  #view-game canvas{height:clamp(105px,17svh,130px)}
  #view-game .mascot-coach{display:none}
}
@media(max-width:355px){
  #view-game .keyboard>.key{font-size:14px}
  #view-game .power-button{font-size:10px}
  #view-game .slot{width:clamp(16px,6vw,23px);height:28px}
}
@media(max-width:820px) and (orientation:landscape) and (max-height:480px){
  #view-game canvas{height:105px}
}
@media(prefers-reduced-motion:reduce){
  #view-game .key,#view-game .power-button{transition:none}
}