/* Shared styles for the learn-engine games (Hindi Varnmala, Name It!, यह क्या है?, Where Is It?, Number Line, Measure It!, Tell the Time).
   One question at a time, big touch targets, no timers. The shell matches My Happy Calendar. */
.lg-wrap { max-width: 1000px; margin: 0 auto; padding: 0 12px; }
.lg {
  position: relative; overflow: hidden;
  height: clamp(640px, calc(100svh - 72px), 900px);
  border-radius: 28px; background: #F4FBFF; color: #1C1C1E;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.08);
  scroll-margin-top: 64px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lg button { font: inherit; color: inherit; cursor: pointer; }
.lg :focus-visible { outline: 4px solid #007AFF; outline-offset: 3px; }
.lg .lg-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; margin: 0; }
.lg-screen[hidden], .lg-over[hidden], .lg [hidden] { display: none !important; }

/* round icon buttons */
.lg-ib {
  width: 56px; height: 56px; flex: none; border: 0; border-radius: 18px; background: #fff;
  font-size: 24px; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.lg-ib[aria-pressed="true"].lg-calm { background: #E8F1FF; box-shadow: inset 0 0 0 3px #007AFF; }
.lg-lang, .lg-seg { display: flex; flex: none; background: #fff; border-radius: 18px; padding: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.lg-lang button, .lg-seg button { border: 0; background: transparent; border-radius: 13px; min-width: 60px; height: 46px; padding: 0 10px; font-weight: 800; font-size: 16px; }
.lg-lang button[aria-pressed="true"], .lg-seg button[aria-pressed="true"] { background: #0062D6; color: #fff; }
.lg-hold { position: relative; overflow: hidden; }
.lg-hold .fill { position: absolute; left: 0; bottom: 0; height: 0; width: 100%; background: rgba(0,122,255,.25); transition: height 0s; }
.lg-hold.holding .fill { height: 100%; transition: height 1.5s linear; }

/* home */
.lg-home { background: linear-gradient(180deg, #E9FAFF 0%, #FFF8EC 100%); overflow-y: auto; }
.lg-hhead { display: flex; align-items: center; gap: 8px; padding: 12px; flex-wrap: wrap; }
.lg-title { flex: 1; min-width: 170px; font-size: clamp(22px, 4.6vw, 32px); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.lg-note { margin: 0 14px 6px; font-size: 15px; color: #8A5A00; background: #FFF3CF; border-radius: 12px; padding: 8px 12px; }
.lg-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 6px 14px 18px; }
@media (min-width: 700px) { .lg-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 8px 20px 20px; } }
.lg-tile {
  position: relative; border: 0; background: #fff; border-radius: 22px; padding: 16px 10px 14px; min-height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.07); transition: transform .15s;
}
.lg-tile:active { transform: scale(.97); }
.lg-tile .ic { font-size: 46px; line-height: 1; }
.lg-tile b { font-size: 16px; line-height: 1.25; }
.lg-tile .num { position: absolute; top: 10px; left: 12px; width: 28px; height: 28px; border-radius: 50%; background: #EAF2FF; color: #0051D5; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.lg-tile .star { position: absolute; top: 8px; right: 10px; font-size: 22px; }
.lg-tile .go { position: absolute; top: -8px; right: -4px; background: #FF9500; color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 18px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.lg-tile.locked { background: #F2F4F7; box-shadow: none; }
.lg-tile.locked b, .lg-tile.locked .ic { opacity: .55; }
.lg-tile.nudge { animation: lgNudge .45s ease-in-out 2; }
@keyframes lgNudge { 50% { transform: scale(1.06); } }

/* play */
.lg-play { background: #F4FBFF; overflow-y: auto; }
.lg-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; flex: none; }
.lg-dots { flex: 1; display: flex; justify-content: center; gap: 9px; min-width: 0; }
.lg-dots i { width: 16px; height: 16px; border-radius: 50%; background: #D9E6EE; transition: background .3s, transform .3s; }
.lg-dots i.on { background: #FFC93C; transform: scale(1.12); }
.lg-dots i.now { box-shadow: 0 0 0 4px rgba(255,201,60,.4); }
.lg-askrow { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; flex: none; }
.lg-mascot { width: 58px; height: 58px; flex: none; }
.lg-ask {
  flex: 1; padding: 10px 16px; min-height: 62px; border-radius: 22px 22px 22px 6px; background: #fff;
  display: flex; align-items: center; font-size: clamp(19px, 4.4vw, 28px); font-weight: 800; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.lg-ask .w { background: #FFE58A; color: #5C3A00; border-radius: 10px; padding: 1px 9px; white-space: nowrap; }
/* The board and the answer cards sit together in the middle, so the answers are never pushed off screen. */
.lg-board { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 14px 12px 12px; margin-top: auto; }
.lg-tray { flex: none; padding: 0 12px 14px; margin-bottom: auto; }
.lg-board:empty { padding: 0; }
.lg-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* shared states: never red, never a cross */
.lg .glow { box-shadow: 0 0 0 5px #FFC93C, 0 0 0 10px rgba(255,201,60,.28) !important; animation: lgGlow 1.3s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes lgGlow { 50% { box-shadow: 0 0 0 5px #FFC93C, 0 0 0 16px rgba(255,201,60,.12); } }
.lg .ok { box-shadow: 0 0 0 5px #34C759 !important; animation: lgPop .45s ease-out; }
@keyframes lgPop { 40% { transform: scale(1.08); } }
.lg .nope { animation: lgSway .5s ease-in-out; }
@keyframes lgSway { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lg-hand { position: absolute; z-index: 20; font-size: 30px; line-height: 1; pointer-events: none; animation: lgBob 1s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
@keyframes lgBob { 50% { transform: translateY(8px); } }
.lg-go { position: sticky; bottom: 14px; align-self: center; margin: 0 0 14px; z-index: 15; width: 96px; height: 96px; flex: none; border: 0; border-radius: 30px; background: #34C759; font-size: 42px; box-shadow: 0 6px 0 #248A3D; }
.lg-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #248A3D; }
.lg-go.pulse { animation: lgPulse 1.3s ease-in-out infinite; }
@keyframes lgPulse { 50% { transform: scale(1.08); } }

/* overlays */
.lg-over { position: absolute; inset: 0; z-index: 30; background: rgba(244,251,255,.97); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 16px; padding: 20px; overflow-y: auto; text-align: center; }
.lg-over h2 { font-size: clamp(26px, 5vw, 36px); font-weight: 800; }
.lg-bigrow { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lg-bigbtn { width: 100px; height: 100px; border: 0; border-radius: 30px; background: #fff; font-size: 44px; box-shadow: 0 6px 0 #D4E3EE; }
.lg-bigbtn.primary { background: #34C759; box-shadow: 0 6px 0 #248A3D; }
.lg-bigbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #D4E3EE; }
.lg-donestar { font-size: 84px; line-height: 1; }

/* grown-ups screen */
.lg-parent { text-align: left; justify-content: flex-start; user-select: text; -webkit-user-select: text; }
.lg-parent .inner { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.lg-parent h2 { text-align: center; }
.lg-parent h3 { font-size: 19px; margin-bottom: 6px; }
.lg-parent section { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.lg-parent table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lg-parent th, .lg-parent td { padding: 7px 4px; border-bottom: 1px solid #EEF2F5; text-align: left; vertical-align: middle; }
.lg-parent th { color: #5A5A5F; font-weight: 600; }
.lg-parent .pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lg-parent .p-none { background: #F2F2F7; color: #5A5A5F; }
.lg-parent .p-prac { background: #EAF2FF; color: #0051D5; }
.lg-parent .p-need { background: #FFF3CF; color: #7A4E00; }
.lg-parent .p-got { background: #DDF6E4; color: #1F7A3A; }
.lg-parent label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 16px; }
.lg-parent input[type="checkbox"] { width: 24px; height: 24px; }
.lg-parent .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lg-parent .btn2 { border: 0; border-radius: 14px; padding: 10px 16px; font-weight: 700; background: #F2F2F7; min-height: 44px; }
.lg-parent .btn2.blue { background: #0062D6; color: #fff; }
.lg-parent .btn2.red { background: #FFE5E5; color: #B42318; }
.lg-parent ul { padding-left: 20px; font-size: 15px; line-height: 1.5; }
.lg-parent small { color: #5A5A5F; }
.lg-parent #lgSuggest { background: #F4FBFF; border-radius: 14px; padding: 10px 12px; }
.lg-parent #lgSuggest .btn2 { float: right; margin: 0 0 4px 10px; }

/* calm mode and reduced motion: keep everything still */
.lg.calm *, .lg.calm *::before, .lg.calm *::after { animation: none !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  .lg *, .lg *::before, .lg *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media (max-width: 420px) {
  .lg { border-radius: 22px; }
  .lg-ib { width: 50px; height: 50px; font-size: 22px; }
  .lg-lang button { min-width: 52px; height: 44px; font-size: 15px; }
  .lg-mascot { width: 48px; height: 48px; }
}

/* ---- home tiles ---- */
.lg-tile .ic.gl { font-size: clamp(22px, 6vw, 30px); font-weight: 800; letter-spacing: 3px; color: #0051D5; line-height: 1.5; }
.lg-tiles.many .lg-tile { min-height: 112px; padding: 12px 8px 10px; }
.lg-tiles.many .lg-tile .ic { font-size: 38px; }
.lg-tiles.many .lg-tile .ic.gl { font-size: clamp(20px, 5.4vw, 26px); }
@media (min-width: 700px) { .lg-tiles.many { grid-template-columns: repeat(4, 1fr); } }
/* Phones: 9+ levels in three compact columns, so every level fits one screen (the Hindi alphabet has 11) */
@media (max-width: 699px) { .lg-tiles.many { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 10px 14px; } .lg-tiles.many .lg-tile { min-height: 86px; padding: 10px 4px 8px; gap: 4px; border-radius: 18px; } .lg-tiles.many .lg-tile .ic { font-size: 28px; } .lg-tiles.many .lg-tile .ic.gl { font-size: clamp(16px, 4.4vw, 21px); } .lg-tiles.many .lg-tile b { font-size: 14px; } .lg-tiles.many .lg-tile .go { font-size: 14px; padding: 4px 8px; } }
.lg-tile.free { background: #EAF2FF; }
.lg-play.free .lg-dots, .lg-play.free #lgSkip, .lg-play.free #lgHint { visibility: hidden; }

/* ---- letters ---- */
.lg-let { width: clamp(78px, 21vw, 132px); min-height: 112px; border: 0; border-radius: 20px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.lg-let .ch { font-size: clamp(42px, 11.5vw, 62px); font-weight: 800; line-height: 1.25; }
.lg-let .pw { font-size: 14px; font-weight: 700; color: #3A3A3C; }
.lg-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(100%, 560px); }
.lg-chart .lg-let { width: auto; min-height: 58px; border-radius: 12px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.lg-chart .lg-let .ch { font-size: clamp(19px, 5vw, 26px); line-height: 1.3; }
.lg-chart .lg-let .pw { font-size: 13px; line-height: 1; color: #8E95A3; }

/* ---- pictures ---- */
.lg-pic { width: clamp(84px, 21.5vw, 150px); min-height: 104px; border: 0; border-radius: 22px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.lg-pic .ic { font-size: clamp(46px, 13vw, 78px); line-height: 1.15; }
.lg-pic .wd { font-size: clamp(13px, 3.6vw, 17px); font-weight: 800; text-align: center; line-height: 1.25; }
.lg-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 190px; padding: 10px 26px 12px; border-radius: 28px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.lg-hero .big { font-size: clamp(84px, 24vw, 132px); line-height: 1.2; font-weight: 800; }
.lg-hero .wd { font-size: clamp(24px, 6.4vw, 34px); font-weight: 800; }
.lg-vid { position: absolute; right: -14px; bottom: -14px; width: 54px; height: 54px; border-radius: 50%; background: #0062D6; color: #fff !important; font-size: 22px; display: grid; place-items: center; text-decoration: none !important; box-shadow: 0 4px 10px rgba(0,60,160,.3); }
.lg-carry { font-size: clamp(54px, 15vw, 76px); line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }

/* ---- place pictures: everything inside is sized in em, and the picture is always 10em square ---- */
.lg-scene { position: relative; width: 10em; height: 10em; flex: none; font-size: clamp(13px, 4.3vw, 25px); padding: 0; border: 0; border-radius: 1em; overflow: hidden;
  background: linear-gradient(#DDF3FF 0, #EEF9FF 72%, #BFE6B0 72%, #CFEFC2 100%); box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.lg-scene.tri { font-size: clamp(10px, 2.85vw, 22px); }
.lg-scene.big { font-size: clamp(22px, 8.2vw, 34px); }
.lg-scene .it, .lg-scene .an.em, .lg-scene .sl { position: absolute; transform: translate(-50%, -50%); line-height: 1; }
.lg-scene .it { font-size: 2.6em; background: none; border: 0; padding: 0; }
.lg-scene .an { position: absolute; display: block; pointer-events: none; }
.lg-scene .an.cl { right: .7em; top: .5em; font-size: 1.6em; opacity: .85; }
.lg-scene .an.tb { left: 2em; top: 4.7em; width: 6em; height: .55em; background: #B97A45; border-radius: .2em; z-index: 2; }
.lg-scene .an.tb::before, .lg-scene .an.tb::after { content: ""; position: absolute; top: .5em; width: .45em; height: 3.5em; background: #9C6233; border-radius: 0 0 .15em .15em; }
.lg-scene .an.tb::before { left: .55em; } .lg-scene .an.tb::after { right: .55em; }
.lg-scene .an.bxb { left: 2.5em; top: 4.7em; width: 5em; height: 1.3em; background: #7A4E24; border-radius: 50%; z-index: 1; }
.lg-scene .an.bxf { left: 2.5em; top: 5.35em; width: 5em; height: 3.3em; background: #D9A066; border: .12em solid #A8743C; border-radius: 0 0 .35em .35em; z-index: 3; }
.lg-scene .an.wl { left: 1.5em; top: 3.9em; width: 7em; height: 4.9em; border-radius: .2em; z-index: 2; box-shadow: inset 0 0 0 .1em #8F3A28;
  background: repeating-linear-gradient(0deg, #8F3A28 0 .09em, transparent .09em 1.22em), repeating-linear-gradient(90deg, #8F3A28 0 .09em, transparent .09em 1.75em), #C8553D; }
.lg-scene .an.em { z-index: 2; }
.lg-scene .an.hs { left: 20%; top: 60%; font-size: 4.4em; }
.lg-scene .an.tr { left: 50%; top: 55%; font-size: 4.8em; }
.lg-scene .sl { width: 2.5em; height: 2.5em; border-radius: 50%; border: .14em dashed #0062D6; background: rgba(255,255,255,.75); cursor: pointer; }
.lg-scene .sl.glow, .lg-scene .it.ok { border-radius: 50%; }
button.lg-scene { cursor: pointer; }
@media (max-width: 420px) { .lg-let { min-height: 100px; } .lg-hero { min-width: 160px; padding: 6px 18px 10px; } }
@media (max-height: 700px) { .lg-chart { gap: 5px; } .lg-chart .lg-let { min-height: 50px; } .lg-chart .lg-let .pw { font-size: 11px; } }

/* ---- number cards ---- */
.lg-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.lg .lg-num { width: clamp(72px, 21vw, 112px); min-height: 84px; border: 0; border-radius: 20px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: clamp(36px, 10vw, 52px); font-weight: 800; line-height: 1.1; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.lg .lg-num.carry { background: #FFE58A; color: #5C3A00; }
.lg .lg-num.time small { font-size: clamp(12px, 3.4vw, 15px); font-weight: 700; color: #5A5A5F; }

/* ---- number line: every tick is one equal column, so the numbers are evenly spaced ---- */
.lg-line { display: flex; align-items: flex-end; width: min(100%, 760px); }
.lg-line .tk { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border: 0; background: none; padding: 4px 0 6px; border-radius: 12px; }
.lg-line .mk { height: 1.15em; font-size: clamp(22px, 6.4vw, 36px); line-height: 1; }
.lg-line .st { --u: 10px; width: 62%; max-width: 34px; height: calc(var(--n) * var(--u)); border-radius: 3px;
  background: repeating-linear-gradient(to top, #7CC4FF 0 calc(var(--u) - 2px), transparent calc(var(--u) - 2px) var(--u)); }
.lg-line .ax { align-self: stretch; height: 18px; margin-top: 3px; display: flex; justify-content: center; background: linear-gradient(#33415C, #33415C) center / 100% 4px no-repeat; }
.lg-line .ax i { width: 4px; height: 18px; border-radius: 2px; background: #33415C; }
.lg-line b { min-width: 1.75em; height: 1.9em; line-height: 1.9em; margin-top: 5px; text-align: center; font-size: clamp(17px, 4.8vw, 26px); font-weight: 800; background: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.1); }
.lg-line.many .mk { font-size: clamp(18px, 5.4vw, 32px); }
.lg-line.many .st { --u: 8px; }
.lg-line.many b { font-size: clamp(13px, 3.9vw, 24px); border-radius: 8px; }
.lg-line b:empty { visibility: hidden; }
.lg-line .tk.mid b { background: #FFE58A; color: #5C3A00; }
.lg-line .tk.q b { background: #fff; color: #0062D6; box-shadow: inset 0 0 0 3px #0062D6; }
.lg-line .tk.lit b { background: #C9F2D4; color: #14532D; }
.lg-line.tinted .tk.less { background: #E3EEFF; }
.lg-line.tinted .tk.more { background: #FFEBD1; }
.lg-line .zone { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; padding: 0; border: 0; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 3px #B9CBDB; min-height: 128px; }
.lg-line.tinted .zone.l { background: #E3EEFF; box-shadow: inset 0 0 0 3px #8DB6F7; }
.lg-line.tinted .zone.r { background: #FFEBD1; box-shadow: inset 0 0 0 3px #F5B66B; }
.lg-line.tinted .zone .tk { background: none; }
.lg-legend { display: flex; justify-content: space-between; width: min(100%, 760px); font-size: clamp(15px, 4vw, 20px); font-weight: 800; }
.lg-legend span { border-radius: 999px; padding: 3px 14px; }
.lg-legend .less { background: #E3EEFF; color: #0B3F99; }
.lg-legend .more { background: #FFEBD1; color: #7A3E00; }

/* ---- ruler: the same equal columns, drawn as a ruler, with things lying above it ---- */
.lg-rul { position: relative; width: min(100%, 720px); --row: 46px; }
.lg-rul .obs { position: relative; height: calc(var(--rows) * var(--row)); z-index: 2; pointer-events: none; }
.lg-rul .ob { position: absolute; top: calc(var(--i) * var(--row)); height: 38px; padding: 0; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.13), 0 2px 5px rgba(0,0,0,.12); transition: width .7s ease; }
.lg-rul button.ob { pointer-events: auto; cursor: pointer; }
/* "Which is longer?": the things themselves are the answers, so they get rows tall enough for a finger (44px and more) */
.lg-rul:has(button.ob) { --row: 54px; }
.lg-rul button.ob { height: 48px; }
.lg-rul .ob .ic { font-size: 22px; line-height: 1; }
.lg-rul .ob.out .ic { position: absolute; right: 100%; margin-right: 4px; }
.lg-rul .ob.seg { background-image: linear-gradient(90deg, transparent calc(100% - 2px), rgba(0,0,0,.3) 0); background-size: calc(100% / var(--len)) 100%; }
.lg-rul .ob .sg { flex: 1 1 0; text-align: center; font-size: 18px; font-weight: 800; color: #1C1C1E; visibility: hidden; }
.lg-rul .ob .sg.on { visibility: visible; }
.lg-rul.guides .ob::before, .lg-rul.guides .ob::after { content: ""; position: absolute; top: 100%; width: 0; height: calc(8px + var(--r) * var(--row) + 20px); border-left: 3px dashed #0062D6; }
.lg-rul.guides .ob::before { left: -1.5px; }
.lg-rul.guides .ob::after { right: -1.5px; }
.lg-rul .rk-row { display: flex; }
.lg-rul .rk { flex: 1 1 0; min-width: 0; display: block; padding: 0; border: 0; background: none; border-radius: 10px; }
.lg-rul.tap .rk { margin-top: calc(-1 * var(--row)); padding-top: var(--row); }
.lg-rul .rb { display: flex; flex-direction: column; align-items: center; height: 60px; border-top: 3px solid #C99700; border-bottom: 3px solid #C99700;
  background: #FFE07A linear-gradient(#7A5B00, #7A5B00) left top / 2px 9px no-repeat; }
.lg-rul .rk:first-child .rb { border-left: 3px solid #C99700; border-radius: 10px 0 0 10px; background-image: none; }
.lg-rul .rk:last-child .rb { border-right: 3px solid #C99700; border-radius: 0 10px 10px 0; }
.lg-rul .rb i { width: 3px; height: 18px; background: #5C4400; border-radius: 0 0 2px 2px; }
.lg-rul .rb b { margin-top: 4px; font-size: clamp(16px, 4.6vw, 24px); font-weight: 800; color: #3A2B00; }
.lg-rul.many .rb b { font-size: clamp(13px, 3.9vw, 22px); }
.lg-rul .rk.lit .rb { background-color: #C9F2D4; }
.lg-rul .un { margin-top: 4px; text-align: right; font-size: 13px; font-weight: 700; color: #5A5A5F; }
.lg-tool { width: clamp(132px, 42vw, 220px); min-height: 122px; border: 0; border-radius: 22px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 10px; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.lg-tool .pic { height: 22px; border: 2px solid #C99700; border-radius: 5px; background: #FFE07A repeating-linear-gradient(90deg, #7A5B00 0 2px, transparent 2px 9px) left top / 100% 9px no-repeat; }
.lg-tool .pic.cm { width: 34%; }
.lg-tool .pic.m { width: 100%; }
.lg-tool b { font-size: clamp(18px, 5vw, 24px); }
.lg-tool small { font-size: 14px; font-weight: 700; color: #5A5A5F; }

/* ---- clock: the short hand is always blue, the long hand is always orange ---- */
.lg-clock { --s: clamp(118px, 40vw, 200px); position: relative; display: block; flex: none; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: none; font-size: calc(var(--s) / 10); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.lg-clock.mid { --s: min(58vw, 230px, 34svh); }
.lg-clock.big { --s: min(80vw, 310px, 45svh); }
.lg-clock svg { display: block; width: 100%; height: 100%; }
.lg-clock .hh, .lg-clock .mh { transform-origin: 100px 100px; transition: transform .7s ease; }
.lg-clock .show line { stroke-width: 14; filter: drop-shadow(0 0 5px #FFC93C); }
.lg-clock .mh.show line { stroke-width: 10; }
.lg-clock .nb { position: absolute; width: 17%; height: 17%; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: #F1F6FA; font-size: 1.15em; font-weight: 800; line-height: 1; }
.lg-clock .nb.nope, .lg-clock .nb.ok { animation: none; }
.lg .lg-digi { min-width: clamp(92px, 27vw, 130px); min-height: 76px; padding: 0 12px; border: 0; border-radius: 18px; background: #1F2A44; color: #9CF5C0; font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.lg .lg-digi.big { display: grid; place-items: center; min-width: 170px; min-height: 84px; font-size: clamp(40px, 12vw, 56px); }
.lg-event { font-size: clamp(54px, 16vw, 80px); line-height: 1.1; }
@media (max-height: 700px) { .lg-event { font-size: 50px; } .lg .lg-digi.big { min-height: 66px; font-size: 38px; } }

/* ---- photographs in the naming games ---- */
.lg-pic img.ph { display: block; width: clamp(56px, min(19.5vw, 9.5vh), 128px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin: 2px 0 4px; }
.lg-hero img.ph { display: block; width: clamp(110px, min(46vw, 19vh), 230px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; margin: 4px 0 6px; }

/* ---- cards as big as the row allows ----
   Two answers share the width of the screen; four are a quarter each. Small fingers miss small cards,
   and with only two or three choices there is room to spare. (--cw is the width of one card.) */
.lg-row { --cw: min(calc((100vw - 56px) / 4), 19vh, 150px); }
.lg-row:has(> :nth-child(3):last-child) { --cw: min(calc((100vw - 46px) / 3), 22vh, 190px); }
.lg-row:has(> :nth-child(2):last-child) { --cw: min(calc((100vw - 40px) / 2), 27vh, 230px); gap: 14px; }
.lg-row > .lg-pic, .lg-row > .lg-let, .lg .lg-row > .lg-num { width: var(--cw); }
.lg-row > .lg-pic { min-height: calc(var(--cw) * 1.12); border-radius: clamp(20px, calc(var(--cw) * .18), 32px); }
.lg-row > .lg-pic .ic { font-size: calc(var(--cw) * .56); }
.lg-row > .lg-pic img.ph { width: calc(var(--cw) - 18px); border-radius: clamp(12px, calc(var(--cw) * .14), 24px); }
.lg-row > .lg-pic .wd { font-size: clamp(13px, calc(var(--cw) * .13), 22px); }
.lg-row > .lg-let { min-height: calc(var(--cw) * 1.25); }
.lg-row > .lg-let .ch { font-size: calc(var(--cw) * .5); }
.lg-row > .lg-let .pw { font-size: clamp(14px, calc(var(--cw) * .13), 20px); }
.lg .lg-row > .lg-num { min-height: calc(var(--cw) * .95); font-size: calc(var(--cw) * .46); }
.lg .lg-row > .lg-num.time small { font-size: clamp(12px, calc(var(--cw) * .13), 19px); }
/* Eight named pictures in two rows (the "meet all eight" show in Name It!): a smaller big picture and cards sized
   by height too, so the two rows, the picture and ▶️ fit a small phone without scrolling. */
.lg-play:has(.lg-tray .lg-row > :nth-child(5)) .lg-row { --cw: min(calc((100vw - 56px) / 4), 13vh, 150px); }
.lg-play:has(.lg-tray .lg-row > :nth-child(5)) .lg-hero img.ph { width: clamp(72px, min(40vw, 15vh), 200px); }
@media (max-height: 700px) { .lg-play:has(.lg-tray .lg-row > :nth-child(5)) .lg-hero img.ph { width: clamp(60px, 10vh, 110px); } .lg-play:has(.lg-tray .lg-row > :nth-child(5)) .lg-board { padding-top: 8px; padding-bottom: 8px; } }
.lg .lg-row > .lg-digi { min-width: var(--cw); min-height: calc(var(--cw) * .62); padding: 0 6px; font-size: calc(var(--cw) * .26); }

/* ---- end of a round: one big way forward ---- */
.lg-bigbtn.primary { width: 132px; height: 132px; font-size: 60px; border-radius: 38px; }
.lg-bigrow { align-items: center; }
.lg:not(.calm) .lg-bigbtn.primary { animation: lgPulse 1.3s ease-in-out infinite; }

/* ---- the step away from the screen (Understand First): a card for the grown-up ---- */
.lg-adult { width: min(100%, 440px); margin: 0 auto; background: #fff; border-radius: 22px; padding: 14px 16px 16px; box-shadow: 0 3px 10px rgba(0,0,0,.08); text-align: left; }
.lg-adult .hd { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5A6B85; }
.lg-adult p { font-size: 15px; line-height: 1.45; color: #3A3A3C; margin: 6px 0 8px; }
.lg-adult blockquote { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #FFF4C7; color: #3D2A00; font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; line-height: 1.3; }
.lg-adult .bt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg .lg-adult .bt button { min-height: 60px; border: 0; border-radius: 16px; background: #E8F1FF; color: #0051D5; font-size: 16px; font-weight: 800; padding: 8px 10px; line-height: 1.25; }
.lg .lg-adult .bt button.quiet { grid-column: 1 / -1; min-height: 48px; background: none; color: #5A6B85; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lg-play:has(.lg-adult) .lg-hero img.ph { width: clamp(90px, min(34vw, 15vh), 170px); }

/* ---- help, break, stop: always on screen while playing (games with comm) ---- */
.lg-comm { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.7); border-top: 1px solid #DDE8F0; }
.lg .lg-comm button { min-height: 56px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.07); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 800; color: #33415C; }
.lg .lg-comm button span { font-size: 26px; line-height: 1; }
.lg .lg-comm button:active { transform: translateY(2px); }
.lg-break { gap: 28px; }
.lg-play:has(.lg-comm) .lg-go { margin-bottom: 8px; }
@media (max-height: 700px) { .lg .lg-comm button { min-height: 48px; font-size: 15px; } .lg .lg-comm button span { font-size: 22px; } .lg-play:has(.lg-comm) .lg-adult p { font-size: 14px; margin: 4px 0 6px; } .lg-play:has(.lg-comm):has(.lg-adult) .lg-hero img.ph { width: 74px; } .lg-play:has(.lg-comm) .lg-adult blockquote { margin-bottom: 8px; padding: 8px 12px; } }
@media (max-height: 700px) { .lg-play:has(.lg-comm):has(.lg-adult) .lg-hero { min-width: 0; padding: 4px 14px 6px; } .lg-play:has(.lg-comm):has(.lg-adult) .lg-hero img.ph { width: 54px; } .lg-play:has(.lg-comm) .lg-adult { padding: 10px 14px 10px; } .lg .lg-play:has(.lg-comm) .lg-adult .bt button { min-height: 50px; } .lg .lg-play:has(.lg-comm) .lg-adult .bt button.quiet { min-height: 44px; } .lg-play:has(.lg-comm):has(.lg-adult) .lg-board { padding-top: 6px; padding-bottom: 6px; } }

/* ---- taps that are not answers still answer back (no dead taps) ---- */
.lg-askrow, .lg-dots, .lg-title { cursor: pointer; }
.lg-dots { align-self: stretch; align-items: center; border-radius: 16px; }
.lg-dots.bump { background: rgba(255,201,60,.18); }
.lg-dots.bump i { animation: lgPop .45s ease-out; }
.lg-ask.heard { box-shadow: 0 0 0 4px #BFD8FF, 0 2px 8px rgba(0,0,0,.05); }
.lg-go.nudge, .lg .lg-bigbtn.nudge { box-shadow: 0 6px 0 #248A3D, 0 0 0 7px #FFC93C; animation: lgNudge .45s ease-in-out 2; }
.lg-donestar.bump { animation: lgPop .5s ease-out; }
.lg .tapped { animation: lgPop .45s ease-out; }
.lg-tip { position: absolute; top: 76px; right: 12px; z-index: 5; margin: 0; padding: 10px 14px; border-radius: 14px; background: #1F2A44; color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* ---- My Day, My Clock (.lg.md): the board fills the room between the bar and the bottom edge,
   and everything inside is sized from that room (container units), so a round never needs scrolling. ---- */
.lg.md .lg-board { flex: 1 1 0; min-height: 0; margin: 0; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.lg.md .lg-tray:empty { display: none; }
.lg.md .lg-play { overflow: hidden; } /* everything is sized to fit; only the pointing hand could poke past the edge */
.lg.md .lg-go { position: static; margin: 0 auto 12px; }
.md-fit { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
/* Two by two. On a short screen the grid is as tall as the room allows; on a tall phone the cards grow taller too (never narrower than square). */
.md-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: min(100cqw, 100cqh * 1.22, 720px); height: min(100cqh, 100cqw, 640px); }
@container (min-aspect-ratio: 3.2) { .md-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; width: min(100cqw, 100cqh * 4.6); height: min(100cqh, 100cqw / 4); } }
.lg .md-sky { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 4px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.08); transition: transform .15s; }
.lg .md-sky:active { transform: scale(.97); }
.md-pic { position: relative; display: block; overflow: hidden; }
.md-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.md-sky .md-pic { flex: 1 1 0; min-height: 0; width: 100%; border-radius: 14px; }
.md-sky svg { display: block; width: 100%; height: 100%; }
.md-sky b { flex: none; font-size: clamp(15px, 5.2cqh, 24px); font-weight: 800; line-height: 1.3; color: #1C1C1E; }
.lg .md-hero { flex: none; align-self: center; display: flex; align-items: center; gap: 10px; min-height: 64px; max-width: 100%; padding: 6px 18px 6px 10px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.md-hero .ic { font-size: 44px; line-height: 1; }
.md-hero b { font-size: clamp(18px, 5vw, 26px); font-weight: 800; text-align: left; }
.md-hero .md-pic { width: 64px; height: 42px; border-radius: 10px; flex: none; }
.md-hero svg { display: block; width: 100%; height: 100%; }
.md-hero.heard { box-shadow: 0 0 0 4px #BFD8FF; }
.md-clockfit { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.md-clockfit .lg-clock { --s: min(100cqw, 100cqh, 560px); touch-action: none; cursor: pointer; }
.md-clockfit .lg-clock .nb { width: max(44px, 16.5%); height: max(44px, 16.5%); font-size: 1.2em; background: #F1F6FA; }
.md-clockfit .lg-clock .md-hh { transform-origin: 100px 100px; transition: transform .45s ease; }
.md-clockfit .lg-clock.drag .md-hh { transition: none; }
.md-clockfit .lg-clock .md-hh.wig { animation: mdWig .5s ease-in-out; }
@keyframes mdWig { 30% { translate: 0 -3px; } 70% { translate: 0 2px; } }
.md-ctl { flex: none; display: flex; justify-content: center; align-items: center; gap: 12px; }
.lg .md-step { width: 76px; height: 64px; flex: none; border: 0; border-radius: 20px; background: #fff; color: #0062D6; font-size: 40px; font-weight: 800; line-height: 1; box-shadow: 0 4px 0 #CFDCEA; }
.lg .md-step:active { transform: translateY(3px); box-shadow: 0 1px 0 #CFDCEA; }
.lg .md-now { min-width: 128px; min-height: 56px; padding: 0 16px; border: 0; border-radius: 999px; background: #E8F1FF; color: #0B3F99; font-size: clamp(18px, 5vw, 22px); font-weight: 800; }
.md-note { flex: none; margin: 0; text-align: center; font-size: 14px; line-height: 1.35; color: #5A6B85; }
.md-final { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.md-final p { margin: 0; font-size: clamp(18px, 4.6vw, 22px); font-weight: 800; color: #33415C; }
.lg .md-final a { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px; border-radius: 18px; background: #fff; color: #0051D5; font-size: 18px; font-weight: 800; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
@media (max-height: 520px) { .lg.md .lg-go { width: 72px; height: 64px; font-size: 30px; border-radius: 22px; margin-bottom: 8px; } }
@media (max-height: 620px) { .md-note { display: none; } .lg .md-step { height: 56px; } .lg .md-now { min-height: 50px; } .lg.md .lg-board { gap: 8px; padding-top: 6px; } .lg .md-hero { min-height: 56px; padding-top: 3px; padding-bottom: 3px; } .md-hero .ic { font-size: 36px; } }
.md-clockfit .lg-clock g.glow { filter: drop-shadow(0 0 4px #FFC93C) drop-shadow(0 0 4px #FFC93C); }

/* Understand First: wide story scenes (3:2), as the big picture and as choices */
.lg-hero.wide { min-width: 0; padding: 8px; }
.lg-hero img.ph.wide { width: clamp(200px, min(88vw, 51vh), 540px); aspect-ratio: 3 / 2; border-radius: 18px; margin: 0; }
.lg-hero.wide.now img.ph.wide { width: clamp(150px, min(62vw, 33vh), 340px); }
.lg-row:has(> .lg-pic.wide) { --ww: min(calc((100vw - 44px) / 2), 36vh, 300px); }
.lg-row > .lg-pic.wide { width: var(--ww); min-height: 0; padding: 6px; border-radius: 20px; }
.lg-row > .lg-pic.wide img.ph { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; margin: 0; }