:root{color-scheme:light;--ink:#173d42;--cream:#fff8e8;--yellow:#ffd35c;--green:#c9e994}
#impact-flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#fff6ce99,#ffc85f66 60%,transparent);mix-blend-mode:screen}
@media(max-width:1050px){#hud .hud-buttons{bottom:auto;top:110px}}
#aim-panel{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));padding:16px 20px;background:#173d42f0;color:var(--cream);border:2px solid #fff2c9;border-radius:12px;box-shadow:4px 5px #173d4266;text-align:center}#aim-panel .eyebrow{font-size:8px;color:#ffdc79}#aim-title{display:block;font-size:21px;margin:8px 0 5px}#aim-verdict{display:block;font-size:10px;font-weight:900;letter-spacing:1px}#aim-panel p{font-size:8px;letter-spacing:.4px;font-weight:900;margin:12px 0 0}#aim-panel p span{margin:0 6px;opacity:.5}#aim-panel kbd{color:#ffdf8a}#aim-panel small{font-size:8px;letter-spacing:1px}.aim-meter{height:4px;background:#fff3;border-radius:3px;margin:12px auto 5px;width:60%;overflow:hidden}.aim-meter i{display:block;height:100%;background:#d8f7a6}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#8bd4de;font-family:'Trebuchet MS',Arial,sans-serif;color:var(--ink)}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}canvas#game{display:block;width:100%;height:100%}
#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(18,54,58,.28),transparent 47%),linear-gradient(0deg,rgba(18,54,58,.18),transparent 25%)}.screen{position:fixed;inset:0;pointer-events:none}.screen button{pointer-events:auto}.brand{position:absolute;left:4.3%;top:7%;width:55%;color:var(--cream);filter:drop-shadow(0 3px 0 rgba(24,61,66,.24))}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;display:block}.brand .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px}.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--yellow)}h1{font-family:'Arial Black',Impact,sans-serif;font-size:clamp(50px,6.5vw,102px);font-style:italic;line-height:.91;letter-spacing:-6px;margin:0;transform:rotate(-3deg);transform-origin:left;text-shadow:4px 6px 0 var(--ink)}h1 em{color:var(--yellow);font-style:inherit}.brand p{font-size:16px;line-height:1.5;margin-top:24px;text-shadow:0 1px 2px #27494c}.brand p strong{font-size:12px;letter-spacing:.2px}.sticker{position:absolute;left:330px;top:235px;transform:rotate(8deg);background:var(--yellow);color:var(--ink);padding:14px 16px;font-size:11px;font-weight:900;letter-spacing:1px;box-shadow:4px 4px 0 var(--ink);border:2px solid var(--ink);border-radius:50% 50% 48% 48%}.sticker b{font-size:12px}
.pick-panel{position:absolute;right:3.5%;bottom:12%;width:350px;background:var(--cream);padding:22px;border:2px solid var(--ink);border-radius:14px;box-shadow:7px 8px 0 rgba(23,61,66,.8);pointer-events:auto}.panel-heading{margin-bottom:14px}.tiny{display:block;font-size:9px;letter-spacing:1px;margin-top:7px;font-weight:800;opacity:.55}.character-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid #d8d8c7;border-radius:8px;padding:10px;margin:7px 0;background:transparent;position:relative;transition:transform .15s,background .15s}.character-choice:hover{transform:translateX(-3px)}.character-choice.selected{background:#f9d56f;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.choice-number{font-family:'Arial Black',Arial,sans-serif;border-radius:7px;width:42px;height:47px;display:grid;place-items:center;color:#fff9e9;font-size:22px;text-shadow:1px 2px #173d4266;border:2px solid #173d4255}.character-choice strong{font-size:18px;display:block;line-height:1.1}.character-choice small{display:block;font-size:10px;margin-top:3px;opacity:.75}.character-choice .tick{margin-left:auto;font-weight:bold;font-size:20px}.primary{width:100%;padding:15px 12px;background:var(--yellow);border:2px solid var(--ink);border-radius:8px;box-shadow:0 4px 0 var(--ink);font-weight:900;letter-spacing:.8px;font-size:14px;margin:12px 0 5px;transition:transform .12s,box-shadow .12s}.primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.panel-footer{display:flex;justify-content:space-between;margin-top:13px}.text-button{border:0;background:transparent;font-size:10px;font-weight:900;letter-spacing:1px;padding:5px 0}.text-button:hover{text-decoration:underline}
.menu-controls{position:absolute;left:4.3%;bottom:6%;display:flex;gap:20px;font-size:10px;color:var(--cream);font-weight:900;letter-spacing:.8px}.menu-controls span{display:flex;gap:7px;align-items:center}kbd{display:inline-block;padding:4px 6px;border:1px solid currentColor;border-radius:4px;font-family:inherit;font-size:9px;font-weight:900;white-space:nowrap}.menu-tip{position:absolute;right:3.5%;bottom:5%;font-size:10px;letter-spacing:1.5px;font-weight:900;color:var(--cream)}.menu-tip span{color:var(--yellow)}
#hud{position:fixed;inset:0;pointer-events:none}#hud button{pointer-events:auto}.hud-brand{position:absolute;top:25px;left:30px;font-family:'Arial Black',Arial,sans-serif;font-size:26px;font-style:italic;line-height:.85;letter-spacing:-1.6px;color:var(--cream);text-shadow:2px 3px var(--ink)}.hud-brand span{display:block;color:var(--yellow);font-size:32px}.hud-brand small{font-family:'Trebuchet MS',Arial,sans-serif;display:block;font-style:normal;font-size:10px;letter-spacing:1px;margin-top:13px;text-shadow:0 1px #173d42}.timer-card{position:absolute;left:50%;top:22px;transform:translateX(-50%);background:var(--cream);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 4px var(--ink);width:148px;text-align:center;padding:9px 12px}.timer-card small,.score-card small{font-weight:900;font-size:8px;letter-spacing:2px;display:block}.timer-card strong{font-size:39px;letter-spacing:-2px;line-height:1.1;font-variant-numeric:tabular-nums}.time-track{height:4px;background:#dddccc;border-radius:5px;margin-top:5px;overflow:hidden}.time-track i{display:block;height:100%;background:#62ad97;width:100%;transition:width .1s}.timer-card.urgent{background:#ffdc91;animation:tick 1s infinite}@keyframes tick{50%{transform:translateX(-50%) scale(1.04)}}.score-card{position:absolute;top:25px;right:30px;text-align:right;color:var(--cream);text-shadow:1px 2px var(--ink)}.score-card strong{font-family:'Arial Black',Arial,sans-serif;font-size:46px;display:block;letter-spacing:-2px;line-height:1.15}.score-card>span{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--yellow)}
.floor-guide{position:absolute;left:26px;top:160px;width:178px;background:#173d42dd;border:1px solid #fff3;border-radius:10px;color:var(--cream);padding:13px;backdrop-filter:blur(5px)}.guide-heading{font-size:9px;font-weight:900;letter-spacing:1.6px;margin-bottom:11px}.tier{display:flex;gap:9px;align-items:center;margin:9px 0;opacity:.72}.tier.current{opacity:1;transform:translateX(3px)}.tier .floor{width:27px;height:27px;display:grid;place-items:center;background:var(--tier);color:var(--ink);font-weight:900;border-radius:5px;font-size:13px}.tier .tier-text{font-size:10px;line-height:1.3;flex:1}.tier .tier-text strong{display:block;font-size:11px;color:var(--tier)}.floor-guide p{font-size:9px;line-height:1.4;opacity:.65;margin:12px 0 0}#floor-pill{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:var(--cream);border:2px solid var(--ink);box-shadow:2px 3px var(--ink);padding:9px 15px;border-radius:20px;font-size:11px;font-weight:900;white-space:nowrap}#floor-pill span{color:#be673b;margin-left:10px}.play-controls{position:absolute;bottom:27px;left:26px;display:flex;gap:15px;font-size:9px;font-weight:900;color:var(--cream);align-items:center;text-shadow:1px 1px var(--ink)}.play-controls span{display:flex;gap:5px;align-items:center}.play-controls button{border:0;background:transparent;padding:0;color:inherit;font-size:9px;font-weight:900}.fart-button{position:absolute;right:26px;bottom:26px;display:flex;align-items:center;gap:10px;background:var(--green);padding:11px 15px;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 4px var(--ink);text-align:left}.fart-button>kbd{font-size:16px;padding:5px 8px;border:2px solid}.fart-button span{font-weight:900;font-size:13px}.fart-button small{display:block;font-size:7px;letter-spacing:.8px;margin-top:2px}.fart-button b{font-size:32px;line-height:1}.fart-button.cooling{opacity:.6}.hud-buttons{position:absolute;right:26px;bottom:106px;display:flex;gap:8px}.hud-buttons button{border:1px solid #fff9;color:var(--cream);background:#173d42aa;border-radius:5px;padding:6px 9px;font-weight:900;font-size:9px}
#aim-label{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:900;color:var(--cream);background:#173d42dd;padding:8px 12px;border-radius:6px;opacity:0}#toast{position:absolute;top:23%;left:50%;transform:translateX(-50%) rotate(-4deg) scale(.7);text-align:center;opacity:0;transition:opacity .15s,transform .15s;filter:drop-shadow(3px 4px var(--ink));width:70%}#toast.show{opacity:1;transform:translateX(-50%) rotate(-4deg) scale(1)}#toast strong{font-family:'Arial Black',Arial,sans-serif;font-style:italic;font-size:clamp(28px,4vw,55px);color:var(--yellow);-webkit-text-stroke:1px var(--ink);display:block;letter-spacing:-2px}#toast span{font-size:12px;font-weight:900;color:var(--cream);letter-spacing:1px;text-shadow:1px 1px var(--ink)}
.modal{position:fixed;inset:0;background:#13393da8;backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px;z-index:10}.modal-card{background:var(--cream);padding:30px;border:2px solid var(--ink);border-radius:15px;box-shadow:7px 8px var(--ink);width:min(480px,95vw);max-height:94vh;overflow:auto;text-align:center}.modal-card h2{font-family:'Arial Black',Arial,sans-serif;font-style:italic;font-size:32px;letter-spacing:-1.4px;line-height:1.05;margin:15px 0}.modal-card>p{font-size:13px;line-height:1.5}.secondary{border:2px solid var(--ink);background:transparent;border-radius:7px;padding:10px 14px;font-weight:900;font-size:11px;margin-top:8px}.secondary:hover{background:#e1ead6}.small{font-size:10px!important;opacity:.65}.result-score{font-family:'Arial Black',Arial,sans-serif;font-size:70px;line-height:1.1;letter-spacing:-4px;color:#da6e3d}#stats{display:flex;justify-content:space-around;border-top:1px solid #c5c7b8;border-bottom:1px solid #c5c7b8;margin:19px 0;padding:13px 0}#stats strong{font-size:22px;display:block}#stats span{font-size:8px;letter-spacing:.5px}.name-label{display:block;font-size:9px;font-weight:900;letter-spacing:1px}.name-row{display:flex;gap:8px;margin-top:8px}.name-row input{min-width:0;width:100%;border:2px solid var(--ink);border-radius:7px;background:#fffdf5;padding:9px 11px;color:var(--ink);font-size:13px}.name-row button{margin:0;white-space:nowrap}#result-menu{margin-top:13px}.board-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 7px;border-bottom:1px solid #dedfd0;text-align:left;font-size:13px}.board-row:first-child{background:#ffdf85;border-radius:5px}.board-row small{display:block;font-size:9px;opacity:.6;margin-top:2px}.board-row b{font-size:18px}.board-row .rank{font-weight:900;opacity:.6}#credit-lines{font-size:10px;text-align:left;max-height:220px;overflow:auto;line-height:1.6;border-top:1px solid #dedfd0;padding-top:10px}#test-label{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#fff5d5;background:#173d42bd;padding:7px 12px;border-radius:5px}#loading-error{position:fixed;inset:30%;background:var(--cream);padding:30px;border-radius:10px;z-index:30;font-size:14px;line-height:1.5}
@media(max-width:950px){h1{font-size:65px;letter-spacing:-4px}.brand{top:7%}.sticker{left:190px;top:190px}.pick-panel{width:300px;padding:17px;bottom:14%}.menu-controls{gap:10px;bottom:5%;font-size:8px}.menu-tip{display:none}.floor-guide{width:150px;left:15px;top:143px}.play-controls{gap:9px;font-size:8px;bottom:22px;left:15px}.play-controls button{display:none}.fart-button{right:15px;bottom:18px}.hud-brand{left:18px;top:20px}.score-card{right:20px}.floor-guide p{display:none}.tier{margin:7px 0}#floor-pill{bottom:90px}}
@media(max-height:650px){.brand{top:5%}h1{font-size:60px;letter-spacing:-4px}.brand .eyebrow{margin-bottom:16px}.brand p{font-size:12px;margin-top:16px}.sticker{top:170px;left:210px;padding:10px}.pick-panel{bottom:12%;padding:15px;width:310px}.character-choice{padding:7px;margin:5px 0}.choice-number{height:35px;width:35px;font-size:18px}.character-choice strong{font-size:16px}.panel-heading{margin-bottom:9px}.floor-guide{top:125px}.hud-brand{font-size:23px}.timer-card{top:15px}.score-card strong{font-size:38px}.tier{margin:5px 0}.floor-guide p{display:none}.modal-card{padding:20px}.modal-card h2{font-size:25px;margin:10px 0}.result-score{font-size:55px}#stats{margin:12px 0;padding:8px 0}}
@media(max-width:650px){.brand{top:4%;left:6%}h1{font-size:48px}.brand p,.sticker{display:none}.brand .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:12px}.pick-panel{bottom:13%;width:270px;right:5%;padding:14px}.menu-controls{left:5%;right:5%;gap:7px;flex-wrap:wrap}.menu-controls span{font-size:7px}.floor-guide{display:none}.hud-brand{font-size:18px}.hud-brand span{font-size:24px}.timer-card{width:110px}.timer-card strong{font-size:31px}.score-card strong{font-size:29px}.score-card{right:15px}.play-controls span:last-of-type{display:none}.fart-button{padding:9px;gap:5px}.fart-button span{font-size:10px}.fart-button b{display:none}.hud-brand small{font-size:8px}#floor-pill{font-size:9px}}
