@import"https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--p1: #4361ee;--p1-light: #818cf8;--p1-bg: #eef2ff;--p1-mark: #c7d2fe;--p2: #e84393;--p2-light: #f472b6;--p2-bg: #fdf2f8;--p2-mark: #fbcfe8;--p3: #00b894;--p3-light: #34d399;--p3-bg: #ecfdf5;--p3-mark: #a7f3d0;--p4: #f39c12;--p4-light: #fbbf24;--p4-bg: #fffbeb;--p4-mark: #fde68a}body{font-family:"Noto Serif Thai",serif;background:linear-gradient(135deg,#a78bfa,#7c3aed 40%,#c084fc);min-height:100vh;overflow-x:hidden;color:#1e1b4b}.screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px}.hidden{display:none!important}.connection-banner{position:fixed;top:0;left:0;right:0;z-index:1000;background:#f59e0b;color:#000;text-align:center;padding:6px 12px;font-size:14px;font-weight:600}.lang-toggle{position:absolute;top:12px;right:12px;padding:4px 12px;border:2px solid #e5e7eb;border-radius:20px;background:#fff;font-family:inherit;font-size:.8rem;font-weight:700;color:#6b7280;cursor:pointer;transition:all .2s}.lang-toggle:hover{border-color:#a78bfa;color:#7c3aed}.bottom-controls{display:flex;gap:12px}.ctrl-btn{padding:10px 24px;border:2px solid rgba(255,255,255,.4);border-radius:12px;background:#ffffff26;color:#fff;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ctrl-btn:hover{background:#ffffff40;border-color:#fff9}.bottom-controls .lang-toggle{position:static;background:#ffffff26;color:#fff;border-color:#fff6}.bottom-controls .lang-toggle:hover{background:#ffffff40;border-color:#fff9}.version-footer{font-size:10px;color:#ffffff59;text-align:center;padding:12px 0 4px;pointer-events:none}@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes chipIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.setup-container{background:#fff;border-radius:24px;padding:40px;max-width:520px;width:100%;box-shadow:0 20px 60px #0003;text-align:center;position:relative}.setup-container h1{font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,#7c3aed,#e84393);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.subtitle{color:#6b7280;font-size:.95rem;margin-bottom:28px}.setup-section{margin-bottom:22px;text-align:left}.setup-section>label{display:block;font-weight:700;margin-bottom:8px;font-size:1rem;color:#4b5563}.btn-group{display:flex;gap:10px;flex-wrap:wrap}.btn-group button{flex:1;padding:10px;border:2px solid #e5e7eb;border-radius:12px;background:#fff;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;min-width:80px}.btn-group button:hover{border-color:#a78bfa;background:#f5f3ff}.btn-group button.active{border-color:#7c3aed;background:#ede9fe;color:#7c3aed}.name-inputs-container{display:flex;flex-direction:column;gap:10px}.name-input-row{display:flex;align-items:center;gap:10px}.name-input-row .color-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0}.name-input-row input{flex:1;padding:10px 14px;border:2px solid #e5e7eb;border-radius:12px;font-family:inherit;font-size:1rem;outline:none;transition:border-color .2s}.name-input-row input:focus{border-color:#7c3aed}.start-button{width:100%;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-family:inherit;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #7c3aed66;margin-top:10px}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed80}.start-button:active{transform:translateY(0)}.hint-toggle{display:flex;align-items:center;gap:8px;margin-top:10px}.hint-toggle input{width:18px;height:18px;accent-color:#7c3aed;cursor:pointer}.hint-toggle label{font-size:.9rem;color:#6b7280;cursor:pointer}.online-setup-section{margin-bottom:16px;text-align:left}.online-setup-section>label{display:block;font-weight:700;margin-bottom:8px;font-size:1rem;color:#4b5563}.online-setup-section input[type=text]{width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:12px;font-family:inherit;font-size:1rem;outline:none;transition:border-color .2s}.online-setup-section input[type=text]:focus{border-color:#7c3aed}.room-code-input{font-family:monospace!important;font-size:1.8rem!important;font-weight:900!important;text-align:center!important;letter-spacing:.15em!important;text-transform:uppercase}#game-screen{flex-direction:column;align-items:center;padding:16px;gap:16px}.caller-section{background:#fff;border-radius:20px;padding:20px;box-shadow:0 8px 30px #0000001f;max-width:900px;width:100%}.caller-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}.caller-current{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #7c3aed4d;flex-shrink:0}.caller-current span{font-size:2rem;font-weight:800;color:#fff;transition:all .3s}.caller-current.pop span{animation:popIn .4s ease-out}.caller-current.has-char{background:linear-gradient(135deg,#059669,#34d399);box-shadow:0 4px 20px #0596694d}.caller-info-col{display:flex;flex-direction:column;gap:4px;align-items:center}.caller-info{font-size:.85rem;color:#9ca3af;font-weight:600}.voice-panel{display:flex;flex-direction:column;align-items:center;gap:12px}.randomize-button{width:72px;height:72px;border-radius:50%;border:none;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:2rem;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #7c3aed59;display:flex;align-items:center;justify-content:center}.randomize-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #7c3aed73}.randomize-button:active{transform:scale(.97)}.randomize-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.replay-button{padding:10px 20px;border:none;border-radius:12px;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #f59e0b4d;animation:popIn .3s ease-out}.replay-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f59e0b66}.replay-button:active{transform:translateY(0)}.player-replay-button{display:block;margin:0 auto 8px;padding:8px 18px;font-size:.85rem;border-radius:10px}.reveal-button{padding:10px 28px;border:none;border-radius:12px;background:linear-gradient(135deg,#059669,#34d399);color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #0596694d;animation:popIn .3s ease-out}.reveal-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #05966966}.reveal-button:active{transform:translateY(0)}.voice-status{font-size:.9rem;font-weight:600;min-height:1.4em;text-align:center;color:#6b7280;transition:color .2s}.voice-status.error{color:#ef4444}.voice-status.success{color:#059669}.called-history-section{border-top:1px solid #f3f4f6;padding-top:10px}.called-history{display:flex;flex-wrap:wrap;gap:6px;max-height:80px;overflow-y:auto}.called-chip{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:8px;font-size:.85rem;font-weight:600;background:#f3f4f6;color:#6b7280;animation:chipIn .3s ease-out}.called-chip.consonant{background:#ede9fe;color:#6d28d9}.called-chip.vowel{background:#fce7f3;color:#be185d}.boards-container{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1200px;width:100%}.board-card{background:#fff;border-radius:16px;padding:12px;box-shadow:0 6px 24px #0000001a;flex:0 1 auto;min-width:260px}.players-2 .board-card{width:calc(50% - 8px);max-width:380px}.players-3 .board-card{width:calc(33.33% - 12px);max-width:320px}.players-4 .board-card{width:calc(50% - 8px);max-width:320px}.board-header{text-align:center;padding:8px;border-radius:10px;margin-bottom:10px;font-weight:700;font-size:1rem;color:#fff}.board-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;container-type:inline-size}.cell{aspect-ratio:1;border-radius:8px;border:2px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:min(1.15rem,4.5cqi);font-weight:700;cursor:pointer;transition:all .15s;position:relative;background:#fff;user-select:none;-webkit-user-select:none;line-height:1.1;white-space:nowrap;overflow:hidden}.cell:hover:not(.marked):not(.free){transform:scale(1.05);border-color:#a78bfa}.cell.free{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:#f59e0b;cursor:default;font-size:1.3rem}.cell.marked{border-color:transparent;transform:scale(1);cursor:default}.cell.marked:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;border:3px solid rgba(255,255,255,.6);pointer-events:none}.cell.mark-anim{animation:markPop .35s ease-out}@keyframes markPop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}.cell.hint-pulse{animation:hintPulse 1.5s ease-in-out infinite}@keyframes hintPulse{0%,to{box-shadow:0 0 #7c3aed00}50%{box-shadow:0 0 0 5px #7c3aed40}}.cell.win-glow{animation:winGlow .8s ease-in-out infinite alternate;z-index:2}@keyframes winGlow{0%{box-shadow:0 0 8px 2px #facc1566}to{box-shadow:0 0 16px 6px #facc15cc}}.cell.selected{border-color:#a78bfa;background:#ede9fe;box-shadow:0 0 0 2px #7c3aed4d}.cell.wrong{animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.p0 .board-header{background:linear-gradient(135deg,var(--p1),var(--p1-light))}.p0 .cell.marked{background:var(--p1-mark);color:var(--p1);border-color:var(--p1-light)}.p1 .board-header{background:linear-gradient(135deg,var(--p2),var(--p2-light))}.p1 .cell.marked{background:var(--p2-mark);color:var(--p2);border-color:var(--p2-light)}.p2 .board-header{background:linear-gradient(135deg,var(--p3),var(--p3-light))}.p2 .cell.marked{background:var(--p3-mark);color:var(--p3);border-color:var(--p3-light)}.p3 .board-header{background:linear-gradient(135deg,var(--p4),var(--p4-light))}.p3 .cell.marked{background:var(--p4-mark);color:var(--p4);border-color:var(--p4-light)}.boards-container.online-player{flex-direction:column;align-items:center}.boards-container.online-player .board-card.primary{width:100%;max-width:420px}.boards-container.online-player .board-card.secondary{width:calc(33.33% - 12px);max-width:200px;min-width:160px}.boards-container.online-player .board-card.secondary .cell{font-size:min(.8rem,4.5cqi);cursor:default}.boards-container.online-player .board-card.secondary .cell:hover{transform:none;border-color:#e5e7eb}.secondary-boards-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.room-code-display{font-family:monospace;font-size:3rem;font-weight:900;letter-spacing:.3em;text-align:center;background:linear-gradient(135deg,#7c3aed,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:16px 0 8px}.lobby-container{background:#fff;border-radius:24px;padding:40px;max-width:520px;width:100%;box-shadow:0 20px 60px #0003;text-align:center}.lobby-container h2{font-size:1.5rem;font-weight:800;color:#4b5563;margin-bottom:4px}.lobby-subtitle{color:#9ca3af;font-size:.9rem;margin-bottom:16px}.share-link-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:20px}.share-link-row input{flex:1;max-width:320px;padding:8px 12px;border:2px solid #e5e7eb;border-radius:10px;font-family:monospace;font-size:.85rem;color:#6b7280;text-align:center;outline:none}.copy-btn{padding:8px 14px;border:2px solid #e5e7eb;border-radius:10px;background:#fff;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;color:#6b7280}.copy-btn:hover{border-color:#a78bfa;color:#7c3aed}.copy-btn.copied{border-color:#059669;color:#059669}.player-list{text-align:left;margin:16px 0;min-height:40px}.moderator-play-toggle{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px;border-radius:14px;border:2px solid #e5e7eb;background:#fff;margin:16px 0;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.moderator-play-toggle:hover{border-color:#a78bfa;background:#f5f3ff}.moderator-play-toggle.active{border-color:#7c3aed;background:#ede9fe}.moderator-play-toggle input[type=checkbox]{width:22px;height:22px;accent-color:#7c3aed;cursor:pointer}.moderator-play-toggle label{font-size:1.05rem;font-weight:700;color:#4b5563;cursor:pointer;margin:0}.moderator-play-toggle.active label{color:#7c3aed}.player-list-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;animation:chipIn .3s ease-out;margin-bottom:4px}.player-list-item .color-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.player-list-item .player-name{font-weight:600;font-size:.95rem}.player-list-item .you-badge{font-size:.75rem;font-weight:700;color:#7c3aed;background:#ede9fe;padding:2px 8px;border-radius:8px}.player-list-item .connection-dot{width:8px;height:8px;border-radius:50%;margin-left:auto}.connection-dot.online{background:#22c55e}.connection-dot.offline{background:#d1d5db}.status-banner{background:#fff;border-radius:14px;padding:12px 20px;box-shadow:0 4px 16px #00000014;max-width:900px;width:100%;text-align:center;font-weight:700;font-size:1rem;color:#6b7280}.status-banner.pending{color:#f59e0b}.status-banner.selecting{color:#7c3aed}.status-banner.revealed{color:#059669}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.win-overlay canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.win-content{background:#fff;border-radius:24px;padding:40px 50px;text-align:center;z-index:1001;box-shadow:0 20px 60px #0000004d;animation:popIn .5s ease-out}.win-content h2{font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,#f59e0b,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.win-content .winner-name{font-size:1.5rem;font-weight:700;margin:12px 0 24px;color:#4b5563}.win-buttons{display:flex;gap:12px;justify-content:center}.win-buttons button{padding:12px 28px;border:none;border-radius:12px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s}.win-buttons button:first-child{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 4px 12px #7c3aed4d}.win-buttons button:last-child{background:#f3f4f6;color:#4b5563}.win-buttons button:hover{transform:translateY(-2px)}.ready-button{width:100%;max-width:420px;padding:10px 24px;border:2px solid rgba(255,255,255,.4);border-radius:12px;background:#ffffff26;color:#fff;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ready-button:hover{background:#ffffff40;border-color:#fff9}.ready-button.active{background:#10b9814d;border-color:#10b98199;color:#fff}.ready-button.active:hover{background:#10b98166}.ready-badge{display:inline-block;font-size:.7rem;margin-left:6px;background:#7c3aed;color:#fff;padding:1px 6px;border-radius:6px;vertical-align:middle;font-weight:700}.board-card.player-ready{box-shadow:0 0 0 2px #7c3aed,0 6px 24px #7c3aed33}@keyframes readyPulse{0%,to{box-shadow:0 0 4px #7c3aed4d}50%{box-shadow:0 0 14px #7c3aedb3}}.ready-info{font-size:.85rem;font-weight:700;color:#7c3aed;text-align:center;padding:4px 0;border-radius:8px;transition:all .3s ease}.ready-info.all-ready{font-size:1.05rem;color:#fff;background:#7c3aed;padding:6px 12px;animation:readyPulse 1.2s ease-in-out infinite}@media(max-width:900px){.players-3 .board-card{width:calc(50% - 8px)}.cell{font-size:min(1rem,4.5cqi)}}@media(max-width:600px){.setup-container{padding:24px}.setup-container h1{font-size:1.6rem}.board-card{min-width:220px}.players-2 .board-card,.players-3 .board-card,.players-4 .board-card{width:100%;max-width:360px}.cell{font-size:min(1.1rem,4.5cqi);border-radius:6px}.boards-container.online-player .board-card.primary .cell{font-size:min(1.4rem,4.5cqi)}.caller-current{width:72px;height:72px}.caller-current span{font-size:1.6rem}.randomize-button{width:60px;height:60px;font-size:1.6rem}}