:root{color-scheme:dark;font-family:"Courier New","PingFang SC","Microsoft YaHei",monospace;color:#e6e5d5;background:#101b1d;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid #b4e0ce;outline-offset:3px}main{width:min(1440px,100vw);aspect-ratio:16/9;position:relative;isolation:isolate;overflow:hidden;background:#182624;box-shadow:0 16px 0 #080e11,0 0 0 2px #32453e;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.arena{position:absolute;inset:0;z-index:-2;overflow:hidden}#scene{width:100%;height:100%;image-rendering:pixelated;object-fit:cover;object-position:center}.arena:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#09111470,transparent 25%,transparent 60%,#0a1113aa)}header{position:absolute;top:4%;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:5}.logo{font-size:27px;letter-spacing:4px;font-weight:700}nav{display:flex;gap:12px}nav button{min-height:40px;padding:0 8px;font-size:11px;color:#b7c9bd}nav button:hover{color:#fff}.vitals{position:absolute;left:4%;top:15%;width:170px}.hp{height:8px;padding:1px;border:1px solid #a7b399;background:#071012b0;margin-bottom:7px}.hp i{display:block;height:100%;width:100%;transform-origin:left;background:repeating-linear-gradient(90deg,#c2d7a0 0 12px,#718f67 12px 14px)}#health{font-size:10px;color:#b7c8bb}#objective{position:absolute;right:4%;top:16%;font-size:11px;color:#afc3b5}#objective b{font-weight:400;color:#ddd7b0;padding-left:12px}.boss{position:absolute;top:17%;width:28%;left:36%;text-align:center;font-size:10px;letter-spacing:2px;color:#deceb5}.boss>div{height:4px;background:#080e10;margin-top:8px}.boss i{display:block;width:100%;height:100%;background:#b68870;transform-origin:left}.hand-area{position:absolute;bottom:9.5%;width:390px;left:50%;transform:translateX(-50%);z-index:2}.hand-caption{font-size:9px;letter-spacing:1px;color:#a5bcb2;text-align:center;height:17px;margin-bottom:6px}#hand{display:flex;gap:12px;justify-content:center}.card{--accent:#8dbac0;position:relative;flex:0 0 112px;min-width:0;height:166px;font-size:12px;line-height:1.2;border:2px solid #718b83;padding:12px 8px 8px;background:#1a2c32;box-shadow:3px 3px 0 #09171c,inset 0 0 0 2px #0d1d24;text-align:center;touch-action:none;transition:transform .1s,border-color .1s}.card:nth-child(2){transform:translateY(-5px)}.card:before,.card:after{content:"";position:absolute;width:3px;height:3px;background:var(--accent);top:3px}.card:before{left:3px}.card:after{right:3px}.card kbd{position:absolute;left:7px;top:6px;font-size:9px;color:var(--accent);border:0}.card .name{font-family:serif;font-size:14px;font-weight:700;letter-spacing:1px;white-space:nowrap}.card .tag{display:block;font-size:8px;letter-spacing:1px;color:var(--accent);margin-top:5px}.card canvas{display:block;width:90px;height:70px;image-rendering:pixelated;margin:4px auto}.card .desc{display:block;color:#c1cfc6;font-size:8px;line-height:1.4;border-top:1px solid #a8b9af26;padding-top:6px;white-space:normal;overflow-wrap:anywhere}.card:disabled{cursor:default;opacity:.6}.time{position:absolute;bottom:12%;left:4%;width:160px;font-size:10px;letter-spacing:1px;color:#b1c5c0}.time b{float:right;font-size:11px;font-weight:400;color:#dae7de}.time>div{height:3px;background:#a7cac328;margin:10px 0}.time i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#a1d4cc}.time small{font-size:9px;color:#91aca1}footer{position:absolute;bottom:3.5%;left:4%;right:4%;display:flex;gap:20px;align-items:center;color:#a0b8ac;font-size:9px}kbd{font:9px monospace;color:#d1dbce;margin-right:5px;border-bottom:1px solid #7c958c;padding-bottom:2px}#rewinding{position:absolute;top:31%;width:100%;text-align:center;color:#c0e4df;font-size:13px;letter-spacing:4px;opacity:0;transition:opacity .15s;pointer-events:none}.rewind #rewinding{opacity:1}.rewind .card{border-color:#91d9dc88}.modal{position:absolute;z-index:6;top:27%;left:50%;transform:translateX(-50%);width:min(340px,85%);border:2px solid #718b83;background:#102027f5;box-shadow:6px 6px 0 #071114;text-align:center;padding:22px}.modal h1{font-size:24px;font-weight:400;margin:0 0 14px}.modal p{font-size:11px;line-height:1.7;color:#b7ccc1;margin:0 0 14px}.modal button,#help-close{border:1px solid #94a99f;padding:10px 28px;min-height:44px;font-size:12px}#paused{position:absolute;inset:0;z-index:7;display:grid;place-content:center;text-align:center;background:#071115d9;font-size:24px;letter-spacing:3px;pointer-events:none}#paused span{font-size:11px;color:#b3c8be;margin-top:14px;letter-spacing:0}#help{width:min(420px,92vw);max-height:calc(100dvh - 48px);overflow:auto;border:2px solid #718b83;padding:24px;background:#102027;color:#dfebdf;line-height:1.7;touch-action:pan-y}#help::backdrop{background:#071115bd}#help h2{font-size:18px;margin:0 0 18px}#help p{font-size:12px;margin:0 0 12px}#help-close{display:block;margin:20px auto 0}.help-touch,.touch-hint,#touch-controls{display:none}[hidden]{display:none!important}@media(hover:hover){.card:hover{transform:translateY(-10px);border-color:var(--accent)}}
/* Touch controls occupy separate thumb zones; cards stay in the lower center. */
.touch body{min-height:100vh;min-height:100dvh;overflow:hidden}
.touch main{--arena-h:36vh;width:100%;height:100vh;height:100dvh;aspect-ratio:auto;box-shadow:none}
.touch header{top:calc(env(safe-area-inset-top) + 6px);left:calc(env(safe-area-inset-left) + 14px);right:calc(env(safe-area-inset-right) + 10px)}
.touch .logo{font-size:23px}.touch nav{gap:0}.touch nav button{min-height:44px;min-width:44px;font-size:11px;padding:0 9px}
.touch .vitals{top:calc(env(safe-area-inset-top) + 57px);left:calc(env(safe-area-inset-left) + 16px);width:132px}.touch .hp{height:7px;margin-bottom:3px}.touch #health{font-size:9px}
.touch #objective{top:calc(env(safe-area-inset-top) + 60px);right:calc(env(safe-area-inset-right) + 16px);font-size:10px}
.touch .arena{top:calc(env(safe-area-inset-top) + 84px);bottom:auto;height:var(--arena-h)}
.touch .boss{top:calc(env(safe-area-inset-top) + 92px);left:35%;width:30%;font-size:9px}.touch #rewinding{top:calc(env(safe-area-inset-top) + 125px);font-size:12px}
.touch .hand-area{height:110px;clip-path:inset(-30px -6px 0);top:auto;bottom:calc(env(safe-area-inset-bottom) + 184px);width:min(380px,calc(100% - 24px));z-index:3}
.touch .hand-caption{display:none}.touch #hand{gap:8px}
.touch .card{flex:1 1 0;height:148px;padding:9px 6px 7px}.touch .card:nth-child(2){transform:none}.touch .card .name{font-size:13px;letter-spacing:0}.touch .card .tag{font-size:8px;margin-top:4px}.touch .card canvas{width:72px;height:56px;margin:4px auto}.touch .card .desc{font-size:10px;line-height:1.25;padding-top:5px}.touch .card kbd{display:none}
.touch .time{bottom:calc(env(safe-area-inset-bottom) + 152px);left:50%;transform:translateX(-50%);width:132px;font-size:10px}.touch .time>div{margin:5px 0 0}
.touch footer{display:none}.touch .keyboard,.touch .help-keyboard{display:none}.touch .help-touch{display:block}
.touch #touch-controls{display:block;position:absolute;inset:0;pointer-events:none;z-index:4}
.touch #touch-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #a4bca78c;background:#172c32db;box-shadow:inset 0 0 0 3px #0b1d2555;color:#dbe6d5;font-size:13px;border-radius:50%;width:58px;height:58px;min-width:44px;min-height:44px;opacity:.5;transition:opacity .12s ease-out}
.touch #touch-controls button.pressed{opacity:.65;background:#41615e;border-color:#cfdfb1;color:#fff}
.joystick{--stick-x:0px;--stick-y:0px;position:absolute;bottom:calc(env(safe-area-inset-bottom) + 24px);left:calc(env(safe-area-inset-left) + 20px);width:132px;height:132px;border-radius:50%;border:1px solid transparent;background:transparent;pointer-events:auto;touch-action:none}
.joystick:before{content:"";position:absolute;inset:-1px;border:1px solid #91b2a8;border-radius:50%;background:#12272b;box-shadow:inset 0 0 0 7px #10212670;opacity:.4;transition:opacity .3s ease-in-out;pointer-events:none}
.stick-rim{position:absolute;inset:18%;border:1px solid #a1c3b4;border-radius:50%;opacity:.35;transition:opacity .3s ease-in-out;pointer-events:none}
.stick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));border-radius:50%;border:2px solid #a6c7b9;background:#35564fe8;box-shadow:0 3px 8px #07151480,inset 0 0 0 4px #b9d4bc12;opacity:.5;transition:transform .12s ease-out;pointer-events:none}
.joystick.active:before,.joystick.active .stick-rim,.joystick.active .stick-arrow{opacity:0}.joystick.active .stick-knob{transition:none;background:#50766a}
.stick-arrow{position:absolute;top:50%;transform:translateY(-55%);font-size:26px;color:#9cbbaf;opacity:.5;transition:opacity .3s ease-in-out;pointer-events:none}.stick-left{left:8px}.stick-right{right:8px}
.joystick[data-direction=left] .stick-left,.joystick[data-direction=right] .stick-right{color:#edf6cc}
.action-pad{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 24px);right:calc(env(safe-area-inset-right) + 18px);width:150px;height:150px}
.action-pad button{position:absolute}.jump-button{left:46px;top:0}.dodge-button{left:0;top:46px}.attack-button{left:92px;top:46px;background:#28443ee8!important;border-color:#c2d5a48c!important}.rewind-button{left:46px;top:92px;color:#b6dedb!important}
.touch .modal{top:26%;padding:20px;width:min(300px,85%)}.touch #paused{padding-bottom:20vh}.touch #help{padding:20px}
@media(orientation:landscape){
 .touch .arena{inset:0;height:100%}.touch header{top:calc(env(safe-area-inset-top) + 2px)}.touch .logo{font-size:20px}.touch .vitals{top:calc(env(safe-area-inset-top) + 49px);width:120px}.touch #objective{top:calc(env(safe-area-inset-top) + 52px)}.touch .boss{top:calc(env(safe-area-inset-top) + 52px);font-size:9px}.touch #rewinding{top:28%}
 .touch .hand-area{height:86px;bottom:env(safe-area-inset-bottom);width:min(286px,calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 340px))}.touch .hand-caption{display:none}.touch .card{height:118px;padding:7px 5px 5px}.touch .card .name{font-size:11px}.touch .card .tag{font-size:8px;margin-top:2px}.touch .card canvas{width:45px;height:35px;margin:3px auto}.touch .card .desc{font-size:9px;padding-top:4px;line-height:1.25}
 .touch .time{bottom:calc(env(safe-area-inset-bottom) + 98px);width:120px;font-size:9px}.touch .joystick{bottom:calc(env(safe-area-inset-bottom) + 16px);left:calc(env(safe-area-inset-left) + 18px);width:124px;height:124px}
 .touch .action-pad{bottom:calc(env(safe-area-inset-bottom) + 16px);width:140px;height:140px}.touch #touch-controls button{width:56px;height:56px}.touch .jump-button{left:42px;top:0}.touch .dodge-button{left:0;top:42px}.touch .attack-button{left:84px;top:42px}.touch .rewind-button{left:42px;top:84px}
 .touch .modal{top:22%;padding:16px}.touch .modal h1{font-size:20px;margin-bottom:8px}.touch .modal p{margin-bottom:8px}
}
@media(max-width:360px) and (orientation:portrait){.touch .card .name{font-size:12px}.touch .card .desc{font-size:9px}.touch .joystick{left:14px;width:120px;height:120px}.touch .action-pad{right:14px;width:138px;height:138px}.touch #touch-controls button{width:54px;height:54px}.touch .jump-button{left:42px;top:0}.touch .dodge-button{left:0;top:42px}.touch .attack-button{left:84px;top:42px}.touch .rewind-button{left:42px;top:84px}}
@media(orientation:portrait) and (max-height:680px){.touch main{--arena-h:30vh}.touch .hand-area{height:94px;bottom:calc(env(safe-area-inset-bottom) + 162px)}.touch .card{height:128px}.touch .card canvas{width:54px;height:42px;margin:3px auto}.touch .card .desc{font-size:9px}.touch .time{bottom:calc(env(safe-area-inset-bottom) + 138px);width:100px;font-size:9px}.touch .joystick,.touch .action-pad{bottom:calc(env(safe-area-inset-bottom) + 12px)}}
@supports(height:100dvh){.touch main{--arena-h:36dvh}@media(orientation:portrait) and (max-height:680px){.touch main{--arena-h:30dvh}}}