/* ===== Drawdle UI : dark + light, simple palette ===== */
:root{
  --bg:#121213; --panel:#1c1c1e; --panel2:#26262a; --line:#3a3a3c;
  --text:#ededed; --muted:#9aa0a6;
  --green:#6aaa64; --yellow:#c9b458; --tile-bg:#3a3a3c;
  --accent:#5a9cf0; --danger:#e06c6c; --spoil:#c9603f;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --radius:14px;
  /* Cell opacity levels : 3 states, tunable here so future shifts
     stay consistent across the base, active, and solved rules. */
  --cell-op-base:.60;
  --cell-op-active:.85;
  --cell-op-solved:1;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#fbfbfa; --panel:#ffffff; --panel2:#f1f1f3; --line:#d3d6da;
  --text:#1a1a1b; --muted:#787c7e;
  --green:#6aaa64; --yellow:#c9b458; --tile-bg:#787c7e;
  --accent:#3b82f6; --danger:#d23f3f; --spoil:#c9603f;
  --shadow:0 12px 32px rgba(20,20,30,.14);
  color-scheme:light;
}

/* board themes (port Android). Declared after [data-theme=light] so
   their single-attribute selector wins for the dark case via source
   order, and the dual-attribute light variant wins via specificity. */
[data-board="contrast"]{
  --green:#f5793a; --yellow:#85c0f9; --accent:#f5793a;
}
[data-board="contrast"][data-theme="light"]{
  --green:#f5793a; --yellow:#85c0f9; --accent:#f5793a;
}
[data-board="sunset"]{
  --bg:#2a1130; --panel:#3a1840; --panel2:#4a2150; --line:#4a2548;
  --text:#ffe2ea; --muted:#b08099;
  --green:#ff7591; --yellow:#ffa55a; --tile-bg:#4a2548;
  --accent:#ff7591;
}
[data-board="sunset"][data-theme="light"]{
  --bg:#ffeae0; --panel:#fff5ee; --panel2:#ffd6c5; --line:#f4c4b0;
  --text:#4a1f3a; --muted:#a06e7a;
  --green:#e85c6f; --yellow:#f59060; --tile-bg:#a06e7a;
  --accent:#e85c6f;
}
[data-board="flame"]{
  --bg:#0a0203; --panel:#1a0808; --panel2:#2a1010; --line:#3a1818;
  --text:#ffe8d8; --muted:#b08070;
  --green:#ff5722; --yellow:#ffb300; --tile-bg:#2a1a1a;
  --accent:#ff5722;
}
[data-board="flame"][data-theme="light"]{
  --bg:#fff5ee; --panel:#ffffff; --panel2:#ffe4d0; --line:#f4cab0;
  --text:#4a1a0a; --muted:#8a4530;
  --green:#d84315; --yellow:#f57c00; --tile-bg:#8a4530;
  --accent:#d84315;
}
[data-board="starry"]{
  --bg:#0a0f24; --panel:#121a36; --panel2:#1b2447; --line:#2a3560;
  --text:#e9ecff; --muted:#8b94bd;
  --green:#3568cf; --yellow:#ffd24a; --tile-bg:#19233f;
  --accent:#4a7fe0;
}
[data-board="starry"][data-theme="light"]{
  --bg:#eaf0ff; --panel:#ffffff; --panel2:#d9e3ff; --line:#c0ccee;
  --text:#16204a; --muted:#586496;
  --green:#2456b0; --yellow:#e0a300; --tile-bg:#9aa8d6;
  --accent:#2456b0;
}

*{box-sizing:border-box;margin:0;padding:0}
/* the [hidden] attribute must always win over display rules */
[hidden]{display:none!important}
html,body{height:100%}
html{font-size:120%}   /* scale all rem-based text +20% */
body{
  background:var(--bg);color:var(--text);
  font-family:"DM Sans",system-ui,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:20px 16px 28px;gap:20px;
  transition:background-color .3s ease,color .3s ease;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' \
numOctaves='2'/></filter><rect width='100%25' height='100%25' \
filter='url(%23n)' opacity='.035'/></svg>");
}
[data-theme="light"] .grain{opacity:.15}
#app,header,.site-footer{position:relative;z-index:1}

/* ---- header ---- */
header{text-align:center;width:100%;max-width:640px;
  display:flex;flex-direction:column;align-items:center}
/* controls live on their own right-aligned row (not overlapping the
   centered title), so theme + sound + menu sit together without the
   mobile title-overlap the old floating buttons had. */
/* top bar : streak/achievements/stats chips on the left, theme/sound/menu
   controls on the right. The chips start hidden, so the controls stay
   right-aligned until a chip appears. */
.topbar{display:flex;align-items:center;justify-content:space-between;
  width:88%;gap:8px;margin-bottom:10px}
.header-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-controls{display:flex;align-items:center;gap:8px}
/* Uniform 34px height for every control in the top bar : the icon buttons
   (sound/archive/menu) and the theme pill are already 34px ; this pins the
   header chips + the sign-in CTA to match so the whole bar lines up. Scoped
   to .header-chips so the in-board .meta chips keep their own sizing. */
.header-chips .chip,
.header-chips .signin-cta{
  height:34px;box-sizing:border-box;
  padding-top:0;padding-bottom:0}
.brand{display:flex;align-items:center;justify-content:center;gap:12px}
.logo-tiles{display:inline-grid;grid-template-columns:repeat(2,1fr);
  gap:3px;position:relative}
.lt{width:16px;height:16px;border-radius:2px;display:block;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.28),
    inset -1.5px -1.5px 0 rgba(0,0,0,.22)}
.lt.b{background:var(--tile-bg)} .lt.g{background:var(--green)}
.lt.y{background:var(--yellow)}
/* logo easter egg: the 4 .lt.b form a static background 2x2 ; the two
   colored movers sit on top (yellow top-left, green bottom-right) so at
   rest the wordmark looks unchanged. On .spin they orbit clockwise
   (right, down, left, up), each step holding then accelerating into a
   snap on the next cell. Step = tile 16px + gap 3px = 19px. */
.lt.mover{position:absolute;left:0;top:0}
.lt.mover.y{transform:translate(0,0)}
.lt.mover.g{transform:translate(19px,19px)}
/* Orbit period = 3.438s. The drone loop is 7.7356s = 9 beats (~69.8 BPM) and
   the orbit's 4 steps are 4 beats, so each step = one beat (loop/9) and
   2.25 orbits == one loop. 9 orbits == 4 loops exactly, so the orbit and the
   drone stay commensurate (they realign every ~30.9s on their own). app.js
   still re-anchors the animation to the audio clock, restarting on the rest
   pose (translate 0,0) so it's invisible, to wipe CSS-vs-audio clock drift
   over long runs without changing the speed. */
.logo-tiles.spin .mover{animation:lt-orbit 3.438s infinite}
.logo-tiles.spin .mover.g{animation-delay:-1.719s}  /* 180deg out of phase */
@keyframes lt-orbit{
  0%  {transform:translate(0,0)}
  15% {transform:translate(0,0);     animation-timing-function:cubic-bezier(.6,0,.9,.2)}
  25% {transform:translate(19px,0)}
  40% {transform:translate(19px,0);  animation-timing-function:cubic-bezier(.6,0,.9,.2)}
  50% {transform:translate(19px,19px)}
  65% {transform:translate(19px,19px);animation-timing-function:cubic-bezier(.6,0,.9,.2)}
  75% {transform:translate(0,19px)}
  90% {transform:translate(0,19px);  animation-timing-function:cubic-bezier(.6,0,.9,.2)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.logo-tiles.spin .mover{animation:none}}
/* the Drawdle wordmark : one source of truth, reused by the homepage <h1> and
   the blog brand (.brand-name). Pair with .brand (centered logo + wordmark). */
h1,.brand-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:2.4rem;letter-spacing:-.02em;line-height:1;color:var(--text)}
.tag{color:var(--muted);font-size:.9rem;margin-top:6px}
.theme-toggle{background:none;border:0;padding:0;
  cursor:pointer;line-height:0}
.locale-toggle{
  position:absolute;left:0;top:0;display:inline-flex;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;
  font-family:"DM Mono",monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.04em;background:var(--panel)}
.lt-btn{
  padding:6px 10px;color:var(--muted);text-decoration:none;
  transition:background .15s ease, color .15s ease}
.lt-btn:hover{color:var(--text)}
.lt-btn.on{background:var(--panel2);color:var(--text);cursor:default}
.tt-track{
  position:relative;display:flex;align-items:center;
  justify-content:space-between;box-sizing:border-box;
  width:60px;height:34px;padding:0 8px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  transition:background-color .3s,border-color .2s}
.theme-toggle:hover .tt-track{border-color:var(--accent)}
.tt-ic{width:14px;height:14px;z-index:1;
  transition:opacity .25s ease}
.tt-sun{color:var(--yellow)}
.tt-moon{color:var(--accent)}
.tt-thumb{
  position:absolute;top:50%;left:4px;width:20px;height:20px;
  border-radius:50%;background:var(--text);
  transform:translate(0,-50%);
  transition:transform .28s cubic-bezier(.4,.2,.2,1)}
html[data-theme="dark"] .tt-thumb{transform:translate(32px,-50%)}
html[data-theme="dark"] .tt-sun{opacity:.32}
html[data-theme="light"] .tt-moon{opacity:.32}

.warn{width:14px;height:14px;display:inline-block;vertical-align:-2px;
  flex:none}
.sq{display:inline-block;width:14px;height:14px;border-radius:3px;
  vertical-align:-2px;--bevel:1px;
  box-shadow:inset var(--bevel) var(--bevel) 0 rgba(255,255,255,.28),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 rgba(0,0,0,.22)}
.sq.b{background:var(--tile-bg)} .sq.g{background:var(--green)}
.sq.y{background:var(--yellow)}

h2{font-family:"Bricolage Grotesque",sans-serif;font-size:.78rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.16em;
  margin-bottom:12px;text-align:center}

#app{width:100%;max-width:640px;display:flex;flex-direction:column;
  align-items:center;gap:22px}
/* every section spans the full column so inner centering is consistent */
#app>section{width:100%;display:flex;flex-direction:column;
  align-items:center;gap:20px}
#app>section[hidden]{display:none}

.stale{width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;font-size:.84rem;
  color:var(--spoil);background:color-mix(in srgb,var(--spoil) 12%,
  transparent);border:1px solid color-mix(in srgb,var(--spoil) 40%,
  transparent)}
.stale .warn{color:var(--spoil)}

/* ---- cards ---- */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;text-align:center;
  width:100%;max-width:440px;line-height:1.7;box-shadow:var(--shadow)}
.card button{margin-top:18px}
.about{
  width:100%;max-width:560px;margin:48px auto 0;padding:0 12px;
  text-align:left;line-height:1.6;color:var(--muted)}
.about h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.15rem;color:var(--text);margin:0 0 12px}
.about p{margin:0 0 10px}
.spinner{width:15px;height:15px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;display:inline-block;
  vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- mode toggle (centered, animated) ---- */
.modes-bar{
  display:inline-flex;align-self:center;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px}
.modes-bar button{
  background:transparent;color:var(--muted);border:none;border-radius:999px;
  padding:9px 22px;font-size:.85rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background-color .25s,color .25s}
.modes-bar button em{font-style:normal}
.modes-bar button.on{background:var(--accent);color:#fff}
.modes-bar button.spoil-on{background:var(--spoil);color:#fff}

/* ---- meta chips ---- */
.meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line);
  padding:8px 15px;border-radius:999px;font-size:.82rem;color:var(--muted);
  display:inline-flex;gap:7px;align-items:center}
.chip b{color:var(--text);letter-spacing:.16em;font-weight:700}
.chip.spoil{border-color:var(--spoil)}
.chip.spoil b{color:var(--spoil)}
.chip.streak{padding:8px 12px}
.chip.streak .streak-flame{filter:drop-shadow(0 0 4px rgba(255,140,0,.5))}
.chip.streak b{color:var(--text);letter-spacing:0;font-weight:700;
  font-size:.95rem}
/* "solved by X today" badge : person icon + count, full text on hover */
.solve-chip{gap:5px;padding:8px 12px;cursor:default}
.solve-ico{width:14px;height:14px;display:block;color:var(--text);
  opacity:.8}
.solve-chip b{letter-spacing:0}
.chip.achievements{padding:8px 12px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.chip.achievements:hover{border-color:var(--accent);color:var(--text)}
.chip.achievements .ach-trophy{width:14px;height:14px;display:inline-block;
  vertical-align:-2px}
.chip.achievements b{color:var(--text);letter-spacing:0;font-weight:700;
  font-size:.95rem}
.diffbar{display:inline-flex;gap:3px;align-items:center}
.diffbar .seg{width:7px;height:13px;border-radius:2px;
  background:var(--line)}
.diffchip.easy .seg.on{background:var(--green)}
.diffchip.med .seg.on{background:var(--yellow)}
.diffchip.hard .seg.on{background:var(--spoil)}

/* ---- answer pill (big, centered, above the grid) ---- */
.answer-pill{
  display:flex;justify-content:center;margin:4px auto 0;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(1.7rem,5.5vw,2.5rem);letter-spacing:.18em;
  color:var(--text);text-transform:uppercase;line-height:1}
.answer-pill.spoil b{color:var(--spoil)}

/* ---- unified grid (one grid, dim unsolved, full+letter solved) ---- */
.unified-grid{display:flex;flex-direction:column;
  gap:clamp(4px,1.2vw,7px);width:max-content;margin:0 auto}
.urow{display:grid;grid-template-columns:24px repeat(5,1fr);
  gap:clamp(4px,1.2vw,7px);align-items:center;
  padding:3px;border-radius:12px;
  transition:background .15s ease;position:relative}
/* Left-side status slot : holds the green check on solved rows AND
   the active-row accent bar. Same slot for both states so cells stay
   horizontally aligned regardless. Mirror of Android Board.kt
   StatusSlot : 20.dp wide, flex-centered, stretches to row height. */
.urow .chk{
  width:20px;
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;
  font-size:1rem;color:var(--green);font-weight:700;
  opacity:0;transition:opacity .2s ease}
.urow.solved .chk,
.urow.active:not(.solved) .chk{opacity:1}
/* Vertical accent bar on the active row : explicit height so it
   renders even when the chk slot has no intrinsic content. Scales
   with the cells (clamp matches the cell-height formula trimmed
   down to ~55%). */
.urow.active:not(.solved) .chk::before{
  content:"";display:block;width:3px;
  height:clamp(22px,6.5vw,44px);
  border-radius:2px;
  background:var(--muted);opacity:.75}
.urow:not(.solved){cursor:pointer}
.cell{display:flex;align-items:center;justify-content:center;
  width:clamp(38px,11vw,75px);height:clamp(38px,11vw,75px);
  /* bevel size : ~7% of the cell, scales with it, floor 3px (banner recipe) */
  --bevel:clamp(3px,0.77vw,5px);
  border-radius:3px;font-family:"DM Mono",monospace;font-weight:500;
  text-transform:uppercase;color:#fff;background:var(--tile-bg);
  user-select:none;font-size:clamp(1.1rem,3.8vw,1.9rem);
  transition:background-color .25s,opacity .2s ease,transform .12s;
  /* beveled block : light top-left + dark bottom-right inset = lit from
     above, gives each tile a 3D pixel-block relief (own visual identity) */
  box-shadow:inset var(--bevel) var(--bevel) 0 rgba(255,255,255,.28),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 rgba(0,0,0,.22)}
.cell.b{background:var(--tile-bg);border-color:var(--tile-bg)}
.cell.g{background:var(--green);border-color:var(--green)}
.cell.y{background:var(--yellow);border-color:var(--yellow)}
.urow:not(.solved) .cell{opacity:var(--cell-op-base)}
.urow.solved .cell{opacity:var(--cell-op-solved)}
.urow.active:not(.solved) .cell{opacity:var(--cell-op-active)}

/* editor reuses the .cell base but keeps its own grid container */
.grid.editor{display:grid;column-gap:clamp(2px,0.7vw,4px);
  row-gap:clamp(2px,0.7vw,4px);
  grid-template-columns:repeat(5,max-content);width:max-content;
  justify-content:center;margin:14px auto}
.grid.editor .cell{cursor:pointer;border:2px solid var(--line);
  touch-action:none}              /* drag-to-paint must not scroll */

/* paint-color palette in the propose-a-drawing editor */
.editor-palette{display:flex;justify-content:center;gap:8px;
  flex-wrap:wrap;margin:8px 0 2px}
.pal-swatch{display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:10px;cursor:pointer;font:inherit;
  font-size:.8rem;color:var(--text);background:var(--panel2);
  border:2px solid transparent;
  transition:border-color .12s,transform .12s,background-color .12s}
.pal-swatch .sq{width:16px;height:16px}
.pal-swatch:hover{transform:translateY(-1px)}
.pal-swatch.is-active{border-color:var(--accent);background:var(--panel)}
.editor-tip{margin-top:4px}

/* "recently added" auto-scrolling carousel */
.gallery{margin:30px auto 6px;max-width:680px;overflow:hidden}
.gallery h2{text-align:center}
/* Splide marquee (app.js renderGallery + vendored Splide AutoScroll).
   Splide owns the touch/drag + auto-scroll ; the mask just fades both
   edges. .splide__slide is sized to its content (autoWidth option). */
.gallery-viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,
    #000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gallery .splide__list{align-items:stretch}
.g-card{display:flex;flex-direction:column;align-items:center;gap:8px;
  height:100%;padding:12px 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line)}
.g-mini{display:flex;flex-direction:column;gap:2px}
.g-row{display:flex;gap:2px}
.g-mini .sq{width:13px;height:13px;border-radius:3px}
.g-card figcaption{display:flex;flex-direction:column;gap:1px;
  text-align:center;font-size:.72rem;color:var(--muted)}
.g-card figcaption b{color:var(--text);font-size:.82rem}
.g-by{color:var(--accent)}
.g-date{opacity:.7}
.g-card img,.g-card .sq{pointer-events:none}
/* fallback when Splide can't initialise (script blocked / init error) :
   .splide is visibility:hidden until mounted, so force it visible and wrap
   the slides into a centered row instead of an invisible clipped strip. */
.gallery-fallback{visibility:visible}
.gallery-fallback .splide__track{overflow:visible}
.gallery-fallback .splide__list{flex-wrap:wrap;justify-content:center;gap:16px}

/* stats & history */
.stats-chip{cursor:pointer}
/* guild chip : shortcut to the profile Guild tab ; truncate long guild names */
.guild-chip{cursor:pointer}
.guild-chip b{max-width:120px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.stats-ico{width:14px;height:14px;margin-right:3px;vertical-align:-2px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
  gap:10px;margin:6px 0 4px}
.stat-tile{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 8px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line)}
.stat-tile b{font-size:1.35rem;color:var(--text);line-height:1}
.stat-tile span{font-size:.7rem;color:var(--muted);text-align:center}
.stats-recent-title{font-size:.9rem;margin:16px 0 6px;color:var(--text)}
/* activity heatmap : weeks as columns, Mon-Sun down each column */
.stats-cal{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;
  gap:3px;justify-content:start;overflow-x:auto;padding-bottom:2px}
.cal-cell{width:11px;height:11px;border-radius:3px;background:var(--panel2);
  border:1px solid var(--line)}
.cal-cell.lvl1{background:color-mix(in srgb,var(--green) 50%,transparent);
  border-color:transparent}
.cal-cell.lvl2{background:var(--green);border-color:transparent}
.stats-history{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.stats-history li{display:grid;grid-template-columns:1fr auto auto auto;
  gap:10px;align-items:center;padding:7px 11px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);font-size:.78rem}
.stats-history .sh-date{color:var(--text)}
.stats-history .sh-mode{color:var(--accent)}
.stats-history .sh-tries,.stats-history .sh-time{color:var(--muted)}
.stats-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:14px}

/* all-time community counters : "Since Drawdle began" banner (brand colours) */
.global-stats{width:100%;max-width:460px;margin:14px auto 6px;
  padding:16px 14px;border-radius:14px;
  border:1px solid var(--line);text-align:center;
  background:
    radial-gradient(120% 130% at 0% 0%,
      color-mix(in srgb,var(--yellow) 18%,transparent),transparent 58%),
    radial-gradient(120% 130% at 100% 100%,
      color-mix(in srgb,var(--green) 20%,transparent),transparent 58%),
    var(--panel)}
.global-stats-head{margin:0 0 11px;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.global-stats-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.global-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.global-stat-n{font-size:1.55rem;font-weight:800;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.global-stat-l{font-size:.72rem;color:var(--muted)}

/* "thanks to our contributors" wall */
.thanks{margin:18px auto 6px;max-width:680px;text-align:center}
.thanks h2{margin-bottom:4px}
.thanks-sub{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.thanks-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{font-size:.82rem;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.16),
    inset -1.5px -1.5px 0 rgba(0,0,0,.16)}

.pop{transform:scale(1.1)}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.dname{margin-top:10px;color:var(--muted);font-size:.85rem;
  text-transform:capitalize;text-align:center}

/* ---- input ---- */
.input-row{display:flex;gap:10px;justify-content:center;width:100%;
  max-width:360px}
#word{
  flex:1;background:var(--panel);border:1px solid var(--line);
  color:var(--text);font-family:"DM Mono",monospace;font-size:1.15rem;
  padding:13px;border-radius:10px;text-transform:uppercase;
  letter-spacing:.4em;text-align:center;text-indent:.4em;
  transition:border-color .2s,box-shadow .2s}
#word::placeholder{color:var(--muted);letter-spacing:.2em}
#word:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
button{
  background:var(--accent);color:#fff;border:none;font-weight:700;
  font-family:inherit;padding:13px 22px;border-radius:10px;cursor:pointer;
  font-size:.95rem;transition:filter .15s,transform .1s}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--muted);
  border:1px solid var(--line)}

/* "clicky" primary action buttons : a hard same-hue bottom edge (the button's
   own colour, darkened) + a soft ambient glow makes them read as raised keys ;
   they lift on hover and press flush on click. Scoped to the filled accent
   CTAs so chrome buttons (icon toggles, close X, tabs, ghost) stay flat. */
#submit, .auth-submit, #share-btn, .result-btn, #editor-send, #editor-play,
#propose-btn, .dlg-actions button:not(.ghost){
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 5px 12px color-mix(in srgb,var(--accent) 28%,transparent)}
#submit:hover, .auth-submit:hover, #share-btn:hover, .result-btn:hover,
#editor-send:hover, #editor-play:hover, #propose-btn:hover,
.dlg-actions button:not(.ghost):hover{transform:translateY(-1px);
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 8px 18px color-mix(in srgb,var(--accent) 32%,transparent)}
#submit:active, .auth-submit:active, #share-btn:active, .result-btn:active,
#editor-send:active, #editor-play:active, #propose-btn:active,
.dlg-actions button:not(.ghost):active{transform:translateY(2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 2px 6px color-mix(in srgb,var(--accent) 18%,transparent)}
#submit:disabled, .auth-submit:disabled, #share-btn:disabled,
#editor-send:disabled, #report-send:disabled{box-shadow:none;transform:none}

.feedback{min-height:1.4em;text-align:center;color:var(--muted);
  font-size:.92rem}
.feedback.ok{color:var(--green)}
.feedback.err{color:var(--danger)}

/* ---- history ---- */
.history{width:100%;max-width:460px}
#history-list{list-style:none;display:flex;flex-direction:column;gap:8px;
  max-height:240px;overflow:auto;padding:2px}
#history-list li{display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:.95rem;animation:fade .2s ease}
#history-list li.empty{justify-content:center;color:var(--muted);
  border-style:dashed}
#history-list li.hit{border-color:var(--green)}
.h-word{font-family:"DM Mono",monospace;font-weight:500;
  letter-spacing:.16em;min-width:5ch}
.h-pat{display:inline-flex;gap:3px}
.h-row{color:var(--muted);font-size:.78rem;margin-left:auto}

/* ---- win ---- */
.win-title{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;
  color:var(--text);letter-spacing:-.01em}
#replay-box{background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:16px;margin:14px 0;text-align:left}
.replay-head{color:var(--muted);font-size:.88rem;margin-bottom:10px}
#replay-words{list-style:decimal;padding-left:26px;display:flex;
  flex-direction:column;gap:6px;font-family:"DM Mono",monospace;
  font-size:1.2rem;font-weight:500;letter-spacing:.2em}
#replay-words li::marker{color:var(--muted);font-size:.8rem}
#share-text{background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:16px;margin-top:14px;white-space:pre-wrap;
  font-family:"DM Mono",monospace;font-size:.95rem;line-height:1.45;
  text-align:left}
#win{text-align:center}
/* reopen-the-result button shown on the solved board (replaces the input) */
.result-btn{display:block;margin:12px auto 0}
.guild-refresh{display:block;margin:8px auto 0;background:var(--accent);color:#fff;
  border:none;border-radius:10px;padding:11px 18px;font-weight:700;font-size:.92rem;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 5px 12px color-mix(in srgb,var(--accent) 28%,transparent)}
.guild-refresh:hover{transform:translateY(-1px)}
.guild-refresh:active{transform:translateY(2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}

/* ---- footer ---- */
.site-footer{display:flex;justify-content:center;align-items:center;
  gap:18px;flex-wrap:wrap;margin-top:auto;
  padding:24px 16px calc(32px + env(safe-area-inset-bottom))}
.footer-link{color:var(--accent);text-decoration:none;font-weight:600;
  font-size:.85rem;cursor:pointer}
.footer-link:hover{text-decoration:underline}
.propose-cta{display:flex;flex-direction:column;align-items:center;
  gap:8px;margin:30px 0 6px}
.cta-row{display:flex;justify-content:center;align-items:center;
  gap:14px;flex-wrap:wrap}
.cta-sep{width:1px;height:14px;background:var(--line);
  display:inline-block}
.kofi-mark,.paypal-mark{display:inline-flex;align-items:center;line-height:0;
  transition:transform .12s ease,opacity .12s ease}
.kofi-mark:hover,.paypal-mark:hover{transform:scale(1.08);opacity:.85}
.kofi-logo{height:22px;width:auto;display:block}
.paypal-logo{height:19px;width:auto;display:block}
.disclaimer{flex-basis:100%;text-align:center;margin:10px auto 0;
  max-width:560px;font-size:.62rem;line-height:1.5;color:var(--muted);
  opacity:.5}

/* ---- dialogs : truly centered ---- */
/* Normalized modal widths : 3 tiers, for a consistent, hand-made feel (no
   modal shrinks to its content). MEDIUM is the default here ; LARGE = the
   drawing editor ; SMALL = quick confirms / short forms. Everything maps to
   one of these three. */
dialog{
  position:fixed;inset:0;margin:auto;border:none;
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;width:min(460px,92vw);max-height:88vh;overflow:auto;
  box-shadow:var(--shadow)}                       /* medium (default) */
#editor{width:min(560px,94vw)}                    /* large */
#report, #import-progress, #spoil-warn, #endless-over{width:min(360px,92vw)}  /* small */
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
/* editor is opened non-modal (show()) so the hCaptcha challenge stays
   clickable; this is its manual backdrop. hCaptcha overlay z-index is
   ~2.1e9 so it still renders above both. */
#editor-backdrop{position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
#editor[open]{z-index:1001}
.dlg-x{position:absolute;top:8px;right:12px;background:none;border:0;
  color:var(--muted);font-size:1.7rem;line-height:1;cursor:pointer;
  padding:2px 8px;border-radius:8px}
.dlg-x:hover{color:var(--text);background:var(--panel2)}
dialog[open]{animation:pop-in .22s ease}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1}}
dialog h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.2rem;
  color:var(--text);text-transform:none;letter-spacing:0;margin-bottom:10px;
  text-align:left}
dialog em{font-style:normal}

/* how-to-play modal */
.howto-intro{color:var(--text);font-size:.92rem;line-height:1.6;
  margin-bottom:14px}
.howto-demo{background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:16px 14px;display:flex;
  flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.hd-cap{font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;text-align:center}
.hd-answer{font-family:"DM Mono",monospace;font-weight:500;
  font-size:1.15rem;letter-spacing:.22em;color:var(--text);
  margin-bottom:2px}
.hd-target,.hd-guess{display:flex;gap:5px}
.hd-target .sq{width:30px;height:30px;border-radius:5px;--bevel:2px}
.hd-target{margin-bottom:4px}
.hd-cell{width:34px;height:34px;border-radius:6px;
  border:2px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-family:"DM Mono",monospace;
  font-size:1.15rem;color:var(--text);background:transparent;
  transition:border-color .12s ease,transform .12s ease}
.hd-cell.filled{border-color:var(--muted);transform:scale(1.05)}
.hd-cell.rev{animation:hd-flip .42s ease both}
.hd-cell.b{background:var(--tile-bg);border-color:var(--tile-bg);color:#fff}
.hd-cell.g{background:var(--green);border-color:var(--green);color:#fff}
.hd-cell.y{background:var(--yellow);border-color:var(--yellow);color:#fff}
.hd-cell.b,.hd-cell.g,.hd-cell.y{box-shadow:
  inset 3px 3px 0 rgba(255,255,255,.28),
  inset -3px -3px 0 rgba(0,0,0,.22)}
@keyframes hd-flip{0%{transform:rotateY(0)}
  50%{transform:rotateY(88deg)}100%{transform:rotateY(0)}}
.hd-status{margin-top:2px;font-weight:600;font-size:.9rem;
  color:var(--green);opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease}
.hd-status.show{opacity:1;transform:none}
.howto-legend{display:flex;flex-direction:column;gap:7px;
  font-size:.86rem;color:var(--muted);margin-bottom:12px}
.howto-legend span{display:flex;align-items:center;gap:9px}

.warn-text,.hint-text{color:var(--muted);font-size:.9rem;line-height:1.6;
  margin-bottom:12px}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;
  flex-wrap:wrap;margin-top:18px}
#editor{max-width:min(640px,94vw)}   /* wide enough for 3 actions on 1 row */
#editor .dlg-actions{flex-wrap:nowrap}
#editor .dlg-actions button{white-space:nowrap;padding-left:16px;
  padding-right:16px;flex:0 1 auto}
@media (max-width:430px){#editor .dlg-actions{flex-wrap:wrap}}
.grid.editor{justify-content:center;margin:14px auto}
.editor-sent{margin-top:16px;border-top:1px solid var(--line);
  padding-top:14px}
.editor-sent h3{font-family:"Bricolage Grotesque",sans-serif;
  font-size:.8rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:10px}
#editor-sent-list{list-style:none;display:flex;flex-direction:column;
  gap:10px;max-height:190px;overflow:auto}
#editor-sent-list li{display:flex;align-items:center;gap:12px}
.sent-mini{display:flex;flex-direction:column;gap:1px;flex:none}
.sent-row{display:flex;gap:1px}
.sent-mini .sq{width:9px;height:9px;border-radius:2px;--bevel:1px}
.sent-meta{display:flex;flex-direction:column;line-height:1.35;
  font-size:.85rem}
.sent-meta span{color:var(--muted);font-size:.78rem}
.editor-fields{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.editor-fields input{width:100%;background:var(--panel);
  border:1px solid var(--line);color:var(--text);font-family:inherit;
  font-size:.92rem;padding:11px 13px;border-radius:10px;
  transition:border-color .2s,box-shadow .2s}
.editor-fields input::placeholder{color:var(--muted)}
.editor-fields input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---- feedback : report a bug / suggest a feature ---- */
.report-type{display:flex;gap:8px;margin:4px 0 12px}
.report-type .m-toggle{flex:1}
.report-message{width:100%;background:var(--panel);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:.95rem;padding:11px 13px;
  border-radius:10px;resize:vertical;min-height:96px;
  transition:border-color .2s,box-shadow .2s}
.report-message::placeholder{color:var(--muted)}
.report-message:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.report-field{display:flex;flex-direction:column;gap:4px;text-align:left;
  margin-top:10px}
.report-field>span{font-size:.78rem;color:var(--muted);font-weight:600}
.report-field input{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  font-size:1rem;font-family:inherit}
.report-field input:focus{outline:none;border-color:var(--accent)}
#report-captcha{margin:12px 0;display:flex;justify-content:center}

/* ---- entrance reveal ---- */
.reveal{animation:reveal .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--d,0) * 70ms)}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .reveal,dialog[open]{animation:none}
  *{transition:none!important}
}

/* Menu button : single drawer entry on every viewport. The drawer
   contains language, appearance, board theme, achievements and
   account, so the header itself stays minimal (brand + this button). */
.menu-btn{
  display:inline-flex;
  width:44px;height:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;padding:0;line-height:0;align-items:center;
  justify-content:center;transition:border-color .2s,color .2s;
  color:var(--text)}
.menu-btn:hover{border-color:var(--accent)}
.menu-btn svg{width:22px;height:22px;display:block}
/* sound on/off : compact icon button matching the menu button */
.sound-toggle{display:inline-flex;width:34px;height:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
  color:var(--text);transition:border-color .2s,color .2s}
.sound-toggle:hover{border-color:var(--accent)}
.sound-toggle svg{width:18px;height:18px;display:block}
.sound-toggle .snd-off{display:none}
.sound-toggle.muted{color:var(--muted)}
.sound-toggle.muted .snd-on{display:none}
.sound-toggle.muted .snd-off{display:block}

/* Mobile breakpoints sit at the very end of the file (see bottom)
   so they win source-order against later component rules like
   `.board-btn { display:inline-flex }` defined below. */

/* ---- menu drawer ---- */
#menu-drawer h2{margin-bottom:18px}
.menu-section{margin-bottom:18px}
.menu-section:last-of-type{margin-bottom:0}
.menu-section h3{
  font-family:"Bricolage Grotesque",sans-serif;font-size:.72rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;margin-bottom:10px}
.menu-row{display:flex;gap:8px}
.m-toggle{
  flex:1;padding:11px 14px;background:var(--panel2);color:var(--muted);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;
  font-size:.9rem;font-weight:600;text-align:center;font-family:inherit;
  text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;
  transition:border-color .15s,color .15s,background .15s}
.m-toggle:hover{color:var(--text);border-color:var(--accent)}
.m-toggle.on{background:var(--panel);color:var(--text);
  border-color:var(--accent);cursor:default}
.m-toggle.m-full{width:100%;flex:none}
.m-select{
  flex:1;width:100%;padding:11px 14px;background:var(--panel2);
  color:var(--text);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;font-size:.9rem;font-weight:600;font-family:inherit;
  transition:border-color .15s,background .15s}
.m-select:hover{border-color:var(--accent)}
.m-select:focus{outline:none;border-color:var(--accent)}
/* element reserves the thumb's full height (20px) so the 18px thumb can't
   overflow into the soundpack row below it */
.m-range{flex:1;width:100%;height:20px;-webkit-appearance:none;
  appearance:none;background:transparent;cursor:pointer;outline:none;margin:0}
.m-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:var(--panel2)}
.m-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  margin-top:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:2px solid var(--panel);cursor:pointer}
.m-range::-moz-range-track{height:6px;border-radius:999px;
  background:var(--panel2)}
.m-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:2px solid var(--panel);cursor:pointer}
.beta-tag{
  font-family:"DM Mono",monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);
  padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:1px;
  opacity:.85}
.beta-disclaimer{
  color:var(--muted);font-size:.78rem;line-height:1.5;
  margin-bottom:10px;padding:8px 10px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:8px}
.beta-disclaimer a{color:var(--accent);text-decoration:none;
  font-weight:600}
.beta-disclaimer a:hover{text-decoration:underline}
.m-signed-in-as{
  color:var(--text);font-size:.88rem;margin-bottom:10px}
.m-signed-in-as b{color:var(--accent);font-weight:700}

/* ---- legal pages (privacy, terms) ---- */
.legal{
  max-width:680px;margin:32px auto;padding:0 18px 60px;
  color:var(--text);line-height:1.6;position:relative;z-index:1}
.legal h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:2rem;letter-spacing:-.01em;margin-bottom:6px}
.legal h2{
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;
  text-transform:none;letter-spacing:0;color:var(--text);
  margin:28px 0 10px;font-weight:700;text-align:left}
.legal h3{
  font-size:.95rem;font-weight:600;margin:16px 0 6px;color:var(--text)}
.legal p,.legal li{font-size:.92rem;color:var(--text)}
.legal ul{padding-left:22px;margin:8px 0 12px}
.legal li{margin-bottom:4px}
.legal a{color:var(--accent);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal-meta{color:var(--muted);font-size:.82rem;margin-bottom:18px}
.legal-back{margin-bottom:18px}

/* ── blog (branded header / footer + article extras) ────────────────── */
/* match the homepage brand : centered, full-size logo + 2.4rem wordmark */
.blog-header{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;gap:12px;max-width:680px;margin:0 auto;
  padding:26px 18px 10px}
.blog-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
/* generic app controls (theme / sound / menu) reused on the static blog
   pages : a right-aligned top bar, mirroring the app's header. */
.blog-topbar{position:relative;z-index:6;display:flex;justify-content:flex-end;
  align-items:center;gap:8px;max-width:1120px;margin:0 auto;padding:14px 18px 0}
.blog-menu-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.blog-menu-nav a{display:block;padding:11px 12px;border-radius:10px;
  color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.blog-menu-nav a:hover{background:var(--panel2);color:var(--accent)}

.article-tag{display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:"DM Sans",sans-serif;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:2px 8px;
  position:relative;top:-2px}
.article-cta{margin:14px 0 6px}
/* a.article-cta-btn (element+class) so the white label beats the .legal a link
   color rule when the button sits inside an article. */
a.article-cta-btn{display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  font-size:.92rem;padding:11px 20px;border-radius:12px;
  box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent);
  transition:filter .15s,transform .08s}
a.article-cta-btn:hover{filter:brightness(1.08);transform:translateY(-1px);
  text-decoration:none;color:#fff}
.article-cta-btn:active{transform:translateY(2px);
  box-shadow:0 0 0 color-mix(in srgb,var(--accent) 55%,#000)}

.blog-footer{position:relative;z-index:1;max-width:680px;margin:20px auto 0;
  padding:24px 18px 56px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.blog-footer-brand{display:flex;align-items:center;gap:11px}
.blog-footer-brand b{font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:1.05rem;color:var(--text);display:block}
.blog-footer-brand span{color:var(--muted);font-size:.82rem}
.blog-footer-links{display:flex;flex-wrap:wrap;gap:16px}
.blog-footer-links a{color:var(--muted);text-decoration:none;font-size:.86rem;
  font-weight:600}
.blog-footer-links a:hover{color:var(--accent)}

/* blog index cards */
.blog-list{list-style:none;padding:0;margin:18px 0 0}
.blog-list li{margin:0 0 12px}
.blog-card{display:block;text-decoration:none;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;background:var(--panel2);
  transition:border-color .15s,transform .08s}
.blog-card:hover{border-color:var(--accent);transform:translateY(-1px);
  text-decoration:none}
.blog-card h2{font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem;
  margin:0 0 4px;color:var(--text);text-align:left}
.blog-card p{margin:0;color:var(--muted);font-size:.88rem}
.blog-card-date{display:block;margin-top:8px;font-size:.74rem;color:var(--muted)}

/* article layout : a sticky Drawdle panel (left) keeps the game in view while
   the article (right) scrolls. Collapses to a compact top banner on mobile. */
.blog-layout{position:relative;z-index:1;max-width:1120px;margin:0 auto;
  padding:18px 24px 0;display:flex;gap:40px;align-items:flex-start}
.blog-aside{position:sticky;top:22px;flex:0 0 256px;align-self:flex-start}
.aside-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);
  padding:20px;text-align:center;box-shadow:var(--shadow)}
.aside-brand{flex-direction:column;gap:10px;justify-content:center;width:100%}
.aside-card .brand-name{font-size:1.9rem}
.aside-desc{color:var(--muted);font-size:.9rem;line-height:1.5;margin:12px 0 16px}
.aside-card .article-cta-btn{width:100%;justify-content:center;margin-bottom:16px}
.aside-visual{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line)}
.blog-main{flex:1 1 auto;min-width:0;max-width:none;margin:14px 0 0;
  padding:0 0 40px 40px;border-left:1px solid var(--line)}

/* a small game favicon next to each entry, for visual rhythm */
.game-ico{width:28px;height:28px;border-radius:7px;vertical-align:-7px;
  margin-right:9px;background:var(--panel2);object-fit:cover}

@media (max-width:820px){
  .blog-layout{flex-direction:column;gap:0;max-width:680px;padding-top:14px}
  .blog-main{border-left:0;padding-left:0}
  .blog-aside{position:static;flex:none;width:100%;top:0;margin-bottom:6px}
  .aside-card{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
  .aside-brand{flex-direction:row;width:auto}
  .aside-card .brand-name{font-size:1.3rem}
  .aside-desc{display:none}
  .aside-card .article-cta-btn{width:auto;margin:0 0 0 auto;flex:none}
  .aside-visual{display:none}
}

/* ---- board theme picker ---- */
.board-btn{
  position:absolute;right:72px;top:0;width:28px;height:28px;
  background:var(--panel);border:1px solid var(--line);border-radius:50%;
  cursor:pointer;padding:0;line-height:0;display:inline-flex;
  align-items:center;justify-content:center;
  transition:border-color .2s}
.board-btn:hover{border-color:var(--accent)}
.board-btn svg{width:18px;height:18px;display:block}
.board-btn .bt-i-g{fill:var(--green)}
.board-btn .bt-i-y{fill:var(--yellow)}
.board-btn .bt-i-b{fill:var(--tile-bg)}
.board-btn .bt-i-d{fill:var(--text);opacity:.32}

#board-theme h2{margin-bottom:14px}
.bt-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.bt-card{display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s}
.bt-card.active{border-color:var(--accent)}
.bt-swatches{display:flex;flex-direction:column;gap:3px;flex:none}
.bt-swatch-row{display:flex;gap:3px}
.bt-swatch-row i{width:14px;height:14px;border-radius:3px;display:block;
  border:1px solid rgba(127,127,127,.25)}
.bt-meta{flex:1;display:flex;flex-direction:column;line-height:1.3;
  min-width:0}
.bt-meta strong{font-size:.98rem;color:var(--text);font-weight:700}
.bt-meta span{font-size:.78rem;color:var(--muted);margin-top:2px}
.bt-select{padding:8px 14px;font-size:.82rem;min-width:90px;
  white-space:nowrap}
.bt-card.active .bt-select,
.bt-card.locked .bt-select{opacity:1}
.bt-card.active .bt-select{background:transparent;color:var(--green);
  border:1px solid var(--green);cursor:default}
.bt-card.locked .bt-select{background:var(--line);color:var(--muted);
  cursor:not-allowed}
.bt-card.locked .bt-select:hover{filter:none}
@media(max-width:430px){
  .bt-card{flex-wrap:wrap}
  .bt-select{width:100%;margin-top:4px}
}

/* ---- achievements ---- */
#achievements h2{margin-bottom:6px}
#achievements .hint-text{margin-bottom:14px}
.ach-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:10px}
.ach-card{display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  opacity:.55;transition:opacity .2s,border-color .2s}
.ach-card.earned{opacity:1;border-color:var(--green)}
.ach-medal{flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:.95rem;color:var(--muted);background:var(--panel);
  border:2px solid var(--line)}
.ach-card.earned .ach-medal{color:#fff;background:var(--green);
  border-color:var(--green)}
.ach-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ach-label{font-size:.88rem;color:var(--text);font-weight:700}
.ach-status{font-size:.76rem;color:var(--muted);margin-top:2px}
@media(max-width:430px){
  .ach-list{grid-template-columns:1fr}
}

/* ---- responsive ---- */
/* Header controls now sit on their own row, so the brand no longer needs
   side padding to clear a floating button. */
@media(max-width:560px){
  h1{font-size:2rem}
}
@media(max-width:380px){
  h1{font-size:1.7rem}
}

/* ── puzzle archive (history) ───────────────────────────────────────── */
.archive-btn{display:inline-flex;width:34px;height:34px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
  color:var(--text);transition:border-color .2s,color .2s}
.archive-btn:hover{border-color:var(--accent)}
.archive-btn svg{width:19px;height:19px;display:block}

.archive-banner{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 12px;margin:0 auto 12px;max-width:88%;
  padding:8px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel2);color:var(--muted);font-size:.86rem;
  text-align:center}
.archive-banner .archive-back{color:var(--accent);font-weight:600;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.archive-banner .archive-back:hover{text-decoration:underline}

.archive-dlg{width:min(460px,92vw);padding:22px}   /* medium tier */
/* the calendar fills the (medium) modal width */
.cal-nav{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:4px auto 10px}
.cal-month{flex:1;text-align:center;font-weight:600;text-transform:capitalize;
  font-size:1rem;color:var(--text)}
.cal-arrow{width:36px;height:32px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--text);cursor:pointer;
  font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;transition:border-color .2s,opacity .2s}
.cal-arrow:hover:not(:disabled){border-color:var(--accent)}
.cal-arrow:disabled{opacity:.35;cursor:default}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{margin:0 auto 5px}
.cal-dow span{text-align:center;font-size:.66rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.cal-day{position:relative;aspect-ratio:1;display:flex;align-items:center;
  justify-content:center;border-radius:9px;font-size:.82rem;min-width:0;
  border:1px solid transparent;font-variant-numeric:tabular-nums}
.cal-day.empty{color:transparent}
.cal-day.free{background:var(--panel2);border-color:var(--line);
  color:var(--text);text-decoration:none;cursor:pointer;font-weight:600;
  transition:border-color .15s,transform .1s}
.cal-day.free:hover{border-color:var(--accent);transform:translateY(-1px)}
.cal-day.today{background:var(--accent);color:#fff;border-color:transparent}
.cal-day.locked{background:transparent;border-color:var(--line);
  color:var(--muted);cursor:pointer;font-weight:500;opacity:.7;
  -webkit-appearance:none;appearance:none;font-family:inherit}
.cal-day.locked:hover{opacity:1;border-color:var(--muted)}
.cal-lock{position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  opacity:.85}
.cal-locked-note{margin-top:12px;padding:10px 12px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  font-size:.82rem;line-height:1.4;text-align:center}
.cal-legend{display:flex;align-items:center;justify-content:center;
  gap:6px 16px;margin-top:12px;font-size:.74rem;color:var(--muted);
  flex-wrap:wrap}
.cal-legend .lg{display:inline-block;width:12px;height:12px;border-radius:4px;
  vertical-align:-2px;margin-right:5px}
.cal-legend .lg.free{background:var(--panel2);border:1px solid var(--line)}
.cal-legend .lg.locked{background:transparent;border:1px solid var(--muted)}

/* ── auth dialog (email/password + username) ────────────────────────── */
.auth-dlg{max-width:min(360px,94vw);padding:24px}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.auth-field{display:flex;flex-direction:column;gap:4px;text-align:left}
.auth-field>span{font-size:.78rem;color:var(--muted);font-weight:600}
.auth-field input{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  font-size:1rem;font-family:inherit}
.auth-field input:focus{outline:none;border-color:var(--accent)}
.auth-hint{font-size:.7rem;color:var(--muted)}
.auth-submit{width:100%;padding:11px;border:0;border-radius:10px;
  background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;
  cursor:pointer;font-family:inherit}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-link{display:block;width:100%;background:none;border:0;color:var(--accent);
  font-size:.85rem;cursor:pointer;padding:8px 0;font-family:inherit;text-align:center}
.auth-link:hover{text-decoration:underline}
.auth-sep{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:.75rem;margin:6px 0}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
#auth .feedback{min-height:1.1em;margin:2px 0}
.feedback.muted{color:var(--muted)}
.editor-anon{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:.88rem;color:var(--muted);cursor:pointer;margin-top:6px}
.editor-anon input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* clicky chips : a quick depress on press so they feel reactive, even the
   purely informational ones, matching the tactile button feel */
.chip{cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,
  border-color .15s ease}
.chip:active{transform:translateY(1px) scale(.97)}
/* nothing is text-selectable : double-clicking a chip, word, tile, etc. should
   never select text (it feels broken). Form fields stay editable/selectable so
   typing a guess / email still works. */
body{-webkit-user-select:none; user-select:none}
input, textarea{-webkit-user-select:text; user-select:text}

/* menu : keep the volume slider from crowding the soundpack dropdown below it */
.menu-row + .menu-row{margin-top:10px}

/* ── leaderboard + profile ──────────────────────────────────────────── */
.lb-chip{cursor:pointer}
.lb-sub{color:var(--muted);font-size:.82rem;margin:-4px 0 12px}
.lb-tabs{display:flex;gap:6px;margin:6px 0}
.lb-tabs.lb-scope{margin-top:0;margin-bottom:12px}
.lb-tab{flex:1;padding:8px 6px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font-family:inherit;font-weight:700;font-size:.84rem;
  border-radius:10px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.lb-tab:hover{color:var(--text);border-color:var(--accent)}
.lb-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.lb-scope .lb-tab{font-size:.8rem;font-weight:600}
.lb-scope .lb-tab.on{background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--text);border-color:var(--accent)}
/* a FIXED-height list with its own scroll, so the dialog stays the same size
   across the scope/mode tabs (no resize / cursor re-aim) however many rows
   load (width is the normalized medium tier from the dialog base rule). */
.lb-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;
  padding:0;height:clamp(300px,50vh,430px);overflow-y:auto;overflow-x:hidden}
.lb-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:0 12px;min-height:46px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.lb-row.me{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}
.lb-rank{text-align:center;font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.lb-row.me .lb-rank{color:var(--accent)}
.lb-name{min-width:0;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lb-lines{color:var(--muted);font-size:.78rem;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.lb-lines b{color:var(--text);font-size:1rem;margin-right:2px}
.lb-empty{color:var(--muted);text-align:center;padding:18px 6px;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;min-height:280px}
.lb-note{margin-top:14px;text-align:center;color:var(--muted);font-size:.85rem}
.stats-rank{color:var(--accent);font-weight:700;font-size:.9rem;margin:-2px 0 10px}

/* sign-in CTA (top bar, logged out) */
.signin-cta{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--accent);color:#fff;border:0;border-radius:999px;
  padding:7px 14px;font-size:.82rem;font-weight:700;font-family:inherit;
  transition:filter .15s,transform .08s,box-shadow .12s;
  box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 4px 10px color-mix(in srgb,var(--accent) 28%,transparent)}
.signin-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.signin-cta:active{transform:translateY(2px);
  box-shadow:0 0 0 color-mix(in srgb,var(--accent) 55%,#000)}
.signin-cta svg{width:15px;height:15px;display:block}

/* post-win sign-in CTA */
.win-cta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.win-cta p{color:var(--muted);font-size:.86rem;margin:0 0 10px;line-height:1.4}
.win-cta button{width:100%}

/* Listdle rating nudge (post-win, no account needed) */
.win-rate{position:relative;margin-top:12px;padding:14px 12px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);text-align:center}
.win-rate p{color:var(--muted);font-size:.86rem;margin:0 0 10px;line-height:1.4}
.win-rate-btn{display:inline-block;text-decoration:none;font-weight:700;
  font-size:.9rem;padding:9px 16px;border-radius:10px;background:var(--accent);
  color:#fff;transition:transform .12s,box-shadow .12s;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 5px 12px color-mix(in srgb,var(--accent) 28%,transparent)}
.win-rate-btn:hover{transform:translateY(-1px)}
.win-rate-btn:active{transform:translateY(2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.win-rate-x{position:absolute;top:4px;right:6px;background:none;border:0;
  color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:4px}
.win-rate-x:hover{color:var(--text)}
.win-rate.rewarded{border-color:var(--green)}
.win-rate.rewarded p{color:var(--green);font-weight:700;margin:0}

/* ---- transient toast ---- */
.toast{position:fixed;left:50%;bottom:24px;
  transform:translateX(-50%) translateY(8px);
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:11px 16px;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow);z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--danger);color:var(--danger)}

/* ---- endless mode ---- */
.endless-chip{cursor:pointer}
.endless-chip .endless-ico{font-size:1.05rem;font-weight:800;line-height:1;
  color:var(--accent)}
.endless-chip.locked{opacity:.5}
.endless-chip.locked .endless-ico{color:var(--muted)}
/* in a run, the daily chips stay (date/solved-by/leaderboard) ; only the
   difficulty chip hides (it would show the daily's, not the current round's).
   The endless HUD sits under the grid, below the drawing name. */
#game.endless #difficulty-chip{display:none}
.endless-hud{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 auto 12px;max-width:420px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px}
.eh-stats{display:flex;gap:20px}
.eh-stat{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.eh-stat b{font-size:1.15rem;color:var(--text)}
.eh-stat small{font-size:.68rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em}
.eh-actions{display:flex;gap:8px}
.eh-actions button{font-size:.82rem;padding:7px 12px}
.eh-nav{flex-direction:row;align-items:center;gap:6px}
.eh-roundwrap{display:flex;flex-direction:column;align-items:center;
  line-height:1.15;min-width:42px}
.eh-roundwrap b{font-size:1.15rem;color:var(--text)}
.eh-roundwrap small{font-size:.68rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em}
.eh-arrow{background:none;border:1px solid var(--line);color:var(--text);
  width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:1.1rem;
  line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.eh-arrow:hover:not(:disabled){border-color:var(--accent)}
.eh-arrow:disabled{opacity:.35;cursor:default}
.endless-next{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:6px auto 0;max-width:420px;text-align:center}
.endless-next p{color:var(--green);font-weight:700;margin:0}
#endless-next-btn{background:var(--accent);color:#fff;border:none;font-weight:700;
  padding:11px 20px;border-radius:10px;cursor:pointer;font-size:.95rem;
  transition:transform .12s,box-shadow .12s;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000),
             0 5px 12px color-mix(in srgb,var(--accent) 28%,transparent)}
#endless-next-btn:hover{transform:translateY(-1px)}
#endless-next-btn:active{transform:translateY(2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}

/* achievements inside the profile */
#stats-achievements{margin:4px 0 2px}
.ach-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
  gap:8px}
.ach-badge{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px;border-radius:12px;background:var(--panel2);
  border:1px solid var(--line);opacity:.5;text-align:center}
.ach-badge.got{opacity:1;border-color:var(--accent)}
.ab-medal{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.05rem;color:var(--text)}
.ach-badge.got .ab-medal{color:var(--accent)}
.ab-sub{font-size:.62rem;color:var(--muted);line-height:1.2}
/* full achievements list (profile Achievements tab) */
.ach-intro{color:var(--muted);font-size:.86rem;line-height:1.45;margin:0 0 12px}
.ach-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0;padding:0}
.ach-item{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line);opacity:.55}
.ach-item.earned{opacity:1;border-color:var(--accent)}
.ach-medal{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.2rem;color:var(--text);min-width:30px;text-align:center}
.ach-item.earned .ach-medal{color:var(--accent)}
.ach-info{display:flex;flex-direction:column;line-height:1.25}
.ach-info b{color:var(--text);font-size:.92rem}
.ach-info small{color:var(--muted);font-size:.76rem}
.stats-privacy{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.priv-row{display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.9rem;color:var(--text)}
.priv-row input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.priv-hint{margin-top:5px;color:var(--muted);font-size:.76rem;line-height:1.4}
.stats-discord{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.stats-discord .priv-hint{margin:0 0 10px}
.discord-code{margin-top:10px;text-align:center;color:var(--muted);font-size:.86rem}
.dl-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:3px 8px;color:var(--text);font-size:.95rem;letter-spacing:.06em}
.stats-guild{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.guild-name{font-weight:800;color:var(--text);margin:0 0 8px;font-size:1rem}
.guild-members{list-style:none;display:flex;flex-direction:column;gap:5px;
  margin:0;padding:0}
.guild-member{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:7px 11px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--line)}
.guild-member.me{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.gm-name{min-width:0;font-weight:600;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gm-lines{color:var(--muted);font-size:.78rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.gm-lines b{color:var(--text);font-size:.95rem}
.gm-lines small{opacity:.75}

/* profile tabs (Stats / Achievements / Guild / Account) */
.profile-tabs{display:flex;gap:6px;margin:10px 0 14px}
/* Keep the dialog a CONSTANT size across tabs : a fixed panel height with its
   own scroll, so switching tabs never resizes the centred modal (no cursor
   re-aim). Clamped to the viewport ; the dialog's max-height:88vh covers tiny
   screens, and a tab taller than the panel just scrolls inside it. */
.profile-panel{height:clamp(340px,54vh,480px);overflow-y:auto;overflow-x:hidden}
.profile-tab{flex:1;padding:9px 6px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-family:inherit;font-weight:700;
  font-size:.86rem;border-radius:10px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.profile-tab:hover{color:var(--text);border-color:var(--accent)}
.profile-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#account-signin,#account-google{margin-top:8px}
/* the signed-in account view is a stack of divided sections (Sign out, Privacy,
   Discord, Your data) ; the FIRST one drops its divider so the tab doesn't open
   with a stray line at the very top. Sign out gets its own block so it never
   reads as part of the Discord section above/below it. */
.account-session{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#account-signedin > :first-child{margin-top:0;padding-top:0;border-top:none}
#account-signedout > .priv-hint{margin-bottom:10px}
/* your data (GDPR) */
.account-data{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.account-privacy-link{display:inline-block;color:var(--accent);
  text-decoration:none;font-size:.84rem;font-weight:600;margin-top:10px}
.account-danger{border:1px solid color-mix(in srgb,var(--danger) 60%,var(--line));
  background:transparent;color:var(--danger);font-weight:700;font-family:inherit;
  border-radius:10px;padding:11px;cursor:pointer;transition:background .15s}
.account-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
#account-delete{display:block;width:100%;margin-top:8px;font-size:.92rem}
#del-confirm{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:none}
#delete-account{width:min(360px,92vw)}   /* small tier */