/*
  Velvet Stage
  夜の舞台の土台。styles.css ほか既存CSSのあとに読み込み、色・文字・共通部品とトップページを上書きする。
  通常型1on1の対戦画面は velvet-battle.css が受け持つ。
*/

@property --vs-holo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;

  --vs-night-0: #07050a;
  --vs-night-1: #0e0912;
  --vs-night-2: #160e1a;
  --vs-night-3: #1f1423;
  --vs-night-4: #2c1b2f;
  --vs-wine: #5c0f2e;
  --vs-wine-bright: #8a1a45;
  --vs-rose: #ff3f86;
  --vs-rose-soft: #ff8ab6;
  --vs-gold: #e6c17a;
  --vs-gold-hi: #fff0c9;
  --vs-gold-lo: #93652a;
  --vs-violet: #a88bff;
  --vs-mint: #6fe3cf;
  --vs-danger: #ff5566;
  --vs-pearl: #f8eef2;
  --vs-mist: #bfaabb;
  --vs-dim: #8a7486;
  --vs-line: rgba(230, 193, 122, 0.24);
  --vs-line-soft: rgba(248, 238, 242, 0.1);

  /* 貼り合い（DMの密室 × 採点メーター）。トップ・通常1on1・戦略型1on1で共通に使う。 */
  --ha-font-display: "Dela Gothic One", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --ha-font-memo: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  --ha-ground: #0b0710;
  --ha-surface: #140d18;
  --ha-raised: #1f1423;
  --ha-bubble-mine: #8a1a45;
  --ha-bubble-theirs: #2c1b2f;
  --ha-line: rgba(248, 238, 242, 0.08);
  --ha-ink: #1a0710;
  --ha-hatch: repeating-linear-gradient(135deg, #251829 0 12px, #1d1222 12px 24px);
  --ha-hatch-mine: repeating-linear-gradient(135deg, #3a1428 0 12px, #2e0f20 12px 24px);
  /* 通常1on1の1〜10点。リアクションの帯（1〜6／7〜8／9〜10）と同じ区切り。 */
  --ha-band-low: #8d7a93;
  --ha-band-mid: #e6c17a;
  --ha-band-high: #ff3f86;
  /* 戦略型の100点。80で質問、85で指示、90で連投。 */
  --ha-zone-floor: #2c1b2f;
  --ha-zone-none: #45304b;
  --ha-zone-question: #6d55d6;
  --ha-zone-instruction: #e6c17a;
  --ha-zone-combo: #ff3f86;
  --ha-icon-cards: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><rect x='3' y='7' width='11' height='14' rx='2'/><path d='M8 3h11a2 2 0 0 1 2 2v13'/></svg>");
  --ha-icon-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='3'/><circle cx='9' cy='10' r='2'/><path d='M21 16l-5-5-9 9'/></svg>");
  --ha-icon-lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
  --ha-icon-bolt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M13 3 4 14h7l-1 7 9-11h-7z'/></svg>");
  --ha-icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");

  --vs-font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --vs-font-accent: "Playfair Display", "Times New Roman", serif;
  --vs-font-number: "Oswald", "Arial Narrow", sans-serif;
  --vs-font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;

  --vs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vs-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --vs-foil: linear-gradient(105deg, #8c6122 0%, #e9c47c 18%, #fff3d2 27%, #d4a655 38%, #7c5419 52%, #e7c07a 68%, #fff0c8 80%, #b88939 100%);
  --vs-holo: conic-gradient(from var(--vs-holo-angle), #ff7ab6, #ffe39a, #8ff3ff, #b58bff, #ff7ab6);
  --vs-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .9 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --vs-icon-target: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='3.5'/><path d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4'/></svg>");
  --vs-icon-gem: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M6 4h12l4 5-10 11L2 9z'/><path d='M2 9h20M9 4l3 16M15 4l-3 16'/></svg>");
  --vs-icon-cup: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><path d='M4 9h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/><path d='M17 11h1.5a2.5 2.5 0 0 1 0 5H17'/><path d='M8 3c0 2 2 2 2 4M12 3c0 2 2 2 2 4'/></svg>");
  --vs-icon-spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/><path d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/></svg>");
  --vs-icon-crown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/></svg>");
  --vs-icon-list: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V3h6v1M8.5 11l2 2 4-4M8.5 17h7'/></svg>");
  --vs-icon-bag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M5 8h14l-1 13H6z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>");
  --vs-icon-wallet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><rect x='3' y='6' width='18' height='14' rx='3'/><path d='M3 10h18M16 15h2'/></svg>");
  --vs-icon-medal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><circle cx='12' cy='9' r='6'/><path d='M8.5 14l-2 7 5.5-3 5.5 3-2-7'/></svg>");
  --vs-icon-mic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><rect x='9' y='3' width='6' height='11' rx='3'/><path d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/></svg>");
  --vs-icon-drum: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='3'/><path d='M6 8.5h12M6 15.5h12M9.5 12h5'/><path d='M20.5 9v6' stroke-linecap='round'/></svg>");
  --vs-icon-lotus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M12 19c-2.6-2.2-3.6-5.4-2.4-9.6.9.9 1.9 2.2 2.4 3.6.5-1.4 1.5-2.7 2.4-3.6 1.2 4.2.2 7.4-2.4 9.6z'/><path d='M12 19c-4.2 0-7.6-2.2-8.6-5.6 2.8-.2 5.4.8 7.2 2.7M12 19c4.2 0 7.6-2.2 8.6-5.6-2.8-.2-5.4.8-7.2 2.7'/></svg>");
  --vs-icon-bars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><path d='M4 20V13h4v7M10 20V8h4v12M16 20v-9h4v9'/></svg>");
  --vs-icon-stadium: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'><ellipse cx='12' cy='15' rx='6' ry='2.6'/><path d='M3 15c0-3.9 4-6.8 9-6.8s9 2.9 9 6.8v2.4c0 2.2-4 3.9-9 3.9s-9-1.7-9-3.9z'/><path d='M5 3.5v5M19 3.5v5' stroke-linecap='round'/></svg>");

  /* 既存の色トークンを夜の舞台へ寄せる。個別に書かれた色はそのまま残る。 */
  --bg: #07050a;
  --panel: rgba(22, 14, 26, 0.92);
  --panel-solid: #160e1a;
  --panel-soft: #1f1423;
  --line: rgba(248, 238, 242, 0.1);
  --line-bright: rgba(230, 193, 122, 0.3);
  --text: #f8eef2;
  --muted: #bfaabb;
  --red: #ff3f86;
  --red-soft: #ff8ab6;
  --cyan: #6fe3cf;
  --cyan-soft: #b9f5ea;
  --gold: #e6c17a;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
  font-family: var(--vs-font-body);
}

html {
  background: var(--vs-night-0);
}

body {
  background: var(--vs-grain) 0 0 / 160px 160px, var(--vs-night-0);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
.file-button:focus-within {
  outline-color: rgba(255, 240, 201, 0.85);
}

/* 固定の光。ぼかしフィルターは使わず、グラデーションだけで描く。 */
.ambient {
  width: 100vw;
  height: 70vh;
  border-radius: 0;
  filter: none;
  opacity: 1;
}

.ambient-one {
  top: -32vh;
  left: 0;
  right: auto;
  background: radial-gradient(60% 55% at 50% 45%, rgba(138, 26, 69, 0.42), transparent 70%);
}

.ambient-two {
  right: auto;
  bottom: -34vh;
  left: 0;
  background: radial-gradient(55% 50% at 50% 55%, rgba(92, 15, 46, 0.34), transparent 72%);
}

/* ---------- ヘッダー・フッター ---------- */

.site-header {
  border-bottom-color: var(--vs-line);
}

.site-footer {
  border-top-color: var(--vs-line-soft);
  color: var(--vs-dim);
}

.brand-mark {
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 0;
  transform: none;
}

.brand-mark i {
  top: 3px;
  left: 3px;
  width: 16px;
  height: 23px;
  border: 1.5px solid var(--vs-gold);
  border-radius: 3px;
  background: rgba(92, 15, 46, 0.9);
  transform: rotate(-12deg);
}

.brand-mark i:last-child {
  left: 14px;
  background: linear-gradient(160deg, var(--vs-rose), var(--vs-wine));
  transform: rotate(10deg);
}

.brand strong {
  font-family: var(--vs-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand small {
  color: var(--vs-gold);
  font-family: var(--vs-font-accent);
  font-weight: 700;
  letter-spacing: 0.3em;
}

.status-dot,
.privacy-badge,
.mini-badge {
  border-color: var(--vs-line-soft);
  color: var(--vs-mist);
  background: rgba(255, 255, 255, 0.035);
}

.status-dot i {
  background: var(--vs-mint);
  box-shadow: 0 0 10px var(--vs-mint);
}

.audio-toggle {
  color: var(--vs-gold-hi);
  border-color: var(--vs-line);
  background: rgba(230, 193, 122, 0.08);
}

.audio-toggle:hover {
  border-color: rgba(230, 193, 122, 0.7);
  background: rgba(230, 193, 122, 0.16);
}

.audio-toggle:focus-visible {
  outline-color: var(--vs-gold-hi);
}

.audio-toggle[aria-pressed="false"] {
  color: var(--vs-dim);
  border-color: var(--vs-line-soft);
  background: rgba(255, 255, 255, 0.03);
}

.streak-badge {
  border-color: rgba(255, 63, 134, 0.35);
  color: var(--vs-rose-soft);
  background: rgba(255, 63, 134, 0.1);
}

/* ---------- 共通の文字と部品 ---------- */

.eyebrow {
  color: var(--vs-gold);
  font-family: var(--vs-font-accent);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.eyebrow::before {
  background: linear-gradient(90deg, transparent, currentColor);
}

.button {
  border-radius: 14px;
}

.button-primary {
  border-color: rgba(230, 193, 122, 0.45);
  color: #fff;
  background: linear-gradient(135deg, #ff6fa3 0%, #ea2f76 45%, #9c1047 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px -8px rgba(255, 63, 134, 0.55);
}

.button-cyan {
  border-color: rgba(230, 193, 122, 0.55);
  color: var(--vs-gold-hi);
  background: rgba(230, 193, 122, 0.1);
}

.button-ghost {
  border-color: var(--vs-line-soft);
  color: var(--vs-pearl);
  background: rgba(255, 255, 255, 0.045);
}

.button-danger {
  border-color: rgba(255, 85, 102, 0.4);
  color: #ff9aa5;
  background: rgba(255, 85, 102, 0.09);
}

/* 押せるものにだけ走る光。必要な部品にだけ付ける。 */
.vs-satin {
  position: relative;
  overflow: hidden;
}

.vs-satin::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.36) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: vs-satin 4.8s var(--vs-ease-out) 1.2s infinite;
}

.vs-satin:disabled::after {
  animation: none;
}

@keyframes vs-satin {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}

.vs-foil-text {
  color: transparent;
  background: var(--vs-foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: vs-foil-sweep 6s ease-in-out infinite;
}

@keyframes vs-foil-sweep {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

@keyframes vs-holo-spin {
  to { --vs-holo-angle: 360deg; }
}

@keyframes vs-fade-in {
  from { opacity: 0; }
}

@keyframes vs-fade-up {
  from { opacity: 0; transform: translateY(12px); }
}

/* カードの裏面。通常1on1の公開前で使う。まだ開いていない画像の吹き出し。 */
.vs-card-back {
  position: relative;
  display: grid;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  overflow: hidden;
  place-items: center;
  border-radius: 16px;
  container-type: inline-size;
  background: var(--ha-hatch);
  box-shadow: inset 0 0 0 1px var(--vs-line-soft);
}

.vs-card-emblem {
  display: grid;
  width: 42%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 30%;
  color: var(--vs-rose);
  background: rgba(255, 63, 134, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 63, 134, 0.5);
  font: 400 22cqw/1 var(--ha-font-display);
}

/* 読み上げだけに残す文字 */
.ha-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ダイアログとトースト */
.confirm-dialog,
.audio-studio-card {
  border-color: var(--vs-line);
  background: linear-gradient(165deg, #211424, #110a14 70%);
}

.toast {
  border-color: var(--vs-line);
  background: rgba(31, 20, 35, 0.97);
}

/* ---------- 貼り合いの部品（吹き出し・メーター） ---------- */

/* アイコンは吹き出しのまとまりの先頭にそろえる */
.ha-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ha-msg.is-mine {
  justify-content: flex-end;
}

.ha-msg-body {
  display: flex;
  min-width: 0;
  max-width: min(80%, 340px);
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ha-msg.is-mine .ha-msg-body {
  align-items: flex-end;
}

.ha-avatar {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1.5px solid var(--vs-violet);
  border-radius: 50%;
  color: #d6c8ff;
  background: var(--ha-bubble-theirs);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.ha-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 16px 16px 16px 4px;
  color: var(--vs-pearl);
  background: var(--ha-bubble-theirs);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ha-msg.is-mine .ha-bubble,
.ha-bubble.is-mine {
  border-radius: 16px 16px 4px 16px;
  background: var(--ha-bubble-mine);
}

.ha-photo {
  display: flex;
  width: 168px;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 16px 16px 16px 4px;
  color: var(--vs-mist);
  background: var(--ha-hatch);
  font-size: 0.75rem;
}

.ha-photo i {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--ha-icon-image) center / contain no-repeat;
  mask: var(--ha-icon-image) center / contain no-repeat;
}

.ha-score-bubble {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ha-score-number {
  flex: none;
  font: 600 1.6rem/1 var(--vs-font-number);
  font-variant-numeric: tabular-nums;
}

.ha-score-number small {
  margin-left: 2px;
  font-size: 0.8rem;
}

/* 1〜10点のメーター。点数までを帯の色で塗る。 */
.ha-meter10 {
  display: grid;
  width: 190px;
  max-width: 100%;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
}

.ha-meter10 i {
  height: 6px;
  border-radius: 3px;
  background: var(--ha-bubble-theirs);
}

.ha-meter10 i.is-on.is-low { background: var(--ha-band-low); }
.ha-meter10 i.is-on.is-mid { background: var(--ha-band-mid); }
.ha-meter10 i.is-on.is-high { background: var(--ha-band-high); }

/* 100点の帯の早見。〜70は短く、70〜100を広く見せる。 */
.ha-zones {
  display: flex;
  gap: 3px;
  font-style: normal;
}

.ha-zones b {
  --zone: var(--ha-zone-none);
  display: grid;
  min-width: 0;
  flex: 10 1 0;
  gap: 5px;
  color: var(--vs-mist);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ha-zones b::before {
  height: 10px;
  border-radius: 3px;
  content: "";
  background: var(--zone);
}

.ha-zones .is-floor {
  --zone: var(--ha-zone-floor);
  flex: 0 0 26px;
}

.ha-zones .is-question {
  --zone: var(--ha-zone-question);
  flex-grow: 5;
  color: #c9bcff;
}

.ha-zones .is-instruction {
  --zone: var(--ha-zone-instruction);
  flex-grow: 5;
  color: var(--vs-gold);
}

.ha-zones .is-combo {
  --zone: var(--ha-zone-combo);
  color: var(--vs-rose-soft);
}

/* 70〜100点のメーター。--score-pos（0〜1）の位置に目印を立てる。 */
.ha-meter100 {
  display: grid;
  width: 230px;
  max-width: 100%;
  gap: 3px;
}

.ha-meter100-bar {
  position: relative;
  display: flex;
  height: 16px;
  align-items: center;
  gap: 2px;
}

.ha-meter100-bar i {
  height: 8px;
  flex: 10 1 0;
  border-radius: 2px;
  background: var(--ha-zone-none);
}

.ha-meter100-bar i:first-child {
  height: 4px;
  flex: 0 0 18px;
  background: var(--ha-zone-floor);
}

.ha-meter100-bar i:nth-child(3) { flex-grow: 5; background: var(--ha-zone-question); }
.ha-meter100-bar i:nth-child(4) { flex-grow: 5; background: var(--ha-zone-instruction); }
.ha-meter100-bar i:nth-child(5) { background: var(--ha-zone-combo); }

.ha-meter100-bar b {
  position: absolute;
  top: 0;
  left: calc(20px + (100% - 20px) * var(--score-pos, 0) - 2px);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--vs-pearl);
  box-shadow: 0 0 0 2px var(--meter-ring, var(--ha-bubble-theirs));
}

/* 70点未満は、左の短い区間（0〜70）の中に目印を置く */
.ha-meter100.is-below .ha-meter100-bar b {
  left: calc(18px * var(--score-pos, 0) - 2px);
}

.ha-meter100-scale {
  display: flex;
  gap: 2px;
  color: var(--vs-mist);
  font: 500 0.62rem/1 var(--vs-font-number);
}

.ha-meter100-scale span {
  flex: 10 1 0;
}

.ha-meter100-scale span:first-child {
  flex: 0 0 18px;
}

.ha-meter100-scale span:nth-child(3),
.ha-meter100-scale span:nth-child(4) {
  flex-grow: 5;
}

.ha-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.75rem;
  font-weight: 600;
}

.ha-divider::before,
.ha-divider::after {
  height: 1px;
  flex: 1 1 0;
  content: "";
  background: var(--vs-line-soft);
}

.ha-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 13px;
  color: var(--vs-mist);
  background: var(--ha-raised);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- トップページ ---------- */

.hero.vl-landing {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 12px;
}

.hero.vl-landing::before {
  display: none;
}

.hero.vl-landing > div,
.hero.vl-landing > section,
.hero.vl-landing > nav,
.hero.vl-landing > details {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* スマホは見出し→入口→見本の順。入口のボタンを最初の画面に入れ、見本はスクロールで見せる。 */
.vl-hero {
  display: grid;
  grid-template-areas: "copy" "actions" "stage";
  gap: 20px;
  padding: 8px 2px 0;
}

.vl-copy {
  grid-area: copy;
  display: grid;
  gap: 14px;
  animation: vs-fade-up 500ms var(--vs-ease-out) both;
}

.vl-eyebrow {
  margin: 0;
  color: var(--vs-rose-soft);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero.vl-landing .vl-title {
  max-width: none;
  margin: 0;
  color: var(--vs-pearl);
  font: 400 clamp(2.05rem, 9vw, 2.9rem)/1.28 var(--ha-font-display);
  letter-spacing: 0.01em;
}

.vl-lead {
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.9rem;
  line-height: 1.75;
}

.vl-lead em {
  color: var(--vs-rose-soft);
  font-style: normal;
  font-weight: 700;
}

/* ---------- 見本：なりきりDM（X のDMにない吹き出し・リアクション・入力中を見せる） ---------- */

.vl-hero-stage {
  position: relative;
  isolation: isolate;
  grid-area: stage;
  display: grid;
  min-width: 0;
  gap: 16px;
}

.vl-hero-stage::before {
  position: absolute;
  z-index: -1;
  inset: -36px -24px;
  content: "";
  background: radial-gradient(55% 45% at 72% 28%, rgba(255, 63, 134, 0.16), transparent 70%);
  pointer-events: none;
}

/* Xで話題になったピンクの吹き出し枠と同じ系統の縁取り */
.vl-hero-thread {
  display: grid;
  gap: 12px;
  padding: 0 14px 16px;
  border-radius: 22px;
  background: rgba(20, 13, 24, 0.94);
  box-shadow: 0 0 0 1.5px rgba(255, 127, 166, 0.55), 0 0 0 5px rgba(255, 127, 166, 0.07), 0 0 32px rgba(255, 63, 134, 0.2);
}

.vl-dm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ha-line);
}

.vl-dm-avatar {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5c0f4a, #ff4fa0);
  box-shadow: 0 0 0 2px #ff4fa0, 0 0 14px rgba(255, 79, 160, 0.5);
  font-size: 0.9rem;
  font-weight: 800;
}

.vl-dm-badge {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--ha-ground);
}

.vl-dm-badge .chat-persona-mark {
  width: 12px;
  height: 12px;
  margin: 0;
  vertical-align: 0;
}

.vl-dm-who {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.vl-dm-who b {
  color: var(--vs-pearl);
  font-size: 0.9rem;
}

.vl-dm-who small {
  color: var(--vs-rose-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.vl-dm-lock {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--vs-dim);
  font: 600 0.7rem/1 var(--vs-font-number);
  letter-spacing: 0.08em;
}

.vl-dm-lock::before {
  width: 12px;
  height: 12px;
  content: "";
  background: currentColor;
  -webkit-mask: var(--ha-icon-lock) center / contain no-repeat;
  mask: var(--ha-icon-lock) center / contain no-repeat;
}

/* トップ専用の静的な見本画像。元の比率を保ち、狭い画面でも収める。 */
.vl-hero-thread img.ha-photo {
  display: block;
  width: min(220px, 72%);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: none;
  box-shadow: 0 0 0 2px #ff4fa0, 0 0 18px rgba(255, 79, 160, 0.35);
}

/* 口調の吹き出し。色・線・角は chat-persona.css の口調ごとの変数を使う（:where で既定値の強さを0にする）。 */
:where(.vl-persona-bubble) {
  --chat-surface: var(--ha-bubble-theirs);
  --chat-text: var(--vs-pearl);
  --chat-border: transparent;
  --chat-border-width: 0px;
  --chat-border-style: solid;
  --chat-shadow: none;
  --chat-radius: 16px;
}

.vl-hero-thread .ha-msg .ha-bubble.vl-persona-bubble {
  position: relative;
  color: var(--chat-text);
  border: var(--chat-border-width) var(--chat-border-style) var(--chat-border);
  border-radius: var(--chat-radius);
  background: var(--chat-surface);
  box-shadow: var(--chat-shadow);
}

.vl-hero-thread .ha-msg .ha-bubble.vl-persona-bubble::after {
  position: absolute;
  z-index: 2;
  top: -11px;
  right: -7px;
  color: var(--chat-charm-color, #fff);
  font-size: 0.82rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.vl-hero-thread .chat-fx-hearts::before {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: -15px;
  width: 44px;
  height: 22px;
  content: "";
  background: #ff7aa8;
  -webkit-mask:
    var(--cp-icon-heart) 0 4px / 16px 16px no-repeat,
    var(--cp-icon-heart) 18px 0 / 12px 12px no-repeat,
    var(--cp-icon-heart) 32px 8px / 10px 10px no-repeat;
  mask:
    var(--cp-icon-heart) 0 4px / 16px 16px no-repeat,
    var(--cp-icon-heart) 18px 0 / 12px 12px no-repeat,
    var(--cp-icon-heart) 32px 8px / 10px 10px no-repeat;
  animation: cp-hearts-float 2600ms ease-in-out infinite;
  pointer-events: none;
}

.vl-hero-thread .vl-persona-bubble.is-bump {
  animation: vl-bump 450ms var(--vs-ease-snap) both;
}

.vl-hero-me {
  display: inline-flex;
  align-items: center;
  color: var(--vs-dim);
  font-size: 0.7rem;
}

.vl-crit {
  position: absolute;
  z-index: 3;
  top: -12px;
  left: -10px;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--ha-ink);
  background: var(--vs-gold);
  font: 600 0.62rem/1 var(--vs-font-number);
  letter-spacing: 0.1em;
  transform: rotate(-8deg);
}

/* 狭い画面では折り返す（末尾の♡と点を切らない） */
.vl-hero-typing {
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.72rem;
  line-height: 1.5;
}

.vl-hero-typing .chat-typing-dots {
  margin-left: 5px;
  vertical-align: middle;
}

/* 口調スイッチ：返事の吹き出しとセリフだけを差し替える（設定は変えない） */
.vl-persona-switch {
  display: grid;
  gap: 8px;
}

.vl-persona-label {
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.78rem;
  font-weight: 700;
}

.vl-persona-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vl-persona-chip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--vs-mist);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.vl-persona-chip[aria-pressed="true"] {
  color: var(--vs-pearl);
  background: linear-gradient(135deg, rgba(255, 63, 134, 0.38), rgba(138, 26, 69, 0.6));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 182, 0.65), 0 0 12px rgba(255, 63, 134, 0.3);
}

.vl-persona-chip:focus-visible {
  outline: 2px solid var(--vs-rose-soft);
  outline-offset: 2px;
}

/* 見本の演出：見えた時に1回だけ（landing-hero.mjs が is-intro を付ける。動きを減らす設定では付けない）。 */
.vl-hero-thread.is-intro-ready .ha-photo,
.vl-hero-thread.is-intro-ready .ha-msg.is-theirs .ha-bubble,
.vl-hero-thread.is-intro-ready .ha-msg.is-mine,
.vl-hero-thread.is-intro-ready .vl-crit,
.vl-hero-thread.is-intro-ready .chat-reaction-sticker,
.vl-hero-thread.is-intro-ready .vl-hero-typing {
  opacity: 0;
}

.vl-hero-thread.is-intro .ha-photo {
  animation: vs-fade-up 500ms var(--vs-ease-out) both;
}

.vl-hero-thread.is-intro .ha-msg.is-theirs .ha-bubble {
  animation: vs-fade-up 500ms var(--vs-ease-out) 350ms both;
}

.vl-hero-thread.is-intro .ha-msg.is-mine {
  animation: vs-fade-up 500ms var(--vs-ease-out) 900ms both;
}

.vl-hero-thread.is-intro .ha-meter10 i.is-on {
  animation: vl-meter-fill 250ms ease both;
  animation-delay: calc(950ms + var(--n, 0) * 75ms);
}

.vl-hero-thread.is-intro .vl-crit {
  animation: vl-crit-pop 550ms var(--vs-ease-snap) 1700ms both;
}

.vl-hero-thread.is-intro .chat-reaction-sticker {
  animation: cp-sticker-pop 620ms var(--vs-ease-snap) 2000ms both;
}

.vl-hero-thread.is-intro .vl-hero-typing {
  animation: vs-fade-up 400ms var(--vs-ease-out) 2400ms both;
}

@keyframes vl-meter-fill {
  from { background: var(--ha-bubble-theirs); }
}

@keyframes vl-crit-pop {
  0% { opacity: 0; transform: scale(0) rotate(-24deg); }
  70% { opacity: 1; transform: scale(1.2) rotate(-4deg); }
  100% { opacity: 1; transform: rotate(-8deg); }
}

@keyframes vl-bump {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: none; }
}

/* 通常型1on1の入口 */
.vl-landing .hero-actions {
  grid-area: actions;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding-inline: 2px;
}

.vl-main-button {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 3px;
  min-height: 0;
  padding: 14px 56px 14px 20px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  color: var(--ha-ink);
  text-align: left;
  background: var(--vs-rose);
  box-shadow: 0 12px 28px -12px rgba(255, 63, 134, 0.75);
  transition: transform 160ms var(--vs-ease-out), background-color 160ms ease;
}

.vl-main-button:hover {
  background: #ff5a97;
  transform: translateY(-1px);
}

.vl-main-button:active {
  transform: scale(0.98);
}

.vl-main-button small {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

.vl-main-button > span {
  font: 400 1.35rem/1.3 var(--ha-font-display);
  letter-spacing: 0.02em;
}

.vl-main-button::before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 24px;
  height: 24px;
  content: "";
  background: currentColor;
  -webkit-mask: var(--ha-icon-arrow) center / contain no-repeat;
  mask: var(--ha-icon-arrow) center / contain no-repeat;
  transform: translateY(-50%);
}

.vl-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.vl-live b {
  margin-inline: 1px;
  font-family: var(--vs-font-number);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 人数は0人をそのまま出さず、いる方だけを言葉にする。読めない時は出さない。 */
.vl-live-sep,
.vl-live-first {
  display: none;
}

.vl-live[data-hero-live="unknown"] {
  display: none;
}

.vl-live[data-hero-live="empty"] .vl-live-on,
.vl-live[data-hero-live="waiting"] .vl-live-playing,
.vl-live[data-hero-live="playing"] .vl-live-waiting {
  display: none;
}

.vl-live[data-hero-live="empty"] .vl-live-first,
.vl-live[data-hero-live="both"] .vl-live-sep {
  display: inline;
}

.vl-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ha-ink);
  animation: vl-live-pulse 1.8s ease-out infinite;
}

@keyframes vl-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 7, 16, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(26, 7, 16, 0); }
}

.vl-rule {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.76rem;
  text-align: center;
}

/* 遊ぶ前の安心と手軽さ。入口のすぐ下に置く。 */
.vl-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vl-trust li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--vs-pearl);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.12);
  font-size: 0.72rem;
  font-weight: 700;
}

.vl-trust i {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--vs-rose-soft);
  -webkit-mask: var(--ha-icon-lock) center / contain no-repeat;
  mask: var(--ha-icon-lock) center / contain no-repeat;
}

.vl-trust i.is-bolt {
  -webkit-mask-image: var(--ha-icon-bolt);
  mask-image: var(--ha-icon-bolt);
}

.vl-trust i.is-spark {
  -webkit-mask-image: var(--vs-icon-spark);
  mask-image: var(--vs-icon-spark);
}

/* 名場面カードの予告。Xで見かけたカードと同じ見た目を小さく見せる。 */
.vl-meibamen {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--ha-line);
}

.vl-meibamen-card {
  position: relative;
  height: 112px;
  padding: 9px 8px;
  border-radius: 10px;
  background: radial-gradient(90% 50% at 50% 0%, rgba(255, 63, 134, 0.3), transparent 70%), #160b18;
  box-shadow: 0 0 0 1px rgba(230, 193, 122, 0.35), 0 8px 18px rgba(0, 0, 0, 0.5);
  transform: rotate(-4deg);
}

.vl-meibamen-card b {
  display: block;
  color: var(--vs-pearl);
  font: 400 0.55rem/1.25 var(--ha-font-display);
}

.vl-meibamen-card span {
  display: block;
  height: 9px;
  margin-top: 7px;
  border-radius: 5px;
}

.vl-meibamen-card .is-theirs {
  width: 72%;
  background: #5c0f4a;
  box-shadow: 0 0 0 1px #ff4fa0;
}

.vl-meibamen-card .is-mine {
  width: 62%;
  margin-left: auto;
  background: #6b1235;
  box-shadow: 0 0 0 1px var(--vs-gold);
}

.vl-meibamen-card .is-masked {
  width: 78%;
  background: rgba(248, 238, 242, 0.22);
}

.vl-meibamen-card em {
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: var(--vs-rose-soft);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 700;
}

.vl-meibamen-copy h2 {
  margin: 0 0 4px;
  color: var(--vs-pearl);
  font-size: 0.95rem;
}

.vl-meibamen-copy p {
  margin: 0;
  color: var(--vs-mist);
  font-size: 0.8rem;
  line-height: 1.65;
}

/* いま入れる卓。募集の札をタイムラインのように縦に並べる。 */
.vl-board {
  display: grid;
  gap: 14px;
}

.vl-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.vl-board-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.vl-board-head span {
  color: var(--vs-mist);
  font-size: 0.75rem;
}

.vl-board-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vl-board-item {
  --post-accent: 255, 63, 134;
  --post-icon: var(--ha-icon-cards);
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
}

.vl-board-item.is-strategy {
  --post-accent: 230, 193, 122;
  --post-icon: var(--vs-icon-target);
}

.vl-board-item.is-free {
  --post-accent: 111, 227, 207;
  --post-icon: var(--vs-icon-cup);
}

.vl-board-item::before {
  width: 10px;
  height: 10px;
  margin-top: 22px;
  justify-self: center;
  border-radius: 50%;
  content: "";
  background: rgb(var(--post-accent));
  box-shadow: 0 0 0 4px rgba(var(--post-accent), 0.18);
}

.vl-board-item::after {
  position: absolute;
  top: 40px;
  bottom: -12px;
  left: 6px;
  width: 2px;
  content: "";
  background: var(--vs-line-soft);
}

.vl-board-item:last-child::after {
  display: none;
}

.vl-post {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title tag"
    "icon sub tag"
    "text text text"
    "zones zones zones"
    "counts counts go";
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  color: var(--vs-pearl);
  text-align: left;
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px rgba(var(--post-accent), 0.22);
  transition: box-shadow 160ms ease, transform 160ms var(--vs-ease-out);
}

.vl-post:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--post-accent), 0.6);
  transform: translateY(-1px);
}

/* free-table.css の入口ボタン（IDで指定）の色を、札の見た目へ戻す */
.vl-landing #freeTableButton.vl-post {
  border: 0;
  color: var(--vs-pearl);
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px rgba(var(--post-accent), 0.22);
}

.vl-landing #freeTableButton.vl-post:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--post-accent), 0.6);
  transform: translateY(-1px);
}

.vl-landing #freeTableButton.vl-post.is-lit {
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px rgba(111, 227, 207, 0.7), 0 0 26px rgba(111, 227, 207, 0.16);
}

.vl-post-icon {
  display: grid;
  width: 40px;
  height: 40px;
  grid-area: icon;
  place-items: center;
  border-radius: 12px;
  background: rgba(var(--post-accent), 0.14);
}

.vl-post-icon::before {
  width: 22px;
  height: 22px;
  content: "";
  background: rgb(var(--post-accent));
  -webkit-mask: var(--post-icon) center / contain no-repeat;
  mask: var(--post-icon) center / contain no-repeat;
}

.vl-post-title {
  grid-area: title;
  align-self: end;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.vl-post-sub {
  grid-area: sub;
  align-self: start;
  margin-top: 2px;
  color: var(--vs-mist);
  font-size: 0.75rem;
  line-height: 1.45;
}

.vl-post-tag {
  grid-area: tag;
  padding: 4px 9px;
  border-radius: 8px;
  color: rgb(var(--post-accent));
  background: var(--ha-raised);
  font: 500 0.8rem/1.2 var(--vs-font-number);
  font-style: normal;
}

.vl-board-item.is-solo .vl-post-tag {
  color: var(--vs-pearl);
}

.vl-post-text {
  grid-area: text;
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.vl-post .ha-zones {
  grid-area: zones;
  margin-top: 12px;
}

.vl-post-counts {
  grid-area: counts;
  margin-top: 14px;
  color: var(--vs-mist);
  font-size: 0.8rem;
  font-style: normal;
}

.vl-post-counts b {
  color: var(--vs-pearl);
  font: 600 0.95rem/1 var(--vs-font-number);
  font-variant-numeric: tabular-nums;
}

.vl-post-go {
  display: inline-flex;
  min-height: 40px;
  grid-area: go;
  align-items: center;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgb(var(--post-accent));
  box-shadow: inset 0 0 0 1.5px rgb(var(--post-accent));
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

.vl-board-item.is-solo .vl-post-go {
  color: var(--vs-rose-soft);
}

.vl-post:hover .vl-post-go {
  background: rgba(var(--post-accent), 0.12);
}

/* ほかの遊び方 */
.vl-others {
  display: grid;
  gap: 12px;
}

.vl-others h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.vl-others-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vl-tile {
  --tile-accent: 168, 139, 255;
  --tile-icon: var(--vs-icon-target);
  position: relative;
  display: flex;
  min-height: 96px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 42px 14px 12px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  color: var(--vs-pearl);
  text-align: left;
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px var(--ha-line);
  transition: box-shadow 160ms ease;
}

.vl-tile:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--tile-accent), 0.5);
}

.vl-tile::before {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  content: "";
  background: rgb(var(--tile-accent));
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
  mask: var(--tile-icon) center / contain no-repeat;
}

.vl-tile small {
  order: 2;
  color: var(--vs-mist);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
}

.vl-tile span {
  order: 1;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.vl-tile-market {
  --tile-accent: 230, 193, 122;
  --tile-icon: var(--vs-icon-gem);
}

.vl-tile-tribute {
  --tile-accent: 255, 79, 163;
}

.vl-tile-ai {
  --tile-accent: 255, 138, 182;
  --tile-icon: var(--vs-icon-spark);
}

.vl-tile-roulette {
  --tile-accent: 255, 176, 112;
  --tile-icon: var(--vs-icon-drum);
}

.vl-tile-danwaku {
  --tile-accent: 176, 214, 150;
  --tile-icon: var(--vs-icon-lotus);
}

.vl-tile-stadium {
  --tile-accent: 143, 216, 255;
  --tile-icon: var(--vs-icon-stadium);
}

/* ランキングとAnjuPayの入口。スマホでは画面下のタブ、PCでは横並び。 */
.vl-tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vl-tab {
  --tab-icon: var(--vs-icon-crown);
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: var(--vs-pearl);
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px var(--ha-line);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}

.vl-tab::before {
  flex: none;
  width: 22px;
  height: 22px;
  content: "";
  background: var(--vs-mist);
  -webkit-mask: var(--tab-icon) center / contain no-repeat;
  mask: var(--tab-icon) center / contain no-repeat;
}

.vl-tab:hover {
  color: var(--vs-rose-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 63, 134, 0.4);
}

.vl-tab:hover::before {
  background: var(--vs-rose-soft);
}

.vl-tab-mission { --tab-icon: var(--vs-icon-list); }
.vl-tab-shop { --tab-icon: var(--vs-icon-bag); }
.vl-tab-wallet { --tab-icon: var(--vs-icon-wallet); }

/* 見出しつきの区画 */
.vl-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.vl-section-head > span {
  color: var(--vs-rose-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vl-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.vl-list {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px var(--ha-line);
}

.vl-row {
  --row-icon: var(--vs-icon-bars);
  position: relative;
  display: flex;
  width: 100%;
  min-height: 60px;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 11px 44px 11px 50px;
  border: 0;
  border-bottom: 1px solid var(--ha-line);
  cursor: pointer;
  color: var(--vs-pearl);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}

.vl-row:last-child {
  border-bottom: 0;
}

.vl-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.vl-row small {
  color: var(--vs-mist);
  font-size: 0.72rem;
  font-weight: 500;
}

.vl-row::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  content: "";
  background: var(--vs-mist);
  -webkit-mask: var(--row-icon) center / contain no-repeat;
  mask: var(--row-icon) center / contain no-repeat;
  transform: translateY(-50%);
}

.vl-row::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  content: "";
  background: var(--vs-mist);
  -webkit-mask: var(--ha-icon-arrow) center / contain no-repeat;
  mask: var(--ha-icon-arrow) center / contain no-repeat;
  transform: translateY(-50%);
}

.vl-row-achievement { --row-icon: var(--vs-icon-medal); }
.vl-row-audio { --row-icon: var(--vs-icon-mic); }

/* 既存の区画も、飾りのない夜の面へそろえる */
.vl-landing .landing-community,
.vl-landing .landing-flea,
.vl-more {
  max-width: none;
  margin: 0;
}

.vl-landing .landing-community {
  border-color: var(--ha-line);
  background: var(--ha-surface);
}

.vl-landing .landing-flea {
  border-color: rgba(111, 227, 207, 0.22);
  background: var(--ha-surface);
}


.vl-safe {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--ha-surface);
  box-shadow: inset 0 0 0 1px rgba(111, 227, 207, 0.2);
}

.vl-safe summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  cursor: pointer;
  color: var(--vs-mist);
  font-size: 0.78rem;
  list-style: none;
}

.vl-safe summary::-webkit-details-marker {
  display: none;
}

.vl-safe summary b {
  width: 100%;
  color: var(--vs-pearl);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

.vl-safe summary b::after {
  margin-left: 8px;
  content: "くわしく ›";
  color: var(--vs-mint);
  font: 700 0.72rem/1 var(--vs-font-body);
}

.vl-safe[open] summary b::after {
  content: "閉じる";
}

.vl-safe summary span::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  content: "";
  vertical-align: middle;
  background: var(--vs-mint);
}

.vl-safe .lobby-privacy,
.vl-safe .mode-note {
  margin: 12px 0 0;
  color: var(--vs-mist);
  font-size: 0.78rem;
  line-height: 1.7;
}

/*
  PC：入口（見出しと例・通常1on1・いま入れる卓・ほかの遊び方・メニュー）は中央の880px列にそろえる。
  推しカードは左、記録と道具・安心案内は右に分け、それぞれ上から詰めて積む。
*/
@media (min-width: 900px) {
  .hero.vl-landing {
    display: flow-root;
    max-width: 1120px;
    margin-inline: auto;
  }

  .hero.vl-landing > .vl-hero,
  .hero.vl-landing > .hero-actions,
  .hero.vl-landing > .vl-board,
  .hero.vl-landing > .vl-others,
  .hero.vl-landing > .vl-tabbar {
    width: min(880px, 100%);
    margin-inline: auto;
  }

  .hero.vl-landing > .vl-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding-top: 24px;
  }

  .hero.vl-landing > .hero-actions {
    margin-top: 28px;
  }

  .hero.vl-landing > .vl-board {
    margin-top: 36px;
  }

  /* いま入れる卓はPCでも1本のタイムライン。札の中で説明と帯を左右に並べる。 */
  .vl-post {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 300px) auto;
    grid-template-areas:
      "icon title zones tag"
      "icon sub zones tag"
      "text text text text"
      "counts counts counts go";
    padding: 18px 20px;
  }

  .vl-post .ha-zones {
    align-self: center;
    margin-top: 0;
  }

  .hero.vl-landing > .vl-others {
    margin-top: 32px;
  }

  .vl-others-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero.vl-landing > .vl-tabbar {
    margin-top: 16px;
  }

  .hero.vl-landing > .landing-community {
    float: left;
    clear: left;
    width: calc(50% - 12px);
    margin: 24px 0 0;
  }

  .hero.vl-landing > .vl-more,
  .hero.vl-landing > .vl-safe {
    float: right;
    clear: right;
    width: calc(50% - 12px);
    margin: 24px 0 0;
  }

}

/* PC：左の列に見出しと入口、右の列に見本と口調スイッチ。入口も最初の画面に入れる。 */
@media (min-width: 900px) {
  .hero.vl-landing > .vl-hero {
    grid-template-areas: "copy stage" "actions stage";
    row-gap: 24px;
  }

  .vl-copy {
    align-self: end;
  }

  .vl-landing .vl-hero > .hero-actions {
    align-self: start;
  }

  .vl-trust {
    justify-content: flex-start;
  }

  .vl-landing .vl-hero > .hero-actions .vl-rule {
    text-align: left;
  }

  .hero.vl-landing > .vl-meibamen {
    width: min(880px, 100%);
    margin: 32px auto 0;
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 16px 22px;
  }
}

/* 推しカードの見出しは折り返さず、操作ボタンが入らない時は次の行へ送る */
.vl-landing .community-message-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.vl-landing .community-message-head strong {
  white-space: nowrap;
}

/* スマホ：タブは画面下に固定。 */
@media (max-width: 760px) {
  .hero.vl-landing {
    padding-block: 0 8px;
  }

  .site-header {
    gap: 10px;
  }

  .brand {
    min-width: 0;
    overflow: hidden;
  }

  .brand strong {
    overflow: hidden;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-badges {
    flex: none;
    flex-wrap: nowrap;
  }

  .status-dot,
  .audio-toggle {
    white-space: nowrap;
  }

  .vl-tabbar {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 9, 18, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 -1px 0 var(--ha-line);
  }

  .vl-tab {
    min-height: 54px;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border-radius: 12px;
    color: var(--vs-mist);
    background: transparent;
    box-shadow: none;
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .vl-tab::before {
    width: 24px;
    height: 24px;
    background: var(--vs-mist);
  }

  .vl-tab:hover,
  .vl-tab:focus-visible {
    color: var(--vs-rose-soft);
    box-shadow: none;
  }

  .vl-tab:hover::before,
  .vl-tab:focus-visible::before {
    background: var(--vs-rose-soft);
  }

  body:has(.vl-landing) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

}

@media (max-width: 430px) {
  .header-badges .status-dot {
    display: none;
  }
}

@media (max-width: 360px) {
  .vl-post {
    padding: 14px;
  }

  .vl-post-counts {
    font-size: 0.74rem;
  }

  .vl-main-button > span {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-satin::after,
  .vs-foil-text,
  .vl-copy,
  .vl-hero-thread .ha-msg.is-mine,
  .vl-hero-thread .chat-fx-hearts::before,
  .vl-hero-thread .vl-persona-bubble.is-bump,
  .vl-hero-typing .chat-typing-dots i,
  .vl-live i {
    animation: none;
  }
}