/* Keep the Atlantis reel window and its controls in one responsive coordinate system. */
.slotStage .reelFrame{
  --glass-spin-size:clamp(88px,7vw,112px);
  --glass-side-size:clamp(60px,4.8vw,76px);
  --glass-control-offset:clamp(54px,calc(3.5vw + 10px),66px);
  --glass-menu-offset:clamp(38px,calc(2.4vw + 8px),46px);
  --window-left:7.35%;
  --window-top:15.05%;
  --window-width:85.3%;
  --window-height:68.65%;
  width:107%;max-width:none;aspect-ratio:1536 / 1024;margin:0 auto;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
}

/* Persistent Turbo mode needs an obvious, but non-distracting, live state. */
.glassTurboBtn.active{animation:slotTurboPulse 1.15s ease-in-out infinite;filter:brightness(1.18) saturate(1.35)}
.glassTurboBtn.active .glassTurboIcon{animation:slotTurboBolt .72s steps(2,end) infinite;filter:drop-shadow(0 0 6px #8af7ff) drop-shadow(0 0 13px rgba(46,197,255,.8))}
@keyframes slotTurboPulse{50%{transform:scale(1.07);box-shadow:inset 0 1px 2px rgba(255,255,255,.78),0 0 12px rgba(102,235,255,.88),0 0 27px rgba(36,154,255,.48)}}
@keyframes slotTurboBolt{50%{filter:drop-shadow(0 0 9px #d7feff) drop-shadow(0 0 17px rgba(46,197,255,.95))}}
@media (prefers-reduced-motion:reduce){.glassTurboBtn.active,.glassTurboBtn.active .glassTurboIcon{animation:none}}
.slotStage .reelFrame::before,.slotStage .reelFrame::after{display:none}
.reelFrameArt{
  position:absolute;z-index:20;inset:0;display:block;width:100%;height:100%;
  pointer-events:none;user-select:none;
}
/* Header controls and balance plaque are intentionally removed until the Atlantis redesign. */
.slotHeader{display:none}
.reelFrame .reels,.reelFrame .reelGlass{
  position:absolute;left:var(--window-left);top:var(--window-top);right:auto;bottom:auto;
  width:var(--window-width);height:var(--window-height);
}
.reelFrame .reels{
  /* The outer windows are slightly narrower than the three middle windows. */
  grid-template-columns:minmax(0,232fr) minmax(0,242fr) minmax(0,240fr) minmax(0,242fr) minmax(0,234fr);
  /* A slim glass frame stays behind the reels and all symbol effects. */
  gap:0;padding:0;border:2px solid rgba(120,245,238,.82);border-radius:18px;
  outline:1px solid rgba(255,215,126,.72);outline-offset:3px;
  background:linear-gradient(180deg,rgba(5,73,94,.34),rgba(1,20,36,.42));
  box-shadow:inset 0 0 0 1px rgba(213,255,252,.22),inset 0 0 28px rgba(22,186,213,.18),0 0 18px rgba(55,225,234,.3),0 0 0 6px rgba(1,26,43,.72);
  perspective:none;
}
.reelFrame .reel{
  --reel-tilt:0deg;
  min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));padding:0;
  border:0;border-radius:0;
  box-shadow:inset 0 0 22px rgba(0,0,0,.8);
}
.reelFrame .reel:first-child{border-radius:15px 0 0 15px}
.reelFrame .reel:last-child{border-radius:0 15px 15px 0}
.reelFrame .reel+.reel{border-left:1px solid rgba(255,219,135,.58);box-shadow:inset 1px 0 rgba(137,255,247,.25),inset 0 0 22px rgba(0,0,0,.8)}
.slotStage .reelFrame .cell{min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:auto}
/* Keep every Atlantis illustration prominent, with an even inset from the frame dividers. */
.slotStage .reelFrame .cell .symImg{width:78%;height:78%}
/* The seahorse artwork is portrait-shaped, so it needs a smaller reel fit. */
.slotStage .reelFrame .cell[data-id="seven"] .symImg{width:64%;height:64%}
.reelFrame .reelGlass{border-radius:4%;box-shadow:inset 0 12px 20px rgba(0,0,0,.28)}
.glassSpinBtn,.glassSideBtn,.glassMenuBtn,.glassUtilityBtn{
  position:absolute;z-index:14;aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid rgba(224,255,255,.72);
  border-radius:50%;overflow:hidden;cursor:pointer;color:rgba(239,255,255,.94);
  background:linear-gradient(145deg,rgba(214,251,255,.24),rgba(32,142,184,.13));
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.48),inset 0 -8px 18px rgba(1,57,101,.14),0 7px 20px rgba(0,27,63,.3);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.glassSpinBtn{right:calc(-1 * var(--glass-spin-size) - 10px);top:50%;width:var(--glass-spin-size);transform:translateY(-50%)}
.glassSpinBtn::after,.glassSideBtn::after,.glassMenuBtn::after,.glassUtilityBtn::after{content:"";position:absolute;left:18%;right:18%;top:10%;height:30%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);pointer-events:none}
.glassSpinIcon{position:relative;z-index:1;width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,38,67,.42))}
.glassSideBtn{right:calc(-1 * var(--glass-side-size) - 28px);width:var(--glass-side-size);align-content:center;gap:1px}
.glassMenuBtn{left:calc(-1 * var(--glass-side-size) - 28px);top:50%;width:var(--glass-side-size);transform:translateY(-50%)}
.glassUtilityMenu{
  position:absolute;z-index:14;left:calc(-1 * var(--glass-side-size) - 28px);bottom:calc(50% + var(--glass-menu-offset));
  display:grid;width:var(--glass-side-size);gap:8px;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(12px) scale(.94);transform-origin:center bottom;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.glassUtilityMenu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.glassUtilityBtn{position:relative;width:100%;font:800 clamp(17px,1.45vw,23px)/1 Georgia,serif}
.glassLanguageBtn{font:800 clamp(10px,.8vw,13px)/1 "Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:.03em}
.glassTurboBtn{top:auto;bottom:calc(50% + var(--glass-control-offset))}.glassAutoBtn{top:calc(50% + var(--glass-control-offset));grid-template-rows:60% auto;gap:0}
.glassMenuIcon{position:relative;z-index:1;width:48%;height:62%;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(0,38,67,.42))}
.glassTurboIcon{position:relative;z-index:1;width:45%;height:58%;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(0,38,67,.42))}
.glassAutoIcon{position:relative;z-index:1;align-self:end;width:58%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,38,67,.42))}
.glassAutoLabel{align-self:start;margin-top:-2px}
.glassAutoLabel.counting{color:#fff0a8;font:900 clamp(14px,1.25vw,20px)/.85 Georgia,"Times New Roman",serif;letter-spacing:0;text-shadow:0 1px 0 #04547c,0 0 8px rgba(255,225,112,.85)}
.glassSideBtn span{position:relative;z-index:1;font:700 clamp(17px,1.6vw,25px)/.8 Georgia,serif}
.glassSideBtn small{position:relative;z-index:1;font:800 clamp(7px,.55vw,9px)/1 Arial,sans-serif;letter-spacing:.08em}
.glassSpinBtn:hover:not(:disabled),.glassSideBtn:hover:not(:disabled),.glassMenuBtn:hover:not(:disabled),.glassUtilityBtn:hover:not(:disabled){filter:brightness(1.12);box-shadow:inset 0 1px 1px rgba(255,255,255,.58),inset 0 -8px 18px rgba(1,57,101,.17),0 9px 24px rgba(0,39,78,.38)}
.glassSpinBtn:hover:not(:disabled),.glassMenuBtn:hover:not(:disabled){transform:translateY(-50%) scale(1.045)}
.glassSideBtn:hover:not(:disabled),.glassUtilityBtn:hover:not(:disabled){transform:scale(1.045)}
.glassSpinBtn:active:not(:disabled),.glassMenuBtn:active:not(:disabled){transform:translateY(-50%) scale(.95)}
.glassSideBtn:active:not(:disabled),.glassUtilityBtn:active:not(:disabled){transform:scale(.95)}
.glassSpinBtn:focus-visible,.glassSideBtn:focus-visible,.glassMenuBtn:focus-visible,.glassUtilityBtn:focus-visible{outline:3px solid #fff4b0;outline-offset:4px}
.glassSpinBtn:disabled,.glassSideBtn:disabled,.glassMenuBtn:disabled,.glassUtilityBtn:disabled{cursor:default;opacity:.48;filter:saturate(.65)}
.glassSideBtn.active,.glassMenuBtn.active,.glassUtilityBtn.active{color:#fff7bd;border-color:rgba(255,241,157,.9);background:linear-gradient(145deg,rgba(255,245,177,.28),rgba(32,142,184,.16));box-shadow:inset 0 1px 1px rgba(255,255,255,.62),0 0 17px rgba(102,235,255,.48)}
.glassSpinBtn.freeSpinActive{overflow:visible;border:2px solid #78efff;background:radial-gradient(circle at 38% 22%,rgba(255,255,255,.32),transparent 16%),radial-gradient(circle at 50% 53%,#087db1 0 46%,#03436f 72%,#011c3d 100%);box-shadow:inset 0 0 0 3px #07537d,inset 0 0 0 5px rgba(102,235,255,.56),inset 0 0 22px rgba(175,250,255,.26),0 0 0 2px #05618c,0 0 15px rgba(65,220,255,.72),0 0 28px rgba(119,238,255,.38);animation:freeSpinButtonPulse 1.8s ease-in-out infinite}
.glassSpinBtn.freeSpinActive::after{left:16%;right:16%;top:12%;height:26%;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.freeSpinOrbit{position:absolute;z-index:1;inset:-13%;display:grid;place-items:center;color:#b8f9ff;font:900 calc(var(--glass-spin-size) * .9)/1 Georgia,serif;transform:rotate(-8deg);text-shadow:0 2px 0 #07537d,0 0 8px #38dfff,0 0 16px rgba(146,249,255,.85);pointer-events:none}
.freeSpinCount{position:relative;z-index:2;display:block;margin-top:-9%;color:#f2ffff;font:900 calc(var(--glass-spin-size) * .36)/1 Georgia,serif;text-shadow:0 2px 0 #07537d,0 0 10px #38dfff,0 0 18px rgba(175,250,255,.9)}
@keyframes freeSpinButtonPulse{50%{filter:brightness(1.14);box-shadow:inset 0 0 0 3px #07537d,inset 0 0 0 5px rgba(136,244,255,.78),inset 0 0 28px rgba(182,252,255,.4),0 0 0 2px #05618c,0 0 21px rgba(65,220,255,.85),0 0 36px rgba(119,238,255,.52)}}
.slotReadouts{
  position:relative;z-index:15;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(82%,860px);margin:-8px auto 0;gap:10px;
}
.slotReadout{
  min-width:0;padding:10px 18px;border:1px solid rgba(224,255,255,.62);border-radius:16px;
  text-align:center;background:linear-gradient(145deg,rgba(214,251,255,.2),rgba(15,94,138,.18));
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -9px 20px rgba(1,43,80,.18),0 7px 20px rgba(0,27,63,.26);
}
.slotBetReadout{
  appearance:none;font:inherit;cursor:pointer;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.slotBetReadout:hover:not(:disabled){
  transform:translateY(-2px);filter:brightness(1.12);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -9px 20px rgba(1,43,80,.18),0 10px 24px rgba(0,39,78,.36);
}
.slotBetReadout:active:not(:disabled){transform:translateY(0) scale(.98)}
.slotBetReadout:focus-visible{outline:3px solid #aaf6ff;outline-offset:3px}
.slotBetReadout:disabled{cursor:default;opacity:.58}
.slotReadout span{display:block;margin-bottom:3px;color:rgba(225,252,255,.78);font:800 clamp(9px,.7vw,12px)/1.1 "Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.slotReadout b{display:block;overflow:hidden;color:#fff4bd;font:900 clamp(18px,1.7vw,27px)/1.1 Georgia,"Times New Roman",serif;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 5px rgba(0,41,76,.65)}
.slotWinReadout b{color:#fff4bd}
.slotBalanceReadout{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 12% 0,rgba(121,239,255,.2),transparent 48%),linear-gradient(145deg,rgba(18,126,157,.25),rgba(5,56,99,.3));
}
.slotBalanceReadout::after{
  content:"";position:absolute;inset:auto -18% -70% 18%;height:120%;border-radius:50%;
  background:radial-gradient(circle,rgba(106,232,255,.14),transparent 66%);pointer-events:none;
}
.slotBalanceReadout .slotBalanceLabel{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;
}
.slotBalanceLabelText{display:inline!important;margin:0!important}
.slotWalletIcon{
  width:16px;height:16px;overflow:visible;fill:none;stroke:#a9f4ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(95,230,255,.55));
}
.slotBalanceReadout b{position:relative;z-index:1;color:#fff4bd;text-shadow:0 2px 5px rgba(0,41,76,.65),0 0 14px rgba(242,200,109,.28)}
.slotStage .reelFrame.winPulse{animation:rubyFramePulse .7s ease}
@keyframes rubyFramePulse{
  50%{filter:drop-shadow(0 0 12px rgba(255,36,86,.55))}
}

/* Temporarily keep the character out of view without changing the stage layout. */
.reaperStage .characterWrap{visibility:hidden}

/* Let the skull crest remain fully visible beneath the localized title. */
.slotStage .cabinetTitle{width:100%;padding:0 8px 6px;pointer-events:none}
.slotStage .cabinetTitle .gameTitle{
  font-family:"Noto Serif KR","Batang",Georgia,serif;
  font-size:clamp(26px,3vw,46px);line-height:1.15;
  background:linear-gradient(180deg,#fff4c2 0,#ffc35f 32%,#b85234 62%,#ffd77b 82%,#6b271a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #2a0d0f);text-wrap:balance;
}
html[lang="en"] .slotStage .cabinetTitle .gameTitle{font-size:clamp(24px,2.65vw,42px)}

/* Give the full-width artwork real gutters instead of overlapping its neighbours. */
@media (min-width:1181px) and (pointer:fine), (min-width:1367px){
  /* Reserve vertical room for the header and the cabinet status text. */
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 220px)*1.7265))}
  .slotMachine{
    --fluid-layout:1;
    --deck-width:min(1020px,calc(100vw - 40px),calc((100dvh - 100px) * 1.4));
    --scene-reel-height:max(160px,calc(100dvh - var(--deck-width) * .239631 - 226px));
    --character-width:clamp(210px,20vw,330px);
    --ledger-width:clamp(168px,12vw,210px);
    --stage-gap:clamp(10px,1.5vw,32px);
    position:relative;left:auto;top:auto;transform:none;
    width:min(100%,1920px);height:100dvh;min-height:0;margin:0 auto;
    padding:10px 20px;grid-template-rows:repeat(4,auto);align-content:center;row-gap:8px;
  }
  .slotHeader{
    width:100%;max-width:none;min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"actions balance";
  }
  .headerActions{padding:6px;gap:8px}
  .headerActions .iconBtn{width:44px;height:44px}
  .balancePlaque{min-width:210px;min-height:60px;padding:6px 10px;grid-template-columns:42px 1fr}
  .balancePlaque img{width:40px;height:40px}
  .balancePlaque b{font-size:24px}
  .slotStage{
    position:relative;
    width:min(100%,calc(var(--scene-reel-height) * 2.33744));
    grid-template-columns:minmax(0,1fr);
    gap:var(--stage-gap);
  }
  /* The character is an independent left-side layer, never part of the cabinet layout. */
  .slotStage .reaperStage{
    display:block;position:absolute;z-index:4;right:calc(100% + clamp(8px,1vw,24px));bottom:0;
    width:clamp(190px,17vw,330px);height:min(64vh,650px);
  }
  .slotStage .reaperStage .characterWrap{visibility:visible}
  .slotStage .cabinet{gap:3px}
  .slotStage .cabinetTitle{padding:0 4px 2px}
  .slotStage .cabinetTitle .gameTitle,
  html[lang="en"] .slotStage .cabinetTitle .gameTitle{font-size:clamp(26px,2.2vw,38px);line-height:1.05}
  .slotStage .paylineHint{padding:2px 4px;font-size:11px;line-height:1.25;letter-spacing:.02em}
  .slotStage .message{min-height:0;padding:0 4px 2px}
  .slotStage .message .main{font-size:18px;line-height:1.2}
  .slotStage .message .sub{font-size:11px;line-height:1.2;margin-top:2px}
  .reaperStage .characterWrap{
    /* Leave room for the attack animation's forward step and rotation. */
    inset:auto 12px 0 auto;width:calc(100% - 12px);max-width:100%;max-height:100%;
    height:min(100%,700px);transform-origin:50% 90%;
  }
  .reaperStage .character{object-position:center bottom}
  .slotStage .recentPanel{
    position:absolute;left:calc(-1 * (var(--ledger-width) + var(--stage-gap)));top:50%;width:var(--ledger-width);min-width:0;
    margin-left:0;transform:translateY(-50%);
  }
  .controlDeck{margin-top:0}
}

@media (max-width:1180px), (pointer:coarse) and (max-width:1366px){
  .slotStage{padding-top:0}
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 160px)*1.7265))}
  .slotStage .cabinetTitle .gameTitle{font-size:clamp(23px,4vw,36px)}
  html[lang="en"] .slotStage .cabinetTitle .gameTitle{font-size:clamp(21px,3.5vw,33px)}
  .slotStage .reelFrame{--glass-spin-size:clamp(76px,9vw,94px);--glass-side-size:clamp(54px,6.5vw,66px);--glass-control-offset:clamp(46px,calc(4.5vw + 8px),55px);--glass-menu-offset:clamp(34px,calc(3.25vw + 7px),40px)}
  .glassSpinBtn{right:max(10px,env(safe-area-inset-right))}
  .glassSideBtn{right:max(22px,calc(env(safe-area-inset-right) + 12px))}
  .glassMenuBtn{left:max(22px,calc(env(safe-area-inset-left) + 12px))}
  .glassUtilityMenu{left:max(22px,calc(env(safe-area-inset-left) + 12px))}
}
@media (max-width:720px){
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 130px)*1.7265),580px)}
  .slotStage .cabinetTitle .gameTitle{font-size:clamp(21px,5.4vw,30px)}
  html[lang="en"] .slotStage .cabinetTitle .gameTitle{font-size:clamp(18px,4.4vw,26px)}
  .slotStage{padding-bottom:96px}
  .slotStage .reelFrame{--glass-spin-size:clamp(64px,18vw,78px);--glass-side-size:clamp(48px,13vw,56px);--glass-menu-offset:clamp(31px,calc(6.5vw + 7px),35px)}
  .glassSpinBtn{right:50%;top:auto;bottom:calc(-1 * var(--glass-spin-size) - 12px);transform:translateX(50%)}
  .glassSideBtn{top:auto;right:auto;bottom:-76px;transform:translateX(-50%)}
  .glassTurboBtn{left:calc(50% - 82px)}.glassAutoBtn{left:calc(50% + 82px)}
  .glassSpinBtn:hover:not(:disabled){transform:translateX(50%) scale(1.045)}
  .glassSpinBtn:active:not(:disabled){transform:translateX(50%) scale(.95)}
  .glassSideBtn:hover:not(:disabled){transform:translateX(-50%) scale(1.045)}
  .glassSideBtn:active:not(:disabled){transform:translateX(-50%) scale(.95)}
  .slotReadouts{width:min(96%,560px);margin-top:86px;gap:7px}
  .slotReadout{padding:8px 10px;border-radius:13px}
  .slotWalletIcon{width:14px;height:14px}
}
@media (max-width:380px){
  .slotStage{padding-bottom:82px}
  .slotStage .reelFrame{--glass-spin-size:62px;--glass-side-size:46px}
  .glassSpinBtn{bottom:-72px}
  .glassSideBtn{bottom:-67px}
  .glassTurboBtn{left:calc(50% - 67px)}.glassAutoBtn{left:calc(50% + 67px)}
  .slotReadouts{width:100%;gap:5px}
  .slotReadout{padding:7px 5px}
  .slotReadout span{font-size:8px;letter-spacing:.08em}
  .slotReadout b{font-size:clamp(15px,4.5vw,18px)}
  .slotWalletIcon{display:none}
}
@media (max-width:720px) and (max-height:700px) and (orientation:portrait){
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 180px)*1.7265))}
}
@media (max-height:600px) and (orientation:landscape) and (max-width:1180px),
       (max-height:600px) and (orientation:landscape) and (pointer:coarse) and (max-width:1366px){
  .slotStage .reelFrame{width:min(100%,calc((100dvh - 80px)*1.7265))}
  .slotStage .cabinetTitle .gameTitle,
  html[lang="en"] .slotStage .cabinetTitle .gameTitle{font-size:22px}
  .slotStage{padding-bottom:0}
  .slotStage .reelFrame{--glass-spin-size:clamp(60px,12vh,72px);--glass-side-size:clamp(44px,8.5vh,54px);--glass-control-offset:clamp(37px,calc(6vh + 7px),43px);--glass-menu-offset:clamp(28px,calc(4.25vh + 6px),33px)}
  .glassSpinBtn{right:max(8px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%)}
  .glassSideBtn{left:auto;right:max(17px,calc(env(safe-area-inset-right) + 9px));bottom:auto;transform:none}
  .glassMenuBtn{left:max(17px,calc(env(safe-area-inset-left) + 9px))}
  .glassUtilityMenu{left:max(17px,calc(env(safe-area-inset-left) + 9px))}
  .glassTurboBtn{top:auto;bottom:calc(50% + var(--glass-control-offset))}.glassAutoBtn{top:calc(50% + var(--glass-control-offset));bottom:auto}
  .glassSpinBtn:hover:not(:disabled){transform:translateY(-50%) scale(1.045)}
  .glassSpinBtn:active:not(:disabled){transform:translateY(-50%) scale(.95)}
  .glassSideBtn:hover:not(:disabled){transform:scale(1.045)}
  .glassSideBtn:active:not(:disabled){transform:scale(.95)}
  .slotReadouts{margin-top:-6px}
}

/* Match Soul Hunter's portrait-phone composition: utilities above the frame,
   action controls directly below it, and the three readouts near the bottom. */
@media (max-width:720px) and (orientation:portrait){
  .slotStage{
    justify-content:flex-start;
    padding-top:clamp(105px,calc(100dvh - 605px),260px);
    padding-bottom:0;
  }
  .glassMenuBtn{
    left:8%;right:auto;top:-8px;bottom:auto;
    transform:translate(-50%,-100%);
  }
  .glassMenuBtn:hover:not(:disabled){transform:translate(-50%,-100%) scale(1.045)}
  .glassMenuBtn:active:not(:disabled){transform:translate(-50%,-100%) scale(.95)}
  .glassUtilityMenu{
    left:calc(8% + var(--glass-side-size) / 2 + 10px);right:auto;top:-8px;bottom:auto;
    width:max-content;grid-auto-flow:column;grid-auto-columns:44px;align-items:end;
    transform:translate(-8px,-100%) scale(.94);transform-origin:left bottom;
  }
  .glassUtilityMenu.open{transform:translateY(-100%)}
  .glassUtilityBtn{width:44px;height:44px;min-width:44px;min-height:44px}
  .slotReadouts{width:min(92%,430px);margin-top:136px;gap:7px}
}
.glassHistoryBtn svg{position:relative;z-index:1;width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.glassSoundBtn .soundIcon,.iconBtn#soundBtn .soundIcon{position:relative;z-index:1;width:56%;height:56%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,36,58,.72))}
.glassSoundBtn .soundSpeaker,.iconBtn#soundBtn .soundSpeaker{fill:currentColor;fill-opacity:.12}
.glassSoundBtn .soundMute,.iconBtn#soundBtn .soundMute{display:none}
.glassSoundBtn.muted .soundWaves,.iconBtn#soundBtn.muted .soundWaves{display:none}
.glassSoundBtn.muted .soundMute,.iconBtn#soundBtn.muted .soundMute{display:block}
@media (min-width:1181px) and (max-height:1000px){
  .glassUtilityMenu{transform:translateY(12px) scale(.78);transform-origin:center bottom}
  .glassUtilityMenu.open{transform:scale(.78)}
}