/* Interactive lessons (public/js/yamato-learn.js). The board or the cards on
   the left, the lesson on the right; on a phone the board comes first and the
   lesson follows, with its buttons kept in reach at the foot of the screen. */
#ya-learn { --yl-ink: #233c49; --yl-muted: #6f7268; --yl-line: #e3dccb; --yl-paper: #fffdf7; --yl-gold: #c9a55c; --yl-ok: #2f6b4f; --yl-warn: #a8781c; }
.yl-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; margin: 0 0 10px; }
.yl-progress { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e9e3d4; overflow: hidden; }
.yl-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #c9a55c, #a4823f); border-radius: inherit; transition: width .35s ease; }
.yl-progress-count { font-size: 13px; color: var(--yl-muted); font-variant-numeric: tabular-nums; }
.yl-chapter-select { display: none; }
.yl-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.yl-chapter { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px 6px 10px; border-radius: 18px; border: 1px solid var(--yl-line); background: var(--yl-paper); color: var(--yl-muted); font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.yl-chapter:hover { border-color: #cfc3a6; color: var(--yl-ink); }
.yl-chapter.is-current { border-color: var(--yl-ink); background: var(--yl-ink); color: #fff8e7; }
.yl-chapter-tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; flex: 0 0 16px; position: relative; }
.yl-chapter.is-done .yl-chapter-tick { background: var(--yl-ok); border-color: var(--yl-ok); opacity: 1; }
.yl-chapter.is-done .yl-chapter-tick::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.yl-chapter.is-current .yl-chapter-tick { opacity: 1; }

.yl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 18px; align-items: start; }
.yl-stage { position: relative; min-height: 420px; display: grid; place-items: center; padding: 18px; border-radius: 12px; background: linear-gradient(180deg, #1f3a47, #172c37); box-shadow: inset 0 0 0 1px #c9a55c33, inset 0 0 50px #0a1c2650; overflow: hidden; }
.yl-stage[data-surface="felt"] { background: linear-gradient(#19392bcc, #0a2620ee), url('/images/art/materials/felt.webp') center/cover; }
.yl-stage[data-surface="indigo"] { background: linear-gradient(125deg, #163c52cc, #122b47ee), url('/images/art/materials/felt.webp') center/cover; }
.yl-stage.is-finish { min-height: 320px; }
.yl-finish-mark span { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; border: 2px solid #c9a55c; color: #f3e2b8; font: 700 54px/1 var(--ya-font-mincho, serif); box-shadow: 0 0 0 8px #c9a55c1f; }

.yl-panel { position: sticky; top: calc(var(--ya-header-h, 62px) + 14px); background: var(--yl-paper); border: 1px solid var(--yl-line); border-radius: 12px; padding: 20px 20px 16px; box-shadow: 0 4px 18px #2a302a0c; }
.yl-kicker { font-size: 12px; letter-spacing: .1em; color: #8a7d61; margin: 0 0 6px; }
.yl-title { font-family: var(--ya-font-mincho, serif); font-size: 22px; line-height: 1.45; color: var(--yl-ink); margin: 0 0 10px; outline: none; }
.yl-body p { font-size: 15px; line-height: 1.85; color: #3f4b47; margin: 0 0 10px; }
.yl-body b, .yl-body strong { color: var(--yl-ink); }
.yl-body .yl-key { display: inline-block; padding: 0 6px; border-radius: 4px; background: #f1ebdc; border: 1px solid #e2d8c2; font-size: .92em; }
.yl-goal { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 0; padding: 11px 13px; border-radius: 9px; background: #fbf4e2; border: 1px solid #ecdcb4; font-size: 14.5px; line-height: 1.65; color: var(--yl-ink); }
.yl-goal:empty, .yl-goal.is-read { display: none; }
.yl-goal-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #8c6b2a; }
.yl-note { min-height: 0; margin: 10px 0 0; font-size: 14px; line-height: 1.7; border-radius: 9px; }
.yl-note:not(:empty) { padding: 10px 13px; background: #f3efe5; color: #4b5651; }
.yl-note.is-ok { background: #e8f2ea; color: #23523b; }
.yl-note.is-retry { background: #fbeee6; color: #8a3b1e; }
.yl-note.is-hint { background: #eef1f6; color: #2b4157; }
.yl-actions { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.yl-actions .btn { min-height: 44px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.yl-actions .btn[hidden] { display: none; }
.yl-next { justify-self: end; min-width: 120px; }
.yl-next:disabled { opacity: .45; cursor: default; }
.yl-next.is-ready { box-shadow: 0 0 0 3px #c9a55c55; }
.yl-finish-actions { display: grid; gap: 8px; margin-top: 14px; }
.yl-finish-actions .btn { min-height: 46px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.yl-restart { margin-top: 12px; background: none; border: 0; color: var(--yl-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 0; }

/* Shared pieces the lessons draw on the stage. */
.yl-caption { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border-radius: 14px; background: #0c1c24cc; color: #f3e6c6; font-size: 13px; white-space: nowrap; pointer-events: none; }
.yl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.yl-pick { cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; border-radius: 6px; }
.yl-pick:hover { transform: translateY(-4px); }
.yl-pick:focus-visible { outline: 3px solid #e6c479; outline-offset: 3px; }
.yl-pick.is-picked { transform: translateY(-8px); box-shadow: 0 0 0 3px #e6c479, 0 8px 16px #0006; }
.yl-pick.is-right { box-shadow: 0 0 0 3px #6fc08c, 0 8px 16px #0006; }
.yl-pick.is-wrong { animation: yl-shake .32s; box-shadow: 0 0 0 3px #e07a5f; }
.yl-pick.is-dim { opacity: .4; }
@keyframes yl-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.yl-label { color: #f3e6c6; font-size: 13px; text-align: center; margin-top: 6px; }
.yl-group { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff14; }
.yl-group.is-picked { background: #e6c4791f; border-color: #e6c479; }
.yl-check { margin-top: 14px; min-height: 42px; }

@media (max-width: 1023px) {
  .yl-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .yl-panel { position: static; }
}
@media (max-width: 640px) {
  .yl-chapters { display: none; }
  .yl-chapter-select { display: block; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--yl-line); background: var(--yl-paper); color: var(--yl-ink); max-width: 46vw; }
  .yl-stage { min-height: 300px; padding: 10px; border-radius: 10px; }
  .yl-panel { padding: 16px 14px 12px; border-radius: 10px; }
  .yl-title { font-size: 19px; }
  .yl-body p { font-size: 14.5px; line-height: 1.8; }
  /* The buttons stay at the foot of the screen while the lesson is read. */
  .yl-actions { position: sticky; bottom: 0; margin: 14px -14px -12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#fffdf700, var(--yl-paper) 18%); grid-template-columns: auto auto auto minmax(0, 1fr); }
  .yl-actions .btn { padding: 8px 10px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .yl-progress-bar, .yl-pick { transition: none; } .yl-pick.is-wrong { animation: none; } }

/* A board fits the screen height as well as the column width. */
.yl-stage > .yl-board { width: min(100%, 560px, calc((100dvh - var(--ya-header-h, 62px) - 120px) * .72)); }
/* Lessons that need no pieces in hand hide the stands, so the board can be larger. */
.yl-board.no-stands .sg-stand { display: none; }
@media (max-width: 640px) {
  /* On a phone the words come first, the board right under them, and the
     buttons stay fixed at the foot of the screen. */
  .yl-layout { display: flex; flex-direction: column; align-items: stretch; }
  .yl-panel { order: -1; }
  .yl-stage > .yl-board { width: 100%; }
  .yl-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fffdf7f2; border-top: 1px solid var(--yl-line); box-shadow: 0 -6px 18px #1c281f14; backdrop-filter: blur(6px); }
  #ya-learn { padding-bottom: 76px; }
}
/* Narrow phones: the four buttons share the bar without overlapping. */
@media (max-width: 360px) {
  .yl-actions { gap: 6px; }
  .yl-actions .btn { padding: 8px 8px; font-size: 13px; }
  .yl-next { min-width: 0; }
}
/* Moving to a step lands the progress bar just below the sticky header. */
#ya-learn { scroll-margin-top: calc(var(--ya-header-h, 62px) + 10px); }
/* On a phone the learner is looking at the board, below the lesson text, when
   feedback arrives; it is shown just above the button bar instead. */
@media (max-width: 640px) {
  .yl-note:not(:empty) { position: fixed; left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 31; margin: 0; box-shadow: 0 6px 18px #1c281f2e; border: 1px solid #00000010; max-height: 34vh; overflow: auto; }
  .yl-note.is-ok:not(:empty) { background: #e8f2ea; } .yl-note.is-retry:not(:empty) { background: #fbeee6; } .yl-note.is-hint:not(:empty) { background: #eef1f6; }
}