/* Learn FreeCell, laid out as Branch Birds is: the stream's top row (the game's name, its button)
   over the lesson's own area, with the table laid out by learn-freecell.js in what the rows above
   and below it leave. The panel's size is game-layout.css's (data-ideal); the stage fills it. */

.game-root[data-game="learn-freecell"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, #eaf5f0 0%, #e6ecfa 55%, #f1e9f8 100%);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.lf-stage { position: absolute; inset: 0; }

/* --- the stream's row: the game's name at the left, its button at the right ------------------- */
.lf-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-align: left;
}
.lf-namerow { display: flex; align-items: baseline; gap: 10px; }
.lf-game { font-weight: 700; color: #3c4a5a; }
.lf-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.lf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--c-text-soft);
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.lf-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.lf-pill:disabled { opacity: .45; cursor: default; }
.lf-pill .lf-icon { width: 16px; height: 16px; }

/* --- the lesson's own area -------------------------------------------------------------------
   The top padding clears the row above. A vertical swipe still scrolls the page; a card acts on
   a tap. */
.lf {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 56px 12px 10px; box-sizing: border-box; overflow: hidden;
  background: #e6f2ef; text-align: left;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.lf > .lf-hud, .lf > .lf-cap { flex: none; }
.lf-hud {
  position: relative; top: -10px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 560px; color: #2f4d5a;
}
.lf-name { min-width: 0; overflow: hidden; font-weight: 800; font-size: .92rem; white-space: nowrap; text-overflow: ellipsis; }
/* learn-freecell.js keeps the table clear of these: 6px in, 42px wide, centred on half the stage. */
.lf-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: rgba(47, 77, 90, .45); cursor: pointer;
}
.lf-prev { left: 6px; }
.lf-next { right: 6px; }
.lf-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .7); color: #2f4d5a; }
.lf-arrow:disabled { cursor: default; }
.lf-arrow:disabled .lf-icon { opacity: .12; }
.lf-arrow[hidden] { display: none; }
.lf-arrow .lf-icon { width: 28px; height: 28px; stroke-width: 2.4; }
/* What the arrow does, on hover, beside it and over the table. */
.lf-tip {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  background: rgba(255, 255, 255, .96); color: #2f4d5a; font-size: .85rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(20, 40, 50, .14);
  opacity: 0; transition: opacity .15s ease;
}
.lf-prev .lf-tip { left: calc(100% + 4px); }
.lf-next .lf-tip { right: calc(100% + 4px); }
.lf-arrow:hover .lf-tip { opacity: 1; }
.lf-dots { flex: none; display: flex; gap: 7px; align-items: center; }
.lf-dots i {
  display: block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--c); background: transparent; opacity: .55;
  transition: background .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.lf-dots i.done { background: var(--c); opacity: 1; transform: scale(1.2); }

/* The table is laid out in this box; the cards themselves sit on .lf-board over the whole area. */
.lf-fit { flex: 1 1 0; min-height: 0; width: 100%; pointer-events: none; }

/* Two lines tall whatever it says, empty included: the table is laid out in what this leaves, so a
   caption that changed height would move the cards. */
.lf-cap {
  position: relative; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 0; width: 100%; max-width: 560px; padding: 0 46px;
  color: #3f5f6b; font-size: .86rem; font-weight: 600; text-align: center;
}
.lf-cap.is-warn { color: #9a5a2a; }

/* Restart and Undo, side by side in the middle under the caption, level with the speaker. */
.lf-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; }
.lf-ctrl .lf-pill {
  height: 38px; padding: 0 16px; box-sizing: border-box; border: 0;
  background: rgba(255, 255, 255, .78); color: #2f4d5a;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .18);
}
.lf-ctrl .lf-pill:hover:not(:disabled) { background: #fff; color: #2f4d5a; }
.lf-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .78); color: #2f4d5a; cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .18);
}
.lf-round:hover { background: #fff; }
.lf-round .lf-sicon { width: 22px; height: 22px; }

/* --- the table ------------------------------------------------------------------------------- */
.lf-board { position: absolute; inset: 0; z-index: 1; }
.lf-slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); box-sizing: border-box;
  border-radius: calc(var(--cw) * .1); border: 1.5px dashed rgba(47, 77, 90, .28);
  background: rgba(255, 255, 255, .28);
  display: grid; place-items: center; color: rgba(47, 77, 90, .38);
  font-size: calc(var(--cw) * .14); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.lf-slot.is-cell { border-color: rgba(70, 120, 190, .32); background: rgba(196, 220, 255, .28); color: rgba(60, 100, 160, .45); }
.lf-slot.is-home { border-color: rgba(200, 150, 60, .4); background: rgba(255, 226, 165, .28); color: rgba(170, 120, 40, .55); font-size: calc(var(--cw) * .36); }
.lf-slot.is-col { border-style: dotted; background: rgba(255, 255, 255, .16); }
.lf-slot.is-target { border-style: solid; border-color: #5cc98d; box-shadow: 0 0 0 3px rgba(92, 201, 141, .35); }
.lf-slot.is-glow { animation: lf-glow 1s ease-in-out 3; }
.lf-slot.is-hint { animation: lf-glow .9s ease-in-out 2; }
@keyframes lf-glow { 50% { box-shadow: 0 0 0 6px rgba(92, 201, 141, .45); } }

.lf-card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); box-sizing: border-box;
  border-radius: calc(var(--cw) * .1);
  background: #fff; color: #1f2430;
  box-shadow: 0 0 0 1px rgba(30, 50, 60, .22), 0 1px 3px rgba(20, 40, 50, .22);
  transition: transform .24s cubic-bezier(.3, .7, .25, 1), box-shadow .15s ease;
  cursor: pointer; overflow: hidden; will-change: transform;
  /* A card is dragged: the browser decides scroll or drag from touch-action at touch start. */
  touch-action: none;
}
.lf-board.is-instant .lf-card { transition: none; }
.lf-card.is-red { color: #cc2b2b; }
.lf-card.is-home { cursor: default; }
.lf-card.is-sel { box-shadow: 0 0 0 2.5px #5cc98d, 0 6px 14px rgba(20, 40, 50, .3); }
.lf-card.is-drag { transition: none; box-shadow: 0 0 0 2.5px #5cc98d, 0 10px 22px rgba(20, 40, 50, .35); }
.lf-card.is-fly { transition: transform .38s cubic-bezier(.4, .1, .2, 1); box-shadow: 0 8px 20px rgba(20, 40, 50, .35); }
.lf-card.is-hint { animation: lf-nudge .9s ease-in-out 2; }
@keyframes lf-nudge {
  0%, 100% { margin-top: 0; }
  30% { margin-top: calc(var(--ch) * -.1); }
  60% { margin-top: calc(var(--ch) * -.02); }
}
.lf-card.is-hop { animation: lf-nudge .9s ease-in-out 1; }
.lf-card.is-no { animation: lf-no .32s ease-out; }
@keyframes lf-no {
  25% { margin-left: -5px; } 50% { margin-left: 5px; } 75% { margin-left: -3px; } 100% { margin-left: 0; }
}
/* Rank and suit side by side: in a fanned column only the top strip of a card shows. */
.lf-corner {
  position: absolute; left: 8%; top: 2%; display: flex; align-items: baseline; gap: .1em;
  line-height: 1; font-weight: 800; font-size: calc(var(--cw) * .3); font-variant-numeric: tabular-nums;
}
.lf-corner .lf-suit { font-size: calc(var(--cw) * .27); font-weight: 400; }
.lf-pip { position: absolute; right: 7%; bottom: 3%; font-size: calc(var(--cw) * .52); line-height: 1; opacity: .9; }

/* The lesson's hand. learn-freecell.js places it with transform; the offsets put the fingertip
   (34.4% 5.9% of the icon) on the point it is moved to. */
.lf-hand {
  position: absolute; left: -16px; top: -3px; z-index: 6; pointer-events: none;
  width: 46px; aspect-ratio: 32 / 34; transform-origin: 34.4% 5.9%;
  transition: transform .9s cubic-bezier(.45, .05, .3, 1), opacity .3s ease;
}
.lf-hand[hidden] { display: none; }
.lf-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.lf-hand::before {
  content: ''; position: absolute; left: 34.4%; top: 5.9%; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(92, 201, 141, .5); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
  transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .25s ease-out, opacity .25s ease-out;
}
.lf-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* The speaker, and the dots beside it that open the menu. The dots take no room until shown
   (hover, focus, or the menu open); a screen that cannot hover shows them always, dimmer. The
   menu opens upward. */
.lf-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.lf-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(47, 77, 90, .6); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.lf-audio:hover .lf-more, .lf-audio:focus-within .lf-more, .lf-audio.is-open .lf-more { width: 30px; opacity: 1; }
@media (hover: none) { .lf-more { width: 30px; opacity: .6; } }
.lf-more .lf-sicon { width: 22px; height: 22px; }
.lf-ellipsis { stroke-width: 3.4; }
.lf-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(47, 77, 90, .18); border-radius: 12px; background: rgba(250, 253, 252, .97);
  box-shadow: 0 6px 20px rgba(20, 40, 50, .18);
}
.lf-menu[hidden] { display: none; }
.lf-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: #2f4d5a; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.lf-opt:hover, .lf-opt:focus-visible { background: rgba(47, 77, 90, .07); }
.lf-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(47, 77, 90, .22); transition: background .15s ease; }
.lf-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.lf-opt[aria-checked="true"] .lf-sw { background: #5cc98d; }
.lf-opt[aria-checked="true"] .lf-sw::after { transform: translateX(14px); }
.lf-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-cone { fill: currentColor; stroke: none; }
.lf-sound.off .lf-waves { display: none; }
.lf-sound:not(.off) .lf-slash { display: none; }
.lf-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel blurs it, and a sheet in its middle holds the card ------------- */
.lf-win { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.lf-panel {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(236, 242, 239, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  animation: lf-in .35s ease-out;
}
@keyframes lf-in { from { opacity: 0; } }
/* Centred with auto margins rather than justify-content: a sheet taller than the stage scrolls
   from its top instead of losing it. */
.lf-panel > * { flex: none; }
.lf-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.lf-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 26px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(232, 242, 236, .46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 32px rgba(15, 30, 20, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.lf-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #2f3b4a; }
/* Each letter's delay is set by learn-freecell.js. */
.lf-word { white-space: nowrap; }
.lf-ch { display: inline-block; animation: lf-wave .5s ease-in-out both; }
@keyframes lf-wave { 40% { transform: translateY(-.35em); } }
.lf-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lf-view p { margin: 0; }
.lf-view-title { font-weight: 800; color: #2f4d5a; }
.lf-view-line { color: #2f4d5a; }
.lf-view-small { font-size: .8rem; color: #8a96a3; }
.lf-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4a5766; }
.lf-ask p { margin: 0; }
.lf-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lf-mood {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-text);
  font: inherit; cursor: pointer;
}
.lf-mood:hover { border-color: var(--c-primary); }
.lf-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.lf-mood .lf-icon { width: 22px; height: 22px; }
.lf-ask .lf-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.lf-key {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px;
  border: 1px solid #c9ced8; border-bottom-width: 2px; border-radius: 5px; background: #fff;
  font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; text-align: center; color: var(--c-text);
}
.lf-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lf-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.lf-choices .lf-icon { stroke-width: 2.2; }
/* The last lesson's award: a green badge that pops in, with one shine across it. */
.lf-badge {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: linear-gradient(180deg, #ecf9f1, #d5f0df); border: 1.5px solid #8fd3a9;
  box-shadow: 0 4px 12px rgba(46, 140, 87, .18);
  color: #237a4a; font-size: 1.12rem; font-weight: 800;
  animation: lf-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.lf-badge::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-18deg); animation: lf-badge-shine .9s ease-in-out .8s both;
}
.lf-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lf-cap-top { fill: currentColor; }
@keyframes lf-badge-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes lf-badge-shine { from { left: -40%; } to { left: 120%; } }

/* The rules before the first lesson: a sentence, a small table of real cards, the scene dots. The
   table is drawn at 300x188 (MINI_W/MINI_H in learn-freecell.js) and scaled to .lf-mini's width,
   at most 420px. */
.lf-sheet.lf-intro { gap: 16px; width: min(480px, 100%); }
.lf-intro-line {
  display: flex; align-items: center; justify-content: center; min-height: 4.5em; margin: 0;
  color: #2f4d5a; font-weight: 700; line-height: 1.5; text-align: center;
}
.lf-mini { position: relative; width: 100%; max-width: 420px; height: 188px; transition: opacity .22s ease; }
.lf-mini.is-reset { opacity: 0; }
.lf-mini-in {
  position: absolute; left: 0; top: 0; width: 300px; height: 188px; transform-origin: 0 0;
  border-radius: 14px; background: #e6f2ef; box-shadow: inset 0 0 0 1px rgba(47, 77, 90, .12); overflow: hidden;
  --cw: 32px; --ch: 45px;
}
.lf-mini.is-instant .lf-card, .lf-mini.is-instant .lf-hand { transition: none; }
/* Over every card, the ones in flight included (learn-freecell.js lifts those to 60). The hand is
   smaller here; left/top keep the fingertip (34.4% 5.9% of the icon) on its point. */
.lf-mini-in .lf-hand { z-index: 100; width: 34px; left: -11.7px; top: -2.1px; }
/* The three areas, in the tints of their own slots on the real table. */
.lf-zone { position: absolute; border-radius: 10px; }
.lf-zone.is-cells { background: rgba(196, 220, 255, .45); }
.lf-zone.is-home { background: rgba(255, 226, 165, .5); }
.lf-zone.is-table { background: rgba(255, 255, 255, .45); }
.lf-zone-label {
  position: absolute; left: 8px; top: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.lf-zone.is-cells .lf-zone-label { color: rgba(60, 100, 160, .75); }
.lf-zone.is-home .lf-zone-label { color: rgba(170, 120, 40, .85); }
.lf-zone.is-table .lf-zone-label { color: rgba(47, 77, 90, .6); }
/* Positioned by transform (learn-freecell.js), so the pop animates `scale`, not `transform`. */
.lf-mini-ask {
  position: absolute; left: 0; top: 0; z-index: 90; width: 20px; height: 20px; border-radius: 50%;
  background: #2f4d5a; color: #fff; font-size: 13px; font-weight: 800; line-height: 20px; text-align: center;
  animation: lf-mini-ask-in .4s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes lf-mini-ask-in { from { opacity: 0; scale: .3; } }
.lf-steps { display: flex; gap: 8px; }
.lf-steps i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(47, 77, 90, .22); transition: background .25s ease; }
.lf-steps i.on { background: #5cc98d; }

.lf-error { margin: 12px; color: #4a5766; }

/* Embedded on a topic page, the topic's how-to link would sit on the stage's full-screen button. */
.game-root[data-game="learn-freecell"] ~ .topic-howto { display: none; }

/* The review build's tools, under the game panel and outside it. */
.lf-review {
  display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.lf-review select, .lf-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* #game-root itself is the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-ideal] panel an explicit width and height, which would beat the fallback's inset. */
#game-root.lf-fs {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 0;
  width: auto; height: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden;
}
body.lf-locked { overflow: hidden; }