/* Carry scene theme: stage primitives, skins (palettes), typography and the shared components from scenes/lib.js.
   Template modules add their own CSS files (scenes/<module>.css), prefixed with their module name. */
@import url("/fonts/fonts.css");
@import url("./core.css");

:root {
  --f-hook: 'Archivo', 'Inter Tight', system-ui, sans-serif;
  --f-epic: 'Unbounded', 'Archivo', system-ui, sans-serif;
  --f-hud: 'Chakra Petch', 'Inter Tight', system-ui, sans-serif;
  --f-ui: 'Inter Tight', system-ui, sans-serif;
  --ally: #3BA7FF; --enemy: #FF3B5C; --neutral: #B9A6FF; --you: #FFD166;
}

/* ---------- stage primitives (engine/kit.js expects these) ---------- */
.cy-stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; overflow: hidden; overflow: clip; background: var(--bg1); color: var(--ink); font-family: var(--f-ui); }
.cy-stage .layer { position: absolute; inset: 0; }
.cy-stage .abs { position: absolute; }
.cy-stage .anchor { position: absolute; width: 0; height: 0; }
.cy-stage .ctr { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: max-content; }
.cy-stage .scene { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 50% 45%; }
.cy-stage .kw { display: inline-block; }
.cy-stage .sl-line { padding-bottom: .06em; }
.cy-stage .lot svg { display: block; }
.cy-stage img.art3d { display: block; object-fit: contain; }
.cy-stage .punch-word { color: var(--ink); font-family: var(--f-hook); font-weight: 900; font-stretch: 75%; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0,0,0,.45); }
.cy-stage .punch-echo { font-family: var(--f-hook); font-weight: 900; font-stretch: 75%; text-transform: uppercase; }
.cy-stage button { font-family: var(--f-ui); }

/* ---------- skins ---------- */
.sk-hextech  { --bg1:#0B0B0F; --bg2:#1C1420; --ink:#FAFAF7; --sub:#A3A3AD; --accent:#FF5A36; --accent2:#FF2E7E; --hot:#FFD166; --card:#1A161E; --line:#33293A; --on-accent:#FFFFFF; --glow: rgba(255,90,54,.40); }
.sk-gold     { --bg1:#0E0907; --bg2:#2A160C; --ink:#FFF6EC; --sub:#C4A893; --accent:#FF8A3D; --accent2:#FFD166; --hot:#FF2E7E; --card:#24150D; --line:#4A2E1C; --on-accent:#1A0D05; --glow: rgba(255,138,61,.42); }
.sk-blood    { --bg1:#120509; --bg2:#33081A; --ink:#FFF0F3; --sub:#D79AAE; --accent:#FF2E7E; --accent2:#FF5A36; --hot:#FFD166; --card:#2E0A18; --line:#5C1530; --on-accent:#FFFFFF; --glow: rgba(255,46,126,.45); }
.sk-blueprint{ --bg1:#090B12; --bg2:#141A28; --ink:#EEF1F8; --sub:#98A2B8; --accent:#FF5A36; --accent2:#FFD166; --hot:#FF2E7E; --card:#161D2C; --line:#2A3448; --on-accent:#FFFFFF; --glow: rgba(255,90,54,.32); }
.sk-volt     { --bg1:#FAFAF7; --bg2:#EFEBE3; --ink:#0B0B0F; --sub:#5D5A63; --accent:#FF5A36; --accent2:#FF2E7E; --hot:#FF2E7E; --card:#FFFFFF; --line:#0B0B0F; --on-accent:#FFFFFF; --glow: rgba(255,90,54,.25); }
.sk-ocean    { --bg1:#FF2E7E; --bg2:#C81E6A; --ink:#FFFFFF; --sub:#FFE0EC; --accent:#FFD166; --accent2:#FFFFFF; --hot:#FFD166; --card:#FFFFFF; --line:#FFFFFF; --on-accent:#3A0A1E; --glow: rgba(255,209,102,.40); }
.sk-violet   { --bg1:#FF5A36; --bg2:#FF8A3D; --ink:#1A0B07; --sub:#4A1E10; --accent:#FFFFFF; --accent2:#2A0E07; --hot:#FF2E7E; --card:#FFF4EA; --line:#1A0B07; --on-accent:#1A0B07; --glow: rgba(255,255,255,.45); }
.sk-ember    { --bg1:#FF5A36; --bg2:#FF2E7E; --ink:#FFFFFF; --sub:#FFE3DA; --accent:#FFD166; --accent2:#0B0B0F; --hot:#0B0B0F; --card:#FFFFFF; --line:#FFFFFF; --on-accent:#0B0B0F; --glow: rgba(255,209,102,.45); }
.sk-paper    { --bg1:#FAFAF7; --bg2:#F1ECE3; --ink:#0B0B0F; --sub:#5D5A63; --accent:#FF5A36; --accent2:#2E2833; --hot:#FF2E7E; --card:#FFFFFF; --line:#0B0B0F; --on-accent:#FFFFFF; --glow: rgba(255,90,54,.25); }
.sk-night    { --bg1:#0B0912; --bg2:#1E1530; --ink:#F6F2FF; --sub:#B3A8CC; --accent:#FF2E7E; --accent2:#FF8A3D; --hot:#FFD166; --card:#1C1430; --line:#3A2C55; --on-accent:#FFFFFF; --glow: rgba(255,46,126,.40); }

/* ---------- backdrop (scenes/index.js paint) ---------- */
.cy-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 70% at 50% 18%, var(--bg2), var(--bg1) 72%); }
.cy-bg .grain { display: none; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>"); pointer-events: none; }
.cy-bg .vig { position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.cy-bg .hex { position: absolute; inset: -10%; opacity: .16; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'><path d='M30 2h60l28 50-28 50H30L2 52z' fill='none' stroke='%23FF5A36' stroke-width='1.4'/></svg>"); background-size: 120px 104px; -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 55% at 50% 30%, #000 10%, transparent 75%); }
.cy-bg .grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.cy-bg .grid.fine { opacity: .1; }
.cy-bg .glowA, .cy-bg .glowB { position: absolute; border-radius: 50%; opacity: .6; }
.cy-bg .glowA { width: 900px; height: 900px; left: -260px; top: -260px; background: radial-gradient(circle, var(--glow), transparent 68%); }
.cy-bg .glowB { width: 800px; height: 800px; right: -300px; bottom: 160px; background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 40%, transparent), transparent 68%); }
.cy-bg .blob { position: absolute; border-radius: 46% 54% 41% 59% / 52% 44% 56% 48%; opacity: .7; }
.cy-bg .paper { position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(0deg, transparent 0 63px, rgba(36,22,217,.12) 63px 65px); }
@keyframes cyDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(120px, 80px) scale(1.12); } }
@keyframes cyFloat { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(40px,-30px) rotate(12deg); } }
.cy-still .cy-bg * { animation: none !important; }

/* ---------- typography ---------- */
.cy-stage .f-hook { font-family: var(--f-hook); font-weight: 900; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.005em; }
.cy-stage .f-wide { font-family: var(--f-hook); font-weight: 900; font-stretch: 125%; text-transform: uppercase; }
.cy-stage .f-epic { font-family: var(--f-epic); font-weight: 700; letter-spacing: -.01em; }
.cy-stage .f-num { font-family: var(--f-hook); font-weight: 900; font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.cy-stage .f-hud { font-family: var(--f-hud); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cy-stage .f-ui { font-family: var(--f-ui); font-weight: 700; }
.cy-stage em { font-style: normal; }
.cy-stage em.c-acc { color: var(--accent); }
.cy-stage em.c-num { color: var(--accent2); }

/* ---------- shared components ---------- */
.cy-kick { display: flex; align-items: center; gap: 16px; justify-content: center; font-family: var(--f-hud); font-weight: 700; font-size: 42px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.cy-kick.left { justify-content: flex-start; }
.cy-kick i { width: 18px; height: 18px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 18px var(--glow); flex: none; }
.cy-title { color: var(--ink); }
.cy-title .ln { overflow: hidden; padding: .04em 0 .1em; margin-bottom: -.12em; }
.cy-title .ln > div { display: inline-block; white-space: nowrap; }
.cy-title.f-epic { text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.cy-para { color: var(--sub); font-family: var(--f-ui); }
.cy-para div { white-space: nowrap; }
.cy-num { font-family: var(--f-hook); font-weight: 900; font-stretch: 87.5%; font-variant-numeric: tabular-nums; color: var(--accent); line-height: .9; white-space: nowrap; text-shadow: 0 0 60px var(--glow); }
.cy-stamp { font-family: var(--f-hook); font-weight: 900; font-stretch: 75%; letter-spacing: .02em; padding: .04em .28em .02em; border: .07em solid; border-radius: .14em; line-height: 1; white-space: nowrap; background: color-mix(in srgb, var(--bg1) 35%, transparent); box-shadow: inset 0 0 0 .025em currentColor; mix-blend-mode: normal; }
.cy-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 999px; font-family: var(--f-hud); font-weight: 700; font-size: 38px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #fff; background: color-mix(in srgb, var(--cc, var(--accent)) 22%, rgba(5,10,22,.82)); border: 3px solid var(--cc, var(--accent)); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.cy-ping { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); color: #fff; font-family: var(--f-hook); font-weight: 900; box-shadow: 0 0 0 6px rgba(0,0,0,.35), 0 0 40px var(--pc); }
.cy-ping span { transform: translateY(2%); }
.cy-pring { border: 6px solid; border-radius: 50%; pointer-events: none; }
.cy-ci, .cy-ii, .cy-ai, .cy-ri { position: relative; flex: none; }
.cy-ci > *, .cy-ii > *, .cy-ai > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.cy-ci img, .cy-ii img, .cy-ai img { object-fit: cover; display: block; }
.cy-ci.round, .cy-ci.round > * { border-radius: 50%; }
.cy-ci.sq, .cy-ci.sq > * { border-radius: 18%; }
.cy-ci { box-shadow: 0 0 0 var(--ring, 0px) var(--rc), 0 10px 30px rgba(0,0,0,.45); border-radius: 50%; }
.cy-ci.sq { border-radius: 18%; }
.cy-ci.glow { box-shadow: 0 0 0 var(--ring, 0px) var(--rc), 0 0 50px var(--rc), 0 10px 30px rgba(0,0,0,.45); }
.cy-ii, .cy-ii > * { border-radius: 16%; }
.cy-ii { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 70%, #000), 0 10px 26px rgba(0,0,0,.45); }
.cy-ai, .cy-ai > * { border-radius: 14%; }
.cy-ai { box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.45); }
.cy-ai b { position: absolute; inset: auto -10px -12px auto; width: auto; height: auto; min-width: 46px; padding: 4px 10px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-family: var(--f-hud); font-size: 26px; line-height: 1; text-align: center; }
.cy-ri img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); }
.mono { display: grid; place-items: center; color: #fff; font-family: var(--f-hook); font-weight: 900; }
.cy-splash { overflow: hidden; background: var(--bg2); }
.cy-splash img, .cy-splash .mono { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cy-e { display: grid; place-items: center; font-family: 'Noto Color Emoji', sans-serif; line-height: 1; }
.cy-sweep { position: absolute; top: 0; bottom: 0; width: 40%; left: 0; pointer-events: none; }
.cy-ico { display: inline-grid; place-items: center; flex: none; }
.cy-ico svg { width: 100%; height: 100%; display: block; }
.cy-card { background: var(--card); border-radius: 36px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cy-glass { background: color-mix(in srgb, var(--card) 70%, transparent); border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* lite mode (slow phones, html.lite): no decorative blur, glow layers or embers */
.lite .cy-bg .hex, .lite .cy-bg .glowB, .lite .cy-bg .grain { display: none; }
.lite .cy-stage .chap-ember { display: none; }
.lite .cy-stage .ch-blur > img, .lite .cy-stage .ch-blur > .ch-artmono { filter: saturate(1.1) brightness(.8); }
.lite .cy-stage .te-tbg img { filter: brightness(.35); }