/* trivela // free-kick lab — standalone shell. Tokens mirror the mainframe. */
:root {
  --bg: #0a0708; --bg-2: #110b0d; --surface: #150c0f;
  --ink: #f6ece9; --ink-soft: #ddccc9; --ink-dim: #9c8884;
  --blood: #e0102f; --blood-bright: #ff2f47; --blood-deep: #5c0a14;
  --hairline: #2c171a; --ok: #3fcf8e; --glow-rgb: 224, 16, 47; --on-blood: #fff;
  --display: "Syne", "Arial Black", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
}
[data-theme="amber"] {
  --bg: #0b0803; --bg-2: #120d04; --surface: #140f05;
  --ink: #fdeccb; --ink-soft: #e7cfa3; --ink-dim: #a48d5f;
  --blood: #ffb000; --blood-bright: #ffd35c; --blood-deep: #4d3300;
  --hairline: #33270f; --glow-rgb: 255, 176, 0; --on-blood: #1a1200;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink-soft); font-family: var(--mono);
  font-size: 14px; overflow: hidden; -webkit-font-smoothing: antialiased;
}
.dim { color: var(--ink-dim); } b { color: var(--ink); font-weight: 600; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blood); color: #120406; }

.scanlines, .grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.scanlines { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); opacity: .5; mix-blend-mode: overlay; }
.grain { inset: -50%; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { background: radial-gradient(120% 90% at 50% -10%, rgba(var(--glow-rgb),.10), transparent 55%), radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.6), transparent 60%); }

.app { position: relative; z-index: 2; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.bar__brand { font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.bar__brand .dim { font-family: var(--mono); font-weight: 400; }
.bar__right { display: flex; gap: .5rem; }
.bar__btn { font-size: .76rem; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 6px; padding: .28rem .5rem; background: var(--surface); cursor: pointer; }
.bar__btn:hover { border-color: rgba(var(--glow-rgb),.6); color: var(--ink); }

.stage { padding: clamp(.6rem, 2vw, 1.4rem); min-height: 0; }
.stage trivela-game { display: block; width: 100%; height: 100%; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 80px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--glow-rgb),.12); }
.foot { padding: .5rem 1rem; border-top: 1px solid var(--hairline); font-size: .78rem; text-align: center; background: var(--bg-2); }

@media (max-width: 560px) { .bar__btn:not(#theme) { display: none; } }