:root{--bg-color: #0f172a;--panel-bg: #1e293b;--accent-color: #38bdf8;--accent-glow: rgba(56, 189, 248, .4);--pipe-color: #38bdf8;--pipe-glow: #0284c7;--loop-glow: #f43f5e;--text-color: #f8fafc;--text-muted: #94a3b8;--grid-line: #334155;--cell-hover: rgba(56, 189, 248, .15);--timer-green: #22c55e;--timer-yellow: #eab308;--timer-red: #ef4444}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100dvh;max-height:100dvh;overflow:hidden;touch-action:none;background-color:var(--bg-color);color:var(--text-color);font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif}body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 6px}.game-container{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:600px;width:100%;height:100%;max-height:100dvh;justify-content:space-between}header{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}h1{font-size:clamp(1.2rem,3.2vh,1.6rem);font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.header-btns{display:flex;gap:6px;align-items:center}.btn-quest{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 4px 12px #8b5cf666;padding:4px 10px;font-size:.75rem;position:relative}.badge{background:#f43f5e;color:#fff;font-size:.65rem;font-weight:800;border-radius:10px;padding:1px 6px;margin-left:3px}.sound-btn-header{padding:4px 8px;font-size:.75rem}.top-status-bar{display:flex;justify-content:center;gap:8px;width:100%}.status-card{background:var(--panel-bg);border-radius:8px;padding:3px 10px;box-shadow:0 4px 10px #0000004d;display:flex;align-items:center;gap:6px;flex:1;justify-content:space-between}.status-label{font-size:.62rem;font-weight:700;letter-spacing:1px;color:var(--text-muted)}.status-value{font-size:clamp(1rem,2.6vh,1.3rem);font-weight:800}.score-text{color:var(--accent-color);text-shadow:0 0 8px var(--accent-glow)}.overwrite-text{color:#fb7185;text-shadow:0 0 8px rgba(251,113,133,.4)}.overwrite-text.zero{color:#64748b;text-shadow:none}.status-sub{font-size:.58rem;color:var(--text-muted)}.piece-bar{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;background:var(--panel-bg);border-radius:10px;padding:4px 8px;box-shadow:0 4px 12px #0000004d;width:100%}.piece-item{display:flex;flex-direction:column;align-items:center;gap:1px}.piece-tag{font-size:.52rem;font-weight:700;color:var(--text-muted);letter-spacing:.5px}.current-tag{color:var(--accent-color)}.piece-box{background:#0f172a;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--grid-line)}.current-box{width:min(44px,10vw,6vh);height:min(44px,10vw,6vh);border:2px solid var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}.next-box{width:min(38px,9vw,5vh);height:min(38px,9vw,5vh)}canvas#currentCanvas{width:85%;height:85%}canvas.next-canvas{width:80%;height:80%}.piece-divider{width:1px;height:28px;background:var(--grid-line);margin:0 2px}.main-layout{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0;justify-content:center}.board-wrapper{position:relative;background:var(--panel-bg);border-radius:12px;padding:6px;box-shadow:0 10px 25px -5px #00000080,0 0 15px var(--accent-glow);touch-action:none;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:100%;max-width:520px}canvas#gameBoard{display:block;border-radius:8px;cursor:pointer;touch-action:none;width:min(94vw,52vh);height:min(94vw,52vh);max-width:440px;max-height:440px}.timer-container{display:flex;flex-direction:column;gap:2px;width:100%;padding:0 2px}.timer-header{display:flex;justify-content:space-between;align-items:center;font-size:.65rem;font-weight:700;letter-spacing:1px}.timer-label{color:var(--text-muted)}.timer-text{color:var(--text-color);font-family:monospace;font-size:.75rem}.timer-bar-bg{height:7px;background:#0f172a;border-radius:4px;overflow:hidden;border:1px solid var(--grid-line)}.timer-fill{height:100%;width:100%;border-radius:3px;transition:width .1s linear,background-color .3s ease}.timer-fill.green{background-color:var(--timer-green);box-shadow:0 0 8px var(--timer-green)}.timer-fill.yellow{background-color:var(--timer-yellow);box-shadow:0 0 8px var(--timer-yellow)}.timer-fill.red{background-color:var(--timer-red);box-shadow:0 0 8px var(--timer-red)}.btn{background:linear-gradient(135deg,#0284c7,#3b82f6);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0284c766;display:flex;align-items:center;justify-content:center}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0284c799}.btn:active{transform:translateY(0)}.btn-secondary{background:#334155;box-shadow:0 4px 12px #0003}.btn-start{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 15px #10b98166;font-size:1rem;padding:10px 24px;width:100%}.start-actions,.game-over-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;margin-top:6px}.btn-start-quest{font-size:.88rem;padding:8px 18px;width:100%}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0f172aed;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:10;padding:14px;text-align:center}.overlay.show{opacity:1;pointer-events:auto}.countdown-num{font-size:4.5rem;font-weight:900;color:#38bdf8;text-shadow:0 0 25px rgba(56,189,248,.8);animation:popZoom .8s ease-out infinite}.countdown-num.start-text{font-size:3rem;color:#10b981;text-shadow:0 0 25px rgba(16,185,129,.8)}@keyframes popZoom{0%{transform:scale(.5);opacity:0}40%{transform:scale(1.2);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}.start-title{font-size:2rem;font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.start-desc{font-size:.8rem;color:var(--text-muted);max-width:280px;line-height:1.4}.game-over-title{font-size:1.8rem;font-weight:800;color:#f43f5e;text-shadow:0 0 15px rgba(244,63,94,.6)}.game-over-score{font-size:1.1rem;color:var(--text-color)}.quest-modal{width:95%;height:90%;background:#1e293b;border-radius:12px;border:1px solid var(--grid-line);box-shadow:0 10px 30px #0009;display:flex;flex-direction:column;padding:12px;gap:8px}.quest-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grid-line);padding-bottom:6px}.quest-modal-header h2{font-size:1.1rem;font-weight:800;color:var(--accent-color)}.btn-close{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:2px 8px}.quest-list-container{display:flex;flex-direction:column;gap:8px;overflow-y:auto;touch-action:pan-y;padding-right:4px;flex:1}.quest-card{background:#0f172a;border-radius:8px;border:1px solid var(--grid-line);padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:all .2s ease}.quest-card.completed{border-color:#10b981;background:#10b98114}.quest-info{display:flex;flex-direction:column;gap:3px;text-align:left;flex:1}.quest-title-text{font-size:.8rem;font-weight:700;color:var(--text-color)}.quest-reward-text{font-size:.65rem;color:#fef08a}.quest-progress-bar-bg{width:100%;height:5px;background:#334155;border-radius:3px;overflow:hidden;margin-top:2px}.quest-progress-bar-fill{height:100%;background:var(--accent-color);width:0%;transition:width .3s ease}.quest-progress-bar-fill.done{background:#10b981}.quest-status{min-width:60px;text-align:right;font-size:.7rem;font-weight:700;color:var(--text-muted)}.quest-status.done-badge{color:#10b981;font-size:.75rem}.rules-bar{max-width:600px;width:100%;text-align:center;font-size:.6rem;color:var(--text-muted);line-height:1.2;padding:2px 4px}.rules-bar ul{list-style:none;display:flex;flex-direction:column;gap:1px}@media (max-width: 480px){body{padding:2px}.status-sub{display:none}}