:root{--ring-radius: 120px;--slot-size: 40px;--bg-color: #f0f2f5;--text-color: #20243a;--accent-blue: #007AFF;--accent-red: #FF3B30;--accent-gold: #FFCC00;--bg-light-1: #eef2ff;--bg-light-2: #fbe9ff;--text-muted: rgba(32, 36, 58, .55);--surface: rgba(255, 255, 255, .55);--surface-strong: rgba(255, 255, 255, .8);--border-soft: rgba(255, 255, 255, .7);--shadow-color: rgba(80, 70, 180, .18);--overlay-bg: rgba(238, 242, 255, .55);--accent-grad: linear-gradient(135deg, #5b8cff 0%, #9c5bff 100%);--accent-glow: rgba(120, 110, 255, .35)}body{margin:0;background:linear-gradient(160deg,var(--bg-light-1) 0%,var(--bg-light-2) 100%);color:var(--text-color);overflow:hidden;font-family:Inter,system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:relative;width:100%;max-width:100vw;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden}.board-scaler{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:calc(72px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(56px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box;z-index:1}.game-board{position:relative;flex-shrink:0;transform:scale(var(--board-scale, 1));transform-origin:center center;transition:transform .2s ease-out}.ring{position:absolute;width:340px;height:340px;left:50%;top:50%;margin:0;touch-action:none;z-index:10;cursor:grab}.ring:active{cursor:grabbing}.ring:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:50px solid #e0e0e0;box-shadow:inset 0 2px 5px #0000000d;pointer-events:none;z-index:0;box-sizing:border-box;transition:border-color .3s,box-shadow .3s}.ring.ring-solved:before{border-color:#ffcc0059;box-shadow:inset 0 2px 5px #0000000d,0 0 12px #ffcc0080}.hint-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px;font-weight:700;color:var(--accent-blue);pointer-events:none;z-index:40;animation:hint-fade 2s ease-out forwards}@keyframes hint-fade{0%,70%{opacity:1}to{opacity:0}}.ring-1:before{border-color:#007aff1a}.ring-2:before{border-color:#ff3b301a}.ring-3:before{border-color:#34c7591a}.tile{position:absolute;width:var(--slot-size);height:var(--slot-size);line-height:var(--slot-size);text-align:center;border-radius:50%;background:#fff;border:3px solid #ccc;color:#333;font-weight:700;font-size:20px;box-shadow:0 2px 6px #00000026;top:50%;left:50%;margin-left:calc(var(--slot-size) / -2);margin-top:calc(var(--slot-size) / -2);transform-origin:center center;z-index:20;transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}.tile.dragging{transition:none}.tile.tile-r1{border-color:var(--accent-blue);color:#333}.tile.tile-r2{border-color:var(--accent-red);color:#333}.tile.tile-r3{border-color:#34c759;color:#333}.tile.tile-shared{border-color:#dcb000;color:#333;background:#fffef5;box-shadow:0 0 8px #dcb0004d}.rotate-btn{position:absolute;width:36px;height:36px;border-radius:50%;border:2px solid #aaa;background:#fff;color:#333;font-size:18px;font-weight:700;cursor:pointer;z-index:50;box-shadow:0 2px 6px #0003;transition:background .2s,transform .1s;display:flex;align-items:center;justify-content:center}.rotate-btn:hover{background:#f0f0f0}.rotate-btn:active{transform:scale(.95);background:#e0e0e0}.rotate-left{top:-10px;left:-10px}.rotate-right{bottom:-10px;right:-10px}.ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));box-sizing:border-box;z-index:10}.ui-header{display:flex;justify-content:space-between;align-items:flex-start;width:100%;gap:.5rem;min-width:0}.ui-header-btns{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:flex-end;max-width:100%}h1{margin:0;font-size:24px;font-weight:800;letter-spacing:.04em;text-align:center;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.daily-label{margin:2px 0 0;font-size:11px;color:var(--text-muted);text-align:center}.daily-label.hidden{display:none}.scrambling-label{margin:2px 0 0;font-size:11px;color:var(--text-muted);text-align:center}.scrambling-label.hidden{display:none}.btn-icon{background:var(--surface);border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-color);font-size:20px;width:40px;height:40px;border-radius:50%;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px var(--shadow-color);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .1s}.btn-icon:not(:disabled):active{background:var(--surface-strong);transform:scale(.95)}.move-counter{font-size:14px;font-weight:600;color:var(--text-muted);pointer-events:auto;white-space:nowrap;background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;padding:.35rem .8rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-undo-redo{font-size:16px;width:36px;height:36px}.btn-icon:disabled,.btn-undo-redo:disabled{opacity:.35;cursor:not-allowed}.btn-auto-solve{background:var(--accent-grad);color:#fff;border:none;padding:.4rem .8rem;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px var(--accent-glow);transition:transform .1s,box-shadow .2s}.btn-auto-solve:disabled{background:var(--surface);color:var(--text-muted);box-shadow:none;cursor:not-allowed}.btn-auto-solve:not(:disabled):active{transform:scale(.98);box-shadow:0 2px 8px var(--accent-glow)}.menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--overlay-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .3s;pointer-events:auto}.menu-overlay.hidden{opacity:0;pointer-events:none}.menu-content{background:var(--surface-strong);border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:30px;border-radius:24px;text-align:center;width:80%;max-width:320px;color:var(--text-color);box-shadow:0 20px 50px var(--shadow-color),0 0 30px var(--accent-glow)}.menu-content h2{margin:0 0 8px;font-weight:800;letter-spacing:.04em;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.menu-section{margin:20px 0}.menu-section p{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.btn-menu{display:block;width:100%;margin:10px 0;padding:12px;background:var(--surface);border:1px solid var(--border-soft);color:var(--text-color);border-radius:12px;cursor:pointer;font-size:16px;transition:background .2s,transform .1s}.btn-menu:active{background:var(--surface-strong);transform:scale(.98)}.btn-close{margin-top:15px;background:transparent;border:none;color:var(--text-color);opacity:.7;cursor:pointer;font-size:14px;text-decoration:underline}.start-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff0;z-index:200;display:flex;justify-content:center;align-items:flex-end;padding-bottom:100px;transition:opacity .5s,padding-bottom .4s;pointer-events:none;box-sizing:border-box}.start-overlay .btn-start{pointer-events:auto}.start-overlay.game-started{padding-bottom:12px;align-items:flex-end}.start-overlay.game-started .btn-start{font-size:14px;padding:8px 28px;opacity:.75;box-shadow:0 3px 12px var(--accent-glow)}.start-overlay.hidden{opacity:0;pointer-events:none}.btn-start{background:var(--accent-grad);color:#fff;border:none;padding:15px 50px;font-size:24px;font-weight:800;letter-spacing:.05em;border-radius:50px;cursor:pointer;box-shadow:0 8px 25px var(--accent-glow);transform:scale(1);transition:transform .2s,box-shadow .2s}.btn-start:active{transform:scale(.95)}.win-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:300;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s;pointer-events:none}.win-overlay.visible{opacity:1;pointer-events:auto}.win-content{background:var(--surface-strong);border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:40px 30px;border-radius:24px;text-align:center;width:80%;max-width:320px;color:var(--text-color);box-shadow:0 20px 50px var(--shadow-color),0 0 40px var(--accent-glow);transform:scale(.8);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.win-overlay.visible .win-content{transform:scale(1)}.win-content h2{margin:0 0 10px;font-size:28px;font-weight:800;letter-spacing:.04em;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.win-content p{margin:0 0 25px;font-size:16px;color:var(--text-muted)}.win-move-count{font-size:18px;font-weight:600;color:var(--text-color);margin:0 0 25px}.win-time-count{font-size:16px;font-weight:600;color:var(--text-color);margin:-15px 0 10px}.win-hint-count{font-size:14px;color:var(--text-muted);margin:0 0 10px}.win-best-record{font-size:14px;color:var(--text-muted);margin:0 0 25px}.win-buttons{display:flex;flex-direction:column;gap:10px}.btn-win-primary{display:block;width:100%;padding:14px;background:var(--accent-grad);color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;box-shadow:0 6px 20px var(--accent-glow);transition:box-shadow .2s,transform .1s}.btn-win-primary:active{transform:scale(.97);box-shadow:0 2px 10px var(--accent-glow)}.btn-win-secondary{display:block;width:100%;padding:12px;background:var(--surface);border:1px solid var(--border-soft);color:var(--text-color);border-radius:12px;cursor:pointer;font-size:16px;transition:background .2s}.btn-win-secondary:active{background:var(--surface-strong)}@media(max-width:480px){h1{font-size:18px}.daily-label,.scrambling-label{font-size:10px}.move-counter{font-size:12px;padding:.25rem .55rem}.btn-icon{width:36px;height:36px;font-size:18px}.btn-undo-redo{width:32px;height:32px;font-size:14px}.btn-auto-solve{font-size:12px;padding:.3rem .5rem}.board-scaler{padding-top:calc(88px + env(safe-area-inset-top,0px))}.start-overlay{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}.start-overlay.game-started{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.menu-content,.win-content{width:min(88vw,320px);padding:24px 20px}}@media(max-height:600px){.board-scaler{padding-top:calc(64px + env(safe-area-inset-top,0px));padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}}.version{font-size:12px;color:var(--text-muted);margin-left:8px;vertical-align:middle}