: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}.top-controls{grid-column:1 / -1}.top-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:center}.help-button{border:none;border-radius:999px;padding:.55rem .9rem;font-size:.85rem;font-weight:600;color:#1e1b16;background:#f2a6ff;cursor:pointer;transition:transform .2s ease,background .2s ease}.help-button:hover{transform:translateY(-1px);background:#e08df7}.board{display:grid;gap:.6rem;padding:1.25rem;background:var(--panel);border-radius:1.25rem;box-shadow:0 20px 45px var(--shadow)}.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}.input-panel{display:grid;gap:.6rem}.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))}.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: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}.modal-text{margin:0;color:var(--ink);font-size:.95rem}.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)}.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){#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}.row{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;height:8dvh}.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)}.input-panel{gap:.45rem}.panel{height:100%}.panel-content{overflow-y:auto}}