:root{font-family:Noto Sans Tamil,Latha,Vijaya,Nirmala UI,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#1e1b16;background-color:#f4efe5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(255,255,255,.75),transparent 55%),radial-gradient(circle at 20% 20%,rgba(198,156,47,.12),transparent 45%),radial-gradient(circle at bottom right,rgba(47,143,83,.12),transparent 55%),#f4efe5}a{color:inherit;text-decoration:none}:root{--bg: #f4efe5;--ink: #1e1b16;--muted: #7b6f61;--tile: #f9f6f0;--tile-border: #d3c6b8;--correct: #2f8f53;--present: #c69c2f;--absent: #5a5f69;--shadow: rgba(30, 27, 22, .15);--panel: rgba(255, 255, 255, .72)}#root{min-height:100vh;color:var(--ink)}.app{max-width:1100px;margin:0 auto;display:grid}.title{text-align:center;display:grid;gap:.35rem}.title h1{margin:0;font-size:clamp(2rem,4vw,3rem);letter-spacing:.02em}.title p{margin:0;color:var(--muted);font-size:1rem}.layout{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(280px,.9fr);gap:1rem;align-items:start}.layout.live-session-layout{grid-template-columns:minmax(0,1fr)}.top-controls{grid-column:1 / -1}.top-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:.6rem;align-items:center}.game-type-select-wrap{min-width:0}.game-type-select{width:100%;border:1px solid var(--tile-border);border-radius:999px;padding:.5rem .9rem;background:#fff;color:var(--ink);font-size:.9rem;font-weight:600}.live-button{border:none;border-radius:999px;min-width:4.5rem;height:2.2rem;padding:0 .95rem;font-size:.88rem;font-weight:700;color:#1e1b16;background:#f6cf4d;cursor:pointer;transition:transform .2s ease,background .2s ease}.live-button:hover{transform:translateY(-1px);background:#f3c231}.help-button{border:none;border-radius:50%;width:2.2rem;height:2.2rem;padding:0;display:grid;place-items:center;font-size:1.1rem;font-weight:600;color:#1e1b16;background:#f2a6ff;cursor:pointer;transition:transform .2s ease,background .2s ease}.help-button:hover{transform:translateY(-1px);background:#e08df7}.category-picker-button{border:none;border-radius:.75rem;width:2.2rem;height:2.2rem;padding:0;display:grid;place-items:center;background:#efe6d7;cursor:pointer;transition:transform .2s ease,background .2s ease}.category-picker-button:hover{transform:translateY(-1px);background:#e6dac7}.category-picker-button img{width:1.2rem;height:1.2rem;object-fit:contain}.category-summary{margin:.35rem 0 0;font-size:.85rem;color:var(--muted)}.multiplayer-panel{margin-top:.65rem;padding:.75rem;border:1px solid var(--tile-border);border-radius:.85rem;background:#fffaf0;display:grid;gap:.6rem}.multiplayer-panel h3{margin:0;font-size:.95rem;color:var(--ink)}.live-modal{width:min(620px,100%)}.live-modal-body{display:grid;gap:.8rem}.live-modal-section{border:1px solid var(--tile-border);border-radius:.85rem;padding:.75rem;background:#fff;display:grid;gap:.6rem}.live-modal-section h3{margin:0;font-size:.95rem;color:var(--ink)}.multiplayer-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.live-refresh-button{border:none;border-radius:999px;padding:.35rem .7rem;font-size:.78rem;font-weight:600;color:#1e1b16;background:#efe6d7;cursor:pointer}.live-refresh-button:disabled{opacity:.7;cursor:not-allowed}.multiplayer-mode-note{margin:-.2rem 0 0;font-size:.78rem;color:var(--muted)}.host-controls{display:grid;gap:.45rem}.host-length-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}.host-word-input{width:100%;border:1px solid var(--tile-border);border-radius:.7rem;padding:.52rem .72rem;background:#fff;color:var(--ink);font-size:.92rem}.host-start-button{border:none;border-radius:999px;padding:.58rem .82rem;font-size:.88rem;font-weight:600;color:#fff;background:#2f8f53;cursor:pointer}.host-games-toggle-button{border:1px solid var(--tile-border);border-radius:999px;padding:.5rem .82rem;font-size:.82rem;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}.host-games-list{display:grid;gap:.45rem}.host-game-item{border:1px solid var(--tile-border);border-radius:.7rem;background:#fffbf3;padding:.5rem .58rem;display:grid;gap:.3rem}.host-game-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;font-size:.76rem;color:var(--ink)}.active-game-banner{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border:1px solid #c8decf;background:#edf8f1;border-radius:.7rem;padding:.45rem .6rem;font-size:.82rem}.active-game-banner button{border:none;border-radius:999px;padding:.35rem .72rem;background:#1e1b16;color:#fff;font-size:.78rem;cursor:pointer}.live-games-list{display:grid;gap:.4rem}.live-games-empty{margin:0;font-size:.84rem;color:var(--muted)}.live-game-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;border:1px solid var(--tile-border);border-radius:.7rem;padding:.45rem .55rem;background:#fff}.live-game-meta{display:grid;gap:.15rem;font-size:.82rem}.game-id{font-weight:700;letter-spacing:.04em}.join-game-button{border:none;border-radius:999px;padding:.4rem .72rem;background:#f6cf4d;color:#1e1b16;font-size:.8rem;font-weight:700;cursor:pointer}.join-game-button:disabled{opacity:.65;cursor:not-allowed}.nickname-button{border:none;border-radius:50%;width:2.2rem;height:2.2rem;padding:0;display:grid;place-items:center;font-size:.78rem;font-weight:600;line-height:1;color:#fff;background:#0b3d91;cursor:pointer;transition:transform .2s ease,background .2s ease}.nickname-button:hover{transform:translateY(-1px);background:#082d6b}.board{display:grid;gap:.6rem;padding:1.25rem;background:var(--panel);border-radius:1.25rem;box-shadow:0 20px 45px var(--shadow)}.live-board{align-content:start;height:auto;overflow:visible;gap:.8rem}.live-host-row{margin-top:.2rem;border:none;background:transparent;padding:0;width:100%;cursor:pointer}.live-host-row.length-4{grid-template-columns:repeat(4,minmax(0,1fr))}.live-board .row{height:auto}.live-board .tile{height:auto;aspect-ratio:1 / 1}.row{display:grid;grid-template-columns:repeat(5,minmax(39px,1fr));gap:.6rem}.board.length-4 .row{grid-template-columns:repeat(4,minmax(0,1fr))}.board.length-4 .tile{aspect-ratio:auto;height:auto}.tile{aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,3vw,2rem);font-weight:600;background:var(--tile);border-radius:12px;border:2px solid var(--tile-border);color:var(--ink);transition:transform .2s ease,background .2s ease,border-color .2s ease}.tile.filled{transform:translateY(-2px);border-color:var(--muted)}.tile.correct{background:var(--correct);border-color:var(--correct);color:#fffaf0}.tile.present{background:var(--present);border-color:var(--present);color:#fffaf0}.tile.half-correct{background:linear-gradient(135deg,var(--correct) 50%,var(--tile) 50%);border-color:var(--correct);color:var(--ink)}.tile.half-present{background:linear-gradient(135deg,var(--present) 50%,var(--tile) 50%);border-color:var(--present);color:var(--ink)}.tile.absent{background:var(--absent);border-color:var(--absent);color:#f4f4f4}.tile.vowel-correct{outline:2px solid var(--correct);outline-offset:-4px}.tile.vowel-wrong{outline:2px solid #d64545;outline-offset:-4px}.input-panel{display:grid;gap:.6rem}.input-panel button{font-weight:400}.panel{background:var(--panel);border-radius:1.25rem;box-shadow:0 18px 40px var(--shadow);overflow:hidden}.panel>summary,.panel-header{padding:1rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.panel-header{border-bottom:1px solid var(--tile-border)}.panel>summary{cursor:pointer}.panel>summary::-webkit-details-marker{display:none}.panel>summary:after{content:"v";font-size:.9rem;color:var(--muted);transition:transform .2s ease}.panel[open]>summary:after{transform:rotate(180deg)}.panel[open]>summary{border-bottom:1px solid var(--tile-border)}.panel-title h2,.panel-header h2{margin:0;font-size:1.1rem;color:var(--ink)}.input-toggle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.4rem}.toggle-button{border:none;border-radius:999px;padding:calc(.45rem + .5pt) calc(.95rem + .5pt);font-size:calc(.78rem + 1pt);font-weight:600;color:#1e1b16;background:#f6cf4d;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.toggle-button.toggle-mic{width:2.2rem;height:2.2rem;padding:0;border-radius:.65rem;display:grid;place-items:center}.toggle-button.active{background:#f3c231;color:#1e1b16}.toggle-button:hover{transform:translateY(-1px)}.toggle-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.toggle-button.toggle-mic{background:#dbeeff;color:#1e1b16}.toggle-button.toggle-mic.active{background:#c4e2ff}.mic-icon{width:1.25rem;height:1.25rem;fill:currentColor;stroke:currentColor}.toggle-button.toggle-mic.disabled{background:#c9c9cf;color:#5a5f69}.back-button{border:none;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;color:#1e1b16;background:#f6cf4d;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.back-button:hover{transform:translateY(-1px)}.back-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.panel-content{padding:.6rem 1rem 1rem;display:grid;gap:.75rem}.helper{margin:0;font-size:.9rem;color:var(--muted)}.speech-note{margin:.35rem 0 0;font-size:.85rem;color:var(--muted)}.key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:.55rem}.key-grid.consonants{grid-template-columns:repeat(auto-fit,minmax(46px,1fr))}.keyboard-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:stretch}.keyboard-main{display:grid;gap:.6rem}.vowel-layout,.consonant-layout,.syllable-layout,.syllable-row{display:grid;gap:.55rem}.syllable-row-5{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}.syllable-row-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center}.syllable-row-bottom .toggle-button.mode-switch-vowel-icon{justify-self:start}.syllable-row-bottom .toggle-button.toggle-mic{width:100%;height:100%;border-radius:12px}.syllable-layout .key{font-size:.95rem;font-weight:500;line-height:1.1}.syllable-enter{justify-self:end;width:52px;height:52px}.vowel-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}.consonant-row{display:grid;gap:.55rem}.consonant-row-6{grid-template-columns:repeat(6,minmax(0,1fr))}.consonant-row-5{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}.consonant-row-5 .mode-switch-vowel-left{min-width:0;width:100%;justify-self:stretch;padding:.32rem .2rem;font-size:.62rem}.consonant-row-5 .toggle-button.toggle-mic{width:100%;height:100%;border-radius:12px}.vowel-spacer{visibility:hidden}.vowel-row-fourth{align-items:center}.vowel-center-slot{display:grid;place-items:center;grid-column:3}.key-enter-inline{grid-column:5;justify-self:stretch;display:grid;place-items:center}.key-icon-action img{width:95%;height:95%;object-fit:contain}.key-icon-action[aria-label=Delete]{display:grid;place-items:center;padding:0}.key-icon-action[aria-label=Delete] img{width:95%;height:95%}.delete-action{width:52px;height:52px;justify-self:stretch}.grantha-toggle{border-radius:12px;padding:.35rem .25rem;background:#1e1b16;color:#fffaf0}.grantha-toggle img{width:95%;height:95%;object-fit:contain}.mode-switch-vowel-icon{grid-column:1;min-width:3.8rem;height:2.35rem;border-radius:8px;padding:.25rem .4rem;display:grid;place-items:center;font-size:.78rem;font-weight:400;line-height:1;letter-spacing:.01em;justify-self:start}.mode-switch-consonants{font-size:.95rem;font-weight:400;line-height:.95;letter-spacing:.01em;white-space:normal;min-width:3.8rem;width:3.8rem}.input-panel .key,.input-panel .toggle-button{min-height:52px;height:52px;font-weight:400}.input-panel .panel-title h2,.input-panel .panel-header h2{font-weight:400}.keyboard-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.mode-switch{min-width:7.5rem}.keyboard-side-actions{display:grid;grid-template-rows:1fr 1fr;gap:.55rem;width:52px}.key-side-action{width:100%;min-width:0;min-height:0;padding:.35rem .25rem;font-size:.82rem;display:grid;place-items:center}.key-enter-side img{width:1.35rem;height:1.35rem;object-fit:contain}.key{border:none;border-radius:12px;padding:.35rem .25rem;font-size:calc(1.1rem + .5pt);font-weight:600;color:var(--ink);background:#fff;cursor:pointer;box-shadow:0 8px 18px #1e1b1614;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.key-placeholder{visibility:hidden;pointer-events:none;box-shadow:none}.key:hover{transform:translateY(-2px);box-shadow:0 12px 22px #1e1b1626}.key.active{background:#1e1b16;color:#fffaf0}.key.correct{background:var(--correct);color:#fffaf0}.key.present{background:var(--present);color:#fffaf0}.key.absent{background:var(--absent);color:#f4f4f4}.empty-state{padding:.6rem;text-align:center;border:1px dashed var(--tile-border);border-radius:12px;color:var(--muted);font-size:.95rem}.controls{display:grid;gap:.75rem}.length-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.length-button{border:none;border-radius:999px;padding:.5rem .75rem;font-size:.9rem;font-weight:600;color:#1e1b16;background:#f6cf4d;cursor:pointer;transition:transform .2s ease,background .2s ease}.length-button.active{background:#f3c231}.length-button:hover{transform:translateY(-1px)}.length-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}.buttons button{border:none;border-radius:999px;padding:.7rem 1rem;font-size:.95rem;font-weight:600;color:#fff;background:#1e1b16;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 20px #1e1b1633}.buttons .action-enter{background:#2f8f53}.buttons .action-delete,.buttons .action-clear{background:#fff;color:#1e1b16}.buttons button:hover{transform:translateY(-2px)}.buttons button:disabled{opacity:.6;cursor:not-allowed;transform:none}.status{min-height:1.5rem;text-align:center;color:var(--muted);font-weight:600}.status.win{color:var(--correct)}.modal-backdrop{position:fixed;inset:0;background:#1e1b1659;display:grid;place-items:center;padding:1.5rem;z-index:50}.modal{width:min(520px,100%);background:#fffaf0;border-radius:1.25rem;box-shadow:0 24px 50px #1e1b1640;padding:1.25rem;display:grid;gap:.75rem}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.modal-header h2{margin:0;font-size:1.25rem}.modal-close{border:none;background:#f6cf4d;color:#1e1b16;width:2rem;height:2rem;border-radius:999px;font-size:1.25rem;line-height:1;cursor:pointer}.help-lang-toggle{border:none;background:#efe6d7;color:#1e1b16;min-width:3.2rem;height:2rem;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer}.modal-text{margin:0;color:var(--ink);font-size:.95rem}.result-ok-button{border:none;border-radius:.7rem;padding:.55rem .95rem;justify-self:end;background:#f6cf4d;color:#1e1b16;font-size:.9rem;font-weight:600;cursor:pointer}.category-list{display:grid;gap:.5rem}.category-option{border:1px solid var(--tile-border);border-radius:.75rem;padding:.6rem .8rem;text-align:left;font-size:.92rem;font-weight:600;color:var(--ink);background:#fff;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}.category-option:hover{transform:translateY(-1px);background:#f7f2e8}.category-option.active{border-color:#f3c231;background:#fff3cc}.rule-list{display:grid;gap:.5rem}.rule-item{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;font-size:.9rem;color:var(--ink)}.mini-tile{width:1.5rem;height:1.5rem;border-radius:6px;border:2px solid var(--tile-border);display:inline-block}.mini-tile.correct{background:var(--correct);border-color:var(--correct)}.mini-tile.present{background:var(--present);border-color:var(--present)}.mini-tile.half-correct{background:linear-gradient(135deg,var(--correct) 50%,var(--tile) 50%);border-color:var(--correct)}.mini-tile.half-present{background:linear-gradient(135deg,var(--present) 50%,var(--tile) 50%);border-color:var(--present)}.mini-tile.absent{background:var(--absent);border-color:var(--absent)}.mini-tile.vowel-correct{outline:2px solid var(--correct);outline-offset:-3px}.mini-tile.vowel-wrong{outline:2px solid #d64545;outline-offset:-3px}.note{margin:0;text-align:center;font-size:.9rem;color:var(--muted)}.note code{font-family:Courier New,Courier,monospace;color:var(--ink)}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:520px){.keyboard-layout{grid-template-columns:minmax(0,1fr) auto}.mode-switch{min-width:6.2rem}.key-side-action{font-size:.75rem}}@media(max-width:520px){#root{padding:1.5rem 1rem 1rem}.layout{grid-template-rows:auto auto;min-height:0;align-content:start;gap:.5rem}.board{height:48dvh;padding:0;gap:0;max-height:none;overflow:visible}.board.live-board{height:auto;padding:.75rem;gap:.75rem;overflow:visible}.row{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;height:8dvh}.live-board .row{gap:.45rem;height:auto}.tile{--tile-pad: .12rem;font-size:clamp(1.35rem,2.8vw,1.8rem);aspect-ratio:auto;height:100%;padding:var(--tile-pad);box-sizing:border-box;background-clip:content-box;border:0;box-shadow:inset 0 0 0 2px var(--tile-border)}.live-board .tile{aspect-ratio:1 / 1;height:auto}.input-panel{gap:.45rem}.panel{height:100%}.panel-content{overflow-y:auto}}