/* LUCYNET2 player navigation (shared by GOO and RADIAL) + the RADIAL look.
   Shared parts use the page's own theme variables, so they sit right in either look. */

/* ---------------------------------------------------------------- shared: notification dot */
.n-dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff4e0;color:#0c0b09;
  font:900 12px/1 var(--mono);position:relative;box-shadow:0 0 0 2px #ff3b30;flex:none}
.n-dot::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid #ff3b30;animation:n-pulse 1.4s ease-out infinite;pointer-events:none}
.n-dot[hidden]{display:none}
@keyframes n-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}

/* ---------------------------------------------------------------- shared: INDEX button (always top-left) */
.n-idxbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 9px;flex:none;cursor:pointer;
  background:var(--phos);color:#001a06;border:2px solid #000;font:800 11px var(--ui);letter-spacing:.14em;box-shadow:2px 2px 0 #000}
.n-idxbtn svg{width:14px;height:12px}
.n-idxbtn:active{transform:translate(2px,2px);box-shadow:none}
.n-idxbtn .n-dot{position:absolute;right:-7px;top:-7px;min-width:16px;height:16px;font-size:10px;padding:0 3px}
body.fl-cluster .n-idxbtn,body.fl-dock .n-idxbtn{transform:skewX(-8deg);border-radius:4px}
@media (max-width:420px){.n-idxbtn span:not(.n-dot){display:none}.n-idxbtn{padding:0 9px}}

/* ---------------------------------------------------------------- shared: GOO / DIAL toggle */
.n-mode{display:inline-flex;align-items:stretch;padding:2px;gap:2px;border:1.5px solid var(--holo-faint);background:rgba(0,0,0,.55);cursor:pointer;font:700 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.n-mode span{padding:4px 8px}
.n-mode span.on{background:var(--phos);color:#000}
body.fl-cluster .n-mode,body.fl-dock .n-mode{border-radius:14px}
body.fl-cluster .n-mode span,body.fl-dock .n-mode span{border-radius:11px}
#gooMode{position:fixed;right:12px;top:calc(var(--top) + var(--safe-t) + var(--tick) + 10px);z-index:9;display:none}
body.fl-cluster #gooMode{display:inline-flex}
.n-flip{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:#000;clip-path:circle(0% at 50% 50%);transition:clip-path .32s cubic-bezier(.55,0,.85,.3)}
.n-flip.on{clip-path:circle(75% at 50% 50%)}
.n-flip.off{clip-path:circle(0% at 50% 50%);transition-timing-function:cubic-bezier(.15,.8,.25,1)}
.n-flip b{font:900 11vw var(--ui);letter-spacing:.06em;color:var(--dye,#ffc31a)}

/* ---------------------------------------------------------------- shared: notification ribbon (home) */
.n-ribbon{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.n-ribbon::-webkit-scrollbar{display:none}
.n-ribbon:empty{display:none}
.n-rib{display:flex;align-items:center;gap:8px;flex:none;padding:4px 10px 4px 4px;background:#ff3b30;color:#fff;border:none;cursor:pointer;font:600 10px var(--mono);letter-spacing:.14em}
.n-rib .n-dot{box-shadow:none;min-width:18px;height:18px}
.n-rib .n-dot::after{border-color:#fff}
#gooRibbon{position:fixed;left:12px;right:12px;top:calc(var(--top) + var(--safe-t) + var(--tick) + 8px);z-index:9;display:none}
body.fl-cluster #gooRibbon:not(:empty){display:flex}
body.fl-cluster #gooRibbon .n-rib{border-radius:12px;border:2px solid #000;box-shadow:2px 2px 0 #000}
body.fl-cluster.n-hasrib #moldReset,body.fl-cluster.n-hasrib #gooMode{top:calc(var(--top) + var(--safe-t) + var(--tick) + 46px)}

/* ---------------------------------------------------------------- shared: path bar (every page) */
#nPath{position:fixed;left:0;right:0;top:calc(var(--top) + var(--safe-t) + var(--tick));z-index:18;display:none;align-items:center;gap:6px;height:38px;padding:0 8px;
  background:rgba(0,0,0,.72);border-bottom:1px solid var(--holo-faint);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 10px var(--mono);letter-spacing:.12em}
body.n-page #nPath{display:flex}
.n-crumbs{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;overflow:hidden;color:var(--muted)}
.n-crumbs button{background:none;border:1px solid var(--holo-faint);color:var(--ink);padding:3px 6px;cursor:pointer;font:inherit;letter-spacing:inherit}
.n-crumbs button.g{background:var(--c);border-color:var(--c);color:#000}
.n-crumbs .cur{color:#fff;overflow:hidden;text-overflow:ellipsis}
.n-crumbs b{opacity:.5;font-weight:400}
.n-crumbs em{font-style:normal;opacity:.5;margin-left:6px}
.n-pn{flex:none;display:flex;align-items:center;gap:5px;max-width:30%;padding:4px 7px;background:none;border:1px solid var(--holo-faint);color:var(--muted);cursor:pointer;font:inherit;letter-spacing:inherit}
.n-pn i{width:7px;height:7px;background:var(--c);flex:none}
.n-pn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-pn:active{background:var(--c);color:#000}
@media (max-width:480px){.n-pn span{display:none}.n-crumbs em{display:none}}
body.fl-dock #nPath{border-radius:0 0 14px 14px;left:6px;right:6px}
body.fl-dock .n-crumbs button,body.fl-dock .n-pn{border-radius:10px}
body.n-page.fl-dock #main,body.n-page.rd-page #main{padding-top:calc(var(--top) + var(--safe-t) + var(--tick) + 54px)}
#nSwipe{position:fixed;top:50%;z-index:40;padding:10px 12px;color:#000;font:800 13px var(--ui);letter-spacing:.06em;opacity:0;pointer-events:none;transform:translateY(-50%);border:2px solid #000}
#nSwipe.r{right:10px}#nSwipe.l{left:10px}

/* ---------------------------------------------------------------- shared: INDEX sidebar */
#nScrim{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s}
#nIdx{position:fixed;left:0;top:0;bottom:0;z-index:151;width:min(90vw,410px);background:#ebe2cf;color:#0c0b09;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-104%);transition:transform .42s cubic-bezier(.2,.8,.2,1);padding:calc(14px + var(--safe-t)) 0 calc(24px + var(--safe-b));font-family:var(--mono)}
body.n-idx #nIdx{transform:none} body.n-idx #nScrim{opacity:1;pointer-events:auto}
.n-ixstrip{height:10px;margin-bottom:8px;background:repeating-linear-gradient(-45deg,var(--dye,#ffc31a) 0 8px,#0c0b09 8px 16px)}
.n-ixhead{display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px 10px}
.n-ixhead h2{margin:0;font:900 30px/.9 var(--ui);letter-spacing:-.01em}
.n-ixhead small{display:block;font:400 9px var(--mono);letter-spacing:.18em;margin-top:6px;opacity:.6}
.n-ixclose{background:none;border:1.5px solid #0c0b09;padding:6px 8px;font:600 10px var(--mono);letter-spacing:.14em;cursor:pointer;color:#0c0b09}
.n-ixme{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 12px}
.n-ixme > button{background:#0c0b09;color:#ebe2cf;border:none;padding:7px 9px;font:600 9.5px var(--mono);letter-spacing:.14em;cursor:pointer}
.n-ixme .n-mode{background:#0c0b09;border-color:#0c0b09;color:rgba(235,226,207,.6)}
.n-metag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;background:var(--c);color:#000;font:900 italic 13px var(--ui);transform:rotate(-3deg);border:2px solid #000;box-shadow:2px 2px 0 #000}
.n-metag i{font-style:normal}
.n-metag.big{font-size:18px;padding:6px 12px}
.n-ixhome{display:flex;justify-content:space-between;width:calc(100% - 32px);margin:0 16px;padding:11px 12px;background:#0c0b09;color:#ebe2cf;border:none;cursor:pointer;font:800 11px var(--ui);letter-spacing:.14em}
.n-ixhome.cur{box-shadow:inset 4px 0 0 var(--dye,#ffc31a)}
.n-ixg{padding:12px 16px 2px}
.n-ixg h3{margin:0}
.n-ixg h3 button{display:flex;justify-content:space-between;width:100%;padding:5px 7px;background:var(--c);color:#0c0b09;border:none;cursor:pointer;font:800 9.5px var(--ui);letter-spacing:.22em}
.n-ixrow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;width:100%;padding:10px 2px;background:none;border:none;border-bottom:1px solid rgba(12,11,9,.14);text-align:left;align-items:center;cursor:pointer;color:#0c0b09;font:inherit}
.n-ixrow:hover{background:rgba(12,11,9,.05)}
.n-ixrow.cur{background:rgba(12,11,9,.09);box-shadow:inset 3px 0 0 var(--c)}
.n-ixrow .g{text-align:center;opacity:.7}
.n-ixrow b{display:block;font:800 14px var(--ui);letter-spacing:.04em}
.n-ixrow em{display:block;font-style:normal;font-size:10.5px;opacity:.62;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-ixrow .d{font-size:9.5px;letter-spacing:.1em;white-space:nowrap}
.n-ixrow .n-dot{background:#ff3b30;color:#fff}
.n-ixfoot{display:flex;flex-wrap:wrap;gap:6px;padding:16px}
.n-ixfoot button,.n-ixfoot a{background:none;border:1.5px solid #0c0b09;color:#0c0b09;padding:7px 9px;font:600 9.5px var(--mono);letter-spacing:.12em;text-decoration:none;cursor:pointer}

/* group card (goo) */
.n-card .wx-h b{letter-spacing:.14em;color:var(--c)}
.n-glist{list-style:none;margin:0;padding:0}
.n-glist button{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;width:100%;text-align:left;background:none;border:none;border-left:4px solid var(--c);padding:10px 12px;margin:6px 0;color:var(--ink);cursor:pointer;font:inherit;background:rgba(255,255,255,.04)}
.n-glist b{font-size:15px;letter-spacing:.08em}
.n-glist span{font:12px var(--mono);color:var(--muted);align-self:center}
.n-glist em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------------- shared: eyes in the walls (nearly black) */
.n-eyes{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
body.fl-cluster .n-eyes{z-index:4}
.n-eye{position:absolute;left:0;top:0;width:var(--w);opacity:.75;animation:var(--move,n-still) var(--life) cubic-bezier(.2,.8,.2,1) both}
.n-eye svg{display:block;width:100%;height:auto;overflow:visible}
.n-eye .lid{transform-box:fill-box;animation:n-lids var(--life) linear both}
.n-eye .lid.t{transform-origin:50% 0}.n-eye .lid.b{transform-origin:50% 100%}
.n-eye .look{animation:n-look var(--life) var(--lease,cubic-bezier(.6,0,.3,1)) both}
@keyframes n-lids{0%{transform:scaleY(1)}9%{transform:scaleY(0)}44%{transform:scaleY(0)}47%{transform:scaleY(1)}50%{transform:scaleY(0)}88%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes n-look{0%,12%{transform:translate(0,0)}22%,36%{transform:translate(var(--x1),var(--y1))}56%,70%{transform:translate(var(--x2),var(--y2))}80%,100%{transform:translate(var(--x3),var(--y3))}}
@keyframes n-still{from{transform:translate(var(--x),var(--y))}to{transform:translate(var(--x),var(--y))}}
@keyframes n-peekL{0%{transform:translate(calc(var(--x) - 70%),var(--y))}12%,88%{transform:translate(var(--x),var(--y))}100%{transform:translate(calc(var(--x) - 70%),var(--y))}}
@keyframes n-peekR{0%{transform:translate(calc(var(--x) + 70%),var(--y))}12%,88%{transform:translate(var(--x),var(--y))}100%{transform:translate(calc(var(--x) + 70%),var(--y))}}
@keyframes n-drift{from{transform:translate(var(--x),var(--y)) rotate(-6deg)}to{transform:translate(var(--x2p),var(--y2p)) rotate(8deg)}}
@keyframes n-target{0%{transform:translate(var(--x),var(--y)) scale(.5)}30%{transform:translate(var(--x),var(--y)) scale(1.35)}45%,100%{transform:translate(var(--x),var(--y)) scale(1)}}
@keyframes n-coin{0%{transform:translate(var(--x),var(--y)) rotateY(0)}100%{transform:translate(var(--x),var(--y)) rotateY(720deg)}}
@keyframes n-orbit{from{transform:translate(var(--x),var(--y)) rotate(0) translateX(var(--rad)) rotate(0)}to{transform:translate(var(--x),var(--y)) rotate(360deg) translateX(var(--rad)) rotate(-360deg)}}
@keyframes n-hatch{0%{transform:translate(var(--x),calc(var(--y) + 60%))}15%,85%{transform:translate(var(--x),var(--y))}100%{transform:translate(var(--x),calc(var(--y) + 60%))}}

/* ---------------------------------------------------------------- shared: settings page */
.n-set{margin-bottom:14px}
.n-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.n-seg button{display:flex;flex-direction:column;gap:4px;padding:14px;border:2px solid var(--holo-faint);background:rgba(0,0,0,.35);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.n-seg button b{font:900 18px var(--ui);letter-spacing:.08em}
.n-seg button span{font:12px var(--mono);color:var(--muted)}
.n-seg button[aria-checked="true"]{border-color:var(--phos);background:var(--phos);color:#000}
.n-seg button[aria-checked="true"] span{color:#000}
.n-idrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.n-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 0;background:none;border:none;border-bottom:1px solid var(--holo-faint);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.n-tog i{width:46px;height:26px;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid var(--holo-soft);position:relative;flex:none;transition:background .2s}
.n-tog i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.n-tog[aria-checked="true"] i{background:var(--phos)}
.n-tog[aria-checked="true"] i::after{transform:translateX(20px);background:#000}

/* ---------------------------------------------------------------- shared: interface chooser after logging in */
#nChoose{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.92);opacity:0;transition:opacity .3s}
#nChoose.show{opacity:1}
#nChoose.picked .nc-opt:not(.on){opacity:.15;transform:scale(.94)}
.nc-box{width:min(620px,100%)}
.nc-h{font:600 14px var(--mono);color:var(--phos);margin-bottom:14px}
.nc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.nc-row{grid-template-columns:1fr}}
.nc-opt{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto 1fr;gap:4px 14px;align-items:center;padding:16px;text-align:left;cursor:pointer;
  background:#14120f;border:2px solid rgba(235,226,207,.25);color:#ebe2cf;transition:transform .3s,opacity .3s,border-color .2s}
.nc-opt svg{grid-row:1/3;width:84px;height:84px}
.nc-opt b{font:900 22px "Archivo",var(--ui);letter-spacing:.08em;align-self:end}
.nc-opt span{font:12px/1.45 var(--mono);color:rgba(235,226,207,.65);align-self:start}
.nc-opt.on{border-color:#ffc31a;box-shadow:0 0 0 2px #ffc31a}
.nc-opt.goo{border-radius:22px;background:#04160a;border-color:rgba(57,255,20,.35)}
.nc-opt.goo.on{border-color:#39ff14;box-shadow:0 0 0 2px #39ff14}
.nc-opt:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nc-f{margin-top:14px;font:12px var(--mono);color:rgba(235,226,207,.55)}

/* ================================================================ RADIAL: the look */
body.rd{
  --void:#0c0b09;--holo:#ebe2cf;--holo-soft:rgba(235,226,207,.55);--holo-faint:rgba(235,226,207,.16);
  --glass:rgba(20,18,15,.94);--glass-solid:#14120f;--ink:#ebe2cf;--muted:rgba(235,226,207,.62);
  --acc:var(--dye,#ffc31a);--acc-ink:var(--dye-ink,#0c0b09);--acc16:var(--dye16,rgba(255,195,26,.16));--acc32:var(--dye32,rgba(255,195,26,.32));
  --phos:var(--acc);--phos-soft:var(--dye60,rgba(255,195,26,.5));--phos-faint:var(--acc16);--amber:#ffb347;--alarm:#ff3b30;
  --ui:"Archivo","Chakra Petch","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Share Tech Mono","LN Mono",ui-monospace,Menlo,Consolas,monospace;
  --sten:"Big Shoulders Stencil Display","Avenir Next Condensed","Arial Narrow",Impact,sans-serif;
  background:#0c0b09}
body.rd::before{background:
  linear-gradient(rgba(235,226,207,.07) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(90deg,rgba(235,226,207,.07) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(rgba(235,226,207,.025) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(235,226,207,.025) 1px,transparent 1px) 0 0/24px 24px}
body.rd #scan{display:none}
body.rd::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(ellipse 80% 74% at 50% 50%,transparent 58%,rgba(0,0,0,.42) 86%,rgba(0,0,0,.8) 100%)}
body.rd .glass{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);box-shadow:none;border-color:rgba(235,226,207,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
body.rd .pagehead h1{font:900 28px var(--ui);letter-spacing:.02em;text-transform:uppercase;text-shadow:none;color:#ebe2cf}
body.rd h2.sec{color:#ebe2cf;letter-spacing:.2em;font:800 11px var(--ui);border-color:rgba(235,226,207,.14)}
body.rd .hbtn{border-radius:0}
body.rd .hbtn.phos{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* top bar */
#rtop{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--top) + var(--safe-t));padding:var(--safe-t) 12px 0;display:flex;align-items:center;gap:10px;background:rgba(12,11,9,.92);border-bottom:1px solid rgba(235,226,207,.12)}
#rtop .n-idxbtn{background:#ebe2cf;color:#0c0b09;border:none;box-shadow:none}
#rtop .n-idxbtn:active{background:var(--acc)}
#rbrand{display:flex;flex-direction:column;text-decoration:none;color:#ebe2cf;font:900 13px var(--ui);letter-spacing:.04em;line-height:1;min-width:0}
#rbrand small{font:400 9px var(--mono);letter-spacing:.12em;color:rgba(235,226,207,.4);margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
#rtop .spacer{flex:1}
#rtop #syncBtn,#rtop #emoteBtn{border-radius:0;border-color:rgba(235,226,207,.25);color:#ebe2cf}
#rtop #who{display:inline-flex;align-items:center;gap:6px;max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:5px 9px;
  background:var(--c,#ff4fb4);color:#0c0b09;border:none;font:900 italic 13px var(--ui);transform:rotate(-4deg);box-shadow:3px 3px 0 #000}
#rtop #who i{font-style:normal}
@media (max-width:480px){#rtop{gap:6px;padding-left:8px;padding-right:8px}#rtop #who{max-width:100px}#rtop #syncBtn,#rtop #emoteBtn{width:28px;height:28px;margin-right:0}#rbrand small{display:none}}
body.rd #online{background:rgba(12,11,9,.96);border-bottom:1px solid rgba(235,226,207,.12);font-family:var(--mono)}
body.rd .on-lbl{background:#ebe2cf;color:#0c0b09}
body.rd .on-lbl b{background:#0c0b09;color:var(--acc)}
body.rd .tk.up .arr{color:#c2ff2a}
body.rd #nPath{background:rgba(12,11,9,.94)}
body.rd .n-crumbs .cur{color:#ebe2cf}

/* home */
#rdHome{position:fixed;left:0;right:0;bottom:0;top:calc(var(--top) + var(--safe-t) + var(--tick));display:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:'stats' 'rib' 'pv' 'dial' 'foot';padding-bottom:var(--safe-b);z-index:5}
body.rd-home #rdHome{display:grid}
body.rd-home #main{visibility:hidden;height:0;overflow:hidden;padding:0}
#rdHome .n-ribbon{margin:8px 14px 0}
#pv{position:relative;z-index:7;margin:8px 14px 0;padding:12px 14px;background:#14120f;border:1px solid rgba(235,226,207,.12);min-height:172px;max-height:40vh;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);cursor:default}
#pv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gc,rgba(235,226,207,.3))}
#pv::after{content:"";position:absolute;left:4px;right:0;bottom:0;height:2px;background:var(--gc,rgba(235,226,207,.3));transform-origin:left;transform:scaleX(var(--load,0));opacity:.8;transition:transform .5s}
#pv.kick{animation:rd-kick .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rd-kick{0%{transform:translate(5px,-2px)}100%{transform:none}}
.pv-tag{display:flex;align-items:center;gap:10px;font:500 9px var(--mono);letter-spacing:.2em;color:rgba(235,226,207,.62)}
.pv-tag b{font-weight:500;color:#0c0b09;background:var(--gc,rgba(235,226,207,.62));padding:2px 6px;letter-spacing:.16em}
.pv-me{margin-left:auto;padding:2px 7px;background:var(--c);color:#0c0b09;font:900 italic 11px var(--ui);letter-spacing:.04em;transform:rotate(-3deg)}
.pv-name{display:flex;align-items:center;gap:12px;font:900 40px/.9 var(--ui);letter-spacing:-.02em;margin:10px 0 8px;white-space:nowrap;overflow:hidden;text-transform:uppercase;color:#ebe2cf}
.pv-name .n-dot{font-size:14px;min-width:24px;height:24px;border-radius:12px}
.pv-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pv-dat{font:900 24px/1 var(--sten);letter-spacing:.02em;color:var(--gc,#ebe2cf)}
.pv-hint{font:9px var(--mono);letter-spacing:.18em;color:rgba(235,226,207,.34);margin-top:6px}
.pv-hint.live{color:var(--acc-ink);background:var(--acc);padding:3px 7px;margin:0}
.pv-list,.pv-glance{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid rgba(235,226,207,.12)}
.pv-list li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid rgba(235,226,207,.12);font:11px var(--mono);color:#ebe2cf;animation:rd-line .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 40ms)}
.pv-list li span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-list li span:last-child{white-space:nowrap;color:rgba(235,226,207,.4)}
.pv-list li.hot span:first-child::before{content:"NEW";font-size:8px;letter-spacing:.1em;background:#ff3b30;color:#fff;padding:1px 4px;margin-right:8px}
.pv-glance{margin-top:8px}
.pv-glance li{animation:rd-line .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 45ms);border-bottom:1px solid rgba(235,226,207,.1)}
.pv-glance button{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px;width:100%;padding:6px 0;background:none;border:none;color:#ebe2cf;text-align:left;cursor:pointer;font:inherit}
.pv-glance button > i{width:8px;height:8px;background:var(--c);margin:4px 0 0 6px}
.pv-glance button > .n-dot{grid-row:1/3;min-width:20px;height:20px;align-self:center}
.pv-glance b{font:700 12px var(--ui);letter-spacing:.02em}
.pv-glance span:not(.n-dot){grid-column:2;font:10.5px var(--mono);color:rgba(235,226,207,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-glance button:active{background:rgba(235,226,207,.06)}
@keyframes rd-line{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
#rfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px 10px;position:relative;z-index:8;font:9px var(--mono);letter-spacing:.14em;color:rgba(235,226,207,.35)}
body.rd .n-mode{border-color:rgba(235,226,207,.3)}
body.rd .n-mode span.on{background:var(--acc);color:var(--acc-ink)}

/* the dial */
/* the dial sits IN the layout (flex, bottom-centred on phones, centred on wide screens) so it can never drift out of its box */
#dialwrap{position:relative;min-height:200px;min-width:0;display:flex;align-items:flex-end;justify-content:center}
#tilt{position:relative;flex:none;margin:0;transform-style:preserve-3d;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;border-radius:50%;--u:1px}
#tilt:focus{outline:none}
#tilt:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
#tilt .lyr{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:translateZ(var(--z));backface-visibility:hidden;transition:opacity .35s}
#tilt.subbed .lyr.base{opacity:.18}
#tilt .lyr text{font-family:var(--mono);fill:rgba(235,226,207,.62)}
#tilt .small{inset:auto;left:50%;top:50%;width:calc(var(--r) * 2 * var(--u));height:calc(var(--r) * 2 * var(--u));margin:calc(var(--r) * -1 * var(--u)) 0 0 calc(var(--r) * -1 * var(--u))}
#rShadow{border-radius:50%;background:radial-gradient(circle closest-side,rgba(0,0,0,.7) 55%,rgba(0,0,0,.35) 80%,transparent 100%)}
#tilt .sec-g,#tilt .sec-p{stroke:rgba(235,226,207,.2);stroke-width:1}
#tilt .ps.sel .sec-p,#tilt .gs.sel .sec-g{fill:#050504;stroke:var(--c);stroke-dasharray:3 3}
#tilt .ps.sel text,#tilt .gs.sel text{opacity:.12}
#tilt .wall{fill:none;stroke:rgba(235,226,207,.14);stroke-width:1}
#tilt .wall2{fill:rgba(0,0,0,.35);stroke:rgba(235,226,207,.08);stroke-width:1}
#tilt .lbl-p{font-family:var(--sten)!important;font-weight:900;letter-spacing:.05em;fill:#ebe2cf!important}
#tilt .lbl-n{font-size:7.5px}
#tilt .lbl-g{font-family:var(--ui)!important;font-weight:800;font-size:8.5px;letter-spacing:.2em;fill:#0c0b09!important}
#tilt .bz text{font-size:8px}
#rSweep{border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,var(--acc16) 356deg,var(--acc32) 359.5deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 36.3%,#000 36.5%,#000 64.9%,transparent 65.1%);mask-image:radial-gradient(circle closest-side,transparent 36.3%,#000 36.5%,#000 64.9%,transparent 65.1%)}
#rLubber{inset:auto!important;left:50%!important;top:calc(40 * var(--u))!important;width:0!important;height:0!important;border-left:calc(5 * var(--u)) solid transparent;border-right:calc(5 * var(--u)) solid transparent;border-top:calc(9 * var(--u)) solid var(--acc);margin-left:calc(-5 * var(--u))}
#rHubText{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#rHubSub{font:calc(8 * var(--u)) var(--mono);letter-spacing:.2em;color:rgba(235,226,207,.4);margin-bottom:calc(2 * var(--u))}
#rHubCode{font:900 calc(30 * var(--u))/1 var(--sten);color:#ebe2cf}
#rHubText .n-eye{width:calc(76 * var(--u));opacity:1}
#rLift{transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .18s;opacity:0}
#rLift.up{opacity:1;transform:translateZ(var(--zl)) translate(var(--ox),var(--oy)) scale(1.1)}
#rLift .lbl-p{fill:#0c0b09!important}
#tilt #rSub{transform:translateZ(200px) scale(.72);opacity:0;pointer-events:none}
#tilt #rSub.open{opacity:1}
#tilt #rSub .ss{stroke:rgba(12,11,9,.5);stroke-width:2}
#tilt #rSub .ss.sel{fill:var(--c)!important}
#tilt #rSub .sl{font:900 21px var(--ui);fill:#ebe2cf}
#tilt #rSub .sd{font:10px var(--mono);letter-spacing:.14em;fill:rgba(235,226,207,.62)}
#tilt #rSub .sel ~ .sl,#tilt #rSub .sel ~ .sd{fill:#0c0b09}
#tilt #rSub .sb{font:900 14px var(--sten);fill:#0c0b09}
#tilt #rSub .ctr{font:900 13px var(--ui);letter-spacing:.1em;fill:#0c0b09}
#tilt #rSub .cx{font:9px var(--mono);letter-spacing:.2em;fill:#0c0b09}

/* touch feedback */
.rx,#rxr{position:fixed;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:8}
#rxh{width:100%;height:1px;background:repeating-linear-gradient(90deg,rgba(235,226,207,.22) 0 2px,transparent 2px 6px)}
#rxv{width:1px;height:100%;background:repeating-linear-gradient(rgba(235,226,207,.22) 0 2px,transparent 2px 6px)}
#rxr{font:9px var(--mono);letter-spacing:.1em;color:rgba(235,226,207,.62);white-space:nowrap}
body.rd-x .rx,body.rd-x #rxr{opacity:1}
.rping{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border:1.5px solid var(--acc,#ffc31a);border-radius:50%;pointer-events:none;z-index:9;animation:rd-ping .7s cubic-bezier(.2,.8,.2,1) forwards}
.rping.hold{border-width:3px;animation-duration:.5s}
@keyframes rd-ping{from{transform:scale(.1);opacity:1}to{transform:scale(1);opacity:0}}
#rlead{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:6;display:none}
body.rd-home #rlead{display:block}
#rlead polyline{fill:none;stroke-width:1}

/* pages */
body.rd #main,body.fl-dock #main{position:relative;z-index:3}
body.rd-page #main{padding:calc(var(--top) + var(--safe-t) + var(--tick) + 54px) 14px calc(96px + var(--safe-b));max-width:1000px;margin:0 auto}
#rdock{position:fixed;left:0;right:0;bottom:0;z-index:19;display:none;background:#14120f;border-top:1px solid rgba(235,226,207,.12);padding:8px 8px calc(10px + var(--safe-b))}
body.rd-page #rdock{display:block}
#rdock .row{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
#rdock a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;text-decoration:none;font:800 8px var(--ui);letter-spacing:.16em;color:rgba(235,226,207,.4)}
#rdock a::before{content:"";width:18px;height:3px;background:rgba(235,226,207,.3)}
#rdock a.on{color:#ebe2cf}#rdock a.on::before{background:var(--c,var(--acc));width:30px}
#rdock .home{color:#ebe2cf}#rdock .home::before{display:none}
#rdock .home svg{width:28px;height:28px}
#rdock .n-dot{position:absolute;top:-2px;left:calc(50% + 8px);min-width:17px;height:17px;font-size:10px}
#rdock .up{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;color:var(--acc-ink);background:var(--acc);padding:3px 6px}

@media (min-width:900px){
  #rdHome{grid-template-columns:minmax(340px,.85fr) minmax(0,1.4fr)}
  #rdHome{grid-template-rows:auto auto 1fr auto;grid-template-areas:'stats stats' 'rib rib' 'pv dial' 'foot foot'}
  #pv{align-self:center;margin:0 0 0 40px;min-height:320px;max-height:none;padding:22px 24px}
  .pv-name{font-size:60px}
  #dialwrap{align-items:center}
}
@media (max-height:720px) and (max-width:899px){#pv{min-height:150px}.pv-name{font-size:32px}.pv-glance li:nth-child(n+4),.pv-list li:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.n-dot::after,.pv-list li,.pv-glance li{animation:none}#nIdx,#rLift{transition:none}}

/* peek cards and sheets in the radial look */
body.rd #wx.show{background:rgba(0,0,0,.66)}
body.rd #wx .wx-card{background:#14120f;border:1px solid rgba(235,226,207,.2);border-radius:0;box-shadow:8px 8px 0 #000;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
body.rd #wx .wx-h b{letter-spacing:.14em}

/* ---------------------------------------------------------------- dye (a player's own accent colour) */
body.n-dyed.fl-cluster,body.n-dyed.fl-dock{--phos:var(--dye);--phos-soft:var(--dye60);--phos-faint:var(--dye16)}
body.n-dyed.fl-cluster{background:radial-gradient(ellipse at 50% 55%,var(--dye16),transparent 60%),var(--void)}
body.n-dyed .n-idxbtn{color:var(--dye-ink)}
body.rd .n-idxbtn{color:#0c0b09}
/* other players on your screen: a dot in their colour at the page they're on */
.n-crew{position:absolute;left:50%;top:50%;width:calc(22 * var(--u,1px));height:calc(22 * var(--u,1px));margin:calc(-11 * var(--u,1px)) 0 0 calc(-11 * var(--u,1px));border-radius:50%;
  display:grid;place-items:center;background:var(--c);color:#000;border:2px solid #000;font:700 calc(11 * var(--u,1px))/1 var(--ui);box-shadow:0 0 0 2px var(--c),0 0 14px var(--c);
  transform:translate(var(--x),var(--y));transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s;}
.n-crew b{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;font:700 calc(8 * var(--u,1px)) var(--mono);letter-spacing:.08em;color:var(--c);text-shadow:0 1px 0 #000,0 0 4px #000}
@keyframes n-crewpulse{50%{box-shadow:0 0 0 2px var(--c),0 0 26px var(--c)}}
#gooCrew{position:fixed;left:0;top:0;width:0;height:0;z-index:7;pointer-events:none}
#gooCrew .n-crew{--u:1px;width:18px;height:18px;margin:-9px 0 0 -9px;left:0;top:0;font-size:10px;transition:opacity .4s}
#gooCrew .n-crew b{font-size:8px}
body:not(.fl-cluster):not(.fl-dock) #gooCrew,body.fl-dock #gooCrew{display:none}
/* settings: identity & dye */
.n-prev{display:grid;gap:10px;padding:12px;margin:4px 0 12px;background:rgba(0,0,0,.35);border:1px solid var(--holo-faint)}
.n-pv-tag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.n-pv-art{display:flex;gap:16px}
.n-pv-art svg{width:110px;height:110px}
.n-syms{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px}
.n-syms button{height:38px;font-size:18px;background:rgba(255,255,255,.04);border:1px solid var(--holo-faint);color:var(--ink);cursor:pointer}
.n-syms button.on{background:var(--phos);color:#000;border-color:var(--phos)}
.n-sw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.n-sw > button{width:34px;height:34px;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0}
.n-sw > button.on{border-color:#fff;box-shadow:0 0 0 2px #000 inset}
.n-sw > button.n-classic,.n-sw > button.n-mine{width:auto;padding:0 10px;font:700 10px var(--mono);letter-spacing:.14em;color:#000}
.n-sw > button.n-classic{background:linear-gradient(90deg,#39ff14 50%,#ffc31a 50%)}
.n-swc{position:relative;display:grid;place-items:center;width:44px;height:34px;border:1px dashed var(--holo-soft);font:700 9px var(--mono);color:var(--muted);cursor:pointer;overflow:hidden}
.n-swc input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.n-savebar{position:sticky;bottom:calc(84px + var(--safe-b));z-index:2;padding:10px;margin:0 -10px;background:rgba(8,8,8,.94);border-top:1px solid var(--holo-faint)}
.n-savebar .hbtn[disabled]{opacity:.45}

/* goo: unread pills on page atoms (the shared n-dot look, pinned to the atom) */
.gn-b.n-dot{position:absolute;display:grid;left:calc(var(--r) * .5);top:calc(var(--r) * -1.1);min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#fff4e0;color:#0c0b09;font:900 12px/1 var(--mono);box-shadow:0 0 0 2px #ff3b30,0 0 14px rgba(255,59,48,.6);animation:bpop .3s;z-index:2}

/* radial: unread pills floating above the outer page slices */
#tilt #rBadge text{font:900 14px var(--mono);fill:#0c0b09}
#tilt #rBadge .rb-ring{fill:none;stroke:#ff3b30;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:rb-pulse 1.4s ease-out infinite}
@keyframes rb-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
#tilt.subbed #rBadge{opacity:.18}
@media (prefers-reduced-motion:reduce){#tilt #rBadge .rb-ring{animation:none}}

/* taps in the index are taps: no double-tap zoom, no delay, no hover-first on iOS */
#nIdx,#nIdx button,#nIdx a,#nPath button,#rdock a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none){.n-ixrow:hover{background:none}}

/* dial size + reset, under the dial */
#rdate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-sz{display:inline-flex;align-items:stretch;gap:2px;margin-left:auto;border:1.5px solid rgba(235,226,207,.3);padding:2px;background:rgba(0,0,0,.55)}
.rd-sz button{background:none;border:0;color:rgba(235,226,207,.75);font:700 12px var(--mono);padding:3px 8px;cursor:pointer;touch-action:manipulation}
.rd-sz button:hover{background:rgba(235,226,207,.1);color:#ebe2cf}
.rd-sz [data-rdreset]{font-size:10px;letter-spacing:.12em;border-left:1px solid rgba(235,226,207,.2)}
.rd-sz b{display:grid;place-items:center;min-width:40px;font:700 10px var(--mono);color:var(--acc)}
@media (max-width:420px){#rdate{display:none}}
.n-range input{width:100%;accent-color:var(--dye,#ffc31a)}
.n-range b{float:right;font-family:var(--mono)}

/* phone, dial past 100%: anchor it at the top of its space and let the lower half run off-screen */
body.rd-big #dialwrap{align-items:flex-start}
body.rd-big #rfoot{background:linear-gradient(transparent,rgba(12,11,9,.92) 40%)}
#rfoot .rd-sz button{min-width:34px;min-height:30px}

/* ---------------------------------------------------------------- home: your 5e shorthand (tap = the STATS page) */
#nStats{grid-area:stats}#rdHome .n-ribbon{grid-area:rib}#pv{grid-area:pv}#dialwrap{grid-area:dial}#rfoot{grid-area:foot}
#nStats:empty,#gooStats:empty{display:none}
#nStats{margin:8px 14px 0}
.n-stats{display:flex;align-items:stretch;gap:3px;width:100%;overflow-x:auto;scrollbar-width:none;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;text-align:center}
.n-stats::-webkit-scrollbar{display:none}
.n-stats span{flex:1 0 auto;display:grid;gap:1px;padding:4px 6px 5px;min-width:40px;background:#14120f;border:1px solid rgba(235,226,207,.14);font:800 14px/1 var(--mono);color:#ebe2cf}
.n-stats b{font:700 8px var(--mono);letter-spacing:.16em;color:rgba(235,226,207,.55)}
.n-stats span.x{background:rgba(235,226,207,.06)}
.n-stats span.x:first-of-type{margin-left:6px}
.n-stats:hover span,.n-stats:focus-visible span{border-color:var(--acc,var(--phos))}
body.rd .n-stats span.ab b{color:var(--acc)}
#gooStats{position:fixed;left:12px;right:12px;top:calc(var(--top) + var(--safe-t) + var(--tick) + 8px);z-index:9;display:none}
body.fl-cluster #gooStats:not(:empty){display:block}
body.fl-cluster #gooStats .n-stats span{border-radius:10px;border:2px solid #000;box-shadow:2px 2px 0 #000;background:#04160a;color:#dfffd6}
body.fl-cluster #gooStats .n-stats span.ab{background:var(--phos,#39ff14);color:#021006}
body.fl-cluster #gooStats .n-stats span.ab b{color:rgba(2,16,6,.6)}
body.fl-cluster #gooStats .n-stats b{color:rgba(223,255,214,.6)}
body.fl-cluster.n-hasstats #gooRibbon{top:calc(var(--top) + var(--safe-t) + var(--tick) + 52px)}
body.fl-cluster.n-hasstats #moldReset,body.fl-cluster.n-hasstats #gooMode{top:calc(var(--top) + var(--safe-t) + var(--tick) + 52px)}
body.fl-cluster.n-hasstats.n-hasrib #moldReset,body.fl-cluster.n-hasstats.n-hasrib #gooMode{top:calc(var(--top) + var(--safe-t) + var(--tick) + 92px)}

/* ---------------------------------------------------------------- STATS page */
.st-head .st-who{width:auto;min-width:150px}
.st-saved{font:700 10px var(--mono);letter-spacing:.16em;color:var(--muted);padding:4px 8px;border:1px solid var(--holo-faint)}
.st-saved.busy{color:var(--phos)}.st-saved.bad{color:#ff5a5a;border-color:#ff5a5a}
.st-top{position:sticky;top:calc(var(--top) + var(--safe-t) + var(--tick) + 44px);z-index:4;margin:0 0 12px;padding:10px 12px;background:rgba(6,10,12,.94);border:1px solid var(--holo-faint);border-left:4px solid var(--c)}
body.rd .st-top{background:#14120f;border-color:rgba(235,226,207,.14);border-left-color:var(--acc)}
.st-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.st-id b{font:800 18px var(--ui);letter-spacing:.04em;text-transform:uppercase}
.st-id span{font:10px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.st-short{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.st-short.empty{display:block;font:11px var(--mono);color:var(--muted)}
.st-t{display:grid;justify-items:center;gap:2px;padding:6px 2px;border:1px solid var(--holo-faint);background:rgba(255,255,255,.03)}
.st-t b{font:700 9px var(--mono);letter-spacing:.16em;color:var(--muted)}
.st-t span{font:800 20px/1 var(--mono);color:var(--phos)}
.st-t span small{font-size:11px;color:var(--muted)}
.st-t.alt span{color:#fff}
body.rd .st-t{border-color:rgba(235,226,207,.14)} body.rd .st-t.alt span{color:#ebe2cf}
@media (min-width:700px){.st-short{grid-template-columns:repeat(11,minmax(0,1fr))}}
.st-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.st-tabs .hbtn{flex:none}
.st-sec h2 small{font:500 9px var(--mono);letter-spacing:.08em;color:var(--muted);margin-left:8px;text-transform:none}
.st-abs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:700px){.st-abs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.st-ab{display:grid;justify-items:center;gap:4px;padding:8px 6px;border:1px solid var(--holo-faint);text-align:center}
.st-ab > span{font:800 13px var(--mono);letter-spacing:.14em}
.st-ab > span em{display:block;font:9px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--muted)}
.st-ab input{width:64px;text-align:center;font:700 18px var(--mono);padding:4px}
.st-ab > b{font:800 22px var(--mono);color:var(--phos)}
.st-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 12px;margin-top:12px}
.st-row:first-child{margin-top:0}
.st-f .inp{width:100%}
.st-f.big input{font:800 22px var(--mono);text-align:center}
.st-big{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:0 12px}
.st-tog{padding:8px 12px;border:1px solid var(--holo-faint);background:none;color:var(--muted);font:700 11px var(--mono);letter-spacing:.14em;cursor:pointer}
.st-tog.on{background:var(--phos);border-color:var(--phos);color:#021006}
body.rd .st-tog.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.st-list{display:grid;gap:2px}
@media (min-width:700px){.st-skills{grid-template-columns:1fr 1fr;column-gap:18px}}
.st-li{display:grid;grid-template-columns:30px 44px minmax(0,1fr) 46px;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.st-li > b{font:800 16px var(--mono);text-align:right;color:var(--phos)}
.st-li > span{font:13px var(--ui)}
.st-li > span em{font:9px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--muted);margin-left:4px}
.st-p{width:28px;height:28px;border:1px solid var(--holo-faint);background:none;color:var(--muted);font-size:14px;cursor:pointer;touch-action:manipulation}
.st-p.on{color:var(--phos);border-color:var(--phos)}
.st-misc{width:46px;padding:4px;text-align:center;font:12px var(--mono)}
.st-passive,.st-calcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.st-passive > div,.st-calcs > div{flex:1 1 120px;display:grid;justify-items:center;padding:8px;border:1px solid var(--holo-faint)}
.st-passive b,.st-calcs b{font:800 22px var(--mono);color:var(--phos)}
.st-passive span,.st-calcs span{font:700 9px var(--mono);letter-spacing:.14em;color:var(--muted)}
.st-death{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 14px}
.st-death > span{font:700 11px var(--mono);letter-spacing:.16em}
.st-death em{font:10px var(--mono);font-style:normal;color:var(--muted)}
.st-pips{display:inline-flex;gap:6px;vertical-align:middle}
.st-pips button{width:22px;height:22px;border-radius:50%;border:2px solid var(--holo-faint);background:none;cursor:pointer;padding:0;touch-action:manipulation}
.st-pips button.on{background:var(--phos);border-color:var(--phos)}
.st-pips.bad button.on{background:#ff4040;border-color:#ff4040}
.st-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.st-atkrow{display:grid;grid-template-columns:1.3fr .6fr 1.2fr 1fr auto;gap:6px;margin-bottom:6px}
@media (max-width:600px){.st-atkrow{grid-template-columns:1fr 1fr;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}.st-atkrow button{grid-column:2;justify-self:end}}
.st-coins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 8px}
.st-coins input{text-align:center}
.st-slots{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.st-slots .st-f{width:90px}
.st-form.ro .inp{opacity:.85}
.st-foot{justify-content:flex-end;margin:6px 0 30px}

/* radial: crew dots circle their page out on the bezel (moved every frame, so no transition) */
#rCrew .n-crew{width:calc(18 * var(--u,1px));height:calc(18 * var(--u,1px));margin:calc(-9 * var(--u,1px)) 0 0 calc(-9 * var(--u,1px));transition:opacity .4s;font-size:calc(10 * var(--u,1px))}
#rCrew .n-crew b{font-size:calc(7 * var(--u,1px));top:calc(100% + 1px)}
#stSkills{scroll-margin-top:calc(var(--top) + var(--safe-t) + var(--tick) + 250px)}
@media (min-width:700px){#stSkills{scroll-margin-top:calc(var(--top) + var(--safe-t) + var(--tick) + 200px)}}
/* the DM's command palette button (⌘K) sits clear of the dock / dial controls, in the DM colour */
body.rd #palFab,body.fl-cluster #palFab,body.fl-dock #palFab{right:12px;bottom:calc(104px + env(safe-area-inset-bottom,0px));width:42px;height:42px;font-size:17px;border-color:#b98cff;color:#b98cff;background:rgba(20,12,34,.9);box-shadow:0 0 16px rgba(185,140,255,.35)}
body.rd #palFab{border-radius:0}
@media (min-width:900px){.n-stats{width:auto;max-width:100%}.n-stats span{flex:0 0 auto;min-width:62px}}

/* ---------------------------------------------------------------- STATS: homebrew, inventory */
.st-hb{display:grid;gap:10px;margin-bottom:10px}
.st-hbrow{display:grid;gap:6px;padding:10px;border:1px solid var(--holo-faint)}
body.rd .st-hbrow{border-color:rgba(235,226,207,.14)}
.st-hbrow input{font-weight:700}
.st-invnote{margin:-6px 0 12px}
.st-invnote a{color:var(--phos)}
body.rd .st-invnote a{color:var(--acc)}

/* ---------------------------------------------------------------- transmissions can carry a picture */
#xmit .ximg:empty{display:none}
#xmit .ximg img{display:block;max-width:100%;max-height:48vh;margin:0 auto 12px;object-fit:contain;border:1px solid var(--phos-soft)}

/* ---------------------------------------------------------------- DM PANEL */
.dmp-head h1{color:#b98cff!important}
.dmp-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.dmp-tabs .hbtn{flex:none}
.cs-col h3 .spacer{flex:1}
.cs-pc.off{opacity:.5}
.dmp-comms .ondot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:rgba(255,255,255,.2)}
.dmp-comms .ondot.up{background:var(--c)}

/* ---------------------------------------------------------------- NULL:SIGNAL */
.ns-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 10px}
.ns-title{margin:0;font:900 30px/1 var(--mono,monospace);letter-spacing:.08em;color:var(--phos);text-shadow:0 0 14px var(--phos-soft,transparent)}
.ns-title span{opacity:.5;animation:ns-blink 1.1s steps(2) infinite}
body.rd .ns-title{color:var(--acc);text-shadow:none}
@keyframes ns-blink{50%{opacity:0}}
.ns-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.ns-meta b{color:var(--phos);font-weight:600}
body.rd .ns-meta b{color:var(--acc)}
.ns-bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.ns-bars i{display:block;width:3px;height:40%;background:var(--phos);opacity:.7;transition:height .12s}
body.rd .ns-bars i{background:var(--acc)}
.ns-box{position:relative;height:calc(100vh - var(--top) - var(--tick) - 330px);height:calc(100dvh - var(--top) - var(--tick) - 330px);min-height:260px;overflow:hidden;
  background:#020605;border:1px solid var(--holo-faint);box-shadow:inset 0 0 60px rgba(0,0,0,.9)}
body.rd .ns-box{background:#0c0b09;border-color:rgba(235,226,207,.14)}
.ns-box canvas{display:block}
.ns-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.7));mix-blend-mode:multiply}
.ns-foot{margin:8px 0 0;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.ns-title span{animation:none}}

/* ---------------------------------------------------------------- DIAL on pages: a bottom bar that reads as buttons */
#rdock{background:#0e0d0b;border-top:1px solid rgba(235,226,207,.18);box-shadow:0 -10px 24px rgba(0,0,0,.6);padding:6px 6px calc(8px + var(--safe-b))}
#rdock .row{gap:5px;align-items:stretch}
#rdock a.dk{gap:3px;padding:7px 0 6px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 12%,#0e0d0b);color:#ebe2cf;font:800 9px var(--ui);letter-spacing:.14em;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:background .15s,transform .1s}
#rdock a.dk::before{display:none}
#rdock a.dk .ic{display:grid;place-items:center;width:26px;height:22px}
#rdock a.dk svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
#rdock a.dk:active{transform:translateY(1px);background:color-mix(in srgb,var(--c) 26%,#0e0d0b)}
#rdock a.dk.on{background:var(--c);border-color:var(--c);color:#0c0b09}
#rdock a.dk.on svg{stroke:#0c0b09}
#rdock a.dk .n-dot{top:2px;left:calc(50% + 6px)}
#rdock .home{justify-content:flex-end;padding-bottom:6px}
@media (hover:hover){#rdock a.dk:hover{background:color-mix(in srgb,var(--c) 24%,#0e0d0b)}}

/* ---------------------------------------------------------------- DIAL home on phones: a compact readout, more room for the dial */
@media (max-width:899px){
  #pv{height:clamp(112px,19vh,150px);min-height:0;max-height:none;padding:8px 12px;margin-top:6px}
  .pv-tag{font-size:8px}
  .pv-name{font-size:28px;margin:5px 0 4px}
  .pv-dat{font-size:18px}
  .pv-row .pv-hint:not(.live){display:none}
  .pv-glance{margin-top:5px}
  .pv-glance li:nth-child(n+4){display:none}
  .pv-glance button{padding:3px 0;grid-template-columns:22px minmax(0,1fr)}
  .pv-glance button > .n-dot{min-width:18px;height:18px;font-size:10px}
  .pv-glance b{font-size:11px}
  .pv-glance span:not(.n-dot){font-size:9.5px}
  .pv-list{margin-top:5px}
  .pv-list li{padding:3px 0;font-size:10px}
  .pv-list li:nth-child(n+3){display:none}
  #nStats{margin-top:6px}
  #rdHome .n-ribbon{margin-top:6px}
  .n-stats span{padding:3px 4px 4px;font-size:13px}
}
@media (max-width:899px) and (max-height:700px){#pv{height:clamp(96px,17vh,120px)}.pv-glance li:nth-child(n+3){display:none}}

/* ---------------------------------------------------------------- incoming message pop-ups (20 s, tap to open) */
#msgPops{position:fixed;left:50%;top:calc(var(--top) + var(--safe-t) + var(--tick) + 8px);transform:translateX(-50%);z-index:160;width:min(460px,calc(100vw - 20px));display:grid;gap:8px;pointer-events:none}
.msgpop{pointer-events:auto;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:10px;align-items:start;width:100%;padding:10px 10px 12px;text-align:left;cursor:pointer;
  background:#0d1210;color:#eaf6ee;border:1px solid var(--c);border-left:4px solid var(--c);box-shadow:0 10px 30px rgba(0,0,0,.7),0 0 18px color-mix(in srgb,var(--c) 35%,transparent);
  font:inherit;opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.2);overflow:hidden}
.msgpop.in{opacity:1;transform:none}.msgpop.out{opacity:0;transform:translateY(-10px) scale(.97)}
.mp-sym{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#0a0a0a;font:800 18px var(--ui)}
.mp-body{display:grid;gap:3px;min-width:0}
.mp-h{display:flex;align-items:baseline;gap:6px;min-width:0}
.mp-h b{font:800 14px var(--ui);color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-h em{font:10px var(--mono);font-style:normal;color:rgba(234,246,238,.55);white-space:nowrap}
.mp-t{margin-left:auto;font:700 8px var(--mono);letter-spacing:.18em;color:rgba(234,246,238,.5)}
.mp-text{font:14px/1.35 var(--ui);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mp-x{display:grid;place-items:center;width:24px;height:24px;color:rgba(234,246,238,.6);font-size:13px}
.mp-x:hover{color:#fff}
.mp-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform-origin:left;animation:mp-bar 20s linear forwards}
@keyframes mp-bar{to{transform:scaleX(0)}}
body.rd .msgpop{background:#14120f;color:#ebe2cf;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);border-radius:0}
body.rd .mp-sym{border-radius:0}
body.fl-cluster .msgpop,body.fl-dock .msgpop{border-radius:16px;border-width:2px;box-shadow:3px 3px 0 #000,0 0 20px color-mix(in srgb,var(--c) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.msgpop{transition:opacity .2s}}

/* ---------------------------------------------------------------- GOO: one top column (stats, ribbon, reset + mode, the readout) */
#gooTop{position:fixed;left:12px;right:12px;top:calc(var(--top) + var(--safe-t) + var(--tick) + 8px);z-index:9;display:none;flex-direction:column;gap:6px;pointer-events:none}
body.fl-cluster #gooTop{display:flex}
#gooTop > *,#gooTop .gt-row > *{pointer-events:auto}
#gooTop #gooStats,#gooTop #gooRibbon,#gooTop #moldReset,#gooTop #gooMode{position:static;top:auto;left:auto;right:auto}
#gooTop .gt-row{display:flex;align-items:center;gap:8px;pointer-events:none}
#gooTop .gt-row .spacer{flex:1}
/* the readout, goo-style */
#gooPv{position:relative;height:clamp(108px,18vh,150px);overflow:hidden;padding:9px 12px;border-radius:16px;border:2px solid #000;cursor:default;
  background:linear-gradient(160deg,rgba(6,28,12,.92),rgba(2,12,6,.94));box-shadow:3px 3px 0 #000,0 0 0 1px color-mix(in srgb,var(--gc,var(--phos)) 55%,transparent),0 0 22px color-mix(in srgb,var(--gc,var(--phos)) 22%,transparent);
  color:#e6ffe0;transition:box-shadow .2s}
#gooPv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gc,var(--phos));border-radius:16px 0 0 16px}
#gooPv.pg{cursor:pointer}
#gooPv.live{box-shadow:3px 3px 0 #000,0 0 0 2px var(--gc,var(--phos)),0 0 30px color-mix(in srgb,var(--gc,var(--phos)) 45%,transparent)}
#gooPv .pv-tag{font:700 8.5px var(--mono);letter-spacing:.18em;color:rgba(230,255,224,.6);display:flex;align-items:center;gap:8px}
#gooPv .pv-tag b{color:#021006;background:var(--gc,var(--phos));padding:2px 7px;border-radius:8px;font-weight:700}
#gooPv .pv-me{margin-left:auto;padding:2px 8px;border-radius:10px;background:var(--c);color:#021006;font:900 italic 10px var(--ui);transform:rotate(-3deg)}
#gooPv .pv-name{display:flex;align-items:center;gap:10px;margin:6px 0 4px;font:900 28px/.95 var(--ui);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  color:var(--gc,var(--phos));text-shadow:0 0 14px color-mix(in srgb,var(--gc,var(--phos)) 50%,transparent)}
#gooPv .pv-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#gooPv .pv-dat{font:800 15px var(--mono);color:#fff}
#gooPv .pv-hint{font:700 8.5px var(--mono);letter-spacing:.16em;color:rgba(230,255,224,.5)}
#gooPv.live .pv-hint{color:#021006;background:var(--gc,var(--phos));padding:3px 7px;border-radius:8px}
#gooPv .pv-list,#gooPv .pv-glance{list-style:none;margin:6px 0 0;padding:0}
#gooPv .pv-list li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-top:1px dashed rgba(230,255,224,.14);font:10.5px var(--mono);animation:rd-line .35s both;animation-delay:calc(var(--k) * 40ms)}
#gooPv .pv-list li span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gooPv .pv-list li span:last-child{white-space:nowrap;color:rgba(230,255,224,.5)}
#gooPv .pv-list li.hot span:first-child::before{content:"NEW";font-size:8px;background:#ff3b5c;color:#fff;padding:1px 4px;border-radius:4px;margin-right:6px}
#gooPv .pv-list li:nth-child(n+3){display:none}
#gooPv .pv-glance li{animation:rd-line .35s both;animation-delay:calc(var(--k) * 45ms)}
#gooPv .pv-glance li:nth-child(n+4){display:none}
#gooPv .pv-glance button{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 8px;width:100%;padding:3px 0;background:none;border:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
#gooPv .pv-glance button > i{width:9px;height:9px;border-radius:50%;background:var(--c);margin:3px 0 0 5px;box-shadow:0 0 8px var(--c)}
#gooPv .pv-glance button > .n-dot{grid-row:1/3;min-width:18px;height:18px;font-size:10px;align-self:center}
#gooPv .pv-glance b{font:700 11.5px var(--ui)}
#gooPv .pv-glance span:not(.n-dot){grid-column:2;font:9.5px var(--mono);color:rgba(230,255,224,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:700px){#gooPv{height:clamp(94px,16vh,118px)}#gooPv .pv-glance li:nth-child(n+3){display:none}#gooPv .pv-name{font-size:24px}}
@media (min-width:900px){
  #gooPv{position:fixed;left:28px;top:50%;transform:translateY(-40%);width:min(380px,28vw);height:auto;min-height:230px;padding:16px 18px}
  #gooPv .pv-name{font-size:44px}
  #gooPv .pv-glance li:nth-child(n+4),#gooPv .pv-list li:nth-child(n+3){display:revert}
  #gooPv .pv-glance li:nth-child(n+6){display:none}
}
/* the atom you're on lifts its tag */
.gn.hot .gn-l{transform:translateX(-50%) scale(1.18) rotate(var(--tilt,0deg));filter:brightness(1.25);z-index:2}
/* GOO 3D: a floor far below the liquid (parallax), tinted by the dye */
#gooFloor{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(ellipse 34% 26% at var(--fx,50%) var(--fy,55%),color-mix(in srgb,var(--phos) 16%,transparent),transparent 70%),
    repeating-radial-gradient(circle at var(--fx,50%) var(--fy,55%),transparent 0 46px,color-mix(in srgb,var(--phos) 10%,transparent) 46px 47px)}
body.fl-cluster #gooFloor{opacity:1}
#goo,#gooLabels,#gooCrew,#wall{backface-visibility:hidden}

/* GOO: floor shadows (height without motion) */
#gooShade{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;filter:blur(3px)}
body.fl-cluster #gooShade{opacity:1}
#gooShade{filter:none!important}

@media (max-width:899px){#gooPv{height:clamp(96px,15vh,124px);padding:8px 11px}#gooPv .pv-glance li:nth-child(n+3){display:none}#gooPv .pv-name{font-size:24px;margin:4px 0 3px}}

/* ---------------------------------------------------------------- GOO home: date + size / reset / GOO-DIAL at the bottom (same as the dial) */
#gooFoot{position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px calc(10px + var(--safe-b));
  font:9px var(--mono);letter-spacing:.14em;color:rgba(223,255,214,.5);pointer-events:none}
body.fl-cluster #gooFoot{display:flex}
#gooFoot > *{pointer-events:auto}
#gooDate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px var(--mono);color:rgba(223,255,214,.72);text-shadow:0 1px 0 #000,0 0 8px #000}
#gooFoot .rd-sz{margin-left:auto;border-radius:14px;border:2px solid rgba(0,0,0,.9);background:rgba(2,16,6,.82);box-shadow:2px 2px 0 #000}
#gooFoot .rd-sz button{color:#dfffd6}
#gooFoot .rd-sz b{color:var(--phos)}
#gooFoot .rd-sz [data-greset]{font-size:10px;letter-spacing:.12em;border-left:1px solid rgba(223,255,214,.2)}
@media (max-width:420px){#gooDate{display:none}}
/* the tags scale with distance; the focused one opens to show its number */
.gn-l{scale:var(--ls,1);transform-origin:50% 0}
.gn-d{display:none;font:700 9px var(--mono);letter-spacing:.1em;margin-left:6px;opacity:.85}
.gn.hot .gn-d{display:inline}
body.fl-cluster #gooTop .gt-row{display:none}
body.fl-cluster #wall{opacity:.42}
/* GOO 3D: category nodes (NAV, COMMS ...) read differently from pages */
.gn.cat .gn-l{background:#050d08!important;color:var(--acc)!important;border:2px solid var(--acc);font-weight:800;letter-spacing:.24em;box-shadow:0 0 12px color-mix(in srgb,var(--acc) 45%,transparent),2px 2px 0 #000}
.gn.cat .gn-g{color:var(--acc);text-shadow:0 0 8px var(--acc)}

/* GOO 3D: every name sits INSIDE its bubble */
.gn.inb .gn-g,.gn.inb .gn-s{display:none}
.gn.inb .gn-l{top:0!important;left:0!important;transform:translate(-50%,-50%)!important;scale:1!important;width:calc(var(--r) * 1.78);white-space:normal;text-align:center;
  font:900 var(--fs,11px)/1 var(--ui)!important;letter-spacing:.05em!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.8),0 0 14px color-mix(in srgb,var(--acc) 60%,transparent)!important;text-transform:uppercase;overflow-wrap:normal}
.gn.inb.cat .gn-l{color:#fff!important;letter-spacing:.14em!important;text-shadow:0 1px 2px #000,0 0 10px var(--acc),0 0 18px var(--acc)!important}
.gn.inb.nuc .gn-l{top:calc(var(--r) * .5)!important;opacity:.9}
.gn.inb.nuc .gn-core .gn-g{display:block;font-size:calc(var(--r) * .55)}
.gn.inb .gn-d{display:none;margin:2px 0 0;font:700 calc(var(--fs,11px) * .78)/1 var(--mono);opacity:.9}
.gn.inb.hot .gn-d{display:block}
.gn.inb.hot .gn-l{scale:1.06!important}

/* GOO 3D luster: sharp rings, orbiting spheres and glints (behind and in front of the goo) */
.goo-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s}
#gooFxB{z-index:5}
#gooFxF{z-index:6}
body.fl-cluster .goo-fx{opacity:1}

/* GOO home, lightweight: no live background blur over the animated canvases, and no separate shadow layer */
body.fl-cluster *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#gooShade{display:none!important}

/* GOO home: labels, text rings and the ghost flock are drawn on the canvas; the DOM labels are only for the page dock */
body.fl-cluster #gooLabels{display:none}
#wall{contain:strict}
.wall-tag{filter:none}

/* GOO page mode: the canvas is only a band along the bottom (a full-screen canvas being resized as Safari's toolbar
   slid in and out while scrolling made the bar flicker); the labels ride on the same band */
body.fl-dock #goo{top:auto;bottom:0;height:calc(170px + var(--safe-b,0px))}
body.fl-dock #gooLabels{top:auto;bottom:calc(170px + var(--safe-b,0px))}

/* tap feedback on the dial's bottom bar: rings burst out of the button and it gives a little bounce */
.tapfx{position:fixed;width:0;height:0;z-index:30;pointer-events:none}
.tapfx::before,.tapfx::after,.tapfx i{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid var(--c,#ebe2cf);
  animation:tapring .75s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}
.tapfx::after{animation-delay:.12s}
@keyframes tapring{0%{transform:scale(.4);opacity:.95}100%{transform:scale(2.3);opacity:0}}
#rdock a.press{animation:tappress .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tappress{30%{transform:scale(.9)}70%{transform:scale(1.06)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.tapfx{display:none}#rdock a.press{animation:none}}

/* round 26: a bigger, louder INDEX button, and a CHAT button just as easy to spot (opens the LIVE panel) */
.n-idxbtn{height:40px;padding:0 15px 0 12px;gap:10px;font:900 13px var(--ui);letter-spacing:.16em;box-shadow:3px 3px 0 #000,0 0 0 2px rgba(57,255,20,.25),0 0 18px rgba(57,255,20,.35)}
.n-idxbtn svg{width:18px;height:15px}
body.rd .n-idxbtn,#rtop .n-idxbtn{box-shadow:3px 3px 0 #000,0 0 16px rgba(235,226,207,.25)}
@media (max-width:420px){.n-idxbtn span:not(.n-dot){display:inline}.n-idxbtn{height:36px;padding:0 10px;font-size:11px;letter-spacing:.1em;gap:6px}}
.n-chatbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;flex:none;cursor:pointer;
  background:#5fd0ff;color:#001018;border:2px solid #000;font:900 13px var(--ui);letter-spacing:.16em;box-shadow:3px 3px 0 #000,0 0 18px rgba(95,208,255,.4)}
body.fl-cluster .n-chatbtn,body.fl-dock .n-chatbtn{transform:skewX(-8deg);border-radius:4px}
body.rd .n-chatbtn{background:#ebe2cf;color:#0c0b09;box-shadow:3px 3px 0 #000,0 0 14px rgba(95,208,255,.35)}
.n-chatbtn:active{transform:translate(2px,2px);box-shadow:none}
.n-chatbtn .cb-dot{width:9px;height:9px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 8px #ff3b5c;animation:ls-rec 1.4s steps(2) infinite}
@media (max-width:420px){.n-chatbtn{height:36px;padding:0 9px;font-size:11px;letter-spacing:.1em;gap:6px}}
@media (max-width:380px){.n-chatbtn span{display:none}}
/* eaten counter next to the date in the home footers */
.eat-chip{display:inline-block;margin-left:12px;padding:2px 8px;border:1px solid rgba(138,255,193,.35);border-radius:10px;font:700 10px var(--mono);letter-spacing:.08em;color:#8affc1;white-space:nowrap}
body.rd .eat-chip{border-color:rgba(57,255,20,.4);color:#7dff5a}
.eat-chip.bump{animation:eat-bump .45s cubic-bezier(.2,.8,.2,1)}
@keyframes eat-bump{30%{transform:scale(1.25);background:rgba(138,255,193,.25)}100%{transform:none}}
/* phones: make room for INDEX + CHAT in the top bar, and keep the eaten counter out of the footer */
@media (max-width:560px){
  #ftop #brand,#rtop #rbrand{display:none}
  .eat-chip{position:fixed;left:10px;bottom:calc(62px + var(--safe-b,0px));margin:0;z-index:9;font-size:9px;padding:2px 7px;background:rgba(0,0,0,.55)}
  #ghostLog{bottom:calc(92px + env(safe-area-inset-bottom))!important}
}
/* the dial's centre is a shiny textured green diamond now (the text under it is hidden) */
#rHubSub,#rHubCode{display:none!important}
.hub-gem{width:calc(66 * var(--u));height:calc(66 * var(--u));filter:drop-shadow(0 0 calc(8 * var(--u)) rgba(57,255,20,.55));cursor:pointer}
.hub-gem .hg-glint{animation:hg-glint 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hg-glint{0%,55%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(140px)}}
@media (prefers-reduced-motion:reduce){.hub-gem .hg-glint{animation:none}}
/* the dial's centre: a closed eye (one horizontal line); some centre taps open it (the eye trick) */
.hub-lid{width:calc(70 * var(--u));height:calc(70 * var(--u));overflow:visible;animation:hub-lid 4s ease-in-out infinite}
@keyframes hub-lid{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.hub-lid{animation:none}}
/* no vignettes (the dial's dark edge, and the one baked into the scanlines) */
body.rd::after{display:none!important}
#scan{background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,10,16,.22) 2px 3px)!important}
/* on the dial's home screen the other players live in the canvas world with the ghosts (they graze, get zapped) */
body.rd-home #rCrew{display:none}

/* round 33: the bottom bar grows a grass-game switch and arrows to move the view; the eaten chip gets a buy button */
#dialwrap{transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.rd-sz .rd-nav{display:inline-flex;align-items:stretch;gap:1px;margin-left:2px;padding-left:2px;border-left:1px solid rgba(235,226,207,.2)}
#rfoot .rd-sz .rd-nav button,#gooFoot .rd-sz .rd-nav button{min-width:26px;padding:3px 4px;font-size:10px;line-height:1}
.rd-sz [data-rdgrass]{font-size:10px;letter-spacing:.12em;border-left:1px solid rgba(235,226,207,.2);color:rgba(235,226,207,.4);text-decoration:line-through}
.rd-sz [data-rdgrass].on{color:#7dff5a;text-decoration:none}
.rd-sz button i{font-style:normal}
@media (max-width:560px){
  .rd-sz button i{display:none}
  #rfoot .rd-sz button{min-width:28px;padding:3px 5px}
  .rd-sz b{min-width:34px}
}
.eat-chip{display:inline-flex;align-items:center;gap:7px}
.eat-chip .ec-buy{font:800 9px var(--mono);letter-spacing:.08em;padding:2px 7px;border-radius:8px;border:1px solid currentColor;background:rgba(138,255,193,.14);color:inherit;cursor:pointer;touch-action:manipulation}
.eat-chip .ec-buy:not(:disabled):hover{background:rgba(138,255,193,.3)}
.eat-chip .ec-buy:disabled{opacity:.35;cursor:default}
.eat-chip .ec-buy[hidden]{display:none}
@media (max-width:560px){.eat-chip{pointer-events:auto}.eat-chip .ec-buy{font-size:8px;padding:2px 5px}}
/* round 34: the eaten counter sits quietly at 40% and doesn't bump as it counts */
.eat-chip{opacity:.4;transition:opacity .25s}
.eat-chip:hover,.eat-chip:focus-within{opacity:1}
.eat-chip.bump{animation:none}
/* low-end devices (html.lowend, set by the frame-rate watch in core.js): no blur, no scanlines, fewer glows */
html.lowend *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lowend #scan{display:none!important}
html.lowend .hub-gem,html.lowend .n-chatbtn .cb-dot{filter:none!important;animation:none!important}
/* round 35: no preview box above the dial, only the big name of whatever is under your finger */
#pv.pv-bare{background:none;border:0;box-shadow:none;display:flex;align-items:flex-end;overflow:visible}
#pv.pv-bare::before,#pv.pv-bare::after{display:none}
#pv.pv-bare .pv-name{width:100%;margin:0;color:var(--gc,#ebe2cf);font-size:clamp(34px,9vw,72px);line-height:.95;text-shadow:0 2px 0 #000}
#pv.pv-bare .pv-name .nm{color:var(--gc,#ebe2cf)}

/* round 46: the dial sits centred like the goo; the big name floats above it with a line from the slice */
#rdHome{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto 1fr auto!important;grid-template-areas:'stats' 'rib' 'pv' 'dial' 'foot'!important}
#dialwrap{align-items:center!important;justify-content:center}
#pv.pv-bare{align-self:auto;margin:4px 14px 0!important;min-height:0!important;height:clamp(40px,7vh,72px)!important;padding:0!important;justify-content:center;align-items:flex-end;text-align:center}
#pv.pv-bare .pv-name{justify-content:center;font-size:clamp(28px,6vh,60px)}
#rlead polyline{stroke-width:1.2}