/* Phones keep a single, stable viewport in every command/reel/cinematic phase. */
.mobile-battle-settings,.mobile-battle-fullscreen{display:none}
.battle-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slot-app .menu-tutorial{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;width:260px;max-width:100%;margin:12px 0;color:#f4d991;border-color:#9b824a;background:#132b2edb}
.battle-tutorial{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 12px;border:1px solid #c9a85d;background:linear-gradient(100deg,#433b24,#15272a);color:#ffe5a0}
.battle-tutorial strong{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:1.45;word-break:keep-all}
.battle-tutorial button{padding:6px 9px;flex:none;font-size:12px}
.tutorial-count{color:#edcd7e;font-size:12px;white-space:nowrap}
.slot-app .tutorial-target{outline:3px solid #ffdf7e!important;outline-offset:-3px;box-shadow:inset 0 0 16px #ffe59955,0 0 12px #ffce6466!important}
.slot-app .lever-grip.tutorial-target{border-radius:20px;background:linear-gradient(#ffe39416,#e7be5338)!important;animation:tutorial-pull 1.3s ease-in-out infinite}
@keyframes tutorial-pull{50%{box-shadow:inset 0 -12px 15px #ffd56966,0 5px 14px #ffce6466}}
@media(min-width:701px){.slot-battle[data-tutorial=true]{grid-template-rows:50px 64px calc(var(--battle-viewport-height) - 352px) 26px minmax(var(--battle-console-height),auto)}}

@media(max-width:700px),(max-width:1100px) and (max-height:600px){
 html:has(.slot-battle),body:has(.slot-battle){height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto}
 .slot-battle{
  --mobile-console:clamp(208px,30dvh,248px);--mobile-hud:92px;
  display:grid;height:100dvh;min-height:0;max-height:100dvh;width:100%;max-width:none;margin:0;
  grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 20px var(--mobile-console);
  grid-template-areas:'header' 'stage' 'log' 'console';gap:3px;
  padding:max(4px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow:hidden;overscroll-behavior:none;
 }
 .slot-battle[data-tutorial=true]{grid-template-rows:44px 62px minmax(0,1fr) 20px var(--mobile-console);grid-template-areas:'header' 'tutorial' 'stage' 'log' 'console'}
 .slot-battle>.slot-header{grid-area:header;gap:5px;padding:0;margin:0;min-width:0;overflow:hidden}
 .slot-battle .slot-header>div{display:block;min-width:0}
 .slot-battle .slot-header small{display:none}
 .slot-battle .slot-header h1{font-size:16px;line-height:22px;margin:0;white-space:nowrap}
 .slot-battle .slot-header>button{width:44px;min-width:44px;padding:10px;flex:none}
 .slot-battle .mobile-battle-settings{display:block}
 .slot-battle .slot-header .music-controls{margin-left:auto}
 .slot-battle>.slot-stage{grid-area:stage;display:flex;flex-direction:column;position:relative;min-height:0;height:100%;flex:none;border-radius:4px;overflow:hidden}
 .slot-battle .slot-huds{position:relative;inset:auto;flex:0 0 var(--mobile-hud);height:var(--mobile-hud);padding:0;gap:4px;pointer-events:auto;overflow:hidden}
 .slot-battle .slot-unit-hud{height:100%;padding:2px 5px;grid-template-columns:62px minmax(0,1fr);grid-template-rows:20px 16px 16px 34px;gap:0 3px;overflow:hidden}
 .slot-battle .slot-unit-heading{grid-column:1/-1;grid-row:1;display:flex!important;align-items:center;gap:5px;overflow:hidden;line-height:18px}
 .slot-battle .slot-unit-heading>b{font-size:12px;flex:1;min-width:0}
 .slot-battle .slot-unit-heading>span{font-size:10px!important;max-width:45%;line-height:16px}
 .slot-battle .slot-unit-hud>.slot-hp{grid-column:1/-1;height:16px;grid-template-columns:24px minmax(0,1fr) 27px;gap:3px;font-size:10px}
 .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-battle .slot-hp>b{font-size:11px}
 .slot-battle .slot-hp meter{height:9px;min-width:0}
 .slot-battle .slot-hud-meta{grid-row:4;grid-column:1;align-self:center}
 .slot-battle .slot-hud-meta .hero-charge{font-size:9px;line-height:13px}
 .slot-battle .slot-hud-meta small{font-size:9px;line-height:12px}
 .slot-battle .slot-hud-status{grid-row:4;grid-column:2;height:34px}
 .slot-battle .slot-hud-status>.slot-status-strip{height:34px;align-items:center;gap:1px;overscroll-behavior-x:contain}
 .slot-battle .slot-status-icon{width:32px;height:32px;min-width:32px;min-height:32px;flex-basis:32px}
 .slot-battle .slot-status-icon>span{width:31px;height:31px}
 .slot-battle .slot-status-icon>span::before{width:22px;height:22px}
 .slot-battle .slot-status-icon .ui-icon{width:17px;height:17px}
 .slot-battle #slot-canvas{display:block;width:100%;height:0;min-height:0;min-width:0;flex:1 1 0;touch-action:manipulation}
 .slot-battle .slot-battle-tools{display:none}
 .slot-battle>#slot-log{grid-area:log;display:block;min-width:0;min-height:0;height:20px;padding:1px 5px;overflow:hidden}
 .slot-battle>#slot-log p{font-size:10px;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 .slot-battle>#slot-log p:not(:last-child){display:none}
 .slot-battle>.slot-console{grid-area:console;grid-template-columns:minmax(0,1fr);grid-template-rows:34px minmax(0,1fr);height:100%;min-height:0;max-height:100%;padding:2px 6px 5px;gap:0;overflow:hidden;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 .slot-battle>.slot-console:is([data-view=ready],[data-view=rolling],[data-view=playback]){grid-template-rows:34px minmax(0,1fr) 38px}
 .slot-battle .slot-machine-toolbar{height:34px;min-height:0;gap:4px}
 .slot-battle .slot-machine-toolbar #slot-owner{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 .slot-battle .console-back{width:34px;height:34px;min-width:34px;min-height:34px;padding:6px}
 .slot-battle #slot-timer .painted-clock{width:34px;height:34px;min-width:34px}
 .slot-battle #slot-timer .painted-clock b{font-size:20px}
 .slot-battle #slot-ultimates{height:34px;gap:3px}
 .slot-battle #slot-ultimates>button{width:34px;height:34px;min-width:34px;min-height:34px;padding:1px}
 .slot-battle #slot-ultimates .command-art,.slot-battle #slot-ultimates .awakening-command-art{width:30px;height:30px}
 .slot-battle .slot-console #slot-commands{height:100%;min-height:0;max-height:100%;align-self:stretch;display:grid;align-content:center;overflow:auto;overscroll-behavior:contain;padding:0;touch-action:pan-y}
 .slot-battle .slot-console .slot-category{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
 .slot-battle .slot-category button{height:86px;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 0;gap:3px}
 .slot-battle .slot-category .command-art{width:36px;height:36px}
 .slot-battle .slot-category b,.slot-battle .slot-category .ultimate-ready b{font-size:13px;letter-spacing:0;margin:0;white-space:nowrap}
 .slot-battle .slot-category small{font-size:10px}
 .slot-battle .slot-subcategories,.slot-battle .hero-choice-grid{gap:5px}
 .slot-battle .ornate-choice{height:70px;min-height:0;padding:12px 8px;gap:4px}
 .slot-battle .ornate-choice b{font-size:15px}
 .slot-battle .ornate-choice>.command-art{width:26px;height:26px}
 .slot-battle .slot-machine-stack{width:100%;height:100%;min-height:0;align-self:stretch;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto}
 .slot-battle .slot-mechanism{height:100%;min-height:0;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center}
 .slot-battle .slot-console .slot-machine{width:100%;height:100%;min-height:0;padding:21px 6px 12px!important;align-self:center;align-content:stretch}
 .slot-battle .slot-reels{height:100%;gap:2px}
 .slot-battle .slot-console .slot-reel{height:100%;min-height:0!important;gap:2px;padding:2px 1px}
 .slot-battle .slot-reel>b,.slot-battle .slot-console .slot-machine .reel-current-name{font-size:10px;line-height:12px;min-height:24px;height:24px;max-height:24px;overflow:hidden;word-break:normal;overflow-wrap:anywhere}
 .slot-battle .slot-console .slot-machine .reel-window{height:45px;min-height:45px}
 .slot-battle .reel-result-art,.slot-battle .reel-result-art>.command-art{width:28px;height:28px}
 .slot-battle .reel-glyph .command-art{width:30px;height:30px}
 .slot-battle .slot-console .slot-techniques{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0}
 .slot-battle .slot-console .hero-ready-technique{display:flex}
 .slot-battle .slot-console .skill-info{min-width:0;min-height:34px;padding:2px;gap:2px;overflow:hidden}
 .slot-battle .slot-console .skill-info>b{font-size:10px;line-height:13px;max-height:26px;overflow:hidden;overflow-wrap:anywhere}
 .slot-battle .slot-console .skill-info>.command-art{width:20px;height:20px;flex:none}
 .slot-battle #slot-outcome{margin:0;font-size:10px;line-height:13px;max-height:26px;overflow:hidden}
 .slot-battle #slot-outcome:empty,.slot-battle #slot-guards:empty{display:none}
 .slot-battle .lever-control{width:56px;height:136px;max-height:100%;touch-action:none;--lever-travel:26px}
 .slot-battle .lever-control>img{width:91px;height:136px;max-height:100%}
 .slot-battle .lever-jewel{transform:translate(-50%,calc(var(--pull)*var(--lever-travel)))}
 /* A stationary hit area surrounds the gemstone and its short pull path. */
 .slot-battle .lever-grip,.slot-battle .lever-grip:hover:not(:disabled),.slot-battle .lever-grip:active{left:0;top:0;width:56px;height:94px;min-width:56px;min-height:94px;border-radius:18px;transform:none;transition:none;touch-action:none}
 .slot-battle .lever-socket{bottom:11px;width:24px;right:-3px}
 .slot-battle .lever-control.stop .lever-socket{left:-3px}
 .slot-battle>.battle-tutorial{grid-area:tutorial;padding:3px 6px;gap:6px;overflow:hidden}
 .slot-battle .battle-tutorial strong{font-size:12px;line-height:17px}
 .slot-battle .battle-tutorial button{padding:4px 6px;min-width:40px;font-size:11px}
 .slot-battle .tutorial-count{font-size:10px}
 .slot-battle .slot-switch-list{max-height:100%;overflow:auto;overscroll-behavior:contain}
 .slot-battle>.slot-console{touch-action:pan-y}
 .slot-battle .slot-mechanism{touch-action:none}
}
@media(orientation:landscape) and (max-width:1100px) and (max-height:600px){
 .slot-battle{--mobile-hud:60px;grid-template-columns:minmax(0,1fr) clamp(260px,32vw,320px);grid-template-rows:44px minmax(0,1fr) 18px;grid-template-areas:'stage header' 'stage console' 'log console';column-gap:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .slot-battle[data-tutorial=true]{grid-template-rows:44px minmax(0,1fr) 18px 42px;grid-template-areas:'stage header' 'stage console' 'log console' 'tutorial tutorial'}
 .slot-battle>.slot-header{gap:2px}
 .slot-battle .slot-header h1{font-size:13px}
 .slot-battle .slot-header>button{width:36px;min-width:36px;padding:6px}
 .slot-battle .slot-header>[data-action=rules]{display:none}
 .slot-battle .slot-header .music-controls{flex:none}
 .slot-battle .slot-header [data-music-toggle]{width:36px;height:36px;min-width:36px;min-height:36px;padding:6px}
 .slot-battle .mobile-battle-fullscreen{display:block}
 .slot-battle .slot-unit-hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:18px 14px 26px;padding:0 4px}
 .slot-battle .slot-unit-hud>.slot-hp{height:14px;margin:0;grid-template-columns:20px minmax(0,1fr) 23px;gap:2px}
 .slot-battle .slot-unit-hud>.slot-hp:nth-child(2){grid-column:1;grid-row:2}
 .slot-battle .slot-unit-hud>.slot-hp:nth-child(3){grid-column:2;grid-row:2}
 .slot-battle .slot-hud-meta,.slot-battle .slot-hud-status{grid-row:3}
 .slot-battle .slot-hud-status,.slot-battle .slot-hud-status>.slot-status-strip{height:26px}
 .slot-battle .slot-status-icon{width:26px;height:26px;min-width:26px;min-height:26px;flex-basis:26px}
 .slot-battle .slot-status-icon>span{width:26px;height:26px}
 .slot-battle .slot-console .slot-category{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .slot-battle .slot-category button{height:80px}
 .slot-battle .slot-console .slot-subcategories,.slot-battle .slot-console .hero-choice-grid{grid-template-columns:1fr;max-width:290px}
 .slot-battle .ornate-choice{height:66px}
 .slot-battle .slot-console .slot-machine-stack{max-height:150px;align-self:center}
 .slot-battle .slot-console .slot-machine .reel-current-name,.slot-battle .slot-reel>b{font-size:9px;line-height:12px}
 .slot-battle .slot-console .slot-mechanism{grid-template-columns:44px minmax(0,1fr) 44px}
 .slot-battle .lever-control{width:44px}
 .slot-battle .lever-grip,.slot-battle .lever-grip:hover:not(:disabled),.slot-battle .lever-grip:active{width:44px;min-width:44px}
 .slot-battle .slot-console .skill-info{justify-content:center}
 .slot-battle .slot-console .skill-info>.command-art{width:17px;height:17px}
 .slot-battle[data-tutorial=true] .slot-category button{height:62px}
 .slot-battle[data-tutorial=true] .ornate-choice{height:52px}
}
@media(prefers-reduced-motion:reduce){.slot-app .lever-grip.tutorial-target{animation:none}}