/* Blue Flamingos — layers on top of /styles.css */
@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}
[hidden]{display:none !important}
#game{position:fixed;inset:0;display:block;width:100%;height:100%}

.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)}

/* the game keeps playing behind the join and win panels */
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;background:rgba(16,26,61,.25);z-index:6}
.card-panel{max-width:680px;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.6rem)}
.card-panel .sub{margin:0 0 .8em}
.over-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:.6em 0 0}

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

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