/* ========== TEACH ME + LEARN TO PLAY (render/coach.js) ==========
   Build 21 (docs/TABLE_LAYOUT.md): Coach is one line in the top rail
   (#coach-slot inside .top-chrome), so public/clearance.js measures it into
   --chrome-h and the table sits below it: it never covers the hand, the
   trick, the bid controls or a seat. Its details open in a sheet (the same
   sheet as Table Talk) that the player closes. Same visual language as the
   sheets and dialogs: dark panel, gold accents, 44px targets. */

#coach-slot:empty { display: none; }

.coach {
  margin: 0;
  padding: 4px 12px;
  background: rgba(6, 18, 12, 0.72);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
}

.coach-body { max-width: 1180px; margin: 0 auto; }

/* The tip: exactly one line (the details are a tap away). Its height is
   inside the border, so the buttons in it are the full 44 px. */
.coach-strip {
  box-sizing: content-box;
  display: flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid rgba(227, 181, 74, 0.38);
  border-radius: 14px;
  background: rgba(16, 36, 26, 0.82);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.coach-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.coach-open:hover { background: rgba(255, 255, 255, 0.05); }
.coach-badge {
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: -5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(227, 181, 74, 0.16);
  color: var(--gold-strong);
  font-size: 15px;
}
.coach-prompt {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}
/* The tip's instruction is never cut off (R-014): on a small phone, where
   a long one doesn't fit, it takes two smaller lines in the same 44 px strip. */
@media (max-width: 389px) {
  .coach-body:not(.coach-lesson) .coach-prompt {
    white-space: normal;
    text-overflow: clip;
    font-size: 0.84rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
/* Build 26: the same at any width when the suggestion is a meld-phase word
   ("Play It Out", "Forfeit", "Agree", "Override") or any long one (a clause the
   server adds later, shown whole), so the chip never takes the instruction's
   room. */
.coach-body:not(.coach-lesson) .coach-open.has-wide-chip .coach-prompt {
  white-space: normal;
  text-overflow: clip;
  font-size: 0.84rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.coach-open.has-wide-chip .coach-suggest { font-size: 0.8rem; }
/* Build 28 (ISSUES row 107): an instruction that still does not fit (a larger text size, a long one) takes up to
   three lines and the strip grows with it, instead of ending in an ellipsis (render/coach.js fitCoachPrompt).
   The top rail is measured into --chrome-h, so the table below gives up the room and nothing is covered. */
.coach-strip.is-tall { height: auto; min-height: 44px; }
.coach-strip.is-tall .coach-open { padding-top: 5px; padding-bottom: 5px; }
.coach-body:not(.coach-lesson) .coach-strip.is-tall .coach-prompt {
  white-space: normal;
  text-overflow: clip;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.coach-suggest {
  flex: none;
  color: var(--gold-strong);
  font-size: 0.9rem;
  white-space: nowrap;
}
.coach-suggest-label { color: var(--text-dim); font-size: 0.8rem; }
.coach-suggest.suit-H b, .coach-suggest.suit-D b { color: #ff9a8c; }
.coach-more { flex: none; margin-left: auto; color: var(--text-dim); font-size: 1.2rem; line-height: 1; }
.coach-off {
  flex: none;
  width: 44px;
  border: 0;
  border-left: 1px solid rgba(227, 181, 74, 0.22);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.coach-off:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

/* The details sheet (chat.js buildSheet 'tips'): the tip, why, the rule,
   notes, words, Rules & Strategy and the off switch. */
.coach-sheet .sheet-body { overflow-y: auto; overscroll-behavior: contain; }
.coach-detail {
  padding: 12px 16px 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  user-select: text;
  -webkit-user-select: text;
}
.coach-now-prompt { margin: 0 0 6px; font-size: 1rem; }
.coach-sec { margin: 0 0 12px; }
.coach-sec:last-child { margin-bottom: 0; }
.coach-sec h3 { margin: 0 0 3px; color: var(--gold); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.coach-sec p { margin: 0; }
.coach-sec dl { margin: 0; }
.coach-sec dt { color: var(--gold); font-size: 0.82rem; font-weight: 600; margin-top: 5px; }
.coach-sec dd { margin: 0; font-size: 0.88rem; }
.coach-phase-rules { padding-top: 10px; border-top: 1px solid var(--panel-border); }
.coach-phase-rules ul { padding-left: 18px; margin: 4px 0 0; }
.coach-phase-rules li { margin-bottom: 4px; }
.coach-sheet-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.coach-sheet-foot .btn { width: auto; min-height: 44px; flex: 1 1 140px; }

.coach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.coach-chip:hover, .coach-chip[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-strong); }

/* The table menu's Coach switch. */
.menu-item.toolbar-teach { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-state { color: var(--text-dim); font-size: 0.85em; font-weight: 700; }
.menu-state.is-on { color: var(--gold-strong); }

/* Glossary popover. */
.coach-pop {
  position: fixed;
  z-index: var(--z-overlay);
  padding: 12px 14px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  user-select: text;
  -webkit-user-select: text;
}
.coach-pop-term { display: block; color: var(--gold); margin-bottom: 3px; }
.coach-pop-text { margin: 0 0 8px; }
.coach-pop-close {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
}

/* Lesson card (view.lesson), build 24 (docs/GUIDANCE_DESIGN.md §3.2): the
   coach card — a deep felt panel with a satin gold hairline, an eyebrow,
   the chapter rail, a serif title, one lead line, a picture of real cards,
   the gold Why, and Tell Me More for the rest. Capped at about a third of
   the window so the table keeps its room. */
.coach-lesson, .coach-lesson-pill .coach-strip {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 48, 36, 0.97), rgba(16, 36, 26, 0.97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.coach-lesson::before, .coach-lesson-pill .coach-strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-strong) 50%, var(--gold) 82%, transparent);
  pointer-events: none;
}
.coach-lesson-pill .coach-strip { border-radius: 14px; }
.coach-lesson {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  max-height: min(40dvh, 420px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* A computer's window (F-002): the open card (Tell Me More too) takes no
   more than the room above the table's 400 px least height and the hand
   rail, less the top bar; its body scrolls, the page never does. */
@media (min-width: 1024px) and (min-height: 761px) {
  body.at-table .coach-lesson { max-height: min(40dvh, 420px, max(200px, calc(100dvh - var(--hand-h, 0px) - 412px - 88px))); }
}
.coach-lesson.is-new { animation: coach-card-in 0.45s var(--ease-out) both; }
@keyframes coach-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* The words scroll; Got It stays in view. */
.coach-lesson-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 0 1 auto; padding: 12px 16px 0; }
.coach-lesson-head { display: flex; align-items: center; gap: 8px; height: 28px; }
.coach-lesson-step { flex: 1; color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-lesson-min {
  width: 44px;
  height: 44px;
  margin-right: -12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.coach-lesson-min:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.coach-lesson-title { margin: 0 0 4px; font: 700 1.3rem/1.2 ui-serif, "New York", Georgia, "Times New Roman", serif; color: var(--text); }
.coach-lesson-lead { margin: 0; font-size: 1rem; line-height: 1.38; user-select: text; -webkit-user-select: text; }
.coach-lesson-body { margin-top: 10px; }
.coach-lesson-body p { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.42; color: rgba(238, 243, 239, 0.92); user-select: text; -webkit-user-select: text; }
.coach-lesson-actions { display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; }
.coach-lesson-gap { flex: 1; }
.coach-lesson-actions .btn { width: auto; min-width: 104px; min-height: 44px; border-radius: 22px; }
.coach-lesson-more { min-height: 44px; color: var(--gold-strong); font-weight: 600; }
.coach-stop { min-height: 44px; min-width: 44px; color: var(--text-dim); }

/* The chapter rail. */
.coach-rail { margin: 4px 0 10px; }
.coach-rail-bars { display: flex; gap: 4px; }
.coach-rail-bars span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transition: background 0.5s var(--ease-out); }
.coach-rail-bars .is-done { background: var(--gold); }
.coach-rail-bars .is-now { background: linear-gradient(90deg, var(--gold-strong) 50%, rgba(240, 198, 94, 0.3) 50%); box-shadow: 0 0 8px rgba(240, 198, 94, 0.5); }
.coach-rail-labels { display: flex; gap: 4px; margin-top: 4px; }
.coach-rail-labels span { flex: 1; text-align: center; font-size: 0.69rem; font-weight: 600; color: rgba(168, 188, 174, 0.8); white-space: nowrap; }
.coach-rail-labels .is-now { color: var(--gold-strong); }
.coach-dots { display: inline-flex; gap: 3px; margin-left: 8px; flex: none; }
.coach-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.coach-dots i.is-next { background: rgba(255, 255, 255, 0.18); }

/* A picture of real cards on its own felt. */
.coach-picture {
  margin: 12px -16px 0;
  padding: 10px 12px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 72%, rgba(35, 102, 65, 0.92), rgba(28, 82, 52, 0.55) 60%, transparent 85%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.coach-groups, .coach-trick, .coach-leadback { display: flex; align-items: flex-end; justify-content: center; gap: 24px; flex-wrap: wrap; }
.coach-trick { gap: 6px; }
.coach-leadback { align-items: center; gap: 12px; }
.coach-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.coach-fan { display: flex; padding: 6px 4px 2px; }
.coach-fan .card { margin-left: calc(var(--w) * -0.48); transform: rotate(calc(var(--t) * 4deg)); transform-origin: 50% 100%; }
.coach-lesson.is-new .coach-fan .card { animation: coach-deal 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.coach-fan .card:first-child { margin-left: 0; }
.coach-fan .card.is-ringed { box-shadow: 0 0 0 2px var(--gold-strong), 0 0 12px 1px rgba(240, 198, 94, 0.5); }
.coach-fan .card.is-lifted { translate: 0 -10px; box-shadow: 0 0 0 2.5px var(--gold-strong), 0 0 14px 2px rgba(240, 198, 94, 0.55); }
.coach-fan .card.is-dim { filter: brightness(0.6) saturate(0.7); }
@keyframes coach-deal { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.coach-card { flex: none; }
.coach-tag, .coach-tag-space { font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 10px; white-space: nowrap; }
.coach-tag { color: #1b1405; background: var(--gold-strong); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }
.coach-tag.is-dark { color: var(--gold-strong); background: rgb(8, 20, 14); border: 1px solid rgba(240, 198, 94, 0.6); } /* opaque: 4.25:1 over the picture (F-008) */
.coach-tag-space { visibility: hidden; }
.coach-ladder { display: flex; gap: 8px; justify-content: center; }
.coach-rung { width: 46px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-dim); background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.coach-rung.is-skip { color: rgba(168, 188, 174, 0.55); text-decoration: line-through; text-decoration-color: rgba(239, 125, 111, 0.85); }
.coach-rung.is-bid { color: #1b1405; background: linear-gradient(135deg, var(--gold-strong), var(--gold)); border-color: transparent; box-shadow: 0 0 14px rgba(240, 198, 94, 0.5); }
.coach-rung.is-faint { opacity: 0.55; }
.coach-rung.is-gap { width: 20px; background: none; border: 0; }
.coach-picture-cap { margin: 8px 0 0; font-size: 0.82rem; font-weight: 600; color: var(--gold-strong); text-align: center; }
.coach-picture-note, .coach-end { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.coach-end.is-gold { color: var(--gold-strong); }
.coach-arrow { color: var(--gold-strong); font-size: 1.3rem; font-weight: 800; }

/* The gold Why. */
.coach-why { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(227, 181, 74, 0.09); border: 1px solid rgba(227, 181, 74, 0.28); }
.coach-why-key { flex: none; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1b1405; background: var(--gold); border-radius: 6px; padding: 3px 6px; }
.coach-why p { margin: 0; font-size: 0.92rem; line-height: 1.38; }

/* The chapter seal (after Got It on a chapter's last card). */
.coach-celebration { align-items: center; text-align: center; padding: 12px 16px 16px; }
.coach-celebration .coach-rail { width: 100%; }
.coach-seal {
  position: relative;
  width: 64px; height: 64px;
  margin: 6px auto 10px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 30px; font-weight: 900; color: #1b1405;
  background: radial-gradient(circle at 35% 30%, #fff1c2, var(--gold-strong) 40%, #c99a33);
  box-shadow: 0 0 0 4px rgba(240, 198, 94, 0.25), 0 0 30px rgba(240, 198, 94, 0.55);
  animation: coach-seal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.coach-seal i { position: absolute; top: 10px; font-style: normal; font-size: 14px; color: var(--gold-strong); opacity: 0; animation: coach-drift 1.1s ease-out both; }
.coach-seal i.is-red { color: #ff9a8c; }
.coach-seal i:nth-child(1) { left: -46px; animation-delay: 0.10s; }
.coach-seal i:nth-child(2) { left: -24px; animation-delay: 0.15s; }
.coach-seal i:nth-child(3) { left: -2px; animation-delay: 0.20s; }
.coach-seal i:nth-child(4) { left: 52px; animation-delay: 0.25s; }
.coach-seal i:nth-child(5) { left: 74px; animation-delay: 0.30s; }
.coach-seal i:nth-child(6) { left: 96px; animation-delay: 0.35s; }
@keyframes coach-seal { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes coach-drift { 0% { opacity: 0.9; translate: 0 0; } 100% { opacity: 0; translate: 0 -26px; } }
.coach-celebration-sub { margin: 2px 0 0; color: var(--text-dim); font-size: 0.85rem; }

/* Coach's details: grouped cards on felt (Home's language). */
.coach-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.coach-detail-badge { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(227, 181, 74, 0.16); color: var(--gold-strong); font-size: 18px; flex: none; }
.coach-detail-sub { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.coach-detail-peek { margin-top: 4px; }
.coach-group { margin-top: 18px; }
.coach-group-label { margin: 0 4px 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.coach-group-card { border-radius: 20px; background: rgba(16, 36, 26, 0.82); border: 1px solid var(--panel-border); overflow: hidden; }
.coach-group-card > .coach-picture { margin: 0; }
.coach-group-text, .coach-group-card > .coach-notes, .coach-move { padding: 14px 16px; margin: 0; }
.coach-move-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.coach-move-sub { margin: 2px 0 0; color: var(--text-dim); font-size: 0.85rem; }
.coach-notes dt { color: var(--gold-strong); font-size: 0.85rem; font-weight: 600; margin-top: 10px; }
.coach-notes dt:first-child { margin-top: 0; }
.coach-notes dd { margin: 2px 0 0; font-size: 0.9rem; }
.coach-stats { display: flex; gap: 8px; margin-top: 12px; }
.coach-stat { flex: 1; padding: 10px 12px; border-radius: 16px; background: rgba(16, 36, 26, 0.82); border: 1px solid var(--panel-border); }
.coach-stat b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.coach-stat span { color: var(--text-dim); font-size: 0.78rem; font-weight: 500; }
.coach-group-card.coach-phase-rules { padding: 14px 16px; border-top: 1px solid var(--panel-border); }
.coach-suggest.is-card { display: inline-flex; align-items: center; margin-left: 2px; }

/* ---- In the table ---- */

/* Coach: the suggested card lifts; cards that would win the trick get a
   quiet green mark (never chosen for you). */
.hand .card.coach-suggested { transform: translateY(-10px); transition: transform 0.15s; }
.hand .card.coach-wins { box-shadow: 0 0 0 2px rgba(111, 207, 142, 0.75); }
/* Build 24 (ISSUES #53): the cards the lesson card shows, found in the real hand. */
#hand-slot .card.lesson-ring:not(.selected):not(.coach-suggested) { box-shadow: 0 0 0 3px var(--gold-strong), 0 0 12px 2px rgba(240, 198, 94, 0.55); }
#hand-slot .card.lesson-raise:not(.selected):not(.coach-suggested) { translate: 0 -6px; }

/* The suggested bid in the stepper, and the suggested suit in the picker. */
.stepper-value.is-suggested { color: var(--gold-strong); }
.coach-bid-tip { font-size: 0.78rem; color: var(--gold); text-align: center; }
.trump-inspect-btn.coach-suggested-suit { box-shadow: 0 0 0 2px var(--gold); }
.trump-inspect-btn.coach-suggested-suit::after {
  content: '\1F393';
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 14px;
  line-height: 1;
}
.trump-inspect-btn { position: relative; }

/* The area a lesson points at (body[data-lesson-area], set by coach.js). */
body[data-lesson-area="hand"]:not(.lesson-has-rings) #hand-slot .hand-area,
body[data-lesson-area="bid"] .bid-panel,
body[data-lesson-area="trump"] .trump-panel,
body[data-lesson-area="meld"] .meld-board,
body[data-lesson-area="trick"] .trick-area,
body[data-lesson-area="score"] .score-pills,
body[data-lesson-area="score"] .hand-summary,
body[data-lesson-area="score"] .celebration-screen {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 14px;
  /* Two gentle pulses, then it holds (build 24: a forever pulse pulled the eye from the card). */
  box-shadow: 0 0 12px 1px rgba(227, 181, 74, 0.35);
  animation: lesson-glow 1.1s ease-in-out 2;
}
@keyframes lesson-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 181, 74, 0); }
  50% { box-shadow: 0 0 18px 2px rgba(227, 181, 74, 0.45); }
}

/* Tournament: no target bar under the totals. */
.score-pill.no-target { grid-template-rows: auto; padding-bottom: 7px; }
.ctx-chip.is-hands { font-weight: 700; }

/* Learn to play dialog and the rules choices. */
.learn-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.learn-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-choice span { color: var(--text-dim); font-size: 0.82rem; }
.learn-choice.is-under { margin-left: 18px; }
.learn-choice.is-on { border-color: var(--gold); background: rgba(227, 181, 74, 0.12); }
.rules-set-picker { margin: 0 0 10px; align-self: flex-start; }
.rules-set-picker button { min-height: 44px; }

@media (max-width: 600px), (max-height: 500px) {
  .coach { padding: 4px 8px; }
  .coach-open { padding-left: 10px; gap: 6px; font-size: 0.85rem; }
  .coach-open .coach-suggest-label { display: none; }
  /* At most a third of a phone, upright too (N-003): the picture waits
     behind Tell Me More on a phone (render/coach.js compact). */
  .coach-lesson { max-height: min(33dvh, 320px); }
  .coach-rail { margin-bottom: 8px; }
  .coach-lesson-title { font-size: 1.15rem; }
  .coach-lesson-lead { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hand .card.coach-suggested { transition: none; }
  /* Motion becomes fades: the card, the deal-in and the seal only fade. */
  .coach-lesson.is-new { animation: coach-fade 0.2s ease-out both; }
  .coach-lesson.is-new .coach-fan .card { animation: coach-fade 0.2s ease-out both; animation-delay: 0s; }
  .coach-seal { animation: coach-fade 0.25s ease-out both; }
  .coach-seal i { display: none; }
  .coach-rail-bars span { transition: none; }
  body[data-lesson-area="hand"] #hand-slot .hand-area,
  body[data-lesson-area="bid"] .bid-panel,
  body[data-lesson-area="trump"] .trump-panel,
  body[data-lesson-area="meld"] .meld-board,
  body[data-lesson-area="trick"] .trick-area,
  body[data-lesson-area="score"] .score-pills,
  body[data-lesson-area="score"] .hand-summary,
  body[data-lesson-area="score"] .celebration-screen { animation: none; }
}

/* Phones on their side: the table has little height, so the tip is slimmer. */
@media (max-height: 500px) {
  .coach { padding: 2px 8px; }
  /* 44 px, the tap floor (N-008: the ✕ was 40×34). */
  .coach-strip { height: 44px; }
  .coach-off { width: 44px; }
}

/* A phone on its side (N-001, N-002; docs/TABLE_LAYOUT.md "Lesson card vs
   center"): the folded lesson (its pill, render/coach.js) is a row under
   the top bar, centered, at most 620 px wide and 44 px tall. */
@media (max-height: 500px) and (orientation: landscape) {
  .coach[data-mode="lesson-pill"] .coach-body { max-width: 620px; }
  .coach[data-mode="lesson-pill"] .coach-strip { height: 44px; }
  /* Opened from its pill, the card is a column at the trailing edge (232
     to 320 px), and the felt centers on what is left (as the app). */
  body.at-table:has(#coach-slot .coach[data-mode="lesson"]) { --lesson-w: clamp(232px, 36vw, 320px); }
  #coach-slot:has(> .coach[data-mode="lesson"]) {
    position: fixed;
    top: var(--chrome-h);
    right: 0;
    bottom: 0;
    width: var(--lesson-w, 320px);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
  }
  #coach-slot > .coach[data-mode="lesson"] { flex: 1; min-height: 0; padding: 6px; background: rgb(10, 26, 18); border-bottom: 0; border-left: 1px solid var(--panel-border); }
  #coach-slot > .coach[data-mode="lesson"] .coach-lesson { max-width: none; max-height: 100%; }
  #coach-slot > .coach[data-mode="lesson"] .coach-lesson-actions { flex-wrap: wrap; padding: 6px 10px 8px; }
  #coach-slot > .coach[data-mode="lesson"] .coach-lesson-actions .coach-gotit { order: 3; flex: 1 0 100%; }
  body.at-table:has(#coach-slot .coach[data-mode="lesson"]) #phase-root { padding-right: var(--lesson-w); }
  body.at-table:has(#coach-slot .coach[data-mode="lesson"]) #hand-slot { right: var(--lesson-w); }
}

@keyframes coach-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Learn to Play dialog (render/lobby.js), build 24 §3.5 ---- */
.learn-modal .learn-content {
  background: radial-gradient(circle 420px at 50% 0%, rgba(31, 92, 58, 0.85), transparent 420px), var(--panel) !important;
  max-width: 480px !important;
}
.learn-fan { margin: 4px auto 16px; }
.learn-title { margin: 6px 0 4px; text-align: center; font: 700 2rem/1.15 ui-serif, "New York", Georgia, "Times New Roman", serif; color: var(--text); }
.learn-sub { margin: 0 8px 16px; text-align: center; color: var(--text-dim); font-size: 0.92rem; line-height: 1.4; }
/* A plain numbered list, not tiles: the chapters are not buttons (R-062). */
.learn-chapters { list-style: none; margin: 0 4px 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.learn-chapters li { display: flex; align-items: baseline; gap: 6px; }
.learn-chapters b { color: var(--gold); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.learn-chapters span { font-weight: 600; font-size: 0.9rem; }
.learn-label { margin: 0 4px 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.learn-foot { margin: 10px 0 0; text-align: center; color: var(--text-dim); font-size: 0.8rem; }
.learn-modal .dialog-actions .btn-primary { border-radius: 24px; }

/* ---- Rules dialog (render/core.js), build 24 §3.6: illustrated cards ---- */
.rules-content .rules-card { padding: 0; border-radius: 20px; overflow: hidden; background: rgba(16, 36, 26, 0.82); border: 1px solid var(--panel-border); }
.rules-card > .coach-picture { margin: 0; min-height: 96px; }
.rules-card-body { padding: 12px 16px 14px; }
.rules-card .rules-num { margin: 0 0 2px; color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; }
.rules-content .rules-card h4 { color: var(--text); font: 700 1.15rem/1.2 ui-serif, "New York", Georgia, "Times New Roman", serif; margin-bottom: 6px; }
.rules-content .rules-card ul { padding-left: 1.1em; }

/* ---- The end of a Learn to Play game (render/summary.js), build 24 §3.7 ---- */
.first-game { margin: 0 0 6px; text-align: center; }
.first-game-eyebrow { margin: 0; color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.first-game-title { margin: 2px 0 6px; font: 700 1.35rem/1.2 ui-serif, "New York", Georgia, "Times New Roman", serif; color: var(--text); }
.first-game-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 0; }
.first-game-chips span { font-size: 0.7rem; font-weight: 600; color: var(--gold-strong); border: 1px solid rgba(240, 198, 94, 0.5); border-radius: 10px; padding: 3px 6px; animation: coach-fade 0.3s ease-out both; }

@media (max-width: 600px) {
  .learn-fan { transform: scale(0.8); transform-origin: 50% 100%; margin: -16px auto 6px; }
  .learn-title { font-size: 1.7rem; }
}

/* Short windows (an iPhone SE): the lesson card keeps its picture by
   dropping the rail's labels and tightening the type (the Why moves into
   Tell Me More, render/coach.js). */
@media (max-height: 760px) {
  /* At most a third of a short phone (R-015): the picture waits behind
     Tell Me More there (coach.js), the words scroll, Got It stays. */
  .coach-lesson { max-height: min(33dvh, 320px); }
  .coach-lesson-scroll { padding-top: 8px; }
  .coach-rail { margin: 2px 0 6px; }
  .coach-rail-labels { display: none; }
  .coach-lesson-title { font-size: 1.08rem; }
  .coach-lesson-lead { font-size: 0.9rem; line-height: 1.3; }
  .coach-picture { min-height: 0; padding: 6px 10px; margin-top: 8px; }
  .coach-tag { font-size: max(11px, 0.68rem); padding: 3px 6px; }
  .coach-rung { width: 40px; height: 32px; }
  .coach-lesson-actions { padding: 6px 16px 8px; }
}

/* ---- After the tip's ✕ (ISSUES #54): Coach Off · Undo, 4 seconds ---- */
.coach-undo .coach-strip { border-color: var(--border); }
.coach-undo-msg { cursor: default; }
.coach-undo-msg:hover { background: transparent; }
.coach-badge.is-off { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }
/* Same as the app: no divider before Undo; a 72 x 44 px target (R-112). */
.coach-undo-btn { flex: none; min-width: 72px; min-height: 44px; border: 0; background: transparent; color: var(--gold-strong); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.coach-undo-btn:hover { background: rgba(255, 255, 255, 0.06); }

/* ---- A Words chip's definition, in place under the chips (build 24) ---- */
.coach-chip[aria-expanded="true"] { background: var(--gold-strong); border-color: transparent; color: #1b1405; }
.coach-def { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 12px 8px 14px 16px; border-radius: 16px; background: rgba(227, 181, 74, 0.08); border: 1px solid rgba(227, 181, 74, 0.35); animation: coach-def-in 0.25s var(--ease-out) both; }
.coach-def-text { flex: 1; min-width: 0; }
.coach-def .coach-pop-term { display: block; margin-bottom: 4px; color: var(--gold-strong); font: 700 1.1rem/1.25 ui-serif, "New York", Georgia, "Times New Roman", serif; }
.coach-def .coach-pop-text { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.coach-def-close { flex: none; width: 44px; height: 44px; margin-top: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--text-dim); font: inherit; cursor: pointer; }
.coach-def-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
@keyframes coach-def-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .coach-def { animation: coach-fade 0.2s ease-out both; } }