/* Quick Play boardwalk: the arcade and the game player, in the World's colours */
:root{
  --night:#06171C; --night2:#0A2329; --night3:#0F2F36;
  --mint:#2DE2C4; --peach:#FFB38A; --sky:#7AA8FF; --text:#EAFBF8;
  --muted:rgba(234,251,248,.66); --line:rgba(234,251,248,.12);
  --glass:rgba(8,30,36,.72);
  --display:"Sora",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--text);background:radial-gradient(1200px 600px at 70% -10%,rgba(255,179,138,.10),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(45,226,196,.08),transparent 60%),var(--night);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{font-family:var(--display);letter-spacing:-.01em}

/* top bar */
.qp-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(6,23,28,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.qp-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px}
.qp-realm{margin-left:auto;display:flex;align-items:center}
.qp-realm .er-bar{position:static}
.qp-btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--line);background:rgba(234,251,248,.06);padding:9px 16px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.qp-btn:hover{background:rgba(234,251,248,.12)}
.qp-btn.sm{padding:7px 13px;font-size:13px}
.qp-btn.primary{background:var(--mint);color:var(--night);border-color:transparent}
.qp-btn.primary:hover{filter:brightness(1.08)}
.qp-wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* arcade */
.qp-hero{padding:34px 0 10px}
.qp-eyebrow{margin:0 0 6px;color:var(--peach);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.qp-hero h1{margin:0;font-size:clamp(28px,5vw,46px);line-height:1.1}
.qp-lede{margin:10px 0 0;color:var(--muted);font-size:16px}
.qp-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:20px 0 6px}
.qp-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:rgba(234,251,248,.04);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}
.chip em{font-style:normal;color:var(--muted);font-weight:500;margin-left:3px}
.chip.is-on{background:var(--peach);color:var(--night);border-color:transparent}
.chip.is-on em{color:rgba(6,23,28,.65)}
.qp-search input{width:min(280px,100%);border-radius:999px;border:1px solid var(--line);background:rgba(234,251,248,.06);padding:9px 15px;font-size:14px}
.qp-search{flex:0 1 280px}
.qp-recent h2,.qp-more h2{font-size:17px;margin:22px 0 10px}
.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:12px 0 30px}
.qp-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.qp-row .booth{flex:0 0 150px;scroll-snap-align:start}
.booth{display:flex;flex-direction:column;gap:2px;text-decoration:none;border-radius:16px;padding:8px;background:rgba(234,251,248,.03);border:1px solid transparent;transition:transform .18s,background .18s,border-color .18s}
.booth:hover,.booth:focus-visible{transform:translateY(-3px);background:rgba(234,251,248,.07);border-color:rgba(255,179,138,.35)}
.booth-img{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--night3)}
.booth-img img{width:100%;height:100%;object-fit:cover;display:block}
.booth .tall{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(6,23,28,.72);color:var(--text)}
.booth-t{font-weight:600;font-size:14px;margin-top:6px;line-height:1.25}
.booth-g{font-size:12px;color:var(--muted)}
.booth[hidden]{display:none}
.qp-empty{color:var(--muted);text-align:center;padding:30px 0}

/* player */
.qp-player .qp-top{gap:10px}
.qp-title{min-width:0}
.qp-title h1{margin:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp-title span{font-size:12px;color:var(--muted)}
.stage{position:relative;display:flex;align-items:center;justify-content:center;height:calc(100vh - 64px - 190px);height:calc(100dvh - 64px - 190px);min-height:420px;padding:14px 16px}
.frame{position:relative;height:100%;max-width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.portrait .frame{aspect-ratio:9/16}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.tap-to-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;padding:0;cursor:pointer;background:var(--night2)}
.tap-to-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:blur(2px)}
.tap-to-play b{position:relative;background:var(--mint);color:var(--night);padding:13px 24px;border-radius:999px;font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.tap-to-play small{position:relative;color:var(--text);font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tap-to-play[hidden]{display:none}
.qp-more{max-width:1180px;margin:0 auto;padding:0 16px}
.qp-about{padding-bottom:10px}
.qp-about h2{font-size:18px;margin:26px 0 6px}
.qp-about p{color:var(--muted);max-width:70ch}
.qp-small{color:var(--muted);font-size:13px}
.fsmode .qp-top,.fsmode .qp-more,.fsmode .qp-about,.fsmode .qp-foot{display:none}
.fsmode .stage{height:100vh;height:100dvh;padding:0}
.fsmode .frame{border-radius:0}

/* footer + sign-up */
.qp-foot{border-top:1px solid var(--line);margin-top:30px;padding:26px 16px 40px;padding-bottom:max(40px,env(safe-area-inset-bottom));max-width:1180px;margin-left:auto;margin-right:auto}
.qp-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 8px;font-size:14px}
.qp-foot nav a{color:var(--muted);text-decoration:none}
.qp-foot nav a:hover{color:var(--text)}
.mail-h{margin:0 0 8px;font-weight:600}
.mail-row{display:flex;gap:8px;flex-wrap:wrap}
.mail-row input{flex:1 1 220px;min-width:0;border-radius:999px;border:1px solid var(--line);background:rgba(234,251,248,.06);padding:10px 16px;font-size:15px}
.mail-consent{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;color:var(--muted);max-width:560px}
.mail-consent input{margin-top:2px;accent-color:var(--mint)}
.mail-consent a{color:var(--text)}
.mail-ok{margin:8px 0 0;font-size:14px;color:var(--mint)}
.mail-ok.err{color:var(--peach)}
.mail.done .mail-row,.mail.done .mail-consent{display:none}

@media (max-width:700px){
  .qp-top{padding:8px 12px}
  .qp-logo span{display:none}
  .qp-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .qp-search{flex:1 1 100%}
  .qp-search input{width:100%}
  .lbl{display:none}
  .qp-realm .er-pill{display:none}
  .qp-title span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* on a phone the game gets the whole width; tall games fill the height */
  .stage{height:calc(100dvh - 58px - 120px);min-height:360px;padding:8px}
  .landscape .frame{height:auto;width:100%}
  .portrait .frame{height:100%}
}
.booth-g .own{font-weight:600;color:var(--mint)}
/* games that adapt to any shape (orientation "any") fill the stage */
.any .frame{aspect-ratio:auto;width:100%;height:100%;max-width:1200px}