*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a3328;--bg-card: #1f3d30;--bg-card-2: #254838;--border: #2e5a44;--border-light: #3a7058;--text: #e8f5ee;--text-muted: #8ab8a0;--accent: #f5c842;--accent-dim: #c8a020;--red: #e05252;--green-hi: #52c28a;--cell-empty: #1f3d30;--cell-hover: #2e5a44;--cell-hit: #2a4a3a;--radius: 6px;--radius-lg: 10px}html{height:100%}body{height:100%;display:flex;flex-direction:column;overflow:hidden;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}.site-header{flex-shrink:0;height:60px;display:flex;align-items:center;justify-content:flex-start;padding:0 24px;background:var(--bg-card);border-bottom:1px solid var(--border)}.header-logo{display:flex;gap:4px;text-decoration:none;cursor:pointer}.header-logo span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border:2px solid var(--accent);border-radius:4px;color:var(--accent);font-size:18px;font-weight:700;letter-spacing:0}.header-logo .gap{width:10px;border:none;background:none}.screen{display:none}.screen.active{display:flex;flex:1;min-height:0;overflow:hidden;align-items:center;justify-content:center}#screen-setup.active,#screen-game.active{align-items:flex-start;justify-content:flex-start;overflow:hidden}#screen-game.active{overflow:hidden;align-items:flex-start;justify-content:flex-start}.btn{padding:10px 20px;border:none;border-radius:var(--radius);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;white-space:nowrap}.btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--accent);color:#1a2e1e}.btn-secondary{background:var(--border-light);color:var(--text)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){background:var(--bg-card-2);opacity:1}.btn-small{padding:6px 12px;font-size:12px}input[type=text]{background:var(--bg-card-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:14px;padding:10px 14px;outline:none;transition:border-color .15s}input[type=text]:focus{border-color:var(--border-light)}input[type=text]::placeholder{color:var(--text-muted)}.error-msg{color:var(--red);font-size:13px;min-height:18px;margin-top:6px}.home-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}.title-logo{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.title-word{display:flex;gap:4px}.title-word span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:2px solid var(--accent);border-radius:4px;color:var(--accent);font-size:24px;font-weight:700}.subtitle{color:var(--text-muted);font-size:13px;margin-top:-8px}.home-card input[type=text]{width:100%;text-align:center}.home-actions{width:100%;display:flex;flex-direction:column;gap:12px}.home-actions .btn-primary{width:100%}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:3px;text-align:center}.lobby-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}.room-code-block{background:var(--bg-card-2);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:20px 28px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;cursor:pointer;transition:border-color .15s,background .15s}.room-code-block:hover{background:var(--bg-card);border-color:var(--accent)}.room-code-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.room-code-value{font-size:36px;font-weight:700;letter-spacing:10px;color:var(--accent);font-variant-numeric:tabular-nums}.lobby-players{display:flex;flex-direction:column;gap:10px;width:100%}.lobby-player{background:var(--bg-card-2);border-radius:var(--radius);padding:10px 16px;display:flex;align-items:center;gap:10px}.lobby-player .dot{width:8px;height:8px;border-radius:50%;background:var(--green-hi)}.lobby-player.waiting .dot{background:var(--text-muted)}.grid-container{display:grid;grid-template-columns:28px repeat(10,1fr);grid-template-rows:22px repeat(10,1fr);gap:2px;-webkit-user-select:none;user-select:none}.grid-container.small{grid-template-columns:22px repeat(10,1fr);grid-template-rows:18px repeat(10,1fr)}.grid-header{display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.2vw,15px);font-weight:600;color:var(--text-muted)}.grid-cell{display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2.2vw,30px);font-weight:700;border-radius:3px;background:var(--cell-empty);border:1px solid var(--border);aspect-ratio:1;cursor:pointer;transition:background .1s,border-color .1s;color:var(--text);min-width:0;width:100%}.grid-cell.has-letter{color:var(--accent);background:var(--cell-hit);border-color:var(--accent-dim)}.grid-cell.opponent-hit{background:#e052522e;border-color:var(--red);color:var(--accent)}.grid-cell.opponent-miss{color:var(--text-muted);font-size:clamp(14px,2.2vw,30px)}.grid-cell.last-move{box-shadow:inset 0 0 0 2px #ffffffbf}.grid-cell.revealed-empty{color:var(--red);font-size:clamp(14px,2.2vw,30px)}.grid-cell.preview-valid{background:#52c28a40;border-color:var(--green-hi)}.grid-cell.preview-invalid{background:#e0525240;border-color:var(--red)}.grid-cell.selected{border-color:var(--accent);background:#f5c84226}.grid-cell:hover:not(.has-letter):not(.no-hover){background:var(--cell-hover);border-color:var(--border-light)}.grid-cell.area-hover{background:#52c28a33;border-color:var(--green-hi)}.grid-cell.no-action{cursor:default}#screen-setup{padding:40px}.setup-layout{display:grid;grid-template-columns:1fr auto minmax(200px,1fr);gap:10px 64px;align-items:start;width:100%}.setup-title{grid-column:1 / -1;text-align:center;font-size:15px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:1px}.setup-center{display:flex;flex-direction:column;gap:12px}.setup-input-row{display:flex;gap:8px;margin-left:28px}.setup-input-row input{flex:1;text-transform:uppercase}#setup-grid{width:var(--setup-grid-size);height:var(--setup-grid-size);font-size:clamp(12px,calc(var(--setup-grid-size) * .043),32px)}#setup-grid .grid-header{font-size:clamp(9px,calc(var(--setup-grid-size) * .025),18px)}.setup-right{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;width:300px;max-width:100%;display:flex;flex-direction:column;gap:12px}.setup-left{display:flex;flex-direction:column;align-items:flex-end}.setup-players-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:12px}.setup-players-heading{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.setup-player-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);overflow-wrap:break-word;word-break:break-all;min-width:0}.setup-player-row .dot{width:8px;height:8px;border-radius:50%;background:var(--green-hi);flex-shrink:0}.setup-subhint{color:var(--text-muted);font-size:12px}.active-dir{background:var(--border-light)!important;color:var(--text)!important}.word-slots{display:flex;flex-direction:column;gap:8px}.word-slot{background:var(--bg-card-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;min-height:38px}.word-slot.filled{border-color:var(--green-hi)}.word-slot .slot-label{font-size:12px;color:var(--text-muted)}.word-slot .slot-word{font-weight:700;color:var(--accent);font-size:13px;letter-spacing:1px}.word-slot .slot-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px}.word-slot .slot-remove:hover{color:var(--red)}.word-slot .slot-remove:disabled{opacity:.2;cursor:default}.setup-status{font-size:12px;color:var(--text-muted);text-align:center}:root{--grid-size: 600px}#screen-game{padding:40px}.game-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 64px;align-items:start;width:100%}.game-main{flex:0 0 auto;display:flex;flex-direction:column}.game-main .grid-container{width:var(--grid-size);height:var(--grid-size);font-size:clamp(12px,calc(var(--grid-size) * .043),32px)}.game-main .grid-header{font-size:clamp(9px,calc(var(--grid-size) * .025),18px)}.my-board-panel{justify-self:end;width:min(var(--grid-size),100%);container-type:inline-size;display:flex;flex-direction:column}.my-board-panel .grid-container{width:100%;aspect-ratio:1}.my-board-panel .grid-cell{font-size:max(7px,3.5cqi)}.my-board-panel .grid-header{font-size:max(5px,2cqi)}.my-board-panel .revealed-letters-section{margin-top:20px}.grid-section{display:flex;flex-direction:column;gap:8px}.grid-label{font-size:15px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:1px;text-align:center}.game-sidebar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;width:300px;max-width:100%;flex-shrink:0;display:flex;flex-direction:column;gap:16px;margin-top:24px}.turn-banner{text-align:center;font-weight:700;font-size:13px;padding:10px;border-radius:var(--radius);background:var(--bg-card-2);color:var(--text-muted);overflow-wrap:break-word;word-break:break-all}.turn-banner.your-turn{background:#f5c84226;color:var(--accent)}.reconnect-banner{border-color:var(--red);display:flex;flex-direction:column;gap:4px}.reconnect-banner-title{font-size:12px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.5px}.reconnect-banner-countdown{font-size:13px;color:var(--text-muted)}.die-area{display:flex;flex-direction:column;align-items:center;gap:12px}.die-face{width:78px;height:78px;background:#f2f4f2;border-radius:16px;box-shadow:0 4px 14px #00000080,inset 0 1px #fff9;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;transition:transform .15s;border:2px solid #a9b3c0}.die-pip{width:13px;height:13px;background:#1a1a1a;border-radius:50%;place-self:center}.die-face.rolling{animation:dieRoll .5s ease-out}@keyframes dieRoll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(15deg) scale(1.1)}50%{transform:rotate(-10deg) scale(.95)}75%{transform:rotate(5deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.die-area .btn{width:100%}.action-prompt{background:var(--bg-card-2);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--text-muted);min-height:44px;text-align:center;display:flex;align-items:center;justify-content:center;overflow-wrap:break-word;word-break:break-all}.action-prompt.active{color:var(--text);border:1px solid var(--border-light)}.sidebar-actions{display:flex;flex-direction:column;gap:8px}.sidebar-actions .btn{width:100%}.letter-reveal-ui{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--bg-card-2);border:1px solid var(--border-light);border-radius:var(--radius);padding:14px 12px}.letter-reveal-label{font-size:12px;color:var(--text-muted);text-align:center}.letter-reveal-input{width:64px;text-align:center;font-size:28px;font-weight:700;padding:8px 4px;letter-spacing:2px}.letter-reveal-ui .btn{width:100%}.revealed-letters-section{display:flex;flex-direction:column;gap:6px}.revealed-letters-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.revealed-letters-chips{display:flex;flex-wrap:wrap;gap:4px}.revealed-letter-chip{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;background:var(--cell-hit);border:1px solid var(--accent-dim);border-radius:3px;color:var(--accent);font-size:12px;font-weight:700}.game-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:200px}.log-entry{font-size:12px;color:var(--text-muted);padding:4px 8px;border-radius:4px;background:var(--bg-card-2);overflow-wrap:break-word}.log-entry.highlight{color:var(--accent)}.gameover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:100}.gameover-overlay.hidden{display:none}.gameover-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}.gameover-close-btn{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:var(--radius);transition:color .15s,background .15s}.gameover-close-btn:hover{color:var(--text);background:var(--bg-card-2)}.gameover-result{font-size:52px;line-height:1}.gameover-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}.gameover-word{background:var(--bg-card-2);border:1px solid var(--border-light);border-radius:var(--radius);padding:6px 14px;font-weight:700;font-size:15px;letter-spacing:2px;color:var(--accent)}.grid-cell.end-reveal{color:var(--text-muted);background:#8ab8a014;border-color:var(--border)}.play-again-toast{border-color:var(--accent);display:flex;flex-direction:column;gap:8px;pointer-events:all}.play-again-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);font-weight:700}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal-overlay.hidden{display:none}.modal-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:16px}.modal-card h3{font-size:18px}.modal-hint{font-size:13px;color:var(--text-muted)}.guess-inputs{display:flex;flex-direction:column;gap:8px}.guess-input-row{display:flex;align-items:center;gap:10px}.guess-input-label{font-size:12px;color:var(--text-muted);width:40px;flex-shrink:0}.guess-input-row input{flex:1;text-transform:uppercase}.modal-actions{display:flex;gap:8px;justify-content:flex-end}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}.toast{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:10px 16px;font-size:13px;color:var(--text);box-shadow:0 4px 12px #0006;animation:toastIn .25s ease-out;max-width:280px}.toast.error{border-color:var(--red);color:var(--red)}.toast.success{border-color:var(--green-hi);color:var(--green-hi)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.site-header{justify-content:space-between}.rules-btn{width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);background:transparent;color:var(--accent);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}.rules-btn:hover{background:var(--accent);color:#1a2e1e}.rules-modal-card{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow-y:auto;padding:28px 32px}.rules-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.rules-header h3{font-size:18px;margin:0}.modal-close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;border-radius:var(--radius);transition:color .15s,background .15s;flex-shrink:0}.modal-close-btn:hover{color:var(--text);background:var(--bg-card-2)}.rules-body{display:flex;flex-direction:column;gap:20px}.rules-section h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:8px}.rules-section p,.rules-section ul{font-size:13px;color:var(--text-muted);line-height:1.6}.rules-section p+p{margin-top:6px}.rules-section ul{padding-left:18px;display:flex;flex-direction:column;gap:4px;margin-top:6px}.rules-section strong{color:var(--text);font-weight:600}.rules-die-grid{display:flex;flex-direction:column;gap:8px;margin-top:10px}.rules-die-entry{display:flex;align-items:baseline;gap:12px;font-size:13px;color:var(--text-muted)}.rules-die-badge{flex-shrink:0;background:var(--bg-card-2);border:1px solid var(--border-light);border-radius:var(--radius);padding:3px 8px;font-size:12px;font-weight:700;color:var(--text);min-width:44px;text-align:center}@media (max-width: 1500px){#screen-game,#screen-setup{padding:24px 32px}.game-layout,.setup-layout{gap:10px 40px}}@media (max-width: 1050px){#screen-game,#screen-setup{padding:16px 24px}.game-layout,.setup-layout{gap:10px 24px}.game-sidebar,.setup-right{width:240px}}@media (max-width: 860px){#screen-game.active{overflow-y:auto}.game-layout{grid-template-columns:1fr}.game-sidebar{order:1;width:100%;margin-top:0}.game-layout>:nth-child(2){order:2}.game-main{order:3;width:100%}.game-layout>:nth-child(1){order:4}.my-board-panel{order:5;justify-self:stretch;width:100%}.game-layout>:nth-child(3){display:none}.game-main .grid-container{width:100%;height:auto;aspect-ratio:1;font-size:clamp(14px,2.2vw,30px)}.game-main .grid-header{font-size:clamp(10px,1.2vw,15px)}.my-board-panel .grid-cell{font-size:clamp(14px,2.2vw,30px)}.my-board-panel .grid-header{font-size:clamp(10px,1.2vw,15px)}#screen-setup.active{overflow-y:auto}.setup-layout{grid-template-columns:1fr}.setup-left{display:none}#screen-setup{padding:16px}.setup-center{width:100%}.setup-right{width:100%;max-width:100%}.setup-input-row{margin-left:0;flex-wrap:wrap}}