/* The Arcade (public/arcade.js): the game list, the eight games and Turdle as full-screen overlays,
   plus the compact Arcade card Throne Mode embeds. Ported from the iPhone app's arcade.tsx, games.tsx
   and turdle.tsx. Every colour comes from the styles.css tokens, so all colour themes and dark mode
   carry over; the few fixed colours are game art (the night sky, the tile marks, the legend chips).
   Phones get the whole screen; wider screens get a centred 520px column. Motion is fades only. */

html.arc-lock,html.arc-lock body{overflow:hidden;overscroll-behavior:none}

/* Two colours that need a light-theme and a dark-theme value: gold text and the "not in the word" tile. */
.arc-ov,.arc-card{--arc-gold:#A8740B;--arc-absent:var(--muted);--arc-purple:#8B6BD9}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) :is(.arc-ov,.arc-card){--arc-gold:#F2B640;--arc-absent:color-mix(in srgb,var(--muted) 34%,var(--ground));--arc-purple:#B79CF2}
}
html:is([data-theme="plum"],[data-theme="ocean"]) :is(.arc-ov,.arc-card){--arc-gold:#F2B640;--arc-absent:color-mix(in srgb,var(--muted) 34%,var(--ground));--arc-purple:#B79CF2}

/* ---------- the overlay ---------- */
.arc-ov{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;background:var(--ground);color:var(--ink);
  font:16px/1.5 var(--body);-webkit-tap-highlight-color:transparent;animation:arcIn .22s ease-out}
.arc-ov.arc-out{animation:arcOut .16s ease-in forwards;pointer-events:none}
@keyframes arcIn{from{opacity:0}to{opacity:1}}
@keyframes arcOut{from{opacity:1}to{opacity:0}}
.arc-wrap{position:relative;width:100%;max-width:520px;height:100%;min-height:0;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.arc-ov button{font-family:var(--body);-webkit-user-select:none;user-select:none}
.arc-ov img{max-width:none}
/* Wider screens: the column becomes a floating panel over a dimmed page. */
@media (min-width:640px) and (min-height:620px){
  .arc-ov{align-items:center;padding:24px;background:rgb(12 8 24 / .55)}
  .arc-ov~.arc-ov{background:transparent}
  .arc-wrap{height:min(100%,880px);background:var(--ground);border:1px solid var(--line);border-radius:28px;overflow:hidden;
    box-shadow:0 30px 80px rgb(12 8 24 / .32),0 2px 8px rgb(12 8 24 / .12)}
}

/* header: close button, eyebrow title */
.arc-head{flex:none;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 16px 0}
.arc-x{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.arc-x span{width:36px;height:36px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;transition:background .15s}
.arc-x svg{width:18px;height:18px;display:block}
.arc-x:active{transform:none}
.arc-x:active span{background:var(--line)}
@media (hover:hover){.arc-x:hover span{background:var(--line)}}
.arc-x-pad{flex:none;width:44px}
.arc-eyebrow{flex:1;min-width:0;text-align:center;font:500 12px/1 var(--mono);letter-spacing:.15em;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* score + time */
.arc-scorebar{flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:6px 28px 0}
.arc-k{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.arc-num{display:block;font:800 36px/1.12 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .2s}
.arc-num.low{color:var(--bad)}
.arc-right{text-align:right}

/* the game area */
.arc-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.arc-stage{flex:1;min-height:0;display:flex;flex-direction:column;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none}
.arc-count{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
  background:color-mix(in srgb,var(--ground) 80%,transparent)}
.arc-count b{font:800 110px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums;animation:arcIn .3s ease-out}

/* ready + results panes */
.arc-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom))}
.arc-col{margin:auto 0;width:100%;display:flex;flex-direction:column;gap:16px}
.arc-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.arc-hero-tight{gap:4px}
.arc-title{font:800 30px/1.25 var(--display);letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance}
.arc-title-sm{font-size:26px;line-height:1.2}
.arc-muted{color:var(--muted);margin:0;font-size:15px;line-height:1.45}
.arc-center{text-align:center}
.arc-small{font-size:12.5px}
.arc-err{color:var(--bad);margin:0;text-align:center;font-weight:600;font-size:15px}
.arc-nug{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.arc-nugget{width:16px;height:16px;flex:none;display:block}
.arc-fadein{animation:arcIn .25s ease-out}
.arc-icon{display:block;flex:none;border-radius:22.5%;object-fit:cover}

/* buttons */
.arc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:15px 20px;border:0;border-radius:14px;
  font:600 16px/1 var(--body);cursor:pointer;transition:transform .1s,opacity .15s,background .15s}
.arc-btn svg{width:17px;height:17px;flex:none;display:block}
.arc-btn:active{transform:scale(.98)}
.arc-primary{background:var(--primary);color:var(--primary-ink)}
.arc-ghost{background:var(--sunk);color:var(--ink)}
@media (hover:hover){.arc-primary:hover{opacity:.92}.arc-ghost:hover{background:var(--line)}}
.arc-actions{display:flex;gap:10px;width:100%}
.arc-actions .arc-ghost{flex:1}
.arc-actions .arc-primary{flex:1.4}

/* ---------- legend (the ready screen's three tiles) ---------- */
.arc-legend{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 6px}
.arc-legend>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:0 4px}
.arc-lg-el{height:44px;display:flex;align-items:center;justify-content:center}
.arc-lg-el img{display:block}
.arc-lg-t{font-size:13px;line-height:1.3;color:var(--muted)}
.lg-spit{display:block;width:10px;height:18px;border-radius:5px;background:#7CC4E8}
.lg-green{display:block;width:40px;height:16px;border-radius:6px;background:#6CC792}
.lg-centre{display:block;width:6px;height:28px;border-radius:3px;background:var(--ink)}
.lg-glyph{font:800 22px/1 var(--display);letter-spacing:.02em}
.lg-bad{color:var(--bad)}
.lg-gold{color:var(--arc-gold)}
.lg-word{font-size:18px;letter-spacing:.04em}
.lg-bristol{display:block;width:44px;color:#8A5829}
.lg-bristol svg{width:44px;height:auto;display:block}
.lg-sym{display:block;width:30px;height:30px}
.lg-sym svg{width:100%;height:100%;display:block}
.lg-purple{color:var(--arc-purple)}
.lg-sym.lg-gold{color:var(--arc-gold)}
.lg-roll{width:60px;height:18px;object-fit:fill}
.lg-zone{display:block;width:22px;height:40px;border-radius:8px;background:#6CC792}
.lg-out{display:block;width:40px;height:10px;border-radius:5px;background:#F0877D}
.arc-pepper{display:block;width:var(--s,38px);height:var(--s,38px)}
.arc-pepper svg{width:100%;height:100%;display:block}

/* Scout, avatars, hearts */
.arc-scout{display:inline-block;flex:none;width:var(--s,76px);height:var(--s,76px);line-height:0}
.arc-scout svg{width:100%;height:100%;display:block;overflow:visible}
.arc-av{display:block;flex:none;border-radius:50%;object-fit:cover}
.arc-av-blank{display:inline-block;background:var(--sunk)}
.arc-hearts{display:inline-block;font:20px/1 var(--body);letter-spacing:4px;color:var(--bad);white-space:nowrap;font-variant-emoji:text}
.arc-hearts i{font-style:normal;color:var(--line)}

/* the board */
.arc-board{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 14px}
.arc-brow{display:flex;align-items:center;gap:10px;min-height:36px}
.arc-brank{flex:none;width:20px;text-align:center;font:800 16px/1 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.arc-bname{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arc-brow.me .arc-bname{color:var(--accent)}
.arc-bscore{font:800 17px/1 var(--display);font-variant-numeric:tabular-nums}
.arc-board-k{text-align:center;margin:0 0 -8px}

/* ---------- the Arcade list ---------- */
.arc-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.arc-list-in{display:flex;flex-direction:column;gap:14px;padding:10px 16px calc(40px + env(safe-area-inset-bottom))}
.arc-intro{display:flex;flex-direction:column;gap:4px;padding:0 4px 2px}
.arc-list{display:flex;flex-direction:column;gap:10px}
.arc-row{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px;color:var(--ink);font:400 16px/1.3 var(--body);cursor:pointer;transition:transform .12s ease,border-color .15s}
.arc-row:active{transform:scale(.98)}
@media (hover:hover){.arc-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}
.arc-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.arc-row-t b{font:700 16px/1.25 var(--body);color:var(--ink)}
.arc-row-t span{font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arc-row-go{flex:none;width:28px;height:28px;color:var(--accent)}
.arc-row-go svg{width:100%;height:100%;display:block}
.arc-list-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.arc-list-foot:empty{display:none}
.arc-list.compact .arc-row{padding:12px;min-height:66px}

/* ---------- the Arcade card (Throne Mode) ---------- */
.arc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r,20px);padding:18px;display:flex;flex-direction:column;gap:12px;
  color:var(--ink);font:16px/1.5 var(--body);transition:opacity .2s}
.arc-card-head{display:flex;align-items:center;gap:12px}
.arc-card-head>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.arc-card-k{font:500 11px/1.2 var(--mono);letter-spacing:.15em;color:var(--accent)}
.arc-card-t{font:800 20px/1.2 var(--display);letter-spacing:-.01em;margin:0;color:var(--ink)}
.arc-link{flex:none;min-height:44px;padding:0 4px 0 10px;border:0;border-radius:12px;background:none;color:var(--accent);font:600 15px/1 var(--body);cursor:pointer;white-space:nowrap}
.arc-link:active{transform:none;opacity:.7}
.arc-card .arc-row img{max-width:none}

/* ---------- 1. Whack-a-Log ---------- */
.wk{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.wk-grid{display:grid;grid-template-columns:repeat(3,var(--cell,0px));grid-auto-rows:var(--cell,0px);gap:12px}
.wk-hole{position:relative;width:var(--cell,0px);height:var(--cell,0px);margin:0;padding:0;border:0;border-radius:18px;background:none;
  display:flex;align-items:flex-end;justify-content:center;color:inherit;cursor:pointer;touch-action:none}
.wk-hole:active{transform:none}
.wk-bowl{display:block;width:100%;height:60%}
.wk-pop{position:absolute;left:50%;bottom:calc(var(--cell,0px) * .1736);width:calc(var(--cell,0px) * .62);height:calc(var(--cell,0px) * .62);
  transform:translateX(-50%);pointer-events:none;animation:arcIn .11s ease-out;transition:opacity .11s ease-in}
.wk-pop.out{opacity:0}
.wk-pop>svg{width:100%;height:100%;display:block;overflow:visible}
.wk-pep{display:block;width:90%;height:90%;margin:5% auto 0}
.wk-pep svg{width:100%;height:100%;display:block}
.wk-flash{position:absolute;top:0;left:0;right:0;text-align:center;font:800 26px/1 var(--display);pointer-events:none;animation:wkFlash .5s ease-out forwards}
.wk-flash.good{color:var(--good)}
.wk-flash.bad{color:var(--bad)}
@keyframes wkFlash{0%{opacity:0}16%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}

/* ---------- 2. Poolaga ---------- */
.pg{position:relative;flex:1;min-height:0;margin:4px 12px calc(12px + env(safe-area-inset-bottom));border-radius:22px;overflow:hidden;background:#151A2E;
  touch-action:none;cursor:pointer}
.pg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Opening hint: a small pill just under the pigeon's line, well clear of the toilet formation (which starts at 55% height). */
.pg-hint{position:absolute;left:16px;right:16px;top:calc(var(--pg-line,70px) + 14px);margin:0 auto;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;
  padding:8px 14px;border-radius:14px;background:rgb(8 10 22 / .62);border:1px solid rgb(255 255 255 / .1);
  text-align:center;text-wrap:balance;font:600 14px/1.35 var(--body);color:#F3EFFA;pointer-events:none;animation:arcIn .3s ease-out}
.pg-hud{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;gap:12px;pointer-events:none}
.pg-wave{font:500 12px/1 var(--mono);letter-spacing:.06em;color:#A79FBF}
.pg .arc-hearts{color:#F0877D}
.pg .arc-hearts i{color:rgb(255 255 255 / .22)}

/* ---------- 3. Plunge! ---------- */
.pl{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 16px;overflow:hidden;touch-action:none;cursor:pointer}
.pl-bar{position:relative;flex:none;height:56px;border-radius:18px;background:var(--sunk);border:2px solid var(--line);overflow:hidden}
.pl-zone{position:absolute;top:0;bottom:0;left:0;background:var(--good);opacity:.85}
.pl-mid{position:absolute;top:0;bottom:0;left:0;width:4px;background:#fff;opacity:.6}
.pl-needle{position:absolute;top:-4px;bottom:-4px;left:0;width:10px;border-radius:5px;background:var(--ink);will-change:transform}
.pl-msg{flex:none;height:34px;display:flex;align-items:center;justify-content:center}
.pl-m{font:800 26px/1 var(--display);animation:arcIn .12s ease-out}
.pl-m.good{color:var(--good)}
.pl-m.bad{color:var(--bad)}
.pl>.arc-muted{text-align:center}

/* ---------- 4. Bristol Blitz ---------- */
.bz{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:16px;overflow:hidden}
.bz-top{display:flex;flex-direction:column;align-items:center;gap:10px}
.bz-card{width:200px;height:140px;border-radius:28px;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;color:#8A5829;transition:border-color .15s}
.bz-card.ok{border-color:var(--good)}
.bz-card.bad{border-color:var(--bad)}
.bz-ic,.bz-ic>span{display:block}
.bz-ic svg{width:140px;height:auto;display:block}
.bz-q{text-align:center}
.bz-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bz-pick{width:30%;min-height:60px;margin:0;padding:10px 4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;touch-action:manipulation;transition:background .12s}
.bz-pick b{font:800 24px/1 var(--display);color:var(--ink)}
.bz-pick small{max-width:100%;font:400 12px/1.2 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-pick:active{background:var(--accent-soft);transform:none}
@media (hover:hover){.bz-pick:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}

/* ---------- 5. Throne Memory ---------- */
.mm{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.mm-stat{text-align:center;font-variant-numeric:tabular-nums}
.mm-grid{display:grid;grid-template-columns:repeat(4,var(--cell,0px));grid-auto-rows:var(--cell,0px);gap:10px}
.mm-card{width:var(--cell,0px);height:var(--cell,0px);margin:0;padding:0;border:0;border-radius:18px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;touch-action:manipulation;transition:background .15s,opacity .2s,box-shadow .2s}
.mm-card:active{transform:none}
.mm-card.up{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.mm-card.done{box-shadow:inset 0 0 0 3px var(--good);opacity:.75}
.mm-card img{width:82%;height:82%;object-fit:contain;display:block}
.mm-q{font:800 calc(var(--cell,60px) * .36)/1 var(--display);color:var(--accent-ink)}

/* ---------- 6. TP Stack ---------- */
.sk{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:pointer}
.sk canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk-n{position:absolute;top:10px;left:0;right:0;margin:0;text-align:center;font:800 18px/1.2 var(--display);color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}

/* ---------- 7. Hold It! ---------- */
.hd{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px;overflow:hidden;touch-action:none;cursor:pointer}
.hd-row{flex:none;display:flex;flex-direction:row;align-items:flex-end;gap:22px;pointer-events:none}
.hd-gauge{position:relative;flex:none;width:90px;border-radius:24px;background:var(--sunk);border:2px solid var(--line);overflow:hidden}
.hd-zone{position:absolute;left:0;right:0;bottom:0;background:var(--good);opacity:.5;transition:opacity .15s}
.hd.in .hd-zone{opacity:.9}
.hd-mark{position:absolute;left:8px;right:8px;bottom:0;height:14px;border-radius:7px;background:var(--bad);transition:background .15s}
.hd.in .hd-mark{background:var(--ink)}
.hd-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.hd-comfort{width:90px;height:10px;border-radius:5px;background:var(--sunk);overflow:hidden}
.hd-comfort i{display:block;height:100%;width:100%;background:var(--gold);transition:background .2s}
.hd-comfort.low i{background:var(--bad)}
.hd-side small{font-size:12px}
.hd-tip{flex:none;text-align:center;min-height:1.45em}

/* ---------- Turdle ---------- */
.arc-turdle .arc-wrap{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.td-board{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;--tile:52px}
.td-row{display:flex;gap:6px}
.td-row.shake{animation:tdShake .32s ease-in-out}
@keyframes tdShake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.td-tile{width:var(--tile);height:var(--tile);border-radius:10px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);
  font:800 calc(var(--tile) * .5)/1 var(--display);color:var(--ink);text-transform:uppercase;transition:border-color .12s}
.td-tile.filled{border-color:var(--muted)}
.td-tile.m-g,.td-tile.m-y,.td-tile.m-x{border-color:transparent;color:#fff}
.td-tile.m-g,.td-tile.m-y{color:var(--td-ink,#fff)}
.td-tile{border-radius:var(--td-r,10px)}
.td-tile.m-g,.td-key.m-g{background:var(--td-g,#3FA36B)}
.td-tile.m-y,.td-key.m-y{background:var(--td-y,#D9A21E)}
.td-tile.m-x,.td-key.m-x{background:var(--arc-absent)}
.td-in{animation:tdIn .3s ease-out both}
@keyframes tdIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.td-msg{flex:none;min-height:28px;display:flex;align-items:center;justify-content:center;padding:0 16px;text-align:center;font:600 15px/1.3 var(--body);color:var(--bad)}
.td-foot{flex:none}
.arc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.td-kb{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:6px 12px calc(12px + env(safe-area-inset-bottom))}
.td-krow{display:flex;justify-content:center;gap:5px}
.td-key{flex:none;width:calc((100% - 45px) / 10);height:52px;margin:0;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);
  display:grid;place-items:center;font:700 17px/1 var(--body);cursor:pointer;touch-action:manipulation;transition:background .2s,opacity .1s}
.td-key.wide{width:calc((100% - 45px) / 10 * 1.5);font-size:12px;letter-spacing:.03em}
.td-key svg{width:20px;height:20px;display:block}
.td-key.m-g,.td-key.m-y,.td-key.m-x{border-color:transparent;color:#fff}
.td-key.m-g,.td-key.m-y{color:var(--td-ink,#fff)}
/* Dark ink on the yellow: white on #D9A21E is only ~2.3:1, this is ~7:1. */
.td-tile.m-y,.td-key.m-y{color:#2A1D02}
.td-key:active{opacity:.7;transform:none}
@media (hover:hover){.td-key:not([class*="m-"]):hover{background:var(--sunk)}}
.td-kb>.arc-muted{margin-top:2px}
.td-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 24px calc(24px + env(safe-area-inset-bottom))}
.td-done .arc-title{font-size:24px}

/* ---------- short screens (landscape phones, small windows) ---------- */
@media (max-height:640px){
  .arc-num{font-size:30px}
  .arc-count b{font-size:88px}
  .arc-pane{padding-top:12px}
  .arc-col{gap:12px}
  .arc-title{font-size:26px}
  .pl{gap:16px}
  .pl-scout.arc-scout{width:80px;height:80px}
  .bz{gap:12px;padding-block:8px}
  .bz-card{width:168px;height:112px}
  .bz-ic svg{width:116px}
  .bz-pick{min-height:52px;padding-block:6px}
  .td-key{height:46px}
}
.arc-join{width:100%;text-decoration:none}