:root {
  --bg: #14162b;
  --panel: #1e2140;
  --panel-2: #2a2e5a;
  --text: #eef0ff;
  --muted: #9aa0c8;
  --accent: #7c6cff;
  --yellow: #f7c531;
  --green: #37c85a;
  --red: #ec4555;
  --blue: #3f7df2;
}

* { box-sizing: border-box; }

/* Тема партии: цвет фигуры, выпавшей в жребии (data-theme = индекс цвета) */
body {
  --accent-text: #fff;
  --glow: rgba(124, 108, 255, .45);
  --bg-top: #2a2d5c;
  --cell-a: #1c1f3e;
  --cell-b: #171a34;
}
body[data-theme="0"] {
  --accent: var(--yellow); --accent-text: #2b2100; --glow: rgba(247, 197, 49, .45);
  --bg-top: #574612; --cell-a: #2b2716; --cell-b: #221f11;
}
body[data-theme="1"] {
  --accent: var(--green); --accent-text: #062b12; --glow: rgba(55, 200, 90, .45);
  --bg-top: #17502c; --cell-a: #16301f; --cell-b: #112619;
}
body[data-theme="2"] {
  --accent: var(--red); --accent-text: #fff; --glow: rgba(236, 69, 85, .45);
  --bg-top: #5a1a24; --cell-a: #321a20; --cell-b: #28141a;
}
body[data-theme="3"] {
  --accent: var(--blue); --accent-text: #fff; --glow: rgba(63, 125, 242, .45);
  --bg-top: #1b3468; --cell-a: #1a2440; --cell-b: #141c34;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: radial-gradient(circle at 50% 0%, var(--bg-top), var(--bg) 60%) fixed;
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}

.hidden { display: none !important; }

.screen {
  width: 100%;
  max-width: 620px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

h1 { margin: 8px 0; font-size: 36px; }
h1 span { color: var(--accent); }

button, input {
  font: inherit;
  width: 100%;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
}

input {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-2);
  outline: none;
}
input:focus { border-color: var(--accent); }

button {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent);
  transition: filter .15s, transform .1s;
}
button:hover { filter: brightness(1.12); }
button:active { transform: scale(.97); }
button.secondary { background: var(--panel-2); color: #fff; }

.legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tile-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.tile-static svg { width: 40px; height: 40px; }

.rules {
  width: 100%;
  background: var(--panel);
  border-radius: 14px;
  padding: 4px 18px 12px;
  color: var(--muted);
  line-height: 1.45;
}
.rules h2 { color: var(--text); font-size: 18px; }
.rules ol { padding-left: 20px; margin: 0; }
.hint { font-size: 13px; }

.field {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}
.field input { width: 120px; text-align: center; }

/* Приглашения */
.invited, .invite {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 2px solid var(--accent);
  text-align: center;
}
.invited p, .invite p { margin: 0; }
.invite { border-color: var(--panel-2); color: var(--muted); }
.invite input { max-width: none; font-size: 14px; text-align: center; }
.invite .hint { color: var(--yellow); }

/* Поиск */
.spinner {
  width: 54px;
  height: 54px;
  margin-top: 60px;
  border-radius: 50%;
  border: 5px solid var(--panel-2);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Счёт */
.scorebar {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.player {
  background: var(--panel);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
#p1 { text-align: right; }
.player.active { border-color: var(--accent); box-shadow: 0 0 18px var(--glow); }
.player .name { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .score { font-size: 28px; font-weight: 800; }
.player .bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.player .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
#p1 .bar i { margin-left: auto; }

.center { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 170px; }
.turn {
  font-weight: 900;
  font-size: clamp(15px, 3.6vw, 22px);
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 2px solid var(--panel-2);
  overflow-wrap: anywhere;
  transition: background .2s, color .2s, border-color .2s;
}
.target { font-size: 12px; color: var(--muted); white-space: nowrap; }
.turn.mine {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}

/* Анонс начала хода: 0.55 с */
.turn-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 14px 32px;
  border-radius: 18px;
  white-space: nowrap;
  font-size: clamp(26px, 7vw, 44px);
  font-weight: 900;
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 0 40px var(--glow), 0 10px 30px rgba(0, 0, 0, .5);
  animation: turn-flash .55s ease-out forwards;
}
.turn-flash.other { color: #fff; background: var(--panel-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
@keyframes turn-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(.96); }
  40% { transform: translate(-50%, -50%) scale(1.02); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
}
.player.turn-start { animation: card-pulse .55s ease-out; }
@keyframes card-pulse {
  30% { transform: scale(1.06); box-shadow: 0 0 30px var(--glow); }
}

.sound-btn { width: 52px; flex: none; padding: 12px 0; font-size: 20px; }

/* Поле */
.board-wrap { position: relative; }

#board {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: repeating-conic-gradient(var(--cell-a) 0 25%, var(--cell-b) 0 50%) 0 0 / 20% 20%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 30px var(--glow), inset 0 0 0 2px var(--panel-2);
  cursor: pointer;
}
#board.locked { cursor: default; }

#fx, #particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; }
#particles { width: 100%; height: 100%; }

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 10%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: transform;
  transition-duration: .25s;
  transition-timing-function: ease-in;
  border-radius: 8px;
}

.tile svg, .tile-static svg {
  stroke-width: 5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}
.tile svg {
  width: 78%;
  height: 78%;
  transition: transform .28s, opacity .28s;
}

.c0 svg { fill: var(--yellow); stroke: #b8890a; }
.c1 svg { fill: var(--green); stroke: #1f8a3a; }
.c2 svg { fill: var(--red); stroke: #a8222f; }
.c3 svg { fill: var(--blue); stroke: #2251ad; }

.tile.selected { background: rgba(255, 255, 255, .14); }
.tile.selected svg { transform: scale(1.15); }
.tile.pop svg { transform: scale(0) rotate(120deg); opacity: 0; }

.popup {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: clamp(14px, 3.4vw, 22px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
  animation: float 1.15s ease-out forwards;
}
.popup.theme { color: var(--accent); font-size: clamp(16px, 4vw, 26px); }

.board-wrap.shake { animation: shake .5s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * .5)); }
  30% { transform: translate(var(--shake), calc(var(--shake) * -.5)); }
  45% { transform: translate(calc(var(--shake) * -.6), calc(var(--shake) * .3)); }
  60% { transform: translate(calc(var(--shake) * .4), 0); }
  80% { transform: translate(calc(var(--shake) * -.2), 0); }
}
@keyframes float {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
  to { opacity: 0; transform: translate(-50%, -170%) scale(1.25); }
}

.banner {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 900;
  font-size: clamp(16px, 4vw, 24px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  animation: banner 1.4s ease-out forwards;
}
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1); }
}

.controls { width: 100%; display: flex; justify-content: center; gap: 10px; }
.controls button { max-width: 220px; }

/* Бомбы */
.player .bombs { display: flex; gap: 3px; margin-top: 6px; min-height: 20px; }
#p1 .bombs { justify-content: flex-end; }
.player .bombs span { width: 20px; height: 20px; opacity: .18; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.player .bombs span.on { opacity: 1; filter: none; }
.player .bombs svg { width: 100%; height: 100%; }
.player.got-bomb .bombs { animation: got-bomb 1s ease-out; }
@keyframes got-bomb {
  0% { transform: scale(1); }
  25% { transform: scale(1.5); filter: drop-shadow(0 0 8px #ffd34d); }
  100% { transform: scale(1); }
}

.bomb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #ff8a3d, #e2452c);
  color: #fff;
}
.bomb-btn .icon { width: 26px; height: 26px; display: inline-flex; }
.bomb-btn .icon svg { width: 100%; height: 100%; }
.bomb-btn:disabled { opacity: .35; cursor: default; filter: grayscale(.7); }
.bomb-btn:disabled:active { transform: none; }
.bomb-btn.active { box-shadow: 0 0 0 3px #fff, 0 0 22px #ff8a3d; animation: bomb-armed .8s ease-in-out infinite alternate; }
.bomb-btn.active .fuse-spark, .bomb-drop .fuse-spark { animation: fuse .12s steps(2) infinite; transform-origin: 90px 12px; }
@keyframes bomb-armed { to { filter: brightness(1.25); } }
@keyframes fuse { 50% { transform: scale(1.5); opacity: .7; } }

#board.bomb-mode { cursor: crosshair; }
.aim-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; }
.aim { position: absolute; width: 30%; height: 30%; animation: aim-pulse .6s ease-in-out infinite alternate; }
.aim::before, .aim::after {
  content: "";
  position: absolute;
  background: rgba(255, 90, 60, .3);
  border: 2px solid rgba(255, 160, 90, .95);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(255, 90, 60, .7);
}
.aim::before { left: 0; right: 0; top: 33.33%; height: 33.34%; }
.aim::after { top: 0; bottom: 0; left: 33.33%; width: 33.34%; }
@keyframes aim-pulse { to { opacity: .6; } }

.bomb-drop {
  position: absolute;
  width: 10%;
  height: 10%;
  transform: translate(-50%, -50%);
  animation: bomb-drop .85s ease-in forwards;
  z-index: 2;
}
.bomb-drop svg { width: 100%; height: 100%; overflow: visible; }
@keyframes bomb-drop {
  0% { transform: translate(-50%, -300%) scale(.6) rotate(-30deg); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(8deg); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(.92) rotate(0); filter: none; }
  60% { transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 6px #ff4d2e); }
  70% { transform: translate(-50%, -50%) scale(1.02); }
  85% { transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 0 12px #ff4d2e) brightness(1.4); }
  100% { transform: translate(-50%, -50%) scale(1.6); filter: drop-shadow(0 0 20px #ffd34d) brightness(2.2); }
}

.blast-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 244, 200, .95), rgba(255, 140, 60, .45) 18%, transparent 45%);
  animation: blast-flash .6s ease-out forwards;
}
@keyframes blast-flash { from { opacity: 1; } to { opacity: 0; } }

.banner.bomb-banner { top: 72%; background: linear-gradient(180deg, #ff8a3d, #e2452c); color: #fff; }

.log {
  width: 100%;
  max-height: 160px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 12px 8px 30px;
  background: var(--panel);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}
.log:empty { display: none; }
.log li.p0 { color: #c9c2ff; }
.log li.p1 { color: #ffd98a; }

/* Итог */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 9, 20, .7);
  backdrop-filter: blur(3px);
}
.dialog {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.dialog h2 { margin: 4px 0 0; font-size: 28px; }
.dialog p { margin: 0 0 6px; color: var(--muted); }

/* Кубок победителя */
.trophy {
  position: relative;
  width: 190px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trophy .cup { position: relative; width: 170px; height: 187px; overflow: visible; }
.trophy .rays {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 221, 110, .38) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  opacity: 0;
}
.trophy .engraving {
  text-anchor: middle;
  font-size: 20px;
  font-weight: 900;
  fill: #6b4700;
  stroke: #ffe9a0;
  stroke-width: .6px;
}
.trophy .plate {
  text-anchor: middle;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  fill: #5a3a00;
}
.trophy.play .cup { animation: trophy-in 1.1s cubic-bezier(.2, 1.5, .4, 1) both, trophy-bob 2.6s 1.1s ease-in-out infinite; }
.trophy.play .rays { animation: rays-in .8s .5s ease-out forwards, rays-spin 10s linear infinite; }
.trophy.play .shine { animation: shine 2.6s 1.2s ease-in-out infinite; }
@keyframes trophy-in {
  0% { opacity: 0; transform: translateY(-160px) scale(.3) rotate(-25deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes trophy-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes rays-in { to { opacity: 1; } }
@keyframes rays-spin { to { rotate: 360deg; } }
@keyframes shine {
  0% { transform: translateX(0); }
  55%, 100% { transform: translateX(280px); }
}

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation-name: confetti;
  animation-timing-function: linear;
  animation-iteration-count: 2;
  animation-fill-mode: both;
}
@keyframes confetti {
  from { transform: translate(0, 0) rotate(0); }
  to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); }
}

/* Невероятное мастерство */
.mastery {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(30, 20, 60, .45), rgba(5, 5, 15, .85) 70%);
  z-index: 10;
}
.mastery.play { animation: fade-in .4s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.mastery-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1100px;
  height: 1100px;
  margin: -550px 0 0 -550px;
  background: repeating-conic-gradient(rgba(255, 215, 90, .22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%);
  mask: radial-gradient(circle, #000 15%, transparent 60%);
  animation: rays-spin 14s linear infinite;
}
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: rays-spin 5s linear infinite; }
.orbit .s {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px;
  transform: rotate(var(--a)) translateX(min(40vw, 270px));
}
.orbit .s svg { width: 100%; height: 100%; stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .6)); }
.mastery.play .orbit .s { animation: orbit-in .8s ease-out both; }
@keyframes orbit-in { from { opacity: 0; } }

.mastery-text { position: relative; text-align: center; }
.mastery-combo {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: #ff4d2e;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 0 24px rgba(255, 77, 46, .7);
}
.mastery.play .mastery-combo { animation: combo-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes combo-in { from { transform: scale(3); opacity: 0; } }
#mastery-title {
  margin: 18px 0 10px;
  font-size: clamp(30px, 8vw, 72px);
  font-weight: 900;
  line-height: 1.05;
}
#mastery-title .word { display: inline-block; white-space: nowrap; }
#mastery-title .ch {
  display: inline-block;
  background: linear-gradient(100deg, #b07d08, #fff3a8 30%, #f7c531 50%, #fff3a8 70%, #b07d08) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #6b4700) drop-shadow(0 0 18px rgba(255, 200, 80, .6));
}
.mastery.play #mastery-title .ch { animation: ch-pop .6s var(--d) cubic-bezier(.2, 1.6, .4, 1) both, ch-shine 2.2s linear infinite; }
@keyframes ch-pop {
  from { opacity: 0; transform: translateY(-60px) scale(2.2) rotate(-25deg); }
}
@keyframes ch-shine { to { background-position: -250% 0; } }
#mastery-name { margin: 0; font-size: clamp(15px, 3.5vw, 20px); font-weight: 700; color: #fff3c4; }
.mastery.play #mastery-name { animation: fade-in .6s 1.8s both; }

/* Жребий */
.draw { max-width: 360px; }
.draw-names {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.draw-names span:not(.vs) {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 2px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .08s, background .08s;
}
.draw-names span.on { border-color: #fff; background: #3a3f78; }
.draw-names span.won { border-color: var(--accent); box-shadow: 0 0 16px var(--glow); }
.draw-names .vs { color: var(--muted); font-size: 13px; }
.draw-shape { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.draw-shape svg {
  width: 90%;
  height: 90%;
  stroke-width: 5;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
.draw-shape.tick svg { animation: bump .15s ease-out; }
.draw-shape.final svg { animation: reveal .9s ease-out forwards; }
@keyframes bump { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes reveal {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.35) rotate(-12deg); filter: drop-shadow(0 0 22px var(--accent)); }
  100% { transform: scale(1.1) rotate(0); filter: drop-shadow(0 0 16px var(--accent)); }
}
#draw-result { font-weight: 800; color: var(--text); min-height: 1.4em; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }