:root{--ink:#253b32;--paper:#d5e8b1;--orange:#ff6a3c}*{box-sizing:border-box}body{margin:0;background:#f5f3e9;color:var(--ink);font-family:Arial,'PingFang SC','Microsoft Yahei',sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #253b3226;background:transparent;border-radius:7px;padding:10px 15px}button:hover{background:#253b320c}button:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}main{max-width:1260px;margin:auto;padding:0 48px}header{height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #253b3220}.brand{text-decoration:none;color:inherit;font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px}.brand small{font-size:10px;letter-spacing:2px;font-weight:500;margin-left:12px}.brand-icon{font-size:34px}.intro{display:flex;align-items:center;justify-content:space-between;padding:45px 0 34px}.eyebrow,.label{font-size:11px;letter-spacing:3px;font-weight:700}.eyebrow{margin:0 0 17px}h1{font-size:48px;line-height:1.2;letter-spacing:-2px;margin:0}h1 span{color:var(--orange)}.subtitle{color:#6d756a;font-size:14px;line-height:1.8;margin-bottom:0}.note{background:#e4eab6;padding:25px 32px;transform:rotate(5deg);box-shadow:3px 7px 0 #253b3210;font-size:12px;line-height:2}.note strong{display:block;font-size:20px;font-weight:500;margin:8px 0}.note span{font-size:11px;color:#647052}.game-shell{border:1px solid #283c2f;border-radius:13px;overflow:hidden;box-shadow:0 12px 35px #253b320d}.toolbar{background:#fbfaf4;padding:13px 19px;display:flex;justify-content:space-between;gap:8px}.tabs{display:flex;gap:6px}.tabs button{border:0;font-weight:600;font-size:13px}.tabs .active{background:var(--ink);color:#fff}.tools{display:flex;align-items:center;gap:7px}.tools button,.tools select{font-size:12px;padding:8px;border:0;background:transparent}.paper{position:relative;background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.10' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:inset 0 8px 0 #b6cd9233,inset 0 10px 0 #76905c24}.hud{position:absolute;top:28px;left:35px;right:35px;display:flex;justify-content:space-between;gap:30px;pointer-events:none;z-index:2}.hud>div:not(.round){width:29%}.hud span{font-size:12px;font-weight:700}.health{height:9px;border:1px solid #253b3260;margin-top:10px;padding:1px}.health i,.energy i{display:block;width:100%;height:100%;background:#3d5643;transition:width .1s}.energy{height:3px;background:#253b321a;margin-top:6px}.energy i{width:0;background:#cc7651}.p2{text-align:right}.p2 i{margin-left:auto}.round{text-align:center}.round b{display:block;font-size:30px;line-height:1}.round span{display:block;margin-top:8px;font-size:10px;font-weight:400}canvas{width:100%;height:auto;display:block;touch-action:none}.paper-label{position:absolute;bottom:18px;left:30px;font-size:9px;letter-spacing:3px;opacity:.5}.overlay{position:absolute;inset:110px 0 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#d5e8b1bd;z-index:3}.overlay[hidden]{display:none}.overlay>p:first-child{font-size:11px;letter-spacing:3px}.overlay h2{font-size:30px;margin:12px 16px}.overlay p{font-size:12px;margin:8px 16px 25px;line-height:1.6}.overlay button{background:var(--ink);color:#fff;border:0;padding:15px 27px;min-width:175px}.overlay button span{margin-left:30px}#announcement{position:absolute;top:120px;left:0;right:0;text-align:center;font-size:21px;font-weight:700;pointer-events:none}.bottom-bar{display:flex;align-items:center;justify-content:space-between;background:#fbfaf4;padding:10px 20px;font-size:11px}.bottom-bar i{display:inline-block;width:6px;height:6px;background:#799655;border-radius:50%;margin-right:6px}.bottom-bar button{border:0;font-size:11px;padding:6px}.instructions{display:flex;gap:40px;justify-content:space-between;padding:32px 0;border-bottom:1px solid #253b3220}.label{font-size:9px;color:#788071}h3{font-size:20px;margin:10px 0}.instructions p{font-size:12px;color:#7a8074}.keyguide{display:flex;gap:35px}.keyguide p{display:flex;flex-direction:column;gap:9px}.keyguide b{color:var(--ink);margin-bottom:3px}.keyguide span{white-space:nowrap;font-size:11px}kbd{display:inline-block;border:1px solid #253b3230;border-bottom-width:2px;border-radius:3px;padding:3px 5px;min-width:23px;text-align:center;background:#faf9f0;color:var(--ink);margin-right:3px;font:10px Arial}footer{display:flex;justify-content:space-between;padding:22px 0 28px;font-size:10px;color:#8b8f80}.touch{display:flex;justify-content:space-between;margin-top:12px;gap:10px}.touch>div{display:flex;gap:5px}.touch button{user-select:none;touch-action:none;padding:12px;font-size:12px;background:#eeeddd}dialog{border:0;border-radius:12px;background:#f5f3e9;padding:25px;max-width:90vw;color:var(--ink)}dialog::backdrop{background:#18271fc9}dialog video{display:block;max-height:65vh;max-width:100%;margin:auto}dialog p{font-size:12px}#close-video{float:right} @media(min-width:900px){.touch{display:none}}@media(max-width:800px){main{padding:0 18px}header{height:70px}.brand small{display:none}.intro{padding:28px 0}h1{font-size:35px}.note{padding:12px;max-width:160px}.note strong{font-size:14px}.note span{font-size:9px}.toolbar{padding:8px;flex-wrap:wrap}.tools{margin-left:auto}.hud{top:18px;left:18px;right:18px;gap:10px}.hud span{font-size:9px}.round b{font-size:22px}.round span{font-size:8px}.overlay{inset:76px 0 20px}.overlay h2{font-size:21px}.overlay p{margin:5px 10px 10px;font-size:10px}.overlay>p:first-child{letter-spacing:1px}.overlay button{padding:11px 20px}.instructions{display:block;padding:20px 0}.keyguide{gap:20px;flex-wrap:wrap}.paper-label{bottom:10px;font-size:7px}.bottom-bar{padding:8px;font-size:9px}footer span{display:none}#announcement{top:85px;font-size:14px}}@media(max-width:440px){.note{display:none}.touch button{padding:11px 9px;font-size:11px}.tools button,.tools select{font-size:10px}.keyguide{gap:5px}.overlay h2{font-size:18px}}
/* Handheld arena: left thumb stick + independent right thumb buttons. */
#fullscreen,.mobile-tip{display:none}.mobile-controls{display:none}.joystick{position:relative;width:124px;height:124px;border-radius:50%;border:2px solid #3e594840;background:#48614816;touch-action:none;flex-shrink:0;box-shadow:inset 0 0 0 17px #ffffff18}.joystick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;transform:translate(-50%,-50%);background:#fbfaf4c9;border:2px solid #45634c80;box-shadow:0 5px 10px #253b3220;pointer-events:none}.joystick-label{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:11px;opacity:.65}.joystick-arrow{position:absolute;top:43px;font-size:24px;opacity:.45;pointer-events:none}.joystick-arrow.left{left:9px}.joystick-arrow.right{right:9px}.action-pad{position:relative;width:235px;height:168px;flex-shrink:0}.touch .action{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;padding:0;border:2px solid #3d594855;background:#f7f6e9d9;box-shadow:0 4px 0 #253b3224;font-size:12px;width:53px;height:53px}.action b{font-size:20px}.action small{font-size:9px;opacity:.65}.action.guard{left:0;top:84px}.action.jump{left:26px;top:18px}.action.wave{left:90px;top:0;width:62px;height:62px}.action.punch{left:83px;top:77px;width:72px;height:72px;background:#344d3de6;color:#fff}.action.burst{right:0;top:44px;width:67px;height:67px;background:#edd7aecf;border-color:#b58a50}.action.burst b{font-size:16px}.touch .action.pressed{transform:translateY(3px) scale(.94);box-shadow:none;background:#94b78c}.touch .action.charged{background:#ffbd67;border-color:#e3872f;box-shadow:0 0 20px #edaa6266,0 4px 0 #a7683c55}.mobile-controls,.mobile-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
@media(max-width:900px),(pointer:coarse){
 body{overscroll-behavior:none}main{padding:0 12px}header{height:56px}.brand{font-size:18px}.brand-icon{font-size:25px}header>button{font-size:10px;padding:8px}.intro,.instructions,footer{display:none}.game-shell{margin-top:12px}.toolbar{padding:6px;flex-wrap:nowrap}.tabs button{padding:8px;font-size:11px}.tabs [data-mode=duo]{display:none}.tools{gap:0}.tools button,.tools select{font-size:10px;padding:7px 5px}#fullscreen{display:block}.hud{top:13px;left:16px;right:16px}.health{margin-top:6px}.overlay{inset:65px 0 15px}.overlay h2{font-size:19px;margin:5px 10px}.overlay p{font-size:10px;margin:4px 10px 12px}.overlay button{padding:10px 18px}#announcement{top:75px;font-size:15px}.mobile-tip{display:flex;justify-content:space-between;font-size:11px;margin:16px 4px;color:#68725d}.mobile-tip span{font-size:10px}.mobile-controls{display:flex;align-items:center;justify-content:space-between;margin:12px 5px 30px;gap:8px}.mobile-controls>div{display:block}.paper-label{display:none}.bottom-bar{font-size:9px;padding:7px 9px}.round b{font-size:23px}.round span{font-size:8px}.hud span{font-size:10px}
}
@media(max-width:900px) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){
 .paper{min-height:270px;display:flex;align-items:center}.paper canvas{width:100%;height:auto}.overlay{inset:65px 0 10px}.mobile-controls{margin-top:28px}.joystick{width:105px;height:105px}.joystick-arrow{top:34px}.action-pad{width:218px;transform:scale(.94);transform-origin:right center}.game-shell{margin-top:6px}
}
@media(max-width:900px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 body{height:100dvh;overflow:hidden;background:var(--paper)}main{max-width:none;height:100dvh;padding:0}header,.mobile-tip{display:none}.game-shell{border:0;border-radius:0;box-shadow:none;margin:0;height:100dvh;display:flex;flex-direction:column}.toolbar{height:40px;flex-shrink:0;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.paper{flex:1;min-height:0;display:flex;justify-content:center;align-items:center}.paper canvas{width:auto;height:100%;max-width:100%;object-fit:contain}.hud{top:9px;left:15%;right:15%}.round b{font-size:20px}.round span{margin-top:4px}.hud span{font-size:9px}.health{height:7px}.overlay{inset:63px 0 12px}.overlay h2{font-size:21px}.overlay p:first-child{display:none}#announcement{top:70px;font-size:16px}.bottom-bar{height:26px;flex-shrink:0;padding-left:150px;padding-right:240px}.mobile-controls{position:fixed;bottom:max(30px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));margin:0;z-index:4;pointer-events:none;align-items:flex-end}.mobile-controls>div{pointer-events:auto}.joystick{width:105px;height:105px}.joystick-arrow{top:34px}.joystick-label{display:none}.action-pad{height:150px;width:235px;transform:scale(.85);transform-origin:right bottom}.overlay:not([hidden])~.mobile-controls{opacity:.4}
}
@media(max-width:360px) and (orientation:portrait){.joystick{width:90px;height:90px}.joystick-arrow{top:27px}.action-pad{width:200px;transform:scale(.85)}.mobile-controls{gap:0;margin-left:0;margin-right:0}}