@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url(fonts/unbounded-cyrillic-700.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-display: swap; src: url(fonts/unbounded-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Exo 2'; font-weight: 400; font-display: swap; src: url(fonts/exo-2-cyrillic-400.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Exo 2'; font-weight: 400; font-display: swap; src: url(fonts/exo-2-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Exo 2'; font-weight: 600; font-display: swap; src: url(fonts/exo-2-cyrillic-600.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Exo 2'; font-weight: 600; font-display: swap; src: url(fonts/exo-2-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-latin-700.woff2) format('woff2'); }

:root {
  --bg: #0d0f17; --bg2: #141a2e; --panel: rgba(16, 20, 36, 0.92); --line: rgba(34, 230, 255, 0.35);
  --pink: #ff2e88; --lime: #c6ff3d; --cyan: #22e6ff; --amber: #ffb020; --gold: #ffd84a; --danger: #ff3b5c;
  --text: #e8ecf6; --dim: #8a93ad;
  --u: 1px; --fx: 0px; --fy: 0px; --fw: 100vw; --fh: 100vh;
  --cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none;
  font-family: 'Exo 2', system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; }
#ui { position: fixed; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); pointer-events: none; font-size: calc(var(--u) * 20); }
#ui > * { pointer-events: auto; }
#ui > .hud { pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- экраны ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden;
  padding: calc(var(--u) * 28) calc(var(--u) * 26) calc(var(--u) * 28 + env(safe-area-inset-bottom)); touch-action: pan-y;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 46, 136, 0.16), transparent 60%), linear-gradient(180deg, rgba(13,15,23,0.86), rgba(13,15,23,0.97)); }
.screen.clear { background: none; pointer-events: none; }
.screen.clear > * { pointer-events: auto; }
h1, h2, h3 { font-family: 'Unbounded', 'Exo 2', sans-serif; margin: 0; letter-spacing: 0.02em; }
.logo { font-family: 'Unbounded', sans-serif; font-size: calc(var(--u) * 64); line-height: 0.95; text-align: center; margin-top: calc(var(--u) * 60);
  color: var(--text); text-shadow: 0 0 calc(var(--u) * 18) rgba(255, 46, 136, 0.8), 0 0 calc(var(--u) * 2) #fff; }
.logo span { display: block; color: var(--lime); text-shadow: 0 0 calc(var(--u) * 18) rgba(198, 255, 61, 0.7); }
.sub { color: var(--dim); text-align: center; max-width: calc(var(--u) * 560); margin: calc(var(--u) * 14) 0 calc(var(--u) * 30); }
.menu { display: flex; flex-direction: column; gap: calc(var(--u) * 12); width: min(100%, calc(var(--u) * 460)); }
.btn { position: relative; border: 0; padding: calc(var(--u) * 16) calc(var(--u) * 22); min-height: 48px; text-align: center; font-weight: 600; font-size: calc(var(--u) * 22);
  background: linear-gradient(90deg, rgba(34,230,255,0.16), rgba(34,230,255,0.06)); clip-path: var(--cut); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line); }
.btn:active { transform: translateY(1px); }
.btn.main { background: linear-gradient(90deg, var(--pink), #ff5ea8); color: #fff; box-shadow: 0 0 calc(var(--u) * 24) rgba(255, 46, 136, 0.45); font-family: 'Unbounded', sans-serif; font-size: calc(var(--u) * 24); }
.btn.ad { background: linear-gradient(90deg, rgba(198,255,61,0.2), rgba(198,255,61,0.06)); box-shadow: inset 0 0 0 1.5px rgba(198,255,61,0.5); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(138,147,173,0.4); color: var(--dim); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.row { display: flex; gap: calc(var(--u) * 12); width: 100%; }
.row > .btn { flex: 1; }
.note { color: var(--dim); font-size: calc(var(--u) * 15); text-align: center; margin-top: calc(var(--u) * 20); max-width: calc(var(--u) * 560); }
.top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 18); }
.top h2 { font-size: calc(var(--u) * 26); }
.pill { font-family: 'JetBrains Mono', monospace; font-weight: 700; padding: calc(var(--u) * 6) calc(var(--u) * 12); clip-path: var(--cut); background: rgba(34,230,255,0.1); font-size: calc(var(--u) * 17); white-space: nowrap; }
.iconbtn { width: 48px; height: 48px; border: 0; clip-path: var(--cut); background: rgba(34,230,255,0.12); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 20px; }

/* ---------- карта ---------- */
.sites { display: flex; flex-direction: column; gap: calc(var(--u) * 14); width: 100%; }
.site { position: relative; padding: calc(var(--u) * 16); clip-path: var(--cut); background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--sc, var(--line)); overflow: hidden; }
.site .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0.28; }
.site > * { position: relative; }
.site h3 { font-size: calc(var(--u) * 20); color: var(--sc); }
.site .meta { color: var(--dim); font-size: calc(var(--u) * 15); margin: calc(var(--u) * 4) 0 calc(var(--u) * 12); }
.nodes { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--u) * 6); }
.node { aspect-ratio: 1; border: 0; clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%); background: rgba(34,230,255,0.12);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(var(--u) * 15); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; }
.node.boss { background: rgba(255,46,136,0.25); }
.node.done { background: rgba(198,255,61,0.18); }
.node.locked { opacity: 0.25; pointer-events: none; }
.node.next { box-shadow: inset 0 0 0 2px var(--lime); }
.node small { font-size: calc(var(--u) * 10); color: var(--gold); letter-spacing: -1px; }
.site.locked { opacity: 0.55; }
.site.locked .nodes { display: none; }
.site.tutis { --sc: #7fd8c8; background: linear-gradient(90deg, #e9f3f8, #f5f8fb); color: #0f1d2b; }

/* ---------- карточки ---------- */
.cards { display: flex; flex-direction: column; gap: calc(var(--u) * 12); width: 100%; }
.card { padding: calc(var(--u) * 16) calc(var(--u) * 18); clip-path: var(--cut); background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; border: 0; width: 100%; }
.card b { display: block; font-size: calc(var(--u) * 20); }
.card span { color: var(--dim); font-size: calc(var(--u) * 16); }
.card.pick:hover, .card.pick:focus { box-shadow: inset 0 0 0 2px var(--lime); }
.card.fact { box-shadow: inset 0 0 0 1.5px rgba(198,255,61,0.4); }
.card .tag { font-size: calc(var(--u) * 13); color: var(--lime); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.loadout { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); width: 100%; margin: calc(var(--u) * 10) 0; }
.wcard { border: 0; padding: calc(var(--u) * 10) calc(var(--u) * 6); clip-path: var(--cut); background: rgba(34,230,255,0.07); box-shadow: inset 0 0 0 1.5px rgba(138,147,173,0.35); font-size: calc(var(--u) * 15); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wcard img, .wcard .dot { width: calc(var(--u) * 52); height: calc(var(--u) * 52); object-fit: contain; }
.wcard .dot { border-radius: 50%; }
.wcard.on { box-shadow: inset 0 0 0 2px var(--lime); background: rgba(198,255,61,0.1); }
.wcard.lock { opacity: 0.3; pointer-events: none; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .bar { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 78); top: calc(var(--u) * 10 + env(safe-area-inset-top)); pointer-events: none;
  padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 2); background: rgba(13,15,23,0.72); clip-path: var(--cut); }
.meter { height: calc(var(--u) * 14); background: rgba(13,15,23,0.85); clip-path: var(--cut); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #7af3ff); transition: width 0.1s linear; }
.meter.alarm i { background: linear-gradient(90deg, var(--amber), var(--danger)); }
.hud .lbl { display: flex; justify-content: space-between; font-size: calc(var(--u) * 14); color: var(--dim); margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); font-weight: 600; }
.hud .lbl b { color: var(--text); font-family: 'JetBrains Mono', monospace; }
.hud .pause { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 12 + env(safe-area-inset-top)); }
.hud .toasts { position: absolute; left: 0; right: 0; top: calc(var(--u) * 120); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { font-family: 'Unbounded', sans-serif; font-size: calc(var(--u) * 18); padding: calc(var(--u) * 6) calc(var(--u) * 14); background: rgba(13,15,23,0.85); clip-path: var(--cut); animation: tin 0.25s ease-out; }
@keyframes tin { from { transform: translateY(-8px) scale(0.96); opacity: 0; } }
.slots { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10 + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); }
.slot { position: relative; width: calc(var(--u) * 92); height: calc(var(--u) * 92); min-width: 48px; min-height: 48px; border: 0; clip-path: var(--cut); background: rgba(16,20,36,0.88);
  box-shadow: inset 0 0 0 1.5px rgba(138,147,173,0.4); display: flex; align-items: center; justify-content: center; padding: 0; }
.slot img, .slot .dot { width: 62%; height: 62%; object-fit: contain; }
.slot .dot { border-radius: 50%; }
.slot.cur { box-shadow: inset 0 0 0 2.5px var(--lime), 0 0 18px rgba(198,255,61,0.4); }
.slot .learn { position: absolute; left: 10%; right: 10%; bottom: 7%; display: flex; gap: 2px; }
.slot .learn i { flex: 1; height: calc(var(--u) * 5); background: rgba(138,147,173,0.35); }
.slot .learn i.on { background: var(--cyan); }
.slot.imm::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(34,230,255,0.35) 0 6px, transparent 6px 12px); }
.slot.ban::after { content: ''; position: absolute; inset: 0; background: rgba(255,59,92,0.45); }
.slot .k { position: absolute; left: 7%; top: 5%; font-size: calc(var(--u) * 13); color: var(--dim); font-family: 'JetBrains Mono', monospace; }
.slot.special { width: calc(var(--u) * 80); }
.slot.special .cnt { position: absolute; right: 8%; top: 5%; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(var(--u) * 16); color: var(--gold); }
.slot.special .fill { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(198,255,61,0.25); }
.slot.ready { box-shadow: inset 0 0 0 2.5px var(--lime), 0 0 22px rgba(198,255,61,0.6); }
.lefty .slots { flex-direction: row-reverse; }
.hint { position: absolute; bottom: calc(var(--u) * 116 + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: var(--dim); font-size: calc(var(--u) * 14); pointer-events: none; }

/* ---------- итоги ---------- */
.result h1 { font-size: calc(var(--u) * 40); margin-top: calc(var(--u) * 40); text-align: center; }
.result.win h1 { color: var(--lime); text-shadow: 0 0 20px rgba(198,255,61,0.5); }
.result.lose h1 { color: var(--danger); }
.stars { display: flex; flex-direction: column; gap: calc(var(--u) * 8); width: 100%; margin: calc(var(--u) * 20) 0; }
.star { display: flex; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 14); background: var(--panel); clip-path: var(--cut); }
.star i { font-style: normal; font-size: calc(var(--u) * 26); color: rgba(138,147,173,0.4); width: 1.2em; text-align: center; }
.star.on i { color: var(--gold); text-shadow: 0 0 12px rgba(255,216,74,0.7); }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); width: 100%; margin-bottom: calc(var(--u) * 16); }
.score div { background: var(--panel); clip-path: var(--cut); padding: calc(var(--u) * 10) calc(var(--u) * 14); }
.score small { display: block; color: var(--dim); font-size: calc(var(--u) * 13); }
.score b { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--u) * 24); }
.news { padding: calc(var(--u) * 20); clip-path: var(--cut); background: var(--panel); box-shadow: inset 0 0 0 1.5px rgba(255,46,136,0.5); margin: calc(var(--u) * 24) 0; font-size: calc(var(--u) * 20); line-height: 1.4; }
.tabs { display: flex; gap: 8px; width: 100%; margin-bottom: calc(var(--u) * 14); }
.tabs .btn { flex: 1; font-size: calc(var(--u) * 17); padding: calc(var(--u) * 12) 4px; }
.tabs .btn.on { box-shadow: inset 0 0 0 2px var(--lime); }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.grid div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; clip-path: var(--cut); background: rgba(34,230,255,0.06); font-size: calc(var(--u) * 13); color: var(--dim); text-align: center; padding: 3px; }
.grid div.got { background: rgba(255,216,74,0.16); color: var(--gold); }
.list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.list div { padding: calc(var(--u) * 10) calc(var(--u) * 14); background: var(--panel); clip-path: var(--cut); font-size: calc(var(--u) * 16); }
.toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: calc(var(--u) * 14) calc(var(--u) * 16); background: var(--panel); clip-path: var(--cut); border: 0; font-size: calc(var(--u) * 19); min-height: 48px; }
.toggle i { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--lime); }
.toggle.off i { color: var(--dim); }
.boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); font-family: 'Unbounded', sans-serif; color: var(--pink); font-size: 28px; letter-spacing: 0.1em; }
.tutis-screen { background: linear-gradient(180deg, #f5f8fb, #e3eef6) !important; color: #0f1d2b; }
.tutis-screen .sub, .tutis-screen .note { color: #41566b; }
.tutis-screen h1 { color: #22b39f !important; text-shadow: none !important; }