/* =====================================================================
   Arcane midnight: a modern, dark-first look.
   Deep indigo surfaces, ember for actions, arcane violet for highlights.
   ===================================================================== */
:root{
  /* light */
  --bg:#f3f2f8; --bg2:#eceaf4; --surface:#ffffff; --raised:#f1f0f8; --raised2:#e6e4f1;
  --line:#e2e0ee; --line2:#d0cde3;
  --text:#15162a; --text2:#34365a; --muted:#686a8a;
  --accent:#f59a3c; --accent2:#f0643f; --accent-ink:#2a1304; --arcane:#6a56e8; --arcane-soft:rgba(106,86,232,.12);
  --green:#1f9d57; --red:#d83f4f; --amber:#d98a06; --gold:#d98a06;
  --shadow:rgba(30,25,70,.12); --glass:rgba(255,255,255,.82);
  --display:'Sora','Inter',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --lore:'Newsreader',Georgia,serif;
  /* names older parts of the app still use */
  --ink:var(--text); --wine:var(--arcane); --gold-soft:var(--arcane-soft); --page:var(--bg); --card:var(--surface); --paper:var(--raised); --soft:var(--raised2); --track:var(--raised2); --text2:#34365a;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0a0b12; --bg2:#0f1018; --surface:#14162a; --raised:#1c1f38; --raised2:#262a4a;
  --line:#242846; --line2:#343a63;
  --text:#eef0fb; --text2:#c9cde8; --muted:#8f94b8;
  --accent:#ffa04a; --accent2:#ff6a45; --accent-ink:#1d0d02; --arcane:#9a8cff; --arcane-soft:rgba(154,140,255,.16);
  --green:#4ade80; --red:#ff6372; --amber:#fbbf24; --gold:#fbbf24;
  --shadow:rgba(0,0,0,.45); --glass:rgba(20,22,42,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#0a0b12; --bg2:#0f1018; --surface:#14162a; --raised:#1c1f38; --raised2:#262a4a;
    --line:#242846; --line2:#343a63;
    --text:#eef0fb; --text2:#c9cde8; --muted:#8f94b8;
    --accent:#ffa04a; --accent2:#ff6a45; --accent-ink:#1d0d02; --arcane:#9a8cff; --arcane-soft:rgba(154,140,255,.16);
    --green:#4ade80; --red:#ff6372; --amber:#fbbf24; --gold:#fbbf24;
    --shadow:rgba(0,0,0,.45); --glass:rgba(20,22,42,.8);
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.nm,.sub,.pre,.note,.kv span,.feat summary,.empty,.qnote,h2,h3{overflow-wrap:anywhere}

/* ---------- login ---------- */
body.login{min-height:100vh;display:grid;place-items:center;background:var(--bg);color:#eef0fb;position:relative;overflow:hidden}
body.login::before,body.login::after{content:'';position:fixed;width:70vmax;height:70vmax;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
body.login::before{left:-30vmax;top:-30vmax;background:radial-gradient(circle,#5b47d6,transparent 65%);animation:drift 16s ease-in-out infinite alternate}
body.login::after{right:-30vmax;bottom:-30vmax;background:radial-gradient(circle,#ff7a3d,transparent 65%);opacity:.32;animation:drift 20s ease-in-out infinite alternate-reverse}
.gate{position:relative;z-index:1;width:min(320px,86vw);display:grid;gap:12px;text-align:center}
.gate .emblem{width:88px;height:88px;margin:0 auto 2px;filter:drop-shadow(0 0 18px rgba(154,140,255,.55));animation:breathe 4s ease-in-out infinite}
.gate h1{font-size:34px;line-height:1.1;margin-bottom:8px;background:linear-gradient(90deg,#c7bfff,#ffb169);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate h1 span{color:transparent}
.gate input{padding:14px;border-radius:14px;border:1px solid #343a63;text-align:center;background:rgba(20,22,42,.85);color:#eef0fb;font-size:16px}
.gate input:focus{outline:2px solid #9a8cff;border-color:transparent}
.gate button{padding:14px;border:0;border-radius:14px;background:linear-gradient(135deg,#ffa04a,#ff6a45);color:#1d0d02;font-weight:800;letter-spacing:.04em;font-size:14px;box-shadow:0 8px 24px rgba(255,106,69,.35)}
#err{margin:0;color:#ff8b97;min-height:1.2em;font-size:14px}
@keyframes drift{to{transform:translate(8vmax,6vmax)}}
@keyframes breathe{50%{filter:drop-shadow(0 0 28px rgba(154,140,255,.9))}}

/* ---------- shell ---------- */
.wrap{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:104px;position:relative}
.top{position:relative;padding:20px 18px 10px;overflow:hidden}
.top::before,.top::after{content:'';position:absolute;pointer-events:none;border-radius:50%;filter:blur(46px)}
.top::before{width:260px;height:200px;left:-70px;top:-100px;background:radial-gradient(circle,var(--arcane),transparent 68%);opacity:.34;animation:drift 14s ease-in-out infinite alternate}
.top::after{width:220px;height:170px;right:-70px;top:-80px;background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.24;animation:drift 18s ease-in-out infinite alternate-reverse}
.top h1{position:relative;z-index:1;font-size:30px;line-height:1.1;background:linear-gradient(90deg,var(--arcane),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.top h1 span{color:transparent}
.top p{position:relative;z-index:1;margin:4px 0 0;color:var(--muted);font-size:13.5px}
.top p b{color:var(--text2);letter-spacing:.04em}
.top .gear{position:absolute;z-index:2;right:16px;top:18px;border:1px solid var(--line2);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;text-decoration:none;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .gear:empty{display:none}
main{padding:10px 14px}

/* floating tab bar */
nav.bar{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
nav.bar .in{pointer-events:auto;display:flex;width:100%;max-width:456px;padding:6px;border-radius:24px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);box-shadow:0 10px 30px var(--shadow)}
nav.bar a{flex:1;position:relative;display:grid;justify-items:center;gap:2px;padding:8px 0 6px;border-radius:18px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.02em;transition:background .2s,color .2s}
nav.bar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.bar a.on{color:var(--text);background:var(--arcane-soft)}
nav.bar a.on svg{stroke:var(--arcane)}
nav.bar a .dot{position:absolute;top:6px;left:calc(50% + 9px);width:9px;height:9px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2)}

/* ---------- cards and rows ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin-bottom:14px;overflow:hidden;box-shadow:0 2px 12px var(--shadow)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 16px 6px;color:var(--text)}
.card .hd h2{margin:0;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.005em}
.card .hd small{color:var(--muted);font-size:11.5px;letter-spacing:.07em;font-weight:700;margin-left:auto;text-transform:uppercase}
.card .hd .btn{padding:6px 13px;font-size:13px}
.card .bd{padding:6px 16px 16px}
.note{color:var(--muted);font-size:14px;margin:10px 4px 0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill{border:1px solid var(--line2);background:var(--raised);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;transition:.15s}
.pill.on{background:var(--arcane-soft);color:var(--text);border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset}
.empty{text-align:center;color:var(--muted);padding:20px 10px}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.me{background:linear-gradient(90deg,var(--arcane-soft),transparent)}
.row.pc,.row.menu{cursor:pointer;transition:background .15s}
.row.pc:active,.row.menu:active{background:var(--raised)}
.av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;font-family:var(--display);box-shadow:0 2px 8px var(--shadow)}
.av::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.grow{flex:1;min-width:0}
.nm{font-weight:600;font-size:16.5px}
.sub{color:var(--muted);font-size:14px}
.big{font-weight:700;font-size:19px;text-align:right;font-family:var(--display)}
.big small{display:block;font-size:12px;font-weight:600;color:var(--muted);font-family:var(--body)}
.rank{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--raised);color:var(--muted)}
.rank.g{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}
.statcol{text-align:right;flex:none}
.acpill{display:inline-block;margin-top:5px;background:var(--raised2);color:var(--text);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700}
.chev{flex:none;color:var(--muted);font-size:26px;line-height:1}
.mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mini.pad{padding:0 16px 12px}
.tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--red);border-radius:999px;padding:2px 8px}
.tag.pc{background:var(--green);color:#052e16}
.hp{height:10px;border-radius:999px;background:var(--raised2);overflow:hidden;margin-top:8px}
.hp i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#4ade80);transition:width .3s}
.hp i.mid{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.hp i.low{background:linear-gradient(90deg,#ef4444,#ff6372);animation:throb 1.8s ease-in-out infinite}
@keyframes throb{50%{filter:brightness(1.3)}}

/* buttons */
.btn{border:1px solid var(--line2);background:var(--raised);color:var(--text);border-radius:14px;padding:11px 16px;font-weight:600;font-size:14.5px;transition:transform .1s,filter .15s}
.btn.gold{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border:0;font-weight:700;box-shadow:0 6px 18px rgba(255,106,69,.25)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn.red{background:var(--red);color:#fff;border:0}
.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:12px}
.btn:active,.pill:active{transform:scale(.97);filter:brightness(.94)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.iconbtn{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--raised);font-weight:800;font-size:18px;line-height:1}
.back{display:inline-flex;align-items:center;margin:2px 0 10px 2px;font-weight:600;font-size:15px;text-decoration:none;color:var(--arcane)}

/* ---------- dialogs and forms ---------- */
#modal,#confirm{position:fixed;inset:0;z-index:50;background:rgba(5,6,12,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center}
#confirm{z-index:60;align-items:center;padding:20px}
#modal.open,#confirm.open{display:flex}
.sheet{position:relative;background:var(--surface);border:1px solid var(--line2);border-bottom:0;width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:26px 26px 0 0;padding:22px 18px;padding-bottom:calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px var(--shadow)}
.sheet::before{content:'';position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:var(--line2)}
.sheet h2{margin:6px 0 12px;font-family:var(--display);font-size:20px;font-weight:700}
.cbox{background:var(--surface);border:1px solid var(--line2);border-radius:22px;padding:20px;max-width:340px;width:100%;box-shadow:0 20px 50px var(--shadow)}
.cbox p{margin:0;font-size:16.5px}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--raised);font-size:16px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.search:focus{outline:2px solid var(--arcane);border-color:transparent}
.fld textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.search{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--raised);margin-bottom:12px;font-size:16px}
.gen{font-family:var(--display);font-size:19px;text-align:center;padding:12px 0;min-height:50px}
.gen.secret{background:var(--raised);border:1px solid var(--line2);border-radius:14px;user-select:all;word-break:break-all;letter-spacing:.06em}
#toasts{position:fixed;left:0;right:0;bottom:calc(98px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);border:1px solid var(--line2);border-radius:16px;padding:12px 16px;font-size:14.5px;max-width:420px;box-shadow:0 10px 30px var(--shadow);opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--red)}
.skel .bd i{display:block;height:14px;border-radius:8px;margin:10px 0;background:linear-gradient(90deg,var(--raised),var(--raised2),var(--raised));background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- characters ---------- */
.hero{background:linear-gradient(160deg,var(--surface),var(--bg2))}
.hero.me{border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset,0 8px 30px rgba(106,86,232,.2)}
.herotop{display:flex;gap:14px;align-items:center;padding:16px 16px 4px}
.herotop .av{width:56px;height:56px;font-size:20px}
.heroname{margin:0;font-family:var(--display);font-size:24px;line-height:1.15;font-weight:700}
.herosub{color:var(--muted);font-size:15px}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;padding:12px 16px 12px}
.vital{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:9px 4px 8px;text-align:center;min-width:0}
.vital span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.vital b{display:block;font-size:22px;line-height:1.25;font-family:var(--display);font-weight:700}
.vital b small{font-size:12px;font-weight:600;color:var(--muted);font-family:var(--body)}
.vital.hpv{grid-column:1/-1;padding:10px 14px 12px}
.vital.hpv b{font-size:32px}
.hpbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 14px}
.hpbtns .btn{padding:11px 0;font-size:14px;border-radius:12px}
.turnbtn{padding:0 16px 16px;margin-top:0}
.turnbtn .btn{flex:1;padding:14px}

/* section tabs: a segmented control that always fits the screen */
.subtabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 14px;padding:4px;position:sticky;top:8px;z-index:5;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px var(--shadow)}
.subtabs.four{grid-template-columns:repeat(4,1fr)}
.subtabs.two{grid-template-columns:repeat(2,1fr)}
.subtabs button{min-width:0;border:0;background:transparent;border-radius:12px;padding:10px 2px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.15s}
.subtabs button.on{background:var(--arcane-soft);color:var(--text);box-shadow:0 0 0 1px var(--arcane) inset}

.abil2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}
.ab{background:var(--raised);border:1px solid var(--line);border-radius:16px;text-align:center;padding:10px 4px 9px;min-width:0}
.ab b{display:block;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.ab span{display:block;font-size:28px;font-weight:700;line-height:1.2;font-family:var(--display)}
.ab i{display:inline-block;font-style:normal;background:var(--arcane-soft);color:var(--text);border-radius:999px;padding:1px 11px;font-weight:700;font-size:15px}
.ab em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:5px;font-weight:600}
.kv{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv b{flex:none;width:84px;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.kv span{min-width:0}
.srow{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line);font-size:16px}
.srow:first-child{border-top:0}
.sn{flex:1;min-width:0}
.sa{font-size:11.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);background:var(--raised);border-radius:8px;padding:2px 7px}
.sb{min-width:42px;text-align:right;font-size:18px;font-family:var(--display);font-weight:700}
.sb.neg{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--raised);border:1px solid var(--line2);border-radius:12px;padding:8px 13px;font-weight:600;font-size:15px}
.chip b{color:var(--muted);font-size:12px;letter-spacing:.06em;margin-right:4px}
button.chip{font:inherit;font-weight:600}
.atk{padding:14px 16px;border-top:1px solid var(--line)}
.atk:first-child{border-top:0}
.atk1{display:flex;justify-content:space-between;gap:8px;align-items:center}
.atk1 b{font-size:17px;min-width:0;overflow-wrap:anywhere}
.hit{flex:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border-radius:12px;padding:6px 12px;font-weight:700;font-size:15px;border:0;font-family:inherit}
.hit.plain{background:var(--raised2);color:var(--text2);font-size:13px}
.dmg{display:block;font-weight:700;font-size:16px;color:var(--arcane);margin:5px 0 3px;background:none;border:0;padding:2px 0;text-align:left;font-family:inherit}
button.dmg{text-decoration:underline dotted;text-underline-offset:4px}
.feat{border-top:1px solid var(--line)}
.feat:first-child{border-top:0}
.feat summary{padding:14px 16px;list-style:none;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;cursor:pointer}
.feat summary::-webkit-details-marker{display:none}
.feat summary span{font-weight:600;font-size:16px}
.feat summary em{grid-column:1;font-style:normal;color:var(--muted);font-size:14px;margin-top:2px}
.feat summary::after{content:'+';grid-column:2;grid-row:1/span 2;font-size:24px;color:var(--muted);line-height:1}
.feat[open] summary::after{content:'–'}
.feat .pre{padding:0 16px 16px;font-size:15px;line-height:1.55;color:var(--text2)}
.feat.std{background:var(--bg2)}
.feat .btns{padding:0 16px 16px;margin:0}
.irow{padding:13px 16px;border-top:1px solid var(--line);font-size:16px}
.irow:first-child{border-top:0}
.sheetbtns{margin:6px 0 18px}
.sheetbtns .btn{padding:13px 18px;font-size:15px}
.pre{white-space:pre-wrap}
.pre.lore{font-family:var(--lore);font-size:17.5px;line-height:1.6;color:var(--text2)}
.qnote{background:var(--arcane-soft);border:1px solid var(--line2);border-radius:14px;padding:10px 14px;margin:12px 0;font-size:14.5px}

/* trackers */
.trow{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow .nm small{color:var(--muted);font-weight:600}
.pips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:55%}
.pip{width:28px;height:28px;border-radius:50%;border:2px solid var(--arcane);background:linear-gradient(135deg,#b3a8ff,var(--arcane));padding:0;box-shadow:0 0 10px rgba(154,140,255,.35);transition:.15s}
.pip:not(.on){background:transparent;box-shadow:none;opacity:.7}
.pip.good{border-color:var(--green);background:var(--green);box-shadow:0 0 10px rgba(74,222,128,.35)}
.pip.bad{border-color:var(--red);background:var(--red);box-shadow:0 0 10px rgba(255,99,114,.35)}
.pip.good:not(.on),.pip.bad:not(.on){background:transparent;box-shadow:none}
.pip:disabled{cursor:default}
.stepn{display:flex;align-items:center;gap:8px}
.stepn button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--raised);font-size:20px;font-weight:700;line-height:1;padding:0}
.stepn b{min-width:64px;text-align:center;font-size:17px;font-family:var(--display)}
.stepn small{color:var(--muted);font-weight:600}
.deathrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deathrow span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.deathrow .pips{justify-content:flex-start;max-width:none}

/* my turn */
.turnbanner{display:block;margin:0 0 14px;padding:13px 16px;border-radius:18px;background:var(--arcane-soft);border:1px solid var(--arcane);text-decoration:none;font-size:15px}
.turnbanner.go{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border:0;font-weight:600;animation:glowpulse 2.4s ease-in-out infinite}
.turnbanner a{font-weight:700;margin-left:6px}
@keyframes glowpulse{50%{box-shadow:0 0 26px rgba(255,130,60,.55)}}
.turnchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tchip{flex:1 1 70px;padding:13px 6px;border-radius:14px;border:1px solid var(--line2);background:var(--raised);font-weight:600;font-size:14.5px}
.tchip.used{background:transparent;color:var(--muted);text-decoration:line-through;opacity:.7}
.tchip.reset{background:var(--arcane-soft);border-color:var(--arcane)}

/* home */
.bigdate{font-size:19px;font-family:var(--display);font-weight:700}
.rsvp{margin:12px 0 2px;font-size:14.5px;color:var(--muted)}
.rsvp b{color:var(--text)}
.advrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{flex:1 1 130px;display:flex;align-items:center;gap:10px;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:8px 12px;cursor:pointer;min-width:0}
.pchip.me{border-color:var(--arcane);background:var(--arcane-soft)}
.pchip .av{width:32px;height:32px;font-size:12px}
.pchip span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pchip b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip i{font-style:normal;font-size:13px;font-weight:700;color:var(--green)}
.pchip i.mid{color:var(--amber)} .pchip i.low{color:var(--red)}

/* awards, play, feed */
.awards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.award{background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0}
.award small{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--accent)}
.award b{display:block;margin-top:2px}
.award span{font-size:13px;color:var(--muted)}
.init{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}
.init:first-child{border-top:0}
.init.turn{background:linear-gradient(90deg,rgba(255,160,74,.18),transparent);box-shadow:inset 3px 0 0 var(--accent)}
.init.me .nm{color:var(--arcane)}
.init .n{flex:none;width:32px;text-align:center;font-family:var(--display);font-weight:700;font-size:19px}
.initbtns{flex:none;display:flex;gap:5px}
.initbtns .btn{padding:7px 9px}
.frow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.frow:first-child{border-top:0}
.frow.fresh{animation:flash 1.8s ease-out}
@keyframes flash{from{background:var(--arcane-soft)}}
.ftot{flex:none;font-family:var(--display);font-weight:700;font-size:24px;min-width:34px;text-align:right}
.ftot.crit,.diceres.crit b{color:var(--accent)}
.ftot.fumble,.diceres.fumble b{color:var(--red)}
.srdres summary em{font-size:13.5px}

/* ---------- dice ---------- */
.dicepick{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dbtn{min-width:0;border:1px solid var(--line2);background:var(--raised);border-radius:12px;padding:12px 0;font-weight:700;font-size:14px;transition:.15s}
.dbtn.on{background:var(--arcane-soft);border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset}
.steps{display:flex;gap:10px;margin-top:10px}
.step{flex:1;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:4px 6px;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:8px 8px 10px;min-width:0}
.step span{grid-column:1/-1;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.step button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);font-size:20px;font-weight:700;line-height:1;padding:0}
.step b{text-align:center;font-size:18px;font-family:var(--display)}
.dicebox{position:relative;height:184px;margin-top:10px;display:flex;justify-content:center;align-items:center;gap:14px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:20px;background:radial-gradient(ellipse at 50% 60%,var(--arcane-soft),transparent 70%),var(--bg2);border:1px solid var(--line)}
.dicebox.qbox{height:216px;cursor:default}
.stage3d{display:block;width:100%;height:100%}
.diceres{text-align:center;min-height:68px;padding-top:6px}
.diceres b{display:block;font-family:var(--display);font-size:48px;line-height:1.1;font-weight:800}
.diceres small{display:block;color:var(--muted);font-size:14px;font-weight:600}
.dicehist{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px}
.dicehist span{color:var(--muted);font-weight:700;letter-spacing:.08em;font-size:11px;text-transform:uppercase}
.dicehist i{font-style:normal;background:var(--raised);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-weight:600}
.rollable{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.rollable:active{background:var(--raised)}
.sheet.qroll{text-align:center}
.sheet.qroll .advrow,.sheet.qroll .btns{justify-content:center}

/* flat dice (only when a device has no 3D) */
.die{position:relative;width:104px;height:104px}
.die svg{width:100%;height:100%;filter:drop-shadow(0 6px 5px rgba(0,0,0,.4))}
.die .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px;color:#fff}
.die.rolling{animation:tumble 1s cubic-bezier(.25,.6,.35,1)}
.die.crit svg{filter:drop-shadow(0 0 14px #ffb347)}
.die.dropped{opacity:.35}
@keyframes tumble{
  0%{transform:translateY(-70px) rotate(0);opacity:.2}
  25%{transform:translateY(0) rotate(180deg);opacity:1}
  45%{transform:translateY(-30px) rotate(360deg)}
  70%{transform:translateY(0) rotate(540deg)}
  100%{transform:translateY(0) rotate(720deg)}
}
@media (prefers-reduced-motion:reduce){
  .die.rolling,.frow.fresh,.skel .bd i,.top::before,.top::after,.hp i.low,.turnbanner.go,.gate .emblem,body.login::before,body.login::after{animation:none}
}