@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Montserrat:wght@600;700;800&display=swap");
:root{--gold:#f6cf63;--deep-gold:#a86513;--ivory:#fff4d3;--navy:#101d49;--sky:#287ac0;--violet:#6a3bb6}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:#0b1741;color:white;font-family:Montserrat,system-ui,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit}.game{position:relative;width:100vw;height:100dvh;min-height:620px;overflow:hidden;background:radial-gradient(circle at 50% 36%,rgba(255,232,152,.92) 0 4%,rgba(81,158,215,.3) 22%,transparent 40%),linear-gradient(#142b68 0%,#2879bb 44%,#d8bb83 72%,#526c93 100%);display:grid;grid-template-rows:auto 1fr auto auto}.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}.sky:before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.22) 45%,transparent 55%);mix-blend-mode:screen}.cloud{position:absolute;width:42vw;height:12vw;max-height:130px;border-radius:50%;background:rgba(255,247,220,.8);filter:blur(17px);box-shadow:12vw 1vw 0 rgba(255,247,220,.68),-10vw 2vw 0 rgba(255,247,220,.7)}.c1{left:-10vw;top:42%}.c2{right:-10vw;top:26%;transform:scale(.8)}.c3{left:30vw;bottom:12%;transform:scale(1.3);opacity:.56}.topbar{z-index:2;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:max(10px,env(safe-area-inset-top)) 18px 4px}.brand{text-align:center;filter:drop-shadow(0 3px 0 #402306) drop-shadow(0 0 15px rgba(255,211,89,.55))}.brand-kicker{display:block;color:#fff6d2;font-family:Cinzel,serif;font-size:clamp(10px,2.6vw,15px);letter-spacing:.42em;margin-right:-.42em}.brand h1{margin:-3px 0 -8px;font-family:Cinzel,serif;font-size:clamp(42px,11vw,76px);line-height:1;background:linear-gradient(#fff8c9 5%,#ffd865 36%,#c47919 76%,#ffe890);-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #70420d}.brand-rule{display:inline-block;width:135px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.icon-btn{width:46px;height:46px;border-radius:50%;border:2px solid #f7d86f;color:#fff4c5;background:linear-gradient(#3f61a0,#172a5a);box-shadow:inset 0 0 0 3px #8d5d1d,0 4px 10px #07102c;font-family:Cinzel;font-size:24px;font-weight:800}.stage{position:relative;z-index:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px}.marble-cap{width:min(94vw,720px);height:37px;display:flex;align-items:center;justify-content:center;gap:15px;color:#513211;font-family:Cinzel,serif;font-size:clamp(11px,2.8vw,16px);letter-spacing:.1em;background:linear-gradient(#fffdea,#c9b48f);border:3px solid #9c641a;border-bottom:0;border-radius:16px 16px 2px 2px;box-shadow:inset 0 5px 9px white,0 -3px 14px rgba(255,218,96,.7)}.marble-cap span{height:1px;width:16%;background:#9b6b2f}.reel-shell{position:relative;width:min(94vw,720px);height:min(54vh,640px);min-height:330px;padding:13px 17px;background:linear-gradient(110deg,#85510d,#fff0a5 12%,#a46510 22%,#f6d369 50%,#85510d 78%,#ffe797 90%,#8d580f);clip-path:polygon(2% 0,98% 0,100% 3%,98% 97%,96% 100%,4% 100%,2% 97%,0 3%);filter:drop-shadow(0 13px 13px rgba(5,11,34,.65))}.reels{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:3px;padding:8px;background:radial-gradient(circle at 50% 40%,rgba(97,137,201,.95),rgba(14,29,79,.98));border:4px solid #3b245d;box-shadow:inset 0 0 25px #050d2f;overflow:hidden}.symbol{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%);border:1px solid rgba(255,233,168,.13)}.symbol img{width:105%;height:105%;object-fit:contain;filter:drop-shadow(0 4px 2px rgba(2,7,26,.72));will-change:transform,opacity}.symbol.drop img{animation:drop .38s cubic-bezier(.17,.89,.38,1.25) both}.symbol.win{z-index:2;background:radial-gradient(circle,#fff7b9 0,rgba(255,205,50,.6) 31%,transparent 68%)}.symbol.win img{animation:win .6s ease-in-out infinite alternate;filter:drop-shadow(0 0 9px white) drop-shadow(0 0 14px #ffc928)}.symbol.clear img{animation:clear .28s ease-in forwards}.multiplier{position:absolute;right:-7px;top:-19px;z-index:5;padding:7px 13px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff6a2,#e29420 45%,#733d0a 72%);border:3px solid #fff0a2;color:#fff;font-family:Cinzel;font-weight:800;font-size:20px;text-shadow:0 2px 2px #562c08;box-shadow:0 0 16px #ffdb59}.message{height:34px;margin-top:7px;display:grid;place-items:center;color:#fff4bc;font-family:Cinzel,serif;font-size:clamp(11px,2.8vw,15px);letter-spacing:.09em;text-shadow:0 2px 4px #08112e}.message.big{animation:message .45s both;color:#fff;font-size:clamp(19px,5vw,30px)}.controls{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:14px;padding:5px max(16px,env(safe-area-inset-right)) 8px;background:linear-gradient(90deg,#0b153a,#1d3977 48%,#0b153a);border-top:3px solid #b67c23;box-shadow:0 -8px 18px rgba(10,18,51,.45)}.meter{display:flex;flex-direction:column;min-width:0}.meter.win{text-align:right}.meter span,.bet span{font-size:9px;letter-spacing:.16em;color:#d4c9aa}.meter strong,.bet strong{color:#fff6ce;font-size:clamp(13px,3vw,18px);font-variant-numeric:tabular-nums;text-shadow:0 2px 2px #000}.actions{display:flex;align-items:end;gap:8px}.small-btn,.auto{height:46px;min-width:46px;border:2px solid #ddb959;border-radius:13px;background:linear-gradient(#405c9a,#172855);color:#fff5c8;box-shadow:inset 0 0 0 2px #765018,0 4px 5px #07102d;font-size:23px}.bet{width:54px;text-align:center;padding-bottom:4px}.spin{position:relative;width:79px;height:79px;border-radius:50%;border:5px solid #ffeda5;background:radial-gradient(circle at 42% 34%,#fff2a0,#e29a20 44%,#8c4b0b 73%);color:white;box-shadow:inset 0 0 0 4px #9d6314,0 0 0 3px #50320b,0 6px 12px #050b24;text-shadow:0 2px 2px #54300b}.spin i{position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.55);border-radius:50%}.spin span{position:relative;font-family:Cinzel;font-size:14px;font-weight:800}.spin:active{transform:translateY(3px) scale(.96)}.spin.running i{animation:rotate .7s linear infinite}.auto{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px}.auto span{font-size:8px}.auto.active{background:linear-gradient(#8857ce,#422576);box-shadow:0 0 14px #9e64f0}.bolt{position:absolute;width:5px;height:130px;background:#fff7a0;box-shadow:0 0 12px #fff,0 0 22px #6dbbff;clip-path:polygon(50% 0,100% 0,65% 43%,100% 43%,15% 100%,36% 55%,0 55%)}.bolt-a{left:5%;top:11%;transform:rotate(12deg);opacity:.65}.bolt-b{right:4%;bottom:14%;transform:rotate(193deg) scale(.7);opacity:.5}footer{z-index:3;height:20px;text-align:center;padding-top:4px;background:#080f2b;color:#8e98b7;font-size:8px;letter-spacing:.14em}dialog{width:min(88vw,500px);border:3px solid #d8ad42;border-radius:18px;color:#35210f;background:linear-gradient(#fffbea,#d8c39d);box-shadow:0 20px 70px #03071b;padding:25px}dialog::backdrop{background:rgba(2,7,25,.82);backdrop-filter:blur(5px)}dialog h2{font-family:Cinzel;color:#7a4b0b;margin-top:0}dialog p{font-size:14px;line-height:1.6}dialog button{float:right;border:0;background:none;font-size:28px;color:#6f4613}@keyframes drop{from{transform:translateY(-100px) scale(.7);opacity:0}to{transform:none;opacity:1}}@keyframes win{to{transform:scale(1.13) rotate(2deg)}}@keyframes clear{to{transform:scale(1.7);opacity:0;filter:brightness(2.2) blur(4px)}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes message{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}@media (orientation:landscape) and (max-height:760px){.game{grid-template-columns:1fr minmax(450px,65vw) 1fr;grid-template-rows:auto 1fr auto}.topbar{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;padding:16px 8px;gap:18px}.brand{order:-1}.brand h1{font-size:42px}.brand-kicker{font-size:9px}.stage{grid-column:2;grid-row:1/3;padding:8px}.reel-shell{height:calc(100vh - 90px);min-height:0}.controls{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;align-items:stretch}.actions{flex-wrap:wrap;justify-content:center}.meter.win{text-align:left}footer{grid-column:1/4}.marble-cap{height:30px}.spin{width:70px;height:70px}}@media(max-width:430px){.stage{padding:0 8px}.topbar{grid-template-columns:50px 1fr 50px;padding-left:10px;padding-right:10px}.icon-btn{width:40px;height:40px}.reel-shell{width:98vw;padding:9px 11px}.marble-cap{width:98vw}.reels{padding:5px;gap:1px}}

/* Compact touch-first HUD. Metrics get their own row so long values never
   compete with the game controls for horizontal space. */
@media (max-width:600px) and (orientation:portrait){
  .game{min-height:540px;grid-template-rows:auto minmax(0,1fr) auto auto}
  .marble-cap{position:relative;height:42px;padding:0 54px 0 16px;gap:8px;border-radius:13px 13px 2px 2px;font-size:clamp(10px,3vw,13px);white-space:nowrap}
  .marble-cap .cap-rule{display:none}
  .multiplier{right:8px;top:50%;width:40px;height:40px;padding:0;display:grid;place-items:center;transform:translateY(-50%);font-size:15px;border-width:2px;box-shadow:0 0 10px #ffdb59}
  .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:7px;padding:8px 24px 9px;overflow:hidden}
  .meter{grid-column:1;grid-row:1;min-width:0;width:100%;padding:0;align-items:flex-start}
  .meter.win{grid-column:2;grid-row:1;text-align:right;align-items:flex-end;padding-right:2px}
  .meter span{font-size:8px;letter-spacing:.13em}
  .meter span,.meter strong{display:block;max-width:100%;white-space:nowrap}
  .meter strong{font-size:clamp(13px,4.2vw,18px);overflow:hidden;text-overflow:ellipsis}
  .actions{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:62px 48px 78px 48px 48px;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;perspective:500px}
  .small-btn,.auto{position:relative;width:48px;min-width:0;height:48px;border-radius:13px;border:2px solid #f5d36c;background:linear-gradient(145deg,#4569ad 0%,#243f80 48%,#101d49 100%);box-shadow:inset 0 0 0 2px #8a5b16,inset 0 8px 11px rgba(255,255,255,.12),0 5px 0 #55330a,0 8px 12px rgba(2,7,24,.68);text-shadow:0 2px 2px #050a1e;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;overflow:hidden}
  .small-btn::after,.auto::after{content:"";position:absolute;inset:3px;border-radius:9px;border:1px solid rgba(255,244,184,.34);pointer-events:none}
  .small-btn:active,.auto:active{transform:translateY(4px) scale(.96);box-shadow:inset 0 0 0 2px #8a5b16,inset 0 5px 10px rgba(0,0,0,.2),0 1px 0 #55330a}
  .bet{width:62px;padding:0;text-align:center}
  .bet span{display:block;font-size:8px;letter-spacing:.12em}
  .bet strong{font-size:15px}
  .spin{width:78px;height:78px;border-width:4px;background:radial-gradient(circle at 39% 30%,#fff5b5 0 5%,#ffd65e 18%,#d98d18 56%,#714009 78%,#2f1904 100%);box-shadow:inset 0 0 0 4px #a86c16,inset 0 0 0 8px #f9d875,inset 0 -11px 15px rgba(81,40,2,.35),0 6px 0 #5a3307,0 10px 17px rgba(2,7,24,.72),0 0 18px rgba(255,205,74,.38);transition:transform .15s ease,filter .15s ease}
  .spin::before{content:"";position:absolute;inset:7px;border-radius:50%;background:conic-gradient(from 220deg,transparent 0 22%,rgba(255,255,255,.7) 30%,transparent 38% 100%);opacity:.45;animation:spinShine 3.2s linear infinite}
  .spin i{inset:14px;border:2px dashed rgba(255,248,202,.72);box-shadow:inset 0 0 10px rgba(255,255,255,.28)}
  .spin span{position:relative;z-index:2;font-size:13px;filter:drop-shadow(0 1px 1px #563006)}
  .spin:hover{filter:brightness(1.12);transform:translateY(-1px)}
  .spin:active{transform:translateY(5px) scale(.95);box-shadow:inset 0 0 0 4px #a86c16,inset 0 0 0 8px #f9d875,inset 0 7px 16px rgba(73,35,0,.45),0 1px 0 #5a3307}
  .spin.running{animation:spinPulse .72s ease-in-out infinite alternate}
  .auto{font-size:17px}
  .auto.active{background:linear-gradient(145deg,#a16bea,#57318f 55%,#2c1854);box-shadow:inset 0 0 0 2px #d7b2ff,0 5px 0 #321557,0 0 18px rgba(169,101,245,.78)}
  footer{height:18px;padding-top:3px;font-size:7px;white-space:nowrap}
}

@media (max-width:370px) and (orientation:portrait){
  .controls{column-gap:8px;padding-inline:20px}
  .actions{grid-template-columns:52px 42px 70px 42px 42px;gap:5px}
  .small-btn,.auto{width:42px;height:44px}
  .bet{width:52px}
  .spin{width:68px;height:68px}
  .marble-cap{padding-right:48px}
  .multiplier{right:6px;width:36px;height:36px;font-size:14px}
}

@keyframes spinShine{to{transform:rotate(360deg)}}
@keyframes spinPulse{from{filter:brightness(1);transform:scale(1)}to{filter:brightness(1.18);transform:scale(1.035)}}

/* One shared center axis for every portrait-game layer. Avoid vw here: mobile
   browser gutters and scrollbar widths can make vw wider than the game box. */
@media (max-width:600px) and (orientation:portrait){
  .game,.topbar,.stage,.controls,footer{width:100%;margin-inline:auto}
  .topbar{grid-template-columns:48px minmax(0,1fr) 48px;padding-inline:18px}
  .brand{justify-self:center;max-width:calc(100% - 8px)}
  .stage{padding-inline:12px}
  .marble-cap,.reel-shell{width:min(100%,720px);margin-inline:auto}
  .message{width:100%;text-align:center}
  .controls{padding-inline:20px}
  .actions{width:100%;grid-template-columns:minmax(52px,1fr) 46px 78px 46px minmax(52px,1fr);gap:7px;justify-content:stretch}
  .bet{justify-self:end}
  #betMinus{justify-self:center}
  .spin{justify-self:center}
  #betPlus{justify-self:center}
  .auto{justify-self:start}
}

@media (max-width:370px) and (orientation:portrait){
  .stage{padding-inline:10px}
  .controls{padding-inline:14px}
  .actions{grid-template-columns:minmax(48px,1fr) 42px 70px 42px minmax(48px,1fr);gap:5px}
}

/* Taller brand crown, lower board, and no dead air above the bottom HUD. */
@media (max-width:600px) and (orientation:portrait){
  .topbar{min-height:108px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:8px;align-items:center}
  .brand-kicker{font-size:12px;letter-spacing:.5em}
  .brand h1{font-size:clamp(54px,16vw,68px);margin-top:-2px;margin-bottom:-9px}
  .brand-rule{width:170px}
  .icon-btn{align-self:center}
  .stage{justify-content:flex-end;padding-top:4px;padding-bottom:0}
  .message{margin-top:4px;height:36px}
}

.win-celebration{position:absolute;z-index:30;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(255,249,185,.25),rgba(34,18,83,.18) 40%,rgba(5,10,38,.68) 100%);opacity:0;visibility:hidden;transition:opacity .15s ease}.win-celebration.show{visibility:visible;opacity:1;animation:screenFlash 2.7s ease both}.win-rays{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(from 0deg,rgba(255,236,120,.42) 0 5deg,transparent 5deg 13deg);animation:raysRotate 7s linear infinite;mask-image:radial-gradient(circle,black 0 35%,transparent 67%)}.win-burst{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(88vw,560px);min-height:250px;padding:34px 24px;background:radial-gradient(ellipse,rgba(70,32,133,.95),rgba(22,22,74,.92) 58%,rgba(9,13,45,.1) 72%);filter:drop-shadow(0 0 24px #ffd958);text-align:center;transform:scale(.2);opacity:0}.show .win-burst{animation:burstIn 2.7s cubic-bezier(.2,.85,.25,1) both}.win-burst::before,.win-burst::after{content:"";position:absolute;inset:5%;border:3px solid #ffe993;clip-path:polygon(50% 0,59% 34%,85% 15%,66% 42%,100% 50%,66% 59%,85% 85%,59% 66%,50% 100%,41% 66%,15% 85%,34% 59%,0 50%,34% 42%,15% 15%,41% 34%);filter:drop-shadow(0 0 9px #ffca38);opacity:.68}.win-burst::after{inset:12%;transform:rotate(22deg);border-color:#fff8c9}.win-kicker{position:relative;z-index:2;color:#fff5c2;font:700 clamp(10px,3vw,14px)/1 Montserrat,sans-serif;letter-spacing:.24em;text-shadow:0 2px 5px #35186c}.win-burst strong{position:relative;z-index:2;margin:6px 0 2px;font-family:Cinzel,serif;font-size:clamp(52px,16vw,94px);line-height:.95;background:linear-gradient(#fffbd1 5%,#ffd64e 38%,#dc8215 68%,#fff0a0 92%);-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1.5px #704006;text-shadow:none;filter:drop-shadow(0 5px 0 #5d2c09) drop-shadow(0 0 18px #ffd34f)}.win-burst b{position:relative;z-index:2;color:white;font-family:Cinzel,serif;font-size:clamp(34px,10vw,62px);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #6b3908,0 0 12px #ffdc56,0 0 25px #fff}.win-burst i{position:relative;z-index:2;margin-top:7px;color:#f3d880;font:700 10px/1 Montserrat,sans-serif;letter-spacing:.15em;font-style:normal}.win-particles{position:absolute;inset:0}.win-particle{position:absolute;left:50%;top:48%;width:10px;height:16px;border-radius:2px;background:var(--particle);box-shadow:0 0 8px var(--particle);opacity:0}.show .win-particle{animation:particleFly 1.8s var(--delay) cubic-bezier(.1,.65,.2,1) both}
@keyframes screenFlash{0%{filter:brightness(2.3)}9%{filter:brightness(1)}16%{filter:brightness(1.75)}24%,100%{filter:brightness(1)}}
@keyframes raysRotate{to{transform:rotate(360deg)}}
@keyframes burstIn{0%{transform:scale(.2) rotate(-8deg);opacity:0}12%{transform:scale(1.15) rotate(2deg);opacity:1}21%,78%{transform:scale(1);opacity:1}88%{transform:scale(1.06);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes particleFly{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}

/* Final HUD rhythm: metrics sit closer to the controls and the five actions
   breathe across the complete safe width while SPIN stays on the center axis. */
@media (max-width:600px) and (orientation:portrait){
  .controls{grid-template-rows:36px auto;row-gap:7px;padding-top:14px;padding-bottom:9px}
  .meter{transform:translateY(5px)}
  .actions{width:calc(100% + 12px);margin-inline:-6px;grid-template-columns:minmax(58px,1fr) 48px 78px 48px minmax(58px,1fr);column-gap:11px}
  .bet{justify-self:start;text-align:center}
  .auto{justify-self:end}
}

@media (max-width:370px) and (orientation:portrait){
  .controls{grid-template-rows:34px auto;padding-top:12px}
  .meter{transform:translateY(4px)}
  .actions{width:calc(100% + 8px);margin-inline:-4px;grid-template-columns:minmax(52px,1fr) 42px 70px 42px minmax(52px,1fr);column-gap:7px}
}

/* Footer disclaimer removed: let the control dock use the full bottom edge. */
.game{grid-template-rows:auto 1fr auto}
.controls{padding-bottom:max(11px,env(safe-area-inset-bottom))}

/* Lift the reel assembly and the primary − / SPIN / + cluster. */
@media (max-width:600px) and (orientation:portrait){
  .stage{transform:translateY(-10px)}
  #betMinus,.spin,#betPlus{transform:translateY(-8px)}
  .spin:hover{transform:translateY(-9px)}
  .spin:active{transform:translateY(-3px) scale(.95)}
  .spin.running{animation:spinPulseLifted .72s ease-in-out infinite alternate}
}

@keyframes spinPulseLifted{from{filter:brightness(1);transform:translateY(-8px) scale(1)}to{filter:brightness(1.18);transform:translateY(-8px) scale(1.035)}}

/* Illustrated animated title replaces the CSS text logo. */
.hero-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(58,28,5,.8)) drop-shadow(0 0 13px rgba(77,184,255,.78)) drop-shadow(0 0 19px rgba(255,199,56,.55));transform-origin:50% 70%;animation:heroFloat 3.4s ease-in-out infinite alternate}
@media (max-width:600px) and (orientation:portrait){
  .topbar{min-height:156px;height:156px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:0;grid-template-columns:48px minmax(0,1fr) 48px;overflow:visible}
  .brand{position:relative;z-index:1;width:min(292px,calc(100vw - 76px));max-width:none;height:152px;margin-top:4px;overflow:visible}
  .hero-logo{transform:translateY(2px)}
  .icon-btn{position:relative;z-index:3}
  .stage{transform:translateY(-14px)}
}
@media (max-width:370px) and (orientation:portrait){
  .topbar{min-height:142px;height:142px}
  .brand{width:min(266px,calc(100vw - 72px));height:138px}
  .stage{transform:translateY(-12px)}
}
@keyframes heroFloat{0%{transform:translateY(4px) scale(.985);filter:drop-shadow(0 4px 0 rgba(58,28,5,.8)) drop-shadow(0 0 10px rgba(77,184,255,.65)) drop-shadow(0 0 14px rgba(255,199,56,.42))}100%{transform:translateY(-3px) scale(1.018);filter:drop-shadow(0 5px 0 rgba(58,28,5,.8)) drop-shadow(0 0 18px rgba(77,184,255,.95)) drop-shadow(0 0 25px rgba(255,199,56,.72))}}

/* Raise the primary three-button cluster one more step. */
@media (max-width:600px) and (orientation:portrait){
  #betMinus,.spin,#betPlus{transform:translateY(-14px)}
  .spin:hover{transform:translateY(-15px)}
  .spin:active{transform:translateY(-9px) scale(.95)}
  .spin.running{animation:spinPulseLiftedMore .72s ease-in-out infinite alternate}
}
@keyframes spinPulseLiftedMore{from{filter:brightness(1);transform:translateY(-14px) scale(1)}to{filter:brightness(1.18);transform:translateY(-14px) scale(1.035)}}

/* Optical centering for status / total-win copy between reels and HUD. */
@media (max-width:600px) and (orientation:portrait){
  .message{position:relative;top:6px;place-items:center;line-height:1;padding-top:2px}
}

/* Real-phone compact mode: browser toolbars reduce the visual viewport on
   short Android/iOS screens. Scale the vertical zones instead of allowing the
   board to collide with the logo or HUD. */
@media (max-width:600px) and (max-height:700px) and (orientation:portrait){
  .game{height:var(--app-height,100dvh);min-height:0;grid-template-rows:92px minmax(0,1fr) 122px}
  .topbar{height:92px;min-height:92px;padding:2px 14px 0;grid-template-columns:42px minmax(0,1fr) 42px}
  .brand{width:min(218px,calc(100vw - 82px));height:96px;margin-top:0}
  .icon-btn{width:38px;height:38px;font-size:20px}
  .stage{height:100%;min-height:0;transform:none;padding:0 10px;justify-content:center}
  .marble-cap{height:34px;min-height:34px;padding-right:44px;font-size:10px}
  .multiplier{width:34px;height:34px;right:5px;font-size:13px}
  .reel-shell{height:clamp(240px,calc(var(--app-height,100dvh) - 278px),360px);min-height:0;padding:8px 10px}
  .message{height:28px;margin-top:0;top:2px;font-size:10px;padding-top:0}
  .message.big{font-size:clamp(15px,4.4vw,21px)}
  .controls{height:122px;min-height:122px;padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom));grid-template-rows:31px auto;row-gap:2px}
  .meter{transform:translateY(2px)}
  .actions{height:70px}
  #betMinus,.spin,#betPlus{transform:translateY(-8px)}
  .spin:hover{transform:translateY(-9px)}
  .spin:active{transform:translateY(-3px) scale(.95)}
  .spin.running{animation:spinPulseCompact .72s ease-in-out infinite alternate}
}

@media (max-width:340px) and (max-height:620px) and (orientation:portrait){
  .game{grid-template-rows:84px minmax(0,1fr) 116px}
  .topbar{height:84px;min-height:84px}
  .brand{width:194px;height:88px}
  .reel-shell{height:clamp(220px,calc(var(--app-height,100dvh) - 258px),310px)}
  .controls{height:116px;min-height:116px}
}

@keyframes spinPulseCompact{from{filter:brightness(1);transform:translateY(-8px) scale(1)}to{filter:brightness(1.18);transform:translateY(-8px) scale(1.035)}}

/* Removed the collision-prone WIN UP TO banner. Keep only the live multiplier
   as a compact badge inside the board's safe corner. */
.marble-cap{display:none!important}
.reel-shell>.multiplier{right:8px;top:8px;width:42px;height:42px;padding:0;display:grid;place-items:center;transform:none;font-size:15px;border-width:2px;z-index:8}
@media (max-width:600px) and (orientation:portrait){
  .reel-shell>.multiplier{right:5px;top:5px;width:36px;height:36px;font-size:13px}
}
@media (max-width:600px) and (max-height:700px) and (orientation:portrait){
  .reel-shell>.multiplier{right:4px;top:4px;width:32px;height:32px;font-size:12px}
}

/* Guaranteed physical clearance between the animated logo and board on short
   real-phone viewports. */
@media (max-width:340px) and (max-height:620px) and (orientation:portrait){
  .brand{width:178px;height:80px}
  .hero-logo{animation-duration:4s}
  .stage{padding-top:10px}
}

/* Lapdee88 illustrated title: preserve clear separation from the reels. */
@media (max-width:600px) and (orientation:portrait){
  .brand{width:min(300px,calc(100vw - 72px));height:154px}
  .hero-logo{object-position:center center}
}
@media (max-width:600px) and (max-height:700px) and (orientation:portrait){
  .brand{width:min(220px,calc(100vw - 84px));height:96px}
}
@media (max-width:340px) and (max-height:620px) and (orientation:portrait){
  .brand{width:178px;height:80px}
}

/* Desktop/tablet bounds: prevent the illustrated logo from expanding to the
   full monitor and keep the complete game framed in one viewport. */
@media (min-width:601px) and (orientation:portrait){
  .game{grid-template-rows:clamp(138px,18vh,190px) minmax(0,1fr) 104px}
  .topbar{height:100%;grid-template-columns:60px minmax(0,1fr) 60px;padding:8px max(24px,calc((100vw - 760px)/2)) 0}
  .brand{justify-self:center;width:min(360px,56vw);height:100%;max-height:188px}
  .stage{padding:4px 24px 0;justify-content:center}
  .reel-shell{width:min(720px,88vw);height:min(640px,calc(82vh - 252px));min-height:330px}
  .message{height:34px;margin-top:3px}
  .controls{height:104px;padding-inline:max(30px,calc((100vw - 820px)/2));background:linear-gradient(180deg,rgba(23,57,119,.72),rgba(15,34,79,.88));box-shadow:0 -5px 14px rgba(10,18,51,.24)}
}

@media (min-width:900px) and (orientation:landscape) and (min-height:761px){
  .game{grid-template-rows:180px minmax(0,1fr) 104px}
  .topbar{height:180px;grid-template-columns:60px minmax(0,1fr) 60px;padding:8px max(28px,calc((100vw - 920px)/2)) 0}
  .brand{justify-self:center;width:340px;height:174px}
  .stage{padding:0 24px;justify-content:center}
  .reel-shell{width:min(720px,72vw);height:min(550px,calc(100vh - 322px));min-height:330px}
  .message{height:34px;margin-top:4px}
  .controls{height:104px;padding-inline:max(32px,calc((100vw - 900px)/2))}
}

/* Foldable inner display: use a compact horizontal composition instead of
   allowing the generic landscape logo to dominate the screen. */
@media (min-width:601px) and (max-width:899px) and (orientation:landscape) and (max-height:760px){
  .game{grid-template-columns:144px minmax(0,1fr) 144px}
  .topbar{padding:12px 8px;gap:10px}
  .brand{width:128px;height:112px;flex:none}
  .hero-logo{width:100%;height:100%}
  .stage{padding:12px 6px}
  .reel-shell{width:100%;height:calc(var(--app-height,100dvh) - 80px)}
  .controls{width:144px;background:linear-gradient(180deg,rgba(43,91,157,.22),rgba(20,46,99,.28));border-left:1px solid rgba(246,207,99,.28);box-shadow:none}
}

/* Galaxy Fold cover display: remove the heavy dark dock/overlay while keeping
   enough contrast for metrics and touch controls. */
@media (min-width:391px) and (max-width:600px) and (orientation:portrait){
  .controls{background:linear-gradient(180deg,rgba(30,76,143,.32),rgba(12,38,88,.42));box-shadow:0 -4px 12px rgba(10,18,51,.16)}
}

/* Desktop BET value needs its own width; the old 54px slot let 10.00 render
   underneath the minus button. */
@media (min-width:900px) and (min-height:761px){
  .actions{gap:10px}
  .bet{width:92px;display:flex;align-items:baseline;justify-content:center;gap:5px;padding-bottom:7px;white-space:nowrap}
  .bet span{flex:none}
  .bet strong{flex:none;font-size:17px}
}