.arcade-page { background: #070810; color: #f8f6f1; min-height: 100vh; }
.arcade-bar { display: flex; align-items: center; gap: 30px; padding: 18px 3%; border-bottom: 1px solid #ffffff20; background: #0d0e1cf5; position: sticky; top: 0; z-index: 10; }
.arcade-bar h1 { margin: 2px 0 0; font-size: clamp(22px, 3vw, 38px); letter-spacing: -1.5px; }
.arcade-bar h1 em { color: var(--lime); font-family: Georgia, serif; font-weight: 400; }
.arcade-bar .eyebrow { margin: 0; color: #aaa7bb; }
.arcade-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.arcade-back { color: var(--lime); font: 11px 'DM Mono', monospace; text-decoration: none; }
.header-wallet { display: grid; gap: 3px; padding: 0 22px; border-left: 1px solid #a77c3866; text-decoration: none; }
.header-wallet small { color: #aaa7bb; font: 9px 'DM Mono', monospace; letter-spacing: 1px; }
.header-wallet strong { color: #ffe7af; font: 500 23px 'DM Mono', monospace; }
.header-wallet #walletStatus { letter-spacing: 0; }
.arcade-main { max-width: 1760px; margin: auto; padding: 18px 24px 70px; }
.arcade-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.arcade-toolbar label { font: 11px 'DM Mono', monospace; color: #aaa7bb; }
.arcade-toolbar select { min-width: 280px; max-width: 100%; background: #17182a; border: 1px solid #a77c38; color: #fff; padding: 11px 14px; border-radius: 7px; }
.cabinet-tool { background: #17182a; border: 1px solid #66583f; color: #f5e6c0; padding: 11px 14px; border-radius: 7px; cursor: pointer; font: 11px 'DM Mono', monospace; }
.cabinet-tool[aria-pressed="true"] { border-color: #eaff66; color: #eaff66; }
.volume-control { display: flex; align-items: center; gap: 8px; }
.volume-control input { width: 85px; padding: 0; accent-color: #eaff66; }
.demo-tag { margin-left: auto; color: #eaff66; font: 10px 'DM Mono', monospace; letter-spacing: 1px; }
.soundtrack-label { width: 100%; color: #9ca9bb; font: 9px 'DM Mono', monospace; letter-spacing: 1px; padding-left: 2px; }
.arcade-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 12px; margin: 0 0 14px; }
.jackpot-board, .win-ticker { min-width: 0; border: 1px solid #a77c3866; border-radius: 10px; background: linear-gradient(110deg, #171226, #0c1123); box-shadow: inset 0 0 30px #4f236622; }
.jackpot-board { padding: 10px 12px; }
.jackpot-heading { display: flex; justify-content: space-between; color: #aaa7bb; font: 9px 'DM Mono', monospace; letter-spacing: 1.5px; }
.jackpot-heading b { color: #eaff66; font-weight: 500; }
.jackpot-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.jackpot-card { display: grid; gap: 2px; padding: 7px 8px; border-left: 2px solid #a77c38; background: #ffffff08; }
.jackpot-card small { color: #bcb4c9; font: 8px 'DM Mono', monospace; letter-spacing: 1px; }
.jackpot-card strong { color: #ffe7af; font: 600 13px 'DM Mono', monospace; }
.jackpot-grand { border-left-color: #eaff66; background: #eaff6610; }
.jackpot-grand strong { color: #eaff66; }
.feature-radar { overflow: hidden; margin-top: 8px; color: #9ee9e0; font: 9px 'DM Mono', monospace; white-space: nowrap; text-overflow: ellipsis; }
.win-ticker { display: flex; align-items: center; gap: 12px; overflow: hidden; padding: 0 14px; }
.ticker-label { flex: 0 0 auto; color: #efb5ff; font: 9px 'DM Mono', monospace; letter-spacing: 1px; }
.ticker-window { min-width: 0; overflow: hidden; color: #fff0ac; font: 11px 'DM Mono', monospace; white-space: nowrap; }
.ticker-window span { display: inline-block; animation: ticker-in .55s ease-out; }
.welcome-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: #04050bd9; backdrop-filter: blur(10px); }
.welcome-overlay[hidden] { display: none; }
.welcome-card { position: relative; width: min(720px, 100%); padding: clamp(24px, 5vw, 48px); border: 1px solid #d6a554; border-radius: 18px; background: radial-gradient(circle at 50% 0, #34234c, #111326 62%); box-shadow: 0 25px 100px #000, 0 0 60px #db8b4b22; }
.welcome-card .eyebrow { margin: 0 0 10px; color: #eaff66; font: 10px 'DM Mono', monospace; letter-spacing: 2px; }
.welcome-card h2 { margin: 0; color: #ffe7af; font: 500 clamp(30px, 6vw, 58px)/1.02 Georgia, serif; }
.welcome-lead { max-width: 580px; color: #c7c1d0; line-height: 1.6; }
.welcome-close { position: absolute; top: 13px; right: 16px; border: 0; background: none; color: #d7cbe0; font-size: 28px; cursor: pointer; }
.example-win { display: grid; grid-template-columns: minmax(180px, .65fr) 1fr; gap: 16px; align-items: center; margin: 24px 0; padding: 14px; border: 1px solid #b9894566; border-radius: 10px; background: #090b1ed9; }
.example-reels { display: flex; justify-content: center; gap: 5px; padding: 14px 7px; border: 2px ridge #c8984e; border-radius: 8px; color: #ffe7af; font: 700 28px 'DM Mono', monospace; background: #16132b; }
.example-reels span:nth-child(2) { color: #eaff66; }.example-reels span:nth-child(4) { color: #efb5ff; }
.example-win small { display: block; color: #a7fffa; font: 9px 'DM Mono', monospace; letter-spacing: 1px; }.example-win strong { display: block; margin: 5px 0; color: #fff0ac; font-size: 15px; }.example-win span { color: #aaa7bb; font-size: 11px; }
.welcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.welcome-grid div { display: grid; gap: 5px; padding: 11px; border: 1px solid #ffffff18; border-radius: 8px; background: #ffffff08; }.welcome-grid b { color: #eaff66; font: 10px 'DM Mono', monospace; }.welcome-grid span { color: #c3bdca; font-size: 11px; line-height: 1.45; }
.welcome-jackpots { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; margin: 19px 0; color: #bcb4c9; font: 9px 'DM Mono', monospace; }.welcome-jackpots span { color: #efb5ff; width: 100%; letter-spacing: 1px; }.welcome-jackpots b { color: #ffe7af; }.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }.welcome-primary, .welcome-secondary { padding: 13px 17px; border-radius: 7px; cursor: pointer; font: 700 11px 'DM Mono', monospace; }.welcome-primary { border: 1px solid #f5d787; background: linear-gradient(160deg, #fff0ac, #d8964d); color: #20100c; }.welcome-secondary { border: 1px solid #66583f; background: #17182a; color: #f5e6c0; }.welcome-note { margin: 17px 0 0; color: #898295; font: 9px 'DM Mono', monospace; }
body.welcome-open { overflow: hidden; }
.arcade-machine { position: relative; overflow: hidden; scroll-margin-top: 130px; border: 3px solid #bd923e; border-radius: 24px; background: #101729 center/cover; box-shadow: 0 18px 70px #000, 0 0 45px #68258025; }
.cabinet-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #04071545, #0709178a 30%, #0709178a 70%, #04071545); }
.cabinet-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 1; }
.cabinet-inner { position: relative; z-index: 2; padding: 26px 5% 30px; }
.machine-title { display: flex; justify-content: space-between; align-items: end; gap: 12px; color: #fff; text-shadow: 0 2px 5px #000; }
.machine-title strong { font-size: 16px; }
.machine-title span { font: 10px 'DM Mono', monospace; color: #e3d4b0; text-align: right; }
.arcade-logo { height: clamp(100px, 10vw, 160px); display: flex; align-items: center; justify-content: center; }
.arcade-logo img { max-width: 85%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 14px #06020c); }
.arcade-meters { display: flex; justify-content: center; flex-wrap: wrap; gap: 35px; margin: 8px 0 16px; color: #e9d6a4; font: 500 12px 'DM Mono', monospace; letter-spacing: 1px; }
.arcade-meters b { color: #eaff66; }
.arcade-reel-wrap { position: relative; max-width: 1400px; margin: auto; }
.arcade-reels { display: flex; gap: 7px; height: clamp(340px, 34vw, 560px); padding: 18px; background: #080b1af2; border: 7px ridge #d1a75b; border-radius: 22px; margin: auto; }
.arcade-reel { flex: 1; min-width: 0; overflow: hidden; border-radius: 9px; background: #080a1a; }
.reel-strip { height: 100%; display: grid; grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); }
.arcade-cell { position: relative; min-height: 0; background: radial-gradient(ellipse, #252141a8, #070c2099); border: 1px solid #74603877; border-radius: 7px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.arcade-cell img { height: 94%; width: 94%; object-fit: contain; }
.arcade-reel.is-spinning .reel-strip { height: 300%; grid-template-rows: repeat(var(--spin-rows, 9), minmax(0, 1fr)); animation: reel-travel .38s linear infinite; filter: blur(2px); }
.arcade-reel.is-settling .reel-strip { animation: reel-settle .23s ease-out; }
.mechanic-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: .95; z-index: 3; }
.arcade-status { text-align: center; color: #ffe7af; min-height: 25px; margin: 18px 4px 10px; font: 500 16px 'DM Mono', monospace; }
.arcade-controls { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.arcade-controls span, .arcade-controls label { color: #e9d6a4; font: 12px 'DM Mono', monospace; }
.arcade-controls b { color: #eaff66; font-size: 22px; }
.arcade-controls input { width: 95px; padding: 12px; background: #090b1ee8; border: 1px solid #b98945; border-radius: 7px; color: #fff1c8; font-size: 17px; }
.arcade-controls button { border: 1px solid #bc8a40; border-radius: 8px; padding: 14px 18px; background: #1b1725; color: #fff; font: 700 11px 'DM Mono', monospace; cursor: pointer; }
.arcade-controls #spinMachine { background: linear-gradient(160deg, #fff0ac, #e6b05b 40%, #76501a); box-shadow: inset 0 0 0 2px #f5d78766, 0 0 25px #ddac5233; color: #20100c; font-size: 24px; min-width: 190px; min-height: 62px; }
.arcade-controls #spinMachine i { color: #602341; font-style: normal; }
button:disabled, select:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
.win-presentation { position: absolute; inset: 12% 8%; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; pointer-events: none; text-align: center; background: radial-gradient(ellipse, #170c2bf5, #160b30bb 50%, transparent 72%); animation: award-enter .5s ease-out; }
.win-presentation[hidden] { display: none; }
.win-presentation small { color: #a7fffa; letter-spacing: 3px; font: 11px 'DM Mono', monospace; }
.win-presentation strong { font: bold clamp(30px, 6vw, 88px) Georgia, serif; color: #ffe8a2; text-shadow: 0 3px #86431f, 0 0 30px #ef38ca88; }
.win-presentation span { color: #fff9d9; font: 500 clamp(22px, 3vw, 44px) 'DM Mono', monospace; }
.arcade-machine.is-celebrating .arcade-reel-wrap { box-shadow: 0 0 50px #e9b75966; }
.arcade-machine.is-celebrating .win-presentation::before, .arcade-machine.is-celebrating .win-presentation::after { content: ''; position: absolute; inset: -12%; background-image: radial-gradient(circle, #ffdf79 2px, transparent 3px), radial-gradient(circle, #6cfff3 1px, transparent 3px); background-size: 91px 77px, 67px 113px; animation: award-sparks 1.8s linear infinite; opacity: .65; z-index: -1; }
.arcade-machine.is-celebrating .win-presentation::after { animation-direction: reverse; background-size: 123px 91px; opacity: .35; }
.demo-explainer { color: #9b96a9; font-size: 11px; text-align: center; margin: 13px auto 28px; }
.floor-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 32px 0 20px; }
.floor-heading h2 { font-size: 30px; margin: 6px 0 0; }
.floor-heading .eyebrow { color: #ba985d; margin: 0; }
.floor-heading > span { color: #a5a0b3; font: 11px 'DM Mono', monospace; }
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.machine-choice { min-width: 0; padding: 10px; border: 1px solid #ffffff1f; border-radius: 9px; color: #e9e5ee; background: #121322; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.machine-choice:hover { transform: translateY(-3px); border-color: #e6bd6d99; background: #1a1b30; }
.machine-choice strong, .machine-choice small { display: block; }
.machine-choice strong { font-size: 13px; }
.machine-choice small { color: #a7a0b5; font: 9px 'DM Mono', monospace; margin-top: 6px; }
.machine-choice.active { border-color: #e6bd6d; background: linear-gradient(135deg, #3c2546, #161b2a); }
.machine-thumb { position: relative; display: flex; align-items: end; height: 82px; margin-bottom: 11px; padding: 8px; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 6px; background: linear-gradient(180deg, #07102022, #070810dd), var(--machine-art) center/cover; box-shadow: inset 0 -20px 25px #070810; }
.machine-thumb::after { content: '✦'; position: absolute; top: 8px; right: 10px; color: #eaff66; font-size: 17px; opacity: .85; }
.machine-thumb span { position: relative; z-index: 1; color: #fff0ac; font: 9px 'DM Mono', monospace; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.machine-launch { display: block; margin-top: 11px; color: #eaff66; font: 9px 'DM Mono', monospace; letter-spacing: 1px; }
.machine-details { background: #121322; border: 1px solid #ffffff18; border-radius: 14px; margin-top: 24px; padding: 22px; line-height: 1.55; }
.machine-details h2 { margin: 0 0 12px; }
.machine-details p { margin: 7px 0; color: #beb9c8; overflow-wrap: anywhere; }
.machine-details summary { color: #e9d6a4; cursor: pointer; }
.rules-stats { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 8px; margin: 18px 0 14px; }
.rules-stats div { min-width: 0; padding: 10px; border: 1px solid #ffffff18; border-radius: 7px; background: #090b1eaa; }
.rules-stats small, .rules-stats strong { display: block; }.rules-stats small { color: #9b96a9; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .7px; }.rules-stats strong { margin-top: 5px; color: #eaff66; font: 12px 'DM Mono', monospace; overflow-wrap: anywhere; }
.feature-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 25px; margin: 13px 0 18px; padding: 0 0 0 25px; color: #d0cadb; font: 11px/1.55 'DM Mono', monospace; }.feature-steps li { padding-left: 4px; }.feature-steps li::marker { color: #eaff66; }
.rules-drawer { border-top: 1px solid #ffffff18; padding-top: 15px; }.rules-drawer[open] summary { margin-bottom: 12px; }
.machine-details .feature-note { color: #eaff66; font: 10px 'DM Mono', monospace; letter-spacing: 1px; text-transform: uppercase; }
.effect-previews { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.effect-previews span { color: #a7a0b5; font-size: 12px; }
.feature-badge { max-width: 1200px; margin: 0 auto 14px; padding: 10px 15px; border: 1px solid #b9894566; border-radius: 8px; background: linear-gradient(90deg, #090b1ef2, #090b1ec8), var(--feature-art) center/cover; color: #f4deb1; font: 11px/1.7 'DM Mono', monospace; text-align: center; overflow-wrap: anywhere; box-shadow: inset 0 0 26px #0008; }
.pick-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 14px 0 20px; }
.pick-controls[hidden] { display: none; }
.pick-choice { min-height: 52px; border-color: #e6bd6d; }
.coin-value { position: absolute; bottom: 4%; left: 2%; right: 2%; padding: 3px 1px; border: 1px solid #ffe7af; border-radius: 4px; background: #120b18ed; color: #fff0ac; font: 700 clamp(9px, 1.2vw, 20px) 'DM Mono', monospace; text-align: center; }
.arcade-cell.is-winning { border: 2px solid #eaff66; box-shadow: inset 0 0 22px #eaff6677; background: radial-gradient(ellipse, #70613e, #17202e); }
.arcade-reel.is-tumbling .reel-strip { animation: tumble-drop .38s ease-out; }
.paytable-scroll { overflow-x: auto; margin-top: 18px; }
.paytable { width: 100%; border-collapse: collapse; font: 12px 'DM Mono', monospace; }
.paytable th, .paytable td { padding: 10px; border-bottom: 1px solid #ffffff20; text-align: left; white-space: nowrap; }
.paytable th { color: #ffe7af; }
.symbol-cell { display: flex; align-items: center; gap: 8px; }.symbol-cell img { width: 32px; height: 32px; object-fit: contain; }.symbol-cell span { color: #f2e9d0; }
.line-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 35px; padding-left: 28px; color: #d0cadb; font: 11px/1.6 'DM Mono', monospace; }
@keyframes tumble-drop { from { opacity: .35; transform: translateY(-18%); } to { opacity: 1; transform: translateY(0); } }
.expanded-cabinet .arcade-main { max-width: none; padding: 12px; }
.expanded-cabinet .arcade-bar > .brand, .expanded-cabinet .arcade-bar > div:not(.arcade-actions) { display: none; }
.expanded-cabinet .arcade-bar { padding: 10px 24px; }
.expanded-cabinet .arcade-reel-wrap { max-width: 1650px; }
.expanded-cabinet .arcade-reels { height: clamp(340px, 46vh, 760px); }
.expanded-cabinet .arcade-logo { height: clamp(85px, 12vh, 180px); }
:is(button, a, input, select, summary):focus-visible { outline: 2px solid #eaff66; outline-offset: 4px; }
@keyframes reel-travel { from { transform: translateY(-33.333333%); } to { transform: translateY(0); } }
@keyframes reel-settle { 0% { transform: translateY(-8%); } 60% { transform: translateY(2%); } 100% { transform: translateY(0); } }
@keyframes award-enter { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes award-sparks { from { transform: translateY(-20px); } to { transform: translateY(57px); } }
@keyframes ticker-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 1800px) { .arcade-reels { height: 620px; } }
@media (max-width: 900px) {
  .arcade-promo { grid-template-columns: 1fr; }
  .arcade-bar { gap: 15px; flex-wrap: wrap; padding: 12px 20px; }
  .arcade-actions { gap: 12px; }
  .header-wallet { padding: 0 12px; }
  .header-wallet strong { font-size: 19px; }
  .arcade-main { padding: 14px 12px 45px; }
  .cabinet-inner { padding: 18px 3% 22px; }
  .demo-tag { margin-left: 0; }
}
@media (max-width: 600px) {
  .arcade-bar { padding: 14px; }
  .arcade-bar .brand { font-size: 12px; }
  .arcade-bar h1 { font-size: 24px; }
  .arcade-actions { width: 100%; margin: 0; justify-content: space-between; }
  .header-wallet { border: 0; padding: 0; }
  .arcade-back { font-size: 10px; }
  .arcade-main { padding: 10px 7px 40px; }
  .arcade-toolbar { gap: 10px; }
  .arcade-toolbar > label:first-child { width: 100%; }
  .arcade-toolbar select { width: 100%; min-width: 0; }
  .cabinet-tool { padding: 10px; font-size: 10px; }
  .volume-control { margin-left: auto; }
  .volume-control input { width: 65px; }
  .demo-tag { font-size: 9px; }
  .jackpot-ladder { gap: 3px; }.jackpot-card { padding: 6px 4px; }.jackpot-card small { font-size: 7px; }.jackpot-card strong { font-size: 10px; }.win-ticker { min-height: 42px; padding: 0 9px; }.ticker-window { font-size: 9px; }
  .arcade-machine { scroll-margin-top: 145px; border-width: 2px; border-radius: 14px; }
  .cabinet-inner { padding: 14px 8px 24px; }
  .machine-title strong { font-size: 11px; }
  .machine-title span { font-size: 8px; max-width: 38%; }
  .arcade-logo { height: 110px; }
  .arcade-logo img { max-width: 100%; }
  .arcade-meters { gap: 9px; font-size: 8px; letter-spacing: 0; margin-bottom: 12px; }
  .arcade-reels, .expanded-cabinet .arcade-reels { height: clamp(270px, 72vw, 420px); padding: 7px; border-width: 3px; border-radius: 10px; gap: 3px; }
  .arcade-cell { border-radius: 4px; }
  .arcade-status { font-size: 12px; min-height: 32px; }
  .arcade-controls { gap: 12px; }
  .arcade-controls span { width: 100%; text-align: center; }
  .arcade-controls input { width: 70px; padding: 11px 7px; }
  .arcade-controls #spinMachine { min-width: 125px; min-height: 48px; font-size: 20px; }
  .arcade-controls #refreshBalance { font-size: 9px; padding: 13px 9px; }
  .win-presentation { gap: 12px; inset: 10% 3%; }
  .win-presentation small { font-size: 8px; letter-spacing: 1px; }
  .floor-heading > span { display: none; }
  .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .machine-choice { padding: 8px; }.machine-thumb { height: 62px; margin-bottom: 8px; }.machine-launch { margin-top: 8px; font-size: 8px; }
  .machine-choice strong { font-size: 11px; }
  .machine-choice small { font-size: 8px; }
  .machine-details { padding: 16px; }.rules-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feature-steps { grid-template-columns: 1fr; gap: 7px; }
  .welcome-overlay { padding: 9px; }.welcome-card { padding: 26px 17px 18px; max-height: 94vh; overflow-y: auto; }.example-win { grid-template-columns: 1fr; gap: 10px; }.welcome-grid { grid-template-columns: 1fr; }.welcome-grid div { grid-template-columns: 1fr 1.6fr; align-items: center; }.welcome-jackpots { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .arcade-reel.is-spinning .reel-strip { animation: none; filter: none; }
  .arcade-reel.is-settling .reel-strip, .arcade-reel.is-tumbling .reel-strip, .win-presentation, .arcade-machine.is-celebrating .win-presentation::before, .arcade-machine.is-celebrating .win-presentation::after { animation: none; }
  .ticker-window span { animation: none; }
}