:root {
  --bg: #0c1710;
  --panel: #13241a;
  --panel2: #1a3022;
  --line: #2b4a35;
  --text: #e8f3dc;
  --muted: #8eab8f;
  --accent: #ffd23f;
  --accent-ink: #1b1400;
  --good: #5fd068;
  --bad: #ff5d4f;
  --warn: #ffa53a;
  --home: #ffd23f;
  --away: #5ab4ff;
  --pitch1: #1d6a35;
  --pitch2: #1a6030;
  --pixel: 'Tiny5', 'JetBrains Mono', monospace;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #050a07; color: var(--text); }
body { font: 14px/1.35 var(--mono); overscroll-behavior: none; }
button { font: inherit; color: inherit; }

#app {
  max-width: 480px; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column; background: var(--bg);
  border-left: 1px solid #0f2016; border-right: 1px solid #0f2016;
}

/* ---------- верхня панель ---------- */
#topbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: linear-gradient(#1c3526, #13241a); border-bottom: 2px solid #000;
  font-family: var(--pixel); font-size: 15px; min-height: 40px;
}
#topbar .club { font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .dot { width: 12px; height: 12px; border: 2px solid #000; flex: none; }
#topbar .spacer { flex: 1; }
#topbar .meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
#topbar .money { color: var(--good); white-space: nowrap; }
#topbar .money.neg { color: var(--bad); }

#screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 20px; }

/* ---------- нижні кнопки як у телефоні ---------- */
#softkeys {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px calc(6px + var(--safe-bottom)); background: #0a130d; border-top: 2px solid #000;
  font-family: var(--pixel); min-height: 44px;
}
#softkeys button { background: none; border: 0; padding: 8px 10px; color: var(--accent); font-size: 16px; cursor: pointer; }
#softkeys button:disabled { color: #3c5a44; }
#softkeys .mid { color: var(--muted); font-size: 12px; }
body.tg #softkeys .back { visibility: hidden; }

/* ---------- базові блоки ---------- */
h1, h2, h3 { font-family: var(--pixel); font-weight: 700; margin: 0 0 8px; letter-spacing: .02em; }
h1 { font-size: 26px; color: var(--accent); }
h2 { font-size: 18px; color: var(--accent); }
h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.muted { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }

.card {
  background: var(--panel); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line);
  padding: 10px 12px; margin-bottom: 12px;
}
.card.hl { box-shadow: inset 0 0 0 1px var(--accent); }

.btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  background: var(--panel2); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 #000;
  padding: 11px 10px; font-family: var(--pixel); font-size: 16px; margin-bottom: 10px; color: var(--text);
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 #000; }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px #fff6, 0 3px 0 #000; }
.btn.small { padding: 6px 8px; font-size: 14px; width: auto; display: inline-block; margin: 0; }
.btn:disabled { opacity: .45; cursor: default; }
.btn .sub { display: block; font-family: var(--mono); font-size: 11px; opacity: .7; margin-top: 2px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid2 .btn { margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid3 .btn { margin: 0; font-size: 14px; padding: 10px 4px; }

.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button {
  flex: 1; background: var(--panel); border: 2px solid #000; padding: 8px 4px; cursor: pointer;
  font-family: var(--pixel); font-size: 14px; color: var(--muted);
}
.tabs button.on { background: var(--accent); color: var(--accent-ink); }

.seg { display: flex; border: 2px solid #000; margin-bottom: 8px; }
.seg button { flex: 1; background: var(--panel); border: 0; border-right: 1px solid #000; padding: 8px 2px; cursor: pointer; font-size: 12px; color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--panel2); color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

select {
  background: var(--panel2); color: var(--text); border: 2px solid #000; padding: 7px 8px; font: inherit; width: 100%;
}

/* ---------- таблиці ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { color: var(--muted); font-weight: 400; text-align: right; padding: 4px 3px; border-bottom: 1px solid var(--line); font-size: 11px; }
table.t td { padding: 6px 3px; text-align: right; border-bottom: 1px solid #0b150e; }
table.t th:nth-child(2), table.t td:nth-child(2) { text-align: left; }
table.t td:first-child, table.t th:first-child { text-align: left; color: var(--muted); width: 22px; }
table.t tr.me td { background: #2a3a12; color: var(--accent); }
table.t tr.click { cursor: pointer; }
table.t tr.zone-cl td:first-child { box-shadow: inset 3px 0 0 #4aa3ff; }
table.t tr.zone-el td:first-child { box-shadow: inset 3px 0 0 #ff9f1c; }
table.t tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.t tr.zone-po td:first-child { box-shadow: inset 3px 0 0 #e8d44d; }
table.t tr.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.form { display: inline-flex; gap: 2px; }
.form i { width: 9px; height: 9px; display: inline-block; font-style: normal; }
.form .W { background: var(--good); } .form .D { background: #9aa39a; } .form .L { background: var(--bad); }

.list-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid #0a130d; cursor: pointer;
}
.list-item:active { background: var(--panel2); }
.badge {
  font-family: var(--pixel); font-size: 12px; padding: 1px 5px; border: 1px solid #000; min-width: 34px; text-align: center; flex: none;
}
.pos-ВР { background: #f4b400; color: #000; }
.pos-ЗХ { background: #3d7eea; color: #fff; }
.pos-ПЗ { background: #33a852; color: #fff; }
.pos-НАП { background: #e8453c; color: #fff; }
.ovr { font-family: var(--mono); font-weight: 700; font-size: 15px; min-width: 24px; text-align: right; color: var(--accent); }
.fit { width: 36px; height: 6px; background: #000; flex: none; position: relative; }
.fit > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); }
.fit.mid > i { background: var(--warn); } .fit.low > i { background: var(--bad); }
.tag { font-size: 10px; padding: 0 4px; border: 1px solid; margin-left: 4px; }
.tag.inj { color: var(--bad); } .tag.ban { color: var(--warn); } .tag.cap { color: var(--accent); }

.bar { height: 10px; background: #000; position: relative; flex: 1; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.skill { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; margin: 6px 0; }
.skill b { font-family: var(--mono); text-align: right; }

.crest {
  width: 30px; height: 34px; flex: none; border: none; position: relative;
  display: grid; place-items: center; font-family: var(--pixel); font-size: 12px; font-weight: 700;
  background: transparent; box-shadow: none;
}
/* кольоровий запасний щит (без емблеми) */
span.crest {
  border: 2px solid #000;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background: #1a2a1e; box-shadow: 2px 2px 0 #0006;
}
img.crest, .crest-img {
  object-fit: contain; object-position: center; background: transparent; padding: 0;
  image-rendering: auto; filter: drop-shadow(1px 1px 0 #0008);
}
img.crest.crest-fallback {
  object-fit: unset; background-size: 100% 100%; padding: 0; filter: none;
  border: 2px solid #000; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: 2px 2px 0 #0006;
}
.flag {
  flex: none; display: inline-block; vertical-align: middle;
  border: 1px solid #000; box-shadow: 1px 1px 0 #0006; object-fit: cover;
  background: #1a2a1e;
}
.flag-empty {
  font-family: var(--mono); font-size: 9px; padding: 0 3px; border: 1px solid #000;
  background: #1a2a1e; color: var(--muted);
}
.face {
  flex: none; width: 32px; height: 40px; object-fit: cover; object-position: center 8%;
  border: 2px solid #000; background: transparent; image-rendering: auto; box-shadow: 2px 2px 0 #0006;
}
.face.face-empty, span.face-empty {
  display: inline-block; width: 32px; height: 40px; background:
    linear-gradient(180deg, #2a3a2e 0 38%, #1a2a1e 38% 100%);
  box-shadow: inset 0 0 0 1px #0008, 2px 2px 0 #0006;
}
.slot .face {
  width: 42px; height: 54px; margin: 0 auto; display: block;
  object-fit: cover; object-position: center 6%;
}
.slot .nm .no { color: var(--accent); font-family: var(--mono); }
.stars { color: var(--accent); letter-spacing: 1px; font-size: 12px; }

/* ---------- стартовий екран ---------- */
.splash { text-align: center; padding: 30px 8px 10px; }
.splash .logo {
  font-family: var(--pixel); font-size: 54px; line-height: .95; color: var(--accent);
  text-shadow: 4px 4px 0 #000, -1px -1px 0 #000; margin: 10px 0 6px;
}
.splash .logo small { display: block; font-size: 22px; color: var(--text); letter-spacing: .3em; margin-top: 8px; }
.splash .ball { font-size: 40px; animation: bob 1.2s steps(4) infinite; display: inline-block; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- поле складу ---------- */
.pitch {
  position: relative; width: 100%; aspect-ratio: 68 / 88; border: 2px solid #000;
  background: repeating-linear-gradient(0deg, var(--pitch1) 0 10%, var(--pitch2) 10% 20%);
  overflow: hidden; margin-bottom: 10px; user-select: none;
}
.pitch .lines { position: absolute; inset: 4%; border: 2px solid #ffffff55; }
.pitch .lines::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #ffffff55; }
.pitch .lines::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid #ffffff55; border-radius: 50%; transform: translate(-50%, -50%); }
.pitch .box { position: absolute; left: 27%; right: 27%; height: 13%; border: 2px solid #ffffff55; }
.pitch .box.top { top: 4%; border-top: 0; } .pitch .box.bottom { bottom: 4%; border-bottom: 0; }
.slot {
  position: absolute; transform: translate(-50%, -50%); width: 78px; text-align: center; cursor: pointer;
}
.slot .shirt {
  width: 30px; height: 30px; margin: 0 auto; border: 2px solid #000; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700; box-shadow: 2px 2px 0 #0006; position: relative;
}
.slot .nm {
  font-size: 10px; background: #000c; padding: 1px 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot .nm .o { color: var(--accent); }
.slot.sel .shirt, .slot.sel .face { outline: 3px solid var(--accent); outline-offset: 1px; }
.slot.warn .nm { color: var(--warn); }
.slot.empty .shirt { background: #0006 !important; border-style: dashed; color: #fff8; }
.slot .pl { position: absolute; top: -6px; left: 14px; font-size: 9px; background: #000; padding: 0 2px; color: var(--accent); }
.slot .ov { position: absolute; top: -7px; right: 12px; font: 700 11px var(--mono); background: #000; color: var(--accent); padding: 0 3px; }

.player-row.sel { background: #3a3a10; box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- матч ---------- */
.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  background: #000; border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); padding: 8px; margin-bottom: 8px;
}
.scoreboard .team { font-family: var(--pixel); font-size: 15px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.scoreboard .team.away { justify-content: flex-end; text-align: right; }
.scoreboard .score { font-family: var(--mono); font-weight: 700; font-size: 28px; color: var(--accent); text-align: center; line-height: 1; min-width: 86px; }
.scoreboard .min { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; font-family: var(--mono); }
.scoreboard .sw { width: 10px; height: 10px; border: 1px solid #000; flex: none; }
canvas#pitch { width: 100%; display: block; border: 2px solid #000; image-rendering: pixelated; background: var(--pitch1); }
.match-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 8px 0; }
.match-controls .btn { margin: 0; font-size: 14px; padding: 9px 4px; }
.log { background: #050b07; border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--line); height: 210px; overflow-y: auto; padding: 4px 8px; font-size: 12.5px; }
.log p { margin: 0; padding: 4px 0; border-bottom: 1px dashed #14261a; }
.log .m { color: var(--muted); display: inline-block; min-width: 30px; }
.log .goal { color: var(--accent); font-weight: 700; }
.log .yellow::before { content: '▮ '; color: #ffd400; }
.log .red::before { content: '▮ '; color: var(--bad); }
.log .injury { color: var(--warn); }
.log .sub { color: #9bc8ff; }
.log .half, .log .end, .log .info { color: #c9d9c0; font-style: italic; }
.stat-row { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.stat-row .lbl { text-align: center; color: var(--muted); font-size: 11px; grid-column: 1 / -1; margin-bottom: -4px; }
.duo { display: flex; height: 8px; background: #000; }
.duo i { display: block; height: 100%; }
.goal-flash { animation: flash .9s steps(3) 2; }
@keyframes flash { 50% { filter: brightness(1.8) saturate(1.5); } }

/* ---------- модальне вікно ---------- */
#modal {
  position: fixed; inset: 0; background: #000b; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
}
#modal[hidden] { display: none; }
#modal .sheet {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--bg);
  border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--accent); padding: 14px 12px calc(14px + var(--safe-bottom));
}
#toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 60;
  background: var(--accent); color: var(--accent-ink); border: 2px solid #000; padding: 8px 14px;
  font-family: var(--pixel); max-width: 90vw; box-shadow: 0 3px 0 #000;
}
#toast[hidden] { display: none; }

.news p { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--line); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.kv > :nth-child(odd) { color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 36px; height: 32px; background: var(--panel2); border: 2px solid #000; cursor: pointer; font-family: var(--pixel); font-size: 18px; }
.stepper b { font-family: var(--mono); font-size: 18px; min-width: 60px; text-align: center; }

.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.vs .nm { font-family: var(--pixel); font-size: 18px; }
.cmp { display: grid; grid-template-columns: 30px 1fr 70px 1fr 30px; align-items: center; gap: 6px; font-size: 12px; margin: 6px 0; }
.cmp .l { display: flex; justify-content: flex-end; }
.cmp .l i, .cmp .r i { height: 8px; display: block; }
.cmp .c { text-align: center; color: var(--muted); }

@media (max-width: 360px) {
  body { font-size: 13px; }
  .slot { width: 60px; }
  .skill { grid-template-columns: 96px 1fr 26px; }
}