/* Hot Dogs for Uh Bees — layers on top of /styles.css. Bright summer-pond
   palette on the canvas, the shared cream/navy panels for menus. */
@font-face{font-family:"Kenney Future";src:url(/games/rainbow-dash/assets/fonts/KenneyFuture.ttf) format("truetype");font-display:swap}
body::after{display:none}
html,body{overflow:hidden;touch-action:none;overscroll-behavior:none;background:var(--sky);
  width:100%;height:100%;margin:0;padding:0}
[hidden]{display:none !important}
/* 100dvh follows the phone's visible area as the URL bar slides away; the
   percentage heights are the fallback for browsers without dvh. */
#game{position:fixed;inset:0;display:block;width:100%;height:100%;
  width:100dvw;height:100dvh;background:var(--sky);touch-action:none}

.hud{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;pointer-events:none;z-index:3}
.score-box{background:var(--cream);color:var(--navy);border-radius:20px;padding:.15em .75em;text-align:center;
  box-shadow:0 5px 0 rgba(16,26,61,.25);min-width:4.6em}
.score-box .label{display:block;font-size:.8rem;font-weight:800;opacity:.65}
.score-box b{display:block;font-size:clamp(1.2rem,3vw,1.9rem);line-height:1.05;font-family:"Kenney Future","Baloo 2",system-ui,sans-serif}


.corner-btns{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:10px;z-index:7}
.btn.tiny{display:grid;place-items:center;width:1.7em;font-size:clamp(1.2rem,3.5vw,1.7rem);padding:.2em 0;line-height:1;border-radius:20px;text-decoration:none}
.btn.big{font-size:1.2rem}
.btn.green{background:var(--grass)}
.btn.sun{background:var(--sun)}

.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(16,26,61,.45);z-index:6}
/* Landscape on a phone is short: the panel must scroll and shrink rather
   than push its buttons off the bottom of the screen. */
@media (max-height:560px){
  .overlay{padding:8px;align-items:start}
  .card-panel{padding:10px 12px;border-radius:20px}
  .card-panel h1{font-size:clamp(1.3rem,4.5vw,2rem);margin:0 0 .15em}
  .card-panel .sub{font-size:.85rem;margin:0 0 .4em}
  .pick-label{margin:.3em 0 .2em}
  .modes{gap:6px;margin:0 0 .4em}
  .mode{padding:.35em .2em;border-width:3px}
  .mode b{font-size:.95rem}
  .mode span{font-size:.7rem}
  .seats{gap:6px;margin:.2em 0 .3em}
  .seat{padding:.3em .2em;border-width:3px}
  .options{gap:3px;margin:.1em 0 .3em}
  .option{font-size:.85rem}
  .choice{padding:.15em .7em}
  .how{font-size:.72rem}
  .how td{padding:.04em .4em}
  .btn.big{font-size:1rem}
}
.overlay.solid{background:linear-gradient(180deg,var(--sky-hi),var(--sky))}
.card-panel{max-width:760px;width:100%;text-align:center;color:var(--navy);background:var(--cream);border-radius:30px;
  padding:clamp(14px,3vw,26px);box-shadow:0 10px 0 rgba(16,26,61,.18),0 18px 36px rgba(0,0,0,.25)}
.card-panel h1{margin:.1em 0 .2em}
.card-panel h2{margin:.1em 0 .4em;font-size:clamp(1.6rem,5vw,2.4rem)}
.card-panel .sub{margin:0 0 .8em}
.over-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:.6em 0 0}

.pick-label{font-weight:800;margin:.6em 0 .3em}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 .8em}
.mode{border:4px solid transparent;border-radius:22px;background:var(--ice);color:var(--navy);
  padding:.6em .3em;display:grid;gap:2px;font:inherit;cursor:pointer;transition:transform .12s}
.mode b{font-size:1.1rem}
.mode span{font-size:.8rem;opacity:.75}
.mode.picked{background:var(--sun);border-color:var(--navy);transform:translateY(-3px)}
.mode:active{transform:translateY(0)}

/* Menu options: one row each, a label and its control. */
.options{display:grid;gap:6px;margin:.2em 0 .6em;text-align:left}
.option{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px}
.option-label{font-weight:800}
.toggle{display:flex;align-items:center;gap:.4em;cursor:pointer;font-weight:600}
.toggle input{width:1.2em;height:1.2em;accent-color:var(--grass);cursor:pointer}
.choices{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.choice{font:inherit;font-weight:700;border:3px solid transparent;border-radius:999px;background:var(--ice);
  color:var(--navy);padding:.25em .85em;cursor:pointer}
.choice.picked{background:var(--sun);border-color:var(--navy)}

.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:.4em 0 .6em}
@media (max-width:640px){.seats{grid-template-columns:repeat(2,1fr)}.modes{grid-template-columns:repeat(2,1fr)}}
.seat{--seat:var(--sky);background:var(--ice);border-radius:20px;padding:.6em .3em;display:grid;gap:4px;justify-items:center;
  border:4px dashed rgba(16,26,61,.22);transition:transform .15s}
.seat b{font-size:1rem}
.seat-role{font-size:.75rem;opacity:.75}
.seat-state{font-weight:800;font-size:.85rem;opacity:.7}
.seat.joined{background:var(--seat);border-style:solid;border-color:var(--navy);transform:translateY(-3px)}
.seat.joined .seat-state{opacity:1}

.how{margin:0 auto .4em;border-collapse:collapse;font-size:clamp(.78rem,2.2vw,.98rem);text-align:left}
.how td{padding:.1em .55em;vertical-align:top}
.how td:first-child{font-weight:800;white-space:nowrap}