/*! wørdle.net — Bi (Spelling Bee på dansk). Colours come from the site's --wd-* variables (plus two local ones below),
   so html.wd-dark works by itself. Mount: <div class="wd-mount" data-wd-bee='{"epoch":"2026-09-29"}'></div> + /games/da/bi.js */
.wd-sb{--wd-sb-rail:#d7d9de;--wd-sb-ok:var(--wd-green);box-sizing:border-box;width:100%;max-width:900px;min-height:560px;margin:0 auto;color:var(--wd-text);font-family:var(--wd-font);line-height:1.4;-webkit-tap-highlight-color:transparent}
html.wd-dark .wd-sb{--wd-sb-rail:#474a52;--wd-sb-ok:#8fd4a8}
.wd-sb *,.wd-sb *::before,.wd-sb *::after{box-sizing:border-box}
.wd-sb [hidden]{display:none!important}
.wd-sb button{margin:0;font-family:inherit;color:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.wd-sb button:focus-visible{outline:3px solid var(--wd-red);outline-offset:2px}

/* ---------- top: mode, new game, yesterday, hints ---------- */
.wd-sb-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:480px;margin:0 auto 14px}
.wd-sb-seg{display:flex;flex:1 1 100%;gap:2px;min-width:0;padding:3px;border-radius:var(--wd-radius);background:var(--wd-key)}
.wd-sb-sb{flex:1 1 0;min-width:0;min-height:40px;padding:0 12px;border:0;border-radius:calc(var(--wd-radius) - 3px);background:transparent;color:var(--wd-muted);font-weight:700;font-size:14.5px;line-height:1.1;white-space:nowrap;cursor:pointer}
.wd-sb .wd-sb-sb{color:var(--wd-muted)}
.wd-sb .wd-sb-sb.wd-sb-on{background:var(--wd-bg);color:var(--wd-text);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.wd-sb-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0}

/* buttons (like Sudoku's) */
.wd-sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;border:0;border-radius:var(--wd-radius);background:var(--wd-key);color:var(--wd-text);font-weight:800;font-size:14.5px;line-height:1.1;white-space:nowrap;cursor:pointer;text-decoration:none}
.wd-sb .wd-sb-btn.wd-sb-primary{background:var(--wd-red);color:#fff}
.wd-sb .wd-sb-btn.wd-sb-on{background:var(--wd-text);color:var(--wd-bg)}

/* ---------- main: hive + controls, found words ---------- */
.wd-sb-main{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.wd-sb-left{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.wd-sb-right{min-width:0}
.wd-sb-day{min-height:1.4em;font-weight:800;font-size:15.5px;text-align:center}

/* rank: name, dots, the score */
.wd-sb-rank{display:flex;align-items:center;gap:14px;width:420px;max-width:100%;cursor:default}
.wd-sb-rname{flex:none;min-width:106px;font-weight:900;font-size:16px;white-space:nowrap}
.wd-sb-track{position:relative;flex:1 1 auto;min-width:0;height:30px;margin:0 20px 0 4px;display:flex;align-items:center;justify-content:space-between}
.wd-sb-track::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--wd-sb-rail)}
.wd-sb-track:empty::before{visibility:hidden}
.wd-sb-track i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--wd-sb-rail)}
.wd-sb-track i.wd-sb-on{background:var(--wd-yellow)}
.wd-sb-now{position:absolute;top:50%;min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:var(--wd-yellow);color:#fff;font-weight:900;font-size:14px;line-height:30px;text-align:center;font-variant-numeric:tabular-nums;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:left .3s}

/* message pills */
.wd-sb-msg{display:flex;align-items:center;justify-content:center;min-height:36px;max-width:100%;padding:6px 14px;border-radius:18px;color:var(--wd-muted);font-weight:800;font-size:15px;line-height:1.3;text-align:center}
.wd-sb-msg.wd-sb-ok{background:var(--wd-green-t);color:var(--wd-sb-ok)}
.wd-sb-msg.wd-sb-bad{background:var(--wd-red-t);color:var(--wd-red-d)}
.wd-sb-msg.wd-sb-pan{background:var(--wd-yellow);color:#fff}

/* the word being typed */
.wd-sb-input{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:52px;max-width:100%;font-weight:900;font-size:34px;line-height:1.25;letter-spacing:.05em;text-transform:uppercase}
.wd-sb-input.wd-sb-long{font-size:25px}
.wd-sb-input .wd-sb-mid{color:var(--wd-yellow)}
.wd-sb-input .wd-sb-no{color:var(--wd-muted)}
.wd-sb-ph{color:var(--wd-muted);font-weight:700;font-size:17px;letter-spacing:0;text-transform:none}
.wd-sb-caret{display:inline-block;width:3px;height:36px;margin-left:3px;background:var(--wd-yellow);-webkit-animation:wd-sb-blink 1s steps(1) infinite;animation:wd-sb-blink 1s steps(1) infinite}
.wd-sb-long .wd-sb-caret{height:27px}
.wd-sb-input.wd-sb-shake{-webkit-animation:wd-sb-shake .35s;animation:wd-sb-shake .35s}

/* the hive: rounded hexagons (a thick stroke in the fill colour with round joins) */
.wd-sb-hive{width:330px;max-width:86vw;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.wd-sb-hive:empty::before{content:'';display:block;padding-top:100%}
.wd-sb-svg{display:block;width:100%;height:auto;overflow:visible}
.wd-sb-cell{cursor:pointer;-webkit-tap-highlight-color:transparent;transform-box:fill-box;transform-origin:50% 50%}
.wd-sb-cell polygon{fill:var(--wd-key);stroke:var(--wd-key);stroke-width:13;stroke-linejoin:round;transition:opacity .1s}
.wd-sb-cell text{fill:var(--wd-text);font-family:var(--wd-font);font-weight:900;font-size:36px;text-anchor:middle;pointer-events:none}
.wd-sb-cell.wd-sb-mid polygon{fill:var(--wd-yellow);stroke:var(--wd-yellow)}
.wd-sb-cell.wd-sb-mid text{fill:#fff}
.wd-sb-cell.wd-sb-hit{-webkit-animation:wd-sb-hit .18s;animation:wd-sb-hit .18s}
.wd-sb-btns{display:flex;justify-content:center;gap:10px;margin-top:6px}
.wd-sb-btns .wd-sb-btn{min-width:98px;min-height:48px;font-size:16px}
.wd-sb-btns .wd-sb-round{min-width:48px;width:48px;padding:0;font-size:22px;font-weight:700}

/* found words */
.wd-sb-fh{min-height:46px;padding:11px 14px;border:1px solid var(--wd-line);border-radius:var(--wd-radius) var(--wd-radius) 0 0;background:var(--wd-card);font-weight:800;font-size:15.5px}
.wd-sb-lw{min-height:120px;max-height:440px;margin:0 0 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--wd-line);border-top:0;border-radius:0 0 var(--wd-radius) var(--wd-radius);background:var(--wd-card)}
.wd-sb-list{margin:0;padding:6px 14px 10px;list-style:none;-webkit-columns:2;columns:2;-webkit-column-gap:18px;column-gap:18px}
.wd-sb-list li,.wd-sb-ylist li{padding:5px 0;border-bottom:1px solid var(--wd-line);font-weight:700;font-size:15.5px;line-height:1.35;-webkit-column-break-inside:avoid;break-inside:avoid;overflow-wrap:break-word;word-break:break-word}
.wd-sb-list li.wd-sb-pan{color:var(--wd-yellow);font-weight:900}

/* hints, yesterday's answers, the end */
.wd-sb-hints,.wd-sb-extra{margin:0 0 12px;padding:14px;border:1px solid var(--wd-line);border-radius:var(--wd-radius);background:var(--wd-card)}
.wd-sb-h{margin:0 0 4px;font-size:18px;font-weight:900;line-height:1.25}
.wd-sb-note{margin:0 0 8px;color:var(--wd-muted);font-weight:700;font-size:14.5px}
.wd-sb-tw{max-width:100%;margin:0 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wd-sb-grid{border-collapse:collapse;font-variant-numeric:tabular-nums}
.wd-sb-grid th,.wd-sb-grid td{padding:3px 7px;border-bottom:1px solid var(--wd-line);font-size:14px;text-align:center}
.wd-sb-grid th{font-weight:900}
.wd-sb-grid td{font-weight:700}
.wd-sb-grid td.wd-sb-z{color:var(--wd-muted);font-weight:400}
.wd-sb-grid td.wd-sb-sum{font-weight:900}
.wd-sb-two{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.wd-sb-two span{padding:2px 8px;border-radius:6px;background:var(--wd-key);font-weight:800;font-size:13.5px}
.wd-sb-ylist{margin:8px 0 0;padding:0;list-style:none;-webkit-columns:3;columns:3;-webkit-column-gap:16px;column-gap:16px}
.wd-sb-ylist li{color:var(--wd-muted);font-weight:600;font-size:14.5px}
.wd-sb-ylist li.wd-sb-got{color:var(--wd-text);font-weight:800}
.wd-sb-ylist li.wd-sb-pan{color:var(--wd-yellow);font-weight:900}
.wd-sb-end{text-align:center}
.wd-sb-end .wd-sb-h{font-size:24px;color:var(--wd-yellow)}
.wd-sb-end .wd-sb-note{margin-bottom:12px}
.wd-sb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* hover only where a mouse can hover (no sticky colours after a tap) */
@media (hover:hover){
  .wd-sb .wd-sb-sb:hover{color:var(--wd-text)}
  .wd-sb-btn:hover{background:color-mix(in srgb,var(--wd-key) 82%,var(--wd-text))}
  .wd-sb .wd-sb-btn.wd-sb-primary:hover{background:color-mix(in srgb,var(--wd-red) 86%,#000)}
  .wd-sb .wd-sb-btn.wd-sb-on:hover{background:var(--wd-text)}
  .wd-sb-cell:hover polygon{opacity:.8}
}

/* ---------- sizes ---------- */
@media (min-width:640px){
  .wd-sb-bar{max-width:none}
  .wd-sb-seg{flex:0 1 auto}
  .wd-sb-sb{flex:none;padding:0 18px}
}
/* two columns: hive + controls on the left, found words on the right */
@media (min-width:760px){
  .wd-sb-main{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
}
@media (max-width:759px){
  .wd-sb{min-height:520px}
  .wd-sb-lw{max-height:212px;min-height:64px}
}
@media (max-width:480px){
  .wd-sb-rank{gap:10px}
  .wd-sb-rname{min-width:0;font-size:15px}
  .wd-sb-input{font-size:30px}
  .wd-sb-input.wd-sb-long{font-size:20px}
  .wd-sb-long .wd-sb-caret{height:24px}
  .wd-sb-ylist{-webkit-columns:2;columns:2}
}
@media (max-width:360px){
  .wd-sb-sb{padding:0 6px;font-size:13.5px}
  .wd-sb-btn{padding:0 12px;font-size:14px}
  .wd-sb-btns{gap:8px}
  .wd-sb-btns .wd-sb-btn{min-width:84px}
  .wd-sb-list{-webkit-column-gap:12px;column-gap:12px;padding:6px 10px 10px}
}

@-webkit-keyframes wd-sb-blink{50%{opacity:0}}
@keyframes wd-sb-blink{50%{opacity:0}}
@-webkit-keyframes wd-sb-shake{20%{-webkit-transform:translateX(-8px)}40%{-webkit-transform:translateX(8px)}60%{-webkit-transform:translateX(-5px)}80%{-webkit-transform:translateX(5px)}}
@keyframes wd-sb-shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@-webkit-keyframes wd-sb-hit{50%{-webkit-transform:scale(.9)}}
@keyframes wd-sb-hit{50%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){
  .wd-sb-now,.wd-sb-cell polygon{transition:none}
  .wd-sb-input.wd-sb-shake,.wd-sb-cell.wd-sb-hit{-webkit-animation:none;animation:none}
}
@media print{
  .wd-sb-bar,.wd-sb-btns{display:none!important}
}