/* Double Take. Poster Block look in ocean blue and sunshine yellow, matching the Ned Hardy collection.
   Everything is scoped under .dt so theme styles stay out. */
.dt{
  container-type:inline-size;
  --dt-bg:#E6ECF2; --dt-surface:#FFFFFF; --dt-ink:#0E1A2B; --dt-muted:#43516A; --dt-rule:#D0D9E3;
  --dt-main:#0466C8; --dt-accent:#FFD60A; --dt-soft:#FFF6C2; --dt-bad:#C81D25;
  --dt-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --dt-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dt-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  box-sizing:border-box; background:var(--dt-bg); color:var(--dt-ink);
  font-family:var(--dt-font); font-size:16px; font-weight:400; line-height:1.45; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.dt *,.dt *::before,.dt *::after{box-sizing:inherit}
.dt p{margin:0}
.dt ul,.dt ol{margin:0;padding:0;list-style:none}
.dt h1,.dt h2,.dt h3{margin:0;color:inherit;font-family:var(--dt-display);font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.05}
.dt button,.dt input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none}
.dt button{cursor:pointer;min-height:0;width:auto;border-radius:0;box-shadow:none;line-height:1.2}
.dt :focus-visible{outline:3px solid var(--dt-accent)!important;outline-offset:2px}

/* Frame */
.dt-wrap{max-width:none;margin:0;display:flex;flex-direction:column;align-items:stretch}
.dt-wrap > .dt{width:100%}
.dt-tab{align-self:flex-start;background:var(--dt-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}
.dt-inner{max-width:440px;margin:0 auto;padding:22px 20px 32px;display:flex;flex-direction:column;gap:14px;min-height:620px}
.dt-loading{color:var(--dt-muted);font-weight:600;padding:40px 0;text-align:center}
.dt-error{background:#FDECEC;color:var(--dt-bad);border:3px solid var(--dt-ink);padding:12px 14px;font-weight:800}

/* Building blocks */
.dt-brand{font-size:13px;font-weight:600}
.dt-label{font-size:13px;font-weight:800}
.dt-box{background:var(--dt-surface);border:3px solid var(--dt-ink)}
.dt-grow{flex:1 1 auto}
.dt-big{font-family:var(--dt-display);font-size:28px;line-height:1.1}
.dt-center{text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.dt-twin .s{color:inherit}
.dt-twin .h{color:transparent;-webkit-text-stroke:1.5px var(--dt-ink)}

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

/* Start */
.dt-hero{container-type:inline-size;background:var(--dt-main);border:3px solid var(--dt-ink);box-shadow:6px 6px 0 var(--dt-ink);padding:22px 18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;overflow:hidden}
/* The logo is sized to the blue box itself (cqi = % of the box), so it never runs past its border. */
.dt .dt-hero h1{font-size:clamp(40px,17cqi,104px)!important;line-height:.9!important;letter-spacing:-2px!important}
.dt-hero h1 .s{color:#fff}
.dt-hero h1 .h{color:transparent;-webkit-text-stroke:2.5px var(--dt-accent)}
.dt-hero .dt-when{font-size:15px;font-weight:600;color:#fff}
.dt-themebox{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.dt-meta{display:flex;flex-wrap:wrap;gap:6px}
.dt-meta span{border:2px solid var(--dt-ink);padding:3px 9px;font-size:13px;font-weight:800}
.dt .dt-rules{padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.dt-rules li{display:flex;gap:10px;margin:0}
.dt-rules strong{font-family:var(--dt-display);font-weight:400;flex:0 0 auto}

/* Playing */
.dt-hud{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.dt-hud .t{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.dt-hud .t b{font-family:var(--dt-display);font-weight:400;font-size:clamp(22px,7.5cqi,30px);line-height:1;white-space:nowrap}
.dt-pts{background:var(--dt-accent);color:var(--dt-ink);border:3px solid var(--dt-ink);box-shadow:4px 4px 0 var(--dt-ink);padding:6px 14px;text-align:right;min-width:106px}
.dt-pts.dark{background:var(--dt-ink);color:#fff}
.dt-pts small{display:block;font-size:12px;font-weight:800}
.dt-pts strong{font-family:var(--dt-display);font-weight:400;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.dt-bar{height:14px;border:3px solid var(--dt-ink);background:var(--dt-surface);overflow:hidden}
.dt-bar div{height:100%;width:100%;background:var(--dt-main);transform-origin:left}
.dt-bar.preview div{background:var(--dt-accent)}
.dt-banner{background:var(--dt-main);color:#fff;border:3px solid var(--dt-ink);box-shadow:6px 6px 0 var(--dt-ink);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.dt-banner .big{font-family:var(--dt-display);font-size:22px;line-height:1.1}
.dt-banner .num{font-family:var(--dt-display);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.dt-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dt-status > div{background:var(--dt-surface);border:3px solid var(--dt-ink);padding:8px 12px}
.dt-status b{display:block;font-family:var(--dt-display);font-weight:400;font-size:20px;line-height:1.15;font-variant-numeric:tabular-nums}
.dt-status span{font-size:12px;font-weight:600}

.dt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;perspective:700px;width:100%;margin:0 auto;transition:max-width .2s ease}
.dt .dt-tile{position:relative;display:block;width:100%;height:0;padding:0 0 100% 0!important;border:0!important;background:transparent!important}
.dt-face,.dt-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .28s ease;border:3px solid var(--dt-ink)}
.dt-back{background:var(--dt-main)}
.dt-back::after{content:"";width:46%;height:46%;border:2.5px solid rgba(255,255,255,.35)}
.dt-face{background:var(--dt-surface);transform:rotateY(180deg);font-family:var(--dt-emoji);font-size:var(--dt-e,32px);line-height:1}
.dt-tile.up .dt-back,.dt-tile.matched .dt-back{transform:rotateY(-180deg)}
.dt-tile.up .dt-face,.dt-tile.matched .dt-face{transform:rotateY(0)}
.dt-grid:not(.locked) .dt-tile.up:not(.matched) .dt-face{box-shadow:4px 4px 0 var(--dt-ink)}
.dt-tile.matched .dt-face{background:var(--dt-accent)}
.dt-tile.nope .dt-face{border-color:var(--dt-bad);box-shadow:4px 4px 0 var(--dt-bad)}
.dt-grid.locked .dt-tile{cursor:default}
.dt-msg:empty{display:none}
.dt-msg{min-height:20px;text-align:center;font-weight:800;font-size:14px;color:var(--dt-bad)}

/* Done */
.dt-result{background:var(--dt-main);color:#fff;border:3px solid var(--dt-ink);box-shadow:6px 6px 0 var(--dt-ink);padding:16px 18px}
.dt-result .dt-label{font-size:14px}
.dt-result .dt-verdict{font-family:var(--dt-display);font-size:clamp(28px,9cqi,40px);line-height:1.02;margin-top:4px;text-transform:uppercase}
.dt-tiles{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.dt-tiles .pts{background:var(--dt-accent);border:3px solid var(--dt-ink);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;grid-row:span 3}
.dt-tiles .pts strong{font-family:var(--dt-display);font-weight:400;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.dt-tiles .pts span{font-size:13px;font-weight:600}
.dt-tiles .fact{padding:8px 12px}
.dt-tiles .fact b{display:block;font-family:var(--dt-display);font-weight:400;font-size:21px;line-height:1.1}
.dt-tiles .fact span{font-size:12px;font-weight:600}
.dt-final{padding:14px}
.dt-final .dt-grid{max-width:600px}
.dt-final .dt-face,.dt-final .dt-back{border-width:2px}
.dt-final p{text-align:center;font-size:13px;font-weight:700;color:var(--dt-muted);margin-top:10px}

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

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

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

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

@container (min-width:560px){
  .dt-inner{max-width:none;padding:30px 32px 40px;gap:18px}
  .dt-hero{padding:24px}
  .dt-hero .dt-when{font-size:17px}
  .dt .dt-rules{padding:18px 20px;font-size:17px}
  .dt .dt-btn.wide{height:68px;font-size:26px!important}
  .dt-hud .t b{font-size:38px}
  .dt-pts{min-width:150px}
  .dt-pts strong{font-size:40px}
  .dt-grid{max-width:600px}
  .dt-tiles .pts strong{font-size:64px}
  .dt-alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt .dt-alist .dt-arow:nth-child(odd){border-right:2px solid var(--dt-rule)!important}
}

@container (min-width:860px){
  .dt-inner{max-width:1200px;padding:36px 40px 44px;gap:22px}
  .dt-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  .dt-col{gap:18px}
  .dt-cols.start .dt-hero{flex:1 1 auto;padding:30px;min-height:380px}
  .dt .dt-cols.start .dt-hero h1{font-size:clamp(56px,17cqi,130px)!important;letter-spacing:-3px!important}
  .dt-cols.play{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
  .dt-cols.play .side{position:sticky;top:24px;background:var(--dt-surface);border:3px solid var(--dt-ink);box-shadow:6px 6px 0 var(--dt-ink);padding:22px}
  .dt-cols.play .side .dt-status{grid-template-columns:1fr}
  .dt-cols.play .side .dt-links{justify-content:flex-start}
  .dt-cols.play .side .dt-link{padding-left:0!important}
  .dt-grid{max-width:640px}
  .dt-cols.done .dt-final .dt-grid{max-width:600px}
  .dt-hud .t b{font-size:44px}
  .dt-pts strong{font-size:46px}
  .dt-cols.done{align-items:start}
  .dt-cols.done .side .dt-grow{display:none}
}


/* ---------- Start screen: puzzle-app style (icon, serif name, pill buttons) ---------- */
.dt.dt--start{background:#FFF1A8}
.dt--start .dt-inner{min-height:0;max-width:560px!important;margin:0 auto;padding:52px 20px 44px!important;align-items:center}
.dt-splash{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.dt-icon{display:block;width:84px;height:84px}
.dt .dt-title{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;color:#121212}
.dt .dt-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}
.dt-pills{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.dt .dt-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;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-decoration:none}
.dt .dt-pill:hover{background:rgba(0,0,0,.06)!important}
.dt .dt-pill.solid{background:#121212!important;color:#FFFFFF!important}
.dt .dt-pill.solid:hover{background:#333333!important}
.dt .dt-pill:disabled{opacity:.6;cursor:default}
.dt .dt-date{margin-top:24px!important;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;color:#121212}
.dt .dt-facts{margin-top:4px!important;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:13px;color:#4A4A4A}
.dt-how{margin-top:22px;width:100%;max-width:420px;text-align:left}
.dt-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}
.dt-how summary::-webkit-details-marker{display:none}
.dt .dt-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}
.dt-howlist li{display:flex;gap:10px;margin:0}
.dt-howlist strong{flex:0 0 auto;font-weight:700}

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

@media (prefers-reduced-motion:reduce){
  .dt-face,.dt-back{transition:none}
}


/* ==========================================================
   Game screens: puzzle-app style (rounded cards, serif headings, pill buttons)
   Yellow family. Matched pairs pick up the blue from the icon.
   ========================================================== */
.dt{
  --dt-bg:#FFFFFF; --dt-surface:#FFFFFF; --dt-ink:#121212; --dt-muted:#5A5648; --dt-rule:#EEEEEE;
  --dt-main:#FFD60A; --dt-accent:#FFD60A; --dt-soft:#FFF1A8; --dt-bad:#C23B22;
  --dt-pair:#3D6FD6; --dt-pair-soft:#DCE6FA;
  --dt-display:"Fraunces",Georgia,"Times New Roman",serif;
  --dt-font:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.dt h1,.dt h2,.dt h3{font-family:var(--dt-display);font-weight:900;letter-spacing:-.02em}
.dt .dt-h2{font-size:30px;line-height:1}
.dt .dt-h3{font-size:22px}
.dt-intro{font-size:15px;color:var(--dt-muted)}
.dt :focus-visible{outline:3px solid var(--dt-ink)!important;outline-offset:2px}
.dt-label{font-weight:700;color:var(--dt-muted)}
.dt-error{background:#FDECEA;border:1px solid var(--dt-bad);border-radius:12px;font-weight:600}
.dt-box{background:var(--dt-surface);border:1px solid var(--dt-rule);border-radius:16px}
.dt-big{font-family:var(--dt-display);font-weight:900;letter-spacing:-.02em;font-size:24px}
.dt-center{font-weight:600;color:var(--dt-muted)}

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

/* Playing */
.dt-hud{align-items:center}
.dt-hud .t b{font-family:var(--dt-display);font-weight:900}
.dt-pts{background:var(--dt-main);color:var(--dt-ink);border:0;border-radius:14px;box-shadow:none;padding:8px 16px}
.dt-pts.dark{background:var(--dt-ink);color:#FFFFFF}
.dt-pts small{font-weight:600;opacity:.8}
.dt-pts strong{font-family:var(--dt-display);font-weight:900}
.dt-bar{height:10px;border:0;border-radius:999px;background:var(--dt-rule)}
.dt-bar div{background:var(--dt-ink);border-radius:999px}
.dt-bar.preview div{background:var(--dt-main)}
.dt-banner{background:var(--dt-soft);color:var(--dt-ink);border:0;border-radius:18px;box-shadow:none;padding:14px 18px}
.dt-banner .big{font-family:var(--dt-display);font-weight:900;letter-spacing:-.01em}
.dt-banner .sub{font-size:13px;font-weight:600;color:var(--dt-muted)}
.dt-banner .num{font-family:var(--dt-display);font-weight:900}
.dt-status > div{border:1px solid var(--dt-rule);border-radius:14px}
.dt-status b{font-family:var(--dt-display);font-weight:900}
.dt-status span{color:var(--dt-muted)}

/* Cards: yellow backs, white faces, matched pairs in blue */
.dt-grid{gap:8px}
.dt-face,.dt-back{border:2px solid var(--dt-ink);border-radius:12px}
.dt-back{background:var(--dt-main)}
.dt-back::after{width:40%;height:40%;border:2px solid rgba(18,18,18,.22);border-radius:7px}
.dt-face{background:var(--dt-surface)}
.dt-grid:not(.locked) .dt-tile.up:not(.matched) .dt-face{box-shadow:0 0 0 3px var(--dt-soft)}
.dt-tile.matched .dt-face{background:var(--dt-pair-soft);border-color:var(--dt-pair)}
.dt-tile.nope .dt-face{border-color:var(--dt-bad);box-shadow:0 0 0 3px #F8D4CB}
.dt-msg{font-weight:700}

/* Done */
.dt-result{background:var(--dt-soft);color:var(--dt-ink);border:0;border-radius:18px;box-shadow:none;padding:18px 20px}
.dt-result .dt-label{color:var(--dt-ink)}
.dt-result .dt-verdict{font-family:var(--dt-display);font-weight:900;letter-spacing:-.02em;text-transform:none}
.dt-tiles .pts{background:var(--dt-main);color:var(--dt-ink);border:0;border-radius:16px}
.dt-tiles .pts .dt-label{color:var(--dt-ink);opacity:.8}
.dt-tiles .pts strong{font-family:var(--dt-display);font-weight:900}
.dt-tiles .fact{border-radius:14px}
.dt-tiles .fact b{font-family:var(--dt-display);font-weight:900}
.dt-tiles .fact span{color:var(--dt-muted)}
.dt-final{border-radius:18px}
.dt-final .dt-face,.dt-final .dt-back{border-width:1.5px;border-radius:9px}

/* Initials callout */
.dt-callout{background:var(--dt-surface);border:2px solid var(--dt-main);border-radius:18px;box-shadow:none}
.dt .dt-nick input{border:1px solid var(--dt-ink)!important;border-radius:999px!important;font-family:var(--dt-font)!important;font-weight:700;font-size:18px!important;padding:0 18px!important}
.dt-note{font-weight:600}

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

/* Archive */
.dt-alist{overflow:hidden}
.dt .dt-arow{border-bottom:1px solid var(--dt-rule)!important}
.dt .dt-arow:hover{background:#FFFBE0!important}
.dt-arow .d{font-family:var(--dt-display);font-weight:900}
.dt-arow .d small{font-family:var(--dt-font)}
.dt-st{font-size:13px;font-weight:700;padding:5px 12px;border:1px solid var(--dt-ink);border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--dt-surface)}
.dt-st.won{background:var(--dt-pair);border-color:var(--dt-pair);color:#FFFFFF}
.dt-st.open{background:var(--dt-main);border-color:var(--dt-main)}

/* The logo in the header uses the same weight as the homepage tiles */
.dt .dt-twin,.dt .dt-title{font-weight:900!important}

@container (min-width:560px){
  .dt .dt-alist .dt-arow:nth-child(odd){border-right:1px solid var(--dt-rule)!important}
}
@container (min-width:860px){
  .dt-cols.play .side{border:1px solid var(--dt-rule);border-radius:18px;box-shadow:none}
}
.dt-status span{display:block;line-height:1.3}
.dt-note:empty{display:none}
.dt-board .dt-h3{margin-bottom:4px}

/* Points, times and stats: the bold sans from the letter tiles, easier to read than the heavy serif. */
.dt-pts strong,.dt-banner .num,.dt-status b,.dt-tiles .pts strong,.dt-tiles .fact b,.dt-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 dates: the bold sans, easier to scan than the heavy serif. */
.dt .dt-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}