/* Guandan levels (score tab): two level ladders, the current hand, tribute reminders, result
   buttons. Inside .tl-card (light card palette in both themes). */
.gd { padding: .6rem .55rem .8rem; }
.gd-t0 { --team: #b3141b; }
.gd-t1 { --team: #1f4e8c; }

/* ---- setup ---- */
.gd-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; }
.gd-names .tl-field { border-left: 4px solid var(--team); padding-left: .4rem; }
.gd-names input { font: inherit; min-height: 44px; padding: .2rem .45rem; border: 1px solid var(--card-line); border-radius: 6px; width: 100%; box-sizing: border-box; }
.gd-setup .tl-row .tl-btn { flex: 1 1 auto; }

/* ---- the level tracks ---- */
.gd-tracks { display: grid; gap: .4rem; }
.gd-team { background: #fbf6ea; border: 1px solid var(--card-rule); border-left: 5px solid var(--team); border-radius: 7px; padding: .35rem .45rem; }
.gd-team.gd-cur { background: color-mix(in srgb, var(--team) 7%, #fff); }
.gd-team.gd-won { background: color-mix(in srgb, var(--team) 14%, #fff); }
.gd-head { display: flex; align-items: baseline; gap: .5rem; }
.gd-nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-lv { white-space: nowrap; color: var(--team); }
.gd-lv small { font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--card-soft); }
.gd-lv b { font-size: 2rem; line-height: 1; font-weight: 800; font-variant-numeric: lining-nums; }
.gd-ladder { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; list-style: none; margin: .3rem 0 .1rem; padding: 0; }
.gd-ladder li { text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.9; border-radius: 3px; background: #eee6d4; color: var(--card-soft); }
.gd-ladder li.gd-past { background: color-mix(in srgb, var(--team) 22%, #fff); color: var(--team); }
.gd-ladder li.gd-now { background: var(--team); color: #fff; }
.gd-ladder li:last-child { box-shadow: inset 0 0 0 1px var(--card-line); }
.gd-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .6rem; font-size: .85rem; color: var(--card-soft); margin-top: .15rem; }
.gd-won-l { color: var(--team); font-weight: 700; }
.gd-fails { display: inline-flex; align-items: center; gap: .35rem; color: var(--card-ink); }
.gd-pips { display: inline-flex; gap: 3px; }
.gd-pip { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--card-red); }
.gd-pip.on { background: var(--card-red); }
.gd-live { min-height: 1.4em; margin: .5rem 0 .2rem; font-weight: 700; text-align: center; }

/* ---- the current hand ---- */
.gd-hand { border-top: 3px double var(--card-rule); padding-top: .4rem; }
.gd-handhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.gd-handhead strong { font-size: 1.15rem; }
.gd-handhead span { color: var(--card-soft); }
.gd-level { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: .5rem 0 .2rem; }
.gd-big { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gd-big small { font-size: .85rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--card-soft); }
.gd-big b { font-size: 3.2rem; font-weight: 800; font-variant-numeric: lining-nums; }
.gd-wild { display: flex; align-items: center; gap: .3rem; }
.gd-wild small { font-size: .85rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--card-soft); margin-left: .15rem; }
.gd-cardchip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 3.3rem; padding: 0 .2rem;
  border: 1px solid var(--card-line); border-radius: 6px; background: var(--card); color: var(--card-red); font-weight: 800; font-size: 1.15rem; box-shadow: 1px 1px 0 var(--card-rule); }
.gd-order { font-size: .88rem; color: var(--card-soft); text-align: center; margin: .2rem 0 .5rem; }
.gd-attempt { font-weight: 700; color: var(--card-red); margin: .4rem 0; }
.gd-before { background: #f5eedd; border: 1px solid var(--card-rule); border-radius: 8px; padding: .35rem .6rem .4rem; margin: .5rem 0; }
.gd-before h4 { margin: .1rem 0 .2rem; font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--card-soft); }
.gd-before ul { margin: 0; padding-left: 1.1rem; }
.gd-before li { margin: .2rem 0; }
.gd-before li::marker { color: var(--card-red); }

/* result entry */
.gd-q { font-weight: 700; font-size: 1.05rem; margin: .7rem 0 .35rem; }
.gd-firsts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.gd .gd-pbtn { font: inherit; font-weight: 700; min-height: 52px; border-radius: 8px; cursor: pointer; color: #fff; background: var(--team); border: 1px solid var(--team);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .4rem; }
.gd-opts { display: grid; gap: .35rem; }
.gd .gd-opt { font: inherit; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); grid-template-areas: "res who" "res to"; align-items: center; gap: 0 .5rem;
  min-height: 56px; text-align: left; padding: .3rem .55rem; border-radius: 8px; cursor: pointer; background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-line); border-left: 5px solid var(--team); }
.gd-opt.gd-optwin { background: color-mix(in srgb, var(--team) 10%, #fff); }
.gd-res { grid-area: res; font-size: 1.2rem; font-weight: 800; color: var(--team); }
.gd-who { grid-area: who; }
.gd-to { grid-area: to; font-weight: 700; color: var(--team); }
.gd-opt:active, .gd-pbtn:active { transform: translateY(1px); }
.gd-failnote { margin: .4rem 0; }
.gd-back { margin-top: .5rem; }

/* ---- game over ---- */
.gd-over { border-top: 3px double var(--card-rule); padding-top: .4rem; }
.gd-winner { font-size: 1.4rem; font-weight: 800; text-align: center; margin: .4rem 0 .2rem; }
.gd-hint { text-align: center; margin: 0 0 .5rem; }
.gd-tally { margin: .5rem auto; border-collapse: collapse; min-width: 60%; }
.gd-tally caption { font-size: .9rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--card-soft); }
.gd .gd-tally th, .gd .gd-tally td { padding: .3rem .5rem; border: 0; border-bottom: 1px solid var(--card-rule); text-align: left; }
.gd .gd-tally th { border-left: 4px solid var(--team); font-variant-caps: normal; letter-spacing: 0; font-size: 1rem; }
.gd-tally td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd .gd-bigbtn { flex: 1 1 100%; min-height: 52px; }

/* ---- controls and history ---- */
.gd-ctl { margin-top: .8rem; }
.gd-more { margin-top: .6rem; }
.gd-more summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.gd-hist { list-style: none; margin: 0; padding: 0; }
.gd-hist li { border-left: 4px solid var(--team); padding: .2rem .5rem; margin: .3rem 0; background: #fbf6ea; border-radius: 4px; }
.gd-hh { font-size: .82rem; color: var(--card-soft); }
.gd-hl { display: flex; justify-content: space-between; gap: .5rem; }
.gd-hl b { white-space: nowrap; color: var(--team); }
.gd-hx { font-size: .88rem; color: var(--card-red); }
.gd-hx.gd-hwin { color: var(--team); font-weight: 700; }