/* The trainer. Uses the site's tokens from the layout; the felt is the only dark surface. */
.tr-top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:18px 0 10px}
.tr-top .hole{display:flex;gap:6px;align-items:center;font-weight:600}
.tr-top .hole label{border:1.5px solid var(--rule);border-radius:999px;padding:4px 12px;cursor:pointer}
.tr-top .hole input{margin-right:6px}
#tr-hud{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
#tr-hud b{color:var(--ink);font-family:var(--display);font-size:1rem}
#tr-hud b.up{color:var(--green)}#tr-hud b.down{color:var(--red)}
#tr-setup{border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin:10px 0 16px;background:var(--tint)}
#tr-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:8px}
.tr-type{display:grid;grid-template-columns:22px 1fr;gap:6px 10px;align-items:start;background:#fff;border:1.5px solid var(--rule);border-radius:10px;padding:10px 12px;cursor:pointer}
.tr-type.on{border-color:var(--green)}
.tr-type b{font-weight:800}.tr-type small{grid-column:2;color:var(--muted);line-height:1.35}
#tr-type-note{color:var(--green);font-weight:600;margin-top:8px;min-height:1.4em}
#tr-table{background:radial-gradient(ellipse at 50% 40%,#c4302a,#a3241d 60%,#7a1a15);border:10px solid #4a2f25;border-radius:160px;padding:22px 26px;color:#fff;display:grid;gap:12px;justify-items:center;box-shadow:0 18px 40px rgba(13,59,46,.3)}
#tr-table .lbl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
#tr-table .board{display:flex;gap:6px}
#tr-potline{display:flex;gap:14px;align-items:center;font-weight:800}
#tr-potline span{background:rgba(0,0,0,.35);border-radius:999px;padding:3px 12px}
.pc{display:inline-grid;place-items:center;width:44px;height:62px;border-radius:6px;background:#fff;color:#171a17;font-weight:800;font-size:1.1rem;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.pc i{font-style:normal;font-size:1.2rem;display:block}
.pc.r{color:#d0261a}
.pc.back{background:#2b3d8f;border:2px solid #fff;box-shadow:inset 0 0 0 4px #2b3d8f,inset 0 0 0 5px #9fb0e8}
#tr-seats{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.tr-seat{border:1.5px solid var(--rule);border-radius:10px;padding:8px 10px;display:grid;gap:2px;position:relative;background:#fff;min-width:0}
.tr-seat b{font-weight:800;font-size:.95rem}.tr-seat .stack{color:var(--muted);font-size:.9rem}.tr-seat .last{color:var(--green);font-size:.85rem;font-weight:600;min-height:1.2em}
.tr-seat.act{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,50,31,.2)}
.tr-seat.out{opacity:.5}
.tr-seat.me{border-color:var(--green);background:var(--tint)}
.tr-seat .btnmark{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#171a17;font-weight:800;font-size:.75rem;display:grid;place-items:center}
.tr-seat .show{display:flex;gap:2px;margin-top:4px}
.tr-seat .show .pc{width:26px;height:36px;font-size:.75rem}.tr-seat .show .pc i{font-size:.8rem}
#tr-hero{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:16px 0 6px}
#tr-hero .lbl{font-weight:800}
#tr-hero-cards{display:flex;gap:6px}
#tr-hero-cards .pc{width:52px;height:74px;font-size:1.25rem}
#tr-actions{display:none;gap:8px;flex-wrap:wrap;margin:10px 0}
#tr-actions.on{display:flex}
#tr-actions .btn{font-size:.98rem;padding:10px 16px}
#tr-actions .btn.fold{background:#fff;color:var(--ink);border-color:var(--rule)}
#tr-actions .btn.fold:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#tr-actions .btn.call{background:var(--green);border-color:var(--green)}
#tr-next{margin:10px 0}
#tr-coach{margin:12px 0;min-height:1.5em}
.tr-wait{color:var(--muted);font-weight:600}
.tr-verdict{border-radius:10px;padding:10px 14px;font-weight:600;margin-bottom:8px}
.tr-verdict.ok{background:var(--tint);color:var(--green-deep);border-left:5px solid var(--green)}
.tr-verdict.bad{background:#fdecea;color:#7a1a15;border-left:5px solid var(--red)}
#tr-coach ul{margin:6px 0;padding-left:20px}
.col{display:inline-block;border-radius:999px;padding:0 9px;font-size:.8rem;font-weight:800;color:#fff;vertical-align:1px}
.col.red{background:#e0321f}.col.orange{background:#e8891d}.col.yellow{background:#d8b020;color:#171a17}.col.grey{background:#8a8578}
#tr-log{border:1px solid var(--rule);border-radius:10px;padding:8px 12px;max-height:220px;overflow:auto;font-size:.92rem;background:#fff}
.tr-line{padding:2px 0;border-bottom:1px dashed var(--rule)}
.tr-line.title{font-weight:700;color:var(--green)}
.tr-line.me{font-weight:700}
.tr-line.up{color:var(--green);font-weight:800}.tr-line.down{color:var(--red);font-weight:800}
#tr-lock{background:var(--green);color:#fff;border-radius:14px;padding:22px 24px;margin:14px 0;display:grid;gap:10px}
#tr-lock h3{color:var(--gold);margin:0}
#tr-lock a.btn{justify-self:start}
.tr-keys{color:var(--muted);font-size:.85rem}
@media (max-width:640px){#tr-table{border-radius:40px;padding:14px 10px;border-width:6px}.pc{width:36px;height:52px;font-size:.95rem}.pc i{font-size:1rem}#tr-hero-cards .pc{width:42px;height:60px}
/* phones: the opponents become one scrolling strip so the boards, your hand and the buttons stay together */
#tr-seats{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scroll-snap-type:x proximity}.tr-seat{flex:0 0 112px;scroll-snap-align:start;padding:6px 8px}.tr-seat b{font-size:.85rem}.tr-seat .stack,.tr-seat .last{font-size:.8rem}.tr-seat .show .pc{width:20px;height:28px;font-size:.6rem}.tr-seat .show .pc i{font-size:.65rem}}
.tr-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 6px}
#tr-actions{margin:0}
#play{margin-top:34px}
#play #tr-table{margin-top:6px}