*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#111;color:#ddd;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;user-select:none;-webkit-user-select:none}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;touch-action:none}#tilt{perspective:1100px;perspective-origin:50% 30%}#game{display:block;transform:rotateX(9deg) scale(1.02);transform-origin:50% 60%;transition:filter .2s}#game.blur{filter:blur(28px) brightness(.45) saturate(.3)}.hidden{display:none!important}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud-score{position:absolute;top:10px;left:50%;transform:translate(-50%);font-size:28px;font-weight:700;text-shadow:0 2px 4px #000;font-variant-numeric:tabular-nums}#hud-layer{position:absolute;top:14px;left:14px;width:44px;height:34px}#hud-layer span{position:absolute;left:0;width:44px;height:12px;border-radius:3px;border:2px solid #888;transition:all .12s}#hud-layer .front{top:0;z-index:2}#hud-layer .back{top:18px;left:6px;width:38px;opacity:.6;border-style:dashed}#hud-layer.on-front .front{background:#ff8a50;border-color:#fff}#hud-layer.on-back .back{background:#8f7cff;border-color:#fff;opacity:1}#hud-badges{position:absolute;top:54px;left:14px;display:flex;gap:6px}.badge{font-size:11px;padding:2px 6px;border-radius:8px;background:#2d6a4f;text-transform:uppercase;letter-spacing:.06em}#badge-replay{background:#7b2cbf}#btn-pause{pointer-events:auto;position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;border:2px solid #777;background:#0008;color:#ddd;font-weight:800}#hud-seed{position:absolute;bottom:6px;right:10px;font-size:11px;opacity:.5}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000a}#screen-pause{background:#0b0b0e}.panel{background:#1c1c22;border:1px solid #333;border-radius:14px;padding:18px 22px;max-width:min(94vw,720px)}.panel.center{display:flex;flex-direction:column;align-items:center;gap:14px}.codename{font-size:30px;font-weight:800;letter-spacing:.04em;margin-bottom:10px}.codename small{font-size:12px;font-weight:400;opacity:.6;margin-left:6px}.row{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}.row.small{font-size:13px;opacity:.8;gap:16px}.label{font-size:12px;text-transform:uppercase;opacity:.6;width:60px}.seg{display:flex;border:1px solid #555;border-radius:8px;overflow:hidden}.seg button{background:transparent;color:#bbb;border:0;padding:8px 12px;font-size:14px}.seg button.on{background:#3a3a48;color:#fff}button.big{background:#2f2f3a;color:#eee;border:1px solid #555;border-radius:10px;padding:12px 18px;font-size:18px;min-width:64px}button.big:active{background:#444}button.big:disabled{opacity:.4}button.big small{font-size:11px;opacity:.6;display:block}button.link{background:none;border:0;color:#999;text-decoration:underline}.legend{display:flex;gap:18px;font-size:12px;opacity:.75;align-items:center;margin-top:6px}.legend i{display:inline-block;vertical-align:middle;margin-right:4px}.legend .snag{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid #ff7a45}.legend .knot{width:18px;height:12px;border-radius:50%;background:#8f7cff88}.legend .keys{opacity:.6}.pause-icon{font-size:48px;font-weight:900;opacity:.5}#countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:900;color:#fff;text-shadow:0 4px 16px #000;pointer-events:none}.end-score{font-size:44px;font-weight:800;text-align:center}.end-score small{display:block;font-size:13px;font-weight:400;min-height:1em}#pattern{width:100%;max-width:640px;height:auto;background:#e9e4d8;border-radius:8px;display:block;margin:6px auto}#end-stats{font-size:13px;opacity:.85;text-align:center;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}#end-stats b{font-variant-numeric:tabular-nums}#rotate-hint{display:none}@media (orientation: portrait) and (max-width: 1100px){#rotate-hint{display:flex;flex-direction:column;gap:18px;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#111;align-items:center;justify-content:center}#rotate-hint .rotate-text{font-size:16px;opacity:.8}#rotate-hint .phone-icon{width:40px;height:70px;border:4px solid #ccc;border-radius:8px;animation:rot 1.6s ease-in-out infinite}@keyframes rot{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}}
