/* DuckRoulette — ON AIR.
   Late-night broadcast skin. Same DOM contract as before: every id/class and the
   layout variables read by app.js (--wl --wr --hd --dk --cta --dw) are untouched.
   Rules: no glass, no pills, no glow. Opaque panels, 1px hairlines, tally orange as a field. */

@font-face {
  font-family: Archivo;
  src: url("/roulette/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Archivo;
  src: url("/roulette/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* studio black, warm */
  --bg: #0b0a09;
  --bg-2: #100e0c;
  --panel: #0d0b0a;
  --panel-hi: #141110;
  --glass: rgba(13, 11, 10, .92);          /* legacy name, no blur behind it */
  --glass-hi: #12100e;
  --line: rgba(255, 238, 222, .12);
  --line-hi: rgba(255, 238, 222, .26);
  --text: #f6f1e9;
  --dim: rgba(246, 241, 233, .70);
  --dim-2: rgba(246, 241, 233, .54);

  /* one signal colour: the tally lamp */
  --accent: #ff5c22;
  --accent-soft: #ff9d74;
  --accent-bg: rgba(255, 92, 34, .13);
  --accent-line: rgba(255, 92, 34, .46);
  --on-accent: #150702;

  /* outbound / sponsored, kept distinct from the tally */
  --offer: #2b8f66;
  --offer-soft: #63c296;
  --offer-bg: rgba(43, 143, 102, .16);
  --offer-line: rgba(43, 143, 102, .48);
  --on-offer: #04120b;

  /* negative vote: cold slate, never a second orange */
  /* networks keep their own flags; documented so the rails never invent a sixth */
  --p-cb: #e8832a;
  --p-sc: #e86a9e;
  --p-bga: #3fb9b9;
  --p-c4: #e0452a;
  --p-cs: #3aa3e8;
  --tally-hover: #ff7442; /* survol de la touche primaire : tally plus clair */
  --tally-press: #e04a14; /* appui : tally plus dense */
  --tier-bronze: #8a5a33;
  --tier-silver: #6f7d8c;
  --tier-gold: #96803c;
  --tier-platinum: #b9a9c9;

  --vote: #a3b0bd;
  --vote-bg: rgba(163, 176, 189, .13);
  --vote-line: rgba(163, 176, 189, .40);

  --r-hair: 1px;
  --r-pill: 2px;
  --r-panel: 3px;
  --r-sm: 2px;
  --r-clip: 6px;
  --gap: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --blur: none;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --wl: 236px;
  --wr: 300px;
  --hd: 0px;
  --dk: 96px;
  --cta: 0px;
  --dw: min(320px, 86vw);
}

*, *::before, *::after { margin: 0; box-sizing: border-box; }
html, body {
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 92, 34, .34) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 92, 34, .30); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ Stage + video */
#stage {
  position: fixed;
  left: var(--wl);
  right: var(--wr);
  top: calc(var(--sat) + var(--hd) + var(--cta));
  bottom: calc(var(--sab) + var(--dk));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#stage:fullscreen { inset: 0; }
video { width: 100%; height: 100%; object-fit: contain; }
/* never display:none/visibility:hidden on a video: WebKit freezes its decoder */
.pv { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: .001; pointer-events: none; z-index: -1; border-radius: var(--r-clip); }
.pv.on { inset: 0; width: 100%; height: 100%; opacity: 1; pointer-events: auto; z-index: auto; }
#vframe { position: fixed; z-index: 4; pointer-events: none; display: none; border-radius: var(--r-clip); container-type: inline-size; }
#panic { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #000; z-index: 5; }
#panic.on { display: flex; }
#panic img { width: 100%; height: 100%; object-fit: cover; }
#swfb { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; font-size: 64px; pointer-events: none; opacity: 0; text-shadow: 0 4px 24px rgba(0, 0, 0, .7); }
#swfb.on { animation: swf .7s ease; }
@keyframes swf { 0% { opacity: 0; transform: scale(.6) } 20% { opacity: 1 } 65% { opacity: 1 } 100% { opacity: 0; transform: scale(1.35) } }
body.panicked :is(.side, .drawer, .dtog, .overlay, .affw, #loading, #sndhint, #vframe, #vtop, #chatwrap, #toybadge, #losst, #seekmsg) { filter: url(#pxfx); transition: filter .35s; }
body.panicked :is(.rail, #msback, #msheet, #pwatoast, #clogm, #favtoast, .affw, .dtog) { display: none !important; }

/* ------------------------------------------------------------------ Rails */
.side { position: fixed; top: 0; bottom: 0; z-index: 6; width: var(--wl); display: flex; flex-direction: column; background: var(--panel); }
#sideL { left: 0; border-right: 1px solid var(--line); }
#sideR { right: 0; width: var(--wr); border-left: 1px solid var(--line); }
.rail { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; padding: 14px 16px 12px; overflow-y: auto; position: relative; bottom: auto !important; }
.railclose { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 2px; cursor: pointer; align-items: center; justify-content: center; font-size: 15px; color: var(--text); background: var(--panel-hi); border: 1px solid var(--line-hi); }
.railclose:hover { border-color: var(--accent-line); color: var(--accent-soft); }
.railtitle {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0 0; margin-bottom: 2px;
  font-size: 11px; font-weight: 800; font-stretch: 78%; text-transform: uppercase;
  letter-spacing: .16em; color: var(--dim-2); white-space: nowrap;
}
.railtitle::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--accent); }
.railtitle::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.favtools { font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: 0; color: var(--dim-2); font-size: 11px; }
.favtools a { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
.favtools a:hover { color: var(--accent-soft); text-decoration-color: var(--accent); }
.dtog, .menuhead, .moretools { display: none; }
.corner { margin-top: auto; padding-top: 6px; font-size: 11px; line-height: 1.5; font-stretch: 90%; letter-spacing: .01em; color: var(--dim); text-align: center; flex: none; }
.corner.r { margin-top: 12px; }
.corner.l { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.corner a { text-decoration: none; }
.corner a:hover { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; }
.corner .f2 { display: block; } /* ligne 2 du pied : reseaux + copyright */
/* affiliate "become a model": a ghost key, never competes with #aff */
.earn { display: flex; align-items: center; justify-content: center; min-height: 38px; margin: 0 0 2px; padding: 8px 10px; border-radius: 2px; border: 1px solid var(--accent); color: var(--on-accent); background: var(--accent); text-decoration: none; font-size: 11px; font-weight: 800; font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; transition: color .15s, border-color .15s, background .15s; }
.earn:hover { color: var(--on-accent); border-color: var(--tally-hover); background: var(--tally-hover); }
.earn:active { background: var(--tally-press); border-color: var(--tally-press); }

/* model block = station bug */
.top { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.brandlogo { display: flex; align-items: center; gap: 10px; text-align: center; }
.brandlogo img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.brandlogo .bt { font-size: 18px; font-weight: 700; font-stretch: 88%; letter-spacing: -.01em; line-height: 1.1; text-transform: uppercase; }
.brandlogo .bt em { color: var(--accent); font-style: normal; }
.brandlogo .tagline { display: none; margin-top: 3px; max-width: 168px; font-size: 11px; font-weight: 500; font-stretch: 100%; color: var(--dim-2); letter-spacing: 0; text-transform: none; text-wrap: balance; } /* 2 lignes equilibrees sous la marque centree */
.poolcount {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; /* chip "cams online" centree sous la marque */
  padding: 4px 8px; font-size: 11px; font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent-soft);
  border: 1px solid var(--accent-line); background: var(--accent-bg);
}
.poolcount::before { content: ""; width: 5px; height: 5px; background: var(--accent); animation: tally 2.6s steps(1, end) infinite; }
.poolcount:empty { display: none; }
@keyframes tally { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .25 } }
.plat { padding: 3px 7px; font-size: 11px; font-weight: 800; font-stretch: 78%; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; color: #12090a; position: relative; }
.plat.chaturbate { background: var(--p-cb); }
.plat.stripchat { background: var(--p-sc); }
.plat.bongacams { background: var(--p-bga); }
.plat.cam4 { background: var(--p-c4); }
.plat.camsoda { background: var(--p-cs); }
.watching { font-size: 11px; font-stretch: 82%; text-transform: uppercase; letter-spacing: .12em; color: var(--dim-2); }
.unrow { position: relative; display: flex; align-items: center; gap: 8px; justify-content: center; max-width: 100%; }
.uname { font-size: 18px; font-weight: 700; font-stretch: 90%; letter-spacing: -.01em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
#ulink, #vbell, #radarmin, #radarreroll, #adhide, #pvskip { position: relative; }
#ulink::before, #vbell::before, #radarmin::before { content: ""; position: absolute; inset: -14px; }
#ulink { font-size: 13px; cursor: pointer; opacity: .55; }
.uname:hover, #ulink:hover { opacity: 1; }
#coptip { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; z-index: 9; padding: 4px 10px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); background: var(--accent-soft); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
#coptip.on { opacity: 1; }
.vrow { display: flex; align-items: center; gap: 10px; }
.viewers { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.viewers:empty { display: none; }
#vbell { font-size: 14px; text-decoration: none; opacity: .6; }
#vbell:hover { opacity: 1; }
.vrow:not(:has(.viewers:not(:empty))):not(:has(#vbell:not([style*="none"]))) { display: none; }

/* chips: tags, moods */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
#tags { align-content: flex-start; flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; transition: max-height .2s; position: relative; } /* liste toujours ouverte : plus de repli ni de fondu */
#tags.open { max-height: 46%; overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
#tagexp { display: none !important; position: absolute; right: 2px; bottom: 2px; padding: 0 9px; min-height: 26px; border-radius: 2px; border: 1px solid var(--line-hi); background: var(--panel-hi); color: var(--dim); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: -10px 0 12px var(--panel); }
#tagexp:hover { color: var(--accent-soft); border-color: var(--accent-line); }
#tags.open #tagexp { position: static; box-shadow: none; }
#mstags #tags { max-height: none; overflow: visible; }
#mstags #tagexp { display: none !important; }
.tag, .mood {
  font-size: 11.5px; font-stretch: 92%; padding: 5px 9px; border-radius: 2px;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  cursor: pointer; user-select: none; transition: color .12s, border-color .12s, background .12s;
}
.tag:hover, .mood:hover { color: var(--text); border-color: var(--line-hi); background: rgba(255, 238, 222, .05); }
.tag.pinned { color: var(--accent-soft); border-color: var(--accent-line); background: var(--accent-bg); }
.tag.more { border-style: dashed; color: var(--dim-2); }
.tag.mine { order: 9; color: #9fd9cf; border-color: rgba(63, 185, 185, .45); }
.mood.shuffle { border-style: dashed; border-color: var(--accent-line); color: var(--accent-soft); font-weight: 700; }
.mood.shuffle:hover { background: var(--accent-bg); }
.mood.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.mood.spec { border-style: dashed; }
.mood.spec.locked { opacity: .45; font-weight: 400; }
.mood.spec.on { border-style: solid; }
.soc { font-size: 11px; font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent-soft); text-decoration: none; }
#tagadd { display: flex; gap: 5px; }
#tagadd input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; color: var(--text); padding: 8px 10px; font-size: 12.5px; outline: none; caret-color: var(--accent); }
#tagadd input::placeholder { color: var(--dim-2); }
#tagadd input:focus { border-color: var(--accent-line); }
#tagadd button { flex: none; min-width: 38px; background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: 2px; color: var(--accent-soft); cursor: pointer; font-weight: 700; font-size: 15px; }
#tagadd button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#tagmsg { font-size: 11px; font-stretch: 88%; color: var(--accent-soft); opacity: 0; transition: opacity .3s; min-height: 14px; }

/* liked / favourite rows = programme entries with a network flag */
/* etagere likes : regles definitives en fin de fichier */
#railL .powered { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.15; font-stretch: 90%; letter-spacing: .01em; color: var(--dim); text-align: center; }
#railL .corner.r { margin-top: -9px; padding-top: 0; line-height: 1.35; } /* annule le row-gap du rail : colle au bloc powered by */
#railL .corner.l { margin-top: 6px; padding-top: 0; border-top: 0; }
#likes { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#likes:empty::after { content: "likes you give appear here"; display: block; padding: 14px 10px; text-align: center; font-size: 11px; font-stretch: 88%; line-height: 1.5; color: var(--dim-2); border: 1px dashed var(--line); }
.likedrow { display: flex; align-items: center; gap: 9px; min-height: 34px; flex: none; padding: 0 10px; border-radius: 2px; border: 1px solid transparent; background: rgba(255, 238, 222, .04); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: .12s; }
.likedrow::before { content: ""; width: 3px; height: 12px; flex: none; background: rgba(255, 238, 222, .35); }
.likedrow img { width: 14px; height: 14px; flex: none; }
.likedrow:hover { border-color: var(--line-hi); background: rgba(255, 238, 222, .08); }
.likedrow.chaturbate::before { background: var(--p-cb); }
.likedrow.stripchat::before { background: var(--p-sc); }
.likedrow.bongacams::before { background: var(--p-bga); }
.likedrow.cam4::before { background: var(--p-c4); }
.likedrow.camsoda::before { background: var(--p-cs); }
.likedrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.likedrow:hover .nm { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.likedrow.hasimg { gap: 10px; padding: 6px; min-height: 64px; }
.likedrow.hasimg::before { display: none; }
.likedrow .lthumb { width: 88px; height: 50px; flex: none; object-fit: cover; border-radius: 2px; background: #0a0908; }
.lmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lsite { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
.likedrow .lsite img { width: 12px; height: 12px; }
.favx { position: relative; flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--dim-2); font-size: 14px; line-height: 1; transition: .12s; }
.favx:hover { color: var(--accent-soft); border-color: var(--accent-line); }
.favx.on { color: var(--accent); }
.favx::before { content: ""; position: absolute; inset: -6px; }
.favst { flex: none; width: 6px; height: 6px; background: rgba(255, 238, 222, .28); }
.favst.on { background: var(--accent); }
.favst.off { background: var(--vote); }
.favrow.live .favst { animation: favpulse 1.6s infinite; }
@keyframes favpulse { 50% { opacity: .35 } }
#favbox { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#favs { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 220px; }
.favrow { min-height: 44px; }
.favrow.hasimg { min-height: 64px; }

/* right rail: outbound CTA, links, moods, sponsor, share, session */
#railR .inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.outlink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px; margin-bottom: 4px; border-radius: 2px; overflow: hidden; background: transparent; border: 1px solid var(--line); color: var(--dim); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: .12s; }
.outlink:hover { color: var(--text); border-color: var(--line-hi); background: rgba(255, 238, 222, .05); }
.outlink img { width: 16px; height: 16px; flex: none; }
.outlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CTA room : la vignette montre la room, l'enseigne verte dit ce que le clic ouvre */
.outlink.main { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "shot shot" "lbl go"; flex: none; min-height: 0; padding: 0; gap: 0; text-align: left; color: var(--on-offer); background: var(--offer); border-color: var(--offer); }
.outlink.main:hover { background: var(--offer-soft); border-color: var(--offer-soft); color: var(--on-offer); }
.outlink.soc { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent-soft); }
#links { display: flex; flex-direction: column; }
#moods { display: flex; flex-wrap: wrap; gap: 5px; }
#railL #moods { max-height: 176px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; } /* moods en colonne gauche : compact */
#railL #moods .mood.shuffle { position: sticky; bottom: 0; margin-left: auto; z-index: 1; min-width: 30px; padding: 0 7px; justify-content: center; background: var(--panel-hi); border-color: var(--line-hi); } /* dans le rail : juste l icone, elle ne recouvre plus de pill */
#railL #moods .mood.shuffle .lbl { display: none; }
#railL #moods .mood.shuffle .arr { font-size: 13px; line-height: 1; }
#adbox { position: relative; padding: 10px 0; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } /* banniere a sa hauteur naturelle : le rail defile, l image n est jamais comprimee */
#railad { display: block; border: 1px solid var(--line); }
#railad { display: block; width: 100%; min-height: 0; }
#railad img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; } /* pleine largeur du container, ratio natif : aucune bande */ /* banniere 300x600 : pleine largeur de colonne, hauteur naturelle (ratio 1:2) */ /* banniere en fin de rail : plafonnee pour rester visible sous les liens */
#adhide { position: absolute; top: 24px; right: 8px; z-index: 2; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; cursor: pointer; border-radius: 2px; border: 1px solid var(--line-hi); background: rgba(6, 5, 5, .82); color: var(--dim); }
#adhide::before { content: ""; position: absolute; inset: -10px; }
#adhide:hover { border-color: var(--accent-line); color: var(--accent-soft); }
#admsg, #adshare, #adback, #sessbox { padding: 12px 10px; border: 1px dashed var(--line-hi); border-radius: 2px; font-size: 11px; line-height: 1.65; color: var(--dim); text-align: center; }
#admsg, #adshare, #adback { display: none; }
#adshare { margin-top: 10px; }
#adback { margin-top: 12px; }
#sessbox { margin-top: 8px; }
#sessbox .railtitle { padding-top: 0; }
#adbox.off #railad, #adbox.off #adhide { display: none; }
#adbox.off #admsg, #adbox.off #adshare { display: block; }
#admsg a, #adback a { color: var(--offer-soft); font-weight: 700; text-decoration: none; cursor: pointer; }
#adsharetxt { font-size: 11px; line-height: 1.5; margin-bottom: 10px; }
#adshbtns { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
#adshbtns a { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 10px; font-size: 11px; font-stretch: 82%; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--dim); text-decoration: none; cursor: pointer; }
#adshbtns a:hover { border-color: var(--line-hi); color: var(--text); }
#adshbtns img { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ Dock: below the video, on the stage's axis */
.overlay { position: fixed; left: var(--wl); right: var(--wr); bottom: 0; height: calc(var(--dk) + var(--sab)); z-index: 6; pointer-events: none; }
.bottom { height: 100%; display: flex; align-items: center; justify-content: center; padding-bottom: var(--sab); }
.controls { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 9px; border-radius: 3px; pointer-events: auto; background: var(--panel); border: 1px solid var(--line); max-width: 100%; min-width: 0; }
.btn { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; line-height: 1; border-radius: 2px; background: transparent; border: 1px solid transparent; color: rgba(246, 241, 233, .74); transition: background .12s, color .12s, border-color .12s; }
.btn:hover { background: rgba(255, 238, 222, .08); border-color: var(--line); color: var(--text); }
.btn:active { background: rgba(255, 238, 222, .14); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.small { width: 42px; height: 42px; }
.btn.big { width: 60px; height: 60px; }
.btn.mtool { display: none; }
.ic { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.big .ic { width: 25px; height: 25px; }
.gsep { width: 1px; height: 22px; background: var(--line); flex: none; margin: 0 4px; }
/* primary = a labelled tally key */
#next { width: auto; min-width: 84px; padding: 0 15px 0 13px; border-radius: 2px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#next::after { content: "NEXT"; margin-left: 7px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .16em; line-height: 1; }
#next:hover { background: var(--tally-hover); border-color: var(--tally-hover); color: var(--on-accent); }
#next.spinning { animation: slotspin .55s ease infinite; }
@keyframes slotspin { 0% { transform: rotate(0) } 30% { transform: rotate(-12deg) scale(1.08) } 60% { transform: rotate(8deg) } 100% { transform: rotate(0) } }
/* votes: like fills bone, dislike stays cold slate */
.btn.like, .btn.dislike { color: rgba(246, 241, 233, .62); }
.btn.like:hover, .btn.dislike:hover { background: rgba(255, 238, 222, .08); color: var(--text); border-color: var(--line); }
.btn.dislike.disliked, #blockbtn.disliked { color: var(--vote); border-color: var(--vote-line); background: var(--vote-bg); }
.btn.like.liked { color: var(--text); border-color: var(--line-hi); background: rgba(246, 241, 233, .12); }
.btn.like .ic, .btn.dislike .ic, #fsb_like .ic, #fsb_dis .ic { fill: currentColor; fill-opacity: 0; }
.btn.like.liked .ic, .btn.dislike.disliked .ic, #fsb_like.liked .ic, #fsb_dis.disliked .ic { fill-opacity: 1; }
.btn.like.liked .hb { animation: heartbeat .6s ease; }
@keyframes heartbeat { 0% { transform: scale(1) } 25% { transform: scale(1.3) } 45% { transform: scale(.94) } 65% { transform: scale(1.14) } 100% { transform: scale(1) } }
.v-low, .v-high, .f-in, .f-fit { display: none; }
[data-vol="low"] .v-low { display: block; }
[data-vol="low"] .v-off, [data-vol="low"] .v-high { display: none; }
[data-vol="high"] .v-high { display: block; }
[data-vol="high"] .v-off, [data-vol="high"] .v-low { display: none; }
[data-fs="in"] .f-in { display: block; }
[data-fs="in"] .f-out, [data-fs="in"] .f-fit { display: none; }
[data-fs="fit"] .f-fit { display: block; }
[data-fs="fit"] .f-out, [data-fs="fit"] .f-in { display: none; }
/* volume: ruled track, square thumb */
#vol, #vol2, #volfs { cursor: pointer; accent-color: var(--accent); pointer-events: auto; }
#vol, #volfs { width: 76px; height: 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--accent) var(--vp, 60%), rgba(255, 238, 222, .18) var(--vp, 60%)); border-radius: 0; outline: none; }
#vol:focus-visible, #volfs:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#vol::-webkit-slider-thumb, #volfs::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 14px; border-radius: var(--r-hair); background: rgba(246, 241, 233, .9); border: 0; cursor: pointer; }
#vol::-moz-range-thumb, #volfs::-moz-range-thumb { width: 8px; height: 14px; border-radius: var(--r-hair); background: rgba(246, 241, 233, .9); border: 0; cursor: pointer; }
#keys { position: relative; }
#keys .tip { position: absolute; bottom: 56px; right: -4px; width: max-content; max-width: 80vw; padding: 12px 14px; font-size: 11px; font-stretch: 92%; line-height: 1.9; text-align: left; white-space: nowrap; background: var(--panel-hi); border: 1px solid var(--line-hi); border-radius: 3px; opacity: 0; pointer-events: none; transition: .18s; color: var(--dim); }
#keys .tip b { color: var(--text); font-weight: 700; }
#keys.on .tip, #keys:hover .tip { opacity: 1; }

/* ------------------------------------------------------------------ Outbound CTA + badges */
.affw { position: fixed; top: calc(var(--sat) + 10px); right: calc(var(--wr) + var(--gap)); z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.aff { display: none; pointer-events: auto; align-items: center; min-height: 40px; padding: 0 16px; font-size: 11px; font-weight: 800; font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: 2px; color: var(--on-offer); background: var(--offer); transition: .15s var(--ease); }
.aff:hover { background: var(--offer-soft); }
.affbadge { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; color: var(--offer-soft); background: var(--panel); border: 1px solid var(--offer-line); transition: .15s; }
.affbadge:hover { border-color: var(--offer-soft); color: var(--text); }
.gb-ico:empty, .gb-txt:empty { display: none; }
#toybadge { position: fixed; top: calc(var(--sat) + 58px); right: calc(var(--wr) + var(--gap)); z-index: 6; }
#kofibadge { display: flex; justify-content: center; margin: auto 0 0; padding: 10px 0 8px; position: sticky; bottom: 0; background: var(--panel); } /* epingle en bas de colonne, petite marge */
#kofibadge img { display: block; width: min(100%, 235px); height: auto; transition: transform .15s var(--ease), opacity .15s; } /* badge pleine largeur de colonne */
#kofibadge:hover img { transform: translateY(-1px); opacity: .9; }

/* ------------------------------------------------------------------ Overlays anchored to the video rect */
#chatwrap { position: fixed; left: calc(var(--wl) + 10px); right: auto; bottom: calc(var(--sab) + var(--dk) + 8px); z-index: 6; display: flex; width: min(392px, calc(100vw - var(--wl) - var(--wr) - 24px)); max-width: min(392px, calc(100vw - var(--wl) - var(--wr) - 24px)); min-height: 42px; pointer-events: auto; overflow: hidden; border-radius: 2px; background: rgba(10, 9, 8, .88); border: 1px solid var(--line-hi); opacity: .55; transition: opacity .3s 3s; }
#chatwrap:hover, #chatwrap:focus-within, #chatwrap:has(#fakechat:not(:placeholder-shown)) { opacity: 1; transition-delay: 0s; }
#chatwrap:focus-within { border-color: var(--accent-line); }
#fakechat { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); caret-color: var(--accent); padding: 0 6px 0 14px; font-size: 13.5px; }
#fakechat::placeholder { color: var(--dim-2); }
#fakesend { flex: 0 0 auto; min-width: 62px; margin: 3px; padding: 0 14px; cursor: pointer; border-radius: 2px; font-size: 11px; font-weight: 800; font-stretch: 78%; text-transform: uppercase; letter-spacing: .14em; color: var(--on-accent); background: var(--accent); }
#fakesend:hover { background: var(--accent-soft); }
#chatbtn { display: none; position: absolute; left: 8px; bottom: 8px; z-index: 4; pointer-events: auto; cursor: pointer; min-height: 44px; min-width: 62px; padding: 0 14px; font-size: 11px; font-weight: 800; font-stretch: 78%; text-transform: uppercase; letter-spacing: .14em; border-radius: 2px; background: rgba(10, 9, 8, .88); border: 1px solid var(--line-hi); color: var(--text); opacity: .6; transition: opacity .3s 4s, color .2s, border-color .2s; }
#chatbtn:hover, #chatbtn:active { opacity: 1; border-color: var(--accent-line); color: var(--accent-soft); transition-delay: 0s; }
#chatpop { position: fixed; left: calc(var(--wl) + 10px); bottom: calc(var(--sab) + var(--dk) + 58px); z-index: 6; display: none; align-items: center; gap: 11px; max-width: min(392px, calc(100vw - var(--wl) - var(--wr) - 24px)); padding: 8px 10px 8px 8px; border-radius: 2px; background: var(--panel-hi); border: 1px solid var(--offer-line); color: #fff; text-decoration: none; pointer-events: auto; animation: cpIn .28s var(--ease); }
#chatpop.on { display: flex; }
#chatpop:hover { border-color: var(--offer); }
#chatpop img { width: 56px; height: 56px; object-fit: cover; flex: none; border: 1px solid var(--line-hi); background: #0a0908; }
#chatpop .cpbody { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#chatpop .cpbody b { display: flex; align-items: center; gap: 5px; font-size: 11px; font-stretch: 80%; text-transform: uppercase; letter-spacing: .1em; color: var(--offer-soft); }
#chatpop .cpbody u { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatpop .cpdot { width: 5px; height: 5px; background: var(--offer-soft); flex: none; }
#chatpop .cpbody > span { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatpop .cpreply { flex: none; margin-left: 4px; padding: 7px 11px; border-radius: 2px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); transition: background .15s; }
#chatpop:hover .cpreply { background: var(--tally-hover); }
@keyframes cpIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
body.onfs #chatpop, body.fit #chatpop { left: 10px; }
body.novid #chatpop, body.adon #chatpop, body.asmr #chatpop, body.panicked #chatpop { display: none !important; }
body.novid #chatwrap { display: none; }

/* next-cam monitor */
#radar { position: fixed; right: calc(var(--wr) + 10px); bottom: calc(var(--sab) + var(--dk) + 8px); z-index: 7; display: none; align-items: center; gap: 9px; padding: 6px; border-radius: 2px; cursor: pointer; pointer-events: auto; background: var(--panel); border: 1px solid var(--line-hi); }
#radar.on { display: flex; }
#radar img { width: 112px; height: 63px; object-fit: cover; background: #000; border: 1px solid var(--line); }
#radar .rt { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 152px; padding-right: 4px; }
#radar .rt u { font-size: 11px; font-weight: 800; font-stretch: 78%; text-decoration: none; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft); }
#radar .rt b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#radar .rt i { font-size: 11px; font-style: normal; font-stretch: 88%; color: var(--dim-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#radarreroll { margin-top: 4px; align-self: flex-start; cursor: pointer; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 5px 8px; border-radius: 2px; background: transparent; border: 1px solid var(--line-hi); color: var(--dim); }
#radarreroll:hover { border-color: var(--accent-line); color: var(--accent-soft); }
#radar .rarrow { font-size: 12px; color: var(--dim-2); }
#radarmin { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 2px; background: var(--panel-hi); border: 1px solid var(--line-hi); color: var(--dim); font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; }
#radarmin:hover { color: var(--accent-soft); border-color: var(--accent-line); }
#radarmini { position: fixed; right: calc(var(--wr) + 10px); bottom: calc(var(--sab) + var(--dk) + 8px); z-index: 7; display: none; width: 42px; height: 42px; border-radius: 2px; cursor: pointer; text-align: center; line-height: 40px; font-size: 17px; pointer-events: auto; background: var(--panel); border: 1px solid var(--line-hi); color: var(--dim); }
#radarmini.on { display: block; }
#radarmini.wait { opacity: .45; animation: rmwait 1.4s ease-in-out infinite; }
@keyframes rmwait { 50% { opacity: .2 } }
body.onfs :is(#radar, #radarmini), body.fit :is(#radar, #radarmini) { right: 10px; }
body.onfs #chatwrap, body.fit #chatwrap { left: 10px; max-width: min(340px, calc(100vw - 24px)); }
body.adon :is(#radar, #radarmini), body.panicked :is(#radar, #radarmini) { display: none !important; }

#sndhint { position: fixed; top: auto; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 9; display: none; width: fit-content; cursor: pointer; pointer-events: auto; white-space: nowrap; line-height: 38px; padding: 0 14px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; color: var(--on-accent); background: var(--accent); }
#sndhint.side, #sndhint.dock { transform: none; }
#sndhint.dock::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--accent); transform: rotate(45deg); }
body:has(#sndhint[style*="block"]) :is(#mute, #mmute, #fsb_mute) { border-color: var(--accent-line); color: var(--accent-soft); animation: sndpulse 1.5s ease-out infinite; }
@keyframes sndpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 34, .40) } 70% { box-shadow: 0 0 0 8px rgba(255, 92, 34, 0) } }
#seekmsg { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; font-size: 11px; font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--text); border-radius: 2px; background: rgba(10, 9, 8, .9); border: 1px solid var(--line-hi); }
#pauseind { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; font-size: 46px; letter-spacing: .1em; text-shadow: 0 2px 20px rgba(0, 0, 0, .85); background: rgba(0, 0, 0, .14); }
#pauseind.on { display: flex; }
body.panicked :is(#pauseind, #tapplay) { display: none; }
#tapplay { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; display: none; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 2px; font-size: 30px; cursor: pointer; background: rgba(10, 9, 8, .9); border: 1px solid var(--line-hi); }
#tapplay.on { display: flex; }
#mhint { position: fixed; top: calc(var(--sat) + var(--hd) + var(--cta) + 8px); left: 50%; transform: translateX(-50%); z-index: 7; display: none; white-space: nowrap; padding: 5px 12px; font-size: 11px; font-weight: 700; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border-radius: 2px; background: rgba(10, 9, 8, .9); border: 1px solid var(--line); pointer-events: none; }
#mhint.on { display: block; animation: mhFade 4s forwards; }
@keyframes mhFade { 0%, 70% { opacity: 1 } 100% { opacity: 0 } }
.hint { display: none; }

/* ------------------------------------------------------------------ Loading, private, lost, pre-roll */
#loading { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px 14px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; text-align: center; border-radius: 2px; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: .2s; }
#loading.on { opacity: 1; }
.spin { width: 18px; height: 18px; flex: none; border: 2px solid rgba(255, 238, 222, .18); border-top-color: var(--accent); border-radius: 50%; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg) } }
#privscr { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; background: rgba(6, 5, 4, .95); }
#privscr.on { display: flex; }
.pvbox { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 0 20px; }
.pvring { width: 56px; height: 56px; border: 2px solid var(--vote-line); animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: 1 } to { transform: scale(1.6); opacity: 0 } }
#pvtxt { font-size: 15px; color: var(--dim); }
#pvtxt b { color: var(--text); }
#pvbtn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none; border-radius: 2px; color: var(--on-offer); background: var(--offer); }
#pvbtn:hover { background: var(--offer-soft); }
#pvskip { font-size: 11px; font-stretch: 88%; color: var(--dim-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
#losst { position: fixed; top: calc(var(--sat) + var(--hd) + var(--cta) + 8px); left: calc(var(--wl) + (100vw - var(--wl) - var(--wr)) / 2); transform: translateX(-50%); z-index: 7; display: none; align-items: center; gap: 12px; max-width: 94vw; padding: 8px 8px 8px 10px; font-size: 14px; border-radius: 2px; background: var(--panel-hi); border: 1px solid var(--line-hi); }
#losst.on { display: flex; animation: lossIn .35s var(--ease); }
@keyframes lossIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) } to { opacity: 1; transform: translateX(-50%) } }
#lossimg { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 2px; background: #0a0908; }
.losstx { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.losstx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.losstx i { font-style: normal; font-size: 11px; font-stretch: 82%; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
#losst a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-decoration: none; border-radius: 2px; color: var(--on-offer); background: var(--offer); }
#losst a:hover { background: var(--offer-soft); }
#rollad { display: none; position: absolute; inset: 0; z-index: 8; background: #000; }
#rollad.on { display: block; }
#rolladf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
#rolladbtn { position: absolute; bottom: 12px; right: 12px; z-index: 2; min-height: 40px; padding: 0 14px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; border: 1px solid var(--line-hi); background: rgba(10, 9, 8, .9); color: var(--text); }
#rolladbtn:hover { border-color: var(--offer-soft); color: var(--offer-soft); }
body.adon :is(.overlay, .affw, .dtog, #fsbar, #fsexit, #losst, #toybadge, #privscr, #vframe, #vtop, #chatbtn, .hint) { display: none !important; }

/* ------------------------------------------------------------------ Sign-on slate (#startscreen) */
#startscreen { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; background: var(--bg); overflow: hidden; }
#startscreen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 92, 34, .07), rgba(255, 92, 34, 0) 46%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 62%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(180deg, #000 0 62%, rgba(0, 0, 0, .35) 100%);
}
.sshdr { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 clamp(16px, 3vw, 34px); border-bottom: 1px solid var(--line); }
.ssbrand { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.ssbrand img { width: 40px; height: 40px; object-fit: contain; }
.ssbrand em { color: var(--accent); font-style: normal; }
.ssbrand > span { display: none; }
.sstally { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent-soft); font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .18em; text-transform: uppercase; }
.sstally::before { content: ""; width: 5px; height: 5px; background: var(--accent); animation: tally 2.6s steps(1, end) infinite; }
.ssch { font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-2); }
.ssin { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 34rem) 264px; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(22px, 4vw, 48px) clamp(16px, 3vw, 34px); }
.ssmain { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 34rem; }
.ssh1 { font-size: clamp(40px, 5vw, 68px); font-weight: 600; font-stretch: 86%; line-height: .94; letter-spacing: -.035em; text-transform: none; color: var(--text); }
.ssh1 em { font-style: normal; color: var(--accent); }
.sssub { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; color: var(--dim); max-width: 30ch; }
#startbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; font-size: 11px; font-weight: 800; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border-radius: 2px; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); transition: background .15s var(--ease); }
#startbtn:hover { background: var(--tally-hover); }
#startbtn:active { background: var(--tally-press); }
.ssnote { font-size: 11px; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2); }
.ssguide { align-self: center; width: 100%; border-top: 1px solid var(--line-hi); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 10px 0 0 calc(clamp(24px, 4vw, 64px) / 2); margin-left: calc(-1 * clamp(24px, 4vw, 64px) / 2); }
.ssgt { font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .18em; text-transform: uppercase; color: var(--dim-2); padding-bottom: 8px; }
.ssguide ul { list-style: none; }
.ssguide li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); }
.ssguide li i { flex: none; width: 3px; height: 12px; }
.ssguide li span { margin-left: auto; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2); }
.ssfoot { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; padding: 14px clamp(16px, 3vw, 34px) 16px; border-top: 1px solid var(--line); }
.ssdesc { max-width: 78ch; font-size: 11.5px; line-height: 1.65; color: var(--dim); }
.sslinks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sslinks a { font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--dim-2); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.sslinks a:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ Sheet (tags & moods) */
#msback { position: fixed; inset: 0; z-index: 14; pointer-events: none; opacity: 0; background: rgba(0, 0, 0, .5); transition: opacity .25s; }
#msheet { position: fixed; left: 8px; right: 8px; bottom: calc(var(--sab) + var(--dk) + 8px); z-index: 12; max-height: 52dvh; overflow-y: auto; visibility: hidden; transform: translateY(calc(100% + 140px)); transition: transform .28s var(--ease), visibility .28s; padding: 10px 16px 16px; background: var(--panel-hi); border: 1px solid var(--line-hi); border-top: 1px solid var(--accent-line); border-radius: 2px; }
#msheet.on { transform: none; visibility: visible; }
#mshead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft); padding-top: 4px; }
#msclose { appearance: none; background: none; border: 0; color: var(--dim); font-size: 18px; width: 44px; height: 44px; cursor: pointer; }
#msclose:hover { color: var(--text); }
.mstitle { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase; color: var(--dim-2); }
.mstitle::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#msmood #moods { display: flex; flex-wrap: wrap; gap: 5px; }
#mstags .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
#mstags #tagadd { display: flex; }

/* ------------------------------------------------------------------ Fullscreen */
#fsexit { display: none; position: fixed; top: calc(var(--sat) + 14px); right: 14px; z-index: 10; width: 44px; height: 44px; font-size: 16px; cursor: pointer; border-radius: 2px; border: 1px solid var(--line-hi); background: rgba(10, 9, 8, .86); color: var(--text); transition: .15s; }
#fsexit:hover { border-color: var(--accent-line); color: var(--accent-soft); }
#fsbar { position: fixed; left: 50%; bottom: calc(var(--sab) + 16px); transform: translateX(-50%); z-index: 8; display: none; align-items: center; gap: 4px; padding: 7px 9px; border-radius: 3px; pointer-events: auto; background: rgba(10, 9, 8, .9); border: 1px solid var(--line-hi); touch-action: none; cursor: grab; }
#fsbar:active { cursor: grabbing; }
#fsb_drag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 2px 8px; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--accent-soft); background: rgba(10, 9, 8, .9); border: 1px solid var(--line-hi); border-bottom: 0; cursor: grab; user-select: none; pointer-events: none; }
#volfs { width: 78px; cursor: pointer; accent-color: var(--accent); pointer-events: auto; }
#fsbar .btn { width: 44px; height: 44px; }
#fsbar #fsb_next { width: 54px; height: 54px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#fsbar #fsb_next .ic { width: 22px; height: 22px; }
#fsbar .gsep { height: 20px; }
body.onfs #fsbar, body.fit #fsbar { display: flex; }
body.onfs :is(#fsbar, #fsexit), body.fit :is(#fsbar, #fsexit) { opacity: .55; transition: opacity .25s; }
body.onfs :is(#fsbar, #fsexit):hover, body.fit :is(#fsbar, #fsexit):hover, body.onfs :is(#fsbar, #fsexit):active, body.fit :is(#fsbar, #fsexit):active { opacity: 1; }
body.fsui :is(#fsbar, #fsexit) { opacity: 0 !important; pointer-events: none !important; }
body.fit #stage { inset: 0; z-index: 5; }
body.fit :is(.side, .overlay, .affw, .dtog, .top, #sideL, #sideR), body.fit::before { display: none !important; }
body.onfs .top { display: none !important; }
body.onfs #toybadge, body.fit #toybadge { top: calc(var(--sat) + 70px); right: 14px; }

/* ------------------------------------------------------------------ Camera label (#vtop) */
body:has(#startscreen[style*="flex"]) #vtop { display: none; }
#vtop { position: absolute; top: 10px; left: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 190px); pointer-events: none; }
body.onfs #vtop, body.fit #vtop { top: calc(var(--sat) + 12px); left: calc(var(--sal) + 14px); }
#vinfo { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 2px; background: rgba(9, 8, 7, .78); border: 1px solid var(--line); pointer-events: auto; }
#vinfo .unrow { justify-content: flex-start; min-width: 0; gap: 6px; }
#vinfo .uname { font-size: 13.5px; font-weight: 700; max-width: 200px; }
#vinfo #vbell { font-size: 12px; }
#vtop .vrow { flex: none; padding: 3px 8px; border-radius: 2px; background: rgba(9, 8, 7, .62); border: 1px solid var(--line); pointer-events: auto; }
#vtop .vrow .viewers { font-size: 11px; font-stretch: 84%; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
#vtop, #radarmini, #toybadge { transition: opacity .4s; }
#vtop:hover, #vtop:focus-within, #radarmini:hover, #toybadge:hover { opacity: 1; transition: opacity .15s; }

/* match tier = a stamped label, not a gradient */
.match-badge { display: inline-flex; align-items: center; flex: none; font-size: 11px; font-weight: 800; font-stretch: 78%; padding: 2px 5px; border-radius: var(--r-hair); text-transform: uppercase; letter-spacing: .14em; }
.match-bronze { border: 1px solid var(--tier-bronze); color: #d59a6b; }
.match-argent { border: 1px solid var(--tier-silver); color: #c9d3dd; }
.match-or { border: 1px solid var(--tier-gold); color: #e2c98a; }
.match-platine { border: 1px solid var(--tier-platinum); color: #efe4f3; }
body.idle .match-badge { opacity: .45; }
#stage::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: 2px; transition: border-color .3s, opacity .5s ease; }
body.idle #stage::after, body.idle #stage::before { opacity: 0; }
#stage[data-tier="bronze"]::after { border: 1px solid rgba(138, 90, 51, .55); }
#stage[data-tier="argent"]::after { border: 1px solid rgba(160, 175, 190, .55); }
#stage[data-tier="or"]::after { border: 1px solid rgba(214, 184, 110, .65); }
#stage[data-tier="platine"]::after { border: 1px solid rgba(220, 205, 230, .65); }
.affhot { border-color: var(--accent-line) !important; }
#aff2[data-tier="bronze"] { border-color: rgba(138, 90, 51, .6) !important; }
#aff2[data-tier="argent"] { border-color: rgba(160, 175, 190, .6) !important; }
#aff2[data-tier="or"] { border-color: rgba(214, 184, 110, .7) !important; }
#aff2[data-tier="platine"] { border-color: rgba(220, 205, 230, .7) !important; }
:is(#radar, #radarmini)[data-tier="bronze"] { border-color: rgba(138, 90, 51, .55) !important; }
:is(#radar, #radarmini)[data-tier="argent"] { border-color: rgba(160, 175, 190, .6) !important; }
:is(#radar, #radarmini)[data-tier="or"] { border-color: rgba(214, 184, 110, .65) !important; }
:is(#radar, #radarmini)[data-tier="platine"] { border-color: rgba(220, 205, 230, .65) !important; }
.likedrow[data-tier="bronze"] { border-color: rgba(138, 90, 51, .5); }
.likedrow[data-tier="argent"] { border-color: rgba(160, 175, 190, .5); }
.likedrow[data-tier="or"] { border-color: rgba(214, 184, 110, .6); }
.likedrow[data-tier="platine"] { border-color: rgba(220, 205, 230, .6); }

/* ------------------------------------------------------------------ Toasts */
#favtoast { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 60; opacity: 0; pointer-events: none; transition: .25s; }
#favtoast.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#favtoast a { display: inline-block; padding: 9px 14px; border-radius: 2px; background: var(--panel-hi); border: 1px solid var(--offer-line); color: var(--offer-soft); font-weight: 700; font-size: 11.5px; text-decoration: none; }
#like { position: relative; }
#like::after { content: attr(data-boost); position: absolute; top: -6px; right: -6px; display: none; align-items: center; justify-content: center; min-width: 17px; height: 15px; padding: 0 4px; font-size: 11px; font-weight: 800; font-style: normal; line-height: 1; border-radius: var(--r-hair); background: var(--accent); color: var(--on-accent); }
#like[data-boost]:not([data-boost=""])::after { display: flex; animation: lbpop .3s var(--ease); }
@keyframes lbpop { 0% { transform: scale(1.7) } 100% { transform: scale(1) } }
#pwatoast { position: fixed; left: calc(var(--wl) + (100vw - var(--wl) - var(--wr)) / 2); bottom: calc(var(--sab) + var(--dk) + 16px); transform: translateX(-50%); z-index: 12; display: none; align-items: center; gap: 10px; width: min(440px, calc(100vw - 16px)); padding: 8px; border-radius: 2px; background: var(--panel-hi); border: 1px solid var(--line-hi); border-top: 1px solid var(--accent-line); }
#pwatoast.on { display: flex; animation: pwaIn .35s var(--ease); }
@keyframes pwaIn { from { opacity: 0; transform: translateX(-50%) translateY(12px) } to { opacity: 1; transform: translateX(-50%) } }
#pwatoast img { width: 36px; height: 36px; border-radius: 2px; flex: none; }
#pwatoast .pwatx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#pwatoast b { font-size: 12.5px; font-weight: 700; }
#pwatoast i { font-style: normal; font-size: 11px; color: var(--dim-2); }
#pwago { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 2px; cursor: pointer; font-weight: 800; font-size: 11px; font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); }
#pwago:hover { background: var(--accent-soft); }
#pwax { flex: none; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; background: transparent; color: var(--dim-2); font-size: 14px; position: relative; }
#pwax::before { content: ""; position: absolute; inset: -4px; }
#pwax:hover { color: var(--text); border-color: var(--line); }
body.onfs #pwatoast, body.adon #pwatoast { display: none !important; }

/* ==================================================================
   Gadget layer stays disabled (TCG/binder, achievements, duel, asmr, cctv, blind).
   app.js keeps driving it silently; nothing below is rendered.
   ================================================================== */
#cardpanel, #cardview, #cardbtn, #carddot, #boostm, #questrow, #pwbar, #cardtoast,
#achpanel, #achbtn, #achdot, #achtoast, #rankchip, #blindbtn, #duelbtn, #duel, #duelhint,
#dpA, #dpB, #vdA, #vdB, #mtxbtn, #matrix, #mgrid, #mp1, #mp2, #mp3, #mp4, #mv1, #mv2, #mv3, #mv4,
#asmrbtn, .dkside, #giftwin, #pwembers, #fogcv, #fogbrush, #foggoal, #fogpct { display: none !important; }

/* ==================================================================
   RESPONSIVE — same breakpoints as app.js (mobMq = 767px, drawers below 1200px)
   ================================================================== */
@media (max-width: 1199px) {
  :root { --wl: 0px; --wr: 0px; --hd: 52px; --dk: 88px; }
  body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: calc(var(--sat) + var(--hd)); z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); }
  .side { display: contents; }
  .dtog { position: fixed; top: calc(var(--sat) + 4px); z-index: 9; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 18px; cursor: pointer; border-radius: 2px; background: transparent; border: 1px solid transparent; color: var(--dim); transition: .15s; }
  .dtog:hover, body.drawL #dtL, body.drawR #dtR { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-soft); }
  #dtL { left: 4px; }
  #dtR { right: 4px; }
  .top { position: fixed; top: var(--sat); left: 52px; right: 52px; height: var(--hd); z-index: 6; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 4px; border: 0; overflow: hidden; white-space: nowrap; }
  .top > * { flex: none; }
  .brandlogo .bt, .watching { display: none; }
  .brandlogo img { width: 44px; height: 44px; }
  .uname { font-size: 13.5px; max-width: 28vw; }
  .vrow .viewers { font-size: 11px; }
  .affw { top: calc(var(--sat) + 4px); right: 52px; flex-direction: row; align-items: center; }
  .aff { display: inline-flex; }
  #toybadge { top: calc(var(--sat) + var(--hd) + var(--cta) + 16px); right: var(--gap); min-height: 28px; padding: 0 8px; font-size: 11px; gap: 4px; }
  .overlay { left: 0; right: 0; }
  #losst { left: 50%; }
  .gsep { display: none; }
  .rail { position: fixed; top: calc(var(--sat) + var(--hd) + 6px); bottom: calc(var(--sab) + var(--dk) + 8px) !important; width: var(--dw); z-index: 8; flex: none; background: var(--panel); border: 1px solid var(--line-hi); visibility: hidden; transition: transform .3s var(--ease), visibility .3s; }
  #railL { left: 0; border-left: 0; transform: translateX(-104%); }
  #railR { right: 0; border-right: 0; transform: translateX(104%); }
  body.drawL #railL, body.drawR #railR { transform: none; visibility: visible; }
  .menuhead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .menuhead img { width: 44px; height: 44px; object-fit: contain; }
  .menuhead .mh-t { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.01em; }
  .menuhead em { color: var(--accent); font-style: normal; }
  .menuhead i { font-style: normal; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dim-2); }
  .menuhead .mobpool { font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); white-space: nowrap; }
  body.fit .bottom { display: none; }
  .affw { transform: translateY(3px); }
  #railad, #adhide { display: none !important; }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .poolcount { padding: 4px 8px; font-size: 11px; }
  .affw { top: calc(var(--sat) + 9px); transform: none; }
  .aff { min-height: 32px; padding: 0 14px; font-size: 11px; position: relative; }
  .aff::before { content: ""; position: absolute; inset: -6px -2px; }
  #chatwrap { position: fixed; left: 12px; right: auto; bottom: calc(var(--sab) + var(--dk) + 12px); }
  #radar, #radarmini { position: fixed; left: auto; right: 12px; bottom: calc(var(--sab) + var(--dk) + 12px); }
  #vtop { top: 14px; left: 12px; max-width: calc(100% - 200px); }
}
@media (max-width: 1199px) and (min-width: 768px) and (orientation: landscape) {
  body:not(.onfs):not(.fit) #vtop { top: calc(var(--cta) + 8px); left: 50%; transform: translateX(-50%); max-width: min(52vw, 500px); }
  body:not(.onfs):not(.fit) .top #vtop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 1199px), (max-height: 480px) and (pointer: coarse) {
  .rail { z-index: 15; }
  .railclose { display: flex; }
  body.drawL #msback, body.drawR #msback { opacity: 1; pointer-events: auto; }
  .menuhead { padding-right: 46px; }
  .rail .corner { position: sticky; bottom: 0; z-index: 1; margin: auto -16px -12px; padding: 6px 16px; background: var(--panel); border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  :root { --gap: 10px; --cta: 0px; --dk: 84px; }
  #likebox { display: none !important; } /* one-hand phone : the dock owns the band, likes live in the rail */
  .poolcount, .brandlogo, #ulink { display: none; }
  .top { right: 52px; gap: 6px; }
  .uname { max-width: 32vw; font-size: 13.5px; }
  .affw { top: calc(var(--sat) + 9px); left: 52px; right: 52px; height: 34px; justify-content: center; padding: 0; background: transparent; border-bottom: 0; }
  .aff { flex: 1; justify-content: center; min-height: 26px; font-size: 11px; letter-spacing: .16em; padding: 0 10px; position: relative; }
  .aff .affview { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 6px; background: rgba(0, 0, 0, .30); color: #fff; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
  .aff::before { content: ""; position: absolute; inset: -6px -2px; }
  .controls { gap: 3px; padding: 6px 8px; }
  .btn { width: 44px; height: 44px; }
  .btn.small, .btn.mtool { width: 44px; height: 44px; }
  .btn.big { width: 58px; height: 58px; }
  #next { min-width: 58px; padding: 0; }
  #next::after { display: none; }
  #vol, #keys, #mute, #fs, #fwd, #mfs { display: none !important; }
  .btn.mtool#mmute, .btn.mtool#mtags { display: flex; }
  #like { order: 1; } #dislike { order: 2; } #next { order: 3; } #blockbtn { order: 4; } #mtags { order: 5; } #mmute { order: 6; }
  #chatwrap { display: none; }
  #chatbtn { display: block; }
  #losst { top: calc(var(--sat) + var(--hd) + var(--cta) + 8px); padding: 6px 6px 6px 8px; gap: 8px; }
  #lossimg { width: 38px; height: 38px; }
  .losstx b { font-size: 12.5px; max-width: 34vw; }
  .losstx i { font-size: 11px; }
  .rail { left: 8px !important; right: 8px; top: auto; width: auto; bottom: calc(var(--sab) + 8px) !important; max-height: 86dvh; border-radius: 2px !important; transform: translateY(calc(100% + 140px)) !important; }
  #railL { height: 86dvh; }
  body.drawL #railL, body.drawR #railR { transform: none !important; }
  .moretools { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .moretools .btn { width: 44px; height: 44px; }
  #vol2 { flex: 1; min-width: 0; height: 44px; }
  #railR .inner > .railtitle:not(#linkstitle) { display: none; }
  #railad img { max-height: none; width: min(100%, 280px); margin: 0 auto; }
  #railR { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .tag, .mood { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
  .likedrow { min-height: 44px; }
  #tagadd input { min-height: 44px; }
  #tagadd button { min-height: 44px; min-width: 52px; }
  .corner { font-size: 11px; }
  .corner a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  #adshbtns a { min-height: 44px; }
  #adhide, #radarreroll { min-height: 36px; }
  body.fit .affw { display: none; }
  #radar, #radarmini { position: fixed; left: auto; right: 8px; bottom: calc(var(--sab) + var(--dk) + 10px); }
  #radar img { width: 96px; height: 54px; }
  #radar .rt { max-width: 130px; }
  #vtop { top: 14px; left: 8px; max-width: calc(100vw - 110px); }
  #vinfo { padding: 3px 7px 3px 4px; gap: 5px; min-width: 0; flex: 1; }
  #vinfo .uname { font-size: 12.5px; max-width: none; flex: 1; min-width: 0; }
  #vinfo .plat { padding: 3px 6px; font-size: 11px; letter-spacing: .08em; }
  #vtop .vrow { padding: 3px 6px; flex: none; }
  body.onfs #vtop, body.fit #vtop { top: 64px; }
  #pwatoast { left: 50%; bottom: calc(var(--sab) + var(--dk) + 100px); }
  .aff .affview { display: none !important; }
  #chatwrap { display: none !important; }
  #chatbtn { display: block !important; position: fixed; left: calc(var(--sal) + 8px); bottom: calc(var(--sab) + var(--dk) + 10px) !important; z-index: 7; min-width: 62px; }
  .dtog, .affw, #vtop, #toybadge, #chatbtn, #radar, #radarmini { transition: opacity .35s ease !important; transition-delay: 0s !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) :is(#toybadge, #radarmini) { opacity: 0 !important; pointer-events: none !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) :is(#vtop, .dtog) { opacity: .45 !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) #chatbtn { opacity: .4 !important; }
  #vtop .vrow .viewers { font-size: 11px; color: var(--dim); }

  /* sign-on slate, one column */
  .sshdr { height: 46px; padding: 0 12px; }
  .ssbrand span { display: none; }
  .ssin { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 18px 14px 16px; }
  .ssmain { display: contents; }
  .ssh1 { order: 1; font-size: clamp(40px, 12vw, 52px); }
  .sssub { order: 2; font-size: 15px; }
  .ssguide { order: 3; width: 100%; margin-top: auto; border: 0; border-top: 1px solid var(--line-hi); padding-left: 0; margin-left: 0; }
  #startbtn { order: 4; width: 100%; justify-content: center; min-height: 52px; padding: 0 22px; letter-spacing: .18em; }
  .ssnote { order: 5; }
  .ssguide { padding-top: 8px; }
  .ssguide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .ssguide li { padding: 7px 0; font-size: 11.5px; }
  .ssfoot { padding: 10px 14px 12px; gap: 10px; }
  .ssdesc { font-size: 11px; line-height: 1.55; }
  .sslinks { gap: 4px 12px; }
  #msheet { max-height: 66dvh; }
  #mstags #tagadd { position: sticky; bottom: -2px; z-index: 1; background: var(--panel-hi); padding: 8px 0 2px; }
}
/* short phones: the slate must fit without scrolling, the fact line is the first thing to go */
@media (max-width: 767px) and (max-height: 700px) {
  .ssdesc { display: none; }
  .ssin { gap: 10px; padding: 12px 14px; }
  .ssfoot { padding: 8px 14px 10px; border-top: 0; }
  .ssbrand img { width: 34px; height: 34px; }
  .ssh1 { font-size: 40px; }
  .ssguide ul { gap: 0 12px; }
  .ssguide li { padding: 6px 0; }
  #startbtn { min-height: 48px; }
}
@media (max-width: 560px) {
  .controls { gap: 2px; padding: 5px 6px; }
  .btn, .btn.small, .btn.mtool { width: 44px; height: 44px; }
  .btn.big { width: 54px; height: 54px; }
  #next { min-width: 54px; }
  .uname { max-width: 28vw; }
}
@media (max-width: 767px), (max-height: 480px) and (pointer: coarse) {
  #radar { flex-direction: column; align-items: stretch; gap: 5px; padding: 6px; border-radius: 2px; width: 152px; max-width: 42vw; }
  #radar .rt { order: -1; flex-direction: row; align-items: center; gap: 4px; max-width: none; padding: 0; }
  #radar .rt u, #radar .rt i, #radar .rarrow { display: none; }
  #radar .rt b { flex: 1; min-width: 0; font-size: 12px; }
  #radar img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  #radarreroll { flex: none; order: -1; margin: 0; min-width: 40px; min-height: 36px; font-size: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #radarreroll::after { content: "\21BB"; font-size: 16px; letter-spacing: 0; }
  #radarmin { top: -10px; right: -10px; width: 26px; height: 26px; font-size: 14px; line-height: 24px; background: var(--panel-hi); color: var(--text); }
  #railL > .railtitle, #railL > #tags, #railL > #tagadd, #railL > #tagmsg, #railL > #tagexp { display: none !important; }
  #fsb_prev, #fsb_fwd, #volfs { display: none !important; } /* barre FS tactile : 5 touches utiles, elle doit tenir dans 320px comme dans 390px */
}
@media (max-width: 1199px), (pointer: coarse) {
  #prev, #fwd { display: none !important; }
}
/* short touch landscape: video nearly full-bleed, keys in a column */
@media (max-height: 480px) and (pointer: coarse) {
  :root { --hd: 0px; --cta: 0px; --dk: 0px; --gap: 8px; }
  body::before { display: none; }
  #stage { inset: 0 0 42px 0; }
  .top { left: 56px; right: auto; top: calc(var(--sat) + 4px); height: 42px; max-width: 46%; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 0 10px; }
  .poolcount, .brandlogo, #ulink { display: none; }
  .dtog { background: var(--panel); border-color: var(--line); }
  .affw { left: 0; right: 0; top: auto; bottom: 0; height: 42px; flex-direction: row; justify-content: center; align-items: center; padding: 0 8px; background: var(--bg); border-top: 1px solid var(--line); transform: none; }
  .aff { flex: none; min-height: 30px; }
  .overlay { left: auto; right: calc(var(--sar) + 8px); top: 56px; bottom: 50px; height: auto; width: auto; }
  .bottom { height: 100%; padding: 0; }
  .controls { flex-direction: column; gap: 3px; padding: 6px; border-radius: 3px; }
  .btn, .btn.small, .btn.mtool { width: 44px; height: 44px; }
  .btn.big { width: 50px; height: 50px; }
  #next { min-width: 44px; padding: 0; }
  #next::after { display: none; }
  #vol, #keys, #mute, #fs, #fwd, #mfs { display: none !important; }
  .btn.mtool#mmute, .btn.mtool#mtags { display: flex; }
  #like { order: 1; } #dislike { order: 2; } #next { order: 3; } #blockbtn { order: 4; } #mtags { order: 5; } #mmute { order: 6; }
  #vtop { left: 56px; }
  #chatwrap { display: none; }
  #chatbtn { display: block; }
  #radar, #radarmini { right: auto; left: 8px; bottom: 60px; }
  body.onfs #dtL, body.fit #dtL { top: auto; bottom: 112px; left: 8px; }
  body.onfs #vtop, body.fit #vtop { left: 18px; }
  #toybadge { top: calc(var(--sat) + 56px) !important; right: 72px !important; }
  #fsbar { left: auto; right: 8px; bottom: 50%; transform: translateY(50%); flex-direction: column; gap: 4px; padding: 6px; max-height: calc(100dvh - 24px); overflow: hidden; }
  #fsbar .btn { width: 44px; height: 44px; }
  #fsbar #fsb_next { width: 50px; height: 50px; }
  .rail { left: 8px !important; right: 84px; top: calc(var(--sat) + 56px); bottom: 8px !important; width: auto; max-height: none; border: 1px solid var(--line-hi); border-radius: 2px !important; transform: translateY(calc(100% + 80px)) !important; }
  body.drawL #railL, body.drawR #railR { transform: none !important; }
  .moretools { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  #msheet { left: 8px; right: 84px; bottom: 8px; max-height: calc(100dvh - 16px); }
  #losst { top: calc(var(--sat) + 56px); }
  #pwatoast { left: 50%; bottom: 12px; width: min(440px, calc(100vw - 180px)); }
  .top, .affw, .overlay, .dtog, #toybadge, #chatbtn { transition: opacity .35s; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) :is(.top, .affw, .overlay, .dtog, #toybadge, #chatbtn, #radar, #radarmini) { opacity: 0; pointer-events: none; }
  .top { display: none !important; }
  #dtL { top: auto !important; bottom: 112px; left: 8px; }
  #vtop, body.onfs #vtop, body.fit #vtop { top: calc(var(--sat) + 12px) !important; left: calc(var(--sal) + 12px) !important; max-width: calc(100vw - 340px); transform: none !important; }
  #vtop .vrow { display: flex !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) #chatbtn { opacity: .35; pointer-events: auto; }
  .aff .affview { display: none !important; }
  #toybadge { top: auto !important; bottom: calc(var(--sab) + 50px); left: 50%; right: auto !important; transform: translateX(-50%); }
  #vtop .vrow { transition: opacity .4s; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) #vtop .vrow { opacity: 0; pointer-events: none; }
  .affw, .overlay, .dtog, #toybadge, #chatbtn, #radar, #radarmini, #vtop, #vtop .vrow, #fsexit { transition: opacity .35s ease !important; transition-delay: 0s !important; }
  body:not(.idle) :is(#vtop, #radarmini, #toybadge, #vtop .vrow) { opacity: 1; pointer-events: auto; }
  body:not(.idle) #fsexit { opacity: 1 !important; pointer-events: auto !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) :is(.affw, .overlay, .dtog, #toybadge, #radar, #radarmini, #vtop .vrow, #fsexit) { opacity: 0 !important; pointer-events: none !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) #vtop { opacity: .45 !important; }
  body.idle:not(.msheet):not(.drawL):not(.drawR) #chatbtn { opacity: .35 !important; pointer-events: auto !important; }
  /* slate in landscape: the wordmark gets the whole width, the network list folds away */
  .sshdr { display: none; }
  .ssin { grid-template-columns: 1fr; padding: 14px 20px; }
  .ssguide { display: none; }
  .ssh1 { font-size: clamp(40px, 6vw, 52px); }
  .sssub { display: none; }
  .ssfoot { padding: 8px 20px; }
  .ssdesc { display: none; }
}
@media (min-width: 1200px) and (max-height: 640px) {
  :root { --dk: 80px; }
  .btn.big { width: 56px; height: 56px; }
  .top { padding-top: 12px; gap: 4px; }
  .brandlogo .tagline, .watching { display: none; }
}
@media (min-width: 1440px) {
  :root { --wl: 256px; --wr: 320px; --gap: 16px; }
}
@media (pointer: fine) {
  body.idle:not(.msheet):not(.drawL):not(.drawR) :is(#vtop, #radarmini, #toybadge) { opacity: .45; }
}
body:not(.idle) #chatbtn { opacity: 1; color: var(--on-accent); background: var(--accent); border-color: var(--accent); transition: opacity .2s, background .2s, color .2s; }
@media (pointer: coarse) {
  #vinfo .plat::before { content: ""; position: absolute; inset: -11px -4px; }
  #vinfo .uname { padding: 13px 0; margin: -13px 0; }
  #toybadge::before { content: ""; position: absolute; inset: -8px -2px; }
  #fakesend { position: relative; }
  #fakesend::before { content: ""; position: absolute; inset: -6px -4px; }
  #fakechat { min-height: 44px; }
  .railclose { width: 44px; height: 44px; }
  .mood, .tag { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #tagin, #taggo, #tagadd button { min-height: 44px; }
  #taggo, #tagadd button { min-width: 44px; }
  .corner a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .earn { min-height: 44px; }
  #keys, #vol { display: none !important; }
}
/* fullscreen / fit: no backdrop filtering to recompute per frame */
body.onfs *, body.fit * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* teaser "next cam ready" retire : le bouton NEXT du dock suffit (le prefetch reste actif en coulisses) */
#radar, #radarmini { display: none !important; }

/* recent likes : etagere flottante au-dessus du dock (bas droite), visible quelques secondes puis elle s efface */
#likebox { position: absolute; right: 10px; bottom: calc(100% + 8px); display: flex; flex-direction: row; align-items: center; gap: 6px; max-width: min(calc(100% - 20px), 620px); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
body.vhover #likebox, #likebox:hover, body.likeflash #likebox { opacity: 1; transform: none; pointer-events: auto; }
#likebox .railtitle { display: none; } /* la tuile coeur sert de titre dans l etagere */
#likebox .lkhead { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 80px; border-radius: 2px; background: rgba(10, 9, 8, .72); border: 1px solid var(--line); }
#likebox .lkhead .ic { width: 16px; height: 16px; color: var(--accent-soft); fill: var(--accent-soft); stroke: var(--accent-soft); }
#likebox .lkarrow { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 80px; border-radius: 2px; border: 1px solid var(--line); background: rgba(10, 9, 8, .72); color: var(--text); cursor: pointer; visibility: hidden; }
#likebox.overflow .lkarrow { visibility: visible; }
#likebox .lkarrow:disabled { color: var(--dim-2); opacity: .55; cursor: default; }
#likebox .lkarrow:hover:not(:disabled) { border-color: var(--line-hi); }
#likebox .lkarrow .ic { width: 15px; height: 15px; }
#likebox #likes { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: 0 1 400px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#likebox #likes::-webkit-scrollbar { display: none; }
#likebox .likedrow, #likebox .likedrow.hasimg { position: relative; flex: none; display: block; gap: 0; padding: 0; width: 60px; height: 80px; min-height: 0; overflow: hidden; border: 0; border-radius: 2px; background: none; }
#likebox .likedrow .nm, #likebox .likedrow .lsite, #likebox .likedrow .lmeta, #likebox .likedrow .favx { display: none; }
#likebox .likedrow img:not(.lthumb) { display: none; } /* pas la favicon du site dans la vignette */
#likebox .lthumb { display: block; width: 60px; height: 80px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); background: var(--panel-hi); transition: border-color .12s, transform .12s; } /* fond opaque : une vignette qui n a pas charge reste une tuile, pas un trou */
#likebox .likedrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 1px 1px; z-index: 1; } /* liseré plateforme, visible meme sur un poster sombre */
#likebox .likedrow:hover .lthumb { border-color: var(--accent-line); transform: translateY(-1px); }
#likebox .likedrow.cur .lthumb { border-color: var(--accent); }
#likebox .likedrow:not(.hasimg)::after { content: "\2665"; display: flex; align-items: center; justify-content: center; width: 60px; height: 80px; border: 1px solid var(--line); border-radius: 2px; color: var(--dim-2); font-size: 18px; }

/* faux chat : masque au repos, revele au survol de la video (ou au focus clavier) */
#chatwrap { opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
body.vhover #chatwrap, #chatwrap:hover, #chatwrap:focus-within { opacity: 1; pointer-events: auto; }
@media (max-width: 767px), (max-height: 480px) and (pointer: coarse) { #chatwrap { opacity: 1; pointer-events: auto; } }

/* chip modele (plateforme / match / nom / partage / viewers) : masque au repos, revele au survol de la video */
#stage > #vtop { opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
body.vhover #stage > #vtop, #stage > #vtop:hover, #stage > #vtop:focus-within { opacity: 1; pointer-events: auto; }
body.onfs #stage > #vtop, body.fit #stage > #vtop { opacity: 1; pointer-events: auto; } /* plein ecran : toujours visible */
@media (max-width: 767px), (max-height: 480px) and (pointer: coarse) { #stage > #vtop { opacity: 1; pointer-events: auto; } }

/* tactile : pas de survol, donc les overlays restent visibles */
@media (max-width: 767px), (max-height: 480px) and (pointer: coarse) { #likebox { opacity: 1; transform: none; pointer-events: auto; } }

/* le premier bouton du rail droit ne colle plus au titre */
#linkstitle { margin-bottom: 10px; }
#railR #aff2 { margin-top: 2px; }

/* chip modele : plus de pseudo, plus de viewers, plus de cloche telegram */
#vinfo #uname, #vinfo #uname + *, #vtop #vbell, #vtop .vrow { display: none !important; }

/* footer d'accueil : bloc categories (liens internes SEO) */
.sscat { display: flex; flex-direction: column; gap: 4px; }
.sscat h2 { margin: 0; }

/* CTA room : still 16:9 (la room telle qu'elle est) + enseigne verte avec cle de sortie */
.outlink.main .th { grid-area: shot; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 22%; background: var(--on-offer); border: 0; border-bottom: 1px solid rgba(4, 18, 11, .30); }
.outlink.main .th.alt { object-fit: none; padding: 0; background: rgba(4, 18, 11, .18); } /* favicon a sa taille native : jamais etire */
.outlink.main .t { grid-area: lbl; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 0 11px 12px; }
.outlink.main .t b { font-size: 18px; font-weight: 800; font-stretch: 80%; letter-spacing: .05em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outlink.main .t i { font-style: normal; font-size: 11px; font-weight: 800; font-stretch: 78%; letter-spacing: .13em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outlink.main .t em { font-style: normal; }
.outlink.main .ic { grid-area: go; align-self: center; width: 32px; height: 32px; margin: 0 10px; padding: 9px; border-radius: 2px; stroke-width: 2.6; background: var(--on-offer); color: var(--offer-soft); transition: transform .12s var(--ease); }
.outlink.main:hover .ic { transform: translate(1px, -1px); }
.outlink.main:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-height: 480px) { .outlink.main .th { max-height: 96px; } }

/* bulle de confirmation de copie, ancree sur le bouton */
.copybub { position: fixed; z-index: 60; transform: translate(-50%, -4px); padding: 6px 10px; border: 1px solid var(--line-hi); border-radius: 2px; background: var(--panel-hi); color: var(--text); font-size: 10.5px; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s var(--ease), transform .12s var(--ease); }
.copybub.on { opacity: 1; transform: translate(-50%, -9px); }