/* Best Play. Puzzle-app style in lime, matching the Ned Hardy collection.
   Everything is scoped under .bp so theme styles stay out. */
.bp{
  container-type:inline-size;
  --bp-bg:#F6FBEC; --bp-page:#E1F0C4; --bp-surface:#FFFFFF; --bp-ink:#121212; --bp-muted:#55613F; --bp-rule:#DEEBC6;
  --bp-main:#7CB518; --bp-main-dark:#5C8A14; --bp-accent:#F4C430; --bp-yellow-soft:#FBEBB5; --bp-empty:#EEF4E1; --bp-bad:#C23B22;
  --bp-display:"Fraunces",Georgia,"Times New Roman",serif;
  --bp-font:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; background:var(--bp-bg); color:var(--bp-ink);
  font-family:var(--bp-font); font-size:16px; font-weight:400; line-height:1.45; text-align:left;
  -webkit-font-smoothing:antialiased; position:relative;
}
.bp *,.bp *::before,.bp *::after{box-sizing:inherit}
.bp p{margin:0}
.bp ul,.bp ol{margin:0;padding:0;list-style:none}
.bp h1,.bp h2,.bp h3{margin:0!important;color:inherit;font-family:var(--bp-display);font-weight:900;letter-spacing:-.02em;text-transform:none;line-height:1.05}
.bp button,.bp input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none}
.bp button{cursor:pointer;min-height:0;width:auto;border-radius:0;box-shadow:none;line-height:1.2}
.bp :focus-visible{outline:3px solid var(--bp-main-dark)!important;outline-offset:2px}
.bp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bp-inner{max-width:480px;margin:0 auto;padding:20px 16px 32px;display:flex;flex-direction:column;gap:14px;min-height:620px}
.bp-loading{color:var(--bp-muted);font-weight:600;padding:40px 0;text-align:center}
.bp-error{background:#FDECEA;color:var(--bp-bad);border:1px solid var(--bp-bad);border-radius:12px;padding:12px 14px;font-weight:600}
.bp-label{font-size:13px;font-weight:700;color:var(--bp-muted)}
.bp-muted{font-size:14px;font-weight:600;color:var(--bp-muted)}
.bp-box{background:var(--bp-surface);border:1px solid var(--bp-rule);border-radius:16px}
.bp-big{font-family:var(--bp-display);font-weight:900;letter-spacing:-.02em;font-size:24px;line-height:1.1}
.bp-center{text-align:center;font-size:14px;font-weight:600;color:var(--bp-muted);font-variant-numeric:tabular-nums}
.bp-grow{flex:1 1 auto}
.bp .bp-title{font-size:32px;line-height:1.05}
.bp .bp-h3{font-size:22px;line-height:1.1}

/* Buttons and links: black pills */
.bp .bp-btn{border:1px solid var(--bp-ink)!important;border-radius:999px!important;background:var(--bp-ink)!important;color:#FFFFFF!important;font-weight:700!important;font-size:16px!important;height:52px;padding:0 22px!important;text-decoration:none}
.bp .bp-btn:hover{background:#333333!important}
.bp .bp-btn:disabled{background:#B7BDAA!important;border-color:#B7BDAA!important;cursor:default}
.bp .bp-btn.ghost{background:var(--bp-surface)!important;color:var(--bp-ink)!important;padding:0 16px!important}
.bp .bp-btn.ghost:hover{background:var(--bp-bg)!important}
.bp .bp-btn.wide{width:100%}
.bp-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 24px}
.bp .bp-link{background:none!important;border:none!important;padding:8px!important;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--bp-ink)!important;min-height:44px}
.bp .bp-link.inline{padding:0!important;font-size:inherit;min-height:0}
.bp .bp-iconbtn{width:44px;height:44px;border:1px solid var(--bp-rule)!important;border-radius:12px!important;background:var(--bp-surface)!important;display:inline-flex;align-items:center;justify-content:center;padding:0!important;color:var(--bp-ink)!important}

/* Start screen: icon, serif name, pill buttons */
.bp.bp--start{background:var(--bp-page)}
.bp--start .bp-inner{min-height:0;max-width:560px;padding:52px 20px 44px;align-items:center}
.bp-splash{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.bp-icon{display:block;width:84px;height:84px}
.bp .bp-name{margin-top:18px!important;font-size:clamp(40px,11cqi,58px)!important;line-height:1!important;color:var(--bp-ink)}
.bp .bp-sub{margin-top:12px!important;max-width:360px;font-family:var(--bp-display);font-weight:400;font-size:20px;line-height:1.35}
.bp-pills{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.bp .bp-pill{display:inline-flex;align-items:center;justify-content:center;min-width:190px;height:48px;padding:0 28px!important;border:1px solid var(--bp-ink)!important;border-radius:999px!important;background:transparent!important;color:var(--bp-ink)!important;font-weight:600!important;font-size:16px!important;line-height:1!important;text-decoration:none}
.bp .bp-pill:hover{background:rgba(0,0,0,.06)!important}
.bp .bp-pill.solid{background:var(--bp-ink)!important;color:#FFFFFF!important}
.bp .bp-pill.solid:hover{background:#333333!important}
.bp .bp-dateline{margin-top:24px!important;font-size:15px;line-height:1.45}
.bp .bp-splashfacts{margin-top:4px!important;font-size:13px;color:#4A4A4A}
.bp-how{margin-top:20px;width:100%;max-width:440px;text-align:left}
.bp-how summary{cursor:pointer;text-align:center;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;list-style:none}
.bp-how summary::-webkit-details-marker{display:none}
.bp .bp-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-size:15px;line-height:1.45}
.bp-howlist li{display:flex;gap:10px;margin:0}
.bp-howlist strong{flex:0 0 auto;font-weight:700}
.bp .bp-logo{display:inline-flex;align-items:center;gap:.3em;font-family:var(--bp-display);font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.bp-icon-sm{display:block;width:1em;height:1em;flex:0 0 auto}

/* Playing */
.bp-hud{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bp-hud .t{display:flex;flex-direction:column;min-width:0}
.bp-hud .t b{font-family:var(--bp-display);font-weight:900;font-size:clamp(22px,7.5cqi,30px);line-height:1.1;white-space:nowrap}
.bp-hudr{display:flex;align-items:center;gap:8px}
.bp-pts{background:var(--bp-ink);color:#FFFFFF;border-radius:14px;padding:8px 16px;text-align:right;min-width:96px}
.bp-pts small{display:block;font-size:12px;font-weight:600;opacity:.8}
.bp-pts strong{font-weight:800;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.bp-bar2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.bp-bar2 b{font-family:var(--bp-display);font-weight:900;font-size:22px;letter-spacing:-.02em;margin-right:10px}
.bp-bar2 span{font-size:13px;font-weight:700;color:var(--bp-muted)}
.bp .bp-bar2 .bp-goldpill{display:inline-block;background:#F4C430;color:var(--bp-ink);border:2px solid var(--bp-ink);border-radius:6px;padding:3px 9px;font-size:13px;font-weight:800;line-height:1.3}
.bp-boardwrap{background:var(--bp-surface);border:1px solid var(--bp-rule);border-radius:18px;padding:6px;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 10px 30px -18px rgba(18,18,18,.35)}
.bp-boardwrap.zoomed{max-height:70vh}
.bp-board{display:grid;grid-template-columns:repeat(var(--bp-n),minmax(0,1fr));gap:2px;width:100%;container-type:inline-size}
.zoomed .bp-board{width:175%}
.bp .bp-cell{position:relative;aspect-ratio:1/1;border:0!important;padding:0!important;border-radius:3px!important;background:var(--bp-empty)!important;color:var(--bp-ink)!important;display:flex;align-items:center;justify-content:center;font-size:14px;font-size:calc(100cqw / var(--bp-n) * .56);min-width:0;min-height:0}
.bp-cell .l{font-weight:800;line-height:1}
.bp-cell .v{position:absolute;right:7%;bottom:3%;font-size:.42em;font-weight:800;line-height:1}
.bp-cell .pm{font-size:.6em;font-weight:800}
.bp .bp-cell.p2L{background:#E3EEF9!important;color:#2D5D8C!important}
.bp .bp-cell.p3L{background:#ECE5F7!important;color:#5B3C99!important}
.bp .bp-cell.p2W{background:#FCE8DC!important;color:#A3461C!important}
.bp .bp-cell.p3W{background:#F9DDE2!important;color:#9C2340!important}
.bp .bp-cell.filled{background:var(--bp-surface)!important;box-shadow:inset 0 0 0 1.5px var(--bp-ink);cursor:default}
.bp .bp-cell.pending{background:var(--bp-accent)!important;box-shadow:inset 0 0 0 1.5px var(--bp-ink);z-index:1}
.bp .bp-cell.hl{background:var(--bp-accent)!important;box-shadow:inset 0 0 0 1.5px var(--bp-ink)}
.bp .bp-cell.target{box-shadow:inset 0 0 0 2px var(--bp-main-dark)}
.bp-arrow{position:absolute;width:45%;height:45%;color:var(--bp-main-dark)}
.bp-preview{min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center}
.bp-hint{font-size:14px;color:var(--bp-muted);font-weight:500}
.bp-word{display:inline-flex;align-items:center;gap:10px;background:var(--bp-ink);color:#FFFFFF;border-radius:999px;padding:8px 16px;font-size:14px}
.bp-word b{letter-spacing:1px;font-weight:800}
.bp-word i{width:1px;height:14px;background:#555555}
.bp-word span{color:var(--bp-accent);font-weight:700}
.bp-word.bad{background:#FDECEA;color:#8E1F1A;font-weight:600}
.bp-rack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bp .bp-tile{position:relative;aspect-ratio:44/50;border:2px solid var(--bp-ink)!important;border-radius:8px!important;background:var(--bp-surface)!important;color:var(--bp-ink)!important;display:flex;align-items:center;justify-content:center;padding:0!important;transition:transform .12s ease}
.bp-tile .l{font-weight:800;font-size:24px;line-height:1}
.bp-tile .v{position:absolute;right:5px;bottom:4px;font-size:10px;font-weight:800}
.bp .bp-tile.sel{background:var(--bp-yellow-soft)!important;transform:translateY(-5px)}
.bp .bp-tile.used{border:2px dashed var(--bp-rule)!important;background:transparent!important}
.bp-controls{display:flex;gap:8px}
/* Drag and drop */
.bp .bp-tile,.bp .bp-cell.pending{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.bp .bp-tile.dragging,.bp .bp-cell.pending.dragging{opacity:.35}
.bp .bp-cell.drop{box-shadow:inset 0 0 0 2.5px var(--bp-main-dark);background:#F5F9EA!important}
.bp-rack.drop{outline:2px dashed var(--bp-main-dark);outline-offset:4px;border-radius:10px}
.bp.bp-ghost{position:fixed;container-type:normal;z-index:100000;width:46px;height:50px;transform:translate(-50%,-50%) scale(1.08);border:2px solid var(--bp-ink);border-radius:8px;background:var(--bp-accent);color:var(--bp-ink);display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 10px 24px -8px rgba(18,18,18,.45);font-family:var(--bp-font)}
.bp-ghost .l{font-weight:800;font-size:24px;line-height:1}
.bp-ghost .v{position:absolute;right:5px;bottom:4px;font-size:10px;font-weight:800}
.bp-controls [data-act="play"]{flex:1}
.bp .bp-btn.confirm{background:var(--bp-main)!important;border-color:var(--bp-ink)!important;color:var(--bp-ink)!important}
.bp-toast{position:absolute;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--bp-ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;z-index:5}
.bp-toast.on{opacity:1;transform:translate(-50%,0)}
.bp.bp-modal{position:fixed;container-type:normal;inset:0;background:rgba(18,18,18,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:99999}
.bp-modalcard{background:var(--bp-surface);border-radius:18px;padding:22px 20px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}
.bp-modalcard .bp-howlist{background:var(--bp-bg)}

/* Results */
.bp-result{background:var(--bp-page);border-radius:18px;padding:18px 20px}
.bp-result .bp-label{color:var(--bp-ink);letter-spacing:.04em}
.bp-result .v{font-family:var(--bp-display);font-weight:900;letter-spacing:-.02em;font-size:clamp(26px,8.5cqi,36px);line-height:1.05;margin-top:4px}
.bp-meter{margin-top:14px;height:10px;border-radius:999px;background:rgba(255,255,255,.75);overflow:hidden}
.bp-meter div{height:100%;border-radius:999px;background:var(--bp-main-dark)}
.bp-meterl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px;font-size:11px;font-weight:600;color:var(--bp-muted)}
.bp-meterl span:nth-child(2),.bp-meterl span:nth-child(3){text-align:center}
.bp-meterl span:last-child{text-align:right}
.bp-meterl .on{color:var(--bp-ink);font-weight:800}
.bp-tiles{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.bp-tiles .pts{background:var(--bp-main);color:var(--bp-ink);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;grid-row:span 3}
.bp-tiles .pts .bp-label{color:var(--bp-ink)}
.bp-tiles .pts strong{font-weight:800;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.bp-tiles .pts span{font-size:13px;font-weight:600}
.bp-tiles .fact{padding:8px 12px;border-radius:14px}
.bp-tiles .fact b{display:block;font-weight:800;font-size:20px;line-height:1.15;word-break:break-word}
.bp-tiles .fact span{font-size:12px;font-weight:600;color:var(--bp-muted)}
.bp-topbox{padding:16px 18px 10px}
.bp-boxhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.bp-boxhead span{font-size:12px;font-weight:600;color:var(--bp-muted)}
.bp-tops{margin-top:8px!important}
.bp .bp-toprow{display:grid;grid-template-columns:28px 1fr auto 40px;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 6px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--bp-rule)!important;color:var(--bp-ink)!important;border-radius:0!important}
.bp-tops li:last-child .bp-toprow{border-bottom:0!important}
.bp .bp-toprow.me{background:var(--bp-yellow-soft)!important;box-shadow:inset 4px 0 0 var(--bp-accent);border-radius:8px!important}
.bp .bp-toprow.on{box-shadow:inset 0 0 0 2px var(--bp-main-dark);border-radius:8px!important}
.bp-toprow .r{font-family:var(--bp-display);font-weight:900}
.bp-toprow .minis{display:flex;gap:3px;flex-wrap:wrap}
.bp-toprow .mini{width:24px;height:26px;border:1.5px solid var(--bp-ink);border-radius:5px;background:var(--bp-surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.bp-toprow .you{font-size:11px;font-weight:800;background:var(--bp-ink);color:#fff;border-radius:999px;padding:3px 8px}
.bp-toprow .p{font-weight:800;font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.bp-toprow.static{cursor:default}

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

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

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

@container (min-width:560px){
  .bp-inner{max-width:none;padding:30px 32px 40px;gap:18px}
  .bp-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bp-alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp .bp-alist .bp-arow:nth-child(odd){border-right:1px solid var(--bp-rule)!important}
  .bp-tile .l{font-size:28px}
}
@container (min-width:860px){
  .bp-inner{max-width:1200px;padding:36px 40px 44px;gap:22px}
  .bp-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
  .bp-cols.play{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .bp-cols.play .side{position:sticky;top:24px;background:var(--bp-surface);border:1px solid var(--bp-rule);border-radius:18px;padding:22px}
  .bp-cols.done .side .bp-grow{display:none}
  .bp-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .bp .bp-tile,.bp-toast{transition:none}
}