/* tail.css: Tail Thief (tail-app.js; the board, the card and the how-to-play scenes are drawn by tail-draw.js). Built on
   the site's tokens (site.css), the arcade entry screen (arcade.css) and the pieces the party games, Same Pond and Duck
   Trap already share (party.css, pond.css: .zp-second, .zp-inp, .sp-page, dialogs and toasts), so it reads as the same
   arcade in both tones. Containers stay quiet (charcoal or off-white, thin neutral borders); a selection gets a solid
   outline. Gold is only for the golden apple and the winner's coin. Every rule is scoped to Tail Thief. */

/* ---------- entry: the setup on the left, how to play on the right ---------- */
#tailSetup .zp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#tailSetup .zp-acts .start{margin-top:0}
#tailSetup .zp-acts .zp-second{min-height:58px;border-radius:16px;padding:0 30px;font-size:17px}
@media (max-width:900px){#tailSetup .zp-acts{flex-direction:column}#tailSetup .zp-acts>*{width:100%}}
@media (min-width:901px){#tailSetup.entry.show{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}#tailSetup .e-demo{align-self:start;margin-top:4px}}
@media (max-width:900px){#tailSetup.entry.show{grid-template-areas:"head" "ctl" "demo"}}
#tailSetup .e-small{margin:8px 0 0}

/* ---------- how to play ---------- */
.tl-intro{display:flex;flex-direction:column;gap:12px}
.tl-isteps{display:flex;flex-wrap:wrap;gap:6px}
.tl-isteps button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px 0 6px;border:1px solid var(--g2);border-radius:999px;background:transparent;color:var(--g6);font:600 14px var(--font-sans);cursor:pointer}
.tl-isteps button span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surf2);font:700 12px var(--font-mono);color:var(--fg)}
.tl-isteps button:hover{color:var(--fg);border-color:var(--g3)}
.tl-isteps button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tl-isteps button.on span{background:var(--bg);color:var(--fg)}
.tl-isteps button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tl-icv{position:relative}
.tl-icv canvas{display:block;width:100%;aspect-ratio:7/4;height:auto;touch-action:none}
.tl-icv canvas:focus{outline:none}
/* the result line sits under the stage (never over the snakes) and always keeps its room, so nothing jumps */
.tl-ires{display:block;width:fit-content;max-width:100%;min-height:36px;margin:8px auto 0;padding:7px 14px;border-radius:12px;background:transparent;color:var(--fg);border:1px solid var(--g3);font:600 14.5px/1.35 var(--font-sans);text-align:center}
.tl-ires[hidden]{display:block;visibility:hidden}
.tl-ires.miss{border-color:var(--fg)}
.tl-iacts .start.sm{min-height:40px;margin:0;padding:0 16px;font-size:14px;border-radius:12px}
.tl-ikeys{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:500 14px var(--font-sans);color:var(--g6)}
.tl-ikeys[hidden]{display:none}
.tl-lessondlg .gdialog-card{max-width:760px}
.tl-icap{display:flex;flex-direction:column;gap:3px;min-height:72px}
.tl-icap b{font:700 18px/1.25 var(--font-sans);color:var(--fg)}
.tl-icap p{margin:0;font:500 15px/1.45 var(--font-sans);color:var(--g6)}
.tl-intro.compact .tl-icap{min-height:64px}
.tl-intro.compact .tl-icap b{font-size:16px}
.tl-intro.compact .tl-icap p{font-size:14px}
.tl-iacts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tl-iacts [hidden]{display:none}

/* ---------- a snake's look ---------- */
.tl-sw{display:block;flex:none}
.tl-look{display:flex;flex-direction:column;gap:12px}
.tl-lookrow{display:flex;flex-direction:column;gap:6px}
.tl-lookname,.tl-card .glabel,.tl-pname .glabel{font:500 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g5)}
.tl-chips{display:flex;flex-wrap:wrap;gap:7px}
.tl-chip{position:relative;width:32px;height:32px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.tl-chips .tl-chip.on{background:var(--c);border-color:var(--fg);box-shadow:inset 0 0 0 3px var(--bg)}
.tl-chip.taken{cursor:not-allowed}
.tl-chip.taken::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2.5px;margin-left:-1.25px;border-radius:2px;background:var(--fg);transform:rotate(45deg);box-shadow:0 0 0 1.5px var(--bg)}
.tl-chips{align-items:center}
.tl-more{min-height:32px;padding:0 12px;border:1px solid var(--g3);border-radius:999px;background:transparent;color:var(--g6);font:600 13px var(--font-sans);cursor:pointer}
.tl-more:hover{color:var(--fg);border-color:var(--fg)}
.tl-hint{margin:0;font:500 12.5px var(--font-sans);color:var(--g5)}
.tl-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px}
.tl-opt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 10px 6px;border:1.5px solid var(--g2);border-radius:12px;background:var(--bg);color:var(--g6);font:600 13px var(--font-sans);cursor:pointer}
.tl-opt:hover{border-color:var(--g4);color:var(--fg)}
#tailGame .tl-opts .tl-opt.on,.tl-opts .tl-opt.on{background:var(--bg);border-color:var(--fg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.tl-opt .tl-sw{max-width:100%}
.tl-opt span{white-space:nowrap;overflow-wrap:normal}
.tl-opt:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tl-chip:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tl-look .seg,#tailGame .seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surf2);padding:4px;border-radius:14px;align-self:flex-start}
.tl-look .seg button,#tailGame .seg button{min-height:40px;padding:0 13px;border:none;border-radius:10px;background:transparent;color:var(--g6);font:500 14.5px var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tl-look .seg button:hover,#tailGame .seg button:hover{color:var(--fg)}
.tl-look .seg button.on,#tailGame .seg button.on{background:var(--fg);color:var(--bg)}
.tl-look .seg button:focus-visible,#tailGame .seg button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ---------- the room ---------- */
#tailGame{display:none;overflow-wrap:anywhere}
#tailGame.show{display:block}
#tailGame .sp-center .tl-sw{width:180px;height:auto}
.tl-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--r-panel,18px);background:var(--surf2);border:1px solid var(--g2)}
.tl-card h3,.tl-sub{margin:0;font:700 17px var(--font-sans);color:var(--fg);display:flex;align-items:baseline;gap:10px}
.tl-card h3 .e-small{font-weight:500;color:var(--g5)}
.tl-card .e-small{margin:0;color:var(--g6);font:500 13.5px/1.45 var(--font-sans)}

/* the lobby: two balanced columns on a laptop, one column on a phone */
.tl-lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:22px;align-items:start;max-width:1240px;margin:0 auto;padding:4px 0 32px}
.tl-lcol,.tl-rcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.tl-lcol>div:empty{display:none}
.tl-rcol{position:sticky;top:calc(var(--header-h,64px) + 12px)}
.tl-lhead h2{margin:4px 0 0;font:700 clamp(26px,3.2vw,36px)/1.1 var(--font-sans);letter-spacing:-.02em}
@media (max-width:980px){.tl-lobby{grid-template-columns:1fr}.tl-rcol{position:static}}
.tl-invite .sp-bigcode{margin:0}
.tl-invite .sp-acts{margin:0}
.tl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:640px){.tl-pair{grid-template-columns:1fr}}
.tl-pcard{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--g2);min-width:0}
.tl-pcard.open{border-color:var(--g4)}
.tl-pprev{display:flex;align-items:center;justify-content:center;min-height:76px}
.tl-pprev .tl-sw{max-width:100%;height:auto}
.tl-pprev.big{min-height:120px;margin:4px 0 8px;border-radius:14px;background:var(--surf2)}
.tl-saverow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl-saverow .start.sm{margin-top:0}
.tl-pmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-pmeta .tl-pname{flex:1 1 140px;min-width:0}
.tl-cust{margin-left:auto}
.tl-pkeys{display:flex;align-items:center;gap:8px;font:600 13px var(--font-sans);color:var(--g6)}
.tl-pkeys b{font-weight:600}
.tl-rosterbox{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tl-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tl-learn{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r-panel,18px);border:1px solid var(--g2)}
.tl-learn>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-learn b{font:700 15.5px var(--font-sans)}
.tl-learn span{font:500 13.5px var(--font-sans);color:var(--g6)}
.tl-startrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tl-startrow .start{margin:0;min-width:220px}
.tl-startrow .e-small{flex-basis:100%;margin:0}
@media (max-width:640px){.tl-startrow .start{flex:1 1 100%}}
.tl-keys{display:inline-grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(2,24px);gap:3px}
.tl-keys kbd{display:grid;place-items:center;border:1px solid var(--g3);border-bottom-width:2px;border-radius:6px;background:var(--bg);color:var(--fg);font:600 12px var(--font-mono)}
.tl-keys kbd.up{grid-column:2;grid-row:1}
.tl-keys kbd:nth-child(2){grid-column:1;grid-row:2}.tl-keys kbd:nth-child(3){grid-column:2;grid-row:2}.tl-keys kbd:nth-child(4){grid-column:3;grid-row:2}
.tl-roster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.tl-roster li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border-radius:10px;background:var(--bg)}
.tl-roster b{font:600 15px var(--font-sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-roster small{margin-left:auto;font:500 11.5px var(--font-mono);color:var(--g5)}
.tl-roster li.off{opacity:.55}
.tl-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.tl-more-set{grid-column:1/-1;border-top:1px solid var(--g2);padding-top:12px}
.tl-more-set summary{cursor:pointer;font:600 14.5px var(--font-sans);color:var(--fg);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-more-set[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.tl-more-set[open] summary{grid-column:1/-1}
@media (max-width:640px){.tl-more-set[open]{grid-template-columns:1fr}}
.tl-set h3{grid-column:1/-1}
.tl-set .grp{margin:0;display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){.tl-set{grid-template-columns:1fr}}
.tl-dims{display:flex;align-items:center;gap:8px;margin:4px 0 0;flex-wrap:wrap}
.tl-dims input{width:84px}
.tl-timerow{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--g2);border-radius:12px;background:var(--bg)}
.tl-timeval{font:700 15px var(--font-mono);color:var(--fg)}
.tl-timerow input[type=range]{width:100%;accent-color:var(--fg)}
.tl-timerow.off input[type=range]{opacity:.35}
.tl-nolimit{display:flex;align-items:center;gap:8px;font:500 14px var(--font-sans);color:var(--g6)}
.tl-nolimit input{width:18px;height:18px;accent-color:var(--fg)}
.tl-arena{gap:10px}
.tl-arenahead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tl-prevbox{border-radius:14px;overflow:hidden;background:var(--bg);border:1px solid var(--g2)}
.tl-prevcv{display:block;width:100%;aspect-ratio:1.5;height:auto}
.tl-arenaline{margin:2px 0 0;font:600 16.5px/1.35 var(--font-sans);color:var(--fg)}
.tl-crowd b{font-weight:700}
.tl-ctls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.tl-ctls>div{display:flex;align-items:center;gap:10px;font:500 14px var(--font-sans);color:var(--g6)}
.tl-swipe{font:500 13.5px var(--font-sans);color:var(--g6)}

/* ---------- the round ---------- */
.tl-game{display:flex;flex-direction:column;gap:10px;margin:0 auto;padding:4px 0 32px}
.tl-top{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:nowrap}
.tl-top .grow{flex:1}
.tl-clock{font:700 20px var(--font-mono);color:var(--fg);min-width:58px}
.tl-me{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;border-radius:999px;background:var(--surf2);border:1px solid var(--g2);white-space:nowrap}
.tl-me b{font:700 17px var(--font-mono)}
.tl-me small{font:500 12.5px var(--font-sans);color:var(--g6)}
.tl-tag{padding:2px 8px;border-radius:999px;background:var(--fg);color:var(--bg)!important;font:600 11.5px var(--font-sans)!important}
.tl-place{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--g3);background:transparent;color:var(--fg);font:700 15px var(--font-sans);cursor:pointer;white-space:nowrap}
.tl-place small{font-weight:500;color:var(--g6)}
.tl-menu{display:inline-flex;align-items:center;gap:6px}
.tl-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:8;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:230px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--g3)}
.tl-rankpop{right:auto;left:0;min-width:260px;max-height:60vh;overflow:auto}
/* two snakes: one compact row of names and lengths, "Mansy · 11   You · 14"; yours is underlined */
.tl-duo{display:inline-flex;align-items:center;gap:16px;min-width:0}
.tl-duochip{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.tl-duochip b{min-width:0;max-width:9em;font:600 15px var(--font-sans);overflow:hidden;text-overflow:ellipsis}
.tl-duochip.me b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tl-duochip .tl-len::before{content:"·";margin-right:6px;color:var(--g5);font-weight:500}
.tl-duochip .tl-len{font:700 15px var(--font-mono)}
.tl-duochip.out{opacity:.5}
.tl-turn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1.5px solid var(--g3);border-radius:12px;background:transparent;color:var(--fg);font:600 13.5px var(--font-sans);cursor:pointer}
.tl-turn[aria-pressed="true"]{border-color:var(--fg)}
.tl-turn svg{width:18px;height:18px}
.tl-main{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.tl-stage{position:relative;flex:none;touch-action:none;max-width:100%}
.tl-stage .tl-cv{display:block;width:100%;height:60vh}
.tl-say{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);max-width:min(92%,520px);padding:7px 14px;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid var(--g3);font:600 14px/1.3 var(--font-sans);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.tl-say.on{opacity:1;transform:translate(-50%,0)}
.tl-side{flex:0 0 250px;display:flex;flex-direction:column;gap:6px}
.tl-side[hidden]{display:none}
.tl-board{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:3px;border-radius:14px;background:var(--surf2);border:1px solid var(--g2)}
.tl-board li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:9px;min-width:0}
.tl-board li.me{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.tl-board li.out{opacity:.5}
.tl-board b{flex:1;min-width:0;font:600 14px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-board .tl-rk{width:18px;font-size:12.5px}
.tl-len{font:700 14px var(--font-mono)}
.tl-side .e-small,.tl-rankpop .e-small{margin:4px 6px 0;color:var(--g5)}
.tl-rk{width:22px;flex:none;text-align:center;font:700 15px var(--font-mono);color:var(--g6)}
.tl-main{flex-wrap:wrap}

/* a round on a phone takes the whole screen: the bar and the board; nothing scrolls */
html.tl-lock,html.tl-lock body{overflow:hidden;overscroll-behavior:none}
html.tl-lock .wrap{z-index:60}
.tl-game.tl-full{position:fixed;inset:0;z-index:70;max-width:none!important;margin:0;gap:6px;background:var(--bg);
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.tl-full .tl-top{min-height:40px;gap:8px}
.tl-full .tl-clock{font-size:17px;min-width:48px}
.tl-full .tl-menu span{display:none}
.tl-full .tl-me{padding:3px 10px}
.tl-full .tl-duo{gap:12px}
.tl-full .tl-duochip b{font-size:14px;max-width:6.5em}
.tl-full .tl-duochip .tl-len{font-size:14px}
.tl-full .tl-turn{padding:0;width:40px;min-height:36px;justify-content:center}
.tl-full .tl-turn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tl-full .tl-menu{min-height:36px;padding:0 10px}
.tl-full .tl-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
.tl-full .tl-stage{flex:1 1 auto;min-height:0;width:auto!important;height:auto!important}
.tl-full .tl-stage .tl-cv{position:absolute;inset:0;width:100%!important;height:100%!important}
.tl-full .tl-say{bottom:6px;font-size:13px}
/* landscape phone: the board in the middle */
.tl-full.tl-land .tl-main{flex-direction:row;align-items:center}
.tl-full.tl-land .tl-stage{align-self:stretch}
.tl-full.tl-land .tl-top{min-height:34px}

/* the result takes the board's place */
.tl-over{display:flex;justify-content:center}
.tl-over[hidden]{display:none}
.tl-done .tl-main,.tl-done .tl-duo{display:none}
.tl-done.tl-full{overflow:auto}
.tl-result{width:min(620px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;background:var(--surf2);border:1px solid var(--g2)}
.tl-result h2.tl-winner{margin:0;font:700 clamp(32px,6vw,48px)/1.05 var(--font-sans);letter-spacing:-.025em}
.tl-result p{margin:0}
.tl-rule{font:500 16px/1.4 var(--font-sans);color:var(--g6)}
.tl-heroes{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 4px}
.tl-hero{flex:1 1 260px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 14px;border-radius:16px;background:var(--bg);border:1px solid var(--g2)}
.tl-hero .tl-sw{max-width:100%;height:auto}
.tl-herostat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%}
.tl-herostat b{font:700 18px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-bigscore{display:inline-flex;align-items:baseline;gap:8px}
.tl-bigscore small{font:600 12px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--g6)}
.tl-bigscore strong{font:800 40px/1 var(--font-mono)}
.tl-heroes.many .tl-bigscore strong{font-size:30px}
.tl-details{border-top:1px solid var(--g2);padding-top:10px}
.tl-details summary{cursor:pointer;font:600 14.5px var(--font-sans);color:var(--fg)}
.tl-standings{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tl-standings li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--bg)}
.tl-standings li.me{box-shadow:inset 0 0 0 2px var(--fg)}
.tl-standings .tl-sw{width:52px;height:auto}
.tl-who{display:flex;flex-direction:column;min-width:0;flex:1}
.tl-who b{font:600 15.5px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-who small{font:500 12.5px var(--font-sans);color:var(--g6)}
.tl-score{display:inline-flex;align-items:baseline;gap:6px;font:700 18px var(--font-mono)}
.tl-score small{font:600 11px var(--font-sans);color:var(--g6);text-transform:uppercase;letter-spacing:.05em}
.tl-coin{width:18px;height:18px}
.tl-resacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px}
.tl-resacts .start{margin-top:0}
.tl-resacts .zp-second{min-height:58px;border-radius:16px;padding:0 24px}
.tl-resacts .sp-wait{flex-basis:100%}
@media (prefers-reduced-motion:reduce){.tl-say{transition:none}}

/* ---------- the board: presets, the editor, the checks ---------- */
.tl-set>.grp:first-child{grid-column:1/-1}
.tl-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:760px){.tl-presets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tl-preset{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px 6px 8px;border:1.5px solid var(--g2);border-radius:12px;background:transparent;color:var(--g6);font:500 13px var(--font-sans);cursor:pointer;text-align:center}
.tl-preset:hover:not(:disabled){color:var(--fg);border-color:var(--g4)}
.tl-preset.on{border-color:var(--fg);color:var(--fg);background:var(--surf2)}
.tl-preset:disabled{cursor:default}
.tl-preset:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tl-preset span{line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.tl-mini{display:block;width:100%;aspect-ratio:3/2;height:auto}
.tl-boardrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.tl-boardrow p{margin:0}
.tl-boardname{margin:0 0 6px}
.tl-scoring{grid-column:1/-1;margin:0;font:400 14px/1.45 var(--font-sans);color:var(--g6)}
.tl-scoring b{color:var(--fg);font-weight:650}
.tl-fields{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
.tl-fields>label{font:500 13.5px var(--font-sans);color:var(--g6)}
.tl-nf{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tl-nf .zp-inp{width:84px;min-height:38px;padding:0 10px}
.tl-nf small{color:var(--g6)}
.tl-check{display:inline-flex;align-items:center;gap:6px;font:500 13.5px var(--font-sans);color:var(--fg);cursor:pointer}
.tl-check input{width:18px;height:18px;accent-color:var(--fg)}
.tl-issues-l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tl-issues-l li,.tl-issues li{font:400 13.5px/1.4 var(--font-sans);color:var(--fg);padding:8px 10px;border-radius:10px;border:1px solid var(--g2);background:var(--surf2)}
.tl-issues-l li.err,.tl-issues li.err{border-color:var(--fg)}
.tl-issues-l b,.tl-issues b{font-weight:700}
.startrow .start:disabled,.tl-startrow .start:disabled{opacity:.45;cursor:not-allowed}

#ttDlg.tl-eddlg .gdialog-card{max-width:1080px;width:min(1080px,calc(100vw - 24px))}
.tl-more-set .grp{margin-bottom:4px}
.tl-edfoot{display:flex;gap:10px;justify-content:flex-end;width:100%}
.tl-ed{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"bar bar" "hint hint" "board side";gap:10px 18px}
.tl-edbar{grid-area:bar;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.tl-edhint{grid-area:hint;margin:0;min-height:1.4em}
.tl-edwrap{grid-area:board;position:relative;min-width:0}
.tl-edside{grid-area:side;display:flex;flex-direction:column;gap:14px;min-width:0}
.tl-ed .seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surf2);padding:4px;border-radius:14px}
.tl-ed .seg button{min-height:42px;padding:0 12px;border:none;border-radius:10px;background:transparent;color:var(--g6);font:500 14px var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tl-ed .seg button.on{background:var(--fg);color:var(--bg)}
.tl-ed .seg button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.tl-edacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tl-edacts .zp-second{display:inline-flex;align-items:center;gap:5px}
.tl-edacts button:disabled{opacity:.4}
.tl-edscroll{overflow:auto;max-height:min(62vh,640px);border-radius:8px;overscroll-behavior:contain}
.tl-edscroll:not(.wide){display:flex;justify-content:center}
.tl-edcv{display:block;touch-action:none;cursor:crosshair}
.tl-edscroll.pan .tl-edcv{touch-action:pan-x pan-y;cursor:pointer}
.tl-edzoom{position:absolute;right:8px;bottom:8px;display:flex;gap:6px}
.tl-edzoom .zp-second{min-width:40px;display:inline-flex;justify-content:center;background:var(--bg)}
.tl-ed .grp{display:flex;flex-direction:column;gap:6px;margin:0}
.tl-ed .glabel{font:600 13.5px var(--font-sans);color:var(--fg)}
.tl-ed .tl-dims{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl-ed .tl-dims .zp-inp{width:76px;min-height:38px;padding:0 10px}
.tl-timing p{margin:0 0 6px}
.tl-tfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tl-tfield{display:flex;flex-direction:column;gap:3px;font:500 12.5px var(--font-sans);color:var(--g6)}
.tl-tfield .zp-inp{width:100%;min-height:38px;padding:0 8px}
.tl-tfield small{display:none}
.tl-tlines{display:flex;flex-direction:column;gap:5px}
.tl-tl{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font:500 12px var(--font-sans);color:var(--g6)}
.tl-tl.sel{color:var(--fg);font-weight:700}
.tl-tline{position:relative;height:10px;border-radius:5px;background:var(--surf2);overflow:hidden;border:1px solid var(--g2)}
.tl-tline i{position:absolute;top:0;bottom:0}
.tl-tline i.closed{background:var(--g6)}
.tl-tline i.warn{background:var(--g4)}
.tl-tlaxis{display:flex;justify-content:space-between;margin-left:60px;font:500 11px var(--font-sans);color:var(--g6)}
.tl-scrub label{display:flex;flex-direction:column;gap:4px;font:500 13px var(--font-sans);color:var(--g6)}
.tl-scrub input{width:100%;accent-color:var(--fg)}
.tl-issues ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tl-issues li{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tl-ok{margin:0}
@media (max-width:820px){
  .tl-ed{grid-template-columns:1fr;grid-template-areas:"bar" "hint" "board" "side"}
  #ttDlg.tl-eddlg .gdialog-card{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .tl-edscroll{max-height:56vh}
  .tl-ed .seg button span{font-size:13px}
}
.tl-saverow .start.sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:12px}

/* the board's view on a phone (during the countdown, and in the menu) */
.tl-viewbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;flex-wrap:nowrap;width:max-content;max-width:calc(100% - 12px);padding:5px 6px;border-radius:14px;background:var(--bg);border:1px solid var(--g2);z-index:3}
.tl-viewbar .seg{flex-wrap:nowrap;padding:3px}
.tl-viewbar[hidden]{display:none}
.tl-viewlab{font:600 12px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--g6)}
.tl-viewbar .seg button,.tl-popview .seg button{min-height:36px;padding:0 10px;font-size:13.5px;white-space:nowrap}
.tl-viewbar .zp-second{min-height:38px;padding:0 10px;white-space:nowrap}
@media (max-width:400px){.tl-viewbar .tl-viewlab{display:none}}
.tl-viewbar .zp-second,.tl-popview .zp-second{display:inline-flex;align-items:center;gap:6px}
.tl-popview{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--g2)}
.tl-full .tl-duochip b{font-size:15px}
.tl-full .tl-duochip .tl-len{font-size:16px;font-weight:700}
.tl-full .tl-clock{font-size:18px}

.tl-done .tl-top{display:none}
/* solo: mode, opponents and difficulty; the move to try; the level in the bar */
.tl-solo .grp{display:flex;flex-direction:column;gap:8px}
.tl-botrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-botrow .zp-inp{width:72px;text-align:center}
.tl-botrow .zp-second{min-width:40px}
.tl-try .tl-intro{margin:0}
.tl-lv{padding:2px 9px;border-radius:999px;border:1px solid var(--g3);font:600 12.5px var(--font-sans);white-space:nowrap}