:root{--night:#0a0705;--ink:#f3ece4;--muted:#8d8177;--glow:#e8963c;--glow2:#f5b164;--bad:#f0a79d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);overflow:hidden;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[hidden]{display:none!important}
.screen{position:relative;height:100vh;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.screen::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:70%;
  background:radial-gradient(60% 60% at 50% 40%,rgba(232,150,60,.20),transparent 70%);pointer-events:none}
.loading{margin:auto;color:var(--muted)}
.main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.top{position:relative;padding:22px 56px 0;text-align:center}
.gear,.x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;padding:0}
.gear{position:absolute;top:12px;right:8px}
.gear svg,.x svg{width:22px;height:22px}
.gear:hover,.gear:focus-visible,.x:hover,.x:focus-visible{color:var(--ink);background:rgba(255,255,255,.06);outline:none}
.brand{font-size:24px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(232,150,60,.35);
  background:rgba(232,150,60,.10);color:var(--glow2);border-radius:999px;padding:5px 12px;font-size:13px;min-height:27px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--glow2);animation:blink 1.4s ease-in-out infinite}
.pill.idle{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--muted)}
.pill.idle .dot{background:var(--muted);animation:none}
.pill.bad{border-color:rgba(226,104,91,.45);background:rgba(226,104,91,.12);color:var(--bad)}
.pill.bad .dot{background:var(--bad);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.discs{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0}
.arena{position:relative;width:100%;flex:1 1 0;min-height:0;max-height:330px;display:flex;align-items:center;justify-content:center}
.discs.many .arena{max-height:270px}
.gname{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:14px;color:var(--muted)}
.halo{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.05);pointer-events:none;width:300px;height:300px}
.halo.h2{width:240px;height:240px;border-color:rgba(232,150,60,.10)}
.discs.many .halo{width:230px;height:230px}.discs.many .halo.h2{width:190px;height:190px}
.orb{position:relative;width:170px;height:170px;border-radius:50%;border:0;cursor:grab;
  background:radial-gradient(120% 120% at 35% 28%,#f7c07e,#e8963c 46%,#c9701f 100%);color:#2a1704;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 14px 40px rgba(232,150,60,.35),0 0 90px rgba(232,150,60,.22);
  touch-action:none;-webkit-user-select:none;user-select:none;font-family:inherit;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.discs.many .orb{width:140px;height:140px}
.orb:focus-visible{outline:3px solid #fff;outline-offset:6px}
.orb .verb{font-size:18px;font-weight:700;letter-spacing:.06em}
.orb .hint{font-size:11.5px;opacity:.72;max-width:120px;text-align:center;line-height:1.25}
.orb svg{width:36px;height:36px;margin-bottom:2px}
.orb.busy,.orb:disabled{filter:saturate(.7) brightness(.7);cursor:default}
.socket{position:absolute;width:170px;height:170px;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(232,150,60,.30);opacity:0;transition:opacity .18s}
.discs.many .socket{width:140px;height:140px}
.socket.on{opacity:1}
.guide{position:absolute;bottom:calc(50% + 96px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;pointer-events:none;opacity:0;transition:opacity .22s}
.discs.many .guide{bottom:calc(50% + 80px)}
.guide.on{opacity:1}
.guide svg{width:20px;height:20px;color:var(--glow2);margin-bottom:-7px}
.guide svg:nth-child(1){opacity:.28;animation:rise 1.9s ease-in-out infinite}
.guide svg:nth-child(2){opacity:.55;animation:rise 1.9s ease-in-out .18s infinite}
@keyframes rise{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
.foot{padding:0 24px 18px;display:flex;flex-direction:column;gap:6px}
.last{margin:0;min-height:19px;font-size:12.5px;color:var(--muted);text-align:center}
.prog{opacity:0;transition:opacity .25s}
.prog.on{opacity:1}
.bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--glow),var(--glow2))}
.prog .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:7px}
/* R5.24 — how to put the page on the home screen, while it is not there. */
.install{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  background:rgba(232,150,60,.08);border:1px solid rgba(232,150,60,.25);border-radius:14px;padding:10px 44px 10px 14px}
.install p{margin:0;font-size:13px;line-height:1.45;color:var(--ink)}
.install .k{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin:0 2px;color:var(--glow2)}
.install .btn{padding:6px 14px;min-height:36px}
.install .x{position:absolute;top:0;right:0}
.msg{margin:0;min-height:21px;font-size:14px;color:var(--bad);text-align:center}
/* R5.22 — a short screen shrinks the disc rather than scroll. */
@media (max-height:680px){
  .top{padding-top:14px}.brand{font-size:21px;margin-bottom:8px}
  .orb,.socket{width:140px;height:140px}.orb svg{width:30px;height:30px}
  .halo{width:240px;height:240px}.halo.h2{width:196px;height:196px}
  .guide{bottom:calc(50% + 80px)}
}
.sheet{position:absolute;inset:0;z-index:2;background:var(--night);display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  transform:translateY(100%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s}
.sheet.open{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.shtop{display:flex;align-items:center;padding:14px 8px 6px 22px}
.shtop h2{flex:1;margin:0;font-size:18px;font-weight:600}
.shbody{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 18px;display:flex;flex-direction:column;gap:12px}
.card{background:rgba(255,255,255,.035);border-radius:18px;padding:14px}
.card h3{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.share{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.share p{margin:0;font-size:14px;color:var(--muted)}
.qr{width:190px;height:190px;background:#fff;border-radius:12px;display:block}
.btn{border:1px solid rgba(232,150,60,.45);background:rgba(232,150,60,.10);color:var(--glow2);border-radius:12px;
  padding:10px 18px;min-height:44px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn:focus-visible{outline:2px solid var(--glow2);outline-offset:2px}
.refuse{margin:0;font-size:14px;color:var(--bad);text-align:center}
.refuse:empty{display:none}
.empty{margin:0;font-size:14px;color:var(--muted)}
.jrow{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:14px;border-top:1px solid rgba(255,255,255,.05)}
.jrow:first-child{border-top:0}
.jrow .d{width:6px;height:6px;border-radius:50%;background:var(--glow);flex:0 0 auto;opacity:.8}
.jrow.bad .d{background:var(--bad)}
.jrow .t{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open{transition:none}}
.codescreen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 34px;text-align:center;position:relative}
.codescreen h1{font-size:22px;margin:0 0 8px;font-weight:600}
.codescreen p{color:var(--muted);font-size:14px;margin:0 0 26px}
.codescreen form{width:100%}
.codescreen input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  color:var(--ink);font-size:22px;letter-spacing:.18em;text-align:center;padding:15px 12px;font-family:inherit;text-transform:uppercase}
.codescreen input:focus{outline:2px solid var(--glow);border-color:transparent}
.codescreen button{margin-top:14px;width:100%;border:0;border-radius:14px;padding:15px;background:var(--glow);color:#2a1704;
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer}
.codescreen button:disabled{opacity:.6}
.codescreen .err{color:var(--bad);font-size:14px;margin:14px 0 0;min-height:21px}