/* Games: an explicit front door to the existing server-settled contracts. */
.account-pending { display:flex; justify-content:center; align-items:center; width:88px; min-height:40px;
  background:#241f14; border:1px solid #6d5930; border-radius:999px; color:#e6c675; font-size:22px; }
#games-page { max-width:1100px; margin:28px auto 40px; }
.games-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.games-heading p { color:var(--app-accent); font-size:13px; margin:0 0 7px; }
.games-heading h1 { margin:0; font:700 30px/1.2 Inter,Arial,sans-serif; letter-spacing:-.025em; text-wrap:balance; }
.games-heading button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:12px; }
.games-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); gap:40px; }
.games-main,.games-side { min-width:0; }
.games-prematch { display:flex; gap:14px; align-items:center; padding:18px; margin-bottom:16px; border:1px solid #8e7846; border-radius:12px; background:#342b19; color:#fff1ce; }
.games-prematch>div { flex:1; }
.games-prematch h2 { font-size:19px; margin:0 0 6px; }
.games-prematch p { font-size:12px; line-height:1.5; margin:0; color:#ded5c3; }
.game-feature { display:flex; position:relative; overflow:hidden; border-radius:16px; padding:24px; background:#29271e;
  border:1px solid #8e7846; color:var(--app-ink); min-height:235px; }
.game-feature-copy { position:relative; z-index:1; flex:1; }
.game-name { display:flex; align-items:center; gap:10px; font-size:13px; color:#e6c675; }
.game-name svg,.game-icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none; flex-shrink:0; }
.game-feature h2 { font:700 32px/1.15 Inter,Arial,sans-serif; margin:22px 0 10px; letter-spacing:-.03em; }
.game-feature p { font-size:13px; line-height:1.6; max-width:32ch; margin:0; color:#ded5c3; }
.game-feature-action { display:inline-flex; justify-content:space-between; gap:20px; align-items:center; background:#e6c675; color:#211906;
  padding:12px 16px; border-radius:8px; min-height:44px; font-size:13px; font-weight:700; margin-top:22px; }
.game-feature:hover { border-color:#f2d68d; background:#302c20; }
.candle-art { align-self:center; display:flex; align-items:center; justify-content:center; gap:13px; width:160px; height:160px; flex-shrink:0; }
.candle-art i { position:relative; display:block; background:#60d99b; width:15px; height:48px; border-radius:2px; }
.candle-art i::before { content:''; position:absolute; width:2px; inset:-15px auto -12px; left:6px; background:inherit; }
.candle-art i:nth-child(1) { margin-top:40px; height:30px; }
.candle-art i:nth-child(2) { background:#ff8b91; height:22px; margin-top:55px; }
.candle-art i:nth-child(3) { height:60px; margin-top:10px; }
.candle-art i:nth-child(4) { background:#ff8b91; height:35px; margin-top:-20px; }
.candle-art i:nth-child(5) { height:50px; margin-top:-50px; }
.game-rows { margin-top:12px; }
.game-rows a { display:flex; align-items:center; gap:16px; padding:20px 4px; border-bottom:1px solid #3d3629; color:var(--app-ink); min-height:90px; }
.game-rows a>div { flex:1; min-width:0; }
.game-rows a>span:last-child { color:var(--app-accent); }
.game-rows a:hover { background:#211e17; }
.game-icon { width:40px; height:40px; border:1px solid #5b4f36; border-radius:10px; color:#e6c675; display:grid; place-items:center; flex-shrink:0; }
.game-rows h2 { font:600 16px/1.3 Inter,Arial,sans-serif; margin:0 0 5px; }
.game-rows p { color:#c2bbaa; font-size:12px; line-height:1.5; margin:0; max-width:60ch; }
.games-footnote { font-size:11px; color:#c2bbaa; line-height:1.5; margin:16px 0; }
.games-browse { display:block; padding:20px 0 24px; border-block:1px solid #5b4f36; color:var(--app-ink); }
.games-browse>span { display:flex; justify-content:space-between; font-size:19px; font-weight:600; }
.games-browse p { font-size:13px; line-height:1.7; color:#c2bbaa; }
.games-browse small { color:#e6c675; }
.games-session { margin-top:28px; }
.games-session h2 { font:600 16px/1.4 Inter,Arial,sans-serif; margin:0 0 8px; }
.games-session a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; border-bottom:1px solid #3d3629; color:#ded5c3; font-size:13px; }
.games-session b { color:#e6c675; font-variant-numeric:tabular-nums; }
.games-connection { margin-top:24px; font-size:12px; color:#e6c675; }
.games-connection small { display:block; color:#c2bbaa; line-height:1.6; margin-top:8px; }
[data-games-error]:empty { display:none; }
[data-games-error] { font-size:12px; line-height:1.6; color:#ffb6ac; }
#candle-lesson { max-height:calc(100dvh - 24px); }
#candle-lesson h2 { font:600 20px/1.4 Inter,Arial,sans-serif; }
.lesson-notice { font-size:12px; color:#e6c675; line-height:1.5; }
.lesson-tabs { display:flex; gap:6px; margin:18px 0; }
.lesson-tabs button { flex:1; min-width:0; min-height:48px; padding:8px 4px; font-size:12px; }
.lesson-example { display:flex; align-items:center; border-block:1px solid #51462f; padding:14px 0; gap:18px; }
.lesson-example svg { width:40%; }
.lesson-example dl { margin:0; flex:1; }
.lesson-example dl>div+div { margin-top:12px; }
.lesson-example dt { font-size:11px; color:#c2bbaa; }
.lesson-example dd { font-size:22px; font-weight:700; margin:3px 0 0; font-variant-numeric:tabular-nums; }
[data-example-result] { min-height:44px; line-height:1.6; font-size:14px; }
[data-direction=UP] { color:#60d99b; }
[data-direction=DOWN] { color:#ff8b91; }
[data-direction=FLAT] { color:#e6c675; }
.lesson-scale,.lesson-event { font-size:12px; line-height:1.6; color:#c2bbaa; }
#candle-lesson>a { display:flex; align-items:center; min-height:44px; font-size:13px; }
.game-toolbar { grid-column:1/-1; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.game-toolbar>a { font-size:13px; min-height:44px; display:flex; align-items:center; }
.game-toolbar>a::before { content:'←'; margin-right:8px; }
#candle-picker-shortcut { min-height:44px; font-size:13px; padding:8px 10px; }
#game-modes { display:flex; gap:6px; }
#game-modes button { min-height:44px; font-size:13px; }
.game-contract { font-size:12px; line-height:1.55; color:#c2bbaa; }
.slip-duration { display:flex; align-items:center; gap:12px; font-size:12px; margin:14px 0; }
.slip-duration .chips { flex:1; flex-wrap:wrap; }
.slip-duration button { min-height:44px; }
.round-hint { font-size:12px; color:#c2bbaa; line-height:1.5; }
.rounds { flex-wrap:wrap; }
.rounds button { min-height:44px; }
#game .chart-tools button { min-width:44px; min-height:44px; }
#game .selections { margin-bottom:0; }
#game .selections button { min-height:130px; }
.quote-details { color:#d2c4a4; font-size:12px; line-height:1.5; margin-bottom:8px; }
.quote-details summary { display:grid; grid-template-columns:minmax(0,1fr) auto 12px; column-gap:8px; align-items:start; padding:10px 0; min-height:56px; font-size:12px; cursor:pointer; list-style:none; }
.quote-details summary::-webkit-details-marker { display:none; }
.quote-details summary::after { content:'⌄'; grid-column:3; grid-row:1; font-size:16px; }
.quote-details[open] summary::after { content:'⌃'; }
.quote-details [data-quote-source] { color:#fff9ec; }
.quote-details [data-quote-format] { color:#e6c675; font-weight:600; }
.quote-details [data-quote-age] { grid-column:1/-1; min-height:1.5em; font-variant-numeric:tabular-nums; }
.quote-details dl { margin:0 0 12px; padding:12px; border:1px solid #4c432f; border-radius:8px; }
.quote-details dl>div+div { margin-top:10px; }
.quote-details dt { color:#c2bbaa; }
.quote-details dd { margin:2px 0 0; color:#fff9ec; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.quote-details [data-quote-comparison] { min-height:4.5em; }
.candle-unavailable { padding:16px; margin:16px 0; background:#302819; border-left:3px solid #e6c675; border-radius:4px; }
.candle-unavailable h3 { font-size:16px; line-height:1.4; margin:0; }
.candle-unavailable p { color:#e1d5ba; font-size:14px; line-height:1.6; margin:8px 0 12px; }
.candle-unavailable button { min-height:44px; width:100%; font-size:14px; padding:10px; border-color:#e6c675; }
.candle-unavailable a { min-height:44px; display:flex; align-items:center; justify-content:center; font-size:13px; }
#picker { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:16px; background:#211f19; color:#fff9ec; border:1px solid #e6c675; border-radius:12px; }
#picker .section-head { position:sticky; top:-16px; z-index:1; background:#211f19; margin:-16px -16px 12px; padding:16px; border-bottom:1px solid #4c432f; }
#picker h2 { font:600 20px/1.4 Inter,Arial,sans-serif; }
#picker .section-head button { min-height:44px; min-width:44px; }
#picker-search { background:#17150f; color:#fff9ec; border-color:#6d5a2c; }
.picker-filters { display:flex; align-items:center; gap:10px; margin:8px 0; }
.picker-filters label { min-width:0; display:flex; flex:1; align-items:center; gap:8px; min-height:44px; font-size:13px; line-height:1.5; }
.picker-filters input { width:22px; height:22px; min-height:22px; padding:0; flex:none; accent-color:#e6c675; }
.picker-filters button { min-height:44px; font-size:13px; padding:8px; }
.picker-choices { margin:20px 0; }
.picker-choices h3 { font-size:16px; line-height:1.4; overflow-wrap:anywhere; margin:0; }
.picker-choices>p { color:#c2bbaa; font-size:12px; line-height:1.5; margin:5px 0 10px; }
.picker-choice { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; text-align:left; margin:8px 0; padding:12px; border-radius:8px; }
.picker-choice>span,.picker-choice small { grid-column:1/-1; font-size:12px; color:#d2c4a4; line-height:1.5; }
.picker-choice small { min-height:1.5em; }
.picker-choice strong { font-size:15px; overflow-wrap:anywhere; }
.picker-choice b { font-size:16px; font-variant-numeric:tabular-nums; }
.picker-prematch { min-height:44px; display:flex; align-items:center; font-size:14px; }
.picker-empty { font-size:14px; line-height:1.6; }
#trade-sentence,.sentence-box small { color:#c2bbaa; }
#slip .primary:disabled { background:#363329; color:#c7c0b1; border-color:#5b5341; }
@media(max-width:767px) {
  #app-nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding-inline:4px; }
  #app-nav a { min-width:0; font-size:10px; }
  #games-page { margin:16px auto 26px; }
  .games-heading { align-items:flex-start; gap:12px; margin-bottom:16px; flex-direction:column; }
  .games-heading h1 { font-size:26px; }
  .games-heading button { width:100%; background:transparent; padding:10px 0; border:0; border-bottom:1px solid #3d3629; text-align:left; }
  .games-layout { display:block; }
  .game-feature { min-height:220px; padding:20px; }
  .game-feature h2 { font-size:28px; margin-top:18px; }
  .game-feature-copy { width:75%; }
  .game-feature p { max-width:26ch; }
  .candle-art { position:absolute; right:-7px; top:25px; opacity:.3; width:130px; gap:9px; }
  .game-feature-action { margin-top:18px; }
  .game-rows a { padding:16px 2px; gap:12px; }
  .games-side { margin-top:26px; }
  .game-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:4px; }
  .game-toolbar>a { min-height:36px; margin-bottom:4px; }
  #game-modes { width:100%; grid-column:1/-1; }
  #game-modes button { flex:1; padding:8px 4px; font-size:12px; }
  #game { gap:12px; }
  #game .match-strip { min-height:0; padding:12px; }
  #game .hero-meta { font-size:10px; }
  #game .hero-clock { flex-basis:auto; }
  #game .hero-clock b { font-size:18px; }
  #game .hero-teams { padding:10px 0 0; margin:0; }
  #game .hero-team { font-size:16px; }
  #game .hero-team img { width:28px; height:28px; }
  #game .hero-team small { font-size:10px; }
  #game .selections { display:flex; gap:6px; }
  #game .selections button { flex:1; min-width:0; padding:10px 5px 6px; align-content:start; }
  #game .selections strong { font:700 23px/1.3 Inter,Arial,sans-serif; }
  #game .selections button>span:first-child { font-size:14px; line-height:1.4; min-height:2.8em; overflow-wrap:anywhere; }
  #game .selections canvas { height:28px; }
  #game .segmented { gap:4px; }
  #game .segmented button { flex:1; min-width:0; padding:10px 4px; font-size:12px; white-space:normal; }
  #game .chart-heading { padding:10px; }
  #game .chart-wrap { height:220px; }
  #game .score-head { margin:0; }
  #game .chart-tools { gap:4px; }
  #game .chart-tools button { font-size:12px; }
  #game aside.panel { padding:16px; }
  #game aside.panel>h2 { font:600 19px/1.3 Inter,Arial,sans-serif; margin-bottom:4px; }
  #game #slip-subtitle { font-size:12px; line-height:1.5; }
  #game .candle-timer { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:4px; padding:10px 12px; margin:12px 0; }
  #game .candle-timer p { font-size:12px; margin:0; }
  #game #candle-clock { font:700 24px/1.3 Inter,Arial,sans-serif; }
  #game .candle-timer progress { flex-basis:100%; height:4px; margin-top:5px; }
  #game .directions { margin:12px 0; }
  #game .direction { padding:12px 5px; }
  #game .direction strong { font:700 25px/1.4 Inter,Arial,sans-serif; }
  #game .direction small { font-size:10px; line-height:1.5; }
  #game .direction span { font-size:14px; }
  #game .result { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; padding:12px; margin:12px 0; }
  #game .result>span { flex-basis:65%; font-size:12px; }
  #game .result>div { flex-basis:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  #game .result b,#game #gain-mult { font:700 21px/1.4 Inter,Arial,sans-serif; }
  #game .stake-chips { display:flex; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; }
  #game .stake-chips button { min-height:44px; flex-shrink:0; padding:8px 12px; }
}