/* ui-kit.css — dialogs, game picker, island + signature buttons, copy field, accordion,
   countdown. Behaviour: static/js/ui-kit.js. Markup helpers: helpers/uiKit.js (fk.dialog,
   fk.gamePicker, fk.copy, fk.countdown, fk.button({ variant: 'island' })).
   Visual spec: docs/design/form-kit-designs.html. Tokens: --fk-* from forms.css + style.css. */

/* ══ Dialogs (native <dialog>) ══ */
dialog.fk-dlg{margin:auto;padding:0;border:0;background:none;color:inherit;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:visible}
dialog.fk-dlg::backdrop{background:rgba(2,6,23,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog.fk-dlg[open]{animation:fk-dlg-in .45s var(--fk-ease)}
dialog.fk-dlg[open]::backdrop{animation:fk-fade .3s var(--fk-out)}
dialog.fk-dlg.is-closing{animation:fk-dlg-out .2s var(--fk-out) forwards}
dialog.fk-dlg.is-closing::backdrop{animation:fk-fade .2s var(--fk-out) reverse forwards}
.fk-dlg-panel{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;text-align:left;
  background:var(--bg-card);color:var(--text-primary);border-radius:1.25rem;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),inset 0 0 0 1px var(--border-default)}
dialog.fk-dlg.k-wide .fk-dlg-panel{width:min(640px,calc(100vw - 24px))}
.fk-dlg-h{display:flex;gap:.9rem;align-items:flex-start;padding:1.25rem 1.25rem 0}
.fk-dlg-ico{width:2.6rem;height:2.6rem;flex:none;border-radius:.75rem;display:grid;place-items:center;font-size:1.05rem;background:rgba(var(--brand-primary-rgb),.14);color:var(--fk-accent-tx)}
.fk-dlg-ico.t-ok{background:rgba(var(--st-success-rgb),.15);color:var(--st-success)}
.fk-dlg-ico.t-err{background:rgba(var(--st-error-rgb),.15);color:var(--fk-err-tx)}
.fk-dlg-ico.t-warn{background:rgba(var(--st-warning-rgb),.15);color:var(--st-warning)}
.fk-dlg-ico.t-sec{background:rgba(var(--brand-secondary-rgb),.18);color:var(--brand-secondary-light)}
.fk-dlg-h h2{margin:0;font:700 1.05rem/1.3 var(--fk-display);color:var(--text-primary)}
.fk-dlg-h p{margin:.25rem 0 0;font-size:.82rem;line-height:1.5;color:var(--text-secondary)}
.fk-dlg-x{margin-left:auto;flex:none;width:2rem;height:2rem;border-radius:.6rem;border:0;background:none;color:var(--text-muted);cursor:pointer}
.fk-dlg-x:hover{background:var(--border-default);color:var(--text-primary)}
.fk-dlg-x:focus-visible{outline:2px solid var(--brand-primary)}
.fk-dlg-b{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.9rem;overflow:auto;overscroll-behavior:contain;font-size:.875rem;color:var(--text-secondary)}
.fk-dlg-f{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.85rem 1.25rem;border-top:1px solid var(--border-subtle);background:var(--bg-secondary)}
.fk-dlg-note{margin-right:auto;font-size:.75rem;color:var(--text-muted);display:flex;gap:.4rem;align-items:center}
/* sheet: bottom on phones (and when kind=sheet) */
dialog.fk-dlg.k-sheet{margin:auto 0 0;width:100%;max-width:100%}
dialog.fk-dlg.k-sheet[open]{animation-name:fk-dlg-up}
dialog.fk-dlg.k-sheet .fk-dlg-panel{width:100%;max-width:640px;margin:0 auto;border-radius:1.4rem 1.4rem 0 0}
dialog.fk-dlg.k-sheet .fk-dlg-panel::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--fk-line-strong);margin:.6rem auto 0;flex:none}
@media (max-width:640px){
  dialog.fk-dlg:not(.k-drawer):not(.k-corner){margin:auto 0 0;width:100%;max-width:100%}
  dialog.fk-dlg:not(.k-drawer):not(.k-corner)[open]{animation-name:fk-dlg-up}
  dialog.fk-dlg:not(.k-drawer):not(.k-corner) .fk-dlg-panel{width:100%;border-radius:1.4rem 1.4rem 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .fk-dlg-f .esports-btn{flex:1;justify-content:center}
}
dialog.fk-dlg.k-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh}
dialog.fk-dlg.k-drawer[open]{animation-name:fk-dlg-left}
dialog.fk-dlg.k-drawer .fk-dlg-panel{height:100dvh;max-height:100dvh;width:min(400px,92vw);border-radius:1.4rem 0 0 1.4rem}
dialog.fk-dlg.k-drawer .fk-dlg-b{flex:1}
dialog.fk-dlg.k-top{margin-top:12vh}
dialog.fk-dlg.k-corner{margin:auto auto 16px 16px;position:fixed}
dialog.fk-dlg.k-corner::backdrop{background:transparent;backdrop-filter:none}
/* celebration */
.fk-dlg-cele{position:relative;align-items:center;text-align:center;padding:1.75rem 1.5rem 1.4rem;gap:.6rem;background:radial-gradient(320px 200px at 50% 0%,rgba(var(--brand-primary-rgb),.3),transparent 70%),var(--bg-card)}
.fk-dlg-cele .fk-dlg-b{padding:0;align-items:center}
.fk-dlg-cele h2{font:700 1.35rem var(--fk-display);text-transform:uppercase;letter-spacing:.02em;margin:.4rem 0 0}
.fk-dlg-cele p{margin:0;max-width:34ch}
.fk-dlg-medal{width:4.75rem;height:4.75rem;border-radius:1.5rem;display:grid;place-items:center;font-size:2rem;color:#fff;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));box-shadow:0 16px 36px -10px rgba(var(--brand-primary-rgb),.8);transform:rotate(-6deg);animation:fk-pop .7s var(--fk-ease) both}
.fk-dlg-cele .fk-dlg-f{background:none;border:0;justify-content:center;padding:.5rem 0 0}
.fk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fk-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fk-fall 2.8s linear infinite}
/* blocking */
.fk-dlg-block{align-items:center;text-align:center;padding:1.75rem 1.5rem 1.4rem;gap:.6rem}
.fk-dlg-block .fk-dlg-b{padding:0;align-items:center}
.fk-dlg-block .fk-dlg-f{background:none;border:0;justify-content:center;padding:.4rem 0 0}
@keyframes fk-dlg-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes fk-dlg-up{from{transform:translateY(100%)}}
@keyframes fk-dlg-left{from{transform:translateX(100%)}}
@keyframes fk-dlg-out{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes fk-fade{from{opacity:0}}
@keyframes fk-pop{from{transform:scale(.4) rotate(-30deg);opacity:0}}
@keyframes fk-fall{to{transform:translateY(460px) rotate(540deg)}}
html.fk-dlg-lock{overflow:hidden}

/* ══ Game picker ══ */
.fk-gp{position:relative;min-width:0}
.fk-gp .fk-gp-native{width:100%}
.fk-gp.is-enhanced .fk-gp-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.fk-gp-logo{width:1.65rem;height:1.65rem;border-radius:.4rem;flex:none;object-fit:cover;background:var(--bg-elevated);box-shadow:0 0 0 1px rgba(255,255,255,.06);display:grid;place-items:center;color:#fff;font-size:.7rem}
.fk-gp-logo.sm{width:1.25rem;height:1.25rem;border-radius:.3rem}
.fk-gp-logo.lg{width:2.75rem;height:2.75rem;border-radius:.65rem}
.fk-gp-trigger{display:flex;align-items:center;gap:.65rem;min-height:3rem;height:auto;padding:.3rem .75rem .3rem .5rem;text-align:left;cursor:pointer;width:100%}
.fk-gp.is-sm .fk-gp-trigger{min-height:2.15rem;padding:.2rem .65rem .2rem .4rem;font-size:.82rem}
.fk-gp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fk-gp-txt b{font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-gp-txt small{font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-gp-caret{margin-left:auto;color:var(--text-muted);font-size:.7rem;transition:transform .25s var(--fk-out)}
.fk-gp-trigger[aria-expanded="true"]{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.22)}
.fk-gp-trigger[aria-expanded="true"] .fk-gp-caret{transform:rotate(180deg)}
.fk-gp-ph{width:1.65rem;height:1.65rem;border-radius:.4rem;display:grid;place-items:center;border:1.5px dashed var(--fk-line-strong);color:var(--text-muted);font-size:.7rem;flex:none}
.fk-gp-pop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);min-width:16rem;background:var(--bg-card);border-radius:.9rem;box-shadow:var(--fk-shadow),inset 0 0 0 1px var(--border-default);overflow:hidden;display:flex;flex-direction:column;max-height:24rem}
.fk-gp-pop[hidden]{display:none}
.fk-gp-search{position:relative;padding:.5rem;border-bottom:1px solid var(--border-subtle)}
.fk-gp-search i{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.75rem}
.fk-gp-search input{height:2.15rem;padding-left:2rem;font-size:.82rem}
.fk-gp-list{list-style:none;margin:0;padding:.3rem;overflow-y:auto;overscroll-behavior:contain}
.fk-gp-grp{display:flex;justify-content:space-between;padding:.6rem .6rem .3rem;font:700 .62rem var(--fk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.fk-gp-opt{position:relative;display:flex;align-items:center;gap:.7rem;padding:.45rem .6rem .45rem .75rem;border-radius:.5rem;cursor:pointer;color:var(--text-secondary)}
.fk-gp-opt::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;border-radius:2px;background:var(--gc,var(--brand-primary));opacity:0;transition:opacity .15s}
.fk-gp-nm{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.fk-gp-nm b{font-size:.85rem;font-weight:600;color:var(--text-primary)}
.fk-gp-nm small{font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-gp-opt mark{background:rgba(var(--brand-primary-rgb),.22);color:inherit;border-radius:2px;padding:0 1px}
.fk-gp-roster{font:600 .66rem var(--fk-mono);color:var(--text-secondary);background:var(--border-subtle);border:1px solid var(--border-default);border-radius:3px;padding:1px 6px;white-space:nowrap}
.fk-gp-appr{font:700 .6rem var(--fk-display);letter-spacing:.08em;text-transform:uppercase;color:var(--st-warning);border:1px solid rgba(var(--st-warning-rgb),.45);border-radius:3px;padding:1px 5px;white-space:nowrap}
.fk-gp-tick{width:1rem;text-align:center;color:var(--fk-accent-tx);font-size:.75rem;visibility:hidden}
.fk-gp-box{width:1rem;height:1rem;flex:none;border:1.5px solid var(--fk-line-strong);border-radius:.25rem;display:grid;place-items:center;font-size:.55rem;color:transparent}
.fk-gp-opt.is-active{background:var(--border-subtle);color:var(--text-primary)}
.fk-gp-opt.is-active::before,.fk-gp-opt[aria-selected="true"]::before{opacity:1}
.fk-gp-opt[aria-selected="true"]{background:color-mix(in srgb,var(--gc,var(--brand-primary)) 12%,transparent)}
.fk-gp-opt[aria-selected="true"] .fk-gp-tick{visibility:visible}
.fk-gp-opt[aria-selected="true"] .fk-gp-box{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.fk-gp-empty{padding:1.5rem 1rem;text-align:center;color:var(--text-muted);font-size:.82rem}
.fk-gp-chips{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;min-width:0;flex:1}
.fk-gp-chip{display:inline-flex;align-items:center;gap:.35rem;height:1.85rem;padding:0 .3rem 0 .25rem;border-radius:.35rem;font-size:.78rem;font-weight:600;color:var(--text-primary);background:color-mix(in srgb,var(--gc) 16%,var(--bg-card));border:1px solid color-mix(in srgb,var(--gc) 45%,transparent)}
.fk-gp-chip button{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:2px 4px;border-radius:3px;font-size:.6rem}
.fk-gp-chip button:hover{color:var(--text-primary);background:var(--border-default)}
.fk-gp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:.6rem}
.fk-gp-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem .75rem;border-radius:.75rem;background:var(--form-input-bg);border:1px solid var(--fk-input-line);cursor:pointer;text-align:center;transition:border-color .2s var(--fk-out),transform .35s var(--fk-ease),background-color .2s var(--fk-out)}
.fk-gp-tile input{position:absolute;opacity:0;width:1px;height:1px}
.fk-gp-tile:hover{border-color:color-mix(in srgb,var(--gc) 60%,transparent);transform:translateY(-2px)}
.fk-gp-tile b{font-size:.78rem;font-weight:700;color:var(--text-primary);line-height:1.2}
.fk-gp-tile small{font:600 .66rem var(--fk-mono);color:var(--text-muted)}
.fk-gp-tile:has(input:checked){border-color:var(--gc);background:color-mix(in srgb,var(--gc) 12%,var(--form-input-bg));box-shadow:0 0 0 1px var(--gc),0 8px 24px color-mix(in srgb,var(--gc) 25%,transparent)}
.fk-gp-tile:has(input:checked)::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.55rem;position:absolute;top:.5rem;right:.5rem;width:1rem;height:1rem;border-radius:50%;display:grid;place-items:center;background:var(--gc);color:#fff}
.fk-gp-tile:has(input:focus-visible){outline:2px solid var(--brand-primary);outline-offset:2px}
@media (max-width:640px){
  .fk-gp-pop.is-sheet{position:fixed;left:0;right:0;top:auto;bottom:0;max-height:80dvh;border-radius:1.2rem 1.2rem 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 0 100vmax rgba(2,6,23,.55),var(--fk-shadow)}
  .fk-gp-pop.is-sheet .fk-gp-opt{padding:.7rem .75rem}
}

/* ══ Island buttons ══ */
.isl{position:relative;display:inline-flex;align-items:center;gap:.85rem;height:3.25rem;padding:0 .4rem 0 1.5rem;border:0;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;font-weight:600;font-size:.9rem;transition:transform .45s var(--fk-ease),background .35s var(--fk-out),box-shadow .35s var(--fk-out)}
.isl-ic{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;transition:transform .45s var(--fk-ease)}
.isl:hover .isl-ic{transform:translate(3px,-1px) scale(1.06)}
.isl:active{transform:scale(.98)}
.isl:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.isl-primary{color:#fff;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));box-shadow:0 10px 30px -8px rgba(var(--brand-primary-rgb),.65),inset 0 1px 0 rgba(255,255,255,.2)}
.isl-primary .isl-ic,.isl-secondary .isl-ic{background:rgba(0,0,0,.22)}
.isl-secondary{color:#fff;background:linear-gradient(135deg,var(--brand-secondary-dark,#4b3fc4),var(--brand-secondary));box-shadow:0 10px 30px -8px rgba(var(--brand-secondary-rgb),.6)}
.isl-glass{color:var(--text-primary);background:rgba(148,163,184,.08);box-shadow:inset 0 0 0 1px var(--border-default)}
.isl-glass .isl-ic{background:var(--border-default)}
.isl-glass:hover{background:rgba(148,163,184,.14)}
.isl-light{color:#0b0f1a;background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.isl-light .isl-ic{background:#0b0f1a;color:#fff}
.isl-sm{height:2.5rem;padding:0 .3rem 0 1.1rem;font-size:.8rem;gap:.6rem}
.isl-sm .isl-ic{width:1.9rem;height:1.9rem;font-size:.7rem}
.isl-plain{padding:0 1.5rem}.isl-sm.isl-plain{padding:0 1.1rem}
.isl[disabled],.isl[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* ══ Signature buttons (bx-*) — one per screen at most ══ */
.bx{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:2.75rem;padding:0 1.35rem;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:700 .8rem var(--fk-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);background:none}
.bx:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.bx-hud{--c:var(--fk-accent-tx);--s:11px;background:linear-gradient(var(--c),var(--c)) top left/var(--s) 2px,linear-gradient(var(--c),var(--c)) top left/2px var(--s),linear-gradient(var(--c),var(--c)) top right/var(--s) 2px,linear-gradient(var(--c),var(--c)) top right/2px var(--s),linear-gradient(var(--c),var(--c)) bottom left/var(--s) 2px,linear-gradient(var(--c),var(--c)) bottom left/2px var(--s),linear-gradient(var(--c),var(--c)) bottom right/var(--s) 2px,linear-gradient(var(--c),var(--c)) bottom right/2px var(--s),rgba(var(--brand-primary-rgb),.07);background-repeat:no-repeat;transition:background-size .28s var(--fk-out)}
.bx-hud:hover,.bx-hud:focus-visible{--s:51%}
.bx-chamfer{--k:12px;padding:0 1.6rem;background:linear-gradient(120deg,var(--brand-primary),var(--brand-secondary));clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))}
.bx-chamfer::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:var(--bg-card);clip-path:inherit;transition:opacity .25s}
.bx-chamfer:hover{color:#fff}.bx-chamfer:hover::before{opacity:0}
.bx-split{padding:0;gap:0;color:#fff;background:var(--brand-primary-dark);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.bx-split .bx-lbl{height:100%;display:flex;align-items:center;gap:.55rem;padding:0 1.75rem 0 1.5rem;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.bx-split .bx-arr{width:2.9rem;height:100%;display:grid;place-items:center;margin-left:-8px;background:rgba(0,0,0,.28)}
.bx-split:hover .bx-arr i{animation:bx-nudge .55s var(--fk-out)}
.bx-shine{color:#fff;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary) 60%,var(--brand-primary-light));clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);overflow:hidden}
.bx-shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .7s var(--fk-out)}
.bx-shine:hover::after,.bx-shine:focus-visible::after{left:140%}
.bx-hold{border-radius:.4rem;color:var(--fk-err-tx);background:rgba(var(--st-error-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--st-error-rgb),.55);overflow:hidden;user-select:none;touch-action:none}
.bx-hold .bx-fill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.55rem;background:var(--st-error);color:#fff;clip-path:inset(0 100% 0 0);transition:clip-path .25s var(--fk-out)}
.bx-hold.is-holding .bx-fill{clip-path:inset(0 0 0 0);transition:clip-path var(--hold,1.3s) linear}
.bx-hold.is-done .bx-fill{clip-path:inset(0 0 0 0);transition:none}
.bx-live{padding:0;gap:0;color:#fff;border-radius:.4rem;overflow:hidden;background:#dc2626}
.bx-live .bx-a{display:flex;align-items:center;gap:.55rem;padding:0 1rem;height:100%}
.bx-live .bx-dot{width:.55rem;height:.55rem;border-radius:50%;background:#fff;animation:bx-blink 1.2s infinite}
.bx-live .bx-b{display:flex;align-items:center;gap:.45rem;padding:0 .9rem;height:100%;background:rgba(0,0,0,.3);font:600 .75rem var(--fk-mono);letter-spacing:0}
.bx-live:hover{background:#b91c1c}
.bx-neon{border-radius:.4rem;color:var(--fk-accent-tx);box-shadow:inset 0 0 0 1.5px var(--brand-primary),0 0 14px rgba(var(--brand-primary-rgb),.35),inset 0 0 14px rgba(var(--brand-primary-rgb),.18);text-shadow:0 0 10px rgba(var(--brand-primary-rgb),.6);transition:box-shadow .2s,color .2s}
.bx-neon:hover{color:var(--text-primary)}
html[data-theme="light"] .bx-neon{text-shadow:none;box-shadow:inset 0 0 0 1.5px var(--brand-primary),0 4px 14px rgba(var(--brand-primary-rgb),.18)}
.bx-game{--gc:var(--brand-primary);padding:0 1.1rem 0 .35rem;border-radius:.6rem;color:var(--text-primary);background:color-mix(in srgb,var(--gc) 14%,var(--bg-card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc) 55%,transparent);text-transform:none;letter-spacing:.01em;font-weight:600;font-size:.85rem;transition:background .2s,color .2s}
.bx-game img{width:2.1rem;height:2.1rem;border-radius:.4rem;object-fit:cover}
.bx-game .bx-meta{font:600 .7rem var(--fk-mono);color:var(--text-muted)}
.bx-game:hover{background:var(--gc);color:#fff}.bx-game:hover .bx-meta{color:rgba(255,255,255,.85)}
.bx-duo{padding:0;gap:0;border-radius:.4rem;overflow:hidden;color:#fff;background:linear-gradient(135deg,#4b3fc4,var(--brand-secondary))}
.bx-duo .bx-a{display:flex;align-items:center;gap:.55rem;padding:0 1.1rem;height:100%}
.bx-duo .bx-b{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 .9rem;height:100%;background:var(--bg-card);color:var(--text-primary);box-shadow:inset 0 0 0 1px rgba(var(--brand-secondary-rgb),.6);border-radius:0 .4rem .4rem 0;line-height:1.1}
.bx-duo .bx-b small{font-size:.6rem;letter-spacing:.06em;color:var(--text-muted)}
.bx-duo .bx-b b{font-size:.9rem;text-transform:none}
.bx-fab{width:3.4rem;height:3.4rem;padding:0;border-radius:50%;color:#fff;font-size:1.1rem;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));box-shadow:0 8px 24px rgba(var(--brand-primary-rgb),.4)}
.bx-fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed rgba(var(--brand-primary-rgb),.7);transition:inset .25s}
.bx-fab:hover::before{inset:-9px;animation:bx-spin 4s linear infinite}
.bx-fab i{transition:transform .25s}.bx-fab:hover i{transform:rotate(90deg)}
.bx-social{height:2.75rem;padding:0 1.1rem;border-radius:.45rem;text-transform:none;letter-spacing:0;font-weight:600;font-size:.875rem;gap:.6rem}
.bx-discord{background:#5865F2;color:#fff}.bx-discord:hover{background:#4752c4}
.bx-google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #dadce0}.bx-google:hover{background:#f8f9fa}
@keyframes bx-nudge{50%{transform:translateX(6px)}}
@keyframes bx-blink{50%{opacity:.25}}
@keyframes bx-spin{to{transform:rotate(360deg)}}

/* ══ Copy / secret field ══ */
.fk-copy{display:flex;align-items:center;gap:.4rem;padding:.3rem .3rem .3rem .85rem;border-radius:.85rem;background:var(--form-input-bg);box-shadow:inset 0 0 0 1px var(--fk-input-line)}
.fk-copy > i{color:var(--text-muted)}
.fk-copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;color:var(--text-primary);background:none;padding:0}
.fk-copy-btn{display:inline-flex;align-items:center;gap:.4rem;height:2.1rem;padding:0 .75rem;border-radius:.6rem;border:0;background:var(--border-default);color:var(--text-primary);font-weight:600;font-size:.78rem;cursor:pointer;transition:background .25s var(--fk-out),transform .35s var(--fk-ease)}
.fk-copy-btn:active{transform:scale(.95)}
.fk-copy-btn.is-ok{background:rgba(var(--st-success-rgb),.18);color:var(--st-success)}

/* ══ Accordion (native <details class="fk-acc">) ══ */
.fk-acc-group{border-radius:1rem;box-shadow:inset 0 0 0 1px var(--border-default);overflow:hidden}
.fk-acc + .fk-acc{border-top:1px solid var(--border-subtle)}
.fk-acc > summary{list-style:none;display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;cursor:pointer;font-weight:600;font-size:.875rem;color:var(--text-primary)}
.fk-acc > summary::-webkit-details-marker{display:none}
.fk-acc > summary::after{content:"\2b";margin-left:auto;width:1.6rem;height:1.6rem;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--border-subtle);color:var(--text-secondary);font-size:.95rem;transition:transform .4s var(--fk-ease),background .25s}
.fk-acc[open] > summary::after{transform:rotate(45deg);background:var(--brand-primary);color:#fff}
.fk-acc > summary:focus-visible{outline:2px solid var(--brand-primary);outline-offset:-2px}
.fk-acc-body{padding:0 1rem 1rem;font-size:.82rem;color:var(--text-secondary)}

/* ══ Countdown ══ */
.fk-cd{display:flex;gap:.5rem}
.fk-cd-u{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:4rem;padding:.75rem .5rem;border-radius:.85rem;background:var(--bg-card);box-shadow:inset 0 0 0 1px var(--border-default)}
.fk-cd-u b{font:700 1.85rem/1 var(--fk-display);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.fk-cd-u small{font:700 .6rem var(--fk-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.fk-cd-u.is-hot b{color:var(--fk-accent-tx)}
.fk-cd-inline{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:99px;background:rgba(var(--st-warning-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--st-warning-rgb),.35);color:var(--st-warning);font-weight:600;font-size:.78rem}
.fk-cd-inline b{font-family:var(--fk-mono);font-variant-numeric:tabular-nums}
.fk-cd.is-over .fk-cd-u b,.fk-cd-inline.is-over{opacity:.6}

@media (prefers-reduced-motion:reduce){
  dialog.fk-dlg[open],dialog.fk-dlg.is-closing,.fk-dlg-medal,.fk-confetti i,.bx-live .bx-dot,.bx-fab:hover::before{animation:none!important}
  .isl,.isl-ic,.bx-hud,.bx-shine::after,.bx-hold .bx-fill,.fk-gp-tile{transition:none!important}
}
/* Opt out of the site-wide border-radius:0 !important (see forms.css) where shape is the design. */
.isl,.isl-ic,.bx-fab{border-radius:999px!important}
.fk-gp-logo.lg{border-radius:.65rem!important}
/* "All games" option / filter default — reads as a selected choice, not a placeholder */
.fk-gp-all{background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary));color:#fff;font-size:.62rem}

/* Collapsible panel card: <details class="card-panel fk-acc fk-acc-card"> — closed by default,
   header row is the toggle (docs/design/collapse-plan.html, pattern 2). */
.fk-acc-card{padding:0!important;overflow:hidden}
.fk-acc-card > summary{align-items:center;gap:.75rem;padding:.85rem 1rem}
.fk-acc-card > summary:hover{background:var(--border-subtle)}
.fk-acc-head{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fk-acc-title{font:700 1rem var(--fk-display);color:var(--text-primary);display:flex;align-items:center;gap:.4rem}
.fk-acc-title i{color:var(--fk-accent-tx);font-size:.85em}
.fk-acc-sub{font-weight:500;font-size:.78rem;color:var(--text-muted)}
.fk-acc-card > summary > .badge-status{margin-left:auto;flex:none}
.fk-acc-card > summary:has(> .badge-status)::after{margin-left:0}
.fk-acc-card > .fk-acc-body{padding:.25rem 1rem 1rem;border-top:1px solid var(--border-subtle)}
.fk-acc-card[open] > .fk-acc-body{padding-top:.9rem}

/* ══ Collapse primitive (docs/design/collapse-plan.html, C1) ══
   <button data-fk-collapse aria-controls="p1" aria-expanded="false">…</button>
   <div id="p1" class="fk-cx"><div>…content…</div></div>          (one wrapper child)
   Height animates via grid rows, no JS measuring. */
.fk-cx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--fk-ease)}
.fk-cx > *{overflow:hidden;min-height:0}
.fk-cx.is-open{grid-template-rows:1fr}
[data-fk-collapse] .fk-cx-chev{transition:transform .35s var(--fk-ease)}
[data-fk-collapse][aria-expanded="true"] .fk-cx-chev{transform:rotate(180deg)}
.fk-cx-toolbar{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.5rem}
@media (prefers-reduced-motion:reduce){.fk-cx,[data-fk-collapse] .fk-cx-chev{transition:none}}

/* Dynamic island live alert (showToast.island in static/js/toast.js). Theme-constant dark pill, so text is literal #fff. */
.fk-dyn{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:10050;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:8px 18px 8px 8px;border-radius:999px;background:rgba(8,10,18,.9);color:#fff;text-decoration:none;box-shadow:0 20px 50px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translate(-50%,-140%) scale(.8);opacity:0;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fk-dyn.on{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.fk-dyn-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--brand-primary-dark),var(--brand-primary))}
.fk-dyn-ok .fk-dyn-av{background:linear-gradient(135deg,#15803d,#22c55e)}
.fk-dyn-tx{min-width:0}
.fk-dyn-tx b{display:block;font-size:13.5px;color:#fff}
.fk-dyn-tx small{display:block;font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.fk-dyn{transition:opacity .2s}}

/* Bento grid (premium layer; design: form-kit-designs.html .bento). Children pick a span. */
.fk-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(120px,auto);gap:14px}
.fk-bento > *{min-width:0}
.fk-b-8{grid-column:span 8;grid-row:span 2}
.fk-b-6{grid-column:span 6}
.fk-b-4{grid-column:span 4}
.fk-b-feat{display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;background:radial-gradient(420px 260px at 85% 0%,rgba(var(--brand-primary-rgb),.3),transparent 70%),radial-gradient(360px 260px at 0% 100%,rgba(var(--brand-secondary-rgb),.25),transparent 70%),var(--bg-card)}
.fk-b-feat h3{font-size:clamp(1.4rem,3vw,2rem)!important;text-transform:uppercase}
@media (max-width:1023px){.fk-b-8{grid-column:span 12;grid-row:auto}.fk-b-4,.fk-b-6{grid-column:span 6}}
@media (max-width:639px){.fk-b-4,.fk-b-6{grid-column:span 12}}