/* ============================================================
   SUBDERMAL — base.css
   Struktur & Layout. Alles Visuelle läuft über CSS-Variablen,
   die in themes.css pro Design gesetzt werden. Diese Datei
   ändert sich selten — neue Designs gehören in themes.css.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  background-image:var(--bg-image,none);
  background-size:var(--bg-size,auto);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
::selection{ background:var(--accent); color:var(--on-accent); }

#grain{ position:fixed; inset:0; z-index:2; pointer-events:none; display:none; }

.wrap{
  position:relative; z-index:1;
  max-width:560px; margin:0 auto;
  min-height:100dvh; display:flex; flex-direction:column;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(22px + env(safe-area-inset-right))
    calc(130px + env(safe-area-inset-bottom))
    calc(22px + env(safe-area-inset-left));
}

/* ---------- header ---------- */
header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.brand{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:var(--brand-weight,400); }
.beat{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;
  animation:beat 2s ease-out infinite; }
@keyframes beat{ 0%,100%{box-shadow:0 0 0 0 var(--accent-fade)} 70%{box-shadow:0 0 0 9px transparent} }
.admin-btn{ appearance:none; background:var(--btn-bg,transparent); border:var(--border-w) solid var(--line);
  color:var(--ink); width:44px; height:44px; border-radius:var(--radius); font-size:17px; cursor:pointer;
  flex:none; font-family:inherit; display:grid; place-items:center; box-shadow:var(--shadow-sm,none);
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.admin-btn:hover,.admin-btn:focus-visible{ border-color:var(--accent); }

/* ---------- signature ---------- */
.pulse{ display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.sig-core{ position:relative; width:18px; height:18px; flex:none; }
.sig-core-glow{ position:absolute; inset:50% auto auto 50%; width:56px; height:56px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, var(--accent-fade), transparent 65%);
  animation:breathe 3.6s ease-in-out infinite; }
.sig-dot{ position:absolute; inset:50% auto auto 50%; width:9px; height:9px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--accent); }
@keyframes breathe{ 0%,100%{transform:translate(-50%,-50%) scale(.7); opacity:.5} 50%{transform:translate(-50%,-50%) scale(1.05); opacity:.95} }
.sig-badge{ display:none; }
.sig-text{ font-size:14px; color:var(--muted); letter-spacing:var(--sig-spacing,0); text-transform:var(--sig-transform,none); }
.sig-text b{ font-weight:inherit; color:var(--accent); }
.rule{ height:1px; background:var(--line); margin:0 0 24px; display:var(--rule-display,block); }

/* ---------- board / modules ---------- */
main{ flex:1; }
.eyebrow{ display:inline-block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 16px; }
.block{ margin:0 0 var(--block-gap,34px); }
.hero h1{ font-family:var(--font-display); font-weight:var(--display-weight,500);
  font-size:clamp(40px,12vw,68px); line-height:1.02; letter-spacing:var(--display-spacing,-.02em);
  margin:0 0 18px; color:var(--ink); text-transform:var(--display-transform,none); }
.hero h1 .glitch{ color:var(--accent); font-style:var(--glitch-style,italic); font-weight:var(--glitch-weight,400); }
.hero p{ color:var(--muted); margin:0 0 8px; max-width:46ch; font-size:17px; }
.card-block{ border:var(--card-border-w,var(--border-w)) solid var(--card-border); border-radius:var(--radius-lg);
  padding:24px; background:var(--card-bg); box-shadow:var(--shadow,none); }
.card-block h2{ font-family:var(--font-display); font-weight:var(--display-weight,500); font-size:28px;
  line-height:1.1; margin:0 0 8px; letter-spacing:-.01em; text-transform:var(--display-transform,none); }
.card-block h2 .glitch{ color:var(--accent); font-style:var(--glitch-style,italic); font-weight:var(--glitch-weight,400); }
.muted{ color:var(--muted); }
.sub{ color:var(--muted); font-size:15px; margin:3px 0; }

/* buttons */
.btn{ appearance:none; cursor:pointer; font-family:var(--font-body); font-size:14px; font-weight:var(--btn-weight,500);
  border-radius:999px; padding:12px 20px; border:var(--border-w) solid var(--line);
  background:var(--btn-bg,var(--card-bg)); color:var(--ink); text-decoration:none; display:inline-block;
  box-shadow:var(--shadow-sm,none); transition:transform .12s, box-shadow .2s, border-color .2s, background .2s; }
.btn:hover{ transform:translateY(-1px); border-color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.btn.block-full{ display:block; width:100%; text-align:center; }
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* dicht meter */
.meter{ height:var(--meter-h,16px); border-radius:999px; border:var(--border-w) solid var(--line);
  overflow:hidden; background:var(--meter-bg,var(--card-bg)); margin:16px 0 12px; box-shadow:var(--shadow-sm,none); }
.meter > i{ display:block; height:100%; width:0; background:var(--meter-fill);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.meter-label{ font-family:var(--font-display); font-size:32px; font-weight:var(--display-weight,500);
  font-style:var(--glitch-style,italic); color:var(--accent); line-height:1.08; text-transform:var(--display-transform,none); }
.meter-num{ color:var(--faint); font-size:13px; }

/* vibe */
.vibe-out{ text-align:center; padding:10px 0 0; }
.vibe-spruch{ font-family:var(--font-display); font-weight:var(--display-weight,500); font-size:28px;
  line-height:1.15; margin:10px 0 6px; font-style:var(--glitch-style,italic); text-transform:var(--display-transform,none); }
.vibe-score{ color:var(--faint); font-size:13px; letter-spacing:.06em; }

/* links */
.linkrow{ display:flex; flex-direction:column; gap:10px; }

/* guestbook */
.gb-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.gb-list{ margin:20px 0 0; display:flex; flex-direction:column; gap:14px; }
.gb-item{ border-top:1px solid var(--line); padding-top:12px; }
.gb-meta{ color:var(--accent2,var(--accent)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.gb-msg{ margin:4px 0 0; font-size:16px; }

input,textarea,select{ font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--input-bg,var(--card-bg)); border:var(--border-w) solid var(--line);
  border-radius:var(--radius); padding:12px 14px; width:100%; resize:vertical; }
input::placeholder,textarea::placeholder{ color:var(--faint); }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-fade); }
label.fld{ display:block; margin:0 0 14px; }
label.fld > span{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 6px; }

/* footer */
footer{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); }

/* ---------- boot ---------- */
#boot{ position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--boot-bg,var(--bg)); color:var(--boot-fg,var(--accent));
  font-family:var(--boot-font,var(--font-display)); font-size:22px; text-align:center; padding:0 24px;
  transition:opacity .5s ease; }
#boot.gone{ opacity:0; pointer-events:none; }

/* ---------- toast ---------- */
#toast{ position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px); z-index:70;
  background:var(--toast-bg,var(--ink)); color:var(--toast-fg,var(--bg)); padding:11px 20px;
  border-radius:999px; font-size:13px; font-weight:600; opacity:0; pointer-events:none;
  border:var(--toast-border,none); box-shadow:var(--shadow,none);
  transition:opacity .3s, transform .3s; max-width:88vw; text-align:center; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- tamagotchi ---------- */
#tama{ position:fixed; z-index:50; right:calc(16px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom)); width:110px;
  display:flex; flex-direction:column; align-items:center; gap:7px; }
#tama.hidden{ display:none; }
.tama-bubble{ background:var(--card-bg); border:var(--border-w) solid var(--line); color:var(--ink);
  border-radius:var(--radius-lg); padding:9px 13px; font-size:12px; line-height:1.4;
  max-width:210px; min-width:96px; text-align:center; box-shadow:var(--shadow-sm,none);
  font-family:var(--bubble-font,inherit); font-style:var(--bubble-style,normal);
  position:relative; opacity:0; transform:translateY(4px);
  transition:opacity .25s, transform .25s; pointer-events:none; }
.tama-bubble.show{ opacity:1; transform:translateY(0); }
.tama-bubble::after{ content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--line); }
.tama-body{ cursor:grab; width:88px; height:88px; touch-action:none; user-select:none; -webkit-user-select:none; }
.tama-body.grabbed{ cursor:grabbing; z-index:60; filter:drop-shadow(0 9px 11px rgba(0,0,0,.28)); }
.tama-bar{ width:78px; height:8px; border-radius:999px; background:var(--meter-bg,var(--card-bg));
  overflow:hidden; border:var(--border-w) solid var(--line); }
.tama-bar > i{ display:block; height:100%; transition:width .5s, background .5s; }
.tama-feed{ appearance:none; cursor:pointer; border:var(--border-w) solid var(--line); background:var(--btn-bg,var(--card-bg));
  color:var(--accent); font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.06em; border-radius:999px; padding:6px 14px; box-shadow:var(--shadow-sm,none); }
.tama-feed:disabled{ opacity:.4; cursor:default; }
.tama-name{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.tama-body svg{ animation:bob 3s ease-in-out infinite; }
/* Reaktions-Juice */
@keyframes tamahop{ 0%,100%{transform:translateY(0)} 35%{transform:translateY(-13px)} 60%{transform:translateY(0)} }
.tama-body.hop svg{ animation:tamahop .6s ease; }
@keyframes tamashake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
.tama-body.shake svg{ animation:bob 3s ease-in-out infinite, tamashake .45s ease-in-out infinite; }
.tama-particle{ position:absolute; bottom:78px; font-size:14px; pointer-events:none;
  animation:floatUp 1.2s ease-out forwards; }
@keyframes floatUp{ 0%{opacity:0; transform:translate(0,0) scale(.6) rotate(0)} 20%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx,0),-52px) scale(1.15) rotate(var(--rot,0))} }
/* Konfetti */
.tama-confetti{ position:absolute; bottom:74px; width:7px; height:11px; border-radius:2px;
  pointer-events:none; opacity:0; animation:confettiFall 1.2s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confettiFall{ 0%{opacity:0; transform:translate(0,0) rotate(0)} 12%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx,0),64px) rotate(var(--spin,360deg))} }
.tama-mess{ position:absolute; bottom:70px; left:6px; font-size:17px; pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* Pflege */
.tama-actions{ display:flex; gap:6px; }
.tama-feed.alt{ background:var(--accent); color:var(--on-accent); padding:6px 10px; }
/* Mini-Spiel */
.mg{ display:flex; flex-direction:column; gap:6px; min-width:120px; }
.mg-track{ position:relative; height:12px; border-radius:999px; overflow:hidden;
  background:var(--meter-bg,rgba(0,0,0,.2)); border:1px solid var(--line); }
.mg-zone{ position:absolute; top:0; bottom:0; left:40%; width:22%;
  background:var(--accent2,var(--accent)); opacity:.55; }
.mg-marker{ position:absolute; top:-2px; width:4px; height:16px; border-radius:2px;
  background:var(--accent); transform:translateX(-50%); }
.mg-hint{ font-size:10px; color:var(--muted); text-align:center; }
/* Sound-Button */
.tama-actions{ flex-wrap:wrap; justify-content:center; }
.tama-icon{ appearance:none; cursor:pointer; border:var(--border-w) solid var(--line);
  background:var(--btn-bg,var(--card-bg)); color:var(--ink); width:30px; height:30px;
  border-radius:999px; font-size:12px; line-height:1; padding:0; display:grid; place-items:center; }
/* Streicheln + Stats */
@keyframes purr{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-1.5px)} }
.tama-body.purr svg{ animation:bob 3s ease-in-out infinite, purr .16s ease-in-out infinite; }
.tama-stats{ font-size:10.5px; line-height:1.55; text-align:left; }
.tama-stats b{ color:var(--accent); }

/* ---------- tamagotchi · extra juice ---------- */
.tama-body svg{ transform-box:fill-box; will-change:transform; }
/* Blinzeln */
.tama-body .eyes{ transform-box:fill-box; transform-origin:center; }
.tama-body .eyes.blink{ animation:tamablink .2s ease; }
@keyframes tamablink{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.1)} }
/* Ohren-Wackeln */
.tama-body .ears{ transform-box:fill-box; transform-origin:center bottom; }
.tama-body.wiggle .ears{ animation:earwiggle .6s ease-in-out; }
@keyframes earwiggle{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 75%{transform:rotate(9deg)} }
.tama-body.wiggle svg{ animation:bob 3s ease-in-out infinite; }
/* Squash beim Antippen */
@keyframes squash{ 0%{transform:scale(1,1)} 30%{transform:scale(1.18,.82)} 60%{transform:scale(.92,1.1)} 100%{transform:scale(1,1)} }
.tama-body.squash svg{ animation:squash .34s ease-out; transform-origin:center bottom; }
/* Kau-Animation beim Füttern */
@keyframes chomp{ 0%,100%{transform:translateY(0) scale(1,1)} 40%{transform:translateY(2px) scale(1.06,.9)} 70%{transform:translateY(-2px) scale(.97,1.05)} }
.tama-body.chomp svg{ animation:chomp .22s ease-in-out 2; transform-origin:center bottom; }
/* Salto beim Gewinnen */
@keyframes tamaspin{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.12)} 100%{transform:rotate(360deg) scale(1)} }
.tama-body.spin svg{ animation:tamaspin .7s cubic-bezier(.3,1.4,.5,1); transform-origin:center }
/* Schwindel beim Verlieren */
@keyframes dizzy{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 50%{transform:rotate(10deg)} 80%{transform:rotate(-6deg)} }
.tama-body.dizzy svg{ animation:dizzy .6s ease-in-out; transform-origin:center }
/* Level-Up: Regenbogen-Glow + Hüpfer */
@keyframes levelpop{ 0%{transform:translateY(0) scale(1)} 25%{transform:translateY(-16px) scale(1.18)}
  55%{transform:translateY(0) scale(.95)} 75%{transform:translateY(-6px) scale(1.04)} 100%{transform:translateY(0) scale(1)} }
@keyframes rainbowglow{ 0%{filter:drop-shadow(0 0 0 transparent)}
  25%{filter:drop-shadow(0 0 9px #FF2E88)} 50%{filter:drop-shadow(0 0 9px #26FFE6)}
  75%{filter:drop-shadow(0 0 9px #FFC93A)} 100%{filter:drop-shadow(0 0 0 transparent)} }
.tama-body.levelup svg{ animation:levelpop 1.1s ease, rainbowglow 1.1s ease; transform-origin:center bottom; }
@media (prefers-reduced-motion:reduce){
  .tama-body svg, .tama-body.hop svg, .tama-body.shake svg, .tama-body.purr svg,
  .tama-body.spin svg, .tama-body.dizzy svg, .tama-body.squash svg, .tama-body.chomp svg,
  .tama-body.levelup svg, .tama-body.wiggle .ears, .tama-body .eyes.blink{ animation:none !important; }
}

/* ---------- admin sheet ---------- */
#scrim{ position:fixed; inset:0; z-index:80; background:rgba(10,8,8,.45);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s; }
#scrim.show{ opacity:1; pointer-events:auto; }
#sheet{ position:fixed; left:0; right:0; bottom:0; z-index:81; background:var(--sheet-bg,var(--bg));
  border-top:var(--border-w) solid var(--line); border-radius:24px 24px 0 0; max-width:560px; margin:0 auto;
  max-height:92dvh; overflow-y:auto; padding:18px 20px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(101%); transition:transform .42s cubic-bezier(.2,.8,.2,1); box-shadow:var(--shadow,none); }
#sheet.show{ transform:translateY(0); }
.sheet-grip{ width:44px; height:4px; border-radius:999px; background:var(--line); margin:0 auto 16px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-head h3{ font-family:var(--font-display); font-weight:var(--display-weight,500); font-size:24px; margin:0;
  text-transform:var(--display-transform,none); }
.section{ border-top:1px solid var(--line); padding:18px 0; }
.section > h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent2,var(--accent));
  font-weight:600; margin:0 0 14px; }
/* tabs */
.tabs{ display:flex; gap:6px; overflow-x:auto; margin:0 0 18px; padding-bottom:4px;
  scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ appearance:none; cursor:pointer; flex:none; white-space:nowrap; font-family:var(--font-body);
  font-size:13px; font-weight:600; color:var(--muted); background:transparent;
  border:var(--border-w) solid transparent; border-radius:999px; padding:8px 14px; transition:.12s; }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.tabpanel{ min-height:120px; }

/* kompakter Theme-Wähler mit Swatch */
.theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.theme-card{ display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  border:var(--border-w) solid var(--line); border-radius:var(--radius); padding:9px 11px;
  background:var(--card-bg); font-family:var(--font-body); color:var(--ink); transition:.12s; }
.theme-card .sw{ flex:none; width:26px; height:26px; border-radius:50%; border:2px solid;
  display:grid; place-items:center; }
.theme-card .sw i{ width:11px; height:11px; border-radius:50%; }
.theme-card .tc-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.theme-card .tc-txt b{ font-size:13px; }
.theme-card .tc-txt small{ color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-card.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-fade); }
@media (max-width:380px){ .theme-grid{ grid-template-columns:1fr; } }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ appearance:none; cursor:pointer; border:var(--border-w) solid var(--line); background:var(--card-bg);
  color:var(--ink); font-family:var(--font-body); font-size:13px; font-weight:500;
  border-radius:999px; padding:8px 15px; transition:.12s; box-shadow:var(--shadow-sm,none); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.chip:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.active-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.active-mod{ border:var(--border-w) solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card-bg); box-shadow:var(--shadow-sm,none); }
.active-mod > summary{ list-style:none; cursor:pointer; padding:13px 16px; display:flex; align-items:center; gap:10px; }
.active-mod > summary::-webkit-details-marker{ display:none; }
.active-mod .ord{ display:flex; gap:5px; margin-left:auto; }
.iconbtn{ appearance:none; cursor:pointer; border:var(--border-w) solid var(--line); background:var(--card-bg);
  color:var(--ink); width:32px; height:32px; border-radius:9px; font-size:14px; font-family:inherit; }
.iconbtn:disabled{ opacity:.3; cursor:default; }
.mod-slot{ font-size:10px; color:var(--faint); letter-spacing:.06em; font-weight:600; }
.mod-title{ font-weight:600; font-size:15px; }
.live-tag{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-accent);
  background:var(--accent2,var(--accent)); padding:2px 8px; border-radius:999px; font-weight:600; }
.editor{ padding:6px 16px 18px; border-top:1px solid var(--line); }
.pair{ display:flex; gap:8px; align-items:flex-end; margin-bottom:8px; }
.pair .fld{ flex:1; margin:0; }
.quick{ border:var(--border-w) solid var(--accent); border-radius:var(--radius-lg); padding:16px; margin-bottom:14px;
  background:var(--quick-bg,var(--card-bg)); box-shadow:var(--shadow-sm,none); }
.quick > h4{ color:var(--accent); }
.bigslider{ width:100%; height:34px; }
input[type=range]{ accent-color:var(--accent); padding:0; background:transparent; border:none; box-shadow:none; }
input[type=range]:focus{ box-shadow:none; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }
.row .btn{ flex:1; }
.toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle input{ width:auto; }
.sheet-actions{ display:flex; gap:10px; position:sticky; bottom:0; padding:14px 0 4px;
  background:linear-gradient(transparent,var(--sheet-bg,var(--bg)) 30%); }
.sheet-actions .btn{ flex:1; }
.gate{ text-align:center; padding:28px 0; }
.gate input{ text-align:center; letter-spacing:.6em; font-size:24px; max-width:230px; margin:16px auto; }
.hint{ font-size:12px; color:var(--muted); margin-top:6px; }
.del{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ---------- signal-video (tap here) ---------- */
.sig-badge{ cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease; }
.sig-badge:active{ transform:scale(.92); }
.sig-badge:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.vid-overlay{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(6,5,5,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; opacity:1; transition:opacity .28s ease; }
.vid-overlay.hidden{ display:none; }
.vid-overlay.fade{ opacity:0; }
.vid-player{ max-width:min(94vw,900px); max-height:86vh; width:auto; height:auto;
  border-radius:var(--radius-lg,10px); box-shadow:0 18px 60px rgba(0,0,0,.6);
  background:#000; animation:vidPop .34s cubic-bezier(.2,1.3,.4,1); }
@keyframes vidPop{ 0%{transform:scale(.86); opacity:0} 100%{transform:scale(1); opacity:1} }
.vid-close{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right));
  z-index:91; appearance:none; cursor:pointer; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45); color:#fff;
  font-size:18px; line-height:1; display:grid; place-items:center; }
@media (prefers-reduced-motion: reduce){ .vid-player{ animation:none !important; } }