/* «Leela: a game of emotional truth» (uses test.css for the hero, buttons and «Keep going») */
.lg {
  --lv1: #4A1013; --lv2: #5E1A17; --lv3: #74261B; --lv4: #8A3A20;
  --lv5: #A0552A; --lv6: #B57438; --lv7: #C9984F; --lv8: #DDBD7A;
  --lg-gold: #E7C98E; --lg-ink: #120C0A;
}
.lg-ico svg, .lg-lv__mark svg, .lg-via svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.lg-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lg-hero-btns [hidden] { display: none; }

/* how to play */
.lg-how { background: var(--tt-paper); color: var(--tt-text); padding: 70px 20px 60px; }
.lg-how h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 26px; text-align: center; }
.lg-how__grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lg-how__it { position: relative; background: #fff; border-radius: 14px; padding: 24px 18px 20px; border-top: 3px solid var(--lv4); box-shadow: 0 6px 22px rgba(60,40,30,.07); }
.lg-how__n { position: absolute; top: 14px; right: 16px; font-family: var(--serif); font-size: 30px; line-height: 1; color: rgba(138,58,32,.22); }
.lg-how__it .lg-ico { color: var(--lv4); margin-bottom: 10px; }
.lg-how__it b { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; margin-bottom: 6px; }
.lg-how__it p { margin: 0; font-size: 14px; line-height: 1.6; color: #5a4f4b; }
.lg-rules { max-width: 760px; margin: 34px auto 0; }
.lg-rules h3 { font-family: var(--display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #8a7f78; text-align: center; margin: 0 0 12px; font-weight: 400; }
.lg-rules ul { margin: 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.7; color: #4a403c; }

/* the board as text: 8 levels */
.lg-levels { background: #EFE9DF; color: var(--tt-text); padding: 70px 20px; }
.lg-levels h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 10px; text-align: center; }
.lg-levels__lead { max-width: 620px; margin: 0 auto 28px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: #5a4f4b; }
.lg-lv { max-width: 860px; margin: 0 auto 10px; background: #fff; border-radius: 14px; border-left: 5px solid var(--lv); box-shadow: 0 4px 16px rgba(60,40,30,.06); }
.lg-lv summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 70px 1fr; column-gap: 12px; padding: 16px 18px; align-items: baseline; }
.lg-lv summary::-webkit-details-marker { display: none; }
.lg-lv__n { grid-row: span 2; font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: #8a7f78; }
.lg-lv summary b { font-family: var(--serif); font-weight: 500; font-size: 24px; }
.lg-lv summary small { font-size: 14px; color: #6b605c; }
.lg-lv ol { list-style: none; margin: 0; padding: 0 18px 10px; }
.lg-lv li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid #efe7dc; }
.lg-lv li > b { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--lv); line-height: 1; }
.lg-lv li strong { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.lg-lv li p { margin: 4px 0 6px; font-size: 15px; line-height: 1.6; color: #4a403c; }
.lg-lv li em { font-family: var(--serif); font-size: 17px; color: #7a5a3a; }
.lg-lv li.is-goal { background: linear-gradient(90deg, rgba(221,189,122,.18), transparent); }
.lg-lv__mark { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; vertical-align: 3px; }
.lg-lv__mark svg { width: 15px; height: 15px; }
.lg-lv__mark--snake { color: #6a2a1e; }
.lg-lv__mark--arrow, .lg-lv__mark--goal { color: #9c7330; }

.lg-about { background: var(--tt-paper); color: var(--tt-text); padding: 60px 20px; }
.lg-about__in { max-width: 720px; margin: 0 auto; }
.lg-about h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; text-align: center; }
.lg-about p { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: #4a403c; margin: 0 0 14px; }

/* play screen */
.lg-play { display: none; }
.lg-play.is-on {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 500; overflow-y: auto; color: var(--tt-paper);
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 30% 20%, rgba(139,42,30,.25), transparent 60%), #0B0909;
}
.lg-top { display: flex; align-items: center; gap: 10px; max-width: 1280px; width: 100%; margin: 0 auto 12px; }
.lg-top__t { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--lg-gold); }
.lg-top__count { flex: 1; font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(248,246,241,.6); }
.lg-x { font-size: 20px; line-height: 1; }

.lg-setup { max-width: 560px; width: 100%; margin: auto; padding: 20px 0 40px; text-align: center; }
.lg-setup[hidden] { display: none; }
.lg-setup__tag { font-family: var(--display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--lg-gold); }
.lg-setup h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5vw, 46px); margin: 10px 0 10px; }
.lg-setup p { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: rgba(248,246,241,.8); margin: 0 0 18px; }
.lg-setup textarea {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(231,201,142,.45); background: rgba(248,246,241,.06); color: var(--tt-paper);
  font-family: var(--serif); font-size: 20px; line-height: 1.4; padding: 14px 16px; resize: vertical;
}
.lg-setup textarea:focus { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
.lg-setup textarea.is-filled { animation: lg-glow 1.1s ease; }
@keyframes lg-glow { 0% { box-shadow: 0 0 0 0 rgba(231,201,142,.0) } 30% { box-shadow: 0 0 0 4px rgba(231,201,142,.45) } 100% { box-shadow: 0 0 0 0 rgba(231,201,142,0) } }
.lg-go { margin-top: 14px; }
.lg-sph { margin: 16px 0 4px; }
.lg-ab { margin: 12px 0 0; text-align: left; }
.lg-ab summary { cursor: pointer; text-align: center; font-size: 13px; color: var(--lg-gold); }
.lg-ab label { display: block; margin-top: 10px; }
.lg-ab label b { display: block; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,246,241,.75); margin-bottom: 4px; }
.lg-ab input { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(231,201,142,.35); background: rgba(248,246,241,.06); color: var(--tt-paper); font-family: var(--serif); font-size: 17px; padding: 10px 12px; }
.lg-ab input:focus { outline: 2px solid var(--lg-gold); outline-offset: 1px; }
.lg-mode { margin-top: 14px; }
.lg-sph__t { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lg-gold); margin-bottom: 10px; }
.lg-sph__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lg-sph__b { cursor: pointer; border-radius: 999px; border: 1px solid rgba(248,246,241,.3); background: transparent; color: rgba(248,246,241,.88); padding: 9px 16px; font-size: 14px; }
.lg-sph__b:hover { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-sph__b.is-on { background: var(--lg-gold); border-color: var(--lg-gold); color: #241509; }
.lg-sph__note { display: block; margin-top: 8px; font-size: 12px; color: rgba(248,246,241,.6); }
.lg-sph--drawer { margin: 0 0 18px; padding: 14px; border-radius: 12px; background: #EFE6D8; }
.lg-sph--drawer .lg-sph__t { color: #8a6a4a; }
.lg-sph--drawer .lg-sph__list { justify-content: flex-start; }
.lg-sph--drawer .lg-sph__b { border-color: #d6c4ac; color: var(--tt-text); font-size: 13px; padding: 7px 12px; }
.lg-sph--drawer .lg-sph__b.is-on { background: var(--lv4); border-color: var(--lv4); color: #fff; }
.lg-setup__note { display: block; font-size: 12px; color: rgba(248,246,241,.55); margin: 10px 0 0; }

/* ready-made questions in the setup screen */
.lg-pick { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(231,201,142,.2); text-align: left; }
.lg-pick__t { font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-gold); text-align: center; margin-bottom: 12px; line-height: 1.6; }
.lg-themes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.lg-theme { cursor: pointer; border-radius: 999px; border: 1px solid rgba(248,246,241,.25); background: transparent; color: rgba(248,246,241,.85); padding: 8px 14px; font-size: 13px; }
.lg-theme:hover { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-theme.is-on { background: var(--lg-gold); border-color: var(--lg-gold); color: #241509; }
.lg-qlist { display: grid; gap: 6px; }
.lg-qlist[hidden] { display: none; }
.lg-reqb {
  display: block; width: 100%; text-align: left; cursor: pointer; border-radius: 12px; border: 1px solid rgba(248,246,241,.14); background: rgba(248,246,241,.05);
  color: var(--tt-paper); font-family: var(--serif); font-size: 18px; line-height: 1.3; padding: 11px 14px; transition: background .15s, border-color .15s;
}
.lg-reqb:hover, .lg-reqb:focus-visible { background: rgba(231,201,142,.14); border-color: rgba(231,201,142,.55); }
.lg-howask { margin-top: 16px; font-size: 14px; color: rgba(248,246,241,.82); }
.lg-howask summary { cursor: pointer; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-gold); text-align: center; }
.lg-howask ol { margin: 12px 0 0; padding-left: 20px; line-height: 1.55; }
.lg-howask li { margin-bottom: 10px; }
.lg-howask li b { font-weight: 500; display: block; }
.lg-ask__pair { display: block; font-family: var(--serif); font-size: 16px; }
.lg-ask__pair s { opacity: .6; }
.lg-ask__pair em { color: var(--lg-gold); }

/* ready-made questions on the page */
.lg-asks { background: #EFE9DF; color: var(--tt-text); padding: 66px 20px; }
.lg-asks h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 10px; text-align: center; }
.lg-asks__lead { max-width: 640px; margin: 0 auto 26px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: #5a4f4b; }
.lg-asks__th { max-width: 760px; margin: 0 auto 10px; background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(60,40,30,.06); }
.lg-asks__th summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px; }
.lg-asks__th summary::-webkit-details-marker { display: none; }
.lg-asks__th summary b { font-family: var(--serif); font-weight: 500; font-size: 23px; }
.lg-asks__th summary small { font-family: var(--display); font-size: 10px; letter-spacing: .14em; color: #9a8f88; }
.lg-asks__list { display: grid; gap: 6px; padding: 0 14px 14px; }
.lg-asks .lg-reqb { color: var(--tt-text); background: #FAF6EF; border-color: #eadfce; font-size: 18px; position: relative; padding-right: 92px; }
.lg-asks .lg-reqb::after { content: attr(data-play); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--lv4); }
.lg-asks .lg-reqb:hover, .lg-asks .lg-reqb:focus-visible { background: #F3E8D6; border-color: var(--lv6); }
.lg-howask--page { max-width: 760px; margin: 22px auto 0; color: #4a403c; background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 16px rgba(60,40,30,.06); }
.lg-howask--page summary { color: var(--lv4); }
.lg-howask--page .lg-ask__pair em { color: var(--lv3); }
.lg-hero-link { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--lg-gold); text-decoration: none; border-bottom: 1px solid rgba(231,201,142,.45); }
.lg-hero-link:hover { color: #fff; }

.lg-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr); gap: 22px; max-width: 1280px; width: 100%; margin: 0 auto; align-items: start; }
.lg-main[hidden] { display: none; }
.lg-boardwrap { display: flex; justify-content: center; }

/* the board: 9 × 8 square cells, snakes and arrows drawn on top, labels above them */
.lg-board { position: relative; width: min(100%, calc((100vh - 110px) * 1.125)); aspect-ratio: 9 / 8; container-type: inline-size; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(231,201,142,.35); }
.lg-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(8, 1fr); }
.lg-bgc { background: var(--bg); border-right: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,236,200,.06); }
.lg-bgc.is-visited { background-image: radial-gradient(circle at 85% 85%, rgba(255,240,210,.5) 0 1.6%, transparent 2%); }
.lg-bgc.is-goal { background: radial-gradient(circle, #f6e3b4, var(--lv8) 70%); box-shadow: inset 0 0 0 2px #fff4d8, inset 0 0 18px rgba(139,90,20,.35); }
.lg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-cell {
  position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--fg); font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6%;
}
.lg-cell:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: -2px; }
.lg-cell__no { position: absolute; top: 5%; left: 7%; font-family: var(--display); font-size: max(9px, 1.25cqw); letter-spacing: .04em; opacity: .85; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.lg-cell__n { font-family: var(--serif); font-size: max(9px, 1.45cqw); line-height: 1.05; padding: 0 4%; text-shadow: 0 1px 3px rgba(0,0,0,.55); overflow-wrap: anywhere; hyphens: auto; }
.lg-cell.is-light .lg-cell__no, .lg-cell.is-light .lg-cell__n { text-shadow: 0 1px 2px rgba(255,248,230,.6); }
.lg-cell.is-goal .lg-cell__n { font-weight: 600; }
/* small board: names hidden, the number stays in the corner so snake heads and arrow ends don't cover it */
@container (max-width: 560px) {
  .lg-cell__n { display: none; }
  .lg-cell__no { top: 4%; left: 6%; font-size: max(10px, 2.4cqw); opacity: 1; }
}
.lg-token {
  position: absolute; width: 6.2cqw; height: 6.2cqw; min-width: 16px; min-height: 16px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #e7c98e 45%, #8a6424); box-shadow: 0 0 0 2px rgba(18,12,10,.8), 0 0 18px 4px rgba(255,220,150,.75);
  transition: left .16s ease, top .16s ease;
}
.lg-token.is-slide { transition: left .9s cubic-bezier(.5,0,.3,1), top .9s cubic-bezier(.5,0,.3,1); }
.lg-token[hidden] { display: none; }

/* music for the game */
.lg-musicbtn { font-size: 13px; letter-spacing: .08em; }
.lg-musicbtn.is-on { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-music { order: 2; background: rgba(248,246,241,.05); border: 1px solid rgba(231,201,142,.3); border-radius: 14px; padding: 12px; }
.lg-music__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lg-music__top b { font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lg-gold); }
.lg-music__off { cursor: pointer; border: 1px solid rgba(248,246,241,.28); background: transparent; color: rgba(248,246,241,.8); border-radius: 999px; padding: 6px 12px; font-size: 11px; }
.lg-music__off:hover { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-music__box { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; min-height: 200px; }
.lg-music__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lg-music__now { margin: 8px 0 2px; font-family: var(--serif); font-style: italic; font-size: 16px; color: rgba(248,246,241,.82); }
.lg-music__modes { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.lg-music__modes button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(248,246,241,.25); background: transparent; color: rgba(248,246,241,.85); font-size: 11px; }
.lg-music__modes svg { width: 15px; height: 15px; fill: currentColor; }
.lg-music__modes button:hover { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-music__modes button.is-on { background: var(--lg-gold); border-color: var(--lg-gold); color: #241509; }
.lg-music__btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lg-music__bar { display: none; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--serif); font-style: italic; font-size: 16px; color: rgba(248,246,241,.8); }
.lg-music.is-min .lg-music__bar { display: flex; }
.lg-music.is-min .lg-music__box, .lg-music.is-min .lg-music__now, .lg-music.is-min .lg-music__modes, .lg-music.is-min .lg-music__all, .lg-music.is-min [data-mm=min] { display: none; }
.lg-music.is-min .lg-music__top { margin-bottom: 6px; }
.lg-music__all { font-size: 12px; color: var(--lg-gold); }

/* the side: question, die, cell card */
.lg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-q { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: rgba(248,246,241,.82); border-left: 2px solid var(--lg-gold); padding: 2px 0 2px 12px; }
.lg-q[hidden] { display: none; }
.lg-roll { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 8px; align-items: center; }
.lg-roll .lg-die { grid-row: 1 / span 2; }
.lg-die {
  flex: none; width: 74px; height: 74px; border-radius: 16px; cursor: pointer; border: 0; padding: 10px; background: linear-gradient(145deg, #fffaf0, #e9dcc3);
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 -3px 0 rgba(120,90,50,.25); transition: transform .15s;
}
.lg-die:hover { transform: translateY(-2px); }
.lg-die:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 3px; }
.lg-die:disabled { cursor: default; }
.lg-die__face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.lg-die__face i { width: 11px; height: 11px; border-radius: 50%; background: #2a1a12; place-self: center; visibility: hidden; }
.lg-die__face i.on { visibility: visible; }
.lg-die.is-rolling { animation: lg-roll .55s ease; }
@keyframes lg-roll { 0% { transform: rotate(0) } 30% { transform: rotate(-24deg) scale(1.06) } 60% { transform: rotate(18deg) } 100% { transform: rotate(0) } }
.lg-roll__msg { font-family: var(--serif); font-size: 19px; line-height: 1.35; color: rgba(248,246,241,.9); }
.lg-roll__msg small { display: block; font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(248,246,241,.5); margin-top: 4px; }

.lg-card { background: var(--tt-paper); color: var(--tt-text); border-radius: 18px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); border-top: 6px solid var(--lv, var(--lv4)); }
.lg-card:empty { display: none; }
.lg-card__lv { font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #9a8f88; }
.lg-card__head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 8px; }
.lg-card__no { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1; color: color-mix(in srgb, var(--lv, var(--lv4)) 72%, #2b1a10); }
.lg-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; margin: 0; }
.lg-card__t { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; }
.lg-card__q { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: #6b3b20; margin: 0 0 14px; padding-left: 12px; border-left: 2px solid var(--lv5); }
.lg-card__sphere { margin: -4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #F6E9D3; border-left: 3px solid var(--lv6); font-family: var(--serif); font-size: 17px; line-height: 1.45; color: #3a2614; }
.lg-card__sphere b { display: block; font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a6a3a; margin-bottom: 4px; }
.lg-card__sphere a { font-family: var(--sans, inherit); font-size: 13px; color: var(--lv3); }
.lg-card__bridge { margin: -4px 0 14px; padding: 10px 12px; border-radius: 10px; background: #F3EBDD; font-size: 14.5px; line-height: 1.5; color: #4a3828; }
.lg-card__bridge b { display: block; font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a7a5a; margin-bottom: 2px; }
.lg-card__help { display: inline-block; font-size: 13px; color: var(--lv3); margin-bottom: 12px; }
.lg-card label { display: block; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f88; }
.lg-card textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 64px; border-radius: 10px; border: 1px solid #dccfbf; background: #fff; padding: 10px 12px; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--tt-text); resize: vertical; }
.lg-card textarea:focus { outline: 2px solid var(--lv5); outline-offset: 1px; }
.lg-card__foot { margin-top: 10px; font-size: 12px; color: #9a8f88; }
.lg-card .tt-btn { margin-top: 14px; width: 100%; }
.lg-card details { margin: 0 0 12px; font-size: 14px; color: #5a4f4b; }
.lg-card details summary { cursor: pointer; font-size: 13px; color: #8a7f78; }
.lg-card details p { margin: 6px 0 0; line-height: 1.55; }
.lg-via { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; }
.lg-via b { display: block; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 3px; }
.lg-via p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.lg-via--snake { background: #2a1814; color: #f3e6d6; }
.lg-via--snake svg { color: #e09a7f; flex: none; }
.lg-via--arrow { background: #f3e2b8; color: #3a2a12; }
.lg-via--arrow svg { color: #8a6424; flex: none; }
.lg-again { border-radius: 12px; background: #F6EBD8; border-left: 3px solid var(--lv6); padding: 10px 14px; margin: 0 0 12px; }
.lg-again b { display: block; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8a5a2a; margin-bottom: 3px; }
.lg-again p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: #4a3020; }
.lg-again p.lg-again__note { margin-top: 6px; font-style: italic; color: #6b3b20; }
.lg-endbtn { grid-column: 2; justify-self: start; align-self: start; cursor: pointer; border: 1px solid rgba(248,246,241,.28); background: transparent; color: rgba(248,246,241,.8); border-radius: 999px; padding: 8px 12px; font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.lg-endbtn:hover { border-color: var(--lg-gold); color: var(--lg-gold); }
.lg-endbtn[hidden] { display: none; }
.lg-wait { text-align: center; padding: 6px 0; }
.lg-wait p { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin: 0 0 6px; }
.lg-wait small { color: #8a7f78; }

/* path drawer */
.lg-drawer { position: fixed; inset: 0; z-index: 520; background: rgba(5,4,4,.7); display: flex; justify-content: flex-end; }
.lg-drawer[hidden] { display: none; }
.lg-drawer__in { width: min(460px, 100%); height: 100%; overflow-y: auto; background: var(--tt-paper); color: var(--tt-text); padding: 20px 20px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.lg-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lg-drawer__top h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; }
.lg-drawer .tt-close { color: var(--tt-text); border-color: #d8cbbb; }
.lg-path { list-style: none; margin: 0 0 18px; padding: 0; }
.lg-path li { padding: 10px 0; border-bottom: 1px solid #ebe2d6; font-size: 14px; line-height: 1.45; }
.lg-path li small { display: block; font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #9a8f88; }
.lg-path li b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.lg-path li .lg-path__via { font-size: 12px; color: #8a5a3a; }
.lg-path li q { display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; color: #5a4f4b; quotes: none; }
.lg-drawer__btns { display: grid; gap: 10px; }
.lg-drawer__btns .tt-btn { color: var(--tt-text); }
.lg-drawer__btns .tt-btn--main { color: #fff; }

.lg-card__note { display: block; margin-top: 6px; font-family: var(--sans, inherit); font-size: 12px; color: #8a6a4a; }
.lg-weekbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lg-weekbtns .lg-endbtn { margin: 0; }
.lg-res__ab { text-align: left; background: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; border-left: 4px solid var(--lv5); }
.lg-res__ab p { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; line-height: 1.4; }
.lg-res__ab b { display: block; font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f88; }
.lg-res__ab em { font-family: var(--serif); font-size: 17px; color: #6b3b20; }
.lg-task { text-align: left; background: #fff; border-radius: 16px; padding: 22px 20px; margin-bottom: 16px; box-shadow: 0 6px 22px rgba(60,40,30,.07); border-top: 4px solid var(--lv3); }
.lg-task__t { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin: 0 0 8px; color: var(--tt-text); }
.lg-task__by { font-size: 13px; color: #8a7f78; margin: 0 0 12px; }
.lg-task__done { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.lg-task__done input { width: 22px; height: 22px; accent-color: var(--lv4); }

/* «are you sure?» window */
.lg-dlg { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5,4,4,.72); }
.lg-dlg.is-on { display: flex; }
.lg-dlg__box { width: 100%; max-width: 420px; background: var(--tt-paper); color: var(--tt-text); border-radius: 18px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.lg-dlg__box p { font-family: var(--serif); font-size: 20px; line-height: 1.45; margin: 0 0 20px; }
.lg-dlg__btns { display: grid; gap: 10px; }
.lg-dlg__btns .tt-btn { color: var(--tt-text); }
.lg-dlg__btns .tt-btn--main { color: #fff; }

/* result */
.lg-result { background: var(--tt-paper); }
.lg-res { max-width: 760px; margin: 0 auto; text-align: center; }
.lg-res__tag { font-family: var(--display); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #9a8f88; }
.lg-res__title { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 8vw, 92px); line-height: 1; color: var(--lv4); margin: 12px 0 8px; }
.lg-res__line { font-family: var(--serif); font-style: italic; font-size: 20px; color: #5a4f4b; margin: 0 auto 22px; max-width: 560px; }
.lg-res__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 26px; }
.lg-res__stats div { background: #fff; border-radius: 14px; padding: 14px 8px; box-shadow: 0 6px 22px rgba(60,40,30,.07); }
.lg-res__stats b { display: block; font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--lv4); }
.lg-res__stats small { font-size: 12px; color: #6b605c; }
.lg-res__req { text-align: left; background: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; border-left: 4px solid var(--lv7); }
.lg-res__req small { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9a8f88; }
.lg-res__req p { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin: 6px 0 10px; }
.lg-res__req em { font-family: var(--serif); font-size: 18px; color: #6b3b20; }
.lg-res__req textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; min-height: 80px; border-radius: 10px; border: 1px solid #dccfbf; padding: 10px 12px; font-family: var(--serif); font-size: 17px; resize: vertical; }
.lg-res__keys { text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.lg-res__keys div { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 16px rgba(60,40,30,.05); }
.lg-res__keys h3 { display: flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a7f78; margin: 0 0 8px; }
.lg-res__keys h3 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-res__keys p { margin: 0 0 6px; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.lg-res__keys p small { display: block; font-family: inherit; font-size: 14px; font-style: italic; color: #6b605c; }
/* after the game: my step, reminder, week, books */
.lg-res__h { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 8px; color: var(--tt-text); }
.lg-step, .lg-remind, .lg-week, .lg-picks { text-align: left; background: #fff; border-radius: 16px; padding: 22px 20px; margin-bottom: 16px; box-shadow: 0 6px 22px rgba(60,40,30,.07); }
.lg-step { border-top: 4px solid var(--lv4); }
.lg-step__lead { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: #5a4f4b; margin: 0 0 16px; }
.lg-step label, .lg-ifthen { display: block; margin-bottom: 16px; }
.lg-step label b, .lg-ifthen > b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.lg-step label small, .lg-ifthen > small { display: block; font-size: 13px; color: #8a7f78; margin-bottom: 6px; }
.lg-step textarea, .lg-ifthen input { display: block; width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid #dccfbf; background: #FCFAF6; padding: 10px 12px; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--tt-text); resize: vertical; }
.lg-step textarea:focus, .lg-ifthen input:focus { outline: 2px solid var(--lv5); outline-offset: 1px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lg-chip { cursor: pointer; border-radius: 999px; border: 1px solid #e0c9b0; background: #FBF3E8; color: #6b3b20; padding: 6px 12px; font-size: 13px; }
.lg-chip:hover { background: #F3E2C8; }
.lg-ifthen__row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.lg-ifthen__row span { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--lv4); text-align: right; }
.lg-remind { border-top: 4px solid var(--lv7); }
.lg-remind p { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: #5a4f4b; margin: 0 0 14px; }
.lg-remind__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.lg-remind__btns .tt-btn { color: var(--tt-text); }
.lg-remind__btns .tt-btn--main { color: #fff; }
.lg-remind small { display: block; font-size: 12px; line-height: 1.5; color: #8a7f78; }
.lg-week { border-top: 4px solid var(--lv); }
.lg-week > small { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9a8f88; }
.lg-week h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 4px 0 4px; }
.lg-week > p { font-size: 14px; color: #6b605c; margin: 0 0 12px; }
.lg-week ol { list-style: none; margin: 0; padding: 0; }
.lg-week li { border-top: 1px solid #f0e8dd; }
.lg-week label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; cursor: pointer; }
.lg-week input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--lv4); }
.lg-week span { font-size: 15px; line-height: 1.5; }
.lg-week span b { display: block; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f88; }
.lg-week input:checked + span { color: #9a8f88; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.lg-picks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 12px; }
.lg-book { display: flex; flex-direction: column; gap: 3px; border-radius: 12px; border: 1px solid #eadfce; background: #FAF6EF; padding: 14px 14px 12px; color: var(--tt-text); text-decoration: none; }
a.lg-book:hover { border-color: var(--lv6); background: #F6EDDF; }
.lg-book small { font-family: var(--display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f88; }
.lg-book b { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; }
.lg-book i { font-size: 13px; color: #6b605c; }
.lg-book p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #4a403c; flex: 1; }
.lg-book span { margin-top: 8px; font-size: 12px; color: var(--lv4); font-weight: 600; }
.lg-book--film { background: #F4EEF0; border-color: #e6d8dc; }
.lg-picks__more { font-size: 13px; color: #6b605c; margin: 0; }
.lg-picks__more a { color: var(--lv4); }
.lg-lv__picks { margin: 0 0 12px 50px; padding: 10px 14px; border-radius: 10px; background: #FAF6EF; font-size: 14px; line-height: 1.55; color: #4a403c; }
.lg-lv__picks b { font-family: var(--display); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a8f88; margin-right: 6px; }

.lg-res__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.lg-res__btns .tt-btn { color: var(--tt-text); }
.lg-res__btns .tt-btn--main { color: #fff; }
.lg-res__path { text-align: left; }
.lg-res__path h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; text-align: center; margin: 0 0 12px; }
.lg-res__path details { background: #fff; border-radius: 12px; margin-bottom: 8px; border-left: 3px solid var(--lv); box-shadow: 0 4px 16px rgba(60,40,30,.05); }
.lg-res__path summary { cursor: pointer; padding: 12px 16px; font-size: 15px; line-height: 1.45; }
.lg-res__path summary small { color: #9a8f88; margin-right: 6px; }
.lg-res__path details p { margin: 0; padding: 0 16px 12px; font-size: 14px; line-height: 1.6; color: #4a403c; }
.lg-res__path details p.lg-note { font-family: var(--serif); font-style: italic; font-size: 16px; color: #6b3b20; }
.lg-res__priv { font-size: 12px; color: #9a8f88; margin-top: 18px; }

@media (max-width: 980px) {
  .lg-roll.is-dayover { position: static; background: none; }
  .lg-how__grid { grid-template-columns: repeat(2, 1fr); }
  .lg-main { grid-template-columns: 1fr; gap: 16px; }
  .lg-board { width: 100%; }
  /* on a phone the die stays at the bottom of the screen while you read the card */
  .lg-q { order: 1; }
  .lg-card { order: 2; }
  .lg-roll { order: 3; position: sticky; bottom: 0; z-index: 4; padding: 14px 0 6px; margin-top: -6px; background: linear-gradient(rgba(11,9,9,0), #0B0909 34%); }
}
@media (max-width: 640px) {
  .lg-musicbtn span { display: none; }
  .lg-picks__grid { grid-template-columns: 1fr; }
  .lg-step, .lg-remind, .lg-week, .lg-picks { padding: 18px 14px; }
  .lg-lv__picks { margin-left: 0; }
  .lg-asks .lg-reqb { padding-right: 38px; font-size: 17px; }
  .lg-asks .lg-reqb::after { content: "→"; font-size: 14px; letter-spacing: 0; }
  .lg-how__grid, .lg-res__keys { grid-template-columns: 1fr; }
  .lg-res__stats { grid-template-columns: repeat(2, 1fr); }
  .lg-lv summary { grid-template-columns: 1fr; }
  .lg-lv__n { grid-row: auto; }
  .lg-play.is-on { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .lg-top__t { font-size: 20px; }
  .lg-die { width: 64px; height: 64px; }
  .lg-card { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .lg-token, .lg-token.is-slide { transition: none; } .lg-die.is-rolling { animation: none; } }