/* POLISH: game page. Tokens match the main site (assets/css/style.css) and Light Bounce. */
:root{
  --white:#F7F7F5;--black:#0E0E10;--graphite:#3A3A42;--chrome:#C9CCD1;--smoke:#8C9096;--champ:#D8C7A3;
  --serif:"Bodoni Moda","Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --metal:linear-gradient(100deg,#8C9096 0%,#F4F5F7 22%,#C9CCD1 42%,#fff 52%,#9A9EA5 78%,#C9CCD1 100%);
  --gutter:16px;--top-h:48px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --isokit-line:#C9CCD1;--isokit-ink:#0E0E10;--isokit-paper:#F7F7F5;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);font:400 16px/1.5 var(--sans);touch-action:manipulation}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;letter-spacing:.01em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--graphite);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.eyebrow{font:600 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
.rule{display:block;width:56px;height:1px;background:var(--metal);margin:.7rem 0 .8rem}

/* ---------- frame: one screen, no scrolling during play ---------- */
.app{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:440px;max-width:640px;margin:0 auto;padding-left:var(--sal);padding-right:var(--sar);background:var(--white)}

.topbar{flex:none;display:flex;align-items:center;gap:.3rem;min-height:calc(var(--top-h) + var(--sat));padding:var(--sat) calc(var(--gutter) - 6px) 0 var(--gutter);background:var(--black);color:var(--chrome);border-bottom:1px solid transparent;border-image:var(--metal) 1;font-size:.82rem;letter-spacing:.04em}
.brand{display:flex;align-items:center;margin:0;white-space:nowrap}
.home-link{display:inline-flex;align-items:center;min-height:44px;color:var(--chrome);text-decoration:none;font-weight:500}
.home-link:hover{color:#fff}
.brand-sep{margin:0 .4em;opacity:.5}
.title{margin:0;min-width:0}
.title-btn{min-height:44px;padding:0 .2rem;background:none;border:0;color:#fff;font:500 1.05rem/1 var(--serif);letter-spacing:.06em;cursor:pointer}
.top-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;min-width:44px;padding:0 .5rem;background:none;border:0;color:var(--chrome);font:500 .8rem/1 var(--sans);letter-spacing:.08em;cursor:pointer}
.top-btn:hover{color:#fff}
.sound-btn{margin-left:auto}
.top-btn svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.album-btn svg{width:14px;height:14px;stroke:none}
.sound-btn .i-on{display:none}
.sound-btn[aria-pressed=true] .i-on{display:block}
.sound-btn[aria-pressed=true] .i-off{display:none}
.topbar :focus-visible{outline-color:var(--chrome)}

.room-head{flex:none;padding:.5rem var(--gutter) .3rem}
.room-line{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-top:.1rem}
.room-name{font-size:1.3rem;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-name:focus{outline:none}
.room-status{flex:none;font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- stage and board ---------- */
.stage{position:relative;flex:1 1 0;min-height:0;padding:.1rem var(--gutter) .2rem;display:grid;place-items:center;container-type:size}
.board{position:relative;aspect-ratio:360/380;width:min(100cqw,calc(100cqh * 360 / 380));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@supports not (width:1cqw){.board{width:min(100%,calc((100dvh - 260px) * 360 / 380))}}
.view,.over{position:absolute;inset:0;width:100%;height:100%;display:block}
.view{touch-action:none;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.over{pointer-events:none}
.hits{position:absolute;inset:0;pointer-events:none}
.hit{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:none;opacity:0}
.hit:focus-visible{opacity:1;outline:2px solid var(--graphite);outline-offset:0;background:rgba(247,247,245,.35)}
.hit.smudge-hit:focus-visible{outline-style:dashed}
.toast{position:absolute;left:50%;bottom:.4rem;transform:translateX(-50%);max-width:calc(100% - 2 * var(--gutter));padding:.55rem .9rem;background:var(--black);color:var(--white);font-size:.86rem;line-height:1.35;text-align:center;border-bottom:1px solid transparent;border-image:var(--metal) 1;pointer-events:none;animation:toastIn .25s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
.turn{display:none}
.noscript{padding:1rem;text-align:center}

/* ---------- controls: caption, chips, two buttons ---------- */
.controls{flex:none;padding:.15rem var(--gutter) calc(.6rem + var(--sab))}
.caption{min-height:1.35em;font-size:.86rem;line-height:1.35;color:var(--graphite);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;justify-content:center;gap:6px;margin:.35rem 0 .5rem}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:46px;padding:0;border:1px solid var(--chrome);background:#fff;cursor:pointer}
.chip svg{width:20px;height:20px;fill:none;stroke:var(--graphite);stroke-width:1.5}
.chip svg .fill{fill:var(--graphite);stroke:none}
.chip .bar{position:absolute;left:6px;right:6px;bottom:5px;height:2px;background:#E4E5E8}
.chip .bar i{display:block;height:100%;width:0;background:var(--graphite);transition:width .2s}
.chip[aria-pressed=true]{border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.chip.is-clean{background:var(--black);border-color:var(--black)}
.chip.is-clean svg{stroke:var(--white)}
.chip.is-clean svg .fill{fill:var(--white)}
.chip.is-clean .bar{background:transparent}
.chip.is-clean .bar i{background:var(--champ)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.55rem .9rem;border:1px solid var(--black);background:transparent;color:var(--black);font:500 .9rem/1.2 var(--sans);letter-spacing:.02em;text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{background:var(--graphite)}
.btn-outline:hover{background:#ECECEA}
.btn[disabled]{opacity:.45;cursor:default}
.link,.link-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;border:0;background:none;color:var(--black);font:500 .88rem/1.3 var(--sans);text-decoration:underline;text-decoration-color:var(--smoke);text-underline-offset:3px;cursor:pointer}
.perf{position:fixed;right:6px;top:calc(52px + var(--sat));z-index:9;padding:3px 6px;background:var(--black);color:var(--white);font:500 11px/1.3 ui-monospace,monospace;white-space:pre}

/* ---------- home ---------- */
.view-home{position:absolute;inset:calc(var(--top-h) + var(--sat)) 0 0 0;z-index:5;overflow:auto;background:var(--white);display:flex}
.home-in{margin:auto;width:100%;max-width:26rem;padding:1.4rem var(--gutter) calc(1.2rem + var(--sab))}
.home-title{font-size:3.4rem;line-height:1}
.home-title:focus{outline:none}
.home-line{font-size:1.02rem;line-height:1.45}
.home-how{margin-top:.8rem;padding:.7rem .85rem;border-left:1px solid var(--graphite);font-size:.9rem;line-height:1.45;color:var(--graphite)}
.home-ctas{display:grid;gap:8px;margin-top:1.3rem}
.home-days{margin-top:.9rem;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.home-store{margin-top:.6rem;font-size:.84rem;color:var(--graphite)}
.home-foot{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin-top:1rem}

/* ---------- sheets (room done, album) ---------- */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:640px;max-height:100dvh;padding:0;border:0;border-top:1px solid transparent;border-image:var(--metal) 1;background:var(--white);color:var(--black);overflow:auto;overscroll-behavior:contain;animation:sheetUp .32s cubic-bezier(.2,.7,.2,1)}
dialog.sheet::backdrop{background:rgba(14,14,16,.35)}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-in{padding:1.3rem var(--gutter) calc(1.2rem + var(--sab))}
.sheet h2{font-size:1.75rem}
.sheet h2:focus{outline:none}
.done-lesson{font:italic 500 1.15rem/1.4 var(--serif)}
.done-smudge{margin-top:.6rem;font-size:.9rem;color:var(--graphite)}
.done-ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1.1rem}
.done-ctas .btn:first-child{grid-column:1 / -1}
.done-share-msg{min-height:1.2em;margin-top:.5rem;font-size:.84rem;color:var(--graphite)}
.done-foot{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin-top:.2rem}
.album-head{display:flex;align-items:baseline;justify-content:space-between}
.album-days{margin-top:.2rem;font-size:.86rem;color:var(--graphite)}
.tabs{display:flex;gap:0;margin:.8rem 0 .7rem;border-bottom:1px solid var(--chrome)}
.tabs [role=tab]{min-height:44px;padding:0 1rem;border:0;border-bottom:2px solid transparent;background:none;font:500 .9rem/1 var(--sans);cursor:pointer;margin-bottom:-1px}
.tabs [aria-selected=true]{border-bottom-color:var(--black)}
.album-count{margin-bottom:.6rem;font:600 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.isokit-slot{border-radius:0;background:#fff;cursor:pointer}
.isokit-slot.is-empty{background:transparent}
.isokit-hint{font-size:.72rem;color:var(--graphite);opacity:1}
.isokit-badge{width:10px;height:10px;padding:0;border-radius:50%;background:var(--graphite);font-size:0;right:7px;top:7px}
.album-foot{margin-top:1rem;padding-top:.6rem;border-top:1px solid var(--chrome);font-size:.88rem}
.album-foot p{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem}
dialog.isokit-dlg{border-radius:0;font-family:var(--sans)}
dialog.isokit-dlg h2{font-size:1.4rem;margin:.6rem 0 .3rem}
dialog.isokit-dlg button,dialog.isokit-dlg .btn{border:1px solid var(--black);background:transparent;padding:0 1rem;margin:.6rem .4rem 0 0;cursor:pointer}
dialog.isokit-dlg::backdrop{background:rgba(14,14,16,.35)}

/* ---------- the email gate (kit dialog, Light Bounce wording and rhythm) ---------- */
dialog.isokit-gate{border-radius:0;padding:1.4rem 1.2rem 1.2rem;background:var(--black);color:var(--white);font-family:var(--sans);border-top:1px solid transparent;border-image:var(--metal) 1;width:min(94vw,440px)}
dialog.isokit-gate::backdrop{background:rgba(14,14,16,.55)}
.isokit-gate .isokit-eyebrow{font:600 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--chrome);margin:0 0 .5rem}
.isokit-gate h2{font:500 1.6rem/1.15 var(--serif);margin:0 0 .6rem;color:#fff}
.isokit-gate h2:focus{outline:none}
.isokit-gate .isokit-body{font-size:.92rem;line-height:1.5;color:var(--chrome);margin:0 0 1rem}
.isokit-gate label[for]{display:block;font-size:.84rem;margin-bottom:.35rem;color:var(--white)}
.isokit-gate input[type=email]{border:1px solid var(--smoke);background:#1A1A1F;color:#fff;border-radius:0}
.isokit-gate input[type=email]:focus-visible{outline:2px solid var(--chrome);outline-offset:1px}
.isokit-opt{font-size:.84rem;line-height:1.4;color:var(--chrome)}
.isokit-opt input{accent-color:var(--chrome)}
.isokit-gate .isokit-send,.isokit-gate .isokit-dl{padding:0 1.1rem;border:0;background:var(--metal);color:var(--black);font:600 .9rem/1 var(--sans);text-decoration:none;cursor:pointer}
.isokit-gate button:not(.isokit-send){padding:0 1rem;border:1px solid var(--smoke);background:transparent;color:var(--white);font:500 .9rem/1 var(--sans);cursor:pointer}
.isokit-gate .isokit-small{margin-top:.9rem;font-size:.78rem;line-height:1.45;color:var(--chrome)}
.isokit-gate .isokit-small a{color:var(--white)}
.isokit-gate .isokit-msg{min-height:1.2em;margin:.6rem 0 0;font-size:.88rem;color:#fff}
.isokit-gate :focus-visible{outline-color:var(--chrome)}

.foot{max-width:640px;margin:0 auto;padding:1rem var(--gutter) calc(1rem + var(--sab));font-size:.78rem;color:var(--graphite);text-align:center}
.foot a{display:inline-block;padding:.6rem .2rem}

/* ---------- small and landscape ---------- */
@media (max-height:600px){.room-head{padding:.3rem var(--gutter) .15rem}.eyebrow{font-size:.6rem}.room-name{font-size:1.12rem}.chips{margin:.25rem 0 .35rem}}
@media (orientation:landscape) and (max-height:500px){
  .app{max-width:none;display:grid;grid-template-columns:1fr minmax(240px,34%);grid-template-rows:auto auto 1fr auto;min-height:0}
  .topbar{grid-column:1 / -1}
  .room-head{grid-column:2;grid-row:2}
  .stage{grid-column:1;grid-row:2 / span 3}
  .controls{grid-column:2;grid-row:3;align-self:end}
  .chips{flex-wrap:wrap}
  .turn{display:block;grid-column:2;position:absolute;right:var(--gutter);bottom:.2rem;font-size:.74rem;color:var(--graphite)}
  .stage .turn{position:static}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}