/* ==========================================================================
   «ЗАПИС» — демо-гра з боку клієнта, як вона живе на сайті.

   ЗГЕНЕРОВАНО. Правити треба джерело — окремий файл гри — і перезапустити
   `python3 tools/build_game_assets.py`. Руками тут нічого не лишиться.

   Дві відмінності від джерела, і обидві продиктовані сайтом:

   1. Усе заскоуплено під `.gra`, кейфрейми названі `g-*`. Гра їде всередині
      звичайної сторінки з власним хедером і футером, де `.card` і `.big`
      уже зайняті.
   2. Жодного Google Fonts. Сайт самохоститься навмисно — лінк на
      fonts.googleapis.com віддав би IP читача на американський сервер, тобто
      рівно те, чого решта збірки не допускає. Гра бере шрифти сайту.
   ========================================================================== */

.gra {
  --ink:        #14101f;   /* ґрунт — чорнило з фіолетовим ухилом, не сірий */
  --ink-2:      #1e1830;
  --ink-3:      #2a2140;
  --edge:       #3a2f56;

  --paper:      #f6f1e8;
  --dim:        #a094bd;
  --faint:      #6d6291;

  --gold:       #f0b429;   /* золото паспорта — головний акцент */
  --gold-deep:  #a97a0e;
  --green:      #38d39f;   /* вікно відчинене */
  --red:        #ff4d5e;   /* дедлайн і втрата */
  --blue:       #4d84ff;   /* СЕРВІС. З'являється не одразу */
  --violet:     #b57bff;   /* тремтіння черги — сигнал рефлексу */

  --disp: var(--font-sans);
  --ui:   var(--font-sans);
  --mono: var(--font-mono);

  /* На сторінці це панель, а не вся вкладка: висота обмежена, кути скруглені.
     `min-height` тримає сітку 4×6 придатною до тапання на низьких екранах. */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  height: min(76vh, 780px);
  min-height: 540px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  touch-action: manipulation;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 24px 60px -24px rgba(20, 16, 31, .55);
}

.gra * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Кожен екран — окремий шар, вони змінюють один одного, а не гортаються. */
.gra .screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  gap: 10px;
}

.gra .screen[hidden] { display: none; }

.gra button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.gra button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Кнопка гри: товста, з твердою тінню знизу. Ніякого web-градієнта.
   -------------------------------------------------------------------------- */
.gra .big {
  display: block; width: 100%;
  font-family: var(--disp); font-weight: 800;
  font-size: 19px; letter-spacing: .02em;
  padding: 16px; border-radius: 16px;
  background: var(--gold); color: #20160a;
  box-shadow: 0 5px 0 var(--gold-deep);
  transition: transform .07s, box-shadow .07s;
  flex: none;
}

.gra .big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-deep); }

.gra .big[disabled] { background: var(--ink-3); color: var(--faint); box-shadow: 0 5px 0 #1a1428; }

.gra .big.gr { background: var(--green); color: #05221a; box-shadow: 0 5px 0 #1c8a67; }

.gra .big.bl { background: var(--blue); color: #fff; box-shadow: 0 5px 0 #22499e; }

.gra .big.ghost { background: none; color: var(--dim); box-shadow: inset 0 0 0 2px var(--edge); font-size: 15px; padding: 12px; }

.gra .big.ghost:active { transform: none; box-shadow: inset 0 0 0 2px var(--edge); }

/* --------------------------------------------------------------------------
   HUD
   -------------------------------------------------------------------------- */
.gra #g-hud { flex: none; display: flex; flex-direction: column; gap: 8px; }

.gra .hud-top { display: flex; align-items: center; gap: 8px; }

.gra .chain {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--disp); font-weight: 800; font-size: 17px;
}

.gra .chain .n {
  font-family: var(--mono); font-size: 15px;
  background: var(--green); color: #05221a;
  border-radius: 8px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.gra .chain small { display: block; margin-top: -3px; font-family: var(--ui); font-weight: 500; font-size: 11px; color: var(--dim); letter-spacing: 0; }

.gra .chain > span { line-height: 1.05; }

.gra .rec {
  font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  color: var(--gold); background: rgba(240,180,41,.12);
  border: 1.5px solid rgba(240,180,41,.35);
  border-radius: 9px; padding: 4px 8px;
}

.gra .dead {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--mono); font-weight: 700;
  background: rgba(255,77,94,.13);
  border: 1.5px solid rgba(255,77,94,.45);
  color: var(--red);
  padding: 4px 9px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.gra .dead b { font-size: 18px; line-height: 1; }

.gra .dead span { font-size: 9px; letter-spacing: .08em; }

.gra .dead.urgent { animation: g-throb 1s ease-in-out infinite; }

@keyframes g-throb { 50% { background: rgba(255,77,94,.32); } }

.gra .meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.gra .meter { background: var(--ink-2); border-radius: 10px; padding: 6px 8px 7px; display: flex; flex-direction: column; gap: 4px; }

.gra .meter .r { display: flex; align-items: center; gap: 4px; }

.gra .meter .ic { font-size: 12px; line-height: 1; }

.gra .meter .n { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.gra .meter .lb { font-size: 9px; letter-spacing: .09em; color: var(--faint); font-weight: 700; }

.gra .meter .track { height: 4px; border-radius: 3px; background: #120e1c; overflow: hidden; }

.gra .meter .track i { display: block; height: 100%; border-radius: 3px; transition: width .3s ease, background .3s; }

.gra .meter.low .n { color: var(--red); }

.gra .meter.low { animation: g-throb 1.1s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Рядок над сіткою: підказка + рефлекс + лічильник перевірок
   -------------------------------------------------------------------------- */
.gra .plan-lead { flex: none; display: flex; align-items: center; gap: 7px; min-height: 32px; }

.gra .plan-lead .txt { font-size: 13px; line-height: 1.3; color: var(--dim); flex: 1; }

.gra .plan-lead .txt b { color: var(--paper); font-weight: 700; }

.gra .pill {
  flex: none; font-family: var(--mono); font-weight: 700; font-size: 12.5px;
  background: var(--ink-2); border: 1.5px solid var(--edge);
  border-radius: 9px; padding: 5px 9px; font-variant-numeric: tabular-nums;
}

.gra .pill.ok { border-color: var(--gold); color: var(--gold); }

.gra #g-bolts { flex: none; display: flex; gap: 3px; font-size: 15px; line-height: 1; }

.gra #g-bolts i { font-style: normal; filter: grayscale(1) brightness(.45); transition: filter .2s, transform .2s; }

.gra #g-bolts i.on { filter: none; transform: scale(1.12); }

/* --------------------------------------------------------------------------
   Доба: 24 години великими клітинками під палець
   -------------------------------------------------------------------------- */
.gra #g-hours {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}

.gra .hr {
  position: relative;
  background: var(--ink-2);
  border: 2px solid transparent;
  border-radius: 11px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  min-height: 42px;
  transition: background .1s, border-color .1s, transform .08s;
}

.gra .hr:active { transform: scale(.94); }

.gra .hr .h { font-family: var(--mono); font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; line-height: 1; }

.gra .hr .ic { font-size: 9.5px; line-height: 1; opacity: .7; }

.gra .hr.sleep { background: #171128; }

.gra .hr.work { background: #1c1726; }

.gra .hr.free { background: #221b38; }

.gra .hr.on { background: var(--gold); border-color: #ffd873; color: #20160a; box-shadow: 0 0 16px -3px rgba(240,180,41,.6); }

.gra .hr.on .ic { opacity: .5; }

.gra .hr.covered { background: var(--blue); border-color: #8fb2ff; color: #fff; }

.gra .hr.now { border-color: var(--paper); }

/* Тремтіння черги — вікно рефлексу. Єдине, за чим треба стежити очима. */
.gra .hr.tell {
  background: var(--violet);
  border-color: #e2c9ff;
  color: #1a0b2e;
  animation: g-tremor .16s linear infinite;
  z-index: 2;
}

.gra .hr.tell .ic { opacity: .5; }

@keyframes g-tremor {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-1.5px, 1px); }
  75% { transform: translate(1.5px, -1px); }
}

.gra .hr.hit::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 3px solid var(--green); box-shadow: 0 0 22px -2px var(--green);
  animation: g-flash .45s ease-out 3;
}

.gra .hr.dud::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 3px solid var(--red); animation: g-flash .3s ease-out 2;
}

@keyframes g-flash { 50% { opacity: .2; } }

.gra .hr .cost { position: absolute; top: 3px; right: 5px; font-family: var(--mono); font-size: 8px; font-weight: 700; color: var(--faint); }

.gra .hr.on .cost { color: rgba(32,22,10,.55); }

/* --------------------------------------------------------------------------
   Банер: швидкий підсумок доби, що не вимагає тапу
   -------------------------------------------------------------------------- */
.gra #g-banner {
  position: absolute; left: 12px; right: 12px; z-index: 15;
  background: var(--ink-3); border: 2px solid var(--edge);
  border-radius: 14px; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 30px -8px #000;
  animation: g-drop .2s cubic-bezier(.2,.9,.3,1);
}

.gra #g-banner[hidden] { display: none; }

.gra #g-banner .em { font-size: 22px; flex: none; }

.gra #g-banner .tx { font-size: 13px; line-height: 1.35; }

.gra #g-banner .tx b { font-weight: 700; }

.gra #g-banner.bad { border-color: rgba(255,77,94,.6); }

.gra #g-banner.good { border-color: rgba(56,211,159,.6); }

@keyframes g-drop { from { transform: translateY(-14px); opacity: 0; } }

/* --------------------------------------------------------------------------
   Гонка
   -------------------------------------------------------------------------- */
.gra #g-race { gap: 9px; }

.gra .race-top { flex: none; text-align: center; }

.gra .race-top .t { font-family: var(--disp); font-weight: 800; font-size: 21px; color: var(--green); }

.gra .race-top .s { font-size: 12px; color: var(--dim); margin-top: 2px; }

.gra #g-race-count { font-family: var(--mono); font-weight: 700; color: var(--gold); margin-top: 3px; font-size: 12.5px; }

.gra #g-timer { flex: none; height: 9px; border-radius: 5px; background: var(--ink-3); overflow: hidden; }

.gra #g-timer i { display: block; height: 100%; width: 100%; background: var(--green); border-radius: 5px; }

.gra #g-slots { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; }

.gra .slot {
  position: relative;
  background: var(--ink-2); border: 2px solid var(--edge);
  border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--mono); font-weight: 700; min-height: 44px;
  transition: transform .08s, background .1s, border-color .1s;
}

.gra .slot .d { font-size: 9.5px; color: var(--dim); font-weight: 500; }

.gra .slot .tm { font-size: 14.5px; font-variant-numeric: tabular-nums; }

.gra .slot:active { transform: scale(.94); }

.gra .slot.sel { background: var(--green); border-color: #9dffdc; color: #05221a; }

.gra .slot.sel .d { color: rgba(5,34,26,.7); }

.gra .slot.gone { background: #241a24; border-color: #4a2b39; color: #7e5f70; pointer-events: none; }

.gra .slot.gone .d { color: #7e5f70; }

.gra .slot.gone .tm { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }

.gra .slot.gone::after {
  content: "зайнято"; position: absolute; bottom: 3px;
  font-family: var(--ui); font-weight: 700; font-size: 7.5px;
  letter-spacing: .1em; color: var(--red); opacity: .85;
}

.gra .slot.taken { animation: g-shake .34s; background: rgba(255,77,94,.2); border-color: var(--red); }

@keyframes g-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* --------------------------------------------------------------------------
   Картки поверх усього
   -------------------------------------------------------------------------- */
.gra #g-sheet {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(12, 8, 20, .87);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
}

.gra #g-sheet[hidden] { display: none; }

.gra .sheet-card {
  background: var(--ink-2); border: 2px solid var(--edge);
  border-radius: 22px; padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 11px;
  animation: g-rise .2s cubic-bezier(.2,.9,.3,1);
  max-height: calc(100dvh - 28px); overflow-y: auto;
}

@keyframes g-rise { from { transform: translateY(20px); opacity: 0; } }

.gra .sheet-card .em { font-size: 32px; line-height: 1; text-align: center; }

.gra .sheet-card h2 { font-family: var(--disp); font-weight: 800; font-size: 21px; margin: 0; text-align: center; letter-spacing: -.01em; text-wrap: balance; }

.gra .sheet-card h2.g { color: var(--green); }

.gra .sheet-card h2.r { color: var(--red); }

.gra .sheet-card h2.b { color: var(--blue); }

.gra .sheet-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); text-align: center; text-wrap: balance; }

.gra .sheet-card p b { color: var(--paper); font-weight: 700; }

.gra .facts { display: flex; flex-direction: column; gap: 1px; background: var(--edge); border-radius: 12px; overflow: hidden; }

.gra .facts div { display: flex; justify-content: space-between; gap: 10px; background: var(--ink-2); padding: 8px 11px; font-size: 12.5px; }

.gra .facts span { color: var(--faint); }

.gra .facts b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.gra .facts b.g { color: var(--green); }

.gra .facts b.r { color: var(--red); }

.gra .facts b.y { color: var(--gold); }

/* Перки — три великі картки вибору */
.gra .perks { display: flex; flex-direction: column; gap: 8px; }

.gra .perk {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: var(--ink-3); border: 2px solid var(--edge);
  border-radius: 14px; padding: 12px;
  transition: transform .08s, border-color .12s, background .12s;
}

.gra .perk:active { transform: scale(.97); }

.gra .perk:hover { border-color: var(--gold); }

.gra .perk .ic { font-size: 24px; flex: none; }

.gra .perk .tx { flex: 1; min-width: 0; }

.gra .perk .nm { font-family: var(--disp); font-weight: 800; font-size: 14px; margin-bottom: 2px; }

.gra .perk .ds { font-size: 12px; color: var(--dim); line-height: 1.35; }

/* Один жест на всю гру: кінцівка ставиться штампом. */
.gra .stamp {
  align-self: center;
  font-family: var(--disp); font-weight: 800;
  font-size: 20px; letter-spacing: .04em;
  color: var(--red); border: 4px double var(--red);
  border-radius: 8px; padding: 8px 15px;
  transform: rotate(-6deg); opacity: .92;
  animation: g-slam .34s cubic-bezier(.2,1.5,.4,1);
  text-align: center;
}

.gra .stamp.g { color: var(--green); border-color: var(--green); }

@keyframes g-slam { from { transform: rotate(-6deg) scale(2.4); opacity: 0; } }

.gra .newrec {
  align-self: center;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  color: #20160a; background: var(--gold);
  border-radius: 8px; padding: 5px 11px;
  animation: g-throb 1.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Стартовий екран
   -------------------------------------------------------------------------- */
.gra #g-start { justify-content: center; gap: 0; text-align: center; }

.gra #g-start .kick { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--gold); margin-bottom: 12px; }

.gra #g-start .g-hero-title { font-family: var(--disp); font-weight: 800; font-size: clamp(34px, 12vw, 48px); line-height: .97; margin: 0 0 14px; letter-spacing: -.02em; }

.gra #g-start .g-hero-title em { font-style: normal; color: var(--gold); }

.gra #g-start .sub { font-size: 14.5px; line-height: 1.5; color: var(--dim); margin: 0 0 20px; }

.gra #g-start .sub b { color: var(--paper); font-weight: 700; }

.gra #g-start .legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; text-align: left; }

.gra #g-start .legend div { display: flex; align-items: center; gap: 9px; background: var(--ink-2); border-radius: 11px; padding: 9px 11px; font-size: 12.5px; color: var(--dim); }

.gra #g-start .legend .ic { font-size: 16px; flex: none; }

.gra #g-start .legend b { color: var(--paper); font-weight: 700; }

.gra #g-start .best {
  font-family: var(--mono); font-weight: 700; font-size: 12.5px;
  color: var(--gold); margin: 0 0 14px;
}

.gra #g-start .foot { font-size: 10.5px; line-height: 1.45; color: var(--faint); margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   Комунікат після провалу: те саме, що гравець щойно пережив, але сервісом.
   -------------------------------------------------------------------------- */
.gra a.big { text-decoration: none; text-align: center; }

.gra .cta {
  display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(180deg, rgba(77,132,255,.14), rgba(77,132,255,.05));
  border: 2px solid rgba(77,132,255,.45);
  border-radius: 16px; padding: 14px 13px 13px;
}

.gra .cta .hd {
  font-family: var(--disp); font-weight: 800; font-size: 16px;
  color: var(--blue); text-align: center; letter-spacing: -.01em; text-wrap: balance;
}

.gra .cta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); text-align: center; }

.gra .cta p b { color: var(--paper); font-weight: 700; }

.gra .cta .fine {
  font-size: 10.5px; line-height: 1.45; color: var(--faint); text-align: center;
}

.gra .cta .fine b { color: var(--dim); font-weight: 700; }

.gra .cta .link { font-family: var(--mono); color: var(--blue); word-break: break-all; }

.gra #g-sweep { position: absolute; left: 0; right: 0; height: 3px; background: var(--paper); box-shadow: 0 0 12px var(--paper); pointer-events: none; opacity: 0; z-index: 5; }

@media (max-height: 700px) {
  .gra .meter .lb { display: none; }
  .gra #g-start .g-hero-title { font-size: 33px; }
  .gra #g-start .legend div { padding: 7px 10px; font-size: 12px; }
  .gra .big { padding: 14px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .gra *,
  .gra *::before,
  .gra *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .gra .hr.tell { animation: none; }
}