/* Play Time dashboard. Sits on the shared theme in /styles.css and belongs to
   the library page: sky, cream panels, chunky navy shadows.

   Colour does three jobs here and no more:
     --data       a play this week
     --data-hot   a play this week in a game that is rising or new (emphasis)
     --data-past  earlier days, kept grey on purpose (context)
   The two hues were run through the dataviz skill's validate_palette.js
   against the panel colour of each scheme, all pairs, and pass every check:
     light  "#2a78d6,#d95926" --surface "#fdf6dd"   contrast 4.08 and 3.59
     dark   "#3987e5,#d95926" --surface "#18214a"   contrast 4.26 and 3.99
   Re-run it if a panel colour or a data colour changes. Text never wears
   these colours, and a trend is always a word and an icon as well. */

.stats-page{
  --st-surface:var(--cream);            /* #fdf6dd, the chart surface */
  --st-ink:var(--navy);
  --st-ink-2:var(--slate);
  --st-line:rgba(16,26,61,.17);
  --st-axis:rgba(16,26,61,.4);          /* a chart's baseline, one step stronger */
  --st-wash:rgba(16,26,61,.06);
  --st-shadow:rgba(16,26,61,.18);
  --st-chip:var(--ice);
  --st-chip-ink:var(--navy);
  --st-quiet-panel:rgba(253,246,221,.88);
  --st-post:#d2b17c;                    /* the frame's wooden posts: furniture, not data */
  --data:#2a78d6;
  --data-hot:#d95926;
  --data-past:#a9a188;
  color:var(--st-ink);
  -webkit-user-select:text;user-select:text;
}

/* Night in the backyard: the same page, re-stepped for a dark panel. */
@media (prefers-color-scheme:dark){
  .stats-page{
    --st-surface:#18214a;
    --st-ink:#f4ecd0;
    --st-ink-2:#b9c0de;
    --st-line:rgba(244,236,208,.2);
    --st-axis:rgba(244,236,208,.45);
    --st-wash:rgba(244,236,208,.08);
    --st-shadow:rgba(3,6,20,.5);
    --st-chip:#2d3d80;
    --st-chip-ink:#f4ecd0;
    --st-quiet-panel:rgba(24,33,74,.88);
    --st-post:#5a5470;
    --data:#3987e5;
    --data-hot:#d95926;
    --data-past:#5b648f;
    background:linear-gradient(180deg,#090e2b,#121c49 60%,#1a2859);
    background-attachment:fixed;
  }
  .stats-page::after{background:linear-gradient(180deg,#2f5220,#203b16)}
  .stats-page h1{color:var(--st-ink);text-shadow:0 3px 0 #090e2b,0 6px 12px rgba(0,0,0,.45)}
  .stats-page .sub{color:var(--st-ink)}
}

.stats{padding-bottom:26vh} /* room above the grass */
@media (max-width:520px){.stats{padding-left:16px;padding-right:16px}}

.stats a{color:inherit}
.stats :focus-visible{outline:3px solid var(--data);outline-offset:3px}

.back{margin:0 0 .2em}
.back a{
  display:inline-block;font-weight:800;text-decoration:none;
  background:var(--st-surface);color:var(--st-ink);border-radius:999px;padding:.3em .95em;
  box-shadow:0 4px 0 var(--st-shadow);
}
.stats-head .sub{margin-bottom:1em}

.loading{text-align:center;font-weight:700;padding:2.5em 0}

/* ----- panels ----- */
.panel{
  background:var(--st-surface);color:var(--st-ink);
  border-radius:28px;padding:clamp(16px,3vw,26px);
  margin:0 0 clamp(20px,4vh,30px);
  box-shadow:0 8px 0 var(--st-shadow),0 14px 30px var(--st-shadow);
}
.eyebrow{
  margin:0 0 .35em;font-size:.9rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--st-ink-2);
}
.fine{margin:.4em 0 0;font-size:.85rem;color:var(--st-ink-2)}

/* ----- sample-data banner ----- */
.banner{
  margin:0 0 20px;padding:.7em 1.1em;border-radius:20px;
  background:var(--sun);color:#101a3d;border:3px dashed rgba(16,26,61,.5);
}
.banner p{margin:0}
.banner a{color:inherit;font-weight:800}
.banner-more{font-size:.9rem;margin-top:.15em}

/* ----- the lead: what is popular right now ----- */
.lead{
  display:grid;gap:clamp(18px,3vw,36px);align-items:start;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
}
.figure{margin:0;font-weight:800;line-height:1}
.hero-num{font-size:clamp(3.6rem,12vw,5.4rem)}
.hero-unit{font-size:clamp(1.4rem,4vw,2rem)}
.figure-words{font-size:clamp(2rem,7vw,3rem);line-height:1.1}
.delta{display:flex;align-items:center;gap:.4em;margin:.55em 0 0;font-weight:800}
.when{margin:.1em 0 0;font-size:.92rem;color:var(--st-ink-2)}
.ico{width:1em;height:1em;flex:none;fill:currentColor}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:1.1em 0 0}
.kpis div{background:var(--st-wash);border-radius:16px;padding:.55em .75em;display:flex;flex-direction:column;justify-content:space-between}
.kpis dt{font-size:.8rem;line-height:1.25;color:var(--st-ink-2)}
.kpis dt small{font-size:inherit;white-space:nowrap}
.kpis dd{margin:.1em 0 0;font-size:clamp(1.1rem,3.6vw,1.5rem);font-weight:800;white-space:nowrap}

.callouts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75em;align-items:center;
  background:var(--st-wash);border-radius:18px;padding:.55em .85em;
}
.callout p{margin:0}
.callout-emoji{font-size:2.1rem;line-height:1}
.callout-kicker{
  display:flex;align-items:center;flex-wrap:wrap;gap:.2em .6em;font-size:.78rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--st-ink-2);
}
.callout-kicker .chip{letter-spacing:0;text-transform:none}
.callout-name{font-size:1.2rem;font-weight:800;line-height:1.25}
.callout-name a{text-decoration:none}
.callout-name a:hover{text-decoration:underline}
.callout-line{font-size:.95rem;color:var(--st-ink-2)}
.calm{margin:.7em 0 0;color:var(--st-ink-2)}
.empty-say{max-width:34em;margin:.7em 0 1.1em;font-size:1.08rem;line-height:1.5}
.lead-empty{grid-template-columns:1fr}

@media (max-width:760px){.lead{grid-template-columns:1fr}}

/* ----- trend chips: always a word and an icon ----- */
.chip{
  display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;
  padding:.1em .65em .1em .5em;border-radius:999px;
  background:var(--st-chip);color:var(--st-chip-ink);
  font-size:.8rem;font-weight:800;line-height:1.5;
}
.chip-hot{background:var(--sun);color:#101a3d}

/* ----- the counting frame ----- */
/* --count-ch (set by the page) is the longest count in characters, so the
   number column is one fixed width and every rod is drawn at the same size */
.frame{
  --count-w:calc(var(--count-ch,2)*1.55ch + .3rem);
  --cols:minmax(0,1fr) 350px calc(var(--count-w) + 2.9rem) 150px;--gap:18px;
}
.frame-head{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.frame-head h2{margin:0;font-size:clamp(1.3rem,3.4vw,1.7rem)}
.view-toggle{display:inline-flex;background:var(--st-wash);border-radius:999px;padding:3px}
.view-toggle button{
  border:0;background:none;color:var(--st-ink);cursor:pointer;
  font:inherit;font-weight:800;min-height:36px;padding:.2em 1.05em;border-radius:999px;
}
.view-toggle button[aria-pressed="true"]{background:var(--st-ink);color:var(--st-surface)}

.key{
  list-style:none;margin:.85em 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.3em 1.5em;
  font-size:.88rem;line-height:1.35;color:var(--st-ink-2);
}
.key li{display:flex;align-items:center;gap:.45em}
.key-mark{width:16px;height:16px;flex:none}
.key-bars{display:inline-flex;align-items:flex-end;gap:2px;width:auto}
.key-bars i{width:3px;height:calc(var(--v)*16px);border-radius:1.5px 1.5px 0 0;background:var(--data)}
.key-bars i.past{background:var(--data-past)}

.cols{display:none}

.rods{list-style:none;margin:.5em 0 0;padding:0}
.rod-row{
  display:grid;align-items:center;gap:6px 10px;padding:14px 0;
  grid-template-columns:minmax(0,1fr) max(var(--count-w),2.6rem);
  grid-template-areas:"who who" "rod count" "facts facts" "spark spark";
  border-top:1px solid var(--st-line);
}
.rod-row:first-child{border-top:0}

.who{grid-area:who;display:flex;align-items:center;gap:.6em;min-width:0}
.who-emoji{font-size:1.8rem;line-height:1;flex:none}
.who-text{display:flex;align-items:center;flex-wrap:wrap;gap:.25em .6em;min-width:0}
.who-name{font-size:1.12rem;font-weight:800;line-height:1.2;text-decoration:none}
a.who-name:hover{text-decoration:underline}

.rod{
  grid-area:rod;display:flex;align-items:center;min-height:30px;max-width:350px;
  border-radius:10px;cursor:default;
}
.rod-svg{display:block;width:100%;height:auto;overflow:visible}
.rod-line{stroke:var(--st-line);stroke-width:2;stroke-linecap:round}
.rod-post{fill:var(--st-post)}
.bead-body{fill:var(--data)}
.is-hot .bead-body{fill:var(--data-hot)}
.bead-glint{fill:#fff;opacity:.36}
.prev-ring{stroke:var(--st-surface);stroke-width:6;stroke-linecap:round}
.prev-line{stroke:var(--st-ink);stroke-width:2;stroke-linecap:round}
.rod:hover .bead-body,.rod:focus-visible .bead-body{filter:brightness(1.13)}

.count{grid-area:count;margin:0;display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.count-num{font-size:1.55rem;font-weight:800}
.count-unit{font-size:.85rem;color:var(--st-ink-2)}

.facts{
  grid-area:facts;margin:0;display:flex;flex-wrap:wrap;gap:0 .5em;
  font-size:.92rem;line-height:1.4;color:var(--st-ink-2);
}
.facts span{white-space:nowrap}
.facts span:not(:last-child)::after{content:"·";margin-left:.5em}

.spark{grid-area:spark;max-width:350px;border-radius:8px;cursor:default}
.spark-days{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));height:30px}
/* the baseline is faint for days before counting began and firm from then on */
.day{display:flex;align-items:flex-end;padding:0 1px;border-radius:3px 3px 0 0;border-bottom:1px solid var(--st-line)}
.day-counted{border-bottom-color:var(--st-axis)}
.bar{display:block;width:100%;height:max(2px,calc(var(--v)*100%));border-radius:2px 2px 0 0;background:var(--data-past)}
.day-now .bar{background:var(--data)}
.is-hot .day-now .bar{background:var(--data-hot)}
.day.is-on{background:var(--st-wash)}
.day.is-on .bar{filter:brightness(1.13)}
.spark-axis{display:flex;justify-content:space-between;margin:2px 0 0;font-size:.72rem;color:var(--st-ink-2)}

/* a game nobody has played yet: the rod is there, the numbers are not */
.is-blank .count{visibility:hidden}
.is-blank .spark{display:none}
.frame-empty .spark,.frame-empty .count{display:none}
.frame-empty .cols span:last-child{visibility:hidden}

.frame-foot{margin-top:.4em;padding-top:.9em;border-top:1px solid var(--st-line)}
.all-time{margin:0;color:var(--st-ink-2)}
.all-time strong{color:var(--st-ink)}

@media (min-width:900px){
  .cols{
    display:grid;grid-template-columns:var(--cols);gap:0 var(--gap);
    margin:1.1em 0 0;padding-bottom:.45em;border-bottom:1px solid var(--st-line);
    font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--st-ink-2);
  }
  .rods{margin-top:0}
  .rod-row{
    grid-template-columns:var(--cols);gap:0 var(--gap);padding:11px 0;
    grid-template-areas:"who rod count spark" "who facts facts spark";
  }
  .who-text{flex-direction:column;align-items:flex-start;gap:.25em}
  .count{flex-direction:row;align-items:baseline;gap:.3em}
  .spark-axis{display:none}
  .is-blank .spark{display:block;visibility:hidden}
}

@media (prefers-reduced-motion:no-preference){
  .rod-svg .bead{animation:bead-in .55s cubic-bezier(.2,.85,.3,1.15) both;animation-delay:calc(var(--i)*24ms + 120ms)}
  @keyframes bead-in{from{transform:translateX(70px);opacity:0}to{transform:none;opacity:1}}
}

/* ----- the same numbers as tables ----- */
.tables[hidden],.rods[hidden],.key[hidden],.cols[hidden]{display:none}
.table-caption{margin:1em 0 .5em;color:var(--st-ink-2);font-size:.92rem}
.table-scroll{overflow-x:auto;border-radius:12px}
.numbers{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
.numbers th,.numbers td{padding:.45em .7em;border-bottom:1px solid var(--st-line);white-space:nowrap;text-align:left}
.numbers thead th{font-size:.78rem;line-height:1.25;color:var(--st-ink-2);vertical-align:bottom;white-space:normal;min-width:5.6em;text-align:right}
.numbers thead th:first-child,.numbers thead th.t{text-align:left}
.numbers td.n{text-align:right}
.numbers tbody th,.numbers tfoot th,.numbers thead th:first-child{position:sticky;left:0;background:var(--st-surface)}
.numbers tfoot th,.numbers tfoot td{font-weight:800;border-bottom:0}
.days-detail{margin-top:1.2em}
.days-detail summary{cursor:pointer;font-weight:800;border-radius:8px}

/* ----- tooltip ----- */
.tip{
  position:fixed;left:0;top:0;z-index:20;pointer-events:none;
  max-width:min(270px,calc(100vw - 16px));padding:.55em .85em;border-radius:14px;
  background:var(--st-ink);color:var(--st-surface);
  font-size:.88rem;line-height:1.35;box-shadow:0 6px 18px rgba(3,6,20,.32);
}
.tip[hidden]{display:none}
.tip p{margin:0}
.tip .tip-title{font-weight:800;margin-bottom:.15em}
.tip-line span{opacity:.82}
.tip .tip-quiet{margin-top:.35em;padding-top:.35em;border-top:1px solid color-mix(in srgb,var(--st-surface) 30%,transparent)}

/* ----- numbers not available ----- */
.notice{text-align:center}
.notice h2{margin:.1em 0 .3em;font-size:clamp(1.4rem,4.5vw,2rem)}
.notice p{max-width:34em;margin:.6em auto}
.notice-art{font-size:3.4rem;line-height:1;margin:0 auto}
.stats .btn{display:inline-block;text-decoration:none;font-weight:800;background:var(--sun);color:#101a3d}

/* ----- what gets counted ----- */
.about{
  background:var(--st-quiet-panel);color:var(--st-ink);
  border-radius:24px;padding:clamp(14px,3vw,22px) clamp(16px,3vw,26px);
  font-size:.98rem;line-height:1.55;
}
.about h2{margin:0 0 .3em;font-size:1.15rem}
.about p{margin:.5em 0;max-width:46em}
.about a{font-weight:800}
.robots{font-size:.92rem;color:var(--st-ink-2)}