/* Basil Kicks: bonus arcade game. Self-contained; relies only on shell.css variables. */
.bk-page{max-width:820px}
.bk-intro{position:relative;overflow:hidden;border-radius:24px;padding:28px 20px 24px;text-align:center;color:#F1ECF8;
  background:radial-gradient(circle at 82% 14%,rgba(255,224,138,.22) 0 46px,transparent 47px),linear-gradient(170deg,#6FA8C9 0%,#3E7FA6 62%,#2B5E80 100%);
  display:grid;justify-items:center;gap:10px;box-shadow:0 14px 40px rgba(30,22,45,.28)}
.bk-intro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 70%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 80%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 40%,#fff 50%,transparent 51%)}
.bk-intro>*{position:relative;margin:0}
.bk-masc{width:112px;height:112px;animation:bkbob 3s ease-in-out infinite}
@keyframes bkbob{50%{transform:translateY(-6px) rotate(-3deg)}}
.bk-found{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#FFE08A;background:rgba(255,255,255,.1);border-radius:999px;padding:5px 12px}
.bk-intro h1{font:700 clamp(36px,8vw,52px)/1.05 var(--title)}
.bk-lede{max-width:34em;font-size:16px;line-height:1.5;color:#E4DCF5}
.bk-how{font-size:14px;color:#C9BFE6}
.bk-play.big{background:#FFE08A;color:#2E1F57;margin-top:4px}
.bk-play.big:hover{background:#FFD45C}
.bk-best{font-size:14px;color:#C9BFE6;min-height:1.4em}
.bk-best b{color:#fff}
.bk-hush{font-size:12px;color:#A99BD1;font-style:italic}

.bk-game{display:grid;gap:10px;margin:0 auto;width:100%}
.bk-hud{display:flex;align-items:center;gap:10px;background:#2B5E80;color:#fff;border-radius:16px;padding:8px 10px 8px 14px;font-variant-numeric:tabular-nums}
.bk-time{display:grid;line-height:1.1;margin-right:auto}
.bk-time small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#C9BFE6}
.bk-time b{font:600 20px var(--body)}
.bk-cof{font:600 16px var(--body);white-space:nowrap}
.bk-lives{font-size:18px;letter-spacing:2px;color:#FF8FAE;white-space:nowrap}
.bk-lives .off{color:rgba(255,255,255,.22)}
.bk-ibtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:15px;display:grid;place-items:center;padding:0;flex:none}
.bk-ibtn:focus-visible,.bk-sbtn:focus-visible{outline:2px solid #FFE08A;outline-offset:2px}
.bk-stage{position:relative;border-radius:20px;overflow:hidden;background:#F3E9DA;box-shadow:0 10px 30px rgba(30,22,45,.3);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#bk-canvas{display:block;width:100%;cursor:pointer;touch-action:none}
.bk-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,13,40,.62);padding:14px}
.bk-card{background:#FAF7F2;color:#2B2340;border-radius:20px;padding:18px 18px 14px;width:min(360px,100%);text-align:center;display:grid;gap:8px;justify-items:center;box-shadow:0 14px 40px rgba(0,0,0,.35);animation:bkpop .35s cubic-bezier(.2,1.4,.4,1)}
:root[data-motion="reduce"] .bk-card,:root[data-motion="reduce"] .bk-masc{animation:none}
@media (prefers-reduced-motion:reduce){.bk-card,.bk-masc{animation:none}}
@keyframes bkpop{from{transform:scale(.85);opacity:0}}
.bk-card p{margin:0}
.bk-omasc{width:72px;height:72px;margin-top:-4px}
.bk-otitle{font:700 28px/1.1 var(--title);color:#4A3480}
.bk-omsg{font-size:15px;line-height:1.45;color:#4B3D6E}
.bk-ostats{display:flex;gap:10px;width:100%}
.bk-ostats span{flex:1;background:#EFE9F8;border-radius:14px;padding:8px 6px;display:grid}
.bk-ostats small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6B5A93}
.bk-ostats b{font:600 20px var(--body);color:#2E1F57;font-variant-numeric:tabular-nums}
.bk-obest{font-size:13px;color:#6B5A93;min-height:1.3em}
.bk-obest.pb{color:#B5308A;font-weight:600}
.bk-obtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.bk-obtns .big{min-width:0;flex:1 1 160px;background:#2E1F57;color:#fff}
.bk-sbtn{font:600 15px var(--body);padding:12px 20px;border-radius:999px;border:2px solid #4A3480;background:transparent;color:#4A3480;cursor:pointer;flex:0 1 auto}
.bk-ohint{font-size:12px;color:#8A7BB0}
@media (hover:none){.bk-ohint{display:none}}
.bk-foot{margin:0;text-align:center;font-size:14px}
.bk-foot a{color:var(--muted)}
.bk-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);transform:translateX(-50%);z-index:70;background:#2E1F57;color:#fff;font:500 14px var(--body);padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100vw - 32px)}
.bk-rules{width:min(100%,520px);text-align:left;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:10px 14px;color:#E4DCF5;font-size:14px;line-height:1.45}
.bk-rules summary{cursor:pointer;font-weight:600;color:#FFE08A;text-align:center;list-style:none}
.bk-rules summary::-webkit-details-marker{display:none}
.bk-rules summary::after{content:" \25BE"}
.bk-rules[open] summary::after{content:" \25B4"}
.bk-rules h2{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#FFE08A;margin:12px 0 4px}
.bk-rules ul{margin:0;padding-left:18px;display:grid;gap:3px}
.bk-rules b{color:#fff}
.bk-duo{display:flex;align-items:flex-end;gap:2px}
.bk-intro .bk-masc{width:112px;height:146px}
.bk-intro .bk-masc2{width:104px;height:136px;animation-delay:-1.5s}
.bk-omasc{width:72px;height:94px}
.bk-ofeat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B5A93;margin:-4px 0 -6px!important}
.bk-ostats .bk-big{flex:1.4;background:#2E1F57}
.bk-ostats .bk-big small{color:#C9BFE6}
.bk-ostats .bk-big b{color:#FFE08A;font-size:24px}
.bk-card{max-height:100%;overflow:auto}
.bk-hs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;width:100%;font-variant-numeric:tabular-nums}
.bk-hs li{display:grid;grid-template-columns:22px 1fr auto 30px;gap:8px;align-items:center;padding:4px 8px;border-radius:8px;font-size:13.5px;text-align:left}
.bk-hs .rk{font-weight:700;opacity:.7}.bk-hs .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-hs .sc{font-weight:700}.bk-hs .rd{font-size:11px;opacity:.65;text-align:right}
.bk-hsbox .bk-hs li{background:rgba(255,255,255,.08)}.bk-hsbox .bk-hs li:first-child{color:#FFE08A}
.bk-hsnote{margin:6px 0 0;font-size:11.5px;color:#A99BD1;text-align:center}
.bk-hsnone{display:block!important;text-align:center!important;opacity:.7}
.bk-hs-o li{background:#EFE9F8;color:#2E1F57}.bk-hs-o li.me{background:#FFE08A;outline:2px solid #B07A0C}
.bk-hs-o{max-height:150px;overflow:auto}
.bk-hsform{width:100%;display:grid;gap:4px;background:#FFF3C4;border-radius:12px;padding:8px 10px}
.bk-hsform label{font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8A5A00}
.bk-hsform div{display:flex;gap:6px}
.bk-hsform input{flex:1;min-width:0;font:600 16px var(--body);padding:8px 10px;border-radius:10px;border:1.5px solid #D2C6B6;background:#fff;color:#2B2340}
.bk-hsform button{font:700 14px var(--body);padding:8px 14px;border-radius:999px;border:0;background:#2E1F57;color:#fff;cursor:pointer}
/* compact game-over card: no sideways scroll, fits short screens */
.bk-over{padding:10px}
.bk-card{grid-template-columns:minmax(0,1fr);overflow-x:hidden;overflow-y:auto;padding:14px 14px 12px;gap:6px;box-sizing:border-box;scrollbar-width:thin}
.bk-card>*{max-width:100%;box-sizing:border-box}
.bk-omasc{width:56px;height:56px;margin-top:0}
.bk-otitle{font-size:24px}
.bk-omsg{font-size:14px;line-height:1.35}
.bk-ostats{gap:6px}
.bk-ostats span{min-width:0;padding:6px 4px}
.bk-ostats small{font-size:9px;letter-spacing:.06em}
.bk-ostats b{font-size:18px}
.bk-ostats .bk-big b{font-size:22px}
.bk-hsform{padding:6px 8px;grid-template-columns:minmax(0,1fr);text-align:center}
.bk-hsform input{padding:6px 10px}
.bk-obtns .big,.bk-sbtn{padding-top:10px;padding-bottom:10px}
@media (max-height:640px){.bk-omasc{display:none}}
.bk-omasc{width:46px;height:46px}
.bk-hsform:not([hidden])~.bk-ohint{display:none}
.bk-card{padding:10px 14px 10px;gap:5px}

/* toast sits centred in the cupboard area under the bench */
.bk-stage .bk-toast{position:absolute;top:87.5%;bottom:auto;transform:translate(-50%,-50%);font-size:13px;padding:8px 14px;max-width:84%;text-align:center;pointer-events:none}
.bk-how{text-wrap:balance}.bk-how .nw{white-space:nowrap}

/* daily challenge + leaderboard tabs */
.bk-daily{display:flex;flex-direction:column;align-items:center;gap:1px;margin:10px auto 0!important;padding:8px 20px;border-radius:999px;border:2px solid #FFE08A;background:transparent;color:#FFE08A;font:700 15px var(--body);cursor:pointer}
.bk-daily small{font:500 11.5px var(--body);color:#C9BFE6}
.bk-daily:hover{background:rgba(255,224,138,.12)}
.bk-tabs{display:flex;gap:4px;justify-content:center;margin:8px 0 2px}
.bk-tabs button{font:700 12px var(--body);padding:5px 11px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:inherit;cursor:pointer}
.bk-tabs button.on{background:#FFE08A;border-color:#FFE08A;color:#2E1F57}
.bk-tabs-o{margin:2px 0 0}
.bk-tabs-o button{border-color:#D8CFEA;color:#2E1F57}
.bk-tabs-o button.on{background:#2E1F57;border-color:#2E1F57;color:#fff}
.bk-hsbox .bk-hs li.me{outline:2px solid #FFE08A}
.bk-endless{border-color:#C9BFE6;color:#F1ECF8}
.bk-endless.locked{opacity:.7;cursor:default;border-style:dashed;font-size:13px}
.bk-endless.locked:hover{background:transparent}
.bk-otrophy{font-size:46px;line-height:1;margin:-4px 0 -4px!important}
.bk-over.win .bk-otitle{color:#B07A0C}
.bk-crown{font-size:.9em}

/* How to play popup: two short pages, fits a 375x667 phone without scrolling */
.bk-howbtn{font:700 14px var(--body);padding:7px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#FFE08A;cursor:pointer}
.bk-howbtn:hover{background:rgba(255,255,255,.2)}
.bk-help{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(20,13,40,.62);padding:12px}
.bk-help[hidden]{display:none}
.bk-hcard{position:relative;width:min(380px,100%);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;background:#FAF7F2;color:#2B2340;border-radius:18px;padding:14px 16px 14px;box-shadow:0 14px 40px rgba(0,0,0,.35);animation:bkpop .3s cubic-bezier(.2,1.4,.4,1)}
.bk-hcard h2{margin:0 0 6px;font:700 22px/1.1 var(--title);color:#4A3480;text-align:center}
.bk-hx{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#6B5A93;font-size:24px;line-height:1;cursor:pointer}
.bk-htabs{display:flex;gap:4px;justify-content:center;margin:0 0 8px}
.bk-htabs button{font:700 12.5px var(--body);padding:5px 12px;border-radius:999px;border:1.5px solid #D8CFEA;background:transparent;color:#2E1F57;cursor:pointer}
.bk-htabs button[aria-selected="true"]{background:#2E1F57;border-color:#2E1F57;color:#fff}
.bk-hp{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;line-height:1.38;color:#3B2F5C}
.bk-hp b{color:#2E1F57}
.bk-hp[hidden]{display:none}
.bk-hgo{display:block;margin:10px auto 0;font:700 15px var(--body);padding:9px 26px;border-radius:999px;border:0;background:#2E1F57;color:#fff;cursor:pointer}
.bk-hx:focus-visible,.bk-htabs button:focus-visible,.bk-hgo:focus-visible,.bk-howbtn:focus-visible{outline:2px solid #B07A0C;outline-offset:2px}
:root[data-motion="reduce"] .bk-hcard{animation:none}
@media (prefers-reduced-motion:reduce){.bk-hcard{animation:none}}

/* Stage select: the Kitchen and the Vet */
.bk-pick{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#C9E6F5;margin-top:2px!important}
.bk-sc{width:min(100%,520px);box-sizing:border-box;display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;text-align:left;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:8px;align-items:center}
.bk-sc.vet{background:linear-gradient(160deg,rgba(91,208,138,.28),rgba(46,125,107,.35));border-color:#7FE0B4;box-shadow:0 0 0 2px rgba(127,224,180,.3)}
.bk-sc.vet.locked{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none}
.bk-sc.locked .bk-th{filter:grayscale(1) opacity(.55)}
.bk-th{display:block;width:104px;height:124px;border-radius:10px;background:#E6F1EC}
.bk-sci{min-width:0}
.bk-sci h2{margin:0;font:700 19px/1.1 var(--title);color:#fff}
.bk-sk{font:700 10px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#FFE08A}
.bk-new{display:inline-block;font:800 9px var(--body);letter-spacing:.12em;background:#B5308A;color:#fff;border-radius:999px;padding:2px 7px;margin-left:4px;vertical-align:1px}
.bk-new[hidden]{display:none}
.bk-sst{margin:2px 0 0;font-size:12px;color:#fff}
.bk-sst b{color:#FFE08A}
.bk-sd{margin:2px 0 0;font-size:11.5px;line-height:1.35;color:#E4DCF5}
.bk-sbs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.bk-sbn{font:700 13px var(--body);padding:8px 14px;border-radius:999px;background:#FFE08A;color:#2E1F57;border:0;cursor:pointer}
.bk-sbn:hover{background:#FFD45C}
.bk-sbn.gh{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);padding:6.5px 12px}
.bk-sbn.gh:hover{background:rgba(255,255,255,.12)}
.bk-sbn:disabled{cursor:default;background:rgba(255,255,255,.12);color:#C9BFE6;border:1.5px dashed rgba(255,255,255,.35)}
.bk-sbn.bk-endless.locked{font-size:12px;opacity:1}
.bk-sbn:focus-visible,.bk-dbtn:focus-visible{outline:2px solid #FFE08A;outline-offset:2px}
.bk-srow{width:min(100%,520px);display:flex;gap:6px}
.bk-chip,.bk-dbtn{flex:1;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:6px 4px;font:500 10.5px/1.3 var(--body);color:#E4DCF5;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bk-chip b{color:#fff;font-size:13px}
.bk-dbtn{font:700 13px var(--body);color:#FFE08A;border:1.5px solid #FFE08A;background:transparent;cursor:pointer}
.bk-dbtn small{font:500 10.5px var(--body);color:#C9BFE6}
.bk-dbtn:disabled{opacity:.45;cursor:default;border-style:dashed}
.bk-dnote{font-size:11.5px;color:#A99BD1;margin-top:-4px!important}
.bk-game.bk-vet .bk-hud{background:#1F6B60}
.bk-game.bk-vet .bk-stage{background:#E6F1EC}
.bk-htabs{flex-wrap:wrap}
.bk-htabs button[hidden]{display:none}
.bk-tabs-o[hidden]{display:none}

/* How it works: picture guide */
.bk-guide{width:min(100%,640px)}
.bk-grules{margin:8px 0 2px!important}
.bk-gtabs{display:flex;gap:6px;justify-content:center;margin:10px 0 4px}
.bk-gtabs button{font:700 12.5px var(--body);padding:5px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#F1ECF8;cursor:pointer}
.bk-gtabs button[aria-pressed="true"]{background:#FFE08A;border-color:#FFE08A;color:#2E1F57}
.bk-gtabs button:focus-visible{outline:2px solid #FFE08A;outline-offset:2px}
.bk-gpane[hidden]{display:none}
.bk-gpane h3{font:600 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#FFE08A;margin:10px 0 4px}
.bk-gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px}
.bk-gt{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:4px 2px 5px;text-align:center;min-width:0}
.bk-gt canvas{width:48px;height:48px;display:block}
.bk-gt span{font:600 10.5px/1.2 var(--body);color:#fff;overflow-wrap:normal;hyphens:manual}
.bk-gt em{display:block;font-style:normal;font-weight:500;font-size:9.5px;color:#C9BFE6}
.bk-gt.no{background:rgba(194,85,58,.18);border-color:rgba(255,150,130,.35)}
.bk-gt.no::after{content:"⦸";position:absolute;top:1px;right:5px;color:#FF9A86;font-weight:700;font-size:13px}
.bk-gt.gd{background:rgba(255,224,138,.12);border-color:rgba(255,224,138,.3)}
.bk-gt.bs{background:rgba(122,31,43,.3);border-color:rgba(255,150,150,.3)}
.bk-gg:has(.bs){grid-template-columns:repeat(auto-fit,minmax(96px,120px));justify-content:center}
.bk-gt.bs canvas{width:64px;height:64px}
.bk-oexit{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.bk-oexit .bk-sbtn{text-decoration:none;display:inline-flex;align-items:center}

/* High scores: Kitchen / Vet switch */
.bk-hsst{margin-bottom:0}
.bk-hsst[hidden],.bk-tabs button[hidden]{display:none}
.bk-hsst button{font-size:11.5px;padding:4px 10px}