@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/site/fonts/chakra-500.ttf') format('truetype')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/site/fonts/chakra-600.ttf') format('truetype')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/site/fonts/chakra-700.ttf') format('truetype')}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url('/site/fonts/russo-one.ttf') format('truetype')}
:root,:host{color-scheme:dark;--panel:rgba(10,16,27,.97);--text:#e8eef6;--muted:#a5b4c8;--accent:#ffb020;--line:#2a3a52;--line-hi:#3d5577;--sans:'Chakra Petch','Segoe UI',system-ui,sans-serif;--title:'Russo One','Chakra Petch','Segoe UI',sans-serif;color:var(--text);font:500 15px/1.7 var(--sans)}
*{box-sizing:border-box}html{height:100%;background:#0b1424}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 16px;overflow:hidden;color:var(--text);font:500 15px/1.7 var(--sans)}
:host{display:block;width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 56px)}
.site-backdrop{position:fixed;inset:0;z-index:0;background:linear-gradient(rgba(5,10,18,.52),rgba(5,10,18,.7)),url('/assets/gfx/keyart.webp') center/cover no-repeat;image-rendering:pixelated}
.site-window{position:relative;display:flex;flex-direction:column;width:min(860px,100%);height:min(760px,calc(100dvh - 56px));max-height:calc(100dvh - 56px);min-height:0;background:var(--panel);border:2px solid var(--line-hi);box-shadow:0 0 0 2px #000,0 24px 70px #0009;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);animation:window-in .22s ease-out both}
a{color:#ffc54f;text-underline-offset:4px;overflow-wrap:anywhere}a:hover{color:white}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.window-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:18px 24px 16px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,#13233a80,transparent)}
.brand{display:flex;align-items:center;gap:12px;min-width:0;font:400 24px/1.15 var(--title);letter-spacing:1.3px;text-decoration:none;color:#ffc54f;text-shadow:0 2px #72450a}
.brand img{object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0008)}.brand small{display:block;margin-top:5px;color:var(--muted);font:600 10px/1.4 var(--sans);letter-spacing:1.5px;text-transform:uppercase;text-shadow:none}.header-actions{display:flex;align-items:center;gap:5px}.header-actions>a{display:grid;place-items:center;min-width:36px;min-height:36px;color:var(--muted);background:#13233a;border:1px solid var(--line-hi);font:700 12px var(--sans);text-decoration:none}.header-actions>a[aria-current]{color:var(--accent);border-color:#997025}.header-actions>.window-close{margin-left:8px;color:var(--text);font:500 26px/1 var(--sans)}.window-close:hover{color:var(--accent);border-color:var(--accent)}
.window-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex-shrink:0;padding:12px 24px;border-bottom:1px solid var(--line)}.window-tabs a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:6px 8px;text-align:center;text-decoration:none;color:var(--muted);font:600 12px/1.35 var(--sans);border:1px solid var(--line);background:#13233a80}.window-tabs a:hover{color:#fff;border-color:var(--line-hi);background:#18283e}.window-tabs a[aria-current]{color:#ffca64;border-color:#8a672c;background:#ffb02014;box-shadow:inset 0 -2px var(--accent)}
.site-content{flex:1;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:24px 30px 32px;scrollbar-width:thin;scrollbar-color:#435a73 #0c1421;outline:none}.site-content::-webkit-scrollbar{width:7px}.site-content::-webkit-scrollbar-thumb{background:#435a73}.site-content::-webkit-scrollbar-track{background:#0c1421}
h1{font:400 clamp(24px,3.5vw,32px)/1.2 var(--title);color:#ffc54f;margin:6px 0 18px;letter-spacing:.4px}h2{font:400 18px/1.45 var(--title);margin:26px 0 10px;color:#dfe9f8}p{margin:0 0 14px}.lead{font:600 17px/1.65 var(--sans);color:#d7e3f1}.eyebrow{font:700 10px/1.5 var(--sans);letter-spacing:1.7px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.updated{color:var(--muted);font-size:12px}.game-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--line-hi);margin:22px 0;image-rendering:pixelated}
.table-wrap{overflow:auto;max-width:100%;border:1px solid var(--line)}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}th{color:var(--accent);background:#13233a}td{overflow-wrap:anywhere}tr:last-child td{border-bottom:0}code{overflow-wrap:anywhere;font-size:13px}.callout{border:1px solid #87682e;padding:18px;background:#ffb0200a}.callout h2{color:#ffc54f;margin-top:0}.callout p:last-child{margin-bottom:0}
.window-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;padding:14px 24px;border-top:1px solid var(--line);background:#0b1424;color:var(--muted);font:500 11px/1.6 var(--sans)}.window-footer>span>a{color:var(--muted)}.play{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;border:2px solid #ffc54f;background:var(--accent);box-shadow:inset 0 -3px #d68c1a;color:#111927!important;font:400 14px/1.35 var(--title);letter-spacing:.6px;text-decoration:none;text-align:center}.play:hover{background:#ffc54f}.skip{position:fixed;left:24px;top:-100px;background:#13233a;padding:12px}.skip:focus{top:6px;z-index:3}
@keyframes window-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:600px){body{padding:28px 10px}:host{width:calc(100vw - 20px)}.window-header{padding:12px 14px}.brand{font-size:19px;gap:8px;letter-spacing:.7px}.brand img{width:25px;height:25px}.brand small{font-size:9px;letter-spacing:.6px}.header-actions>a{min-width:32px;min-height:40px}.header-actions>.window-close{min-width:40px;margin-left:1px}.window-tabs{padding:8px 12px;gap:4px}.window-tabs a{font-size:10.5px;min-height:40px;padding:5px 3px}.site-content{padding:18px 18px 24px}.lead{font-size:15px}h2{font-size:16px}.game-shot{margin:18px 0}th,td{padding:9px;font-size:12px}.window-footer{padding:10px 14px;gap:8px}.play{padding:8px 10px;font-size:12px}.callout{padding:14px}}
@media(max-width:360px){.brand{font-size:17px}.brand img{display:none}.window-header{gap:6px}.header-actions{gap:3px}.window-footer{font-size:10px}.play{font-size:11px}}
@media(max-height:480px){body{padding:16px 10px}:host{max-height:calc(100dvh - 32px)}.site-window{height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}.window-header{padding:8px 16px}.brand small{display:none}.window-tabs{grid-template-columns:repeat(6,minmax(0,1fr));padding:6px 12px}.window-tabs a{min-height:34px;font-size:10px}.site-content{padding:16px 20px}.window-footer{padding:7px 14px}.play{min-height:36px}}
@media(prefers-reduced-motion:reduce){.site-window{animation:none}}
.site-loading{padding:24px;background:var(--panel);border:2px solid var(--line-hi);text-align:center}.site-loading button{padding:8px 14px;border:1px solid var(--line-hi);background:#13233a;color:var(--text);font:600 14px var(--sans);cursor:pointer}
.game-shot{width:min(100%,462px);max-height:260px;object-fit:contain;background:#080e18;margin-left:auto;margin-right:auto}
@media(min-width:700px) and (min-height:481px){.window-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.header-actions>a,.window-tabs a{min-height:44px}.header-actions>a{min-width:34px}}