/* "Nightfall" look: true black, dark tiles, one font (Plus Jakarta Sans). Blue is saved for the spirit and a few small highlights (the NOW line, the send button, checked boxes); gold is for anything needing attention. Phone first: one column with the say-it bar and tabs pinned to the bottom. Desktop uses the same centered column. The spirit lives in the top-right corner of the Today screen and never moves from there. */
/* The lettering is kept in the app (A63: it came from Google Fonts, which held up the first picture on every opening
   and saw everyone's internet address). Plus Jakarta Sans, SIL Open Font License (fonts/OFL.txt); one file holds every
   weight. block: the file is on the phone, so there's no flash of other lettering while it loads. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:block;src:url(fonts/jakarta-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:block;src:url(fonts/jakarta-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#000000;
  --tile:#0D0E11;
  --tile-2:#14161B;
  --border:#1C1E24;
  --line:#16181D;
  --fg:#F4F5F7;
  --muted:#A9AEBA;
  --faint:#7D828F;
  --accent:#5CC8FF;
  --accent-ink:#021320;
  --gold:#F5C451;
  --gold-soft:rgba(245,196,81,.10);
  --gold-line:rgba(245,196,81,.28);
  --gold-ink:#1A1408;
  /* the Daily word's tiles and keys are the same in every theme (v0.1.86, Hunter: "the daily word colors
     shouldn't change"): green for the right spot, yellow for in the word, black for not in it */
  --hot:#FF8232;--hot-lite:#FFC9A6;--tb-a:#3A150A;--tb-b:#1A0905;--tb-glow:rgba(255,120,45,.30);--tb-glow2:rgba(255,96,30,.10);--spark:#FFD2A6;--spark-core:#FFB070;   /* the game table's (A61; each theme names its own) */
  --wd-yes:#3FA65A;
  --wd-near:#B88A1C;   /* a touch darker in A34 so the white letter reads (3:1) */
  --wd-no:#25272C;
  --wd-ink:#FFFFFF;
  /* everything below is worked out from the colors above, so each theme (More › Theme, v0.1.85) only
     sets those: app.js THEMES. Controls, and gold, blue, violet and green tints that read on any theme. */
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --ctl-soft:color-mix(in srgb,var(--fg) 9%,var(--tile));
  --ctl:color-mix(in srgb,var(--fg) 13%,var(--tile));
  --ctl-2:color-mix(in srgb,var(--fg) 20%,var(--tile));
  --ctl-3:color-mix(in srgb,var(--fg) 28%,var(--tile));
  --gold-panel:color-mix(in srgb,var(--gold) 9%,var(--tile));
  --gold-text:color-mix(in srgb,var(--gold) 62%,var(--fg));
  --gold-sub:color-mix(in srgb,var(--gold) 55%,var(--faint));
  --acc-panel:color-mix(in srgb,var(--accent) 8%,var(--tile));
  --acc-tint:color-mix(in srgb,var(--accent) 14%,var(--tile));
  --acc-line:color-mix(in srgb,var(--accent) 28%,var(--tile));
  --acc-deep:color-mix(in srgb,var(--accent) 10%,var(--bg));
  --violet:color-mix(in srgb,#A57BFF 80%,var(--fg));
  --violet-panel:color-mix(in srgb,#A57BFF 9%,var(--tile));
  --violet-line:color-mix(in srgb,#A57BFF 32%,var(--tile));
  --green:color-mix(in srgb,#5FD597 82%,var(--fg));
  --green-line:color-mix(in srgb,#5FD597 26%,var(--tile));
  --red:color-mix(in srgb,#FF6B7A 82%,var(--fg));   /* weak against, damage (A34: a color name, so Daylight can make it darker) */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-tile:16px;
  --r-btn:14px;
  --r-bar:22px;
  --dock-h:150px;
  --spirit:76px;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* no double-tap zoom (iPhones zoomed in on quick taps, Oct 8); pinching still zooms */
*{touch-action:manipulation}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* the Android app (N1, native.js): like other apps, a long press doesn't select the screen's words or open a link menu;
   what you type still can be */
html.kl-native body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.kl-native :is(input,textarea,[contenteditable],[contenteditable] *){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
[hidden]{display:none!important}
img{max-width:100%}
html,body{background:var(--bg);color:var(--fg)}
/* nothing ever makes the screen wider than the phone (A64, Hunter Oct 12: swiping between tabs zoomed the page out and
   pushed the bar away while a page slid in from the side): the sideways overflow is cut at the screen's edges.
   (clip, not hidden: no scroll box, so sticky headers keep working) */
html,body{overflow-x:clip}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:15px;line-height:1.5;padding-inline:16px;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
h1,h2{margin:0}
/* (the full check, Oct 26) set on .app and .nt-fab themselves (toastH in app.js): not passed down, so a pop-up restyles only them */
@property --toast-h{syntax:'<length>';inherits:false;initial-value:0px}
.app{position:relative;max-width:560px;margin:0 auto;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--dock-h) + 20px + var(--toast-h,0px))}

/* shared bits */
.label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sub{font-size:13px;color:var(--muted);line-height:1.4}
.tile{background:var(--tile);border:1px solid var(--border);border-radius:var(--r-tile)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:18px 2px 8px}
.sec-head h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
.count{font-size:13px;font-weight:600;color:var(--faint)}
.gear{width:44px;height:44px;margin:-10px -10px -10px 0;border-radius:var(--r-btn);border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--faint);flex:none}
.gear:hover{color:var(--fg)}
.gear svg{width:18px;height:18px}
.linkish{border:0;background:none;padding:0;min-height:44px;color:var(--accent);font-weight:700;font-size:15px;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Today header: date + greeting on the left, the spirit in the top-right corner */
.hero{display:grid;grid-template-columns:minmax(0,1fr) var(--spirit);gap:10px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:6px;min-height:24px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.eyebrow #today{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h1{font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.025em;margin-top:2px;text-wrap:balance}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:24px;margin-bottom:14px}
.brief{margin:10px 0 0;font-size:16px;font-weight:500;line-height:1.5;color:var(--muted);text-wrap:pretty}
.brief b{font-weight:700;color:var(--fg)}
.brief .hl{color:var(--gold);font-weight:600}

/* Weather + Leave by tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.stat{padding:13px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:4px}
.stat .v.dim{color:var(--faint)}
.stat .v.warn{color:var(--gold)}
.stat .v small{font-size:15px;font-weight:600;letter-spacing:0;margin-left:4px;color:var(--muted)}
.nw{white-space:nowrap}
.stat .dimv{color:var(--muted)}
/* sunrise and sunset in the Weather tile, this week's moon under the tiles (A27) */
.wx-sun{display:block;margin-top:3px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mn-row{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px;padding:11px 10px 8px;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
/* the moon drawing: dark side, shaded lit side (mn-s1 to mn-s2), faint craters, a rim, a glow by how full it is */
.mn-m{display:block;overflow:visible;filter:drop-shadow(0 0 calc(var(--mn-g,0) * 5px) rgba(220,230,255,calc(var(--mn-g,0) * .45)))}
.mn-dk{fill:color-mix(in srgb,var(--fg) 9%,var(--tile))}
.mn-rim{fill:none;stroke:color-mix(in srgb,var(--fg) 16%,transparent);stroke-width:.6}
.mn-s1{stop-color:#FFFFFF}
.mn-s2{stop-color:#BCC6D6}
.mn-cr circle{fill:#6E7890;opacity:.22}
.mn-full{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 70%,transparent))}
.mn-full .mn-s1{stop-color:#FFF6D8}
.mn-full .mn-s2{stop-color:var(--gold)}
.mn-full .mn-cr circle{fill:#A8761C;opacity:.25}
/* the light theme: a darker shadow side so the lit side reads the right way round on white */
[data-theme="daylight"] .mn-dk{fill:color-mix(in srgb,var(--fg) 62%,var(--tile))}
[data-theme="daylight"] .mn-m:not(.mn-full){filter:none}
/* the sheet: tonight's moon big, the countdown, then the week */
.mn-hero{display:flex;align-items:center;gap:18px;padding:4px 4px 0}
.mn-big{flex:none;display:block}
.mn-hi{display:flex;flex-direction:column;gap:3px;min-width:0}
.mn-hi b{font-size:22px;letter-spacing:-.02em;line-height:1.15}
.mn-pct{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mn-big.full+.mn-hi b{color:var(--gold)}
.mn-list .mn-li{grid-template-columns:58px 26px minmax(0,1fr) auto;align-items:center;min-height:0;padding:7px 0}
.mn-list .mn-li .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-list .mn-li time{white-space:nowrap}
.mn-list .mn-li .mn-m{display:block}
.mn-list .mn-li .what{justify-content:flex-start;text-align:left}
.mn-li.today .t{font-weight:700}
.mn-li.today time{color:var(--fg)}
.mn-li.full .t,.mn-li.full time{color:var(--gold)}
.mn-next{margin:0;padding:11px 14px;border-radius:14px;background:var(--tile-2);font-size:14px;color:var(--muted)}
.mn-next b{color:var(--fg)}
.mn-next.full{background:var(--gold-soft);color:var(--gold)}
.mn-next.full b{color:var(--gold)}
/* Radiant's mark, the twin glint (v0.2.46): sized by the text around it */
.rdm{display:inline-block;width:1em;height:1em;vertical-align:-.12em;overflow:visible}
.rdm-a{fill:#FFF3D1;stroke:var(--gold);stroke-width:.9;stroke-linejoin:round}
.rdm-b{fill:var(--gold)}
.gm-yrad .rdm{width:.85em;height:.85em;filter:drop-shadow(0 0 5px rgba(255,227,154,.8))}
.mn-next .rdm{vertical-align:-.15em;margin-right:2px}
.mn-note{margin:0}
.stat .hl{color:var(--gold);font-weight:600}
.stat .linkish{margin-top:2px}

/* alert row: only shown when something needs attention */
.alert{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;min-height:48px;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--fg);text-align:left;cursor:pointer;font-size:15px;font-weight:600;line-height:1.35}
.adot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 8px color-mix(in srgb,var(--gold) 70%,transparent)}
.atext{flex:1;min-width:0;overflow-wrap:anywhere}
.aarea{flex:none;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.alert.nudge{animation:nudge 1.6s ease-out 3}
@keyframes nudge{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 0%,transparent)}}

/* lists inside tiles (Today, Reminders, Calendar day, Coming up) */
.list{list-style:none;margin:0;padding:2px 16px;display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:11px 0;border-top:1px solid var(--line);min-height:46px}
.item:first-child,.now-line+.item{border-top:0}
.item time{color:var(--muted);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.what{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.what .t{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.what .muted{font-size:13px;color:var(--faint)}
.item.past{opacity:.42}
.tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tag.rem{color:var(--gold)}
.item.rem time,.item.rem .t{color:var(--gold)}
.item[data-edit]{cursor:pointer}
.item[data-edit]:hover .t{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.now-line{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;padding:4px 0;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.now-line::after{content:"";height:1.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 50%,transparent)}
.empty{color:var(--faint);font-size:14px;padding:14px 0;margin:0}
.fresh{animation:fresh 1.8s ease-out}
@keyframes fresh{0%{background:var(--accent-soft)}100%{background:transparent}}
.del{border:0;background:none;color:var(--faint);cursor:pointer;width:36px;height:36px;margin:-8px -10px -8px 0;border-radius:10px;font-size:20px;line-height:1;align-self:center}
.del:hover{color:var(--fg);background:var(--tile-2)}

/* reminders checklist */
.todo{display:flex;align-items:center;border-top:1px solid var(--line)}
.todo:first-child{border-top:0}
.todo-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;border:0;background:none;cursor:pointer;text-align:left}
.check{width:22px;height:22px;border-radius:50%;border:2px solid var(--ctl-2);display:grid;place-items:center;flex:none;transition:background .15s,border-color .15s}
.check svg{opacity:0}
.todo-main:hover .check{border-color:var(--accent)}
.todo-main.todo-ck{flex:none;padding-right:12px}
.todo-ed{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.todo .t{flex:1;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.due{font-size:13px;font-weight:600;color:var(--faint);white-space:nowrap}
.due.soon{color:var(--gold)}
.todo.done .check{background:var(--accent);border-color:var(--accent)}
.todo.done .check svg{opacity:1}
.todo.done .t{text-decoration:line-through;color:var(--faint);font-weight:500}
.todo.done .due{opacity:.6}
.todo .del{margin-left:4px}

/* month calendar */
.cal{padding:12px}
.month-name{font-size:17px;font-weight:700;letter-spacing:-.01em}
.icon-btn{width:44px;height:44px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--tile-2);cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.icon-btn:hover{color:var(--fg)}
.dow,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.dow span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:4px 0}
.day{aspect-ratio:1/1;min-height:40px;max-height:64px;width:100%;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-variant-numeric:tabular-nums;font-weight:600;font-size:15px}
.day:hover{background:var(--tile-2)}
.day.other{color:var(--ctl-3)}
.day.gone{color:var(--ctl-2)}
.day.today{border-color:var(--accent);color:var(--accent)}
.day.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);border-color:var(--accent)}
.day .pips{display:flex;gap:3px;height:4px}
.day .pips i{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.day .pips i.r{background:var(--gold)}

.field{background:var(--tile-2);border:1px solid var(--border);border-radius:12px;padding:11px 12px;min-height:44px;min-width:0;width:100%;font-size:15px}
.field:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field::placeholder{color:var(--faint)}
.kind{display:flex;gap:6px}
.kind label{flex:1;display:grid;place-items:center;min-height:44px;border-radius:12px;border:1px solid var(--border);cursor:pointer;font-size:14px;font-weight:700;color:var(--faint)}
.kind input{position:absolute;opacity:0;pointer-events:none}
.kind input:checked+span{color:var(--fg)}
.kind label:has(input:checked){border-color:var(--ctl-2);background:var(--tile-2)}
.kind label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* (v0.4.50, Hunter Oct 13: "I do not like the bright white buttons … everything should match": a soft tint of the
   theme's color with its text, like Health's icons; was white with dark text. The text has a little of the main text
   color in it, so it reads 4.5:1 on light themes too) */
.btn{border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:var(--r-btn);min-height:44px;padding:10px 18px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:color-mix(in srgb,var(--accent) 80%,var(--fg));font-weight:700;font-size:15px;cursor:pointer}
.btn:hover{filter:brightness(.92)}
.btn:where(:not(.ghost,.danger)):active{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.form-err{color:var(--gold);font-size:13px;font-weight:600}

.soon-title{font-size:20px;font-weight:700;letter-spacing:-.02em}

/* dock: say-it bar + tabs, pinned to the bottom */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 78%,transparent)}
.dock-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);margin-inline:-16px;padding-top:2px}
.tab{border:0;background:none;min-height:52px;padding:6px 4px;font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--faint);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tab svg{width:20px;height:20px}
.tab[aria-selected="true"]{color:var(--fg)}
.toast{position:fixed;left:50%;transform:translateX(-50%);width:min(528px,calc(100vw - 32px));bottom:calc(var(--dock-h) + 8px);z-index:50;display:flex;align-items:center;gap:10px;background:var(--tile-2);border:1px solid var(--border);border-radius:var(--r-btn);padding:8px 8px 8px 14px;font-weight:600;font-size:14px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.toast span{flex:1;min-width:0}
.toast button{border:0;background:none;color:var(--accent);border-radius:10px;min-height:36px;padding:6px 10px;font-weight:700;font-size:14px;cursor:pointer}
.toast.miss{color:var(--gold);border-color:var(--gold-line)}
.toast.miss button{display:none}

/* the spirit: fixed in its corner, floats gently, changes poses in place */
.spirit-spot{position:relative;width:var(--spirit);height:var(--spirit);align-self:start;margin-top:-4px}
.spirit{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.spirit .bob{display:block;width:100%;height:100%;animation:bob 3.4s ease-in-out infinite}
.spirit .dancer{display:block;width:100%;height:100%}
.spirit.dance .dancer{animation:dance .8s ease-in-out 3}
/* the hook (Oct 21): one spin when something is ticked off on Today */
.spirit.hk-spin .dancer{animation:hk-spin .75s cubic-bezier(.3,.7,.4,1)}
/* (on Today's sky, which takes white words in every theme, like the greeting) */
.hk-pop{position:absolute;left:50%;top:4px;z-index:2;display:inline-flex;align-items:center;gap:3px;font-size:16px;font-weight:800;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);opacity:0;pointer-events:none;white-space:nowrap;transform:translateX(-50%)}
.hk-pop svg{width:16px;height:16px}
.hk-pop.go{animation:hk-pop 1.5s ease-out}
@keyframes hk-pop{0%{opacity:0;transform:translate(-50%,8px)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-24px)}}
@keyframes hk-popf{0%,100%{opacity:0}15%,70%{opacity:1}}
@media (prefers-reduced-motion: reduce){.hk-pop.go{animation:hk-popf 1.5s ease-out}}
@keyframes hk-spin{0%{transform:none}45%{transform:translateY(-10px) rotate(200deg)}100%{transform:rotate(360deg)}}
.spirit.flutter .dancer{animation:flutter .5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dance{0%,100%{transform:rotate(0)}25%{transform:translateY(-3px) rotate(-9deg)}75%{transform:translateY(-3px) rotate(9deg)}}
@keyframes flutter{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}

/* speech bubble opens just below the spirit; tapping anywhere else closes it */
.bubble{position:absolute;right:4px;top:calc(100% + 8px);z-index:30;width:max-content;max-width:min(260px,calc(100vw - 32px));background:var(--tile-2);color:var(--fg);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-weight:600;font-size:14px;line-height:1.45;padding:10px 14px;border-radius:var(--r-btn);box-shadow:0 10px 30px rgba(0,0,0,.7);opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s;pointer-events:none}
.bubble::before{content:"";position:absolute;top:-6px;right:28px;width:10px;height:10px;background:var(--tile-2);border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-top:1px solid color-mix(in srgb,var(--accent) 35%,transparent);transform:rotate(45deg)}
.bubble.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.spirit .bob,.spirit.dance .dancer,.spirit.hk-spin .dancer,.spirit.flutter .dancer,.alert.nudge,.fresh{animation:none}.bubble{transition:none}}

/* settings sheet */
.sheet-wrap{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.75);display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet-wrap{align-items:center}}
.sheet{width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;background:var(--tile);border:1px solid var(--border);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:18px}
.sheet h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.fieldset{display:flex;flex-direction:column;gap:8px}
.fieldset label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.row2{display:flex;gap:8px}
.row2 .field{flex:1}
.places{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.places button{width:100%;min-height:44px;text-align:left;border:1px solid var(--border);background:var(--tile-2);border-radius:12px;padding:10px 12px;cursor:pointer}
.places button:hover{border-color:var(--ctl-2)}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.btn.danger{background:none;color:var(--gold);border:1px solid var(--gold-line)}
.note{color:var(--faint);font-size:13px}

/* calendar add button + add/edit sheet */
.ed-form{display:flex;flex-direction:column;gap:14px}
.ed-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fieldset label{display:flex;justify-content:space-between;align-items:center}
.clear-btn{border:0;background:none;padding:0 2px;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.clear-btn:hover{color:var(--fg)}
.days-pick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dp{height:44px;border-radius:50%;aspect-ratio:1/1;max-width:44px;justify-self:center;width:100%;border:1px solid var(--border);background:var(--tile-2);color:var(--muted);font-weight:700;font-size:14px;cursor:pointer}
.dp[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);border-color:var(--accent)}
.rp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.rp-sum{font-size:13px;color:var(--muted)}
.rp-quick{display:flex;gap:0 14px;flex-wrap:wrap}
.rp-quick .linkish{font-size:13px;min-height:36px}
.rp-quick .linkish[aria-pressed="true"]{color:var(--fg);font-weight:700;text-decoration:underline}
.ed-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ed-foot .grow{flex:1}
.btn.ghost{background:none;color:var(--muted);border:1px solid var(--border)}
.early-row{display:flex;align-items:center;gap:10px}
.early-row .field{width:76px;flex:none;text-align:center}
.todo.heads{gap:12px;min-height:48px;padding:6px 0;cursor:pointer}
.heads-dot{width:22px;flex:none;display:grid;place-items:center}
.heads-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px color-mix(in srgb,var(--gold) 60%,transparent)}
.todo.heads .due{color:var(--gold)}
.day{position:relative}
.hol-ic{position:absolute;top:2px;right:3px;font-size:11px;line-height:1}
.item.hol{cursor:default}
.item.hol .t{color:var(--fg)}
.item.ends .t{color:var(--muted);font-weight:500}
.item.ends time{color:var(--faint)}
.push-opts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.opt-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pk-list{display:flex;flex-direction:column;gap:6px}
.pk-g{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.pk-list .pk-g:first-child{margin-top:0}
.pk-row{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.pk-row .opt-row{min-height:36px}
.pk-t{justify-content:flex-end}
.fr-mutd{font-size:12px;font-weight:400}
.opt-row label{font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}
.opt-row label>.note{margin-left:.3em}   /* ("Wind down (before bed)" read "Wind down(before bed)") */
.field.small{width:auto;min-width:112px;flex:none}
/* Notify me (A55): its longer choices shrink to fit beside the label at phone width (the list shows them whole) */
#ed-notify{flex:0 1 auto;min-width:0;max-width:64%;text-overflow:ellipsis}
.ed-nt-row label{flex:none}
select.field{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}

/* settings: a menu of categories, each opening on its own */
.sheet-head{display:flex;align-items:center;gap:6px}
.back-btn{width:44px;height:44px;margin-left:-12px;border:0;background:none;color:var(--fg);border-radius:12px;display:grid;place-items:center;cursor:pointer}
.set-menu{display:flex;flex-direction:column;background:var(--tile-2);border:1px solid var(--border);border-radius:var(--r-tile);overflow:hidden}
.set-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--fg)}
.set-row:first-child{border-top:0}
.set-row:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.set-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tile);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.set-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.set-txt b{font-size:15px;font-weight:600}
.set-txt .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--faint);flex:none}
.set-sec{display:flex;flex-direction:column;gap:18px}
.switch{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:999px;background:var(--ctl);position:relative;cursor:pointer;flex:none;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#F4F5F7;transition:transform .15s}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(20px)}

.sec-link{min-height:32px;font-size:14px}

.icon-btn:disabled{opacity:.3;cursor:default}
.wake-days{display:flex;flex-direction:column;gap:6px}
.wake-in{display:flex;align-items:center;gap:8px}
.wake-in .field{width:132px}
.wake-in .clear-btn{min-width:44px}
.tab{position:relative}
.tab-dot{position:absolute;top:8px;left:calc(50% + 8px);width:7px;height:7px;border-radius:50%;background:var(--gold)}
#v-more .set-menu{margin-bottom:6px}
/* Today: countdowns (only when something is close, or you asked for a countdown) */
.countdowns{display:flex;flex-wrap:nowrap;gap:8px;margin:12px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.countdowns::-webkit-scrollbar{display:none}
.cd{flex:none;white-space:nowrap}
.cd{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;background:var(--tile);border:1px solid var(--border);font-size:13px;color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.cd b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.cd.soon{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.cd.soon b{color:var(--gold)}
/* Add/edit sheet: the extras sit under "More options" */
.more-opts{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 2px;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.more-opts .note{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;font-weight:500}
.more-opts svg{flex:none;color:var(--faint);transition:transform .15s}
.more-opts[aria-expanded="true"] svg{transform:rotate(180deg)}
.ed-more{display:flex;flex-direction:column;gap:16px}
/* Birthdays / Expiring forms, backup */
.date-form{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.ed-times.three{grid-template-columns:1.4fr .8fr 1.1fr}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.restore-box{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:14px}
.set-txt .hl{color:var(--gold)}
.day .pips i.d{background:var(--muted)}
/* While a sheet is open, messages show at the top so they're never behind it */
.toast.top{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
.toast{pointer-events:none}
.toast button{pointer-events:auto}
/* Notes */
#nt-search{margin-bottom:10px}
.nt-piles{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 4px;padding:0 16px}
.nt-piles::-webkit-scrollbar{display:none}
.pile{flex:none;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--tile);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pile[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);border-color:var(--accent)}
.pile b{font-weight:700;margin-left:4px;opacity:.7}
.pile[aria-pressed="true"] b{opacity:1}
.nt-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.nt-card{background:var(--tile);border:1px solid var(--border);border-radius:var(--r-tile);padding:12px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.nt-card .nt-text{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.4}
.nt-card .nt-title{font-weight:700;font-size:15px}
.nt-card .nt-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--faint)}
.nt-card .nt-meta .tag{margin:0}
.nt-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nt-item{display:flex;align-items:center;gap:10px;min-height:36px;border:0;background:none;color:var(--fg);font:inherit;font-size:15px;text-align:left;padding:2px 0;cursor:pointer;width:100%}
.nt-item .check{flex:none}
.nt-item.done .t{text-decoration:line-through;color:var(--faint)}
.nt-more{font-size:13px;color:var(--faint)}
.nt-empty{color:var(--faint);font-size:14px;padding:18px 4px;text-align:center}
.ns-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ns-items li{display:flex;align-items:flex-start;gap:8px}
.ns-items li .del{align-self:flex-start;margin-top:4px}
.ns-items .field{flex:1;min-width:0}
.ns-items .del{flex:none}
textarea.field{resize:vertical;min-height:110px;font:inherit;line-height:1.45;padding-top:12px;padding-bottom:12px}
.nt-item.done .check{background:var(--accent);border-color:var(--accent)}
.nt-item.done .check svg{opacity:1}
.ns-items .nt-item{width:auto;flex:none;min-height:44px}
.nt-acts{display:flex;gap:8px}
#nt-search{margin-bottom:4px}
.sheet-head .grow{flex:1}

/* The note page: a full screen for writing, like a phone's notes app. The top bar stays put while
   the page scrolls; the ⋯ menu holds the pile, remind, calendar and delete. */
/* (A68: a full page's bar never shrinks: a puzzle taller than the screen squeezed its bar, and the buttons went up
   under the time and battery) */
.np{position:fixed;inset:0;z-index:40;background:var(--bg);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column}
.np-bar{position:sticky;top:0;z-index:2;flex-shrink:0;display:flex;align-items:center;gap:4px;width:100%;max-width:720px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--bg)}
.np-bar .back-btn{margin-left:-10px;flex:none}
.np-bar .grow{flex:1}
.np-where{font-size:13px;font-weight:600;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.np-tool{position:relative;flex:none;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.np-tool:hover{color:var(--fg)}
.np-tool.on{color:var(--accent);background:var(--accent-soft)}
.np-tool input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.np-tool input:focus-visible+svg{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.np-done{flex:none;min-height:38px;padding:6px 16px;margin-left:4px}
.np-menu{position:absolute;right:16px;top:calc(100% - 4px);width:min(280px,calc(100vw - 32px));background:var(--tile-2);border:1px solid var(--border);border-radius:var(--r-tile);box-shadow:0 12px 32px rgba(0,0,0,.7);padding:6px;display:flex;flex-direction:column}
.np-menu>button{border:0;background:none;color:var(--fg);font:inherit;font-weight:600;font-size:15px;text-align:left;padding:12px;border-radius:10px;cursor:pointer}
.np-menu>button:hover{background:var(--tile)}
.np-menu .np-danger{color:var(--gold)}
.np-menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;font-weight:600}
.np-menu .note{padding:8px 12px 6px;border-top:1px solid var(--border);margin-top:4px;font-size:12px;color:var(--faint)}
.np-body{flex:1;width:100%;max-width:720px;margin:0 auto;padding:4px 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
#ns-text-wrap{flex:1;display:flex}
.np-text{flex:1;width:100%;min-height:calc(100vh - 110px);min-height:calc(100dvh - 110px);border:0;outline:0;resize:none;background:none;color:var(--fg);font:inherit;font-size:17px;line-height:1.55;padding:6px 0;overflow:hidden}
.np-text::placeholder,.np-name::placeholder,.np-add input::placeholder,.np-add textarea::placeholder{color:var(--faint)}
.np-name{width:100%;border:0;outline:0;background:none;color:var(--fg);font:inherit;font-size:24px;font-weight:700;letter-spacing:-.02em;padding:6px 0 10px}
#ns-items-wrap{display:flex;flex-direction:column;gap:2px}
.np-item{flex:1;min-width:0;border:0;border-bottom:1px solid var(--line);outline:0;background:none;color:var(--fg);font:inherit;font-size:16px;line-height:1.35;padding:10px 0;resize:none;overflow:hidden;display:block}
.np-item:focus{border-bottom-color:var(--accent)}
.nt-item.done+.np-item{color:var(--faint);text-decoration:line-through}
.np-add{display:flex;align-items:center;gap:10px;min-height:48px}
.np-plus{flex:none;width:22px;text-align:center;font-size:22px;line-height:1;color:var(--faint)}
.np-add input,.np-add textarea{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--fg);font:inherit;font-size:16px;padding:10px 0}
/* the new item's box wraps while you type (A48) */
.np-add textarea{line-height:1.35;resize:none;overflow:hidden;display:block}
.np-add .btn{flex:none;min-height:36px;padding:6px 14px}
#ns-clear-done{align-self:flex-start;margin-top:6px}
.toast.np-low{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* Favorites and the hold menu on Notes */
.nt-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .12s}
.nt-card.holding{transform:scale(.98)}
.nt-star{display:inline-grid;place-items:center;color:var(--accent)}
.nt-star svg{display:block}
.np-tool[aria-pressed="true"]{color:var(--accent)}
.np-tool[aria-pressed="true"] svg{fill:currentColor}
.nh-sheet{gap:14px}
.nh-sheet h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-acts{display:flex;flex-direction:column;background:var(--tile-2);border:1px solid var(--border);border-radius:var(--r-tile);overflow:hidden}
.nh-acts button{display:flex;align-items:center;gap:12px;border:0;background:none;color:var(--fg);font:inherit;font-weight:600;font-size:15px;text-align:left;padding:14px;min-height:50px;cursor:pointer}
.nh-acts button+button{border-top:1px solid var(--border)}
.nh-acts button:hover{background:var(--tile)}
.nh-acts svg{flex:none;color:var(--muted)}
#nh-fav[aria-pressed="true"] svg{color:var(--accent);fill:currentColor}
.nh-acts .nh-danger,.nh-acts .nh-danger svg{color:var(--gold)}
.nh-piles{display:flex;flex-wrap:wrap;gap:8px}

/* Health tab: the workout tracker */
.hl-setup{padding:18px;display:flex;flex-direction:column;gap:10px}
.hl-setup h2{font-size:19px;font-weight:700}
.hl-splits{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.hl-splits button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);border-radius:var(--r-btn);padding:12px 14px;font:inherit;cursor:pointer}
.hl-splits button:hover{border-color:var(--accent)}
.hl-splits b{font-size:15px}
.hl-splits span{font-size:13px;color:var(--muted)}
.hl-today{padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hl-today h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.hl-today .sub{margin:0 0 6px}
.hl-today>.btn{min-width:150px}
.hl-ok{color:var(--accent)}
.hl-best{color:var(--accent)}
.tag.hl-best{color:var(--accent)}
.hl-other{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.hl-other .note{margin-right:2px}
.hl-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px}
.hl-wd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:var(--tile);border:1px solid var(--border);min-width:0;position:relative}
.hl-wd.today{border-color:var(--accent)}
.hl-wd.did{background:var(--accent-soft)}
.hl-wl{font-size:11px;font-weight:700;color:var(--faint)}
.hl-wn{font-size:11px;font-weight:600;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-wd.did .hl-wn{color:var(--fg)}
.hl-wd.missed .hl-wn{color:var(--faint);text-decoration:line-through}
.hl-wc{position:absolute;top:2px;right:5px;font-size:10px;color:var(--accent);font-weight:700}
.item.wk-row time{color:var(--accent)}
/* the workout page */
.wk-h{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:2px 0 10px}
.wk-ex{background:var(--tile);border:1px solid var(--border);border-radius:var(--r-tile);padding:12px 14px;margin-bottom:12px}
.wk-ex-head{display:flex;align-items:center;gap:8px}
.wk-ex-head h3{margin:0;font-size:17px;font-weight:700;flex:1;min-width:0}
.wk-hist{min-height:36px;font-size:13px}
.wk-last{margin:2px 0 8px;font-size:13px;color:var(--faint);line-height:1.4}
.wk-pr{margin:-4px 0 8px;font-size:13px;font-weight:700;color:var(--accent)}
.wk-sets{display:flex;flex-direction:column;gap:6px}
.wk-set{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:12px}
.wk-set.done{background:var(--accent-soft)}
.wk-n{flex:none;width:18px;font-size:13px;font-weight:700;color:var(--faint);text-align:center}
.wk-w,.wk-r{flex:1 1 0;min-width:0;width:100%;min-height:44px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);border-radius:10px;font:inherit;font-size:17px;font-weight:600;text-align:center;padding:6px 4px}
.wk-w:focus,.wk-r:focus{outline:0;border-color:var(--accent)}
.wk-ok{flex:none;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.wk-ok .check{width:28px;height:28px}
.wk-ok[aria-checked="true"] .check{background:var(--accent);border-color:var(--accent)}
.wk-ok[aria-checked="true"] .check svg{opacity:1}
.wk-ex-foot{display:flex;justify-content:space-between;gap:10px}
.wk-ex-foot .linkish{min-height:40px;font-size:14px}
.wk-rm{color:var(--muted)}
.wk-add{display:flex;gap:8px;margin-bottom:12px}
.wk-rest{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;gap:6px;background:var(--tile-2);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;padding:6px 6px 6px 16px;box-shadow:0 10px 30px rgba(0,0,0,.7);white-space:nowrap}
.wk-rest-t{font-weight:700;font-variant-numeric:tabular-nums;min-width:86px}
.wk-rest button{border:0;background:var(--tile);color:var(--fg);border-radius:999px;min-height:36px;padding:6px 12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
body.wk-resting .toast.np-low{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.wk-body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
/* the plan sheet */
.wp-confirm{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r-tile);padding:12px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.wp-week{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:8px}
.wp-wd{display:flex;align-items:center;gap:8px}
.wp-wd span{width:30px;font-size:13px;font-weight:600;color:var(--muted)}
.wp-wd select{flex:1;min-width:0;width:100%}
.wp-days{display:flex;flex-direction:column;gap:12px}
.wp-day{border:1px solid var(--border);border-radius:var(--r-tile);padding:12px;display:flex;flex-direction:column;gap:8px}
.wp-name{font-weight:700;font-size:16px}
.wp-ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wp-ex li{display:flex;align-items:center;gap:6px}
.wp-ex .field{flex:1;min-width:0}
.wp-ex .del{flex:none;margin:0}
.wp-gap{flex:none;width:36px}
.wp-rmday{align-self:flex-start;color:var(--gold);font-size:14px;min-height:36px}
/* one exercise's progress */
.xp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.xp-stat{background:var(--tile-2);border:1px solid var(--border);border-radius:var(--r-tile);padding:10px;display:flex;flex-direction:column;gap:2px}
.xp-stat b{font-size:16px;white-space:nowrap}
.xp-chart{display:flex;flex-direction:column;gap:4px}
.xp-axis{display:flex;justify-content:space-between;font-size:11px}
.wk-ask{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:4;max-width:560px;margin:0 auto;background:var(--tile-2);border:1px solid var(--gold-line);border-radius:var(--r-tile);padding:14px;display:flex;flex-direction:column;gap:10px;font-weight:600;box-shadow:0 12px 32px rgba(0,0,0,.7)}
/* v0.1.35: set rows are columns (Set · Last time · weight · reps · ✓), the week days are buttons, Progress lines */
.wk-set{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) 44px;gap:8px;align-items:center}
.wk-cols{padding-top:0;padding-bottom:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}
.wk-cols .wk-n{font-size:11px}
.wk-prev{font-size:13px;color:var(--faint);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.wk-cols .wk-prev{font-size:11px;color:var(--faint)}
.wk-r{font-weight:700;color:var(--accent)}
.wk-r::placeholder{color:var(--faint)}
.wk-set.done .wk-prev{color:var(--muted)}
button.hl-wd{font:inherit;color:inherit;cursor:pointer}
button.hl-wd:hover{border-color:var(--muted)}
.hl-pg-days{display:flex;gap:6px;overflow-x:auto;margin:-2px 0 8px;scrollbar-width:none}
.hl-pg-days::-webkit-scrollbar{display:none}
.item.hl-pg{grid-template-columns:minmax(0,1fr) 64px auto;align-items:center;cursor:pointer}
.hl-pg .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-spark{display:block;width:64px;height:22px}
.hl-now{display:flex;flex-direction:column;align-items:flex-end;min-width:76px;line-height:1.25}
.hl-now b{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hl-ch{font-size:12px;font-weight:600;color:var(--faint)}
.hl-ch.up{color:var(--accent)}

/* Health: Workout · Food · Weight switch */
.hl-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--tile);border:1px solid var(--border);border-radius:var(--r-btn);padding:4px;margin-bottom:14px}
.hl-seg button{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:14px;min-height:40px;border-radius:10px;cursor:pointer}
.hl-seg button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg)}
/* Food */
.fd-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fd-nav b{font-size:16px}
.fd-nav .icon-btn:disabled{opacity:.3}
.fd-sum{padding:16px;display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.fd-cal{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.fd-cal b{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fd-cal span{color:var(--muted);font-weight:600}
.fd-cal .fd-left{margin-left:auto;color:var(--fg)}
.fd-bar{display:block;height:6px;border-radius:999px;background:var(--tile-2);overflow:hidden}
.fd-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.fd-macs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fd-mac{display:flex;flex-direction:column;gap:4px;min-width:0}
.fd-mac b{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fd-mac small{font-size:12px;color:var(--faint);font-weight:600}
.fd-goals-link{align-self:flex-start;min-height:32px;font-size:14px}
.fd-addbtn{width:100%;margin-bottom:12px}
.fd-form{display:flex;flex-direction:column;gap:14px}
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fd-sugg{list-style:none;margin:-8px 0 0;padding:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fd-sugg button{width:100%;display:flex;justify-content:space-between;gap:10px;border:0;background:var(--tile-2);color:var(--fg);font:inherit;padding:10px 12px;text-align:left;cursor:pointer}
.fd-sugg li+li button{border-top:1px solid var(--border)}
.fd-sugg span{color:var(--faint);font-size:13px;white-space:nowrap}
/* A63: saved foods to pick from float over the boxes under the name, so typing doesn't push the page down */
.fd-namef{position:relative}
.fd-namef>.fd-sugg{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;z-index:6;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.fd-qty{display:flex;align-items:center;gap:6px}
.fd-qty input{width:64px;text-align:center}
/* Weight */
.wt-card{padding:16px;display:flex;flex-direction:column;gap:10px}
.wt-now{display:flex;flex-direction:column;gap:2px}
.wt-big{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wt-big small{font-size:16px;color:var(--muted)}
.wt-ch{font-weight:700;color:var(--accent)}
.wt-form{display:flex;align-items:center;gap:8px}
.wt-form .field{flex:1;font-size:17px;font-weight:600}
.wt-unit{color:var(--faint);font-weight:600}
.wt-chart{padding:14px;margin-top:10px;display:flex;flex-direction:column;gap:4px}
.wt-rem{padding:6px 16px;display:flex;flex-direction:column}
.wt-rem .opt-row{min-height:52px;border-top:1px solid var(--line)}
.wt-rem .opt-row:first-child{border-top:0}
.item.wt-row time,.item.wt-row .t{white-space:nowrap}
/* Medicine */
.md-times{display:flex;flex-wrap:wrap;gap:8px}
.md-time{display:flex;align-items:center;gap:4px}
.md-time .field{width:auto}
/* v0.1.38: meals, plans and the goals calculator */
.fd-planbtn{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-tile);background:var(--tile);color:var(--fg);font:inherit;cursor:pointer;text-align:left}
.fd-planbtn b{flex:1;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-planbtn .label{margin:0}
.fd-caret{color:var(--faint)}
.fd-same-wrap:empty{display:none}
.fd-same-wrap{margin-bottom:10px}
.fd-planned{display:block}
.fd-slots{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fd-slot{background:var(--tile);border:1px solid var(--border);border-radius:var(--r-tile);padding:4px 6px 4px 14px}
.fd-slot.open{padding-bottom:10px}
.fd-slot-head{display:flex;align-items:center;gap:8px;min-height:56px}
.fd-slot-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;background:none;color:var(--fg);font:inherit;text-align:left;padding:6px 0;cursor:pointer}
.fd-slot-name{font-weight:700;font-size:16px}
.fd-slot-name small{font-weight:600;font-size:12px;color:var(--faint);margin-left:4px}
.fd-slot-sub{font-size:13px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-slot.done .fd-slot-sub{color:var(--faint)}
.fd-slot-cal{font-variant-numeric:tabular-nums;font-size:15px}
.fd-slot.done .fd-slot-cal{color:var(--accent)}
.fd-ok{flex:none;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;padding:0}
.fd-ok .check{width:28px;height:28px}
.fd-ok.sm .check{width:22px;height:22px}
.fd-ok[aria-checked="true"] .check{background:var(--accent);border-color:var(--accent)}
.fd-ok[aria-checked="true"] .check svg{opacity:1}
.fd-ok.part .check{border-color:var(--accent)}
.fd-ok:disabled{opacity:.35;cursor:default}
.fd-items{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column}
.fd-items li{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line)}
.fd-iname{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;font-size:15px;text-align:left;padding:10px 0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-iname small{color:var(--faint)}
.fd-ical{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;padding:0 4px}
.fd-items .del{margin:0}
.fd-mealtot{margin:6px 0 2px;font-size:12px}
.fd-mealtot b{color:var(--fg)}
.fd-slot-acts{display:flex;flex-wrap:wrap;gap:4px 16px}
.fd-slot-acts .linkish{min-height:40px;font-size:14px}
.fd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-bottom:8px}
.fd-foot .linkish{min-height:40px;font-size:14px}
.fd-freq{display:flex;flex-wrap:wrap;gap:6px}
.fd-freq .pile{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* (whole-app check 2) a long name ends with … instead of running off the screen */
.fd-freq small{color:var(--faint);font-weight:600}
/* A55: scan a barcode (the button in Add food, the scanner sheet fdb-), fiber/sugar/sodium, and "To reach today's goals" */
.fd-scan{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
/* A56: "Scan a barcode" first and full width in the main color, "or type it in" under it; foods made of parts (fdpt-) */
.fd-scanw{display:flex;flex-direction:column;gap:8px}
.fd-scanw .fd-scan{min-height:52px;font-size:16px}
.fd-or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:13px}
.fd-or::before,.fd-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.fd-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:-4px}
.fd-links .fd-ext-btn{margin-top:0}
.fd-parts{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.fdpt-add{display:flex;gap:8px;align-items:center}
.fdpt-add .field{flex:1;min-width:0}
.fdpt-scan{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.fdpt-tot{margin:0}
.fdpt-tot b{color:var(--fg)}
.fd-grid .field[readonly]{color:var(--muted)}
.fd-src{margin-top:-6px}
/* everyday foods (Nov 5): the list's heading, and the portions as chips under the name */
.fd-sugg .fd-evh{padding:8px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);background:var(--tile-2);border-top:1px solid var(--border)}
.fd-sugg .fd-evh:first-child{border-top:0}
.fd-sugg .fd-evh+li button{border-top:0}
.fd-namef>.fd-sugg{max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain}
.fd-evp{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.fd-ext-btn{align-self:flex-start;margin-top:-4px}
.fd-grid.fd-ext{grid-template-columns:repeat(3,minmax(0,1fr))}
.fd-xline{margin:0}
.fdb-sheet{gap:12px}
.fdb-cam{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#000}
.fdb-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fdb-aim{position:absolute;left:12%;right:12%;top:32%;bottom:32%;border:2px solid color-mix(in srgb,var(--accent) 85%,#fff);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.fdb-msg{margin:0}
.fdb-type{display:flex;flex-direction:column;gap:6px}
.fdb-type label{font-size:13px;font-weight:600;color:var(--muted)}
.fdb-credit{font-size:12px;margin:0}
.fd-sg{padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.fd-sg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fd-sg-head .note{margin:0}
.fd-sg-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fd-sg-row .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.fd-sg-row b{overflow-wrap:anywhere}
.fd-sg-row .note{margin:0;font-size:13px}
.fd-sg-add{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:800;font-size:18px}
.fd-sg-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fdp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fdp-list button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;text-align:left;padding:12px 14px;border-radius:var(--r-btn);cursor:pointer}
.fdp-list button[aria-current="true"]{border-color:var(--accent)}
.fdp-list b{font-size:15px}
.fdp-list span{font-size:13px;color:var(--faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdm-list{margin-top:6px}
.item.fdm-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.fdm-row .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdm-acts{display:flex;align-items:center;gap:6px}
.fdm-acts .linkish{min-height:36px;font-size:13px}
.fdm-acts .del{margin:0}
.fdm-slots{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.fdm-slot{display:flex;align-items:center;gap:8px}
.fdm-slot .field:first-child{flex:1;min-width:0}
.fdm-slot .del{margin:0}
.fdc{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border);padding-top:12px}
.fdc-sex{display:flex;gap:6px}
.fdc-out{font-size:15px;line-height:1.5}
.fdc-out b{font-size:18px}
#fd-ask,#fd-pick{z-index:42}  /* they open on top of other sheets (renaming from Plans, meals & times) */
.fdm-slot .del:disabled{opacity:.25;cursor:default}
/* v0.1.41: meals belong to each day and plan */
.fd-planline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 2px 10px;min-height:32px}
.fd-planline .note{font-size:12px}
.fd-planline .linkish{min-height:32px;font-size:14px;flex:none}
.fd-planline .note .linkish{font-size:12px;min-height:0;display:inline}
.toast #toast-alt{color:var(--fg)}
/* v0.1.42: edit a saved meal */
#fd-medit{z-index:41}
/* a saved food edited from Foods, meals & plans opens over that sheet (Oct 10); what opens from it stays on top */
#fd-sheet.fd-over{z-index:41}
#fd-dup,#fd-scanv{z-index:42}
.fme-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fme-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.fme-list li:first-child{border-top:0}
.fme-n{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:600}
.fme-n small{font-weight:500;color:var(--faint);font-size:12px}
.fme-list .fd-qty b{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.fme-list .icon-btn{width:36px;height:36px}
.fme-list .del{margin:0}
/* v0.1.43: plans by day of the week */
.fdw{display:flex;flex-direction:column;gap:8px}
.fdw .wp-week{margin-top:0}
.fdw-all{grid-column:1/-1}
.fdw-all span{width:auto;min-width:72px}
.fd-planbtn b small{font-weight:600;font-size:12px;color:var(--faint)}
/* v0.1.44: saved workout plans, the food week, search */
.wpl{display:flex;flex-direction:column;gap:8px}
.wpl-list,.hl-plans{display:flex;flex-wrap:wrap;gap:6px}
.hl-plans{margin:-2px 0 10px}
.fd-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:10px}
.fd-wd{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;background:var(--tile);border:1px solid var(--border);color:var(--muted);font:inherit;cursor:pointer;min-width:0}
.fd-wd b{font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg)}
.fd-wd.today{border-color:var(--accent)}
.fd-wd.sel{background:var(--tile-2);border-color:var(--fg)}
.fd-wd:disabled{opacity:.4;cursor:default}
.fd-wd.over b{color:var(--gold)}
.fd-wl{font-size:11px;font-weight:700;color:var(--faint)}
.fd-wbar{display:block;width:6px;height:22px;border-radius:3px;background:var(--tile-2);position:relative;overflow:hidden}
.fd-wbar i{position:absolute;left:0;right:0;bottom:0;background:var(--accent);border-radius:3px}
.fd-wd.over .fd-wbar i{background:var(--gold)}
.fd-wavg{grid-column:1/-1;font-size:12px;text-align:center}
.sr-list{display:flex;flex-direction:column;gap:14px}
.sr-group{display:flex;flex-direction:column;gap:6px}
.item.sr-row{grid-template-columns:minmax(0,1fr);cursor:pointer}
.sr-row .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v0.1.46: automatic backup */
.ab{display:flex;flex-direction:column;gap:10px}
.ab-codebox{display:flex;flex-direction:column;gap:8px;background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r-tile);padding:14px}
.ab-code{font-size:clamp(14px,4.4vw,20px);letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;user-select:all;-webkit-user-select:all}
.ab-restore{display:flex;flex-direction:column;gap:10px}
#ab-in{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em}
.ab-days{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ab-days .label{width:100%}
/* v0.1.46: habits on Today, your week */
.hb-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 4px;padding:0 2px}
.hb-row::-webkit-scrollbar{display:none}
.hb-chip{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.hb-chip.done{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.hb-c{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hb-chip.done .hb-c{color:var(--accent)}
.hb-st{font-size:12px;color:var(--muted)}
.hb-picks{display:flex;flex-wrap:wrap;gap:6px}
.hb-picks:empty{display:none}
.wv-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:10px 0 0;padding:12px 14px;text-align:left;color:var(--fg);font:inherit;cursor:pointer}
.wv-go{font-size:13px;color:var(--accent);font-weight:700}
.wv{gap:14px}
.wv-seg{margin-bottom:0}
.item.wv-row time{font-size:18px}
.item.wv-day{cursor:pointer;align-items:start}
.wv-day time{display:flex;flex-direction:column;line-height:1.2}
.wv-day time small{font-size:11px;color:var(--faint);font-weight:600}
.wv-day .what{display:flex;flex-direction:column;gap:2px}
.wv-b{font-size:14px}
.wv-seg{grid-template-columns:repeat(2,1fr)}
#ab-on{margin-top:10px}
/* backup prompt on Today (v0.1.47) */
.abq{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding:12px 14px}
.abq-b{font-size:14px;color:var(--muted);line-height:1.4}
.abq .btn-row{margin-top:4px;align-items:center}
.ab-codewrap{display:flex;flex-direction:column;gap:8px}
/* More › About (v0.1.49) */
.abt a{color:var(--accent)}
/* What's new (A39): each release a card, the newest marked New until seen; then what's coming */
.nws-body{display:flex;flex-direction:column;gap:12px}
.nws-rel{padding:14px;border-radius:14px;background:var(--tile);border:1px solid var(--border);gap:6px}
.nws-t{font-size:15px;font-weight:700}
.nws-v .nws-pill{margin-left:4px}
.nws-pill{display:inline-block;vertical-align:middle;padding:1px 7px;border-radius:999px;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);font-size:11px;font-weight:700;line-height:16px}
.nws-items{margin:2px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--muted);line-height:1.45}
.nws-old summary{cursor:pointer;color:var(--accent);font-size:14px;font-weight:600;padding:6px 2px}
.nws-old[open] summary{margin-bottom:10px}
.nws-old .nws-rel+.nws-rel{margin-top:12px}
.nws-sec{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:6px 2px -4px}
.abt-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);line-height:1.4}
.md-disclaim{margin-top:6px}
.ab-rc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px}

/* the code-built spirits (v0.1.53, public/spirits.js), the character lab's styles (docs/character-lab.html),
   each one scoped inside .ss so nothing else in the app is touched; keyframes are prefixed ss-. */
.ss .tk-trunk{fill:none;stroke:hsl(var(--h) var(--s) 72%);stroke-width:8;stroke-linecap:round}  /* the Baby Mammoth's trunk (C2) */
.ss{--h:200;--s:95%;--hch:0;--hcs:0%;--hcl:92%;--fch:0;--fcs:0%;--fcl:92%;--nch:0;--ncs:0%;--ncl:92%;--xch:0;--xcs:0%;--xcl:92%;
  display:block;aspect-ratio:200/230;max-width:100%;overflow:visible;
  filter:drop-shadow(0 0 5px hsl(var(--h) 100% 62% / .75)) drop-shadow(0 0 15px hsl(var(--h) 100% 55% / .33))}
.ss svg{width:100%;height:100%;overflow:visible;display:block}
/* (A69 part 5) a cosmetic alone (SpiritKit.make's co): only the cosmetic shows, in a square cut to it */
.ss.ss-co{aspect-ratio:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.ss.ss-co svg *{visibility:hidden}
.ss.ss-co .cos,.ss.ss-co .cos *{visibility:visible}
.ss .sp-all{transform-box:view-box;transform-origin:100px 120px;animation:ss-bob 3.2s ease-in-out infinite}
.ss .sp-tilt{transform-box:view-box;transform-origin:100px 130px;transition:transform .5s}
.ss .lf{--a:calc(var(--a0) + var(--d,0deg));transform-box:fill-box;transform-origin:50% 100%;transform:rotate(var(--a));transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.ss .lf-b{stroke-width:1.2;stroke-linejoin:round}
.ss .lf-v{fill:none;stroke-width:.8;stroke-linecap:round}
.ss .kw .lf-b{fill:hsl(var(--h) var(--s) 58% / .30);stroke:hsl(var(--h) 100% 84% / .95)} .ss .kw .lf-v{stroke:hsl(var(--h) 100% 88% / .55)}
.ss .kb .lf-b,.ss .s-b{fill:hsl(var(--h) var(--s) 60% / .55);stroke:hsl(var(--h) 100% 86%);stroke-width:1.2} .ss .kb .lf-v{stroke:hsl(var(--h) 100% 90% / .6)}
.ss .kf .lf-b,.ss .s-f{fill:hsl(var(--h) var(--s) 68% / .8);stroke:hsl(var(--h) 100% 91%);stroke-width:1.1} .ss .kf .lf-v{stroke:hsl(var(--h) 100% 95% / .7)}
.ss .kl .lf-b{fill:hsl(var(--h) var(--s) 80%);stroke:hsl(var(--h) 100% 95%);stroke-width:1.4} .ss .kl .lf-v{stroke:hsl(var(--h) 100% 97% / .8)}
.ss .kd .lf-b,.ss .s-d{fill:hsl(var(--h) 70% 20%);stroke:none} .ss .kd .lf-v{display:none}
.ss .s-head{fill:hsl(var(--h) var(--s) 58% / .6);stroke:hsl(var(--h) 100% 86%);stroke-width:1.2}
.ss .s-face{fill:hsl(var(--h) 70% 13%)}
.ss .s-curl{fill:none;stroke:hsl(var(--h) 100% 82%);stroke-width:3.4;stroke-linecap:round;transform-box:fill-box;transform-origin:20% 100%;animation:ss-sway 4s ease-in-out infinite}
.ss .s-tail{fill:none;stroke:hsl(var(--h) var(--s) 72% / .9);stroke-width:7;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 100%;animation:ss-tail 3s ease-in-out infinite}
.ss .s-tent{fill:none;stroke:hsl(var(--h) 100% 86% / .85);stroke-width:2.6;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0%;animation:ss-tent 2.8s ease-in-out infinite}
.ss .s-tent:nth-of-type(2n){animation-delay:-1.1s}.ss .s-tent:nth-of-type(3n){animation-delay:-.6s}
.ss .s-wh,.ss .s-ant,.ss .s-sc{fill:none;stroke:hsl(var(--h) 100% 92% / .75);stroke-width:1.1;stroke-linecap:round}
.ss .s-ant{stroke-width:1.8}
.ss .s-beak{fill:hsl(calc(var(--h) + 40) 100% 82%)}
.ss .s-spot{fill:hsl(var(--h) 100% 90% / .85)}
.ss .twk{fill:hsl(var(--h) 100% 94%);transform-box:fill-box;transform-origin:center;animation:ss-twinkle 1.8s ease-in-out infinite}
.ss .twk:nth-of-type(2n){animation-delay:-.7s}
.ss .eye{transform-box:fill-box;transform-origin:center;transition:transform .12s}
.ss .e-w{fill:hsl(var(--h) 100% 93%)}.ss .e-g{fill:#fff}
.ss .eyeH,.ss .eyeZ{fill:none;stroke:hsl(var(--h) 100% 93%);stroke-width:2.6;stroke-linecap:round;display:none}
.ss .eyes{transition:transform .4s}
.ss.blink .eye{transform:scaleY(.12)}
.ss .sway{animation:ss-wisp 3.6s ease-in-out infinite}
.ss .sway:nth-of-type(2n){animation-delay:-1.2s}
.ss .ear{animation:ss-wisp 4.2s ease-in-out infinite}
.ss .armL,.ss .armR{animation:ss-arm 3.2s ease-in-out infinite}
.ss .armL{--w:-7deg}.ss .armR{--w:7deg}
@keyframes ss-wisp{0%,100%{transform:rotate(var(--a))}50%{transform:rotate(calc(var(--a) + 6deg))}}
@keyframes ss-arm{0%,100%{transform:rotate(var(--a))}50%{transform:rotate(calc(var(--a) + var(--w)))}}
@keyframes ss-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ss-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes ss-tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes ss-tent{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ss-twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ss-hop{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.03,.97)}60%{transform:translateY(0) scale(.98,1.03)}}
.ss[data-mood="happy"] .eye{display:none}
.ss[data-mood="happy"] .eyeH{display:inline}
.ss[data-mood="happy"] .armL{--d:115deg;--w:-22deg;animation-duration:.45s}
.ss[data-mood="happy"] .armR{--d:-115deg;--w:22deg;animation-duration:.45s}
.ss[data-mood="happy"] .sp-all{animation:ss-hop .9s ease-in-out infinite}
.ss[data-mood="thinking"] .armR{--d:175deg;--w:-6deg;animation-duration:.9s}
.ss[data-mood="thinking"] .eyes{transform:translate(-2px,-3px)}
.ss[data-mood="thinking"] .sp-all{animation-duration:5s}
.ss[data-mood="pointL"] .armL{--d:65deg;--w:-6deg;animation-duration:.8s}
.ss[data-mood="pointL"] .eyes{transform:translateX(-3px)}
.ss[data-mood="pointL"] .sp-tilt{transform:rotate(-6deg)}
.ss[data-mood="pointR"] .armR{--d:-65deg;--w:6deg;animation-duration:.8s}
.ss[data-mood="pointR"] .eyes{transform:translateX(3px)}
.ss[data-mood="pointR"] .sp-tilt{transform:rotate(6deg)}
.ss[data-mood="flying"] .sp-tilt{transform:rotate(14deg)}
.ss[data-mood="flying"] .sway{--d:24deg}
.ss[data-mood="flying"] .armL{--d:33deg;animation-duration:.7s}
.ss[data-mood="flying"] .armR{--d:-33deg;animation-duration:.7s}
.ss[data-mood="sleep"] .eye{display:none}
.ss[data-mood="sleep"] .eyeZ{display:inline}
.ss[data-mood="sleep"] .sp-all{animation-duration:6s}
.ss[data-mood="sleep"] .armL{--d:-15deg;--w:-2deg;animation-duration:6s}
.ss[data-mood="sleep"] .armR{--d:15deg;--w:2deg;animation-duration:6s}
.ss[data-mood="sleep"] .zz{display:inline}
.ss .zz{display:none;fill:hsl(var(--h) 100% 90%);font:700 13px var(--font)}.ss[data-mood="sleep"] .zz{animation:ss-zz 2.4s ease-in-out infinite}
@keyframes ss-zz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:1}100%{opacity:0;transform:translate(6px,-10px)}}
.ss .sl-h{--ch:var(--hch);--cs:var(--hcs);--cl:var(--hcl)}
.ss .sl-f{--ch:var(--fch);--cs:var(--fcs);--cl:var(--fcl)}
.ss .sl-n{--ch:var(--nch);--cs:var(--ncs);--cl:var(--ncl)}
.ss .sl-x{--ch:var(--xch);--cs:var(--xcs);--cl:var(--xcl)}
.ss .cz,.ss .kc .lf-b{fill:hsl(var(--ch) var(--cs) var(--cl) / .9);stroke:hsl(var(--ch) calc(var(--cs) * .6 + 40%) 94%);stroke-width:1;stroke-linejoin:round}
.ss .cz2{fill:hsl(var(--ch) var(--cs) calc(var(--cl) - 14%) / .94);stroke:hsl(var(--ch) calc(var(--cs) * .6 + 40%) 90%);stroke-width:.8;stroke-linejoin:round}
.ss .cz3{fill:hsl(calc(var(--ch) + 40) calc(var(--cs) * .5 + 50%) 90%)}
.ss .czs{fill:none;stroke:hsl(var(--ch) var(--cs) var(--cl));stroke-width:2.4;stroke-linecap:round}
.ss .czl{fill:hsl(var(--ch) 60% 10% / .92);stroke:hsl(var(--ch) var(--cs) var(--cl));stroke-width:1.6}
/* outfit skins (A69 part 7; spirits.js, skins.js): a skin's own parts keep their own colors; the bits of it in the
   element's colors (a paw out of a sleeve, a tail's tip); pieces only from behind (sk-b, your Kindlings in battle) or
   only from the front (sk-f); a skin with its own hat hides a worn one */
.ss .sk .kl-paw{fill:hsl(var(--h) var(--s) 80%);stroke:hsl(var(--h) 100% 95%);stroke-width:1.2}
.ss .sk .kt-tip{fill:hsl(var(--h) var(--s) 68% / .9);stroke:hsl(var(--h) 100% 91%);stroke-width:1}
.ss .sk-b{display:none}
.ss[data-skh] [data-sl="head"]{display:none}
.ss .kc .lf-v{stroke:hsl(var(--ch) 100% 95% / .7)}
.ss .cos{display:none}   /* every cosmetic is in each drawing; only the one worn (data-on) is shown and moves: hidden ones still cost time when animated (v0.2.42) */
/* v0.2.11 (Hunter: "aura colors are hard to tell apart"): stronger color, more opacity and a brighter edge ring */
/* the effects (A17: brighter, bigger, more motion, like the aura): each piece has a soft glow (a faint circle, not a
   filter, so it stays smooth) and rises and fades on its own beat */
.ss .fx-g{fill:hsl(var(--ch) var(--cs) calc(var(--cl) + 6%) / .26)}
.ss .fx-h{stroke:hsl(var(--ch) 100% 96%);stroke-width:1.2}
.ss .fx-path{fill:none;stroke:hsl(var(--ch) var(--cs) var(--cl) / .3);stroke-width:1.4;stroke-dasharray:2 7}
.ss .fx-i{transform-box:fill-box;transform-origin:center}
/* (v0.5.21: written out in parts, not the animation shorthand, which outranked the delays below and reset them to 0,
   so every sparkle and heart moved at once; tests/logic.test.js checks it) */
.ss .cos[data-on] .c-trail .fx-i{animation-name:ss-spark;animation-duration:2.4s;animation-timing-function:ease-out;animation-iteration-count:infinite}
.ss .cos[data-on] .c-hearts .fx-i{animation-name:ss-heart;animation-duration:3.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
/* E3's effects (v0.5.21): petals drift down turning, fireflies wander and blink; each piece has its own delay in spirits.js */
.ss .cos[data-on] .c-petals .fx-i{animation-name:ss-petal;animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite}
.ss .cos[data-on] .c-flies .fx-i{animation-name:ss-ffly;animation-duration:4.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.ss .cos[data-on] .c-flies .fx-i:nth-child(odd){animation-direction:reverse;animation-duration:5.4s}
@keyframes ss-petal{0%{opacity:0;transform:translate(0,-4px) rotate(0)}12%{opacity:1}35%{transform:translate(9px,40px) rotate(110deg)}65%{transform:translate(-7px,92px) rotate(220deg)}88%{opacity:1}100%{opacity:0;transform:translate(4px,140px) rotate(320deg)}}
@keyframes ss-ffly{0%,100%{opacity:.25;transform:translate(0,0)}25%{opacity:1;transform:translate(7px,-9px)}50%{opacity:.4;transform:translate(-3px,-16px)}75%{opacity:1;transform:translate(-9px,-5px)}}
.ss .fx-i:nth-child(2){animation-delay:-.7s}.ss .fx-i:nth-child(3){animation-delay:-1.5s}.ss .fx-i:nth-child(4){animation-delay:-1.1s}.ss .fx-i:nth-child(5){animation-delay:-2s}.ss .fx-i:nth-child(6){animation-delay:-.35s}.ss .fx-i:nth-child(7){animation-delay:-1.8s}
@keyframes ss-spark{0%{opacity:0;transform:translateY(6px) scale(.5) rotate(0)}18%{opacity:1;transform:translateY(-4px) scale(1.15) rotate(20deg)}100%{opacity:0;transform:translateY(-72px) scale(.6) rotate(90deg)}}
@keyframes ss-heart{0%{opacity:0;transform:translate(0,10px) scale(.6) rotate(-10deg)}20%{opacity:1;transform:translate(-3px,-8px) scale(1.1) rotate(6deg)}55%{transform:translate(4px,-36px) scale(1) rotate(-6deg)}100%{opacity:0;transform:translate(-2px,-76px) scale(.85) rotate(8deg)}}
@keyframes ss-rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-60px)}}
.ss .c-orbit{transform-box:view-box;transform-origin:100px 92px}.ss .cos[data-on] .c-orbit{animation:ss-orbit 4.2s linear infinite}
@keyframes ss-orbit{to{transform:rotate(360deg)}}
.ss .cos[data-on] .c-halo{animation:ss-bob 3.2s ease-in-out infinite reverse}
/* Phoenix extras */
.ss .ph-ring circle{fill:none;stroke:hsl(var(--h) 100% 72% / .35);stroke-width:2;stroke-dasharray:4 9;transform-box:fill-box;transform-origin:center;animation:ss-orbit 24s linear infinite}
.ss .ph-embers circle{fill:hsl(calc(var(--h) + 25) 100% 82%);animation:ss-rise 2.8s linear infinite}
.ss .ph-gem{animation:ss-bob 2.4s ease-in-out infinite}
.ss .kgem{fill:hsl(calc(var(--h) + 30) 100% 86%);stroke:#fff;stroke-width:1}
.ss .s-mark{fill:none;stroke:hsl(calc(var(--h) + 25) 100% 84%);stroke-width:1.6;stroke-linecap:round}.ss .s-mk{fill:hsl(calc(var(--h) + 25) 100% 84%)}
.ss[data-sp="phoenix"]{filter:drop-shadow(0 0 6px hsl(var(--h) 100% 64% / .9)) drop-shadow(0 0 22px hsl(calc(var(--h) + 25) 100% 58% / .45))}
.ss .ph-f{animation-duration:3.4s!important}
/* special variants: hidden effects */
.ss .fx-cel,.ss .fx-dm{display:none}
/* Dark Matter: a window into space. Every part is filled with a slowly turning galaxy and stars; violet edges; orbiting motes */
.ss[data-dm]{filter:drop-shadow(0 0 5px hsl(278 100% 68% / .95)) drop-shadow(0 0 16px hsl(300 90% 62% / .42))}   /* a steady glow: a pulsing filter redrew the whole spirit every frame (A17) */
.ss[data-dm] .lf-b,.ss[data-dm] .s-b,.ss[data-dm] .s-f,.ss[data-dm] .s-head{fill:var(--dmf);stroke:hsl(280 100% 76%);stroke-width:1.4}
.ss[data-dm] .kw .lf-b{fill-opacity:.9}
.ss[data-dm] .kl .lf-b{stroke:hsl(296 100% 80%)}
.ss[data-dm] .lf-v{stroke:hsl(285 100% 82% / .35)}
.ss[data-dm] .kd .lf-b,.ss[data-dm] .s-d,.ss[data-dm] .s-face{fill:#000}
.ss[data-dm] .e-w,.ss[data-dm] .s-beak,.ss[data-dm] .s-spot,.ss[data-dm] .twk,.ss[data-dm] .kgem,.ss[data-dm] .s-mk{fill:hsl(296 100% 84%)}
.ss[data-dm] .eyeH,.ss[data-dm] .eyeZ{stroke:hsl(296 100% 84%)}
.ss[data-dm] .s-curl,.ss[data-dm] .s-tail,.ss[data-dm] .s-tent,.ss[data-dm] .s-wh,.ss[data-dm] .s-ant,.ss[data-dm] .s-sc,.ss[data-dm] .s-mark{stroke:hsl(280 100% 76%)}
.ss[data-dm] .ph-ring circle{stroke:hsl(280 100% 70% / .5)}.ss[data-dm] .ph-embers circle{fill:hsl(296 100% 84%)}
.ss[data-dm] .fx-dm{display:inline}
.ss .fx-dm circle{fill:#0B0618;stroke:hsl(280 100% 74%);stroke-width:1.4}
.ss .dm-o1,.ss .dm-o2,.ss .dm-o3{transform-box:view-box;transform-origin:100px 112px}
.ss[data-dm] .dm-o1{animation:ss-orbit 7s linear infinite}.ss[data-dm] .dm-o2{animation:ss-orbit 11s linear infinite reverse}.ss[data-dm] .dm-o3{animation:ss-orbit 9s linear infinite}
/* Celestial: shimmering white-gold light with moving rainbow sheen, gold constellation lines, a turning sunburst behind */
.ss[data-cel]{filter:drop-shadow(0 0 6px hsl(45 100% 72% / .95)) drop-shadow(0 0 20px hsl(40 100% 65% / .5))}
.ss[data-cel] .lf-b,.ss[data-cel] .s-b,.ss[data-cel] .s-f,.ss[data-cel] .s-head{fill:var(--clf);stroke:hsl(44 100% 70%);stroke-width:1.5}
.ss[data-cel] .kw .lf-b{fill-opacity:.55}
.ss[data-cel] .kb .lf-b,.ss[data-cel] .s-b{fill-opacity:.85}
.ss[data-cel] .lf-v{stroke:hsl(42 90% 60% / .55)}
.ss[data-cel] .kd .lf-b,.ss[data-cel] .s-d,.ss[data-cel] .s-face{fill:hsl(250 55% 16%)}
.ss[data-cel] .e-w,.ss[data-cel] .s-beak,.ss[data-cel] .s-spot,.ss[data-cel] .twk,.ss[data-cel] .kgem,.ss[data-cel] .s-mk{fill:hsl(46 100% 74%)}
.ss[data-cel] .eyeH,.ss[data-cel] .eyeZ{stroke:hsl(46 100% 74%)}
.ss[data-cel] .s-curl,.ss[data-cel] .s-tail,.ss[data-cel] .s-tent,.ss[data-cel] .s-wh,.ss[data-cel] .s-ant,.ss[data-cel] .s-sc,.ss[data-cel] .s-mark{stroke:hsl(44 100% 70%)}
.ss[data-cel] .ph-ring circle{stroke:hsl(44 100% 72% / .55)}.ss[data-cel] .ph-embers circle{fill:hsl(46 100% 80%)}
.ss[data-cel] .fx-cel{display:inline}
.ss .cel-rays{transform-box:view-box;transform-origin:100px 110px}.ss[data-cel] .cel-rays{animation:ss-orbit 50s linear infinite}
.ss .cel-rays polygon{fill:hsl(45 100% 75% / .16)}
.ss .cel-halo{fill:none;stroke:hsl(45 100% 78% / .4);stroke-width:1.2;stroke-dasharray:2 6}
/* cosmetics in Dark Matter use the same galaxy texture */
.ss[data-dmh] .sl-h .cz,.ss[data-dmh] .sl-h .cz2,.ss[data-dmh] .sl-h .kc .lf-b,.ss[data-dmf] .sl-f .cz,.ss[data-dmf] .sl-f .cz2,.ss[data-dmn] .sl-n .cz,.ss[data-dmn] .sl-n .cz2,.ss[data-dmx] .sl-x .cz,.ss[data-dmx] .sl-x .cz2{fill:var(--dmf);stroke:hsl(280 100% 76%);stroke-width:1.2}
.ss[data-dmh] .sl-h .cz3,.ss[data-dmf] .sl-f .cz3,.ss[data-dmn] .sl-n .cz3,.ss[data-dmx] .sl-x .cz3{fill:hsl(296 100% 84%)}
.ss[data-dmh] .sl-h .czs,.ss[data-dmf] .sl-f .czs,.ss[data-dmn] .sl-n .czs,.ss[data-dmx] .sl-x .czs{stroke:hsl(280 100% 74%)}
.ss[data-dmf] .sl-f .czl{fill:var(--dmf);stroke:hsl(280 100% 74%)}
@media (prefers-reduced-motion: reduce){.ss,.ss *{animation:none!important}}
/* in the Today corner: fills the spirit's spot; the soft extra glow when something needs you (gold, like alerts) */
.spirit .ss{width:100%;height:100%;aspect-ratio:auto}
/* v0.2.11 (Hunter): the corner spirit looks exactly like it does in the Spirits tab (no extra glow that reads as
   an aura); something needing you shows as a small gold dot beside it instead */
.spirit.has-ss.alerting::after{content:"";position:absolute;top:8%;right:6%;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg),0 0 10px var(--gold);animation:sp-dot 2.2s ease-in-out infinite}
.spirit{position:relative}
@keyframes sp-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}}
@media (prefers-reduced-motion: reduce){.spirit.has-ss.alerting::after{animation:none}}
@media (prefers-reduced-motion: reduce){.ss,.ss *{transition:none!important}.spirit.alerting .ss{animation:none}}

/* the Spirits tab (Games stage 1, v0.1.53): the home scene, the middle tab button, dress-up. All gm- */
.gm-home{position:relative;height:clamp(300px,78vw,360px);border-radius:18px;background:#05060A;border:1px solid #14161B;overflow:hidden}
/* the spirits' grid (v0.2.35): --hc columns and --hr rows over the home (less the caption), set by homeGrid in app.js;
   each spirit (--mw) as big as its cell allows, walking across its cell (--amp each way) and no further */
.gm-home{container-type:size;--hc:3;--hr:1}
.gm-mate{--cw:calc(100cqw / var(--hc));--ch:calc((100cqh - var(--hcap,54px) - var(--htop,0px)) / var(--hr));--mw:min(calc(var(--cw) - 8px),calc(var(--ch) - var(--hname,28px)),var(--hmax,112px));--amp:min(calc((var(--cw) - var(--mw)) / 2),10px);   /* (Nov 5, Hunter: "move wayyy too far left and right … make this much less": at most 10px each way, whatever room the spot has) */
  left:calc(var(--cw) * var(--hx,0) + var(--amp));top:calc(var(--htop,0px) + 8px + var(--ch) * var(--hy,0) + (var(--ch) - var(--mw) - var(--hname,28px)) / 2)}
.gm-home.fr-pf-hm .gm-cap{right:12px;bottom:14px}   /* (E3: under them; the tab's rule measures from --hcap, which a profile doesn't set, so it sat on the top row) */
@supports not (container-type:size){.gm-mate{--mw:72px;--amp:6px;left:calc(100% / var(--hc) * var(--hx,0) + 4px);top:calc(8px + 30% * var(--hy,0))}}
/* the spirit scenes keep their own dark artwork in every theme, so their words stay light */
.gm-home,.gm-stage{--fg:#F4F5F7;--muted:#A9AEBA;--faint:#7D828F;color:var(--fg)}
.gm-mate{position:absolute;width:var(--mw);border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;z-index:1;animation:gm-drift var(--dur,9s) ease-in-out infinite alternate;animation-delay:var(--del,0s)}
.gm-mate:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.gm-nm{display:block;text-align:center;font-size:11px;font-weight:700;color:var(--faint);margin-top:-4px}
.gm-many .gm-nm{font-size:10px}
.gm-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (Oct 22, 25 Kindlings) with many, a long name takes two short lines ("Baby / Mammoth") instead of "Baby M…"; a hop (gmTick) is
   a one-time lift of the whole picture, so the button itself never moves */
.gm-many .gm-nm{white-space:normal;line-height:1.1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:clip;margin-left:-12px;margin-right:-12px}   /* (wider than a small Kindling, into the gap beside it) */
/* E3: one glow layer on the home (25 Kindlings with two layers each cost about half the frame rate on a slow phone; looks the same) */
.gm-mate .ss:not(.rad-on):not([data-dm]):not([data-cel]):not([data-sp="phoenix"]){filter:drop-shadow(0 0 6px hsl(var(--h) 100% 60% / .8))}
.gm-mate .ss.gm-hop{animation:gm-hop .9s ease-out 1}
.gm-mate .ss.ss-lite.gm-hop{animation:ss-float 5s ease-in-out var(--fl,0s) infinite,gm-hop .9s ease-out 1}   /* (the float goes on through the hop) */
@keyframes gm-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px)}65%{transform:translateY(0)}80%{transform:translateY(-4px)}}
@keyframes gm-drift{from{transform:translateX(calc(var(--amp,14px) * -1))}to{transform:translateX(var(--amp,14px))}}
.gm-cap{position:absolute;left:12px;right:48px;bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
/* the raised, glowing Spirits button in the middle of the tab bar, with your main spirit in it */
.tab.gm-tab{margin-top:-24px;justify-content:flex-end}
/* its own color, never the tab's: the tab's color fades when it's picked, and every frame of that fade restyled the whole
   Kindling inside (about 130 pieces), the pause swiping to the Kindlings home (A64, Hunter Oct 13). A written-out color
   on purpose: a color name (var) doesn't stop it. Nothing in the ring is drawn in it */
.gm-ring{color:#fff;width:52px;height:52px;border-radius:50%;background:var(--acc-deep);border:1.5px solid var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent);display:flex;align-items:flex-start;justify-content:center;overflow:hidden;flex:none}
.gm-ring .ss{width:58px;margin-top:4px;flex:none}
.gm-ring .ss .cel-rays{animation:none}   /* (check 5) the bar's small Astral: its turning rays redrew it on every tab, every frame (a phone 70% busy) */
.tab.gm-tab[aria-selected="true"] .gm-ring{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
/* dress-up */
/* Dress-up (A62, Look B "Showcase"): a full page, the Kindling big over its background, a rail of parts on the left and a
   drawer of same-size cards at the bottom. Classes dr- */
.np.dr,.np.jr{overflow:hidden;background:var(--bg);--dr-ink:#FBF7F4;--dr-dim:rgba(251,247,244,.78);--dr-glass:rgba(12,10,16,.86);--dr-edge:rgba(255,255,255,.16)}
.dr-scene{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.dr-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 28%,transparent 50%,rgba(0,0,0,.35) 80%)}
.dr>*:not(.dr-scene):not(.dr-shade),.jr>*:not(.dr-scene):not(.dr-shade){position:relative;z-index:1}
/* (E4) a message in place on these pages floats over the page under its top bar, so its button can be tapped */
.dr>.toast-ipw:not(.dr-shade),.jr>.toast-ipw:not(.dr-shade){position:sticky;z-index:5}
.dr-top{display:flex;align-items:center;gap:8px;width:100%;max-width:560px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0}
.dr-top .grow{flex:1}
.dr-ib{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dr-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.dr-main{display:flex}
.dr-mainon{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:var(--dr-glass);color:#F5C451;font-size:13px;font-weight:800}
.dr-mainon[hidden]{display:none}
.dr-who{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:560px;margin:0 auto;padding:4px 16px 0;text-align:center}
.dr-name{position:relative;display:inline-flex;align-items:center}
.dr-nm{width:min(64vw,260px);padding:2px 22px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--dr-ink);font:inherit;font-size:24px;font-weight:800;letter-spacing:-.01em;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.dr-nm::placeholder{color:var(--dr-ink);opacity:1}
.dr-nm:focus{outline:none;border-bottom-color:var(--accent)}
.dr-pen{position:absolute;right:0;color:var(--dr-dim);pointer-events:none}
.dr-tag{font-size:12px;font-weight:600;color:var(--dr-dim);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.dr .gm-xp{align-items:center;gap:6px;margin-top:2px}
.gm-xp-line{display:flex;flex-direction:column;gap:6px}
.dr .gm-xp-line{flex-direction:row;align-items:center;gap:8px}
.dr .gm-xp-top{justify-content:center;flex-wrap:wrap;gap:6px}
.dr .gm-xp-top .grow{display:none}
.dr .gm-xp-top b,.dr .gm-xp-role{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 11px;border-radius:999px;background:var(--dr-glass);color:var(--dr-ink);font-size:12px;font-weight:800}
.dr .gm-xp-role{color:#F5D27A}
.dr .gm-xp-role{letter-spacing:.04em}
.dr .gm-xp-top .btn{min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font-size:12px}
.dr .gm-xp-bar{width:120px;height:5px;background:rgba(255,255,255,.18)}
.dr .gm-xp-txt{font-size:11px;color:var(--dr-dim);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.dr-mid{position:relative;flex:1;min-height:150px;display:flex;width:100%;max-width:560px;margin:0 auto}
.dr-rail{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:6px;max-height:100%;overflow-y:auto;scrollbar-width:none;padding:2px}
.dr-rail::-webkit-scrollbar{display:none}
.dr-cat{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-dim);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dr-cat.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
@media (max-height:780px){.dr-cat{width:38px;height:38px;border-radius:12px}.dr-rail{gap:4px}.dr-who{gap:2px}.dr-nm{font-size:22px}}
.dr-cat:focus-visible,.dr-card:focus-visible,.dr-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dr .dr-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 0 0 40px;border-radius:0;background:none;overflow:visible}
.dr .dr-stage .ss{width:auto;height:94%;max-height:340px;max-width:62vw;aspect-ratio:200/230}
.dr-drawer{width:100%;max-width:560px;margin:0 auto;padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:var(--tile);border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.dr-dh{display:flex;align-items:center;gap:8px;height:32px;padding:0 16px}
.dr-dh .label{min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}   /* (one line, so the drawer is the same height for every place or part) */
.dr-dh>span:not(.label):not(.grow){flex:none;white-space:nowrap}
.dr-dh .grow{flex:1}
#dr-shop{font-size:12px;color:var(--faint)}
.dr-car{display:flex;gap:10px;padding:10px 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.dr-car::-webkit-scrollbar{display:none}
.dr-card{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 6px 8px;border-radius:18px;border:1px solid var(--border);background:var(--tile-2);color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;scroll-snap-align:start}
.dr-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--fg)}
.dr-art{position:relative;display:block;width:78px;height:78px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.dr-art .ss{position:absolute;inset:0;width:100%!important;height:100%}
.dr-art .ss,.dr-art .ss *{animation:none!important;transition:none!important}
/* every card's name has room for two lines, so the cards (and the drawer) are always the same height */
.dr-cn{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;height:2.4em;overflow:hidden;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.dr-dots{display:flex;align-items:center;gap:6px;padding:8px 16px 0;overflow-x:auto;scrollbar-width:none}
.dr-dots::-webkit-scrollbar{display:none}
.dr-dot{flex:none;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.dr-dot .gm-dot{width:28px;height:28px}
.dr-dot[aria-pressed="true"] .gm-dot{box-shadow:0 0 0 2px var(--tile),0 0 0 4px var(--fg)}
.dr-rad[hidden],#dr-shop[hidden]{display:none}
.dr-radsw{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 4px 0 10px;border:1px solid var(--gold-line);border-radius:999px;background:none;color:var(--gold-text,var(--gold));font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.dr-radt{display:inline-flex;align-items:center;gap:4px}
.dr-radsw .fgc-sw{transform:scale(.8)}
.dr-radsw[aria-checked="true"] .fgc-sw{background:var(--gold)}
.dr-radsw[aria-checked="true"] .fgc-sw::after{transform:translateX(18px)}
/* (v0.6.10, Hunter: the switch hid behind Get more and moved it) in the stage's top right corner, beside "Trying on":
   the switch, the glint and the word small under it, on the same glass as the pill; it holds no room, so nothing moves */
.dr .dr-rad{position:absolute;right:10px;top:2px;z-index:3}
.dr .dr-radsw{flex-direction:column;gap:1px;min-height:0;padding:5px 8px 4px;border-radius:14px;background:var(--dr-glass,rgba(0,0,0,.45));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dr .dr-radsw .dr-radt{order:2;font-size:10px;line-height:1.1;gap:3px}
.dr .dr-radsw .fgc-sw{margin:-2px -3px}
/* the arrows under the Kindling (swipe works too): "3 of 15" */
.dr-pager{position:absolute;left:50%;bottom:6px;z-index:2;display:flex;align-items:center;gap:8px;transform:translateX(-50%)}
.dr-pager[hidden]{display:none}
.dr-pg{width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);cursor:pointer}
.dr-pg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dr-pos{min-width:64px;padding:5px 10px;border-radius:999px;background:var(--dr-glass);color:var(--dr-dim);font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.dr .dr-stage{padding-bottom:44px}
/* XP treats (A62, Look B): the Kindling and its level, the 3 treats as cards. Classes tr- */
.tr-h{margin:0;font-size:17px;color:var(--dr-ink);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.tr-sp{width:42px;flex:none}
.tr-ic{width:58px;height:58px;display:grid;place-items:center;border-radius:50%}
.tr-snack{color:#F5B451;background:rgba(245,180,81,.14)}
.tr-feast{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tr-berry{color:#5CC8FF;background:rgba(92,200,255,.14)}
/* Journeys (A62, Look B): the three places as pictures, tap one to pick it; the drawer sends a Kindling there. Classes jy- */
/* The Kindlings home (A62, look A of docs/home-looks.html, Hunter Oct 11: "show the background and kindlings on the whole
   page in a clean way so there's no scrolling"): the tab is one screen (fixed, from the top down to the bar), the scene
   fills it, the title, wallet, challenges and gift float at the top (.hm-top), the six buttons in one glass row at the
   bottom, and the Kindlings stand in between (--htop/--hcap, measured by hmTop in app.js). Glow is motes to tap. hm- */
#v-spirits{position:fixed;z-index:1;top:0;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;overflow:hidden;display:block}
/* (A68 item 7, Hunter: "when I swipe to the kindlings home, it feels like it stops halfway") hidden, the home stays
   drawn but see-through and takes no taps (inert in setTab): showing it again rebuilds and redraws nothing. Measured on
   Hunter's phone (Admin › Swipe timer, Oct 25): skipped while hidden (content-visibility), the graphics chip drew every
   layer fresh and each swipe had a 33–41 ms frame; kept drawn, most swipes had none. Its moving parts are still while
   hidden and while it slides in (.hm-still, taken off after the slide), so it costs nothing on the other tabs. */
/* (the full check, Oct 26) no pointer-events here: inert (setTab) already takes the taps, and pointer-events passes down
   to every piece of the home, so switching tabs restyled all of them (about 0.5 s on a slow phone with 25 Kindlings) */
#v-spirits[hidden]{display:block!important;z-index:-1;opacity:0;will-change:opacity}
#v-spirits.hm-warm[hidden]{z-index:250;opacity:.01}
#v-spirits[hidden] *,#v-spirits[hidden] *::before,#v-spirits[hidden] *::after,#v-spirits.hm-still :not(#gm-bgl *),#v-spirits.hm-still :not(#gm-bgl *)::before,#v-spirits.hm-still :not(#gm-bgl *)::after{animation-play-state:paused!important}
/* (Oct 25, Hunter: the fire's sparks "are just frozen when you swipe to it" and took a second to start) the background's
   own movement (sparks, stars, fireflies: the graphics chip's work alone) goes on during the slide; only the Kindlings wait */   /* (the same size as when it shows, so what's worked out while hidden still fits) */
#v-spirits>.gm-home{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:0;--htop:130px;--hcap:120px;--hmax:128px;--hname:44px}   /* (--hname: the name and the level under each) */
#v-spirits>.gm-home .gm-bgl::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.08) 150px,transparent 45%,transparent 70%,rgba(0,0,0,.45) 100%);pointer-events:none}
.hm-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 0;pointer-events:none}
.hm-top>*>*{pointer-events:auto}
.hm-top .gm-head{margin:0;padding:0;align-items:center;gap:8px;row-gap:6px}
.hm-top .gm-head h1{flex:1;color:#F4F5F7;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hm-top .gm-pill{background:rgba(12,10,16,.72);border-color:rgba(255,255,255,.14);color:#F4F5F7}
.hm-row{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:46px}
.hm-row .grow{flex:1}
.hm-chal{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(12,10,16,.72);color:#F4F5F7;font:inherit;font-size:13px;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hm-ring circle{fill:none;stroke:rgba(255,255,255,.2);stroke-width:3}
.hm-ring .hm-ring-on{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .4s}
.hm-gift{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(12,10,16,.72);color:#F4F5F7;padding:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hm-gift.ready{background:var(--gold);border-color:var(--gold);color:#1A1408;box-shadow:0 0 22px rgba(245,196,81,.65)}
/* (check 5) the glow breathes by its opacity on a layer of its own: an animated box-shadow repainted every frame */
.hm-gift.ready::before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 34px 6px rgba(245,196,81,.8);opacity:0;pointer-events:none;animation:hm-gift 2.4s ease-in-out infinite}
.hm-gift.ready::after{content:'!';position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:#fff;color:#1A1408;font-size:12px;font-weight:900;line-height:18px;text-align:center;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
@keyframes hm-gift{50%{opacity:1}}   /* (a glow, not a wobble: a moving button is hard to tap) */
.hm-streak{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:0 6px;border-radius:999px;background:rgba(12,10,16,.85);border:1px solid rgba(255,255,255,.14);color:#F4F5F7;font-size:10px;font-weight:800;line-height:16px;white-space:nowrap}
/* the six: one glass row */
#v-spirits>.gm-btns{position:absolute;z-index:3;left:10px;right:10px;bottom:calc(var(--dock-h) + 2px);margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:9px 4px 7px;border-radius:24px;background:rgba(12,10,16,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#gm-btns .gm-btn{flex-direction:column;justify-content:flex-start;gap:4px;min-height:0;padding:0;border:0;background:none;border-radius:14px;color:#F4F5F7;font-size:10.5px;letter-spacing:-.01em;white-space:nowrap}
#gm-btns .gm-btn>svg{width:22px;height:22px;padding:11px;box-sizing:content-box;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,rgba(12,10,16,.5))}
#gm-btns .fr-badge{top:-3px;right:calc(50% - 26px)}
/* the Nest's and Journeys' timers (Oct 13): a small pill at the foot of the round icon; it never moves anything */
#gm-btns .hm-tm{position:absolute;top:33px;left:50%;transform:translateX(-50%);padding:0 6px;height:16px;line-height:15px;border-radius:8px;background:rgba(12,10,16,.86);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);color:#F4F5F7;font-size:9.5px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.gm-home .gm-cap{left:16px;right:60px;bottom:calc(var(--hcap) - 34px)}
#v-spirits .gm-bgbtn{right:14px;bottom:calc(var(--hcap) - 38px);width:38px;height:38px}
/* Glow: motes floating among the Kindlings, and the bubble over the first */
.hm-motes{position:absolute;z-index:2;left:6%;right:6%;top:var(--htop);bottom:var(--hcap);pointer-events:none}
.hm-mote{position:absolute;left:var(--mx);top:var(--my);width:40px;height:40px;margin:-20px 0 0 -20px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;animation:hm-float 6s ease-in-out infinite alternate;animation-delay:var(--md,0s)}
.hm-mote i{display:block;width:14px;height:14px;margin:auto;border-radius:50%;background:radial-gradient(circle,#E8F8FF 0 25%,#5CC8FF 55%,rgba(92,200,255,0) 72%);box-shadow:0 0 16px 6px rgba(92,200,255,.45)}
.hm-mote.big i{width:20px;height:20px}
.hm-mote.hm-faint i{width:10px;height:10px;opacity:.55;box-shadow:0 0 10px 3px rgba(92,200,255,.3)}
.hm-mote:focus-visible{outline:2px solid var(--accent);border-radius:50%}
@keyframes hm-float{from{transform:translate(-8px,6px)}to{transform:translate(8px,-8px)}}
.hm-glow{position:absolute;z-index:3;left:50%;top:calc(var(--htop) + (100% - var(--htop) - var(--hcap)) * .96 - 58px);transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:7px 12px;border:0;border-radius:14px;background:#5CC8FF;color:#06202E;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.hm-glow::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.hm-glow b{font-weight:900}
/* a Kindling back from a journey says so over its head */
.hm-bub{position:absolute;left:50%;top:-14px;z-index:2;transform:translateX(-50%);padding:4px 9px;border-radius:12px;background:var(--gold);color:#1A1408;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none}
.hm-bub::after{content:'';position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.gm-mate[data-back]{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.hm-mote,.hm-gift.ready::before{animation:none}}
/* the gift and the challenges as pages over your background */
.hm-pg .jr-body{justify-content:flex-start;padding-top:4px}
.hm-ph{display:flex;flex-direction:column;align-items:center;gap:2px}
.hm-psub{color:var(--dr-dim);font-size:14px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.hm-pnote{margin:0;padding:12px 14px;border-radius:16px;background:var(--dr-glass);border:1px solid var(--dr-edge);color:var(--dr-dim);font-size:13px;line-height:1.45}
.hm-pg .gm-day{background:var(--dr-glass);border-color:var(--dr-edge);color:var(--dr-ink)}
.hm-pg .gm-day.today{background:color-mix(in srgb,var(--gold) 22%,rgba(12,10,16,.86));border-color:var(--gold)}
.hm-pg .gm-day.big{background:color-mix(in srgb,#B38CFF 20%,rgba(12,10,16,.86))}
.hm-pg .gm-day.big.today{background:color-mix(in srgb,var(--gold) 22%,rgba(12,10,16,.86))}
.hm-pg .gm-gstreak{margin:0;background:var(--dr-glass);border-color:var(--gold-line)}
.hm-pg .gm-gstreak b{color:#F5C451}
.hm-pg .gm-gstreak span{color:var(--dr-dim)}
.hm-pg .gm-chal{margin:0;padding:6px 16px 12px;border-radius:18px;background:var(--dr-glass);border:1px solid var(--dr-edge);color:var(--dr-ink);--fg:#F4F5F7;--muted:#C9C3C0;--line:rgba(255,255,255,.12);--border:rgba(255,255,255,.3)}
.hm-pg .gm-ch-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hm-pg .gm-ch{min-height:50px;font-size:15px}
.hm-pg .gm-ch:nth-child(2){border-top:0}
.hm-pg .gm-ch-note{color:var(--dr-dim)}
/* Today's Glow (E1, v0.5.15; Hunter's pick, look B of docs/glow-looks.html): the jar, then a card for each area. Classes tg- */
#gm-chpill .hm-ring-on{stroke:#5CC8FF}
.tg{display:flex;flex-direction:column;gap:10px;color:var(--dr-ink);--fg:#F4F5F7;--muted:#C9C3C0;--line:rgba(255,255,255,.12);--border:rgba(255,255,255,.3)}
.tg:empty{display:none}
.tg-top{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;background:var(--dr-glass);border:1px solid var(--dr-edge)}
.tg-jar{flex:none}
.tg-num{display:flex;flex-direction:column;gap:2px;min-width:0}
.tg-num b{font-size:28px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.tg-num>span{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:14px;font-weight:700}
.tg-num>.tg-line{font-size:13px;font-weight:600}
.tg-card{padding:4px 14px 6px;border-radius:16px;background:var(--dr-glass);border:1px solid var(--dr-edge)}
.tg-ch{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0 3px;font-size:13.5px;font-weight:800}
.tg-ch span+span{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.tg .gm-ch{min-height:48px;font-size:14.5px}
.tg-card .gm-ch:nth-child(2){border-top:0}
.tg .gm-ch.done .grow{text-decoration:none;color:inherit}
.tg .gm-chgo .grow{color:inherit}
.tg .gm-chgo .tg-t{color:var(--accent)}
.tg-t{display:block}
.tg-sub{display:block;margin-top:1px;font-size:12.5px;font-weight:600;color:var(--muted)}
.tg-more .tg-t,.tg-idle .tg-t{color:var(--muted)}
.tg-more b,.tg-idle b{opacity:.7}
.tg-note{margin:2px 4px 0;color:var(--dr-dim)}
/* (the page is dark glass in every theme: Daylight's accent made light here, like .np.fp's) */
:root[data-theme="daylight"] .tg{--accent:#7CC0E8;--accent-ink:#06243A}
.hm-pg .gm-claim:disabled{background:var(--dr-glass);color:var(--dr-dim);border:1px solid var(--dr-edge)}
/* The collection (A62, Look B): the Kindlings as cards the same size (the picture on a small game table, name, tier,
   level, the elements as dots on one line, Done or 3/9), the totals on one line each, the cosmetics' rows one height */
#gm-book .gm-prog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#gm-book .gm-tl{gap:4px;padding:10px 12px;background:var(--tile)}
#gm-book .gm-tl b{font-size:18px;white-space:nowrap}
.gm-tl-bar{display:block;height:4px;margin-top:2px;border-radius:2px;background:color-mix(in srgb,var(--fg) 12%,transparent);overflow:hidden}
.gm-tl-bar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.gm-tl.dm .gm-tl-bar i{background:var(--violet)}
.gm-tl-rad .gm-tl-bar i{background:var(--gold)}
#gm-book-cos .gm-crow{min-height:52px}
#gm-book-cos .gm-bnm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the background picker (A62, Look B): your Kindling on the background in use, every background as a card below */
.bk .dr-stage{padding:0}
.bk-sub{margin:0;font-size:12px}
.bk-drawer{max-height:56%;display:flex;flex-direction:column}
.bk .bk-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;padding:10px 16px 4px;overscroll-behavior:contain}
@media (min-width:600px){.bk .bk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The shop's grid (A62, Look B; Hunter: "cluttered … random sized things"): cards all the same height, each picture on
   a small game table, the colors you have as a thin bar (with "3 of 9 elements"), the price or ✓ at the bottom */
.gm-sart{position:relative;display:grid;place-items:center;height:118px;margin-bottom:6px;border-radius:13px;overflow:hidden;background:radial-gradient(60% 70% at 50% 45%,var(--tb-glow) 0%,var(--tb-glow2) 55%,transparent 100%),radial-gradient(90% 90% at 50% 40%,var(--tb-a) 0%,var(--tb-b) 100%)}
.gm-sart .gm-cth{width:110px;height:112px;margin:0}
.gm-sart .gm-cth .ss{width:110px}
.gm-sart-bg{background:none}
.gm-sart .gm-bgth{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0}
.gm-sbar{display:block;height:4px;margin-top:6px;border-radius:2px;background:color-mix(in srgb,var(--fg) 12%,transparent);overflow:hidden}
.gm-sbar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
/* The shop's buy page (A62, Look B; was a small window): the thing big on a background, its name, then the colors,
   what it costs and the buttons in the drawer. Scrolls when there are many buttons. Classes by- */
.np.by{overflow-y:auto}
.by-mid{flex:none;height:clamp(190px,34vh,320px)}   /* (a fixed spot: nothing above the drawer moves when a color is picked, Hunter Oct 11) */
.by .by-stage{flex:1;align-self:stretch;width:100%;height:auto;min-height:0;padding:0;display:flex;align-items:center;justify-content:center}
.by .by-stage .ss{width:auto;height:92%;max-height:300px;max-width:60vw;aspect-ratio:200/230}
.by .by-stage>svg{width:150px;height:150px}
.by-wal{flex-wrap:nowrap}
.by-wal .gm-pill{background:var(--dr-glass);border-color:var(--dr-edge);color:var(--dr-ink)}
.by-name{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;width:100%;max-width:560px;min-height:84px;margin:0 auto;padding:0 16px 14px;text-align:center}
.by-name h2{max-width:100%;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--dr-ink);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.by-name .gm-r{padding:4px 11px;border-radius:999px;background:var(--dr-glass);font-size:11px;font-weight:800;letter-spacing:.1em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.by-drawer{flex:1 0 auto;padding-top:12px}
/* previews (A72 item 11, v0.6.44; Hunter's pick A of docs/mock/previews.html without the team): arrows beside the stage
   for the next or last thing in the Shop's part; a scene over the whole screen with only a glass bar (by-full) */
.by-arw{position:absolute;top:calc(env(safe-area-inset-top,0px) + 56px + clamp(190px,34vh,320px)/2 - 20px);z-index:3;width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);background:rgba(10,8,20,.45);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.by-arw[hidden]{display:none}
.by-al{left:10px}.by-ar{right:10px}
#gm-buy.by-full{overflow:hidden}
#gm-buy.by-full .by-mid,#gm-buy.by-full .by-name,#gm-buy.by-full .by-drawer{visibility:hidden}
#gm-buy.by-full .dr-shade{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 16%)}
#gm-buy.by-full .by-arw{position:fixed;top:46%}
.by-bar{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:4;max-width:536px;margin:0 auto;display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 12px 12px 16px;border-radius:22px;background:rgba(16,12,28,.62);border:1px solid rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;box-sizing:border-box}
.by-bar[hidden]{display:none}
#gm-buy>.by-bar{position:fixed;z-index:4}#gm-buy>.by-arw{position:absolute;z-index:3}#gm-buy.by-full>.by-arw{position:fixed}   /* (the page's own children are relative) */
.by-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.by-bar .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.by-bar b{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#by-barsub{font-size:12.5px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.by-bar .btn{flex:none;height:42px;padding:0 14px;font-size:14px}
.by-up{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:36px;height:4px;border-radius:9px;background:rgba(255,255,255,.4)}
.by-barin{flex:none;font-size:13px;font-weight:800;color:#9FE6B4}
/* An outfit as a gift (A69 part 7, Hunter's pick B of docs/mock/gift-outfit.html): over the outfit's page, your friends
   as rows of one height (each the outfit on their own Kindling), a note and Send. Classes og- */
.og-name{min-height:76px;justify-content:center;padding-top:6px}
.og-drawer{display:flex;flex-direction:column;gap:10px;padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px))}
.og-rows{display:flex;flex-direction:column;gap:8px}
.og-row{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;padding:8px 14px 8px 8px;border-radius:18px;border:1px solid color-mix(in srgb,var(--fg) 10%,transparent);background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.og-row[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.og-row:disabled{opacity:.5;cursor:default}
.og-row .og-art{width:64px;height:72px;flex:none;border-radius:14px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.og-art .ss,.og-big .ss{width:100%;height:100%}
.og-who{flex:1;min-width:0}
.og-who b{display:block;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.og-who small{display:block;min-height:1.35em;font-size:12px;line-height:1.35;color:var(--muted)}
.og-tick{flex:none;width:20px;font-style:normal;font-size:20px;font-weight:800;color:var(--accent);visibility:hidden}
.og-row[aria-checked="true"] .og-tick{visibility:visible}
.og-note{width:100%;min-height:44px;padding:10px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);font:inherit;font-size:15px}
.og-note::placeholder{color:var(--muted)}
.og-send{width:100%;min-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* (one line: a long name doesn't make it taller) */
.og-send:not(:disabled){background:var(--accent);color:var(--accent-ink);font-weight:800}   /* (like the outfit page's Buy) */
.og-send:disabled{opacity:.6;cursor:default}
.og-small{display:block;min-height:1.4em;text-align:center;font-size:12px;color:var(--muted)}
.og-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px}
.og-box{width:20px;height:20px;flex:none}
.og-bx-a{fill:var(--accent)}
.og-bx-b{fill:var(--gold)}
.og-card .og-cpic{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0}
.og-card .og-art{width:64px;height:72px;flex:none;border-radius:14px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.og-card .og-box{width:60px;height:60px}
.og-card b{display:block}
.og-note-c{display:block;font-size:14px;color:var(--fg);opacity:.85}
.og-st{font-size:12px;color:var(--muted)}
.og-card .btn{width:100%;margin-top:4px}
.og-big{display:block;width:190px;height:210px;margin:0 auto}
.gt-og .jr-foot{display:flex;flex-direction:column;gap:8px}
.by-dh[hidden]{display:none}
.by-cnt{font-size:12px;font-weight:700;color:var(--green)}
.by-cols{display:flex;gap:4px;overflow-x:auto;padding:0 12px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.by-cols::-webkit-scrollbar{display:none}
.by-cols[hidden]{display:none}
.by-col{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border:1px solid transparent;border-radius:14px;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.by-col .gm-dot{width:30px;height:30px}
.by-col[aria-pressed="true"]{border-color:var(--accent);background:var(--tile-2);color:var(--fg)}
.by-col:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.by-cn{white-space:nowrap}
.by-dw{position:relative;display:block}
.by-dw .gm-dot{display:block}
.by-ok{position:absolute;right:-5px;bottom:-4px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--bg);font-size:10px;font-weight:900;box-shadow:0 0 0 2px var(--tile)}
.by-yr{height:13px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.by-col.mine{background:color-mix(in srgb,var(--green) 10%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.by-col.mine[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--green) 12%,var(--tile-2))}
.by-note{margin:8px 16px 0;text-align:center;font-size:13px;line-height:1.45}
.by-btns{padding:10px 16px 0}
.by .gm-ybtns .btn:not(.ghost){background:var(--accent);color:var(--accent-ink);font-weight:800}
.by .gm-ybtns .btn{min-height:48px}
.by-own{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}
.by-own .note{margin:0}
.by .gm-y-yours{display:inline-flex;min-height:32px;padding:0 14px;border-radius:999px}
.by-row{display:flex;gap:8px}
.by-row .btn{flex:1;min-width:0;padding:8px 10px;line-height:1.2}
.by .gm-ret-btn{min-height:40px;border:0;font-size:13px}
/* what a purchase with real money gave (A62: a full page) */
.gt-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;max-width:480px;margin:0 auto;padding:24px 20px;text-align:center}
.gt-ic{transform:scale(1.5);margin-bottom:10px}
.gt-title{margin:0;font-size:26px;font-weight:800;color:var(--dr-ink);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.gt .gm-got-sub{color:var(--dr-dim)}
.gt .gm-got-sub ul{color:var(--dr-ink)}
.gt .gm-got-sub .note{color:var(--dr-dim)}
/* The nest (A62, Look B): the egg slots in the Dusk Meadow, storage in the drawer at the bottom. Classes ns- */
.ns-stage{position:relative;display:flex;align-items:flex-end;min-height:230px;margin-top:4px;padding:14px 12px;border-radius:24px;overflow:hidden;isolation:isolate;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.ns-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.ns-stage::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.45) 100%);pointer-events:none}
.ns .ns-slots{position:relative;z-index:2;flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ns .gm-eslot{min-height:150px;padding:10px 4px;border-color:rgba(255,255,255,.16);background:rgba(12,10,16,.62);color:#FBF7F4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ns .gm-eslot span{color:rgba(251,247,244,.8)}
.ns .gm-eslot.empty{background:rgba(12,10,16,.38);color:rgba(251,247,244,.8)}
.ns .gm-eslot.empty span{color:rgba(251,247,244,.7)}
.ns .gm-eslot.ready{background:rgba(60,44,8,.7);border-color:#F5C451;box-shadow:0 0 18px rgba(245,196,81,.45)}
.ns .gm-eslot.ready b{color:#F5D27A}
.ns .gm-eslot.gm-nst-lock{background:rgba(12,10,16,.38)}
.ns .gm-eslot.gm-nst-lock b{color:#F5D27A}
.ns .gm-eslot .gm-bar{width:80%}
.ns .gm-eggnote{margin:10px 2px 0;font-size:12px}
.ns-drawer{position:sticky;bottom:0;z-index:3;flex:none}
.ns .gm-nst{margin:0;padding:0 16px;border:0;border-radius:0;background:none;gap:8px}
.ns .gm-nst-top{min-height:32px}
.ns .gm-nst-top b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ns .gm-nst-eggs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.ns .gm-nst-eggs::-webkit-scrollbar{display:none}
.ns .gm-nst-egg{flex:none;width:76px;min-height:84px;justify-content:center;gap:4px;border-radius:16px;background:var(--tile-2)}
.ns .gm-nst-pick{display:flex;flex-direction:column;height:178px;background:var(--tile-2)}
.ns .gm-nst-pick .note{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ns .gm-nst-pick>.btn,.ns .gm-nst-pick>.gm-nst-busy{flex:none}   /* (always there, one size: picking an egg doesn't grow the drawer) */
.ns .gm-nst-none{display:flex;align-items:center;justify-content:center;text-align:center}
.ns .gm-nst-pick .btn{background:var(--accent);color:var(--accent-ink);font-weight:800}
.jy-places{display:flex;flex-direction:column;gap:10px}
.jy-all{width:100%}
.jy-none{margin:0 0 2px}
.jy-place{position:relative;height:150px;border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);isolation:isolate}
.jy-place.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.jy-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.jy-dim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.05) 100%)}
.jy-pick{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.jy-pick b{font-size:19px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.jy-pick span{font-size:12px;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.jy-pick:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:22px}
.jy-here{position:absolute;right:10px;bottom:8px;z-index:3;display:flex;align-items:flex-end;gap:4px;pointer-events:none}
.jy-who{display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;pointer-events:none}   /* (a tap on the Kindling picks the place: only Collect catches taps) */
.jy-who.back .jy-k{filter:drop-shadow(0 0 10px rgba(245,196,81,.7))}
.jy-k{position:relative;display:block;width:70px;height:78px}
.jy-k .ss{width:100%}
.jy-tag{max-width:100%;padding:4px 8px;border:0;border-radius:999px;background:rgba(0,0,0,.66);color:#fff;font:inherit;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jy-tag.gold{min-height:28px;background:#F5C451;color:#1A1408;cursor:pointer;pointer-events:auto}
.jy-bar{width:58px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.jy-bar i{display:block;height:100%;background:#fff}
.jy-sel{position:absolute;left:14px;bottom:12px;z-index:3;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:900;pointer-events:none}
.jy-more{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.jy-more[hidden]{display:none}
.jy-drawer{position:sticky;bottom:0;z-index:3;flex:none;animation:jy-up .22s ease-out}
.jy-drawer[hidden]{display:none}
@keyframes jy-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.jy-drawer{animation:none}}
.jy-drawer,.ns-drawer{max-width:720px}
.jy-slots{font-size:12px;color:var(--faint)}
.jy-car .dr-card{width:84px}
.jy-car .dr-art{width:70px;height:70px}
.jy-note{margin:6px 16px 0;font-size:12px;line-height:1.4}
.jy-info{height:96px;overflow-y:auto;overscroll-behavior:contain}
/* the journey slots in the drawer (Hunter, Oct 16): who's away, where and how long is left, who's going, and the free
   ones; one size whatever is in them, so picking never moves the drawer */
.jy-slrow{display:flex;gap:6px;margin:4px 16px 8px}
.jy-go .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-ci input:disabled{opacity:.45}
/* (Oct 16 review: the drawing over the name and time, so "Baby Mammoth" and "20h 35m left" fit three to a row at 360px;
   the drawer's own colors, so every theme shows the edges, the free slot's dashes too) */
.jy-sl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:64px;padding:3px 4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);color:var(--fg);font:inherit;text-align:center}
button.jy-sl{cursor:pointer}
.jy-sl.go{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.jy-sl.free{border-style:dashed;border-color:color-mix(in srgb,var(--fg) 34%,transparent);background:none}
.jy-sl.free .jy-slk::before{content:'';position:absolute;inset:5px 3px 3px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--fg) 30%,transparent)}
.jy-sl.free .jy-slt{opacity:.75}
.jy-sl.back{border-color:var(--gold-line);background:var(--gold-soft)}
.jy-sl.back .jy-slt span{color:var(--gold);font-weight:800}
.jy-slk{flex:none;position:relative;width:28px;height:30px}
.jy-slk .ss{width:100%}
.jy-slt{max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.jy-slt b{max-width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jy-slt span{max-width:100%;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* (one size for every place and Kindling: the drawer never jumps) */
.jy-info .jy-note:first-child{margin-top:8px}
.jy-go{display:flex;align-items:center;justify-content:center;height:60px;padding:8px 16px 0}
.jy-busy{margin:0;text-align:center}
.jy-go .btn,.jr-foot .btn{width:100%;min-height:50px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:16px}
.jy-go .btn:disabled{opacity:.45;cursor:default;filter:none}   /* (nobody picked: “Pick who goes” shouldn’t look tappable) */
/* what a journey brought (A62): a full page on the place's picture */
.jr-body{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:560px;margin:0 auto;padding:8px 16px 12px;display:flex;flex-direction:column;justify-content:safe center;gap:14px}
.jr-title{margin:0;text-align:center;font-size:26px;color:var(--dr-ink);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.jr .gm-jr-one{border:1px solid var(--border);background:var(--tile)}
.jr-foot{width:100%;max-width:560px;margin:0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.gm-stage{position:relative;display:grid;place-items:center;min-height:250px;border-radius:14px;background:#000;overflow:hidden;padding:10px 0 34px}
.gm-stage .ss{width:min(190px,52vw)}
.gm-tag{position:absolute;left:12px;right:12px;bottom:10px;font-size:12px;color:var(--faint)}
.gm-tag b{color:var(--fg);font-weight:700}
.gm-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gm-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px}
.gm-dot{width:12px;height:12px;border-radius:50%;flex:none}
.gm-free{text-transform:none;letter-spacing:0;font-weight:600}
.gm-slot{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.gm-sl{font-size:12px;font-weight:700;color:var(--muted)}
.gm-cc{padding-left:10px;border-left:2px solid var(--line)}
.gm-more{margin-left:4px}
@media (prefers-reduced-motion: reduce){.gm-mate,.gm-mate .ss.gm-hop{animation:none}}
.gm-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* wallet, Glow and the daily gift (Games stage 2, v0.1.54) */
.gm-head{flex-wrap:wrap}
.gm-wallet{display:flex;gap:4px;flex-wrap:wrap}   /* (A68, Hunter: one size and one spacing on every page) */
.gm-pill{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 9px;border-radius:999px;background:var(--tile);border:1px solid var(--border);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;font-family:inherit;line-height:1;color:var(--fg);cursor:pointer}
.gm-pill:active{filter:brightness(1.2)}
/* (A68) gems' + : a tap opens the Gems page */
.gm-cur-add{display:grid;place-items:center;flex:none;width:16px;height:16px;margin-right:-4px;border-radius:50%;background:#B58CFF;color:#1B0B33;font-style:normal}   /* (the gem's own purple: Hunter's pick A) */
/* how to earn coins and Glow (Oct 16): a glass card for each, the one tapped first with the accent edge */
.ern{display:flex;flex-direction:column;gap:12px}
.ern-s{padding:12px 16px 14px;border-radius:18px;background:var(--dr-glass);border:1px solid var(--dr-edge);color:var(--dr-ink);--fg:var(--dr-ink);--muted:var(--dr-dim);--line:var(--dr-edge)}
.ern-s.on{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.ern-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ern-h h3{margin:0;font-size:17px;font-weight:800}
.ern-ic{display:grid;place-items:center;width:26px;height:26px}
.ern-ic svg{width:20px;height:20px}
.ern-have{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ern-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ern-r{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--line)}
.ern-r b{font-size:14.5px}
.ern-r span{font-size:13px;color:var(--muted);line-height:1.35}
.ern-go{cursor:pointer}
.cl-addhere{cursor:pointer}
.ern-use{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.gm-giftsheet{gap:14px}
.gm-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gm-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:6px 4px;border-radius:16px;background:var(--bg);border:1px solid var(--border);font-size:12px;font-weight:700;text-align:center}
.gm-day.past{opacity:.55}
.gm-day.today{background:var(--gold-panel);border:1.5px solid var(--gold);color:var(--gold-text)}
.gm-day.today .gm-dn{color:var(--gold)}
.gm-day.big{grid-column:span 2;flex-direction:row;gap:12px;background:var(--violet-panel);border-color:var(--violet-line)}
.gm-day.big.today{background:var(--gold-panel);border-color:var(--gold)}
.gm-dcol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.gm-day.big svg{width:30px;height:34px}
.gm-day.big:not(.today) .gm-dn{color:var(--muted)}   /* (on the violet card the faint color was too dim to read, A63 audit) */
.gm-dn{white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--faint)}
.gm-ck{position:absolute;top:6px;right:8px;color:var(--green);font-size:13px}
.gm-claim{min-height:52px;background:var(--gold);color:var(--gold-ink)}
.gm-claim:disabled{background:var(--tile-2);color:var(--muted);opacity:1}
.gm-tabdot{top:-2px;left:calc(50% + 16px)}
.gm-pop{position:absolute;left:calc(50% + 48px);top:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:800;color:var(--fg);opacity:0;pointer-events:none;white-space:nowrap}
.gm-pop.go{animation:gm-pop 1.6s ease-out}
@keyframes gm-pop{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
@media (prefers-reduced-motion: reduce){.gm-pop.go{animation:none}}
/* daily challenges, the always-there gift banner and the login streak (v0.1.55) */
.gm-gstreak{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:4px 10px;border-radius:14px;background:var(--gold-panel);border:1px solid var(--gold-line);margin-right:8px}
.gm-gstreak b{font-size:22px;line-height:1.1;color:var(--gold-text)}
.gm-gstreak b::before{content:"🔥 ";font-size:16px}
.gm-gstreak span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-sub)}
.gm-gstreak.zero b::before{content:""}
.gm-chal{margin-top:12px;display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.gm-chal:empty{display:none}
.gm-ch-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.gm-ch-n{font-size:12px;font-weight:700;color:var(--muted)}
.gm-ch{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px;border-top:1px solid var(--line)}
.gm-ch:nth-child(2){border-top:0}
.gm-ch b{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gm-ch-ck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.gm-ch.done .gm-ch-ck{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.gm-ch.done .grow{color:var(--muted);text-decoration:line-through}
.gm-ch-bonus .grow{font-weight:700}
.gm-ch-note{margin:6px 0 0}
.gm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gm-ch .grow{flex:1;min-width:0}
/* the collection book (Games stage 3, v0.1.58) */
.gm-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
/* six buttons since Friends (v0.1.87): two rows of three, icon beside the word */
.gm-btns .gm-btn{flex-direction:row;justify-content:center;gap:7px;min-height:48px;padding:8px 4px;font-size:12px;position:relative}
.gm-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px;border-radius:16px;background:var(--tile);border:1px solid var(--border);font:inherit;font-size:11px;font-weight:700;color:var(--fg);cursor:pointer;min-height:64px}
.gm-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.gm-tl{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:14px;background:var(--bg);border:1px solid var(--border)}
.gm-tl span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.gm-tl b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.gm-tl.dm{background:var(--violet-panel);border-color:var(--violet-line)}
.gm-tl.dm span{color:var(--violet)}
.gm-book{display:flex;flex-direction:column}
.gm-row{display:flex;align-items:center;gap:10px;min-height:52px;width:100%;padding:0;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left}
button.gm-row{cursor:pointer}
.gm-row:last-child{border-bottom:0}
.gm-row.off{opacity:.45}
.gm-thumb{width:44px;flex:none;margin:-4px 0}
.gm-thumb .ss{width:44px}
.gm-thumb.grey .ss{filter:grayscale(1) brightness(.8)}
.gm-thumb.sil .ss{filter:brightness(0) drop-shadow(0 0 3px rgba(255,255,255,.6))}
.gm-row.secret{opacity:.8}
.gm-bnm{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:84px;flex:none;min-width:0}
.gm-bnm b{font-size:14px;font-weight:700;max-width:100%;line-height:1.15;overflow-wrap:anywhere}  /* long names (Baby Mammoth, Stone Golem) wrap instead of running into the dots (C2) */
.gm-r{font-size:10px;font-weight:800;letter-spacing:.08em}
.gm-dots{display:flex;flex-wrap:nowrap;gap:3px;flex:1;align-items:center;min-width:0}
.gm-dt{width:9px;height:9px;border-radius:50%;border:1px solid var(--ctl);box-sizing:border-box;flex:none}
.gm-dt.on{border-color:transparent}
.gm-dmb{flex:none}
.gm-ct{font-size:12px;font-weight:700;color:var(--muted);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.gm-ct.dm{color:var(--violet)}
.gm-why{flex:1;font-size:12px;color:var(--muted)}
.gm-crow{min-height:44px}
.gm-crow .gm-bnm{width:118px}
/* the shop (Games stage 4, v0.1.59) */
.gm-buysheet>*{flex:none}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gm-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 12px 12px;border-radius:18px;background:var(--bg);border:1px solid var(--border);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.gm-card.own{border-color:var(--green-line)}
.gm-lock{cursor:default;background:var(--bg);border-style:dashed}
.gm-sil .ss{filter:brightness(0) drop-shadow(0 0 3px rgba(255,255,255,.6))}
.gm-cth{align-self:center;width:96px;height:92px;overflow:hidden;margin:-4px 0 -6px}
.gm-cth .ss{width:96px}
.gm-egg{align-self:center;height:86px;display:flex;align-items:center}
.gm-cnm{font-size:14px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-price{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.gm-card .gm-dots{flex:none;margin-top:3px}
.gm-or{color:var(--faint);font-weight:600;margin:0 1px}
.gm-own{color:var(--green);font-size:12px}
.gm-cnote{font-size:11px;color:var(--faint);font-weight:600}
/* starter-price eggs (A52): the usual price struck through above the half price, and how many are left */
.gm-stp-was{font-size:11px;font-weight:600;color:var(--faint);text-decoration:line-through;margin-top:2px}
.gm-stp-was+.gm-price{margin-top:0}
.gm-stp-was svg{opacity:.7}
.gm-cnote.gm-stp{color:var(--accent)}
.gm-gemtile{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 16px;border-radius:18px;background:var(--violet-panel);border:1px solid var(--violet-line);font-size:13px;color:var(--muted)}
.gm-gemtile b{font-size:17px;color:var(--fg)}
/* Double it after a solo game (A38): one ad pays that game's coins again */
.btn.gm-dbl .gm-dbl-ck{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;border-radius:50%;background:var(--green);color:#0B2A17;font-size:11px;font-weight:900}
@media (prefers-reduced-motion:no-preference){.gm-dbl-ck{animation:gm-dbl-ck .35s cubic-bezier(.3,1.6,.5,1)}}
@keyframes gm-dbl-ck{from{transform:scale(0)}to{transform:scale(1)}}
/* (A68 item 6) Type a time: the row under a "before" list */
.lp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:6px 0 4px}
.lp-row[hidden]{display:none}
.lp-row .lp-n{width:80px;text-align:center}
.lp-row .lp-ok{min-height:40px;padding:0 16px}
.lp-row .lp-err{flex-basis:100%;text-align:right;color:var(--gold)}
/* (A68) the coins counting up at the top of a game's page after Double it, and the +50 that flies there */
.gm-dblc{position:fixed;z-index:60;top:calc(64px + env(safe-area-inset-top,0px));right:max(14px,calc(50vw - 266px));background:var(--tile-2);border-color:color-mix(in srgb,#F5C451 40%,var(--border));box-shadow:0 6px 20px rgba(0,0,0,.45);pointer-events:none}
.gm-dblf{position:fixed;z-index:61;font-weight:800;font-size:15px;color:#F5C451;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
.btn.gm-dbl{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:38px;padding:7px 12px;font-size:13px;background:var(--violet-panel);border:1px solid var(--violet-line);color:var(--fg)}
.gm-dbl-n{font-size:13px;font-weight:600;color:var(--muted)}
.btn.gm-dbl.gm-dbl-done,.btn.gm-dbl.gm-dbl-done:disabled{background:color-mix(in srgb,var(--green) 13%,var(--tile));border-color:var(--green-line);color:var(--green);opacity:1;cursor:default}
.gm-dbl-done .gm-dbl-n{color:var(--green)}
/* gems (A38): an ad for a gem, the starter pack, the packs (classes gm-gp-) */
.gm-gp-row{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--bg);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left;cursor:pointer;min-height:56px}
.gm-gp-row .grow{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.gm-gp-row .grow b{font-size:15px}
.gm-gp-row .grow span{font-size:12.5px;color:var(--muted)}
.gm-gp-row:disabled{cursor:default;opacity:.6}
.gm-gp-play{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--violet-panel);border:1px solid var(--violet-line);color:var(--fg)}
.gm-gp-star{background:var(--violet-panel);border-color:var(--violet-line)}
.gm-gp-star svg{flex:none}
.gm-gp-usd{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.gm-gp-pack{align-items:center;text-align:center;gap:4px;padding:14px 12px}
.gm-gp-pack .gm-gp-usd{font-size:14px;color:var(--muted)}
.gm-gp-pack:disabled,.gm-gp-row[data-gm-gp]:not([data-gm-gp="ad"]):disabled{opacity:.6;cursor:progress}
.gm-buysheet{gap:10px;max-width:420px}
.gm-buysheet .sheet-head{margin-bottom:-36px;position:relative;z-index:1}
.gm-ystage{align-self:center;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.gm-ystage .ss{width:170px}
.gm-yc{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.gm-yc h2{margin:0;font-size:20px}
.gm-buysheet #gm-y-note{text-align:center;margin:0}
.gm-ybtns{display:flex;flex-direction:column;gap:8px}
.gm-ybtns .btn{width:100%}
.gm-ybtns .note{text-align:center}
.gm-pay{display:flex;flex-direction:column;gap:4px}
.gm-pay .btn:disabled{opacity:.45;cursor:default;filter:none}
.gm-need{font-size:12px;color:var(--gold);text-align:center}
/* the nest and journeys (Games stage 5, v0.1.66) */
.gm-eslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.gm-eslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:132px;padding:10px 6px;border-radius:18px;background:var(--bg);border:1px solid var(--border);color:inherit;font:inherit;text-align:center;cursor:pointer}
.gm-eslot b{font-size:13px;font-weight:700}
.gm-eslot span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gm-eslot.empty{border-style:dashed;color:var(--faint);background:none}
.gm-eslot.empty span{color:var(--faint);font-size:11px}
.gm-eslot.ready{background:var(--gold-panel);border-color:var(--gold);cursor:default}
.gm-eslot.ready b{color:var(--gold-text)}
/* egg storage in the Nest (A42; classes gm-nst-) */
.gm-nst{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:12px;border-radius:18px;background:var(--tile);border:1px solid var(--border)}
.gm-nst-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.gm-nst-top b{font-size:15px}
.gm-nst-fill{flex:none}
.gm-nst-eggs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.gm-nst-egg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:inherit;font:inherit;cursor:pointer}
.gm-nst-egg span{font-size:11px;color:var(--muted)}
.gm-nst-egg.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gm-nst-pick{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;background:var(--tile-2)}
.gm-nst-pick .note{margin:0}
.gm-nst-shop{align-self:flex-start}
.gm-nst p{margin:0}
.gm-eslot.gm-nst-lock{border-style:dashed;background:none;color:var(--muted);opacity:.85}
.gm-eslot.gm-nst-lock b{color:var(--gold-text)}
.gm-hatch{height:36px;padding:0 16px;border:0;border-radius:12px;background:var(--gold);color:var(--gold-ink);font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.gm-bar{display:block;width:80%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.gm-bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.gm-trip .gm-bar{width:100%;margin-top:5px}
.gm-eggnote{margin:0}
.gm-trips{display:flex;flex-direction:column;gap:8px}
.gm-trips .note{margin:0}
.gm-trip{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:18px;background:var(--bg);border:1px solid var(--border)}
.gm-trip.back{background:var(--gold-panel);border-color:var(--gold)}
.gm-trip .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.gm-trip b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-tth{width:48px;height:48px;flex:none;overflow:hidden;margin:-6px 0}
.gm-tth .ss{width:48px}
.gm-tsub{font-size:12px;color:var(--gold-text)}
.gm-tleft{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.gm-collect{min-height:38px;padding:8px 14px;background:var(--gold);color:var(--gold-ink);flex:none}
.gm-send{display:flex;flex-direction:column;gap:10px;padding:14px}
.gm-send .note{margin:0}
.gm-sendt{font-size:15px}
.gm-ups{display:flex;flex-direction:column;gap:8px}
.gm-up{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:10px 14px;border-radius:16px;background:none;border:1px dashed var(--border);font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;text-align:left}
.gm-up .gm-price{margin:0;color:var(--fg)}
/* Shop, Collection, Nest and Journeys are full-screen pages (v0.1.67, Hunter: "they have the full screen") */
.gm-pgbar{gap:8px}
.gm-pgbar .gm-wallet{flex-wrap:nowrap}
.gm-back{display:flex;align-items:center;gap:4px;flex:none;min-height:44px;margin-left:-8px;padding:0 8px;border:0;border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.gm-back:hover{color:var(--fg)}
/* (A68) on a narrow phone a bar with the wallet keeps only the back arrow, so the wallet's pills keep their size */
@media (max-width:380px){.gm-pgbar:has(.gm-wallet) .gm-back{font-size:0;width:44px;justify-content:center}.gm-pgbar:has(.gm-wallet) .gm-back svg{width:20px;height:20px}}
.gm-pgbody{gap:12px}
.gm-pgbody>*{flex:none}
.gm-pgh{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.gm-pgsub{margin:-6px 0 0}
.gm-pgbody .label{margin-top:6px}
.gm-card.gm-full>:not(.gm-price){opacity:.55}   /* dimmed, but the note saying why stays readable (A34) */
.gm-card.gm-full .gm-cnote{color:var(--muted)}
/* spirits away on a journey stay home asleep; spirits make Glow (v0.1.71) */
.gm-mate.gm-away{opacity:.7}
/* Play and the daily puzzle (Games stage 6, v0.1.73) */
.gm-gbar{display:flex;flex-direction:column;gap:6px}
.gm-gbarrow{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.gm-gbarrow b{color:var(--fg);font-variant-numeric:tabular-nums}
.gm-gbarbar{width:100%}
.gm-gbarbar i{background:var(--gold)}
/* the Daily word's stats (A53) */
.wds{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:6px;text-align:left}
.wds-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.wds .wds-num{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;color:var(--fg)}
.wds-num b{font-size:22px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.wds-num i{font-style:normal;font-size:11px;line-height:1.2;color:var(--muted)}
.wds-h{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wds-bars{display:flex;flex-direction:column;gap:4px}
.wds-row{display:flex;align-items:center;gap:8px}
.wds-k{width:12px;font-style:normal;font-size:13px;font-weight:700;color:var(--fg);text-align:center}
.wds-track{flex:1;min-width:0}
.wds-bar{display:block;min-width:22px;padding:1px 7px;border-radius:5px;background:var(--ctl-2);color:var(--fg);font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;box-sizing:border-box}
.wds-bar.on{background:var(--wd-yes);color:var(--wd-ink)}
.gm-p-how{display:block;margin-top:6px;padding:4px 0;min-height:32px;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.gm-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border-radius:22px;background:var(--acc-panel);border:1px solid var(--acc-line);overflow:hidden}
.gm-herotag{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent-ink);background:var(--accent);padding:4px 8px;border-radius:999px}
.gm-herotag.done{background:var(--green)}
.gm-herot{font-size:20px;font-weight:700}
.gm-heros{font-size:13px;color:var(--muted);max-width:calc(100% - 110px)}
.gm-herostreak{font-size:12px;color:var(--faint)}
.gm-go{min-height:40px;padding:0 16px;margin-top:4px;border-radius:14px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.gm-game{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--tile);border:1px solid var(--border)}
.gm-game .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.gm-game b{font-size:15px}
.gm-game .grow span{font-size:12px;color:var(--muted)}
.gm-game.soon{opacity:.55;border-style:dashed}
.gm-tv-card{border-color:var(--acc-line)}
.gm-game .grow .gm-tv-cbest{color:var(--accent);font-weight:700}
/* A picture on every Play card (A61): the games under the two daily cards in a grid of cards the same height, each
   with its own picture on a small game table (the theme's table colors). Classes gm-pc-. */
.gm-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.gm-games{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gm-game.gm-pc{flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 12px}
.gm-pc .grow{flex:1}
.gm-pc .grow>span{line-height:1.35}
.gm-pc .gm-go{margin-top:2px;width:100%}
.gm-pc-pic{position:relative;display:grid;place-items:center;height:88px;border-radius:13px;overflow:hidden;cursor:pointer;
  background:radial-gradient(60% 70% at 50% 45%,var(--tb-glow) 0%,var(--tb-glow2) 55%,transparent 100%),radial-gradient(90% 90% at 50% 40%,var(--tb-a) 0%,var(--tb-b) 100%);border:1px solid color-mix(in srgb,var(--hot) 16%,transparent)}
.gm-pc-pic .ss,.gm-pc-pic .ss *{animation:none!important;transition:none!important}
/* Light path */
.gm-pc-path{height:68px;width:auto;overflow:visible}
.gm-pc-path rect{fill:color-mix(in srgb,var(--fg) 7%,transparent);stroke:color-mix(in srgb,var(--fg) 12%,transparent);stroke-width:.8}
.gm-pc-path path{fill:none;stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:4.4}
.gm-pc-path circle{fill:color-mix(in srgb,var(--fg) 30%,transparent)}
.gm-pc-path .on path{stroke:var(--accent);stroke-width:5}.gm-pc-path .on circle{fill:var(--accent)}
.gm-pc-path .on path,.gm-pc-path .on circle{filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--hot) 80%,transparent))}
.gm-pc-path .gm-pc-src{fill:var(--hot-lite);filter:drop-shadow(0 0 4px var(--hot))}
.gm-pc-path .gm-pc-dst{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold))}
/* Light them all */
.gm-pc-orbs{display:grid;grid-template-columns:repeat(3,19px);gap:5px}
.gm-pc-orbs i{width:19px;height:19px;border-radius:50%;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);box-sizing:border-box}
.gm-pc-orbs i.on{border-color:transparent;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--hot-lite) 40%,#fff),var(--accent) 50%,color-mix(in srgb,var(--hot) 70%,#000));box-shadow:0 0 9px color-mix(in srgb,var(--hot) 60%,transparent)}
/* Kindling Match */
.gm-pc-m3{display:grid;grid-template-columns:repeat(3,32px);gap:3px}
.gm-pc-m3 i{position:relative;display:block;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.gm-pc-m3 i.on{background:color-mix(in srgb,var(--hot) 26%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--hot) 55%,transparent),0 0 10px color-mix(in srgb,var(--hot) 40%,transparent)}
/* Flow */
.gm-pc-flow{width:68px;height:68px}
.gm-pc-flow rect{fill:color-mix(in srgb,var(--fg) 6%,transparent)}
.gm-pc-flow polyline{fill:none;stroke-width:.28;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
/* Play with friends: a chat bubble and two dice */
.gm-pc-fr{position:relative;display:block;width:110px;height:64px}
.gm-pc-fr svg{position:absolute;left:0;top:2px;width:62px;height:47px}
.gm-pc-fr path{fill:color-mix(in srgb,var(--fg) 14%,transparent)}
.gm-pc-fr circle{fill:var(--fg);opacity:.75}
.gm-pc-fr .fr-gp{position:absolute;left:38px;top:4px}
.gm-tv-best{font-size:13px;font-weight:700;color:var(--accent)}
.gm-tv-board{display:flex;flex-direction:column;gap:10px}
.gm-tv-pick{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.gm-tv-pick select{min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:var(--ctl-soft);color:var(--fg);font:inherit;font-weight:700;font-size:15px}
.gm-tv-arw{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--ctl-soft);color:var(--fg);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.gm-tv-arw:disabled{opacity:.35;cursor:default}
.gm-tv-foes{display:flex;flex-direction:column;gap:8px;padding:12px 10px;border-radius:18px;background:var(--tile-2)}
.gm-tv-foes .fgc-u{cursor:default}
.gm-tv-tip{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.gm-tv-tip b{color:var(--fg)}
.gm-tv-mine{margin-top:4px}
.gm-tv-hint{text-align:center;margin:12px 0 0}
.gm-tv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gm-tv-btns .btn{flex:1}
/* (whole-app check, Nov 4) a Tower's Start over on its own slim line, so Start floor N and Auto play keep one line each */
.gm-tv-btns .btn[data-tv="restart"]{flex:1 1 100%;order:3;min-height:34px;height:34px;padding:0 12px;font-size:13px}
.gm-tv-btns .btn.tw-rsarm{color:var(--gold-text);box-shadow:inset 0 0 0 1.5px var(--gold)}
.gm-tv-btns .gm-tv-wide,.gm-tv-btns .gm-dbl,.gm-tv-btns .gm-rk{flex-basis:100%}
.gm-pzstreak{font-size:14px;font-weight:700}
.gm-puzbody{align-items:stretch}
.gm-pzbar{display:flex;align-items:center;font-size:14px;color:var(--muted);max-width:420px;width:100%;margin:0 auto}
.gm-pzbar b{color:var(--fg)}
.gm-pgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;max-width:420px;margin:0 auto}
.gm-orb{aspect-ratio:1;border-radius:50%;border:1px solid var(--border);background:var(--tile);cursor:pointer;padding:0;transition:background .15s,box-shadow .15s}
.gm-orb.on{background:radial-gradient(circle at 40% 35%,#E8F8FF,#5CC8FF 55%,#1A6E99);border-color:transparent;box-shadow:0 0 14px rgba(92,200,255,.55)}
.gm-orb.hint{outline:3px solid var(--gold);outline-offset:3px}
.gm-orb:disabled{cursor:default}
.gm-pzbtns{display:flex;gap:8px;max-width:420px;width:100%;margin:0 auto}
.gm-pzbtns .btn{flex:1;padding:10px 8px}
.gm-pzbtns .btn:disabled{opacity:.4;cursor:default}
.gm-pzdone{display:flex;flex-direction:column;gap:4px;padding:14px;max-width:420px;width:100%;margin:0 auto;text-align:center}
.gm-pzdone span{font-size:13px;color:var(--muted)}
.gm-pzbar .grow{flex:1}
.gm-pzdone .btn{margin:6px 0 2px}
/* Kindling Match (A23): the goal and moves, the board (tiles are buttons that slide into place), and the pops,
   sparkles, beams and rings (spans on the board that remove themselves) */
.m3-body{gap:10px}
.m3-top{display:flex;align-items:center;gap:10px;max-width:420px;width:100%;margin:0 auto}
.m3-goal{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.m3-g{display:flex;align-items:center;gap:6px;font-size:15px;font-variant-numeric:tabular-nums}
.m3-g b i{font-style:normal;font-weight:500;color:var(--muted)}
.m3-g.ok b{color:var(--green)}
.m3-gi{width:28px;height:28px;flex:none;display:grid;place-items:center;font-size:18px;color:var(--gold)}
.m3-gi .m3-f{width:28px;height:28px}
.m3-gice{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,rgba(200,236,255,.9),rgba(110,180,235,.7));box-shadow:inset 0 0 0 2px rgba(235,250,255,.9)}
.m3-gbar{width:72px;height:6px;border-radius:3px;background:var(--ctl-soft);overflow:hidden}
.m3-gbar i{display:block;height:100%;background:var(--gold);transition:width .3s}
.m3-best{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.m3-moves{flex:none;display:flex;flex-direction:column;align-items:center;min-width:58px;padding:4px 8px;border-radius:14px;background:var(--tile);border:1px solid var(--border)}
.m3-moves b{font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.m3-moves span{font-size:11px;color:var(--muted)}
.m3-wrap{position:relative;width:100%;max-width:420px;margin:0 auto}
/* A63: stars by points: the points bar under the goal, its marks at the 2- and 3-star points (one height always) */
.m3-smr{display:flex;align-items:flex-end;gap:10px;width:100%;max-width:420px;height:24px;margin:-6px auto -2px;box-sizing:border-box}
.m3-smrb{position:relative;flex:1;height:8px;margin-bottom:5px;border-radius:9px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--border)}
.m3-smrb>i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,var(--hot-lite),var(--gold));transition:width .25s ease-out}
.m3-smrm{position:absolute;bottom:100%;transform:translateX(-50%);margin-bottom:1px;font-size:11px;line-height:1;letter-spacing:-.05em;color:var(--faint);white-space:nowrap}
.m3-smrm::after{content:'';position:absolute;left:50%;top:calc(100% + 1px);width:2px;height:10px;margin-left:-1px;border-radius:1px;background:currentColor}
.m3-smrm.on{color:var(--gold)}
.m3-smrn{flex:none;min-width:64px;text-align:right;font-size:14px;line-height:18px;font-weight:800;font-variant-numeric:tabular-nums}
/* A63 (Hunter: "Next after a win needs scrolling"): the end of a level lies over the finished board, so Next level is
   in reach on one phone screen (360 × 780) without scrolling; anything more scrolls inside it */
.m3-wrap>.m3-over{position:absolute;inset:0;z-index:3;max-width:none;margin:0;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;border-radius:16px}
/* (v0.4.10, Hunter: "very hard to read": the puzzle tables' see-through card style won over this one, so the tiles showed
   through the words; now nearly solid, the board only a faint blur behind) */
#gm-m3 .m3-wrap>.m3-over{background:color-mix(in srgb,var(--bg) 94%,transparent);border-color:var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.m3-wrap>.m3-over[hidden]{display:none}
.m3-wrap>.m3-over .btn{margin:4px 0 0}
/* A63: a power going off on its own: the Kindling flashes (finite) */
.m3-tm.m3-fire{animation:m3-fire .55s ease-out}
@keyframes m3-fire{0%{transform:scale(1)}35%{transform:scale(1.06);box-shadow:0 0 0 3px var(--gold),0 0 22px color-mix(in srgb,var(--gold) 70%,transparent)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.m3-tm.m3-fire{animation:none}}
/* A63: the tutorial (#m3-tut): one page a step, every step the same height so nothing jumps */
.sheet-wrap.m3t-w{z-index:41}
.m3t{display:flex;flex-direction:column}
.m3t-body{flex:1;min-height:340px;display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.m3t-body h3{margin:0;font-size:20px;font-weight:800}
.m3t-body p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
.m3t-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--tile);border:1px solid var(--border)}
.m3t-row b{display:block;font-size:15px}
.m3t-row span{color:var(--muted);font-size:13px}
.m3t-pic{flex:none;width:44px;height:44px;display:grid;place-items:center}
.m3t-pic svg,.m3t-pic img{width:44px;height:44px}
.m3t-tiles{display:flex;gap:8px;justify-content:center;padding:6px 0}
.m3t-tiles span{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--tile-2)}
.m3t-sw{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:14px;border:1px solid var(--gold-line);background:var(--gold-panel);font-weight:700}
.m3t-sw input{width:20px;height:20px;accent-color:var(--accent)}
.m3t-dots{display:flex;justify-content:center;gap:6px;padding:10px 0}
.m3t-dots i{width:7px;height:7px;border-radius:50%;background:var(--border)}
.m3t-dots i.on{background:var(--accent)}
.m3t-foot{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.m3t-foot .btn[disabled]{visibility:hidden}
.m3-board{position:relative;width:100%;aspect-ratio:1;border-radius:16px;background:var(--tile-2);border:1px solid var(--border);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.m3-board.m3-off .m3-t{cursor:default}
.m3-defs{position:absolute;width:0;height:0}
.m3-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr)}
.m3-cells i{margin:1px;border-radius:8px;background:color-mix(in srgb,var(--fg) 4%,transparent);transition:background .3s,box-shadow .3s}
.m3-cells .m3-ice{background:linear-gradient(135deg,rgba(190,230,255,.55),rgba(120,190,240,.35));box-shadow:inset 0 0 0 1.5px rgba(220,245,255,.75)}
.m3-cells .m3-ice2{background:linear-gradient(135deg,rgba(205,238,255,.85),rgba(110,180,235,.65));box-shadow:inset 0 0 0 3px rgba(235,250,255,.95)}
.m3-t{position:absolute;left:0;top:0;width:calc(100% / var(--n));height:calc(100% / var(--n));padding:3px;border:0;border-radius:10px;background:none;cursor:pointer;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%));transition:transform 330ms cubic-bezier(.45,.05,.55,1.18);-webkit-tap-highlight-color:transparent}
.m3-f{position:relative;display:block;width:100%;height:100%;transition:transform .15s}
.m3-in{position:absolute;inset:0;display:block;overflow:hidden;border-radius:9px}
.m3-in>svg,.m3-ov{position:absolute;inset:0;display:block;width:100%;height:100%}
.m3-ov{pointer-events:none;overflow:visible}
.m3-small{transform:scale(.8);border-radius:50%}
.m3-in>.ss{position:absolute;inset:0;width:100%;height:100%}
.m3-in .ss,.m3-in .ss *{animation:none!important;transition:none!important}
.m3-in .m3-rx{opacity:.55}
/* Lunar's tiles a little brighter, so they stand apart from the others by brightness and not only color (A55) */
.m3-lun .m3-in>.ss{filter:brightness(1.45) saturate(.6)}
.m3-t.m3-on{background:color-mix(in srgb,var(--gold) 22%,transparent);box-shadow:inset 0 0 0 2px var(--gold)}
.m3-t.m3-on .m3-f{transform:scale(1.12)}
.m3-t:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.m3-pop .m3-f{animation:m3-pop .26s ease-in forwards}
.m3-born .m3-f{animation:m3-born .45s ease-out}
.m3-hint .m3-f{animation:m3-wig .9s ease-in-out 3}
.m3-spin{transform-origin:20px 20px;animation:m3-spin 5s linear infinite}
.m3-glint{animation:m3-tw 1.4s ease-in-out infinite}
@keyframes m3-pop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(0);opacity:0}}
@keyframes m3-born{0%{transform:scale(.6)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes m3-wig{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
@keyframes m3-spin{to{transform:rotate(360deg)}}
@keyframes m3-tw{0%,100%{opacity:.3}50%{opacity:1}}
.m3-board>span{position:absolute;pointer-events:none}
.m3-spk,.m3-pts{left:calc(var(--c) * 100% / var(--n));top:calc(var(--r) * 100% / var(--n));width:calc(100% / var(--n));height:calc(100% / var(--n))}
.m3-spk i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:hsl(var(--h),var(--hs,100%),76%);box-shadow:0 0 6px hsl(var(--h),var(--hs,100%),62%);animation:m3-spk .55s ease-out forwards}
.m3-spk i:nth-child(2){--a:60deg}.m3-spk i:nth-child(3){--a:120deg}.m3-spk i:nth-child(4){--a:180deg}.m3-spk i:nth-child(5){--a:240deg}.m3-spk i:nth-child(6){--a:300deg}
@keyframes m3-spk{0%{transform:rotate(var(--a,0deg)) translateX(0) scale(1);opacity:1}100%{transform:rotate(var(--a,0deg)) translateX(26px) scale(.2);opacity:0}}
.m3-pts{z-index:3;display:grid;place-items:center;animation:m3-up .9s ease-out forwards}
.m3-pts{font-size:15px;font-weight:800;color:var(--fg);white-space:nowrap}
.m3-pts::before{content:'';position:absolute;inset:25% -10%;z-index:-1;border-radius:10px;background:color-mix(in srgb,var(--bg) 72%,transparent)}
@keyframes m3-up{0%{transform:translateY(0) scale(.7);opacity:0}20%{transform:translateY(-6px) scale(1.1);opacity:1}100%{transform:translateY(-34px) scale(1);opacity:0}}
.m3-beam-h{left:0;right:0;top:calc(var(--r) * 100% / var(--n));height:calc(100% / var(--n));transform-origin:calc((var(--c) + .5) * 100% / var(--n)) 50%;background:linear-gradient(90deg,transparent,hsl(var(--h),var(--hs,100%),82%) 20%,#fff 50%,hsl(var(--h),var(--hs,100%),82%) 80%,transparent);animation:m3-bh .5s ease-out forwards}
.m3-beam-v{top:0;bottom:0;left:calc(var(--c) * 100% / var(--n));width:calc(100% / var(--n));transform-origin:50% calc((var(--r) + .5) * 100% / var(--n));background:linear-gradient(180deg,transparent,hsl(var(--h),var(--hs,100%),82%) 20%,#fff 50%,hsl(var(--h),var(--hs,100%),82%) 80%,transparent);animation:m3-bv .5s ease-out forwards}
@keyframes m3-bh{0%{transform:scale(0,.5);opacity:1}40%{transform:scale(1,.7);opacity:1}100%{transform:scale(1,.1);opacity:0}}
@keyframes m3-bv{0%{transform:scale(.5,0);opacity:1}40%{transform:scale(.7,1);opacity:1}100%{transform:scale(.1,1);opacity:0}}
.m3-ring{left:calc((var(--c) + .5) * 100% / var(--n));top:calc((var(--r) + .5) * 100% / var(--n));width:calc(500% / var(--n));aspect-ratio:1;border-radius:50%;border:3px solid hsl(var(--h),var(--hs,100%),80%);box-shadow:0 0 18px hsl(var(--h),var(--hs,100%),66%),inset 0 0 18px hsl(var(--h),var(--hs,100%),66%);transform:translate(-50%,-50%) scale(.2);animation:m3-ring .55s ease-out forwards}
@keyframes m3-ring{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.m3-flash{inset:0;background:radial-gradient(circle,hsl(var(--h),var(--hs,100%),84%) 0,transparent 72%);animation:m3-flash .6s ease-out forwards}
@keyframes m3-flash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
.m3-board>.m3-cheer{left:50%;top:42%;z-index:4;padding:6px 18px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:22px;font-weight:800;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4);transform:translate(-50%,-50%);animation:m3-cheer .9s ease-out forwards}
.m3-board>.m3-mix{font-size:16px;animation-duration:1s}
@keyframes m3-cheer{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}20%{transform:translate(-50%,-50%) scale(1.12);opacity:1}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-75%) scale(1);opacity:0}}
.m3-shake{animation:m3-shake .4s ease-out}
@keyframes m3-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}
.m3-board>.m3-frenzy{top:30%;padding:8px 20px;font-size:24px;background:linear-gradient(90deg,#C2321A,#9A5A00,#2A7A16,#1266B0,#6230C8,#B02A64);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);animation-duration:1.4s}
.m3-hdbox{display:flex;align-items:center;gap:10px;max-width:420px;width:100%;margin:0 auto;padding:8px 12px;border-radius:14px;background:var(--gold-panel);border:1px solid var(--gold-line);font-size:13px;color:var(--fg)}
.m3-hdbox b{color:var(--gold-text);margin-right:4px}
.m3-pzegg{flex:none;width:30px;height:30px}
.m3-hdbox.m3-hardn{background:var(--violet-panel);border-color:var(--violet-line)}
.m3-hardn b{color:var(--violet)}
.m3-hdtag{flex:none;padding:3px 8px;border-radius:999px;background:var(--violet);color:var(--bg);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.m3-team{display:flex;flex-wrap:wrap;gap:6px;max-width:420px;width:100%;margin:0 auto}
.m3-tm{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;min-height:46px;padding:5px 6px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.m3-tm.m3-ready{border-color:var(--gold);background:var(--gold-panel)}
.m3-tm:focus-visible,.m3-pk:focus-visible,.m3-tmc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.m3-tmp{flex:none;position:relative;width:34px;height:34px;padding:3px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,0) * 1%),var(--ctl-soft) 0)}
.m3-pk .m3-tmp{width:44px;height:44px;background:var(--ctl-soft)}
.m3-tmp>.ss,.m3-gboss>.ss{position:relative;display:block;width:100%!important;height:100%;border-radius:50%;overflow:hidden;background:var(--tile-2)}
.m3-tmp .ss,.m3-tmp .ss *,.m3-gboss .ss,.m3-gboss .ss *{animation:none!important;transition:none!important}
.m3-ready .m3-tmp{animation:m3-ready 1.2s ease-in-out infinite}
@keyframes m3-ready{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 0%,transparent)}}
.m3-tmt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.m3-tmt b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-tmt span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-ready .m3-tmt span{color:var(--gold-text);font-weight:700}
.m3-tmc{flex-basis:100%;min-height:30px;padding:2px 0;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.m3-tmc-off{visibility:hidden;pointer-events:none}
.m3-pick{display:flex;flex-direction:column;gap:8px;max-width:420px;width:100%;margin:0 auto;padding:10px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.m3-pkh{margin:0}
.m3-pkl{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.m3-pk{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 4px;border-radius:14px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;font-size:12px;cursor:pointer}
.m3-pk b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-pk span:last-child{font-size:11px;color:var(--muted)}
.m3-pk.on{border-color:var(--accent);background:var(--acc-tint)}
.m3-gb{flex:1;min-width:0}
.m3-gbw{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.m3-gbw b{font-size:14px}
.m3-hp{width:100%;height:8px}
.m3-hp i{background:var(--violet)}
.m3-gboss{width:34px;height:34px}
.m3-gboss>.ss{filter:brightness(.6) saturate(.75);box-shadow:0 0 0 2px var(--violet)}
.gm-pzdone .m3-chest{color:var(--gold-text);font-weight:700}
.gm-pzdone .m3-next{font-size:12px;color:var(--faint)}
.m3-radt .m3-in{box-shadow:inset 0 0 0 1.5px #FFE08A,0 0 10px rgba(255,214,120,.55)}
.m3-radt::after{content:'';position:absolute;inset:0;border-radius:9px;background:linear-gradient(115deg,transparent 35%,rgba(255,244,205,.55) 50%,transparent 65%);background-size:250% 100%;animation:m3-sheen 1.8s linear infinite;pointer-events:none}
@keyframes m3-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.m3-hit .m3-f{animation:m3-shk .3s ease-out}
@keyframes m3-shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-6deg)}75%{transform:translateX(3px) rotate(6deg)}}
.m3-board>.m3-hatch{width:calc(700% / var(--n));border-width:4px}
.m3-board>.m3-crk{width:calc(160% / var(--n));border-width:2px}
.m3-loot{left:calc(var(--c) * 100% / var(--n));top:calc(var(--r) * 100% / var(--n));z-index:5;transform:translateX(-25%);padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:14px;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45);animation:m3-up 1.6s ease-out forwards}
.m3-board>.m3-bossy{background:#2A1640;color:#EBDDFF;font-size:18px}
.m3-board>.m3-pow{top:9%;padding:4px 14px;background:var(--accent);color:var(--accent-ink);font-size:15px;max-width:92%;white-space:normal;text-align:center;animation-duration:.75s}
@media (prefers-reduced-motion: reduce){.m3-radt::after,.m3-ready .m3-tmp,.m3-hit .m3-f{animation:none}.m3-t{transition:none}.m3-hint .m3-f,.m3-born .m3-f,.m3-spin,.m3-glint{animation:none}}
/* the Daily word, Light path, and Light them all levels (Games stage 6, v0.1.76) */
.gm-herotiles{position:absolute;right:14px;top:18px;display:grid;grid-template-columns:repeat(5,20px);gap:4px}
.gm-herotiles i{width:20px;height:20px;border-radius:5px;background:var(--tile-2);border:1px solid var(--ctl);font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;color:var(--faint)}
.gm-herotiles i.yes{background:var(--wd-yes);border-color:var(--wd-yes);color:var(--wd-ink)}
.gm-herotiles i.near{background:var(--wd-near);border-color:var(--wd-near);color:var(--wd-ink)}
.gm-heros{max-width:calc(100% - 130px)}
.gm-wbody{align-items:stretch}
.gm-wlegend{display:flex;gap:14px;justify-content:center;font-size:12px;color:var(--muted)}
.gm-wlegend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px;background:var(--ctl-soft)}
.gm-wlegend i.yes{background:var(--wd-yes)}.gm-wlegend i.near{background:var(--wd-near)}.gm-wlegend i.no{background:var(--wd-no)}
.gm-wboard{display:flex;flex-direction:column;gap:6px;align-items:center}
.gm-wrow{display:grid;grid-template-columns:repeat(5,min(52px,15vw));gap:6px}
.gm-wrow.shake{animation:gm-shake .4s}
@keyframes gm-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.gm-wt{height:min(52px,15vw);border-radius:10px;border:1.5px solid var(--ctl);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.gm-wt.typed{border-color:var(--faint)}
.gm-wt.yes{background:var(--wd-yes);border-color:var(--wd-yes);color:var(--wd-ink)}
.gm-wt.near{background:var(--wd-near);border-color:var(--wd-near);color:var(--wd-ink)}
.gm-wt.no{background:var(--wd-no);border-color:var(--wd-no);color:var(--wd-ink)}
.gm-wstatus{min-height:22px;font-size:14px;font-weight:600;color:var(--muted);text-align:center}
.gm-wstatus.win{color:var(--accent)}.gm-wstatus.lose,.gm-wstatus.bad{color:var(--gold)}
.gm-wkb{display:flex;flex-direction:column;gap:6px;max-width:440px;width:100%;margin:0 auto}
.gm-wkr{display:flex;gap:5px;justify-content:center}
.gm-key{flex:1 1 0;min-width:0;max-width:40px;height:52px;border-radius:8px;border:0;background:var(--ctl-soft);color:var(--fg);font:inherit;font-size:15px;font-weight:700;padding:0;cursor:pointer}
.gm-key.wide{max-width:64px;flex-grow:1.6;font-size:12px}
.gm-key.yes{background:var(--wd-yes);color:var(--wd-ink)}.gm-key.near{background:var(--wd-near);color:var(--wd-ink)}.gm-key.no{background:var(--wd-no);color:#7E828B}
.gm-lvl{display:flex;align-items:center;gap:4px}
.gm-lvl b{font-size:14px;min-width:64px;text-align:center}
.gm-lvl .icon-btn:disabled{opacity:.3}
.gm-lgrid{display:grid;gap:6px;align-items:center;width:100%;max-width:440px;margin:0 auto}
.gm-tile{aspect-ratio:1;border-radius:12px;border:1px solid var(--border);background:var(--tile);padding:0;display:block;overflow:hidden;cursor:pointer}
.gm-tile svg{width:100%;height:100%;display:block;transition:transform .18s ease}
.gm-tile path{stroke:var(--ctl);stroke-width:14;fill:none}
.gm-tile circle{fill:var(--ctl)}
.gm-tile.lit{border-color:var(--acc-line);background:var(--acc-panel)}
.gm-tile.lit path{stroke:var(--accent)}.gm-tile.lit circle{fill:var(--accent)}
.gm-tile.lit svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 70%,transparent))}
.gm-tile:disabled{cursor:default}
.gm-end{width:18px;height:18px;border-radius:50%;justify-self:center}
.gm-lbig .gm-end{width:12px;height:12px}.gm-lbig .gm-tile{border-radius:9px}
.gm-end.src{background:radial-gradient(circle at 40% 35%,#fff 0 15%,#5CC8FF 55%);box-shadow:0 0 12px #5CC8FF}
.gm-end.dst{border:2px solid var(--ctl);background:var(--tile)}
.gm-end.dst.on{border-color:var(--gold);background:radial-gradient(circle at 40% 35%,#fff 0 15%,var(--gold) 60%);box-shadow:0 0 14px var(--gold)}
@media (prefers-reduced-motion:reduce){.gm-tile svg{transition:none}.gm-wrow.shake{animation:none}}
/* stars and the levels page (v0.1.77) */
.gm-stars{display:inline-flex;gap:1px;vertical-align:-1px;font-style:normal;letter-spacing:0}
.gm-stars i{font-style:normal;color:var(--ctl);font-size:13px;line-height:1}
.gm-stars i.on{color:var(--gold)}
.gm-stars.big{justify-content:center;gap:6px;margin-bottom:2px}
.gm-stars.big i{font-size:34px;text-shadow:0 0 12px color-mix(in srgb,var(--gold) 35%,transparent)}
.gm-stars.big i:not(.on){text-shadow:none}
.gm-lvlbtn{min-width:72px;min-height:40px;padding:0 6px;border:0;border-radius:10px;background:none;color:var(--fg);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;cursor:pointer}
.gm-lvlink{align-self:flex-start;margin-top:4px;padding:2px 0;border:0;background:none;color:var(--gold);font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:28px}
/* leaderboards from Play (A42): a Leaderboard button, and where you stand among friends on each game */
.gm-rk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gm-rk{align-self:flex-start;margin-top:2px;padding:2px 0;border:0;background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:28px;text-align:left}
.gm-lvacts{display:flex;flex-direction:column;gap:8px}
.gm-lvacts .btn{width:100%}
.gm-lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.gm-lv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:6px 2px;border-radius:14px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;cursor:pointer}
.gm-lv b{font-size:17px}
.gm-lv.full{border-color:var(--gold-line)}
.gm-lv.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gm-lv.new{border-style:dashed}
.gm-lvnew{font-size:11px;font-weight:700;color:var(--accent)}
/* the welcome on first open (v0.1.78) */
.ob-pg{z-index:45}
.ob-body{max-width:460px;justify-content:center;gap:16px;padding-top:calc(24px + env(safe-area-inset-top,0px));min-height:100%;flex:1 0 auto}   /* (Nov 2, the bars audit: flex:1 let "What should I set up?" squeeze below its words, and Back and Skip went under the phone’s bottom bar; it grows and the page scrolls) */
.ob-dots{display:flex;gap:6px;justify-content:center}
.ob-dots i{width:28px;height:4px;border-radius:2px;background:var(--ctl-soft)}
.ob-dots i.on{background:var(--accent)}
.ob-spirit{align-self:center;width:130px;height:130px}
.ob-spirit .ss{width:130px}
.ob-step{display:flex;flex-direction:column;gap:12px}
.ob-h{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;text-align:center}
.ob-p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;text-align:center}
/* the welcome's colors step: every theme as a little picture of itself, three across, all one size; the picked one
   gets a ring (a shadow, so nothing moves) and a check */
.ob-th-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ob-th-c{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px 6px 8px;border:0;border-radius:16px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--border);color:var(--muted);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ob-th-c[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 2px var(--accent)}
.ob-th-pv{position:relative;display:block;height:66px;border-radius:11px;background:var(--b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 14%,transparent);overflow:hidden}
.ob-th-tile{position:absolute;left:8px;right:8px;top:9px;display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:8px;background:var(--t)}
.ob-th-tile b{display:block;width:70%;height:6px;border-radius:3px;background:var(--f)}
.ob-th-tile s{display:block;width:45%;height:5px;border-radius:3px;background:var(--m);opacity:.8}
.ob-th-pv em{position:absolute;right:10px;bottom:9px;width:26px;height:10px;border-radius:5px;background:var(--a)}
.ob-th-n{font-size:13px;font-weight:700;text-align:center}
/* What should I set up? (A72 item 12): tiles to tap, two to a row, a tick on the picked */
.ob-pks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ob-pkt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:92px;padding:10px 34px 10px 11px;border:0;border-radius:16px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--border);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.ob-pkt svg{width:20px;height:20px;color:var(--accent)}
.ob-pkt b{font-size:15px}
.ob-pkt span{font-size:11.5px;line-height:1.3;color:var(--muted)}
.ob-pkt[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--tile));box-shadow:inset 0 0 0 2px var(--accent)}
.ob-pkt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ob-pkc{position:absolute;right:10px;top:10px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--border);display:grid;place-items:center}
.ob-pkt[aria-pressed="true"] .ob-pkc{background:var(--accent);box-shadow:none}
.ob-pkt[aria-pressed="true"] .ob-pkc::after{content:'';width:8px;height:4px;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:translateY(-1px) rotate(-45deg)}
.ob-pk-n{margin:0;text-align:center;font-size:12.5px}
/* the first-time tutorial and the swipe hint (A72 item 12) */
.tu{position:fixed;inset:0;z-index:60}
.tu[hidden],.sw-hint[hidden]{display:none}
.tu-spot{position:fixed;border-radius:28px;box-shadow:0 0 0 3000px rgba(4,3,12,.72);outline:2px solid var(--accent);outline-offset:3px;pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
.tu-card{position:fixed;left:16px;right:16px;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:20px;background:var(--tile);border:1px solid var(--border);color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tu-card b{font-size:17px}
.tu-card p{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.tu-row{display:flex;align-items:center;gap:10px}
.tu-row .grow{flex:1;font-size:12.5px;color:var(--muted)}
.tu-card .btn{height:38px;padding:0 16px}
.tu-k{width:46px;height:46px;flex:none}.tu-k .ss{width:100%!important;height:100%!important}
.sw-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(10,8,20,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sw-hand{display:inline-block;animation:swHand 1.6s ease-in-out infinite}
@keyframes swHand{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
body.np-open .sw-hint,body:not(.td-on) .sw-hint{display:none}   /* (Nov 5: on the other tabs it covered the Kindlings tab’s six buttons and the Clearing’s Your week; Today has the room) */
@media (prefers-reduced-motion:reduce){.sw-hand{animation:none}.tu-spot{transition:none}}
.ob-th-c::after{content:'✓';position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:900;visibility:hidden}
.ob-th-c[aria-pressed="true"]::after{visibility:visible}
.ob-row{display:flex;gap:8px}
.ob-row .field{flex:1;min-width:0}
.ob-row .btn{flex:none}
.ob-step>.btn{width:100%}
.ob-restore{align-self:center;font-size:13px}
.ob-rs{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ob-rs[hidden]{display:none}
.ob-rs-or{margin:6px 0 0;color:var(--muted)}
.ob-step .note{text-align:center;min-height:18px}
.ob-foot{display:flex;align-items:center;min-height:44px}
.ob-foot .grow{flex:1}
.ob-restore{text-align:center}
.gm-ch.gm-chgo{cursor:pointer}
.gm-ch.gm-chgo .grow{color:var(--accent)}
/* More › Theme (v0.1.85): a chip per theme, with its background and accent in a little circle */
.th-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.th-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--tile-2);font-size:14px;font-weight:700;color:var(--muted);text-align:left;cursor:pointer}
.th-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--fg);box-shadow:0 0 0 1px var(--accent) inset}
.th-sw{position:relative;width:24px;height:24px;border-radius:50%;flex:none;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.th-sw i{position:absolute;right:0;bottom:0;width:50%;height:50%}
/* Daylight: the spirits get a soft outline in their own color so they don't fade into white; the dark
   scenes (home, dress-up, Pairs) don't need it */
:root[data-theme="daylight"] .ss svg{filter:drop-shadow(0 0 1.2px hsl(var(--h) 85% 28% / .75)) drop-shadow(0 1px 3px hsl(var(--h) 80% 30% / .35))}
:root[data-theme="daylight"] :is(.gm-home,.gm-stage,.gm-sil,.gm-thumb.sil) .ss svg{filter:none}
/* spirit backgrounds (v0.1.85, public/scenes.js; the tryout's styles with bg- renamed sc-). A scene is a
   stack of .sc-L layers; movement only in the big home scene: thumbnails are still (.sc-still), the home
   scene pauses while the tab is hidden (.sc-paused), and nothing moves with reduced motion */
.sc-L{position:absolute;inset:0}
.sc-floor{position:absolute;left:6%;right:6%;bottom:4%;height:70px;border-radius:50%;background:rgba(92,200,255,.07)}
.sc-star{position:absolute;border-radius:50%;background:#fff;animation:sc-tw 3s ease-in-out infinite}
@keyframes sc-tw{0%,100%{opacity:.25}50%{opacity:1}}
.sc-fly{position:absolute;width:5px;height:5px;border-radius:50%;background:#EFFFA8;box-shadow:0 0 8px 2px rgba(220,255,120,.7);animation:sc-fly 6s ease-in-out infinite}
@keyframes sc-fly{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(14px,-18px);opacity:1}}
.sc-bub{position:absolute;bottom:-12px;border-radius:50%;border:1.5px solid rgba(190,240,255,.55);animation:sc-rise 7s linear infinite}
@keyframes sc-rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-360px);opacity:0}}
.sc-ray{position:absolute;top:-10%;width:18%;height:120%;background:linear-gradient(rgba(170,235,255,.18),transparent 75%);transform-origin:top;animation:sc-sway 8s ease-in-out infinite}
@keyframes sc-sway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 5deg))}}
.sc-mist{position:absolute;left:-30%;width:160%;height:16%;border-radius:50%;background:rgba(220,230,245,.10);filter:blur(10px);animation:sc-drift 18s ease-in-out infinite alternate}
@keyframes sc-drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.sc-cloud{position:absolute;animation:sc-drift 22s ease-in-out infinite alternate}
.sc-cloud i{position:absolute;border-radius:50%;background:rgba(255,255,255,.85)}
.sc-aur{position:absolute;left:-20%;width:140%;height:34%;filter:blur(16px);mix-blend-mode:screen;animation:sc-aur 9s ease-in-out infinite alternate}
@keyframes sc-aur{0%{transform:translateX(-6%) skewY(-6deg) scaleY(.9)}100%{transform:translateX(6%) skewY(4deg) scaleY(1.15)}}
.sc-petal{position:absolute;top:-10px;width:7px;height:5px;border-radius:60% 0;background:#FFB7D5;opacity:.85;animation:sc-fall 9s linear infinite}
@keyframes sc-fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-60px,380px) rotate(540deg)}}
.sc-neb{position:absolute;inset:-30%;animation:sc-spin 120s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-met{position:absolute;width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));transform:rotate(-35deg);opacity:0;animation:sc-met 5s ease-in infinite}
@keyframes sc-met{0%{opacity:0;translate:0 0}4%{opacity:1}14%{opacity:0;translate:-170px 120px}100%{opacity:0;translate:-170px 120px}}
@keyframes sc-pulse{0%,100%{opacity:.75}50%{opacity:1}}
.sc-snow{position:absolute;top:-8px;border-radius:50%;background:#fff;opacity:.85;animation:sc-snow 10s linear infinite}
@keyframes sc-snow{0%{transform:translate(0,0)}50%{transform:translate(12px,180px)}100%{transform:translate(-6px,370px)}}
.sc-lan{position:absolute;bottom:-30px;width:12px;height:16px;border-radius:4px 4px 5px 5px;background:linear-gradient(#FFD27A,#FF8A3D);box-shadow:0 0 12px 4px rgba(255,160,70,.55);animation:sc-up 14s linear infinite}
@keyframes sc-up{0%{transform:translate(0,0);opacity:0}8%{opacity:1}50%{transform:translate(10px,-190px)}90%{opacity:1}100%{transform:translate(-4px,-380px);opacity:0}}
.sc-rain{position:absolute;top:-30px;width:1.2px;height:22px;background:linear-gradient(transparent,rgba(190,210,255,.55));animation:sc-rain 1.1s linear infinite}
@keyframes sc-rain{to{transform:translate(-30px,380px)}}
.sc-shroom{animation:sc-pulse 3s ease-in-out infinite}
/* First Fire (the beta testers' background): the campfire's flames flicker, its glow breathes, sparks rise */
.sc-fire{position:absolute;left:50%;bottom:23%;width:38%;max-width:150px;aspect-ratio:150/130;transform:translateX(-50%)}
.sc-flame{transform-origin:50% 100%;transform-box:fill-box;animation:sc-flick 1.6s ease-in-out infinite}
.sc-flame2{animation-duration:1.1s;animation-delay:-.4s}
@keyframes sc-flick{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.94,1.08) skewX(-3deg)}60%{transform:scale(1.05,.95) skewX(2deg)}}
.sc-fglow{position:absolute;left:50%;bottom:19%;width:88%;max-width:340px;height:26%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,60,.42),rgba(255,110,40,.12) 60%,transparent);animation:sc-pulse 2.6s ease-in-out infinite}
.sc-spark{position:absolute;bottom:27%;width:3px;height:3px;border-radius:50%;background:#FFC27A;box-shadow:0 0 6px 2px rgba(255,140,60,.75);animation:sc-spark 6s ease-in infinite}
@keyframes sc-spark{0%{transform:translate(0,0);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx,12px),-420px);opacity:0}}
/* a still scene has nothing moving. One behind a whole page is drawn once as a photo of its moving pieces (scBake in
   app.js: .sc-baking for one look, then .sc-baked); on small cards the sparks, which would sit in a line at the fire's
   foot, are left out (Oct 25) */
.sc-still:not(.sc-baking) *,.sc-still:not(.sc-baking){animation:none!important}
.sc-still:not(.sc-baked,.sc-baking) .sc-spark{display:none}
.sc-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.sc-wrap:not(.sc-baking) *{animation:none!important}}
/* backgrounds in the Spirits tab (v0.1.85): the scene behind the spirits, the picture button, the picker
   sheet and the shop cards */
.gm-bgl{position:absolute;inset:0;z-index:0;pointer-events:none}
.gm-bgbtn{position:absolute;right:8px;bottom:6px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#F4F5F7;cursor:pointer;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gm-bgbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gm-bgth{position:relative;display:block;width:100%;height:84px;border-radius:11px;overflow:hidden;isolation:isolate;margin-bottom:5px;background:#05060A}
.gm-bgth .sc-floor{height:24px}
.gm-bgcard{padding:6px 6px 10px}
.gm-bgcard .gm-cnm,.gm-bgcard .gm-r,.gm-bgcard .gm-price{padding:0 4px}
.gm-bgcard.gm-bguse{border-color:var(--accent)}
.gm-bgprev{position:relative;display:block;width:min(100%,320px);height:170px;border-radius:14px;overflow:hidden;isolation:isolate;background:#05060A}
.gm-bgsheet{gap:12px;max-height:calc(100dvh - 32px);overflow-y:auto}
.gm-bggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gm-bgpick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 6px 9px;border-radius:16px;background:var(--tile-2);border:1px solid var(--border);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.gm-bgpick[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gm-bgpick .gm-bgth{height:76px}
.gm-bgpick .gm-price{padding:0 4px;min-height:18px}
.gm-bgn{font-size:13px;font-weight:700;padding:0 4px}
.gm-bgoff .gm-bgth{opacity:.45;filter:saturate(.6)}
.gm-bgoff .gm-bgn{color:var(--muted)}
/* words over a bright background stay readable */
.gm-home .gm-cap,.gm-home .gm-nm{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.5)}
.gm-home .gm-cap,.gm-home .gm-nm{color:#E2E5EA}
/* Friends (v0.1.87, stage F1): the profile setup, the Friends page, Add friends and the sheets. All fr- */
.fr-badge{position:absolute;top:5px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:800;line-height:18px;text-align:center}
.fr-av{position:relative;display:block;width:48px;height:48px;border-radius:50%;background:var(--acc-deep);border:1px solid var(--acc-line);overflow:hidden;flex:none}
.fr-av .ss{position:absolute;left:50%;top:2%;width:150%;transform:translateX(-50%)}
.fr-av-me{width:52px;height:52px;border-color:var(--accent)}
.fr-av-big{width:112px;height:112px;border:2px solid var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 25%,transparent)}
.fr-bigme{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 6px;text-align:center}
.fr-form{display:flex;flex-direction:column;gap:8px}
.fr-lbl{font-size:13px;font-weight:700;color:var(--muted)}
.fr-namebox{display:flex;align-items:center;gap:2px;height:52px;padding:0 14px;border-radius:16px;background:var(--tile);border:1.5px solid var(--border)}
.fr-namebox:focus-within{border-color:var(--accent)}
.fr-namebox.ok{border-color:var(--accent)}
.fr-namebox.bad{border-color:var(--gold)}
.fr-namebox input{flex:1;min-width:0;height:48px;border:0;background:none;font-size:17px;font-weight:700;outline:none;color:var(--fg)}
.fr-st{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.fr-namebox.ok .fr-st{color:var(--accent)}
.fr-namebox.bad .fr-st{color:var(--gold)}
.fr-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:600;cursor:pointer}
.fr-check input{width:22px;height:22px;accent-color:var(--accent);margin:0}
.fr-info{display:flex;gap:10px;padding:12px 14px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.fr-info .grow{display:flex;flex-direction:column;gap:3px;font-size:13px}
.fr-lockic{flex:none;color:var(--accent);margin-top:1px}
.fr-err{margin:0;font-size:13px;color:var(--gold)}
.fr-go{min-height:52px;font-size:16px;margin-top:6px}
.fr-acc{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.fr-me{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--tile);border:1px solid var(--border)}
.fr-me .grow{display:flex;flex-direction:column;min-width:0}
.fr-me b{font-size:16px;overflow:hidden;text-overflow:ellipsis}
.fr-addbtn{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font-weight:800}
.fr-reqbar{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:14px;background:var(--gold-panel);border:1px solid var(--gold-line);color:var(--gold-text);font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.fr-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.fr-list{display:flex;flex-direction:column}
.fr-list .label{margin:6px 2px 2px}
.fr-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 2px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.fr-row:last-child{border-bottom:0}
.fr-row .grow,.fr-req .grow{display:flex;flex-direction:column;min-width:0}
.fr-row b,.fr-req b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-chev{color:var(--faint);font-size:20px}
.fr-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border-radius:18px;background:var(--tile);border:1px dashed var(--border);text-align:center}
.fr-empty .btn{margin-top:6px}
/* Games on Friends (A68 item 11, look A of docs/games-going-looks.html): every game going, Your turn first; New game #fr-ng */
.fr-gw-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:800;line-height:1;vertical-align:1px}
.fr-gw-n[hidden]{display:none}
.fr-games{display:flex;flex-direction:column;gap:10px}
.fr-gw-new{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 16%,var(--tile));color:var(--accent);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.fr-gw-sl{display:flex;align-items:baseline;justify-content:space-between;margin:6px 4px -2px;font-size:12px;letter-spacing:.07em;text-transform:uppercase}
.fr-gw-sl b{font-weight:800}
.fr-gw-sl span{color:var(--muted);font-weight:700}
.fr-gw-list{display:flex;flex-direction:column;border-radius:18px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.fr-gw-row{display:flex;align-items:center;gap:8px;padding:0 12px 0 0}
.fr-gw-row+.fr-gw-row{border-top:1px solid var(--border)}
.fr-gw-my{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%)}
.fr-gw-main{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:10px 0 10px 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fr-gw-pic.gm-pc-pic{flex:none;width:54px;height:54px;border-radius:15px;cursor:inherit}
.fr-gw-pic>.fr-gp{zoom:.66}
.fr-gw-pic>.fr-gp-gin{zoom:.6}
.py-gpic>.fr-gp{zoom:.54}
.py-gpic>.fr-gp-gin{zoom:.5}
.fr-gw-main .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.fr-gw-main b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-gw-who{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-av.fr-gw-av{flex:none;width:22px;height:22px}
.fr-gw-ln{margin-top:2px;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-gw-my .fr-gw-ln{color:var(--gold);font-weight:700}
.fr-gw-btns{flex:none;display:flex;flex-direction:column;gap:6px}
.btn.fr-gw-go{min-height:32px;height:32px;padding:0 13px;font-size:13px}
.btn.fr-gw-hot{background:linear-gradient(180deg,var(--hot-lite),var(--accent));color:var(--accent-ink);border:0}
.fr-gw-none{margin:0 4px}
.fr-ng-body{display:flex;flex-direction:column;gap:12px}
.fr-ng-sl{margin:4px 2px -2px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fr-ng-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.fr-ng-g{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.fr-ng-g b{font-size:12.5px;line-height:1.2}
.fr-ng-pic.gm-pc-pic{width:100%;height:auto;aspect-ratio:1;border-radius:20px;cursor:inherit}
.fr-ng-g.on .fr-ng-pic{box-shadow:0 0 0 2px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.fr-ng-about{min-height:2.9em;margin:0 2px}
.fr-ng-who{display:flex;flex-direction:column;border-radius:18px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.fr-ng-p{display:flex;align-items:center;gap:11px;width:100%;min-height:60px;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fr-ng-p+.fr-ng-p{border-top:1px solid var(--border)}
.fr-ng-p .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.fr-ng-p b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-ng-p small{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-ng-p[disabled]{opacity:.5;cursor:default}
.fr-ng-avw{position:relative;flex:none;display:block}
.fr-av.fr-ng-av{flex:none;width:42px;height:42px}
.fr-ng-plus{display:grid;place-items:center;color:var(--accent);font-size:22px;font-weight:800}
.fr-ng-ck{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--border)}
.fr-ng-p.on .fr-ng-ck{background:var(--accent);box-shadow:inset 0 0 0 5px var(--tile)}
.fr-ng-p.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn.fr-ng-go{position:sticky;bottom:12px;min-height:50px;height:50px;line-height:50px;display:block;width:100%;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;font-size:15.5px;background:linear-gradient(180deg,var(--hot-lite),var(--accent));color:var(--accent-ink);border:0}
.btn.fr-ng-go[disabled]{background:var(--tile);color:var(--faint);opacity:1}
.np.fp .fr-gw-list,.np.fp .fr-gw-new,.np.fp .fr-ng-who,.np.fp .btn.fr-ng-go{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fr-codecard{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--acc-panel);border:1px solid var(--acc-line)}
.fr-codelbl{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.fr-code{font-size:32px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.fr-qr{width:148px;height:148px;border-radius:12px;overflow:hidden;background:#fff}
.fr-qr svg{display:block;width:100%;height:100%}
.fr-btnrow{display:flex;gap:8px;width:100%}
.fr-btnrow .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.fr-codenote{font-size:12px;color:var(--muted);text-align:center}
.fr-ivline{font-size:13px;font-weight:600;color:var(--fg);text-align:center;line-height:1.35;min-height:2.7em}   /* (A72 item 17: the invite egg; two lines' room so the card never grows) */
.fr-inrow{display:flex;gap:8px}
.fr-codein{flex:1;min-width:0;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fr-req{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:8px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.fr-req .fr-av{width:44px;height:44px}
.fr-sm{min-height:38px;padding:0 12px;font-size:13px}
#fr-a-reqs .label{display:block;margin:14px 2px 0}
.fr-sheet{gap:12px}
.fr-who{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fr-who h2{font-size:20px;word-break:break-all}
.fr-acts{display:flex;flex-direction:column;gap:8px}
.fr-acts .note{text-align:center;margin:2px 0 0}
.fr-danger{color:var(--gold)}
.fr-warn{color:var(--gold-text)}
.fr-gearbtn{width:44px;height:44px}
.fr-setup,.fr-main{display:flex;flex-direction:column;gap:14px}
.fr-setup .gm-pgsub{margin:-6px 0 0}
.fr-go:disabled{opacity:.45;cursor:default}
/* Friends F2 (v0.1.88): Friends / Leaderboard, the boards */
.fr-segs{display:flex;gap:6px}
.fr-seg{flex:1;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--tile);font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.fr-seg.on{background:var(--acc-tint);border-color:var(--accent);color:var(--fg)}
.fr-btable{display:flex;flex-direction:column;border-radius:18px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.fr-brow{display:flex;align-items:center;gap:10px;min-height:58px;padding:6px 12px;border-bottom:1px solid var(--line)}
/* a long list (Hunter, Oct 8: 100 friends, 500 blocked) only lays out the rows near the screen */
.fr-row,.fr-brow,.fr-req{content-visibility:auto;contain-intrinsic-size:auto 64px}
.fr-brow:last-child{border-bottom:0}
.fr-brow .fr-av{width:42px;height:42px}
.fr-brow .grow{display:flex;flex-direction:column;min-width:0}
.fr-brow b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-mine{background:var(--acc-panel)}
.fr-rank{width:18px;flex:none;font-size:14px;font-weight:800;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.fr-brow:first-child .fr-rank{color:var(--gold)}
.fr-val{min-width:34px;text-align:right;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.fr-lv{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.fr-lv i{font-style:normal;font-size:11px;font-weight:700;color:var(--gold-text)}
.fr-sq{display:grid;grid-template-columns:repeat(5,6px);gap:2px;flex:none}
.fr-sq i{width:6px;height:6px;border-radius:2px;background:var(--wd-no)}
.fr-sq i.yes{background:var(--wd-yes)}.fr-sq i.near{background:var(--wd-near)}
.fr-two{display:flex;gap:14px}
.fr-two span{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.fr-two b{font-size:16px}
.fr-two i{font-style:normal;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.fr-tiles{display:flex;gap:8px}
.fr-tile{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--tile);border:1px solid var(--border);min-width:0}
.fr-tile span{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--faint)}
.fr-tile b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the fitness board (A25): three numbers on each row, the switch as a tile, Cheer under a friend's name */
.fr-fit3{gap:10px}
.fr-fit3 span{min-width:38px}
button.fr-tile.fr-fit-sw{font:inherit;color:inherit;text-align:left;cursor:pointer}
.fr-fit-sw[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--tile))}
.fr-fit-sw[aria-pressed="true"] b{color:color-mix(in srgb,var(--accent) 70%,var(--fg))}
.fr-fit-ch{margin-top:3px;height:26px;padding:0 10px;font-size:12px}
.fr-alone{padding:12px;text-align:center;margin:0}
/* The leaderboards' page (A72 item 10, v0.6.43; Hunter's pick B of docs/mock/leaderboards.html): every board as a row
   with its picture, who leads it and your place as a medal; a board's podium; classes lb- */
.lb-body{display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
#lb-all,#lb-one{display:flex;flex-direction:column;gap:12px}
#lb-all[hidden],#lb-one[hidden],.lb-pod[hidden],#lb-tiles[hidden]{display:none}
.icon-btn.lb-tro{color:var(--gold);margin-right:4px}
.lb-gl{margin:6px 2px -4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lb-grp{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--border);background:var(--tile);overflow:hidden}
.lb-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.lb-row:last-child{border-bottom:0}
.lb-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lb-rpic{width:46px;height:46px;flex:none;border-radius:12px;overflow:hidden}
.lb-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-rt b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-lead{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--muted)}
.lb-lt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-crown{flex:none;font-size:12px;line-height:1}
.fr-av.lb-lav{width:20px;height:20px;flex:none}
.lb-md{flex:none;display:inline-grid;place-items:center;min-width:48px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.lb-md.lb-mt{font-weight:700;color:var(--muted)}
.lb-m1,.lb-m2,.lb-m3{border:0;color:#1B0F08}
.lb-m1{background:linear-gradient(#FFE08A,#E0A93A)}.lb-m2{background:linear-gradient(#EEF2F7,#AEB8C6)}.lb-m3{background:linear-gradient(#F0B888,#B87A48)}
.lb-ic{display:block;width:100%;height:100%}.lb-ic svg{display:block;width:100%;height:100%}
.lb-alone{text-align:center;margin:0;padding:8px}
.lb-note{text-align:center;margin:4px 0 0}
/* a board: its picture and rule, the dots, the podium, everyone else */
.lb-bhd{display:flex;align-items:center;gap:12px;min-height:56px}
.lb-pic{width:52px;height:52px;flex:none;border-radius:14px;overflow:hidden}
.lb-bhd .grow{min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-bhd b{font-size:22px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bhd .grow>span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-dots{display:flex;justify-content:center;gap:5px;margin:-4px 0}
.lb-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--fg) 22%,transparent)}
.lb-dots i.on{width:16px;border-radius:3px;background:var(--accent)}
.lb-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin-top:10px}
.lb-pc{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;cursor:pointer}
.lb-pav{position:relative;width:64px;height:64px;border-radius:50%}
.lb-p1 .lb-pav{width:84px;height:84px}
.fr-av.lb-pa{display:block;width:100%;height:100%}
.lb-me{outline:2px solid var(--accent);outline-offset:3px}
.lb-pav .lb-crown{position:absolute;left:50%;top:-16px;z-index:1;transform:translateX(-50%);font-size:18px}
.lb-pn{max-width:100%;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-ps{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-pl{width:100%;margin-top:4px;padding-top:6px;border-radius:12px 12px 4px 4px;display:grid;place-items:start center;font-size:22px;font-weight:900;color:#1B0F08}
.lb-p1 .lb-pl{height:74px;background:linear-gradient(#FFE08A,#E0A93A)}.lb-p2 .lb-pl{height:54px;background:linear-gradient(#EEF2F7,#AEB8C6)}.lb-p3 .lb-pl{height:40px;background:linear-gradient(#F0B888,#B87A48)}
.lb-sw{text-align:center;margin:0}
.fr-nudged{font-weight:700}
.fr-brow .grow{flex:1}
/* Friends F3 (v0.1.90): Chats list and the chat page */
.fr-row .fr-prev{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-unread .fr-prev{color:var(--fg);font-weight:600}
.fr-row .fr-seen{font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-row .fr-seen.fr-olt{color:var(--green)}
.fr-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.fr-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;line-height:20px;text-align:center}
.fr-chatpg{overflow:hidden}
.fr-chead{display:flex;align-items:center;gap:10px;width:100%;max-width:720px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px;border-bottom:1px solid var(--line);flex:none}
.fr-chead .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.fr-chead b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-chead .fr-av{width:40px;height:40px}
.fr-cback{width:40px;height:44px}
.fr-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;width:100%;max-width:720px;margin:0 auto;padding:14px 14px 10px}
.fr-day{align-self:center;font-size:11px;font-weight:700;color:var(--faint);margin:6px 0 2px}
.fr-bub{max-width:78%;padding:9px 13px;font-size:15px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.fr-them{align-self:flex-start;border-radius:18px 18px 18px 6px;background:var(--tile-2);color:var(--fg)}
.fr-mine-b{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.fr-pend{opacity:.6}
.fr-compose{display:flex;align-items:center;gap:8px;width:100%;max-width:720px;margin:0 auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex:none}
.fr-cin{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--border);background:var(--tile);font-size:15px;color:var(--fg);outline:none}
.fr-cin:focus{border-color:var(--accent)}
.fr-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none;cursor:pointer}
.fr-plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--tile);color:var(--muted);display:grid;place-items:center;flex:none;cursor:pointer}
.fr-plus:hover{color:var(--fg)}
/* shared things in a chat (F4): a card instead of a bubble */
.fr-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:min(78%,300px);padding:12px 14px;border-radius:18px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left}
button.fr-card{cursor:pointer}
.fr-card-them{align-self:flex-start;border-bottom-left-radius:6px}
.fr-card-me{align-self:flex-end;border-bottom-right-radius:6px;border-color:var(--acc-line)}
.fr-clbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fr-cname{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.fr-csub{font-size:13px;color:var(--muted)}
.fr-csee{margin-top:8px;font-size:14px;font-weight:700;color:var(--accent)}
.fr-card .fr-sq-big{grid-template-columns:repeat(5,14px);gap:3px;margin:6px 0}
.fr-sq-big i{width:14px;height:14px;border-radius:3px}
.fr-card .fr-sq-l{grid-template-columns:repeat(5,22px)}
.fr-sq-l i{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800;color:var(--wd-ink)}
.fr-wspoil{align-self:flex-start;margin-top:6px;padding:4px 0;min-height:30px;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.wd-pick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 2px}
.gm-pzdone .wd-pick .btn{margin:0}
.fr-card b{font-size:15px}
/* the + sheet */
.fr-shgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fr-shgi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:12px 4px;border-radius:16px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;font-size:13px;font-weight:700;text-align:center}
button.fr-shgi{cursor:pointer}
button.fr-shgi:hover{border-color:var(--acc-line)}
.fr-shnote{margin:-4px 0 0;font-size:12px}
.fr-shrow{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;margin-top:8px;padding:8px 14px;border-radius:16px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fr-shrow .grow{display:flex;flex-direction:column;min-width:0}
.fr-shrow b{font-size:15px;overflow-wrap:anywhere}
.fr-shrow .note{margin:0;font-size:13px}
.fr-shgo{flex:none;font-size:14px;font-weight:700;color:var(--accent)}
.fr-shempty{margin:8px 0}
#fr-sh-pick .label{display:block;margin-top:10px}
/* a shared plan, full screen */
.fr-vhead{display:flex;align-items:center;gap:12px}
.fr-vhead .fr-av{width:48px;height:48px}
.fr-vhead .grow{display:flex;flex-direction:column;min-width:0}
.fr-vhead .gm-pgh{overflow-wrap:anywhere}
.fr-vfrom{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fr-vchips{display:flex;flex-wrap:wrap;gap:6px}
.fr-vchip{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--tile-2);color:var(--muted)}
.fr-vdays{display:flex;flex-direction:column;gap:8px}
.fr-vday{border-radius:18px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.fr-vday summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;cursor:pointer;list-style:none}
.fr-vday summary::-webkit-details-marker{display:none}
.fr-vday summary b{flex:1;font-size:15px}
.fr-vday summary span{font-size:12px;color:var(--faint)}
.fr-vday summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);margin:-4px 2px 0 4px}
.fr-vday[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.fr-vex{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:14px}
.fr-vex span:last-child:not(:first-child){color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.fr-vbtns{display:flex;gap:8px}
.fr-vbtns .btn{flex:1;white-space:nowrap;padding-left:12px;padding-right:12px}
.fr-vbtns .fr-vsave{flex:2}
.fr-vbtns:empty{display:none}
.fr-vbtns:has(.gm-dbl){flex-wrap:wrap}
.fr-vbtns .btn.gm-dbl{flex-basis:100%}
.fr-vbtns .btn:disabled{opacity:.4;cursor:default}
/* friend games (F5): YOUR TURN on the Chats list, the game card in a chat, the game page */
.fr-turn{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:999px;background:var(--gold);color:var(--gold-ink)}
.fr-gcard{gap:6px}
.fr-gcard.fr-gmy{background:var(--gold-panel);border-color:var(--gold-line)}
.fr-gmy .fr-clbl{color:var(--gold-text)}
.fr-gcard .btn{width:100%;min-height:40px;margin-top:2px}
.fr-gtake{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
/* a declined, called-off or expired friend game (A38): a quiet card, no board or button */
.fr-goff{gap:2px;background:transparent;border-style:dashed}
.fr-goff .fr-cname{font-size:15px;color:var(--muted)}
.fr-gplayers{display:flex;gap:8px}
.fr-gpl{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px 10px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.fr-gpl .fr-av{width:40px;height:40px}
.fr-gpl .grow{display:flex;flex-direction:column;min-width:0}
.fr-gpl b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-gpls{font-size:11px;color:var(--faint)}
.fr-gpl-on{border-color:var(--accent);background:var(--acc-panel)}
.fr-gpl-on .fr-gpls{color:var(--accent);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.fr-grec{margin:-4px 0 0;text-align:center}
.fr-gboard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;border-radius:22px;background:var(--tile);border:1px solid var(--border)}
.fr-ghint{margin:0;text-align:center}
.fr-gnote{text-align:center;font-size:12px}
#fr-p-sub{white-space:pre-line;text-align:center}
/* live play (C1): a friend who's here gets a dot on their picture */
.fr-av.fr-here,.fr-gpl.fr-here .fr-av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--green)}
.fr-heretxt{color:var(--green)}
.fr-glive{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--tile);border:1px solid var(--border);font-size:14px}
.fr-glive .grow{flex:1;min-width:0;color:var(--muted)}
.fr-glive-on{border-color:var(--green-line);color:var(--fg)}
.fr-livedot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 8px var(--green)}

/* ---------- elements (C2, v0.1.96): icons in the element dots, chips, and the element chart page ---------- */
.gm-dot.gm-eldot{display:inline-flex;align-items:center;justify-content:center;color:#0b0c10}
.gm-dot.gm-eldot .el-ic{width:70%;height:70%}
.gm-elchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:var(--tile-2);border:1px solid var(--border);font-size:12px;font-weight:800;white-space:nowrap}
.gm-chartbtn{align-self:flex-start}
.gm-ec-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.gm-ec-legend i{display:inline-flex;width:16px;height:16px;border-radius:5px;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:800;margin-right:5px;vertical-align:-3px;background:var(--tile-2)}
.gm-ec-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--border);background:var(--tile);padding:10px 8px}
.gm-ec-grid{border-collapse:separate;border-spacing:3px;margin:0 auto}
.gm-ec-grid th,.gm-ec-grid td{width:24px;height:24px;padding:0;text-align:center}
.gm-ec-grid thead th,.gm-ec-grid tr:first-child th{vertical-align:bottom}
.gm-ec-grid th.gm-ec-rh{width:auto;text-align:left;padding-right:4px}
.gm-ec-grid th.gm-ec-rh button{display:flex;align-items:center;gap:6px;min-height:28px;background:none;border:0;padding:2px 6px 2px 2px;border-radius:9px;font:inherit;font-size:12px;font-weight:800;color:var(--fg);cursor:pointer}
.gm-ec-grid td{border-radius:7px;background:var(--tile-2);font-size:11px;font-weight:800}
.gm-ec-grid td.gm-ec-s,.gm-ec-legend i.gm-ec-s{background:color-mix(in srgb,var(--green) 22%,var(--tile));color:var(--green)}
.gm-ec-grid td.gm-ec-w,.gm-ec-legend i.gm-ec-w{background:color-mix(in srgb,#FF6B7A 20%,var(--tile));color:var(--red)}
.gm-ec-grid td.gm-ec-b,.gm-ec-legend i.gm-ec-b{background:color-mix(in srgb,#B58CFF 26%,var(--tile));color:var(--violet)}
.gm-ec-grid tr.gm-ec-sel th.gm-ec-rh button{background:var(--acc-panel);box-shadow:inset 0 0 0 1px var(--accent)}
.gm-ec-grid.gm-ec-has tr:not(.gm-ec-sel) td{opacity:.28}
.gm-ec-corner{display:block;font-size:9px;font-weight:800;color:var(--faint);line-height:1.15;text-transform:uppercase;letter-spacing:.04em}
.gm-ec-grid .gm-dot{width:18px;height:18px;margin:0}
.gm-ec-read{display:flex;flex-direction:column;gap:8px}
.gm-ec-read div{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px}
.gm-ec-read .note{margin:0}

/* ---------- levels and moves (C3, v0.1.98) ---------- */
/* a spirit's level at home: "Lv 3" and a small bar toward the next */
.gm-mlv{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:1px;font-size:9px;color:var(--faint)}
.gm-mlv b{font-weight:800;white-space:nowrap}
.gm-mlv>i{display:block;width:22px;height:3px;border-radius:2px;background:var(--tile-2);overflow:hidden}
.gm-mlv>i>i{display:block;height:100%;background:var(--accent)}
/* the level row in dress-up */
.gm-xp{display:flex;flex-direction:column;gap:6px}
.gm-xp:empty{display:none}
.gm-xp-top{display:flex;align-items:center;gap:8px}
.gm-xp-top b{font-size:16px}
.gm-xp-role{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.gm-xp-bar{height:8px;border-radius:5px;background:var(--tile-2);overflow:hidden}
.gm-xp-bar i{display:block;height:100%;border-radius:5px;background:var(--accent);transition:width .4s}
.gm-xp-txt{margin:0;font-size:12px}
/* the Moves page */
.gm-mv-head{display:flex;align-items:center;gap:12px}
.gm-mv-art{width:64px;height:70px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--tile)}
.gm-mv-art .ss{width:60px}
.gm-mv-head .grow{display:flex;flex-direction:column;min-width:0}
.gm-mv-head .gm-pgh{overflow-wrap:anywhere}
.gm-mv-head .note{margin:0}
.gm-mv-pas{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:var(--gold-panel);border:1px solid var(--gold-line);font-size:14px}
.gm-mv-pas .label{margin:0;color:var(--gold-text)}
.gm-mv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.gm-mv-spn{margin:-4px 0 10px;font-size:12px}
.gm-mv-st{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:14px;background:var(--tile);border:1px solid var(--border)}
.gm-mv-st span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.gm-mv-st b{font-size:17px;font-variant-numeric:tabular-nums}
.gm-mv-list{display:flex;flex-direction:column;gap:8px}
.gm-mv-row{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px 14px;border-radius:16px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left}
button.gm-mv-row{cursor:pointer}
.gm-mv-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gm-mv-row b{font-size:15px}
.gm-mv-row .note{margin:0;font-size:12px}
.gm-mv-row[aria-pressed="true"]{border-color:var(--accent);background:var(--acc-panel)}
.gm-mv-check{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--border);font-size:13px;font-weight:800;color:var(--accent-ink)}
.gm-mv-row[aria-pressed="true"] .gm-mv-check{background:var(--accent);border-color:var(--accent)}
.gm-mv-always{background:var(--tile-2)}
.gm-mv-on{font-size:11px;font-weight:800;color:var(--muted)}
.gm-mv-locked>:not(.gm-mv-lock){opacity:.55}   /* the level it opens at stays readable (A34) */
.gm-mv-lock{flex:none;font-size:11px;font-weight:800;color:var(--faint);white-space:nowrap}
.gm-mv-free{flex:none;font-size:11px;font-weight:800;color:var(--muted)}
.gm-mv-pips{display:flex;gap:3px;flex:none}
.gm-mv-pips i{width:7px;height:7px;border-radius:50%;background:var(--tile-2);border:1px solid var(--border)}
.gm-mv-pips i.on{background:var(--gold);border-color:var(--gold)}
#gm-mv-done:disabled{opacity:.4}
/* XP treats */
.gm-treat-sheet{gap:10px}
.gm-treat-lv{display:flex;flex-direction:column;gap:6px}
.gm-treat-list{display:flex;flex-direction:column;gap:8px}
.gm-treat-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.gm-treat-row .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.gm-treat-row .note{margin:0;font-size:12px}
.gm-treat-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--gold-panel);color:var(--gold-text)}
.gm-treat-big{width:52px;height:52px;margin:6px 0 4px}
.gm-treat-buy{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.gm-treat-buy:disabled{opacity:.45}
.gm-treat-card{align-items:flex-start}
.gm-bk-lv{font-size:11px;font-weight:700;color:var(--muted)}

/* ---------- Spirit Clash (C4, v0.1.99): the team builder and the battle (fg-clash-ui.js) ---------- */
.fgc{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.fgc-note{margin:0;font-size:13px;color:var(--muted)}
.fgc-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.fgc-modes{display:flex;flex-direction:column;gap:8px}
.fgc-seg{display:flex;gap:4px;padding:3px;border-radius:14px;background:var(--tile-2)}
.fgc-seg button{flex:1;min-height:38px;border:0;border-radius:11px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fgc-seg button[aria-pressed="true"]{background:var(--tile);color:var(--fg);box-shadow:0 0 0 1px var(--accent)}
.fgc-free-t{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:var(--tile-2);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fgc-free-t .fgc-grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.fgc-free-t .fgc-grow b{font-size:14px}
.fgc-free-t .fgc-grow span{font-size:12px;color:var(--muted)}
.fgc-sw{position:relative;flex:none;width:42px;height:24px;border-radius:12px;background:var(--line);transition:background .15s}
.fgc-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--fg);transition:transform .15s}
.fgc-free-t[aria-checked="true"] .fgc-sw{background:var(--accent)}
.fgc-free-t[aria-checked="true"] .fgc-sw::after{transform:translateX(18px)}
.fgc-slots{display:flex;flex-direction:column;gap:8px}
.fgc-slot{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px 8px 8px;border-radius:18px;background:var(--bg);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fgc-slot:disabled{cursor:default;opacity:1}
.fgc-slot.on{border-color:var(--accent)}
.fgc-slot .fgc-art{width:58px;height:64px}
.fgc-grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fgc-grow b{display:flex;align-items:center;gap:6px;font-size:15px}
.fgc-grow span{font-size:12px;color:var(--muted)}
.fgc-mvs{color:var(--faint)!important}
.fgc-chg{font-size:13px;font-weight:700;color:var(--accent)}
.fgc-loan{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--tile-2);color:var(--muted)}
.fgc-pick{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:var(--bg);border:1px solid var(--acc-line)}
.fgc-chips{display:flex;flex-wrap:wrap;gap:6px}
.fgc-chip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fgc-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--acc-panel)}
.fgc-chip:disabled{opacity:.35;cursor:default}
.fgc-fmvs{display:flex;flex-direction:column;gap:6px}
.fgc-fmv{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fgc-fmv b{display:block;font-size:14px}
.fgc-fmv .fgc-grow>span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.fgc-fmv[aria-pressed="true"]{border-color:var(--accent);background:var(--acc-panel)}
.fgc-fmv[aria-disabled="true"]{opacity:.5}
.fgc-done{align-self:flex-end}
.fgc-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;flex:none;color:#0b0c10}
.fgc-dot .el-ic{width:70%;height:70%}
.fgc-art{display:flex;align-items:flex-end;justify-content:center;border-radius:14px;background:radial-gradient(circle at 50% 70%,var(--tile-2),var(--bg) 75%);overflow:hidden}
.fgc-art .ss{width:100%}
.fgc-chart{align-self:center;font-size:13px;font-weight:700;color:var(--accent);cursor:pointer;padding:6px}
/* the battle: their team on top, VS, yours below */
.fgc-side{display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-radius:20px;border:1px solid var(--border)}
.fgc-them{background:color-mix(in srgb,#FF6B7A 5%,var(--tile))}
.fgc-mine{background:var(--acc-panel)}
.fgc-shead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.fgc-shead b{font-size:13px}
.fgc-status{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--faint)}
.fgc-status.on{color:var(--green)}
.fgc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* Spirit Trials (C5): shadow spirits (darker, with a corrupted purple glow) and the crowned boss */
.fgc-shadow .fgc-art .ss{filter:brightness(.42) saturate(.3) contrast(1.15) drop-shadow(0 0 4px hsl(278 95% 62% / .9)) drop-shadow(0 0 14px hsl(290 90% 45% / .5))!important}
.fgc-shadow .fgc-art .ss .zz{display:none}
.fgc-boss{border-color:var(--gold-line)}
.fgc-boss .fgc-art{width:78px;height:74px}
.fgc-bosslbl{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:2px 7px;border-radius:999px;background:var(--gold);color:var(--gold-ink);z-index:1}
.fgc-u.fgc-turn .fgc-bosslbl{display:none}
.fgc-u.fgc-boss>.fgc-tag{top:16px;z-index:1}
.fgc-u{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 4px 8px;border-radius:16px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:center;cursor:pointer;min-width:0}
.fgc-u .fgc-art{width:62px;height:62px;background:none}
.fgc-tank .fgc-art{width:72px;height:68px}
.fgc-u.fgc-turn{border-color:var(--accent);box-shadow:0 0 0 2px var(--acc-line),0 0 18px var(--acc-line)}
.fgc-u.fgc-ko{opacity:.4;filter:grayscale(.8)}
.fgc-turnlbl{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:2px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.fgc-u>.fgc-tag{position:absolute;top:4px;right:4px}
/* speed (A45): on every battle card, and the Likely order strip while choosing */
.fgc-spd{position:absolute;top:4px;left:6px;font-size:10px;font-weight:800;color:var(--muted);pointer-events:none}
.fgc-playing .fgc-lk{display:none}
.fgc-nm{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:800;max-width:100%;overflow:hidden;white-space:nowrap}
.fgc-lv{font-size:9px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.fgc-hp{display:block;width:88%;height:6px;border-radius:4px;background:var(--tile-2);overflow:hidden;margin-top:2px}
.fgc-hp i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .5s}
.fgc-hp i.mid{background:var(--gold)}
.fgc-hp i.low{background:#FF6B7A}
.fgc-hpn{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.fgc-en{display:flex;gap:3px}
.fgc-en i{width:7px;height:7px;border-radius:50%;background:var(--tile-2);border:1px solid var(--border)}
.fgc-en i.on{background:var(--gold);border-color:var(--gold)}
.fgc-st{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.fgc-st i{font-style:normal;font-size:9px;font-weight:800;padding:1px 5px;border-radius:999px;background:var(--violet-panel);color:var(--violet)}
.fgc-plan{font-size:10px;font-weight:700;color:var(--accent);min-height:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgc-vs{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--faint)}
.fgc-vs span{font-weight:800;letter-spacing:.1em}
.fgc-vs b{font-size:12px;color:var(--muted)}
.fgc-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;background:var(--tile-2);color:var(--muted);white-space:nowrap}
.fgc-tag.fgc-s{background:color-mix(in srgb,var(--green) 20%,var(--tile));color:var(--green)}
.fgc-tag.fgc-w{background:color-mix(in srgb,#FF6B7A 18%,var(--tile));color:var(--red)}
.fgc-tag.fgc-b{background:color-mix(in srgb,#B58CFF 22%,var(--tile));color:var(--violet)}
/* Spirit Trials team picker: how your team matches up against the shadows */
.fgc-vsl{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.fgc-even{font-size:11px;color:var(--faint)}
.fgc-em{font-size:10px;font-weight:800;margin-left:2px}
.fgc-emu{color:var(--green)}
.fgc-emd{color:color-mix(in srgb,#FF6B7A 82%,var(--fg))}
/* a round playing back, one move at a time (v0.2.02; v0.2.03: a "Next" beat before each move, and the order) */
.fgc-banner{display:flex;flex-direction:column;gap:8px;padding:10px 10px 10px 14px;border-radius:14px;background:var(--tile-2);border:1px solid var(--acc-line)}
.fgc-banner[hidden]{display:none}
.fgc-brow{display:flex;align-items:center;gap:10px;min-height:36px}
.fgc-brow .fgc-order{flex:1;min-width:0}
.fgc-bnt:empty{display:none}
.fgc-bnt{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.3;animation:fgc-bn .3s ease-out}
.fgc-bnt-next{color:var(--accent);font-size:17px}
@keyframes fgc-bn{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.fgc-order{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.fgc-order:empty{display:none}
.fgc-olbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.fgc-oc{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;border:1.5px solid;white-space:nowrap;transition:transform .2s}
/* your team blue, theirs red (v0.2.06) */
.fgc-oc-me{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--tile))}
.fgc-oc-them{color:var(--red);border-color:color-mix(in srgb,#FF6B7A 55%,transparent);background:color-mix(in srgb,#FF6B7A 12%,var(--tile))}
.fgc-oc-done{opacity:.35}
/* knocked out before its turn (A45): crossed out, not missing */
.fgc-oc-out{opacity:.45;text-decoration:line-through}
.fgc-oc-out small{font-size:9px;text-decoration:none;display:inline-block;margin-left:2px}
/* the one going: filled with its team's color, bigger, with a ring */
.fgc-oc-now{opacity:1;transform:scale(1.15);margin:0 4px;font-size:12px}
.fgc-oc-me.fgc-oc-now{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 0 14px color-mix(in srgb,var(--accent) 50%,transparent)}
.fgc-oc-them.fgc-oc-now{background:#FF6B7A;border-color:#FF6B7A;color:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb,#FF6B7A 35%,transparent),0 0 14px color-mix(in srgb,#FF6B7A 50%,transparent)}
.fgc-playing .fgc-row{pointer-events:none}
.fgc-playing .fgc-turnlbl,.fgc-playing .fgc-u>.fgc-tag,.fgc-playing .fgc-plan,.fgc-playing .fgc-opts,.fgc-playing .fgc-bosslbl{display:none}
.fgc-playing .fgc-u.fgc-turn{border-color:var(--border);box-shadow:none}
.fgc-sl.fgc-playing .fgc-u.fgc-turn{background:none}
.fgc-u.fgc-act{border-color:var(--accent);box-shadow:0 0 0 2px var(--acc-line),0 0 24px var(--acc-line);transform:scale(1.05);transition:transform .25s;z-index:1}
.fgc-u.fgc-goin::before{content:"Going";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);z-index:2}
.fgc-u.fgc-hit{border-color:#FF6B7A;box-shadow:0 0 0 3px color-mix(in srgb,#FF6B7A 45%,transparent),0 0 20px color-mix(in srgb,#FF6B7A 35%,transparent);background:color-mix(in srgb,#FF6B7A 10%,var(--tile))}
.fgc-u.fgc-healed{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 45%,transparent),0 0 20px color-mix(in srgb,var(--green) 35%,transparent);background:color-mix(in srgb,var(--green) 10%,var(--tile))}
.fgc-playing .fgc-status{visibility:hidden}
.fgc-u .fgc-hp i{transition:width .7s ease-out}
/* the move over the head of each spirit it touched (v0.2.04) */
.fgc-bub{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:72px;max-width:132px;padding:5px 8px;border-radius:12px;background:var(--bg);border:1.5px solid var(--border);box-shadow:0 4px 14px color-mix(in srgb,var(--bg) 70%,transparent);pointer-events:none;text-align:center;animation:fgc-bub .35s cubic-bezier(.2,1.4,.4,1)}
.fgc-bub b{font-size:11px;font-weight:800;color:var(--fg);line-height:1.2}
.fgc-bub i{font-style:normal;font-size:22px;font-weight:900;line-height:1.05}
.fgc-bub em{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);line-height:1.2}
.fgc-bub-d{border-color:#FF6B7A}
.fgc-bub-d i{color:color-mix(in srgb,#FF6B7A 85%,var(--fg))}
.fgc-bub-h{border-color:var(--green)}
.fgc-bub-h i{color:var(--green)}
.fgc-bub-n{border-color:var(--accent)}
@keyframes fgc-bub{from{opacity:0;transform:translate(-50%,8px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.fgc-bub{animation:none}}
/* the health you expect after your planned moves (v0.2.03) */
.fgc-hp{position:relative}
.fgc-hpx{position:absolute;top:0;height:100%}
.fgc-hpx-d{background:repeating-linear-gradient(135deg,color-mix(in srgb,#FF6B7A 70%,transparent) 0 3px,color-mix(in srgb,#FF6B7A 35%,transparent) 3px 6px)}
.fgc-hpx-h{background:color-mix(in srgb,var(--green) 55%,transparent)}
.fgc-hpn-x b{font-weight:800}
.fgc-x-d{color:color-mix(in srgb,#FF6B7A 85%,var(--fg))}
.fgc-x-h{color:var(--green)}
@media (prefers-reduced-motion:reduce){.fgc-u.fgc-act{transform:none}.fgc-bnt{animation:none}}
.fgc-match{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border)}
.fgc-match b{font-size:14px}
.fgc-match span{font-size:12px;color:var(--muted)}
.fgc-match-good{border-color:color-mix(in srgb,var(--green) 45%,var(--border))}
.fgc-match-good b{color:var(--green)}
.fgc-match-hard{border-color:var(--gold-line)}
.fgc-match-hard b{color:var(--gold)}
/* the moves pop-up for a tapped spirit */
.fgc-opts{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:18px;background:var(--bg);border:1px solid var(--gold-line)}
.fgc-ohead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fgc-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 12px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.fgc-opt:disabled{opacity:.45;cursor:default}
.fgc-opt b{font-size:14px}
.fgc-free{font-size:11px;font-weight:800;color:var(--muted)}
.fgc-pips{display:flex;gap:3px;flex:none}
.fgc-pips i{width:7px;height:7px;border-radius:50%;background:var(--tile-2);border:1px solid var(--border)}
.fgc-pips i.on{background:var(--gold);border-color:var(--gold)}
/* what happened last round */
.fgc-recap{border-radius:16px;background:var(--tile);border:1px solid var(--border);padding:8px 12px}
.fgc-recap summary{cursor:pointer;font-size:13px;font-weight:800;padding:4px 0}
.fgc-recap ol{margin:6px 0 2px;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.35}
/* the small picture on the chat card */
.fgc-mini{display:flex;flex-direction:column;align-items:center;gap:3px}
.fgc-mini-start{color:var(--muted)}
.fgc-mrow{display:flex;gap:4px}
.fgc-mrow>i{display:block;width:26px;height:5px;border-radius:3px;background:var(--tile-2);overflow:hidden}
.fgc-mrow>i>i{display:block;height:100%;background:var(--green)}
.fgc-mrow>i>i.mid{background:var(--gold)}.fgc-mrow>i>i.low{background:#FF6B7A}
.fgc-mvs2{font-size:9px;font-weight:800;color:var(--faint);letter-spacing:.08em}

/* friend profiles (C6, v0.2.07) */
.fr-c-who{cursor:pointer}
.fr-pf{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px}
.fr-pf-wait{text-align:center}
.fr-pf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-pf-tile{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px;border-radius:14px;background:var(--tile-2);text-align:center;min-width:0}
.fr-pf-tile span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.fr-pf-tile b{font-size:14px;line-height:1.25}
.fr-pf-tile i{font-style:normal;font-size:11px;color:var(--muted)}
.fr-pf-go{display:flex;gap:8px}
.fr-pf-go .btn{flex:1}
.fr-pf-go:empty{display:none}
.fr-avtap{display:inline-flex;flex:none;border-radius:50%;cursor:pointer}
/* online (A42): a green dot on a friend's picture while they have the app open */
.fr-avtap{position:relative}
.fr-ol{position:absolute;z-index:3;right:0;bottom:1px;width:13px;height:13px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2.5px var(--bg);pointer-events:none}
.fr-olt{color:var(--green)}
/* Chats (A42): search once the list is long, and the count against the friend limit */
.fr-find{width:100%;margin:10px 0 2px}
.fr-tally{margin:10px 2px 0;text-align:center}
.fr-none{padding:18px 4px;text-align:center}
/* trading in chat (C7, v0.2.08) */
/* the trade page (A68 item 10, Oct 25, look A of docs/trade-looks.html with C's steps, on your home's background like
   Friends and Play: .np.fp): the steps, the friend's three slots across from yours with a swap mark, a big button and a
   quiet link; the chat's card is a small piece of the same table */
.fr-td-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-td-step{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;color:var(--faint)}
.fr-td-step i{height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.fr-td-step.on{color:var(--fg)}.fr-td-step.on i{background:var(--accent)}
.fr-td-step.done{color:var(--green)}.fr-td-step.done i{background:var(--green)}
.fr-td-side{display:flex;flex-direction:column;gap:8px}
.fr-td-who{display:flex;align-items:center;gap:8px;min-height:30px}
.fr-td-who b{flex:1;min-width:0;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fr-td-av{position:relative;width:30px;height:30px;flex:none}
.fr-td-ok{flex:none;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--green) 22%,transparent);color:var(--green);font-size:11px;font-weight:800}
.fr-td-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fr-td-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:142px;padding:8px 6px 10px;border-radius:18px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fr-td-slot .fr-td-art{width:78%;height:auto;aspect-ratio:1;align-items:center}
.fr-td-slot b{font-size:12.5px;line-height:1.2}
.fr-td-slot em{font-style:normal;font-size:11px;font-weight:800;line-height:1.2}
.fr-td-slot.fr-td-rad{border-color:color-mix(in srgb,var(--gold) 60%,var(--border))}
.fr-td-new{color:var(--green)}
.fr-td-slot em.fr-td-warn{color:var(--gold)}
.fr-td-empty{justify-content:center;border-style:dashed;background:rgba(16,11,9,.3);color:color-mix(in srgb,var(--accent) 75%,#fff);font-size:32px;font-weight:300;cursor:pointer}
.fr-td-empty.fr-td-none{cursor:default;color:var(--faint);font-size:12px;font-weight:700}
.fr-td-rm{position:absolute;top:5px;right:5px;z-index:1;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#FBF7F4;font:inherit;font-size:12px;cursor:pointer}
.fr-td-mid{display:flex;align-items:center;gap:10px}
.fr-td-mid::before,.fr-td-mid::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.fr-td-mid span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,rgba(16,11,9,.5));color:color-mix(in srgb,var(--accent) 70%,#fff);font-size:20px}
.fr-td-nothing{margin:0;padding:22px 12px;border-radius:18px;border:1px dashed var(--border);color:var(--muted);font-size:13.5px;text-align:center}
.fr-tdpg .fr-td-hint{margin:14px 0 0;text-align:center;text-wrap:balance}
.fr-tdpg .fr-vbtns{flex-direction:column;align-items:stretch;gap:4px}
.fr-tdpg .fr-vbtns .btn.fr-vsave{min-height:50px;font-size:16px}
.fr-td-link{align-self:center;min-height:40px;padding:0 12px;border:0;background:none;color:var(--faint);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fr-tdcard{padding:0;overflow:hidden;align-items:stretch;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--tb-a,#4A2312) 90%,transparent),var(--tile) 75%);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.fr-tdc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 0}
.fr-tdc-top .fr-clbl{margin:0}
.fr-tdc-st{flex:none;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.08);color:var(--muted)}
.fr-tdc-turn{background:var(--gold);color:var(--gold-ink)}
.fr-tdc-done{background:var(--green);color:var(--accent-ink)}
.fr-tdc-row{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:4px;padding:8px 12px}
.fr-tdc-row>div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.fr-tdc-pics{display:flex;justify-content:center;min-height:44px}
.fr-tdc-pics .fr-td-art{width:44px;height:44px;margin:0 -5px;align-items:center}
.fr-tdc-none{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px dashed var(--border);color:var(--faint);font-style:normal}
.fr-tdc-row small{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3}
.fr-tdc-row small b{color:var(--fg);font-size:12.5px}
.fr-tdc-sw{text-align:center;color:var(--accent);font-size:16px}
.fr-tdcard .fr-tdopen{display:block;width:calc(100% - 24px);margin:0 12px 12px}
.fr-td-body{display:flex;flex-direction:column;gap:12px}
.fr-td-list{display:flex;flex-direction:column;gap:6px}
.fr-td-it{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px 6px 6px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border);color:var(--fg);font:inherit;text-align:left}
button.fr-td-it{cursor:pointer}
.fr-td-it .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.fr-td-it b{font-size:14px}
.fr-td-it em{font-style:normal;font-size:12px;color:var(--muted)}
.fr-td-it em.fr-td-warn{color:var(--gold-text)}
.fr-td-x{color:var(--faint);font-size:14px;padding:0 4px}
.fr-td-art{flex:none;width:46px;height:50px;display:flex;align-items:flex-end;justify-content:center}
.fr-td-pick{display:flex;flex-direction:column;gap:8px}
/* (A69 part 5) the picker's Kindlings | Cosmetics, the cosmetics' parts, and a cosmetic alone in its card */
.fr-td-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.fr-td-tabs button{min-height:40px;padding:0 6px;border:0;border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-td-tabs [aria-selected=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--fg)}
.fr-td-sls{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.fr-td-sls::-webkit-scrollbar{display:none}
.fr-td-sls .pile{min-height:34px;font-size:12.5px;white-space:nowrap}
.fr-td-pnote{margin:2px 2px 0;font-size:12.5px}
.fr-td-pi em.fr-td-pw{color:var(--muted)}
.fr-td-art.fr-td-co .ss.ss-co{width:78%!important;margin:0 auto}
.fr-td-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fr-td-pi{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:center;cursor:pointer;min-width:0}
.fr-td-pi b{font-size:12px;line-height:1.2}
.fr-td-pi em{font-style:normal;font-size:10px;color:var(--muted);line-height:1.2}
.fr-td-pi:disabled{opacity:.45;cursor:default}
.fr-tds-h{margin:4px 0 12px;font-size:20px}
.fr-tds-body{display:flex;flex-direction:column;gap:8px}
.fr-tds-body .label{margin:4px 0 0}
.fr-tds-note{margin:12px 0}
.gm-ret{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:var(--tile-2);border:1px solid var(--gold-line);width:100%}
.gm-ret b{font-size:15px}
.gm-ret-btns{display:flex;gap:8px}
.gm-ret-btns .btn{flex:1}
.gm-ret-left{font-weight:400;color:var(--faint);font-size:12px}
.gm-ret-why{margin:4px 0 0}
/* admin mode (A1, v0.2.12) */
.ad-body{display:flex;flex-direction:column;gap:14px}
.ad-sec{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;background:var(--tile);border:1px solid var(--border)}
.ad-sec h2{margin:0;font-size:15px}
/* Kindlings accounts (A66, S2; admin only for now): #ka-page, classes ka- */
.ka-body{display:flex;flex-direction:column;gap:14px}
.ka-body p{margin:0;line-height:1.45}
.ka-h{margin:6px 0 0;font-size:18px}
.ka-sl{margin:6px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ka-h3{margin:0;font-size:15px;font-weight:700}
.ka-msg{padding:12px 14px;border-radius:14px;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--fg);font-size:14px;overflow-wrap:anywhere}
.ka-busy{min-height:18px}
.ka-gbtn{min-height:44px;display:flex;justify-content:center}
/* (N2) the Android app's Sign in with Google: Google's own dark button look (its colors, the G, the words) */
.ka-gnat{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid #8e918f;background:#131314;color:#e3e3e3;font:500 14px/1 Roboto,system-ui,sans-serif;cursor:pointer}
.ka-gnat:active{background:#2a2a2b}
.ka-qrbox{display:flex;justify-content:center}
.ka-qr{width:min(220px,60vw);height:auto;border-radius:12px}
.ka-code{text-align:center;font-size:30px;font-weight:800;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.ka-num{min-height:44px;text-align:center;color:var(--muted);font-size:14px}
.ka-num.on{color:var(--fg)}
.ka-num b,.ka-big{font-size:26px;font-weight:800;letter-spacing:.08em;color:var(--fg);font-variant-numeric:tabular-nums}
.ka-big{text-align:center}
.ka-reccode{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:14px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;line-height:1.6}
.ka-reccode span{white-space:nowrap}
.ka-recbox{padding:12px 14px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border)}
.ka-recbox summary,.ka-other summary{cursor:pointer;font-weight:700}
/* (Oct 15) the waiting screen's one main way in, everything else under "Other ways" (one line, a fixed height) */
.ka-other{padding:0 14px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border)}
.ka-other>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;overflow:hidden;list-style:none}
.ka-other>summary::-webkit-details-marker{display:none}
.ka-other>summary::after{content:'';flex:none;width:8px;height:8px;margin:0 4px 4px 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.ka-other[open]>summary::after{margin:4px 4px 0 0;transform:rotate(-135deg)}
.ka-other[open]{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.ka-other .ka-recbox{background:var(--tile)}
.ka-ow{display:flex;flex-direction:column;gap:10px}
.ka-owh{font-weight:700;font-size:15px}
.ka-other.ka-recbox{padding:0 14px}
.ka-other.ka-recbox[open]{padding-bottom:14px}
.ka-delfold{margin-top:6px;font-size:13px;color:var(--muted)}
.ka-delfold summary{cursor:pointer;padding:6px 0;min-height:32px}
.ka-delfold[open]{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ka-big1{min-height:52px;font-size:16px;width:100%}
.ka-recbox[open]{display:flex;flex-direction:column;gap:8px}
.ka-actions{display:flex;flex-wrap:wrap;gap:8px}
.ka-actions .btn{flex:1 1 auto}
.ka-alt{justify-content:center}
/* (Oct 15) who's signed in, then a card per thing to do, then settings as rows in one box per section */
.ka-me{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--tile-2);border:1px solid var(--border)}
.ka-me b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ka-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:19px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.ka-sync{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ka-me .grow{flex:1;min-width:0}
.ka-alert{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--tile-2);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.ka-alert.ka-c-warn{border-color:var(--gold-line);background:color-mix(in srgb,var(--gold) 6%,var(--tile-2))}
.ka-alert.ka-c-wait,.ka-alert.ka-c-info{border-color:var(--border)}
.ka-ci{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ka-c-warn .ka-ci{background:var(--gold-soft);color:var(--gold)}
.ka-c-wait .ka-ci,.ka-c-info .ka-ci{background:var(--tile);color:var(--muted)}
.ka-ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ka-ctt{font-weight:700;font-size:15px;color:var(--fg)}
.ka-ctx{font-size:14px;color:var(--muted)}
.ka-ct .ka-actions{margin-top:6px}
/* (audit 4) "No Kindlings account for … yet": a long email wraps, and the two answers stack */
.ka-new .ka-ctt{overflow-wrap:anywhere}
.ka-new .ka-actions{flex-direction:column}
.ka-opt{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.ka-opt p{font-size:14px;color:var(--muted)}
.ka-opt b{color:var(--fg)}
.ka-sec{display:flex;flex-direction:column;gap:8px}
.ka-sub{margin-top:-2px}
.ka-devs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-radius:16px;background:var(--tile-2);border:1px solid var(--border);overflow:hidden}
.ka-dev{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-top:1px solid var(--line)}
.ka-devs>li:first-child,.ka-devs>li:first-child .ka-act{border-top:0}
.ka-dev .grow,.ka-act .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ka-dev b,.ka-act b{font-size:15px;font-weight:650}
.ka-dev .note,.ka-act .note{font-size:13px;color:var(--muted)}
.ka-ri{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--tile);color:var(--muted)}
.ka-rm{flex:none;min-height:36px;padding:6px 12px;font-size:13px}
.ka-act{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.ka-act:active{background:var(--tile)}
.ka-danger,.ka-danger b,.ka-danger .ka-ri{color:var(--gold)}
.btn.ka-danger{border-color:var(--gold-line)}
.ka-add{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--tile-2);border:1px solid var(--border)}
.ka-approve{display:flex;gap:8px;align-items:center}
.ka-approve .field{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.1em}
.ka-cam{width:100%;max-height:300px;border-radius:14px;background:#000;object-fit:cover}
.ka-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 4px 4px}
.ka-logo{width:64px;height:64px;border-radius:18px}
.ka-hero h2{margin:4px 0 0;font-size:22px;line-height:1.25}
.ka-hero p{color:var(--muted);font-size:15px}
.ka-pts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ka-pts li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.ad-warn{margin:0;padding:10px 12px;border-radius:12px;background:var(--gold-panel);border:1px solid var(--gold-line);color:var(--gold-text);font-size:14px;line-height:1.4}
.ad-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ad-row .btn{flex:none}
.ad-row select,.ad-row input{min-height:42px;border-radius:12px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;padding:0 10px;max-width:100%}
.ad-row input{width:84px}
.ad-row .ad-gf-rad{display:flex;align-items:center;gap:6px;min-height:42px;cursor:pointer}
.ad-row .ad-gf-rad input{width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:var(--accent)}
.ad-chips{display:flex;flex-wrap:wrap;gap:6px}
.ad-sub{padding-top:8px;border-top:1px solid var(--border)}
.ad-rep{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--tile-2)}
.ad-rep-top{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.ad-rep p{margin:0}
.ad-msgs{margin:0;padding-left:18px;font-size:13px;color:var(--muted)}
.ad-msgs .ad-them{color:var(--fg)}
.ad-given{margin:6px 0 2px;font-size:12px}
.ad-nm{color:var(--gold);font-weight:600;white-space:nowrap}
/* the Admin page's Performance notes (A42) */
.ad-pf{margin:0;padding:0;list-style:none;max-height:260px;overflow-y:auto;font-size:13px;font-variant-numeric:tabular-nums;border-radius:12px;background:var(--tile-2)}
.ad-pf li{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.ad-pf li b{flex:none;min-width:4.4em;font-weight:600}
.ad-pf li span{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.ad-pf li:last-child{border-bottom:0}
.ad-pf .ad-pf-s{display:block;color:var(--muted);font-weight:700}
/* The Admin page (A69 part 6, v0.6.26; Hunter's pick A of docs/mock/admin.html): a home with the test account, what's on
   now and a tile per area; each tile's page is cards of rows like More's (set-menu) */
.ad-lb{display:block;margin:6px 4px -6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ad-menu .set-row:first-child{border-top:0}
.ad-r{cursor:default;min-height:58px}
label.ad-r{cursor:pointer}
.ad-r .set-txt .note{white-space:normal}
.ad-sb{flex:none;min-height:38px;padding:0 14px;font-size:13.5px;border-radius:12px}
.ad-num{flex:none;width:76px;min-height:40px;border-radius:12px;border:1px solid var(--border);background:var(--tile);color:var(--fg);padding:0 10px;font:inherit}
.ad-ta{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-tile);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--border));background:color-mix(in srgb,var(--gold) 7%,var(--tile-2));cursor:pointer}
.ad-ta .ka-mi{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.ad-ta .set-txt .note{white-space:normal}
.ad-tneed{cursor:default}
.ad-on{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:34px}
.ad-on .pile{display:inline-flex;align-items:center;gap:6px;min-height:34px;font-size:12.5px;color:var(--fg);border-color:color-mix(in srgb,var(--gold) 55%,var(--border));background:color-mix(in srgb,var(--gold) 10%,transparent)}
.ad-on .pile i{font-style:normal;opacity:.7;font-size:15px;line-height:1}
.ad-on .ad-off{color:var(--muted);border-style:dashed;background:none;border-color:var(--border)}
.ad-on>.note{margin:0 4px}
.ad-tiles .set-row.mo-tile{position:relative;height:auto;min-height:104px}
.ad-tiles .mo-tile em{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
.ad-tiles .mo-tile.ad-dz .set-ic{color:var(--red)}
.ad-fine{margin:-2px 4px 0;font-size:12.5px}
.ad-pick{display:flex;flex-direction:column;gap:8px}
.ad-pick button{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.ad-pick [aria-checked=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--tile-2))}
.ad-pick i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center}
.ad-pick [aria-checked=true] i{border-color:var(--accent)}
.ad-pick [aria-checked=true] i::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent)}
.ad-pick span{display:flex;flex-direction:column;gap:2px}
.ad-pick b{font-size:15px}
.ad-pick small{font-size:13px;color:var(--muted);line-height:1.4}
.ad-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:14px;list-style:none;border-radius:var(--r-tile);border:1px solid var(--border);background:var(--tile-2)}
.ad-list li{display:flex;gap:10px;font-size:14px;line-height:1.4}
.ad-list li svg{flex:none;margin-top:1px;color:var(--green)}
.ad-big{min-height:52px;font-size:15px;font-weight:800;border-radius:16px}
.ad-mrow .set-ic{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,var(--border));background:color-mix(in srgb,var(--gold) 10%,var(--tile))}
/* while the test account is on: a thin stripe along the top, the bottom bar ringed in gold with its tag (nothing covered) */
.ad-tstrip{position:fixed;left:0;right:0;top:0;z-index:2000;height:4px;pointer-events:none;background:repeating-linear-gradient(-45deg,#F5C451 0 10px,#1B1204 10px 20px)}
body.ad-tst .tabs{position:relative;box-shadow:0 0 0 2px #F5C451,0 8px 30px rgba(0,0,0,.45)}
.ad-ttag{position:absolute;left:16px;top:0;transform:translateY(-62%);z-index:3;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border:0;border-radius:99px;font:inherit;font-size:11px;font-weight:800;white-space:nowrap;color:#1B1204;background:#F5C451;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer}
.fr-tnote{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;padding:14px;border-radius:var(--r-tile);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));background:color-mix(in srgb,var(--gold) 9%,var(--tile-2));font-size:14px;line-height:1.45}
.fr-tnote[hidden]{display:none}
.fr-tnote svg{flex:none;color:var(--gold);margin-top:2px}
.fr-tnote b{display:block;font-size:15px;margin-bottom:2px}
.fr-tst #fr-main>:not(.fr-tnote){opacity:.45;pointer-events:none}
.gm-rad{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.gm-rad[hidden]{display:none}
.gm-radsw{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--gold-line);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.gm-radsw .grow{display:flex;flex-direction:column;min-width:0}
.gm-radsw .grow b{font-size:14px}
.gm-radsw .grow span{font-size:12px;color:var(--muted)}
.gm-radst{font-size:20px;color:var(--gold);display:flex}
.gm-radsw[aria-checked="true"] .fgc-sw{background:var(--gold)}
.gm-radsw[aria-checked="true"] .fgc-sw::after{transform:translateX(18px)}
.gm-dt.gm-dt-rad{box-shadow:0 0 0 2px var(--gold),0 0 6px var(--gold)}
.gm-dot.gm-dot-rad{box-shadow:0 0 0 2px var(--gold),0 0 6px var(--gold)}
.gm-chrad{display:inline-flex;margin-left:4px}
.gm-chrad .rdm{width:.95em;height:.95em}
.gm-tl-rad b{color:var(--gold-text)}
/* Radiant (A1, v0.2.13; classes rad-, the look from docs/icon-and-special-style.html): a whole spirit, and one cosmetic */
.ss.rad-on{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px hsl(var(--h) 100% 72%)) drop-shadow(0 0 14px rgba(255,226,150,.75))!important}
.ss .rad-mask *{fill:#fff!important;stroke:#fff!important;fill-opacity:1!important;stroke-opacity:1!important;opacity:1!important;filter:none!important;animation:none!important}
.ss .rad-spark{fill:#fff;transform-box:fill-box;transform-origin:center;animation:rad-tw 2s ease-in-out infinite;opacity:0;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ffe39a)}
@keyframes rad-tw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.1) rotate(45deg)}65%{opacity:.15;transform:scale(.4) rotate(90deg)}}
.ss .rad-cos{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,236,170,.9))}
.ss .rad-sw{animation:rad-sw 3s ease-in-out infinite}
@keyframes rad-sw{0%{translate:0 0}58%,100%{translate:var(--rd) 0}}
@media (prefers-reduced-motion:reduce){.ss .rad-spark{animation:none;opacity:.8}.ss .rad-sw{animation:none}}
/* Radiant Eclipse and Radiant Astral (A30): a ring of light turning behind it, and its own sparks and glow */
.ss.rad-top1{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px #C9A6FF) drop-shadow(0 0 16px rgba(255,226,150,.8))!important}
.ss.rad-top2{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #9BE7FF) drop-shadow(0 0 18px rgba(255,214,140,.9))!important}
.ss .rad-hr{fill:none;stroke:#E2C8FF;stroke-width:2.4;stroke-dasharray:1.5 8.5;stroke-linecap:round;opacity:.85;transform-box:fill-box;transform-origin:center;animation:rad-orb 16s linear infinite}
.ss .rad-h2 .rad-hr{stroke:#FFE39A}
.ss .rad-h2 .rad-hr2{stroke:#A8ECFF;animation-duration:11s;animation-direction:reverse}
.ss.rad-top1 .rad-spark{fill:#F1E4FF;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #B58CFF)}
.ss.rad-top2 g:nth-of-type(3n)>.rad-spark{fill:#C9F4FF;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #6FD8FF)}
.ss.rad-top2 g:nth-of-type(3n+1)>.rad-spark{fill:#FFE0F4;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #FF9AD5)}
.ss.ss-lite .rad-hr{animation:none}
@keyframes rad-orb{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ss .rad-hr{animation:none}}
/* the "Radiant!" reveal when one hatches (A1) */
.gm-yrad{text-align:center;font-weight:800;font-size:26px;letter-spacing:.04em;color:#FFE39A;text-shadow:0 0 8px rgba(255,227,154,.8),0 0 22px rgba(255,200,90,.5);animation:gm-yrad-in .7s cubic-bezier(.2,1.4,.4,1) both}
.gm-yradon .gm-ystage{background:radial-gradient(closest-side,rgba(255,227,154,.22),transparent);border-radius:50%}
@keyframes gm-yrad-in{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gm-yrad{animation:none}}
[data-theme="daylight"] .gm-yrad{color:#8A5A00;text-shadow:0 0 8px rgba(255,200,90,.55)}   /* readable on the light sheet (A44: the pale gold was 1.3:1) */
/* Radiants in trades (A1) */
.fr-td-pi.fr-td-rad{border-color:color-mix(in srgb,var(--gold) 60%,var(--border))}
/* Word Duel (A5, v0.2.18; classes fgw-; tiles and keyboard reuse the Daily word's gm-w… look) */
.fgw-head{margin:4px 0 0;text-align:center;font-weight:800;font-size:16px}
.fgw-sub{text-align:center;margin:2px 0 12px}
.fgw-legend{margin:2px 0 10px}
.fgw-board{margin:0 auto 12px}
.fgw-kb{margin-bottom:12px}
.fgw-them{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:14px;background:var(--tile);border:1px solid var(--border);font-size:14px}
.fgw-them>span:first-of-type{color:var(--muted)}
.fgw-sq{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.fgw-sqr{display:inline-flex;gap:2px}
.fgw-sqr i{width:10px;height:10px;border-radius:2px;background:var(--wd-no)}
.fgw-sqr i.yes{background:var(--wd-yes)}.fgw-sqr i.near{background:var(--wd-near)}
.fgw-lt{flex-direction:column;gap:3px}
.fgw-lt .fgw-sqr i{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-style:normal;font-size:12px;font-weight:800;color:var(--wd-ink)}
.fgw-none{font-size:12px;color:var(--faint)}
.fgw-end{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.fgw-side{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--tile);border:1px solid var(--border);font-size:13px;min-width:0}
.fgw-side>b{font-size:14px}
.fgw-word{letter-spacing:.08em;color:var(--accent)}
.fgw-mini{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.fgw-mini .fgw-sq{width:auto}
@media (max-width:360px){.fgw-end{grid-template-columns:1fr}}
.fgw-blank i{width:12px;height:12px}
/* Spirit Plus (A8, v0.2.21; classes pl-) and its members' background (sc-halo) */
.pl-row .pl-ic{color:var(--accent)}
.pl-hero{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:18px;background:radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 60%),var(--tile);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border))}
.pl-hero>b{font-size:22px;font-weight:800}
.pl-hero>span{color:var(--muted);font-size:14px}
/* (Hunter, Oct 27) a member's mark by their name: just a plus */
.pl-mk{display:inline-block;width:max(16px,.8em);height:max(16px,.8em);margin-left:.15em;vertical-align:-.12em;filter:drop-shadow(0 0 4px rgba(245,180,70,.55))}
.pl-mk svg{display:block;width:100%;height:100%}
.pl-mk[hidden]{display:none}
.pl-mk.pl-mk-md{width:22px;height:22px;margin:0;vertical-align:middle}
.pl-mk.pl-mk-lg{width:26px;height:26px;margin-left:2px;vertical-align:middle}
.pl-mk.pl-mk-xl{width:72px;height:72px;margin:0;filter:drop-shadow(0 0 14px rgba(245,180,70,.6))}
.pl-ic .pl-mk{display:block}
.pl-mk-g{fill:#E59A2E;stroke:#FFE7A8;stroke-width:1.2;stroke-linejoin:round}
.pl-mk-t{fill:#FFD36E;opacity:.75}
.pl-mk-p{stroke:#3A1E04;stroke-width:2.6;stroke-linecap:round;fill:none}
.pl-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);vertical-align:2px}
.pl-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pl-list li{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--tile);border:1px solid var(--border)}
.pl-list li .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.pl-list li .grow span{font-size:13px;color:var(--muted)}
.pl-yes{flex:none;font-size:11px;font-weight:800;white-space:nowrap}
.pl-yes{color:var(--accent)}
.pl-yes.pl-soon{color:var(--faint)}
.pl-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 10px}
.pl-price b{font-size:18px}.pl-price span{color:var(--muted);font-size:14px}
.pl-fair{margin-top:10px}
.pl-join{display:flex;flex-direction:column;gap:8px}
.pl-plan{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.pl-plan span{color:var(--muted);font-size:14px}
.pl-cancel{align-self:flex-start}
.pl-acts{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pl-join .btn{width:100%}
.sc-halo{position:absolute;left:50%;top:36%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(190,175,255,.55);box-shadow:0 0 30px 6px rgba(150,130,255,.35),inset 0 0 24px 4px rgba(150,130,255,.25);animation:sc-halo 7s ease-in-out infinite}
.sc-halo2{width:30%;border-color:rgba(255,230,170,.45);box-shadow:0 0 20px 4px rgba(255,220,150,.25);animation-delay:-3.5s}
@keyframes sc-halo{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.sc-halo{animation:none}}
#v-health{overflow-x:clip}   /* a page moving with the finger never makes the screen scroll sideways */
.ss.ss-off,.ss.ss-off *,.ss.ss-cv,.ss.ss-cv *{animation-play-state:paused!important}
/* (battery, Nov 2) a tab under a full page (body.np-open; content-visibility skips its drawing, but its moving parts kept
   ticking on the phone's main thread at every frame: about a tenth of a second each second with the Collection over the
   Battle screen) and a full page another covers (np-cov, npCov in app.js) hold their moving parts still: the Kindlings by
   ss-cv on each drawing (spirits.js), the rest by name here. Never a rule ending in "*" on a class high up: the browser
   restyles the whole page whenever that class changes */
body.np-open section[id^="v-"] :is(.bob,.hm-mote,.hm-gift,.cm-flames),body.np-open #v-spirits .hm-gift::before,.np-cov .gm-mate{animation-play-state:paused!important}
/* a spirit among many (.ss-lite, see make in spirits.js): the body holds its pose, the whole picture floats on its own
   beat; its effects keep moving. The float is on the box around the drawing, not the <svg> (A68 item 8, Oct 25: the
   browser can't hand an animation on an <svg> to the graphics chip, so every floating Kindling on the screen restyled
   and re-layered the page every frame, in chats while scrolling and everywhere else); translate and rotate add to a
   transform the box already has (a chat avatar's) and to a tapped home Kindling's hop */
.ss.ss-lite .sp-tilt :not(.zz):not(.rad-sw),.ss.ss-lite .sp-all{animation:none!important}
.ss.ss-lite{animation:ss-float 5s ease-in-out infinite;animation-delay:var(--fl,0s)}
@keyframes ss-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3.5%;rotate:-1.2deg}}
@media (prefers-reduced-motion:reduce){.ss.ss-lite{animation:none}}
/* Today's Kindling at rest (check 5, SpiritKit.rest): Astral's rays hold still too (turning, they redrew the whole drawing and its glow every frame) */
.ss.ss-rest .cel-rays{animation-play-state:paused}   /* off the screen: still (A17) */
/* (the full check, Oct 26) and Radiant's sparkles and band of light rest too, in their still look (as with reduced motion):
   on the tab bar's Kindling and Today's at rest they redrew the whole drawing every frame, about 90% of a slow phone's time
   with the app open on any tab (tests/ui/perf-idle.js) */
.ss.ss-rest .rad-spark{animation:none;opacity:.8}.ss.ss-rest .rad-sw{animation:none}
.gm-mate{will-change:transform}
/* the tab under a full page isn't drawn and its moving parts don't move (the full check, Oct 26: content-visibility, not
   visibility and a pause on every piece, which both restyled the whole tab, about 1 s with 25 Kindlings on a slow phone,
   each time a full page opened or closed; tests/ui/perf.js) */
body.np-open section[id^="v-"]{content-visibility:hidden}
.ag-x{margin-top:10px}   /* Today: gym, weigh-in, Daily word under the day's timeline (v0.2.42) */
.mv-from-r,.hl-from-r{animation:mvInR .24s cubic-bezier(.2,.8,.2,1)}
.mv-from-l,.hl-from-l{animation:mvInL .24s cubic-bezier(.2,.8,.2,1)}
/* each side its own way in (A17: "reverse" played it backwards, so a page coming from the left ended off to the side and jumped) */
@keyframes mvInR{from{opacity:.5;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
@keyframes mvInL{from{opacity:.5;transform:translate3d(-48px,0,0)}to{opacity:1;transform:none}}
/* the Kindlings home slides in without the fade (A64, Hunter Oct 12: "feels like there's a slight jump"): fading its
   scene, glass buttons and Kindlings redrew the glass every frame, so the slide waited and skipped frames */
#v-spirits.mv-from-r{animation-name:mvInRs}#v-spirits.mv-from-l{animation-name:mvInLs}
@keyframes mvInRs{from{transform:translate3d(48px,0,0)}to{transform:none}}
@keyframes mvInLs{from{transform:translate3d(-48px,0,0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mv-from-r,.mv-from-l,#v-spirits.mv-from-r,#v-spirits.mv-from-l{animation:none}}
/* the screen lock (v0.2.28; classes lk-) */
.lk-panel,.lk-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 20px}
.lk-panel b,.lk-box h2{font-size:20px;font-weight:700}
.lk-panel p,.lk-box p{margin:0;max-width:300px;color:var(--muted);font-size:14px;line-height:1.4}
.lk-panel .btn,.lk-box .btn{min-width:180px;margin-top:6px}
.lk-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.lk-app{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center}
.lk-panel .linkish,.lk-box .linkish{align-self:center;text-align:center;font-size:13px;color:var(--muted)}
/* About: the privacy policy and delete-my-account pages (A11, v0.2.29) */
.abt-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.abt-links .btn{text-decoration:none}
/* Health's pages slide in when swiped (A13) */
@media (prefers-reduced-motion:reduce){.hl-from-r,.hl-from-l{animation:none}}
/* the chat header's lines under the name: the code, then the games record on its own line (A13) */
#fr-c-sub{display:flex;flex-direction:column;line-height:1.3}
.fr-cline{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-av-me{cursor:pointer}
/* auras (A13, Hunter: they looked like big circles): a soft glow that follows the spirit's own shape, hats and all */
.ss[data-aura] .sp-all{filter:drop-shadow(0 0 2px hsl(var(--xch) var(--xcs) calc(var(--xcl) - 4%) / .95)) drop-shadow(0 0 8px hsl(var(--xch) var(--xcs) calc(var(--xcl) - 10%) / .85)) drop-shadow(0 0 20px hsl(var(--xch) var(--xcs) calc(var(--xcl) - 18%) / .6))}
.ss[data-aura][data-dmx] .sp-all{filter:drop-shadow(0 0 3px hsl(285 100% 76% / .95)) drop-shadow(0 0 10px hsl(278 95% 60% / .7)) drop-shadow(0 0 22px hsl(275 90% 42% / .5))}
/* More › Your data (A13): one clear section per thing, Erase everything set apart at the end; classes ds- */
.ds-intro{margin:0 0 4px}
.ds-what{color:var(--muted)}
.ds-big{min-width:200px}
.ds-erase{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
/* the two erase buttons (A42): what each one does, said before the second tap */
.er-conf{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);font-size:13px;line-height:1.45}
.er-conf ul{margin:0;padding-left:18px}
.er-conf .btn{align-self:flex-start}
.er-del{border-top-color:color-mix(in srgb,var(--red) 40%,var(--line))}
/* the shop sheet keeps its size when something is bought (A13): the buy buttons sit in the same spot as an invisible
   copy of what comes after, so the space is there from the start */
.gm-y-stack{display:grid}
.gm-y-stack>*{grid-area:1/1;display:flex;flex-direction:column;gap:8px}
.gm-y-ghost{visibility:hidden;pointer-events:none}
/* a profile's Spirits home is drawn like the Spirits tab's (A13 follow-up); tap it for their collection */
.fr-pf-hm{cursor:pointer;height:clamp(240px,66vw,300px)}
.fr-pf-hm.fr-pf-big{height:clamp(300px,126vw,520px);--hname:40px}   /* (E3: more than 12 Kindlings, so 25 stand 5 to a row with room for two-line names and the level) */
.fr-pf-hm .gm-mate{cursor:inherit}
/* (Nov 1, Hunter: "it is lagging when scrolling on the friends profile page") their Kindlings stand still on the profile, like
   the background behind them: 25 drifting and floating drawings restyled the page all the time it was open (half of a slowed
   phone's time while just looking at it) and made each scrolled frame dearer */
.fr-pf-hm .gm-mate,.fr-pf-hm .gm-mate .ss.ss-lite{animation:none}
/* (Nov 1) their background shows once it's still (scBake), fading in, never first with its moving pieces in their unbaked
   places (sparks in a line at the fire's foot) */
#fr-p-scene>*{transition:opacity .18s ease-out}
#fr-p-scene:not(.sc-baked)>*{opacity:0;transition:none}
/* a friend's collection is read-only */
.gm-bk-friend{z-index:41}
.gm-bk-friend .gm-chartbtn{display:none}
/* the starting team (A14) */
.st-body{gap:14px;padding-top:calc(24px + env(safe-area-inset-top,0px))}
.st-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
.st-teams{display:flex;flex-direction:column;gap:10px}
.st-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:6px;padding:12px 6px;border-radius:16px;background:var(--tile);border:1.5px solid var(--border);color:inherit;font:inherit;cursor:pointer;min-width:0}
.st-team[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--tile))}
.st-sp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center}
.st-art{display:block;width:clamp(56px,16vw,76px);aspect-ratio:1}
.st-art .ss{width:100%;height:100%}
.st-sp b{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.st-role{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-sp .gm-elchip{font-size:11px;margin-top:2px}
.st-go{width:100%;margin-top:2px}
/* iPhones and saving (A15) */
.io-nosave{position:sticky;top:0;z-index:60;display:block;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--gold-soft);border-bottom:1px solid var(--gold-line);color:var(--fg);font-size:14px;line-height:1.4}
.io-nosave b{color:var(--gold)}
.io-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:15px;line-height:1.45}
.io-share{vertical-align:-3px;color:var(--accent)}
.io-code{margin:0}
/* your spirit as a friend (A16) */
.spc-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.spc-slot .spc-row{margin:0 0 14px;border-bottom:1px solid var(--line)}
.spc-row .fr-prev{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spc-bub{white-space:normal}
.spc-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:9px}
.spc-act.btn{min-height:38px;padding:7px 12px;font-size:14px;text-align:left;white-space:normal}
.spc-menu{display:flex;justify-content:flex-end;width:100%;max-width:720px;margin:0 auto;padding:0 14px 8px}
.spc-menu .btn{min-height:38px}
.spc-typing{display:flex;gap:4px;align-items:center;padding:13px 14px}
.spc-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:spc-dot 1s ease-in-out infinite}
.spc-typing i:nth-child(2){animation-delay:.15s}.spc-typing i:nth-child(3){animation-delay:.3s}
@keyframes spc-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.spc-typing i{animation:none}}
/* the search results and the event editor open over your spirit's chat too (A16) */
#sr-sheet,#editor{z-index:41}
/* Spirit Clash: pick a move, then one of the spirits it can go on (v0.2.39) */
.fgc-u.fgc-can{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent),0 0 18px color-mix(in srgb,var(--accent) 30%,transparent)}
.fgc-arrow{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;color:var(--accent);font-size:16px;line-height:1;animation:fgc-bob 1s ease-in-out infinite;pointer-events:none}
@keyframes fgc-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
@media (prefers-reduced-motion:reduce){.fgc-arrow{animation:none}}
.fgc-tgest{position:absolute;top:4px;left:4px;z-index:3;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:800;background:color-mix(in srgb,#FF6B7A 18%,var(--tile));color:var(--red);pointer-events:none}
.fgc-tgest-h{background:color-mix(in srgb,var(--green) 18%,var(--tile));color:var(--green)}
.fgc-opt.fgc-opt-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--tile))}
.fgc-was{color:var(--accent)}
/* games with your spirit (A16 part 2) */
.spc-games{display:flex;flex-direction:column;gap:6px;width:100%;max-width:720px;margin:0 auto;padding:10px 14px 6px;border-top:1px solid var(--line);flex:0 1 auto;min-height:0;overflow-y:auto}   /* (A68: on a short phone it scrolls; it pushed the message box under the home buttons) */
.spc-glbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spc-gopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--tile);color:inherit;font:inherit;text-align:left;cursor:pointer}
.spc-gopt{flex-direction:row;align-items:center;gap:12px}
.spc-gopt .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.spc-gopt .grow span{font-size:13px;color:var(--muted)}
/* the friend games' pictures, small, on a little game table (the chats' + menus, A61) */
.fr-shpic{position:relative;flex:none;display:block;width:64px;height:48px;border-radius:10px;overflow:hidden;background:radial-gradient(70% 80% at 50% 45%,var(--tb-glow) 0%,transparent 100%),radial-gradient(90% 90% at 50% 40%,var(--tb-a) 0%,var(--tb-b) 100%)}
.fr-shpic .fr-gp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7)}
.fr-shpic .fr-gp-gin{transform:translate(-50%,-50%) scale(.6)}
.spc-gcard{align-self:flex-start}
.fr-av.spg-me{display:grid;place-items:center;font-weight:800;font-size:18px;color:var(--fg)}
/* spirits asleep (away on a journey): z z z drifting up (A17; transform and opacity only) */
.gm-zzz{position:absolute;top:2%;right:8%;width:40%;height:40%;pointer-events:none;z-index:2}
.gm-zzz i{position:absolute;left:0;bottom:0;font-style:normal;font-weight:800;color:var(--fg);opacity:0;text-shadow:0 1px 4px rgba(0,0,0,.7);animation:gm-zz 3.6s ease-out infinite;will-change:transform,opacity}
.gm-zzz i:nth-child(1){font-size:11px;animation-delay:0s}
.gm-zzz i:nth-child(2){font-size:14px;animation-delay:.6s}
.gm-zzz i:nth-child(3){font-size:17px;animation-delay:1.2s}
@keyframes gm-zz{0%{transform:translate(0,0);opacity:0}15%{opacity:.95}70%{opacity:.8}100%{transform:translate(18px,-34px) rotate(-8deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.gm-zzz i{animation:none;opacity:.8}.gm-zzz i:nth-child(2){transform:translate(8px,-12px)}.gm-zzz i:nth-child(3){transform:translate(16px,-24px)}}
/* a game going on, pinned at the top of a chat (A17) */
.fr-pin{display:flex;align-items:center;gap:10px;width:100%;max-width:720px;margin:0 auto;padding:9px 14px;border:0;border-bottom:1px solid var(--line);background:var(--tile);color:var(--fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.fr-pin b{font-weight:800}
/* A59: "Check it's really them": the safety code in a friend's sheet, and the warning in a chat when the server sent a
   different lock (gold: an alert) */
.fr-sf{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.fr-sf-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(14px,4.4vw,20px);font-weight:700;letter-spacing:.02em;word-spacing:.15em;white-space:pre;color:var(--fg)}
.fr-sf .note{margin:0}
.fr-sf-more{align-self:center;margin-top:4px}
.fr-sf-done{margin:0;color:var(--green);font-weight:700;font-size:14px}
.fr-kw{width:100%;max-width:720px;margin:0 auto;padding:10px 14px;border-bottom:1px solid var(--gold-line);background:color-mix(in srgb,var(--gold) 12%,var(--bg));color:var(--fg);font-size:14px}
.fr-kw p{margin:0 0 8px}
.fr-kw div{display:flex;gap:12px;align-items:center}
.fr-pindot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.fr-pindot.on{background:var(--gold)}
.fr-pingo{color:var(--accent);font-weight:800;font-size:13px;white-space:nowrap}
/* A17: a message in place, at the top of the screen you're on (only Undo pops up at the bottom) */
.toast-ipw{position:sticky;top:8px;height:0;z-index:5;overflow:visible}
.sheet>.toast-ipw{margin-bottom:-18px}   /* (the sheet's gap: the holder takes no room at all, so nothing under it moves) */
.gm-pgbody>.toast-ipw{margin-bottom:-12px}.pzf .gm-pgbody>.toast-ipw{margin-bottom:-10px}   /* (the same for a full page's gap, A25: a badge's page moved 12px) */
.fr-chatpg>.toast-ipw{position:relative;top:8px;margin:0 14px}
.toast.ip{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;width:100%;margin:0;z-index:5}
.toast.ip.ipt{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(528px,calc(100vw - 32px));margin:0;z-index:50}
/* (Oct 27, Hunter's screenshot: on a glass page (Gems, Play, the Collection, Friends) --tile-2 is see-through glass and the
   page's big title showed through the message's words: a dark base under the tint; on other pages --tile-2 covers it) */
.toast.ip{background:linear-gradient(var(--tile-2),var(--tile-2)),#0e0a0c}
/* the economy pass (A26): full moon line, lucky glow meter (nest), ✦ by names, the Radiant card in chats */
.gm-moonl{margin:4px 0 10px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg);font-size:14px;font-weight:600}
.gm-luck{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--tile);border:1px solid var(--border)}
.gm-luck-t{font-size:14px;color:var(--muted)}
.gm-luck-t b{color:var(--fg)}
.gm-luck .gm-bar{display:block;width:100%}
.fr-star{color:var(--accent);font-weight:700}
.fr-radcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.fr-radth{display:block;width:84px;height:84px}
/* hatching (A18): the egg wobbles, cracks and bursts with light in the element's color, then the Kindling pops out
   (hatchPlay in app.js). --hx-c is the element's light, --hx-e the egg's color, --k stretches the whole timeline:
   Radiant is the longest and biggest, Lunar slow and silvery, Crystal prismatic. */
.hx{--k:1;position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;overflow:hidden;background:var(--bg);color:var(--fg);animation:hx-in .25s ease-out;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hx-rad{--k:1.35}.hx-moon{--k:1.25}.hx-prism{--k:1.15}
.hx-stage{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
.hx-glow,.hx-rays,.hx-sweep{position:absolute;pointer-events:none;border-radius:50%}
.hx-glow{inset:-50px;background:radial-gradient(closest-side,var(--hx-c),color-mix(in srgb,var(--hx-c) 35%,transparent) 45%,transparent 72%);opacity:0;animation:hx-glow calc(3.4s*var(--k)) ease-out forwards}
.hx-rays{inset:-80px;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--hx-c) 55%,transparent) 0 5deg,transparent 5deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 75%);mask:radial-gradient(closest-side,#000 25%,transparent 75%);opacity:0;animation:hx-rays calc(1.7s*var(--k)) calc(1.45s*var(--k)) ease-out forwards}
.hx-egg{position:relative;width:150px;height:180px;overflow:visible;animation:hx-egg-out .3s calc(1.75s*var(--k)) forwards}
.hx-wob{transform-box:view-box;transform-origin:0 30px;animation:hx-wob calc(1.5s*var(--k)) ease-in}
.hx-shell{fill:var(--hx-e);fill-opacity:.16;stroke:var(--hx-e);stroke-width:2}
.hx-band{fill:none;stroke:var(--hx-e);stroke-width:2;stroke-linecap:round}
.hx-crack{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--hx-c)) drop-shadow(0 0 6px var(--hx-c));animation:hx-crack calc(.45s*var(--k)) calc(.95s*var(--k)) ease-in forwards}
.hx-crack2{stroke-width:1.6;animation-delay:calc(1.2s*var(--k))}
.hx-ht,.hx-hb{transform-box:fill-box;transform-origin:center}
.hx-ht{animation:hx-top calc(.6s*var(--k)) calc(1.5s*var(--k)) cubic-bezier(.3,.6,.4,1) forwards}
.hx-hb{animation:hx-bot calc(.6s*var(--k)) calc(1.5s*var(--k)) cubic-bezier(.3,.6,.4,1) forwards}
.hx-bits{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.hx-bit{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--hx-c);box-shadow:0 0 6px var(--hx-c);opacity:0;animation:hx-bit calc(.85s*var(--k)) calc(1.5s*var(--k) + var(--d)) ease-out forwards}
.hx-sp{position:absolute;left:25px;top:25px;width:170px;height:170px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.2);animation:hx-pop calc(.7s*var(--k)) calc(1.65s*var(--k)) cubic-bezier(.2,1.5,.4,1) forwards}
.hx-sp .ss{width:170px}
.hx-word{margin:0;font-weight:800;font-size:22px;text-align:center;opacity:0;animation:hx-word .5s calc(2s*var(--k)) ease-out forwards}
.hx-sub{margin:0;font-weight:700;font-size:15px;color:var(--muted);opacity:0;animation:hx-word .5s calc(2.25s*var(--k)) ease-out forwards}
.hx-skip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:0;right:0;margin:0;text-align:center;font-size:12px;color:var(--faint);opacity:0;transition:opacity .3s}
.hx-can .hx-skip{opacity:1}
/* Radiant: golden light around the element's own, a bigger burst, the twin glint */
.hx-rad .hx-glow{background:radial-gradient(closest-side,#FFF6DA,var(--hx-c) 22%,rgba(255,214,110,.75) 42%,rgba(255,200,90,.25) 60%,transparent 76%);animation-name:hx-glow-big}
.hx-rad .hx-rays{inset:-120px;background:repeating-conic-gradient(from 0deg,rgba(255,227,154,.7) 0 4deg,transparent 4deg 15deg);animation-name:hx-rays-big}
.hx-rad .hx-bit{background:#FFE39A;box-shadow:0 0 8px #FFD36E}
.hx-rad .hx-bit:nth-child(3n){background:var(--hx-c);box-shadow:0 0 8px var(--hx-c)}
.hx-rad .hx-crack{stroke:#FFF6DA;filter:drop-shadow(0 0 3px #FFD36E) drop-shadow(0 0 8px #FFC24A)}
.hx-rad .hx-shell{animation:hx-flick calc(1.5s*var(--k)) linear}
.hx-glint{position:absolute;right:6px;top:2px;font-size:54px;line-height:1;opacity:0;animation:hx-glint calc(.9s*var(--k)) calc(1.9s*var(--k)) cubic-bezier(.2,1.5,.4,1) forwards}
.hx-glint .rdm{filter:drop-shadow(0 0 6px rgba(255,227,154,.9))}
.hx-rx .hx-sp{animation-delay:.35s}.hx-rx .hx-glint{animation-delay:.8s}.hx-rx .hx-word{animation-delay:.9s}.hx-rx .hx-sub{animation-delay:1.15s}.hx-rx .hx-bit{animation-delay:calc(.3s + var(--d))}   /* (A30: earned, not hatched: no egg to wait for) */
.hx-rad .hx-word{font-size:30px;letter-spacing:.04em;color:#FFE39A;text-shadow:0 0 8px rgba(255,227,154,.8),0 0 22px rgba(255,200,90,.5)}
/* Lunar: a soft silver light, the egg glowing like the moon, slow drifting sparkles */
.hx-moon .hx-shell{fill:#E6ECF7;fill-opacity:.42;filter:drop-shadow(0 0 8px rgba(220,230,255,.75))}
.hx-moon .hx-wob{animation-name:hx-wob-soft}
.hx-moon .hx-bit{border-radius:50%;width:6px;height:6px;background:#EEF2FA;box-shadow:0 0 8px #C9D4EA;animation-duration:calc(1.4s*var(--k))}
.hx-dr{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#EEF2FA;box-shadow:0 0 6px #C9D4EA;opacity:0;animation:hx-dr var(--t) var(--d) ease-out forwards;pointer-events:none}
.hx-rad .hx-dr{background:#FFE9B0;box-shadow:0 0 6px #FFD36E}
/* Crystal: prismatic shards and a rainbow sweeping across */
.hx-prism .hx-bit{width:5px;height:14px;left:-2px;top:-7px;border-radius:1px;background:hsl(var(--hh),95%,72%);box-shadow:0 0 6px hsl(var(--hh),95%,65%)}
.hx-prism .hx-glow{background:radial-gradient(closest-side,#fff,hsla(190,95%,72%,.7) 30%,hsla(300,95%,72%,.3) 55%,transparent 74%)}
.hx-prism .hx-rays{background:repeating-conic-gradient(hsla(0,95%,70%,.5) 0 5deg,transparent 5deg 18deg,hsla(120,95%,70%,.5) 18deg 23deg,transparent 23deg 36deg,hsla(240,95%,72%,.5) 36deg 41deg,transparent 41deg 54deg)}
.hx-sweep{inset:-40px;-webkit-mask:radial-gradient(closest-side,#000 45%,transparent);mask:radial-gradient(closest-side,#000 45%,transparent);background:linear-gradient(100deg,transparent 30%,hsla(0,95%,70%,.45) 40%,hsla(60,95%,70%,.45) 46%,hsla(140,95%,70%,.45) 52%,hsla(220,95%,72%,.45) 58%,hsla(290,95%,72%,.45) 64%,transparent 74%);mix-blend-mode:screen;opacity:0;animation:hx-sweep calc(1.3s*var(--k)) calc(1.55s*var(--k)) ease-in-out forwards}
@keyframes hx-in{from{opacity:0}}
@keyframes hx-wob{0%,12%{transform:rotate(0)}20%{transform:rotate(-4deg)}28%{transform:rotate(4deg)}36%,48%{transform:rotate(0)}56%{transform:rotate(-7deg)}64%{transform:rotate(7deg)}70%{transform:rotate(-8deg)}76%{transform:rotate(8deg)}82%{transform:rotate(-10deg)}88%{transform:rotate(10deg)}94%{transform:rotate(-6deg)}100%{transform:rotate(0) scale(1.06)}}
@keyframes hx-wob-soft{0%,15%{transform:rotate(0)}30%{transform:rotate(-3deg)}45%{transform:rotate(3deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}90%{transform:rotate(-3deg)}100%{transform:rotate(0) scale(1.05)}}
@keyframes hx-crack{to{stroke-dashoffset:0}}
@keyframes hx-top{to{transform:translate(-14px,-58px) rotate(-32deg);opacity:0}}
@keyframes hx-bot{to{transform:translate(8px,40px) rotate(14deg);opacity:0}}
@keyframes hx-egg-out{to{opacity:0}}
@keyframes hx-glow{0%{opacity:.06;transform:scale(.55)}20%{opacity:.16;transform:scale(.62)}38%{opacity:.26;transform:scale(.7)}44%{opacity:1;transform:scale(1.3)}60%{opacity:.5;transform:scale(1.08)}100%{opacity:.34;transform:scale(1)}}
@keyframes hx-glow-big{0%{opacity:.1;transform:scale(.55)}38%{opacity:.4;transform:scale(.75)}44%{opacity:1;transform:scale(1.8)}62%{opacity:.75;transform:scale(1.3)}100%{opacity:.55;transform:scale(1.15)}}
@keyframes hx-rays{0%{opacity:0;transform:scale(.4) rotate(0)}25%{opacity:.9}100%{opacity:0;transform:scale(1.25) rotate(35deg)}}
@keyframes hx-rays-big{0%{opacity:0;transform:scale(.4) rotate(0)}20%{opacity:1}70%{opacity:.6}100%{opacity:0;transform:scale(1.6) rotate(60deg)}}
@keyframes hx-bit{0%{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(225deg) scale(.4)}}
@keyframes hx-pop{0%{opacity:0;transform:scale(.2)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes hx-word{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hx-glint{0%{opacity:0;transform:scale(.2) rotate(-40deg)}60%{opacity:1;transform:scale(1.25) rotate(8deg)}80%{transform:scale(.9) rotate(0)}100%{opacity:1;transform:scale(1)}}
@keyframes hx-flick{0%,100%{filter:none}30%{filter:drop-shadow(0 0 6px #FFD36E)}34%{filter:none}62%{filter:drop-shadow(0 0 9px #FFD36E)}66%{filter:none}86%{filter:drop-shadow(0 0 12px #FFC24A)}}
@keyframes hx-dr{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-70vh)}}
@keyframes hx-sweep{0%{opacity:0;transform:translateX(-90%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(90%)}}
/* Quick setup after the welcome (A20; classes su-, the welcome's ob- look) */
.su-times{display:flex;gap:10px}
.su-t{flex:1;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.su-t .field{width:100%}
.su-val{text-align:left!important;min-height:0!important}
.su-picks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.su-mdrow{display:flex;gap:8px}
.su-mdrow .field{min-width:0}
.su-mdrow #su-mdname{flex:1}
.su-mdrow input[type=time]{flex:none;width:136px}
.su-mdrow .btn{flex:none}
#su .tile.list .del{margin-left:auto}
/* "You got it" in the buy sheet (A42): the picture pops with a sparkle, ✓ Yours, an egg flies to the Nest */
.gm-y-yours{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-btn);border:1px solid var(--green-line);color:var(--green);font-weight:800}
.gm-y-done{margin:0;text-align:center;font-weight:700;color:var(--fg)}
.gm-ystage{position:relative}
.gm-ystage.gm-y-pop>*:not(.gm-y-spk){animation:gm-y-pop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes gm-y-pop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.gm-y-spk{position:absolute;font-style:normal;font-size:18px;color:#FFE39A;text-shadow:0 0 8px rgba(255,227,154,.9);pointer-events:none;opacity:0;animation:gm-y-spk 1s ease-out forwards}
@keyframes gm-y-spk{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.6) translateY(-14px)}}
.gm-y-fly{position:fixed;z-index:200;pointer-events:none;transition:transform .65s cubic-bezier(.5,0,.7,.4),opacity .65s ease-in}
#gm-s-nest.gm-y-hit{animation:gm-y-hit .45s ease-out}
@keyframes gm-y-hit{40%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.gm-ystage.gm-y-pop>*,#gm-s-nest.gm-y-hit{animation:none}}
/* what you got from a purchase with real money (A42): gems, the starter pack, Kindlings Plus (classes gm-got) */
.sheet-wrap.gm-gotw{z-index:60;align-items:center}
.gm-gotsheet{align-items:center;text-align:center;gap:10px;max-width:360px}
.gm-gotsheet h2{margin:0;font-size:22px}
.gm-got-ic{display:flex;justify-content:center;align-items:center;min-height:56px;animation:gm-y-pop .6s cubic-bezier(.2,1.5,.4,1)}
.gm-got-sub{color:var(--muted);font-size:14px;line-height:1.45}
.gm-got-sub ul{margin:6px 0 0;padding:0;list-style:none;text-align:left;display:flex;flex-direction:column;gap:4px;color:var(--fg)}
.gm-got-sub li::before{content:'✓ ';color:var(--green)}
#gm-gt-ok{align-self:stretch}
@media (prefers-reduced-motion:reduce){.gm-got-ic{animation:none}}

/* D1: the old address only says where Kindlings went (moved.js) */
body.mvd{display:flex;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg);color:var(--fg)}
.mvd-box{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.mvd-box h1{margin:0;font-size:26px}
.mvd-box p{margin:0;line-height:1.5}
.mvd-ico{border-radius:22px}
.mvd-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;text-decoration:none;font-weight:700}
/* journey results (A45): what came back, put in on Claim */
.gm-jr-sheet{align-items:stretch;gap:12px;max-width:400px;max-height:88vh;overflow-y:auto}
.gm-jr-sheet h2{margin:0;font-size:22px;text-align:center}
.gm-jr-list{display:flex;flex-direction:column;gap:12px}
.gm-jr-one{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;background:var(--tile-2)}
.gm-jr-head{display:flex;align-items:center;gap:10px}
.gm-jr-head .grow{display:flex;flex-direction:column;min-width:0}
.gm-jr-head .grow span{font-size:13px;color:var(--muted)}
.gm-jr-sp{width:56px;height:56px;flex:none}
.gm-jr-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gm-jr-row{display:flex;align-items:center;gap:10px;min-height:36px}
.gm-jr-row .grow{display:flex;flex-direction:column;min-width:0}
.gm-jr-row .grow span{font-size:12px;color:var(--muted)}
.gm-jr-row b{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.gm-jr-ic{width:56px;flex:none;display:flex;justify-content:center;align-items:center}
.gm-jr-ic>svg{max-height:40px}
.gm-jr-xp{font-size:11px;font-weight:800;padding:2px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.gm-jr-art{width:56px;height:56px;display:block}
.gm-jr-up .grow span{color:var(--gold-text);font-weight:700}
.gm-jr-rad b{color:var(--gold-text)}
.gm-jr-all{width:100%;margin-bottom:8px}
.gm-j-few{display:block;margin-top:4px}
/* note formatting (A45): what "# ", "**", "- ", "[ ] " and "---" look like, on the note page and the cards */
.nt-text.nf>*{display:block}
.nf-h{font-size:1.3em;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:.5em 0 .2em}
.nt-text.nf>.nf-h:first-child{margin-top:0}
.nf-gap{min-height:1em}
.nf-ul,.nf-cl{list-style:none;margin:0;padding:0}
.nf-ul li{position:relative;padding-left:1.1em}
.nf-ul li::before{content:'';position:absolute;left:.3em;top:.62em;width:.32em;height:.32em;border-radius:50%;background:var(--muted)}
.nf-c{display:flex;align-items:flex-start;gap:.5em}
.nf-box{flex:none;width:1.05em;height:1.05em;margin-top:.22em;border:2px solid var(--muted);border-radius:.3em;background:none;padding:0;cursor:pointer}
.nf-c.on .nf-box{background:var(--accent);border-color:var(--accent)}
.nf-c.on .nf-box::before{content:'';position:absolute;left:30%;top:12%;width:30%;height:55%;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.nf-c .nf-box{position:relative}
.nf-c.on .nf-t{color:var(--faint);text-decoration:line-through}
.nf-hr{width:100%;border:0;border-top:1px solid var(--border);margin:.7em 0}
.nt-card .nt-text.nf{display:block;-webkit-line-clamp:unset;white-space:normal;max-height:9em;overflow:hidden}
.nt-card .nt-text.nf .nf-h{font-size:1.1em;margin:.2em 0 .1em}
.nf-bar{position:sticky;bottom:0;z-index:3;display:flex;gap:4px;width:100%;max-width:720px;margin:0 auto;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));background:var(--tile);border-top:1px solid var(--border)}
.nf-bar button{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:10px;background:none;color:var(--fg);font:inherit;cursor:pointer}
.nf-bar button:active{background:var(--ctl)}
.nf-bar b{font-size:17px;line-height:1.1}
.nf-bar span{font-size:10px;color:var(--muted)}
.nf-bh{font-weight:800}
.nf-bc{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-radius:4px;margin:2px 0}
/* workout plans (A45): a target reps number by each exercise when "Fill in reps" is on */
.wp-reps{flex:none;display:flex;align-items:center;gap:2px;color:var(--muted);font-size:14px}
.wp-ex .wp-reps .field{flex:none;width:52px;padding-left:4px;padding-right:4px;text-align:center}
.wp-fillnote{margin:-4px 0 8px}
/* a list's card (A46): up to 3 items, one line each, not tickable from the list */
.nt-peek .nt-item{min-height:28px;cursor:inherit}
.nt-peek .nt-item .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a Kindling's passive above its moves in battle (A46) */
.fgc-pas{margin:0 0 8px;padding:8px 10px;border-radius:12px;background:var(--gold-panel);font-size:13px;line-height:1.35;color:var(--fg)}
.fgc-pas b{color:var(--gold-text)}
/* A24 (Hunter, Oct 9): the face-to-face battle (FACE in fg-clash-ui.js): your team on the left, theirs on the right as
   slim cards, no VS line, the moves in two columns and the picked move's words in a box under the passive */
.fgc-face{gap:8px}
.fgc-face.fgc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 6px}
.fgc-face>*{grid-column:1/-1}
.fgc-face>.fgc-mine{grid-column:1;grid-row:1}
.fgc-face>.fgc-them{grid-column:2;grid-row:1}
.fgc-face .fgc-side{padding:8px 5px;gap:5px;border-radius:16px;min-width:0}
.fgc-face .fgc-shead{flex-direction:column;align-items:flex-start;gap:0;padding:0 3px}
.fgc-face .fgc-shead b{font-size:12px;line-height:1.25}
.fgc-face .fgc-status{font-size:10px}
.fgc-face .fgc-row{grid-template-columns:minmax(0,1fr);gap:12px}
.fgc-face .fgc-u{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"art nm nm" "art hp hp" "spd hpn en" "st st st" "plan plan plan";column-gap:6px;row-gap:1px;align-items:center;justify-items:start;text-align:left;padding:8px 7px 6px;border-radius:13px}
.fgc-face .fgc-u .fgc-art,.fgc-face .fgc-tank .fgc-art,.fgc-face .fgc-boss .fgc-art{grid-area:art;width:34px;height:38px;align-self:start}
.fgc-face .fgc-nm{grid-area:nm;gap:4px;font-size:12px;max-width:100%}
.fgc-face .fgc-lv{display:none}
.fgc-face .fgc-hp{grid-area:hp;width:100%;margin:2px 0 0}
.fgc-face .fgc-hpn{grid-area:hpn}
.fgc-face .fgc-en{grid-area:en;justify-self:end}
.fgc-face .fgc-st{grid-area:st;justify-content:flex-start}
.fgc-face .fgc-plan{grid-area:plan;width:100%;min-height:0}
.fgc-face .fgc-plan:empty{display:none}
.fgc-face .fgc-spd{position:static;grid-area:spd;justify-self:center;font-size:9px}
.fgc-face .fgc-u>.fgc-tag{top:-9px;right:4px;font-size:9px;padding:1px 5px}
.fgc-face .fgc-tgest{top:-9px;left:6px;font-size:10px}
.fgc-face .fgc-arrow{top:50%;left:-11px;transform:translateY(-50%);font-size:13px;animation:none}
.fgc-face .fgc-bub{top:50%;transform:translate(-50%,-50%);min-width:64px}
.fgc-face .fgc-u.fgc-act{transform:scale(1.03)}
.fgc-face .fgc-vs{justify-content:flex-start;padding:0 4px}
.fgc-face .fgc-vs span{display:none}
.fgc-face .fgc-vs:not(:has(b)){display:none}
.fgc-face .fgc-lk{margin:0}
.fgc-face .fgc-lkb{padding:6px 8px}
.fgc-face .fgc-lkn{display:none}
.fgc-face .fgc-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.fgc-face.fgc-playing .fgc-opts{display:none}
.fgc-face .fgc-ohead,.fgc-face .fgc-pas,.fgc-face .fgc-mdesc{grid-column:1/-1}
.fgc-face .fgc-pas{margin:0;font-size:12px;line-height:1.35}
.fgc-face .fgc-opt{min-height:44px;padding:6px 10px;gap:6px}
.fgc-face .fgc-opt b{font-size:13px;flex-wrap:wrap;gap:4px}
.fgc-face .fgc-opt:not(:disabled) .fgc-grow>span{display:none}
.fgc-face .fgc-opt:disabled .fgc-grow>span{font-size:11px;line-height:1.3}
.fgc-face .fgc-slot{padding:6px 10px 6px 6px}
.fgc-face .fgc-slot .fgc-art{width:44px;height:48px}
.fgc-mdesc{margin:0;min-height:calc(2 * 1.4em + 16px);padding:8px 12px;border-radius:12px;background:var(--tile-2);font-size:12.5px;line-height:1.4;color:var(--faint)}
.fgc-mdesc.on{color:var(--muted);box-shadow:inset 0 0 0 1px var(--acc-line)}
.fgc-mdesc b{color:var(--fg);font-weight:800}
/* the role symbols (A24, clash.js roleIcon): a shield, a sword, a plus and a star, next to a Kindling's name */
.role-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:5px;vertical-align:-3px;background:color-mix(in srgb,currentColor 18%,transparent)}
.role-ic svg{display:block;width:13px;height:13px}
#gm-mv-sub .role-ic,.gm-xp-role .role-ic,.st-role .role-ic{margin-right:4px}
.gm-bnm b .role-ic,.fgc-slot .fgc-grow b .role-ic{margin-left:2px}
.fgc-grow .role-ic-tank,.role-ic-tank{color:color-mix(in srgb,#6FA8FF 80%,var(--fg))}
.fgc-grow .role-ic-dps,.role-ic-dps{color:var(--red)}
.fgc-grow .role-ic-sup,.role-ic-sup{color:var(--green)}
.fgc-grow .role-ic-spc,.role-ic-spc{color:var(--gold-text)}
/* locked notes (A46): the lock by a card's tags, its stand-in line, and the note page's cover */
.nt-lk{display:inline-flex;color:var(--muted)}
.nt-lkd{font-size:14px;color:var(--muted)}
.nt-lkv{padding-top:48px}
/* a move that jumps ahead (A47) */
.fgc-tag.fgc-first{background:var(--accent-soft);color:var(--accent);margin-left:4px}
/* the note editor (A48): lines already formatted while writing (noteedit.js) */
.nf-ed{position:relative;outline:0;white-space:pre-wrap;overflow-wrap:anywhere;min-height:calc(100dvh - 170px)}
.nf-ed.nf-empty::before{content:attr(data-ph);position:absolute;top:6px;left:0;color:var(--faint);pointer-events:none}
.nf-ed>div{min-height:1.55em}
.nf-ed>div[data-k="h"]{font-size:1.3em;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:.35em 0 .15em}
.nf-ed>div[data-k="h"]:first-child{margin-top:0}
.nf-ed>div[data-k="ul"]{position:relative;padding-left:1.1em}
.nf-ed>div[data-k="ul"]::before{content:'';position:absolute;left:.3em;top:.66em;width:.32em;height:.32em;border-radius:50%;background:var(--muted)}
.nf-ed>div[data-k="cl"]{position:relative;padding-left:32px}
.nf-ed>div[data-k="cl"]::before{content:'';position:absolute;left:0;top:.18em;width:18px;height:18px;border:2px solid var(--muted);border-radius:5px;cursor:pointer}
.nf-ed>div[data-k="cl"][data-on]::before{background:var(--accent);border-color:var(--accent)}
.nf-ed>div[data-k="cl"][data-on]::after{content:'';position:absolute;left:7px;top:calc(.18em + 3px);width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.nf-ed>div[data-k="cl"][data-on]{color:var(--faint);text-decoration:line-through}
.nf-ed>div[data-k="hr"]{min-height:0;height:1px;background:var(--border);margin:.8em 0}
/* egg luck on the Journeys page (Oct 8) */
.gm-j-luck{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.gm-j-luckt{font-size:13px;line-height:1.4;color:var(--muted)}
.gm-j-luckt b{color:var(--fg);margin-right:4px}
.gm-j-luckb{display:block;height:6px;border-radius:999px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.gm-j-luckb i{display:block;height:100%;background:var(--accent);border-radius:999px}
/* Phoenix feathers (A51): the bar on Journeys and the choose-an-element sheet */
.gm-fth{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:10px 12px;border-radius:14px;background:var(--tile);border:1px solid var(--border)}
.gm-fth.full{border-color:color-mix(in srgb,var(--accent) 60%,var(--border))}
.gm-fth .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.gm-fth-ic{flex:none;display:flex}
.gm-fth-t{font-size:13px;line-height:1.4;color:var(--muted)}
.gm-fth-b{display:block;height:6px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.gm-fth-b i{display:block;height:100%;background:var(--accent);border-radius:999px}
.gm-fth .btn{flex:none;width:auto;padding:8px 14px}
.gm-fth-sheet{align-items:stretch;gap:12px;max-width:420px;max-height:88vh;overflow-y:auto}
.gm-fth-sheet h2{margin:0;font-size:22px;text-align:center}
.gm-fth-sheet .note{text-align:center;margin:0}
.gm-fth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.gm-fth-el{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font:inherit;cursor:pointer}
.gm-fth-el b{font-size:13px}
.gm-fth-sp{width:64px;height:64px;display:block}
/* Sudoku (A23): the Daily / level row, the board (9 boxes of 9 squares), the tools and the number pad. Classes sd- */
.sd-body{gap:10px}
.sd-time{min-width:44px;margin-left:10px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.sd-lvls{display:flex;gap:6px;max-width:420px;width:100%;margin:0 auto}
.sd-lv{flex:1;min-width:0;min-height:36px;padding:0 4px;border-radius:999px;border:1px solid var(--border);background:var(--ctl-soft);color:var(--muted);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.sd-lv.on{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.sd-main{display:flex;flex-direction:column;gap:10px}
.sd-bar{display:flex;align-items:center;gap:8px;max-width:420px;width:100%;margin:0 auto;font-size:12px;color:var(--muted)}
.sd-bar .grow{flex:1}
.sd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;max-width:420px;width:100%;margin:0 auto;aspect-ratio:1;border-radius:12px;background:var(--ctl-3)}
.sd-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1px;background:var(--ctl)}
.sd-box:first-child{border-top-left-radius:9px;overflow:hidden}.sd-box:nth-child(3){border-top-right-radius:9px;overflow:hidden}.sd-box:nth-child(7){border-bottom-left-radius:9px;overflow:hidden}.sd-box:nth-child(9){border-bottom-right-radius:9px;overflow:hidden}
.sd-c{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:var(--tile);color:var(--accent);font:inherit;font-size:clamp(17px,5.6vw,24px);font-weight:600;line-height:1;cursor:pointer}
.sd-c.sd-gv{color:var(--fg);font-weight:800}
.sd-c.sd-peer{background:color-mix(in srgb,var(--accent) 7%,var(--tile))}
.sd-c.sd-same{background:color-mix(in srgb,var(--accent) 18%,var(--tile))}
.sd-c.sd-sel{background:color-mix(in srgb,var(--accent) 30%,var(--tile))}
.sd-c.sd-bad{color:var(--red);background:color-mix(in srgb,#FF6B7A 26%,var(--tile));box-shadow:inset 0 0 0 2px var(--red)}
.sd-c.sd-sel.sd-bad{background:color-mix(in srgb,#FF6B7A 38%,var(--tile))}
.sd-c:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sd-n{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.sd-n i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:clamp(8px,2.5vw,11px);font-weight:600;line-height:1;color:var(--muted)}
.sd-n i.sd-nsame{color:var(--accent);font-weight:800}
.sd-grid.sd-over .sd-c{cursor:default}
.sd-making{grid-column:1/-1;grid-row:1/-1;align-self:center;margin:0;text-align:center;color:var(--muted)}
.sd-msg{min-height:20px;max-width:420px;width:100%;margin:0 auto;font-size:13px;line-height:1.4;text-align:center;color:var(--muted)}
.sd-msg.bad{color:var(--red)}
.sd-msg.hint{color:var(--gold-text)}
.sd-play{display:flex;flex-direction:column;gap:10px;max-width:420px;width:100%;margin:0 auto}
.sd-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sd-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;padding:6px 2px;border:0;border-radius:12px;background:var(--ctl-soft);color:var(--fg);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.sd-tool span{font-size:17px;line-height:1}
.sd-tool.on{background:var(--acc-tint);color:var(--accent);box-shadow:inset 0 0 0 1px var(--acc-line)}
.sd-tool:disabled{opacity:.45;cursor:default}
.sd-hn{position:absolute;top:4px;right:6px;min-width:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;line-height:16px}
.sd-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.sd-k{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:0;border:0;border-radius:10px;background:var(--ctl);color:var(--accent);font:inherit;font-size:24px;font-weight:700;line-height:1.1;cursor:pointer}
.sd-k i{min-height:12px;font-style:normal;font-size:10px;font-weight:600;color:var(--muted)}
.sd-k.sd-kfull{opacity:.35}
.sd-opts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px}
.sd-opts .grow{flex:1}
.sd-link{min-height:36px;padding:0 4px;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sd-quit{color:var(--muted)}
.sd-msg .sd-show{min-height:32px;padding:0 4px;text-decoration:underline}
/* the Daily Sudoku's big card on Play: a little Sudoku box in the corner, like the Daily word's tiles */
.sd-herobox{position:absolute;right:14px;top:18px;display:grid;grid-template-columns:repeat(3,22px);gap:2px;padding:3px;border-radius:7px;background:var(--ctl-3)}
.sd-herobox i{width:22px;height:22px;display:grid;place-items:center;background:var(--tile-2);font-style:normal;font-size:12px;font-weight:800;color:var(--fg)}
.sd-herobox i:first-child{border-top-left-radius:4px}.sd-herobox i:nth-child(3){border-top-right-radius:4px}.sd-herobox i:nth-child(7){border-bottom-left-radius:4px}.sd-herobox i:last-child{border-bottom-right-radius:4px}
.sd-herobox i.sd-hin{background:color-mix(in srgb,var(--accent) 30%,var(--tile));color:var(--accent)}
.sd-hero .gm-lvlink{margin-top:-2px}
/* Flow (A23): the board is three layers on one grid: the squares (tinted by the line through them), the lines (an SVG,
   one polyline per color) and the lights (each an element's color and symbol). Classes fl- */
.fl-body{gap:10px}
.fl-wrap{width:100%;max-width:440px;margin:0 auto}
.fl-board{--n:5;position:relative;width:100%;aspect-ratio:1;border-radius:14px;background:var(--ctl-3);padding:2px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.fl-cells,.fl-dots{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr))}
.fl-cells{gap:1px;border-radius:12px;overflow:hidden}
.fl-c{background:var(--tile);transition:background .12s}
.fl-c.fl-on{background:color-mix(in srgb,var(--c) 20%,var(--tile))}
.fl-c.fl-two{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,var(--tile)) 50%,color-mix(in srgb,var(--c2) 22%,var(--tile)) 50%)}
.fl-c.fl-hole{background:repeating-linear-gradient(45deg,var(--ctl-3) 0 3px,var(--ctl-2) 3px 7px)}
.fl-lines .fl-brs{fill:none;stroke:var(--faint);stroke-width:.05;stroke-dasharray:.12 .08}
.fl-making{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:14px}
.fl-lines{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);pointer-events:none;overflow:visible}
.fl-lines polyline{fill:none;stroke-width:.3;stroke-linecap:round;stroke-linejoin:round}
.fl-dots{pointer-events:none}
.fl-dot{place-self:center;display:grid;place-items:center;width:72%;height:72%;border-radius:50%;background:var(--c);color:rgba(0,0,0,.62);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28)}
.fl-dot svg{width:58%;height:58%}
.fl-big .fl-dot{width:78%;height:78%}
.fl-dot.fl-act{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28),0 0 0 3px color-mix(in srgb,var(--c) 45%,transparent)}
.fl-dot.fl-ok{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28),0 0 10px var(--c)}
.fl-dot.fl-new{animation:fl-pop .35s ease-out}
@keyframes fl-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.fl-board.fl-won{box-shadow:0 0 0 2px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:box-shadow .3s}
.fl-msg{min-height:20px;max-width:440px;width:100%;margin:0 auto;font-size:13px;line-height:1.4;text-align:center;color:var(--gold-text)}
@media (prefers-reduced-motion:reduce){.fl-dot.fl-new{animation:none}}
/* Kindling Trials' rewards (Oct 10): the shared meters, the day's chest and boss chest line, what a win brought, and the
   Radiant shadow (a shadow that keeps a golden shine; class fgc-radsh) */
.gm-tv-rw{display:flex;flex-direction:column;gap:6px}
.gm-tv-got{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--gold-panel);border:1px solid var(--gold-line);font-size:13px;text-align:center}
.gm-tv-got .m3-chest{color:var(--gold-text);font-weight:700}
.gm-tv-rwl{margin:0;font-size:12px;text-align:center}
.gm-tv-radn{margin:0;text-align:center;color:var(--gold-text);font-weight:700}
.gm-tv-radn .rdm{vertical-align:-2px}
/* (raids) a boss in the Spirit look: made of glowing light in its raid's colour (--rgb), like the raid pages' (.rd-sp) */
.fgc-shadow.fgc-rsp .fgc-art .ss{filter:brightness(1.35) saturate(1.7) drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px rgb(var(--rgb,150 200 255))) drop-shadow(0 0 26px rgb(var(--rgb,150 200 255) / .7))!important;opacity:.94}
.fgc-shadow.fgc-radsh .fgc-art .ss{filter:brightness(.7) saturate(.5) contrast(1.1) drop-shadow(0 0 4px hsl(46 100% 62% / .95)) drop-shadow(0 0 14px hsl(40 100% 55% / .55))!important}
.fgc-bosslbl.fgc-radlbl{background:var(--gold);color:var(--gold-ink)}
/* A friend game that fills the screen (full: true, Gin Rummy; Hunter Oct 10: "putting everything in a window instead
   of full screen is odd"): no title, players row, hint or note above and under the board (the game shows its own);
   the back arrow floats top left; the board is the whole page. */
.np.fr-gfull{background:var(--bg)}
/* Gin's table is always the Kindling showdown (Hunter, Oct 10: "a darker background with more of a glowing orange",
   "little embers floating around… here and there"): Ember's dark colors in every theme (the frame names the game in data-fg), a fire glow behind the
   Kindling, and embers drifting up (.fgg-embers, one layer on the page so a repaint doesn't restart them) */
.np.fr-gfull[data-fg="gin"],.np.fr-gfull[data-fg="dice"],.np.fr-gfull[data-fg="clash"],.np.fr-gfull[data-fg="word"],.np.fr-gfull[data-fg="grid"],#gm-trials,.np.pzf{color:var(--fg);
  background:radial-gradient(34% 20% at 50% 15%,var(--tb-glow) 0%,var(--tb-glow2) 60%,transparent 100%),radial-gradient(85% 50% at 50% 18%,var(--tb-a) 0%,var(--tb-b) 50%,var(--bg) 100%) var(--bg)}
/* (A61, Hunter Oct 10: "make all the games UI match the theme equipped": the table was always Ember's; now it's the
   theme's own colors with its glow, and Ember's looks as before) */
html:not([data-theme="daylight"]) :is(.np.fr-gfull[data-fg="gin"],.np.fr-gfull[data-fg="dice"],.np.fr-gfull[data-fg="clash"],.np.fr-gfull[data-fg="word"],.np.fr-gfull[data-fg="grid"],#gm-trials,.np.pzf){--gold-text:#F7D88E;--green:#73D9A2}
.fgg-embers{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.np:not([data-fg="gin"]):not([data-fg="dice"]):not([data-fg="clash"]):not([data-fg="word"]):not([data-fg="grid"]):not(#gm-trials) .fgg-embers{display:none}
#gm-trials .np-body,.pzf .np-body{position:relative;z-index:1}
.fr-gfull .np-body{position:relative;z-index:1}
.fgg-embers i{position:absolute;left:var(--x);bottom:-10px;width:calc(var(--s) + 1px);height:calc(var(--s) + 1px);border-radius:50%;background:var(--spark);box-shadow:0 0 8px 3px color-mix(in srgb,var(--hot) 85%,transparent),0 0 2px 1px var(--spark-core);opacity:0;animation:fgg-ember var(--d) linear var(--l) infinite}
@keyframes fgg-ember{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(var(--dx),-50vh);opacity:.8}85%{opacity:.35}100%{transform:translate(calc(var(--dx) * -.6),-100vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.fgg-embers i{animation:none;opacity:.35;bottom:auto;top:var(--y)}}
.fr-gfull .np-bar{position:absolute;top:0;left:0;width:auto;background:none;z-index:6;padding-right:0}
.fr-gfull #fr-gm-back{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fr-gfull .gm-back{width:44px;justify-content:center;color:var(--fg)}
.fr-gfull .np-body{padding:0 0 calc(8px + env(safe-area-inset-bottom,0px));min-height:100%;gap:8px;flex:1 0 auto}   /* (A68: grows with the table, so the page scrolls instead of the table running under the home buttons) */
.fr-gfull #fr-gm-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.fr-gfull #fr-gm-about,.fr-gfull #fr-gm-players,.fr-gfull #fr-gm-hint,.fr-gfull #fr-gm-note{display:none}
.fr-gfull:not(.fr-gover) #fr-gm-rec{display:none}
.fr-gfull #fr-gm-live{margin:calc(56px + env(safe-area-inset-top,0px)) 16px -48px;position:relative;z-index:4}
.fr-gfull #fr-gm-board{flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;border-radius:0;background:none;gap:0}
.fr-gfull #fr-gm-btns,.fr-gfull #fr-gm-rec{padding:0 16px}
.fr-gfull #fr-gm-btns:not(:has(>:not([hidden]))){display:none}   /* (A68: with nothing showing, its gap made a full-screen table 8px taller than the screen, now that the page scrolls instead of eating its room for the bars) */
.fr-gfull .fr-gquit{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:8px;z-index:5;width:auto;min-height:44px;padding:0 12px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:700}
.fr-gfull .fr-gquit.fr-gqarm{top:calc(58px + env(safe-area-inset-top,0px));left:16px;right:16px;min-height:44px;border-radius:14px;background:color-mix(in srgb,#E5484D 85%,#000);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.fr-gover .fgg-t,.fr-gover #fr-gm-board{min-height:0;flex:none}
.fgx-init,.fgg-mek.fgx-init{display:grid;place-items:center;border-radius:50%;background:var(--tile-2);font-weight:800;font-size:20px;color:var(--fg)}

/* Gin Rummy (A22), the Kindling showdown (Hunter picked it of 4 looks, Oct 10): the other side's Kindling at the top
   holding its cards (flame backs) with a few words, the pile and the face-up card glowing on your turn, the fire bar
   of your deadwood with the knock line, your hand in melds (green trays) then the rest, you and Knock at the bottom.
   Card sizes follow the board's width (container units), so 11 cards fit at 360px. Classes fgg- */
.fgg-t{position:relative;flex:1;display:flex;flex-direction:column;min-height:calc(100dvh - 8px - env(safe-area-inset-bottom,0px));container-type:inline-size;color:var(--fg)}
.fgg-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:calc(8px + env(safe-area-inset-top,0px)) 76px 0}
.fgg-sc{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.fgg-sc b{font-size:24px;font-weight:800;line-height:1}
.fgg-sc span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgg-sc i{font-style:normal;color:var(--faint)}
.fgg-goal{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fgg-foe{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:2px;min-height:150px}
.fgg-kin{width:104px;height:104px;display:block}
.fgg-kin .ss{width:100%!important}
.fgg-bub{position:absolute;top:2px;left:calc(50% + 50px);right:12px;max-width:150px;padding:8px 11px;border-radius:14px 14px 14px 4px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:700;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fgg-bub.fgg-pop{animation:fgg-pop .3s cubic-bezier(.2,.9,.3,1.3)}   /* only when it says something new */
@keyframes fgg-pop{from{transform:scale(.6);opacity:0}}
.fgg-fan{display:flex;justify-content:center;margin-top:-30px;min-height:56px}
.fgg-fan .fgg-c{--w:36px;margin-left:-24px;transform-origin:50% 150%}
.fgg-fan .fgg-c:first-child{margin-left:0}
.fgg-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:130px}
.fgg-piles{display:flex;align-items:flex-start;justify-content:center;gap:28px}
.fgg-pile{flex-direction:column;align-items:center;gap:10px}
.fgg-wait .fgg-pile>.fgg-c{opacity:.7}
.fgg-pile{position:relative;display:flex}
.fgg-mid .fgg-c{--w:72px}
.fgg-n{position:absolute;right:-9px;bottom:-9px;padding:3px 8px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:800;line-height:1.2}
.fgg-c.fgg-go{box-shadow:0 0 0 3px color-mix(in srgb,var(--hot-lite) 55%,#fff),0 0 0 7px color-mix(in srgb,var(--accent) 45%,transparent),0 0 36px 6px color-mix(in srgb,var(--hot) 85%,transparent);animation:fgg-glow 1.2s ease-in-out infinite}
@keyframes fgg-glow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--hot-lite) 55%,#fff),0 0 0 10px color-mix(in srgb,var(--accent) 25%,transparent),0 0 52px 12px color-mix(in srgb,var(--hot) 95%,transparent)}}
.fgg-pl{padding:3px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;letter-spacing:.02em;animation:fgg-hop 1.2s ease-in-out infinite}
@keyframes fgg-hop{50%{transform:translateY(-4px)}}
/* whose turn: a pill over the piles; yours is bright and pops in when it starts; the table around you glows */
.fgg-turn{padding:5px 14px;border-radius:999px;background:var(--tile-2);color:var(--muted);font-size:13px;font-weight:800}
.fgg-turn.fgg-tme{padding:7px 20px;background:linear-gradient(180deg,var(--hot-lite),var(--accent));color:var(--accent-ink);font-size:16px;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 24px color-mix(in srgb,var(--hot) 70%,transparent)}
.fgg-turn.fgg-tin{animation:fgg-stamp calc(.5s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4)}
.fgg-hand{position:relative}
.fgg-pick::before{content:'';position:absolute;inset:6px 4px -6px;border-radius:24px;pointer-events:none;background:radial-gradient(60% 80% at 50% 100%,color-mix(in srgb,var(--hot) 32%,transparent),transparent 75%)}
.fgg-me.fgg-mine b{color:var(--accent)}
.fgg-me.fgg-mine .fgg-mek{border-radius:50%;box-shadow:0 0 0 3px var(--accent),0 0 20px color-mix(in srgb,var(--hot) 70%,transparent)}
.fgg-say{margin:6px 16px 8px;min-height:20px;text-align:center;font-size:14px;font-weight:700;color:color-mix(in srgb,var(--accent) 70%,var(--fg))}
.fgg-deal{flex-direction:column;gap:14px;padding:0 24px}
.fgg-dealb{font-size:17px;padding:14px 28px}
.fgg-rules{margin:0;max-width:320px;text-align:center;font-size:13px;line-height:1.45;color:var(--muted)}
/* the cards: white faces (hearts and diamonds red), a corner each way and the suit (or the picture card) in the middle */
.fgg-c{--w:52px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w) * 1.4);padding:0;margin:0;border:0;border-radius:calc(var(--w) * .14);background:linear-gradient(160deg,#FFFFFF,#F5F1EA);color:#1C1D21;font:inherit;font-weight:800;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.32);transition:transform .15s;-webkit-tap-highlight-color:transparent}
.fgg-c.fgg-red{color:#C8242F}
button.fgg-c{cursor:pointer}
.fgg-k1,.fgg-k2{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:calc(var(--w) * .28)}
.fgg-k1{top:5%;left:7%}.fgg-k2{right:7%;bottom:5%;transform:rotate(180deg)}
.fgg-k1 i,.fgg-k2 i{font-style:normal;font-size:.82em}
.fgg-km{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--w) * .5)}
.fgg-face .fgg-km{font-size:calc(var(--w) * .32)}
.fgg-c.fgg-sel{z-index:2;transform:translateY(-16px);box-shadow:0 0 0 3px var(--accent),0 10px 18px rgba(0,0,0,.4)}
.fgg-c.fgg-new{box-shadow:0 0 0 2px var(--accent),0 4px 10px rgba(0,0,0,.32)}
.fgg-c.fgg-new::after{content:'';position:absolute;top:-5px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.fgg-c.fgg-dim{background:#EDEAE4}
.fgg-c.fgg-sm{--w:26px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fgg-sm .fgg-k2,.fgg-sm .fgg-km{display:none}
.fgg-sm .fgg-k1{inset:0;justify-content:center;font-size:12px;gap:1px}
.fgg-back{display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 85%,#fff),color-mix(in srgb,var(--accent) 70%,#000));box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 45%,transparent),0 3px 8px rgba(0,0,0,.35);color:#fff}
.fgg-back svg{width:44%;height:44%;fill:currentColor;opacity:.9}
.fgg-empty{background:none;box-shadow:inset 0 0 0 2px var(--border)}
.fgg-ghost{--w:72px}
/* the fire bar: your deadwood, the knock line at 10 */
.fgg-fire{display:flex;align-items:center;gap:12px;margin:14px 16px 4px}
.fgg-bar{position:relative;flex:1;height:12px;border-radius:9px;background:var(--tile-2)}
.fgg-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#FFE08A,var(--accent),color-mix(in srgb,var(--accent) 60%,#B91C1C));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);transition:width .3s}
.fgg-can .fgg-bar b{background:linear-gradient(90deg,#BBF7D0,var(--green));box-shadow:0 0 14px color-mix(in srgb,var(--green) 70%,transparent)}
.fgg-bar i{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--fg)}
.fgg-bar em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:1px;font-style:normal;font-size:10px;font-weight:800;color:var(--muted)}
.fgg-dw{flex:none;max-width:48%;font-size:13px;font-weight:800;text-align:right}
/* your hand: melds in green trays, then the rest; sizes from the board's width */
/* (Hunter, Oct 10: "a little larger so I can see them easily") a card can be as wide as 11 loose cards in one row allow.
   Two rows (A58, Hunter Oct 10: melds "should always move and stay on the top row"): the melds' trays on top, the rest
   at the bottom, never wrapping; when the melds don't fit on one row, its cards get smaller (--n cards in --g trays:
   each tray is 8px plus half a card per card after its first, 5px between trays). In play an empty top row keeps its
   place with a faint tray, so the rows don't jump. */
.fgg-hand{--cw:clamp(42px,calc((100cqw - 40px) / 6.1),66px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;padding:22px 6px 6px;min-height:110px}
.fgg-hand .fgg-c{--w:var(--cw)}
.fgg-mrow,.fgg-drow{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:5px;max-width:100%}
.fgg-hand .fgg-mrow .fgg-c{--w:min(var(--cw),calc((100cqw - 16px - var(--g) * 13px) * 2 / (var(--n) + var(--g))))}
.fgg-mnone{align-self:stretch;margin:0 8px;min-height:calc(var(--cw) * 1.4 + 8px);align-items:center;border-radius:12px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--green) 22%,transparent);border:0}
.fgg-dnone{min-height:calc(var(--cw) * 1.4 + 8px)}
.fgg-mhint{font-size:12px;font-weight:600;color:color-mix(in srgb,var(--fg) 40%,transparent)}
.fgg-meld,.fgg-dead{display:flex;flex:none}
.fgg-meld{padding:4px;border-radius:12px;background:color-mix(in srgb,var(--green) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--green) 55%,transparent)}
.fgg-dead{padding:4px 0}
.fgg-meld .fgg-c+.fgg-c,.fgg-dead .fgg-c+.fgg-c{margin-left:calc(var(--w) * -.5)}
.fgg-me{display:flex;align-items:center;gap:10px;padding:4px 16px 8px}
.fgg-mek{width:50px;height:50px;flex:none;display:block}
.fgg-mek .ss{width:100%!important}
.fgg-me b{font-size:14px}
.fgg-knock{margin-left:auto;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid color-mix(in srgb,var(--accent) 50%,transparent);background:none;color:color-mix(in srgb,var(--accent) 70%,var(--fg));font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.fgg-knock:disabled{opacity:.45;cursor:default}
.fgg-knock.fgg-kon{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 75%,#fff),var(--accent));color:var(--accent-ink);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}
/* a hand ends (Hunter, Oct 10: "just flip their cards over and show them and then show the score in the center… with a
   +whatever and an animation"): their cards turn face up one by one at the top, your hand as it ended at the bottom,
   and in the middle who knocked, the points popping in and counting up (gold when they're yours), an undercut called
   out, and the winner's score bumping at the top. Next hand puts it away. */
/* their cards in the same two rows, each card shrinking a little when a row is full (2px between cards, 4px between trays) */
.fgg-open{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-18px;padding:0 12px;perspective:600px}
.fgg-open .fgg-mrow,.fgg-open .fgg-drow{gap:4px}
.fgg-open .fgg-c{--w:min(30px,calc((100cqw - 28px - var(--g) * 6px) / var(--n) - 2px))}
.fgg-open .fgg-meld{padding:2px;border-radius:8px}
.fgg-open .fgg-meld .fgg-c+.fgg-c,.fgg-open .fgg-dead .fgg-c+.fgg-c{margin-left:2px}
.fgg-open .fgg-dead{display:flex;gap:2px;padding:2px 0}
/* (Hunter, Oct 10: "the card turning over needs to be sped up a lot. looks so choppy") each card turns in a quick
   quarter second with depth, one after another; not slowed by the table's pace */
.fgg-flip .fgg-c{animation:fgg-turnup .26s linear backwards;animation-delay:calc(var(--i) * 45ms + 100ms * var(--fgg-pace,1) + var(--fgg-lead,0ms))}
@keyframes fgg-turnup{0%{transform:perspective(500px) rotateY(180deg);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 85%,#fff),color-mix(in srgb,var(--accent) 70%,#000));color:transparent;animation-timing-function:ease-in}49.9%{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 85%,#fff),color-mix(in srgb,var(--accent) 70%,#000));color:transparent}50%{transform:perspective(500px) rotateY(90deg);animation-timing-function:ease-out}100%{transform:perspective(500px) rotateY(0deg)}}
.fgg-odw{margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.fgg-rmid{gap:4px}
.fgg-burst{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 16px;text-align:center}
.fgg-burst p{margin:0}
.fgg-bt{font-size:15px;font-weight:800;color:var(--muted)}
.fgg-bu{font-size:20px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#FF7A6B;text-shadow:0 0 14px rgba(255,90,70,.6)}
.fgg-bp{display:flex;flex-direction:column;align-items:center;line-height:1}
.fgg-bp b{font-size:64px;font-weight:900;color:var(--fg);text-shadow:0 0 24px color-mix(in srgb,var(--accent) 70%,transparent);font-variant-numeric:tabular-nums}
.fgg-mewon .fgg-bp b{color:var(--gold-text);text-shadow:0 0 26px rgba(245,196,81,.65)}
.fgg-bp span{margin-top:2px;font-size:18px;font-weight:800}
.fgg-bw{font-size:24px;font-weight:900}
.fgg-bs{margin-top:6px!important;font-size:12px;font-weight:700;color:var(--muted)}
/* (the end of a hand at the table's pace, after a short pause so the last card lands first: --fgg-pace, --fgg-lead) */
.fgg-burst.fgg-in .fgg-bt{animation:fgg-fade calc(.3s * var(--fgg-pace,1)) ease-out var(--fgg-lead,0ms) backwards}
.fgg-burst.fgg-in .fgg-bu{animation:fgg-stamp calc(.5s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4) calc(.35s * var(--fgg-pace,1) + var(--fgg-lead,0ms)) backwards}
.fgg-burst.fgg-in .fgg-bp{animation:fgg-stamp calc(.6s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4) calc(.45s * var(--fgg-pace,1) + var(--fgg-lead,0ms)) backwards}
.fgg-burst.fgg-in .fgg-bs,.fgg-burst.fgg-in .fgg-ok,.fgg-burst.fgg-in .fgg-win{animation:fgg-fade calc(.4s * var(--fgg-pace,1)) ease-out calc(1.1s * var(--fgg-pace,1) + var(--fgg-lead,0ms)) backwards}
@keyframes fgg-fade{from{opacity:0;transform:translateY(8px)}}
@keyframes fgg-stamp{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.92)}100%{transform:none}}
.fgg-gin.fgg-in:is(.fgg-k-call,.fgg-k-score)::after{content:'';position:absolute;inset:-30px;pointer-events:none;background-repeat:no-repeat;background-image:radial-gradient(circle,var(--gold) 0 5px,transparent 6px),radial-gradient(circle,var(--accent) 0 4px,transparent 5px),radial-gradient(circle,var(--gold) 0 4px,transparent 5px),radial-gradient(circle,var(--accent) 0 5px,transparent 6px),radial-gradient(circle,var(--gold) 0 3px,transparent 4px),radial-gradient(circle,var(--accent) 0 4px,transparent 5px),radial-gradient(circle,var(--gold) 0 5px,transparent 6px),radial-gradient(circle,var(--accent) 0 3px,transparent 4px);background-size:40px 40px;background-position:8% 12%,30% 2%,62% 6%,92% 14%,4% 70%,96% 64%,22% 96%,78% 94%;opacity:0;animation:fgg-burstfx calc(1.2s * var(--fgg-pace,1)) ease-out calc(.5s * var(--fgg-pace,1) + var(--fgg-lead,0ms))}
@keyframes fgg-burstfx{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.3)}}
.fgg-sc b.fgg-bump{animation:fgg-bump calc(.7s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4) calc(1s * var(--fgg-pace,1) + var(--fgg-lead,0ms)) backwards}
@keyframes fgg-bump{0%{transform:none}40%{transform:scale(1.5);color:var(--gold-text);text-shadow:0 0 18px rgba(245,196,81,.8)}100%{transform:none}}
.fgg-win{margin:8px 0 0!important;font-size:22px;font-weight:800}
.fgg-fin .fgg-c{cursor:default}
.fgg-ok{align-self:center;margin-top:4px;padding:12px 28px}
/* the end of a hand, step by step (A63): Knock! (or Gin!) stamped big, both hands, the lay-offs (gold-ringed cards that
   fly onto the knocker's melds), the deadwood counting up, then the score; a tap anywhere on the table goes on, and the
   box keeps one size so nothing around it jumps between steps. Play again waits for the last step */
.fgg-kst{cursor:pointer}
#fr-game:has(.fgg-kst) #fr-gm-btns{visibility:hidden}
.fgg-rmid .fgg-burst{min-height:224px;justify-content:center}
.fgg-bk{font-size:58px;font-weight:900;line-height:1.05;color:var(--fg);text-shadow:0 0 26px color-mix(in srgb,var(--hot) 80%,transparent)}
.fgg-gin .fgg-bk{color:var(--gold-text);text-shadow:0 0 26px rgba(245,196,81,.65)}
.fgg-blo{letter-spacing:.06em;color:var(--gold-text)}
.fgg-bdw{display:flex;justify-content:center;gap:32px}
.fgg-bdw span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;font-weight:800;color:var(--muted)}
.fgg-bdw b{font-size:48px;font-weight:900;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.fgg-c.fgg-lo{box-shadow:0 0 0 2px var(--gold),0 4px 10px rgba(0,0,0,.32)}
.fgg-burst.fgg-in .fgg-bk{animation:fgg-stamp calc(.5s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4) calc(.1s * var(--fgg-pace,1) + var(--fgg-lead,0ms)) backwards}
.fgg-burst.fgg-in:not(.fgg-k-score) .fgg-bw,.fgg-burst.fgg-in .fgg-bdw{animation:fgg-stamp calc(.5s * var(--fgg-pace,1)) cubic-bezier(.2,.9,.3,1.4) calc(.15s * var(--fgg-pace,1)) backwards}
.fgg-burst.fgg-in:not(.fgg-k-score) .fgg-bs{animation-delay:calc(.5s * var(--fgg-pace,1))}

/* Kindling Dice (A22): Gin's Kindling showdown table (its dark Ember colors, the embers, the top score, the bubble, the
   turn pill and you at the bottom) with the dice in the middle and both scorecards side by side. A die you keep rises
   with a glowing ring; rolled ones tumble (after()). Your empty boxes show what the dice would score, glowing to tap.
   Sized to fit a 360×780 phone. Classes fgd- */
.fgd-t{min-height:calc(100dvh - 8px - env(safe-area-inset-bottom,0px));padding-bottom:12px}
.fgd-foe{position:relative;display:flex;flex-direction:column;align-items:center;min-height:82px}
.fgd-kin{width:78px;height:78px;display:block}
.fgd-kin .ss{width:100%!important}
.fgd-foe .fgg-bub{left:calc(50% + 38px)}
.fgd-mid{display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 12px 0;min-height:calc(112px + clamp(46px,13cqw,60px));box-sizing:border-box}
/* A63 (Hunter: "Kindling Dice still resizes while playing"): one size for whatever is showing, so the scorecard never
   moves: the turn pill is the same height on both turns, the hint one line, and the middle keeps its room at the end */
.fgd-mid .fgg-turn{height:38px;display:inline-flex;align-items:center;box-sizing:border-box}
.fgd-t>.fgg-say{height:21px;min-height:0;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgd-dice{display:flex;gap:10px;justify-content:center;padding-top:8px}
.fgd-die{--d:clamp(46px,13cqw,60px);position:relative;display:grid;grid-template-areas:"p1 p2 p3" "p4 p5 p6" "p7 p8 p9";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:var(--d);height:var(--d);padding:calc(var(--d) * .16);border:0;border-radius:calc(var(--d) * .2);background:linear-gradient(160deg,#FFFFFF,#F1ECE4);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.fgd-die i{display:block;place-self:center;width:calc(var(--d) * .17);height:calc(var(--d) * .17);border-radius:50%;background:#2A1A12}
.fgd-die.fgd-blank{background:color-mix(in srgb,var(--tile-2) 80%,transparent);box-shadow:inset 0 0 0 1.5px var(--border)}
button.fgd-die{cursor:pointer}
.fgd-die.fgd-held{transform:translateY(-8px);box-shadow:0 0 0 3px var(--accent),0 0 18px color-mix(in srgb,var(--hot) 75%,transparent),0 8px 14px rgba(0,0,0,.4)}
.fgd-die.fgd-held i{background:color-mix(in srgb,var(--hot) 75%,#000)}
.fgd-theirs .fgd-die.fgd-held{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),0 6px 12px rgba(0,0,0,.4)}
.fgd-die.fgd-tumble{animation:fgd-tumble .55s cubic-bezier(.3,.7,.3,1) backwards}
@keyframes fgd-tumble{0%{transform:translateY(-34px) rotate(-200deg) scale(.7);opacity:.2}60%{transform:translateY(4px) rotate(12deg) scale(1.04);opacity:1}100%{transform:none}}
.fgd-act{display:flex;align-items:center;gap:12px;min-height:44px}
.fgd-roll{min-width:150px;min-height:44px;border-radius:999px;font-weight:800}
.fgd-roll.fgd-ron{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 75%,#fff),var(--accent));color:var(--accent-ink);border-color:transparent;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}
.fgd-roll:disabled{opacity:.5}
.fgd-left{display:flex;gap:5px}
.fgd-left i{width:10px;height:10px;border-radius:50%;background:var(--tile-2);box-shadow:inset 0 0 0 1.5px var(--border)}
.fgd-left i.fgd-on{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.fgd-theirsl i.fgd-on{background:var(--muted);box-shadow:none}
.fgd-card{width:calc(100% - 24px);max-width:520px;margin:0 auto;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.fgd-card th,.fgd-card td{padding:0 8px;height:27px;border-bottom:1px solid var(--line);text-align:right}
.fgd-card thead th{height:22px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:0;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgd-card tbody th{text-align:left;font-weight:600;color:var(--muted)}
.fgd-card td{width:76px;font-weight:800}
.fgd-card .fgd-e{color:var(--faint);font-weight:600}
.fgd-card .fgd-sub th,.fgd-card .fgd-sub td{height:22px;font-size:11px;color:var(--faint);font-weight:700}
.fgd-card .fgd-tot th,.fgd-card .fgd-tot td{height:32px;border-bottom:0;font-size:15px;color:var(--fg);font-weight:900}
.fgd-card tr.fgd-last th{color:var(--fg)}
.fgd-can{min-width:56px;min-height:24px;padding:0 10px;border:0;border-radius:9px;font:inherit;font-weight:800;cursor:pointer;transform:translateY(-1px)}
/* A61: the boxes you can score in are raised (points big, a lip under them); the best one for these dice glows */
.fgd-can.fgd-pts{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 34%,var(--tile-2)),color-mix(in srgb,var(--accent) 20%,var(--tile)));color:#fff;font-size:15px;box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 45%,#000),inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.fgd-can.fgd-best{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));color:var(--accent-ink);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 50%,#000),0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);animation:fgd-glow 2.4s ease-in-out infinite}
@keyframes fgd-glow{50%{box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 50%,#000),0 0 20px color-mix(in srgb,var(--accent) 95%,transparent)}}
.fgd-can.fgd-zero{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--muted);box-shadow:0 2px 0 rgba(0,0,0,.5),inset 0 0 0 1px var(--border)}
.fgd-can.fgd-arm{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-text);box-shadow:0 2px 0 rgba(0,0,0,.5),inset 0 0 0 2px var(--gold);transform:none}
.fgd-card .fgd-v{display:inline-block;min-width:44px;text-align:right}
.fgd-card td{position:relative}
.fgd-xf{position:absolute;top:1px;right:3px;font-size:9px;line-height:1;font-weight:800;color:var(--gold-text)}
/* the 0 asks once, in a fixed spot: "Score 0 in Chance" and Cancel where Roll is */
.fgd-zbar{gap:8px}
.fgd-z0{min-height:44px;border-radius:999px;background:var(--gold);color:var(--gold-ink);border:0;font-weight:800;padding:0 18px}
.fgd-zno{min-height:44px;border-radius:999px;padding:0 16px}
.fgd-v.fgd-pop{display:inline-block;animation:fgd-pop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes fgd-pop{0%{transform:scale(2);color:var(--gold-text)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.fgd-die,.fgd-die.fgd-tumble,.fgd-v.fgd-pop,.fgd-can.fgd-best{animation:none;transition:none}}
/* A60, the arena (v0.3.66; Hunter, Oct 10, from the moving mockup docs/clash-motion.html): Kindling Clash and
   Kindling Trials on the showdown table (the colors above). Kindlings stand without boxes, a thin health bar with a
   lagging white part, a small order number (yours blue, theirs red), state icons; the one choosing is raised on a
   glowing ring; the dock is a line and 4 move buttons; a Kindling's card and the round's log open over the table. */
.fgc-sl{--fgc-me:#5EB8FF;--fgc-them:#FF6B7A;--fgc-fr:#FF9CCB;position:relative;gap:6px}
.fr-gfull .fgc-sl{position:static;padding:calc(58px + env(safe-area-inset-top,0px)) 10px 0}
.fgc-sl-top{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.fr-gfull .fgc-sl-top{position:absolute;top:0;left:64px;right:96px;height:calc(56px + env(safe-area-inset-top,0px));justify-content:center;padding-top:env(safe-area-inset-top,0px)}
.fgc-sl-top b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fgc-sl-sub2{font-size:11px;font-weight:700;color:var(--muted)}
.fgc-sl-fr.on{color:var(--green)}
#gm-trials:has(.fgc-sl:not(.fgc-sl-team)) .gm-pgh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
#gm-trials:has(.fgc-sl:not(.fgc-sl-team)) .gm-pgsub{display:none}
#gm-trials .gm-tv-board{background:none;border:0;padding:0}
#gm-trials .gm-pgbar{background:none}
#gm-trials .fgc-sl-top{margin-top:-8px}
.fgc-sl-rnd{font-style:normal}

.fgc-sl .fgc-side{padding:0;border:0;border-radius:0;background:none}
.fgc-sl .fgc-row{gap:2px}
.fgc-sl-gap{height:clamp(16px,6vh,64px);margin:0 -10px;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--hot) 12%,transparent),transparent)}
/* a Kindling on the table */
.fgc-sl .fgc-au{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:20px 0 2px;border:0;border-radius:18px;background:none;box-shadow:none;overflow:visible;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
.fgc-sl .fgc-au .fgc-art{width:80px;height:76px;background:none;overflow:visible}
.fgc-sl .fgc-mine .fgc-au .fgc-art{width:92px;height:86px}
.fgc-sl .fgc-au.fgc-boss .fgc-art{width:92px;height:84px}
.fgc-sl .fgc-au::after{content:"";position:absolute;top:84px;left:50%;width:90px;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hot) 35%,transparent),transparent);z-index:-1;pointer-events:none}
.fgc-sl .fgc-mine .fgc-au::after{top:94px}
.fgc-sl .fgc-au .fgc-nm{gap:3px;font-size:12px}
.fgc-sl .fgc-au .fgc-nm .role-ic{transform:scale(.8)}
.fgc-sl .fgc-au .fgc-hp{position:relative;width:76px;height:5px;margin-top:1px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.fgc-sl .fgc-au .fgc-hp i{position:relative;z-index:1}
.fgc-sl .fgc-gh{position:absolute;inset:0 auto 0 0;background:#fff;opacity:.55;border-radius:4px;transition:width .6s ease-out .45s}
.fgc-sl .fgc-au .fgc-hpn{font-size:9px;line-height:12px;height:12px;white-space:nowrap;color:var(--faint)}
.fgc-sl .fgc-au .fgc-hpn-x b{font-weight:800}
.fgc-sl .fgc-au .fgc-en i{width:5px;height:5px}
.fgc-sl .fgc-plan{font-size:10px;font-weight:700;color:var(--fgc-me);min-height:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* (A72 item 20) the turn numbers, only while a round plays: a small light circle before the name, the one acting gold
   and glowing, the ones done faded (the battle's labels sit on the world, so fixed colors like the names') */
.fgc-ob{position:absolute;top:18px;left:8px;z-index:2;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:900;color:#1A1020;background:rgba(255,255,255,.78);transition:transform .25s,opacity .25s,background .25s,box-shadow .25s}
.fgc-ob-now{transform:scale(1.25);background:#FFD54F;box-shadow:0 0 6px #FFD54F}
.fgc-ob-done{opacity:.35}.fgc-ob-out{opacity:.5}
/* ⚡ and its speed after the name, gold with a dark edge (Hunter's pick A of docs/mock/speed-heads.html) */
.fgc-sx{display:inline-flex;align-items:center;margin-left:2px;font-weight:900;color:#FFE066;font-size:.95em;white-space:nowrap;text-shadow:0 0 2px rgba(20,10,30,.95),0 0 4px rgba(20,10,30,.8),0 1px 2px rgba(0,0,0,.9)}
.fgc-sx i{font-style:normal;font-size:.85em;margin-right:1px}.fgc-sx-lo{color:#B8B0C8}
.fgc-sl .fgc-au>.fgc-tag{position:absolute;top:16px;right:6px;z-index:2;padding:1px 6px;font-size:9px}
.fgc-sl .fgc-au>.fgc-tag:not(.fgc-s):not(.fgc-w){background:none;color:var(--faint);opacity:.75}
.fgc-sl .fgc-au .fgc-st{position:absolute;top:66px;right:10px;z-index:2;display:flex;gap:2px;pointer-events:none}
.fgc-sl .fgc-mine .fgc-au .fgc-st{top:74px}
.fgc-sl .fgc-au .fgc-st i{width:17px;height:17px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:10px;background:color-mix(in srgb,var(--tile) 70%,var(--bg));box-shadow:inset 0 0 0 1.5px var(--border)}
.fgc-sl .fgc-au.fgc-tch>.fgc-st{opacity:0}
.fgc-sl .fgc-au .fgc-bosslbl{top:2px}
/* (v0.5.99, Hunter picked D1 of the battle label mockups) what an aimed move would do: the number alone over the name,
   no box and no word; a strong hit gold with ▲, a weak one grey with ▼ and smaller, a normal one red, healing green */
.fgc-sl .fgc-dk{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:baseline;gap:2px;font-weight:900;line-height:1;white-space:nowrap;pointer-events:none;color:#FF6B78;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}
.fgc-sl .fgc-arf .fgc-dk{position:relative;top:auto;left:auto;transform:none;margin-bottom:2px}
.fgc-sl .fgc-dk .fgc-tgest{position:static;padding:0;border-radius:0;background:none;box-shadow:none;color:inherit;font-size:17px;font-weight:900}
.fgc-sl .fgc-dk-s{color:#FFC94D}
.fgc-sl .fgc-dk-w{color:#B9AEA9}
.fgc-sl .fgc-dk-w .fgc-tgest{font-size:14px}
.fgc-sl .fgc-dk-h{color:#5BE3A0}
.fgc-sl .fgc-dka{font-style:normal;font-size:10px;margin-left:1px}
/* (v0.5.99, look A) the labels in a battle 30% bigger, the team pages' as before (a little less on narrow phones, where
   the three would run into each other) */
.fgc-sl .fgc-arf:not(.fgc-tpf){--fgc-lb:1.3}
@media (max-width:409px){.fgc-sl .fgc-arf:not(.fgc-tpf){--fgc-lb:1.15}}
@media (max-width:370px){.fgc-sl .fgc-arf:not(.fgc-tpf){--fgc-lb:1.05}}
.fgc-sl .fgc-arf.fgc-n4{--fgc-lb:1.05}@media (max-width:409px){.fgc-sl .fgc-arf.fgc-n4{--fgc-lb:.86}}   /* (raids: four a side, the labels a little smaller so the middle two don't meet) */
.fgc-sl .fgc-arf:not(.fgc-tpf) .fgc-hud,.fgc-sl .fgc-arf:not(.fgc-tpf) .fgc-plan,.fgc-sl .fgc-arf:not(.fgc-tpf) .fgc-sl-pop{scale:calc(var(--hs,1) * var(--fgc-lb))}
.fgc-sl .fgc-au.fgc-can .fgc-art{filter:drop-shadow(0 0 8px rgba(255,107,94,.95))}
.fgc-sl .fgc-mine .fgc-au.fgc-can .fgc-art{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--green) 95%,transparent))}
.fgc-ring{position:absolute;top:86px;left:50%;width:104px;height:24px;transform:translateX(-50%);border-radius:50%;opacity:0;pointer-events:none;z-index:-1}
.fgc-sl .fgc-au.fgc-turn{transform:translateY(-10px)}
.fgc-sl .fgc-au.fgc-turn .fgc-ring{opacity:1;box-shadow:0 0 0 2px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);animation:fgc-ring 1.6s ease-in-out infinite}
@keyframes fgc-ring{50%{box-shadow:0 0 0 2px var(--accent),0 0 32px var(--accent),inset 0 0 16px color-mix(in srgb,var(--accent) 80%,transparent)}}
.fgc-sl .fgc-au .fgc-turnlbl{display:none}
.fgc-sl .fgc-au.fgc-ko{opacity:.45;filter:grayscale(.9)}
/* the dock */
.fgc-sl-dock{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.fgc-sl-who{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;min-height:22px}
.fgc-sl-who b{color:var(--fgc-me)}
.fgc-sl-n{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,transparent);letter-spacing:.04em;text-transform:none;font-weight:700}
.fgc-sl-line{display:flex;align-items:center;justify-content:center;gap:8px;height:36px;margin:0;padding:0 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:12px;line-height:1.3;color:var(--muted);text-align:center;overflow:hidden}
.fgc-sl-line>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fgc-sl-line b{color:var(--fg)}
.fgc-sl-pas.fgc-sl-line{background:color-mix(in srgb,var(--fg) 4%,transparent)}
/* (v0.5.96, Hunter: "There's enough space in the move selection area to make this taller so we can easily read what each
   move does") in a battle in a world the line has room for a move's whole description (the longest, the Golem's Stone Ward, takes 4 lines on a 360px phone; v0.5.97: no Use or Cancel beside it), one fixed height
   so the panel never changes size from move to move */
.fgc-ar-on .fgc-sl-line{height:82px;justify-content:flex-start;font-size:13px;line-height:1.35;text-align:left;padding:0 12px 0 14px}
.fgc-ar-on .fgc-sl-line>span{-webkit-line-clamp:5;flex:1;min-width:0}
.fgc-sl-pas b{color:var(--gold-text)}
.fgc-sl .fgc-opts.fgc-sl-mvs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0;border:0;border-radius:0;background:none}
.fgc-sl .fgc-sl-mvs .fgc-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:96px;min-height:0;padding:12px 3px 7px;border:0;border-radius:18px;background:var(--tile-2);box-shadow:inset 0 0 0 1.5px var(--border);text-align:center;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s,background .2s}
.fgc-sl .fgc-sl-mvs .fgc-opt b{font-size:11px;font-weight:800;line-height:1.15;min-height:26px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fgc-mi{height:28px;display:flex;align-items:center;justify-content:center}
.fgc-mi svg{width:26px;height:26px}
.fgc-mi3{display:flex}.fgc-mi3 svg{width:14px;height:14px;margin:0 -1px}
.fgc-sl-mvs .fgc-opt .fgc-pips{margin-top:auto}
.fgc-sl-mvs .fgc-opt .fgc-free{margin-top:auto;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fgc-sl-mvs .fgc-opt>.fgc-tag{position:absolute;top:4px;right:4px;margin:0;padding:0 4px;font-size:8px;line-height:13px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase}
.fgc-sl-mvs .fgc-opt>.fgc-first{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-text)}
/* (A72 item 23d) a raid boss's big attack on the Guard button: the tag over its top edge, the words in its foot (theme
   colors mixed with the battle's blue, so they read on Daylight's light tiles too) */
.fgc-sl-mvs .fgc-opt>.fgc-cg{top:-9px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;padding:1px 8px;font-size:9.5px;line-height:15px;border-radius:99px;font-weight:900;background:color-mix(in srgb,var(--fgc-me) 24%,var(--tile));color:color-mix(in srgb,var(--fgc-me) 55%,var(--fg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fgc-me) 60%,transparent);z-index:1}
.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-cg-c{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fgc-me) 75%,transparent)}
.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-cg-r{background:color-mix(in srgb,var(--fgc-me) 26%,var(--tile-2));box-shadow:inset 0 0 0 2px var(--fgc-me),0 0 18px color-mix(in srgb,var(--fgc-me) 70%,transparent);animation:fgc-cgp 1.4s ease-in-out infinite}
.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-cg-r.fgc-opt-on{animation:none}
@keyframes fgc-cgp{50%{box-shadow:inset 0 0 0 2px var(--fgc-me),0 0 28px var(--fgc-me)}}
.fgc-sl-mvs .fgc-opt.fgc-cg-r>.fgc-cg{background:var(--fgc-me);color:#0B2236;box-shadow:none}
.fgc-sl-mvs .fgc-opt.fgc-cg-x>.fgc-cg{background:color-mix(in srgb,var(--red) 22%,var(--tile));color:color-mix(in srgb,var(--red) 65%,var(--fg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 60%,transparent)}
.fgc-cgs{margin-top:auto;font-size:9.5px;font-weight:800;line-height:1.15;text-align:center;color:color-mix(in srgb,var(--fgc-me) 60%,var(--fg))}
.fgc-cg-r .fgc-cgs{color:var(--fg)}.fgc-cg-x .fgc-cgs{color:color-mix(in srgb,var(--red) 70%,var(--fg))}
@media (prefers-reduced-motion:reduce){.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-cg-r{animation:none}}
.fgc-why{margin-top:auto;font-size:8px;font-weight:800;line-height:1.2;color:var(--faint);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fgc-sl .fgc-sl-mvs .fgc-opt:disabled{opacity:.45}
.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-opt-on{transform:translateY(-6px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));box-shadow:inset 0 0 0 2px var(--accent),0 8px 20px color-mix(in srgb,var(--accent) 45%,transparent)}
.fgc-sl .fgc-sl-mvs .fgc-opt.fgc-opt-was{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fgc-me) 70%,transparent)}
.fgc-sl-mv0{height:96px;border-radius:18px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--border) 60%,transparent);background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--fg) 2%,transparent) 8px 16px)}
.fgc-sl-dock2{min-height:96px;justify-content:center}
.fgc-sl-pill{padding:5px 16px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent));color:var(--accent-ink)!important;font-size:12px;font-weight:800;letter-spacing:.06em;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}
.fgc-sl-pill.fgc-sl-pill-off{background:var(--tile-2);color:var(--fg)!important;box-shadow:inset 0 0 0 1.5px var(--border)}
/* the round */
.fgc-sl .fgc-sl-ob{display:flex;flex-direction:column;justify-content:center;margin-top:4px;padding:6px 8px 6px 14px;border:0;border-radius:14px;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.fgc-sl .fgc-sl-ob .fgc-brow{justify-content:space-between}
.fgc-sl-step{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:400px){.fgc-sl-ob .fgc-sl-step{letter-spacing:.02em;font-size:11px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.fgc-sl-ob .fgc-brow{gap:6px}}   /* (one line beside Skip round and the switches on a small phone) */
/* Auto-skip and 2× (A71 item 1): two small switches at the end of the sheet's top line and of the round's box, the same
   size in both, so nothing moves between choosing and the round; on is the accent's tint */
.fgc-sl-who:has(.fgc-pb){justify-content:flex-start}
.fgc-sl-who:has(.fgc-pb) .fgc-sl-n{flex:none;white-space:nowrap}
.fgc-sl-wt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgc-pb{display:flex;gap:6px;flex:none;margin:-2px 8px -2px auto}
.fgc-sl-ob .fgc-sl-skip{margin-left:auto}
.fgc-sl-ob .fgc-pb{margin:0}
.fgc-sl-skip{white-space:nowrap}   /* ("Skip round": this round only, beside the Skip switch, A72 item 13) */
.fgc-pbt{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:26px;min-width:34px;padding:0 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--muted);font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:none;cursor:pointer}
.fgc-pbt.on{border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.fgc-pbt svg{flex:none}
/* A battle's result page (A71 part 2, Hunter's pick B · Spotlight): the battle dims behind VICTORY, the podium (MVP in the
   middle), XP bars on their steps, the rewards flipping over, the meters and the battle page's own buttons. Only transforms
   and opacity move (the bars are scaled, not resized). */
.np.bw{z-index:41;background:radial-gradient(120% 70% at 50% 30%,rgba(48,24,8,.86),rgba(6,4,3,.97) 70%);color:#FBF4F0;opacity:0;transition:opacity .4s}
.np.bw.on{opacity:1}
.np.bw.bw-loss{background:radial-gradient(120% 70% at 50% 30%,rgba(18,26,46,.86),rgba(4,5,8,.97) 70%)}
.bw-fast,.bw-fast *{transition:none!important}
.bw-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:460px;margin:0 auto;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 48px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);overflow:hidden auto;overscroll-behavior:contain}   /* (the bars audit, Oct 28: on a short phone with the app's bars its last button sat under the bottom bar; now it scrolls up) */
.bw-rays{position:absolute;left:50%;top:230px;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(245,196,81,.13) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);animation:bw-rot 24s linear infinite;pointer-events:none}
@keyframes bw-rot{to{rotate:360deg}}
.bw-loss .bw-rays{display:none}
.bw-h{position:relative;margin:0;font-size:40px;font-weight:900;letter-spacing:.08em;line-height:1;color:var(--gold);background:linear-gradient(100deg,var(--gold) 40%,#FFF6D6 50%,var(--gold) 60%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(245,196,81,.45)) drop-shadow(0 3px 0 #7A4C08);animation:bw-sweep 2.4s .4s ease-out both}
@keyframes bw-sweep{from{background-position:100% 0}to{background-position:0 0}}
.bw-loss .bw-h{color:#BFD4F0;-webkit-text-fill-color:#BFD4F0;background:none;filter:drop-shadow(0 2px 14px rgba(60,120,200,.5));font-size:32px;animation:none}
.bw-sub{position:relative;margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C9B8AE;text-align:center}
.bw-tag{position:relative;margin-top:8px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--gold) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold);font-size:12px;font-weight:800}
.bw-tags{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.bw-tags .bw-tag{margin-top:0}
.bw-tag.bw-flw{background:linear-gradient(90deg,#2B6E4A,#46B37A);box-shadow:none;color:#EFFFF5;letter-spacing:.06em}
.bw-tag.bw-cmb{background:linear-gradient(90deg,#7A3B12,#E2803A);box-shadow:none;color:#FFF4EA;letter-spacing:.06em}
.bw-pod{position:relative;display:grid;align-items:end;width:100%;margin-top:14px;gap:6px}
.bw-pk{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;opacity:0;transform:translateY(30px);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.bw-pk.on{opacity:1;transform:none}
.bw-pic{position:relative;width:92px;height:92px}
.bw-pk.mvp .bw-pic{width:120px;height:120px}
.bw-pic .ss{width:100%!important;height:100%!important}
.bw-blk{position:relative;width:100%;box-sizing:border-box;border-radius:12px 12px 4px 4px;background:linear-gradient(rgba(255,190,140,.16),rgba(255,190,140,.04));box-shadow:inset 0 1px 0 rgba(255,220,180,.25);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 8px 10px}
.bw-pk.mvp .bw-blk{padding-top:14px;padding-bottom:22px}
.bw-blk b{font-size:12.5px;line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bw-blk b span{display:block;font-size:11px;color:#C9B8AE;font-weight:700}
.bw-blk em{font-style:normal;font-size:11px;color:#5CC8FF;font-weight:800}
.bw-bar{position:relative;display:block;width:100%;height:7px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.bw-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#3E9BFF,#5CC8FF);transform-origin:0 50%;transform:scaleX(var(--a,0));transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.bw-bar.on i{transform:scaleX(var(--b,0))}
.bw-pk.up .bw-bar i{background:linear-gradient(90deg,#F5A23D,var(--gold))}
.bw-mvp{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--gold);color:#2A1A05;font-size:10.5px;font-weight:900;letter-spacing:.08em;white-space:nowrap;box-shadow:0 2px 10px rgba(245,196,81,.5)}
.bw-up{position:absolute;left:50%;top:-10px;transform:translate(-50%,-100%);padding:3px 9px;border-radius:999px;background:var(--gold);color:#2A1A05;font-size:10.5px;font-weight:900;letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .25s}
.bw-pk.up .bw-up{opacity:1;animation:bw-pulse .6s ease-out}
.bw-pk.up .bw-pic::after{content:'';position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,196,81,.55),transparent);animation:bw-burst .9s ease-out both;pointer-events:none}
@keyframes bw-burst{from{scale:.3;opacity:1}to{scale:1.6;opacity:0}}
@keyframes bw-pulse{0%{scale:.4;opacity:0}60%{scale:1.15;opacity:1}100%{scale:1}}
.bw-newmv{position:relative;min-height:1.4em;margin:10px 0 0;font-size:13px;font-weight:700;color:var(--gold);text-align:center;opacity:0;transition:opacity .3s}
.bw-newmv.on{opacity:1}
.bw-tiles{position:relative;display:grid;gap:8px;width:100%;margin-top:12px;perspective:600px}
.bw-tl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:74px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:11px;font-weight:700;color:#C9B8AE;opacity:0;transform:rotateY(90deg);transition:opacity .2s,transform .45s cubic-bezier(.2,.8,.2,1.2)}
.bw-tl.on{opacity:1;transform:none}
.bw-tl b{font-size:16px;color:#FBF4F0;font-weight:900;font-variant-numeric:tabular-nums}
.bw-tl .bw-gl{color:#9FE3FF}.bw-tl .bw-fth{color:#FFB38A}
.bw-coin{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A0,#E8A41E 60%,#9A5E08)}
.bw-tl.bw-rn{background:linear-gradient(rgba(255,106,77,.2),rgba(255,106,77,.06));box-shadow:inset 0 0 0 1px rgba(255,106,77,.45)}
.bw-lines,.bw-mts,.bw-tip,.bw-mute{opacity:0;transition:opacity .3s}
.bw-lines.on,.bw-mts.on,.bw-tip.on,.bw-mute.on{opacity:1}
.bw-lines{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;width:100%}
.bw-lines span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;font-weight:700;color:#FBF4F0}
.bw-mts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:12px}
.bw-mt{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:#C9B8AE}
.bw-mt .bw-bar{height:6px}.bw-mt .bw-bar i{background:linear-gradient(90deg,#B98A2E,var(--gold))}
.bw-mt .bw-bar.bw-eg i{background:linear-gradient(90deg,#9C6BFF,#D9B8FF)}
.bw-tip{position:relative;display:flex;gap:10px;width:100%;box-sizing:border-box;margin-top:18px;padding:10px 12px;border-radius:16px;background:rgba(92,200,255,.08);box-shadow:inset 0 0 0 1px rgba(92,200,255,.25);font-size:13px;line-height:1.45;color:#FBF4F0}
.bw-tip i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(92,200,255,.2);color:#5CC8FF;font-weight:900;font-size:13px}
.bw-tip b{color:#5CC8FF}
.bw-mute{position:relative;margin:12px 0 0;color:#9A8A82;font-size:12.5px;text-align:center}
.bw-btns{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;margin-top:auto;padding-top:16px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.bw-btns.on{opacity:1;transform:none}
.bw-btns .btn{width:100%;min-height:48px}
/* (A72 item 13) auto play: on a win's page the next floor comes by itself, with Stop in place of the buttons */
.bw-btns.bw-apb{opacity:1;transform:none;align-items:center;gap:10px}
.bw-apb>span{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.bw-rays,.bw-h{animation:none}}
/* the knock-out (A71 part 2, look 1): KO! in the hitter's element color after a short freeze (--kw), gone by --kd */
.fgc-kost{position:absolute;z-index:6;font-size:44px;font-weight:900;line-height:1;letter-spacing:.02em;color:hsl(var(--kh) 100% 64%);-webkit-text-stroke:1.5px rgba(0,0,0,.35);text-shadow:0 0 18px hsl(var(--kh) 100% 55% / .9),0 3px 0 hsl(var(--kh) 80% 22%);pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%) rotate(-8deg);scale:var(--fgc-lb,1);opacity:0;animation:fgc-kost var(--kd,1.5s) var(--kw,.24s) ease-out forwards}
@keyframes fgc-kost{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.5)}14%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.9)}22%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.fgc-koring{position:absolute;z-index:5;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:4px solid hsl(var(--kh) 100% 66%);pointer-events:none;opacity:0;animation:fgc-koring var(--kd,.65s) var(--kw,.24s) ease-out forwards}
@keyframes fgc-koring{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(4.5)}}
@media (prefers-reduced-motion:reduce){.fgc-kost{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-8deg)}}
/* callouts (A71 part 2, look I): a gold tag with a burst over the Kindling it's about, gone by --kd */
.fgc-call{position:absolute;z-index:6;display:flex;justify-content:center;pointer-events:none;transform:translate(-50%,-100%);scale:var(--fgc-lb,1);transform-origin:50% 100%;opacity:0;animation:fgc-call var(--kd,1.9s) var(--kw,.3s) ease-out forwards}
.fgc-call b{position:relative;padding:4px 11px;border-radius:999px;background:var(--gold);color:#2A1A05;font-size:12.5px;font-weight:900;letter-spacing:.08em;white-space:nowrap;box-shadow:0 0 18px rgba(245,196,81,.7)}
.fgc-call b::before{content:'';position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:repeating-conic-gradient(rgba(255,230,150,.55) 0 6deg,transparent 6deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 30%,#000 45%,transparent 72%);mask:radial-gradient(closest-side,transparent 30%,#000 45%,transparent 72%);z-index:-1}
@keyframes fgc-call{0%{opacity:0;transform:translate(-50%,-60%) scale(.4)}15%{opacity:1;transform:translate(-50%,-100%) scale(1.1)}85%{opacity:1;transform:translate(-50%,-110%) scale(1)}100%{opacity:0;transform:translate(-50%,-130%) scale(1)}}
.fgc-call.fgc-call-still{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.fgc-call{animation:none;opacity:1}}
/* 2×: the numbers pop up twice as fast too */
.fgc-x2 .fgc-sl-pop{animation-duration:.25s;animation-delay:.05s}
.fgc-x2 .fgc-sl-pop.fgc-sl-late{animation-delay:.22s}
.fgc-sl .fgc-bnt:empty{display:none}
.fgc-sl.fgc-playing .fgc-au.fgc-turn{transform:none}
.fgc-sl.fgc-playing .fgc-au.fgc-turn .fgc-ring{opacity:0}
.fgc-sl.fgc-playing .fgc-au.fgc-act{transform:translateY(-6px) scale(1.06)}
.fgc-sl .fgc-au.fgc-act .fgc-art{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 85%,transparent))}
.fgc-sl .fgc-au.fgc-hit .fgc-art .ss{filter:drop-shadow(0 0 10px rgba(255,90,40,.95)) brightness(1.15)}
.fgc-sl .fgc-au.fgc-healed .fgc-art .ss{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--green) 90%,transparent))}
.fgc-sl.fgc-sl-go .fgc-au:not(.fgc-act):not(.fgc-tch),.fgc-sl.fgc-sl-nx .fgc-au:not(.fgc-goin){opacity:.42}
.fgc-sl .fgc-au.fgc-goin::before{top:0}
.fgc-sl-pop{position:absolute;top:8px;left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:none;white-space:nowrap;animation:fgc-sl-num .5s cubic-bezier(.2,.9,.3,1.3) .1s backwards}
.fgc-sl-pop.fgc-sl-late{animation-delay:.45s}
.fgc-sl-pop.fgc-sl-still{animation:none}
.fgc-sl-pop b{display:block;margin-bottom:2px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--tile) 70%,var(--bg));color:var(--fg);font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--border)}
.fgc-mine .fgc-sl-pop-a b{color:var(--fgc-me);box-shadow:inset 0 0 0 1.5px var(--fgc-me),0 0 14px color-mix(in srgb,var(--fgc-me) 50%,transparent)}
.fgc-them .fgc-sl-pop-a b{color:var(--fgc-them);box-shadow:inset 0 0 0 1.5px var(--fgc-them),0 0 14px color-mix(in srgb,var(--fgc-them) 50%,transparent)}
.fgc-sl-pop i{font-style:normal;font-size:30px;font-weight:900;line-height:1;color:#fff;text-shadow:0 0 14px rgba(255,90,40,.9),0 3px 0 #7a1c06}
.fgc-sl-pop-h i{text-shadow:0 0 14px color-mix(in srgb,var(--green) 90%,transparent),0 3px 0 #0d4a2a}
.fgc-sl-pop em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 8px rgba(245,196,81,.6),0 1px 2px #000}
@keyframes fgc-sl-num{from{opacity:0;transform:translate(-50%,10px) scale(.6)}to{opacity:1;transform:translateX(-50%)}}
/* ---- the battle in a 3D world (A69 part 2, arenas.js; Hunter picked the round-5 mockup, docs/battle-looks.html) ----
   The world fills the page behind everything (.fgc-ar-bk, in #gm-trials or #fr-game); the Kindlings stand in the field
   (.fgc-arf, between the title and the moves): each button's bottom middle on its spot, moved and sized by the arena
   (transform), its labels kept readable (--hs); the world's near things and the moves' effects on a canvas over them. */
.fgc-ar-bk{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.fgc-ar-on>.fgg-embers{display:none}
.fgc-arf{position:relative;height:max(280px,calc(100dvh - var(--fgc-fo,380px)));margin:0 -10px;contain:layout}
#fr-game .fgc-arf{--fgc-fo:330px}
.fgc-arf .fgc-ar-fx{position:absolute;z-index:4;pointer-events:none}
.fgc-sl .fgc-arf .fgc-side,.fgc-sl .fgc-arf .fgc-row{position:absolute;inset:0;display:block;margin:0;padding:0;pointer-events:none}
.fgc-sl .fgc-arf .fgc-u.fgc-au{position:absolute;left:-60px;top:-108px;width:120px;height:138px;padding:0;display:block;transform-origin:50% 78%;transition:opacity .25s;pointer-events:auto;will-change:transform;border-radius:0}
.fgc-sl .fgc-arf .fgc-mine .fgc-au{z-index:2}
.fgc-sl .fgc-arf .fgc-mine .fgc-au[data-fgc$=":1"]{z-index:3}
.fgc-sl .fgc-arf .fgc-au .fgc-art,.fgc-sl .fgc-arf .fgc-mine .fgc-au .fgc-art,.fgc-sl .fgc-arf .fgc-au.fgc-boss .fgc-art{position:absolute;inset:0;width:auto;height:auto;border-radius:0}
.fgc-sl .fgc-arf .fgc-au::after,.fgc-arf .fgc-ring{display:none}
/* (v0.5.97, Hunter: "Make the highlighted characters more obvious too so people know they can just click on themselves or
   who is being targeted") who a picked move can go on: a ring on the ground at its feet that breathes (CSS, only while
   it's lit; still with reduced motion) and a stronger glow */
.fgc-sl .fgc-arf .fgc-au.fgc-can::before{content:"";position:absolute;left:50%;top:108px;width:104px;height:34px;margin:-17px 0 0 -52px;border-radius:50%;border:2.5px solid var(--fgc-cc,#FF6B5E);background:radial-gradient(closest-side,color-mix(in srgb,var(--fgc-cc,#FF6B5E) 38%,transparent),transparent);box-shadow:0 0 14px var(--fgc-cc,#FF6B5E),inset 0 0 10px color-mix(in srgb,var(--fgc-cc,#FF6B5E) 60%,transparent);pointer-events:none;animation:fgc-can 1.3s ease-in-out infinite}
.fgc-sl .fgc-arf .fgc-au.fgc-can{--fgc-cc:#FF6B5E}
.fgc-sl .fgc-arf .fgc-mine .fgc-au.fgc-can{--fgc-cc:#5BE3A0}
.fgc-sl .fgc-arf .fgc-au.fgc-can .fgc-art{filter:drop-shadow(0 0 5px var(--fgc-cc)) drop-shadow(0 0 14px var(--fgc-cc))}
@keyframes fgc-can{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.fgc-sl .fgc-arf .fgc-au.fgc-can::before{animation:none}}
.fgc-put{cursor:default}
/* yours are seen from behind: the same drawing without its face */
.fgc-arf .fgc-mine .fgc-art .s-face,.fgc-arf .fgc-mine .fgc-art .e-w,.fgc-arf .fgc-mine .fgc-art .e-g,.fgc-arf .fgc-mine .fgc-art .zz,.fgc-arf .fgc-mine .fgc-art .s-beak,.fgc-arf .fgc-mine .fgc-art .s-mark,.fgc-arf .fgc-mine .fgc-art [data-sl="face"]{display:none}   /* (A71 item 9: and glasses and the like, on the face you can't see) */
.fgc-arf .fgc-mine .fgc-art .tk-trunk,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="mammoth"] .kl,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="hedgehog"] ellipse.s-f,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="hedgehog"] path.s-f,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="hedgehog"] circle.s-d[cy="110.5"],.fgc-arf .fgc-mine .fgc-art .ss[data-sp="bear"] ellipse.s-f[cy="103"],.fgc-arf .fgc-mine .fgc-art .ss[data-sp="bear"] ellipse.s-f[cy="141"],.fgc-arf .fgc-mine .fgc-art .ss[data-sp="frog"] ellipse.s-spot,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="penguin"] > svg .sp-tilt > path.s-f,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="penguin"] circle.s-spot,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="snail"] ellipse.s-spot,.fgc-arf .fgc-mine .fgc-art .ss[data-sp="otter"] :is(ellipse.s-f,.sp-tilt > path.s-f,path.s-d,path.s-wh),.fgc-arf .fgc-mine .fgc-art .ss[data-sp="redpanda"] :is(ellipse.s-spot,ellipse.s-d),.fgc-arf .fgc-mine .fgc-art .ss[data-sp="jackalope"] :is(path.s-f[d^="M100,121"],path.s-f[d^="M86,108"]),.fgc-arf .fgc-mine .fgc-art .ss[data-sp="kitsune"] .sp-tilt > :is(path.s-mk,g.lf.kf[style="--a0:180deg"]),.fgc-arf .fgc-mine .fgc-art .ss[data-sp="seal"] .sp-tilt > :is(ellipse.s-f,.s-d,path.s-wh[d^="M88,100"],path.s-f[d^="M100,117"]),.fgc-arf .fgc-mine .fgc-art .ss[data-sp="qilin"] .sp-tilt > :is(g.lf.kl[style="--a0:0deg"],g.lf.kf[style="--a0:180deg"],path.s-sc){display:none}   /* (the Mammoth's trunk and tusks, the Hedgehog's face mask, nose and belly, the Bear's muzzle and belly, the Frog's cheek and eye spots, the Penguin's belly and cheek spots, the Snail's cheek spots, the Otter's muzzle, whiskers, belly and the shell it holds, the Red Panda's brows, muzzle and nose, the Jackalope's belly and chest ruff, the Kitsune's forehead flame and belly, the Seal's muzzle, whiskers and belly, the Qilin's forehead flame and scaled chest: on the side you can't see; Oct 29–30) */
.fgc-arf .fgc-mine .fgc-art .sk-f{display:none}.fgc-arf .fgc-mine .fgc-art .sk-b{display:inline}   /* (an outfit skin from behind, A69 part 7) */
.fgc-arf .fgc-mine .fgc-art .eyes{display:none}   /* (all of its eyes, the happy and sleepy ones too, Oct 30; its arms go behind it too: backArms in spirits.js) */
.fgc-arf .fgc-hud{position:absolute;left:50%;bottom:calc(100% - 6px);display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateX(-50%);scale:var(--hs,1);transform-origin:50% 100%;pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 6px #000;color:#FBF4F0}
.fgc-sl .fgc-arf .fgc-au .fgc-nm{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:#FBF4F0}
.fgc-arf .fgc-nmr{display:flex;align-items:center;gap:4px}
.fgc-arf .fgc-ob{position:relative;top:auto;left:auto;width:16px;height:16px;font-size:9.5px;text-shadow:none}
.fgc-sl .fgc-arf .fgc-au .fgc-hp{width:64px;background:rgba(0,0,0,.5);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.fgc-sl .fgc-arf .fgc-au .fgc-hpn{color:#E8DCD6}
.fgc-sl .fgc-arf .fgc-hud>.fgc-tag{position:relative;top:auto;right:auto;text-shadow:none}
.fgc-sl .fgc-arf .fgc-au .fgc-st{position:relative;top:auto;right:auto;text-shadow:none}
.fgc-sl .fgc-arf .fgc-au .fgc-bosslbl{position:relative;top:auto;left:auto;transform:none}
.fgc-sl .fgc-arf .fgc-plan{position:absolute;top:calc(78% + 8px);left:50%;max-width:none;transform:translateX(-50%);scale:var(--hs,1);transform-origin:50% 0;text-shadow:0 1px 3px #000,0 0 6px #000}
.fgc-sl .fgc-arf .fgc-au.fgc-turn,.fgc-sl.fgc-playing .fgc-arf .fgc-au.fgc-act{transition:opacity .25s}
.fgc-arf .fgc-sl-pop{top:auto;bottom:calc(100% + 34px);scale:var(--hs,1);transform-origin:50% 100%}
/* the title and the moves stay over the world (and its near things), the moves on a dark glass */
.fgc-ar-on .fgc-sl-dock{position:relative;z-index:5;margin:0 -4px 0;padding:10px;border-radius:22px;background:rgba(14,9,7,.86);box-shadow:0 -8px 26px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,190,140,.14)}
.fgc-ar-on .fgc-sl-top{z-index:5;text-shadow:0 1px 3px #000,0 0 8px #000}
#gm-trials.fgc-ar-on .fgc-sl-top{position:relative}
.fgc-ar-on .fgc-sl-dock.fgc-sl-dockp{background:none;box-shadow:none}
.fgc-ar-on .fgc-sl-dockp .fgc-sl-ob{background:rgba(14,9,7,.8);box-shadow:inset 0 0 0 1px rgba(255,190,140,.14)}
.fgc-ar-on .fgc-sl-top b,.fgc-ar-on .fgc-sl-sub2{color:#E8DCD6}
/* (A72 item 23) a raid's name and round up in the top bar between back and Give up, two lines, never over the field
   (hidden while Give up asks again, which is wider); light like the bar's own words, which sit on the world */
#gm-trials.rd-on.fgc-ar-on .fgc-sl-top,#gm-trials.rd-on .fgc-sl-top{position:fixed;top:calc(6px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:calc(100% - 200px);max-width:420px;height:36px;margin:0;justify-content:center;z-index:30;gap:0;pointer-events:none}
#gm-trials.rd-on .fgc-sl-top b{display:block;max-width:100%;font-size:11.5px;letter-spacing:.06em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#FBF4F0}
#gm-trials.rd-on .fgc-sl-rnd,.fr-gfull .fgc-sl-rnd{display:block;font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#D8CCC6;overflow:hidden;text-overflow:ellipsis}
#gm-trials.rd-on .fgc-sl-dot,.fr-gfull .fgc-sl-dot{display:none}
#gm-trials.rd-on:has(.gm-tv-qarm) .fgc-sl-top{visibility:hidden}
/* (A72 item 23b) a raid with a friend: their picks under their two in pink, on two lines (four a side); their part of a
   health bar in pink after yours; the lines to the targets; their status by your count; after your Ready, both of you */
.fgc-sl .fgc-plan.fgc-plan-f{color:var(--fgc-fr)}
.fgc-sl .fgc-arf .fgc-plan.fgc-plan2{white-space:normal;line-height:1.2;min-height:26px;text-align:center;text-shadow:0 1px 3px #000,0 0 6px #000}
.fgc-plan2 b{display:block;font-weight:900}
.fgc-hpx.fgc-hpx-f{background:var(--fgc-fr)}
.fgc-aiml{position:absolute;left:0;top:0;pointer-events:none;z-index:4;overflow:visible}
.fgc-aiml path{fill:none;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;opacity:.85}
.fgc-fc{margin-left:auto;margin-right:6px;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:900;white-space:nowrap;background:color-mix(in srgb,var(--fgc-fr) 16%,transparent);color:color-mix(in srgb,var(--fgc-fr) 70%,var(--fg))}
.fgc-fc.fgc-fc-ok{background:color-mix(in srgb,var(--green) 20%,transparent);color:color-mix(in srgb,var(--green) 70%,var(--fg))}
.fgc-fc i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:fgc-fcd 1.2s infinite}.fgc-fc i:nth-child(2){animation-delay:.2s}.fgc-fc i:nth-child(3){animation-delay:.4s}
@keyframes fgc-fcd{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.fgc-fc i{animation:none}}
.fgc-fw{display:flex;flex-direction:column;gap:8px;padding:4px 0 2px}
.fgc-fwr{display:flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:0 14px;border-radius:14px;background:var(--tile-2);font-size:13px}
.fgc-fwr b{display:block;font-weight:800}.fgc-fwr small{display:block;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.fgc-fwt{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:color-mix(in srgb,var(--fgc-fr) 18%,transparent);color:color-mix(in srgb,var(--fgc-fr) 70%,var(--fg))}
.fgc-fwt.fgc-fwt-ok{background:color-mix(in srgb,var(--green) 22%,transparent);color:color-mix(in srgb,var(--green) 70%,var(--fg))}
.fgc-ar-on .np-bar,.fgc-ar-on .gm-pgbar{background:linear-gradient(rgba(5,3,2,.82),rgba(5,3,2,.45) 70%,transparent)}
/* (v0.5.89, Hunter: "a weird visual glitch in the top left") a friend game's bar is only as wide as its two buttons: no
   shade there (the title has its own shadow); and a battle in a world never scrolls (its field takes what's left) */
.fgc-ar-on.fr-gfull .np-bar{background:none}
#gm-trials.fgc-ar-on:not(.fgc-ar-tight),#fr-game.fgc-ar-on:not(.fgc-ar-tight){overflow-y:hidden}
.fgc-ar-on .np-bar button,.fgc-ar-on .gm-pgbar button,.fgc-ar-on .np-bar a{color:#FBF4F0;text-shadow:0 1px 3px #000,0 0 8px #000}
.fgc-sl-ball{position:fixed;z-index:20;width:24px;height:24px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 40% 40%,#fff,hsl(var(--fgc-h) 95% 65%) 45%,hsl(var(--fgc-h) 95% 45%) 70%,transparent 72%);box-shadow:0 0 18px 8px hsl(var(--fgc-h) 95% 55% / .75)}
/* a Kindling's card, and the round's log */
.fgc-sl-cbg{position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.35)}
.fgc-sl-card,.fgc-sl-log[open] .fgc-sl-logc{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:25;max-width:520px;margin:0 auto;max-height:72vh;overflow:auto;padding:16px;border-radius:22px;background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--border),0 -10px 40px rgba(0,0,0,.6);animation:fgc-card .3s cubic-bezier(.3,.7,.2,1)}
@keyframes fgc-card{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.fgc-sl-cx{position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);font:inherit;font-size:17px;cursor:pointer}
.fgc-sl-ctop{display:flex;gap:12px;align-items:center;padding-right:30px}
.fgc-sl-ctop .fgc-art{width:72px;height:68px;flex:none;background:none}
.fgc-sl-ctop h3{margin:0;font-size:18px;display:flex;align-items:center;gap:6px}
.fgc-sl-ctop p{margin:3px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.fgc-sl-crows{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.fgc-sl-crows div{padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:11px;color:var(--faint)}
.fgc-sl-crows b{display:block;font-size:14px;color:var(--fg)}
.fgc-sl-crows b.fgc-c-up{color:var(--green)}.fgc-sl-crows b.fgc-c-dn{color:var(--red)}
.fgc-sl-cpas,.fgc-sl-cst,.fgc-sl-cmv,.fgc-sl-cnote{margin:8px 0 0;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:12px;line-height:1.4;color:var(--muted)}
.fgc-sl-cpas{background:color-mix(in srgb,var(--gold) 9%,transparent)}.fgc-sl-cpas b{color:var(--gold-text)}
.fgc-sl-cmv b{color:var(--fg)}
.fgc-sl-cnote{font-size:11px;color:var(--faint)}
.fgc-sl-card .fgc-chart{display:block;margin-top:8px;text-align:center}
.fgc-sl-log{position:absolute;top:2px;right:38px;z-index:6;margin:0}
.fr-gfull .fgc-sl-log{top:calc(12px + env(safe-area-inset-top,0px));right:126px}
.fgc-sl-snd{position:absolute;top:2px;right:0;z-index:6;width:32px;height:32px;border:0;padding:0;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted);cursor:pointer}
.fgc-sl-snd.off{color:var(--faint)}
.fgc-sl-snd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fr-gfull .fgc-sl-snd{top:calc(12px + env(safe-area-inset-top,0px));right:88px}
.fgc-sl-log summary{list-style:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted);cursor:pointer}
.fgc-sl-log summary::-webkit-details-marker{display:none}
.fgc-sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fgc-sl-logc>b{display:block;margin:0 40px 8px 0;font-size:15px}
.fgc-sl-logc ol{margin:0;padding-left:20px;font-size:12px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.fgc-sl-pop,.fgc-sl-card,.fgc-sl-log[open] .fgc-sl-logc,.fgc-sl .fgc-au.fgc-turn .fgc-ring{animation:none}.fgc-sl .fgc-au{transition:none}}
/* Ready stays on the screen during a battle (Hunter, Oct 10: "I still have to scroll… to ready up") */
.fr-gfull[data-fg="clash"] #fr-gm-btns,#gm-tv-btns.gm-tv-stick{position:sticky;bottom:0;z-index:5;margin-top:0;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 14px)}
.fr-gfull[data-fg="clash"] .fr-gquit{position:fixed}
.fr-gfull[data-fg="clash"] .np-body{padding-bottom:0}
.gm-tv-q:empty{display:none}
.gm-tv-quit{min-height:44px;padding:0 12px;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.gm-tv-quit.gm-tv-qarm{border-radius:14px;background:color-mix(in srgb,#E5484D 85%,#000);color:#fff}
/* (A72 item 13) Auto beside Start, and Stop auto in the top bar while it runs (gold, a square stop sign; still, no glow running) */
.gm-tv-btns .btn.gm-tv-auto{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 18px}
.gm-tv-quit.gm-tv-apstop{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin:4px 0;border-radius:18px;background:color-mix(in srgb,var(--gold) 20%,rgba(10,7,6,.55));color:var(--gold);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 60%,transparent)}
.gm-tv-q{display:flex;align-items:center;gap:2px}   /* (Auto and Give up side by side, the bar's height as with Give up alone) */
.gm-tv-quit.gm-tv-apgo{display:inline-flex;align-items:center;gap:5px;min-height:36px;margin:4px 2px;padding:0 12px;border-radius:18px;color:var(--gold);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 45%,transparent)}
.gm-tv-apstop i{width:9px;height:9px;border-radius:2px;background:currentColor}
.fgc-sl-log.fgc-recap{padding:0;border:0;border-radius:10px;background:none;box-shadow:none}
#gm-trials .fgc-sl-log{top:-10px;right:40px}
#gm-trials .fgc-sl-snd{top:-10px;right:2px}
.fgc-sl-pop.fgc-sl-pop-a{top:-8px}
/* (Hunter, Oct 11: "unused space at the bottom… more space between the two teams") the battle fills the screen: the
   gap between the teams grows (up to 220px); everything under it keeps one height in both phases, so it never moves */
.fr-gfull[data-fg="clash"] .np-body{min-height:100%}
.fr-gfull[data-fg="clash"] #fr-gm-board{display:flex;flex-direction:column}
.fr-gfull .fgc-sl:not(.fgc-sl-team){flex:1 0 auto}
.fr-gfull[data-fg="clash"] #fr-gm-btns{min-height:68px;box-sizing:border-box}
#gm-trials:has(.fgc-sl:not(.fgc-sl-team)) .gm-tv-board{flex:1 0 auto;display:flex;flex-direction:column}
#gm-trials .fgc-sl:not(.fgc-sl-team){flex:1 0 auto}
#gm-tv-btns.gm-tv-stick{min-height:68px;box-sizing:border-box}
#gm-trials .gm-tv-hint:empty{display:none}
.fgc-sl .fgc-sl-gap{flex:1 1 auto;height:auto;min-height:clamp(16px,6vh,64px);max-height:220px}
.fgc-sl-dock{min-height:168px;box-sizing:border-box}
.fgc-sl-dock2{justify-content:flex-start}
.fgc-sl-dockp{justify-content:flex-start}
/* each row one height whatever its Kindlings show (a plan, states, a knocked-out one), so nothing moves */
.fgc-sl .fgc-them .fgc-au{height:142px;box-sizing:border-box}
.fgc-sl .fgc-mine .fgc-au{height:176px;box-sizing:border-box}
.fgc-sl.fgc-playing .fgc-plan{display:block}
/* (A72 item 1) one of yours sitting out this round (stunned, asleep, no move it can use): a gold pill under it, and its name first in the dock's line */
.fgc-sl .fgc-plan.fgc-skp{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 24%,rgba(0,0,0,.6));border:1px solid var(--gold-line);color:var(--gold-text);font-size:11px;line-height:1.3;text-shadow:none}
.fgc-sl-pas .fgc-sl-skl{display:block;color:var(--gold-text)}
/* A60 step 2: Word Duel on the showdown table (like Gin Rummy and Kindling Dice): their Kindling at the top saying how
   it's going with their guesses beside it, your board, the keyboard; a guess flips in, a solve jumps (classes fgw-) */
.fgw-t{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0 10px;color:var(--fg);--fgw-s:min(48px,13vw,6.2dvh)}
.fgw-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:calc(8px + env(safe-area-inset-top,0px)) 76px 0;text-align:center}
.fgw-top b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fgw-top span{font-size:13px;font-weight:800}
.fr-gfull .fgw-t{position:static;padding-top:calc(58px + env(safe-area-inset-top,0px))}
.fr-gfull .fgw-top{position:absolute;top:0;left:64px;right:64px;height:calc(56px + env(safe-area-inset-top,0px));min-height:0;padding:env(safe-area-inset-top,0px) 0 0}
.fgw-foe{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:start;min-height:104px}
.fgw-kin{grid-column:2;width:96px;height:96px;display:block}
.fgw-kin .ss{width:100%!important}
.fgw-bub{grid-column:3;grid-row:1;justify-self:start;align-self:start;margin:4px 0 0 4px;max-width:140px;padding:7px 10px;border-radius:14px 14px 14px 4px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fgw-bub.fgw-pop{animation:fgw-pop .35s cubic-bezier(.2,.9,.3,1.3)}
.fgw-t .fgw-them{grid-column:1;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:2px 6px 0 0;padding:0;border:0;background:none;font-size:11px;text-align:right}
.fgw-t .fgw-them b{font-size:11px;font-weight:800;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgw-t .fgw-them>span{font-size:10px;color:var(--muted)}
.fgw-t .fgw-them .fgw-sq{align-items:flex-end}
.fgw-t .fgw-them .fgw-sqr i{width:13px;height:13px;font-size:8px}
.fgw-sqr.fgw-pop{animation:fgw-pop .4s cubic-bezier(.2,.9,.3,1.4)}
.fgw-t .fgw-head{margin:4px 0 0;text-align:center;font-size:15px;font-weight:800}
.fgw-t .fgw-sub{margin:0;text-align:center}
.fgw-t .fgw-legend{justify-content:center;margin:0}
.fgw-t .gm-wrow{grid-template-columns:repeat(5,var(--fgw-s));gap:5px}
.fgw-t .gm-wboard{gap:5px}
.fgw-t .gm-wt{height:var(--fgw-s);font-size:calc(var(--fgw-s) * .45);background:color-mix(in srgb,var(--fg) 3%,transparent);border-color:color-mix(in srgb,var(--fg) 14%,transparent)}
.fgw-t .gm-wt.typed{border-color:var(--muted)}
.fgw-t .gm-wt.yes,.fgw-t .gm-wt.near,.fgw-t .gm-wt.no{background:var(--wd-c);border-color:var(--wd-c)}
.fgw-t .gm-wt.yes{--wd-c:var(--wd-yes)}.fgw-t .gm-wt.near{--wd-c:var(--wd-near)}.fgw-t .gm-wt.no{--wd-c:var(--wd-no)}
.fgw-in{animation:fgw-in .14s ease-out}
.fgw-flip .gm-wt{animation:fgw-flip .5s ease-in-out backwards;animation-delay:calc(var(--i) * 130ms)}
.fgw-win .gm-wt{animation:fgw-flip .5s ease-in-out backwards,fgw-jump .5s ease-out backwards;animation-delay:calc(var(--i) * 130ms),calc(700ms + var(--i) * 90ms)}
@keyframes fgw-in{from{transform:scale(1.18)}to{transform:none}}
@keyframes fgw-flip{0%{transform:rotateX(0);background:color-mix(in srgb,var(--fg) 3%,transparent);border-color:var(--muted);color:var(--fg)}49%{transform:rotateX(90deg);background:color-mix(in srgb,var(--fg) 3%,transparent);border-color:var(--muted);color:var(--fg)}51%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes fgw-jump{0%,100%{transform:none}40%{transform:translateY(-14px)}70%{transform:translateY(2px)}}
@keyframes fgw-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.fgw-grow{flex:1}
.fgw-line{margin:0;min-height:18px;text-align:center;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--accent) 70%,var(--fg))}
.fgw-t .gm-wkb{margin-bottom:4px}
.fgw-t .gm-key{height:50px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
.fgw-t .gm-key.wide{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.fgw-t .gm-key.yes{background:var(--wd-yes)}.fgw-t .gm-key.near{background:var(--wd-near)}.fgw-t .gm-key.no{background:var(--wd-no)}
.fgw-t .fgw-end{margin:2px 0}
@media (prefers-reduced-motion:reduce){.fgw-in,.fgw-flip .gm-wt,.fgw-win .gm-wt,.fgw-bub.fgw-pop,.fgw-sqr.fgw-pop{animation:none}}
/* Word Grid (A22, v0.3.69; classes fgr-): on the showdown table from the start (A60 step 3): the other side's Kindling
   at the top, the clock and your points, the word being traced, the letter tiles (light, like Gin's cards, lit orange
   as you trace), Enter, and the words found (newest first). */
.fgr-t{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0 14px;color:var(--fg);
  --fgr-c:min(78px,calc((100vw - 60px) / 4),8.4dvh);--fgr-g:8px}
.fgr-t[data-fgr-sz="5"]{--fgr-c:min(64px,calc((100vw - 64px) / 5),6.9dvh);--fgr-g:6px}
.fgr-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:calc(8px + env(safe-area-inset-top,0px)) 76px 0;text-align:center}
.fgr-top b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fgr-top span{font-size:13px;font-weight:800}
.fr-gfull .fgr-t{position:static;padding-top:calc(58px + env(safe-area-inset-top,0px))}
.fr-gfull .fgr-top{position:absolute;top:0;left:64px;right:64px;height:calc(56px + env(safe-area-inset-top,0px));min-height:0;padding:env(safe-area-inset-top,0px) 0 0}
.fgr-foe{display:grid;grid-template-columns:1fr 72px 1fr;align-items:start;min-height:76px}
.fgr-kin{grid-column:2;grid-row:1;width:72px;height:72px;display:block}
.fgr-kin .ss{width:100%!important}
.fgr-bub{grid-column:3;grid-row:1;justify-self:start;margin:2px 0 0 4px;max-width:150px;padding:7px 10px;border-radius:14px 14px 14px 4px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fgr-bub.fgr-pop{animation:fgw-pop .35s cubic-bezier(.2,.9,.3,1.3)}
.fgr-them{grid-column:1;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin:6px 8px 0 0;text-align:right;min-width:0}
.fgr-them b{font-size:12px;font-weight:800;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgr-them span{font-size:11px;color:var(--muted)}
.fgr-head{margin:6px 0 0;text-align:center;font-size:17px;font-weight:800}
.fgr-rules{margin:0;text-align:center;font-size:13px;color:var(--muted);line-height:1.4}
.fgr-pts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0}
.fgr-pts span{padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);font-size:12px;color:var(--muted)}
.fgr-pts b{color:var(--fg)}
.fgr-sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.fgr-size{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;justify-content:center;padding:12px 8px;border-radius:18px;border:1px solid var(--gold-line);background:linear-gradient(180deg,color-mix(in srgb,var(--hot) 14%,var(--tile-2)),var(--tile));color:var(--fg);font:inherit;cursor:pointer;box-shadow:0 0 22px color-mix(in srgb,var(--hot) 16%,transparent)}
.fgr-size b{font-size:18px;font-weight:800}
.fgr-size span{font-size:12px;color:var(--muted)}
.fgr-size:disabled{opacity:.5}
.fgr-size:not(:disabled):active{transform:scale(.97)}
.fgr-go{align-self:center;min-width:200px;min-height:56px;margin:10px 0 0;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:18px;font-weight:800;box-shadow:0 0 24px color-mix(in srgb,var(--hot) 45%,transparent);cursor:pointer}
.fgr-go:disabled{opacity:.5}
.fgr-bar{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fgr-clock{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fgr-clock.fgr-low{color:#FF7A6B}
.fgr-sc{font-size:13px;color:var(--muted)}
.fgr-sc b{font-size:18px;color:var(--gold-text)}
.fgr-cur{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:24px;font-weight:800;letter-spacing:.12em;color:var(--fg)}
.fgr-cur span{font-size:13px;font-weight:700;letter-spacing:0;color:var(--faint)}
.fgr-cur i{font-style:normal;font-size:13px;letter-spacing:0;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--gold-text)}
.fgr-cur.fgr-good{color:var(--green)}
.fgr-shake{animation:fgr-shake .35s}
@keyframes fgr-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.fgr-grid{display:grid;grid-template-columns:repeat(var(--fgr-n),var(--fgr-c));gap:var(--fgr-g);justify-content:center;align-self:center;padding:10px;border-radius:20px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 5%,transparent);touch-action:none;user-select:none;-webkit-user-select:none}
.fgr-tile{width:var(--fgr-c);height:var(--fgr-c);display:flex;align-items:center;justify-content:center;border:0;border-radius:calc(var(--fgr-c) * .2);background:linear-gradient(180deg,#FFF6EA,#EBD7BF);color:#2A0E02;font:inherit;font-size:calc(var(--fgr-c) * .46);font-weight:800;box-shadow:0 3px 0 #B99C7C,0 6px 12px rgba(0,0,0,.35);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.fgr-tile.fgr-on{background:linear-gradient(180deg,var(--hot-lite),var(--accent));box-shadow:0 3px 0 color-mix(in srgb,var(--hot) 55%,#000),0 0 18px color-mix(in srgb,var(--hot) 70%,transparent);transform:translateY(-2px)}
.fgr-tile.fgr-last{box-shadow:0 3px 0 color-mix(in srgb,var(--hot) 55%,#000),0 0 0 3px color-mix(in srgb,var(--hot-lite) 50%,#fff),0 0 22px color-mix(in srgb,var(--hot) 85%,transparent)}
.fgr-acts{display:grid;grid-template-columns:72px 1fr;gap:10px;width:100%;max-width:360px;align-self:center}
.fgr-act{min-height:48px;border:0;border-radius:14px;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.fgr-enter{background:var(--accent);color:var(--accent-ink)}
.fgr-act:disabled{opacity:.4}
.fgr-line{margin:0;min-height:18px;text-align:center;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--accent) 70%,var(--fg))}
.fgr-ws{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.fgr-found{flex:1 1 40px;min-height:40px;max-height:22dvh;overflow-y:auto}
.fgr-w{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);font:inherit;font-size:12px;font-weight:800;letter-spacing:.05em}
button.fgr-w{cursor:pointer}
.fgr-w i{font-style:normal;font-size:10px;letter-spacing:0;color:var(--gold-text)}
.fgr-w.fgr-new{background:color-mix(in srgb,var(--green) 30%,transparent);animation:fgw-pop .3s ease-out}
.fgr-w.fgr-both{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.fgr-w.fgr-seen{background:var(--accent);color:var(--accent-ink)}
.fgr-w.fgr-seen i{color:var(--accent-ink)}
.fgr-none{font-size:12px;color:var(--faint)}
.fgr-done{align-self:center;min-height:44px;padding:0 16px;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fgr-done.fgr-arm{border-radius:14px;background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.fgr-end{display:flex;flex-direction:column;gap:10px}
.fgr-res{margin:2px 0 0;text-align:center;font-size:20px;font-weight:800;color:var(--gold-text)}
.fgr-small{--fgr-c:34px;--fgr-g:4px;padding:6px;border-radius:12px}
.fgr-small .fgr-tile{font-size:15px;border-radius:7px;box-shadow:0 2px 0 #B99C7C;cursor:default}
.fgr-small .fgr-tile.fgr-on{box-shadow:0 2px 0 color-mix(in srgb,var(--hot) 55%,#000),0 0 10px color-mix(in srgb,var(--hot) 70%,transparent)}
.fgr-t[data-fgr-sz="5"] .fgr-small{--fgr-c:30px}
.fgr-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgr-col{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid var(--border)}
.fgr-col>b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgr-key{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.fgr-late{margin:0;text-align:center;font-size:12px;color:var(--gold)}
.fgr-key .fgr-w{padding:1px 6px;font-size:10px}
.fgr-mini{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.fgr-mg{display:grid;grid-template-columns:repeat(var(--fgr-n),14px);gap:2px}
.fgr-mg i{width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;background:#EBD7BF;color:#2A0E02;font-style:normal;font-size:8px;font-weight:800}
@media (max-width:360px){.fgr-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fgr-shake,.fgr-bub.fgr-pop,.fgr-w.fgr-new{animation:none}.fgr-tile{transition:none}}

/* The puzzle games on the fire-lit table (A60 step 4, v0.3.69; Hunter, Oct 11: "Let's try B for all"): Daily word, Light
   path, Light them all, Kindling Match, Sudoku and Flow fill the screen on the showdown table's dark Ember colors with its
   glow, whatever the theme (no floating embers: Hunter, Oct 11, "very distracting"). A slim top: the back arrow, the game's name with its level or number, and ? for
   the rules (shown in a card; the paragraph above the board is gone); your Kindling under it with a few words about how
   it's going (pzfSay in app.js). Classes pzf-. */
.pzf .gm-pgbar{position:sticky;top:0;z-index:5;background:none;min-height:60px;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:4px;gap:6px}
.pzf .gm-back{font-size:0;width:44px;min-height:44px;justify-content:center;flex:none;color:var(--fg)}
.pzf .gm-back svg{width:20px;height:20px}
.pzf .gm-back span{display:none}
.pzf-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pzf .pzf-mid .gm-pgh{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pzf .pzf-mid .gm-lvl{margin:0}
.pzf .pzf-mid .gm-lvlbtn{font-size:14px;font-weight:800}
.pzf .pzf-mid .icon-btn{width:36px;height:30px}
.pzf .gm-pgbar .gm-pzstreak,.pzf .gm-pgbar .sd-time{flex:none;font-size:13px;font-weight:800}
/* (A69 item 6) the trophy by a game's ? (its friends leaderboard) */
.pzf-tr,.pzf-snd{display:grid;place-items:center;padding:0}
.pzf-tr[hidden]{display:none}
.pzf .pzf-tr+.pzf-q,.pzf .pzf-snd+.pzf-tr{margin-left:6px}
.pzf-snd.off{color:var(--faint)}
.fgg-snd{position:absolute;left:10px;top:calc(56px + env(safe-area-inset-top,0px));z-index:5}   /* (Nov 7) Gin's speaker, under the back arrow (its own switch, settings.gSnd.gin) */
#gm-tv-tr{margin-left:8px}
.pzf-q,.pzf-tr,.pzf-snd{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
.pzf-q[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pzf .gm-pgsub{display:none}
.pzf.pzf-how .gm-pgsub{display:block;position:absolute;top:2px;left:12px;right:12px;z-index:7;margin:0;padding:14px 16px;border-radius:16px;background:var(--tile-2);border:1px solid var(--gold-line);color:var(--fg);font-size:14px;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.55);animation:fgw-pop .2s ease-out}
.pzf .np-body{padding-top:0;background:none}
.pzf-foe{display:grid;grid-template-columns:1fr 64px 1fr;align-items:start;min-height:64px;margin-bottom:-2px}
.pzf-kin{grid-column:2;width:64px;height:64px;display:block}
.pzf-kin .ss{width:100%!important}
.pzf-bub{grid-column:3;justify-self:start;align-self:start;margin:2px 0 0 4px;max-width:160px;padding:6px 10px;border-radius:14px 14px 14px 4px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.pzf-bub:empty{display:none}
.pzf-bub.pzf-pop{animation:fgw-pop .35s cubic-bezier(.2,.9,.3,1.3)}
.pzf .gm-pgbody{gap:10px}
.pzf .gm-pzdone{background:color-mix(in srgb,var(--fg) 5%,transparent);border-color:var(--border)}
.pzf .btn.ghost{background:color-mix(in srgb,var(--fg) 7%,transparent);border-color:color-mix(in srgb,var(--fg) 10%,transparent)}
/* Daily word: bigger tiles and keys */
#gm-word.pzf .gm-wlegend{margin:0;justify-content:center}
#gm-word.pzf .gm-wboard{gap:7px;margin:2px auto 0}
#gm-word.pzf .gm-wrow{grid-template-columns:repeat(5,min(62px,15.5vw,7.2dvh));gap:7px}
#gm-word.pzf .gm-wt{height:min(62px,15.5vw,7.2dvh);font-size:min(28px,7vw,3.3dvh);border-radius:12px;background:color-mix(in srgb,var(--fg) 3%,transparent);border-color:color-mix(in srgb,var(--fg) 14%,transparent)}
#gm-word.pzf .gm-wt.typed{border-color:var(--muted)}
#gm-word.pzf .gm-wt.yes,#gm-word.pzf .gm-key.yes{background:var(--wd-yes);border-color:var(--wd-yes)}
#gm-word.pzf .gm-wt.near,#gm-word.pzf .gm-key.near{background:var(--wd-near);border-color:var(--wd-near)}
#gm-word.pzf .gm-wt.no,#gm-word.pzf .gm-key.no{background:var(--wd-no);border-color:var(--wd-no)}
#gm-word.pzf .gm-wkb{margin-top:auto}
#gm-word.pzf .gm-key{height:min(54px,6.6dvh);border-radius:10px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
#gm-word.pzf .gm-key.wide{background:color-mix(in srgb,var(--fg) 14%,transparent)}
/* the table's own colors, worked out again here (they come from :root's, which keep the theme's) */
.pzf{--ctl-soft:color-mix(in srgb,var(--fg) 9%,var(--tile));--ctl:color-mix(in srgb,var(--fg) 13%,var(--tile));--acc-panel:color-mix(in srgb,var(--accent) 10%,var(--tile));--acc-line:color-mix(in srgb,var(--accent) 34%,var(--tile))}
/* Light path and Light them all glow like the fire (Hunter, Oct 11: "instead of the blue, should use colors to match the
   background"): the Kindling's light, the lit pipes and the orbs are ember orange */
.pzf .gm-end.src{background:radial-gradient(circle at 40% 35%,#fff 0 15%,var(--accent) 55%);box-shadow:0 0 12px var(--hot)}
.pzf .gm-tile.lit path{stroke:var(--accent)}.pzf .gm-tile.lit circle{fill:var(--accent)}
.pzf .gm-tile.lit svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hot) 75%,transparent))}
.pzf .gm-orb{background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:color-mix(in srgb,var(--fg) 10%,transparent)}
.pzf .gm-orb.on{background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--hot-lite) 40%,#fff),var(--accent) 50%,color-mix(in srgb,var(--hot) 70%,#000));box-shadow:0 0 16px color-mix(in srgb,var(--hot) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.pzf-bub.pzf-pop,.pzf.pzf-how .gm-pgsub{animation:none}}
/* Chat inside games (A61, v0.3.72; Hunter, Oct 11: "the same chat you have normally"): the chat button by the back
   arrow, a dot for a new message, its first words under the top for a few seconds, and your normal chat (a friend's,
   or your Kindling's) lifted over the bottom of the game as a sheet; the game stays visible above it. Classes fr-gmc-. */
.fr-gmc{position:relative;width:44px;height:44px;flex:none;color:var(--fg)}
.fr-gmc-dot{position:absolute;top:8px;right:7px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg)}
.fr-gmc-peek{position:fixed;top:calc(54px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:7;max-width:420px;margin:0 auto;padding:9px 14px;border-radius:14px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;font-size:13px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer;animation:fgw-pop .25s ease-out}
.fr-gmc-bg{position:fixed;inset:0;z-index:41;background:rgba(0,0,0,.35)}
body.fr-gchat #fr-chat,body.fr-gchat-s #spc-page{z-index:42;top:32dvh;border-radius:22px 22px 0 0;border-top:1px solid var(--border);box-shadow:0 -14px 40px rgba(0,0,0,.6);animation:fr-gmc-up .22s ease-out}
body.fr-gchat #fr-chat .fr-cback svg,body.fr-gchat-s #spc-page .fr-cback svg{transform:rotate(-90deg)}
body.fr-gchat #fr-c-pin,body.fr-gchat-s #spc-pin{display:none}
body.fr-gchat #fr-view{z-index:43}
body.fr-gchat .sheet-wrap,body.fr-gchat-s .sheet-wrap{z-index:44}
@keyframes fr-gmc-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.fr-gchat #fr-chat,body.fr-gchat-s #spc-page,.fr-gmc-peek{animation:none}}
/* Game cards in chats (A61, v0.3.73; Hunter picked look C, the Banner, docs/game-cards.html): across the whole chat on
   the game table; the game's own pieces large across the top (its pic()), whose turn and its name; when it's yours,
   both Kindlings, the score and a bright Play; waiting on the other side: the banner only; over, declined or expired:
   one slim line. Classes fr-gc- (the card), fr-gp- (the games' pictures). The table's colors are --gc-* (the theme
   step of A61 sets them per theme). */
.fr-gc{--gc-a:var(--tb-a);--gc-b:var(--tb-b);--gc-c:color-mix(in srgb,var(--tb-b) 50%,var(--bg));--gc-glow:var(--tb-glow);--gc-edge:color-mix(in srgb,var(--hot) 24%,var(--tile));--gc-lbl:var(--gold);
  align-self:stretch;width:auto;max-width:none;border-radius:18px;padding:0;gap:0;color:var(--fg);flex:none}   /* (never squeezed in a long chat: it clips its edges, so it could shrink to a thin line, Hunter Oct 11) */
.fr-card.fr-gc{background:radial-gradient(70% 90% at 18% 0%,var(--gc-glow) 0%,transparent 100%),radial-gradient(120% 100% at 50% 0%,var(--gc-a) 0%,var(--gc-b) 55%,var(--gc-c) 100%);border:1px solid var(--gc-edge);box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb,var(--hot-lite) 12%,transparent);overflow:hidden}
.fr-card.fr-gc.fr-gmy{border-color:color-mix(in srgb,var(--gold) 45%,var(--gc-edge))}
.fr-gc-ban{position:relative;display:block;width:100%;height:74px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.fr-gc-wait .fr-gc-ban{height:58px}
.fr-gc-pic{position:absolute;left:58%;top:6px;transform:translateX(-50%) scale(1.45);transform-origin:top center}
.fr-gc-ban::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gc-c) 8%,color-mix(in srgb,var(--gc-c) 30%,transparent) 62%,transparent)}
.fr-gc-name{position:absolute;left:14px;bottom:9px;z-index:1;display:flex;flex-direction:column;gap:1px;text-shadow:0 1px 6px color-mix(in srgb,var(--bg) 85%,transparent)}
.fr-gc .fr-gc-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gc-lbl)}
.fr-gc-wait .fr-gc-lbl{color:var(--muted)}
.fr-gc .fr-cname{font-size:16px;color:var(--fg)}
.fr-gc-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid color-mix(in srgb,var(--hot-lite) 16%,transparent)}
.fr-gc-row strong{font-size:17px;font-weight:800;white-space:nowrap}
.fr-gc-face{display:block;flex:none;width:36px;height:36px}
.fr-gc-face .ss{width:100%!important}
.fr-gc-init{display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--fg) 12%,transparent);font-weight:800;font-size:15px}
.fr-gc-btns{margin-left:auto;display:flex;gap:6px}
.fr-gcard .fr-gc-btns .btn{width:auto;min-height:40px;margin:0;padding:0 18px;border-radius:999px;font-size:14px}
.fr-gc-btns .fr-gtake{background:linear-gradient(180deg,var(--hot-lite),var(--accent));color:var(--accent-ink);border:0;box-shadow:0 0 18px color-mix(in srgb,var(--hot) 40%,transparent)}
.fr-gc-btns .fr-gdecl{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);border:0}
/* the same card when it's over (who won, the final score, Rematch) or declined (the banner says so) */
.fr-gc-over:not(.fr-gc-won) .fr-gc-lbl,.fr-gc-off .fr-gc-lbl{color:var(--muted)}
.fr-gcard .fr-gc-btns .fr-gc-again{background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg);border:0}
.fr-gc-off{opacity:.85}
.fr-gc-upd{position:static;padding:12px 14px}
.fr-gc-upd span{font-size:12px;color:var(--muted)}
/* the games' pictures (still, drawn from their own pieces; about 76×64) */
.fr-gp{position:relative;display:block;width:76px;height:64px}
.fr-gp i,.fr-gp b{position:absolute;font-style:normal}
.fr-gp-cd{left:var(--x);top:10px;width:30px;height:42px;border-radius:5px;background:#FFF8EF;box-shadow:0 2px 6px rgba(0,0,0,.45);color:#B3261E;font-size:13px;font-weight:800;line-height:1;padding:4px 0 0 5px;box-sizing:border-box;transform:rotate(var(--r));transform-origin:50% 100%}
.fr-gp-cd.fr-gp-k{color:#1B1B1F;top:6px}
.fr-gp-die{left:var(--x);top:16px;width:28px;height:28px;border-radius:7px;background:#FFF8EF;box-shadow:0 3px 0 #C9B8A6,0 4px 8px rgba(0,0,0,.4);display:grid!important;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4px;box-sizing:border-box;transform:rotate(var(--r))}
.fr-gp-die b{position:static;width:5px;height:5px;border-radius:50%;background:#1B1B1F;align-self:center;justify-self:center}
.fr-gp-die b.o{visibility:hidden}
.fr-gp-word i{left:var(--x);top:20px;width:14px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;background:var(--wd-no)}
.fr-gp-word i.yes{background:var(--wd-yes)}.fr-gp-word i.near{background:var(--wd-near)}
.fr-gp-grid i{left:calc(12px + var(--x));top:var(--y);width:15px;height:15px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#2A0E02;background:linear-gradient(180deg,#FFF6EA,#EBD7BF);box-shadow:0 2px 0 #B99C7C}
.fr-gp-grid i.on{background:linear-gradient(180deg,var(--hot-lite),var(--accent))}
.fr-gp-clash i{top:18px;width:26px;height:26px;border-radius:50%}
.fr-gp-clash i.a{left:4px;background:radial-gradient(circle at 40% 35%,#FFF1DC,#FF8A3D 55%,#B83A10);box-shadow:0 0 12px rgba(255,120,50,.7)}   /* (the fire element keeps its own color) */
.fr-gp-clash i.z{left:46px;background:radial-gradient(circle at 40% 35%,#E8F8FF,#5CC8FF 55%,#1A6E99);box-shadow:0 0 12px rgba(92,200,255,.7)}
.fr-gp-clash b{left:30px;top:24px;font-size:10px;font-weight:900;color:var(--fg)}
.fr-gp-any i{left:22px;top:14px;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--fg) 20%,transparent)}
/* Kindling Clash's picture (A71 item 8, look F of docs/clash-pic-looks.html): both teams as outlines charging at each
   other, yours blue and theirs red as in battle, a crack of light where they meet; it fills whatever holds it (a tile,
   a row's square, a chat card's banner, fr-gc-wide) */
.fgp-sv{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,#0E2A44 0%,#071019 44%,#050302 50%,#1A0606 56%,#44100C 100%)}
.fgp-sv-z{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.fgp-sv-z path{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fgp-sv-z .g{stroke:#FF9A4A;stroke-opacity:.45;stroke-width:7px}
.fgp-sv-z .c{stroke:#FFE7B0;stroke-width:2px}
.fgp-k{position:absolute;display:block;transform:translate(-50%,-100%);--c:#5CC8FF}
.fgp-k .ss,.fgp-k .ss *{animation:none!important;transition:none!important}
.fgp-k .ss{display:block;width:100%!important;filter:brightness(0) drop-shadow(0 0 1.5px var(--c)) drop-shadow(0 0 5px var(--c))}
.fgp-t0,.fgp-t1,.fgp-t2{--c:#FF6B5E}
.fgp-t0 .ss,.fgp-t1 .ss,.fgp-t2 .ss{transform:scaleX(-1)}
.fgp-ko{opacity:.28}
.fgp-m0{left:28%;top:112%;width:62%;z-index:2}.fgp-m1{left:10%;top:80%;width:46%}.fgp-m2{left:38%;top:70%;width:40%}
.fgp-t0{left:72%;top:112%;width:62%;z-index:2}.fgp-t1{left:90%;top:80%;width:46%}.fgp-t2{left:62%;top:70%;width:40%}
.fr-gc-wide .fr-gc-ban{height:92px}
.fr-gc-wide .fr-gc-pic{inset:0;left:0;top:0;transform:none}
.fr-gc-wide .fr-gc-ban::after{background:linear-gradient(90deg,var(--gc-c) 4%,color-mix(in srgb,var(--gc-c) 55%,transparent) 38%,transparent 62%)}
.fr-gc-wide .fgp-sv{background:linear-gradient(90deg,#120705 0%,#0E2A44 40%,#071019 68%,#050302 73%,#1A0606 78%,#44100C 100%)}
.fr-gc-wide .fgp-sv-z{left:23%}
.fr-gc-wide .fgp-m0{left:61%;top:118%;width:22.3%}.fr-gc-wide .fgp-m1{left:51%;top:92%;width:16.6%}.fr-gc-wide .fgp-m2{left:69%;top:84%;width:14.4%}
.fr-gc-wide .fgp-t0{left:85%;top:118%;width:22.3%}.fr-gc-wide .fgp-t1{left:95%;top:92%;width:16.6%}.fr-gc-wide .fgp-t2{left:77%;top:84%;width:14.4%}
/* A61 (Hunter, Oct 11, after sending a Gin game: "the play live together thing and is here message is kind of in the way
   and annoying. and their kindling is still saying things"): on a full-screen friend game the live line is off the
   table (a green dot on the chat button when they're here; Play now in the chat opened from the game), and the friend's
   Kindling says nothing (its game lines are for games against your own Kindling, #fr-game.spg) */
.fr-gfull #fr-gm-live{display:none}
.fr-c-live{display:none}
body.fr-gchat .fr-c-live:not(:empty){display:flex;margin:8px 12px 0}
.fr-gmc.fr-gmc-on::after{content:'';position:absolute;left:7px;bottom:8px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--bg)}
#fr-game.fr-gfull:not(.spg) .fgg-bub,#fr-game.fr-gfull:not(.spg) .fgw-bub,#fr-game.fr-gfull:not(.spg) .fgr-bub{display:none}
/* a die tumbling at the edge never makes the table wider than the screen */
.fr-gfull #fr-gm-board{overflow-x:clip}
/* the top of a full-screen game with the chat button (A61): the title keeps clear of both corners (back and chat on the
   left, Forfeit or Cancel on the right) and long names end in … */
.fr-gfull .np-bar.gm-pgbar{padding-left:6px;gap:0}
.fr-gfull .fgg-top{padding-left:94px;padding-right:94px}
.fr-gfull .fgg-sc{gap:6px}
.fr-gfull .fgg-sc>span{max-width:58px}
.fr-gfull .fgw-top,.fr-gfull .fgr-top{left:94px;right:94px}
.fr-gfull .fgc-sl-top{left:94px}
.fr-gmc.icon-btn{background:none;border:0;box-shadow:none}
/* the game table on Daylight's light colors (A61): what was drawn light-on-dark gets a little more weight */
html[data-theme="daylight"] .pzf .gm-tile path{stroke:color-mix(in srgb,var(--fg) 24%,var(--tile))}
html[data-theme="daylight"] .pzf .gm-tile circle{fill:color-mix(in srgb,var(--fg) 24%,var(--tile))}
html[data-theme="daylight"] .pzf .gm-tile{border-color:color-mix(in srgb,var(--fg) 14%,var(--tile))}
html[data-theme="daylight"] .fgd-can.fgd-pts{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));color:#fff}
html[data-theme="daylight"] .fgr-grid{background:color-mix(in srgb,var(--fg) 10%,transparent)}
/* your background behind the shop's and the collection's card pictures (A62) */
.hm-cbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hm-cbg::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%)}
.gm-sart>:not(.hm-cbg){position:relative;z-index:1}
/* No small windows (A62, Hunter Oct 10: "I do not like that it doesn't open a full screen thing. It just does a little
   window. We should get rid of this anywhere it happens in the app"): every sheet fills the screen as a page, its content
   as wide as the app (560px) and centered on a wide screen; its close X becomes a back arrow on the left (sheetPages in
   app.js); a short one (a question, a confirm) sits in the middle of the page. */
.sheet-wrap{padding:0;background:var(--bg);align-items:stretch;justify-content:center}
@media (min-width:700px){.sheet-wrap{align-items:stretch}}
.sheet-wrap>.sheet{width:100%;max-width:560px;height:100%;max-height:none;margin:0 auto;border:0;border-radius:0;background:var(--bg);box-shadow:none;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.sheet-wrap>.sheet.sh-short{justify-content:safe center}
.sheet-wrap>.sheet>.sheet-head:first-child{position:sticky;top:calc(-10px - env(safe-area-inset-top,0px));z-index:3;margin:calc(-10px - env(safe-area-inset-top,0px)) -16px 0;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--bg)}
.sheet-head>.sh-back{order:-1;margin-left:-12px}
/* Dress-up is the shop (A62, Hunter picked "combined"): the rail has every part and what's for sale, each with its
   name; the drawer's cards have a third line (✓ Yours, Free or the price), every pane one height; what you're trying
   on says so over the stage; the bar under the drawer buys it or says what you're wearing (one height always) */
.dr-wal{flex-wrap:nowrap}
.dr-wal .gm-pill{background:var(--dr-glass);border-color:var(--dr-edge);color:var(--dr-ink)}
.dr-tagrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:30px}
.dr-tagrow .dr-mainon,.dr-tagrow .dr-pill{min-height:26px;padding:0 10px;font-size:12px}
.dr-cat{width:52px;height:auto;min-height:48px;padding:6px 0 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.dr-cl{font-size:9.5px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.dr .dr-stage{padding-left:52px}
.dr-try{position:absolute;left:50%;top:6px;z-index:3;transform:translateX(-50%);max-width:calc(100% - 140px);padding:6px 12px;border-radius:999px;background:var(--dr-glass);border:1px solid var(--dr-edge);color:var(--dr-ink);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dr-try[hidden]{display:none}
.dr-alt{position:absolute;inset:0;display:grid;place-items:center;padding-left:52px;pointer-events:none}
.dr-alt[hidden]{display:none}
.dr-stage.dr-egg>.ss{visibility:hidden}
.dr-dot{position:relative}
.dr-dot .by-ok{position:absolute;right:0;bottom:0}
.dr-bar{display:flex;align-items:center;gap:8px;height:62px;margin:6px 12px 0;padding:0 8px 0 14px;border-radius:16px;background:var(--tile-2);border:1px solid var(--border)}
.dr-bar.dr-bar-try{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.dr-bi{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0;border:0;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
span.dr-bi{cursor:default}
.dr-bi b{max-width:100%;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-bi span{max-width:100%;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-pay{flex:none;min-height:44px;padding:0 16px;font-weight:800}
.dr-pay:not(.ghost){background:var(--accent);color:var(--accent-ink)}
.dr-pay svg{width:13px;height:13px}
.dr-act{flex:none;min-height:40px;padding:0 12px;font-size:13px}
.dr-bi .gm-stp-was{margin:0 3px 0 0;font-size:12px}
.dr #gm-stage.dr-stage{padding-top:32px}   /* (room for "Trying on" over the Kindling, kept always so nothing moves) */
.dr-try{top:2px}
.dr-pay.ghost{padding:0 12px}
/* the gems price when there aren't enough gems: it opens the gem store, so it says so with a + and the accent tint
   (Oct 16 review: it looked the same as Buy) */
.dr-pay.dr-pay-gs{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--fg)}
.dr-pay.dr-pay-gs::before{content:'+';margin-right:3px;font-weight:900}
/* the shop without its drawer (Hunter, Oct 11): the foot sits on the background, one height for every part (the line,
   the dots, the bar), so the stage above never moves; the bar is glass */
.dr-foot{flex:none;display:flex;flex-direction:column;gap:4px;width:100%;max-width:560px;margin:0 auto;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
.dr-foot .dr-dh{height:26px;padding:0 4px}
.dr-foot .dr-dh .label,.dr-foot #dr-shop{color:var(--dr-dim);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.dr-foot .dr-dots{height:44px;padding:0 4px;gap:4px;justify-content:safe center}
.dr-foot .dr-dot{width:36px;height:36px}
.dr-foot .dr-dots:empty{visibility:hidden}
.dr-foot .dr-dot[aria-pressed="true"] .gm-dot{box-shadow:0 0 0 2px rgba(12,10,16,.9),0 0 0 4px #fff}
/* the dots' marks (Hunter, Oct 11: not "the little black circle"): green ✓ yours, blue ✓ the one you're wearing */
.dr-foot .dr-dot .by-ok{right:-2px;bottom:-2px;width:16px;height:16px;background:#22B573;color:#fff;border:2px solid rgba(12,10,16,.92);box-shadow:none;font-size:9px;line-height:1}
.dr-foot .dr-dot.eq .by-ok{background:#3D9BFF}
.dr-foot .dr-dot.eq .gm-dot{box-shadow:0 0 0 2px rgba(12,10,16,.9),0 0 0 4px #3D9BFF}
.dr-foot .dr-dot.eq[aria-pressed="true"] .gm-dot{box-shadow:0 0 0 2px rgba(12,10,16,.9),0 0 0 4px #3D9BFF,0 0 12px 2px rgba(61,155,255,.6)}
.dr-foot .dr-bar{height:70px;margin:2px 0 0;background:var(--dr-glass);border-color:var(--dr-edge);color:var(--dr-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);--fg:#FBF7F4;--muted:rgba(251,247,244,.78);--faint:rgba(251,247,244,.6)}
.dr-foot .dr-pos,.dr-pos{min-width:80px}   /* ("10 of 14" fits: the arrows never move) */
.dr-nestb{padding:4px 10px;border-radius:999px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
/* the Gems page (Oct 11): Kindlings Plus on top, then the gems; glass over your background, like the Challenges page */
.gg{--fg:#F4F5F7;--muted:#C9C3C0;--faint:rgba(244,245,247,.62);--line:rgba(255,255,255,.12);--border:rgba(255,255,255,.18);--tile:rgba(255,255,255,.06);--tile-2:rgba(255,255,255,.09);--bg:rgba(12,10,16,.82)}
.gg .jr-body{gap:12px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.gg-plus{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(255,200,120,.22),rgba(12,10,16,.86) 60%);border:1px solid rgba(255,214,140,.45);color:var(--dr-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gg-ph{display:flex;align-items:center;gap:8px}
.gg-ph b{font-size:18px}
.gg-perks{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--muted)}
.gg-join{display:flex;gap:8px}
.gg-join .btn{flex:1;min-height:46px}
.gg-join .btn:not(.ghost){background:var(--accent);color:var(--accent-ink)}
.gg-on{margin:0;font-weight:700;color:#F5D27A}
.gg-more{align-self:center;font-size:13px;color:#FFD2B0}
.gg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gg .gm-gemtile{background:rgba(12,10,16,.78);border-color:rgba(183,148,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gg-note{grid-column:1/-1;margin:2px 4px 0;color:var(--faint);text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* Treats (Oct 11): the treat big on the stage, and your Kindlings as chips under it to pick who gets it */
.dr-trbig{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.dr-trc{width:150px;height:150px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.04) 60%,transparent 72%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.dr-trbig b{font-size:22px}
.dr-trh{font-size:13px;font-weight:700;color:var(--dr-dim)}
.dr-foot .dr-dots.dr-kcs{justify-content:flex-start;gap:6px;padding:0 2px}
.dr-kc{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.dr-kc .gm-dot{width:22px;height:22px}
.dr-kc[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.dr-nocat .dr-foot{visibility:hidden}
.dr-vin-u{animation:dr-vin-u .22s ease-out}.dr-vin-d{animation:dr-vin-d .22s ease-out}
@keyframes dr-vin-u{from{transform:translateY(28px);opacity:.3}}@keyframes dr-vin-d{from{transform:translateY(-28px);opacity:.3}}
@media (prefers-reduced-motion:reduce){.dr-vin-u,.dr-vin-d{animation:none}}   /* (nothing picked: the foot keeps its room, so the stage never moves) */
.dr-view .dr-pen{display:none}
.dr-view .dr-nm{cursor:default}
.dr-hold{visibility:hidden}
.dr-bi .dr-need{font-size:11.5px;color:var(--faint)}   /* (a third line, under the price: the bar keeps its height) */
/* The bottom bar (A62, Hunter picked A · Floating island in docs/app-pass.html): the tabs as icons in one rounded glass
   island over the page, the open one lit with its name, your Kindling raised in the middle; shorter than the old row */
.tabs{display:flex;align-items:center;justify-content:space-between;height:56px;margin:0;padding:0 6px;border:1px solid var(--border);border-radius:28px;background:color-mix(in srgb,var(--tile) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tab{flex:none;flex-direction:row;gap:6px;height:42px;min-height:42px;min-width:36px;padding:0 9px;border-radius:21px;font-size:12.5px;font-weight:800;letter-spacing:0;color:var(--faint);transition:background .2s,color .2s}
.tab>svg{width:20px;height:20px;flex:none}
.tab .tab-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tab[aria-selected="true"]:not(.gm-tab){background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);padding:0 12px}
.tab[aria-selected="true"]:not(.gm-tab) .tab-l{position:static;width:auto;height:auto;clip:auto}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab.gm-tab{margin-top:-14px;padding:0;height:56px;min-width:56px;justify-content:center;background:none}
.tab.gm-tab .gm-ring{width:50px;height:50px}
.tab-dot{top:6px;left:calc(50% + 6px)}
.tab.gm-tab .gm-tabdot{top:0;left:calc(50% + 14px)}
.gm-pop{left:calc(50% + 40px);top:6px}
@media (max-width:370px){.tab{min-width:32px;padding:0 7px}.tab[aria-selected="true"]:not(.gm-tab){padding:0 10px}.tab .tab-l{font-size:12px}}
/* Today (A63, Hunter picked look B of docs/today-looks.html): one screen (fixed from the top to the bar) with the sky of
   the day behind everything, the greeting and your Kindling over it, the weather, the moon and the countdowns as glass
   chips, and Your day as a glass card that scrolls inside. Classes td- */
#v-today:not([hidden]){position:fixed;z-index:1;top:0;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(var(--dock-h) - 4px)}
/* the sky goes on behind the bottom bar, which floats over it (Hunter, Oct 11) */
body.td-on .dock,body.hm-on .dock{background:none}   /* (the Kindlings home's scene too, Hunter Oct 11) */
#v-today>*:not(.td-sky){position:relative;z-index:1}
.td-sky{position:absolute!important;inset:0;z-index:0;overflow:hidden;background-color:#0b1230;pointer-events:none}
.td-arc{position:absolute;left:0;right:0;top:0;width:100%;height:30%}
.td-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.td-cloud{position:absolute;height:auto}
.td-body{position:absolute;transform:translate(-50%,-50%) translateY(0);width:44px;height:44px;margin-top:0}
.td-body{top:0}
.td-arc+.td-body{}
.td-sun{border-radius:50%;background:radial-gradient(circle,#FFF4D6 0 38%,#FFD27A 60%,rgba(255,190,90,0) 72%);box-shadow:0 0 60px 22px rgba(255,200,110,.32)}
.td-moon{filter:drop-shadow(0 0 16px rgba(230,236,255,.45))}
.td-moon svg{width:40px;height:40px}
/* behind words on the sky: a faint glow, so the words stay easy to read (Oct 17) */
.td-body.td-dim{opacity:.22}
.td-sun.td-dim{box-shadow:0 0 30px 8px rgba(255,200,110,.2)}
.td-wet::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(105deg,transparent 0 14px,rgba(200,215,240,.07) 14px 15px);pointer-events:none}
#v-today .hero{flex:none;z-index:3}   /* A63: above the chips and Your day, so your Kindling’s words are never covered */
#v-today .eyebrow{color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.5)}
#v-today #greet{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
#v-today .brief{margin-top:4px;color:rgba(255,255,255,.88);font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* Layout C (Hunter, Oct 15: "it does start to feel pretty busy"): the "Next up" sentence and the gold bar are left off
   Today (the line says the first, your Kindling's dot and words the second); the weather big and plain on the sky with
   the moon beside it and the countdowns under them; Your day is a sheet from the bottom with a handle */
#v-today #greet{font-size:26px}
#v-today .brief,#v-today .alert{display:none!important}
#v-today .brief b{color:#fff}
#v-today .brief .hl{color:#FFD978}
.td-chips{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 12px;margin:14px -12px 0;padding:0 12px;max-height:240px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease}
.td-chip,#v-today .countdowns .cd{flex:none;background:rgba(12,10,16,.45);border:1px solid rgba(255,255,255,.14);color:#F4F5F7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#t-weather.td-chip{min-width:0;padding:0;margin:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
#t-weather.td-chip .label{display:none}
#weather-body{display:flex;align-items:center;gap:14px;min-width:0}
#t-weather.td-chip .v{flex:none;font-size:64px;font-weight:300;line-height:.9;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.td-wxd{display:flex;flex-direction:column;gap:2px;min-width:0}
.td-wxl{display:block;font-size:16px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#t-weather.td-chip .sub,#t-weather.td-chip .wx-sun{display:block;margin:0;font-size:13.5px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#t-weather.td-chip .linkish{color:#FFD2B0;text-shadow:none}
.mn-row.td-chip{flex-direction:column;align-items:center;gap:3px;width:auto;margin:0;padding:0;border:0;border-radius:14px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.mn-row.td-chip .mn-cm svg{width:34px;height:34px}
.mn-cm{display:grid;place-items:center}
.mn-ct{display:flex;flex-direction:column;line-height:1.2}
.mn-ct b{font-size:14px;color:#fff}
.mn-ct span{font-size:11px;color:rgba(255,255,255,.82);white-space:nowrap}
.mn-row.td-chip.mn-gold{padding:6px 10px;background:rgba(245,196,81,.9);border:1px solid #F5C451;text-shadow:none}
.mn-row.td-chip.mn-gold b,.mn-row.td-chip.mn-gold .mn-ct span{color:#1A1408}
.td-cdrow{grid-column:1/-1;display:flex;gap:6px;margin:0 -12px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.td-cdrow::-webkit-scrollbar{display:none}
.td-cdrow:not(:has(>:not([hidden]):not(:empty))){display:none}
#v-today .countdowns{display:contents}
#v-today .countdowns .cd{min-height:28px;border-radius:999px;padding:4px 10px;font-size:12px;color:rgba(255,255,255,.85)}
#v-today .countdowns .cd b{color:#fff}
#v-today .countdowns .cd.soon b{color:#FFD978}
.td-cdrow .cm-fcchip{border-radius:999px;padding:3px 10px 3px 8px}
#v-today.td-up .td-chips{max-height:0;opacity:0;margin-top:0;pointer-events:none}
#v-today .alert{flex:none;margin-top:8px;min-height:42px;padding:9px 12px;background:rgba(40,30,8,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FFF3D6}
.td-day{flex:1;min-height:0;display:flex;flex-direction:column;margin:16px -12px 0;border-radius:0;border-left:0!important;border-right:0!important;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}   /* (straight across, no corners: Hunter, Oct 15) */
.td-grab{flex:none;display:block;width:100%;height:20px;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:none;position:relative}
.td-grab::before{content:"";position:absolute;left:50%;top:8px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:color-mix(in srgb,var(--fg) 25%,transparent)}
.td-dhd{flex:none;display:flex;align-items:center;gap:8px;padding:2px 16px 2px}
.td-dhd h2{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.td-dhd .count{font-size:12px}
.td-dhd .grow{flex:1}
.td-add{font-weight:800;color:var(--accent)}
.td-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 14px;scrollbar-width:none}
.td-scroll::-webkit-scrollbar{display:none}
.td-scroll .tile{background:none;border:0;border-radius:0}
.td-scroll .list{padding:0 4px}
/* the line: a dot for each thing on a thread down the side */
#agenda{position:relative;padding-left:4px}
#agenda .item{grid-template-columns:56px 14px minmax(0,1fr) auto;gap:8px;min-height:38px;padding:7px 0;border-top:0;align-items:center}
#agenda .item time{font-size:12px;font-weight:800;color:var(--faint);text-align:right}
#agenda .item::after{content:'';grid-column:2;grid-row:1;justify-self:center;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--accent);background:var(--bg);box-sizing:border-box;z-index:1}
#agenda .item .what{grid-column:3}
#agenda::before{content:'';position:absolute;left:73px;top:14px;bottom:14px;width:2px;border-radius:1px;background:var(--border)}
#agenda .whr-row::after{border-color:var(--muted)}
#agenda .item.rem::after{border-color:var(--gold)}
#agenda .td-bed::after{border-color:#B9C4FF;background:#B9C4FF}
#agenda .item.hol::after{border-color:var(--violet,#B794FF)}
#agenda .now-line{grid-template-columns:56px 14px minmax(0,1fr);gap:8px;padding:0;min-height:20px}
#agenda .now-line{font-size:10.5px;letter-spacing:.1em;justify-items:end}
#agenda .now-line::after{grid-column:2 / 4;justify-self:stretch;height:12px;border-radius:0;box-shadow:none;
  background:radial-gradient(circle at 7px 50%,var(--accent) 0 5px,transparent 5.5px),linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 60%,transparent))}   /* a line across the card at the time it is now, with a dot on the thread (Hunter, Oct 11) */
/* Leave by: a gold stop on the line (layout C): its time where the times are, where to and how long beside it */
/* your Kindling's flame while today's check-in waits, and the five flames in its bubble */
.cm-kb{position:absolute;right:-2px;bottom:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(12,10,16,.75);border:1px solid rgba(255,196,107,.6);box-shadow:0 0 12px rgba(255,170,90,.45);z-index:2;pointer-events:none}
.cm-kb[hidden]{display:none}
.td-ask{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.bubble>.td-ask:not(:first-child){margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.td-askf{display:flex;justify-content:space-between;gap:2px}
.td-askf .cm-mood{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:40px;padding:4px 0;border:0;border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:10.5px;font-weight:700;cursor:pointer}
.td-askf .cm-mood:active{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.td-askg{font-size:11.5px;color:var(--muted);font-weight:600}
#agenda .td-med{display:block;padding:0}
#agenda .td-med::after{display:none}
.td-mb{display:grid;grid-template-columns:56px 14px minmax(0,1fr);gap:8px;align-items:center;width:100%;min-height:38px;padding:5px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.td-mb time{font-size:12px;font-weight:800;color:var(--faint);text-align:right}
.td-mb .check{grid-column:2;justify-self:center;width:18px;height:18px;z-index:1;background:var(--bg)}
.td-mb[aria-checked="true"] .check{background:var(--accent);border-color:var(--accent)}
.td-mb .soon{color:var(--gold)}
/* a reminder with a time (Oct 21): its time and circle tick it, its words open it */
.td-rem .td-rck{grid-column:1/span 2;display:grid;grid-template-columns:56px 14px;gap:8px;align-items:center;min-height:38px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.td-rem .td-rck[aria-checked="true"] .check{background:var(--accent);border-color:var(--accent)}
.td-rem .what{cursor:pointer;min-width:0}
.td-rem:not(.past) .td-rck time,.td-rem:not(.past) .what .t{color:var(--gold)}
#agenda .empty{padding:10px 0 10px 68px}
#agenda:has(>.empty)::before{display:none}
.td-sh{margin:12px 4px 4px}
.td-sh h2{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
#v-today #reminders .todo{min-height:40px}
#v-today .ag-x{margin-top:2px}
/* the habits as round buttons (the name for screen readers, the count or streak as a badge) and Your week at the end */
.td-foot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.td-foot .hb-row:not([hidden]){display:contents}   /* (every habit shows, in rows; Hunter, Oct 11) */
.td-foot .hb-row{flex:0 1 auto;min-width:0;margin:0;padding:4px 2px}
.td-foot .hb-chip{position:relative;flex-direction:column;justify-content:flex-start;gap:4px;width:68px;min-height:0;padding:0;border:0;border-radius:0;background:none;font-size:11px}
.td-foot .hb-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid var(--border);background:var(--tile-2);font-size:17px}
.td-foot .hb-chip.done .hb-ic{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--tile-2))}
/* the name under it, two lines at most (Hunter, Oct 11: "Need to be able to see what they are") */
.td-foot .hb-n{max-width:100%;font-weight:700;line-height:1.2;color:var(--muted);text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.td-foot .hb-chip.done .hb-n{color:var(--fg)}
.td-foot .hb-c,.td-foot .hb-st{position:absolute;left:calc(50% + 8px);top:24px;padding:0 4px;border-radius:999px;background:var(--tile);border:1px solid var(--border);color:var(--fg);font-size:9.5px;font-weight:900;line-height:14px}
.td-foot .hb-c+.hb-st{display:none}
.td-foot .hb-chip.done .hb-c{color:var(--accent)}
.td-hbe{flex:none;width:38px;height:38px;margin:0 12px;display:grid;place-items:center;border-radius:50%;border:2px dashed var(--border);background:none;color:var(--faint);cursor:pointer}
#v-today .wv-tile{order:-1;flex:1 0 100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:0;padding:0 2px;border:0;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.wv-l{max-width:100%;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv-tile .wv-go{font-size:13px;font-weight:800;color:var(--accent)}
.wv-tile.wv-sun .wv-l{color:var(--gold)}
#v-today .abq{margin:0 0 10px;padding:12px;border-radius:14px;background:var(--tile-2);border:1px solid var(--border)}
.mn-ct .rdm{width:12px;height:12px;vertical-align:-.15em;margin-right:3px}
/* the moon's page (A63): under the night sky, like Today's at night, with the week on glass */
#mn-sheet>.sheet{background:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 72% 9%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 88% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 35% 6%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1px 1px at 55% 24%,rgba(255,255,255,.6) 50%,transparent),linear-gradient(180deg,#05081A 0%,#121A3A 55%,#2A2140 100%);
  color:#F4F5F7;--fg:#F4F5F7;--muted:rgba(244,245,247,.78);--faint:rgba(244,245,247,.6);--tile:rgba(255,255,255,.06);--tile-2:rgba(255,255,255,.09);--border:rgba(255,255,255,.16);--line:rgba(255,255,255,.1)}
#mn-sheet>.sheet>.sheet-head:first-child{background:transparent}
#mn-sheet .mn-list{background:rgba(12,10,16,.45);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#mn-sheet .mn-next{background:rgba(12,10,16,.5);border:1px solid rgba(255,255,255,.14)}
#mn-sheet .mn-next.full{background:rgba(245,196,81,.16);border-color:rgba(245,196,81,.45)}
#mn-sheet .mn-sun .wx-sun{font-size:13px;color:var(--muted)}
.mn-sun{margin:0}
/* the weather's page (Oct 11): on today's sky (paintSky's colors), now, the next 24 hours and the week, on glass */
#wx-sheet>.sheet{background-color:#173A6E;color:#F4F5F7;--fg:#F4F5F7;--muted:rgba(244,245,247,.8);--faint:rgba(244,245,247,.62);--tile:rgba(255,255,255,.06);--tile-2:rgba(255,255,255,.09);--border:rgba(255,255,255,.16);--line:rgba(255,255,255,.1)}
#wx-sheet>.sheet>.sheet-head:first-child{background:transparent}
#wx-sheet>.sheet>*{flex:none}   /* (each part its own height; the page scrolls) */
.wx-hero{display:flex;align-items:center;gap:16px;padding:6px 4px 2px}
.wx-big{font-size:58px;line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.3))}
.wx-now{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-now>b{font-size:48px;line-height:1;font-weight:800;letter-spacing:-.02em}
.wx-lb{font-size:16px;font-weight:700}
.wx-hl{font-size:13px;color:var(--muted)}
.wx-now .wx-sun{font-size:12.5px;color:var(--muted)}
.wx-hrs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:10px 8px;border-radius:18px;background:rgba(12,10,16,.4);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wx-hrs::-webkit-scrollbar{display:none}
.wx-h{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;gap:4px}
.wx-ht{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.wx-hi{font-size:22px;line-height:1.1}
.wx-h b{font-size:15px}
.wx-hp{height:14px;font-size:11px;font-weight:700;color:#9FD3FF}
/* (whole-app check, Nov 4) no week yet: one plain line across the card, and no empty hours bar above it */
.wx-days .wx-none{display:block;padding:14px 12px;text-align:center;font-size:14px;color:var(--muted)}
.wx-hrs:empty{display:none}
.wx-days{background:rgba(12,10,16,.4);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wx-days .wx-d{grid-template-columns:42px 28px minmax(0,1fr) 120px;align-items:center;gap:8px;min-height:36px;padding:6px 0;flex:0 1 52px}
.wx-d time{font-weight:800;color:var(--fg)}
.wx-di{font-size:22px;text-align:center}
.wx-d .what{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.wx-d .t{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.wx-dr{font-size:11.5px;font-weight:700;color:#9FD3FF}
.wx-rg{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.wx-lo{font-size:13px;color:var(--muted);text-align:right}
.wx-rg b{font-size:14px}
.wx-bar{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.wx-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#8FD0FF,#FFC46B)}
.wx-note{margin:0;color:var(--faint)}
/* the weather's and the moon's pages fit one screen, nothing to scroll (Hunter, Oct 15: "We should be able to fit all
   the weather into one fullscreen page with no scrolling. same for lunar cycle page"): the week's rows share what's left
   of the screen, slimmer on a short one, and on shorter phones the gaps and the big numbers shrink too */
#wx-sheet>.sheet>.wx-days{flex:0 1 auto;display:flex;flex-direction:column;min-height:calc(var(--wxn,7) * 38px + 8px)}   /* (--wxn: how many days, set in paintWx: never slimmer than that, so rows can't overlap) */
@media (max-height:820px){
  #wx-sheet>.sheet,#mn-sheet>.sheet{gap:12px}
  .wx-big{font-size:46px}
  .wx-now>b{font-size:40px}
  .wx-hrs{padding:8px}
  .wx-days .wx-d{padding:3px 0}
  .mn-list .mn-li{padding:5px 0}
}
@media (max-height:700px){
  #wx-sheet>.sheet,#mn-sheet>.sheet{gap:9px}
  .wx-big{font-size:38px}
  .wx-now>b{font-size:34px}
  .wx-h{gap:2px}.wx-hi{font-size:19px}
  .mn-big{width:72px;height:72px}
  .mn-next{padding:8px 12px}
}
.dr-pay:disabled{opacity:.45;cursor:default}

/* ---------- Calendar on one screen (Hunter, Oct 11; docs/app-pass.html): the month's name and arrows in the top line,
   the month (always 6 rows, so nothing under it moves between months), and the picked day in one card filling the
   rest, with Coming up in the same list, scrolling inside. Classes cl-. ---------- */
#v-cal:not([hidden]){position:fixed;z-index:1;top:0;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(var(--dock-h) - 4px)}
.cl-head{flex:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 2px}
.cl-head h1{flex:1;min-width:0;margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-yr{font-size:15px;font-weight:700;color:var(--faint);letter-spacing:0}
.cl-pill{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--tile-2);color:var(--fg);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.cl-arrow{flex:none;width:36px;height:36px;border-radius:12px;border:1px solid var(--border);background:var(--tile-2);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.cl-arrow:hover{color:var(--fg)}
.cl-month{flex:none;padding:6px 8px 8px;overflow:hidden;touch-action:pan-y}
.cl-month .dow span{padding:2px 0 4px;font-size:10px;letter-spacing:.06em}
.cl-month .day{aspect-ratio:auto;height:40px;min-height:0;max-height:none;gap:2px;font-size:14px}
.cl-month .day .pips{height:4px}
@media (max-height:740px){.cl-month .day{height:34px}}
.cl-day{flex:1;min-height:118px;display:flex;flex-direction:column;overflow:hidden}   /* (A63: keeps its top line and a thing or two when Coming up is open) */
.cl-dhead{flex:none;display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 10px 6px 16px;border-bottom:1px solid var(--line)}
.cl-dhead h2{flex:1;min-width:0;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-dhead .cl-pill{min-height:32px;padding:0 12px}
.cl-add{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.cl-add[hidden]{display:block!important;visibility:hidden}   /* keeps its room on a past day, so the line doesn't move */
.cl-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}
.cl-scroll .list>li:first-child{border-top:0}
/* Coming up is its own box in a different shade, so it doesn't run into the day's things (Hunter, Oct 11) */
/* A63: closed, it's one line at the bottom ("Coming up 5 · Next 2 weeks ⌃"); open, it takes up to half the screen and its
   list scrolls inside, the day's card giving it the room */
.cl-upbox{flex:0 1 auto;min-height:48px;display:flex;flex-direction:column;max-height:48%;margin:0;padding:0;border-radius:16px;background:var(--tile-2);border:1px solid var(--border);overflow:hidden}
.cl-uph{flex:none;margin:0;font:inherit}
.cl-uphead{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:0 14px;border:0;background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.cl-upt{flex:none;font-size:14px;font-weight:800}
.cl-upn{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);font-size:12px;font-weight:800;line-height:22px;text-align:center;box-sizing:border-box}
.cl-upn:empty{display:none}
.cl-upsub{flex:1;min-width:0;text-align:right;font-size:12px;font-weight:700;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-upchev{flex:none;color:var(--muted);transition:transform .2s}
.cl-upbox.open{height:48%}   /* (one size open, however many are coming, so picking a day moves nothing) */
.cl-upbox.open .cl-upchev{transform:rotate(180deg)}
.cl-upbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.cl-upbody[hidden]{display:none}
.cl-upbox .list{padding:0 14px}
.cl-upbox .list>li:first-child{border-top:0}
.cl-upbox .item{min-height:40px;padding:9px 0}
.cl-upbox .item time{color:var(--accent);font-size:13px}
.cl-upbox .item.rem time{color:var(--gold)}

/* ---------- Health (v0.3.98): three cards on the tab, each opening its own full page (classes hl-) ---------- */
.hl-cards{display:flex;flex-direction:column;gap:12px}
.hl-card{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:20px;cursor:pointer}
.hl-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hl-ch{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.hl-ch .grow{flex:1}
.hl-ci{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hl-chev{color:var(--faint);font-size:22px;line-height:1}
.hl-big{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.hl-big small{font-size:14px;font-weight:600;color:var(--muted)}
.hl-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-cbtn{margin-top:4px;width:100%}
.hl-cwk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:4px}
.hl-cwk span{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 2px;border-radius:10px;background:var(--tile-2);font-size:10px;font-weight:800;color:var(--faint)}
.hl-cwk span b{max-width:100%;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-cwk span.did{background:color-mix(in srgb,var(--accent) 22%,var(--tile-2));color:var(--fg)}
.hl-cwk span.today{outline:1.5px solid var(--accent)}
.hl-fd{display:flex;align-items:center;gap:14px}
.hl-ring{flex:none}
.hl-macs{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hl-mac{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12px;color:var(--muted)}
.hl-mac b{color:var(--fg);font-variant-numeric:tabular-nums}
.hl-mac .fd-bar{grid-column:1/-1}
.hl-wt{display:flex;align-items:center;gap:12px}
.hl-wt .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hl-wline{flex:none}
.hl-page .sheet>[id^="hl-sec-"]{display:flex;flex-direction:column}
.hl-ch b{color:var(--fg)}

/* ---------- Notes (v0.4.00, the Notes look of docs/app-pass.html): same-size cards two across, so twice as many fit on a
   screen, and + as a round button by your thumb ---------- */
.nt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nt-list .nt-card{height:156px;min-width:0;overflow:hidden;padding:11px 12px 10px;gap:4px;border-radius:16px}
.nt-list .nt-card .nt-title{flex:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-list .nt-card .nt-text{flex:none;font-size:13px;line-height:1.4;color:var(--muted);-webkit-line-clamp:6;max-height:8.4em}
.nt-list .nt-card .nt-title+.nt-text{-webkit-line-clamp:5;max-height:7em}
.nt-list .nt-card .nt-text.nf{font-size:13px;max-height:7.4em}
.nt-list .nt-card .nt-text.nf .nf-h{font-size:1.05em;color:var(--fg)}
.nt-list .nt-peek{flex:1;min-height:0;overflow:hidden}
.nt-list .nt-peek .nt-item{min-height:24px;gap:7px;font-size:13px;color:var(--muted)}
.nt-list .nt-peek .check{width:15px;height:15px;border-width:1.5px}
.nt-list .nt-peek .check svg{width:9px;height:9px}
.nt-list .nt-more{display:none}
.nt-list .nt-card .nt-meta{flex:none;margin-top:auto;min-width:0;gap:6px;font-size:11.5px;white-space:nowrap;overflow:hidden}
.nt-list .nt-card .nt-meta>*{flex:none}
.nt-list .nt-card .nt-lkd{flex:1;font-size:13px}
.nt-list .nt-empty{grid-column:1/-1}
.nt-fab{position:fixed;z-index:5;right:max(16px,calc(50vw - 280px + 16px));bottom:calc(var(--dock-h) + 6px + var(--toast-h,0px));width:56px;height:56px;border-radius:18px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer}
.nt-fab svg{width:22px;height:22px}
body:not(.nt-on) .nt-fab{display:none}
body.np-open .nt-fab{visibility:hidden}
#v-notes{padding-bottom:72px}

/* ---------- More (v0.4.01, the More look of docs/app-pass.html): you at the top, the four lists as tiles, then the
   settings as one list (classes mo-; the rows keep .set-row so they open the same way) ---------- */
.set-row.mo-you{width:100%;min-height:72px;margin-bottom:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-tile);background:var(--tile-2)}
.mo-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--accent-ink);background:var(--accent)}
.set-row.mo-you b{font-size:16px}
.mo-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.set-row.mo-tile{flex-direction:column;align-items:flex-start;gap:8px;min-width:0;min-height:0;height:112px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--tile-2)}
.set-row.mo-tile .set-ic{width:30px;height:30px;color:var(--accent)}
.set-row.mo-tile .set-txt{min-width:0;width:100%}
.set-row.mo-tile .note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:12.5px;line-height:1.35}
.set-row.mo-tile .chev{display:none}

/* Your week on today's sky (v0.4.02), like the weather's and the moon's pages: light words, the lists on glass */
#wv-sheet>.sheet{background-color:#173A6E;color:#F4F5F7;--fg:#F4F5F7;--muted:rgba(244,245,247,.8);--faint:rgba(244,245,247,.62);--tile:rgba(255,255,255,.06);--tile-2:rgba(255,255,255,.09);--border:rgba(255,255,255,.16);--line:rgba(255,255,255,.1)}
#wv-sheet>.sheet>.sheet-head:first-child{background:transparent}
#wv-sheet>.sheet>*{flex:none}
#wv-sheet .wv-seg{background:rgba(12,10,16,.4);border-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#wv-sheet .wv-seg button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 34%,rgba(12,10,16,.4));color:#fff;box-shadow:inset 0 0 0 1.5px var(--accent)}   /* (whole-app check 2: the accent tint, never a bright white fill) */
#wv-sheet .tile,#wv-sheet .list.tile{background:rgba(12,10,16,.42);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#wv-sheet .note{color:rgba(244,245,247,.75)}

/* Gin Rummy's discard history (A63): the button by the face-up card (placed beside it, so nothing moves), and the page over the table */
.fgg-hxb{position:absolute;left:calc(100% + 14px);top:calc(72px * .7 - 21px);width:42px;height:42px;border-radius:13px;display:grid;place-items:center;border:0;padding:0;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--muted);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fgg-hxb svg{width:22px;height:22px}
.fgg-hxb b{position:absolute;right:-6px;top:-6px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:var(--tile-2);color:var(--fg);font-size:11px;line-height:19px;box-shadow:inset 0 0 0 1.5px var(--border)}
.fgg-hxp{gap:10px;padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.fgg-hxh{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:calc(10px + env(safe-area-inset-top,0px)) 94px 4px;text-align:center}
.fgg-hxh b{font-size:17px;font-weight:800;white-space:nowrap}
.fgg-hxh span{font-size:12px;color:var(--muted);white-space:nowrap}
.fgg-hxs{margin:0;font-size:13px;color:var(--muted);text-align:center}
.fgg-hxs b{color:var(--fg);margin-right:4px}
.fgg-hxl{list-style:none;margin:0 auto;padding:0;width:100%;max-width:520px;display:flex;flex-direction:column;gap:6px}
.fgg-hxr{display:flex;align-items:center;gap:12px;padding:7px 12px;border-radius:14px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.fgg-hxr>em{width:20px;flex:none;font-style:normal;font-size:12px;color:var(--muted);text-align:right}
.fgg-hxr .fgg-c{--w:36px}
.fgg-hxr>span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px}
.fgg-hxr i{font-style:normal;font-size:12px;color:var(--muted)}
.fgg-hxt i{color:color-mix(in srgb,var(--accent) 70%,var(--fg));font-weight:700}
.fgg-hxx{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));align-self:center;margin-top:auto}
/* Kindling Match: the line under the team (A63): Change team on the left (before the level starts), the Auto powers switch on the right */
.m3-tmrow{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.m3-tmrow .m3-tmc{flex-basis:auto;min-height:30px}
.m3-aut{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:2px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m3-autsw{position:relative;width:34px;height:20px;border-radius:10px;background:color-mix(in srgb,var(--fg) 18%,transparent);transition:background .15s}
.m3-autsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform .15s}
.m3-aut[aria-checked="true"]{color:var(--fg)}
.m3-aut[aria-checked="true"] .m3-autsw{background:var(--accent)}
.m3-aut[aria-checked="true"] .m3-autsw::after{transform:translateX(14px);background:var(--accent-ink)}
.m3-aut:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.m3-autsw,.m3-autsw::after{transition:none}}
/* Kindling Match's stars line (A63: stars by moves left): the stars finishing now brings, and what the next need */
.m3-smr{align-items:center;gap:8px;height:24px}
.m3-smr .m3-smrs{flex:none;font-size:15px;letter-spacing:1px}
.m3-smrt{min-width:0;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* new things (Release 3): a gold dot on the way to each (dress-up's part and the element or color), and "New" on a
   Kindling's card in the collection; placed over the corner, so nothing moves when they come and go */
.dr-cat.nu-on,.dr-dot.nu-on,.ns .gm-nst-egg.nu-on{position:relative}
.ns .gm-nst-egg.nu-on::after{content:'';position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(245,196,81,.7);pointer-events:none}
.dr-cat.nu-on::after,.dr-dot.nu-on::after{content:'';position:absolute;top:3px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(245,196,81,.7);pointer-events:none}
.dr-dot.nu-on::after{top:1px;right:1px}
.nu-new{position:absolute;top:6px;left:6px;z-index:2;padding:2px 7px;border-radius:9px;background:var(--gold);color:var(--gold-ink);font-size:10.5px;font-weight:800;letter-spacing:.02em;pointer-events:none}
/* Play: the star chest and egg meters over the games that fill them (Release 3) */
/* a new background (the beta testers' one): a gold dot on the home's picture button, "New" on its card */
.gm-bgbtn.nu-on::after{content:'';position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(245,196,81,.7);pointer-events:none}
.gm-bgpick{position:relative}
/* (Hunter, Oct 12: "a part is being cut off like it is zoomed in … Usually happens when I swipe"): the shop's stage
   follows the finger and slides past the screen's edge, so every swipe on it is the app's own: the page is never panned
   or pinch-zoomed from it (and .np pages can't scroll sideways, above) */
#gm-dress #gm-stage,#gm-dress .dr-scene{touch-action:none}
/* ---------- Calm (A67 part 2, C-1; look A of docs/calm-looks.html, "the clearing"): a night sky over hills with a small
   campfire and your Kindling by it, the same night in every theme; under it the check-in, the tools, your week and
   "Need help now?". The five glows' colors are the same in every theme too. Classes cm- */
/* one screen like Today and the Kindlings home (Hunter, Oct 15: "every other tab's main screen full screen so no
   scrolling"): the night fills whatever room the cards leave (at least 190px); only a very short screen scrolls */
#v-calm:not([hidden]){position:fixed;z-index:1;top:0;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;padding:0 12px calc(var(--dock-h) - 4px)}
.cm-scene{position:relative;flex:1 0 190px;margin-inline:calc(50% - 50vw);overflow:hidden;background:linear-gradient(180deg,#070A1F 0%,#141634 55%,#2B1A24 100%)}
.cm-stars{position:absolute;inset:0 0 80px;pointer-events:none}
.cm-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.cm-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;display:block}
.cm-fire{position:absolute;left:calc(50% - 121px);bottom:-3px;width:108px;height:99px}
.cm-fire svg{display:block;width:100%;height:100%;overflow:visible}
.cm-flames{transform-box:fill-box;transform-origin:50% 100%;animation:cm-flick 2.6s ease-in-out infinite}
.cm-eve .cm-flames{animation-name:cm-flick-lo}
.cm-eve .cm-glowp{opacity:.7}
@keyframes cm-flick{0%,100%{transform:scale(1,1)}30%{transform:scale(.97,1.05)}60%{transform:scale(1.02,.96)}}
@keyframes cm-flick-lo{0%,100%{transform:scale(.8,.62)}40%{transform:scale(.78,.66)}70%{transform:scale(.82,.6)}}
@media (prefers-reduced-motion: reduce){.cm-flames{animation:none}.cm-eve .cm-flames{transform:scale(.8,.62)}}
.cm-kin{position:absolute;left:calc(50% - 19px);bottom:50px;width:100px;height:100px}
.cm-kin .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-head{position:absolute;left:max(12px,calc(50% - 268px));right:12px;top:calc(14px + env(safe-area-inset-top,0px));z-index:2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.cm-head h1{margin:2px 0 0;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.cm-date{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.cm-bub{position:absolute;z-index:2;left:calc(50% - 9px);bottom:min(172px,calc(100% - 66px - env(safe-area-inset-top,0px)));max-width:min(200px,calc(50% - 6px));margin:0;padding:8px 12px;border-radius:14px 14px 14px 4px;font-size:13px;font-weight:600;line-height:1.35;color:#fff;background:rgba(14,11,22,.62);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cm-bub:empty{display:none}
.cm-body{flex:none;position:relative;z-index:1;margin-top:-8px;display:flex;flex-direction:column;gap:8px}
.cm-card{border-radius:18px}
#cm-today{padding:10px 10px 6px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
#cm-today.cm-did{min-height:0;padding:2px 6px}
#cm-today.cm-did .cm-done{min-height:50px;gap:10px}
#cm-today.cm-did .cm-ic{width:34px;height:34px}
.cm-ask{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 2px}
.cm-ask b{font-size:16px}
.cm-moods{display:flex;justify-content:space-between;gap:4px}
.cm-mood{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 6px;border-radius:16px;border:1px solid transparent;background:none;color:var(--faint);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cm-mood.on{background:color-mix(in srgb,var(--fg) 7%,transparent);border-color:color-mix(in srgb,var(--fg) 22%,transparent);color:var(--fg)}
.cm-mf{height:31px;display:flex;align-items:flex-end}
#cm-moods .cm-mf{height:44px}
.cm-moods.dim .cm-mood:not(.on) svg{opacity:.45}
.cm-fl{display:block;flex:none}
.cm-done{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:4px;cursor:pointer;min-height:56px}
.cm-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.cm-ic.cm-icf{background:none}
.cm-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cm-t b{font-size:15px;font-weight:800}
.cm-t small{font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-chg{color:var(--accent);font-weight:800;font-size:13px}
.cm-go{color:var(--faint);font-size:18px}
.cm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cm-tile{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:64px;min-width:0;border-radius:18px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cm-tile .cm-ic{width:36px;height:36px;border-radius:12px}
.cm-tt{display:flex;flex-direction:column;min-width:0}
.cm-tile b{font-size:15px;font-weight:800;line-height:1.3}
.cm-tile small{font-size:12px;color:var(--faint);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}   /* (two lines at most: the tiles never run off the page, Hunter Oct 15) */
.cm-tile .cm-ic{opacity:.62}   /* (a tool still to come: its picture dimmed, its words readable; the Soon pill says it) */
.cm-wk{padding:8px 14px 5px}
.cm-wkh{display:flex;justify-content:space-between}
.cm-wkh b{font-size:14.5px;line-height:1.3}
.cm-week{display:flex;justify-content:space-between;align-items:flex-end;padding:0 2px}
.cm-wd{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--faint);min-width:28px}
.cm-wd.now{color:var(--fg)}
.cm-we{width:22px;height:28px;display:grid;place-items:end center}
.cm-we:empty::before{content:'';width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--fg) 18%,transparent);margin-bottom:6px}
.cm-help{display:block;width:100%;border:0;background:none;padding:6px 0 4px;min-height:36px;text-align:center;font:inherit;font-size:12.5px;color:var(--faint);cursor:pointer}
.cm-help b{color:var(--muted);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--fg) 25%,transparent)}
.cm-rough{padding:9px 14px 2px;display:flex;flex-direction:column;gap:2px;border-color:color-mix(in srgb,#6AA7E8 40%,var(--border))}
.cm-rough p{margin:0;font-size:13.5px;line-height:1.35;color:var(--muted)}
.cm-rough p b{color:var(--fg)}
.cm-rough-b{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cm-rough-b .linkish,.cm-rough-b .btn{min-height:36px}
.cm-rough-b .btn{background:none;border:0;padding:0;color:color-mix(in srgb,var(--accent) 80%,var(--fg))}
/* Today's chip until the check-in is done (gold edge) */
.td-chip.cm-chip-t{display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;margin:0;padding:7px 12px 7px 10px;border-radius:14px;border-color:rgba(255,196,107,.55);box-shadow:0 0 18px rgba(255,170,90,.25);cursor:pointer;font:inherit;text-align:left}
.cm-chip-f{display:grid;place-items:center}
.cm-chip-x{display:flex;flex-direction:column;line-height:1.2}
.cm-chip-x b{font-size:14px;color:#fff}
.cm-chip-x span{font-size:11px;color:rgba(255,255,255,.78);white-space:nowrap}
/* the check-in and the help page: full pages with a touch of Calm's night at the top */
.cm-pgw>.sheet.cm-pg{--cm-top:color-mix(in srgb,#2A1E5C 24%,var(--bg));background:linear-gradient(180deg,var(--cm-top) 0,var(--bg) 320px)}
.cm-pgw>.sheet.cm-pg>.sheet-head:first-child{background:var(--cm-top)}
.cm-ci-date{font-size:12.5px;color:var(--faint);margin-right:4px}
.cm-form,.cm-after,.cm-hp{display:flex;flex-direction:column;gap:14px}
.cm-q{display:flex;align-items:center;gap:12px}
.cm-qk{position:relative;width:78px;height:78px;flex:none}
.cm-qk .ss,.cm-af-k .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-h{margin:0;font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
.cm-q .note{margin:3px 0 0}
#cm-moods{padding:10px 8px}
.cm-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:-6px}
.cm-lbl span{text-transform:none;letter-spacing:0;font-weight:600}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.cm-chip{display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:18px;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);color:var(--muted)}
.cm-chip.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:color-mix(in srgb,var(--accent) 80%,var(--fg))}
.cm-chip-add{border-style:dashed}
.cm-own{display:flex;gap:8px}
.cm-own .btn{flex:none}
.cm-words{resize:vertical;min-height:84px;line-height:1.45;font-family:inherit}
.cm-remr{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.cm-remr label b{display:block;color:var(--fg);font-size:14px;font-weight:800}
.cm-remr .note{display:block;margin:0}
/* More › Notifications › Daily games (A71 item 3): each switch's name over its note */
.dg-set .opt-row label{display:block;flex:1;min-width:0}
.dg-set .opt-row label b{display:block;color:var(--fg);font-size:14px;font-weight:800}
.dg-set .opt-row label .note{display:block;margin:2px 0 0}
.cm-remt input{width:auto;min-width:130px}
.cm-save{width:100%;min-height:50px;border-radius:16px;font-weight:800}
.cm-save:disabled{opacity:.5;cursor:default}
.cm-af-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:6px}
.cm-af-top .note{margin:0;max-width:300px;font-size:14px}
.cm-af-art{position:relative;width:150px;height:150px}
.cm-af-halo{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cm-c) 30%,transparent),transparent 68%)}
.cm-af-k{position:absolute;left:33px;top:28px;width:84px;height:84px}
.cm-af-f{position:absolute;right:10px;bottom:22px}
.cm-af-g{font-size:13px;font-weight:800;color:var(--gold-text)}
.cm-offers{display:flex;flex-direction:column;gap:8px}
.cm-offer,.cm-hp-else{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.cm-hp-lede{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.cm-hp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-hp-row .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;font-weight:800;text-decoration:none}
.cm-hp-sos{margin:0;font-size:14px;line-height:1.45}
/* Calm's journal (A67, C-2): the journal, writing and 3 good things, on Calm's pages. Classes cm-j, cm-gt */
.cm-tile.cm-on .cm-ic{opacity:1}
.cm-pg .cm-jbody,.cm-pg .cm-jcover,.cm-jw,.cm-gtf{display:flex;flex-direction:column;gap:12px}
.cm-jbody[hidden],.cm-jcover[hidden]{display:none}
.cm-jcover{align-items:center;text-align:center;padding:48px 8px 8px}
.cm-jcover .note{margin:0;max-width:300px}
.cm-jcover .cm-save{max-width:320px}
.cm-jcic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#F7A65B;background:color-mix(in srgb,#F7A65B 14%,transparent)}
.cm-jprompt{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--tile)),color-mix(in srgb,#6A3A8A 12%,var(--tile)));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.cm-jprompt[hidden]{display:none}
.cm-jprompt .cm-lbl{margin:0;color:color-mix(in srgb,var(--accent) 80%,var(--fg))}
.cm-jpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;line-height:1.35;height:calc(17px * 1.35 * 3);margin-bottom:4px}
.cm-jprow{display:flex;gap:8px}
.cm-jprow .btn{min-height:44px;border-radius:14px;font-weight:800}
.cm-jprow .btn:first-child{flex:1}
.cm-jbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-jbtns[hidden]{display:none}
.cm-jbtns .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:14px;font-weight:800}
.cm-jlist{display:flex;flex-direction:column;gap:8px}
.cm-jm{margin:6px 0 0}
.cm-je{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%}
.cm-jef{width:26px;flex:none;display:flex;justify-content:center;padding-top:2px}
.cm-jet{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-jet b{font-size:13px;color:var(--faint);font-weight:800}
.cm-jet b i{font-style:normal;color:#F7A65B}
.cm-jep{font-size:13px;color:color-mix(in srgb,var(--accent) 80%,var(--fg));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-jel{font-size:14px;line-height:1.4;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cm-jnone{margin:8px 0;text-align:center}
.cm-jnote{margin:4px 0 0;text-align:center}
.cm-hbtn{min-height:38px;padding:6px 16px;border-radius:12px;font-weight:800;font-size:14px}
.cm-jday{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.cm-jday[hidden]{display:none}
.cm-jwp{font-size:18px;font-weight:800;line-height:1.35;color:color-mix(in srgb,var(--accent) 85%,var(--fg))}
.cm-jwt{width:100%;min-height:180px;resize:none;border:0;background:none;padding:0;color:var(--fg);font:inherit;font-size:16px;line-height:1.6;outline:none}
.cm-jwt::placeholder{color:var(--faint)}
.cm-jfoot{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12.5px;color:var(--faint)}
.cm-jfoot svg{vertical-align:-1px}
.cm-jdel{align-self:center;color:var(--faint);font-size:14px}
.cm-gtn{margin:0;font-size:14px}
.cm-gti{display:flex;gap:12px;padding:12px 14px;border-radius:16px}
.cm-gtnum{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:13px;color:#F7A65B;background:color-mix(in srgb,#F7A65B 18%,transparent)}
.cm-gtin{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-gtt,.cm-gtw{width:100%;border:0;background:none;padding:2px 0;color:var(--fg);font:inherit;outline:none;min-height:30px}
.cm-gtt{font-size:15px;font-weight:700}
.cm-gtw{font-size:13px;color:var(--muted)}
.cm-gtt::placeholder,.cm-gtw::placeholder{color:var(--faint);font-weight:500}
.cm-gtback{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px}
.cm-gtback label{flex:1;font-size:13.5px;color:var(--muted)}
.cm-gtk{position:relative;width:48px;height:48px;flex:none}
.cm-gtk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-gb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:16px;border-color:color-mix(in srgb,#F7A65B 40%,var(--border))}
.cm-gb b{font-size:14.5px}
.cm-gb .note{margin:0}
.cm-gbd{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#F7A65B}
/* Breathe and Ground me (A67, C-3): one page, a switch at the top. Every row keeps one size whatever is picked (the
   pattern's line has room for two lines, the counts sit in it), so nothing moves (tests/ui/steady.js). The Kindling
   grows with the breath by a transform lasting the step; with reduced motion only the words and the ring change.
   Classes cm-br, cm-gr, cm-seg */
.cm-brpg{--cm-teal:#62C9B5;display:flex;flex-direction:column}
.cm-brpg>.cm-help{flex:none}
.cm-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;margin-bottom:12px;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.cm-seg button{height:38px;border:0;border-radius:12px;background:none;font:inherit;font-weight:800;font-size:14px;color:var(--faint);cursor:pointer}
.cm-seg button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 20%,transparent);color:color-mix(in srgb,var(--accent) 85%,var(--fg))}
.cm-brv,.cm-grv{flex:1 0 auto;display:flex;flex-direction:column;gap:10px}
.cm-brv[hidden],.cm-grv[hidden]{display:none}
.cm-brpat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cm-brpat .cm-chip{height:44px;padding:0 6px;flex-direction:column;justify-content:center;gap:1px;line-height:1.2;border-radius:14px}
.cm-brpat .cm-chip small{font-size:11px;font-weight:700;opacity:.75}
.cm-plus{display:inline-flex;align-items:center;padding:0 6px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);background:color-mix(in srgb,#FFC46B 16%,transparent);border:1px solid color-mix(in srgb,#FFC46B 35%,transparent)}
.cm-brsub{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.cm-brsub p{margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cm-brsub .linkish{font-size:13px;min-height:32px;padding:0 4px}
.cm-brcn{display:flex;gap:6px;justify-content:center}
.cm-brcn label{display:flex;flex-direction:column;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cm-brcn input{width:52px;height:30px;padding:0;text-align:center;font:inherit;font-size:15px;font-weight:800;color:var(--fg);border-radius:10px;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.cm-brsw{flex:1 1 0;min-height:150px;display:flex;justify-content:center;align-items:center}
.cm-brst{position:relative;height:100%;max-height:min(250px,66vw);aspect-ratio:1;display:grid;place-items:center}
.cm-brring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cm-brtr{fill:none;stroke:color-mix(in srgb,var(--fg) 12%,transparent);stroke-width:3}
.cm-brpr{fill:none;stroke:var(--cm-teal);stroke-width:4;stroke-linecap:round;opacity:0;transition:stroke-dashoffset .25s linear,opacity .25s linear}
.cm-brglow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cm-teal) 26%,transparent),color-mix(in srgb,var(--cm-teal) 5%,transparent) 62%,transparent 72%);opacity:.7;transition:opacity .8s ease}
.cm-brst.hold .cm-brglow{opacity:1;box-shadow:0 0 40px color-mix(in srgb,var(--cm-teal) 35%,transparent)}
.cm-brk{position:relative;width:60%;height:60%;transform:scale(.86);transition-property:transform;transition-timing-function:ease-in-out}
.cm-brki{position:absolute;inset:0}
.cm-brki .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-brw{min-height:52px;display:flex;flex-direction:column;align-items:center;text-align:center}
.cm-brw b{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.cm-brw span{font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums;min-height:19px}
.cm-brlen{justify-content:center;gap:6px}
.cm-brlen .cm-chip{height:34px;padding:0 12px}
.cm-brv.run .cm-brpat,.cm-brv.run .cm-brlen,.cm-brv.run .cm-brsub{opacity:.45;pointer-events:none}
@media (prefers-reduced-motion: reduce){.cm-brk{transition:none!important;transform:none!important}.cm-brpr,.cm-brglow{transition:none}}
.cm-grbar{display:flex;gap:6px}
.cm-grbar i{flex:1;height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.cm-grbar i.done{background:var(--cm-teal)}
.cm-grbar i.now{background:var(--accent)}
.cm-grk{position:relative;width:104px;height:104px;margin:4px auto 0}
.cm-grk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-grh{display:flex;flex-direction:column;align-items:center;text-align:center}
.cm-grn{font-size:60px;line-height:1;font-weight:800;color:color-mix(in srgb,var(--accent) 85%,var(--fg));height:60px}
.cm-grs{font-size:21px;font-weight:800;line-height:1.3;margin-top:4px;white-space:nowrap}
.cm-grp{display:block;margin:0 auto;max-width:300px;text-align:center;font-size:14px;line-height:1.45;height:calc(14px * 1.45 * 3);overflow:hidden}
/* (A69 item 5) the big area: most of the page under the number, one tap for each thing found */
.cm-grw{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:150px}
.cm-grun{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:4px;padding:5px 10px;border:0;border-radius:999px;background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);font:inherit;font-size:12px;font-weight:800;cursor:pointer;visibility:hidden}
.cm-grun.on{visibility:visible}
.cm-grv.end .cm-grun{visibility:hidden}
.cm-grtap{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px 12px;border-radius:24px;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:color-mix(in srgb,var(--fg) 4%,transparent);border:1.5px dashed color-mix(in srgb,var(--fg) 18%,transparent);transition:background .15s}
.cm-grtap:active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cm-grtap.full{border-style:solid;border-color:color-mix(in srgb,var(--cm-teal) 50%,transparent)}
.cm-grl{display:flex;justify-content:center;align-self:stretch;gap:12px;height:48px}
.cm-grl i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--fg) 24%,transparent);transition:background .2s,box-shadow .2s}
.cm-grl i.on{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.cm-grl i svg{visibility:hidden}
.cm-grl i.on svg{visibility:visible}
.cm-grv.end .cm-grl,.cm-grv.end .cm-grt{visibility:hidden}
@media (max-height:780px){.cm-grk{width:76px;height:76px}}
.cm-grv.end .cm-grtap{background:none;border-color:transparent;cursor:default}
/* Focus (A67, C-4): the desk scene (one, moved between before and running), the choices as rows of one size (Your own
   turns into a box in its own place), who comes, the ring with the time left, Pause and End. Classes cm-fc, cm-fk */
.cm-fcpg{display:flex;flex-direction:column}
.cm-fcpg>.cm-help{flex:none}
.cm-fcv{flex:1 0 auto;display:flex;flex-direction:column;gap:10px}
.cm-fcv[hidden]{display:none}
.cm-fcv .cm-lbl{margin:2px 0 -4px}
.cm-fcart{position:relative;height:150px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 60% 70%,#3A2010 0%,#120A10 72%);border:1px solid color-mix(in srgb,#FFB060 18%,transparent)}
#cm-fc-run .cm-fcart{height:130px}
.cm-fcdesk{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.cm-fck{position:absolute;left:calc(50% - 112px);bottom:22px;width:104px;height:104px}
#cm-fc-run .cm-fck{width:92px;height:92px;bottom:20px}
.cm-fck .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-fcbub{position:absolute;left:calc(50% - 4px);top:12px;max-width:min(150px,calc(50% - 14px));margin:0;padding:6px 10px;border-radius:14px 14px 14px 4px;font-size:12.5px;font-weight:600;line-height:1.3;color:#fff;background:rgba(14,11,22,.62);border:1px solid rgba(255,255,255,.13)}
.cm-fcbub:empty{display:none}
.cm-fcm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cm-fcb{grid-template-columns:repeat(3,minmax(0,1fr))}
.cm-fcm .cm-chip{justify-content:center;padding:0 4px;height:38px;font-size:12.5px}
.cm-fcown{padding:0 2px!important}
.cm-fcown input{width:100%;height:30px;border:0;background:none;text-align:center;font:inherit;font-size:15px;font-weight:800;color:inherit;outline:none;padding:0}
.cm-fcwho{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:58px}
.cm-fcwk{position:relative;width:40px;height:40px;flex:none}
.cm-fcwk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-fcv .cm-save{margin-top:auto}
.cm-fctl{text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-fcring{position:relative;width:min(260px,64vw,32dvh);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.cm-fcring svg{position:absolute;inset:0;width:100%;height:100%}
.cm-fctr{fill:none;stroke:color-mix(in srgb,var(--fg) 8%,transparent);stroke-width:8}
.cm-fcpr{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.cm-fcpr.brk{stroke:#62C9B5}
.cm-fct{display:flex;flex-direction:column;align-items:center;text-align:center}
.cm-fct b{font-size:clamp(38px,12vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.cm-fct span{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.cm-fcxp{text-align:center;font-size:14px;font-weight:800;color:var(--gold-text);min-height:20px}
/* Focus's sounds (Hunter, Oct 15): the running page's row opens Sounds; what's started there fades at the focus's end */
.cm-fcsdr{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:52px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cm-fcsdr .cm-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cm-fcsdr .cm-t b,.cm-fcsdr .cm-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-fcsdr .cm-t small{color:var(--faint);font-size:12px}
.cm-fcbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.cm-fcbtns .btn{min-height:50px;border-radius:16px;font-weight:800}
@media (prefers-reduced-motion: reduce){.cm-fcpr{transition:none}}
.cm-fcchip .cm-chip-x span{font-variant-numeric:tabular-nums}
.td-chip.cm-fcchip{border-color:rgba(106,167,232,.55);box-shadow:0 0 18px rgba(106,167,232,.22)}
.cm-fkn{margin:0 0 12px}
.cm-fkl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cm-fkb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:16px;color:inherit;font:inherit;cursor:pointer}
.cm-fkb.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--tile))}
.cm-fkb:disabled{opacity:.5;cursor:default}
.cm-fkb b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cm-fkb small{font-size:11.5px;color:var(--faint)}
.cm-fkk{position:relative;width:64px;height:64px}
.cm-fkk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
/* Sounds (A67, C-5): six cards with pictures (the Plus ones marked), the mixer (one row, three with Plus, always the same
   rows), stop after, and the row saying when they stop. Classes cm-sd, cm-ws */
.cm-sdpg{display:flex;flex-direction:column}
.cm-sdpg>.cm-help{flex:none}
.cm-sdv{flex:1 0 auto;display:flex;flex-direction:column;gap:10px}
.cm-sdv .cm-lbl{margin:2px 0 -4px}
.cm-sdg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}   /* (nine sounds, three to a row: Hunter, Oct 28) */
.cm-sdc{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 8px;border-radius:16px;overflow:hidden;color:inherit;font:inherit;text-align:center;cursor:pointer}
.cm-sdc.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cm-sda{display:block;width:100%;aspect-ratio:3/2;height:auto}
.cm-sdc b{font-size:13px;font-weight:800;margin-top:4px;line-height:1.15;height:2.3em;display:flex;align-items:center;justify-content:center;padding:0 3px;overflow:hidden}   /* (two lines for the longer names, every card one height) */
.cm-sdc small{font-size:11.5px;color:var(--faint);height:18px;display:flex;align-items:center;justify-content:center}
.cm-sdc.on small{color:color-mix(in srgb,var(--accent) 80%,var(--fg))}
.cm-sdmix{display:flex;flex-direction:column;gap:2px;padding:6px 14px}
.cm-sdr{display:flex;align-items:center;gap:12px;height:38px;font-size:13.5px;font-weight:700}
.cm-sdr span{width:76px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sdr input{flex:1;min-width:0;accent-color:var(--accent)}
.cm-sdr0{color:var(--faint)}
.cm-sdr0 input{opacity:.3}
.cm-sdrp{width:100%;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.cm-sdrp input{pointer-events:none}
.cm-sdrp .cm-plus{flex:none;width:auto}
.cm-sdt{grid-template-columns:repeat(4,minmax(0,1fr))}
.cm-sdbar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:16px;min-height:62px}
.cm-sdk{position:relative;width:44px;height:44px;flex:none}
.cm-sdbar .cm-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sdk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-sdpp{width:44px;height:44px;border-radius:50%;flex:none;color:color-mix(in srgb,var(--accent) 85%,var(--fg));background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cm-sdpp:disabled{opacity:.35}
.cm-wsbox[hidden]{display:none}
.cm-wsbox{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px}
.cm-ws{flex:1 0 100%;scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;color:inherit;text-decoration:none;border-color:rgba(201,167,255,.3);background:linear-gradient(120deg,#17132A,var(--tile))}
.cm-wsbox.many .cm-ws{flex-basis:86%}
.cm-ws img{width:104px;height:58px;border-radius:10px;object-fit:cover;flex:none;background:#0B1030}
.cm-ws .cm-t small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cm-wsl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#C9A7FF}
.cm-wsy{font-size:11.5px;font-weight:800;color:var(--muted);flex:none}
/* Wind down (A67, C-5): your Kindling dozing, four steps of one size each (the open one a set size bigger), Next; the
   breathing minute dims the screen as it goes; the evening row on the Calm home. Classes cm-wd */
.cm-wdpg{display:flex;flex-direction:column;--cm-top:color-mix(in srgb,#1C1840 70%,var(--bg))!important}
.cm-wdpg>.cm-help{flex:none}
.cm-wdv{flex:1 0 auto;display:flex;flex-direction:column;gap:10px}
.cm-wdtop{display:flex;align-items:center;gap:12px}
.cm-wdtop .cm-h{font-size:20px}
.cm-wdtop .note{margin:3px 0 0}
.cm-wdk{position:relative;width:70px;height:70px;flex:none}
.cm-wdk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-wdl{display:flex;flex-direction:column;gap:8px}
.cm-wdst{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:16px;height:64px;overflow:hidden}
.cm-wdst.now{height:116px;border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.cm-wdst .cm-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-wdun{flex:none;align-self:center;font-size:13.5px}
.cm-wdst.now{height:112px}
.cm-wdn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:800;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--muted)}
.cm-wdst.now .cm-wdn{color:color-mix(in srgb,var(--accent) 85%,var(--fg))}
.cm-wdst.done .cm-wdn{background:color-mix(in srgb,#62C9B5 30%,transparent);color:#62C9B5}
.cm-wdin{display:flex;gap:8px;margin-top:8px}
.cm-wdin .field{flex:1;min-width:0;height:40px}
.cm-wdin .btn{flex:none;min-height:40px;border-radius:12px;font-weight:800}
.cm-wdsd .cm-chip{flex:1;justify-content:center;height:40px}
.cm-wdv .cm-save{margin-top:auto}
.cm-wdrow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:18px;min-height:58px;color:inherit;font:inherit;text-align:left;cursor:pointer;background:linear-gradient(120deg,#1C1840,#2A1B33);border-color:rgba(201,167,255,.3)}
.cm-wdrow[hidden]{display:none}
.cm-wdgo{flex:none;padding:8px 14px;border-radius:12px;font-weight:800;font-size:13.5px;color:color-mix(in srgb,var(--accent) 85%,var(--fg));background:color-mix(in srgb,var(--accent) 18%,transparent)}
.cm-brpg.cm-dim::after{content:'';position:fixed;inset:0;background:#000;pointer-events:none;opacity:0;animation:cm-dim 60s linear forwards}
@keyframes cm-dim{to{opacity:.6}}
/* Your glow over time (A67, C-6): 30 days or a year (the card one height for both, so switching never moves what's
   around it), what it says in plain words, and the bars. Classes cm-gl */
.cm-head{display:flex;align-items:flex-end;gap:10px}
.cm-head>div:first-child{flex:1;min-width:0}   /* (Hunter, Oct 29: Your glow and Fresh start at the top right) */
.cm-glbtn{flex:none;margin-bottom:-2px;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(14,11,22,.45);color:#fff;cursor:pointer}
/* ---- Fresh start (A69 part 4; the Garden page, Hunter's pick of docs/fresh-looks.html; way in C, the sprout button
   by Your glow). The garden is a night scene in every theme; the page's words use the theme's color names. Classes fs- */
.cm-fsbtn{flex:none;margin-bottom:-2px;min-width:40px;height:40px;padding:0 10px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:4px;position:relative;border:1px solid rgba(255,255,255,.14);background:rgba(14,11,22,.45);color:#A8EE94;font:inherit;cursor:pointer}
.cm-fsbtn em{font-style:normal;font-weight:800;font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.cm-fsdot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #0E0A14}
/* the Night garden (round 6, Hunter's pick A of docs/mock/fresh-full.html): the whole page is the garden at night in every
   theme, with its own light color names; a garden for each fresh start side by side (#cm-fs-track, swiped or the dots),
   the last one empty to add one; the glass sheet below keeps one height so swiping never moves anything */
#cm-fs>.sheet.fs-pg{--fg:#F4F5F7;--muted:rgba(244,245,247,.7);--faint:rgba(244,245,247,.45);--tile:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--cm-top:transparent;
  color:var(--fg);position:relative;overflow:hidden;gap:0;padding-left:0;padding-right:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(80% 46% at 50% 44%,#1E3A22 0%,#0E1E14 55%,#060A08 100%)}
#cm-fs>.sheet.fs-pg>.sheet-head:first-child{position:relative;top:0;margin:calc(-10px - env(safe-area-inset-top,0px)) 0 0;padding-left:12px;padding-right:12px;background:transparent}
.fs-pg .sheet-head h2{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fs-pg .sheet-head .icon-btn{border:1px solid rgba(255,255,255,.14);background:rgba(10,14,10,.45);color:#fff}
.fs-priv{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;color:rgba(255,255,255,.8);background:rgba(10,14,10,.45);border:1px solid rgba(255,255,255,.12)}
.fs-pg>.cm-jcover{padding:0 16px}
.fs-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.fs-main[hidden]{display:none}
.fs-stars{position:absolute;inset:0 0 40%;pointer-events:none}
.fs-gard{position:relative;flex:1;min-height:200px;overflow:hidden;touch-action:pan-y}
.fs-track{position:absolute;inset:0;display:flex;transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.fs-gp{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.fs-top{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;padding:0 24px;line-height:1.1;text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.fs-top b{font-size:clamp(44px,9dvh,64px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.fs-top span{font-size:15px;font-weight:800;margin-top:2px}
.fs-top em{font-style:normal;font-size:13px;color:rgba(255,255,255,.72);margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-top .fs-tnew{font-size:24px;margin-top:18px}
.fs-top .fs-tnew+em{white-space:normal;font-size:13px;font-weight:600;margin-top:6px;max-width:300px}
.fs-mound{position:absolute;left:50%;bottom:0;width:330px;height:64px;transform:translate(-50%,40%);border-radius:50%;background:radial-gradient(closest-side,#3A2A1C,#22180F 70%,transparent)}
.fs-plant{position:absolute;left:50%;bottom:6px;height:min(calc(100% - 112px),83vw,466px);aspect-ratio:360/300;transform:translateX(-50%)}
.fs-plant svg{display:block;width:100%;height:100%;overflow:visible}
.fs-plant svg>g{transform-origin:50% 95%;transform-box:view-box}
.fs-gp.on .fs-plant svg>g{animation:fs-sway 5s ease-in-out infinite}
.fs-plant.fs-up{animation:fs-up .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes fs-sway{0%,100%{rotate:-1.4deg}50%{rotate:1.4deg}}
@keyframes fs-up{0%{scale:.82}100%{scale:1}}
/* (still while another page covers it) */
.fs-w:has(~.sheet-wrap:not([hidden]),~.np:not([hidden])) .fs-plant svg>g{animation-play-state:paused}
.fs-gk{position:absolute;right:5%;bottom:4px;width:70px;height:80px;pointer-events:none}
.fs-gk .ss{width:70px!important;height:80px}
.fs-dots{flex:none;display:flex;justify-content:center;align-items:center;gap:2px;height:28px}
.fs-dots button{width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.fs-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:width .2s}
.fs-dots [aria-selected=true] i{width:20px;border-radius:4px;background:#A8EE94}
.fs-dots .add i{width:13px;height:13px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;line-height:1;color:rgba(255,255,255,.6);background:none;border:1px dashed rgba(255,255,255,.45)}
.fs-dots .add[aria-selected=true] i{width:13px;color:#0E2008;background:#A8EE94;border:1px solid #A8EE94}
.fs-sheet{flex:none;height:242px;margin:0 10px;padding:14px;display:flex;flex-direction:column;gap:10px;border-radius:24px;background:rgba(14,22,16,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fs-sheet.fs-hd{height:312px}
.fs-due{flex:none;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:16px;border:1px solid rgba(142,224,122,.45);background:rgba(142,224,122,.1)}
.fs-dic{flex:none;font-size:26px;line-height:1}
.fs-dt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fs-dt b,.fs-dt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-dt b{font-size:15px}.fs-dt small{font-size:12px;color:var(--muted)}
.fs-due .fs-col{flex:none;width:auto;min-height:44px;padding:0 12px;font-size:13px}   /* (width auto: .fs-go below is the full-width button, Oct 30: Hunter's phone had Collect run off the card) */
.fs-nx{display:flex;flex-direction:column;gap:7px}
.fs-nx b{font-size:15px;color:#BDF2AE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-pb{height:7px;border-radius:7px;background:rgba(255,255,255,.12);overflow:hidden}
.fs-pb i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4FB86A,#BDF2AE)}
.fs-lv{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;text-align:center}
.fs-lv span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:800;color:rgba(255,255,255,.45);white-space:nowrap}
.fs-lv i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.fs-lv .got{color:#BDF2AE}.fs-lv .got i{background:rgba(142,224,122,.18);border-color:rgba(142,224,122,.55)}
.fs-lv .nx{color:#fff}.fs-lv .nx i{border:1.5px dashed #A8EE94;background:none;filter:grayscale(.6);opacity:.85}
.fs-stats{display:flex;gap:8px}
.fs-stats div{flex:1;min-width:0;padding:7px 4px;border-radius:14px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.fs-stats b{display:block;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-stats span{font-size:11px;font-weight:700;color:var(--muted)}
.fs-go{flex:none;width:100%;min-height:48px;border-radius:16px;font-weight:800;font-size:15px;color:#0E2008;background:linear-gradient(180deg,#D2F7C2,#8EE07A);border:0;box-shadow:0 0 24px rgba(142,224,122,.28)}
.fs-sheet>.fs-go{margin-top:auto}
.fs-addp{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fs-addp p{margin:0;text-align:center;font-size:13px;line-height:1.45;color:var(--muted)}
.fs-hl{flex:none;margin:8px 16px 0;text-align:center;font-size:11.5px;line-height:1.45;color:var(--muted)}
.fs-hl a{color:var(--fg);font-weight:700;text-decoration:none;white-space:nowrap}
/* adding or changing one, and I have a craving */
.fs-form{display:flex;flex-direction:column;gap:10px}
.fs-form .cm-lbl{margin:6px 0 -4px}
.fs-fnote{margin:-4px 0 0;font-size:12px}
.fs-when{margin-bottom:0}
.fs-early{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.fs-more{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.fs-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;font:inherit;color:var(--fg);cursor:pointer}
.fs-opt>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.fs-opt b{font-size:15px}.fs-opt small{font-size:12px;color:var(--muted)}
.fs-oi{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.fs-slipq{display:flex;flex-direction:column;gap:10px;padding:12px 14px}
.fs-slipq p{margin:0}
.fs-slipb{display:flex;gap:8px}.fs-slipb .btn{flex:1}
.fs-crave{display:flex;flex-direction:column;gap:10px}
.fs-ck{align-self:center;width:96px;height:108px}
.fs-ck .ss{width:96px!important;height:108px}
.fs-cl{margin:0 0 4px;text-align:center;font-size:16px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.fs-gp.on .fs-plant svg>g,.fs-plant.fs-up,.fs-track{animation:none;transition:none}}
.cm-wkh{align-items:baseline}
.cm-wk30{font-size:12.5px;color:var(--faint);min-height:0;padding:0}
.cm-glpg .sheet-head h2{white-space:nowrap}
.cm-glseg{display:flex;gap:6px;margin-right:4px}
.cm-glseg .cm-chip{height:32px;padding:0 11px;gap:5px}
.cm-glv{display:flex;flex-direction:column;gap:10px}
.cm-glr{display:flex;justify-content:space-between;align-items:baseline}
.cm-glr b{font-size:16px}
.cm-glr .note{margin:0}
.cm-glcal{height:300px;padding:10px;border-radius:18px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:min-content;gap:4px;align-content:start}
.cm-glcal i{height:38px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2px 0 3px;font-style:normal;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.cm-glcal i.h{height:18px;background:none;font-size:10.5px;font-weight:800;color:var(--faint);justify-content:center}
.cm-glcal i.x{background:none}
.cm-glcal i.now{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent) inset}
.cm-glcal small{font-size:9.5px;color:var(--faint);line-height:1}
.cm-glcal.yr{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 10px;padding:12px}
.cm-glm{display:flex;flex-direction:column;gap:3px}
.cm-glm b{font-size:11px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.cm-glm span{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.5px;max-width:84px}
.cm-glm i{height:auto;aspect-ratio:1;border-radius:50%;padding:0;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.cm-glm i.x{background:none}
.cm-glsum{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;min-height:86px}
.cm-glsum b{display:block;font-size:14.5px;line-height:1.45}
.cm-glsum .note{display:block;margin:3px 0 0;font-size:13px}
.cm-glk{position:relative;width:46px;height:46px;flex:none}
.cm-glk .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.cm-glbox{padding:12px 14px;border-radius:18px;display:flex;flex-direction:column;gap:8px}
.cm-glbox[hidden]{display:none}
.cm-glbox .cm-lbl{margin:0}
.cm-glbars{display:flex;flex-direction:column;gap:7px}
.cm-glb{display:grid;grid-template-columns:minmax(0,9.5em) 1fr 26px;gap:10px;align-items:center;font-size:13px}
.cm-glb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-glb s{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden;text-decoration:none}
.cm-glb s i{display:block;height:100%;border-radius:4px}
.cm-glb em{font-style:normal;font-size:12px;color:var(--faint);text-align:right}
.cm-glnote{margin:0;font-size:12px}
/* ---------- Play (Hunter, Oct 17; look C of docs/play-looks.html). Your home's background (still) behind the top bar,
   the title, Keep playing and the dailies, those on glass; then the meters, the chips and the games as square icons, on
   the page's own colors. The top bar is see-through until the page scrolls (py-scr). Classes py- ---------- */
.np.py .np-bar{background:transparent;transition:background-color .2s}
.np.py.py-scr .np-bar{background:var(--bg)}
.np.py:not(.py-scr) .gm-back{color:#FBF7F4;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.np.py:not(.py-scr) .gm-pill{background:rgba(16,11,9,.62);border-color:rgba(255,255,255,.14);color:#FBF7F4;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.py-top{position:relative;display:flex;flex-direction:column;gap:10px}
.py-top,.py-games{--dr-ink:#FBF7F4;--dr-dim:rgba(251,247,244,.8);--dr-glass:rgba(16,11,9,.6);--dr-edge:rgba(255,255,255,.14)}
.py-head{display:flex;align-items:center;gap:10px;min-height:46px}
.py-head .grow{flex:1}
.py-head .gm-pgh{color:var(--dr-ink);font-size:30px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.py-ib{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px}
.py-ib.on{color:color-mix(in srgb,var(--accent) 80%,#fff);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.py-wdp{display:flex;gap:1.5px}
.py-wdp i{width:6.5px;height:8px;border-radius:1.5px;font-size:0;background:var(--wd-no)}
.py-wdp i.yes{background:var(--wd-yes)}.py-wdp i.near{background:var(--wd-near)}
.py-sdp{display:grid;grid-template-columns:repeat(3,1fr);width:56%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--fg) 45%,transparent)}
.py-sdp i{display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px;color:var(--fg);border:.5px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.py-sdp i.on{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.py-dpic .py-sdp i{font-size:5.5px}
.py-find{display:flex;align-items:center;gap:8px;height:46px;padding:0 13px;border-radius:14px;background:var(--tile);border:1px solid var(--border);color:var(--faint)}
.py-find[hidden]{display:none}
.py-q{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;font-size:16px;outline:none}
.py-games{display:flex;flex-direction:column;gap:12px}
.py-sl{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px 0}
.py-sl b{font-size:17px;font-weight:800}
.py-sl span{font-size:12.5px;font-weight:700;color:var(--faint)}
.py-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.py-t{position:relative;min-width:0;text-align:center;cursor:pointer}
.py-pic.gm-pc-pic{width:100%;height:auto;aspect-ratio:1;padding:0;border-radius:22px;color:inherit;font:inherit}
.py-t>b{display:block;margin-top:6px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-rk{position:absolute;left:5px;top:5px;z-index:2;height:24px;padding:0 8px;border:0;border-radius:999px;background:rgba(10,6,4,.62);color:#FBF7F4;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer}
.py-rk1{background:var(--gold);color:var(--gold-ink)}
.py-badge{position:absolute;left:6px;top:6px;z-index:1;padding:3px 7px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:9px;font-weight:800;letter-spacing:.04em}
/* a friend game from Play: who to play with */
/* Play since A68 item 9 (Oct 25, look B2 of docs/play-foryou-looks.html): the day's rings in one line, three tabs to tap
   or swipe, the dailies as big cards, Keep playing as one row, icons with their level on the corner */
.py-ib,.py-rings,.py-tabs,.py-dl,.py-kp{border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font:inherit;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.py-ib{cursor:pointer}
.py-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 8px;border-radius:16px}
.py-mts{display:contents}
.py-mts[hidden]{display:none}
.py-mt{display:flex;align-items:center;gap:7px;min-width:0;min-height:36px;padding:0;border:0;background:none;color:var(--dr-dim);font:inherit;font-size:11px;line-height:1.2;text-align:left;cursor:pointer}
.py-mt>span{min-width:0;display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-mt b{color:var(--dr-ink);font-size:12.5px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.py-mt svg{width:26px;height:26px;flex:none;transform:rotate(-90deg)}
.py-mt circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5}
.py-mt circle.on{stroke:color-mix(in srgb,var(--gold) 75%,#fff);stroke-linecap:round}
.py-mtc circle.on{stroke:color-mix(in srgb,var(--accent) 70%,#fff)}
.py-mte circle.on{stroke:color-mix(in srgb,var(--violet) 70%,#fff)}
.py-mtrest{opacity:.75}
.py-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px}
.py-tabs button{height:38px;min-width:0;padding:0 4px;border:0;border-radius:12px;background:none;color:var(--dr-dim);font:inherit;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.py-tabs button.on{background:color-mix(in srgb,var(--accent) 26%,transparent);color:color-mix(in srgb,var(--accent) 55%,#fff)}
.py-find,.py-games{position:relative;z-index:1}
.py-pane{display:flex;flex-direction:column;gap:12px}
.py-pane[hidden]{display:none}
.py-dls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.py-dls:has(>.py-dl[hidden]){grid-template-columns:minmax(0,1fr)}
.py-dl{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;border-radius:20px;overflow:hidden;text-align:left;cursor:pointer}
.py-dl[hidden]{display:none}
.py-dl.py-dnew{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 8px 26px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
/* (A71 item 3) a daily still waiting today, while More › Notifications › Remind me about the daily games is on */
.py-dl.py-due::after{content:'';position:absolute;top:9px;right:10px;z-index:2;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(245,196,81,.7);pointer-events:none}
.py-dpic.gm-pc-pic{width:100%;height:auto;aspect-ratio:16/10;border-radius:0;cursor:inherit}
.py-dpic .py-wdp{gap:4px}
.py-dpic .py-wdp i{width:22px;height:26px;border-radius:5px;display:grid;place-items:center;font-size:13px;font-weight:800;font-style:normal;color:#fff}
.py-dpic .py-sdp{width:auto;height:60%;margin-top:14%}
.py-dpic .py-sdp i{font-size:12px}
.py-dtag{position:absolute;left:8px;top:8px;z-index:1;padding:4px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:800;letter-spacing:.06em;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.py-dtag.py-dok{background:var(--green);color:var(--accent-ink)}
.py-dtag.py-doff{background:rgba(10,6,4,.7);color:#FBF7F4}
.py-dt{min-width:0;display:flex;flex-direction:column;padding:9px 11px 0}
.py-dt b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-dt small{font-size:12px;color:var(--dr-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-dgo{align-self:flex-start;margin:8px 11px 11px;padding:7px 14px;border-radius:11px;font-size:13.5px;font-weight:800;color:color-mix(in srgb,var(--accent) 55%,#fff);background:color-mix(in srgb,var(--accent) 28%,transparent)}
.py-dl:not(.py-dnew) .py-dgo{color:var(--dr-ink);background:rgba(255,255,255,.1)}
.py-kp{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:18px;text-align:left;cursor:pointer}
.py-kp[hidden]{display:none}
.py-kpic.gm-pc-pic{flex:none;width:54px;height:54px;border-radius:14px;cursor:inherit}
.py-kpic>*{zoom:.45}
.py-kt{flex:1;min-width:0;display:flex;flex-direction:column}
.py-kt b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-kt small{font-size:12px;color:var(--dr-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-hl{font-size:10px;font-weight:800;letter-spacing:.08em;color:color-mix(in srgb,var(--accent) 60%,#fff)}
.py-go{flex:none;padding:7px 13px;border-radius:11px;font-size:13.5px;font-weight:800;color:color-mix(in srgb,var(--accent) 60%,#fff);background:color-mix(in srgb,var(--accent) 24%,transparent)}
.py-none{margin:2px;font-size:13px;color:var(--faint)}
.py-t{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.py-t .py-pic{transition:transform .35s ease-out}
.py-t.py-press .py-pic{transform:scale(.94)}
.py-lv{position:absolute;left:6px;bottom:6px;z-index:1;max-width:calc(100% - 12px);padding:2px 8px;border-radius:999px;background:rgba(10,6,4,.68);color:#FBF7F4;font-size:10.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.py-fv{position:absolute;top:5px;right:8px;z-index:1;color:var(--gold);font-size:15px;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.py-gpic.gm-pc-pic{flex:none;width:44px;height:44px;border-radius:12px;cursor:inherit}
@media (min-width:760px){.py-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.py-dpic.gm-pc-pic{aspect-ratio:auto;height:150px}}
@media (prefers-reduced-motion:reduce){.py-t .py-pic{transition:none}}
.py-pwhead{display:flex;align-items:center;gap:14px}
.py-pwpic.gm-pc-pic{flex:none;width:92px;height:92px;border-radius:22px;cursor:default}
.py-pwt{min-width:0}
.py-pwt .note{margin:4px 0 0}
.py-pwl{display:flex;flex-direction:column;gap:12px}
.py-pwlist{display:flex;flex-direction:column;border-radius:18px;background:var(--tile);border:1px solid var(--border);overflow:hidden}
.py-pwr{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.py-pwr+.py-pwr{border-top:1px solid var(--border)}
.py-pwr .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.py-pwr b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.py-pwr small{font-size:12.5px;color:var(--faint)}
.py-pwmine small{color:var(--gold);font-weight:700}
.py-pwav{position:relative;flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--ctl-2);font-size:17px;font-weight:800}
.py-pwk .ss{position:absolute;inset:0;width:100%;height:100%}
.py-pwplus{color:var(--accent);font-size:22px}
.py-pwgo{flex:none;color:var(--faint);font-weight:800}
.py-pwmine .py-pwgo{padding:6px 12px;border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* the Collection (Oct 17, look A of docs/collection-looks.html): the totals and Kindlings | Cosmetics on glass over your
   background, then square icons with their rarity's edge (a missing one a dark shape, a missing cosmetic faded). Classes cb- */
.cb .py-top{padding-bottom:4px}
.cb-sum{display:flex;align-items:center;gap:14px;padding:14px;border-radius:22px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cb-ring{position:relative;flex:none;width:92px;height:92px}
.cb-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cb-ring circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3.6}
.cb-ring circle.on{stroke:color-mix(in srgb,var(--accent) 75%,#fff);stroke-linecap:round}
.cb-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.cb-ring small{font-size:10.5px;font-weight:700;color:var(--dr-dim)}
.cb-ring b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.cb-sts{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cb-st{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-size:12.5px;font-weight:700;color:var(--dr-dim)}
.cb-st b{color:var(--dr-ink);font-variant-numeric:tabular-nums}
.cb-bar{grid-column:1/3;display:block;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.cb-bar i{display:block;height:100%;border-radius:9px;background:color-mix(in srgb,var(--accent) 75%,#fff)}
.cb-st.dm .cb-bar i{background:#B58CFF}
.cb-st.gm-tl-rad .cb-bar i{background:#F5C451}
.cb-seg{display:flex;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--dr-edge);background:var(--dr-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cb-seg button small{display:block;font-size:11px;font-weight:700;opacity:.8}
.cb-seg button{flex:1;min-width:0;height:44px;line-height:1.2;border:0;border-radius:10px;background:none;color:var(--dr-dim);font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer}
.cb-seg button.on{background:color-mix(in srgb,var(--accent) 24%,transparent);color:color-mix(in srgb,var(--accent) 65%,#fff)}
.cb-part{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.cb-part[hidden]{display:none}
#gm-book-cos{display:flex;flex-direction:column;gap:12px}
.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.cb-t{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center}
button.cb-t{cursor:pointer}
.cb-pic{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:22px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 45%,var(--tb-glow) 0%,var(--tb-glow2) 55%,transparent 100%),radial-gradient(90% 90% at 50% 40%,var(--tb-a) 0%,var(--tb-b) 100%);box-shadow:inset 0 0 0 1.5px var(--rc,color-mix(in srgb,var(--fg) 8%,transparent))}
.cb-pic.off{background:radial-gradient(90% 90% at 50% 45%,color-mix(in srgb,var(--fg) 7%,var(--bg)) 0%,var(--bg) 100%)}
.cb-k{position:absolute;inset:6%;z-index:1;display:block}
/* (Hunter, Oct 17: "keep the background behind the card") your background in each card, dimmed for one you don't have */
.cb-pic .hm-cbg{border-radius:inherit}
.cb-pic::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--rc,color-mix(in srgb,var(--fg) 8%,transparent));pointer-events:none}
.cb-pic.off .hm-cbg{filter:grayscale(.6) brightness(.5)}
.cb-q{z-index:1}
.cb-k .ss{position:absolute;inset:0;width:100%;height:100%}
.cb-pic.off .cb-k .ss{filter:brightness(0) opacity(.42)}
.cb-pic.cb-coff .cb-k .ss{filter:grayscale(1) brightness(.6) opacity(.55)}
.cb-q{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:800;color:color-mix(in srgb,var(--fg) 30%,transparent)}
.cb-ics{position:absolute;top:6px;right:6px;z-index:2;display:flex;gap:2px}
.cb-ics .gm-dmb{width:16px;height:16px}
.cb-rr{display:inline-flex;border-radius:50%;box-shadow:0 0 0 1.5px #FFE39A,0 0 6px 1px rgba(255,214,110,.8)}   /* (A30) the Radiant ring on an Eclipse or Astral badge */
.cb-lv{position:absolute;left:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:999px;background:rgba(10,6,4,.6);color:#FBF7F4;font-size:10px;font-weight:800}
.cb-t>b{display:flex;align-items:center;justify-content:safe center;gap:3px;max-width:100%;margin-top:6px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-t>b .role-ic{flex:none}
.cb-t.off>b{color:var(--faint);font-weight:700}
.cb-t>small{display:block;margin-top:2px;font-size:11px;font-weight:700;color:var(--faint)}
.cb-dots.gm-dots{flex:none;justify-content:center;gap:2px;margin-top:4px}
.cb-dots .gm-dt{width:7px;height:7px}
.cb-t.nu-on .cb-pic{box-shadow:inset 0 0 0 1.5px var(--gold-line),0 0 0 1px var(--gold-line)}
.cb-how{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px;line-height:1.5;color:var(--muted)}
.cb-how b{color:var(--fg)}
@media (min-width:760px){.cb-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- Friends (Hunter, Oct 17; look B of docs/friends-looks.html): your home's background behind the whole page,
   still and a little darker, and everything on glass over it. The page's own colors are set light here (any theme), so
   its cards, rows and buttons turn into glass by themselves. Classes fp- ---------- */
.np.fp,.sheet-wrap.fp{--fg:#FBF7F4;--muted:rgba(251,247,244,.8);--faint:rgba(251,247,244,.64);--tile:rgba(16,11,9,.62);--tile-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.13);--line:rgba(255,255,255,.09);--acc-tint:color-mix(in srgb,var(--accent) 24%,rgba(16,11,9,.62));--acc-line:color-mix(in srgb,var(--accent) 55%,transparent);
  --gold-panel:rgba(60,44,12,.62);--gold-text:#F7D88E;--bg:#0b0807;color:var(--fg);background:var(--bg);
  /* (the in-between colors again, so they mix from this page's glass, not from the theme's page: Daylight's were white) */
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);--ctl-soft:color-mix(in srgb,var(--fg) 9%,var(--tile));--ctl:color-mix(in srgb,var(--fg) 13%,var(--tile));
  --ctl-2:color-mix(in srgb,var(--fg) 20%,var(--tile));--ctl-3:color-mix(in srgb,var(--fg) 28%,var(--tile));--gold-sub:color-mix(in srgb,var(--gold) 55%,var(--faint));
  --acc-panel:color-mix(in srgb,var(--accent) 16%,var(--tile));--acc-deep:color-mix(in srgb,var(--accent) 14%,var(--bg));
  --violet:color-mix(in srgb,#A57BFF 80%,var(--fg));--violet-panel:color-mix(in srgb,#A57BFF 12%,var(--tile));--violet-line:color-mix(in srgb,#A57BFF 32%,var(--tile));
  --green-line:color-mix(in srgb,#5FD597 26%,var(--tile))}
:root[data-theme="daylight"] .np.fp,:root[data-theme="daylight"] .sheet-wrap.fp{--accent:#7CC0E8;--accent-ink:#06243A;--green:#73D9A2;--gold:#F5C451;--red:#FF8A8A;--gold-soft:rgba(245,196,81,.14);--gold-line:rgba(245,196,81,.4);--gold-ink:#2A1C00;
  --hot:#5AA6FF;--hot-lite:#B9DAFF;--tb-a:#112A52;--tb-b:#081022;--tb-glow:rgba(100,170,255,.28);--tb-glow2:rgba(70,130,255,.09);--spark:#DCEBFF;--spark-core:#9CC9FF}
.fp-scene,.fp-shade{position:fixed;inset:0;z-index:0;pointer-events:none}
.fp-scene{overflow:hidden;isolation:isolate}
.fp-shade{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.26) 35%,rgba(0,0,0,.58) 100%)}
/* (A72 item 14) a friend's profile on their background: the sheet see-through over it, its tiles and buttons glass, and
   their Kindlings standing straight on the page's scene (no box of their own) */
.sheet-wrap.fp>.sheet{position:relative;z-index:1;background:transparent}
.sheet-wrap.fp>.sheet>.sheet-head:first-child{background:transparent;transition:background-color .2s}
.sheet-wrap.fp.fp-scr>.sheet>.sheet-head:first-child{background:rgba(10,7,6,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sheet-wrap.fp .fr-pf-tile,.sheet-wrap.fp .fr-acts .btn,.sheet-wrap.fp .sheet-head .icon-btn,.sheet-wrap.fp .bdg-pf{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sheet-wrap.fp .fr-pf-tile{background:var(--tile);border:1px solid var(--border)}
.sheet-wrap.fp .fr-acts .btn.ghost{background:var(--tile)}
.sheet-wrap.fp .fr-who h2,.sheet-wrap.fp .fr-who .note{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gm-home.fr-pf-hm{background:transparent;border:0;border-radius:0;overflow:visible}
.np.fp>.np-bar,.np.fp>.np-body{position:relative;z-index:1}
.np.fp>.np-bar{position:sticky;z-index:2;background:transparent;transition:background-color .2s}
.np.fp.fp-scr>.np-bar,.np.fp.py-scr>.np-bar{background:rgba(10,7,6,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.np.fp .gm-pgh{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.np.fp .fr-me,.np.fp .fr-seg,.np.fp .lb-row,.np.fp .fr-btable,.np.fp .fr-reqbar,.np.fp .fr-find,.np.fp .fr-list:not(:empty){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.np.fp .fr-list:not(:empty){padding:2px 12px;border-radius:20px;background:var(--tile);border:1px solid var(--border)}
.np.fp .fr-find{background:var(--tile);border-color:var(--border);color:var(--fg)}
.np.fp .btn.fr-acc{background:color-mix(in srgb,var(--accent) 26%,rgba(16,11,9,.5));color:color-mix(in srgb,var(--accent) 70%,#fff);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
/* Play and the Collection on the same background (Hunter, Oct 17: "So they all match?"): chips and search on glass, and
   the names under the icons kept readable over the scene */
.np.fp .py-find{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.np.fp .py-sl,.np.fp .py-t>b,.np.fp .cb-t>b,.np.fp .cb-t>small{text-shadow:0 1px 6px rgba(0,0,0,.75)}
/* ---------- Badges and titles (A25; look C of docs/badge-looks.html, flame emblems): the Collection's Badges tab, a
   badge's page #gm-bdg, and a title by a name. --tc is the tier's color (set inline); an emblem not earned is grey. */
.bdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:14px 8px;margin-bottom:6px}
.bdg-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:4px 2px 6px;border:0;border-radius:16px;background:none;color:var(--fg);font:inherit;text-align:center;cursor:pointer}
.bdg-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bdg-t>b{font-size:12.5px;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdg-t>small{height:15px;font-size:11px;font-weight:800;color:color-mix(in srgb,var(--tc,var(--muted)) 75%,var(--fg))}
.bdg-t.off>small{color:var(--muted)}
.bdg-bar{display:block;width:72%;height:4px;border-radius:2px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}
.bdg-bar.nil{background:none}
.bdg-bar i{display:block;height:100%;border-radius:inherit;background:var(--tc,var(--accent))}
.bdg-t.off .bdg-bar i{background:color-mix(in srgb,var(--fg) 55%,transparent)}
/* (A69 item 1) a badge with gems to collect: a gold dot on its card, on the Collection's Badges tab, and Collect on its page (A72 item 22d: the Kindlings and Cosmetics tabs get the same dot for something new) */
.bdg-dot{position:absolute;top:6px;right:calc(50% - 40px);z-index:3;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 10px rgba(245,196,81,.75);pointer-events:none}
.cb-seg button.nu-on{position:relative}
.cb-seg button.nu-on::after{content:'';position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(245,196,81,.7);pointer-events:none}
/* Mark all as seen (A71 item 2): at the right of the page's top bar, across from the back arrow, so it comes and goes without moving anything */
.cb-seen{flex:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 16%,rgba(0,0,0,.35));color:var(--gold);font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer}
.bdg-col{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:18px;font-weight:800;font-size:16px;color:color-mix(in srgb,var(--gold) 80%,var(--fg));background:color-mix(in srgb,var(--gold) 18%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 65%,transparent)}
.bdg-col svg{width:18px;height:18px}
.bdg-col.done{opacity:1;cursor:default;color:color-mix(in srgb,var(--gold) 60%,var(--fg));background:color-mix(in srgb,var(--gold) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent)}
.bdg-art{--tc:#8a7a70;position:relative;flex:none;width:88px;height:88px;display:grid;place-items:center}
.bdg-art>span{position:absolute;pointer-events:none}
.bdg-glow{inset:4px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%)}
.bdg-ring{inset:6px;border-radius:50%;border:3px solid var(--tc);box-shadow:0 0 16px color-mix(in srgb,var(--tc) 55%,transparent),inset 0 0 12px color-mix(in srgb,var(--tc) 35%,transparent)}
.bdg-fl{left:20px;top:16px;width:48px;height:60px;background:color-mix(in srgb,var(--tc) 22%,#120a06);clip-path:path('M24 0 C34 14 48 22 48 38 C48 52 37 60 24 60 C11 60 0 52 0 38 C0 26 10 22 14 10 C18 16 20 20 24 22 C22 14 22 6 24 0Z')}
.bdg-ic{position:relative;z-index:2;width:36px;height:36px;margin-top:8px;color:var(--tc);filter:drop-shadow(0 0 6px var(--tc))}
.bdg-art:not(.on){filter:grayscale(1) brightness(.6)}
.bdg-art.big{transform:scale(1.5);margin:28px 0 24px}
.bdg-pg{max-width:520px;margin:0 auto;padding-bottom:24px}
.bdg-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-top:4px}
.bdg-top h1{margin:4px 0 0}
.bdg-tl{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--tc,var(--muted)) 75%,var(--fg))}
.bdg-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}
.bdg-nums>div{padding:12px;border-radius:16px;background:var(--tile);border:1px solid var(--border)}
.bdg-nums b{display:block;font-size:22px}
.bdg-nums small{color:var(--muted);font-size:12px}
.bdg-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:10px 0 16px}
.bdg-steps>span{padding:8px 2px;border-radius:12px;text-align:center;font-size:11px;background:var(--tile);border:1px solid transparent;color:var(--muted);min-width:0}
.bdg-steps>span.got{color:color-mix(in srgb,var(--tc) 75%,var(--fg));border-color:color-mix(in srgb,var(--tc) 50%,transparent);background:color-mix(in srgb,var(--tc) 12%,var(--tile))}
.bdg-steps b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.bdg-steps em,.bdg-steps i{display:block;font-style:normal;font-size:10.5px;margin-top:2px;color:var(--muted);overflow-wrap:anywhere}
.bdg-n{text-align:center;margin:10px 2px 0}
.bdg-go{display:block;width:100%;height:48px;margin-top:16px;font-weight:800}
.bdg-go.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.bdg-pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;margin:0 0 12px}
.bdg-pfi{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.bdg-pfi>b{font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdg-pfi>small{font-size:11px;font-weight:800;color:color-mix(in srgb,var(--tc) 75%,var(--fg))}
.bdg-pfi .bdg-art{transform:scale(.8);margin:-8px 0}
.bdg-go+.bdg-go{margin-top:8px}
.bdg-tt{display:inline-block;margin-left:4px;padding:0 7px;border-radius:9px;font-size:11px;font-weight:800;line-height:18px;vertical-align:1px;max-width:9.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;--tc:var(--accent);color:color-mix(in srgb,var(--tc) 72%,var(--fg));background:color-mix(in srgb,var(--tc) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 40%,transparent)}
.bdg-tt-cr{color:#2A0E02;background:linear-gradient(90deg,#FFD37A,#FF9F6E,#FF7AB8);box-shadow:none}
/* ---- Home | Battle (A70, Hunter Oct 28: Trials "is a main mode"; look H of docs/battlehub-looks.html): the title is the
   switch, the open one big. Battle is the tab's second screen: the world (arenas.js) behind your Trials team standing on
   the near platform, and under them the world, Team, Trials, Clash and the board. Classes bt- */
/* (v0.6.12, Hunter: "the title can shrink when needed to on smaller screens") Home and Battle size themselves to the room
   left by the wallet, up to 24px, both the same (the gap with them); when even 16px wouldn't fit, the wallet goes to its
   own line under them (the head wraps) */
.hm-top .gm-head h1.bt-tt{display:flex;align-items:baseline;gap:0;flex:1 1 0;min-width:106px;container-type:inline-size}
.bt-tt #bt-bat{margin-left:.58em}
.bt-tt button{position:relative;padding:0;line-height:inherit;border:0;background:none;font:inherit;font-size:min(24px,calc(100cqi / 6.4));white-space:nowrap;font-weight:800;letter-spacing:-.02em;color:rgba(244,245,247,.5);cursor:pointer;text-shadow:inherit;transition:color .2s}
.bt-tt button.on{color:#F4F5F7}
.bt-tt button.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:2px;background:var(--accent)}
.bt-tt button svg{display:none}
.bt-dot{position:absolute;top:0;right:-10px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.bt-view{position:absolute;inset:0;z-index:4;will-change:transform;display:flex;flex-direction:column;padding:var(--bt-top,124px) 10px calc(var(--dock-h) + 10px);isolation:isolate;overflow:hidden;background:#07060C;color:#F4F5F7;--fg:#F4F5F7;--muted:#C9BDB6;--faint:#9C918B}
.bt-view.bt-off{visibility:hidden}
.bt-view::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--bt-top,124px) + 40px);background:linear-gradient(rgba(5,3,2,.78),rgba(5,3,2,.35) 70%,transparent);pointer-events:none}
#v-spirits>.hm-top{z-index:5}   /* (v0.5.90, Hunter: "the background does still cover things during the swipe": the top stays over both while they slide) */
#v-spirits.bt-on>.hm-top .hm-row .grow{flex:1}
.bt-fgc{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 -10px}
.bt-fgc .fgc-arf.bt-arf{flex:1;height:auto;min-height:150px;margin:0}
.fgc-sl .fgc-arf .bt-side .fgc-au{z-index:2}.fgc-sl .fgc-arf .bt-side .fgc-au[data-bt-k="1"]{z-index:3}
.bt-side .fgc-au{cursor:pointer}
.bt-low{position:relative;z-index:5;display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px;align-self:center}
.bt-chips{display:flex;gap:6px;flex-wrap:wrap}
.bt-chip{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:999px;background:rgba(14,9,7,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#F4F5F7;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bt-chip svg{color:var(--accent)}
.bt-tri{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px 12px 14px;border:0;border-radius:20px;text-align:left;font:inherit;color:#F4F5F7;cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,#140A07),#140A07 80%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent),0 8px 24px rgba(0,0,0,.45)}
.bt-tri-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bt-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 70%,#fff)}
.bt-tri b{font-size:22px;line-height:1.15}
.bt-tri small{font-size:12px;color:#C9BDB6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-go{flex:none;padding:11px 16px;border-radius:14px;background:color-mix(in srgb,var(--accent) 85%,#fff);color:#1A0C04;font-size:14px;font-weight:800}
.bt-more{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bt-mc{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 12px;border:0;border-radius:16px;text-align:left;font:inherit;color:#F4F5F7;cursor:pointer;background:rgba(14,9,7,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bt-mc>svg{flex:none;width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:50%;color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.bt-mc span{min-width:0;display:flex;flex-direction:column}.bt-mc b{font-size:13px}.bt-mc small{font-size:11px;color:#C9BDB6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the worlds */
.bt-wp-sub{margin:4px 0 0;font-size:13px;color:var(--dr-ink);opacity:.8;text-align:center}
.bt-wl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:520px;margin:14px auto 0}
.bt-wc{position:relative;aspect-ratio:4/3;padding:0;border:0;border-radius:18px;overflow:hidden;background:#07060C;color:#F4F5F7;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bt-wc canvas{position:absolute;inset:0;width:100%;height:100%}
.bt-wc span{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;display:flex;flex-direction:column;background:linear-gradient(transparent,rgba(0,0,0,.75));text-shadow:0 1px 3px #000}
.bt-wc b{font-size:13.5px}.bt-wc small{font-size:11px;color:#E0D6D0}
.bt-wc.on{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.bt-wc.on::after{content:"✓";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#1A0C04;font-weight:900;font-size:13px}
.bt-wc.off canvas{filter:grayscale(.7) brightness(.45)}
.bt-wc.off::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---- the Trials team page (A70 step 2; Hunter picked T2 of docs/battlehub-looks.html): both teams standing in the
   floor's world, the marks over their heads, one glass panel under them; a Kindling's own page. Classes tv-, kp- ---- */
#gm-trials.tv-on:not(.fgc-ar-tight){overflow-y:hidden}
#gm-trials.tv-on .gm-pgh,#gm-trials.tv-on .gm-pgsub,#gm-trials.tv-on .gm-tv-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
#gm-trials.tv-on .np-body{gap:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#gm-trials.tv-on .gm-tv-board{order:-1;gap:0}
#gm-trials.tv-on .gm-tv-pick{position:relative;z-index:5;margin:0 0 2px}
#gm-trials.tv-on .gm-tv-pick select,#gm-trials.tv-on .gm-tv-arw{background:rgba(14,9,7,.72);border-color:rgba(255,255,255,.18);color:#F4F5F7}
#gm-trials.tv-on .gm-tv-pick select{font-size:17px;font-weight:800}
.tv-fl1{font-size:22px;color:#F4F5F7;text-shadow:0 1px 3px #000,0 0 8px #000}
.tv-fgc{margin:0 -16px}
.tv-fgc .fgc-arf{margin:0}
.fgc-sl .fgc-arf .tv-mine .fgc-au{z-index:2}.fgc-sl .fgc-arf .tv-mine .fgc-au[data-fgc="slot:1"]{z-index:3}
.fgc-sl .fgc-arf .fgc-shadow.fgc-au{cursor:pointer}
.tv-mk{display:flex;gap:3px;justify-content:center;margin-bottom:2px;text-shadow:none}
.tv-mk>span{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px 0 5px;border-radius:999px;font-size:11px;font-weight:900;background:rgba(10,8,14,.88)}
.tv-mk i{display:flex;font-style:normal}
.tv-s{color:#7BE6A8}.tv-w{color:#FF8A8A}
.tv-mk .tv-s{box-shadow:inset 0 0 0 1.5px rgba(123,230,168,.75)}.tv-mk .tv-w{box-shadow:inset 0 0 0 1.5px rgba(255,138,138,.75)}
.tv-mk .tv-n{color:#D8CCC6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fgc-arf .fgc-nm .role-ic{width:15px;height:15px;vertical-align:-2px}
.kp-s small .role-ic{width:16px;height:16px}
.tv-pen{position:absolute;right:12px;bottom:22px;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(14,9,7,.88);box-shadow:inset 0 0 0 1.5px var(--accent);color:#F4F5F7;scale:var(--hs,1)}
.tv-l1{position:relative;height:50px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:4px;padding-right:28px;font-size:13px;line-height:1.3;color:#D8CCC6}.tv-l1 b{color:#F4F5F7}
.tv-t1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-sub{display:block;font-size:12px;color:#BFB3AD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-ii{position:absolute;top:2px;right:0;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#F4F5F7;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.tv-ii[aria-pressed="true"]{background:var(--accent);color:#1A0C04}
.tv-chart{margin-left:auto;color:var(--accent);cursor:pointer;text-decoration:none}
.tv-rw{font-size:12.5px;font-weight:700;color:var(--gold-text)}
/* (v0.6.00, Hunter picked look 2 of the Trials team page mockups) the sheet along the bottom, edge to edge and down to the
   bottom like a battle's moves: a line saying what's picked, your three as cards (ⓘ swaps them for the floor's notes),
   the line under them, then Start; gold ▲ / grey ▼ over the shadows the picked one hits harder / that hit it harder.
   Each part keeps one size, so picking moves nothing. Classes tv- */
#gm-trials.tv-on .np-body{padding-bottom:0}
#gm-trials.tv-on #gm-tv-best,#gm-trials.tv-on #gm-tv-rw{display:none}
#gm-trials.tv-on .gm-tv-pick select,#gm-trials.tv-on .gm-tv-arw{background:none;border-color:transparent;text-shadow:0 1px 3px #000,0 0 8px #000}
#gm-trials.tv-on .gm-tv-arw:disabled{opacity:.25}
.tv-dock{position:relative;z-index:5;display:flex;flex-direction:column;gap:8px;margin:0 calc(-1 * var(--fgc-bleed,16px));padding:12px 14px 4px;border-radius:24px 24px 0 0;background:#100A08;box-shadow:0 -10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,190,140,.16);color:#F4F5F7}
#gm-trials.tv-on #gm-tv-btns{position:relative;z-index:5;margin:0 calc(-1 * var(--fgc-bleed,16px));padding:6px 14px calc(12px + env(safe-area-inset-bottom,0px));background:#100A08}
.tv-dh{position:relative;display:flex;align-items:center;justify-content:center;height:22px;margin:0;padding:0 64px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9C8E88;text-align:center}
.tv-dht{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tv-dh b{color:#7DB8FF}
.tv-dh .tv-chart{position:absolute;right:30px;top:50%;transform:translateY(-50%);margin:0;font-size:12px;letter-spacing:0;text-transform:none}
.tv-dh .tv-ii{top:0;right:0}
/* (v0.6.42) on narrow phones the line keeps its words whole ("Level 35 shadows · Healing team" at 360px): less room kept on the empty left, tighter letters */
@media (max-width:400px){.tv-dh{padding-left:30px;letter-spacing:.05em}}
.tv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;height:86px}
.fgc-sl .fgc-arf .tv-lpen{pointer-events:auto;cursor:pointer}   /* the pencil on your three on the Trials and Tower team page */
.tv-k{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:6px 4px;border:0;border-radius:18px;background:var(--tile-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 60%,transparent);color:#F4F5F7;font:inherit;cursor:pointer;transition:transform .15s}
.tv-k.on{transform:translateY(-4px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));box-shadow:inset 0 0 0 2px var(--accent),0 8px 20px color-mix(in srgb,var(--accent) 25%,transparent)}
.tv-kn{display:flex;align-items:center;gap:4px;max-width:100%;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden}
.tv-kn .role-ic{width:16px;height:16px}
.tv-kl{font-size:11px;color:#BFB3AD}
@media (max-width:380px){.tv-kn{font-size:12px;gap:3px}.tv-kn .role-ic{width:14px;height:14px}}
.tv-kc{display:flex;gap:8px;height:16px;font-size:13px}.tv-ev{font-size:11.5px;font-weight:700;color:#B9AEA9}
#gm-trials .tv-up{color:#FFC94D;font-weight:900}#gm-trials .tv-dn{color:#B9AEA9;font-weight:900}
.tv-info{grid-column:1/-1;height:86px;overflow-y:auto;display:flex;flex-direction:column;justify-content:safe center;gap:4px;padding:0 4px;font-size:12.5px;line-height:1.35;color:#D8CCC6}
.tv-info p{margin:0}.tv-info b{color:#F4F5F7}
#gm-trials .tv-l1{height:38px;padding:0;align-items:center;text-align:center;gap:2px}
.tv-vs{display:flex;gap:3px;justify-content:center;font-size:17px;line-height:1;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8)}
.tv-vs:empty{display:none}
.fgc-sl .fgc-arf .tv-lv{position:absolute;top:calc(78% + 6px);left:50%;transform:translateX(-50%);scale:calc(var(--hs,1) * var(--fgc-lb,1));transform-origin:50% 0;font-size:12px;font-weight:800;color:#FBF4F0;white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px #000,0 0 6px #000}
/* a Kindling's page */
.kp-title{margin:0;font-size:15px;font-weight:800}.kp-sp{width:64px}
/* who goes in the slot, by role */
#kp-pick{color:var(--fg);background:radial-gradient(85% 50% at 50% 18%,var(--tb-a) 0%,var(--tb-b) 50%,var(--bg) 100%) var(--bg)}
.kpp-body{display:flex;flex-direction:column;gap:16px}
.kpp-sec{display:flex;flex-direction:column;gap:8px}
.kpp-sec h2.kp-lbl{margin:0;display:flex;align-items:center;justify-content:flex-start;gap:6px}
.kpp-on{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#1A0C04;font-size:10.5px;font-weight:900;font-style:normal}

/* ---- runes (A70 step 4): a Kindling's two slots on its page, and the rune page (classes kp-rn*, rn-) ---- */
.kp-rnno{grid-column:1/-1;align-self:center;margin:0;font-size:12px;color:var(--faint)}
/* ---- (A72 item 23, Hunter's pick, Nov 3) a Kindling's page like the Kindlings home: your background behind it all, the team
   standing along the top, the one picked big on the stage with Change and its four numbers, then one glass sheet with
   the Collection's tabs: Moves (every move with what it does) | Element (big orbs) | Runes (sockets shaped like the gem).
   One screen, nothing to scroll but the moves inside the sheet. Classes kz-; "Who goes here?" (#kp-pick) the same page ---- */
.np.kz{--fg:#FBF7F4;--muted:rgba(251,247,244,.8);--faint:rgba(251,247,244,.62);color:var(--fg);background:#0B0706;overflow:hidden}
.kz-sc{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#kp-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,4,3,.28),rgba(6,4,3,.06) 30%,rgba(6,4,3,.16) 50%,rgba(6,4,3,.62))}
#kpp-scene::after{content:"";position:absolute;inset:0;background:rgba(6,4,3,.5)}
.np.kz .np-bar{position:relative;z-index:3;background:transparent}
.kz-done{flex:none;height:34px;padding:0 15px;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;background:color-mix(in srgb,var(--accent) 24%,rgba(12,10,16,.6));color:color-mix(in srgb,var(--accent) 65%,#fff);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#tv-kp .kz-body{position:relative;z-index:2;flex:1;min-height:0;max-width:560px;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
/* the team, standing small along the top (the one showing on a ring of light) */
.kz-team{flex:none;display:flex;justify-content:center;gap:2px}
.kz-team .kp-s{position:relative;flex:0 1 82px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;opacity:.62}
.kz-team .kp-s[aria-pressed="true"]{opacity:1}
.kz-team .kp-sp2{position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center}.kz-team .kp-sp2 .ss{width:56px!important;height:auto}
.kz-team .kp-s[aria-pressed="true"]::before{content:"";position:absolute;top:42px;left:50%;width:58px;height:16px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 75%,transparent)}
.kz-team .kp-s b{max-width:100%;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.kz-team .kp-s small{display:flex;align-items:center;gap:3px;height:16px}.kz-team .kp-s small .fgc-dot{width:13px;height:13px}.kz-team .kp-s small .role-ic{width:14px;height:14px}
/* the stage */
.kz-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px}
.kz-big{position:relative;z-index:1;flex:0 1 auto;width:min(190px,100%);height:min(190px,calc(100% - 78px));min-height:90px;display:grid;place-items:center;margin-bottom:-6px}
/* (Hunter, Nov 4: "fix the small phone overlap") the drawing is sized by the box's height too, so it never stands
   over its name (it stood 219px tall in a 107px box on a short phone, and in a raid's shorter box at any size); 115% of
   the height is how it sits in a full box, so a full box looks as before */
.kz-big{container-type:size}
.kz-big .ss{width:min(100cqw,115cqh)!important;height:auto!important}
.kz-stage::before{content:"";position:absolute;left:50%;bottom:66px;width:210px;height:44px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 40%,transparent),color-mix(in srgb,var(--accent) 10%,transparent) 65%,transparent)}
.kz-nm{position:relative;z-index:1;display:flex;align-items:center;gap:6px;font-size:19px;line-height:1.15;text-shadow:0 1px 4px #000}
.kz-nm .fgc-dot{width:22px;height:22px}.kz-nm .role-ic{width:20px;height:20px}
.kz-lv{position:relative;z-index:1;font-size:13px;font-weight:800;color:var(--muted);text-shadow:0 1px 3px #000}
.kz-nums{position:relative;z-index:1;display:flex;gap:6px;margin-top:6px}
.kz-nums span{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(12,10,16,.62);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kz-chg{position:absolute;right:6px;bottom:82px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-size:11.5px;font-weight:800;text-shadow:0 1px 3px #000;cursor:pointer}
.kz-chg i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:rgba(12,10,16,.7);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:color-mix(in srgb,var(--accent) 70%,#fff)}
/* the sheet: one height whatever it shows */
.kz-sheet{flex:none;height:322px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:22px;background:rgba(12,10,16,.76);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kz-tabs{flex:none;--dr-glass:rgba(255,255,255,.05);--dr-edge:rgba(255,255,255,.1);--dr-dim:rgba(251,247,244,.75)}
.kz-pan{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}.kz-pan[hidden]{display:none}
.kz-cap{flex:none;margin:0;text-align:center;font-size:11.5px;line-height:1.3;color:var(--muted)}
#kp-note{height:2.6em;display:grid;place-items:center}   /* (its words change as moves are picked: one height for one or two lines, so the list never moves) */
.kz-cap .tv-s,.kz-cap .tv-w{font-weight:900}
/* moves: a list, each with what it does */
/* (Hunter, Nov 4: "the move selection should show an arrow or something so people know they can scroll") the list sits
   in .kz-mvw with "N more ⌄" over its bottom edge while moves are hidden below (kpMvMore in app.js) */
.kz-mvw{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.kz-more{position:absolute;left:50%;bottom:6px;z-index:2;translate:-50% 0;display:flex;align-items:center;gap:4px;padding:5px 12px;border:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 88%,#000);color:#1A0E08;font:inherit;font-size:12px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.55);cursor:pointer}
.kz-more[hidden]{display:none}.kz-more:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kz-mvl{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;gap:6px}.kz-mvl::-webkit-scrollbar{display:none}
.kz-mv{flex:none;position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 10px;border:0;border-radius:14px;background:rgba(255,255,255,.05);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.kz-mv .kz-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}.kz-mv .kz-ic svg{width:20px;height:20px}
.kz-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kz-t b{display:flex;align-items:center;gap:8px;font-size:14px}.kz-t small{font-size:12px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kz-mv.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 75%,transparent)}
.kz-mv.on .kz-ic{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.kz-ck{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.kz-mv.on .kz-ck{background:var(--accent);box-shadow:none;color:#2A1408}
.kz-mv.lock{opacity:.5;cursor:default}.kz-mv.lock .kz-ck{visibility:hidden}.kz-mv:disabled{cursor:default}
.kz-free{margin-left:auto;font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--accent)}
.kz-pips{margin-left:auto;display:flex;gap:3px}.kz-pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18)}.kz-pips i.on{background:var(--gold,#F5C451)}
/* element: big orbs */
.kz-els{flex:1;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:14px 18px}
.kz-el{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.kz-orb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 0 18px var(--g),inset 0 -6px 12px rgba(0,0,0,.25)}
.kz-el[aria-pressed="true"] .kz-orb{outline:3px solid var(--fg);outline-offset:3px}
.kz-m{position:absolute;top:-4px;right:-10px;display:flex;flex-direction:column;gap:2px}
.kz-m span{padding:1px 6px;border-radius:99px;font-size:11px;font-weight:900;background:#1D1510;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.kz-els.kz-many{gap:10px 12px}.kz-els.kz-many .kz-orb{width:46px;height:46px}.kz-els.kz-many .kz-orb svg{width:22px;height:22px}.kz-els.kz-many .kz-el{font-size:11.5px;gap:4px;width:58px}
/* runes: two sockets shaped like the gem (a hexagon) */
.kz-rns{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;gap:22px}
.kz-rn{display:flex;flex-direction:column;align-items:center;gap:6px;width:130px;padding:0;border:0;background:none;color:var(--fg);font:inherit;text-align:center;cursor:pointer}
.kz-sk{position:relative;width:92px;height:92px;display:grid;place-items:center}
.kz-hx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kz-hx path{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.32);stroke-width:.9;stroke-dasharray:2 1.6;stroke-linejoin:round}
.kz-rn.on .kz-hx path{fill:color-mix(in srgb,var(--rc) 14%,transparent);stroke:var(--rc);stroke-dasharray:none;filter:drop-shadow(0 0 4px var(--rc))}
.kz-sk .rn-gem{position:relative}
.kz-plus{position:relative;font-size:30px;font-weight:300;color:rgba(255,255,255,.75)}
.kz-rn b{font-size:13px}.kz-rn small{font-size:11.5px;line-height:1.3;color:var(--muted)}
#tv-kp .kp-rnno{margin:auto 0;text-align:center}
/* "Who goes here?": the Collection's cards on your background */
#kp-pick .np-body{position:relative;z-index:2}
.kpp-body{display:flex;flex-direction:column;gap:16px}
.kpp-sec{display:flex;flex-direction:column;gap:8px}
.kp-lbl{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none}
.kpp-sec h2.kp-lbl{margin:0;display:flex;align-items:center;justify-content:flex-start;gap:6px;color:rgba(251,247,244,.82)}
.kz-face{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;border-radius:16px;font-size:13px;color:var(--muted);background:rgba(12,10,16,.66);border:1px solid rgba(255,255,255,.12)}
.kz-face .fgc-dot{width:20px;height:20px}.kz-face .tv-s{font-weight:900}
.kpp-c b{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%;margin-top:6px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpp-c b .role-ic{flex:none;width:16px;height:16px}
.kpp-c[aria-pressed="true"] .cb-pic{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 16px color-mix(in srgb,var(--accent) 50%,transparent)}
.kz-up{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;background:rgba(10,6,4,.7);color:var(--gold,#F5C451);box-shadow:inset 0 0 0 1px rgba(245,196,81,.55)}
.kpp-c .kpp-on{top:6px;right:6px;z-index:2;width:22px;height:22px;font-size:11px}
.kz-rl{font-size:11px;color:var(--muted)}
/* (stage 2) a raid: four spots (empty ones a +), who plays each, its name and the shadows at the top, Start at the bottom */
.kz-4 .kp-s{flex-basis:76px}
.kz-team .kz-e{opacity:.85}
.kz-e0{width:44px;height:44px;margin-top:6px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:300;border:2px dashed rgba(255,255,255,.4);background:rgba(12,10,16,.45);color:rgba(255,255,255,.8)}
.kz-team .kz-e[aria-pressed="true"] .kz-e0{border-color:color-mix(in srgb,var(--accent) 80%,#fff);background:color-mix(in srgb,var(--accent) 22%,rgba(12,10,16,.45));color:#fff}
.kz-team .kz-e[aria-pressed="true"]::before{display:none}
.kz-who{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:rgba(251,247,244,.66);text-shadow:0 1px 3px #000;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tv-kp .kp-title{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:calc(100% - 150px);line-height:1.2;text-align:center;font-size:14px;white-space:nowrap}
#tv-kp .kp-title{overflow:hidden;text-overflow:ellipsis}
.kz-face2{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--muted)}.kz-face2 .fgc-dot{width:16px;height:16px}
#tv-kp.kz-raid .kz-done{visibility:hidden}
#tv-kp.kz-none .kz-nm,#tv-kp.kz-none .kz-lv,#tv-kp.kz-none .kz-nums,#tv-kp.kz-none .kz-chg,#tv-kp.kz-none .kz-big{display:none}
#tv-kp.kz-none .kz-stage::before{display:none}
.kz-add{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0}
.kz-add[hidden]{display:none}
.kz-ch0{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer}
.kz-ch0 i{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:42px;font-weight:300;border:2.5px dashed color-mix(in srgb,var(--accent) 60%,#fff);background:rgba(12,10,16,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#FFE2C8;box-shadow:0 0 30px color-mix(in srgb,var(--accent) 25%,transparent)}
.kz-ch0 b{font-size:18px;text-shadow:0 1px 4px #000}.kz-ch0 small{font-size:12.5px;color:var(--muted);text-shadow:0 1px 3px #000}
.kz-best{height:36px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(12,10,16,.6);color:var(--fg);font:inherit;font-size:13px;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kz-wait{flex:1;margin:0;display:grid;place-items:center;text-align:center;padding:0 16px;font-size:14px;line-height:1.4;color:var(--muted)}
.kz-wait[hidden]{display:none}
.kz-tabs button:disabled{opacity:.4;cursor:default}
.kz-go{flex:none;height:52px;border-radius:16px;font-size:16px;font-weight:900}
.kz-go.kz-gold{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;box-shadow:none}
.kz-go:disabled{opacity:1;background:rgba(255,255,255,.06);color:var(--faint);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#tv-kp.kz-raid .kz-sheet{height:280px}
#tv-kp.kz-raid .kz-big{height:min(140px,calc(100% - 84px));margin-bottom:0}
/* (Hunter, Nov 4: "fix the small phone overlap") on a short screen (700px or less, also a 780px phone under the app's
   bars) the big Kindling kept its 90px and rose over its team and name: the team row, the numbers, the sheet and the rune
   sockets give up a little room, and the Kindling may shrink to fit what's left */
@media (max-height:700px){
  .kz-team .kp-sp2{width:44px;height:44px}.kz-team .kp-sp2 .ss{width:44px!important}
  .kz-team .kp-s[aria-pressed="true"]::before{top:32px;width:48px;height:14px}
}
/* ---- The team ease pass (Hunter, Nov 4: "I get a headache bouncing between so many different screens"; look A of
   docs/mock/team-ease.html; "it needs to go fully side to side"): one sheet for the Kindling picked, edge to edge,
   rounded at the top: who it is (kz-hd), then Kindlings | Moves | Element | Runes. On the Kindling page (Battle, raids,
   Clash) it fills under the team row; on the Trials and Tower team page it's under the world (#tv-sheet) ---- */
.kz-sheet{gap:7px;border-radius:24px 24px 0 0;border-width:1px 0 0;padding:10px 12px 8px}
#tv-kp .kz-body{padding-bottom:0}
#tv-kp .kz-sheet{flex:1;min-height:0;height:auto;margin:0 -10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
#tv-kp.kz-raid .kz-sheet{height:auto;padding-bottom:8px}
#tv-kp .kz-go{margin:8px 0 calc(10px + env(safe-area-inset-bottom,0px))}
/* (Hunter, Nov 4: "the drawer … is too small … there should just be a pencil on the kindlings in there that you click and
   it opens the same team lineup screen as everywhere else") the Trials and Tower team page has no sheet of its own: a
   pencil on each of yours opens the Kindling page; under the world the line (the win, or the shadow tapped) and
   ✦ Best team and the chart */
/* (Hunter's pick B, Nov 5) nothing under the world but Start: the dock takes no room; a shadow's line or the tip floats
   over the world's bottom, ✦ Best team over its right corner */
#gm-trials.tv-on .tv-dock{position:relative;height:0;padding:0;gap:0;background:none;box-shadow:none;overflow:visible}
#gm-trials.tv-on .tv-l1{position:absolute;left:12px;right:12px;bottom:calc(100% + 54px);height:auto;max-height:110px;padding:8px 12px;border-radius:14px;background:rgba(14,9,7,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);gap:2px;visibility:hidden;pointer-events:none}
#gm-trials.tv-on .tv-l1.on{visibility:visible}
#gm-trials.tv-on .tv-acts{position:absolute;right:14px;bottom:calc(100% + 8px);height:auto}
.tv-acts .tv-best[hidden]{display:none}
.tv-go2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.15}
.tv-gos{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;opacity:.8}   /* (Nov 6: one line, so a replay's longer words don't make Start taller) */
.tv-ibar{font-style:italic;font-family:Georgia,serif;font-weight:900;margin-right:6px}.tv-ibar[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.tv-tip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3}
.tv-acts{display:flex;justify-content:center;gap:8px;height:34px}
.tv-best,.tv-chart3{height:34px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.tv-best{background:color-mix(in srgb,#F5C451 20%,rgba(12,10,16,.6));color:#FFE3A0;box-shadow:inset 0 0 0 1px rgba(245,196,81,.45)}
.tv-chart3{background:rgba(255,255,255,.07);color:#F4F5F7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.tv-ib{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;font:inherit;font-size:15px;font-weight:900;font-style:italic;font-family:Georgia,serif;background:rgba(255,255,255,.07);color:#F4F5F7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.tv-ib[hidden]{display:none}.tv-ib[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.kz-hd{flex:none;display:flex;align-items:center;gap:8px;height:30px;padding:0 2px}
.kz-hn{flex:1;min-width:0;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.kz-hn b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:16px;font-weight:900}
.kz-hn small{flex:none;font-size:12px;font-weight:800;color:var(--muted)}
.kz-hn .fgc-dot{flex:none;width:20px;height:20px}.kz-hn .role-ic{flex:none;width:18px;height:18px}
.kz-hr{flex:none;display:flex;align-items:center;gap:6px}
.kz-best2{height:30px;padding:0 12px;border:0;border-radius:999px;font:inherit;font-size:12.5px;font-weight:900;background:color-mix(in srgb,#F5C451 20%,rgba(12,10,16,.6));color:#FFE3A0;box-shadow:inset 0 0 0 1px rgba(245,196,81,.45);cursor:pointer}
.kz-ib{width:30px;height:30px;padding:0;border:0;border-radius:50%;font:inherit;font-size:14px;font-weight:900;font-style:italic;font-family:Georgia,serif;background:rgba(255,255,255,.07);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.kz-ib[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.kz-nums2{display:flex;gap:8px;font-size:12px;font-weight:800}.kz-nums2 span{display:inline-flex;align-items:center;gap:3px}
.kz-tabs button{height:42px;font-size:13.5px}.kz-tabs button small{font-size:10.5px}
.kz-cap1{flex:none}
.kz-kin{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px 7px;align-content:start;padding:2px 1px 40px}.kz-kin::-webkit-scrollbar{display:none}   /* (four on a phone, more as the room grows) */
.kz-kin .cb-t{width:auto;min-width:0;cursor:pointer}.kz-kin .cb-t:disabled{cursor:default;opacity:.55}
.kz-kin .cb-t b{display:block;max-width:100%;margin-top:3px;font-size:11.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-kin .cb-dots.gm-dots{gap:1px;transform:scale(.85);transform-origin:top center;margin-top:2px}
.kz-kin .cb-t.kz-cur .cb-pic{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
#kp-sheet .kz-rns{flex:none;gap:10px;justify-content:center}
#kp-sheet .kz-rn{flex:1 1 0;min-width:0;max-width:175px;flex-direction:row;align-items:center;gap:8px;text-align:left}
#kp-sheet .kz-sk{flex:none;width:60px;height:60px}#kp-sheet .kz-sk .rn-gem{width:38px;height:38px}
.kz-rt2{display:flex;flex-direction:column;gap:1px;min-width:0}.kz-rt2 b{font-size:12.5px}.kz-rt2 small{font-size:10.5px;line-height:1.25;color:var(--muted)}
.kz-rn.kz-to .kz-hx path{stroke-dasharray:2 1.6}.kz-gh{position:relative;opacity:.6}
.kz-rnl{flex:none;min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 2px 0;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* (Hunter, Nov 4: his runes weren't showing: one row scrolled sideways, four in view) every free rune, four to a row,
   scrolling down inside the sheet with "N more ⌄" over its bottom; Put keeps its room so nothing moves when it shows */
.kz-rt{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:2px 1px 40px}.kz-rt::-webkit-scrollbar{display:none}
.kz-rt .rn-t{min-width:0}
#kp-p-rn .kz-put{margin-top:6px}
#kp-p-rn:has(> .kz-put[hidden])::after{content:"";flex:none;height:42px;margin-top:6px}   /* (Put's room, kept while it's hidden) */
.kz-put{flex:none;height:42px;margin-top:auto;border:0;border-radius:12px;font:inherit;font-size:13.5px;font-weight:900;background:color-mix(in srgb,var(--accent) 26%,transparent);color:color-mix(in srgb,var(--accent) 70%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent);cursor:pointer}
.kz-put[hidden]{display:none}
.kz-put:disabled{opacity:.6;cursor:default}.kz-put.kz-brk{background:color-mix(in srgb,#FF8A8A 18%,transparent);color:#FFC2C2;box-shadow:inset 0 0 0 1.5px rgba(255,138,138,.6)}
#kp-p-info .tv-info{height:auto;flex:1;justify-content:flex-start;padding:4px 4px 0;font-size:13px}
.tv-chart2{align-self:flex-start;margin-top:6px;height:36px;padding:0 14px;font-size:13px}
@media (max-height:700px){.kz-tabs button{height:38px}.kz-hd{height:28px}}
/* (Hunter, Nov 4: "the kindlings at the top are very small and theres no clear indication that you can click on them")
   the team along the top of the Kindling page: a glass card each, bigger, with its level and a pencil; the one being
   changed lit in the accent (its pencil filled) */
.kz-team{gap:8px;padding:2px 0 4px}
.kz-team .kp-s{flex:1 1 0;max-width:124px;gap:2px;padding:8px 4px 7px;border-radius:18px;opacity:1;background:rgba(12,10,16,.58);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kz-team .kp-s[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,rgba(12,10,16,.58)),rgba(12,10,16,.58));box-shadow:inset 0 0 0 2px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.kz-team .kp-s[aria-pressed="true"]::before{display:none}
.kz-team .kp-sp2{width:72px;height:72px}.kz-team .kp-sp2 .ss{width:72px!important}
.kz-team .kp-s b{font-size:13.5px}
.kz-team .kp-s small{gap:4px;font-size:11.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.kp-pen{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:rgba(14,9,7,.88);box-shadow:inset 0 0 0 1.5px var(--accent);color:#F4F5F7}
.kz-team .kp-s[aria-pressed="true"] .kp-pen{background:var(--accent);box-shadow:none;color:#1A0C04}
.kz-team .kz-e0{width:56px;height:56px;margin-top:8px}
.kz-4 .kp-s{flex-basis:0}.kz-4 .kp-sp2{width:58px;height:58px}.kz-4 .kp-sp2 .ss{width:58px!important}.kz-4 .kz-e0{width:48px;height:48px}.kz-4 .kp-pen{width:20px;height:20px;top:4px;right:4px}
@media (max-height:700px){.kz-team .kp-s{padding:5px 4px}.kz-team .kp-sp2,.kz-4 .kp-sp2{width:50px;height:50px}.kz-team .kp-sp2 .ss,.kz-4 .kp-sp2 .ss{width:50px!important}.kz-team .kz-e0{width:42px;height:42px;margin-top:4px}}
/* the Kindlings tab in rows by role (Tank, Damage, Support, Special) */
.kz-rh{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kz-rh:first-child{margin-top:0}
.kz-rh .role-ic{flex:none;width:17px;height:17px}
.kz-rh small{font-size:11px;font-weight:800;letter-spacing:0;color:var(--faint)}
#rn-page{color:var(--fg);background:radial-gradient(85% 50% at 50% 18%,var(--tb-a) 0%,var(--tb-b) 50%,var(--bg) 100%) var(--bg)}
#rn-page{overflow:hidden}
#rn-page .np-body{min-height:0;display:flex;flex-direction:column;gap:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.rn-dust{width:64px;text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}.rn-dust b{color:var(--gold-text);font-size:13px}
.rn-for{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.rn-grid{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.rn-sl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rn-sl span{padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);letter-spacing:0}
.rn-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.rn-t{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 4px 7px;border:0;border-radius:16px;background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg);font:inherit;cursor:pointer}
.rn-t.on{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 2px var(--accent)}
.rn-t b{font-size:12.5px}.rn-t small{max-width:100%;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-empty{padding:14px;border-radius:16px;background:color-mix(in srgb,var(--fg) 5%,transparent);font-size:13px;line-height:1.45;color:var(--muted)}
.rn-pan{flex:none;height:186px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:12px 14px;border-radius:20px;background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent)}
.rn-pt{display:flex;align-items:center;gap:12px;min-width:0}.rn-pt .rn-gem{flex:none}
.rn-pt>span{display:flex;flex-direction:column;gap:2px;min-width:0}.rn-pt b{font-size:15px}.rn-pt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (Hunter, Nov 4: "Rune description gets cut off") what it does wraps to two lines (the panel keeps room for them) */
.rn-pt small.rn-dsc{white-space:normal;line-height:1.3}
.rn-bt{display:flex;gap:8px}.rn-bt .btn{flex:1;min-width:0;min-height:42px;padding:8px 8px;font-size:12.5px;line-height:1.2}
.rn-hint{margin:0;text-align:center;font-size:13px;color:var(--faint)}
.bt-rnn{padding:0 6px;border-radius:999px;background:var(--accent);color:#1A0C04;font-size:11px;font-weight:900;line-height:17px}
/* (A70 step 4) on a short screen the Kindling page stays one screen: smaller cards, one line under each move, no tip line */
/* the Battle screen's chips stay on one line on a narrow phone (the world's name shortens, Board is its trophy) */
.bt-chips{flex-wrap:nowrap}.bt-chip{flex:0 1 auto;min-width:0}#bt-world-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:400px){.bt-chip{padding:0 9px;gap:4px;font-size:12px}#bt-board .bt-bdt{display:none}}

/* ---- Kindling Clash's team page in its world (v0.5.91; like Trials', A70 step 2): yours near, a "?" each across, one
   panel (Normal | Balanced, Free pick, the world, a line). Classes fgc-tp*, fgc-tq, fgc-wch ---- */
.fgc-sl .fgc-arf .fgc-tpm .fgc-au{z-index:2}.fgc-sl .fgc-arf .fgc-tpm .fgc-au[data-fgc="slot:1"]{z-index:3}
.fgc-sl .fgc-arf .fgc-tpm .fgc-au:disabled{opacity:1;cursor:default}
.fgc-tq .fgc-art{display:grid!important;place-items:center}
.fgc-tq-q{width:62px;height:62px;margin-top:30px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:900;color:rgba(230,210,255,.85);background:radial-gradient(circle at 45% 40%,rgba(120,80,170,.55),rgba(20,10,30,.75));box-shadow:0 0 18px hsl(278 95% 62% / .55),inset 0 0 0 1.5px rgba(200,170,255,.35)}
.fgc-tpp{position:relative;z-index:5;display:flex;flex-direction:column;gap:8px;margin:0 -4px;padding:10px 12px;border-radius:20px;background:rgba(14,9,7,.88);box-shadow:inset 0 1px 0 rgba(255,190,140,.14);color:#F4F5F7}
.fgc-tpr{display:flex;align-items:center;gap:8px}
.fgc-tpr .fgc-seg{flex:1;background:rgba(255,255,255,.07)}
.fgc-tpr .fgc-seg button{min-height:32px;font-size:13px;color:#BFB3AD}
.fgc-tpfree{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:#F4F5F7;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.fgc-tpfree:disabled{opacity:.4;cursor:default}
.fgc-tpfree .fgc-sw{transform:scale(.85)}
.fgc-tpfree[aria-checked="true"] .fgc-sw{background:var(--accent)}
.fgc-tpfree[aria-checked="true"] .fgc-sw::after{transform:translateX(18px)}
/* a friend game in a world: one soft shade across the top for the title (the bar's own was only as wide as its buttons) */
#fr-game.fgc-ar-on.fr-gfull::before{content:"";position:fixed;inset:0 0 auto;z-index:1;height:calc(130px + env(safe-area-inset-top,0px));background:linear-gradient(rgba(5,3,2,.7),rgba(5,3,2,.3) 60%,transparent);pointer-events:none}
.fgc-wch{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:14px;background:rgba(255,255,255,.07);color:#F4F5F7;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.fgc-wch svg{color:var(--accent);flex:none}
.fgc-wch .fgc-grow{display:flex;align-items:baseline;gap:8px;color:#BFB3AD}.fgc-wch b{color:#F4F5F7;font-size:14px}
.fgc-tpl{margin:0;font-size:13px;line-height:1.35;color:#D8CCC6}.fgc-tpl b{color:#F4F5F7}
.fgc-tpn{display:flex;align-items:center;gap:8px;font-size:12px;color:#BFB3AD}.fgc-tpn .tv-chart{margin-left:auto}

/* ---- a battle's moves and Ready: one sheet along the bottom, edge to edge (v0.5.91, Hunter, Oct 28: "The attacks drawer
   at the bottom should go all the way to the left and right and bottom. Not have all these gaps") ---- */
#gm-trials.fgc-ar-on:not(.tv-on) .np-body{padding-bottom:0;gap:0}
#gm-trials.fgc-ar-on .gm-tv-hint:empty{display:none}
/* (v0.5.93) a battle's end: its line, what it brought and the buttons, all in the same sheet (it was a large empty sheet
   with the buttons under it on the page) */
.fgc-ar-on .fgc-sl-dock.fgc-sl-dockend{min-height:0;padding-bottom:6px}
#gm-trials.fgc-ar-on:not(.tv-on) .gm-tv-board{order:-1}
#gm-trials.fgc-ar-on:not(.tv-on) #gm-tv-rw,#gm-trials.fgc-ar-on:not(.tv-on) .gm-tv-hint:not(:empty){position:relative;z-index:5;margin:0 -16px;padding:0 16px 8px;background:#100A08;color:#D8CCC6;text-align:center}
#gm-trials.fgc-ar-on:not(.tv-on) #gm-tv-rw[hidden]{display:none}
#gm-trials.fgc-ar-on .np-body>.toast-ipw{margin-bottom:0}   /* (its -12px undid a gap these pages don't have)*/
#gm-trials{--fgc-bleed:16px}
.fgc-ar-on .fgc-sl-dock{margin:0 calc(-1 * var(--fgc-bleed,16px));padding:12px 14px 6px;border-radius:24px 24px 0 0;background:#100A08;box-shadow:0 -10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,190,140,.16)}
#gm-trials.fgc-ar-on #gm-tv-btns.gm-tv-stick,.fr-gfull[data-fg="clash"].fgc-ar-on #fr-gm-btns{margin:0 calc(-1 * var(--fgc-bleed,16px));padding:6px 14px calc(12px + env(safe-area-inset-bottom,0px));min-height:0;background:#100A08}
.fr-gfull[data-fg="clash"].fgc-ar-on .np-body{padding-bottom:0;gap:0}
#fr-game{--fgc-bleed:10px}
.fr-gfull[data-fg="clash"].fgc-ar-on #fr-gm-btns{margin:0}

/* ---- the Tower (A70 step 3): the Battle screen's four towers; on the Trials page (tw-on) the tower's floor and its
   strip of 10, and each of yours with the health it carries. Classes bt-tw*, tw- ---- */
.bt-tws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bt-tw{position:relative;height:74px;padding:0;border:0;border-radius:14px;overflow:hidden;background:#07060C;color:#F4F5F7;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bt-tw canvas{position:absolute;inset:0;width:100%;height:100%}
.bt-twr{position:absolute;top:5px;right:5px;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}   /* (A72 item 5) the rune kind it drops */
.tw-rn{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:700;color:#D8CCC6}.tw-rn .rn-gem{flex:none}
.bt-twt{position:absolute;left:0;right:0;bottom:0;padding:14px 7px 5px;display:flex;flex-direction:column;background:linear-gradient(transparent,rgba(0,0,0,.8));text-shadow:0 1px 3px #000}
.bt-twt b{font-size:12.5px}.bt-twt small{font-size:10.5px;color:#E0D6D0}
.bt-tw.bt-twon{box-shadow:inset 0 0 0 2px var(--accent)}.bt-tw.bt-twon small{color:#FFD3B8;font-weight:800}
.tw-head{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 2px}
.tw-head b{font-size:19px;color:#F4F5F7;text-shadow:0 1px 3px #000,0 0 8px #000}
.tw-strip{display:flex;gap:4px}
.tw-strip i{width:18px;height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.tw-strip i.done{background:var(--accent)}
.tw-strip i.now{background:#F4F5F7;box-shadow:0 0 8px rgba(255,255,255,.8)}
.tw-strip i.boss{width:22px;background:color-mix(in srgb,var(--gold) 55%,rgba(255,255,255,.2))}
.tw-strip i.boss.done{background:var(--gold)}
.tw-hp{position:relative;display:block;width:60px;height:5px;margin-top:2px;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.55);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.tw-hp i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#73D9A2}
.tw-hp.tw-low i{background:#F5B544}
.tw-hp.tw-out{width:auto;height:auto;padding:0 6px;font-size:9.5px;font-weight:900;color:#FF8A8A;background:rgba(10,8,14,.88);overflow:visible;text-shadow:none}
#gm-trials.tw-on .gm-tv-pick{display:none}

/* ---------- the Shop (A71 item 10, v0.6.09; look B of docs/shop-looks.html): its parts as tabs that scroll sideways, an
   arrow at each end while there's more that way (Hunter: "so people know they can scroll"), each part a grid of cards
   like the Collection's. The arrows sit over the row's ends, so showing them moves nothing. Classes so- */
/* the Shop's home (v0.6.12, look C): a tile for each part, three to a row; each opens that part's own page */
.so-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.so-tl{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-height:86px;padding:10px 11px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--tile) 82%,transparent);color:var(--fg);font:inherit;text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.so-tl i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.so-tl.so-tlg i{background:rgba(183,155,255,.22);color:#D9C8FF}
.so-tl span{display:flex;flex-direction:column;min-width:0;max-width:100%}
.so-tl b{font-size:13.5px;font-weight:800;line-height:1.15;color:var(--fg)}
.so-tl small{font-size:11px;font-weight:700;line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
.so-tl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* (A69 part 7; Hunter, Oct 29: "a full card for the outfits section under the 'Just for you' part") Outfits as one wide
   card, an outfit on a Kindling at its end; the other parts' tiles under it, three across as before */
.so-tlw{width:100%;flex-direction:row;align-items:center;gap:12px;min-height:0;margin-top:12px;padding:4px 12px 4px 11px;border-color:color-mix(in srgb,#B58CFF 50%,var(--border));background:linear-gradient(100deg,color-mix(in srgb,#B58CFF 14%,var(--tile)),color-mix(in srgb,var(--tile) 82%,transparent) 70%)}
.so-tlw i{flex:none;background:rgba(183,155,255,.22);color:#D9C8FF}
.so-tlw span:not(.cb-k){flex:1;min-width:0}
.so-tlw small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-tlwk{flex:none;position:relative;width:52px;height:52px;display:block}
.so-tlwgo{flex:none;font-style:normal;font-size:22px;font-weight:700;color:var(--muted)}
.so-tlw+.so-tiles{margin-top:8px}
/* outfit vouchers (A69 part 7): the bar at the top of the Outfits part (how many of 3, a tap opens Kindlings Plus), and
   the voucher's sign by an outfit's gem price */
.so-ovb{display:flex;align-items:center;gap:11px;width:100%;margin:10px 0 2px;padding:9px 12px;border:1px solid color-mix(in srgb,#F5C451 45%,var(--border));border-radius:16px;background:linear-gradient(100deg,color-mix(in srgb,#F5C451 14%,var(--tile)),color-mix(in srgb,var(--tile) 82%,transparent) 70%);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.so-ovi{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(245,196,81,.18)}
.so-ovi .ov-ic{width:24px;height:19px}
.so-rvs{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;margin:0 0 8px}
.so-rv{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--violet,#B48CFF) 18%,transparent);font-size:12.5px;font-weight:800}
.so-ovt{flex:1;min-width:0;display:flex;flex-direction:column}
.so-ovt b{font-size:13.5px;font-weight:800}
.so-ovt small{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-ovn{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.so-ovn b{font-size:18px;font-weight:800;color:#F5C451}
.so-ovb em{flex:none;font-style:normal;font-size:20px;font-weight:700;color:var(--muted)}
.so-ovs{display:inline-flex;margin-left:5px;vertical-align:-2px;opacity:.95}
/* (so the home still fits one screen with the card: the tiles under it a little shorter) */
.so-tlw+.so-tiles .so-tl{min-height:0;gap:4px;padding:7px 11px 8px}
.so-tlw+.so-tiles .so-tl i{width:28px;height:28px;border-radius:9px}
.so-body{padding-top:4px}
.so-sl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 10px;color:var(--dr-ink,#FBF7F4);text-shadow:0 1px 6px rgba(0,0,0,.75)}
.so-sl b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.so-sl span{font-size:12.5px;font-weight:700;color:var(--dr-dim,rgba(251,247,244,.8))}
.so-t>small.so-pr{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 2px;letter-spacing:-.2px;max-width:100%;margin-top:2px;font-size:12px;font-weight:700;line-height:1.3;color:var(--dr-dim,rgba(251,247,244,.85));white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.so-t>small.so-pr svg{flex:none}
.so-pp{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}   /* (v0.6.12) the Glow half of a price, kept together when it wraps; (v0.6.52) 2px gaps, so a common egg's price with Glow ×3 (3,000 + 180) stays on one line on a 360px phone's picks */
.so-t>b{display:block;text-align:center}
.so-t>small.so-y{color:#8FE8B6}
.so-mine .cb-pic{opacity:.72}
.so-tag{position:absolute;left:6px;top:6px;z-index:4;max-width:calc(100% - 12px);padding:2px 7px;border-radius:8px;background:rgba(10,7,5,.72);color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Outfits part (A72 item 11b, v0.6.45; Hunter's pick B of docs/mock/outfits-page.html): the Kindlings to pick from,
   one Kindling's outfits big, two to a row, and the search */
.so-skhd{display:flex;align-items:center;gap:10px;margin:14px 2px 10px}
.so-skhd .note{flex:1;margin:0;color:var(--dr-ink,#FBF7F4);text-shadow:0 1px 6px rgba(0,0,0,.75)}
.so-skf{flex:none}
.cb-grid.so-g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.so-skq{width:100%;margin:12px 0 4px}
.so-skw,.so-sknone{text-align:center;margin:14px 0 0}
@media (min-width:760px){.cb-grid.so-g2{grid-template-columns:repeat(3,minmax(0,1fr))}}
.so-egg,.so-tr{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.so-sc{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.so-chips{display:flex;gap:6px;margin-top:6px;overflow-x:auto;scrollbar-width:none}
.so-chips::-webkit-scrollbar{display:none}
.so-chip{flex:none;height:34px;padding:0 14px;border-radius:12px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-dim);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.so-chip.on{background:color-mix(in srgb,var(--accent) 26%,rgba(16,11,9,.6));border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:color-mix(in srgb,var(--accent) 55%,#fff)}
/* the holiday event's banner: its colors and page's scene, opens its page */
.so-ev{position:relative;display:block;width:100%;height:132px;margin-top:6px;padding:0;border:0;border-radius:20px;overflow:hidden;text-align:left;color:#fff;font:inherit;cursor:pointer;background:linear-gradient(135deg,var(--ev1,#3A1A4E),var(--ev2,#1A0C26));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--evi,#FFB15C) 45%,transparent)}
.so-evsc{position:absolute;inset:0}
.so-ev::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,4,16,.86) 0%,rgba(10,4,16,.45) 58%,transparent 85%)}
.so-evt{position:absolute;left:14px;top:13px;right:14px;z-index:2;display:flex;flex-direction:column;gap:2px}
/* (v0.6.13) on days with no event: Kindlings Plus in the event card's place (the next event's card is the same as an event's) */
.so-ev.so-evp{background:linear-gradient(135deg,#123A52,#0A1E2C);box-shadow:inset 0 0 0 1.5px rgba(92,200,255,.35)}
.so-ev.so-evp::after{display:none}
.so-evp .so-evt{max-width:64%}
.so-evp .so-evt small{color:#9FDCFF}
.so-evp .so-evgo{background:rgba(92,200,255,.22);color:#D2F0FF}
.so-evpc{position:absolute;right:16px;top:50%;z-index:1;transform:translateY(-50%);opacity:.9}
.so-evt small{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--evi,#FFB15C)}
.so-evt b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.so-evt span{font-size:12.5px;color:rgba(255,255,255,.82)}
.so-evgo{position:absolute;left:14px;bottom:13px;z-index:2;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--evi,#FFB15C) 30%,rgba(0,0,0,.3));color:#fff;font-size:12.5px;font-weight:800}
.so-gg{margin-top:10px;display:flex;flex-direction:column;gap:12px}
/* the details page: which of your Kindlings tries it on (a cosmetic) */
.by-who{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.by-who::-webkit-scrollbar{display:none}
.by-wl{flex:none;font-size:12px;font-weight:800;color:var(--dr-dim);margin-right:2px}
/* dress-up's Get more (only what's yours there): how many are yours, then the way to the Shop */
.dr-pager.dr-pg1 .dr-pg{visibility:hidden}
.dr-more{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 22%,rgba(16,11,9,.6));color:color-mix(in srgb,var(--accent) 50%,#fff);font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer}
.dr-mcnt{color:var(--dr-dim);font-weight:700}
/* ---------- Chess (A69 part 3; Hunter picked look C of docs/chess-looks.html, following the theme): a glass board
   under the night sky of the theme's game-table colors, both Kindlings at the corners. Every square is exactly the
   same size (equal grid rows and columns that never grow to fit a piece). Classes fgh- (the board, fg-chess.js; also
   with friends and your Kindling on #fr-game), chl- (the bot ladder page #gm-ch), chb- (its board page #gm-chb). */
.fgh-t,.fgh-mini,.chl-ck{--sq-l:color-mix(in srgb,#fff 86%,var(--accent) 14%);--sq-d:color-mix(in srgb,var(--accent) 58%,var(--tb-b));
  --sq-last:color-mix(in srgb,var(--gold) 50%,transparent);--sq-sel:color-mix(in srgb,var(--gold) 66%,transparent);--fgh-dot:rgba(0,0,0,.28);
  --pw-f:#fff;--pw-s:color-mix(in srgb,var(--accent) 40%,#000);--pb-f:color-mix(in srgb,var(--accent) 22%,#0A0A12);--pb-s:color-mix(in srgb,var(--accent) 45%,#fff);
  --fgh-soft:color-mix(in srgb,var(--fg) 8%,transparent);--fgh-soft2:color-mix(in srgb,var(--fg) 16%,transparent)}
/* the sky behind the whole page: the theme's table colors and a few still stars (none by day) */
.np.fr-gfull[data-fg="chess"],#gm-chb,#gm-ch{color:var(--fg);
  background:radial-gradient(1.4px 1.4px at 8% 12%,rgba(255,250,240,.85),transparent),radial-gradient(1px 1px at 22% 30%,rgba(255,250,240,.6),transparent),radial-gradient(1.6px 1.6px at 37% 8%,rgba(255,250,240,.8),transparent),
    radial-gradient(1px 1px at 52% 22%,rgba(255,250,240,.5),transparent),radial-gradient(1.4px 1.4px at 68% 6%,rgba(255,250,240,.75),transparent),radial-gradient(1px 1px at 81% 26%,rgba(255,250,240,.6),transparent),
    radial-gradient(1.6px 1.6px at 93% 14%,rgba(255,250,240,.8),transparent),radial-gradient(1px 1px at 14% 52%,rgba(255,250,240,.45),transparent),radial-gradient(1.2px 1.2px at 88% 48%,rgba(255,250,240,.5),transparent),
    radial-gradient(1px 1px at 4% 78%,rgba(255,250,240,.4),transparent),radial-gradient(1.2px 1.2px at 96% 84%,rgba(255,250,240,.45),transparent),radial-gradient(1px 1px at 60% 94%,rgba(255,250,240,.35),transparent),
    radial-gradient(70% 40% at 50% 20%,var(--tb-a) 0%,var(--tb-b) 55%,var(--bg) 100%) var(--bg) fixed}
html[data-theme="daylight"] :is(.np.fr-gfull[data-fg="chess"],#gm-chb,#gm-ch){background:radial-gradient(70% 40% at 50% 20%,var(--tb-a) 0%,var(--tb-b) 55%,var(--bg) 100%) var(--bg) fixed}
.fgh-t{position:relative;display:flex;flex-direction:column;flex:1 0 auto;color:var(--fg);
  /* (Hunter, Oct 28: "the board looks a little small … make it larger and fully side to side"): the board as wide as the
     screen on a phone (no frame or gaps), up to 560px, and never taller than the room the rest leaves */
  --fgh-bw:min(100%,560px,var(--fgh-fit,9999px),max(260px,calc(100dvh - 330px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))))}
.fgh-top{min-height:44px}
.fgh-ttl{font-size:16px;font-weight:800;line-height:1.2}
.fgh-tsub{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fgh-mid{position:relative;display:flex;flex-direction:column;padding:4px 14px 4px;box-sizing:border-box;align-self:center;margin-top:auto;width:var(--fgh-bw)}   /* (the rows as wide as the board) */
.fgh-mid2{margin-top:0;padding-top:0}
.fgh-k{position:absolute;z-index:3;width:80px;height:90px;pointer-events:none;display:block}
.fgh-k .ss{width:80px!important;height:90px}
.fgh-kfoe{right:10px;top:-10px}   /* (the Kindlings stand beside their rows, never over the squares) */
.fgh-kme{left:10px;bottom:-20px}
.fgh-kme.fgx-init{width:52px;height:52px;left:20px;bottom:9px;display:grid;place-items:center;border-radius:50%;background:var(--fgh-soft2);font-size:20px;font-weight:800}
.fgh-shadow .ss{filter:brightness(.45) saturate(.3) contrast(1.1) drop-shadow(0 0 6px hsl(278 95% 62% / .9))!important}
.fgh-pl{display:flex;align-items:center;gap:10px;min-height:70px}
.fgh-plfoe{padding-right:96px}
.fgh-plme{padding-left:96px}
.fgh-who{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fgh-who b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgh-who small{font-size:11px;color:var(--muted);white-space:nowrap}
.fgh-cap{display:flex;align-items:center;height:18px;overflow:hidden}
.fgh-cap svg{position:static;width:16px;height:16px;margin-right:-4px;flex:none}
.fgh-cap i{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);margin-left:8px}
.fgh-turn{margin-left:auto;flex:none;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;background:var(--fgh-soft);color:var(--muted)}
.fgh-turn:empty{visibility:hidden}
.fgh-turn.fgh-on{background:linear-gradient(180deg,var(--hot-lite),var(--accent));color:var(--accent-ink);box-shadow:0 0 16px color-mix(in srgb,var(--hot) 45%,transparent)}
.fgh-frame{position:relative;align-self:center;width:var(--fgh-bw);box-sizing:border-box;box-shadow:0 0 40px color-mix(in srgb,var(--hot) 22%,transparent)}
.fgh-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;width:100%;overflow:hidden;touch-action:manipulation}
/* (wider than the board: a glass frame round it again) */
@media (min-width:600px){.fgh-frame{padding:6px;border-radius:18px;background:var(--fgh-soft);border:1px solid var(--fgh-soft2)}.fgh-board{border-radius:12px}}
.fgh-sq{all:unset;position:relative;display:block;min-width:0;min-height:0;overflow:hidden;cursor:default;-webkit-tap-highlight-color:transparent}
button.fgh-sq{cursor:pointer}
button.fgh-sq:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.fgh-l{background:var(--sq-l)}.fgh-d{background:var(--sq-d)}
.fgh-last::before,.fgh-sel::before,.fgh-chk::before{content:"";position:absolute;inset:0}
.fgh-last::before{background:var(--sq-last)}
.fgh-sel::before{background:var(--sq-sel)}
.fgh-chk::before{background:radial-gradient(closest-side,rgba(255,60,50,.85),rgba(255,60,50,.25) 70%,transparent)}
.fgh-pc{position:absolute;left:6%;top:6%;width:88%;height:88%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));pointer-events:none}
.fgh-sel .fgh-pc{transform:translateY(-4%) scale(1.06)}
.fgh-pw g{fill:var(--pw-f);stroke:var(--pw-s)}
.fgh-pb g{fill:var(--pb-f);stroke:var(--pb-s)}
.fgh-pc .fgh-cut{fill:none}
.fgh-pw .fgh-eye{fill:var(--pw-s);stroke:none}.fgh-pb .fgh-eye{fill:var(--pb-s);stroke:none}
.fgh-dot{position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;background:var(--fgh-dot);pointer-events:none}
.fgh-ring{position:absolute;inset:5%;border-radius:50%;box-shadow:inset 0 0 0 4px var(--fgh-dot);pointer-events:none}
.fgh-crd{position:absolute;font-size:9px;font-weight:800;line-height:1;opacity:.7;pointer-events:none}
.fgh-cf{right:5px;bottom:3px}.fgh-cr{left:5px;top:4px}
.fgh-l .fgh-crd{color:var(--sq-d)}.fgh-d .fgh-crd{color:var(--sq-l)}
.fgh-promo{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.fgh-promo>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:290px;padding:10px;border-radius:16px;background:var(--tile);border:1px solid var(--accent)}
.fgh-promo span{width:100%;text-align:center;font-size:13px;font-weight:800}
.fgh-promo button{position:relative;width:56px;height:56px;border-radius:12px;border:1px solid var(--border);background:var(--sq-l);padding:0;cursor:pointer}
.fgh-promo button.fgh-px{width:40px;background:var(--fgh-soft);color:var(--fg);font-size:16px}
.fgh-bub{position:absolute;z-index:4;right:96px;top:6px;max-width:150px;padding:7px 11px;border-radius:14px 14px 4px 14px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:800;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.35);pointer-events:none}
#fr-game.fr-gfull:not(.spg) .fgh-bub{display:none}
.fgh-acts{display:flex;justify-content:space-between;align-items:center;gap:8px;height:52px;padding:0 10px;box-sizing:border-box;align-self:center;width:var(--fgh-bw)}
.fgh-acts .btn{min-height:38px;padding:6px 12px;font-size:13px;white-space:nowrap}
/* looking back through the moves: first, back, the move shown, on, now */
.fgh-snd{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:0;background:var(--fgh-soft);color:var(--fg);cursor:pointer;padding:0;flex:none}
.fgh-snd.fgh-soff{color:var(--muted)}
.fgh-hist{display:flex;align-items:center;gap:2px;min-width:0}
.fgh-hb{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:0;background:var(--fgh-soft);color:var(--fg);cursor:pointer;flex:none;padding:0}
.fgh-hb:disabled{opacity:.3;cursor:default}
.fgh-hl{min-width:96px;max-width:120px;padding:0 6px;text-align:center;font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fgh-hl.fgh-hon{color:var(--gold)}
.fgh-back .fgh-board{filter:saturate(.75)}
/* a friend game's starter picks a color: White, Random or Black */
.fgh-cl{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.fgh-cols{display:flex;gap:6px}
.fgh-col{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--fgh-soft);color:var(--fg);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.fgh-col.fgh-con{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.fgh-cd{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--pw-s)}
.fgh-cdw{background:var(--pw-f)}.fgh-cdb{background:var(--pb-f);box-shadow:inset 0 0 0 1.5px var(--pb-s)}.fgh-cdr{background:linear-gradient(90deg,var(--pw-f) 50%,var(--pb-f) 50%)}
.fgh-offer[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--fg)}
.fgh-dwait{font-size:13px;font-weight:700;color:var(--muted)}
.fgh-end{padding-top:6px}
.fgh-end .fgg-bw{font-size:22px}
.fgh-say{height:21px;min-height:0;margin:6px 16px auto;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the game's picture (chat cards, Play): a corner of the board */
.fr-gp-chess .fgh-mini{position:absolute;inset:2px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.fr-gp-chess .fgh-mini i{position:relative;display:block}
.fr-gp-chess .fgh-pc{position:absolute;left:6%;top:6%;width:88%;height:88%}
/* the Chess page, look C (Hunter's pick of docs/mock/chess-page.html, Oct 28): one screen, nothing to scroll */
#gm-ch{overflow:hidden}
#gm-ch .np-bar{background:none}
#gm-ch .np-bar .grow{display:flex;justify-content:center}
#gm-ch .np-bar .grow::before{content:"Chess";font-size:17px;font-weight:800}
.chl-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.chl-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);font-size:16px;font-weight:800;cursor:pointer}
.chl-ic+.chl-ic{margin-left:6px}
.chl-body{position:relative;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.chl-how{position:absolute;z-index:5;left:16px;right:16px;top:0;margin:0;padding:14px 16px;border-radius:18px;background:var(--tile);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.5);color:var(--fg)}
.chl-wrap{display:flex;flex-direction:column}
.chl-card{display:flex;flex-direction:column;padding:14px;border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,var(--tile)),var(--tile) 70%);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--hot) 22%,transparent)}
.chl-top{display:flex;align-items:center;gap:10px}
.chl-k{flex:none;display:block;width:96px;height:104px}
.chl-k .ss{width:96px!important;height:104px;filter:brightness(.42) saturate(.3) contrast(1.15) drop-shadow(0 0 4px hsl(278 95% 62% / .9)) drop-shadow(0 0 12px hsl(290 90% 45% / .5))!important}
.chl-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.chl-t small{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.chl-t b{font-size:28px;letter-spacing:-.02em;line-height:1.05}
.chl-t>span{font-size:13px;color:var(--muted)}
.chl-t .chl-prize{margin-top:2px;font-size:12px;color:var(--gold);font-weight:700}
.chl-cols{display:flex;gap:6px;margin-top:12px}
.chl-col{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;height:44px;padding:0 6px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.chl-col.chl-con{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.chl-ck{position:relative;flex:none;display:block;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.chl-ck .fgh-pc{left:8%;top:6%;width:84%;height:84%}
.chl-half .fgh-pc:first-child{clip-path:inset(0 50% 0 0)}.chl-half .fgh-pc:last-child{clip-path:inset(0 0 0 50%)}
.chl-mb{align-self:center;width:156px;margin-top:10px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border-radius:9px;overflow:hidden}
.chl-mb i{position:relative;display:block}
.chl-go{align-self:stretch;min-height:52px;margin-top:12px;border:0;border-radius:18px;font:inherit;font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--accent-ink);background:linear-gradient(180deg,var(--hot-lite),var(--accent));box-shadow:0 8px 26px color-mix(in srgb,var(--hot) 40%,transparent);cursor:pointer}
.chl-sum{display:flex;justify-content:space-between;gap:8px;margin:14px 2px 6px;font-size:12px;color:var(--muted)}
.chl-sum b{color:var(--fg)}
.chl-lg{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;border-radius:16px;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 9%,transparent)}
.chl-lg.chl-done{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.chl-lg.chl-lock{opacity:.55}
.chl-lh{display:flex;flex-direction:column;width:64px;flex:none;line-height:1.2}
.chl-lh b{font-size:13px}.chl-lh span{font-size:11px;color:var(--muted)}
.chl-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex:1}
.chl-m{position:relative;display:grid;place-items:center;height:34px;border-radius:10px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.chl-m b{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.chl-mw{background:color-mix(in srgb,var(--gold) 18%,transparent)}.chl-mw b{color:var(--fg)}
.chl-mn{background:color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}.chl-mn b{color:var(--fg)}
.chl-ok{position:absolute;top:-5px;right:-4px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--gold);color:#1B1206}
.chl-ok svg{width:9px;height:9px}
/* (Nov 2) a short screen (or the Android app's bars): chFit tightens the ladder in two steps, then lets the page scroll */
.chl-sq .chl-k,.chl-sq .chl-k .ss{width:74px!important;height:80px}
.chl-sq .chl-t b{font-size:24px}
.chl-sq .chl-cols{margin-top:9px}.chl-sq .chl-go{min-height:46px;margin-top:9px}
.chl-sq .chl-sum{margin:10px 2px 4px}.chl-sq .chl-lg{margin-top:5px;padding:6px 10px}.chl-sq .chl-m{height:30px}
.chl-sq2 .chl-k,.chl-sq2 .chl-k .ss{width:58px!important;height:63px}
.chl-sq2 .chl-card{padding:10px 12px}.chl-sq2 .chl-cols{margin-top:7px}.chl-sq2 .chl-col{height:38px}.chl-sq2 .chl-go{min-height:42px;margin-top:7px}
.chl-sq2 .chl-lg{margin-top:4px;padding:4px 10px}.chl-sq2 .chl-m{height:27px}
#gm-ch.chl-scr{overflow-y:auto}
/* the board page against a bot: the board fills it like a friend game's */
#gm-chb .np-bar{position:absolute;top:0;left:0;right:0;width:auto;background:none;z-index:6;padding-left:6px}
#gm-chb .gm-back{width:44px;justify-content:center;color:var(--fg)}
.chb-body{display:flex;flex-direction:column;min-height:100%;padding:0 0 calc(10px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.chb-board{display:flex;flex-direction:column;flex:1 0 auto}
.chb-board .fgg-top{padding-left:64px;padding-right:110px}
.chb-btns{display:flex;flex-direction:column;gap:8px;padding:4px 16px 0;max-width:520px;width:100%;box-sizing:border-box;align-self:center}
.chb-btns:empty{display:none}
.chb-quit{width:auto;min-height:40px;margin:calc(4px + env(safe-area-inset-top,0px)) 0 0;padding:6px 14px;font-size:13px}
.chb-quit.chb-qarm{background:color-mix(in srgb,#E5484D 85%,#000);color:#fff;border-color:transparent}
/* ---------- Tablets and folding phones (A64, Hunter Oct 12: "Currently the notes page while editing a note does, but some
   of the main screens do not. Today and Kindlings home does not"). From 760px wide the app stops being a 560px phone
   column in the middle of a black screen: the sky and the Kindlings' scene fill the screen, the one-screen pages use the
   room (Today and the Calendar in two columns, more and bigger Kindlings on the home), lists get more columns in up to
   1040px, More keeps a centered column of a good width, and the bar stays its size. tests/ui/tablet.js */
@media (min-width:760px){
  :root{--wide:1040px}
  .app{max-width:var(--wide)}
  #v-more{max-width:760px;margin-inline:auto}
  #v-calm:not([hidden]){max-width:none;padding-inline:max(12px,calc(50% - 380px))}   /* (Calm: the night across the screen, a centered column under it) */
  .cm-head{left:max(12px,calc(50% - 380px))}
  .cm-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mo-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nt-list{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .nt-fab{right:max(16px,calc(50vw - var(--wide) / 2 + 16px))}
  .hl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
  /* Today: the sky across the whole screen, the rest in the middle; Your day in two columns (the line from morning to
     night on the left, Anytime, the rest of the day and the habits on the right) */
  #v-today:not([hidden]){max-width:none;padding-inline:max(12px,calc(50% - var(--wide) / 2))}
  #v-today .td-scroll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:24px;align-content:start}
  #v-today .td-scroll>*{grid-column:2;min-width:0}
  #v-today #agenda{grid-column:1;grid-row:1/-1;align-self:start}
  #v-today .td-day{margin-inline:0;border-radius:22px;border-left:1px solid color-mix(in srgb,var(--fg) 14%,transparent)!important;border-right:1px solid color-mix(in srgb,var(--fg) 14%,transparent)!important}
  .td-chips{margin-inline:0;padding-inline:0}
  /* the Kindlings home: the scene across the whole screen, more and bigger Kindlings, the six buttons a row of a good size */
  #v-spirits{max-width:none}
  #v-spirits>.gm-home,#gm-book #gm-home{--hmax:170px}   /* (A72 item 9: the home is the Collection's Kindlings) */
  #gm-book .cb-foot{width:min(640px,calc(100% - 20px));margin-inline:auto}
  .hm-top{padding-inline:max(14px,calc(50% - var(--wide) / 2))}
  #v-spirits>.gm-btns{left:50%;right:auto;width:min(640px,calc(100% - 20px));transform:translateX(-50%)}
  .gm-home .gm-cap{left:max(16px,calc(50% - 314px));right:max(60px,calc(50% - 274px))}
  #v-spirits .gm-bgbtn{right:max(14px,calc(50% - 316px))}
}
/* the Calendar on a wide screen: standing (a tablet held upright, an open fold), the month on top, a little taller,
   and the day under it, as on a phone; lying down, the month on the left filling the height and the day and Coming up
   on the right (side by side when upright made the month tall and thin) */
@media (min-width:760px){
  #v-cal:not([hidden]){max-width:760px}
  #v-cal .cl-month .day{height:clamp(40px,6vh,64px)}
  #v-cal .day .hol-ic{right:auto;left:calc(50% + 12px)}   /* (a holiday's mark beside its date, not in the far corner of a wide day) */
}
@media (min-width:760px) and (min-height:560px) and (orientation:landscape){
  #v-cal:not([hidden]){max-width:var(--wide);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px;row-gap:10px}
  #v-cal .cl-head{grid-column:1;grid-row:1}
  #v-cal .cl-month{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;min-height:0}
  #v-cal .cl-month .days{flex:1;grid-auto-rows:minmax(0,1fr)}
  #v-cal .cl-month .day{height:auto;min-height:40px;justify-content:flex-start;padding-top:8px}   /* (the date at the top of a tall day, like a wall calendar; a holiday's mark beside it) */
  #v-cal .cl-day{grid-column:2;grid-row:1/3;min-height:0}
  #v-cal .cl-upbox{grid-column:2;grid-row:3;max-height:none}
  #v-cal .cl-upbox.open{height:auto;max-height:46vh}
}
/* Sudoku lying down on a tablet (A64): the board on the left and its tools and numbers on the right (a 3 × 3 pad), so
   the numbers aren't below the bottom of the screen */
@media (min-width:760px) and (min-height:560px) and (orientation:landscape){
  .sd-main{display:grid;grid-template-columns:minmax(0,420px) minmax(0,300px);justify-content:center;column-gap:20px;row-gap:10px;align-items:start}
  .sd-main>.sd-bar{grid-column:1/-1;max-width:none;margin:0}
  .sd-main>.sd-grid,.sd-main>.sd-msg{grid-column:1;margin:0}
  .sd-main>.sd-play{grid-column:2;grid-row:2/4;margin:0}
  .sd-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sd-k{min-height:58px}
}
/* The opening screen (A64, boot.js; look C on First Fire, Hunter Oct 13, docs/loading-looks.html). It starts exactly as
   the phone's launch screen (the icon, big, in the middle, on First Fire's night blue #060716, the color in the
   manifest and the Play app's launch screen), so there's one screen: the scene fades in, the icon shrinks into a spark
   that writes "Kindlings" in light (an outline, then filled), three Kindlings peek up over it, then the bar and
   "Opening…". About 1.9 s, the time the update check takes anyway. Everything that moves is a transform or opacity, which
   the phone's graphics chip runs by itself: smooth even while the app's code is still loading. The bar moves while it
   opens and fills while it updates (.ld-go) */
.ld{position:fixed;inset:0;z-index:200;overflow:hidden;background:#060716;color:#F6E9E1;transition:opacity .45s}
.ld.ld-out{opacity:0;pointer-events:none}
.ld-sc{position:absolute;inset:0;opacity:0;animation:ld-fade 1.2s ease-out .05s forwards}
.ld-sc::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(6,7,22,0) 0,rgba(6,7,22,.45) 75%)}
.ld-ic{position:absolute;left:50%;top:50%;width:min(40vw,168px);height:auto;aspect-ratio:1;margin:0;border-radius:50%;transform:translate(-50%,-50%);animation:ld-ic .8s cubic-bezier(.5,0,.7,.4) .3s forwards}
.ld-name{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);font-size:44px;font-weight:800;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.ld-win{display:block;overflow:hidden;transform:translateX(-100%);animation:ld-win 1.7s cubic-bezier(.45,.05,.55,.95) .8s forwards}
.ld-in{display:block;transform:translateX(100%);animation:ld-in 1.7s cubic-bezier(.45,.05,.55,.95) .8s forwards}
.ld-line{color:transparent;-webkit-text-stroke:1.2px #FFD9A0;text-shadow:0 0 14px rgba(255,190,110,.45)}
.ld-fillw{position:absolute;inset:0;opacity:0;text-shadow:0 0 10px rgba(255,170,100,.4);animation:ld-fade .7s ease-out 2.3s forwards}
.ld-trk{position:absolute;inset:0;transform:translateX(-100%);animation:ld-win 1.7s cubic-bezier(.45,.05,.55,.95) .8s forwards;pointer-events:none}
.ld-spark{position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#FFF2CF;box-shadow:0 0 12px 5px rgba(255,200,120,.85),0 0 30px 10px rgba(255,140,60,.45);opacity:0;animation:ld-spark 1.85s linear .75s forwards}
.ld-kins{position:absolute;left:0;right:0;top:calc(56% - 132px);height:110px;display:flex;justify-content:center;align-items:flex-end;gap:8px}
.ld-kins .ss{width:84px;opacity:0;transform:translateY(40px);animation:ld-peek .8s cubic-bezier(.3,1.5,.5,1) forwards}
.ld-bar{position:absolute;left:50%;bottom:16%;width:170px;height:5px;margin-left:-85px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden;opacity:0;animation:ld-fade .5s ease-out 2.6s forwards}
.ld-bar i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:5px;background:linear-gradient(90deg,#FF9F6E,#F5C451);animation:ld-move 1.1s ease-in-out infinite}
.ld.ld-go .ld-bar,.ld.ld-go .ld-t{animation:none;opacity:1}
.ld.ld-go .ld-bar i{animation:none;transition:width .2s}
.ld-t{position:absolute;left:0;right:0;bottom:calc(16% - 28px);text-align:center;min-height:18px;font-size:13px;font-weight:600;color:rgba(246,233,225,.7);opacity:0;animation:ld-fade .5s ease-out 2.6s forwards}
@keyframes ld-fade{to{opacity:1}}
@keyframes ld-ic{to{transform:translate(calc(-50% - 110px),calc(-50% + 6vh)) scale(.06);opacity:0}}
@keyframes ld-win{to{transform:none}}
@keyframes ld-in{to{transform:none}}
@keyframes ld-spark{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes ld-peek{to{opacity:1;transform:none}}
@keyframes ld-move{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
/* an event's opening (A71 part 6, pick B; boot.js dress): its colors, a dark glow behind the word, what moves, the words */
.ld.ld-ev .ld-line{-webkit-text-stroke-color:var(--ev-edge);text-shadow:0 0 14px color-mix(in srgb,var(--ev-ink) 55%,transparent)}
/* (once the filled word is in, the outline's glow goes: it's cut off at the word's box and showed as a faint box on darker scenes) */
.ld.ld-ev .ld-in.ld-line{animation:ld-in 1.7s cubic-bezier(.45,.05,.55,.95) .8s forwards,ldv-unglow .6s ease-out 2.5s forwards}
@keyframes ldv-unglow{to{text-shadow:none;-webkit-text-stroke-color:transparent}}
.ld.ld-ev .ld-fillw{color:#FFF6EC;text-shadow:0 0 12px color-mix(in srgb,var(--ev-ink) 65%,transparent),0 2px 10px rgba(0,0,0,.5)}
.ld.ld-ev .ld-spark{box-shadow:0 0 12px 5px color-mix(in srgb,var(--ev-ink) 85%,transparent),0 0 30px 10px color-mix(in srgb,var(--ev-edge) 55%,transparent)}
.ld.ld-ev .ld-bar i{background:linear-gradient(90deg,var(--ev-edge),var(--ev-ink))}
.ldv-veil{position:absolute;left:-10%;right:-10%;top:calc(56% - 150px);height:290px;background:radial-gradient(ellipse 50% 50% at 50% 58%,rgba(6,7,22,.62),rgba(6,7,22,.3) 55%,transparent 75%);opacity:0;animation:ld-fade 1.2s ease-out .05s forwards;pointer-events:none}
.ldv-gr{position:absolute;left:0;right:0;top:calc(56% + 36px);text-align:center;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ev-ink);text-shadow:0 1px 3px rgba(0,0,0,.9),0 1px 12px rgba(0,0,0,.8);opacity:0;animation:ld-fade .6s ease-out 2.7s forwards}
.ldv-pt{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;animation:ld-fade 1.2s ease-out .3s forwards}
.ldv-pt i{position:absolute;display:block}.ldv-pt svg{display:block;width:100%;height:auto}
.ldv-fall{top:0;animation:ldv-fall linear infinite}@keyframes ldv-fall{from{transform:translate(0,-8vh) rotate(0)}to{transform:translate(var(--dx),108vh) rotate(var(--rot,0deg))}}
.ldv-snow{border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);opacity:.85}
.ldv-pet{width:9px;height:6px;border-radius:60% 40% 60% 40%;opacity:.9}
.ldv-rise{bottom:-6%;animation:ldv-rise ease-in infinite}@keyframes ldv-rise{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.95}100%{transform:translate(var(--dx),-92vh) scale(1);opacity:0}}
.ldv-bub{border-radius:50%;border:1.5px solid rgba(220,250,255,.8);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 12%,rgba(160,230,255,.12) 40%,transparent 70%)}
.ldv-fly{left:0;animation:ldv-fly linear infinite}@keyframes ldv-fly{from{transform:translate(-25vw,0)}to{transform:translate(125vw,var(--dy))}}
.ldv-fly svg{animation:ldv-flap .28s ease-in-out infinite alternate;transform-origin:50% 40%}@keyframes ldv-flap{to{transform:scaleY(.45)}}
.ldv-fw{width:0;height:0}.ldv-fw b{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;opacity:0;animation:ldv-fw 2.6s ease-out infinite}
@keyframes ldv-fw{0%{transform:rotate(var(--a)) translateX(0);opacity:0}6%{opacity:1}55%{opacity:1}100%{transform:rotate(var(--a)) translateX(54px) translateY(14px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ldv-pt{display:none}}
@media (max-width:360px){.ld-name{font-size:38px}.ld-kins .ss{width:72px}}
/* reduced motion: the finished picture at once */
@media (prefers-reduced-motion:reduce){.ld *,.ld *::after{animation:none!important}.ld-ic,.ld-spark,.ld-line{opacity:0}.ld-sc,.ld-fillw,.ld-bar,.ld-t,.ld-kins .ss{opacity:1;transform:none}.ld-win,.ld-in,.ld-trk{transform:none}.ld-bar i{width:100%;opacity:.5}}
/* "Update needed" (boot.js): a release that fixes something nobody should keep using, found while the app is open */
.up-must{z-index:95;justify-content:center}
.up-mbody{width:100%;max-width:420px;margin:0 auto;padding:24px;text-align:center}
.up-mbody h1{margin:0 0 8px;font-size:24px}
.up-mbody p{margin:0 0 18px;color:var(--muted);line-height:1.5}
.up-mbody .btn{width:100%}

/* (Oct 15) the Kindlings account card on More and in You */
.set-row.mo-acct,.set-row.ka-mrow{width:100%;min-height:68px;margin-bottom:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:var(--r-tile);background:var(--tile-2)}
.set-row.ka-mrow{margin:0 0 6px}
.ka-mi{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ka-mbtn{flex:none;padding:8px 14px;border-radius:var(--r-btn);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);color:color-mix(in srgb,var(--accent) 80%,var(--fg));font-weight:700;font-size:14px}
.ka-mbtn[hidden]{display:none}
.ka-pg.ka-top{z-index:46}
.ka-later{text-align:center;margin-top:4px}
.ka-pill{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;vertical-align:1px;background:var(--tile);color:var(--muted);border:1px solid var(--border)}
.ka-pill.on{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);border-color:var(--green-line)}
.ka-ok{color:var(--green);font-weight:800}
.ka-sub .linkish{color:var(--muted);font-weight:500;font-size:13px}
/* a warm thought in a chat (Oct 15): the sender's Kindling in a soft glow */
.fr-wm small{font-size:12px;color:var(--faint)}
.fr-wmk{position:relative;display:block;padding:6px}
.fr-wmk::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,96,.45),rgba(255,176,96,0));animation:fr-wmg 2.6s ease-in-out infinite alternate}
@keyframes fr-wmg{to{opacity:.45}}
.fr-wmk .fr-radth{position:relative;width:72px;height:72px}
@media (prefers-reduced-motion: reduce){.fr-wmk::before{animation:none}}
/* the clearing behind Breathe, Ground me, Focus and Sounds (Hunter, Oct 15, look A; scnPaint in app.js): a still scene
   in the page, its ground line --hz just under the page's Kindling; every button where it was, on top. Night colors in
   every theme (Daylight's light ones would be dark text on the sky). Classes cm-scn */
.sheet-wrap.cm-scp{background:#070A1F}
.sheet-wrap.cm-scp>.sheet.cm-pg{position:relative;background:transparent}
.sheet-wrap.cm-scp>.sheet.cm-pg>.sheet-head:first-child{background:transparent}
.cm-scp>.sheet>:not(.cm-scn):not(.sheet-head):not(.toast-ipw){position:relative;z-index:1}   /* (not the in-place message: it floats over the page, tappable) */
html[data-theme="daylight"] .cm-scp{--accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);--ctl-soft:color-mix(in srgb,var(--fg) 9%,var(--tile));--ctl:color-mix(in srgb,var(--fg) 13%,var(--tile));--ctl-2:color-mix(in srgb,var(--fg) 20%,var(--tile));--ctl-3:color-mix(in srgb,var(--fg) 28%,var(--tile));--gold-panel:color-mix(in srgb,var(--gold) 9%,var(--tile));--gold-text:color-mix(in srgb,var(--gold) 62%,var(--fg));--gold-sub:color-mix(in srgb,var(--gold) 55%,var(--faint));--acc-panel:color-mix(in srgb,var(--accent) 8%,var(--tile));--acc-tint:color-mix(in srgb,var(--accent) 14%,var(--tile));--acc-line:color-mix(in srgb,var(--accent) 28%,var(--tile));--acc-deep:color-mix(in srgb,var(--accent) 10%,var(--bg));--violet:color-mix(in srgb,#A57BFF 80%,var(--fg));--violet-panel:color-mix(in srgb,#A57BFF 9%,var(--tile));--violet-line:color-mix(in srgb,#A57BFF 32%,var(--tile));--green:color-mix(in srgb,#5FD597 82%,var(--fg));--green-line:color-mix(in srgb,#5FD597 26%,var(--tile));--red:color-mix(in srgb,#FF6B7A 82%,var(--fg));--bg:#04070F;--tile:#0B1220;--tile-2:#111A2C;--border:#1A253A;--line:#131C2E;--fg:#EEF3FB;--muted:#9FB0C8;--faint:#8694AB;--accent:#6FB6FF;--accent-ink:#021320;--gold:#F5C451;--gold-soft:rgba(245,196,81,.10);--gold-line:rgba(245,196,81,.28);--gold-ink:#1A1408;color-scheme:dark;color:var(--fg)}
.cm-scn{position:absolute;left:0;right:0;top:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#070A1F 0%,#141634 45%,#2B1A24 var(--hzp),#0E0A14 calc(var(--hzp) + 1px))}
.cm-scn-sky{position:absolute;left:0;right:0;top:0;height:calc(var(--hz) - 40px)}
.cm-scn-s{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.cm-scn-moon{position:absolute;width:26px;height:26px;border-radius:50%;background:#F4EFD8;box-shadow:0 0 34px 10px rgba(244,239,216,.15)}
.cm-scn-moon[hidden]{display:none}
.cm-scn-h{position:absolute;left:0;right:0;width:100%;height:120px;top:calc(var(--hz) - 104px)}
.cm-scn-g{position:absolute;left:0;right:0;top:calc(var(--hz) + 14px);bottom:0;background:linear-gradient(180deg,#0E0A14 0,#161026 45%,#120D1C 100%)}
.cm-scn-glow{position:absolute;left:var(--fx);width:340px;height:220px;top:calc(var(--hz) - 70px);transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,150,70,.16),rgba(255,150,70,0))}
.cm-scn-fire{position:absolute;left:var(--fx);width:84px;height:77px;top:calc(var(--hz) - 62px);transform:translateX(-50%);overflow:visible}
.cm-scn-lamp{position:absolute;left:var(--lx);width:30px;height:40px;top:calc(var(--hz) - 40px);transform:translateX(-50%)}
/* Focus: your Kindling in the scene with its book, no window (the desk and its box gone) */
.cm-fcart{background:none;border:0;overflow:visible}
.cm-fcdesk{display:none}
.cm-fcbook{position:absolute;left:calc(50% - 30px);bottom:16px;width:58px;height:auto}
/* the Plus page, look A (Oct 15): your Kindling on the Halo background, the price and Join under it, tiles of one size */
.pl-sh{position:relative;height:230px;border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:#14113F}
.pl-sh .sc-wrap{position:absolute;inset:0}
.pl-k{position:absolute;left:50%;top:20px;width:112px;height:112px;transform:translateX(-50%)}
.pl-k .ss{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.pl-ht{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,rgba(7,6,26,0),rgba(7,6,26,.88) 45%);display:flex;flex-direction:column;gap:2px}
.pl-ht b{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:#fff}
.pl-ht>span{font-size:13.5px;color:rgba(255,255,255,.8)}
.pl-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:14px 2px 10px}
.pl-pr b{font-size:20px;font-weight:800}
.pl-pr span{color:var(--muted);font-size:13.5px}
.pl-jn{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.pl-jn .btn{min-height:50px;border-radius:16px;font-weight:800;padding:0 8px}
.pl-jnote{margin:8px 2px 0}
.pl-lbl{margin:20px 2px 8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}   /* (Nov 2: every tile one height; an odd last one goes wide below the grid) */
.pl-tl{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:var(--tile);border:1px solid var(--border);min-height:104px;min-width:0}
.pl-tl.wide{grid-column:1/-1;min-height:0;margin-top:8px;flex-direction:row;align-items:center;gap:10px}
.pl-tl b{display:block;font-size:14px;line-height:1.25}
.pl-tl small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.pl-tic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chips span{font-size:12.5px;color:var(--muted);padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 4%,transparent)}

/* (E5) a chat's background, Kindlings Plus (classes fcb-): one of your backgrounds behind a chat, still, under a dark veil
   so the messages read as before; the picker is a page of your backgrounds, one size each */
.fcb-on{background:#05050A}
.fcb-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fcb-layer::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.52)}
.fcb-on>:not(.fcb-layer){position:relative;z-index:1}
.fcb-allbox{margin-top:8px;padding:10px 14px}
.fcb-allbox label{display:flex;flex-direction:column;gap:2px;min-width:0}
.fcb-allbox .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fcb-note{height:3em;line-height:1.5;overflow:hidden;margin:10px 2px 0}
.fcb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.fcb-card{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;font-weight:700;text-align:center;cursor:pointer}
.fcb-th{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:2px solid var(--border);background:var(--tile)}
.fcb-card[aria-pressed="true"] .fcb-th{border-color:var(--accent)}
.fcb-th .sc-wrap{position:absolute;inset:0}
.fcb-none{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:600}
/* (A68, Hunter's pick: the gems pill has a purple edge, docs/gems-plus-looks.html D; last in the file so each place's own
   pill colors keep everything else) */
.gm-pill.gm-gpill{border-color:color-mix(in srgb,#B58CFF 55%,transparent)!important;box-shadow:0 0 10px color-mix(in srgb,#B58CFF 22%,transparent)}
/* the shop: Gems at the top of the rail, the arrow at its foot (A68 item 13), and the whole part's list #dr-list (dr-l-) */
.dr-cat[data-dr-cat="gem"]{background:linear-gradient(180deg,rgba(183,155,255,.34),rgba(120,90,220,.28));border-color:rgba(183,155,255,.6);color:#ECE4FF}
.dr-rmore{position:sticky;bottom:0;flex:none;height:0;overflow:visible;display:block;z-index:2}
.dr-rmore i{position:absolute;left:50%;bottom:2px;width:26px;height:20px;margin-left:-13px;display:grid;place-items:center;border-radius:10px;background:rgba(12,10,16,.82);border:1px solid var(--dr-edge);color:var(--dr-ink);cursor:pointer;transition:opacity .2s}
.dr-rmore.dr-rend i{opacity:0;pointer-events:none}
button.dr-pos{width:112px;flex:none;padding:5px 8px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--dr-edge);font:inherit;font-size:12px;font-weight:800;color:var(--dr-ink);cursor:pointer}
#gm-dress>.dr-l{position:absolute;left:0;right:0;top:calc(56px + env(safe-area-inset-top,0px));bottom:0;z-index:20;display:flex;flex-direction:column;max-width:560px;margin:0 auto;border-radius:22px 22px 0 0;background:color-mix(in srgb,var(--bg) 96%,#000);border-top:1px solid var(--dr-edge);color:var(--dr-ink)}   /* (A69 item 2b: no see-through blur over the moving stage) */
#gm-dress>.dr-l[hidden]{display:none}
.dr-l-hd{flex:none;display:flex;align-items:baseline;gap:8px;padding:14px 14px 8px}
.dr-l-hd b{font-size:19px;font-weight:800}
.dr-l-n{font-size:12.5px;color:var(--dr-dim);white-space:nowrap}
.dr-l-x{align-self:center;flex:none;margin-left:auto;height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.dr-l-chips{flex:none;display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
.dr-l-chips[hidden]{display:none}
.dr-l-chip{flex:none;height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--dr-edge);background:var(--dr-glass);color:var(--dr-dim);font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.dr-l-chip.on{background:color-mix(in srgb,var(--accent) 26%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:color-mix(in srgb,var(--accent) 55%,#fff)}
.dr-l-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 14px calc(18px + env(safe-area-inset-bottom,0px))}
/* (A69 item 3, Hunter Oct 26) a group's heading, one look for the Collection (Kindlings by rarity, cosmetics by part,
   badges) and the shop's list (Yours, To buy): its name and count on a band that stays at the top while its group
   scrolls, with room above it */
.grp-h{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px -6px 10px;padding:7px 10px;border-radius:12px;background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 12%,transparent)}
.grp-h:first-child{margin-top:10px}
.grp-h b{font-size:16px;font-weight:800;color:var(--fg)}
.grp-h span{flex:none;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;color:color-mix(in srgb,var(--accent) 60%,var(--fg));background:color-mix(in srgb,var(--accent) 16%,transparent)}
.dr-l .grp-h{top:0;margin:16px 0 10px;background:color-mix(in srgb,var(--bg) 96%,#000)}
.dr-l .grp-h:first-child{margin-top:4px}
.dr-l-t.on .cb-pic{box-shadow:0 0 0 2px var(--accent),0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.dr-l-t>small.dr-l-y{color:var(--green)}
.dr-l-t>small,.dr-l-t>.dr-l-dots{height:16px;margin-top:3px;align-items:center}
.dr-l-t>.dr-l-dots{display:flex}
/* (A69 item 2b) the list's pictures hold still: a screenful of floating drawings starting at once flickered as it opened */
.dr-l .ss,.dr-l .ss *{animation:none!important}
.dr-l-t>small.dr-l-p{display:flex;align-items:center;justify-content:center;gap:2px;max-width:100%;white-space:nowrap;overflow:hidden;color:var(--gold)}
.dr-l-t>small.dr-l-p svg{flex:none;width:12px;height:12px}
.dr-l-on{position:absolute;top:6px;left:6px;z-index:4;padding:1px 7px;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:800}
.dr-l-k{overflow:hidden}
.dr-lz-head .ss{transform:scale(1.55) translateY(20%)}
.dr-lz-face .ss,.dr-lz-es .ss{transform:scale(1.8) translateY(6%)}
.dr-lz-neck .ss{transform:scale(1.6) translateY(-10%)}
.dr-l-sc{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.dr-l-egg,.dr-l-tr{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.dr-l-tr{color:var(--gold)}
@media (min-width:760px){.dr-l .cb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Wind down's first step, How was today? (A68 item 14): the five glows, small, in the step's one height; the reminder under the button */
.cm-wdin.cm-wdmoods{gap:2px;margin-top:4px}
.cm-wdmoods .cm-mood{flex:1;min-width:0;gap:1px;padding:2px 0;border-radius:10px;font-size:10px}
.cm-wdpg .cm-remr{margin-top:12px}
.cm-wdask{width:100%;padding:0 4px 2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#cm-today.cm-wdlit{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 0 22px color-mix(in srgb,var(--accent) 18%,transparent)}

/* Holiday events (B8, app.js "Holiday events", events.js; Halloween first, Hunter's picks in docs/halloween-looks.html).
   The Kindlings home's Shop button while one is on (pick E: the night-sky button, the symbol in the event's orange, an
   orange edge), the shop rail's event button, and the event's page #gm-ev (classes hv-) */
#gm-btns .gm-btn.gm-btn-ev>svg{background:radial-gradient(circle,var(--ev1),var(--ev2));box-shadow:0 0 0 1.5px var(--eve);stroke:var(--evi)}
.dr-cat.dr-ev{color:var(--evi);border-color:color-mix(in srgb,var(--eve) 70%,transparent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ev1) 85%,transparent),color-mix(in srgb,var(--ev2) 75%,transparent));box-shadow:0 0 12px color-mix(in srgb,var(--eve) 35%,transparent)}
.dr-cat.dr-ev.on{background:radial-gradient(circle at 50% 40%,var(--ev1),var(--ev2));color:var(--evi)}
.hv .jr-body{gap:10px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.hv-head{display:flex;align-items:center;gap:10px}
.hv-sym{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--ev1),var(--ev2));box-shadow:0 0 0 1.5px var(--eve),0 0 18px color-mix(in srgb,var(--eve) 35%,transparent);color:var(--evi)}
.hv-head .grow{display:flex;flex-direction:column;min-width:0}
.hv-when{font-size:13.5px;color:color-mix(in srgb,var(--eve) 45%,#fff);font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hv-egg{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--eve) 24%,transparent),rgba(12,10,16,.86) 62%);border:1px solid color-mix(in srgb,var(--eve) 50%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hv-er{display:flex;align-items:center;gap:10px;min-height:76px}
/* Get it all (Oct 28): the event's bundle for real money, above the egg; one size whether bought or not */
.hv-all{display:flex;align-items:center;gap:10px;min-height:76px;box-sizing:border-box;padding:12px;border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--eve) 30%,transparent),rgba(12,10,16,.86) 62%);border:1px solid color-mix(in srgb,var(--eve) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hv-all .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.hv-all b{font-size:16px}
.hv-all .grow>span{font-size:13px;color:var(--muted);line-height:1.3}
.hv-all-r{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.hv-all .hv-all-was{font-size:12.5px;color:var(--faint)}
.hv-eic{flex:none;display:grid;place-items:center;width:56px}
.hv-er .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.hv-er b{font-size:16px}
.hv-er .grow>span{font-size:13px;color:var(--muted)}
.hv-er .hv-left{color:color-mix(in srgb,var(--eve) 45%,#fff);font-weight:600;min-height:1.4em}
.hv-buy{flex:none;min-height:44px;padding:0 14px;white-space:nowrap}
.hv-buy:not([disabled]){background:var(--accent);color:var(--accent-ink)}
.hv-got{display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,214,140,.4)}
.hv-gp{flex:none;position:relative;width:64px;height:72px;border-radius:12px;overflow:hidden}
.hv-gp .cb-k{position:absolute;inset:0}.hv-gp .cb-k .ss{width:64px!important;max-width:none}
.hv-gp .sc-wrap{position:absolute;inset:0}
.hv-got .grow{display:flex;flex-direction:column;min-width:0}
.hv-got .grow span{font-size:13px;color:var(--muted)}
.hv-got .btn{flex:none;min-height:42px;padding:0 12px}
.hv-sl{margin:6px 4px 0;font-size:15px;color:#F4F5F7;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hv-t{background:rgba(12,10,16,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hv-note{margin:2px 4px 0;color:var(--faint);text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* the Halloween backgrounds' moving pieces (events.js): embers, wisps and bats */
.sc-hemb{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFC46B;box-shadow:0 0 10px 3px rgba(255,170,70,.7);animation:sc-fly 6s ease-in-out infinite}
.sc-hwisp{position:absolute;width:7px;height:7px;border-radius:50%;background:#B8FFD0;box-shadow:0 0 14px 5px rgba(140,255,190,.55);animation:sc-fly 7s ease-in-out infinite}
.sc-hbat{position:absolute;line-height:0;animation:sc-hbat 9s ease-in-out infinite}
@keyframes sc-hbat{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}}
.hv-t>b{display:block;white-space:normal;line-height:1.15;min-height:2.3em;font-size:12.5px;overflow:hidden}
.hv-got{min-height:90px;box-sizing:border-box}
.hv-gi{border-style:dashed;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.hv-need{text-align:center}
.hv-got{height:96px;min-height:0;overflow:hidden}
.hv-got b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.2}
.hv-got .grow span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.hv-er .hv-left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-er .grow>span:not(.hv-left){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;line-height:1.3}
/* the event's cards sit on the page's scene like the Collection's (Hunter, Oct 27: no box around them) */
.hv-t{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hv-t>b,.hv-t>small{text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* an item's own try-on page (#hv-try) */
.hvt{display:flex;flex-direction:column}
.hvt-head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;text-align:center}
.hvt-head .jr-title{margin:0}
.hvt-stage{position:relative;z-index:1;flex:1;min-height:0;display:grid;place-items:center}
.hvt-stage .ss{width:min(64vw,260px)!important;max-width:none}
.hvt-pager{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px}
.hvt-pos{min-width:64px;text-align:center;font-weight:700;color:var(--dr-ink);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hvt-who{position:relative;z-index:1;display:flex;gap:6px;overflow-x:auto;padding:10px 12px 0;min-height:46px;scrollbar-width:none}
.hvt-bar{position:relative;z-index:1;margin:8px 12px calc(14px + env(safe-area-inset-bottom,0px));background:var(--dr-glass);border-color:var(--dr-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hvt-stage.gm-ystage{width:auto;height:auto;align-self:stretch}
/* the holiday backgrounds' moving pieces (events.js, B8): drift, bob, sway, waves, shimmer, fireworks, glints, twinkles,
   flutter, snow outside a window, glows. Like every scene's, still on cards (.sc-still) and with reduced motion */
.hs-drift{animation:hs-drift 16s ease-in-out infinite alternate}@keyframes hs-drift{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
.hs-bob{animation:hs-bob 5s ease-in-out infinite}@keyframes hs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hs-sway{animation:hs-sway 6s ease-in-out infinite}@keyframes hs-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.hs-wave{animation:hs-wave 5s ease-in-out infinite alternate}@keyframes hs-wave{from{transform:translateX(0)}to{transform:translateX(-30px)}}
.hs-shim,.hs-pulse{animation:sc-pulse 2.6s ease-in-out infinite}
.hs-glint,.hs-tw{animation:sc-tw 2.2s ease-in-out infinite}
.hs-burst{transform-box:fill-box;transform-origin:center;animation:hs-burst 4s ease-out infinite}
@keyframes hs-burst{0%{transform:scale(.1);opacity:0}8%{opacity:1}45%{transform:scale(1);opacity:.9}70%{opacity:0;transform:scale(1.08)}100%{opacity:0;transform:scale(1.08)}}
.hs-trail{animation:hs-trail 4s ease-out infinite}@keyframes hs-trail{0%{stroke-dashoffset:0;opacity:1}8%{stroke-dashoffset:-330;opacity:0}100%{opacity:0}}
.hs-flut{animation:hs-flut 6s ease-in-out infinite}@keyframes hs-flut{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-10px)}50%{transform:translate(4px,-22px)}75%{transform:translate(-12px,-8px)}}
.hs-fall{animation:hs-fall 8s linear infinite}@keyframes hs-fall{0%{transform:translate(0,0)}100%{transform:translate(8px,260px)}}
/* Premium (Oct 28): its backgrounds' moving pieces (twinkles, drifting diamonds and their fire, searchlights, the
   tower's light, cars on the bridge, the light sweeping over glass and carpet), still on cards like every scene's */
.hs-ptw,.hs-pfl{transform-box:fill-box;transform-origin:center}
.hs-ptw{animation:hs-ptw 2.6s ease-in-out infinite}@keyframes hs-ptw{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
.hs-pfl{animation:hs-pfl 7s ease-in-out infinite}@keyframes hs-pfl{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hs-pfire{animation:hs-pfire 3.5s ease-in-out infinite}@keyframes hs-pfire{0%,100%{opacity:0}50%{opacity:.9}}
.hs-psp1{transform-origin:60px 0;animation:hs-psw8 7s ease-in-out infinite}.hs-psp2{transform-origin:300px 0;animation:hs-psw8 7s ease-in-out infinite reverse}
.hs-psl1{transform-origin:70px 440px;animation:hs-psw8 9s ease-in-out infinite}.hs-psl2{transform-origin:250px 440px;animation:hs-psw8 11s ease-in-out infinite reverse}
@keyframes hs-psw8{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.hs-pbl{animation:hs-pbl 2s steps(1) infinite}@keyframes hs-pbl{0%{opacity:1}50%{opacity:.15}}
.hs-pc1{animation:hs-pc1 9s linear infinite}.hs-pc2{animation:hs-pc2 11s linear infinite}
@keyframes hs-pc1{from{transform:translateX(-140px)}to{transform:translateX(370px)}}@keyframes hs-pc2{from{transform:translateX(370px)}to{transform:translateX(-260px)}}
.hs-psw{animation:hs-psw 6s ease-in-out infinite}@keyframes hs-psw{0%{transform:translateX(0)}50%,100%{transform:translateX(720px)}}
/* …its items' slow sparkles, only while worn like every effect's (the light on the gold and the diamonds' fire are SVG,
   paused off the screen and with reduced motion by spirits.js smil) */
.ss .cos[data-on] .pr-tw{transform-box:fill-box;transform-origin:center;animation:pr-tw 2.6s ease-in-out infinite}
@keyframes pr-tw{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
/* …and its page and try-on page (hv-pr, set by evVars): black lacquer and gold, the cards with a light running round
   their gold edge and a diamond "Premium" tag (Hunter, Oct 28: "much more premium than anything else … stand out") */
@property --hpa{syntax:'<angle>';inherits:false;initial-value:0deg}@keyframes hv-pr-run{to{--hpa:360deg}}
.hv-pr #hv-title,.hv-pr #hv-t-name{background:linear-gradient(#FFFFFF,#CFE6FF 45%,#8FB6E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hv-pr .hv-egg,.hv-pr .hv-all,.hv-pr .hv-t .cb-pic{position:relative;isolation:isolate;background:radial-gradient(120% 90% at 50% 0%,#2A2112,#0B0906 70%);border-color:transparent}
.hv-pr .hv-egg::before,.hv-pr .hv-all::before,.hv-pr .hv-t .cb-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:conic-gradient(from var(--hpa),#7A5512,#FFE9A0,#B9800F,#FFF7D1,#7A5512);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hv-pr-run 6s linear infinite;pointer-events:none;z-index:2;box-shadow:none}
.hv-pr .hv-t>b{background:linear-gradient(#FFF7D1,#F7CF5C 55%,#D99A26);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hv-pr .hv-er .hv-left,.hv-pr .hv-when{color:#E6D3A8}
.hv-pr .hv-buy:not([disabled]),.hv-pr .hvt-bar .dr-pay{background:linear-gradient(#FFF1B0,#F2C04A 55%,#C98A1A);color:#2A1804;box-shadow:0 0 14px rgba(247,207,92,.35)}
.hv-prt{position:absolute;top:5px;left:5px;z-index:3;display:flex;align-items:center;gap:3px;padding:1px 6px 1px 3px;border-radius:999px;background:linear-gradient(#1A1A22,#050508);border:1px solid #CFE6FF;color:#EAF4FF;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.hv-prt svg{width:10px;height:10px}
@media (prefers-reduced-motion:reduce){.hv-pr .hv-egg::before,.hv-pr .hv-all::before,.hv-pr .hv-t .cb-pic::after{animation:none}}
/* (the holiday colors, B8: each event's own, set by evVars; Halloween's when none is set) */
#gm-open-shop,.dr-cat.dr-ev,.hv{--ev1:#4A2468;--ev2:#25103A;--eve:#F28C28;--evi:#FFB15C}
/* the Christmas Day gift's page (#gm-got, B8) */
.gt-sub .xm-from{color:#F5D27A;font-weight:700;margin-top:4px}
.gt-sub .xm-nest{margin-top:10px}
.gt-xm .dr-shade{background:linear-gradient(rgba(5,10,30,.3),rgba(5,10,30,.78) 40%,rgba(5,10,30,.88))}
/* the holiday events in the Collection (B8): a part per event under the cosmetics, its symbol by its name */
.py-sl.cb-ev b{display:inline-flex;align-items:center;gap:8px;font-size:15.5px}
.cb-evs{width:16px;height:16px;padding:5px;box-sizing:content-box;border-radius:50%;flex:none}
.cb-t>small.cb-evw{color:var(--faint);font-weight:700}
.cb-t>small.cb-evw.y{color:var(--green)}
.cb-pic.cb-boff .dr-l-sc{filter:grayscale(.85) brightness(.55)}
.cb-evg .cb-t>b{display:block;white-space:normal;text-align:center;line-height:1.15;min-height:2.3em;font-size:12.5px;overflow:hidden}
/* the Holidays card at the foot of Collection › Cosmetics, and its page #gm-hd (B8) */
.hd-open{display:flex;align-items:center;gap:12px;width:100%;margin-top:18px;padding:12px 12px 12px 14px;border-radius:18px;border:1px solid var(--border);background:var(--tile);color:var(--fg);font:inherit;text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hd-syms{display:flex;flex:none}.hd-syms .cb-evs{margin-left:-8px}.hd-syms .cb-evs:first-child{margin-left:0}
.hd-open .grow{display:flex;flex-direction:column;min-width:0}.hd-open b{font-size:16px}.hd-open .grow span{font-size:12.5px;color:var(--muted)}
.hd-n{flex:none;font-weight:800;font-size:13px;color:var(--muted)}.hd-go{flex:none;font-size:22px;color:var(--muted)}
.hd-sub{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.hd .py-sl.cb-ev:first-child{margin-top:4px}
/* a holiday egg's background, hatched (B8): the scene as a rounded picture where a Kindling would be */
.hx-bg{position:relative;display:block;width:150px;height:200px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px var(--hx-e),0 10px 30px rgba(0,0,0,.5)}
.hx-ev .hx-shell{fill:var(--hx-f);fill-opacity:1;stroke:var(--hx-s)}
.hx-ev .hx-band{stroke-width:3.4}
.kind.ed-once{margin-bottom:2px}
/* (v0.5.98, Hunter: "ready button should not show up until all moves have been selected. Or be greyed out until then at
   least") Ready (and a friend game's Send) greyed out until there's a whole move to send; it stays in its place so the
   panel doesn't change size when it turns on */
#gm-tv-btns .btn:disabled,#fr-gm-btns .btn:disabled{background:color-mix(in srgb,var(--fg) 6%,transparent);border-color:transparent;color:color-mix(in srgb,var(--fg) 34%,transparent);cursor:default;filter:none}

/* The account level (A71 part 5, v0.6.14; docs/mock/level.html): the flame with its number, in its tier's color (--c),
   the ring that fills to the next level, its page (#al-page: the track of what levels bring, today's XP) and going up a
   level (#al-up). Classes al-. */
.al-fl{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:calc(var(--s)*1.12);vertical-align:middle}
.al-fl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.al-fl path{fill:var(--c);stroke:rgba(0,0,0,.35);stroke-width:.6;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 45%,transparent))}
.al-fl b::after{content:attr(data-n)}
.al-fl b{position:relative;margin-top:30%;font-size:calc(var(--s)*.4);font-weight:800;line-height:1;color:#1B0F08;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.al-fl.al-t5 path{filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.al-ring{position:absolute;pointer-events:none}
.al-rb{fill:none;stroke:color-mix(in srgb,var(--fg) 18%,transparent);stroke-width:3}
.al-ro{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.mo-av{position:relative;overflow:visible}
.al-mor{left:50%;top:50%;width:calc(100% + 12px);height:calc(100% + 12px);transform:translate(-50%,-50%)}
#sum-you .al-fl{margin:-3px 2px 0 0}
.al-mrow .al-mi{background:none}
.al-bar{position:relative;display:block;height:6px;margin:5px 0 3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.al-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#FFC27A)}
.al-num{flex:1}
.al-num>b{font-size:20px}
.al-plus{color:#FFC27A;font-size:13px;font-weight:800}
.al-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(183,155,255,.2);font-style:normal}
.al-ic svg{width:15px;height:15px}
.al-ic.al-ie{background:rgba(92,200,255,.18)}
.al-trk{overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.al-trk::-webkit-scrollbar{display:none}
.al-tin{position:relative;display:flex;width:max-content;padding:4px 0}
.al-tin::before,.al-tin em{content:"";position:absolute;left:29px;top:83px;height:4px;border-radius:4px}
.al-tin::before{right:29px;background:rgba(255,255,255,.16)}
.al-tin em{background:linear-gradient(90deg,var(--accent),#FFC27A)}
.al-n{display:flex;flex-direction:column;align-items:center;gap:6px;width:58px}
.al-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:50px;height:62px;border-radius:14px;background:var(--dr-glass);border:1px solid var(--dr-edge);font-size:10px;font-weight:800;color:var(--dr-dim)}
.al-n.al-pl .al-c{visibility:hidden}
.al-n.al-got .al-c{opacity:.5}
.al-d{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:22px;margin-top:4px;border-radius:11px;background:#2A1D16;color:var(--dr-dim);font-size:10px;font-weight:800;box-shadow:0 0 0 3px rgba(12,8,6,.9)}
.al-n.al-got .al-d{background:var(--accent);color:#1B0F08}
.al-n.al-now .al-d{background:#FFC27A;color:#1B0F08;box-shadow:0 0 0 3px rgba(12,8,6,.9),0 0 12px var(--accent)}
.al-u{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:24px;text-align:center;color:var(--dr-ink)}
.al-uf{display:grid;place-items:center;width:190px;height:170px;background:radial-gradient(circle,rgba(255,170,90,.35),transparent 65%)}
#al-up:not([hidden]) .al-uf .al-fl{animation:al-pop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes al-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.al-ut{margin:6px 0 0;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff}
.al-us{margin:0;color:var(--dr-dim)}
.al-urw{gap:10px;padding:12px 18px;margin-top:10px}
.al-urw .al-ic{width:34px;height:34px}
.al-urw .al-ic svg{width:20px;height:20px}
.al-unx{min-height:1.3em}
.al-uk{position:relative;width:150px;height:165px}
.al-uk .ss{position:absolute;inset:0;width:100%!important;height:100%}
.al-ucol{width:100%;height:50px;margin-top:6px}
.al-usee{border:0;background:none;color:var(--dr-dim);font:inherit;font-size:13px;font-weight:700;padding:8px;cursor:pointer}
@media (prefers-reduced-motion:reduce){#al-up:not([hidden]) .al-uf .al-fl{animation:none}}
.al-rw{position:relative;display:inline-flex;flex:none;vertical-align:middle;border-radius:50%}
/* the level on a picture (pick C): the ring, its flames, the coin; the picture's own edge gives way to it */
.al-rim{position:absolute;left:50%;top:50%;width:140%;height:140%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:1}
.al-rw.al-on>.fr-av{border-color:transparent;box-shadow:none}
.al-rfs{fill:var(--c);filter:drop-shadow(0 0 var(--g) color-mix(in srgb,var(--c) 55%,transparent))}
.al-rr{fill:none;stroke:var(--c);filter:drop-shadow(0 0 var(--g) color-mix(in srgb,var(--c) 55%,transparent))}
.al-rc{fill:var(--c);stroke:rgba(0,0,0,.5)}
.al-rn{position:absolute;left:50%;z-index:2;transform:translate(-50%,-50%);line-height:1;color:#1B0F08;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;pointer-events:none}
.al-rn::after{content:attr(data-n)}
.al-rbig .al-rf{transform-box:fill-box;transform-origin:50% 100%;animation:al-rf 1.6s ease-in-out infinite}
@keyframes al-rf{50%{transform:scale(1.06,.82)}}
@media (prefers-reduced-motion:reduce){.al-rbig .al-rf{animation:none}}
.al-rwb{margin-bottom:12px}#fr-p-rw[role=button]{cursor:pointer}
.al-rwb:focus-visible{outline:2px solid var(--accent);outline-offset:14px}
/* the things only levels give (level.js): the crown's flames flicker, the wings glow, only while worn and showing */
.ss .cos[data-on] .lvi-flk path{transform-box:fill-box;transform-origin:50% 100%;animation:sc-flick 1.6s ease-in-out infinite}
.ss .cos[data-on] .lvi-flk path:nth-child(4n){animation-delay:-.5s}.ss .cos[data-on] .lvi-flk path:nth-child(3n){animation-delay:-1s}
.ss .cos[data-on] .lvi-wing{animation:lvi-glow 2.6s ease-in-out infinite}
@keyframes lvi-glow{50%{opacity:.8}}
.al-ic.al-iit{background:rgba(255,159,110,.2);color:#FFB98F}
.al-urw{flex-wrap:wrap;justify-content:center}
.al-by{margin-right:5px}
#fr-p-name .al-fl,#fr-c-name .al-fl{margin-top:-4px}
.np.al-pg,.np.al-up{z-index:42}   /* (over the sheet it can open from: More › You, a profile) */

/* (A72 item 6) buying shows what happened: the price dropping off the wallet's pill, "+100 XP" by a Kindling's bar, and
   "Level up!" over dress-up's stage; each a finite animation, removed when it ends */
.gm-pill{position:relative}
.wl-dn{position:absolute;top:calc(100% + 2px);right:4px;z-index:5;font-style:normal;font-size:12px;font-weight:800;color:#FF8A7A;text-shadow:0 1px 3px rgba(0,0,0,.75);white-space:nowrap;pointer-events:none;animation:wl-dn 1.3s ease-out forwards}
@keyframes wl-dn{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.gm-xp-txt.xp-hide{visibility:hidden}.xp-up{position:absolute;font-style:normal;font-size:12px;font-weight:800;line-height:inherit;color:var(--gold-text);white-space:nowrap;pointer-events:none}
.dr-lvup{position:absolute;left:50%;top:30%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:86%;padding:10px 18px;border-radius:16px;background:rgba(14,10,8,.82);border:1px solid var(--gold-line);box-shadow:0 0 28px color-mix(in srgb,var(--gold) 45%,transparent);text-align:center;pointer-events:none;transform:translate(-50%,-50%);animation:dr-lvup 2.6s ease-out forwards}
.dr-lvup b{font-size:22px;font-weight:900;color:var(--gold-text);letter-spacing:.01em}.dr-lvup span{font-size:13px;color:#F4EDE6}
@keyframes dr-lvup{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.wl-dn{animation:wl-fade 1.3s linear forwards}.dr-lvup{animation:wl-fade 2.6s linear forwards}}
@keyframes wl-fade{0%,75%{opacity:1}100%{opacity:0}}

/* (A72 item 7) NEW where a new thing opens: on dress-up's stage (where the stage pill goes), its list's cards (on the
   right, the "On" tag keeps the left) and the Collection's icons */
.dr-try.dr-nu{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 14px color-mix(in srgb,var(--gold) 50%,transparent)}
.dr-try.dr-nu[hidden]{display:none}
.dr-try.dr-nuon{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 14px color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold-text)}
.dr-l-t .nu-new{left:auto;right:6px}
/* (A72 item 9; Hunter picked D3 of docs/mock/battle-home3.html, Oct 30) Battle is the Kindlings tab's screen: the title one
   word; Trials | Raids | Towers | Clash as tabs over one card (one fixed size), the battle panel and the six buttons one
   glass sheet along the bottom; the world one round button at the arena's edge; the Glow and "Back!" in the open space */
.hm-top .gm-head h1.bt-tt{font-size:min(26px,calc(100cqi / 4.1));font-weight:800;letter-spacing:-.02em;color:#F4F5F7;white-space:nowrap}
#v-spirits>.gm-btns{z-index:7;border-top-left-radius:0;border-top-right-radius:0;border-top-color:rgba(255,255,255,.08)}
.bt-view{padding-bottom:var(--bt-sb,calc(var(--dock-h) + 98px))}
.bt-low{gap:8px;padding:8px;border-radius:24px 24px 0 0;background:rgba(12,10,16,.72);box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset -1px 0 0 rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:640px}   /* (as wide as the six buttons under it, which stop at 640px on a tablet) */
.bt-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.bt-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0;border:0;border-radius:12px;background:none;color:#C9BDB6;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.bt-tab.on{background:color-mix(in srgb,var(--accent) 26%,transparent);color:#FFD3B8}
.bt-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bt-tab-soon{color:#D9C8FF}
.bt-tab-soon::after{content:"Soon";position:absolute;top:-6px;right:2px;padding:0 5px;border-radius:999px;background:#6E4FC9;color:#fff;font-size:8.5px;line-height:14px}
.bt-card{height:88px}
.bt-card>[hidden]{display:none!important}
.bt-card .bt-tri{height:88px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent)}
.bt-card .bt-tws{height:88px}.bt-card .bt-tw{height:88px}
.bt-tri small{display:flex;align-items:center;gap:6px;min-width:0}
#bt-tri-s{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bt-lb{flex:none;display:inline-flex;align-items:center;gap:4px;color:#FFD3B8;font-weight:700;cursor:pointer}
.bt-lb::before{content:"·";margin-right:2px;color:#C9BDB6}
.bt-lb:focus-visible{outline:2px solid var(--accent);border-radius:6px}
.bt-rc{height:88px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 15px;border-radius:20px;color:#F4F5F7;background:linear-gradient(135deg,rgba(132,92,255,.4),#120A12 80%);box-shadow:inset 0 0 0 1.5px rgba(181,140,255,.6)}
.bt-rc .bt-k{display:flex;align-items:center;gap:6px;color:#D9C8FF}
.bt-rc b{font-size:20px;font-weight:800;line-height:1.1}.bt-rc small{font-size:12px;color:#C9BDB6}
.bt-soon{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(181,140,255,.22);color:#E6DAFF;font-size:10.5px;font-weight:800;letter-spacing:0;text-transform:none}
.bt-cl{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#140A07),#140A07 80%)}
.bt-wb{position:absolute;right:4px;top:-50px;z-index:6;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);color:#F4F5F7;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bt-wb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bt-view .hm-motes{position:absolute;z-index:5;left:6%;right:6%;top:var(--bt-top,124px);bottom:calc(var(--bt-lo,300px) + 8px);pointer-events:none}
.bt-view .hm-glow{z-index:6;top:calc(var(--bt-top,124px) + 6px)}
.bt-view .hm-glow::after{display:none}
/* (Hunter, Nov 4: "Tap to return … and glow … overlap") both showing: one row, Back on the left and the Glow on the right,
   with shorter words (btPair in app.js); from 760px wide there is room for both as they are */
@media (max-width:759px){
  .bt-view .hm-glow.bt-pair{left:auto;right:12px;transform:none;max-width:50%;overflow:hidden}
  .bt-view .hm-glow.bt-pair .gm-gw-tap,.bt-back.bt-pair .bt-bkl{display:none}
  .bt-back.bt-pair{max-width:calc(50% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.bt-back{position:absolute;z-index:6;left:12px;top:calc(var(--bt-top,124px) + 6px);padding:6px 12px;border:0;border-radius:999px;background:var(--gold);color:#1A1408;font:inherit;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.4);cursor:pointer}
.bt-back:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cb-rnb{position:relative}.cb-rnb .bt-rnn{position:absolute;top:-4px;right:-6px}
/* (A72 item 9; Hunter: "the home becomes the Collection", look K of docs/mock/battle-home.html) the Collection's Kindlings
   part is one screen: the old home's scene (#gm-home moved here: its Kindlings, the picture button) between the tabs and
   the totals along the bottom (#cb-foot, with All N for the list page #cb-all) */
#gm-book.cb-kin-on{overflow:hidden}
#gm-book .cb-kp{position:fixed;z-index:1;left:0;right:0;top:var(--cb-top,240px);bottom:0;display:flex;flex-direction:column;gap:8px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#gm-book .cb-kp[hidden]{display:none}
#gm-book #gm-home{flex:1 1 0;width:auto;min-height:0;height:auto;transform:none;margin:0;border:0;border-radius:0;background:none;overflow:visible;--htop:6px;--hcap:10px;--hmax:128px;--hname:44px}
#gm-book #gm-home .gm-bgl,#gm-book #gm-home .gm-cap{display:none}
#gm-book #gm-home.cb-friend #gm-bgbtn{display:none}
#gm-book #gm-home .gm-bgbtn{right:14px;bottom:6px}
.cb-foot{flex:none;display:flex;align-items:center;gap:12px;margin:0 10px;padding:10px 12px;border-radius:20px;background:rgba(12,10,16,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cb-foot .cb-ring{flex:none}
.cb-foot .cb-sts{flex:1;min-width:0}
.cb-foot .cb-st.cb-rdm{display:none}
.cb-all{flex:none;height:40px;padding:0 14px;border:0;border-radius:14px;background:color-mix(in srgb,var(--accent) 26%,transparent);color:#FFD3B8;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}
.cb-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-foot .cb-ring{width:58px;height:58px}.cb-foot .cb-ring b{font-size:14px}
.cb-foot .cb-sts{gap:5px}
.cb-foot .cb-st{grid-template-columns:auto 1fr auto;align-items:center;gap:0 8px;font-size:11.5px;white-space:nowrap;color:#C9BDB6}
.cb-foot .cb-st b{order:3;font-size:11.5px;color:#F4F5F7}.cb-foot .cb-st .cb-bar{order:2;grid-column:auto}
.gm-mate .gm-mnew{top:-4px;left:50%;transform:translateX(-50%);z-index:3}
/* (A72 item 9) the Collection covered by another full page (dress-up, its All page …): its scene isn't drawn (the old home
   on the tab got the same, A68), so its 25 Kindlings don't keep their layers under the page */
#gm-book.np-under #gm-b-kin{content-visibility:hidden}

/* ---- Raids (A72 item 18, stage 1; Hunter's picks of docs/mock/raid-screens1.html, look A): the Raids tab's card, the
   five raids (#rd-page) and a raid's page (#rd-raid); dark in every theme, like the battle pages ---- */
.bt-rd{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:88px;padding:12px 12px 12px 15px;border:0;border-radius:20px;overflow:hidden;text-align:left;font:inherit;color:#F4F5F7;cursor:pointer;background:#0E0A14;box-shadow:inset 0 0 0 1.5px #F5C451}
.bt-rd canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bt-rd::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,14,.9),rgba(10,6,14,.55) 60%,rgba(10,6,14,.2));pointer-events:none}
.bt-rd-t{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bt-rd .bt-k{color:#FFE08A}
.bt-rd b{font-size:20px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-rd small{font-size:12px;color:#D8CFE0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-rd .bt-go{position:relative;z-index:1}
.np.rd{background:#0E0A14;color:#F4F1F6}
.np.rd>.np-bar{background:transparent}
.rd-h{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.rd-sub{margin:2px 0 0;font-size:12.5px;color:#BDB3C6}
.rd-list{display:flex;flex-direction:column;gap:9px;margin-top:12px;padding-bottom:16px}
.rd-card{position:relative;flex:none;height:118px;padding:0;border:0;border-radius:20px;overflow:hidden;text-align:left;font:inherit;color:#F4F1F6;cursor:pointer;background:#07060C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.rd-card.rd-hard{box-shadow:inset 0 0 0 2px #F5C451,0 0 16px rgba(245,196,81,.35)}
.rd-card canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rd-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,14,.88) 0,rgba(8,5,14,.55) 55%,rgba(8,5,14,.1) 100%);pointer-events:none}
.rd-ct{position:absolute;left:14px;top:12px;right:110px;z-index:2;display:flex;flex-direction:column;gap:3px}
.rd-nm{font-size:17px;font-weight:800;line-height:1.15}
.rd-bs{font-size:12px;color:#D8CFE0}
.rd-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.rd-chip{padding:2px 8px;border-radius:99px;font-size:11px;font-weight:800;background:rgba(255,255,255,.14);color:#F4F1F6;white-space:nowrap}
.rd-chip.rd-hd{background:#F5C451;color:#22140A}
.rd-bo{position:absolute;right:-6px;bottom:-14px;width:118px;height:118px;z-index:2;pointer-events:none}
/* the Spirit look: a Kindling made of glowing light (its element's glow, --rgb) */
.rd-sp .ss{filter:brightness(1.35) saturate(1.7) drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px rgb(var(--rgb))) drop-shadow(0 0 28px rgb(var(--rgb) / .8));opacity:.92}
.rd-one>.np-bar{position:absolute;left:0;right:0;top:0;z-index:5}
.rd-one .gm-back{padding:7px 12px 7px 9px;border-radius:999px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#F4F1F6}
.rd-hero{position:absolute;left:0;right:0;top:0;height:330px;overflow:hidden}
.rd-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rd-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,20,.25),rgba(14,10,20,0) 40%,#0E0A14 98%);pointer-events:none}
.rd-hb{position:absolute;left:50%;top:40px;width:240px;height:240px;transform:translateX(-50%);z-index:2}
.rd-body.np-body{position:relative;z-index:3;margin-top:286px;display:flex;flex-direction:column;gap:11px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}   /* (Nov 2, the bars audit: End this raid sat under the phone’s bottom bar) */
.rd-t1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.rd-one .rd-sub{min-height:2.7em;line-height:1.35}   /* (two lines' room: Normal and Hard say different things, and nothing moves)*/
.rd-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08)}
.rd-seg button{height:34px;border:0;border-radius:10px;font:inherit;font-size:13.5px;font-weight:800;color:#BDB3C6;background:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-seg button.on{background:rgba(255,140,80,.26);color:#FFD3B8}
.rd-seg button.on.rd-h{background:rgba(245,196,81,.28);color:#FFE08A}
.rd-seg button:disabled{opacity:.55;cursor:default}
.rd-seg.rd-seg3{grid-template-columns:1fr 1fr 1.25fr}   /* (Nov 2) Normal | Hard | Mythic */
.rd-seg button.on.rd-hm{background:rgba(255,100,90,.28);color:#FFC2B8}
.rd-seg3 button{padding:0 6px;font-size:13px}
.rd-path{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:16px;background:rgba(255,255,255,.06)}
.rd-st{display:flex;flex-direction:column;align-items:center;gap:3px;width:34px;font-size:9.5px;font-weight:700;color:#BDB3C6}
.rd-st i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);font-style:normal;font-size:14px}
.rd-st.rd-b i{background:rgba(255,120,120,.22)}.rd-st.rd-p i{background:rgba(150,140,255,.25)}.rd-st.rd-k i{width:34px;height:34px;background:rgba(245,196,81,.3);font-size:17px}
.rd-ln{flex:1;height:2px;margin-bottom:14px;background:rgba(255,255,255,.14)}
.rd-trick{margin:0;font-size:12.5px;line-height:1.4;color:#D8CFE0;min-height:2.8em}
.rd-trick b{color:#F4F1F6}
.rd-rw{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);font-size:12.5px;line-height:1.35;color:#D8CFE0;min-height:70px}
.rd-rw b{color:#F4F1F6}
.rd-rk{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.08);font-size:24px}
.rd-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-go{height:50px;padding:0 8px;font-size:14px;font-weight:800;white-space:nowrap}

#gm-mv-note:has(.gm-mv-nt){display:grid}.gm-mv-nt{grid-area:1/1}.gm-mv-nt:not(.on){visibility:hidden}   /* (the Moves page's note keeps the longer words' room: picking moves never moves Done) */

.fgc-u.fgc-out{visibility:hidden;pointer-events:none}
/* Raids, stage 2: the lobby (your two and your Kindling's two, your Kindlings to pick from, the picked one's elements),
   the path between fights (done ✓, now), your four with the health they carry, and the boss arriving */
.rd-four{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-grp{display:flex;flex-direction:column;gap:5px;min-width:0}
.rd-gl{margin:0;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#BDB3C6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-gr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rd-kc{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;height:118px;padding:6px 4px 8px;border:0;border-radius:14px;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.07);cursor:pointer}
.rd-kc.on{background:rgba(255,140,80,.22);box-shadow:inset 0 0 0 2px rgba(255,160,100,.85)}
.rd-kc.rd-ko{opacity:.45}
.rd-kc.rd-kc0{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);color:#9E93A8}
.rd-kc.rd-kc0.on{box-shadow:inset 0 0 0 2px rgba(255,160,100,.85);color:#FFD3B8}
.rd-ka0{display:grid;place-items:center;font-size:26px;font-weight:300}
.rd-ka{display:block;width:58px;height:54px;flex:none}
.rd-kc .fgc-dot{position:absolute;top:6px;left:6px}
.rd-kn{display:block;max-width:100%;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-kl{font-size:10.5px;color:#BDB3C6;white-space:nowrap}
.rd-hp{display:block;width:84%;height:5px;margin-top:4px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.rd-hp b{display:block;height:100%;border-radius:9px;background:#6FD08C}
.rd-hp.rd-hplo b{background:#F2A23C}.rd-hp.rd-hp0 b{width:0}
.rd-elr{display:flex;gap:6px;align-items:center;justify-content:center;height:34px}
.rd-el{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.07);cursor:pointer}
.rd-el.on{box-shadow:inset 0 0 0 2px rgba(255,160,100,.9);background:rgba(255,140,80,.2)}
.rd-eln{font-size:12px;color:#BDB3C6}
.rd-pks{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;max-height:212px;overflow-y:auto;padding:2px;border-radius:14px}
.rd-pk{display:flex;flex-direction:column;align-items:center;height:100px;padding:5px 2px;border:0;border-radius:12px;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.06);cursor:pointer;min-width:0}
.rd-pk.used{opacity:.5}.rd-pk.on{opacity:1;box-shadow:inset 0 0 0 2px rgba(255,160,100,.85)}
.rd-pka{display:block;width:52px;height:50px;flex:none}
.rd-pkn{font-size:11.5px;font-weight:800;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-pkl{font-size:10.5px;color:#BDB3C6}
/* (A72 item 23p, Hunter's round 4 of docs/mock/raid23d.js) a raid's lobby is the line-up: the world fills the page, your
   four stand across it (labelled like the Battle screen) and the shelf under them keeps one height in every state */
#rd-raid.rd-lu{--lu-sh:calc(376px + env(safe-area-inset-bottom,0px));overflow:hidden}
#rd-raid.rd-lu .rd-hero{bottom:0;height:auto}
#rd-raid.rd-lu .rd-hero::after{background:linear-gradient(180deg,rgba(14,10,20,.3),rgba(14,10,20,0) 30%,rgba(14,10,20,.55) 70%,#0E0A14 100%)}
#rd-raid.rd-lu .rd-hb{display:none}
#rd-raid.rd-lu .rd-body.np-body{position:absolute;inset:0;max-width:none;margin:0;padding:0;display:block;overflow:hidden}
.lu-tt{position:absolute;left:0;right:0;top:calc(52px + env(safe-area-inset-top,0px));z-index:2;text-align:center;padding:0 16px;text-shadow:0 1px 4px #000}
.lu-tt .rd-t1{font-size:18px}.lu-tt .rd-sub{min-height:0;font-size:11.5px;color:#E2D8EA}
.lu-line{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:calc(var(--lu-sh) + 6px);width:100%;max-width:520px;z-index:2}
.lu-sp{position:absolute;left:calc(16px + (var(--i) + .5) * (100% - 32px) / 4);bottom:54px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:25%;z-index:calc(10 - var(--i));pointer-events:none}
.lu-sp>button{pointer-events:auto}
.lu-sp:nth-child(even){bottom:34px}
.lu-who{margin-bottom:3px;padding:1px 8px;border-radius:99px;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:rgba(143,211,255,.25);color:#CFEAFF}
.lu-nm{display:flex;align-items:center;gap:4px;max-width:100%;font-size:11px;font-weight:800;color:#FBF4F0;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 6px #000;margin-bottom:2px}
.lu-nm .role-ic{width:15px;height:15px;flex:none}
.lu-k{position:relative;display:block;width:84px;height:92px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.lu-a{position:absolute;inset:0;display:block}
.lu-plus{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:300;color:#9A8FA6;background:rgba(255,255,255,.06)}
.lu-ring{position:absolute;left:50%;bottom:8px;width:92px;height:26px;margin-left:-46px;border-radius:50%;z-index:-1;box-shadow:0 0 0 2px rgba(255,255,255,.22);background:radial-gradient(closest-side,rgba(255,255,255,.1),transparent)}
.lu-sp.on .lu-ring{box-shadow:0 0 0 3px #FFD66B,0 0 18px rgba(255,214,107,.6)}
.lu-lv{margin-top:2px;font-size:12px;font-weight:800;color:#FBF4F0;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 6px #000}
.lu-pen{position:absolute;right:calc(50% - 50px);bottom:28px;z-index:2;width:26px;height:26px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(14,9,7,.88);box-shadow:inset 0 0 0 1.5px var(--accent);color:#F4F5F7;cursor:pointer}
.lu-pen.lu-dot::after{content:'';position:absolute;right:-2px;top:-2px;width:8px;height:8px;border-radius:50%;background:#FFD66B;box-shadow:0 0 0 2px #0E0A14}
.lu-shelf{position:absolute;bottom:0;left:max(0px,calc(50% - 290px));right:max(0px,calc(50% - 290px));height:var(--lu-sh);z-index:3;display:flex;flex-direction:column;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:rgba(14,10,20,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.lu-hd{flex:none;display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:8px}
.lu-hd>b{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-hd>small{margin-left:auto;font-size:11px;font-weight:800;color:#BDB3C6;white-space:nowrap}
.lu-best,.lu-sw{margin-left:auto;flex:none;height:30px;padding:0 12px;border:0;border-radius:99px;font:inherit;font-size:12px;font-weight:900;cursor:pointer;background:color-mix(in srgb,var(--accent) 24%,transparent);color:color-mix(in srgb,var(--accent) 70%,#fff)}
.lu-bk{flex:none;height:30px;padding:0 10px 0 7px;border:0;border-radius:99px;font:inherit;font-size:12px;font-weight:900;color:#F4F1F6;background:rgba(255,255,255,.08);cursor:pointer;white-space:nowrap}
.lu-lk{margin-left:auto;flex:none;padding:4px 2px;border:0;background:none;font:inherit;font-size:12px;font-weight:800;color:#D8CFE0;cursor:pointer}
.lu-tag{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.09);font-size:11px;font-weight:800;white-space:nowrap}.lu-tag .role-ic{width:13px;height:13px}
.lu-sb{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.rd-pks.lu-grid{grid-template-columns:repeat(4,1fr);gap:7px;max-height:none;overflow:visible;padding:0}
.rd-pk.lu-c{position:relative;height:92px;justify-content:flex-end;padding:0 2px 4px;border-radius:15px}
.lu-c .rd-pka{position:absolute;top:0;left:50%;width:60px;height:64px;transform:translateX(-50%)}
.lu-c.on{box-shadow:inset 0 0 0 2px #FFD66B}.lu-c.used{opacity:.4}
.lu-ri{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:6px;background:rgba(0,0,0,.45);display:grid;place-items:center}.lu-ri .role-ic{width:11px;height:11px}
.lu-up{position:absolute;top:4px;right:6px;font-size:10px;font-weight:900;color:#FFD66B}
.lu-go{flex:none;margin-top:10px;width:100%;background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;box-shadow:0 6px 22px rgba(245,196,81,.3)}
.lu-go:disabled{background:rgba(255,214,107,.22);color:rgba(42,29,16,.75);box-shadow:none}
.lu-els{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin-bottom:10px}
.rd-el.lu-el{width:auto;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;font:inherit;font-size:12px;font-weight:900;color:#F4F1F6;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rd-el.lu-el.on{background:rgba(255,214,107,.13);box-shadow:inset 0 0 0 2px #FFD66B}
.lu-el i{font-style:normal;font-size:10.5px}.lu-el .lu-g{color:#FFD66B}.lu-el .lu-b{color:#8A7F96}
.lu-lb{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 6px;font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#BDB3C6}
.lu-lb small{letter-spacing:0;text-transform:none;font-weight:700;font-size:10.5px}
.lu-mvs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.lu-mv{position:relative;height:74px;padding:8px 8px 6px;border:0;border-radius:14px;text-align:left;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;gap:3px;overflow:hidden;cursor:pointer}
.lu-mv:disabled{cursor:default;opacity:1}
.lu-mv b{font-size:12px;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-mv small{font-size:10px;line-height:1.25;color:#C9BFD4;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lu-mc{position:absolute;right:7px;bottom:5px;font-size:8px;letter-spacing:1px;color:#8FD3FF}
.lu-rns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lu-rn{height:52px;display:flex;align-items:center;gap:8px;padding:0 9px;border:0;border-radius:14px;text-align:left;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;min-width:0}
.lu-rn b{display:block;font-size:12px;font-weight:900;white-space:nowrap}.lu-rn small{display:block;font-size:10px;color:#C9BFD4;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-rn>span{min-width:0}.lu-rn svg{flex:none}
.lu-rn.lu-rne{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.lu-rn:disabled{cursor:default}
.lu-rnp{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.3);display:grid;place-items:center;font-size:18px;color:#BDB3C6}
.lu-list{display:flex;flex-direction:column;gap:5px}
.lu-row{position:relative;min-height:46px;display:flex;align-items:center;gap:9px;padding:6px 10px;border:0;border-radius:13px;text-align:left;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);cursor:pointer}
.lu-rt{flex:1;min-width:0}.lu-rt b{font-size:12.5px;font-weight:900}.lu-rt b i{font-style:normal;color:#FFE7A6;font-weight:800}.lu-rt small{display:block;font-size:10.5px;color:#C9BFD4;font-weight:700;line-height:1.25}
.lu-rc{flex:none;font-size:9px;letter-spacing:1px;color:#8FD3FF}
.lu-row.lock{opacity:.4;background:rgba(255,255,255,.03);cursor:default}.lu-row.lock .lu-rc{color:#BDB3C6;letter-spacing:0;font-size:10.5px;font-weight:800}
.lu-row.cur{box-shadow:inset 0 0 0 2px #FFD66B;background:rgba(255,214,107,.1)}
.lu-row svg{flex:none}
.lu-arm{flex:none;display:flex;flex-direction:column;align-items:center;padding:5px 12px;border-radius:11px;background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;font-size:13px;font-weight:900;line-height:1.15}
.lu-arm small{font-size:9.5px;font-weight:800;color:#5A4220}
.lu-note{margin:8px 0 0;font-size:10.5px;color:#9A8FA6;font-weight:700;text-align:center}
/* (23p, stage 2) a raid with a friend's lobby: the same line-up in a block over the raid's world, then the shelf (one
   height; Ready is the game's own button under it); your friend's two in pink with an eye */
.rdf.rdf-lu{padding:44px 0 0;gap:0;background:none}
.lu-fw{position:relative;height:300px;border-radius:18px;overflow:hidden}
.lu-fwc{position:absolute;inset:0;width:100%;height:100%;display:block}
.lu-fw::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,20,.2),rgba(14,10,20,0) 35%,rgba(14,10,20,.5));pointer-events:none}
.lu-fw .lu-tt{top:10px}
.lu-fw .lu-line{bottom:0}
.lu-fw .lu-sp{bottom:36px}.lu-fw .lu-sp:nth-child(even){bottom:18px}
.lu-shelf.lu-flow{position:relative;left:auto;right:auto;bottom:auto;height:318px;margin-top:-16px;border-radius:24px;padding-bottom:12px}
.lu-who.lu-wf{background:rgba(255,156,203,.22);color:#FFD8EA}.lu-who.lu-wok{background:rgba(110,220,150,.28);color:#C8F7DA}
.lu-sp.lu-f.on .lu-ring{box-shadow:0 0 0 3px #FF9CCB,0 0 18px rgba(255,156,203,.55)}
.lu-pen.lu-eye{box-shadow:inset 0 0 0 1.5px #FF9CCB}
.lu-ro{margin-left:auto;font-size:11px;font-weight:800;color:#FFC6E0;white-space:nowrap}
.lu-k:disabled{cursor:default}
.lu-a.fgc-art,.lu-c .rd-pka.fgc-art{display:block;border-radius:0;background:none;overflow:visible}   /* (no game-card box behind them) */
.rd-go2{height:50px;font-size:14.5px;font-weight:800;grid-column:1/-1}
.rd-rowc{grid-template-columns:1fr}
.rd-st.rd-done i{background:rgba(111,208,140,.3);color:#BDF5CC}
.rd-st.rd-now i{box-shadow:0 0 0 2px #FFB27A,0 0 12px rgba(255,170,110,.6)}.rd-st.rd-now{color:#FFD3B8}
.rd-next{margin:0;font-size:13px;line-height:1.4;color:#D8CFE0;min-height:4.2em}
.rd-next b{color:#F4F1F6}.rd-won b{color:#FFE08A}.rd-lost b{color:#FFB0A0}
.rd-nt{margin:0;font-size:12px;color:#BDB3C6}
.rd-quit{justify-self:center;padding:8px 12px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:#BDB3C6;cursor:pointer}
.rd-quit.rd-qarm{color:#FFB0A0}
.rd-arr{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:rgba(4,2,10,.86);cursor:pointer}
.rd-arr-b{display:block;width:260px;height:260px}
.rd-arr-tx{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:320px;color:#D8CFE0;font-size:13.5px;line-height:1.4}
.rd-arr-tx b{font-size:26px;font-weight:800;letter-spacing:-.01em;color:#FFF}
.rd-arr-tx small{margin-top:6px;font-size:11px;color:#9E93A8}
.rd-arr-go{animation:rd-arr-in .45s ease-out both}
.rd-arr-go .rd-arr-b{animation:rd-arr-form 1.6s ease-out both}
.rd-arr-go .rd-arr-tx{animation:rd-arr-tx .6s 1.1s ease-out both}
/* (A72 item 23e, Hunter's pick A) the boss rising: its world zooms in out of the dark, light and a ripple where it rises,
   black bars, the raid's name, then the boss's name slams in and its trick (about 4 s; a tap skips; still with reduced
   motion it isn't shown at all) */
.rd-arr{overflow:hidden;background:#05040A}
.rd-arr-w{position:absolute;inset:0;width:100%;height:100%;display:block}
.rd-arr-gl{position:absolute;left:50%;top:44%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--rgb,90 200 255) / .55),transparent);pointer-events:none}
.rd-arr-rp{position:absolute;left:50%;top:62%;width:300px;height:70px;margin-left:-150px;border-radius:50%;box-shadow:0 0 0 2px rgb(var(--rgb,150 230 255) / .7);pointer-events:none;opacity:0}
.rd-arr-b{position:relative;z-index:2}
.rd-arr-bar{position:absolute;left:0;right:0;height:72px;background:#000;z-index:3}.rd-arr-bt{top:0}.rd-arr-bb{bottom:0}
.rd-arr-tx{position:relative;z-index:4}
.rd-arr-k{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--rgb,155 231 255))}
.rd-arr-tx b{font-size:32px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 22px rgb(var(--rgb,79 184 255)),0 3px 0 rgba(0,0,0,.5)}
.rd-arr-sk{position:absolute;right:14px;bottom:86px;z-index:5;padding:7px 13px;border-radius:99px;background:rgba(0,0,0,.5);font-size:12px;font-weight:800;color:#E8E2EE;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rd-arr-go .rd-arr-w{animation:rd-arr-zoom 4.2s ease-out both}
.rd-arr-go .rd-arr-gl{animation:rd-arr-pulse 2s ease-in-out .6s both infinite}
.rd-arr-go .rd-arr-rp{animation:rd-arr-rip 1.6s ease-out .5s infinite}
.rd-arr-go .rd-arr-b{animation:rd-arr-rise 2.4s cubic-bezier(.2,.8,.2,1) .5s both}
.rd-arr-go .rd-arr-bar{animation:rd-arr-barin .6s ease-out both}
.rd-arr-go .rd-arr-k{animation:rd-arr-in .5s ease-out 2.2s both}
.rd-arr-go .rd-arr-tx b{animation:rd-arr-slam .45s cubic-bezier(.2,1.6,.4,1) 2.5s both}
.rd-arr-go .rd-arr-tx span{animation:rd-arr-in .5s ease-out 3s both}
.rd-arr-go .rd-arr-tx{animation:none}
@keyframes rd-arr-zoom{0%{transform:scale(1.35);filter:brightness(.3)}40%{filter:brightness(.55)}100%{transform:scale(1.05);filter:brightness(.7)}}
@keyframes rd-arr-pulse{0%{transform:scale(.4);opacity:0}50%{opacity:1}100%{transform:scale(1.1);opacity:.5}}
@keyframes rd-arr-rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes rd-arr-rise{0%{transform:translateY(240px) scale(.7);opacity:0;filter:brightness(3) blur(6px)}60%{opacity:1;filter:brightness(1.5) blur(0)}100%{transform:none;filter:none}}
@keyframes rd-arr-barin{from{height:0}}
@keyframes rd-arr-in{from{opacity:0;transform:translateY(8px)}}
@keyframes rd-arr-slam{from{opacity:0;transform:scale(2.4)}}
/* (A72 item 23g, Hunter's pick A without Results) Raid cleared! over the raid's world: confetti, the banner, your four
   (the MVP marked), the rounds, time and MVP, then the chest */
.rdw{background:#0E0A14;color:#F4F1F6;overflow:hidden}
.rdw-w{position:absolute;inset:0;width:100%;height:100%;display:block}
.rdw-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,14,.2),rgba(8,5,14,.55) 60%,#0E0A14);pointer-events:none}
.rdw-cf{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#FFD66B 0 2px,transparent 3px) 0 0/44px 52px,radial-gradient(circle,#FF9CCB 0 2px,transparent 3px) 20px 26px/52px 46px,radial-gradient(circle,#8FD3FF 0 2px,transparent 3px) 10px 40px/38px 60px;-webkit-mask:linear-gradient(#000 0,#000 45%,transparent 70%);mask:linear-gradient(#000 0,#000 45%,transparent 70%);opacity:.8;animation:rdw-fall 6s linear infinite}
@keyframes rdw-fall{to{background-position:0 312px,20px 302px,10px 400px}}
.rdw-body{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100%;padding:calc(56px + env(safe-area-inset-top,0px)) 0 0}
.rdw-ban{text-align:center;animation:rdw-in .5s ease-out both}
.rdw-ban small{display:block;font-size:12px;font-weight:900;letter-spacing:.3em;color:#FFE08A;text-transform:uppercase}
.rdw-ban b{display:block;margin-top:4px;font-size:40px;font-weight:900;line-height:1.05;text-transform:uppercase;color:#FFF6E2;text-shadow:0 0 22px rgba(245,196,81,.8),0 3px 0 #7A4A10;animation:rd-arr-slam .45s cubic-bezier(.2,1.6,.4,1) .2s both}
.rdw-four{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:28px 4px 0}
.rdw-k{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12px;font-weight:900;animation:rdw-in .4s ease-out both}
.rdw-k:nth-child(2){animation-delay:.1s}.rdw-k:nth-child(3){animation-delay:.2s}.rdw-k:nth-child(4){animation-delay:.3s}
.rdw-a{display:block;width:88px;height:100px;max-width:100%}
.rdw-k small{font-size:10.5px;font-weight:700;color:#D8CFE0}
.rdw-k.rdw-mvp::before{content:'MVP';position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:99px;background:#FFD66B;color:#2A1D10;font-size:9.5px;font-weight:900;z-index:2}
.rdw-sheet{margin-top:auto;padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:rgba(14,10,20,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.rdw-st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rdw-st span{padding:9px 6px;border-radius:14px;background:rgba(255,255,255,.07);text-align:center}.rdw-st b{display:block;font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rdw-st small{font-size:10.5px;color:#BDB3C6;font-weight:700}
.rdw-nt{margin:10px 2px 0;font-size:12px;color:#BDB3C6;text-align:center}
.rdw-go{width:100%;margin-top:12px;background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;box-shadow:0 6px 22px rgba(245,196,81,.35)}
@keyframes rdw-in{from{opacity:0;transform:translateY(10px)}}
/* (23g) the chest opening: rays behind the chest, what it gave as tiles (the new ones marked), Collect all */
.rd-c-hero{position:relative;height:128px;display:grid;place-items:center}
.rd-c-rays{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,107,.22) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);animation:rd-c-spin 18s linear infinite;pointer-events:none}
@keyframes rd-c-spin{to{transform:rotate(360deg)}}
.rd-c-hero .rd-c-chest{position:relative;font-size:88px}
.rd-c-k{display:block;font-size:12px;font-weight:900;letter-spacing:.3em;color:#FFE08A;text-transform:uppercase}
.rd-c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.rd-c-tl{position:relative;min-height:92px;padding:46px 8px 8px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;font-size:12.5px;line-height:1.2;color:#F4F1F6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rd-c-tl b{font-weight:900}.rd-c-tl small{display:block;margin-top:2px;font-size:10.5px;color:#BDB3C6;font-weight:700}
.rd-c-tl .rd-c-ic{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:none;font-size:32px;width:auto;height:auto}
.rd-c-tl.rd-c-pc{padding-top:80px}.rd-c-tl .rd-c-pic{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:80px}
.rd-c-tl.rd-c-new{box-shadow:inset 0 0 0 2px #FFD66B,0 0 16px rgba(245,196,81,.3)}
.rd-c-tl.rd-c-new::before{content:'NEW';position:absolute;top:7px;left:7px;padding:1px 6px;border-radius:99px;background:#FFD66B;color:#22140A;font-size:9px;font-weight:900}
.rd-c-all{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10}
@media (prefers-reduced-motion:reduce){.rdw-cf,.rd-c-rays,.rdw-ban,.rdw-ban b,.rdw-k{animation:none}}
@keyframes rd-arr-in{from{opacity:0}to{opacity:1}}
@keyframes rd-arr-form{0%{opacity:0;transform:translateY(40px) scale(.6);filter:blur(10px) brightness(3)}60%{opacity:1;filter:blur(2px) brightness(1.8)}100%{opacity:1;transform:none;filter:none}}
@keyframes rd-arr-tx{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* (stage 3) a ward fight: your four's symbols, the wards over the shadows (a rune you see, or your Kindling's words in
   quotes), the key in the dock (one fixed height a puzzle, so nothing moves as the round's key changes) */
.rd-sy{font-style:normal;font-weight:900;color:#FFD66B;text-shadow:0 0 6px rgba(255,200,90,.6)}
.rd-sym{display:block;font-size:16px;line-height:1;margin-bottom:1px}
.rd-wb{display:grid;place-items:center;width:30px;height:36px;margin:0 auto 2px;border-radius:9px;background:rgba(20,10,40,.78);box-shadow:inset 0 0 0 1.5px rgba(200,170,255,.8),0 0 10px rgba(170,130,255,.55)}
.rd-rn{width:13px;height:18px;fill:none;stroke:#FFE3C9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-wb .rd-rn{width:17px;height:24px}
/* (A72 item 23k) the runes your Kindling carries, over its head where the symbol was: gold stones (a shadow's ward is the
   violet .rd-wb); green once it's aimed at the shadow with the same rune */
.rd-rsn{display:flex;gap:3px;justify-content:center;margin:0 auto 3px}
.rd-rs{display:grid;place-items:center;width:28px;height:34px;border-radius:9px;background:linear-gradient(180deg,rgba(60,40,10,.92),rgba(30,18,6,.92));box-shadow:inset 0 0 0 1.5px #FFD66B,0 0 12px rgba(255,200,90,.55)}
.rd-rs .rd-rn{width:15px;height:21px;stroke:#FFE7A6;stroke-width:2.2;filter:drop-shadow(0 0 3px rgba(255,214,107,.9))}
.rd-rs.rd-rsq{color:#BDB3C6;font-weight:900;font-size:14px;background:rgba(20,14,30,.85);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.rd-rs.rd-rs-ok,.rd-wb.rd-rs-ok{box-shadow:inset 0 0 0 2px #9FF0BE,0 0 14px rgba(110,220,150,.8)}
.rd-wd{display:block;max-width:92px;margin:0 auto 2px;padding:3px 7px;border-radius:9px;background:rgba(255,255,255,.92);color:#2A1D33;font-size:10.5px;font-weight:800;line-height:1.15;white-space:normal}
.rd-pzk{display:flex;flex-direction:column;justify-content:center;gap:2px;height:32px;margin:0 0 4px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden}
.rd-pzk2{height:50px}.rd-pzk3{height:68px}.rd-pzk4{height:86px}
.rd-pzk p{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;margin:0;overflow:hidden}
.rd-kyl{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#BDB3C6}
.rd-ke{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:13px}
.rd-ke b{font-weight:400;color:#9E93A8;margin:0 1px}
.rd-kw{font-size:10.5px;font-weight:800;color:#F4F1F6}
/* (stage 4) a raid with a friend: the friends to pick on the raid's page; on the game page the raid's lobby and path
   (classes rdf-, with the raid pages' rd- pieces), the pings (a symbol over your friend's Kindling, a pin on a shadow,
   fading after 8 s) and the ping row in the fight's dock */
.rd-frs{display:flex;flex-direction:column;gap:6px}
.rd-fr{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:0;border-radius:14px;font:inherit;color:#F4F1F6;text-align:left;background:rgba(255,255,255,.07);cursor:pointer}
.rd-fr b{display:block;font-size:14px}.rd-fr small{display:block;font-size:12px;color:#BDB3C6}
.rd-fav{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,140,80,.25);font-weight:800}
.rd-fgo{color:#BDB3C6;font-size:18px}
.rdf{display:flex;flex-direction:column;gap:11px;padding:52px 2px 12px;color:#F4F1F6;border-radius:18px;background:radial-gradient(120% 60% at 50% 0,rgb(var(--rgb,150 200 255) / .18),transparent 70%)}
.rdf-hd{display:flex;align-items:center;gap:12px}
.rdf-bo{display:block;flex:none;width:84px;height:84px}
.rdf-t{margin:0;font-size:21px;font-weight:800;line-height:1.15}
.rdf-s{margin:2px 0 0;font-size:12.5px;color:#BDB3C6}
.rdf-rl{display:flex;flex-direction:column;gap:6px}
.rdf-rr{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;border:0;border-radius:14px;font:inherit;color:#F4F1F6;background:rgba(255,255,255,.07);cursor:pointer;text-align:left}
.rdf-rr small{color:#BDB3C6;font-size:12px}
.rdf-kw{cursor:default;opacity:.55}
.rdf-pks{max-height:236px}
.rdf-rd{margin:0;font-size:12.5px;color:#BDB3C6;text-align:center}
.rdf-dk{justify-content:flex-start;padding-top:4px;padding-bottom:4px}
/* (Nov 5) a ward fight with a friend: the line's box holds its words (two lines) and the pings under them, one height */
.fgc-sl-pzw{flex:none;display:flex;flex-direction:column;height:82px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);overflow:hidden}
.fgc-ar-on .fgc-sl-pzw>.fgc-sl-line{flex:1;min-height:0;height:auto;background:none;padding-top:6px;align-items:flex-start}
.fgc-ar-on .fgc-sl-pzw>.fgc-sl-line>span{-webkit-line-clamp:2}
.fgc-sl-pzw>.rd-pzk{flex:none;margin:0;background:none;height:34px;padding:0 8px 4px}
.rdf-dk.rd-pzk1{height:36px}.rdf-dk.rd-pzk2{height:62px}.rdf-dk.rd-pzk3{height:80px}.rdf-dk.rd-pzk4{height:98px}
.rdf-pg{display:flex;align-items:center;gap:5px!important;flex-wrap:nowrap!important}
.rdf-pb{display:grid;place-items:center;min-width:30px;height:26px;padding:0 7px;border:0;border-radius:9px;font:inherit;font-size:12px;font-weight:800;color:#FFD66B;background:rgba(255,255,255,.08);cursor:pointer;white-space:nowrap}
.rdf-pb.rdf-pk{display:block;min-width:0;max-width:72px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;line-height:26px;font-size:11px;color:#F2E8DA}   /* (23k) a quick ping names a Kindling */
.rdf-pb.on{background:rgba(255,140,80,.3);color:#FFE3C9;box-shadow:inset 0 0 0 1.5px rgba(255,170,110,.9)}
.rdf-nk{font-size:11.5px;color:#D8CFE0}
.rdf-wq{color:#E9DDFF;font-weight:900;font-size:16px}
/* (Hunter, Nov 5: "when you mark one, the marker goes below the symbol and moves it") a ping floats over the labels, taking no room */
.fgc-hud>.rdf-pp{position:absolute;left:50%;bottom:100%;translate:-50% 0}.fgc-hud>.rdf-pp+.rdf-pp{bottom:calc(100% + 24px)}
.rdf-pp{display:block;width:max-content;margin:0 auto 2px;padding:3px 8px;border-radius:999px;background:#FFD66B;color:#2A1D10;font-size:11px;font-weight:800;animation:rdf-pp 8s linear both}
.rdf-pp .rd-sy{color:#2A1D10;text-shadow:none}
.rdf-pp.rdf-me{background:#9FE3FF;color:#0E2230}.rdf-pp.rdf-me .rd-sy{color:#0E2230}   /* (22g) your own ping on your screen: blue, your friend's gold */
@keyframes rdf-pp{0%{opacity:0;transform:scale(.6)}4%{opacity:1;transform:scale(1.08)}8%{transform:none}85%{opacity:1}100%{opacity:0}}
.fr-gp-raid{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(160,200,255,.6),rgba(30,20,60,.9))}.fr-gp-raid b{color:#FFE3A0;font-size:20px}.fr-gp-raid i{display:none}
/* (stage 5) a raid's set on its page; a clear's chest page; the set's moving parts, only on a worn piece */
.rd-set{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06)}
/* (Hunter's pick A, Nov 5) a raid's page: the modes as cards, the fights as one bar, the chest and set in one card */
.rdx-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rdx-m{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:10px 10px 9px;border:0;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);color:#F4F1F6;font:inherit;text-align:left;cursor:pointer}
.rdx-m b{font-size:14.5px}.rdx-m small{font-size:11.5px;line-height:1.25;color:rgba(244,241,246,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.rdx-lv{font-size:20px;font-weight:900;line-height:1.1}
.rdx-m.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));box-shadow:inset 0 0 0 2px var(--accent)}
.rdx-m.rdx-my.on{background:linear-gradient(180deg,rgba(245,196,81,.3),rgba(245,196,81,.1));box-shadow:inset 0 0 0 2px #F5C451}
.rdx-m:disabled{opacity:.5;cursor:default}
.rdx-path{display:flex;gap:6px;padding:2px 2px 0}.rdx-path i{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.16)}
.rdx-path i.rdx-p{background:rgba(150,120,230,.8)}.rdx-path i.rdx-b{background:rgba(220,120,120,.8)}.rdx-path i.rdx-k{background:#F5C451}
.rdx-pl{display:flex;justify-content:space-between;gap:8px;margin:-4px 2px 0;font-size:11.5px;color:rgba(244,241,246,.7)}
.rdx-sc{margin-left:auto;font-size:12px;color:#D8CFE0}
.rd-setl .rd-setc{margin:0}
/* (Hunter's pick C, Nov 5, "centered in the scene") the next fight's words over the middle of its world, for about 2 s */
.rdn-fx{position:absolute;left:0;right:0;z-index:30;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 16px;text-align:center;pointer-events:none;animation:rdn-fx 2.2s ease both}
.rdn-fx b{font-size:34px;line-height:1.05;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000,0 0 18px rgba(255,214,107,.85),0 0 40px rgba(0,0,0,.6)}
.rdn-fx small{font-size:14px;font-weight:800;color:#FFE7A6;text-shadow:0 1px 3px #000,0 0 10px #000}
@keyframes rdn-fx{0%{opacity:0;scale:.86}12%{opacity:1;scale:1.04}20%{scale:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rdn-fx{animation:rdn-fx-r 2.2s linear both}@keyframes rdn-fx-r{0%,85%{opacity:1}100%{opacity:0}}}
.rdx-k1{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;box-shadow:none}
.rd-setl{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:#D8CFE0;white-space:nowrap}.rd-setl b{color:#F4F1F6}
.rd-setc{margin-left:auto;font-size:11.5px;font-weight:800;color:#FFD3B8}.rd-setc.on{color:#9EE6B4}
.rd-setr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;height:62px}
.rd-sp1{position:relative;flex:none;width:58px;height:58px;border-radius:12px;background:rgba(0,0,0,.25);opacity:.5}
.rd-sp1.own{opacity:1;box-shadow:inset 0 0 0 1.5px rgba(158,230,180,.7)}
.rd-spk{display:block;width:58px;height:58px}
.rd-sp1 i{position:absolute;right:3px;bottom:2px;font-style:normal;font-size:11px;font-weight:900;color:#9EE6B4}
.rd-c-body{display:flex;flex-direction:column;gap:14px;padding-top:56px}
.rd-c-top{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.rd-c-chest{font-size:64px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,200,110,.55));animation:rd-c-pop .6s ease-out both}
.rd-c-chest.rd-c-hd{filter:drop-shadow(0 0 22px rgba(245,196,81,.8))}
@keyframes rd-c-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:none}}
.rd-c-list{display:flex;flex-direction:column;gap:8px}
.rd-c-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.07);color:#F4F1F6}
.rd-c-row b{display:block;font-size:14.5px}.rd-c-row small{display:block;font-size:12px;color:#BDB3C6}
.rd-c-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);font-size:22px}
.rd-c-pic{display:block;flex:none;width:84px;height:84px}
.rd-c-pc{background:rgba(255,200,110,.12);box-shadow:inset 0 0 0 1.5px rgba(255,200,110,.5)}
.cos[data-on] .rcs-astro{transform-origin:100px 31px;animation:rcs-spin 7s linear infinite}
.cos[data-on] .rcs-bob{animation:rcs-bob 3s ease-in-out infinite}
.cos[data-on] .rcs-bub{animation:rcs-bub 4s ease-in infinite}
@keyframes rcs-spin{to{transform:rotate(360deg)}}@keyframes rcs-bob{50%{transform:translateY(-3px)}}
@keyframes rcs-bub{0%{transform:translateY(10px);opacity:0}15%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
@media (prefers-reduced-motion:reduce){.rd-arr-go,.rd-arr-go .rd-arr-b,.rd-arr-go .rd-arr-tx{animation:none}}   /* (Nov 1, Hunter: a Kindling knocked out on a Tower floor before isn't on the next floors at all, until a boss floor brings it back) */
/* (A72 item 23, stage 3) a raid with a friend: choosing is the Kindling page; the lobby's panel only says so */
.lu-sb1{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:4px 2px}
.lu-sb1 .lu-note{margin:0;font-size:14px;line-height:1.45}
.lu-open{height:48px;font-size:15px}
.kz-add.kz-ro .kz-ch0{cursor:default}.kz-add.kz-ro .kz-ch0 i{border-color:rgba(255,255,255,.3);box-shadow:none;font-size:34px;color:rgba(255,255,255,.7)}
.kz-ch0:disabled{opacity:1}
/* (item 23) a Kindling with more than eight elements: five a row, small enough for two rows over its line */
.kz-els.kz-lots{gap:8px 6px}.kz-els.kz-lots .kz-el{width:56px;font-size:10.5px;gap:3px}.kz-els.kz-lots .kz-orb{width:38px;height:38px}.kz-els.kz-lots .kz-orb svg{width:19px;height:19px}
.kz-els.kz-lots .kz-m{right:-4px}.kz-els.kz-lots .kz-m span{font-size:9.5px;padding:0 4px}
/* The first days (Nov 5): what Kindling Trials' floors open, one at a time (classes ul-, bt-lk) */
.bt-tab.ul-lk{color:#8E827B}
.bt-tab.ul-lk::after{content:"";position:absolute;top:3px;right:5px;width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='11' rx='2' fill='black'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='11' rx='2' fill='black'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.bt-tab.ul-lk.on{color:#D9CCC4}
.bt-card .bt-lk{background:linear-gradient(135deg,#1C1512,#100B09 80%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.bt-lk .bt-k{display:flex;align-items:center;gap:5px;color:#B9ABA3}
.bt-lk b{font-size:20px;font-weight:800;line-height:1.15}
.bt-lk small{color:#B9ABA3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-lk-tr{display:block;height:5px;margin-top:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.bt-lk-tr i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.bt-lk .bt-go{background:rgba(255,255,255,.1);color:#F4F5F7}
.gm-btn.ul-lk{position:relative}
.gm-btn.ul-lk>svg{opacity:.4}
.gm-btn.ul-lk::after{content:"";position:absolute;top:8px;right:calc(50% - 20px);width:12px;height:12px;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='11' rx='2' fill='black'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='11' rx='2' fill='black'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.gm-btn.ul-lk #gm-trips-t,.gm-btn.ul-lk #gm-trips-n{visibility:hidden}
.ul-b{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:40px;text-align:center;color:var(--dr-ink)}
.ul-ic{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;color:#FFD3B8;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 68%)}
.ul-ic svg{width:76px;height:76px}
#ul-page:not([hidden]) .ul-ic{animation:al-pop .7s cubic-bezier(.2,1.4,.4,1) both}
.ul-new{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#FFC27A}
.ul-t{margin:0;font-size:32px;font-weight:800;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.ul-p{margin:0 0 8px;max-width:30ch;color:var(--dr-dim)}
.ul-go{width:100%;height:50px;margin-top:8px}
.ul-later{border:0;background:none;color:var(--dr-dim);font:inherit;font-size:13px;font-weight:700;padding:8px;cursor:pointer}
@media (prefers-reduced-motion:reduce){#ul-page:not([hidden]) .ul-ic{animation:none}}
/* (Nov 5, Hunter's picks of docs/mock/in-progress.html) a raid in progress: its card in the list lit with a gold chip
   (1A), its mode marked and its fights done filled in on its page (2B), the Battle card turned into Continue and a dot on
   the Raids tab (3B). Classes rd-ip, rd-ipc, rdx-ipc, rdx-dn, rdx-nx, bt-rd-ip, bt-tab-ip */
.rd-card.rd-ip{box-shadow:inset 0 0 0 2.5px #FFD66B,0 0 18px rgba(255,214,107,.45)}
.rd-chip.rd-ipc{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10}
.rdx-m{position:relative;overflow:visible}
.rdx-ipc{position:absolute;top:-9px;right:8px;padding:2px 7px;border-radius:99px;font-size:9.5px;font-weight:900;white-space:nowrap;background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10}
.rdx-path i.rdx-dn{background:#FFD66B!important}
.rdx-path i.rdx-nx{background:#fff!important;box-shadow:0 0 8px #FFD66B}
.bt-rd.bt-rd-ip{box-shadow:inset 0 0 0 2px #FFD66B,0 0 16px rgba(255,214,107,.4)}
.bt-rd.bt-rd-ip .bt-go{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10}
.bt-tab.bt-tab-ip::after{content:"";position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:#FFD66B;box-shadow:0 0 8px #FFD66B}
/* (Nov 5, Hunter's pick H of docs/mock/in-progress3.html) each tower tile's bar: how high you've got, to floor 20; the
   climb's tile lit and its bar gold (classes bt-twf, and bt-twon now gold) */
.bt-twf{position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;background:rgba(255,255,255,.14)}
.bt-twf i{display:block;height:100%;width:0;background:rgba(255,255,255,.55)}
.bt-tw.bt-twon{box-shadow:inset 0 0 0 2.5px #FFD66B,0 0 14px rgba(255,214,107,.45)}
.bt-tw.bt-twon small{color:#FFD66B;font-weight:900}
.bt-tw.bt-twon .bt-twf i{background:#FFD66B}
/* (Nov 5) with a raid going, All raids › under the Raids card's Continue opens the list */
.bt-rd-all{position:absolute;right:10px;bottom:2px;z-index:2;font-size:11.5px;font-weight:800;color:#FFD66B;padding:4px 6px;text-shadow:0 1px 3px #000}
.bt-rd.bt-rd-ip .bt-go{margin-bottom:14px}
/* (Nov 5, Hunter's pick A of docs/mock/floors.html) picking a Kindling Trials floor: the climb (classes tf-, gm-tv-flb) */
.gm-tv-flb{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:var(--ctl-soft);color:var(--fg);font:inherit;font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap}
.gm-tv-flb span{font-size:11px;opacity:.75}
#gm-trials.tv-on .gm-tv-flb{background:none;border-color:transparent;color:#F4F5F7;font-size:17px;text-shadow:0 1px 3px #000,0 0 8px #000}
.tf-pg{overflow:hidden;background:#0B0705;color:#FBF4F0}
.tf-pg .np-bar{background:#0B0705}
.tf-hd{display:flex;flex-direction:column;margin-left:6px;line-height:1.2}.tf-hd b{font-size:19px;font-weight:900}.tf-hd small{font-size:12px;color:rgba(251,244,240,.65)}
.tf-sc{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:720px;margin:0 auto}
.tf-band{position:relative;height:560px;overflow:hidden}
.tf-band canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.tf-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,7,5,.85),rgba(11,7,5,.2) 22%,rgba(11,7,5,.2) 78%,rgba(11,7,5,.9))}
.tf-band.tf-lk canvas{opacity:.3}
.tf-wn{position:absolute;right:16px;top:10px;z-index:3;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#FFD3B8;text-shadow:0 1px 3px #000}
.tf-n{position:absolute;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;font:inherit;font-size:15px;font-weight:900;background:#2A1E18;color:#FBF4F0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 3px 8px rgba(0,0,0,.6);cursor:pointer}
.tf-n.tf-done{background:linear-gradient(180deg,#5A3A20,#3A2414);box-shadow:inset 0 0 0 2px #F0A93A,0 3px 8px rgba(0,0,0,.6)}
.tf-n.tf-done::after{content:"✓";position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:#7BE39A;color:#0E2A17}
.tf-n.tf-boss{width:60px;height:60px;margin:-30px 0 0 -30px;font-size:17px}
.tf-n.tf-boss::before{content:"♛";position:absolute;top:-18px;font-size:18px;color:#F5C451;text-shadow:0 1px 3px #000}
.tf-n.tf-now{background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;box-shadow:0 0 0 5px rgba(255,214,107,.22),0 0 22px rgba(255,214,107,.6)}
.tf-n.tf-lock{opacity:.4;cursor:default}
.tf-n.on{outline:3px solid #fff;outline-offset:3px}
.tf-n:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tf-go{flex-shrink:0;width:100%;max-width:720px;margin:0 auto;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));background:#0B0705;box-shadow:0 -12px 18px #0B0705}
.tf-gob{width:100%;height:52px;border-radius:16px;font-size:16px;font-weight:900;background:linear-gradient(180deg,#FFD66B,#F0A93A);color:#2A1D10;border:0}
.tf-go small{display:block;min-height:1.3em;margin-top:6px;text-align:center;font-size:12px;color:rgba(251,244,240,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){.tf-n.tf-now{animation:tf-glow 2.4s ease-in-out infinite}}
@keyframes tf-glow{50%{box-shadow:0 0 0 8px rgba(255,214,107,.12),0 0 30px rgba(255,214,107,.75)}}
/* (Nov 6, Hunter's pick B of docs/mock/scout.html) a Trials floor as a puzzle: its kind and trick under its name (a tap
   shows its tip), a tag under each of yours (▲ its element, a counter to the floor's kind, or ▼), and how many fit.
   All of it floats over the world and keeps its place, so stepping between floors moves nothing. */
.gm-tv-pick{position:relative}
.tv-th{position:absolute;left:50%;top:calc(100% + 4px);z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100vw - 32px);height:28px;padding:0 6px 0 10px;border:0;border-radius:99px;background:rgba(16,10,8,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,214,107,.3);color:#FBF4F0;font:inherit;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}
.tv-th b{color:#FFD66B;font-weight:900}
.tv-th-t{overflow:hidden;text-overflow:ellipsis}
.tv-th i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-style:italic;font-family:Georgia,serif;font-size:11px;font-weight:900}
#gm-trials:not(.tv-on) .tv-th{display:none}
.fgc-sl .fgc-arf .tv-fit{position:absolute;top:calc(78% + 6px + 19px * var(--hs,1) * var(--fgc-lb,1));left:50%;transform:translateX(-50%);scale:calc(var(--hs,1) * var(--fgc-lb,1));transform-origin:50% 0;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:900;white-space:nowrap;pointer-events:none;visibility:hidden}
.fgc-sl .fgc-arf .tv-fit-up,.fgc-sl .fgc-arf .tv-fit-ct,.fgc-sl .fgc-arf .tv-fit-dn{visibility:visible}
.tv-fit-up{background:#2B2410;color:#FFD66B;box-shadow:inset 0 0 0 1.5px rgba(255,214,107,.7),0 2px 8px rgba(0,0,0,.5)}
.tv-fit-ct{background:#10261A;color:#9BF0B4;box-shadow:inset 0 0 0 1.5px rgba(123,227,154,.6),0 2px 8px rgba(0,0,0,.5)}
.tv-fit-dn{background:#1E1A1A;color:rgba(251,244,240,.65);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.tv-fitl{display:none}
#gm-trials.tv-on .tv-fitl{display:block;position:absolute;left:12px;right:12px;bottom:calc(100% + 62px);margin:0;text-align:center;font-size:12.5px;font-weight:800;color:rgba(251,244,240,.85);text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none;visibility:hidden}
#gm-trials.tv-on .tv-fitl.on{visibility:visible}
.tv-fitl b{color:#FFD66B}
/* (Nov 6) "Jess passed you · 18" on the Trials card, in place of the board's line (look n1 of docs/mock/race.html) */
.bt-lb.bt-pass{color:#FFD66B}
.bt-lb.bt-pass::before,.bt-lb.bt-pass>svg{display:none}
.bt-lb.bt-pass #bt-board-t{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
.bt-lb.bt-pass b{max-width:7em;overflow:hidden;text-overflow:ellipsis;font-weight:900}
.bt-pav{position:relative;flex:none;width:20px;height:20px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08)}
/* (Nov 6) the journey results' two buttons: Claim, and Claim & send again (the same Kindlings back to the same places) */
.jr-foot.jr-2{display:flex;gap:8px}
.jr-foot.jr-2 .btn{flex:1;min-width:0;padding:0 10px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-foot.jr-2 .jr-claim{flex:.7;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
/* (Nov 6) the hatch says how rare the new Kindling is, in its rarity's color, just after its name */
.hx-tier{margin:2px 0 0;padding:4px 13px;border-radius:99px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-r);background:color-mix(in srgb,var(--hx-r) 16%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hx-r) 60%,transparent),0 0 16px color-mix(in srgb,var(--hx-r) 35%,transparent);opacity:0;animation:hx-word .5s calc(2.3s*var(--k)) ease-out forwards}
.hx-rx .hx-tier{animation-delay:1.3s}
/* (Nov 6, Hunter's picks 3A and 4A of docs/mock/moments.html) a boss floor's spotlight, and a new world's name. Only
   opacity, transforms and scale move; nothing takes taps. */
.bfx-spot{position:fixed;inset:0;z-index:200;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),transparent 0 70px,rgba(4,2,6,.82) 150px);opacity:0;animation:bfx-spot 2.9s ease-out forwards}
@keyframes bfx-spot{0%{opacity:0}14%{opacity:1}78%{opacity:1}100%{opacity:0}}
.bfx-boss{z-index:5;animation:bfx-step 2.9s cubic-bezier(.2,.9,.3,1)}
@keyframes bfx-step{0%{scale:1}22%{scale:1.45}34%{scale:1.32}82%{scale:1.32}100%{scale:1}}
.bfx-card{position:fixed;left:16px;right:16px;top:var(--cy);z-index:201;pointer-events:none;text-align:center;color:#FBF4F0;opacity:0;animation:bfx-card 2.9s ease-out forwards}
@keyframes bfx-card{0%,18%{opacity:0;transform:translateY(24px)}30%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.bfx-card small{display:block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#F5C451}
.bfx-card b{display:block;margin-top:2px;font-size:40px;font-weight:900;letter-spacing:.02em;line-height:1.05;color:#F5C451;text-shadow:0 0 18px rgba(245,196,81,.55),0 3px 0 #7A4C08}
.bfx-card span{display:block;margin-top:6px;font-size:14px;color:#D8CCC6}
.wfx-card{position:fixed;inset:0;z-index:200;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(70% 45% at 50% 45%,rgba(4,10,8,.55),transparent 75%);opacity:0;animation:wfx-card 3.2s ease-out forwards}
@keyframes wfx-card{0%{opacity:0}15%,78%{opacity:1}100%{opacity:0}}
.wfx-card small{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#F5C451;animation:wfx-up 3.2s ease-out forwards}
.wfx-card b{margin-top:4px;max-width:100%;font-size:38px;font-weight:900;line-height:1.05;color:#FBF4F0;text-shadow:0 2px 18px rgba(0,0,0,.8),0 0 26px rgba(160,240,210,.45);animation:wfx-up 3.2s ease-out forwards}
.wfx-card span{margin-top:8px;font-size:14px;font-weight:700;color:#D8CCC6;text-shadow:0 1px 6px #000;animation:wfx-up 3.2s ease-out forwards}
@keyframes wfx-up{0%{transform:translateY(18px) scale(.96)}22%,100%{transform:none}}