/* Hanafuda lessons (public/js/learn-hanafuda.js). The stage is the game's
   green cloth; tables are drawn with the game's own .hf-seat / .hf-field /
   .hf-pile classes, and this file only sizes them for a lesson and adds the
   quiz pieces. Cards are kept large enough to read the art on a phone. */
.ylh { width: 100%; display: grid; gap: 14px; justify-items: center; align-content: center; }
.ylh .hf-xl { --hf-w: 128px; }
.ylh .yl-pick.is-picked { transform: translateY(-6px); }
.ylh .hf-card.is-right { box-shadow: 0 0 0 3px #6fc08c, 0 8px 16px #0006; }
.ylh .hf-card.is-dim { opacity: .38; }
.ylh-caption { max-width: 560px; padding: 7px 14px; border-radius: 16px; background: #0c1c24b8; color: #f3e6c6; font-size: 13.5px; line-height: 1.6; text-align: center; }
.ylh-question { font-size: 15px; background: #0c1c24cc; border: 1px solid #e6c47933; }
.ylh-question b { color: #f5d98c; }

/* ----------------------------------------------------------- the table */
.ylh-table { width: 100%; max-width: 760px; display: grid; gap: 9px; container-type: inline-size; }
/* Card size follows the table's own width, so a narrower desktop column
   (1280 wide, sidebar open) still fits a field of six in one row. */
.ylh-table > * { --ylh-cw: clamp(46px, 9.4cqi, 70px); }
.ylh-table .hf-md { --hf-w: var(--ylh-cw); }
.ylh-table .hf-sm { --hf-w: 40px; }
/* A seat puts its hand and its captures side by side when there is room. */
.ylh-table .hf-seat { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 8px 10px; gap: 6px 14px; }
.ylh-table .hf-seat-head { flex: 1 0 100%; }
.ylh-table .hf-seat > .hf-hand { flex: 0 1 auto; }
.ylh-table .hf-seat > .hf-pile { flex: 1 1 240px; }
.ylh-table .hf-hand { min-height: 0; gap: 6px; align-items: flex-start; }
.ylh-opp-hand .hf-card + .hf-card { margin-left: -22px; }
.ylh-table .hf-field { padding: 10px 12px 12px; min-height: 0; }
.ylh-table .hf-field-label { margin-bottom: 8px; }
.ylh-field-body { display: flex; align-items: center; gap: 14px; }
.ylh-field-body .hf-field-row { flex: 1 1 auto; gap: 7px; align-items: flex-start; min-height: calc(var(--ylh-cw, 64px) * 1.667); }
.ylh-field-row-empty { min-height: 60px; }
.ylh-pile-empty { color: #f2ead880; font-size: 12.5px; align-self: center; padding: 6px 2px; }
.ylh-table .hf-pile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 9px; min-height: 40px; }
.ylh-table .hf-pile .ylh-chips { flex: 1 0 100%; }
.ylh-table .hf-pile-kind { width: auto; min-width: 40px; flex: 0 0 auto; font-size: 11.5px; color: #f2ead8b0; }
.ylh-table .hf-pile-group.is-stacked .hf-card + .hf-card { margin-left: -24px; }
.ylh-table .hf-pile-group.is-stacked .hf-card:hover { margin-right: 0; }
.ylh-chips { margin-top: 2px; }
.ylh-hide-chips .ylh-chips, .ylh-hide-chips .hf-seat-points { visibility: hidden; }
/* Larger piles where the pile itself is the lesson. */
.ylh-yaku-board .hf-pile .hf-sm { --hf-w: 46px; }
.ylh-yaku-board .hf-pile .hf-md { --hf-w: 58px; }
.ylh-yaku-board .hf-field-label { color: #f2ead8b0; }

/* The draw pile: a short stack, glowing when it is the thing to tap. */
.ylh-deck { position: relative; flex: 0 0 auto; width: var(--ylh-cw); min-height: calc(var(--ylh-cw) * 1.667); border-radius: 6px; }
.ylh-deck .hf-card { --hf-w: var(--ylh-cw); box-shadow: 2px 2px 0 #2a1d12, 4px 4px 0 #120c08, 6px 8px 12px #0006; }
.ylh-deck.is-live { cursor: pointer; }
.ylh-deck.is-live .hf-card { box-shadow: 0 0 0 3px #e6c479, 2px 2px 0 #2a1d12, 4px 4px 0 #120c08, 6px 10px 16px #0007; animation: ylh-bob 1.3s ease-in-out infinite; }
.ylh-deck.is-live:focus-visible { outline: 3px solid #e6c479; outline-offset: 5px; }
@keyframes ylh-bob { 50% { transform: translateY(-5px); } }

/* A card laid on the one it captures, a moment before both are taken. */
.ylh-stack { position: relative; flex: 0 0 auto; }
.ylh-stack .ylh-on-top { position: absolute; left: 30%; top: 22%; z-index: 3; box-shadow: 0 0 0 2px #e6c479, 0 10px 18px #0008; }
.ylh-loose { box-shadow: 0 0 0 3px #e6c479, 0 10px 18px #0008; transform: translateY(-6px); }
.ylh-table .hf-would-take { outline: 3px solid #f2cf7a; outline-offset: 2px; transform: translateY(-4px); }
.ylh-table .hf-matchable { cursor: pointer; }
.ylh-table .hf-card.is-right { box-shadow: 0 0 0 3px #6fc08c, 0 8px 16px #0006; }
.ylh-tagged { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 7px; border-radius: 9px; background: #2f6b4f; color: #fff; font-size: 11px; line-height: 1.4; white-space: nowrap; box-shadow: 0 2px 6px #0006; }

/* --------------------------------------------------- quiz pieces */
.ylh-picks { max-width: 720px; gap: 10px; }
.ylh-picks .hf-md { --hf-w: 70px; }
.ylh-picks .hf-lg { --hf-w: 86px; }
.ylh-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; }
.ylh-choice { min-height: 44px; min-width: 92px; padding: 8px 16px; border-radius: 22px; border: 1px solid #e6c47966; background: #fff8e7; color: #233c49; font: 600 15px/1.3 inherit; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; }
.ylh-choice:hover:not(:disabled) { background: #fff; box-shadow: 0 0 0 3px #e6c47966; }
.ylh-choice:active:not(:disabled) { transform: translateY(1px); }
.ylh-choice:focus-visible { outline: 3px solid #e6c479; outline-offset: 2px; }
.ylh-choice.is-right { background: #2f6b4f; color: #fff; border-color: #6fc08c; box-shadow: 0 0 0 3px #6fc08c66; }
.ylh-choice.is-wrong { animation: yl-shake .32s; background: #fbeee6; border-color: #e07a5f; }
.ylh-choice:disabled:not(.is-right) { opacity: .45; cursor: default; }
.ylh-series { display: grid; gap: 14px; justify-items: center; width: 100%; }
.ylh-dots { display: flex; gap: 7px; }
.ylh-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffffff38; }
.ylh-dot.is-current { background: #fff; box-shadow: 0 0 0 3px #ffffff40; }
.ylh-dot.is-done { background: #e6c479; }
.ylh-big { display: grid; place-items: center; min-height: calc(128px * 1.667); }
.ylh-next-q { min-height: 42px; min-width: 120px; }
.ylh-qcards { gap: 6px; }
.ylh-qcards .hf-sm { --hf-w: 44px; }
.ylh-kind-choices .ylh-choice { min-width: 110px; }
.ylh-fig { margin: 0; display: grid; justify-items: center; gap: 4px; }
.ylh-fig .yl-label { margin: 0; font-size: 12.5px; }

/* ---------------------------------------------------------- welcome */
.ylh-fan { display: flex; justify-content: center; padding: 26px 0 8px; }
.ylh-fan .hf-card { --hf-w: 108px; margin: 0 -14px; transform: rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 5px)); transform-origin: 50% 120%; animation: ylh-fan-in .7s ease backwards; animation-delay: calc((var(--i) + 2) * 90ms); }
@keyframes ylh-fan-in { from { opacity: 0; transform: translateY(30px); } }

/* --------------------------------------------------------- anatomy */
.ylh-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; counter-reset: ylh; max-width: 760px; }
.ylh-legend li { counter-increment: ylh; color: #f3e6c6; font-size: 13px; }
.ylh-legend li::before { content: counter(ylh); display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 6px; border-radius: 50%; background: #e6c479; color: #2a2010; font-size: 11.5px; font-weight: 700; }
.ylh-anatomy .hf-seat-opponent::before, .ylh-anatomy .hf-field::before, .ylh-anatomy .hf-seat-you::before { position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e6c479; color: #2a2010; font-size: 12px; font-weight: 700; left: -9px; top: -9px; box-shadow: 0 2px 6px #0007; }
.ylh-anatomy .hf-seat, .ylh-anatomy .hf-field { position: relative; }
.ylh-anatomy .hf-seat-opponent::before { content: '1'; }
.ylh-anatomy .hf-field::before { content: '2'; }
.ylh-anatomy .hf-seat-you::before { content: '3'; }

/* ---------------------------------------------------------- months */
.ylh-month-detail { display: grid; gap: 10px; justify-items: center; min-height: 230px; }
.ylh-month-title { color: #f3e6c6; font: 600 18px/1.3 var(--ya-font-mincho, serif); }
.ylh-month-title b { color: #f5d98c; }
.ylh-month-detail .yl-row { gap: 12px; }
.ylh-month-detail .hf-lg { --hf-w: 88px; }
.ylh-month-note { max-width: 520px; margin: 0; color: #f3e6c6d9; font-size: 13px; line-height: 1.6; text-align: center; }
.ylh-month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 720px; }
.ylh-month-tile { display: grid; justify-items: center; gap: 5px; padding: 8px 4px 6px; border-radius: 9px; border: 1px solid #ffffff1c; background: #ffffff0d; color: #f3e6c6; cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
.ylh-month-tile:hover { background: #ffffff1a; }
.ylh-month-tile.is-picked { background: #e6c47924; border-color: #e6c479; }
.ylh-month-tile:focus-visible { outline: 3px solid #e6c479; outline-offset: 2px; }
.ylh-mini-fan { display: flex; }
.ylh-mini-fan .hf-card { --hf-w: 28px; box-shadow: 0 1px 2px #0007; }
.ylh-mini-fan .hf-card + .hf-card { margin-left: -12px; }
.ylh-month-name { font-size: 12px; line-height: 1.3; white-space: nowrap; }

/* ----------------------------------------------------------- kinds */
.ylh-kinds { gap: 9px; }
.ylh-kind { width: 100%; max-width: 740px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: #0a241e40; border: 1px solid #f1e0b51c; }
.ylh-kind-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; color: #f3e6c6; }
.ylh-kind-head b { font: 700 17px/1.2 var(--ya-font-mincho, serif); }
.ylh-kind-count { grid-column: 2; font-size: 12px; color: #f3e6c6b0; }
.ylh-kind-swatch { grid-row: span 2; width: 14px; height: 30px; border-radius: 4px; }
.ylh-kind-bright .ylh-kind-swatch { background: #d4a017; }
.ylh-kind-animal .ylh-kind-swatch { background: #a3243b; }
.ylh-kind-ribbon .ylh-kind-swatch { background: #2f5fa8; }
.ylh-kind-chaff .ylh-kind-swatch { background: #8a8577; }
.ylh-kind-cards { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ylh-kind-cards .hf-sm { --hf-w: 40px; }
.ylh-more { color: #f3e6c6; font-size: 18px; padding: 0 4px; }

/* ---------------------------------------------- groups and hands */
.ylh-groups, .ylh-hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 740px; }
.ylh-hands { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
.ylh-group, .ylh-handopt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; justify-items: start; gap: 6px 10px; padding: 10px 12px; color: #f3e6c6; font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.ylh-group:hover, .ylh-handopt:hover { background: #ffffff1a; }
.ylh-group:focus-visible, .ylh-handopt:focus-visible { outline: 3px solid #e6c479; outline-offset: 2px; }
.ylh-group.is-wrong, .ylh-handopt.is-wrong { animation: yl-shake .32s; border-color: #e07a5f; }
.ylh-group.is-picked, .ylh-handopt.is-picked { background: #2f6b4f55; border-color: #6fc08c; }
.ylh-group-letter { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff1f; font-weight: 700; font-size: 13px; }
.ylh-group.is-picked .ylh-group-letter, .ylh-handopt.is-picked .ylh-group-letter { background: #6fc08c; color: #10301f; }
.ylh-group-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.ylh-group-cards .hf-sm { --hf-w: 46px; }
.ylh-handopt .ylh-group-cards .hf-sm { --hf-w: 40px; }
.ylh-group-score { font-size: 13px; color: #f5d98c; min-height: 1.4em; }

/* ----------------------------------------------- koi-koi decision */
.ylh-decision { max-width: 460px; padding: 18px 20px; }
.ylh-decision h3 { font-size: 23px; margin: 0 0 4px; }
.ylh-decision .hf-decision-yaku { margin-bottom: 14px; }
.ylh-decision.is-closed button:not(.is-chosen) { opacity: .45; }
.ylh-decision button.is-chosen { box-shadow: 0 0 0 3px #e6c479; }
.ylh-decision button.is-wrong { animation: yl-shake .32s; }
.ylh-decision .hf-btn-koikoi, .ylh-decision .hf-btn-shobu { min-height: 52px; }
.ylh-shout { top: 38%; }
.ylh-scenario, .ylh-practice, .ylh-decide-demo { position: relative; }

/* ---------------------------------------------------------- dealer */
.ylh-duel { display: flex; gap: 26px; justify-content: center; }
.ylh-duel .hf-lg { --hf-w: 92px; }

.ylh-status { min-height: 1.6em; }
.ylh-status:empty { visibility: hidden; }

/* ------------------------------------------------------------ deal */
.ylh-deal .hf-field-row { min-height: calc(var(--ylh-cw, 64px) * 1.667); }

/* ---------------------------------------------------------- phones */
@media (max-width: 640px) {
  .ylh { gap: 11px; }
  .ylh .hf-xl { --hf-w: 112px; }
  .ylh-big { min-height: calc(112px * 1.667); }
  .ylh-table { gap: 7px; }
  .ylh-table .hf-md { --hf-w: clamp(46px, calc((100vw - 92px) / 6), 58px); }
  .ylh-table .hf-sm { --hf-w: 34px; }
  .ylh-table .hf-seat { padding: 6px 7px; }
  .ylh-table .hf-field { padding: 8px; }
  .ylh-field-body { gap: 8px; align-items: flex-start; }
  .ylh-field-body .hf-field-row { gap: 5px; justify-content: flex-start; }
  .ylh-deck, .ylh-deck .hf-card { width: 44px; --hf-w: 44px; min-height: 0; }
  .ylh-opp-hand .hf-card + .hf-card { margin-left: -20px; }
  .ylh-table .hf-pile-kind { min-width: 30px; font-size: 10.5px; }
  .ylh-table .hf-pile-group.is-stacked .hf-card + .hf-card { margin-left: -20px; }
  .ylh-yaku-board .hf-pile .hf-sm { --hf-w: 38px; }
  .ylh-yaku-board .hf-pile .hf-md { --hf-w: 50px; }
  .ylh-picks { gap: 8px; }
  .ylh-picks .hf-md { --hf-w: clamp(50px, calc((100vw - 84px) / 5), 64px); }
  .ylh-picks .hf-lg { --hf-w: clamp(56px, calc((100vw - 90px) / 4), 78px); }
  .ylh-choice { min-width: 0; padding: 8px 13px; font-size: 14px; }
  .ylh-fan .hf-card { --hf-w: 70px; margin: 0 -11px; }
  .ylh-month-detail { min-height: 0; }
  .ylh-month-detail .yl-row { gap: 7px; }
  .ylh-month-detail .hf-lg { --hf-w: clamp(56px, calc((100vw - 100px) / 4), 76px); }
  .ylh-month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .ylh-month-tile { padding: 6px 2px 5px; }
  .ylh-mini-fan .hf-card { --hf-w: 22px; }
  .ylh-mini-fan .hf-card + .hf-card { margin-left: -10px; }
  .ylh-month-name { font-size: 11px; }
  .ylh-kind { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 7px 8px; }
  .ylh-kind-head { grid-template-columns: auto auto 1fr; }
  .ylh-kind-swatch { grid-row: auto; height: 14px; }
  .ylh-kind-count { grid-column: auto; }
  .ylh-kind-cards .hf-sm { --hf-w: clamp(26px, calc((100vw - 110px) / 10), 34px); }
  .ylh-kind-cards { gap: 3px; }
  .ylh-groups { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ylh-group, .ylh-handopt { padding: 8px 9px; gap: 4px 8px; }
  .ylh-group-cards .hf-sm { --hf-w: 40px; }
  /* A dealt hand wraps into two rows of four so the cards stay legible. */
  .ylh-handopt .ylh-group-cards { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; }
  .ylh-handopt .ylh-group-cards .hf-sm { --hf-w: clamp(34px, calc((100vw - 130px) / 4.6), 46px); }
  .ylh-duel .hf-lg { --hf-w: 78px; }
  .ylh-decision { padding: 14px 12px; }
  .ylh-decision h3 { font-size: 20px; }
  .ylh-decision .hf-btn-koikoi, .ylh-decision .hf-btn-shobu { min-width: 0; flex: 1 1 0; padding: 10px 12px; font-size: 16px; }
  .ylh-caption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ylh-fan .hf-card, .ylh-deck.is-live .hf-card { animation: none; }
}