/* The Game settings sheet (settings-sheet.js). Every rule but the first two is
   scoped to #settings.settings-sheet, which the script adds only when
   USE_NEW_SETTINGS is on; with it off, nothing here reaches the old popup.
   Colours and timings come from SETTINGS in the script, as --settings-* and
   --hold-ms. Only transform and opacity move. */

/* The groups and the new-game form are plain wrappers in index.html. In the
   old popup they lay nothing out, so it looks exactly as it did. */
#settings [data-group],#new-game-form{display:contents}

#settings{--settings-dir:1}
html[dir=rtl] #settings{--settings-dir:-1}

/* ── The sheet ────────────────────────────────────────────────────────────── */
#settings.settings-sheet{max-height:min(88dvh,780px);padding:0 20px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;border:var(--o-edge,2px solid var(--ink))}
#settings.settings-sheet[open]{animation:settings-up var(--settings-spring-ms) var(--settings-spring)}
#settings.settings-sheet[open]::backdrop{animation:settings-fade .25s ease-out}
@keyframes settings-up{from{transform:translateY(100%)}}
@keyframes settings-fade{from{opacity:0}}

/* The title stays put while the rows scroll, and is the handle that drags
   the sheet down. */
#settings.settings-sheet>.dialog-heading{position:sticky;top:0;z-index:3;margin:0 -20px 4px;padding:22px 20px 10px;background:inherit;touch-action:none;cursor:grab}
#settings.settings-sheet>.dialog-heading::before{content:'';position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:color-mix(in oklab,var(--ink) 30%,transparent)}
#settings.settings-sheet>.dialog-heading .icon-button{min-width:44px;min-height:44px}

/* While there is more below, the bottom edge fades out rather than cutting
   the text off. Only a look: taps go through it. */
#settings.settings-sheet.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent)}

/* The first time it opens, the rows pop in one after another. */
#settings.settings-sheet.is-first-open>:not(.dialog-heading){animation:settings-row var(--settings-spring-ms) var(--settings-spring) both;animation-delay:calc(var(--i,0) * var(--settings-stagger) + 120ms)}
@keyframes settings-row{from{opacity:0;transform:translateY(14px)}}

#settings.settings-sheet [data-group]{display:block;margin:0 0 20px}
#settings.settings-sheet [data-group]>.eyebrow,#settings.settings-sheet .color-picker legend{margin:0 0 10px}
#settings.settings-sheet>hr{display:none}
#settings.settings-sheet .color-picker{margin:0 0 20px}

/* ── Export, Restore, Sound: big white tiles that press down ──────────────── */
#settings.settings-sheet :is(#export,.file-label,#sound-toggle){position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin:0 0 12px;padding:14px 18px;border:var(--o-edge,2px solid var(--ink));border-radius:18px;background:var(--white);color:var(--ink);box-shadow:0 4px 0 var(--ink);font:inherit;font-size:16px;font-weight:700;line-height:1.3;text-align:start;cursor:pointer;transition:transform .1s,box-shadow .1s}
#settings.settings-sheet :is(#export,.file-label,#sound-toggle):active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#settings.settings-sheet :is(#export,#sound-toggle):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#settings.settings-sheet :is(#export,.file-label)>[aria-hidden]{font-size:20px}

/* Export: Saved with a tick for a moment, or a shake when there was nothing to save. */
#settings.settings-sheet #export.is-saved{background:var(--settings-saved);color:#fff}
#settings.settings-sheet #export.is-saved>[aria-hidden]{display:none}
#settings.settings-sheet #export.is-saved::before{content:'✓';font-size:20px;font-weight:900}
#settings.settings-sheet #export.is-shaking{animation:nudge .4s}

/* Sound effects: the words on one side, a switch on the other. The thumb
   squashes as it flips (.is-flipping) and springs into place. */
#settings.settings-sheet #sound-toggle{padding-inline-end:88px}
#settings.settings-sheet #sound-toggle::before,#settings.settings-sheet #sound-toggle::after{content:'';position:absolute;top:50%;box-sizing:border-box;border:2px solid var(--ink)}
#settings.settings-sheet #sound-toggle::before{inset-inline-end:16px;width:56px;height:32px;margin-top:-16px;border-radius:999px;background:color-mix(in oklab,var(--ink) 18%,var(--white));transition:background-color .2s}
#settings.settings-sheet #sound-toggle[aria-checked=true]::before{background:var(--settings-saved)}
#settings.settings-sheet #sound-toggle::after{inset-inline-end:20px;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--white);transform:translateX(calc(var(--settings-dir) * -20px));transition:transform var(--settings-spring-ms) var(--settings-spring)}
#settings.settings-sheet #sound-toggle[aria-checked=true]::after{transform:none}
#settings.settings-sheet #sound-toggle.is-flipping::after{animation:settings-squish .38s ease-out}
@keyframes settings-squish{30%{scale:1.5 .78}65%{scale:.86 1.12}}

/* ── Companion colour: the picked swatch swells and nudges its neighbours ── */
#settings.settings-sheet .color-options{grid-template-columns:repeat(5,minmax(0,1fr))}
#settings.settings-sheet .color-option{transition:translate var(--settings-spring-ms) var(--settings-spring)}
#settings.settings-sheet .color-option .swatch{transition:scale var(--settings-spring-ms) var(--settings-spring)}
#settings.settings-sheet .color-option input:checked~.swatch{scale:1.18;box-shadow:0 0 0 2px var(--white),0 0 0 5px var(--ink)}
#settings.settings-sheet .color-option:has(+.color-option input:checked){translate:calc(var(--settings-dir) * -6px) 0}
#settings.settings-sheet .color-option:has(input:checked)+.color-option{translate:calc(var(--settings-dir) * 6px) 0}
#settings.settings-sheet .color-option .swatch.is-picked{animation:settings-jelly .45s ease-out}
@keyframes settings-jelly{35%{scale:1.32 1.02}60%{scale:1.1 1.26}to{scale:1.18}}

/* ── Danger zone ───────────────────────────────────────────────────────────── */
#settings.settings-sheet #new-game-form{display:block}
#settings.settings-sheet .slide-commit{background:var(--settings-danger);color:#fff;margin:0}
#settings.settings-sheet .slide-commit-fill{background:var(--settings-dangerDeep)}
#settings.settings-sheet .slide-commit-knob{color:var(--ink)}

/* Erase everything: held while a red fill rises; let go and it drains away. */
#settings.settings-sheet .erase-hold{display:grid;place-items:center;width:100%;min-height:58px;margin:18px 0 0;padding:0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--settings-dangerDeep);color:#fff;box-shadow:0 5px 0 var(--ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
#settings.settings-sheet .erase-hold:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#settings.settings-sheet .erase-hold :is(.hold-fill,.hold-done){background:var(--settings-dangerFill);color:#fff}
#settings.settings-sheet .erase-hold .hold-fill{clip-path:inset(100% 0 0 0)}
#settings.settings-sheet .erase-hold.is-holding .hold-fill{clip-path:inset(0);transition:clip-path var(--hold-ms) linear}

/* The warnings, larger and plainer than the small print around them. */
#settings.settings-sheet .settings-note{margin:10px 0 0;padding:10px 14px;border-radius:14px;background:color-mix(in oklab,var(--settings-danger) 12%,var(--white));color:var(--ink);font-size:14px;font-weight:600;line-height:1.45}

/* The two-tap erase, for screen readers; a keyboard sees it when it has the focus. */
#settings.settings-sheet .erase-fallback:focus{position:static;width:100%;height:auto;margin-top:12px;clip-path:none;white-space:normal}

#settings.settings-sheet [data-go=legal]{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  #settings.settings-sheet,#settings.settings-sheet *,#settings.settings-sheet *::before,#settings.settings-sheet *::after,#settings.settings-sheet::backdrop{animation:none!important;transition:none!important}
}