.htplay{max-width:720px;margin:0 auto;padding:3rem 1.5rem 4rem;color:var(--text)}.htplay-header{margin-bottom:2.5rem;border-bottom:1px solid var(--border-dim);padding-bottom:1.5rem}.htplay-header h2{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--text);margin:0 0 .4rem}.htplay-tagline{color:var(--text-dim);font-size:.8rem;letter-spacing:.04em;margin:0}.htplay-section{margin-bottom:2.5rem}.htplay-section-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 .9rem}.htplay-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}.htplay-mode-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}.htplay-mode-icon{font-size:1.8rem;display:block;margin-bottom:.5rem}.htplay-mode-card h3{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:var(--text);margin:0 0 .4rem}.htplay-mode-card p{font-size:.82rem;color:var(--text-dim);line-height:1.6;margin:0}.htplay-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.htplay-step{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem}.htplay-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--surface-low);border:1px solid var(--border-dim);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--text-dim);margin-top:1px}.htplay-step strong{display:block;font-size:.9rem;color:var(--text);margin-bottom:.2rem}.htplay-step p{font-size:.82rem;color:var(--text-dim);line-height:1.6;margin:0}.htplay-legend{display:flex;gap:12px;flex-wrap:wrap}.htplay-legend-item{flex:1;min-width:200px;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem}.htplay-legend-icon{font-size:1.6rem;flex-shrink:0;margin-top:2px}.htplay-legend-item strong{display:block;font-size:.9rem;color:var(--text);margin-bottom:.2rem}.htplay-legend-item p{font-size:.82rem;color:var(--text-dim);line-height:1.6;margin:0}.htplay-examples{display:flex;flex-direction:column;gap:16px}.htplay-example{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}.htplay-example-label{font-size:.8rem;letter-spacing:.04em;margin:0 0 1rem}.htplay-secret-row{display:flex;align-items:center;gap:10px;margin-bottom:1rem}.htplay-secret-label{font-size:.82rem;color:var(--text-dim)}.htplay-secret-cells{display:flex;gap:5px}.htplay-secret-hint{font-size:.72rem;color:var(--text-ghost)}.htplay-cell{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;border:1px solid var(--border);font-family:var(--font-mono);font-size:1rem;font-weight:700;background:var(--surface-low);color:var(--text);text-transform:uppercase}.htplay-cell--hidden{color:var(--text-ghost);font-size:.9rem}.htplay-cell--bull{background:rgba(232,115,74,.12);border-color:#993c1d;color:#e8734a}.htplay-cell--cow{background:rgba(212,168,83,.12);border-color:#85500b;color:var(--gold)}.htplay-guesses{display:flex;flex-direction:column;gap:12px}.htplay-guess-row{border-top:1px solid var(--border-dim);padding-top:10px}.htplay-guess-row:first-child{border-top:none;padding-top:0}.htplay-guess-cells{display:flex;gap:5px;margin-bottom:6px}.htplay-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}.htplay-chip{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;padding:2px 8px;border-radius:20px;border:1px solid}.htplay-chip--bull{background:rgba(232,115,74,.1);border-color:#993c1d;color:#e8734a}.htplay-chip--cow{background:rgba(212,168,83,.1);border-color:#85500b;color:var(--gold)}.htplay-chip--none{background:transparent;border-color:var(--border-dim);color:var(--text-faint)}.htplay-guess-note{font-size:.78rem;color:var(--text-dim);line-height:1.55;margin:0}.htplay-tip{display:flex;gap:12px;align-items:flex-start;background:var(--surface-low);border:1px solid var(--border-dim);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:2.5rem}.htplay-tip-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px}.htplay-tip p{font-size:.82rem;color:var(--text-dim);line-height:1.6;margin:0}.htplay-tip strong{color:var(--text-mid)}.htplay-faq-list{display:flex;flex-direction:column;gap:0}.htplay-faq-item{border-top:1px solid var(--border-dim);padding:1rem 0}.htplay-faq-item:last-child{border-bottom:1px solid var(--border-dim)}.htplay-faq-item dt{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.4rem}.htplay-faq-item dd{font-size:.82rem;color:var(--text-dim);line-height:1.65;margin:0}@media (max-width:480px){.htplay{padding:2rem 1rem 3rem}.htplay-modes{grid-template-columns:1fr}.htplay-legend{flex-direction:column}.htplay-header h2{font-size:1.6rem}}@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@700;900&display=swap");:root{--bg:#111109;--surface:#1a1a12;--surface-low:#161610;--border:#2e2e20;--border-dim:#2a2a20;--gold:#d4a853;--gold-light:#e8be6a;--gold-muted:#c8b98a;--ember:#e8734a;--text:#f0e6c8;--text-mid:#c8b98a;--text-dim:#6b6b50;--text-faint:#4a4a38;--text-ghost:#3a3a2e;--shadow:rgba(0,0,0,.6);--font-mono:"Courier Prime",monospace;--font-serif:"Playfair Display",serif;--radius:10px;--radius-sm:4px;--radius-md:6px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}.cb-root{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}.cb-grain{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;opacity:.5;z-index:0}.cb-wrap{position:relative;z-index:1;width:100%;max-width:460px}.cb-header{text-align:center;margin-bottom:1rem}.cb-title{font-family:var(--font-serif);font-size:2.4rem;font-weight:900;color:var(--text);letter-spacing:.02em}.cb-subtitle{color:var(--text-dim);font-size:.8rem;margin-top:0;letter-spacing:.05em}.cb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px var(--shadow)}.cb-legend{display:flex;justify-content:center;gap:2rem;padding:.8rem 1rem;border-bottom:1px solid var(--border-dim);background:var(--surface-low);flex-wrap:wrap}.cb-legend span{color:var(--text-dim);font-size:.75rem}.cb-legend strong.bull{color:var(--ember)}.cb-legend strong.cow{color:var(--gold)}.cb-history{min-height:240px;overflow-y:auto;scrollbar-width:none}.cb-history::-webkit-scrollbar{display:none}.cb-history-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-ghost);font-size:.85rem;letter-spacing:.05em}.cb-row{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--border-dim);animation:slideIn .3s ease forwards;opacity:0}.cb-row-num{color:var(--text-dim);font-size:.75rem;text-align:right}.cb-row-value{font-family:var(--font-mono);font-size:1.2rem;letter-spacing:.3em;color:var(--text-mid);text-transform:uppercase}.cb-row-scores{display:flex;gap:1rem;min-width:7rem;justify-content:flex-end}.cb-score{display:flex;align-items:center;gap:.3rem}.cb-score-icon,.cb-score-val{font-size:1rem}.cb-score-val{font-family:var(--font-mono);min-width:1rem}.cb-score-val.bull{color:var(--ember);font-weight:700}.cb-score-val.cow{color:var(--gold);font-weight:700}.cb-score-val.zero{color:var(--text-faint);font-weight:400}.cb-banner{border-top:1px solid;padding:1rem;text-align:center}.cb-banner.won{background:rgba(212,168,83,.1);border-color:var(--gold)}.cb-banner.lost{background:rgba(120,40,20,.15);border-color:#8b3020}.cb-banner-emoji{font-size:1.5rem;margin-bottom:.25rem}.cb-banner-msg{font-family:var(--font-serif);font-weight:700;font-size:1.1rem;margin-bottom:.4rem}.cb-banner.won .cb-banner-msg{color:var(--gold)}.cb-banner.lost .cb-banner-msg{color:var(--ember)}.cb-reveal-line{color:var(--text-dim);font-size:.85rem;margin-bottom:.6rem}.cb-reveal-word{color:var(--text-mid);font-size:1rem;letter-spacing:.2em;cursor:pointer;text-transform:uppercase}.cb-reveal-hint{color:var(--text-faint);font-size:.75rem;display:block;margin-top:2px}.cb-input-area{padding:1.2rem 1rem;border-top:1px solid var(--border-dim);background:var(--surface-low)}.cb-boxes{display:flex;margin-bottom:1rem;gap:0}.cb-box,.cb-boxes{justify-content:center}.cb-box{display:inline-flex;align-items:center;width:2rem;height:2.5rem;border:2px solid;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:1.2rem;margin:0 4px;transition:all .15s ease;text-transform:uppercase}.cb-box.filled{border-color:var(--gold);background:rgba(212,168,83,.08);color:var(--text)}.cb-box.empty{border-color:var(--text-ghost);background:transparent;color:var(--text-ghost)}.cb-controls{display:flex;gap:.6rem;justify-content:center}.cb-input{flex:1;background:#0f0f09;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-mono);font-size:1.2rem;padding:.7rem 1rem;letter-spacing:.25em;outline:none;transition:border-color .15s;text-transform:uppercase}.cb-input::placeholder{color:var(--text-faint);text-transform:none}.cb-input:focus{border-color:var(--gold)}.cb-input.error{border-color:var(--ember)}.btn-primary{background:var(--gold);color:#1a1a12;border:none;padding:.6rem 2rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,transform .1s;white-space:nowrap}.btn-primary:hover{background:var(--gold-light);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold);padding:.6rem 1.5rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9rem;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:all .15s}.btn-ghost:hover{background:rgba(212,168,83,.1)}.btn-back{background:transparent;color:var(--text-dim);border:1px solid var(--border);padding:.4rem .9rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.78rem;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:all .15s}.btn-back:hover{color:var(--text-mid);border-color:var(--text-faint)}.cb-error{color:var(--ember);font-size:.78rem;margin-top:.4rem;animation:pulse .5s ease;text-align:center}.cb-progress{display:flex;justify-content:space-between;margin-top:.8rem;align-items:center}.cb-dots{display:flex;gap:4px}.cb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;transition:background .3s}.cb-dot.used{background:var(--gold)}.cb-dot.empty{background:var(--border-dim)}.cb-remaining{font-size:.72rem;letter-spacing:.04em}.cb-remaining.urgent{color:var(--ember)}.cb-remaining.calm{color:var(--text-faint)}.cb-how{margin-top:1.2rem;font-size:.78rem;letter-spacing:.02em;cursor:pointer}.cb-how summary{color:var(--text-dim);list-style:none;text-align:center}.cb-how-body{margin-top:.6rem;line-height:1.7;color:var(--text-faint);padding:0 .5rem}.cb-how-body ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}.cb-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.cb-mode-badge{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:20px;border:1px solid}.cb-mode-badge.numbers{color:var(--ember);border-color:var(--ember);background:rgba(232,115,74,.08)}.cb-mode-badge.words{color:var(--gold);border-color:var(--gold);background:rgba(212,168,83,.08)}.cb-lobby-header{text-align:center;margin-bottom:2.5rem}.cb-lobby-title{font-family:var(--font-serif);font-size:2.8rem;font-weight:900;color:var(--text);letter-spacing:.02em;line-height:1}.cb-lobby-ampersand{color:var(--gold)}.cb-lobby-tagline{color:var(--text-dim);font-size:.85rem;margin-top:.5rem;letter-spacing:.07em}.cb-lobby-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px var(--shadow)}.cb-lobby-choose{padding:1.4rem 1.2rem .8rem;text-align:center;color:var(--text-dim);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--border-dim)}.cb-lobby-modes{display:grid;grid-template-columns:1fr 1fr;gap:0}.cb-mode-btn{background:transparent;border:none;cursor:pointer;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;transition:background .2s;position:relative}.cb-mode-btn:first-child{border-right:1px solid var(--border-dim)}.cb-mode-btn:hover{background:hsla(0,0%,100%,.02)}.cb-mode-btn:hover .cb-mode-icon{transform:scale(1.12)}.cb-mode-icon{font-size:2.6rem;transition:transform .2s;display:block}.cb-mode-label{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;color:var(--text)}.cb-mode-desc{font-size:.8rem;color:var(--text-dim);letter-spacing:.04em;line-height:1.5;text-align:center}.cb-mode-tag{font-size:.75rem;padding:.2rem .5rem;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;border:1px solid}.cb-mode-tag.numbers{color:var(--ember);border-color:var(--ember);background:rgba(232,115,74,.08)}.cb-mode-tag.words{color:var(--gold);border-color:var(--gold);background:rgba(212,168,83,.08)}.cb-lobby-rules{border-top:1px solid var(--border-dim);padding:1rem 1.5rem;background:var(--surface-low);display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap}.cb-rule-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.cb-rule-icon{font-size:1.1rem}.cb-rule-label{font-size:.68rem;color:var(--text-dim);letter-spacing:.04em;text-align:center}.cb-keyboard{padding:.8rem .5rem .4rem;border-top:1px solid var(--border-dim);background:var(--surface-low)}.cb-kb-row{display:flex;justify-content:center;gap:4px;margin-bottom:4px}.cb-kb-key{background:#222218;border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:1rem;padding:.4rem .75rem;border-radius:3px;cursor:pointer;min-width:1.9rem;text-align:center;letter-spacing:0;transition:background .15s,color .15s;text-transform:uppercase}.cb-kb-key.bull{background:rgba(232,115,74,.25);border-color:var(--ember);color:var(--ember)}.cb-kb-key.cow{background:rgba(212,168,83,.2);border-color:var(--gold);color:var(--gold)}.cb-kb-key.miss{background:#141410;border-color:#1e1e18;color:var(--text-ghost)}.cb-kb-key.wide{min-width:2.6rem;font-size:.65rem}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.85);opacity:0}70%{transform:scale(1.04)}to{transform:scale(1);opacity:1}}.cb-lobby-card{animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards}@media (max-width:480px){.cb-lobby-title{font-size:2.2rem}.cb-mode-btn{padding:1.5rem 1rem}.cb-lobby-rules{gap:1.5rem}}.cb-numpad{padding:.75rem 1rem 1rem;border-top:1px solid var(--border-dim);background:var(--surface-low)}.cb-numpad .cb-kb-row{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.cb-numpad .cb-kb-row:last-child{margin-bottom:0}.cb-num-key{width:3.6rem;height:3.2rem;border-radius:var(--radius-md);border:1px solid var(--border);background:#222218;color:var(--text);font-family:var(--font-mono);font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,transform .08s;user-select:none}.cb-num-key:active{transform:scale(.93)}.cb-num-key.bull{background:rgba(232,115,74,.25);border-color:var(--ember);color:var(--ember)}.cb-num-key.cow{background:rgba(212,168,83,.2);border-color:var(--gold);color:var(--gold)}.cb-num-key.miss{background:#141410;border-color:#1e1e18;color:var(--text-ghost)}.cb-num-action{width:calc((5 * 3.6rem + 4 * 10px) / 2 - 5px);background:var(--surface);border-color:var(--border);color:var(--text-dim);font-size:.9rem;letter-spacing:.04em}.cb-num-action:hover{background:hsla(0,0%,100%,.04);color:var(--text)}.cb-boxes--inline{display:flex;margin:0;gap:0}.cb-boxes--inline .cb-box{width:2.6rem;height:2.8rem;font-size:1.35rem;margin:0 3px}