:root{--match: #2e7d32;--mismatch: #555;--bg: #14161a;--panel: #1e2127;--text: #e8e8e8;--accent: #4f8cff}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}#app{max-width:960px;margin:0 auto;padding:1rem}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;border-bottom:1px solid #2c2f36;padding-bottom:.6rem}.topbar-title{text-align:center}.topbar-actions{display:flex;align-items:center;gap:.4rem;justify-self:start;padding:.25rem;border:1px solid #3a3f49;border-radius:8px}.topbar-btn{cursor:pointer;background:var(--panel);border:1px solid #3a3f49;border-radius:6px;padding:.5rem .9rem;font-size:.9rem;color:var(--text)}.topbar-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.topbar-btn.subtle{background:transparent;border-color:transparent;color:#aab;padding:.5rem .6rem;font-size:.85rem}.topbar-btn.subtle:hover{border-color:#3a3f49}.topbar-right{display:flex;gap:.5rem;justify-self:end}h1{margin:0;font-size:1.4rem;letter-spacing:.05em}.status{color:#aab;font-size:.85rem}.seed-tag{margin-left:.5rem;color:#5b626d;font-size:.72rem;font-family:ui-monospace,monospace}.settings-dialog{background:var(--panel);color:var(--text);border:1px solid #3a3f49;border-radius:10px;padding:0;min-width:300px}.settings-form{padding:1.2rem 1.4rem}.settings-dialog::backdrop{background:#0000008c}.settings-form h2{margin:0 0 .3rem;font-size:1.1rem}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.9rem}.setting-row select,.seed-input{background:var(--bg);color:var(--text);border:1px solid #3a3f49;border-radius:6px;padding:.3rem .5rem}.seed-input{width:9rem}.settings-cancel{cursor:pointer;background:transparent;border:1px solid #3a3f49;border-radius:6px;padding:.45rem;color:#aab;font-size:.85rem}.settings-form{display:flex;flex-direction:column;gap:.7rem}.settings-note{margin:0;font-size:.75rem;color:#889}.settings-close{margin-top:.4rem;cursor:pointer;background:var(--accent);border:none;border-radius:6px;padding:.55rem;color:#fff;font-size:.9rem}.modern-check{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;border:1.5px solid #4a5160;border-radius:5px;background:var(--bg);cursor:pointer;display:grid;place-content:center;transition:background .12s,border-color .12s;flex:0 0 auto}.modern-check:before{content:"";width:.7rem;height:.7rem;transform:scale(0);transition:transform .12s ease-in-out;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:#fff}.modern-check:checked{background:var(--accent);border-color:var(--accent)}.modern-check:checked:before{transform:scale(1)}.filter-range input::placeholder{color:#777}#filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0 .8rem}.filter-panel{display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 auto}.filter-open-btn{cursor:pointer;background:transparent;color:var(--text);border:1px solid #3a3f49;border-radius:6px;padding:.55rem 1rem;font-size:.95rem;font-weight:600}.filter-open-btn:hover{background:#ffffff0a}.filter-dialog{background:var(--panel);color:var(--text);border:1px solid #3a3f49;border-radius:10px;padding:0;width:min(720px,92vw);max-height:86vh}.filter-dialog::backdrop{background:#0000008c}.filter-dialog-form{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 1.4rem;max-height:86vh;box-sizing:border-box;overflow-y:auto}.filter-dialog-heading{margin:0 0 .3rem;font-size:1.1rem}.filter-groups{display:flex;flex-wrap:wrap;gap:.5rem}.filter-dialog-actions{display:flex;justify-content:flex-end;margin-top:.4rem}.filter-dialog-close{cursor:pointer;background:var(--accent);border:none;border-radius:6px;padding:.55rem 1.2rem;color:#fff;font-size:.9rem}.chip-group{flex:1 1 200px;border:1px solid #3a3f49;border-radius:6px;padding:.35rem .5rem .5rem}.chip-group.wide{flex-basis:100%}.chip-group-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}.chip-group-title{font-size:.75rem;color:#aab}.chip-mini{font-size:.7rem;padding:.05rem .4rem;border:1px solid #3a3f49;border-radius:4px;background:var(--bg);color:#aab;cursor:pointer}.chip-box{display:flex;flex-wrap:wrap;gap:.3rem}.filter-chip{font-size:.85rem;padding:.3rem .75rem;border-radius:999px;border:1px solid #3a3f49;background:#2a2d33;color:#8a909a;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .1s,color .1s,border-color .1s}.filter-chip:hover{border-color:#6b7280}.filter-chip.on{background:var(--match);border-color:var(--match);color:#fff;font-weight:600}.filter-range{display:flex;gap:.3rem}.filter-range input{width:4.5rem;background:var(--bg);color:var(--text);border:1px solid #3a3f49;border-radius:5px;padding:.3rem .4rem;font-size:.85rem}.auto-filter-btn{padding:.55rem 1rem;border:none;border-radius:6px;background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer}.candidate-info{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#aab;font-size:.85rem;margin-bottom:.5rem}.play{display:flex;gap:1rem;align-items:flex-start;margin-top:.8rem}.play-main{flex:1 1 60%;min-width:0;display:flex;flex-direction:column;gap:.8rem}.input-area{display:flex;flex-direction:column;gap:.6rem}.preview{background:var(--panel);border-radius:8px;padding:.8rem 1rem;min-height:250px;box-sizing:border-box}.preview h2{margin:0 0 .5rem;font-size:1rem}.preview-body{display:flex;gap:.9rem}.preview-img-box{flex:0 0 auto;width:90px;height:130px}.preview-img-box img{width:100%;height:100%;object-fit:contain;border-radius:4px}.preview-name{font-weight:600;margin-bottom:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-info{min-width:0}.preview-stats{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;margin:0;font-size:.85rem}.preview-stats dt{color:#aab}.preview-stats dd{margin:0}.preview-confirm{margin-top:.8rem;width:100%;cursor:pointer;background:var(--accent);border:none;border-radius:6px;padding:.7rem;color:#fff;font-size:1rem}.preview.preview--won{border:1px solid var(--match);box-shadow:0 0 0 2px color-mix(in srgb,var(--match) 25%,transparent)}.preview-won-title{color:var(--match);text-align:center}.preview-won-footer{margin-top:.8rem;display:flex;justify-content:center}.guess-input{display:flex;flex-wrap:nowrap;gap:.5rem;align-items:center}.guess-input input,.guess-input select{padding:.6rem .8rem;font-size:1rem;border-radius:6px;border:1px solid #3a3f49;background:var(--panel);color:var(--text)}.guess-input input{flex:0 0 180px}.guess-input select{flex:1 1 auto;min-width:0}.guess-input select:disabled{opacity:.5}.hint-btn{flex:0 0 auto;margin-left:auto;padding:.55rem 1rem;border:1px solid #b58900;border-radius:6px;background:#6b5b00;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;white-space:nowrap}.hint-btn:disabled{opacity:.45;cursor:not-allowed}.hint-row .hint-mark{font-size:1.3rem}.grid-wrap{margin-top:1rem;overflow-x:auto}table.grid{border-collapse:collapse;width:100%;font-size:.85rem}table.grid th,table.grid td{border:1px solid #2c2f36;padding:.4rem .5rem;text-align:center;white-space:nowrap}.cell.match{background:var(--match);color:#fff}.cell.mismatch{background:var(--mismatch);color:#ddd}.cell.higher,.cell.lower{background:#6b5b00;color:#fff}.cell.image{width:52px}.thumb{width:40px;height:58px;margin:0 auto}.thumb img{width:100%;height:100%;object-fit:contain;display:block}.cell.name{text-align:left;font-weight:600}.cell.name.correct{outline:2px solid var(--accent)}.empty{color:#889}.confirmed{flex:0 0 200px;background:var(--panel);border-radius:8px;padding:.7rem .8rem;position:sticky;top:.5rem}.confirmed h2{font-size:1rem;margin:0 0 .5rem}.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}.status-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.status-line{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.4rem .6rem;border-radius:6px;font-size:.9rem}.status-line.known{background:var(--match);color:#fff}.status-line.unknown{background:#23262c;color:#7a818c}.status-key{font-size:.8rem;opacity:.85}.status-val{font-weight:600}.range-nums{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;color:#889;font-size:.85rem}.range-num{width:5rem;background:var(--bg);color:var(--text);border:1px solid #3a3f49;border-radius:5px;padding:.3rem .4rem;font-size:.85rem}@media(max-width:720px){.play{flex-direction:column}.confirmed{position:static;width:100%}}@media(max-width:600px){#app{padding:.6rem}.topbar{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}.topbar-title{order:-1}h1{font-size:1.2rem}.topbar-actions{justify-self:auto}.topbar-actions,.topbar-right{justify-content:center}.topbar-actions .topbar-btn.primary{flex:1 1 auto}.topbar-right{display:flex}.topbar-right .topbar-btn{flex:1 1 auto}#filters{gap:.4rem}.filter-panel{flex:1 1 100%;flex-wrap:nowrap}.filter-open-btn,.auto-filter-btn{flex:1 1 0;min-width:0;padding:.6rem .4rem;font-size:.9rem;text-align:center}.hint-btn{flex:1 1 100%;margin-left:0;text-align:center}.filter-dialog{width:96vw}.filter-dialog-form{padding:1rem .9rem}.filter-groups{gap:.4rem}.play-main,.input-area,.guess-input{min-width:0}.guess-input{flex-direction:column;align-items:stretch}.guess-input input,.guess-input select{flex:0 0 auto;width:100%;min-width:0;max-width:100%}}.slider-value{color:var(--text);font-size:.8rem;margin-left:auto}.dual-slider{display:flex;flex-direction:column;gap:.2rem;padding-top:.3rem}.dual-slider input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.chip{background:var(--match);color:#fff;border-radius:999px;padding:.25rem .7rem;font-size:.85rem}.banner{margin-top:1rem;padding:1rem;border-radius:8px;background:var(--panel);text-align:center;display:flex;flex-direction:column;align-items:center}.banner p{margin:0 0 .5rem}.banner.won{border:1px solid var(--match)}.banner.lost{border:1px solid #803333}.banner img{height:220px;margin-top:.5rem}.error{color:#ff8a80}.share-button{margin-top:.8rem;cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem}
