/* Golden Knight Chess - lesson dialog styles. Everything is scoped under #lesson-dialog. */
#lesson-dialog {
  --gl-navy: #17355b;
  --gl-navy-2: #244f87;
  --gl-muted: #4a6282;
  --gl-ivory: #fffaf0;
  --gl-ivory-2: #f5ecd6;
  --gl-gold: #edb832;
  --gl-gold-2: #f7d774;
  --gl-gold-ink: #7a4f00;
  --gl-light: #ecf7ff;
  --gl-dark: #7cadd9;
  --gl-ring: #1f5fd1;
  box-sizing: border-box;
  width: min(600px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: linear-gradient(170deg, #fffdf7 0%, var(--gl-ivory) 55%, #fbf1d9 100%);
  color: var(--gl-navy);
  border: 2px solid #ecd28f;
  border-radius: 24px;
  box-shadow: 0 30px 90px #0f264a59, 0 0 0 6px #fff8e6b3;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
}
#lesson-dialog::backdrop { background: #10284a8c; backdrop-filter: blur(6px); }
#lesson-dialog *, #lesson-dialog *::before, #lesson-dialog *::after { box-sizing: border-box; }

#lesson-dialog .gl-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 22px; }

/* Top row: progress + skip */
#lesson-dialog .gl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#lesson-dialog .gl-progress { display: flex; align-items: center; gap: 12px; min-width: 0; }
#lesson-dialog .gl-dots { display: flex; gap: 8px; }
#lesson-dialog .gl-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #d9e3ef; box-shadow: inset 0 0 0 2px #b7c7da; transition: width .25s, background .25s; }
#lesson-dialog .gl-dots i.gl-past { background: var(--gl-navy-2); box-shadow: none; }
#lesson-dialog .gl-dots i.gl-now { width: 30px; border-radius: 6px; background: linear-gradient(90deg, var(--gl-gold), var(--gl-gold-2)); box-shadow: inset 0 0 0 2px #c7911a; }
#lesson-dialog .gl-count { font-size: 15px; font-weight: 700; color: var(--gl-muted); white-space: nowrap; }

/* Buttons (ID scope beats the game's global button rules) */
#lesson-dialog button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transform: none; }
#lesson-dialog button:hover:not(:disabled), #lesson-dialog button:active:not(:disabled) { transform: none; }
#lesson-dialog button:focus-visible { outline: 3px solid var(--gl-ring); outline-offset: 3px; }
#lesson-dialog .gl-skip {
  min-height: 44px; min-width: 64px; padding: 8px 16px; border-radius: 12px;
  background: transparent; border: 2px solid transparent; color: var(--gl-muted);
  font-size: 16px; font-weight: 700;
}
#lesson-dialog .gl-skip:hover { background: #17355b0f; color: var(--gl-navy); }

/* Copy */
#lesson-dialog .gl-copy { display: flex; flex-direction: column; gap: 4px; }
#lesson-dialog .gl-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gl-gold-ink); }
#lesson-dialog h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; font-weight: 800; color: var(--gl-navy); }
#lesson-dialog h2:focus, #lesson-dialog h2:focus-visible { outline: none; }
#lesson-dialog #gl-text { margin: 2px 0 0; font-size: 17px; line-height: 1.5; color: #2f4868; }

/* Board */
#lesson-dialog .gl-board-wrap {
  position: relative; align-self: center;
  width: min(100%, 440px, max(288px, calc(100dvh - 385px)));
  padding: 8px; border-radius: 16px;
  background: linear-gradient(140deg, #ffffff, #eaf6ff 48%, #ffffff);
  box-shadow: 0 6px 0 #85b3d9, 0 14px 30px #427ba533, inset 0 0 0 2px #fff;
}
#lesson-dialog .gl-board {
  display: grid; grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1;
  border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px #6899c838;
}
#lesson-dialog .gl-row { display: grid; grid-template-columns: repeat(8, 1fr); min-height: 0; }
#lesson-dialog .gl-sq {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0;
  width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: linear-gradient(145deg, #ffffff8f, transparent 65%), var(--gl-light);
  color: var(--gl-navy); isolation: isolate; overflow: visible;
}
#lesson-dialog .gl-sq.gl-dark { background: linear-gradient(145deg, #ffffff35, transparent 70%), var(--gl-dark); }
#lesson-dialog .gl-sq:focus-visible { outline: 3px solid var(--gl-ring); outline-offset: -3px; z-index: 8; }
#lesson-dialog .gl-sq.gl-last { box-shadow: inset 0 0 0 3px #e3b33fe6, inset 0 0 16px #f6cf6e73; }
#lesson-dialog .gl-sq.gl-selected { background: #84dcec; box-shadow: inset 0 0 0 3px #1674cb; }

/* Move markers */
#lesson-dialog .gl-sq.gl-dot::after,
#lesson-dialog .gl-sq.gl-capture::after,
#lesson-dialog .gl-sq.gl-fusion::after,
#lesson-dialog .gl-sq.gl-gold::after,
#lesson-dialog .gl-sq.gl-gold-capture::after { content: ''; position: absolute; border-radius: 50%; z-index: 4; pointer-events: none; }
#lesson-dialog .gl-sq.gl-dot::after { width: 26%; height: 26%; background: #1b5ca488; border: 2px solid #ffffffb3; }
#lesson-dialog .gl-sq.gl-capture::after { width: 88%; height: 88%; border: 4px solid #2766bcc0; }
#lesson-dialog .gl-sq.gl-fusion::after { width: 92%; height: 92%; border: 3px dashed #fff19b; box-shadow: 0 0 12px #ffcb42, inset 0 0 12px #ffcb42; animation: gl-spin 6s linear infinite; }
#lesson-dialog .gl-sq.gl-gold::after { width: 32%; height: 32%; background: radial-gradient(circle at 40% 35%, #fff8d8, #f2c04a 62%, #c98f1c); border: 2px solid #fff6d6; box-shadow: 0 0 10px #f3c24fd9; animation: gl-pulse 1.3s ease-in-out infinite; }
#lesson-dialog .gl-sq.gl-gold-capture::after { width: 88%; height: 88%; border: 4px solid #e9b23c; box-shadow: 0 0 12px #f3c24f99, inset 0 0 10px #f3c24f66; }
#lesson-dialog .gl-sq.gl-hint { box-shadow: inset 0 0 0 4px var(--gl-gold), inset 0 0 18px #f7d774; animation: gl-hint 1.4s ease-in-out infinite; }

/* Pieces: art from piece-art.js when present, glyph fallback otherwise */
#lesson-dialog .gl-piece {
  position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%;
  font: 400 clamp(30px, 8.4vw, 46px)/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
  pointer-events: none; user-select: none; filter: drop-shadow(0 2px 1px #14233655);
}
#lesson-dialog .gl-piece.gl-w { color: #fff; -webkit-text-stroke: 1px #5d86ab; }
#lesson-dialog .gl-piece.gl-b { color: #1e4d92; -webkit-text-stroke: 1px #1b3b6f; }
#lesson-dialog .gl-piece.gl-golden { color: #f9c52d; -webkit-text-stroke: 1px #986313; filter: drop-shadow(0 0 4px #f1b929aa); }
#lesson-dialog .gl-piece.gl-art { position: absolute; inset: 0; font-size: 0; -webkit-text-stroke: 0; color: transparent; }
#lesson-dialog .gl-piece.gl-art.gl-golden { filter: drop-shadow(0 1px .7px #362005d9) drop-shadow(0 0 1.4px #fff6cfe8) drop-shadow(0 0 3.4px #e4b84ea6); }
#lesson-dialog .gl-piece svg { display: block; width: 100%; height: 100%; max-width: none; }
#lesson-dialog .gl-sq.gl-selected .gl-piece { transform: translateY(-2px); }
#lesson-dialog .gl-piece.gl-pop { animation: gl-pop .9s cubic-bezier(.2, .7, .3, 1.2) both; }
#lesson-dialog .gl-star { position: absolute; right: 4%; top: 2%; z-index: 6; font-size: 14px; line-height: 1; color: #fff5bd; text-shadow: 0 1px 2px #7d550a; pointer-events: none; }

/* Celebration burst */
#lesson-dialog .gl-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 10; }
#lesson-dialog .gl-burst span { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, #fff3bf, var(--gl-gold)); box-shadow: 0 0 8px #f3c24f; opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
#lesson-dialog.gl-won .gl-burst span { animation: gl-burst 1.1s cubic-bezier(.15, .7, .3, 1) var(--d) both; }

/* Status line */
#lesson-dialog .gl-status {
  margin: 0; min-height: 52px; padding: 12px 14px; border-radius: 14px;
  font-size: 17px; font-weight: 650; line-height: 1.4; color: var(--gl-navy);
  background: #eef4fb; border: 2px solid #d6e3f2;
}
#lesson-dialog .gl-status.gl-tone-nudge { background: #fff4de; border-color: #f0cf8c; color: #5b3d00; }
#lesson-dialog .gl-status.gl-tone-hint { background: #fff1c9; border-color: var(--gl-gold); color: #4d3300; }
#lesson-dialog .gl-status.gl-tone-gold { background: #fff7dd; border-color: #f0cf6e; color: #5b3d00; }
#lesson-dialog .gl-status.gl-tone-win { background: linear-gradient(100deg, #fff3c4, #ffe7a0); border-color: var(--gl-gold); color: #3f2a00; }
#lesson-dialog .gl-status.gl-tone-win::before { content: '\2726  '; color: #b67d05; }

/* Navigation */
#lesson-dialog .gl-nav { display: flex; gap: 12px; }
#lesson-dialog .gl-nav button { flex: 1; min-height: 52px; padding: 10px 18px; border-radius: 14px; font-size: 17px; font-weight: 750; }
#lesson-dialog .gl-back { background: #fff; color: var(--gl-navy); border: 2px solid #c9d6e6; }
#lesson-dialog .gl-back:hover:not(:disabled) { border-color: var(--gl-navy-2); }
#lesson-dialog .gl-back:disabled { opacity: .45; cursor: default; }
#lesson-dialog .gl-next { background: var(--gl-navy); color: #fffaf0; border: 2px solid var(--gl-navy); box-shadow: 0 4px 0 #0c2140; }
#lesson-dialog .gl-next:hover { background: var(--gl-navy-2); }
#lesson-dialog .gl-next.gl-ready { background: linear-gradient(180deg, #f9d977, var(--gl-gold)); color: #2b1d00; border-color: #c7911a; box-shadow: 0 4px 0 #a8750f, 0 0 18px #f3c24f99; animation: gl-ready 1.8s ease-in-out infinite; }

@keyframes gl-spin { to { transform: rotate(360deg); } }
@keyframes gl-pulse { 50% { transform: scale(1.18); } }
@keyframes gl-hint { 50% { box-shadow: inset 0 0 0 4px #f7d774, inset 0 0 26px #f3c24f; } }
@keyframes gl-pop { 0% { transform: scale(.55); filter: drop-shadow(0 0 0 #f3c24f); } 55% { transform: scale(1.18); filter: drop-shadow(0 0 14px #f3c24f); } 100% { transform: scale(1); } }
@keyframes gl-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(1) rotate(200deg); } }
@keyframes gl-ready { 50% { box-shadow: 0 4px 0 #a8750f, 0 0 28px #f3c24fcc; } }

/* Phones: full-screen sheet, board edge to edge so squares stay near 44px */
@media (max-width: 480px) {
  #lesson-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  #lesson-dialog .gl-inner { gap: 10px; padding: 10px 4px 14px; min-height: 100%; }
  #lesson-dialog .gl-top, #lesson-dialog .gl-copy, #lesson-dialog .gl-status, #lesson-dialog .gl-nav { margin: 0 10px; }
  #lesson-dialog h2 { font-size: 24px; }
  #lesson-dialog #gl-text { font-size: 16px; }
  #lesson-dialog .gl-status { font-size: 16px; }
  #lesson-dialog .gl-board-wrap { width: 100%; padding: 0; border-radius: 10px; box-shadow: 0 4px 0 #85b3d9; background: none; }
  #lesson-dialog .gl-nav { margin-top: auto; position: sticky; bottom: 0; z-index: 12; padding: 8px 0 6px; background: linear-gradient(180deg, #fbf1d900, #fbf1d9 30%); }
}
/* Short phones (e.g. 360x640): tighter copy so board, status and buttons fit on one screen */
@media (max-width: 480px) and (max-height: 760px) {
  #lesson-dialog .gl-inner { gap: 6px; padding: 4px 4px 4px; }
  #lesson-dialog .gl-eyebrow { display: none; }
  #lesson-dialog h2 { font-size: 22px; }
  #lesson-dialog #gl-text { font-size: 16px; line-height: 1.4; margin: 0; }
  #lesson-dialog .gl-status { min-height: 0; padding: 8px 12px; line-height: 1.35; }
  #lesson-dialog .gl-nav { padding: 6px 0 4px; }
  #lesson-dialog .gl-nav button { min-height: 48px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #lesson-dialog *, #lesson-dialog *::before, #lesson-dialog *::after { animation: none !important; transition: none !important; }
  #lesson-dialog.gl-won .gl-burst span { opacity: 0; }
}