@layer reset{*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}h1,h2,h3,p{margin:0}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}img{max-width:100%}}@layer base{:root{color:#26243b;--bg:#f7f7fb;--surface:#fff;--ink:#26243b;--muted:#696579;--line:#e1dfe9;--accent:#6554cf;--accent-hover:#5140b5;--soft:#eeebfb;--correct:#087b69;--present:#a5630a;--absent:#dedee8;--absent-ink:#514c63;--tile:#fff;--duel:#eeeafb;--coop:#e2f2eb;--coop-ink:#255b48;--key:#e9e7f0;--error:#a12442;--shadow:0 20px 80px #211b4126;font-synthesis:none;background:#f7f7fb;font-family:Trebuchet MS,Segoe UI,sans-serif;font-size:16px;line-height:1.5}:root[data-theme=dark]{color:#f3f1fb;--bg:#1c1b29;--surface:#252332;--ink:#f3f1fb;--muted:#b7b2ca;--line:#444052;--accent:#c1b2ff;--accent-hover:#d2c8ff;--soft:#39314f;--correct:#087b69;--present:#a5630a;--absent:#403d51;--absent-ink:#e1ddea;--tile:#252332;--duel:#322b48;--coop:#213d34;--coop-ink:#b5e5cf;--key:#3b374c;--error:#ffa6bc;--shadow:0 20px 80px #0008;background:#1c1b29}:root[data-contrast=true],:root[data-theme=dark][data-contrast=true]{--correct:#005c9f;--present:#8e4800}body{min-width:280px}button{background:var(--accent);color:#fff;border:0;border-radius:9px;min-height:46px;padding:11px 22px;font-weight:700;transition:background .15s,transform .15s}button:hover:not(:disabled){background:var(--accent-hover)}:root[data-theme=dark] button{color:#272039}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.5}a{transition:color .15s}a:hover{color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}h1:focus{outline:none}h1{letter-spacing:-.045em;font-size:clamp(2rem,4vw,3.5rem);line-height:1.1}h2{letter-spacing:-.025em;font-size:1.35rem;line-height:1.25}h3{letter-spacing:-.015em;font-size:1.13rem;line-height:1.3}p{color:var(--muted)}small{font-size:.82rem}strong{font-weight:700}label{font-size:.92rem;font-weight:700}input:not([type=checkbox]),select,textarea{width:100%;min-height:46px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:11px 13px}textarea{resize:vertical}form{flex-direction:column;gap:12px;display:flex}form label:not(:first-child),form button{margin-top:8px}form small{color:var(--muted)}summary{cursor:pointer;min-height:40px;padding:8px 0}details p{margin:8px 0 18px}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:.85rem}hr{border:0;border-top:1px solid var(--line);margin:22px 0}.secondary{border:1px solid var(--line);background:0 0;color:var(--ink)!important}.secondary:hover:not(:disabled){background:var(--soft)}.danger{color:#fff!important;background:#a52f47!important}.text-button{align-items:center;gap:7px;min-height:44px;padding:8px 0;font-size:.88rem;display:inline-flex;color:var(--muted)!important;background:0 0!important}.text-button:hover{color:var(--accent)!important}.quiet{color:var(--muted);font-size:.85rem}.skip-link{z-index:100;background:var(--surface);padding:12px;position:fixed;top:-100px;left:10px}.skip-link:focus{top:10px}}@layer layout{.app-shell{width:min(100%,740px);margin:auto;padding:0 16px}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:64px;display:flex}.brand{letter-spacing:-.06em;align-items:center;min-height:44px;font-size:1.8rem;font-weight:800;text-decoration:none;display:inline-flex}.brand-dot{color:var(--accent)}.header-actions{align-items:center;gap:4px;display:flex}.icon-button{background:0 0;place-items:center;width:44px;min-height:44px;padding:10px;text-decoration:none;display:grid;color:var(--ink)!important}.icon-button>span{display:flex}.icon-button:hover:not(:disabled){background:var(--soft)}.game-main{max-width:600px;margin:auto}.game-topbar{justify-content:center;align-items:center;min-height:60px;display:flex;position:relative}.game-topbar h1{letter-spacing:0;font-size:1rem}.mode-picker{background:0 0;align-items:center;gap:12px;padding:6px 14px;font-size:1.05rem;display:flex;color:var(--ink)!important}.mode-picker:hover:not(:disabled){background:var(--soft)}.mode-picker>span{color:var(--accent);font-size:1.3rem}.leave-button{position:absolute;left:0}.connection{color:var(--muted);align-items:center;gap:6px;font-size:.72rem;display:flex;position:absolute;right:0}.connection:before{content:"";background:var(--present);border-radius:50%;width:6px;height:6px}.connection.live:before{background:var(--correct)}.match-strip{justify-content:space-between;align-items:center;gap:10px;max-width:520px;margin:0 auto 14px;font-size:.85rem;display:flex}.match-strip:empty{display:none}.player-name{text-align:left;overflow-wrap:anywhere;background:0 0;max-width:32%;padding:0;font-size:.85rem;color:var(--ink)!important}.player-name:hover{text-decoration:underline;background:0 0!important}.other-player{text-align:right;overflow-wrap:anywhere;max-width:32%}.other-player small{color:var(--muted);font-size:.7rem;display:block}.timer{font-variant-numeric:tabular-nums;font-weight:700}.play-stage{justify-content:center;align-items:flex-start;gap:28px;width:100%;display:flex}.your-board{width:min(100%, var(--board-size,300px));flex-shrink:0}.opponent-board{width:120px;padding-top:0}.opponent-board h2{text-align:center;overflow-wrap:anywhere;letter-spacing:0;margin-bottom:8px;font-size:.72rem}.board{flex-direction:column;gap:6px;width:100%;display:flex}.board-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.tile{aspect-ratio:1;border:1px solid var(--line);background:var(--tile);color:var(--ink);border-radius:4px;place-items:center;font-size:1.8rem;font-weight:800;line-height:1;display:grid;position:relative}.tile.filled{border-color:var(--accent)}.tile.correct,.key.correct{background:var(--correct);border-color:#0000;color:#fff!important}.tile.present,.key.present{background:var(--present);border-color:#0000;color:#fff!important}.tile.absent,.key.absent{background:var(--absent);border-color:#0000;color:var(--absent-ink)!important}.tile .clue-symbol{font-size:.55rem;font-style:normal;display:none;position:absolute;bottom:3px;right:4px}:root[data-contrast=true] .clue-symbol{display:block}.small-board,.small-board .board-row{gap:3px}.small-board .tile{border-radius:2px;font-size:.8rem}.small-board .clue-symbol{display:none}.shadow-board .tile.correct:after{content:"●";color:#fff;font-size:.5rem}.shadow-board .tile.present:after{content:"◐";color:#fff;font-size:.55rem}.shadow-board .tile.absent:after{content:"×";font-size:.6rem}.board-message{text-align:center;min-height:28px;color:var(--muted);padding:4px 0;font-size:.8rem}.keyboard{flex-direction:column;gap:7px;width:min(100%,500px);margin:8px auto 0;display:flex}.key-row{justify-content:center;gap:5px;display:flex}.key-row:nth-child(2){padding:0 4%}.key{background:var(--key);border-radius:5px;flex:1;min-width:0;min-height:54px;padding:7px 0;font-size:1rem;font-weight:700;color:var(--ink)!important}.key:hover:not(:disabled){background:var(--line)}.wide-key{flex:1.5;font-size:.76rem}.key:disabled{opacity:.6}.result-panel{text-align:center;width:min(100%,500px);margin:6px auto 0}.result-symbol{display:none}.result-panel h2{overflow-wrap:anywhere;font-size:1.3rem}.result-panel p{margin:6px 0}.answer{color:var(--ink);letter-spacing:.12em;font-size:1.2rem}.result-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.result-actions button{padding:10px 16px;font-size:.9rem}.result-panel details{text-align:left;color:var(--muted);margin:12px 0;font-size:.75rem}.site-footer{color:var(--muted);margin:32px auto 0;padding:16px 0 24px;font-size:.75rem}.site-footer nav{justify-content:center;gap:24px;display:flex}.site-footer a{align-items:center;min-height:32px;text-decoration:none;display:inline-flex}.content-page{max-width:600px;margin:32px auto}.content-page h1{letter-spacing:-.03em;margin-bottom:20px;font-size:1.6rem}.content-page h2{margin:28px 0 12px;font-size:1.15rem}.content-page h3{margin:14px 0 7px}.content-page>p{margin:14px 0}.content-page>button{margin-top:24px}.content-page li{color:var(--muted);margin:8px 0}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:55vh;display:flex}.empty-state h1{font-size:1.4rem}.opening-game{text-align:center}.opening-game h1{letter-spacing:0;margin:20px;font-size:1.1rem}.opening-game .board{max-width:300px;margin:auto}.opening-game>p,.opening-game>button{margin-top:18px}.waiting-room{text-align:center;flex-direction:column;gap:24px;width:min(100%,400px);margin:20px auto 0;display:flex}.waiting-room h2{font-size:1.4rem}.room-code{flex-direction:column;align-items:center;gap:12px;display:flex}.room-code>span{color:var(--muted);font-size:.8rem}.room-code>strong{letter-spacing:.12em;font-size:1.8rem}.room-code button{width:100%}.player-seats{grid-template-columns:1fr 1fr;gap:20px;display:grid}.player-seats>div{overflow-wrap:anywhere;flex-direction:column;align-items:center;gap:8px;min-width:0;display:flex}.player-seats strong{max-width:100%;font-size:.9rem}.player-seats>div>span:last-child{color:var(--muted);font-size:.75rem}.avatar{background:var(--soft);width:40px;height:40px;color:var(--accent);border-radius:50%;place-items:center;font-weight:700;display:grid}.help-clues{flex-direction:column;gap:14px;margin:24px 0;display:flex}.help-clues>div{align-items:center;gap:20px;display:flex}.help-clues .tile{flex-shrink:0;width:52px}.rules-page{max-width:400px}.rules-page details{color:var(--muted);margin-top:20px}.stats-grid{text-align:center;grid-template-columns:repeat(3,1fr);gap:20px 12px;margin:20px 0;display:grid}.stats-grid strong{font-size:1.8rem;display:block}.stats-grid span{color:var(--muted);font-size:.75rem}.history-list>div{border-bottom:1px solid var(--line);grid-template-columns:8px 1fr 1fr auto;align-items:center;gap:10px;padding:12px 0;font-size:.8rem;display:grid}.history-list time{color:var(--muted);font-size:.7rem}.history-dot{background:var(--absent);border-radius:50%;width:6px;height:6px}.history-dot.won{background:var(--correct)}.empty-inline{flex-direction:column;align-items:flex-start;gap:15px;margin-top:20px;display:flex}.feedback-page form{margin-top:20px}.feedback-context{color:var(--muted);font-size:.8rem}.feedback-success,.success-state{flex-direction:column;gap:16px;display:flex}.error-page{max-width:500px;margin:50px auto;padding:20px}.error-page>*{margin:20px 0}}@layer components{.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.notice{background:var(--soft);color:var(--ink);overflow-wrap:anywhere;border-radius:6px;max-width:500px;margin:0 auto 12px;padding:10px 14px;font-size:.85rem}.notice.error{color:var(--error);background:color-mix(in srgb, var(--error) 8%, var(--surface))}.dialog-overlay{z-index:50;background:#15102d77;position:fixed;inset:0}.dialog-content{z-index:51;background:var(--surface);width:400px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);color:var(--ink);box-shadow:var(--shadow);border-radius:12px;flex-direction:column;gap:16px;padding:28px;display:flex;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.dialog-content h2{padding-right:20px;font-size:1.4rem}.dialog-content>p{font-size:.85rem}.dialog-content>button{width:100%}.dialog-content .dialog-close{background:0 0;width:44px;min-height:44px;padding:0;font-size:1.7rem;position:absolute;top:4px;right:6px;color:var(--muted)!important}.dialog-close:hover:not(:disabled){background:var(--soft)}.checkbox-line{align-items:center;gap:12px;min-height:44px;font-size:.9rem;display:flex}.checkbox-line input{width:20px;height:20px;accent-color:var(--accent)}.room-options{flex-direction:column;gap:10px;padding-top:10px;display:flex}.mode-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mode-choice{background:var(--bg);flex-direction:column;align-items:center;gap:8px;padding:16px 8px;font-size:.95rem;display:flex;color:var(--ink)!important}.mode-choice>span{color:var(--accent);font-size:1.5rem}.mode-choice.selected{background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}.mode-choice:hover:not(:disabled){background:var(--soft)}.loading-tiles{justify-content:center;gap:4px;display:flex}.loading-tiles span{background:var(--soft);width:35px;height:40px;color:var(--accent);border-radius:3px;place-items:center;font-weight:700;display:grid}.emote{text-align:center;padding:12px;font-size:.85rem}}@layer responsive{@media (width<=540px){.app-shell{padding:0 12px}.duel-stage{gap:14px}.duel-stage .your-board{width:min(67%, var(--board-size,270px))}.opponent-board{flex:1;max-width:105px}.small-board,.small-board .board-row{gap:2px}.small-board .tile{font-size:.55rem}.site-footer{margin-top:22px}}@media (height<=760px) and (height>=540px){.game-shell{--board-size:260px}.game-shell .site-header{min-height:56px}.game-topbar{min-height:52px}.game-shell .tile{font-size:1.55rem}.game-shell .small-board .tile{font-size:.65rem}.keyboard{margin-top:0}.key{min-height:48px}}@media (height<=620px) and (height>=540px){.game-shell{--board-size:220px}.game-shell .key{min-height:44px}}@media (width<=340px){.app-shell{padding:0 8px}.key-row{gap:3px}.key{font-size:.85rem}.wide-key{font-size:.65rem}.dialog-content{padding:24px}.history-list>div{gap:6px;font-size:.7rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}}
