/* Phone layout fixes (2026-10-14, UI review items 4-5). Phone widths only; desktop is untouched. Loaded after every other stylesheet. */
@media (max-width: 640px) {
  /* 4. Top bar was 239px tall (four stacked rows). Smaller brand, compact buttons, one-line login chips, small clock. */
  .topbar { gap: 6px 8px; padding-top: 10px; padding-bottom: 10px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand .eyebrow { display: none; }
  .topbar .brand-mark { width: 36px; height: 36px; }
  .topbar .brand-mark img { width: 30px; height: 30px; }
  .topbar .brand h1 { font-size: 1.15rem; line-height: 1.1; margin: 0; }
  .topbar .hq-login { width: 100%; gap: 6px; flex-wrap: wrap; align-items: center; }
  .topbar .hq-login-btn { min-height: 0; height: 34px; padding: 2px 9px; gap: 5px; font-size: .82rem; }
  .topbar .hq-login-btn .hq-key { width: 22px; height: 22px; font-size: .75rem; }
  .topbar .hq-login { flex-wrap: nowrap; }
  .topbar .hq-login-btn { flex: none; }
  /* the second top-bar button does not fit beside the chips; "ออกจากระบบทั้งหมด" stays in the dialog that the login button opens */
  .topbar #hqLogoutTop { display: none; }
  .topbar .hq-chips { flex-wrap: nowrap; gap: 4px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar .hq-chips { gap: 3px; min-width: 0; }
  .topbar .hq-chips li { white-space: nowrap; padding: 2px 6px; font-size: .66rem; }
  /* the state word stays for screen readers; the coloured dot shows it on screen */
  .topbar .hq-chips li b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar .snapshot { padding: 3px 10px; font-size: .74rem; min-height: 0; }

  /* 6. Menu tabs (user 2026-10-14 "เมนู ก็ยังพังอยู่ มันล้นจอ"): one row 730px wide on a 375px screen, three menus hidden off to the side.
     Now a 3 x 2 grid, every menu visible; one size for every tab (the line tabs had their own bigger size). */
  nav.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow: visible; padding: 6px 8px; }
  nav.tabs .tab, nav.tabs .tab.intel-tab, nav.tabs .tab.racer-tab, nav.tabs .tab.stocks-tab, nav.tabs .tab.guard-tab {
    justify-content: center; min-width: 0; padding: 3px 6px 3px 3px; gap: 4px; font-size: .76rem; white-space: nowrap;
  }
  nav.tabs .tab .tab-ico { width: 20px; height: 20px; flex: none; }

  /* 7. หน่วยข่าวกรอง header (user 2026-10-14 "ข่าวกรองพังป่าว แบบมือถือ"): it kept two columns (the empty 64px barrel + 223px text), so the
     title and the green badge were cut at the right edge and the counts squeezed to one-word-a-line. One column, no barrel, counts 2 x 2. */
  #intel .intel-hero { grid-template-columns: minmax(0, 1fr); }
  #intel .intel-barrel { display: none; }
  #intel .intel-hero h2 { font-size: 1.9rem; }
  #intel .intel-hero .intel-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 8. More หน่วยข่าวกรอง phone fixes from the full-page review (all sections opened): the decoder card title squeezed three parts into
     179px; "กำลังจะมา" rows squeezed the event name between date and badge (three lines); 49 ticker chips two per row. */
  #intel .dec-title { flex-wrap: wrap; }
  #intel .dec-title .dec-who { flex-basis: 100%; }
  #intel li:is(.earn, .macro) { grid-template-columns: auto minmax(0, 1fr); }
  #intel li:is(.earn, .macro) > span { grid-column: 1 / -1; grid-row: 2; }
  #intel li:is(.earn, .macro) > em { justify-self: end; }
  #intel .case-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #intel .case-chips .case-chip { justify-content: center; min-width: 0; padding-left: 6px; padding-right: 6px; gap: 5px; font-size: .9rem; }

  /* 9. สายซิ่ง closed-trade history: a 7-column table in a 293px scroller showed only time, racer and symbol; P/L was off-screen to the
     right. Each closed trade is now a small three-line card: symbol | P/L, side | reason, racer | time ("ไม้" layer column hidden).
     The !important matches the existing desktop rules in speed-racer-comic.css, which use it. */
  #racers .racer-history-scroll { overflow-x: visible; }
  #racers .racer-history-scroll table, #racers .racer-history-scroll tbody { display: block; width: 100%; min-width: 0; }
  #racers .racer-history-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #racers .racer-history-scroll tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(55%); grid-template-areas: "sym pl" "side reason" "who time";
    gap: 2px 10px; padding: 8px 10px; border-bottom: 2px solid #141414; }
  #racers .racer-history-scroll tbody tr:nth-child(even) { background: #fff8e6; }
  #racers .racer-history-scroll tbody td { padding: 0 !important; border: 0; min-width: 0; white-space: normal; background: transparent !important; line-height: 1.35; }
  #racers .racer-history-scroll tbody td:nth-child(1) { grid-area: time; justify-self: end; font-size: .8rem !important; opacity: .75; }
  #racers .racer-history-scroll tbody td:nth-child(2) { grid-area: who; font-size: .8rem !important; opacity: .75; }
  #racers .racer-history-scroll tbody td:nth-child(3) { grid-area: sym; font-weight: 800; font-size: 1.05rem !important; }
  #racers .racer-history-scroll tbody td:nth-child(4) { grid-area: side; font-size: .85rem !important; }
  #racers .racer-history-scroll tbody td:nth-child(5) { display: none; }
  #racers .racer-history-scroll tbody td:nth-child(6) { grid-area: pl; justify-self: end; font-size: 1.15rem !important; font-weight: 800; }
  #racers .racer-history-scroll tbody td:nth-child(7) { grid-area: reason; justify-self: end; text-align: right; font-size: .8rem !important; }
  #racers .racer-history-scroll tbody td:only-child { grid-column: 1 / -1; grid-row: auto; justify-self: start; font-size: 1rem !important; opacity: 1; }
  #racers .racer-history-head { flex-wrap: wrap; }
  #racers .racer-history-head > small { flex-basis: 100%; }
  #racers .racer-history-head strong, #racerHistoryCount, #racers .racer-history-pager span { white-space: nowrap; }

  /* 5. Grandma's speech bubble (สายซิ่ง) was 137px wide beside a 106px face (2-3 words a line): smaller face, bubble takes the rest. */
  #racers .racer-grandma-panel { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; }
  #racers .racer-grandma-face svg { width: 64px; height: 64px; }
  #racers .racer-grandma-face { align-self: start; }
  #racers .racer-grandma-total { grid-column: 1 / -1; }
}

/* All widths (2026-10-14, found in the same review): the upload box of หน่วยข่าวกรอง is white but its title inherited the dark theme's
   cream text colour, so "ลากไฟล์มาวางที่นี่" was nearly invisible on phone and desktop alike. */
#intel .intel-drop strong { color: #141414; }

/* 10. ภาพรวม on phones (user 2026-10-17 "หน้าภาพรวม เล่นบน มือถือพัง"). Layout only; desktop unchanged.
   Up to 760px (the breakpoint where #overview gets zoom 1.1): the Overview grid had one auto track, so a wide child (the opened scoreboard
   table, about 1090px) stretched the whole column to its min-content and every box became 1000px+ wide on a phone. A 0-minimum track keeps
   the boxes on screen; the table scrolls inside .sc-wrap. Not applied on desktop so the desktop layout stays exactly as it was. */
@media (max-width: 760px) { #overview.active:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* login chips: the fourth chip (เหมืองทอง added 2026-10-16) ran off the right edge; two rows of two instead of a hidden side-scroll */
  .topbar .hq-chips { display: grid; grid-template-columns: repeat(2, max-content); overflow: visible; gap: 3px; }
  /* the outer comic frame keeps its border, with less padding so the summaries inside have room */
  #overview { padding: 8px; }
}
@media (max-width: 480px) {
  /* chooser: three cards in one row were 94px wide with 106px faces (faces spilled over the card edges, names broke mid-word).
     One card per row, face on the left, name and line beside it. */
  .overview-pick { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .overview-pick-card { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 12px 14px; text-align: left; }
  .overview-pick-card svg, .overview-pick-card img { flex: none; width: 76px; height: 76px; }
  .overview-pick-card span { min-width: 0; }
  .overview-pick-card b { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  /* Pixel's money tiles sit two per row: the big numbers (+333.00) ran past the tile border. Smaller number, the tile may not grow past its column. */
  #overview .pc-money article { min-width: 0; }
  #overview .pc-money article strong { font-size: 1.3rem !important; }
}