.bb-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.bb-play{min-width:0}
.bb-slots{display:flex;justify-content:center;gap:10px;margin:4px 0 16px}
.bb-slot{display:grid;place-items:center;width:58px;height:68px;border:2px solid var(--border);border-radius:12px;background:var(--paper);font:800 32px var(--mono)}
.bb-slot.current{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bb-slot.filled{background:var(--surface)}
.bb-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:340px;margin:0 auto}
.bb-keypad button{height:52px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font:700 20px var(--mono)}
.bb-keypad button:hover:not(:disabled){border-color:var(--accent)}
.bb-keypad button.used{background:var(--accent-soft);color:var(--accent)}
.bb-keypad button.crossed{text-decoration:line-through;color:var(--muted);opacity:.55}
.bb-keypad .bb-erase{font-family:inherit;font-size:14px;font-weight:600}
.bb-keypad .bb-submit{grid-column:span 2;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-family:inherit;font-size:16px;font-weight:700}
.bb-play .message{text-align:center;margin:0 0 12px}
.bb-memo{margin:20px auto 0;max-width:340px}
.bb-memo h3{font-size:14px;margin:0 0 2px}
.bb-memo p{font-size:12px;color:var(--muted);margin:0 0 8px}
.bb-memo-digits{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.bb-memo-digits button{height:34px;border:1px solid var(--border);border-radius:8px;font:600 14px var(--mono);background:var(--paper)}
.bb-memo-digits button[aria-pressed="true"]{text-decoration:line-through;color:var(--muted);background:var(--border)}

.bb-log-box{min-width:0}
.bb-log-box h3{display:flex;justify-content:space-between;font-size:15px;margin:0 0 10px}
.bb-log-box h3 span{font:12px var(--mono);color:var(--muted)}
.bb-log{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bb-log li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--paper)}
.bb-turn{font:12px var(--mono);color:var(--muted)}
.bb-guess{font:700 20px var(--mono);letter-spacing:6px}
.bb-verdict{font:700 14px var(--mono);padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.bb-verdict.out{background:var(--border);color:var(--muted)}
.bb-verdict.win{background:var(--accent);color:var(--accent-ink)}
.bb-grid{display:inline-block;margin:12px 0 0;font-size:18px;line-height:1.35;letter-spacing:2px;font-family:inherit}

.example-line code{font:700 20px var(--mono);letter-spacing:4px}
.example-line strong{font-family:var(--mono);color:var(--accent)}

@media(max-width:820px){
  .bb-layout{grid-template-columns:1fr;gap:22px}
}
@media(max-width:420px){
  .bb-slot{width:50px;height:60px;font-size:28px}
}