:root{--ink: #22201d;--ink-soft: #3a3730;--paper: #f5efe0;--paper-dim: #d8d2c2;--orange: #e87722;--orange-bright: #ff9a3c;--gray: #8a8578;--gray-dark: #55524a;--danger: #c0392b;--mono: "Consolas", "Menlo", "Courier New", monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--ink);font-family:var(--sans);color:var(--paper);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#app{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hidden{display:none!important}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,20px);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:repeating-linear-gradient(-45deg,transparent 0 34px,rgba(232,119,34,.03) 34px 68px),radial-gradient(ellipse at 50% 30%,#33302a 0%,var(--ink) 70%);text-align:center;z-index:40;overflow-y:auto}.screen.overlay{background:#171512e0;backdrop-filter:blur(4px)}.notice-tag{font-family:var(--mono);font-size:clamp(10px,1.6vmin,13px);letter-spacing:.22em;color:var(--ink);background:var(--paper-dim);padding:4px 14px;border:1px solid var(--ink);box-shadow:3px 3px #0006;transform:rotate(-1.5deg)}.notice-tag.stamp-approved{color:var(--orange);background:transparent;border:3px double var(--orange);font-weight:700;transform:rotate(-4deg)}#logo{display:flex;flex-direction:column;line-height:.92;margin:clamp(4px,1vh,12px) 0}.logo-beyond{font-size:clamp(28px,7vmin,64px);font-weight:800;letter-spacing:.34em;color:var(--paper)}.logo-boring{font-size:clamp(56px,15vmin,140px);font-weight:900;letter-spacing:.02em;color:var(--gray);position:relative;text-shadow:0 4px 0 rgba(0,0,0,.45)}.logo-boring:after{content:"BORING";position:absolute;inset:0;color:var(--orange);clip-path:polygon(0 62%,12% 55%,25% 66%,40% 52%,58% 68%,74% 50%,100% 64%,100% 100%,0 100%);animation:flicker 3.2s infinite steps(1)}@keyframes flicker{0%,92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.5}97%,to{opacity:1}}.logo-sub{font-family:var(--mono);font-size:clamp(13px,2.6vmin,24px);letter-spacing:.58em;color:var(--orange);margin-top:clamp(6px,1.4vh,14px);text-indent:.58em}.tagline{font-size:clamp(12px,2vmin,16px);color:var(--paper-dim);line-height:1.5}.menu{display:flex;flex-direction:column;gap:10px;align-items:center}.menu-btn{font-family:var(--mono);font-size:clamp(13px,2.2vmin,17px);letter-spacing:.14em;padding:12px 34px;min-width:min(320px,72vw);background:transparent;color:var(--paper);border:2px solid var(--gray-dark);cursor:pointer;transition:transform .08s ease,border-color .12s,background .12s,color .12s}.menu-btn:hover,.menu-btn:focus-visible{border-color:var(--orange);color:var(--orange-bright);transform:translate(4px);outline:none}.menu-btn.primary{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700}.menu-btn.primary:hover,.menu-btn.primary:focus-visible{background:var(--orange-bright);color:var(--ink);transform:scale(1.03)}.menu-btn:active{transform:scale(.97)}.back-btn{margin-top:8px;min-width:0}.link-btn{background:none;border:none;color:var(--gray);font-family:var(--mono);font-size:12px;text-decoration:underline;cursor:pointer}.link-btn:hover{color:var(--danger)}.title-footer{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px;align-items:center}.footer-note{font-family:var(--mono);font-size:10px;color:var(--gray-dark);letter-spacing:.08em}.screen-heading{font-size:clamp(20px,4.5vmin,40px);letter-spacing:.2em;font-weight:800}.screen-subheading{font-family:var(--mono);font-size:clamp(11px,1.8vmin,14px);color:var(--gray)}#level-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,190px));gap:10px;max-width:90vw}@media(max-width:700px){#level-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}}.level-card{position:relative;border:2px solid var(--gray-dark);background:#0000004d;padding:12px 10px 10px;text-align:left;cursor:pointer;color:var(--paper);font-family:var(--sans);transition:border-color .12s,transform .1s;min-height:86px;display:flex;flex-direction:column;gap:4px}.level-card:hover:not(.locked){border-color:var(--orange);transform:translateY(-3px)}.level-card.locked{opacity:.45;cursor:not-allowed;filter:grayscale(1)}.level-card.done{border-color:var(--orange)}.level-num{font-family:var(--mono);font-size:10px;color:var(--gray);letter-spacing:.2em}.level-title{font-size:clamp(12px,1.9vmin,15px);font-weight:700;line-height:1.15}.level-badge{font-family:var(--mono);font-size:10px;color:var(--orange);margin-top:auto}.level-check{position:absolute;top:6px;right:8px;color:var(--orange);font-weight:900;font-size:15px;transform:rotate(-8deg)}#hud{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;z-index:20;pointer-events:none}#hud-left{display:flex;gap:18px;align-items:flex-start}.hud-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--paper-dim);text-shadow:0 1px 2px rgba(0,0,0,.8);display:block;margin-bottom:3px}#integrity-pips{display:flex;gap:4px}.pip{width:clamp(14px,2.6vmin,22px);height:clamp(14px,2.6vmin,22px);background:var(--orange);border:2px solid rgba(0,0,0,.5);box-shadow:0 1px 3px #0009;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .15s,transform .15s}.pip.empty{background:#ffffff24}.pip.hurt{animation:pip-hurt .35s ease}@keyframes pip-hurt{0%{transform:scale(1.6);background:#fff}to{transform:scale(1)}}#tool-badges{display:flex;gap:5px}.tool-badge{font-family:var(--mono);font-size:clamp(9px,1.5vmin,11px);font-weight:700;padding:3px 7px;border:1.5px solid var(--gray-dark);color:var(--gray);background:#0006;letter-spacing:.05em}.tool-badge.owned{border-color:var(--orange);color:var(--orange-bright)}#hud-right{display:flex;gap:12px;align-items:center;pointer-events:auto}#hud-level-name{font-family:var(--mono);font-size:clamp(10px,1.7vmin,13px);color:var(--paper-dim);letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.8)}#btn-pause{font-family:var(--mono);font-weight:900;font-size:16px;width:40px;height:40px;background:#00000073;color:var(--paper);border:2px solid var(--gray-dark);cursor:pointer}#btn-pause:hover{border-color:var(--orange);color:var(--orange)}#caption{position:absolute;left:50%;bottom:clamp(86px,18vh,150px);transform:translate(-50%);max-width:min(620px,86vw);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:clamp(12px,2vmin,15px);line-height:1.45;padding:12px 18px;border:2px solid var(--ink);box-shadow:4px 4px #00000080;z-index:25;animation:caption-in .18s ease;pointer-events:none}#caption .speaker{color:var(--orange);font-weight:700;letter-spacing:.1em}#caption.boring-speaks{background:var(--gray-dark);color:var(--paper-dim);border-color:#000}#caption.boring-speaks .speaker{color:var(--paper)}@keyframes caption-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}}#toast{position:absolute;left:50%;top:clamp(60px,14vh,110px);transform:translate(-50%) rotate(-2deg);font-family:var(--mono);font-weight:700;font-size:clamp(14px,2.6vmin,20px);letter-spacing:.14em;color:var(--orange);background:#171512eb;border:3px double var(--orange);padding:10px 22px;z-index:26;animation:toast-in .25s cubic-bezier(.2,1.6,.4,1);pointer-events:none;text-align:center}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) rotate(-2deg) scale(1.5)}}#touch{position:absolute;inset:0;z-index:30;pointer-events:none}#touch-move{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:10px}#touch-actions{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:flex-end}#touch button{pointer-events:auto;width:clamp(58px,11vmin,84px);height:clamp(58px,11vmin,84px);border-radius:50%;border:2.5px solid rgba(245,239,224,.5);background:#22201d8c;color:var(--paper);font-family:var(--mono);font-size:clamp(13px,2.4vmin,18px);font-weight:700;touch-action:none}#touch button:active,#touch button.pressed{background:#e87722bf;border-color:var(--orange-bright)}#t-jump{width:clamp(72px,14vmin,104px)!important;height:clamp(72px,14vmin,104px)!important;border-color:#e87722b3!important}.t-ability.locked{display:none}#inter-title{font-size:clamp(20px,4.5vmin,42px);letter-spacing:.06em;font-weight:800;max-width:90vw}#inter-text{font-family:var(--mono);font-size:clamp(11px,1.9vmin,15px);color:var(--paper-dim);line-height:1.6;max-width:min(600px,88vw);white-space:pre-line}#credits{font-family:var(--mono);font-size:clamp(11px,1.9vmin,14px);line-height:1.9;color:var(--paper-dim);max-width:min(560px,88vw);white-space:pre-line}#credits .credit-orange{color:var(--orange);font-weight:700}#rotate-hint{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:center}.rotate-inner{text-align:center;font-size:20px;line-height:1.6;color:var(--paper)}.rotate-inner .rotate-small{font-family:var(--mono);font-size:12px;color:var(--gray)}
