:root{color:#fff8df;font-synthesis:none;--ink:#102b31;--teal:#1b7775;--teal-bright:#4fd4bd;--orange:#eb7540;--gold:#f4c65f;--cream:#fff4cf;--panel:#0d292ff0;background:#102b31;font-family:Trebuchet MS,Avenir Next,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;background:#102b31}button,input,select{font:inherit}button{touch-action:manipulation}#game-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui-root{pointer-events:none;z-index:2;position:fixed;inset:0}.hidden{display:none!important}.screen{pointer-events:auto;position:absolute;inset:0}#boot-screen{z-index:20;color:var(--cream);letter-spacing:.12em;text-transform:uppercase;background:radial-gradient(circle at 50% 35%,#226c6c,#0b242b 70%);place-content:center;justify-items:center;gap:16px;font-weight:900;transition:opacity .55s,visibility .55s;display:grid;position:fixed;inset:0}#boot-screen.loaded{opacity:0;visibility:hidden}.boot-mark{border:3px solid var(--gold);width:72px;height:72px;color:var(--gold);border-radius:24px 24px 32px 32px;place-items:center;font-size:42px;font-weight:1000;animation:1s ease-in-out infinite alternate boot-bob;display:grid;box-shadow:0 0 50px #f4c65f47}@keyframes boot-bob{to{transform:translateY(-8px)rotate(3deg)}}.title-screen{background:#10242a;overflow:hidden}.title-art{background:url(/assets/mouthbound-title-art.png) 50%/cover no-repeat;animation:18s ease-in-out infinite alternate title-drift;position:absolute;inset:0;transform:scale(1.015)}@keyframes title-drift{to{transform:scale(1.055)translate(-.6%)}}.title-shade{background:linear-gradient(90deg,#071a21f5 0%,#081d25b8 28%,#08192214 62%,#0513192e 100%),linear-gradient(#0000 58%,#0512169e);position:absolute;inset:0}.title-copy{z-index:1;width:min(510px,43vw);position:absolute;top:50%;left:clamp(26px,7vw,120px);transform:translateY(-50%)}.eyebrow{color:var(--gold);letter-spacing:.23em;text-transform:uppercase;font-size:12px;font-weight:1000}.title-copy h1{letter-spacing:-.07em;text-transform:uppercase;text-shadow:0 9px #0000002b,0 15px 50px #00000073;margin:10px 0 8px;font-size:clamp(62px,7.3vw,118px);line-height:.75}.title-copy h1 span{color:var(--gold);letter-spacing:.08em;font-size:.78em}.title-copy>p{color:#fff8dfd1;max-width:410px;margin:22px 0 25px;font-size:clamp(15px,1.25vw,20px)}.menu-buttons{grid-template-columns:1fr 1fr;gap:9px;width:min(355px,100%);display:grid}button{min-height:48px;color:var(--cream);letter-spacing:.015em;cursor:pointer;background:#0c2d33e0;border:1px solid #ffffff2e;border-radius:13px;padding:12px 18px;font-weight:900;transition:transform .16s,background .16s,border-color .16s;box-shadow:inset 0 1px #ffffff12,0 8px 20px #00000024}button:hover,button:focus-visible{background:#245e61;border-color:#ffffff61;outline:none;transform:translateY(-2px)}button:active{transform:translateY(1px)}button.primary{color:#263523;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(#ffd775,#e8a844);border-color:#ffe29a;grid-column:1/-1;min-height:57px;box-shadow:inset 0 2px #ffffff80,0 8px 26px #f0b24433}button.primary:hover{background:linear-gradient(#ffe292,#efb34c)}.title-footer{z-index:2;color:#ffffff94;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:800;position:absolute;bottom:28px;left:clamp(26px,7vw,120px)}.hud{pointer-events:none}.hud-top{top:max(18px, env(safe-area-inset-top));left:max(20px, env(safe-area-inset-left));right:max(20px, env(safe-area-inset-right));justify-content:space-between;align-items:flex-start;gap:16px;display:flex;position:absolute}.level-pill,.stats-strip,.round-button{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#0f3037eb,#092127e6);border:1px solid #ffffff24;box-shadow:0 10px 35px #0311143d,inset 0 1px #ffffff14}.level-pill{border-radius:13px;flex-direction:column;gap:2px;min-width:218px;padding:10px 17px 11px;display:flex}.level-pill span{color:var(--gold);letter-spacing:.16em;font-size:10px;font-weight:1000}.level-pill strong{font-size:16px}.stats-strip{border-radius:13px;display:flex;overflow:hidden}.stats-strip>div{text-align:center;border-right:1px solid #ffffff1a;min-width:94px;padding:9px 16px}.stats-strip>div:last-child{border-right:0}.stats-strip span,.result-grid span{color:#fff9;letter-spacing:.12em;font-size:9px;font-weight:1000;display:block}.stats-strip strong{color:var(--cream);font-size:18px}.round-button{pointer-events:auto;border-radius:50%;min-width:46px;min-height:46px;padding:0;font-size:19px}.combo-badge{background:var(--orange);color:#fff;letter-spacing:.08em;border-radius:9px;padding:8px 16px;font-weight:1000;animation:.28s cubic-bezier(.2,1.8,.4,1) combo-pop;position:absolute;top:92px;left:50%;transform:translate(-50%)rotate(-2deg);box-shadow:0 6px 20px #5218134d}@keyframes combo-pop{0%{transform:translate(-50%)scale(.3)rotate(-8deg)}}.kick-prompt{left:50%;bottom:max(54px, calc(env(safe-area-inset-bottom) + 20px));color:#efffe9;background:linear-gradient(#187653e8,#084440f0);border:2px solid #b6ffd0;border-radius:19px;place-items:center;min-width:168px;padding:9px 25px 12px;animation:.72s ease-in-out infinite alternate kick-breathe;display:grid;position:absolute;transform:translate(-50%);box-shadow:0 0 0 5px #45f09b24,0 12px 38px #04201b61}.kick-prompt small{color:#9ef6c0;letter-spacing:.2em;font-size:9px;font-weight:1000}.kick-prompt strong{letter-spacing:.06em;margin-top:-2px;font-size:28px;line-height:1}.kick-prompt span{color:#ffffffbf;margin-top:4px;font-size:10px}kbd{background:#0000002e;border:1px solid #ffffff59;border-radius:4px;padding:2px 5px;font:900 9px inherit}@keyframes kick-breathe{to{transform:translate(-50%)scale(1.04);box-shadow:0 0 0 9px #45f09b0f,0 14px 42px #04201b6b}}.tutorial-card{border-left:4px solid var(--gold);background:linear-gradient(110deg,#0d2b31f5,#0e3339e3);border-radius:4px 17px 17px 4px;width:min(330px,100vw - 52px);padding:21px 23px;animation:.45s cubic-bezier(.2,.8,.2,1) tutorial-in;position:absolute;top:50%;left:max(26px,5vw);transform:translateY(-50%);box-shadow:0 18px 50px #04141659}@keyframes tutorial-in{0%{opacity:0;transform:translate(-35px,-50%)}}.tutorial-step{color:var(--gold);letter-spacing:.18em;font-size:10px;font-weight:1000}.tutorial-card strong{margin-top:6px;font-size:23px;line-height:1.05;display:block}.tutorial-card p{color:#ffffffb3;margin:7px 0 0;font-size:13px;line-height:1.4}.danger-vignette{opacity:0;pointer-events:none;background:radial-gradient(circle,#0000 45%,#de503647 100%);transition:opacity .2s;position:absolute;inset:0;box-shadow:inset 0 0 70px #ea502d1f}.danger-vignette.active{opacity:1;animation:.72s ease-in-out infinite alternate danger-pulse}@keyframes danger-pulse{to{opacity:.58}}.modal{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#05161bb8;place-items:center;padding:22px;display:grid}.modal-panel{text-align:center;background:radial-gradient(circle at 50% 0, #2669676b, transparent 45%), var(--panel);border:1px solid #ffffff29;border-radius:26px;width:min(670px,95vw);max-height:min(90vh,830px);padding:clamp(25px,4vw,46px);animation:.3s cubic-bezier(.16,.8,.25,1) modal-in;overflow:auto;box-shadow:0 35px 100px #0000007a,inset 0 1px #ffffff14}@keyframes modal-in{0%{opacity:0;transform:translateY(15px)scale(.95)}}.modal-panel h2{color:var(--cream);letter-spacing:-.04em;margin:7px 0 8px;font-size:clamp(30px,5vw,50px);line-height:1}.modal-panel>p{color:#ffffffb3;max-width:500px;margin:8px auto 22px;line-height:1.5}.modal-icon{border:2px solid var(--gold);width:64px;height:64px;color:var(--gold);border-radius:50%;place-items:center;margin:-10px auto 10px;font-size:30px;display:grid}.modal-buttons{grid-template-columns:1fr 1fr;gap:10px;width:min(420px,100%);margin:24px auto 0;display:grid}.modal-buttons button.primary{grid-column:1/-1}.caught-title{color:var(--orange);letter-spacing:-.05em;text-shadow:0 6px #783928;font-size:clamp(52px,9vw,88px);font-weight:1000;line-height:.9;transform:rotate(-2deg)}.tip-card{text-align:left;color:#ffffffbd;background:#eb75401c;border:1px solid #f4c65f40;border-radius:12px;max-width:480px;margin:22px auto;padding:15px 18px;font-size:13px;line-height:1.45}.tip-card b{color:var(--gold);letter-spacing:.13em;margin-right:8px;font-size:10px}.stars{margin:14px 0 20px}.star{color:#ffffff21;filter:drop-shadow(0 5px 8px #0003);margin:0 5px;font-size:48px;display:inline-block}.star.earned{color:var(--gold);animation:.5s cubic-bezier(.2,1.8,.4,1) both star-pop}.star:nth-child(2){animation-delay:.12s}.star:nth-child(3){animation-delay:.24s}@keyframes star-pop{0%{transform:scale(.1)rotate(-100deg)}}.result-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.result-grid>div{background:#ffffff0e;border-radius:12px;padding:14px 8px}.result-grid b{color:var(--cream);margin-top:4px;font-size:20px;display:block}.level-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin:22px 0;display:grid}.level-card{text-align:left;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;min-height:76px;display:grid}.level-card>span{color:var(--gold);font-size:20px}.level-card b{font-size:13px}.level-card small{color:var(--gold);letter-spacing:.06em}.level-card.locked{opacity:.38;cursor:not-allowed;filter:saturate(.1)}.level-card.locked:hover{background:#0c2d33e0;transform:none}.instructions-grid{text-align:left;grid-template-columns:1fr 1fr;gap:9px;margin:24px 0;display:grid}.instruction{background:#ffffff0e;border-radius:13px;align-items:center;gap:13px;min-height:92px;padding:14px;display:flex}.instruction i{height:49px;color:var(--gold);border:1px solid #ffffff2e;border-radius:12px;flex:0 0 49px;place-items:center;font-size:15px;font-style:normal;font-weight:1000;display:grid}.instruction b{font-size:14px}.instruction p{color:#ffffff91;margin:4px 0 0;font-size:11px;line-height:1.35}.danger-rule i{color:#ff896d}.safe-rule i{color:#7ee9aa}.settings-list{text-align:left;gap:16px;max-width:500px;margin:28px auto;display:grid}.settings-list label{color:var(--cream);gap:8px;font-size:13px;font-weight:900;display:grid}.settings-list label>span{justify-content:space-between;display:flex}.settings-list output{color:var(--gold)}input[type=range]{width:100%;accent-color:var(--gold)}.toggle-row{align-items:center;padding:12px 0;grid-template-columns:1fr auto!important}.toggle-row input{width:22px;height:22px;accent-color:var(--orange)}select{color:#fff;background:#153d43;border:1px solid #ffffff2e;border-radius:10px;min-height:44px;padding:8px 12px;font-weight:900}.debug-panel{z-index:7;color:#aef8ff;pointer-events:none;background:#020f12d9;border:1px solid #60e6f0;border-radius:8px;max-width:520px;padding:10px 13px;font:12px/1.45 ui-monospace,monospace;position:absolute;bottom:16px;left:16px}.mobile-controls{display:none}.capture-mouth{z-index:15;pointer-events:none;visibility:hidden;position:absolute;inset:0;overflow:hidden}.capture-mouth>div{background:#2e1730;width:110%;height:52%;transition:transform .55s cubic-bezier(.2,.8,.3,1);position:absolute;left:-5%}.capture-mouth>div:first-child{clip-path:polygon(0 0,100% 0,100% 83%,94% 66%,88% 93%,81% 68%,74% 94%,66% 67%,58% 94%,50% 66%,42% 94%,34% 67%,26% 94%,18% 68%,11% 93%,5% 67%,0 83%);top:0;transform:translateY(-110%)}.capture-mouth>div:last-child{clip-path:polygon(0 17%,6% 34%,12% 7%,19% 32%,27% 6%,35% 33%,43% 6%,51% 34%,59% 6%,67% 33%,75% 6%,82% 32%,89% 7%,95% 33%,100% 17%,100% 100%,0 100%);bottom:0;transform:translateY(110%)}#ui-root.caught .capture-mouth{visibility:visible}#ui-root.caught .capture-mouth>div{transform:translateY(0)}@media (max-width:760px){.title-art{background-position:61%}.title-shade{background:linear-gradient(#0719200d 15%,#071b22cc 52%,#06181efa 100%)}.title-copy{top:auto;left:24px;right:24px;bottom:max(62px, env(safe-area-inset-bottom));width:auto;transform:none}.title-copy h1{font-size:clamp(50px,16vw,78px)}.title-copy>p{margin:15px 0 18px;font-size:14px}.menu-buttons{width:100%}.menu-buttons button{min-height:44px;padding:9px 11px;font-size:12px}.menu-buttons button.primary{min-height:51px}.title-footer{display:none}.hud-top{top:max(10px, env(safe-area-inset-top));gap:7px;left:10px;right:10px}.level-pill{flex:1;min-width:0;padding:8px 10px}.level-pill strong{text-overflow:ellipsis;white-space:nowrap;max-width:135px;font-size:12px;overflow:hidden}.stats-strip>div{min-width:55px;padding:7px 6px}.stats-strip>div:last-child{display:none}.stats-strip strong{font-size:14px}.stats-strip span{font-size:7px}.round-button{display:none}.tutorial-card{width:calc(100vw - 24px);padding:13px 16px;top:112px;left:12px;transform:none}@keyframes tutorial-in{0%{opacity:0;transform:translateY(-20px)}}.tutorial-card strong{font-size:17px}.tutorial-card p{font-size:11px}.kick-prompt{bottom:max(130px, calc(env(safe-area-inset-bottom) + 118px));min-width:128px;padding:7px 18px}.kick-prompt strong{font-size:22px}.kick-prompt span{display:none}.modal{padding:10px}.modal-panel{border-radius:20px;max-height:94vh;padding:24px 17px}.modal-panel h2{font-size:32px}.modal-buttons{grid-template-columns:1fr}.modal-buttons button.primary{grid-column:auto}.level-grid,.instructions-grid{grid-template-columns:1fr}.level-grid{max-height:52vh;overflow:auto}.result-grid{grid-template-columns:1fr 1fr}.star{font-size:39px}}@media (pointer:coarse),(max-width:900px) and (hover:none){.mobile-controls{pointer-events:none;display:block;position:absolute;inset:0}.joystick{left:max(20px, env(safe-area-inset-left));bottom:max(20px, env(safe-area-inset-bottom));pointer-events:auto;touch-action:none;background:#0a2b305c;border:2px solid #ffffff52;border-radius:50%;width:112px;height:112px;position:absolute;box-shadow:inset 0 0 25px #0000002e}.joystick-arrows{color:#fff3;text-align:center;font-size:15px;position:absolute;inset:8px}.joystick-knob{background:#1b7775d1;border:2px solid #ffffff7a;border-radius:50%;width:52px;height:52px;margin:-26px;position:absolute;top:50%;left:50%;box-shadow:0 6px 18px #00000040}.mobile-kick{right:max(24px, env(safe-area-inset-right));bottom:max(25px, env(safe-area-inset-bottom));pointer-events:auto;background:#185350ab;border:2px solid #ffffff4d;border-radius:50%;place-content:center;width:82px;height:82px;min-height:0;padding:0;font-size:12px;display:grid;position:absolute}.mobile-kick span{font-size:20px}.mobile-kick.ready{color:#173d31;background:#77e8a3;border-color:#d2ffe1;animation:.65s ease-in-out infinite alternate mobile-ready;box-shadow:0 0 0 8px #4cf09721,0 10px 28px #0000004d}@keyframes mobile-ready{to{transform:scale(1.07)}}.mobile-pause{top:max(11px, env(safe-area-inset-top));right:max(11px, env(safe-area-inset-right));pointer-events:auto;border-radius:50%;width:42px;height:42px;min-height:0;padding:0;position:absolute}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}