:root{color-scheme:dark;--cream:#fff0a0;--brown:#3b160d;--red:#f05135}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#210b06;font-family:Trebuchet MS,Arial,sans-serif}button{font:inherit;touch-action:manipulation}#stage{position:relative;width:min(100vw,1600px);aspect-ratio:16/9;max-height:100vh;margin:auto;overflow:hidden;border:5px solid #ffcf54;border-radius:24px;background:#d66a2b;box-shadow:0 0 0 7px #4b1b0e;user-select:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}.hidden{display:none!important}.rotate-lock{position:fixed;z-index:9999;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:#fff0a6;background:radial-gradient(circle,#8e3417,#250c07 68%)}.rotate-lock .phone-icon{width:94px;height:154px;display:grid;place-items:center;border:7px solid #ffe278;border-radius:19px;font-size:65px;line-height:1;transform:rotate(90deg);box-shadow:0 9px #6e2313}.rotate-lock strong{margin-top:28px;font-size:clamp(30px,8vw,68px);line-height:.95;text-shadow:4px 5px #8c2c18}.rotate-lock p{margin:14px 0 20px;font-size:clamp(15px,3vw,23px);font-weight:900}.rotate-lock button{padding:13px 20px;border:3px solid #fff0a0;border-radius:16px;color:#351209;background:linear-gradient(#ffe56c,#ff852d);box-shadow:0 6px #8d2c18;font-weight:1000}#sound{position:absolute;z-index:80;right:14px;top:12px;width:44px;height:44px;border:3px solid #ffe788;border-radius:50%;color:#fff6bd;background:#4d1c10;box-shadow:0 5px #241007;font-weight:1000;font-size:22px}#hud{position:absolute;z-index:40;inset:0 0 auto;height:74px;display:flex;align-items:center;justify-content:space-between;padding:10px 68px 10px 20px;color:#fff5bd;background:linear-gradient(#4b1c10da,transparent);text-shadow:2px 3px #6d2412;pointer-events:none}#hud div:first-child{display:flex;flex-direction:column}#hud small{font-weight:1000;letter-spacing:.2em}#hud strong{font-size:30px}#hud>b{font-size:25px}#hud i{color:#ff5840;font-style:normal}#hearts{font-size:28px;color:#f54839;letter-spacing:3px}.panel{position:absolute;z-index:60;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6vh 7vw;text-align:center;color:#fff1b5;background:radial-gradient(circle at 50% 42%,#9b3b178c,#2b0e08e8 70%),linear-gradient(90deg,#2e0e09cf,transparent 35% 65%,#2e0e09cf)}.panel>span{padding:7px 14px;border:2px solid #ffe187;border-radius:30px;background:#5b1d0fd9;font-weight:1000;letter-spacing:.17em}.panel h1{margin:12px 0 0;font-size:clamp(65px,11vw,168px);line-height:.82;letter-spacing:-.07em;transform:rotate(-2deg);color:#fff0a6;-webkit-text-stroke:2px var(--brown);text-shadow:5px 7px #c64622,9px 12px #58180e}.panel h1 i{color:#ff5b3f;font-style:normal}.panel p{max-width:760px;margin:24px auto 18px;font-weight:900;font-size:clamp(14px,1.5vw,21px)}.panel button{min-width:230px;padding:15px 29px;border:4px solid #fff0a0;border-radius:18px;color:#3e160d;background:linear-gradient(#ffe56c,#ff852d);box-shadow:0 8px #8d2c18;font-size:clamp(21px,2.5vw,35px);font-weight:1000;transform:rotate(-2deg)}.panel button:disabled{opacity:.7;filter:grayscale(.4)}.rules{margin-top:22px;color:#ffe7a0;font-weight:900}.panel>small{margin-top:12px;color:#ffc956;font-weight:900}.action{position:absolute;z-index:55;right:3%;bottom:4%;width:clamp(90px,10vw,145px);aspect-ratio:1;border:4px solid #fff0a7;border-radius:50%;color:#fffbd2;background:radial-gradient(circle at 37% 27%,#ffe26b,#f75d32 60%,#8b2516);box-shadow:0 8px #641a10;text-shadow:2px 2px #67190f;font-weight:1000}.action span{display:block;font-size:42px;line-height:.7}.action:active{transform:translateY(6px)}.struggle{position:absolute;z-index:50;left:50%;bottom:4%;width:min(58%,600px);transform:translateX(-50%);text-align:center;color:#fff3a5;text-shadow:2px 3px #4f170e}.struggle strong{font-size:clamp(15px,2.1vw,30px)}.struggle div{height:18px;margin-top:8px;border:3px solid #fff0a7;border-radius:18px;background:#54170f;overflow:hidden}.struggle i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff5937,#ffe56d)}#gameover h2{margin:10px 0;color:#ffe374;font-size:clamp(80px,14vw,180px);line-height:.8;text-shadow:5px 7px #b33a20}#gameover h2 small{font-size:.15em}@media(max-width:760px){#stage{width:100vw;height:100svh;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}canvas{object-fit:cover;object-position:center}#hud{height:62px;padding:7px 53px 7px 10px}#hud strong{font-size:22px}#hud>b{font-size:16px}#hearts{font-size:20px}.panel{padding:6vh 16px}.panel h1{font-size:clamp(58px,19vw,105px);-webkit-text-stroke:1px var(--brown)}.panel p{font-size:15px}.rules{max-width:420px}.action{width:96px}.struggle{width:64%}}@media(max-height:500px){.panel{padding:10px}.panel>span{font-size:10px}.panel h1{font-size:24vh}.panel p{margin:8px auto;font-size:12px}.panel button{padding:9px 20px}.rules{margin-top:8px;font-size:11px}.action{width:76px}}

/* Full-screen landscape game. In a portrait viewport the complete game surface
   rotates itself; the user never sees a rotate-device gate. */
body{display:block}
#stage{position:fixed;left:50%;top:50%;width:100vw;height:100vh;max-height:none;aspect-ratio:auto;margin:0;transform:translate(-50%,-50%);transform-origin:center;border:0;border-radius:0;box-shadow:none}
canvas{object-fit:fill;object-position:center}
@media(orientation:portrait){#stage{width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}}