/* mobile.css — Grillegrill Mobile Responsive
 * Phase 0: CSS Grid + responsive foundation
 * Phase 1: Navigation — bottom tab bar, hamburger, drawers
 * Phase 2: Touch targets (44px min) + typography (16px base)
 * Phase 3: Scrollable tables
 * Phase 4: Live match view
 * Phase 6: Admin desktop notice
 * Last updated: 2026-06-10
 */

/* ============================================
   VIEW TOGGLE
   Daniel 2026-07-22 14:29: 'Ta också tillbaka den gröna
   bakgrunden hela vägen upp.' (Per the mockup Daniel sent
   in this thread.) The toggle is a minimal link at the
   top-right of the topbar — NO own background, NO own
   padding on the container (just on the link itself for
   the 44px touch target). The green background comes
   from .mobile-topbar (which is fixed, top:0, and spans
   the whole viewport width). Reading the whole topbar
   as one continuous green surface is the goal.

   Previous iterations of the [Classic] toggle:
   - pre-#172: full-width green plate at top of body
   - #172: position:fixed top-right floating pill
   - #174: inline flex item inside .mobile-header (right of 👤)
   - #175: own green strip inside .mobile-topbar (this PR
     in the previous turn, with its own background that
     made it read as a separate row from the rest of the
     green topbar)
   - this PR: same DOM position as #175 (first child of
     .mobile-topbar, before .mobile-banner) but with
     background:transparent and no padding on the
     container, so the link sits on the inherited green
     topbar background as a minimal top-right element.

   The link itself still has font-weight:normal (per #173),
   dark text (#000) on green bg, and 44px touch target
   via padding.
   ============================================ */
.view-toggle {
  background: transparent;
  padding: 0;
  font-size: var(--gg-font-size-sm);
  text-align: right;
}
.view-toggle a {
  color: var(--gg-black, #000);
  font-weight: normal;
  text-decoration: none;
  padding: 8px var(--gg-space-sm);
  display: inline-block;
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  line-height: 1.4;
}
.view-toggle strong { color: var(--gg-black, #000); }

/* ============================================
   PHASE 2: TOUCH TARGETS + TYPOGRAPHY
   WCAG 2.1 AA: 44x44px minimum touch target
   Base font: 16px
   ============================================ */

/* Global interactive element touch minimum */
*, *::before, *::after {
  box-sizing: border-box;
}

/* All tappable elements: 44px minimum in both dimensions */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="image"],
label,
select,
[role="button"],
[tabindex] {
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
}

/* Links — ensure padding + min-height = 44px touch area */
a {
  padding: var(--gg-space-md) var(--gg-space-md);
  display: inline-block;
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  line-height: 1.4;
  text-decoration: none;
  color: var(--gg-black);
  /* Ensure full touch area even in flex/grid containers */
  box-sizing: border-box;
}

/* Form elements — ensure 44px touch height */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
  min-height: var(--gg-touch-min);
  padding: var(--gg-space-md);
  font-size: var(--gg-font-size-base);
  width: 100%;
  box-sizing: border-box;
}

/* Submit / button inputs */
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: var(--gg-touch-min);
  min-width: 80px;
  padding: var(--gg-space-md) var(--gg-space-lg);
  font-size: var(--gg-font-size-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ============================================
   BASE MOBILE
   Screen widths 320px - 767px
   ============================================ */

/* Reset body for mobile */
body.MAIN {
  background-color: var(--gg-bg);
  margin: 0;
  padding: 0;
  font-size: var(--gg-font-size-base);
  -webkit-text-size-adjust: 100%;
  /* Daniel 2026-06-21 11:39: content extends past viewport on mobile
     (body horizontal scroll). Root causes vary — <marquee width='760'>
     in getNextGame(), tables without table-layout:fixed, inline images
     with intrinsic widths. Clamp body+html to viewport so the worst
     overflow sources can't break the page; per-element fixes are
     applied alongside this in mainview-mobile / statsfunctions /
     leaguefunctions. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.MAIN {
  width: 100%;
  background-color: var(--gg-white);
  margin: 0;
  padding: 0;
}

/* ============================================
   MAIN LAYOUT — CSS Grid (replaces table)
   ============================================ */
.MAINTB {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto;
  border: none;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  table-layout: fixed;
}

/* Prevent td elements from exceeding container width.
   Daniel 2026-07-01 00:58: was a descendant selector that hit every
   <td> inside MAINTB, including the inner STANDTB / STANDTB-self-
   position tables (LEFTCOL/CENTERCOL/RIGHTCOL are wrapped in a
   3-col MAINTB layout; any table inside CENTERCOL inherits the
   descendant selector). The result was that td cells in
   mobile-collapsed STANDTB tables got `display: block;
   width: 100%` and stacked vertically, even though the
   mobile-collapsed override had higher specificity — the
   override set width/overflow but never touched display.

   Restrict to direct-child td cells (LEFTCOL/CENTERCOL/RIGHTCOL
   are direct children of MAINTB's tr; nested STANDTB tables are
   NOT direct children). This lets STANDTB tables render as
   grid containers (mobile-collapsed) or as proper tables (every
   other case). */
.MAINTB > tbody > tr > td,
.MAINTB > tr > td {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Mobile banner — sits at the top of the page, above the chrome bar.
   The banner is the brand; the mobile-header below is just hamburger +
   profile. Banner image fills the viewport width and is clipped if the
   source image is wider.

   Daniel 2026-07-03 (post-QA): on a 393px mobile viewport the legacy
   <table width="860"> wrapper around banner_vm2026.png (860x88 px)
   forced the inner table to 860px and got clipped on the right edge.
   "Detta område bör ha hela bannern synlig" — make the whole banner
   visible. Fix: force the inner table to 100% width AND let the image
   scale proportionally so the entire 860x88 banner shrinks to fit the
   viewport width without cropping. The desktop template does not
   include .mobile-banner, so these rules cannot affect desktop. */
.mobile-banner {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background-color: var(--gg-white);
  line-height: 0;
}

/* The legacy wrapper table uses width="860" HTML attribute. Reset it
   to 100% inside the mobile banner container so the table shrinks
   to viewport width instead of forcing a fixed 860px layout that
   would be clipped by the parent's overflow:hidden. */
.mobile-banner table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

/* The BANNER td has align="center" and an inherited font wrapper.
   Convert to block so the inner image can fill the cell width and
   not be constrained by table-cell sizing. */
.mobile-banner td.BANNER {
  display: block;
  padding: 0;
  text-align: center;
  width: 100%;
  line-height: 0;
}

/* The legacy wrapper <font class="TBLHEAD"> would otherwise insert
   spacing around the image. Zero it out so the image paints flush. */
.mobile-banner font.TBLHEAD {
  display: block;
  line-height: 0;
}

/* Daniel 2026-08-01 02:24: default $HeaderRow in config.php uses
   class="TBLHEAD" on the <td> (not class="BANNER" like the per-
   tournament banners). Without an override, td.TBLHEAD applies
   background-color: var(--gg-green) + padding + font-size to
   the fallback banner container, creating a tall solid-green
   block above the banner image. Mirror td.BANNER's reset so the
   default fallback renders the same as the explicit banners. */
.mobile-banner td.TBLHEAD {
  display: block;
  padding: 0;
  width: 100%;
  line-height: 0;
  background-color: transparent;
  font-size: 0;
}

/* Final image rule: width:100% shrinks the 860px source down to the
   cell width, height:auto preserves aspect ratio. Combined with the
   table/td reset above, the full banner is now visible at any
   viewport width instead of being clipped on small screens. */
.mobile-banner img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border: 0;
  vertical-align: top;
}

/* Message row (conditional — may not exist on every page) */
.MAINTB > tr.row-msg > td {
  display: block;
  width: 100%;
  padding: var(--gg-space-xs);
}

/* Next game crawl row */
.MAINTB > tr.row-nextgame > td {
  display: block;
  width: 100%;
  padding: var(--gg-space-xs);
}

/* Main content row — 3 columns become 1.
   NB: the `> tr.row-content` selector is WRONG. The tr is
   a child of <tbody>, not the <table> directly. Without
   the `>`, the descendant combinator matches correctly.
   (Found via Playwright `el.matches()` debug 2026-06-15.) */
.MAINTB tr.row-content {
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.MAINTB tr.row-content > td.LEFTCOL,
.MAINTB tr.row-content > td.RIGHTCOL {
  display: none !important;  /* Hide side columns on mobile */
  width: 0 !important;
  padding: 0 !important;
}

.MAINTB tr.row-content > td.CENTERCOL {
  display: block !important;
  position: relative;
  left: 0;
  right: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0;
  padding: var(--gg-space-sm);
  box-sizing: border-box;
  /* The broken legacy HTML (tables inside <tr> without
     <td> wrapping) makes the table-layout algorithm force
     the cell to fit the widest child STANDTB. 100vw + min-
     width:0 + max-width:100vw together with table-layout
     fixed on MAINTB is the most aggressive override. */
}

/* Footer rows */
.MAINTB > tr.row-footer > td {
  display: block;
  width: 100%;
  padding: var(--gg-space-xs);
  text-align: center;
}

/* Footer Inloggade/Inloggad block.

   Pre-Daniel-2026-07-10 the markup used an inline
   `<div style="width:580;">` (desktop relic) which on a 393px
   mobile viewport overflowed by 197px and pushed the centred
   "Antal inloggade: N" text ~103px LEFT of the MAINTB column
   centre. Daniel: "Denna footer, generellt på mobilversionen,
   respekterar inte contents bredd utan ligger centrerad mot
   något annat."

   Fix is two-layered (deterministic + defensive):
   1. mainview-mobile.php replaces `style="width:580;"` with
      class="row-footer-content" so the responsive behaviour
      is class-driven, not attribute-driven. This is the
      primary fix and is deterministic.
   2. The selector rules below are a defensive catch-all for
      any future inline-style regressions or third-party
      scripts that drop a fixed-width div inside .row-footer
      without going through the class hook. */
.MAINTB tr.row-footer .row-footer-content,
.MAINTB > tr.row-footer > td font div,
.MAINTB > tr.row-footer > td > div {
  width: 100% !important;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ============================================
   BANNER / HEADER IMAGE
   Scoped narrowly: only images inside the banner cells get
   width:100%. The old rule `.MAINTB img` was stretching small
   inline icons (emailicon, percentbar, etc.) to fill the column,
   which broke Daniel 2026-06-21 11:39 ('profile/user-row with
   inline images stretching'). Inline images keep their intrinsic
   size unless they live inside the banner / a wide-image cell. */
.MAINTB .mobile-banner img,
.MAINTB td.BANNER img,
.MAINTB img[src*="banner_"] {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

/* Generic safety: no MAINTB image may exceed its column */
.MAINTB img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   TABLES — Scrollable horizontally
   ============================================ */
table {
  font-size: var(--gg-font-size-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Tables that should be full-width block containers */
table.MAINTB,
table.STANDTB,
table.PREDTB,
table.MENUTB,
table.LOGINTB,
table.SHOUT {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

table.STANDTB {
  display: block;
  overflow-x: auto;
  width: 100%;
  font-size: var(--gg-font-size-xs);
  white-space: normal;
  word-wrap: break-word;
  hyphens: auto;
}

table.PREDTB {
  display: block;
  overflow-x: auto;
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
  hyphens: auto;
  table-layout: fixed;
}

table.MENUTB {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table.LOGINTB {
  display: block;
  overflow-x: auto;
}

table.SHOUT {
  display: block;
  overflow-x: auto;
  font-size: var(--gg-font-size-xs);
}

/* Table cells */
td {
  padding: var(--gg-space-xs) var(--gg-space-sm);
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
}

td.LEFTCOL {
  display: none;
  width: 0;
}

td.RIGHTCOL {
  display: none;
  width: 0;
}

td.CENTERCOL {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--gg-space-sm);
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Nested tables must respect their container width */
.MAINTB td table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  overflow-x: auto;
}

/* Prevent nested tables from exceeding their cell width */
td.CENTERCOL table,
td.LEFTCOL table,
td.RIGHTCOL table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  overflow-x: auto;
}

/* Banner inner table — force to fit container */
td[colspan] > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

/* HELPTB must fit mobile */
table.HELPTB {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

/* PREDTB and STANDTB must fit mobile */
table.PREDTB,
table.STANDTB {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

/* Daniel 2026-06-30 07:31 (mobile pass 2): the 6-col
   <table id="WTAB"> in ShowWeekly (cmd=showweeklywinners)
   overflows on 393px. ShowMonthly (3-col: rank, username,
   points) reuses the same id+class but is fine. Use :has()
   to target only the 6-col variant: a data row with 6 td
   children means it's ShowWeekly. Hide the middle 4 cols
   (played, won, drawn, lost) on narrow viewports — they're
   "this week" details, less critical than username + points.
   ShowMonthly's 3-col data rows are unaffected. */
@media (max-width: 768px) {
  html body.MAIN table#WTAB tbody tr:has(td:nth-child(6)) td:nth-child(2),
  html body.MAIN table#WTAB tbody tr:has(td:nth-child(6)) td:nth-child(3),
  html body.MAIN table#WTAB tbody tr:has(td:nth-child(6)) td:nth-child(4),
  html body.MAIN table#WTAB tbody tr:has(td:nth-child(6)) td:nth-child(5) {
    display: none !important;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
font.TBLHEAD {
  font-size: var(--gg-font-size-sm);
  line-height: 1.3;
  color: var(--gg-white);
  font-family: var(--gg-font);
  font-weight: bold;
}

/* Force mobile font sizes on legacy font-tag selectors */
font.TBLROW {
  font-size: var(--gg-font-size-base) !important;
  line-height: 1.4;
  color: var(--gg-text) !important;
  font-family: var(--gg-font) !important;
}

font.TABELL {
  font-size: var(--gg-font-size-base) !important;
  color: var(--gg-text) !important;
  font-family: var(--gg-font) !important;
}

font.TBLHEAD {
  font-size: var(--gg-font-size-base) !important;
  line-height: 1.3;
  color: var(--gg-white) !important;
  font-family: var(--gg-font) !important;
  font-weight: bold !important;
}

/* Phase 2: ensure body base font is 16px */
body {
  font-size: var(--gg-font-size-base) !important;
  font-family: var(--gg-font) !important;
}

/* Ensure all font elements in main content use mobile sizes */
.MAIN font,
#MAINTB font,
.CENTERCOL font,
td.CENTERCOL font {
  font-size: var(--gg-font-size-base) !important;
}

/* ============================================
   LINKS — Touch-friendly (WCAG 2.1 AA 44px)
   ============================================ */
/* Use body.MAIN a for specificity over .MAIN a */
body.MAIN a,
a {
  padding: var(--gg-space-lg) var(--gg-space-md) !important;
  display: inline-block !important;
  min-height: var(--gg-touch-min) !important;
  min-width: var(--gg-touch-min) !important;
  height: auto !important;
  width: auto !important;
  line-height: 1.4;
  text-decoration: none !important;
  color: var(--gg-black) !important;
  font-family: var(--gg-font) !important;
  font-size: var(--gg-font-size-base) !important;
  box-sizing: border-box;
}

body.MAIN a:link,
body.MAIN a:visited,
body.MAIN a:hover,
a:link,
a:visited,
a:hover {
  font-family: var(--gg-font) !important;
  font-size: var(--gg-font-size-base) !important;
  color: var(--gg-black) !important;
  text-decoration: none !important;
  padding: var(--gg-space-lg) var(--gg-space-md) !important;
  min-height: var(--gg-touch-min) !important;
  min-width: var(--gg-touch-min) !important;
  height: auto !important;
  box-sizing: border-box;
}

body.MAIN a:hover,
a:hover {
  color: orange !important;
}

/* Ensure any link containing only a small image has 44px touch target */
body.MAIN a:has(> img),
a:has(> img) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: var(--gg-space-sm) !important;
  box-sizing: border-box;
}

/* Catch-all for ALL anchor elements — ensure 44px touch target */
html body.MAIN a,
html body.MAIN a:link,
html body.MAIN a:visited,
html body.MAIN a:hover,
html body.MAIN a:active {
  display: inline-block !important;
  min-height: 44px !important;
  min-width: 44px !important;
  width: auto !important;
  height: 44px !important;
  box-sizing: border-box;
}

/* ============================================
   INPUT ELEMENTS — Touch-friendly
   ============================================ */
.inputbox,
input.inputbox {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-base);
  font-weight: bold;
  color: var(--gg-text);
  background: var(--gg-white);
  border: 1px solid var(--gg-black);
  padding: var(--gg-space-md) var(--gg-space-md);
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  width: 100%;
  box-sizing: border-box;
}

.submit,
input.submit,
input[type="submit"].submit {
  font-family: var(--gg-font);
  font-style: normal;
  font-weight: bold;
  font-size: var(--gg-font-size-base);
  color: var(--gg-red);
  border: 1px solid var(--gg-black);
  background: var(--gg-white);
  padding: var(--gg-space-md) var(--gg-space-lg);
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ============================================
   TABLE HEADER CELLS
   ============================================ */
td.TBLHEAD {
  background-color: var(--gg-green);
  padding: var(--gg-space-sm);
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-sm);
  color: var(--gg-white);
  font-weight: bold;
}

td.TBLPOS { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLUSER { background-color: var(--gg-green); width: 120px; text-align: center; }
td.TBLPLAYED { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLWON { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLDRAWN { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLLOST { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLFOR { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLAGAINST { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLGD { background-color: var(--gg-green); width: 40px; text-align: center; }
td.TBLPTS { background-color: var(--gg-green); width: 40px; text-align: center; }

/* ============================================
   TABLE DATA ROWS
   ============================================ */
td.TBLROW {
  background-color: var(--gg-row-even);
  overflow: visible;
  text-overflow: ellipsis;
  min-height: var(--gg-touch-min);
  padding: var(--gg-space-sm);
  box-sizing: border-box;
}

td.TBLROW a {
  display: block;
  padding: var(--gg-space-md) var(--gg-space-sm);
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  box-sizing: border-box;
}

td.TBLROWODD {
  background-color: var(--gg-row-odd);
  min-height: var(--gg-touch-min);
  box-sizing: border-box;
  overflow: visible;
}

td.TBLROWODD a {
  display: block;
  padding: var(--gg-space-md) var(--gg-space-sm);
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  box-sizing: border-box;
}

/* Inside the drawer, table rows are part of dense lists (statistik,
   predictions, standings) — the user expects ~15 rows on screen, not
   the 5 they get with 44px touch-target rows + 8px padding. Override
   the touch-friendly defaults for drawer-content cells. Touch targets
   stay valid because each row is a full-width block; users tap the
   whole row, not a small inner link.
   Daniel 2026-06-19 01:52: 'There is way to much space between things.
   On this you should be able to fit like 15 rows of info.' */
.drawer-content td.TBLROW,
.drawer-content td.TBLROWODD {
  padding: var(--gg-space-xs) var(--gg-space-md) !important;
  min-height: 0 !important;
  line-height: 1.2;
}
.drawer-content td.TBLHEAD {
  padding: 2px var(--gg-space-md) !important;
  min-height: 0 !important;
  line-height: 1.0 !important;
  font-size: 13px !important;
}
/* Daniel 2026-06-19 13:11: 'we have a wrapping problem' —
   Tipparstatistik header rendered on 3 lines (title, nav,
   matchup) instead of 1. The earlier commit (69df54a) tried
   to collapse the line breaks with `display: block; height: 0;
   visibility: hidden` on <br>, but a `display: block` element
   still creates a line break in inline flow regardless of
   height. Same for the inner `<div id="A_FIXT_TEXT">` — it
   was `display: block !important` which forces a new line
   before the matchup text.
   Fix: `display: contents` on <br> (acts as if not there, no
   line break) and `display: inline` on the div (no block
   box, no line break). The <div> still exists in the DOM
   for the JS update hook (statsfunctions.php:974-1015 calls
   `replaceChild` on it via prev/next nav), just not visually
   as a block.
   Combined width: 'Tipparstatistik <- förra  Nästa ->  USA
   v Australien' = 283 CSS px at 13px Tahoma. The TBLHEAD
   content area is 333 CSS px at 393px viewport (drawer 373
   - 16 padding - 24 horizontal padding = 333). Fits with
   ~50px to spare, no overflow at 360px viewport either
   (cell = 304 - 24 = 280 CSS, text 283 → 3px overflow,
   acceptable — the title still renders, just tighter).
   At < 320px viewport the drawer hits the 320px clamp
   floor and content area shrinks further; we let it wrap
   to 2 lines instead of fighting the layout.
   The narrow rule for this case is the duplicate below
   near line 3238; this comment block stays here as the
   original spec. */
/* Match `<div>` directly inside `<font>` AND `<div>` nested one
   level deeper inside an anchor (the markup is `<font>...<a>
   <div id="A_FIXT_TEXT">USA v Australien</div></a>...</font>`
   per statsfunctions.php:1118-1123 — the div lives inside the
   anchor so the JS prev/next click handler can swap its
   textContent). Use a descendant selector so both layouts
   collapse to inline. */
.drawer-content td.TBLHEAD > font > div,
.drawer-content td.TBLHEAD > font > a > div {
  display: inline !important;
  margin: 0;
  line-height: 1.0 !important;
  font-size: 13px !important;
  font-weight: 600;
  white-space: nowrap;
}
.drawer-content td.TBLHEAD > font {
  white-space: nowrap;
}
/* font.TBLHEAD has font-size: var(--gg-font-size-base)!important
   (16px) and line-height: 1.3 set globally in mobile.css:386. In
   the drawer that's too tall for a dense list — a single 3-line
   Tipparstatistik header ends up at 117px when it should fit in
   ~50px. Override the !important so the header fits alongside
   ~15 data rows on a 750px-tall content area. */
.drawer-content font.TBLHEAD {
  font-size: 13px !important;
  line-height: 1.0 !important;
  color: var(--gg-white) !important;
}
.drawer-content td.TBLHEAD,
.drawer-content td.TBLHEAD *,
.drawer-content td.TBLHEAD a,
.drawer-content td.TBLHEAD a:link,
.drawer-content td.TBLHEAD a:visited,
.drawer-content td.TBLHEAD a:hover,
.drawer-content td.TBLHEAD div,
.drawer-content td.TBLHEAD font {
  color: var(--gg-white) !important;
}
/* mobile.css:413 sets `a { min-height: var(--gg-touch-min) !important; }`
   so all anchors are 44px touch-targets. Inside the Tipparstatistik
   header the nav links ('<- förra' / 'Nästa ->') were forcing each
   row to be 44px tall instead of 13px. The header is a label, not a
   button — drop the touch-target. */
.drawer-content td.TBLHEAD a,
.drawer-content td.TBLHEAD a:link,
.drawer-content td.TBLHEAD a:visited,
.drawer-content td.TBLHEAD a:hover {
  min-height: 0 !important;
  padding: 0 !important;
  display: inline !important;
  line-height: 1.0 !important;
  font-size: 13px !important;
  vertical-align: baseline;
}
/* Strip the explicit <br> in TBLHEAD so all sub-text fits on
   one line ("Tipparstatistik <- förra Nästa -> USA v Australien").
   Saves ~50px on the Tipparstatistik header on the right drawer.
   The legacy markup uses <br> to separate title / nav / matchup;
   inline-flow with whitespace is readable enough at 13px. */

.drawer-content table.PREDTB {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse;
}
/* Daniel 2026-07-14 01:12: previously set `white-space: nowrap` on
   ALL drawer font.TBLROW elements to keep Klara player names on one
   line each. But that also forced the Tipparstatistik [INFO] row and
   the swisha note to nowrap, clipping them against the drawer's right
   edge (the [INFO] text starts "Den 3:e kolumnen är en demo..." and
   runs 800+ chars). Scope nowrap ONLY to the Klara player list scroll
   div where it's actually needed — other font.TBLROW elements need
   normal wrap behavior. */
.drawer-content font.TBLROW {
  font-size: var(--gg-font-size-sm) !important;
  line-height: 1.2 !important;
}

/* Keep each Klara player name as a single inline label so the
   comma-separated list flows correctly. Only applies inside the
   scrollable player list div emitted by prize.php. */
.right-drawer .klara-list font.TBLROW {
  white-space: nowrap !important;
}.drawer-content td[bgcolor="GOLD"],
.drawer-content td[bgcolor="WHITE"] {
  color: red !important;
}
.drawer-content td[bgcolor="GOLD"] *,
.drawer-content td[bgcolor="WHITE"] *,
.drawer-content td[bgcolor="GOLD"] font,
.drawer-content td[bgcolor="WHITE"] font,
.drawer-content td[bgcolor="GOLD"] a,
.drawer-content td[bgcolor="WHITE"] a,
.drawer-content td[bgcolor="GOLD"] a:link,
.drawer-content td[bgcolor="WHITE"] a:link {
  color: red !important;
}

/* Lock the 3 PREDTB columns to fixed widths so nowrap on the
   percent value ('26.9% [17]') can't blow out the column. */
.drawer-content table.PREDTB td:nth-child(1) { width: 24% !important; }
.drawer-content table.PREDTB td:nth-child(2) { width: 52% !important; text-align: left !important; }
.drawer-content table.PREDTB td:nth-child(3) { width: 24% !important; text-align: right !important; }
.drawer-content td.TBLROW a,
.drawer-content td.TBLROWODD a {
  padding: var(--gg-space-xs) var(--gg-space-md) !important;
  min-height: 0 !important;
  line-height: 1.2;
}

/* Daniel 2026-06-19 08:19: 'Samma gäller Omgångens grillegrill o
   lagstatsen — mindre radavstånd. Vinnare o förlorare i den menyn
   skall såklart ha en rad per spelare, inte som det ser ut nu,
   två.' Translation: same row-spacing fix needed for Omgångens
   Grillegrill (ShowWeeklyWinners — covered by commit 8c8b1bc
   already), Lag Stats (ShowTeamPercentages), and Vinnare &
   förlorare (ShowUpsAndDowns).

   What still doesn't fit one-row-per-player:
   - Lag Stats (table.RIGHT, td.TBLROW): row height 26px because
     td padding 4px 12px + 14px font + 16.8px line-height ≈ 26px
     ≈ 1.6 body-lines. Daniel sees it as 'space between things'
     per his 01:52 note.
   - Vinnare & förlorare (WWTAB, td.UADUP / td.UADDOWN): row
     height 30px because common.css `font.UADUP { font-size:
     10pt }` (~13.3px) loses to mobile.css `.MAIN font { font-
     size: var(--gg-font-size-base) }` (16px) on specificity
     tie, so the inner <font> renders at 16px with line-height
     22.4px. 22.4 + 4+4 padding = 30.4px ≈ 2 body-lines.
     That's why Daniel says 'två' (two).

   Tighten the data-row cells + fonts in drawer scope so each
   row is one body line:
   - cell padding 2px 8px (was 4px 12px on TBLROW, 4px 8px on
     UADUP).
   - inner <font> at --gg-font-size-sm (14px) instead of the
     16px leaked from `.MAIN font`.
   - line-height 1.3 (was 1.4 inherited from global `a` / `td`).

   After this: row height = 2 + 14×1.3 + 2 ≈ 22px ≈ 1 body line
   on a 16px-baseline viewport. Still touchable (22 > 16), but
   reads as 'one player per row' instead of 'spacious list'.
   The Tipparstatistik stats rows (also td.TBLROW) inherit this
   tightening too — currently 25px, drops to ~22px. Still above
   the 1-line baseline, still readable. */
.drawer-content td.TBLROW,
.drawer-content td.TBLROWODD,
.drawer-content td.UADUP,
.drawer-content td.UADDOWN {
  padding: 2px var(--gg-space-sm) !important;
  line-height: 1.3 !important;
}
.drawer-content font.UADUP,
.drawer-content font.UADDOWN {
  font-size: var(--gg-font-size-sm) !important;
  line-height: 1.3 !important;
}

/* Daniel 2026-06-19 08:17: Names in the Klara (verified players)
   box and in the WWTAB weekly-winners / ups-downs tables are
   wrapped in <a> tags. The global mobile.css:413-427 `a` rule
   forces inline-block + 16px 12px padding + 44px touch-target
   sizing (min-height:44px + height:44px + min-width:44px), which
   turns each name into a fat padded box:
   - Klara: huge horizontal gaps between names (inline-block
     boxes can't sit next to each other), names wrap as 3-per-row
     instead of flowing as 'name1, name2, name3'.
   - WWTAB rows: 52px tall (44px height + 4px td padding × 2)
     instead of body-text height.

   The previous commit (69df54a) handled TBLHEAD <a> with the
   same logic — drop the touch-target because the <a> is a label,
   not a button. Apply the same here for the data-row <a>s.

   Specificity check vs the global rules:
   - body.MAIN a { ... } : (0,1,1) — loses on every property.
   - html body.MAIN a { height:44px !important } : (0,1,3) —
     loses on `height`, but tied on the !important — and source
     order puts this rule earlier. Override with !important
     here (also later in source) so we win on equal-important
     declarations.
   - .drawer-content td.TBLROW a : (0,2,2) — wins outright.
   Adding the same selector list for UADUP/UADDOWN covers the
   ups-and-downs rows in ShowUpsAndDowns (those use UADUP /
   UADDOWN as the cell class instead of TBLROW).
   td[bgcolor="WHITE"] covers the prize.php inner white box
   where the Klara names live. */
.drawer-content td[bgcolor="WHITE"] a,
.drawer-content td[bgcolor="WHITE"] a:link,
.drawer-content td[bgcolor="WHITE"] a:visited,
.drawer-content td[bgcolor="WHITE"] a:hover,
.drawer-content td.TBLROW a,
.drawer-content td.TBLROW a:link,
.drawer-content td.TBLROW a:visited,
.drawer-content td.TBLROW a:hover,
.drawer-content td.TBLROWODD a,
.drawer-content td.TBLROWODD a:link,
.drawer-content td.TBLROWODD a:visited,
.drawer-content td.TBLROWODD a:hover,
.drawer-content td.UADUP a,
.drawer-content td.UADUP a:link,
.drawer-content td.UADUP a:visited,
.drawer-content td.UADUP a:hover,
.drawer-content td.UADDOWN a,
.drawer-content td.UADDOWN a:link,
.drawer-content td.UADDOWN a:visited,
.drawer-content td.UADDOWN a:hover {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  line-height: 1.3 !important;
  font-size: var(--gg-font-size-sm) !important;
  vertical-align: baseline;
}

/* ============================================
   POSITION COLORS (medal colors)
   ============================================ */
td.POS1,
font.POS1 { background-color: gold; }
td.POS2,
font.POS2 { background-color: silver; }
td.POS3,
font.POS3 { background-color: var(--gg-bronze); }

td.POS45,
font.POS45 {
  border-collapse: collapse;
  background: repeating-linear-gradient(45deg, var(--gg-white), var(--gg-white) 5px, #D3F2DA 5px, #D3F2DA 10px);
}

td.POS610,
font.POS610 {
  border-collapse: collapse;
  background: repeating-linear-gradient(45deg, var(--gg-white), var(--gg-white) 5px, #DDF9F7 5px, #DDF9F7 10px);
}

td.POS10TH,
font.POS10TH {
  border-collapse: collapse;
  background: repeating-linear-gradient(45deg, var(--gg-white), var(--gg-white) 5px, #f0f0f0 5px, #f0f0f0 10px);
}

td.POS6,
font.POS6 { background-color: #7CFC00; }
td.POS5,
font.POS5 { background-color: BLUE; }
td.POS4,
font.POS4 { background-color: #ff66ff; }

/* ============================================
   UP/DOWN STATUS
   ============================================ */
td.UADUP { background-color: var(--gg-up); }
td.UADDOWN { background-color: var(--gg-down); }
font.UADUP { color: var(--gg-white); }
font.UADDOWN { color: var(--gg-white); }

/* ============================================
   ERROR / WARNING / INFO STATES
   ============================================ */
td.ERROR { background-color: var(--gg-error); }
td.WARNING { background-color: var(--gg-warning); }
td.INFO { background-color: var(--gg-info); }
font.ERROR, font.WARNING, font.INFO { color: var(--gg-white); }

/* ============================================
   MESSAGE BOXES
   ============================================ */
td.MESSAGE {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-white);
  font-family: var(--gg-font);
  text-decoration: none;
  background-color: var(--gg-green);
  padding: var(--gg-space-sm);
}

/* ============================================
   LOGIN PANEL
   ============================================ */
td.LOGINHD { background-color: var(--gg-green); }
td.LOGINRW { background-color: var(--gg-row-even); }
font.LOGINHD { font-size: var(--gg-font-size-xs); color: var(--gg-white); font-family: var(--gg-font); font-weight: bold; }
font.LOGINRW { font-size: var(--gg-font-size-xs); color: var(--gg-text); font-family: var(--gg-font); }

/* ============================================
   SHOUTBOX / CHAT
   ============================================ */
/* Daniel 2026-07-14 21:30: MiniChat in profile-drawer renders
   as <table width="162px"> with td.SHOUTROW inside. The 162px
   inline width is the legacy desktop LEFTCOL width — too
   narrow for the ~340px mobile drawer. Without this fix, the
   <table> itself sits at the legacy 162px (or expanded by
   cascade but with padding leaving ~16pt of right whitespace
   inside the drawer). Force 100% on the table AND strip
   the inner td.SHOUTROW padding so messages use the full
   drawer width like the Logga in-knappen below them.
   Pattern matches `#STATS + table[width] { width: 100% !important }`
   from PR #154 for the Antal tips mini-table. */
table:has(td.SHOUTROW) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  table-layout: auto !important;
}
table:has(td.SHOUTROW) > tbody > tr > td.SHOUTROW,
table:has(td.SHOUTROW) > tr > td.SHOUTROW {
  padding: 0 !important;
}

div.SHOUTROW {
  background: var(--gg-row-even);
  color: var(--gg-text);
  padding: var(--gg-space-xs);
  width: 100%;
  /* Daniel 2026-07-08: 'Gör shoutboxen 50% större vertikalt'.
     Bumped 200px → 300px (50%). The MiniChat (formerly right-drawer
     shoutbox, now in profile-drawer after PR #100) has ~22 shouts; at
     200px only 3 fit before scrolling, which made iOS Safari's
     overflow scrollbar thumb very visible at the right edge. 300px
     fits 4-5 shouts, reducing the visual prominence of the scrollbar.
     The desktop common.css div.SHOUTROW rule (140px wide, 400px tall)
     stays untouched — desktop has a wider content area and uses the
     same overflow:auto pattern, the wider element tolerates a taller
     scroll region without eating the viewport. */
  height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

font.SHOUTROW {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-family: var(--gg-font);
}

/* Daniel 2026-07-14 22:26: shout messages stored as
   'blev ju 1-1 i norge<br>mot england?' — the <br> is from
   the legacy 140px desktop LEFTCOL where manual line breaks
   were needed to avoid horizontal scroll. With the drawer
   at ~340px the message fits on one line, but the inline
   <br> still forces a wrap at "norge", leaving the rest
   of the line empty. Strip the <br>s in SHOUTMSG so text
   flows naturally by container width; SHOUTHEAD/SHOUTDATE
   stay intact (they're already short). */
font.SHOUTMSG br { display: none; }

font.SHOUTHEAD {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-family: var(--gg-font);
  font-weight: bold;
}

font.SHOUTDATE {
  font-size: 10px;
  color: var(--gg-text-muted);
  font-family: var(--gg-font);
}

font.SHOUTMSG {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-family: var(--gg-font);
}

/* ============================================
   LEADERBOARD / STANDINGS
   ============================================ */
td.LEADER { background-color: yellow; }
font.LEADER { font-size: var(--gg-font-size-sm); color: var(--gg-text); font-family: var(--gg-font); }

/* ============================================
   FLAG ICONS — ensure touch target via parent link
   ============================================ */
img.FLAG {
  height: 14px;
  border: 0;
  vertical-align: middle;
  display: block;
}

/* Ensure any link containing only a small image has 44px touch target */
a:has(> img) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gg-touch-min);
  min-width: var(--gg-touch-min);
  padding: var(--gg-space-xs);
  box-sizing: border-box;
}

/* Catch-all: any link in main content that is below 44px in either dimension */
.MAIN a,
#MAINTB a,
.CENTERCOL a,
td.CENTERCOL a {
  min-height: var(--gg-touch-min) !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Footer and sidebar links too */
.MAINTB > tr > td a {
  min-height: var(--gg-touch-min) !important;
  height: auto !important;
  box-sizing: border-box;
}

/* ============================================
   TAB ICONS
   ============================================ */
img.TABICON {
  height: 16px;
  border: 0;
}

/* ============================================
   TEAM CELLS
   ============================================ */
td.TEAM {
  display: table-cell;
  background-color: var(--gg-white);
  vertical-align: middle;
}
font.TEAM {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  font-weight: normal;
  text-decoration: none;
}

td.FLAG {
  background-color: var(--gg-row-even);
  text-align: center;
}
font.FLAG {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
}

/* ============================================
   CRAWL / MARQUEE ROW
   ============================================ */
td.TDCRAWL {
  background-color: var(--gg-white);
  width: 100%;
  text-align: center;
  padding: var(--gg-space-sm);
}

/* ============================================
   MENU STYLING
   ============================================ */
#MENU li a {
  text-decoration: none;
  color: var(--gg-white);
  display: block;
  padding: var(--gg-space-md) var(--gg-space-sm);
  min-height: var(--gg-touch-min);
}

#MENU li a:hover {
  text-decoration: none;
  color: var(--gg-black);
  background-color: #33B5E5;
}

/* ============================================
   BLINK ANIMATION (retro)
   ============================================ */
.blink {
  animation-duration: 1s;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================
   LANGUAGE OPTIONS
   ============================================ */
td.LANG {
  background-color: var(--gg-green);
  text-align: center;
}
font.LANG {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-white);
  font-family: var(--gg-font);
  font-weight: bold;
  text-decoration: none;
}

/* ============================================
   INLINE ELEMENTS
   ============================================ */
td.INLINE {
  display: inline;
  background-color: var(--gg-row-even);
}

/* ============================================
   HELP / INFO STYLES
   ============================================ */
font.HELPTEXT {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  text-decoration: none;
  background-color: var(--gg-white);
}

font.HELPROW {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  text-decoration: none;
}

font.HELPHEAD {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-white);
  font-family: var(--gg-font);
  /* Daniel 2026-07-13 14:18: previously this was
     'text-decoration: BOLD' which is not valid CSS — the
     browser silently ignores it, so the heading text never
     rendered bold. font-weight: bold is the correct property.
     The section title also needs explicit text-align: center
     + vertical-align: middle on the wrapping td (the legacy
     align='CENTER' HTML attr is overridden by .HELPTB td
     rules elsewhere in this file). */
  font-weight: bold;
}

/* Center the section heading both axes inside the green
 * TBLHEAD bar on the mobile help page. Daniel 2026-07-13
 * 14:18 screenshot from Grillegrill Developing: section
 * titles (Allmänna förutsättningar, Kontoregler,
 * Turneringsregler, Poängberäkning, etc.) appeared
 * left-aligned and not bold on the green background.
 * Scope: only HELPTB rows whose next cell carries HELPHEAD,
 * so we don't accidentally re-style the regular TBLHEAD
 * header bar (which uses different padding). */
table.HELPTB td.TBLHEAD:has(> font.HELPHEAD) {
  text-align: center;
  vertical-align: middle;
  padding: var(--gg-space-sm, 8px) var(--gg-space-md, 12px);
}

/* Daniel 2026-07-13 16:09: 'Det är font class=helprow som
 * ska fixas. De TD där den klassen finns.' Belt-and-braces
 * rule that does NOT depend on :has() (older Safari
 * fallback) and targets the dedicated HELPHEAD section bar
 * directly via the font class. Covers any td that wraps a
 * HELPHEAD font directly, regardless of how the rest of the
 * cascade resolved earlier. Also catch the case where the
 * same title token appears inside a HELPROW font's first
 * <b> child. */
table.HELPTB td.TBLHEAD font.HELPHEAD {
  display: block;
  background-color: var(--gg-green);
  color: var(--gg-white);
  font-weight: bold;
  font-size: var(--gg-font-size-sm);
  font-family: var(--gg-font);
  text-align: center;
  padding: var(--gg-space-sm, 8px) var(--gg-space-md, 12px);
  margin: 0;
}

/* Daniel 2026-07-22 11:33: section title text rendered black
 * on the green plate despite HELPHEAD declaring
 * color: var(--gg-white). helpview.php wraps the title in
 * <a name="SCORING">…</a> (anchor targets for #SCORING,
 * #NEWUSER, etc.) and the generic `a { color: var(--gg-black) }`
 * rule (~line 67) targets the anchor directly — specificity
 * (0,0,1) wins over the inherited colour from the parent
 * <font> because the anchor's color rule is a direct hit on
 * the element. The fix targets any anchor inside a HELPHEAD
 * font inside a HELPTB section bar and forces white, scoped
 * so it cannot leak to anchors elsewhere on the page. */
table.HELPTB td.TBLHEAD font.HELPHEAD a,
table.HELPTB td.TBLHEAD font.HELPHEAD a:link,
table.HELPTB td.TBLHEAD font.HELPHEAD a:visited,
table.HELPTB td.TBLHEAD font.HELPHEAD a:hover,
table.HELPTB td.TBLHEAD font.HELPHEAD a:active {
  /* !important to beat the generic `a:link { color: var(--gg-black) !important }`
   * rule at ~line 568 — !important beats non-!important regardless
   * of specificity, and our higher specificity (0,4,2) vs (0,1,1)
   * is irrelevant against the !important cascade. */
  color: var(--gg-white) !important;
  text-decoration: none !important;
}

/* Daniel 2026-07-13 15:13 + 15:30 was a wider experiment
 * that also styled inline-<b> tokens inside HELPROW
 * (e.g. 'Dellos Grillegrill!') as their own green bars.
 * PR #147 (scoped selector) and PR #149 (BELT-AND-BRACES)
 * both ended up styling variables and inline-emphasized
 * numbers inside <li> items as bar headers — Daniel 16:33
 * 'Revert. Det där är helt fel. Du har återigen gjort
 * varenda variabel till en rubrik.' Screenshot showed
 * '<b>5</b>', '<b>3</b>', '<b>8</b>', '<b>1</b>' etc.
 * inside the Scoring block rendered as green bars.
 *
 * Fix: kill every selector that targets <b> tokens inside
 * td.TBLROW. Section titles live ONLY in
 * <td class='TBLHEAD'><font class='HELPHEAD'>…</font></td>
 * on this page (helpview.php), and both rules above style
 * those four cells. Nothing inside td.TBLROW gets promoted
 * to a bar. */

/* Daniel 2026-07-22 11:33: section sub-headings inside the
 * HELP body must read as white text on a green plate,
 * matching the dedicated HELPHEAD section bars above.
 * The convention used by the Swedish help text is to wrap
 * each sub-heading in <p><b>HEADING</b></p> — the <b> is
 * always the FIRST element child of its parent <p>. Using
 * `p > b:first-child` (not just `b` inside a <td.TBLROW>)
 * keeps this rule scoped to actual section headings and
 * leaves inline-emphasised numbers inside <li> bullets
 * (Scoring block, e.g. '5', '3', '8') untouched. This is
 * exactly the selector the spec tests in
 * mobile-help-bold-titles-scoped.spec.js + the
 * no-variable-bars.spec.js guard test rely on; both were
 * red-on-main since the 2026-07-13 revert that styled
 * every <b> inside <td.TBLROW> as a bar. */
table.HELPTB td.TBLROW p > b:first-child {
  display: block;
  background-color: var(--gg-green);
  color: var(--gg-white);
  font-weight: bold;
  font-size: var(--gg-font-size-base);
  font-family: var(--gg-font);
  text-align: center;
  padding: var(--gg-space-sm, 8px) var(--gg-space-md, 12px);
  margin: 0 0 var(--gg-space-sm, 8px) 0;
}

font.PREDHEAD {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-red);
  font-family: var(--gg-font);
  /* Daniel 2026-07-13 14:18: text-decoration: BOLD is not
   * valid CSS (font-weight is). Same fix as HELPHEAD. */
  font-weight: bold;
}

/* ============================================
   PRIZE / HALL OF FAME
   ============================================ */
font.HOFAME {
  font-size: var(--gg-font-size-lg);
  color: var(--gg-white);
  font-family: var(--gg-font);
  font-weight: bold;
  text-decoration: none;
  background-color: var(--gg-black);
}

/* ============================================
   VERSION TEXT
   ============================================ */
font.VERSION {
  font-size: 10px;
  color: var(--gg-text);
  font-family: var(--gg-font);
}

font.NEDFLYTT {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  text-decoration: none;
}

font.KVAL {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  text-decoration: none;
}

td.NEDFLYTT { background-color: #A0A0A0; }
td.KVAL { background-color: #D0D0D0; }
td.TABELL { background-color: var(--gg-white); }

/* ============================================
   MESSAGE NOTICES (global messages)
   ============================================ */
font.MESSAGE {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-white);
  font-family: var(--gg-font);
  text-decoration: none;
  background-color: var(--gg-green);
}

/* ============================================
   PRD ROW (prediction rows)
   ============================================ */
font.PRDROW {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text);
  font-family: var(--gg-font);
  font-weight: normal;
  text-decoration: none;
  background-color: var(--gg-row-even);
}

/* ============================================
   TABLE BORDERS (keep retro rounded look)
   ============================================ */
td {
  border-collapse: separate;
  border: solid white 0px;
  border-radius: 3px;
  -moz-border-radius: 3px;
}

/* ============================================
   RESPONSIVE: 376px - 767px (larger phones)
   ============================================ */
@media (min-width: 376px) and (max-width: 767px) {
  font.TBLROW {
    font-size: var(--gg-font-size-base);
  }
  
  td.TBLUSER { width: 150px; }
  
  table.STANDTB {
    font-size: var(--gg-font-size-sm);
  }
  
  /* Slightly larger touch targets still fine */
  a {
    padding: var(--gg-space-md);
  }
}

/* ============================================
   MOBILE TEMPLATE: 1024px+ viewport
   A wide browser does not change the selected view. Keep the Mobile
   shell single-column; only Classic's separate PHP template owns the
   legacy three-column layout. These selectors are deliberately scoped
   to body.MAIN, which exists only in mainview-mobile.php.
   ============================================ */
@media (min-width: 768px) {
  body.MAIN .MAINTB {
    display: block !important;
    width: 100% !important;
    max-width: 2800px !important;
    margin: 0 auto !important;
  }
  body.MAIN td.LEFTCOL,
  body.MAIN td.RIGHTCOL {
    display: none !important;
  }
  body.MAIN td.CENTERCOL {
    display: block !important;
    width: 100% !important;
  }
  body.MAIN .desktop-only {
    display: none !important;
  }

  /* Preserve the Mobile standings card grid on wide viewports. */
  body.MAIN table.STANDTB.mobile-collapsed > tbody,
  body.MAIN table.STANDTB.mobile-collapsed > thead {
    display: block !important;
    width: 100% !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    display: grid !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    padding: 8px 12px !important;
    column-gap: 6px;
  }
}

/* ============================================
   MOBILE HEADER
   Fixed top bar with hamburger + logo + profile
   ============================================ */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--gg-green);
  padding: var(--gg-space-sm) var(--gg-space-md);
  min-height: 56px;
  box-sizing: border-box;
  gap: var(--gg-space-sm);
}

/* Daniel 2026-07-22 13:00: entire topbar (banner + chrome +
 * lid selector) is now a single fixed container at the top
 * of the viewport. Stays visible while the page content
 * scrolls underneath. Same pattern as the bottom-tab-bar
 * (position: fixed; bottom: 0).
 *
 * Why fixed instead of sticky: position:sticky on the topbar
 * is silently broken on this page because body.MAIN has
 * overflow-x: hidden (added 2026-06-21 to sledgehammer-fix
 * horizontal overflow from <marquee> + wide tables + inline
 * images). In WebKit, an ancestor with overflow != visible
 * on EITHER axis kills sticky positioning when the scroll
 * container is the viewport. Removing overflow-x:hidden
 * would re-introduce the original overflow bug, so the
 * reliable fix is fixed + padding-top on body to make room
 * for the topbar (mirror of the existing
 * padding-bottom:60px for the bottom-tab-bar).
 *
 * z-index 200 matches the prior .mobile-header sticky
 * z-index and is high enough to overlay the bottom-tab-bar
 * (z=100) and the page content; drawer overlays sit higher
 * (z=300-400) so they still cover the topbar when open. */
.mobile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--gg-green);
}

/* Daniel 2026-07-22 13:00: lid selector now lives inside the
 * chrome bar (between ☰ and 👤). ShowLidValues() renders
 * <select id='onsellid'> directly — no label, no .valjaliga
 * wrapper. Minimal styling so it sits in the green bar without
 * crowding the 44px touch targets on either side.
 *
 * Selector — compact, white background, dark text, fills the
 * available flex space (1 1 auto). The native iOS select
 * chrome (▼ caret) is preserved; we don't fake it with a
 * background-image arrow because that breaks the accessibility
 * tree and the native focus ring on tap. */
.mobile-header select#onsellid {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  font-size: var(--gg-font-size-sm);
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-weight: 600;
  color: var(--gg-text, #000);
  background-color: var(--gg-white, #fff);
  border: 1px solid var(--gg-green-dark, #2a7a2a);
  border-radius: 6px;
  padding: 0 8px;
  box-sizing: border-box;
  /* Tappable on iOS — the native <select> opens its wheel on
   * tap, which is the expected behaviour. 36px height sits
   * between the 44px buttons and a tighter dropdown. */
  -webkit-appearance: menulist-button;
  appearance: menulist-button;
  margin: 0;
  /* Inherit global font-size: var(--gg-font-size-base) !important
   * from the .MAIN font rule (~line 514) — override it so the
   * select text isn't larger than the rest of the chrome bar. */
  font-size: var(--gg-font-size-sm) !important;
}

/* When only one league exists, ShowLidValues() isn't called
 * from mainview-mobile.php — no select renders. The flex
 * container still has space between the two buttons; that's
 * fine — the chrome bar looks balanced with the lid selector
 * gone (centre area is empty, like before this PR). */

/* Button touch targets — element+class for specificity */
button.mobile-menu-btn {
  background: none !important;
  border: none !important;
  padding: var(--gg-space-sm) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

button.mobile-profile-btn {
  background: none !important;
  border: none !important;
  padding: var(--gg-space-sm) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

button.drawer-close {
  background: none !important;
  border: none !important;
  color: var(--gg-white) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: var(--gg-space-md) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--gg-white);
  position: relative;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--gg-white);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

.profile-icon {
  font-size: 24px;
  line-height: 1;
}

.mobile-logo {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg);
  font-weight: bold;
  color: var(--gg-white);
  text-decoration: none;
}

/* ============================================
   DRAWERS (slide-in panels)
   ============================================ */
.drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.drawer-overlay.open {
  display: block;
  opacity: 1;
}

.left-drawer,
.right-drawer,
.profile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  /* Daniel 2026-06-19, two notes read together:
     1) 'menyn måste passa bredden på slide in över elementet'
     2) 'det här är för stort jämfört med området till vänster.
        Låt menyn fylla ut mera.'

     (1) means 'drawer width must be stable, not random per
     viewport' — the slide-in animation translates over the
     drawer's own width so as long as the drawer has a defined
     width the animation matches.

     (2) means 'wider than 280px, the previous cap was too
     narrow' — admin labels (Matchfunktioner, Användarfunktioner,
     Ligafunktioner) had no room and the drawer felt like a
     sidebar sliver next to a busy page.

     Solution: clamp(320px, 95vw, 400px). 320px floor so iPhone-SE
     (360px viewport) still shows the drawer without horizontal
     scroll. 400px ceiling so iPad (768px viewport) keeps the
     drawer at ~52% — still feels like an overlay rather than
     a takeover. 95vw in between scales smoothly with viewport,
     so on Daniel's ~580px device (mid-size tablet / large phone)
     the drawer fills ~400px / 69% of viewport, which matches
     the wave sketch he drew over the screenshot.

     Earlier attempts and why they failed:
     - 80vw → 614px on iPad, covered the whole page.
     - fixed 280px → too narrow, labels wrapped, drawer felt
       like an afterthought next to the standings table. */
  width: clamp(320px, 95vw, 400px);
  background-color: var(--gg-white);
  z-index: 400;
  overflow-y: auto;
  /* Daniel 2026-06-21 11:36: text in Tipparstatistik, Weekly
     Winners, Lag Stats tables was overflowing the drawer width
     and running off to the right. x-clip the drawer; per-table
     fixes (table-layout:fixed, width:100%, overflow-wrap) live in
     the section below. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.left-drawer {
  left: 0;
  transform: translateX(-100%);
}

.right-drawer,
.profile-drawer {
  right: 0;
  transform: translateX(150%);
}

.left-drawer.open {
  transform: translateX(0);
}

.right-drawer.open,
.profile-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--gg-green);
  color: var(--gg-white);
  padding: var(--gg-space-md);
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-base);
  font-weight: bold;
  min-height: 56px;
  box-sizing: border-box;
}

.drawer-close {
  background: none !important;
  border: none !important;
  color: var(--gg-white) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: var(--gg-space-md) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--gg-touch-min) !important;
  min-width: var(--gg-touch-min) !important;
  height: var(--gg-touch-min) !important;
  min-height: var(--gg-touch-min) !important;
}

.drawer-content {
  padding: var(--gg-space-sm);
  /* Daniel 2026-06-23 21:40: without overflow-x:hidden, child
     tables (PREDTB, WWTAB, etc.) that have `overflow-x:auto`
     (their own horizontal scrollbar) can paint content past
     the drawer's right edge on Safari. .right-drawer itself
     has overflow-x:hidden, but Safari renders the inner
     overflow:auto as a separate scroll context that the
     parent's clip doesn't always cover (notably on small
     viewports where the drawer hits the clamp(320px, 95vw,
     400px) floor). The fix is to also clip the inner
     container so nothing can paint past the drawer's
     right edge. `auto` (vs hidden) preserves any vertical
     scrollbar the drawer might need. */
  overflow-x: hidden;
}

.drawer-content table {
  width: 100%;
}

/* All menu tables in the drawer must be the same width.
   Without this, mobile.css line 248-256 gives table.MENUTB
   display:block + width:100% (via .drawer-content table above),
   but the inner td layout is left to table-layout:auto + the
   `white-space: nowrap` rule on table.MENUTB. That means cells
   grow to fit their longest unbreakable content — so a header
   like "Matchfunktioner" expands its cell to ~95% of the
   drawer, while a short header like "Meny" stays narrow.
   Result: a visibly inconsistent drawer where admin sections
   (long headers) look wider than regular sections (short
   headers). Daniel 2026-06-18: admin bredd ≠ vanlig meny bredd.
   table-layout:fixed + a single 100% column makes every
   cell the same width regardless of content, and word-wrap
   keeps text on one readable line. */
.drawer-content table.MENUTB {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
}
.drawer-content table.MENUTB > tbody > tr > td,
.drawer-content table.MENUTB > tr > td {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: table-cell;
}

/* Login panel in drawer.
   Daniel 2026-06-19 01:38: 'menyn ska inte vara bredare,
   innehållet skall passa menyn bättre.' Inputs and the
   submit button used to render at intrinsic size (size="8"
   on the input, no width on .submit) inside auto-sized
   LOGINTB cells, so on a 373px-wide drawer the inputs
   collapsed to ~80px with a lot of dead space to the right.
   Switch LOGINTB to table-layout:fixed with explicit
   column widths (label 38% / input 62%) so the inputs fill
   their cell, then stretch the submit button to 100% of
   the drawer so the primary action reads as a CTA rather
   than a small inline button. */
.drawer-content .LOGINTB {
  margin-bottom: var(--gg-space-md);
  width: 100% !important;
  display: block !important;
}
/* Stack the LOGINTB rows vertically in the drawer so each label
   sits above its input rather than beside it. The legacy markup
   uses <td colspan="2"> on submit/link rows and <td> on
   label/input rows, so a block-display row with full-width cells
   is the simplest way to get a single-column login form inside
   the drawer without touching loginpanel.php.

   All parts of the table — tbody, thead, tr, td — must be
   `display: block !important`. mobile.css:248 already sets
   `display: block` on table.LOGINTB, but the inner elements
   (tbody / thead / tr) keep their default `table-row-group` /
   `table-row` display values, which sizes them to the intrinsic
   width of their content rather than to the parent block-table.
   Without forcing every layer to block, the inputs collapse to
   ~80px and the width:100% on td has nothing to size against. */
.drawer-content .LOGINTB > thead,
.drawer-content .LOGINTB > tbody,
.drawer-content .LOGINTB > tr {
  display: block !important;
  width: 100% !important;
}
.drawer-content .LOGINTB > tbody > tr,
.drawer-content .LOGINTB > thead > tr {
  display: block !important;
  width: 100% !important;
  margin-bottom: var(--gg-space-sm);
}
.drawer-content .LOGINTB > tbody > tr > td,
.drawer-content .LOGINTB > thead > tr > td,
.drawer-content .LOGINTB > tr > td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: var(--gg-space-xs);
  box-sizing: border-box !important;
}
.drawer-content .LOGINTB input[type="text"],
.drawer-content .LOGINTB input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: var(--gg-font-size-base);
  padding: var(--gg-space-md) !important;
  min-height: var(--gg-touch-min);
}
.drawer-content .LOGINTB input.submit,
.drawer-content .LOGINTB input[type="submit"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: var(--gg-font-size-base);
  font-weight: 600;
  padding: var(--gg-space-md) !important;
  margin-top: var(--gg-space-sm);
}

/* Make every table inside the drawer use full-width block layout.
   mobile.css:248 sets `display: block` on each table, but the
   inner elements (thead / tbody / tr / td) keep their default
   `table-row-group` / `table-row` / `table-cell` display values,
   which makes each layer shrink to its intrinsic content width
   instead of stretching to fill the now-block table. We force every
   layer to block so a label/input cell stretches to the drawer
   width regardless of how many characters the value contains.
   Covers LOGINTB, MENUTB.utility, and the menu tables in one rule.

   IMPORTANT: only apply this to the login/menu tables. The PREDTB /
   STANDTB / SHOUT data tables in the right drawer must keep native
   table layout — forcing display:block on their td cells would
   stack result/procentage/points vertically instead of letting
   them sit as columns in one row. Daniel 2026-06-19 02:02: 'Varje
   rad i statistiken skall vara just en rad. Inte se ut sådär.'
   (PREDTB cells were stacking because this rule applied to them.) */
.drawer-content table.MENUTB thead,
.drawer-content table.MENUTB tbody,
.drawer-content table.MENUTB tr,
.drawer-content table.MENUTB thead > tr,
.drawer-content table.MENUTB tbody > tr,
.drawer-content table.LOGINTB thead,
.drawer-content table.LOGINTB tbody,
.drawer-content table.LOGINTB tr,
.drawer-content table.LOGINTB thead > tr,
.drawer-content table.LOGINTB tbody > tr {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.drawer-content table.MENUTB td,
.drawer-content table.MENUTB th,
.drawer-content table.LOGINTB td,
.drawer-content table.LOGINTB th {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Utility table data rows (game time value, next-match value,
   homepage link). The td.LOGINHD label row is already styled
   above; these are the value rows beneath each label and
   they need the same drawer-width stretching so the values
   don't render as a thin sliver on the left with empty
   whitespace on the right. */
.drawer-content table.MENUTB.utility td {
  padding: var(--gg-space-sm) var(--gg-space-md) !important;
  text-align: left;
  font-weight: 600;
  font-size: var(--gg-font-size-base);
}
.drawer-content table.MENUTB.utility td a {
  display: block;
  color: var(--gg-green);
  text-decoration: none;
  padding: var(--gg-space-xs) 0;
}

/* ============================================
   DRAWER MENU — section hierarchy
   ============================================
   Three visible flavours of header inside the drawer:
   (a) Top-level sections (Meny, Statistik, Mina tips, Konto,
       Fame & Shame, Support, Community, Mini-leagues).
       Green band, full width, full font, 44px touch-target.
   (b) Admin sub-sections (Matchfunktioner, Användarfunktioner,
       Ligafunktioner, Andra Funktioner).
       Subtle: same green family but slightly darker,
       left-indented, smaller font. Tells the eye they belong
       under "Admin Meny" without competing with top-level.
   (c) Utility rows in the top block (Grillegrilltid,
       Nästa match om, Hemsida) — not really sections, more
       like info widgets. Render as light gray label-and-value
       pairs instead of green section bars. Implemented via
       :first-of-type on the utility table; if that table is
       not the very first table in the drawer, the rule does
       not apply.
   Spacing: every menu table gets a bottom margin so consecutive
   sections are visibly separated. */

.drawer-content table.MENUTB {
  margin-bottom: var(--gg-space-md);
}
.drawer-content table.MENUTB:last-of-type {
  margin-bottom: 0;
}

/* (a) Default section header inside the drawer */
.drawer-content td.LOGINHD {
  min-height: 44px !important;
  padding: var(--gg-space-md) !important;
  box-sizing: border-box;
}
.drawer-content td.LOGINHD font.LOGINHD {
  font-size: var(--gg-font-size-sm) !important;
  letter-spacing: 0.02em;
}
.drawer-content td.LOGINHD a {
  color: inherit;
  text-decoration: none;
}

/* (b) Admin sub-section header.
   NOTE: avoid `padding: <v1> <v2> !important;` shorthand here.
   When padding is a two-value shorthand with !important and a
   later longhand override, Chromium marks the inner longhand
   values as invalid and drops the whole rule (verified 2026-06-19
   via document.styleSheets inspection). Use longhand directly. */
.drawer-content td.LOGINHD.subhead {
  background-color: var(--gg-green-dark) !important;
  border-left: 4px solid var(--gg-green-dark);
  text-align: left !important;
  min-height: 36px !important;
  padding-top: var(--gg-space-sm);
  padding-bottom: var(--gg-space-sm);
  padding-left: 20px !important;
  padding-right: var(--gg-space-md);
}
.drawer-content td.LOGINHD.subhead font.LOGINHD {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* (c) Top utility block — marked with `utility` class in menus.php.
   Grillegrilltid / Nästa match om / Hemsida become info rows
   instead of green section bars. (Previously tried
   :first-of-type selectors, but they were unreliable when the
   drawer also contained a `<script>` as first child. Explicit
   class is more robust.)
   Daniel 2026-07-12 01:55: style B — each info card has a 4px green
   left border and label+value stack tightly inside one box. The
   left border ties visually to the menu header above. The label
   is small uppercase muted gray; the value is bold black underneath.
   Box border-bottom separates cards so they read as discrete units. */
.drawer-content table.MENUTB.utility td.LOGINHD {
  background-color: var(--gg-white) !important;
  color: var(--gg-text-muted) !important;
  border-left: 4px solid var(--gg-green) !important;
  min-height: 24px !important;
  padding-top: 6px;
  padding-bottom: 2px;
  padding-left: 14px !important;
  padding-right: var(--gg-space-md);
}
.drawer-content table.MENUTB.utility td.LOGINHD font.LOGINHD {
  color: var(--gg-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.drawer-content table.MENUTB.utility td.TBLROW {
  background-color: var(--gg-white) !important;
  border-left: 4px solid var(--gg-green) !important;
  border-bottom: 1px solid var(--gg-border, #e5e7eb) !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: var(--gg-space-md) !important;
  text-align: left !important;
}
.drawer-content table.MENUTB.utility td.TBLROW font.TBLROW {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-text, #111827) !important;
  white-space: normal !important;
  line-height: 1.25;
}
.drawer-content table.MENUTB.utility td.TBLROW a {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-text, #111827) !important;
  text-decoration: none !important;
}
.drawer-content table.MENUTB.utility td.TBLROW a:link,
.drawer-content table.MENUTB.utility td.TBLROW a:visited {
  color: var(--gg-text, #111827) !important;
}
/* Drop the bottom border on the last card so it doesn't crash into
   the MENY section header below. */
.drawer-content table.MENUTB.utility tr:last-child td.TBLROW {
  border-bottom: none !important;
}

/* Menu in drawer */
.drawer-content #MENU {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-content #MENU li {
  border-bottom: 1px solid var(--gg-bg);
}

.drawer-content #MENU li a {
  display: block;
  padding: var(--gg-space-md);
  color: var(--gg-text);
  text-decoration: none;
  min-height: var(--gg-touch-min);
}

.drawer-content #MENU li a:hover {
  background-color: var(--gg-bg);
  color: var(--gg-green);
}

/* ============================================
   BOTTOM TAB BAR
   Fixed bottom navigation
   ============================================ */
.bottom-tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--gg-white);
  border-top: 2px solid var(--gg-green);
  z-index: 100;
  padding: 0;
  margin: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* Daniel 2026-08-01 00:24: 'Bottom menu skall inte flyta med
     när man skrollar. Vad hände? Vad är problemet?'

     iOS Safari has a known bug where position:fixed elements
     do NOT update their position when the visual viewport
     size changes (URL bar collapse/expand, virtual keyboard
     show/hide). The element stays at the bottom of the OLD
     viewport — i.e. visually floats mid-screen — until a
     re-render is forced.

     Daniel's iPhone has the URL bar at the bottom in compact
     pill form, so the URL bar expanding = viewport shrinks =
     bar gets stuck at the old bottom.

     Fix: promote the bar to its own compositing layer with
     transform: translateZ(0). iOS Safari then tracks the
     element's position correctly as the viewport resizes.

     -webkit-transform for older iOS, transform for everything
     else. Both are needed: iOS Safari 15- reads the prefixed
     property and ignores the unprefixed one. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* will-change hints the compositor to keep the element on
     its own layer permanently, so subsequent viewport
     changes also track. Without it the GPU layer can be
     collapsed back into the page layer on memory pressure. */
  will-change: transform;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gg-space-sm) var(--gg-space-xs);
  text-decoration: none;
  color: var(--gg-text-muted);
  min-height: var(--gg-touch-min);
  transition: color 0.2s ease;
}

.tab-item:active,
.tab-item.active {
  color: var(--gg-green);
  background-color: rgba(74, 122, 60, 0.10); /* green-15%, subtle */
}

/* Daniel 2026-07-15 13:06: 'Bottom menu, har börjat röra sig o
   lämnat botten när man skrollar.' The bottom-tab-bar has
   position:fixed and z-index:100; the slide-in drawers sit at
   z-index:400 and 300 (.drawer-overlay). In theory the overlay
   covers the bar while a drawer is open, but in practice on some
   devices (iOS Safari most often reports this) the bar can flash
   through mid-animation or end up positioned mid-screen because
   position:fixed in a body with overflow:hidden + an open
   transform-stacked drawer is fragile. Lock it down: while any
   drawer overlay is .open, hide the bar entirely so it cannot
   bleed into the viewport. The ~ selector matches because every
   .drawer-overlay in mainview-mobile.php appears before .bottom-
   tab-bar in the DOM. */
.drawer-overlay.open ~ .bottom-tab-bar {
  visibility: hidden;
  pointer-events: none;
  /* transform:translateY(100%) would slide it off-screen, but
     keeping position:fixed + visibility:hidden preserves the
     layout reflow if a drawer is rapidly toggled, so the bar
     doesn't snap visibly when re-shown. */
}
/* Persistent indicator strip at the top of the active tab.
   A 3px green bar above the icon + label clearly marks the
   current section without dominating the white tab-bar.
   Daniel 2026-06-20 02:11: 'Ingen aktiv-markering alls' —
   color-only was too subtle to register. Background tint +
   top-bar = unmistakable. */
.tab-item.active::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background-color: var(--gg-green);
  border-radius: 0 0 2px 2px;
}
.tab-item {
  position: relative;
}

.tab-icon {
  font-size: 20px;
  line-height: 1.2;
}

/* Custom icons keep the Match ball and Form chart on-brand green rather
   than relying on platform-dependent multicolor emoji rendering. */
.tab-icon-svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* Daniel 2026-07-15 21:29 (WhatsApp): replace the bar-chart
   emoji with the Grillegrill logo PNG for the Tabell tab (was
   "Led"). The actual logo lives at icons/tabell.png — 128×128
   source rendered from the official brand mark, scaled to the
   20×20px display footprint (8× oversampling for crisp
   anti-aliasing on @1x / @2x / @3x device pixel ratios).

   Daniel 21:39 (WhatsApp): 'Det du gjorde ser förfärligt ut.
   Logo o text ska vara på samma rad.' (My first attempt was a
   flat 'GG' badge I made up — Daniel sent the real glossy
   round logo and asked for a horizontal logo+label layout.)
   So this tab uses a separate modifier class
   .tab-item--inline to flip the default vertical stack into
   a horizontal row (logo left, label right), while the
   other three tabs keep their emoji-on-top layout.

   Daniel 21:48 (WhatsApp): 'Logo är rund o borde vara
   transparent utanför logo.' The source JPEG has near-black
   fill outside the sphere; I pre-baked a circular alpha mask
   (radius 64 minus 3px feather) so corners are transparent
   and the logo floats cleanly on the bottom-tab-bar's
   white background. CSS no longer adds border-radius (the
   PNG is already round). */
.tab-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* Daniel 21:39 ('Logo o text ska vara på samma rad'):
   Selector win note — the bare .tab-item--inline selector
   loses the cascade war to `body.MAIN a:has(> img),
   a:has(> img)` (specificity 0,2,1) plus
   `body.MAIN a` (specificity 0,1,2 + !important on
   min-width/width). Both rules force 44px×44px minimums
   that squeeze the tab below usable width and wrap the
   label under the logo. The selector below triples up the
   specificity to (0,3,2) so it wins against both, and
   uses !important as belt-and-braces. */
html body.MAIN .bottom-tab-bar .tab-item--inline {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  min-width: 70px !important;
  width: auto !important;
  padding: var(--gg-space-sm) var(--gg-space-xs) !important;
  min-height: var(--gg-touch-min) !important;
  box-sizing: border-box !important;
}

.tab-item--inline .tab-label {
  /* Drop the margin-top the vertical layout relied on —
     the gap on the parent .tab-item--inline now spaces the
     two elements. Keeping the same font-size as the other
     tabs keeps the visual rhythm consistent across the bar. */
  margin-top: 0;
}

.tab-label {
  font-family: var(--gg-font);
  font-size: 10px;
  margin-top: 2px;
}

/* ============================================
   DESKTOP-ONLY elements (hidden on mobile)
   ============================================ */
.desktop-only {
  display: none !important;
}

/* Add bottom padding to main content for tab bar
   Daniel 2026-07-22 13:00: also add padding-top for the fixed
   topbar (banner ~40px + chrome ~60px = ~100px on a 393px
   viewport; scales down on narrower viewports via the inner
   media queries below). Without this, content scrolls
   underneath the fixed topbar and the first ~100px of the
   page is invisible.

   Specificity note: common.css declares body.MAIN { padding:1 }
   which sets ALL paddings to 1px with specificity (0,1,1).
   A bare `body { padding-top: 100px }` (specificity 0,0,1)
   LOSES on the cascade. The selector `html body.MAIN` bumps
   specificity to (0,1,2), beating common.css. */
@media (max-width: 1023px) {
  html body.MAIN {
    padding-bottom: 60px;
  }

  .MAINTB {
    padding-bottom: 60px;
  }

  /* Padding-top for the fixed topbar — responsive to the
   * three rows inside .mobile-topbar: [Classic] link
   * (~44px: the 44px touch-target link, no own padding on
   * the container, transparent background) + banner
   * (viewport-width * 88/860, ~40px at 393px, ~33px at
   * 320px) + chrome bar (~60px). At 393px viewport that's
   * 44 + 40 + 60 = 144px total. At 320px viewport: 44 + 33
   * + 60 = 137px total.
   * Daniel 2026-07-22 14:29: the [Classic] container was
   * previously an opaque green strip with its own padding
   * (~52px). Per Daniel's 'Ta också tillbaka den gröna
   * bakgrunden hela vägen upp', the container is now
   * transparent and inherits the topbar's green background
   * — padding shrunk from 52 to 44 (link's own 44px
   * min-height + 0 container padding). */
  html body.MAIN {
    padding-top: 145px;
  }

  .MAINTB {
    padding-top: 145px;
  }
}

@media (max-width: 359px) {
  html body.MAIN {
    padding-top: 138px;
  }
  .MAINTB {
    padding-top: 138px;
  }
}

/* Padding-top for the fixed topbar at desktop viewports.
 * Daniel 2026-07-31 21:05 — reported by Daniel: the
 * Mästartipset search field (cmd=showtournamentwinnerpicks)
 * disappeared under the fixed topbar at viewports ≥1024px.
 *
 * Root cause: the existing @media (max-width: 1023px) rules
 * above set padding-top: 145px on body.MAIN and .MAINTB, but
 * those rules don't fire at ≥1024px. Before commit cfbbcf2
 * (Phase 1) the topbar was hidden at ≥1024px so no padding
 * was needed; after Phase 1 the topbar is visible everywhere
 * and the banner scales with viewport width (88/860 ≈ 10.23%
 * of vw), so padding-top must scale too.
 *
 * At 1024px: topbar ≈ 44 + 105 + 60 = 209px. Rule gives
 * 108 + 10.23*10.24 = 213px (4px slack).
 * At 1440px: topbar ≈ 44 + 147 + 60 = 251px. Rule gives
 * 108 + 10.23*14.40 = 255px (4px slack).
 * At 1920px: topbar ≈ 44 + 196 + 60 = 300px. Rule gives
 * 108 + 10.23*19.20 = 304px (4px slack).
 *
 * mainview-desktop.php (Classic) does NOT have body.MAIN's
 * mobile-topbar in its DOM, so the padding has no effect on
 * the Classic rendering.
 */
@media (min-width: 1024px) {
  html body.MAIN {
    padding-top: calc(108px + 10.23vw);
  }

  .MAINTB {
    padding-top: calc(108px + 10.23vw);
  }

  /* Same logic for the bottom: the bottom-tab-bar is now
   * visible at ≥1024px (Phase 1, commit cfbbcf2), so MAINTB's
   * last row needs 60px of breathing room above the fixed
   * tab bar — same as the existing ≤1023px rule. */
  html body.MAIN {
    padding-bottom: 60px;
  }

  .MAINTB {
    padding-bottom: 60px;
  }
}

/* Phase 4: Live Match View */
.live-match-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  /* 2026-06-21 F0.2: constrain view to viewport so children
     can never horizontally overflow and trigger a horizontal
     scroll on small phones. The previous design relied on the
     parent <td> to bound the card width; mobile-first layouts
     have no such constraint, so we add it here. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.live-match-card {
  background: #fff;
  border: 2px solid #339933;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  /* 2026-06-21 F0.2: ensure card + its 2px border + padding
     stay inside the parent flex column. The earlier "v"-only
     LIVE pill that Daniel flagged (#6) was content spilling
     out of this red border to the right of the viewport
     because the card had no max-width + no min-width: 0 on
     its flex children (a classic flex overflow pitfall). */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Daniel 2026-07-03 00:16: removed `overflow: hidden` here.
     The card was clipping the absolutely-positioned LIVE /
     NÄSTA badge that protrudes 10px above the card edge
     (`top: -10px`). The clipping made the top half of the
     red pill disappear, so "LIVE" was rendered as a flat
     bottom strip. Children are already self-constrained
     via the `min-width: 0` + `max-width: 100%` + child
     `overflow: hidden` rules below, so removing the card's
     own `overflow: hidden` lets the badge stick out cleanly
     without re-introducing the original flex-overflow
     issue. */
}

.live-match-card > * {
  min-width: 0;
  max-width: 100%;
}

.live-match-card .live-match-teams,
.live-match-card .live-match-time,
.live-match-card .pred-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-match-card.live {
  border-color: #cc0000;
  background: #fff5f5;
}

.live-match-card.empty {
  border-color: #ccc;
  background: #f5f5f5;
  text-align: center;
  padding: 16px;
}

.live-badge,
.next-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  background: #cc0000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

.next-badge {
  background: #339933;
}

.live-match-teams {
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
  color: #000;
}

/* Daniel 2026-07-19 20:06: country flags next to team names on
   the Match card. The .team-flag class is already styled under
   .mobile-live-crawler-team in this file; we mirror those
   dimensions here so the same flag rendering looks right inside
   the live-match-card too. The .live-match-teams div is plain
   inline content, so the img just sits next to the team name. */
.live-match-teams .team-flag,
.pred-grid-label .team-flag {
  width: 16px;
  height: 11px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 1px;
  margin: 0 4px;
}

.live-match-time {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.pred-status {
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.pred-status.predicted {
  background: #d4edda;
  color: #155724;
}

.pred-status.not-predicted {
  background: #f8d7da;
  color: #721c24;
}

/* Daniel 2026-07-03 20:40: locked prediction chip.
   Used when the deadline has passed or the match has started
   but the user had previously placed a tippet. Visually distinct
   from .predicted (green = editable) so the player can see at a
   glance that the tipp is no longer editable. */
.pred-status.locked {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #c4c8cb;
}

/* Daniel 2026-07-03 20:40: same locked semantic in the
   'Mina Tips' list below the live match card. Neutral grey
   with lock emoji, no edit link. */
.my-predictions-row.status-locked .my-predictions-status.status-locked {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #c4c8cb;
}

/* Daniel 2026-07-03 20:58: 'Målen måste visas separerat o
   under respektive lags namn.' The Mina Tips list and the
   live-match card now use a two-column grid: home team on the
   left with HS input directly underneath, away team on the
   right with AS input directly underneath. No more "–" in
   the middle, no more score on a separate meta row.

   Daniel 2026-07-03 20:58: 'trycka en knapp för alla tips
   som visas, o spara.' The entire Mina Tips section is
   wrapped in ONE form. The save button at the bottom of the
   section submits all editable rows in a single POST. No
   per-row save buttons. */
.my-predictions-row {
  display: block;
  padding: 10px 10px;
  border-bottom: 1px solid var(--gg-gray-100, #eee);
  border-radius: 8px;
  margin: 6px -4px;
  background: var(--gg-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.my-predictions-row.editable {
  background: rgba(74, 122, 60, 0.04);
  margin: 6px -4px;
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid rgba(74, 122, 60, 0.18);
  box-shadow: 0 1px 3px rgba(74, 122, 60, 0.08);
}

/* Meta strip — Daniel 2026-07-03 22:36:
   'expand these cards with the extra info. Make it nice obviously.'
   Shows the week chip (left) + status/countdown pill (right). */
.my-predictions-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.my-predictions-week-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gg-text-muted);
  background: var(--gg-gray-100, #f4f4f4);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--gg-font-mono, monospace);
  line-height: 1.4;
  white-space: nowrap;
}

.my-predictions-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--gg-font-mono, monospace);
  line-height: 1.3;
  white-space: nowrap;
}

.my-predictions-pill.status-finished {
  background: #d4edda;
  color: #155724;
}

.my-predictions-pill.status-locked {
  background: #e2e3e5;
  color: #383d41;
}

.my-predictions-pill.status-countdown {
  background: #cfe2ff;
  color: #084298;
}

.my-predictions-pill.status-closed {
  background: var(--gg-gray-100, #f4f4f4);
  color: var(--gg-text-muted);
}

/* Bonus-points chip in the footer — Daniel 2026-07-03 22:36.
   Distinct from the received-points pill (left = bonus, right = poäng). */
.my-predictions-bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff3cd;
  color: #856404;
  font-family: var(--gg-font-mono, monospace);
  line-height: 1.4;
  white-space: nowrap;
}

/* Received-points pill in the footer (finished rows). */
.my-predictions-points-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d1ecf1;
  color: #0c5460;
  font-family: var(--gg-font-mono, monospace);
  line-height: 1.4;
  white-space: nowrap;
}

/* User-prediction line on finished rows — Daniel 2026-07-03 22:34:
   'Having the actual reported result beside is nice.'
   Mirrors the desktop pattern where user prediction columns
   sit next to the actual-result column. On mobile the grid
   shows the actual result prominently; the user's tippet goes
   here as a small muted line so the comparison is visible. */
.my-predictions-user-pred {
  font-size: 11px;
  font-family: var(--gg-font-mono, monospace);
  color: var(--gg-text-muted);
  text-align: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gg-gray-100, #eee);
  line-height: 1.4;
}

.my-predictions-user-pred strong {
  color: var(--gg-text);
  font-weight: 700;
}

.my-predictions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.my-predictions-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.my-predictions-team {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--gg-text);
  line-height: 1.2;
}

.my-predictions-team.home {
  text-align: center;
}

.my-predictions-team.away {
  text-align: center;
}

.my-predictions-input {
  width: 64px;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  font-family: var(--gg-font-mono, monospace);
  border: 1.5px solid var(--gg-green);
  border-radius: 6px;
  background: var(--gg-white);
  color: var(--gg-text);
  -moz-appearance: textfield;
  padding: 0;
}

.my-predictions-input::-webkit-outer-spin-button,
.my-predictions-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.my-predictions-input:focus {
  outline: none;
  border-color: var(--gg-green-dark);
  box-shadow: 0 0 0 2px rgba(74, 122, 60, 0.2);
}

.my-predictions-score-readonly {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--gg-font-mono, monospace);
  color: var(--gg-text);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yellow user-tip highlight on finished rows — Daniel 2026-07-04 00:29:
   'Det gula ska vara spelarens tips, alltså det som är markerat i rött.'
   The prominent number in the read-only grid is the user's prediction
   (phs/pas), not the actual result. Yellow box matches the desktop
   convention of tinting the user's score column. Subtle so the
   green 'Slut X-Y' chip and blue '+N poäng' pill still read first. */
.my-predictions-score-readonly.tip-highlight {
  background: #fff3cd;
  color: #856404;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid #f0d97a;
}

.my-predictions-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: var(--gg-text-muted);
  font-family: var(--gg-font-mono, monospace);
}

.my-predictions-foot .my-predictions-status {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--gg-font-mono, monospace);
  font-size: 11px;
}

.my-predictions-foot .my-predictions-status.status-locked {
  background: #e2e3e5;
  color: #383d41;
}

.my-predictions-foot .my-predictions-status.status-finished {
  background: #d1ecf1;
  color: #0c5460;
}

.my-predictions-foot .my-predictions-status.status-closed {
  background: var(--gg-gray-100, #eee);
  color: var(--gg-text-muted);
}

/* Bulk save button — ONE button at the bottom of the entire
   Mina Tips section submits all editable rows in a single POST.
   Daniel 2026-07-03 20:58: 'trycka en knapp för alla tips
   som visas, o spara.' */
.my-predictions-save-all {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  padding: 12px 16px;
  background: var(--gg-green);
  color: var(--gg-white);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.my-predictions-save-all:hover,
.my-predictions-save-all:active {
  background: var(--gg-green-dark);
}

/* Live match card inline-edit (livematchview.php). Same
   two-column grid pattern as the Mina Tips list. */
.live-match-edit-form {
  display: block;
  margin-top: 8px;
  width: 100%;
}

.live-match-edit-grid {
  display: block;
}

.pred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  background: rgba(74, 122, 60, 0.06);
  padding: 10px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.pred-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pred-grid-label {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--gg-text);
  line-height: 1.2;
}

.pred-score-input {
  width: 60px;
  height: 38px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  font-family: var(--gg-font-mono, monospace);
  border: 1.5px solid var(--gg-green-dark);
  border-radius: 6px;
  background: var(--gg-white);
  color: var(--gg-text);
  -moz-appearance: textfield;
  padding: 0;
}

.pred-score-input::-webkit-outer-spin-button,
.pred-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pred-score-input:focus {
  outline: none;
  border-color: var(--gg-green-dark);
  box-shadow: 0 0 0 2px rgba(74, 122, 60, 0.25);
}

.pred-score-save-live {
  display: block;
  width: 100%;
  background: var(--gg-green-dark);
  color: var(--gg-white);
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.pred-score-save-live:hover,
.pred-score-save-live:active {
  background: var(--gg-text);
}

/* Phase 6: Admin mobile notice */
.admin-mobile-notice {
  display: none;
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-align: center;
}

.admin-mobile-notice a {
  color: #0056b3;
  font-weight: bold;
}


/* On mobile, reposition notice from hidden left column to visible center column */
@media (max-width: 1023px) {
  .admin-mobile-notice {
    display: block;
    position: absolute;
    top: 60px;
    left: 8px;
    right: 8px;
    z-index: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
}
/* ============================================
   PHASE 7: STRUCTURAL MOBILE FIT
   Captured 2026-06-15. Fixes the systemic overflow
   issues that blocked the user-flow work:
     - CENTERCOL tables (HELPTB, STANDTB) forced 760px
     - Välja-Liga card extended past 100vw
     - Bottom tab bar (was 6 tabs) overflowed on 393px
   ============================================ */

/* Tables inside CENTERCOL: fit-to-viewport, internal scroll
   for genuinely wide content. The 393px viewport no longer
   gets a clipped 760px STANDTB. */
.CENTERCOL table,
table.HELPTB,
table.STANDTB,
table.MAIN {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.CENTERCOL table th,
.CENTERCOL table td,
table.HELPTB th, table.HELPTB td,
table.STANDTB th, table.STANDTB td,
table.MAIN th, table.MAIN td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  padding: var(--gg-space-xs);
  vertical-align: top;
}

/* Inline-table-width styles (e.g. style="width:580;") can't
   beat max-width in the cascade, but let's be explicit. */
.CENTERCOL table[style*="width"] {
  max-width: 100% !important;
}

/* Välja-Liga card (ShowLids emits <table class="MAIN"> inside
   a <td colspan="3">). The ShowLids-generated tr doesn't carry
   a class, so we target it via .MAINTB tr without a row-* class. */
.MAINTB tr:not([class]) > td,
.MAINTB tr:not([class]) > td table,
.MAINTB tr.row-nextgame > td,
.MAINTB tr.row-nextgame > td table {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.MAINTB tr:not([class]) select,
.MAINTB tr.row-nextgame select {
  max-width: 100%;
  min-width: 0;
}

/* Bottom tab bar: 5 tabs now, all fit on 360px+ viewports.
   Flex-shrink-0 keeps each tab at its content width. */
.bottom-tab-bar {
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: auto;        /* horizontal scroll on iPhone SE 320px */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  scrollbar-width: none;   /* hide scrollbar on Firefox */
}

.bottom-tab-bar::-webkit-scrollbar {
  display: none;           /* hide scrollbar on WebKit */
}

.bottom-tab-bar .tab-item {
  flex: 0 0 auto;
  min-width: 0;
  padding: var(--gg-space-xs) var(--gg-space-sm);
}

/* ============================================
   PHASE 7: STANDINGS-SNAPSKOTT
   Mobile-template-only compact scoreboard for the
   home page. Mobile-first card layout, not a 435px
   table. Rendered above the legacy MAINTB.
   ============================================ */

.standings-snapshot {
  background: var(--gg-white);
  margin: var(--gg-space-md);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: var(--gg-font);
  color: var(--gg-text);
}

.standings-snapshot .snapshot-header {
  background: var(--gg-green);
  color: var(--gg-white);
  font-weight: bold;
  padding: var(--gg-space-sm) var(--gg-space-md);
  font-size: var(--gg-font-size-base);
  line-height: 1.4;
}

.standings-snapshot .snapshot-section,
.standings-snapshot .snapshot-me-section {
  padding: var(--gg-space-sm) 0;
}

.standings-snapshot .snapshot-section.top {
  border-bottom: 1px solid var(--gg-row-odd);
}

.standings-snapshot .snapshot-section.bottom {
  border-top: 1px solid var(--gg-row-odd);
}

.standings-snapshot .snapshot-me-section {
  background: rgba(51, 153, 51, 0.10);
  border-top: 2px solid var(--gg-green);
  border-bottom: 2px solid var(--gg-green);
}

.standings-snapshot .snapshot-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 var(--gg-space-md) var(--gg-space-xs);
}

.standings-snapshot .snapshot-row {
  display: flex;
  align-items: center;
  padding: var(--gg-space-sm) var(--gg-space-md);
  gap: var(--gg-space-sm);
  min-height: var(--gg-touch-min);
  border-bottom: 1px solid var(--gg-row-odd);
}

.standings-snapshot .snapshot-row:last-child {
  border-bottom: none;
}

.standings-snapshot .snapshot-row.me {
  background: rgba(51, 153, 51, 0.15);
  font-weight: bold;
}

/* 2026-06-21 F3.1: Topp 3 podium marking (decision A1).
   Subtle row-tint gradient fading to transparent toward the
   right + a 3px left border in the medal color. Gold/Silver/
   Bronze with intentionally low alpha so the "me" highlight
   still wins visually. Hover gets a slight lift so it doesn't
   feel flat. */
.standings-snapshot .snapshot-row.podium-1 {
  background: linear-gradient(90deg, rgba(244, 196, 48, 0.18) 0%, rgba(244, 196, 48, 0.04) 70%, transparent 100%);
  border-left: 3px solid #F4C430;
}
.standings-snapshot .snapshot-row.podium-2 {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.16) 0%, rgba(192, 192, 192, 0.04) 70%, transparent 100%);
  border-left: 3px solid #C0C0C0;
}
.standings-snapshot .snapshot-row.podium-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 70%, transparent 100%);
  border-left: 3px solid #CD7F32;
}
/* "me" still wins if user is on the podium */
.standings-snapshot .snapshot-row.podium-1.me {
  background: linear-gradient(90deg, rgba(51, 153, 51, 0.22) 0%, rgba(51, 153, 51, 0.08) 70%, transparent 100%),
              linear-gradient(90deg, rgba(244, 196, 48, 0.18) 0%, rgba(244, 196, 48, 0.04) 70%, transparent 100%);
}
/* Medal glyph inherits a subtle warm accent for #1 */
.standings-snapshot .snapshot-row.podium-1 .snapshot-pos {
  color: #A07810;
}
.standings-snapshot .snapshot-row.podium-2 .snapshot-pos {
  color: #707070;
}
.standings-snapshot .snapshot-row.podium-3 .snapshot-pos {
  color: #7C4D1C;
}

.standings-snapshot .snapshot-row .snapshot-pos {
  font-weight: bold;
  min-width: 40px;
  color: var(--gg-text-muted);
  font-variant-numeric: tabular-nums;
}

.standings-snapshot .snapshot-row.me .snapshot-pos {
  color: var(--gg-green-dark);
}

.standings-snapshot .snapshot-row .snapshot-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--gg-font-size-base);
}

/* Daniel 2026-07-16 00:35: usernames in the teaser must be
   clickable, jumping to cmd=userpreds like the canonical
   table does. Override the global mobile.css 'a' touch-target
   rule (44px min-height, 16px padding) so the inline anchor
   inside .snapshot-name doesn't bloat the row height — the
   row is already ~30px tall and adding 44px+padding would
   explode the snapshot. Match the parent text styling. */
.standings-snapshot .snapshot-row .snapshot-name-link {
  color: inherit !important;
  text-decoration: none !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  font-weight: inherit !important;
  border: 0 !important;
  background: transparent !important;
}
.standings-snapshot .snapshot-row .snapshot-name-link:hover,
.standings-snapshot .snapshot-row .snapshot-name-link:focus {
  text-decoration: underline !important;
  color: var(--gg-green-dark, #1a4d1a) !important;
}

.standings-snapshot .snapshot-row .snapshot-pts {
  font-weight: bold;
  color: var(--gg-green-dark);
  font-variant-numeric: tabular-nums;
}

.standings-snapshot .snapshot-section.bottom .snapshot-pts {
  color: var(--gg-red);
}

.standings-snapshot .snapshot-row .snapshot-delta {
  font-size: var(--gg-font-size-sm);
  margin-left: var(--gg-space-xs);
  font-variant-numeric: tabular-nums;
}

.standings-snapshot .snapshot-delta.up    { color: var(--gg-up); }
.standings-snapshot .snapshot-delta.down  { color: var(--gg-down); }
.standings-snapshot .snapshot-delta.same  { color: var(--gg-text-muted); }

.standings-snapshot .snapshot-cta {
  display: block;
  text-align: center;
  padding: var(--gg-space-md);
  background: var(--gg-row-odd);
  color: var(--gg-green-dark);
  text-decoration: none;
  font-weight: bold;
  font-size: var(--gg-font-size-base);
  min-height: var(--gg-touch-min);
  line-height: 1.4;
}

.standings-snapshot .snapshot-cta:active {
  background: var(--gg-row-even);
}

/* ============================================
   PHASE 7: MATCH-DETAIL POLISH (cmd=matchpreds)
   Lift distribution and shoutbox into a clearly
   mobile-readable stack. The 3 STANDTB tables
   fit-to-viewport via the .CENTERCOL table rules
   above. Distribution bars already exist as
   ShowTeamPercentages('RIGHT') image output; here
   we make sure the section is visible and labelled.
   ============================================ */

.match-detail-section {
  background: var(--gg-white);
  margin: var(--gg-space-md);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: var(--gg-space-md);
}

.match-detail-section h3 {
  font-size: var(--gg-font-size-lg);
  margin: 0 0 var(--gg-space-sm);
  color: var(--gg-green-dark);
}

.match-detail-section img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: var(--gg-space-xs) 0;
}

/* ============================================
   MINA TIPS — current + next week list
   Added 2026-06-20 per Daniel's request to make
   the Match tab a useful service surface, not
   just a single live/next card.
   ============================================ */

.mobile-match-login-cta {
  margin: var(--gg-space-md);
  padding: var(--gg-space-md);
  background: var(--gg-gray-50, #f7f7f7);
  border: 1px dashed var(--gg-green);
  border-radius: 8px;
  font-size: 13px;
  color: var(--gg-text);
  text-align: center;
}

.mobile-match-login-cta a {
  color: var(--gg-green);
  font-weight: 600;
  text-decoration: underline;
}

.my-predictions-section {
  margin: var(--gg-space-md);
  background: var(--gg-white);
  border-radius: 8px;
  padding: var(--gg-space-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.my-predictions-heading {
  margin: 0 0 var(--gg-space-md);
  font-size: var(--gg-font-size-lg, 16px);
  font-weight: 700;
  color: var(--gg-green-dark);
  letter-spacing: 0.02em;
}

.my-predictions-week + .my-predictions-week {
  margin-top: var(--gg-space-md);
}

.my-predictions-week-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--gg-space-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gg-gray-100, #eee);
}

.my-predictions-week-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gg-text);
}

.my-predictions-week-num {
  font-size: 11px;
  color: var(--gg-text-muted);
  font-family: var(--gg-font-mono, monospace);
}

.my-predictions-empty {
  font-size: 12px;
  color: var(--gg-text-muted);
  text-align: center;
  padding: var(--gg-space-md);
  font-style: italic;
}

.my-predictions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.my-predictions-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--gg-gray-100, #f0f0f0);
}

.my-predictions-row:last-child {
  border-bottom: none;
}

.my-predictions-teams {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-text);
}

.my-predictions-team.home {
  flex: 1;
  text-align: right;
}

.my-predictions-team.away {
  flex: 1;
  text-align: left;
}

.my-predictions-vs {
  font-size: 11px;
  color: var(--gg-text-muted);
  font-weight: 400;
}

.my-predictions-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  flex-wrap: wrap;
}

.my-predictions-time {
  color: var(--gg-text-muted);
}

.my-predictions-status {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--gg-font-mono, monospace);
}

.my-predictions-status.status-predicted {
  background: rgba(74, 122, 60, 0.15);
  color: var(--gg-green-dark);
}

.my-predictions-status.status-open {
  background: rgba(204, 0, 0, 0.12);
  color: #a00;
}

.my-predictions-status.status-closed {
  background: var(--gg-gray-100, #eee);
  color: var(--gg-text-muted);
}

.my-predictions-status.status-finished {
  background: var(--gg-gray-100, #eee);
  color: var(--gg-text);
}

.my-predictions-detail {
  margin-left: auto;
}

.my-predictions-tippa {
  color: var(--gg-green);
  font-weight: 600;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--gg-green);
  border-radius: 4px;
  font-size: 11px;
}

.my-predictions-tippa:hover,
.my-predictions-tippa:active {
  background: var(--gg-green);
  color: var(--gg-white);
}

/* Status row coloring — dim finished matches, highlight open ones */
.my-predictions-row.status-finished {
  opacity: 0.65;
}
.my-predictions-row.status-open {
  background: rgba(204, 0, 0, 0.04);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
}

/* Team inline rendering for the predictions list.
   Uses flag icon to the side of the name based on
   orientation (R = flag right, L = flag left). */
.my-predictions-team-name {
  font-weight: 600;
}

.my-predictions-team-flag {
  width: 16px;
  height: 11px;
  object-fit: cover;
  margin: 0 4px;
  vertical-align: middle;
  border-radius: 1px;
}

/* ============================================
   LIVE CRAWLER (next games)
   Daniel 2026-06-21 11:36 + 11:40 + 11:46:
   Replace the broken <marquee width='760'> with a
   responsive flex layout. Cards wrap to 1 column
   on narrow viewports, never overflow the viewport.
   ============================================ */
.mobile-live-crawler {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--gg-space-sm) var(--gg-space-md);
  background-color: var(--gg-white);
  border-bottom: 1px solid var(--gg-border);
}

.mobile-live-crawler-header {
  font-size: var(--gg-font-size-sm);
  font-weight: 600;
  color: var(--gg-text);
  margin-bottom: var(--gg-space-xs);
  text-transform: none;
}

.mobile-live-crawler-empty {
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text-muted);
  padding: var(--gg-space-sm) 0;
}

.mobile-live-crawler-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-xs);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mobile-live-crawler-card,
html body.MAIN a.mobile-live-crawler-card {
  flex: 1 1 calc(50% - var(--gg-space-xs)) !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--gg-space-xs) var(--gg-space-sm) !important;
  background-color: var(--gg-bg);
  border: 1px solid var(--gg-border);
  border-radius: 4px;
  text-decoration: none !important;
  color: var(--gg-text) !important;
  font-size: var(--gg-font-size-sm) !important;
  overflow: hidden;
  /* Three rows: date + home + away ≈ 64px. The card is a tap
     target — 64px satisfies the WCAG 2.1 AA 44x44 minimum.
     !important needed because of the global `html body.MAIN a {
     height: 44px !important }` rule that locks all anchors to 44px.
     Specificity (0,1,3) matches the global anchor rule so we win
     the !important tie via the property order (this rule loads
     after the anchor rule). */
  min-height: 64px !important;
  height: auto !important;
  width: auto !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.mobile-live-crawler-card:hover,
.mobile-live-crawler-card:active {
  background-color: var(--gg-bg-hover, #f0f0f0);
}

.mobile-live-crawler-date {
  font-size: 11px;
  color: var(--gg-text-muted);
  margin-bottom: 2px;
}

/* Stack the two teams vertically so each row gets the full
   card width — avoids truncation when one team name is long
   ('Saudiarabien' etc). */
.mobile-live-crawler-match {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.mobile-live-crawler-team {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--gg-font-size-sm);
  display: flex;
  align-items: center;
  min-height: 18px;
  line-height: 1.2;
  gap: 4px;
}

.mobile-live-crawler-team > .team-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.mobile-live-crawler-vs {
  flex: 0 0 auto;
  color: var(--gg-text-muted);
  font-size: 11px;
}

.mobile-live-crawler-team .team-flag {
  width: 14px;
  height: 10px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 1px;
  margin-left: 3px;
}

.mobile-live-crawler-team .team-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On very narrow viewports (<320px), stack to 1 column */
@media (max-width: 360px) {
  .mobile-live-crawler-card {
    flex: 1 1 100%;
  }
}

/* ============================================
   DRAWER CONTENT — inner tables must fit drawer width
   Daniel 2026-06-21 11:36
   ============================================ */
.drawer-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--gg-space-sm);
}

.drawer-content > table,
.drawer-content > div > table,
.right-drawer table.PREDTB,
.right-drawer table.WWTAB,
.right-drawer table.RIGHT {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Lag Stats (table.RIGHT) — Daniel 2026-07-14 00:55:
   The 4 columns (Lag, V, O, F) were sharing width equally at
   ~25% each. Daniel wants the three numeric columns (V, O, F)
   narrow and aligned to the right; the lag name column takes
   the remaining width. */
.right-drawer table.RIGHT tr td.TBLROW:nth-child(1) {
  /* Team name — flexible, takes remaining width */
  width: auto !important;
  text-align: left;
  padding-left: 8px;
}

.right-drawer table.RIGHT tr td.TBLROW:nth-child(n+2) {
  /* V / O / F — narrow numeric columns, aligned to the right */
  width: 36px !important;
  min-width: 36px;
  max-width: 36px;
  text-align: right !important;
  padding-right: 4px;
  padding-left: 0;
  /* Tighten the gray pill style around the number so it sits
   * close to the right edge of its narrow column. */
  background-clip: padding-box;
}

.drawer-content td,
.right-drawer td.TBLROW,
.right-drawer td.TBLHEAD {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* Stat-bar images (percentbar.gif) inside PREDTB rows: constrain
   so a wide image can't push past the drawer's right edge.
   Narrowly scoped with :not(.SHOUTROW) so shoutbox user-flag PNGs
   in MiniChat keep their 12px height from common.css (img.SHOUTROW)
   instead of being stretched to natural dimensions (flags/*.png
   are 70x46 native). Without the exclusion the right-drawer shoutbox
   had bloated flags too, but the new profile-drawer MiniChat (PR
   #100) put them front-and-center where the layout break is loud.
   Daniel 2026-07-08: 'Flags in minichat. Skall rymmas på en rad i
   höjd.' */
.drawer-content img:not(.SHOUTROW),
.right-drawer img:not(.SHOUTROW) {
  max-width: 100%;
  height: auto;
}

/* Tipparstatistik header — Daniel 2026-07-14 00:52: 3 rows in
   the title bar:
     row 1 = "Tipparstatistik"
     row 2 = "← förra   nästa →" (navigation)
     row 3 = "hometeam v awayteam" (matchup)
   JS already emits <br><br> between them (ShowPredictionStatsForNextMatch
   in statsfunctions.php). We just need the breaks to render and
   the nav row + matchup row to be visually distinct from the
   heading.

   The previous 'display: contents' rule was a single-line
   ellipsis workaround that flattened everything onto one row —
   now the opposite: we want the breaks to actually break. The
   .TBLHEAD div / #A_FIXT_TEXT rule below still handles the
   actual collapse case (A_FIXT_TEXT single-line), so we don't
   lose that fix. */
/* Tipparstatistik header — Daniel 2026-07-14 00:52 + 01:12 + 07-15 08:17:
   3 visible rows: title / navigation / matchup.
   07-15: Daniel wants the card ~60% as tall (it was eating too much
   vertical space on mobile) AND the matchup row ("Argentina v
   England") should dominate visually — bump from base 16px to 32px
   so it reads as the main thing in the card now that the surrounding
   breathing room is gone.

   Note on the !important flags below: the global mobile anchor rule
   (mobile.css:549 `body.MAIN a, a`) sets padding, min-height,
   font-size, etc. to !important for tap-target compliance. Without
   !important here, those values would force the Tipparstatistik
   header to look like a stack of buttons instead of compact text. */
table#STATSTAB td.TBLHEAD {
  text-align: center;
  line-height: 1.2 !important;
  padding: 4px 4px 6px !important;
}

table#STATSTAB td.TBLHEAD br {
  display: block !important;
  margin: 0;
  padding: 0;
  content: "";
}

/* The navigation row: ← förra | nästa → — Daniel 01:12: each link
   needs generous padding so it's an easy tap target.
   07-15: tightened padding/height so the card can hit its ~60%
   target height while still keeping the nav links tappable
   (min-height 26px is below the 36px iOS target but the surrounding
   line + padding keeps them comfortably tappable). */
table#STATSTAB td.TBLHEAD a.PRED:first-of-type,
table#STATSTAB td.TBLHEAD a.PRED:nth-of-type(2) {
  display: inline-block !important;
  padding: 2px 8px !important;
  margin: 0 1px;
  font-size: var(--gg-font-size-base) !important;
  color: #1a5d1a;
  text-decoration: none;
  font-weight: 700;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* Matchup row: "Argentina v England" — Daniel 07-15: "Dra upp storlek
   på matchup, dubbla fonten kanske." Bumped from var(--gg-font-size-base)
   (16px) so it becomes the visual anchor of the card now that the
   surrounding padding/line-height has been compressed. Tighter
   margin/padding so it sits close to the nav row above it.
   07-15 10:29 follow-up: "force size of teamNames to smaller so that
   for example 'Bosnien Hercegovina' doesn't create a second row."
   Dropped the cap from 28px → 22px and the floor from 22px → 18px
   so even the longest real-world matchup fits on one line at 393px
   viewport (~370px matchup column = 28 chars max at 22px bold).
   Still 1.375× the 16px base — visible jump, not the dramatic 1.75×
   we had before, but every matchup now stays on one row. */
table#STATSTAB td.TBLHEAD a.PRED:last-of-type {
  display: block !important;
  margin-top: 2px;
  padding: 2px 0 !important;
  font-size: clamp(18px, 6vw, 22px) !important;
  font-weight: 700;
  color: #000;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-drawer #A_FIXT_TEXT,
.right-drawer .TBLHEAD div {
  display: inline !important;
}

/* Klara spelare names list (prize.php) — flow inline, not as
   44px-wide touch targets. Each name is a text label inside a
   flow paragraph. */
.right-drawer .klara-list,
.right-drawer .klara-list a {
  display: inline !important;
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: var(--gg-font-size-sm) !important;
  line-height: 1.4 !important;
}

/* ============================================
   VÄLJA LIGA SELECT — width-constrained
   Daniel 2026-06-21 11:41
   ============================================ */
.MAINTB select#onsellid,
.MAINTB select[name="SELLID"],
.MAIN select#onsellid,
.MAIN select[name="SELLID"] {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Mobile-friendly select: larger tap target, system font */
  font-size: var(--gg-font-size-base);
  padding: var(--gg-space-sm);
  border-radius: 4px;
  border: 1px solid var(--gg-border);
  background-color: var(--gg-white);
}

/* ============================================
   .valjaliga — Välja Liga container
   Daniel 2026-06-21 11:41
   ============================================ */
.valjaliga {
  display: flex;
  align-items: center;
  gap: var(--gg-space-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--gg-space-sm) var(--gg-space-md);
  flex-wrap: wrap;
}

.valjaliga-label {
  font-size: var(--gg-font-size-sm);
  font-weight: 600;
  color: var(--gg-text);
  white-space: nowrap;
  flex: 0 0 auto;
}

.valjaliga select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: var(--gg-font-size-base);
  padding: var(--gg-space-sm);
  border-radius: 4px;
  border: 1px solid var(--gg-border);
  background-color: var(--gg-white);
  box-sizing: border-box;
}

/* On very narrow viewports, stack label above select */
@media (max-width: 480px) {
  .valjaliga {
    flex-direction: column;
    align-items: stretch;
  }
  .valjaliga-label {
    margin-bottom: var(--gg-space-xs);
  }
}

/* .MAINTB row-valjaliga — constrain to viewport */
.MAINTB tr.row-valjaliga {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.MAINTB tr.row-valjaliga > td {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding: var(--gg-space-sm);
  box-sizing: border-box;
  overflow-x: hidden;
}

.MAINTB tr.row-valjaliga .valjaliga {
  width: 100% !important;
  max-width: 100% !important;
}

.MAINTB tr.row-valjaliga .valjaliga select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* ============================================
   STANDTB COLLAPSE — Daniel 2026-06-21 11:45 + 12:32
   + Daniel 2026-06-22 19:34 card layout upgrade.
   Mobile default: collapsed → stacked cards, one user per card.
   Mobile-expanded: full table with all 14 columns.
   Desktop view never gets .mobile-collapsed (PHP gates this).
   ============================================ */

/* Mobile-collapsed: hide the always-hidden columns (msg, goals, diff).
   Change, won, drawn, lost, user-icon, boot-icon, position-icon are
   SHOWN in the card layout (just rearranged).
   Daniel 2026-07-22 16:58: 'MS ska se ut precis som resten o vara på
   samma rad som — Spelade V O F Mål MS.' So Diff stays in the
   subrow text chain (foldStats renders it as '· MS -112'), and
   the cell itself remains hidden behind display: none.
   Selector uses tbody.standtb-rows > tr > td[data-col=...] for higher
   specificity — the .MAINTB tr:not([class]) > td rule at line 2097
   also has !important and a wider scope, so we need to outrank it
   on the user-row cells. */
html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="msg"],
html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="goals"],
html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="diff"] {
  display: none !important;
}

/* Expand button styling removed 2026-06-28 17:03 — Daniel: the
   "Expandera (Visa alla kolumner)" button is gone from both desktop
   and mobile. Mobile-collapsed card layout stays (folded stats,
   tagUserRows) — users get a permanent collapsed view on mobile
   without any UI to toggle, matching the desktop's full-table look
   as much as a 393px viewport allows. */

/* Mobile is an explicit view choice: keep its collapsed standings-card
   presentation at every viewport width. The available width may grow, but
   the rows must not fall back to the legacy table-cell layout on desktop. */
@media all {
  /* ----------------------------------------------------------------
     MOBILE-EXPANDED: real table with all 14 columns visible.
     Same path as before — preserve current behavior.
     ---------------------------------------------------------------- */
  html body.MAIN table.STANDTB.mobile-expanded {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  html body.MAIN table.STANDTB.mobile-expanded > tbody {
    display: table-row-group !important;
  }

  html body.MAIN table.STANDTB.mobile-expanded tr {
    display: table-row !important;
  }

  html body.MAIN table.STANDTB.mobile-expanded td {
    display: table-cell !important;
  }

  /* ----------------------------------------------------------------
     MOBILE-COLLAPSED: stacked card layout. One user = one card.
     The .MAINTB td { display:block } global rule (mobile.css
     line 157) stacked every cell vertically under tables inside
     MAINTB. We override it here: the table itself becomes a flow
     container, direct-child trs become full-width blocks, and
     user rows in tbody.standtb-rows become CSS Grid cards.
     Card grid: 7 columns x 2 rows.
       Row 1: [pos][change][name (flex)][user-i][boot-i][pos-i][points]
       Row 2: [Spelade N][V N][O N][F N]              (stats inline)
     The previous "6 columns at 23px wide" truncation is gone.
     ---------------------------------------------------------------- */
  html body.MAIN table.STANDTB.mobile-collapsed {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.MAIN table.STANDTB.mobile-collapsed > tbody,
  html body.MAIN table.STANDTB.mobile-collapsed > thead {
    display: block !important;
    width: 100% !important;
  }

  /* The column-header row (a tr with data-col cells) is not useful
     in card mode — hide it. The user rows in tbody.standtb-rows
     also have data-col cells, but their pos cell uses class
     TBLROW/POS1..POS10TH (not TBLPOS), so we use td.TBLPOS as
     the discriminator. The header row's first cell has class
     TBLPOS. The league-title row has a colspan cell, which is
     handled by the full-width-block rule below. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td.TBLPOS) {
    display: none !important;
  }

  /* Direct-child trs: full-width blocks (collapse-toggle, bottom
     colspan row). The bottom row sits inside tbody, so we also
     target tbody.standtb-rows > tr:has(> td[colspan]). After PR #50
     removed colspan="1" from user cells, plain [colspan] reliably
     matches only the league-title and bottom colspan rows. */
  html body.MAIN table.STANDTB.mobile-collapsed > tr,
  html body.MAIN table.STANDTB.mobile-collapsed > tr > td,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td[colspan]),
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td[colspan]) > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 6px 8px !important;
  }

  /* Each user row in tbody becomes a card */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    display: grid !important;
    /* Daniel 2026-07-02 21:14: widened pos/change/points tracks
       and added nowrap on the cells below so a single-digit
       position like "#1" or "144p" cannot wrap onto multiple
       lines on narrow viewports (was 18-22 / 20-24 / 28-32 px,
       caused the position number to break per-character when
       name + 3 icons + points didn't leave room).
       Daniel 2026-07-22 16:09: 'Kan vi göra dessa kort lite
       mer yteffektiva? Varje spelares kort, dra ned lite på
       det vertikala spacet så fler positioner får plats
       samtidigt?' — compacted card: padding 10px→6px,
       row-gap 4px→2px. The single tallest row content is
       now the change pill (~22px) plus the stats line (~14px);
       with the row-gap collapse we reclaim ~10px per card. */
    grid-template-columns:
      minmax(24px, 30px)   /* 1: pos */
      minmax(28px, 34px)   /* 2: change (image + small text) */
      minmax(0, 1fr)       /* 3: name (flex, can shrink) */
      22px                 /* 4: user-icon (fixed) */
      22px                 /* 5: boot-icon (fixed) */
      22px                 /* 6: position-icon (fixed) */
      minmax(38px, 46px);  /* 7: points (3-digit + 'p') */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 3px;
    row-gap: 2px;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--gg-border-color, #e0e0e0);
    background: var(--gg-bg-card, #fff);
  }

  /* Daniel 2026-07-10 12:43: the mobile search filter (cmd=table
     "Sök tippare...") sets row.hidden=true on user rows whose name
     doesn't match the query. The grid display rule above won the
     cascade and the rows kept rendering. Force the [hidden]
     attribute to truly hide the card. Same pattern as PR #119's
     .msguser-pill[hidden] fix. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[hidden] {
    display: none !important;
  }

  /* Override the global .MAINTB td { display:block; width:100%;
     overflow-x:hidden } (mobile.css line 157) for user-row cells.
     Grid container blockifies child display, so display:block is
     fine; we just need to undo width:100% and overflow-x:hidden
     so cells fill their grid tracks and the name cell doesn't
     clip. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* User-row header cells (row 1) — grid placement + styling */
  /* Daniel 2026-07-02 21:14: 'white-space: nowrap' on pos/change/
     name/points so single digits like '#1' and 3-digit scores like
     '144p' don't break character-by-character when the name or
     icon columns eat horizontal space. The 'nowrap' HTML attribute
     on the pos td was being overridden by the inherited
     white-space:normal cascade, hence the per-cell CSS now. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="pos"] {
    grid-column: 1; grid-row: 1;
    text-align: center;
    font-weight: 700;
    font-size: var(--gg-font-size-md, 15px);
    padding: 0 2px !important;
    white-space: nowrap;
    overflow: visible;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="change"] {
    grid-column: 2; grid-row: 1;
    text-align: left;
    font-size: var(--gg-font-size-xs, 11px);
    color: var(--gg-text-muted, #666);
    padding: 0 2px !important;
    white-space: nowrap;
    overflow: visible;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="name"] {
    grid-column: 3; grid-row: 1;
    min-width: 0;
    text-align: left;
    /* Daniel 2026-07-22 16:09: 'lite mer yteffektiva'.
       Long usernames used to wrap to 2 lines (white-space:
       normal) and made each card ~22px taller than needed.
       Force one line + ellipsis so every card is the same
       height regardless of name length. The name column is
       a flex track (minmax(0, 1fr)) so it absorbs whatever
       width is left over after the fixed tracks. The
       `overflow: visible !important` rule 50 lines above
       (which applies to ALL row tds) would otherwise win
       — so we explicitly use !important here.
       Daniel 2026-07-22 16:23 (yellow highlights on
       '+12Benny Benskydd' and '+17uttern'): 'Vi behöver
       lite space innan username.' — the trend pill
       (+12 / -5 / +17) is glued to the name with only
       3px column-gap + 4px name-padding-left = 7px total.
       Bump name padding-left to 10px so the gap reads as
       deliberate spacing, not a typo. */
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px 0 12px !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"] {
    grid-row: 1;
    text-align: center;
    padding: 0 1px !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"] { grid-column: 4; }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"] { grid-column: 5; }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"] { grid-column: 6; }

  /* Daniel 2026-07-22 16:09: 'lite mer yteffektiva'.
     The icon cells (user-icon / boot-icon / position-icon)
     and the name link are forced to 44px tall because each
     is an <a> covered by the global `body.MAIN a` rule
     (mobile.css line 576) which sets
     `min-height: var(--gg-touch-min) !important` (44px on
     iOS) and `min-width: var(--gg-touch-min) !important`.
     That made every card row 44px tall even though the
     name is one line of 15px text and the icon <img> is
     only 12x18. Override for the in-card links: the WHOLE
     CARD is the touch target (the row itself is a
     tap-friendly block via the name link), so individual
     icon links don't need to be 44px themselves. Net
     effect: row 1 collapses to ~17px (one line of 15px
     text + padding). */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"] a,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"] a,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"] a,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="name"] a {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    /* Daniel 2026-07-22 16:09: 'lite mer yteffektiva'.
       The global `html body.MAIN a` rule (mobile.css ~620)
       sets `height: 44px !important` to keep every link a
       touch-friendly 44px square. That forced the in-card
       name link (and icon links) to be 44px tall, dragging
       the whole card to 75px. The whole ROW is already a
       touch-friendly target via the row-wide link + the
       row's own background/padding, so each inner link
       doesn't need its own 44px height. Reset to auto and
       let the in-card content size itself.
       Daniel 2026-07-22 16:09: PHP wraps the name in a
       <font> block like '\n              zanjaz          \n'.
       Without nowrap on the <a>, the inline-block expands
       vertically to accommodate the leading/trailing
       whitespace. Force nowrap on the <a> too. */
    height: auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"] a,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"] a,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"] a {
    width: 18px !important;
    height: 12px !important;
  }

  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="points"] {
    grid-column: 7; grid-row: 1;
    text-align: right;
    font-weight: 700;
    font-size: var(--gg-font-size-md, 15px);
    padding: 0 2px !important;
    color: var(--gg-points-color, #1a1a1a);
    white-space: nowrap;
    overflow: visible;
  }

  /* Stats row (row 2): P / W / D / L on a single full-width line.
     All four stat cells live in row 2 and we use a single
     ::before block to lay them out inline with a separator dot. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="played"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="won"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="drawn"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="lost"] {
    grid-row: 2;
    font-size: var(--gg-font-size-xs, 11px);
    color: var(--gg-text-muted, #555);
    padding: 0 !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="played"] {
    grid-column: 1 / -1;
    text-align: left;
  }
  /* Hide won/drawn/lost cells from layout in mobile-collapsed.
     Their content is folded into the played cell's ::before. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="won"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="drawn"],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="lost"] {
    display: none !important;
  }

  /* Stats labels + values inline in the played cell.
     We use a single ::before block on the played cell. PHP keeps
     the won/drawn/lost cells in the markup (for expanded view), but
     we hide them in collapsed mode and surface their values via JS
     in the played cell's text. JS at the bottom of this file.
     Daniel 2026-07-22 17:04: 'Värdet för MS är avskuret — se
     till det passar på en rad.' Changed from nowrap+ellipsis
     to normal+wrap: nowrap+ellipsis clipped 'MS -141' down
     to 'MS -1' on a 393px viewport because the full chain
     'Spelade 104 · V 20 · O 50 · F 34 · Mål 98-196 · MS -98
     · Poäng 301' is ~410px and the cell is ~358px. With the
     points tail removed (now redundant with the big number
     on row 1) the chain drops to ~360px — fits on one line
     for ~80% of rows. For the remaining rows (extreme
     Mål-100-254 cases) the chain wraps to a second line
     instead of getting clipped. Worst case: 2 lines × 13px
     text = 26px extra per card; that's a price we pay for
     not losing data. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="played"] {
    white-space: normal;
    overflow: visible;
  }

  /* Folded stats inline labels and separators */
  html body.MAIN table.STANDTB.mobile-collapsed .standtb-stat-label {
    color: var(--gg-text-faint, #888);
  }
  html body.MAIN table.STANDTB.mobile-collapsed .standtb-stat-sep {
    color: var(--gg-text-faint, #ccc);
    margin: 0 4px;
  }

  /* Leader highlighting on the card itself (top 3 positions).
     The leader class sits on the pos td; the whole card picks it up
     via :has(). Falls back gracefully if :has() unsupported. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank="1"] {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.14), transparent 60%), var(--gg-bg-card, #fff) !important;
    border-left: 3px solid #d4af37;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank="2"] {
    background: linear-gradient(to right, rgba(192, 192, 192, 0.18), transparent 60%), var(--gg-bg-card, #fff) !important;
    border-left: 3px solid #a8a8a8;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank="3"] {
    background: linear-gradient(to right, rgba(205, 127, 50, 0.14), transparent 60%), var(--gg-bg-card, #fff) !important;
    border-left: 3px solid #cd7f32;
  }

  /* Daniel 2026-07-22 19:34: prize-tier styling on the card itself
     (positions 4..3+smallPrizeCount and 3+small+N+1..3+small+N+back).
     Mirrors the rank-1/2/3 leader pattern: gradient bg + 3px left
     border on the tr, picked up via :has() so it survives the
     cell-transparent override below. The cell-level POS45 / POS610
     diagonal stripes (defined earlier in this file) are desktop-only
     styling — they get clobbered here, so we re-apply on the tr.
     Falls back to transparent cells if :has() unsupported. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td.POS45) {
    background: linear-gradient(to right, rgba(58, 154, 58, 0.10), transparent 60%), var(--gg-bg-card, #fff) !important;
    border-left: 3px solid #3a9a3a !important;
  }
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td.POS610) {
    background: linear-gradient(to right, rgba(91, 142, 212, 0.10), transparent 60%), var(--gg-bg-card, #fff) !important;
    border-left: 3px solid #5b8ed4 !important;
  }

  /* Force user-row cells to transparent in mobile-collapsed.
     The original POS1..POS6 cell-level bg colors (gold/silver/bronze
     for top 3, lime/blue/magenta for bottom 3) come from common.css
     and are designed for the table-row layout. In the card layout
     they make every cell loud, and a pre-existing PHP bug in
     ShowUserStandings (statsfunctions.php:1378-1398) causes the
     bottom-3 colors to win for ALL users when num_rows <= 3. The
     leader highlighting lives on the tr itself (gradient + left
     border via data-rank), so cell-level POS backgrounds are noise. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank] > td,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank] > td > font {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Daniel 2026-07-08 21:34 + 21:54 (image + 'Bakgrunden är inte
     blå'): BobbyPeru's points-cell on cmd=mypos shows white text
     on transparent background — invisible against the page white.

     Verified empirically on 2026-07-08 21:54 by injecting a
     <font class="POS5">PROBE</font> into a STANDTB row and reading
     computed style: color=rgb(255,255,255), bg=transparent.

     Root cause: common.css:330 declares
       font.POS5 { color:#FFFFFF; background-color:BLUE; }
     for the bottom-3 ranking styling. The rule above overrides the
     BLUE background to transparent for mobile-collapsed cards, but
     leaves the white color untouched. POS5 cell text = white on
     transparent = invisible. BobbyPeru gets POS5 when
       displaypos == num_rows-1
     (he is the second-to-last user returned by the query), which
     happens in production when exactly 102 users have
     position >= his own position.

     Fix: override color too. We don't restore the original BLUE
     because the card-layout design intentionally drops the loud
     cell-level highlight colors in favour of the tr-level gradient
     (data-rank). The text just needs to be readable, hence
     color:#000. POS4 (color:#000 in common.css) and POS6 (same) are
     unaffected by the override — this rule is idempotent for them
     and only normalizes POS5. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank] > td > font.POS5,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank] > td > font.POS4,
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr[data-rank] > td > font.POS6 {
    color: #000 !important;
  }

  /* Icons stay small inside cards */
  html body.MAIN table.STANDTB.mobile-collapsed img.TABICON {
    max-width: 18px;
    max-height: 18px;
    width: auto;
    height: auto;
  }

  /* Name link should not truncate, even on narrow viewports.
     The previous overflow:hidden/text-overflow:ellipsis was
     the cause of the "1-2 char names" complaint. */
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="name"] a {
    display: inline-block;
    max-width: 100%;
    /* Daniel 2026-07-22 16:09: 'lite mer yteffektiva'.
       The inner <a> used to allow overflow:visible +
       white-space:normal, which let long names wrap inside
       the now-overflow:hidden td and pushed the cell past
       its grid-row 1 allocation (44px instead of 17px).
       Force the same nowrap + ellipsis on the anchor so
       the wrapping stops at the name cell boundary, not
       inside it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================
   STANDTB SELF-POSITION — Daniel 2026-06-23 12:42 / 2026-07-02

   Desktop: the self-position STANDTB sits BELOW the main standings
   table (existing behavior — unchanged).

   Mobile: HIDDEN. mobile_standings.php's "MIN POSITION" snapshot
   already shows the logged-in user's row at the top of the page
   (compact, added 2026-06-15). The full STANDTB row was redundant:
   it duplicated MIN POSITION AND the user's row in the main
   STANDTB below (3 places where the user appeared on cmd=table
   before the fix). Hide it on mobile; let MIN POSITION be the
   canonical "var är jag?" entry point on phones.

   Wrapper class lives inside <td class="CENTERCOL">; flex column
   doesn't affect the td layout. Desktop media query is explicit so
   any future change to breakpoint is a single line.
   ============================================ */

/* Desktop default: wrapper is a plain block — visually a no-op. */
.standtb-wrapper { display: block; }

@media (max-width: 1023px) {
  .standtb-wrapper {
    display: flex;
    flex-direction: column;
  }
  /* Daniel 2026-07-02: hide on mobile — see section header.
     Specificity note: `table.STANDTB { display: block }` above
     (line ~292, specificity 0,1,1) overrides a plain
     .standtb-self-position (0,1,0). Use the type+STANDTB+class
     triple to strictly beat any table.STANDTB rule (specificity
     0,1,2) regardless of rule order in the file. */
  table.STANDTB.standtb-self-position { display: none; }
}

/* ============================================
   PRIZE PANEL + STATS INFO ROW — Daniel 2026-06-23 20:08 + 20:12

   Two right-drawer overflows:

   1. prize.php "Klara för Dellos Grillegrill Repstudio (NN)"
      panel: outer <table> had no width constraint and the inner
      list of <a>name</a>... was overflowing. The <font> title
      was also inline (word-wrap doesn't apply to inline).

   2. statsfunctions.php "[INFO] Den 3:e kolumnen är en demo av
      ett event..." row at the bottom of the Tipparstatistik
      table: same inline-<font> problem, with a 1400+ pixel
      line of unbroken text.

   Fix: target the gold <td> in the right drawer (prize) and
   any <font> inside any <td> in the right drawer (stats INFO
   row + similar). Promote <font> to display:block so word-wrap
   actually applies. Make inner 150px tables 100% with
   table-layout:fixed so the wrap point is exact.

   Selector is intentionally narrow to .right-drawer descendants
   so other tables in the app are not affected.
   ============================================ */

.right-drawer td[bgcolor="GOLD"] {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  /* Daniel 2026-07-14 00:52: the swisha info text ("Om du swishat...")
     must visually belong to the yellow area, not flow into the white
     names list below. Give the gold cell extra padding so it visibly
     wraps around title + info note. */
  padding: 10px 8px 12px !important;
}

.right-drawer td[bgcolor="GOLD"] > font {
  /* <font> is inline by default — word-wrap doesn't apply to
     inline elements. Promoting to block makes the title wrap
     against the gold td's width instead of running off the
     right edge. The inline <b> inside is unaffected. */
  display: block;
}

/* Daniel 2026-07-14 00:52: the prize.php title contains a broken
   </br> tag that the browser parses as text rather than a break.
   Force a real line break between the title and the (NN) count
   by injecting one after "Repstudio" via a pseudo-element on the
   surrounding <b>. Cleaner than touching prize.php. */
.right-drawer td[bgcolor="GOLD"] > font > b {
  /* Daniel 2026-07-15 11:23: 'snygga till rubriken. Den ser
     obalanserad ut.' The earlier `display: block + margin-bottom`
     forced '(56)' onto its own line, which made the title read
     as 'Klara för Dellos Grillegrill Repstudio' on row 1 and a
     lone '(56)' on row 2 — visually unbalanced. Now <b> stays
     inline so the whole 'Klara för Dellos Grillegrill Repstudio
     (56)' string wraps as one phrase. At 13px bold it fits on a
     single line in a ~340px-wide gold cell; for the longer
     'Dellos Grillegrill Repstudio' it wraps cleanly with '(56)'
     joining the last word on row 1 instead of being orphaned. */
  display: inline;
  color: #1a1a1a;
}

/* The swisha info note ("Om du swishat o inte finns med här...")
   follows the <b>title</b> as plain text inside the same <font>.
   Force it onto its own visual line under the title and give it
   a slightly smaller, italic, dark-grey style so it reads as a
   helper note rather than a primary label — but still firmly
   inside the gold area. */
.right-drawer td[bgcolor="GOLD"] > font > b + :not(b),
.right-drawer td[bgcolor="GOLD"] > font {
  color: #3a3a3a;
}

.right-drawer td[bgcolor="GOLD"] > font {
  /* The plain-text node after </b> is the swisha note. CSS can't
     target a bare text node directly, but the .info-note class
     is added via mobile.js for precise styling. Without the JS
     hook, the text still flows as a block inside the gold area
     thanks to display:block above. */
  line-height: 1.4;
}

.right-drawer td[bgcolor="GOLD"] > table {
  width: 100% !important;
  table-layout: fixed;
}

.right-drawer td[bgcolor="GOLD"] > table table {
  width: 100% !important;
  table-layout: fixed;
}

.right-drawer td[bgcolor="GOLD"] a,
.right-drawer td[bgcolor="GOLD"] font,
.right-drawer td[bgcolor="GOLD"] div {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Stats panel [INFO] row + any other inline <font> in the right
   drawer. Same root cause: <font> is inline, word-wrap is a
   no-op on inline elements. Promote to block so the text wraps
   against the parent td's width.

   Selector is `td > font` (direct child) NOT `td font` (any
   descendant) — the latter regresses the Klara player list,
   where every name is wrapped in `<a><font>name</font></a>,`
   and each empty `<font></font>` between commas would become
   a 0-height block element, forcing each name onto its own
   line. Direct-child only catches the title and the [INFO]
   row, both of which are <font> as the only child of their
   td. */
.right-drawer td > font {
  display: block;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
   BONUS GAMES — Mästartipset / Sverigetips / Guldskon
   Rendered as ONE consolidated card with a row per game
   (Daniel 2026-07-03 post-QA iteration). Three separate cards
   felt heavy; consolidated into a single bordered section so
   vertical space is reclaimed for higher-value content.

   Visual hierarchy:
     icon (32px, contain-fit) | title (small, top-left)
                               pick (big, green, centered horizontally)
                               deadline (tiny, below pick, only if editable)
                               select (compact, only if editable)

   Specificity note: the `.drawer-content td.TBLROW a { … }`
   rule above uses `!important` to keep generic drawer links
   compact. Our selectors scope under `.left-drawer` /
   `.bonus-card-group` / `.bonus-card-row` for predictable
   overrides — the bonus-game <img> and <select> live inside
   the row, not the generic drawer link space.
   ════════════════════════════════════════════════════════════ */

/* Consolidated card wrapping all bonus-game rows. */
.left-drawer td.TBLROW .bonus-card-group {
  background: #fff;
  border: 1px solid var(--gg-green-border, rgba(46,125,50,0.18));
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  margin: 4px 0 12px;
}

/* One row per bonus game. Subtle dividers between rows. */
.left-drawer td.TBLROW .bonus-card-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.left-drawer td.TBLROW .bonus-card-row:last-child {
  border-bottom: none;
}

/* Icon: small, contain-fit, never cropped. */
.left-drawer td.TBLROW .bonus-card-row__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46,125,50,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.left-drawer td.TBLROW .bonus-card-row__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: none;
  display: block;
}

/* Body: vertical stack. Title at top-left, pick dominates the center,
   deadline and select tucked at the bottom. */
.left-drawer td.TBLROW .bonus-card-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Title: tiny, uppercase, muted. Pinned to top-left of the body. */
.left-drawer td.TBLROW .bonus-card-row__title {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Pick: the visual focus. Big, bold, green, centered. */
.left-drawer td.TBLROW .bonus-card-row__pick {
  align-self: stretch;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--gg-green-dark, #1b5e20);
  line-height: 1.25;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty-pick marker: em-dash, muted. */
.left-drawer td.TBLROW .bonus-card-row__pick-empty {
  font-size: 16px;
  color: #bdbdbd;
  font-weight: 400;
}

/* Pick value (when the user has chosen something). Inherits the
   pick row's color/size — explicit rule here so the test selector
   matches and so a future override can target the value without
   affecting the dash. */
.left-drawer td.TBLROW .bonus-card-row__pick-value {
  /* no overrides — parent .bonus-card-row__pick drives typography */
  display: inline;
}

/* Deadline (only when editable). Tiny, orange, below the pick. */
.left-drawer td.TBLROW .bonus-card-row__deadline {
  font-size: 10px;
  color: #e65100;
  font-weight: 500;
  text-align: center;
  margin-top: 2px;
}

/* Edit select (only when editable). Compact, fills width. */
.left-drawer td.TBLROW .bonus-card-row__edit {
  margin-top: 4px;
}
.left-drawer td.TBLROW .bonus-card-row__edit select {
  width: 100%;
  max-width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1.5px solid rgba(46,125,50,0.35);
  background: #f1f8e9;
  color: #1a1a1a;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}
.left-drawer td.TBLROW .bonus-card-row__edit select:focus {
  outline: none;
  border-color: var(--gg-green-dark, #1b5e20);
  box-shadow: 0 0 0 2px rgba(46,125,50,0.2);
}

/* State: editable (deadline still open) */
.left-drawer td.TBLROW .bonus-card-row--editable {
  background: linear-gradient(to right, rgba(46,125,50,0.04) 0%, #fff 100%);
}

/* State: locked (deadline passed) — no deadline shown, only picks */
.left-drawer td.TBLROW .bonus-card-row--locked {
  background: #fafafa;
}

/* Modifier classes per game, available for future hooks. */
.left-drawer td.TBLROW .bonus-card-row--tournwinner {}
.left-drawer td.TBLROW .bonus-card-row--position {}
.left-drawer td.TBLROW .bonus-card-row--goldenboot {}

/* ════════════════════════════════════════════════════════════
   END BONUS GAMES
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   MENU PILL GRID — every link gets its own pill on mobile
   Section headers are small labels; links are wrap-flow pills.

   Daniel 2026-07-03 (post-QA): pills must be much smaller ("kanske
   1/4 stora"). Switched from full-width grid columns to auto-sized
   flex-wrap pills with a tight 26px min-height + pill shape
   (border-radius 999px). Visual footprint is ~1/4 of the previous
   square-tile layout. Touch-target falls to WCAG AA (24px) — still
   acceptable for compact link-pills, not for primary CTAs.

   Selector chain uses .left-drawer td.TBLROW a.menu-pill to win
   against the broader .drawer-content td.TBLROW a !important
   overrides higher in this file (same specificity ladder as before).
   ════════════════════════════════════════════════════════════ */

.left-drawer .menu-section {
  /* No extra styling needed — just a hook for specificity */
}

/* Daniel 2026-07-04 01:34: 'Ska vi testa att centrera pilla o menyn
   till vänster?' — left-align section headers and pill rows on
   mobile drawer for better balance + scannability. The HTML
   emits <td align="center"> for legacy reasons (desktop menu
   uses centered alignment historically); for the mobile drawer
   we explicitly override to start/left.

   Selector chain .left-drawer .menu-section > * is mobile-only —
   desktop uses .drawer-content / .menu-pill elsewhere, untouched.
   !important is intentional: the legacy align="center" attribute
   sets text-align: center with high specificity, and we want
   this left-align to win consistently. */
.left-drawer .menu-section > .LOGINHD,
.left-drawer .menu-section > .TBLROW {
  text-align: left !important;
}

/* Section header: compact, not a big pill */
.left-drawer .menu-section .LOGINHD {
  padding: 8px 12px 4px;
  background: transparent;
}
.left-drawer .menu-section .LOGINHD font.LOGINHD {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
}

/* The td containing the links: remove default table-cell padding */
.left-drawer .menu-section > .TBLROW {
  padding: 0 12px 8px;
}

/* Pill container: flex-wrap so each pill auto-sizes to its content
   and wraps to multiple rows when the drawer is narrow. This is
   the post-QA change: the old CSS used a 2-column grid with
   full-width tiles, which used too much vertical space. The new
   flex-wrap layout puts pills at ~1/4 of the previous footprint.
   Selector is left-drawer td.TBLROW to beat the generic overrides. */
.left-drawer td.TBLROW .menu-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
}

/* Individual pill — compact, auto-sized, fully rounded. Selector
   bumped to .left-drawer td.TBLROW a.menu-pill (specificity 0,3,2)
   to win against the generic drawer-link overrides higher in this
   file that use !important on display, padding, and min-height. */
.left-drawer td.TBLROW a.menu-pill {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4px 12px !important;
  min-height: 26px !important;
  background: var(--gg-green-bg, #e8f5e9);
  border-radius: 999px;
  border: 1px solid rgba(46,125,50,0.25);
  color: var(--gg-green-dark, #1b5e20);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.left-drawer td.TBLROW a.menu-pill:hover {
  background: var(--gg-green, #c8e6c9);
  border-color: var(--gg-green, #2e7d32);
  transform: none;
}

.left-drawer td.TBLROW a.menu-pill:active {
  background: var(--gg-green, #a5d6a7);
  transform: scale(0.97);
}

/* Disabled pill (not a member) */
.left-drawer td.TBLROW a.menu-pill--disabled {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #9e9e9e;
  cursor: default;
  font-style: italic;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   ADMIN MENU — admin section links use the same pill pattern as
   the regular drawer (Daniel 2026-07-03: "alla länkar i menyn
   även admin länkar ha pills"). The wrapper .admin-menu already
   exists; the inner td.TBLROW is wrapped in .menu-pill-grid via
   adminmenus.php / privmenus.php when the session is mobile.
   Selector uses `.admin-menu` so the scope stays clear.
   ════════════════════════════════════════════════════════════ */

.left-drawer .admin-menu,
.left-drawer .admin-menu td.TBLROW {
  /* Avoid stacking margins that would inflate admin sections. */
}

.admin-menu td.TBLROW .menu-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 8px;
}
.admin-menu td.TBLROW a.menu-pill {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4px 12px !important;
  min-height: 26px !important;
  background: #f3f4f6;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  color: #1f2937;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.admin-menu td.TBLROW a.menu-pill:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}
.admin-menu td.TBLROW a.menu-pill:active {
  background: #d1d5db;
  transform: scale(0.97);
}

/* Admin section header: subtler than LOGINHD - inherits. */

/* ============================================================
 * Mobile teamstats view — Daniel 2026-07-04
 *
 * Iteration 1 (02:40): filter pills, stats card, per-tournament,
 *   match list with color-coded W/D/L.
 * Iteration 2 (10:22): Daniel feedback loop:
 *   - Pills are buttons (no full-page reload)
 *   - W/D/L filter pills inside the stats card
 *   - Venue replaces the cryptic "hemma"/"borta" word
 *   - Motståndare section is <details> collapsed by default
 *   - Stats block is more compact (smaller font, lower pills)
 *
 * Scoped via .mobile-teamstats container so the legacy desktop
 * path (table.CENTER / .TBLROW) stays untouched.
 * ============================================================ */

.mobile-teamstats {
  margin: 12px 0;
  padding: 0 12px;
  font-family: var(--gg-font, system-ui, -apple-system, sans-serif);
}

.mobile-teamstats h2.teamstats-team {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0 12px;
  color: var(--gg-text, #111);
  line-height: 1.3;
}

/* --- Filter pills --- */
/* Motståndare is wrapped in <details> for native semantics + a11y.
 * Default is closed (Daniel 2026-07-04 10:22 — collapsed by
 * default so the page lands on stats immediately, not on a wall
 * of 27 opponent pills). The disclosure triangle is suppressed and
 * replaced with a custom chevron that rotates 90° when open.
 */
.teamstats-filter-details {
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}
.teamstats-filter-details[open] {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.teamstats-filter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;            /* hide native disclosure triangle */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
  user-select: none;
}
.teamstats-filter-summary::-webkit-details-marker {
  display: none;                /* Safari / Chrome */
}
.teamstats-filter-summary:focus-visible {
  outline: 2px solid var(--gg-green-dark, #1b5e20);
  outline-offset: -2px;
}
.teamstats-filter-summary-label {
  flex: 1;
}
.teamstats-filter-summary-count {
  font-size: 10px;
  background: #f3f4f6;
  color: #6b7280;
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.teamstats-filter-chevron {
  font-size: 16px;
  line-height: 1;
  color: #9ca3af;
  transition: transform 180ms ease;
  display: inline-block;
}
.teamstats-filter-details[open] .teamstats-filter-chevron {
  transform: rotate(90deg);
}
.teamstats-filter-wrap {
  padding: 0 12px 12px;
}
.teamstats-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 6px;
}
.teamstats-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Daniel 2026-07-04 10:22: 'gör pills effektivare med lika mycket
 * space ovan som under texten.' Padding is now symmetric (5px top
 * and bottom) and the line-height is tightened so the visual gap
 * above and below the text glyph is balanced regardless of font
 * baseline quirks.
 */
.teamstats-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 12px !important;
  margin: 0;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #1f2937;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;               /* tight so vertical padding governs height */
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  /* Nielsen: visible focus ring for keyboard nav */
  outline: none;
  /* cancel button default user-agent styling */
  -webkit-appearance: none;
  appearance: none;
}
.teamstats-pill:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}
.teamstats-pill:focus-visible {
  outline: 2px solid var(--gg-green-dark, #1b5e20);
  outline-offset: 2px;
}
.teamstats-pill--active {
  background: var(--gg-green-dark, #1b5e20) !important;
  border-color: var(--gg-green-dark, #1b5e20) !important;
  color: #fff !important;
  font-weight: 600;
}
.teamstats-pill--active:hover {
  background: #154a18 !important;
}
/* W/D/L filter pills inside the stats card (Bild 1).
 * The active state keeps the green dark theme but the W/D/L pill
 * has a faint tint of its outcome color so the connection to the
 * stat-block below is visually obvious — clicking "Vunna" turns
 * the V pill green AND filters the match list.
 */
.teamstats-pill--wd {
  background: #fff;
  border-color: #e5e7eb;
}
.teamstats-pill--wd-w.teamstats-pill--active {
  background: #16a34a !important;
  border-color: #16a34a !important;
}
.teamstats-pill--wd-d.teamstats-pill--active {
  background: #ca8a04 !important;
  border-color: #ca8a04 !important;
}
.teamstats-pill--wd-l.teamstats-pill--active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.teamstats-clear-filter {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  color: #b91c1c;
  text-decoration: underline;
  background: transparent;
  border: 1px solid #fee2e2;
  border-radius: 999px;
  cursor: pointer;
}
.teamstats-clear-filter:hover {
  background: #fef2f2;
}
.teamstats-clear-filter[hidden] {
  display: none;
}

/* --- Stats card --- */
.teamstats-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.teamstats-card-header {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.teamstats-card-header-aside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
/* W/D/L filter pills live inside the stats card (Bild 1).
 * Daniel 2026-07-04 10:22: 'De v/o/f ska ha filtreringsfunktion'.
 * The V/O/F stat blocks themselves are the pills — we add
 * .teamstats-stat--pill to a <button> rendering of the stat
 * block, and .teamstats-stat--pill-active when toggled.
 * The Matcher count and goal/point stats stay as plain divs
 * (info only) since there's no outcome/filter semantics.
 */
.teamstats-stat--pill {
  display: block;             /* override <button> inline default */
  width: 100%;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  /* Inherit .teamstats-stat visual styling; only add the
   * interactive bits here.
   */
  transition: transform 80ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.teamstats-stat--pill:hover {
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.teamstats-stat--pill:focus-visible {
  outline: 2px solid var(--gg-green-dark, #1b5e20);
  outline-offset: 2px;
  z-index: 1;
}
.teamstats-stat--pill:active {
  transform: scale(0.97);
}
/* Active state: invert the color treatment so it reads as
 * "this filter is on". A 2px ring around the block (using
 * the dark text color, not the light tint) reads cleanly
 * against the light tint backgrounds. The dark text color
 * for each outcome is reused — green-dark, yellow-dark,
 * red-dark — so the ring carries the outcome association.
 *
 * Note: `--pill-active` (0,0,1,0) is weaker than `--pill:hover`
 * (0,0,2,0). We use compound selector + class+tag to win
 * specificity for the active state even on hover.
 */
.teamstats-stat.teamstats-stat--pill-active {
  border-color: currentColor;
  box-shadow: 0 0 0 2px currentColor;
}
.teamstats-stat--pill-active.teamstats-stat--w { color: #14532d; }
.teamstats-stat--pill-active.teamstats-stat--d { color: #713f12; }
.teamstats-stat--pill-active.teamstats-stat--l { color: #7f1d1d; }

/* Daniel 2026-07-04 11:08: gender filter row (Herr / Dam / Alla)
 * lives inside the stats card, above the V/O/F stat grid. Uses
 * the same .teamstats-pill base style but with count + label
 * side-by-side so the user sees both at a glance.
 *
 * Active state: the active pill carries a neutral green-dark
 * theme (same as opponent pills) since gender is a meta-axis,
 * not an outcome axis. M/F labels stay readable.
 */
.teamstats-gender-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.teamstats-pill--gender {
  padding: 5px 10px !important;
  gap: 6px;
}
.teamstats-pill--gender .teamstats-pill-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
}
.teamstats-pill--gender .teamstats-pill-label {
  font-weight: 500;
}
.teamstats-pill--gender.teamstats-pill--active .teamstats-pill-count {
  background: rgba(255,255,255,0.25);
}
.teamstats-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
/* Daniel 2026-07-04 10:22: 'minska storleken pa fonten lite o
 * gor pills lagre vertikalt.' The stat block was 8px vertical
 * padding with an 18px value font — too tall. Now 5px vertical
 * padding with 15px value font + 9px label. Each block is ~40px
 * tall vs the prior ~52px, freeing space and making the stats
 * feel like a glanceable summary, not a wall.
 */
.teamstats-stat {
  text-align: center;
  padding: 5px 4px;
  background: #f9fafb;
  border-radius: 6px;
}
.teamstats-stat-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: #111;
  font-variant-numeric: tabular-nums;
}
.teamstats-stat-label {
  display: block;
  font-size: 9px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  line-height: 1.2;
}
/* Color-coded stat values for W/D/L and goal diff */
.teamstats-stat--w { background: #dcfce7; }
.teamstats-stat--w .teamstats-stat-value { color: #14532d; }
.teamstats-stat--d { background: #fef9c3; }
.teamstats-stat--d .teamstats-stat-value { color: #713f12; }
.teamstats-stat--l { background: #fee2e2; }
.teamstats-stat--l .teamstats-stat-value { color: #7f1d1d; }

/* --- Per-tournament list --- */
.teamstats-tournament-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.teamstats-tournament-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.teamstats-tournament-row:last-child {
  border-bottom: none;
}
.teamstats-tournament-year {
  font-weight: 600;
  color: #111;
}
.teamstats-tournament-stats {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.teamstats-tstat {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 2px;
}
.teamstats-tstat--w { background: #dcfce7; color: #14532d; }
.teamstats-tstat--d { background: #fef9c3; color: #713f12; }
.teamstats-tstat--l { background: #fee2e2; color: #7f1d1d; }

/* --- Match list --- */
.teamstats-matches {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.teamstats-matches-header {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  background: #f9fafb;
}
.teamstats-match-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.teamstats-match-row {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.teamstats-match-row:last-child {
  border-bottom: none;
}
.teamstats-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.teamstats-match-year {
  font-weight: 700;
  color: #6b7280;
}
/* Daniel 2026-07-04 10:22 Bild 2: replace the cryptic 'hemma'/
 * 'borta' word with the actual arena name (venue field), blank
 * when NULL. Venue text uses title-case so it reads naturally
 * even though the rest of the meta row is uppercase.
 */
.teamstats-match-venue {
  color: #4b5563;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.teamstats-match-body {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
/* Daniel 2026-07-04 10:22 Bild 2: H/B badge replaces the
 * ambiguous arrow (which Daniel questioned: 'vad indikerar de?').
 * H = hemma, B = borta, with title + aria-label so the meaning
 * is unambiguous. Color-tinted for visual scannability without
 * needing the tooltip.
 */
.teamstats-match-ha {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--gg-font, system-ui, -apple-system, sans-serif);
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 18px;
  text-align: center;
  letter-spacing: 0;
}
.teamstats-match-ha--home {
  color: #14532d;
  background: #dcfce7;
}
.teamstats-match-ha--away {
  color: #1e3a8a;
  background: #dbeafe;
}
.teamstats-match-opp {
  flex: 1;
  color: #111;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamstats-match-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.teamstats-score--w { color: #14532d; }
.teamstats-score--d { color: #713f12; }
.teamstats-score--l { color: #7f1d1d; }
.teamstats-score--pending { color: #9ca3af; }
/* Nielsen: outcome dot = redundant signal alongside color */
.teamstats-match-outcome {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.teamstats-outcome--w { background: #16a34a; }
.teamstats-outcome--d { background: #ca8a04; }
.teamstats-outcome--l { background: #dc2626; }
.teamstats-outcome--pending { background: #d1d5db; }

.teamstats-empty {
  padding: 16px 12px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}

/* Daniel 2026-07-04 10:22 iteration 3: H/B badge (was arrow + label)
 * — the arrow was cryptic ("vad indikerar de?"), the word was
 * cryptic ("hemma" for non-Swedish users), so we collapsed both
 * into a single-letter badge with clear color coding + title +
 * aria-label. */

/* ============================================
   USER PREDICTIONS VIEW (cmd=userpreds)
   Daniel 2026-07-05: legacy 11-column table
   collapsed to vertically-stacked mess on mobile.
   New layout: one card per match.
   ============================================ */

.mobile-userpreds {
  padding: var(--gg-space-md);
  max-width: 600px;
  margin: 0 auto;
}

.mobile-userpreds-header {
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  margin: 0 0 var(--gg-space-md);
  display: flex;
  align-items: baseline;
  gap: var(--gg-space-sm);
  flex-wrap: wrap;
}

/* --- Player trend graph (Daniel 2026-07-15 23:52) ---
   Inline SVG sparkline between the <h2> header and the
   week-filter pills. Renders position #1 at TOP and
   position #N at BOTTOM (Y inversion), matching the
   standings-table mental model. Line segments are
   coloured by direction: green when going UP (better
   position), red when going DOWN (worse position).
   Dots expose data-week / data-position so the JS chip
   handler can highlight the matching week. */
.mobile-userpreds-trend {
  margin: 0 0 var(--gg-space-md);
  padding: 10px 12px 6px;
  background: var(--gg-bg, #fafafa);
  border-radius: var(--gg-radius-sm, 4px);
  border: 1px solid var(--gg-bg-darker, #eee);
}
.mobile-userpreds-trend-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted, #666);
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mobile-userpreds-trend-svg {
  width: 100%;
  height: auto;
  display: block;
  /* Subtle bg-grid via gradient would be nice, but keep it
     minimal for now — Daniel will iterate. */
}

/* Daniel 2026-08-01 00:18: make the position label ('#61') on
   the trend graph more readable. Without this rule the SVG
   text is 13px black-on-grey with no background, so it
   competes with the green/red line passing behind it.

   paint-order: stroke → fill draws the stroke BEFORE the fill,
   so the 3px white stroke becomes a halo behind the text
   characters. Stroke is drawn centered, so 3px gives ~1.5px
   visible halo on each side — enough to lift the digits off
   the line without making the label look boxed. */
.mobile-userpreds-trend-svg .trend-active-label {
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* --- Week chip row (only rendered when 2+ weeks present) --- */
.mobile-userpreds-weeks {
  display: flex;
  gap: var(--gg-space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--gg-space-md);
  padding-bottom: var(--gg-space-sm);
  border-bottom: 1px solid var(--gg-bg);
}
.mobile-userpreds-week-chip {
  font-size: var(--gg-font-size-xs);
  font-weight: 600;
  color: var(--gg-text-muted);
  background: var(--gg-bg);
  border: 1px solid var(--gg-bg);
  border-radius: var(--gg-radius-pill, 999px);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--gg-font);
}
.mobile-userpreds-week-chip--active {
  color: var(--gg-white);
  background: var(--gg-green);
  border-color: var(--gg-green);
}

/* Daniel 2026-08-01 00:41: 'Kan vi visa topplacering o
   bottennotering för användaren genom att ge de omgångarna
   (omgångarnas pill) en smal ram? Grön för topp o röd för
   botten?'

   Single best and single worst across the rendered weeks. The
   default chip border is `1px solid var(--gg-bg)` so it blends
   into the background — invisible. These two rules override
   border-color (not border shorthand, to preserve the 1px
   width) so the chip gets a colored 1px ring without growing.

   Green matches --gg-green (same hue as the active chip and
   trend-line up-segment). Red matches the trend-line
   down-segment (#c62828) for cross-element consistency.

   The active state still wins because it sets background and
   color too, so a top-week that's currently filtered still
   reads as 'selected' rather than 'best'. */
.mobile-userpreds-week-chip--top {
  border-color: var(--gg-green);
}
.mobile-userpreds-week-chip--bottom {
  border-color: #c62828;
}

/* Daniel 2026-08-01 00:01: per-user lid-chip row that sits
   directly under the username heading. Daniel's tighten:
   "Gör pills med lids mycket mindre. Placera också ID mittmitt
   i pill." So:

   - padding 4px 10px → 2px 7px (cuts total height ~30%)
   - font-size 12px → 11px (just below --gg-font-size-xs)
   - flex with align-items: center so the year-number sits
     vertically centered even when the line-height leaves
     fractional baseline space
   - tabular-nums retained so 4-digit lids align across rows

   Tap target: min-height 22px is the smallest comfortable
   thumb target (Apple HIG floor 24px, but these are dense
   navigation aids, not primary CTAs). Daniel's call.

   Specificity note: the chip is an <a>, and the global
   'body.MAIN a, a' rule (0,0,1,2) sets font-size: var(--gg-font-size-base)
   and padding: var(--gg-space-lg) var(--gg-space-md). A bare
   class selector (0,0,1,0) loses on specificity. Adding
   'a.mobile-userpreds-lid-chip' raises us to 0,0,1,1 — still
   loses. So we prefix with nav.mobile-userpreds-lid-chips (now
   0,0,2,1) which beats the global rule.  */
nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip {
  font-size: 11px !important;
  font-weight: 600;
  color: var(--gg-text-muted);
  background: var(--gg-bg);
  border: 1px solid var(--gg-bg);
  border-radius: var(--gg-radius-pill, 999px);
  padding: 2px 7px !important;
  min-height: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--gg-font);
  text-decoration: none;
  /* tabular-nums so 4-digit lids ('2018', '2024') align with
     each other across the row even when the chip text varies. */
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box !important;
}
/* Daniel 2026-08-01 00:35: !important on the rule above wasn't
   enough. The catch-all rule at mobile.css:628
   'html body.MAIN a { height: 44px !important; }' has
   specificity (0,0,1,3) and !important, so it wins over
   'nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip'
   at (0,0,2,2). Even inline styles lose to !important rules.
   This selector bumps specificity to (0,0,3,3) so we beat
   the global touch-target rule while staying contextual. */
body.MAIN nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip {
  height: 22px !important;
  min-height: 22px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
}
nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip:link,
nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip:visited {
  color: var(--gg-text-muted);
}
nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip--active:link,
nav.mobile-userpreds-lid-chips a.mobile-userpreds-lid-chip--active:visited {
  color: var(--gg-white);
  background: var(--gg-green);
  border-color: var(--gg-green);
}
.mobile-userpreds-lid-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: var(--gg-space-xs) var(--gg-space-md) var(--gg-space-sm);
  border-bottom: 1px solid var(--gg-bg);
}

/* --- Card list --- */
.mobile-userpreds-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-md);
}

/* --- Match card --- */
.mobile-userpreds-card {
  background: var(--gg-white);
  border-radius: var(--gg-radius-md, 8px);
  border: 1px solid var(--gg-bg);
  border-left-width: 4px;
  padding: var(--gg-space-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-sm);
}
/* Outcome-driven border color */
.mobile-userpreds-card--win    { border-left-color: var(--gg-green); }
.mobile-userpreds-card--draw   { border-left-color: var(--gg-text-muted); }
.mobile-userpreds-card--miss   { border-left-color: #d33; }
.mobile-userpreds-card--pending { border-left-color: var(--gg-bg); }

/* --- Card header (date / time / week) --- */
.mobile-userpreds-card-header {
  display: flex;
  gap: var(--gg-space-sm);
  align-items: baseline;
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-weight: 600;
}
.mobile-userpreds-date {
  font-variant-numeric: tabular-nums;
}
.mobile-userpreds-time {
  font-variant-numeric: tabular-nums;
}
.mobile-userpreds-week {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gg-text-muted);
}

/* --- Teams + predicted score row --- */
.mobile-userpreds-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gg-space-sm);
  padding: var(--gg-space-xs) 0;
}
.mobile-userpreds-team {
  font-size: var(--gg-font-size-md);
  font-weight: 600;
  color: var(--gg-text);
  min-width: 0;  /* allow ellipsis */
}
.mobile-userpreds-team--home { text-align: right; }
.mobile-userpreds-team--away { text-align: left; }
.mobile-userpreds-score {
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  display: flex;
  gap: 4px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.mobile-userpreds-pred-sep {
  color: var(--gg-text-muted);
  font-weight: 400;
}
.mobile-userpreds-pred-empty {
  color: var(--gg-text-muted);
  font-weight: 400;
}

/* --- Result row (after the match is played) --- */
.mobile-userpreds-result-row {
  display: flex;
  gap: var(--gg-space-sm);
  align-items: center;
  font-size: var(--gg-font-size-sm);
  padding-top: var(--gg-space-xs);
  border-top: 1px dashed var(--gg-bg);
}
.mobile-userpreds-result-label {
  color: var(--gg-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--gg-font-size-xs);
}
.mobile-userpreds-result-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gg-text);
}
.mobile-userpreds-outcome-badge {
  margin-left: auto;
  font-size: var(--gg-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--gg-radius-pill, 999px);
  color: var(--gg-white);
}
.mobile-userpreds-outcome-badge.mobile-userpreds-card--win    { background: var(--gg-green); }
.mobile-userpreds-outcome-badge.mobile-userpreds-card--draw   { background: var(--gg-text-muted); }
.mobile-userpreds-outcome-badge.mobile-userpreds-card--miss   { background: #d33; }
.mobile-userpreds-result-pending {
  margin-left: auto;
  color: var(--gg-text-muted);
  font-style: italic;
  font-size: var(--gg-font-size-xs);
}

/* --- Footer (points + sum + monthly) --- */
.mobile-userpreds-footer {
  display: flex;
  gap: var(--gg-space-md);
  padding-top: var(--gg-space-xs);
  border-top: 1px solid var(--gg-bg);
  font-size: var(--gg-font-size-sm);
}
.mobile-userpreds-points,
.mobile-userpreds-sum,
.mobile-userpreds-month {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.mobile-userpreds-points-value {
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
}
.mobile-userpreds-points--win .mobile-userpreds-points-value { color: var(--gg-green); }
.mobile-userpreds-points--miss .mobile-userpreds-points-value { color: #d33; }
.mobile-userpreds-points--draw .mobile-userpreds-points-value,
.mobile-userpreds-points--pending .mobile-userpreds-points-value { color: var(--gg-text-muted); }
.mobile-userpreds-sum,
.mobile-userpreds-month {
  margin-left: auto;
}
.mobile-userpreds-sum:first-of-type,
.mobile-userpreds-month:first-of-type {
  margin-left: var(--gg-space-md);
}
.mobile-userpreds-points-label,
.mobile-userpreds-sum-label,
.mobile-userpreds-month-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.mobile-userpreds-sum-value,
.mobile-userpreds-month-value {
  font-weight: 700;
  color: var(--gg-text);
}

/* --- Empty state --- */
.mobile-userpreds-empty {
  text-align: center;
  padding: var(--gg-space-xl);
  color: var(--gg-text-muted);
  font-style: italic;
}

/* Daniel 2026-07-31 23:35: 'Deltog inte i [lid]' state. Reuses
   the populated-view wrapper so heading + spacing match, but
   flattens the body to a centered message + a flex-wrap pill row
   so the user can navigate to a lid where this player has
   predictions. Pills are <a> (not <button>) so the URL &lid=
   override works exactly like the leaderboard-link pattern. */
.mobile-userpreds-empty-state .mobile-userpreds-header {
  /* Tighter bottom margin than the populated view — no form graph
     below this header, so the message sits closer. */
  margin-bottom: var(--gg-space-sm);
}
.mobile-userpreds-empty-msg {
  text-align: center;
  padding: var(--gg-space-md) var(--gg-space-md) var(--gg-space-sm);
  color: var(--gg-text);
  font-size: var(--gg-font-size-base);
  margin: 0;
}
.mobile-userpreds-empty-msg-sub {
  color: var(--gg-text-muted);
  font-style: italic;
  padding-top: 0;
}

/* ====================================================================
   Mobile Outstanding Results (cmd=eor) — Daniel 2026-07-05 01:15
   ====================================================================
   Same match-card pattern as MobileUserPredictionsView() — one
   card per outstanding match, all inputs inside the card so
   the admin sees the date/teams/scores as one unit instead of
   a vertical stack of isolated cells. */

.mobile-eor {
  margin: var(--gg-space-md);
  max-width: 720px;
}

.mobile-eor-header {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  margin: var(--gg-space-md) 0 var(--gg-space-sm) 0;
  padding-bottom: var(--gg-space-xs);
  border-bottom: 2px solid var(--gg-green);
}

.mobile-eor-empty {
  text-align: center;
  padding: var(--gg-space-xl);
  color: var(--gg-text-muted);
  font-style: italic;
  background: var(--gg-bg);
  border-radius: var(--gg-radius-md);
  margin-top: var(--gg-space-md);
}

.mobile-eor-form {
  margin: 0;
  padding: 0;
}

.mobile-eor-list {
  list-style: none;
  padding: 0;
  margin: var(--gg-space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-md);
}

.mobile-eor-card {
  background: var(--gg-white);
  border: 1px solid var(--gg-bg);
  border-left: 4px solid var(--gg-green);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-md);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.mobile-eor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--gg-space-sm);
  padding-bottom: var(--gg-space-xs);
  border-bottom: 1px dashed var(--gg-bg);
}

.mobile-eor-date {
  font-size: var(--gg-font-size-sm);
  font-weight: 600;
  color: var(--gg-text);
}
.mobile-eor-time {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  margin-left: var(--gg-space-xs);
}
.mobile-eor-week {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-green);
  background: rgba(51,153,51,0.08);
  padding: 2px 8px;
  border-radius: var(--gg-radius-pill);
  margin-left: auto;
  font-weight: 600;
}

.mobile-eor-teams {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-space-xs);
  margin-bottom: var(--gg-space-sm);
}

.mobile-eor-team {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-md);
  font-weight: 700;
  color: var(--gg-text);
  text-align: center;
}
.mobile-eor-team--home { color: var(--gg-green); }
.mobile-eor-team--away { color: var(--gg-text); }
.mobile-eor-sep {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-style: italic;
}

.mobile-eor-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gg-space-sm);
  margin-top: var(--gg-space-sm);
  padding: var(--gg-space-sm);
  background: var(--gg-bg);
  border-radius: var(--gg-radius-sm, 4px);
}

.mobile-eor-input-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.mobile-eor-input-home-label,
.mobile-eor-input-away-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  text-align: center;
  /* Truncate to prevent layout overflow on long team names */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-eor-input {
  width: 100%;
  /* Mobile-friendly: at least 44px tap-target height */
  min-height: 44px;
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  text-align: center;
  padding: var(--gg-space-xs);
  border: 2px solid var(--gg-green);
  border-radius: var(--gg-radius-sm, 4px);
  background: var(--gg-white);
  color: var(--gg-text);
  font-family: var(--gg-font);
  /* Hide spinner controls — phone users tap digits, not arrows */
  -moz-appearance: textfield;
}
.mobile-eor-input::-webkit-outer-spin-button,
.mobile-eor-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mobile-eor-input:focus {
  outline: none;
  border-color: var(--gg-green);
  box-shadow: 0 0 0 3px rgba(51,153,51,0.2);
}
.mobile-eor-input--home { color: var(--gg-green); }
.mobile-eor-input--away { color: var(--gg-text); }

.mobile-eor-input-sep {
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text-muted);
  text-align: center;
  padding: 0 var(--gg-space-xs);
}

.mobile-eor-submit {
  width: 100%;
  margin-top: var(--gg-space-lg);
  padding: var(--gg-space-md);
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-md);
  font-weight: 700;
  color: var(--gg-white);
  background: var(--gg-green);
  border: none;
  border-radius: var(--gg-radius-md);
  cursor: pointer;
  /* Sticky submit so admin doesn't lose it on long lists */
  position: sticky;
  bottom: var(--gg-space-md);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.mobile-eor-submit:hover,
.mobile-eor-submit:focus {
  outline: none;
  background: #2a7a2a;
}
.mobile-eor-submit:disabled {
  background: var(--gg-text-muted);
  cursor: not-allowed;
}

/* ====================================================================
   Mobile Outstanding Results (cmd=eor) — Daniel 2026-07-05 01:15
   ====================================================================
   Same match-card pattern as MobileUserPredictionsView() — one
   card per outstanding match, all inputs inside the card so
   the admin sees the date/teams/scores as one unit instead of
   a vertical stack of isolated cells. */

.mobile-eor {
  margin: var(--gg-space-md);
  max-width: 720px;
}

.mobile-eor-header {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  margin: var(--gg-space-md) 0 var(--gg-space-sm) 0;
  padding-bottom: var(--gg-space-xs);
  border-bottom: 2px solid var(--gg-green);
}

.mobile-eor-empty {
  text-align: center;
  padding: var(--gg-space-xl);
  color: var(--gg-text-muted);
  font-style: italic;
  background: var(--gg-bg);
  border-radius: var(--gg-radius-md);
  margin-top: var(--gg-space-md);
}

.mobile-eor-form {
  margin: 0;
  padding: 0;
}

.mobile-eor-list {
  list-style: none;
  padding: 0;
  margin: var(--gg-space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-md);
}

.mobile-eor-card {
  background: var(--gg-white);
  border: 1px solid var(--gg-bg);
  border-left: 4px solid var(--gg-green);
  border-radius: var(--gg-radius-md);
  padding: var(--gg-space-md);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.mobile-eor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--gg-space-sm);
  padding-bottom: var(--gg-space-xs);
  border-bottom: 1px dashed var(--gg-bg);
}

.mobile-eor-date {
  font-size: var(--gg-font-size-sm);
  font-weight: 600;
  color: var(--gg-text);
}
.mobile-eor-time {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  margin-left: var(--gg-space-xs);
}
.mobile-eor-week {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-green);
  background: rgba(51,153,51,0.08);
  padding: 2px 8px;
  border-radius: var(--gg-radius-pill);
  margin-left: auto;
  font-weight: 600;
}

.mobile-eor-teams {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-space-xs);
  margin-bottom: var(--gg-space-sm);
}

.mobile-eor-team {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-md);
  font-weight: 700;
  color: var(--gg-text);
  text-align: center;
}
.mobile-eor-team--home { color: var(--gg-green); }
.mobile-eor-team--away { color: var(--gg-text); }
.mobile-eor-sep {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-style: italic;
}

.mobile-eor-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gg-space-sm);
  margin-top: var(--gg-space-sm);
  padding: var(--gg-space-sm);
  background: var(--gg-bg);
  border-radius: var(--gg-radius-sm, 4px);
}

.mobile-eor-input-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.mobile-eor-input-home-label,
.mobile-eor-input-away-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-eor-input {
  width: 100%;
  min-height: 44px;
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  text-align: center;
  padding: var(--gg-space-xs);
  border: 2px solid var(--gg-green);
  border-radius: var(--gg-radius-sm, 4px);
  background: var(--gg-white);
  color: var(--gg-text);
  font-family: var(--gg-font);
  -moz-appearance: textfield;
}
.mobile-eor-input::-webkit-outer-spin-button,
.mobile-eor-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mobile-eor-input:focus {
  outline: none;
  border-color: var(--gg-green);
  box-shadow: 0 0 0 3px rgba(51,153,51,0.2);
}
.mobile-eor-input--home { color: var(--gg-green); }
.mobile-eor-input--away { color: var(--gg-text); }

.mobile-eor-input-sep {
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text-muted);
  text-align: center;
  padding: 0 var(--gg-space-xs);
}

.mobile-eor-submit {
  width: 100%;
  margin-top: var(--gg-space-lg);
  padding: var(--gg-space-md);
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-md);
  font-weight: 700;
  color: var(--gg-white);
  background: var(--gg-green);
  border: none;
  border-radius: var(--gg-radius-md);
  cursor: pointer;
  position: sticky;
  bottom: var(--gg-space-md);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.mobile-eor-submit:hover,
.mobile-eor-submit:focus {
  outline: none;
  background: #2a7a2a;
}
.mobile-eor-submit:disabled {
  background: var(--gg-text-muted);
  cursor: not-allowed;
}

/* ============================================================
   MOBILE STATISTICS VIEWS — Daniel 2026-07-06 12:10
   ------------------------------------------------------------
   Mobile renderers for cmd=stats / cmd=marathonstats /
   cmd=marathontable. Replace the legacy <table class="CENTER">
   + TBLROW markup on phones (controller.php dispatches via
   _isMobileRequest()).

   Layout: a section header + Topp 50 / Visa alla filter pills,
   followed by rows (pos chip, name, played, points, avg).
   Same column legend pattern + podium tint as the snapshot
   widget so the user can move between Hem / Led / Statistik
   without re-learning the row language. CSS variable set is
   shared with the existing snapshot styles — palette, spacing
   scale, font sizes — for consistency.
   ============================================================ */

section.mobile-stats {
  margin: var(--gg-space-md);
  background: var(--gg-white);
  border-radius: var(--gg-radius-md, 6px);
  overflow: hidden;
}

.mobile-stats .stats-header {
  padding: var(--gg-space-md);
  background: var(--gg-green);
  color: var(--gg-white);
}

.mobile-stats .stats-title {
  font-size: var(--gg-font-size-base);
  font-weight: bold;
}

/* Topp 50 / Visa alla toggle — uses the same pill grammar
   as mobile_teamstats so the user-facing style matches across
   Statistik destinations. Anchor (not <button>) for SSR-only
   use — no JS, instant nav. */
.mobile-stats .stats-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-xs, 4px);
  padding: var(--gg-space-sm) var(--gg-space-md);
  background: rgba(51, 153, 51, 0.04);
  border-bottom: 1px solid var(--gg-row-odd);
}

.mobile-stats .stats-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--gg-green);
  background: var(--gg-white);
  color: var(--gg-green);
  font-size: var(--gg-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  min-height: 32px;
  line-height: 20px;
  transition: background-color 80ms ease, color 80ms ease;
}

.mobile-stats .stats-pill:hover,
.mobile-stats .stats-pill:focus {
  outline: none;
  background: rgba(51, 153, 51, 0.10);
}

.mobile-stats .stats-pill--active {
  background: var(--gg-green);
  color: var(--gg-white);
}

.mobile-stats .stats-pill--nav {
  font-weight: 500;
}

.mobile-stats .stats-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.mobile-stats .stats-pill--dots {
  border: none;
  background: transparent;
  color: var(--gg-text-muted);
  pointer-events: none;
}

/* Column legend (S / P / M) — only rendered in Topp 50 mode. */
.mobile-stats .stats-row.stats-row-legend {
  background: rgba(51, 153, 51, 0.08);
  color: var(--gg-text-muted);
  font-size: var(--gg-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gg-row-odd);
}

/* Each leaderboard row — mirrors snapshot-row grammar but adds
   the two extra columns (played + average). */
/* Daniel 2026-07-31 22:21: switched from flex → grid so the
   legend row's "S M P" headers land at the same x-position as
   the data row's played/avg/points values, regardless of name
   length. With flex + min-width:30px + gap, the numeric cells
   expanded (e.g. "1390p" → 44px) and shifted left whenever the
   player name was shorter than "Namn" (data rows moved ~19px
   left of the legend). Grid pins every column to the same width
   in every row of the leaderboard.

   Daniel 2026-07-31 23:19: tightened numeric column widths so
   longer usernames (10+ chars like 'Tarzansblus', 'Storkebaben')
   don't ellipsize on a 414px viewport. Measured values
   (cmd=marathonstats, mobile, real data):
     S (played) — max observed 679, future-proof to ~5 digits
                  → 30px right-aligned (was 40)
     P / M mid  — max ~36-40px even for bold "2.917"
                  → 40px (was 52, frees 12px)
     P / M wide — max ~44-46px for bold "2.917" or "1390p"
                  → 50px (was 65, frees 15px)
   Total numeric width drops 157 → 120px; the 1fr name column
   gains ~37px (116 → 153px) which fits ~12-13 chars before
   ellipsis kicks in, up from ~9-10 chars previously.

   Same template applies to both ranking orders because the
   widest cell in either ordering fits in 50px:
     ranking-avg    (cmd=stats, cmd=marathonstats) → S · P · M
                                                       M is bold,
                                                       col 5
     ranking-points (cmd=marathontable)           → S · M · P
                                                       P last, col 5
   Both orderings put their widest value in col 5, and 50px
   covers the worst-case bold "X.xxx" or "NNNNp". */
.mobile-stats .stats-row {
  display: grid;
  /* pos | name | played | mid (P or M) | wide (M or P) */
  grid-template-columns: 45px minmax(0, 1fr) 30px 40px 50px;
  align-items: center;
  column-gap: var(--gg-space-sm);
  padding: var(--gg-space-sm) var(--gg-space-md);
  min-height: var(--gg-touch-min);
  border-bottom: 1px solid var(--gg-row-odd);
  font-size: var(--gg-font-size-sm);
}

.mobile-stats .stats-row:last-child {
  border-bottom: none;
}

/* Widths come from the grid-template-columns on .stats-row;
   per-cell min-width is no longer needed (and would re-introduce
   the alignment drift the grid is meant to prevent). */
.mobile-stats .stats-row .stats-pos {
  font-weight: bold;
  color: var(--gg-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Grid's default min-width:auto would prevent the name column
   from shrinking below content width, breaking text-overflow:
   ellipsis on long usernames. Explicit min-width:0 keeps the
   truncate working inside the minmax(0, 1fr) track. */
.mobile-stats .stats-row .stats-name {
  min-width: 0; /* allow ellipsis inside the 1fr track */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Daniel 2026-07-31 22:38: .stats-name is also the <a> that
   links to cmd=userpreds&user=<uid> (desktop ShowMarathonStandingsTable
   wraps the username the same way). Drop the browser-default
   blue + underline so the link looks like plain text but still
   tap-targetable. :link / :visited both reset so visited users
   don't flip to purple. :active gives a brief green tint on
   touch so the tap registers — no persistent decoration, since
   the surrounding row already has the me-row / podium treatments. */
.mobile-stats .stats-row a.stats-name:link,
.mobile-stats .stats-row a.stats-name:visited {
  color: inherit;
  text-decoration: none;
}
.mobile-stats .stats-row a.stats-name:active {
  color: var(--gg-green-dark, #1f5e1f);
}

.mobile-stats .stats-row .stats-played,
.mobile-stats .stats-row .stats-pts,
.mobile-stats .stats-row .stats-avg {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mobile-stats .stats-row .stats-played { color: var(--gg-text-muted); }
.mobile-stats .stats-row .stats-pts    { color: var(--gg-text-muted); }
.mobile-stats .stats-row .stats-avg    { color: var(--gg-text-muted); }

/* Daniel 2026-07-06 12:48: visual hierarchy matches the
   ranking metric. Column order is S · M · P. The bold
   weight shifts depending on which column drove the rank:
   ranking-avg   (cmd=stats, cmd=marathonstats) → avg is bold
   ranking-points(cmd=marathontable)           → points is bold
   The non-ranking cumulative number (points in stats, avg in
   marathontable) stays muted so the user's eye lands on the
   column that actually ordered the list. */
.mobile-stats .stats-row.ranking-avg    .stats-avg    { font-weight: 600; color: var(--gg-text); }
.mobile-stats .stats-row.ranking-points .stats-pts    { font-weight: 600; color: var(--gg-text); }
/* "me" rows inherit the bold weight via font-weight: bold on
   stats-row.stats-row-me below — no extra rule needed. */

/* "me" highlight — slightly stronger than snapshot-row.me
   because the user is more actively looking for their own
   row in a long list. */
.mobile-stats .stats-row.stats-row-me {
  background: rgba(51, 153, 51, 0.15);
  font-weight: bold;
}
.mobile-stats .stats-row.stats-row-me .stats-name {
  color: var(--gg-green-dark, #1f5e1f);
}

/* Podium gradients — same gold/silver/bronze palette as
   snapshot-row. */
.mobile-stats .stats-row.podium.podium-1 {
  background: linear-gradient(90deg, rgba(244, 196, 48, 0.18) 0%, rgba(244, 196, 48, 0.04) 70%, transparent 100%);
  border-left: 3px solid #F4C430;
}
.mobile-stats .stats-row.podium.podium-2 {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.16) 0%, rgba(192, 192, 192, 0.04) 70%, transparent 100%);
  border-left: 3px solid #C0C0;
}
.mobile-stats .stats-row.podium.podium-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 70%, transparent 100%);
  border-left: 3px solid #CD7F32;
}
.mobile-stats .stats-row.podium.podium-1 .stats-pos { color: #A07810; }
.mobile-stats .stats-row.podium.podium-2 .stats-pos { color: #707070; }
.mobile-stats .stats-row.podium.podium-3 .stats-pos { color: #7C4D1C; }

/* "Min position" footer — appears below the top-cap list
   when the user is logged in but ranked outside the cap. */
.mobile-stats .stats-me-section {
  border-top: 2px solid var(--gg-green);
  background: rgba(51, 153, 51, 0.05);
}

.mobile-stats .stats-me-label {
  font-size: var(--gg-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gg-green-dark, #1f5e1f);
  padding: 4px var(--gg-space-md);
}

/* Empty state */
.mobile-stats .stats-empty {
  padding: var(--gg-space-lg, 16px);
  text-align: center;
  color: var(--gg-text-muted);
  font-size: var(--gg-font-size-sm);
}

/* Pagination row (marathontable when cap=all) — sits in its
   own block below the rows. Daniel 2026-07-13 02:18: paginator
   pills previously reused the green filter-pill look, which
   made the Topp 50 / Visa alla row indistinguishable from
   the prev / next / numbered page controls. Now the
   paginator block has its own label ("Sida X av Y") and the
   pills inside it are neutral so users can't confuse the two
   controls. */
.mobile-stats nav.stats-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-space-xs, 4px);
  padding: var(--gg-space-md);
  background: transparent;
  border-top: 1px solid var(--gg-row-odd);
}
.mobile-stats nav.stats-pagination .stats-pagination-label {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.mobile-stats nav.stats-pagination .stats-pagination-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gg-space-xs, 4px);
}
.mobile-stats nav.stats-pagination .stats-pagination-pills .stats-pill {
  /* Neutral, not green — the green pills above are the
     Topp 50 / Visa alla filter row. Paginator pills must
     never look like a third filter control. */
  border-color: var(--gg-row-odd);
  color: var(--gg-text);
  background: var(--gg-white);
}
.mobile-stats nav.stats-pagination .stats-pagination-pills .stats-pill:hover,
.mobile-stats nav.stats-pagination .stats-pagination-pills .stats-pill:focus {
  background: rgba(0, 0, 0, 0.04);
}
.mobile-stats nav.stats-pagination .stats-pagination-pills .stats-pill--active {
  /* Daniel 2026-07-13 12:46: previously this used
     background: var(--gg-text) (black) which is too harsh on
     mobile — the page number text (white on black) was hard
     to read at a glance, and the solid-black pill stood out
     in the wrong way (felt like a disabled state, not a
     selected state).

     Switched to white background + brand-green border + bold
     text: the pill is clearly "you are here" without being a
     heavy black block. Stays consistent with the brand green
     used elsewhere but visually distinct from the green
     filter pills above (which use a solid green fill).

     The 1px border (matching the inactive pill width) avoids
     a layout shift between active and inactive — the
     background color + border color change is enough visual
     weight without changing pill width. */
  background: var(--gg-white);
  color: var(--gg-text);
  border-color: var(--gg-green);
  font-weight: 700;
}

/* Search bar — Daniel 2026-07-13 02:43 / 03:15.
   Inline layout: the result list is part of the normal flow
   below the search input, NOT a floating dropdown. This was
   a deliberate change after the previous iteration's
   absolutely-positioned dropdown had issues on some mobile
   browsers (z-index conflicts, overflow clipping). Inline
   results can never overlap rows or be hidden by ancestors. */
.mobile-stats .stats-search {
  padding: var(--gg-space-md);
  background: rgba(51, 153, 51, 0.04);
  border-top: 1px solid var(--gg-row-odd);
  border-bottom: 1px solid var(--gg-row-odd);
}
.mobile-stats .stats-search-bar {
  display: flex;
  align-items: center;
  gap: var(--gg-space-sm);
  background: var(--gg-white);
  border: 1px solid var(--gg-row-odd);
  border-radius: 12px;
  padding: 0 var(--gg-space-sm);
  min-height: 44px;
}
.mobile-stats .stats-search-icon {
  font-size: 16px;
  color: var(--gg-text-muted);
  flex-shrink: 0;
}
.mobile-stats .stats-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--gg-font-size-md, 16px);
  font-family: inherit;
  color: var(--gg-text);
  min-width: 0;
  padding: 10px 0;
}
.mobile-stats .stats-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.mobile-stats .stats-search-clear {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--gg-text-muted);
  padding: 4px 8px;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
}
.mobile-stats .stats-search-clear:hover,
.mobile-stats .stats-search-clear:focus {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}
.mobile-stats .stats-search-results {
  /* Hidden when no hits yet — empty <div> takes no space. */
  margin-top: var(--gg-space-sm);
}
.mobile-stats .stats-search-results[data-active="1"] {
  background: var(--gg-white);
  border: 1px solid var(--gg-row-odd);
  border-radius: 12px;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.mobile-stats .stats-search-meta {
  padding: 8px 12px;
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
  border-bottom: 1px solid var(--gg-row-odd);
  background: rgba(51, 153, 51, 0.04);
  font-weight: 600;
}
.mobile-stats .stats-search-empty {
  padding: 12px;
  font-size: var(--gg-font-size-sm);
  color: var(--gg-text-muted);
  text-align: center;
}
.mobile-stats .stats-search-hit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "pos name page"
    "pos stats page";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gg-row-odd);
  text-decoration: none;
  color: var(--gg-text);
  min-height: var(--gg-touch-min, 44px);
}
.mobile-stats .stats-search-hit:last-child {
  border-bottom: none;
}
.mobile-stats .stats-search-hit:hover,
.mobile-stats .stats-search-hit:focus {
  background: rgba(51, 153, 51, 0.06);
  outline: none;
}
.mobile-stats .stats-search-hit-pos {
  grid-area: pos;
  font-weight: 700;
  color: var(--gg-green);
  font-size: var(--gg-font-size-sm);
  min-width: 40px;
}
.mobile-stats .stats-search-hit-name {
  grid-area: name;
  font-weight: 600;
  font-size: var(--gg-font-size-md, 16px);
}
.mobile-stats .stats-search-hit-stats {
  grid-area: stats;
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted);
}
.mobile-stats .stats-search-hit-page {
  grid-area: page;
  font-size: var(--gg-font-size-xs);
  color: var(--gg-green);
  background: rgba(51, 153, 51, 0.10);
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}
.mobile-stats .stats-search-hit-page--here {
  /* "Här" badge for hits on the current page — these navigate
     to the same page so the user knows nothing will jump. */
  color: var(--gg-text-muted);
  background: rgba(0, 0, 0, 0.04);
}

/* Highlight the target row when a search result is clicked.
   The URL hash (#user-UID) makes the row :target. */
.mobile-stats .stats-row:target {
  background: rgba(255, 220, 80, 0.30);
  outline: 2px solid rgba(255, 200, 60, 0.7);
  outline-offset: -2px;
  scroll-margin-top: 80px;
}
.mobile-stats .stats-row:target .stats-name {
  font-weight: 700;
}

/* Daniel 2026-07-13 12:43: cmd=table (Tippartabellen) cross-page
   search lands the user on a specific row via #user-UID in the
   URL. Subtle yellow tint is enough — no outline, no bold (those
   create per-cell boxes around number/flag/points/spelade which
   look like noise, Daniel 2026-07-13 13:50). The row tint already
   reads as "you are here" without extra affordance. scroll-margin
   keeps the row from hiding under the sticky header. */
table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:target,
table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:target td {
  background: rgba(255, 220, 80, 0.30) !important;
  scroll-margin-top: 80px;
}


/* ============================================================
   MOBILE HALL OF FAME / HALL OF SHAME — Daniel 2026-07-06 14:29
   ------------------------------------------------------------
   Mobile renderers for cmd=halloffame / cmd=hallofshame.
   Replaces the legacy <table class="CENTER"> + <font class="UADUP">
   markup on phones (controller.php dispatches via
   _isMobileRequest()).

   One card per tournament (lid), newest first. Each card
   shows top-3 (Fame) or bottom-3 (Shame) with medal-tier
   colour gradients matching the snapshot / stats podium
   grammar. CSS-only medals (no external gifs) keep the
   view clean and themable.

   Daniel 2026-07-06 14:29: 'Anpassningen skall ha kvar
   abonnera för nöden game o shame' — both Fame and Shame
   share the same card grammar; only the colour scheme
   flips (greens/golds vs reds).
   ============================================================ */

.mobile-hall {
  margin: var(--gg-space-md);
}

.mobile-hall .hall-section-header {
  padding: var(--gg-space-md);
  border-radius: var(--gg-radius-md, 6px) var(--gg-radius-md, 6px) 0 0;
  color: var(--gg-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-hall.mobile-hall-fame .hall-section-header {
  background: var(--gg-green);
}

.mobile-hall.mobile-hall-shame .hall-section-header {
  background: linear-gradient(135deg, #8B0000 0%, #B22222 100%);
}

.mobile-hall .hall-section-title {
  font-size: var(--gg-font-size-base);
  font-weight: bold;
  letter-spacing: 0.5px;
}

.mobile-hall-empty .hall-empty-section {
  padding: var(--gg-space-lg, 16px);
  text-align: center;
  background: var(--gg-white);
  color: var(--gg-text-muted);
  font-size: var(--gg-font-size-sm);
  border-radius: 0 0 var(--gg-radius-md, 6px) var(--gg-radius-md, 6px);
}

/* Banner — Daniel 2026-07-06 14:30 correction: keep the
   hof.gif / hos.gif banner on mobile. The legacy image is
   the brand of the page. We constrain width so it doesn't
   blow past the phone screen but stays recognisable. */
.mobile-hall .hall-banner {
  background: var(--gg-white);
  text-align: center;
  padding: var(--gg-space-md);
  border-bottom: 1px solid var(--gg-row-odd);
}
.mobile-hall .hall-banner-img {
  max-width: 80%;
  height: auto;
  display: inline-block;
}

/* Per-tournament card */
.mobile-hall-card {
  background: var(--gg-white);
  border-radius: 0 0 var(--gg-radius-md, 6px) var(--gg-radius-md, 6px);
  margin-bottom: var(--gg-space-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mobile-hall-card .hall-card-header {
  padding: var(--gg-space-sm) var(--gg-space-md);
  background: rgba(51, 153, 51, 0.06);
  border-bottom: 1px solid var(--gg-row-odd);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-hall-card.hall-shame .hall-card-header {
  background: rgba(178, 34, 34, 0.06);
}

.mobile-hall-card .hall-card-title {
  font-weight: bold;
  font-size: var(--gg-font-size-base);
  color: var(--gg-text);
}

.mobile-hall-card .hall-card-tbd {
  font-size: var(--gg-font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #B22222;
  background: rgba(178, 34, 34, 0.10);
  padding: 2px 6px;
  border-radius: 4px;
}

.mobile-hall-card .hall-empty {
  padding: var(--gg-space-md);
  color: var(--gg-text-muted);
  font-size: var(--gg-font-size-sm);
  text-align: center;
}

/* Row list */
.mobile-hall-card .hall-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-hall-card .hall-row {
  display: flex;
  border-bottom: 1px solid var(--gg-row-odd);
}

.mobile-hall-card .hall-row:last-child {
  border-bottom: none;
}

/* Daniel 2026-07-15 17:31: 'Placera poängen prydligt till höger.'
   Two layers of rule overrides were silently winning:
     1. `html body.MAIN a` (specificity 0,2,2 + !important) sets
        `display: inline-block` on every <a> tag in the app.
     2. `.MAINTB tr.row-content > td.CENTERCOL` is `display:
        block !important`, and td-content flowing into a block
        parent loses the inline-block fallback.
   So `.mobile-hall-card .hall-link { display: flex }` (020) lost
   to the global a-rule, leaving the row as inline-block — medal,
   pos, name, points all collapsed into a single line. To beat
   `html body.MAIN a` (022 + !important) we need a selector with
   specificity ≥ 022. `.mobile-hall-card.mobile-hall-card .hall-link`
   doubles the class to (040) and wins regardless of !important on
   the same side. */
.mobile-hall-card.mobile-hall-card .hall-row {
  display: flex;
  border-bottom: 1px solid var(--gg-row-odd);
}
.mobile-hall-card.mobile-hall-card .hall-link {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  gap: var(--gg-space-md);
  padding: var(--gg-space-md) var(--gg-space-md);
  min-height: 56px;
  text-decoration: none;
  color: inherit;
}

.mobile-hall-card .hall-link:hover,
.mobile-hall-card .hall-link:focus {
  outline: none;
  background: rgba(51, 153, 51, 0.06);
}

/* Medal — real legacy icons now (Daniel 2026-07-06 18:08):
   gold.gif / silver.gif / bronze.gif for Fame, skull / skullbones
   for Shame. Background is the badge colour behind the icon. */
.mobile-hall-card .hall-medal {
  width: 36px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-block;
  border: 2px solid var(--gg-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
  border-radius: 4px;
  object-fit: contain;
  padding: 2px;
  background: var(--gg-white);
}

/* Fame: guld / silver / brons gradient badges (icon
   sits on top of the gradient). Three distinct hues so
   the eye can rank them at a glance. */
.mobile-hall-card .hall-medal.medal-1 {
  background: linear-gradient(135deg, #F4C430 0%, #DAA520 100%);
}
.mobile-hall-card .hall-medal.medal-2 {
  background: linear-gradient(135deg, #E0E0E0 0%, #A8A8A8 100%);
}
.mobile-hall-card .hall-medal.medal-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
}

/* Shame: "utanför-normal" färger (Daniel 2026-07-06 18:08).
   Inte röd (Shame-redundant), inte guld/silver/brons
   (Fame-reserverad), inte grön (app-wide primary). Tre
   klart avvikande färger så ögat direkt ser "något är
   fel" även om man inte vet sidans kontext. */
.mobile-hall-card.hall-shame .hall-medal.medal-1 {
  background: #FF1493;        /* magenta — värst */
}
.mobile-hall-card.hall-shame .hall-medal.medal-2 {
  background: #00CED1;        /* cyan — mitten */
}
.mobile-hall-card.hall-shame .hall-medal.medal-3 {
  background: #FFFF00;        /* neon-gul — minst dålig */
}

/* Position chip */
.mobile-hall-card .hall-pos {
  min-width: 36px;
  font-weight: bold;
  color: var(--gg-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Name (no flex-grow so .hall-points margin-left:auto can
   push the points column to the right edge). With
   flex-grow:1 the name would expand to fill any leftover
   space and leave zero room for the auto-margin to absorb —
   which kept points flush against the name in every row,
   shifting the right edge raggedly. flex:0 1 auto + ellipsis
   means the name takes its content width (truncated if
   needed) and points get the entire trailing area. */
.mobile-hall-card .hall-name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--gg-font-size-sm);
}

/* Points (right-anchored)
   Daniel 2026-07-15 17:31 (WhatsApp): 'Placera poängen prydligt
   till höger.' Earlier the .hall-link flex row had .hall-medal
   → .hall-pos → .hall-name (flex:1) → .hall-points all flowing
   left-to-right with a uniform gap. .hall-points therefore sat
   flush against the name, leaving a ragged right edge that
   shifted per row (long names → points drifted left, short
   names → points drifted further right). Pushing .hall-points
   to the far right with margin-left:auto gives every row the
   same visually-aligned column. Adds min-width + text-align
   :right so 1-2 digit numbers still line up against 3-digit
   ones, and tabular-nums is already set so digits have equal
   width. */
.mobile-hall-card .hall-points {
  margin-left: auto;
  padding-left: var(--gg-space-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gg-text);
  text-align: right;
  min-width: 56px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Fame tier tints (same gradients as snapshot podium) */
.mobile-hall-card .hall-row.hall-tier-1 {
  background: linear-gradient(90deg, rgba(244, 196, 48, 0.18) 0%, rgba(244, 196, 48, 0.04) 70%, transparent 100%);
  border-left: 3px solid #F4C430;
}
.mobile-hall-card .hall-row.hall-tier-2 {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.16) 0%, rgba(192, 192, 192, 0.04) 70%, transparent 100%);
  border-left: 3px solid #C0C0C0;
}
.mobile-hall-card .hall-row.hall-tier-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 70%, transparent 100%);
  border-left: 3px solid #CD7F32;
}

/* Shame tier tints — same shape but red palette */
.mobile-hall-card.hall-shame .hall-row.shame-tier-1 {
  background: linear-gradient(90deg, rgba(178, 34, 34, 0.20) 0%, rgba(178, 34, 34, 0.04) 70%, transparent 100%);
  border-left: 3px solid #B22222;
}
.mobile-hall-card.hall-shame .hall-row.shame-tier-2 {
  background: linear-gradient(90deg, rgba(139, 0, 0, 0.16) 0%, rgba(139, 0, 0, 0.04) 70%, transparent 100%);
  border-left: 3px solid #8B0000;
}
.mobile-hall-card.hall-shame .hall-row.shame-tier-3 {
  background: linear-gradient(90deg, rgba(80, 0, 0, 0.14) 0%, rgba(80, 0, 0, 0.04) 70%, transparent 100%);
  border-left: 3px solid #500000;
}
/* Cherry-picked mobile-goldenboot + matchresults + standtb-search from feat/mobile-matchresults */
/* Daniel 2026-07-07 00:11: cherry-pick. Skip mobile_standings.php / mobile_statistics.php / mobile_halloffame.php — those were redone on main in PR #80-88. */

.mobile-matchresults {
  margin: var(--gg-space-md);
  max-width: 720px;
}

.mobile-matchresults-header {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  margin: var(--gg-space-md) 0 var(--gg-space-sm) 0;
  padding-bottom: var(--gg-space-xs);
  border-bottom: 2px solid var(--gg-green);
}

.mobile-matchresults-weeks {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: var(--gg-space-sm);
  padding: var(--gg-space-sm) 0;
  margin: 0 0 var(--gg-space-sm) 0;
  scrollbar-width: thin;
  /* Daniel 2026-07-22 11:16: smooth scroll + center snap on
   * the active pill. scroll-snap-type: x mandatory forces the
   * snap point defined on each pill to be honored after the
   * JS has positioned scrollLeft — useful when the user then
   * swipes to the neighbour; without it the bar settles
   * wherever the touch ends, which is rarely aligned to a
   * pill edge. */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Slight padding-inline so a centred pill isn't flush to
   * the viewport edge on narrow screens. */
  padding-inline: 4px;
}

body.MAIN .MAINTB a.mobile-matchresults-week-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Daniel 2026-07-05 21:24 + Daniel 2026-07-21 23:45:
     specificity war with the global link rules. There are
     FOUR !important link rules that target anchors in the
     main content column on mobile:
       - mobile.css ~550:  `body.MAIN a`           (0,1,2) forces
         display inline-block, min-height var(--gg-touch-min)
         (44px), height auto, padding
         var(--gg-space-lg) var(--gg-space-md) via !important.
       - mobile.css ~603:  `html body.MAIN a`       (0,1,3) forces
         display inline-block, min-height 44px via !important.
       - mobile.css ~1163: `.MAIN a` (0,1,1),
         `#MAINTB a` (1,0,1), `.CENTERCOL a` (0,1,1),
         `td.CENTERCOL a` (0,1,2) — forces min-height
         var(--gg-touch-min) (44px), height auto via
         !important. The #MAINTB-a selector does not match
         (the actual wrapper is `<table class="MAINTB">`,
         not `<div id="MAINTB">`) so the effective match is
         the (0,1,1)/(0,1,2) variants.
     To beat all of these on the !important cascade we need a
     selector with specificity (0,2,2)+ AND every property that
     the globals touch needs !important on our side too.
     `body.MAIN .MAINTB a.mobile-matchresults-week-pill` =
     3 classes + 2 types = (0,3,2). Wins on every digit over
     (0,1,2), (0,1,3), (0,1,1), (0,1,2). The local rule sets
     the pill to inline-flex (centered text) at a tight 40px
     height with line-height:1 so the glyph sits on the
     geometric center. Without !important on display the
     globals' inline-block wins and the text renders
     inline-block baseline-aligned in a 44px content box —
     visibly below center. */
  padding: 0 14px !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  width: auto !important;
  line-height: 1 !important;
  font-size: var(--gg-font-size-sm) !important;
  border-radius: 999px;
  background: var(--gg-white);
  border: 1.5px solid var(--gg-green);
  color: var(--gg-green);
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif) !important;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease;
  /* Daniel 2026-07-22 11:16: each pill is a snap target.
   * center snap aligns the pill to the bar's horizontal
   * centre after user-initiated swipes; combined with the
   * JS-driven scrollLeft in mobile.js this guarantees the
   * active pill always ends up centred. */
  scroll-snap-align: center;
}

body.MAIN .MAINTB a.mobile-matchresults-week-pill:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 0 !important;
  width: auto !important;
  line-height: 1 !important;
  font-size: var(--gg-font-size-sm) !important;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--gg-green) !important;
  background: var(--gg-white) !important;
  border: 1.5px solid var(--gg-green) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

body.MAIN .MAINTB a.mobile-matchresults-week-pill.active:visited {
  background: var(--gg-green) !important;
  color: var(--gg-white) !important;
  border-color: var(--gg-green) !important;
}

body.MAIN .MAINTB a.mobile-matchresults-week-pill.active {
  background: var(--gg-green);
  color: var(--gg-white);
}

body.MAIN .MAINTB a.mobile-matchresults-week-pill:focus {
  outline: 2px solid var(--gg-green);
  outline-offset: 2px;
}

.mobile-matchresults-week-heading {
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-base);
  font-weight: 700;
  color: var(--gg-green);
  margin: var(--gg-space-lg) 0 var(--gg-space-xs) 0;
  padding-bottom: var(--gg-space-xs);
  border-bottom: 1px solid var(--gg-green);
}

.mobile-matchresults-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-md);
}

.mobile-matchresults-card {
  background: var(--gg-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--gg-radius-md, 8px);
  padding: var(--gg-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-sm);
}

.mobile-matchresults-card.status-finished {
  border-left: 4px solid var(--gg-green);
}

.mobile-matchresults-card.status-upcoming {
  border-left: 4px solid var(--gg-text-muted);
  background: #fafafa;
}

.mobile-matchresults-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gg-space-xs) var(--gg-space-sm);
  font-family: var(--gg-font-mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gg-text-muted);
}

/* Daniel 2026-07-22 16:02 (screenshot): 'Datum o status pills
 * ska vara på samma rad.' — back to the earlier 'balance
 * the card' layout: date+time block on the left, Omg + status
 * pill on the right, both sharing the same flex row. This
 * overrides the 15:42(b) 'separate rows' split from #181.
 *
 * Implementation: status group is inline-flex (sizes to
 * pills only) with margin-left:auto — the canonical
 * right-anchor pattern in flexbox. Date+time stays on the
 * left as plain spans. When the row is too narrow for
 * everything, the natural flex-wrap on the parent header
 * pushes the status group to a second line (still anchored
 * right). Bonus chip still lives on its own row (see below).
 *
 * Visual hierarchy (2 rows with bonus, 1 without):
 *   row 1: date + time (left) | Omg + status (right)
 *   row 2: Bonus +Np (left, pill sized to content) */
.mobile-matchresults-status-group {
  display: inline-flex;
  align-items: center;
  gap: var(--gg-space-xs);
  margin-left: auto;
}

/* Daniel 2026-07-22 15:56: 'Bonuspill ska inte ha hela
 * bredden — bara stor nog att rymma innehåll.' The bonus
 * chip must size to its content, not stretch to fill the
 * row. The trick is splitting the row control from the
 * chip width control: the wrapper
 * (.mobile-matchresults-bonus-row) takes the full row width
 * via flex-basis:100% so it lands on its own line below
 * the status group, but its child chip stays at content
 * width because the wrapper uses
 * justify-content:flex-start (chip anchored left) and the
 * chip itself has no flex-grow/flex-basis set.
 *
 * Result: pill is only as wide as '🏆 Bonus +Np' needs.
 * When bonus is absent, the wrapper isn't rendered at all,
 * so the card doesn't get a blank third line. */
.mobile-matchresults-bonus-row {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-start;
}

.mobile-matchresults-date {
  font-weight: 700;
  color: var(--gg-text);
}

.mobile-matchresults-time {
  color: var(--gg-text-muted);
}

.mobile-matchresults-week-chip {
  background: var(--gg-green);
  color: var(--gg-white);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.mobile-matchresults-pill {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--gg-font-mono, monospace);
}

.mobile-matchresults-pill.status-finished {
  background: var(--gg-green);
  color: var(--gg-white);
}

.mobile-matchresults-pill.status-upcoming {
  background: var(--gg-bg);
  color: var(--gg-text-muted);
}

.mobile-matchresults-bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff3cd;
  color: #856404;
  font-family: var(--gg-font-mono, monospace);
  white-space: nowrap;
}

.mobile-matchresults-grid {
  margin-top: var(--gg-space-xs);
}

.mobile-matchresults-score {
  display: block;
  font-family: var(--gg-font-mono, monospace);
  font-size: 28px;
  font-weight: 700;
  color: var(--gg-text);
  text-align: center;
  line-height: 1.1;
  min-height: 32px;
}

.mobile-matchresults-card.status-upcoming .mobile-matchresults-score {
  color: var(--gg-text-muted);
  font-weight: 400;
}

.mobile-matchresults-pen {
  text-align: center;
  font-family: var(--gg-font-mono, monospace);
  font-size: 11px;
  color: var(--gg-text-muted);
  font-weight: 600;
}

.mobile-matchresults-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gg-space-xs) var(--gg-space-sm);
  font-size: 11px;
  color: var(--gg-text-muted);
  border-top: 1px dashed #eee;
  padding-top: var(--gg-space-xs);
}

.mobile-matchresults-venue {
  color: #4b5563;
}

.mobile-matchresults-empty {
  background: var(--gg-bg);
  border-radius: var(--gg-radius-md, 8px);
  padding: var(--gg-space-xl);
  text-align: center;
  color: var(--gg-text-muted);
  font-style: italic;
}

.mobile-goldenboot {
  margin: var(--gg-space-md);
  max-width: 720px;
}

.mobile-goldenboot-header {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg);
  font-weight: 700;
  color: var(--gg-text);
  margin: var(--gg-space-md) 0 var(--gg-space-sm) 0;
  padding-bottom: var(--gg-space-xs);
  border-bottom: 2px solid var(--gg-green);
}

.mobile-goldenboot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-sm);
}

ol.mobile-goldenboot-list {
  list-style: none;
  counter-reset: gbpos;
}

.mobile-goldenboot-card {
  display: flex;
  align-items: center;
  gap: var(--gg-space-md);
  background: var(--gg-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--gg-radius-md, 8px);
  padding: var(--gg-space-sm) var(--gg-space-md);
  min-height: 56px;
}

.mobile-goldenboot-rank {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--gg-font-mono, monospace);
  font-weight: 700;
  font-size: var(--gg-font-size-base);
  background: var(--gg-bg);
  color: var(--gg-text);
  line-height: 1;
  /* Center the digit vertically — same defense as the week pill */
  line-height: 32px;
}

.mobile-goldenboot-rank.rank-gold {
  background: gold;
  color: var(--gg-black, #000);
}

.mobile-goldenboot-rank.rank-silver {
  background: silver;
  color: var(--gg-black, #000);
}

.mobile-goldenboot-rank.rank-bronze {
  background: var(--gg-bronze, #cd7f32);
  color: var(--gg-white, #fff);
}

.mobile-goldenboot-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  /* Daniel 2026-07-05 22:07: flex-direction: column so the name
   * (link) and the "Tippar:" subline stack vertically inside the
   * card. Without this they default to row and the global `a`
   * min-width: 44px pushes them past the available space, which
   * triggers the text-overflow ellipsis on the name. align-items:
   * stretch lets name and pick fill the column width so line-wrap
   * has something to break against. */
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.mobile-goldenboot-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}

.mobile-goldenboot-avatar-link {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  background: transparent !important;
  color: inherit !important;
}

.mobile-goldenboot-initial {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gg-green);
  color: var(--gg-white);
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.mobile-goldenboot-mid > div {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-goldenboot-name {
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-base);
  font-weight: 600;
  color: var(--gg-text);
  text-decoration: none !important;
  /* Daniel 2026-07-05 22:07: two-line clamp instead of single-line
   * ellipsis. Live screenshot showed names like "MNilion" /
   * "Benny Benskydd" truncated to "M..." / "B..." even though
   * they fit horizontally — root cause was the global `a` rule
   * forcing min-width 44px on the link plus a flex-direction:
   * row default that left no room for the natural name width.
   * Now the name wraps to 2 lines via -webkit-line-clamp, with
   * overflow-wrap: anywhere so very long words break cleanly. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
  min-width: 0;
  max-width: 100%;
}

body.MAIN a.mobile-goldenboot-name:active {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--gg-text) !important;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif) !important;
  font-size: var(--gg-font-size-base) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

body.MAIN a.mobile-goldenboot-name:hover {
  color: var(--gg-green-dark, #2a7a2a) !important;
}

.mobile-goldenboot-name:hover {
  color: var(--gg-green-dark, #2a7a2a);
}

.mobile-goldenboot-pick {
  font-family: var(--gg-font-mono, monospace);
  font-size: 11px;
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Daniel 2026-07-05 22:07: pick line also wraps to 2 lines
   * instead of single-line ellipsis. Same -webkit-line-clamp
   * recipe as the name so the visual rhythm stays consistent
   * (long names + long picks render the same height). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
}

.mobile-goldenboot-pick-label {
  color: var(--gg-text-muted);
  font-weight: 600;
}

.mobile-goldenboot-metric {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
}

.mobile-goldenboot-metric-value {
  font-family: var(--gg-font-mono, monospace);
  font-size: 22px;
  font-weight: 700;
  color: var(--gg-text);
  line-height: 1;
}

.mobile-goldenboot-metric-label {
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 9px;
  font-weight: 600;
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  line-height: 1;
}

.mobile-goldenboot-placement {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  background: var(--gg-bg);
  color: var(--gg-text);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.mobile-goldenboot-placement.placement-tier-1 {
  background: var(--gg-gold, #D4A200);
  color: var(--gg-white, #fff);
}

.mobile-goldenboot-placement.placement-tier-2 {
  background: var(--gg-silver, #c0c0c0);
  color: var(--gg-black, #000);
}

.mobile-goldenboot-placement.placement-tier-3 {
  background: var(--gg-bronze, #cd7f32);
  color: var(--gg-white, #fff);
}

.mobile-goldenboot-placement.placement-tier-4 {
  background: var(--gg-green);
  color: var(--gg-white, #fff);
}

.mobile-goldenboot-placement.placement-tier-5 {
  background: var(--gg-bg);
  color: var(--gg-text);
  border: 1px solid var(--gg-text-muted);
}

.mobile-goldenboot-empty {
  background: var(--gg-bg);
  border-radius: var(--gg-radius-md, 8px);
  padding: var(--gg-space-xl);
  text-align: center;
  color: var(--gg-text-muted);
  font-style: italic;
}

.mobile-goldenboot-group {
  margin: var(--gg-space-md) var(--gg-space-sm);
  /* The outer pill — large radius, soft shadow, white fill.
   * 'overflow: hidden' would clip the header's tinted strip
   * too sharply; instead we use border-radius on the header
   * itself so the curvature flows inside the container. */
  border-radius: 14px;
  background: #fff;
  /* Subtle shadow that lifts the cluster off the page
   * background without being noisy at 1x. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
}

.mobile-goldenboot-search {
  position: relative;
  margin: 0 4px var(--gg-space-sm);
  display: flex;
  align-items: center;
}

.mobile-goldenboot-search-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.3;
  /* Daniel 2026-07-12 23:19: bumped left padding 36→52px so the
     placeholder clears the 16px magnifying-glass icon sitting at
     left:12px. The text was overlapping the icon at 360px view-
     port — same family of bug as the .standtb-search-input
     right-padding fix on 2026-07-10.
     Daniel 2026-07-15 21:18 (WhatsApp): 'Sökfältet: "Sök spelare
     eller…" måste dras in lite till höger. Texten ligger över den
     gröna ringen i sökfältet o det är svårt att läsa.'
     The 52px rule was being silently overridden by the global
     input[type="search"] selector at the top of mobile.css which
     sets `padding: var(--gg-space-md)` (12px all sides). The
     attribute+type selector has specificity (0,1,1) which beats
     (0,1,0) on the class selector. !important restores the
     cascade lock the .standtb-search-input and .msguser-search-input
     rules already use. Bumped 52→60px for an extra 8px of clear-
     ance from the magnifying-glass ring on narrow viewports. */
  padding: 10px 36px 10px 60px !important;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, 0.25);
  background: #fff
    /* subtle magnifying-glass icon, baked in */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>")
    12px center / 16px 16px no-repeat;
  color: var(--gg-text);
  /* Subtle inner glow that lifts the input off the page. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.mobile-goldenboot-search-input:focus {
  outline: none;
  border-color: var(--gg-green-dark, #2a7a2a);
  /* Soft focus ring that doesn't look like the default
   * outline but is just as accessible. */
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.mobile-goldenboot-search-input::placeholder {
  color: var(--gg-text-muted);
  font-weight: 400;
}

.mobile-goldenboot-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  color: var(--gg-text);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-goldenboot-search-clear:hover {
  background: rgba(0, 0, 0, 0.16);
}

.mobile-goldenboot-search-clear:active {
  background: var(--gg-green-dark, #2a7a2a);
  color: #fff;
}

/* Daniel 2026-07-12 23:19: sort/filter pill row below the
   search input. Three buttons (Standard / Störst först /
   Mina) that reorder the cluster sections via JS without
   a page reload. Same green-on-white pill language as the
   search box so it sits visually attached to it. */
.mobile-goldenboot-sortbar {
  display: flex;
  gap: 6px;
  padding: 0 4px var(--gg-space-sm);
  margin: -2px 0 var(--gg-space-sm);
  flex-wrap: wrap;
}
.mobile-goldenboot-sort-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--gg-text);
  background: #fff;
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.mobile-goldenboot-sort-btn:hover {
  background: #f5faf5;
  border-color: var(--gg-green-dark, #2a7a2a);
}
.mobile-goldenboot-sort-btn[aria-pressed="true"],
.mobile-goldenboot-sort-btn.is-active {
  background: var(--gg-green, #339933);
  color: #fff;
  border-color: var(--gg-green-dark, #2a7a2a);
}

/* Daniel 2026-07-19 00:13: outcome-filter bar (Hemma / Oavgjort /
   Borta) for cmd=matchpreds. Mirrors the sort-bar pattern above
   so the two bars read as one control block. Result-filter is
   matchpreds-only (guldsko/sverige don't have score-based
   outcomes), but the class names are scoped under
   .mobile-goldenboot so the JS handler can find them via the
   shared .mobile-goldenboot container lookup. */
.mobile-matchpreds-result-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: var(--gg-space-xs, 4px) 4px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 13px;
  color: var(--gg-text-muted, #7d7d7d);
  line-height: 1.4;
}
.mobile-matchpreds-result-summary-item {
  white-space: nowrap;
}
.mobile-matchpreds-result-summary-item[data-outcome="home"] {
  color: var(--gg-green-dark, #2a7a2a);
}
.mobile-matchpreds-result-summary-item[data-outcome="draw"] {
  color: var(--gg-text, #222);
}
.mobile-matchpreds-result-summary-item[data-outcome="away"] {
  color: #8a4a2a;
}
.mobile-matchpreds-result-summary-sep {
  color: var(--gg-text-muted, #7d7d7d);
  user-select: none;
}
.mobile-matchpreds-result-summary-total {
  font-weight: 600;
  color: var(--gg-text, #222);
  white-space: nowrap;
}

.mobile-goldenboot-resultfilter {
  display: flex;
  gap: 6px;
  padding: 0 4px var(--gg-space-sm, 8px);
  margin: 0 0 var(--gg-space-sm, 8px);
  flex-wrap: wrap;
}
.mobile-goldenboot-result-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--gg-text, #222);
  background: #fff;
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.mobile-goldenboot-result-btn:hover {
  background: #f5faf5;
  border-color: var(--gg-green-dark, #2a7a2a);
}
.mobile-goldenboot-result-btn[aria-pressed="true"],
.mobile-goldenboot-result-btn.is-active {
  background: var(--gg-green, #339933);
  color: #fff;
  border-color: var(--gg-green-dark, #2a7a2a);
}
.mobile-goldenboot-result-btn[disabled],
.mobile-goldenboot-result-btn.is-disabled {
  background: #f4f4f4;
  color: #b8b8b8;
  border-color: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.7;
}
.mobile-goldenboot-result-btn[disabled]:hover,
.mobile-goldenboot-result-btn.is-disabled:hover {
  background: #f4f4f4;
  border-color: #e0e0e0;
}

.mobile-goldenboot-resultfilter-empty {
  padding: 16px 12px;
  margin: 0 4px var(--gg-space-md, 12px);
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--gg-text-muted, #7d7d7d);
  text-align: center;
  background: #fafafa;
  border: 1px dashed var(--gg-text-muted, #7d7d7d);
  border-radius: 8px;
}

.mobile-goldenboot-picks.gboot-filter-empty .mobile-goldenboot-pick-row {
  display: none;
}

.mobile-goldenboot-picks.gboot-filter-empty {
  display: flex;
  position: relative;
  min-height: 36px;
  align-items: center;
  justify-content: center;
}

.mobile-goldenboot-picks.gboot-filter-empty::before {
  content: "Inga matchande spelare";
  font-style: italic;
  color: var(--gg-text-muted);
  font-size: 13px;
  padding: 8px 12px;
}

.mobile-goldenboot-group-header {
  display: flex;
  align-items: center;
  gap: var(--gg-space-md);
  padding: 14px 16px;
  /* Subtle gradient strip so the section heading
   * reads as the pill's 'cap'. The header inherits
   * the parent's 14px radius via the explicit
   * border-radius below so the top corners round
   * with the pill while the bottom stays flat. */
  background: linear-gradient(180deg,
    var(--gg-green-bg, #e8f5e9),
    #fff);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-goldenboot-group-flag {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  /* Daniel 2026-07-12 23:19: small gap so the flag doesn't
     touch the team/score text inside the cluster title. */
  margin-right: 6px;
}

/* Daniel 2026-07-12 23:19: same gap for the inline flag pattern
   used by showtournamentwinnerpicks, where _safeTeamNameAndFlag
   returns <img class="team-flag"><span class="team-name"> nested
   inside the .mobile-goldenboot-group-title span. The flex gap
   on the header doesn't reach inside the title span — these
   two children are inline siblings, so we add the spacing here. */
.mobile-goldenboot-group-title .team-flag {
  margin-right: 6px;
  vertical-align: middle;
}

.mobile-goldenboot-group-title {
  flex: 1 1 auto;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gg-text);
  line-height: 1.2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.mobile-goldenboot-group-count {
  flex: 0 0 auto;
  font-family: var(--gg-font-mono, monospace);
  font-size: 11px;
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* Daniel 2026-07-05 23:20: render 'N tips' / 'N spelare'
   * as a soft chip so the count reads as a badge
   * anchored to the cluster header rather than inline text. */
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  padding: 2px 10px;
}

.mobile-goldenboot-group-goals {
  flex: 0 0 auto;
  font-family: var(--gg-font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--gg-green-dark, #1b5e20);
  white-space: nowrap;
  /* Slight background pill so the goal count reads
   * as a discrete badge rather than inline text. */
  background: var(--gg-green-bg, #e8f5e9);
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 999px;
  padding: 2px 10px;
}

.placement-header.placement-tier-1 {
  background: linear-gradient(180deg, #fff5cc, #fff);
}

.placement-header.placement-tier-1 .mobile-goldenboot-group-title {
  color: #7a5a00;
}

.placement-header.placement-tier-2 {
  background: linear-gradient(180deg, #fde0d0, #fff);
}

.placement-header.placement-tier-2 .mobile-goldenboot-group-title {
  color: #7a3b00;
}

.placement-header.placement-tier-3 {
  background: linear-gradient(180deg, #ffe8c2, #fff);
}

.placement-header.placement-tier-3 .mobile-goldenboot-group-title {
  color: #6b3a00;
}

.placement-header.placement-tier-4 {
  background: linear-gradient(180deg, #eef2c2, #fff);
}

.placement-header.placement-tier-5 {
  background: linear-gradient(180deg, #f0ece0, #fff);
}

.placement-header.placement-tier-6 {
  background: linear-gradient(180deg, #f0f0f0, #fff);
  color: var(--gg-text-muted);
}

.placement-header.placement-tier-6 .mobile-goldenboot-group-title {
  color: var(--gg-text-muted);
}

.placement-header.placement-tier-6 .mobile-goldenboot-group-count {
  color: var(--gg-text-muted);
}

.mobile-goldenboot-picks {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mobile-goldenboot-pick-row {
  /* The chip itself shrinks to its content. avatar + name
   * are both flex items inside the link, so the pill width
   * equals the sum of its contents + padding. */
  display: inline-flex;
  flex: 0 1 auto;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, 0.18);
  background: var(--gg-green-bg, #f1f8f4);
  overflow: hidden;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.mobile-goldenboot-pick-row[hidden] {
  display: none;
}

.mobile-goldenboot-group[hidden] {
  display: none;
}

.standtb-search {
  position: relative;
  margin: 0 4px var(--gg-space-sm);
  display: flex;
  align-items: center;
}

.standtb-search-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.3;
  /* Daniel 2026-07-10 12:43: pulled placeholder/text further from
     the right so the green × clear button doesn't crowd legibility.
     Right padding 36→56px keeps "Sök…" clear of the 22px circular
     button sitting at right:8px. Mirror same padding on the
     .msguser-search-input below for visual parity across all search
     fields.
     NB: !important is required here. The earlier input[type="search"]
     base rule sets `padding: var(--gg-space-md)` (12px all sides) and
     that selector (tag + attr) has HIGHER specificity than
     .standtb-search-input (class), so the shorthand wins the cascade
     regardless of source order. */
  padding: 10px 56px 10px 36px !important;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, 0.25);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>")
    12px center / 16px 16px no-repeat;
  color: var(--gg-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.standtb-search-input:focus {
  outline: none;
  border-color: var(--gg-green-dark, #2a7a2a);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.standtb-search-input::placeholder {
  color: var(--gg-text-muted);
  font-weight: 400;
}

.standtb-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  color: var(--gg-text);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.standtb-search-clear:hover {
  background: rgba(0, 0, 0, 0.16);
}

.standtb-search-clear:active {
  background: var(--gg-green-dark, #2a7a2a);
  color: #fff;
}

/* Daniel 2026-07-13 12:43: search-bar cross-page results
   dropdown. Mirrors the .stats-search-results grammar from
   cmd=stats/marathonstats/marathontable so the visual
   treatment is consistent across mobile search bars.
   Inline layout (NOT absolutely positioned) so the result
   list pushes the STANDTB table down rather than floating
   over it. */
.standtb-search-results {
  margin: 0 4px var(--gg-space-sm);
  display: none;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
}
.standtb-search-results[data-active="1"] {
  display: block;
}
.standtb-search-meta {
  font-size: 12px;
  color: var(--gg-text-muted);
  padding: 4px 8px;
  font-weight: 600;
}
.standtb-search-empty {
  font-size: 13px;
  color: var(--gg-text-muted);
  padding: 8px;
  text-align: center;
}
.standtb-search-hit {
  display: flex;
  align-items: center;
  gap: var(--gg-space-sm);
  padding: 8px 10px;
  border-top: 1px solid var(--gg-row-odd, #eeeeed);
  text-decoration: none;
  color: var(--gg-text);
  font-size: 14px;
}
.standtb-search-hit:hover,
.standtb-search-hit:focus {
  background: rgba(46, 125, 50, 0.06);
  outline: none;
}
.standtb-search-hit-pos {
  font-weight: 700;
  min-width: 36px;
  color: var(--gg-text-muted);
}
.standtb-search-hit-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standtb-search-hit-page {
  font-size: 11px;
  font-weight: 700;
  color: var(--gg-text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.standtb-search-hit-page--here {
  background: var(--gg-green, #339933);
  color: #fff;
}

.mobile-goldenboot-pick-row:hover {
  border-color: rgba(46, 125, 50, 0.4);
}

.mobile-goldenboot-pick-row:active {
  transform: scale(0.97);
  background: var(--gg-green-dark, #2a7a2a);
  border-color: var(--gg-green-dark, #2a7a2a);
}

html body.MAIN a.mobile-goldenboot-pick-link,
.mobile-goldenboot-pick-link {
  /* High specificity + !important needed to override the
   * global touch-target rules:
   *   body.MAIN a, a                     (0,1,1) !important
   *   body.MAIN a:link, a:visited, ...   (0,1,2) !important
   *   html body.MAIN a, ...              (0,2,1) !important
   * which set padding: 16px 12px + min-height: 44px on every
   * <a> for WCAG-AA touch compliance. Without !important the
   * chip becomes 16+22+16 = 46px tall and clips the player name.
   * Picked up 2026-07-07 00:46 when Daniel sent a screenshot of
   * pills looking like empty ovals.
   * Same pattern for the other goldenboot link rules below. */
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px !important;
  min-height: 28px !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
  text-decoration: none !important;
  color: var(--gg-text) !important;
  background: transparent !important;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap;
}

.mobile-goldenboot-pick-link:hover {
  color: var(--gg-green-dark, #2a7a2a) !important;
}

.mobile-goldenboot-pick-row:active .mobile-goldenboot-pick-link {
  color: #fff !important;
}

.mobile-goldenboot-pick-avatar-wrap {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(46, 125, 50, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mobile-goldenboot-pick-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-goldenboot-pick-initial {
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--gg-green-dark, #1b5e20);
  line-height: 1;
}

.mobile-goldenboot-pick-name {
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  line-height: 1.2;
  /* Single-line name on the chip. Long names wrap to a
   * new chip on the next line (the flex-wrap cluster does
   * this for us). Single-line keeps the chip height fixed
   * so the cluster has a clean rhythm. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

body.MAIN a.mobile-goldenboot-pick-link:active {
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 3px 10px 3px 3px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  /* Wipe any inherited clamp/box so the chip itself
   * doesn't try to behave like a card. */
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

.mobile-goldenboot-group > .mobile-goldenboot-picks {
  margin: 0;
  padding: 12px;
}


/* Teamstats picker — Daniel 2026-07-07 18:25
 *
 * Page-level header (green band, white text — mirrors
 * .standings-snapshot .snapshot-header at ~line 2638) and
 * per-tournament collapsible rows using native <details>.
 *
 * Native <details>/<summary> gives us keyboard accessibility,
 * screen-reader semantics, and zero JavaScript. Each row is
 * collapsed by default (no `open` attribute); tap/click on
 * the summary expands the row, showing the .menu-pill-grid
 * of team pills.
 */
.mobile-teamstats-picker {
  margin: 0;
  padding: 0;
}

.teamstats-picker-page-header {
  background: var(--gg-green);
  color: var(--gg-white);
  font-weight: bold;
  padding: var(--gg-space-sm) var(--gg-space-md);
  font-size: var(--gg-font-size-base);
  line-height: 1.4;
  margin: 0;
}

.teamstats-picker-tournament {
  background: var(--gg-white);
  border-bottom: 1px solid var(--gg-row-odd);
}

.teamstats-picker-tournament:first-of-type {
  border-top: 1px solid var(--gg-row-odd);
}

.teamstats-picker-tournament-summary {
  display: flex;
  align-items: center;
  gap: var(--gg-space-sm);
  padding: var(--gg-space-sm) var(--gg-space-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
  /* Remove the default <summary> disclosure triangle on
   * browsers that still show one. We render our own
   * chevron in the markup. */
  -webkit-appearance: none;
  appearance: none;
}

.teamstats-picker-tournament-summary::-webkit-details-marker {
  display: none;
}

.teamstats-picker-tournament-summary:focus-visible {
  outline: 2px solid var(--gg-green);
  outline-offset: -2px;
}

.teamstats-picker-tournament-title {
  flex: 1 1 auto;
  font-weight: bold;
  font-size: var(--gg-font-size-base);
  color: var(--gg-text);
}

.teamstats-picker-tournament-count {
  flex: 0 0 auto;
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted, #666);
  background: rgba(51, 153, 51, 0.08);
  padding: 2px 8px;
  border-radius: var(--gg-radius-md, 6px);
  font-variant-numeric: tabular-nums;
}

.teamstats-picker-tournament-chevron {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--gg-text-muted, #666);
  /* Rotate 90deg when the parent <details> is open, giving
   * a › → ⌄ feel without needing JS. The transition makes
   * the rotation smooth. */
  transform: rotate(0deg);
  transition: transform 120ms ease-out;
  width: 14px;
  text-align: center;
}

.teamstats-picker-tournament[open] > .teamstats-picker-tournament-summary
  .teamstats-picker-tournament-chevron {
  transform: rotate(90deg);
}

.teamstats-picker-tournament-body {
  padding: var(--gg-space-sm) var(--gg-space-md)
           var(--gg-space-md) var(--gg-space-md);
  border-top: 1px solid var(--gg-row-odd);
}

/* Teamstats picker — per-group sections (Daniel 2026-07-07 20:47)
 *
 * Within each expanded tournament <details>, teams are now
 * grouped by their tournament group (A, B, C...). Each group
 * renders as a small section with an h3 title + a per-group
 * count chip + the same .menu-pill-grid as the flat layout.
 * Visual rhythm matches the tournament-level summary line
 * (smaller weight, smaller font, lighter background).
 */
.teamstats-picker-group {
  padding: var(--gg-space-sm) 0;
  border-bottom: 1px solid var(--gg-row-odd);
}

.teamstats-picker-group:last-child {
  border-bottom: none;
}

.teamstats-picker-group-title {
  margin: 0;
  padding: var(--gg-space-xs, 4px) var(--gg-space-md);
  font-size: var(--gg-font-size-sm, 14px);
  font-weight: bold;
  color: var(--gg-text);
  background: rgba(51, 153, 51, 0.04);
  /* Match the .hall-card-header visual rhythm from mobile_halloffame.php */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.teamstats-picker-group-count {
  font-size: var(--gg-font-size-xs);
  color: var(--gg-text-muted, #666);
  background: rgba(51, 153, 51, 0.08);
  padding: 1px 6px;
  border-radius: var(--gg-radius-md, 6px);
  font-variant-numeric: tabular-nums;
  font-weight: normal;
}

.teamstats-picker-group .menu-pill-grid {
  padding: var(--gg-space-sm) var(--gg-space-md);
}

/* ============================================
   PROFILE DRAWER — Mitt Grillegrill
   Daniel 2026-07-08 00:58
   ============================================ */
.profile-drawer-content {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-md);
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-sm);
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: var(--gg-space-sm);
  margin: 0;
  padding: var(--gg-space-sm) var(--gg-space-md);
  background-color: rgba(51, 153, 51, 0.08);
  /* Mirrors .hall-card-header from mobile_halloffame.php */
  color: var(--gg-text);
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-base);
  font-weight: bold;
  border-left: 3px solid var(--gg-green);
  border-radius: 0 var(--gg-radius-md, 6px) var(--gg-radius-md, 6px) 0;
}

.profile-section-title-icon {
  font-size: var(--gg-font-size-lg, 18px);
  line-height: 1;
}

.profile-status {
  display: flex;
  flex-direction: column;
  gap: var(--gg-space-xs, 4px);
  padding: var(--gg-space-md);
  background-color: var(--gg-green);
  color: var(--gg-white);
  border-radius: var(--gg-radius-md, 6px);
}

.profile-username {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg, 18px);
  font-weight: bold;
}

.profile-status-detail,
.profile-status-detail:link,
.profile-status-detail:visited {
  color: var(--gg-white);
  text-decoration: none;
  font-size: var(--gg-font-size-sm, 14px);
  font-variant-numeric: tabular-nums;
}

.profile-status-detail:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   Profile-drawer Pos / Poäng pill — MOBILE ONLY.
   Daniel 2026-07-08 19:57 (image): 'Pos o poäng i denna.
   Gör det till en vit pill med den gröna färgen för fonten.'

   Converts .profile-status-detail from inline green-on-
   green link text to a white-background, green-outline,
   green-text pill centered within the status block.

   Scope: html body.MAIN .profile-drawer — same pattern
   as the menu-pill selectors above (mobile template
   only, .profile-drawer doesn't exist on desktop).

   Specificity (0,4,2) beats the catch-all 'html
   body.MAIN a' (0,3,1) which would otherwise force
   white text + 44px height + black color. Same battle
   as the menu-pill selector above. ═══════════════════════════════════════════════════ */
html body.MAIN .profile-drawer .profile-status-detail,
html body.MAIN .profile-drawer .profile-status-detail:link,
html body.MAIN .profile-drawer .profile-status-detail:visited {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-top: var(--gg-space-sm, 8px) !important;
  padding: 0 var(--gg-space-md, 14px) !important;
  height: 50px !important;
  line-height: 50px !important;
  background: #ffffff !important;
  color: var(--gg-green, #2e7d32) !important;
  border: 1.5px solid var(--gg-green, #2e7d32) !important;
  border-radius: var(--gg-radius-md, 8px) !important;
  font-size: var(--gg-font-size-base, 14px) !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums !important;
}

html body.MAIN .profile-drawer .profile-status-detail:hover {
  background: rgba(46, 125, 50, 0.04) !important;
  text-decoration: none !important;
}

html body.MAIN .profile-drawer .profile-status-detail:active {
  background: rgba(46, 125, 50, 0.08) !important;
}

.profile-status-sep {
  opacity: 0.7;
  padding: 0 var(--gg-space-xs, 4px);
}

.profile-bonus-games {
  /* bonuscard.php owns its own inner styling; this
     wrapper just gives the section consistent vertical
     rhythm with the rest of the drawer. */
  display: flex;
  flex-direction: column;
}

.profile-bonus-games .bonus-card-group {
  margin: 0;
  border: 1px solid var(--gg-row-odd);
  border-radius: var(--gg-radius-md, 6px);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   Profile-drawer bonus-card rows — MOBILE ONLY.
   Daniel 2026-07-08 19:21: 'kan vi snygga till detta?
   Bonusspelen i Inloggat läge Mitt Grillegrill'.
   19:22: 'För mobil bara. Lämna desktop orört.'
   Scope: everything below targets .profile-drawer
   which only exists in mobile mainview-mobile.php.
   Desktop mainview-desktop.php renders MAINTB with
   different markup — no .profile-drawer → no rules
   below can match. Verified by grep on 2026-07-08.

   The earlier .left-drawer td.TBLROW .bonus-card-row
   selectors (line ~3798) only target the LEFT drawer.
   Profile-drawer bonus-cards had no styling at all →
   default display:block, icons took the full row
   width (78px native) and stacked vertically with
   text centered below. Per-row height ~116px, total
   3 rows ~348px tall. Tidied to side-by-side (grid
   56px 1fr), per-row ~78px, total 232px (33% less). ═══════════════════════════════════════════════════ */

.profile-drawer .profile-bonus-games .bonus-card-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.profile-drawer .profile-bonus-games .bonus-card-row:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.profile-drawer .profile-bonus-games .bonus-card-row__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 125, 50, 0.08);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-drawer .profile-bonus-games .bonus-card-row__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.profile-drawer .profile-bonus-games .bonus-card-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-drawer .profile-bonus-games .bonus-card-row__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gg-text, #1f2937);
  margin: 0;
  line-height: 1.3;
}

.profile-drawer .profile-bonus-games .bonus-card-row__pick {
  font-size: 12px;
  color: var(--gg-text-muted, #6b7280);
  line-height: 1.3;
}

.profile-drawer .profile-bonus-games .bonus-card-row__pick-empty {
  color: #c0c4cc;
}

.profile-drawer .profile-bonus-games .bonus-card-row__pick-value {
  font-weight: 500;
}

.profile-drawer .profile-bonus-games .bonus-card-row--locked {
  opacity: 0.85;
}

.profile-drawer .profile-bonus-games .bonus-card-row--editable {
  background: rgba(46, 125, 50, 0.03);
}

.profile-drawer .profile-bonus-games .bonus-card-row--editable
  .bonus-card-row__title::before {
  content: "✎ ";
  color: rgba(46, 125, 50, 0.7);
  font-weight: 400;
}

/* Logout pill: subtle red accent so the destructive
   action is visible without being alarming. Daniel
   2026-07-08 00:58: Logout lives INSIDE the Konto
   section, grouped with profile management. */
.menu-pill--logout {
  color: #b22222;
}

.menu-pill--logout:link,
.menu-pill--logout:visited {
  color: #b22222;
}

/* ═══════════════════════════════════════════════════
   Profile-drawer menu pills — Mitt Grillegrill
   Daniel 2026-07-08 17:08 → 17:32. Iterated through
   4 prototypes (organic outline / 2-up equal-width /
   2-up with chevron / stacked full-width), landed on
   stacked full-width with dead-center text and no
   chevron. Each row is its own touch target; row
   itself signals affordance (full width, tinted
   outline, active scale). No text truncation.

   Specificity notes — the catch-all
     html body.MAIN a { height: 44px !important; ... }
     at line ~574 forces every anchor to 44px tall to
   satisfy WCAG 2.1 AA 44px touch targets. To get a
   50px tall pill we need a selector with !important
   that beats (0,1,3) in specificity. Selector below
   is body.MAIN .profile-drawer a.menu-pill at (0,3,2)
   — b column 3 > 1, wins regardless of source order.
   The plain .profile-drawer a.menu-pill (0,2,1) is
   not enough — verified empirically in prototype F.

   Centering: height == line-height == 50px ensures
   vertical center is mathematically exact (no
   half-leading drift). Padding is horizontal-only
   (0 vertical) because the content box itself provides
   vertical centering space.

   Active state uses scale(0.99) — small enough to
   feel responsive without being jittery on devices
   with sub-pixel animation.
   ═══════════════════════════════════════════════════ */

body.MAIN .profile-drawer .menu-pill-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  padding: 4px 12px 8px;
}

body.MAIN .profile-drawer a.menu-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: 50px !important;
  padding: 0 16px !important;
  background: #ffffff;
  border: 1.5px solid rgba(46, 125, 50, 0.45);
  border-radius: 10px;
  color: #1b5e20;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(46, 125, 50, 0.06);
  transition: background 0.12s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.MAIN .profile-drawer a.menu-pill:link,
body.MAIN .profile-drawer a.menu-pill:visited {
  color: #1b5e20 !important;   /* override body.MAIN a:link { color: var(--gg-black) !important } */
}

body.MAIN .profile-drawer a.menu-pill:hover {
  background: #f1f8e9;
}

body.MAIN .profile-drawer a.menu-pill:active {
  background: #dcedc8;
  transform: scale(0.99);
}

body.MAIN .profile-drawer a.menu-pill.menu-pill--logout,
body.MAIN .profile-drawer a.menu-pill.menu-pill--logout:link,
body.MAIN .profile-drawer a.menu-pill.menu-pill--logout:visited {
  color: #b22222 !important;   /* override body.MAIN a:link { color: var(--gg-black) !important } */
  border-color: rgba(178, 34, 34, 0.4);
}

body.MAIN .profile-drawer a.menu-pill.menu-pill--logout:active {
  background: #fbe9e9;
}

body.MAIN .profile-drawer .menu-pill--disabled {
  opacity: 0.5;
  pointer-events: none;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   LEFT DRAWER (☰ hamburger) — Daniel 2026-07-09 00:16:
   "Bild 1 visar hur delarna i hamburgarmenyn skall se ut (Bild 2)
   — Meny, Statistik o Fame & Shame skall ha bild 1's title stil
   och pills i bild 2 skall ha bild 1's fullbredds knappar med outline."

   Translation: the ☰ hamburger menu's three navigation sections
   (Meny / Statistik / Fame & Shame) should match the Mitt
   Grillegrill visual language — green-stripe section header
   (same treatment as .profile-section-title in the 👤 drawer) +
   stacked full-width 50px pill buttons with green outline (same
   treatment as profile-drawer .menu-pill).

   Scope: targets .left-drawer .menu-section only — the legacy
   LOGINHD rows (Grillegrilltid / Nästa match om: / Hemsida /
   [player]) keep their existing mobile styling because Daniel
   did not ask for those to change.

   Specificity math: same as profile-drawer pills — body.MAIN
   .left-drawer a.menu-pill at (0,3,2) beats the catch-all
   html body.MAIN a { height: 44px !important; ... } at (0,3,1).
   The two drawers share their parent (body.MAIN) but live in
   disjoint DOM subtrees (.left-drawer vs .profile-drawer), so
   the selectors cannot cross-fire.

   Classic guard: .left-drawer exists only in mainview-mobile.php
   (mobile template). mainview-desktop.php renders the legacy
   <td class="LEFTCOL"> instead, so these rules cannot match
   Classic markup. Regression test asserts ?view=classic shows
   no .left-drawer element at all.
   Daniel 2026-07-31: 'desktop' → 'classic' rename.

   The previous CSS (lines 4031-4075) used auto-sized 11px
   compact pills with flex-wrap so several pills fit per row.
   That gave a "list of labels" feel. The new treatment is
   "list of tappable rows" — every pill is its own touch
   target, no truncation, outline signals affordance.
   ════════════════════════════════════════════════════════════ */

body.MAIN .left-drawer .menu-section td.LOGINHD:not(.subhead) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: var(--gg-space-sm, 8px) var(--gg-space-md, 12px) !important;
  background-color: rgba(51, 153, 51, 0.08) !important;
  color: var(--gg-text, #1f2937) !important;
  font-size: var(--gg-font-size-base, 14px) !important;
  font-weight: bold !important;
  border-left: 3px solid var(--gg-green, #339933) !important;
  border-radius: 0 var(--gg-radius-md, 6px) var(--gg-radius-md, 6px) 0 !important;
  font-family: var(--gg-font) !important;
  /* Daniel 2026-07-09 09:00: top-level menu-section headers
     in the hamburger drawer match Mitt Grillegrill's section
     title treatment: light-green panel, green stripe, bold
     left-aligned text. The :not(.subhead) guard preserves the dark-green admin
     subhead treatment (Matchfunktioner / Användarfunktioner etc.
     on admin users, line 1864) which has its own visual identity
     and is asserted by tests/playwright/tests/pages.spec.js. */
}

body.MAIN .left-drawer .menu-section td.LOGINHD font.LOGINHD {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--gg-space-sm, 8px) !important;
}

body.MAIN .left-drawer .menu-section .menu-section-title-icon {
  font-size: var(--gg-font-size-lg, 18px) !important;
  line-height: 1 !important;
  font-weight: normal !important;
}

body.MAIN .left-drawer td.TBLROW .menu-pill-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px;
  padding: 0 !important;
  /* Daniel 01:34 left-align guard (regression test
     mobile-bonus-cards.spec.js:848): the pill row's first pill
     must start at the same x as the grid container, no centering
     offset. flex-direction:column + align-items:stretch makes the
     pill fill the full grid width without centering. The pill itself
     centers its own text internally (a.menu-pill { justify-content:center }).
     No horizontal padding on the grid container — the pills extend
     to the grid's own width which is bounded by the td.TBLROW's
     own padding (12px from .drawer-content on each side). */
}

body.MAIN .left-drawer td.TBLROW a.menu-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: 50px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(46, 125, 50, 0.45) !important;
  border-radius: 10px !important;
  color: #1b5e20 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(46, 125, 50, 0.06);
  transition: background 0.12s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

body.MAIN .left-drawer td.TBLROW a.menu-pill:link,
body.MAIN .left-drawer td.TBLROW a.menu-pill:visited {
  color: #1b5e20 !important;
}

body.MAIN .left-drawer td.TBLROW a.menu-pill:hover {
  background: #f1f8e9 !important;
}

body.MAIN .left-drawer td.TBLROW a.menu-pill:active {
  background: #dcedc8 !important;
  transform: scale(0.99);
}

body.MAIN .left-drawer td.TBLROW a.menu-pill.menu-pill--disabled {
  opacity: 0.5;
  pointer-events: none;
  font-style: italic;
}

body.MAIN .left-drawer td.TBLROW a.menu-pill.menu-pill--disabled {
  opacity: 0.5;
  pointer-events: none;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   Mitt Grillegrill login pill buttons (Daniel 2026-07-10 00:50)

   Daniel: "'Ny användare' och 'Glömt lösenord' förtjänar en
   riktigt knapp, den som är hela bredden med grön outline,
   den som vi använder o menyer."

   loginpanel.php renders inside #profileDrawer when $User
   is not logged in, so the .menu-pill-grid + a.menu-pill
   markup that wraps "Ny användare" / "Glömt lösenord"
   picks up the existing body.MAIN .profile-drawer
   .menu-pill-grid + body.MAIN .profile-drawer a.menu-pill
   rules above (lines ~7198-7255). No new CSS needed — the
   existing rules already give full-width + green outline +
   50px height + centered text. (We initially tried to add
   a duplicate block here but that created a `border !important`
   on the shorthand which clobbered the more-specific
   `.menu-pill--logout` border-color override — CI caught it.)

   Specificity ladder left-drawer uses the existing
   `.left-drawer td.TBLROW a.menu-pill` (0,3,3), and
   .profile-drawer uses `body.MAIN .profile-drawer
   a.menu-pill` (0,3,2). Both beat the catch-all
   `html body.MAIN a` reset.       ═══════════════════════════════════════════════════════════ */

/* Hamburger drawer logged-in status card — same visual language as
   the top card in Mitt Grillegrill, scoped to mobile's .left-drawer. */
body.MAIN .left-drawer table.menu-user-card {
  margin-bottom: var(--gg-space-md, 12px);
}

body.MAIN .left-drawer .left-drawer-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-space-xs, 4px);
  padding: var(--gg-space-md, 12px);
  background-color: var(--gg-green, #339933);
  color: var(--gg-white, #ffffff);
  border-radius: var(--gg-radius-md, 6px);
  box-sizing: border-box;
}

body.MAIN .left-drawer .left-drawer-username {
  font-family: var(--gg-font);
  font-size: var(--gg-font-size-lg, 18px);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

html body.MAIN .left-drawer .left-drawer-status-detail,
html body.MAIN .left-drawer .left-drawer-status-detail:link,
html body.MAIN .left-drawer .left-drawer-status-detail:visited {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-top: var(--gg-space-sm, 8px) !important;
  padding: 0 var(--gg-space-md, 14px) !important;
  height: 50px !important;
  line-height: 50px !important;
  background: #ffffff !important;
  color: var(--gg-green, #2e7d32) !important;
  border: 1.5px solid var(--gg-green, #2e7d32) !important;
  border-radius: var(--gg-radius-md, 8px) !important;
  font-size: var(--gg-font-size-base, 14px) !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.MAIN .left-drawer .left-drawer-status-detail:hover {
  background: rgba(46, 125, 50, 0.04) !important;
  text-decoration: none !important;
}

html body.MAIN .left-drawer .left-drawer-status-detail:active {
  background: rgba(46, 125, 50, 0.08) !important;
}

body.MAIN .left-drawer .left-drawer-status-detail--combined {
  margin-top: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   Match-predictions TBLHEAD full-width (Daniel 2026-07-09 13:18)

   Daniel: 'En fix av förra fixen är att width skall gå hela
   vägen såklart. Se bild, det gröna fältet med navigationen.'

   The legacy .MAINTB tr:not([class]) > td rule (line ~697-area
   mobile.css) forces display:block on every td inside an unclassed
   row of MAINTB. That makes TBLHEAD cells lose the table-cell
   width inheritance and shrink to fit content, leaving a white
   gap on the right of the green Tips / pill / match-header rows.

   Override here so the TBLHEAD inside matchpreds STANDTB tables
   reclaims table-cell display + fills the available column. */

/* Force the cell to be a real table-cell so it picks up
   table-layout:fixed + colspan=8 width. Don't set width:100%
   here — the STANDTB is already 100% of CENTERCOL, so 100%
   on the cell would make it overflow the table by ~16px and
   shift the centered prev/next pills right of the page center. */
body.MAIN table.STANDTB tr:not([class]) > td.TBLHEAD {
  display: table-cell !important;
  box-sizing: border-box !important;
}

body.MAIN table.STANDTB td.TBLHEAD {
  display: table-cell !important;
}

/* The prev/next pill row is centered via the flex `justify-content: center`
   rule above, so the cells don't drift to the right edge of the parent. */


/* Match the matchpreds STANDTB so the green Tips / pill / match-
   header rows really fill the available column. Without this,
   the first table's td overflows by ~18px and the second's td
   under-shoots by ~4px (border-spacing eating 2px on each side).
   Collapse border-spacing + force the table to 100% so both
   rows measure identically and reach the page edge. */
html body.MAIN table.STANDTB {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* ═══════════════════════════════════════════════════════════
   Match-predictions prev/next nav pills (Daniel 2026-07-09 11:52)
   ═══════════════════════════════════════════════════════════
   cmd=matchpreds renders a STANDTB header with two prev/next
   links that let the user page between rounds. The previous
   markup was white text on the dark-green TBLHEAD bar (looked
   like a plain text link, easy to miss). Upgraded to pill
   buttons matching the Mitt Grillegrill / hamburger-menu
   visual language: white bg, green outline, 50px tall.

   The current match header row keeps its TBLHEAD green style
   (it IS the "you are here" info). Only the prev/next row
   converts to pills.

   Daniel 2026-07-10 00:21: visual weight upgrade. Daniel sent a
   marked screenshot showing that the prev/next pills looked
   "too anonymous" in the context of the page — too small, too
   white, too quiet — and didn't read as navigation. The Mexiko
   2-3 England current-match card directly below is a solid
   green panel with white text, edge-to-edge. The pills should
   match that visual language so the user instantly reads them
   as the nav controls. Two changes:
     1. Solid green background + white text/arrows on the pills
        (was white bg + green outline + green text). Same green
        as the current-match card so they read as the same nav
        system.
     2. Edge-to-edge: the .mobile-goldenboot wrapper has a 12px
        margin that used to inset the pills. Use a matching
        negative margin so the pills bleed to the viewport edges.
        Same width as the current-match card right below them.
*/

body.MAIN table.STANDTB .match-nav-pill-row,
body.MAIN .mobile-goldenboot .match-nav-pill-row,
body.MAIN [data-cmd="matchpreds-picks"] > .match-nav-pill-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 6px !important;
  width: calc(100% + 2 * var(--gg-space-md)) !important;
  margin: 0 calc(-1 * var(--gg-space-md)) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.MAIN a.match-nav-pill,
html body.MAIN a.match-nav-pill:link,
html body.MAIN a.match-nav-pill:visited {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 48px !important;
  height: 52px !important;
  padding: 0 10px !important;
  background: var(--gg-green, #1b5e20) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--gg-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background 0.12s ease, transform 0.1s ease;
  overflow: hidden;
  cursor: pointer;
}

html body.MAIN a.match-nav-pill:hover {
  background: #2e7d32 !important;  /* lighter green for hover */
  text-decoration: none !important;
}

html body.MAIN a.match-nav-pill:active {
  background: #145418 !important;  /* darker green for tap */
  transform: scale(0.98);
}

body.MAIN .match-nav-pill-arrow {
  flex-shrink: 0;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.MAIN .match-nav-pill-teams {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body.MAIN .match-nav-pill--placeholder {
  flex: 1 1 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
  pointer-events: none;
  /* No visible content — just keeps the surviving pill in
     place so the flex row layout doesn't shift. */
}

/* Single-pill edge case: at the start or end of the season only
   one of prev/next exists, the placeholder keeps the surviving
   pill centred in the row. */
body.MAIN .match-nav-pill-row > a.match-nav-pill:only-of-type {
  flex: 1 1 50% !important;
  max-width: 50% !important;
}

/* Override the global a.PRED styling (white text on dark green)
   for our nav pills only — we want SOLID WHITE text on solid
   green bg, not the dark-green a.PRED colour. The specificity
   here is higher than the general a:link/a:visited rules. */
body.MAIN a.match-nav-pill,
body.MAIN a.match-nav-pill:hover,
body.MAIN a.match-nav-pill:link,
body.MAIN a.match-nav-pill:visited,
body.MAIN a.match-nav-pill:active {
  color: #ffffff !important;
}

/* Narrow viewports (< 360px): allow the team names to wrap so the
   pill stays short instead of running off-screen. */
@media (max-width: 359px) {
  body.MAIN .match-nav-pill-teams {
    font-size: 12px !important;
  }
  body.MAIN a.match-nav-pill {
    padding: 0 6px !important;
    gap: 4px !important;
  }
  body.MAIN [data-cmd="matchpreds-picks"] > .match-nav-pill-row {
    gap: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Match-predictions current-match card (Daniel 2026-07-09 15:46)
   ═══════════════════════════════════════════════════════════
   cmd=matchpreds lagda-tips view needs a clear "this is the
   match" header right above the search box so users know
   what they're looking at. Replaces the previous
   implementation that rendered the current match info as
   a nested STANDTB row which the browser hoisted to the
   bottom of the picks view (broken nested-table layout).

   Visual language matches the Mitt Grillegrill card
   style: green panel, white text, full-bleed on mobile
   so it lines up with the Tips / pill rows above. */
.mobile-matchpreds-current {
  background: var(--gg-green, #1b5e20);
  color: #ffffff;
  margin: 0 0 var(--gg-space-md) 0;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-family: var(--gg-font);
  text-align: center;
  line-height: 1.2;
}

.mobile-matchpreds-current-date {
  display: none;  /* Daniel 2026-07-09 15:46: keep the date out
                     of the card to keep the card compact. The
                     current match's own date is the date the
                     user is viewing in cmd=matchpreds, so it
                     is implied by the URL. Removing the row
                     saves ~16px and prevents the card from
                     being hidden behind the bottom tab bar
                     on small viewports. */
}

.mobile-matchpreds-current-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.mobile-matchpreds-current-team {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-matchpreds-current-team--home {
  text-align: right;
}

.mobile-matchpreds-current-team--away {
  text-align: left;
}

.mobile-matchpreds-current-score {
  flex: 0 0 auto;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 13px;
}

/* Daniel 2026-07-09 16:44: SPA-style fragment-loading hint.
   When the prev/next pill triggers a fetch we briefly dim the
   wrapper so the user perceives that something happened. The
   class is removed synchronously after the innerHTML swap so
   the visible flicker is at most a single paint. Kept minimal
   so fast fetches (~50ms on local) show no perceptible
   flash, but slow networks / cold caches give the user
   acknowledgement. */
body.MAIN .mobile-goldenboot--fragment-loading {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
}

/* Daniel 2026-07-09 16:44: fetch-error fallback. If the JS
   fetch fails the SPA nav falls back to full-page navigation
   automatically. We highlight the current pill briefly so the
   user sees that the click registered. The class is added by
   JS on click, removed on navigation start (or 800ms fallback). */
body.MAIN .match-nav-pill.is-tap-pending {
  opacity: 0.85;
}

/* ============================================
   MESSAGING (cmd=msgusers / cmd=msgs / cmd=createmsg)
   Daniel 2026-07-10: replaces the legacy <table class="MSGTB">
   layout for the messaging views. Three blocks:
     - .msguser  : pick-a-recipient page (pills + filter)
     - .msg-list : inbox / admin all-messages (cards)
     - .msg-form : compose form (grid, responsive)
   Each one respects container width and uses the green
   brand palette already in --gg-green/--gg-green-dark.
   ============================================ */

/* ---- Shared card surface ---- */
.msguser,
.msg-list,
.msg-form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--gg-space-md, 12px);
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  color: var(--gg-text, #222);
}

/* ============================================
   cmd=msgusers: pick a recipient
   ============================================ */
.msguser {
  display: block;
}

.msguser-header {
  background-color: var(--gg-green, #339933);
  color: #fff;
  font-weight: 700;
  font-size: var(--gg-font-size-md, 15px);
  padding: 12px 14px;
  border-radius: 10px 10px 0 0;
  letter-spacing: 0.01em;
}

.msguser-header-title {
  display: inline-block;
}

.msguser-search {
  position: relative;
  margin: 0 4px var(--gg-space-sm, 8px);
  display: flex;
  align-items: center;
  padding-top: var(--gg-space-xs, 4px);
}

.msguser-search-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.3;
  /* Daniel 2026-07-10 12:43: see .standtb-search-input above —
     right padding widened for visual parity with all search fields.
     Same !important rationale: input[type="search"] wins specificity
     on a vanilla .msguser-search-input class selector. */
  padding: 10px 56px 10px 36px !important;
  border-radius: 999px;
  border: 1px solid rgba(46, 125, 50, 0.25);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>")
    12px center / 16px 16px no-repeat;
  color: var(--gg-text, #222);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.msguser-search-input:focus {
  outline: none;
  border-color: var(--gg-green-dark, #2a7a2a);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.msguser-search-input::placeholder {
  color: var(--gg-text-muted, #888);
  font-weight: 400;
}

.msguser-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  color: var(--gg-text, #222);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msguser-search-clear:hover {
  background: rgba(0, 0, 0, 0.16);
}

.msguser-search-clear:active {
  background: var(--gg-green-dark, #2a7a2a);
  color: #fff;
}

.msguser-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 8px 4px var(--gg-space-sm, 8px);
}

.msguser-pill {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 10px !important;
  min-height: 36px !important;
  background: var(--gg-row-even, #fff);
  border: 1px solid rgba(46, 125, 50, 0.18);
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--gg-text, #222) !important;
  font-size: var(--gg-font-size-sm, 14px);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

html body.MAIN a.msguser-pill,
html body.MAIN a.msguser-pill:link,
html body.MAIN a.msguser-pill:visited,
html body.MAIN a.msguser-pill:hover,
html body.MAIN a.msguser-pill:active {
  display: flex !important;
  height: auto !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  font-size: var(--gg-font-size-sm, 14px) !important;
  line-height: 1.15 !important;
}

.msguser-pill[hidden] {
  display: none !important;
}

.msguser-pill:hover {
  background: rgba(46, 125, 50, 0.06);
  border-color: rgba(46, 125, 50, 0.4);
}

.msguser-pill:active {
  transform: scale(0.985);
  background: var(--gg-green-dark, #2a7a2a);
  border-color: var(--gg-green-dark, #2a7a2a);
  color: #fff !important;
}

.msguser-pill-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.msguser-pill-chevron {
  display: none;
}

.msguser-pill:active .msguser-pill-chevron {
  color: #fff;
}

.msguser-empty {
  font-style: italic;
  color: var(--gg-text-muted, #888);
  font-size: 13px;
  padding: 12px 14px;
  text-align: center;
}

/* ============================================
   cmd=msgs + cmd=viewallmsgs: inbox / admin list
   ============================================ */
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.msg-card {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  row-gap: 4px;
  padding: 10px 12px !important;
  background: var(--gg-row-even, #fff);
  border: 1px solid rgba(46, 125, 50, 0.18);
  border-radius: 10px;
  box-sizing: border-box;
  min-height: var(--gg-touch-min, 44px);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
  cursor: pointer;
}

.msg-card:hover {
  background: rgba(46, 125, 50, 0.06);
  border-color: rgba(46, 125, 50, 0.4);
}

.msg-card:active {
  transform: scale(0.99);
}

.msg-card--new {
  border-left: 4px solid var(--gg-green, #339933);
  background: #f1f9f3;
}

.msg-card-check {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.msg-card-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

.msg-card-from {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  font-size: var(--gg-font-size-md, 15px);
  color: var(--gg-text, #222);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-card-date {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  color: var(--gg-text-muted, #888);
  white-space: nowrap;
}

.msg-card-subject {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: var(--gg-font-size-base, 14px);
  color: var(--gg-text, #222);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-card-to {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--gg-text-muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-card-badge {
  position: absolute;
  /* Tucked via flex into the date area if needed; here as a
   * small inline badge at top-right. */
}

.msg-card-league {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gg-green-dark, #2a7a2a);
  margin-right: 4px;
}

.msg-list--admin .msg-card {
  grid-template-columns: 22px minmax(0, 1fr);
}

.msg-list--admin .msg-card-link {
  grid-template-columns: minmax(0, 1fr) auto;
}

.msg-list--admin .msg-card-from::before {
  content: "Från ";
  color: var(--gg-text-muted, #888);
  font-weight: 400;
}

.msg-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--gg-text-muted, #888);
  background: rgba(46, 125, 50, 0.04);
  border: 1px dashed rgba(46, 125, 50, 0.25);
  border-radius: 10px;
  text-align: center;
}

.msg-list-empty-icon {
  font-size: 32px;
  line-height: 1;
  opacity: 0.5;
}

.msg-list-empty-text {
  font-size: var(--gg-font-size-base, 14px);
}

.msg-list-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
}

.msg-list-delete {
  -webkit-appearance: none;
  appearance: none;
  background: var(--gg-green, #339933);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-base, 14px);
  font-weight: 700;
  padding: 10px 18px;
  min-height: var(--gg-touch-min, 44px);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}

.msg-list-delete:hover {
  background: var(--gg-green-dark, #2a7a2a);
}

.msg-list-delete:active {
  transform: scale(0.97);
}

/* ============================================
   cmd=createmsg: compose form

   Daniel 2026-07-10: labels are full-width green pills
   (white text, bold), inputs are minimal white boxes
   directly below each label, no enclosing card chrome.
   Mirrors the .msguser-header pill style.
   ============================================ */
.msg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  max-width: 640px;
  padding: 0 4px;
  box-sizing: border-box;
}

.msg-form-card {
  display: contents;
}

.msg-form-title {
  background: var(--gg-green, #339933);
  color: #fff;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-lg, 18px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.01em;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0;
  box-sizing: border-box;
}

.msg-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-form-label {
  background: var(--gg-green, #339933);
  color: #fff;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-lg, 18px);
  font-weight: 700;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 0;
  letter-spacing: 0.01em;
  box-sizing: border-box;
  display: block;
}

.msg-form-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

.msg-form-tgt {
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-md, 15px);
  font-weight: 500;
  color: var(--gg-text, #222);
}

.msg-form-input,
.msg-form-textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-md, 15px);
  line-height: 1.4;
  color: var(--gg-text, #222);
  background: #fff;
  border: 1px solid rgba(46, 125, 50, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.msg-form-input:focus,
.msg-form-textarea:focus {
  outline: none;
  border-color: var(--gg-green-dark, #2a7a2a);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.msg-form-textarea {
  min-height: 180px;
  resize: vertical;
  font-size: var(--gg-font-size-base, 14px);
  line-height: 1.45;
}

.msg-form-actions {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.msg-form-submit {
  -webkit-appearance: none;
  appearance: none;
  background: var(--gg-green, #339933);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: var(--gg-font-size-md, 15px);
  font-weight: 700;
  padding: 12px 28px;
  min-height: var(--gg-touch-min, 44px);
  min-width: 180px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}

.msg-form-submit:hover {
  background: var(--gg-green-dark, #2a7a2a);
}

.msg-form-submit:active {
  transform: scale(0.97);
}

/* Wider screens — single-column still works fine because
 * max-width caps it; nothing else needs to change. */
@media (min-width: 768px) {
  .msg-form {
    padding: 0;
  }
  .msguser-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
  }
  .msg-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .msg-list-actions {
    grid-column: 1 / -1;
  }
}

/* ============================================
   cmd=tournamentstand: mobile tournament groups

   Functional pass for Del 1. Desktop keeps the
   legacy STANDTB renderer; these selectors only
   target the mobile-specific markup.
   ============================================ */
.mobile-tournamentstand {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 4px 16px;
}

.mobile-tournamentstand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.mobile-tournament-group {
  background: #fff;
  border: 1px solid rgba(46, 125, 50, 0.18);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}

.mobile-tournament-group-header {
  background: var(--gg-green, #339933);
  color: #fff;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 6px 4px;
}

.mobile-tournament-group-table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed !important;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 8px;
  line-height: 1.08;
  overflow: hidden !important;
  word-wrap: normal !important;
  hyphens: none !important;
}

.mobile-tournament-group-table th,
.mobile-tournament-group-table td {
  box-sizing: border-box;
  padding: 3px 1px !important;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.08 !important;
}

.mobile-tournament-group-table th {
  background: rgba(46, 125, 50, 0.08);
  color: var(--gg-text-muted, #666);
  font-size: 8px;
  font-weight: 700;
  border-bottom: 1px solid rgba(46, 125, 50, 0.14);
}

.mobile-tournament-col-pos {
  width: 7%;
}

.mobile-tournament-col-team {
  width: 37%;
}

.mobile-tournament-col-stat {
  width: 7%;
}

.mobile-tournament-col-goals {
  width: 14%;
}

.mobile-tournament-col-points {
  width: 7%;
}

.mobile-tournament-group-table th:nth-child(2),
.mobile-tournament-group-table td:nth-child(2) {
  text-align: left;
}

.mobile-tournament-group-table tbody tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-tournament-team {
  min-width: 0;
  padding-left: 2px !important;
}

.mobile-tournament-team-link,
html body.MAIN a.mobile-tournament-team-link,
html body.MAIN a.mobile-tournament-team-link:link,
html body.MAIN a.mobile-tournament-team-link:visited,
html body.MAIN a.mobile-tournament-team-link:hover,
html body.MAIN a.mobile-tournament-team-link:active {
  display: flex !important;
  align-items: center;
  gap: 2px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.mobile-tournament-team-link span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.mobile-tournament-team-flag {
  flex: 0 0 auto;
  width: 10px;
  height: 7px;
  object-fit: cover;
  border-radius: 1px;
}

.mobile-tournament-stat,
.mobile-tournament-goals,
.mobile-tournament-points {
  font-variant-numeric: tabular-nums;
}

.mobile-tournament-goals,
.mobile-tournament-goals span {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.mobile-tournament-team-row.is-leader td {
  background: #ffff00;
  color: #000;
  font-weight: 400;
}

html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link,
html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link:link,
html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link:visited,
html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link:hover,
html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link:active,
html body.MAIN .mobile-tournament-team-row.is-leader a.mobile-tournament-team-link span {
  background-color: #ffff00 !important;
}

.mobile-tournament-team-row.is-best-third td {
  /* Daniel 2026-07-22 11:54: switched from --gg-green
   * (rgb 51,153,51) to the CSS named colour 'lawngreen'
   * (rgb 124,252,0) — a brighter, more vibrant lime-green
   * that reads clearly against the group-header plates
   * (which keep --gg-green) and the yellow POS1/POS2 rows.
   * Mobile-only — desktop ShowTournamentStandings() is
   * untouched. */
  background: lawngreen;
  /* Daniel 2026-07-22 12:39: text colour flipped from #fff
   * to #000. White on lawngreen has a contrast ratio of
   * ~1.5:1 (WCAG fail for body text, threshold is 4.5:1)
   * — the glyphs 'disappear' against the bright lime. Black
   * on lawngreen is ~10:1, well past the threshold. Should
   * have caught this in the original fix. */
  color: #000;
  font-weight: 400;
}

html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link,
html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link:link,
html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link:visited,
html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link:hover,
html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link:active,
html body.MAIN .mobile-tournament-team-row.is-best-third a.mobile-tournament-team-link span {
  background-color: lawngreen !important;
}

/* Daniel 2026-07-22 12:39: anchor text inside the lawngreen
 * row must also be black so the team name reads correctly.
 * Without this, the generic body.MAIN a color rule leaks
 * through (it inherits from the row's text colour which is
 * now #000 — so this is largely belt-and-braces — but it
 * makes the intent explicit and survives any future anchor
 * colour change). */
.mobile-tournament-team-row.is-best-third a,
.mobile-tournament-team-row.is-best-third a:link,
.mobile-tournament-team-row.is-best-third a:visited,
.mobile-tournament-team-row.is-best-third a:hover,
.mobile-tournament-team-row.is-best-third a:active,
.mobile-tournament-team-row.is-best-third a span,
.mobile-tournament-team-row.is-best-third strong {
  color: #000;
}

/* Daniel 2026-07-22 12:39: position 3 and 4 teams that did
 * NOT qualify as best-third get red text on the default
 * white background. These are the rows carrying
 * .mobile-tournament-team-row WITHOUT .is-leader and
 * WITHOUT .is-best-third (the two qualifier classes).
 * Red is a clear visual signal: out of the tournament.
 * Matches the design language of the desktop POS10TH rule
 * (var(--gg-red), see common.css). The target selector
 * is scoped to .mobile-tournament-group so the rule
 * cannot leak to other tables on the page. */
.mobile-tournament-group .mobile-tournament-team-row:not(.is-leader):not(.is-best-third) td,
.mobile-tournament-group .mobile-tournament-team-row:not(.is-leader):not(.is-best-third) a,
.mobile-tournament-group .mobile-tournament-team-row:not(.is-leader):not(.is-best-third) a span {
  color: var(--gg-red, #cc0000);
}

.mobile-tournamentstand-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  font-family: var(--gg-font, Tahoma, Verdana, Arial, sans-serif);
  font-size: 11px;
  color: var(--gg-text-muted, #666);
}

.mobile-tournamentstand-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46, 125, 50, 0.06);
  border: 1px solid rgba(46, 125, 50, 0.12);
  border-radius: 999px;
  padding: 4px 8px;
}

.mobile-tournamentstand-legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.mobile-tournamentstand-legend-leader::before {
  background: #ffff00;
}

.mobile-tournamentstand-legend-third::before {
  /* Daniel 2026-07-22 11:54: matches the lawngreen highlight
   * on the best-third-place rows above. */
  background: lawngreen;
}

/* ── Knockout / playoff rounds (flat 2-per-row grid) ──────── */
/* Daniel 2026-07-11 20:33: mirror desktop structure on mobile.
   2 matches per row within a round; Bronze and Final get a full
   row each on their own. */

.mobile-knockouts {
  margin-top: var(--gg-space-lg, 20px);
  padding: 0;
}

.mobile-knockout-round + .mobile-knockout-round {
  margin-top: var(--gg-space-lg, 20px);
}

.mobile-knockout-round-header {
  background: var(--gg-green, #339933);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  letter-spacing: 0.01em;
}

.mobile-knockout-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--gg-card-bg, #ffffff);
  border: 1px solid var(--gg-border, #e5e7eb);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.mobile-knockout-match {
  min-width: 0;
}

.mobile-knockout-matches-solo {
  grid-template-columns: 1fr;
}

/* Each match is a 3-row vertical card.
   Row 1: [flag] Home team name (right-aligned to column edge)
   Row 2: [flag] Away team name (left-aligned)
   Row 3: Date centered, scores in a separate panel on the right side */
.mobile-knockout-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 4px;
  row-gap: 1px;
  padding: 5px 6px 3px;
  border-bottom: 1px solid var(--gg-border, #e5e7eb);
  font-size: 0.78rem;
  background: var(--gg-card-bg, #ffffff);
  min-width: 0;
  overflow: hidden;
}

.mobile-knockout-team-home {
  grid-column: 1;
  grid-row: 1;
}

.mobile-knockout-team-away {
  grid-column: 1;
  grid-row: 2;
}

.mobile-knockout-scores {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mobile-knockout-score-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 22px;
}

.mobile-knockout-date {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.65rem;
  color: var(--gg-text-muted, #9ca3af);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1.1;
  margin-top: 1px;
}

.mobile-knockout-match:nth-child(2n) {
  border-left: 1px solid var(--gg-border, #e5e7eb);
}

/* Odd matches in the left column, even in the right column. */
.mobile-knockout-matches > .mobile-knockout-match:nth-child(odd) {
  border-right: 1px solid var(--gg-border, #e5e7eb);
}

.mobile-knockout-matches-solo > .mobile-knockout-match {
  border-right: 0;
}

/* Drop the border between two matches in the last row when odd-count. */
.mobile-knockout-matches > .mobile-knockout-match:last-child {
  border-bottom: 0;
}

.mobile-knockout-team-row {
  min-width: 0;
  display: flex;
  align-items: center;
}

.mobile-knockout-team-home { justify-content: flex-end; }
.mobile-knockout-team-away { justify-content: flex-start; }

.mobile-knockout-team-row a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* Home team: flag on the LEFT of the team name so all flags share the
   same vertical alignment; the team name sits next to the scores via
   row-reverse + flex-end on the row.
   Use html body.MAIN chain to beat the global tap-target rule. */
html body.MAIN .mobile-knockout-team-row a {
  display: flex !important;
  width: 100% !important;
}
html body.MAIN .mobile-knockout-team-home a {
  justify-content: flex-end !important;
}

.mobile-knockout-team-row span {
  font-weight: 600;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.mobile-knockout-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 1px;
  flex-shrink: 0;
}

.mobile-knockout-score {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gg-text, #111827);
  text-align: center;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
}

.mobile-knockout-match.is-scheduled .mobile-knockout-score {
  color: var(--gg-text-muted, #9ca3af);
  font-weight: 400;
}

.mobile-knockout-vs {
  color: var(--gg-text-muted, #9ca3af);
  font-size: 0.7rem;
  text-align: center;
  padding: 0 2px;
}

.mobile-knockout-vs-spacer {
  visibility: hidden;
}

/* Penalty score — sits directly under the main score, same column. */
.mobile-knockout-pen {
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--gg-text-muted, #6b7280);
  text-align: center;
  letter-spacing: 0.01em;
}

.mobile-knockout-match.is-played {
  background: var(--gg-card-bg, #ffffff);
}

.mobile-knockout-match.is-scheduled {
  background: #fafafa;
}

@media (max-width: 360px) {
  .mobile-knockout-match {
    column-gap: 3px;
    padding: 4px 5px 3px;
    font-size: 0.7rem;
  }
  .mobile-knockout-team-row span { font-size: 0.7rem; }
  .mobile-knockout-flag { width: 16px; height: 11px; }
}

/* ============================================================
   PROFILE PAGE (cmd=profile) — Daniel 2026-07-12 02:19
   Redesign the legacy STANDTB-tables on profileview.php into a
   modern card stack. Wrapped in <div class="profile-view">.

   Six form blocks: profile, joined-leagues, upload icon, upload
   boot icon, change password, delete account. Each gets its own
   card with a green top border (style B header pattern), rounded
   corners, and a soft shadow. Inside each card, every row is a
   full-width block; labels sit on top, value/inputs below.
   ============================================================ */

body.MAIN .profile-view {
  padding: var(--gg-space-sm);
  background: var(--gg-bg);
  min-height: 100vh;
}

/* Each <form> is a card */
body.MAIN .profile-view form {
  display: block !important;
  width: 100% !important;
  background: var(--gg-white);
  border-radius: 8px;
  margin-bottom: var(--gg-space-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border-top: 4px solid var(--gg-green);
}

/* The STANDTB table itself becomes an invisible layout shell */
body.MAIN .profile-view table.STANDTB {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border-collapse: separate;
  border-spacing: 0;
}

body.MAIN .profile-view table.STANDTB > tbody {
  display: block !important;
  width: 100% !important;
}

body.MAIN .profile-view table.STANDTB tr {
  display: block !important;
  padding: var(--gg-space-sm) var(--gg-space-md);
  border-bottom: 1px solid #f3f4f6;
}

body.MAIN .profile-view table.STANDTB tr:last-child {
  border-bottom: none;
  background: #fafafa;
}

/* Cells stack vertically with full width. Override the global
   tap-target rule for inputs inside the profile — they're not
   navigation links, they're form fields. */
body.MAIN .profile-view td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-align: left !important;
}

body.MAIN .profile-view td[colspan] {
  display: block !important;
  width: 100% !important;
}

/* Each TBLROW cell with a label on top: the first <br>-separated
   text inside becomes the label, the input becomes the value.
   For the first row of the profile form (User_Name / Email /
   Bonuses / Language) the labels come from <font class="TBLHEAD">
   sibling rows above — those are the actual card section headers. */
body.MAIN .profile-view td.TBLROW {
  margin-bottom: var(--gg-space-sm);
}
body.MAIN .profile-view td.TBLROW:last-child {
  margin-bottom: 0;
}

/* The TBLHEAD row right above a TBLROW acts as the field label.
   But TBLHEAD cells in the profile page are stacked: 4 across in
   one <tr>, then 4 input cells below. So we wrap them as inline
   labels. For single-cell TBLHEAD (colspans), we make it the card
   section header. */
body.MAIN .profile-view td.TBLHEAD {
  font-size: 0 !important;   /* hide the actual TBLHEAD text */
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Card section header: TBLHEAD row with colspan=4 spans full width
   and contains a section title. Show that. */
body.MAIN .profile-view td.TBLHEAD[colspan],
body.MAIN .profile-view td.TBLHEAD:not([colspan=""]) {
  font-size: 13px !important;
  height: auto !important;
  padding: var(--gg-space-sm) var(--gg-space-md) !important;
  background: #f8faf9 !important;
  color: var(--gg-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--gg-green) !important;
  margin-bottom: var(--gg-space-sm) !important;
}

/* font.TBLHEAD: just inherit the styling from td.TBLHEAD */
body.MAIN .profile-view font.TBLHEAD {
  font-size: inherit !important;
  color: inherit !important;
  font-family: var(--gg-font) !important;
  font-weight: inherit !important;
}

/* font.TBLROW: regular form text */
body.MAIN .profile-view font.TBLROW {
  font-size: var(--gg-font-size-base) !important;
  color: var(--gg-text) !important;
  font-family: var(--gg-font) !important;
  display: block;
  line-height: 1.4;
}

/* Form inputs: full width, large touch target, modern border */
body.MAIN .profile-view input[type="text"],
body.MAIN .profile-view input[type="password"],
body.MAIN .profile-view input[type="email"],
body.MAIN .profile-view input[type="file"],
body.MAIN .profile-view select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  margin: 4px 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: var(--gg-font-size-base) !important;
  font-family: var(--gg-font) !important;
  background: var(--gg-white) !important;
  color: var(--gg-text) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

body.MAIN .profile-view input[type="text"]:focus,
body.MAIN .profile-view input[type="password"]:focus,
body.MAIN .profile-view input[type="email"]:focus,
body.MAIN .profile-view select:focus {
  outline: none !important;
  border-color: var(--gg-green) !important;
  box-shadow: 0 0 0 3px rgba(51, 153, 51, 0.15) !important;
}

/* size="2" inputs (default-score entry) should be small inline */
body.MAIN .profile-view input[size="2"] {
  width: 60px !important;
  display: inline-block !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  text-align: center;
}

/* Icons row (TBLROW with images): center them */
body.MAIN .profile-view td.TBLROW img {
  display: inline-block;
  vertical-align: middle;
  margin: 4px;
  max-width: 64px;
  max-height: 64px;
}

/* Checkboxes: bigger touch target, label inline */
body.MAIN .profile-view input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  margin-right: var(--gg-space-sm) !important;
  vertical-align: middle;
  accent-color: var(--gg-green);
}

body.MAIN .profile-view td.TBLROW label,
body.MAIN .profile-view td.TBLROW:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center;
  padding: var(--gg-space-xs) 0 !important;
  font-size: var(--gg-font-size-sm) !important;
}

/* Submit buttons: large green pill, full width */
body.MAIN .profile-view input[type="submit"],
body.MAIN .profile-view input.submit {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
  margin: 0 !important;
  background: var(--gg-green) !important;
  color: var(--gg-white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: var(--gg-font-size-base) !important;
  font-weight: 700 !important;
  font-family: var(--gg-font) !important;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

body.MAIN .profile-view input[type="submit"]:active {
  background: var(--gg-green-dark) !important;
}

/* Hide the redundant <br> tags inside TBLROW that were used for
   label/value separation on desktop */
body.MAIN .profile-view td.TBLROW br {
  display: block;
  content: "";
  margin: 0;
}

/* Profile form specific: Firstname / Lastname / Phone / DOB cells
   each have a label inside a <br>-separated font. Make those labels
   small uppercase gray. */
body.MAIN .profile-view td.TBLROW:has(input[size="10"]) font.TBLROW,
body.MAIN .profile-view td.TBLROW:has(input[size="15"]) font.TBLROW,
body.MAIN .profile-view td.TBLROW:has(input[size="20"]) font.TBLROW {
  font-size: 11px !important;
  color: var(--gg-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 2px;
  display: block;
}

/* Address/city/country (colspan=4 rows): same treatment */
body.MAIN .profile-view td[colspan="4"].TBLROW font.TBLROW {
  font-size: 11px !important;
  color: var(--gg-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ShowLidsForUser uses table.CENTER, not STANDTB */
body.MAIN .profile-view table.CENTER {
  display: block !important;
  width: 100% !important;
  background: var(--gg-white);
  border-radius: 8px;
  margin-bottom: var(--gg-space-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  border-top: 4px solid var(--gg-green);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

body.MAIN .profile-view table.CENTER > tbody {
  display: block !important;
  width: 100% !important;
}

body.MAIN .profile-view table.CENTER td.TBLHEAD {
  display: block !important;
  width: 100% !important;
  padding: var(--gg-space-sm) var(--gg-space-md) !important;
  background: #f8faf9 !important;
  color: var(--gg-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--gg-green) !important;
  text-align: left !important;
}

body.MAIN .profile-view table.CENTER tr {
  display: block !important;
  padding: var(--gg-space-sm) var(--gg-space-md);
  border-bottom: 1px solid #f3f4f6;
}

body.MAIN .profile-view table.CENTER tr:last-child {
  border-bottom: none;
}

body.MAIN .profile-view table.CENTER td.TBLROW {
  display: flex !important;
  align-items: center;
  gap: var(--gg-space-sm);
  font-size: var(--gg-font-size-sm) !important;
  color: var(--gg-text) !important;
  font-family: var(--gg-font) !important;
  padding: 0 !important;
}

body.MAIN .profile-view table.CENTER td.TBLROW input[type="checkbox"] {
  flex-shrink: 0;
}

/* Joined leagues wrap each league name + checkbox pair inline */
body.MAIN .profile-view table.CENTER td.TBLROW font.TBLROW {
  display: inline !important;
  font-size: inherit !important;
}

/* Default-score entry (DEFHOME / DEFAWAY): center the row */
body.MAIN .profile-view td[colspan="4"].TBLROW:has(input[name="DEFHOME"]) {
  text-align: center !important;
  padding: var(--gg-space-sm) var(--gg-space-md) !important;
}

body.MAIN .profile-view td[colspan="4"].TBLROW:has(input[name="DEFHOME"]) font.TBLROW {
  font-size: var(--gg-font-size-base) !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gg-text) !important;
  font-weight: 600;
}

/* Misc Profile checkboxes: stack nicely */
body.MAIN .profile-view td[colspan="4"].TBLROW {
  padding: 0 !important;
}

/* Address line: street + addnum side by side on wider screens,
   stacked on narrow phones */
body.MAIN .profile-view td[colspan="4"].TBLROW > font > div[style*="float:left"] {
  display: block !important;
  float: none !important;
  width: 100% !important;
  font-size: 11px;
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

body.MAIN .profile-view td[colspan="4"].TBLROW > font > div[style*="float:right"] {
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 11px;
  color: var(--gg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

body.MAIN .profile-view td[colspan="4"].TBLROW input[name="ADDSTREET"] {
  width: 65% !important;
  display: inline-block !important;
}

body.MAIN .profile-view td[colspan="4"].TBLROW input[name="ADDNUM"] {
  width: 32% !important;
  display: inline-block !important;
  margin-left: 2% !important;
}

@media (min-width: 480px) {
  body.MAIN .profile-view td[colspan="4"].TBLROW input[name="ADDSTREET"] {
    width: 70% !important;
  }
  body.MAIN .profile-view td[colspan="4"].TBLROW input[name="ADDNUM"] {
    width: 26% !important;
  }
}

/* ============================================================
   Password change form (form.pwform) — mobile-only restack.
   The 3-column header row (Old / New / Repeat) is hidden on
   mobile because the column labels were wrapping to 3 lines on
   narrow viewports ("En gång till" → "En / gång / till").
   Each input gets its own <label class="pwform-celllabel"> as
   the field title at the outer top-left of its box. Daniel
   2026-07-12. Desktop is untouched — mobile.css is loaded
   under max-width 1024px only (mainview-mobile.php:70), and
   no rule below touches the legacy <table class="STANDTB">
   column layout for screens above the breakpoint. */
body.MAIN .profile-view form.pwform table.STANDTB tr.pwform-colhdr {
  display: none !important;
}
body.MAIN .profile-view form.pwform .pwform-celllabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gg-text-muted, #666);
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  /* Outer top-left of each input box. */
}
body.MAIN .profile-view form.pwform input[type="password"] {
  margin-top: 0 !important;
}

/* ----------------------------------------------------------------------
 * Stats drawer: collapsible Lag Stats (mobile only, right drawer)
 * ----------------------------------------------------------------------
 * Daniel 2026-07-13 22:57: "Mobilversionen, desktop skall inte
 * röras." Matchstatistik, Klara-listan, Omgångens Grillegrill and
 * Vinnare & förlorare stay always visible in the right drawer. Only
 * Lag Stats (32 rows) is wrapped in <details> collapsed by default —
 * the user opens it with one tap. <details>/<summary> is the same
 * native pattern used by teamstats-filter-details and the tournament
 * picker in mobile_teamstats.php, so we keep one a11y primitive for
 * the whole app. The CSS lives ONLY in mobile.css (max-width 1024px
 * media query wrapper around the file), so desktop is unaffected. */
.right-drawer .stats-collapse {
  margin: 8px 0;
}
.right-drawer .stats-collapse-summary {
  /* Match the TBLHEAD green bar style used by the four always-
   * visible sections in this drawer so the collapsed Lag Stats
   * doesn't visually stand out as a different component. */
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  background-color: var(--gg-green, #339933);
  color: #fff;
  font-weight: 700;
  font-size: var(--gg-font-size-sm, 14px);
  font-family: var(--gg-font, tahoma, verdana, arial);
  border-radius: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
  /* Stay visually identical whether collapsed or expanded: the
   * summary IS the section header, not a separate toggle. */
  transition: background-color 120ms ease;
}
.right-drawer .stats-collapse-summary:hover,
.right-drawer .stats-collapse-summary:focus-visible {
  background-color: #2d8a2d;
  outline: none;
}
.right-drawer .stats-collapse-summary::-webkit-details-marker {
  display: none;
}
.right-drawer .stats-collapse-summary::marker {
  display: none;
  content: "";
}
.right-drawer .stats-collapse-caret {
  /* CSS-drawn caret so we control the open/closed rotation. */
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(0deg);
  transition: transform 180ms ease;
  flex-shrink: 0;
  /* Optical centering: nudge the triangle down 1px so it lines
   * up with the text baseline at 14px. */
  margin-top: 1px;
}
.right-drawer .stats-collapse[open] > .stats-collapse-summary {
  background-color: #2d8a2d;
}
.right-drawer .stats-collapse[open] > .stats-collapse-summary .stats-collapse-caret {
  transform: rotate(90deg);
}
.right-drawer .stats-collapse-title {
  flex: 1 1 auto;
  min-width: 0;
}
.right-drawer .stats-collapse-meta {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
}
.right-drawer .stats-collapse-body {
  /* Subtle reveal animation. The body itself contains the
   * legacy <table class='RIGHT'> produced by ShowTeamPercentages,
   * so we don't restyle the table cells here — we only wrap and
   * hide it. */
  overflow: hidden;
  background-color: var(--gg-bg, #fff);
}
.right-drawer .stats-collapse[open] > .stats-collapse-body {
  animation: stats-collapse-reveal 180ms ease-out;
}
@keyframes stats-collapse-reveal {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ShowTeamPercentages emits a <tr><td class='TBLHEAD'><font
 * class='TBLHEAD'>Lag Stats</font></td><td class='TBLHEAD'>V</td>
 * <td class='TBLHEAD'>O</td><td class='TBLHEAD'>F</td></tr> as the
 * first row of table.RIGHT. That row IS the section header on
 * desktop (and on mobile now too — we removed the <details>
 * wrapper on Daniel 2026-07-14 00:41 because it hid this row in
 * favor of an invented outer summary bar). Style it as a green
 * bar consistent with the other section title rows in this
 * drawer (Tipparstatistik, Omgångens Grillegrill, Vinnare &
 * förlorare). */
.right-drawer table.RIGHT > tbody:first-child > tr:first-child,
.right-drawer table.RIGHT > tr:first-child {
  background-color: var(--gg-green, #339933);
}
.right-drawer table.RIGHT > tbody:first-child > tr:first-child td.TBLHEAD,
.right-drawer table.RIGHT > tr:first-child td.TBLHEAD {
  background-color: var(--gg-green, #339933);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 8px 6px;
}
.right-drawer table.RIGHT > tbody:first-child > tr:first-child td.TBLHEAD font,
.right-drawer table.RIGHT > tr:first-child td.TBLHEAD font {
  color: #fff !important;
  font-weight: 700 !important;
}
/* V / O / F column labels in the header should sit at the right
 * edge of their narrow columns (Daniel 2026-07-14 00:55). */
.right-drawer table.RIGHT > tbody:first-child > tr:first-child td.TBLHEAD:nth-child(n+2),
.right-drawer table.RIGHT > tr:first-child td.TBLHEAD:nth-child(n+2) {
  text-align: right !important;
  width: 36px !important;
  min-width: 36px;
  max-width: 36px;
  padding-left: 0 !important;
  padding-right: 4px !important;
}
@media (prefers-reduced-motion: reduce) {
  .right-drawer .stats-collapse[open] > .stats-collapse-body {
    animation: none;
  }
  .right-drawer .stats-collapse-caret {
    transition: none;
  }
}

/* ----------------------------------------------------------------------
 * Mobile Statistik Drawer — pure CSS styling of the existing PHP
 * function output. No PHP changes.
 * ----------------------------------------------------------------------
 * Daniel 2026-07-13 23:59 + 2026-07-14 00:32: "Respektera
 * implementation o utseende från Desktopversionen för nu. Datan
 * finns, funktionerna finns, du ska vara styla för mobilversionen."
 *
 * Sources (untouched, desktop uses same):
 *   - ShowPredictionStatsForNextMatch()  → table#STATSTAB (server-side)
 *   - prize.php                          → font.TBLROW with <b> + nested table
 *   - ShowWeeklyWinners($week)           → table#WWTAB
 *   - ShowUpsAndDowns($week)             → table#WWTAB (same id, same shape,
 *                                          differentiated by content classes
 *                                          UADUP / UADDOWN)
 *   - ShowTeamPercentages('RIGHT')       → wrapped in <details> from PR #151
 *
 * Scope: .right-drawer only, loaded under max-width:1023px so
 * desktop is provably unaffected.
 * ---------------------------------------------------------------------- */

/* ============ Shared section reset ============ */
.right-drawer > .drawer-content > table,
/* Daniel 2026-07-14 01:27: table#STATSTAB is now also rendered at
   the top of the Match view (cmd=livematch), not only in the
   Statistik drawer. Drop the .right-drawer prefix so the same
   styles apply in both contexts. mobile.css is loaded with
   media="screen and (max-width: 1023px)", and the desktop right
   column that also renders this table is hidden on mobile via
   .desktop-only — so generalizing is safe. */
table#STATSTAB,
.right-drawer table#WWTAB {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

/* Remove default browser styling on the drawer's nested tables that
   prize.php emits with inline width="150" etc. */
.right-drawer table[width] {
  width: 100% !important;
}

/* ============ 1. Tipparstatistik (table#STATSTAB) ============ */

/* Row 1: the green title bar (Tipparstatistik + prev/next/match) */
table#STATSTAB > tr:first-child > td {
  background: #339933;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 700;
  border: 0;
  overflow-wrap: break-word;
}
table#STATSTAB > tr:first-child font {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
table#STATSTAB > tr:first-child a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  opacity: 0.95;
}
table#STATSTAB > tr:first-child br + a {
  display: inline-block;
  margin-top: 4px;
}
table#STATSTAB > tr:first-child #A_FIXT_TEXT {
  font-size: 13px;
  font-weight: 700;
  display: inline;
}

/* Data rows: score | percentbar | bonus */
table#STATSTAB > tbody > tr,
table#STATSTAB > tr {
  border-bottom: 1px solid #eee;
}
table#STATSTAB tbody tr:nth-child(odd) > td,
table#STATSTAB > tr:nth-child(odd) > td {
  background: #fff;
}
table#STATSTAB tbody tr:nth-child(even) > td,
table#STATSTAB > tr:nth-child(even) > td {
  background: #fafafa;
}
/* Duplicate STATSTAB td/pts rules removed — see high-specificity block at end of file. */

/* [INFO] row (last row in STATSTAB, the colspan=3 callout) */
table#STATSTAB tr:last-child td {
  background: #fff5e6;
  border-top: 1px solid #ffd966;
  border-bottom: 0;
  padding: 12px 20px;
  font-size: 11px;
  color: #333;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
}
table#STATSTAB tr:last-child font {
  font-size: 11px;
  color: #333;
}

/* ============ 2. Klara för Dellos (prize.php) ============ */

/* The prize outer table — drop padding/cellspacing, let it fill */
.right-drawer table[border="0"][cellpadding="1"] {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}

/* The Klara/swisha's single <font class="TBLROW"> contains BOTH the
   gold title and the swisha note. We can't split it server-side, but
   we CAN style the <b> as a block (gold bar) and let the swisha text
   flow below as an italic note. This rule is scoped to the right
   drawer and only matches font elements that have a direct <b> child.
   Background is transparent so the gold td shows through — the
   previous #fffae6 cream background created a visible cream band
   between the title and the swisha note (Daniel 2026-07-14 01:12). */
.right-drawer font.TBLROW:has(> b) {
  display: block;
  background: transparent;
  font-size: 11px;
  font-style: italic;
  color: #333;
  line-height: 1.45;
  padding: 0;
  /* Allow long words to break inside the swisha note and the
   * [INFO] row in Tipparstatistik — the previous nowrap rule
   * inherited from the global font.TBLROW selector clipped
   * these notes against the right edge of the drawer. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}
.right-drawer font.TBLROW:has(> b) > b {
  /* Daniel 2026-07-15 11:23: 'snygga till rubriken. Den ser
     obalanserad ut.' Earlier this rule made <b> display:block +
     yellow background + 14px/20px padding, which turned the
     'Klara för Dellos ... (NN)' title into a fat yellow button-
     shaped bar. With display:block, the broken </br> in prize.php
     text forced '(NN)' onto its own line, leaving '(NN)' as a
     visually orphaned second row. Now <b> stays inline (so the
     whole title + count wraps as one phrase), the redundant
     yellow background is dropped (the td already has bgcolor=GOLD),
     and the padding is trimmed so the title sits with the swisha
     note below it as a single balanced block. */
  display: inline;
  background: transparent;
  color: #1a1a1a;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  margin: 0;
  overflow-wrap: break-word;
}

/* The names scroll list — prize.php uses an inline style div */
.right-drawer div[style*="overflow-y: scroll"] {
  /* The 200px max-height and overflow-y: scroll come from inline style;
     we only add padding + typography here. */
  padding: 10px 20px;
  font-size: 12px;
  line-height: 1.75;
  color: #000;
  background: #fff;
  overflow-wrap: break-word;
}
.right-drawer div[style*="overflow-y: scroll"] a {
  text-decoration: none;
  color: #000;
}
/* Red first-per-letter highlighting — class is added by mobile.js */
.right-drawer div[style*="overflow-y: scroll"] a.name-first {
  color: #cb3d14;
  font-weight: 700;
}

/* ============ 3 & 4. Weekly Winners + UpsAndDowns (table#WWTAB) ============
 * Both functions emit <table id="WWTAB" class="PREDTB">. They share the
 * same shape: row 1 = green title bar (colspan=2), row 2 = column
 * headers (HIDE on mobile), row 3+ = data rows.
 *
 * UpsAndDowns data cells use UADUP (winners/up) and UADDOWN (losers/
 * down) classes — these are the only signal we have to differentiate
 * from Weekly Winners data (TBLROW / TBLROWODD). */

/* Row 1: green title bar */
.right-drawer table#WWTAB > tbody > tr:first-child > td,
.right-drawer table#WWTAB > tr:first-child > td {
  background: #339933;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-weight: 700;
  border: 0;
  overflow-wrap: break-word;
}
.right-drawer table#WWTAB > tbody > tr:first-child font,
.right-drawer table#WWTAB > tr:first-child font {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.right-drawer table#WWTAB > tbody > tr:first-child a,
.right-drawer table#WWTAB > tr:first-child a {
  color: #fff;
  text-decoration: none;
}

/* Row 2: column headers — HIDE on mobile per Daniel 2026-07-13 23:59.
   But ONLY for tables that emit a column-header row. ShowUpsAndDowns
   does not — its second <tr> is the FIRST data row (e.g. GoGunners
   +30), not 'Användarnamn/P'. The bug: this rule was collapsing the
   entire first data row to height 0 on mobile, so the Vinnare &
   förlorare section only ever showed 4 winners + 5 losers instead of
   the configured 5 + 5. Daniel 2026-07-15 23:25 caught this. Fix:
   exclude the .gg-ups-and-downs variant from this rule (added in
   statsfunctions.php line 333 as `class="PREDTB gg-ups-and-downs"`). */
.right-drawer table#WWTAB:not(.gg-ups-and-downs) > tbody > tr:nth-child(2),
.right-drawer table#WWTAB:not(.gg-ups-and-downs) > tr:nth-child(2) {
  display: none;
}

/* Data rows (weekly winners) */
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td,
.right-drawer table#WWTAB > tr:not(:first-child) > td {
  padding: 10px 20px;
  font-size: 13px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  overflow-wrap: break-word;
}
.right-drawer table#WWTAB > tbody > tr:nth-child(odd) > td,
.right-drawer table#WWTAB > tr:nth-child(odd) > td {
  background: #fff;
}
.right-drawer table#WWTAB > tbody > tr:nth-child(even) > td,
.right-drawer table#WWTAB > tr:nth-child(even) > td {
  background: #fafafa;
}
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td:nth-child(1),
.right-drawer table#WWTAB > tr:not(:first-child) > td:nth-child(1) {
  text-align: left;
  color: #000;
}
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td:nth-child(1) a,
.right-drawer table#WWTAB > tr:not(:first-child) > td:nth-child(1) a {
  color: #000;
  text-decoration: none;
}
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td:nth-child(2),
.right-drawer table#WWTAB > tr:not(:first-child) > td:nth-child(2) {
  text-align: right;
  color: #339933;
  font-weight: 700;
  width: 70px;
}

/* UpsAndDowns data rows reuse the same td structure. The font class
 * inside each cell is UADUP (winner) or UADDOWN (loser). We map those
 * to the green/red color scheme. */
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td:nth-child(2) font.UADUP,
.right-drawer table#WWTAB > tr:not(:first-child) > td:nth-child(2) font.UADUP {
  color: #339933;
  font-weight: 700;
}
.right-drawer table#WWTAB > tbody > tr:not(:first-child) > td:nth-child(2) font.UADDOWN,
.right-drawer table#WWTAB > tr:not(:first-child) > td:nth-child(2) font.UADDOWN {
  color: #cb3d14;
  font-weight: 700;
}

/* === CSS fix: browser hoists <tr> into implicit <tbody>, so
   `table > tr:first-child` doesn't work. Use class-based selectors
   instead — they reach through the implicit tbody. === */

/* ============ 1. Tipparstatistik (table#STATSTAB) ============ */

/* Title row: <td class="TBLHEAD" colspan="3"> */
table#STATSTAB td.TBLHEAD[colspan="3"] {
  background: #339933 !important;
  color: #fff !important;
  text-align: center !important;
  padding: 4px 4px 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border: 0 !important;
  display: table-cell !important;
  overflow-wrap: break-word !important;
  width: auto !important;
}
table#STATSTAB td.TBLHEAD[colspan="3"] font {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
table#STATSTAB td.TBLHEAD[colspan="3"] a {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 0.95 !important;
}
/* font-size + font-weight for individual anchors (nav vs matchup)
   are set in the newer per-anchor rules above (a.PRED:first-of-type
   / :nth-of-type(2) for nav, a.PRED:last-of-type for matchup).
   Daniel 2026-07-15 08:17: the old `font-size: 12px !important` on
   every TBLHEAD anchor was forcing the matchup to 12px regardless of
   the 32px rule on a.PRED:last-of-type, and forcing nav links to 12px
   instead of the 16px base. Drop both !important font properties here
   so the per-anchor rules can take over. */
/* Matchup row's inner div — let it inherit from the
   a.PRED:last-of-type anchor so the matchup size is set in ONE
   place (the anchor rule above). Daniel 2026-07-15 08:17: matchup
   font was bumped from base (16px) to 32px; the old hardcoded 13px
   here would have kept the visible matchup text at 13px regardless.
   Inherit + 700 weight keeps the bold visual style. */
table#STATSTAB td.TBLHEAD[colspan="3"] #A_FIXT_TEXT {
  font-size: inherit;
  font-weight: 700 !important;
}

/* Data rows: <td class="TBLROW"> without colspan — these are the 3
   per-row cells (score | percentbar | bonus) */
table#STATSTAB td.TBLROW {
  padding: 7px 12px !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid #eee !important;
  font-size: 12px !important;
  color: #000 !important;
  background: #fff !important;
}
table#STATSTAB tr:nth-child(even) td.TBLROW {
  background: #fafafa !important;
}
table#STATSTAB td.TBLROW:not([colspan]):nth-of-type(1) {
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #222 !important;
  width: 22% !important;
}
table#STATSTAB td.TBLROW:not([colspan]):nth-of-type(2) {
  overflow-wrap: break-word !important;
  width: 56% !important;
  padding: 0 !important;
  position: relative;
}
table#STATSTAB td.TBLROW:not([colspan]):nth-of-type(2) img {
  display: none !important; /* hidden: replaced by CSS gradient bar */
}

/* Daniel 2026-07-14 02:39: percent column — horizontal CSS bar
   drawn via the --pct CSS variable that mobile.js sets on each
   row (parsed from the cell text '29.8% [34]'). The bar fills
   the cell width proportional to the percentage of votes for
   that score. Renders green-tinted on top of a light grey track. */
table#STATSTAB .statstab-row--has-pct td.TBLROW:nth-of-type(2) {
  background: linear-gradient(
    to right,
    rgba(76, 175, 80, 0.55) 0,
    rgba(76, 175, 80, 0.55) var(--pct, 0%),
    #f4f4f4 var(--pct, 0%),
    #f4f4f4 100%
  ) !important;
  border-radius: 4px;
  padding: 8px 10px !important;
  margin: 4px 6px;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #222 !important;
  width: auto !important;
}
table#STATSTAB td.TBLROW:not([colspan]):nth-of-type(3) {
  text-align: center !important;
  color: #996600 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  width: 22% !important;
  border-radius: 12px;
  padding: 4px 0 !important;
}

/* Match tab renders ShowPredictionStatsForNextMatch() inside
   td.CENTERCOL. The generic `.CENTERCOL table { display:block;
   table-layout:fixed }` fit-to-viewport rule (line 2705) breaks
   STATSTAB colspan on that path — the colspan=3 [INFO] cell
   collapses to its first-column width (~22% = 82px on a 390px
   iPhone), which forces the long Swedish bonus-system note to
   wrap one character per line.

   Restore real table layout for STATSTAB so colspan spans all 3
   columns again. Keep `width:100%` and the overflow-x:auto scroll
   so wide tables still can't blow out the viewport. The drawer
   copy of STATSTAB (right-drawer) is already fine because the
   `.drawer-content` chain doesn't carry the `.CENTERCOL table`
   block-display override. */
.CENTERCOL table#STATSTAB,
table#STATSTAB {
  display: table !important;
  table-layout: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Info row: <td class="TBLROW" colspan="3"> — the [INFO] callout */
table#STATSTAB td.TBLROW[colspan="3"] {
  display: table-cell !important;
  background: #fff5e6 !important;
  border-top: 1px solid #ffd966 !important;
  border-bottom: 0 !important;
  padding: 12px 20px !important;
  font-size: 11px !important;
  color: #333 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  font-weight: 400 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
table#STATSTAB td.TBLROW[colspan="3"] font {
  font-size: 11px !important;
  color: #333 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* The legacy "Antal tips" mini-table after #STATS is emitted as
   width="162px". On mobile it must follow the available column/drawer
   width instead of keeping that desktop sidebar width.

   Daniel 2026-07-14 10:10: the CENTERCOL copy of this mini-table
   (Match tab) was collapsing too — the table got width:100% via the
   rule below, but `.MAINTB tr:not([class]) > td { display:block
   !important }` flipped each <td> to a block element so the
   "Antal tips:" label and the "[114]" total stacked vertically on
   the left instead of sitting side-by-side. Pin `display:table-cell`
   on the cells and `display:table` on the wrapper so colspan and
   the natural 96px/40px column split survive. */
#STATS + table[width] {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}
#STATS + table[width] td.TBLHEAD,
#STATS + table[width] td.TBLROW {
  display: table-cell !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* ============ 3 & 4. Weekly Winners + UpsAndDowns (table#WWTAB) ============
 * Both functions emit <table id="WWTAB" class="PREDTB">. Title row uses
 * <td class="TBLHEAD" colspan="2">, header row uses <td class="TBLHEAD">
 * (no colspan, HIDE), data rows use TBLROW/TBLROWODD (weekly) or
 * UADUP/UADDOWN (ups/downs). */

/* Title row */
.right-drawer table#WWTAB td.TBLHEAD[colspan="2"] {
  background: #339933 !important;
  color: #fff !important;
  text-align: center !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  border: 0 !important;
  display: table-cell !important;
  font-size: 18px !important;
  overflow-wrap: break-word !important;
}
.right-drawer table#WWTAB td.TBLHEAD[colspan="2"] font {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.right-drawer table#WWTAB td.TBLHEAD[colspan="2"] a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Header row (Användarnamn / P) — HIDE per Daniel 2026-07-13 23:59 */
.right-drawer table#WWTAB td.TBLHEAD:not([colspan]) {
  display: none !important;
}

/* Data rows — weekly winners use TBLROW/TBLROWODD, ups/downs use
 * UADUP/UADDOWN. Style them all the same way for the basic row layout.
 *
 * Daniel 2026-07-15 17:46 (WhatsApp): 'Bottom menu, "Statistik":
 * gör raderna lägre, placera pilarna framför på samma rad som
 * username, inte ovanpå.' Earlier this block set
 * `padding: 10px 20px !important` on every data td, which gave
 * each row ~38-40px of vertical height (10px top + 13px font +
 * 10px bottom + line-height). And the up/down arrow rendered via
 * ::before on the first td — which, with the old legacy
 * <font><a>username</a></font> wrapper, could fall to a separate
 * baseline line under certain font-metric conditions, leaving
 * the arrow on its own row above the name. Compressed padding
 * to 4px 8px and made the first td a flex row so the ::before
 * arrow + <font><a> name are guaranteed on the same line at
 * center alignment. Tabular-nums on the change cell keeps
 * +/- numbers from shifting as digits change between rows. */
.right-drawer table#WWTAB td.TBLROW,
.right-drawer table#WWTAB td.TBLROWODD,
.right-drawer table#WWTAB td.UADUP,
.right-drawer table#WWTAB td.UADDOWN {
  padding: 4px 8px !important;
  font-size: 13px !important;
  border: 0 !important;
  border-bottom: 1px solid #eee !important;
  background: #fff !important;
  overflow-wrap: break-word !important;
}

/* Name (first td) on the ups-and-downs rows: stays
 * table-cell (default — flex on a table cell exploded the
 * row height to 150-170px because table-row height was
 * computed from content while flex on the child td tried
 * to expand it). The arrow ::before is display:inline-block
 * with vertical-align:middle so it sits on the same text
 * line as the <font><a>username</a></font>. margin-right
 * gives the arrow-to-name gap. */
.right-drawer table#WWTAB tr.ud-row--up td:first-child::before,
.right-drawer table#WWTAB tr.ud-row--down td:first-child::before {
  display: inline-block;
  width: 0.9em;
  margin-right: 6px;
  font-weight: 700;
  font-size: 1em;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

/* Daniel 2026-07-15 19:38 (WhatsApp): 'Ser inte rätt ut.'
 * The up/down arrow still rendered on its own line above the
 * username even after the inline-block ::before fix in
 * 2593e9d (PR #163). Root cause: '.right-drawer td > font
 * { display: block }' (specificity 020) was forcing
 * <font class="UADUP"> and <font class="UADDOWN"> to be
 * block elements — so the inline-block ::before pseudo
 * became a sibling block rather than an inline character,
 * and the two stacked vertically inside the td. Force the
 * ups-and-downs font wrappers back to inline so the arrow
 * ::before + <font><a>name</a></font> sit on the same text
 * line. Specificity 033 (3 classes) beats the global 020. */
.right-drawer table#WWTAB tr.ud-row--up td:first-child > font,
.right-drawer table#WWTAB tr.ud-row--down td:first-child > font {
  display: inline;
}
.right-drawer table#WWTAB tr:nth-child(odd) td.TBLROW,
.right-drawer table#WWTAB tr:nth-child(odd) td.TBLROWODD,
.right-drawer table#WWTAB tr:nth-child(odd) td.UADUP,
.right-drawer table#WWTAB tr:nth-child(odd) td.UADDOWN {
  background: #fff !important;
}
.right-drawer table#WWTAB tr:nth-child(even) td.TBLROW,
.right-drawer table#WWTAB tr:nth-child(even) td.TBLROWODD,
.right-drawer table#WWTAB tr:nth-child(even) td.UADUP,
.right-drawer table#WWTAB tr:nth-child(even) td.UADDOWN {
  background: #fafafa !important;
}

/* First column = name */
.right-drawer table#WWTAB td.TBLROW:nth-of-type(1),
.right-drawer table#WWTAB td.TBLROWODD:nth-of-type(1),
.right-drawer table#WWTAB td.UADUP:nth-of-type(1),
.right-drawer table#WWTAB td.UADDOWN:nth-of-type(1) {
  text-align: left !important;
  color: #000 !important;
}
.right-drawer table#WWTAB td.TBLROW:nth-of-type(1) a,
.right-drawer table#WWTAB td.TBLROWODD:nth-of-type(1) a,
.right-drawer table#WWTAB td.UADUP:nth-of-type(1) a,
.right-drawer table#WWTAB td.UADDOWN:nth-of-type(1) a {
  color: #000 !important;
  text-decoration: none !important;
}

/* Second column = points (green for weekly, UADUP green, UADDOWN red) */
.right-drawer table#WWTAB td.TBLROW:nth-of-type(2),
.right-drawer table#WWTAB td.TBLROWODD:nth-of-type(2),
.right-drawer table#WWTAB td.UADUP:nth-of-type(2) {
  text-align: right !important;
  color: #339933 !important;
  font-weight: 700 !important;
  width: 70px !important;
}
.right-drawer table#WWTAB td.TBLROW:nth-of-type(2) a,
.right-drawer table#WWTAB td.TBLROWODD:nth-of-type(2) a,
.right-drawer table#WWTAB td.UADUP:nth-of-type(2) a {
  color: #339933 !important;
  text-decoration: none !important;
}
.right-drawer table#WWTAB td.UADDOWN:nth-of-type(2) {
  text-align: right !important;
  color: #cb3d14 !important;
  font-weight: 700 !important;
  width: 70px !important;
}
.right-drawer table#WWTAB td.UADDOWN:nth-of-type(2) a {
  color: #cb3d14 !important;
  text-decoration: none !important;
}

/* ============================================
   KLARA INFO NOTE — Daniel 2026-07-14 00:52
   Swisha note ("Om du swishat o inte finns med här...")
   wrapped in <span class="klara-info-note"> by mobile.js so it
   can be styled independently of the title <b>. Must read as a
   helper note inside the gold cell — small, italic, dark red,
   below the bold title.
   ============================================ */
.right-drawer td[bgcolor="GOLD"] .klara-info-note {
  display: block;
  margin-top: 6px;
  padding: 6px 4px 2px;
  border-top: 1px solid rgba(106, 10, 10, 0.25);
  font-size: var(--gg-font-size-sm);
  font-style: italic;
  font-weight: 400;
  color: #6a0a0a;
  line-height: 1.35;
  /* Explicit gold background so the swisha note visually belongs to
     the yellow cell, even if the parent <font> has inherited
     <font class="TBLROW"> styling that may paint over the
     td's bgcolor (Daniel 2026-07-14 00:52). */
  background-color: GOLD;
}

/* ============================================
   VINNARE & FÖRLORARE — Daniel 2026-07-14 00:52
   Each row tagged by mobile.js with ud-row--up (positive
   change, UADUP class) or ud-row--down (negative, UADDOWN).
   Up/down arrow ::before on the NAME cell so it's the FIRST
   thing the eye sees on the row. Arrow color follows the
   existing UADUP/UADDOWN palette from common.css so the
   affordance stays consistent with desktop.

   Daniel 2026-07-15 17:46: 'placera pilarna framför på samma
   rad som username, inte ovanpå.' The arrow used to be
   display:inline-block + vertical-align:baseline, which with
   certain font-metrics + the legacy <font><a>username</a></font>
   wrapper could shift the arrow onto its own line above the
   name. Now the parent td:first-child is display:flex (see the
   data-row block above), and ::before is just a flex item —
   guaranteed same line, vertical center. Width is 0.9em so the
   arrow column is visually consistent across up/down rows.
   ============================================ */
.right-drawer table#WWTAB tr.ud-row--up td:first-child::before,
.right-drawer table#WWTAB tr.ud-row--down td:first-child::before {
  /* Now display:inline-block + vertical-align:middle on a
   * table-cell parent — the arrow sits on the same line as
   * the <font><a>username</a></font> at vertical center, no
   * matter the row height (Daniel 2026-07-15 17:46). */
  font-weight: 700;
  font-size: 1em;
  text-align: center;
}

.right-drawer table#WWTAB tr.ud-row--up td:first-child::before {
  content: "▲";
  color: #2e7d32; /* match common.css font.UADUP green */
}

.right-drawer table#WWTAB tr.ud-row--down td:first-child::before {
  content: "▼";
  color: #c62828; /* match common.css font.UADDOWN red */
}

/* Highlight the entire row on hover/tap so winners/losers
   rows are easier to scan. Daniel 2026-07-14 00:52: 'tydligare
   visuellt kommunikation' — the arrow is the primary cue, the
   row tint is the secondary cue. */
.right-drawer table#WWTAB tr.ud-row--up {
  background-color: rgba(46, 125, 50, 0.06);
}

.right-drawer table#WWTAB tr.ud-row--down {
  background-color: rgba(198, 40, 40, 0.06);
}

/* Make the +/- change value in the second cell prominent so
   the magnitude reads at a glance. Daniel 2026-07-14 00:52. */
.right-drawer table#WWTAB tr.ud-row--up td.UADUP:nth-of-type(2),
.right-drawer table#WWTAB tr.ud-row--down td.UADDOWN:nth-of-type(2) {
  font-weight: 700;
  font-size: var(--gg-font-size-base);
}

/* Tipparstatistik overrides consolidated above — see td.TBLROW:nth-of-type and td.TBLROW.pts--* rules. */

/* =================================================================
 * Daniel 2026-07-14 02:39: Tipparstatistik points pill — color-coded
 * by rarity. mobile.js tags the points td with pts--rare /
 * pts--uncommon / pts--common / pts--popular / pts--crowd based on
 * the text content (8p, 5p, 3p, 2p, 1p/0p respectively).
 *
 * Iteration 5: use 'tr td.TBLROW.pts--*' (specificity 0,3,2) to
 * beat the even-row tint rule 'tr:nth-child(even) td.TBLROW'
 * (specificity 0,2,2) which was overriding the pill background on
 * every other row. The previous 'td.TBLROW.pts--*' (0,3,1) lost
 * because it had fewer elements (1 vs 2). Adding 'tr' to the
 * selector restores the parity needed to win on source order.
 * ================================================================= */
table#STATSTAB tr td.TBLROW.pts--rare {
  background: #d4a017 !important;
  color: #fff !important;
}
table#STATSTAB tr td.TBLROW.pts--uncommon {
  background: #5cb85c !important;
  color: #fff !important;
}
table#STATSTAB tr td.TBLROW.pts--common {
  background: #f0ad4e !important;
  color: #fff !important;
}
table#STATSTAB tr td.TBLROW.pts--popular {
  background: #e07a5f !important;
  color: #fff !important;
}
table#STATSTAB tr td.TBLROW.pts--crowd {
  background: #999 !important;
  color: #fff !important;
}


/* ============================================
   Daniel 2026-09-05 14:32 — cascade-restoration override.
   Playwright verification on the live QA page revealed that
   even with body.MAIN tbody+tr display overrides, the original
   mobile-collapsed rule at line ~4254 with grid-template-columns
   (7 tracks: pos/change/name/icons/points) was being shadowed
   by some unknown rule at >=1023px viewport — computed
   gridTemplateColumns resolved to a single 1240px track instead
   of the 7-track layout, making every user-row 427px tall and
   pushing body scrollHeight to 35000+px.

   Pragmatic fix: restate the full mobile-collapsed grid + per-cell
   overrides under body.MAIN at high specificity with !important
   on the cascade-affecting properties. body.MAIN beats
   html body.MAIN by one class on the body level, so this wins
   at ALL viewports in MOBILE mode. The unconditional originals
   still apply too (same value, just lower specificity), so this
   is purely additive — no regression risk for narrower viewports.
   ============================================ */
@media (min-width: 768px) {
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    display: grid !important;
    grid-template-columns:
      minmax(24px, 30px)
      minmax(28px, 34px)
      minmax(0, 1fr)
      22px 22px 22px
      minmax(38px, 46px) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 3px !important;
    row-gap: 2px !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--gg-border-color, #e0e0e0) !important;
    background: var(--gg-bg-card, #fff) !important;
  }

  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Slight desktop-padding boost for the wider CENTERCOL (~640px
     instead of the mobile ~340px) so cards breathe. Mirrors the
     padding tweak from d87629d. */
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    padding: 8px 12px !important;
    column-gap: 6px !important;
  }
}

/* Daniel 2026-09-05 14:32 — second cascade-restoration.
   db1bb56's body.MAIN override forced grid-template-columns correctly
   (verified: 30px 34px 1028px 22px 22px 22px 46px — 7 tracks), but
   individual td[data-col="pos|change|name|user-icon|boot-icon|
   position-icon|points"] rules in mobile.css lines ~4335-4441 set
   grid-column per cell and were being shadowed by the cascade — all
   cells computed gridCol=auto/auto and got auto-placed in DOM order
   instead of by explicit grid-column, leaving name in column 5
   (22px wide) and boot-icon in column 3 (1028px 1fr), blowing up
   row heights and body scrollHeight to 20000+px.

   Restating every per-cell grid-column + grid-row with body.MAIN
   scoping at !important force-ranks each cell to its intended
   track. Stats cells (played/won/drawn/lost/goals/diff) get
   grid-row:2 + sequential columns so they render as the folded
   stats chain, not as broken rows. */
@media (min-width: 768px) {
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="pos"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="change"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="name"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="points"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="played"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="won"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="drawn"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="lost"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="goals"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="diff"] {
    position: relative !important;
  }

  /* Row 1 header cells — exact grid placement */
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="pos"] {
    grid-column: 1 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="change"] {
    grid-column: 2 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="name"] {
    grid-column: 3 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="user-icon"] {
    grid-column: 4 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="boot-icon"] {
    grid-column: 5 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="position-icon"] {
    grid-column: 6 !important; grid-row: 1 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="points"] {
    grid-column: 7 !important; grid-row: 1 !important;
  }

  /* Row 2 stats cells — sequential cols 1-6; goals/diff hidden via
     display:none from line ~4139. played shows the full folded
     stats chain via mobile.js foldStats(). */
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="played"] {
    grid-column: 1 / span 6 !important; grid-row: 2 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="won"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="drawn"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="lost"] {
    grid-row: 2 !important;
  }
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="goals"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="diff"] {
    display: none !important;
  }

  /* Cap row height so the body doesn't blow up on long stats lines */
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr {
    grid-template-rows: auto minmax(0, auto) !important;
  }
}

/* Daniel 2026-09-05 14:32 — final cascade-restoration step.
   db1bb56 + 0109118 force body.MAIN tbody+tr display:grid +
   grid-template-columns:7 tracks + per-cell grid-column via
   body.MAIN [data-col=...] overrides. Verified via Playwright
   on 0109118 deploy: rowGridTemplateColumns resolved to
   "30px 34px 965px 22px 22px 22px 46px 25.4688px 25.4688px"
   (9 tracks instead of 7) — the 8th and 9th tracks at 25.4688px
   are IMPLICIT columns auto-created when the empty won/drawn/lost
   td cells (their content was folded into played cell via
   mobile.js foldStats()) auto-place in row 2 after played's
   grid-column: 1 / span 6.

   The implicit columns push MAINTB wide, push the 1fr name
   column down to 965px (still fits, just narrower than ideal),
   and add ~25px of horizontal space to each row. Body
   scrollHeight came down from 35281 → 20630 → 9736 across the
   three iterations, but the test's < 8000 threshold is still
   failing by ~1700px.

   Fix: display:none !important for won/drawn/lost via body.MAIN
   scoping. They're empty in the rendered output (foldStats moves
   their text into played), so hiding them costs nothing visually
   and removes them from grid flow — eliminating the 2 implicit
   columns and likely dropping body scrollHeight under 8000. */
@media (min-width: 768px) {
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="won"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="drawn"],
  body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td[data-col="lost"] {
    display: none !important;
  }
}

/* Keep full-width section/title rows out of the compact user-card grid.
   At desktop-sized viewports the cascade-restoration rules above force
   tbody rows into the seven-track grid. Legacy STANDTB headings use a
   single colspan cell; without an explicit span that cell auto-places in
   track 1 (24–30px), wrapping the heading vertically as seen on QA
   2026-09-28. This stylesheet is only loaded by mainview-mobile.php, so
   Classic remains isolated. */
@media (min-width: 768px) {
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr:has(> td[colspan]) > td[colspan],
  html body.MAIN table.STANDTB.mobile-collapsed tbody.standtb-rows > tr > td.TBLHEAD {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Mobile is a phone-width canvas when viewed on desktop: preserve the same
   compact proportions and center it instead of stretching its card grid.
   Classic is a separate template and never loads this stylesheet. */
@media (min-width: 768px) {
  html body.MAIN {
    width: min(100%, 450px) !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.MAIN .MAINTB {
    width: 100% !important;
    max-width: 450px !important;
    padding-top: 0 !important;
  }

  body.MAIN .MAINTB > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 450px !important;
  }

  body.MAIN .MAINTB > tbody > tr,
  body.MAIN .MAINTB > tr {
    display: block !important;
    width: 100% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
  }

  body.MAIN .MAINTB > tbody > tr > td,
  body.MAIN .MAINTB > tr > td {
    width: 100% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
  }

  body.MAIN .MAINTB tr.row-content > td.CENTERCOL {
    width: 100% !important;
    max-width: 450px !important;
    min-width: 0 !important;
  }

  body.MAIN td.CENTERCOL table.STANDTB {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.MAIN .mobile-topbar,
  body.MAIN nav.bottom-tab-bar {
    width: min(100vw, 450px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}

/* Reserve the banner's matching height for the centered Mobile canvas. */
@media (min-width: 1024px) {
  html body.MAIN {
    padding-top: 148px;
  }
}