:root {
  --ink: #07131d;
  --panel: #0d2230;
  --panel-2: #123247;
  --muted: #9bb2c2;
  --paper: #f7fbff;
  --cyan: #19d8e8;
  --cyan-deep: #00a8be;
  --lime: #9bf43c;
  --green: #51df75;
  --purple: #9346db;
  --pink: #ff4c94;
  --yellow: #ffd84f;
  --red: #ff6363;
  --border: rgba(255,255,255,.13);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--paper); font-family: "DM Sans", system-ui, sans-serif; background: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
.shell { min-height: 100vh; background: radial-gradient(circle at 90% 0%, rgba(25,216,232,.18), transparent 31%), radial-gradient(circle at 0% 60%, rgba(147,70,219,.18), transparent 35%), var(--ink); }
.shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image: linear-gradient(rgba(25,216,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(25,216,232,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.topbar { position: sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding: 12px clamp(18px,4vw,56px); background:rgba(7,19,29,.9); backdrop-filter: blur(16px); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; font-size:1.28rem; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--ink); font-family:"Space Mono",monospace; background:linear-gradient(135deg,var(--lime),var(--cyan)); box-shadow:0 0 28px rgba(25,216,232,.28); }
.brand-mark { font-size:.78rem; }
.nav-actions { display:flex; gap:8px; align-items:center; }
.nav-link { border:0; border-radius:10px; padding:10px 14px; color:var(--muted); background:transparent; font-weight:700; }
.nav-link.active,.nav-link:hover { color:white; background:rgba(255,255,255,.08); }
.container { position:relative; z-index:1; width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; }
.eyebrow { margin:0 0 10px; color:var(--cyan); font:700 .82rem/1 "Space Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:820px; margin-bottom:14px; font-size:clamp(2.3rem,6vw,4.8rem); line-height:.96; letter-spacing:-.06em; }
h2 { font-size:clamp(1.65rem,3vw,2.45rem); letter-spacing:-.04em; }
h3 { letter-spacing:-.025em; }
.lede { max-width:690px; color:#c8d6df; font-size:clamp(1rem,2vw,1.18rem); line-height:1.65; }
.hero-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:30px; align-items:end; margin-bottom:42px; }
.hero-console { position:relative; overflow:hidden; min-height:220px; padding:24px; border:1px solid rgba(155,244,60,.3); border-radius:var(--radius); background:linear-gradient(180deg,rgba(7,36,30,.96),rgba(3,16,14,.98)); box-shadow:var(--shadow), inset 0 0 50px rgba(81,223,117,.06); font-family:"Space Mono",monospace; color:var(--green); }
.hero-console::after,.terminal::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 4px); }
.console-title { color:white; font-weight:700; margin-bottom:20px; }
.console-line { margin:8px 0; font-size:.86rem; }
.console-line::before { content:"> "; color:var(--lime); }
.cursor { display:inline-block; width:9px; height:1em; vertical-align:-2px; background:var(--lime); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.stat { padding:12px; border:1px solid rgba(155,244,60,.2); border-radius:10px; background:rgba(155,244,60,.06); }
.stat strong { display:block; color:white; font-size:1.15rem; }
.stat span { color:#83a597; font-size:.7rem; }
.section-head { display:flex; gap:20px; align-items:end; justify-content:space-between; margin: 32px 0 18px; }
.section-head h2 { margin-bottom:0; }
.section-head p { margin-bottom:3px; color:var(--muted); }
.game-mode-section { margin-bottom:42px; scroll-margin-top:92px; }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.mode-card { display:grid; grid-template-rows:170px 1fr; min-height:350px; padding:0; overflow:hidden; text-align:left; border:1px solid var(--border); border-radius:22px; color:white; background:linear-gradient(145deg,rgba(18,50,71,.98),rgba(10,30,43,.98)); box-shadow:0 14px 32px rgba(0,0,0,.22); transition:transform .18s,border-color .18s,box-shadow .18s; }
.mode-card:hover { border-color:rgba(25,216,232,.6); transform:translateY(-2px); }
.mode-card.selected { border-color:var(--lime); box-shadow:0 0 0 3px rgba(155,244,60,.13),0 12px 30px rgba(0,0,0,.22); }
.mode-art { position:relative; display:block; min-width:0; overflow:hidden; background-image:linear-gradient(to top,rgba(7,19,29,.84),transparent 58%),var(--mode-art); background-position:center; background-size:cover; }
.mode-art::after { content:""; position:absolute; inset:0; border-bottom:1px solid rgba(255,255,255,.16); box-shadow:inset 0 -35px 45px rgba(3,10,17,.35); }
.mode-art > small { position:absolute; z-index:2; right:14px; bottom:13px; color:#fff; font:800 .65rem "Space Mono",monospace; letter-spacing:.06em; text-shadow:0 2px 8px #000; text-transform:uppercase; }
.mode-icon { position:absolute; z-index:3; left:14px; bottom:12px; display:grid; place-items:center; width:56px; height:56px; border:2px solid rgba(255,255,255,.58); border-radius:17px; color:var(--ink); background:linear-gradient(135deg,var(--lime),var(--cyan)); box-shadow:0 10px 25px rgba(0,0,0,.3); font-size:1.8rem; }
.mode-copy { display:block; padding:19px 20px 22px; }
.mode-card strong,.mode-card small,.mode-card em { display:block; }
.mode-card strong { margin-bottom:7px; font-size:1.25rem; }
.mode-card small { color:#bdd0da; font-size:.92rem; line-height:1.45; }
.mode-card em { margin-top:11px; color:var(--cyan); font:700 .72rem "Space Mono",monospace; font-style:normal; text-transform:uppercase; }
.bank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bank-card { position:relative; overflow:hidden; min-height:230px; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,rgba(18,50,71,.98),rgba(10,30,43,.98)); box-shadow:0 10px 24px rgba(0,0,0,.12); transition:transform .18s,border-color .18s; }
.bank-card:hover { transform:translateY(-3px); border-color:rgba(25,216,232,.55); }
.bank-num { display:grid; place-items:center; width:54px; height:54px; margin-bottom:22px; border-radius:15px; color:var(--ink); background:var(--accent,var(--cyan)); font:700 1.15rem "Space Mono",monospace; transform:rotate(-3deg); }
.bank-card h3 { margin-bottom:8px; font-size:1.28rem; }
.bank-card p { min-height:48px; color:var(--muted); line-height:1.5; }
.standard { display:inline-flex; padding:5px 8px; border-radius:7px; color:#dbe8ef; background:rgba(255,255,255,.07); font:700 .7rem "Space Mono",monospace; }
.bank-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 18px; border:0; border-radius:11px; color:var(--ink); background:linear-gradient(135deg,var(--cyan),#6bf4ea); box-shadow:0 7px 0 #007f91; font-weight:800; text-decoration:none; transition:transform .12s,box-shadow .12s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 9px 0 #007f91; }
.btn:active { transform:translateY(5px); box-shadow:0 2px 0 #007f91; }
.btn.secondary { color:white; background:#263f50; box-shadow:0 5px 0 #122633; }
.btn.purple { color:white; background:linear-gradient(135deg,var(--purple),#c35cf0); box-shadow:0 7px 0 #5d238d; }
.btn.green { background:linear-gradient(135deg,var(--lime),var(--green)); box-shadow:0 7px 0 #3a993f; }
.btn.danger { color:white; background:var(--red); box-shadow:0 5px 0 #a93333; }
.btn.compact { min-height:38px; padding:0 14px; box-shadow:0 4px 0 #3a993f; font-size:.84rem; }
.btn.danger.compact { box-shadow:0 4px 0 #a93333; }
.icon-btn { width:44px; height:44px; border:1px solid var(--border); border-radius:11px; color:white; background:rgba(255,255,255,.07); }
.builder { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr); gap:24px; align-items:start; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:rgba(13,34,48,.94); box-shadow:var(--shadow); }
.card-pad { padding:24px; }
.back { display:inline-flex; align-items:center; gap:7px; margin-bottom:22px; padding:0; border:0; color:var(--cyan); background:none; font-weight:800; }
.builder-title { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.builder-title h1 { margin-bottom:8px; font-size:clamp(2rem,4vw,3.3rem); }
.count-pill { flex:none; padding:9px 12px; border-radius:999px; color:var(--ink); background:var(--lime); font:700 .78rem "Space Mono",monospace; }
.tool-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.search { flex:1; min-width:220px; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:11px; color:white; background:#071923; outline:none; }
.search:focus,.field:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(25,216,232,.16); }
.question-list { display:grid; gap:9px; max-height:620px; overflow:auto; padding-right:6px; }
.question-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.035); }
.question-row:has(input:checked) { border-color:rgba(155,244,60,.42); background:rgba(155,244,60,.06); }
.question-row input { width:19px; height:19px; accent-color:var(--lime); }
.question-row p { margin:0; line-height:1.35; }
.question-row small { color:var(--muted); font-family:"Space Mono",monospace; }
.config { position:sticky; top:92px; }
.config h3 { margin-bottom:20px; font-size:1.35rem; }
.chosen-mode { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding:12px; border:1px solid rgba(155,244,60,.25); border-radius:12px; background:rgba(155,244,60,.06); }
.chosen-mode > span { font-size:1.8rem; }
.chosen-mode small,.chosen-mode strong { display:block; }
.chosen-mode small { margin-bottom:3px; color:var(--muted); font:700 .67rem "Space Mono",monospace; }
.setting { margin:18px 0; }
.setting label { display:block; margin-bottom:8px; color:#cfe0e9; font-weight:700; }
.setting small { display:block; margin-top:7px; color:var(--muted); line-height:1.4; }
.field { width:100%; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; color:white; background:#071923; outline:none; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.segmented button { min-height:40px; border:1px solid var(--border); border-radius:9px; color:var(--muted); background:#071923; font-weight:800; }
.segmented button.active { color:var(--ink); background:var(--lime); border-color:var(--lime); }
.check-line { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:15px 0; color:#d7e4eb; }
.switch { position:relative; width:46px; height:26px; border:0; border-radius:999px; background:#304a5a; }
.switch::after { content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:white; transition:left .16s; }
.switch.on { background:var(--cyan-deep); }
.switch.on::after { left:24px; }
.launch { width:100%; margin-top:12px; }
.empty-note { padding:18px; color:var(--muted); text-align:center; border:1px dashed var(--border); border-radius:12px; }
.join-shell,.lobby-shell,.game-shell { min-height:100vh; display:grid; place-items:center; padding:28px 16px; background:radial-gradient(circle at top,rgba(25,216,232,.25),transparent 40%),linear-gradient(145deg,#0b2835,#07131d 68%); }
.join-card { width:min(520px,100%); padding:30px; text-align:center; border:1px solid rgba(25,216,232,.3); border-radius:24px; background:rgba(8,26,37,.96); box-shadow:var(--shadow); }
.join-card .brand { justify-content:center; margin-bottom:30px; }
.join-card h1 { margin:0 auto 12px; font-size:clamp(2rem,8vw,3.6rem); }
.join-card p { color:var(--muted); }
.join-form { display:grid; gap:12px; margin-top:25px; }
.join-form .field { height:54px; text-align:center; font-size:1.1rem; }
.join-form .btn { height:54px; }
.mode-link { margin-top:20px; border:0; color:var(--cyan); background:none; font-weight:800; }
.lobby { width:min(1000px,100%); }
.lobby-code { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:25px 30px; border-radius:20px 20px 0 0; color:white; background:linear-gradient(100deg,#732da8,var(--purple)); }
.qr { display:grid; place-items:center; width:86px; height:86px; border-radius:9px; color:var(--ink); background:white; font:700 .68rem "Space Mono",monospace; }
.code { font:700 clamp(2.6rem,8vw,5.8rem)/1 "Space Mono",monospace; letter-spacing:.06em; }
.lobby-main { min-height:430px; padding:34px; border:1px solid var(--border); border-top:0; border-radius:0 0 20px 20px; background:rgba(13,34,48,.95); }
.lobby-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.lobby-head h2 { margin:0; }
.players { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.player { padding:18px; text-align:center; border:1px solid rgba(25,216,232,.28); border-radius:14px; background:rgba(25,216,232,.07); }
.avatar { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 10px; border-radius:16px; color:var(--ink); background:linear-gradient(135deg,var(--lime),var(--cyan)); font:700 1.25rem "Space Mono",monospace; }
.waiting { min-height:300px; display:grid; place-items:center; text-align:center; }
.pulse { width:84px; height:84px; margin:0 auto 22px; border:2px solid var(--cyan); border-radius:50%; box-shadow:0 0 0 0 rgba(25,216,232,.6); animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 28px rgba(25,216,232,0); } 100% { box-shadow:0 0 0 0 rgba(25,216,232,0); } }
.game-shell { place-items:stretch; padding:0; background:#030709; }
.game-top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; padding:0 22px; border-bottom:1px solid #173828; background:#06130d; font-family:"Space Mono",monospace; }
.game-name { color:var(--green); font-weight:700; }
.game-stats { display:flex; align-items:center; gap:18px; color:var(--green); }
.sound-toggle { position:relative; z-index:40; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 12px; border:1px solid rgba(155,244,60,.38); border-radius:999px; color:#dfffe6; background:rgba(81,223,117,.09); font:700 .75rem "Space Mono",monospace; white-space:nowrap; }
.sound-toggle:hover { border-color:var(--lime); background:rgba(81,223,117,.17); }
.sound-toggle:focus-visible { outline:3px solid rgba(25,216,232,.55); outline-offset:2px; }
.sound-toggle[aria-pressed="true"] { color:var(--muted); border-color:var(--border); background:rgba(255,255,255,.05); }
.lobby-sound-row { display:flex; justify-content:center; margin-top:24px; }
.question-stage { position:relative; isolation:isolate; display:flex; flex:1; flex-direction:column; min-height:calc(100vh - 64px); padding:clamp(22px,5vw,58px); overflow:hidden; background:radial-gradient(circle at 50% 20%,rgba(24,104,61,.18),transparent 32%),repeating-linear-gradient(0deg,rgba(81,223,117,.025) 0 1px,transparent 1px 4px),#030907; }
.cyber-question-stage { background-image:linear-gradient(180deg,rgba(4,8,30,.46),rgba(3,7,18,.82) 65%,#030709 100%),url('/assets/scenes/cyber-arena.jpg'); background-position:center; background-size:cover; }
.cyber-top { border-color:#244b78; background:#07152b; }
.cyber-top .game-name,.cyber-top .game-stats { color:#6ff4ff; }
.question-card { position:relative; z-index:2; width:min(920px,100%); margin:clamp(42px,8vh,78px) auto 24px; padding:clamp(20px,4vw,34px); border:1px solid rgba(255,255,255,.22); border-radius:22px; background:rgba(5,13,27,.82); box-shadow:0 18px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(12px); }
.question-card .question { margin:18px auto 0; }
.standard-tag { align-self:flex-start; padding:7px 10px; border:1px solid #245835; border-radius:7px; color:#7ebc8c; font:700 .72rem "Space Mono",monospace; }
.question { max-width:900px; margin:clamp(40px,8vh,90px) auto 36px; text-align:center; color:#f2fff5; font-size:clamp(1.65rem,4vw,3rem); line-height:1.18; }
.answers { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; }
.answer { min-height:126px; padding:20px; border:1px solid #2c6840; border-radius:13px; color:#eaffef; background:linear-gradient(150deg,#143b24,#0b2315); box-shadow:0 6px 0 #06150b; font-size:clamp(1rem,2vw,1.25rem); font-weight:700; }
.answer:hover { border-color:var(--lime); background:#194d2b; }
.answer.correct { background:#2c9c45; border-color:var(--lime); }
.answer.wrong { background:#71312f; border-color:var(--red); }
.scene-guide { position:absolute; z-index:4; top:18px; left:clamp(18px,4vw,50px); display:flex; align-items:center; gap:11px; max-width:min(420px,calc(100% - 36px)); padding:9px 14px 9px 9px; border:1px solid rgba(105,232,255,.34); border-radius:999px; background:rgba(6,15,34,.87); box-shadow:0 10px 30px rgba(0,0,0,.25); backdrop-filter:blur(12px); }
.guide-face { display:grid; flex:none; place-items:center; width:45px; height:45px; border-radius:50%; background:linear-gradient(145deg,#d7fbff,#4fc9e2); box-shadow:0 0 20px rgba(105,232,255,.25); font-size:1.65rem; }
.scene-guide small,.scene-guide strong { display:block; }
.scene-guide small { margin-bottom:2px; color:#70eafa; font:800 .63rem "Space Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.scene-guide strong { color:#f7fbff; font-size:.83rem; line-height:1.25; }
.cafe-guide { border-color:rgba(255,199,102,.45); background:rgba(45,26,13,.9); }
.cafe-guide .guide-face { background:linear-gradient(145deg,#ffe3b2,#e88f48); }
.cafe-guide small { color:#ffc766; }
.tower-guide { border-color:rgba(185,147,255,.5); background:rgba(21,18,51,.91); }
.tower-guide .guide-face { background:linear-gradient(145deg,#d7faff,#8d8df4); }
.tower-guide small { color:#c7adff; }
.overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.modal { width:min(620px,100%); padding:28px; border:1px solid rgba(155,244,60,.36); border-radius:18px; background:#06130d; box-shadow:0 0 80px rgba(81,223,117,.14); color:#d9ffe0; font-family:"Space Mono",monospace; }
.modal h2 { color:var(--lime); font-family:"Space Mono",monospace; }
.passwords,.rewards,.targets { display:grid; gap:10px; margin-top:20px; }
.passwords { grid-template-columns:repeat(2,1fr); }
.terminal-choice { min-height:54px; padding:10px; border:1px solid #2c6840; border-radius:8px; color:var(--green); background:#071d10; font-family:"Space Mono",monospace; }
.terminal-choice:hover { border-color:var(--lime); }
.rewards { grid-template-columns:repeat(3,1fr); }
.reward { min-height:130px; font-size:2rem; }
.reward.revealed { color:var(--ink); background:var(--lime); }
.result { text-align:center; }
.result strong { display:block; margin:14px 0; color:var(--lime); font-size:2.3rem; }
.hint-card { margin:18px 0 22px; padding:16px; text-align:left; border:1px solid rgba(25,216,232,.4); border-radius:12px; background:rgba(25,216,232,.08); }
.hint-card strong { margin:0 0 7px; color:var(--cyan); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.hint-card p { margin:0; color:#e2f5fa; font-family:"DM Sans",system-ui,sans-serif; font-size:1rem; line-height:1.55; }
.cafe-hint { border-color:rgba(255,199,102,.42); background:rgba(255,199,102,.08); }
.cafe-hint strong { color:#ffc766; }
.cafe-hint p { color:#fff0d7; }
.host-game { min-height:100vh; padding:24px; background:radial-gradient(circle at center,rgba(25,216,232,.09),transparent 36%),#020506; }
.cyber-host { background:radial-gradient(circle at center,rgba(39,143,255,.16),transparent 42%),#040817; }
.host-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #19303b; }
.host-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.end-session-modal p:not(.eyebrow) { color:#b9c9c0; line-height:1.55; }
.cafe-host { background:radial-gradient(circle at center,rgba(255,177,79,.11),transparent 38%),#130d09; }
.cafe-host .host-bar { border-color:#533622; }
.cafe-host .rank { border-color:#654329; background:#21140d; }
.cafe-host .rank:first-of-type { border-color:#ffcb69; }
.cafe-host .rank-num,.cafe-host .rank-score { color:#ffc76b; }
.cafe-question-shell,.cafe-finished { --lime:#ffc766; --green:#ffad4e; --cyan:#8ee0cf; }
.cafe-top { border-color:#5b3922; background:#24150d; }
.cafe-question-stage { background-image:linear-gradient(180deg,rgba(42,21,9,.36),rgba(25,13,7,.83) 62%,#160e09 100%),url('/assets/scenes/cafe-floor.jpg'); background-position:center; background-size:cover; }
.cafe-question-stage .standard-tag { color:#ffd79b; border-color:#6e482b; }
.cafe-answers .answer { border-color:#735036; color:#fff6ea; background:linear-gradient(150deg,#412719,#24150d); box-shadow:0 6px 0 #120a06; }
.cafe-answers .answer:hover { border-color:#ffc766; background:#50301d; }
.cafe-primary { color:#271408; background:linear-gradient(135deg,#ffc766,#ff9e47); box-shadow:0 7px 0 #a85823; }
.cafe-result { border-color:rgba(255,199,102,.45); background:#21140d; }
.cafe-result h2 { color:#ffc766; }
.cafe-shell { min-height:100vh; color:#fff8ed; background:radial-gradient(circle at 16% 0%,rgba(255,183,88,.2),transparent 32%),linear-gradient(145deg,#21140d,#100b08 72%); }
.cafe-topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:12px clamp(16px,4vw,48px); border-bottom:1px solid #51331f; background:rgba(27,16,10,.94); backdrop-filter:blur(14px); }
.cafe-mark { color:#2a160a; background:linear-gradient(135deg,#ffc766,#ff9e47); box-shadow:0 0 28px rgba(255,168,71,.22); }
.cafe-score { display:flex; align-items:center; gap:18px; color:#e7c49d; font:700 .78rem "Space Mono",monospace; }
.cafe-score strong { color:#ffc766; font-size:1.1rem; }
.cafe-money { position:relative; display:flex; align-items:baseline; gap:9px; padding:7px 14px; border:1px solid #8e5f31; border-radius:12px; background:#382215; }
.cafe-money strong { color:#fff0bd; font-size:clamp(1.75rem,4vw,2.4rem); line-height:1; letter-spacing:-.04em; text-shadow:0 2px 18px rgba(255,199,102,.3); }
.cafe-money b { position:absolute; right:7px; bottom:-24px; z-index:2; padding:4px 8px; border:1px solid #fff1b8; border-radius:999px; color:#38200d; background:#ffd56f; box-shadow:0 8px 18px rgba(0,0,0,.3); font:900 .78rem "Space Mono",monospace; animation:cafe-money-pop 1.7s ease-out both; }
.cafe-money-earned strong { animation:cafe-register-ring .65s ease-out; }
.cafe-top .game-stats > span:first-child { color:#fff0bd; font-size:1.45rem; font-weight:800; }
.cafe-board { width:min(1160px,calc(100% - 32px)); margin:0 auto; padding:38px 0 64px; }
.cafe-intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.cafe-intro h1 { margin-bottom:8px; color:#fff3df; font-size:clamp(2.4rem,5vw,4.8rem); }
.cafe-intro p:not(.eyebrow) { max-width:650px; margin-bottom:0; color:#cdb9a6; line-height:1.6; }
.cafe-notice { margin-bottom:18px; padding:13px 16px; border:1px solid #72502d; border-radius:12px; color:#ffe1b3; background:rgba(255,183,88,.09); font-weight:700; }
.cafe-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:20px; }
.customer-panel,.kitchen-panel { padding:22px; border:1px solid #51331f; border-radius:20px; background:rgba(39,23,14,.9); box-shadow:0 18px 45px rgba(0,0,0,.24); }
.cafe-section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; }
.cafe-section-title h2 { margin:0; font-size:1.35rem; }
.cafe-section-title span { color:#b99b7e; font:700 .72rem "Space Mono",monospace; text-transform:uppercase; }
.kitchen-shelf-title > div { display:grid; gap:5px; }
.cafe-restock { min-height:40px; padding:0 14px; font-size:.8rem; box-shadow:0 5px 0 #a85823; }
.cafe-restock:hover { box-shadow:0 7px 0 #a85823; }
.customers { display:grid; gap:11px; }
.customer { position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 13px; align-items:center; padding:14px; overflow:visible; border:1px solid #66452c; border-radius:14px; background:#321e12; }
.customer-face { grid-row:1/4; display:grid; place-items:center; width:62px; height:62px; border:2px solid #ffd38c; border-radius:20px; background:linear-gradient(145deg,#ffe2b8,#dca365); box-shadow:0 8px 18px rgba(0,0,0,.24); font-size:2.35rem; transform:rotate(-2deg); }
.customer span { color:#b99b7e; font:700 .65rem "Space Mono",monospace; }
.customer-mood { color:#e9c8a6; font-size:.7rem; }
.customer-serving { z-index:4; border-color:#ffd676; animation:customer-table-glow 1.7s ease-in-out both; }
.customer-serving .customer-face { animation:customer-happy-bounce .72s .72s cubic-bezier(.16,.88,.28,1.3) 2; }
.customer-serving > strong { color:#fff4be; animation:order-complete .55s 1s ease-out both; }
.customer-treat { position:absolute; z-index:5; left:50px; top:36px; opacity:0; font-size:2rem !important; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); animation:customer-takes-bite .72s .78s ease-in-out both; }
.earning-burst { position:absolute; z-index:6; right:10px; top:50%; padding:7px 10px; opacity:0; border:1px solid #fff2ae; border-radius:999px; color:#39200a !important; background:linear-gradient(135deg,#fff0a6,#ffc44d); box-shadow:0 8px 24px rgba(0,0,0,.35); font-size:.74rem !important; transform:translateY(-50%); animation:earning-burst 1s 1s cubic-bezier(.16,.88,.28,1.2) both; }
.customer-new { animation:new-customer-arrives .62s cubic-bezier(.16,.88,.28,1.18) both; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.menu-item { overflow:hidden; border:1px solid #59402e; border-radius:15px; background:#1c120c; }
.menu-item.wanted { border-color:#c17b36; box-shadow:inset 0 0 0 1px rgba(255,199,102,.12); }
.serve-item { display:grid; width:100%; min-height:150px; place-items:center; padding:14px; border:0; color:#fff3df; background:transparent; }
.serve-item:hover:not(:disabled) { background:rgba(255,183,88,.08); }
.serve-item:disabled { cursor:not-allowed; opacity:.48; }
.food-emoji { font-size:2.8rem; filter:drop-shadow(0 7px 10px rgba(0,0,0,.28)); }
.serve-item strong { margin-top:3px; }
.serve-item span:last-child { color:#c9a988; font-size:.78rem; }
.recipe-level { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-top:1px solid #493222; color:#b99b7e; font-size:.75rem; }
.recipe-level button { min-height:32px; padding:0 10px; border:1px solid #8a5a31; border-radius:8px; color:#ffcf88; background:#392216; font-weight:800; }
.recipe-level button:disabled { opacity:.42; cursor:not-allowed; }
.cafe-delivery { position:fixed; z-index:120; left:0; top:0; width:84px; height:84px; pointer-events:none; animation:cafe-food-flight 1.7s cubic-bezier(.28,.72,.3,1) both; }
.delivery-plate { position:absolute; inset:7px; display:grid; place-items:center; border:4px solid #fff8de; border-radius:50%; background:radial-gradient(circle,#fffdf5 0 49%,#d9c9ad 51% 57%,#805c39 59% 62%,transparent 64%); box-shadow:0 12px 20px rgba(0,0,0,.42),0 0 22px rgba(255,211,115,.35); font-size:2.35rem; }
.delivery-speed-lines { position:absolute; top:35px; right:62px; width:70px; height:5px; border-radius:999px; background:#ffe59b; box-shadow:0 -15px 0 -1px rgba(255,229,155,.68),0 15px 0 -1px rgba(255,229,155,.48); }
.delivery-sparkles { position:absolute; right:-5px; top:-8px; color:#fff1a4; font-size:1.5rem; text-shadow:-72px 62px #ffb657,12px 70px #fff5bf; animation:delivery-sparkle-spin .62s linear infinite; }
@keyframes cafe-food-flight { 0% { opacity:0; transform:translate(var(--serve-start-x),var(--serve-start-y)) scale(.45) rotate(-14deg); } 10% { opacity:1; } 48% { opacity:1; transform:translate(var(--serve-mid-x),var(--serve-mid-y)) scale(1.08) rotate(8deg); } 82% { opacity:1; transform:translate(var(--serve-end-x),var(--serve-end-y)) scale(.92) rotate(-3deg); } 100% { opacity:0; transform:translate(var(--serve-end-x),var(--serve-end-y)) scale(.45) rotate(0); } }
@keyframes delivery-sparkle-spin { to { transform:rotate(180deg) scale(1.15); } }
@keyframes customer-table-glow { 0%,100% { box-shadow:none; } 55% { border-color:#fff0a3; box-shadow:0 0 28px rgba(255,199,102,.45),inset 0 0 18px rgba(255,199,102,.12); } }
@keyframes customer-happy-bounce { 0%,100% { transform:translateY(0) rotate(-2deg); } 45% { transform:translateY(-12px) rotate(7deg) scale(1.1); } 72% { transform:translateY(2px) rotate(-6deg); } }
@keyframes customer-takes-bite { 0% { opacity:0; transform:translate(28px,2px) scale(.55) rotate(12deg); } 35% { opacity:1; transform:translate(0,0) scale(1.05) rotate(-4deg); } 72% { opacity:1; transform:translate(-19px,-7px) scale(.78) rotate(5deg); } 100% { opacity:0; transform:translate(-26px,-11px) scale(.28); } }
@keyframes order-complete { 0% { transform:scale(1); } 48% { color:#fff6bb; transform:scale(1.08); } 100% { opacity:.42; transform:scale(.98); } }
@keyframes earning-burst { 0% { opacity:0; transform:translateY(-20%) scale(.35) rotate(-8deg); } 34% { opacity:1; transform:translateY(-72%) scale(1.16) rotate(3deg); } 68% { opacity:1; transform:translateY(-64%) scale(1); } 100% { opacity:0; transform:translateY(-110%) scale(.9); } }
@keyframes new-customer-arrives { 0% { opacity:0; transform:translateX(-35px) scale(.86); } 65% { opacity:1; transform:translateX(5px) scale(1.03); } 100% { transform:translateX(0) scale(1); } }
@keyframes cafe-register-ring { 0%,100% { transform:scale(1); } 45% { color:#fff8d5; transform:scale(1.2); text-shadow:0 0 26px #ffd86d; } }
@keyframes cafe-money-pop { 0% { opacity:0; transform:translateY(8px) scale(.45); } 22%,68% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-16px) scale(.86); } }
.mode-world { position:relative; min-height:330px; margin:0 0 20px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:24px; background-position:center; background-size:cover; box-shadow:0 20px 55px rgba(0,0,0,.3); }
.mode-world::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,10,20,.84),rgba(5,10,20,.12) 60%,transparent); pointer-events:none; }
.cafe-world { background-image:url('/assets/scenes/cafe-floor.jpg'); }
.defense-world { min-height:clamp(410px,50vw,650px); background-image:url('/assets/scenes/tower-valley.jpg'); background-position:center; }
.defense-world::after { background:linear-gradient(180deg,rgba(7,7,27,.2),transparent 34%,rgba(7,7,27,.18)); }
.defense-world .world-caption { z-index:5; top:16px; bottom:auto; left:31%; max-width:430px; padding:13px 16px; background:rgba(12,10,39,.8); }
.map-tower-layer,.map-enemy-layer { position:absolute; z-index:4; inset:0; pointer-events:none; }
.map-tower-pad { position:absolute; left:var(--map-x); top:var(--map-y); display:grid; width:58px; height:58px; place-items:center; border:2px dashed rgba(191,235,255,.72); border-radius:50%; color:#dff9ff; background:rgba(16,17,55,.64); box-shadow:0 0 0 5px rgba(105,232,255,.1),0 8px 22px rgba(0,0,0,.34); transform:translate(-50%,-50%); backdrop-filter:blur(3px); }
.map-tower-pad.empty::after { content:"BUILD"; position:absolute; bottom:-19px; padding:2px 5px; border-radius:4px; color:#e3faff; background:rgba(8,9,31,.8); font:800 .52rem "Space Mono",monospace; letter-spacing:.06em; }
.map-tower-pad > b { position:absolute; top:-8px; left:-8px; display:grid; width:24px; height:24px; place-items:center; border:1px solid #d8f9ff; border-radius:50%; color:#15142f; background:#91efff; font:900 .68rem "Space Mono",monospace; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.map-tower-pad > i { display:grid; width:46px; height:46px; place-items:center; border-radius:50% 50% 14px 14px; background:linear-gradient(145deg,#d9fbff,#438fab); font-size:1.55rem; font-style:normal; box-shadow:inset 0 -9px 12px rgba(12,43,59,.42),0 0 18px rgba(105,232,255,.52); }
.map-tower-pad > small { position:absolute; right:-9px; bottom:-9px; padding:4px 5px; border:1px solid #aaf5ff; border-radius:6px; color:#e6fcff; background:#17163b; font:900 .52rem "Space Mono",monospace; }
.map-tower-pad.map-frost { border-color:#c8d4ff; }
.map-tower-pad.map-frost > i { background:linear-gradient(145deg,#f0f5ff,#798cdf); box-shadow:inset 0 -9px 12px rgba(44,53,112,.45),0 0 18px rgba(184,204,255,.62); }
.map-tower-pad.map-pulse { border-color:#ddbdff; }
.map-tower-pad.map-pulse > i { background:linear-gradient(145deg,#f5e4ff,#9566d9); box-shadow:inset 0 -9px 12px rgba(73,42,119,.45),0 0 18px rgba(204,157,255,.62); }
.map-tower-built { animation:map-tower-materialize .85s cubic-bezier(.16,.88,.28,1.28) both; }
.map-tower-upgraded { animation:map-tower-upgrade .8s ease-out both; }
.map-tower-firing { animation:map-tower-fire .45s ease-in-out 6; }
.map-tower-firing::after { content:""; position:absolute; inset:-15px; border:3px solid #8ef3ff; border-radius:50%; opacity:0; animation:map-fire-ring .62s ease-out 4; }
.map-wave-runner { position:absolute; left:92%; top:14%; display:grid; width:30px; height:30px; place-items:center; border:2px solid #ff8dcc; border-radius:48% 52% 44% 56%; color:transparent; background:radial-gradient(circle at 42% 35%,#ffc5e3 0 8%,#702457 11% 45%,#160d2e 68%); box-shadow:0 0 18px rgba(255,83,171,.7); }
.map-enemy-breached { animation:map-enemy-run 3s calc(var(--runner-delay) * .13s) cubic-bezier(.32,.68,.36,1) both; }
.map-enemy-defeated { animation:map-enemy-defeated 2.55s calc(var(--runner-delay) * .13s) cubic-bezier(.32,.68,.36,1) both; }
.map-wave-runner::after { content:""; width:5px; height:5px; margin-left:13px; border-radius:50%; background:#ffbbe0; box-shadow:0 0 8px #ff73bb; }
.map-enemy-defeated::before { content:"✦"; position:absolute; z-index:3; color:#e9fcff; font-size:2.4rem; opacity:0; text-shadow:0 0 16px #8ff5ff; animation:tower-kill-flash .52s calc(1.78s + var(--runner-delay) * .13s) ease-out both; }
.map-enemy-defeated > i,.map-enemy-defeated > b,.map-enemy-defeated > em { position:absolute; z-index:2; width:8px; height:8px; opacity:0; border-radius:2px 50% 50%; background:#8ff5ff; box-shadow:0 0 12px #72ebff; transform:translate(0,0) scale(.2); animation:map-enemy-particle .65s calc(1.82s + var(--runner-delay) * .13s) ease-out both; }
.map-enemy-defeated > i { --burst-x:-38px; --burst-y:-30px; }
.map-enemy-defeated > b { --burst-x:40px; --burst-y:-18px; background:#ffd86f; box-shadow:0 0 12px #ffce4e; }
.map-enemy-defeated > em { --burst-x:13px; --burst-y:38px; background:#d2a8ff; box-shadow:0 0 12px #bd8cff; }
.map-wave-runner.runner-1 { border-color:#ffd06e; filter:hue-rotate(46deg); }
.map-wave-runner.runner-2 { border-color:#bd9cff; filter:hue-rotate(245deg); }
.map-enemy-defeated.defeated-by-spark { border-color:#8ff5ff; box-shadow:0 0 22px #70edff; }
.map-enemy-defeated.defeated-by-spark > b { background:#ffe070; box-shadow:0 0 12px #ffd04d; }
.map-enemy-defeated.defeated-by-frost { border-color:#e7eeff; box-shadow:0 0 24px #9bb5ff; }
.map-enemy-defeated.defeated-by-frost::before { color:#f5f8ff; text-shadow:0 0 18px #aabfff; }
.map-enemy-defeated.defeated-by-frost > i,.map-enemy-defeated.defeated-by-frost > b,.map-enemy-defeated.defeated-by-frost > em { background:#dfe8ff; box-shadow:0 0 12px #9fb5ff; }
.map-enemy-defeated.defeated-by-pulse { border-color:#e4c5ff; box-shadow:0 0 24px #c78fff; }
.map-enemy-defeated.defeated-by-pulse::before { color:#f2dfff; text-shadow:0 0 18px #ce94ff; }
.map-enemy-defeated.defeated-by-pulse > i,.map-enemy-defeated.defeated-by-pulse > b,.map-enemy-defeated.defeated-by-pulse > em { background:#d8a9ff; box-shadow:0 0 12px #b875f1; }
.map-defeat-callout { position:absolute; z-index:8; left:50%; top:50%; display:grid; min-width:min(360px,72%); place-items:center; padding:18px 24px; opacity:0; border:2px solid #bff9ff; border-radius:18px; color:#f7feff; background:linear-gradient(135deg,rgba(18,36,67,.96),rgba(53,31,92,.96)); box-shadow:0 0 0 8px rgba(105,232,255,.12),0 20px 55px rgba(0,0,0,.5),0 0 55px rgba(157,121,255,.45); text-align:center; transform:translate(-50%,-50%); animation:map-victory-callout 1.1s 2.05s cubic-bezier(.16,.88,.28,1.2) both; }
.map-defeat-callout::before,.map-defeat-callout::after { content:""; position:absolute; inset:-22px; border:3px solid #8ff4ff; border-radius:24px; opacity:0; animation:map-victory-ring .8s 2.08s ease-out both; }
.map-defeat-callout::after { inset:-12px; border-color:#d2a6ff; animation-delay:2.2s; }
.map-defeat-callout > span { color:#8ff4ff; font-size:1.7rem; text-shadow:-38px 6px #ffd765,38px 5px #d3a5ff; }
.map-defeat-callout strong { margin:3px 0; color:#fff; font:900 clamp(1.1rem,3vw,1.75rem) "Space Mono",monospace; letter-spacing:.04em; }
.map-defeat-callout small { color:#bff8ff; font-weight:800; }
.map-core-status { position:absolute; z-index:5; left:14px; top:43%; display:grid; min-width:94px; place-items:center; padding:8px 10px; border:1px solid #9df3ff; border-radius:11px; color:#e7fcff; background:rgba(9,20,45,.82); box-shadow:0 0 22px rgba(105,232,255,.3); }
.map-core-status span { color:#8defff; font:900 .56rem "Space Mono",monospace; letter-spacing:.1em; }
.map-core-status strong { color:#ff92bd; font-size:.85rem; letter-spacing:.04em; }
.map-core-hit { animation:map-core-damage .4s 2.1s ease-in-out 3; }
.world-caption { position:absolute; z-index:2; left:clamp(16px,4vw,36px); bottom:clamp(16px,4vw,30px); display:grid; max-width:460px; padding:18px 20px; border:1px solid rgba(255,255,255,.22); border-radius:16px; background:rgba(10,14,24,.75); box-shadow:0 12px 30px rgba(0,0,0,.28); backdrop-filter:blur(12px); }
.world-kicker { margin-bottom:7px; color:#8af3ff; font:800 .67rem "Space Mono",monospace; letter-spacing:.12em; }
.world-caption strong { color:#fff; font-size:1.18rem; line-height:1.25; }
.world-caption small { margin-top:7px; color:#c8d2df; line-height:1.45; }
.cafe-world .world-kicker { color:#ffc766; }
.world-wave-chip { position:absolute; z-index:3; top:18px; right:18px; display:grid; place-items:center; width:78px; height:78px; border:2px solid #c2f8ff; border-radius:50%; color:#142440; background:linear-gradient(145deg,#d7fbff,#7b9df7); box-shadow:0 0 30px rgba(105,232,255,.35); }
.world-wave-chip span { font:800 .58rem "Space Mono",monospace; letter-spacing:.08em; }
.world-wave-chip strong { font:900 1.75rem "Space Mono",monospace; line-height:1; }
.character-modal { overflow:hidden; }
.modal-character { width:calc(100% + 56px); height:155px; margin:-28px -28px 22px; border-bottom:1px solid rgba(255,255,255,.2); background-position:center; background-size:cover; box-shadow:inset 0 -45px 45px rgba(5,8,18,.45); }
.cyber-character,.cyber-drone,.cyber-owl { background-image:url('/assets/scenes/cyber-arena.jpg'); }
.cafe-character { background-image:url('/assets/scenes/cafe-floor.jpg'); }
.tower-character { background-image:url('/assets/scenes/tower-valley.jpg'); }
.cyber-character { background-position:left 70%; }
.cyber-drone { background-position:right 72%; }
.cyber-owl { background-position:90% 55%; }
.cafe-character { background-position:center 32%; }
.tower-character { background-position:left 72%; }
.modal-character.celebrate { animation:character-pop .45s ease-out; }
.modal-character.encourage { filter:saturate(.82); }
@keyframes character-pop { 0% { transform:scale(.96); filter:brightness(1.25); } 70% { transform:scale(1.02); } 100% { transform:scale(1); } }
.world-lobby { position:relative; overflow:hidden; background-position:center; background-size:cover; }
.world-lobby::before { content:""; position:absolute; inset:0; background-position:center; background-size:cover; filter:saturate(.9); }
.cyber-lobby::before { background-image:linear-gradient(rgba(4,8,25,.6),rgba(3,7,18,.9)),url('/assets/scenes/cyber-arena.jpg'); }
.cafe-lobby::before { background-image:linear-gradient(rgba(49,26,11,.52),rgba(25,13,7,.9)),url('/assets/scenes/cafe-floor.jpg'); }
.tower-lobby::before { background-image:linear-gradient(rgba(15,10,43,.54),rgba(8,7,25,.92)),url('/assets/scenes/tower-valley.jpg'); }
.world-lobby .lobby,.world-lobby .join-card { position:relative; z-index:2; }
.lobby-world { position:relative; min-height:215px; margin:-34px -34px 26px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.16); background-image:linear-gradient(90deg,rgba(5,11,24,.9),rgba(5,11,24,.12)),var(--world-art); background-position:center; background-size:cover; }
.lobby-world > div { position:absolute; bottom:20px; left:28px; max-width:430px; padding:14px 17px; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(5,13,28,.72); backdrop-filter:blur(10px); }
.lobby-world h2 { margin:0 0 4px; }
.lobby-world p:last-child { margin:0; color:#d4deea; }
.player small { display:block; margin-top:4px; color:var(--muted); font-size:.7rem; }
.world-avatar { position:relative; overflow:hidden; color:#fff; background-image:linear-gradient(rgba(5,14,24,.28),rgba(5,14,24,.74)),var(--avatar-art); background-position:var(--avatar-pos) center; background-size:cover; border:2px solid rgba(255,255,255,.62); text-shadow:0 2px 8px #000; }
.student-world-card { overflow:hidden; padding-top:0; }
.student-world-art { min-height:205px; margin:0 -30px 24px; background-image:linear-gradient(to top,rgba(7,18,29,.62),transparent),var(--world-art); background-position:center; background-size:cover; }
.student-world-card .scene-guide { position:relative; top:auto; left:auto; margin:-53px auto 25px; text-align:left; }
.host-world { position:relative; width:min(1060px,100%); height:260px; margin:24px auto 0; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:22px; background-image:linear-gradient(90deg,rgba(4,9,20,.7),transparent 62%),var(--world-art); background-position:center; background-size:cover; box-shadow:0 18px 45px rgba(0,0,0,.3); }
.host-world-copy { position:absolute; bottom:20px; left:22px; display:grid; padding:13px 16px; border:1px solid rgba(255,255,255,.2); border-radius:13px; background:rgba(5,12,25,.75); backdrop-filter:blur(10px); }
.host-world-copy span { color:#84edfa; font:800 .68rem "Space Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.host-world-copy strong { margin-top:4px; font-size:1.1rem; }
.tower-question-shell,.tower-finished { --lime:#69e8ff; --green:#78f4d0; --cyan:#b993ff; }
.tower-top { border-color:#3d3472; background:#15132c; }
.tower-top .game-name,.tower-top .game-stats { color:#a9f6ff; }
.tower-question-stage { background-image:linear-gradient(180deg,rgba(15,11,46,.32),rgba(10,8,30,.84) 62%,#0c0b20 100%),url('/assets/scenes/tower-valley.jpg'); background-position:center; background-size:cover; }
.tower-question-stage .standard-tag { color:#b9f4ff; border-color:#4e4c91; background:rgba(105,232,255,.05); }
.tower-answers .answer { border-color:#4e4c91; color:#f4f2ff; background:linear-gradient(150deg,#2b2857,#17152f); box-shadow:0 6px 0 #090817; }
.tower-answers .answer:hover { border-color:#69e8ff; background:#343168; }
.tower-primary { color:#101226; background:linear-gradient(135deg,#69e8ff,#9d79ff); box-shadow:0 7px 0 #4d3c91; }
.defense-result { border-color:rgba(105,232,255,.46); background:#161431; box-shadow:0 0 80px rgba(105,232,255,.13); }
.defense-result h2 { color:#69e8ff; }
.defense-hint { border-color:rgba(185,147,255,.5); background:rgba(185,147,255,.09); }
.defense-hint strong { color:#d2b9ff; }
.defense-hint p { color:#f1ebff; }
.tower-host { background:radial-gradient(circle at center,rgba(126,91,255,.15),transparent 40%),#090817; }
.tower-host .host-bar { border-color:#393564; }
.tower-host .rank { border-color:#443f78; background:#17142f; }
.tower-host .rank:first-of-type { border-color:#69e8ff; box-shadow:0 0 30px rgba(105,232,255,.12); }
.tower-host .rank-num,.tower-host .rank-score { color:#86ebff; }
.defense-shell { min-height:100vh; color:#f5f3ff; background:radial-gradient(circle at 14% 0%,rgba(105,232,255,.12),transparent 28%),radial-gradient(circle at 88% 15%,rgba(157,121,255,.2),transparent 34%),linear-gradient(145deg,#100e28,#080719 72%); }
.defense-topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:12px clamp(16px,4vw,48px); border-bottom:1px solid #3a356c; background:rgba(13,11,32,.94); backdrop-filter:blur(14px); }
.defense-mark { color:#101226; background:linear-gradient(135deg,#69e8ff,#9d79ff); box-shadow:0 0 28px rgba(105,232,255,.2); }
.defense-score { display:flex; align-items:center; gap:18px; color:#aaa5d0; font:700 .78rem "Space Mono",monospace; }
.defense-score strong { color:#bdf5ff; font-size:1.05rem; }
.defense-energy { display:flex; align-items:baseline; gap:9px; padding:7px 14px; border:1px solid #514a91; border-radius:12px; background:#211d48; }
.defense-energy strong { color:#defbff; font-size:clamp(1.65rem,4vw,2.3rem); line-height:1; letter-spacing:-.04em; text-shadow:0 2px 18px rgba(105,232,255,.34); }
.defense-board { width:min(1240px,calc(100% - 32px)); margin:0 auto; padding:36px 0 64px; }
.defense-intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.defense-intro h1 { margin-bottom:8px; color:#f4f7ff; font-size:clamp(2.4rem,5vw,4.8rem); }
.defense-intro p:not(.eyebrow) { max-width:690px; margin-bottom:0; color:#aaa6c9; line-height:1.6; }
.defense-notice { margin-bottom:18px; padding:13px 16px; border:1px solid #4f71a7; border-radius:12px; color:#c9f7ff; background:rgba(105,232,255,.08); font-weight:700; }
.defense-notice.damage { border-color:#9b4c70; color:#ffd5e2; background:rgba(255,92,145,.09); }
.defense-layout { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(520px,1.35fr); gap:20px; }
.battlefield,.tower-panel { padding:22px; border:1px solid #3a356c; border-radius:20px; background:rgba(22,19,52,.92); box-shadow:0 18px 45px rgba(0,0,0,.25); }
.wave-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:stretch; }
.wave-panel > div { padding:12px; border:1px solid #46417c; border-radius:12px; background:#1c193d; }
.wave-panel span,.defense-section-title span { display:block; color:#9690bb; font:700 .64rem "Space Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }
.wave-panel strong { display:block; margin-top:3px; color:#d8faff; font:700 1.35rem "Space Mono",monospace; }
.wave-button { grid-column:1/-1; color:#101226; background:linear-gradient(135deg,#69e8ff,#78f4d0); box-shadow:0 6px 0 #2b7d78; }
.wave-button:disabled { box-shadow:none; }
.enemy-lane { position:relative; display:flex; align-items:center; min-height:245px; margin:17px 0 12px; overflow:hidden; border:1px solid #423d74; border-radius:18px; background:linear-gradient(180deg,rgba(157,121,255,.08),transparent),repeating-linear-gradient(90deg,transparent 0 45px,rgba(105,232,255,.035) 45px 46px),#0e0c25; }
.enemy-lane::before { content:""; position:absolute; right:82px; left:52px; height:8px; border:1px solid #585091; border-radius:999px; background:#262148; box-shadow:0 0 22px rgba(157,121,255,.2); }
.enemy-lane::after { content:""; position:absolute; right:82px; left:52px; height:4px; border-radius:999px; opacity:0; background:linear-gradient(90deg,transparent,#69e8ff,#c496ff,transparent); transform:translateX(-70%); }
.wave-active::after { animation:path-charge 1.1s ease-in-out 2; }
.enemy-gate { position:absolute; left:12px; display:grid; place-items:center; width:48px; height:122px; border:2px solid #9d79ff; border-radius:50%; color:#bfa9ff; background:#1c1647; box-shadow:0 0 28px rgba(157,121,255,.38),inset 0 0 18px rgba(157,121,255,.28); font:700 .54rem "Space Mono",monospace; writing-mode:vertical-rl; }
.enemy { position:absolute; z-index:2; left:var(--enemy-left); display:grid; place-items:center; width:36px; height:36px; border:2px solid #ff81bf; border-radius:46% 54% 48% 52%; background:radial-gradient(circle at 42% 35%,#ffb4db 0 10%,#7d275e 12% 42%,#241236 70%); box-shadow:0 0 18px rgba(255,92,170,.4),inset -5px -7px 10px rgba(9,4,20,.42); animation:enemy-hover 1.35s calc(var(--enemy-step) * -.16s) ease-in-out infinite; }
.enemy::before { content:""; position:absolute; inset:-8px; border:1px solid currentColor; border-radius:50%; opacity:.22; }
.enemy i { width:9px; height:9px; border-radius:50%; background:#fff4ff; box-shadow:0 0 10px #ff8cca; }
.enemy b { position:absolute; width:4px; height:4px; margin-left:15px; border-radius:50%; background:#ffb4db; box-shadow:0 0 8px #ff81bf; }
.enemy-1 { color:#ffc766; border-color:#ffc766; background:radial-gradient(circle at 42% 35%,#fff0b5 0 10%,#7c512a 12% 42%,#2a1931 70%); }
.enemy-1 i { box-shadow:0 0 10px #ffc766; }
.enemy-1 b { background:#ffe1a6; box-shadow:0 0 8px #ffc766; }
.enemy-2 { color:#b895ff; border-color:#b895ff; background:radial-gradient(circle at 42% 35%,#e0d1ff 0 10%,#523a91 12% 42%,#171332 70%); }
.enemy-2 i { box-shadow:0 0 10px #b895ff; }
.enemy-2 b { background:#d9c8ff; box-shadow:0 0 8px #b895ff; }
.wave-active .enemy { left:70px; animation-delay:calc(var(--enemy-step) * .14s); }
.wave-active.wave-success .enemy { animation-name:swarm-cleared; animation-duration:2.2s; animation-timing-function:cubic-bezier(.2,.72,.28,1); animation-fill-mode:both; }
.wave-active.wave-failure .enemy { animation-name:swarm-reaches-core; animation-duration:2.2s; animation-timing-function:cubic-bezier(.28,.65,.38,1); animation-fill-mode:both; }
.tower-shot { position:absolute; z-index:4; right:82px; top:calc(79px + var(--shot-step) * 24px); width:54px; height:5px; border-radius:999px; opacity:0; background:#7df4ff; box-shadow:0 0 8px #69e8ff,0 0 20px #4dcfe9; transform:rotate(calc((var(--shot-step) - 2) * 3deg)); animation:tower-volley 1.15s calc(.38s + var(--shot-step) * .14s) ease-out 2; }
.shot-frost { background:#dce7ff; box-shadow:0 0 8px #b8ccff,0 0 22px #7c91ef; }
.shot-pulse { height:8px; background:#e6c7ff; box-shadow:0 0 10px #c69aff,0 0 26px #8a5de2; }
.base-core { position:absolute; right:14px; z-index:3; display:grid; place-items:center; width:70px; height:98px; border:2px solid #69e8ff; border-radius:16px 16px 8px 8px; color:#112036; background:linear-gradient(145deg,#bdf7ff,#6cc7eb); box-shadow:0 0 28px rgba(105,232,255,.3); }
.base-core::before { content:""; position:absolute; top:-14px; width:46px; height:18px; border:2px solid #69e8ff; border-bottom:0; border-radius:8px 8px 0 0; background:#8de2f5; }
.base-core span { font:900 1rem "Space Mono",monospace; }
.base-core strong { font-size:.63rem; letter-spacing:.12em; }
.base-core.core-hit { animation:core-impact .38s 2.15s ease-in-out 3; }
.battle-note { color:#aaa6c9; font-size:.86rem; line-height:1.5; }
.defense-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.defense-section-title h2 { margin:0; font-size:1.35rem; }
.tower-pad-title > div { display:grid; gap:5px; }
.tower-energy-action { min-height:40px; padding:0 14px; font-size:.8rem; box-shadow:0 5px 0 #5247a1; }
.tower-energy-action:hover { box-shadow:0 7px 0 #5247a1; }
.tower-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.tower-pad { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; padding:14px 10px 12px; overflow:hidden; border:1px solid #47417b; border-radius:16px; text-align:center; background:linear-gradient(160deg,#221e4b,#15122e); }
.tower-pad::after { content:""; position:absolute; right:-24px; bottom:-34px; width:100px; height:65px; border:1px solid rgba(105,232,255,.13); border-radius:50%; transform:rotate(-14deg); }
.pad-number { position:absolute; top:9px; left:10px; color:#8e88b7; font:700 .58rem "Space Mono",monospace; }
.build-symbol { display:grid; place-items:center; width:48px; height:48px; margin:2px auto 11px; border:1px dashed #625a9c; border-radius:50%; color:#7770a6; font-size:1.8rem; }
.tower-shop { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:5px; }
.tower-shop button { display:grid; min-width:0; min-height:80px; place-items:center; padding:7px 3px; border:1px solid #504987; border-radius:10px; color:#d7f8ff; background:#191637; }
.tower-shop button:hover:not(:disabled) { border-color:#69e8ff; background:#252052; }
.tower-shop button:disabled,.upgrade-tower:disabled { cursor:not-allowed; opacity:.4; }
.tower-shop button span { font-size:1.35rem; }
.tower-shop button strong { font:700 .72rem "Space Mono",monospace; }
.tower-shop button small { overflow:hidden; max-width:100%; color:#9e98c1; font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; }
.placed-tower { position:relative; display:grid; place-items:center; width:82px; height:82px; margin:0 auto 9px; border:2px solid #69e8ff; border-radius:50% 50% 16px 16px; background:radial-gradient(circle at 50% 35%,#d9fbff,#4296b2 65%,#1e5368); box-shadow:0 0 25px rgba(105,232,255,.23); }
.placed-tower > span { z-index:2; font-size:2.2rem; filter:drop-shadow(0 5px 6px rgba(0,0,0,.28)); }
.placed-tower i { position:absolute; bottom:-8px; width:64px; height:19px; border-radius:50%; background:#0c0b20; box-shadow:0 0 0 2px #4f4a81; }
.placed-tower b { position:absolute; right:-4px; bottom:0; z-index:3; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#15122e; background:#69e8ff; font:800 .72rem "Space Mono",monospace; }
.tower-pad.frost .placed-tower { border-color:#b5c9ff; background:radial-gradient(circle at 50% 35%,#f1f5ff,#7a8fe2 65%,#39478d); }
.tower-pad.pulse .placed-tower { border-color:#d0a8ff; background:radial-gradient(circle at 50% 35%,#f3deff,#9567da 65%,#563c93); }
.summon-rings { position:absolute; z-index:1; top:34px; left:50%; width:112px; height:112px; pointer-events:none; transform:translateX(-50%); }
.summon-rings i { position:absolute; inset:50%; border:2px solid #78f4ff; border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.just-built { animation:pad-awaken .75s ease-out; }
.just-built .placed-tower { animation:tower-materialize .78s cubic-bezier(.16,.88,.28,1.25) both; }
.just-built .summon-rings i { animation:summon-ring .85s ease-out both; }
.just-built .summon-rings i:nth-child(2) { animation-delay:.12s; border-color:#b895ff; }
.just-built .summon-rings i:nth-child(3) { animation-delay:.24s; border-color:#ffc766; }
.just-upgraded .placed-tower { animation:tower-upgrade .82s ease-out both; }
.just-upgraded .summon-rings i { animation:summon-ring .75s ease-out both; border-color:#ffe49b; }
.tower-firing { animation:tower-fire .42s ease-in-out 6; }
.world-under-attack { animation:world-battle 3.2s ease-in-out; }
.wave-chip-live { animation:wave-chip-pulse .7s ease-in-out 4; }
@keyframes path-charge { 0% { opacity:0; transform:translateX(-70%); } 35% { opacity:1; } 100% { opacity:0; transform:translateX(70%); } }
@keyframes enemy-hover { 0%,100% { transform:translateY(-4px) rotate(-3deg); } 50% { transform:translateY(5px) rotate(4deg); } }
@keyframes swarm-cleared { 0% { left:70px; opacity:0; transform:translateY(0) scale(.72); } 12% { opacity:1; } 62% { left:58%; opacity:1; transform:translateY(-7px) scale(1); } 78%,100% { left:64%; opacity:0; transform:translateY(-24px) scale(.18) rotate(110deg); filter:brightness(2.4); } }
@keyframes swarm-reaches-core { 0% { left:70px; opacity:0; transform:translateY(0) scale(.72); } 12% { opacity:1; } 86% { opacity:1; } 100% { left:calc(100% - 102px); opacity:0; transform:translateY(1px) scale(1.15); filter:brightness(1.7); } }
@keyframes tower-volley { 0% { right:82px; opacity:0; transform:scaleX(.15); } 18% { opacity:1; } 72% { opacity:1; } 100% { right:58%; opacity:0; transform:scaleX(1.25); } }
@keyframes core-impact { 0%,100% { transform:translateX(0); filter:brightness(1); } 35% { transform:translateX(7px) rotate(2deg); filter:brightness(1.75); box-shadow:0 0 42px #ff6ca7; } 70% { transform:translateX(-5px) rotate(-2deg); } }
@keyframes tower-materialize { 0% { opacity:0; transform:translateY(54px) scale(.28); filter:brightness(2.8); } 58% { opacity:1; transform:translateY(-8px) scale(1.12); } 100% { transform:translateY(0) scale(1); filter:brightness(1); } }
@keyframes summon-ring { 0% { inset:50%; opacity:1; } 100% { inset:2%; opacity:0; } }
@keyframes pad-awaken { 0%,100% { box-shadow:none; } 45% { border-color:#78f4ff; box-shadow:0 0 34px rgba(105,232,255,.42),inset 0 0 26px rgba(105,232,255,.18); } }
@keyframes tower-upgrade { 0%,100% { transform:scale(1); filter:brightness(1); } 35% { transform:scale(1.18) rotate(-4deg); filter:brightness(2); box-shadow:0 0 45px #ffe29a; } 68% { transform:scale(.96) rotate(3deg); } }
@keyframes tower-fire { 0%,100% { transform:translateY(0) rotate(0); filter:brightness(1); } 45% { transform:translateY(-5px) rotate(-2deg); filter:brightness(1.65); } }
@keyframes world-battle { 0%,100% { background-position:center; filter:brightness(1); } 42% { background-position:52% center; filter:brightness(1.18) saturate(1.16); } }
@keyframes wave-chip-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); box-shadow:0 0 42px rgba(105,232,255,.72); } }
@keyframes map-tower-materialize { 0% { opacity:0; transform:translate(-50%,15%) scale(.25); filter:brightness(2.8); } 62% { opacity:1; transform:translate(-50%,-58%) scale(1.16); } 100% { transform:translate(-50%,-50%) scale(1); filter:brightness(1); } }
@keyframes map-tower-upgrade { 0%,100% { transform:translate(-50%,-50%) scale(1); } 40% { transform:translate(-50%,-50%) scale(1.25) rotate(-5deg); filter:brightness(2); } 72% { transform:translate(-50%,-50%) scale(.94) rotate(4deg); } }
@keyframes map-tower-fire { 0%,100% { transform:translate(-50%,-50%) scale(1); filter:brightness(1); } 48% { transform:translate(-50%,-57%) scale(1.08); filter:brightness(1.65); } }
@keyframes map-fire-ring { 0% { inset:35%; opacity:.9; } 100% { inset:-28px; opacity:0; } }
@keyframes map-enemy-run { 0% { left:92%; top:14%; opacity:0; transform:scale(.55); } 10% { opacity:1; } 24% { left:88%; top:29%; transform:scale(.8) rotate(8deg); } 46% { left:79%; top:43%; transform:scale(1) rotate(-8deg); } 68% { left:65%; top:56%; transform:scale(.86) rotate(7deg); } 84% { left:49%; top:65%; opacity:1; transform:scale(1.04) rotate(-5deg); } 100% { left:22%; top:65%; opacity:0; transform:scale(.4) rotate(18deg); } }
@keyframes map-enemy-defeated { 0% { left:92%; top:14%; opacity:0; transform:scale(.55); } 10% { opacity:1; } 25% { left:88%; top:29%; transform:scale(.8) rotate(8deg); } 48% { left:79%; top:43%; transform:scale(1) rotate(-8deg); } 68% { left:70%; top:52%; opacity:1; transform:scale(.92) rotate(7deg); filter:brightness(1); } 78% { left:var(--defeat-x); top:var(--defeat-y); opacity:1; transform:translate(-50%,-50%) scale(1.45) rotate(-12deg); filter:brightness(4) saturate(.35); box-shadow:0 0 34px #d4fbff; } 100% { left:var(--defeat-x); top:var(--defeat-y); opacity:0; transform:translate(-50%,-50%) scale(.08) rotate(180deg); filter:brightness(5); } }
@keyframes tower-kill-flash { 0% { opacity:0; transform:scale(.25) rotate(0); } 35% { opacity:1; transform:scale(1.45) rotate(45deg); } 100% { opacity:0; transform:scale(2.3) rotate(100deg); } }
@keyframes map-enemy-particle { 0% { opacity:0; transform:translate(0,0) scale(.2) rotate(0); } 18% { opacity:1; } 100% { opacity:0; transform:translate(var(--burst-x),var(--burst-y)) scale(1.35) rotate(170deg); } }
@keyframes map-victory-callout { 0% { opacity:0; transform:translate(-50%,-38%) scale(.45) rotate(-3deg); } 25%,72% { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(0); } 100% { opacity:0; transform:translate(-50%,-62%) scale(.92); } }
@keyframes map-victory-ring { 0% { opacity:.8; transform:scale(.65); } 100% { opacity:0; transform:scale(1.25); } }
@keyframes map-core-damage { 0%,100% { transform:translateX(0); filter:brightness(1); } 35% { transform:translateX(8px) rotate(3deg); filter:brightness(2); box-shadow:0 0 38px #ff5999; } 70% { transform:translateX(-6px) rotate(-2deg); } }
.tower-pad > strong { position:relative; z-index:2; font-size:.83rem; }
.tower-pad > small { position:relative; z-index:2; margin-top:3px; color:#9d97c1; font-size:.68rem; }
.upgrade-tower { position:relative; z-index:2; min-height:34px; margin-top:10px; padding:0 9px; border:1px solid #5e58a0; border-radius:8px; color:#c6f7ff; background:#24204e; font-size:.68rem; font-weight:800; }
.upgrade-tower:hover:not(:disabled) { border-color:#69e8ff; background:#302a66; }
.leaderboard { width:min(880px,100%); margin:30px auto 54px; }
.leaderboard h1 { font-family:"Space Mono",monospace; font-size:clamp(2rem,5vw,4rem); }
.rank { display:grid; grid-template-columns:54px 44px 1fr auto; gap:12px; align-items:center; margin:10px 0; padding:13px 18px; border:1px solid #173a47; border-radius:15px; background:#081820; box-shadow:0 8px 20px rgba(0,0,0,.16); }
.rank:first-of-type { border-color:var(--yellow); box-shadow:0 0 28px rgba(255,216,79,.1); }
.rank-num { color:var(--cyan); font:700 1.3rem "Space Mono",monospace; }
.rank-character { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:13px; background:linear-gradient(145deg,rgba(105,232,255,.3),rgba(157,121,255,.25)); font-size:1.45rem; }
.rank-score { color:var(--lime); font:700 1rem "Space Mono",monospace; }
.directions-shell { --direction-accent:#69e8ff; --direction-accent-2:#9bf43c; position:relative; display:grid; min-height:100vh; place-items:center; overflow:hidden; padding:clamp(16px,4vw,48px); background-image:linear-gradient(135deg,rgba(3,12,20,.95),rgba(9,22,36,.77)),var(--directions-art); background-position:center; background-size:cover; }
.directions-shell::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.directions-shell.cafe-directions { --direction-accent:#ffc766; --direction-accent-2:#ff8e70; background-image:linear-gradient(135deg,rgba(34,18,11,.93),rgba(55,28,19,.72)),var(--directions-art); }
.directions-shell.tower-directions { --direction-accent:#86ebff; --direction-accent-2:#b895ff; background-image:linear-gradient(135deg,rgba(10,8,31,.94),rgba(34,22,65,.76)),var(--directions-art); }
.directions-card { position:relative; z-index:1; width:min(1120px,100%); overflow:hidden; border:1px solid color-mix(in srgb,var(--direction-accent) 45%,transparent); border-radius:26px; background:rgba(8,20,30,.94); box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 55px color-mix(in srgb,var(--direction-accent) 14%,transparent); animation:directions-arrive .45s cubic-bezier(.18,.8,.24,1) both; }
.cafe-directions .directions-card { background:rgba(39,22,16,.95); }
.tower-directions .directions-card { background:rgba(17,14,43,.96); }
.directions-top { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.12); }
.directions-hero { position:relative; display:flex; min-height:180px; align-items:flex-end; gap:15px; overflow:hidden; padding:24px; background-image:linear-gradient(90deg,rgba(5,14,22,.93),rgba(5,14,22,.22) 67%,rgba(5,14,22,.58)),var(--directions-art); background-position:center; background-size:cover; }
.directions-hero::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -65px 80px rgba(5,12,20,.58); }
.directions-mode-icon,.directions-guide { position:relative; z-index:1; display:grid; flex:0 0 auto; place-items:center; border:2px solid rgba(255,255,255,.7); color:#09131b; background:linear-gradient(135deg,var(--direction-accent),var(--direction-accent-2)); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.directions-mode-icon { width:62px; height:62px; border-radius:18px; font-size:2rem; }
.directions-guide { align-self:center; width:78px; height:78px; margin-left:auto; border-radius:24px; font-size:2.7rem; transform:rotate(3deg); }
.directions-hero-copy { position:relative; z-index:1; display:grid; gap:3px; text-shadow:0 2px 12px #000; }
.directions-hero-copy small { color:var(--direction-accent); font:800 .68rem "Space Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.directions-hero-copy strong { font-size:clamp(1rem,2vw,1.35rem); }
.directions-copy { padding:clamp(22px,4vw,38px); }
.directions-copy > h1 { max-width:none; margin-bottom:22px; font-size:clamp(2rem,4.5vw,3.8rem); }
.directions-goal { display:flex; align-items:center; gap:14px; margin-bottom:22px; padding:13px 17px; border-left:5px solid var(--direction-accent); border-radius:0 12px 12px 0; background:color-mix(in srgb,var(--direction-accent) 11%,transparent); }
.directions-goal span { color:var(--direction-accent); font:800 .68rem "Space Mono",monospace; letter-spacing:.1em; white-space:nowrap; }
.directions-goal strong { font-size:1.03rem; }
.directions-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:12px; margin:0; padding:0; list-style:none; counter-reset:directions; }
.direction-step { position:relative; min-height:178px; padding:18px 15px 16px; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(255,255,255,.055); }
.direction-number { position:absolute; top:11px; right:12px; display:grid; width:27px; height:27px; place-items:center; border-radius:8px; color:#07131d; background:var(--direction-accent); font:800 .72rem "Space Mono",monospace; }
.direction-icon { display:block; margin-bottom:13px; font-size:2rem; line-height:1; filter:drop-shadow(0 6px 8px rgba(0,0,0,.32)); }
.direction-step strong { display:block; margin-bottom:7px; color:white; font-size:.98rem; }
.direction-step p { margin:0; color:#c1d0da; font-size:.84rem; line-height:1.48; }
.cafe-directions .direction-step p { color:#e2cabe; }
.tower-directions .direction-step p { color:#cbc6e3; }
.directions-tip { display:flex; align-items:center; gap:12px; margin-top:17px; padding:12px 15px; border:1px solid color-mix(in srgb,var(--direction-accent-2) 38%,transparent); border-radius:13px; background:color-mix(in srgb,var(--direction-accent-2) 9%,transparent); }
.directions-tip > span { color:var(--direction-accent-2); font-size:1.3rem; }
.directions-tip p { margin:0; color:#edf7fb; line-height:1.45; }
.directions-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; }
.directions-actions p { margin:0; color:#98aeba; font-size:.8rem; }
.directions-start { flex:0 0 auto; color:#07131d; background:linear-gradient(135deg,var(--direction-accent),var(--direction-accent-2)); box-shadow:0 7px 0 color-mix(in srgb,var(--direction-accent) 48%,#07131d); }
.directions-start:hover { box-shadow:0 9px 0 color-mix(in srgb,var(--direction-accent) 48%,#07131d); }
@keyframes directions-arrive { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
#toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,120px); min-width:260px; padding:13px 18px; border-radius:10px; color:var(--ink); background:var(--lime); box-shadow:var(--shadow); text-align:center; font-weight:800; transition:transform .24s; }
#toast.show { transform:translate(-50%,0); }
.error { color:#ff9b9b !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:900px) { .hero-row,.builder,.cafe-layout { grid-template-columns:1fr; } .bank-grid,.mode-grid { grid-template-columns:repeat(2,1fr); } .config { position:static; } }
@media (max-width:620px) { .container { width:min(100% - 22px,1180px); padding-top:30px; } .brand span:last-child { display:none; } .bank-grid,.mode-grid,.menu-grid { grid-template-columns:1fr; } .mode-card { min-height:320px; } .hero-row { margin-bottom:24px; } .lobby-code { grid-template-columns:1fr; text-align:center; } .qr { display:none; } .answers { grid-template-columns:1fr; } .answer { min-height:88px; } .passwords { grid-template-columns:1fr; } .question-row { grid-template-columns:auto 1fr; } .question-row small { grid-column:2; } .nav-link { padding:9px; } .game-top { padding:0 12px; } .game-stats { gap:9px; font-size:.78rem; } .game-stats .sound-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .game-stats .sound-toggle { width:40px; padding:0; } .host-bar { align-items:flex-start; flex-wrap:wrap; } .host-bar > .code { order:3; width:100%; text-align:center; } .host-actions { flex-wrap:wrap; gap:9px; } .modal-actions { flex-direction:column-reverse; } .cafe-topbar,.cafe-intro { align-items:flex-start; flex-direction:column; } .cafe-score { width:100%; flex-wrap:wrap; gap:10px 14px; } .kitchen-shelf-title { align-items:stretch; flex-direction:column; } .cafe-restock { width:100%; } .scene-guide { border-radius:16px; } .question-card { margin-top:92px; } .mode-world { min-height:270px; } .lobby-world { min-height:185px; } .rank { grid-template-columns:35px 40px 1fr; padding:12px; } .rank-score { grid-column:2/4; text-align:right; } }
@media (max-width:1050px) { .defense-layout { grid-template-columns:1fr; } }
@media (max-width:760px) { .defense-topbar,.defense-intro { align-items:flex-start; flex-direction:column; } .defense-score { width:100%; flex-wrap:wrap; gap:10px 14px; } .tower-pad-title { align-items:stretch; flex-direction:column; } .tower-energy-action { width:100%; } .tower-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .defense-world .world-caption { left:17%; max-width:58%; } .map-tower-pad { width:48px; height:48px; } .map-tower-pad > i { width:38px; height:38px; font-size:1.25rem; } }
@media (max-width:700px) { .directions-shell { display:block; overflow:auto; padding:10px; } .directions-card { border-radius:19px; } .directions-hero { min-height:145px; padding:18px; } .directions-guide { width:62px; height:62px; border-radius:18px; font-size:2.15rem; } .directions-copy { padding:20px 17px 25px; } .directions-steps { grid-template-columns:1fr 1fr; } .direction-step { min-height:160px; } .directions-actions { align-items:stretch; flex-direction:column; } .directions-start { width:100%; } }
@media (max-width:480px) { .directions-top .brand span:last-child { display:none; } .directions-hero-copy strong { max-width:175px; } .directions-mode-icon { width:52px; height:52px; font-size:1.65rem; } .directions-steps { grid-template-columns:1fr; } .direction-step { min-height:0; padding:16px 48px 16px 15px; } .direction-icon { margin-bottom:9px; } .directions-goal { align-items:flex-start; flex-direction:column; gap:5px; } }
@media (max-width:470px) { .tower-grid { grid-template-columns:1fr; } .tower-pad { min-height:205px; } .wave-panel { grid-template-columns:1fr 1fr; } .wave-panel > div:first-child { grid-column:1/-1; } .enemy { width:31px; height:31px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }