:root {
  font-family: "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: #244239;
  background: #edf7ef;
}
* { box-sizing: border-box; }
html { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(255, 210, 117, .44), transparent 25%),
    radial-gradient(circle at 85% 80%, rgba(112, 190, 174, .3), transparent 26%),
    linear-gradient(145deg, #fff9e9, #e7f5ed 55%, #dff1f4);
}
.game { width: min(760px, calc(100% - 20px)); max-height: 100%; padding: 14px 16px 10px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.title span { display: block; color: #b54943; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.title h1 { margin: 2px 0 0; color: #204b3e; font-size: clamp(1.45rem, 4vw, 2.2rem); letter-spacing: -.05em; }
.score { min-width: 108px; padding: 7px 12px; border: 2px solid #c6dacf; border-radius: 13px; background: rgba(255,255,255,.76); box-shadow: 0 5px 0 #d2e4d8; text-align: right; }
.score small { display: block; color: #667f75; font-size: .68rem; }
.score strong { color: #b54943; font-size: 1.2rem; }
.machine-shell { position: relative; width: min(560px, calc(100% - 28px)); margin-inline: auto; filter: drop-shadow(0 20px 22px rgba(53, 48, 33, .2)); }
.marquee {
  position: relative;
  z-index: 2;
  min-height: 56px;
  margin: 0 22px -6px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  border: 4px solid #7b4827;
  border-radius: 32px 32px 12px 12px;
  color: #fff8df;
  background: linear-gradient(155deg, #8f3b31, #5c241f 70%);
  box-shadow: inset 0 0 0 4px #d89c45, inset 0 8px 14px rgba(255,255,255,.16);
}
.marquee strong { flex: 1; text-align: center; font-size: clamp(1rem, 3vw, 1.55rem); letter-spacing: .03em; text-shadow: 0 2px 0 #381612; white-space: nowrap; }
.marquee i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #fff6be; box-shadow: 0 0 7px 2px #ffd758; animation: lamp 1.3s ease-in-out infinite alternate; }
.marquee i:nth-of-type(even) { animation-delay: .65s; }
.cabinet {
  position: relative;
  padding: clamp(12px, 2.4vw, 20px);
  border: 5px solid #6d3d22;
  border-radius: 24px 24px 35px 35px;
  background:
    linear-gradient(100deg, transparent 0 46%, rgba(255,255,255,.1) 49%, transparent 52%),
    linear-gradient(145deg, #b26732, #6f351f 56%, #a5582d);
  box-shadow: inset 0 0 0 5px #e0a14a, inset 0 -14px 24px rgba(50,19,8,.32);
}
.cabinet::after { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(255,235,181,.4); border-radius: 14px 14px 25px 25px; }
.screen {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(10px, 2vw, 18px);
  border: 8px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#f8ebbd, #8a562a) padding-box,
    linear-gradient(135deg, #fff5bf, #9a602d 40%, #f2cb70 60%, #75401f) border-box;
  box-shadow: 0 8px 16px rgba(45,20,8,.4), inset 0 0 22px rgba(72,42,15,.25);
}
.screen::after { content: ""; position: absolute; inset: 8px; z-index: 3; pointer-events: none; border-radius: 8px; background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 34%); }
.reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(5px, 1.4vw, 10px); padding: 7px; border-radius: 10px; background: #34241b; }
.reel { min-width: 0; display: grid; gap: 4px; padding: 4px; border-radius: 6px; background: linear-gradient(90deg, #d7c7aa, #fffdf2 20% 80%, #c9b798); box-shadow: inset 0 10px 18px rgba(75,52,28,.22), inset 0 -10px 18px rgba(75,52,28,.22); }
.symbol {
  aspect-ratio: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(4px, 1.2vw, 8px);
  border: 1px solid rgba(105,78,38,.14);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8, #f3e6cb);
  box-shadow: inset 0 0 12px rgba(91,61,26,.08);
  transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}
.symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.symbol.blur { transform: translateY(8px) scale(.96); opacity: .45; filter: blur(2px); }
.symbol.win { position: relative; z-index: 4; outline: 4px solid #e1a62e; box-shadow: 0 0 20px #ffd86a; animation: pulse .55s ease 2; }
.payline { position: absolute; z-index: 2; pointer-events: none; top: 50%; left: -3px; right: -3px; height: 2px; background: rgba(208, 53, 50, .72); box-shadow: 0 0 5px rgba(208,53,50,.45); }
.control-panel { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border: 3px solid #562c1b; border-radius: 14px 14px 20px 20px; background: linear-gradient(150deg, #d08b3f, #8a4828); box-shadow: inset 0 3px 5px rgba(255,255,255,.24); }
.speaker { width: 56px; display: grid; gap: 4px; }
.speaker i { display: block; height: 3px; border-radius: 4px; background: #4d2b20; box-shadow: 0 1px 0 rgba(255,255,255,.18); }
.controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.message { min-height: 1.6em; margin: 0; color: #fff8e7; font-weight: 800; font-size: .84rem; text-shadow: 0 1px 0 #532719; }
.spin { width: 70px; height: 70px; padding: 0; border: 6px solid #e4bd6e; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #ff766c, #c92d2a 64%, #861d1c); color: white; font-size: .9rem; font-weight: 1000; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 0 #6a381d, 0 8px 12px rgba(48,20,9,.34), inset 0 4px 4px rgba(255,255,255,.35); }
.spin:hover { filter: brightness(1.07); }
.spin:active { transform: translateY(5px); box-shadow: 0 2px 0 #6a381d, inset 0 4px 4px rgba(255,255,255,.35); }
.spin:disabled { opacity: .65; cursor: wait; }
.lever { position: absolute; z-index: 0; right: -34px; top: 130px; width: 28px; height: 140px; border: 4px solid #735025; border-radius: 16px; background: linear-gradient(90deg, #9c6a2d, #ffe09a 45%, #8e5b26); transform: rotate(8deg); transform-origin: bottom; }
.lever::after { content: ""; position: absolute; left: 10px; bottom: -12px; width: 44px; height: 34px; border: 4px solid #68401d; border-radius: 10px; background: linear-gradient(140deg, #d1943e, #70401e); transform: translateX(-50%) rotate(-8deg); }
.lever span { position: absolute; left: 50%; top: -24px; width: 46px; height: 46px; border: 4px solid #7e1e1d; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #ff8178, #c62d2b 65%, #761a1a); box-shadow: 0 6px 10px rgba(45,20,8,.3); transform: translateX(-50%); }
.rules { margin: 10px 0 0; color: #687e76; font-size: .72rem; text-align: center; }
@keyframes pulse { 50% { transform: scale(.92); } }
@keyframes lamp { to { opacity: .56; box-shadow: 0 0 3px 1px #ffd758; } }
@media (max-width: 620px) {
  .game { width: min(100% - 18px, 860px); padding: 14px 8px; }
  .top { margin-bottom: 12px; }
  .machine-shell { width: 100%; }
  .marquee { min-height: 58px; margin-inline: 16px; padding-inline: 10px; border-width: 3px; }
  .marquee i:nth-of-type(n+5) { display: none; }
  .cabinet { padding: 14px; border-width: 4px; box-shadow: inset 0 0 0 3px #e0a14a, inset 0 -12px 20px rgba(50,19,8,.3); }
  .screen { padding: 7px; border-width: 5px; }
  .reels { gap: 4px; padding: 4px; }
  .reel { gap: 3px; padding: 3px; }
  .symbol { aspect-ratio: 1; padding: 3px; }
  .lever { display: none; }
  .control-panel { grid-template-columns: 1fr; padding: 12px; }
  .speaker { display: none; }
  .controls { grid-template-columns: 1fr auto; }
  .spin { width: 72px; height: 72px; border-width: 6px; }
}
@media (max-width: 390px) {
  .score { min-width: 102px; padding: 7px 10px; }
  .title h1 { font-size: 1.65rem; }
  .message { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}