:root{--green: #6aaa64;--yellow: #c9b458;--gray: #787c7e;--bg: #ffffff;--ink: #1a1a1b;--muted: #787c7e;--line: #d3d6da;--accent: #1a1a1b}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;min-height:100%;-webkit-font-smoothing:antialiased}header{width:100%;border-bottom:1px solid var(--line);text-align:center;padding:12px 16px 14px}header h1{font-size:30px;font-weight:800;letter-spacing:.5px}header h1 .dot{color:var(--green)}header p{font-size:13px;color:var(--muted);margin-top:2px}main{width:100%;max-width:540px;padding:14px 12px 40px;flex:1}.meta{text-align:center;font-size:13px;color:var(--muted);margin-bottom:12px}.meta b{color:var(--ink)}.diff-bar{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px}.diff-current{font-size:13px;font-weight:700}.diff-change{font-family:inherit;font-size:12px;font-weight:600;color:var(--accent);background:none;border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer}.diff-change:hover{border-color:var(--accent)}.modal-overlay{position:fixed;inset:0;z-index:1000;background:#1a1a1b99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}.modal-overlay[hidden]{display:none}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:24px 20px 20px;position:relative;box-shadow:0 20px 60px #0000004d;animation:pop .18s ease both}@keyframes pop{0%{transform:scale(.94);opacity:0}}.modal-title{font-size:22px;font-weight:800;text-align:center}.modal-title .dot{color:var(--green)}.modal-sub{font-size:13px;color:var(--muted);text-align:center;margin:6px 0 18px;line-height:1.45}.modal-options{display:flex;flex-direction:column;gap:9px}.modal-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff;font-family:inherit;text-align:left;transition:border-color .12s,background .12s,transform .06s}.modal-opt:hover{border-color:var(--accent);background:#fafafa}.modal-opt:active{transform:scale(.99)}.modal-opt.cur{border-color:var(--accent)}.mo-text{display:flex;flex-direction:column;gap:2px}.mo-label{font-size:15px;font-weight:700}.mo-blurb{font-size:12px;color:var(--muted)}.mo-mark{font-size:16px}.modal-close{position:absolute;top:8px;right:12px;border:none;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}.mystery{border:1px solid var(--line);background:#f6f7f8;border-radius:12px;padding:14px 14px 12px;margin-bottom:16px}.mystery-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-align:center;margin-bottom:10px}.mystery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mystery-cell{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 6px;text-align:center;display:flex;flex-direction:column;gap:2px;min-height:52px;justify-content:center}.mystery-cell .ml{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}.mystery-cell .mv{font-size:15px;font-weight:800;line-height:1.1}.mystery-cell.unknown{border-style:dashed;background:#fbfbfc}.mystery-cell.unknown .mv{color:#b6b9bd}.mystery-cta{text-align:center;font-size:12.5px;font-weight:600;color:var(--ink);margin-top:11px}@media (max-width: 380px){.mystery-grid{grid-template-columns:repeat(2,1fr)}}.board{width:100%;overflow-x:auto}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;min-width:360px}.head-cell{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;text-align:center;color:var(--muted);padding:4px 2px;line-height:1.15}.guess-name{grid-column:1 / -1;font-weight:700;font-size:14px;margin-top:8px;padding-left:2px}.tile{aspect-ratio:1 / 1;border-radius:8px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:13px;line-height:1.1;padding:3px;animation:flip .35s ease both;overflow:hidden}.tile .arrow{font-size:17px;line-height:1;display:block;margin-top:1px}.tile.green{background:var(--green)}.tile.yellow{background:var(--yellow)}.tile.gray{background:var(--gray)}@keyframes flip{0%{transform:rotateX(-90deg);opacity:0}to{transform:rotateX(0);opacity:1}}.tile.win{animation:flip .35s ease both,pulse 1.2s ease .35s 1}@keyframes pulse{0%,to{transform:scale(1)}35%{transform:scale(1.08)}}.input-wrap{position:relative;margin-top:18px}.field{position:relative}#guessInput{width:100%;padding:13px 14px;font-size:16px;font-family:inherit;border:2px solid var(--line);border-radius:10px;outline:none}#guessInput:focus{border-color:var(--accent)}#guessInput:disabled{background:#f3f3f3;color:var(--muted)}.dropdown{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0000001f;max-height:240px;overflow-y:auto;z-index:30;display:none}.dropdown.open{display:block}.opt{padding:11px 14px;cursor:pointer;font-size:15px;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #f0f0f0}.opt:last-child{border-bottom:none}.opt:hover,.opt.active{background:#f1f3f5}.opt .alias{color:var(--muted);font-size:12px}.submit{width:100%;margin-top:10px;padding:13px;font-size:15px;font-weight:700;font-family:inherit;color:#fff;background:var(--accent);border:none;border-radius:10px;cursor:pointer}.submit:disabled{opacity:.4;cursor:not-allowed}.hint{text-align:center;font-size:12px;color:var(--muted);margin-top:8px;min-height:16px}.hint.err{color:#c0392b;font-weight:600}.howto{text-align:left;font-size:13.5px;line-height:1.5;color:var(--ink)}.howto p{margin-top:9px}.howto-list{list-style:none;margin:9px 0 0;padding:10px 12px;background:#f6f7f8;border-radius:10px;font-size:13px}.howto-list li{padding:2px 0}.howto-legend{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:12.5px}.howto-legend span{display:inline-flex;align-items:center;gap:6px}.howto-legend .sw{width:14px;height:14px;border-radius:3px;display:inline-block}.modal-cta{margin-top:16px}.result-card{text-align:center}.result-emoji{font-size:52px;line-height:1;animation:emojiPop .6s cubic-bezier(.18,1.4,.4,1) both}.result-title{font-size:23px;font-weight:800;margin-top:6px}.result-sub{font-size:13px;font-weight:600;color:var(--muted);margin-top:2px}.result-answer{font-weight:800;font-size:20px;margin:14px 0 4px;animation:riseIn .4s ease .1s both}.result-answer small{font-weight:500;color:var(--muted);font-size:12.5px;display:block;margin-top:3px;line-height:1.4}.result-grid{display:flex;flex-direction:column;gap:4px;align-items:center;margin:16px 0 6px}.result-row{display:flex;gap:4px}.result-sq{width:22px;height:22px;border-radius:4px;opacity:0;animation:sqPop .32s ease forwards}.result-sq.green{background:var(--green)}.result-sq.yellow{background:var(--yellow)}.result-sq.gray{background:var(--gray)}.result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.share{padding:11px 22px;font-size:15px;font-weight:700;font-family:inherit;color:#fff;background:var(--green);border:none;border-radius:10px;cursor:pointer}.share:active{transform:scale(.98)}.result-again{padding:11px 18px;font-size:15px;font-weight:700;font-family:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer}.result-again:hover{border-color:var(--accent)}.result-next{font-size:12.5px;color:var(--muted);margin-top:14px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%) translateY(12px);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px #00000047;opacity:0;pointer-events:none;z-index:1100;transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.result-next b{color:var(--ink);font-variant-numeric:tabular-nums}@keyframes emojiPop{0%{transform:scale(0) rotate(-25deg)}70%{transform:scale(1.25) rotate(8deg)}to{transform:scale(1) rotate(0)}}@keyframes riseIn{0%{opacity:0;transform:translateY(8px)}}@keyframes sqPop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}footer{width:100%;max-width:540px;padding:0 12px 30px;text-align:center;font-size:12px;color:var(--muted);line-height:1.6}.howto-btn{margin-top:8px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px}footer .legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}footer .legend span{display:inline-flex;align-items:center;gap:5px}footer .sw{width:14px;height:14px;border-radius:3px;display:inline-block}.loading{text-align:center;color:var(--muted);padding:30px 0;font-size:14px}