/* Arcade shell overlay on the main SPA (Home, Mode Select, Stats). */
body.ax-on{overflow:hidden}
/* Legacy screens stay in the DOM (their handlers launch the modes) but are not painted or animated under the shell. */
body.ax-on>:not(.ax-shell):not(.ax-sheet):not(dialog):not(script){visibility:hidden}
body.ax-on>:not(.ax-shell):not(.ax-sheet):not(dialog) *{animation-play-state:paused!important}
body.ax-on dialog,body.ax-on dialog *{visibility:visible;animation-play-state:running!important}
.ax-shell{position:fixed;inset:0;z-index:60;background:var(--ax-bg);color:var(--ax-text);font-family:var(--ax-thai);display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
.ax-shell[hidden]{display:none}
.ax-shell *,.ax-shell *::before,.ax-shell *::after{box-sizing:border-box}
.ax-shell .ax-dots{position:absolute}
.ax-scroll{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ax-main{max-width:620px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 18px max(14px,env(safe-area-inset-left));outline:none}
.ax-shell h1,.ax-shell h2{margin:0;padding:0;letter-spacing:normal;text-transform:none;font-family:var(--ax-thai);color:inherit;text-shadow:none}
.ax-shell .ax-hsk{min-height:0}
.ax-shell a{color:var(--ax-cyan)}
.ax-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ax-col{display:flex;flex-direction:column;min-width:0}
.ax-gold{color:var(--ax-gold)}.ax-cyan{color:var(--ax-cyan)}.ax-pink{color:var(--ax-pink)}
.ax-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ax-seg.big>i{height:12px;background:var(--ax-track)}.ax-seg.big>i.on{background:var(--ax-cyan);box-shadow:0 0 6px rgba(77,225,255,.4)}
/* Home */
.ax-brand{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0 0 12px}
.ax-brand .ax-px{font-size:20px;font-weight:700;letter-spacing:3px;color:var(--ax-cyan);text-shadow:0 0 12px rgba(77,225,255,.6),2px 2px 0 #3A3190}
.ax-brand small{font-size:12px;color:var(--ax-label);font-weight:400}
.ax-home,.ax-home-a,.ax-home-b{display:flex;flex-direction:column;gap:12px}
.ax-card-pilot,.ax-card-streak{padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ax-name{font-size:18px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-hsk{appearance:none;height:26px;padding:0 8px;border:1px solid var(--ax-cyan);background:transparent;color:var(--ax-cyan);font:12px var(--ax-pixel);cursor:pointer}
.ax-hsk.big{height:44px;padding:0 14px;border-width:2px;background:var(--ax-panel-2);font-size:14px}
.ax-streak{display:flex;align-items:center;gap:6px}.ax-streak span{font-size:26px;font-weight:700;color:var(--ax-gold);text-shadow:0 0 10px rgba(255,209,102,.55)}.ax-streak small{font-size:13px;color:var(--ax-muted)}
.ax-mission{padding:16px;display:flex;flex-direction:column;gap:12px}
.ax-mission .ax-label,.ax-mission .ax-px{font-size:14px}
.ax-mission h1{font-size:22px;line-height:1.25}
.ax-launch{height:58px;font-size:22px;display:flex;align-items:center;justify-content:center;gap:10px}
.ax-launch span{font:600 15px var(--ax-thai);letter-spacing:0}
.ax-deck-link{padding:12px 14px;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ax-text)!important}
.ax-deck-link b{font-size:17px}.ax-deck-link small{font-size:13px;color:var(--ax-muted)}.ax-deck-link em{font-style:normal;color:var(--ax-cyan);font-size:15px}
.ax-deck-link .ax-col{flex:1}
.ax-stack{position:relative;width:70px;height:62px;flex:none}
.ax-stack i{position:absolute;width:44px;height:56px;border:2px solid var(--ax-frame)}
.ax-stack i:nth-child(1){top:0;left:18px;background:var(--ax-frame-in)}
.ax-stack i:nth-child(2){top:3px;left:9px;background:#3A3190;border-color:var(--ax-frame-hi)}
.ax-stack i:nth-child(3){top:6px;left:0;background:#EDEBFF;border-color:var(--ax-cyan);box-shadow:0 0 12px rgba(77,225,255,.5);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:24px;color:var(--ax-panel)}
.ax-quick{appearance:none;padding:12px;min-height:64px;background:var(--ax-panel);border:2px solid var(--ax-line);box-shadow:inset 0 0 0 2px var(--ax-bg);color:var(--ax-text);font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.ax-quick.r{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.ax-quick .ax-px{font-size:15px}.ax-quick small{font-size:12px;color:var(--ax-muted)}
.ax-home-links{justify-content:center;position:relative}.ax-home-links a{font-size:14px;padding:10px 12px;text-decoration:none}
.ax-home-links .ax-icon{position:absolute;right:0}
/* Hub */
.ax-hub{display:flex;flex-direction:column;gap:10px}
.ax-hub-head h1,.ax-stats h1{font-size:20px}
.ax-group{display:flex;flex-direction:column;gap:9px}
.ax-group h2{font-size:12px;letter-spacing:2px;margin-top:4px;font-weight:400}
.ax-big{appearance:none;position:relative;min-height:70px;padding:10px 14px;display:flex;align-items:center;gap:12px;color:var(--ax-text);background:var(--ax-panel-2);font-family:inherit;text-align:left;cursor:pointer;border:2px solid var(--ax-frame-hi);box-shadow:inset 0 0 0 2px var(--ax-bg),inset 0 0 0 4px #3A3190,0 0 16px rgba(122,108,255,.3)}
.ax-big.play{border-color:var(--ax-pink);box-shadow:inset 0 0 0 2px var(--ax-bg),inset 0 0 0 4px #5A1E44,0 0 16px rgba(255,93,162,.25)}
.ax-big .ax-col{flex:1}.ax-big b{font-size:16px}.ax-big small{font-size:12px;color:var(--ax-muted)}
.ax-cardicon{width:40px;height:46px;flex:none;background:#EDEBFF;border:2px solid var(--ax-cyan);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ax-panel)}
.ax-badge{font:13px var(--ax-pixel);color:var(--ax-bg);background:var(--ax-cyan);padding:3px 7px;white-space:nowrap}
.ax-tile{appearance:none;position:relative;min-height:76px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px;color:var(--ax-text);background:var(--ax-panel);border:2px solid var(--ax-line);box-shadow:inset 0 0 0 2px var(--ax-bg);font-family:inherit;text-align:left;cursor:pointer}
.ax-tile .ax-px{font-size:12px}.ax-tile b{font-size:15px}.ax-tile small{font-size:11px;color:var(--ax-muted)}
.ax-tile:disabled,.ax-mydeck:disabled{cursor:default;opacity:.62}
.ax-new{position:absolute;top:8px;right:8px;font:11px var(--ax-pixel);color:var(--ax-bg);background:var(--ax-gold);padding:1px 5px}
.ax-big:active,.ax-tile:not(:disabled):active,.ax-quick:active{transform:translateY(2px)}
.ax-mydeck{appearance:none;margin-top:4px;min-height:50px;padding:0 14px;display:flex;align-items:center;gap:10px;color:var(--ax-text);border:2px dashed var(--ax-frame);background:none;font:600 14px var(--ax-thai);text-align:left;cursor:pointer}
.ax-mydeck span:nth-of-type(1){flex:1}.ax-mydeck .ax-px{font-size:13px;color:var(--ax-label)}
/* Blaster rules */
.ax-rules{display:flex;flex-direction:column;gap:8px}
.ax-rule{appearance:none;min-height:58px;padding:8px 12px;display:flex;align-items:center;gap:12px;background:var(--ax-panel);border:2px solid var(--ax-line);color:var(--ax-text);font-family:var(--ax-thai);text-align:left;cursor:pointer}
.ax-rule:hover,.ax-rule:focus-visible{border-color:var(--ax-pink);outline:none;box-shadow:0 0 14px rgba(255,93,162,.3)}
.ax-rule-icon{width:36px;font-size:22px;text-align:center}.ax-rule b{display:block;font-size:16px}.ax-rule small{font-size:12px;color:var(--ax-muted)}
/* Stats */
.ax-stats{display:flex;flex-direction:column;gap:12px}
.ax-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ax-quad div{padding:10px 6px;background:var(--ax-panel);border:2px solid var(--ax-line);display:flex;flex-direction:column;align-items:center;gap:2px}
.ax-quad b{font-size:22px}.ax-quad small{font-size:11px;color:var(--ax-muted);text-align:center}
.ax-cal,.ax-levels{padding:12px;display:flex;flex-direction:column;gap:10px}
.ax-cal .ax-label{font-size:12px}
.ax-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ax-cal-grid i{height:30px;background:#1B1740}.ax-cal-grid i.l1{background:#3A3190}.ax-cal-grid i.l2{background:#6A5CE0}.ax-cal-grid i.l3{background:var(--ax-cyan)}
.ax-cal-grid i.today{outline:2px dashed var(--ax-cyan);outline-offset:-2px}
.ax-lvl{display:flex;flex-direction:column;gap:4px;font-size:13px}.ax-lvl .ax-px{color:var(--ax-cyan)}.ax-lvl span:last-child{color:var(--ax-muted)}
.ax-weakbox{padding:12px;background:#160B1F;border:2px solid var(--ax-red);display:flex;flex-direction:column;gap:10px}
.ax-weakbox .ax-px{font-size:12px;color:#FF8A8A}.ax-weakbox>small{color:#E9B8B8}
.ax-weak-row{display:flex;gap:8px}
.ax-weak{flex:1;min-width:0;height:54px;border:1px solid #5A2A3A;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ax-weak b{font-size:20px}.ax-weak small{font-size:11px;color:#E9B8B8}
.ax-weakbox .ax-btn{height:48px}
/* Bottom nav */
.ax-nav{position:relative;flex:none;height:calc(64px + env(safe-area-inset-bottom));padding:0 10px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#0B0920;border-top:2px solid var(--ax-line)}
.ax-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ax-label)!important;text-decoration:none;font:12px var(--ax-pixel);min-height:44px}
.ax-nav a[aria-current="page"]{color:var(--ax-pink)!important}
.ax-nav a:focus-visible{outline:3px solid var(--ax-gold);outline-offset:-3px}
.ax-shell-sheet{z-index:70}
/* Tablet landscape: two columns, groups side by side */
@media (min-width:900px) and (orientation:landscape){
 .ax-main{max-width:1080px;padding-top:max(20px,env(safe-area-inset-top))}
 .ax-home{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
 .ax-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
 .ax-hub-head{grid-column:1/-1}
 .ax-group .ax-duo{grid-template-columns:1fr}
 .ax-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
 .ax-stats>.ax-col,.ax-stats>.ax-quad{grid-column:1/-1}
 .ax-nav{max-width:none}
}
@media (min-width:700px) and (orientation:portrait){.ax-main{max-width:640px;padding-top:28px}}
@media (min-width:700px){
 .ax-main{min-height:100%;display:flex;flex-direction:column;justify-content:center}
 .ax-mission h1{font-size:28px}.ax-launch{height:68px;font-size:26px}
 .ax-quick{min-height:84px;padding:16px}.ax-quick .ax-px{font-size:18px}.ax-quick small{font-size:14px}
 .ax-deck-link{padding:16px 18px}.ax-deck-link b{font-size:20px}
 .ax-big{min-height:84px}.ax-big b{font-size:18px}.ax-tile{min-height:92px;padding:14px 16px}.ax-tile b{font-size:17px}.ax-tile small{font-size:12px}
 .ax-name{font-size:22px}.ax-card-pilot,.ax-card-streak{padding:14px 16px}
}