/* =====================================================================
   THE FLOOR, PLAYABLE - kept from design v2 (see design/v2)
   ===================================================================== */
/* a picked side fills in and pops, like the arena's Yes / No */
.fl-grid .pc-b button,.fl-grid .pcm-y,.fl-grid .pcm-n,.fl .rk-btn,.fl-grid .so-b button{
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .28s cubic-bezier(.34,1.56,.64,1)}
.fl-grid .pc-b button:active,.fl-grid .pcm-y:active,.fl-grid .pcm-n:active,.fl .rk-btn:active,.fl-grid .so-b button:active{transform:scale(.97)}
.fl-grid .pc-b .y.on,.fl-grid .pcm-y.on{background:#0E9F6E;color:#fff;box-shadow:0 6px 16px rgba(14,159,110,.32)}
.fl-grid .pc-b .n.on,.fl-grid .pcm-n.on{background:#D2503C;color:#fff;box-shadow:0 6px 16px rgba(210,80,60,.30)}
.fl .rk-btn.bar.on{background:#7C0234;color:#fff;box-shadow:0 6px 16px rgba(124,2,52,.32)}
.fl .rk-btn.rma.on{background:#23265C;color:#fff;box-shadow:0 6px 16px rgba(35,38,92,.32)}
.fl .rk-btn.mci.on{background:#0C5E90;color:#fff;box-shadow:0 6px 16px rgba(12,94,144,.32)}
.fl-grid .so-b .a.on{background:#15181D;color:#fff;box-shadow:0 6px 16px rgba(21,24,29,.30)}
.fl-grid .so-b .b.on{background:#1D4ED8;color:#fff;box-shadow:0 6px 16px rgba(29,78,216,.30)}
.fl-grid button.on span{opacity:.85}
.fl-grid .pc-b button.on,.fl-grid .pcm-y.on,.fl-grid .pcm-n.on,.fl .rk-btn.on,.fl-grid .so-b button.on{transform:translateY(-2px) scale(1.05)}

/* hover: the shadow deepens, nothing moves */
.fl .pc:hover,.fl .so:hover,.fl .rk:hover,.fl .tc:hover{transform:none}
.fl .rk-e:hover{transform:none}
.fl .rk-e:hover .rk-ph{filter:drop-shadow(0 1px 1px rgba(16,24,40,.22)) drop-shadow(0 6px 10px rgba(16,24,40,.24)) drop-shadow(0 20px 30px rgba(16,24,40,.20))}
.fl .rk-e:hover::before{transform:translateX(-50%) scale(1);opacity:1;filter:blur(3px)}
.fl .tc:hover .tc-ph{transform:none}
.fl .pc,.fl .so,.fl .rk,.fl .tc{transition:box-shadow .3s ease}

/* the entrance: held hidden until the boot's last paint */
.fl-grid.fl-pre > *{opacity:0}

/* the search */
.fl{position:relative}
.fp-find{display:flex;align-items:center;gap:10px;width:min(460px,100%);height:42px;margin:0 auto 16px;padding:0 14px;box-sizing:border-box;
  background:#fff;border-radius:21px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.08)}
.fp-find svg{width:16px;height:16px;color:#B4B0A6;flex:0 0 16px}
.fp-find input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 14px/1 Inter,sans-serif;color:#15181D}
.fp-find input::placeholder{color:#B4B0A6}
.fp-find .fp-x{display:none;border:0;background:#F1F0EA;border-radius:50%;width:22px;height:22px;cursor:pointer;color:#8A867B;font:700 13px/22px Inter,sans-serif;padding:0}
.fp-find.has .fp-x{display:block}
.fl-grid.tn-flow{display:flex!important;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:flex-start;gap:var(--gap)}
.fl-grid.tn-flow > *{margin:0!important;flex:none}
.fl-grid > .tn-gone{display:none!important}
.fl-grid > .tn-anim{pointer-events:none}
.tn-none{display:none;text-align:center;padding:60px 0;font:700 15px/1.3 Inter,sans-serif;color:#B4B0A6}
.fl.tn-empty .tn-none{display:block}

/* the dock: rises from the bottom once a side is picked */
#tndock{position:fixed;left:50%;bottom:26px;z-index:70;display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,160%);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.34,1.4,.64,1),opacity .3s ease}
#tndock.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
body.fp-away #tndock,body.inroom #tndock,body.inglobe #tndock{transform:translate(-50%,160%);opacity:0;pointer-events:none}
.td-main{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 22px;border-radius:18px;background:#15181D;color:#fff;
  box-shadow:0 10px 30px rgba(16,15,13,.28),0 2px 6px rgba(16,15,13,.18);max-width:min(720px,calc(100vw - 32px))}
.td-pick{font:600 14px/1.2 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:rgba(255,255,255,.88)}
.td-pick b{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin-right:8px;color:#fff}
.td-pick b.y{color:#6FE0A1}.td-pick b.n{color:#FF8E7E}
.td-go{flex:none;height:42px;padding:0 22px;border:0;border-radius:12px;background:#1C8A4E;color:#fff;cursor:pointer;
  font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 14px rgba(28,138,78,.4);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.td-go:hover{transform:translateY(-1px) scale(1.04);background:#22A05B}
.td-go:active{transform:scale(.97)}
#tndock .td-inv{flex:none;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.55);font:600 12.5px/1 Inter,sans-serif;padding:10px 6px;transition:color .2s}
#tndock .td-inv:hover{color:#fff}
.td-main.bump{animation:tdbump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes tdbump{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
#tndock{left:calc(50% + 114px)}
/* the sidebar: same width, bigger options */
.sb nav{gap:6px!important}
.sb nav button{height:auto!important;padding:14px 14px!important;gap:14px!important;font-size:17px!important;font-weight:600!important;border-radius:12px!important}
.sb nav button .ic{width:24px!important;height:24px!important;flex:0 0 24px!important}
.sb nav button img.ic{width:26px!important;height:auto!important}
.sb nav button:focus{outline:none}
.sb nav button:focus-visible{outline:2px solid #15181D;outline-offset:2px}
.sb nav button.on:before{top:10px!important;bottom:10px!important}
.sb .prof .pring{width:48px!important;height:48px!important;flex:0 0 48px!important}
.sb .prof #pnm{font-size:16px!important}
.sb .prof{gap:14px!important}

/* the arena: the dock replaces its own Debate / Challenge buttons once something is picked */
body.fp-arena-on .arena-air .argobtn{opacity:0!important;pointer-events:none!important;transition:opacity .2s}

/* the arena: the dock is the only way in; the old Public / Private switch and Debate / Challenge buttons are gone */
.arena-air .arpriv,.arena-air .argobtn,.arena-air .fr-chal{display:none!important}
#argo2{display:none!important}

/* the new cards pick the same way: filled, lifted */
.fl-grid .nc .ynb .y.on{background:#0E9F6E;color:#fff;box-shadow:0 6px 16px rgba(14,159,110,.32)}
.fl-grid .nc .ynb .n.on{background:#D2503C;color:#fff;box-shadow:0 6px 16px rgba(210,80,60,.30)}
.fl-grid .nc.goat .nb.j.on{background:#B01133;color:#fff;box-shadow:0 6px 16px rgba(176,17,51,.30)}
.fl-grid .nc.goat .nb.l.on{background:#5B3A24;color:#fff;box-shadow:0 6px 16px rgba(91,58,36,.30)}
.fl-grid .nc .ynb button,.fl-grid .nc.goat .nb{transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .28s cubic-bezier(.34,1.56,.64,1)}
.fl-grid .nc .ynb button.on,.fl-grid .nc.goat .nb.on{transform:translateY(-2px) scale(1.05)!important}

/* the search stays put: it rides at the top while the floor scrolls under it,
   on a white band that fades into the cards */
.fp-find{position:sticky;top:0;z-index:40}
.fp-find::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-14px;bottom:-14px;
  background:linear-gradient(to bottom,#fff 0,#fff 72%,rgba(255,255,255,0) 100%);pointer-events:none}

.fp-find{top:10px;border:1px solid #ECEBE6}
.fp-find::before{top:-24px}

/* no band: the pill alone sticks, cards scroll under it */
.fp-find::before{content:none}

/* chat or audio, picked on the dock before the fight */
#tndock .td-fmt{flex:none;display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(255,255,255,.08)}
#tndock .td-fmt button{border:0;background:none;cursor:pointer;color:rgba(255,255,255,.5);font:700 11.5px/1 Inter,sans-serif;padding:8px 10px;border-radius:8px;transition:color .2s,background .2s}
#tndock .td-fmt button:hover{color:#fff}
#tndock .td-fmt button.on{color:#15181D;background:#fff}