/* ==========================================================================
   Khammen — core design system
   Palette: faience teal + saffron + limestone. Every colour has a paired
   foreground token so no text can ever land on a surface it cannot be read on.
   ========================================================================== */

:root{
  /* night is the default; [data-theme="day"] overrides below */
  --bg:            #0D1A1C;
  --bg-deep:       #081214;
  --surface:       #132629;
  --surface-2:     #1A3237;
  --surface-3:     #234249;
  --line:          #274a51;
  --line-soft:     #1d3a40;

  --text:          #EBF1EF;
  --text-dim:      #93AEB1;
  --text-faint:    #63848a;

  --brand:         #F2B33D;   /* saffron */
  --on-brand:      #17110A;
  --brand-quiet:   #F2B33D;   /* safe as TEXT on --bg / --surface in night */

  --accent:        #43B3A9;   /* faience */
  --on-accent:     #06201E;
  --accent-quiet:  #5FC7BE;

  --good:          #2F7D4F;
  --on-good:       #EAF7EE;
  --near:          #B8891B;
  --on-near:       #16100A;
  --miss:          #26424A;
  --on-miss:       #A9C2C4;

  --danger:        #C05252;
  --on-danger:     #FFF1F1;

  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 6px 18px -8px rgba(0,0,0,.55);
  --shadow-2: 0 2px 6px rgba(0,0,0,.3),  0 24px 48px -20px rgba(0,0,0,.7);

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 30px;
  --pad: clamp(16px, 4vw, 28px);
  --maxw: 1120px;

  --f-disp-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-disp-en: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body-en: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --f-disp: var(--f-disp-en);
  --f-body: var(--f-body-en);
}

html[dir="rtl"]{ --f-disp: var(--f-disp-ar); --f-body: var(--f-body-ar); }

[data-theme="day"]{
  --bg:            #EFF1E9;
  --bg-deep:       #E4E8DC;
  --surface:       #FBFCF7;
  --surface-2:     #EAEEE2;
  --surface-3:     #DFE5D6;
  --line:          #CBD3C1;
  --line-soft:     #DCE2D3;

  --text:          #10211F;
  --text-dim:      #4E645F;
  --text-faint:    #7C918B;

  --brand:         #E7A522;
  --on-brand:      #1A1204;
  --brand-quiet:   #8A5D08;   /* darkened so saffron TEXT stays readable on paper */

  --accent:        #16736D;
  --on-accent:     #F2FBFA;
  --accent-quiet:  #0F5C57;

  --good:          #2C7A4C;
  --on-good:       #F3FBF5;
  --near:          #B07F12;
  --on-near:       #FFFBF0;
  --miss:          #C3CCBB;
  --on-miss:       #33423C;

  --danger:        #B0413F;
  --on-danger:     #FFF4F4;

  --shadow-1: 0 1px 2px rgba(24,40,36,.06), 0 8px 20px -12px rgba(24,40,36,.22);
  --shadow-2: 0 2px 8px rgba(24,40,36,.08), 0 28px 56px -28px rgba(24,40,36,.35);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; overflow-x:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px; line-height:1.6;
  min-height:100dvh;
  transition:background-color .45s ease, color .45s ease;
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent-quiet); text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-disp); font-weight:600; line-height:1.15; margin:0}
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px }
::selection{ background:var(--brand); color:var(--on-brand) }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-block-end:1px solid var(--line-soft);
}
.head-in{ display:flex; align-items:center; gap:10px; height:64px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); margin-inline-end:auto; min-width:0 }
.brand .name{ white-space:nowrap }
.brand .seal{ width:30px; height:30px; flex:none; color:var(--brand) }
.brand .name{ font-family:var(--f-disp); font-size:22px; letter-spacing:.01em; line-height:1 }
html[dir="rtl"] .brand .name{ font-size:23px; font-weight:700; letter-spacing:-.01em }
.brand .tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); display:block; margin-block-start:2px }

.hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:42px; min-width:42px; padding-inline:12px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:999px;
  cursor:pointer; font-size:13px; font-weight:500;
  transition:border-color .2s, background .2s, transform .12s;
}
.hbtn:hover{ border-color:var(--accent); transform:translateY(-1px) }
.hbtn svg{width:17px;height:17px}
.lang-btn{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em }

@media(max-width:430px){
  .head-in{ gap:7px }
  .brand .tag{ display:none }
  .gamepick .hbtn span{ display:none }
  .hbtn{ padding-inline:9px }
}

/* game switcher */
.gamepick{ position:relative }
.gp-menu{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-start:0; z-index:70;
  min-width:230px; max-height:min(70vh,460px); overflow-y:auto; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); padding:6px;
}
.gp-menu.open{ display:block; animation:rise .18s ease }
.gp-menu a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:var(--text); font-size:14.5px;
}
.gp-menu a:hover{ background:var(--surface-2) }
.gp-menu a[aria-current]{ background:var(--surface-2); color:var(--brand-quiet); font-weight:600 }
.gp-ico{ width:19px; height:19px; flex:none; color:var(--accent-quiet) }
.gp-menu a[aria-current] .gp-ico{ color:var(--brand-quiet) }

/* countdown chip */
.reset-chip{
  display:none; align-items:center; gap:7px; height:42px; padding-inline:14px;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--line);
  font-family:var(--f-mono); font-size:12px; color:var(--text-dim);
}
.reset-chip b{ color:var(--brand-quiet); font-weight:700; font-variant-numeric:tabular-nums }
@media(min-width:760px){ .reset-chip{display:inline-flex} }

/* ---------- hero ---------- */
.hero{ padding-block: clamp(28px,6vw,64px) clamp(20px,4vw,36px) }
.hero h1{
  font-size:clamp(32px,6.4vw,58px); letter-spacing:-.01em; max-width:20ch;
}
html[dir="rtl"] .hero h1{ letter-spacing:-.015em; line-height:1.35; font-weight:700 }
.hero .lede{ margin:16px 0 0; max-width:52ch; color:var(--text-dim); font-size:clamp(15px,2.2vw,18px) }
.hero-row{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:22px }
.pill{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; background:var(--surface-2);
  color:var(--text-dim); border:1px solid var(--line-soft);
}
.pill.hot{ background:var(--brand); color:var(--on-brand); border-color:transparent; font-weight:600 }

/* ---------- game grid ---------- */
.grid{
  display:grid; gap:14px; padding-block-end:44px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
}
.tile{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:18px 18px 16px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s;
}
.tile::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  opacity:0; transition:opacity .22s;
}
.tile:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-2) }
.tile:hover::after{ opacity:1 }
.tile .seal{ width:38px; height:38px; color:var(--accent-quiet) }
.tile h2{ font-size:19px }
html[dir="rtl"] .tile h2{ font-size:21px; line-height:1.4 }
.tile p{ margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.5 }
.tile .meta{
  margin-block-start:auto; padding-block-start:12px; display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.tile .state{ margin-inline-start:auto; padding:3px 8px; border-radius:999px; font-size:10px }
.state.done-win{ background:var(--good); color:var(--on-good) }
.state.done-lose{ background:var(--danger); color:var(--on-danger) }
.state.todo{ background:var(--surface-3); color:var(--text-dim) }

/* ---------- section heads ---------- */
.sec-head{ display:flex; align-items:baseline; gap:12px; margin-block:34px 16px }
.sec-head h2{ font-size:clamp(20px,3.4vw,27px) }
.sec-head .rule{ flex:1; height:1px; background:var(--line) }
.sec-head .num{ font-family:var(--f-mono); font-size:12px; color:var(--text-faint) }

/* ---------- game page ---------- */
.game-shell{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); padding-block:16px 50px }
.game-shell > *{ min-width:0 }
@media(min-width:1180px){
  .game-shell{ grid-template-columns:minmax(0,1fr) 300px; align-items:start }
  .rail{ position:sticky; top:78px }
}
.rail{ display:none }
@media(min-width:1180px){ .rail{ display:block } }

.game-head{ margin-block-end:16px }
.game-head .kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint) }
.game-head h1{ font-size:clamp(26px,5vw,40px); margin-block-start:6px }
.game-head .sub{ color:var(--text-dim); font-size:14.5px; margin-block-start:8px; max-width:60ch }
@media(max-width:760px){
  .game-head h1{ font-size:clamp(22px,5.2vw,30px) }
  .game-head{ margin-block-end:10px }
  body.compact .game-head .sub{ display:none }
  body.compact .panel{ padding:12px }
}

.panel{
  min-width:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-1);
}
.panel + .panel{ margin-block-start:16px }

/* guess bar */
.guessbar{ position:relative }
.guessbar{ min-width:0 }
.guessbar .row{ display:flex; gap:9px; min-width:0 }
.gi{
  flex:1 1 0; min-width:0; width:100%; height:52px; padding-inline:16px;
  background:var(--surface-2); color:var(--text);
  border:1.5px solid var(--line); border-radius:999px;
  font-size:16px; outline:none;
  transition:border-color .18s, background .18s;
}
.gi::placeholder{ color:var(--text-faint) }
.gi:focus{ border-color:var(--accent); background:var(--surface) }
.gbtn{
  flex:0 0 auto; height:52px; padding-inline:clamp(14px,4vw,22px); border:none; border-radius:999px;
  background:var(--brand); color:var(--on-brand); font-weight:600; cursor:pointer;
  transition:filter .18s, transform .12s;
}
.gbtn:hover{ filter:brightness(1.06) } .gbtn:active{ transform:scale(.97) }
.gbtn[disabled]{ opacity:.45; cursor:not-allowed }

.ac{
  position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:30;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); overflow:hidden; max-height:302px; overflow-y:auto; display:none;
}
.ac.open{ display:block }
.ac li{
  display:flex; align-items:center; gap:11px; padding:10px 14px; cursor:pointer;
  border-block-end:1px solid var(--line-soft); font-size:14.5px;
}
.ac li:last-child{border-block-end:none}
.ac li[aria-selected="true"], .ac li:hover{ background:var(--surface-2) }
.ac li .lg{ width:26px; height:26px; border-radius:6px; object-fit:contain; background:var(--surface-3); flex:none }
.ac li .alt{ margin-inline-start:auto; font-family:var(--f-mono); font-size:11px; color:var(--text-faint) }
.ac ul{list-style:none;margin:0;padding:0}

/* attribute board */
.board{ margin-block-start:16px; display:flex; flex-direction:column; gap:12px }
.grow{ overflow:hidden; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:12px }
.grow .who{ display:flex; align-items:center; gap:11px; margin-block-end:10px; min-width:0 }
.grow .who img,.grow .who .mono{ width:34px;height:34px;border-radius:8px;object-fit:contain;background:var(--surface-3);flex:none }
.grow .who .mono{ display:grid; place-items:center; font-family:var(--f-mono); font-weight:700; font-size:14px; color:var(--accent-quiet) }
.grow .who b{ font-size:16px; font-weight:600; overflow-wrap:anywhere; min-width:0 }
.cells{ display:grid; gap:7px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media(min-width:520px){ .cells{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)) } }
.cell{
  border-radius:10px; padding:9px 6px; text-align:center; min-height:58px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  animation:flip .42s cubic-bezier(.2,.8,.3,1) backwards;
}
@keyframes flip{ from{ transform:rotateX(-90deg); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .cell{animation:none} .tile{transition:none} }
.cell .k{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.8; overflow-wrap:anywhere }
.cell .v{ font-size:13px; font-weight:600; line-height:1.25; overflow-wrap:anywhere }
.cell.hit{ background:var(--good); color:var(--on-good) }
.cell.near{ background:var(--near); color:var(--on-near) }
.cell.off{ background:var(--miss); color:var(--on-miss) }

/* wordle / numberle grid */
.wgrid{ display:grid; gap:5px; justify-content:center; margin-block:4px; max-width:100% }
.wrowr{ display:grid; gap:7px; grid-auto-flow:column }
.wc{
  width:var(--wc, clamp(30px,8.2vw,52px)); aspect-ratio:1; display:grid; place-items:center;
  border:2px solid var(--line); border-radius:10px; background:transparent;
  font-size:clamp(17px,4.4vw,26px); font-weight:600; font-family:var(--f-body);
  transition:background .2s, border-color .2s, color .2s;
}
.wc.filled{ border-color:var(--text-faint) }
.wc.hit{ background:var(--good); border-color:var(--good); color:var(--on-good) }
.wc.near{ background:var(--near); border-color:var(--near); color:var(--on-near) }
.wc.off{ background:var(--miss); border-color:var(--miss); color:var(--on-miss) }
@keyframes shakeRow{ 0%,100%{transform:none} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.wrowr.shake{ animation:shakeRow .34s }
@media (prefers-reduced-motion:reduce){ .wrowr.shake{animation:none} }
.kbd{ display:flex; flex-direction:column; gap:5px; align-items:stretch; margin-block-start:10px; width:100%; max-width:560px; margin-inline:auto }
@media(max-width:760px){
  .kbd{
    position:sticky; bottom:0; z-index:25; margin-block-start:12px;
    padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top, var(--surface) 78%, transparent);
  }
}
.kbd .kr{ display:flex; gap:3.5px; justify-content:center; flex-wrap:nowrap; width:100% }
.kbd .kr-act{ gap:7px; margin-block-start:3px }
.key{
  flex:1 1 0; min-width:0; max-width:44px; height:clamp(34px,5.2vh,46px); padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  color:var(--text); font-size:clamp(13px,4vw,17px); font-weight:600; cursor:pointer;
  display:grid; place-items:center; transition:background .15s, transform .1s;
}
.key:active{ transform:scale(.94) }
.key.wide{ flex:1.7 1 0; max-width:110px; font-size:clamp(11px,2.9vw,13px) }
.key.hit{ background:var(--good); color:var(--on-good); border-color:var(--good) }
.key.near{ background:var(--near); color:var(--on-near); border-color:var(--near) }
.key.off{ background:var(--miss); color:var(--on-miss); border-color:var(--miss) }
.key.act{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }

/* globe */
.globe-wrap{ display:grid; place-items:center; padding-block:6px }
#globe{ width:min(100%,420px); aspect-ratio:1; cursor:grab; touch-action:none }
#globe:active{ cursor:grabbing }
.near-list{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:12px; justify-content:center }
.near-chip{ display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:13px }
.near-chip .pct{ font-family:var(--f-mono); font-size:11px; color:var(--brand-quiet); font-weight:700 }

/* result banner */
.result{
  margin-block-start:16px; border-radius:var(--r-md); padding:16px 18px;
  border:1px solid var(--line); background:var(--surface-2); display:none;
}
.result.show{ display:block; animation:rise .35s ease }
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result.win{ border-color:var(--good) }
.result.lose{ border-color:var(--danger) }
.result h3{ font-size:19px; margin-block-end:6px }
.result .ans{ font-size:15px; color:var(--text-dim) }
.result .ans b{ color:var(--brand-quiet) }
.result .acts{ display:flex; gap:9px; flex-wrap:wrap; margin-block-start:14px }

/* win celebration */
.result.win{ position:relative; overflow:hidden }
.result.win h3{ font-size:26px; color:var(--brand-quiet) }
.pop{ display:inline-block; animation:pop .5s cubic-bezier(.2,1.5,.4,1) }
@keyframes pop{ 0%{transform:scale(.4);opacity:0} 60%{transform:scale(1.12)} 100%{transform:none;opacity:1} }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden }
.cf{ position:absolute; will-change:transform,opacity }
.cf-rect{ width:9px; height:15px; border-radius:2px }
.cf-round{ width:11px; height:11px; border-radius:50% }
.cf-strip{ width:4px; height:20px; border-radius:3px }
.cf-fall{ animation:cfFall linear forwards }
.cf-burst{ inset-inline-start:50%; top:46%; animation:cfBurst 1.5s cubic-bezier(.15,.7,.3,1) forwards }
@keyframes cfFall{ to{ transform:translateY(112vh) rotate(900deg); opacity:0 } }
@keyframes cfBurst{
  0%{ transform:translate(0,0) scale(.4) rotate(0); opacity:1 }
  65%{ opacity:1 }
  100%{ transform:translate(var(--dx),var(--dy)) scale(1) rotate(540deg); opacity:0 }
}
.result.win{ animation:winGlow 1.6s ease }
@keyframes winGlow{
  0%{ box-shadow:0 0 0 0 rgba(242,179,61,.55) }
  100%{ box-shadow:0 0 0 22px rgba(242,179,61,0) }
}
.result.win h3{ animation:pop .55s cubic-bezier(.2,1.6,.4,1) }
@media (prefers-reduced-motion:reduce){ .cf{display:none} .pop,.result.win,.result.win h3{animation:none} }

/* the full answer, revealed after a loss */
.answer-card{ margin-block-start:14px }
.answer-card .grow{ background:var(--surface); border-color:var(--good) }
.answer-card .grow .cell{ animation:none }

/* phone-keyboard mode hides our on-screen one */
.ghost-input{
  width:100%; max-width:320px; margin:0 auto 10px; display:none; height:46px; text-align:center;
  background:var(--surface-2); color:var(--text); border:1.5px solid var(--accent); border-radius:12px;
  font-size:20px; letter-spacing:.25em;
}
body.phone-kbd .ghost-input{ display:block }
body.phone-kbd .kbd .kr:not(.kr-act){ display:none }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center }
.stat b{ display:block; font-family:var(--f-mono); font-size:22px; color:var(--brand-quiet) }
.stat span{ font-size:11px; color:var(--text-dim); letter-spacing:.04em }

/* how to play + faq */
details.howto{ padding:0 }
details.howto > summary{
  cursor:pointer; list-style:none; padding:11px 16px; display:flex; align-items:center; gap:10px;
}
details.howto > summary::-webkit-details-marker{ display:none }
details.howto > summary h2{ font-size:15px; margin:0; font-weight:600 }
details.howto > summary::after{
  content:"+"; margin-inline-start:auto; color:var(--brand-quiet); font-family:var(--f-mono); font-size:17px;
}
details.howto[open] > summary::after{ content:"–" }
details.howto[open] > summary{ border-block-end:1px solid var(--line-soft) }
details.howto > *:not(summary){ padding-inline:18px }
details.howto > .legend{ padding-block-end:16px }
.howto ol{ margin:10px 0 0; padding-inline-start:20px; font-size:14.5px; color:var(--text-dim) }
.howto li{ margin-block-end:6px }
.legend{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:12px }
.lg-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim) }
.sw{ width:16px; height:16px; border-radius:5px }
details.faq{ border-block-end:1px solid var(--line-soft); padding-block:12px }
details.faq summary{ cursor:pointer; font-weight:600; font-size:15px; list-style:none }
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{ content:"+"; float:inline-end; color:var(--brand-quiet); font-family:var(--f-mono) }
details.faq[open] summary::after{ content:"–" }
details.faq p{ margin:9px 0 0; color:var(--text-dim); font-size:14px }

/* ads --------------------------------------------------------------------
   Slots are fixed-size so nothing jumps when an ad loads. An unfilled slot
   (account under review, no fill in this country, blocker installed) is
   removed completely rather than left as an empty white block.            */
.ad{ display:none; align-items:center; justify-content:center; margin-block:18px; overflow:hidden }
.ad.filled{ display:flex }
.ad-slot{ display:block; width:100%; }

.ad-p-top .ad-slot,
.ad-p-foot .ad-slot{ height:100px }
.ad-p-mid .ad-slot{ height:250px }
.ad-p-rail .ad-slot{ width:300px; height:600px }
.ad-p-anchor .ad-slot{ width:320px; height:50px }
@media(min-width:760px){
  .ad-p-top .ad-slot, .ad-p-foot .ad-slot{ height:90px; max-width:728px }
  .ad-p-mid .ad-slot{ height:280px; max-width:336px }
}

/* collapse anything Google did not fill */
ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important }

.ad-anchor{
  display:none;
  position:fixed; inset-inline:0; bottom:0; z-index:60; display:flex; justify-content:center;
  background:var(--surface); border-block-start:1px solid var(--line); padding:4px 0;
}
.ad-anchor.filled{ display:flex }
@media(min-width:1180px){ .ad-anchor{ display:none !important } }
body.has-anchor{ padding-block-end:0 }
body.anchor-live{ padding-block-end:70px }
@media(min-width:1180px){ body.has-anchor{ padding-block-end:0 } }

/* footer */
.site-foot{ border-block-start:1px solid var(--line-soft); padding-block:28px 40px; margin-block-start:20px; color:var(--text-dim); font-size:13.5px }
.foot-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.foot-grid h3{ font-size:14px; margin-block-end:9px; color:var(--text) }
.foot-grid a{ display:block; color:var(--text-dim); text-decoration:none; padding-block:3px }
.foot-grid a:hover{ color:var(--accent-quiet) }

/* toast */
#toast{
  position:fixed; inset-block-end:88px; inset-inline:0; margin-inline:auto; width:max-content; max-width:88vw;
  background:var(--text); color:var(--bg); padding:10px 18px; border-radius:999px;
  font-size:14px; z-index:80; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#toast.show{ opacity:1; transform:none }