@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Nanum+Pen+Script&display=swap');
/* PUNCH RUSH — SKETCHBOOK EDITION. A new graphic language, not a color filter. */
:root{color-scheme:light;--bg:#f3eddf;--panel:#fffaf0;--panel2:#ede5d7;
  --line:#695f55;--text:#332f2c;--muted:#796f65;--mint:#537e83;--sun:#c87461;--pink:#b86968}
html{background:#f3eddf}
body{background:#f3eddf;color:#38332e;font-family:"Gaegu","Malgun Gothic",cursive;
  font-size:19px;line-height:1.25}
.ambient{display:none}
.shell{max-width:1320px}
.topbar{min-height:79px;border-bottom:3px solid #5b544c;background:#f9f3e8;
  box-shadow:0 5px 0 #a99e8d20;position:relative}
.topbar:after{content:"";position:absolute;left:5%;right:9%;bottom:-7px;height:1px;
  background:#726a5c8c;transform:rotate(-.12deg)}
.back{font:700 20px "Gaegu",cursive;color:#564e46;letter-spacing:0}
.back:hover{color:#a75451}
.logo{font:700 39px/1 "Gaegu",cursive;letter-spacing:-.045em;transform:rotate(-2deg);
 color:#383431;text-shadow:2px 1px 0 #ab9b8a54}
.logo>span:last-child{color:#ae6258}
.logo-icon{width:43px;height:43px;background:none;border:2px dashed #695d51;
 color:#b96a5d;border-radius:39% 61% 51% 49% / 53% 47% 61% 39%;
 font:700 38px "Gaegu",cursive;transform:rotate(-16deg);box-shadow:none}
.version{font:700 19px "Gaegu",cursive;letter-spacing:0;color:#817364}
.icon-btn{background:#fcf5e7;color:#3b3431;border:2px solid #4e4945;
 border-radius:48% 52% 40% 60% / 45% 54% 46% 55%;
 box-shadow:2px 3px 0 #544e442d;font:700 27px "Gaegu",cursive}
.icon-btn:hover,.icon-btn[aria-pressed=false]{background:#e9dbc7;color:#a05d56}
.heading{padding:33px 0 23px;align-items:center}
.eyebrow,.eyebrow i{color:#ae675c}
.eyebrow{font:700 22px "Gaegu",cursive;letter-spacing:0}
.eyebrow i{background:#bd7163;border-radius:50%;transform:rotate(17deg);width:8px;height:8px}
.heading h1{font:700 clamp(42px,5vw,77px)/.96 "Gaegu",cursive;
 letter-spacing:-.05em;color:#37332e;margin:4px 0 12px;
 transform:rotate(-.4deg);text-shadow:1px 2px 0 #bba8994b}
.heading h1 em{color:#ad6358;text-decoration:underline wavy #ba8173 2px;text-underline-offset:5px}
.heading p:not(.eyebrow){font:700 21px/1.25 "Gaegu",cursive;color:#71695f;max-width:700px}
.heading-record{min-width:155px;background:#fff8e7;border:2px solid #766658;
 padding:9px 17px;transform:rotate(3deg);box-shadow:4px 5px 0 #8777672c;
 border-radius:3px 11px 2px 7px}
.heading-record small,.heading-record span{font:700 17px "Gaegu",cursive;color:#7b6e5d;letter-spacing:0}
.heading-record strong{font:700 44px "Gaegu",cursive;letter-spacing:-.04em;color:#a45f53}
.game-area{gap:18px}
.arena-box{background:#faf3e6;border:3px solid #443f39;
 border-radius:12px 7px 11px 5px;box-shadow:5px 7px 0 #796b5e3a,9px 11px 0 #fff8eb;
 overflow:hidden}
.arena-hud{background:#fbf6ec;border-bottom:2px dashed #7b71628b;
 min-height:75px;gap:16px;padding:11px 15px}
.hud-block small{font:700 17px "Gaegu",cursive;color:#82786e;letter-spacing:0}
.hud-block strong{font:700 40px/1 "Gaegu",cursive;color:#3c3732}
.hud-block.score strong{color:#a76155;letter-spacing:-.02em}
.hud-block.combo strong{color:#577987}
.hud-block.hp strong{color:#b55f62;font:700 22px "Gaegu",cursive}
.hud-pause{background:#fffaf0;border:2px solid #595248;color:#534b42;
 border-radius:4px 14px 5px 12px;box-shadow:3px 3px 0 #746c5b3b;
 font:700 18px "Gaegu",cursive}
.hud-pause:hover:not(:disabled){background:#ede3ce}
.timer-track{height:9px;background:#e4ddce;border-bottom:2px solid #b6aa9675}
.timer-fill{background:repeating-linear-gradient(100deg,#a96354 0 10px,#ba7868 10px 13px);
 border-right:3px solid #70463c}
.canvas-wrap{background:#f6f0e3;box-shadow:inset 0 0 0 4px #a79b8640}
.arena-overlay{background:#f8f0e5ed;backdrop-filter:blur(1px)}
.arena-overlay.is-muted{background:#f4ecddea}
.hero-badge{padding:4px 15px;background:#fff7e6;color:#a15b53;
 border:2px dashed #a16a62;border-radius:50% 30% 40% 20% / 25% 55% 30% 50%;
 font:700 22px "Gaegu",cursive;letter-spacing:0;transform:rotate(-3deg)}
.arena-overlay h2{font:700 clamp(45px,6.5vw,91px)/.95 "Gaegu",cursive;
 letter-spacing:-.06em;color:#38322d;text-shadow:2px 3px 0 #a99a8666;
 transform:rotate(-1.8deg);margin:12px 0 10px}
.arena-overlay h2 em{color:#b9655b;text-decoration:underline wavy #bd8273 2px}
.arena-overlay>p{font:700 clamp(16px,1.9vw,25px)/1.25 "Gaegu",cursive;
 color:#625b53;max-width:570px}
.btn-primary,.btn-secondary{font:700 24px "Gaegu",cursive;min-height:52px;
 padding:10px 20px;letter-spacing:-.04em;box-shadow:3px 4px 0 #655b4c40;
 transition:transform .12s,background .12s}
.btn-primary{background:#d1d8c5;border:2.5px solid #4d594c;color:#2f3b33;
 border-radius:12px 5px 13px 3px}
.btn-primary:hover{background:#e1e6d6;transform:rotate(-1deg) translateY(-2px)}
.btn-secondary{background:#fff7e8;border:2px solid #5c5048;color:#494239;
 border-radius:4px 13px 6px 12px}
.btn-secondary:hover{background:#f0e5d3}
.start-detail{gap:9px}
.start-detail span{font:700 19px "Gaegu",cursive;letter-spacing:0;color:#716457;
 background:#fff8e9;border:1px dashed #877f6d}
.start-detail b{color:#a36359}
.end-overlay .end-score{font:700 clamp(50px,8vw,93px)/1 "Gaegu",cursive;color:#a75b55}
.end-overlay h2{font-size:clamp(35px,5vw,66px)}
.end-rank{font:700 24px "Gaegu",cursive;color:#536f67;letter-spacing:0}
.end-stats{gap:15px}
.end-stats small{font:700 17px "Gaegu",cursive;color:#756b61;letter-spacing:0}
.end-stats strong{font:700 32px "Gaegu",cursive;color:#ab665b}
.controls{background:#f7f0e1;gap:14px;min-height:123px;padding:13px 20px}
.control{min-height:93px;border:3px solid #4b423b;
 border-radius:35% 25% 40% 20% / 23% 38% 31% 47%;
 box-shadow:4px 4px 0 #5b504550, inset 0 0 0 2px #fff6e980;
 transition:transform .1s}
.control:active:not(:disabled),.control.is-pressed{transform:rotate(2deg) scale(.97)}
.attack-control{background:#d8d4bb;color:#353c35}
.jump-control{background:#efcfb8;color:#52392e;
 border-radius:22% 43% 26% 38% / 32% 20% 46% 26%}
.control:disabled{opacity:.56;filter:none}
.control-graphic{width:auto;height:auto;background:none;transform:rotate(-9deg)}
.fist{font:700 38px "Gaegu",cursive;color:#4e5a46}
.action-burst{color:#9d6252;top:-17px;right:-16px;font:700 24px "Gaegu",cursive}
.jump-glyph{font:700 65px/1 "Gaegu",cursive;text-shadow:none}
.control-copy strong{font:700 clamp(30px,3.6vw,43px)/.95 "Gaegu",cursive;letter-spacing:-.04em}
.control-copy small{font:700 18px "Gaegu",cursive;white-space:normal}
.control kbd{font:700 16px "Gaegu",cursive;color:#5e5244;border:1px dashed #746858}
.controls-middle{gap:7px}
.control-status{color:#655b51;font:700 18px/1.1 "Gaegu",cursive}
.fury-label{color:#a06657;font:700 19px "Gaegu",cursive;white-space:normal;letter-spacing:0}
.fury-label b{color:#af5f52}
.fury-track{height:11px;border:2px solid #6a6159;background:#e3d9c8;
 border-radius:9px;box-shadow:none}
.fury-track div{background:repeating-linear-gradient(-35deg,#b06a60 0 8px,#c28870 8px 11px)}
.live-status{background:#f7f0e1;color:#796457;font:700 18px/1.25 "Gaegu",cursive;padding:0 18px 11px}
.side-panel{border:3px solid #62584d;background:#fbf5e9;
 border-radius:5px 11px 7px 14px;box-shadow:4px 5px 0 #615a514a;
 transform:rotate(.12deg)}
.side-header h2{font:700 37px "Gaegu",cursive;color:#4a4139}
.side-rule{background:none;border-top:2px dashed #aa9986;height:0}
.side-stat{border-bottom:1px dashed #b2a390;padding:8px 0}
.side-stat span{font:700 21px "Gaegu",cursive;color:#807164}
.side-stat strong{font:700 24px "Gaegu",cursive;color:#a56554}
.side-heading small{font:700 19px "Gaegu",cursive;color:#9e6255;letter-spacing:0}
.side-heading strong{font:700 22px "Gaegu",cursive;color:#544a41}
.enemy-guide b{font:700 24px "Gaegu",cursive}
.enemy-guide small{font:700 17px "Gaegu",cursive;color:#88786a}
.enemy-icon{border:2px solid #665b50;background:#ede6d7!important;
 color:#a46e63!important;border-radius:38% 54% 33% 48% / 40% 35% 60% 52%;
 font:700 26px "Gaegu",cursive}
.tip-box{background:#f1e7d6;border:2px dashed #977b67;border-radius:4px 15px 7px 8px}
.tip-box span{font:700 20px "Gaegu",cursive;letter-spacing:0;color:#ad6758}
.tip-box strong{font:700 25px "Gaegu",cursive;color:#4d4540}
.tip-box p{font:700 19px/1.2 "Gaegu",cursive;color:#756958}
.side-share{background:#f8efdf;border:2px solid #736458;
 font:700 22px "Gaegu",cursive;color:#51463f;box-shadow:2px 3px 0 #7b695946}
.side-share:hover{background:#e9dfcf}
.below{padding:40px 0}
.below-top h2{font:700 44px "Gaegu",cursive}
.below-top>span{font:700 19px "Gaegu",cursive;color:#8a7668;letter-spacing:0}
.rule-grid>div{background:#fff8eb;border:2px solid #7b6d5d;
 border-radius:15px 5px 9px 4px;box-shadow:3px 5px 0 #a08d764a}
.rule-grid>div:nth-child(2){transform:rotate(-.65deg)}
.rule-grid>div:nth-child(3){transform:rotate(.55deg)}
.rule-grid>div>span{color:#a36d58;font:700 21px "Gaegu",cursive;letter-spacing:0}
.rule-grid strong{font:700 28px "Gaegu",cursive;color:#453d37}
.rule-grid p{font:700 21px/1.25 "Gaegu",cursive;color:#756b60}
footer{border-top:2px dashed #a99b89;color:#877569;font:700 19px "Gaegu",cursive;letter-spacing:0}
footer a:hover{color:#a26055}
.help-modal{background:#3c372dcc;backdrop-filter:blur(5px)}
.help-content{background:#fbf5e6;border:3px solid #5f574d;
 border-radius:10px 5px 14px 6px;box-shadow:6px 8px 0 #31271d60}
.help-content h2{font:700 45px "Gaegu",cursive;color:#3f3933}
.help-content p{font:700 23px/1.28 "Gaegu",cursive;color:#6d6155}
.help-content b{color:#a85e56}
.close-help{background:#f4ead8;color:#524a40;border:2px solid #62594f;
 font:700 27px "Gaegu",cursive}
@media(max-width:1090px){
 .side-panel{transform:none}
 .enemy-guide{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
 .topbar{min-height:63px}
 .back{font-size:15px}
 .logo{font-size:28px}
 .logo-icon{width:30px;height:30px;font-size:26px}
 .icon-btn{font-size:21px;width:32px;height:32px}
 .heading{padding:19px 0 15px}
 .heading h1{font-size:clamp(34px,8.2vw,50px)}
 .heading p:not(.eyebrow){font-size:17px}
 .eyebrow{font-size:16px}
 .heading-record{min-width:85px;padding:5px 7px}
 .heading-record small,.heading-record span{font-size:12px}
 .heading-record strong{font-size:29px}
 .arena-hud{padding:8px 9px;gap:7px;min-height:55px}
 .hud-block small{font-size:12px}
 .hud-block strong{font-size:26px}
 .hud-block.hp strong{font-size:12px}
 .hud-pause{font-size:21px;min-height:33px;padding:3px 8px}
 .controls{padding:11px 8px 6px;gap:6px;min-height:92px}
 .control{min-height:75px;border-width:2px;padding:6px}
 .fist{font-size:27px}
 .jump-glyph{font-size:44px}
 .control-copy strong{font-size:28px}
 .control-copy small{font-size:12px}
 .control-status{font-size:11px}
 .fury-label{font-size:12px}
 .fury-track{height:8px}
 .live-status{font-size:15px;padding:0 10px 10px}
 .side-header h2{font-size:30px}
 .side-stat span{font-size:18px}
 .side-stat strong{font-size:21px}
 .side-heading small{font-size:17px}
 .side-heading strong{font-size:19px}
 .enemy-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
 .enemy-guide b{font-size:20px}
 .enemy-guide small{font-size:15px}
 .tip-box span{font-size:17px}
 .tip-box strong{font-size:22px}
 .tip-box p{font-size:17px}
 .below-top h2{font-size:34px}
 .rule-grid strong{font-size:25px}
 .rule-grid p{font-size:19px}
 .rule-grid>div>span{font-size:18px}
 .canvas-wrap>.arena-overlay{
   background:#f6efe3f6;backdrop-filter:blur(8px);
   max-height:100dvh;overflow-y:auto;
   justify-content:center;padding:calc(22px + env(safe-area-inset-top)) 16px
    calc(22px + env(safe-area-inset-bottom))
 }
 .arena-overlay h2{font-size:clamp(41px,10vw,60px)}
 .arena-overlay>p{font-size:19px}
 .arena-overlay .hero-badge{font-size:19px}
 .arena-overlay .btn-primary,.arena-overlay .btn-secondary{font-size:22px;min-height:48px}
 .arena-overlay .start-detail span{font-size:17px}
}
@media(max-width:400px){
 .heading h1{font-size:32px}
 .heading p:not(.eyebrow){font-size:16px}
 .heading-record{min-width:75px}
 .heading-record strong{font-size:24px}
 .hud-block strong{font-size:22px}
 .hud-block.hp strong{font-size:10px}
 .control-copy strong{font-size:24px}
 .control-copy small{font-size:11px}
 .control-graphic{width:auto}
 .fist{font-size:23px}
 .jump-glyph{font-size:36px}
 .control-status{font-size:10px}
 .fury-label{font-size:11px}
 .start-actions{gap:8px}
 .end-overlay h2{font-size:40px}
 .end-overlay .end-score{font-size:51px}
}
@media(max-width:700px) and (max-height:490px){
 .canvas-wrap>.arena-overlay{justify-content:flex-start}
 .arena-overlay h2{font-size:39px}
}