:root {
  --night: #150A2E;
  --night-deep: #08040F;
  --night-soft: #23134A;
  --parchment: #F0E1BE;
  --parchment-deep: #DCC79A;
  --gold: #D9A441;
  --gold-soft: #EBCB86;
  --ember: #A8324A;
  --moon: #B9C6E8;
  --ink: #2A1E12;
  --ink-soft: #5A4632;

  --display: 'Forum', Georgia, serif;
  --body: 'Lora', Georgia, serif;
  --ui: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Класи нижче задають display явно, тому атрибут hidden потребує пріоритету */
[hidden] { display: none !important; }

/* ─────────── НІЧНЕ НЕБО ─────────── */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sky span {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
}
.sky span:nth-child(1) {
  box-shadow:
    32.4vw 15.1vh 0 0 rgba(255,247,230,0.67),
    7.2vw 53.6vh 0 0 rgba(255,247,230,0.49),
    5.8vw 50.7vh 0 0 rgba(255,247,230,0.27),
    43.4vw 7.0vh 0 0 rgba(255,247,230,0.31),
    42.5vw 82.7vh 0 0 rgba(255,247,230,0.33),
    22.3vw 62.7vh 0 0 rgba(255,247,230,0.87),
    57.7vw 39.7vh 0 0 rgba(255,247,230,0.88),
    4.7vw 85.8vh 0 0 rgba(255,247,230,0.44),
    14.4vw 11.8vh 0 0 rgba(255,247,230,0.45),
    81.6vw 18.1vh 0 0 rgba(255,247,230,0.63),
    63.9vw 37.2vh 0 0 rgba(255,247,230,0.61),
    6.3vw 6.0vh 0 0 rgba(255,247,230,0.38),
    68.0vw 42.8vh 0 0 rgba(255,247,230,0.45),
    58.6vw 45.3vh 0 0 rgba(255,247,230,0.44),
    79.4vw 69.9vh 0 0 rgba(255,247,230,0.41),
    57.4vw 52.5vh 0 0 rgba(255,247,230,0.82),
    72.9vw 28.8vh 0 0 rgba(255,247,230,0.89),
    11.8vw 41.8vh 0 0 rgba(255,247,230,0.74),
    15.2vw 48.9vh 0 0 rgba(255,247,230,0.28),
    66.8vw 76.5vh 0 0 rgba(255,247,230,0.62),
    87.5vw 31.4vh 0 0 rgba(255,247,230,0.7),
    59.4vw 58.0vh 0 0 rgba(255,247,230,0.55),
    84.0vw 94.5vh 0 0 rgba(255,247,230,0.56),
    66.4vw 6.1vh 0 0 rgba(255,247,230,0.71),
    64.7vw 99.3vh 0 0 rgba(255,247,230,0.78),
    28.5vw 38.6vh 0 0 rgba(255,247,230,0.68),
    2.3vw 46.2vh 0 0 rgba(255,247,230,0.36),
    11.7vw 5.9vh 0 0 rgba(255,247,230,0.75),
    12.9vw 24.8vh 0 0 rgba(255,247,230,0.5),
    87.1vw 8.1vh 0 0 rgba(255,247,230,0.54),
    54.9vw 88.3vh 0 0 rgba(255,247,230,0.78),
    86.4vw 27.8vh 0 0 rgba(255,247,230,0.52),
    35.9vw 88.4vh 0 0 rgba(255,247,230,0.87),
    15.1vw 17.6vh 0 0 rgba(255,247,230,0.4),
    23.3vw 48.5vh 0 0 rgba(255,247,230,0.63),
    26.3vw 0.4vh 0 0 rgba(255,247,230,0.52),
    36.9vw 56.6vh 0 0 rgba(255,247,230,0.87),
    69.0vw 51.5vh 0 0 rgba(255,247,230,0.65),
    67.6vw 5.4vh 0 0 rgba(255,247,230,0.83),
    78.0vw 87.5vh 0 0 rgba(255,247,230,0.77),
    39.2vw 39.9vh 0 0 rgba(255,247,230,0.32),
    63.4vw 6.2vh 0 0 rgba(255,247,230,0.29),
    20.9vw 16.2vh 0 0 rgba(255,247,230,0.47),
    5.3vw 0.0vh 0 0 rgba(255,247,230,0.35),
    10.1vw 36.4vh 0 0 rgba(255,247,230,0.27),
    87.4vw 61.4vh 0 0 rgba(255,247,230,0.35),
    25.2vw 34.7vh 0 0 rgba(255,247,230,0.49),
    12.3vw 84.9vh 0 0 rgba(255,247,230,0.9),
    46.6vw 48.4vh 0 0 rgba(255,247,230,0.31),
    10.2vw 34.3vh 0 0 rgba(255,247,230,0.42),
    82.9vw 16.1vh 0 0 rgba(255,247,230,0.27),
    95.1vw 52.8vh 0 0 rgba(255,247,230,0.35),
    54.3vw 2.7vh 0 0 rgba(255,247,230,0.59),
    97.9vw 86.3vh 0 0 rgba(255,247,230,0.7),
    26.1vw 36.7vh 0 0 rgba(255,247,230,0.36),
    77.2vw 53.3vh 0 0 rgba(255,247,230,0.76),
    33.0vw 22.3vh 0 0 rgba(255,247,230,0.78),
    98.5vw 85.3vh 0 0 rgba(255,247,230,0.77),
    81.8vw 74.0vh 0 0 rgba(255,247,230,0.4),
    51.8vw 35.6vh 0 0 rgba(255,247,230,0.27),
    2.8vw 27.9vh 0 0 rgba(255,247,230,0.42),
    69.3vw 95.7vh 0 0 rgba(255,247,230,0.54),
    93.7vw 98.8vh 0 0 rgba(255,247,230,0.87),
    36.5vw 22.0vh 0 0 rgba(255,247,230,0.4),
    19.7vw 20.4vh 0 0 rgba(255,247,230,0.66),
    90.0vw 84.0vh 0 0 rgba(255,247,230,0.56),
    65.3vw 80.0vh 0 0 rgba(255,247,230,0.31),
    66.1vw 91.0vh 0 0 rgba(255,247,230,0.76),
    75.0vw 47.8vh 0 0 rgba(255,247,230,0.37),
    78.9vw 33.3vh 0 0 rgba(255,247,230,0.77);
  animation: twinkle 5.5s ease-in-out infinite;
}
.sky span:nth-child(2) {
  width: 1.6px;
  height: 1.6px;
  box-shadow:
    97.2vw 39.6vh 0 0 rgba(255,247,230,0.51),
    94.7vw 72.5vh 0 0 rgba(255,247,230,0.36),
    12.7vw 15.1vh 0 0 rgba(255,247,230,0.84),
    80.7vw 14.6vh 0 0 rgba(255,247,230,0.79),
    98.0vw 65.7vh 0 0 rgba(255,247,230,0.48),
    54.9vw 13.1vh 0 0 rgba(255,247,230,0.26),
    97.1vw 65.0vh 0 0 rgba(255,247,230,0.59),
    93.4vw 43.4vh 0 0 rgba(255,247,230,0.82),
    82.6vw 21.1vh 0 0 rgba(255,247,230,0.41),
    29.3vw 24.1vh 0 0 rgba(255,247,230,0.63),
    25.9vw 41.9vh 0 0 rgba(255,247,230,0.34),
    91.0vw 35.4vh 0 0 rgba(255,247,230,0.55),
    58.3vw 90.4vh 0 0 rgba(255,247,230,0.52),
    91.8vw 50.2vh 0 0 rgba(255,247,230,0.6),
    52.4vw 1.9vh 0 0 rgba(255,247,230,0.54),
    18.3vw 0.4vh 0 0 rgba(255,247,230,0.77),
    17.2vw 47.3vh 0 0 rgba(255,247,230,0.72),
    55.6vw 32.6vh 0 0 rgba(255,247,230,0.59),
    55.5vw 78.4vh 0 0 rgba(255,247,230,0.32),
    56.0vw 24.8vh 0 0 rgba(255,247,230,0.43),
    77.2vw 50.8vh 0 0 rgba(255,247,230,0.62),
    76.0vw 91.2vh 0 0 rgba(255,247,230,0.54),
    61.3vw 50.6vh 0 0 rgba(255,247,230,0.58),
    69.3vw 45.2vh 0 0 rgba(255,247,230,0.6),
    47.8vw 94.2vh 0 0 rgba(255,247,230,0.7),
    87.7vw 94.2vh 0 0 rgba(255,247,230,0.42),
    56.0vw 94.3vh 0 0 rgba(255,247,230,0.8),
    13.7vw 12.2vh 0 0 rgba(255,247,230,0.54),
    7.3vw 24.1vh 0 0 rgba(255,247,230,0.3),
    66.9vw 78.4vh 0 0 rgba(255,247,230,0.83),
    15.4vw 71.6vh 0 0 rgba(255,247,230,0.68),
    14.3vw 88.3vh 0 0 rgba(255,247,230,0.88),
    22.0vw 95.3vh 0 0 rgba(255,247,230,0.51),
    48.7vw 99.0vh 0 0 rgba(255,247,230,0.79);
  animation: twinkle 8s ease-in-out infinite reverse;
}
.sky span:nth-child(3) {
  width: 2.4px;
  height: 2.4px;
  box-shadow:
    16.1vw 43.2vh 0 0 rgba(255,247,230,0.59),
    33.9vw 19.6vh 0 0 rgba(255,247,230,0.46),
    72.2vw 1.9vh 0 0 rgba(255,247,230,0.61),
    44.0vw 1.8vh 0 0 rgba(255,247,230,0.47),
    62.4vw 51.2vh 0 0 rgba(255,247,230,0.29),
    98.5vw 78.8vh 0 0 rgba(255,247,230,0.88),
    10.5vw 26.6vh 0 0 rgba(255,247,230,0.28),
    77.9vw 27.0vh 0 0 rgba(255,247,230,0.33),
    42.2vw 91.1vh 0 0 rgba(255,247,230,0.78),
    25.9vw 14.9vh 0 0 rgba(255,247,230,0.85),
    57.1vw 70.0vh 0 0 rgba(255,247,230,0.31),
    5.8vw 68.8vh 0 0 rgba(255,247,230,0.53),
    7.2vw 93.8vh 0 0 rgba(255,247,230,0.66),
    80.2vw 8.4vh 0 0 rgba(255,247,230,0.81);
  animation: twinkle 11s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

.gate, .table { position: relative; z-index: 1; }

html, body {
  margin: 0;
  min-height: 100%;
  /* Запобіжник: сторінка ніколи не повинна гортатись убік. Без цього
     будь-яке переповнення рядка (напр. забагато кнопок на вузькому
     телефоні) зсуває все, що центроване відносно документа. */
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(90% 55% at 18% 8%, rgba(122, 62, 138, .5) 0%, transparent 60%),
    radial-gradient(80% 50% at 84% 22%, rgba(64, 52, 160, .45) 0%, transparent 62%),
    radial-gradient(120% 80% at 50% -12%, #40206F 0%, transparent 58%),
    radial-gradient(100% 65% at 50% 112%, #33175C 0%, transparent 62%),
    var(--night-deep);
  color: var(--moon);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }

.btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn--gold {
  background: linear-gradient(180deg, #F6E1AC 0%, var(--gold-soft) 40%, var(--gold) 100%);
  color: #2A1B04;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 4px 18px rgba(217, 164, 65, .3),
    0 0 42px rgba(217, 164, 65, .18);
}
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 22px rgba(217,164,65,.42), 0 0 56px rgba(217,164,65,.28); }
.btn--ghost:hover { border-color: rgba(235, 203, 134, .55); background: rgba(235, 203, 134, .06); }
.btn--ghost {
  background: transparent;
  border-color: rgba(235, 203, 134, .32);
  color: var(--gold-soft);
}

:where(button, input, textarea, a):focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

/* ─────────── ВХІД ─────────── */
.gate {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}

.gate__sigil { width: 62px; margin-bottom: 20px; }
.gate__sigil svg {
  width: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(217, 164, 65, .6)) drop-shadow(0 0 26px rgba(217, 164, 65, .35));
  animation: sigil 44s linear infinite, breathe 5s ease-in-out infinite;
}
@keyframes sigil { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

.gate__title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  font-weight: 400;
  letter-spacing: .06em;
  margin: 0;
  color: var(--parchment);
  text-shadow: 0 0 28px rgba(217, 164, 65, .45), 0 0 60px rgba(122, 62, 138, .5);
}

.gate__lede {
  font-family: var(--body);
  font-style: italic;
  color: rgba(185, 198, 232, .8);
  max-width: 26ch;
  line-height: 1.6;
  margin: 10px 0 34px;
}

.gate__form { width: 100%; max-width: 340px; display: grid; gap: 14px; }

.field { display: grid; gap: 6px; text-align: left; }
.field__label {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235, 203, 134, .66);
}
.field input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(235, 203, 134, .24);
  background: rgba(255, 255, 255, .04);
  color: var(--parchment);
  font: 500 1rem var(--ui);
}
#in-room { text-transform: uppercase; letter-spacing: .22em; }

.field__hint {
  font-size: .74rem;
  line-height: 1.5;
  color: rgba(185, 198, 232, .5);
}

#btn-open-codes { margin-top: 10px; }

.gate__link {
  border: none;
  background: none;
  color: rgba(235, 203, 134, .6);
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}
.gate__link:hover { color: var(--gold-soft); }

.gate__note {
  max-width: 32ch;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(185, 198, 232, .5);
  margin-top: 26px;
}
.gate__error {
  margin-top: 14px;
  color: #F3A8B8;
  font-size: .9rem;
  max-width: 32ch;
}

/* ─────────── СТІЛ ─────────── */
.table {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin-inline: auto;
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar__label {
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(235, 203, 134, .55);
}
.bar__room strong {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--gold-soft);
}
.bar__turn {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  text-align: center;
  color: rgba(185, 198, 232, .82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(235, 203, 134, .2);
  background: rgba(255, 255, 255, .04);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: rgba(235, 203, 134, .1); }

/* Щоденник — головна кнопка серед інструментів */
#btn-journal {
  width: 54px;
  height: 54px;
  font-size: 1.55rem;
  border-color: rgba(235, 203, 134, .45);
  background: linear-gradient(180deg, rgba(235, 203, 134, .16), rgba(235, 203, 134, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 18px rgba(217, 164, 65, .18);
}
#btn-journal:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 28px rgba(217, 164, 65, .42);
}
.icon-btn[aria-pressed="false"] { opacity: .4; border-style: dashed; }

/* Обличчя */
.faces {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.faces::-webkit-scrollbar { display: none; }

.face {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: #150C2A;
  border: 1.5px solid transparent;
}
.face--active {
  border-color: var(--gold);
  animation: faceGlow 2.6s ease-in-out infinite;
}
@keyframes faceGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217, 164, 65, .3), 0 0 16px rgba(217, 164, 65, .28); }
  50% { box-shadow: 0 0 0 1px rgba(217, 164, 65, .55), 0 0 32px rgba(217, 164, 65, .5); }
}
.face video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #150C2A;
}
.face__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 6px 4px;
  font-size: .66rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.face__off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: linear-gradient(160deg, #1F1140, #120A28);
  color: rgba(235, 203, 134, .6);
}

/* Спіраль */
.board {
  display: grid;
  place-items: center;
  min-height: 0;
  perspective: 1100px;
  perspective-origin: 50% 42%;
}
#spiral {
  width: min(96vw, 72vh, 620px);
  height: auto;
  touch-action: none; /* щоб перетягування не гортало сторінку */
  transform-style: preserve-3d;
  animation: table 20s ease-in-out infinite;
}

/* Дошка лежить на столі й ледь погойдується, ніби від подиху свічок */
@keyframes table {
  0%, 100% { transform: rotateX(31deg) rotateZ(-1.2deg) translateY(0); }
  50% { transform: rotateX(29deg) rotateZ(1.2deg) translateY(-6px); }
}

/* Коли ви берете фішку, поле піднімається до вас — і прицілитись легше */
.board--flat #spiral {
  animation: none;
  transform: rotateX(0deg) rotateZ(0deg);
  transition: transform .5s cubic-bezier(.3, .9, .3, 1);
}

#thread {
  stroke: url(#threadGrad);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: .75;
}

.ring {
  fill: none;
  stroke: rgba(235, 203, 134, .26);
  stroke-width: 1;
  stroke-dasharray: 2 9;
  transform-origin: 200px 200px;
  animation: turn 110s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

.glow { animation: pulse 6s ease-in-out infinite; transform-origin: 200px 200px; }
@keyframes pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.13); }
}



/* Свічки */
.candle__halo { fill: url(#steam); }
.candle__body {
  fill: #F0E1BE;
  stroke: rgba(140, 106, 52, .5);
  stroke-width: .8;
}
.candle__flame {
  fill: #F6D98A;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes flicker {
  0%, 100% { opacity: .82; transform: scaleY(1) scaleX(1) rotate(0deg); }
  22% { opacity: 1; transform: scaleY(1.24) scaleX(.88) rotate(-4deg); }
  48% { opacity: .68; transform: scaleY(.88) scaleX(1.08) rotate(3deg); }
  74% { opacity: .95; transform: scaleY(1.12) scaleX(.95) rotate(-2deg); }
}

/* Німб довкола свічки пульсує разом із полум'ям */
.candle__halo {
  animation: halo 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes halo {
  0%, 100% { opacity: .7; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.22); }
}

/* Іскри над казаном */
.mote {
  fill: #F6D98A;
  transform-box: fill-box;
  animation: rise 9s linear infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  12% { opacity: .95; }
  40% { transform: translate(7px, -46px) scale(1); }
  70% { opacity: .55; transform: translate(-5px, -84px) scale(.85); }
  100% { opacity: 0; transform: translate(3px, -128px) scale(.5); }
}

/* Відьма і казан */
.witch__hat, .witch__brim {
  fill: #150A2E;
  stroke: rgba(217, 164, 65, .6);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.witch__band { fill: rgba(217, 164, 65, .5); }
.witch__head { fill: #35205E; stroke: rgba(217, 164, 65, .45); stroke-width: 1.1; }
.witch__cloak {
  fill: #1B0E38;
  stroke: rgba(217, 164, 65, .5);
  stroke-width: 1.3;
}
.witch__arms {
  fill: none;
  stroke: rgba(235, 203, 134, .75);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.cauldron__body {
  fill: #14082A;
  stroke: rgba(217, 164, 65, .55);
  stroke-width: 1.4;
}
.cauldron__rim {
  fill: #1F1140;
  stroke: rgba(235, 203, 134, .7);
  stroke-width: 1.4;
}
.cauldron__legs {
  fill: none;
  stroke: rgba(217, 164, 65, .5);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.cauldron__steam {
  fill: url(#steam);
  animation: steam 5s ease-in-out infinite;
  transform-origin: 200px 322px;
}
@keyframes steam {
  0%, 100% { opacity: .5; transform: scale(1) translateY(0); }
  35% { opacity: .95; transform: scale(1.18) translateY(-5px); }
  70% { opacity: .7; transform: scale(1.05) translateY(-2px); }
}

.cell { cursor: default; }
.cell__disc { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }

/* Фішки стоять на полі, а не лежать у ньому */
.token { transform-style: preserve-3d; }
.token__inner {
  transform: translateY(-7px);
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .55));
}
.cell__disc {
  fill: rgba(36, 19, 68, .88);
  stroke: rgba(235, 203, 134, .45);
  stroke-width: 1.2;
  transition: fill .35s ease, stroke .25s ease, stroke-width .18s ease;
}
.cell__num {
  font: 600 11px var(--ui);
  fill: rgba(240, 225, 190, .8);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill .35s ease;
}

.cell--done { cursor: default; }
.cell--open { cursor: pointer; }
.cell--done .cell__disc {
  fill: rgba(217, 164, 65, .62);
  stroke: var(--gold-soft);
  filter: drop-shadow(0 0 7px rgba(217, 164, 65, .55));
}
.cell--done .cell__num { fill: #2A1B04; }
.cell--open:hover .cell__disc { stroke-width: 2.4; filter: drop-shadow(0 0 12px rgba(246, 217, 138, .8)); }

.cell--last .cell__disc {
  fill: #2E1A55;
  stroke: var(--gold);
  stroke-width: 2.2;
}
.cell--last .cell__num { fill: var(--gold-soft); font-weight: 700; }
.cell--last.cell--done .cell__disc { fill: var(--gold); }
.cell--last.cell--done .cell__num { fill: #2A1B04; }

.token {
  transition: transform .16s ease-out;
  filter: drop-shadow(0 0 6px currentColor);
}
/* Клітинка, на якій стоїть ваша фішка */
.cell--here .cell__disc {
  stroke: #FFF3D4;
  stroke-width: 2.4;
  animation: hereGlow 2.4s ease-in-out infinite;
}
@keyframes hereGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(246, 217, 138, .6)); }
  50% { filter: drop-shadow(0 0 15px rgba(246, 217, 138, 1)); }
}

/* Приземлення фішки */
.cell--land .cell__disc {
  animation: land .9s cubic-bezier(.2, .9, .3, 1);
}
@keyframes land {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(246, 217, 138, 0)); }
  25% { transform: scale(1.4); filter: drop-shadow(0 0 22px rgba(246, 217, 138, 1)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(246, 217, 138, .5)); }
}
.cell--land .cell__disc { transform-box: fill-box; transform-origin: center; }

/* Фішка, яку можна взяти */
.token--grab {
  cursor: grab;
  animation: beckon 1.6s ease-in-out infinite;
}
@keyframes beckon {
  0%, 100% { filter: drop-shadow(0 0 6px currentColor); }
  50% { filter: drop-shadow(0 0 16px currentColor) brightness(1.25); }
}
.token--dragging {
  cursor: grabbing;
  transition: none;
  animation: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px currentColor);
}
.token--dragging .token__inner { transform: translateY(-14px) scale(1.28); }

.token--hop .token__inner { animation: hop .16s ease-out; }
@keyframes hop {
  0%, 100% { transform: translateY(-7px); }
  50% { transform: translateY(-16px) rotate(-7deg) scale(1.06); }
}
.token__cone, .token__brim {
  stroke: rgba(8, 4, 15, .85);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.token__band { fill: rgba(8, 4, 15, .55); }
.token--home { opacity: .8; }

/* Низ */
.deck {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'die act' 'hint hint';
  align-items: center;
  gap: 10px 14px;
}
.die {
  grid-area: die;
  width: 62px;
  height: 62px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 3px;
  padding: 9px;
  border-radius: 15px;
  border: 1px solid rgba(235, 203, 134, .34);
  background: linear-gradient(158deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 16px rgba(0, 0, 0, .3);
}
.die span { border-radius: 50%; }
.die span.on {
  background: var(--gold-soft);
  box-shadow: 0 0 7px rgba(235, 203, 134, .75);
}
.die--idle span.on { background: rgba(235, 203, 134, .2); box-shadow: none; }
.die--rolling { animation: shake .26s ease-in-out infinite; }
@keyframes shake {
  25% { transform: rotate(-13deg) scale(1.05); }
  50% { transform: rotate(11deg) scale(1.05); }
  75% { transform: rotate(-5deg); }
}
#btn-act { grid-area: act; position: relative; overflow: hidden; }

/* Кнопка ходу манить, коли черга ваша */
#btn-act:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 3.4s ease-in-out infinite;
}
@keyframes sheen {
  0%, 62% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.deck__hint {
  grid-area: hint;
  margin: 0;
  font-size: .78rem;
  text-align: center;
  color: rgba(185, 198, 232, .55);
  min-height: 1em;
}

/* ─────────── КАРТКА ─────────── */
.card {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(60% 50% at 50% 40%, rgba(58, 24, 82, .82), rgba(8, 4, 15, .9));
  backdrop-filter: blur(7px);
  overflow-y: auto;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } }

.scroll {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 30px 26px 24px;
  border-radius: 6px 6px 10px 10px;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(178deg, #F4E7C8 0%, #E8D6AC 55%, #DCC79A 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(140, 106, 52, .3);
  animation: unfurl .55s cubic-bezier(.2, .9, .3, 1);
  transform-origin: top center;
}
@keyframes unfurl {
  0% { transform: translateY(22px) scaleY(.82) rotateX(9deg); opacity: 0; }
  60% { transform: translateY(-3px) scaleY(1.02) rotateX(0); opacity: 1; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

.scroll > * { animation: rise-in .45s both; }
.scroll > *:nth-child(2) { animation-delay: .06s; }
.scroll > *:nth-child(3) { animation-delay: .1s; }
.scroll > *:nth-child(4) { animation-delay: .16s; }
.scroll > *:nth-child(5) { animation-delay: .22s; }
.scroll > *:nth-child(6) { animation-delay: .28s; }
.scroll > *:nth-child(7) { animation-delay: .34s; }
.scroll > *:nth-child(8) { animation-delay: .4s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(9px); }
}

.scroll__eyebrow {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.scroll__eyebrow span {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0;
  vertical-align: -.12em;
  margin-right: 6px;
  color: #8A5A1C;
}

.scroll__title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 4px 0 22px;
  color: #241708;
}

.scroll__head {
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8A5A1C;
  margin: 20px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(140, 106, 52, .26);
}

.scroll__legend, .scroll__decree {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
}
.scroll__decree { font-style: italic; color: #3A2A16; }

.scroll__questions {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scroll__questions li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.scroll__questions li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #8A5A1C;
}

.scroll__x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(140, 106, 52, .14);
  color: #6B4A1E;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.scroll__x:hover { background: rgba(140, 106, 52, .28); }

.notes { display: block; margin-top: 22px; }
.notes__who {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.journal__toggle {
  width: 100%;
  margin-top: 16px;
  padding: 9px;
  border: 1px dashed rgba(140, 106, 52, .4);
  border-radius: 10px;
  background: transparent;
  color: #8A5A1C;
  font-size: .78rem;
  letter-spacing: .06em;
}
.journal__author {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 16px 0 6px;
  color: #6B4A1E;
}
.notes__label {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.notes__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(140, 106, 52, .4);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font: 600 1.05rem var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.notes textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(140, 106, 52, .34);
  background: rgba(255, 255, 255, .42);
  color: var(--ink);
  font: 400 .95rem var(--body);
  resize: vertical;
}

.scroll__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

/* Водяний знак на картці */
.scroll__mark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  animation: none !important;
  mix-blend-mode: multiply;
}
.scroll > .scroll__mark { animation: none; }

/* Попередження про одноразовий код */
.onetime {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #A8324A;
  background: rgba(168, 50, 74, .1);
  font-family: var(--body);
  font-size: .88rem;
  line-height: 1.55;
  color: #5A2430;
}

/* Панель кодів */
.codes__lede {
  font-family: var(--body);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.codes__row { display: flex; gap: 8px; align-items: stretch; }
.codes__row .notes__input { flex: 1; }
.codes__row .btn { width: auto; padding-inline: 20px; }

.codes__make {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.codes__make label {
  display: grid;
  gap: 5px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.codes__make input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(140, 106, 52, .4);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  font: 600 1rem var(--ui);
}
.codes__make .btn { grid-column: 1 / -1; }

.codes__made {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(46, 107, 79, .12);
  font: 500 .82rem var(--ui);
  line-height: 1.7;
  color: #235240;
  word-break: break-all;
}

.code-row__seats {
  font-family: var(--body);
  font-size: .82rem;
  color: var(--ink-soft);
}

/* Коло за столом */
.table-panel__lede {
  font-family: var(--body);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.seat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(140, 106, 52, .18);
}
.seat__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #2E6B4F;
}
.seat--away .seat__dot { background: #A8324A; }
.seat__body { flex: 1; min-width: 0; }
.seat__name {
  font: 600 1rem var(--ui);
  color: var(--ink);
}
.seat__meta {
  display: block;
  font-family: var(--body);
  font-size: .8rem;
  color: var(--ink-soft);
}
.seat__kick {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(168, 50, 74, .5);
  background: transparent;
  color: #8A2436;
  font-size: .78rem;
}
.seat__kick:hover { background: rgba(168, 50, 74, .12); }
.seat--turn { background: rgba(217, 164, 65, .12); }

/* Облік кодів */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 14px;
}
.tally__cell {
  padding: 12px 8px;
  border-radius: 10px;
  background: rgba(140, 106, 52, .12);
  text-align: center;
}
.tally__num {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1.1;
  color: #241708;
}
.tally__label {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tally__cell--free .tally__num { color: #2E6B4F; }
.tally__cell--used .tally__num { color: #8A5A1C; }

.codes__warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(168, 50, 74, .12);
  font-family: var(--body);
  font-size: .86rem;
  line-height: 1.55;
  color: #5A2430;
}

.code-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(140, 106, 52, .16);
  font-size: .9rem;
}
.code-row__code {
  font: 600 .95rem var(--ui);
  letter-spacing: .06em;
  color: var(--ink);
}
.code-row__who {
  color: var(--ink-soft);
  text-align: right;
  font-family: var(--body);
}
.codes__empty {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

/* ─────────── ЗАВЕРШЕННЯ КОЛА ─────────── */
.card--finish {
  z-index: 30;
  background: radial-gradient(70% 55% at 50% 38%, rgba(74, 37, 128, .92), rgba(8, 4, 15, .97));
}

.farewell {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 44px 30px 32px;
  text-align: center;
  border-radius: 22px;
  border: 1px solid rgba(235, 203, 134, .22);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(122, 62, 138, .38), transparent 70%),
    rgba(16, 8, 36, .72);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: unfurl .55s cubic-bezier(.2, .9, .3, 1);
}

.farewell__sigil {
  width: 60px;
  margin: 0 auto 20px;
}
.farewell__sigil svg {
  width: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(217, 164, 65, .6));
  animation: sigil 60s linear infinite, breathe 5s ease-in-out infinite;
}

.farewell__eyebrow {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(235, 203, 134, .7);
}
.farewell__title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 10px 0 16px;
  color: var(--parchment);
  text-shadow: 0 0 26px rgba(217, 164, 65, .35);
}
.farewell__text {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(214, 206, 232, .9);
  margin: 0 0 26px;
}

.farewell__acts { display: grid; gap: 10px; }

.icon-btn--leave { border-color: rgba(168, 50, 74, .35); }
.icon-btn--leave:hover { background: rgba(168, 50, 74, .16); }

.btn--exit {
  background: transparent;
  border-color: rgba(168, 50, 74, .5);
  color: #F0A8B6;
  margin-top: 6px;
}
.btn--exit:hover {
  background: rgba(168, 50, 74, .14);
  border-color: rgba(168, 50, 74, .8);
}

/* Провідниці */
.guide-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(140, 106, 52, .16);
}
.guide-row__body { flex: 1; min-width: 0; }
.guide-row__name { font: 600 .98rem var(--ui); color: var(--ink); }
.guide-row__meta {
  display: block;
  font-family: var(--body);
  font-size: .78rem;
  color: var(--ink-soft);
}
.guide-row--off .guide-row__name { text-decoration: line-through; opacity: .6; }
.guide-row__act {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(140, 106, 52, .45);
  background: transparent;
  color: #6B4A1E;
  font-size: .76rem;
}
.guide-row__act:hover { background: rgba(140, 106, 52, .12); }

/* Щоденник */
.journal__empty {
  font-family: var(--body);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
}
.journal__session {
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A5A1C;
  margin: 22px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(140, 106, 52, .26);
}
.journal__session:first-child { margin-top: 8px; }
.journal__entry { margin-bottom: 14px; }
.journal__step {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 2px;
  color: #241708;
}
.journal__text {
  font-family: var(--body);
  font-size: .96rem;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink);
}

/* Десктоп */
@media (min-width: 760px) {
  .table { grid-template-rows: auto auto 1fr auto; padding-inline: 24px; }
  .face { width: 108px; }
  .deck {
    grid-template-columns: auto 220px 1fr;
    grid-template-areas: 'die act hint';
    justify-content: start;
  }
  .deck__hint { text-align: left; }
}

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