/* The table: felt, weave, lamp, vignette, and everything that sits on it.
   Shared by index.html and how-it-works.html so the two cannot drift - which
   is the failure mode this project has spent ten rounds on. */
:root{
 --felt:#0C2A1D;--card:#0E211A;--line:#1C3A2C;--line2:#2C5240;
 /* Warm greys, deliberately. The old --dim/--faint were blue-greys that go
    murky on felt; anything in the felt's own hue family reads as dirt
    rather than as quiet. Never use a green-tinted grey for text here. */
 --ink:#F0EADC;--dim:#BDB5A4;--faint:#9A9384;
 --gold:#E3B341;--gold2:#F8DD8C;--goldD:#7E5A0C;
 --up:#57E39A;--down:#F0706B;--dia:#8FE3F5;--paper:#E4D6B4;
 --wood:#C08552;--stone:#B9C2CC;
 --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* The table. A warm lamp from top centre over a felt that darkens toward
   the edges, so the page has a middle rather than being an even field. */
body{margin:0;color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;
 background:radial-gradient(ellipse 1000px 460px at 50% -8%, rgba(246,230,184,.13), transparent 60%),
 linear-gradient(180deg,#0C2A1D,#071A11);background-color:#0A2317;background-attachment:fixed}
/* Weave: two diagonals, white at 3.5% and black at 30%, on a 4px repeat.
   Barely visible on its own; it is what stops the felt reading as flat. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
 repeating-linear-gradient(-45deg,rgba(0,0,0,.30) 0 1px,transparent 1px 4px)}
/* Leather warmth at the very top, and a heavy vignette. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:linear-gradient(180deg,rgba(58,36,10,.55) 0,rgba(58,36,10,0) 90px),
 radial-gradient(ellipse at 50% 30%,transparent 40%,rgba(0,0,0,.72) 100%)}
/* Everything real sits above the felt layers. */
.wrap{position:relative;z-index:1}

/* The host. Fixed, never interactive, faded up from his top edge so he
   emerges from the felt rather than being pasted onto it. */
.host{position:fixed;left:50%;transform:translateX(-50%);right:auto;bottom:0;
 width:100%;max-width:1280px;z-index:0;pointer-events:none;
 opacity:.55;
 mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%)}
.host img{width:100%;display:block}
/* Light falls off toward the viewer. The asset is evenly lit and the
   foreground felt is as bright as the gloves; without this, text sitting over
   the lower half has no contrast. Felt colour, so the falloff reads as the
   room rather than as a black bar. Measured, not eyeballed - see the runbook. */
.host::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,26,17,0) 0,rgba(7,26,17,0) 46%,rgba(7,26,17,.55) 68%,rgba(7,26,17,.86) 100%)}

/* Leather rail across the very top. */
.rail{height:14px;margin:0;background:linear-gradient(180deg,#4A3512,#2C1E08 60%,#160F04);
 border-bottom:1px solid var(--line2)}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px 60px}
.hidden{display:none !important}

.bar{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap}
.brand{font-family:var(--mono);font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
.brand .br{color:var(--dia)}.brand .u{color:var(--faint)}
.plate{display:inline-block;border:1.5px solid var(--dia);color:var(--dia);font:700 10px/1 var(--mono);letter-spacing:.12em;padding:5px 7px;border-radius:3px;margin-left:8px;vertical-align:middle}
.seasonline{font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.seasonline b{color:var(--paper);font-weight:700}
.navr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
/* The connected address is a control, not a label: it opens this. */
.wmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:6;display:flex;gap:8px;padding:8px;
  border:1px solid var(--line2);border-radius:14px;background:rgba(9,25,17,.97)}
.chip{font:11px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:16px;padding:6px 11px;white-space:nowrap;background:none;cursor:pointer;text-decoration:none;display:inline-block}
a.chip{color:var(--gold)}

.tickwrap{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tickwrap::-webkit-scrollbar{display:none}
.ticker{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--line2);border-radius:12px;
 background:linear-gradient(180deg,rgba(21,54,39,.94),rgba(9,26,17,.94));overflow:hidden}
.ticker>div{padding:13px 14px;border-right:1px solid var(--line)}
.ticker>div:last-child{border-right:0}
.tl{font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tv{font:700 21px/1 var(--mono);margin-top:7px;letter-spacing:-.02em}
.ts{font:10px var(--mono);color:var(--faint);margin-top:5px}
.hl{background:rgba(87,227,154,.06)}
.scrollhint{display:none;font:9px var(--mono);color:var(--faint);text-align:right;margin-top:5px;letter-spacing:.1em}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.grid3{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px}
/* Near-opaque on purpose: the host should read on the felt AROUND and
   BETWEEN cards, not through the text on one. */
.card{background:linear-gradient(180deg,rgba(19,48,35,.975),rgba(9,25,17,.985));
 border:1px solid var(--line2);border-radius:13px;padding:17px}
h2{font:700 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 13px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px;gap:10px}
.hrow h2{margin:0}
.big{font:700 34px/1 var(--mono);letter-spacing:-.02em}
.sm{font:700 14px/1 var(--mono)}
.sub{font-size:11.5px;color:var(--dim);margin-top:6px}
.up{color:var(--up)}.down{color:var(--down)}.gold{color:var(--gold)}.dia{color:var(--dia)}.paper{color:var(--paper)}.dim{color:var(--dim)}
.split{display:flex;gap:30px;align-items:baseline;flex-wrap:wrap}

.rows{border-top:1px solid var(--line);margin-top:13px}
.row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;gap:10px}
.row:last-child{border-bottom:0}
.row .k{color:var(--dim)}
.row .n{font:500 12.5px var(--mono);white-space:nowrap}
.row.tot .k{color:var(--ink);font-weight:600}.row.tot .n{font-weight:700}

/* 30px in the tier rows, 32px on the position badge. Width auto because the
   fists are not square (147-150px on the long edge).

   ONE treatment for all five, no per-tier filter. Stone carried a
   brightness(1.07) lift on the belief that it was the darkest of the five and
   was vanishing against the felt. Measured against the real theme, that was
   wrong twice: WOOD is the darkest of the five - mean luminance 74.6 against
   stone's 79.9 - and nothing disappears, since the dimmest hand is still
   about 3.5x the darkest point of the card behind it. The lift only pushed
   stone further past wood, and a per-tier filter works against the point of
   the set, which is that the material is the only variable. */
.hand{height:30px;width:auto;vertical-align:middle;margin-right:9px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.badge .hand{height:32px;margin-right:6px}
.badge{display:inline-flex;gap:5px;align-items:center;font:700 10px var(--mono);letter-spacing:.1em;border-radius:5px;padding:5px 9px;white-space:nowrap;border:1px solid var(--line2);color:var(--dim)}
.b-dia{background:rgba(143,227,245,.13);color:var(--dia);border-color:rgba(143,227,245,.35)}
.b-gold{background:rgba(227,179,65,.13);color:var(--gold);border-color:rgba(227,179,65,.35)}
.b-stone{background:rgba(185,194,204,.13);color:var(--stone);border-color:rgba(185,194,204,.35)}
.b-wood{background:rgba(192,133,82,.13);color:var(--wood);border-color:rgba(192,133,82,.35)}
.b-paper{background:rgba(217,199,160,.13);color:var(--paper);border-color:rgba(217,199,160,.35)}

.btn{display:block;width:100%;padding:11px;border:0;border-radius:9px;font:600 14px inherit;cursor:pointer}
/* The one primary action is gold; it is the house's button. */
.btn.p{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2A1E04;font-weight:700}
.btn.g{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.brow{display:flex;gap:9px;margin-top:10px}
.btnsub{font-size:10.5px;color:var(--faint);text-align:center;margin-top:7px}
input{width:100%;padding:11px;border-radius:9px;border:1px solid var(--line2);background:rgba(6,20,13,.7);color:var(--ink);font:14px var(--mono);margin-top:10px}

svg{width:100%;height:auto;display:block}
/* The scrub layer. `position:relative` anchors the tooltip; the tooltip is
   pointer-events:none so it can never eat the events it is reacting to. */
.chartwrap{position:relative}
#mcapTip{position:absolute;pointer-events:none;display:none;z-index:2;
  padding:7px 9px;border-radius:8px;border:1px solid var(--line2);
  background:rgba(6,20,13,.94);font:11px var(--mono);color:var(--fg);
  white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5)}
#mcapTip .t{color:var(--faint);font-size:10px;margin-bottom:3px}
#mcapTip .v{font-size:13px}
/* The next-drop badge. A bordered chip rather than grey text, because the
   nights-until-drop is the one number on the card a person comes back for. */
.nextdrop{display:flex;align-items:center;gap:8px;border:1px solid rgba(143,227,245,.42);
  background:rgba(143,227,245,.1);border-radius:8px;padding:5px 10px}
.nd1{font:700 9px var(--mono);letter-spacing:.14em;color:var(--faint)}
.nd2{font:700 12px var(--mono);color:var(--dia)}

/* Two-up stat grid, for cards whose four figures need the width. */
.sg2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px;margin-top:12px}

/* The gap row in the league table, between the top ten and your own line. */
.lg-gap{opacity:.5}
.lg-gap .rk{letter-spacing:.18em}

.legend{display:flex;gap:15px;font-size:10.5px;color:var(--faint);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:5px}
/* Matches the dotted line it stands for, so the legend is readable as a key
   rather than as four identical bars in four colours. */
.legend i.dot{height:3px;border-radius:3px;width:3px;box-shadow:5px 0 0 currentColor,10px 0 0 currentColor;
  color:rgba(227,179,65,.85);margin-right:12px}

.sg4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
.sgi .l{font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sgi .v{font:700 19px/1 var(--mono);margin-top:7px;color:var(--fg)}
.sgi .s{font:10px var(--mono);color:var(--faint);margin-top:4px}

table{width:100%;border-collapse:collapse;font-size:12px}
th{font:700 9px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);text-align:right;padding:0 0 8px}
th:first-child{text-align:left}
td{padding:6px 0;border-top:1px solid var(--line);text-align:right;font:500 12px var(--mono)}
/* Horizontal breathing room between columns. Vertical padding alone left a
   right-aligned column touching the left-aligned one next to it. */
th+th,td+td{padding-left:22px}
/* The first column carries the label and should not be squeezed by the
   numeric columns, which only need their own width. */
th:first-child,td:first-child{width:38%}
td:first-child{text-align:left;font-family:inherit;font-weight:600}
tr.me td{color:var(--dia)}

.lg .r{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line);align-items:baseline;font-size:12px}
.lg .r:first-child{border-top:0}
.lg .rk{font:500 11px var(--mono);color:var(--faint);width:26px}
.lg .ad{flex:1;font:11px var(--mono)}
.lg .vv{font:500 11px var(--mono);color:var(--dim)}
.lg .r.me .ad,.lg .r.me .vv{color:var(--dia)}

.nights{display:flex;gap:4px;margin-top:12px}
.nights div{flex:1;height:34px;border-radius:3px;display:flex;align-items:flex-end;justify-content:center;font:9px var(--mono);padding-bottom:3px}
.n-up{background:rgba(61,214,140,.16);color:var(--up);border-bottom:2px solid var(--up)}
.n-dn{background:rgba(242,109,109,.16);color:var(--down);border-bottom:2px solid var(--down)}
.n-fl{background:rgba(154,147,132,.12);color:var(--faint);border-bottom:2px solid var(--faint)}

.pausebar{display:none;border:1px solid var(--gold);border-radius:11px;
  padding:14px 17px;margin-top:16px;
  background:linear-gradient(180deg,rgba(227,179,65,.10),rgba(227,179,65,.05));
  box-shadow:0 0 0 1px rgba(227,179,65,.10), 0 6px 24px rgba(0,0,0,.35)}
.pausebar.show{display:block}
.pausebar .pb-head{font:700 15px/1.3 var(--mono);color:var(--gold2);letter-spacing:-.01em}
.pausebar .pb-body{font-size:13.5px;line-height:1.65;color:var(--ink);margin:8px 0 0;max-width:74ch}
.pausebar .pb-body b{color:var(--gold2)}
.pausebar .pb-note{color:var(--dim)}
.pausebar .pb-meta{font:11px var(--mono);color:var(--faint);margin-top:10px}
/* A control that cannot work right now should look like it. */
.btn.paused-off{opacity:.4;cursor:not-allowed}

.warn{border:1px solid rgba(240,112,107,.32);background:rgba(240,112,107,.07);border-radius:11px;padding:11px 15px;font-size:12px;margin-top:16px}
.status{font:12px var(--mono);color:var(--dim);margin-top:8px;min-height:16px;word-break:break-word}
.status.err{color:var(--down)}.status.ok{color:var(--up)}
.foot{font-size:11px;color:var(--faint);line-height:1.65;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line);position:relative}
/* Sits above the host (which is z-index 0 on the body) because .wrap makes
   its own stacking context; -1 keeps it behind the footer's own text.
   Generous negative inset so the fade ends off-screen rather than as a
   visible rectangle over the table. */
.foot::before{content:"";position:absolute;inset:-10px -40px -60px -40px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,26,17,0) 0,rgba(7,26,17,.86) 14%,rgba(7,26,17,.94) 60%,rgba(7,26,17,.94) 100%)}
.foot a{color:var(--dim)}

@media (max-width:900px){
  .wrap{max-width:520px;padding:0 12px 48px}
  /* Far back on a tablet. Still full-bleed - the table edge is the point,
     and a 190px version of a 1280-wide composition is just a crop. */
  .host{opacity:.12}
}
@media (max-width:560px){
  /* On a phone the text column IS the screen, so there is no beside for
     him to stand in. Removed rather than faded. */
  .host{display:none}
  .grid,.grid3{grid-template-columns:1fr;gap:12px;margin-top:12px}
  .ticker{display:flex;min-width:max-content}
  .ticker>div{min-width:110px}
  .scrollhint{display:block}
  .big{font-size:30px}
  .split{gap:16px}
  .sg4{gap:10px;margin-top:13px}
  .sgi .v{font-size:17px}
  .brow{flex-wrap:wrap}
}