:root{
  --bg0:#0a0d0f; --bg1:#12171a; --surface:#1a2226; --surface2:#151c20;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.12);
  --amber:#ff7a1a; --amber2:#ffb347; --green:#5fd97a; --fire:#ff4530;
  --crimson:#c1272d; --steel:#4a555c; --text:#e8edf0; --muted:#8a969c; --gold:#ffd700;
  --hud:'Rajdhani',sans-serif; --disp:'Oswald',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg0);color:var(--text);font-family:var(--hud);overscroll-behavior:none;}
body{min-height:100vh;background:radial-gradient(ellipse at 50% -10%, #16202400, #0a0d0f 70%), var(--bg0);}

/* atmosphere overlays */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 3px);
  opacity:.35;mix-blend-mode:multiply;}
#grain{position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9996;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);}

/* buttons */
.btn-primary{background:linear-gradient(135deg,var(--amber),#e8620a);color:#0a0d0f;border:none;
  font-family:var(--disp);font-weight:600;letter-spacing:1.5px;padding:12px 20px;border-radius:2px;
  cursor:pointer;text-transform:uppercase;font-size:13px;transition:.15s;box-shadow:0 0 0 1px #ff7a1a44, 0 4px 14px rgba(255,122,26,0.25);}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 20px rgba(255,122,26,0.5);}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.6);box-shadow:none;}
.btn-primary.full{width:100%;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2);
  font-family:var(--disp);letter-spacing:1.5px;padding:11px 18px;border-radius:2px;cursor:pointer;
  text-transform:uppercase;font-size:12px;transition:.15s;}
.btn-ghost:hover{color:var(--text);border-color:var(--amber);}
.btn-ghost.full{width:100%;margin-top:6px;}
.btn-danger{background:transparent;color:var(--crimson);border:1px solid var(--crimson);
  font-family:var(--disp);letter-spacing:1.5px;padding:11px 18px;border-radius:2px;cursor:pointer;
  text-transform:uppercase;font-size:12px;width:100%;}
.btn-danger:hover{background:var(--crimson);color:#fff;}

/* app shell */
.app-shell{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:130px;}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#0a0d0feb,#0a0d0fbb);backdrop-filter:blur(8px);}
.brand{display:flex;align-items:baseline;gap:8px;}
.brand-mark{color:var(--amber);font-size:20px;filter:drop-shadow(0 0 6px #ff7a1a88);}
.brand-name{font-family:var(--disp);font-weight:700;letter-spacing:3px;font-size:19px;}
.brand-sub{font-family:var(--hud);font-size:9px;letter-spacing:3px;color:var(--muted);}
.top-right{display:flex;align-items:center;gap:10px;}
.callsign{font-family:var(--mono);font-size:12px;color:var(--amber2);letter-spacing:1px;}
.pass-shield{filter:drop-shadow(0 0 5px var(--green));}

.content{padding:16px;}
.view{display:flex;flex-direction:column;gap:14px;}
.fade-in{animation:fadeUp .4s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.section-title{font-family:var(--disp);font-weight:600;letter-spacing:3px;font-size:12px;color:var(--muted);
  margin-top:4px;border-left:3px solid var(--amber);padding-left:10px;text-transform:uppercase;}
.section-title.no-mb{margin:0;}

/* XP bar */
.xpbar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px;position:relative;overflow:hidden;}
.xpbar-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);}
.xpbar-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.lvl-hex{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#1f2a30,#0d1214);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid var(--amber);}
.lvl-hex span{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--amber2);}
.lvl-info{flex:1;}
.lvl-title{font-family:var(--disp);font-weight:600;letter-spacing:2px;font-size:15px;color:var(--gold);text-transform:uppercase;}
.lvl-sub{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;}
.lvl-total{font-family:var(--mono);font-size:13px;color:var(--amber);font-weight:700;}
.xpbar-track{height:12px;background:#0d1214;border-radius:2px;overflow:hidden;border:1px solid var(--border);}
.xpbar-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));transition:width .8s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 12px var(--amber);position:relative;}
.xpbar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2.5s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(200%);}}

/* stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.stat-chip{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;}
.chip-icon{font-size:16px;}
.chip-label{font-family:var(--hud);font-size:8px;letter-spacing:1.5px;color:var(--muted);}
.chip-value{font-family:var(--mono);font-weight:700;font-size:15px;text-align:center;}

/* stamina */
.stamina-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:10px 12px;}
.stamina-label{font-family:var(--disp);letter-spacing:2px;font-size:11px;color:var(--green);margin-bottom:6px;}
.stamina-track{display:flex;gap:3px;}
.stamina-seg{flex:1;height:8px;background:#0d1214;border-radius:1px;transition:.3s;}
.stamina-seg.on{background:var(--green);box-shadow:0 0 6px #5fd97a88;}
.stamina-note{font-size:9px;color:var(--muted);letter-spacing:1px;margin-top:4px;font-style:italic;}

.streak-hint{background:linear-gradient(90deg,#c1272d18,transparent);border-left:2px solid var(--fire);
  padding:8px 12px;font-size:12px;font-family:var(--mono);color:var(--amber2);display:flex;gap:8px;align-items:center;}
.sh-fire{filter:drop-shadow(0 0 6px var(--fire));animation:flick 1.4s infinite alternate;}
@keyframes flick{from{opacity:.7;}to{opacity:1;transform:scale(1.1);}}

.debuff-strip{display:flex;gap:8px;flex-wrap:wrap;}
.debuff{background:#c1272d15;border:1px solid #c1272d44;border-radius:2px;padding:5px 10px;
  font-size:11px;color:#ff9a8a;font-family:var(--disp);letter-spacing:1px;display:flex;gap:5px;align-items:center;}
.db-icon{color:var(--fire);}

/* active mission */
.active-mission{background:var(--surface);border:1px solid var(--amber);border-radius:3px;padding:14px;
  box-shadow:0 0 24px rgba(255,122,26,0.12);position:relative;overflow:hidden;}
.active-mission::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:sweep 3s infinite;}
@keyframes sweep{0%,100%{opacity:.3;}50%{opacity:1;}}
.am-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.am-title{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.5px;}
.kind-badge{font-family:var(--disp);font-size:9px;letter-spacing:2px;padding:3px 7px;border-radius:2px;border:1px solid;font-weight:600;}
.am-progress{margin-bottom:10px;}
.mp-track{height:7px;background:#0d1214;border-radius:2px;overflow:hidden;border:1px solid var(--border);}
.mp-fill{height:100%;background:var(--amber);transition:width .6s;box-shadow:0 0 8px currentColor;}
.mp-text{font-family:var(--mono);font-size:10px;color:var(--muted);}
.next-obj{background:#0d1214;border:1px solid var(--border);border-radius:3px;padding:12px;}
.no-label{font-family:var(--disp);font-size:9px;letter-spacing:3px;color:var(--muted);margin-bottom:6px;}
.no-detail{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-family:var(--hud);}
.no-icon{font-size:18px;}
.no-xp{margin-left:auto;font-family:var(--mono);color:var(--amber);font-size:12px;font-weight:700;}
.big-start{font-size:15px;padding:15px;animation:pulseBtn 2.2s infinite;}
@keyframes pulseBtn{0%,100%{box-shadow:0 0 0 1px #ff7a1a44,0 4px 14px rgba(255,122,26,.25);}50%{box-shadow:0 0 24px rgba(255,122,26,.6);}}
.all-clear{color:var(--green);font-family:var(--disp);letter-spacing:1px;font-size:13px;padding:8px 0;}
.empty-card{background:var(--surface2);border:1px dashed var(--border2);border-radius:3px;padding:20px;
  text-align:center;color:var(--muted);font-size:13px;}

.campaign-strip{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:12px;cursor:pointer;transition:.15s;}
.campaign-strip:hover{border-color:var(--amber);}
.cs-label{font-family:var(--disp);letter-spacing:2px;font-size:12px;color:var(--amber2);text-transform:uppercase;margin-bottom:6px;}
.cs-track{height:6px;background:#0d1214;border-radius:2px;overflow:hidden;}
.cs-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));transition:width .6s;}
.cs-pct{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px;}
.boss-ready{display:inline-block;margin-top:6px;color:var(--crimson);font-family:var(--disp);letter-spacing:2px;font-size:11px;animation:flick 1s infinite alternate;}

/* mission cards */
.mission-stack{display:flex;flex-direction:column;gap:12px;}
.mission-card{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px;transition:.15s;}
.mission-card.active{box-shadow:0 0 18px rgba(255,122,26,.15);}
.mission-card.cleared{opacity:.7;}
.mission-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.mission-title{font-family:var(--disp);font-weight:600;font-size:14px;flex:1;}
.cleared-tag{color:var(--green);font-size:9px;font-family:var(--disp);letter-spacing:2px;}
.mission-desc{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.4;}
.mission-progress{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.mission-progress .mp-track{flex:1;}
.obj-list{display:flex;flex-direction:column;gap:6px;}
.obj-row{display:flex;align-items:center;gap:10px;background:#0d1214;border:1px solid var(--border);border-radius:2px;padding:8px 10px;}
.obj-row.done{opacity:.55;}
.obj-icon{font-size:16px;width:20px;text-align:center;}
.obj-mid{flex:1;min-width:0;}
.obj-label{font-size:13px;font-family:var(--hud);}
.obj-meta{font-size:9px;color:var(--muted);font-family:var(--mono);letter-spacing:.5px;}
.obj-do{background:var(--amber);color:#0a0d0f;border:none;font-family:var(--disp);font-weight:600;letter-spacing:1px;
  padding:6px 14px;border-radius:2px;cursor:pointer;font-size:11px;}
.obj-do:hover{filter:brightness(1.1);}
.obj-check{color:var(--green);font-size:18px;font-weight:700;}
.set-active-btn{margin-top:10px;width:100%;background:transparent;color:var(--amber);border:1px solid var(--amber44,#ff7a1a55);
  font-family:var(--disp);letter-spacing:2px;padding:8px;border-radius:2px;cursor:pointer;font-size:11px;}
.set-active-btn:hover{background:#ff7a1a15;}

/* subtabs */
.subtabs{display:flex;gap:6px;}
.subtab{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  font-family:var(--disp);letter-spacing:1px;font-size:11px;padding:9px 4px;border-radius:2px;cursor:pointer;}
.subtab.on{background:#ff7a1a18;color:var(--amber);border-color:var(--amber);}
.daily-note{font-size:11px;color:var(--muted);font-style:italic;text-align:center;}
.daily-wrap{position:relative;}
.replace-btn{position:absolute;top:12px;right:12px;background:#0d1214;border:1px solid var(--border2);color:var(--muted);
  font-size:10px;padding:4px 8px;border-radius:2px;cursor:pointer;font-family:var(--hud);}
.replace-btn:hover{color:var(--amber);border-color:var(--amber);}

/* boss */
.boss-card{background:linear-gradient(135deg,#1a1012,#12171a);border:1px solid var(--crimson);border-radius:3px;
  padding:16px;position:relative;overflow:hidden;box-shadow:0 0 30px rgba(193,39,45,.2);}
.boss-card.defeated{filter:grayscale(.5);opacity:.75;}
.boss-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(193,39,45,.4),transparent 70%);animation:bossPulse 2s infinite;}
@keyframes bossPulse{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:.8;transform:scale(1.2);}}
.boss-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;}
.boss-skull{font-size:28px;filter:drop-shadow(0 0 8px var(--crimson));}
.boss-name{font-family:var(--disp);font-weight:700;letter-spacing:1px;font-size:15px;color:#ff6b6b;}
.boss-reward{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:1px;}
.boss-desc{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.4;}
.boss-fill{background:var(--crimson)!important;}
.boss-objs{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.boss-obj{display:flex;align-items:center;gap:8px;background:#0d0a0b;border:1px solid #c1272d33;border-radius:2px;padding:8px 10px;}
.boss-obj.done{opacity:.5;}
.bo-icon{font-size:14px;width:18px;text-align:center;color:var(--green);}
.bo-label{flex:1;font-size:12px;}
.bo-do{background:var(--crimson);color:#fff;border:none;font-family:var(--disp);letter-spacing:1px;padding:5px 12px;border-radius:2px;cursor:pointer;font-size:10px;}
.bo-do:hover{filter:brightness(1.2);}
.boss-defeated-tag{margin-top:12px;text-align:center;color:var(--gold);font-family:var(--disp);letter-spacing:3px;font-size:13px;}
.boss-locked-note{text-align:center;color:var(--steel);font-family:var(--disp);letter-spacing:2px;font-size:12px;padding:10px;border:1px dashed #c1272d33;border-radius:2px;}

/* skills */
.skill-tree{display:flex;flex-direction:column;}
.skill-node-wrap{display:flex;flex-direction:column;align-items:center;}
.skill-connector{width:2px;height:20px;background:var(--steel);}
.skill-connector.lit{background:linear-gradient(var(--amber),var(--amber2));box-shadow:0 0 8px var(--amber);}
.skill-node{width:100%;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:12px;position:relative;}
.skill-node.state-locked{opacity:.5;}
.skill-node.state-learning{border-color:var(--amber);box-shadow:0 0 14px rgba(255,122,26,.12);}
.skill-node.state-unlocked{border-color:var(--amber2);}
.skill-node.state-mastered{border-color:var(--gold);box-shadow:0 0 16px rgba(255,215,0,.2);}
.skn-icon{font-size:22px;width:34px;text-align:center;}
.skill-node.state-mastered .skn-icon{color:var(--gold);animation:shimmerGold 2s infinite;}
@keyframes shimmerGold{0%,100%{filter:drop-shadow(0 0 4px var(--gold));}50%{filter:drop-shadow(0 0 12px var(--gold));}}
.skn-body{flex:1;}
.skn-name{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:1px;}
.skn-desc{font-size:11px;color:var(--muted);}
.skn-prog{display:flex;align-items:center;gap:8px;margin-top:6px;}
.skn-track{flex:1;height:5px;background:#0d1214;border-radius:2px;overflow:hidden;}
.skn-fill{height:100%;background:var(--amber);transition:width .5s;}
.skn-pt{font-family:var(--mono);font-size:10px;color:var(--muted);}
.skn-state{font-family:var(--disp);font-size:8px;letter-spacing:1.5px;color:var(--muted);}

/* inventory */
.inv-tabs{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;}
.inv-tab{background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-family:var(--disp);
  letter-spacing:1px;font-size:10px;padding:8px 10px;border-radius:2px;cursor:pointer;white-space:nowrap;}
.inv-tab.on{background:#ff7a1a18;color:var(--amber);border-color:var(--amber);}
.inv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.inv-crate{background:var(--surface);border:1px solid var(--border2);border-radius:3px;padding:12px;display:flex;flex-direction:column;gap:5px;}
.inv-crate.add{align-items:center;justify-content:center;border-style:dashed;cursor:pointer;color:var(--muted);}
.inv-crate.add:hover{border-color:var(--amber);color:var(--amber);}
.inv-crate.ach.lock{opacity:.45;}
.inv-crate.ach.got{border-color:var(--gold);box-shadow:0 0 12px rgba(255,215,0,.1);}
.crate-icon{font-size:26px;}
.crate-name{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.5px;}
.crate-sub{font-size:10px;color:var(--muted);}
.crate-track{height:5px;background:#0d1214;border-radius:2px;overflow:hidden;margin-top:2px;}
.crate-fill{height:100%;background:var(--amber);}
.crate-meta{font-family:var(--mono);font-size:9px;color:var(--muted);}
.crate-btn{margin-top:4px;background:#ff7a1a18;color:var(--amber);border:1px solid var(--amber);font-family:var(--disp);
  letter-spacing:1px;font-size:9px;padding:5px;border-radius:2px;cursor:pointer;}
.crate-btn:hover{background:var(--amber);color:#0a0d0f;}
.inv-form{margin-top:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface2);padding:12px;border-radius:3px;border:1px solid var(--border);}

/* camp */
.camp{position:relative;}
.camp-fire{text-align:center;font-size:40px;filter:drop-shadow(0 0 20px var(--fire));animation:flick 1.2s infinite alternate;}
.camp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.camp-stat{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:10px 6px;text-align:center;}
.cst-v{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--amber2);}
.cst-l{font-family:var(--hud);font-size:8px;letter-spacing:1px;color:var(--muted);}
.camp-block{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:12px;}
.cb-title{font-family:var(--disp);font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:6px;}
.cb-body{font-family:var(--hud);font-size:14px;color:var(--text);}
.review-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);}
.rv-int{font-family:var(--mono);font-size:11px;color:var(--amber);background:#ff7a1a15;padding:3px 8px;border-radius:2px;}
.rv-name{flex:1;font-size:12px;}
.rv-do{background:var(--green);color:#0a0d0f;border:none;font-family:var(--disp);letter-spacing:1px;font-size:10px;padding:5px 10px;border-radius:2px;cursor:pointer;}
.reflect-input{width:100%;min-height:70px;background:#0d1214;border:1px solid var(--border);border-radius:2px;color:var(--text);
  padding:10px;font-family:var(--hud);font-size:13px;resize:vertical;margin-bottom:10px;}
.reflect-input:focus{outline:none;border-color:var(--amber);}
.camp-log{display:flex;flex-direction:column;gap:4px;}
.log-row{font-size:11px;color:var(--muted);font-family:var(--mono);display:flex;gap:8px;}
.lr-date{color:var(--amber);}

/* map */
.map-head{display:flex;justify-content:space-between;align-items:flex-end;}
.map-topic{font-family:var(--disp);font-size:18px;letter-spacing:1px;color:var(--amber2);text-transform:uppercase;}
.map-pct{font-family:var(--mono);font-size:22px;color:var(--amber);font-weight:700;}
.map-canvas-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:3px;overflow:hidden;height:380px;}
.map-canvas{display:block;cursor:pointer;}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--muted);font-family:var(--hud);letter-spacing:1px;}
.map-legend span{display:flex;align-items:center;gap:5px;}
.lg{width:12px;height:12px;border-radius:50%;display:inline-block;}
.lg.cleared{background:var(--amber);}.lg.active{background:transparent;border:2px solid var(--amber);}
.lg.locked{background:var(--steel);}.lg.boss{background:var(--crimson);}
.map-mission{margin-top:6px;}

/* stats */
.chart{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px;}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:120px;}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:3px;}
.chart-bar{width:100%;background:linear-gradient(var(--amber2),var(--amber));border-radius:2px 2px 0 0;min-height:2px;transition:height .5s;}
.chart-x{font-family:var(--mono);font-size:8px;color:var(--muted);}
.chart-label{font-family:var(--disp);letter-spacing:2px;font-size:9px;color:var(--muted);margin-top:10px;text-align:center;}
.consistency{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px;}
.con-label{font-family:var(--disp);letter-spacing:2px;font-size:10px;color:var(--muted);margin-bottom:8px;}
.con-track{height:10px;background:#0d1214;border-radius:2px;overflow:hidden;}
.con-fill{height:100%;background:linear-gradient(90deg,var(--green),#7dff9a);transition:width .6s;}
.con-val{font-family:var(--mono);font-size:14px;color:var(--green);margin-top:6px;font-weight:700;}
.stats-table{background:var(--surface);border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.stat-line{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border);}
.stat-line:first-child{border-top:none;}
.sl-k{font-family:var(--hud);font-size:13px;color:var(--muted);}
.sl-v{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--amber2);}
.danger-zone{margin-top:8px;}

/* tab bar */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;
  display:flex;background:linear-gradient(0deg,#0a0d0f,#0e1315f0);backdrop-filter:blur(10px);
  border-top:1px solid var(--border2);z-index:60;padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.tab-btn{flex:1;background:none;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;cursor:pointer;transition:.15s;position:relative;}
.tab-btn.active{color:var(--amber);}
.tab-btn.active::before{content:"";position:absolute;top:-7px;left:20%;right:20%;height:2px;background:var(--amber);box-shadow:0 0 8px var(--amber);}
.tab-icon{font-size:16px;}
.tab-label{font-family:var(--disp);font-size:8px;letter-spacing:1px;}

.foot{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:4px;font-size:9px;z-index:1;pointer-events:none;}
.foot a{color:#3a464c;text-decoration:none;pointer-events:auto;font-family:var(--mono);}

/* float xp */
.float-xp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9000;
  font-family:var(--disp);font-weight:700;font-size:34px;color:var(--amber);letter-spacing:2px;pointer-events:none;
  text-shadow:0 0 20px var(--amber);animation:floatUp 1.4s ease-out forwards;}
.float-xp.active{color:var(--green);text-shadow:0 0 20px var(--green);}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6);}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}
  80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-120%) scale(.9);}}

/* toast */
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:9000;padding:12px 22px;border-radius:3px;
  font-family:var(--disp);letter-spacing:2px;font-size:13px;animation:toastIn .4s ease;max-width:90%;text-align:center;}
.toast-mission{background:#0d1214;border:1px solid var(--amber);color:var(--amber2);box-shadow:0 0 20px rgba(255,122,26,.3);}
.toast-boss{background:#1a1012;border:1px solid var(--crimson);color:#ff6b6b;box-shadow:0 0 24px rgba(193,39,45,.4);}
.toast-ach{background:#0d1214;border:1px solid var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,.3);}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-20px);}to{opacity:1;transform:translate(-50%,0);}}

/* level up */
.levelup-overlay{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:rgba(10,13,15,.85);cursor:pointer;}
.lu-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,122,26,.3),transparent 60%);animation:luFlash .6s ease-out;}
@keyframes luFlash{from{opacity:1;}to{opacity:0;}}
.lu-content{text-align:center;animation:luPop .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes luPop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.lu-word{font-family:var(--disp);font-weight:700;letter-spacing:8px;font-size:22px;color:var(--amber);text-shadow:0 0 20px var(--amber);}
.lu-num{font-family:var(--disp);font-weight:700;font-size:110px;line-height:1;color:var(--gold);text-shadow:0 0 40px var(--gold);}
.lu-title{font-family:var(--disp);letter-spacing:4px;font-size:18px;color:var(--amber2);text-transform:uppercase;}

/* session timer modal */
.modal-overlay{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;background:rgba(6,8,9,.92);padding:16px;}
.session-modal{background:var(--surface);border:1px solid var(--amber);border-radius:4px;padding:24px;max-width:400px;width:100%;
  position:relative;box-shadow:0 0 40px rgba(255,122,26,.2);animation:luPop .3s ease;}
.session-title{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:1px;text-align:center;}
.session-sub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:16px;}
.timer-ring-wrap{position:relative;display:grid;place-items:center;margin:8px auto 18px;width:220px;}
.timer-digits{position:absolute;font-family:var(--mono);font-weight:700;font-size:40px;color:var(--amber2);}
.timer-presets{display:flex;gap:8px;justify-content:center;margin-bottom:16px;align-items:center;}
.preset{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);font-family:var(--mono);
  padding:8px 14px;border-radius:2px;cursor:pointer;font-size:13px;}
.preset.sel{background:#ff7a1a18;color:var(--amber);border-color:var(--amber);}
.custom-dur{width:60px;background:#0d1214;border:1px solid var(--border2);color:var(--text);padding:8px;border-radius:2px;font-family:var(--mono);text-align:center;}
.timer-actions{display:flex;flex-direction:column;gap:8px;}
.session-done{text-align:center;animation:fadeUp .4s;}
.done-flash{font-family:var(--disp);font-weight:700;letter-spacing:4px;font-size:20px;color:var(--green);margin-bottom:12px;text-shadow:0 0 16px var(--green);}
.done-reward{display:flex;justify-content:center;gap:16px;margin-bottom:16px;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--amber);}
.dr-stam{color:var(--fire);}
.learn-prompt{background:#0d1214;border:1px solid var(--green);border-radius:3px;padding:12px;margin-bottom:14px;text-align:left;}
.lp-title{font-family:var(--disp);letter-spacing:1px;font-size:12px;color:var(--green);margin-bottom:8px;}
.lp-input{width:100%;min-height:60px;background:#0a0d0f;border:1px solid var(--border);color:var(--text);padding:8px;border-radius:2px;font-family:var(--hud);font-size:13px;resize:vertical;}
.lp-input:focus{outline:none;border-color:var(--green);}
.modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;}
.modal-close:hover{color:var(--amber);}

/* onboarding */
.onboard{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;
  background:radial-gradient(ellipse at 50% 30%,#1a1210,#0a0d0f 70%);}
.ob-vignette{position:absolute;inset:0;background:radial-gradient(circle,transparent 40%,rgba(0,0,0,.7));pointer-events:none;}
.ob-inner{max-width:440px;width:100%;position:relative;z-index:1;}
.ob-brand{text-align:center;margin-bottom:26px;}
.ob-mark{font-size:44px;color:var(--amber);filter:drop-shadow(0 0 20px var(--amber));animation:flick 2s infinite alternate;}
.ob-title{font-family:var(--disp);font-weight:700;letter-spacing:10px;font-size:40px;margin-top:6px;}
.ob-tag{font-family:var(--hud);letter-spacing:6px;font-size:11px;color:var(--muted);}
.ob-step{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:22px;display:flex;flex-direction:column;gap:14px;animation:fadeUp .4s;}
.ob-lead{font-size:14px;color:var(--muted);line-height:1.5;font-family:var(--hud);}
.ob-input{width:100%;background:#0d1214;border:1px solid var(--border2);color:var(--text);padding:14px;border-radius:2px;
  font-family:var(--disp);letter-spacing:2px;font-size:15px;text-transform:uppercase;}
.ob-input.sm{font-size:13px;padding:10px;letter-spacing:1px;text-transform:none;}
.ob-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 12px rgba(255,122,26,.2);}
.ob-classes{display:flex;gap:8px;}
.ob-class{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:12px 8px;cursor:pointer;text-align:center;}
.ob-class.sel{border-color:var(--amber);background:#ff7a1a12;}
.oc-name{font-family:var(--disp);font-weight:600;letter-spacing:1px;font-size:14px;}
.oc-desc{font-size:9px;color:var(--muted);margin-top:3px;}
.ob-suggest{display:flex;flex-wrap:wrap;gap:6px;}
.chip-sug{background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:11px;padding:6px 12px;border-radius:20px;cursor:pointer;font-family:var(--hud);}
.chip-sug:hover{border-color:var(--amber);color:var(--amber);}
.ob-nav{display:flex;gap:10px;}
.ob-nav .btn-primary{flex:1;}
.ob-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--steel);}
.ob-dot.on{background:var(--amber);box-shadow:0 0 8px var(--amber);}

@media(max-width:400px){
  .stat-grid,.camp-grid{grid-template-columns:repeat(2,1fr);}
  .lu-num{font-size:80px;}
}
</parameter>
</invoke>