/* =====================================================================
   home.css — ГОЛОВНА СТОРІНКА. Той самий «тихий інтерфейс», що й у грі
   (css/theme.css): темне скло без рамок, один акцент — слонова кістка.
   Тло — жива зала трону: картинка img/home-bg.jpg у контейнері .scene
   (розмір рахує home.js), повільний наплив камери (анімація .scene),
   паралакс за курсором (.par), смолоскипи (.torch) поверх картинки.
   ===================================================================== */
:root{
  color-scheme: dark;
  --pearl-rgb: 169,182,200;
  --bg: #0b0908;
  --panel: rgba(var(--pearl-rgb),0.07);
  --panel-2: rgba(var(--pearl-rgb),0.13);
  --panel-3: rgba(var(--pearl-rgb),0.20);
  --glass: rgba(15,18,24,0.64);
  --glass-2: rgba(15,18,24,0.94);
  --ink: #e9e7e1;
  --ink-2: rgba(233,231,225,0.64);
  --ink-3: rgba(var(--pearl-rgb),0.60);
  --accent: #f0ead9;
  --accent-ink: #0f1218;
  --ok: #9fb98a; --danger: #d9857a;
  --ducat: #d9dde3; --relic: #e9b949;
  --gold: #e0a33e; --gold-2: #f4d08a;      /* золото зали: обруч іконки, титул, головна кнопка */
  --radius: 8px;
  --f-ui: 'Manrope', system-ui, "Segoe UI", Roboto, sans-serif;
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0; font-family: var(--f-ui); color: var(--ink); font-size: 14px; line-height: 1.45;
  background: var(--bg); overflow-x: hidden;
}

/* ---- сцена ---- */
/* Анімацію «push» (повільне дихання масштабом усієї сцени 1628×870) прибрано 6 вересня: на
   відеоприскорювачі Влада шар малювався частково — половина зали лишалась чорною («фон не сидить,
   король полетів»). Перевірено: без анімації масштабу зала цілa; паралакс за мишкою (.par) лишається. */
.scene{
  position: fixed; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 46%;                     /* наплив — на трон */
}
@keyframes push{ from{ transform: translate(-50%, -50%) scale(1.0); } to{ transform: translate(-50%, -50%) scale(1.075); } }
.par{ position: absolute; inset: 0; will-change: transform; }
.scene .img{ position: absolute; inset: 0; background: url(../img/home-bg.jpg) center / 100% 100% no-repeat; }
.scene .img.blur{
  filter: blur(7px) saturate(0.9);
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 52%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 52%, #000 100%);
}
/* смолоскипи: тепла пляма світла, що мерехтить; кожна зі своїм ритмом (--d, --delay) */
.torches{ position: absolute; inset: 0; }
.torch{
  position: absolute; width: var(--r, 14%); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: screen; opacity: .75;
  background: radial-gradient(circle, rgba(255,176,80,.62) 0%, rgba(255,128,36,.22) 34%, rgba(255,100,20,0) 70%);
  animation: flicker var(--d, 1.7s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes flicker{
  0%  { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
  35% { opacity: .85; transform: translate(-49%, -51%) scale(1.04); }
  60% { opacity: .62; transform: translate(-51%, -50%) scale(.98); }
  100%{ opacity: .9;  transform: translate(-50%, -49%) scale(1.06); }
}
.veil{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(11,9,8,0.62) 0%, rgba(11,9,8,0) 60%),
    linear-gradient(180deg, rgba(11,9,8,0.60) 0%, rgba(11,9,8,0.22) 30%, rgba(11,9,8,0.18) 60%, rgba(11,9,8,0.62) 100%);
}
@media (prefers-reduced-motion: reduce){
  .scene{ animation: none; }
  .torch{ animation: none; }
}

/* ---- каркас ---- */
.page{ position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; pointer-events: none; }
.page > *{ pointer-events: auto; }
.top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px 6px; }
.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark{ width: 26px; height: 26px; flex: none; }
.brand-name{ font-weight: 800; letter-spacing: .42em; font-size: 15px; opacity: .9; margin-right: -.42em; }
.tagline{ color: var(--ink-3); font-size: 12px; margin-left: 8px; }
.clock{ color: var(--ink-2); font-size: 12.5px; letter-spacing: .02em; text-align: center; flex: 1; text-wrap: balance; }
.clock::first-letter{ text-transform: uppercase; }
.top-right{ display: flex; align-items: center; gap: 10px; position: relative; z-index: 25; }   /* підказка монети — поверх карток нижче (Влад, 6 вересня) */

/* ---- валюти ---- */
.coins{ display: flex; gap: 8px; position: relative; }
.coin{
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px;
  background: var(--glass); border: 0; border-radius: 99px; color: var(--ink); font: inherit;
  font-variant-numeric: tabular-nums; cursor: default;
}
.coin:hover, .coin:focus-visible, .coin.open{ background: var(--panel-3); outline: 0; }
.coin i{ width: 15px; height: 15px; display: inline-block; flex: none; }
.coin.ducat i{ border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--ducat) 40%, #7f8791 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28), 0 0 6px rgba(0,0,0,.3); }
.coin.relic i{ background: linear-gradient(135deg, #fff1bd 0%, var(--relic) 45%, #8a6414 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
/* Дублон — золота монета: опукла, з обідком і бліком (Влад, 6 вересня) */
.coin.money i{ width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0%, #f5d76e 28%, #d4a52a 62%, #8a5f10 100%);
  box-shadow: inset 0 0 0 2px rgba(120,80,10,.55), inset 0 0 0 3px rgba(255,235,170,.55), 0 0 6px rgba(245,215,110,.45);
  position: relative; }
.coin.money i::after{ content: ''; position: absolute; left: 22%; top: 16%; width: 30%; height: 18%; border-radius: 50%;
  background: rgba(255,255,255,.75); transform: rotate(-25deg); }
.coin.money b{ color: #f5d76e; }
.coin b{ font-weight: 700; font-size: 14px; }
/* гроші в картці гаманця: два рядки «у гаманці / на рахунку в грі» */
.money-box{flex:0 0 100%;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.money-box .mrow{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.money-box .mrow b{font-family:ui-monospace,Consolas,monospace}
.money-box .hint{font-size:11px;opacity:.75}
/* Смуга виводу виграного (сейф v3): окремий блок під казною, щоб не плутався з «покласти/забрати» */
.win-lane{margin-top:8px;padding:8px 10px;border:1px solid var(--panel-2);border-radius:var(--radius);display:flex;flex-direction:column;gap:5px}
.win-lane .win-head{font-size:12px;font-weight:600;letter-spacing:.02em;opacity:.9}
.win-lane .mrow{align-items:center}
.win-lane button[disabled]{opacity:.5;cursor:default}

/* ПАСИ — дві картки поруч. Найбільша цифра на картці це ДЕННА СТЕЛЯ (те, за що платять),
   ціна дрібнішим рядком під нею. Срібна картка холодна, золота тепла: різниця має читатись
   за півсекунди, ще до того, як людина почне читати слова. Свій чинний пас обведений. */
.pass-card.mine{box-shadow:inset 0 0 0 1px rgba(240,234,217,.22)}
/* кнопки вибору ставки Пісочниці */
/* Крамниця: пучки товарів (перший — «Нікнейми»); розкритий пучок — список із цінами */
.bundles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px}
.bundle{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:inherit;cursor:pointer;text-align:left;font:inherit}
.bundle:hover{border-color:var(--gold);background:rgba(255,255,255,.06)}
.bundle .bundle-ico{font-size:26px;line-height:1}
.bundle b{font-size:15px}
.bundle small{opacity:.7;font-size:12px}
.bundle-open.hidden,.bundles.hidden{display:none}
.bundle-head{display:flex;align-items:center;gap:10px;margin-top:8px}
.bundle-head .btn{flex-direction:row;width:auto;padding:4px 10px}
.bundle-head .inv-h{margin:0}
.rn-ctl{display:flex;gap:6px;align-items:center}
.rn-ctl .inv-name{width:150px}
.rn-ctl .btn{flex-direction:row;width:auto;padding:6px 12px;font-size:12px}
.tip{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; max-width: 300px;
  background: var(--glass-2); border-radius: var(--radius); padding: 10px 12px; text-align: left;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2); box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s;
  pointer-events: none;
}
.tip b{ display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.coin:hover .tip, .coin:focus-visible .tip, .coin.open .tip{ opacity: 1; visibility: visible; transform: none; }

/* звук */
.sound{ width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--glass); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.sound:hover{ background: var(--panel-3); color: var(--ink); }
.sound svg{ width: 20px; height: 20px; }
.sound .wave{ display: none; } .sound .mute{ display: block; }
.sound.on .wave{ display: block; } .sound.on .mute{ display: none; }
.sound.on{ color: var(--accent); }

/* ---- стрічка літопису ---- */
.ticker{
  display: flex; align-items: center; gap: 12px; margin: 0 22px 6px; padding: 6px 12px;
  background: var(--glass); border-radius: 99px; overflow: hidden; font-size: 12.5px; color: var(--ink-2);
}
.ticker-tag{ flex: none; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.ticker .viewport{
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker .track{
  display: flex; gap: 42px; width: max-content; white-space: nowrap;
  animation: marquee var(--dur, 60s) linear infinite;
}
/* стрічка не зупиняється від наведення (Влад, 6 вересня) */
.ticker .item{ display: inline-flex; align-items: center; gap: 8px; }
.ticker .item::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.ticker .item.win::before{ background: var(--accent); }
.ticker .item.crown::before{ background: var(--relic); }
.ticker .item.throne::before{ background: #c9a2ff; }
.ticker .item.out::before, .ticker .item.fell::before{ background: var(--danger); }
.ticker .item b{ color: var(--ink); font-weight: 600; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker .track{ animation: none; } }

/* ---- сітка: три смуги, центр найширший ----------------------------
   Головне рішення вигляду: ЦЕНТР НЕ Є КАРТКОЮ. Гравець стоїть просто
   в залі, і крізь інтерфейс видно трон, вогонь і людей на картинці.
   Через це сторінка дихає, а бічні картки лишаються службовими.
   ------------------------------------------------------------------ */
.grid{
  flex: 1; display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 26px;
  width: min(1320px, 100% - 48px); margin: 10px auto 0; align-items: start;
}
.col.side{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card{
  background: var(--glass); border-radius: 16px; padding: 15px 17px;
  box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.07), 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.card h2{ margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card h2 small{ font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-size: 11.5px; }
.lbl{ display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.hint{ color: var(--ink-3); font-size: 12px; margin: 10px 0 0; }

/* ---- картка, що згортається ---- */
.foldbtn{
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0;
  font: inherit; font-size: inherit; font-weight: 700; letter-spacing: inherit; text-transform: inherit;
  color: inherit; cursor: pointer;
}
.foldbtn:hover{ color: var(--ink); }
.chev{ width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px); transition: transform .18s ease; flex: none; opacity: .7; }
.fold.folded .chev{ transform: rotate(-45deg) translate(-1px,1px); }
.foldbody{ overflow: hidden; transition: max-height .22s ease, opacity .18s ease; max-height: 900px; }
.fold.folded .foldbody{ max-height: 0; opacity: 0; }
.fold.folded h2{ margin-bottom: 0; }
.fold.folded h2 small{ display: none; }

/* ---- ЦЕНТР: гравець ---- */
.stage{ display: grid; place-items: center; padding: 4px 0 10px; min-width: 0; }
.hero{
  width: min(430px, 100%); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* іконка гравця: кружечок із золотим обручем; сюди ж стане NFT */
.hero-emblem{
  position: relative; width: 100px; height: 100px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--pearl-rgb),.20) 0%, rgba(var(--pearl-rgb),.09) 62%, rgba(var(--pearl-rgb),.05) 100%);
  box-shadow: 0 0 0 1px rgba(224,163,62,.55), 0 0 0 7px rgba(11,9,8,.35), 0 14px 34px rgba(0,0,0,.5),
              inset 0 2px 10px rgba(0,0,0,.45);
  display: grid; place-items: center; overflow: hidden; color: var(--ink-3);
  transition: box-shadow .2s ease, color .2s ease;
}
.hero-emblem:hover{ color: var(--ink-2); box-shadow: 0 0 0 1px rgba(244,208,138,.9), 0 0 0 7px rgba(11,9,8,.35),
                     0 16px 40px rgba(0,0,0,.55), inset 0 2px 10px rgba(0,0,0,.45); }
.hero-emblem .av{ display: grid; place-items: center; width: 100%; height: 100%; }
.hero-emblem svg{ width: 100%; height: 100%; fill: currentColor; }
.hero-emblem img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* підпис «змінити» — виїжджає знизу лише при наведенні */
.av-edit{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 0 6px;
  background: linear-gradient(180deg, rgba(11,9,8,0) 0%, rgba(11,9,8,.86) 55%);
  color: var(--ink-2); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;
}
.hero-emblem:hover .av-edit, .hero-emblem:focus-visible .av-edit{ opacity: 1; transform: none; }

.hero .lbl{ margin-top: 8px; }
.name-input{
  font: inherit; font-weight: 800; font-size: 26px; letter-spacing: .01em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 2px 0; width: 100%;
  outline: 0; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.name-input:hover, .name-input:focus{ border-bottom-color: var(--panel-3); }
/* Ім'я обране — поле більше не редагується: ані підкреслення при наведенні, ані курсора вводу */
.name-input.locked{ cursor: default; }
.name-input.locked:hover, .name-input.locked:focus{ border-bottom-color: transparent; }
.name-input::placeholder{ color: var(--ink-3); font-weight: 600; }
.hero-title{ margin-top: 4px; color: var(--gold-2); font-size: 12.5px; letter-spacing: .04em; text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hero-title::first-letter{ text-transform: uppercase; }

/* статистика — чотири кружечки */
/* Статистика на темній плиті: на світлому тлі зали цифри губились (Влад, 6 вересня).
   Комірка — під розмір напису (min-width, а не жорстке коло): назва читається, не тиснеться. */
.stat-plate{
  margin: 10px 0 8px; padding: 6px; border-radius: 16px;
  background: rgba(12,10,8,.58); box-shadow: inset 0 0 0 1px rgba(224,163,62,.30), 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stat-row{ display: flex; justify-content: center; gap: 6px; margin: 0; flex-wrap: wrap; }
.stat{
  min-width: 86px; padding: 6px 10px 5px; border-radius: 11px; display: grid; place-content: center; gap: 1px; text-align: center;
  background: rgba(var(--pearl-rgb),.06); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.10);
}
.stat b{ display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink);
  text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.stat span{ display: block; max-width: 84px; margin: 0 auto; font-size: 9.5px; line-height: 1.2;
  color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }

.last-game{ font-size: 12px; color: var(--ink-2); margin: 0 0 10px; padding: 6px 12px; background: var(--glass);
  border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.10); }
.last-game.win{ color: var(--ink); box-shadow: inset 0 0 0 1px rgba(159,185,138,.5); }
.last-game.loss{ box-shadow: inset 0 0 0 1px rgba(217,133,122,.45); }

.plays{ width: 100%; }
.btn{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%;
  font: inherit; font-weight: 700; color: var(--ink); background: var(--glass);
  box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.14), 0 8px 22px rgba(0,0,0,.3);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 0; border-radius: 99px; padding: 12px 18px; cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ background: var(--panel-2); transform: translateY(-1px); }
.btn:active{ transform: none; }
/* головна кнопка — золото зали, а не білий прямокутник */
.btn.primary{
  color: #1a1206; background: linear-gradient(180deg, #f7dfa8 0%, var(--gold) 62%, #b9791f 100%);
  box-shadow: 0 0 0 1px rgba(255,232,180,.55), 0 10px 30px rgba(224,163,62,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary:hover{ background: linear-gradient(180deg, #ffeec4 0%, #eeb551 62%, #c9862a 100%);
  box-shadow: 0 0 0 1px rgba(255,240,205,.75), 0 14px 40px rgba(224,163,62,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.btn.primary small{ opacity: .72; }
.btn.big{ padding: 12px 18px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.btn + .btn{ margin-top: 8px; }
.btn small{ font-weight: 500; font-size: 11.5px; letter-spacing: .02em; text-transform: none; opacity: .72; }
/* посилання всередині підказки кнопки («або з друзями за посиланням»): підкреслене, окремий hover */
.btn small .lnk{ text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn small .lnk:hover, .btn small .lnk:focus-visible{ opacity: 1; text-decoration-thickness: 2px; outline: 0; }
.btn:disabled, .btn.disabled{ opacity: .55; cursor: not-allowed; }

/* Док іконок у шапці: інвентар, магазин, досягнення, налаштування (Влад, 6 вересня) */
.dock{ display: flex; gap: 2px; background: var(--glass); border-radius: 14px; padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.14), 0 6px 18px rgba(0,0,0,.3);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.dock-btn{ position: relative; display: grid; place-items: center; gap: 2px; min-width: 62px; padding: 6px 6px 5px;
  background: transparent; border: 0; border-radius: 11px; color: var(--ink-3); cursor: pointer; font: inherit;
  transition: color .15s, background .15s; }
.dock-btn svg{ width: 20px; height: 20px; display: block; }
.dock-btn span{ font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; line-height: 1; white-space: nowrap; }
.dock-btn:hover, .dock-btn:focus-visible{ color: var(--gold-2); background: var(--panel-2); outline: 0; }
.dock-btn .badge{ position: absolute; top: 3px; right: 5px; font-size: 8.5px; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 99px;
  color: #1a1206; background: linear-gradient(180deg, #f7dfa8, var(--gold)); box-shadow: 0 0 0 1px rgba(11,9,8,.6); }

/* Дублони під гравцем: золота монета на темній табличці */
.purse{ margin-top: 8px; position: relative; z-index: 3; }
.coin.money.big{ padding: 5px 14px 5px 8px; gap: 9px; cursor: default;
  background: linear-gradient(180deg, rgba(22,17,10,.80), rgba(14,11,8,.88));
  box-shadow: inset 0 0 0 1px rgba(224,163,62,.55), 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,170,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.coin.money.big:hover, .coin.money.big:focus-visible{ background: linear-gradient(180deg, rgba(30,23,13,.86), rgba(18,14,9,.92)); }
.coin.money.big i{ width: 24px; height: 24px; }
.coin.money.big b{ font-size: 18px; letter-spacing: .01em; }
.coin.money.big .cur{ font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); opacity: .85; font-weight: 700; }
.purse .tip{ right: auto; left: 50%; transform: translate(-50%, -4px); }
.purse .coin:hover .tip, .purse .coin:focus-visible .tip{ transform: translateX(-50%); }

/* Полиця досягнень під статистикою: здобуті — золоті, блиск іде зліва направо */
.shelf{ display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; padding: 3px 8px;
  background: transparent; border: 0; border-radius: 99px; cursor: pointer; }
.shelf:hover{ background: var(--panel); }
.badge-a{ position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.16); color: rgba(var(--pearl-rgb),.45); }
.badge-a svg{ width: 16px; height: 16px; display: block; }
.badge-a.done{ color: #3a2604;
  background: radial-gradient(circle at 35% 30%, #fff3c8 0%, #f0c25a 38%, #c98a1e 72%, #8a5a10 100%);
  box-shadow: 0 0 0 1px rgba(255,232,180,.65), 0 0 10px rgba(240,194,90,.4), inset 0 -2px 4px rgba(90,55,10,.35); }
.badge-a.done::after{ content: ''; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 45%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
@keyframes shine{ 0%{ left: -70%; } 40%{ left: 140%; } 100%{ left: 140%; } }
@media (prefers-reduced-motion: reduce){ .badge-a.done::after{ animation: none; display: none; } }

/* ---- табло тижня, онлайн, лічильник ---- */
.board{ display: flex; flex-direction: column; }
.brow{ display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--panel); font-variant-numeric: tabular-nums; font-size: 13px; }
.brow:last-child{ border-bottom: 0; }
.brow .n{ color: var(--ink-3); font-weight: 700; }
.brow:first-child .n{ color: var(--gold); }
.brow .who{ font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .who.me{ color: var(--gold-2); }
.brow .v{ color: var(--ink-2); font-size: 12px; }
.brow .v b{ color: var(--ink); font-weight: 700; }
.online{ display: flex; flex-direction: column; gap: 6px; }
.online .row{ display: flex; align-items: center; gap: 8px; font-size: 13px; }
.online .row::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex: none; }
.online .row small{ color: var(--ink-3); }
.total-card{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3px; padding: 18px 16px; }
.total{ font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fdf3dd 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- останні партії ---- */
.recent{ display: flex; flex-direction: column; }
/* Колонка вузька, тому рядок партії йде у два поверхи: угорі результат і час,
   під ними — чим саме скінчилась. Так нічого не переноситься по складах. */
.game{
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--panel); font-size: 12.5px;
}
.game .res{ grid-column: 1; grid-row: 1; }
.game .when{ grid-column: 2; grid-row: 1; }
.game .what{ grid-column: 1 / -1; grid-row: 2; }
.game:last-child{ border-bottom: 0; }
.game .res{ font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.game.win .res{ color: var(--ok); }
.game.loss .res{ color: var(--danger); }
.game .what{ min-width: 0; }
.game .what b{ font-weight: 600; color: var(--ink-2); }
.game .what small{ display: block; color: var(--ink-3); font-size: 11.5px; }
.game .when{ color: var(--ink-3); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty{ color: var(--ink-3); padding: 6px 0; font-size: 13px; }

/* ---- чат зали ---- */
.chatlog{
  display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto;
  padding-right: 4px; margin-bottom: 8px; scrollbar-width: thin;
}
.chatlog:empty::after{ content: ''; }
.cl{ font-size: 12.5px; line-height: 1.35; word-break: break-word; }
.cl b{ color: var(--ink-2); font-weight: 700; margin-right: 6px; }
.cl.me b{ color: var(--gold-2); }
.cl span{ color: var(--ink-3); }
.chatbar{ display: flex; gap: 6px; align-items: center; }
.chatbar input{
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--panel);
  border: 0; border-radius: 99px; padding: 8px 12px; outline: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.10);
}
.chatbar input:focus{ box-shadow: inset 0 0 0 1px rgba(224,163,62,.55); }
.chatbar input::placeholder{ color: var(--ink-3); }
.chatsend{
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: 15px; line-height: 1;
}
.chatsend:hover{ background: var(--gold); color: #1a1206; }
.chatwhy{ margin-top: 7px; font-size: 11.5px; color: var(--danger); }

/* ---- вибір іконки гравця ---- */
.ap-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.ap{
  display: grid; place-items: center; gap: 6px; padding: 12px 6px 10px; cursor: pointer;
  background: var(--panel); border: 0; border-radius: 14px; color: var(--ink-3); font: inherit;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, color .15s, background .15s;
}
.ap:hover{ background: var(--panel-2); color: var(--ink-2); }
.ap.on{ color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(224,163,62,.7); background: var(--panel-2); }
.ap .ring{ width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--pearl-rgb),.10); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.12); overflow: hidden; }
.ap svg{ width: 100%; height: 100%; fill: currentColor; }
.ap img{ width: 100%; height: 100%; object-fit: cover; }
.ap span{ font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }

/* ---- панель налаштувань / досягнень ---- */
.panel{ position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(11,9,8,0.72); padding: 16px; }
.panel.hidden{ display: none; }
.panel-body.narrow{ width: min(420px, 100%); }
.panel-body{ width: min(640px, 100%); max-height: 88dvh; overflow: auto; background: var(--glass-2); border-radius: 10px; padding: 14px 18px 18px; }
.panel-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ptabs{ display: flex; gap: 4px; background: var(--panel); border-radius: 99px; padding: 3px; }
.ptab{ display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  background: transparent; border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.ptab svg{ width: 15px; height: 15px; flex: none; }
.ptab.on{ background: var(--accent); color: var(--accent-ink); }
/* Налаштування картками: іконка в золотій рамці, назва, пояснення, керування праворуч (Влад, 6 вересня) */
.set-card{ display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 14px;
  border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.08); margin-bottom: 8px; }
.set-card.wide{ grid-template-columns: 44px minmax(0, 1fr); }
.set-ico{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; align-self: start; color: var(--gold-2);
  background: linear-gradient(180deg, rgba(224,163,62,.24), rgba(224,163,62,.08)); box-shadow: inset 0 0 0 1px rgba(224,163,62,.38); }
.set-ico svg{ width: 22px; height: 22px; }
.set-main{ min-width: 0; }
.set-main h4{ margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.set-main .hint{ margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.set-main .wallet, .set-main #ledgerBox{ margin-top: 10px; }
.set-ctl{ justify-self: end; }
@media (max-width: 560px){ .set-card{ grid-template-columns: 44px minmax(0, 1fr); } .set-ctl{ grid-column: 2; justify-self: start; } }
.panel .x{ background: transparent; border: 0; color: var(--ink-3); font: inherit; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.panel .x:hover{ color: var(--ink); }
.pbody.hidden{ display: none; }
.set-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--panel); }
.set-row:last-of-type{ border-bottom: 0; }
.langs{ display: inline-flex; background: var(--panel); border-radius: 99px; padding: 3px; gap: 2px; }
.langs button{
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3);
  background: transparent; border: 0; border-radius: 99px; padding: 5px 11px; cursor: pointer;
}
.langs button:hover{ color: var(--ink); background: var(--panel-2); }
.langs button.on{ color: var(--accent-ink); background: var(--accent); }
.toggle{ display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.toggle i{ width: 36px; height: 20px; border-radius: 99px; background: var(--panel-3); position: relative; transition: background .15s; }
.toggle i::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: left .15s, background .15s; }
.toggle.on i{ background: var(--accent); }
.toggle.on i::after{ left: 19px; background: var(--accent-ink); }

/* ---- досягнення ---- */
.ach-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.ach{ display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border-radius: var(--radius); padding: 10px 12px; }
.ach .mark{ position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--panel-2); color: rgba(var(--pearl-rgb),.5); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.14); }
.ach .mark svg{ width: 19px; height: 19px; display: block; }
.ach.done .mark{ color: #3a2604;
  background: radial-gradient(circle at 35% 30%, #fff3c8 0%, #f0c25a 38%, #c98a1e 72%, #8a5a10 100%);
  box-shadow: 0 0 0 1px rgba(255,232,180,.65), 0 0 10px rgba(240,194,90,.35); }
.ach.done .mark::after{ content: ''; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 45%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }
.ach .prog i{ background: linear-gradient(90deg, #c98a1e, #f0c25a); }
.ach b{ display: block; font-size: 13px; }
.ach small{ display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.ach:not(.done){ opacity: .78; }
.ach .prog{ height: 3px; background: var(--panel-3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.ach .prog i{ display: block; height: 100%; background: var(--accent); }

.foot{ padding: 6px 22px 8px; color: var(--ink-3); font-size: 12px; text-align: center; min-height: 16px; }

/* Планшет: бічні смуги йдуть під центр, центр лишається найголовнішим */
@media (max-width: 1180px){
  .grid{ grid-template-columns: 260px minmax(0, 1fr); width: min(1320px, 100% - 32px); gap: 18px; }
  .stage{ order: -1; grid-column: 1 / -1; }
}
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; width: min(1320px, 100% - 24px); gap: 14px; }
  .stage{ grid-column: auto; padding: 0 0 4px; }
  .tagline, .clock{ display: none; }
  .top{ padding: 12px 14px 6px; }
  .ticker{ margin: 0 14px 6px; }
  .hero-emblem{ width: 104px; height: 104px; }
  .name-input{ font-size: 25px; }
  .stat{ min-width: 70px; padding: 7px 6px 6px; }
  .stat b{ font-size: 18px; }
  .dock-btn{ min-width: 40px; padding: 7px 6px; }
  .dock-btn span{ display: none; }
  .dock-btn .badge{ top: 0; right: 0; }
  .tip{ right: auto; left: 50%; transform: translate(-50%, -4px); }
  .coin:hover .tip, .coin:focus-visible .tip, .coin.open .tip{ transform: translateX(-50%); }
}

/* гаманець у налаштуваннях (js/wallet.js) */
.wallet{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wopen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%}
.wopen .hint, .gate-box .wopen .hint{flex:0 0 100%;width:100%;max-width:none;text-align:center}   /* підказка — окремим рядком над кнопками, а не збоку від першої */
.wallet .addr{font-family:ui-monospace,Consolas,monospace;font-size:13px;padding:4px 8px;border:1px solid rgba(255,255,255,.14);border-radius:6px}
.wallet .ok{color:#8fd694;font-size:12px}
.wallet .warn,.wallet .wmsg{color:#e0b860;font-size:12px}
/* мережа й баланси поруч з адресою; wnet.warn — «не та мережа» */
.wallet .wnet{font-size:12px;opacity:.85;display:flex;gap:6px;align-items:center}
.wallet .wnet.warn{opacity:1}
.wallet .wbal{font-family:ui-monospace,Consolas,monospace;font-size:12px;opacity:.85;display:flex;gap:6px;align-items:center}
.wallet .wbal a{color:inherit}
/* кнопки вибору гаманця: іконка й назва В РЯДОК і по ширині тексту.
   Базовий .btn — це велика кнопка на всю ширину (flex-direction:column), тут вона не підходить:
   гаманців буває три-чотири, і стовпчик на пів екрана виглядає як помилка. */
.wallet .wallet-pick{flex-direction:row;align-items:center;width:auto;gap:6px;padding:7px 12px;font-size:12px}
.wallet .wallet-pick img{border-radius:4px;flex:0 0 auto}

/* ============ ШИРМА ВХОДУ: ВОРОТА ЗАМКУ ============
   Фон — фото воріт (img/gate.jpg): двоє вартових, смолоскипи, туман біля землі.
   Картинка сама по собі нерухома, тому поверх неї чотири шари, і в кожного є причина:
     · повільне дихання кадру — щоб екран не читався як скріншот;
     · мерехтіння смолоскипів рівно там, де вони на фото;
     · туман, що пливе низом у два боки з різною швидкістю — це дає глибину;
     · щілина світла між стулками і спалах — вони мовчать, поки гравець не увійшов.
   Ніяких коробок поверх фото: текст лежить на м'якому затемненні, а не на пластині,
   інакше найкраще, що є на цьому екрані, ховається за карткою. */
.gate{ padding: 0; background: #07060a; overflow: hidden; }
.gate-scene{ position: absolute; inset: 0; overflow: hidden; }
.gate-bg{
  position: absolute; inset: -5%;
  background: url('../img/gate.jpg') center 46% / cover no-repeat;
  transform: scale(1.02);
  animation: gateBreath 30s ease-in-out infinite alternate;
}
/* Затемнення по краях: погляд сам іде до воріт у центрі. */
.gate-scene::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 52%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%);
}
@keyframes gateBreath{
  from{ transform: scale(1.02) translate3d(0, 0, 0); }
  to  { transform: scale(1.08) translate3d(0, -1.4%, 0); }
}
/* Смолоскипи: клас .torch уже вміє мерехтіти (див. вище), тут лише місце й розмір.
   Координати взяті з самого фото, тому вогонь світиться там, де він намальований. */
.gate-torch{ --r: 30%; opacity: .55; }
.gate-torch.l{ left: 11%;  top: 47%; --d: 1.9s; --delay: -0.4s; }
.gate-torch.r{ left: 89.5%; top: 47%; --d: 2.3s; --delay: -1.5s; }
/* Туман біля землі. Два шари в різні боки й з різним розмиттям: один шар читається
   як пляма, два — як повітря. */
.gate-fog{
  position: absolute; left: -35%; right: -35%; bottom: -8%; height: 48%;
  pointer-events: none; mix-blend-mode: screen; opacity: .30; filter: blur(14px);
  background:
    radial-gradient(58% 100% at 18% 100%, rgba(255,186,132,.22), rgba(255,170,120,0) 70%),
    radial-gradient(52% 92% at 52% 100%, rgba(214,198,196,.16), rgba(214,198,196,0) 72%),
    radial-gradient(58% 100% at 84% 100%, rgba(255,186,132,.20), rgba(255,170,120,0) 70%);
  animation: gateFog 52s ease-in-out infinite;
}
.gate-fog.f2{ height: 34%; opacity: .18; filter: blur(26px); animation-duration: 79s; animation-direction: reverse; }
@keyframes gateFog{
  0%  { transform: translate3d(-6%, 0, 0); }
  50% { transform: translate3d(6%, -2.5%, 0); }
  100%{ transform: translate3d(-6%, 0, 0); }
}
/* Щілина між стулками і спалах: у спокої їх не видно зовсім. */
.gate-seam{
  position: absolute; left: 50%; top: 15%; width: 3px; height: 74%;
  transform: translateX(-50%) scaleX(1); transform-origin: 50% 50%;
  background: linear-gradient(to bottom, rgba(255,196,110,0), rgba(255,214,150,.95) 20%, rgba(255,240,208,1) 55%, rgba(255,196,110,0));
  filter: blur(2px); opacity: 0;
}
/* Спалах не гасне в кутах: наприкінці переходу екран мусить стати теплим ЦІЛКОМ,
   інакше в кутах лишаються темні ворота, і зала проступає крізь них плямами. */
.gate-flash{
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(62% 62% at 50% 52%, rgba(255,232,190,.98) 0%, rgba(255,206,138,.62) 55%, rgba(255,190,116,.34) 100%);
}
/* Текст поверх фото. Замість пластини — м'яке затемнення, що тане до країв. */
.gate-box{
  position: relative; z-index: 2; width: 100%; max-width: 520px; text-align: center;
  padding: 38px 30px 32px;
  background: radial-gradient(115% 100% at 50% 46%, rgba(6,5,8,.88) 0%, rgba(6,5,8,.60) 52%, rgba(6,5,8,0) 100%);
  animation: gateIn .8s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes gateIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
.gate-title{
  font-size: 42px; letter-spacing: .34em; text-indent: .34em; font-weight: 800;
  color: #f6d99a; margin-bottom: 14px;
  text-shadow: 0 0 30px rgba(255,178,86,.42), 0 2px 18px rgba(0,0,0,.85);
}
.gate-line{ margin: 0 auto 20px; max-width: 27em; line-height: 1.62; font-size: 14px;
  color: rgba(246,241,233,.92); text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.gate-box .hint{ margin: 16px auto 0; max-width: 27em; color: rgba(246,241,233,.5);
  text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.gate-box .wallet{ justify-content: center; display: flex; flex-wrap: wrap; gap: 8px; }
.gate-box .langs{ margin-top: 18px; justify-content: center; display: flex; gap: 6px; }

/* ---- ВОРОТА ВІДЧИНЯЮТЬСЯ ----
   Гравець підписав вхід. Замість «вікно зникло» робимо те, що обіцяє картинка:
   щілина між стулками спалахує і розходиться, камера йде вперед крізь ворота,
   туман кидається назустріч, смолоскипи спалахують і гаснуть за спиною — і зала
   вже за ними. Півтори секунди: довше було б не входом, а заставкою. */
.gate.opening .gate-box{ animation: gateBoxOut .5s ease-in both; pointer-events: none; }
.gate.opening .gate-seam{ animation: gateSeam 1.2s cubic-bezier(.55,0,.8,.2) both; }
.gate.opening .gate-bg{ animation: gatePush 1.5s cubic-bezier(.5,0,.85,.3) both; }
.gate.opening .gate-fog{ animation: gateFogRush 1.5s ease-in both; }
.gate.opening .gate-flash{ animation: gateFlash 1.5s ease-in both; }
.gate.opening .gate-torch{ animation: gateTorchFlare 1.1s ease-out both; }
/* Затемнення країв мусить піти разом із рештою: інакше в кутах лишаються темні
   ворота, і зала проступає крізь них плямами. */
.gate.opening .gate-scene::after{ animation: gateVignetteOut 1.1s ease-in both; }
@keyframes gateVignetteOut{ to{ opacity: 0; } }
.gate.closing{ animation: gateFade .5s ease-out both; pointer-events: none; }
@keyframes gateBoxOut{ to{ opacity: 0; transform: translateY(20px) scale(.97); filter: blur(4px); } }
@keyframes gateSeam{
  0%  { opacity: 0; transform: translateX(-50%) scaleX(1); }
  16% { opacity: 1; transform: translateX(-50%) scaleX(4); }
  100%{ opacity: 1; transform: translateX(-50%) scaleX(560); }
}
@keyframes gatePush{ from{ transform: scale(1.05); } to{ transform: scale(2); } }
@keyframes gateFogRush{
  from{ opacity: .30; transform: translate3d(0,0,0) scale(1); }
  to  { opacity: .8;  transform: translate3d(0,-18%,0) scale(2.3); }
}
@keyframes gateFlash{ 0%{ opacity: 0; } 50%{ opacity: .22; } 90%{ opacity: 1; } 100%{ opacity: 1; } }
@keyframes gateTorchFlare{ 0%{ opacity: .55; } 35%{ opacity: 1; } 100%{ opacity: .12; } }
@keyframes gateFade{ from{ opacity: 1; } to{ opacity: 0; } }
/* Прибуття в залу: вона не «просто з'являється», а осідає після проходу крізь ворота. */
body.gate-arrived .page{ animation: hallIn .9s cubic-bezier(.2,.8,.25,1) both; }
body.gate-arrived .scene{ animation: hallScene 1.4s cubic-bezier(.2,.8,.25,1) both; }
@keyframes hallIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@keyframes hallScene{ from{ opacity: .2; transform: scale(1.06); } to{ opacity: 1; transform: none; } }

/* «Менше руху» — жодного руху: лишається сама картинка й спалах у кінці. */
@media (prefers-reduced-motion: reduce){
  .gate-bg, .gate-fog, .gate-torch, .gate-box,
  .gate.opening .gate-box, .gate.opening .gate-seam, .gate.opening .gate-bg,
  .gate.opening .gate-fog, .gate.opening .gate-torch,
  body.gate-arrived .page, body.gate-arrived .scene{ animation: none !important; }
  .gate.opening .gate-flash{ animation: gateFlash .5s linear both; }
}
.money-box .mrow.game b.plus{ color: #8fd694; } .money-box .mrow.game b.minus{ color: #e08a8a; }

/* Знаки місць на табло тижня: корона (1), посох (2), срібний меч (3) */
.brow .pl, .vtab .pl{ width: 22px; height: 22px; display: block; margin: 0 auto; }
.brow .pl, .brow .n{ grid-row: 1 / span 2; text-align: center; }
.brow .vals{ grid-column: 2; color: var(--ink-2); font-size: 12px; }
.brow .vals b{ color: var(--ink); font-weight: 700; }
.brow .vals b.plus{ color: #8fd694; }
.vtab .pl{ width: 20px; height: 20px; }
.pl.gold{ filter: drop-shadow(0 0 4px rgba(232,191,85,.65)); }
.pl.staff{ filter: drop-shadow(0 0 3px rgba(143,211,255,.5)); }
.pl.silver{ filter: drop-shadow(0 0 3px rgba(223,228,234,.45)); }
.brow.p1{ background: linear-gradient(90deg, rgba(232,191,85,.14), transparent 72%); border-radius: 8px; padding-left: 4px; margin-left: -4px; }
.brow.p1 .who{ color: var(--gold); font-size: 14px; }
.brow.p2 .who{ color: #dcd2b8; }
.brow.p3 .who{ color: #cfd6dd; }
.snd-ctl{ display: inline-flex; align-items: center; gap: 12px; }
.snd-ctl input[type=range]{ width: 110px; accent-color: var(--gold, #d9ac4c); }
.snd-pop{ position: absolute; right: 0; top: 42px; z-index: 40; background: rgba(24,18,12,.94); backdrop-filter: blur(10px); border: 1px solid rgba(255,220,150,.18);
  border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; min-width: 200px; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.snd-pop.hidden{ display: none; }
.snd-pop input[type=range]{ width: 100%; accent-color: var(--gold, #d9ac4c); }

/* Картка гаманця в налаштуваннях (Влад, 6 вересня: «кнопки й цифри непропорційні місцю — ремодел»).
   Базовий .btn — велика кнопка на всю ширину; тут усе в ряд і по ширині тексту. */
.wallet .wrow{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.wallet .wrow .btn.ghost{ margin-left: auto; }
.wallet .btn{ flex-direction: row; width: auto; padding: 6px 12px; font-size: 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.16); }
.wallet .btn.ghost{ background: transparent; color: var(--ink-3); }
.wallet .btn.ghost:hover{ color: var(--ink); background: var(--panel-2); }
.wallet select.btn{ appearance: auto; padding: 5px 10px; min-width: 112px; color: var(--ink); background: var(--panel-2); border: 0; }
.wallet .addr{ background: var(--panel); }
.money-box{ gap: 8px; }
.mtiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtile{ padding: 8px 12px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.08); }
.mtile .lbl{ font-size: 9.5px; letter-spacing: .1em; margin-bottom: 2px; }
.banwrap{ position:fixed; inset:0; z-index:9999; background:rgba(8,8,10,.96); display:grid; place-items:center; padding:20px; overflow:auto }
.banbox{ max-width:560px; width:100%; background:#141417; border:1px solid #7a2020; border-radius:14px; padding:26px 28px; text-align:center }
.banbox h2{ margin:0 0 10px; font-size:26px; color:#e08a8a; letter-spacing:.02em }
.banbox p{ margin:8px 0; color:var(--dim); font-size:14px; line-height:1.5 }
.banbox .banwhy{ color:#e8e2d6; font-size:15px; background:#101013; border-left:3px solid #7a2020; padding:8px 12px; text-align:left }
.banbox .banmoney{ color:#9fd3a0; margin-top:16px }
.banbox .set-card{ margin-top:16px; text-align:left }
.txrow{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid rgba(var(--pearl-rgb),.07) }
.txrow:last-of-type{ border-bottom:0 }
.txico{ width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; border-radius:50%; font-weight:800; font-size:13px }
.txico.in{ background:rgba(120,200,140,.14); color:#8fd39b }
.txico.out{ background:rgba(220,170,90,.14); color:#e0b465 }
.txmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.txmain b{ font-size:13px; font-weight:700 }
.txmain small{ font-size:11px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.txlink{ color:var(--dim); text-decoration:underline dotted }
.txlink:hover{ color:#f5d76e }
.txsum{ font-variant-numeric:tabular-nums; font-size:14px; font-weight:800; white-space:nowrap }
.txsum.in{ color:#8fd39b } .txsum.out{ color:#e0b465 }
.txsum small{ font-size:9.5px; letter-spacing:.06em; color:var(--ink-3) }
.mtile .mshelf { display:block; margin-top:4px; font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.01em }
.mtile b{ display: flex; align-items: baseline; gap: 5px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: #f5d76e; font-family: var(--f-ui); }
.mtile b small{ font-size: 10px; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.wallet .modes{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.wallet .money-box .hint{ font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.wallet .money-box .mrow{ align-items: center; }
.wallet .money-box .mrow .btn{ padding: 4px 10px; font-size: 11.5px; }

/* ---- велике табло тижня (Влад, 11 вересня; дизайн з полотна «Board of the Week») ---- */
.lb-sub-h{ margin: -4px 0 10px; font-size: 11.5px; color: var(--ink-3); }
.lb-podium{ display: flex; justify-content: center; gap: 12px; align-items: flex-end; margin: 6px 0 10px; }
.lb-pod{ flex: 1 1 0; max-width: 220px; min-width: 0; }
.lb-pod.p1{ flex-grow: 1.18; max-width: 250px; }
.lb-pod{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(223,228,234,.10), rgba(15,18,24,.64)); box-shadow: inset 0 0 0 1px rgba(223,228,234,.75), 0 10px 30px rgba(0,0,0,.28);
  overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; --ring: rgba(223,228,234,.75); --glow: rgba(223,228,234,.22); }
.lb-pod:hover{ transform: translateY(-2px); }
.lb-pod.on{ box-shadow: inset 0 0 0 1.5px rgba(244,208,138,.7), 0 14px 34px rgba(0,0,0,.42); }
.lb-pod.p2{ order: 1; }
.lb-pod.p1{ order: 2; padding: 22px 14px 16px; --ring: rgba(224,163,62,.9); --glow: rgba(224,163,62,.42);
  background: linear-gradient(180deg, rgba(232,191,85,.16), rgba(15,18,24,.64)); box-shadow: inset 0 0 0 1px var(--ring), 0 10px 30px rgba(0,0,0,.28); }
.lb-pod.p3{ order: 3; --ring: rgba(200,147,90,.8); --glow: rgba(200,147,90,.24);
  background: linear-gradient(180deg, rgba(200,147,90,.12), rgba(15,18,24,.64)); box-shadow: inset 0 0 0 1px var(--ring), 0 10px 30px rgba(0,0,0,.28); }
.lb-glow{ position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, var(--glow), transparent 70%); pointer-events: none; }
.lb-rim{ position: absolute; left: 50%; top: 50%; width: 320%; height: 320%; margin: -160% 0 0 -160%; opacity: .6; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(244,208,138,.55) 82%, transparent 94%); animation: lb-spin 6s linear infinite; }
.lb-rim-in{ position: absolute; inset: 1.5px; border-radius: 13px; background: linear-gradient(180deg, rgba(232,191,85,.16), rgba(15,18,24,.96)); pointer-events: none; }
.lb-star{ position: absolute; z-index: 1; background: #f8e3a8; pointer-events: none; animation: lb-twinkle 2.2s ease-in-out infinite;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lb-star.s1{ left: 14%; top: 18%; width: 8px; height: 8px; animation-delay: .2s; }
.lb-star.s2{ right: 16%; top: 26%; width: 6px; height: 6px; animation-delay: 1.1s; }
.lb-star.s3{ left: 22%; bottom: 30%; width: 5px; height: 5px; background: #f4d08a; animation-delay: .7s; }
.lb-pod > *:not(.lb-glow):not(.lb-rim):not(.lb-rim-in):not(.lb-star){ position: relative; }
.lb-medal{ width: 26px; height: 26px; display: block; }
.lb-medal .pl{ width: 26px; height: 26px; }
.lb-ava{ width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--pearl-rgb),.13); display: block; overflow: hidden; color: #e9e7e1;
  box-shadow: 0 0 0 2px var(--ring), 0 0 24px var(--glow); }
.lb-ava svg, .lb-ava img{ width: 100%; height: 100%; display: block; fill: currentColor; object-fit: cover; }
.lb-pod.p1 .lb-ava{ width: 72px; height: 72px; animation: lb-pulse 2.4s ease-in-out infinite; }
.lb-pod.p1 .lb-glow{ animation: lb-breathe 2.4s ease-in-out infinite; }
.lb-ava.sm{ width: 38px; height: 38px; box-shadow: inset 0 0 0 1px rgba(224,163,62,.55); color: #cfd6dd; }
.lb-ava.big{ width: 64px; height: 64px; box-shadow: inset 0 0 0 1.5px var(--gold); }
.lb-name{ font-size: 14px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfd6dd; }
.lb-pod.p2 .lb-name{ color: #dcd2b8; }
.lb-pod.p1 .lb-name{ font-size: 17px; background: linear-gradient(100deg, #e0a33e 0%, #f8e3a8 40%, #e0a33e 60%, #f4d08a 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lb-shimmer 4s linear infinite; }
.lb-pod:not(.p1) .lb-name.me, .lb-who b.me{ color: var(--gold-2); }   /* «я» золотом; на 1-му місці лишається мерехтливий градієнт */
.lb-title{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.lb-dbl{ font-size: 20px; font-weight: 800; color: #8fd694; font-variant-numeric: tabular-nums; line-height: 1; }
.lb-pod.p1 .lb-dbl{ font-size: 26px; }
.lb-sub{ font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-sub b{ color: var(--ink); font-weight: 700; }
.lb-head, .lb-row{ display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) 96px 92px 94px; gap: 12px; align-items: center; }
.lb-head{ padding: 10px 8px 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid rgba(var(--pearl-rgb),.10); }
.lb-head span:first-child{ text-align: center; }
.lb-head span:nth-child(n+4){ text-align: right; }
.lb-row{ padding: 9px 8px; border-radius: 8px; border-bottom: 1px solid rgba(var(--pearl-rgb),.07); cursor: pointer; transition: background .15s ease; }
.lb-row:hover{ background: rgba(var(--pearl-rgb),.07); }
.lb-row.on{ background: rgba(232,191,85,.10); box-shadow: inset 0 0 0 1px rgba(232,191,85,.28); }
.lb-n{ text-align: center; color: var(--ink-3); font-weight: 700; font-size: 13px; }
.lb-who{ display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lb-who b{ font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who small{ font-size: 11.5px; color: var(--ink-3); }
.lb-row .lb-dbl{ text-align: right; font-size: 15px; }
.lb-wg{ text-align: right; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-wg b{ color: var(--ink); font-weight: 700; }
.lb-wg span{ color: var(--ink-3); }
.lb-why{ display: flex; justify-content: flex-end; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-why > span{ display: flex; align-items: center; gap: 3px; }
.lb-why svg{ width: 14px; height: 14px; display: block; }
.lb-card{ margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: rgba(var(--pearl-rgb),.07); box-shadow: inset 0 0 0 1px rgba(232,191,85,.22);
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.lb-card-body{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-card-head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lb-card-head b{ font-size: 20px; font-weight: 800; color: var(--gold-2); }
.lb-card-head span{ font-size: 12px; color: var(--ink-3); }
.lb-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lb-tile{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.07); }
.lb-tile b{ font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-tile b .plus{ color: #8fd694; }
.lb-tile b small{ font-size: 12px; font-weight: 600; color: var(--ink-3); }
.lb-how{ display: flex; flex-direction: column; gap: 6px; }
.lb-bar{ display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(var(--pearl-rgb),.10); }
.lb-bar i, .lb-legend i{ display: block; }
.lb-bar .c, .lb-legend .c{ background: #e8bf55; }
.lb-bar .t, .lb-legend .t{ background: #cfd6dd; }
.lb-bar .l, .lb-legend .l{ background: #8a5f34; }
.lb-legend{ display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); }
.lb-legend span{ display: flex; align-items: center; gap: 6px; }
.lb-legend i{ width: 8px; height: 8px; border-radius: 2px; }
.lb-when{ font-size: 11.5px; color: var(--ink-3); }
@keyframes lb-pulse{ 0%, 100%{ box-shadow: 0 0 0 2px rgba(224,163,62,.9), 0 0 18px rgba(224,163,62,.35); } 50%{ box-shadow: 0 0 0 3px rgba(244,208,138,1), 0 0 42px rgba(224,163,62,.75); } }
@keyframes lb-breathe{ 0%, 100%{ opacity: .55; } 50%{ opacity: 1; } }
@keyframes lb-spin{ to{ transform: rotate(360deg); } }
@keyframes lb-twinkle{ 0%, 100%{ opacity: 0; transform: scale(.4); } 50%{ opacity: 1; transform: scale(1); } }
@keyframes lb-shimmer{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }
@media (max-width: 560px){
  .lb-head{ display: none; }
  .lb-row{ grid-template-columns: 26px 36px minmax(0, 1fr) auto; }
  .lb-row .lb-wg, .lb-row .lb-why{ display: none; }
  .lb-podium{ gap: 8px; }
  .lb-pod{ padding: 12px 8px 10px; }
  .lb-pod .lb-ava{ width: 48px; height: 48px; }
  .lb-pod.p1 .lb-ava{ width: 60px; height: 60px; }
  .lb-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){ .lb-rim, .lb-star, .lb-pod.p1 .lb-ava, .lb-pod.p1 .lb-glow, .lb-pod.p1 .lb-name{ animation: none; } }

/* ===== Скрині й NFT (16 вересня) ===== */
/* Кольори рідкостей — це ігрова інформація, як кольори гравців: єдиний виняток із правила одного акценту */
.rar-common{ --rar: #b9bec7; }
.rar-rare{ --rar: #cf8f4f; }
.rar-epic{ --rar: #a7bff0; }
.rar-legendary{ --rar: #f0c25a; }

/* Полиця NFT під статистикою героя */
.nft-shelf{ display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 8px; padding: 4px 10px 4px 5px; max-width: 100%;
  background: rgba(12,10,8,.45); border: 0; border-radius: 99px; color: var(--ink-2); cursor: pointer; font: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--pearl-rgb),.16); transition: background .15s, box-shadow .15s; }
.nft-shelf:hover, .nft-shelf:focus-visible{ background: rgba(12,10,8,.62); box-shadow: inset 0 0 0 1px rgba(240,234,217,.5); outline: 0; }
.nft-shelf{ margin-top: 10px; margin-bottom: 0; }
.nft-shelf .nft-lbl{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nft-mini{ width: 26px; height: 35px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--rar), 0 2px 6px rgba(0,0,0,.5); background: #000; }
.nft-mini + .nft-mini{ margin-left: -4px; }

/* Панель: заголовки розділів і лічильники */
.ch-h{ margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.ch-h .ch-n{ font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--ink); }
#pChests > section:first-child .ch-h{ margin-top: 2px; }

/* Тиждень: дві шкали — до срібної та до золотої */
.ch-meters{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ch-meter{ padding: 10px 12px; background: var(--panel); border-radius: var(--radius); }
.ch-mrow{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.ch-mrow b{ font-variant-numeric: tabular-nums; font-size: 14px; }
.ch-meter small{ display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.meter{ height: 4px; margin-top: 8px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.meter i{ display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.ch-meter.silver .meter i{ background: linear-gradient(90deg, #9aa0aa, #e3e7ee); }
.ch-meter.gold .meter i{ background: linear-gradient(90deg, #c98a1e, #f0c25a); }

/* Скрині */
.chest-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.chest-card{ display: grid; justify-items: center; gap: 4px; padding: 12px 10px 12px; text-align: center; background: var(--panel); border-radius: var(--radius); }
.chest-card b{ font-size: 13px; }
.chest-card small{ font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }
.chest-card .btn{ margin-top: 6px; }
.chest-img{ width: 132px; height: auto; margin: 2px 0 4px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); animation: chestFloat 3.6s ease-in-out infinite; }
.chest-card.gold{ background: linear-gradient(160deg, rgba(224,163,62,.16), var(--panel) 70%); }
.chest-card.gold .chest-img{ filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(240,194,90,.35)); }
@keyframes chestFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }

/* Картки гравця */
.nft-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nft-card{ background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 35%, transparent); }
.nft-card img{ display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #000; }
.nft-body{ display: grid; gap: 3px; padding: 8px 10px 10px; }
.nft-body b{ font-size: 12.5px; line-height: 1.25; }
.nft-no{ color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.nft-rar{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rar); }
.nft-st{ font-size: 11px; color: var(--ink-3); }
.nft-st.ok{ color: var(--ok); }
.nft-link{ font-size: 11px; color: var(--ink-2); }
.nft-body .btn{ margin-top: 4px; justify-self: start; }
.ch-tools{ margin: 8px 0 0; }

/* Відкриття скрині */
.reveal-body{ text-align: center; }
.reveal-stage{ position: relative; display: grid; justify-items: center; gap: 10px; min-height: 300px; padding: 4px 0 2px; overflow: hidden; }
.reveal-stage::before{ content: ''; position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, var(--rar) 0%, transparent 55%); }
.reveal-chest{ align-self: center; margin-top: 70px; transition: transform .35s ease, opacity .35s ease; }
.reveal-chest .chest-img{ width: min(260px, 60vw); animation: none; }
.reveal-stage.shake .reveal-chest{ animation: chestShake .9s ease-in-out; }
.reveal-stage.burst .reveal-chest{ transform: scale(1.2); opacity: 0; }
.reveal-stage.burst::before{ animation: chestBurst .9s ease-out forwards; }
.reveal-card, .reveal-actions, .reveal-seed{ display: none; }
.reveal-stage.shown .reveal-chest{ display: none; }
.reveal-stage.shown .reveal-card{ display: grid; gap: 8px; justify-items: center; animation: cardIn .6s cubic-bezier(.2,.9,.3,1.15); }
.reveal-stage.shown .reveal-actions{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reveal-stage.shown .reveal-seed{ display: block; color: var(--ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.reveal-card img{ width: min(240px, 60vw, 42dvh); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: #000;
  box-shadow: 0 0 0 2px var(--rar), 0 0 44px color-mix(in srgb, var(--rar) 55%, transparent), 0 20px 40px rgba(0,0,0,.6); }
.reveal-name b{ display: block; font-size: 15px; }
.reveal-name span{ font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rar); }
@keyframes chestShake{ 0%,100%{ transform: rotate(0) } 10%{ transform: rotate(-5deg) translateY(-2px) } 20%{ transform: rotate(5deg) } 30%{ transform: rotate(-7deg) translateY(-4px) }
  40%{ transform: rotate(7deg) } 50%{ transform: rotate(-9deg) translateY(-6px) } 60%{ transform: rotate(9deg) } 70%{ transform: rotate(-7deg) translateY(-8px) }
  80%{ transform: rotate(7deg) } 90%{ transform: rotate(-4deg) translateY(-10px) } }
@keyframes chestBurst{ 0%{ opacity: 0; transform: scale(.3) } 40%{ opacity: .85 } 100%{ opacity: 0; transform: scale(1.5) } }
@keyframes cardIn{ from{ opacity: 0; transform: translateY(30px) scale(.8) } to{ opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce){ .reveal-stage *, .reveal-stage::before{ animation: none !important; transition: none !important; } }

/* ---- 3D-паси біля кнопок гри (Влад, 18 вересня): Squire's Seal ліворуч, Royal Charter праворуч.
   Сітка 3×2: фігурки займають обидва рядки збоку від «Пісочниці» й «Рейтингової», тож сторінка не стає вищою
   (Влад: «щоб не треба було скролити»). ---- */
/* Фігурки ВИСЯТЬ ЗОВНІ колонки кнопок (від'ємні поля): кнопки лишаються повної ширини, підказки в них — в один рядок,
   і висота сторінки така сама, як без фігурок. На вузькому екрані (≤ 560) місця збоку нема — фігурки всередині. */
.plays.plays-3d{ display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 8px; align-items: center; width: calc(100% + 184px); margin-left: -92px; margin-right: -92px; }
.plays-3d #playBots{ grid-column: 2; grid-row: 1; }
.plays-3d #playFriends{ grid-column: 2; grid-row: 2; margin-top: 0; }
.plays-3d #playMsg{ grid-column: 1 / -1; }
.pass3d{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; width: 84px; padding: 0;
  background: transparent; border: 0; border-radius: 14px; cursor: pointer; color: var(--ink-3); font: inherit;
  transition: color .18s ease; }
.pass3d.silver{ grid-column: 1; grid-row: 1 / 3; }
.pass3d.gold{ grid-column: 3; grid-row: 1 / 3; }
.pass3d:hover, .pass3d:focus-visible{ color: var(--ink); outline: 0; }   /* без підкладки: фігурка стоїть просто на сторінці */
.pass3d .p3d-host{ display: block; position: relative; width: 80px; height: 78px; }   /* полотно більше за плитку і виходить за неї (passes3d.js, pad) */
.pass3d .p3d-name{ font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; text-wrap: balance; }
/* золотий тир — ВИДІЛЕНО: підпис золотом і бейдж (підкладок під фігурками нема — вони «квадратили», Влад 18.09) */
.pass3d.gold{ color: var(--gold-2); }
.p3d-crown{ position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(224,163,62,.45)); }
.p3d-host.p3d-fail::before{ content: '◈'; display: grid; place-items: center; height: 100%; font-size: 30px; opacity: .5; }
@media (max-width: 560px){
  .plays.plays-3d{ grid-template-columns: 68px minmax(0, 1fr) 68px; column-gap: 4px; width: 100%; margin-left: 0; margin-right: 0; }
  .pass3d{ width: 68px; }
  .pass3d .p3d-host{ width: 66px; height: 66px; }
}

/* вікно пасів: дві картки поруч — «пергамент у рамі»: подвійна рамка (зовнішня + внутрішня лінія), стрічка-бейдж
   на золотій, перелік того, що дає пас, скриня-подарунок, ціна великим. Золота — золоте, срібна — сталеве. */
.panel-body.pass-body{ width: min(760px, 100%); }
.pp-deck{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 10px; }
@media (max-width: 560px){ .pp-deck{ grid-template-columns: 1fr; } }
.pp-card{ --edge: rgba(217,221,227,.30); --edge-2: rgba(217,221,227,.14); --tone: rgba(217,221,227,.07);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px 18px; border-radius: 16px;
  background: radial-gradient(120% 70% at 50% 0%, var(--tone), transparent 60%), linear-gradient(180deg, rgba(24,22,20,.96), rgba(12,13,17,.96));
  box-shadow: inset 0 0 0 1px var(--edge), 0 14px 40px rgba(0,0,0,.45); text-align: center; overflow: hidden; }
.pp-card::before{ content: ''; position: absolute; inset: 6px; border-radius: 11px; border: 1px solid var(--edge-2); pointer-events: none; }
.pp-card::after{ content: ''; position: absolute; left: 50%; top: 0; width: 60%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--edge), transparent); }
.pp-card.gold{ --edge: rgba(244,208,138,.85); --edge-2: rgba(224,163,62,.45); --tone: rgba(224,163,62,.20);
  box-shadow: inset 0 0 0 1.5px var(--edge), 0 0 0 1px rgba(224,163,62,.25), 0 16px 48px rgba(224,163,62,.22); }
.pp-card.focus{ transform: translateY(-2px); }
.pp-ribbon{ position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1a1206;
  background: linear-gradient(180deg, #f7dfa8, var(--gold) 70%); border-radius: 99px; padding: 4px 12px;
  box-shadow: 0 0 0 1px rgba(255,232,180,.6), 0 6px 16px rgba(224,163,62,.4); }
.pp-3d{ position: relative; width: 172px; height: 172px; margin: 6px 0 4px; }
.pp-name{ font-size: 17px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.pp-card.gold .pp-name{ color: var(--gold-2); }
.pp-own{ font-style: normal; color: var(--ok); }
.pp-sub{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: -5px; }
.pp-desc{ font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; max-width: 30ch; }
.pp-price{ display: flex; align-items: baseline; gap: 7px; margin-top: 6px; }
.pp-price b{ font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ducat); }
.pp-card.gold .pp-price b{ color: var(--gold-2); }
.pp-price span{ font-size: 11.5px; color: var(--ink-3); }
.pp-feat{ list-style: none; margin: 8px 0 0; padding: 10px 12px; width: 100%; text-align: left; display: grid; gap: 6px;
  border-radius: 10px; background: rgba(var(--pearl-rgb),.04); box-shadow: inset 0 0 0 1px var(--edge-2); }
.pp-feat li{ position: relative; padding-left: 18px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.pp-feat li::before{ content: '✦'; position: absolute; left: 0; top: 0; color: var(--ducat); font-size: 11px; }
.pp-card.gold .pp-feat li::before{ color: var(--gold-2); }
.pp-chest{ margin-top: 2px; }
.pp-chest img{ width: 84px; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.pp-card.gold .pp-chest img{ filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(240,194,90,.35)); }
.pp-note{ font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.pp-card .btn{ width: auto; min-width: 170px; padding: 10px 22px; margin-top: 6px; }
.pp-card.silver .btn{ box-shadow: inset 0 0 0 1px rgba(217,221,227,.35), 0 8px 22px rgba(0,0,0,.3); }
.pp-card .btn:disabled{ opacity: .45; cursor: default; transform: none; }
.pp-foot{ margin-top: 12px; }
.pp-msg{ margin-top: 8px; min-height: 1.2em; }

/* Телефон: картка «дані мережі» для ручного додавання і кнопка-посилання, що її розгортає (18.09) */
.wnetcard{width:100%;text-align:left;font-size:12px;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wnetcard .hint{width:100%;text-align:left}
.wnetcard .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wnetcard .k{opacity:.8}
.wnetcard code{font-size:11px;word-break:break-all;user-select:all}
.wnetcard .wcopyv{padding:2px 8px;font-size:11px;width:auto}
.wnettoggle{background:none;border:0;color:inherit;opacity:.75;text-decoration:underline;cursor:pointer;font-size:12px;width:100%;padding:4px}
.wallet .wmsg.ok{color:#8fd694}