:root{--color-bg:#0a0e2e;--color-surface:#131840;--color-surface2:#1c2354;--color-gold:#f5c518;--color-teal:#00c9b1;--color-white:#f0f0f0;--color-gray:#8892b0;--color-error:#ff4757;--color-success:#2ed573;--color-warning:#ffa502;--font:"Segoe UI", system-ui, sans-serif;--tile-size:clamp(2rem, 3vw, 3.2rem);--tile-h:clamp(2.8rem, 4vw, 4rem);--radius:8px;--shadow:0 4px 20px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font);background:var(--color-bg);color:var(--color-white);min-height:100vh;overflow-x:hidden}button{cursor:pointer;font-family:var(--font)}input,textarea,select{font-family:var(--font)}:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.app-shell{flex-direction:column;min-height:100vh;display:flex}.game-main{flex-direction:column;flex:1;gap:.5rem;width:100%;max-width:1600px;margin:0 auto;padding:.5rem;display:flex}.topbar{background:var(--color-surface);border-bottom:2px solid var(--color-gold);z-index:100;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex;position:sticky;top:0}.topbar-left{flex:1;align-items:center;gap:1rem;display:flex}.host-identity{cursor:pointer;font:inherit;color:inherit;text-align:left;background:#f5c51814;border:1px solid #f5c51840;border-radius:2rem;flex-shrink:0;align-items:center;gap:.5rem;padding:.2rem .75rem .2rem .2rem;transition:background .15s,border-color .15s;display:flex}.host-identity:hover{background:#f5c5182e;border-color:#f5c51899}.host-identity:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}.host-info{flex-direction:column;line-height:1.1;display:flex}.host-label{letter-spacing:2px;color:var(--color-gold);text-transform:uppercase;font-size:.55rem;font-weight:700}.host-name{color:var(--color-white);white-space:nowrap;font-size:.8rem;font-weight:700}.app-title-block,.app-title{flex-direction:column;line-height:1.1;display:flex}.app-name{color:var(--color-gold);letter-spacing:2px;text-transform:uppercase;font-size:1.4rem;font-weight:900}.app-subtitle{color:var(--color-teal);letter-spacing:1px;text-transform:uppercase;font-size:.65rem}.app-edition{align-items:center;display:flex}.claude-badge{letter-spacing:.08em;text-transform:uppercase;color:#cc785c;white-space:nowrap;background:#cc785c1f;border:1px solid #cc785c59;border-radius:.9rem;align-items:center;gap:.2rem;padding:.1rem .45rem;font-size:.6rem;font-weight:700;display:inline-flex}.game-info{color:var(--color-gray);white-space:nowrap;font-size:.85rem}.topbar-right{flex-wrap:wrap;align-items:center;gap:.25rem;display:flex}.active-team-banner{text-align:center;width:100%;color:var(--color-teal);letter-spacing:1px;padding:.2rem 0;font-size:1rem;font-weight:700}.game-over-banner{color:var(--color-gold)}.btn-icon{border:1px solid var(--color-surface2);color:var(--color-white);border-radius:var(--radius);background:0 0;padding:.35rem .5rem;font-size:1rem;transition:background .15s}.btn-icon:hover:not(:disabled){background:var(--color-surface2)}.btn-icon:disabled{opacity:.35;cursor:not-allowed}.board-section{width:100%}.puzzle-board-container{background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-surface2);padding:.75rem 1rem}.puzzle-category{text-align:center;color:var(--color-gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem;font-size:.9rem;font-weight:700}.puzzle-prize{text-align:center;color:var(--color-teal);margin-bottom:.4rem;font-size:.8rem}.puzzle-clue{text-align:center;color:var(--color-gray);margin-top:.5rem;font-size:.8rem}.puzzle-board{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.5rem;display:flex}.puzzle-word{gap:3px;display:flex}.puzzle-tile{width:var(--tile-size);height:var(--tile-h);font-size:calc(var(--tile-size) * .7);text-transform:uppercase;border-radius:4px;justify-content:center;align-items:center;font-weight:900;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s;display:flex}.letter-tile.hidden{background:var(--color-surface2);border:2px solid var(--color-gray);color:#0000}.letter-tile.revealed{background:var(--color-white);color:var(--color-bg);border:2px solid var(--color-gold);animation:.3s cubic-bezier(.34,1.56,.64,1) tile-pop}.punct-tile{color:var(--color-white);background:0 0;border:none;font-weight:700}@keyframes tile-pop{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.puzzle-board.empty{min-height:5rem;color:var(--color-gray);justify-content:center;align-items:center;display:flex}.game-middle{align-items:flex-start;gap:1rem;display:flex}.wheel-section{flex-direction:column;flex:none;align-items:center;gap:.5rem;min-width:200px;display:flex}.controls-section{flex-direction:column;flex:1;gap:.75rem;display:flex}.wheel-container{width:100%;max-width:500px;position:relative}.wheel-canvas{width:100%;height:auto;display:block}.spin-result{background:var(--color-surface);border:2px solid var(--color-surface2);border-radius:var(--radius);text-align:center;min-width:140px;padding:.4rem 1rem;transition:border-color .3s}.spin-result.empty{color:var(--color-gray);border-style:dashed}.spin-result.active{border-color:var(--color-gold)}.spin-label{color:var(--color-gray);text-transform:uppercase;letter-spacing:1px;font-size:.7rem;display:block}.spin-value{font-size:1.4rem;font-weight:900;display:block}.turn-controls{background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-surface2);padding:.75rem}.phase-message{text-align:center;color:var(--color-teal);margin-bottom:.5rem;font-size:1rem;font-weight:700}.controls-row{flex-wrap:wrap;gap:.5rem;display:flex}.btn{border-radius:var(--radius);cursor:pointer;border:none;padding:.6rem 1.1rem;font-size:.95rem;font-weight:700;transition:transform .1s,filter .15s}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--color-gold);color:#000}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-secondary{background:var(--color-surface2);color:var(--color-white);border:1px solid var(--color-gray)}.btn-secondary:hover:not(:disabled){filter:brightness(1.2)}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(1.1)}.btn-spin{color:#000;border-radius:var(--radius);letter-spacing:1px;background:linear-gradient(135deg,#f5c518,#e6a800);border:none;flex:2;padding:.8rem 1.5rem;font-size:1.2rem;font-weight:900}.btn-spin:hover:not(:disabled){filter:brightness(1.1)}.btn-vowel{background:var(--color-teal);color:#000;border-radius:var(--radius);border:none;flex:1;padding:.5rem;font-weight:700;line-height:1.2}.btn-vowel small{opacity:.8;font-size:.75rem}.btn-vowel:hover:not(:disabled){filter:brightness(1.1)}.btn-solve{background:var(--color-success);color:#000;border-radius:var(--radius);border:none;flex:1;padding:.5rem;font-weight:700}.btn-solve:hover:not(:disabled){filter:brightness(1.1)}.btn-danger-sm{background:var(--color-error);color:#fff;border:none;border-radius:4px;padding:.3rem .5rem;font-size:.8rem}.btn.sm{padding:.35rem .65rem;font-size:.85rem}.btn-sm{background:var(--color-surface2);color:var(--color-white);border:1px solid var(--color-gray);cursor:pointer;border-radius:4px;padding:.2rem .5rem;font-size:.8rem}.btn-sm:hover:not(:disabled){background:var(--color-surface)}.btn-sm:disabled{opacity:.35}.btn-sm.danger{border-color:var(--color-error);color:var(--color-error);background:#ff475733}.alphabet-grid{background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-surface2);grid-template-columns:repeat(9,1fr);gap:4px;padding:.6rem;display:grid}.letter-btn{aspect-ratio:1;background:var(--color-surface2);min-height:2.4rem;color:var(--color-white);border:2px solid #0000;border-radius:4px;font-size:1rem;font-weight:700;transition:transform .1s,background .15s,opacity .15s}.letter-btn.vowel{background:#1a2060;border-color:#2d3a80}.letter-btn.available:not(:disabled){border-color:var(--color-gold);cursor:pointer}.letter-btn.vowel.available:not(:disabled){border-color:var(--color-teal)}.letter-btn.available:hover:not(:disabled){background:var(--color-surface);transform:scale(1.1)}.letter-btn.used{opacity:.25;cursor:not-allowed}.letter-btn:disabled:not(.used){opacity:.4;cursor:not-allowed}.scoreboard-section{width:100%}.scoreboard{flex-wrap:wrap;gap:.5rem;display:flex}.team-card{background:var(--color-surface);border:2px solid var(--color-surface2);border-radius:var(--radius);flex:1;min-width:140px;padding:.6rem .8rem;transition:border-color .2s,background .2s;position:relative}.team-card.active{border-color:var(--color-teal);background:#00c9b114}.active-indicator{color:var(--color-teal);font-size:.8rem;position:absolute;top:.4rem;right:.5rem}.team-name{color:var(--color-white);margin-bottom:.3rem;font-size:.95rem;font-weight:700}.team-scores{gap:.75rem;display:flex}.score-item{flex-direction:column;align-items:center;display:flex}.score-label{color:var(--color-gray);text-transform:uppercase;letter-spacing:1px;font-size:.65rem}.score-value{font-weight:900}.score-value.round{color:var(--color-teal);font-size:1.1rem}.score-value.total{color:var(--color-gold);font-size:1.2rem}.dialog-overlay{z-index:500;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.dialog-box{background:var(--color-surface);border:2px solid var(--color-gold);width:100%;max-width:480px;box-shadow:var(--shadow);border-radius:12px;padding:1.5rem}.dialog-title{color:var(--color-gold);margin-bottom:1rem;font-size:1.3rem;font-weight:900}.dialog-message{color:var(--color-white);margin-bottom:1.5rem;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:.75rem;margin-top:1rem;display:flex}.solve-dialog{max-width:520px}.solve-input{background:var(--color-bg);border:2px solid var(--color-gold);border-radius:var(--radius);width:100%;color:var(--color-white);margin-bottom:.75rem;padding:.75rem 1rem;font-size:1.2rem;font-weight:600}.solve-input:focus{border-color:var(--color-teal);outline:none}.result-dialog{text-align:center;max-width:520px}.result-confetti{margin-bottom:.5rem;font-size:3rem}.result-title{font-size:1.6rem}.result-phrase{color:var(--color-teal);background:var(--color-surface2);border-radius:var(--radius);letter-spacing:1px;margin:.75rem 0;padding:.6rem 1rem;font-size:1.2rem;font-weight:700}.result-scores{justify-content:center;gap:2rem;margin-bottom:1rem;display:flex}.result-score-item{flex-direction:column;align-items:center;display:flex}.result-score-label{color:var(--color-gray);text-transform:uppercase;font-size:.75rem}.result-score-value{font-size:1.6rem;font-weight:900}.result-score-value.gold{color:var(--color-gold)}.result-score-value.teal{color:var(--color-teal)}.setup-overlay{align-items:flex-start;padding:1rem;overflow-y:auto}.setup-dialog{flex-direction:column;width:100%;max-width:680px;max-height:90vh;margin:auto;display:flex;overflow-y:auto}.setup-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.setup-tabs{border-bottom:1px solid var(--color-surface2);flex-wrap:wrap;gap:.25rem;margin-bottom:.75rem;display:flex}.setup-tab{color:var(--color-gray);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;padding:.5rem .75rem;font-weight:600;transition:color .15s,border-color .15s}.setup-tab.active{color:var(--color-gold);border-bottom-color:var(--color-gold)}.setup-tab:hover:not(.active){color:var(--color-white)}.setup-error{border:1px solid var(--color-error);color:var(--color-error);border-radius:var(--radius);background:#ff475726;margin-bottom:.5rem;padding:.5rem .75rem;font-size:.9rem}.setup-content{flex:1;overflow-y:auto}.setup-footer{border-top:1px solid var(--color-surface2);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.5rem;padding-top:.75rem;display:flex}.setup-io,.setup-actions{gap:.5rem;display:flex}.tab-content{flex-direction:column;gap:.75rem;display:flex}.tab-hint{color:var(--color-gray);font-size:.85rem}.team-row{align-items:center;gap:.5rem;display:flex}.team-num{color:var(--color-gray);min-width:1.5rem;font-weight:700}.team-name-input{flex:1}.puzzle-toolbar{flex-wrap:wrap;gap:.5rem;display:flex}.puzzle-list{flex-direction:column;gap:.4rem;max-height:280px;display:flex;overflow-y:auto}.puzzle-row{background:var(--color-surface2);border-radius:var(--radius);align-items:center;gap:.5rem;padding:.4rem .6rem;display:flex}.puzzle-meta{flex-direction:column;flex:1;gap:.1rem;display:flex;overflow:hidden}.puzzle-cat{color:var(--color-gold);text-transform:uppercase;letter-spacing:1px;font-size:.7rem}.puzzle-phrase{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.puzzle-prize-tag{color:var(--color-teal);font-size:.7rem}.puzzle-actions{flex-shrink:0;gap:.25rem;display:flex}.empty-hint{color:var(--color-gray);text-align:center;padding:1rem;font-size:.85rem}.bulk-import{border-top:1px solid var(--color-surface2);flex-direction:column;gap:.4rem;padding-top:.5rem;display:flex}.textarea{resize:vertical;background:var(--color-bg);border:1px solid var(--color-surface2);min-height:100px;color:var(--color-white);border-radius:var(--radius);padding:.5rem;font-family:monospace;font-size:.85rem}.wheel-toolbar{gap:.5rem;display:flex}.space-list{flex-direction:column;gap:.4rem;max-height:300px;display:flex;overflow-y:auto}.space-row{align-items:center;gap:.4rem;display:flex}.color-picker{cursor:pointer;border:none;border-radius:4px;width:2rem;height:2rem;padding:0}.space-label-input{flex:2}.space-value-input{flex:1;min-width:60px}.space-actions{gap:.25rem;display:flex}.rule-row{border-bottom:1px solid var(--color-surface2);justify-content:space-between;align-items:center;gap:1rem;padding:.4rem 0;display:flex}.rule-input{text-align:center;width:80px}.puzzle-editor{flex-direction:column;gap:.75rem;display:flex}.editor-title{color:var(--color-gold);font-size:1rem;font-weight:700}.field-row{flex-direction:column;gap:.25rem;display:flex}.editor-actions{justify-content:flex-end;gap:.5rem;display:flex}.input{background:var(--color-bg);border:1px solid var(--color-surface2);border-radius:var(--radius);color:var(--color-white);width:100%;padding:.4rem .6rem;font-size:.9rem}.input:focus{border-color:var(--color-gold);outline:none}.label{color:var(--color-gray);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:600}.toast-container{z-index:1000;flex-direction:column;gap:.5rem;max-width:360px;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.toast{border-radius:var(--radius);box-shadow:var(--shadow);justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 1rem;font-size:.9rem;font-weight:600;animation:.3s toast-in;display:flex}.toast-info{background:var(--color-surface2);border-left:4px solid var(--color-teal)}.toast-success{border-left:4px solid var(--color-success);background:#2ed57326}.toast-error{border-left:4px solid var(--color-error);background:#ff475726}.toast-warning{border-left:4px solid var(--color-warning);background:#ffa50226}.toast-close{color:var(--color-gray);cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 .2rem;font-size:1.2rem;line-height:1}@keyframes toast-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.game-over-screen{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100vh;padding:3rem 1rem;display:flex}.game-over-title{color:var(--color-gold);font-size:2.5rem;font-weight:900}.final-scores{flex-direction:column;gap:.75rem;width:100%;max-width:400px;display:flex}.final-team{background:var(--color-surface);border:2px solid var(--color-surface2);border-radius:var(--radius);align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.final-team.winner{border-color:var(--color-gold);background:#f5c51814}.final-rank{font-size:1.5rem}.final-name{flex:1;font-weight:700}.final-score{color:var(--color-gold);font-size:1.4rem;font-weight:900}@media (width>=1024px){.game-middle{flex-direction:row}.wheel-section{min-width:380px;max-width:520px}.alphabet-grid{grid-template-columns:repeat(13,1fr)}}@media (width<=768px){.game-middle{flex-direction:column}.wheel-section{width:100%;max-width:320px;margin:0 auto}.wheel-container{max-width:320px}.alphabet-grid{grid-template-columns:repeat(7,1fr)}.scoreboard{flex-wrap:wrap}.team-card{flex:none;min-width:calc(50% - .25rem)}.app-name{font-size:1.1rem}.controls-row{gap:.35rem}}@media (width<=480px){.alphabet-grid{grid-template-columns:repeat(6,1fr);gap:3px}.letter-btn{min-height:2.2rem;font-size:.9rem}.setup-dialog{border-radius:8px;margin:0}.setup-overlay{align-items:flex-start;padding:0}}.btn-online{color:var(--color-teal);letter-spacing:.5px;cursor:pointer;white-space:nowrap;background:#00c9b11f;border:1px solid #00c9b159;border-radius:1.5rem;align-items:center;gap:.35rem;padding:.35rem .85rem;font-size:.8rem;font-weight:700;transition:background .15s,border-color .15s;display:flex}.btn-online:hover{border-color:var(--color-teal);background:#00c9b138}.btn-online-active{border-color:var(--color-teal);color:#fff;background:#00c9b140}.online-bar{background:#00c9b11a;border-bottom:1px solid #00c9b140;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.4rem 1rem;font-size:.8rem;display:flex}.online-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.online-dot.connected{background:#22c55e;box-shadow:0 0 6px #22c55e}.online-dot.disconnected{background:#ef4444}.online-room-label{color:var(--color-white)}.online-room-label strong{color:var(--color-teal);letter-spacing:1px}.online-sep,.online-role,.online-players{color:var(--color-gray)}.online-btn{color:var(--color-white);cursor:pointer;background:#ffffff12;border:1px solid #ffffff26;border-radius:.75rem;padding:.2rem .6rem;font-size:.75rem;transition:background .15s}.online-btn:hover{background:#ffffff24}.online-btn-leave{color:#f87171;border-color:#f871714d;margin-left:auto}.room-modal{width:100%;max-width:420px}.room-modal-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.room-tabs{border:1px solid #ffffff1a;border-radius:.5rem;gap:0;margin-bottom:1rem;display:flex;overflow:hidden}.room-tab{color:var(--color-gray);cursor:pointer;background:0 0;border:none;flex:1;padding:.5rem;font-weight:600;transition:background .15s,color .15s}.room-tab.active{background:var(--color-teal);color:#000}.room-hint{color:var(--color-gray);margin-bottom:1rem;font-size:.85rem}.room-form{flex-direction:column;gap:.75rem;display:flex}.room-error{color:#ff6b6b;background:#ff475726;border:1px solid #ff475766;border-radius:.5rem;margin-bottom:.5rem;padding:.5rem .75rem;font-size:.85rem}.room-code-display{letter-spacing:.5rem;color:var(--color-gold);text-align:center;cursor:pointer;background:#f5c51814;border:2px dashed #f5c51866;border-radius:.75rem;padding:1rem;font-size:3rem;font-weight:900;transition:background .15s}.room-code-display:hover{background:#f5c51826}.room-code-hint{text-align:center;color:var(--color-gray);margin-top:-.5rem;font-size:.75rem}.room-link-row{justify-content:center;display:flex}.room-created{flex-direction:column;gap:.75rem;display:flex}.room-players{background:#ffffff0a;border-radius:.5rem;padding:.75rem}.room-players-label{color:var(--color-gray);margin-bottom:.5rem;font-size:.8rem}.room-player-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.room-player-item{align-items:center;gap:.5rem;font-size:.9rem;display:flex}.player-dot{background:#22c55e;border-radius:50%;flex-shrink:0;width:8px;height:8px}.room-waiting{color:var(--color-gray);font-size:.85rem;font-style:italic}.room-code-input{letter-spacing:.4rem;text-align:center;font-weight:700;font-size:1.4rem!important}.player-view-notice{text-align:center;color:var(--color-teal);letter-spacing:.5px;background:#00c9b112;border-radius:.5rem;margin-bottom:.25rem;padding:.75rem;font-size:.85rem;font-weight:600}@media (prefers-reduced-motion:reduce){.letter-tile.revealed,.toast{animation:none}*{transition-duration:.01ms!important}}