:root{--bg: #14110b;--panel: #211c12;--line: #3a3120;--ink: #f3ecdd;--dim: #b09c78;--accent: #b0843a;--green: #5cae6a;--amber: #d9a441;--grey: #6b6552;--modal: #251f14}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#221c11,var(--bg));color:var(--ink);font-family:Georgia,Times New Roman,serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:560px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:30px;letter-spacing:8px;font-weight:800;color:var(--accent);font-family:Georgia,serif}.sub{margin:3px 0 0;color:var(--dim);font-size:13px;font-style:italic}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 14px;font:600 13px Georgia,serif;cursor:pointer}.seg button.active{background:var(--accent);color:#1c1408}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 15px;border-radius:999px;font:700 13px Georgia,serif;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#1c1408;border-color:var(--accent)}.scoreboard{display:flex;gap:10px;justify-content:center;margin:8px 0}.readout{background:#0f0c07;border:1px solid var(--line);border-radius:8px;padding:6px 16px;font:800 18px ui-monospace,monospace;color:var(--accent);min-width:84px;text-align:center}.readout span{color:var(--dim);font-size:11px;display:block;font-weight:600;letter-spacing:.5px;font-family:Georgia,serif}.stage{position:relative}.casebox{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:12px 16px;margin-top:8px}.caserow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.casebox h2{margin:0;font-size:20px;color:var(--ink)}.diff{color:var(--accent);font-size:12px;white-space:nowrap}.casebox p{margin:8px 0 0;color:var(--dim);font-size:15px;line-height:1.5}.deduce{margin-top:12px}.narrow{margin:0 0 6px;color:var(--dim);font-size:12px;font-style:italic;text-align:center}.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.chip{background:#1a160d;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:var(--ink);cursor:default}.chip.out{color:#5b5440;text-decoration:line-through;opacity:.5}.logbox{margin-top:12px}#log{background:#0f0c07;border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-height:60px;max-height:150px;overflow-y:auto}.logempty{margin:6px 0;color:var(--dim);font-size:13px;font-style:italic;text-align:center}.feedback{margin:6px 0;font-size:13px;line-height:1.45;padding-left:10px;border-left:3px solid var(--grey)}.feedback.full{border-left-color:var(--green);color:#cdebd2}.feedback.partial{border-left-color:var(--amber);color:#f0dcae}.feedback.none{border-left-color:var(--grey);color:#b6ad96}.handlabel{margin:14px 0 6px;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.5px;text-align:center}.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.card{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:var(--ink);font-family:Georgia,serif}.card:hover{border-color:var(--accent)}.card.played{opacity:.4;cursor:default}.ctitle{font-weight:800;font-size:14px;color:var(--accent)}.ctext{font-size:12px;color:var(--ink);line-height:1.35}.cprin{font-size:11px;color:var(--dim);font-style:italic;margin-top:2px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0804d1;border-radius:8px;backdrop-filter:blur(3px);z-index:5}.overlay.hidden{display:none}.card-modal{background:var(--modal);border:1px solid var(--line);border-radius:16px;padding:22px 28px;text-align:center;max-width:340px}.card-modal h2{margin:0 0 8px;font-size:26px;color:var(--accent)}.card-modal p{margin:8px 0;color:var(--dim);font-size:14px;line-height:1.5}.card-modal .bigscore{color:var(--accent);font-size:20px;font-weight:800}.card-modal .row{display:flex;gap:8px;justify-content:center;margin-top:14px}.hint{text-align:center;color:var(--dim);font-size:12px;margin-top:16px;line-height:1.6}.hint b{color:var(--ink)}