.App{min-height:100vh;display:flex;flex-direction:column;align-items:center}*{box-sizing:border-box;margin:0;padding:0}:root{--gold: #c9a84c;--gold-light: #f0d080;--gold-dark: #8b6a10;--brass: #a07830;--dark: #0c0906;--dark2: #18120a;--dark3: #241a0e;--dial-rim: #3d2a0f;--text-dim: #5a4020;--text-mid: #b08040;--text-bright: #e8c870;--white: #f5e8c8;--red: #c04040;--green: #40a050}body{background:var(--dark);background-image:radial-gradient(ellipse 80% 40% at 50% -5%,rgba(180,130,30,.12) 0%,transparent 60%),repeating-linear-gradient(45deg,transparent 0px,transparent 20px,rgba(255,255,255,.007) 20px,rgba(255,255,255,.007) 21px);min-height:100vh;color:var(--white);font-family:Crimson Text,Georgia,serif;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;padding-bottom:40px}header{text-align:center;padding:30px 20px 8px;width:100%}header h1{font-family:Cinzel,serif;font-size:clamp(1.4rem,4.5vw,2.4rem);font-weight:700;letter-spacing:.15em;background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-light) 40%,var(--gold) 60%,var(--gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header .subtitle{font-size:.9rem;color:var(--text-mid);margin-top:4px;letter-spacing:.08em;font-style:italic}.game-container{width:100%;max-width:520px;padding:10px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}.puzzle-selector{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.puzzle-btn{background:var(--dark3);border:1px solid var(--dial-rim);color:var(--text-mid);font-family:Cinzel,serif;font-size:.72rem;padding:5px 11px;border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:.05em}.puzzle-btn:hover{border-color:var(--gold-dark);color:var(--gold)}.puzzle-btn.active{background:var(--dark2);border-color:var(--gold);color:var(--gold-light)}.puzzle-bar{width:100%;background:var(--dark2);border:1px solid var(--dial-rim);border-radius:8px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.word-route{display:flex;align-items:center;gap:10px;font-family:Cinzel,serif;font-size:1.05rem;letter-spacing:.12em}.start-lbl{color:var(--text-mid)}.arrow-sym{color:var(--text-dim);font-size:.9rem}.target-lbl{color:var(--gold-light);text-shadow:0 0 10px rgba(240,208,80,.4)}.stats{display:flex;gap:18px}.stat{display:flex;flex-direction:column;align-items:center;gap:1px}.stat-val{font-family:Cinzel,serif;font-size:1.25rem;color:var(--white);line-height:1}.stat-lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.cryptex-wrap{width:100%;display:flex;justify-content:center;padding:8px 0}.cryptex-body{display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,#2a1a08,#160f06,#2a1a08);border:2px solid #4a3010;border-radius:18px;padding:14px;box-shadow:0 0 40px #000000e6,inset 0 1px #ffc8501f,inset 0 -1px #0009,0 6px 20px #0009;position:relative}.cryptex-body:before{content:"";position:absolute;top:-5px;left:16px;right:16px;height:5px;background:linear-gradient(90deg,transparent,var(--gold-dark),var(--gold),var(--gold-dark),transparent);border-radius:3px 3px 0 0}.cryptex-body:after{content:"";position:absolute;bottom:-5px;left:16px;right:16px;height:5px;background:linear-gradient(90deg,transparent,var(--gold-dark),var(--brass),var(--gold-dark),transparent);border-radius:0 0 3px 3px}.dial{display:flex;flex-direction:column;align-items:center;gap:5px;-webkit-user-select:none;user-select:none;touch-action:none}.dial.locked{opacity:.45;pointer-events:none}.spin-btn{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:1.1rem;line-height:1;padding:4px 10px;border-radius:4px;transition:color .18s,transform .12s;font-family:serif}.spin-btn:hover{color:var(--gold);transform:scale(1.25)}.spin-btn:active{transform:scale(.88)}.dial-window{width:72px;height:200px;position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(160deg,#1a1006,#0a0602,#1a1006);border:2px solid var(--dial-rim);box-shadow:inset 0 0 24px #000000e6,inset 3px 0 10px #00000080,inset -3px 0 10px #00000080,0 0 6px #c8a03c14;cursor:grab}.dial-window:active{cursor:grabbing}.dial.modified .dial-window{border-color:#b4821eb3;box-shadow:inset 0 0 24px #000000e6,inset 3px 0 10px #00000080,inset -3px 0 10px #00000080,0 0 14px #c8a03c40,0 0 30px #c8a03c14}.dial-strip{display:flex;flex-direction:column;align-items:center;width:100%;will-change:transform}.dial-letter{width:100%;height:40px;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:700;flex-shrink:0;transition:color .14s,font-size .14s,opacity .14s}.dial-letter.far{font-size:.95rem;color:var(--text-dim);opacity:.5}.dial-letter.near{font-size:1.3rem;color:var(--text-mid);opacity:.78}.dial-letter.current{font-size:2rem;color:var(--gold-light);text-shadow:0 0 16px rgba(240,200,80,.7),0 0 32px rgba(240,200,80,.25)}.dial-window:before{content:"";position:absolute;top:0;left:0;right:0;height:42%;background:linear-gradient(180deg,#0a0602f7,#0a060200);z-index:3;pointer-events:none}.dial-window:after{content:"";position:absolute;bottom:0;left:0;right:0;height:42%;background:linear-gradient(0deg,#0a0602f7,#0a060200);z-index:3;pointer-events:none}.dial-center{position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%);border-top:1px solid rgba(180,130,30,.25);border-bottom:1px solid rgba(180,130,30,.25);background:#b4821e0a;pointer-events:none;z-index:1}.dial-sheen{position:absolute;top:8%;width:3px;height:84%;background:linear-gradient(180deg,transparent,rgba(220,180,80,.12) 35%,rgba(220,180,80,.12) 65%,transparent);z-index:4;pointer-events:none;border-radius:2px}.dial-sheen.l{left:5px}.dial-sheen.r{right:5px}.dial-sep{width:2px;height:55%;background:linear-gradient(180deg,transparent,rgba(80,50,15,.8) 50%,transparent);align-self:center;flex-shrink:0}.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}.ctrl-btn{font-family:Cinzel,serif;font-size:.82rem;letter-spacing:.08em;padding:10px 18px;border-radius:6px;cursor:pointer;transition:all .2s;border:1px solid;font-weight:600;flex-shrink:0}.ctrl-btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}.ctrl-btn.primary{background:linear-gradient(135deg,#3a2508,#5a3a10);border-color:var(--gold-dark);color:var(--gold-light);box-shadow:0 2px 8px #00000080}.ctrl-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#4a3010,#7a5018);border-color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 14px #c8a01e33}.ctrl-btn.secondary{background:transparent;border-color:var(--dial-rim);color:var(--text-mid)}.ctrl-btn.secondary:hover:not(:disabled){border-color:var(--text-mid);color:var(--white);transform:translateY(-1px)}.feedback{min-height:22px;font-size:.9rem;text-align:center;transition:opacity .25s;letter-spacing:.03em;font-style:italic}.feedback.error{color:#e06060}.feedback.ok{color:#60c070}.feedback.info{color:var(--text-mid)}.history-section{width:100%}.history-title{font-family:Cinzel,serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin-bottom:7px}.history-path{display:flex;flex-wrap:wrap;gap:3px 2px;justify-content:center;align-items:center;background:var(--dark2);border:1px solid var(--dark3);border-radius:8px;padding:12px 14px;min-height:50px}.h-word{font-family:Cinzel,serif;font-size:.88rem;letter-spacing:.12em;padding:2px 5px;border-radius:3px;transition:color .2s;color:var(--text-dim)}.h-word.current{color:var(--gold-light);background:#b4821e1a;border:1px solid rgba(180,130,30,.2)}.h-word.done{color:var(--text-mid)}.h-word.goal{color:var(--gold);text-shadow:0 0 8px rgba(240,200,80,.4)}.h-arrow{color:var(--text-dim);font-size:.75rem;margin:0 1px}.scroll-hint{font-size:.72rem;color:var(--text-dim);text-align:center;font-style:italic;letter-spacing:.03em}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}35%{transform:translate(7px)}55%{transform:translate(-4px)}75%{transform:translate(4px)}}.shake{animation:shake .38s ease}@keyframes validGlow{0%,to{box-shadow:inset 0 0 24px #000000e6,0 0 10px #28a0464d}50%{box-shadow:inset 0 0 24px #000000e6,0 0 20px #28a04699}}.dial.valid .dial-window{animation:validGlow 1.4s ease infinite;border-color:#32a0468c}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .4s}.modal-overlay.show{opacity:1;pointer-events:all}.modal{background:linear-gradient(140deg,#1e1408,#2c1e0c,#1e1408);border:2px solid var(--gold-dark);border-radius:18px;padding:38px 46px;text-align:center;max-width:360px;width:92%;box-shadow:0 0 70px #c8a01e2e,0 24px 60px #000000e6;position:relative;transform:scale(.78);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.modal-overlay.show .modal{transform:scale(1)}.modal:before{content:"✦";position:absolute;top:12px;left:16px;color:var(--gold-dark);font-size:.75rem}.modal:after{content:"✦";position:absolute;bottom:12px;right:16px;color:var(--gold-dark);font-size:.75rem}.modal-icon{font-size:2.8rem;margin-bottom:10px}.modal h2{font-family:Cinzel,serif;font-size:1.55rem;letter-spacing:.1em;background:linear-gradient(135deg,var(--gold-dark),var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}.modal p{color:var(--text-mid);font-size:1rem;line-height:1.6;margin-bottom:8px}.modal-path{font-family:Cinzel,serif;font-size:.78rem;color:var(--gold);letter-spacing:.1em;line-height:2;word-break:break-word;margin:10px 0 20px}.rating{display:flex;gap:5px;justify-content:center;margin:8px 0}.star{font-size:1.5rem;color:var(--gold)}.star.empty{color:#2a1e0a;text-shadow:none}.modal-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.modal-btn{font-family:Cinzel,serif;font-size:.84rem;letter-spacing:.08em;padding:11px 24px;background:linear-gradient(135deg,#3a2508,#5a3a10);border:1px solid var(--gold-dark);color:var(--gold-light);border-radius:6px;cursor:pointer;transition:all .2s}.modal-btn:hover{background:linear-gradient(135deg,#4a3010,#7a5018);border-color:var(--gold)}.hint-wrap{width:100%;text-align:center}.hint-toggle{background:none;border:none;color:var(--text-dim);font-family:Crimson Text,serif;font-size:.82rem;font-style:italic;cursor:pointer;letter-spacing:.04em;transition:color .2s}.hint-toggle:hover{color:var(--text-mid)}.hint-text{display:none;margin-top:6px;font-size:.82rem;color:var(--text-dim);font-family:Cinzel,serif;letter-spacing:.1em;animation:fadeIn .3s}.hint-text.shown{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 380px){.dial-window{width:62px;height:190px}.dial-letter.current{font-size:1.7rem}.cryptex-body{padding:12px 10px;gap:3px}.modal{padding:28px 22px}}