/* ซุ้มมือปืน — detective comic theme (forked from the Speed Racer theme 2026-10-09). Original header: comic-book theme (user request 2026-10-06). Scoped to #racers only; every other tab keeps the normal theme.
   Paper + halftone dots, thick ink outlines, hard offset shadows, flat bright inks, speech bubbles and "ปัง!" bursts.
   Fonts: Bangers (Latin/numbers, comic lettering) + Itim (Thai, hand-lettered). */
#racers {
  --ink: #141414;
  --paper: #fff8e6;
  --paper-2: #fff2c9;
  --yellow: #ffd23f;
  --red: #ff4b3e;
  --blue: #3fa7ff;
  --cyan: #2ec4b6;
  --pink: #ff6fae;
  --green: #22b573;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  font-family: 'Itim', system-ui, sans-serif;
  color: var(--ink);
}
#racers .racer-shell {
  padding: 18px;
  border: 4px solid var(--ink);
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(20,20,20,.13) 1.2px, transparent 1.4px) 0 0 / 11px 11px,
    var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
#racers h2, #racers h3, #racers .racer-bignum strong, #racers .racer-summary strong, #racers .racer-grandma-total strong {
  font-family: 'Bangers', 'Itim', system-ui, sans-serif;
  letter-spacing: .02em;
}

/* ----- page header: a title caption ----- */
#racers .racer-hero {
  border: 3px solid var(--ink); border-radius: 4px; background: var(--yellow); box-shadow: var(--shadow);
  transform: rotate(-.4deg);
}
#racers .racer-hero h2 { color: var(--ink); font-size: 2.4rem; text-shadow: 3px 3px 0 #fff; }
#racers .racer-hero > div:first-child > p:last-child { color: var(--ink); opacity: .7; }
#racers .racer-mock-badge { border: 2px solid var(--ink); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
#racers .racer-account-strip article { border: 2px solid var(--ink); background: #fff; color: var(--ink); }

/* ----- buttons: inked, pressable ----- */
#racers button {
  font-family: 'Itim', system-ui, sans-serif;
  border: 2.5px solid var(--ink) !important; border-radius: 6px; color: var(--ink) !important;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s;
}
#racers button:not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
#racers button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#racers button:disabled { opacity: .5; box-shadow: none; }
#racers .primary-button, #racers .racer-create, #racers .racer-start { background: var(--yellow) !important; }
#racers .racer-stop-all, #racers .racer-stop { background: var(--red) !important; color: #fff !important; }
#racers .racer-pause { background: var(--blue) !important; color: #fff !important; }
#racers .racer-grandma-call { background: var(--pink) !important; }
#racers .racer-expand { background: #fff !important; }
#racers .position-cut { background: var(--red) !important; color: #fff !important; font-weight: 700; }

/* ----- summary tiles: comic panels, the real P/L is a starburst ----- */
#racers .racer-summary article {
  border: 3px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: var(--shadow); color: var(--ink);
}
#racers .racer-summary article span { color: var(--ink); opacity: .75; font-size: .78rem; }
#racers .racer-summary article strong { color: var(--ink) !important; font-size: 1.9rem; }
#racers .racer-summary-main .racer-real-pnl { background: var(--yellow); transform: rotate(-1deg); }
#racers .racer-summary-main .racer-real-pnl strong { font-size: 2.4rem; text-shadow: 2px 2px 0 #fff; }
#racers .racer-summary-main article:nth-child(2) { background: #d9f2ff; transform: rotate(.6deg); }
#racers .racer-summary-main article:nth-child(3) { background: #ffe0ee; transform: rotate(-.4deg); }
#racers .racer-summary-more { color: var(--ink); }

/* ----- toolbar ----- */
#racers .racer-toolbar strong { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.6rem; letter-spacing: .03em; }
#racers .racer-toolbar span, #racers .racer-toolbar small { color: var(--ink); opacity: .7; }
#racers .racer-grandma-toast { border: 2px solid var(--ink); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
#racers .racer-pause-banner { border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ----- grandma: a panel with a real speech bubble ----- */
#racers .racer-grandma-panel { border: 3px solid var(--ink); border-radius: 4px; background: #ffe9c7; color: var(--ink); box-shadow: var(--shadow); }
#racers .racer-grandma-face { border: 3px solid var(--ink); border-radius: 50%; background: #fff; }
#racers .racer-grandma-bubble { border: 3px solid var(--ink) !important; border-radius: 18px; background: #fff !important; color: var(--ink) !important; font-size: .92rem; box-shadow: var(--shadow-sm); }
#racers .racer-grandma-bubble::before { border-right-color: var(--ink) !important; }
#racers .racer-grandma-bubble[data-mood="grumpy"] { background: #ffd6d2 !important; }
#racers .racer-grandma-body strong, #racers .racer-grandma-body span, #racers .racer-grandma-settings, #racers .racer-grandma-total span, #racers .racer-grandma-total small { color: var(--ink) !important; }
#racers .racer-grandma-total strong { color: var(--red) !important; font-size: 2rem; text-shadow: 2px 2px 0 #fff; }

/* ----- racer cards: comic panels, alternating tilt, mood colour strip ----- */
#racers .racer-card {
  position: relative; border: 3.5px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: var(--shadow); color: var(--ink);
}
#racers .racer-grid > .racer-card:nth-child(odd) { transform: rotate(-.35deg); }
#racers .racer-grid > .racer-card:nth-child(even) { transform: rotate(.35deg); }
#racers .racer-card[data-mood="win"] { background: linear-gradient(#e6fff4, #fff 60%); }
#racers .racer-card[data-mood="lose"] { background: linear-gradient(#ffe6e6, #fff 60%); }
#racers .racer-card h3 { color: var(--ink); font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.5rem; letter-spacing: .03em; }
#racers .racer-sub { color: var(--ink); opacity: .7; }
#racers .racer-face { border: 3px solid var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
#racers .racer-state { border: 2.5px solid var(--ink); border-radius: 3px; background: var(--yellow); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); transform: rotate(2deg); }
#racers .racer-card[data-status="STOPPED"] .racer-state { background: #e8e8e8; }
#racers .racer-card[data-status="RECOVERY_REQUIRED"] .racer-state { background: var(--red); color: #fff; }
#racers .racer-bignum strong { font-size: 2.6rem; line-height: 1; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
#racers .racer-bignum strong.positive { color: var(--green); }
#racers .racer-bignum strong.negative { color: var(--red); }
#racers .racer-bignum strong.neutral { color: #fff; }
#racers .racer-bignum span { color: var(--ink); opacity: .75; font-size: .8rem; }
/* the burst word: a jagged starburst sticker */
#racers .racer-burst {
  position: absolute; top: -6px; right: -4px; padding: 10px 14px; font: normal 1.15rem 'Bangers', 'Itim', sans-serif; letter-spacing: .04em;
  color: var(--ink); background: var(--yellow); border: none;
  clip-path: polygon(50% 0%, 61% 20%, 82% 6%, 78% 30%, 100% 30%, 82% 48%, 98% 66%, 74% 66%, 80% 92%, 58% 76%, 50% 100%, 42% 76%, 20% 92%, 26% 66%, 2% 66%, 18% 48%, 0% 30%, 22% 30%, 18% 6%, 39% 20%);
  filter: drop-shadow(2px 2px 0 var(--ink));
  transform: rotate(8deg); animation: comic-pop .5s ease-out;
}
#racers .racer-burst.lose { background: var(--pink); }
@keyframes comic-pop { 0% { transform: rotate(8deg) scale(.2); } 70% { transform: rotate(8deg) scale(1.15); } 100% { transform: rotate(8deg) scale(1); } }

/* position pills: stickers */
#racers .racer-pill { border: 2.5px solid var(--ink) !important; border-radius: 6px; box-shadow: var(--shadow-sm); color: var(--ink) !important; font-size: .82rem; }
#racers .racer-pill b { color: var(--ink); }
#racers .racer-pill.up { background: #c9f7df; } #racers .racer-pill.up span { color: #0b6b3f; font-weight: 700; }
#racers .racer-pill.down { background: #ffd2d2; } #racers .racer-pill.down span { color: #b3121f; font-weight: 700; }
#racers .racer-pill.near { background: var(--yellow); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--ink); }

#racers .racer-drain-line, #racers .racer-drain-banner { border: 2.5px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-sm); }
#racers .racer-scan small, #racers .racer-scan-line { color: var(--ink); opacity: .7; }
#racers .racer-details { border-top: 3px dashed var(--ink); }
#racers .racer-details, #racers .racer-details * { color: var(--ink); }
#racers .racer-details .racer-mini-chart { border: 2.5px solid var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
#racers .racer-details .racer-chips span { border: 2px solid var(--ink); background: #fff; color: var(--ink); }
#racers .racer-details .racer-money div, #racers .racer-details .racer-plan { border: 2px solid var(--ink); background: #fff; }

/* sleeping card */
#racers .racer-card-sleeping { background: #eee; opacity: 1; }

/* history: a strip panel */
#racers .racer-history { border: 3px solid var(--ink); border-radius: 4px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
#racers .racer-history th, #racers .racer-history td { color: var(--ink); border-color: #ddd; }
#racers .racer-history .positive { color: #0b6b3f; font-weight: 700; } #racers .racer-history .negative { color: #b3121f; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  #racers .racer-burst { animation: none; }
  #racers .racer-grid > .racer-card, #racers .racer-hero, #racers .racer-summary-main article { transform: none; }
}
#racers .racer-history-head strong, #racers .racer-history-head span, #racers .racer-history-head small { color: var(--ink) !important; opacity: 1; }
#racers .racer-history-head strong { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.3rem; letter-spacing: .03em; }

/* ======================= Overview — same comic theme, one-page summary (user request 2026-10-06) ======================= */
#overview {
  --ink: #141414; --paper: #fff8e6; --yellow: #ffd23f; --red: #ff4b3e; --blue: #3fa7ff; --pink: #ff6fae; --green: #22b573;
  --shadow: 5px 5px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
  font-family: 'Itim', system-ui, sans-serif; color: var(--ink);
  padding: 16px; border: 4px solid var(--ink); border-radius: 6px;
  background: radial-gradient(circle, rgba(20,20,20,.13) 1.2px, transparent 1.4px) 0 0 / 11px 11px, var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
}
/* layout only while the tab is the active one: a display rule on #overview itself overrode the tab hiding and showed Overview inside other tabs */
#overview.active:not([hidden]) { display: grid; gap: 14px; }
#overview > section:not([hidden]) { margin: 0; }
#overview h3, #overview h4, #overview strong { font-family: 'Bangers', 'Itim', sans-serif; letter-spacing: .02em; }
#overview .eyebrow { font-family: 'Bangers', sans-serif; letter-spacing: .12em; color: var(--red) !important; }
#overview button { font-family: 'Itim', sans-serif; border: 2.5px solid var(--ink) !important; border-radius: 6px; background: #fff; color: var(--ink) !important; box-shadow: var(--shadow-sm); }
#overview button:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* pixel corner -> the front page panel */
#overview .pixel-corner { border: 3.5px solid var(--ink) !important; border-radius: 4px; background: #fff !important; box-shadow: var(--shadow) !important; color: var(--ink); padding: 14px; }
#overview .pixel-corner * { color: var(--ink); }
#overview .pc-head h3 { font-size: 1.7rem; }
#overview .pc-badge { border: 2.5px solid var(--ink) !important; background: var(--yellow) !important; color: var(--ink) !important; box-shadow: var(--shadow-sm); }
#overview .pc-badge.pc-alert { background: var(--red) !important; color: #fff !important; }
#overview .pc-stage { gap: 12px; }
#overview .pc-teacher-art { border: 3px solid var(--ink); border-radius: 50%; background: #d9f2ff; box-shadow: var(--shadow-sm); overflow: hidden; }
#overview .pc-bubble { position: relative; border: 3px solid var(--ink) !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--shadow-sm); }
#overview .pc-bubble li { font-size: .88rem; }
#overview .pc-score article { border: 3px solid var(--ink) !important; border-radius: 4px; background: #fff !important; box-shadow: var(--shadow) !important; }
#overview .pc-score article strong { font-size: 2rem !important; }
#overview .pc-score article:nth-child(1) { background: #d9f2ff !important; transform: rotate(-.6deg); }
#overview .pc-score article:nth-child(2) { background: #ffe0ee !important; transform: rotate(.5deg); }
#overview .pc-score article.up { background: #c9f7df !important; transform: rotate(-1deg); }
#overview .pc-score article.down { background: #ffd2d2 !important; transform: rotate(-1deg); }
#overview .pc-score article.up strong { color: #0b6b3f !important; } #overview .pc-score article.down strong { color: #b3121f !important; }
#overview .pc-money-fold > summary { cursor: pointer; font-family: 'Itim', sans-serif; }
#overview .pc-money article { border: 2.5px solid var(--ink) !important; background: #fff !important; box-shadow: var(--shadow-sm) !important; }
#overview .pc-foot { opacity: .7; font-size: .72rem; }

/* grandma report */
#overview .grandma-report { border: 3.5px solid var(--ink) !important; border-radius: 4px; background: #ffe9c7 !important; box-shadow: var(--shadow) !important; color: var(--ink) !important; padding: 12px 14px; }
#overview .grandma-report * { color: var(--ink) !important; }
#overview .gr-face { border: 3px solid var(--ink); border-radius: 50%; background: #fff; }
#overview .gr-say { border: 3px solid var(--ink); border-radius: 16px; background: #fff !important; box-shadow: var(--shadow-sm); }
#overview .gr-stats { margin: 8px 0 4px; }
#overview .gr-stats article { border: 2.5px solid var(--ink) !important; background: #fff !important; box-shadow: var(--shadow-sm); }
#overview .gr-stats strong { font-size: 1.5rem; }
#overview .gr-stats strong.up { color: #0b6b3f !important; }
#overview .gr-fold > summary { cursor: pointer; font-size: .78rem; }
#overview .grandma-report .ms-note { display: none; }   /* one page: the long note lives in the research docs */

/* crew: comic strip */
#overview .crew { border: 3.5px solid var(--ink) !important; border-radius: 4px; background: #fff !important; box-shadow: var(--shadow) !important; color: var(--ink); padding: 12px 14px; }
#overview .crew * { color: var(--ink); }
#overview .crew-head h3, #overview .crew-head h2 { font-size: 1.5rem; }
#overview .crew-grid > * { border: 3px solid var(--ink) !important; border-radius: 4px !important; background: #fffdf5 !important; box-shadow: var(--shadow-sm) !important; }
#overview .crew-grid > *:nth-child(odd) { transform: rotate(-.5deg); } #overview .crew-grid > *:nth-child(even) { transform: rotate(.5deg); }
#overview .crew-art { border: 3px solid var(--ink); border-radius: 50%; background: #d9f2ff; }
#overview .crew-bubble { border: 2.5px solid var(--ink) !important; border-radius: 14px !important; background: #fff !important; font-size: .8rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* one page: three lines at most */
#overview .crew-crown { border: 2px solid var(--ink); background: var(--yellow) !important; box-shadow: var(--shadow-sm); }
#overview .crew-note, #overview .crew-foot { opacity: .75; font-size: .72rem; }

/* scoreboard: folded strip */
#overview .score-card { border: 3px solid var(--ink) !important; border-radius: 4px; background: #fff !important; box-shadow: var(--shadow) !important; color: var(--ink); }
#overview .score-card * { color: var(--ink); }
#overview .score-card .up { color: #0b6b3f !important; } #overview .score-card .down { color: #b3121f !important; }

@media (prefers-reduced-motion: reduce) { #overview .pc-score article, #overview .crew-grid > * { transform: none; } }
#overview .pc-teacher, #overview .pc-stage > section:first-child { background: #d9f2ff !important; border: 3px solid var(--ink) !important; border-radius: 4px !important; box-shadow: var(--shadow-sm) !important; }
#overview .pc-teacher-art { background: #fff; }

/* ===== Racers bigger, drawn as line-art cartoons (user request 2026-10-06) =====
   Every filled shape of the crew avatar gets an ink outline; strokes that are already lines (fill="none") keep their own width. */
/* only the big shapes (body, head, hair) get the ink line: eyes, cheeks and mouth stay clean (outlining them made faces look wrong) */
:is(#overview, #racers) .crew-avatar .ink :is(ellipse, circle, rect, path, polygon)[fill]:not([fill="none"]) {
  stroke: #141414; stroke-width: 1.6px; stroke-linejoin: round;
}
:is(#overview, #racers) .crew-avatar { filter: drop-shadow(2px 3px 0 rgba(20,20,20,.9)); }
/* ซุ้มมือปืน card: a big portrait on the left of the name */
#racers .racer-face { flex: 0 0 104px; width: 104px; height: 104px; border-width: 3.5px; background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #d9f2ff; }
#racers .racer-card-compact .racer-card-head { align-items: flex-start; }
#racers .racer-card-compact .racer-card-head h3 { font-size: 1.8rem; line-height: 1; margin-top: 8px; }
/* Overview crew: bigger portraits */
#overview .crew-art { width: 150px !important; height: 150px !important; flex: 0 0 150px; background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #d9f2ff !important; display: grid; place-items: center; overflow: hidden; }
#overview .crew-art svg { width: 146px !important; height: 146px !important; }
#overview .crew-name { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.4rem; letter-spacing: .03em; }
@media (max-width: 640px) { #racers .racer-face { flex-basis: 76px; width: 76px; height: 76px; } #overview .crew-art { width: 110px !important; height: 110px !important; flex-basis: 110px; } #overview .crew-art svg { width: 106px !important; height: 106px !important; } }
#racers .racer-face { flex-basis: 128px; width: 128px; height: 128px; }
#racers .racer-burst { font-size: 1.45rem; padding: 14px 18px; }
@media (max-width: 640px) { #racers .racer-face { flex-basis: 84px; width: 84px; height: 84px; } }
/* no flashing on the ซุ้มมือปืน page (user request 2026-10-06): cards are redrawn on every price tick, so any entry animation repeats */
#racers .racer-pill.near, #racers .racer-grandma-badge { animation: none !important; }
/* grandma bigger (user request 2026-10-06) */
#racers .racer-grandma-face { flex: 0 0 auto; padding: 4px; }
#racers .racer-grandma-face svg { width: 128px; height: 128px; }
#overview .gr-face svg { width: 120px; height: 120px; }
@media (max-width: 640px) { #racers .racer-grandma-face svg { width: 92px; height: 92px; } #overview .gr-face svg { width: 92px; height: 92px; } }

/* Numbers in Lilita One (user request 2026-10-06): Bangers' 7 looked like a 1 or a slash. Headings and names stay in Bangers. */
:is(#racers, #overview) :is(.racer-bignum strong, .racer-summary strong, .racer-grandma-total strong, .racer-pill span, .pc-score strong, .pc-money strong, .gr-stats strong, .racer-history td.num, .racer-money strong) {
  font-family: var(--num-font, 'Lilita One'), 'Itim', system-ui, sans-serif !important; letter-spacing: .01em;
}


/* Grandma uses the number font too (user request 2026-10-06). Lilita One has no Thai letters, so Thai falls back to Itim and digits/latin use Lilita One. */
#racers :is(.racer-grandma-panel, .racer-grandma-panel *, .racer-grandma-toast), #overview :is(.grandma-report, .grandma-report *) {
  font-family: var(--num-font, 'Lilita One'), 'Itim', system-ui, sans-serif !important;
}

/* Toolbar + grandma in ONE frame (user request 2026-10-06: save space). Grandma's button stays on the left, พักเข้าไม้/STOP ALL on the right. */
#racers .racer-command-frame { margin: 12px 0; padding: 10px 12px; border: 3.5px solid var(--ink); border-radius: 4px; background: #ffe9c7; box-shadow: var(--shadow); display: grid; gap: 8px; }
#racers .racer-command-frame .racer-toolbar { margin: 0; }
#racers .racer-command-frame .racer-grandma-panel { margin: 0; padding: 8px 4px 2px; border: none !important; border-top: 2.5px dashed var(--ink) !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
#racers .racer-command-frame .racer-grandma-toast, #racers .racer-command-frame .racer-pause-banner { margin: 0; }
/* Whole card tinted by the open result (user request 2026-10-06): light green when the held positions are in profit, light pink when in loss. */
#racers .racer-card[data-mood="win"] { background: radial-gradient(circle, rgba(20,20,20,.07) 1px, transparent 1.2px) 0 0 / 9px 9px, #d8f7e6 !important; }
#racers .racer-card[data-mood="lose"] { background: radial-gradient(circle, rgba(20,20,20,.07) 1px, transparent 1.2px) 0 0 / 9px 9px, #ffe0e0 !important; }

/* ===== Command frame tidy-up (user request 2026-10-06) ===== */
/* top row on ONE line: grandma button | title · updated · font · wake-all | pause · STOP ALL */
#racers .racer-command-frame .racer-toolbar { display: flex; align-items: center; gap: 12px; }
#racers .racer-command-frame .racer-toolbar > .racer-toolbar-title { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 4px; }
#racers .racer-command-frame .racer-toolbar-title strong { font-size: 1.5rem; line-height: 1; }
#racers .racer-command-frame .racer-toolbar-title #racerUpdatedAt { font-size: .72rem; }
#racers .racer-command-frame .racer-sleep-all { margin: 0; }
/* grandma row: face | bubble + small lines | collected sticker */
#racers .racer-command-frame .racer-grandma-panel:not([hidden]) { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; }
#racers .racer-grandma-body { display: grid; gap: 6px; min-width: 0; }
#racers .racer-grandma-bubble { justify-self: start; max-width: 680px; padding: 12px 16px !important; font-size: 1.02rem !important; line-height: 1.4; }
#racers .racer-grandma-bubble::before { top: 50% !important; transform: translateY(-50%); }
#racers .racer-grandma-body > strong#racerGrandmaTitle { font-size: .8rem; opacity: .8; font-weight: 400; }
#racers .racer-grandma-settings { font-size: .76rem; }
#racers .racer-grandma-total {
  display: grid; justify-items: center; gap: 0; padding: 10px 16px 8px; min-width: 150px;
  border: 3px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: var(--shadow-sm); transform: rotate(-2deg);
}
#racers .racer-grandma-total span { font-size: .74rem; }
#racers .racer-grandma-total strong { font-size: 2rem !important; line-height: 1.05; color: var(--red) !important; text-shadow: 2px 2px 0 #fff; }
#racers .racer-grandma-total small { font-size: .74rem; }
@media (max-width: 760px) {
  #racers .racer-command-frame .racer-toolbar { flex-wrap: wrap; }
  #racers .racer-command-frame .racer-grandma-panel:not([hidden]) { grid-template-columns: auto minmax(0, 1fr); }
  #racers .racer-grandma-total { grid-column: 1 / -1; justify-self: start; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #racers .racer-grandma-total { transform: none; } }
/* Overview: grandma's praise and advice lines, racers' story lines */
#overview .gr-say p { margin: 0; }
#overview .gr-say p + p { margin-top: 4px; }
#overview .gr-praise { font-weight: 700; }
#overview .gr-tip { font-size: .86rem; }
#overview .crew-bubble { -webkit-line-clamp: unset !important; display: block !important; }
#overview .crew-bubble ul { margin: 4px 0 0; padding-left: 0; list-style: none; display: grid; gap: 3px; }
#overview .crew-bubble li { font-size: .82rem; line-height: 1.35; }

/* ===== Overview crew: portrait on top, speech bubble below, mood colours (user request 2026-10-06) ===== */
#overview .crew-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
#overview .crew-grid > .crew-card { display: flex !important; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 12px; min-height: 0; }
#overview .crew-card .crew-art { width: 150px !important; height: 150px !important; margin-top: 4px; }
#overview .crew-card .crew-bubble { width: 100%; min-height: 0; padding: 10px 12px; text-align: left; }
#overview .crew-card .crew-bubble::before { left: 50% !important; top: -9px; bottom: auto !important; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #fff !important; border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); }
#overview .crew-card footer { width: 100%; }
#overview .crew-card .crew-name { text-align: center; margin: 0 0 4px; }
#overview .crew-card .crew-name small { display: block; font-family: 'Itim', sans-serif; font-size: .7rem; letter-spacing: 0; opacity: .7; }
#overview .crew-card .crew-crown { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 4px; transform: rotate(6deg); z-index: 1; }
#overview .crew-card .crew-pnl { font-family: 'Lilita One', 'Itim', sans-serif; font-size: 1.2rem; }
#overview .crew-card .crew-pnl.up { color: #0b6b3f !important; } #overview .crew-card .crew-pnl.down { color: #b3121f !important; }
/* mood colours: card paper tint + portrait background */
#overview .crew-card.mood-star, #overview .crew-card.mood-happy { background: #d8f7e6 !important; }
#overview .crew-card.mood-calm, #overview .crew-card.mood-rookie { background: #e3f1ff !important; }
#overview .crew-card.mood-worried { background: #fff3c4 !important; }
#overview .crew-card.mood-cry { background: #ffe0e0 !important; }
#overview .crew-card.mood-sick { background: #ffd2c7 !important; }
#overview .crew-card.mood-sleep { background: #ececec !important; opacity: 1; }
#overview .crew-card.mood-star .crew-art, #overview .crew-card.mood-happy .crew-art { background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #9ff0c4 !important; }
#overview .crew-card.mood-cry .crew-art, #overview .crew-card.mood-sick .crew-art { background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #ffb3b3 !important; }
#overview .crew-card.mood-worried .crew-art { background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #ffe27a !important; }
#overview .crew-card.mood-sleep .crew-art { background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.2px) 0 0 / 7px 7px, #d6d6d6 !important; }
#overview .crew-card.leader { box-shadow: 0 0 0 3px var(--yellow), 6px 6px 0 var(--ink) !important; }

/* "เงินของเรา" always open, colourful comic tiles (user request 2026-10-06) */
#overview .pc-money-box { margin-top: 12px; }
#overview .pc-money-box > .pc-sub { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.35rem; letter-spacing: .03em; margin: 0 0 8px; }
#overview .pc-money-box > .pc-sub small { font-family: 'Itim', sans-serif; font-size: .74rem; letter-spacing: 0; opacity: .7; margin-left: 6px; }
#overview .pc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
#overview .pc-money article { display: grid; gap: 2px; padding: 10px 12px; border: 3px solid var(--ink) !important; border-radius: 6px; box-shadow: var(--shadow-sm) !important; }
#overview .pc-money article:nth-child(1) { background: #d9f2ff !important; transform: rotate(-.8deg); }
#overview .pc-money article:nth-child(2) { background: #fff1a8 !important; transform: rotate(.6deg); }
#overview .pc-money article:nth-child(3) { background: #e9dcff !important; transform: rotate(-.5deg); }
#overview .pc-money article:nth-child(4) { background: #ffe0ee !important; transform: rotate(.7deg); }
#overview .pc-money article:nth-child(5) { background: #d8f7e6 !important; transform: rotate(-.6deg); }
#overview .pc-money article.up strong { color: #0b6b3f !important; }
#overview .pc-money article.down strong { color: #b3121f !important; }
#overview .pc-money article span { font-size: .78rem; }
#overview .pc-money article strong { font-family: 'Lilita One', 'Itim', sans-serif !important; font-size: 1.55rem !important; text-shadow: 2px 2px 0 #fff; }
#overview .pc-money article small { font-size: .7rem; opacity: .75; }
#overview .pc-money article em { font-style: normal; font-size: .68rem; opacity: .7; }
@media (prefers-reduced-motion: reduce) { #overview .pc-money article { transform: none; } }

/* Scoreboard in the comic theme: the global table styles gave the header and the hovered row a dark navy background under black text */
#overview .score-card table { border-collapse: separate; border-spacing: 0; }
#overview .score-card thead tr, #overview .score-card thead th { background: var(--yellow) !important; color: var(--ink) !important; border-bottom: 3px solid var(--ink) !important; }
#overview .score-card th small { color: var(--ink) !important; opacity: .7; }
#overview .score-card tbody tr, #overview .score-card tbody td { background: transparent !important; color: var(--ink) !important; border-bottom: 1.5px solid #e2dccb !important; }
#overview .score-card tbody tr:hover td { background: #fff3c4 !important; }
#overview .score-card tbody tr.sc-total td { background: #e3f1ff !important; border-top: 2.5px solid var(--ink) !important; font-weight: 700; }
#overview .score-card td small { color: var(--ink) !important; opacity: .65; }
#overview .score-card .sc-verdict i { background: #e2dccb; }
/* crew card P/L: keep the sign and the number on one line */
#overview .crew-card footer { flex-wrap: nowrap; }
#overview .crew-card .crew-pnl { white-space: nowrap; }
#overview .crew-card .crew-note { text-align: right; }
/* ลานจอด: sleeping racers in one full-width strip under the running cards */
#racers .racer-parking { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 3px dashed var(--ink); border-radius: 6px; background: rgba(255,255,255,.55); }
#racers .racer-parking-title { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.15rem; letter-spacing: .03em; margin-right: 4px; }
#racers .racer-parking .racer-card-sleeping { transform: none !important; width: auto; padding: 6px 10px; gap: 8px; box-shadow: var(--shadow-sm); }
#racers .racer-parking .racer-card-sleeping .racer-sleep-meta { flex: 0 0 auto; }
/* ลานจอด on ONE row (user request 2026-10-06): no wrapping; compact chips; scrolls sideways only if there are very many */
#racers .racer-parking { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 8px 10px; scrollbar-width: thin; }
#racers .racer-parking-title { flex: 0 0 auto; font-size: 1rem; white-space: nowrap; }
#racers .racer-parking .racer-card-sleeping { flex: 0 0 auto; padding: 4px 8px; gap: 6px; font-size: .78rem; white-space: nowrap; }
#racers .racer-parking .racer-card-sleeping strong { font-size: .85rem; }
#racers .racer-parking .racer-card-sleeping .racer-sleep-icon { font-size: .9rem; }
#racers .racer-parking .racer-card-sleeping .racer-wake { padding: 2px 8px; font-size: .7rem; }
/* Overview: parked racers in one row under the crew cards */
#overview .crew-parking { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border: 3px dashed var(--ink); border-radius: 6px; background: rgba(255,255,255,.6); }
#overview .crew-parking[hidden] { display: none !important; }
#overview .crew-parking-title { flex: 0 0 auto; font-family: 'Bangers', 'Itim', sans-serif; font-size: 1rem; letter-spacing: .03em; white-space: nowrap; }
#overview .crew-parked { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border: 2.5px solid var(--ink); border-radius: 999px; background: #ececec; box-shadow: var(--shadow-sm); font-size: .8rem; white-space: nowrap; }
#overview .crew-parked-art svg { display: block; width: 34px; height: 34px; border-radius: 50%; }
#overview .crew-parked b { font-family: 'Lilita One', 'Itim', sans-serif; font-weight: 400; }
#overview .crew-parked b.up { color: #0b6b3f; } #overview .crew-parked b.down { color: #b3121f; }
/* custom picture avatar: fills the round frame */
:is(#overview, #racers) .crew-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #ffd23f; }
#overview .crew-art .crew-avatar-img { width: 146px; height: 146px; }
/* Square app-icon frames for every racer picture (user request 2026-10-06) */
#racers .racer-face, #overview .crew-art, :is(#overview, #racers) .crew-avatar, :is(#overview, #racers) .crew-avatar-img,
#overview .crew-parked-art svg, #racers .racer-grandma-face, #overview .gr-face { border-radius: 22% !important; }
#racers .racer-face, #overview .crew-art { overflow: hidden; }
#overview .crew-parked { border-radius: 10px; }
#racers .racer-style-change { display: inline-flex; gap: 6px; align-items: center; }
#racers .racer-style-select { font: inherit; font-size: .74rem; padding: 3px 6px; border: 2.5px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); }
#racers .racer-style-change { display: inline-flex; gap: 6px; align-items: center; }
#racers .racer-style-select { font: inherit; font-size: .74rem; padding: 3px 6px; border: 2.5px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); }
/* Grandma's collected money: green and bigger (user request 2026-10-06) */
#racers .racer-grandma-total strong { color: #0a7a3a !important; font-size: 2.6rem !important; text-shadow: 2px 2px 0 #141414; }
.racer-turbo-note { display: block; font-size: .7rem; opacity: .75; margin-top: 2px; }
/* Turbo badge on a racer's picture (user request 2026-10-06) */
:is(#racers, #overview) .racer-face, :is(#racers, #overview) .crew-art { position: relative; }
.turbo-badge { position: absolute; right: -6px; bottom: -6px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 4px;
  background: linear-gradient(180deg, #ff6a2b, #e0201b); color: #fff; font-family: var(--num-font, 'Lilita One'), sans-serif; font-size: .82rem; letter-spacing: .02em;
  border: 2.5px solid #141414; border-radius: 999px; box-shadow: 2px 2px 0 #141414; transform: rotate(-6deg); white-space: nowrap; z-index: 2; text-shadow: 1px 1px 0 #141414; }
/* Parked-racer actions: wrap instead of squeezing; style change gets its own full row (2026-10-06) */
#racers .racer-card-actions { flex-wrap: wrap; }
#racers .racer-card-actions button { white-space: nowrap; }
#racers .racer-style-change { flex: 1 1 100%; order: 10; display: flex; }
#racers .racer-style-change .racer-style-select { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: .85rem; }
#racers .racer-style-change { flex-direction: column; align-items: stretch; gap: 6px; }
#racers .racer-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#racers .racer-style-chip { min-height: 32px !important; padding: 4px 9px !important; font-size: .78rem; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); }
#racers .racer-style-chip.selected { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
#racers .racer-style-save:disabled { opacity: .5; }
/* SL / Entry / TP boxes under the gauge and the LONG/SHORT tag: readable comic colours (2026-10-06) */
#racers .racer-levels span { background: #fff !important; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 4px !important; text-align: center; }
#racers .racer-levels span:nth-child(1) { background: #ffe1de !important; }
#racers .racer-levels span:nth-child(2) { background: #fff6d6 !important; }
#racers .racer-levels span:nth-child(3) { background: #dcf5e6 !important; }
#racers .racer-levels small { color: var(--ink) !important; font-weight: 700; font-size: .55rem !important; opacity: .8; }
#racers .racer-levels strong { color: var(--ink) !important; font-size: .58rem !important; }
#racers .racer-mini-chart figcaption span.long { color: #fff !important; background: #0a7a3a !important; border: 2px solid var(--ink); }
#racers .racer-mini-chart figcaption span.short { color: #fff !important; background: #d7261e !important; border: 2px solid var(--ink); }
/* User 2026-10-06: remove the SL/Entry/TP boxes under the gauge */
#racers .racer-levels { display: none !important; }
/* User 2026-10-06: remove the BID/ASK/SP/costs text under the gauge */
#racers .racer-quote-strip { display: none !important; }
#racers .racer-turbo-label { align-self: center; font-weight: 700; font-size: .74rem; }
#racers .racer-turbo-chip { min-height: 32px !important; padding: 4px 10px !important; font-size: .8rem; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); }
#racers .racer-turbo-chip.selected { background: linear-gradient(180deg, #ff6a2b, #e0201b); color: #fff; box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
#racers .racer-turbo-save:disabled { opacity: .5; }
/* Turbo label beside a racer's name (user request 2026-10-06) */
.turbo-label { display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: middle; background: linear-gradient(180deg, #ff6a2b, #e0201b);
  color: #fff !important; font-family: var(--num-font, 'Lilita One'), sans-serif; font-size: .62em; letter-spacing: .03em; line-height: 1.4;
  border: 2px solid #141414; border-radius: 999px; box-shadow: 1.5px 1.5px 0 #141414; text-shadow: 1px 1px 0 #141414; white-space: nowrap; transform: rotate(-3deg); }
/* User 2026-10-06: Turbo shown only beside the name, not on the picture */
.turbo-badge { display: none !important; }
/* Closed-total split: grandma vs other trades (user 2026-10-06) */
#overview .pc-split { font-style: normal; font-weight: 700; }
#overview .pc-split b.up { color: #0a7a3a; }
#overview .pc-split b.down { color: #d7261e; }
/* Closed history: readable header and bigger rows (user 2026-10-06) */
#racers .racer-history thead th, #racers .racer-history th { background: var(--yellow) !important; color: var(--ink) !important; font-weight: 800; font-size: .82rem !important; border-bottom: 3px solid var(--ink); padding: 8px 10px !important; }
#racers .racer-history td { font-size: .9rem !important; padding: 8px 10px !important; color: var(--ink); }
#racers .racer-history td.num { font-size: 1rem !important; }
#racers .racer-history tbody tr:nth-child(even) td { background: #fff8e6; }
#racers .racer-history tbody tr:hover td { background: #ffeeb0; }
/* User 2026-10-06: small detail text on the racer cards is bigger */
#racers :is(.racer-chips span, .racer-plan-head span, .racer-plan-head strong, .racer-plan-list > p, .racer-plan-row span, .racer-plan-row small,
  .racer-money span, .racer-last-closed, .racer-log-list p, .racer-account-strip span, .racer-allocation small, .racer-boundary,
  .racer-drain-line, .racer-draining, .racer-chart-note, .racer-gate-progress small, .racer-sub, .racer-scan, .racer-scan *, .racer-sleep-meta,
  .racer-history-head span, .racer-history-head small) { font-size: .82rem !important; line-height: 1.35; }
#racers :is(.racer-bignum span, .racer-pill, .racer-mini-chart figcaption span, .racer-drain, .racer-drain-cancel, .racer-guard-message, .racer-grandma-settings) { font-size: .86rem !important; }
#racers .racer-money strong { font-size: 1.15rem !important; }
/* Bigger again (user 2026-10-06: still too small) */
#racers :is(.racer-chips span, .racer-plan-head span, .racer-plan-head strong, .racer-plan-list > p, .racer-plan-row span, .racer-plan-row small,
  .racer-money span, .racer-last-closed, .racer-log-list p, .racer-account-strip span, .racer-allocation small, .racer-boundary,
  .racer-drain-line, .racer-draining, .racer-chart-note, .racer-gate-progress small, .racer-sub, .racer-scan, .racer-scan *, .racer-sleep-meta,
  .racer-history-head span, .racer-history-head small, .racer-card small, .racer-card p, .racer-card em) { font-size: 1.05rem !important; line-height: 1.4; }
#racers :is(.racer-bignum span, .racer-pill, .racer-mini-chart figcaption span, .racer-drain, .racer-drain-cancel, .racer-guard-message, .racer-grandma-settings) { font-size: 1.1rem !important; }
#racers .racer-card button, #racers .racer-expand, #racers .racer-stop, #racers .racer-wake, #racers .racer-style-chip, #racers .racer-turbo-chip { font-size: 1rem !important; }
#racers .racer-card :is(.racer-quote-strip, .position-cut) { font-size: .95rem !important; }
#racers .racer-mini-chart strong { font-size: 1.15rem !important; }
#racers .racer-money strong { font-size: 1.4rem !important; }
#racers .racer-money span { font-size: 1rem !important; }
#racers .racer-parking * , #racers .racer-parking-title { font-size: 1.05rem !important; }
#racers .racer-history th { font-size: 1rem !important; }
#racers .racer-history td { font-size: 1.1rem !important; padding: 10px 12px !important; }
#racers .racer-history td.num { font-size: 1.2rem !important; }
#racers .racer-history-pager button, #racers .racer-history-pager span { font-size: 1.05rem !important; }
.turbo-label { font-size: .7em; }
/* Money panel now has 7 tiles (user 2026-10-06) */
#overview .pc-money article:nth-child(1) { background: #fff1a8 !important; }
#overview .pc-money article:nth-child(2) { background: #d9f2ff !important; }
#overview .pc-money article:nth-child(3) { background: #e9dcff !important; }
#overview .pc-money article:nth-child(4) { background: #ffe0b8 !important; }
#overview .pc-money article:nth-child(5) { background: #ffe0ee !important; }
#overview .pc-money article:nth-child(6) { background: #dff0ff !important; }
#overview .pc-money article:nth-child(7) { background: #d8f7e6 !important; }
#overview .pc-money article span { font-size: .9rem; }
#overview .pc-money article small { font-size: .82rem; }
#overview .pc-money article em { font-size: .8rem; }
/* Money panel: two labelled rows, equal tiles, no tilt (user 2026-10-06: ordering and sizes were confusing) */
#overview .pc-group { margin: 14px 0 6px; font-family: 'Itim', sans-serif; font-size: 1.05rem; font-weight: 700; }
#overview .pc-money.pc-money-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#overview .pc-money.pc-money-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { #overview .pc-money.pc-money-3, #overview .pc-money.pc-money-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#overview .pc-money article { transform: none !important; min-height: 118px; align-content: start; gap: 4px; }
#overview .pc-money article span { font-size: 1rem; font-weight: 700; }
#overview .pc-money article strong { font-size: 1.9rem !important; line-height: 1.1; }
#overview .pc-money article small { font-size: .88rem; }
#overview .pc-money article em { font-size: .84rem; }
#overview .pc-money article.k-in { background: #d9f2ff !important; }
#overview .pc-money article.k-wallet { background: #fff1a8 !important; }
#overview .pc-money article.k-free { background: #d8f7e6 !important; }
#overview .pc-money article.k-closed { background: #e9dcff !important; }
#overview .pc-money article.k-gran { background: #ffe0b8 !important; }
#overview .pc-money article.k-other { background: #ffe0ee !important; }
#overview .pc-money article.k-open { background: #dff0ff !important; }
/* Grandma's daily line inside her tile (user 2026-10-06) */
#overview .pc-money article.k-gran em { display: block; }
#overview .pc-spark { display: block; width: 100%; height: 40px; margin-top: 6px; overflow: visible; }
#overview .pc-spark-line { fill: none; stroke: #0a7a3a; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
#overview .pc-spark-zero { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .4; }
#overview .pc-spark-dot { fill: #fff; stroke: #0a7a3a; stroke-width: 1.6; }
#overview .pc-spark-note { display: block; font-size: .82rem; font-weight: 700; }
/* Grandma report: daily line chart (user 2026-10-06) */
#overview .gr-chart { margin: 10px 0 4px; padding: 8px 12px 4px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow-sm); }
#overview .gr-chart h4 { margin: 0 0 2px; font-family: 'Itim', sans-serif; font-size: 1rem; }
#overview .gr-chart svg { display: block; width: 100%; height: auto; max-height: 190px; }
#overview .gr-line { fill: none; stroke: #0a7a3a; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
#overview .gr-zero { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; opacity: .35; }
#overview .gr-dot { fill: #fff; stroke: #0a7a3a; stroke-width: 3; }
#overview .gr-val { font-family: 'Lilita One', 'Itim', sans-serif; font-size: 13px; fill: #0a7a3a; }
#overview .gr-day { font-family: 'Itim', sans-serif; font-size: 12px; fill: var(--ink); opacity: .75; }
/* Smaller grandma chart (user 2026-10-06: "เล็กๆ") */
#overview .gr-chart { margin: 8px 0 2px; padding: 4px 10px 2px; border-width: 2.5px; }
#overview .gr-chart h4 { font-size: .8rem; margin: 0; }
#overview .gr-chart svg { max-height: 78px; }
#overview .gr-line { stroke-width: 2.2; }
#overview .gr-dot { stroke-width: 2.2; }
#overview .gr-val { font-size: 11px; }
#overview .gr-day { font-size: 10px; }
/* Grandma chart: top-right of her box, 2x her picture (240px wide vs 120px) (user 2026-10-06) */
#overview .gr-head { align-items: flex-start; }
#overview .gr-head > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
#overview .gr-head > .gr-chart { flex: 0 0 240px; width: 240px; margin: 0 0 0 auto; padding: 0; background: #fff; border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-sm); align-self: flex-start; }
#overview .gr-head > .gr-chart svg { display: block; width: 240px; height: 120px; max-height: none; }
@media (max-width: 760px) { #overview .gr-head { flex-wrap: wrap; } #overview .gr-head > .gr-chart { flex-basis: 100%; width: 100%; } #overview .gr-head > .gr-chart svg { width: 100%; } }
#overview .gr-val { font-size: 12px; }
#overview .gr-day { font-size: 11px; opacity: .8; }
#overview .gr-line { stroke-width: 2.6; }
#overview .gr-dot { stroke-width: 2.6; }
/* User 2026-10-06: all text on the Overview page bigger. One uniform scale keeps every relationship (grandma picture vs chart, tiles) intact. */
#overview { zoom: 1.25; }
@media (max-width: 760px) { #overview { zoom: 1.1; } }
/* เรียกเทวดา (user 2026-10-07) */
#racers .racer-angel-call { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 6px 12px; font-family: 'Itim', sans-serif; font-size: 1rem; font-weight: 700;
  background: #ffe9a8; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
#racers .racer-angel-call[aria-pressed="true"] { background: #ffd23f; }
#racers .angel-btn-icon svg { width: 26px; height: 26px; display: block; border-radius: 22%; }
#racers .racer-angel-panel { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; padding: 14px; background: #fff7d6; border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); }
#racers .racer-angel-face svg { width: 140px; height: 140px; border: 3px solid var(--ink); border-radius: 22%; background: #fff; flex: none; }
#racers .racer-angel-body { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; }
#racers .racer-angel-title { font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.5rem; letter-spacing: .03em; }
#racers .racer-angel-bubble { padding: 10px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; font-size: 1.15rem; line-height: 1.4; transition: opacity .6s ease; }
#racers .racer-angel-bubble.fade { opacity: 0; }
#racers .racer-angel-card { padding: 10px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; }
#racers .racer-angel-card h4 { margin: 0 0 6px; font-size: 1.05rem; }
#racers .racer-angel-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
#racers .racer-angel-card dt { font-weight: 700; font-size: 1rem; }
#racers .racer-angel-card dd { margin: 0; font-size: 1rem; }
#racers .racer-angel-card dd b { display: block; font-size: 1.2rem; color: #0a7a3a; }
#racers .racer-angel-card dd small { display: block; font-size: .9rem; opacity: .8; line-height: 1.35; }
#racers .racer-angel-notes { margin: 0; padding-left: 20px; font-size: 1rem; line-height: 1.4; }
#racers .racer-angel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#racers .racer-angel-foot { margin: 0; font-size: .85rem; opacity: .7; }
@media (max-width: 760px) { #racers .racer-angel-panel { flex-direction: column; } #racers .racer-angel-face svg { width: 100px; height: 100px; } }
/* Angel inside the Create dialog (user 2026-10-07) */
#racerForm .racer-angel-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
#racerForm .racer-angel-row small { font-size: .85rem; opacity: .75; }
#racerForm .racer-angel-call { margin-left: 0; }
#racerForm .racer-angel-panel { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 12px; }
#racerForm .racer-angel-face { display: flex; justify-content: center; }
#racerForm .racer-angel-face svg { width: 96px; height: 96px; }
#racerForm .racer-angel-card dl { grid-template-columns: 1fr; gap: 2px; }
#racerForm .racer-angel-card dd { margin-bottom: 8px; }
#racerForm .racer-angel-bubble { font-size: 1rem; }
/* The Create dialog is dark: keep the angel panel's text dark on its light cards */
#racerForm .racer-angel-panel, #racerForm .racer-angel-panel * { color: #141414; }
#racerForm .racer-angel-panel .racer-angel-card dd b { color: #0a7a3a; }
#racerForm .racer-angel-panel .primary-button, #racerForm .racer-angel-panel .secondary-button { color: #141414; background: #fff; border: 2.5px solid #141414; }
#racerForm .racer-angel-face { justify-content: flex-start; }
#racerForm .racer-angel-sum { margin: 0; font-size: 1rem; }
#racerForm .racer-angel-sum b { padding: 1px 8px; background: #fff; border: 2px solid #141414; border-radius: 999px; }
#racerForm .racer-angel-more > summary { cursor: pointer; font-weight: 700; margin-bottom: 6px; }
#racerForm .racer-angel-panel { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
#racerForm .racer-angel-face { flex: none; }
#racerForm .racer-angel-body { flex: 1 1 220px; }
#racers .racer-pause[data-armed="true"] { background: #ffd23f !important; color: #141414 !important; border-color: #141414 !important; }
/* Turbo rate table next to the Turbo choice (user 2026-10-08) */
.turbo-rates { margin-top: 8px; }
.turbo-rates table { border-collapse: collapse; width: 100%; max-width: 420px; font-size: 1rem; }
.turbo-rates th, .turbo-rates td { padding: 4px 10px; text-align: right; border-bottom: 1px solid rgba(20,20,20,.18); }
.turbo-rates th { font-weight: 800; background: #fff1a8; color: #141414; border-bottom: 2px solid #141414; }
.turbo-rates th:first-child, .turbo-rates td:first-child { text-align: left; font-weight: 800; }
.turbo-rates tr.selected td { background: linear-gradient(180deg, #ff6a2b, #e0201b); color: #fff; font-weight: 800; }
.turbo-rates-note { display: block; font-size: .85rem; opacity: .75; margin-top: 4px; }
#racers .racer-turbo-change { flex-wrap: wrap; }
/* The rate table pushed the Turbo box past the card's right edge (columns and the save button were cut off, 2026-10-08):
   the box may shrink to the card and the table keeps fixed equal columns inside it. */
#racers .racer-turbo-change, #racers .racer-turbo-change > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
#racers .turbo-rates table { table-layout: fixed; width: 100%; max-width: 100%; }
#racers .turbo-rates th, #racers .turbo-rates td { padding: 4px 6px; overflow-wrap: anywhere; }
#racers .turbo-rates th:first-child, #racers .turbo-rates td:first-child { width: 18%; }
#racerForm .turbo-rates th, #racerForm .turbo-rates td { color: #f3f0e6; }
#racerForm .turbo-rates th { background: #3a3220; }
#racerForm .turbo-rates tr.selected td { color: #fff; }


/* ===== Detective theme (stock futures line, user request 2026-10-08): case-file paper, CLASSIFIED stamp, gun-barrel watermark, detectives. ===== */
body.stock-futures-app { background: radial-gradient(circle at 80% -10%, #1b2a44 0, transparent 40%), #0b1020; }
#racers { --paper: #e9dcb8; --paper-2: #dccb9a; --yellow: #f2b84b; --red: #c8283f; --blue: #4a78a8; }
#racers .racer-shell { position: relative; }
#racers .racer-shell::before { content: 'ลับสุดยอด · CLASSIFIED'; position: absolute; top: 12px; right: 22px; z-index: 3; transform: rotate(5deg); pointer-events: none;
  border: 4px double var(--red); color: var(--red); padding: 1px 12px; font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.15rem; letter-spacing: .06em; opacity: .72; }
#racers .racer-hero { position: relative; overflow: hidden; background: var(--paper-2); }
#racers .racer-hero::after { content: ''; position: absolute; right: 120px; top: -46px; width: 170px; height: 170px; border-radius: 50%; pointer-events: none; opacity: .16;
  background: radial-gradient(circle, transparent 0 24%, #0e0f14 25% 30%, transparent 31% 46%, #0e0f14 47% 53%, transparent 54% 68%, #0e0f14 69% 76%, transparent 77%); }
#racers .racer-hero h2::before { content: '🕵️ '; }
/* Create/edit dialogs: grid items must be allowed to shrink, otherwise the Turbo table and long option texts stretch the columns and squash the inputs. */
.racer-form-grid > * { min-width: 0; }
.racer-form-grid select, .racer-form-grid input { min-width: 0; max-width: 100%; }
.turbo-rates-holder { overflow-x: auto; }
.shadow-banner { margin: 0; padding: 8px 16px; text-align: center; font-family: 'Itim', system-ui, sans-serif; font-weight: 700; border-bottom: 3px solid #0e0f14; color: #0e0f14; }
.shadow-banner.sim { background: #f2b84b; } .shadow-banner.real { background: #ff6b73; }

/* ซุ้มมือปืน: today's plan of each gunman (plans.js) */
.gunman-plans h3 { margin: 0 0 8px; }
.gunman-plans .gp-gate { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.gunman-plans .gp-open { background: rgba(63, 182, 139, .15); }
.gunman-plans .gp-closed { background: rgba(217, 75, 59, .15); }
.gunman-plans .gp-gunman { margin: 6px 0; }
.gunman-plans .gp-gunman > summary { cursor: pointer; font-weight: 700; }
.gunman-plans tr.gp-hold td { opacity: .7; }

/* Login dialog: the form-grid label and input rules turned the "แสดงรหัส" checkbox into a large grey box on its own row,
   and the button rules gave "ลืมรหัสผ่าน?" a border (seen 2026-10-09). */
#racerLoginDialog .show-password { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; grid-column: 1 / -1; }
#racerLoginDialog .show-password input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; box-shadow: none; }
#racerLoginDialog #racerForgot { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: #8fa4ba; opacity: 1; text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; }

/* Budget slider: the generic form-input rules (43 px tall, bordered, padded) made it a thick box that hid its red/amber/green zones
   (seen in the Create dialog on a wide screen, 2026-10-09). Keep it a thin bar, and keep the "เงินว่าง" label inside the dialog. */
#racerDialog .racer-budget-slider, #racerBudgetEditDialog .racer-budget-slider { height: 8px; min-height: 0; padding: 0; border: 0; margin: 12px 0 0; box-sizing: border-box; box-shadow: none; }
#racerDialog .racer-slider-wrap, #racerBudgetEditDialog .racer-slider-wrap { padding-bottom: 38px; }
.racer-slider-funds span { left: auto; right: -1px; text-align: right; }
.racer-slider-funds[data-edge="left"] span { left: -1px; right: auto; text-align: left; }