/* Kenney Future (CC0) — used for the HUD and everything drawn on the canvas */
@font-face{font-family:"Kenney Future";src:url(./assets/fonts/KenneyFuture.ttf) format("truetype");font-display:swap}
/* Rainbow Dash — layers on top of /styles.css */
body::after{display:none}                   /* the game draws its own sky and grass */
html,body{overflow:hidden;touch-action:none;overscroll-behavior:none}
[hidden]{display:none !important}

#game{position:fixed;inset:0;display:block;width:100%;height:100%}

/* ----- HUD ----- */
.hud{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;display:flex;gap:10px;pointer-events:none;flex-wrap:wrap}
.score-box{background:var(--cream);border-radius:22px;padding:.2em .8em;text-align:center;
  box-shadow:0 5px 0 rgba(16,26,61,.25);min-width:5.5em}
.score-box .label{display:block;font-size:.85rem;font-weight:800;opacity:.65}
.score-box b{display:block;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1;
  font-family:"Kenney Future","Baloo 2",system-ui,sans-serif}
.score-box.dogs{background:var(--sun)}

/* ----- corner buttons ----- */
.corner-btns{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;display:flex;gap:10px;z-index:5}
.btn.tiny{display:grid;place-items:center;width:1.7em;font-size:clamp(1.3rem,4vw,1.9rem);
  padding:.22em 0;line-height:1;border-radius:22px;text-decoration:none}
.icon-off{display:none}
#btn-mute.is-muted .icon-on{display:none}
#btn-mute.is-muted .icon-off{display:inline}

/* ----- overlays ----- */
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;
  background:rgba(16,26,61,.28);z-index:6}
.overlay.solid{background:linear-gradient(180deg,var(--sky-hi),var(--sky))}
.overlay.bottom{align-items:end;background:none;pointer-events:none;padding-bottom:5vh}
.overlay.bottom .card-panel{pointer-events:auto}
.card-panel{max-width:600px;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(16,26,61,.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}

/* ----- character select seats ----- */
.seats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:.4em 0 .6em}
.seat{position:relative;cursor:pointer;background:var(--ice);border-radius:22px;padding:.6em .4em;display:grid;justify-items:center;gap:2px;
  border:4px dashed rgba(16,26,61,.22);transition:transform .15s}
.seat img{width:clamp(48px,12vw,74px);height:auto;image-rendering:auto}
.seat b{font-size:1.15rem}
.seat-role{font-size:.9rem;opacity:.75}
.seat-state{font-weight:800;font-size:.95rem;opacity:.7}
.seat.joined{background:var(--grass);border-style:solid;border-color:#6fae21;transform:translateY(-3px)}
.seat.joined .seat-state{opacity:1}
.seat:not(.joined) img{opacity:.35;filter:grayscale(1)}
.seat-pick{display:grid;justify-items:center}
.seat-row{display:flex;align-items:center;gap:4px}
.seat-arrow,.seat-leave{font:inherit;font-size:.8rem;line-height:1;border:0;background:none;color:var(--navy);
  cursor:pointer;padding:3px 5px;border-radius:8px;visibility:hidden}
.seat-arrow:hover,.seat-leave:hover{background:rgba(255,255,255,.5)}
.seat.joined .seat-arrow,.seat.joined .seat-leave{visibility:visible}
.seat-leave{position:absolute;top:6px;right:8px}
.seat-name{font-weight:800;text-transform:capitalize;min-height:1.3em}
.start-row{margin:.2em 0 .4em}
.pick-help{margin:0 0 .6em;font-size:.85rem;opacity:.75}
.start-hint{font-weight:800;margin:.2em 0 .6em;min-height:1.4em}

/* ----- button mapping screen (js/remap.js) ----- */
.remap-pick{display:grid;gap:10px;justify-content:center;margin:.6em 0}
.remap-progress{margin:.2em 0 0;font-weight:800;opacity:.65;font-size:.95rem}
.remap-prompt{margin:.1em 0 .2em;font-weight:800;font-size:clamp(1.1rem,3.4vw,1.5rem)}
.remap-captured{margin:0 0 .4em;min-height:1.4em;font-weight:800;color:#3c7a12}
.remap-list{list-style:none;margin:.2em auto .6em;padding:0;max-width:28em;text-align:left}
.remap-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  background:var(--ice);border-radius:16px;padding:.25em .8em;margin-bottom:5px;
  border:3px solid transparent}
.remap-row.current{background:var(--sun);border-color:#101a3d}
.remap-row b{font-family:"Kenney Future","Baloo 2",system-ui,sans-serif;white-space:nowrap}
.remap-foot{margin:.6em 0 0;font-size:.85rem;opacity:.7}
.btn[disabled]{opacity:.45;pointer-events:none}
.back .btn{margin:0 5px}

/* ----- how-to table + results ----- */
.how{margin:0 auto .4em;border-collapse:collapse;font-size:clamp(.8rem,2.4vw,1rem);text-align:left}
.how th,.how td{padding:.05em .55em}
.how td:first-child{font-weight:800}
.results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.4em 0}
.results div{background:var(--ice);border-radius:18px;padding:.3em .9em;display:grid}
.results span{font-size:.85rem;font-weight:800;opacity:.7}
.results b{font-size:2rem;line-height:1.1;font-family:"Kenney Future","Baloo 2",system-ui,sans-serif}
.continue-hint{margin:.6em 0 0;opacity:.8;font-weight:800}
.over-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:.4em}
.btn.green{background:var(--grass)}
.back{margin:.8em 0 0}

@media (max-width:520px){
  .seats{grid-template-columns:1fr}
  .how{display:none}
}

/* Setting up a controller is the one thing you need when the buttons are
   wrong, so give it its own row and a hint rather than a small link. */
.setup-row{display:flex;flex-direction:column;align-items:center;gap:.4em;margin:1em 0 .6em}
.btn.big{font-size:1.15rem;padding:.65em 1.3em}
.btn.sun{background:var(--sun);color:var(--navy)}
.setup-hint{max-width:30em;font-size:.85rem;opacity:.8;text-align:center;line-height:1.35}

/* On-screen controls (shared js/onscreen.js): sit above the player bar that
   the canvas draws along the bottom edge. */
body .onscreen{padding-bottom:calc(max(14px,env(safe-area-inset-bottom)) + max(44px,10vmin))} /* beats onscreen.css, which loads later */