/* Golden FuDog — корпус автомата. Нарисован в 400×800 и масштабируется под экран (см. fit() в game.js). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #05060f radial-gradient(120% 80% at 50% 0%, #1e2250 0%, #0b0d24 45%, #05060f 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #e8e9f3;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button { font-family: inherit; }
.coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: url(../assets/coin-icon.png) center / contain no-repeat; }

/* комната */
.room { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.room::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px;
  transform: translate(-50%, -52%);
  background: radial-gradient(circle, rgba(255,190,70,0.18) 0%, rgba(255,190,70,0) 60%);
  pointer-events: none;
}

/* корпус */
.cabinet { position: relative; width: 400px; height: 800px; flex: none; transform-origin: center center; display: flex; flex-direction: column; }
.topper { display: flex; align-items: flex-end; justify-content: center; margin-bottom: -14px; position: relative; z-index: 1; pointer-events: none; }
.topper img { width: 340px; display: block; }  /* горка монет: низ 14px уходит под кромку крыши, без тени */
.topper.win-flash img { animation: glowPulse 0.9s ease; }
@keyframes glowPulse {
  0%   { filter: none; }
  30%  { filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 26px rgba(72,255,120,0.95)); }
  70%  { filter: brightness(1.2) drop-shadow(0 0 16px rgba(72,255,120,0.7)); }
  100% { filter: none; }
}
.body {
  flex: 1; position: relative; z-index: 2;
  border-radius: 26px; padding: 20px 20px 10px;
  display: flex; flex-direction: column; gap: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 5%),
    linear-gradient(175deg, #f4d77f 0%, #d9a83a 16%, #b07d1e 42%, #7f5512 72%, #4b3208 100%);
  border: 3px solid #5a3f0a;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.75),
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -10px 22px rgba(60,40,5,0.65),
    inset 0 0 0 6px rgba(255,225,150,0.22);
}
.marquee, .screen, .ledge, .panel {
  background: linear-gradient(180deg, #14100a, #221a0e);
  border: 1px solid rgba(255,220,140,0.55);
  border-radius: 12px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.28);
}

/* табло и HUD */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; }
.pill {
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,220,140,0.55);
  border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 14px;
  color: #ffe9a3; display: flex; align-items: center; gap: 5px;
}
.win-info { color: #7dffb0; }
.sound-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,220,140,0.55);
  color: #ffe9a3; cursor: pointer; font-size: 15px; line-height: 1;
}
.marquee { height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.msg {
  text-align: center; font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #ffd966; text-shadow: 0 0 8px rgba(255,200,80,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.msg.win { color: #ffe066; text-shadow: 0 0 14px rgba(255,220,80,1), 0 0 4px rgba(255,255,255,0.6); }
.msg.lose { color: #a89a6a; text-shadow: none; }

/* экран с барабанами */
.screen { padding: 7px 19px; }
canvas { width: 316px; height: 296px; display: block; border-radius: 8px; }

/* ставка и линии */
.ledge { display: flex; gap: 8px; padding: 5px; }
.group { flex: 1; display: flex; gap: 4px; }
.btn {
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,220,140,0.5);
  border-radius: 10px; height: 40px; padding: 0 6px;
  color: #d9c98a; font-weight: 800; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.5);
}
.group .btn { width: 40px; font-size: 20px; }
.group .btn.display { flex: 1; width: auto; padding: 0 2px; font-size: 11px; color: #ffe9a3; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn[hidden] { display: none; }

/* панель: две колонки кнопок и стеклянный СТАРТ */
.panel { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px; }
.col { width: 120px; display: flex; flex-direction: column; gap: 6px; }
.col .btn { height: 40px; }
.col .btn.max, .col .btn.double { height: 43px; }
.btn.help { background: rgba(80,0,120,0.55); border-color: rgba(200,140,255,0.5); color: #d9b8ff; }
/* стеклянные кнопки в стиле СТАРТ: 9-slice из перекрашенной btn-spin */
.btn.max, .btn.double {
  height: 43px; background: none; box-shadow: none; border-radius: 0;
  border: 12px solid transparent; border-image: url(../assets/btn-red.png) 72 fill / 12px stretch;
  color: #fff; font-size: 12px; letter-spacing: 0.3px;
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 10px rgba(255,90,90,0.8);
}
.btn.double { border-image-source: url(../assets/btn-blue.png); text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 10px rgba(90,150,255,0.8); }
.btn.ad { background: rgba(120,40,0,0.55); border-color: rgba(255,160,80,0.5); color: #ffc48a; font-size: 11px; white-space: nowrap; }
.spin {
  width: 92px; height: 92px; border: none; border-radius: 20px; cursor: pointer;
  background: url(../assets/btn-spin.png) center / 100% 100% no-repeat transparent;
  color: #eafff4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 14px rgba(80,255,160,0.8);
  animation: spinGlow 2.4s ease-in-out infinite;
}
.spin-label { font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.spin-cost { font-size: 11px; font-weight: 700; }
.spin:active { transform: scale(0.96); }
.spin:disabled { animation: none; filter: grayscale(0.7) brightness(0.6); cursor: default; }
@keyframes spinGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(40,255,160,0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(40,255,160,0.95)); }
}
.plinth { text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,230,170,0.6); letter-spacing: 0.3px; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }

/* оверлеи: справка и риск-игра */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(10,8,4,0.97);
  border-radius: 24px;
  display: none; flex-direction: column;
  padding: 16px;
  color: #e8e9f3;
}
.overlay.open { display: flex; }
.overlay h2 {
  font-size: 16px; letter-spacing: 2px; text-align: center;
  background: linear-gradient(90deg, #ffe9a3, #e8b93c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,80,80,0.8); border: none; color: #fff;
  font-weight: 900; font-size: 16px; cursor: pointer;
}
.record { text-align: center; font-size: 12px; color: #ffe9a3; margin-bottom: 8px; }
.paytable {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12px;
}
.pay-row {
  background: rgba(255,255,255,0.05); border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.pay-row img { width: 40px; height: 40px; object-fit: contain; }
.pay-row .name { font-weight: 700; color: #ffe9a3; }
.pay-row .pays { color: #9aa; font-size: 11px; line-height: 1.4; }
.rules {
  margin-top: 8px; font-size: 11px; color: #b0a777; line-height: 1.5;
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px;
}
.disclaimer { margin-top: 8px; text-align: center; font-size: 10px; color: #8d8468; }
.gamble { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.gamble.open { display: flex; }
.gamble .cards { display: flex; gap: 20px; }
.card-btn {
  width: 110px; height: 150px; border-radius: 12px;
  border: 3px solid #c9a227; cursor: pointer;
  font-size: 14px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.card-btn.red { background: linear-gradient(160deg, #c42b2b, #7a0e0e); color: #fff; }
.card-btn.black { background: linear-gradient(160deg, #2a2a2a, #0a0a0a); color: #fff; }
.card-btn:active { transform: scale(0.95); }
.gamble .amount { font-size: 18px; font-weight: 800; color: #ffd60a; }
.gamble .hint { font-size: 12px; color: #b0a777; text-align: center; }
.gamble .take {
  background: linear-gradient(160deg, #16c878, #00703c);
  border: none; border-radius: 999px; padding: 12px 24px;
  color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
}