/* DRAGDUEL phone mockup layer. Everything that changes layout lives inside the phone media query,
   so desktop and tablet widths render exactly as before. */
.m-tabbar, .m-thumb, .m-hint { display: none; }

@media (max-width: 640px) {
  /* ---------- top: slim logo bar only (big nav dropped) ---------- */
  header { position: relative; }
  header.header-hidden { transform: none; }
  .nav { min-height: 0; padding: 0; flex-wrap: nowrap; }
  .logo { height: 44px; font-size: 17px; }
  .logo i { width: 20px; height: 20px; }
  .logo-img { height: 22px; margin-left: 16px; }
  .links, .search-toggle, .nav > .btn { display: none !important; }
  /* search opens as a fixed sheet from the bottom-bar Search button */
  header.search-open {
    position: fixed; top: 0; left: 0; right: 0; z-index: 25;
    background: rgba(11, 13, 16, 0.97);
  }
  header.search-open .nav { flex-wrap: wrap; padding: 0 0 8px; }
  header.search-open .search { display: flex; margin: 0; }

  /* ---------- page order: race first ---------- */
  #main { display: flex; flex-direction: column; }
  #status { order: 0; }
  #hero { order: 1; }
  #presets { order: 2; }
  #slots { order: 3; }
  #race { order: 4; }
  #specs { order: 5; }
  #charts { order: 6; }
  #browse { order: 7; }
  body.browse-on #hero, body.browse-on #presets, body.browse-on #slots,
  body.browse-on #race, body.browse-on #specs, body.browse-on #charts { display: none; }
  .status { margin-top: 6px; }
  .status:empty { margin: 0; }

  .hero { padding: 6px 0 0; }
  .crumbs, .hero .sub { display: none; }
  h1 { font-size: 16px; line-height: 1.25; margin: 0; letter-spacing: 0; font-weight: 850;
       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---------- presets: one swipeable chip row ---------- */
  .presets {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 8px -16px 4px; padding: 0 16px 4px; gap: 6px; scrollbar-width: none;
  }
  .presets::-webkit-scrollbar { display: none; }
  .presets .preset, .presets .ghost {
    flex: none; white-space: nowrap; min-height: 34px; padding: 6px 11px; font-size: 12.5px; scroll-snap-align: start;
  }

  /* ---------- all cars visible at once ---------- */
  .slots {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    overflow: visible; scroll-snap-type: none; padding: 0; margin: 6px 0 8px;
  }
  .slots > .card, .slots > .add-card { flex: none; min-height: 0; }
  .card { border-radius: 12px; }
  .card .bar { height: 3px; }
  .card img { height: 62px; }
  .card .body { padding: 5px 7px 7px; }
  .card .yr { font-size: 9.5px; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card h3 { font-size: 13px; margin: 1px 0 0; line-height: 1.2; overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .trim, .card .chips, .crown { display: none; }
  .tally { top: 6px; left: 6px; padding: 2px 7px; font-size: 10.5px; }
  .leader .tally::before { content: "🏆 "; }
  .x, .slots .x { top: 3px; right: 3px; width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 16px; }
  .add-card { padding: 8px; }
  .add-card .plus { font-size: 26px; }
  .add-card strong { font-size: 13px; margin-top: 2px; }
  .add-card p { display: none; }

  /* ---------- race in the opening view ---------- */
  #race h2 { display: none; }
  #race .race { padding: 10px 10px 12px; border-radius: 14px; }
  .racehead { margin-bottom: 8px; gap: 8px; flex-wrap: nowrap; align-items: center; }
  .racehead h3 { font-size: 15px; white-space: nowrap; }
  #race .racehead .meta { display: none; }
  #race .racehead > div:first-child { flex: none; }
  .race-controls, body.race-in-view .race-controls {
    position: static; width: auto; flex: 1; flex-wrap: nowrap; justify-content: flex-end; gap: 6px;
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  body.race-in-view { padding-bottom: 0; }
  .clock { font-size: 15px; min-width: 50px; }
  .auto-switch { padding: 0 8px 0 4px; min-height: 36px; font-size: 11px; gap: 5px; }
  .switch-ui { width: 32px; height: 20px; }
  .switch-thumb { width: 14px; height: 14px; }
  .auto-switch[aria-checked="true"] .switch-thumb { transform: translateX(12px); }
  .start-race {
    position: relative; order: 10; flex: none;
  }
  /* big Start button sits under the head, full width */
  #race .racehead { flex-wrap: wrap; }
  #race .race-controls { flex: 1 1 auto; }
  #race .start-race {
    flex: 1 0 100%; order: 10; min-height: 50px; font-size: 18px; font-weight: 850; border-radius: 12px; margin-top: 2px;
    box-shadow: 0 6px 18px rgba(255, 59, 47, 0.28);
  }
  #race .race-controls { flex-wrap: wrap; }
  .strip { padding: 4px 4px 2px; border-radius: 10px; }
  .flag { display: none; }
  .lane { height: 60px; margin: 0 66px 4px 0; --carw: 100px; }
  .lane:last-child { margin-bottom: 0; }
  .lane::after { top: 20px; bottom: 4px; width: 6px; background-size: 6px 6px; }
  .lab { left: 8px; right: 4px; top: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lab small { display: inline; margin-left: 6px; font-size: 10.5px; }
  .car { top: 20px; height: 38px; }
  .car .sprite { height: 37px; }
  .trail { top: 50px; height: 3px; }
  .res { right: -64px; top: 16px; width: 60px; font-size: 14px; }
  .res small { font-size: 10.5px; }
  .verdicts { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .v { padding: 10px 12px; border-radius: 12px; }
  .v .k { font-size: 10.5px; }
  .v .big { font-size: 17px; margin: 3px 0 2px; }
  .v p { font-size: 12.5px; line-height: 1.4; }

  /* ---------- compact spec table ---------- */
  #specs .tools {
    flex-wrap: nowrap; overflow-x: auto; margin: 16px -16px 8px; padding: 0 16px 2px; gap: 6px; scrollbar-width: none;
  }
  #specs .tools::-webkit-scrollbar { display: none; }
  #specs .tab { flex: none; white-space: nowrap; min-height: 34px; padding: 6px 11px; font-size: 12.5px; }
  #specs .legend { flex: none; white-space: nowrap; gap: 6px; font-size: 11px; }
  .table-wrap { overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  #specs table { display: table; table-layout: fixed; width: 100%; min-width: 0; background: transparent; }
  #specs thead { display: table-header-group; }
  #specs tbody { display: table-row-group; }
  #specs tbody tr, #specs tbody tr:not(.grp) {
    display: table-row; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible;
  }
  #specs th, #specs td, #specs tbody tr:not(.grp) td {
    display: table-cell; position: static; padding: 7px 5px; font-size: 13px; line-height: 1.25;
    border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: middle;
  }
  #specs th:first-child, #specs td:first-child { width: 29%; padding-left: 9px; }
  #specs tbody tr:not(.grp) td:first-child { background: none; width: 29%; font-size: 12px; color: var(--mut); }
  #specs td:first-child .rule { font-size: 9.5px; }
  #specs tr.grp td {
    display: table-cell; padding: 5px 9px; font-size: 10.5px; letter-spacing: 1px; border-radius: 0; background: #10141a;
  }
  #specs td.w { background: linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,.08)); }
  #specs .cell-name { display: none; }
  #specs .cell-val { display: inline; }
  #specs .ck { width: 15px; height: 15px; font-size: 10px; margin-left: 3px; vertical-align: 1px; }
  #specs .tag { font-size: 8.5px; padding: 1px 3px; margin-left: 2px; letter-spacing: 0.3px; vertical-align: 1px; }
  /* footnotes: tucked away, tap a row to read them */
  #specs .note { display: none; font-size: 10px; line-height: 1.3; margin-top: 3px; color: var(--dim); }
  #specs tr.m-open .note { display: block; }
  #specs td:has(.note) .cell-val::after { content: "ⓘ"; font-size: 10px; color: var(--mut); margin-left: 2px; vertical-align: 2px; font-weight: 600; }
  #specs tr.m-open td:has(.note) .cell-val::after { color: var(--acc); }
  #specs tbody tr:has(.note) { cursor: pointer; }
  /* sticky car strip = the table head, pinned while the specs scroll */
  #specs thead th {
    position: sticky; top: 0; z-index: 4; background: #0f1317; padding: 4px 3px 5px;
    font-size: 10.5px; letter-spacing: 0.3px; text-align: center; vertical-align: bottom; color: var(--txt);
    box-shadow: 0 1px 0 var(--line), 0 6px 12px rgba(0,0,0,.35);
  }
  #specs thead th:first-child { text-align: left; padding-left: 9px; color: var(--mut); font-size: 9.5px; }
  #specs thead th:first-child .m-hint { display: block; font-size: 9px; text-transform: none; letter-spacing: 0; font-weight: 550; margin-top: 2px; color: var(--dim); }
  #specs thead th .dot { width: 7px; height: 7px; margin-right: 4px; }
  #specs thead th .m-thumb { display: block; width: 100%; max-width: 92px; height: 30px; margin: 0 auto 1px; object-fit: contain; }
  #specs thead th:first-child { border-top-left-radius: 12px; }
  #specs thead th:last-child { border-top-right-radius: 12px; }
  .sources { font-size: 12px; }

  /* ---------- charts ---------- */
  .two { gap: 10px; margin: 12px 0 6px; }
  #charts .race { padding: 12px; border-radius: 14px; }
  #charts .racehead { margin-bottom: 4px; }
  #charts .racehead h3 { font-size: 15px; white-space: normal; }
  #charts .racehead .meta { font-size: 12px; }
  .bars .row { margin: 8px 0; gap: 6px; }
  .bars .nm { font-size: 13px; }
  .roll-bars .track { margin-right: 30px; }

  /* ---------- browse ---------- */
  #browse h2 { margin-top: 12px; font-size: 22px; }

  /* ---------- bottom tab bar ---------- */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.modal-on { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  footer { margin-top: 24px; padding-bottom: 20px; }
  .m-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: calc(60px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: rgba(11, 13, 16, 0.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  }
  body.modal-on .m-tabbar { display: none; }
  .m-tabbar button {
    background: none; border: 0; color: var(--mut); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 10.5px; font-weight: 700; min-height: 44px; padding: 0;
  }
  .m-tabbar svg { width: 22px; height: 22px; }
  .m-tabbar button.on { color: var(--txt); }
  .m-tabbar button.on svg { color: var(--acc); }
  .m-tabbar .m-add span.plus {
    display: grid; place-items: center; width: 40px; height: 32px; border-radius: 10px; background: var(--acc); color: #fff;
    font-size: 22px; font-weight: 800; line-height: 1;
  }
  .m-tabbar .m-add { color: var(--txt); }
  #race, #specs, #browse, #charts { scroll-margin-top: 8px; }
}