/* StudyBuddy — tactical combat HUD design tokens
Inspired by Football Manager 24, gt-mechanik (industrial blueprint), pally (clean type), lightdash (data-dense). */
:root{
/* Surfaces — near-black with a green-tinted shadow */
--bg-0: #07090a; /* outer void */
--bg-1: #0a0d0e; /* app bg */
--bg-2: #0f1314; /* panel */
--bg-3: #141a1c; /* raised */
--bg-4: #1a2123; /* hover */
/* Lines — hairlines */
--line: rgba(255,255,255,0.06);
--line-2: rgba(255,255,255,0.10);
--line-3: rgba(255,255,255,0.18);
--line-grid: rgba(255,255,255,0.035);
/* Type */
--fg: #e8efe9;
--fg-1: #c5cfc7;
--fg-2: #8b958d;
--fg-3: #5a635c;
--fg-4: #3a423d;
/* Accent — chartreuse / emerald (palette option 2) */
--accent: #7dd87d;
--accent-2: #5cb85c;
--accent-soft: rgba(125,216,125,0.10);
--accent-line: rgba(125,216,125,0.35);
--accent-glow: rgba(125,216,125,0.45);
/* Semantic */
--hp: #d94545;
--hp-2: rgba(217,69,69,0.14);
--block:#5b8def;
--block-2:rgba(91,141,239,0.14);
--insight:#e7c14b;
--insight-2:rgba(231,193,75,0.14);
--xp: #c084fc;
--warn: #f59e0b;
--crit: #ffd24a;
/* Tier */
--t-common: #8b958d;
--t-rare: #5b8def;
--t-epic: #b076ff;
--t-legendary: #e7c14b;
--t-mythic: #ff5f6e;
/* Intent badges */
--i-heavy: #ff5f6e;
--i-light: #ffb15c;
--i-defend: #5b8def;
--i-debuff: #b076ff;
--i-buff: #7dd87d;
--i-summon: #e7c14b;
--i-utility: #8b958d;
--i-telegraph:#ff5f6e;
/* Type families */
--font-display: 'Space Grotesk', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
--font-body: 'Inter', system-ui, sans-serif;
/* Radius — sharp by default */
--r-0: 0px;
--r-1: 2px;
--r-2: 4px;
--r-3: 6px;
/* Motion */
--t-fast: 110ms cubic-bezier(.4,0,.2,1);
--t-base: 200ms cubic-bezier(.4,0,.2,1);
/* ============================================================
* UI OVERHAUL v2 — Linear × Arc × Apple HIG redesign tokens
* Replaces the Phase A additive block. Combat HUD (.ch-*) and any
* pre-redesign selectors keep using legacy --bg-*, --fg-* tokens above.
* NEW UI ALWAYS reaches for these tokens — never the legacy ones.
* ============================================================ */
/* Surfaces — each tier ~3% lighter than previous for dark-safe elevation */
--surface-0: #0c0d10; /* app canvas */
--surface-1: #11141a; /* sidebar */
--surface-2: #161a20; /* card */
--surface-3: #1c2028; /* raised / hover row */
--surface-4: #232832; /* active row / well */
--surface-5: #2b3140; /* deep-hover */
/* Glass surfaces — combine with backdrop-filter on floating chrome only */
--glass-1: rgba(20, 23, 28, 0.62);
--glass-2: rgba(28, 32, 40, 0.72);
--glass-tint: rgba(125, 216, 125, 0.04);
--surface-glass: var(--glass-1); /* legacy alias for code that already references --surface-glass */
/* Borders — hairline, translucent */
--border-1: rgba(255, 255, 255, 0.06);
--border-2: rgba(255, 255, 255, 0.10);
--border-3: rgba(255, 255, 255, 0.16);
--border-strong: rgba(255, 255, 255, 0.22);
/* Text tiers — off-white only, never pure */
--text-1: #e8efe9;
--text-2: #b8c0bb;
--text-3: #7c857f;
--text-4: #515a55;
--text-5: #353c38;
/* Brand & semantic */
--accent-soft-2: rgba(125, 216, 125, 0.18);
--accent-fg: #07120a;
--hp-soft: rgba(240, 104, 104, 0.12);
--hp-line: rgba(240, 104, 104, 0.32);
--insight-soft: rgba(240, 194, 91, 0.12);
--insight-line: rgba(240, 194, 91, 0.30);
--block-soft: rgba(122, 169, 255, 0.12);
--block-line: rgba(122, 169, 255, 0.30);
--xp-soft: rgba(192, 132, 252, 0.12);
--xp-line: rgba(192, 132, 252, 0.30);
--ink: #e8efe9;
--shard: #ffb15c;
/* Type families — alias for code that uses --font-sans/--font-mono */
--font-sans: var(--font-body);
/* --font-mono already defined above */
/* Fluid type scale */
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-md: 14px;
--text-lg: clamp(15px, 0.85vw + 10px, 17px);
--text-xl: clamp(18px, 1.0vw + 12px, 22px);
--text-2xl: clamp(22px, 1.4vw + 14px, 30px);
--text-3xl: clamp(28px, 2.0vw + 16px, 44px);
--text-4xl: clamp(36px, 3.2vw + 18px, 64px);
/* Spacing — strict 4/8px grid */
--sp-0: 0;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 28px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-14: 56px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* Radius */
/* Bumped one step for a softer/more premium feel on cards.
* (sm 4→6, md 8→10, lg 12→16, xl 16→20). Buttons keep their snappier
* smaller radii via .btn rules below; only token-driven cards/tiles
* pick up the change. */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
/* Motion — refined easing curves */
--t-fast-2: 140ms cubic-bezier(0.4, 0, 0.2, 1);
--t-base-2: 220ms cubic-bezier(0.4, 0, 0.2, 1);
--t-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
--t-spring: 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
/* Chrome heights — used by app-shell grid */
--topbar-h: 44px;
--statusbar-h: 28px;
--sidebar-w: 232px;
--sidebar-w-collapsed: 60px;
/* Canonical breakpoints (reference only — CSS @media can't read vars yet) */
--bp-sm: 640px;
--bp-md: 1024px;
--bp-lg: 1280px;
--bp-xl: 1600px;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
margin:0;
background: var(--bg-1);
/* tactical grid backdrop */
background-image:
linear-gradient(var(--line-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
radial-gradient(1200px 700px at 50% -10%, rgba(125,216,125,0.04), transparent 60%);
background-size: 32px 32px, 32px 32px, 100% 100%;
background-position: 0 0, 0 0, 0 0;
color: var(--fg);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.005em;
overflow: hidden;
}
::selection{background:var(--accent-soft); color:var(--fg)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
/* ───────── Type primitives ───────── */
.mono{font-family:var(--font-mono); font-feature-settings:"tnum","ss01"; letter-spacing:0}
.display{font-family:var(--font-display); letter-spacing:-0.02em; font-weight:600}
.cap{
font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em;
text-transform:uppercase; color:var(--fg-3); font-weight:500;
}
.cap-line{
display:flex; align-items:center; gap:8px;
}
.cap-line::after{
content:""; flex:1; height:1px; background:var(--line);
}
.num{font-family:var(--font-mono); font-feature-settings:"tnum"; font-weight:500}
/* ───────── Panel primitives ───────── */
.panel{
background:var(--bg-2);
border:1px solid var(--line);
position:relative;
}
.panel-corners{position:relative}
.panel-corners::before,
.panel-corners::after{
content:""; position:absolute; width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.panel-corners::before{top:-1px; left:-1px; border-right:none; border-bottom:none}
.panel-corners::after{bottom:-1px; right:-1px; border-left:none; border-top:none}
/* ───────── Layout ───────── */
.app{
display:grid;
grid-template-rows: 44px 1fr 28px;
grid-template-columns: 320px 1fr 320px;
grid-template-areas:
"topbar topbar topbar"
"left stage right"
"status status status";
height:100vh;
gap:0;
}
.topbar { grid-area: topbar }
.left { grid-area: left }
.stage { grid-area: stage }
.right { grid-area: right }
.statusbar{ grid-area: status }
/* ───────── Topbar ───────── */
.topbar{
display:flex; align-items:stretch;
border-bottom:1px solid var(--line);
background:var(--bg-2);
}
.tb-brand{
display:flex; align-items:center; gap:10px;
padding:0 16px; border-right:1px solid var(--line);
min-width:240px;
}
.tb-mark{
width:20px; height:20px; position:relative;
background:var(--accent);
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.tb-mark::after{
content:""; position:absolute; inset:4px;
background:var(--bg-2);
clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}
.tb-title{font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; font-size:13px}
.tb-title .ver{color:var(--fg-3); font-family:var(--font-mono); font-size:10px; margin-left:8px; letter-spacing:0.1em}
.tb-tabs{display:flex; align-items:stretch}
.tb-tab{
display:flex; align-items:center; gap:8px;
padding:0 16px; border-right:1px solid var(--line);
font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
text-transform:uppercase; color:var(--fg-2); cursor:pointer;
transition: color var(--t-fast), background var(--t-fast);
}
.tb-tab:hover{color:var(--fg); background:var(--bg-3)}
.tb-tab.is-active{color:var(--fg); background:var(--bg-3); position:relative}
.tb-tab.is-active::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
background:var(--accent);
}
.tb-tab .key{
display:inline-flex; align-items:center; justify-content:center;
min-width:14px; height:14px; padding:0 3px;
background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-3);
font-size:9px; letter-spacing:0;
}
.tb-spacer{flex:1}
.tb-stats{
display:flex; align-items:stretch; border-left:1px solid var(--line);
}
.tb-stat{
display:flex; flex-direction:column; justify-content:center;
padding:0 16px; border-right:1px solid var(--line); min-width:88px;
}
.tb-stat:last-child{border-right:none}
.tb-stat .k{font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-3)}
.tb-stat .v{font-family:var(--font-mono); font-size:13px; color:var(--fg); font-weight:500; line-height:1}
.tb-stat .v small{color:var(--fg-3); font-size:10px; margin-left:2px}
/* ───────── Side rails ───────── */
.left, .right{
background:var(--bg-2);
display:flex; flex-direction:column;
overflow:hidden;
}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line)}
.rail-section{
border-bottom:1px solid var(--line);
padding:14px 14px 12px;
}
.rail-section:last-child{border-bottom:none}
.rail-section h4{
margin:0 0 10px;
font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em;
text-transform:uppercase; color:var(--fg-3); font-weight:500;
display:flex; align-items:center; gap:8px;
}
.rail-section h4 .pill{
font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em;
padding:1px 5px; border:1px solid var(--line-2); color:var(--fg-2);
}
.rail-section h4 .grow{flex:1}
.rail-scroll{flex:1; overflow:auto}
/* Loadout slot */
.slot{
display:flex; align-items:center; gap:10px;
padding:8px 10px;
background:var(--bg-3);
border:1px solid var(--line);
margin-bottom:6px;
cursor:pointer;
transition: border var(--t-fast), background var(--t-fast);
}
.slot:hover{border-color:var(--line-3); background:var(--bg-4)}
.slot.is-active{border-color:var(--accent-line); background: linear-gradient(90deg, var(--accent-soft), transparent 60%)}
.slot .sprite{flex-shrink:0}
.slot .meta{flex:1; min-width:0}
.slot .name{font-size:12px; color:var(--fg); font-weight:500; line-height:1.2}
.slot .sub{font-family:var(--font-mono); font-size:10px; color:var(--fg-3); letter-spacing:0.05em; margin-top:2px}
.slot .right-num{font-family:var(--font-mono); font-size:11px; color:var(--fg-2)}
/* Stat row */
.stat-row{
display:grid; grid-template-columns: 1fr auto;
font-family:var(--font-mono); font-size:11px;
padding:3px 0;
border-bottom:1px dashed var(--line);
color:var(--fg-1);
}
.stat-row:last-child{border-bottom:none}
.stat-row .k{color:var(--fg-3); letter-spacing:0.06em}
.stat-row .v{color:var(--fg); font-weight:500}
.stat-row .v.up{color:var(--accent)}
.stat-row .v.down{color:var(--hp)}
/* Bars */
.bar{
height:6px; background:var(--bg-3); position:relative; overflow:hidden;
border:1px solid var(--line);
}
.bar > span{display:block; height:100%; background:var(--accent); transition: width var(--t-base)}
.bar.hp > span{background:var(--hp)}
.bar.hp::before{
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,0.25) 9px 10px);
pointer-events:none;
}
.bar.xp > span{background:var(--xp)}
/* Pixel sprites — drawn by SVG, color via currentColor */
.sprite{
width:32px; height:32px; display:inline-block;
image-rendering: pixelated;
background: var(--bg-1);
border:1px solid var(--line);
position:relative;
}
.sprite svg{width:100%; height:100%; display:block; image-rendering:pixelated}
.sprite.lg{width:56px; height:56px}
.sprite.xl{width:88px; height:88px}
.sprite.sm{width:22px; height:22px}
.sprite.tier-rare{ box-shadow: inset 0 0 0 1px var(--t-rare) }
.sprite.tier-epic{ box-shadow: inset 0 0 0 1px var(--t-epic) }
.sprite.tier-legendary{ box-shadow: inset 0 0 0 1px var(--t-legendary) }
.sprite.tier-mythic{ box-shadow: inset 0 0 0 1px var(--t-mythic) }
/* ───────── Stage ───────── */
.stage{
display:grid;
grid-template-rows: auto 1fr auto auto;
background:
radial-gradient(60% 50% at 50% 30%, rgba(125,216,125,0.05), transparent 70%),
var(--bg-1);
position:relative;
overflow:hidden;
}
.stage::before{
/* faint blueprint scanlines */
content:""; position:absolute; inset:0;
background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px);
pointer-events:none;
}
.stage::after{
/* center crosshair grid hint */
content:""; position:absolute; inset:0;
background:
linear-gradient(90deg, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(0deg, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
background-size: 100% 100%;
opacity:0.0; /* off — leave hook */
pointer-events:none;
}
/* Stage header */
.stage-hdr{
display:flex; align-items:stretch;
border-bottom:1px solid var(--line);
background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
position:relative; z-index:2;
}
.sh-left{ padding:10px 16px; border-right:1px solid var(--line); min-width:220px }
.sh-left .chap{font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent)}
.sh-left .name{font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.01em; margin-top:2px}
.sh-mid{
flex:1; display:flex; align-items:center; justify-content:center; gap:18px;
padding:8px 16px;
border-right:1px solid var(--line);
}
.sh-streak{
display:flex; align-items:center; gap:8px;
}
.sh-streak .pips{display:flex; gap:3px}
.sh-streak .pip{
width:10px; height:10px; border:1px solid var(--line-2); background:var(--bg-3);
transform: rotate(45deg);
}
.sh-streak .pip.on{background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow)}
.sh-mom{ display:flex; align-items:center; gap:6px }
.sh-mom .dot{
width:8px; height:8px; border-radius:99px; background:var(--bg-3); border:1px solid var(--line-2);
}
.sh-mom .dot.on{ background:var(--insight); border-color:var(--insight); box-shadow:0 0 6px rgba(231,193,75,0.6) }
.sh-right{ padding:10px 16px; min-width:200px; text-align:right }
.sh-right .turn{font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-3)}
.sh-right .biome{font-family:var(--font-display); font-size:14px; color:var(--fg-1); margin-top:2px}
.sh-right .biome b{color:var(--accent); font-weight:600}
/* Enemy lineup */
.enemy-row{
display:flex;
gap:10px;
padding:12px 18px 8px;
align-items:flex-end; justify-content:center;
position:relative; z-index:2;
min-height: 220px;
}
.enemy-row > *{ flex:1 1 0; min-width:0 }
.enemy-card{
min-width:0;
display:flex; flex-direction:column; gap:8px;
background:var(--bg-2);
border:1px solid var(--line-2);
padding:10px;
position:relative;
cursor:pointer;
transition: border var(--t-fast), transform var(--t-fast);
}
.enemy-card::before{
content:""; position:absolute; inset:-1px;
border:1px solid transparent; pointer-events:none;
}
.enemy-card:hover{ transform: translateY(-2px); border-color: var(--line-3) }
.enemy-card.is-target{
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-soft), 0 12px 30px rgba(0,0,0,0.4);
}
.enemy-card.is-target::after{
content:"▼ TARGET"; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:var(--accent);
}
.enemy-card.is-dead{ opacity:0.35; filter:grayscale(1); cursor:not-allowed }
.enemy-portrait{
display:flex; align-items:flex-end; justify-content:center;
height:88px;
background:
linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
repeating-linear-gradient(45deg, var(--bg-3) 0 4px, var(--bg-2) 4px 8px);
border:1px solid var(--line);
position:relative; overflow:hidden;
}
.enemy-portrait::before{
/* blueprint scan */
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.02) 3px 4px);
}
.enemy-portrait .sprite{
width:64px; height:64px; background:transparent; border:none;
}
.enemy-portrait .tier-tag{
position:absolute; top:4px; left:4px;
font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em;
padding:1px 5px; background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-2);
text-transform:uppercase;
}
.enemy-portrait .lv-tag{
position:absolute; top:4px; right:4px;
font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em;
padding:1px 5px; background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-1);
}
.enemy-name{
font-family:var(--font-display); font-size:12px; font-weight:600;
display:flex; justify-content:space-between; align-items:baseline; gap:6px;
min-width:0;
}
.enemy-name > span:first-child{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
}
.enemy-name .hp-num{font-family:var(--font-mono); font-size:10px; color:var(--fg-2); font-weight:500; flex-shrink:0}
.enemy-name .hp-num b{color:var(--fg)}
.enemy-passives{display:flex; gap:4px; flex-wrap:wrap}
.passive-chip{
font-family:var(--font-mono); font-size:9px; letter-spacing:0.06em;
padding:1px 4px; background:var(--bg-3); border:1px solid var(--line); color:var(--fg-2);
}
.enemy-intent{
display:flex; align-items:center; gap:8px;
padding:6px 8px;
background:var(--bg-1);
border:1px solid var(--line);
border-left-width:2px;
position:relative; overflow:visible;
}
.enemy-intent.heavy_dmg, .enemy-intent.fatal_dmg{ border-left-color: var(--i-heavy) }
.enemy-intent.med_dmg{ border-left-color: var(--i-light) }
.enemy-intent.light_dmg{ border-left-color: var(--i-light) }
.enemy-intent.defend{ border-left-color: var(--i-defend) }
.enemy-intent.debuff{ border-left-color: var(--i-debuff) }
.enemy-intent.buff{ border-left-color: var(--i-buff) }
.enemy-intent.summon{ border-left-color: var(--i-summon) }
.enemy-intent.heal{ border-left-color: var(--i-buff) }
.enemy-intent.utility, .enemy-intent.telegraph{ border-left-color: var(--i-utility) }
.enemy-intent .ico{
width:16px; height:16px; display:flex; align-items:center; justify-content:center;
color:var(--fg-1);
}
.enemy-intent .lbl{ flex:1; min-width:0 }
.enemy-intent .lbl{min-width:0}
.enemy-intent .lbl .nm{font-family:var(--font-mono); font-size:10px; color:var(--fg); letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.enemy-intent .lbl .ds{font-family:var(--font-mono); font-size:9px; color:var(--fg-3); letter-spacing:0.04em}
.enemy-intent .v{font-family:var(--font-mono); font-size:13px; color:var(--fg); font-weight:600}
.enemy-intent.heavy_dmg .v, .enemy-intent.fatal_dmg .v{color:var(--i-heavy)}
/* Question slab */
.q-slab{
margin: 10px 24px 6px;
background:var(--bg-2);
border:1px solid var(--line);
position:relative; z-index:2;
}
.q-slab-hdr{
display:flex; align-items:center; justify-content:space-between;
padding:8px 14px;
border-bottom:1px solid var(--line);
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.q-slab-hdr .left{display:flex; gap:10px; align-items:center}
.q-slab-hdr .right{display:flex; gap:8px; align-items:center; font-family:var(--font-mono); font-size:10px; color:var(--fg-3); letter-spacing:0.12em; text-transform:uppercase}
.q-tag{
font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
padding:2px 6px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
.q-concept{font-family:var(--font-mono); font-size:10px; color:var(--fg-2); letter-spacing:0.08em}
.q-body{padding:18px 22px}
.q-prompt{
font-family:var(--font-display); font-size:22px; line-height:1.3; font-weight:500;
color:var(--fg); letter-spacing:-0.01em;
text-wrap: pretty; max-width: 720px;
}
.q-options{
display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px;
margin-top:14px;
}
.q-opt{
display:flex; align-items:center; gap:10px; min-width:0;
padding:10px 12px;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
text-align:left; font-family:var(--font-body); font-size:13px; color:var(--fg-1);
transition: border var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.q-opt:hover{border-color:var(--line-3); background:var(--bg-4); transform:translateY(-1px)}
.q-opt .key{
font-family:var(--font-mono); font-size:10px; letter-spacing:0;
width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-2);
flex-shrink:0;
}
.q-opt:hover .key{border-color:var(--accent-line); color:var(--accent)}
.q-opt.is-correct{border-color:var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 80%)}
.q-opt.is-wrong{border-color:var(--hp); background: linear-gradient(90deg, var(--hp-2), transparent 80%); color:var(--fg-1)}
.q-opt.is-eliminated{opacity:0.3; text-decoration:line-through; cursor:not-allowed}
/* Hotbar */
.hotbar{
display:flex; align-items:stretch; gap:0;
border-top:1px solid var(--line);
background: linear-gradient(0deg, var(--bg-2), var(--bg-1));
position:relative; z-index:2;
}
.hb-slot{
flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px;
padding:10px 10px;
border-right:1px solid var(--line);
cursor:pointer;
position:relative;
transition: background var(--t-fast);
overflow:hidden;
}
.hb-bottom .desc{min-width:0}
@media (max-width: 1500px){
.hb-tier{display:none}
}
.hb-slot:last-child{border-right:none}
.hb-slot:hover{ background:var(--bg-3) }
.hb-slot.is-selected{
background: linear-gradient(0deg, var(--accent-soft), transparent);
}
.hb-slot.is-selected::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent);
}
.hb-slot.is-locked{ opacity:0.4; cursor:not-allowed }
.hb-top{display:flex; align-items:center; gap:8px}
.hb-key{
font-family:var(--font-mono); font-size:10px;
width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-3);
flex-shrink:0;
}
.hb-name{font-family:var(--font-mono); font-size:11px; color:var(--fg); letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1}
.hb-tier{font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3)}
.hb-tier.basic{color:var(--fg-3)}
.hb-tier.core{color:var(--block)}
.hb-tier.advanced{color:var(--t-epic)}
.hb-bottom{display:flex; align-items:center; gap:8px}
.hb-bottom .desc{font-family:var(--font-mono); font-size:10px; color:var(--fg-2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb-bottom .cd{font-family:var(--font-mono); font-size:10px; color:var(--warn)}
/* ───────── Right rail ───────── */
.intel-row{
display:flex; align-items:flex-start; gap:8px;
padding:8px 0;
border-bottom:1px dashed var(--line);
font-family:var(--font-mono); font-size:11px;
}
.intel-row:last-child{border-bottom:none}
.intel-row .ts{ color:var(--fg-3); font-size:10px }
.intel-row .msg{flex:1; color:var(--fg-1); line-height:1.4}
.intel-row .msg b{color:var(--accent); font-weight:500}
.intel-row.dmg .msg b{color:var(--hp)}
.intel-row.heal .msg b{color:var(--accent)}
.intel-row.crit .msg b{color:var(--crit)}
/* Mistake pool / weakness */
.weak-row{
display:flex; align-items:center; gap:8px;
padding:6px 0;
border-bottom:1px dashed var(--line);
font-family:var(--font-mono); font-size:11px;
}
.weak-row .lbl{flex:1; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.weak-row .x{color:var(--hp)}
.weak-row .bar-mini{
width:60px; height:4px; background:var(--bg-3); border:1px solid var(--line);
position:relative; overflow:hidden;
}
.weak-row .bar-mini > span{display:block; height:100%; background:var(--hp)}
/* Status bar */
.statusbar{
display:flex; align-items:center; padding:0 16px; gap:18px;
background:var(--bg-2);
border-top:1px solid var(--line);
font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; color:var(--fg-3);
text-transform:uppercase;
}
.statusbar .grow{flex:1}
.statusbar .blink{
display:inline-block; width:8px; height:8px; background:var(--accent); margin-right:6px;
animation: blink 1.6s infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0.2} }
/* Float damage */
.fx-float{
position:absolute; pointer-events:none;
font-family:var(--font-mono); font-weight:700; font-size:18px;
color:var(--hp); text-shadow:0 0 12px rgba(217,69,69,0.8);
animation: float 1.0s cubic-bezier(.2,.8,.4,1) forwards;
}
.fx-float.crit{color:var(--crit); font-size:24px; text-shadow:0 0 14px rgba(255,210,74,0.8)}
.fx-float.heal{color:var(--accent); text-shadow:0 0 12px var(--accent-glow)}
.fx-float.block{color:var(--block); text-shadow:0 0 12px rgba(91,141,239,0.8)}
@keyframes float{
0%{ transform:translateY(0); opacity:0 }
20%{ opacity:1 }
100%{ transform:translateY(-40px); opacity:0 }
}
/* Hit shake */
@keyframes shake{
10%, 90%{ transform: translate3d(-1px, 0, 0) }
20%, 80%{ transform: translate3d(2px, 0, 0) }
30%, 50%, 70%{ transform: translate3d(-3px, 0, 0) }
40%, 60%{ transform: translate3d(3px, 0, 0) }
}
.is-hit{ animation: shake .35s linear }
/* Tooltips (native title is ok, but reusable) */
.tip{
position:relative;
}
.tip .tip-body{
position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
background:var(--bg-1); border:1px solid var(--line-2); padding:6px 8px;
font-family:var(--font-mono); font-size:10px; color:var(--fg-1);
white-space:nowrap; opacity:0; pointer-events:none;
transition:opacity var(--t-fast);
z-index:99;
}
.tip:hover .tip-body{opacity:1}
/* Token definitions live in tokens.css (injected first by build_html.py). */
:root{
/* Compatibility aliases for the existing app CSS/JSX. */
--bg:var(--bg-1); --bg-elev:var(--bg-2); --panel:var(--bg-2); --panel2:var(--bg-3); --panel3:var(--bg-4);
--text:var(--fg); --text-2:var(--fg-1); --muted:var(--fg-2); --muted-2:var(--fg-3);
--ok:var(--accent); --ok-soft:var(--accent-soft);
--err:var(--hp); --err-soft:var(--hp-2);
--warn-soft:rgba(245,158,11,0.12);
--code-bg:var(--bg-0); --code-line:var(--line);
--radius-sm:var(--r-1); --radius:var(--r-0); --radius-lg:var(--r-0); --radius-xl:var(--r-0);
--shadow-sm:none; --shadow:none; --shadow-lg:0 18px 50px rgba(0,0,0,0.45);
--surface-bg:var(--bg-2); --surface-blur:none; --font-primary:var(--font-body);
--t-fast:110ms cubic-bezier(.4,0,.2,1); --t-base:200ms cubic-bezier(.4,0,.2,1); --t-slow:320ms cubic-bezier(.4,0,.2,1);
--topbar-h:82px;
}
.theme-premium,.theme-tactical{--surface-bg:var(--bg-2);--surface-blur:none;--font-primary:var(--font-body)}
.dynamic-card{background:var(--surface-bg);backdrop-filter:var(--surface-blur);-webkit-backdrop-filter:var(--surface-blur);font-family:var(--font-primary)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
background-image:
linear-gradient(var(--line-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
radial-gradient(1200px 700px at 50% -10%, rgba(125,216,125,0.04), transparent 60%);
background-size:32px 32px,32px 32px,100% 100%;
background-attachment:fixed;
color:var(--text);
font-family:var(--font-body);
font-size:13px; line-height:1.45;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
letter-spacing:-0.005em;
overflow-x:hidden;
overflow-y:auto;
}
#root{min-height:100vh}
::selection{background:var(--accent-soft);color:var(--text)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum","ss01";letter-spacing:0}
.num{font-family:var(--font-mono);font-feature-settings:"tnum";font-weight:500}
.display{font-family:var(--font-display);letter-spacing:0;font-weight:600}
.cap{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.cap-line{display:flex;align-items:center;gap:8px}
.cap-line::after{content:"";flex:1;height:1px;background:var(--line)}
.panel{background:var(--bg-2);border:1px solid var(--line);position:relative}
.panel-corners{position:relative}
.panel-corners::before,.panel-corners::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--accent);pointer-events:none}
.panel-corners::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.panel-corners::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.bar{height:6px;background:var(--bg-3);position:relative;overflow:hidden;border:1px solid var(--line)}
.bar>span{display:block;height:100%;background:var(--accent);transition:width var(--t-base)}
.bar.hp>span{background:var(--hp)}
.bar.xp>span{background:var(--xp)}
.app-shell{display:flex;flex-direction:column;min-height:100vh}
/* ---------- TOP BAR ---------- */
.topbar{
position:sticky; top:0; z-index:50;
/* Phase D — glassmorphic topbar. Content beneath blurs through as you scroll. */
background: var(--surface-glass);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom:1px solid var(--border-1);
box-shadow:none;
}
.topbar-main{
display:flex; align-items:center; gap:14px;
min-height:44px; padding:0 24px;
}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand .dot{
width:24px;height:24px;border-radius:0;
background:var(--accent);
position:relative;overflow:hidden;
clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
box-shadow:0 0 16px var(--accent-glow);
}
.brand .dot::after{
content:'';position:absolute;inset:5px;
background:var(--bg-2);
clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.brand h1{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:0.01em;margin:0}
.module-select{
width:auto;min-width:180px;max-width:260px;
background:var(--panel2);
border:1px solid var(--line);
color:var(--text);
border-radius:0;
padding:7px 32px 7px 12px;
font-family:var(--font-display); font-size:13px; font-weight:600;
cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;
transition:border-color var(--t-fast), background var(--t-fast);
flex-shrink:0;
}
.module-select:hover{border-color:var(--line-2);background-color:var(--panel3)}
.module-select:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.topnav{
display:flex; gap:2px; flex:1; min-width:0;
overflow-x:auto; scrollbar-width:none;
align-items:center;
}
.topnav::-webkit-scrollbar{display:none}
.topnav button{
display:inline-flex; align-items:center; gap:6px;
background:transparent; border:0;
color:var(--fg-2);
padding:10px 12px;
cursor:pointer;
font-family:var(--font-mono); font-size:10px; font-weight:600;
border-radius:0;
border:1px solid transparent;
transition:all var(--t-fast);
white-space:nowrap; flex-shrink:0;
letter-spacing:0.14em;
text-transform:uppercase;
}
.topnav button .emoji{font-size:13px;opacity:.85}
.topnav button:hover{color:var(--text);background:var(--panel2);border-color:var(--line)}
.topnav button.active{
color:var(--text);
background:var(--panel3);
border-color:var(--line-2);
box-shadow:inset 0 -2px 0 var(--accent);
}
.topbar-status{display:flex;gap:8px;align-items:center;flex-shrink:0}
.hdr-chip{
display:inline-flex; align-items:center; gap:6px;
padding:5px 10px;
background:var(--panel2);
border:1px solid var(--line);
border-radius:0;
font-family:var(--font-mono);font-size:10px;font-weight:600;
letter-spacing:0.08em;
color:var(--text-2);
transition:border-color var(--t-fast);
}
.hdr-chip:hover{border-color:var(--line-2)}
.hdr-chip-icon{font-size:13px;filter:drop-shadow(0 0 4px rgba(251,146,60,0.4))}
.hdr-chip-num{color:var(--text);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.hdr-chip-sub{color:var(--muted);font-size:11px;font-weight:500}
.pomo-chip .hdr-chip-time{
font:600 13px/1 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
color:var(--text); font-variant-numeric:tabular-nums;
min-width:38px; text-align:center;
}
.pomo-chip.running{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.pomo-chip.running .hdr-chip-time{color:var(--accent)}
.hdr-chip-btn{
background:transparent;border:0;color:var(--muted);
cursor:pointer;font:inherit;font-size:10px;
padding:2px 5px;border-radius:0;
transition:all var(--t-fast);
}
.hdr-chip-btn:hover{color:var(--text);background:var(--panel3)}
/* topics second row */
.topbar-topics{
display:flex; align-items:center; gap:14px;
padding:7px 24px 8px;
border-top:1px solid var(--line);
background:var(--bg-1);
}
.topbar-topics-label{
color:var(--fg-3);font-family:var(--font-mono);font-size:10px;
text-transform:uppercase;letter-spacing:.12em;
font-weight:600; flex-shrink:0;
}
.topics-strip{
display:flex; align-items:center; gap:6px;
overflow-x:auto; scrollbar-width:none;
flex:1; min-width:0; padding-bottom:2px;
}
.topics-strip::-webkit-scrollbar{display:none}
.topics-group{
color:var(--fg-3);
font-family:var(--font-mono);
font-size:10.5px; font-weight:600;
text-transform:uppercase; letter-spacing:.08em;
padding:0 4px 0 6px; flex-shrink:0;
border-left:1px solid var(--line);
margin-left:4px; padding-left:10px;
}
.topics-group:first-child{border-left:0;margin-left:0;padding-left:0}
.topic-pill{
background:transparent; border:1px solid var(--line);
color:var(--fg-2);
padding:4px 9px; border-radius:0;
cursor:pointer; font-family:var(--font-mono); font-size:10px; font-weight:500;
white-space:nowrap; flex-shrink:0;
transition:all var(--t-fast);
}
.topic-pill:hover{color:var(--text);background:var(--panel2);border-color:var(--line-2)}
.topic-pill.active{
color:var(--accent); background:var(--accent-soft);
border-color:var(--accent-line);
box-shadow:inset 0 0 0 1px var(--accent-line);
}
/* ---------- MAIN ---------- */
main{
/* Fluid padding: shrinks on laptops, grows on desktop. Bottom padding
* accounts for the future bottom status bar (Phase B). */
padding: clamp(14px, 2vw, 28px) clamp(16px, 2.5vw, 36px) 80px;
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
/* Don't let extreme-narrow screens break the layout by squishing below
* the smallest realistic resolution. Horizontal scroll is preferable to
* broken interactive elements. */
body{ min-width: 320px; }
@media(max-width:900px){ main{ padding:14px 14px 80px; } }
/* Combat fullscreen — tight padding, height locked to viewport */
main:has([data-arena]){
padding:8px 16px 0;
overflow:hidden;
max-width: none; /* combat fills the full width */
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:0;color:var(--text)}
h2{font-size:24px;margin-bottom:14px}
h3{font-size:15px;color:var(--text);margin-bottom:8px}
h4{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.16em;font-weight:600}
.card{
background:var(--panel); border:1px solid var(--line);
border-radius:0; padding:16px; margin-bottom:14px;
box-shadow:var(--shadow-sm);
transition:border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover{border-color:var(--line-2)}
.card.elev{background:var(--panel2);box-shadow:var(--shadow)}
.card-sub{background:var(--panel2);padding:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.chip{
display:inline-flex;align-items:center;gap:5px;
padding:2px 7px;border-radius:0;
background:var(--panel2);border:1px solid var(--line);
font-family:var(--font-mono);font-size:10px;color:var(--text-2);font-weight:500;letter-spacing:0.08em;
}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--accent-line)}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(251,191,36,0.25)}
.chip.err{background:var(--err-soft);color:var(--err);border-color:rgba(217,69,69,0.35)}
.chip.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
background:var(--accent);
color:var(--bg-1);border:1px solid var(--accent);
padding:8px 14px;border-radius:0;
font-family:var(--font-mono);font-weight:600;font-size:11px;
cursor:pointer;letter-spacing:0.14em;text-transform:uppercase;
transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
box-shadow:none;
}
.btn:hover{transform:translateY(-1px);background:var(--accent-2);border-color:var(--accent-2);filter:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--panel2);border-color:var(--line-3);box-shadow:none;color:var(--accent)}
.btn.ok{background:var(--accent);border-color:var(--accent);color:var(--bg-1)}
.btn.warn{background:var(--insight);border-color:var(--insight);color:var(--bg-1)}
.btn.err{background:var(--hp);border-color:var(--hp);color:#fff}
.btn.sm{padding:5px 11px;font-size:12px}
label{font-family:var(--font-mono);font-size:10px;color:var(--muted);display:block;margin-bottom:6px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase}
input[type=text],input[type=number],input[type=url],input[type=file],input[type=date],select,textarea{
width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
border-radius:0; padding:9px 12px; font:inherit;
transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input:not([type=checkbox]):not([type=radio]){
width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
border-radius:0; padding:9px 12px; font:inherit;
transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input[type=file]{color:var(--muted);padding:7px 8px}
input[type=file]::file-selector-button{
margin-right:10px;
background:var(--bg-3);
color:var(--text);
border:1px solid var(--line-2);
border-radius:0;
padding:5px 9px;
font:600 10px var(--font-mono);
letter-spacing:0.08em;
text-transform:uppercase;
}
input:focus,select:focus,textarea:focus{
outline:none; border-color:var(--accent-line);
box-shadow:0 0 0 3px var(--accent-soft); background:var(--panel3);
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.muted{color:var(--muted)}
.prose{line-height:1.65;color:var(--text-2)}
.prose p{margin:0 0 10px}
.prose strong{color:var(--text);font-weight:600}
.prose code{
background:var(--code-bg);color:var(--accent);
padding:1px 6px;border-radius:var(--radius-sm);
font:13px/1.5 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
border:1px solid var(--code-line);
}
.prose pre{
background:var(--code-bg);padding:14px 16px;border-radius:var(--radius);
overflow:auto;border:1px solid var(--code-line);
font:13px/1.6 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
color:var(--text-2);
}
.prose ul{margin:8px 0;padding-left:20px}
.prose li{margin:3px 0}
.q-type{
font-size:10.5px;color:var(--muted);
text-transform:uppercase;letter-spacing:.08em;font-weight:600;
display:inline-flex;gap:8px;align-items:center;
}
.q-type::before{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:0}
.mcq-opt{
display:block;padding:12px 14px;
border:1px solid var(--line);border-radius:var(--radius-sm);
margin-bottom:7px;cursor:pointer;
background:var(--panel2);font-size:13.5px;
transition:all var(--t-fast);position:relative;
}
.mcq-opt:hover{border-color:var(--accent-line);background:var(--panel3);transform:translateX(2px)}
.mcq-opt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.mcq-opt.correct{border-color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px rgba(74,222,128,0.4)}
.mcq-opt.wrong{border-color:var(--err);background:var(--err-soft);box-shadow:inset 0 0 0 1px rgba(248,113,113,0.4)}
.rating{display:flex;gap:8px;margin-top:14px}
.rating button{
flex:1;padding:11px;border-radius:var(--radius-sm);
border:1px solid var(--line);background:var(--panel2);color:var(--text);
cursor:pointer;font-weight:600;font-size:12.5px;
transition:all var(--t-fast);letter-spacing:0.01em;
}
.rating button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.rating .again{border-color:rgba(248,113,113,0.4);color:var(--err)}
.rating .again:hover{background:var(--err-soft)}
.rating .hard{border-color:rgba(251,191,36,0.4);color:var(--warn)}
.rating .hard:hover{background:var(--warn-soft)}
.rating .good{border-color:rgba(74,222,128,0.4);color:var(--ok)}
.rating .good:hover{background:var(--ok-soft)}
.rating .easy{border-color:var(--accent-line);color:var(--accent)}
.rating .easy:hover{background:var(--accent-soft)}
.progress{height:5px;background:var(--bg-3);border:1px solid var(--line);border-radius:0;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-2));transition:width var(--t-slow);box-shadow:none}
.xp-bar{height:6px;background:var(--bg-3);border:1px solid var(--line);border-radius:0;overflow:hidden;margin-top:6px}
.xp-bar>div{height:100%;background:linear-gradient(90deg, var(--xp), var(--accent));transition:width var(--t-slow);box-shadow:none}
.pomo{display:flex;align-items:center;gap:10px;margin:8px 0}
.pomo .time{font:600 22px/1 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;color:var(--text);font-variant-numeric:tabular-nums}
.deadline-item{
display:flex;justify-content:space-between;gap:8px;
padding:8px 0;border-bottom:1px solid var(--line);
font-size:12.5px;color:var(--text-2);
}
.deadline-item:last-child{border-bottom:0}
.deadline-date{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.ari{color:var(--accent);font-weight:600}
.hot{color:var(--err);font-weight:600}
.soon{color:var(--warn);font-weight:500}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--text-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(255,255,255,0.02)}
.tbl th{
color:var(--muted);font-weight:600;
font-size:11px;text-transform:uppercase;letter-spacing:.08em;
background:rgba(255,255,255,0.015);
}
.pill{display:inline-block;padding:3px 10px;border-radius:0;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.pill.done{background:var(--ok-soft);color:var(--ok);border:1px solid var(--accent-line)}
.pill.todo{background:var(--warn-soft);color:var(--warn);border:1px solid rgba(251,191,36,0.25)}
.streak{display:flex;align-items:center;gap:8px}
.streak .flame{font-size:18px;filter:drop-shadow(0 0 4px rgba(251,146,60,0.4))}
.streak b{font-size:18px;color:var(--text);font-weight:700}
.teach-pane{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.teach-pane{grid-template-columns:1fr}}
.code-ed{
background:var(--code-bg);color:var(--text);
border:1px solid var(--line-2);
border-radius:var(--radius);
padding:14px;
font:13px/1.6 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
min-height:160px;white-space:pre;tab-size:2;
resize:vertical;width:100%;
transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.code-ed:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.out-box{
background:var(--bg-0);
border:1px solid var(--code-line);
border-radius:var(--radius);
padding:12px 14px;
font:12.5px/1.6 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
white-space:pre-wrap;min-height:42px;
color:#a8e8c0;
}
.timer{
font:600 17px 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
color:var(--warn);font-variant-numeric:tabular-nums;
padding:4px 10px;border-radius:var(--radius-sm);
background:var(--warn-soft);border:1px solid rgba(251,191,36,0.25);
}
.timer.danger{
color:var(--err);background:var(--err-soft);
border-color:rgba(248,113,113,0.4);
animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.exam-bar{
position:sticky;top:114px;
background:var(--bg-2);
backdrop-filter:none; -webkit-backdrop-filter:none;
padding:12px 16px;
border:1px solid var(--line);
border-radius:var(--radius);
margin-bottom:16px; z-index:9;
box-shadow:var(--shadow);
}
.note-block{
background:var(--panel2);
border-left:3px solid var(--accent);
padding:12px 14px;
border-radius:var(--radius-sm);
margin:10px 0;
}
.tiny{font-size:11.5px;color:var(--muted);font-weight:500}
details.study-notes{
background:var(--panel2);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:10px 12px;margin:10px 0;
transition:background var(--t-fast);
}
details.study-notes[open]{background:var(--panel3)}
details.study-notes summary{
cursor:pointer;font-weight:600;font-size:12.5px;
color:var(--accent); list-style:none;
display:flex;align-items:center;gap:6px;
}
details.study-notes summary::-webkit-details-marker{display:none}
details.study-notes summary::before{
content:'\25B8';display:inline-block;
transition:transform var(--t-fast);
color:var(--muted);font-size:10px;
}
details.study-notes[open] summary::before{transform:rotate(90deg)}
/* ---------- FOUNDATION SKIN OVERRIDES ---------- */
.dynamic-card,
.card,
.card-sub,
.mcq-opt,
.rating button,
.exam-bar,
.note-block,
details.study-notes,
.timer,
.code-ed,
.out-box{
border-radius:0;
}
.dynamic-card,
.card,
.exam-bar,
details.study-notes{
box-shadow:none;
}
.btn,
.chip,
.pill,
.hdr-chip,
.topic-pill,
.module-select,
input[type=text],
input[type=number],
input[type=url],
input[type=file],
input[type=date],
input:not([type=checkbox]):not([type=radio]),
select,
textarea{
border-radius:0;
}
.btn,
.chip,
.hdr-chip,
.topic-pill,
.pill,
.tbl th{
font-family:var(--font-mono);
}
.tbl th{
letter-spacing:0.14em;
color:var(--fg-3);
}
.tbl tr:hover td{
background:var(--bg-3);
}
.progress,
.xp-bar{
border-radius:0;
}
.progress>div,
.xp-bar>div{
box-shadow:none;
}
@media(max-width:1500px){
.topbar.mode-normal .topbar-main{
padding:8px 18px;
flex-wrap:wrap;
}
.topbar.mode-normal .topnav{
order:3;
flex-basis:100%;
border-top:1px solid var(--line);
padding-top:6px;
margin-top:2px;
}
.topbar.mode-normal .topnav button{
padding:7px 10px;
}
.topbar.mode-normal .topbar-status{
margin-left:auto;
}
}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
.topbar-main{padding:10px 16px;flex-wrap:wrap}
.topnav{order:3;flex-basis:100%;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.topbar-status{order:2;margin-left:auto}
}
@media(max-width:760px){
.topbar-topics{padding:6px 16px 8px}
main{padding:16px;padding-bottom:60px}
h2{font-size:20px}
.module-select{min-width:140px;font-size:12.5px}
.topnav button{padding:6px 9px;font-size:12.5px}
.topnav button .emoji{font-size:12px}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
main > div{animation:fadeIn var(--t-base) ease-out}
/* ===== ARENA ===== */
.char-card{
background:linear-gradient(180deg, var(--panel2), var(--panel));
border:1px solid rgba(255, 255, 255, 0.1);
}
.char-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.char-avatar{flex-shrink:0}
.char-avatar-ring{
width:54px;height:54px;border-radius:50%;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
color:#0a0b10;display:flex;align-items:center;justify-content:center;
font:700 16px/1 'JetBrains Mono', ui-monospace, monospace;
border:1px solid rgba(255, 255, 255, 0.1);
}
.char-meta{flex:1}
.weapon-equipped{text-align:right;border-left:1px solid var(--line);padding-left:14px}
.weapon-name{font-weight:600;font-size:14px;color:var(--accent);margin:2px 0}
.char-stats{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
margin-bottom:12px;
}
.stat{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.stat-val{font:700 16px/1 'JetBrains Mono', ui-monospace, monospace;color:var(--text)}
.stat-val.pos{color:var(--ok)}
.stat-val.neg{color:var(--err)}
.stat-pill{
display:inline-block;padding:3px 10px;border-radius:99px;
background:var(--panel3);border:1px solid var(--line);
font:600 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
color:var(--text-2);
}
.stat-pill.pos{color:var(--ok);border-color:rgba(74,222,128,0.3);background:var(--ok-soft)}
.stat-pill.neg{color:var(--err);border-color:rgba(248,113,113,0.3);background:var(--err-soft)}
.hotbar-preview{margin-top:8px}
.hotbar-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.hotbar-slot.mini{
padding:8px 6px;border-radius:var(--radius-sm);
border:1px solid var(--line);text-align:center;
background:var(--panel2);min-height:54px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.hotbar-slot.mini.weapon.filled{border-color:var(--accent-line);background:var(--accent-soft)}
.hotbar-slot.mini.tree.filled{border-color:rgba(167,139,250,0.4);background:rgba(167,139,250,0.08)}
.hotbar-slot.mini.empty{
border:1px solid rgba(255, 255, 255, 0.1);
background:rgba(10, 12, 18, 0.55);
box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);
color:var(--muted-2);
}
.hotbar-slot.mini .hb-icon{font-size:18px}
.hotbar-slot.mini .hb-name{font-size:10.5px;font-weight:600;color:var(--text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hotbar-slot.mini .hb-empty{font-size:11px;color:var(--muted-2)}
.ab-pill{
display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:99px;
background:var(--panel3);border:1px solid var(--accent-line);
font-size:12px;font-weight:600;color:var(--text);
}
.boss-card{
display:flex;flex-direction:column;gap:6px;text-align:center;align-items:center;
border:1px solid rgba(255, 255, 255, 0.1);
}
.boss-emoji{font-size:42px;filter:drop-shadow(0 4px 12px rgba(139,158,255,0.3));margin-bottom:4px}
.skills-grid{display:flex;flex-direction:column;gap:8px}
.skill-row{display:grid;grid-template-columns:120px 60px 1fr 60px;gap:10px;align-items:center}
.skill-row.current .skill-name{color:var(--accent);font-weight:700}
.skill-name{font-size:13px;font-weight:500;color:var(--text-2)}
.skill-level{font:700 12px 'JetBrains Mono', ui-monospace, monospace;color:var(--text)}
.skill-bar{height:6px;background:rgba(255,255,255,0.05);border-radius:99px;overflow:hidden}
.skill-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-2));transition:width var(--t-slow)}
.combat-hud{
display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
padding:18px 20px;
background:linear-gradient(180deg, var(--panel2), var(--panel));
border:1px solid rgba(255, 255, 255, 0.1);border-radius:var(--radius-lg);
margin-bottom:12px;
}
.combat-side{display:flex;flex-direction:column;gap:8px}
.combat-side.boss{text-align:right;align-items:flex-end}
.combat-vs{font:700 18px/1 'JetBrains Mono', ui-monospace, monospace;color:var(--muted-2);letter-spacing:.1em}
.combat-name{font-weight:600;font-size:13px;color:var(--text)}
.combat-hp{display:flex;flex-direction:column;gap:4px;width:100%}
.hp-bar{height:8px;background:rgba(255,255,255,0.05);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.hp-fill{height:100%;transition:width 320ms ease}
.hp-fill.player{background:linear-gradient(90deg, var(--ok), #22c55e)}
.hp-fill.boss{background:linear-gradient(90deg, var(--err), #dc2626)}
.hp-text{font:600 11px 'JetBrains Mono', ui-monospace, monospace;color:var(--muted);font-variant-numeric:tabular-nums}
.combat-meta{display:flex;gap:6px;flex-wrap:wrap}
.combat-side.boss .combat-meta{justify-content:flex-end}
.intent{font-size:12px;font-weight:600;color:var(--text-2);padding:4px 10px;border-radius:99px;background:var(--panel3);border:1px solid var(--line)}
.intent.heavy{color:var(--err);background:var(--err-soft);border-color:rgba(248,113,113,0.3)}
.intent.light{color:var(--warn);background:var(--warn-soft);border-color:rgba(251,191,36,0.3)}
.combat-feedback{padding:10px 14px;font-size:13px}
.action-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:8px}
.action-btn{
background:var(--panel2);border:1px solid var(--line-2);
border-radius:var(--radius);padding:14px 12px;
cursor:pointer;text-align:center;
transition:all var(--t-fast);color:var(--text);
font:inherit;
}
.action-btn:active:not(:disabled){transform:scale(0.96)}
.action-btn:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent-line);background:var(--panel3);box-shadow:0 4px 14px rgba(139,158,255,0.12)}
.action-btn.disabled,.action-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;filter:grayscale(0.6)}
.action-btn.passive{cursor:default;opacity:0.7;background:var(--panel)}
.action-btn.passive:hover{transform:none;box-shadow:none}
.action-btn.selected{
border:2px solid var(--accent);
background:linear-gradient(180deg, rgba(139,158,255,0.18), rgba(139,158,255,0.08));
box-shadow:0 0 0 4px rgba(139,158,255,0.18), 0 8px 24px rgba(139,158,255,0.28);
transform:translateY(-2px);
}
.action-btn.selected:hover{border-color:var(--accent)}
.action-btn.locked{opacity:.45}
.action-icon{font-size:26px;margin-bottom:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.action-name{font-weight:700;font-size:13.5px;letter-spacing:-0.005em}
.action-desc{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.action-key-hint{
position:absolute; top:5px; left:6px;
width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--panel3); color:var(--muted);
border:1px solid var(--line-2);
border-radius:5px;
font:600 10.5px 'JetBrains Mono', monospace;
}
.action-btn.selected .action-key-hint{
background:var(--accent); color:#0a0b10; border-color:var(--accent);
}
.action-selected-check{
position:absolute; bottom:6px; right:7px;
color:var(--accent); font-size:14px; font-weight:700;
text-shadow:0 0 8px rgba(139,158,255,0.6);
}
.action-card{padding:14px 16px}
.action-locked-banner{
display:flex; align-items:center; gap:10px;
padding:10px 14px;
background:linear-gradient(135deg, rgba(139,158,255,0.16), rgba(167,139,250,0.10));
border:1px solid var(--accent-line);
border-radius:var(--radius);
box-shadow:inset 0 0 0 1px rgba(139,158,255,0.08);
flex-wrap:wrap;
}
.action-locked-banner.warn{
background:linear-gradient(135deg, rgba(251,191,36,0.16), rgba(251,191,36,0.06));
border-color:rgba(251,191,36,0.45);
}
.action-locked-label{
font-size:10px; font-weight:700; letter-spacing:.12em;
color:var(--accent); text-transform:uppercase;
padding:3px 8px; border-radius:99px;
background:rgba(139,158,255,0.18); border:1px solid var(--accent-line);
}
.action-locked-banner.warn .action-locked-label{
color:var(--warn); background:rgba(251,191,36,0.18); border-color:rgba(251,191,36,0.4);
}
.action-locked-icon{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.action-locked-name{font-weight:700;font-size:14.5px;color:var(--text);letter-spacing:-0.005em}
.action-locked-est{
font:600 12px 'JetBrains Mono', monospace;
color:var(--text-2);
margin-left:auto;
padding:3px 9px; border-radius:99px;
background:var(--panel3); border:1px solid var(--line);
}
.action-locked-warn{
font-size:11px; font-weight:600; color:var(--warn);
flex-basis:100%;
}
.combat-q{border:1px solid rgba(255, 255, 255, 0.1)}
.char-card .tiny,
.char-card .stat-val,
.combat-hud .hp-text,
.combat-hud .chip,
.combat-hud .combat-name,
.sp-bank .tiny,
.sp-bank .sp-cost,
.skill-level,
.dmg-flash{
font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
font-variant-numeric:tabular-nums;
}
.weapon-card{display:flex;flex-direction:column;gap:6px}
.weapon-card.equipped{border-color:var(--accent-line);background:rgba(139,158,255,0.05)}
.weapon-card.locked{opacity:.6}
.weapon-stats{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.weapon-abilities{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ab-row{display:flex;gap:10px;align-items:flex-start}
.ab-row-icon{font-size:20px;flex-shrink:0}
.ab-row-name{font-weight:600;font-size:13px}
.sp-bank{
background:linear-gradient(135deg, var(--accent-soft), rgba(167,139,250,0.08));
border:1px solid var(--accent-line);
}
.sp-cost{font:700 14px/1 'JetBrains Mono', ui-monospace, monospace;color:var(--accent)}
.tree-skill.owned{border-color:var(--ok);background:rgba(74,222,128,0.04)}
.tree-skill.locked{opacity:.55}
.loadout-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:8px}
.loadout-row{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:640px){.loadout-row{grid-template-columns:1fr 1fr}}
.loadout-slot{
border:1.5px dashed var(--line-2);border-radius:var(--radius);
padding:18px 12px;text-align:center;
background:rgba(255,255,255,0.01);
min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.loadout-slot.filled{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}
.loadout-icon{font-size:28px}
.loadout-name{font-weight:600;font-size:13px}
.loadout-empty{color:var(--muted);font-size:12px;font-weight:500}
.ability-card{
background:var(--panel2);border:1px solid var(--line);
border-radius:var(--radius);padding:12px 14px;
}
.ability-card.equipped{border-color:var(--accent-line);background:var(--accent-soft)}
.ability-icon{font-size:18px;margin-right:6px}
.reward-card{text-align:center;align-items:center;display:flex;flex-direction:column;gap:6px;padding:18px 14px}
.reward-emoji{font-size:32px;margin-bottom:4px}
.armory-shell{padding:14px}
.armory-grid{
display:grid;
grid-template-columns:300px 1fr;
gap:14px;
}
.armory-list{
display:flex;
flex-direction:column;
gap:8px;
max-height:520px;
overflow:auto;
}
.armory-item{
text-align:left;
padding:10px;
border-radius:var(--radius);
border:1px solid var(--line-2);
background:var(--panel2);
color:var(--text);
cursor:pointer;
transition:all var(--t-fast);
font:inherit;
}
.armory-item:hover{border-color:var(--accent-line)}
.armory-item.selected{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-soft)}
.armory-item.equipped{background:linear-gradient(135deg, var(--accent-soft), var(--panel2))}
.armory-detail{
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--panel2);
padding:14px;
}
.armory-wxp{
height:8px;
border-radius:99px;
background:rgba(255,255,255,0.08);
border:1px solid var(--line);
overflow:hidden;
}
.armory-wxp-fill{
height:100%;
background:linear-gradient(90deg, var(--accent), var(--accent-2));
transition:width var(--t-slow);
}
.armory-mono{
font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
font-variant-numeric:tabular-nums;
}
.armory-ability-grid{
margin-top:12px;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.armory-ab{
border:1px solid var(--line-2);
border-radius:var(--radius-sm);
padding:8px;
background:var(--panel3);
}
.armory-ab.unlocked{
border-color:rgba(74,222,128,0.35);
background:rgba(74,222,128,0.08);
}
.armory-ab.locked{
opacity:0.6;
border-style:dashed;
}
@media(max-width:760px){
.combat-hud{grid-template-columns:1fr;text-align:left}
.combat-side.boss{text-align:left;align-items:flex-start}
.combat-side.boss .combat-meta{justify-content:flex-start}
.combat-vs{display:none}
.loadout-row{grid-template-columns:1fr}
.char-stats{grid-template-columns:repeat(2,1fr)}
.hotbar-strip{grid-template-columns:repeat(3,1fr)}
.skill-row{grid-template-columns:90px 50px 1fr 50px}
.armory-grid{grid-template-columns:1fr}
.armory-ability-grid{grid-template-columns:1fr}
}
/* ===== SPLASH SCREEN ===== */
.splash{
min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:24px;position:relative;overflow:hidden;
}
.splash-bg{
position:absolute;inset:0;
background:
radial-gradient(800px 400px at 20% 30%, rgba(139,158,255,0.18), transparent 60%),
radial-gradient(800px 400px at 80% 70%, rgba(167,139,250,0.18), transparent 60%);
pointer-events:none;
}
.splash-card{
position:relative;z-index:1;
max-width:780px;width:100%;
background:linear-gradient(180deg, var(--panel2), var(--panel));
border:1px solid var(--accent-line);
border-radius:var(--radius-xl);
padding:36px 32px;
box-shadow:0 0 0 1px var(--accent-soft), var(--shadow-lg);
}
.splash-brand{text-align:center;margin-bottom:22px}
.splash-logo{
width:74px;height:74px;border-radius:18px;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
margin:0 auto 16px;
box-shadow:0 12px 40px rgba(139,158,255,0.45);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.splash-logo::after{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 55%);
}
.splash-logo-inner{
width:30px;height:30px;border-radius:7px;
background:rgba(10,11,16,0.85);
box-shadow:inset 0 0 0 2px rgba(255,255,255,0.18);
z-index:1;
}
.splash-title{
font-size:32px;font-weight:700;margin:0 0 6px;
letter-spacing:-0.03em;
background:linear-gradient(180deg, #fff, #c8d0ff);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.splash-tagline{color:var(--muted);font-size:14px;letter-spacing:0.01em}
.splash-status{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.splash-modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.splash-mode{
background:var(--panel2);border:1.5px solid var(--line-2);
border-radius:var(--radius-lg);padding:22px 20px;
text-align:left;cursor:pointer;
transition:all var(--t-base);font:inherit;color:var(--text);
display:flex;flex-direction:column;gap:8px;
}
.splash-mode:hover{
transform:translateY(-3px);
border-color:var(--accent-line);
box-shadow:0 12px 40px rgba(139,158,255,0.25);
}
.splash-mode.arena:hover{box-shadow:0 12px 40px rgba(167,139,250,0.3)}
.splash-mode-icon{font-size:34px}
.splash-mode h3{font-size:18px;margin:0}
.splash-mode-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.splash-foot{text-align:center;margin-top:10px}
@media(max-width:600px){
.splash-modes{grid-template-columns:1fr}
.splash-card{padding:24px 18px}
.splash-title{font-size:26px}
}
/* ===== MODE BADGE ===== */
.brand-badge{
display:inline-block;margin-left:8px;
padding:2px 8px;border-radius:99px;font-size:10px;
background:linear-gradient(135deg, var(--accent-2), var(--accent));
color:#0a0b10;font-weight:700;letter-spacing:.05em;
box-shadow:0 2px 6px rgba(167,139,250,0.4);
}
.topbar.mode-arena{
background:linear-gradient(180deg, rgba(20,15,32,0.88), rgba(15,17,23,0.85));
}
/* ===== LIBRARY ===== */
.library-tracker{
background:linear-gradient(135deg, var(--accent-soft), rgba(167,139,250,0.05));
border:1px solid var(--accent-line);
}
.library-layout{
display:grid;grid-template-columns:240px 1fr 300px;gap:14px;margin-top:14px;
}
@media(max-width:1100px){.library-layout{grid-template-columns:1fr}}
.library-rail{padding:14px}
.library-mod-btn,.library-concept-btn{
display:flex;width:100%;text-align:left;
background:transparent;border:0;color:var(--text-2);
padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;
font:inherit;font-size:12.5px;
justify-content:space-between;align-items:center;gap:8px;
transition:background var(--t-fast),color var(--t-fast);
}
.library-mod-btn:hover,.library-concept-btn:hover{background:var(--panel2);color:var(--text)}
.library-mod-btn.active,.library-concept-btn.active{
color:var(--accent);background:var(--accent-soft);
box-shadow:inset 0 0 0 1px var(--accent-line);
}
.library-lvl{
color:var(--muted-2);font-size:10px;
text-transform:uppercase;letter-spacing:.1em;
padding:10px 10px 4px;font-weight:600;
}
.library-content{min-height:480px;padding:18px}
.library-pdf{width:100%;height:520px;border:0;border-radius:var(--radius);background:#fff;margin-top:8px}
.library-pdf.fullscreen{
position:relative;inset:auto;width:100%;height:auto;
flex:1;min-height:0;z-index:auto;border-radius:var(--radius-sm);
margin:8px 0 0;background:#fff;
}
.pdf-fullscreen-shell{
position:fixed;inset:0;z-index:9999;
background:#05070d;padding:12px;
display:flex;min-width:0;min-height:0;
}
.pdf-fullscreen-inner{
display:flex;flex-direction:column;
width:100%;height:100%;min-width:0;min-height:0;
}
.pdf-fullscreen-inner .library-pdf-toolbar{
flex:0 0 auto;
background:var(--panel2);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:8px 10px;
}
.pdf-missing{
border:1px dashed var(--line);
border-radius:var(--radius);
min-height:240px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pdf-missing.fullscreen{
flex:1;min-height:0;
}
.library-empty{
text-align:center;padding:60px 20px;color:var(--muted);
}
.library-pdfs{padding:14px;min-width:260px}
.library-pdf-row{
display:flex;align-items:center;gap:6px;
padding:8px 0;border-bottom:1px solid var(--line);
flex-wrap:wrap;
}
.library-pdf-row:last-child{border-bottom:0}
.library-pdf-row.active .library-pdf-name{color:var(--accent);font-weight:600}
.library-pdf-name{
flex:1;background:transparent;border:0;color:var(--text-2);
text-align:left;cursor:pointer;font:inherit;font-size:13px;
padding:6px 8px;border-radius:var(--radius-sm);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
min-width:120px;
}
.library-pdf-name:hover{color:var(--text);background:var(--panel2)}
.pdf-mod-select{
width:auto;min-width:90px;padding:4px 28px 4px 10px;
font-size:11px;background-color:var(--panel3);
}
/* ===== WORLD VIEW (Phase B) ===== */
.stage-card{padding:18px 20px}
.stage-emoji{
font-size:28px;line-height:1;
width:48px;height:48px;display:flex;align-items:center;justify-content:center;
background:var(--panel2);border:1px solid var(--line);
border-radius:12px;flex-shrink:0;
}
.boss-stage{
border:1px solid rgba(167,139,250,0.35);
background:linear-gradient(180deg, rgba(167,139,250,0.06), var(--panel));
}
.elite-card{
background:var(--panel2);
border:1px solid var(--line-2);
border-radius:var(--radius);
padding:14px;
}
.elite-card.locked{opacity:0.6}
.elite-mastery{margin-top:10px}
/* ===== INSIGHTS PANEL ===== */
.insights-panel{
background:linear-gradient(135deg, rgba(74,222,128,0.07), rgba(139,158,255,0.05));
border:1px solid rgba(74,222,128,0.25);
border-radius:var(--radius);
padding:10px 14px;margin-bottom:12px;
}
.insights-panel.disabled{
background:var(--panel2);
border:1px dashed var(--line-2);
text-align:center;
}
/* ===== PRACTICE NOTES PANE ===== */
.practice-notes{
margin-top:14px;
background:linear-gradient(180deg, rgba(139,158,255,0.05), var(--panel));
border:1px solid var(--accent-line);
border-left:3px solid var(--accent);
}
.dmg-flash{
animation:dmgPulse 600ms ease-out;
font:700 12px/1 'JetBrains Mono', ui-monospace, monospace;
}
@keyframes dmgPulse{
0%{transform:scale(1.4); opacity:0}
25%{transform:scale(1.15); opacity:1}
100%{transform:scale(1); opacity:1}
}
/* ===== PHASE C: Tier badges + Momentum + same-twice warning ===== */
.action-btn{position:relative}
.tier-badge{
position:absolute; top:6px; right:6px;
padding:1px 7px; border-radius:99px;
font-size:9.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em;
}
.tier-badge.tier-basic{
background:rgba(107,114,135,0.18);
color:var(--muted);
border:1px solid rgba(107,114,135,0.3);
}
.tier-badge.tier-core{
background:rgba(139,158,255,0.18);
color:var(--accent);
border:1px solid var(--accent-line);
}
.tier-badge.tier-advanced{
background:rgba(167,139,250,0.20);
color:var(--accent-2);
border:1px solid rgba(167,139,250,0.4);
}
.same-warn{outline:1px dashed rgba(251,191,36,0.45);outline-offset:-3px}
.same-warn-tag{
display:block;margin-top:4px;font-size:10px;color:var(--warn);font-weight:600;
}
.momentum-chip{
background:linear-gradient(135deg, rgba(167,139,250,0.18), rgba(139,158,255,0.12));
border-color:rgba(167,139,250,0.35);
color:var(--accent-2);font-weight:700;
}
.boss-hit{
animation:bossHit 180ms ease-out;
transform-origin:center;
}
.boss-hit .combat-name{color:var(--err)}
.enemies-grid{display:flex;flex-wrap:wrap;gap:8px}
.combat-side.targeted{
box-shadow:0 0 0 2px var(--accent);
animation:targetPulse 1s ease-in-out infinite;
}
@keyframes targetPulse{
0%,100%{box-shadow:0 0 0 2px var(--accent)}
50%{box-shadow:0 0 0 3px var(--accent),0 0 12px var(--accent)}
}
@keyframes bossHit{
0%{transform:none;filter:brightness(1)}
45%{transform:scale(0.95) rotate(-1deg);filter:brightness(1.2)}
100%{transform:none;filter:brightness(1)}
}
.toast-container{
position:fixed;top:70px;right:20px;z-index:999;
display:flex;flex-direction:column;gap:8px;
pointer-events:none;
}
.toast{
padding:10px 16px;border-radius:var(--radius);
background:linear-gradient(135deg,var(--panel2),var(--panel));
border:1px solid var(--line);
font-weight:600;font-size:14px;
animation:toastIn 300ms ease-out;
box-shadow:var(--shadow-lg);
}
.toast.xp{
background:linear-gradient(135deg,rgba(74,222,128,0.25),rgba(139,158,255,0.15));
border-color:rgba(74,222,128,0.4);color:var(--ok);
}
.toast.levelup{
background:linear-gradient(135deg,rgba(251,191,36,0.3),rgba(167,139,250,0.2));
border-color:rgba(251,191,36,0.5);color:#fbbf24;
font-size:16px;
}
.toast.weapon{
background:linear-gradient(135deg,rgba(139,158,255,0.3),rgba(167,139,250,0.2));
border-color:rgba(139,158,255,0.5);color:var(--accent);
}
@keyframes toastIn{
0%{transform:translateX(100%);opacity:0}
100%{transform:translateX(0);opacity:1}
}
@keyframes toastOut{
0%{transform:translateX(0);opacity:1}
100%{transform:translateX(100%);opacity:0}
}
.xp-chip{
position:absolute;
padding:4px 10px;border-radius:99px;
background:linear-gradient(135deg,rgba(74,222,128,0.9),rgba(74,222,128,0.7));
color:#0a0b10;font-weight:700;font-size:13px;
animation:xpFloat 1.2s ease-out forwards;
pointer-events:none;
box-shadow:0 2px 8px rgba(74,222,128,0.4);
}
@keyframes xpFloat{
0%{transform:translateY(0)scale(0.8);opacity:1}
100%{transform:translateY(-40px)scale(1.2);opacity:0}
}
/* ===== BIOME VISUALS ===== */
.arena-combat{
--biome-tint: rgba(139,158,255,0.10);
--biome-accent: var(--accent);
padding:14px; border-radius:var(--radius-lg);
margin:-14px -14px 14px;
transition:background 0.4s ease;
}
.arena-combat.biome-server {--biome-tint:rgba(96,165,250,0.10); --biome-accent:#60a5fa; background:radial-gradient(1200px 700px at 70% -10%, rgba(96,165,250,0.08), transparent 60%), linear-gradient(135deg,#0a0e1c,#121828)}
.arena-combat.biome-library {--biome-tint:rgba(251,191,36,0.10); --biome-accent:#fbbf24; background:radial-gradient(900px 600px at 20% 20%, rgba(251,191,36,0.08), transparent 60%), linear-gradient(180deg,#1a1812,#26221a)}
.arena-combat.biome-cyberpunk{--biome-tint:rgba(244,114,182,0.14); --biome-accent:#f472b6; background:radial-gradient(700px 500px at 90% 10%, rgba(244,114,182,0.12), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(34,211,238,0.10), transparent 60%), linear-gradient(135deg,#0e0118,#1a0828)}
.arena-combat.biome-cathedral{--biome-tint:rgba(196,181,253,0.10); --biome-accent:#c4b5fd; background:radial-gradient(1100px 700px at 50% -10%, rgba(196,181,253,0.10), transparent 70%), linear-gradient(180deg,#0e0a1a,#181228)}
.arena-combat.biome-wasteland{--biome-tint:rgba(245,158,11,0.10); --biome-accent:#f59e0b; background:radial-gradient(900px 500px at 30% 100%, rgba(245,158,11,0.10), transparent 60%), linear-gradient(135deg,#1a1408,#221a08)}
.arena-combat.biome-lab {--biome-tint:rgba(110,231,183,0.10); --biome-accent:#6ee7b7; background:radial-gradient(900px 500px at 80% 20%, rgba(110,231,183,0.10), transparent 60%), linear-gradient(135deg,#0a1812,#0e2018)}
.arena-combat.biome-sanctum {--biome-tint:rgba(255,215,0,0.14); --biome-accent:#fde047; background:radial-gradient(1300px 800px at 50% -20%, rgba(255,215,0,0.16), transparent 70%), radial-gradient(800px 500px at 50% 100%, rgba(168,85,247,0.10), transparent 60%), linear-gradient(180deg,#1a1408,#0e0818)}
.arena-combat.biome-foundry {--biome-tint:rgba(248,113,113,0.12); --biome-accent:#f87171; background:linear-gradient(135deg,#1a0a00,#2d1500); animation:heatHaze 2s ease-in-out infinite}
.arena-combat.biome-sky {--biome-tint:rgba(125,211,252,0.10); --biome-accent:#7dd3fc; background:linear-gradient(180deg,#0a1520,#152535)}
.arena-combat.biome-quarantine{--biome-tint:rgba(132,204,22,0.12); --biome-accent:#84cc16; background:linear-gradient(135deg,#0a1a0a,#102010)}
.arena-combat.biome-corridor {--biome-tint:rgba(167,139,250,0.10); --biome-accent:#a78bfa; background:repeating-linear-gradient(45deg,#0a0a12,#0a0a12 20px,#101020 20px,#101020 40px)}
.arena-combat.biome-deep {--biome-tint:rgba(34,211,238,0.10); --biome-accent:#22d3ee; background:linear-gradient(135deg,#020a14,#081020)}
.arena-combat.biome-speed {--biome-tint:rgba(252,211,77,0.12); --biome-accent:#fcd34d; background:linear-gradient(135deg,#0a0e1c,#1a1408)}
.arena-combat.biome-abandoned{--biome-tint:rgba(120,113,108,0.10); --biome-accent:#a8a29e; background:linear-gradient(135deg,#14110a,#1a160e)}
.arena-combat.biome-void {--biome-tint:rgba(255,255,255,0.04); --biome-accent:#e8eaf0; background:radial-gradient(800px 500px at 50% 50%, rgba(255,255,255,0.02), transparent 60%), #000}
.arena-combat.biome-default {--biome-tint:rgba(125,216,125,0.06); --biome-accent:var(--accent)}
.arena-combat.biome-sanctum::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(circle at 50% 0%, rgba(255,215,0,0.06), transparent 50%);
animation:sanctumPulse 3s ease-in-out infinite;
}
.arena-combat{position:relative; overflow:visible}
.arena-combat.biome-cathedral::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(196,181,253,0.06), transparent 70%);
}
.arena-combat.biome-cyberpunk::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(244,114,182,0.018) 2px, rgba(244,114,182,0.018) 4px);
}
/* Biome-aware banner */
.biome-banner{
position:sticky; top:0; z-index:10;
border:1px solid var(--biome-accent, var(--line));
background:linear-gradient(135deg, var(--biome-tint, var(--accent-soft)), transparent 70%), var(--panel);
box-shadow:0 0 0 1px var(--biome-tint), 0 4px 14px rgba(0,0,0,0.3);
}
.biome-banner-top{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.biome-banner-info{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.biome-banner-icon{
font-size:30px; line-height:1;
width:46px; height:46px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:1px solid var(--biome-accent);
border-radius:var(--radius);
filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45));
box-shadow:0 0 18px var(--biome-tint);
}
.biome-banner-name{font-weight:700; font-size:15px; color:var(--biome-accent); letter-spacing:-0.005em}
.biome-banner-desc{margin-top:2px; max-width:520px}
.biome-modifiers{
display:flex; flex-wrap:wrap; gap:6px;
margin-top:10px; padding-top:10px;
border-top:1px dashed var(--line);
}
.biome-mod-chip{
display:inline-flex; align-items:center;
padding:3px 9px; border-radius:99px;
font:600 11px 'JetBrains Mono', monospace;
letter-spacing:0.01em;
background:var(--panel3); border:1px solid var(--line);
color:var(--text-2);
}
.biome-mod-chip.good{
background:rgba(74,222,128,0.10); border-color:rgba(74,222,128,0.30); color:#86efac;
}
.biome-mod-chip.bad{
background:rgba(248,113,113,0.10); border-color:rgba(248,113,113,0.30); color:#fca5a5;
}
@keyframes heatHaze{
0%{filter:sepia(0.3) saturate(1.5)}
50%{filter:sepia(0.4) saturate(2)}
100%{filter:sepia(0.3) saturate(1.5)}
}
@keyframes floatUp{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
@keyframes sanctumPulse{
0%,100%{opacity:0.6}
50%{opacity:1}
}
.arena-combat.biome-sky .combat-side{animation:floatUp 3s ease-in-out infinite}
/* ===== LOOT CARDS ===== */
.loot-card{text-align:center;padding:10px}
.loot-card.legendary{background:var(--accent-soft);border:2px solid var(--accent);animation:lootReveal 0.6s ease-out}
.loot-card.rarity-mythic{background:#2a1a3a;border:2px solid #9d4edd}
.loot-card.rarity-epic{background:#1a2a3a;border:1px solid #a78bfa}
.loot-card.rarity-rare{background:#1a2a2a;border:1px solid #6ee7b7}
.loot-card.rarity-legendary{background:#2a1a0a;border:1px solid #f59e0b}
.loot-card.rarity-raid_only{background:#1a2a1a;border:1px solid #22c55e}
.loot-card.rarity-ultra_rare{background:#1a1a2a;border:2px solid #3b82f6}
@keyframes lootReveal{
0%{transform:scale(0.5)rotateY(90deg);opacity:0}
50%{transform:scale(1.1)rotateY(0deg);opacity:1}
100%{transform:scale(1);opacity:1}
}
.legendary-glow{
animation:goldGlitch 1.5s ease-in-out infinite;
}
@keyframes goldGlitch{
0%,100%{filter:drop-shadow(0 0 8px #f59e0b) brightness(1)}
50%{filter:drop-shadow(0 0 15px #fbbf24) brightness(1.3)}
}
.summa-cum-laude{background:linear-gradient(135deg,#1a1a0a,#2a2a0a);border:2px solid #fbbf24}
.loot-summary{animation:summarySlide 0.4s ease-out}
@keyframes glitchHp{
0%{box-shadow:0 0 0 #ff0000}
25%{box-shadow:-2px 0 4px #ff0000;transform:skewX(-2deg)}
50%{box-shadow:2px 0 4px #ff0000;transform:skewX(2deg)}
75%{box-shadow:-1px 0 2px #ff0000}
100%{box-shadow:0 0 0 #ff0000}
}
@keyframes glitchText{
0%,100%{opacity:1;text-shadow:0 0 4px #ff0000}
33%{opacity:0.7;text-shadow:-1px 0 #ff0000,1px 0 #00ffff}
66%{opacity:0.9;text-shadow:1px 0 #ff0000,-1px 0 #00ffff}
}
@keyframes discoveryPulse{
0%{opacity:0;transform:scale(0.8)}
30%{opacity:1;transform:scale(1.05)}
100%{opacity:1;transform:scale(1)}
}
@keyframes bounceIn{
0%{transform:scale(0);opacity:0}
50%{transform:scale(1.3)}
70%{transform:scale(0.9)}
100%{transform:scale(1);opacity:1}
}
@keyframes fadeSlide{
0%{opacity:0;transform:translateY(10px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes slotFlash{
0%{background:transparent}
50%{background:rgba(255,200,0,0.3)}
100%{background:transparent}
}
.prestige-glow-bronze{text-shadow:0 0 8px #cd7f32,0 0 16px #cd7f32;animation:prestigePulseBronze 2s ease-in-out infinite}
.prestige-glow-silver{text-shadow:0 0 10px #c0c0c0,0 0 20px #c0c0c0;animation:prestigePulseSilver 2s ease-in-out infinite}
.prestige-glow-gold{text-shadow:0 0 12px #ffd700,0 0 24px #ffd700;animation:prestigePulseGold 2s ease-in-out infinite}
.prestige-glow-platinum{text-shadow:0 0 15px #e5e4e2,0 0 30px #e5e4e2;animation:prestigePulsePlatinum 2s ease-in-out infinite}
.prestige-glow-high{text-shadow:0 0 20px #b9f2ff,0 0 40px #b9f2ff;animation:prestigePulseHigh 2s ease-in-out infinite}
@keyframes prestigePulseBronze{0%,100%{filter:drop-shadow(0 0 6px #cd7f32)}50%{filter:drop-shadow(0 0 14px #cd7f32)}}
@keyframes prestigePulseSilver{0%,100%{filter:drop-shadow(0 0 8px #c0c0c0)}50%{filter:drop-shadow(0 0 16px #c0c0c0)}}
@keyframes prestigePulseGold{0%,100%{filter:drop-shadow(0 0 10px #ffd700)}50%{filter:drop-shadow(0 0 20px #ffd700)}}
@keyframes prestigePulsePlatinum{0%,100%{filter:drop-shadow(0 0 12px #e5e4e2)}50%{filter:drop-shadow(0 0 24px #e5e4e2)}}
@keyframes prestigePulseHigh{0%,100%{filter:drop-shadow(0 0 15px #b9f2ff)}50%{filter:drop-shadow(0 0 30px #b9f2ff)}}
/* ===== TIER COLORS (shared) ===== */
.codex-tier-pill, .tier-common, .tier-rare, .tier-epic, .tier-legendary, .tier-mythic, .tier-raid_only{}
.codex-tier-pill{
display:inline-block; padding:2px 8px; border-radius:99px;
font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:.08em; line-height:1.4;
}
.codex-tier-pill.tier-common {background:rgba(107,114,135,0.20); color:#b8bdcc; border:1px solid rgba(107,114,135,0.45)}
.codex-tier-pill.tier-rare {background:rgba(59,130,246,0.20); color:#60a5fa; border:1px solid rgba(59,130,246,0.45)}
.codex-tier-pill.tier-epic {background:rgba(168,85,247,0.20); color:#c084fc; border:1px solid rgba(168,85,247,0.45)}
.codex-tier-pill.tier-legendary{background:rgba(255,215,0,0.20); color:#fde047; border:1px solid rgba(255,215,0,0.45)}
.codex-tier-pill.tier-mythic {background:rgba(255,107,107,0.22); color:#fca5a5; border:1px solid rgba(255,107,107,0.50)}
.codex-tier-pill.tier-raid_only{background:rgba(34,197,94,0.20); color:#86efac; border:1px solid rgba(34,197,94,0.45)}
/* ===== AUGMENT CODEX ===== */
.codex-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:10px; max-height:520px; overflow-y:auto; padding-right:6px;
}
.codex-card{
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius); padding:12px;
transition:all var(--t-fast); position:relative;
}
.codex-card.locked{opacity:0.55; filter:grayscale(0.65)}
.codex-card.owned{background:linear-gradient(180deg, var(--panel2), var(--panel))}
.codex-card:hover{transform:translateY(-2px); border-color:var(--line-2); box-shadow:0 4px 14px rgba(0,0,0,0.3)}
.codex-card.tier-rare.owned {border-color:rgba(59,130,246,0.40)}
.codex-card.tier-epic.owned {border-color:rgba(168,85,247,0.45)}
.codex-card.tier-legendary.owned{border-color:rgba(255,215,0,0.50); box-shadow:0 0 0 1px rgba(255,215,0,0.10)}
.codex-card.tier-mythic.owned {border-color:rgba(255,107,107,0.55); box-shadow:0 0 0 1px rgba(255,107,107,0.15), 0 0 14px rgba(255,107,107,0.10)}
.codex-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:8px}
.codex-icon{
font-size:30px; line-height:1; width:42px; height:42px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:1px solid var(--line);
border-radius:var(--radius-sm); flex-shrink:0;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.codex-meta{flex:1; min-width:0}
.codex-name{font-weight:700; font-size:13.5px; color:var(--text); line-height:1.2; margin-bottom:4px}
.codex-tier-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.codex-count{font:600 11px 'JetBrains Mono', monospace; color:var(--ok)}
.codex-locked-tag{font-size:10px; color:var(--muted-2); font-weight:600}
.codex-desc{font-size:12px; line-height:1.5; color:var(--text-2); margin-top:4px}
/* ===== SOCKETS ===== */
.socket-card{
background:linear-gradient(135deg, rgba(139,158,255,0.08), rgba(167,139,250,0.04));
border:1px solid var(--accent-line); margin-bottom:14px;
}
.socket-row{
display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
gap:10px;
}
.socket-slot{
background:var(--panel); border:2px dashed var(--line-2);
border-radius:var(--radius); padding:12px 10px;
min-height:110px; text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
transition:all var(--t-fast); position:relative;
}
.socket-slot.filled{border-style:solid; background:var(--panel2)}
.socket-slot.tier-rare.filled {border-color:rgba(59,130,246,0.55)}
.socket-slot.tier-epic.filled {border-color:rgba(168,85,247,0.55)}
.socket-slot.tier-legendary.filled{border-color:rgba(255,215,0,0.55); box-shadow:0 0 12px rgba(255,215,0,0.15)}
.socket-slot.tier-mythic.filled {border-color:rgba(255,107,107,0.55); box-shadow:0 0 14px rgba(255,107,107,0.18)}
.socket-icon{font-size:24px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.socket-name{font-weight:700; font-size:12.5px; color:var(--text)}
.socket-desc{font-size:10.5px; line-height:1.35; padding:0 4px}
.socket-remove{margin-top:6px; padding:3px 8px; font-size:10px}
.socket-empty{display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0.6}
.aug-pick.tier-rare {border:1px solid rgba(59,130,246,0.55)}
.aug-pick.tier-epic {border:1px solid rgba(168,85,247,0.55)}
.aug-pick.tier-legendary{border:1px solid rgba(255,215,0,0.60); color:#0a0b10}
.aug-pick.tier-mythic {border:1px solid rgba(255,107,107,0.60)}
/* ===== POST-FIGHT LOOT ===== */
.result-banner.win h2{color:var(--ok); text-shadow:0 0 14px rgba(74,222,128,0.35)}
.result-banner.lose h2{color:var(--err); text-shadow:0 0 14px rgba(248,113,113,0.35)}
.loot-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:12px;
}
.loot-card{
position:relative;
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius); padding:14px 12px;
text-align:center; display:flex; flex-direction:column;
align-items:center; gap:6px;
animation:lootDropIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.loot-card.tier-common {border-color:rgba(107,114,135,0.45)}
.loot-card.tier-rare {border-color:rgba(59,130,246,0.55); box-shadow:0 0 16px rgba(59,130,246,0.10)}
.loot-card.tier-epic {border-color:rgba(168,85,247,0.55); box-shadow:0 0 18px rgba(168,85,247,0.14)}
.loot-card.tier-legendary{border-color:rgba(255,215,0,0.55); box-shadow:0 0 22px rgba(255,215,0,0.20); animation:lootDropIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1), legendaryShine 2.5s ease-in-out infinite 320ms}
.loot-card.tier-mythic {border-color:rgba(255,107,107,0.60); box-shadow:0 0 28px rgba(255,107,107,0.25); animation:lootDropIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1), mythicShine 2s ease-in-out infinite 320ms}
.loot-card.new::before{
content:''; position:absolute; inset:-1px;
border-radius:var(--radius); pointer-events:none;
background:linear-gradient(135deg, transparent 0%, rgba(139,158,255,0.20) 50%, transparent 100%);
background-size:200% 200%;
animation:newShimmer 1.6s ease-in-out infinite;
}
.loot-new-badge{
position:absolute; top:-8px; right:-8px;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
color:#0a0b10; font:700 10px/1 'JetBrains Mono', monospace;
padding:4px 8px; border-radius:99px;
box-shadow:0 4px 14px rgba(139,158,255,0.45);
letter-spacing:.06em;
animation:badgePop 280ms ease-out 200ms both;
z-index:1;
}
.loot-icon{font-size:36px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5))}
.loot-name{font-weight:700; font-size:14px; color:var(--text); letter-spacing:-0.005em}
.loot-desc{font-size:11.5px; color:var(--text-2); line-height:1.45; margin-top:2px}
@keyframes lootDropIn{
0%{opacity:0; transform:translateY(-12px) scale(0.85)}
100%{opacity:1; transform:none}
}
@keyframes badgePop{
0%{opacity:0; transform:scale(0.5) rotate(-12deg)}
60%{transform:scale(1.15) rotate(4deg)}
100%{opacity:1; transform:scale(1) rotate(0)}
}
@keyframes newShimmer{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes legendaryShine{
0%,100%{box-shadow:0 0 22px rgba(255,215,0,0.20)}
50%{box-shadow:0 0 32px rgba(255,215,0,0.35)}
}
@keyframes mythicShine{
0%,100%{box-shadow:0 0 28px rgba(255,107,107,0.25)}
50%{box-shadow:0 0 40px rgba(255,107,107,0.45)}
}
/* ===== PET COMPANION (in combat) ===== */
.pet-companion-strip{
display:flex; gap:12px; align-items:center; flex-wrap:wrap;
padding:8px 12px; margin-bottom:12px;
background:linear-gradient(135deg, rgba(110,231,183,0.10), transparent 70%);
border:1px solid rgba(110,231,183,0.30); border-radius:var(--radius);
box-shadow:inset 0 0 0 1px rgba(110,231,183,0.06);
}
.pet-comp-info{display:flex; gap:10px; align-items:center; flex:1; min-width:0}
.pet-comp-icon{
font-size:24px; line-height:1; width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:1px solid rgba(110,231,183,0.40);
border-radius:50%;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
animation:petBob 3s ease-in-out infinite;
}
.pet-comp-name{font-weight:700; font-size:13px; color:#86efac}
.pet-comp-desc{margin-top:2px; max-width:420px}
.pet-comp-log{
display:flex; flex-direction:column; gap:2px;
border-left:1px dashed var(--line); padding-left:10px;
}
.pet-comp-log-line{
color:var(--text-2); font-style:italic;
animation:fadeIn 240ms ease-out;
}
@keyframes petBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}
}
/* ===== PET SANCTUARY ===== */
.pet-equipped-banner{
background:linear-gradient(135deg, rgba(110,231,183,0.14), rgba(34,197,94,0.06));
border:1px solid rgba(110,231,183,0.40); margin-bottom:14px;
}
.pet-banner-icon{
font-size:32px; line-height:1; width:54px; height:54px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:2px solid rgba(110,231,183,0.55);
border-radius:50%;
filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
animation:petBob 2.4s ease-in-out infinite;
}
.pet-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:12px;
}
.pet-card{
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius); padding:14px;
text-align:center; transition:all var(--t-fast);
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pet-card:hover{transform:translateY(-2px); border-color:var(--line-2); box-shadow:0 4px 14px rgba(0,0,0,0.3)}
.pet-card.equipped{
border-color:rgba(110,231,183,0.55);
background:linear-gradient(180deg, rgba(110,231,183,0.10), var(--panel2));
box-shadow:0 0 0 1px rgba(110,231,183,0.30), 0 0 20px rgba(110,231,183,0.15);
}
.pet-card.tier-rare {border-color:rgba(59,130,246,0.40)}
.pet-card.tier-epic {border-color:rgba(168,85,247,0.45)}
.pet-card.tier-legendary{border-color:rgba(255,215,0,0.55); box-shadow:0 0 14px rgba(255,215,0,0.10)}
.pet-card-icon{font-size:42px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5)); margin-bottom:4px}
.pet-card-name{font-weight:700; font-size:14.5px; color:var(--text); letter-spacing:-0.005em}
.pet-card-desc{font-size:12px; line-height:1.5; color:var(--text-2); margin-top:4px}
/* ===== RAIDS ===== */
.raid-hub-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:14px;
}
.raid-card{
padding:16px; transition:all var(--t-base);
}
.raid-card:hover{transform:translateY(-2px)}
.raid-card-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px}
.raid-card-icon{font-size:36px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5))}
.raid-phases-row{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:6px; margin-bottom:10px;
padding:8px; background:var(--panel); border-radius:var(--radius-sm);
border:1px solid var(--line);
}
.raid-phase-pip{
display:flex; flex-direction:column; align-items:center; gap:2px;
text-align:center;
}
.raid-phase-pip-num{font-size:20px; line-height:1}
.raid-phase-pip-stats{
font:600 9.5px 'JetBrains Mono', monospace;
color:var(--muted); letter-spacing:0;
line-height:1.3;
}
.raid-card-rewards{
padding-top:10px; border-top:1px solid var(--line);
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
color:var(--text-2);
}
.raid-phase-banner{
margin-bottom:10px;
padding:12px 14px;
}
.raid-phase-dot{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%;
background:var(--panel3); border:1px solid var(--line);
font-size:14px;
transition:all var(--t-fast);
opacity:0.4;
}
.raid-phase-dot.done{
opacity:0.6; background:rgba(74,222,128,0.10);
border-color:rgba(74,222,128,0.35);
}
.raid-phase-dot.active{
opacity:1; background:var(--accent-soft);
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft), 0 0 12px var(--accent);
animation:raidDotPulse 1.4s ease-in-out infinite;
}
@keyframes raidDotPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.1)}
}
/* ===== CO-OP RAIDS ===== */
.coop-raid-shell{
display:flex; flex-direction:column; gap:12px;
padding:12px 0;
}
.coop-boss-bar-wrap{
background:var(--panel); border:1px solid var(--line);
border-radius:var(--radius-sm); padding:12px 14px;
position:relative; overflow:hidden;
}
.coop-boss-bar-fill{
position:absolute; left:0; top:0; bottom:0;
background:linear-gradient(90deg,#b91c1c,#ef4444);
transition:width 0.6s ease; z-index:0;
opacity:0.25;
}
.coop-boss-bar-content{ position:relative; z-index:1; }
.coop-party-row{
display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
padding:10px 0;
}
.coop-player-card{
display:flex; flex-direction:column; align-items:center;
gap:4px; padding:8px 10px; border-radius:var(--radius-sm);
border:1px solid var(--line); background:var(--panel);
min-width:80px; position:relative; transition:border-color 0.2s;
}
.coop-player-card.is-me{border-color:var(--accent)}
.coop-player-card.dead{opacity:0.4; filter:grayscale(0.8)}
.coop-player-card.anim-attack{animation:coopAttack 0.5s ease;}
.coop-player-card.anim-heal{animation:coopHeal 0.4s ease;}
.coop-player-card.anim-buff{animation:coopBuff 0.4s ease;}
@keyframes coopAttack{
0%{transform:translateX(0)} 20%{transform:translateX(12px) rotate(3deg)}
60%{transform:translateX(-4px)} 100%{transform:translateX(0)}
}
@keyframes coopHeal{
0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)}
0%{box-shadow:none} 50%{box-shadow:0 0 14px rgba(74,222,128,0.7)} 100%{box-shadow:none}
}
@keyframes coopBuff{
0%{transform:scale(1)} 30%{transform:scale(1.06) rotate(-2deg)} 70%{transform:scale(1.03) rotate(1deg)} 100%{transform:scale(1)}
}
.coop-player-hp-bar{
width:60px; height:5px; background:var(--line); border-radius:3px; overflow:hidden;
}
.coop-player-hp-bar-fill{
height:100%; background:var(--accent-green, #4ade80);
transition:width 0.4s;
}
.coop-player-name{font-size:10px; font-weight:700; letter-spacing:0.04em; color:var(--fg-2);}
.coop-player-hp-label{font:600 9px 'JetBrains Mono',monospace; color:var(--muted);}
.coop-float-label{
position:absolute; top:-16px; left:50%; transform:translateX(-50%);
font:700 11px 'JetBrains Mono',monospace; pointer-events:none;
animation:coopFloat 1.1s ease forwards;
}
@keyframes coopFloat{
0%{opacity:1;transform:translateX(-50%) translateY(0)}
100%{opacity:0;transform:translateX(-50%) translateY(-24px)}
}
.coop-log{
max-height:120px; overflow-y:auto; font:600 10px 'JetBrains Mono',monospace;
background:var(--panel3); border:1px solid var(--line); border-radius:var(--radius-sm);
padding:8px 10px; display:flex; flex-direction:column-reverse; gap:3px;
color:var(--fg-3);
}
.coop-log-entry{line-height:1.4;}
.coop-log-entry.type-dmg{color:var(--hp)}
.coop-log-entry.type-phase{color:var(--accent); font-size:11px;}
.coop-log-entry.type-win{color:#4ade80; font-size:11px;}
.coop-log-entry.type-heal{color:#4ade80;}
.coop-log-entry.type-buff{color:var(--insight);}
.coop-log-entry.type-join{color:var(--fg-2);}
.coop-target-panel{
display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;
}
.coop-target-btn{
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:6px 10px; border-radius:6px; border:1px solid var(--line);
background:var(--panel3); cursor:pointer; font-size:10px;
transition:border-color 0.15s, background 0.15s;
}
.coop-target-btn:hover{border-color:var(--accent); background:var(--accent-soft);}
.coop-target-btn.selected{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
.coop-target-btn.enemy{border-color:rgba(239,68,68,0.4);}
.coop-target-btn.enemy.selected{border-color:#ef4444; background:rgba(239,68,68,0.12); color:#ef4444;}
.coop-lobby-card{
border:1px solid var(--line); border-radius:var(--radius-sm);
padding:18px; background:var(--panel);
}
.coop-lobby-players{
display:flex; flex-direction:column; gap:6px; margin:10px 0;
}
.coop-lobby-player{
display:flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:6px;
background:var(--panel3); border:1px solid var(--line);
}
.raid-rewards-row{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:12px; margin-top:14px;
}
/* ===== LEVEL-UP MODAL ===== */
.levelup-overlay{
position:fixed; inset:0; z-index:1000;
background:rgba(10,11,16,0.85);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
padding:20px;
animation:fadeIn 240ms ease-out;
}
.levelup-modal{
background:linear-gradient(180deg, rgba(139,158,255,0.12), var(--panel));
border:2px solid var(--accent);
border-radius:var(--radius-lg);
padding:28px;
max-width:780px; width:100%;
box-shadow:0 0 60px rgba(139,158,255,0.4), 0 0 0 1px var(--accent-line);
animation:lootDropIn 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.levelup-header{text-align:center; margin-bottom:20px}
.levelup-rank{
display:inline-block;
padding:5px 14px; border-radius:99px;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
color:#0a0b10;
font:700 11px 'JetBrains Mono', monospace;
letter-spacing:.12em;
margin-bottom:8px;
box-shadow:0 4px 14px rgba(139,158,255,0.45);
}
.levelup-header h2{font-size:26px; letter-spacing:-0.02em; margin-bottom:6px}
.levelup-choices{
display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
@media(max-width:760px){.levelup-choices{grid-template-columns:1fr}}
.levelup-choice{
background:var(--panel2); border:2px solid var(--line-2);
border-radius:var(--radius); padding:18px 14px;
text-align:center; cursor:pointer; font:inherit; color:var(--text);
display:flex; flex-direction:column; align-items:center; gap:6px;
transition:all var(--t-fast); position:relative;
min-height:160px;
}
.levelup-choice:hover{
transform:translateY(-3px) scale(1.02);
border-color:var(--accent);
box-shadow:0 8px 24px rgba(139,158,255,0.30);
}
.levelup-choice.tier-rare {border-color:rgba(59,130,246,0.55)}
.levelup-choice.tier-rare:hover{box-shadow:0 8px 24px rgba(59,130,246,0.30)}
.levelup-choice-icon{font-size:42px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5))}
.levelup-choice-name{font-weight:700; font-size:15px; color:var(--text); letter-spacing:-0.005em}
.levelup-choice-desc{font-size:12px; line-height:1.45; color:var(--text-2)}
/* ===== FORGE ===== */
.forge-balance-card{
background:linear-gradient(135deg, rgba(245,158,11,0.10), rgba(244,114,182,0.06));
border:1px solid rgba(245,158,11,0.30);
margin-bottom:14px;
}
.forge-stat-num{
font:700 20px 'JetBrains Mono', monospace;
color:var(--text);
}
.forge-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:12px;
}
.forge-card{
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius); padding:12px;
transition:all var(--t-fast);
display:flex; flex-direction:column; gap:6px;
}
.forge-card:hover{transform:translateY(-2px); border-color:var(--line-2)}
.forge-card.tier-rare {border-color:rgba(59,130,246,0.40)}
.forge-card.tier-epic {border-color:rgba(168,85,247,0.45)}
.forge-card.tier-legendary{border-color:rgba(255,215,0,0.55); box-shadow:0 0 14px rgba(255,215,0,0.10)}
.forge-card.tier-mythic {border-color:rgba(255,107,107,0.55); box-shadow:0 0 14px rgba(255,107,107,0.15)}
.forge-card-head{display:flex; gap:10px; align-items:center}
.forge-card-icon{
font-size:28px; line-height:1; width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:1px solid var(--line);
border-radius:var(--radius-sm);
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
flex-shrink:0;
}
.forge-card-name{font-weight:700; font-size:13px; color:var(--text); margin-bottom:2px}
.forge-card-desc{line-height:1.4}
.forge-upgrade-pips{
display:flex; gap:3px; margin-left:auto;
}
.upgrade-pip{
color:var(--muted-2); font-size:14px;
transition:color var(--t-fast);
}
.upgrade-pip.filled{color:var(--accent); text-shadow:0 0 6px var(--accent)}
.forge-craft-preview{padding:14px}
.forge-craft-tier{margin-top:4px}
/* ===== PASSIVES VIEW ===== */
.passives-section{padding:14px 16px; margin-bottom:12px}
.passives-grid{display:flex; flex-direction:column; gap:6px}
.passives-row{
display:flex; gap:10px; align-items:flex-start;
padding:9px 10px; border-radius:var(--radius-sm);
background:var(--panel2); border:1px solid var(--line);
transition:all var(--t-fast);
}
.passives-row:hover{border-color:var(--line-2); background:var(--panel3)}
.passives-row.tier-rare {border-left:3px solid rgba(59,130,246,0.55)}
.passives-row.tier-epic {border-left:3px solid rgba(168,85,247,0.55)}
.passives-row.tier-legendary{border-left:3px solid rgba(255,215,0,0.55)}
.passives-row.tier-mythic {border-left:3px solid rgba(255,107,107,0.60)}
.passives-icon{
font-size:22px; line-height:1; width:34px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.passives-name{font-weight:700; font-size:13px; color:var(--text); letter-spacing:-0.005em}
.passives-desc{margin-top:2px; line-height:1.45}
/* ===== FORBIDDEN EXCHANGE v2 ===== */
.exchange-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:12px;
}
.exchange-card{
padding:14px;
background:linear-gradient(180deg, rgba(248,113,113,0.06), var(--panel));
border:1px solid rgba(248,113,113,0.30);
transition:all var(--t-fast);
}
.exchange-card:hover:not(.disabled){
transform:translateY(-2px);
border-color:rgba(248,113,113,0.55);
box-shadow:0 6px 20px rgba(248,113,113,0.15);
}
.exchange-card.disabled{opacity:0.55; filter:grayscale(0.4)}
.exchange-card.confirming{
border-color:var(--err);
box-shadow:0 0 0 2px var(--err), 0 6px 24px rgba(248,113,113,0.30);
animation:exchangePulse 1.2s ease-in-out infinite;
}
@keyframes exchangePulse{
0%,100%{box-shadow:0 0 0 2px var(--err), 0 6px 24px rgba(248,113,113,0.30)}
50%{box-shadow:0 0 0 3px var(--err), 0 8px 32px rgba(248,113,113,0.50)}
}
.exchange-card-head{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.exchange-icon{font-size:26px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.exchange-trade{
display:grid; grid-template-columns:1fr auto 1fr; gap:8px;
align-items:center; margin-bottom:6px;
}
.exchange-trade-side{
padding:8px 10px; border-radius:var(--radius-sm);
background:var(--panel2); font-size:12px; line-height:1.4;
}
.exchange-trade-side.cost{
border:1px solid rgba(248,113,113,0.25);
background:linear-gradient(135deg, rgba(248,113,113,0.10), transparent 70%);
}
.exchange-trade-side.reward{
border:1px solid rgba(74,222,128,0.25);
background:linear-gradient(135deg, rgba(74,222,128,0.10), transparent 70%);
}
.exchange-arrow{font-size:18px; color:var(--muted); font-weight:700}
/* ===== PET XP BARS (in PetSanctuary) ===== */
.pet-xp-bar{
width:100%; height:4px; border-radius:99px;
background:rgba(255,255,255,0.06);
overflow:hidden; margin-top:6px;
}
.pet-xp-fill{
height:100%;
background:linear-gradient(90deg, var(--accent), var(--accent-2));
transition:width var(--t-base);
box-shadow:0 0 6px rgba(139,158,255,0.40);
}
.pet-xp-fill.max{
background:linear-gradient(90deg, var(--ok), #fbbf24);
box-shadow:0 0 8px rgba(251,191,36,0.50);
}
.pet-xp-tip{margin-top:3px; color:var(--muted); font-variant-numeric:tabular-nums; font-size:10.5px}
.pet-level-chip{
background:rgba(139,158,255,0.18);
color:var(--accent);
border:1px solid var(--accent-line);
font-weight:700;
font-family:'JetBrains Mono', monospace;
font-size:10.5px;
}
/* ===== STATS BUFF PROGRESSION (in Stats view) ===== */
.stat-buff-list{display:flex; flex-direction:column; gap:10px}
.stat-buff-row{
padding:10px 12px;
background:var(--panel2);
border:1px solid var(--line);
border-radius:var(--radius-sm);
}
.stat-buff-head{display:flex; gap:10px; align-items:center}
.stat-buff-icon{font-size:22px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}
.stat-buff-label{font-weight:700; font-size:13px; color:var(--text)}
/* ===== BESTIARY ===== */
.bestiary-grid{display:flex; flex-direction:column; gap:8px}
.bestiary-card{
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius);
transition:all var(--t-fast); overflow:hidden;
}
.bestiary-card:hover{border-color:var(--line-2)}
.bestiary-card.open{border-color:var(--accent-line); background:linear-gradient(180deg, var(--panel2), var(--panel))}
.bestiary-card.tier-elite {border-left:3px solid rgba(168,85,247,0.55)}
.bestiary-card.tier-boss {border-left:3px solid rgba(255,107,107,0.65)}
.bestiary-card.tier-minion {border-left:3px solid rgba(107,114,135,0.45)}
.bestiary-card-head{
display:flex; gap:12px; align-items:center;
padding:10px 14px;
background:transparent; border:0; width:100%;
cursor:pointer; color:var(--text); font:inherit;
transition:background var(--t-fast);
}
.bestiary-card-head:hover{background:var(--panel3)}
.bestiary-emoji{
font-size:28px; line-height:1; width:42px; height:42px;
display:flex; align-items:center; justify-content:center;
background:var(--panel3); border:1px solid var(--line);
border-radius:var(--radius-sm);
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
flex-shrink:0;
}
.bestiary-name{font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:3px}
.bestiary-tier-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.bestiary-toggle{font-size:14px; color:var(--muted); margin-left:6px}
.bestiary-body{
padding:12px 14px;
border-top:1px solid var(--line);
background:var(--panel);
animation:fadeIn 200ms ease-out;
}
.bestiary-section{margin-bottom:12px}
.bestiary-section:last-child{margin-bottom:0}
.bestiary-mistakes{
display:flex; flex-direction:column; gap:6px;
}
.bestiary-mistake-row{
padding:8px 10px;
background:rgba(248,113,113,0.06);
border:1px solid rgba(248,113,113,0.20);
border-left:3px solid var(--err);
border-radius:var(--radius-sm);
}
.bestiary-mistake-q{font-size:12.5px; color:var(--text); line-height:1.4}
.field-codex-overlay{
position:fixed; inset:0; z-index:950;
display:flex; justify-content:flex-end;
padding:12px;
background:rgba(3,7,6,0.74);
backdrop-filter:blur(6px);
animation:fadeIn 160ms ease-out;
}
.field-codex-shell{
width:min(760px, calc(100vw - 24px));
height:calc(100vh - 24px);
display:flex; flex-direction:column;
background:var(--bg-1);
border:1px solid var(--accent-line);
box-shadow:0 18px 48px rgba(0,0,0,0.5);
overflow:hidden;
}
.field-codex-head{
display:flex; align-items:flex-start; gap:12px;
padding:14px 16px;
background:var(--bg-2);
border-bottom:1px solid var(--line);
}
.field-codex-icon{
width:40px; height:40px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--accent-line);
color:var(--accent);
background:var(--bg-3);
}
.field-codex-title{margin:0 0 4px; font-size:18px}
.field-codex-body{flex:1; min-height:0; padding:14px 16px; overflow:auto}
.field-codex-close{
width:34px; height:34px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); background:var(--bg-3);
color:var(--fg); cursor:pointer;
}
.field-codex-close:hover{border-color:var(--accent-line); color:var(--accent)}
/* ===== HUB TOOLBAR (compact arena nav) ===== */
.hub-toolbar{
display:flex; flex-wrap:wrap; gap:14px;
margin-top:14px;
padding:10px 12px;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
}
.hub-toolbar-group{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
padding:0 4px;
border-right:1px solid var(--line);
}
.hub-toolbar-group:last-child{border-right:0}
.hub-toolbar-label{
font:700 10px 'JetBrains Mono', monospace;
color:var(--muted-2);
letter-spacing:.12em;
margin-right:4px;
padding-right:6px;
}
.hub-btn{
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:var(--radius-sm);
background:var(--panel2); border:1px solid var(--line);
color:var(--text-2); cursor:pointer;
font:600 12.5px 'Inter', sans-serif;
transition:all var(--t-fast);
white-space:nowrap;
}
.hub-btn:hover{
background:var(--panel3); color:var(--text);
border-color:var(--accent-line);
transform:translateY(-1px);
}
.hub-btn.primary{
background:linear-gradient(180deg, var(--accent), #7387f0);
color:#0a0b10; border-color:var(--accent);
}
.hub-btn.primary:hover{filter:brightness(1.08); border-color:var(--accent)}
.hub-btn.warn{
border-color:rgba(248,113,113,0.30);
color:#fca5a5;
}
.hub-btn.warn:hover{
background:rgba(248,113,113,0.10);
border-color:var(--err);
}
@media(max-width:760px){
.hub-toolbar-group{border-right:0; padding-bottom:6px; border-bottom:1px solid var(--line)}
.hub-toolbar-group:last-child{border-bottom:0; padding-bottom:0}
}
/* ===== COMBAT RESULT — overlay modal so you don't scroll ===== */
.result-overlay{
position:fixed; inset:0; z-index:900;
background:rgba(10,11,16,0.78);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
padding:20px;
animation:fadeIn 200ms ease-out;
overflow-y:auto;
}
.result-modal{
background:var(--panel); border:1px solid var(--line-2);
border-radius:var(--radius-lg);
padding:24px;
max-width:780px; width:100%;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
animation:lootDropIn 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
max-height:calc(100vh - 40px);
overflow-y:auto;
}
.result-modal.win{
border-color:rgba(74,222,128,0.45);
box-shadow:0 0 60px rgba(74,222,128,0.20), 0 20px 60px rgba(0,0,0,0.6);
}
.result-modal.lose{
border-color:rgba(248,113,113,0.45);
box-shadow:0 0 60px rgba(248,113,113,0.18), 0 20px 60px rgba(0,0,0,0.6);
}
.result-banner{margin-bottom:14px}
.result-banner.win h2{color:var(--ok); text-shadow:0 0 14px rgba(74,222,128,0.35)}
.result-banner.lose h2{color:var(--err); text-shadow:0 0 14px rgba(248,113,113,0.35)}
.result-loot{margin-bottom:14px}
.result-empty{
text-align:center; padding:18px;
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius); margin-bottom:14px;
}
.result-actions{
padding-top:14px;
border-top:1px solid var(--line);
gap:8px;
}
/* ===== INTENT — color system + tooltip pill ===== */
/* Tooltip-aware spans — hover shows the desc via title attr (Day 14 will replace
* with a proper tooltip component for touch devices) */
.intent{cursor:help; font-weight:600}
.intent-heavy_dmg, .enemy-intent-pill.intent-heavy_dmg, .intent-legend-key.intent-heavy_dmg, .biome-mod-chip.intent-heavy_dmg{
color:#fca5a5; background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.35);
}
.intent-light_dmg, .enemy-intent-pill.intent-light_dmg, .intent-legend-key.intent-light_dmg{
color:#fdba74; background:rgba(249,115,22,0.12); border-color:rgba(249,115,22,0.35);
}
.intent-med_dmg, .enemy-intent-pill.intent-med_dmg, .intent-legend-key.intent-med_dmg{
color:#fcd34d; background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.35);
}
.intent-fatal_dmg, .enemy-intent-pill.intent-fatal_dmg, .intent-legend-key.intent-fatal_dmg{
color:#fca5a5; background:rgba(239,68,68,0.20); border-color:rgba(239,68,68,0.55);
font-weight:700;
}
.intent-defend, .enemy-intent-pill.intent-defend, .intent-legend-key.intent-defend{
color:#93c5fd; background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.35);
}
.intent-debuff, .enemy-intent-pill.intent-debuff, .intent-legend-key.intent-debuff{
color:#c4b5fd; background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.35);
}
.intent-heal, .enemy-intent-pill.intent-heal, .intent-legend-key.intent-heal{
color:#86efac; background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35);
}
.intent-buff, .enemy-intent-pill.intent-buff, .intent-legend-key.intent-buff{
color:#fde047; background:rgba(234,179,8,0.12); border-color:rgba(234,179,8,0.35);
}
.intent-summon, .enemy-intent-pill.intent-summon, .intent-legend-key.intent-summon{
color:#fcd34d; background:rgba(234,179,8,0.16); border-color:rgba(234,179,8,0.40);
}
.intent-telegraph, .enemy-intent-pill.intent-telegraph, .intent-legend-key.intent-telegraph{
color:#a8a29e; background:rgba(120,113,108,0.16); border-color:rgba(120,113,108,0.40);
animation:telegraphPulse 1.4s ease-in-out infinite;
}
.intent-utility, .enemy-intent-pill.intent-utility, .intent-legend-key.intent-utility{
color:#cbd5e1; background:rgba(100,116,139,0.14); border-color:rgba(100,116,139,0.36);
}
@keyframes telegraphPulse{
0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
50%{box-shadow:0 0 0 2px rgba(168,162,158,0.30)}
}
.enemy-intent-pill{
display:inline-block; margin-top:4px;
padding:2px 8px; border-radius:99px;
border:1px solid var(--line);
font:600 10.5px 'Inter', sans-serif;
cursor:help;
}
.intent-desc-line{
margin-top:6px; padding:4px 8px;
background:var(--panel3); border:1px solid var(--line);
border-radius:var(--radius-sm);
color:var(--text-2); font-style:italic;
line-height:1.4; max-width:340px;
}
/* ===== INTENT LEGEND (combat — small key strip) ===== */
.intent-legend{
display:flex; flex-wrap:wrap; align-items:center;
gap:6px; margin-bottom:10px;
padding:6px 10px;
background:var(--panel2); border:1px solid var(--line);
border-radius:var(--radius-sm);
}
.intent-legend-label{
font:700 10px 'JetBrains Mono', monospace;
letter-spacing:.12em; color:var(--muted-2);
margin-right:4px;
}
.intent-legend-key{
display:inline-block;
padding:2px 7px; border-radius:99px;
font:600 10.5px 'Inter', sans-serif;
border:1px solid var(--line);
line-height:1.4;
}
/* ===== Arena UX: hierarchy & decision clarity (scoped) =====
- Primary focus: current question + chosen action (.combat-q + .action-card)
- Secondary focus: current target enemy (.combat-side.boss / .enemies-grid .targeted)
- Tertiary / de-emphasised: biome banner, logs, pet strip, non-target enemies
- Visual emphasis is intentionally calm: selected action is clear but not flashy
*/
.arena-combat[data-arena] {
background-color:var(--bg-1);
}
/* Primary: question card */
.arena-combat[data-arena] .combat-q {
border-left: 3px solid var(--accent);
background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
padding: 16px;
margin-top: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,0.45);
z-index: 30;
}
.arena-combat[data-arena] .q-prompt, .arena-combat[data-arena] .combat-q h3 {
font-size: 20px;
line-height: 1.26;
color: var(--text);
}
/* Primary companion: action card + selected action (toned down) */
.arena-combat[data-arena] .action-card {
margin-top: 10px;
border-left: 3px solid var(--accent);
padding: 12px;
background: linear-gradient(180deg, rgba(125,216,125,0.02), transparent);
box-shadow: 0 8px 20px rgba(0,0,0,0.42);
z-index: 25;
}
/* Slightly emphasize selected action without strong glow or motion */
.arena-combat[data-arena] .action-row .action-btn{
transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
opacity: 0.96;
}
.arena-combat[data-arena] .action-row .action-btn:not(.selected){
opacity: 0.86;
filter: none;
box-shadow: none;
}
.arena-combat[data-arena] .action-row .action-btn.selected{
opacity: 1;
transform: translateY(-4px);
border: 2px solid var(--accent);
background: linear-gradient(180deg, rgba(125,216,125,0.06), rgba(125,216,125,0.02));
box-shadow: 0 10px 20px rgba(0,0,0,0.45);
}
.arena-combat[data-arena] .action-row .action-btn.selected .action-icon{ font-size:26px; }
/* Secondary: target enemy */
.arena-combat[data-arena] .combat-hud .combat-side.boss{
border-left: 2px solid var(--accent);
background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
padding: 10px;
box-shadow: 0 8px 22px rgba(0,0,0,0.44);
}
.arena-combat[data-arena] .combat-hud .combat-side.boss .combat-name{
font-size: 14px; font-weight:800; color:var(--text);
}
.arena-combat[data-arena] .combat-hud .combat-side.boss .hp-bar{ height:8px; border-radius:0; }
/* Enemies grid: non-targets de-emphasized; targeted stands out */
.arena-combat[data-arena] .enemies-grid > *{ opacity: 0.68; transform:none; transition: all 180ms ease; }
.arena-combat[data-arena] .enemies-grid > *.targeted{ opacity:1; border-color:var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,0.44); transform: translateY(-6px); }
/* Intent clarity */
.arena-combat[data-arena] .enemy-intent{ border-left-width:2px; padding:6px 8px; }
.arena-combat[data-arena] .enemy-intent .v{ font-weight:700; }
/* De-emphasize non-critical surfaces */
.arena-combat[data-arena] .biome-banner,
.arena-combat[data-arena] .pet-companion-strip,
.arena-combat[data-arena] .intent-legend,
.arena-combat[data-arena] .combat-feedback{
opacity: 0.7;
font-size: 12.5px;
color: var(--muted-2);
background: transparent;
border-color: rgba(255,255,255,0.03);
}
.arena-combat[data-arena] .card { margin-bottom: 8px; padding: 10px; }
@media(max-width:900px){
.arena-combat[data-arena] .q-prompt{ font-size:18px; }
.arena-combat[data-arena] .action-row .action-btn.selected{ transform: none; box-shadow: 0 8px 18px rgba(0,0,0,0.42); }
.arena-combat[data-arena] .combat-hud{ gap: 8px; padding: 10px; }
}
/* End scoped Arena UX */
/* ===== New cram split: Study Pass + Arena sprint surfaces ===== */
.study-pass,
.lockin-run{
display:flex;
flex-direction:column;
gap:14px;
}
.study-pass-hero,
.lockin-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:16px;
border:1px solid var(--line);
background:linear-gradient(180deg, rgba(125,216,125,0.06), rgba(255,255,255,0.01));
}
.pass-kicker,
.lockin-kicker{
color:var(--accent);
font-weight:800;
letter-spacing:.16em;
}
.pass-odds{
min-width:190px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}
.pass-odds b{
font:800 26px 'JetBrains Mono', monospace;
color:var(--text);
}
.pass-layout{
display:grid;
grid-template-columns:minmax(280px, 390px) 1fr;
gap:14px;
}
.pass-panel h3,
.lockin-panel h3{
margin-top:0;
}
.pass-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.pass-form-grid label{
display:flex;
flex-direction:column;
gap:5px;
}
.pass-form-grid input,
.pass-form-grid select{
width:100%;
}
.pass-action-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.pass-topic-list{
display:flex;
flex-direction:column;
gap:8px;
}
.pass-topic-row{
display:grid;
grid-template-columns:34px 1fr auto;
gap:10px;
align-items:center;
padding:10px;
border:1px solid var(--line);
background:var(--panel2);
}
.pass-topic-row:hover{
border-color:var(--line-2);
background:var(--panel3);
}
.pass-rank{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--accent-line);
color:var(--accent);
font:800 12px 'JetBrains Mono', monospace;
background:var(--accent-soft);
}
.pass-topic-flags{
display:flex;
justify-content:flex-end;
flex-wrap:wrap;
gap:4px;
}
.pass-coach{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.pass-steps{
display:grid;
grid-template-columns:repeat(4, minmax(120px, 1fr));
gap:8px;
flex:1;
}
.pass-steps div{
display:flex;
align-items:center;
gap:8px;
padding:8px;
border:1px solid var(--line);
background:var(--panel2);
}
.pass-steps b{
color:var(--accent);
font:800 13px 'JetBrains Mono', monospace;
}
.lockin-panel{
border-left:3px solid var(--warn);
}
.cram-timer-strip{
display:flex;
align-items:center;
gap:8px;
padding:5px 10px;
border:1px solid rgba(248,113,113,0.28);
background:linear-gradient(90deg, rgba(248,113,113,0.14), rgba(255,255,255,0.02));
margin-bottom:0;
flex-shrink:0;
}
.cram-timer-strip.urgent{
border-color:rgba(248,113,113,0.75);
box-shadow:0 0 0 1px rgba(248,113,113,0.16), 0 14px 32px rgba(248,113,113,0.08);
}
.cram-timer-clock{
font:900 24px 'JetBrains Mono', monospace;
color:var(--err);
min-width:82px;
}
.cram-progress-bar{
flex:1;
min-width:120px;
height:6px;
border:1px solid var(--line);
background:rgba(255,255,255,0.05);
overflow:hidden;
}
.cram-progress-fill{
height:100%;
background:linear-gradient(90deg, var(--accent), var(--warn));
transition:width 200ms ease;
}
.cram-draft-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
gap:10px;
}
.cram-draft-card{
position:relative;
text-align:left;
cursor:pointer;
min-height:170px;
border:1px solid var(--line);
background:var(--panel2);
}
.cram-draft-card.picked{
border-color:var(--accent);
background:linear-gradient(180deg, var(--accent-soft), var(--panel2));
}
.cram-draft-card.passive{
border-style:dashed;
}
.cram-draft-icon{
font-size:30px;
margin-bottom:8px;
}
.cram-draft-name{
font-weight:800;
margin-bottom:6px;
}
.cram-draft-desc{
margin-top:8px;
}
.cram-draft-check{
position:absolute;
top:8px;
right:8px;
color:var(--accent);
font:900 18px 'JetBrains Mono', monospace;
}
.cram-modal-overlay{
position:fixed;
inset:0;
z-index:100;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(0,0,0,0.62);
backdrop-filter:blur(4px);
}
.cram-modal{
max-width:780px;
width:100%;
padding:16px;
border:1px solid var(--accent-line);
background:var(--panel);
box-shadow:0 24px 80px rgba(0,0,0,0.55);
}
.cram-pick-card{
text-align:left;
cursor:pointer;
}
@media(max-width:900px){
.study-pass-hero,
.lockin-hero,
.pass-coach{
flex-direction:column;
align-items:stretch;
}
.pass-layout,
.pass-form-grid,
.pass-steps{
grid-template-columns:1fr;
}
.pass-topic-row{
grid-template-columns:30px 1fr;
}
.pass-topic-flags{
grid-column:1 / -1;
justify-content:flex-start;
}
}
/* ===== UI FOUNDATION BRIDGE: tactical skin over legacy Arena CSS ===== */
.topbar.mode-arena{
background:var(--bg-2);
border-bottom:1px solid var(--line);
box-shadow:none;
}
.brand-badge{
border-radius:0;
background:var(--accent);
color:var(--bg-1);
box-shadow:none;
font-family:var(--font-mono);
letter-spacing:0.12em;
}
.splash{
background:
linear-gradient(var(--line-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
var(--bg-1);
background-size:32px 32px,32px 32px,100% 100%;
}
.splash-bg{
background:radial-gradient(900px 540px at 50% -12%, rgba(125,216,125,0.08), transparent 65%);
}
.splash-card{
background:var(--bg-2);
border:1px solid var(--line-2);
border-radius:0;
box-shadow:none;
}
.splash-logo{
border-radius:0;
background:var(--accent);
box-shadow:0 0 22px var(--accent-glow);
clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.splash-logo::after{
background:none;
}
.splash-logo-inner{
border-radius:0;
background:var(--bg-2);
box-shadow:none;
clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);
}
.splash-title{
color:var(--text);
background:none;
-webkit-text-fill-color:currentColor;
}
.splash-mode{
border-radius:0;
background:var(--bg-3);
border:1px solid var(--line);
box-shadow:none;
}
.splash-mode:hover,
.splash-mode.arena:hover{
background:var(--bg-4);
border-color:var(--accent-line);
box-shadow:none;
}
.char-card,
.boss-card,
.combat-hud,
.combat-q,
.action-card,
.action-btn,
.action-locked-banner,
.hotbar-slot.mini,
.weapon-card,
.tree-skill,
.loadout-slot,
.ability-card,
.reward-card,
.armory-item,
.armory-detail,
.armory-ab,
.sp-bank,
.socket-card,
.socket-slot,
.library-tracker,
.library-rail,
.library-content,
.library-pdfs,
.library-pdf-toolbar,
.pdf-missing,
.stage-card,
.stage-emoji,
.boss-stage,
.elite-card,
.insights-panel,
.practice-notes,
.biome-banner,
.pet-companion-strip,
.pet-equipped-banner,
.pet-card,
.raid-card,
.raid-phase-banner,
.raid-phases-row,
.levelup-modal,
.levelup-choice,
.forge-balance-card,
.forge-card,
.forge-craft-preview,
.passives-section,
.passives-row,
.exchange-card,
.exchange-trade-side,
.stat-buff-row,
.bestiary-card,
.bestiary-card-head,
.bestiary-body,
.bestiary-mistakes,
.bestiary-mistake-row,
.hub-toolbar,
.hub-btn,
.result-modal,
.result-empty,
.loot-card,
.codex-card,
.codex-icon,
.cram-timer-strip,
.cram-draft-card,
.cram-modal,
.cram-pick-card,
.study-pass-hero,
.lockin-hero,
.pass-topic-row,
.pass-steps div{
border-radius:0;
box-shadow:none;
}
.char-card,
.combat-hud,
.armory-detail,
.library-content,
.stage-card,
.levelup-modal,
.result-modal,
.cram-modal,
.study-pass-hero,
.lockin-hero{
background:var(--bg-2);
border-color:var(--line);
}
.card.dynamic-card,
.char-card.dynamic-card,
.armory-shell.dynamic-card{
background:var(--bg-2);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.char-avatar-ring,
.biome-banner-icon,
.stage-emoji,
.codex-icon,
.forge-card-icon,
.pet-comp-icon,
.pet-banner-icon,
.raid-phase-dot{
border-radius:0;
}
.char-avatar-ring{
background:var(--accent);
color:var(--bg-1);
border-color:var(--accent);
}
.weapon-name,
.skill-row.current .skill-name,
.sp-cost,
.hub-toolbar-label,
.pass-kicker,
.lockin-kicker,
.pass-rank,
.cram-draft-check{
color:var(--accent);
}
.stat-label,
.hub-toolbar-label,
.intent-legend-label,
.pass-kicker,
.lockin-kicker{
font-family:var(--font-mono);
letter-spacing:0.14em;
}
.stat-pill,
.ab-pill,
.tier-badge,
.codex-tier-pill,
.biome-mod-chip,
.enemy-intent-pill,
.intent-legend-key,
.loot-new-badge,
.levelup-rank,
.xp-chip,
.pet-level-chip,
.action-locked-label,
.action-locked-est{
border-radius:0;
font-family:var(--font-mono);
letter-spacing:0.08em;
text-transform:uppercase;
}
.skill-bar,
.hp-bar,
.armory-wxp,
.pet-xp-bar,
.cram-progress-bar{
border-radius:0;
background:var(--bg-3);
border:1px solid var(--line);
}
.skill-fill,
.armory-wxp-fill,
.pet-xp-fill,
.cram-progress-fill{
box-shadow:none;
}
.hp-fill.player{background:var(--accent)}
.hp-fill.boss{background:var(--hp)}
.pet-xp-fill.max{background:linear-gradient(90deg, var(--accent), var(--insight));box-shadow:none}
.arena-combat{
--biome-tint:rgba(125,216,125,0.06);
--biome-accent:var(--accent);
border-radius:0;
}
.arena-combat[data-arena]{
background:
linear-gradient(var(--line-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--line-grid) 1px, transparent 1px),
var(--bg-1);
background-size:32px 32px,32px 32px,100% 100%;
}
.arena-combat[data-arena] .combat-q,
.arena-combat[data-arena] .action-card,
.arena-combat[data-arena] .combat-hud .combat-side.boss,
.arena-combat[data-arena] .enemies-grid > *.targeted{
box-shadow:none;
}
.arena-combat[data-arena] .combat-q,
.arena-combat[data-arena] .action-card{
background:var(--bg-2);
}
.arena-combat[data-arena] .action-row .action-btn.selected{
background:var(--accent-soft);
border-color:var(--accent);
box-shadow:none;
}
.action-btn:hover:not(:disabled){
box-shadow:none;
}
.action-btn.selected{
background:var(--accent-soft);
box-shadow:none;
}
.action-selected-check{
text-shadow:none;
}
.same-warn{
outline-color:var(--insight);
}
.momentum-chip,
.hub-btn.primary,
.action-locked-banner,
.socket-card,
.library-tracker,
.sp-bank{
background:var(--accent-soft);
border-color:var(--accent-line);
color:var(--accent);
}
.hub-btn{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
}
.hub-btn.primary{
color:var(--bg-1);
background:var(--accent);
}
.hub-btn.warn{
color:var(--hp);
border-color:rgba(217,69,69,0.35);
}
.intent,
.enemy-intent-pill,
.intent-legend-key,
.biome-mod-chip{
border-radius:0;
}
.intent-heavy_dmg,
.enemy-intent-pill.intent-heavy_dmg,
.intent-legend-key.intent-heavy_dmg,
.biome-mod-chip.intent-heavy_dmg,
.intent-fatal_dmg,
.enemy-intent-pill.intent-fatal_dmg,
.intent-legend-key.intent-fatal_dmg{
color:var(--i-heavy);
background:rgba(255,95,110,0.12);
border-color:rgba(255,95,110,0.36);
}
.intent-light_dmg,
.enemy-intent-pill.intent-light_dmg,
.intent-legend-key.intent-light_dmg,
.intent-med_dmg,
.enemy-intent-pill.intent-med_dmg,
.intent-legend-key.intent-med_dmg{
color:var(--i-light);
background:rgba(255,177,92,0.12);
border-color:rgba(255,177,92,0.34);
}
.intent-defend,
.enemy-intent-pill.intent-defend,
.intent-legend-key.intent-defend{
color:var(--block);
background:var(--block-2);
border-color:rgba(91,141,239,0.36);
}
.intent-debuff,
.enemy-intent-pill.intent-debuff,
.intent-legend-key.intent-debuff{
color:var(--i-debuff);
background:rgba(176,118,255,0.12);
border-color:rgba(176,118,255,0.36);
}
.intent-heal,
.intent-buff,
.enemy-intent-pill.intent-heal,
.enemy-intent-pill.intent-buff,
.intent-legend-key.intent-heal,
.intent-legend-key.intent-buff{
color:var(--accent);
background:var(--accent-soft);
border-color:var(--accent-line);
}
.intent-summon,
.enemy-intent-pill.intent-summon,
.intent-legend-key.intent-summon{
color:var(--insight);
background:var(--insight-2);
border-color:rgba(231,193,75,0.35);
}
.tier-badge.tier-basic,
.codex-tier-pill.tier-common,
.loot-card.tier-common{
color:var(--t-common);
border-color:rgba(139,149,141,0.45);
background:rgba(139,149,141,0.12);
}
.tier-badge.tier-core,
.codex-tier-pill.tier-rare,
.loot-card.tier-rare{
color:var(--t-rare);
border-color:rgba(91,141,239,0.45);
background:rgba(91,141,239,0.12);
}
.tier-badge.tier-advanced,
.codex-tier-pill.tier-epic,
.loot-card.tier-epic{
color:var(--t-epic);
border-color:rgba(176,118,255,0.45);
background:rgba(176,118,255,0.12);
}
.codex-tier-pill.tier-legendary,
.loot-card.tier-legendary,
.loot-card.legendary{
color:var(--t-legendary);
border-color:rgba(231,193,75,0.48);
background:var(--insight-2);
animation:none;
}
.codex-tier-pill.tier-mythic,
.loot-card.tier-mythic{
color:var(--t-mythic);
border-color:rgba(255,95,110,0.48);
background:rgba(255,95,110,0.12);
animation:none;
}
.loot-card.rarity-mythic,
.loot-card.rarity-epic,
.loot-card.rarity-rare,
.loot-card.rarity-legendary,
.loot-card.rarity-raid_only,
.loot-card.rarity-ultra_rare{
background:var(--bg-3);
box-shadow:none;
}
.loot-card.new::before{
border-radius:0;
background:linear-gradient(90deg, transparent, rgba(125,216,125,0.18), transparent);
}
.loot-new-badge,
.levelup-rank{
background:var(--accent);
color:var(--bg-1);
box-shadow:none;
}
.codex-card:hover,
.pet-card:hover,
.forge-card:hover,
.levelup-choice:hover,
.raid-card:hover,
.exchange-card:hover:not(.disabled),
.hub-btn:hover{
box-shadow:none;
}
.codex-card.owned,
.pet-card.equipped,
.bestiary-card.open,
.armory-item.equipped,
.weapon-card.equipped,
.ability-card.equipped,
.hotbar-slot.mini.filled,
.loadout-slot.filled,
.cram-draft-card.picked{
background:var(--accent-soft);
border-color:var(--accent-line);
box-shadow:none;
}
.hotbar-slot.mini.tree.filled,
.hotbar-slot.mini.weapon.filled{
background:var(--accent-soft);
border-color:var(--accent-line);
}
.levelup-modal,
.levelup-choice,
.result-modal,
.result-modal.win,
.result-modal.lose{
box-shadow:none;
}
.study-pass-hero,
.lockin-hero,
.pass-topic-row,
.pass-steps div,
.cram-draft-card,
.cram-timer-strip{
background:var(--bg-2);
border-color:var(--line);
}
.pass-rank{
border-color:var(--accent-line);
background:var(--accent-soft);
}
.cram-timer-strip{
border-left:3px solid var(--hp);
}
.cram-timer-strip.urgent{
box-shadow:none;
border-color:var(--hp);
}
/* ============ TABS — Loadout / Workshop wrappers + Study sub-nav ============ */
.view-tabs{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
background:var(--bg-2);
border:1px solid var(--line);
padding:6px 8px;
margin-bottom:14px;
flex-wrap:wrap;
}
.view-tabs-strip{
display:flex;
gap:2px;
flex-wrap:wrap;
}
.view-tab{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 12px;
background:transparent;
border:1px solid transparent;
color:var(--fg-2);
font-family:var(--font-mono);
font-size:11px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
transition:all var(--t-fast);
}
.view-tab:hover{
background:var(--bg-3);
color:var(--fg);
border-color:var(--line);
}
.view-tab.active{
background:var(--bg-3);
color:var(--fg);
border-color:var(--line-2);
box-shadow:inset 0 -2px 0 var(--accent);
}
.view-tab.warn.active{
box-shadow:inset 0 -2px 0 var(--hp);
}
.view-tab-icon{font-size:13px;letter-spacing:0}
.view-tab-label{letter-spacing:.12em}
.view-tab-badge{
margin-left:4px;
background:var(--accent-soft);
color:var(--accent);
border:1px solid var(--accent-line);
padding:1px 6px;
font-size:9px;
letter-spacing:.06em;
}
.view-tabs-back{
flex-shrink:0;
}
.view-tab-body{
/* Inner Back buttons in the wrapped views call a noop — they stay visible but do nothing.
A future polish pass should add a "wrapped" prop to each view to hide its own back. */
}
/* ============ STUDY SUB-NAV (parent → child sub-tabs row) ============
* Modernized in Phase D — slimmer, pill-style active state, fluid type,
* subtle glass background to match the topbar above. */
.topbar-subnav{
display:flex;
gap: var(--sp-1);
flex-wrap:wrap;
padding: var(--sp-2) clamp(14px, 2.5vw, 28px);
max-width:1800px;
margin:0 auto;
background: var(--surface-glass);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top:1px solid var(--border-1);
}
.topbar-subnav-btn{
background:transparent;
border:1px solid transparent;
color: var(--text-3);
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
cursor:pointer;
border-radius: var(--radius-pill);
transition: color 140ms, background 140ms;
position: relative;
}
.topbar-subnav-btn:hover{
color: var(--text-1);
background: var(--surface-3);
}
.topbar-subnav-btn.active{
color: var(--text-1);
background: var(--accent-soft);
border-color: var(--accent-line);
box-shadow: 0 0 0 1px var(--accent-line), 0 0 12px rgba(125,216,125,0.12);
}
/* Phone reflow — the Learn subnav has 6 items (home/study/practice/daily/due/
* interleaved). At 360px they wrap to multiple rows messily without tightening. */
@media (max-width:760px){
.topbar-subnav{ padding:4px 14px; gap:1px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.topbar-subnav::-webkit-scrollbar{ display:none; }
.topbar-subnav-btn{ padding:8px 8px; font-size:9.5px; letter-spacing:.08em; flex-shrink:0; min-height:36px; }
}
/* Collapsed Arena hub-toolbar — fewer groups, more breathing room. */
.hub-toolbar.hub-toolbar-collapsed .hub-toolbar-group{
flex:1 1 auto;
}
/* ============================================================
* XCOM HUD · Arcade VS Panel · single-viewport reflow
* Ported 2026-05-09 from design_handoff_v2 variant C (XCOM) +
* inset of variant E (Arcade VS). Initiative queue removed.
*
* Layout (single viewport, no scroll):
* .arena-combat[data-arena] ← flex column, height bound to viewport
* .biome-banner ← slim, ~40px
* .pet-companion-strip ← slim, conditional
* .xcom-enemies-bar ← top full-width row, ~140px
* .xcom-hud ← 3-rail middle, flex:1
* .xcom-hotbar-bar ← bottom full-width row, ~140px
* .insights-panel ← slim, conditional
* ============================================================ */
/* Hard-pin the combat surface to the visible viewport so nothing scrolls
outside it. --topbar-h must match the actual rendered topbar height.
Using 90px as a safe value (main topbar 44px + subnav ~46px). */
:root{ --topbar-h: 90px; }
.arena-combat[data-arena]{
display:flex;
flex-direction:column;
gap:6px;
height:calc(100dvh - var(--topbar-h));
max-height:calc(100dvh - var(--topbar-h));
overflow:hidden; /* all scroll lives INSIDE sections, never on the page */
}
/* Ultra-slim biome banner — one line, ~32px */
.arena-combat[data-arena] .biome-banner{
padding:4px 10px;
margin-bottom:0;
flex-shrink:0;
}
.arena-combat[data-arena] .biome-banner-name{ font-size:12px; }
.arena-combat[data-arena] .biome-banner-desc{ display:none; }
.arena-combat[data-arena] .biome-banner-icon{ font-size:16px; }
.arena-combat[data-arena] .biome-banner .biome-modifiers{ display:none; }
.arena-combat[data-arena] .pet-companion-strip{
padding:3px 10px;
margin-bottom:0;
flex-shrink:0;
}
/* TOP BAR · enemy lineup full-width */
.xcom-enemies-bar{
background:var(--bg-2);
border:1px solid var(--line);
padding:5px 10px;
position:relative;
flex-shrink:0;
}
.xcom-enemies-bar::before,
.xcom-enemies-bar::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.xcom-enemies-bar::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.xcom-enemies-bar::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
/* ── 3-RAIL XCOM HUD GRID ── */
.xcom-hud{
display:grid;
grid-template-columns:240px 1fr 280px;
gap:8px;
flex:1;
min-height:0; /* let inner panels scroll instead of pushing the outer */
}
/* Wider rails on large monitors (1400px+) */
@media (min-width:1400px){
.xcom-hud{
grid-template-columns:300px 1fr 340px;
gap:12px;
}
}
@media (min-width:1700px){
.xcom-hud{
grid-template-columns:360px 1fr 400px;
gap:16px;
}
}
@media (max-width:1180px){
.xcom-hud{
grid-template-columns:1fr;
flex:0 1 auto;
min-height:auto;
}
}
/* BOTTOM BAR · hotbar full-width */
.xcom-hotbar-bar{
flex-shrink:0;
margin-bottom:0;
padding:5px 10px 6px;
}
.xcom-hotbar-bar .action-row.xcom-action-row{
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:4px;
margin-top:5px;
}
/* Hide action descriptions in hotbar — selected action shows them in the locked-in banner */
.xcom-hotbar-bar .action-desc{ display:none; }
/* Shrink the unselected ability icon; selected stays full-size */
.xcom-hotbar-bar .action-btn .action-icon{ font-size:20px; margin-bottom:2px; }
.xcom-hotbar-bar .action-btn.selected .action-icon{ font-size:24px; }
.xcom-hotbar-bar .action-btn .action-name{ font-size:12px; }
/* Shrink the action buttons vertically */
.xcom-hotbar-bar .action-btn{ padding:6px 8px; }
/* At wide viewports let action cards breathe more */
@media (min-width:1400px){
.xcom-hotbar-bar .action-row.xcom-action-row{
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
}
/* InsightsPanel slim */
.arena-combat[data-arena] .insights-panel{
padding:4px 10px;
margin-bottom:0;
flex-shrink:0;
}
.xcom-rail{
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
overflow-y:auto;
min-height:0;
scrollbar-width:thin;
scrollbar-color:var(--line) transparent;
}
.xcom-stage{
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
overflow-y:auto;
min-height:0;
scrollbar-width:thin;
scrollbar-color:var(--line) transparent;
}
.xcom-panel{
background:var(--bg-2);
border:1px solid var(--line);
padding:10px 12px;
position:relative;
}
.xcom-panel::before,
.xcom-panel::after{
content:"";
position:absolute;
width:6px; height:6px;
border:1px solid var(--accent);
pointer-events:none;
}
.xcom-panel::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.xcom-panel::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
/* ── LEFT RAIL · OPERATOR / character ── */
.xcom-character .xcom-char-portrait{
display:flex;
flex-direction:column;
align-items:center;
padding:8px 0 6px;
border:1px solid var(--line);
background:var(--bg-3);
margin:6px 0 8px;
}
.xcom-char-emoji{
font-size:36px;
line-height:1;
filter:drop-shadow(0 0 12px var(--accent-glow));
animation:sprite-bob 2.6s ease-in-out infinite;
}
.xcom-char-class{
margin-top:6px;
color:var(--accent);
}
.xcom-char-name{
font-family:var(--font-display);
font-size:14px;
font-weight:600;
letter-spacing:0;
margin-bottom:6px;
}
.xcom-bar{
height:6px;
background:var(--bg-3);
border:1px solid var(--line);
position:relative;
overflow:hidden;
}
.xcom-bar-fill{
height:100%;
background:var(--hp);
transition:width var(--t-base);
}
.xcom-bar-hp .xcom-bar-fill{ background:var(--accent); }
.xcom-bar-enemy .xcom-bar-fill{ background:var(--hp); }
.xcom-bar-text{
font-size:10px;
color:var(--fg-2);
letter-spacing:.06em;
margin-top:3px;
}
.xcom-ap-row{
display:flex;
align-items:center;
gap:4px;
margin-top:4px;
}
.xcom-ap-pip{
width:14px;
height:14px;
background:var(--bg-3);
border:1px solid var(--line);
}
.xcom-ap-pip.filled{
background:var(--accent);
border-color:var(--accent);
box-shadow:0 0 4px var(--accent-glow);
}
.xcom-ap-text{
margin-left:6px;
color:var(--fg-2);
font-size:11px;
}
.xcom-stat-row{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:4px;
}
.xcom-stat-pill{
padding:3px 7px;
border:1px solid var(--line-2);
background:var(--bg-3);
font-family:var(--font-mono);
font-size:10px;
letter-spacing:.06em;
color:var(--fg-1);
}
.xcom-sockets-list{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:4px;
}
.xcom-socket-chip{
padding:3px 7px;
border:1px solid var(--accent-line);
background:var(--accent-soft);
font-family:var(--font-mono);
font-size:10px;
color:var(--accent);
letter-spacing:.06em;
}
.xcom-debuffs-list{
display:flex;
flex-direction:column;
gap:3px;
margin-top:4px;
}
.xcom-debuff-chip{
padding:3px 7px;
border:1px solid rgba(217,69,69,0.45);
background:rgba(217,69,69,0.10);
color:var(--hp);
font-family:var(--font-mono);
font-size:10px;
letter-spacing:.06em;
}
/* ── CENTER STAGE · enemy lineup ── */
.xcom-enemies-row{
background:var(--bg-2);
border:1px solid var(--line);
padding:10px 12px;
position:relative;
}
.xcom-enemies-row::before,
.xcom-enemies-row::after{
content:"";
position:absolute;
width:6px; height:6px;
border:1px solid var(--accent);
pointer-events:none;
}
.xcom-enemies-row::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.xcom-enemies-row::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.xcom-enemies-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:5px;
margin-top:5px;
}
.xcom-enemy-card{
display:flex;
flex-direction:column;
gap:2px;
padding:6px 8px;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
text-align:left;
font:inherit;
color:inherit;
transition:all var(--t-fast);
position:relative;
}
.xcom-enemy-card:hover{
background:var(--bg-4);
border-color:var(--line-2);
transform:translateY(-1px);
}
.xcom-enemy-card.targeted{
border-color:var(--accent);
background:var(--accent-soft);
box-shadow:inset 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow);
}
.xcom-enemy-card.targeted::before,
.xcom-enemy-card.targeted::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.xcom-enemy-card.targeted::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.xcom-enemy-card.targeted::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.xcom-enemy-emoji{
font-size:20px;
line-height:1;
text-align:center;
filter:drop-shadow(0 0 6px rgba(217,69,69,0.18));
}
.xcom-enemy-name{
font-family:var(--font-display);
font-size:12px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.xcom-enemy-intent{
margin-top:3px;
padding:2px 6px;
font-family:var(--font-mono);
font-size:9px;
letter-spacing:.06em;
border:1px solid var(--line);
background:var(--bg-1);
color:var(--fg-2);
}
/* ── ARCADE VS PANEL ── */
.arcade-vs-panel{
display:grid;
grid-template-columns:1fr 80px 1fr;
gap:0;
align-items:center;
background:
radial-gradient(60% 70% at 30% 50%, rgba(125,216,125,0.06), transparent 70%),
radial-gradient(60% 70% at 70% 50%, rgba(217,69,69,0.06), transparent 70%),
var(--bg-2);
border:1px solid var(--line-2);
padding:8px 10px;
position:relative;
overflow:hidden;
}
.arcade-vs-panel::before,
.arcade-vs-panel::after{
content:"";
position:absolute;
width:12px; height:12px;
pointer-events:none;
}
.arcade-vs-panel::before{
top:-1px; left:-1px;
border-top:1px solid var(--accent); border-left:1px solid var(--accent);
}
.arcade-vs-panel::after{
bottom:-1px; right:-1px;
border-bottom:1px solid var(--hp); border-right:1px solid var(--hp);
}
.arcade-vs-side{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
min-width:0;
}
.arcade-vs-player .arcade-sprite{
filter:drop-shadow(0 0 12px var(--accent-glow));
}
.arcade-vs-enemy .arcade-sprite{
filter:drop-shadow(0 0 12px rgba(217,69,69,0.45));
transform:scaleX(-1);
}
.arcade-sprite{
font-size:36px;
line-height:1;
animation:sprite-bob 1.8s ease-in-out infinite;
}
.arcade-vs-name{
font-family:var(--font-mono);
font-size:11px;
font-weight:700;
letter-spacing:.12em;
color:var(--fg);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.arcade-vs-player .arcade-vs-name{ color:var(--accent); }
.arcade-vs-enemy .arcade-vs-name{ color:var(--hp); }
.arcade-vs-hp{
width:80%;
height:6px;
background:var(--bg-3);
border:1px solid var(--line);
position:relative;
overflow:hidden;
}
.arcade-vs-hp-fill{
height:100%;
transition:width var(--t-base);
}
.arcade-vs-hp-fill.player{ background:var(--accent); }
.arcade-vs-hp-fill.enemy{ background:var(--hp); }
.arcade-vs-center{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
}
.arcade-vs-text{
font-family:var(--font-display);
font-size:24px;
font-weight:700;
letter-spacing:-0.04em;
color:var(--accent);
text-shadow:0 0 24px var(--accent-glow);
line-height:1;
}
.arcade-vs-round{
color:var(--fg-3);
letter-spacing:.18em;
text-transform:uppercase;
}
@keyframes sprite-bob{
0%, 100%{ transform:translateY(0); }
50% { transform:translateY(-4px); }
}
.arcade-vs-enemy .arcade-sprite{
/* override: keep flip + bob */
animation:sprite-bob-flip 1.8s ease-in-out infinite;
}
@keyframes sprite-bob-flip{
0%, 100%{ transform:scaleX(-1) translateY(0); }
50% { transform:scaleX(-1) translateY(-4px); }
}
/* ── CENTER STAGE · question card overrides ── */
.xcom-question{
/* keep existing .combat-q card styles, add tighter spacing */
position:relative;
}
.xcom-question::before,
.xcom-question::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.xcom-question::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.xcom-question::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.xcom-answer-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:5px;
margin-top:8px;
/* Scrollable if answer text is long — keeps single-viewport fit */
max-height:28vh;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:var(--line) transparent;
}
.xcom-answer-btn{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
font:inherit;
color:var(--fg-1);
text-align:left;
transition:all var(--t-fast);
}
.xcom-answer-btn:hover:not(:disabled){
background:var(--bg-4);
border-color:var(--accent-line);
color:var(--fg);
}
.xcom-answer-btn:disabled{
opacity:0.4;
cursor:not-allowed;
}
/* Eliminated wrong answers — shown in red, not removed, so player can see the process */
.xcom-answer-btn.eliminated{
background:rgba(220,38,38,0.12);
border-color:rgba(220,38,38,0.45);
color:var(--fg-3);
cursor:not-allowed;
opacity:0.75;
}
.eliminated-x{
margin-left:auto;
font-size:11px;
color:#ef4444;
font-weight:700;
letter-spacing:0.03em;
}
/* Chain active banner */
.chain-banner{
margin:6px 0 10px;
padding:8px 12px;
background:rgba(245,158,11,0.12);
border:1px solid rgba(245,158,11,0.45);
border-radius:4px;
color:#f59e0b;
font-size:12px;
font-weight:600;
letter-spacing:0.02em;
animation:chainPulse 1.2s ease-in-out infinite;
}
@keyframes chainPulse{
0%,100%{ opacity:1; }
50%{ opacity:0.65; }
}
.xcom-answer-key{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px; height:22px;
background:var(--bg-1);
border:1px solid var(--line-2);
color:var(--accent);
font-size:11px;
font-weight:700;
letter-spacing:0;
flex-shrink:0;
}
.xcom-answer-label{
font-family:var(--font-display);
font-size:13px;
white-space:pre-wrap; /* preserve intentional newlines in answers */
word-break:break-word;
min-width:0; /* allow flex shrink inside the grid cell */
line-height:1.45;
}
/* ── CENTER STAGE · hotbar row ── */
.xcom-hotbar{
/* existing .action-card styles apply; just ensure 5-col layout on the row */
}
.xcom-action-row{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
gap:6px;
}
/* ── RIGHT RAIL · INTEL ── */
.xcom-stats-panel .xcom-stat-line{
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 0;
border-top:1px solid var(--line);
}
.xcom-stats-panel .xcom-stat-line:first-of-type{ border-top:none; }
.xcom-stat-big{
font-size:18px;
font-weight:600;
color:var(--accent);
letter-spacing:0;
}
.xcom-intent-name{
font-family:var(--font-display);
font-size:15px;
font-weight:600;
margin-top:4px;
letter-spacing:0;
}
.xcom-intent-name.intent-heavy_dmg, .xcom-intent-name.intent-fatal_dmg{ color:var(--hp); }
.xcom-intent-name.intent-light_dmg, .xcom-intent-name.intent-med_dmg{ color:var(--insight); }
.xcom-intent-name.intent-defend{ color:var(--block); }
.xcom-intent-name.intent-debuff{ color:var(--xp); }
.xcom-intent-name.intent-heal, .xcom-intent-name.intent-buff{ color:var(--accent); }
.xcom-intent-name.intent-summon{ color:var(--insight); }
.xcom-intent-desc{
margin-top:6px;
color:var(--fg-2);
line-height:1.4;
}
.xcom-feedback-current{
margin-top:6px;
color:var(--fg);
font-family:var(--font-display);
font-size:13px;
}
.xcom-feedback-log{
margin-top:8px;
max-height:240px;
overflow:auto;
display:flex;
flex-direction:column;
gap:3px;
border-top:1px solid var(--line);
padding-top:6px;
}
.xcom-feedback-line{
color:var(--fg-2);
letter-spacing:0;
line-height:1.4;
}
/* Hide the legacy intent-legend strip and the old combat-feedback card —
the right-rail INTEL panel covers both now. */
.arena-combat[data-arena] .intent-legend{ display:none; }
.arena-combat[data-arena] .combat-feedback{ display:none; }
/* ============================================================
* CHARACTER SCREEN · select / create / test presets
* ============================================================ */
.char-screen{
max-width:1100px;
margin:0 auto;
padding:24px 18px 32px;
display:flex;
flex-direction:column;
gap:20px;
}
.char-screen-header{
text-align:center;
display:flex;
flex-direction:column;
gap:6px;
}
.char-screen-title{
font-family:var(--font-display);
font-size:36px;
font-weight:700;
letter-spacing:-0.02em;
margin:0;
color:var(--fg);
}
.char-section{
background:var(--bg-2);
border:1px solid var(--line);
padding:16px 18px;
position:relative;
}
.char-section::before,
.char-section::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.char-section::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.char-section::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.char-existing-card{
display:flex;
align-items:center;
gap:14px;
padding:14px;
background:var(--bg-3);
border:1px solid var(--line-2);
margin-top:8px;
}
.char-portrait-big{
font-size:48px;
line-height:1;
width:60px;
text-align:center;
filter:drop-shadow(0 0 12px var(--accent-glow));
}
.char-existing-name{
font-family:var(--font-display);
font-size:18px;
font-weight:600;
color:var(--fg);
}
.char-existing-perks{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
}
.char-perk-chip{
padding:2px 7px;
border:1px solid var(--accent-line);
background:var(--accent-soft);
color:var(--accent);
font-family:var(--font-mono);
font-size:9px;
letter-spacing:.06em;
}
.char-presets-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:8px;
margin-top:8px;
}
.char-preset-card{
display:flex;
flex-direction:column;
gap:4px;
padding:14px;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
text-align:left;
font:inherit;
color:inherit;
transition:all var(--t-fast);
}
.char-preset-card:hover{
background:var(--bg-4);
border-color:var(--accent-line);
transform:translateY(-1px);
}
.char-preset-emoji{
font-size:28px;
line-height:1;
}
.char-preset-name{
font-family:var(--font-display);
font-weight:600;
font-size:14px;
color:var(--fg);
}
.char-create-grid{
display:grid;
grid-template-columns:1fr 2fr;
gap:14px;
align-items:start;
}
@media (max-width:760px){
.char-create-grid{ grid-template-columns:1fr; }
}
.char-portrait-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:6px;
}
.char-portrait-cell{
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
line-height:1;
padding:14px 0;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
transition:all var(--t-fast);
}
.char-portrait-cell:hover{
background:var(--bg-4);
border-color:var(--line-2);
}
.char-portrait-cell.selected{
background:var(--accent-soft);
border-color:var(--accent);
box-shadow:0 0 12px var(--accent-glow);
}
.char-races-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:8px;
margin-top:6px;
}
.char-race-card{
display:flex;
flex-direction:column;
gap:6px;
padding:14px;
background:var(--bg-3);
border:1px solid var(--line);
cursor:pointer;
text-align:left;
font:inherit;
color:inherit;
transition:all var(--t-fast);
position:relative;
}
.char-race-card:hover{
background:var(--bg-4);
border-color:var(--line-2);
}
.char-race-card.selected{
background:var(--accent-soft);
border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow);
}
.char-race-card.selected::before,
.char-race-card.selected::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.char-race-card.selected::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.char-race-card.selected::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.char-race-head{
display:flex;
align-items:center;
gap:8px;
}
.char-race-emoji{
font-size:28px;
line-height:1;
}
.char-race-name{
font-family:var(--font-display);
font-weight:700;
font-size:16px;
color:var(--fg);
letter-spacing:-0.005em;
}
.char-race-check{
margin-left:auto;
color:var(--accent);
font-size:14px;
}
.char-race-lore{
color:var(--fg-2);
font-style:italic;
}
.char-race-perks{
margin-top:6px;
display:flex;
flex-direction:column;
gap:2px;
padding-top:8px;
border-top:1px solid var(--line);
}
.char-perk-line{
color:var(--fg-1);
letter-spacing:0;
line-height:1.4;
}
.char-create-actions{
display:flex;
gap:8px;
justify-content:flex-end;
margin-top:14px;
}
/* ── SAVED CHARACTERS slot picker ── */
.char-slots-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:8px;
margin-top:8px;
}
.char-slot-card{
display:flex;
align-items:stretch;
background:var(--bg-3);
border:1px solid var(--line);
position:relative;
transition:all var(--t-fast);
}
.char-slot-card:hover{
background:var(--bg-4);
border-color:var(--line-2);
}
.char-slot-card.active{
border-color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
background:var(--accent-soft);
}
.char-slot-card.active::before,
.char-slot-card.active::after{
content:"";
position:absolute;
width:8px; height:8px;
border:1px solid var(--accent);
pointer-events:none;
}
.char-slot-card.active::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.char-slot-card.active::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.char-slot-main{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
flex:1;
background:transparent;
border:0;
cursor:pointer;
text-align:left;
font:inherit;
color:inherit;
}
.char-slot-portrait{
font-size:32px;
line-height:1;
filter:drop-shadow(0 0 8px var(--accent-glow));
flex-shrink:0;
}
.char-slot-info{
flex:1;
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.char-slot-name{
font-family:var(--font-display);
font-size:14px;
font-weight:600;
color:var(--fg);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.char-slot-active-badge{
margin-top:4px;
align-self:flex-start;
padding:1px 6px;
background:var(--accent);
color:var(--bg-1);
font-family:var(--font-mono);
font-size:9px;
font-weight:700;
letter-spacing:.12em;
}
.char-slot-delete{
flex-shrink:0;
width:32px;
background:transparent;
border:0;
border-left:1px solid var(--line);
color:var(--fg-3);
cursor:pointer;
font-size:14px;
transition:all var(--t-fast);
}
.char-slot-delete:hover{
background:rgba(217,69,69,0.18);
color:var(--hp);
}
/* ============ CHARACTER CUSTOMIZER ============ */
.char-customizer{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-top:8px;
}
.char-preview-panel{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
min-width:110px;
}
.char-preview-sprite{
image-rendering:pixelated;
background:var(--bg-2);
border:1px solid var(--line);
padding:8px;
border-radius:4px;
}
.char-preview-name{
font-size:13px;
font-weight:700;
color:var(--fg);
letter-spacing:.06em;
}
.char-custom-controls{
flex:1;
min-width:220px;
display:flex;
flex-direction:column;
gap:10px;
}
.custom-row{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.custom-label{
min-width:72px;
font-size:10px;
font-weight:700;
letter-spacing:.1em;
color:var(--fg-3);
flex-shrink:0;
}
.char-name-input{
flex:1;
min-width:120px;
}
.custom-options{
display:flex;
flex-wrap:wrap;
gap:5px;
align-items:center;
}
.custom-chips{
display:flex;
flex-wrap:wrap;
gap:5px;
}
.custom-race-card{
background:var(--bg-2);
border:1px solid var(--line);
padding:8px 10px;
border-radius:3px;
margin-top:4px;
}
.custom-chip{
padding:3px 10px;
border:1px solid var(--line);
background:transparent;
color:var(--fg-2);
font-family:var(--font-mono);
font-size:10px;
font-weight:700;
letter-spacing:.08em;
cursor:pointer;
transition:all var(--t-fast);
border-radius:2px;
}
.custom-chip:hover{
border-color:var(--accent);
color:var(--accent);
}
.custom-chip.selected,
.custom-chip.sel{
background:var(--accent);
border-color:var(--accent);
color:var(--bg-1);
}
.custom-swatches{
display:flex;
flex-wrap:wrap;
gap:5px;
}
.custom-swatch{
width:22px;
height:22px;
border-radius:2px;
border:2px solid transparent;
cursor:pointer;
transition:border-color var(--t-fast), transform var(--t-fast);
}
.custom-swatch:hover{
transform:scale(1.15);
}
.custom-swatch.selected,
.custom-swatch.sel{
border-color:var(--accent);
transform:scale(1.15);
}
.char-race-note{
font-size:10px;
color:var(--fg-3);
margin-top:2px;
font-style:italic;
}
.char-create-actions{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:14px;
}
/* StudyBuddy v2 — Combat HUD (flagship) */
.arena-combat.combat-hud-v2-wrap{
--ch-rail-w:320px;
height:calc(100dvh - var(--topbar-h, 90px));
max-height:calc(100dvh - var(--topbar-h, 90px));
overflow:hidden;
padding:0;
gap:0;
}
.combat-hud-v2.app{
display:grid;
grid-template-rows:1fr 28px;
grid-template-columns:var(--ch-rail-w) 1fr var(--ch-rail-w);
grid-template-areas:"left stage right" "status status status";
height:100%;
min-height:0;
background:var(--bg-1);
}
@media (max-width:1400px){
.combat-hud-v2.app{ --ch-rail-w:280px; }
}
@media (max-width:1200px){
.ch-rail-l,.ch-rail-r{ overflow-y:auto; }
}
@media (max-width:1180px){
.combat-hud-v2.app{
grid-template-columns:1fr;
grid-template-areas:"left" "stage" "right" "status";
grid-template-rows:auto 1fr auto 28px;
overflow:auto;
}
}
.ch-rail-l{ grid-area:left; border-right:1px solid var(--line); overflow:auto; }
.ch-stage{
grid-area:stage;
display:grid;
/* hotbar row was a fixed 100px which clipped any 3rd row of ability
* cards. auto-size lets it grow to fit; the 1fr arena row absorbs the
* difference. minmax(220px,1fr) guarantees the fight scene never
* collapses to nothing when the hotbar + question panel are tall. */
grid-template-rows:42px minmax(220px, 1fr) auto auto;
min-height:0;
overflow:hidden;
}
.ch-rail-r{ grid-area:right; border-left:1px solid var(--line); overflow:auto; display:flex; flex-direction:column; }
.ch-status{
grid-area:status;
display:flex; align-items:center; padding:0 16px; gap:18px;
border-top:1px solid var(--line); background:var(--bg-2);
font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em;
color:var(--fg-3); text-transform:uppercase;
}
.ch-status-ready{ color:var(--accent); }
.ch-status-spacer{ flex:1; }
/* Initiative */
.ch-init{
display:flex; align-items:center; padding:0 14px; gap:6px;
border-bottom:1px solid var(--line);
background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
overflow:hidden; min-height:42px;
}
.ch-init-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.22em; color:var(--accent); flex-shrink:0; }
.ch-init-queue{ display:flex; align-items:center; gap:4px; overflow:auto; flex:1; min-width:0; }
.ch-init-chip{
display:flex; align-items:center; gap:5px; padding:3px 6px; flex-shrink:0;
background:var(--bg-3); border:1px solid var(--line); position:relative;
}
.ch-init-chip.now{ background:var(--accent); border-color:var(--accent); }
.ch-init-chip.hostile:not(.now){ background:rgba(217,69,69,0.08); border-color:rgba(217,69,69,0.35); }
.ch-init-dot{ width:6px; height:6px; }
.ch-init-who{ font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:0.14em; color:var(--fg-2); }
.ch-init-chip.now .ch-init-who{ color:var(--bg-1); }
.ch-init-now{
position:absolute; top:-13px; left:50%; transform:translateX(-50%);
font-family:var(--font-mono); font-size:8px; color:var(--accent); white-space:nowrap;
}
.ch-init-arrow{ font-family:var(--font-mono); font-size:9px; color:var(--fg-4); flex-shrink:0; }
.ch-init-meta{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.16em; color:var(--fg-3); flex-shrink:0; }
/* Arena */
.ch-arena{ position:relative; overflow:hidden; background:var(--bg-0); min-height:0; }
.ch-arena-grid{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0.4; }
.ch-enemy-sprite{
position:absolute; transform:translate(-50%,-50%); cursor:pointer; text-align:center;
transition:filter 80ms; z-index:2;
}
.ch-enemy-sprite.hit{ filter:brightness(2.2) drop-shadow(0 0 14px var(--hp)); animation:ch-hit-shake 0.18s linear 2; }
@keyframes ch-hit-shake{
0%,100%{ transform:translate(-50%,-50%); }
25%{ transform:translate(-54%,-50%); }
75%{ transform:translate(-46%,-50%); }
}
.ch-nameplate{
display:inline-block; padding:3px 7px; margin-bottom:5px;
background:rgba(10,12,14,0.85); border:1px solid var(--line-2);
}
.ch-nameplate.targeted{ border-color:var(--hp); box-shadow:0 0 0 1px var(--hp); }
.ch-np-top{ display:flex; gap:6px; align-items:baseline; font-family:var(--font-mono); font-size:9px; }
.ch-np-name{ color:var(--fg-1); font-weight:700; }
.ch-np-tier{ font-size:8px; }
.ch-np-lv{ color:var(--fg-3); }
.ch-np-bar{ width:100px; height:3px; background:var(--bg-3); margin:2px 0; }
.ch-np-bar>div{ height:100%; background:var(--hp); }
.ch-np-bar>div{ height:100%; background:var(--hp); }
.ch-player-sprite{
position:absolute; left:24%; top:78%; transform:translate(-50%,-50%);
transition:left 280ms cubic-bezier(.5,0,.3,1); z-index:3;
}
.ch-player-sprite.phase-strike{ left:46%; transition-duration:180ms; }
.ch-player-sprite.phase-windup{ left:20%; }
.ch-biome-chip{
position:absolute; top:10px; right:14px; padding:4px 10px;
background:rgba(10,12,14,0.78); border:1px solid var(--accent-line);
font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:var(--accent); z-index:4;
}
.ch-slash{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:10; }
.ch-float-dmg{ font-family:var(--font-display); font-weight:800; font-size:22px; fill:var(--crit); }
.ch-windup-glyph{ position:absolute; left:20%; top:88%; transform:translate(-50%,-50%); pointer-events:none; z-index:5; }
/* Intent badge */
.ch-intent-badge{
display:inline-flex; align-items:center; gap:4px; padding:2px 6px;
background:var(--bg-1); border:1px solid var(--line-2); border-left-width:2px;
font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em;
}
.ch-intent-badge.compact{ padding:1px 5px; font-size:8px; }
.ch-intent-glyph{ font-family:serif; line-height:1; }
.ch-intent-label{ color:var(--fg-1); }
.ch-intent-val{ font-weight:700; }
/* Question slab */
.ch-q-slab{
border-top:2px solid var(--accent-line);
background:linear-gradient(180deg, var(--bg-2), var(--bg-3));
padding:18px 28px 20px; position:relative; overflow:visible;
}
.ch-q-meta{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ch-q-tag{
padding:3px 8px; background:var(--accent-soft); border:1px solid var(--accent);
font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; color:var(--accent); font-weight:600;
}
.ch-q-id{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; color:var(--fg-3); }
.ch-q-spacer{ flex:1; height:1px; background:var(--line); min-width:40px; }
.ch-q-skill{ font-family:var(--font-mono); font-size:10px; color:var(--insight); letter-spacing:0.16em; }
.ch-q-prompt{ font-family:var(--font-display); font-size:22px; font-weight:600; line-height:1.32; color:var(--fg); max-width:92%; }
.ch-mcq-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:14px; }
/* Phone reflow — long MCQ stems are unreadable at 25% width. */
@media (max-width:480px){ .ch-mcq-grid{ grid-template-columns:1fr; } }
.ch-mcq-opt{
display:flex; align-items:flex-start; gap:8px; padding:12px 14px; cursor:pointer;
background:var(--bg-1); border:1px solid var(--line-2); text-align:left;
font-family:var(--font-body); color:var(--fg); min-width:0;
}
.ch-mcq-opt:hover:not(:disabled){ border-color:var(--accent-line); background:var(--bg-3); }
.ch-mcq-opt.eliminated{ opacity:0.35; text-decoration:line-through; }
.ch-mcq-key{
width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:11px; font-weight:700; flex-shrink:0;
background:var(--bg-2); border:1px solid var(--accent-line); color:var(--accent);
}
.ch-mcq-text{ white-space:normal; overflow:visible; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--fg); line-height:1.3; }
.ch-tf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:680px; margin-top:14px; }
.ch-tf-btn{
display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer;
background:var(--bg-1); border:2px solid var(--line-2);
}
.ch-tf-key{
width:42px; height:42px; display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:22px; font-weight:700; border:1px solid;
}
.ch-text-answer{ margin-top:14px; }
.ch-input,.ch-textarea{
width:100%; padding:12px 14px; background:var(--bg-1); border:1px solid var(--line-2);
color:var(--fg); border-left:2px solid var(--accent); outline:none; font-family:var(--font-body);
}
.ch-textarea.essay{ font-family:'Bricolage Grotesque', var(--font-body); line-height:1.55; }
.ch-text-meta{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--font-mono); font-size:10px; color:var(--fg-3); gap:12px; flex-wrap:wrap; }
.ch-autosave{ margin-left:8px; padding:2px 6px; border:1px solid var(--accent); color:var(--accent); }
.ch-cloze-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ch-cloze-chip{
padding:10px 16px; cursor:pointer; background:var(--bg-1); border:1px solid var(--line-2);
font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--fg);
}
/* Hotbar */
.ch-hotbar{
border-top:1px solid var(--line); background:var(--bg-2);
padding:10px 16px; display:flex; align-items:flex-start; gap:10px;
max-height:40vh; overflow-y:auto;
}
.ch-hotbar-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.22em; color:var(--accent); flex-shrink:0; padding-top:10px; }
.ch-hotbar-slots{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; flex:1; min-width:0; }
/* Phone reflow — 4-col ability cards get crushed below ~760px. */
@media (max-width:760px){ .ch-hotbar-slots{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:480px){ .ch-hotbar-slots{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ch-hb-slot{
min-width:0; padding:10px 12px; cursor:pointer; position:relative;
background:var(--bg-3); border:1px solid var(--line);
display:flex; align-items:center; gap:10px; text-align:left;
transition: border-color 120ms, background 120ms, transform 120ms;
}
.ch-hb-slot:hover:not([disabled]){
background: var(--bg-2);
border-color: var(--accent-line, var(--accent));
transform: translateY(-1px);
}
.ch-hb-slot:hover:not([disabled])::after{
/* dark hover popup with full name + desc; pulled from the button's
* title attribute via a content-attr trick on the slot itself */
content: attr(title);
position: absolute;
bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: var(--bg-0, #07090a);
color: var(--fg-1, var(--fg));
font-family: var(--font-sans, inherit); font-size: 12px; line-height: 1.45;
padding: 8px 12px; border: 1px solid var(--accent-line, var(--accent));
border-radius: 8px;
white-space: pre-line; max-width: 280px; min-width: 200px;
z-index: 100; pointer-events: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.ch-kb-panel{
position:absolute; bottom:calc(100% + 6px); right:0;
background:var(--bg-0,#07090a); border:1px solid var(--accent-line); padding:14px 16px;
display:flex; flex-direction:column; gap:10px; z-index:200;
box-shadow:0 -6px 24px rgba(0,0,0,0.7); min-width:280px;
}
.ch-kb-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ch-kb-item{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--fg-2); }
.ch-kb-item label{ color:var(--accent); font-size:10px; letter-spacing:.12em; min-width:14px; }
.ch-kb-item input{ width:44px; padding:4px 6px; text-align:center; background:var(--bg-3); border:1px solid var(--line-2); color:var(--fg); font-family:var(--font-mono); font-size:13px; font-weight:700; text-transform:uppercase; }
.ch-hb-slot.selected{ border-color:var(--accent); background:linear-gradient(0deg, var(--accent-soft), transparent 80%), var(--bg-3); }
.ch-hb-slot.locked{ opacity:0.4; cursor:not-allowed; }
.ch-hb-sel-bar{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); }
.ch-hb-key{
font-family:var(--font-mono); font-size:11px; padding:2px 6px;
background:var(--bg-1); border:1px solid var(--line-2); color:var(--fg-2); font-weight:700;
}
.ch-hb-slot.selected .ch-hb-key{ border-color:var(--accent); color:var(--accent); }
.ch-hb-icon{ font-size:22px; flex-shrink:0; }
.ch-hb-body{ flex:1; min-width:0; }
.ch-hb-top{ display:flex; align-items:baseline; gap:6px; }
.ch-hb-name{
font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--fg);
line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
.ch-hb-tier{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.18em; }
.ch-hb-desc{
font-family:var(--font-mono); font-size:9.5px; color:var(--fg-3);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; line-height:1.3; margin-top:2px;
}
.ch-hb-dmg{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--accent); flex-shrink:0; }
.ch-hb-dmg-u{ color:var(--fg-3); font-size:8px; margin-left:2px; font-weight:400; }
.ch-hb-cd{ font-family:var(--font-mono); font-size:9px; color:var(--warn); flex-shrink:0; }
/* ── Practice Mode HUD ─────────────────────────────────────────────────── */
.pm-app{
display:grid;
grid-template-rows:44px 1fr 28px;
grid-template-columns:var(--ch-rail-w,320px) 1fr 340px;
grid-template-areas:"top top top" "left stage right" "status status status";
height:100%; min-height:0; background:var(--bg-1);
}
.pm-topbar{
grid-area:top; display:flex; align-items:stretch;
border-bottom:1px solid var(--line); background:var(--bg-2);
}
.pm-topbar-brand{
display:flex; align-items:center; gap:8px; padding:0 14px;
border-right:1px solid var(--line); min-width:190px; flex-shrink:0;
}
.pm-mode-toggle{ display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--line); }
.pm-mode-btn{
padding:5px 12px; cursor:pointer;
font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.2em;
border:1px solid; user-select:none;
}
.pm-dummy-toggle{ display:flex; align-items:center; gap:6px; padding:0 12px; border-right:1px solid var(--line); }
.pm-dummy-label{ font-family:var(--font-mono); font-size:9px; color:var(--fg-3); letter-spacing:0.16em; flex-shrink:0; }
.pm-dummy-btn{
padding:3px 9px; cursor:pointer;
font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; border:1px solid;
}
.pm-stat-chips{ display:flex; align-items:stretch; }
.pm-stat-chip{
padding:0 14px; border-left:1px solid var(--line);
display:flex; flex-direction:column; justify-content:center; min-width:56px;
}
.pm-stat-chip-k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.22em; color:var(--fg-3); }
.pm-stat-chip-v{ font-family:var(--font-mono); font-size:13px; font-weight:600; line-height:1.1; }
/* Left rail practice sections */
.pm-session-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pm-session-cell{ padding:8px; background:var(--bg-3); border:1px solid var(--line); }
.pm-session-cell-k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.22em; color:var(--fg-3); }
.pm-session-cell-v{ font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1; margin-top:2px; }
.pm-accuracy-bar{
margin-top:8px; padding:8px 10px;
background:rgba(125,216,125,0.06); border:1px solid var(--accent-line);
display:flex; justify-content:space-between;
font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em;
}
/* Right rail — Study Companion */
.pm-rail-r{
grid-area:right; background:var(--bg-2); border-left:1px solid var(--line);
display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.pm-companion-header{
padding:12px 14px; border-bottom:1px solid var(--line);
display:flex; align-items:baseline; gap:8px; flex-shrink:0;
}
.pm-answer-badge{
padding:3px 8px; font-family:var(--font-mono); font-size:10px;
letter-spacing:0.22em; font-weight:700; color:var(--bg-1); flex-shrink:0;
}
.pm-answer-section{ padding:14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.pm-answer-heading{
font-family:var(--font-display); font-size:18px; font-weight:700;
color:var(--accent); letter-spacing:-0.005em; line-height:1.3;
}
.pm-hook{
margin-top:8px; padding:8px 10px; background:var(--bg-3);
border-left:2px solid var(--insight); font-style:italic; font-size:13px; color:var(--insight);
}
.pm-explanation{ padding:12px 14px; flex:1; overflow:auto; min-height:0; }
.pm-sources{ margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
.pm-source-chip{
padding:2px 8px; background:var(--bg-3); border:1px solid var(--line);
font-family:var(--font-mono); font-size:9px; color:var(--fg-2); letter-spacing:0.06em;
}
.pm-tag-chip{
padding:2px 6px; background:var(--bg-1); border:1px solid var(--line-2);
font-family:var(--font-mono); font-size:9px; color:var(--fg-2); letter-spacing:0.08em;
}
.pm-nav-row{
padding:10px 14px; border-top:1px solid var(--line); background:var(--bg-3);
display:flex; gap:6px; flex-shrink:0;
}
.pm-nav-btn{
flex:1; padding:8px 10px; background:var(--bg-1); border:1px solid var(--line);
cursor:pointer; text-align:center; font-family:var(--font-mono); font-size:10px;
color:var(--fg-2); letter-spacing:0.18em; min-width:0;
}
.pm-nav-btn.primary{ background:var(--accent); color:var(--bg-1); font-weight:700; border-color:var(--accent); }
/* Test mode lock overlay */
.pm-lock-overlay{
position:absolute; top:46px; left:0; right:0; bottom:0;
background:linear-gradient(180deg, rgba(10,13,14,0.96), rgba(10,13,14,0.99) 60%);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; padding:24px; z-index:5;
}
.pm-lock-icon{
width:60px; height:60px; border:2px solid var(--insight);
display:flex; align-items:center; justify-content:center;
color:var(--insight); font-family:serif; font-size:30px;
}
.pm-lock-title{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--fg); text-align:center; }
.pm-lock-desc{
font-family:var(--font-mono); font-size:10px; color:var(--fg-3);
letter-spacing:0.12em; text-align:center; line-height:1.6; max-width:240px;
}
.pm-reveal-btn{
margin-top:6px; padding:8px 14px;
background:rgba(231,193,75,0.12); border:1px solid var(--insight);
cursor:pointer; font-family:var(--font-mono); font-size:11px;
letter-spacing:0.2em; color:var(--insight); font-weight:700;
}
/* Left rail */
.ch-portrait-block{ padding:12px 14px; border-bottom:1px solid var(--line); display:flex; gap:12px; }
.ch-portrait{
width:80px; height:104px; background:var(--bg-3); border:1px solid var(--line);
display:flex; align-items:flex-end; justify-content:center; position:relative;
}
.ch-portrait-lv{ position:absolute; top:4px; right:4px; font-family:var(--font-mono); font-size:8px; color:var(--accent); border:1px solid var(--accent); padding:1px 4px; }
.ch-portrait-meta{ flex:1; min-width:0; }
.ch-op-name{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--fg); }
.ch-op-class{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:var(--accent); margin-top:2px; }
.ch-bar-label{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; color:var(--fg-3); margin-top:4px; }
.ch-bar{ height:5px; background:var(--bg-3); border:1px solid var(--line); position:relative; margin-top:2px; }
.ch-bar>div{ position:absolute; inset:0; height:100%; }
.ch-bar.hp>div{ background:var(--hp); width:var(--w,50%); }
.ch-bar.xp>div{ background:var(--xp); }
.ch-ap-block{ padding:12px 14px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ch-ap-panel{ padding:8px; background:var(--bg-3); border:1px solid var(--line); }
.ch-ap-panel.insight{ border-left:2px solid var(--insight); }
.ch-ap-panel.block{ border-left:2px solid var(--block); }
.ch-ap-k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.22em; }
.ch-ap-pips{ display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.ch-ap-pip{ width:14px; height:14px; background:var(--bg-3); border:1px solid var(--line); clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.ch-ap-pip.on{ background:var(--insight); }
.ch-status-section,.ch-attr-section,.ch-weapon-section,.ch-pet-section{ padding:10px 14px; border-bottom:1px solid var(--line); }
.ch-status-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.ch-status-chip{ font-family:var(--font-mono); font-size:9px; padding:3px 6px; border:1px solid var(--line); }
.ch-status-chip.buff{ border-color:var(--accent); }
.ch-status-chip.debuff{ border-color:var(--hp); background:rgba(217,69,69,0.08); }
.ch-attr-row{ display:grid; grid-template-columns:1fr auto; padding:3px 0; border-bottom:1px dashed var(--line); font-family:var(--font-mono); font-size:11px; }
.ch-weapon-row{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.ch-weapon-icon{ font-size:22px; }
.ch-sockets{ display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.ch-pet-row{ display:flex; gap:10px; align-items:center; margin-top:6px; }
/* Right rail */
.ch-shot-panel,.ch-intel-panel,.ch-log-panel,.ch-weak-panel{ padding:10px 14px; border-bottom:1px solid var(--line); }
.ch-shot-card{ padding:10px; background:var(--bg-3); border:1px solid var(--line); text-align:center; margin-top:8px; }
.ch-shot-k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.22em; color:var(--fg-3); }
.ch-shot-pct{ font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--accent); line-height:1; }
.ch-shot-pct span{ font-size:20px; }
.ch-shot-sub{ font-family:var(--font-mono); font-size:8px; color:var(--fg-3); margin-top:4px; }
.ch-mod-row{ display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dashed var(--line); font-family:var(--font-mono); font-size:10px; }
.ch-intel-row{
display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
width:100%; padding:6px 8px; margin-bottom:4px; cursor:pointer; text-align:left;
background:var(--bg-3); border:1px solid var(--line);
}
.ch-intel-row.active{ border-color:var(--hp); background:rgba(217,69,69,0.06); }
.ch-intel-dot{ width:8px; height:8px; }
.ch-intel-name{ font-family:var(--font-mono); font-size:10px; color:var(--fg-1); }
.ch-intel-sub{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-family:var(--font-mono); font-size:8px; color:var(--fg-3); margin-top:2px; }
.ch-log-panel{ flex:1; min-height:0; display:flex; flex-direction:column; }
.ch-log-scroll{ flex:1; overflow:auto; margin-top:6px; }
.ch-log-line{ font-family:var(--font-mono); font-size:10px; color:var(--fg-2); padding:2px 0; }
.ch-weak-row{ display:grid; grid-template-columns:1fr 80px 36px; gap:6px; align-items:center; padding:3px 0; font-family:var(--font-mono); font-size:10px; }
.ch-weak-bar{ height:3px; background:var(--bg-3); border:1px solid var(--line); }
.ch-weak-bar>div{ height:100%; background:var(--hp); }
.ch-weak-pct{ color:var(--hp); text-align:right; }
.arena-combat.combat-hud-v2-wrap .insights-panel{ flex-shrink:0; margin:0; border-top:1px solid var(--line); }
/* ── After Action Report (v2 result screen) ── */
.aar-overlay{
position:fixed; inset:0; z-index:200;
background:rgba(6,10,14,0.88);
display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(4px);
animation:aar-in 220ms cubic-bezier(0.2,0,0,1);
}
@keyframes aar-in{ from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
.aar-panel{
width:min(1080px,96vw); max-height:90vh;
display:grid; grid-template-rows:44px 1fr 52px;
background:var(--bg-2); border:1px solid var(--line);
box-shadow:0 0 0 1px var(--bg-3), 0 32px 80px rgba(0,0,0,0.7);
overflow:hidden;
}
.aar-topbar{
display:flex; align-items:center; padding:0 18px; gap:12px;
border-bottom:1px solid var(--line); background:var(--bg-1);
}
.aar-body{
display:grid; grid-template-columns:260px 1fr 260px;
min-height:0; overflow:hidden;
}
.aar-col{
padding:16px 16px; display:flex; flex-direction:column; gap:0;
overflow:hidden;
}
.aar-col-score{ border-right:1px solid var(--line); }
.aar-col-concepts{ border-right:1px solid var(--line); gap:0; overflow-y:auto; }
.aar-col-loot{ overflow-y:auto; }
.aar-section-label{
font-family:var(--font-mono); font-size:8px; letter-spacing:0.26em;
color:var(--fg-3); text-transform:uppercase; margin-bottom:12px;
padding-bottom:6px; border-bottom:1px solid var(--line);
}
.aar-footer{
display:flex; align-items:center; gap:10px; padding:0 18px;
border-top:1px solid var(--line); background:var(--bg-1);
}
/* Phone reflow — AAR has 4–5 actions (Echo/Study/Back/Rematch); they overflow
* a single row. Wrap to multiple rows + tighter padding + smaller letter-spacing
* so the primary CTA never gets pushed off-screen. */
@media (max-width:600px){
.aar-footer{
flex-wrap:wrap; justify-content:flex-end;
padding:10px 12px; gap:6px;
}
.aar-footer > div:first-child{ flex-basis:100%; margin-bottom:4px; }
.aar-btn{ padding:8px 12px; font-size:10px; letter-spacing:0.10em; min-height:44px; }
}
.aar-btn{
padding:10px 20px; cursor:pointer; font-family:var(--font-mono);
font-size:11px; font-weight:700; letter-spacing:0.18em;
border:none; outline:none; white-space:nowrap;
}
.aar-btn.primary{
background:var(--accent); color:var(--bg-1);
}
.aar-btn.primary:hover{ filter:brightness(1.1); }
.aar-btn.ghost{
background:transparent; color:var(--fg-2);
border:1px solid var(--line-2);
}
.aar-btn.ghost:hover{ border-color:var(--accent); color:var(--fg); }
@media (max-width:860px){
.aar-body{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
.aar-col-score,.aar-col-concepts{ border-right:none; border-bottom:1px solid var(--line); }
}
/* ── Intent badge tooltip ── */
.enemy-intent{ position:relative }
.intent-tt{
display:none; position:absolute;
bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
min-width:180px; max-width:260px;
background:var(--bg-0,#07090a);
border:1px solid var(--accent-line,rgba(125,216,125,0.35));
padding:9px 11px; z-index:50; pointer-events:none;
box-shadow:0 4px 20px rgba(0,0,0,0.75);
}
.intent-tt::after{
content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:var(--accent-line,rgba(125,216,125,0.35));
}
.enemy-intent:hover .intent-tt{ display:block }
.itt-desc{ font-size:10px; color:var(--fg-1,#c5cfc7); line-height:1.5; margin:0; }
.itt-range{
margin-top:6px; padding-top:6px; border-top:1px solid var(--line,rgba(255,255,255,0.06));
font-size:9px; color:var(--fg-3,#5a635c); letter-spacing:0.12em; text-transform:uppercase;
}
/* ── Arena Daily Plan ── */
.daily-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.daily-card{ background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; }
.daily-card.done{ opacity:0.65; }
.daily-card.ghost{ border-style:dashed; }
.daily-done-stamp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.1); pointer-events:none; }
.daily-done-badge{ font-size:11px; font-weight:700; color:var(--ok); border:1px solid var(--ok); padding:3px 10px; border-radius:3px; background:var(--panel2); letter-spacing:.06em; }
.daily-meta-row{ display:flex; gap:0; border-top:1px solid var(--line); padding-top:8px; font-size:10px; }
.daily-meta-cell{ flex:1; min-width:0; }
.daily-meta-cell .lbl{ font-size:8px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.daily-meta-cell .val{ color:var(--text-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daily-engage{ padding:7px 12px; text-align:center; cursor:pointer; border-radius:4px; font-size:11px; font-weight:600; letter-spacing:.1em; border:1px solid; user-select:none; transition:opacity 150ms; }
.daily-engage:hover{ opacity:0.75; }
.daily-rail{ display:flex; flex-direction:column; gap:12px; }
.daily-rail-card{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px; }
.daily-streak-pips{ display:flex; gap:5px; margin-bottom:8px; }
.daily-streak-pip{ flex:1; height:24px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:10px; }
.daily-stale-row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); }
.daily-preset-slot{ padding:10px; background:var(--panel2); border:1px solid var(--line); border-radius:4px; margin-bottom:8px; }
/* ============================================================
* UI OVERHAUL — PHASE B: Slim Status Bar (VS Code style)
* Fixed to viewport bottom. Auto-hidden during combat via :has().
* Left = persistent system state, right = ephemeral activity.
* ========================================================== */
.status-bar{
position: fixed; bottom: 0; left: 0; right: 0;
height: 28px;
display: flex; align-items: center;
padding: 0 var(--sp-4);
background: var(--surface-glass);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border-1);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
color: var(--text-3);
z-index: 90;
user-select: none;
}
.status-bar-left, .status-bar-right{
display: flex; align-items: center; gap: var(--sp-3);
min-width: 0;
}
.status-bar-right{ margin-left: auto; }
.sb-item{
display: inline-flex; align-items: center; gap: 4px;
padding: 0 6px; height: 22px;
border-radius: var(--radius-sm);
white-space: nowrap;
transition: background 150ms, color 150ms;
}
.sb-item.clickable{ cursor: pointer; }
.sb-item.clickable:hover{ background: var(--surface-3); color: var(--text-1); }
.sb-item .sb-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-3);
flex-shrink: 0;
}
.sb-item .sb-dot.ok{ background: var(--ok, #3affc0); box-shadow: 0 0 6px rgba(58,255,192,0.5); }
.sb-item .sb-dot.warn{ background: var(--warn); }
.sb-item .sb-dot.err{ background: var(--hp); }
.sb-item .sb-label{ color: var(--text-2); text-transform: uppercase; font-weight: 500; }
.sb-item .sb-val{ color: var(--text-1); font-weight: 600; }
.sb-ephemeral{
background: var(--surface-3);
color: var(--text-1);
animation: sb-fade-in 240ms ease-out;
}
@keyframes sb-fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
/* Hide status bar during combat — content needs every pixel */
body:has(main:has([data-arena])) .status-bar{ display: none; }
/* On phones, hide system labels and keep only icons/dots */
@media (max-width: 640px){
.sb-item .sb-label{ display: none; }
.status-bar{ font-size: 10px; padding: 0 var(--sp-2); }
}
/* ============================================================
* UI OVERHAUL — PHASE C: Arena Sidebar Navigation
* Vertical sidebar replacing the flat hub-toolbar. Collapsible.
* Lives inside ArenaView when phase==='hub'.
* ========================================================== */
.arena-layout{
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--sp-6);
align-items: start;
margin-top: var(--sp-4);
}
.arena-layout.sidebar-collapsed{ grid-template-columns: 64px 1fr; }
@media (max-width: 1024px){
.arena-layout{ grid-template-columns: 64px 1fr; } /* auto-collapse on laptops/tablets */
.arena-layout .sb-text, .arena-layout .sb-group-label, .arena-layout .sb-badge{ display: none; }
.arena-layout .sb-collapse{ display: none; }
}
@media (max-width: 640px){
.arena-layout{ grid-template-columns: 1fr; } /* sidebar hidden on phones, use hub-toolbar fallback */
.arena-sidebar{ display: none; }
}
.arena-sidebar{
position: sticky;
top: var(--sp-4);
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
padding: var(--sp-3);
display: flex; flex-direction: column;
gap: var(--sp-5);
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.arena-sidebar.collapsed{ padding: var(--sp-2); }
.arena-sidebar.collapsed .sb-text,
.arena-sidebar.collapsed .sb-group-label,
.arena-sidebar.collapsed .sb-badge{ display: none; }
.sb-collapse{
align-self: flex-end;
background: transparent;
border: 0;
color: var(--text-3);
cursor: pointer;
padding: 4px 8px;
font-size: 12px;
font-family: var(--font-mono);
border-radius: var(--radius-sm);
transition: color 150ms, background 150ms;
}
.sb-collapse:hover{ color: var(--accent); background: var(--surface-3); }
.sb-group{ display: flex; flex-direction: column; gap: 2px; }
.sb-group-label{
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
color: var(--text-3);
text-transform: uppercase;
padding: var(--sp-1) var(--sp-3);
margin-bottom: 2px;
}
.sb-item-btn{
display: flex; align-items: center; gap: var(--sp-3);
background: transparent;
border: 0;
color: var(--text-2);
padding: 10px 12px;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: var(--text-sm);
font-weight: 500;
position: relative;
transition: background 120ms, color 120ms;
width: 100%;
}
.sb-item-btn:hover{ background: var(--surface-3); color: var(--text-1); }
.sb-item-btn.active{
background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
color: var(--text-1);
}
.sb-item-btn.active::before{
content: '';
position: absolute;
left: 0; top: 6px; bottom: 6px;
width: 3px;
background: var(--accent);
border-radius: 0 2px 2px 0;
}
.sb-icon{ font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
.sb-text{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-badge{
background: var(--surface-3);
color: var(--accent);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
padding: 2px 6px;
border-radius: var(--radius-pill);
font-weight: 700;
}
.arena-sidebar.collapsed .sb-item-btn{ justify-content: center; padding: 10px 6px; }
.arena-sidebar.collapsed .sb-item-btn.active::before{ display: none; }
.arena-sidebar.collapsed .sb-item-btn.active{
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
/* When sidebar is present, the original hub-toolbar should hide
* (kept in DOM as the phone-only fallback below 640px). */
.arena-layout .hub-toolbar{ display: none; }
@media (max-width: 640px){
.arena-layout .hub-toolbar{ display: flex; }
}
/* Reserve room for the status bar so cards don't sit under it */
body{ padding-bottom: 32px; }
body:has(main:has([data-arena])){ padding-bottom: 0; }
/* ============================================================
* UI OVERHAUL — PHASE D: Cmd+K Command Palette
* Raycast/Linear-style global launcher. Opens with Cmd/Ctrl+K.
* Fuzzy-matches any registered action. Keyboard-first.
* ========================================================== */
.cmdk-overlay{
position: fixed; inset: 0;
background: rgba(8,9,11,0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex; align-items: flex-start; justify-content: center;
padding: 12vh var(--sp-4) var(--sp-4);
z-index: 10000;
animation: fadeIn 180ms ease-out;
}
.cmdk-modal{
width: 100%;
max-width: 560px;
background: linear-gradient(180deg, var(--surface-4), var(--surface-3));
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--border-1);
overflow: hidden;
display: flex; flex-direction: column;
max-height: 70vh;
animation: cmdk-pop 200ms cubic-bezier(.5, 1.4, .5, 1);
}
@keyframes cmdk-pop{
from{ opacity:0; transform: translateY(-12px) scale(0.96); }
to{ opacity:1; transform: none; }
}
.cmdk-input-row{
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border-1);
}
.cmdk-input-icon{ font-size: 18px; color: var(--text-3); }
.cmdk-input{
flex: 1; min-width: 0;
background: transparent; border: 0; outline: none;
color: var(--text-1);
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: var(--text-md);
font-weight: 500;
}
.cmdk-input::placeholder{ color: var(--text-3); }
.cmdk-results{
flex: 1; min-height: 0;
overflow-y: auto;
padding: var(--sp-2);
}
.cmdk-empty{
padding: var(--sp-6);
text-align: center;
color: var(--text-3);
font-size: var(--text-sm);
}
.cmdk-group-label{
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
color: var(--text-3);
text-transform: uppercase;
padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.cmdk-item{
display: flex; align-items: center; gap: var(--sp-3);
padding: 10px var(--sp-3);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-2);
font-size: var(--text-sm);
transition: background 80ms;
}
.cmdk-item:hover, .cmdk-item.active{
background: var(--surface-3);
color: var(--text-1);
}
.cmdk-item.active{
box-shadow: inset 0 0 0 1px var(--border-3);
}
.cmdk-item-icon{
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-2);
border-radius: var(--radius-sm);
font-size: 14px;
flex-shrink: 0;
}
.cmdk-item-text{ flex: 1; min-width: 0; overflow: hidden; }
.cmdk-item-name{ font-weight: 500; }
.cmdk-item-sub{ font-size: 10px; color: var(--text-3); margin-top: 1px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cmdk-item-shortcut{
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-3);
background: var(--surface-2);
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-1);
}
.cmdk-footer{
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-2) var(--sp-4);
border-top: 1px solid var(--border-1);
background: var(--surface-2);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
color: var(--text-3);
text-transform: uppercase;
}
.cmdk-kbd{
display: inline-flex; align-items: center; gap: 2px;
padding: 1px 5px;
background: var(--surface-3);
border: 1px solid var(--border-1);
border-radius: 3px;
color: var(--text-2);
font-weight: 600;
}
@media (max-width: 640px){
.cmdk-overlay{ padding: 8vh var(--sp-2) var(--sp-2); }
.cmdk-modal{ max-height: 80vh; }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
/* ============================================================
* UI OVERHAUL — PHASE E: Action Items Card
* Zeigarnik-style "what's next" card. Surfaces unfinished tasks
* proactively at the top of the Arena hub so players never have to
* hunt for what they should do next.
* ========================================================== */
.action-items-card{
background:
radial-gradient(ellipse at top right, rgba(125,216,125,0.08), transparent 60%),
linear-gradient(180deg, var(--surface-3), var(--surface-2));
border: 1px solid var(--border-2);
border-radius: var(--radius-md);
padding: var(--sp-4);
margin-bottom: var(--sp-4);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.ai-header{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-3);
}
.ai-label{
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--text-3);
text-transform: uppercase;
}
.ai-count{
font-family: var(--font-mono);
font-size: 9px;
color: var(--accent);
background: var(--accent-soft);
padding: 2px 8px;
border-radius: var(--radius-pill);
font-weight: 700;
letter-spacing: 0.14em;
}
.ai-list{ display: flex; flex-direction: column; gap: 6px; }
.ai-item{
display: flex; align-items: center; gap: var(--sp-3);
padding: 10px var(--sp-3);
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-sm);
cursor: default;
transition: border-color 140ms, background 140ms, transform 140ms;
}
.ai-item.clickable{ cursor: pointer; }
.ai-item.clickable:hover{
border-color: var(--accent-line);
background: linear-gradient(90deg, var(--accent-soft), var(--surface-2) 80%);
transform: translateX(2px);
}
.ai-item.ai-accent{
border-color: var(--accent-line);
background: linear-gradient(90deg, var(--accent-soft), var(--surface-2) 80%);
animation: ai-glow 2.4s ease-in-out infinite;
}
@keyframes ai-glow{
0%,100%{ box-shadow: 0 0 0 1px rgba(125,216,125,0.18); }
50%{ box-shadow: 0 0 16px rgba(125,216,125,0.32), 0 0 0 1px rgba(125,216,125,0.4); }
}
.ai-icon{
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-3);
border-radius: var(--radius-sm);
font-size: 16px;
flex-shrink: 0;
}
.ai-text{ flex: 1; min-width: 0; }
.ai-label-text{
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
line-height: 1.3;
}
.ai-sub{
font-size: 11px;
color: var(--text-3);
margin-top: 2px;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
.ai-arrow{
font-size: 14px;
color: var(--text-3);
flex-shrink: 0;
transition: color 140ms, transform 140ms;
}
.ai-item.clickable:hover .ai-arrow{ color: var(--accent); transform: translateX(2px); }
.ai-empty{
padding: var(--sp-3);
text-align: center;
color: var(--text-3);
font-size: var(--text-sm);
font-style: italic;
}
/* ============================================================
* UI OVERHAUL — PHASE F: Progressive Disclosure
* Generic container. Header is always visible,
* body slides open. Default-closed for low-priority surfaces so
* the page doesn't require huge vertical scroll just to scan it.
* ========================================================== */
.collapsible{
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-md);
margin-bottom: var(--sp-3);
overflow: hidden;
}
.collapsible-head{
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
user-select: none;
background: transparent;
border: 0; width: 100%;
color: var(--text-1);
text-align: left;
transition: background 140ms;
}
.collapsible-head:hover{ background: var(--surface-3); }
.collapsible-head .col-title{
flex: 1; min-width: 0;
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
font-size: var(--text-md);
font-weight: 600;
}
.collapsible-head .col-sub{
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--text-3);
text-transform: uppercase;
}
.collapsible-chev{
font-size: 14px;
color: var(--text-3);
transition: transform 220ms cubic-bezier(.5, 1.4, .5, 1);
}
.collapsible.open .collapsible-chev{ transform: rotate(90deg); color: var(--accent); }
.collapsible-body{
padding: 0 var(--sp-4) var(--sp-4);
border-top: 1px solid var(--border-1);
animation: col-slide-down 220ms ease-out;
}
@keyframes col-slide-down{
from{ opacity: 0; transform: translateY(-4px); }
to{ opacity: 1; transform: none; }
}
/* ============================================================
* UI OVERHAUL v2 — utility classes + layout primitives.
* Sourced from the Linear × Arc × Apple HIG redesign tokens.css.
* These override the older same-named classes where they collide
* (.card / .btn / .chip etc.) — the redesign aesthetic wins for all
* out-of-combat screens. Combat HUD (.ch-*) is untouched.
* ========================================================== */
/* ── Type utilities ── */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum","ss01"; letter-spacing: 0; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cap {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--text-3); font-weight: 500;
}
.h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.dim { color: var(--text-4); }
/* ── Keyboard hint ── */
.kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--surface-3); border: 1px solid var(--border-2);
border-bottom-width: 1.5px;
border-radius: var(--radius-sm);
font-family: var(--font-mono); font-size: 10px; color: var(--text-2);
letter-spacing: 0;
}
/* ── Chip v2 (overrides legacy .chip with cleaner pill style) ── */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 8px; height: 22px;
background: var(--surface-3); border: 1px solid var(--border-1);
border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
color: var(--text-2); font-weight: 500; white-space: nowrap;
}
.chip.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip.hp { color: var(--hp); border-color: var(--hp-line); background: var(--hp-soft); }
.chip.insight { color: var(--insight); border-color: var(--insight-line); background: var(--insight-soft); }
.chip.block { color: var(--block); border-color: var(--block-line); background: var(--block-soft); }
.chip.xp { color: var(--xp); border-color: var(--xp-line); background: var(--xp-soft); }
.chip.ghost { background: transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; opacity: 0.9; }
/* ── Glass surfaces ── */
.glass {
background: var(--glass-1);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid var(--border-1);
}
.glass-strong {
background: var(--glass-2);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid var(--border-2);
}
/* ── Card primitive (overrides legacy .card) ── */
.card {
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
margin-bottom: 0; /* override legacy 14px bottom margin */
padding: 0; /* card-head + card-body handle padding */
box-shadow: none; /* override legacy shadow */
position: relative;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card > .card-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border-1);
}
.card > .card-body { padding: var(--sp-5); }
.card.tight > .card-body { padding: var(--sp-4); }
.card.lit {
background:
linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%),
var(--surface-2);
}
/* ── Button v2 ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
padding: 0 var(--sp-4); min-height: 36px;
background: var(--surface-3); color: var(--text-1);
border: 1px solid var(--border-2); border-radius: var(--radius-md);
font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
letter-spacing: -0.005em; white-space: nowrap;
}
.btn:hover { background: var(--surface-4); border-color: var(--border-3); }
.btn:active { transform: translateY(0.5px); }
.btn.primary {
background: var(--accent); color: var(--accent-fg);
border-color: var(--accent);
font-weight: 600;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text-1); }
.btn.sm { min-height: 28px; padding: 0 var(--sp-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn.lg { min-height: 44px; padding: 0 var(--sp-5); font-size: var(--text-md); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.danger { background: transparent; color: var(--hp); border-color: var(--hp-line); }
.btn.warn { background: var(--insight); color: var(--surface-0); border-color: var(--insight); }
/* ── Icon button ── */
.icon-btn {
width: 32px; height: 32px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text-2); border: 1px solid transparent;
cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-1); }
.icon-btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
/* ── Bar (overrides legacy .bar) ── */
.bar {
height: 4px; background: var(--surface-3); border-radius: var(--radius-pill);
overflow: hidden; position: relative;
}
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--t-base); }
.bar.hp > span { background: var(--hp); }
.bar.xp > span { background: var(--xp); }
.bar.insight > span { background: var(--insight); }
.bar.block > span { background: var(--block); }
/* ── Segmented control ── */
.seg {
display: inline-flex; align-items: stretch;
background: var(--surface-2); border: 1px solid var(--border-1);
border-radius: var(--radius-md); padding: 2px; gap: 2px;
}
.seg > button {
padding: 6px 10px; min-height: 28px;
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--text-3);
border-radius: 6px;
transition: background var(--t-fast), color var(--t-fast);
}
.seg > button:hover { color: var(--text-1); }
.seg > button.is-active { background: var(--surface-4); color: var(--text-1); }
/* ── Tab strip (Study sub-nav style) ── */
.tabs {
display: flex; align-items: center; gap: 2px;
border-bottom: 1px solid var(--border-1);
margin-bottom: var(--sp-5);
}
.tabs > button {
padding: var(--sp-3) var(--sp-3); margin-bottom: -1px;
background: transparent; border: 0; cursor: pointer;
color: var(--text-3); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
border-bottom: 2px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs > button:hover { color: var(--text-1); }
.tabs > button.is-active { color: var(--text-1); border-bottom-color: var(--accent); }
.tabs > button .count {
display: inline-block; margin-left: 6px;
font-family: var(--font-mono); font-size: 10px;
padding: 1px 6px; background: var(--surface-3); border-radius: var(--radius-pill);
color: var(--text-3);
}
/* ============================================================
* Layout primitives
* ========================================================== */
/* ── App shell grid ── */
.app-shell-v2 {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: 1fr var(--statusbar-h);
height: 100vh;
background:
radial-gradient(80vw 60vh at 50% -10vh, var(--glass-tint), transparent 60%),
var(--surface-0);
transition: grid-template-columns var(--t-base);
}
.app-shell-v2.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app-shell-v2 > .sb-rail { grid-row: 1 / 2; grid-column: 1 / 2; }
.app-shell-v2 > .main-v2 { grid-row: 1 / 2; grid-column: 2 / 3; min-width: 0; overflow: hidden; }
.app-shell-v2 > .statusbar-v2 { grid-row: 2 / 3; grid-column: 1 / 3; }
/* Auto-collapse only kicks in on small tablets / narrow laptops. Standard
* 1280–1920 desktop stays expanded so the mode-strip and item labels are
* always visible. User can still toggle manually via the chevron. */
@media (max-width: 860px) {
.app-shell-v2 { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app-shell-v2.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
}
@media (max-width: 640px) {
.app-shell-v2 { grid-template-columns: 1fr; grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h); }
.app-shell-v2 > .sb-rail { display: none; }
.app-shell-v2 > .main-v2 { grid-row: 2 / 3; grid-column: 1 / 2; }
.app-shell-v2 > .statusbar-v2 { grid-row: 3 / 4; grid-column: 1 / 2; }
}
.main-v2 {
/* Flex column so the existing variable-height topbar (with sub-nav + topics
* strip) keeps its natural size while takes the remaining space and
* owns its own scroll. */
display: flex;
flex-direction: column;
background: var(--surface-0);
border-left: 1px solid var(--border-1);
border-top: 1px solid var(--border-1);
border-top-left-radius: 12px;
margin: 6px 0 0 0;
position: relative;
overflow: hidden;
min-height: 0;
}
.main-v2 > header { flex: 0 0 auto; }
.main-v2 > main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
/* Combat fullscreen — force overflow:hidden even with the more-specific
* .main-v2 > main scroll rule above. DO NOT TOUCH COMBAT internals. */
.main-v2 > main:has([data-arena]) { overflow: hidden; max-width: none; padding: 8px 16px 0; }
.main-v2-scroll {
overflow: auto;
padding: var(--sp-6) clamp(var(--sp-6), 3vw, var(--sp-12));
scroll-padding-top: var(--sp-6);
}
/* ── Hub two-col grid (Arena hub + Study home) ── */
.hub-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: var(--sp-5);
align-items: flex-start;
}
@media (max-width: 1180px) { .hub-grid { grid-template-columns: 1fr; } }
/* ── Character strip (Arena hub header) ── */
.char-strip {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-5);
padding: var(--sp-4) var(--sp-5);
background:
linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
}
.char-strip .portrait {
width: 56px; height: 56px; border-radius: var(--radius-md);
background: var(--surface-3);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border-2);
position: relative;
overflow: hidden;
}
.char-strip .portrait .level-stamp {
position: absolute; bottom: -1px; right: -1px;
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
padding: 1px 6px; background: var(--accent); color: var(--accent-fg);
border-radius: var(--radius-sm) 0 var(--radius-md) 0;
letter-spacing: 0;
}
.char-strip .ident { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.char-strip .ident .name { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.char-strip .ident .meta {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
color: var(--text-3); font-size: var(--text-sm);
}
.char-strip .ident .meta .dot { color: var(--text-5); }
.char-strip .stats { display: flex; align-items: stretch; gap: var(--sp-4); }
.char-strip .stat { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.char-strip .stat .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
.char-strip .stat .v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; line-height: 1; color: var(--text-1); letter-spacing: -0.01em; }
.char-strip .stat .v small { font-size: 11px; color: var(--text-4); margin-left: 2px; font-weight: 500; }
/* ── Action items v2 (overrides Phase E .action-items-card) ── */
.action-items {
background:
radial-gradient(120% 80% at 0% 0%, var(--accent-soft) 0%, transparent 40%),
var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
padding: var(--sp-4) var(--sp-4) var(--sp-3);
display: flex; flex-direction: column; gap: var(--sp-3);
}
.action-items .ai-head {
display: flex; align-items: center; gap: var(--sp-2);
padding: 0 var(--sp-2) var(--sp-1);
}
.action-items .ai-head .title { font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; }
.action-items .ai-head .count {
font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
background: var(--surface-3); padding: 1px 7px; border-radius: var(--radius-pill);
border: 1px solid var(--border-1);
}
.action-items .ai-head .grow { flex: 1; }
.action-items .ai-list { display: grid; gap: 2px; }
.action-items .ai-item {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-3);
border-radius: var(--radius-md);
cursor: pointer;
background: transparent;
border: 1px solid transparent;
transition: background var(--t-fast), border-color var(--t-fast);
}
.action-items .ai-item:hover { background: var(--surface-3); border-color: var(--border-1); }
.action-items .ai-item.accent { background: var(--accent-soft); border-color: var(--accent-line); }
.action-items .ai-item.accent:hover { background: var(--accent-soft-2); }
.action-items .ai-item .icon {
width: 28px; height: 28px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
background: var(--surface-3); border: 1px solid var(--border-1);
color: var(--text-2);
}
.action-items .ai-item.accent .icon { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.action-items .ai-item.hp .icon { background: var(--hp-soft); color: var(--hp); border-color: var(--hp-line); }
.action-items .ai-item.xp .icon { background: var(--xp-soft); color: var(--xp); border-color: var(--xp-line); }
.action-items .ai-item.insight .icon { background: var(--insight-soft); color: var(--insight); border-color: var(--insight-line); }
.action-items .ai-item .text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-items .ai-item .text .l { font-size: var(--text-base); font-weight: 500; color: var(--text-1); }
.action-items .ai-item .text .s { font-size: var(--text-sm); color: var(--text-3); }
.action-items .ai-item .meta-num {
font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600;
color: var(--text-2);
}
.action-items .ai-item .arrow {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-4);
transition: transform var(--t-fast), color var(--t-fast);
}
.action-items .ai-item:hover .arrow { color: var(--text-1); transform: translateX(2px); }
.action-items .ai-empty {
padding: var(--sp-4); text-align: center; color: var(--text-3);
font-size: var(--text-sm); border: 1px dashed var(--border-1); border-radius: var(--radius-md);
}
/* ── Section header (between cards) ── */
.section-head {
display: flex; align-items: baseline; gap: var(--sp-3);
margin: 0 0 var(--sp-3);
}
.section-head .title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.section-head .sub { color: var(--text-3); font-size: var(--text-sm); }
.section-head .grow { flex: 1; }
/* ── World view (chapter tiles) ── */
.world-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-3);
}
.chapter-tile {
display: flex; flex-direction: column; gap: var(--sp-3);
padding: var(--sp-4);
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--text-1, var(--fg));
font-family: inherit; text-align: left;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
position: relative;
min-height: 140px;
}
/* Glass + depth — match the "What's next" / .action-items premium look. */
.chapter-tile {
background:
radial-gradient(120% 80% at 0% 0%, var(--accent-soft) 0%, transparent 38%),
var(--surface-2);
box-shadow:
0 1px 2px rgba(0,0,0,0.22),
0 6px 18px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.chapter-tile:hover {
border-color: var(--border-2);
transform: translateY(-1px);
box-shadow:
0 2px 4px rgba(0,0,0,0.28),
0 10px 26px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.06);
}
.chapter-tile.is-active {
border-color: var(--accent-line);
background:
radial-gradient(120% 80% at 0% 0%, var(--accent-soft-2, var(--accent-soft)) 0%, transparent 60%),
var(--surface-2);
box-shadow:
0 0 0 1px var(--accent-line),
0 2px 4px rgba(0,0,0,0.28),
0 10px 26px rgba(0,0,0,0.14),
inset 0 1px 0 rgba(255,255,255,0.06);
}
.chapter-tile.is-locked { opacity: 0.45; cursor: not-allowed; }
.chapter-tile .row { display: flex; align-items: center; gap: var(--sp-2); }
.chapter-tile .row.between { justify-content: space-between; }
.chapter-tile .ch-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-3); }
.chapter-tile .ch-name { font-weight: 600; font-size: var(--text-md); line-height: 1.25; letter-spacing: -0.005em; }
.chapter-tile .ch-meta { color: var(--text-3); font-size: var(--text-sm); }
.chapter-tile .mastery-bar { height: 3px; background: var(--surface-4); border-radius: var(--radius-pill); overflow: hidden; }
.chapter-tile .mastery-bar > span { display: block; height: 100%; background: var(--accent); }
.chapter-tile .ch-cta {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--text-3);
}
.chapter-tile.is-active .ch-cta { color: var(--accent); }
/* ── Mode tile (Study modes) ── */
.mode-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 1100px) { .mode-row { grid-template-columns: repeat(2, 1fr); } }
.mode-tile {
display: flex; flex-direction: column; gap: var(--sp-2);
padding: var(--sp-4);
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--text-1, var(--fg));
font-family: inherit; text-align: left;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
min-height: 120px;
}
.mode-tile .name { color: var(--text-1, var(--fg)); }
.mode-tile {
background:
radial-gradient(120% 80% at 0% 0%, var(--accent-soft) 0%, transparent 38%),
var(--surface-2);
box-shadow:
0 1px 2px rgba(0,0,0,0.22),
0 6px 18px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.mode-tile:hover {
border-color: var(--border-2);
transform: translateY(-1px);
box-shadow:
0 2px 4px rgba(0,0,0,0.28),
0 10px 26px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.06);
}
.mode-tile:disabled, .mode-tile.is-disabled {
opacity: 0.5;
cursor: not-allowed;
filter: grayscale(0.5);
}
.mode-tile:disabled:hover, .mode-tile.is-disabled:hover {
transform: none;
border-color: var(--border-1);
box-shadow:
0 1px 2px rgba(0,0,0,0.22),
0 6px 18px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.mode-tile .glyph {
width: 28px; height: 28px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-3); border: 1px solid var(--border-1);
color: var(--text-2);
}
.mode-tile .name { font-weight: 600; font-size: var(--text-md); letter-spacing: -0.005em; }
.mode-tile .desc { color: var(--text-3); font-size: var(--text-sm); }
.mode-tile .foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 10px; color: var(--text-4); letter-spacing: 0.12em; text-transform: uppercase; }
/* ── Stat row + mastery row ── */
.stat-row {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border-1);
}
.stat-row:last-child { border-bottom: none; }
.stat-row .k { color: var(--text-2); font-size: var(--text-sm); }
.stat-row .v { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; color: var(--text-1); }
.mastery-row {
display: grid; grid-template-columns: 1fr 80px 1fr 60px;
align-items: center; gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border-1);
}
.mastery-row:last-child { border-bottom: none; }
.mastery-row .nm { font-size: var(--text-base); color: var(--text-1); }
.mastery-row .lv { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-3); }
.mastery-row .pct { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-2); text-align: right; }
/* ── Focus-Forge collapsed row ── */
.ff-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--surface-2);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
}
.ff-row .ico {
width: 32px; height: 32px; border-radius: var(--radius-md);
background: var(--surface-3); border: 1px solid var(--border-2);
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-2);
}
.ff-row .grow { flex: 1; }
.ff-row .label { font-weight: 500; font-size: var(--text-base); }
.ff-row .sub { color: var(--text-3); font-size: var(--text-sm); }
/* ── Collapsible v2 (overrides Phase F .collapsible) ── */
.collapsible { border-top: 1px solid var(--border-1); background: transparent; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; margin-bottom: 0; overflow: visible; }
.collapsible .col-head {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) 0; cursor: pointer;
background: transparent; border: 0;
user-select: none;
}
.collapsible .col-head:hover { background: transparent; }
.collapsible .col-head .chevron {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-3);
transition: transform var(--t-fast);
}
.collapsible .col-head.is-open .chevron { transform: rotate(90deg); color: var(--text-1); }
.collapsible .col-head .title { font-size: var(--text-md); font-weight: 600; }
.collapsible .col-head .sub { color: var(--text-3); font-size: var(--text-sm); }
.collapsible .col-head .grow { flex: 1; }
.collapsible .col-body { padding: 0 0 var(--sp-5); border-top: 0; animation: none; }
/* Keep Phase F's open-class compatible */
.collapsible.open .col-head .chevron { transform: rotate(90deg); color: var(--text-1); }
/* ── Sidebar v2 ── */
.sb-rail {
display: flex; flex-direction: column;
padding: var(--sp-3) var(--sp-3) var(--sp-3);
gap: var(--sp-3);
overflow: hidden;
position: relative;
}
.sb-rail .sb-brand {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-md);
cursor: pointer;
min-height: 36px;
}
.sb-rail .sb-brand:hover { background: var(--surface-2); }
.sb-rail .sb-brand .mark { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sb-rail .sb-brand .wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.sb-rail .sb-brand .wordmark .name { font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em; }
.sb-rail .sb-brand .wordmark .ver { font-family: var(--font-mono); font-size: 9px; color: var(--text-4); letter-spacing: 0.2em; margin-top: 2px; }
.sb-rail .sb-search {
display: flex; align-items: center; gap: var(--sp-2);
height: 30px; padding: 0 var(--sp-2);
background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
color: var(--text-3); font-size: var(--text-sm); cursor: pointer;
}
.sb-rail .sb-search:hover { background: var(--surface-3); }
.sb-rail .sb-search .grow { flex: 1; }
.sb-rail .sb-search .kbd { background: var(--surface-1); }
.sb-rail .sb-group { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-3); }
.sb-rail .sb-group-label {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--text-4);
padding: 0 var(--sp-3) 4px;
}
/* Mode-body wraps the active-mode's groups. Smooth crossfade between modes
* via the mode-toggle strip up top. */
.sb-rail .sb-mode-body {
display: flex; flex-direction: column; gap: 0;
flex: 1 1 auto; min-height: 0;
overflow-y: auto; overflow-x: hidden;
animation: sbModeFade var(--t-base) ease-out;
}
@keyframes sbModeFade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
/* The body inherits an accent tint per mode — Study uses the XP-green, Arena
* uses the danger-red — to subtly cue mode through colour as well. */
.sb-rail .sb-mode-body.study .sb-item.is-active::before { background: var(--xp, var(--accent)); }
.sb-rail .sb-mode-body.arena .sb-item.is-active::before { background: var(--danger, var(--accent)); }
/* Locked items: muted, no hover lift, no pointer */
.sb-rail .sb-item.is-locked { opacity: 0.5; cursor: not-allowed; }
.sb-rail .sb-item.is-locked:hover { background: transparent; color: var(--text-2); }
.sb-rail .sb-item.is-locked .ico { color: var(--text-4); }
/* Mode-toggle strip — sits between search and the body. Two big pills, the
* active one gets the surface-3 fill + accent border. */
.sb-rail .sb-mode-strip {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
padding: 4px; background: var(--surface-2);
border: 1px solid var(--border-1); border-radius: var(--radius-md);
margin-top: 2px; flex-shrink: 0;
}
.sb-rail .sb-mode {
display: flex; align-items: center; justify-content: center; gap: 6px;
height: 28px; border: 0; background: transparent; cursor: pointer;
color: var(--text-3); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
border-radius: calc(var(--radius-md) - 2px);
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.sb-rail .sb-mode:hover { color: var(--text-1); }
.sb-rail .sb-mode.is-on {
background: var(--surface-4, var(--surface-3));
color: var(--text-1);
box-shadow: inset 0 0 0 1px var(--border-2);
}
.sb-rail .sb-mode.is-on.study { box-shadow: inset 0 0 0 1px var(--xp, var(--accent)); }
.sb-rail .sb-mode.is-on.arena { box-shadow: inset 0 0 0 1px var(--danger, var(--accent)); }
.sb-rail .sb-mode .glyph { font-size: 13px; line-height: 1; }
.sb-rail .sb-mode .lbl { font-weight: 600; letter-spacing: 0.02em; }
/* Collapsed sidebar: hide the strip text/labels, just show the on-icon. */
.app-shell-v2.sidebar-collapsed .sb-rail .sb-mode-strip { grid-template-columns: 1fr; }
.app-shell-v2.sidebar-collapsed .sb-rail .sb-mode .lbl { display: none; }
.app-shell-v2.sidebar-collapsed .sb-rail .sb-mode:not(.is-on) { display: none; }
/* ── Arena Hub v2 — campaign tiers + mode tiles ── */
.arena-hub-v2 { display: flex; flex-direction: column; gap: 0; }
.arena-hub-v2 .hub-left, .arena-hub-v2 .hub-right { display: flex; flex-direction: column; gap: var(--sp-4, 12px); }
.hub-tiers {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-2, 8px);
padding: var(--sp-3, 10px) var(--sp-4, 14px) var(--sp-4, 14px);
}
.hub-tier, .hub-mode {
position: relative;
display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--sp-3, 10px);
padding: var(--sp-3, 12px) var(--sp-3, 12px);
background: var(--surface-2, var(--bg-2));
border: 1px solid var(--border-1, var(--line));
border-radius: var(--radius-md, 8px);
color: var(--text-1, var(--fg)); text-align: left; cursor: pointer;
font-family: var(--font-sans, inherit);
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hub-tier:hover:not(:disabled), .hub-mode:hover { background: var(--surface-3, var(--bg-3)); border-color: var(--border-2, var(--line-2)); transform: translateY(-1px); }
.hub-tier .ico, .hub-mode .ico {
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1;
background: var(--surface-3, var(--bg-3)); border: 1px solid var(--border-1, var(--line));
border-radius: var(--radius-sm, 6px);
}
.hub-tier .body, .hub-mode .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-tier .ttl, .hub-mode .ttl { font-weight: 600; font-size: var(--text-md, 14px); }
.hub-tier .sub, .hub-mode .sub { font-size: var(--text-sm, 12px); color: var(--text-3, var(--muted)); }
.hub-tier.is-locked { opacity: 0.55; cursor: not-allowed; }
.hub-tier.is-locked:hover { background: var(--surface-2, var(--bg-2)); border-color: var(--border-1, var(--line)); transform: none; }
.hub-modes {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2, 8px);
padding: var(--sp-3, 10px) var(--sp-4, 14px) var(--sp-4, 14px);
}
@media (max-width: 720px) { .hub-modes { grid-template-columns: 1fr; } }
.hub-progress-dot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* ── Dojo / per-tier fight list grids ── */
.dojo-grid, .tier-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-3, 12px);
}
.dojo-notes { font-size: 14px; line-height: 1.6; color: var(--text-2, var(--fg)); }
.dojo-notes h1, .dojo-notes h2, .dojo-notes h3 { margin: 14px 0 6px; }
.dojo-notes p { margin: 8px 0; }
.dojo-notes ul, .dojo-notes ol { margin: 8px 0 8px 22px; }
.dojo-notes code { background: var(--surface-2, var(--bg-3)); padding: 1px 5px; border-radius: 3px; }
.fight-card { transition: transform var(--t-fast), box-shadow var(--t-fast); }
.fight-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.fight-card.is-beaten { opacity: 0.78; }
/* ── Topbar slim variant — sidebar handles all nav; topbar is breadcrumb + stats ── */
.topbar.topbar-slim { min-height: 44px; }
.topbar.topbar-slim .topbar-main {
display: flex; align-items: center; gap: var(--sp-3, 12px);
padding: 6px var(--sp-4, 14px);
}
.topbar.topbar-slim .topbar-crumb {
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.topbar.topbar-slim .topbar-status {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.topbar.topbar-slim .module-select {
font-family: var(--font-mono); font-size: var(--text-sm, 12px);
padding: 4px 8px;
background: var(--surface-3, var(--bg-3));
border: 1px solid var(--border-1, var(--line));
color: var(--text-2, var(--fg-2));
border-radius: var(--radius-sm, 4px);
}
.topbar.topbar-slim .brand h1 { font-size: 14px; }
/* ── Unified hub depth pass — all rectangular surfaces get the same
* "What's next" treatment: subtle radial-accent backdrop + box shadow.
* Applied additively so the existing background/colors stay in place. */
.card.lit,
.ff-row,
.rail-panel,
.hub-tier,
.hub-mode,
.cust-section {
background:
radial-gradient(120% 80% at 0% 0%, var(--accent-soft) 0%, transparent 38%),
var(--surface-2);
box-shadow:
0 1px 2px rgba(0,0,0,0.22),
0 6px 18px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.action-items {
/* already has the radial gradient — just add depth */
box-shadow:
0 1px 2px rgba(0,0,0,0.22),
0 6px 20px rgba(0,0,0,0.12),
inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Plain .card gets a milder depth without the accent tint */
.card:not(.lit) {
box-shadow:
0 1px 2px rgba(0,0,0,0.18),
0 4px 14px rgba(0,0,0,0.07);
}
/* Hover lift for the interactive tiles */
.hub-tier:hover:not(:disabled),
.hub-mode:hover {
box-shadow:
0 2px 4px rgba(0,0,0,0.28),
0 12px 28px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Make sure all card children inherit foreground text so dark inherited
* defaults from