/* The match becomes a single-screen game on phones and portrait tablets. */
.mobile-setup,.battle-toolbar{display:none}
.aim-indicator{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--lime);font-weight:700;font-size:12px;border:2px solid var(--lime);padding:8px 12px;white-space:nowrap;box-shadow:0 3px 8px #1d281a22;transform:translate(-50%,-100%)}
.aim-indicator:after{content:'';position:absolute;left:calc(50% - 5px);bottom:-7px;border-width:5px 5px 0;border-style:solid;border-color:var(--lime) transparent transparent}
@media(max-width:900px){
  html{scroll-padding-top:12px}
  body{overflow-x:hidden}
  main{max-width:540px;padding:0 12px}
  .site-header{height:60px;padding:0 18px}
  .brand{font-size:10px;gap:8px}.brand-igo{font-size:23px}.brand-mark{width:29px;height:29px}
  .header-caption,.mode-badge{display:none}
  .header-actions{gap:10px}.text-button{min-height:44px;font-size:12px}.icon-button{height:44px;width:44px;padding:12px}
  .title-row{margin:21px 3px 16px}.title-row h1{font-size:clamp(23px,5.6vw,30px);letter-spacing:-1.3px;margin:7px 0}.title-star{font-size:31px;margin-left:8px}
  .title-row p{font-size:11px;letter-spacing:0}.title-row p strong{margin-left:4px}.eyebrow{font-size:9px}
  .mobile-setup{display:block;margin:0 0 12px}
  .mobile-setup .match-settings{display:flex;align-items:center;gap:10px;margin:0}
  .mobile-setup label{font-size:11px;white-space:nowrap;margin:0}.mobile-setup .select-wrap{flex:1;min-width:0}
  .mobile-setup select{font-size:12px;min-height:44px;padding:11px 26px 11px 10px;background:#ebeede}
  .arena-layout{display:flex;flex-direction:column;gap:27px}.arena{width:100%}
  .scoreboard{height:82px;padding:8px 17px}.player-label{font-size:11px}.score{font-size:30px}.score-details{font-size:9px}
  .clock #timer{font-size:40px}.clock #timer span{font-size:23px}.clock-tag{font-size:6px}.clock-label{font-size:8px}
  .board-shell{width:100%;max-width:520px}
  .start-title{font-size:clamp(32px,8.8vw,44px)}.ready-stamp{font-size:7px;margin-bottom:11px}
  .start-overlay p{font-size:11px;line-height:1.8;margin:13px 0 17px}
  .primary-button{min-height:48px;font-size:13px}.under-button{min-height:44px;font-size:10px;margin-top:8px}
  .board-bottom{height:44px;padding:0 12px}.ammo-label{font-size:11px;gap:5px}.ammo-label small{font-size:11px}
  .ammo-pips{gap:4px;margin-left:6px}.ammo-pips i{width:17px;height:9px}
  #pauseBtn{width:44px;height:44px;border:0;font-size:20px}.board-hint{font-size:10px;margin:0 6px 12px}
  .mobile-dock{position:relative;inset:auto;display:block;width:100%;padding:9px 12px 6px;z-index:4;border-top:1px solid #c6cdb5;background:#f3f3e9;box-shadow:none;backdrop-filter:none}
  .dock-energy-row{display:flex;align-items:center;gap:8px;height:19px;margin-bottom:6px}
  .dock-energy-row>span{font-size:10px;letter-spacing:1px;font-weight:700;white-space:nowrap}
  .dock-energy-row>b{font-size:14px;width:25px;font-variant-numeric:tabular-nums}
  .dock-energy-row>small{font-size:10px;color:#75835c;white-space:nowrap}
  .dock-meter{flex:1;height:6px;background:#d9dfc8;overflow:hidden}.dock-meter>i{display:block;height:100%;background:#9ab52d;width:0}
  .dock-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dock-buttons>button{min-width:0;min-height:65px;position:relative;overflow:hidden;display:grid;grid-template-columns:29px 1fr;grid-template-rows:23px 19px;gap:0 6px;align-content:center;align-items:center;padding:8px;border:1px solid #c2c9b3;text-align:left;background:#eceee3;touch-action:manipulation}
  .dock-buttons>button[data-skill=bomb]{--accent:var(--coral)}.dock-buttons>button[data-skill=flip]{--accent:var(--purple)}.dock-buttons>button[data-skill=reload]{--accent:var(--blue)}
  .dock-buttons>button>svg{grid-row:1/3;width:28px;height:28px}.dock-buttons>button>b{font-size:13px;white-space:nowrap}
  .dock-buttons>button>small{font-size:10px;color:#6f785f;font-variant-numeric:tabular-nums;white-space:nowrap}
  .dock-buttons>button>i{position:absolute;bottom:0;left:0;height:3px;background:var(--accent);width:0}
  .dock-buttons>button.ready{background:var(--accent);border-color:#6d775a;opacity:1}
  .dock-buttons>button.ready small{color:#38402d;font-weight:700}.dock-buttons>button.selected{outline:2px solid var(--ink);outline-offset:1px;box-shadow:0 3px 0 var(--ink)}
  .dock-buttons>button:disabled{opacity:.6}
  .dock-status-row{min-height:31px;display:flex;align-items:center;gap:5px;margin-top:2px}
  #dockStatus{flex:1;min-width:0;font-size:10px;line-height:1.5;color:#64714e}
  #dockCancel{position:relative;width:44px;height:31px;font-size:12px;padding:0;flex-shrink:0;font-weight:600;color:#3d482d}
  #dockCancel:disabled{opacity:.3}
  .control-panel{width:100%}.control-panel>.energy-block,.control-panel>.selection-hint,.control-panel>.opponent-energy{display:none}
  .control-panel h2{font-size:23px;margin:9px 0}.loadout-copy{font-size:12px;line-height:1.9}.loadout-copy br{display:none}
  .skills{margin-top:15px;gap:9px}.skill-card{min-height:90px;padding:12px;gap:11px}.skill-card.selected{padding:11px}
  .skill-icon{width:43px;height:43px}.skill-text p{font-size:11px}.skill-state{font-size:9px}.skill-cost kbd{display:none}
  .skill-text h3{font-size:16px}.skill-english{font-size:8px}.skill-card:hover{transform:none}
  .win-rule b{font-size:12px}.win-rule p{font-size:11px}.battle-feed{font-size:11px}
  .tips-row{grid-template-columns:1fr;margin-top:24px}.tips-row article,.tips-row article+article{border-left:0;border-bottom:1px solid var(--line);padding:18px 8px;gap:14px}
  .tips-row article:last-child{border-bottom:0}.tips-row h3{font-size:13px}.tips-row p{font-size:11px}
  .tiny-diagram,.tip-symbol,.tip-number{display:block}
  footer{flex-direction:column;gap:12px;padding:20px 0 25px}footer>div{justify-content:space-between;gap:10px}footer button{min-height:44px;font-size:10px}
  dialog{max-height:calc(100dvh - 30px);padding:26px 22px}.dialog-close{width:44px;height:44px;right:5px;top:4px}
  .help-rules p,details p{font-size:12px}.help-rules b{font-size:13px}summary{min-height:44px;padding:12px 0}
  /* Keep countdown, play, pause and result in one stable viewport. */
  body.battle-view{overflow:hidden;padding:0;overscroll-behavior:none}
  body.battle-view .site-header,body.battle-view .title-row,body.battle-view .mobile-setup,body.battle-view .control-panel,body.battle-view .tips-row,body.battle-view footer{display:none}
  body.battle-view .arena-layout{position:fixed;inset:0;height:100dvh;z-index:30;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--paper)}
  body.battle-view .arena{height:100%;max-width:540px;min-height:0;display:flex;flex-direction:column;justify-content:space-between;border:0;box-shadow:none;background:#e9e7db}
  body.battle-view .battle-toolbar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;min-height:40px;height:40px;background:var(--paper);padding:0 8px}
  .battle-toolbar>span{font-size:10px;letter-spacing:1px}.battle-toolbar>span b{font-size:17px;letter-spacing:-.7px}
  .battle-toolbar>button{min-height:40px;min-width:44px;font-size:12px;padding:4px 6px}.battle-toolbar>button:last-child{font-size:17px}
  body.battle-view .scoreboard{flex-shrink:0;width:100%;height:76px;padding:7px 19px}
  body.battle-view .time-track{flex-shrink:0;height:4px}
  body.battle-view .board-shell{flex-shrink:0;width:min(calc(100% - 12px),calc(100dvh - 310px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));max-width:520px;min-height:0;margin:auto;aspect-ratio:1}
  body.battle-view .board-bottom{flex-shrink:0;height:44px;width:100%;background:#e8ebdf}
  body.battle-view .board-hint{display:none}
  body.battle-view .mobile-dock{flex-shrink:0;display:block;margin:0}
  .board-notice{font-size:11px;top:8px;padding:7px 10px;white-space:normal;text-align:center;line-height:1.6}
  .result-overlay{padding:12px 10px;overflow:auto;justify-content:safe center}
  .result-overlay h2{font-size:clamp(34px,9vw,49px);letter-spacing:-2px;margin:10px 0 0}
  .result-overlay .eyebrow{font-size:8px}.result-overlay>p{font-size:11px;margin:7px 0}
  .result-score{font-size:35px;margin:4px 0}.result-stats{font-size:9px;line-height:1.65}
  .result-overlay .result-tip{font-size:10px;margin:7px 12px;line-height:1.6}
  .result-overlay .primary-button{min-height:44px;padding:10px 19px;flex-shrink:0}
  .result-actions{margin-top:8px;gap:16px;flex-shrink:0}.result-actions button{min-height:35px;font-size:11px}
  .pause-overlay h2{font-size:27px}.pause-overlay p{font-size:12px;margin:12px 0 20px}
  .countdown-overlay>span{font-size:100px;letter-spacing:-5px}
}
@media(max-width:900px) and (max-height:680px){
  body.battle-view .battle-toolbar{height:34px;min-height:34px}.battle-toolbar>button{min-height:34px}
  body.battle-view .scoreboard{height:66px;padding:5px 16px}.clock #timer{font-size:35px}.score{font-size:27px}.clock-tag{display:none}
  body.battle-view .board-shell{width:min(calc(100% - 10px),calc(100dvh - 275px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
  body.battle-view .mobile-dock{padding:7px 10px 4px}.dock-buttons>button{min-height:57px;padding:5px 7px}
  .dock-status-row{min-height:26px}#dockCancel{height:26px}.result-overlay .result-tip{display:none}
  .result-overlay h2{font-size:35px;margin-top:6px}.result-score{font-size:30px}.result-overlay .primary-button{margin-top:7px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  body.battle-view .arena{display:grid;max-width:860px;grid-template-columns:minmax(0,1fr) minmax(250px,.88fr);grid-template-rows:34px 66px 4px minmax(0,1fr) 42px;grid-template-areas:'toolbar toolbar' 'board score' 'board track' 'board dock' 'stock dock';column-gap:12px;padding:0 12px}
  body.battle-view .battle-toolbar{grid-area:toolbar;padding:0}
  body.battle-view .scoreboard{grid-area:score;padding:5px 8px}
  body.battle-view .time-track{grid-area:track}
  body.battle-view .board-shell{grid-area:board;width:min(100%,calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));align-self:center}
  body.battle-view .board-bottom{grid-area:stock;height:42px;padding:0 7px}
  body.battle-view .mobile-dock{grid-area:dock;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border:0;padding:8px 0}
  .dock-energy-row{flex-shrink:0}.dock-buttons{gap:6px}.dock-buttons>button{grid-template-columns:1fr;grid-template-rows:27px 21px 17px;justify-items:center;padding:8px 3px;min-height:83px}.dock-buttons>button>svg{grid-row:auto;width:24px;height:24px}.dock-buttons>button>b{font-size:12px}.dock-buttons>button>small{font-size:9px}
  .dock-status-row{margin-top:10px}.score-details{font-size:8px}.player-label{font-size:9px}
  .result-overlay .eyebrow,.result-overlay>p{display:none}.result-overlay h2{font-size:32px;margin:0}.result-stats{font-size:8px}.result-overlay .primary-button{font-size:11px;min-height:40px}.result-actions{margin-top:6px}.result-actions button{font-size:10px}
}
@media(min-width:901px){.mobile-dock{display:none!important}.aim-indicator{font-size:13px}}

@media(max-width:380px){
  .dock-buttons>button{grid-template-columns:22px 1fr;column-gap:3px;padding-left:6px;padding-right:6px}
  .dock-buttons>button>svg{width:22px;height:22px}
  .dock-buttons>button>b{font-size:12px}.dock-buttons>button>small{font-size:9px}
}