/* Guess It! Poster Block design. Everything is scoped under .gi so themes can't bleed in. */
.gi{
  container-type:inline-size;
  --gi-bg:#EAF0FF; --gi-surface:#FFFFFF; --gi-ink:#0F1733; --gi-muted:#4A5272;
  --gi-blue:#2350E6; --gi-orange:#FF7A1A; --gi-pale:#8FA8F5; --gi-rule:#D5DDF5; --gi-bad:#B03A00;
  --gi-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --gi-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; background:var(--gi-bg); color:var(--gi-ink);
  font-family:var(--gi-body); font-size:16px; line-height:1.45; text-align:left;
}
.gi *,.gi *::before,.gi *::after{box-sizing:inherit}
.gi p{margin:0}
.gi h1,.gi h2,.gi h3{margin:0;color:inherit;text-transform:none;letter-spacing:normal;font-family:var(--gi-display);font-weight:400}
.gi button,.gi input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal}
.gi :focus-visible{outline:3px solid var(--gi-orange)!important;outline-offset:2px}
.gi-wrap{max-width:440px;margin:0 auto;padding:22px 20px 32px;display:flex;flex-direction:column;gap:14px;min-height:640px}
.gi-loading{color:var(--gi-muted);font-weight:600;padding:40px 0;text-align:center}
.gi-brand{font-size:13px;font-weight:600}
.gi-box{background:var(--gi-surface);border:3px solid var(--gi-ink)}
.gi-hot{background:var(--gi-orange);color:var(--gi-ink);border:3px solid var(--gi-ink)}
.gi-label{font-size:13px;font-weight:800}
.gi-big{font-family:var(--gi-display);font-size:26px;line-height:1.1}
.gi-grow{flex:1 1 auto}

/* Start */
.gi-hero{background:var(--gi-blue);color:#fff;border:3px solid var(--gi-ink);box-shadow:6px 6px 0 var(--gi-ink);padding:18px 18px 14px}
.gi .gi-hero h1{font-size:clamp(44px,17cqi,76px)!important;line-height:.88!important;letter-spacing:-2px!important;color:#fff!important}
.gi-hero .gi-date{font-size:15px;font-weight:600;margin-top:8px}
.gi-pair{display:flex;gap:12px}
.gi-pair > .gi-box{flex:1}
.gi-pair > .gi-box,.gi-pair > .gi-hot{padding:12px 14px}
.gi-rules{padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.gi-rules div{display:flex;gap:10px}
.gi-rules strong{font-family:var(--gi-display);font-weight:400}

.gi-catbox{padding:12px 14px}

/* Buttons */
.gi .gi-btn{cursor:pointer;border:3px solid var(--gi-ink)!important;border-radius:0!important;box-shadow:4px 4px 0 var(--gi-ink);font-family:var(--gi-display)!important;font-weight:400!important;font-size:16px!important;letter-spacing:.5px;padding:0 18px!important;height:54px;line-height:1!important;background:var(--gi-surface)!important;color:var(--gi-ink)!important;text-decoration:none}
.gi .gi-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--gi-ink)}
.gi .gi-btn:disabled{opacity:.6;cursor:default}
.gi .gi-btn.go{background:var(--gi-orange)!important}
.gi .gi-btn.blue{background:var(--gi-blue)!important;color:#fff!important}
.gi .gi-btn.wide{width:100%;height:62px;font-size:24px!important;box-shadow:5px 5px 0 var(--gi-ink)}
.gi-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 24px}
.gi .gi-link{background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;font-weight:800;font-size:15px;text-decoration:underline;padding:8px!important;color:var(--gi-ink)!important}

/* Play */
.gi-hud{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.gi-hud .t{display:flex;flex-direction:column;justify-content:flex-end}
.gi-hud .t b{font-family:var(--gi-display);font-weight:400;font-size:30px;line-height:1}
.gi-points{background:var(--gi-orange);border:3px solid var(--gi-ink);box-shadow:4px 4px 0 var(--gi-ink);padding:6px 14px;text-align:right;min-width:106px}
.gi-points small{display:block;font-size:12px;font-weight:800}
.gi-points strong{font-family:var(--gi-display);font-weight:400;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.gi-segs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.gi-seg{position:relative;height:30px;border:3px solid var(--gi-ink);background:var(--gi-surface);overflow:hidden}
.gi-seg i{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--gi-pale)}
.gi-seg.done i{width:100%;background:var(--gi-blue)}
.gi-seg span{position:relative;display:flex;height:100%;align-items:center;justify-content:center;font-family:var(--gi-display);font-size:13px}
.gi-seg.done span{color:#fff}
.gi-under{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.gi-clues{padding:2px 16px}
.gi-clue{padding:12px 0;border-bottom:2px solid var(--gi-rule)}
.gi-clue:last-child{border-bottom:none}
.gi-clue .n{font-size:12px;font-weight:800;color:var(--gi-blue)}
.gi-clue p{margin:3px 0 0;font-size:17px;line-height:1.38;font-weight:600}
.gi-clue.new p{animation:gi-drop .45s ease-out}
@keyframes gi-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gi-clue.dim p{color:var(--gi-muted);font-weight:400;font-size:15px}
.gi-tagrow{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:800;min-height:24px}
.gi-tag{background:var(--gi-ink);color:var(--gi-bg);padding:3px 8px;font-size:12px}
.gi-miss{color:var(--gi-bad)}
.gi-guess label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.gi-guess .row{display:flex;gap:8px}
.gi .gi-guess input{flex:1;min-width:0;height:54px;padding:0 14px!important;border:3px solid var(--gi-ink)!important;border-radius:0!important;background:var(--gi-surface)!important;font-size:17px!important;font-weight:600;box-shadow:none!important;color:var(--gi-ink)!important}
.gi-shake{animation:gi-shake .3s}
@keyframes gi-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Done */
.gi-result{padding:18px;border:3px solid var(--gi-ink);box-shadow:6px 6px 0 var(--gi-ink)}
.gi-result.win{background:var(--gi-blue);color:#fff}
.gi-result.lose{background:var(--gi-ink);color:var(--gi-bg)}
.gi-result .gi-label{font-size:14px}
.gi-ans{font-family:var(--gi-display);font-size:clamp(30px,10cqi,48px);line-height:.98;letter-spacing:-1px;margin-top:6px;text-transform:uppercase;overflow-wrap:anywhere}
.gi-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gi-tiles .gi-hot{grid-row:span 2;padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end}
.gi-tiles .gi-hot strong{font-family:var(--gi-display);font-weight:400;font-size:56px;line-height:1}
.gi-tiles .gi-box{padding:8px 12px}
.gi-tiles .gi-box b{font-family:var(--gi-display);font-weight:400;font-size:22px;display:block}
.gi-tiles .gi-box span{font-size:13px;font-weight:600}
.gi-note{text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.gi .gi-h2{font-size:24px;line-height:1.05}

/* Leaderboard */
.gi-board{padding:12px 16px 6px}
.gi-board ol{list-style:none;margin:8px 0 0;padding:0}
.gi-board li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:2px solid var(--gi-rule);margin:0}
.gi-board li:last-child{border-bottom:none}
.gi-board li.me{background:#FFF1E6;box-shadow:inset 4px 0 0 var(--gi-orange);padding-left:8px}
.gi-board .r{font-family:var(--gi-display)}
.gi-board .nm{font-weight:800;letter-spacing:.08em}
.gi-board .p{font-weight:800;font-variant-numeric:tabular-nums}
.gi-board .sub{font-size:13px;color:var(--gi-muted);font-weight:600}
.gi-initials{display:flex;gap:8px;margin-top:10px}
.gi .gi-initials input{width:130px;height:48px;padding:0 10px!important;border:3px solid var(--gi-ink)!important;border-radius:0!important;background:var(--gi-surface)!important;font-family:var(--gi-display)!important;font-size:20px!important;letter-spacing:.15em;text-transform:uppercase;color:var(--gi-ink)!important}
.gi .gi-initials .gi-btn{height:48px}

/* Lists */
.gi-list{padding:0}
.gi .gi-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 16px!important;border:none!important;border-bottom:2px solid var(--gi-rule)!important;border-radius:0!important;background:none!important;box-shadow:none!important;cursor:pointer;text-align:left;color:var(--gi-ink)!important;font-size:16px!important;font-weight:400!important}
.gi .gi-item:last-child{border-bottom:none!important}
.gi-item b{font-family:var(--gi-display);font-weight:400}
.gi-item small{display:block;font-size:13px;color:var(--gi-muted);font-weight:600}
.gi-pill{font-size:13px;font-weight:800;padding:4px 10px;border:2px solid var(--gi-ink);white-space:nowrap}
.gi-pill.won{background:var(--gi-blue);color:#fff}
.gi-pill.lost{background:var(--gi-surface)}
.gi-pill.open{background:var(--gi-orange)}
.gi-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gi-stats > div{padding:12px 14px}
.gi-stats b{font-family:var(--gi-display);font-weight:400;font-size:32px;display:block;line-height:1.1}
.gi-stats span{font-size:13px;font-weight:600}
.gi-error{color:var(--gi-bad);font-weight:800;text-align:center}



/* Initials callout */
.gi-callout{background:var(--gi-orange);border:3px solid var(--gi-ink);box-shadow:6px 6px 0 var(--gi-ink);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.gi-callout p{font-size:15px;font-weight:600}
.gi-callout .gi-initials{margin-top:6px;align-items:center;flex-wrap:wrap}
.gi-callout .gi-miss{min-height:1.2em;font-size:14px}
.gi-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gi .gi-inline{padding:0!important;font-size:inherit}
.gi-onboard{margin-top:2px!important}
.gi .gi-play-links .gi-link:disabled{opacity:.5;cursor:default}

/* Columns: stacked on phones, side by side when the game has room */
.gi-cols{display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.gi-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Medium width: use the full space, still one column */
@container (min-width:560px){
  .gi-wrap{max-width:none;padding:30px 32px 40px;gap:18px}
  .gi .gi-hero h1{font-size:clamp(70px,13cqi,104px)!important}
  .gi-hero{padding:24px 24px 20px}
  .gi-hero .gi-date{font-size:17px}
  .gi-big{font-size:30px}
  .gi-catbox{padding:18px 20px}
  .gi-rules{padding:18px 20px;gap:12px;font-size:17px}
  .gi .gi-btn.wide{height:68px;font-size:26px!important}
  .gi-hud .t b{font-size:38px}
  .gi-points{min-width:150px}
  .gi-points strong{font-size:40px}
  .gi-seg{height:36px}
  .gi-clues{padding:4px 22px}
  .gi-clue p{font-size:19px}
  .gi-clue.dim p{font-size:16px}
  .gi-ans{font-size:clamp(44px,8cqi,72px)}
  .gi-tiles{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .gi-tiles .gi-hot{grid-row:auto}
  .gi-tiles .gi-hot strong{font-size:52px}
  .gi-tiles .gi-box{padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end}
  .gi-tiles .gi-box b{font-size:24px}
  .gi .gi-h2{font-size:30px}
  .gi-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@container (min-width:860px){
  .gi-wrap{max-width:1200px;padding:36px 40px 44px;gap:22px;min-height:620px}
  .gi-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  .gi-col{gap:18px}

  /* Start: the hero fills the left column, everything else stacks on the right */
  .gi-cols.start .gi-hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;padding:30px 30px 26px;min-height:420px}
  .gi .gi-cols.start .gi-hero h1{font-size:clamp(76px,9cqi,122px)!important;letter-spacing:-3px!important}
  .gi-hero .gi-date{font-size:19px}
  .gi-big{font-size:32px}
  .gi-rules{padding:20px 22px;gap:14px;font-size:17px}
  .gi .gi-btn.wide{height:72px;font-size:28px!important}

  /* Play: clues get the wide column, guessing sits beside them */
  .gi-hud .t b{font-size:44px}
  .gi-points{min-width:170px;padding:8px 18px}
  .gi-points small{font-size:14px}
  .gi-points strong{font-size:46px}
  .gi-seg{height:40px}
  .gi-seg span{font-size:15px}
  .gi-under{font-size:15px}
  .gi-cols.play{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
  .gi-cols.play .gi-clues{padding:6px 24px;min-height:330px}
  .gi-cols.play .gi-clue{padding:16px 0}
  .gi-cols.play .gi-clue .n{font-size:13px}
  .gi-cols.play .gi-clue p{font-size:21px}
  .gi-cols.play .side{position:sticky;top:24px;background:var(--gi-surface);border:3px solid var(--gi-ink);box-shadow:6px 6px 0 var(--gi-ink);padding:20px}
  .gi-cols.play .side .gi-grow{display:none}
  .gi-cols.play .side .gi-links{justify-content:space-between}
  .gi-cols.play .side .gi-link{padding-left:0!important}

  /* Done: result on the left, leaderboard on the right */
  .gi-cols.done{align-items:start}
  .gi-result{padding:24px}
  .gi-ans{font-size:clamp(48px,6.5cqi,76px)}
  .gi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gi-tiles .gi-hot{grid-row:span 2}
  .gi-tiles .gi-hot strong{font-size:68px}
  .gi-tiles .gi-box b{font-size:26px}
  .gi-cols.done .side .gi-grow{display:none}
  .gi-board{padding:18px 20px 8px}
  .gi-board li{padding:10px 0;font-size:17px}

  .gi .gi-h2{font-size:34px}

  /* Archive and stats */
  .gi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gi .gi-list .gi-item:nth-child(odd){border-right:2px solid var(--gi-rule)!important}
  .gi .gi-list .gi-item:nth-last-child(-n+2){border-bottom:none!important}
  .gi-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gi-stats b{font-size:40px}
}


/* ---------- Start screen: puzzle-app style (icon, serif name, pill buttons) ---------- */
.gi:has(.gi-splash){background:#C7ECEC}
.gi .gi-wrap:has(> .gi-splash){max-width:560px!important;min-height:0;padding:52px 20px 44px!important;align-items:center}
.gi-splash{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.gi-icon{display:block;width:84px;height:84px}
.gi .gi-name{margin-top:18px;font-family:"Fraunces",Georgia,"Times New Roman",serif!important;font-weight:800!important;font-size:clamp(40px,11cqi,58px)!important;line-height:1!important;letter-spacing:-.02em!important;color:#121212}
.gi .gi-sub{margin-top:12px;max-width:360px;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:20px;line-height:1.35;color:#121212}
.gi-pills{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.gi .gi-pill{display:inline-flex;align-items:center;justify-content:center;min-width:190px;height:48px;padding:0 28px;border:1px solid #121212;border-radius:999px;background:transparent;color:#121212;box-shadow:none;cursor:pointer;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none}
.gi .gi-pill:hover{background:rgba(0,0,0,.06)}
.gi .gi-pill.solid{background:#121212;color:#FFFFFF}
.gi .gi-pill.solid:hover{background:#333333}
.gi .gi-pill:disabled{opacity:.6;cursor:default}
.gi .gi-dateline{margin-top:24px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;color:#121212}
.gi .gi-splashfacts{margin-top:4px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:13px;color:#4A4A4A}
.gi-how{margin-top:20px;width:100%;max-width:440px;text-align:left}
.gi-how summary{cursor:pointer;text-align:center;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;list-style:none}
.gi-how summary::-webkit-details-marker{display:none}
.gi-howlist{margin-top:12px;padding:14px 18px;background:rgba(255,255,255,.7);border-radius:12px;display:flex;flex-direction:column;gap:8px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45}
.gi-howlist > div{display:flex;gap:10px}
.gi-howlist strong{flex:0 0 auto;font-weight:700}

/* The logo in the game header and results: small icon + serif name */
.gi .gi-logo{display:inline-flex;align-items:center;gap:.3em;font-family:"Fraunces",Georgia,serif;font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-transform:none}
.gi-icon-sm{display:block;width:1em;height:1em;flex:0 0 auto}

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


/* ==========================================================
   Game screens: puzzle-app style (rounded cards, serif headings, pill buttons)
   ========================================================== */
.gi{
  --gi-bg:#EEF8F8; --gi-surface:#FFFFFF; --gi-ink:#121212; --gi-muted:#4F5B5B; --gi-rule:#D3E6E6;
  --gi-blue:#1FA3A3; --gi-orange:#F4C430; --gi-pale:#8FD3D3; --gi-soft:#C7ECEC; --gi-yel-soft:#FBEBB5; --gi-bad:#C23B22;
  --gi-display:"Fraunces",Georgia,"Times New Roman",serif;
  --gi-body:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gi-sans:"Libre Franklin","DM Sans",system-ui,sans-serif;
}
.gi h1,.gi h2,.gi h3,.gi .gi-h2{font-family:var(--gi-display);font-weight:900;letter-spacing:-.02em}
.gi :focus-visible{outline:3px solid var(--gi-blue)!important}
.gi-brand{color:var(--gi-muted)}
.gi-label{font-weight:700;color:var(--gi-muted)}
.gi-box{background:var(--gi-surface);border:1px solid var(--gi-rule);border-radius:16px}
.gi-hot{background:var(--gi-blue);color:#FFFFFF;border:0;border-radius:16px}
.gi-hot .gi-label{color:#FFFFFF;opacity:.85}
.gi-big{font-family:var(--gi-display);font-weight:900;letter-spacing:-.02em}
.gi-note{font-weight:600;color:var(--gi-muted)}
.gi-error{color:var(--gi-bad);font-weight:600}

/* Buttons: black pills */
.gi .gi-btn{border:1px solid var(--gi-ink)!important;border-radius:999px!important;box-shadow:none!important;background:var(--gi-ink)!important;color:#FFFFFF!important;font-family:var(--gi-body)!important;font-weight:700!important;font-size:16px!important;letter-spacing:0;height:52px;padding:0 24px!important}
.gi .gi-btn:hover{background:#333333!important}
.gi .gi-btn:active{transform:none;box-shadow:none}
.gi .gi-btn.go,.gi .gi-btn.blue{background:var(--gi-ink)!important;color:#FFFFFF!important}
.gi .gi-btn.wide{height:56px;font-size:18px!important;box-shadow:none}
.gi .gi-link{font-weight:600;text-underline-offset:3px}

/* Playing */
.gi-hud{align-items:center}
.gi-hud .t b{font-family:var(--gi-display);font-weight:900}
.gi-points{background:var(--gi-ink);color:#FFFFFF;border:0;border-radius:14px;box-shadow:none;padding:8px 16px}
.gi-points small{font-weight:600;opacity:.8}
.gi-points strong{font-family:var(--gi-display);font-weight:900}
.gi-segs{gap:6px}
.gi-seg{height:26px;border:0;border-radius:999px;background:var(--gi-rule)}
.gi-seg i{background:var(--gi-pale);border-radius:999px}
.gi-seg.done i{background:var(--gi-blue)}
.gi-seg span{font-family:var(--gi-sans);font-weight:800;font-size:12px}
.gi-under{font-weight:600;color:var(--gi-muted)}
.gi-clues{border-radius:18px;box-shadow:0 10px 30px -18px rgba(18,18,18,.35)}
.gi-clue{border-bottom:1px solid var(--gi-rule)}
.gi-clue .n{font-weight:800;color:var(--gi-blue);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.gi-clue p{font-weight:500}
.gi-play .gi-clue:last-child,.gi-cols.play .gi-clue:last-child{position:relative}
.gi-cols.play .gi-clue:last-child p{background:var(--gi-yel-soft);margin-left:-8px;margin-right:-8px;padding:6px 8px;border-radius:10px}
.gi-tagrow{font-weight:600}
.gi-tag{background:var(--gi-soft);color:var(--gi-ink);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.gi-miss{color:var(--gi-bad);font-weight:600}
.gi-guess label{font-weight:700;color:var(--gi-muted)}
.gi .gi-guess input{height:52px;border:1px solid var(--gi-ink)!important;border-radius:999px!important;padding:0 20px!important;font-family:var(--gi-body)!important;font-weight:600}
.gi .gi-guess input.gi-shake{border-color:var(--gi-bad)!important}

/* Done */
.gi-result{border:0;border-radius:18px;box-shadow:none;padding:18px 20px}
.gi-result.win{background:var(--gi-soft);color:var(--gi-ink)}
.gi-result.lose{background:#ECEDED;color:var(--gi-ink)}
.gi-result .gi-label{color:var(--gi-ink)}
.gi-ans{font-family:var(--gi-sans);font-weight:800;letter-spacing:.01em;line-height:1.02}
.gi-tiles .gi-hot strong{font-family:var(--gi-display);font-weight:900}
.gi-tiles .gi-box{border-radius:14px}
.gi-tiles .gi-box b{font-family:var(--gi-display);font-weight:900}
.gi-tiles .gi-box span{color:var(--gi-muted)}
.gi-clue.dim p{color:var(--gi-muted)}

/* Initials callout */
.gi-callout{background:var(--gi-yel-soft);border:0;border-radius:18px;box-shadow:none}
.gi .gi-initials input{border:1px solid var(--gi-ink)!important;border-radius:999px!important;font-family:var(--gi-body)!important;font-weight:700;padding:0 18px!important}

/* Leaderboard */
.gi-board{padding:16px 18px 8px}
.gi-board li{border-bottom:1px solid var(--gi-rule)}
.gi-board li.me{padding-right:10px;background:var(--gi-yel-soft);box-shadow:inset 4px 0 0 var(--gi-orange);border-radius:8px}
.gi-board .r{font-family:var(--gi-display);font-weight:900}

/* Archive and stats */
.gi .gi-item{border-bottom:1px solid var(--gi-rule)!important}
.gi .gi-item:hover{background:var(--gi-bg)!important}
.gi-item b{font-family:var(--gi-display);font-weight:900}
.gi-status{font-size:13px;font-weight:700;padding:4px 12px;border:1px solid var(--gi-ink);border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.gi-status.won{background:var(--gi-blue);border-color:var(--gi-blue);color:#FFFFFF}
.gi-status.lost{background:var(--gi-surface)}
.gi-status.open{background:var(--gi-orange)}
.gi-stats b{font-family:var(--gi-display);font-weight:900}
.gi-stats span{color:var(--gi-muted)}
.gi-stats .gi-hot span{color:#FFFFFF;opacity:.9}

@container (min-width:860px){
  .gi-cols.play .side{border:1px solid var(--gi-rule);border-radius:18px;box-shadow:none}
  .gi .gi-list .gi-item:nth-child(odd){border-right:1px solid var(--gi-rule)!important}
}

/* Same weight as the homepage tiles and the Ned Hardy logo (Fraunces 900). */
.gi .gi-name,.gi .gi-logo{font-weight:900!important}

/* Points, times and stats: the bold sans from the letter tiles, easier to read than the heavy serif. */
.gi-points strong,.gi-tiles .gi-hot strong,.gi-tiles .gi-box b,.gi-board .r,.gi-stats b{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:800!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums lining-nums!important}

/* Archive dates: the bold sans, easier to scan than the heavy serif. */
.gi .gi-item b{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:700!important;letter-spacing:0!important;font-size:16px!important}