/* ===========================================================
   Play Your Club Right — retro overlay for GAME pages
   Loads AFTER each game's inline <style>, so equal-specificity
   rules win on source order.

   RULE OF THE FILE: club colours own the fills, brand gold owns
   the frames. Nothing in here sets a fill from a brand token, and
   nothing reads --cream / --gold expecting them to be light or gold
   (42 clubs flip --cream to dark ink; 488 have a white --gold).
   =========================================================== */

:root{
  /* ---- brand retro tokens. Prefixed --r- so they can never collide
          with a club token, present or future. ---- */
  --r-ink:#171310;
  --r-key:#C79A3E;          /* brand gold — now ONLY the logo mark + warning states */
  /* The club's own secondary, in three roles. Where the secondary can't
     do a job, a per-club <style> block after this file redirects it to
     another of that club's own tokens — see the 54 injected overrides.
       --r-accent      large areas on the club face (sleeves, bars)
       --r-accent-text small text on the club face
     Anything sitting on CREAM PAPER uses --head-on-paper instead, which
     the template already guarantees is readable for all 613 clubs. */
  --r-accent:var(--gold,#C79A3E);
  --r-accent-text:var(--r-accent);
  --r-sleeve:var(--r-accent);

  /* The structural keyline — the hard line outside every sleeve. Its job is to
     define an edge against the cream page even when the sleeve is white, so it
     must contrast with the paper. Defaults to ink; a club with a genuine THIRD
     colour gets that instead, and apply-colours.py only writes --c-third when
     it clears the contrast bar. Pure CSS fallback, so clubs without one are
     untouched. */
  --r-line:var(--c-third,var(--r-ink));
  --r-key-lite:#E7CE84;
  --r-key-dark:#8A6620;
  --r-frame:#FAF3E0;        /* sticker frame — always light, unlike --cream */
  --r-red:#B03A22;          /* logo red */
  --r-navy:#0E2C63;--r-navy-3:#061634;
  --r-pitch:#1F5B33;        /* CM formation-panel green */

  /* ---- shared surfaces retuned to the logo's cream.
          These are the same on all 613 games, so they're safe. ---- */
  --paper:#F2E7CB;
  --paper-2:#FBF5E5;
  --paper-3:#E7D8B2;
  --line:#E0D2AE;
  --line-2:#C6B287;
  --ink:#171310;
  --ink-2:#4A4034;
  --ink-3:#7B6E5C;

  /* ---- higher / lower. Keeps the colour-coded affordance but drops
          the modern green for CM's pitch green + the logo red. ---- */
  --hi:#1F5B33;
  --lo:#B03A22;
  /* on-card reveals are no longer used for the verdict (the frame is),
     so these only tint text and can stay mid-toned for both light
     and dark card faces */
  --hi-on:#3E9A5F;
  --lo-on:#D9553C;

  /* ---- type ---- */
  --disp:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:Tahoma,Verdana,'DejaVu Sans',Geneva,sans-serif;
  --slab:'Oswald','Arial Narrow',Arial,sans-serif;   /* was Bevan — dropped, Oswald sitewide */
  --mono:Tahoma,Verdana,sans-serif;

  /* hard hairline instead of the soft rgba border */
  --card-border:var(--r-ink);
}

/* ---------- global: kill every radius and every blurred shadow ---------- */
*,*::before,*::after{border-radius:0!important}
body{-webkit-font-smoothing:auto;line-height:1.55}

/* the top flag bar: hard stops instead of a gradient, club colour + brand gold */
body::before{
  background:var(--navy)!important;
  box-shadow:none!important;
}

/* ---------- site chrome bar ---------- */
.pycr-top{
  border-bottom:3px solid var(--r-sleeve);
  padding:7px 16px;
}
.pycr-top-name{
  font-family:var(--disp);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;
}
.pycr-top-install{
  font-family:var(--disp);font-weight:500;letter-spacing:.12em;
  border:1px solid var(--r-sleeve);
}
/* the real logo, in place of the old CSS-drawn mark.
   Aspect is 1.18:1, so width tracks height. The wordmark text stays
   because at 34px the logo's three rows of type aren't legible on their own. */
.pycr-mark{
  width:40px!important;height:34px!important;
  background:url(/assets/logo-nav.png) center/contain no-repeat!important;
  border:none!important;
  overflow:visible!important;
}
.pycr-mark::before,.pycr-mark::after{display:none!important}

/* ---------- headings ---------- */
.mode-title{
  font-family:var(--disp);font-weight:400;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;
}
.mode-title b{font-weight:600}
/* club name as a League Ladders tab.
   Built outside in — ink keyline / cream sleeve / gold ring / club fill —
   the same construction as the player cards.
   Uses ONLY --navy and --cream, the one pair the template guarantees
   contrasts for every club (including the 42 with a light face). */
.mode-club{
  background:var(--navy);
  color:var(--cream)!important;
  border:4px solid var(--r-sleeve);
  outline:2px solid var(--r-line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 4px 4px 0 rgba(0,0,0,.34);
  padding:9px 16px;
  margin-bottom:0;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.1;
  font-size:clamp(21px,6.6vw,27px);
  text-shadow:none;
}
.mode-club-rule{margin-top:16px}
.mode-club-rule{
  height:5px;width:64px;background:var(--head-on-paper,var(--r-sleeve));
  border-top:1px solid var(--r-ink);border-bottom:1px solid var(--r-ink);
}
/* screen headings as ladder division-header blocks */
.era-title{
  background:var(--r-ink);
  color:#FBF5E5;
  border-bottom:4px solid var(--r-sleeve);
  padding:8px 12px;
  font-family:var(--disp);font-weight:500;text-transform:uppercase;
  font-size:clamp(15px,4.4vw,18px);letter-spacing:.14em;line-height:1.2;
}
.mode-explainer,.era-sub{font-family:var(--body);font-size:12.5px}
.era-note{font-family:var(--body);letter-spacing:0}
/* The "N players in this era" line is hidden. It made a healthy squad look thin
   on clubs with a narrow window, and the number tells the player nothing they
   can act on. */
.era-note{display:none!important}
.back-btn{
  font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.16em;
  border-bottom:1px solid var(--line-2);
}

/* ---------- panels: cream page, gold keyline, hard offset shadow ---------- */
.mode-card,.diff-card,.stat-card,.slider-wrap,.slider-box,.top-box,.banner,
.tr-banner,.tr-out-banner,.go-scores-wrap{
  border:2px solid var(--r-sleeve)!important;
  outline:2px solid var(--r-line);
  box-shadow:4px 4px 0 rgba(0,0,0,.34)!important;
}
.mode-card::before,.banner::before{
  background:var(--r-sleeve)!important;
}
.mode-card::before{height:6px}
.banner::before{
  background:var(--r-accent)!important;
  width:64px;height:5px;
  border-top:1px solid var(--r-ink);border-bottom:1px solid var(--r-ink);
}
.mc-eyebrow,.lvl-eyebrow,.tl,.slider-label,.ts-label,.go-game-name,
.go-scores-title,.go-recent-label{
  font-family:var(--disp);font-weight:500;letter-spacing:.18em;
}
.mc-title,.diff-title,.stat-card-title,.btitle,.lvl-title,.ts-title{
  font-family:var(--disp);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.mc-desc,.diff-desc,.stat-card-desc,.bsub,.lvl-sub,.ts-sub,.hint,.sub{
  font-family:var(--body)
}
.stat-card{border-left-width:6px!important;border-left-color:var(--gold)!important}
/* Easy ships pre-selected (difficulty defaults to 'easy'), and an inset ring
   read as a thicker border than its neighbours. Selection is now a fill, so all
   three cards keep an identical 2px border. */
.diff-card.selected{
  background:var(--r-accent)!important;
  border-color:var(--r-line)!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.34)!important;
}
.diff-card.selected,.diff-card.selected .diff-title{color:var(--acc-text)!important}
.diff-card.selected .diff-desc{color:var(--acc-text)!important;opacity:.78}

/* numbers: condensed, tabular, no negative tracking */
.tv,.ts-num,.bnum,.slider-range,.era-range-display,.pc-value,.pc-mini-val{
  font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.01em!important;font-variant-numeric:tabular-nums;
}

/* ---------- the cards, as Panini stickers ----------
   Construction, outside in: ink hairline / cream frame / gold ring /
   club-colour field. The field, the number and the accent tag are all
   still driven by the club's own tokens.                                */
#cards .card,.fo-row .card{
  border:6px solid var(--r-sleeve)!important;
  outline:2px solid var(--r-line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)!important;
  padding:calc(var(--np,54px) + 4px) 12px 14px!important;  /* always clears the nameplate */
}
/* the nameplate now supplies the top rule, so the stripe is only
   wanted on the Levels mini tiles */
#cards .card:not(.mini) .pc-stripe,.fo-row .card:not(.mini) .pc-stripe{display:none}
.pc-stripe{
  height:5px!important;
  left:0;right:0;top:0;
  background:var(--gold);
  border-bottom:1px solid rgba(0,0,0,.35);
}
/* CM player-profile layout: the name is a title band across the top,
   not a caption underneath. It's the thing you actually have to read. */
#cards .card:not(.mini) .pc-name,.fo-row .card:not(.mini) .pc-name{
  position:absolute;left:0;right:0;top:0;
  height:var(--np,54px);margin:0;padding:6px 6px;overflow:hidden;
  background:var(--r-frame);
  border-bottom:3px solid var(--r-sleeve);
  color:var(--r-ink);
  font-family:var(--disp);font-weight:600;font-size:16px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.12;
  display:flex;align-items:center;justify-content:center;text-align:center;
  /* fixed height, so a two-line name can never push into the tag below */
}
#cards .card:not(.mini) .pc-body,.fo-row .card:not(.mini) .pc-body{
  padding-bottom:0
}
.pc-value{font-size:46px!important}
.pc-value.q{font-size:50px!important;opacity:.42}
.pc-tag{
  font-family:var(--disp);font-weight:500;letter-spacing:.14em;
  border:1px solid var(--r-ink);padding:2px 9px;
}
.fo-vs{font-family:var(--disp);font-weight:500;letter-spacing:.14em}

/* ---------- CORRECT / WRONG stamp, as on the homepage demo ----------
   Done with :has() so no JS changes are needed in 613 files. The game
   holds .ok/.bad for 1200ms and redraw() rebuilds the cards each round,
   so the pseudo-element is destroyed and recreated, which restarts the
   animation every time. Without :has() support you simply get no stamp,
   and the coloured frame still carries the result. */
#cards{position:relative}
#cards:has(.card.ok)::after,#cards:has(.card.bad)::after{
  position:absolute;left:50%;top:44%;
  transform:translate(-50%,-50%) rotate(-5deg);
  font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  padding:9px 20px;border:2px solid var(--r-ink);
  box-shadow:3px 3px 0 var(--r-ink);
  z-index:9;pointer-events:none;
  animation:pycrStamp 1.15s ease forwards;
}
#cards:has(.card.ok)::after{content:"Correct";background:var(--r-key);color:var(--r-navy-3)}
#cards:has(.card.bad)::after{content:"Wrong";background:var(--r-red);color:#FBF5E5}
/* a draw re-spins rather than costing a life, so it gets its own state
   instead of borrowing .bad and being stamped WRONG */
#cards:has(.card.tie)::after{
  content:"Draw";background:var(--r-navy);color:#FBF5E5;
  position:absolute;left:50%;top:44%;
  transform:translate(-50%,-50%) rotate(-5deg);
  font-family:var(--disp);font-weight:600;font-size:19px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  padding:9px 20px;border:2px solid var(--r-ink);
  box-shadow:3px 3px 0 var(--r-ink);z-index:9;pointer-events:none;
  animation:pycrStamp 1.15s ease forwards;
}
#cards .card.tie,.fo-row .card.tie{border-color:var(--r-sleeve)!important}
@keyframes pycrStamp{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-5deg) scale(1.6)}
  13%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
  76%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
}

/* verdict lives in the frame, not in the number.
   A 6px frame reads against every one of the 613 palettes, light or dark,
   and leaves --num alone so no club ever gets a contrast problem. */
#cards .card.ok,.fo-row .card.ok{border-color:var(--r-pitch)!important}
#cards .card.bad,.fo-row .card.bad{border-color:var(--r-red)!important}
#cards .card.frzn,.fo-row .card.frzn{border-color:#5E8FB8!important}
.card.ok .pc-value,.card.mini.ok .pc-mini-val{color:var(--hi-on)}
.card.bad .pc-value,.card.mini.bad .pc-mini-val{color:var(--lo-on)}
#cards .card.facedown,.fo-row .card.facedown{filter:none!important;opacity:.9}
@keyframes pulse{from{transform:none}to{transform:none}}

/* Levels progress tiles keep their row layout, just re-framed */
#cards .card.mini{
  border:3px solid var(--r-sleeve)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)!important;
  padding:10px 12px!important;
}
#cards .card.mini .pc-stripe{width:5px!important;border-bottom:none;border-right:1px solid rgba(0,0,0,.35)}
.pc-mini-name{font-family:var(--disp);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:12px}

/* ---------- higher / lower controls ---------- */
.btn-h,.btn-l{
  border-width:2px!important;
  background:var(--paper-2)!important;
  box-shadow:3px 3px 0 var(--r-ink)!important;
  font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.12em;text-transform:uppercase;font-size:14px!important;
}
.btn-h:active,.btn-l:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--r-ink)!important}
.bprimary,.ts-btn,.lvl-btn,.era-btn,.diff-btn{
  border:2px solid var(--r-ink)!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.4)!important;
  font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.12em;text-transform:uppercase;
}
.bprimary:active,.ts-btn:active,.lvl-btn:active,.era-btn:active,.diff-btn:active{
  transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.4)!important
}
.bsecondary,.bshare,.go-lb{
  border:2px solid currentColor!important;
  font-family:var(--disp)!important;font-weight:500!important;
  letter-spacing:.12em;text-transform:uppercase;
}
.era-preset,.go-recent-chip{
  border:1px solid var(--r-sleeve)!important;
  font-family:var(--disp);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- badges, timer, lives ---------- */
.badge,#era-badge,.era-badge{
  font-family:var(--disp)!important;font-weight:500!important;
  letter-spacing:.16em!important;
  border:1px solid var(--r-sleeve)!important;
  color:var(--r-accent-text)!important;
}
/* every other place the accent is set as small text on the club face */
.mc-eyebrow,.slider-range,.tr-banner,.tr-out-banner,.go-hs span,
.badge.g,.badge.gld,.badge.tr,.badge.tr-out{
  color:var(--r-accent-text)!important;
}
/* the timer track and lives dots sit on cream, where a white accent is
   invisible — 488 clubs have a white secondary, so these use the token
   the template guarantees reads on paper */
.timer-bar{background:var(--head-on-paper,var(--r-sleeve))!important}
.timer-wrap{height:8px;border:1px solid var(--r-ink);background:var(--paper-3)}
.timer-bar{transition:width .1s linear}
.timer-bar.warn{background:var(--r-key)!important}
.timer-bar.danger{background:var(--r-red)!important}
.dot{width:11px;height:11px;border:1px solid var(--r-ink);
  background:var(--r-accent)!important}
.dot.dead{background:transparent!important}
.dot.dead{background:transparent}

/* ---------- level-complete overlay ---------- */
.lvl-ov{background:rgba(7,22,52,.78)}
.lvl-card{
  border:2px solid var(--r-sleeve);
  outline:2px solid var(--r-line);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
  background:var(--paper-2);
}
.transition-screen{border-top:4px solid var(--r-sleeve)}

/* The club leaderboard was rendered into the game-over panel via
   PYCR.renderBoard('#pycr-board'). Its rows use .pycr-lb-* classes that this
   stylesheet never covered, so it appeared as an unstyled stray line across
   the panel. Removed: the Leaderboards button below it goes to the real thing. */
#pycr-board{display:none!important}

/* ---------- footer note ---------- */
.caveat{
  font-family:var(--body);
  background:var(--paper)!important;
  border-top:1px solid var(--r-ink);
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.fee-note{font-family:var(--body)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* =========================================================
   MOBILE — keep the whole interface above the fold.

   Measured at 390px wide, the bottom of the higher/lower buttons
   sat at roughly 672px against ~650px of usable viewport on an
   iPhone 14 and ~550px on an SE, so the controls were off screen
   on effectively every handset.

   Two parts. First the chrome is compacted. Then #s-game becomes a
   viewport-height flex column and #cards takes flex:1, so the cards
   absorb whatever slack is left and the buttons stay visible at any
   viewport height rather than only at the one size we measured.
   ========================================================= */
@media (max-width:640px){
  .wrap{padding:12px 14px 28px!important}

  /* chrome bar: smaller logo, less padding */
  .pycr-top{padding:5px 14px}
  .pycr-mark{width:33px!important;height:28px!important}
  .pycr-top-name{font-size:11px}

  #s-game.active{
    display:flex;
    flex-direction:column;
    min-height:calc(100vh - 110px);
    min-height:calc(100dvh - 110px);
  }
  #s-game .back-btn{margin-bottom:7px!important;font-size:10px}
  /* the era-badge wrapper carries an inline margin, hence !important */
  #s-game>div[style*="text-align:center"]{margin-bottom:5px!important}
  .era-badge{padding:3px 10px!important;font-size:9.5px!important}
  .top-bar{margin-bottom:8px!important}
  .top-box{padding:6px 6px!important}
  .tl{font-size:8.5px!important;margin-bottom:2px!important}
  .tv{font-size:20px!important}
  .timer-wrap{margin-bottom:7px!important}
  .badge-wrap{margin-bottom:8px!important}
  .badge{font-size:11.5px!important;padding:5px 12px!important}
  .sub{font-size:10px!important;margin-top:3px!important}

  /* the cards take up the slack */
  #cards{
    flex:1 1 auto;
    min-height:168px;
    margin-bottom:9px!important;
    align-items:stretch!important;
    align-content:stretch!important;
  }
  #cards .card{min-height:0!important;flex-shrink:1!important}
  /* Face Off sizing is handled in its own block below */
  /* Levels progress tiles shouldn't stretch with the container */
  #cards .card.mini{align-self:start!important;flex:0 0 auto!important;height:auto!important}

  /* nameplate and number scale with the shorter card */
  #s-game{--np:44px}
  #cards .card:not(.mini) .pc-name,.fo-row .card:not(.mini) .pc-name{font-size:14.5px}
  #cards .card,.fo-row .card{padding:48px 9px 10px!important}
  .pc-value{font-size:clamp(26px,9.5vw,42px)!important}
  .pc-value.q{font-size:clamp(28px,10vw,44px)!important}
  .pc-tag{font-size:8px;padding:2px 7px}

  .hint{min-height:15px!important;margin-bottom:7px!important;font-size:12.5px!important}
  .btns{margin-bottom:0!important}
  .btn-h,.btn-l{padding:12px 8px!important;font-size:14px!important}
  #cards:has(.card.ok)::after,#cards:has(.card.bad)::after{
    font-size:16px;padding:7px 15px;
  }
}

/* ---------- end of game: overlay, not a panel below the fold ----------
   #banner is appended after the higher/lower buttons, so the score, the
   challenge button and the leaderboard link all sat off screen and had to be
   scrolled to. Promoting it to a centred overlay needs no JS change in 613
   files — the game already empties #banner between rounds, so :empty is a
   reliable signal for "no result to show". */
#banner:not(:empty){
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;
  background:rgba(6,22,52,.82);
  -webkit-overflow-scrolling:touch;
}
#banner:not(:empty)>.banner{
  margin:auto!important;
  width:100%;max-width:430px;max-height:100%;
  overflow-y:auto;
  box-shadow:6px 6px 0 rgba(0,0,0,.45)!important;
}

/* ---------- Face Off: stop the cards collapsing on mobile ----------
   The mobile block zeroes .card min-height so Streak cards can shrink into the
   available space. Face Off puts its cards inside .fo-row, which was not
   stretching, so they fell back to content height and came out far shorter
   than in the other modes. */
@media (max-width:640px){
  #cards .fo-row{
    align-self:stretch;
    height:auto;
    min-height:0;
  }
  #cards .fo-row .card{
    min-height:180px!important;
    height:100%;
  }
  .fo-vs{font-size:10px;padding:0 2px}
}

/* =========================================================
   MOBILE: the three mode cards fill the screen.
   Fixed padding was guesswork — too tight at one value, leaving a dead gap at
   another, and never right across SE to Pro Max. The mode screen is now a flex
   column and the cards grow to absorb whatever height is left, so the layout
   fits exactly on every phone with no scroll.
   ========================================================= */
@media (max-width:640px){
  .wrap{padding-bottom:34px!important}
  .screen#s-mode.active{
    display:flex!important;
    flex-direction:column;
    /* viewport, less the topline, nav and the fixed stats caveat */
    min-height:calc(100dvh - 118px);
  }
  .mode-title{font-size:16px!important;margin:0 0 8px!important;letter-spacing:.16em;flex:0 0 auto}
  .mode-club{
    font-size:clamp(19px,6vw,25px)!important;
    padding:9px 14px!important;
    border-width:3px!important;
    flex:0 0 auto;
  }
  .mode-club-rule{height:4px;width:52px;margin:12px auto 12px!important;flex:0 0 auto}
  .mode-explainer{
    font-size:13px!important;
    line-height:1.5!important;
    margin:0 auto 14px!important;
    max-width:34ch!important;
    flex:0 0 auto;
  }

  /* the cards take the remaining space, shared equally */
  .mode-card{
    flex:1 1 0!important;
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    padding:12px 15px!important;
    margin-bottom:11px!important;
    min-height:96px;
    max-height:150px;
  }
  .mode-card:last-of-type{margin-bottom:0!important}
  .mode-card::before{height:5px!important}
  .mc-title{font-size:19px!important;margin:0 0 4px!important;line-height:1.05!important}
  .mc-desc{font-size:12.5px!important;line-height:1.45!important}

  .caveat{font-size:10px!important;padding:6px 10px!important}
}

/* Very short screens (iPhone SE and similar) need the explainer gone as well —
   the mode titles and blurbs already say what each one is. */
@media (max-width:640px) and (max-height:600px){
  .mode-explainer{display:none!important}
  .mode-club-rule{margin:8px auto 8px!important}
}

/* =========================================================
   ERA SLIDER: bigger targets for thumbs.
   The 18px thumb and 12px year labels were fiddly on a phone.
   ========================================================= */
.slider-row label,#from-val,#to-val{
  font-family:var(--disp)!important;
  font-size:19px!important;
  font-weight:600!important;
  width:58px!important;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.slider-label{font-size:11px!important}
input[type=range]{height:34px!important}
input[type=range]::-webkit-slider-thumb{
  width:28px!important;height:28px!important;
  border-radius:0!important;                 /* square, to match the retro card */
  border:3px solid var(--r-ink)!important;
  background:var(--num)!important;
  box-shadow:2px 2px 0 rgba(0,0,0,.35)!important;
}
input[type=range]::-moz-range-thumb{
  width:28px!important;height:28px!important;
  border-radius:0!important;
  border:3px solid var(--r-ink)!important;
  background:var(--num)!important;
}
.slider-track,.slider-fill{height:6px!important}

@media (max-width:640px){
  .slider-row label,#from-val,#to-val{font-size:21px!important;width:62px!important}
  .slider-row{margin-bottom:16px!important}
  input[type=range]{height:40px!important}
  input[type=range]::-webkit-slider-thumb{width:32px!important;height:32px!important}
  input[type=range]::-moz-range-thumb{width:32px!important;height:32px!important}
}