/* One enamel casting, raised mechanical controls, recessed instrument windows. */
.antique-cabinet .console{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(140px,1.3fr) minmax(0,1fr);gap:14px;align-items:center;
  padding:32px 18px 30px;position:relative;isolation:isolate;
  border:6px ridge #b99a5c;border-radius:0 0 32px 32px;
  background:radial-gradient(ellipse at 50% 0,#9d3b4650,transparent 65%),repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(105deg,#200810,#571326 43%,#390c18 75%,#17080e);
  box-shadow:inset 0 3px 0 #f4c88733,inset 0 0 0 3px #301913,inset 0 0 28px #000b,0 7px 13px #0008;
}
.antique-cabinet .console:before,.antique-cabinet .console:after{top:10px;width:11px;height:11px;box-shadow:0 1px 2px #000,inset 0 0 0 1px #ebd39588}
.antique-cabinet .console:before{left:10px}.antique-cabinet .console:after{right:10px}
.antique-cabinet .console .meter,.antique-cabinet .console .wager{min-width:0;padding:12px 0;background:none;border:0;border-radius:0;box-shadow:none;text-align:center}
.antique-cabinet .console label{display:block;font:700 10px Georgia,serif;letter-spacing:1.8px;color:#efd9a5;text-shadow:0 1px 1px #000;margin:0 0 14px}
.antique-cabinet .console small{font:8px Georgia,serif;color:#c8ac7e;letter-spacing:1px;margin-top:14px}
.antique-cabinet .console .meter:before{content:'❧';display:block;color:#c5a565;font:24px/1 Georgia;margin-bottom:8px;text-shadow:0 1px #080604}
.antique-cabinet .counter-window{position:relative;display:inline-grid;align-items:center;justify-content:center;max-width:100%;padding:8px 7px;min-height:52px;border:5px ridge #bda369;border-radius:50% / 18%;background:#080b09;box-shadow:0 0 0 2px #402a18,0 0 0 3px #be9c5955,0 4px 6px #000a,inset 0 7px 8px #000;overflow:hidden;vertical-align:middle}
.counter-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,#fff2,transparent 35%,transparent 60%,#fff1 61%,transparent 68%);box-shadow:inset 0 4px 6px #000b,inset 0 -3px 6px #0009}
.console .counter-window>strong{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.mechanical-digits{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.number-drum,.meter-separator{display:block;position:relative;height:30px;font:700 clamp(17px,1.75vw,25px)/30px 'Courier New',monospace;color:#f5e5c0;text-shadow:0 1px 1px #000;overflow:hidden}
.number-drum{width:.67em;background:linear-gradient(#080907,#33322a 46%,#131510 49%,#060706 52%,#282b20 75%,#10110d);border-right:1px solid #000;border-left:1px solid #ffffff0d}
.number-drum>span{display:block}.number-drum .outgoing-digit{position:absolute;inset:0}
.meter-separator{width:.3em;font-size:18px}
.antique-cabinet .console .wager>div{gap:6px;display:flex;justify-content:center;align-items:center}
.antique-cabinet .wager .counter-window{padding:6px 3px;min-width:45px;min-height:49px;border-width:4px;border-radius:8%}
body .antique-cabinet .console .wager button{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:4px ridge #d4b578;background:radial-gradient(circle at 35% 20%,#fff0bc,#c2a061 42%,#83602d 78%,#e2c589);color:#483012;font:700 28px Georgia;text-shadow:0 1px #fff5c4;box-shadow:inset 0 1px 2px #fff9,inset 0 -3px 4px #65431f,0 5px 0 #553c22,0 7px 5px #000b;touch-action:manipulation;transition:transform .09s,box-shadow .09s}
body .antique-cabinet .console #spin{justify-self:center;width:150px;height:150px;aspect-ratio:1;border-radius:50%;padding:0 9px;border:12px ridge #d6b36d;background:radial-gradient(ellipse at 35% 20%,#fa8880 0,#c93342 18%,#8c0b25 52%,#460918 82%);color:#ffedbc;font:900 29px Georgia,serif;letter-spacing:2px;text-shadow:0 2px 2px #440008;box-shadow:0 0 0 2px #50321b,0 0 0 5px #c2a069,0 0 0 7px #422b1a,inset 0 3px 4px #ffd4ac99,inset 0 -8px 10px #34020ec9,0 9px 0 5px #563720,0 14px 0 4px #241812,0 19px 15px #000b,0 0 22px #dc334b22;touch-action:manipulation;transition:transform .09s,box-shadow .09s;filter:none}
body .antique-cabinet .console #spin span{font:8px/1.5 Georgia,serif;letter-spacing:.8px;margin-top:8px;color:#ffe8b6}
body .antique-cabinet .console #spin:hover{background:radial-gradient(ellipse at 35% 20%,#ffb1a0,#dd3b4a 22%,#960e2c 55%,#500b1c 85%);filter:none}
body .antique-cabinet .console #spin:active:not(:disabled),body .antique-cabinet .console #spin.mechanically-pressed:not(:disabled){transform:translateY(7px);box-shadow:0 0 0 2px #50321b,0 0 0 5px #c2a069,0 0 0 7px #422b1a,inset 0 5px 10px #42061399,0 2px 0 5px #563720,0 6px 0 4px #241812,0 9px 10px #000b}
body .antique-cabinet .console .wager button:active:not(:disabled),body .antique-cabinet .console .wager button.mechanically-pressed:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px 4px #68451f88,0 1px 0 #553c22,0 3px 3px #000a}
body .antique-cabinet .console button:disabled{opacity:.65;filter:saturate(.5)}
.antique-cabinet .console .win-meter{display:block;grid-column:auto}
@media(max-width:760px){.antique-cabinet .console{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px 14px;padding:22px 12px 26px}.antique-cabinet .console .meter{grid-column:1;grid-row:1}.antique-cabinet .console .wager{grid-column:1;grid-row:2}.antique-cabinet .console #spin{grid-column:2;grid-row:1/3;width:clamp(120px,30vw,160px);height:auto;min-height:120px;align-self:center}.antique-cabinet .console .win-meter{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:center;gap:14px;padding:0}.antique-cabinet .console .win-meter:before{display:none}.antique-cabinet .console .win-meter label{margin:0}.antique-cabinet .console .win-meter small{display:none}.number-drum{font-size:22px}.antique-cabinet .console .wager>div{gap:8px}.antique-cabinet .console .meter:before{font-size:20px;margin-bottom:4px}.antique-cabinet .console label{font-size:9px;letter-spacing:1px;margin-bottom:10px}.antique-cabinet .console small{font-size:7px;letter-spacing:.5px;margin-top:10px}}
@media(max-width:380px){.antique-cabinet .console{gap:16px 8px;padding:22px 6px}.antique-cabinet .console #spin{width:120px;font-size:23px;border-width:10px}.antique-cabinet .console .wager>div{gap:4px}.antique-cabinet .counter-window{padding:7px 3px}.number-drum{font-size:19px}}
@media(prefers-reduced-motion:reduce){.console button{transition:none!important}}

@media(max-width:380px){.antique-cabinet .console{grid-template-columns:repeat(2,minmax(0,1fr));padding:22px 9px;gap:20px 8px}.antique-cabinet .console .meter{grid-column:1;grid-row:1}.antique-cabinet .console .win-meter{grid-column:2;grid-row:1;display:block;padding:12px 0}.antique-cabinet .console .win-meter:before{display:block}.antique-cabinet .console .win-meter label{margin-bottom:10px}.antique-cabinet .console .win-meter small{display:block}.antique-cabinet .console #spin{grid-column:1/-1;grid-row:2;width:140px;height:140px;margin:6px 0 12px}.antique-cabinet .console .wager{grid-column:1/-1;grid-row:3}.antique-cabinet .console .wager>div{gap:16px}.antique-cabinet .console .counter-window{max-width:100%}.antique-cabinet .console label{font-size:8px;letter-spacing:.5px}}

/* Phone portrait: size the cabinet to Safari's live content viewport. */
@media(max-width:600px) and (orientation:portrait){
  html{min-height:100%;background:var(--casino-bg)}
  body{min-height:100dvh}
  body>main{height:100dvh;min-height:0;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));display:grid;grid-template-rows:44px minmax(0,1fr) 16px;gap:3px}
  main>header{height:44px;min-height:0;padding:0;gap:5px;flex-wrap:nowrap}
  header .wordmark{font-size:20px;gap:0}header .wordmark span{display:none}
  header #sound{min-height:44px;padding:5px 8px;font-size:10px}
  header #themeToggle{min-height:44px;padding:5px 7px;font-size:9px;letter-spacing:0}
  main>.title,main>.features{display:none}
  main>.saloon{width:100%;max-width:100%;min-height:0;margin:30px 0 0;display:block}
  .saloon>.antique-cabinet{height:100%;min-height:0;margin:0;padding:9px 14px 6px;display:grid;grid-template-rows:22px minmax(0,1fr) 24px auto 44px;gap:3px;border-radius:24px 24px 18px 18px}
  .cabinet-crown{top:-31px;height:40px;width:138px;border-radius:35px 35px 4px 4px;gap:0}
  .cabinet-crown span,.cabinet-crown i{display:none}.cabinet-crown b{font-size:10px;margin:0}
  .antique-cabinet:before,.antique-cabinet:after{top:24px;bottom:18px}
  .antique-cabinet .machine-top{padding:3px 5px;font-size:8px;border-width:2px;letter-spacing:.5px}
  .antique-cabinet .reel-frame{min-height:0;margin:2px 0;padding:3px;outline-offset:1px}
  .reel-frame .reels{height:100%;padding:2px;gap:2px;min-height:0}
  .reel-frame .reel{min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:2px}
  .reel-frame .symbol{height:100%;min-height:0}
  .antique-cabinet .status{min-height:0;padding:3px 4px;font-size:10px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .antique-cabinet .console{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px 112px 44px;gap:3px 8px;padding:5px 8px 7px;border-width:4px;border-radius:0 0 24px 24px}
  .antique-cabinet .console:before,.antique-cabinet .console:after{top:5px;width:7px;height:7px}
  .antique-cabinet .console .meter,.antique-cabinet .console .win-meter{grid-row:1;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .antique-cabinet .console .meter{grid-column:1}.antique-cabinet .console .win-meter{grid-column:2}
  .antique-cabinet .console .meter:before,.antique-cabinet .console .meter small{display:none}
  .antique-cabinet .console label,.antique-cabinet .console .win-meter label{font-size:9px;letter-spacing:.5px;margin:0;line-height:11px}
  .antique-cabinet .counter-window{padding:2px 5px;min-height:30px;border-width:3px}
  .console .number-drum,.console .meter-separator{height:22px;line-height:22px;font-size:20px}
  body .antique-cabinet .console #spin{grid-row:2;grid-column:1/-1;width:100px;height:100px;min-height:100px;margin:0 0 8px;border-width:9px;font-size:23px;letter-spacing:1px}
  body .antique-cabinet .console #spin span{font-size:7px;letter-spacing:0;margin-top:4px}
  .antique-cabinet .console .wager{grid-row:3;grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0}
  .antique-cabinet .console .wager>div{gap:12px}
  .antique-cabinet .console .wager label{max-width:46px;line-height:13px}
  .antique-cabinet .console .wager small{display:none}
  .antique-cabinet .wager .counter-window{min-height:34px;padding:3px;border-width:3px}
  body .antique-cabinet .console .wager button{width:44px;height:44px;flex-basis:44px}
  .antique-cabinet .machine-bottom{margin:0;padding:0;gap:2px;flex-wrap:nowrap;border-bottom-width:2px}
  .antique-cabinet .machine-bottom button,.antique-cabinet .machine-bottom .skip{min-height:44px;min-width:0;flex:1;display:flex;align-items:center;justify-content:center;padding:2px;font-size:9px;letter-spacing:0}
  .machine-bottom .speed span{font-size:7px}.machine-bottom .skip{gap:2px}.machine-bottom .skip input{margin:0;width:15px;height:15px;flex-shrink:0}
  main>footer{margin:0;padding:0;border:0;font-size:6px;letter-spacing:0;line-height:8px;gap:3px}
  footer #devToggle{padding:0 3px;font-size:7px;min-height:16px}
  main>#dev:not([hidden]){position:fixed;inset:48px 8px auto;z-index:30;max-height:70dvh;overflow:auto}
  .luna-announcement:not([hidden]){position:absolute;z-index:8;left:14px;right:14px;top:30px;padding:6px;box-shadow:0 4px 12px #000a}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:560px){
  main>.saloon{margin-top:20px}
  .saloon>.antique-cabinet{padding-top:4px;padding-bottom:3px;grid-template-rows:18px minmax(0,1fr) 18px auto 44px;gap:2px}
  .cabinet-crown{top:-22px;height:27px}
  .antique-cabinet .machine-top{padding:1px 4px}
  .antique-cabinet .status{padding:1px 3px;line-height:14px;font-size:9px}
  .antique-cabinet .console{grid-template-rows:40px 92px 44px;gap:2px 8px;padding:2px 8px 4px;border-width:3px}
  .antique-cabinet .console label{font-size:8px;line-height:9px}
  .antique-cabinet .counter-window{min-height:27px;padding:1px 4px}
  .console .number-drum,.console .meter-separator{height:20px;line-height:20px;font-size:18px}
  body .antique-cabinet .console #spin{width:84px;height:84px;min-height:84px;border-width:8px;font-size:20px}
  body .antique-cabinet .console #spin span{font-size:6px}
}
/* Prioritize the reel artwork over the phone control panel. */
@media(max-width:600px) and (orientation:portrait){
  .antique-cabinet .console{grid-template-columns:92px minmax(0,1fr);grid-template-rows:38px 90px;gap:2px 8px;padding:4px 8px 8px}
  .antique-cabinet .console .meter{grid-column:1;grid-row:1}
  .antique-cabinet .console .win-meter{grid-column:2;grid-row:1}
  body .antique-cabinet .console #spin{grid-column:1;grid-row:2;width:76px;height:76px;min-height:76px;border-width:7px;font-size:19px;margin:0 0 7px}
  body .antique-cabinet .console #spin span{font-size:6px;margin-top:3px}
  .antique-cabinet .console .wager{grid-column:2;grid-row:2;flex-direction:column;gap:6px;align-self:center}
  .antique-cabinet .console .wager label{max-width:none;line-height:11px}
  .antique-cabinet .console .wager>div{gap:6px}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:560px){
  .antique-cabinet .console{grid-template-rows:36px 82px;padding:3px 7px 6px;gap:2px 7px}
  body .antique-cabinet .console #spin{width:70px;height:70px;min-height:70px;font-size:18px}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:560px){.antique-cabinet .console{grid-template-rows:36px 78px}}
@media(max-width:600px) and (orientation:portrait){.antique-cabinet .console .meter label{white-space:nowrap;font-size:8px;letter-spacing:0}}
/* Keep both SPIN and STOP comfortably inside the mobile enamel face. */
@media(max-width:760px){body .antique-cabinet .console #spin{font-size:20px;letter-spacing:0;padding:0 3px;line-height:1.1}}
@media(max-width:600px) and (orientation:portrait){body .antique-cabinet .console #spin{font-size:17px}body .antique-cabinet .console #spin span{letter-spacing:0}}
@media(max-width:600px) and (orientation:portrait) and (max-height:560px){body .antique-cabinet .console #spin{font-size:16px}}