/* Phrase Race. Puzzle-app look in blue, matching the Ned Hardy collection (see "Game screens" at the end).
   Everything is scoped under .btb so theme styles stay out. */
.btb{
  container-type:inline-size;
  --btb-bg:#E5E8EB; --btb-surface:#FFFFFF; --btb-ink:#12161A; --btb-muted:#47505A; --btb-rule:#D1D6DB;
  --btb-main:#22272E; --btb-accent:#3FD0FF; --btb-accent-soft:#DDF5FD; --btb-bad:#B42318;
  --btb-hidden:#12161A;
  --btb-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --btb-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --btb-t:clamp(22px,8cqi,44px);
  box-sizing:border-box; background:var(--btb-bg); color:var(--btb-ink);
  font-family:var(--btb-body); font-size:16px; font-weight:400; line-height:1.45; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.btb *,.btb *::before,.btb *::after{box-sizing:inherit}
.btb p{margin:0}
.btb ul,.btb ol{margin:0;padding:0;list-style:none}
.btb h1,.btb h2,.btb h3{margin:0;color:inherit;font-family:var(--btb-display);font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.05}
.btb button,.btb input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none}
.btb button{cursor:pointer}
.btb :focus-visible{outline:3px solid var(--btb-accent)!important;outline-offset:2px}
.btb .btb-hidden{display:none!important}

/* Frame */
.btb-wrap{max-width:none;margin:0;display:flex;flex-direction:column;align-items:stretch}
.btb-wrap > .btb{width:100%}
.btb-tab{align-self:flex-start;background:var(--btb-main);color:#fff;font-family:"Archivo Black","Arial Black",sans-serif;font-size:13px;line-height:1;letter-spacing:.06em;padding:8px 14px;text-transform:uppercase}
.btb-inner{max-width:440px;margin:0 auto;padding:22px 20px 32px;display:flex;flex-direction:column;gap:14px;min-height:620px}
.btb-loading{color:var(--btb-muted);font-weight:600;padding:40px 0;text-align:center}
.btb-error{background:#FDECEA;color:var(--btb-bad);border:3px solid var(--btb-ink);padding:12px 14px;font-weight:800}

/* Building blocks */
.btb-brand{font-size:13px;font-weight:600}
.btb-label{font-size:13px;font-weight:800}
.btb-box{background:var(--btb-surface);border:3px solid var(--btb-ink)}
.btb-shadow{box-shadow:6px 6px 0 var(--btb-ink)}
.btb-grow{flex:1 1 auto}
.btb-big{font-family:var(--btb-display);font-size:28px;line-height:1.1}
.btb-note{text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

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

/* Start */
.btb-hero{background:var(--btb-main);color:#fff;border:3px solid var(--btb-ink);box-shadow:6px 6px 0 var(--btb-ink);padding:20px 18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.btb .btb-hero h1{font-size:clamp(50px,17cqi,74px)!important;line-height:.88!important;letter-spacing:-2px!important;color:#fff!important}
.btb-hero .btb-when{font-size:15px;font-weight:600}
.btb-catbox{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.btb-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:800}
.btb-dots{display:inline-flex;gap:4px;vertical-align:middle;margin-left:6px}
.btb-dots i{width:11px;height:11px;border:2px solid var(--btb-ink);background:var(--btb-surface)}
.btb-dots i.on{background:var(--btb-accent)}
.btb-rules{padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.btb-rules li{display:flex;gap:10px;margin:0}
.btb-rules strong{font-family:var(--btb-display);font-weight:400;flex:0 0 auto}

/* Playing */
.btb-hud{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.btb-hud .t{display:flex;flex-direction:column;justify-content:flex-end}
.btb-hud .t b{font-family:var(--btb-display);font-weight:400;font-size:clamp(22px,7.5cqi,30px);line-height:1;white-space:nowrap}
.btb-worth{background:var(--btb-accent);border:3px solid var(--btb-ink);box-shadow:4px 4px 0 var(--btb-ink);padding:6px 14px;text-align:right;min-width:106px}
.btb-worth small{display:block;font-size:12px;font-weight:800}
.btb-worth strong{font-family:var(--btb-display);font-weight:400;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.btb-timer{height:14px;border:3px solid var(--btb-ink);background:var(--btb-surface);overflow:hidden}
.btb-timer div{height:100%;width:100%;background:var(--btb-main);transform-origin:left}
.btb-timer div.low{animation:btb-blink 1s steps(2,start) infinite}
@keyframes btb-blink{to{background:var(--btb-accent)}}
.btb-clock{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.btb-stage{background:var(--btb-surface);border:3px solid var(--btb-ink);box-shadow:6px 6px 0 var(--btb-ink);padding:20px 10px}
.btb-board{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--btb-t)*.75) calc(var(--btb-t)*.9);min-height:calc(var(--btb-t)*1.15)}
.btb-word{display:flex;gap:3px}
.btb-tile{width:var(--btb-t);height:calc(var(--btb-t)*1.15);border:2.5px solid var(--btb-ink);background:var(--btb-hidden);display:grid;place-items:center;font-family:var(--btb-display);font-size:calc(var(--btb-t)*.6);line-height:1;color:transparent;transition:background .2s,color .2s}
.btb-tile.show{background:var(--btb-surface);color:var(--btb-ink)}
.btb-tile.show.new{background:var(--btb-accent)}
.btb-tile.punct{background:transparent;border-color:transparent;color:var(--btb-ink);width:calc(var(--btb-t)*.4)}
.btb-tile.flip{animation:btb-flip .45s ease}
@keyframes btb-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.btb-tagrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:800;min-height:24px}
.btb-tag{background:var(--btb-ink);color:var(--btb-bg);padding:3px 8px;font-size:12px;font-weight:800}
.btb-wrong{color:var(--btb-muted)}
.btb-wrong.bad{color:var(--btb-bad)}
.btb-guess label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.btb-guess .row{display:flex;gap:8px}
.btb .btb-guess input{flex:1;min-width:0;width:auto;height:54px;padding:0 14px!important;border:3px solid var(--btb-ink)!important;border-radius:0!important;background:var(--btb-surface)!important;color:var(--btb-ink)!important;font-family:var(--btb-body)!important;font-size:17px!important;font-weight:700;text-transform:uppercase;box-shadow:none!important;line-height:1.2}
.btb .btb-guess input.shake{animation:btb-shake .35s;border-color:var(--btb-bad)!important}
@keyframes btb-shake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}

/* Done */
.btb-result{background:var(--btb-main);color:#fff;border:3px solid var(--btb-ink);box-shadow:6px 6px 0 var(--btb-ink);padding:16px 18px}
.btb-result .btb-label{font-size:14px}
.btb-answer{font-family:var(--btb-display);font-size:clamp(26px,8cqi,40px);line-height:1.02;margin-top:6px;overflow-wrap:anywhere}
.btb-tiles{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.btb-tiles .pts{background:var(--btb-accent);border:3px solid var(--btb-ink);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;grid-row:span 3}
.btb-tiles .pts strong{font-family:var(--btb-display);font-weight:400;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.btb-tiles .pts span{font-size:13px;font-weight:600}
.btb-tiles .fact{padding:8px 12px}
.btb-tiles .fact b{display:block;font-family:var(--btb-display);font-weight:400;font-size:21px;line-height:1.1}
.btb-tiles .fact span{font-size:12px;font-weight:600}

/* Initials callout */
.btb-callout{background:var(--btb-accent);border:3px solid var(--btb-ink);box-shadow:6px 6px 0 var(--btb-ink);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.btb-callout p{font-size:15px;font-weight:600}
.btb-nick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btb .btb-nick input{width:130px;height:48px;padding:0 10px!important;border:3px solid var(--btb-ink)!important;border-radius:0!important;background:var(--btb-surface)!important;color:var(--btb-ink)!important;font-family:var(--btb-display)!important;font-size:20px!important;letter-spacing:.15em;text-transform:uppercase;box-shadow:none!important}
.btb .btb-nick .btb-btn{height:48px}
.btb-toast{color:var(--btb-bad);font-weight:800;font-size:14px;min-height:1.2em}

/* Leaderboard */
.btb-board-box{padding:12px 16px 6px}
.btb-lb-sum{font-size:13px;font-weight:600;color:var(--btb-muted)}
.btb-lb{margin-top:8px!important}
.btb-lb li{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:2px solid var(--btb-rule);margin:0}
.btb-lb li:last-child{border-bottom:none}
.btb-lb li.me{background:var(--btb-accent-soft);box-shadow:inset 4px 0 0 var(--btb-accent);padding-left:8px}
.btb-lb .r{font-family:var(--btb-display)}
.btb-lb .n{font-weight:800;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btb-lb .t{font-size:13px;color:var(--btb-muted);font-variant-numeric:tabular-nums}
.btb-lb .p{font-weight:800;font-variant-numeric:tabular-nums}
.btb-empty{color:var(--btb-muted);font-size:14px;padding:6px 0}
.btb-initials{letter-spacing:.08em}

/* Archive */
.btb-alist{padding:0}
.btb .btb-arow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;text-align:left;background:none!important;border:none!important;border-bottom:2px solid var(--btb-rule)!important;border-radius:0!important;box-shadow:none!important;padding:12px 16px!important;color:var(--btb-ink)!important;font-size:16px!important;font-weight:400!important;min-height:56px}
.btb .btb-arow:last-child{border-bottom:none!important}
.btb .btb-arow:hover{background:var(--btb-accent-soft)!important}
.btb-arow .d{font-family:var(--btb-display);font-weight:400}
.btb-arow .d small{display:block;font-family:var(--btb-body);font-weight:600;font-size:13px;color:var(--btb-muted)}
.btb-arow .lvl{font-size:13px;font-weight:600;color:var(--btb-muted)}
.btb-pill{font-size:13px;font-weight:800;padding:4px 10px;border:2px solid var(--btb-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.btb-pill.won{background:var(--btb-main);color:#fff}
.btb-pill.open{background:var(--btb-accent)}
.btb-pill.miss{background:var(--btb-surface)}

/* Columns: stacked on phones, side by side when there's room */
.btb-cols{display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.btb-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Medium width: fill the space, still one column */
@container (min-width:560px){
  .btb-inner{max-width:none;padding:30px 32px 40px;gap:18px}
  .btb .btb-hero h1{font-size:clamp(70px,13cqi,104px)!important}
  .btb-hero{padding:24px}
  .btb-hero .btb-when{font-size:17px}
  .btb-rules{padding:18px 20px;font-size:17px}
  .btb .btb-btn.wide{height:68px;font-size:26px!important}
  .btb-hud .t b{font-size:38px}
  .btb-worth{min-width:150px}
  .btb-worth strong{font-size:40px}
  .btb-stage{padding:28px 18px}
  .btb{--btb-t:clamp(26px,6cqi,48px)}
  .btb-tiles .pts strong{font-size:64px}
  .btb-alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .btb .btb-alist .btb-arow:nth-child(odd){border-right:2px solid var(--btb-rule)!important}
}

/* Wide: two columns */
@container (min-width:860px){
  .btb-inner{max-width:1200px;padding:36px 40px 44px;gap:22px}
  .btb-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  .btb-col{gap:18px}
  .btb-cols.start .btb-hero{flex:1 1 auto;padding:30px;min-height:380px}
  .btb .btb-cols.start .btb-hero h1{font-size:clamp(90px,10cqi,130px)!important;letter-spacing:-3px!important}
  .btb-cols.play{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
  .btb-cols.play .side{position:sticky;top:24px;background:var(--btb-surface);border:3px solid var(--btb-ink);box-shadow:6px 6px 0 var(--btb-ink);padding:22px}
  .btb-cols.play .side .btb-links{justify-content:flex-start}
  .btb-cols.play .side .btb-link{padding-left:0!important}
  .btb-cols.play .btb-stage{padding:44px 20px}
  .btb{--btb-t:clamp(30px,3.8cqi,54px)}
  .btb-hud .t b{font-size:44px}
  .btb-worth strong{font-size:46px}
  .btb-cols.done{align-items:start}
  .btb-cols.done .side .btb-grow{display:none}
}


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

/* The logo in the game header and results: small icon + serif name */
.btb .btb-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}
.btb-icon-sm{display:block;width:1em;height:1em;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  .btb-tile{transition:none}
  .btb-tile.flip,.btb .btb-guess input.shake,.btb-timer div.low{animation:none}
}


/* ==========================================================
   Game screens: puzzle-app style (rounded cards, serif headings, pill buttons)
   ========================================================== */
.btb{
  --btb-bg:#F2F6FD; --btb-surface:#FFFFFF; --btb-ink:#121212; --btb-muted:#555B66; --btb-rule:#DCE3EE;
  --btb-main:#3D6FD6; --btb-accent:#F4C430; --btb-accent-soft:#FBEBB5; --btb-soft:#C9DAF6; --btb-bad:#C23B22;
  --btb-hidden:#3D6FD6;
  --btb-display:"Fraunces",Georgia,"Times New Roman",serif;
  --btb-body:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --btb-tilefont:"Libre Franklin","DM Sans",system-ui,sans-serif;
}
.btb h1,.btb h2,.btb h3{font-family:var(--btb-display);font-weight:800;letter-spacing:-.02em}
.btb :focus-visible{outline:3px solid var(--btb-main)!important;outline-offset:2px}
.btb-label{font-weight:700;color:var(--btb-muted)}
.btb-error{background:#FDECEA;border:1px solid var(--btb-bad);border-radius:12px;font-weight:600}
.btb-box{background:var(--btb-surface);border:1px solid var(--btb-rule);border-radius:16px}
.btb-shadow{box-shadow:none}
.btb-big{font-family:var(--btb-display);font-weight:800;letter-spacing:-.02em}
.btb-note{font-weight:600;color:var(--btb-muted)}

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

/* Playing */
.btb-hud{align-items:center}
.btb-hud .t b{font-family:var(--btb-display);font-weight:800}
.btb-worth{background:var(--btb-ink);color:#FFFFFF;border:0;border-radius:14px;box-shadow:none;padding:8px 16px}
.btb-worth small{font-weight:600;opacity:.8}
.btb-worth strong{font-family:var(--btb-display);font-weight:800}
.btb-timer{height:10px;border:0;border-radius:999px;background:var(--btb-rule)}
.btb-timer div{background:var(--btb-main);border-radius:999px}
@keyframes btb-blink{to{background:#E9573F}}
.btb-clock{font-weight:600;color:var(--btb-muted)}
.btb-stage{background:var(--btb-surface);border:1px solid var(--btb-rule);border-radius:18px;box-shadow:0 10px 30px -18px rgba(18,18,18,.35)}
.btb-word{gap:4px}
.btb-tile{border:2px solid var(--btb-hidden);border-radius:7px;background:var(--btb-hidden);font-family:var(--btb-tilefont);font-weight:800}
.btb-tile.show{background:var(--btb-surface);border-color:var(--btb-ink);color:var(--btb-ink)}
.btb-tile.show.new{background:var(--btb-accent);border-color:var(--btb-ink)}
.btb-tile.punct{background:transparent;border-color:transparent}
.btb-tagrow{font-weight:600}
.btb-tag{background:var(--btb-soft);color:var(--btb-ink);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.btb-guess label{font-weight:700;color:var(--btb-muted)}
.btb .btb-guess input{height:52px;border:1px solid var(--btb-ink)!important;border-radius:999px!important;padding:0 20px!important;font-family:var(--btb-body)!important;font-weight:600;letter-spacing:.04em}
.btb .btb-guess input.shake{border-color:var(--btb-bad)!important}

/* Done */
.btb-result{background:var(--btb-soft);color:var(--btb-ink);border:0;border-radius:18px;box-shadow:none;padding:18px 20px}
.btb-result .btb-label{color:var(--btb-ink)}
.btb-answer{font-family:var(--btb-display);font-weight:800;letter-spacing:-.02em}
.btb-tiles .pts{background:var(--btb-main);color:#FFFFFF;border:0;border-radius:16px}
.btb-tiles .pts .btb-label{color:#FFFFFF;opacity:.85}
.btb-tiles .pts strong{font-family:var(--btb-display);font-weight:800}
.btb-tiles .fact{border-radius:14px}
.btb-tiles .fact b{font-family:var(--btb-display);font-weight:800}
.btb-tiles .fact span{color:var(--btb-muted)}

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

/* Leaderboard */
.btb-board-box{padding:16px 18px 8px}
.btb-lb li{border-bottom:1px solid var(--btb-rule)}
.btb-lb li.me{background:var(--btb-accent-soft);box-shadow:inset 4px 0 0 var(--btb-accent);border-radius:8px}
.btb-lb .r{font-family:var(--btb-display);font-weight:800}

/* Archive */
.btb .btb-arow{border-bottom:1px solid var(--btb-rule)!important}
.btb .btb-arow:hover{background:#F2F6FD!important}
.btb-arow .d{font-family:var(--btb-display);font-weight:800}
.btb-pill{border:1px solid var(--btb-ink);border-radius:999px;font-weight:700}
.btb-pill.won{background:var(--btb-main);border-color:var(--btb-main);color:#FFFFFF}
.btb-pill.open{background:var(--btb-accent)}

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

/* Same weight as the homepage tiles and the Ned Hardy logo (Fraunces 900). */
.btb .btb-name,.btb .btb-logo,.btb h1,.btb h2,.btb h3,.btb-big,.btb-answer,.btb-hud .t b,.btb-worth strong,.btb-tiles .pts strong,.btb-tiles .fact b,.btb-arow .d,.btb-lb .r{font-weight:900!important}
/* The phrase on the results card: the same bold sans as the letter tiles. */
.btb .btb-answer{font-family:var(--btb-tilefont)!important;font-weight:800!important;letter-spacing:.01em}

/* Points, times and stats: the bold sans from the letter tiles, easier to read than the heavy serif. */
.btb-worth strong,.btb-tiles .pts strong,.btb-tiles .fact b,.btb-lb .r{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 status tags (own class so they don't pick up the start-screen pill size). */
.btb-st{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;border:1px solid var(--btb-ink);border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--btb-surface);color:var(--btb-ink);line-height:1.2}
.btb-st.won{background:var(--btb-main);border-color:var(--btb-main);color:#FFFFFF}
.btb-st.open{background:var(--btb-accent);border-color:var(--btb-accent)}
.btb-st.miss{background:var(--btb-surface)}

/* Archive dates: the bold sans, easier to scan than the heavy serif. */
.btb .btb-arow .d{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}