/* Space Arcade (design C) shared tokens and components. */
:root{
 --ax-bg:#07061A;--ax-panel:#110E2C;--ax-panel-2:#0D0B24;--ax-frame:#5B4FD6;--ax-frame-in:#2B2470;--ax-frame-hi:#7A6CFF;--ax-line:#3E3596;--ax-track:#241E5E;
 --ax-cyan:#4DE1FF;--ax-cyan-d:#1E8EA8;--ax-pink:#FF5DA2;--ax-pink-d:#A8316A;--ax-gold:#FFD166;--ax-red:#FF6B6B;--ax-orange:#FF8A3D;--ax-green:#7FD9B9;
 --ax-text:#E9E6FF;--ax-muted:#C9C2FF;--ax-label:#A99CFF;
 --ax-pixel:'Pixelify Sans',ui-monospace,monospace;--ax-thai:'Bai Jamjuree',system-ui,sans-serif;--ax-hanzi:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
 --ax-notch:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
 --ax-notch-r:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
 --ax-notch-4:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
.ax-page{margin:0;min-height:100vh;min-height:100svh;background:var(--ax-bg);color:var(--ax-text);font-family:var(--ax-thai);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.ax-page *,.ax-page *::before,.ax-page *::after{box-sizing:border-box}
.ax-dots{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#3A3380 1px,transparent 1px);background-size:22px 22px;opacity:.35;z-index:0}
.ax-hz{font-family:var(--ax-hanzi);font-weight:700}
.ax-px{font-family:var(--ax-pixel)}
.ax-label{font-family:var(--ax-pixel);font-size:13px;color:var(--ax-label);letter-spacing:1px}
.ax-panel{background:var(--ax-panel);border:2px solid var(--ax-frame);box-shadow:inset 0 0 0 2px var(--ax-bg),inset 0 0 0 4px var(--ax-frame-in)}
.ax-panel.hi{background:var(--ax-panel-2);border-color:var(--ax-frame-hi);box-shadow:inset 0 0 0 2px var(--ax-bg),inset 0 0 0 4px #3A3190,0 0 22px rgba(122,108,255,.35)}
.ax-notch{clip-path:var(--ax-notch)}.ax-notch-r{clip-path:var(--ax-notch-r)}.ax-notch-4{clip-path:var(--ax-notch-4)}
.ax-btn{appearance:none;border:0;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;min-height:44px}
.ax-btn:focus-visible,.ax-tile:focus-visible,.ax-icon:focus-visible{outline:3px solid var(--ax-gold);outline-offset:2px}
.ax-btn.primary{background:var(--ax-pink);color:#1A0614;font-family:var(--ax-pixel);font-weight:700;letter-spacing:2px;box-shadow:0 4px 0 var(--ax-pink-d),0 0 24px rgba(255,93,162,.45);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%,0 8px)}
.ax-btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ax-pink-d)}
.ax-btn.cyan{background:var(--ax-cyan);color:#04161C;font-weight:700;box-shadow:0 4px 0 var(--ax-cyan-d),0 0 18px rgba(77,225,255,.4)}
.ax-btn.cyan:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ax-cyan-d)}
.ax-btn.ghost{background:var(--ax-panel-2);border:2px solid var(--ax-cyan);color:var(--ax-cyan);font-family:var(--ax-pixel);font-weight:700}
.ax-btn.danger{background:#1E0D22;border:2px solid var(--ax-red);color:#FFB0B0;font-weight:700}
.ax-btn.quiet{background:none;border:2px solid #5A1E44;color:#FF8AB8}
.ax-icon{appearance:none;width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ax-frame);background:var(--ax-panel);color:var(--ax-cyan);cursor:pointer;padding:0;text-decoration:none}
.ax-chip{appearance:none;height:30px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ax-line);background:none;color:var(--ax-label);font:600 13px var(--ax-thai);cursor:pointer}
.ax-chip[aria-pressed="true"]{border-color:var(--ax-gold);background:#2A220C;color:#FFE7A8}
.ax-top{position:relative;display:flex;align-items:center;gap:10px}
.ax-top .ax-title{display:flex;flex-direction:column;flex:1;min-width:0}
.ax-top .ax-title b{font-size:17px;font-weight:700;line-height:1.25}
.ax-meter{height:10px;background:var(--ax-track);border:1px solid var(--ax-line)}
.ax-meter>i{display:block;height:100%;background:var(--ax-cyan);box-shadow:0 0 8px rgba(77,225,255,.6);transition:width .4s ease}
.ax-seg{display:grid;gap:2px}.ax-seg>i{display:block;height:6px;background:var(--ax-frame-in)}.ax-seg>i.on{background:var(--ax-cyan)}
.ax-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,3,14,.72)}
.ax-sheet[hidden]{display:none}
.ax-sheet>div{width:min(520px,100%);padding:16px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;background:var(--ax-panel-2);border:2px solid var(--ax-frame-hi);border-bottom:0}
.ax-sheet h2{margin:0;font-size:17px}
.ax-sheet .ax-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ax-sheet .ax-grid button{height:52px;border:2px solid var(--ax-line);background:var(--ax-panel);color:var(--ax-text);font:700 16px var(--ax-pixel);cursor:pointer}
.ax-sheet .ax-grid button[aria-pressed="true"]{border-color:var(--ax-cyan);color:var(--ax-cyan);box-shadow:0 0 14px rgba(77,225,255,.35)}
/* Pixel sprites */
.px-sprite{display:block;image-rendering:pixelated}
.px-steam{animation:px-steam 1.6s ease-out infinite}
.px-twinkle{animation:px-twinkle 1.2s steps(2) infinite}
.px-drip{animation:px-drip .9s linear infinite}
@keyframes px-steam{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-2px);opacity:0}}
@keyframes px-twinkle{50%{opacity:.15}}
@keyframes px-drip{0%{transform:translateY(-1px);opacity:0}30%{opacity:1}100%{transform:translateY(2px);opacity:0}}
@keyframes ax-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.ax-page *,.ax-page *::before,.ax-page *::after{animation:none!important;transition:none!important}}