@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&family=Press+Start+2P&display=swap');

:root {
  --bg: #e9f4ff;
  --card: #ffffff;
  --card-2: #f6f3ea;
  --text: #1d1a2b;
  --muted: #6b6880;
  --line: #1d1a2b;
  --sky-1: #7cc4ff;
  --sky-2: #bfe3ff;
  --grass: #5bbf3a;
  --grass-dark: #3b8a26;
  --dirt: #b86a32;
  --q: #f5c542;
  --q-dark: #c8901a;
  --red: #d63c3c;
  --green: #2f9e44;
  --blue: #3d7be0;
  --chip: #eceaf3;
  --px: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12111c; --card: #221f33; --card-2: #1a1828; --text: #f1eefa; --muted: #a39fbb;
    --line: #000000; --sky-1: #1b2350; --sky-2: #34306b; --grass: #3e8f2a; --grass-dark: #275e1a;
    --dirt: #7a4522; --chip: #2e2a44;
  }
}
:root[data-theme="dark"] {
  --bg: #12111c; --card: #221f33; --card-2: #1a1828; --text: #f1eefa; --muted: #a39fbb;
  --line: #000000; --sky-1: #1b2350; --sky-2: #34306b; --grass: #3e8f2a; --grass-dark: #275e1a;
  --dirt: #7a4522; --chip: #2e2a44;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.app { max-width: 440px; margin: 0 auto; padding: 0 16px 120px; }
svg { display: block; image-rendering: pixelated; }

.pixel { font-family: 'Pixelify Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; }
.num { font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1.6; }

/* Рамка «пиксельной» карточки: углы срезаны, как у спрайтов */
.box {
  position: relative;
  background: var(--card);
  margin: var(--px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line),
    0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line),
    var(--px) 0 0 0 var(--line),
    0 calc(2 * var(--px)) 0 0 rgba(0,0,0,.18);
}
.box + .box { margin-top: 20px; }
.box-pad { padding: 14px 14px 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; color: #1d1a2b;
  background: var(--q);
  font: 700 16px 'Pixelify Sans', system-ui, sans-serif;
  padding: 10px 16px;
  margin: var(--px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset 0 calc(-1 * var(--px)) 0 0 var(--q-dark);
}
.btn:active { transform: translateY(2px); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line); }
.btn.secondary { background: var(--chip); color: var(--text); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
    calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line); }

/* Небо с облаками и землёй */
.sky {
  position: relative; overflow: hidden;
  margin: 0 -16px 20px; padding: 18px 16px 34px;
  background: linear-gradient(var(--sky-1), var(--sky-2));
}
.sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background:
    linear-gradient(var(--grass) 0 8px, var(--grass-dark) 8px 12px, transparent 12px),
    repeating-linear-gradient(90deg, var(--dirt) 0 14px, color-mix(in srgb, var(--dirt) 75%, #000) 14px 16px);
}
.sky .cloud { position: absolute; opacity: .95; }
:root[data-theme="dark"] .sky .cloud { opacity: .25; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sky .cloud { opacity: .25; } }


.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
h2.pixel { font-size: 18px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }

/* Миры аватара */
.world { width: 104px; height: 104px; flex: none; display: grid; place-items: center; position: relative; overflow: hidden; }
.world svg { position: relative; z-index: 1; }
.world.meadow { background: linear-gradient(#8fd0ff 0 72%, #5bbf3a 72% 80%, #b86a32 80%); }
.world.castle { background:
    linear-gradient(transparent 0 80%, #6b4a3a 80%),
    repeating-linear-gradient(0deg, #a5583a 0 10px, #7a3f2a 10px 12px),
    #a5583a; }
.world.night { background:
    radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(#1b2350 0 80%, #3b3470 80%); }
.world.space { background:
    radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(circle at 70% 30%, #7a3cff55, transparent 60%),
    #120a2a; }
.world.lava { background:
    linear-gradient(transparent 0 78%, #ff6a1a 78% 82%, #b8320f 82%),
    radial-gradient(circle at 50% 120%, #ff8a1f, transparent 60%),
    #3a1410; }
.world.heaven { background:
    radial-gradient(ellipse 30% 12% at 20% 80%, #fff 98%, transparent),
    radial-gradient(ellipse 35% 12% at 80% 85%, #fff 98%, transparent),
    linear-gradient(#ffe7a3, #ffc65a); }
.world.galaxy { background:
    radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(circle at 30% 30%, #ff5fd2aa, transparent 45%),
    radial-gradient(circle at 75% 70%, #5fd8ffaa, transparent 45%),
    #0b0620; }

.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: var(--q); color: #1d1a2b; padding: 10px 16px;
  font: 700 15px 'Pixelify Sans', sans-serif;
  box-shadow: 0 -4px 0 0 #1d1a2b, 0 4px 0 0 #1d1a2b, -4px 0 0 0 #1d1a2b, 4px 0 0 0 #1d1a2b;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ---------- Экран ученика ---------- */
  .hero { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; }
  .hero .box { margin: 4px; flex: none; }
  .hero-name { font-size: 24px; line-height: 1.1; margin: 0 0 4px; color: #1d1a2b; }
  :root[data-theme="dark"] .hero-name { color: #fff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-name { color: #fff; } }
  .status-badge {
    display: inline-block; background: rgba(255,255,255,.85); color: #1d1a2b;
    font: 700 14px 'Pixelify Sans', sans-serif; padding: 3px 8px; margin: 2px 0 8px;
    box-shadow: 0 -2px 0 0 #1d1a2b, 0 2px 0 0 #1d1a2b, -2px 0 0 0 #1d1a2b, 2px 0 0 0 #1d1a2b;
  }
  .xp-label { font-size: 13px; margin-top: 6px; color: #1d1a2b; }
  :root[data-theme="dark"] .xp-label { color: #e8e4ff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xp-label { color: #e8e4ff; } }

  .abon { background: var(--q); color: #1d1a2b; }
  .abon::before, .abon::after { content: ""; position: absolute; top: 8px; width: 6px; height: 6px; background: var(--q-dark); }
  .abon::before { left: 8px; } .abon::after { right: 8px; }
  .abon h2 { justify-content: center; }
  .hearts { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; justify-items: center; margin: 6px 0 10px; }
  .hearts svg { width: 100%; max-width: 36px; height: auto; }
  .abon-big { text-align: center; font: 700 20px 'Pixelify Sans', sans-serif; }
  .abon-big .num { font-size: 22px; vertical-align: -2px; }
  .abon-sub { text-align: center; font-size: 14px; color: #5a4310; margin-top: 2px; }
  .abon.debt { background: #ffd9d9; }
  .abon.debt::before, .abon.debt::after { background: var(--red); }

  .rank { display: flex; gap: 12px; align-items: center; }
  .rank b { font-family: 'Pixelify Sans', sans-serif; font-size: 18px; }

  /* Регалии: каждая медаль видна. Сначала 3 ряда справа от аватара, дальше — во всю ширину под ним */
  .medals { display: flex; flex-wrap: wrap; gap: 3px; }
  .medals:empty { display: none; }
  .medals svg { width: 18px; height: 22px; }
  .medals.wide { position: relative; z-index: 1; margin-top: 8px; }
  .medals-plus { width: 22px; height: 22px; border: 0; padding: 0; cursor: pointer; align-self: center;
                 font: 12px 'Press Start 2P', monospace; background: rgba(255,255,255,.8); color: #1d1a2b;
                 box-shadow: 0 -2px 0 0 #1d1a2b, 0 2px 0 0 #1d1a2b, -2px 0 0 0 #1d1a2b, 2px 0 0 0 #1d1a2b; margin: 2px; }
  .hero-side { display: flex; flex-direction: column; gap: 6px; }
  .sheet-bg { position: fixed; inset: 0; background: rgba(10,8,20,.5); z-index: 60; display: none; }
  .sheet-bg.show { display: block; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto; z-index: 61;
           max-width: 440px; margin: 0 auto; background: var(--card); padding: 16px 16px 24px;
           box-shadow: 0 -4px 0 0 var(--line); transform: translateY(105%); transition: transform .2s; }
  .sheet.show { transform: none; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .sheet-head h2 { margin: 0; }
  .sheet-close { border: 0; background: var(--chip); color: var(--text); font-size: 18px; width: 36px; height: 36px; cursor: pointer; }
  .res-year { font: 700 12px 'Press Start 2P', monospace; color: var(--muted); margin: 16px 0 4px; }
  .res { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 0;
         border-top: 2px dashed color-mix(in srgb, var(--muted) 30%, transparent); }
  .res-year + .res { border-top: 0; }
  .res-name { font-size: 15px; } .res-place { font-size: 13px; color: var(--muted); }
  .res-date { font: 10px 'Press Start 2P', monospace; color: var(--muted); }

  .feed-month { font: 700 13px 'Press Start 2P', monospace; color: var(--muted); margin: 18px 0 8px; }
  .feed-month:first-child { margin-top: 4px; }
  .op { display: grid; grid-template-columns: 46px 1fr auto; gap: 4px 10px; align-items: center;
        padding: 10px 0; border-top: 2px dashed color-mix(in srgb, var(--muted) 35%, transparent); }
  .feed-month + .op { border-top: 0; }
  .op-date { font: 10px 'Press Start 2P', monospace; color: var(--muted); }
  .op-title { font-size: 16px; }
  .op-right { text-align: right; }
  .op-delta { font: 12px 'Press Start 2P', monospace; }
  .op-delta.minus { color: var(--text); }
  .op-delta.plus { color: var(--green); }
  .op.topup { background: color-mix(in srgb, var(--green) 10%, transparent); margin: 0 -14px; padding: 10px 14px; }
  .more { width: calc(100% - 8px); margin-top: 14px; }

/* ---------- Админка ---------- */
  .topbar { padding: 16px 0 6px; }
  .topbar h1 { font-size: 24px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
  .field input, .field select {
    font: 600 16px system-ui, sans-serif; color: var(--text); background: var(--card);
    border: 0; padding: 10px; margin: 3px;
    box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
  }

  /* Высота строки фиксирована: отметка не двигает список */
  .list { margin-top: 18px; }
  .stu { padding: 10px 12px; height: 72px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .stu + .stu { margin-top: 14px; }
  .stu.on { background: color-mix(in srgb, var(--green) 14%, var(--card)); }
  .stu.on.x2 { background: color-mix(in srgb, var(--q) 30%, var(--card)); }
  .stu .row { height: 100%; gap: 10px; }
  .ava { width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; }
  .stu-name { font-weight: 600; font-size: 15px; line-height: 1.15; overflow: hidden;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .stu-bal { font: 10px 'Press Start 2P', monospace; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; color: var(--muted); }
  .stu-bal.low { color: var(--red); }
  .stu-bal .arrow { color: var(--text); }

  .mode {
    width: 86px; height: 44px; flex: none; border: 0; cursor: pointer; padding: 0 4px;
    font: 600 12px/1.15 system-ui, sans-serif; color: var(--text); background: var(--chip);
    visibility: hidden;
  }
  .stu.on .mode { visibility: visible; }
  .mode small { display: block; font-weight: 500; color: var(--muted); }
  .mode.unpaid small { color: var(--red); font-weight: 700; }
  .counter {
    width: 50px; height: 44px; flex: none; display: grid; place-items: center;
    font: 14px 'Press Start 2P', monospace; background: var(--chip); color: var(--muted);
    box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
    margin: 3px;
  }
  .stu.on .counter { background: var(--green); color: #fff; }
  .stu.on.x2 .counter { background: var(--q); color: #1d1a2b; }

  .bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--card); box-shadow: 0 -4px 0 0 var(--line);
  }
  .bottombar-inner { max-width: 440px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 8px; min-height: 68px; }
  .summary { flex: 1; font-size: 14px; line-height: 1.3; }
  .summary b { font-family: 'Pixelify Sans', sans-serif; font-size: 18px; }
  #hintBtn { display: none; background: #fff; padding: 8px 10px; font-size: 14px; }
  #hintBtn.show { display: inline-flex; }
  .tabs { display: flex; border-top: 2px solid color-mix(in srgb, var(--muted) 30%, transparent); max-width: 440px; margin: 0 auto; }
  .tabs a { flex: 1; text-align: center; padding: 8px 0 10px; font: 600 12px system-ui, sans-serif; color: var(--muted); text-decoration: none; }
  .tabs a.active { color: var(--text); }
  .tabs a span { display: block; font-size: 18px; }

/* ---------- Общие формы и страницы ---------- */
.center { text-align: center; }
.page-msg { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.page-msg .box { padding: 24px 18px; max-width: 360px; }
.page-msg h1 { font-size: 22px; margin: 12px 0 8px; }
.icon-big { display: flex; justify-content: center; }
.input, select.input, textarea.input {
  width: 100%; font: 16px system-ui, sans-serif; color: var(--text); background: var(--card);
  border: 0; padding: 10px; margin: 3px 0;
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
}
label.f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); margin: 10px 3px; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 10px 3px; }
label.check input { width: 20px; height: 20px; accent-color: var(--green); }
.flash { background: var(--q); color: #1d1a2b; padding: 10px 14px; margin-bottom: 18px; }
.flash.err { background: var(--red); color: #fff; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 2px dashed color-mix(in srgb, var(--muted) 30%, transparent); color: inherit; text-decoration: none; }
.list-row:first-child { border-top: 0; }
.pill { font: 10px 'Press Start 2P', monospace; padding: 4px 6px; background: var(--chip); white-space: nowrap; }
.pill.red { background: var(--red); color: #fff; }
.pill.green { background: var(--green); color: #fff; }
.small { font-size: 13px; }
.mini-btn { font: 600 13px system-ui, sans-serif; border: 0; padding: 6px 10px; cursor: pointer; background: var(--chip); color: var(--text); }
.mini-btn.yes { background: var(--green); color: #fff; }
.inline { display: inline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big-num { font: 15px 'Press Start 2P', monospace; margin: 6px 0; white-space: nowrap; }
.link-box { font: 13px ui-monospace, Consolas, monospace; background: var(--chip); padding: 10px; word-break: break-all; margin: 8px 0; }
h1.page-title { font-size: 24px; margin: 18px 0 14px; }

.app.admin { padding-bottom: 170px; }

/* В тёмной теме тёмный контур спрайтов сливается с фоном — даём светлую обводку */
:root[data-theme="dark"] #trophy svg, :root[data-theme="dark"] .res svg, :root[data-theme="dark"] .medals svg {
  filter: drop-shadow(1px 0 0 #8c86a0) drop-shadow(-1px 0 0 #8c86a0) drop-shadow(0 1px 0 #8c86a0) drop-shadow(0 -1px 0 #8c86a0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #trophy svg, :root:not([data-theme="light"]) .res svg, :root:not([data-theme="light"]) .medals svg {
    filter: drop-shadow(1px 0 0 #8c86a0) drop-shadow(-1px 0 0 #8c86a0) drop-shadow(0 1px 0 #8c86a0) drop-shadow(0 -1px 0 #8c86a0);
  }
}

/* Первая строка списка сразу под заголовком — без разделителя */
h2.pixel + .list-row { border-top: 0; }