/* One surface per step: actions -> two choices -> the machine. */
.slot-battle .slot-console{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:0;padding:3px 12px 8px;overflow:visible}
.slot-console>.slot-machine-toolbar{grid-row:1;grid-column:1;width:100%;height:44px;padding:0;gap:6px}
.slot-machine-toolbar #slot-owner{flex:1;max-width:none;margin:0;font:700 16px Batang,serif;color:#ead4a2;text-align:center}
.slot-machine-toolbar #slot-timer{margin-left:auto}
.slot-console .console-back{width:44px;height:44px;padding:9px;border:1px solid #9a8054;border-radius:50%;background:radial-gradient(#33443b,#152622);color:#e7cf91;box-shadow:inset 0 0 0 3px #142321}
.slot-console[data-view=choose] .console-back,.slot-console[data-view=rolling] .console-back,.slot-console[data-view=playback] .console-back{display:none}
.slot-console:is([data-view=choose],[data-view=branch]) .slot-machine-stack{display:none}
.slot-console:is([data-view=choose],[data-view=branch]) #slot-owner{visibility:hidden}
.slot-console #slot-commands{grid-row:2;grid-column:1;align-self:center;width:100%;height:auto;max-height:none;padding:0;overflow:visible;container-type:normal}
.slot-console .slot-command-head{display:block;margin:0}
.slot-console .slot-subcategories,.slot-console .hero-choice-grid{width:min(740px,100%);margin:auto;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.slot-console .slot-category{width:min(1040px,100%);margin:auto}
.slot-console .slot-category button{min-height:100px}
/* Ornament is a separate painted layer; a generic hover cannot erase it. */
.slot-app .ornate-choice,.slot-app .ornate-choice:is(:hover,:active,[aria-pressed=true]){position:relative;isolation:isolate;min-width:0;min-height:76px;padding:16px 30px;display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;border:0!important;border-radius:0;box-shadow:none!important;color:#f1dda7;filter:none}
.ornate-choice::before{content:'';position:absolute;inset:0;background:var(--paint-plate) center/100% 152% no-repeat;z-index:-1;pointer-events:none;transition:filter .15s}
.ornate-choice:hover::before,.ornate-choice[aria-pressed=true]::before{filter:brightness(1.25) drop-shadow(0 0 3px #dfc88455)}
.slot-app .ornate-choice b{font:700 21px Batang,serif;white-space:nowrap;line-height:1.3;margin:0;text-shadow:0 2px 2px #000}
.ornate-choice>.command-art,.ornate-choice>.awakening-command-art{width:35px;height:35px;flex:none}
.slot-console:is([data-view=ready],[data-view=rolling],[data-view=playback]){grid-template-rows:44px minmax(0,1fr) auto}
.slot-console .slot-machine-stack{grid-column:1;grid-row:2;width:min(760px,100%);justify-self:center;align-self:center;overflow:visible;max-height:none}
.slot-console:is([data-view=ready],[data-view=rolling],[data-view=playback]) #slot-commands{grid-row:3;max-width:720px;justify-self:center}
.slot-console .slot-techniques{margin:3px 0 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.slot-console .hero-ready-technique{display:flex;justify-content:center}
.slot-console .skill-info{min-height:38px;padding:5px 9px;background:transparent;border:0;box-shadow:none}
.slot-console .skill-info>b{font-size:13px}.slot-console .skill-info>.command-art{width:24px;height:24px}
.slot-console .manual-controls{padding:0}.slot-console .manual-status{font-size:12px;min-height:0;margin:0}
.slot-console .manual-status:empty{display:none}
.slot-console .slot-mechanism{grid-template-columns:64px minmax(0,1fr) 64px;gap:0;min-height:180px;align-items:center}
.slot-battle .slot-console .slot-machine{padding:36px 19px 20px!important;min-height:180px;max-height:none;overflow:visible}
.slot-console .slot-reels{gap:5px}
.slot-console .slot-machine .slot-reel{min-width:0;min-height:116px!important;justify-content:center;gap:5px;padding:5px 3px}
.slot-console .slot-machine .slot-reel>b{min-height:30px;font-size:13px;line-height:1.25;display:grid;align-items:center}
.slot-console .reel-result-art,.slot-console .reel-result-art>.command-art{width:43px;height:43px}
.slot-console .slot-machine .reel-window{height:64px;min-height:64px}
.slot-console .slot-machine .reel-current-name{min-height:30px;height:auto;font-size:13px}
.slot-console .slot-machine-stack>#slot-outcome{font-size:12px;line-height:16px}
/* Only the jewel is a hit target; the shaft and jewel move independently so
   the faceted gemstone does not squash during the downward pull. */
.lever-control{position:relative;width:64px;height:190px;isolation:isolate;--pull:0}
.lever-control>img{position:absolute;bottom:0;left:50%;width:127px;height:190px;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}
.lever-shaft{clip-path:inset(27% 0 0 0);transform:translateX(-50%) scaleY(calc(1 - var(--pull)*.28));transform-origin:50% 94%;transition:transform .18s ease-out}
.lever-jewel{clip-path:inset(0 0 72% 0);transform:translate(-50%,calc(var(--pull)*44px));transition:transform .18s ease-out}
.lever-control .lever-socket{width:35px;height:20px;right:-9px;left:auto;bottom:16px}.lever-control.stop .lever-socket{right:auto;left:-9px}
.slot-app .lever-grip,.slot-app .lever-grip:hover:not(:disabled),.slot-app .lever-grip:active{position:absolute;left:5px;top:0;width:54px;height:55px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%;touch-action:none;user-select:none;cursor:grab;transform:translateY(calc(var(--pull)*44px));transition:transform .18s ease-out}
.slot-app .lever-grip:disabled{opacity:1;cursor:default}
.lever-control:not(.armed)>img{filter:brightness(.58) saturate(.65)}
.lever-control.armed .lever-jewel{filter:drop-shadow(0 0 6px #5ebdef)}
.lever-control.stop.armed .lever-jewel{filter:drop-shadow(0 0 5px #cf8337)}
.lever-control.pulling>*{transition:none}.lever-control.pulling .lever-grip{cursor:grabbing}
.workshop-form-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:18px}
.workshop-form-switch{display:flex;gap:6px;width:min(360px,100%);flex:none}
.workshop-form-switch>.ornate-choice{flex:1;min-height:58px;padding:12px 18px;gap:6px}
.workshop-form-switch>.ornate-choice b{font-size:17px}.workshop-form-switch>.ornate-choice>img,.workshop-form-switch>.ornate-choice>.command-art{width:28px;height:28px}
.workshop-form-switch [aria-pressed=false]{opacity:.65}
.workshop-form-caption{display:grid;gap:5px}.workshop-form-caption b{font:700 19px Batang,serif;color:#efda9d}.workshop-form-caption small{font-size:12px;color:#c0baa2}
.workshop-form-paths{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.workshop-form-paths>button{font-size:14px;border-color:#a68a4e;background:#1c312d}
.loadout-card[data-form]{border-color:#b59c61;background:linear-gradient(130deg,#343e32,#17292b)}
@media(min-width:701px){
 /* Reserve the action-choice battlefield height for every console phase.
    The larger machine grows the page below it instead of shrinking the canvas.
    283px = header 50 + log 26 + choice 180 + padding 12 + three gaps 15. */
 html:has(.slot-battle){scrollbar-gutter:stable}
 .slot-battle{--battle-viewport-height:max(720px,100svh);--battle-console-height:180px;height:auto;min-height:var(--battle-viewport-height);grid-template-rows:50px calc(var(--battle-viewport-height) - 283px) 26px minmax(var(--battle-console-height),auto)}
 .slot-battle:is([data-console-phase=ready],[data-console-phase=rolling],[data-console-phase=playback]){--battle-console-height:300px}
}
@media(min-width:701px) and (max-height:480px){.slot-battle{--battle-viewport-height:680px}}
@media(max-width:700px){
 .slot-battle #slot-canvas{height:clamp(260px,36svh,340px);min-height:260px;flex:0 0 clamp(260px,36svh,340px)}
 .slot-battle .slot-console{padding:3px 4px 8px;gap:2px}
 .slot-console .slot-subcategories,.slot-console .hero-choice-grid{gap:6px}
 .slot-app .ornate-choice{min-height:74px;padding:15px 14px;gap:6px}.slot-app .ornate-choice b{font-size:17px}
 .ornate-choice>.command-art{width:29px;height:29px}
 .slot-console .slot-mechanism{grid-template-columns:44px minmax(0,1fr) 44px;min-height:172px}
 .slot-battle .slot-console .slot-machine{padding:28px 11px 17px!important;min-height:158px}
 .slot-console .slot-machine .slot-reel{min-height:110px!important;padding:2px;gap:2px}
 .slot-console .slot-reels{gap:3px}
 .slot-console .slot-machine .slot-reel>b,.slot-console .slot-machine .reel-current-name{font-size:11px;min-height:39px}
 .slot-console .reel-result-art,.slot-console .reel-result-art>.command-art{width:30px;height:30px}
 .slot-console .reel-glyph .command-art{width:34px;height:34px}.slot-console .reel-rune{min-width:16px;min-height:16px;font-size:12px}
 .lever-control{width:44px;height:172px}.lever-control>img{width:115px;height:172px}
 .slot-app .lever-grip,.slot-app .lever-grip:hover:not(:disabled),.slot-app .lever-grip:active{left:0;width:44px;height:51px}
 .lever-control .lever-socket{width:23px;right:-4px;left:auto}.lever-control.stop .lever-socket{right:auto;left:-4px}
 .slot-console .slot-techniques{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
 .slot-console .slot-category button{min-height:93px}
 .workshop-form-switch{width:100%}.workshop-form-switch>.ornate-choice{min-height:62px}
}
@media(prefers-reduced-motion:reduce){.lever-control>img,.slot-app .lever-grip,.ornate-choice::before{transition:none}}
.slot-menu{position:relative;isolation:isolate;overflow:hidden;background:#101e26;min-height:100dvh}
.menu-gallery{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#16252b}
.menu-gallery>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 25%;opacity:0;transition:opacity .8s ease;transform:scale(1.035)}
.menu-gallery>img.visible{opacity:1;animation:menu-drift 5s ease-out both}
.slot-menu::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#08151ff0 0%,#0b1b26bc 32%,#0b192326 75%),linear-gradient(0deg,#07121acf,transparent 28%)}
.slot-menu-copy{position:relative;z-index:1;width:min(560px,100%);min-width:0}
.slot-menu-copy .menu-wordmark{width:100%;margin:14px 0;line-height:0}
.menu-wordmark>svg{display:block;width:100%;height:auto;aspect-ratio:620/150;overflow:visible}
.menu-wordmark text{font:700 130px Batang,serif;letter-spacing:8px;fill:currentColor}
.slot-menu-copy>button{min-width:0;max-width:100%}
.slot-menu-copy>.slot-primary{max-width:100%;min-width:0}
.menu-gallery-caption{position:absolute;bottom:24px;right:32px;display:flex;align-items:center;gap:16px;color:#ead4a0}
.menu-gallery-caption>span{font:700 18px Batang,serif;text-shadow:0 2px 5px #000}
.menu-gallery-caption>button{border-radius:50%;width:44px;height:44px;padding:10px;background:#162721a6;border-color:#a78e5b}
.gallery-paused .menu-gallery>img{animation-play-state:paused}
@keyframes menu-drift{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(max-width:700px){.menu-gallery>img{object-position:65% 25%}.slot-menu{align-items:flex-end;padding:30px 22px 110px}.slot-menu::after{background:linear-gradient(0deg,#07141bf5 2%,#0c1d2599 47%,#0d1c2918 90%)}.slot-menu-copy h1{font-size:64px;letter-spacing:4px}.slot-menu-copy p{font-size:16px;max-width:280px}.menu-gallery-caption{bottom:24px;right:22px}.menu-gallery-caption>span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.menu-gallery>img,.menu-gallery>img.visible{animation:none;transition:none}}
.slot-app .music-controls{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;margin:0;overflow:visible;z-index:12}
.slot-menu>.music-controls,.slot-result>.music-controls{position:absolute;top:24px;right:28px}
.slot-app .music-controls>button{width:44px;height:44px;min-width:44px;padding:10px;color:#ead4a0;background:radial-gradient(#30453b,#12221f);border:1px solid #b49b60;border-radius:50%;box-shadow:inset 0 0 0 3px #152722,0 2px 5px #0005}
.slot-app .music-controls>button[aria-pressed=false]{color:#9b9f8e;border-color:#697363}
.music-volume{position:absolute;right:0;top:100%;width:160px;padding:14px 10px;background:#132421f5;border:1px solid #a68c56;border-radius:5px;box-shadow:0 5px 15px #0008;visibility:hidden;opacity:0;pointer-events:none}
.music-controls:hover .music-volume,.music-controls:focus-within .music-volume{visibility:visible;opacity:1;pointer-events:auto}
.music-volume input{display:block;width:138px;height:24px;margin:0;accent-color:#d6b56a}
.slot-header>.music-controls{margin-left:auto}.slot-header>.music-controls+button{margin-left:0}
@media(max-width:700px){.slot-menu>.music-controls,.slot-result>.music-controls{top:16px;right:16px}}
.slot-status-strip{display:flex;gap:2px;max-width:100%;overflow-x:auto;overflow-y:hidden;margin-top:3px;padding:0 1px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#806c43 transparent}
.slot-app .slot-status-icon{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;touch-action:pan-x;user-select:none;-webkit-touch-callout:none}
.slot-status-icon>span{display:grid;place-items:center;width:42px;height:42px;isolation:isolate;background:url('/art/ui/2026-10-15/gold-v2/countdown.webp') center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)}
.slot-status-icon>span::before{content:'';position:absolute;width:25px;height:25px;z-index:-1;border-radius:50%;background:#173d31}
.slot-status-icon .ui-icon{width:21px;height:21px;color:#f3d897;stroke-width:1.7}
.slot-status-icon.hero>span::before,.slot-status-icon.ultimate>span::before{background:#362446}
.slot-status-icon.debuff>span::before{background:#562d28}.slot-status-icon.debuff .ui-icon{color:#ffc59e}
.slot-status-icon.rage>span::before{background:#63291c}.slot-status-icon.rage .ui-icon{color:#ffdc78;fill:#c76c3340}
.slot-status-icon.terrain>span::before{background:#1f3b54}
.slot-app .slot-status-icon:hover,.slot-app .slot-status-icon:focus-visible{background:#c9a75b20;outline:1px solid #e0bd72;outline-offset:-2px}
/* Status changes must not steal height from the canvas during a jackpot.
   Reserve the same rows for empty, charged, buffed and lone-hero states. */
.slot-battle .slot-unit-hud{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:38px 22px 22px 32px 48px;column-gap:10px;row-gap:0;padding:4px 8px;align-items:center}
.slot-battle .slot-unit-heading{grid-column:1;grid-row:1;display:block!important;margin:0!important;min-width:0;line-height:20px}
.slot-unit-heading>b,.slot-unit-heading>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-unit-heading>span{font-size:12px!important;line-height:16px;color:#d5c69b}
.slot-battle .slot-unit-hud>.slot-hp{grid-column:1;margin:0;min-width:0;height:22px}
.slot-battle .slot-unit-hud>.slot-hp:nth-child(2){grid-row:2}
.slot-battle .slot-unit-hud>.slot-hp:nth-child(3){grid-row:3}
.slot-hud-meta{grid-column:1;grid-row:4;min-width:0;overflow:hidden}
.slot-hud-meta>.hero-charge,.slot-hud-meta>small{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-hud-meta>.hero-charge{font-size:11px;line-height:16px}
.slot-hud-meta>small{font-size:10px;line-height:14px}
.slot-hud-status{grid-column:1;grid-row:5;height:48px;min-width:0;overflow:hidden}
.slot-hud-status>.slot-status-strip{height:48px;margin:0;align-items:flex-start}
@media(min-width:1101px){
 .slot-battle .slot-unit-hud{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);grid-template-rows:40px 48px}
 .slot-battle .slot-unit-hud>.slot-hp:nth-child(2){grid-column:2;grid-row:1}
 .slot-battle .slot-unit-hud>.slot-hp:nth-child(3){grid-column:3;grid-row:1}
 .slot-hud-meta{grid-row:2}
 .slot-hud-status{grid-column:2/-1;grid-row:2}
}