/* ============================================================
   Аркады (четыре в ряд, шашки, нарды, хоккей, pong, бильярд)
   ============================================================ */

/* ---------- Витрина ---------- */
.arcade-cover{position:relative;height:440px;display:grid;place-items:center;overflow:hidden;border-radius:var(--r-lg);background:linear-gradient(160deg,#e7e0ff,#f5f2ff);perspective:900px}
.cover-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:#fff;filter:blur(12px);opacity:.8}
.cover-glyph{z-index:2;min-width:260px;min-height:200px;display:grid;place-items:center;color:var(--ink);font-size:clamp(64px,8vw,110px);font-weight:800;line-height:1;letter-spacing:-.12em;text-shadow:0 4px 0 #fff,0 20px 30px rgba(28,32,48,.2);transform:rotateX(16deg) rotateZ(-4deg);animation:coverFloat 4s ease-in-out infinite}
.cover-live{position:absolute;left:22px;top:22px;padding:6px 12px;border-radius:var(--r-pill);background:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;box-shadow:var(--shadow-sm)}
.cover-live i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--green)}
.cover-score{position:absolute;right:22px;bottom:22px;z-index:3;padding:12px 18px;display:flex;flex-direction:column;align-items:center;border-radius:var(--r);background:var(--ink);color:#fff}
.cover-score small{color:rgba(255,255,255,.6);font-size:11px;font-weight:700;letter-spacing:.1em}
.cover-score strong{font-size:24px;font-weight:800}
.cover-shadow{position:absolute;bottom:80px;width:300px;height:36px;border-radius:50%;background:rgba(28,32,48,.16);filter:blur(16px);animation:shadowPulse 4s ease-in-out infinite}
.arcade-cover-checkers{background:linear-gradient(160deg,#ffd9cf,#fff1ec)}
.arcade-cover-air-hockey{background:linear-gradient(160deg,#c7ebff,#eef9ff)}
.arcade-cover-pong{background:linear-gradient(160deg,#dbf7a0,#f4ffd9)}
.arcade-cover-billiards{background:linear-gradient(160deg,#c3ecdc,#e9fff6)}
.arcade-cover-backgammon{background:linear-gradient(160deg,#f5d9b6,#fff3e2)}
@keyframes coverFloat{50%{transform:translateY(-16px) rotateX(10deg) rotateZ(3deg)}}
@keyframes shadowPulse{50%{transform:scale(.82);opacity:.55}}

/* ---------- Комната ---------- */
.arcade-stage{position:relative;min-height:640px;padding:90px 170px 40px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#f7f4ff 0,#e6effc 75%)}
.arcade-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(110,79,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(110,79,245,.06) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.arcade-scene{position:relative;z-index:2;width:100%;height:500px;display:flex;align-items:center;justify-content:center;perspective:1050px}
.arcade-status{position:absolute;z-index:20;top:-64px;left:50%;transform:translateX(-50%);min-width:280px;padding:10px 16px;border-radius:var(--r-pill);background:#fff;color:var(--text);text-align:center;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-md)}
.arcade-player{position:absolute;z-index:5;top:50%;width:156px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-md);transform:translateY(-50%);transition:box-shadow .3s}
.arcade-player.player-one{left:16px}
.arcade-player.player-two{right:16px;text-align:right}
.arcade-player>span{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:700}
.player-two>span{background:var(--coral-soft);color:var(--coral-ink)}
.arcade-player>div{display:flex;min-width:0;flex:1;flex-direction:column}
.arcade-player small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.arcade-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.arcade-player>b{font-size:28px;font-weight:800}
.arcade-result{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);min-width:320px;padding:28px}
.arcade-result strong{font-size:36px}
.arcade-help{justify-content:center}
.board-host{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.physics-canvas{width:100%;height:auto;max-height:100%;aspect-ratio:1100/650;border-radius:28px;touch-action:none;filter:drop-shadow(0 20px 30px rgba(28,32,48,.22))}

/* ---------- Четыре в ряд ---------- */
.connect-board{width:min(600px,100%);aspect-ratio:7/6;padding:20px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;border-radius:28px;background:linear-gradient(145deg,#8b6ff2,#5b3ee3);box-shadow:inset 0 0 0 5px rgba(255,255,255,.16),0 26px 0 #3f2f9a,0 40px 40px rgba(28,32,48,.28);transform:rotateX(8deg)}
.connect-cell{position:relative;border:0;border-radius:50%;background:#1c2030;box-shadow:inset 0 10px 15px rgba(0,0,0,.5),0 2px rgba(255,255,255,.15);cursor:pointer}
.connect-cell:after{content:"";position:absolute;inset:7px;border-radius:50%;background:transparent}
.connect-cell.p1:after{background:radial-gradient(circle at 35% 28%,#ffd7ce,#ff6b57 36%,#be3628 78%);box-shadow:inset -8px -10px 18px rgba(96,18,12,.3);animation:discDrop .38s cubic-bezier(.2,.8,.3,1.2)}
.connect-cell.p2:after{background:radial-gradient(circle at 35% 28%,#f5ffca,#b9ef4b 38%,#6f9a14 80%);box-shadow:inset -8px -10px 18px rgba(49,79,5,.3);animation:discDrop .38s cubic-bezier(.2,.8,.3,1.2)}
.connect-cell.win:after{animation:winPulse .75s infinite alternate}
/* Призрак фишки в колонке под курсором. */
.connect-cell.ghost:after{opacity:.45;animation:none}
.connect-board[data-me="p1"] .connect-cell.ghost:after{background:radial-gradient(circle at 35% 28%,#ffd7ce,#ff6b57 36%,#be3628 78%)}
.connect-board[data-me="p2"] .connect-cell.ghost:after{background:radial-gradient(circle at 35% 28%,#f5ffca,#b9ef4b 38%,#6f9a14 80%)}
@keyframes discDrop{from{transform:translateY(-350px) rotateY(180deg)}to{transform:none}}
@keyframes winPulse{to{transform:scale(.83);filter:brightness(1.35)}}

/* ---------- Шашки ---------- */
.checkers-board{width:min(520px,100%);aspect-ratio:1;padding:18px;display:grid;grid-template-columns:repeat(8,1fr);border:12px solid #8c542e;border-radius:22px;background:#efd0a3;box-shadow:inset 0 0 0 5px #c78a55,0 24px 0 #60361f,0 36px 40px rgba(28,32,48,.28);transform:rotateX(9deg) rotateZ(-1deg)}
.checker-cell{position:relative;border:0;background:#efd3aa;padding:0}
.checker-cell.dark{background:#714630}
.checker-piece{position:absolute;inset:11%;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,255,255,.14),inset 0 -12px 12px rgba(0,0,0,.28),0 9px 8px rgba(0,0,0,.35);transition:transform .2s}
.checker-piece.p1{background:radial-gradient(circle at 35% 25%,#ff9983,#db4936 58%,#8b2119)}
.checker-piece.p2{background:radial-gradient(circle at 35% 25%,#f0f5ff,#a9b8ce 58%,#5a6677)}
.checker-piece.king:after{content:"♛";position:absolute;inset:0;display:grid;place-items:center;color:#ffe593;font-size:22px}
.checker-cell.selected .checker-piece{transform:translateY(-10px) scale(1.08);filter:drop-shadow(0 13px 7px rgba(0,0,0,.45))}
.checker-cell.target{box-shadow:inset 0 0 0 4px var(--lime);cursor:pointer;animation:targetPulse 1.2s ease-in-out infinite}
@keyframes targetPulse{50%{box-shadow:inset 0 0 0 7px rgba(185,239,75,.55)}}
.checker-piece.king:after{animation:crownShine 2.4s ease-in-out infinite}
@keyframes crownShine{50%{text-shadow:0 0 10px #ffe593,0 0 18px #ffd34a}}
/* Побитая шашка растворяется на месте. */
.arcade-capture{position:fixed;border-radius:50%;animation:captureFade .55s ease-out forwards;inset:auto}
@keyframes captureFade{to{transform:scale(.2) rotate(30deg);opacity:0}}

/* ---------- Нарды ---------- */
.backgammon-board{width:min(720px,100%);height:440px;padding:20px 30px;position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr 1fr;gap:26px 2px;border:14px solid #9c6038;border-radius:24px;background:#e8bd86;box-shadow:inset 0 0 0 5px #c98a55,0 24px 0 #603a23,0 36px 44px rgba(28,32,48,.28);transform:rotateX(7deg)}
.backgammon-board:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:#7b492c;box-shadow:inset 0 0 0 4px #b47342}
.bg-point{position:relative;border:0;background:transparent;cursor:pointer;padding:0}
.bg-point:before{content:"";position:absolute;left:5%;right:5%;height:92%;clip-path:polygon(50% 100%,0 0,100% 0);background:#7c4b38}
.bg-point:nth-child(even):before{background:#f2dfbd}
.bg-point.bottom:before{bottom:0;transform:rotate(180deg)}
.bg-stack{position:absolute;z-index:3;left:50%;top:7px;transform:translateX(-50%);display:flex;flex-direction:column}
.bg-point.bottom .bg-stack{top:auto;bottom:7px;flex-direction:column-reverse}
.bg-stack b{margin-top:2px;color:#fff;font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.bg-piece{width:30px;height:30px;margin-top:-5px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),0 4px 5px rgba(0,0,0,.28)}
.bg-piece.p1{background:radial-gradient(circle at 32% 25%,#ff9a83,#d84b37)}
.bg-piece.p2{background:radial-gradient(circle at 32% 25%,#eef4ff,#8190a6)}
.bg-point.selected{filter:drop-shadow(0 0 8px var(--lime))}
.dice-tray{position:absolute;z-index:8;left:50%;bottom:-6px;transform:translateX(-50%);align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:#fff;box-shadow:var(--shadow-md)}
.dice-tray:not(.hidden){display:flex}
/* Кости с точками вместо символов шрифта: одинаковы везде и умеют крутиться. */
.dice-tray button{position:relative;width:44px;height:44px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;border:0;border-radius:10px;background:linear-gradient(160deg,#fff,#eef0f4);color:var(--ink);box-shadow:inset 0 -3px 0 #d3d8e2,0 4px 10px rgba(28,32,48,.2);cursor:default;transition:opacity .2s}
.dice-tray button .pip{border-radius:50%;background:transparent}
.dice-tray button .pip.on{background:var(--ink);box-shadow:inset 0 1px 2px rgba(255,255,255,.3)}
.dice-tray button.used{opacity:.3}
.dice-tray button.rolling{animation:diceRoll .6s cubic-bezier(.2,.8,.3,1.2)}
@keyframes diceRoll{0%{transform:rotate(0) translateY(0) scale(.9)}35%{transform:rotate(200deg) translateY(-14px) scale(1.15)}70%{transform:rotate(330deg) translateY(2px)}100%{transform:rotate(360deg)}}
.dice-tray small{color:var(--muted);font-size:12px;white-space:nowrap}

/* ---------- Бильярд ---------- */
.billiards-power{position:absolute;z-index:8;left:50%;bottom:-16px;transform:translateX(-50%);min-width:380px;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:var(--shadow-md)}
.billiards-power:not(.hidden){display:flex}
.billiards-power span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.billiards-power input{flex:1;accent-color:var(--accent)}
.billiards-power small{color:var(--muted);font-size:12px;white-space:nowrap}

@media(max-width:900px){
  .arcade-cover{height:400px}
  .arcade-stage{padding-inline:90px}
  .arcade-player{top:auto;bottom:16px;transform:none}
  .arcade-player.player-one{left:20px}
  .arcade-player.player-two{right:20px}
  .arcade-scene{height:480px}
}
@media(max-width:640px){
  .play-nav{display:none}
  .arcade-cover{height:340px}
  .arcade-stage{min-height:560px;padding:70px 10px 70px}
  .arcade-scene{height:420px}
  /* У холста свои пропорции, и на телефоне он занимает лишь часть сцены.
     Отдаём ему высоту по содержимому, чтобы вокруг не зияла пустота. */
  .arcade-scene:has(.physics-canvas:not(.hidden)){height:auto;min-height:240px;padding-block:10px}
  .arcade-player{width:140px}
  .arcade-status{top:-52px;min-width:260px;white-space:normal}
  .connect-board{padding:10px;gap:5px;border-radius:18px}
  .checkers-board{padding:8px;border-width:8px}
  .checker-piece{inset:8%}
  .backgammon-board{height:340px;padding:12px 15px;border-width:8px}
  .bg-piece{width:22px;height:22px}
  .billiards-power{min-width:280px;bottom:-8px}
  .dice-tray small{display:none}
}