:root {
  /* Neutral off-black base — deliberately not the blue/purple AI default */
  --bg: #0e0e11;
  --bg2: #16161b;
  --card: #1c1c22;
  --card2: #24242c;
  --line: #32323c;
  --line-soft: #26262e;

  /* One brand accent. Amber reads as game-show energy and stays under 80% saturation. */
  --accent: #e0a92e;
  --accent-dim: #a87d1f;
  --accent-tint: rgba(224, 169, 46, .13);

  /* Semantic only — these communicate correct/incorrect, they are not brand colors */
  --ok: #5fbf7f;
  --danger: #e2687f;
  --warn: #d8a33c;

  --text: #f2f0ec;
  --muted: #9c9a94;

  /* Shadows carry the background hue instead of flat black */
  --shadow-sm: 0 2px 8px rgba(6, 6, 9, .4);
  --shadow-md: 0 12px 32px rgba(6, 6, 9, .55);
  --shadow-lg: 0 24px 64px rgba(6, 6, 9, .65);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Korean + Latin get the Pretendard webfont */
  --font-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);

  /* z-index scale */
  --z-grain: 1;
  --z-topbar: 50;
  --z-toast: 100;
  --z-modal: 200;
}

/* Japanese and Chinese use system fonts. Pretendard's unicode-range covers Han
   characters, so leaving it first would both download Korean chunks these users
   never need and mix two typefaces inside a single sentence.
   Redefining --font-body also updates --font-display, which references it. */
html[lang="ja"] {
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html[lang="zh"] {
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  display: flex;
  flex-direction: column;
  /* Off-center warm glow — breaks the perfectly symmetrical gradient */
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(224, 169, 46, .10) 0%, transparent 62%),
    radial-gradient(1100px 700px at 12% 4%, rgba(120, 118, 132, .07) 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

/* Fine grain breaks the digital flatness. Inline SVG = no extra request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

#app {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* Bottom padding is optically larger than top — equal values read as top-heavy */
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* Skeleton placeholder instead of a bare ellipsis */
.loading {
  margin-top: 34vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: transparent;
}
.loading::before,
.loading::after {
  content: "";
  border-radius: 14px;
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.loading::before { width: 58%; height: 30px; }
.loading::after { width: 82%; height: 96px; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---- Top controls (sound + language) ---- */
#topbar {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: var(--z-topbar);
  display: flex;
  gap: 6px;
  align-items: center;
}
#muteBtn {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--edge);
  display: flex; align-items: center; justify-content: center;
}
#muteBtn.muted { opacity: .5; }
#langBtn {
  width: auto;
  margin: 0;
  height: 34px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm), var(--edge);
  display: flex; align-items: center; gap: 5px;
}
#muteBtn:hover, #langBtn:hover { background: var(--card2); border-color: var(--accent-dim); }

/* Language picker modal list */
.lang-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lang-opt {
  width: 100%; margin: 0;
  padding: 13px 16px;
  text-align: left;
  font-size: 16px; font-weight: 500;
  background: var(--bg2);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.lang-opt:hover { background: var(--card2); border-color: var(--accent-dim); }
.lang-opt.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  font-weight: 600;
}
.lang-opt.active::after { content: "✓"; color: var(--accent); font-weight: 700; }

/* ---- Spectator badge ---- */
.spectate-badge {
  display: inline-block;
  background: var(--accent-tint);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 auto 10px;
}
.chip.spectator { opacity: .75; border-style: dashed; }
.chip.spectator .stag { font-size: 10px; color: var(--accent); }

/* ---- Typography ---- */
h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  margin: 8px 0 4px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.6; text-wrap: pretty; }
.tiny { font-size: 12px; color: var(--muted); line-height: 1.5; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ---- Brand ---- */
.brand { text-align: center; margin: 24px 0 30px; }
.brand .logo {
  font-size: 50px;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.brand h1 { color: var(--text); }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md), var(--edge);
}

/* ---- Inputs ---- */
label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 7px;
  letter-spacing: .02em;
}
input[type=text], textarea {
  width: 100%;
  background: var(--bg2);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
input[type=text]:hover, textarea:hover { border-color: var(--line); background: #191920; }
input[type=text]:focus, textarea:focus { border-color: var(--accent); background: #191920; }
textarea { resize: none; line-height: 1.6; }
.code-input {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .28em; font-weight: 700;
  text-align: center; font-size: 24px; text-indent: .28em;
  font-variant-numeric: tabular-nums;
}

/* ---- Buttons ---- */
button {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .01em;
  color: #1a1405;
  background: var(--accent);
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1),
              background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .15s ease;
}
button:hover { background: #eab63f; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
button:active { transform: scale(.98) translateY(0); }
button:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; background: var(--card2); color: var(--muted); }
button:disabled:hover { background: var(--card2); transform: none; }

button.secondary { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
button.secondary:hover { background: #2c2c36; border-color: var(--accent-dim); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.ghost:hover { background: var(--card); color: var(--text); border-color: var(--line); }
button.outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent-dim); }
button.outline:hover { background: var(--accent-tint); border-color: var(--accent); }

/* Visible keyboard focus on every interactive element — was missing entirely */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}
button:focus-visible, .avatar-opt:focus-visible, .lang-opt:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.divider { text-align: center; color: var(--muted); font-size: 12px; margin: 20px 0; position: relative; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%;
  width: 38%; height: 1px; background: var(--line-soft); }
.divider::before { left: 0; } .divider::after { right: 0; }

.mt { margin-top: 12px; }
.center { text-align: center; }
/* Utility classes replacing former inline styles */
.brand-sm { margin: 12px 0 20px; }
.brand-sm h1 { font-size: 24px; }
.brand-end { margin: 20px 0; }
.brand-end h1 { font-size: 27px; }
.invited-line { margin-bottom: 10px; }
.invited-code { color: var(--accent); font-family: var(--font-display); letter-spacing: .1em; }
.wait-tight { padding: 12px 0; }

/* ---- Player list ---- */
.players { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--card2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.chip.host { border-color: var(--accent-dim); }
.chip.off { opacity: .35; text-decoration: line-through; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.chip.off .dot { background: var(--muted); }
.chip .av { font-size: 17px; line-height: 1; }
.chip.host .tag { font-size: 10px; color: var(--accent); font-weight: 600; }

/* ---- Avatar picker ---- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.avatar-opt {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: var(--bg2);
  border: 2px solid var(--line-soft);
  border-radius: 12px;
  color: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease;
}
.avatar-opt:hover { border-color: var(--accent-dim); background: var(--card2); transform: translateY(-1px); }
.avatar-opt.sel {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: scale(1.08);
}
.avatar-opt.sel:hover { transform: scale(1.08) translateY(-1px); }
@media (max-width: 400px) {
  .avatar-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---- Room code display ---- */
.roomcode {
  text-align: center;
  font-family: var(--font-display);
  font-size: 44px; font-weight: 700; letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: var(--accent); margin: 8px 0 4px;
  text-indent: .22em;
}
.share-row { display: flex; gap: 10px; margin-top: 12px; }
.share-row button { flex: 1; }

/* ---- Timer ---- */
.timer-wrap { text-align: center; margin: 4px 0 16px; }
.timer {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
  transition: color .3s ease;
}
.timer.low { color: var(--danger); }
.progress {
  height: 6px; background: var(--bg2); border-radius: 999px;
  overflow: hidden; margin-top: 10px;
  border: 1px solid var(--line-soft);
}
.progress > div {
  height: 100%; background: var(--accent);
  transition: width 1s linear, background .3s ease;
}
.timer.low ~ .progress > div { background: var(--danger); }

/* ---- Phase banner ---- */
.banner {
  text-align: center; padding: 20px 18px; border-radius: 16px; margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm), var(--edge);
}
.banner .role {
  font-size: 11px; color: var(--muted); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.banner .it-name {
  font-size: 27px; font-weight: 700; margin: 6px 0 0;
  letter-spacing: -.02em; text-wrap: balance;
}
.round-pill {
  display: inline-block; background: transparent; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px 12px; font-size: 11px; color: var(--muted);
  margin-bottom: 12px; font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ---- Topic (라운드 주제) ---- */
.topic-card {
  text-align: center;
  background: var(--accent-tint);
  border: 1px solid var(--accent-dim);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
}
.topic-card .topic-label {
  font-size: 11px; color: var(--accent); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.topic-card .topic-q {
  font-size: 21px; font-weight: 600; line-height: 1.45; margin-top: 8px;
  letter-spacing: -.01em; word-break: keep-all; text-wrap: balance;
}
.topic-mini {
  text-align: center; font-size: 13px; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 12px; word-break: keep-all;
}

/* ---- Submissions / guessing ---- */
.subitem {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 15px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease;
}
.subitem:hover { border-color: var(--line); }
.subitem .txt { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.subitem .pick { margin-top: 12px; }
.subitem select {
  width: 100%; background: var(--bg2); color: var(--text); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 12px; font-size: 15px; font-family: inherit;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.subitem select:hover { border-color: var(--accent-dim); }
.subitem select.filled { border-color: var(--accent); background: var(--accent-tint); }

.reveal-badge {
  display: inline-block; font-size: 12px; padding: 4px 11px; border-radius: 8px;
  margin-top: 10px; font-weight: 500;
}
.reveal-badge.correct { background: rgba(95,191,127,.14); color: var(--ok); border: 1px solid rgba(95,191,127,.45); }
.reveal-badge.wrong { background: rgba(226,104,127,.12); color: var(--danger); border: 1px solid rgba(226,104,127,.4); }
.guess-line { font-size: 13px; color: var(--muted); margin-top: 9px; }
.reveal-btn-mini { width: auto; padding: 9px 14px; font-size: 13px; margin-top: 10px; }

/* ---- Score / result ---- */
.score-big { text-align: center; margin: 6px 0 16px; }
.score-big .num {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1;
}
.score-big .num .slash { color: var(--muted); font-size: 30px; font-weight: 500; }
.score-big .tiny { margin-top: 8px; }

.result-table { width: 100%; }
.result-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.result-row:last-child { border-bottom: none; }
.result-row .name { font-weight: 500; }
.result-row .sc {
  color: var(--accent); font-weight: 600; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; flex: none;
}

.wait-anim { text-align: center; color: var(--muted); padding: 24px 0; }
.wait-anim .big { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.wait-anim p { margin: 6px 0; }
.dots::after { content: "…"; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0% { content: "";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(16px);
  background: var(--card2); color: var(--text); padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; z-index: var(--z-toast); max-width: 90%;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), var(--edge);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.footer-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.6; }

/* ---- About / how-to-play / FAQ (crawlable landing content) ---- */
#about {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
/* Hidden once the player is inside a room — landing content only */
body.in-room #about { display: none; }
.about-inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 16px 8px;
}
.about-block { margin-bottom: 34px; }
.about-block:last-child { margin-bottom: 12px; }
.about-block h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.about-lead {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; }
.steps .step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.steps .step:last-child { border-bottom: none; }
.steps .step-n {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 {
  font-size: 15px; font-weight: 600; margin: 3px 0 4px;
  letter-spacing: -.01em; word-break: keep-all;
}
.steps p {
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  margin: 0; word-break: keep-all; text-wrap: pretty;
}

/* FAQ */
.faq-item {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
  font-size: 14.5px; font-weight: 600; margin: 0 0 5px;
  word-break: keep-all;
}
.faq-item p {
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  margin: 0; word-break: keep-all; text-wrap: pretty;
}

/* ---- Site footer ---- */
#sitefoot {
  border-top: 1px solid var(--line-soft);
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  position: relative;
  z-index: 2;
}
#sitefoot .foot-links {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
}
#sitefoot .foot-links button {
  width: auto; margin: 0; padding: 5px 7px;
  background: none; border: none; color: var(--muted);
  font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  border-radius: 6px;
}
#sitefoot .foot-links button:hover {
  color: var(--accent); background: none; transform: none; box-shadow: none;
  text-decoration-color: var(--accent-dim);
}
#sitefoot .sep { color: var(--line); font-size: 12px; }
#sitefoot .copy { color: var(--muted); font-size: 11px; margin-top: 10px; opacity: .6; }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,9,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  animation: modalIn .18s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalBoxIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 82dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow-lg), var(--edge);
  animation: modalBoxIn .22s cubic-bezier(.34,1.56,.64,1);
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; background: var(--card2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #2c2c36; color: var(--text); transform: none; box-shadow: none; }
.modal-box h3 {
  margin: 0 34px 12px 0; font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; text-wrap: balance;
}
.modal-box label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 7px; }
.modal-box .sub { font-size: 13px; margin: 0 0 14px; }

/* Confirm dialog (replaces window.confirm) */
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions button { flex: 1; margin: 0; }
.copy-link-box {
  width: 100%; margin-top: 6px; font-size: 13px;
  word-break: break-all; user-select: all;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; color: var(--text);
}

/* Legal document typography */
.legal { font-size: 14px; line-height: 1.7; color: var(--text); }
.legal h4 { font-size: 14px; margin: 18px 0 6px; color: var(--accent); font-weight: 600; }
.legal p { margin: 8px 0; color: var(--muted); text-wrap: pretty; }
.legal ul { margin: 8px 0; padding-left: 18px; color: var(--muted); }
.legal li { margin: 5px 0; }
.legal b { color: var(--text); font-weight: 600; }
.legal .upd { font-size: 12px; opacity: .7; margin-top: 0; }
.legal .note { font-size: 12px; opacity: .7; margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  button:hover, .avatar-opt:hover { transform: none; }
}