/* A viewport-sized scene; below the usable minimum it can scroll naturally. */
.site-wrap { padding:0 28px; }
main { min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:24px; padding:24px 0 14px; }
.arcade { min-height:0; padding:0 0 12px; }
.arcade-footer { display:flex; align-items:center; justify-content:center; gap:18px; padding-bottom:env(safe-area-inset-bottom); }
.social-icons { padding:0; }
.screen-tools { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.sound-toggle { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #726263; border-radius:4px; background:#302b2c; color:var(--paper); cursor:pointer; }
.sound-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sound-toggle[aria-pressed='true'] { color:var(--pink); border-color:var(--pink); background:#3b2b30; }
.sound-toggle[aria-pressed='true'] .sound-slash,.sound-toggle:not([aria-pressed='true']) .sound-waves { display:none; }
.sound-toggle:active { transform:translateY(2px); }
.sound-toggle:focus-visible { outline-color:var(--paper); outline-offset:3px; }
.reel-viewport { height:clamp(208px,calc(100svh - 540px),360px); }
.cabinet-plinth { min-height:64px; padding:7px 25px 10px; }
.coin-door { height:44px; }
.cabinet-fall { position:relative; width:100%; transform-style:preserve-3d; transform-origin:50% 50%; }
.fallen-play { display:none; min-height:48px; padding:7px 13px; border:2px solid #70394a; border-radius:5px; color:var(--ink); background:var(--pink); box-shadow:0 3px 0 #8e4c64; }
.fallen-play span { display:flex; flex-direction:column; gap:3px; }
.fallen-play small { font-size:9px; }
.fallen-play strong { font-size:12px; }
.fallen-play:active { transform:translateY(3px); box-shadow:none; }
.broken-glass { position:absolute; inset:0; width:100%; height:100%; z-index:3; opacity:0; pointer-events:none; filter:drop-shadow(0 1px 1px #1119); }
.fracture-lines { fill:none; stroke:#fff8e6; stroke-width:1.2; stroke-linejoin:bevel; opacity:.85; }
.fracture-lines path { vector-effect:non-scaling-stroke; }
.glass-shard { fill:#fff9df; stroke:#fff; stroke-width:.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.glass-broken .broken-glass { opacity:1; }
.glass-broken .fracture-lines { animation:fracture-appear .2s ease-out both; }
@keyframes fracture-appear { from { opacity:0; transform:scale(.96); } to { opacity:.85; transform:scale(1); } }
.gravity-caption { position:absolute; right:8px; bottom:0; margin:0; color:var(--accent); font-size:9px; font-weight:700; letter-spacing:1px; opacity:0; pointer-events:none; }
.glass-broken .gravity-caption { opacity:1; transition:opacity .2s; }

@media (min-width:768px) and (max-height:740px) {
  main { gap:18px; padding-top:16px; }
  .cabinet-plinth { min-height:54px; padding-bottom:6px; }
}
@media (max-width:767px) {
  .site-wrap { padding:0 14px; }
  main { gap:22px; padding-top:16px; }
  .reel-viewport { height:clamp(208px,calc(100svh - 458px),360px); }
  .cabinet-plinth { min-height:60px; padding:6px 15px 8px; }
  .coin-door { height:40px; }
  .screen-tools { gap:5px; }
}
@media (max-width:767px) and (max-height:740px) {
  main { gap:18px; padding-top:12px; }
  .cabinet-plinth { min-height:50px; padding-block:4px 6px; }
  .coin-door { height:36px; }
}
@media (max-width:359px) { .site-wrap { padding:0 10px; } }

/* Only a short landscape touch viewport gets the gravity gag. */
.phone-landscape .site-wrap { max-width:none; padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
.phone-landscape main { height:100svh; min-height:300px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 48px; justify-content:stretch; gap:8px; padding:10px 0 max(10px,env(safe-area-inset-bottom)); }
.phone-landscape .arcade { display:block; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; overflow:clip; }
.phone-landscape .cabinet-stage { width:100%; max-width:none; height:100%; padding:0; perspective:none; }
.phone-landscape .cabinet-stage:after { width:min(85%,620px); bottom:2px; height:17px; opacity:.2; }
.phone-landscape .cabinet-fall { position:absolute; left:50%; top:50%; width:300px; transform:translate(-50%,-50%) rotate(90deg) scale(var(--fall-scale,1)); }
.phone-landscape .cabinet-rig { animation:none; }
.phone-landscape .arcade-machine { transform:none; }
.phone-landscape .cabinet-side,.phone-landscape .cabinet-top { display:none; }
.phone-landscape .reel-viewport { height:220px; }
.phone-landscape .cabinet-plinth { min-height:50px; padding:4px 15px 6px; }
.phone-landscape .coin-door { height:36px; }
.phone-landscape .machine-marquee h1 { font-size:22px; }
.phone-landscape .marquee-star { display:none; }
.phone-landscape .arcade-footer { position:relative; z-index:2; padding:0; gap:20px; }
.phone-landscape .social-icons { gap:5px; }
.phone-landscape .fallen-play { display:flex; align-items:center; }

@media (orientation:landscape) and (max-height:600px) and (any-pointer:coarse) {
  body { overflow-x:clip; }
}