*{box-sizing:border-box}html{background:#0b1118;color:#e8e1d1;font-family:system-ui,'Microsoft YaHei',sans-serif}body{margin:0;background:radial-gradient(ellipse at 80% 0,#233033 0,transparent 55%)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #54605c;background:#172124;border-radius:5px;padding:9px 15px}button:hover,button:focus-visible{border-color:#e5c382;background:#334039}header{max-width:1300px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;font-size:13px}header>a{font-size:20px;font-weight:800;letter-spacing:3px}header span{font-size:10px;letter-spacing:2px;color:#a0aaa7}nav{display:flex;align-items:center;gap:12px}main{max-width:1200px;margin:auto;padding:10px 28px 32px}.heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 22px}.eyebrow{font-size:10px;letter-spacing:3px;color:#d5b47b}h1{font-size:36px;letter-spacing:6px;margin:9px 0}h1 span{font-size:13px;font-weight:400;letter-spacing:2px;margin-left:24px;color:#a9b3af}.seal{border:1px solid #b76b53;color:#cb8065;line-height:1.2;padding:6px;font-family:serif}.cabinet{position:relative;aspect-ratio:16/9;background:#17232c;border:1px solid #70705b;box-shadow:0 25px 90px #0009;overflow:hidden;border-radius:6px}canvas{display:block;width:100%;height:100%;outline:none}#hud{position:absolute;left:0;bottom:8px;width:100%;text-align:center;font-size:11px;color:#fff8;pointer-events:none}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0b1726ed,#0b1726ac);display:flex;align-items:center;justify-content:center;text-align:center}.modal{padding:15px;width:650px;max-width:95%}h2{font-family:serif;font-size:44px;letter-spacing:8px;margin:16px 0;color:#f4deb5}#description{font-size:14px;line-height:1.8;color:#bdc5c1}#heroes{display:flex;gap:10px;margin:24px 0}#heroes button{flex:1;padding:17px 5px;background:#26333277}#heroes button.selected{border-color:#e1c08b;background:#8b704544;box-shadow:inset 0 -3px #d7b476}#heroes b{display:block;font-family:serif;font-size:25px;letter-spacing:5px}#heroes span{font-size:10px;color:#b5c2be;display:block;margin-top:7px}.primary{background:#ddbd83;color:#1c2526;border:0;padding:14px 40px;font-weight:700;min-width:235px}.primary span{margin-left:30px}.small{font-size:11px;color:#94a7a5;letter-spacing:1px}footer{display:flex;justify-content:space-between;gap:25px;margin-top:26px;color:#899b9c;font-size:12px;line-height:1.9}footer b{color:#c4cec6;font-size:12px}footer p{margin:7px 0}kbd{color:#ded2b9}.note{font-size:10px;text-align:right}.touch{display:none;justify-content:space-between;padding:15px 3px;user-select:none;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,43px);gap:4px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.actionpad{display:flex;align-items:center;gap:7px}.actionpad button{border-radius:50%;height:49px;width:49px;font-size:11px;padding:0}.actionpad .attack{background:#b5935c;color:#111;height:62px;width:62px}.cabinet:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto}.cabinet:fullscreen canvas{object-fit:contain}.cabinet:fullscreen .modal{max-height:100vh} @media(pointer:coarse){.touch{display:flex}}@media(max-width:700px){header{padding:14px 12px}header span,nav>a{display:none}nav{gap:5px}nav button{padding:7px;font-size:11px}main{padding:2px 10px 20px}h1{font-size:26px}h1 span{display:none}.heading{margin:5px 0 12px}.eyebrow{font-size:8px;letter-spacing:1px}h2{font-size:23px;letter-spacing:3px;margin:5px 0}#description{font-size:10px;margin:5px}#heroes{margin:9px 0;gap:5px}#heroes button{padding:7px 3px}#heroes b{font-size:17px}#heroes span{font-size:8px;margin-top:2px}.primary{padding:9px 20px;min-width:180px}.small{font-size:8px;margin:6px 0}.modal{padding:8px}.modal>.eyebrow{margin:3px}footer{flex-wrap:wrap;gap:8px;margin-top:10px;font-size:11px}.note{display:none}#hud{font-size:8px;bottom:2px}.touch button{touch-action:none}}@media(max-height:500px) and (orientation:landscape){header,.heading,footer{display:none}main{padding:0}.cabinet{height:100dvh;width:100%;border:0}.touch{position:fixed;bottom:8px;left:10px;right:10px;z-index:4;pointer-events:none}.touch button{pointer-events:auto;opacity:.6}.dpad{grid-template-columns:repeat(3,38px)}.actionpad button{height:43px;width:43px}.actionpad .attack{height:54px;width:54px}}