.hands-focus .scenario-picker { display: none; }
.tabs { flex-wrap: wrap; gap:4px; }
.tabs .tab { padding:9px 10px; }
.hand-heading, .hand-section-head, .hand-tile-top, .hand-tile-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hand-heading { margin-bottom:28px; }
.hand-heading > div { min-width:0; }
.hand-heading h2 { overflow-wrap:anywhere; }
.hand-heading > button, .hand-section-head > button { flex-shrink:0; }
.hand-muted { color:var(--muted); font-size:.88rem; }
.hand-toolbar { display:flex; align-items:end; gap:16px; margin-bottom:24px; }
.hand-toolbar > label:first-child { flex:1; }
.hand-toolbar #hand-count { padding-bottom:12px; }
.hand-toolbar label, .hand-dialog label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted); }
.hand-toolbar input, .hand-toolbar select, .hand-dialog input, .hand-dialog select, .hand-dialog textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); }
.hand-dialog textarea { resize:vertical; }
.hand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.hand-tile { display:flex; flex-direction:column; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-decoration:none; transition:border-color .15s, background .15s; min-width:0; }
.hand-tile:hover { border-color:var(--green); background:var(--surface-2); }
.hand-tile h3, .hand-material h3 { overflow-wrap:anywhere; }
.hand-tile-lesson { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.hand-tile-footer { border-top:1px solid var(--line); padding-top:16px; margin-top:auto; font-size:.8rem; color:var(--muted); }
.hand-tile-footer > span:last-child { color:var(--green); white-space:nowrap; }
.hand-status { display:inline-block; width:fit-content; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.76rem; color:var(--muted); }
.hand-status-analysed { color:var(--green); background:var(--green-dark); }
.hand-status-needs_custom { color:var(--amber); border-color:#6a5433; }
.hand-status-in_review { color:var(--blue); }
.hand-cards { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin:22px 0; }
.hand-cards > div { display:flex; gap:5px; flex-wrap:wrap; }
.hand-card { display:inline-flex; align-items:center; justify-content:center; gap:3px; width:43px; height:57px; border-radius:7px; background:#f0f3ed; color:#153025; border-bottom:3px solid #a7b9ac; font-size:1.35rem; font-weight:750; }
.hand-card small { font-size:1rem; }
.hand-card.red-suit { color:#b5313c; }
.hand-board .hand-card { background:#dce7df; }
.hand-back { display:inline-block; margin-bottom:24px; color:var(--green); text-decoration:none; }
.hand-overview { padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:16px; margin-bottom:28px; }
.hand-facts { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:.9rem; overflow-wrap:anywhere; }
.hand-lesson { margin-top:22px; border-left:3px solid var(--green); padding:4px 0 4px 18px; }
.hand-prose { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.hand-history { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.hand-history summary { cursor:pointer; color:var(--muted); }
.hand-history pre { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-size:.85rem; }
.hand-study-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; }
.hand-section-head { margin-bottom:16px; }
.hand-section-head h3 { margin:0; }
.hand-material { border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; background:var(--surface); min-width:0; }
.hand-material .eyebrow { font-size:.65rem; }
.hand-material-links { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.hand-material-links:empty { display:none; }
.hand-material-links a { text-decoration:none; display:inline-block; }
.hand-text-button { border:0; padding:5px 0; background:transparent; color:var(--green); cursor:pointer; font-size:.83rem; }
.hand-placeholder { border:1px dashed var(--line); border-radius:12px; padding:28px 20px; color:var(--muted); font-size:.9rem; }
.hand-empty { grid-column:1/-1; padding:50px 24px; }
.hand-dialog { width:min(720px,calc(100vw - 24px)); max-height:90vh; padding:26px; overflow-y:auto; }
.hand-dialog h2 { font-size:1.6rem; }
.hand-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hand-full { grid-column:1/-1; }
.hand-form-error { color:var(--red); white-space:pre-wrap; margin-top:16px; }
.hand-form-error:empty { display:none; }
.hand-dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.hand-return { margin-bottom:18px; color:var(--green); }
.hand-return[hidden] { display:none; }
.hr-replay { border:1px solid #34584e; border-radius:20px; overflow:hidden; background:linear-gradient(145deg,#172922,#101c19); margin-bottom:24px; }
.hr-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 30px; border-bottom:1px solid #345044; }
.hr-intro h3 { font-size:1.6rem; margin:0 0 8px; }
.hr-intro p:last-child { margin:0; color:var(--muted); font-size:.88rem; }
.hr-result { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.hr-result span,.hr-result small { color:var(--muted); font-size:.78rem; }
.hr-result strong { color:#a0e2b4; font-size:2rem; line-height:1.3; }
.hr-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.85fr); }
.hr-layout > div:first-child { min-width:0; padding:12px 18px 18px; }
.hr-table { position:relative; height:455px; max-width:680px; margin:auto; }
.hr-felt { position:absolute; inset:68px 42px; border:7px solid #34574b; border-radius:48%; background:radial-gradient(ellipse,#214a3b,#173a2e); box-shadow:inset 0 0 35px #081c17,0 8px 24px #08120d; }
.hr-center { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:64%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hr-center > span { color:#b5cdbd; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; }
.hr-center > strong { background:#10241c; padding:5px 13px; border-radius:16px; font-size:.9rem; }
.hr-board,.hr-hole { display:flex; gap:4px; justify-content:center; }
.hr-no-board { font-size:.75rem; color:#9eb9aa; padding:12px 0; }
.hr-seat { position:absolute; transform:translate(-50%,-50%); width:116px; min-height:72px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border:1px solid #4a6255; border-radius:12px; background:#14251e; box-shadow:0 5px 12px #09110d66; }
.hr-seat-name { font-size:.76rem; font-weight:750; letter-spacing:.04em; display:flex; align-items:center; gap:6px; }
.hr-seat-name i { font-style:normal; border-radius:50%; width:17px; height:17px; background:#e5d9ad; color:#332c18; display:grid; place-items:center; font-size:.62rem; }
.hr-seat > strong { font-size:1.08rem; }
.hr-seat > small { font-size:.67rem; color:#abc2b2; text-align:center; }
.hr-seat.hr-folded { background:#15211c; border-style:dashed; color:#99a49d; }
.hr-seat.hr-folded > small { color:#8e9a93; }
.hr-seat.hr-hero { border:2px solid #96d9ab; background:#203b2c; z-index:1; }
.hr-seat.hr-acting { box-shadow:0 0 0 3px #8bd0a833; }
.hr-hole .hand-card { width:34px; height:43px; font-size:1.15rem; }
.hr-hole .hand-card small { font-size:.9rem; }
.hr-controls { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:12px; max-width:600px; margin:auto; }
.hr-controls button { padding:10px 0; min-height:42px; }
.hr-caption { display:flex; flex-direction:column; align-items:center; text-align:center; min-height:50px; }
.hr-caption span { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.hr-caption strong { font-size:.88rem; }
.hr-jumps { display:flex; justify-content:center; gap:7px; margin-top:12px; flex-wrap:wrap; }
.hr-jumps button { border:1px solid #3b5448; background:transparent; color:#c1d5c7; padding:6px 14px; border-radius:20px; font-size:.75rem; cursor:pointer; }
.hr-jumps button[aria-pressed=true] { background:#304f3a; border-color:#96d9ab; color:#d8f3df; }
.hr-table-note { color:var(--muted); font-size:.7rem; line-height:1.5; text-align:center; max-width:420px; margin:14px auto 0; }
.hr-action-list { border-left:1px solid #345044; padding:26px 24px; background:#0c171348; }
.hr-action-list h4 { display:flex; gap:12px; align-items:center; margin:16px 0 8px; font-size:.92rem; }
.hr-action-list ol { list-style:none; padding:0; margin:0; border-left:1px solid #345b47; }
.hr-action-list li { margin:0; }
.hr-action-list li button { width:100%; display:block; text-align:left; padding:7px 12px; margin-left:-1px; border:0; border-left:2px solid transparent; border-radius:0 5px 5px 0; background:transparent; color:#bbcabf; font-size:.83rem; cursor:pointer; }
.hr-action-list li button:hover { background:#21392c; }
.hr-action-list li .hr-your-action { color:#d5f6df; font-weight:700; }
.hr-action-list li .hr-current { background:#294a35; border-left-color:#abdf9f; color:#f0f8f2; }
.hr-inline-board { display:flex; gap:3px; }
.hr-inline-board .hand-card { width:25px; height:33px; border-radius:4px; font-size:.85rem; gap:1px; }
.hr-inline-board .hand-card small { font-size:.66rem; }
.hr-settlement { display:flex; flex-direction:column; gap:5px; border-top:1px solid #345044; margin-top:20px; padding-top:16px; font-size:.9rem; }
.hr-settlement span { color:var(--muted); font-size:.76rem; }
@media(max-width:1050px) {
  .hr-layout { grid-template-columns:1fr; }
  .hr-action-list { border-left:0; border-top:1px solid #345044; display:grid; grid-template-columns:1fr 1fr; column-gap:28px; }
  .hr-action-list > .eyebrow,.hr-settlement { grid-column:1/-1; }
}
@media(max-width:520px) {
  .hr-intro { padding:20px 16px; align-items:start; gap:10px; }
  .hr-intro h3 { font-size:1.15rem; }
  .hr-intro .eyebrow { font-size:.6rem; }
  .hr-result strong { font-size:1.5rem; }
  .hr-result small { font-size:.66rem; }
  .hr-layout > div:first-child { padding:6px 8px 16px; }
  .hr-table { height:400px; }
  .hr-felt { inset:65px 22px; border-width:5px; }
  .hr-seat { width:86px; padding:8px 3px; }
  .hr-seat-name { font-size:.64rem; }
  .hr-seat > small { font-size:.6rem; }
  .hr-center { width:65%; }
  .hr-board .hand-card { width:31px; height:43px; font-size:1.1rem; }
  .hr-board .hand-card small { font-size:.8rem; }
  .hr-action-list { grid-template-columns:1fr; padding:18px; }
  .hr-table-note { padding:0 14px; }
}
.hand-dialog :focus-visible, #hands-view :focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media(max-width:760px) {
  .hand-grid, .hand-study-layout { grid-template-columns:1fr; }
  .hand-toolbar { flex-wrap:wrap; }
  .hand-toolbar > label { flex:1 1 180px; }
  .hand-heading { align-items:start; }
  .hand-section-head { gap:8px; flex-wrap:wrap; }
  .hand-overview, .hand-tile { padding:18px; }
  .hand-form-grid { grid-template-columns:1fr; }
  .hand-dialog { padding:18px; }
  .hand-dialog h2 { font-size:1.3rem; }
}
@media(max-width:620px) {
  .tabs { flex-wrap:nowrap; }
}

.hr-starting-stacks { display:flex; flex-wrap:wrap; gap:8px 18px; padding:14px 30px; border-bottom:1px solid #345044; font-size:.76rem; color:#b9cbbf; }
.hr-starting-stacks > span:first-child { color:var(--muted); }
.hr-starting-stacks b { color:#e0eae3; font-weight:600; }
.hr-loss strong { color:#f59ca0; }
@media(max-width:520px) { .hr-starting-stacks { padding:14px 16px; gap:8px 12px; } .hr-starting-stacks > span:first-child { width:100%; } }