:root {
	--gold: #ffd43b; --gold-2: #fab005; --ink: #070a12;
	--glass: rgba(10, 14, 30, .58); --line: rgba(255, 255, 255, .12); --muted: #9aa4b2;
	--common: #9aa4b2; --rare: #4dabf7; --epic: #b07cff; --legendary: #ff9d3c;
	--panel: 0px; --hud: 84px; --tick: 34px; --bar: 76px;
}
@media (min-width: 960px) { :root { --panel: 324px; } }

* { box-sizing: border-box; }
html, body {
	margin: 0; height: 100%; overflow: hidden;
	background: var(--ink); color: #eef1f7;
	font-family: "Inter", system-ui, sans-serif;
	-webkit-tap-highlight-color: transparent;
	user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 700 .75em "Inter", sans-serif; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.1); border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.track { animation: none !important; }
}

:root { --mythic: #ff4dd2; }