*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{color:var(--text-primary);-webkit-font-smoothing:antialiased;background-color:#0000;background-image:radial-gradient(at 50% 15%,#27493573,#0000 70%),radial-gradient(at 85% 85%,#22393459,#0000 60%),radial-gradient(at 15% 75%,#243d2659,#0000 60%),linear-gradient(165deg,#1c2621 0%,#111815 100%);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;min-height:100dvh;font-family:Outfit,system-ui,sans-serif;overflow-x:hidden}:root{--bg-base:#1a231e;--bg-surface:#232f28;--bg-raised:#2c3a33;--bg-glass:#212c26f0;--bg-glass-dark:#151e19f5;--text-primary:#ebe7e0;--text-secondary:#adc2b4;--text-muted:#789183;--accent-gold:#d4a435;--accent-purple:#9364b4;--accent-cyan:#d4a435;--accent-danger:#c84141;--accent-success:#46a44e;--border-subtle:#476b5659;--border-medium:#568f6e73;--border-glow:#d4a43599;--tile-red:#724d40;--tile-blue:#465d6d;--tile-green:#3d6039;--tile-yellow:#79683e;--tile-purple:#5c476b;--tile-orange:#71553d;--tile-teal:#3c5d55;--tile-pink:#6e495c;--tile-size:min(9vw, 70px);--tile-gap:min(.8vw, 6px);--board-padding:18px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--dur-fast:.15s;--dur-normal:.28s;--dur-slow:.45s;--z-board:10;--z-hud:20;--z-popup:50;--z-overlay:100}.visually-hidden{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:3px}#app{flex-direction:column;min-height:100dvh;display:flex}.screen{animation:screen-enter var(--dur-slow) var(--ease-out) both;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:1.5rem;display:flex}@keyframes screen-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.glass-panel{-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-xl);background:linear-gradient(145deg,#25322bf2,#1a231ff5);border:1px solid #49795d66;box-shadow:0 12px 40px #000c,inset 0 1px #bddbc726,inset 0 -2px 6px #0009}.btn{border-radius:var(--radius-md);cursor:pointer;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;user-select:none;letter-spacing:.03em;text-transform:uppercase;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-family:inherit;font-size:1rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{color:#0f1914;background:linear-gradient(135deg,#ca9a2b,#966a2c);border:1px solid #d9c8a680;box-shadow:0 4px 16px #bd912859,inset 0 1px #f2ead966}.btn-primary:hover:not(:disabled){transform:translateY(-1px)scale(1.02);box-shadow:0 6px 24px #d4a43580,inset 0 1px #f2ead999}.btn-secondary{color:var(--text-primary);background:linear-gradient(145deg,#304038,#232f29);border:1px solid #527a6366;box-shadow:inset 0 1px #cde4d51f}.btn-secondary:hover:not(:disabled){border-color:var(--accent-gold);color:var(--accent-gold);background:linear-gradient(145deg,#384d42,#283931)}.btn-danger{background:linear-gradient(135deg, var(--accent-danger), #a34729);color:#fff}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-subtle);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-medium)}.btn-lg{border-radius:var(--radius-lg);padding:1rem 2.5rem;font-size:1.125rem}.btn-sm{padding:.5rem 1.25rem;font-size:.875rem}.btn-full{width:100%}.input{border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;background:#1d2621;border:1px solid #476b5673;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem;box-shadow:inset 0 2px 5px #000000b3}.input:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px #d4a43540,inset 0 2px 5px #000000b3}.input::placeholder{color:var(--text-muted)}.input-code{letter-spacing:.25em;text-align:center;text-transform:uppercase;max-width:220px;font-size:1.5rem;font-weight:700}.logo{letter-spacing:.02em;background:linear-gradient(135deg, var(--text-primary) 0%, var(--accent-gold) 50%, #82c988 100%);-webkit-text-fill-color:transparent;user-select:none;filter:drop-shadow(0 2px 8px #000c);background-clip:text;font-size:clamp(3rem,8vw,5.5rem);font-weight:800;line-height:1}.tagline{color:var(--text-secondary);letter-spacing:.02em;text-align:center;font-size:clamp(.875rem,2vw,1.125rem);font-weight:400}.heading-1{letter-spacing:.02em;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700}.heading-2{letter-spacing:.01em;font-size:clamp(1.125rem,3vw,1.75rem);font-weight:600}.heading-3{text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-size:.875rem;font-weight:600}.menu-screen{text-align:center;gap:2.5rem}.menu-logo-area{flex-direction:column;align-items:center;gap:.75rem;display:flex}.menu-panel{flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:2rem 2.5rem;display:flex}.menu-divider{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:1rem;font-size:.8125rem;display:flex}.menu-divider:before,.menu-divider:after{content:"";background:var(--border-subtle);flex:1;height:1px}.join-row{gap:.5rem;display:flex}.join-row .input{flex:1}.lobby-screen{align-items:stretch;gap:1.5rem;width:100%;max-width:700px;margin:0 auto}.lobby-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.lobby-code-display{border:1px solid var(--border-medium);border-radius:var(--radius-lg);background:linear-gradient(145deg,#2c3a33,#212c27);align-items:center;gap:.75rem;padding:.6rem 1.25rem;display:flex;box-shadow:inset 0 1px #bddbc71f}.lobby-code-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-size:.75rem;font-weight:600}.lobby-code-value{letter-spacing:.2em;color:var(--accent-gold);font-family:Courier New,monospace;font-size:1.5rem;font-weight:800}.lobby-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=600px){.lobby-grid{grid-template-columns:1fr}}.lobby-panel{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.player-list{flex-direction:column;gap:.5rem;display:flex}.player-item{border-radius:var(--radius-md);transition:border-color var(--dur-fast);background:linear-gradient(145deg,#2a3730,#1e2924);border:1px solid #476b5659;align-items:center;gap:.75rem;padding:.625rem .875rem;display:flex}.player-item.is-ready{border-color:#4db35599}.player-avatar{background:linear-gradient(135deg, var(--accent-purple), var(--accent-gold));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:.875rem;font-weight:700;display:flex;box-shadow:inset 0 1px #ffffff4d}.player-name{flex:1;font-size:.9375rem;font-weight:500}.player-status{text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:600}.player-status.ready{color:var(--accent-success)}.player-status.waiting{color:var(--text-muted)}.player-status.disconnected{color:var(--accent-danger)}.badge-host{text-transform:uppercase;letter-spacing:.1em;color:var(--accent-gold);font-size:.6875rem;font-weight:700}.settings-grid{flex-direction:column;gap:.875rem;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.setting-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.setting-value{color:var(--text-primary);font-size:.875rem;font-weight:600}.lobby-actions{justify-content:flex-end;gap:.75rem;display:flex}.game-screen{justify-content:flex-start;gap:0;height:100dvh;padding:0;overflow:hidden}.game-layout{grid-template-rows:auto 1fr auto;gap:.75rem;width:100%;max-width:1200px;height:100dvh;margin:0 auto;padding:.75rem;display:grid}.game-top-bar{border-radius:var(--radius-lg);border:1px solid var(--border-medium);background:var(--bg-glass-dark);backdrop-filter:blur(16px);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex;box-shadow:0 4px 20px #0009}.game-center{justify-content:center;align-items:center;display:flex;overflow:hidden}.game-bottom-bar{border-radius:var(--radius-lg);border:1px solid var(--border-medium);background:var(--bg-glass-dark);backdrop-filter:blur(16px);align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex;box-shadow:0 4px 20px #0009}.board{gap:var(--tile-gap);padding:var(--board-padding);border-radius:var(--radius-xl);background:radial-gradient(circle,#25312b,#131b18);border:3px solid #43705699;display:grid;box-shadow:0 12px 48px #000000e6,inset 0 0 20px #000000f2,0 0 0 1px #b8a37a40}.celtic-frame-container{border-radius:calc(var(--radius-xl) + 4px);padding:8px;position:relative}.celtic-corner{width:38px;height:38px;color:var(--accent-gold);opacity:.75;pointer-events:none;z-index:15;position:absolute}.celtic-corner-tl{top:2px;left:2px}.celtic-corner-tr{top:2px;right:2px;transform:scaleX(-1)}.celtic-corner-bl{bottom:2px;left:2px;transform:scaleY(-1)}.celtic-corner-br{bottom:2px;right:2px;transform:scale(-1)}.celtic-knot-svg{filter:drop-shadow(0 1px 2px #000000e6);width:100%;height:100%}.tile{width:var(--tile-size);height:var(--tile-size);border-radius:var(--radius-sm);cursor:pointer;user-select:none;will-change:transform;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-normal) ease;border:1px solid #0009;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 1px 1px 2px #ede8de40,inset -2px -2px 5px #000c,0 6px 14px #000000a6}.tile:hover:not(.tile--disabled){z-index:2;transform:scale(1.08);box-shadow:inset 1px 1px 3px #ede8de59,inset -2px -2px 5px #000c,0 8px 20px #d4a4354d}.tile.tile--selected{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold), 0 4px 24px #d4a43580, inset 0 0 10px #d4a43566;z-index:3;transform:scale(1.1)}.tile.tile--matched{animation:tile-shatter .65s var(--ease-out) forwards}.tile.tile--highlight{z-index:10;box-shadow:0 0 35px 10px var(--accent-gold), inset 0 0 25px #e9d096e6;border-color:var(--accent-gold);animation:tile-scale-highlight .65s var(--ease-spring) forwards}.tile.tile--victory-wave{z-index:8;animation:.6s ease-in-out forwards tile-victory-pulse}@keyframes tile-victory-pulse{0%{filter:brightness();transform:scale(1)rotate(0)}50%{filter:brightness(1.8) drop-shadow(0 0 15px var(--accent-gold));transform:scale(1.25)rotate(15deg)}to{filter:brightness(1.4);transform:scale(1.1)rotate(0)}}.victory-banner-overlay{z-index:var(--z-popup);backdrop-filter:blur(8px);border-radius:var(--radius-xl);animation:banner-fade-in .4s var(--ease-out) forwards;background:#101814d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.victory-banner-text{color:var(--accent-gold);text-shadow:0 4px 20px #000000e6;letter-spacing:.05em;text-align:center;border:2px solid var(--accent-gold);border-radius:var(--radius-lg);background:linear-gradient(135deg,#202c26f2,#151e1af2);padding:1rem 2rem;font-size:clamp(1.5rem,5vw,2.75rem);font-weight:900;box-shadow:0 8px 32px #d4a43580}@keyframes banner-fade-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.turn-transition-banner{z-index:var(--z-overlay);pointer-events:none;border-radius:var(--radius-xl);letter-spacing:.08em;text-transform:uppercase;animation:turn-banner-anim .6s var(--ease-spring) forwards;padding:1rem 3rem;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%)scale(.9);box-shadow:0 12px 48px #000000d9}.turn-banner--active{background:linear-gradient(135deg, var(--accent-gold), #966a2c);color:#0f1914;border:2px solid #ecdfc6cc;box-shadow:0 8px 40px #d4a43599}.turn-banner--end{color:var(--text-secondary);background:linear-gradient(135deg,#304038,#232f29);border:2px solid #527a6399}@keyframes turn-banner-anim{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}75%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.9)}}@keyframes tile-scale-highlight{0%{filter:brightness();transform:scale(1)}50%{filter:brightness(1.7);transform:scale(1.2)}to{filter:brightness(1.5);transform:scale(1.15)}}@keyframes tile-shatter{0%{opacity:1;filter:brightness(1.5);transform:scale(1.15)}30%{opacity:.9;transform:scale(1.3)rotate(8deg)}to{opacity:0;transform:scale(0)rotate(25deg)}}@keyframes tile-swap-3d{0%{transform:scale(1)rotateY(0)}50%{transform:scale(1.2)rotateY(180deg)}to{transform:scale(1)rotateY(360deg)}}@keyframes tile-fall-bounce{0%{opacity:0;transform:translateY(-120%)}70%{opacity:1;transform:translateY(8%)}85%{transform:translateY(-3%)}to{transform:translateY(0)}}@keyframes tile-enter{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes tile-reject{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.tile--red{background:linear-gradient(145deg,#835849,#53362d)}.tile--blue{background:linear-gradient(145deg,#506a7c,#304250)}.tile--green{background:linear-gradient(145deg,#477043,#2b4828)}.tile--yellow{background:linear-gradient(145deg,#877345,#564929)}.tile--purple{background:linear-gradient(145deg,#69527a,#42324e)}.tile--orange{background:linear-gradient(145deg,#7e5f44,#513c2a)}.tile--teal{background:linear-gradient(145deg,#487066,#2c4942)}.tile--pink{background:linear-gradient(145deg,#7a5266,#4e3240)}.tile-shape{color:#e2dccff2;filter:drop-shadow(0 -1px .5px #000000f2)drop-shadow(0 1px .5px #ede8de4d);pointer-events:none;flex-shrink:0;width:58%;height:58%}.turn-indicator{align-items:center;gap:.625rem;font-size:.875rem;font-weight:600;display:flex}.turn-dot{background:var(--accent-gold);width:10px;height:10px;box-shadow:0 0 8px var(--accent-gold);border-radius:50%;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.turn-name{color:var(--text-primary);font-weight:700}.is-my-turn .turn-name{color:var(--accent-gold)}.timer-bar-wrap{align-items:center;gap:.75rem;display:flex}.timer-number{text-align:right;tabular-nums:true;font-variant-numeric:tabular-nums;min-width:2.25rem;color:var(--text-primary);transition:color var(--dur-fast) ease;font-size:1.5rem;font-weight:800}.timer-number.warning{color:var(--accent-danger)}.timer-ring{width:40px;height:40px;transform:rotate(-90deg)}.timer-ring-track{fill:none;stroke:var(--bg-surface);stroke-width:4px}.timer-ring-fill{fill:none;stroke:var(--accent-purple);stroke-width:4px;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear, stroke var(--dur-fast) ease}.timer-ring-fill.warning{stroke:var(--accent-danger)}.secret-badge{border-radius:var(--radius-md);border:1px solid var(--border-medium);background:var(--bg-surface);align-items:center;gap:.75rem;padding:.5rem .875rem;display:flex;box-shadow:inset 0 1px #e4ddcd1a}.secret-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.6875rem;font-weight:600}.secret-tile{border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;display:flex;box-shadow:inset 1px 1px 1px #ede8de33,inset -1px -1px 3px #000c,0 2px 8px #00000080}.secret-tile .tile-shape{width:60%;height:60%}.score-bar-section{flex-direction:column;flex:1;gap:.375rem;display:flex}.score-bar-track{background:#161d1a;border:1px solid #476b5666;border-radius:999px;height:14px;position:relative;overflow:visible;box-shadow:inset 0 2px 5px #000000e6}.score-bar-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-gold));height:100%;transition:width .6s var(--ease-out);border-radius:999px;box-shadow:0 0 12px #d4a43566}.score-bar-marker{width:16px;height:24px;transition:left .6s var(--ease-out);border:1px solid #e4ddcdcc;border-radius:4px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #000c}.score-bar-marker--me{background:var(--accent-purple);box-shadow:0 0 10px var(--accent-purple)}.score-bar-marker--leader{background:var(--accent-gold);box-shadow:0 0 10px var(--accent-gold)}.score-bar-labels{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;font-size:.6875rem;font-weight:500;display:flex}#popup-layer{pointer-events:none;z-index:var(--z-popup);position:fixed;inset:0}.score-popup{color:var(--accent-gold);text-shadow:0 2px 10px #000000e6;pointer-events:none;white-space:nowrap;animation:popup-rise 2s var(--ease-out) forwards;font-size:1.5rem;font-weight:800;position:absolute}.score-popup:before{content:attr(data-label);text-align:center;opacity:.85;color:var(--text-primary);font-size:.875rem;font-weight:600;display:block}@keyframes popup-rise{0%{opacity:0;transform:translateY(0)scale(.8)}15%{opacity:1;transform:translateY(-20px)scale(1.1)}60%{opacity:1;transform:translateY(-60px)scale(1)}to{opacity:0;transform:translateY(-90px)scale(.9)}}.results-screen{gap:2rem;width:100%;max-width:700px;margin:0 auto}.results-header{text-align:center}.winner-crown{font-size:3rem;line-height:1}.winner-name{color:var(--accent-gold);font-size:1.5rem;font-weight:800}.results-list{flex-direction:column;gap:.625rem;display:flex}.result-item{border-radius:var(--radius-md);transition:border-color var(--dur-fast);background:linear-gradient(145deg,#2a3730,#1e2924);border:1px solid #476b5659;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.result-item.is-winner{background:#d4a4351a;border-color:#d4a43599}.result-rank{color:var(--text-muted);min-width:1.75rem;font-size:1.25rem;font-weight:800}.result-rank.gold{color:var(--accent-gold)}.result-name{flex:1;font-weight:600}.result-secret{border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:inset 0 1px #e4ddcd33}.result-secret .tile-shape{width:60%;height:60%}.result-score{color:var(--accent-gold);font-size:1.25rem;font-weight:800}.results-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.cascade-badge{background:linear-gradient(135deg, var(--accent-gold), #966a2c);color:#0f1914;border-radius:var(--radius-xl);z-index:var(--z-overlay);pointer-events:none;animation:cascade-badge-show 1.2s var(--ease-spring) forwards;border:2px solid #e8dec999;padding:.5rem 1.5rem;font-size:2rem;font-weight:900;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(0);box-shadow:0 8px 40px #d4a43599}@keyframes cascade-badge-show{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}70%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.8)}}.bg-orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(90px);opacity:.45;border-radius:50%;position:absolute}.bg-orb-1{background:radial-gradient(circle,#244c32,#0000 70%);width:65vw;height:65vw;top:-15%;left:-15%}.bg-orb-2{background:radial-gradient(circle,#24423b,#0000 70%);width:55vw;height:55vw;bottom:-10%;right:-10%}.bg-orb-3{background:radial-gradient(circle,#433619,#0000 70%);width:45vw;height:45vw;top:35%;left:35%}@media (width<=480px){:root{--tile-size:min(11vw, 52px);--tile-gap:3px;--board-padding:10px}.celtic-corner{display:none}.game-top-bar,.game-bottom-bar{gap:.5rem;padding:.5rem .75rem}.timer-number{font-size:1.25rem}}@media (width>=900px){:root{--tile-size:68px;--tile-gap:6px}}.global-header-controls{z-index:1000;align-items:center;gap:.625rem;display:flex;position:fixed;top:1.25rem;right:1.25rem}.header-btn{border:1px solid var(--border-gold-dim);width:42px;height:42px;color:var(--accent-gold);cursor:pointer;transition:all .2s var(--ease-out);background:linear-gradient(135deg,#27352d,#1a231f);border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #0009}.header-btn:hover{border-color:var(--accent-gold);color:var(--text-primary);transform:scale(1.08);box-shadow:0 0 16px #d4a43566}.header-btn:active{transform:scale(.95)}.header-btn-sound.muted{color:var(--text-muted);border-color:#476b5680}.settings-modal-backdrop{backdrop-filter:blur(8px);z-index:2000;background:#0c120fd9;justify-content:center;align-items:center;padding:1.25rem;animation:.25s forwards modal-backdrop-in;display:flex;position:fixed;inset:0}.settings-modal-content{width:100%;max-width:440px;animation:modal-content-in .3s var(--ease-spring) forwards}.settings-modal-inner{flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex}.settings-modal-header{border-bottom:1px solid var(--border-gold-dim);justify-content:space-between;align-items:center;padding-bottom:.875rem;display:flex}.btn-icon-close{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.25rem;font-size:1.25rem;transition:color .2s}.btn-icon-close:hover{color:var(--accent-gold)}.settings-section{flex-direction:column;gap:.875rem;display:flex}.settings-row{justify-content:space-between;align-items:center;display:flex}.settings-label{color:var(--text-primary);font-size:.9375rem;font-weight:700}.btn-toggle-mute{border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--border-gold-dim);padding:.375rem .875rem;font-size:.8125rem;font-weight:700;transition:all .2s}.btn-toggle-mute.unmuted{background:linear-gradient(135deg, var(--accent-gold), #966a2c);color:#0f1914}.btn-toggle-mute.muted{color:var(--text-muted);background:#27342d}.volume-slider-wrap{align-items:center;gap:1rem;display:flex}.volume-slider{accent-color:var(--accent-gold);cursor:pointer;flex:1;height:6px}.volume-percent{color:var(--accent-gold);text-align:right;min-width:40px;font-size:.875rem;font-weight:700}.settings-divider{background:var(--border-gold-dim);height:1px}.checkbox-row{cursor:pointer;user-select:none;align-items:center;gap:.75rem;display:flex}.settings-checkbox{width:18px;height:18px;accent-color:var(--accent-gold);cursor:pointer}.checkbox-label{color:var(--text-primary);font-size:.875rem;font-weight:600}@keyframes modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-content-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}