/* ============================================================
   Color Bus Escape - responsive layer
   Breakpoint plan (min width unless noted):
   base  = 3 column board layout, side panels visible
   <=1279 = tighten side columns
   <=1099 = hide objective panel, 2 columns
   <=819  = portrait single column, board flexes to fill
   <=640  = two row topbar (brand row + hud row), compact buttons
   <=380  = ultra compact hud
   short landscape (<=520h & landscape) = 3 columns again, ultra compact
   ============================================================ */

/* ---- very large displays: keep content from stretching ---- */
@media (min-width:1700px){
  .game-shell{max-width:1840px;margin-inline:auto}
  .menu-card{width:min(860px,100%)}
}

/* ---- large desktop / laptop ---- */
@media (min-width:1100px){
  .game-main{grid-template-columns:minmax(150px,clamp(150px,15vw,270px)) minmax(0,1fr) minmax(150px,clamp(150px,13vw,240px))}
}

/* ---- hide objective panel, keep passenger panel ---- */
@media (max-width:1099px){
  .game-main{grid-template-columns:minmax(130px,clamp(130px,20vw,200px)) minmax(0,1fr)}
  .side-right{display:none}
}

/* ---- portrait tablet & phone: single column ---- */
@media (max-width:819px){
  .game-main{display:flex;flex-direction:column;gap:7px;align-items:stretch}
  .passenger-panel{width:100%;flex:0 0 auto;padding:7px 9px;border-radius:14px}
  .passenger-panel h3{margin:0 0 5px;font-size:11px;display:flex}
  .wait-n{height:17px;min-width:19px;font-size:10px}
  .queue{display:none}
  .queue-summary{display:flex}
  .chip{padding:2px 7px;font-size:10px}
  .chip b{font-size:10px}
  .progress-wrap{margin-top:6px}
  .board-wrap{flex:1 1 auto;min-height:0;width:100%}
  .bottom-controls{flex-wrap:nowrap}
  .bottom-controls .btn{max-width:none}
}

/* ---- phone topbar: brand row + full width hud row ---- */
@media (max-width:640px){
  :root{--pad:8px;--gap:7px}
  .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "hud hud";row-gap:6px;column-gap:8px}
  .brand{grid-area:brand}
  .hud{grid-area:hud;justify-content:stretch;gap:5px}
  .toolbar{grid-area:tools}
  .brand>b{font-size:14px}
  .brand .level-tag{display:block;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .hud-card{max-width:none;border-radius:11px;padding:4px 6px}
  .hud-card small{font-size:8px;letter-spacing:.06em}
  .hud-card b{font-size:13px}
  .toolbar .btn{min-width:44px;min-height:44px;padding:6px 9px}
  .bottom-controls{gap:6px}
  .bottom-controls .btn{padding:8px 4px;font-size:11px;min-height:44px}
  .logo{font-size:clamp(34px,11vw,64px)}
  .menu-card{padding:clamp(16px,5vw,26px)}
}

/* ---- ultra small phones ---- */
@media (max-width:380px){
  .brand>b{font-size:12px}
  .hud-card{padding:3px 4px;border-radius:9px}
  .hud-card small{font-size:7px}
  .hud-card b{font-size:11px}
  /* 32px of copy + 12px margin here directly steals board height */
  .queue-note{display:none}
  .bottom-controls .btn{font-size:10px;padding:7px 2px;min-height:44px}
  .toolbar .btn{min-width:44px;min-height:44px;padding:5px 8px}
  .btn{border-radius:12px}
}

/* ---- short landscape: phones held sideways, small laptop windows ---- */
@media (max-height:560px) and (orientation:landscape){
  :root{--pad:7px;--gap:6px}
  .game-main{display:grid;grid-template-columns:minmax(110px,clamp(110px,17vw,180px)) minmax(0,1fr) minmax(110px,clamp(110px,17vw,180px));align-items:stretch}
  .side-right{display:block;padding:8px 10px}
  .side-right h3{font-size:11px;margin:0 0 4px}
  .side-right .pill{display:none}
  .status{font-size:11px;min-height:0}
  .passenger-panel{width:auto;flex:0 0 auto;padding:7px 8px;border-radius:13px}
  .passenger-panel h3{font-size:10px;margin:0 0 4px;display:flex}
  .queue{display:flex;flex-wrap:wrap;gap:2px}
  .queue-summary{display:none}
  .queue .person{transform:scale(.62);transform-origin:left bottom;margin-right:-11px}
  .queue-note{display:none}
  .progress-wrap{margin-top:5px}
  .board-wrap{flex:1 1 auto}
  .board{border-width:7px;border-radius:22px}
  .hud-card{padding:3px 7px;border-radius:10px}
  .hud-card small{font-size:8px}
  .hud-card b{font-size:12px}
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none;row-gap:0}
  .brand{grid-area:auto}
  .hud{grid-area:auto}
  .toolbar{grid-area:auto}
  .brand .level-tag{display:none}
  .bottom-controls .btn{min-height:44px;padding:6px 4px;font-size:11px}
  .menu{padding:12px}
  .menu-card{padding:clamp(14px,3vw,22px);border-radius:20px}
  .demo{height:clamp(110px,34vh,170px)}
  .tutorial-step{grid-template-columns:1fr 1fr}
}

/* ---- extremely short: compact the play shell so all three rows still fit ----
   The old rule here set .game-shell{height:auto;overflow:auto}, which pushed the
   whole shell past #screen's overflow:hidden and clipped it off both edges. */
@media (max-height:420px){
  :root{--pad:5px;--gap:4px}
  .toolbar .btn{min-width:40px;min-height:40px;padding:4px 6px}
  .hud-card{padding:2px 6px;border-radius:9px}
  .hud-card small{font-size:7px}
  .hud-card b{font-size:11px}
  .bottom-controls .btn{min-height:40px;padding:4px 2px;font-size:10px}
  .side-left,.side-right{padding:5px 7px}
  .side-left h3,.side-right h3{font-size:9px;margin:0 0 2px}
  .passenger-panel{padding:5px 6px}
  .progress-wrap{margin-top:3px}
  .queue-note,.move-count{display:none}
  .board-wrap{min-height:80px}
}

/* ---- short viewports: compact menus so key actions fit without scrolling ---- */
@media (max-height:560px){
  .logo{font-size:clamp(26px,5.6vw,52px)}
  .tagline{font-size:clamp(11px,1.6vw,14px);margin:6px 0}
  .menu-actions{gap:8px}
  .menu-tools{margin-top:8px}
  .footer-note{margin-top:8px;font-size:11px}
  .back-btn{margin-top:8px;padding:10px 16px}
  .row-actions{margin-top:8px}
  .menu-card h1{font-size:clamp(17px,3vw,24px);margin-bottom:4px}
  .level-grid{gap:5px}
  .settings-list .setting{padding:1px 0}
  .settings-list .setting span{font-size:12px}
  .settings-list .toggle{min-height:40px;padding:6px 10px}
  .tip{padding:9px 11px}
  .tip h2{margin:7px 0 2px;font-size:12px}
  .tip p{font-size:11px;line-height:1.35}
  .demo{height:clamp(80px,26vh,150px)}
  .tutorial-step{gap:10px}
  .stats{margin:8px 0}
}

/* settings must fit without scrolling on very short screens. 40px rows fit down
   to ~350px tall; below that 5x40px rows would clip the last toggle under BACK,
   so trade a little height to keep every toggle fully reachable. */
@media (max-height:350px){
  .menu{padding:8px}
  .menu-card{padding:clamp(10px,2.4vw,14px)}
  .menu-card h1{font-size:16px;margin-bottom:2px}
  .settings-list .setting{padding:0}
  .settings-list .setting span{font-size:11px}
  .settings-list .toggle{min-height:40px;padding:4px 10px}
  .row-actions{margin-top:6px}
  .row-actions .btn{min-height:40px}
}

/* ---- menus ---- */
@media (max-width:820px) and (orientation:portrait){
  .tutorial-step{grid-template-columns:1fr}
}
@media (max-width:420px){
  .menu-actions{grid-template-columns:1fr}
}
@media (max-width:560px){
  .level-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(52px,16vw,74px),1fr))}
  .level-btn{min-height:clamp(50px,13vw,66px)}
  .row-actions .btn{flex:1 1 100%}
  .menu-tools .btn{width:100%}
}

/* ---- pointer devices with room: hover affordance off on touch ---- */
@media (hover:none){
  .btn:hover{filter:none}
  .vehicle:hover{filter:none}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .drag-lane{transition:none}
}