:root{
  --bg:#070b14; --bg2:#0b1220; --panel:#0e1729; --panel2:#132038; --line:#1f3354; --glow:#3fa9ff;
  --ink:#e6eefc; --muted:#8a9bb8; --accent:#3fa9ff; --ok:#5fd39a; --bad:#ff5a5a; --gold:#ffd166;
  --hp:#e5484d; --mana:#3fa9ff;
  --r-common:#f2f2f2; --r-uncommon:#f6d7a7; --r-rare:#f4a261; --r-epic:#ef6c3a; --r-legendary:#e8352c; --r-mythic:#b0001e;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#10213f 0%,transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);
  font:16.5px/1.45 "Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;padding-top:env(safe-area-inset-top,0px)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600;font-family:"Rajdhani","Barlow",system-ui,sans-serif;letter-spacing:.02em}
[hidden]{display:none!important}
.muted,.small{color:var(--muted)} .small{font-size:.9rem}

/* System window: the one recurring frame */
.win{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:6px;box-shadow:0 0 0 1px rgba(63,169,255,.06),0 0 24px rgba(63,169,255,.06) inset}

/* ---------- Rarity ---------- */
.r{font-weight:600}
.r-common{color:var(--r-common)} .r-uncommon{color:var(--r-uncommon)} .r-rare{color:var(--r-rare)}
.r-epic{color:var(--r-epic)} .r-legendary{color:var(--r-legendary);text-shadow:0 0 10px rgba(232,53,44,.45)}
.r-mythic{color:#fff;background:var(--r-mythic);padding:0 6px;border-radius:3px;box-shadow:0 0 12px rgba(176,0,30,.7)}
.bl-common{border-left-color:var(--r-common)!important} .bl-uncommon{border-left-color:var(--r-uncommon)!important}
.bl-rare{border-left-color:var(--r-rare)!important} .bl-epic{border-left-color:var(--r-epic)!important}
.bl-legendary{border-left-color:var(--r-legendary)!important} .bl-mythic{border-left-color:var(--r-mythic)!important}
.rarity-scale{display:flex;gap:4px;flex-wrap:wrap;font-size:.85rem}
.rarity-scale span{padding:1px 8px;border-radius:3px;background:var(--bg2);border:1px solid var(--line)}

/* ---------- Landing ---------- */
#auth{background:linear-gradient(90deg,rgba(7,11,20,.94) 0%,rgba(7,11,20,.7) 50%,rgba(7,11,20,.88) 100%),url(/art/hero.jpg) center/cover no-repeat fixed}
.landing{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,410px);gap:48px;align-items:center;max-width:1100px;margin:0 auto;padding:40px 24px 60px}
.landing h1{font-size:clamp(3.2rem,8vw,5.4rem);overflow-wrap:anywhere;line-height:.9;font-weight:700;color:#fff;text-shadow:0 0 30px rgba(63,169,255,.45)}
.landing .tag{font-family:"Rajdhani",sans-serif;font-size:1.5rem;color:var(--accent);margin:8px 0 18px}
.landing .pitch{font-size:1.15rem;max-width:40ch;margin:0 0 20px}
.landing ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px;max-width:48ch}
.landing li{display:grid;grid-template-columns:30px 1fr}
.authcard{padding:24px}
.switch{display:flex;border:1px solid var(--line);border-radius:6px;padding:3px;margin-bottom:16px}
.switch button{flex:1;border:0;background:transparent;border-radius:4px;padding:8px;font-weight:600;color:var(--muted)}
.switch button[aria-selected="true"]{background:var(--panel2);color:#fff;box-shadow:inset 0 0 0 1px var(--glow)}
label{display:block;font-weight:600;margin:12px 0 6px}
input[type=text],input[type=password],input[type=number],input[type=email],select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:10px 12px}
input:focus{border-color:var(--glow)}
.hint{font-size:.88rem;color:var(--muted);margin-top:4px}
.err{color:var(--bad);font-size:.92rem;min-height:1.3em;margin:10px 0}
.authcard .btn{width:100%;padding:12px}
.fine{font-size:.85rem;color:var(--muted);margin-top:14px}
@media (max-width:820px){.landing{grid-template-columns:1fr;gap:24px;padding-top:28px;min-height:0}}

/* ---------- Header ---------- */
.top{max-width:1280px;margin:0 auto;padding:14px 20px 6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1.9rem;color:#fff;text-shadow:0 0 18px rgba(63,169,255,.5)}
.hunter{display:flex;align-items:center;gap:14px;margin-left:auto;padding:8px 14px}
.rank{width:52px;height:52px;display:grid;place-items:center;font-family:"Rajdhani",sans-serif;font-weight:700;font-size:2rem;color:#fff;
  border:1px solid var(--glow);border-radius:6px;background:radial-gradient(circle,rgba(63,169,255,.25),transparent 70%);text-shadow:0 0 12px var(--glow)}
.rank.S{border-color:var(--r-legendary);background:radial-gradient(circle,rgba(232,53,44,.35),transparent 70%);text-shadow:0 0 14px var(--r-legendary)}
.hunter .who{font-weight:600}
.hunter .lvl{font-family:"Rajdhani",sans-serif;font-size:1.1rem}
.xp{height:6px;width:180px;background:var(--bg);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:4px}
.xp i{display:block;height:100%;background:linear-gradient(90deg,#1e6fd9,var(--glow));box-shadow:0 0 8px var(--glow)}
.purse{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.purse b{color:var(--gold)}
.pts{background:var(--accent);color:#04101f;font-weight:700;border-radius:3px;padding:0 7px;font-size:.85rem}
.boost{color:var(--ok);font-weight:600;font-size:.9rem}

/* ---------- Layout ---------- */
.layout{max-width:1280px;margin:0 auto;padding:10px 20px 40px;display:grid;grid-template-columns:190px minmax(0,1fr) 300px;gap:18px;align-items:start}
nav{display:flex;flex-direction:column;gap:3px;position:sticky;top:10px}
.tabbtn{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:1px solid transparent;border-radius:5px;padding:8px 10px;color:var(--muted)}
.tabbtn:hover{color:var(--ink);background:rgba(63,169,255,.06)}
.tabbtn.on{color:#fff;border-color:var(--line);background:var(--panel);box-shadow:inset 3px 0 0 var(--glow)}
.tabbtn .ic{width:22px;text-align:center}
.tabbtn .nm{flex:1}
.badge{background:var(--accent);color:#04101f;border-radius:3px;font-size:.75rem;padding:0 6px;font-weight:700}
.navsep{height:1px;background:var(--line);margin:6px 4px}

main{padding:20px 22px;min-height:460px;min-width:0}
.ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ph h2{font-size:1.9rem;color:#fff}
.ph .sub{color:var(--muted)}
h3.sec{font-size:1.25rem;color:#fff;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.note{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:12px 14px;margin:10px 0 14px}

.btn{background:linear-gradient(180deg,#2a8cf0,#1a6fd0);color:#fff;border:1px solid #5bb6ff;border-radius:5px;padding:7px 14px;font-weight:600;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.btn.stop{background:linear-gradient(180deg,#d9443f,#a92b27);border-color:#ff7a75}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink);font-weight:500}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.mini{background:transparent;border:1px solid var(--line);border-radius:4px;padding:2px 9px;font-size:.86rem;color:var(--ink)}
.mini:hover{border-color:var(--glow)}
.mini:disabled{opacity:.4;cursor:not-allowed}
.mini.on{background:var(--panel2);border-color:var(--glow);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}

.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:11px 10px;border-top:1px solid var(--line);border-left:3px solid transparent}
.row .ic{font-size:1.5rem;text-align:center}
.row .t{font-weight:600}
.row .m{color:var(--muted);font-size:.9rem}
.row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.up{color:var(--ok)} .down{color:var(--bad)}

/* Battle */
.scene{position:relative;min-height:340px;border:1px solid var(--line);border-radius:6px;background-size:cover;background-position:center;overflow:hidden;
  cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:manipulation;display:flex;flex-direction:column;padding:12px 16px}
.scene.boss{border-color:var(--r-legendary);box-shadow:0 0 22px rgba(232,53,44,.25) inset}
.sc-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sc-right{text-align:right}
.floor{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1.8rem;color:#fff;line-height:1;text-shadow:0 0 12px rgba(63,169,255,.6)}
.stuck{color:var(--gold);font-weight:600;font-size:.9rem}
.foe{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.foe-ic{display:block;width:130px;height:130px;border-radius:10px;border:1px solid rgba(63,169,255,.5);object-fit:cover;box-shadow:0 0 22px rgba(0,0,0,.8),0 0 14px rgba(63,169,255,.25);margin-bottom:4px}
.scene.boss .foe-ic{width:160px;height:160px;border-color:var(--r-legendary);box-shadow:0 0 26px rgba(232,53,44,.45)}
.foe-ic.hit{animation:hit .14s ease-out}
.foe-ic.cyc{filter:hue-rotate(160deg) saturate(1.3)}
@keyframes hit{0%{transform:scale(.9) translateX(-4px);filter:brightness(2.2)}100%{transform:none}}
.foe-n{font-weight:600;color:#fff;text-shadow:0 1px 4px #000}
.foebar{width:min(360px,80%);height:12px}
.sc-bottom{display:flex;flex-direction:column;align-items:center;gap:2px}
.pips{display:flex;gap:5px;width:min(360px,80%)}
.pips i{flex:1;height:6px;border-radius:2px;background:rgba(255,255,255,.18)}
.pips i.done{background:var(--glow);box-shadow:0 0 6px var(--glow)}
.timer{width:min(360px,80%);height:8px;border-radius:3px;background:rgba(0,0,0,.5);border:1px solid var(--r-legendary);overflow:hidden}
.timer i{display:block;height:100%;background:linear-gradient(90deg,var(--r-legendary),var(--gold))}
#pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;transform:translate(-50%,-50%);font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1.5rem;color:var(--gold);
  text-shadow:0 0 6px #000,0 0 2px #000;animation:pop .8s ease-out forwards}
@keyframes pop{to{transform:translate(-50%,-160%);opacity:0}}
.statline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:10px 2px 0}
.statline b{color:#fff;font-family:"Rajdhani",sans-serif;font-size:1.2rem}
.note.wall{border-color:var(--gold)}
.note.wall .btn{margin-left:6px}
.ph .qty{margin:0 0 0 auto}
.row.hero{grid-template-columns:64px 1fr auto}
.row.hero .ic{position:relative}
.por{display:block;width:64px;height:64px;border-radius:6px;border:1px solid var(--line);object-fit:cover;box-shadow:0 0 10px rgba(63,169,255,.15)}
.row.hero.locked{opacity:.6}
.row.hero.locked .por{filter:grayscale(1) brightness(.35)}
.lock{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem}
.btn.buy{min-width:120px;line-height:1.15;padding:6px 12px}
.btn.buy small{font-weight:500;color:#ffe9b0}
.ess b{color:#c9a6ff}
.rebirth{border-color:#6c4bb4;margin:8px 0}
.rebirth p{margin:6px 0 10px}
@media (prefers-reduced-motion:reduce){.pop,.foe-ic.hit{animation:none}.pop{opacity:0}}
@media (max-width:620px){.scene{min-height:290px}.trait{font-size:.78rem}.foe-ic{width:100px;height:100px}.scene.boss .foe-ic{width:120px;height:120px}.row.hero{grid-template-columns:52px 1fr}.por{width:52px;height:52px}.row.hero > :last-child{grid-column:1 / -1;justify-content:stretch}.btn.buy{width:100%}}

.bar{height:10px;background:var(--bg);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:4px 0 2px}
.bar i{display:block;height:100%;background:var(--hp)}
.gaterank{font-family:"Rajdhani",sans-serif;font-weight:700;border:1px solid var(--line);border-radius:3px;padding:0 6px;color:#fff}
table.grid{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.grid th{text-align:left;font-weight:600;color:var(--muted);font-size:.86rem;padding:8px 8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:8px;border-bottom:1px solid var(--line)}
table.grid .r-al{text-align:right}
table.grid tr.me td{background:rgba(63,169,255,.12);font-weight:600}
table.grid tr.pick td{background:rgba(63,169,255,.08)}
.tablewrap{overflow-x:auto}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 14px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:12px 14px;min-width:0}
.card .t{font-weight:600;margin-bottom:4px}

/* Journal */
aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:10px}
aside section{padding:14px 16px}
aside h3{font-size:1.2rem;color:#fff;margin-bottom:6px}
.log{list-style:none;margin:0;padding:0;font-size:.9rem;max-height:calc(100vh - 220px);overflow:auto}
.log li{padding:5px 0;border-top:1px solid var(--line)}
.log li:first-child{border-top:0}
.log li.lvl{color:var(--accent);font-weight:600}
.log li.bad{color:var(--bad)}
.log li.join{color:var(--ok);font-weight:600}
.log li.boss{color:var(--gold)}
.log li.shadow{color:#c9a6ff;font-weight:600}
.log li.r-legendary,.log li.r-epic,.log li.r-rare,.log li.r-mythic{font-weight:600}
.log li.r-mythic{background:transparent;box-shadow:none;padding:5px 0;color:#ff4d6a}
.log time{color:var(--muted);font-size:.78rem;margin-right:6px}


.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--glow);color:#fff;padding:10px 16px;border-radius:5px;z-index:20;max-width:min(90vw,480px);text-align:center;box-shadow:0 0 20px rgba(63,169,255,.3)}
dialog{border:1px solid var(--glow);border-radius:6px;background:var(--panel);color:var(--ink);max-width:500px;width:calc(100% - 32px);padding:22px 24px;box-shadow:0 0 40px rgba(63,169,255,.25)}
dialog::backdrop{background:rgba(2,5,12,.7)}
dialog h2{font-size:1.8rem;color:#fff;margin-bottom:6px}
.dlgbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

@media (max-width:1100px){
  .layout{grid-template-columns:1fr;padding-bottom:40px}
  nav{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px}
  .tabbtn{flex:0 0 auto}
  .navsep{display:none}
  aside{position:static}
  .log{max-height:300px}
  .hunter{margin-left:0;width:100%}
}
@media (max-width:620px){
  main{padding:16px 12px}
  .cards2{grid-template-columns:1fr}
  .row{grid-template-columns:30px 1fr}
  .row > :last-child{grid-column:2;justify-content:flex-start}
  .xp{width:120px}
  table.grid td,table.grid th{padding-left:5px;padding-right:5px}
}

/* Profile and avatars */
.avwrap{position:relative;width:56px;height:56px;flex:0 0 auto}
.av{display:block;width:56px;height:56px;border-radius:8px;border:1px solid var(--glow);object-fit:cover;box-shadow:0 0 12px rgba(63,169,255,.3)}
.avwrap .rank{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;font-size:1rem;border-radius:5px;background:var(--panel)}
.av.sm{display:inline-block;width:26px;height:26px;border-radius:4px;vertical-align:middle;margin-right:8px;box-shadow:none;border-color:var(--line)}
.av.lg{width:84px;height:84px;flex:0 0 auto}
.card.profile{display:flex;gap:14px;align-items:center}
.avgrid{display:flex;flex-wrap:wrap;gap:8px}
.avpick{padding:0;border:2px solid transparent;border-radius:9px;background:none}
.avpick .av{width:64px;height:64px;border-color:var(--line);box-shadow:none}
.avpick:hover .av{border-color:var(--glow)}
.avpick.on{border-color:var(--gold)}
.hsname{white-space:nowrap}

/* Chests and shards */
.por.emo{display:grid;place-items:center;font-size:2rem;background:radial-gradient(circle,#1a2b4d,var(--bg2))}
.chestgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 4px}
.card.chest{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.chest .cic{font-size:2.6rem;line-height:1.2}
.chest .cnt{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:1.6rem;color:#fff}
.chest .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.chest.t2{border-color:#8a6d1f}
.chest.t3{border-color:#6c4bb4}
.chest.locked{opacity:.5}
.shardbar{max-width:260px;height:8px}
.shardbar i{background:linear-gradient(90deg,#6c4bb4,#c9a6ff)}
.row.hero.locked-soft .por{filter:grayscale(.6) brightness(.7)}
.loot{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.loot li{display:flex;gap:12px;align-items:center}
.loot .por{width:44px;height:44px}
dialog .por{display:inline-grid}
.log li.chest{color:var(--gold)}
@media (max-width:620px){.chestgrid{grid-template-columns:1fr 1fr}}

.bestiary{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:10px}
.zone .zh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.zone.unseen{opacity:.55}
.zmobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0}
.zmobs figure{margin:0;text-align:center}
.zmobs img,.zmobs .q{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:6px;border:1px solid var(--line);object-fit:cover;background:var(--bg);font-size:1.4rem;color:var(--muted)}
.zmobs figure:last-child img{border-color:var(--r-legendary)}
.zmobs figcaption{font-size:.72rem;color:var(--muted);line-height:1.15;margin-top:3px}
.trialcard{display:flex;gap:14px;align-items:flex-start}
.trialcard .por{width:84px;height:84px;flex:0 0 auto}
.trialcard p{margin:4px 0 8px}
.tiers{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;font-size:.85rem}
.tiers span{border:1px solid var(--line);border-radius:4px;padding:2px 8px;background:var(--bg)}
.tiers span.on{border-color:var(--gold);color:var(--gold)}
.trialscene{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;margin:8px 0;border:1px solid var(--r-legendary);border-radius:6px;
  background:radial-gradient(circle at 50% 35%,rgba(232,53,44,.25),var(--bg2) 70%);cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden}
.trialscene .foe-ic{width:150px;height:150px;border-color:var(--r-legendary);pointer-events:none}
.trialscene .foe-n,.trialscene .bar,.trialscene .small{pointer-events:none}
#trPops{position:absolute;inset:0;pointer-events:none}
.trait{margin-top:4px;font-size:.85rem;color:#ffd0c8;background:rgba(120,10,10,.55);border:1px solid var(--r-legendary);border-radius:4px;padding:2px 8px;text-align:center;max-width:90%}
.trait b{color:#fff}
.featured{font-size:.8rem;font-weight:600;color:#04101f;background:var(--gold);border-radius:3px;padding:0 6px;white-space:nowrap}
.pop.crit{font-size:2rem;color:#ff8a5c;text-shadow:0 0 10px #ff3b1f,0 0 3px #000}
.mini.steward.on{background:#3a2275;border-color:#a986ff}
.linkbtn{background:none;border:0;padding:0;margin-top:12px;color:var(--accent);text-decoration:underline;font-size:.92rem}
.authcard .linkbtn{display:block}
.code{font-family:ui-monospace,Consolas,monospace;font-size:1.4rem;letter-spacing:.06em;color:#fff;background:var(--bg);border:1px solid var(--gold);border-radius:5px;padding:10px 12px;text-align:center;user-select:all;margin:10px 0}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.statgrid div{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:8px 10px}
.statgrid b{display:block;font-family:"Rajdhani",sans-serif;font-size:1.3rem;color:#fff}

/* Awakening */
.awaken{border-color:#8a6d1f;background:linear-gradient(180deg,rgba(255,209,102,.07),var(--bg2))}
.awaken p{margin:6px 0 10px}
.btn.awk{background:linear-gradient(180deg,#b8892a,#7d5a14);border-color:var(--gold)}

/* Sound toggle */
.iconbtn{background:transparent;border:1px solid var(--line);border-radius:5px;padding:4px 8px;font-size:1.1rem;line-height:1}
.iconbtn:hover{border-color:var(--glow)}

/* Shadow Burst */
.btn.burst{background:linear-gradient(180deg,#5b3aa8,#3a2275);border-color:#a986ff}
.btn.burst.ready{box-shadow:0 0 12px rgba(169,134,255,.7);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 22px rgba(169,134,255,1)}}
.pop.big{font-size:2.6rem;color:#d9c2ff;text-shadow:0 0 14px #7a4dff,0 0 4px #000;animation:popbig 1.2s ease-out forwards}
@keyframes popbig{0%{transform:translate(-50%,-50%) scale(.4)}20%{transform:translate(-50%,-60%) scale(1.2)}to{transform:translate(-50%,-180%) scale(1);opacity:0}}
.scene.shake{animation:shake .35s}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
@media (prefers-reduced-motion:reduce){.scene.shake,.btn.burst.ready{animation:none}.pop.big{animation:none;opacity:0}}

/* Hunter skills and stars */
.skill{font-size:.86rem;color:var(--muted);margin-top:2px}
.skill.on{color:#bfe0ff}
.skill.on b{color:#fff}
.stars{color:var(--gold);letter-spacing:1px;font-size:.95rem}
.stars .off{color:var(--line)}

/* Getting started */
.note.guide{border-color:var(--glow);margin-top:14px}
.note.guide ol{margin:6px 0 0;padding-left:22px}
.note.guide li{color:var(--muted);padding:1px 0}
.note.guide li.done{text-decoration:line-through;opacity:.6}
.note.guide li.now{color:#fff;font-weight:600}
.note.guide .ph{margin:0}

/* Quests */
.streak{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:10px 0}
.day{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:6px 2px;text-align:center}
.day .dic{font-size:1.6rem;line-height:1.3}
.day.done{opacity:.45}
.day.today{border-color:var(--gold);box-shadow:0 0 12px rgba(255,209,102,.3)}
.questbar{max-width:320px;height:8px}
.questbar i{background:linear-gradient(90deg,#1e6fd9,var(--glow))}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.ach{display:flex;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:8px 10px;opacity:.55}
.ach.on{opacity:1;border-color:#8a6d1f}
.ach .aic{font-size:1.6rem}
.ach .t{font-weight:600}
.ach .bonus{font-size:.82rem;color:var(--ok)}
.ach .ab{flex:1;min-width:0}
.ach .bar{height:6px;margin:3px 0 0}
.note.daily{border-color:var(--gold)}
.note.daily .btn{margin-left:6px}
.log li.ach{color:var(--ok);font-weight:600}
@media (max-width:620px){.streak{gap:3px}.day .dic{font-size:1.2rem}}