/* Portrait arrangement only: floating HUD, growing stage, commands then quiz. */
@media (orientation:portrait) {
  body.battle-mode .app {
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    padding:0;
  }
  body.battle-mode main {display:flex;min-height:0;height:100%;padding:0}
  #battle {flex:1;min-width:0;min-height:0}
  .battle-layout {height:100%;padding:0}
  .battle-frame {position:relative;flex:1;min-height:0;height:100%;border:0;border-radius:0}
  #board {position:relative;flex:1 1 0;min-height:0;aspect-ratio:auto}
  #battlefield {position:absolute;inset:0;width:100%;height:100%;object-fit:fill}

  .topbar {
    position:absolute;z-index:6;inset:0 0 auto;
    display:flex;align-items:center;gap:7px;
    height:calc(54px + env(safe-area-inset-top,0px));min-height:54px;
    padding:calc(5px + env(safe-area-inset-top,0px)) calc(7px + env(safe-area-inset-right,0px)) 5px calc(7px + env(safe-area-inset-left,0px));
    background:linear-gradient(#1d322ee8,#1d322ead);
    border-bottom:1px solid #c3ad6766;
    box-shadow:0 3px 12px #102a2433;
    pointer-events:none;
  }
  .stats {display:flex;align-items:center;justify-content:space-between;gap:5px;flex:1;min-width:0}
  .stats>div {gap:3px;min-width:0;white-space:nowrap}
  .stats>div>span:first-child {font-size:15px}
  .stats b {font-size:clamp(12px,3.85vw,16px);font-variant-numeric:tabular-nums;line-height:1}
  .stats small {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .stats .kills {display:none}
  .utility {flex:none;gap:3px;pointer-events:auto}
  .utility button {width:36px;min-width:36px;height:44px;padding:0;font-size:15px}
  #wave-banner {top:calc(66px + env(safe-area-inset-top,0px));max-width:92%;font-size:14px}

  .combat-bar {
    display:grid;grid-template-columns:minmax(188px,1.25fr) minmax(104px,1fr);
    flex:0 0 auto;align-items:stretch;gap:8px;
    height:80px;min-height:80px;
    padding:8px calc(8px + env(safe-area-inset-right,0px)) 7px calc(8px + env(safe-area-inset-left,0px));
    border-top:2px solid #9c8755;background:#263a2d;
  }
  .spells {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;height:100%;min-width:0}
  .spells button {
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    width:100%;min-width:0;min-height:60px;gap:2px;padding:4px 0 2px;text-align:center;
    border:1px solid #9caa7050;border-radius:7px;background:#9caf6910;
  }
  .spells .seal {width:26px;height:26px;font-size:21px}
  .spells b {font-size:10px;line-height:1.3;letter-spacing:0;white-space:nowrap}
  .spells small {font-size:8px;line-height:1.25;max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spell-cost {top:0;right:1px;font-size:9px;line-height:13px}
  .spells kbd {display:none}
  .combat-bar #wave-btn {width:100%;min-width:0;height:100%;min-height:60px;padding:6px;font-size:12px;white-space:normal;line-height:1.5}

  #wave-dock {
    display:block;flex:0 0 auto;min-height:0;border:0;background:#263a2d;
    padding:5px calc(8px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));
  }
  #wave-dock .quiz-launch {width:100%;min-width:0;min-height:54px;margin:0;gap:12px}
  #wave-dock .quiz-launch>span:last-child {display:flex;align-items:center;gap:10px}
  #wave-dock .quiz-launch b {font-size:16px}
  #wave-dock .quiz-launch small {font-size:10px}
  #wave-dock .quiz-seal {width:32px;height:32px;font-size:24px}
}
@media (orientation:portrait) and (max-width:359px) {
  .topbar {gap:3px;padding-inline:4px}
  .stats {gap:3px}
  .stats>div {gap:2px}
  .stats>div>span:first-child {font-size:12px}
  .utility {gap:1px}
  .utility button {width:33px;min-width:33px}
  .combat-bar {padding-inline:6px;gap:6px}
  #wave-dock .quiz-launch>span:last-child {gap:6px}
  #wave-dock .quiz-launch small {font-size:9px}
}