:root{--paper-50: #FDFCFA;--paper-100: #F9F6F0;--paper-200: #F3EDE3;--paper-300: #E8E0D0;--ink: #1C1917;--ink-light: #44403C;--ink-muted: #78716C;--accent-red: #B91C1C;--accent-blue: #1E40AF;--dial-size: min(72vw, 300px)}.game-shell{height:100dvh;display:flex;flex-direction:column;background-color:var(--paper-100);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-blend-mode:soft-light;overflow:hidden}.game-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(28,25,23,.1);flex-shrink:0}.header-left{display:flex;align-items:baseline;gap:8px}.header-actions{display:flex;gap:8px}.header-btn{padding:6px 12px;font-size:13px;font-weight:600;background:transparent;border:1.5px solid var(--ink);border-radius:6px;cursor:pointer;transition:all .15s ease}.header-btn:hover:not(:disabled){background:var(--ink);color:var(--paper-50)}.header-btn:disabled{opacity:.4;cursor:not-allowed}.header-btn-icon{width:32px;padding:6px;display:flex;align-items:center;justify-content:center}.score-strip{display:flex;align-items:center;justify-content:center;gap:24px;padding:10px 16px;background:var(--paper-50);border-bottom:1px solid rgba(28,25,23,.1);flex-shrink:0}.score-item{display:flex;align-items:center;gap:8px}.score-item-btn{background:none;border:none;cursor:pointer;padding:4px 8px;margin:-4px -8px;border-radius:6px;transition:background .15s ease}.score-item-btn:hover{background:#1c19170d}.score-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted)}.score-value{font-size:24px;font-weight:600;line-height:1}.score-divider{width:1px;height:24px;background:#1c191726}.play-area{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0}.loading-state{text-align:center;padding:32px;background:var(--paper-50);border:1px solid var(--ink);border-radius:8px}.rotary-dial{position:relative;width:var(--dial-size);height:var(--dial-size);border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--paper-50) 0%,var(--paper-100) 60%,var(--paper-200) 100%);border:3px solid var(--ink);box-shadow:inset 0 2px 8px #fffc,inset 0 -2px 6px #0000000d,0 1px 0 var(--paper-300),0 6px 20px #0000001f}.rotary-dial:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:83.75%;height:83.75%;border-radius:50%;background:transparent;border:calc(var(--dial-size) * .1625) solid rgba(28,25,23,.03);box-shadow:inset 0 1px 3px #0000000a,inset 0 -1px 2px #ffffff80;pointer-events:none}.rotary-dial:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40.625%;height:40.625%;border-radius:50%;background:linear-gradient(145deg,var(--paper-200) 0%,var(--paper-100) 50%,var(--paper-50) 100%);border:1px solid rgba(28,25,23,.12);box-shadow:inset 0 2px 4px #0000000f,0 1px 2px #fffc;pointer-events:none}.dial-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34.375%;height:34.375%;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--paper-50) 0%,var(--paper-100) 70%);border:2px solid var(--ink);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 2px 6px #ffffffe6,inset 0 -1px 3px #0000000d,0 3px 0 var(--ink),0 4px 8px #0000001a;z-index:2}.dial-center:hover:not(:disabled){background:radial-gradient(circle at 40% 35%,var(--paper-100) 0%,var(--paper-200) 70%);transform:translate(-50%,-50%) translateY(-1px);box-shadow:inset 0 2px 6px #ffffffe6,inset 0 -1px 3px #0000000d,0 4px 0 var(--ink),0 6px 12px #0000001f}.dial-center:active:not(:disabled){transform:translate(-50%,-50%) translateY(2px);box-shadow:inset 0 2px 6px #ffffffe6,inset 0 -1px 3px #0000000d,0 1px 0 var(--ink),0 2px 4px #00000014}.dial-center.can-submit{background:radial-gradient(circle at 40% 35%,var(--ink-light) 0%,var(--ink) 70%);color:var(--paper-50);border-color:var(--ink);box-shadow:inset 0 2px 8px #ffffff26,inset 0 -2px 4px #0003,0 3px #0c0a09,0 4px 8px #00000026}.dial-center.can-submit:hover:not(:disabled){background:radial-gradient(circle at 40% 35%,#57534e 0%,var(--ink-light) 70%);transform:translate(-50%,-50%) translateY(-1px)}.dial-hole{position:absolute;width:16.25%;height:16.25%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0%,var(--paper-50) 50%,var(--paper-100) 100%);border:1.5px solid var(--ink);cursor:pointer;transition:all .18s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;box-shadow:inset 0 2px 4px #ffffffe6,inset 0 -1px 2px #0000000a,0 2px #1c1917cc,0 3px 6px #00000014}.dial-letter{font-size:clamp(16px,5vw,22px);font-weight:600}.dial-hole:hover{background:radial-gradient(circle at 40% 35%,var(--ink-light) 0%,var(--ink) 70%);color:var(--paper-50);transform:scale(1.1) translateY(-2px);box-shadow:inset 0 2px 6px #ffffff26,inset 0 -1px 3px #0003,0 4px #1c1917e6,0 6px 12px #00000026}.dial-hole:hover .dial-letter{color:var(--paper-50)}.dial-hole:active{transform:scale(.96) translateY(1px)}.dial-hole.vowel{border-color:var(--accent-red);box-shadow:inset 0 2px 4px #ffffffe6,inset 0 -1px 2px #0000000a,0 2px 0 var(--accent-red),0 3px 6px #b91c1c26}.dial-hole.vowel:hover{background:radial-gradient(circle at 40% 35%,#dc2626 0%,var(--accent-red) 70%);border-color:var(--accent-red)}.dial-hole.vowel:hover .dial-letter{color:var(--paper-50)}.finger-stop{position:absolute;right:1.875%;top:50%;transform:translateY(-50%);width:3.125%;height:13.75%;background:linear-gradient(90deg,var(--ink-light) 0%,var(--ink) 40%,var(--ink-light) 60%,var(--ink) 100%);border-radius:2px;box-shadow:inset 1px 0 2px #ffffff1a,-1px 0 2px #0003,0 2px 4px #00000026}.action-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--paper-50);border-top:1px solid rgba(28,25,23,.1);flex-shrink:0}@media (max-width: 639px){.action-bar{order:-1;border-top:none;border-bottom:1px solid rgba(28,25,23,.1)}.play-area{order:0}}.word-display{flex:1;min-width:0;min-height:52px;display:flex;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.word-display::-webkit-scrollbar{display:none}.word-placeholder{color:var(--ink-muted);font-style:italic;font-size:14px}.word-tiles{display:flex;gap:4px}.mini-tile{flex-shrink:0;width:36px;height:44px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper-100);border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);font-family:JetBrains Mono,monospace;font-size:16px;font-weight:600}.mini-tile.vowel{border-color:var(--accent-red);box-shadow:0 2px 0 var(--accent-red)}.tile-pts{font-size:9px;color:var(--ink-muted);font-weight:400}.action-buttons{display:flex;gap:8px;flex-shrink:0}.action-btn{width:44px;height:44px;border-radius:8px;font-size:18px;background:transparent;border:1.5px solid var(--ink);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.action-btn:hover{background:var(--ink);color:var(--paper-50)}.action-btn:active{transform:scale(.95)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c191733;z-index:50}.modal-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92vw;max-width:400px;max-height:85dvh;overflow-y:auto;background:var(--paper-50);border:2px solid var(--ink);border-radius:12px;box-shadow:0 8px 30px #00000026;padding:20px;z-index:51}@keyframes dial-success{0%{transform:rotate(0)}30%{transform:rotate(-12deg)}to{transform:rotate(0)}}@keyframes dial-error{0%{transform:rotate(0)}15%{transform:rotate(-6deg)}30%{transform:rotate(4deg)}50%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}to{transform:rotate(0)}}@keyframes tile-pop{0%{transform:scale(.8) translateY(4px);opacity:0}60%{transform:scale(1.05) translateY(-1px)}to{transform:scale(1) translateY(0);opacity:1}}@keyframes score-bump{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes toast-slide{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}.dial-success{animation:dial-success .5s cubic-bezier(.25,.46,.45,.94)}.dial-error{animation:dial-error .45s cubic-bezier(.25,.46,.45,.94)}.animate-tile-pop{animation:tile-pop .2s ease-out}.animate-score-bump{animation:score-bump .25s ease-out}.animate-toast{animation:toast-slide .2s ease-out}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:8px;font-family:DM Sans,sans-serif;font-weight:600;font-size:14px;z-index:100;border:1.5px solid;white-space:nowrap}.toast-success{background:#ecfdf5;border-color:#059669;color:#047857}.toast-error{background:#fef2f2;border-color:#dc2626;color:#b91c1c}.toast-bonus{background:#fef3c7;border-color:#d97706;color:#b45309}.font-display{font-family:Playfair Display,serif}.font-sans{font-family:DM Sans,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.text-ink{color:var(--ink)}.text-ink-muted{color:var(--ink-muted)}.text-ink-light{color:var(--ink-light)}.text-accent-red{color:var(--accent-red)}.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:8px 16px;font-family:DM Sans,sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s ease}.btn-secondary:hover{background:var(--ink);color:var(--paper-50)}.dialing-word{display:flex;justify-content:center;gap:6px;margin-bottom:8px}.dialing-letter{width:38px;height:46px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper-200);border:2px solid var(--ink);font-family:JetBrains Mono,monospace;font-size:18px;font-weight:600;opacity:.4;transform:scale(.9);transition:all .3s ease}.dialing-letter.vowel{border-color:var(--accent-red)}.dialing-letter.dialed{opacity:1;transform:scale(1);background:var(--paper-50);box-shadow:0 2px 0 var(--ink)}.dialing-letter.vowel.dialed{box-shadow:0 2px 0 var(--accent-red)}.dialing-letter.dialing{opacity:1;animation:dial-letter .4s cubic-bezier(.25,.46,.45,.94);background:var(--ink);color:var(--paper-50);transform:scale(1.15);box-shadow:0 3px #1c1917cc,0 6px 16px #0003}.dialing-letter.vowel.dialing{background:var(--accent-red);box-shadow:0 3px #7f1d1d,0 6px 16px #b91c1c4d}.dialing-letter.dialing span{color:var(--paper-50)!important}.dialing-letter.complete{opacity:1;transform:scale(1);background:var(--paper-50);box-shadow:0 2px 0 var(--ink)}.dialing-letter.vowel.complete{box-shadow:0 2px 0 var(--accent-red)}@keyframes dial-letter{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.15) rotate(-15deg)}50%{transform:scale(1.2) rotate(0)}75%{transform:scale(1.15) rotate(10deg)}to{transform:scale(1.15) rotate(0)}}.dialing-pts{font-size:9px;color:var(--ink-muted);font-weight:400}.dialing-letter.dialing .dialing-pts{color:#fdfcfab3}.dialing-score{font-size:20px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(-8px) scale(.9);transition:all .4s cubic-bezier(.34,1.56,.64,1)}.dialing-score.show{opacity:1;transform:translateY(0) scale(1)}@media (min-width: 640px){:root{--dial-size: 320px}.game-header{padding:16px 24px}.score-strip{padding:12px 24px;gap:32px}.score-value{font-size:28px}.action-bar{padding:16px 24px;justify-content:center;gap:16px}.word-display{flex:none;max-width:400px}.mini-tile{width:40px;height:48px;font-size:18px}.toast{bottom:100px;font-size:15px}}@media (max-height: 600px) and (orientation: landscape){:root{--dial-size: min(45vh, 240px)}.game-header{padding:8px 16px}.score-strip{padding:6px 16px}.score-value{font-size:20px}.play-area{padding:8px}.action-bar{padding:8px 16px}.mini-tile{width:32px;height:38px;font-size:14px}.toast{bottom:60px}}.tutorial-modal{max-width:420px}.tutorial-section{display:flex;gap:14px;align-items:flex-start}.tutorial-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--paper-100);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 2px 0 var(--ink)}.tutorial-icon-bonus{background:var(--ink);color:var(--paper-50);font-size:14px}.tutorial-icon-vowel{border-color:var(--accent-red);box-shadow:0 2px 0 var(--accent-red)}.tutorial-start-btn{display:block;width:100%;margin-top:24px;padding:14px 24px;font-family:DM Sans,sans-serif;font-size:16px;font-weight:600;background:var(--ink);color:var(--paper-50);border:2px solid var(--ink);border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px #0c0a09,0 4px 8px #00000026}.tutorial-start-btn:hover{transform:translateY(-2px);box-shadow:0 5px #0c0a09,0 8px 16px #0000002e}.tutorial-start-btn:active{transform:translateY(1px);box-shadow:0 1px #0c0a09,0 2px 4px #0000001f}@keyframes tutorial-fade-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.tutorial-modal{animation:tutorial-fade-in .3s ease-out}