/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-5{margin-bottom:1.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.min-h-screen{min-height:100vh}.min-w-0{min-width:0}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-line{--tw-border-opacity:1;border-color:rgb(var(--c-line)/var(--tw-border-opacity))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--c-accent)/var(--tw-bg-opacity))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(var(--c-surface)/var(--tw-bg-opacity))}.bg-warn{--tw-bg-opacity:1;background-color:rgb(var(--c-warn)/var(--tw-bg-opacity))}.p-5{padding:1.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-6{padding-bottom:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-display{font-family:Fraunces,serif}.font-mono{font-family:JetBrains Mono,ui-monospace,monospace}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-relaxed{line-height:1.625}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.text-accent{--tw-text-opacity:1;color:rgb(var(--c-accent)/var(--tw-text-opacity))}.text-ink{--tw-text-opacity:1;color:rgb(var(--c-ink)/var(--tw-text-opacity))}.text-ink-faint{--tw-text-opacity:1;color:rgb(var(--c-ink-faint)/var(--tw-text-opacity))}.text-ink-muted{--tw-text-opacity:1;color:rgb(var(--c-ink-muted)/var(--tw-text-opacity))}.text-ink-soft{--tw-text-opacity:1;color:rgb(var(--c-ink-soft)/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-soft{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-soft{--tw-shadow:0 1px 2px #1412100a,0 4px 16px -2px #1412100a;--tw-shadow-colored:0 1px 2px var(--tw-shadow-color),0 4px 16px -2px var(--tw-shadow-color)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-line-strong:hover{--tw-border-opacity:1;border-color:rgb(var(--c-line-strong)/var(--tw-border-opacity))}.hover\:bg-sunken:hover{--tw-bg-opacity:1;background-color:rgb(var(--c-sunken)/var(--tw-bg-opacity))}.hover\:text-ink:hover{--tw-text-opacity:1;color:rgb(var(--c-ink)/var(--tw-text-opacity))}.active\:scale-\[0\.96\]:active{--tw-scale-x:0.96;--tw-scale-y:0.96;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-accent{--tw-text-opacity:1;color:rgb(var(--c-accent)/var(--tw-text-opacity))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:p-7{padding:1.75rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-12{padding-top:3rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}
/* ─────────────────────────────────────────────────────────
DESIGN TOKENS — light + dark
───────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
NEUTRAL SLATE — palette
Slate UI · Blue accent #2563EB · Orange highlight #EA580C
───────────────────────────────────────────────────────── */
:root {
--c-canvas: 245 246 248; /* slate-50 paper */
--grain: url("data:image/svg+xml;utf8,");
--c-surface: 255 255 255;
--c-sunken: 241 243 245;
--c-ink: 15 23 42; /* slate-900 */
--c-ink-soft: 30 41 59; /* slate-800 */
--c-ink-muted: 100 116 139; /* slate-500 */
--c-ink-faint: 148 163 184; /* slate-400 */
--c-line: 226 232 240; /* slate-200 */
--c-line-strong: 203 213 225; /* slate-300 */
--c-accent: 252 60 122; /* hot magenta — ported from tokens.css --accent (≈ oklch 0.72 0.24 5) */
--c-gain: 232 145 105; /* dusty peach */
--c-loss: 215 119 127; /* dusty rose */
--c-warn: 209 168 102; /* dusty gold */
--c-neutral: 130 178 158; /* dusty sage */
--c-overflow: 240 165 120; /* peach hi */
/* Slot identity — vibrant tier-derived hues for compare/squad views */
--slot-1: 252 60 122; /* magenta */
--slot-2: 0 200 214; /* cyan */
--slot-3: 236 150 0; /* amber */
--slot-4: 82 154 255; /* blue */
--slot-5: 56 200 110; /* green */
--slot-6: 198 92 236; /* violet */
}
html.dark {
--c-canvas: 15 15 18; /* neutral charcoal #0F0F12 */
--grain: url("data:image/svg+xml;utf8,");
--c-surface: 26 26 30; /* neutral charcoal glass #1A1A1E */
--c-sunken: 10 10 12; /* deeper neutral #0A0A0C */
--c-ink: 243 240 235; /* warm off-white */
--c-ink-soft: 220 214 205; /* warm light grey */
--c-ink-muted: 176 167 155; /* warm mid grey */
--c-ink-faint: 130 121 109; /* warm dark grey */
--c-line: 38 40 46;
--c-line-strong: 55 58 66;
--c-accent: 252 60 122; /* hot magenta — ported from tokens.css --accent (≈ oklch 0.72 0.24 5) */
--c-gain: 251 200 164; /* soft peach */
--c-loss: 240 170 176; /* soft rose */
--c-warn: 240 204 147; /* soft buttercream */
--c-neutral: 181 218 203; /* soft mint */
--c-overflow: 255 208 168; /* light peach */
/* Slot identity — vibrant tier-derived hues for compare/squad views */
--slot-1: 252 80 138; /* magenta */
--slot-2: 38 219 232; /* cyan */
--slot-3: 255 176 32; /* amber */
--slot-4: 108 170 255; /* blue */
--slot-5: 74 224 134; /* green */
--slot-6: 216 122 248; /* violet */
}
/* Legacy CSS variable aliases — used by inline styles in original JS.
NOTE: --accent is intentionally NOT redefined here — it's an RGB triplet
declared in tokens.css for use with rgb(var(--accent) / alpha). */
:root {
--gain: rgb(var(--c-gain));
--loss: rgb(var(--c-loss));
--warn: rgb(var(--c-warn));
--neutral: rgb(var(--c-neutral));
--overflow: rgb(var(--c-overflow));
--accent4: rgb(var(--c-warn));
--muted: rgb(var(--c-ink-muted));
--text: rgb(var(--c-ink));
--border: rgb(var(--c-line-strong));
--hairline: rgb(var(--c-line) / 0.7);
--ink-muted: rgb(var(--c-ink-muted));
}
/* Color scheme declaration — prevents iOS UA dark-mode override */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }
/* Lock layout: html + body fill viewport, no horizontal scroll, full bg coverage */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
html {
background: rgb(var(--c-canvas));
min-height: 100%;
}
body {
/* The paper grain used to live here as `background-attachment:
fixed`, which forces a full-viewport background repaint on
every scroll frame. It now rides the fixed `.orb-field`
layer instead (see below) — same look, composited scroll. */
background-color: rgb(var(--c-canvas));
color: rgb(var(--c-ink));
font-family: 'Hanken Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern', 'liga';
min-height: 100dvh;
position: relative;
}
/* Light-mode paper grain — painted onto the fixed atmosphere
layer so the compositor scrolls it without any repaint.
(Dark mode draws its own gradient + noise on .orb-field.) */
html:not(.dark) .orb-field {
background-image: var(--grain);
background-repeat: repeat;
background-size: 640px 640px;
}
@media print { .orb-field, .atmosphere-veil { display: none; } }
/* Display headers — Inter Tight (replaces the former serif) */
h1, h2, .display, .hero-title, .hero-eyebrow, .section-eyebrow, .text-display,
.font-display {
font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
font-style: normal !important;
font-optical-sizing: auto;
letter-spacing: -0.015em;
}
h1.font-display {
font-weight: 400;
line-height: 1.05 !important;
margin-bottom: 0.4em;
}
h1.font-display .italic {
font-style: italic !important;
color: rgb(var(--c-accent));
font-weight: 400;
}
h2.font-display {
font-weight: 500;
letter-spacing: -0.015em;
}
/* Inputs and UI chrome — site sans */
input, button, select, textarea, .num,
.stat-input input, .compare-table th, .compare-table td.stat-col,
.view-toggle-btn, .option-btn, .save-card {
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
font-style: normal !important;
}
/* Tabular numerics + mono — site mono */
code, kbd, pre, samp, .font-mono, [class*="font-mono"],
input[type="number"] {
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
font-style: normal !important;
}
/* Preload gate — softer fade-in for the entire page */
html.preload body { opacity: 0; }
html.loaded body { opacity: 1; transition: opacity 480ms cubic-bezier(0.32, 0.72, 0.24, 1); }
/* ─────────────────────────────────────────────────────────
Number input refinements (remove spinners)
───────────────────────────────────────────────────────── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* ─────────────────────────────────────────────────────────
Stat input — number + label, restrained
───────────────────────────────────────────────────────── */
.stat-input { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-input label {
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 500;
display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.stat-input input {
width: 100%; background: rgb(var(--c-sunken)); border: 1px solid rgb(var(--c-line));
border-radius: 8px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace;
font-size: 14px; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums;
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.stat-input input:focus {
outline: none; border-color: rgb(var(--c-accent));
background: rgb(var(--c-surface));
box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
}
.height-display {
font-family: 'IBM Plex Mono', monospace; font-size: 10px;
color: rgb(var(--c-ink-muted)); margin-top: 2px;
}
/* ─────────────────────────────────────────────────────────
Section labels
───────────────────────────────────────────────────────── */
.ps-section-label {
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 600; margin: 20px 0 10px;
display: flex; align-items: center; gap: 6px;
}
/* ─────────────────────────────────────────────────────────
Option pills (AcceleRATE / Build / role chips)
───────────────────────────────────────────────────────── */
.option-btn {
border: 1px solid rgb(var(--c-line));
background: rgb(var(--c-surface));
color: rgb(var(--c-ink-soft));
padding: 8px 10px; border-radius: 8px;
font-size: 12px; font-weight: 500; text-align: center;
cursor: pointer; user-select: none;
transition: color 180ms ease, background-color 180ms ease,
border-color 180ms ease, box-shadow 180ms ease;
line-height: 1.2;
}
.option-btn:hover { border-color: rgb(var(--c-line-strong)); color: rgb(var(--c-ink)); }
.option-btn.active {
background: rgb(var(--c-accent));
color: rgb(var(--c-surface));
border-color: rgb(var(--c-accent));
box-shadow: 0 1px 2px rgb(var(--c-accent) / 0.20);
}
.option-btn.slim { padding: 7px 4px; font-size: 10.5px; white-space: nowrap; }
/* ─────────────────────────────────────────────────────────
Playstyle / Chem buttons
───────────────────────────────────────────────────────── */
.ps-btn {
display: flex; flex-direction: column; gap: 2px;
border: 1px solid rgb(var(--c-line));
background: rgb(var(--c-surface));
border-radius: 10px; padding: 10px 12px;
cursor: pointer; user-select: none;
box-shadow:
0 1px 0 0 rgb(255 255 255 / 0.6) inset,
0 5px 14px -5px rgb(0 0 0 / 0.16);
transition: border-color 180ms ease, background-color 180ms ease,
box-shadow 180ms ease, transform 180ms ease;
}
.ps-btn:hover { border-color: rgb(var(--c-line-strong)); transform: translateY(-1px); }
.ps-btn.active {
border-color: rgb(var(--c-accent));
background: rgb(var(--c-accent) / 0.06);
box-shadow: 0 1px 2px rgb(var(--c-accent) / 0.10);
}
.ps-name {
font-size: 12px; font-weight: 600; color: rgb(var(--c-ink));
display: flex; align-items: center; gap: 4px; line-height: 1.3;
}
.ps-effect {
font-size: 10px; color: rgb(var(--c-ink-muted));
letter-spacing: 0.02em; line-height: 1.3;
}
.ps-btn.active .ps-name { color: rgb(var(--c-accent)); }
/* ─────────────────────────────────────────────────────────
Collapsible toggles + chevrons
───────────────────────────────────────────────────────── */
.collapsible-toggle {
display: flex; align-items: center; cursor: pointer;
padding: 12px 0; user-select: none;
border-top: 1px solid rgb(var(--c-line));
margin-top: 16px;
transition: color 180ms ease;
}
.collapsible-toggle:hover { color: rgb(var(--c-accent)); }
.collapsible-chevron {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
color: rgb(var(--c-ink-muted));
font-size: 9px; line-height: 1;
transition: transform 220ms ease, color 220ms ease;
flex-shrink: 0;
}
.collapsible-chevron.open { transform: rotate(90deg); color: rgb(var(--c-accent)); }
.collapsible-label {
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: rgb(var(--c-ink-soft));
}
.collapsible-body {
padding-top: 4px;
}
/* (open/close animation is handled below via max-height + JS) */
/* ─────────────────────────────────────────────────────────
Stat rows (Movement Feel)
───────────────────────────────────────────────────────── */
.stat-row {
display: grid;
grid-template-columns: 110px 1fr 36px;
align-items: center; gap: 10px;
padding: 8px 0;
}
.stat-label {
font-size: 12px; font-weight: 500; color: rgb(var(--c-ink-soft));
display: flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.tenacity-label { color: rgb(var(--c-warn)); }
.stat-bar-wrap {
position: relative; height: 6px;
background: rgb(var(--c-sunken));
border-radius: 999px; overflow: hidden;
}
.stat-bar-base, .stat-bar-effective {
position: absolute; top: 0; left: 0; height: 100%;
border-radius: 999px;
transition: width 480ms cubic-bezier(0.32, 0.72, 0.24, 1), background 240ms ease;
}
.stat-bar-base { background: rgb(var(--c-line-strong)); opacity: 0.6; }
.stat-bar-effective { background: rgb(var(--c-accent)); }
.stat-base-num, .stat-effective-num, .sub-stat-num {
font-family: 'IBM Plex Mono', monospace; font-size: 12px;
font-variant-numeric: tabular-nums; text-align: right;
}
.stat-base-num { color: rgb(var(--c-ink-muted)); }
.stat-effective-num { color: rgb(var(--c-ink)); font-weight: 500; }
.delta {
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
font-weight: 500; text-align: right;
color: rgb(var(--c-ink-muted));
}
.delta.pos { color: rgb(var(--c-gain)); }
.delta.neg { color: rgb(var(--c-loss)); }
.delta.zero { color: rgb(var(--c-ink-faint)); }
/* Sub-stat rows (Passing/Defending/Shooting) */
.sub-stat-row {
display: grid;
grid-template-columns: 130px 1fr 38px;
align-items: center; gap: 10px;
padding: 7px 0;
}
.sub-stat-label {
font-size: 12px; color: rgb(var(--c-ink-soft));
display: flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.sub-stat-num { color: rgb(var(--c-ink)); font-weight: 500; }
/* ─────────────────────────────────────────────────────────
Feel layer cards (nested)
───────────────────────────────────────────────────────── */
.feel-layer-card {
background: rgb(var(--c-sunken) / 0.4);
border: 1px solid rgb(var(--c-line));
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.feel-layer-card:last-child { margin-bottom: 0; }
.feel-layer-title {
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: rgb(var(--c-ink));
display: flex; align-items: center; gap: 8px;
}
/* ─────────────────────────────────────────────────────────
Breakdowns + verdicts
───────────────────────────────────────────────────────── */
.breakdown { padding-top: 10px; border-top: 1px solid rgb(var(--c-line)); }
.breakdown-title {
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 600; margin-bottom: 8px;
}
.slip-breakdown-title { color: rgb(var(--c-accent)); }
.breakdown-item {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 5px 0; gap: 12px;
font-size: 11px;
}
.breakdown-item .source {
color: rgb(var(--c-ink-soft)); flex: 0 1 auto; min-width: 0;
}
.breakdown-deltas {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
flex: 1 1 auto;
}
.bd {
font-family: 'IBM Plex Mono', monospace; font-size: 10px;
font-weight: 500; padding: 2px 6px; border-radius: 6px;
background: rgb(var(--c-sunken));
color: rgb(var(--c-ink-muted));
}
.bd.pos { color: rgb(var(--c-gain)); background: rgb(var(--c-gain) / 0.10); }
.bd.neg { color: rgb(var(--c-loss)); background: rgb(var(--c-loss) / 0.10); }
.verdict {
background: rgb(var(--c-accent) / 0.05);
border-left: 2px solid rgb(var(--c-accent));
border-radius: 0 8px 8px 0;
padding: 12px 14px;
}
.verdict-label {
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgb(var(--c-accent)); font-weight: 600; margin-bottom: 4px;
}
.verdict-text { font-size: 12px; line-height: 1.55; color: rgb(var(--c-ink-soft)); }
/* ─────────────────────────────────────────────────────────
Toggle (drib / compare drib)
───────────────────────────────────────────────────────── */
.compare-header-controls {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.view-toggle {
display: inline-flex; padding: 2px;
position: relative;
background: rgb(var(--c-sunken));
border: 1px solid rgb(var(--c-line));
border-radius: 999px;
}
/* Slim padding — keep the sliding indicator inset to match the 2px track */
.view-toggle .segmented-indicator { top: 2px; bottom: 2px; }
.view-toggle-btn {
font-family: 'Hanken Grotesk', sans-serif; font-size: 10px;
padding: 4px 12px; border-radius: 999px;
background: transparent; color: rgb(var(--c-ink-muted));
border: none; cursor: pointer;
position: relative; z-index: 1;
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
transition: color 160ms ease;
}
.view-toggle-btn:hover { color: rgb(var(--c-ink-soft)); }
.view-toggle-btn.active { color: rgb(var(--c-accent)); }
/* ─────────────────────────────────────────────────────────
Save UI — folders + players
───────────────────────────────────────────────────────── */
.save-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.name-input, .folder-select {
flex: 1; min-width: 120px;
background: rgb(var(--c-sunken)); border: 1px solid rgb(var(--c-line));
border-radius: 8px; padding: 8px 10px;
font-size: 12px; color: rgb(var(--c-ink));
font-family: 'Hanken Grotesk', sans-serif;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.name-input:focus, .folder-select:focus {
outline: none; border-color: rgb(var(--c-accent));
box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
}
.save-btn, .export-btn, .import-btn, .load-btn, .delete-btn {
border-radius: 8px; padding: 8px 12px;
font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
cursor: pointer; border: 1px solid transparent;
transition: background-color 160ms ease, border-color 160ms ease,
color 160ms ease, filter 160ms ease;
font-family: 'Hanken Grotesk', sans-serif;
white-space: nowrap;
}
.save-btn {
background: rgb(var(--c-accent)); color: rgb(var(--c-surface));
}
.save-btn:hover { filter: brightness(1.08); }
.export-btn, .import-btn {
background: rgb(var(--c-surface)); color: rgb(var(--c-ink-soft));
border-color: rgb(var(--c-line));
}
.export-btn:hover, .import-btn:hover { border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent)); }
.load-btn {
background: rgb(var(--c-accent) / 0.10); color: rgb(var(--c-accent));
padding: 5px 10px; font-size: 10px;
}
.load-btn:hover { background: rgb(var(--c-accent) / 0.18); }
.delete-btn {
background: transparent; color: rgb(var(--c-loss));
padding: 5px 10px; font-size: 10px;
}
.delete-btn:hover { background: rgb(var(--c-loss) / 0.10); }
/* Role/archetype picker — reveals only when a player name is entered */
#roleSelection {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 380ms cubic-bezier(0.32, 0.72, 0.24, 1),
opacity 260ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
#roleSelection.visible {
grid-template-rows: 1fr;
opacity: 1;
}
.role-selection-inner {
overflow: hidden;
min-height: 0;
transform: translateY(-6px);
transition: transform 380ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
#roleSelection.visible .role-selection-inner {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
#roleSelection, .role-selection-inner { transition: none; }
}
.role-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.chips-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 600; margin-top: 14px; margin-bottom: 6px; }
.role-chip, .archetype-chip {
font-size: 10px; padding: 4px 9px; border-radius: 999px;
background: rgb(var(--c-sunken)); color: rgb(var(--c-ink-muted));
border: 1px solid rgb(var(--c-line));
cursor: pointer; user-select: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
letter-spacing: 0.04em; font-weight: 500;
}
.role-chip:hover, .archetype-chip:hover { border-color: rgb(var(--c-line-strong)); }
.role-chip.active {
background: rgb(var(--c-accent)); color: rgb(var(--c-surface));
border-color: rgb(var(--c-accent));
}
.archetype-chip.primary {
background: rgb(var(--c-accent)); color: rgb(var(--c-surface));
border-color: rgb(var(--c-accent));
}
.archetype-chip.secondary {
background: rgb(var(--c-accent) / 0.12); color: rgb(var(--c-accent));
border-color: rgb(var(--c-accent) / 0.30);
}
.folder-group { margin-bottom: 6px; }
.folder-header {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; border-radius: 8px; cursor: pointer;
transition: background 160ms ease;
}
.folder-header:hover { background: rgb(var(--c-sunken)); }
.folder-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.folder-chevron {
color: rgb(var(--c-ink-muted)); font-size: 9px;
transition: transform 200ms ease;
}
.folder-chevron.open { transform: rotate(90deg); }
.folder-name-text { font-size: 13px; font-weight: 500; color: rgb(var(--c-ink)); }
.folder-count { font-size: 10px; color: rgb(var(--c-ink-muted)); margin-left: 4px; }
.folder-delete-btn {
background: transparent; border: 1px solid rgb(var(--c-line));
color: rgb(var(--c-ink-muted));
width: 20px; height: 20px; border-radius: 999px;
font-size: 14px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 160ms ease;
}
.folder-delete-btn:hover { color: rgb(var(--c-loss)); }
/* Left padding is the per-level indent — it compounds with nesting so every
folder's contents (players + subfolders alike) sit one clear step in.
It lives on the inner wrapper so the outer clip can collapse to a true
0 height (padding on the clip itself can't compress). */
.folder-contents-inner { padding: 4px 0 4px 48px; }
/* (open/close animation handled below via max-height + JS) */
.saved-player {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px; border-radius: 8px;
transition: background 160ms ease;
}
.saved-player:hover { background: rgb(var(--c-sunken)); }
.saved-player.drag-over { background: rgb(var(--c-accent) / 0.10); }
.folder-group.drag-over > .folder-header { background: rgb(var(--c-accent) / 0.10); }
.drag-handle {
cursor: grab; color: rgb(var(--c-ink-faint));
font-size: 12px; user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.saved-player-info { flex: 1; min-width: 0; }
.saved-player-name {
font-size: 13px; color: rgb(var(--c-ink)); font-weight: 500;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.player-arch-tag {
font-size: 9px; padding: 2px 7px; border-radius: 999px;
letter-spacing: 0.04em; font-weight: 500;
}
.player-arch-tag.primary-arch {
background: rgb(var(--c-accent) / 0.14); color: rgb(var(--c-accent));
}
.player-arch-tag.secondary-arch {
background: rgb(var(--c-sunken)); color: rgb(var(--c-ink-muted));
}
.saved-player-actions { display: flex; gap: 4px; flex-shrink: 0; }
.no-saves {
font-size: 12px; color: rgb(var(--c-ink-muted));
text-align: center; padding: 20px 0; font-style: italic;
}
.rename-input {
background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-accent));
border-radius: 6px; padding: 4px 8px;
font-size: 13px; color: rgb(var(--c-ink));
font-family: 'Hanken Grotesk', sans-serif;
box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
outline: none;
}
/* ─────────────────────────────────────────────────────────
Colour tags — inline circles next to saved-player names
───────────────────────────────────────────────────────── */
.player-color-tags { display: inline-flex; align-items: center; gap: 4px; }
.player-color-tag,
.pending-tag {
position: relative; box-sizing: border-box;
width: 11px; height: 11px; border-radius: 999px;
border: 1.5px solid transparent; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.pending-tag { width: 12px; height: 12px; }
.ctag-del, .ptag-del {
position: absolute; inset: -3px;
display: flex; align-items: center; justify-content: center;
border: none; border-radius: 999px; padding: 0; margin: 0;
background: rgb(var(--c-loss)); color: rgb(var(--c-surface));
font-size: 7px; font-weight: 700; line-height: 1; cursor: pointer;
font-family: 'Hanken Grotesk', sans-serif;
opacity: 0; transform: scale(0.6);
transition: opacity 140ms ease, transform 140ms ease;
}
.player-color-tag:hover .ctag-del,
.pending-tag:hover .ptag-del { opacity: 1; transform: scale(1); }
/* ─────────────────────────────────────────────────────────
Colour-tag picker — trigger + floating glass popup
───────────────────────────────────────────────────────── */
.tag-picker-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tag-picker-btn {
display: inline-flex; align-items: center; gap: 5px;
background: rgb(var(--c-surface)); color: rgb(var(--c-ink-soft));
border: 1px solid rgb(var(--c-line)); border-radius: 8px;
padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
font-family: 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap;
transition: border-color 160ms ease, color 160ms ease;
}
.tag-picker-btn:hover, .tag-picker-btn.active {
border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent));
}
.tag-picker-btn-icon { font-size: 13px; line-height: 1; }
.pending-tags { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tag-picker-popup {
position: fixed; z-index: 200; width: 244px;
background: rgb(var(--c-surface));
border: 1px solid rgb(var(--c-line-strong)); border-radius: 12px; padding: 14px;
box-shadow: 0 4px 12px -2px rgb(20 18 16 / 0.10), 0 16px 40px -8px rgb(20 18 16 / 0.16);
font-family: 'Hanken Grotesk', sans-serif;
opacity: 0; pointer-events: none;
transform: translateY(-4px) scale(0.97); transform-origin: top left;
transition: opacity 180ms ease, transform 180ms ease;
}
.tag-picker-popup.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
html.dark .tag-picker-popup {
background: color-mix(in srgb, rgb(var(--c-surface)) 82%, transparent);
backdrop-filter: blur(var(--blur-base)) saturate(180%);
-webkit-backdrop-filter: blur(var(--blur-base)) saturate(180%);
border-color: var(--glass-stroke-outer);
}
.tag-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag-picker-title { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgb(var(--c-ink)); }
.tag-preview-circle {
width: 20px; height: 20px; border-radius: 999px; box-sizing: border-box;
border: 2px solid transparent; display: inline-block;
}
.tag-rgb-group { margin-top: 12px; }
.tag-rgb-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.tag-rgb-label { flex: 1; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-ink-muted)); }
.tag-rgb-hex { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(var(--c-ink-soft)); }
.tag-rgb-swatch { width: 14px; height: 14px; border-radius: 5px; border: 1px solid rgb(var(--c-line-strong)); box-sizing: border-box; }
.tag-rgb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tag-rgb-ch { width: 10px; font-size: 10px; font-weight: 600; color: rgb(var(--c-ink-muted)); font-family: 'JetBrains Mono', monospace; }
.tag-slider {
flex: 1; min-width: 0; -webkit-appearance: none; appearance: none;
height: 4px; border-radius: 999px; background: rgb(var(--c-sunken)); outline: none; cursor: pointer;
}
.tag-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 12px; height: 12px;
border-radius: 999px; background: rgb(var(--c-accent)); border: none; cursor: pointer;
}
.tag-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: rgb(var(--c-accent)); border: none; cursor: pointer; }
.tag-num {
width: 44px; background: rgb(var(--c-sunken)); border: 1px solid rgb(var(--c-line));
border-radius: 6px; padding: 4px 6px; font-size: 11px; color: rgb(var(--c-ink));
font-family: 'JetBrains Mono', monospace;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tag-num:focus { outline: none; border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12); }
.tag-picker-actions { margin-top: 13px; }
.tag-add-btn {
width: 100%; background: rgb(var(--c-accent)); color: rgb(var(--c-surface));
border: none; border-radius: 8px; padding: 8px; font-size: 11px; font-weight: 600;
letter-spacing: 0.04em; cursor: pointer; font-family: 'Hanken Grotesk', sans-serif;
transition: filter 160ms ease;
}
.tag-add-btn:hover { filter: brightness(1.08); }
.io-row { display: flex; gap: 8px; }
/* ─────────────────────────────────────────────────────────
Compare table
───────────────────────────────────────────────────────── */
.compare-selectors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; align-items: end; margin-top: 14px;
}
.compare-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.compare-slot-head {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.compare-slot-remove {
background: transparent; border: 1px solid rgb(var(--c-line));
color: rgb(var(--c-ink-muted));
width: 20px; height: 20px; border-radius: 999px;
font-size: 14px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 160ms ease;
}
.compare-slot-remove:hover:not(:disabled) {
color: rgb(var(--c-loss)); border-color: rgb(var(--c-loss));
}
.compare-slot-remove:disabled { opacity: 0.3; cursor: not-allowed; }
.compare-actions {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 12px;
}
.compare-actions-hint {
font-size: 10px; color: rgb(var(--c-ink-muted));
letter-spacing: 0.04em; font-style: italic;
}
.compare-label {
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 600;
}
.compare-table {
width: 100%; border-collapse: collapse;
font-family: 'IBM Plex Mono', monospace; font-size: 11px;
margin-top: 14px;
}
.compare-table th {
text-align: center; padding: 8px 6px;
font-size: 11px; font-weight: 600;
color: rgb(var(--c-ink-muted)); letter-spacing: 0.06em;
border-bottom: 1px solid rgb(var(--c-line));
font-family: 'Hanken Grotesk', sans-serif;
}
.compare-table th.stat-col { text-align: left; }
.compare-table .compare-name-row th {
font-size: 13px; color: rgb(var(--c-ink)); font-weight: 600;
padding-bottom: 4px; border-bottom: none;
font-family: 'Hanken Grotesk', sans-serif;
}
.compare-table td { padding: 5px 6px; vertical-align: middle; }
.compare-table td.stat-col {
text-align: left; color: rgb(var(--c-ink-soft));
font-family: 'Hanken Grotesk', sans-serif; font-size: 12px;
}
.compare-table td:not(.stat-col) { text-align: center; }
.winner { color: var(--tier-green); font-weight: 600; }
.loser { color: var(--tier-magenta); }
.draw { color: var(--tier-amber); }
.compare-bar-wrap {
margin-top: 4px; height: 4px;
background: rgb(var(--c-sunken));
border-radius: 999px; overflow: hidden;
}
.compare-bar {
height: 100%; border-radius: 999px;
transition: width 480ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.compare-empty {
text-align: center; padding: 32px 16px;
color: rgb(var(--c-ink-muted)); font-size: 12px; font-style: italic;
}
/* ─────────────────────────────────────────────────────────
Radar grid — overlaid feel-layer polygons
───────────────────────────────────────────────────────── */
.radar-legend {
display: flex; flex-wrap: wrap; gap: 8px 14px;
justify-content: center; margin: 8px 0 14px;
font-family: 'Hanken Grotesk', sans-serif; font-size: 11px;
}
.radar-legend-item {
display: inline-flex; align-items: center; gap: 6px;
color: rgb(var(--c-ink-soft));
}
.radar-legend-swatch {
width: 10px; height: 10px; border-radius: 999px;
background: rgb(var(--slot-color, var(--c-accent)) / 0.35);
border: 1.5px solid rgb(var(--slot-color, var(--c-accent)));
}
.radar-legend-folder { color: rgb(var(--c-ink-muted)); font-size: 10px; }
.radar-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 14px; margin-top: 6px;
}
.radar-card {
background: rgb(var(--c-sunken) / 0.4);
border: 1px solid rgb(var(--c-line));
border-radius: 10px; padding: 10px 8px 6px;
display: flex; flex-direction: column; align-items: center;
min-width: 0; cursor: zoom-in;
transition:
opacity 280ms cubic-bezier(0.32, 0.72, 0.24, 1),
transform 220ms cubic-bezier(0.32, 0.72, 0.24, 1),
border-color 180ms ease,
padding 360ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.radar-card:hover {
border-color: rgb(var(--c-line-strong));
transform: translateY(-1px);
}
/* Zoom state */
.radar-grid.has-zoomed .radar-card { cursor: zoom-out; }
.radar-grid.has-zoomed .radar-card:not(.is-zoomed) {
opacity: 0;
height: 0;
padding-top: 0; padding-bottom: 0;
margin: 0;
border-width: 0;
overflow: hidden;
pointer-events: none;
transform: scale(0.96);
}
.radar-card.is-zoomed {
grid-column: 1 / -1;
padding: 18px 12px 14px;
background: rgb(var(--c-sunken) / 0.6);
}
.radar-card.is-zoomed:hover { transform: none; }
.radar-card.is-zoomed .radar-svg {
max-width: 460px;
}
.radar-card.is-zoomed .radar-title {
font-size: 12px; letter-spacing: 0.22em;
}
.radar-card.is-zoomed .radar-label {
font-size: 11px;
}
.radar-card-hint {
display: none;
font-family: 'Hanken Grotesk', sans-serif; font-size: 9px;
color: rgb(var(--c-ink-muted));
margin-top: 10px;
letter-spacing: 0.16em; text-transform: uppercase;
opacity: 0;
transition: opacity 320ms cubic-bezier(0.32, 0.72, 0.24, 1) 120ms;
}
.radar-card.is-zoomed .radar-card-hint { display: block; opacity: 1; }
.radar-title {
font-family: 'Hanken Grotesk', sans-serif; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgb(var(--c-ink-muted)); font-weight: 600;
margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.radar-title-dot {
width: 5px; height: 5px; border-radius: 999px;
}
.radar-card.layer-movement .radar-title-dot { background: rgb(var(--c-gain)); }
.radar-card.layer-passing .radar-title-dot { background: rgb(var(--c-accent)); }
.radar-card.layer-defending .radar-title-dot { background: rgb(var(--c-warn)); }
.radar-card.layer-shooting .radar-title-dot { background: rgb(var(--c-loss)); }
.radar-svg {
width: 100%; max-width: 220px; height: auto; aspect-ratio: 1 / 1;
overflow: visible;
}
.radar-grid-lines polygon, .radar-grid-lines line {
fill: none; stroke: rgb(var(--c-line)); stroke-width: 0.6;
}
.radar-grid-lines polygon.radar-outer { stroke: rgb(var(--c-line-strong)); stroke-width: 0.9; }
.radar-poly {
stroke-width: 1.6; stroke-linejoin: round;
transition: opacity 200ms ease;
}
.radar-svg:hover .radar-poly { opacity: 0.7; }
.radar-svg:hover .radar-poly:hover { opacity: 1; }
.radar-label {
font-family: 'Hanken Grotesk', sans-serif; font-size: 9.5px;
fill: rgb(var(--c-ink-muted)); font-weight: 500;
letter-spacing: 0.04em;
cursor: help;
}
.radar-label.radar-label-winner {
fill: rgb(var(--slot-color, var(--c-ink)));
font-weight: 700;
}
.compare-table th.col-slot {
border-bottom: 2px solid rgb(var(--slot-color, transparent));
}
@media (max-width: 640px) {
.radar-grid { grid-template-columns: 1fr; }
.radar-svg { max-width: 240px; }
}
/* ─────────────────────────────────────────────────────────
Info button (i tooltip trigger)
───────────────────────────────────────────────────────── */
.info-btn {
width: 14px; height: 14px; border-radius: 999px;
background: rgb(var(--c-line)); color: rgb(var(--c-ink-muted));
border: none; padding: 0;
font-size: 9px; font-weight: 700; line-height: 14px;
font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
cursor: pointer; vertical-align: middle;
transition: all 140ms ease;
flex-shrink: 0;
}
.info-btn:hover, .info-btn.active {
background: rgb(var(--c-accent)); color: rgb(var(--c-surface));
}
.info-bubble {
position: absolute; max-width: 280px; z-index: 100;
background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line-strong));
border-radius: 10px; padding: 12px 14px;
box-shadow: 0 4px 12px -2px rgb(20 18 16 / 0.10), 0 16px 40px -8px rgb(20 18 16 / 0.16);
opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity 180ms ease, transform 180ms ease;
}
.info-bubble.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.info-bubble-title {
font-size: 11px; font-weight: 600; color: rgb(var(--c-ink));
margin-bottom: 4px; letter-spacing: 0.04em;
}
.info-bubble-body {
font-size: 11px; line-height: 1.5; color: rgb(var(--c-ink-soft));
}
/* ─────────────────────────────────────────────────────────
Card reveal — IO-driven, with subtle blur-to-focus
───────────────────────────────────────────────────────── */
.card-enter {
opacity: 0;
transform: translateY(14px);
filter: blur(3px);
transition:
opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
filter 560ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 320ms ease,
background 320ms ease;
will-change: opacity, transform, filter;
}
.card-enter.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ─────────────────────────────────────────────────────────
Glass surfaces — frosted section cards
───────────────────────────────────────────────────────── */
.card {
background: rgb(var(--c-surface) / 0.38);
-webkit-backdrop-filter: blur(32px) saturate(190%);
backdrop-filter: blur(32px) saturate(190%);
border-color: rgb(255 255 255 / 0.55);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.7),
inset 0 0 0 1px rgb(255 255 255 / 0.18),
0 1px 2px rgb(20 18 16 / 0.04),
0 18px 48px -12px rgb(20 18 16 / 0.14);
}
html.dark .card {
background: rgb(var(--c-surface) / 0.32);
border-color: rgb(255 255 255 / 0.08);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.06),
inset 0 0 0 1px rgb(255 255 255 / 0.03),
0 1px 2px rgb(0 0 0 / 0.3),
0 18px 48px -12px rgb(0 0 0 / 0.55);
}
/* Fallback for browsers without backdrop-filter — use a more opaque fill */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.card { background: rgb(var(--c-surface) / 0.92); }
html.dark .card { background: rgb(var(--c-surface) / 0.92); }
}
/* Hero lines — sequential reveal driven by --hero-delay */
.hero-line {
opacity: 0;
transform: translateY(10px);
animation: hero-in 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: var(--hero-delay, 0ms);
}
@keyframes hero-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────────
Smooth collapsibles — height-aware via JS-set max-height
The JS sets max-height to scrollHeight on open, 0 on close.
───────────────────────────────────────────────────────── */
.collapsible-body {
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 420ms cubic-bezier(0.32, 0.72, 0.24, 1),
opacity 320ms cubic-bezier(0.32, 0.72, 0.24, 1) 60ms;
/* Once open, JS sets max-height to 'none' for free reflow */
}
.collapsible-body.open {
opacity: 1;
}
/* Folder open/close — the squad-table style: a fade paired with a glide.
.folder-contents is the height clip (max-height driven by animations.js);
.folder-contents-inner carries the fade. The resting rules hold the
*close* timing (fade the contents out, then glide the height shut); the
.open rules hold the *open* timing (glide the height open, then fade the
contents in) — each the reverse of the other. */
.folder-contents {
overflow: hidden;
max-height: 0;
transition: max-height 300ms cubic-bezier(0.32, 0.72, 0.24, 1) 140ms;
}
.folder-contents.open {
/* JS sets max-height to scrollHeight */
transition: max-height 340ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.folder-contents-inner {
opacity: 0;
transition: opacity 160ms ease;
}
.folder-contents.open .folder-contents-inner {
opacity: 1;
transition: opacity 280ms ease 120ms;
}
@media (prefers-reduced-motion: reduce) {
.folder-contents, .folder-contents.open,
.folder-contents-inner, .folder-contents.open .folder-contents-inner {
transition-duration: 1ms;
transition-delay: 0ms;
}
}
/* Number flash — when stat values update */
.flash {
animation: stat-flash 540ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
@keyframes stat-flash {
0% { transform: translateY(0); filter: brightness(1); }
35% { transform: translateY(-2px); filter: brightness(1.3); }
100% { transform: translateY(0); filter: brightness(1); }
}
/* ─────────────────────────────────────────────────────────
Micro-interactions — tactile press feedback, hover lift
───────────────────────────────────────────────────────── */
/* NOTE: a `transform: translateZ(0)` rule used to live here to
"promote to layer for crisp anims". It forced ~170 controls
(every playstyle tile, chip, button and all ~103 info-buttons)
onto their own GPU compositor layer permanently — which the
compositor must then maintain at idle and re-assemble on every
scroll frame. That was the real cause of the elevated idle CPU
and the scroll judder (worst over the control-dense Section 01).
Removed: the brief :active press below animates `transform`, and
the browser promotes a layer on-demand for the duration of that
animation only. No permanent promotion is needed. */
.ps-btn:active,
.option-btn:active,
.role-chip:active,
.archetype-chip:active,
.save-btn:active,
.export-btn:active,
.import-btn:active,
.load-btn:active,
.delete-btn:active,
#themeToggle:active {
transform: scale(0.97);
transition: transform 120ms ease;
}
/* Card hover lift — desktop only */
@media (hover: hover) and (pointer: fine) {
section.card-enter.is-visible:hover {
box-shadow:
0 1px 2px rgb(20 18 16 / 0.05),
0 12px 32px -8px rgb(20 18 16 / 0.08);
}
}
/* Bar fill — slightly punchier easing to feel "snappy yet smooth" */
.stat-bar-effective,
.stat-bar-base,
.compare-bar {
transition:
width 720ms cubic-bezier(0.32, 0.72, 0.24, 1),
background 320ms ease;
}
/* Header gradient orb decoration */
/* ─────────────────────────────────────────────────────────
Squad View — telemetry tower
Floating translucent rows with inline stat gauges, in place
of a hard leaderboard table.
───────────────────────────────────────────────────────── */
/* One glass panel holds the whole tower — records are separated by
chiselled (engraved-groove) hairlines instead of being separate cards. */
.sq-inner {
display: flex;
flex-direction: column;
border-radius: var(--r-md);
border: 1px solid rgb(var(--c-line) / 0.85);
background: linear-gradient(180deg, rgb(var(--c-surface) / 0.66), rgb(var(--c-surface) / 0.36));
box-shadow: 0 8px 24px -14px rgb(20 18 16 / 0.2);
overflow: hidden;
}
html.dark .sq-inner {
background: linear-gradient(180deg, var(--glass-base), color-mix(in srgb, white 2%, transparent));
border-color: var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 var(--glass-stroke-inner) inset,
0 16px 44px -18px rgb(0 0 0 / 0.62);
}
/* Header strip — sort controls, no table chrome.
Column spacing lives in each cell's padding-left (not grid `gap`) so a
collapsed 0fr track contributes zero width during the focus animation. */
.sq-head {
display: grid;
grid-template-columns: var(--sq-cols);
align-items: end;
padding: 11px 14px 8px;
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.16em; color: rgb(var(--c-ink-faint));
border-bottom: 1px solid rgb(var(--c-line));
box-shadow: 0 1px 0 rgb(255 255 255 / 0.55);
transition: grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark .sq-head {
border-bottom-color: rgb(0 0 0 / 0.36);
box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}
.sq-h-pos { text-align: center; }
.sq-h-id { padding-left: 12px; }
.sq-h-stat {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding-left: 12px;
overflow: hidden;
transition: opacity 170ms ease 340ms,
padding-left 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sq-h-label {
padding-bottom: 4px;
border-bottom: 1.5px solid rgb(var(--accent) / 0.6);
box-shadow: 0 5px 11px -6px rgb(var(--accent) / 0.9);
}
.sq-sortable { cursor: pointer; white-space: nowrap; transition: color 160ms ease; }
.sq-sortable:hover { color: rgb(var(--c-ink)); }
.sq-sortable.is-sorted { color: rgb(var(--accent)); }
.sq-sort-ind { font-size: 8px; }
.sq-expand {
flex-shrink: 0;
width: 17px; height: 17px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
border: 1px solid rgb(var(--c-line-strong));
background: rgb(var(--c-surface) / 0.5);
color: rgb(var(--c-ink-muted));
font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 700;
cursor: pointer; transition: all 160ms ease;
}
.sq-expand:hover { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.6); }
.sq-expand.is-on {
background: rgb(var(--accent) / 0.16);
border-color: rgb(var(--accent) / 0.5);
color: rgb(var(--accent));
}
/* Player row — soft floating telemetry card */
.sq-row {
display: grid;
grid-template-columns: var(--sq-cols);
align-items: center;
padding: 10px 14px;
transition: background 160ms ease,
grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Chiselled-groove divider between records — shadow line then highlight */
.sq-row + .sq-row {
border-top: 1px solid rgb(var(--c-line));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.sq-row:hover { background: rgb(var(--c-ink) / 0.04); }
html.dark .sq-row + .sq-row {
border-top-color: rgb(0 0 0 / 0.32);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055);
}
html.dark .sq-row:hover { background: rgb(255 255 255 / 0.04); }
/* Position badge */
.sq-pos {
justify-self: center;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 600;
color: rgb(var(--c-ink-faint));
background: rgb(var(--c-sunken) / 0.55);
border: 1px solid rgb(var(--c-line) / 0.7);
}
.sq-pos.p2, .sq-pos.p3 {
color: rgb(var(--accent));
background: rgb(var(--accent) / 0.1);
border-color: rgb(var(--accent) / 0.4);
}
.sq-pos.p1 {
color: #fff;
background: linear-gradient(155deg, rgb(var(--accent)), rgb(var(--accent) / 0.62));
border-color: rgb(var(--accent) / 0.7);
box-shadow: 0 0 16px -2px rgb(var(--accent) / 0.7);
}
/* Identity */
.sq-id { min-width: 0; padding-left: 12px; }
.sq-name {
font-size: 13px; font-weight: 600; color: rgb(var(--c-ink));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-meta {
display: flex; flex-wrap: wrap; gap: 3px 8px;
font-size: 9px; letter-spacing: 0.05em; margin-top: 3px;
color: rgb(var(--c-ink-faint)); text-transform: uppercase;
}
.sq-roles { color: rgb(var(--accent)); font-weight: 700; }
.sq-arch { color: rgb(var(--c-warn)); font-style: italic; }
/* Stat gauge */
.sq-stat {
min-width: 0;
padding-left: 12px;
overflow: hidden;
transition: opacity 170ms ease 340ms,
padding-left 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sq-gauge { display: flex; align-items: center; gap: 7px; }
.sq-stat.is-focused .sq-gauge { max-width: 240px; }
.sq-rank-slot { flex-shrink: 0; width: 13px; display: flex; }
.sq-rank {
width: 13px; height: 13px; line-height: 13px; text-align: center;
border-radius: var(--r-pill);
font-family: 'Hanken Grotesk', sans-serif; font-size: 8px; font-weight: 800;
color: #1a1410;
}
.sq-rank.r1 { background: linear-gradient(150deg, #f4dd9a, #d8af5e); box-shadow: 0 0 7px -1px rgb(230 190 100 / 0.85); }
.sq-rank.r2 { background: linear-gradient(150deg, #dad7d0, #aeaaa0); }
.sq-rank.r3 { background: linear-gradient(150deg, #d9aa7c, #b27a4c); }
.sq-bar {
flex: 1; min-width: 22px; height: 7px;
border-radius: var(--r-pill);
background: rgb(var(--c-ink) / 0.09);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.22);
overflow: hidden;
}
.sq-fill {
display: block; height: 100%;
border-radius: var(--r-pill);
transition: width 520ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.sq-val {
flex-shrink: 0; min-width: 29px; text-align: right;
font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
}
.sq-val.muted, .sq-sub-v.muted { color: rgb(var(--c-ink-faint)); font-weight: 400; }
/* Expanded sub-stat telemetry — three nested layers:
.sq-subs-wrap height animator (grid-template-rows 0fr → 1fr)
.sq-subs the overflow clip — MUST stay padding/border-free,
or its box can't compress to 0 in the 0fr track
.sq-subs-grid the actual content: divider, padding, column grid */
.sq-subs-wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 220ms ease, opacity 160ms ease;
}
.sq-subs { min-height: 0; overflow: hidden; }
.sq-subs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px 16px;
margin-top: 9px;
padding-top: 9px;
border-top: 1px dashed rgb(var(--c-line) / 0.9);
}
.sq-sub { display: flex; align-items: center; gap: 6px; }
.sq-sub-l {
flex-shrink: 0; width: 26px;
font-size: 8.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: rgb(var(--c-ink-faint));
}
.sq-sub-bar {
flex: 1; min-width: 14px; height: 4px;
border-radius: var(--r-pill);
background: rgb(var(--c-ink) / 0.09);
overflow: hidden;
}
.sq-sub-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.sq-sub-v {
flex-shrink: 0; min-width: 22px; text-align: right;
font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
}
/* Tier colours — gradient fills with glow + matching value text */
.sq-fill.tier-magenta, .sq-sub-fill.tier-magenta {
background: linear-gradient(90deg, color-mix(in srgb, var(--tier-magenta) 38%, transparent), var(--tier-magenta));
box-shadow: 0 0 8px -1px color-mix(in srgb, var(--tier-magenta) 78%, transparent);
}
.sq-fill.tier-amber, .sq-sub-fill.tier-amber {
background: linear-gradient(90deg, color-mix(in srgb, var(--tier-amber) 38%, transparent), var(--tier-amber));
box-shadow: 0 0 8px -1px color-mix(in srgb, var(--tier-amber) 78%, transparent);
}
.sq-fill.tier-green, .sq-sub-fill.tier-green {
background: linear-gradient(90deg, color-mix(in srgb, var(--tier-green) 38%, transparent), var(--tier-green));
box-shadow: 0 0 8px -1px color-mix(in srgb, var(--tier-green) 78%, transparent);
}
.sq-fill.tier-cyan, .sq-sub-fill.tier-cyan {
background: linear-gradient(90deg, color-mix(in srgb, var(--tier-cyan) 38%, transparent), var(--tier-cyan));
box-shadow: 0 0 8px -1px color-mix(in srgb, var(--tier-cyan) 78%, transparent);
}
.sq-val.tier-magenta, .sq-sub-v.tier-magenta { color: var(--tier-magenta); }
.sq-val.tier-amber, .sq-sub-v.tier-amber { color: var(--tier-amber); }
.sq-val.tier-green, .sq-sub-v.tier-green { color: var(--tier-green); }
.sq-val.tier-cyan, .sq-sub-v.tier-cyan { color: var(--tier-cyan); }
/* Summary strip — median / peak */
.sq-foot {
display: grid;
grid-template-columns: var(--sq-cols);
align-items: center;
padding: 9px 14px;
background: rgb(var(--c-sunken) / 0.55);
transition: grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Chiselled divider above the summary block + between Median / Peak */
.sq-row + .sq-foot,
.sq-foot + .sq-foot {
border-top: 1px solid rgb(var(--c-line));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
html.dark .sq-row + .sq-foot,
html.dark .sq-foot + .sq-foot {
border-top-color: rgb(0 0 0 / 0.34);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055);
}
.sq-foot-label {
grid-column: 1 / 3;
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.16em; color: rgb(var(--c-ink-muted));
}
.sq-foot-stat {
display: flex; align-items: center; gap: 7px; min-width: 0;
padding-left: 12px;
overflow: hidden;
transition: opacity 170ms ease 340ms,
padding-left 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sq-foot-stat .sq-bar { max-width: 160px; }
/* ── Focus-mode animation ───────────────────────────────────────
Expanding a layer hides the others and stretches its column to
fill the table. The sequence — fade the others out, glide the
column open, then reveal the sub-stats — is driven purely by
transition timing: the resting rules above carry the *collapse*
(reverse) timing; the .has-focus rules below carry the *expand*
timing (a delay that waits for the prior phase to finish). */
.sq-inner.has-focus .sq-head,
.sq-inner.has-focus .sq-row,
.sq-inner.has-focus .sq-foot {
transition: grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1) 170ms;
}
.sq-inner.has-focus .sq-row {
transition: background 160ms ease,
grid-template-columns 340ms cubic-bezier(0.4, 0, 0.2, 1) 170ms;
}
.sq-inner.has-focus .sq-h-stat:not(.is-focused),
.sq-inner.has-focus .sq-stat:not(.is-focused),
.sq-inner.has-focus .sq-foot-stat:not(.is-focused) {
opacity: 0;
padding-left: 0;
pointer-events: none;
transition: opacity 170ms ease,
padding-left 340ms cubic-bezier(0.4, 0, 0.2, 1) 170ms;
}
.sq-inner.has-focus .sq-stat.is-focused .sq-subs-wrap {
grid-template-rows: 1fr;
opacity: 1;
transition: grid-template-rows 260ms ease 510ms,
opacity 240ms ease 510ms;
}
@media (prefers-reduced-motion: reduce) {
.sq-head, .sq-row, .sq-foot,
.sq-h-stat, .sq-stat, .sq-foot-stat, .sq-subs-wrap,
.sq-inner.has-focus .sq-head,
.sq-inner.has-focus .sq-row,
.sq-inner.has-focus .sq-foot,
.sq-inner.has-focus .sq-h-stat:not(.is-focused),
.sq-inner.has-focus .sq-stat:not(.is-focused),
.sq-inner.has-focus .sq-foot-stat:not(.is-focused),
.sq-inner.has-focus .sq-stat.is-focused .sq-subs-wrap {
transition-duration: 1ms;
transition-delay: 0ms;
}
}
/* ════════════════════════════════════════════════════════════
Unified glass controls — every button, input, select and chip
in the Saves / Compare / Squad sections gets the raised glass
"solid object" feel of a playstyle tile. (dark mode)
════════════════════════════════════════════════════════════ */
/* Neutral glass surface — resting buttons, inputs, selects, chips */
html.dark :is(
.export-btn, .import-btn, .load-btn, .delete-btn, .folder-delete-btn,
.sq-expand, .info-btn, .compare-slot-remove,
.name-input, .folder-select, .io-textarea,
.role-chip, .archetype-chip
) {
/* backdrop-filter removed — see "PERFORMANCE: backdrop-filter"
note below. These controls sit on the already-frosted
.unified-card, so their own blur was a redundant second
pass; the translucent fill still shows the frost through. */
background: var(--glass-thick);
border: 1px solid var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 8px 24px -8px rgba(0,0,0,0.4);
}
/* Text fields read darker than the buttons — clearly "type here" surfaces.
Dropdowns keep the lighter button glass; only typed-into fields darken. */
html.dark :is(.name-input, .io-textarea) {
background: rgb(0 0 0 / 0.25);
}
/* Open dropdown option list — light panel + black text for readability */
html.dark .folder-select option,
html.dark .folder-select optgroup {
background-color: #f4f5f7;
color: #000;
}
/* Section 01 stat inputs — replicate the save-config text fields exactly:
same glass texture, dark fill, border, shadow and typeface. */
html.dark .stat-input input {
background: rgb(0 0 0 / 0.25);
border: 1px solid var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 8px 24px -8px rgba(0,0,0,0.4);
font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
font-size: 12px;
}
html.dark .stat-input input:focus {
outline: none;
border-color: rgb(var(--accent)) !important;
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 0 0 3px rgb(var(--accent) / 0.20) !important;
}
/* Accent glass — primary buttons + selected chips / toggles */
html.dark :is(
.save-btn, .role-chip.active,
.archetype-chip.primary
) {
background: color-mix(in srgb, rgb(var(--accent)) 26%, var(--glass-solid));
border: 1px solid rgb(var(--accent));
color: rgb(var(--accent));
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 0 0 1px rgb(var(--accent) / 0.45),
0 8px 24px -8px rgba(0,0,0,0.4);
}
/* Secondary archetype — softer accent glass */
html.dark .archetype-chip.secondary {
background: color-mix(in srgb, rgb(var(--accent)) 14%, var(--glass-thick));
border: 1px solid rgb(var(--accent) / 0.55);
color: rgb(var(--accent));
}
/* Hover — neutral controls lift to brighter glass */
html.dark :is(
.export-btn, .import-btn, .load-btn, .delete-btn, .folder-delete-btn,
.sq-expand, .info-btn, .compare-slot-remove,
.role-chip, .archetype-chip
):hover {
background: var(--glass-solid);
border-color: var(--glass-stroke-outer);
}
/* Hover — accent controls deepen their tint */
html.dark :is(
.save-btn, .role-chip.active,
.archetype-chip.primary
):hover {
background: color-mix(in srgb, rgb(var(--accent)) 34%, var(--glass-solid));
border-color: rgb(var(--accent));
}
html.dark .archetype-chip.secondary:hover {
background: color-mix(in srgb, rgb(var(--accent)) 22%, var(--glass-thick));
border-color: rgb(var(--accent) / 0.55);
}
/* Focus — accent ring over the glass for text fields */
html.dark :is(.name-input, .folder-select, .io-textarea):focus {
outline: none;
border-color: rgb(var(--accent));
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 0 0 3px rgb(var(--accent) / 0.20);
}
/* Range scrollbar (subtle) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line-strong)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-faint)); }
/* Compare results — guard against wide tables on mobile */
#compareResults { overflow-x: auto; }
/* Hide focus rings on click but keep them for keyboard */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
outline: 2px solid rgb(var(--c-accent) / 0.5);
outline-offset: 2px;
border-radius: 4px;
}
/* ─────────────────────────────────────────────────────────
Unified container — one shared frame at tablet+, replacing
per-section floating cards. Mobile keeps existing cards.
───────────────────────────────────────────────────────── */
.unified-card > section + section,
.unified-card > section + .secondary-stack,
.secondary-stack > .feel-saves-group + .compare-squad-group,
.feel-saves-group > section + section,
.compare-squad-group > section + section {
/* Mobile: replicate previous space-y-5 between separate cards */
margin-top: 1.25rem;
}
@media (min-width: 768px) {
.unified-card {
background: rgb(var(--c-surface) / 0.38);
-webkit-backdrop-filter: blur(32px) saturate(190%);
backdrop-filter: blur(32px) saturate(190%);
border: 1px solid rgb(255 255 255 / 0.55);
border-radius: 1rem;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.7),
inset 0 0 0 1px rgb(255 255 255 / 0.18),
0 1px 2px rgb(20 18 16 / 0.04),
0 18px 48px -12px rgb(20 18 16 / 0.14);
padding: 1.75rem;
}
html.dark .unified-card {
background: rgb(var(--c-surface) / 0.32);
border-color: rgb(255 255 255 / 0.08);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.06),
inset 0 0 0 1px rgb(255 255 255 / 0.03),
0 1px 2px rgb(0 0 0 / 0.3),
0 18px 48px -12px rgb(0 0 0 / 0.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.unified-card { background: rgb(var(--c-surface) / 0.92); }
html.dark .unified-card { background: rgb(var(--c-surface) / 0.92); }
}
/* Strip card chrome from individual sections — they become flat groups */
.unified-card section.card,
.unified-card section.compare-card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Replace per-card spacing with hairline dividers */
.unified-card > section + section,
.unified-card > section + .secondary-stack,
.secondary-stack > .feel-saves-group + .compare-squad-group,
.feel-saves-group > section + section,
.compare-squad-group > section + section {
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid rgb(var(--c-line));
}
/* No hover lift inside the unified frame */
section.card-enter.is-visible:hover {
box-shadow: none;
}
}
@media (min-width: 1024px) {
.unified-card { padding: 2.25rem 2.5rem; }
.unified-card > section + section,
.unified-card > section + .secondary-stack,
.secondary-stack > .feel-saves-group + .compare-squad-group,
.feel-saves-group > section + section,
.compare-squad-group > section + section {
margin-top: 2.25rem;
padding-top: 2.25rem;
}
}
/* Stat input groups — responsive 1/2/3-col grid, no card frames */
.stats-input-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 32px;
}
.stats-input-group { min-width: 0; }
@media (min-width: 768px) {
.stats-input-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px;
}
/* Align tops of grouped sub-headers across columns */
.stats-input-grid > .stats-input-group > .ps-section-label:first-child {
margin-top: 0;
}
}
@media (min-width: 1280px) {
.stats-input-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Feel-layer groups — flat blocks separated by spacing/dividers, no cards */
.feel-layer-grid {
display: grid;
grid-template-columns: 1fr;
row-gap: 0;
}
.feel-layer-grid > .feel-layer-card {
background: transparent;
border: 0;
border-radius: 0;
padding: 14px 0 0;
margin-bottom: 0;
border-top: 1px solid rgb(var(--c-line));
}
.feel-layer-grid > .feel-layer-card:first-child {
border-top: 0;
padding-top: 0;
}
@media (min-width: 768px) {
.feel-layer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
row-gap: 20px;
}
/* Top row in 2-col grid has no top divider */
.feel-layer-grid > .feel-layer-card:nth-child(-n+2) {
border-top: 0;
padding-top: 0;
}
}
/* ─────────────────────────────────────────────────────────
XL-split — split the unified card into two columns: Section
01 (left); Effective Feel + Saves + Compare + Squad stacked
(right). The threshold is set so the right column is always
wide enough for the Squad telemetry tower (~826px) — below
it the site stays single-column rather than clipping it.
───────────────────────────────────────────────────────── */
@media (min-width: 1850px) {
.feel-shell { max-width: 1880px; }
.unified-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 2.5rem;
padding: 2.5rem;
align-items: start;
}
/* secondary-stack is a column now, not a block stacked under Section 01 —
drop the top divider it carries in single-column mode. Selector mirrors
the stacking rule exactly so this override wins on source order. */
.unified-card > section + .secondary-stack {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Left column has room for the full 3-col stats grid at this width */
.stats-input-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ─────────────────────────────────────────────────────────
3-column split — Compare + Squad move into their own third
column. The columns are unequal: Section 01 and the Effective
Feel / Saves column squeeze narrower so the Compare + Squad
column always keeps the width the Squad telemetry tower needs
(~826px). That lets the 3-column view fit ~2450px-wide windows.
───────────────────────────────────────────────────────── */
@media (min-width: 2440px) {
.feel-shell { max-width: 3000px; }
/* Left = Section 01, right (2fr) = the Effective Feel/Saves +
Compare/Squad block. */
.unified-card {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
/* The middle column flexes; the Compare + Squad column is pinned
to at least the Squad tower's width so it never clips. */
.unified-card > .secondary-stack {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(840px, 1fr);
column-gap: 2.5rem;
align-items: start;
}
/* Side-by-side columns now — drop the divider carried in stacked mode.
Selector mirrors the stacking rule exactly so it wins on source order. */
.secondary-stack > .feel-saves-group + .compare-squad-group {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
}
/* Respect reduced motion preference — kill drift, kill blur, shorten everything */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.card-enter { opacity: 1; transform: none; filter: none; }
.hero-line { opacity: 1; transform: none; }
}
/* ─────────────────────────────────────────────────────────
GLASS / DESIGN-SYSTEM OVERRIDES
Tokens come from tokens.css. This block ports the visual
language onto existing markup.
───────────────────────────────────────────────────────── */
/* Section marker — small left accent bar, replaces the AMF1 lime stripe */
.section-marker {
display: inline-block;
width: 3px;
height: 14px;
border-radius: 2px;
background: rgb(var(--accent));
box-shadow: 0 0 10px rgb(var(--accent) / 0.45);
flex-shrink: 0;
}
/* ── Unified card — outer glass shell ── */
.unified-card {
border-radius: 18px !important;
position: relative;
isolation: isolate;
}
html.dark .unified-card {
background: var(--glass-base) !important;
backdrop-filter: blur(var(--blur-base)) saturate(180%);
-webkit-backdrop-filter: blur(var(--blur-base)) saturate(180%);
border: 1px solid var(--glass-stroke-outer) !important;
box-shadow:
inset 0 1px 0 var(--glass-stroke-inner),
inset 0 -1px 0 var(--glass-stroke-shadow),
0 24px 60px -20px rgb(0 0 0 / 0.55),
0 4px 16px -4px rgb(0 0 0 / 0.35) !important;
}
/* Inner section panels (Section 01–05) — no container; the outer
.unified-card is the only visible surface. Padding/margin preserved. */
section.card,
section.compare-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Nested feel-layer cards — also strip the inner container chrome */
.feel-layer-card,
html.dark .feel-layer-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Inputs stay solid + compact. Just align corners and focus to design system. */
.stat-input input, .compare-table input, .save-card { border-radius: 8px !important; }
.stat-input input:focus {
outline: none;
border-color: var(--focus-border) !important;
box-shadow: var(--focus-ring) !important;
}
/* Card titles — small accent marker on the left */
section.card .card-title {
position: relative;
padding-left: 14px;
}
section.card .card-title::before {
content: "";
position: absolute;
left: 0; top: 14%; bottom: 14%;
width: 3px;
border-radius: 2px;
background: rgb(var(--accent));
box-shadow: 0 0 10px rgb(var(--accent) / 0.45);
}
/* Wordmark italic stays on var(--accent) via .text-accent */
.text-accent { color: rgb(var(--accent)) !important; }
/* ── Option pills — base (non-segmented) ── */
.option-btn.active {
background: rgb(var(--accent)) !important;
color: rgb(255 255 255 / 0.96) !important;
border-color: rgb(var(--accent)) !important;
box-shadow: 0 1px 2px rgb(var(--accent) / 0.22) !important;
}
html.dark .option-btn.active {
background: rgb(var(--accent)) !important;
color: rgb(15 15 18) !important;
border-color: rgb(var(--accent)) !important;
}
/* ── Playstyle / Chemistry tiles — keep tile structure, align active styling ── */
.ps-btn { border-radius: 10px !important; }
.ps-btn:hover { border-color: rgb(255 255 255 / 0.55) !important; }
html.dark .ps-btn:hover { background: var(--glass-solid); }
.ps-btn.active {
border-color: rgb(var(--accent)) !important;
background: rgb(var(--accent) / 0.12) !important;
box-shadow:
0 0 0 1px rgb(var(--accent) / 0.35),
0 4px 10px -4px rgb(var(--accent) / 0.40) !important;
}
html.dark .ps-btn {
background: var(--glass-thick);
border-color: var(--glass-stroke-outer);
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 8px 24px -8px rgba(0,0,0,0.4);
}
html.dark .ps-btn.active {
/* Light tinted glass — keeps the raised feel of the unselected state
instead of darkening to a flat colour wash. */
background: color-mix(in srgb, rgb(var(--accent)) 26%, var(--glass-solid)) !important;
border-color: rgb(var(--accent)) !important;
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 0 0 1px rgb(var(--accent) / 0.45),
0 8px 24px -8px rgba(0,0,0,0.4) !important;
}
.ps-btn.active .ps-name { color: rgb(var(--accent)) !important; }
/* Plus state — gold tier. Uses --accent-plus instead of --accent so the
"+" tier reads as a deliberate upgrade, not just a heavier toggle.
Halo: crisp inner gold ring + soft outer bloom, layered over a faint
gold-tinted glass fill. */
.ps-btn.ps-plus {
background: rgb(var(--accent-plus) / 0.16) !important;
border-color: rgb(var(--accent-plus) / 0.85) !important;
box-shadow:
0 0 0 1px rgb(var(--accent-plus) / 0.85),
0 0 14px -2px rgb(var(--accent-plus) / 0.55),
0 0 32px -6px rgb(var(--accent-plus) / 0.45) !important;
}
html.dark .ps-btn.ps-plus {
/* Light gold-tinted glass — same raised glass as the unselected state,
with the gold ring + bloom layered on top (glow unchanged). */
background: color-mix(in srgb, rgb(var(--accent-plus)) 30%, var(--glass-solid)) !important;
border-color: rgb(var(--accent-plus)) !important;
box-shadow:
0 1px 0 0 color-mix(in srgb, white 30%, transparent) inset,
0 -1px 0 0 color-mix(in srgb, black 20%, transparent) inset,
0 0 0 1.5px rgb(var(--accent-plus)),
0 0 16px -2px rgb(var(--accent-plus) / 0.65),
0 0 36px -6px rgb(var(--accent-plus) / 0.55) !important;
}
/* Override the .active name colour rule for plus state — text goes gold. */
.ps-btn.ps-plus .ps-name {
color: rgb(var(--accent-plus)) !important;
font-weight: 600;
text-shadow: 0 0 12px rgb(var(--accent-plus) / 0.45);
}
.ps-btn.ps-plus .ps-effect {
color: rgb(var(--accent-plus) / 0.85) !important;
}
/* ── Playstyle tile icons — base art in off/on, gold art in plus ── */
.ps-btn.has-ps-icon {
position: relative;
padding-right: 48px;
}
.ps-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
object-fit: contain;
pointer-events: none;
}
.ps-icon-plus { display: none; }
.ps-btn.ps-plus .ps-icon-base { display: none; }
.ps-btn.ps-plus .ps-icon-plus { display: block; }
/* ── Semantic stat tiers — magenta <85 · amber 85-99 · green 100-114 ·
cyan 115+. Applied to effective feel stat bars + compare-players bars. ── */
.stat-bar-effective.tier-magenta,
.compare-bar.tier-magenta { background: var(--tier-magenta); box-shadow: 0 0 8px color-mix(in srgb, var(--tier-magenta) 55%, transparent); }
.stat-bar-effective.tier-amber,
.compare-bar.tier-amber { background: var(--tier-amber); box-shadow: 0 0 8px color-mix(in srgb, var(--tier-amber) 55%, transparent); }
.stat-bar-effective.tier-green,
.compare-bar.tier-green { background: var(--tier-green); box-shadow: 0 0 8px color-mix(in srgb, var(--tier-green) 55%, transparent); }
.stat-bar-effective.tier-cyan,
.compare-bar.tier-cyan { background: var(--tier-cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--tier-cyan) 55%, transparent); }
/* ── Radar category dots — unified to accent ── */
.radar-card.layer-movement .radar-title-dot,
.radar-card.layer-passing .radar-title-dot,
.radar-card.layer-defending .radar-title-dot,
.radar-card.layer-shooting .radar-title-dot,
.radar-card.layer-saves .radar-title-dot { background: rgb(var(--accent)) !important; }
/* Tenacity label loses warn-gold (was AMF1-themed) */
.tenacity-label { color: rgb(var(--c-ink-soft)) !important; }
/* ── Theme toggle — primary-style glass pill ── */
#themeToggle {
padding: 9px 16px;
border-radius: 999px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(var(--c-ink));
background: rgb(255 255 255 / 0.06);
border: 1px solid var(--glass-stroke-outer);
transition: background 220ms ease, transform 160ms cubic-bezier(0.34, 1.4, 0.4, 1), border-color 220ms ease;
cursor: pointer;
line-height: 1;
}
#themeToggle:hover {
background: rgb(255 255 255 / 0.10);
border-color: rgb(var(--accent) / 0.45);
transform: translateY(-1px);
}
#themeToggle:active { transform: translateY(0) scale(0.97); }
#themeToggle .theme-toggle-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgb(var(--accent));
box-shadow: 0 0 8px rgb(var(--accent) / 0.65);
display: inline-block;
}
/* ── Scrollbar — neutral track, accent thumb on hover ── */
html.dark ::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.02); }
html.dark ::-webkit-scrollbar-thumb {
background: rgb(255 255 255 / 0.10);
border-radius: 999px;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent) / 0.45); }
/* Number readouts a touch tighter */
.num, [class*="num"], input[type="number"] {
font-feature-settings: 'tnum', 'zero';
}
/* Wordmark / hero — adopt design-system display weight in dark mode */
html.dark h1.font-display { font-weight: 300; letter-spacing: -0.03em; }
html.dark h1.font-display .italic { font-weight: 300; }
/* ════════════════════════════════════════════════════════════
PERFORMANCE — layout/paint containment
────────────────────────────────────────────────────────────
`contain: layout` turns each repeated block into its own
layout boundary: a change inside one row/card/tile no longer
forces the browser to re-run layout for its siblings or walk
back up the tree. It is purely a rendering hint — geometry,
paint output and behaviour are unchanged, and (unlike
`contain: size` / `content-visibility`) it does NOT affect the
scrollHeight the collapsible animations measure.
`paint` is only added to `.stat-bar-wrap`, which already clips
its overflow — so nothing visible is ever cropped.
NOTE: `content-visibility: auto` is deliberately NOT used here.
Almost every list/section sits inside a collapsible whose open
animation measures `scrollHeight`; content-visibility reports
an intrinsic placeholder size for offscreen content, which
would corrupt those measurements and break the open/close
animation. Containment delivers the invalidation-scoping win
without that hazard.
════════════════════════════════════════════════════════════ */
.card,
.compare-card,
.feel-layer-card,
.stat-row,
.sub-stat-row,
.breakdown-item,
.ps-btn,
.option-btn,
.saved-player,
.folder-group,
.sq-row,
.radar-card,
.compare-slot,
.collapsible-body,
.folder-contents,
.unified-card {
contain: layout;
}
.stat-bar-wrap { contain: layout paint; }
/* Singleton info overlay — promote so show/hide composites cleanly */
.info-bubble { will-change: opacity, transform; }
/* ════════════════════════════════════════════════════════════
PERFORMANCE — backdrop-filter
────────────────────────────────────────────────────────────
Dark mode previously gave ~215 interior controls (playstyle
tiles, inputs, chips, info buttons, save/folder controls,
segmented rails, theme toggle) their own `backdrop-filter`.
Every one is a separate GPU blur pass: the compositor cannot
cheaply cache that many stacked filter layers (idle CPU stays
high), and scrolling slides them all across the fixed
atmosphere so each re-blurs every frame (dropped scroll FPS).
They have been removed. Those controls sit ON the
`.unified-card`, which is itself a heavy frosted surface
(`backdrop-filter: blur(28px)`) — so a per-control blur was a
second blur of an already-smooth backdrop, visually redundant.
The controls keep their translucent fills, borders and inset
highlights, so they still read as glass.
`backdrop-filter` is intentionally KEPT on `.unified-card`
(and the mobile `.card`) — that single frosted panel is the
core of the visual language and one blur pass is cheap.
════════════════════════════════════════════════════════════ */