:root{--gurpil-bg: #1a1a2e;--gurpil-ink: #ffffff;--gurpil-coral: #ff6b9d;--gurpil-teal: #4ecdc4;--gurpil-yellow: #ffe66d;--gurpil-mint: #95e1d3;--gurpil-overlay-bg: rgba(15, 15, 30, .86);--gurpil-medal-gold: #ffd54a;--gurpil-medal-silver: #cbd5e1;--gurpil-medal-bronze: #d98a4f;--gurpil-medal-none: #8a8fa3;--gurpil-safe-top: env(safe-area-inset-top, 0px);--gurpil-safe-right: env(safe-area-inset-right, 0px);--gurpil-safe-bottom: env(safe-area-inset-bottom, 0px);--gurpil-safe-left: env(safe-area-inset-left, 0px);--gurpil-font: "Segoe UI", system-ui, -apple-system, sans-serif;--gurpil-radius-sm: 10px;--gurpil-radius-md: 16px;--gurpil-radius-lg: 22px;--gurpil-radius-pill: 999px;--gurpil-ease: cubic-bezier(.22, 1, .36, 1);--gurpil-card-bg: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));--gurpil-card-border: rgba(255, 255, 255, .16)}@keyframes gurpil-pop-in{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gurpil-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes gurpil-pulse{0%,to{opacity:.32}50%{opacity:.6}}.hud-title,.select-title{margin:0;font-weight:800;line-height:1.05;letter-spacing:-.01em;background:linear-gradient(135deg,var(--gurpil-coral),var(--gurpil-yellow),var(--gurpil-mint));background-clip:text;-webkit-background-clip:text;color:transparent}.hud-timer{position:fixed;top:calc(.75rem + var(--gurpil-safe-top));left:50%;transform:translate(-50%);z-index:200;pointer-events:none;font-family:var(--gurpil-font);font-weight:700;font-size:clamp(1.1rem,4vw,1.6rem);font-variant-numeric:tabular-nums;color:var(--gurpil-ink);letter-spacing:.02em;padding:.4rem 1.25rem;border-radius:var(--gurpil-radius-pill);background:linear-gradient(135deg,var(--gurpil-coral),var(--gurpil-teal));box-shadow:0 4px 14px #00000059}.hud-target{position:fixed;top:calc(3.25rem + var(--gurpil-safe-top));left:50%;transform:translate(-50%);z-index:200;pointer-events:none;font-family:var(--gurpil-font);font-weight:600;font-size:clamp(.75rem,2.6vw,.95rem);font-variant-numeric:tabular-nums;color:#fffc;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.6)}.hud-target[hidden]{display:none}.hud-gauge{position:fixed;left:calc(.75rem + var(--gurpil-safe-left));top:50%;transform:translateY(-50%);width:14px;height:clamp(120px,32vh,260px);z-index:200;pointer-events:none;border-radius:var(--gurpil-radius-pill);background:#00000059;border:2px solid rgba(255,255,255,.35);overflow:hidden;box-shadow:0 2px 8px #0006}.hud-gauge:before{content:"⚡";position:absolute;top:-1.5rem;left:50%;transform:translate(-50%);font-size:.85rem;opacity:.7}.hud-gauge-fill{position:absolute;left:0;bottom:0;width:100%;height:0%;background:#ec1313;transition:height .1s linear}.hud-mute-btn{position:fixed;top:calc(.75rem + var(--gurpil-safe-top));right:calc(.75rem + var(--gurpil-safe-right));z-index:210;width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;border:2px solid rgba(255,255,255,.35);border-radius:var(--gurpil-radius-pill);background:#00000059;color:var(--gurpil-ink);box-shadow:0 2px 8px #0006;cursor:pointer;touch-action:manipulation;transition:transform .1s ease,filter .15s ease}.hud-mute-btn:active{transform:scale(.92)}.hud-overlay{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:calc(1.5rem + var(--gurpil-safe-top)) calc(1.5rem + var(--gurpil-safe-right)) calc(1.5rem + var(--gurpil-safe-bottom)) calc(1.5rem + var(--gurpil-safe-left));background:var(--gurpil-overlay-bg);color:var(--gurpil-ink);font-family:var(--gurpil-font);text-align:center}.hud-overlay[hidden]{display:none}.hud-overlay--start{pointer-events:none;background:transparent}.hud-overlay--start .hud-title{animation:gurpil-fade-in .45s var(--gurpil-ease) both}.hud-overlay--start .hud-prompt{text-shadow:0 2px 8px rgba(0,0,0,.55);animation:gurpil-fade-in .45s var(--gurpil-ease) .1s both}.hud-title{font-size:clamp(2rem,10vw,3.5rem)}.hud-prompt{margin:0;font-size:clamp(1rem,4.5vw,1.4rem);opacity:.92}.hud-card{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:min(90vw,26rem);padding:1.75rem 1.5rem;border-radius:var(--gurpil-radius-lg);border:1px solid var(--gurpil-card-border);background:var(--gurpil-card-bg);box-shadow:0 16px 40px #00000073,inset 0 1px #ffffff0f;animation:gurpil-pop-in .32s var(--gurpil-ease) both}.hud-finish-message{margin:0;font-size:clamp(1.8rem,8vw,3rem);font-weight:800;color:var(--gurpil-mint)}.hud-finish-time{margin:0;font-size:clamp(1.2rem,5vw,1.8rem);font-variant-numeric:tabular-nums}.hud-medal-row{display:flex;align-items:center;justify-content:center;gap:.5rem}.hud-finish-medal{margin:0;font-size:clamp(1.3rem,6vw,2rem);font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}.hud-finish-best{margin:0;font-size:clamp(.95rem,4vw,1.2rem);font-weight:600;opacity:.9}.medal-pip{display:inline-block;flex:none;width:.65rem;height:.65rem;border-radius:50%;box-shadow:inset 0 0 0 2px #fff3,0 1px 3px #0006}.hud-btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem}.hud-btn{min-width:10rem;min-height:3.25rem;padding:.85rem 1.75rem;font-family:var(--gurpil-font);font-size:clamp(.95rem,4.2vw,1.15rem);font-weight:700;border:none;border-radius:var(--gurpil-radius-pill);box-shadow:0 6px 18px #0006;cursor:pointer;touch-action:manipulation;transition:transform .1s ease,filter .15s ease,box-shadow .15s ease}.hud-btn:active{transform:scale(.96)}.hud-btn--primary{color:var(--gurpil-bg);background:linear-gradient(135deg,var(--gurpil-yellow),var(--gurpil-coral))}.hud-btn--secondary{color:var(--gurpil-ink);background:#ffffff1f;border:2px solid rgba(255,255,255,.4);box-shadow:none}@media(hover:hover){.hud-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.hud-mute-btn:hover{filter:brightness(1.2)}}.select-overlay{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:calc(1.5rem + var(--gurpil-safe-top)) calc(1.5rem + var(--gurpil-safe-right)) calc(1.5rem + var(--gurpil-safe-bottom)) calc(1.5rem + var(--gurpil-safe-left));background:var(--gurpil-bg);color:var(--gurpil-ink);font-family:var(--gurpil-font);text-align:center}.level-select-overlay{justify-content:flex-start;overflow-y:auto}.select-title{font-size:clamp(1.6rem,7vw,2.5rem)}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.85rem;width:min(92vw,30rem)}.level-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;aspect-ratio:1;padding:.6rem;font-family:var(--gurpil-font);color:var(--gurpil-ink);border:2px solid rgba(255,255,255,.25);border-radius:var(--gurpil-radius-md);background:linear-gradient(160deg,var(--level-tint, var(--gurpil-teal)) 0%,rgba(15,15,30,.82) 42%);box-shadow:0 6px 16px #0006;cursor:pointer;touch-action:manipulation;transition:transform .1s ease,box-shadow .15s ease;animation:gurpil-pop-in .3s var(--gurpil-ease) both;animation-delay:calc(var(--card-i, 0) * 28ms)}.level-card:active{transform:scale(.96)}@media(hover:hover){.level-card:not(.level-card--locked):hover,.endless-card:not(.endless-card--locked):hover{transform:translateY(-3px);box-shadow:0 10px 22px #00000080}}.level-card--locked{background:#ffffff0d;border:2px dashed rgba(255,255,255,.18);box-shadow:none;cursor:not-allowed}.level-card--locked .level-card-lock{opacity:.6}.level-card-number{position:absolute;top:.5rem;left:.5rem;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#0000006b;box-shadow:0 1px 4px #0006;font-size:clamp(.75rem,3.2vw,.9rem);font-weight:800;line-height:1}.level-card-lock{font-size:clamp(1.1rem,5vw,1.4rem)}.level-card-locked-label{font-size:clamp(.55rem,2.4vw,.68rem);font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.6}.level-card-theme{font-size:clamp(.62rem,2.8vw,.78rem);font-weight:600;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.55)}.level-card-medal{display:flex;align-items:center;gap:.3rem;font-size:clamp(.6rem,2.7vw,.75rem);font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.55)}.level-card-best{font-size:clamp(.58rem,2.6vw,.72rem);font-variant-numeric:tabular-nums;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.55)}.endless-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;width:min(92vw,30rem);padding:1rem 1.25rem;font-family:var(--gurpil-font);color:var(--gurpil-ink);border:2px solid rgba(255,255,255,.3);border-radius:var(--gurpil-radius-md);background:linear-gradient(135deg,var(--gurpil-teal),var(--gurpil-coral));box-shadow:0 6px 16px #0006;cursor:pointer;touch-action:manipulation;transition:transform .1s ease,box-shadow .15s ease;animation:gurpil-pop-in .3s var(--gurpil-ease) .42s both}.endless-card:active{transform:scale(.97)}.endless-card--locked{background:#ffffff0f;border-color:#ffffff1f;box-shadow:none;cursor:not-allowed;opacity:.65}.endless-card-icon{font-size:clamp(1.4rem,6vw,1.9rem);line-height:1;padding:.3rem;border-radius:50%;background:#00000038}.endless-card-name{font-size:clamp(1.1rem,5vw,1.4rem);font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.5)}.endless-card-detail{font-size:clamp(.7rem,3vw,.9rem);font-variant-numeric:tabular-nums;opacity:.95}.draw-box{position:fixed;bottom:calc(1rem + var(--gurpil-safe-bottom));left:50%;transform:translate(-50%);width:clamp(120px,30vw,220px);height:clamp(120px,30vw,220px);box-sizing:border-box;border-radius:var(--gurpil-radius-md);border:3px solid rgba(255,255,255,.4);overflow:hidden;background:#0000002e;backdrop-filter:blur(4px);box-shadow:0 6px 20px #0006;touch-action:none;cursor:crosshair;z-index:100;transition:border-color .15s ease}.draw-box:before{content:"✏️";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,9vw,44px);opacity:.32;pointer-events:none;animation:gurpil-pulse 2.6s ease-in-out infinite}.draw-box canvas{position:relative;z-index:1;display:block;width:100%;height:100%}@media(prefers-reduced-motion:reduce){.hud-overlay--start .hud-title,.hud-overlay--start .hud-prompt,.hud-card,.level-card,.endless-card,.draw-box:before{animation:none}}
