@import url('fonts/fonts.css');
:root{color-scheme:dark;--bg:#171323;--panel:#211b30;--panel2:#2b233b;--line:#40344d;--muted:#a79bb6;--ink:#16111e;--cream:#f2ecdc;--lime:#e8f06d;--pink:#f48aa4;--mint:#85dbb5;--purple:#9c83df;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--body);font-size:14px;background-image:radial-gradient(ellipse at 15% 0%,#37244088,transparent 50%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.app{width:min(1432px,calc(100% - 80px));margin:0 auto}.topbar{height:87px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream);font-family:var(--display);font-size:16px;line-height:1;letter-spacing:.6px}.brand b{font-size:13px;color:var(--muted);letter-spacing:1.5px}.edition{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.6px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:8px;box-shadow:0 0 9px #85dbb550}.edition-divider{margin:0 15px;opacity:.4}nav{display:flex;gap:8px}.icon-button{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:transparent;font-weight:800;font-size:18px}.icon-button:hover{background:var(--panel2);border-color:var(--purple)}.icon-button[aria-pressed=false]{opacity:.5}.masthead{display:flex;justify-content:space-between;align-items:center;padding:29px 0 28px;gap:20px}.eyebrow{margin:0 0 9px;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--pink)}h1{font:900 clamp(30px,3.1vw,49px)/.94 var(--display);margin:0;letter-spacing:.4px}h1 br{display:none}h1 em{color:var(--lime);font-style:normal}.masthead-note{display:flex;align-items:center;gap:18px}.masthead-note p{font-size:11px;line-height:1.7;color:var(--muted)}.masthead-note b{font-weight:500;color:var(--cream)}.hand-arrow{font-size:38px;color:var(--pink);transform:rotate(-12deg)}.sticker{color:var(--ink);background:var(--pink);font:800 14px/.95 var(--display);text-align:center;transform:rotate(9deg);padding:12px 9px;clip-path:polygon(50% 0%,61% 8%,75% 4%,81% 17%,96% 22%,93% 37%,100% 50%,92% 62%,96% 78%,81% 82%,75% 96%,61% 93%,50% 100%,38% 92%,23% 96%,18% 82%,4% 77%,8% 63%,0% 50%,8% 37%,4% 23%,18% 18%,23% 4%,38% 8%)}.game-shell{border:1px solid #51415f;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px #0e0a1766}.game-ribbon{height:40px;background:#30263c;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:9px;font-weight:700;letter-spacing:1.6px;gap:10px}.game-ribbon>span{color:var(--muted)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px}.play-area{position:relative;overflow:hidden;background:#191727;min-width:0;aspect-ratio:960/620}.play-area>canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.tower-panel{background:#231c30;border-left:1px solid var(--line);padding:24px 20px 16px;display:flex;flex-direction:column}.tiny-label{font-size:8px;font-weight:700;letter-spacing:1.8px;color:var(--muted)}.tower-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.tower-heading h2{font:800 31px/1 var(--display);margin:7px 0 0;letter-spacing:.4px}.floor-count{font:800 30px/.7 var(--display);color:var(--purple);text-align:center}.floor-count small{font:700 7px var(--body);letter-spacing:1px}.tower-stops{display:flex;flex-direction:column-reverse;position:relative;gap:8px}.stop{display:flex;align-items:center;gap:10px;padding:10px 9px;border:1px solid #40344d;border-radius:5px;position:relative;background:#282033;min-height:60px}.stop::before{content:'';width:1px;height:10px;background:var(--line);position:absolute;left:23px;bottom:-10px}.stop:first-child::before{display:none}.stop-number{color:#85758e;font:800 22px var(--display);width:22px}.stop b{display:block;font:700 15px var(--display);letter-spacing:.5px}.stop small{font-size:8px;color:var(--muted);display:block;margin-top:3px}.stop canvas{width:35px;height:38px;margin-left:auto;opacity:.65}.stop.current{border-color:var(--lime);background:#e8f06d0c}.stop.current .stop-number{color:var(--lime)}.stop.current canvas{opacity:1}.stop.complete{border-color:#85dbb54d}.stop.complete .stop-number{color:var(--mint)}.stop.complete::after{content:'✓';position:absolute;right:9px;top:5px;color:var(--mint);font-size:10px}.tower-tip{margin-top:auto;padding-top:20px;display:flex;gap:9px}.tip-icon{color:var(--lime);font-size:26px}.tower-tip b{font-size:8px;letter-spacing:.7px;color:var(--lime)}.tower-tip p{font-size:10px;line-height:1.7;margin:7px 0 0;color:var(--muted)}.best-run{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);margin-top:17px;padding-top:14px}.best-run span{font-size:7px;color:var(--muted);letter-spacing:1.2px}.best-run b{font-size:9px;font-weight:500}.selection-overlay{position:absolute;inset:0;padding:30px 32px 20px;background:linear-gradient(#1d1729ee,#1d1729ce);display:flex;flex-direction:column;justify-content:center}.menu-heading h2{font:900 47px/1 var(--display);margin:8px 0}.menu-heading p{font-size:11px;color:var(--muted);margin:0 0 22px}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hero-card{background:#292135;position:relative;border:1px solid #554364;border-radius:6px;padding:0;text-align:left;overflow:hidden;transition:transform .15s,border-color .15s}.hero-card:hover{transform:translateY(-4px)}.hero-card.selected{border:2px solid var(--lime);box-shadow:0 5px 0 #0f0c17}.hero-card .selected-marker{position:absolute;right:8px;top:8px;background:var(--lime);color:var(--ink);width:19px;height:19px;border-radius:50%;font-size:12px;text-align:center;line-height:19px;z-index:1}.hero-card:not(.selected) .selected-marker{display:none}.hero-art{height:132px;background:radial-gradient(ellipse at 50% 100%,var(--hero-color),transparent 80%);position:relative;overflow:hidden}.hero-art::after{content:'';position:absolute;inset:0;background-image:radial-gradient(#d2b9ed25 1px,transparent 1px);background-size:7px 7px;opacity:.6}.hero-art canvas{position:relative;width:100%;height:100%;z-index:1}.hero-card .hero-info{padding:12px 13px 15px;display:block;border-top:1px solid #554364}.hero-tag{font-size:7px;letter-spacing:1.3px;color:var(--hero-text);font-weight:800}.hero-card h3{font:800 26px/1 var(--display);margin:6px 0 5px;letter-spacing:.2px}.hero-card p{font-size:9px;line-height:1.65;color:var(--muted);min-height:29px;margin:0 0 10px}.hero-stats{display:flex;gap:7px;align-items:center;font-size:7px;color:var(--muted);font-weight:700;letter-spacing:.5px}.hero-stats .pip{display:inline-block;height:4px;width:12px;background:#685570;border-radius:3px}.hero-stats .pip.on{background:var(--hero-text)}.menu-footer{margin-top:20px;display:flex;align-items:center;gap:17px}.primary{border:0;background:var(--lime);color:var(--ink);border-radius:4px;padding:15px 22px;font:800 17px var(--display);letter-spacing:.7px;box-shadow:0 4px 0 #939943;white-space:nowrap;transition:transform .1s,filter .1s}.primary span{margin-left:22px;font-family:var(--body);font-size:22px;line-height:15px}.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #939943}.menu-footer p{font-size:8px;line-height:1.8;color:var(--muted);max-width:160px}.menu-footer p span{color:var(--lime);margin:0 4px}.controls{background:#211b2d;border-top:1px solid var(--line);display:flex;align-items:stretch;min-height:80px;padding:10px 20px;gap:12px}.move-control,.action-control{display:flex;align-items:center;gap:10px;flex:1;font-size:10px;font-weight:800;letter-spacing:1px}.move-control{flex:1.15}.move-control small,.action-control small{display:block;font-size:8px;color:var(--muted);letter-spacing:0;font-weight:400;margin-top:4px}.keys{text-align:center;display:flex;flex-direction:column;gap:3px}.keys>kbd{align-self:center}.keys span{display:flex;gap:3px}kbd{font:700 10px var(--body);background:#342a41;border:1px solid #665573;border-bottom:2px solid #665573;border-radius:3px;padding:6px;min-width:24px;text-align:center;color:var(--cream)}.keys kbd{padding:2px;min-width:17px;font-size:8px}.action-control{position:relative;background:transparent;border:0;border-left:1px solid var(--line);padding:9px 0 9px 15px;text-align:left;overflow:hidden;border-radius:3px;touch-action:none}.action-control:hover{background:#ffffff07}.action-control>i{position:absolute;left:15px;bottom:0;width:calc((100% - 15px)*var(--cooldown,0));height:2px;background:var(--purple)}.action-control.pressed{background:#ffffff16}.trick-control>kbd{background:#e8f06d20;border-color:var(--lime);color:var(--lime)}.trick-control>span{color:var(--lime)}.trick-control.spent{opacity:.45}.page-footer{display:flex;justify-content:space-between;gap:10px;padding:22px 0;font-size:8px;color:#887a96;letter-spacing:1px}.page-footer b{font-weight:500;color:#c0b1cf;margin:0 6px}.pig-mark{font-size:12px;color:var(--pink)}.arena-hud{position:absolute;left:24px;right:24px;top:20px;display:flex;justify-content:space-between;gap:40px;pointer-events:none}.hero-hud{width:25%}.boss-hud{width:42%;text-align:right}.arena-hud span{font:800 18px var(--display);letter-spacing:.6px;text-shadow:0 2px 0 #15121c}.arena-hud small{font-size:8px;letter-spacing:.7px;color:var(--cream)}.bar{height:10px;background:#100c18;border:2px solid #100c18;border-radius:10px;margin:6px 0 4px;overflow:hidden;box-shadow:0 0 0 1px #e8dfeb22}.bar i{display:block;height:100%;width:100%;background:var(--pink);border-radius:8px;transition:width .1s}.player-bar i{background:var(--mint)}.ribbon-button{background:transparent;border:0;padding:0;font-size:9px;color:var(--cream);white-space:nowrap;letter-spacing:.5px}.ribbon-button kbd{font-size:7px;padding:2px 4px;min-width:0;margin-left:5px}.dialog-backdrop{position:absolute;inset:0;background:#171222c9;display:grid;place-items:center;padding:20px;backdrop-filter:blur(5px);z-index:5}.dialog{width:min(440px,100%);padding:28px;background:#2c2239;border:1px solid #756081;border-radius:8px;box-shadow:0 10px 0 #0f0b16;text-align:center;max-height:100%;overflow:auto}.dialog h2{font:900 45px/.98 var(--display);margin:10px 0 14px;letter-spacing:.5px}.dialog h3{font:800 22px var(--display);margin:0 0 8px}.dialog p{font-size:12px;line-height:1.75;color:#c7b9d2;margin:10px 0 20px}.dialog .weakness{padding:14px;background:#e8f06d0b;border:1px dashed #e8f06d60;border-radius:4px;color:var(--lime);font-size:12px;line-height:1.7;text-align:left}.dialog .weakness b{display:block;letter-spacing:1px;font-size:9px;margin-bottom:6px}.dialog canvas{width:110px;height:95px;margin:-3px auto 0;display:block}.dialog .primary{margin-top:20px}.dialog .secondary{border:1px solid #756081;border-radius:4px;background:transparent;padding:11px 16px;margin:17px 8px 0;color:var(--cream);font-size:11px}.dialog .stats{display:flex;gap:10px;justify-content:center}.dialog .stats div{padding:10px 15px;background:#221b2c}.dialog .stats b{display:block;font:800 28px var(--display);color:var(--lime)}.dialog .stats small{font-size:8px;letter-spacing:1px;color:var(--muted)}.dialog .key-list{text-align:left;font-size:12px;line-height:2.1;color:#c7b9d2}.dialog .key-list b{color:var(--cream)}.toast{pointer-events:none;position:absolute;bottom:29px;left:50%;transform:translate(-50%,10px);padding:10px 18px;color:var(--ink);background:var(--lime);box-shadow:3px 3px 0 #100d18;border:2px solid #100d18;border-radius:3px;font:800 16px var(--display);text-align:center;opacity:0;transition:opacity .15s,transform .15s;max-width:90%;z-index:4}.toast.show{opacity:1;transform:translate(-50%,0)}.touch-stick{display:none;position:absolute;bottom:18px;left:22px;border:1px solid #f2ecdc55;background:#f2ecdc0a;width:92px;height:92px;border-radius:50%;touch-action:none}.touch-stick span{position:absolute;left:25px;top:25px;width:40px;height:40px;background:#f2ecdc50;border:2px solid #f2ecdc88;border-radius:50%;pointer-events:none}.touch-stick b{position:absolute;bottom:-14px;width:100%;font-size:7px;text-align:center;letter-spacing:1px;pointer-events:none}
@media(min-width:1600px){.masthead{padding:35px 0}.hero-art{height:165px}.selection-overlay{padding:45px}.hero-card h3{font-size:30px}.hero-card p{font-size:11px}.menu-heading h2{font-size:56px}.menu-heading p{font-size:13px}.hero-tag{font-size:9px}.hero-info{padding:17px!important}.tower-panel{padding:30px 24px}.stop{min-height:68px}.stop b{font-size:18px}.stop small{font-size:10px}}
@media(max-width:1200px){.app{width:calc(100% - 40px)}.game-layout{grid-template-columns:minmax(0,1fr) 220px}.tower-panel{padding:20px 14px 14px}.selection-overlay{padding:22px}.menu-heading h2{font-size:37px}.hero-art{height:110px}.hero-card .hero-info{padding:10px}.hero-card h3{font-size:22px}.hero-card p{font-size:8px;margin-bottom:6px}.hero-grid{gap:8px}.stop{min-height:53px;padding:8px}.tower-heading{margin-bottom:15px}.tower-heading h2{font-size:27px}.controls{gap:6px;padding:8px 14px}.action-control{padding-left:10px;gap:8px}.action-control small{font-size:7px}.masthead-note{gap:9px}.masthead-note p{font-size:9px}.sticker{font-size:11px}h1{font-size:36px}.menu-heading p{margin-bottom:15px}.menu-footer{margin-top:16px}.menu-footer p{font-size:7px}.primary{padding:13px 16px;font-size:15px}.tower-tip{padding-top:13px}.best-run{margin-top:11px;padding-top:11px}}
@media(max-width:960px){h1 br{display:block}.masthead-note p{display:none}.masthead-note{gap:15px}.game-layout{grid-template-columns:minmax(0,1fr) 190px}.play-area{aspect-ratio:850/620}.hero-art{height:95px}.menu-heading h2{font-size:33px}.hero-card h3{font-size:19px}.hero-card p{min-height:40px}.menu-footer{display:block}.menu-footer p{max-width:none;margin:12px 0 0}.hero-stats{gap:4px;font-size:6px}.hero-stats .pip{width:8px}.stop canvas{width:28px}.stop b{font-size:13px}.stop small{font-size:7px}.stop{gap:6px}.tower-heading h2{font-size:24px}.tower-tip p{font-size:9px}.action-control{flex-direction:column;gap:6px;justify-content:center;text-align:center}.action-control small{display:none}.move-control{font-size:9px;gap:6px}.topbar{height:72px}.edition{font-size:8px;letter-spacing:1px}.arena-hud{gap:25px;left:18px;right:18px;top:16px}.boss-hud{width:55%}}
@media(max-width:700px){.app{width:calc(100% - 24px)}.topbar{height:64px}.edition{display:none}.brand{font-size:14px}.brand b{font-size:11px}.brand img{width:31px;height:31px}.icon-button{width:31px;height:31px}.masthead{padding:22px 0}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:34px}.masthead-note{display:none}.game-layout{display:flex;flex-direction:column}.play-area{aspect-ratio:1/1.18;min-height:470px}.selection-overlay{padding:22px 18px}.hero-art{height:125px}.hero-grid{gap:7px}.hero-card h3{font-size:21px}.hero-tag{font-size:6px;letter-spacing:.6px}.hero-card .hero-info{padding:9px 8px}.hero-card p{font-size:8px;min-height:53px}.hero-stats .pip{width:7px}.hero-stats{font-size:6px;gap:3px}.menu-heading h2{font-size:37px}.menu-heading p{font-size:10px}.menu-footer .primary{width:100%;font-size:17px;padding:15px}.menu-footer p{text-align:center;font-size:7px}.tower-panel{border-left:0;border-top:1px solid var(--line);padding:13px}.tower-heading,.tower-tip,.best-run{display:none}.tower-stops{flex-direction:row;gap:5px}.stop{flex:1;min-width:0;min-height:47px;display:flex;flex-direction:column;gap:2px;padding:5px 2px}.stop-number{font-size:14px;width:auto}.stop b{font-size:10px;text-align:center;letter-spacing:0}.stop small,.stop canvas,.stop::before{display:none}.stop.complete::after{top:2px;right:3px}.game-ribbon{font-size:7px;letter-spacing:.9px;padding:0 12px;height:34px}.game-ribbon>span{font-size:6px;letter-spacing:.3px}.controls{min-height:67px;padding:5px;gap:0}.move-control{display:none}.action-control{padding:7px 3px;font-size:9px;border-left:1px solid var(--line)}.action-control:first-of-type{border-left:0}.action-control kbd{padding:3px 5px;font-size:8px;min-width:22px}.action-control>i{left:3px;width:calc((100% - 6px)*var(--cooldown,0))}.page-footer{font-size:6px;letter-spacing:.3px;padding:17px 0}.page-footer>span:last-child{display:none}.arena-hud{left:12px;right:12px;gap:15px;top:13px}.hero-hud{width:35%}.boss-hud{width:55%}.arena-hud span{font-size:15px}.arena-hud small{font-size:6px}.dialog{padding:22px}.dialog h2{font-size:36px}.dialog p,.dialog .weakness{font-size:11px}.toast{bottom:130px;font-size:14px;width:max-content}.touch-stick.visible{display:block}}
@media(pointer:coarse) and (min-width:701px){.touch-stick.visible{display:block}.controls{min-height:85px}.action-control{background:#ffffff06}.action-control small{display:none}}
@media(max-height:600px) and (orientation:landscape){.topbar,.masthead,.page-footer{display:none}.app{width:100%;max-width:1200px}.game-shell{border-radius:0}.game-ribbon{height:28px}.game-layout{grid-template-columns:minmax(0,1fr) 180px;display:grid}.play-area{height:calc(100dvh - 94px);aspect-ratio:auto;min-height:0}.tower-panel{border-left:1px solid var(--line);padding:10px;overflow:auto}.tower-heading{display:none}.tower-stops{flex-direction:column-reverse;gap:4px}.stop{flex-direction:row;min-height:43px}.stop b{font-size:13px}.stop-number{font-size:20px;width:24px}.stop canvas{display:block}.tower-tip,.best-run{display:none}.selection-overlay{padding:12px 20px}.menu-heading h2{font-size:28px;margin:4px 0}.menu-heading p{display:none}.hero-art{height:66px}.hero-card p{display:none}.hero-card h3{font-size:18px}.hero-info{padding:6px 10px!important}.menu-footer{display:flex;margin-top:10px}.menu-footer p{margin:0;max-width:180px}.menu-footer .primary{width:auto;padding:10px 18px}.hero-stats{display:none}.controls{height:65px;min-height:65px}.dialog{padding:15px}.dialog h2{font-size:28px;margin:5px 0}.dialog canvas{width:65px;height:55px}.dialog p{margin:7px 0}.dialog .primary{margin-top:10px;padding:10px 15px}.dialog .weakness{padding:8px;font-size:10px}.touch-stick.visible{width:70px;height:70px;bottom:12px}.touch-stick span{width:30px;height:30px;left:19px;top:19px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.hero-art canvas{object-fit:contain;display:block}
.enemy-intro{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#4e3559ed,#100d18f5);padding:12px;overflow:auto}
.enemy-intro-card{position:relative;width:min(520px,100%);text-align:center;padding:12px 20px;overflow:hidden}
.enemy-intro-card>canvas{display:block;width:160px;height:130px;object-fit:contain;margin:0 auto 5px}
.enemy-intro-card h2{font:900 clamp(26px,4vw,44px)/1 var(--display);color:var(--cream);margin:7px 0 12px}
.intro-title{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--pink)}
.enemy-intro-card p{font-size:14px;line-height:1.6;color:#ddd1e6;margin:8px auto 18px;max-width:400px}
.enemy-intro-card small{display:block;margin-top:15px;font-size:9px;color:var(--muted)}
.intro-countdown{height:3px;background:var(--lime);margin-top:16px;transform-origin:left}
.enemy-intro.enter .intro-countdown{animation:intro-timer 2.8s linear forwards}
@keyframes intro-timer{to{transform:scaleX(0)}}
@media(max-height:540px){.enemy-intro-card>canvas{width:120px;height:98px}.enemy-intro-card{padding:4px 14px}.enemy-intro-card h2{font-size:28px;margin:4px 0}.enemy-intro-card p{font-size:12px;margin:6px auto 10px}.enemy-intro-card .primary{padding:10px 18px}.enemy-intro-card small{margin-top:9px}.intro-countdown{margin-top:10px}}
.fight-picker{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;max-width:300px;font-size:9px;font-weight:700;letter-spacing:1px;color:var(--pink)}
.fight-picker select{width:100%;min-width:0;border:1px solid #756081;border-radius:4px;background:#30263c;color:var(--cream);font:500 12px var(--body);padding:8px;letter-spacing:0;cursor:pointer}
@media(max-width:700px) and (orientation:portrait){.fight-picker{max-width:none;margin-top:12px}}
.arena-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;aspect-ratio:960/620}
.arena-frame>canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
/* During a fight, the browser viewport is the game player, with uniform scaling. */
.app:has(.play-area.in-game){width:100%;max-width:none;height:100dvh}
.app:has(.play-area.in-game) .topbar,.app:has(.play-area.in-game) .masthead,.app:has(.play-area.in-game) .page-footer,.game-layout:has(.play-area.in-game) .tower-panel{display:none}
.app:has(.play-area.in-game) .game-shell{height:100%;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none}
.game-layout:has(.play-area.in-game){display:block;flex:1;min-height:0}
.app .game-layout .play-area.in-game{height:100%;min-height:0;aspect-ratio:auto;background:#100d18}
.app:has(.play-area.in-game) .game-ribbon,.app:has(.play-area.in-game) .controls{flex-shrink:0}
@media(max-width:700px) and (orientation:portrait){.play-area:not(.in-game){min-height:550px}.arena-hud small{font-size:8px}.hero-card p{min-height:58px}.menu-footer p{font-size:8px}.selection-overlay .tiny-label{font-size:7px}}
@media(max-width:700px) and (orientation:portrait){.play-area.in-game{aspect-ratio:960/760;min-height:0}.play-area.in-game .dialog-backdrop{padding:12px}.play-area.in-game .dialog{padding:14px;max-height:100%}.play-area.in-game .dialog h2{font-size:28px;margin:7px 0}.play-area.in-game .dialog p{font-size:10px;margin:6px 0 10px;line-height:1.55}.play-area.in-game .dialog .weakness{font-size:10px;padding:9px;line-height:1.5}.play-area.in-game .dialog canvas{width:75px;height:65px}.play-area.in-game .dialog .primary{font-size:14px;padding:11px 15px;margin-top:10px}.play-area.in-game .dialog .secondary{padding:8px 10px;margin-top:10px;font-size:10px}.play-area.in-game .dialog .stats{gap:8px}.play-area.in-game .dialog .stats div{padding:6px 12px}.play-area.in-game .dialog .stats b{font-size:23px}.play-area.in-game .dialog .key-list{font-size:10px;line-height:1.7}.play-area.in-game .touch-stick{width:72px;height:72px;bottom:17px;left:13px}.play-area.in-game .touch-stick span{width:32px;height:32px;left:19px;top:19px}.play-area.in-game .toast{bottom:100px;font-size:12px;padding:7px 11px}}
.combat-coach{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);background:#171323de;border:1px solid #e8f06d66;border-radius:5px;padding:9px 15px;color:var(--lime);font:700 12px var(--body);text-align:center;max-width:90%;width:max-content;pointer-events:none;z-index:2}
.arena-hud small.guarded{color:#c5a8ff}.action-control.charged{background:#f48aa422}.action-control.charged>kbd{border-color:var(--pink);color:var(--pink)}
.toast{bottom:65px}
.floor-banner{position:absolute;left:50%;top:23%;transform:translateX(-50%);color:var(--cream);font:900 37px var(--display);text-shadow:3px 3px var(--ink);pointer-events:none;white-space:nowrap;opacity:0;z-index:2}.floor-banner.show{animation:floor-entry 1.8s both}@keyframes floor-entry{0%{opacity:0;translate:0 8px}15%,65%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -8px}}
@media(min-width:701px){
  .app{width:100%;max-width:none}.topbar{height:44px;padding:0 18px;display:flex}.brand img{width:27px;height:27px}.brand{font-size:12px}.brand b{font-size:9px}.icon-button{width:29px;height:29px;font-size:15px}.masthead,.page-footer{display:none}.game-shell{border-radius:0;border-left:0;border-right:0;box-shadow:none}.game-ribbon{height:32px;font-size:10px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 228px}.play-area{height:calc(100dvh - 146px);min-height:0;aspect-ratio:auto}.controls{height:68px;min-height:68px}.action-control{flex-direction:row;text-align:left}.move-control{display:flex}.tower-panel{max-height:calc(100dvh - 146px);min-height:0;overflow:auto}.arena-hud span{font-size:19px}.arena-hud small{font-size:10px}.tower-tip p{font-size:11px}.stop b{font-size:16px}.stop small{font-size:9px}.hero-tag{font-size:9px}.hero-card p{font-size:12px}.hero-card h3{font-size:28px}.hero-stats{font-size:9px}.selection-overlay{padding:28px}.menu-heading h2{font-size:44px}.menu-heading p{font-size:13px}.hero-art{height:140px}.menu-footer{display:flex}.menu-footer p{font-size:10px;max-width:220px}.primary{font-size:18px}
}
@media(min-width:701px) and (max-height:700px){
  .selection-overlay{padding:15px 22px}.menu-heading h2{font-size:32px;margin:5px 0}.menu-heading p{font-size:11px;margin:0 0 12px}.hero-art{height:82px}.hero-card .hero-info{padding:9px 11px!important}.hero-card h3{font-size:23px;margin:5px 0}.hero-card p{font-size:10px;min-height:28px;display:block;margin-bottom:7px}.hero-tag{font-size:7px}.hero-stats{display:flex;font-size:7px}.menu-footer{margin-top:12px;display:flex}.menu-footer .primary{font-size:16px;padding:11px 18px}.menu-footer p{font-size:9px;margin:0;max-width:200px}.tower-panel{padding:12px}.tower-heading{display:flex;margin-bottom:12px}.tower-heading h2{font-size:25px}.stop{min-height:45px;padding:7px;flex-direction:row}.stop canvas{display:block;width:30px;height:32px}.stop b{font-size:14px;text-align:left}.stop small{font-size:8px;display:block}.stop-number{font-size:19px;width:22px}.tower-stops{flex-direction:column-reverse;gap:6px}.tower-tip,.best-run{display:none}.controls{padding:6px 12px}.action-control small{display:block;font-size:9px}.move-control small{font-size:9px}.edition{font-size:8px}
}
@media(min-width:701px) and (max-height:540px){.menu-heading p{display:none}.hero-art{height:67px}.hero-card p{font-size:9px;min-height:26px}.hero-card h3{font-size:21px}.hero-card .hero-info{padding:7px 10px!important}.hero-stats{font-size:7px}.tiny-label{font-size:7px}.menu-heading h2{font-size:28px}.tower-heading{display:none}.stop small{font-size:8px}.stop b{font-size:13px}.controls .action-control{gap:7px;padding-left:9px}.action-control small{font-size:8px}.combat-coach{font-size:10px}}
@media(max-width:700px){.floor-banner{font-size:25px;top:27%}.combat-coach{font-size:9px;bottom:10px;max-width:92%;padding:6px 9px}.play-area.in-game .toast{bottom:94px}.arena-hud small{font-size:8px}.masthead{padding:14px 0}.masthead h1{font-size:26px}.masthead .eyebrow{font-size:7px}}

/* Landscape touch player: spend the viewport on the arena, not a keyboard footer. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body{overscroll-behavior:none}
  .app{width:100%;max-width:none;height:100dvh}
  .app .topbar,.app .masthead,.app .page-footer,.app .tower-panel{display:none}
  .app .game-shell{position:relative;height:100%;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .app .game-layout{display:block;flex:1;min-height:0}
  .app .play-area:not(.in-game){height:100%;min-height:0;aspect-ratio:auto}
  .app .game-ribbon{height:26px;min-height:26px;font-size:7px;letter-spacing:.6px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  .app .game-ribbon>span{display:none}
  .app .game-ribbon>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app .controls{display:none}
  .selection-overlay{padding:10px 20px}
  .menu-heading h2{font-size:26px;margin:4px 0 10px}
  .menu-heading p{display:none}
  .hero-art{height:64px}.hero-card .hero-info{padding:7px 10px!important}.hero-card h3{font-size:20px}.hero-card p{display:none}.hero-tag{font-size:7px}.hero-stats{display:flex;font-size:7px}
  .menu-footer{display:flex;margin-top:10px;gap:14px}.menu-footer .primary{font-size:16px;padding:10px 18px}.fight-picker{max-width:300px}
  .app:has(.play-area.in-game) .game-ribbon{position:absolute;inset:0 0 auto;height:26px;z-index:7;background:linear-gradient(#171323e8,#17132344);pointer-events:none}
  .app:has(.play-area.in-game) #pause{pointer-events:auto;min-height:26px;min-width:48px;font-size:9px}
  .app:has(.play-area.in-game) #pause kbd{display:none}
  .app:has(.play-area.in-game) .controls{position:absolute;display:grid;grid-template-columns:repeat(2,56px);gap:8px;right:max(10px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:120px;height:auto;min-height:0;padding:0;border:0;background:none;z-index:4;touch-action:none}
  .app .controls .move-control{display:none}
  .app .controls .action-control{width:56px;height:56px;min-width:56px;min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:3px;border:1px solid #c9b9dfaa;border-radius:50%;background:#251d36b8;box-shadow:0 2px 8px #0005;text-align:center;letter-spacing:.2px;font-size:8px}
  .app .controls .action-control>kbd,.app .controls .action-control small{display:none}
  .app .controls .action-control::before{font:800 21px/1 var(--body);color:var(--cream)}
  .app .controls #attack-button::before{content:'⚔'}
  .app .controls #dodge-button::before{content:'↗'}
  .app .controls #special-button::before{content:'✦'}
  .app .controls #trick-button::before{content:'!'}
  .app .controls #attack-button{background:#315b4bb8;border-color:#85dbb5}
  .app .controls #dodge-button{background:#585b31b8;border-color:var(--lime)}
  .app .controls #special-button{background:#513e6eb8;border-color:#c5a8ff}
  .app .controls #trick-button{background:#683d55b8;border-color:var(--pink)}
  .app .controls .action-control>i{left:10px;bottom:7px;width:calc(36px*var(--cooldown,0));height:3px;border-radius:2px}
  .app .controls .action-control.pressed{background:#f2ecdc55;transform:scale(.94)}
  .play-area.in-game .touch-stick.visible{display:block;width:84px;height:84px;left:max(20px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));z-index:4;background:#17132388;border:2px solid #f2ecdc66}
  .play-area.in-game .touch-stick span{width:36px;height:36px;left:22px;top:22px}
  .arena-hud{top:32px;left:12px;right:12px;gap:14px}.arena-hud span{font-size:14px}.arena-hud small{font-size:7px}.bar{height:8px;margin:3px 0}
  .combat-coach{font-size:9px;bottom:7px;padding:6px 9px;max-width:84%}
  .play-area.in-game .toast{bottom:45px;font-size:12px;padding:6px 10px;max-width:80%}
  .floor-banner{font-size:25px;top:23%}
}
#rotate-phone{display:none}html[data-release=true] .fight-picker{display:none!important}
@media(any-pointer:coarse) and (orientation:portrait){
 #rotate-phone{display:flex;position:fixed;inset:0;z-index:10000;background:#171323;color:#f2ecdc;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;touch-action:none}
 #rotate-phone>span{font-size:72px;color:#e8f06d}#rotate-phone h2{font:900 34px var(--display);margin:22px 0 8px}#rotate-phone p{line-height:1.7}#rotate-phone small{color:#bd91dc}
 body{overflow:hidden}.app{visibility:hidden}
}
#tutorial-guide{position:fixed;top:28px;left:50%;transform:translateX(-50%);z-index:6;width:min(420px,65vw);padding:9px 14px;background:#231b30f5;border:1px solid #e8f06d;border-radius:8px;text-align:center;box-shadow:0 3px 12px #0008}#tutorial-guide b{font-size:10px;color:#e8f06d}#tutorial-guide p{font-size:12px;margin:5px 0;line-height:1.4}#tutorial-skip{background:none;border:0;text-decoration:underline;font-size:10px;color:#c7b9d2}@media(any-pointer:coarse) and (orientation:portrait){#tutorial-guide{display:none}}
/* Tutorial replay is a real secondary action, including outside dialogs. */
.menu-footer #tutorial-replay{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border:1px solid #85dbb5;border-radius:4px;background:#85dbb512;color:#b7efd5;font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:.5px;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.menu-footer #tutorial-replay:hover{background:#85dbb52b}.menu-footer #tutorial-replay:active{transform:translateY(1px)}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){.menu-footer #tutorial-replay{min-height:44px;padding:9px 12px;font-size:14px}}

/* ===== Harakoo polish (2026-10-24): readable at CrazyGames' smallest 907x510 frame ===== */
.tiny-label,.hero-tag,.hero-stats>span,.floor-count>small,.best-run>span,.edition-divider,#pause>kbd,#touch-stick>b,.enemy-intro-card>.tiny-label{font-size:12px}
.hero-info>p,.enemy-intro-card>small,.menu-heading>p,p#tower-tip,p.eyebrow,.best-run>b,small,small#dodge-hint,small#special-hint,small#trick-hint{font-size:13px}
.combat-coach,#ribbon-title,#run-timer,#hero-hp,#boss-status,#tutorial-step,#tutorial-skip,.enemy-intro-card>.intro-title{font-size:13px}
kbd,.keys>kbd,#attack-button>kbd,#dodge-button>kbd,#special-button>kbd,#trick-button>kbd{font-size:12px}
/* the tutorial card used to sit on the HUD and hide the boss's name and health */
#tutorial-guide{top:auto;bottom:calc(var(--tutorial-bottom,96px))}
@media (max-height:600px){#tutorial-guide{--tutorial-bottom:84px;padding:7px 12px}}
/* hero cards are buttons, which centre their content vertically; keep every card top-aligned */
.hero-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.action-control small,small#dodge-hint,small#special-hint,small#trick-hint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* while the guided tutorial is up, its card replaces the small controls reminder in the same spot */
body:has(#tutorial-guide:not([hidden])) .combat-coach{display:none}

/* Guided fight: the one button that works glows, the rest step back */
.action-control.tutorial-locked{opacity:.32}
.action-control.tutorial-live{box-shadow:inset 0 0 0 2px #e8f06d;background:#e8f06d1f}

/* Fill itch.io's iframe without the surrounding website chrome. */
html[data-platform=itch],html[data-platform=itch] body{height:100%;margin:0;overflow:hidden}
html[data-platform=itch] .app{width:100%;max-width:none;height:100dvh;margin:0}
html[data-platform=itch] .topbar,html[data-platform=itch] .masthead,html[data-platform=itch] .page-footer,html[data-platform=itch] .tower-panel{display:none}
html[data-platform=itch] .game-shell{height:100%;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none}
html[data-platform=itch] .game-layout{flex:1;min-height:0;display:block}
html[data-platform=itch] .play-area{height:100%;min-height:0;aspect-ratio:auto}
html[data-platform=itch] .selection-overlay{overflow:auto}
html[data-platform=itch] body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-platform=itch] #tutorial-replay{padding:9px 14px;border:1px solid #756081;border-radius:4px;background:#30273c;font-size:12px}
html[data-platform=itch] .menu-footer{display:flex;align-items:center;gap:12px}

/* Harakoo: the way home; a game framed by another site has no use for it */
.harakoo-home{display:inline-flex;flex:none;margin-right:8px}
.harakoo-home img{display:block;width:26px;height:26px}
.game-ribbon{display:flex;align-items:center}
.game-ribbon>div{flex:0 1 auto}
.game-ribbon>#run-timer{margin-left:auto}