:root {
  --bg: #162139;
  --surface: #202b45;
  --elevated: #2a3858;
  --light: #31446a;
  --text: #fff6e8;
  --text-2: #c9d3ea;
  --muted: #8e9bb8;
  --mint: #62b41e;
  --mint-hi: #8bc634;
  --cyan: #48d6f2;
  --sky: #5cb9ff;
  --blue: #3188f4;
  --purple: #875be8;
  --violet: #a66bff;
  --pink: #f15ca6;
  --orange: #ff9b36;
  --yellow: #ffd84a;
  --green: #4a9c18;
  --cream: #fff3c4;
  --danger: #ff5a6a;
  --cta-top: #8bc634;
  --cta-bot: #3d8c14;
  --cta-ink: #1a4a0c;
  --cta-shadow: #1f5a10;
  --pop-a: #9ad42e;
  --border: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.22);
  --shadow: rgba(0, 0, 0, 0.38);
  --accent: var(--sky);
  --rail: 72px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-hero: 24px;
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, system-ui, sans-serif;
  --grass-a: #4eae34;
  --grass-b: #2f8a28;
  --chalk: #f8fbff;
  --stad: #222831;
  --stad-deep: #14191f;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4efe6;
    --surface: #eae4d8;
    --elevated: #faf6ef;
    --light: #e2dcd0;
    --text: #3a4146;
    --text-2: #5a6368;
    --muted: #7a8286;
    --mint: #4a9c18;
    --cyan: #0b8fbe;
    --yellow: #c48400;
    --navy: #143348;
    --border: rgba(92, 78, 58, 0.1);
    --fill: rgba(92, 78, 58, 0.045);
    --stroke: rgba(250, 246, 239, 0.7);
    --shadow: rgba(74, 56, 40, 0.055);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { background: #0e1424; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.35;
}
body.world-home { --accent: var(--sky); }
body.world-match { --accent: var(--green); }
body.world-squad { --accent: var(--blue); }
body.world-daily { --accent: var(--yellow); }
body.world-settings { --accent: var(--purple); }

a { color: var(--mint-hi); text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }

.phone {
  width: min(430px, 100%);
  margin: 0 auto;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sky) 10%, transparent), transparent 42%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 46%),
    var(--bg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.45);
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 6px 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--mint) 28%, transparent);
}
.token {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(#fff4, transparent), var(--elevated);
  border: 1.5px solid color-mix(in srgb, var(--cream) 55%, transparent);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
}
.token i {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(var(--yellow), var(--orange));
  box-shadow: inset 0 1px 0 #fff8;
}
.rail nav { display: flex; flex-direction: column; gap: 2px; margin-top: auto; margin-bottom: auto; }
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.nav.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.glyph {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--cream);
  display: grid; place-items: center;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--cta-bot) 36%, transparent);
}
.glyph span {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: white;
  font-size: 14px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 #fff8, inset 0 -6px 8px #0004;
}
.g-home span { background: linear-gradient(var(--sky), var(--blue)); }
.g-match span { background: linear-gradient(var(--cta-top), var(--cta-bot)); }
.g-squad span { background: linear-gradient(var(--blue), var(--purple)); }
.g-daily span { background: linear-gradient(var(--orange), var(--yellow)); }
.g-settings span { background: linear-gradient(var(--violet), var(--purple)); }
.nav.on .glyph { transform: scale(1.05); }

.stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main {
  flex: 1;
  padding: 10px 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header img { height: 36px; filter: drop-shadow(0 4px 12px rgba(26, 143, 234, .45)); }
.title {
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
}
.close {
  margin-left: auto;
  color: var(--mint);
  font-size: 13px;
  font-weight: 800;
}
.doc h1 {
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 8px;
}
.doc { font-size: 12px; color: var(--text-2); }
.kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}

.posters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 220px;
}
.poster {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 200px;
  background: var(--bg) center/cover no-repeat;
  box-shadow: 0 2px 4px var(--shadow);
}
.poster::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.08) 40%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.92));
}
.poster.accent { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 90%, transparent), 0 6px 12px color-mix(in srgb, var(--mint) 12%, transparent); }
.poster.accent::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 18%, transparent), transparent 55%);
}
.poster .cap {
  position: absolute; left: 10px; right: 8px; bottom: 10px; z-index: 2;
}
.poster h2 {
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  text-shadow: 0 1px 6px #000b;
  line-height: 1.05;
}
.poster.accent h2 { color: var(--mint-hi); }
.poster p { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.9); margin-top: 3px; }

.train {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent);
}
.train .glyph { width: 32px; height: 32px; border-radius: 11px; }
.train .glyph span { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
.train h3 { font-size: 16px; font-weight: 900; font-style: italic; }
.train p { font-size: 13px; color: var(--text-2); font-weight: 500; }
.train .chev { margin-left: auto; color: color-mix(in srgb, var(--mint) 85%, white); font-weight: 800; }

.glass, .card {
  position: relative;
  background:
    linear-gradient(135deg, var(--fill), color-mix(in srgb, var(--mint) 6%, transparent), color-mix(in srgb, var(--bg) 55%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 16px 16px;
  box-shadow: 0 8px 16px var(--shadow);
}
.glass::before, .card::before {
  content: "";
  position: absolute; top: 8px; left: 16px;
  width: 36px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cta-top), var(--cta-bot));
}
.card h2, h2.display {
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 8px;
}
.card p, article p { color: var(--text-2); margin-bottom: 8px; font-size: 14px; font-weight: 500; }
article h3 { margin-top: 14px; font-size: 14px; font-weight: 800; }
article ul { padding-left: 18px; color: var(--text-2); display: grid; gap: 6px; font-size: 13px; }

.cta, button[type="submit"] {
  display: block;
  text-align: center;
  margin-top: 12px;
  border: 0;
  border-radius: 20px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 var(--cta-ink);
  cursor: pointer;
  background:
    linear-gradient(#fff7, #fff0 42%, #0000 58%, #0003),
    linear-gradient(180deg, var(--pop-a), var(--cta-top), var(--cta-bot));
  box-shadow: 0 0 0 3.4px var(--cream), 0 2px 3px color-mix(in srgb, var(--cta-shadow) 18%, transparent);
}
.cta.ghost, .btn-sec {
  background: var(--elevated);
  color: var(--text);
  text-shadow: none;
  box-shadow: none;
  border: 2.2px solid color-mix(in srgb, var(--cream) 55%, transparent);
}

.modes { display: grid; gap: 8px; }
.mode {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 72px;
}
.mode img { width: 92px; height: 72px; object-fit: cover; }
.mode h3 { font-size: 18px; font-weight: 900; font-style: italic; }
.mode p { font-size: 12px; color: var(--text-2); }

.table { display: grid; gap: 8px; }
.table .sec {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px;
}
.group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid var(--border);
}
.row:first-child { border-top: 0; }
.ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--cream);
  display: grid; place-items: center; flex: none;
}
.ico b {
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(var(--cta-top), var(--cta-bot));
  display: grid; place-items: center;
  color: #fff; font-size: 10px;
}
.row .go { margin-left: auto; color: var(--muted); font-weight: 800; }

.lang { display: flex; gap: 8px; }
.lang button {
  flex: 1;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px;
  font-weight: 800;
  cursor: pointer;
}
.lang button.on {
  background: linear-gradient(180deg, var(--cta-top), var(--cta-bot));
  color: #fff;
  border-color: var(--cta-bot);
  text-shadow: 0 1px 0 var(--cta-ink);
}

.en { display: none; }
body.show-en .tr { display: none; }
body.show-en .en { display: block; }
body.show-en .en.grid,
body.show-en article.en,
body.show-en .posters.en,
body.show-en .quests.en,
body.show-en .table.en { display: grid; }

form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input:not([type="checkbox"]), textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
}
textarea { min-height: 140px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }
.check input { width: auto; height: 18px; margin-top: 2px; accent-color: var(--mint); }
.note { font-size: 13px; color: var(--muted); }
.ok { color: var(--mint-hi); font-weight: 800; }
.err { color: var(--danger); font-weight: 800; }

.quests { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.quest {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 10px;
  min-height: 140px;
}
.quest h3 { font-size: 13px; font-weight: 900; font-style: italic; }
.quest p { font-size: 11px; color: var(--text-2); margin-top: 6px; }
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, color-mix(in srgb, var(--yellow) 46%, transparent), color-mix(in srgb, var(--orange) 28%, transparent), color-mix(in srgb, var(--mint) 22%, transparent));
  border: 1.4px solid color-mix(in srgb, var(--yellow) 72%, transparent);
}

.arena {
  height: 250px;
  perspective: 820px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 20%, #1d9fce33, #0b1018 62%);
  border: 1px solid var(--border);
}
.arena-rig {
  width: 210px;
  height: 210px;
  margin: 28px auto 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg);
  animation: spin 32s linear infinite;
  position: relative;
}
.bowl {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 41%, #14191f 42% 46%, transparent 47%),
    repeating-radial-gradient(circle, #171c21 0 10px, #2a3036 10px 18px);
  background-image:
    radial-gradient(circle, transparent 40%, rgba(20,25,31,.72) 41% 48%, #14191f 49%),
    url("stadium-crowd.jpg");
  background-size: cover;
  box-shadow:
    0 0 0 10px #222831,
    0 0 0 16px #1a2027,
    0 0 0 22px #14191f,
    0 28px 40px #0008;
}
.apron {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: #6f6a64;
  box-shadow: inset 0 0 0 7px var(--chalk);
}
.turf {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(248,251,255,.92) 28% 29.2%, transparent 30%),
    conic-gradient(from 0deg, var(--grass-a) 0 18deg, var(--grass-b) 18deg 36deg),
    url("pitch-turf.jpg") center/cover;
  background-blend-mode: multiply, normal, normal;
  box-shadow: inset 0 0 0 4px var(--chalk), inset 0 0 28px #1f612e88;
}
.turf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48.6%, var(--chalk) 48.6% 51.4%, transparent 51.4%),
    linear-gradient(#0000, #0000);
  opacity: .9;
}
.goal {
  position: absolute;
  top: 46%;
  width: 14%;
  height: 8%;
  background: #d8dee3;
  border-radius: 2px;
  box-shadow: 0 0 8px #57d5f0aa;
}
.goal.l { left: -2%; }
.goal.r { right: -2%; }
@keyframes spin { to { transform: rotateX(58deg) rotateZ(360deg); } }

.hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a, .tabs button {
  border: 1px solid var(--border);
  background: var(--fill);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.tabs a.on, .tabs button.on { background: color-mix(in srgb, var(--mint) 22%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--mint) 45%, transparent); }

@media (max-width: 360px) {
  :root { --rail: 64px; }
  .poster h2 { font-size: 14px; }
  .title { font-size: 18px; }
}