.machine { max-width: 560px; margin: 26px auto; border-radius: 22px; padding: 18px 18px 22px;
  background: linear-gradient(180deg, #20283a 0%, #141a26 60%, #0e1320 100%);
  border: 1px solid #33405a; box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.machine.cherry { background: linear-gradient(180deg, #3a1d28 0%, #241420 55%, #160c14 100%); border-color: #5a2f3e; }

.marquee { text-align: center; margin: 4px 0 16px; }
.marquee h2 { margin: 0; font-size: 1.9rem; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg,#ffe9a8,#ffc857 55%,#c98a16); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(255,200,87,.35); }
.machine.cherry .marquee h2 { background: linear-gradient(180deg,#ffd1d8,#ff5d73 55%,#b3243a); -webkit-background-clip:text; background-clip:text; text-shadow:0 0 18px rgba(255,93,115,.4); }
.marquee p { margin: 2px 0 0; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }

.meters { display: flex; gap: 10px; margin-bottom: 14px; }
.meter { flex: 1; text-align: center; border-radius: 12px; padding: 9px 6px;
  background: #0b0f17; border: 1px solid #2b3650; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.meter .k { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.meter .v { display: block; font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #ffd86b; text-shadow: 0 0 10px rgba(255,200,87,.5); }
.machine.cherry .meter .v { color: #ff8090; text-shadow: 0 0 10px rgba(255,93,115,.5); }

.window { position: relative; border-radius: 14px; padding: 10px;
  background: radial-gradient(120% 120% at 50% 0%, #1a2233, #070a11);
  border: 3px solid #ffc857; box-shadow: 0 0 0 2px #0a0d14, inset 0 0 26px rgba(0,0,0,.8); overflow: hidden; }
.machine.cherry .window { border-color: #ff5d73; }
.reelrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reel { position: relative; height: 318px; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #0d111b, #141a28); box-shadow: inset 0 8px 16px rgba(0,0,0,.7); }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 60px; z-index: 3; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(180deg, rgba(7,10,17,.95), transparent); }
.reel::after { bottom: 0; background: linear-gradient(0deg, rgba(7,10,17,.95), transparent); }
.strip { display: flex; flex-direction: column; will-change: transform; }
.sym { height: 106px; display: flex; align-items: center; justify-content: center; }
.sym span { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; line-height: 1; border-radius: 14px;
  background: linear-gradient(180deg, #222c40, #161d2c); border: 1px solid #313d57;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.4); }
.reel.blur .strip { filter: blur(2px); }

.payline-row { position: absolute; left: 6px; right: 6px; height: 106px; top: 50%; transform: translateY(-50%);
  border: 2px solid rgba(255,200,87,.0); border-radius: 12px; z-index: 4; pointer-events: none; transition: border-color .2s; }
.machine .window.show-line .payline-row { border-color: rgba(255,200,87,.55); }
.machine.cherry .window.show-line .payline-row { border-color: rgba(255,93,115,.6); }

.sym.win span { animation: pop 0.6s ease infinite alternate; border-color: #ffc857;
  box-shadow: 0 0 18px rgba(255,200,87,.8), inset 0 0 8px rgba(255,200,87,.4); }
.machine.cherry .sym.win span { border-color:#ff5d73; box-shadow:0 0 18px rgba(255,93,115,.85), inset 0 0 8px rgba(255,93,115,.4); }
@keyframes pop { from { transform: scale(1); } to { transform: scale(1.12); } }

.msg { text-align: center; font-weight: 800; min-height: 1.5em; margin: 16px 0 14px; font-size: 1.05rem; color: var(--text); letter-spacing: .02em; }
.msg.win { color: #ffd86b; text-shadow: 0 0 14px rgba(255,200,87,.5); }
.msg.big { font-size: 1.3rem; animation: shake .5s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.deck { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.betbox { display: flex; align-items: center; gap: 8px; justify-content: center; }
.rbtn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #3a455c; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #2b364e, #131a28); color: #fff; font-size: 1.2rem; font-weight: 800;
  border: 1px solid #3a455c; }
.rbtn { border: 1px solid #445; }
.spinbtn { width: 108px; height: 108px; border-radius: 50%; cursor: pointer; font-weight: 900; font-size: 1.15rem; letter-spacing: .06em;
  color: #2a1a00; border: none; position: relative;
  background: radial-gradient(circle at 38% 30%, #ffe9a8, #ffc857 55%, #cf9112);
  box-shadow: 0 8px 0 #9c6c0e, 0 12px 22px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.5);
  transition: transform .07s, box-shadow .07s; }
.machine.cherry .spinbtn { background: radial-gradient(circle at 38% 30%, #ffd1d8, #ff5d73 55%, #b3243a); color:#3a0008; box-shadow:0 8px 0 #7e1626,0 12px 22px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.5); }
.spinbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 #9c6c0e, 0 4px 10px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.5); }
.spinbtn[disabled] { filter: grayscale(.5) brightness(.8); cursor: not-allowed; }
.spinbtn.spinning { animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.tinybtn { background: transparent; border: 1px solid #3a455c; color: var(--text-dim); border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: .82rem; }
.tinybtn { border: 1px solid #3a455c; }
.toolbar { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.coin { position: absolute; top: -20px; font-size: 1.4rem; z-index: 9; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }

.paytable { width: 100%; max-width: 560px; margin: 22px auto 0; border-collapse: collapse; font-size: .92rem; }
.paytable caption { color: var(--text-dim); font-size: .82rem; text-align: left; padding-bottom: 8px; }
.paytable td { border-bottom: 1px solid var(--border); padding: 8px 4px; }
.paytable td:first-child { font-size: 1.15rem; }
.paytable td:last-child { text-align: right; color: var(--accent); font-weight: 800; }
@media (max-width: 520px) {
  .sym span { width: 70px; height: 70px; font-size: 2.4rem; }
  .spinbtn { width: 92px; height: 92px; }
  .meter .v { font-size: 1.25rem; }
}

/* ---- Theme: Egypt (Pharaoh's Gold) ---- */
.machine.egypt { background: linear-gradient(180deg, #3a3018 0%, #241d0c 55%, #16110a 100%); border-color: #5a4a26; }
.machine.egypt .marquee h2 { background: linear-gradient(180deg,#ffe9a8,#e0a93b 55%,#9c6c0e); -webkit-background-clip:text; background-clip:text; text-shadow:0 0 18px rgba(224,169,59,.4); }
.machine.egypt .window { border-color: #e0a93b; }
.machine.egypt .meter .v { color: #e8c463; text-shadow: 0 0 10px rgba(224,169,59,.5); }

/* ---- Theme: Gems (Gem Strike) ---- */
.machine.gems { background: linear-gradient(180deg, #1c2342 0%, #141a30 55%, #0c0f1e 100%); border-color: #33407a; }
.machine.gems .marquee h2 { background: linear-gradient(180deg,#d8e4ff,#5d8bff 55%,#2a3fb3); -webkit-background-clip:text; background-clip:text; text-shadow:0 0 18px rgba(93,139,255,.45); }
.machine.gems .window { border-color: #5d8bff; }
.machine.gems .meter .v { color: #8fb0ff; text-shadow: 0 0 10px rgba(93,139,255,.5); }
.machine.gems .window.show-line .payline-row { border-color: rgba(93,139,255,.6); }
.machine.gems .sym.win span { border-color:#5d8bff; box-shadow:0 0 18px rgba(93,139,255,.85), inset 0 0 8px rgba(93,139,255,.4); }
.machine.gems .spinbtn { background: radial-gradient(circle at 38% 30%, #d8e4ff, #5d8bff 55%, #2a3fb3); color:#0a1233; box-shadow:0 8px 0 #1f2f86, 0 12px 22px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.5); }