/* Word Ladder. Poster Block look in teal and tangerine, matching the Ned Hardy collection.
   Everything is scoped under .wl so theme styles stay out. */
.wl{
  container-type:inline-size;
  --wl-bg:#E3EEED; --wl-surface:#FFFFFF; --wl-ink:#0E2524; --wl-muted:#3F5958; --wl-rule:#CBE0DE;
  --wl-main:#0B6E6B; --wl-accent:#FF9F43; --wl-soft:#FFE9D2; --wl-ghost:#C9DCDA; --wl-bad:#B42318;
  --wl-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --wl-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wl-t:clamp(34px,11.5cqi,54px);
  box-sizing:border-box; background:var(--wl-bg); color:var(--wl-ink);
  font-family:var(--wl-font); font-size:16px; font-weight:400; line-height:1.45; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.wl *,.wl *::before,.wl *::after{box-sizing:inherit}
.wl p{margin:0}
.wl ul,.wl ol{margin:0;padding:0;list-style:none}
.wl h1,.wl h2,.wl h3{margin:0;color:inherit;font-family:var(--wl-display);font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.05}
.wl button,.wl input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none}
.wl button{cursor:pointer;min-height:0;width:auto;border-radius:0;box-shadow:none;line-height:1.2}
.wl :focus-visible{outline:3px solid var(--wl-accent)!important;outline-offset:2px}
.wl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wl-inner{max-width:440px;margin:0 auto;padding:22px 20px 32px;display:flex;flex-direction:column;gap:14px;min-height:620px}
.wl-loading{color:var(--wl-muted);font-weight:600;padding:40px 0;text-align:center}
.wl-error{background:#FDECEC;color:var(--wl-bad);border:3px solid var(--wl-ink);padding:12px 14px;font-weight:800}
.wl-brand{font-size:13px;font-weight:600}
.wl-label{font-size:13px;font-weight:800}
.wl-box{background:var(--wl-surface);border:3px solid var(--wl-ink)}
.wl-grow{flex:1 1 auto}
.wl-big{font-family:var(--wl-display);font-size:28px;line-height:1.1}
.wl-center{text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

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

/* Start */
.wl-hero{background:var(--wl-main);color:#fff;border:3px solid var(--wl-ink);box-shadow:6px 6px 0 var(--wl-ink);padding:20px 18px 16px;display:flex;justify-content:space-between;align-items:stretch;gap:14px;overflow:hidden}
.wl-hero .copy{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0}
.wl .wl-hero h1{font-size:clamp(38px,13cqi,64px)!important;line-height:.9!important;letter-spacing:-2px!important;color:#fff!important}
.wl-hero .wl-when{font-size:15px;font-weight:600}
/* A small ladder, sized to sit inside the block */
.wl-mark{flex:0 0 auto;width:40px;align-self:stretch;border-left:6px solid #fff;border-right:6px solid #fff;display:flex;flex-direction:column;justify-content:space-evenly}
.wl-mark i{display:block;height:6px;background:#fff}
.wl-today{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.wl-pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wl-pair .to{font-family:var(--wl-display);font-size:18px}
.wl .wl-rules{padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.wl-rules li{display:flex;gap:10px;margin:0}
.wl-rules strong{font-family:var(--wl-display);font-weight:400;flex:0 0 auto}

/* Tiles and the ladder */
.wl-word{display:flex;gap:6px}
.wl-tile{width:var(--wl-t);height:var(--wl-t);display:flex;align-items:center;justify-content:center;font-family:var(--wl-display);font-size:calc(var(--wl-t)*.5);line-height:1;border:3px solid var(--wl-ink);background:var(--wl-surface);color:var(--wl-ink)}
.wl-tile.start{background:var(--wl-main);color:#fff}
.wl-tile.new{background:var(--wl-accent)}
.wl-tile.target{background:var(--wl-soft)}
.wl-tile.input{border-style:dashed}
.wl-tile.input.changed{border-style:solid;border-color:var(--wl-accent);box-shadow:0 0 0 3px var(--wl-ink)}
.wl-tile.ghost{background:transparent;border:3px dashed var(--wl-ghost);color:transparent}
.wl-pair .wl-tile{--wl-t:40px}
.wl-ladder{background:var(--wl-surface);border:3px solid var(--wl-ink);box-shadow:6px 6px 0 var(--wl-ink);padding:16px 8px}
.wl-rails{margin:0 auto;width:fit-content;max-width:100%;border-left:6px solid var(--wl-main);border-right:6px solid var(--wl-main);padding:4px 12px;display:flex;flex-direction:column;gap:10px}
.wl-rung{display:flex;align-items:center;gap:8px}
.wl-rung .n{width:30px;font-size:11px;font-weight:800;color:var(--wl-muted);text-align:right;flex:0 0 auto}
.wl-rung .pad{width:30px;flex:0 0 auto}
.wl-rung.fresh .wl-tile{animation:wl-pop .3s ease-out}
@keyframes wl-pop{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}

/* Playing */
.wl-hud{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.wl-hud .t{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.wl-hud .t b{font-family:var(--wl-display);font-weight:400;font-size:clamp(22px,7.5cqi,30px);line-height:1;white-space:nowrap}
.wl-pts{background:var(--wl-accent);border:3px solid var(--wl-ink);box-shadow:4px 4px 0 var(--wl-ink);padding:6px 14px;text-align:right;min-width:106px}
.wl-pts small{display:block;font-size:12px;font-weight:800}
.wl-pts strong{font-family:var(--wl-display);font-weight:400;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.wl-bar{height:14px;border:3px solid var(--wl-ink);background:var(--wl-surface);overflow:hidden}
.wl-bar div{height:100%;width:100%;background:var(--wl-main);transform-origin:left}
.wl-clock{display:flex;justify-content:space-between;font-size:13px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.wl-controls{display:flex;flex-direction:column;gap:8px}
.wl-msg{min-height:1.3em;font-size:14px;font-weight:800;color:var(--wl-bad)}
.wl-msg.ok{color:var(--wl-muted)}
.wl-controls label{font-size:13px;font-weight:800}
.wl-controls .row{display:flex;gap:8px}
.wl .wl-controls input{flex:1;min-width:0;height:54px;padding:0 14px!important;border:3px solid var(--wl-ink)!important;border-radius:0!important;background:var(--wl-surface)!important;color:var(--wl-ink)!important;font-family:var(--wl-display)!important;font-size:22px!important;letter-spacing:.2em;text-transform:uppercase;box-shadow:none!important}
.wl .wl-controls input.shake{animation:wl-shake .35s;border-color:var(--wl-bad)!important}
@keyframes wl-shake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.wl-controls .more{display:flex;justify-content:space-between}
.wl-controls .more .wl-link{padding:8px 0!important}

/* Done */
.wl-result{background:var(--wl-main);color:#fff;border:3px solid var(--wl-ink);box-shadow:6px 6px 0 var(--wl-ink);padding:14px 18px}
.wl-result .wl-label{font-size:14px}
.wl-result .v{font-family:var(--wl-display);font-size:clamp(26px,8.5cqi,38px);line-height:1.05;margin-top:4px;text-transform:uppercase}
.wl-tiles{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.wl-tiles .pts{background:var(--wl-accent);border:3px solid var(--wl-ink);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;grid-row:span 3}
.wl-tiles .pts strong{font-family:var(--wl-display);font-weight:400;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.wl-tiles .pts span{font-size:13px;font-weight:600}
.wl-tiles .fact{padding:8px 12px}
.wl-tiles .fact b{display:block;font-family:var(--wl-display);font-weight:400;font-size:21px;line-height:1.1}
.wl-tiles .fact span{font-size:12px;font-weight:600}
.wl-done-ladder{--wl-t:clamp(34px,10cqi,44px)}
.wl-done-ladder .wl-rails{gap:6px}
.wl-route{padding:12px 16px;font-size:14px;font-weight:600;color:var(--wl-muted)}
.wl-route b{color:var(--wl-ink);letter-spacing:.06em}

/* Initials callout and leaderboard */
.wl-callout{background:var(--wl-accent);border:3px solid var(--wl-ink);box-shadow:6px 6px 0 var(--wl-ink);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.wl-callout p{font-size:15px;font-weight:600}
.wl-nick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.wl .wl-nick input{width:130px;height:48px;padding:0 10px!important;border:3px solid var(--wl-ink)!important;border-radius:0!important;background:var(--wl-surface)!important;color:var(--wl-ink)!important;font-family:var(--wl-display)!important;font-size:20px!important;letter-spacing:.15em;text-transform:uppercase;box-shadow:none!important}
.wl .wl-nick .wl-btn{height:48px}
.wl-note{font-size:14px;font-weight:800;min-height:1.2em;color:var(--wl-bad)}
.wl-board{padding:12px 16px 6px}
.wl-lb-sum{font-size:13px;font-weight:600;color:var(--wl-muted)}
.wl-lb{margin-top:8px!important}
.wl-lb li{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:2px solid var(--wl-rule);margin:0}
.wl-lb li:last-child{border-bottom:none}
.wl-lb li.me{background:var(--wl-soft);box-shadow:inset 4px 0 0 var(--wl-accent);padding-left:8px}
.wl-lb .r{font-family:var(--wl-display)}
.wl-lb .nm{font-weight:800;letter-spacing:.08em}
.wl-lb .t{font-size:13px;color:var(--wl-muted);font-variant-numeric:tabular-nums}
.wl-lb .p{font-weight:800;font-variant-numeric:tabular-nums}
.wl-empty{color:var(--wl-muted);font-size:14px;padding:6px 0}

/* Archive and stats */
.wl-alist{padding:0}
.wl .wl-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(--wl-rule)!important;padding:12px 16px!important;color:var(--wl-ink)!important;font-size:16px!important;font-weight:400!important;min-height:56px}
.wl .wl-arow:last-child{border-bottom:none!important}
.wl .wl-arow:hover{background:var(--wl-soft)!important}
.wl-arow .d{font-family:var(--wl-display);font-weight:400}
.wl-arow .d small{display:block;font-family:var(--wl-font);font-weight:600;font-size:13px;color:var(--wl-muted)}
.wl-pill{font-size:13px;font-weight:800;padding:4px 10px;border:2px solid var(--wl-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.wl-pill.won{background:var(--wl-main);color:#fff}
.wl-pill.open{background:var(--wl-accent)}
.wl-pill.miss{background:var(--wl-surface)}
.wl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wl-stats > div{padding:12px 14px}
.wl-stats b{font-family:var(--wl-display);font-weight:400;font-size:32px;display:block;line-height:1.1}
.wl-stats span{font-size:13px;font-weight:600}
.wl-stats .hot{background:var(--wl-accent);border:3px solid var(--wl-ink)}

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

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

@container (min-width:860px){
  .wl-inner{max-width:1200px;padding:36px 40px 44px;gap:22px}
  .wl-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  .wl-col{gap:18px}
  .wl-cols.start .wl-hero{flex:1 1 auto;padding:30px;min-height:380px}
  .wl .wl-cols.start .wl-hero h1{font-size:clamp(60px,7cqi,92px)!important;letter-spacing:-3px!important}
  .wl-cols.start .wl-mark{width:70px;border-width:8px}
  .wl-cols.start .wl-mark i{height:8px}
  .wl-cols.play{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .wl-cols.play .side{position:sticky;top:24px;background:var(--wl-surface);border:3px solid var(--wl-ink);box-shadow:6px 6px 0 var(--wl-ink);padding:22px}
  .wl{--wl-t:66px}
  .wl-ladder{padding:26px 8px}
  .wl-hud .t b{font-size:44px}
  .wl-pts strong{font-size:46px}
  .wl-cols.done{align-items:start}
  .wl-cols.done .side .wl-grow{display:none}
  .wl-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
}


/* ---------- Start screen: puzzle-app style (icon, serif name, pill buttons) ---------- */
.wl.wl--start{background:#CDEBDB}
.wl--start .wl-inner{min-height:0;max-width:560px!important;margin:0 auto;padding:52px 20px 44px!important;align-items:center}
.wl-splash{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.wl-icon{display:block;width:84px;height:84px}
.wl .wl-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}
.wl .wl-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}
.wl .wl-splashpair{flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-top:20px}
.wl .wl-splashpair .wl-tile{--wl-t:36px;border-width:2px;border-radius:4px}
.wl .wl-splashpair .to{font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:600;font-size:15px;text-transform:none}
.wl-pills{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.wl .wl-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}
.wl .wl-pill:hover{background:rgba(0,0,0,.06)!important}
.wl .wl-pill.solid{background:#121212!important;color:#FFFFFF!important}
.wl .wl-pill.solid:hover{background:#333333!important}
.wl .wl-dateline{margin-top:24px!important;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;color:#121212}
.wl .wl-splashfacts{margin-top:4px!important;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:13px;color:#4A4A4A}
.wl-how{margin-top:20px;width:100%;max-width:440px;text-align:left}
.wl-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}
.wl-how summary::-webkit-details-marker{display:none}
.wl .wl-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;list-style:none}
.wl-howlist li{display:flex;gap:10px;margin:0}
.wl-howlist strong{flex:0 0 auto;font-weight:700}

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

@media (prefers-reduced-motion:reduce){
  .wl-rung.fresh .wl-tile,.wl .wl-controls input.shake{animation:none}
}


/* ==========================================================
   Game screens: puzzle-app style (rounded cards, serif headings, pill buttons)
   ========================================================== */
.wl{
  --wl-bg:#F1F8F4; --wl-surface:#FFFFFF; --wl-ink:#121212; --wl-muted:#556159; --wl-rule:#D7E6DD;
  --wl-main:#2E9E6B; --wl-accent:#F4C430; --wl-soft:#CDEBDB; --wl-yellow-soft:#FBEBB5; --wl-ghost:#BFD9CA; --wl-bad:#C23B22;
  --wl-display:"Fraunces",Georgia,"Times New Roman",serif;
  --wl-font:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wl-tilefont:"Libre Franklin","DM Sans",system-ui,sans-serif;
}
.wl h1,.wl h2,.wl h3{font-family:var(--wl-display);font-weight:900;letter-spacing:-.02em}
.wl .wl-title{font-size:32px;line-height:1.05}
.wl .wl-h3{font-size:22px;line-height:1.1}
.wl :focus-visible{outline:3px solid var(--wl-main)!important;outline-offset:2px}
.wl-label{font-weight:700;color:var(--wl-muted)}
.wl-error{background:#FDECEA;border:1px solid var(--wl-bad);border-radius:12px;font-weight:600}
.wl-box{background:var(--wl-surface);border:1px solid var(--wl-rule);border-radius:16px}
.wl-big{font-family:var(--wl-display);font-weight:900;letter-spacing:-.02em}
.wl-center{font-weight:600;color:var(--wl-muted)}

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

/* Tiles and the ladder */
.wl-word{gap:5px}
.wl-tile{font-family:var(--wl-tilefont);font-weight:800;border:2px solid var(--wl-ink);border-radius:8px}
.wl-tile.start{background:var(--wl-main);border-color:var(--wl-main);color:#FFFFFF}
.wl-tile.new{background:var(--wl-accent)}
.wl-tile.target{background:var(--wl-yellow-soft)}
.wl-tile.input{border-style:dashed}
.wl-tile.input.changed{border-style:solid;border-color:var(--wl-ink);background:var(--wl-accent);box-shadow:none}
.wl-tile.ghost{border:2px dashed var(--wl-ghost);background:transparent}
.wl-ladder{background:var(--wl-surface);border:1px solid var(--wl-rule);border-radius:18px;box-shadow:0 10px 30px -18px rgba(18,18,18,.35)}
.wl-rails{border-left:5px solid var(--wl-soft);border-right:5px solid var(--wl-soft);border-radius:4px}
.wl-rung .n{font-weight:700;color:var(--wl-muted)}

/* Playing */
.wl-hud{align-items:center}
.wl-hud .t b{font-family:var(--wl-display);font-weight:900}
.wl-pts{background:var(--wl-ink);color:#FFFFFF;border:0;border-radius:14px;box-shadow:none;padding:8px 16px}
.wl-pts small{font-weight:600;opacity:.8}
.wl-pts strong{font-family:var(--wl-display);font-weight:900}
.wl-bar{height:10px;border:0;border-radius:999px;background:var(--wl-rule)}
.wl-bar div{background:var(--wl-main);border-radius:999px}
.wl-clock{font-weight:600;color:var(--wl-muted)}
.wl-msg{font-weight:700}
.wl-controls label{font-weight:700;color:var(--wl-muted)}
.wl .wl-controls input{height:52px;border:1px solid var(--wl-ink)!important;border-radius:999px!important;padding:0 20px!important;font-family:var(--wl-tilefont)!important;font-weight:800;font-size:20px!important;letter-spacing:.18em}
.wl .wl-controls input.shake{border-color:var(--wl-bad)!important}

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

/* Initials callout */
.wl-callout{background:var(--wl-yellow-soft);border:0;border-radius:18px;box-shadow:none}
.wl .wl-callhead{font-size:24px}
.wl .wl-nick input{border:1px solid var(--wl-ink)!important;border-radius:999px!important;font-family:var(--wl-tilefont)!important;font-weight:800;padding:0 18px!important}
.wl-note{font-weight:700}

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

/* Archive and stats */
.wl-alist{overflow:hidden}
.wl .wl-arow{border-bottom:1px solid var(--wl-rule)!important}
.wl .wl-arow:hover{background:var(--wl-bg)!important}
.wl-arow .d{font-family:var(--wl-display);font-weight:900}
.wl-arow .d small{font-family:var(--wl-font)}
.wl-tag{font-size:13px;font-weight:700;padding:4px 12px;border:1px solid var(--wl-ink);border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--wl-surface)}
.wl-tag.won{background:var(--wl-main);border-color:var(--wl-main);color:#FFFFFF}
.wl-tag.open{background:var(--wl-accent)}
.wl-stats b{font-family:var(--wl-display);font-weight:900}
.wl-stats span{color:var(--wl-muted)}
.wl-stats .hot{background:var(--wl-main);color:#FFFFFF;border:0;border-radius:16px}
.wl-stats .hot span{color:#FFFFFF;opacity:.85}

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

/* Same weight as the homepage tiles and the Ned Hardy logo (Fraunces 900). */
.wl .wl-name,.wl .wl-logo{font-weight:900!important}
.wl .wl-title,.wl .wl-h3,.wl h2,.wl h3{margin:0!important}
.wl-note:empty{min-height:0}
.wl-callout .wl-note:empty{display:none}

/* Points, times and stats: the bold sans from the letter tiles, easier to read than the heavy serif. */
.wl-pts strong,.wl-tiles .pts strong,.wl-tiles .fact b,.wl-lb .r,.wl-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. */
.wl .wl-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}