/* Compact layouts keep card faces at 2:3; no stretched desktop canvas. */
html,body { min-width:0; }
.app-shell,.home-screen { height:100dvh; }
button { -webkit-tap-highlight-color:transparent; }
#terrainDetails { width:min(440px,92vw); padding:24px; color:#eff9ff; background:#0b1d2b; border:1px solid var(--cyan); }
#terrainDetails h2 { color:var(--cyan); font:28px var(--display); }
#terrainDetails p { font-size:16px; line-height:1.6; }
#terrainDetails .button { background:var(--cyan); color:#07121b; min-height:44px; }
@media (max-width:1100px) {
  :root { --mobile-hand:150px; --mobile-top:100px; --mobile-controls:62px; }
  .app-shell { min-width:0; min-height:0; padding:0; overflow:hidden; }
  .app-shell::before { background-size:cover; }
  .arena-wrap,.game-layout { min-width:0; min-height:0; }
  .arena { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:calc(var(--mobile-top) + env(safe-area-inset-top)) 8px calc(var(--mobile-hand) + var(--mobile-controls) + env(safe-area-inset-bottom)); gap:8px; min-height:0; filter:none; }
  .sector { min-height:0; padding:2px; gap:5px; grid-template-rows:minmax(0,1fr) 52px minmax(0,1fr); }
  .location-side { min-width:0; min-height:0; padding:3px; gap:3px; container-type:size; }
  .arena .card-slot:nth-child(n) { width:min(23cqw,64cqh); height:auto; min-height:0; max-height:none; aspect-ratio:2/3; margin:0; transform:none; }
  .arena .board-card { inset:0; width:100%; height:100%; min-height:0; transform:none; }
  .arena .board-card:hover,.arena .board-card:focus-visible { transform:none; }
  .location-panel { height:52px; min-width:0; padding:3px; gap:3px; }
  .location-copy { min-width:0; padding:0; }
  .location-copy b { font-size:12px; line-height:1.1; overflow-wrap:anywhere; }
  .location-copy small { display:none; }
  .location-copy b::after { content:' ⓘ'; font:10px sans-serif; color:var(--cyan); }
  .location-score { width:26px; height:34px; flex:0 0 26px; padding:2px; }
  .location-score b { font-size:20px; }
  .pending-effects { left:3px; right:3px; top:calc(50% + 9px); }
  .pending-effects button { flex-basis:65px; }
  .opponent-rack { top:calc(8px + env(safe-area-inset-top)); height:74px; transform:translateX(-50%) scale(.65); transform-origin:top center; }
  .battle-hud .round-block { top:calc(8px + env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); padding:6px; gap:2px; }
  .battle-hud .round-block span { font-size:9px; }
  .battle-hud .round-block strong { font-size:14px; }
  .battle-hud .top-actions { top:calc(8px + env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); }
  #settingsButton { width:44px; height:44px; min-width:44px; }
  .hand-zone { height:calc(var(--mobile-hand) + var(--mobile-controls)); }
  .hand-label { display:none; }
  .hand { left:0; bottom:calc(var(--mobile-controls) + env(safe-area-inset-bottom)); width:100%; height:var(--mobile-hand); padding:8px 12px; gap:8px; justify-content:flex-start; align-items:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; pointer-events:auto; transform:none; filter:none; }
  .hand .hand-card:nth-child(n) { flex:0 0 auto; width:calc((var(--mobile-hand) - 16px) * 2 / 3); height:auto; min-height:0; aspect-ratio:2/3; margin:0; transform:none; animation:none; touch-action:none; }
  body:is(.drag-active,:has(.hand-card.selected)) .hand { transform:translateY(20px) scale(.78); transform-origin:50% 100%; opacity:.55; }
  .hand .hand-card.selected { outline:2px solid var(--acid); }
  .drag-ghost { width:96px!important; height:144px!important; min-height:0!important; margin:-154px 0 0 -48px!important; }
  .turn-controls { right:max(10px,env(safe-area-inset-right)); bottom:calc(8px + env(safe-area-inset-bottom)); }
  .turn-controls #resolveButton { min-width:125px; min-height:44px; padding:8px 12px; font-size:15px; }
  .arena-header.bandwidth-meter { left:max(10px,env(safe-area-inset-left)); bottom:calc(8px + env(safe-area-inset-bottom)); width:156px; min-width:0; height:44px; min-height:0; padding:5px 8px; gap:6px; }
  .bandwidth-meter .bandwidth-name,.bandwidth-icon { display:none; }
  .bandwidth-cells { gap:3px; flex:1; }
  .bandwidth-cells i { width:9px; height:22px; }
  .bandwidth-meter strong { font-size:24px; }
  dialog { max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overscroll-behavior:contain; }
  dialog input,dialog select { font-size:16px; min-height:44px; }
  dialog .button,dialog .close-button,.deck-add,.deck-row { min-height:44px; }
  .deck-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .deck-builder { grid-template-columns:minmax(0,1fr) 260px; }
  #collectionGrid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  #endReviewToolbar { bottom:calc(8px + env(safe-area-inset-bottom)); max-width:calc(100vw - 16px); }
  #endReviewToolbar button { min-height:44px; }
  #roomHud { max-width:calc(100vw - 110px); }
}
@media (max-width:650px) and (orientation:portrait) {
  :root { --mobile-hand:156px; --mobile-top:108px; }
  .arena { gap:4px; padding-left:4px; padding-right:4px; }
  .sector { grid-template-rows:minmax(0,1fr) 48px minmax(0,1fr); gap:4px; }
  .location-side { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .arena .card-slot:nth-child(n) { width:min(45cqw,31cqh); }
  .location-panel { height:48px; position:relative; align-items:flex-end; }
  .location-copy { position:absolute; inset:3px 2px auto; text-align:center; }
  .location-copy b { font-size:10px; }
  .location-score { width:23px; height:25px; flex-basis:23px; }
  .location-score b { font-size:17px; }
  .location-score small { display:none; }
  .opponent-rack { top:calc(49px + env(safe-area-inset-top)); transform:translateX(-50%) scale(.46); }
  .home-screen { overflow-y:auto; padding:30px 16px; }
  .home-screen .home-nav { position:relative; top:auto; margin:12px 0 24px; }
  .home-screen .home-content { position:relative; height:auto; min-height:0; }
  .home-screen .home-copy { position:relative; top:auto; left:auto; width:100%; max-width:420px; margin:auto; transform:none; z-index:2; }
  .home-screen .home-copy h1 { white-space:normal; font-size:30px; }
  .home-screen .home-actions .button { height:64px; font-size:30px; }
  .home-screen .home-links button { min-height:48px; font-size:16px; }
  .home-screen .home-card { position:fixed; top:60%; height:45vh; width:auto; opacity:.2; pointer-events:none; }
  .deck-dialog { overflow-y:auto; }
  .deck-head { height:auto; padding:16px; gap:10px; }
  .deck-head h2 { font-size:24px; }
  .deck-builder { height:auto; display:flex; flex-direction:column; }
  .collection-pane { flex:none; overflow:visible; padding:12px; }
  #collectionGrid { flex:none; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .deck-pane { flex:none; border-left:0; border-top:1px solid var(--cyan); }
  #deckList { max-height:280px; flex:none; }
  .deck-section-title { flex-wrap:wrap; gap:6px; }
  .deck-filters label { min-width:0; flex:1 1 90px; }
  .deck-filters input { width:100%; }
  #cardPreview { padding:60px 12px 16px; }
  .card-preview-face { width:min(86vw,calc((100dvh - 210px) * 2 / 3)); }
  #cardPreview p { font-size:12px; margin:0; }
  .end-locations,#roomEnd .end-locations { grid-template-columns:1fr; }
  .end-actions,.deck-actions { flex-wrap:wrap; gap:8px; }
  .collection-tabs { padding:10px; flex-wrap:wrap; }
  .library-heading label { width:100%; }
  .library-heading input,.library-heading select { width:100%; font-size:16px; }
  .progress-body { padding:12px; }
  #openingCards { grid-template-columns:1fr; max-width:240px; gap:50px; }
  .opening-card { width:100%; height:auto; aspect-ratio:2/3; }
  .opening-caption { font-size:12px; }
  #closeBoosterOpening { width:44px; height:44px; }
}
@media (max-width:1100px) and (orientation:landscape) and (max-height:600px) {
  :root { --mobile-hand:105px; --mobile-top:56px; --mobile-controls:52px; }
  .arena { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  .opponent-rack { transform:translateX(-50%) scale(.45); }
  .sector { grid-template-rows:minmax(0,1fr) 30px minmax(0,1fr); gap:2px; }
  .location-panel { height:30px; }
  .location-score { height:24px; }
  .location-score b { font-size:17px; }
  .location-score small { display:none; }
  .home-screen { overflow-y:auto; }
  .home-screen .home-content { min-height:580px; }
  .home-screen .home-copy { top:100px; }
  #cardPreview[open] { flex-direction:row; flex-wrap:wrap; padding:12px 60px; }
  .card-preview-face { width:calc((100dvh - 40px) * 2 / 3); }
  #cardPreview p { display:none; }
}