/* ซุ้มมือปืน — bright cartoon layout (2026-10-09, user request "จัดหน้าจอใหม่ให้สวยงาม", bright cartoon style).
   Loaded after detective.css, which still styles the single components (cards, pills, tables). This file owns the page:
   the sky, one sticker card per block (no frame inside a frame), the order of the blocks and the wide-screen grid.
   Layout (2026-10-10): hero -> ตี๋ใหญ่คุม corner + money -> controls -> gunmen -> ตี๋ใหญ่คุม stock board -> today's plan -> crew story -> scoreboard -> history. */

body.stock-futures-app {
  --sky-top: #6ec6ff; --sky-mid: #bfe8ff; --sky-low: #e8f7ff;
  --sun: #ffd23f; --tomato: #ff5a4e; --mint: #3ddc97; --grape: #8b6bff; --bubble: #ff8fc3;
  --ink: #141414; --card: #ffffff;
  margin: 0; min-height: 100vh; color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0, var(--sky-mid) 340px, var(--sky-low) 100%) fixed;
  font-family: 'Itim', system-ui, sans-serif;
}
/* two soft clouds drifting behind the content */
body.stock-futures-app::before, body.stock-futures-app::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; width: 220px; height: 70px; border-radius: 70px; background: #fff; opacity: .8;
  box-shadow: 70px -26px 0 -6px #fff, 130px -8px 0 -14px #fff;
}
body.stock-futures-app::before { top: 96px; left: 4%; }
body.stock-futures-app::after { top: 190px; right: 6%; transform: scale(.8); }
@media (max-width: 700px) { body.stock-futures-app::before, body.stock-futures-app::after { display: none; } }

/* Shadow banner: a hazard-tape ribbon */
body.stock-futures-app .shadow-banner {
  position: relative; z-index: 2; margin: 0; padding: 9px 16px; text-align: center; font-weight: 700; color: var(--ink);
  background: repeating-linear-gradient(-45deg, var(--sun) 0 18px, #ffe382 18px 36px); border-bottom: 3px solid var(--ink);
}

/* The detective block at the end of detective.css dimmed the inks and drew a CLASSIFIED stamp; the bright cartoon takes the saturated inks back. */
body.stock-futures-app #racers, body.stock-futures-app #overview {
  --paper: #fff; --paper-2: #fff2c9; --yellow: #ffd23f; --red: #ff4b3e; --blue: #3fa7ff; --pink: #ff8fc3; --green: #22b573;
}
body.stock-futures-app #racers .racer-shell::before, body.stock-futures-app #racers .racer-hero::after { content: none; }
body.stock-futures-app #racers .racer-hero h2::before { content: '🤠 '; }

/* ---------- page grid: the racers panel and its shell dissolve so every block can be placed on one grid ---------- */
body.stock-futures-app main#overview {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start;
  max-width: 1240px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 32px) 56px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
body.stock-futures-app #racers.panel, body.stock-futures-app #racers .racer-shell { display: contents; }
body.stock-futures-app #racers .racer-hero { order: 1; }
body.stock-futures-app #pixelCorner { order: 2; }
body.stock-futures-app #racers .racer-boundary { order: 3; }
body.stock-futures-app #racers .racer-control-box { order: 4; }
body.stock-futures-app #racers #racerGrid { order: 7; }
body.stock-futures-app #spyBoard { order: 13; }   /* ตี๋ใหญ่คุม รายงานหุ้น + แผนวันนี้: the two bottom boxes (user 2026-10-10) */
body.stock-futures-app #gunmanPlans { order: 14; }
body.stock-futures-app #racerCrew { order: 10; }
body.stock-futures-app #racerScoreboard { order: 11; }
body.stock-futures-app #racers .racer-history { order: 15; }   /* closed-trade history: very bottom, below the board and plan (user 2026-10-10) */

/* hero: the signboard */
body.stock-futures-app #racers .racer-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px; transform: none;
  background: linear-gradient(135deg, var(--sun) 0 62%, #ffe27a 62% 100%); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--ink);
}
body.stock-futures-app #racers .racer-hero h2 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1; letter-spacing: .01em; text-shadow: 3px 3px 0 #fff; }
body.stock-futures-app #racers .racer-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
body.stock-futures-app #racers .racer-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.stock-futures-app #racers .racer-boundary { margin: 0; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 4px 4px 0 var(--ink); font-weight: 700; }

/* money tiles */
body.stock-futures-app #racers .racer-summary-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0; }
body.stock-futures-app #racers .racer-summary article { border-radius: 16px; border-width: 3.5px; padding: 14px 18px; }
body.stock-futures-app #racers .racer-summary-more { margin: 0; padding: 10px 16px; border: 3px dashed var(--ink); border-radius: 14px; background: rgba(255,255,255,.7); }

/* every block: the same sticker */
body.stock-futures-app main#overview > section.money-card, body.stock-futures-app main#overview > section.crew,
body.stock-futures-app main#overview > section.pixel-corner, body.stock-futures-app #racers .racer-history {
  margin: 0; padding: 18px 20px; border: 4px solid var(--ink) !important; border-radius: 18px !important; background: var(--card) !important; box-shadow: 6px 6px 0 var(--ink) !important;
}
body.stock-futures-app #racers .racer-command-frame { margin: 0; border-radius: 16px; border-width: 3.5px; }
body.stock-futures-app #racers #racerGrid { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; align-items: start; }
body.stock-futures-app #racers #racerGrid > .racer-card { transform: none; border-radius: 18px; border-width: 4px; box-shadow: 6px 6px 0 var(--ink); }
body.stock-futures-app #racers #racerGrid > .racer-empty, body.stock-futures-app #racers #racerGrid > p { grid-column: 1 / -1; }
body.stock-futures-app #racers .racer-empty { margin: 0; padding: 26px 20px; text-align: center; border: 3.5px dashed var(--ink); border-radius: 18px; background: rgba(255,255,255,.8); font-size: 1.15rem; }

/* the mascot strip keeps the spymaster, his tip and the wallet tiles; his score tiles repeat the tiles above, so they are hidden */
body.stock-futures-app #pixelCorner .pc-score { display: none; }

/* wide screens: plan and scoreboard side by side */
@media (min-width: 1100px) {
  body.stock-futures-app #racerCrew { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { body.stock-futures-app * { animation: none !important; transition: none !important; } }

/* ---------- today's plan ---------- */
body.stock-futures-app .gunman-plans h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.8rem; line-height: 1.1; }
body.stock-futures-app .gunman-plans .gp-gate { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 14px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
body.stock-futures-app .gunman-plans .gp-gate::before { content: ''; flex: none; width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 50%; background: currentColor; }
body.stock-futures-app .gunman-plans .gp-open { background: #c9f7df; color: #0a7a3a; }
body.stock-futures-app .gunman-plans .gp-closed { background: #ffe0dc; color: #c4251b; }
body.stock-futures-app .gunman-plans .gp-gate { color-scheme: light; }
body.stock-futures-app .gunman-plans .gp-gate > * , body.stock-futures-app .gunman-plans .gp-open, body.stock-futures-app .gunman-plans .gp-closed { }
body.stock-futures-app .gunman-plans .sc-wrap { overflow-x: auto; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
body.stock-futures-app .gunman-plans table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
body.stock-futures-app .gunman-plans thead th { padding: 9px 12px; background: var(--yellow); color: var(--ink); border-bottom: 3px solid var(--ink); font-weight: 800; font-size: .95rem; text-align: left; letter-spacing: .02em; }
body.stock-futures-app .gunman-plans tbody td { padding: 10px 12px; background: #fff; color: var(--ink); border-bottom: 1.5px solid #e8e2d0; font-size: 1rem; font-variant-numeric: tabular-nums; }
body.stock-futures-app .gunman-plans tbody tr:last-child td { border-bottom: 0; }
body.stock-futures-app .gunman-plans tbody tr.gp-go td { background: #e2fbee; }
body.stock-futures-app .gunman-plans tbody tr.gp-hold td { opacity: 1; color: #55597a; }
body.stock-futures-app .gunman-plans .gp-gunman { margin: 8px 0 14px; }
body.stock-futures-app .gunman-plans .gp-gunman > summary { display: flex; align-items: center; gap: 10px; padding: 6px 2px 10px; cursor: pointer; font-size: 1.2rem; font-weight: 700; }
body.stock-futures-app .gunman-plans .gp-gunman > summary small { font-weight: 400; opacity: .7; }
body.stock-futures-app .gunman-plans .ms-note { margin: 12px 0 0; font-size: .88rem; opacity: .75; line-height: 1.45; }
body.stock-futures-app .gunman-plans .gp-face { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; overflow: hidden; border: 3px solid var(--ink); border-radius: 22%; background: #d9f2ff; box-shadow: 2px 2px 0 var(--ink); }
body.stock-futures-app .gunman-plans .gp-face svg { width: 44px; height: 44px; display: block; }
body.stock-futures-app .gunman-plans .gp-side { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; }
body.stock-futures-app .gunman-plans .gp-side.long { background: #16a05b; } body.stock-futures-app .gunman-plans .gp-side.short { background: #e5372c; }
body.stock-futures-app .gunman-plans .gp-chip { display: inline-block; padding: 1px 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: .82rem; font-weight: 700; }
body.stock-futures-app .gunman-plans .gp-chip.go { background: #3ddc97; } body.stock-futures-app .gunman-plans .gp-chip.wait { background: #ffe9a3; }
body.stock-futures-app .gunman-plans td small { color: #55597a; font-size: .84rem; }
body.stock-futures-app .gunman-plans .gp-none { margin: 4px 0 10px; padding: 18px; text-align: center; border: 3px dashed var(--ink); border-radius: 14px; background: #f4fbff; }
body.stock-futures-app .gunman-plans tbody td:first-child { white-space: nowrap; }
body.stock-futures-app #racers .racer-title-block { flex: 1 1 280px; min-width: 0; }
body.stock-futures-app #racers .racer-hero-actions { flex: 1 1 360px; justify-content: flex-end; }
body.stock-futures-app #racers .racer-title-block > p { margin: 6px 0 0; font-size: .95rem; opacity: .8; }

/* ---------- dialogs: white sticker sheets on a sky-blue veil ---------- */
body.stock-futures-app dialog.racer-dialog {
  width: min(560px, calc(100% - 24px)); border: 4px solid var(--ink); border-radius: 22px; color: var(--ink); background: #fff;
  box-shadow: 9px 9px 0 var(--ink), 0 0 0 100vmax rgba(40, 90, 150, .5); font-family: 'Itim', system-ui, sans-serif;
}
body.stock-futures-app dialog.racer-dialog::backdrop { background: rgba(40, 90, 150, .45); backdrop-filter: none; }
body.stock-futures-app dialog.racer-dialog form { padding: 24px 24px 22px; }
body.stock-futures-app dialog.racer-dialog .eyebrow { display: inline-block; margin: 0; padding: 2px 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink) !important; font-family: 'Bangers', 'Itim', sans-serif; font-size: .95rem; letter-spacing: .08em; transform: rotate(-2deg); }
body.stock-futures-app dialog.racer-dialog h3 { margin: 12px 0 0; font-family: 'Bangers', 'Itim', sans-serif; font-size: 2rem; letter-spacing: .02em; line-height: 1.05; }
body.stock-futures-app dialog.racer-dialog .racer-dialog-copy { color: #4a4f6e; font-size: 1rem; line-height: 1.45; }
body.stock-futures-app dialog.racer-dialog .racer-dialog-close { top: 16px; right: 16px; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 1.4rem; line-height: 1; }
body.stock-futures-app dialog.racer-dialog .racer-form-grid { gap: 14px 16px; margin-top: 20px; }
body.stock-futures-app dialog.racer-dialog .racer-form-grid label { gap: 6px; color: var(--ink); font-size: 1rem; font-weight: 700; }
body.stock-futures-app dialog.racer-dialog .racer-form-grid input, body.stock-futures-app dialog.racer-dialog .racer-form-grid select {
  min-height: 46px; padding: 0 12px; border: 3px solid var(--ink); border-radius: 12px; color: var(--ink); background: #fff; font-family: inherit; font-size: 1.05rem; box-shadow: 3px 3px 0 var(--ink);
}
body.stock-futures-app dialog.racer-dialog .racer-form-grid input:focus-visible, body.stock-futures-app dialog.racer-dialog .racer-form-grid select:focus-visible { outline: 3px solid var(--blue, #3fa7ff); outline-offset: 2px; }
body.stock-futures-app dialog.racer-dialog .racer-form-grid .show-password input { box-shadow: none; }
body.stock-futures-app dialog.racer-dialog .racer-form-message { color: #c4251b; font-size: 1rem; font-weight: 700; }
body.stock-futures-app dialog.racer-dialog .racer-slider-scale { color: #4a4f6e; font-size: .8rem; }
body.stock-futures-app dialog.racer-dialog .racer-slider-funds i { background: var(--ink); box-shadow: none; }
body.stock-futures-app dialog.racer-dialog .racer-slider-funds span { color: var(--ink); font-size: .8rem; font-weight: 700; }
body.stock-futures-app dialog.racer-dialog .racer-budget-slider { border: 2.5px solid var(--ink); }
body.stock-futures-app dialog.racer-dialog .racer-budget-slider::-webkit-slider-thumb { width: 26px; height: 26px; border: 3px solid var(--ink); background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
body.stock-futures-app dialog.racer-dialog .racer-budget-slider::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--ink); background: var(--sun); }
/* the Turbo rate table and the guide take the whole row (they used to sit in one grid column and overflow it) */
body.stock-futures-app dialog.racer-dialog .turbo-rates-holder, body.stock-futures-app dialog.racer-dialog .racer-slider-wrap { grid-column: 1 / -1; }
body.stock-futures-app dialog.racer-dialog .turbo-rates-holder { overflow: visible; }
body.stock-futures-app dialog.racer-dialog .turbo-rates table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; }
body.stock-futures-app dialog.racer-dialog .turbo-rates th { padding: 6px 8px; background: var(--sun); color: var(--ink); border-bottom: 3px solid var(--ink); font-size: .9rem; text-align: center; }
body.stock-futures-app dialog.racer-dialog .turbo-rates td { padding: 6px 8px; background: #fff; color: var(--ink); text-align: center; border-bottom: 1.5px solid #e8e2d0; font-size: .95rem; }
body.stock-futures-app dialog.racer-dialog .turbo-rates tr.selected td { background: var(--tomato); color: #fff; font-weight: 800; }
body.stock-futures-app dialog.racer-dialog .turbo-rates-note, body.stock-futures-app dialog.racer-dialog .racer-turbo-note { color: #4a4f6e; font-size: .88rem; opacity: 1; }
body.stock-futures-app dialog.racer-dialog .racer-budget-guide { margin-top: 14px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 14px; background: #eafcf3; box-shadow: 4px 4px 0 var(--ink); }
body.stock-futures-app dialog.racer-dialog .racer-guide-head strong { font-size: 1.1rem; font-weight: 800; }
body.stock-futures-app dialog.racer-dialog .racer-guide-head small { color: #4a4f6e; font-size: .8rem; }
body.stock-futures-app dialog.racer-dialog .racer-guide-head.good strong { color: #0a7a3a; } body.stock-futures-app dialog.racer-dialog .racer-guide-head.partial strong { color: #b36a00; } body.stock-futures-app dialog.racer-dialog .racer-guide-head.low strong { color: #c4251b; }
body.stock-futures-app dialog.racer-dialog .racer-guide-rows { font-size: .95rem; gap: 5px 12px; }
body.stock-futures-app dialog.racer-dialog .racer-guide-rows dt { color: #4a4f6e; } body.stock-futures-app dialog.racer-dialog .racer-guide-rows dd { color: var(--ink); font-weight: 700; }
body.stock-futures-app dialog.racer-dialog .racer-guide-warn { color: #c4251b; font-size: .92rem; font-weight: 700; } body.stock-futures-app dialog.racer-dialog .racer-guide-note { color: #4a4f6e; font-size: .85rem; }
body.stock-futures-app dialog.racer-dialog .racer-guide-fit { border: 2.5px solid var(--ink); background: #fff; }
body.stock-futures-app dialog.racer-dialog .racer-dialog-summary { padding: 10px 14px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff7d6; color: var(--ink); font-size: .95rem; }
body.stock-futures-app dialog.racer-dialog .racer-dialog-summary strong { color: var(--ink); }
body.stock-futures-app dialog.racer-dialog .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
body.stock-futures-app dialog.racer-dialog .dialog-actions button { min-height: 46px; padding: 0 20px; font-family: 'Itim', sans-serif; font-size: 1.05rem; font-weight: 700; border: 3px solid var(--ink); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }
body.stock-futures-app dialog.racer-dialog .dialog-actions .primary-button { background: var(--sun); }
body.stock-futures-app dialog.racer-dialog .dialog-actions button:not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
body.stock-futures-app dialog.racer-dialog .dialog-actions button:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
body.stock-futures-app dialog.racer-dialog .dialog-actions button:disabled { opacity: .5; box-shadow: none; }
/* Start review */
body.stock-futures-app dialog.racer-dialog .racer-start-facts > div { border: 2.5px solid var(--ink); border-radius: 12px; background: #f4fbff; }
body.stock-futures-app dialog.racer-dialog .racer-start-facts span { color: #4a4f6e; font-size: .85rem; }
body.stock-futures-app dialog.racer-dialog .racer-start-facts strong { color: var(--ink); font: 700 1rem 'Itim', sans-serif; }
body.stock-futures-app dialog.racer-dialog .racer-start-blockers span { border: 2px solid var(--ink); background: #ffe9a3; color: var(--ink); font-size: .85rem; }
body.stock-futures-app dialog.racer-dialog .racer-risk-accept { border: 3px solid var(--ink); border-radius: 14px; background: #ffe0dc; color: var(--ink); font-size: 1rem; box-shadow: 4px 4px 0 var(--ink); }
body.stock-futures-app dialog.racer-dialog .racer-risk-accept input { width: 22px; height: 22px; accent-color: var(--tomato); }
body.stock-futures-app dialog.racer-dialog .racer-start-wait { color: #4a4f6e; font-size: 1rem; }
body.stock-futures-app dialog.racer-dialog .link-button { color: #4a4f6e; }
/* legacy dark-dialog rules in detective.css use #racerForm; match their weight */
body.stock-futures-app #racerForm .turbo-rates table, body.stock-futures-app #racerBudgetEditDialog .turbo-rates table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
body.stock-futures-app #racerForm .turbo-rates th, body.stock-futures-app #racerBudgetEditDialog .turbo-rates th { background: var(--sun); color: var(--ink); text-align: center; }
body.stock-futures-app #racerForm .turbo-rates td, body.stock-futures-app #racerBudgetEditDialog .turbo-rates td { color: var(--ink); text-align: center; background: #fff; }
body.stock-futures-app #racerForm .turbo-rates tr.selected td, body.stock-futures-app #racerBudgetEditDialog .turbo-rates tr.selected td { color: #fff; background: var(--tomato); }
body.stock-futures-app #racerForm .turbo-rates th:first-child, body.stock-futures-app #racerForm .turbo-rates td:first-child { text-align: center; width: 22%; }
/* phones: the hero stacks, so its blocks must size to their content (a flex-basis would become a height) */
@media (max-width: 700px) {
  body.stock-futures-app #racers .racer-hero { flex-direction: column; align-items: stretch; padding: 16px; border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
  body.stock-futures-app #racers .racer-title-block, body.stock-futures-app #racers .racer-hero-actions { flex: 0 0 auto; width: auto; }
  body.stock-futures-app #racers .racer-hero-actions { justify-content: flex-start; }
  body.stock-futures-app #racers .racer-create { flex: 1 1 100%; }
  body.stock-futures-app main#overview { padding-top: 14px; gap: 16px; }
}
@media (max-width: 700px) {
  body.stock-futures-app #racers .racer-summary-main { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.stock-futures-app #racers .racer-summary-main .racer-real-pnl { grid-column: 1 / -1; }
  body.stock-futures-app #racers .racer-summary article { padding: 10px 14px; }
  body.stock-futures-app #racers .racer-summary-main article strong { font-size: 1.9rem !important; }
}

/* Open positions inside a card's Detail (user 2026-10-13: "make the target smaller, three boxes per row"). Each open position is one small box
   (symbol, LONG/SHORT, net P/L, the target, Cut). The Detail is a size container: three boxes across when it is at least 230px wide
   (a 1280px desktop card, a 375px phone), two across when narrower, one across on a very narrow card, so a box never gets too thin to read.
   Display only: the boxes, the target values and the Cut button are built by positionChart() unchanged. */
body.stock-futures-app #racers .racer-details { container-type: inline-size; container-name: racer-detail; }
body.stock-futures-app #racers .racer-position-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@container racer-detail (max-width: 229px) { body.stock-futures-app #racers .racer-position-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container racer-detail (max-width: 149px) { body.stock-futures-app #racers .racer-position-charts { grid-template-columns: minmax(0, 1fr); } }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart { min-width: 0; padding: 5px 4px 6px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: 2px 2px 0 var(--ink); }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption { display: grid; justify-items: start; gap: 1px; min-width: 0; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption strong { font-family: 'Lilita One', 'Itim', sans-serif; font-size: .82rem !important; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption > strong { font-size: .88rem !important; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption span { padding: 0 6px; border-radius: 999px; font-size: .68rem !important; line-height: 1.35; overflow-wrap: anywhere; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption > .positive { color: #0a7a3a; } body.stock-futures-app #racers .racer-position-charts .racer-mini-chart figcaption > .negative { color: #c4251b; }
body.stock-futures-app #racers .racer-position-charts .racer-mini-chart .position-cut { margin-top: 4px; padding: 3px 2px; border-width: 2px; border-radius: 8px; font-size: .74rem !important; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
/* the grandma "about to Cut" note keeps its own column layout (base.css); only its picture and text are trimmed to the small box */
body.stock-futures-app #racers .racer-position-charts .racer-grandma-badge { padding: 3px 3px; margin: 3px 0 0; border: 2px solid var(--ink); background: #fff3c4; }   /* light sticker: the Detail text colour is dark ink, which was unreadable on base.css's dark badge */
body.stock-futures-app #racers .racer-position-charts .racer-grandma-badge .racer-grandma-icon svg { width: 26px; height: 26px; }
body.stock-futures-app #racers .racer-position-charts .racer-grandma-badge .racer-grandma-say { font-size: .68rem !important; line-height: 1.25; }

/* the control bar: a caption on the left now that the grandma button is gone */
body.stock-futures-app #racers .racer-command-frame .racer-toolbar { justify-content: space-between; }
body.stock-futures-app #racers .racer-toolbar-left::before { content: '🎛️ ควบคุมทั้งซุ้ม'; font-family: 'Bangers', 'Itim', sans-serif; font-size: 1.5rem; letter-spacing: .03em; }
@media (max-width: 480px) { body.stock-futures-app #racers .racer-toolbar-left { flex: 1 1 100%; } }

/* the spymaster */
body.stock-futures-app #pixelCorner .pc-name small { display: block; margin-top: 2px; font-family: 'Itim', sans-serif; font-size: .78rem; letter-spacing: 0; opacity: .75; }
body.stock-futures-app #pixelCorner .pc-teacher-art { background: #cdbdff !important; }

/* ---------- the spymaster's board (board.js) ---------- */
body.stock-futures-app .spy-board .sb-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
body.stock-futures-app .spy-board .sb-head h3 { margin: 0; font-size: 2rem; line-height: 1; }
body.stock-futures-app .spy-board .sb-head .eyebrow { margin: 0 0 4px; font-size: .95rem; color: #c4251b; }
body.stock-futures-app .spy-board .sb-sub { margin: 6px 0 0; color: #4a4f6e; font-size: 1rem; }
body.stock-futures-app .spy-board .sb-spy { flex: none; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--ink); border-radius: 22%; background: #cdbdff; box-shadow: 3px 3px 0 var(--ink); }
body.stock-futures-app .spy-board .sb-spy svg { width: 66px; height: 66px; }
/* running headlines */
body.stock-futures-app .spy-board .sb-ticker-strip { position: relative; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; background: var(--sun); box-shadow: 4px 4px 0 var(--ink); }
body.stock-futures-app .spy-board .sb-track { display: flex; width: max-content; animation: sb-run var(--sb-seconds, 60s) linear infinite; }
body.stock-futures-app .spy-board .sb-ticker-strip:hover .sb-track { animation-play-state: paused; }
body.stock-futures-app .spy-board .sb-run { display: inline-flex; align-items: center; flex: none; white-space: nowrap; padding: 9px 0; }
body.stock-futures-app .spy-board .sb-tick { padding: 0 18px; font-size: 1.05rem; font-weight: 700; }
body.stock-futures-app .spy-board .sb-tick b { margin-right: 6px; padding: 1px 9px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-family: 'Lilita One', 'Itim', sans-serif; font-weight: 400; }
body.stock-futures-app .spy-board .sb-tick.off { opacity: .6; }
body.stock-futures-app .spy-board .sb-sep { color: var(--ink); opacity: .55; }
@keyframes sb-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.stock-futures-app .spy-board .sb-ticker-strip { overflow-x: auto; } body.stock-futures-app .spy-board .sb-track { animation: none !important; } body.stock-futures-app .spy-board .sb-run[aria-hidden="true"] { display: none; } }
body.stock-futures-app .spy-board .sb-count { margin: 12px 0 14px; font-size: 1.05rem; }
body.stock-futures-app .spy-board .sb-count .warn { color: #c4251b; }
/* one block per stock */
body.stock-futures-app .spy-board .sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; align-items: start; }
body.stock-futures-app .spy-board .sb-card { display: grid; gap: 8px; padding: 14px 16px 16px; border: 3.5px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
body.stock-futures-app .spy-board .sb-card.ready { background: #effcf5; }
body.stock-futures-app .spy-board .sb-card.stop { background: #ffe9e6; }
body.stock-futures-app .spy-board .sb-card.off { background: #f1f5fa; }
body.stock-futures-app .spy-board .sb-card.held { box-shadow: 0 0 0 3px var(--sun), 6px 6px 0 var(--ink); }
body.stock-futures-app .spy-board .sb-card > header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
body.stock-futures-app .spy-board .sb-ticker { font-family: 'Lilita One', 'Itim', sans-serif; font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; }
body.stock-futures-app .spy-board .sb-state { padding: 1px 10px; border: 2.5px solid var(--ink); border-radius: 999px; font-size: .85rem; font-weight: 700; background: #fff; }
body.stock-futures-app .spy-board .sb-state.ready { background: #3ddc97; } body.stock-futures-app .spy-board .sb-state.stop { background: var(--tomato); color: #fff; } body.stock-futures-app .spy-board .sb-state.off { background: #dfe6ef; }
body.stock-futures-app .spy-board .sb-faces { display: inline-flex; gap: 6px; margin-left: auto; }
body.stock-futures-app .spy-board .sb-face { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 3px solid var(--ink); border-radius: 22%; background: #d9f2ff; box-shadow: 2px 2px 0 var(--ink); }
body.stock-futures-app .spy-board .sb-face svg { width: 42px; height: 42px; display: block; }
body.stock-futures-app .spy-board .sb-face i { position: absolute; right: -1px; bottom: -1px; padding: 0 4px; border: 2px solid var(--ink); border-radius: 8px 0 0 0; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; }
body.stock-futures-app .spy-board .sb-face.long i { background: #16a05b; } body.stock-futures-app .spy-board .sb-face.short i { background: #e5372c; }
body.stock-futures-app .spy-board .sb-news { margin: 0; font-size: 1.02rem; line-height: 1.4; }
body.stock-futures-app .spy-board .sb-news.muted { opacity: .65; }
body.stock-futures-app .spy-board .sb-stamp { display: inline-block; margin-right: 8px; padding: 0 8px; border: 2px solid currentColor; border-radius: 6px; font-size: .8rem; font-weight: 800; transform: rotate(-3deg); background: #fff; }
body.stock-futures-app .spy-board .sb-stamp.good { color: #0a7a3a; } body.stock-futures-app .spy-board .sb-stamp.wait { color: #a85f00; } body.stock-futures-app .spy-board .sb-stamp.bad { color: #5a5f7a; }
body.stock-futures-app .spy-board .sb-meta { margin: 0; color: #4a4f6e; font-size: .88rem; }
body.stock-futures-app .spy-board .sb-entry { display: grid; gap: 4px; padding: 10px 12px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff; }
body.stock-futures-app .spy-board .sb-entry b { font-size: 1.02rem; } body.stock-futures-app .spy-board .sb-entry small { color: #4a4f6e; font-size: .85rem; }
body.stock-futures-app .spy-board .sb-entry.go { border-style: solid; background: #d8f7e6; }
body.stock-futures-app .spy-board .sb-entry.stop { border-style: solid; background: #ffd2cc; }
body.stock-futures-app .spy-board .sb-entry.off { opacity: .85; }
body.stock-futures-app .spy-board .sb-entry dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0; }
body.stock-futures-app .spy-board .sb-entry dl div { padding: 4px 6px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; text-align: center; }
body.stock-futures-app .spy-board .sb-entry dt { font-size: .7rem; font-weight: 700; color: #4a4f6e; } body.stock-futures-app .spy-board .sb-entry dd { margin: 0; font-family: 'Lilita One', 'Itim', sans-serif; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
body.stock-futures-app .spy-board .sb-none { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; border: 3px dashed var(--ink); border-radius: 14px; }
@media (max-width: 520px) { body.stock-futures-app .spy-board .sb-head h3 { font-size: 1.6rem; } body.stock-futures-app .spy-board .sb-spy { width: 60px; height: 60px; } }

/* open position = a shooting-range target: bullseye is the Take Profit, the outer edge the Stop, the dashed ring the Entry, the hole the price now.
   User 2026-10-13: smaller (was up to 190px wide, now it fills its small box, at most 120px). The text inside the picture is set larger in picture units to stay readable. */
body.stock-futures-app .racer-mini-chart svg.range-target { display: block; width: 100%; max-width: 120px; margin: 2px auto 0; height: auto; overflow: visible; }
body.stock-futures-app svg.range-target .ring { stroke: var(--ink); stroke-width: 1.6; }
body.stock-futures-app svg.range-target .ring-sl { fill: #ffc2bb; } body.stock-futures-app svg.range-target .ring-mid { fill: #fff2b0; }
body.stock-futures-app svg.range-target .ring-tp { fill: #b8f0cf; } body.stock-futures-app svg.range-target .ring-eye { fill: #3ddc97; }
body.stock-futures-app svg.range-target .entry-ring { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 3.2 2.6; }
body.stock-futures-app svg.range-target .cross { stroke: var(--ink); stroke-width: .8; opacity: .45; fill: none; }
body.stock-futures-app svg.range-target .bullet-hole { fill: var(--ink); stroke: #fff; stroke-width: 1.6; }
body.stock-futures-app svg.range-target .bullet-core { fill: #ffd23f; }
body.stock-futures-app svg.range-target text { font-family: 'Itim', 'Lilita One', sans-serif; font-weight: 700; fill: var(--ink); font-size: 8px; }
body.stock-futures-app svg.range-target .dial-value { font-family: 'Lilita One', 'Itim', sans-serif; font-size: 10px; }
body.stock-futures-app svg.range-target .dial-value.move-up { fill: #0a7a3a; } body.stock-futures-app svg.range-target .dial-value.move-down { fill: #c4251b; }
body.stock-futures-app svg.range-target .sl-label { fill: #c4251b; } body.stock-futures-app svg.range-target .tp-label { fill: #0a7a3a; }
body.stock-futures-app .racer-position-charts svg.range-target .dial-now { font-size: 12px; }
body.stock-futures-app .racer-position-charts svg.range-target .dial-value { font-size: 13px; }
body.stock-futures-app .racer-position-charts svg.range-target .sl-label, body.stock-futures-app .racer-position-charts svg.range-target .tp-label { font-size: 11px; }
body.stock-futures-app .spy-board .sb-head > div { flex: 1 1 auto; min-width: 0; text-align: left; }
body.stock-futures-app .spy-board .sb-impact { display: grid; gap: 2px; margin: 0; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; font-size: .95rem; }
body.stock-futures-app .spy-board .sb-impact small { color: #4a4f6e; font-size: .84rem; line-height: 1.35; }
body.stock-futures-app .spy-board .sb-impact.up { background: #d8f7e6; color: #0a7a3a; } body.stock-futures-app .spy-board .sb-impact.down { background: #ffd9d4; color: #c4251b; }
body.stock-futures-app .spy-board .sb-impact.flat { background: #eef3f8; color: #4a4f6e; } body.stock-futures-app .spy-board .sb-impact.unk { background: #fff7d6; color: #a85f00; }
body.stock-futures-app .spy-board .sb-impact.none { background: transparent; border-style: dashed; color: #6b7090; font-size: .85rem; }

/* Stocks the user sent a gunman to collect from the spy bureau (display priority only). */
.sb-card.dispatched { box-shadow: 0 0 0 4px #ffd23f, 6px 6px 0 var(--ink, #1c2b3a); }
.sb-dispatch { margin: 6px 0; padding: 6px 8px; border: 2px dashed var(--ink, #1c2b3a); border-radius: 10px; background: #fff3c4; font-size: .85rem; }
.sb-dispatch small { display: block; opacity: .75; }
.sb-orders { margin: 10px 0 14px; padding: 10px; border: 3px solid var(--ink, #1c2b3a); border-radius: 16px; background: #fff3c4; }
.sb-orders h4 { margin: 0 0 8px; font-size: 1.15rem; } .sb-orders h4 small { font-size: .78rem; opacity: .75; }
.sb-origin { margin: 2px 0 6px; font-size: 14px; color: #35506b; overflow-wrap: anywhere; } .sb-origin a { text-decoration: underline; color: inherit; } .sb-origin.none { opacity: .7; }
.sb-dispatch ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; } .sb-dispatch li { font-size: 16px; } .sb-dispatch li small { display: block; font-size: 14px; opacity: .8; } .sb-who { font-weight: 700; }
.sb-tick.order { font-weight: 700; } .sb-tick.order.chase { color: #b3261e; } .sb-tick.order.done { color: #0a7a3a; }
.sb-check { font-size: 15px; padding: 2px 10px; border: 2px solid var(--ink, #1c2b3a); border-radius: 999px; background: #fff; cursor: pointer; margin-left: 6px; } .sb-check:disabled { opacity: .6; cursor: wait; }
.sb-check-result { font-size: 15px; font-weight: 600; margin-left: 6px; }
.sb-alert { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 640px); padding: 10px 16px; border: 3px solid var(--ink, #1c2b3a); border-radius: 14px; background: #c9f0cf; font-size: 20px; font-weight: 700; box-shadow: 4px 4px 0 var(--ink, #1c2b3a); }
.sb-check { background: #ffd23f; font-weight: 700; font-size: 16px; } .sb-noracer { font-size: 14px; opacity: .8; }

/* stocks as buttons; detail in a popup */
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.sb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 3px solid var(--ink, #1c2b3a); border-radius: 999px; background: #fff; font-size: 20px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink, #1c2b3a); }
.sb-chip:hover { transform: translateY(-1px); background: #fff7d6; } .sb-chip b { font-size: 22px; letter-spacing: .02em; }
.sb-chip .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink, #1c2b3a); background: #c9c9c9; } .sb-chip .dot.ready { background: #2fbf71; } .sb-chip .dot.stop { background: #ff4b3e; } .sb-chip .dot.off { background: #ffd23f; }
.sb-chip .dir.up { color: #0a7a3a; } .sb-chip .dir.down { color: #c4251b; } .sb-chip .held-n { font-size: 16px; }
.sb-olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-orow { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border: 3px solid var(--ink, #1c2b3a); border-radius: 14px; background: #fff; font-size: 17px; }
.sb-orow small { flex-basis: 100%; font-size: 14px; opacity: .8; } .sb-orow.chase .sb-prog { color: #b3261e; font-weight: 700; } .sb-orow.done .sb-prog { color: #0a7a3a; font-weight: 700; }
.sb-dialog { width: min(720px, calc(100vw - 28px)); max-height: 88vh; overflow: auto; border: 4px solid var(--ink, #1c2b3a); border-radius: 18px; padding: 14px; background: #fff; color: #1c2b3a; box-shadow: 8px 8px 0 var(--ink, #1c2b3a); }
.sb-dialog::backdrop { background: rgba(20, 40, 70, .55); } .sb-dialog-actions { display: flex; justify-content: flex-end; margin-top: 10px; } .sb-dialog-actions button { font-size: 17px; padding: 4px 18px; border: 3px solid var(--ink, #1c2b3a); border-radius: 999px; background: #ffd23f; cursor: pointer; }
.sb-dialog .sb-card { box-shadow: none; border: 0; padding: 0; } .sb-dialog .sb-ticker { font-size: 2rem; } .sb-dialog p, .sb-dialog li { font-size: 18px; } .sb-dialog small { font-size: 15px; }

/* ---- 2026-10-10 compact layout (user: arrange the boxes to save space). Wide screens only; phones keep one column. ---- */
@media (min-width: 1000px) {
  /* ตี๋ใหญ่ and the money tiles share one row instead of stacking */
  body.stock-futures-app #pixelCorner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 16px; align-items: start; }
  body.stock-futures-app #pixelCorner > .pc-head, body.stock-futures-app #pixelCorner > .pc-foot { grid-column: 1 / -1; }
  body.stock-futures-app #pixelCorner .pc-stage { grid-template-columns: minmax(0, 1fr); }
  body.stock-futures-app #pixelCorner .pc-teacher { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; }
  body.stock-futures-app #pixelCorner .pc-teacher-art { flex: none; width: 120px !important; height: 120px !important; }
  body.stock-futures-app #pixelCorner .pc-bubble { flex: 1; min-width: 0; } body.stock-futures-app #pixelCorner .pc-bubble li { font-size: 1rem; }
  body.stock-futures-app #pixelCorner .pc-money-box { margin-top: 0; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-money { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-money article { padding: 8px 10px; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-money strong { font-size: 1.5rem; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-money em { display: none; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-group { margin: 6px 0 4px; font-size: 1rem; }
  body.stock-futures-app #pixelCorner .pc-money-box .pc-foot { margin: 6px 0 0; font-size: .9rem; }
  /* the stock board: orders two across, smaller stock buttons */
  body.stock-futures-app .spy-board .sb-olist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.stock-futures-app .spy-board .sb-orow { padding: 6px 10px; gap: 4px 10px; font-size: 16px; }
  body.stock-futures-app .spy-board .sb-orow .sb-chip { padding: 2px 10px; font-size: 18px; } body.stock-futures-app .spy-board .sb-orow .sb-chip b { font-size: 19px; }
  body.stock-futures-app .spy-board .sb-chips { gap: 6px; margin: 6px 0; }
  body.stock-futures-app .spy-board .sb-chips .sb-chip { padding: 2px 10px; font-size: 16px; box-shadow: 2px 2px 0 var(--ink); } body.stock-futures-app .spy-board .sb-chips .sb-chip b { font-size: 17px; }
  body.stock-futures-app .spy-board .sb-head { margin-bottom: 8px; } body.stock-futures-app .spy-board .sb-head h3 { font-size: 1.7rem; }
  body.stock-futures-app .spy-board .sb-count { margin: 8px 0; }
}

/* ---- gunmen cards: three per row, left to right (user 2026-10-10). A card whose detail is open grows downwards inside its own column and
   stays where it is, like the สายซิ่ง page (user 2026-10-13: keep the Detail open); the neighbours keep their compact height (align-items: start). ---- */
@media (min-width: 760px) {
  body.stock-futures-app #racers #racerGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
}

/* gunman detail popup (the card stays small so three fit in a row) */
.racer-detail-dialog { width: min(760px, calc(100vw - 24px)); max-height: 90vh; overflow: auto; padding: 14px 16px; border: 4px solid #141414; border-radius: 18px; background: #fff; color: #141414; box-shadow: 8px 8px 0 #141414; }
.racer-detail-dialog::backdrop { background: rgba(20, 40, 70, .55); }
.racer-detail-dialog .rdd-title { margin: 0 0 8px; font-size: 1.8rem; } .racer-detail-dialog .racer-details { border-top: 0; padding-top: 0; }
.racer-detail-dialog .rdd-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding-top: 10px; background: #fff; }
.racer-detail-dialog .rdd-actions button { font-size: 17px; padding: 4px 20px; border: 3px solid #141414; border-radius: 999px; background: #ffd23f; cursor: pointer; }
.racer-detail-dialog .racer-card-in-dialog { border: 0; background: none; box-shadow: none; padding: 0; transform: none; }
.racer-detail-dialog, .racer-detail-dialog * { font-size-adjust: none; }

/* คุมทั้งซุ้ม: the closed P/L, hunting count, open positions, the extra numbers and the pause / STOP ALL buttons in one box (user 2026-10-10) */
body.stock-futures-app #racers .racer-control-box { margin: 0; padding: 12px 18px 14px; border: 4px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 var(--ink); display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 8px 18px; align-items: center; }   /* 2026-10-14: was `auto`; the long pause note widened column 2 to ~680px and squeezed the three number boxes to 38px each */
body.stock-futures-app #racers .racer-control-box .rc-title { grid-column: 1 / -1; margin: 0; font-size: 1.5rem; }
body.stock-futures-app #racers .racer-control-box .racer-summary-main { grid-column: 1; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
body.stock-futures-app #racers .racer-control-box .racer-command-frame { grid-column: 2; grid-row: 2; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; justify-self: end; }
body.stock-futures-app #racers .racer-control-box .racer-summary-more { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { body.stock-futures-app #racers .racer-control-box { grid-template-columns: 1fr; } body.stock-futures-app #racers .racer-control-box .racer-command-frame { grid-column: 1; grid-row: auto; justify-self: stretch; } }
body.stock-futures-app #racers .racer-control-box .racer-toolbar-left { display: none !important; }   /* the old "ควบคุมทั้งซุ้ม" label: the box has its own title now */
body.stock-futures-app #racers .racer-control-box .racer-summary-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.stock-futures-app #racers .racer-control-box .racer-summary-main article { padding: 8px 12px; transform: none; }
body.stock-futures-app #racers .racer-control-box .racer-summary-main strong { font-size: clamp(1.25rem, 2.3vw, 1.9rem); white-space: nowrap; }
body.stock-futures-app #racers .racer-control-box .racer-toolbar { margin: 0; padding: 0; }

/* today's plan: the whole box folds (closed by default) */
body.stock-futures-app .gunman-plans .gp-fold > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
body.stock-futures-app .gunman-plans .gp-fold > summary::-webkit-details-marker { display: none; }
body.stock-futures-app .gunman-plans .gp-fold > summary::after { content: '▾'; margin-left: auto; font-size: 1.2rem; }
body.stock-futures-app .gunman-plans .gp-fold[open] > summary::after { content: '▴'; }
body.stock-futures-app .gunman-plans .gp-fold > summary h3 { margin: 0; } body.stock-futures-app .gunman-plans .gp-fold > summary small { font-size: 1rem; opacity: .8; }
body.stock-futures-app .gunman-plans .gp-fold[open] > summary { margin-bottom: 10px; }

/* gunman face: a square portrait (it was left as a tall narrow pill that cropped the picture when the card became narrow) */
@media (min-width: 760px) {
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face { width: 92px; height: 92px; border-radius: 22%; flex: none; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face svg.crew-avatar { width: 100%; height: 100%; display: block; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face .turbo-badge { display: none; }   /* the Turbo label already sits next to the name */
}

/* ---- gunman card, compact redesign (user 2026-10-10: the stocks inside the card were far too big). Small portrait, name + status, one number, small stock pills, small buttons. ---- */
@media (min-width: 760px) {
  body.stock-futures-app #racerGrid > .racer-card-compact { padding: 10px 12px 12px; border-width: 3px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); gap: 6px; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-card-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 22%; flex: none; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face svg.crew-avatar { width: 100%; height: 100%; display: block; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-face .turbo-badge { display: none; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-card-head .racer-state { grid-column: 2; grid-row: 2; justify-self: start; font-size: 13px; padding: 1px 8px; border-width: 2px; box-shadow: none; white-space: nowrap; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-sub { display: none; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-card-head h3 { font-size: 1.15rem; line-height: 1.15; margin: 0; }
  body.stock-futures-app #racerGrid > .racer-card-compact .turbo-label { display: inline-block; margin-left: 6px; font-size: .72rem; padding: 0 6px; border-width: 2px; box-shadow: none; transform: none; vertical-align: middle; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-bignum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-bignum strong { font-size: 1.7rem; line-height: 1.1; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-bignum strong.neutral { color: var(--ink); text-shadow: none; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-bignum span { font-size: .85rem; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 13px; line-height: 1.5; border-width: 2px; border-radius: 999px; box-shadow: none; min-height: 0; margin: 0; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-pill b, body.stock-futures-app #racerGrid > .racer-card-compact .racer-pill span { font-size: 13px; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-scan { margin: 0; } body.stock-futures-app #racerGrid > .racer-card-compact .racer-scan small { font-size: 13px; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-card-footer { margin: 0; gap: 8px; }
  body.stock-futures-app #racerGrid > .racer-card-compact .racer-card-footer button { font-size: 14px; padding: 3px 12px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
}

/* the price-feed status strip ("ราคาจริงค้าง · ตัวจำลองงดเปิดไม้ใหม่") is hidden at the user's request (2026-10-10). It stays in the DOM because the page script updates it; only its display is off. */
body.stock-futures-app #racers .racer-boundary { display: none !important; }

/* Split views (2026-10-10). summary = the ตี๋ใหญ่ page: corner, crew, scoreboard. panel = the ซุ้มมือปืน tab: the gunmen panel, then the report board and today's plan at the very bottom (user 2026-10-10, same order as commit f5d0a1a).
   Dialogs stay in the DOM, so login/start dialogs keep working in either view. Display only. */
html[data-view="summary"] .racer-shell, html[data-view="summary"] #shadowBanner, html[data-view="summary"] #spyBoard, html[data-view="summary"] #gunmanPlans { display: none !important; }
html[data-view="panel"] #pixelCorner, html[data-view="panel"] #racerCrew, html[data-view="panel"] #racerScoreboard { display: none !important; }

/* US market open / close (market-clock.js, user 2026-10-12): first block of the page, in both views */
body.stock-futures-app #marketClock { order: 0; display: grid; gap: 8px; padding: 12px 16px; border: 3.5px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
body.stock-futures-app #marketClock:empty { display: none; }
body.stock-futures-app #marketClock .mc-main { display: flex; align-items: center; gap: 12px; }
body.stock-futures-app #marketClock .mc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; font-size: 1.4rem; background: #fff; }
body.stock-futures-app #marketClock .mc-main strong { display: block; font-family: 'Lilita One', 'Itim', sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
body.stock-futures-app #marketClock .mc-main span:not(.mc-icon) { display: block; margin-top: 2px; font-size: 1.02rem; }
body.stock-futures-app #marketClock.mc-open { background: #d8f7e6; } body.stock-futures-app #marketClock.mc-open .mc-icon { background: #3ddc97; }
body.stock-futures-app #marketClock.mc-pre { background: #fff4c4; } body.stock-futures-app #marketClock.mc-pre .mc-icon { background: var(--sun); }
body.stock-futures-app #marketClock.mc-after { background: #e7e0ff; } body.stock-futures-app #marketClock.mc-after .mc-icon { background: #c3a6ff; }
body.stock-futures-app #marketClock.mc-closed { background: #eef3f8; } body.stock-futures-app #marketClock.mc-closed .mc-icon { background: #dfe6ef; }
body.stock-futures-app #marketClock .mc-slots { display: flex; flex-wrap: wrap; gap: 8px; }
body.stock-futures-app #marketClock .mc-slot { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; padding: 3px 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: .88rem; font-variant-numeric: tabular-nums; }
body.stock-futures-app #marketClock .mc-slot b { font-weight: 800; }
body.stock-futures-app #marketClock .mc-slot.now { background: var(--ink); color: #fff; }
body.stock-futures-app #marketClock .mc-note { margin: 0; color: #4a4f6e; font-size: .82rem; line-height: 1.4; }

/* ตี๋ใหญ่ summary inside the dashboard ภาพรวม on a phone (user 2026-10-17 "หน้าภาพรวม เล่นบน มือถือพัง"). Layout only, ?view=summary in a
   narrow frame; the ซุ้มมือปืน tab and desktop are unchanged. The frame already sits in the dashboard's comic frame, which is zoomed 1.1 on phones,
   so this page's own 1.1 zoom and wide paddings left about 175px for text: crew cards ran 45px past the edge, money numbers past their tiles. */
@media (max-width: 640px) {
  html[data-view="summary"] body.stock-futures-app main#overview { zoom: 1; padding: 6px 8px 24px 4px; gap: 14px; }
  html[data-view="summary"] body.stock-futures-app main#overview > section.money-card, html[data-view="summary"] body.stock-futures-app main#overview > section.crew,
  html[data-view="summary"] body.stock-futures-app main#overview > section.pixel-corner { padding: 12px; }
  html[data-view="summary"] #overview .crew-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-view="summary"] #overview .crew-grid > .crew-card { min-width: 0; }
  html[data-view="summary"] #overview .pc-money article { min-width: 0; }
  html[data-view="summary"] #overview .pc-money article strong { font-size: 1.3rem !important; }
  /* ซาลูนพัก: chips wrap onto the next line instead of a side-scroll that cut the last one off */
  html[data-view="summary"] #overview .crew-parking { flex-wrap: wrap; overflow-x: visible; }
}