:root{--bg-dark: #181512;--panel-bg: #27211c;--accent: #f59e0b;--accent-hover: #d97706;--text-light: #fef3c7;--border-color: #463c33;--success: #10b981}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{background-color:var(--bg-dark);color:var(--text-light);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100dvh;width:100vw;overflow:hidden;display:flex;flex-direction:column}.hud{width:100%;padding:6px 14px;background:var(--panel-bg);border-bottom:2px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:30;box-shadow:0 4px 12px #00000073;touch-action:manipulation}.hud-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.badge{background:#181512;padding:5px 10px;border-radius:8px;font-weight:700;font-size:.84rem;border:1px solid var(--border-color);white-space:nowrap;color:var(--text-light)}.badge.clickable{background:#332b24;border-color:var(--accent);cursor:pointer;transition:background .15s ease}.badge.clickable:hover{background:#42372e}.badge.highlight{border-color:var(--accent);color:#fde68a}.badge.timer-badge{font-variant-numeric:tabular-nums;min-width:78px;text-align:center;color:#a7f3d0}select,button{background:#383028;color:var(--text-light);border:1px solid #5c5046;padding:5px 10px;border-radius:8px;font-weight:600;font-size:.84rem;cursor:pointer;touch-action:manipulation}button.primary{background:var(--accent);color:#181512;border-color:var(--accent-hover);font-weight:700}button:active{transform:scale(.97)}.game-container{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:4px 6px;overflow:hidden;touch-action:none}canvas{border-radius:10px;box-shadow:0 8px 24px #000000bf,0 0 0 3px var(--border-color);background:#26201b;touch-action:none}.modal-overlay{position:absolute;inset:0;background:#0c0a08d9;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:8px 12px;z-index:25;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-card{background:var(--panel-bg);border:2px solid var(--accent);border-radius:14px;padding:12px 16px;text-align:center;max-width:480px;width:94%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 40px #000000d9}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color);flex-shrink:0}.modal-header h2{font-size:1.15rem;line-height:1.25;text-align:left;flex:1}#modal-overlay .modal-header h2{text-align:center}.modal-subtitle{font-size:.78rem;color:#cbbba6;margin-top:3px;text-align:left}.modal-close-x{background:#181512;color:var(--text-light);border:1px solid #5c5046;width:32px;height:32px;padding:0;border-radius:8px;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-close-x:hover{border-color:var(--accent);color:var(--accent)}.modal-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:10px 2px}.modal-body *{touch-action:pan-y}.modal-footer{padding-top:8px;border-top:1px solid var(--border-color);flex-shrink:0}.modal-footer button{width:100%;padding:9px 18px;font-size:.92rem}.modal-body p{font-size:.88rem;color:#e5d5c0;margin-bottom:8px;line-height:1.35}.time-stats{display:none;background:#181512;border:1px solid var(--border-color);border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:.82rem;font-weight:700;color:#fde68a;font-variant-numeric:tabular-nums}.time-stats.visible{display:block}.fact-box{background:#181512;border:1px solid #4d7c0f;border-left:4px solid #84cc16;border-radius:8px;padding:8px 10px;text-align:left;font-size:.8rem;line-height:1.35;color:#ecfccb}.fact-box strong{display:block;margin-bottom:3px;color:#bef264}.levels-card{max-width:640px}.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;align-content:start}.level-tile{background:#181512;border:2px solid var(--border-color);border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,border-color .12s ease}.level-tile.completed{border-color:var(--success);background:#13241d}.level-tile.current{border-color:var(--accent);box-shadow:0 0 0 2px #f59e0b59}.level-tile.locked{opacity:.45;cursor:not-allowed}.level-tile:not(.locked):hover{border-color:var(--accent)}.level-tile .lvl-num{font-size:.86rem;font-weight:800;color:var(--text-light)}.level-tile .lvl-time{font-size:.68rem;font-weight:600;color:#6ee7b7;font-variant-numeric:tabular-nums}.level-tile.unlocked-unplayed .lvl-time{color:#fbbf24}.help-card{max-width:520px;text-align:left}.help-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.82rem;line-height:1.35;color:#f3e8d6}.help-list li{background:#181512;border:1px solid var(--border-color);border-radius:8px;padding:7px 10px}.app-footer{width:100%;padding:2px 12px 4px;text-align:center;font-size:.72rem;background:var(--bg-dark);z-index:10}.app-footer a{color:#a89984;text-decoration:none;font-weight:600;letter-spacing:.03em;transition:color .15s ease}.app-footer a:hover{color:var(--accent)}.rotate-overlay{position:fixed;inset:0;background:#14110f;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;text-align:center}.rotate-card{background:var(--panel-bg);border:2px solid var(--accent);border-radius:16px;padding:28px 20px;max-width:320px}.rotate-icon{font-size:3rem;margin-bottom:12px;animation:tiltPhone 1.8s ease-in-out infinite alternate}.rotate-card h2{font-size:1.3rem;margin-bottom:10px;color:var(--accent)}.rotate-card p{font-size:.92rem;line-height:1.45;color:#e5d5c0}@keyframes tiltPhone{0%{transform:rotate(0)}to{transform:rotate(-90deg)}}@media(orientation:portrait)and (max-width:920px){.rotate-overlay{display:flex}}@media(max-height:480px){.hud{padding:3px 10px}.badge,select,button{font-size:.74rem;padding:3px 7px}#level-title{display:none}.modal-overlay{padding:4px 10px}.modal-card{padding:8px 12px}.modal-header{padding-bottom:5px}.modal-header h2{font-size:1rem}.modal-close-x{width:28px;height:28px;font-size:.9rem}.modal-body{padding:6px 2px}.help-list{gap:4px;font-size:.76rem}.help-list li{padding:5px 8px}.modal-footer{padding-top:5px}.modal-footer button{padding:6px 14px;font-size:.84rem}.app-footer{padding:1px 8px 2px;font-size:.66rem}}