.v-public-links {
   position: fixed;
   right: 14px;
   bottom: 12px;
   z-index: 40;
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 7px 9px;
   border: 1px solid var(--v-line-2);
   background: color-mix(in srgb, var(--v-surface) 92%, transparent);
   font: 11px/1 var(--v-mono);
}

.v-public-links a {
   color: var(--v-fg);
}

.v-age {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: grid;
   place-items: center;
   padding: 20px;
   background: rgb(0 0 0 / 0.82);
}

.v-age[hidden] {
   display: none;
}

.v-age-box {
   width: min(520px, 100%);
   padding: 24px;
   border: 1px solid var(--v-line-2);
   background: var(--v-surface);
   color: var(--v-fg);
}

.v-age-box h1 {
   margin: 0 0 10px;
   font-family: var(--v-display);
   font-size: 28px;
}

.v-age-box p {
   margin: 0;
   color: var(--v-muted);
}

.v-age-actions {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 18px;
}

.v-age-actions button,
.v-age-actions a {
   padding: 9px 12px;
   border: 1px solid var(--v-line-2);
   background: var(--v-accent);
   color: white;
   font: 12px/1 var(--v-mono);
   text-decoration: none;
   cursor: pointer;
}

.v-age-actions a {
   background: transparent;
   color: var(--v-fg);
}

.v-player-frame {
   width: 100%;
   height: 100%;
   border: 0;
   background: black;
}

.v-external {
   display: grid;
   place-items: center;
   width: 100%;
   height: 100%;
   background: #050505;
}

.v-external a {
   padding: 12px 16px;
   border: 1px solid var(--v-line-2);
   color: var(--v-fg);
   text-decoration: none;
}

.v-legal-link {
   color: var(--v-fg);
   font: 12px/1 var(--v-mono);
   text-decoration: none;
}

.v-legal-page {
   position: fixed;
   inset: 0;
   overflow: auto;
   padding: 32px max(20px, calc((100vw - 860px) / 2)) 64px;
   background: var(--v-bg);
   color: var(--v-fg);
   font-family: var(--font-body, serif);
}

.v-legal-page h1,
.v-legal-page h2 {
   font-family: var(--v-display);
}

.v-legal-page h1 {
   margin: 32px 0 20px;
   font-size: clamp(32px, 6vw, 58px);
}

.v-legal-page h2 {
   margin: 28px 0 8px;
}

.v-legal-page p {
   max-width: 76ch;
   font-size: 18px;
   line-height: 1.48;
}

.v-legal-nav {
   display: flex;
   gap: 14px;
   font: 12px/1 var(--v-mono);
}

/* ── header buttons (swipe / account) ───────────────────────────────────────── */
.v-hbtn {
   padding: 6px 10px;
   border: 1px solid var(--v-line-2);
   background: color-mix(in srgb, var(--v-surface) 88%, transparent);
   color: var(--v-fg);
   font: 11px/1 var(--v-mono);
   cursor: pointer;
   white-space: nowrap;
}

.v-hbtn:hover { border-color: var(--v-accent); }

.v-acct-btn {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   max-width: 260px;
}

.v-acct-btn.is-in { border-color: var(--v-accent); }

.v-acct-who {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 150px;
}

.v-acct-lvl {
   padding: 1px 5px;
   background: var(--v-accent);
   color: #fff;
   border-radius: 2px;
}

.v-acct-n { color: var(--v-muted); }

/* ── shared form controls ───────────────────────────────────────────────────── */
.v-btn {
   padding: 8px 12px;
   border: 1px solid var(--v-line-2);
   background: var(--v-surface);
   color: var(--v-fg);
   font: 12px/1 var(--v-mono);
   cursor: pointer;
}

.v-btn:hover:not(:disabled) { border-color: var(--v-accent); }
.v-btn:disabled { opacity: 0.5; cursor: default; }
.v-btn.is-primary { background: var(--v-accent); color: #fff; border-color: var(--v-accent); }
.v-btn.is-danger { color: #d6483b; border-color: color-mix(in srgb, #d6483b 55%, var(--v-line-2)); }

.v-input {
   width: 100%;
   padding: 9px 10px;
   border: 1px solid var(--v-line-2);
   background: var(--v-bg);
   color: var(--v-fg);
   font: 13px/1.2 var(--v-mono);
}

.v-input:focus { outline: none; border-color: var(--v-accent); }

/* ── modal scaffold shared by the panels ────────────────────────────────────── */
.v-access-backdrop {
   position: fixed;
   inset: 0;
   z-index: 900;
   display: grid;
   place-items: start center;
   padding: 64px 16px 16px;
   background: rgb(0 0 0 / 0.5);
   overflow: auto;
}

.v-access {
   width: min(440px, 100%);
   border: 1px solid var(--v-line-2);
   background: var(--v-surface);
   color: var(--v-fg);
}

.v-access-head {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   border-bottom: 1px solid var(--v-line-2);
   font: 12px/1 var(--v-mono);
}

.v-access-title { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.v-access-x {
   margin-left: auto;
   border: 0;
   background: transparent;
   color: var(--v-muted);
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
}

/* ── account panel ──────────────────────────────────────────────────────────── */
.v-access-lede,
.v-access-who {
   margin: 0;
   padding: 12px 14px 0;
   color: var(--v-muted);
   font: 12px/1.5 var(--v-mono);
}

.v-access-who { color: var(--v-fg); }

.v-access-form {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 12px 14px;
}

.v-access-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0 14px 14px;
}

.v-access-form .v-access-actions { padding: 4px 0 0; }
.v-access-anon { border-top: 1px solid var(--v-line-2); padding-top: 12px; }

.v-access-err {
   margin: 0 14px 14px;
   padding: 8px 10px;
   border: 1px solid color-mix(in srgb, #d6483b 55%, var(--v-line-2));
   color: #d6483b;
   font: 11px/1.4 var(--v-mono);
}

/* ── gamification block ─────────────────────────────────────────────────────── */
.v-gam { padding: 12px 14px; border-top: 1px solid var(--v-line-2); }
.v-gam--empty { color: var(--v-muted); font: 12px/1.5 var(--v-mono); }

.v-gam-top {
   display: flex;
   align-items: center;
   gap: 10px;
   font: 12px/1 var(--v-mono);
}

.v-gam-level { display: inline-flex; align-items: baseline; gap: 5px; }
.v-gam-lk { color: var(--v-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
.v-gam-lv { font-size: 20px; font-weight: 700; font-family: var(--v-display); }
.v-gam-count { margin-left: auto; color: var(--v-muted); }
.v-gam-count b { color: var(--v-fg); }

.v-gam-bar {
   height: 6px;
   margin: 8px 0 10px;
   background: color-mix(in srgb, var(--v-fg) 12%, transparent);
   overflow: hidden;
}

.v-gam-fill { height: 100%; background: var(--v-accent); transition: width 0.35s ease; }

.v-gam-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-bottom: 8px;
}

.v-gam-cell { display: flex; flex-direction: column; gap: 2px; }
.v-gam-k { color: var(--v-muted); font: 10px/1.2 var(--v-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.v-gam-v { font: 14px/1.1 var(--v-mono); }
.v-gam-sub { color: var(--v-muted); font-size: 11px; }

.v-gam-svg { display: block; width: 100%; height: 34px; }
.v-gam-line { fill: none; stroke-width: 1.4; }
.v-gam-line.is-mae { stroke: var(--v-accent); }
.v-gam-line.is-base { stroke: color-mix(in srgb, var(--v-fg) 35%, transparent); stroke-dasharray: 3 3; }

/* ── swipe deck ─────────────────────────────────────────────────────────────── */
.v-swipe-backdrop {
   position: fixed;
   inset: 0;
   z-index: 950;
   display: grid;
   place-items: center;
   padding: 16px;
   background: rgb(0 0 0 / 0.72);
}

.v-swipe {
   width: min(420px, 100%);
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.v-swipe-head {
   display: flex;
   align-items: center;
   color: #fff;
   font: 12px/1 var(--v-mono);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.v-swipe-x {
   margin-left: auto;
   border: 0;
   background: transparent;
   color: #fff;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
}

.v-swipe-stack {
   position: relative;
   height: min(62vh, 460px);
   touch-action: none;
}

.v-swipe-card {
   position: absolute;
   inset: 0;
   border: 1px solid var(--v-line-2);
   background: #0a0a0a;
   overflow: hidden;
   will-change: transform;
}

.v-swipe-card.is-top { cursor: grab; z-index: 3; }
.v-swipe-card.is-top:active { cursor: grabbing; }
.v-swipe-card img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.v-swipe-blank { width: 100%; height: 100%; background: #141414; }

.v-swipe-hint {
   position: absolute;
   top: 18px;
   padding: 4px 12px;
   font: 700 15px/1 var(--v-mono);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   border: 2px solid;
   border-radius: 4px;
}

.v-swipe-hint.is-like { right: 18px; color: #34c759; border-color: #34c759; transform: rotate(12deg); }
.v-swipe-hint.is-nope { left: 18px; color: #d6483b; border-color: #d6483b; transform: rotate(-12deg); }

.v-swipe-cap {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent);
   color: #fff;
   font: 12px/1.3 var(--v-mono);
}

.v-swipe-cap-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-swipe-cap-rate { color: #ffd257; }

.v-swipe-actions { display: flex; justify-content: center; gap: 20px; }

.v-swipe-act {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: 2px solid var(--v-line-2);
   background: var(--v-surface);
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
}

.v-swipe-act.is-nope { color: #d6483b; border-color: #d6483b; }
.v-swipe-act.is-like { color: #34c759; border-color: #34c759; }
.v-swipe-act.is-skip { color: var(--v-muted); }

.v-swipe-count { text-align: center; color: rgb(255 255 255 / 0.6); font: 11px/1 var(--v-mono); }

.v-swipe-done {
   display: grid;
   gap: 14px;
   place-items: center;
   padding: 40px;
   background: var(--v-surface);
   border: 1px solid var(--v-line-2);
   color: var(--v-fg);
   font: 13px/1.4 var(--v-mono);
}