/* StoneAge Barter: Mammoth Trade — Mobile-first stylesheet */

/* ── Custom Properties ──────────────────────────────────────────────────────── */
:root {
  --color-bg:          #1a0f00;
  --color-surface:     #2d1e06;
  --color-surface-2:   #3d2a0a;
  --color-amber:       #c8860a;
  --color-amber-light: #f0a830;
  --color-amber-dark:  #8a5c06;
  --color-stone:       #7a6a50;
  --color-stone-light: #b0a080;
  --color-text:        #f5e8c8;
  --color-text-muted:  #a09070;
  --color-danger:      #c0392b;
  --color-success:     #27ae60;
  --color-wallet:      #627eea;  /* Ethereum blue */
  --color-legacy:      #9b59b6;  /* Mammoth Legacy purple — timeless, solemn */
  --color-legacy-dark: #6c3483;
  --color-legacy-glow: rgba(155,89,182,0.35);

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-btn:  0 4px 16px rgba(200,134,10,0.4);

  /* Safe area insets for iPhone notch / home indicator */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout: App Shell ──────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + var(--safe-top));
  background: linear-gradient(180deg, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.app-logo .mammoth-icon { font-size: 28px; line-height: 1; }

.app-logo .logo-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-amber-light);
  line-height: 1.2;
}

.app-logo .logo-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  color: var(--color-text);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { transform: scale(0.93); background: var(--color-surface-2); }

/* ── Main content ───────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: 0 16px 100px;  /* bottom pad for nav bar */
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

/* ── Section titles ─────────────────────────────────────────────────────────── */
.section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-amber);
  margin: 24px 0 12px;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.card + .card { margin-top: 12px; }

/* ── ══════════════════════════════════════════════════════════════════════════
   THE BIG MAMMOTH HUNT BUTTON
   — Full-width, finger-friendly, unmissable on any screen size
   ══════════════════════════════════════════════════════════════════════════ */

.hunt-button-wrapper {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom));   /* sits just above the nav bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none; /* only the button itself is interactive */
}

.hunt-btn {
  pointer-events: all;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 35% 35%, var(--color-amber-light), var(--color-amber-dark));
  border: 4px solid var(--color-amber-light);
  box-shadow:
    0 0 0 6px rgba(200,134,10,0.25),
    0 8px 32px rgba(200,134,10,0.6),
    var(--shadow-btn);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.12s;
  /* Prevent double-tap zoom on iOS */
  touch-action: manipulation;
  user-select: none;
}

.hunt-btn:active {
  transform: scale(0.88);
  box-shadow:
    0 0 0 4px rgba(200,134,10,0.15),
    0 4px 16px rgba(200,134,10,0.4);
}

.hunt-btn .hunt-icon  { font-size: 36px; line-height: 1; margin-bottom: 1px; }
.hunt-btn .hunt-label { font-size: 9px; font-weight: 700; color: var(--color-bg); letter-spacing: 0.04em; text-transform: uppercase; }

.hunt-btn-hint {
  pointer-events: none;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 120px;
}

/* Hidden native file input (triggered by the hunt button) */
#camera-input { display: none; }

/* ── Wallet section ─────────────────────────────────────────────────────────── */
.wallet-card {
  background: linear-gradient(135deg, #1a2040, #0d1530);
  border: 1px solid rgba(98,126,234,0.3);
}

.wallet-address {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  color: var(--color-wallet);
  word-break: break-all;
  margin-top: 8px;
}

.wallet-disclaimer {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 10px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.wallet-disclaimer::before { content: '🔒'; flex-shrink: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 100%;
  min-height: 52px;  /* Apple HIG minimum tap target */
}

.btn:active { transform: scale(0.97); opacity: 0.85; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-amber-light), var(--color-amber));
  color: var(--color-bg);
  box-shadow: var(--shadow-btn);
}

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-stone);
}

.btn-wallet {
  background: linear-gradient(135deg, #627eea, #4a5fd0);
  color: #fff;
  box-shadow: 0 4px 16px rgba(98,126,234,0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #c0392b, #922b21);
  color: #fff;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 13px;
  min-height: 44px;
}

.btn + .btn { margin-top: 10px; }

/* ── Item cards ─────────────────────────────────────────────────────────────── */
.item-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.item-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
}

.item-info { flex: 1; min-width: 0; }
.item-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-desc  { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

.item-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
  background: var(--color-surface-2);
  color: var(--color-stone-light);
}

/* Trade status colors */
.status-PENDING       { background: rgba(200,134,10,0.2); color: var(--color-amber-light); }
.status-MUTUALLY_AGREED { background: rgba(39,174,96,0.2); color: #6fcf97; }
.status-ESCROW_LOCKED { background: rgba(98,126,234,0.2); color: #a0b4ff; }
.status-COMPLETED     { background: rgba(39,174,96,0.2); color: #6fcf97; }
.status-BURNED_MAD    { background: rgba(192,57,43,0.2); color: #f08080; }

/* ── Form elements ──────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-stone-light);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 16px;  /* prevents iOS zoom on focus */
  line-height: 1.4;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-amber);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a09070' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* ── Image preview ──────────────────────────────────────────────────────────── */
.capture-preview {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-stone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
  margin-bottom: 16px;
}
.capture-preview.has-image { border-style: solid; border-color: var(--color-amber-dark); }
.capture-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ── Bottom navigation ──────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  align-items: stretch;
  background: var(--color-surface);
  border-top: 1px solid var(--color-surface-2);
  padding-bottom: var(--safe-bottom);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
  color: var(--color-stone);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  border: none;
  background: none;
}

.nav-item .nav-icon { font-size: 22px; line-height: 1; }
.nav-item.active { color: var(--color-amber-light); }
.nav-item:active { opacity: 0.7; }

/* Center slot: empty space for the floating hunt button */
.nav-center-gap { flex: 1.4; pointer-events: none; }

/* Legacy nav tab — slightly smaller text to fit 5 items */
.nav-legacy { font-size: 10px; }
.nav-legacy.active {
  color: #c09648;
  text-shadow: 0 0 8px rgba(192,150,72,0.5);
}

/* ── Toast / Offline banner ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: calc(70px + var(--safe-top));
  left: 16px;
  right: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-card);
  animation: slideDown 0.25s ease-out, fadeOut 0.3s 3.5s ease-in forwards;
  pointer-events: all;
}
.toast-success { border-left: 4px solid var(--color-success); }
.toast-error   { border-left: 4px solid var(--color-danger); }
.toast-info    { border-left: 4px solid var(--color-amber); }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* ── PWA Install prompt ─────────────────────────────────────────────────────── */
.install-prompt {
  margin: 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-amber-dark);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
}

.install-prompt .install-icon { font-size: 28px; flex-shrink: 0; }
.install-prompt .install-text { flex: 1; font-size: 13px; color: var(--color-text-muted); }
.install-prompt .install-text strong { color: var(--color-text); display: block; margin-bottom: 2px; }

/* ── Screens ────────────────────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.text-muted  { color: var(--color-text-muted); }
.text-amber  { color: var(--color-amber-light); }
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.gap-8 { gap: 8px; }

.divider {
  border: none;
  border-top: 1px solid var(--color-surface-2);
  margin: 16px 0;
}

.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-surface-2);
  border-top-color: var(--color-amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .hunt-btn { width: 100px; height: 100px; }
  .hunt-btn .hunt-icon { font-size: 42px; }
}

@media (prefers-color-scheme: light) {
  /* Force dark mode — this is a primitive barter app, it lives in the dark */
  :root { color-scheme: dark; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DAIFUGO QUEST — Screen styles
   Three-act narrative map: Q01 → Q02 → Q03
   Timeline left-rail + gold glyphs + progressive reveal
   ═══════════════════════════════════════════════════════════════════════════════ */

#screen-quest {
  --qst-gold:      #c09648;
  --qst-gold-dim:  rgba(192,150,72,0.14);
  --qst-gold-rule: rgba(192,150,72,0.25);
  --qst-gold-glow: rgba(192,150,72,0.4);
  --qst-cream:     #f0e8d4;
  --qst-ink:       #7a6a50;
  --qst-ink-dim:   rgba(122,106,80,0.45);
  --qst-locked:    rgba(40,30,16,0.7);
  --qst-serif:     Georgia, 'Noto Serif JP', serif;
  --qst-mono:      'SF Mono', Menlo, monospace;
}

/* ── Header + progress ───────────────────────────────────────────────────────── */

.qst-header {
  padding: 28px 20px 20px;
  border-bottom: 1px solid var(--qst-gold-rule);
}

.qst-header-eyebrow {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--qst-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.qst-header-title {
  font-family: var(--qst-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--qst-cream);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.qst-header-sub {
  font-size: 12px;
  color: var(--qst-ink);
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.qst-progress-track {
  height: 3px;
  background: rgba(122,106,80,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.qst-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8a6820, var(--qst-gold), #e8c060);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 8px var(--qst-gold-glow);
}

.qst-progress-label {
  font-family: var(--qst-mono);
  font-size: 10px;
  color: var(--qst-ink);
  letter-spacing: 0.06em;
}

/* ── Auth gate ───────────────────────────────────────────────────────────────── */

.qst-auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}

.qst-auth-icon {
  font-size: 52px;
  color: var(--qst-gold-rule);
  line-height: 1;
}

.qst-auth-msg {
  font-size: 14px;
  color: var(--qst-cream);
  line-height: 1.7;
  opacity: 0.8;
}

.qst-btn-passkey {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--qst-gold);
  border: 1px solid var(--qst-gold-rule);
  border-radius: 6px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.18s, box-shadow 0.18s;
}

.qst-btn-passkey:hover {
  background: var(--qst-gold-dim);
  box-shadow: 0 0 16px var(--qst-gold-glow);
}

.qst-auth-hint {
  font-size: 10px;
  color: var(--qst-ink);
  letter-spacing: 0.06em;
}

/* ── Quest map ───────────────────────────────────────────────────────────────── */

.qst-map {
  padding: 8px 0 40px;
}

/* ── Single act ──────────────────────────────────────────────────────────────── */

.qst-act {
  display: flex;
  gap: 0;
  position: relative;
}

/* Left rail */
.qst-act-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
  padding-top: 22px;
}

.qst-act-glyph {
  font-size: 28px;
  line-height: 1;
  color: var(--qst-gold);
  transition: filter 0.3s;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--qst-gold-rule);
  border-radius: 50%;
  background: rgba(10,7,2,0.8);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.qst-act[data-status="LOCKED"] .qst-act-glyph {
  color: var(--qst-ink-dim);
  border-color: var(--qst-ink-dim);
  filter: none;
}

.qst-act[data-status="COMPLETED"] .qst-act-glyph {
  background: var(--qst-gold-dim);
  border-color: var(--qst-gold);
  filter: drop-shadow(0 0 8px var(--qst-gold-glow));
}

.qst-act-line {
  width: 1px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(180deg, var(--qst-gold-rule), transparent);
  margin-top: 4px;
}

.qst-act-line.last {
  background: none;
}

/* Content area */
.qst-act-content {
  flex: 1;
  padding: 20px 20px 28px 8px;
  position: relative;
}

.qst-act-num {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qst-gold);
  margin-bottom: 4px;
}

.qst-act[data-status="LOCKED"] .qst-act-num {
  color: var(--qst-ink);
}

.qst-act-title {
  font-family: var(--qst-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--qst-cream);
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}

.qst-act[data-status="LOCKED"] .qst-act-title {
  color: var(--qst-ink);
}

.qst-act-en {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--qst-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-variant: small-caps;
}

.qst-act[data-status="LOCKED"] .qst-act-en {
  color: var(--qst-ink-dim);
}

.qst-act-desc {
  font-size: 13px;
  color: var(--qst-ink);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* ── Act form fields ─────────────────────────────────────────────────────────── */

.qst-act-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qst-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qst-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qst-gold);
  font-variant: small-caps;
}

.qst-input,
.qst-select,
.qst-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--qst-ink-dim);
  border-radius: 0;
  color: var(--qst-cream);
  font-size: 14px;
  padding: 8px 0;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.qst-input:focus,
.qst-select:focus,
.qst-textarea:focus {
  border-bottom-color: var(--qst-gold);
  box-shadow: 0 1px 0 0 var(--qst-gold);
}

.qst-textarea {
  resize: vertical;
  line-height: 1.7;
  min-height: 88px;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.qst-textarea::placeholder,
.qst-input::placeholder {
  color: var(--qst-ink-dim);
  font-size: 13px;
}

.qst-textarea-count {
  font-family: var(--qst-mono);
  font-size: 10px;
  color: var(--qst-ink);
  text-align: right;
  margin-top: -6px;
}

.qst-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c09648' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  color: rgba(240,232,212,0.7);
  font-size: 13px;
}

.qst-select option { background: #1a0f00; color: var(--qst-cream); }

/* ── Primary CTA ─────────────────────────────────────────────────────────────── */

.qst-btn-primary {
  background: transparent;
  color: var(--qst-gold);
  border: 1px solid var(--qst-gold-rule);
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant: small-caps;
  width: 100%;
  transition: background 0.18s, box-shadow 0.18s;
  margin-top: 4px;
}

.qst-btn-primary:hover {
  background: var(--qst-gold-dim);
  box-shadow: 0 0 16px var(--qst-gold-glow);
}

.qst-btn-primary:active {
  transform: scale(0.98);
}

/* Final quest CTA gets an extra gold fill on hover */
.qst-btn-gold:hover {
  background: rgba(192,150,72,0.2);
  border-color: var(--qst-gold);
  box-shadow: 0 0 24px var(--qst-gold-glow);
}

.qst-03-guide {
  font-size: 12px;
  color: var(--qst-ink);
  line-height: 1.6;
  border-left: 2px solid var(--qst-gold-rule);
  padding-left: 10px;
  margin-bottom: 4px;
}

/* ── Completion state ────────────────────────────────────────────────────────── */

.qst-act-done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--qst-gold-rule);
  border-radius: 4px;
  background: var(--qst-gold-dim);
}

.qst-done-check {
  color: var(--qst-gold);
  font-size: 16px;
  filter: drop-shadow(0 0 6px var(--qst-gold-glow));
}

.qst-done-label {
  font-size: 13px;
  color: var(--qst-cream);
  letter-spacing: 0.05em;
  flex: 1;
}

.qst-done-tx {
  font-family: var(--qst-mono);
  font-size: 10px;
  color: var(--qst-ink);
  width: 100%;
  word-break: break-all;
}

.qst-done-count {
  font-size: 11px;
  color: var(--qst-ink);
  width: 100%;
}

/* ── Locked overlay ──────────────────────────────────────────────────────────── */

.qst-locked-overlay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--qst-locked);
  border-radius: 4px;
  border: 1px solid var(--qst-ink-dim);
  margin-top: 4px;
}

.qst-locked-icon {
  font-size: 18px;
  color: var(--qst-ink);
}

.qst-locked-msg {
  font-size: 12px;
  color: var(--qst-ink);
  letter-spacing: 0.04em;
}

/* ── Nav indicator ───────────────────────────────────────────────────────────── */

.nav-quest.active {
  color: #c09648;
  text-shadow: 0 0 8px rgba(192,150,72,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAMMOTH LEGACY — Design System v2
   Philosophy: trust-bank gravitas × Web3 transparency
   Palette: antique gold hairlines · parchment text · obsidian depths
   Typography: serif for ceremony, monospace for cryptographic truth
   ═══════════════════════════════════════════════════════════════════════════════ */

#screen-legacy {
  --lg-gold:       #c09648;
  --lg-gold-dim:   rgba(192,150,72,0.15);
  --lg-gold-rule:  rgba(192,150,72,0.28);
  --lg-gold-glow:  rgba(192,150,72,0.45);
  --lg-cream:      #f0e8d4;
  --lg-cream-dim:  rgba(240,232,212,0.55);
  --lg-ink:        #7a6a50;
  --lg-ink-dim:    rgba(122,106,80,0.5);
  --lg-surface:    rgba(22,15,6,0.98);
  --lg-serif:      Georgia, 'Noto Serif JP', 'Times New Roman', serif;
  --lg-mono:       'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
}

/* ── Wordmark header ────────────────────────────────────────────────────────── */

.lg-header {
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lg-header-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--lg-gold-rule) 20%, var(--lg-gold) 50%,
    var(--lg-gold-rule) 80%, transparent 100%);
}

.lg-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.lg-header-crest {
  font-size: 38px;
  line-height: 1;
  color: var(--lg-gold);
  opacity: 0.9;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px var(--lg-gold-glow));
}

.lg-wordmark {
  font-family: var(--lg-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--lg-cream);
  text-transform: uppercase;
  line-height: 1.2;
}

.lg-wordmark-sub {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--lg-ink);
  margin-top: 3px;
  font-variant: small-caps;
}

/* ── Entry panel: document articles ────────────────────────────────────────── */

.lg-entry-panel {
  border-top: 1px solid var(--lg-gold-rule);
  border-bottom: 1px solid var(--lg-gold-rule);
  margin: 0 0 4px;
}

.lg-article {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 20px 16px;
  cursor: pointer;
  position: relative;
  transition: background 0.18s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border-left: 3px solid transparent;
}

.lg-article:hover,
.lg-article:focus {
  background: var(--lg-gold-dim);
  border-left-color: var(--lg-gold);
}

.lg-article:active {
  background: rgba(192,150,72,0.22);
}

.lg-article-ordinal {
  font-family: var(--lg-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--lg-gold-rule);
  line-height: 1;
  min-width: 32px;
  text-align: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: color 0.18s;
}

.lg-article:hover .lg-article-ordinal,
.lg-article:focus .lg-article-ordinal {
  color: var(--lg-gold);
}

.lg-article-body {
  flex: 1;
  min-width: 0;
}

.lg-article-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lg-cream);
  margin-bottom: 3px;
  font-family: var(--lg-serif);
  letter-spacing: 0.02em;
}

.lg-article-en {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--lg-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-variant: small-caps;
}

.lg-article-desc {
  font-size: 12px;
  color: var(--lg-ink);
  line-height: 1.6;
}

.lg-article-arrow {
  color: var(--lg-gold-rule);
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s;
  font-weight: 300;
}

.lg-article:hover .lg-article-arrow,
.lg-article:focus .lg-article-arrow {
  color: var(--lg-gold);
  transform: translateX(3px);
}

.lg-article-divider {
  height: 1px;
  background: var(--lg-gold-rule);
  margin: 0 16px;
  opacity: 0.6;
}

/* ── Form section ───────────────────────────────────────────────────────────── */

.lg-form-section {
  padding: 0 0 32px;
}

.lg-form-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 20px 0;
  border-top: 1px solid var(--lg-gold-rule);
  margin-bottom: 24px;
}

.lg-form-header-num {
  font-family: var(--lg-serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lg-gold);
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 1px;
}

.lg-form-header-title {
  font-family: var(--lg-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--lg-cream);
  letter-spacing: 0.04em;
}

.lg-form {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(122,106,80,0.2);
}

.lg-field:last-of-type {
  border-bottom: none;
}

.lg-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lg-gold);
  font-variant: small-caps;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lg-required {
  font-size: 9px;
  color: var(--color-danger);
  background: rgba(192,57,43,0.12);
  border: 1px solid rgba(192,57,43,0.25);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant: normal;
}

.lg-note {
  font-size: 10px;
  color: var(--lg-ink);
  letter-spacing: 0.03em;
  text-transform: none;
  font-variant: normal;
}

.lg-input,
.lg-select,
.lg-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lg-ink-dim);
  border-radius: 0;
  color: var(--lg-cream);
  font-size: 14px;
  padding: 8px 0;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  font-family: var(--lg-mono);
  letter-spacing: 0.02em;
}

.lg-input::placeholder,
.lg-textarea::placeholder {
  color: var(--lg-ink-dim);
  font-family: var(--lg-mono);
  font-size: 12px;
}

.lg-input:focus,
.lg-select:focus,
.lg-textarea:focus {
  border-bottom-color: var(--lg-gold);
  box-shadow: 0 1px 0 0 var(--lg-gold);
}

.lg-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c09648' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  color: var(--lg-cream-dim);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

.lg-select option {
  background: #1a0f00;
  color: var(--lg-cream);
}

.lg-textarea {
  resize: vertical;
  line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  min-height: 80px;
}

/* ── Toggles ────────────────────────────────────────────────────────────────── */

.lg-toggles {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 20px;
}

.lg-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(122,106,80,0.15);
}

.lg-toggle-row:last-child {
  border-bottom: none;
}

.lg-toggle-label {
  font-size: 13px;
  color: var(--lg-cream-dim);
  flex: 1;
  line-height: 1.4;
}

/* Reuse existing toggle-input / toggle-switch mechanics, override colors */
.toggle-input { display: none; }

.toggle-switch {
  width: 44px;
  height: 24px;
  background: rgba(26,15,0,0.8);
  border-radius: var(--radius-full);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
  border: 1px solid var(--lg-ink-dim);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--lg-ink);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-input:checked + .toggle-switch {
  background: rgba(192,150,72,0.15);
  border-color: var(--lg-gold);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(20px);
  background: var(--lg-gold);
}

/* ── Form action buttons ─────────────────────────────────────────────────────── */

.lg-form-actions {
  display: flex;
  gap: 10px;
  padding-top: 4px;
  margin-top: 4px;
}

/* Ghost button: cancel */
.lg-btn-ghost {
  background: transparent;
  color: var(--lg-ink);
  border: 1px solid var(--lg-ink-dim);
  border-radius: 4px;
  padding: 13px 20px;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.lg-btn-ghost:hover {
  border-color: var(--lg-ink);
  color: var(--lg-cream-dim);
}

.lg-btn-ghost:active {
  opacity: 0.7;
}

/* Seal button: primary CTA */
.lg-btn-seal {
  flex: 1;
  background: transparent;
  color: var(--lg-gold);
  border: 1px solid var(--lg-gold-rule);
  border-radius: 4px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant: small-caps;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.lg-btn-seal:hover {
  background: var(--lg-gold-dim);
  border-color: var(--lg-gold);
  box-shadow: 0 0 20px var(--lg-gold-glow);
}

.lg-btn-seal:active {
  background: rgba(192,150,72,0.25);
  transform: scale(0.98);
}

/* ── Records section ────────────────────────────────────────────────────────── */

.lg-records-section {
  border-top: 1px solid var(--lg-gold-rule);
  padding: 20px 20px 32px;
}

.lg-records-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.lg-records-title {
  font-family: var(--lg-serif);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--lg-cream-dim);
  text-transform: uppercase;
}

.lg-records-subtitle {
  font-size: 11px;
  color: var(--lg-ink);
  letter-spacing: 0.06em;
}

/* Record entry */
.lg-record {
  border-left: 2px solid var(--lg-gold-rule);
  padding: 14px 14px 14px 16px;
  margin-bottom: 12px;
  background: rgba(22,15,6,0.6);
  transition: border-color 0.18s;
}

.lg-record:hover {
  border-left-color: var(--lg-gold);
}

.lg-record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}

.lg-record-trigger {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-gold);
  font-variant: small-caps;
  border: 1px solid var(--lg-gold-rule);
  border-radius: 3px;
  padding: 2px 7px;
}

.lg-record-status {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
  font-variant: small-caps;
}

.lg-record-status.PENDING   { color: var(--lg-ink);          border: 1px solid var(--lg-ink-dim); }
.lg-record-status.ACTIVE    { color: var(--color-amber-light); border: 1px solid rgba(200,134,10,0.3); }
.lg-record-status.TRIGGERED { color: var(--lg-gold);          border: 1px solid var(--lg-gold-rule);
                               box-shadow: 0 0 8px var(--lg-gold-glow); }
.lg-record-status.COMPLETED { color: var(--color-success);    border: 1px solid rgba(39,174,96,0.3); }
.lg-record-status.CANCELLED { color: var(--color-danger);     border: 1px solid rgba(192,57,43,0.25); }

.lg-record-id {
  font-family: var(--lg-mono);
  font-size: 11px;
  color: var(--lg-ink);
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.lg-record-purpose {
  font-size: 13px;
  color: var(--lg-cream-dim);
  line-height: 1.5;
  margin-bottom: 6px;
}

.lg-record-signed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-success);
  border: 1px solid rgba(39,174,96,0.25);
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  font-variant: small-caps;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */

.lg-empty-state {
  font-size: 12px;
  color: var(--lg-ink);
  text-align: center;
  padding: 32px 0;
  letter-spacing: 0.04em;
}

/* ── Seal animation: 「遺言を封印する」 moment ──────────────────────────────── */

@keyframes sealDrop {
  0%   { transform: scale(2.8) rotate(-20deg); opacity: 0; filter: blur(8px); }
  55%  { transform: scale(0.92) rotate(3deg);  opacity: 1; filter: blur(0);   }
  72%  { transform: scale(1.06) rotate(-1deg); }
  86%  { transform: scale(0.97) rotate(0.5deg); }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}

@keyframes sealGlow {
  0%   { filter: drop-shadow(0 0  0px rgba(192,150,72,0)); }
  40%  { filter: drop-shadow(0 0 30px rgba(192,150,72,0.7)); }
  100% { filter: drop-shadow(0 0 12px rgba(192,150,72,0.3)); }
}

@keyframes overlayFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@keyframes rulesReveal {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.legacy-seal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(6, 4, 2, 0.88);
  animation: overlayFadeIn 0.35s ease forwards;
}

.legacy-seal-overlay.hiding {
  animation: overlayFadeOut 0.5s ease 1.6s forwards;
}

.legacy-seal-overlay-rules {
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lg-gold, #c09648), transparent);
  margin-bottom: 28px;
  transform-origin: center;
  animation: rulesReveal 0.4s ease 0.5s both;
}

.legacy-seal-stamp {
  font-size: 88px;
  line-height: 1;
  animation: sealDrop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both,
             sealGlow 1.4s ease 0.45s both;
  display: inline-block;
  margin-bottom: 24px;
}

.legacy-seal-text {
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;
  color: #f0e8d4;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0;
  animation: overlayFadeIn 0.4s ease 0.55s forwards;
}

.legacy-seal-subtext {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: rgba(192,150,72,0.7);
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0;
  animation: overlayFadeIn 0.4s ease 0.8s forwards;
}

/* Backward-compat: legacy-form-actions for any JS that might reference it */
.legacy-form-actions { display: flex; gap: 10px; }

/* Signed report indicator (used in JS renderLegacyList) */
.signed-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-success);
  border: 1px solid rgba(39,174,96,0.25);
  border-radius: 3px;
  padding: 2px 7px;
  margin-top: 6px;
  letter-spacing: 0.06em;
  font-variant: small-caps;
}

/* ═══════════════════════════════════════════════════════════════════
   THE ARENA — Stealth Seed × Milestone Oracle × Broadcast Ledger
   Design: obsidian black + electric gold + brutal typography
   ═══════════════════════════════════════════════════════════════════ */

#screen-arena {
  --ar-gold:       #c09648;
  --ar-gold-dim:   rgba(192,150,72,0.15);
  --ar-gold-glow:  rgba(192,150,72,0.5);
  --ar-red:        #e05252;
  --ar-green:      #52c07a;
  --ar-surface:    rgba(18,12,4,0.98);
  --ar-panel:      rgba(30,20,8,0.95);
  --ar-ink:        #8a7a60;
  --ar-serif:      Georgia, 'Times New Roman', serif;
  --ar-mono:       'SF Mono', 'Fira Code', Menlo, monospace;

  background: var(--ar-surface);
  min-height: 100%;
  padding-bottom: 80px;
}

/* ── Header ─────────────────────────────────────────────────────── */
.ar-header {
  padding: 24px 20px 12px;
}

.ar-header-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ar-gold), transparent);
  margin: 8px 0;
}

.ar-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
}

.ar-header-crest {
  font-size: 28px;
  color: var(--ar-gold);
  text-shadow: 0 0 20px var(--ar-gold-glow);
}

.ar-wordmark {
  font-family: var(--ar-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ar-gold);
  text-transform: uppercase;
}

.ar-wordmark-sub {
  font-size: 10px;
  color: var(--ar-ink);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Live ticker ─────────────────────────────────────────────────── */
.ar-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(192,150,72,0.08);
  border-top: 1px solid rgba(192,150,72,0.2);
  border-bottom: 1px solid rgba(192,150,72,0.2);
  overflow: hidden;
}

.ar-ticker-label {
  font-family: var(--ar-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ar-red);
  border: 1px solid var(--ar-red);
  padding: 1px 5px;
  border-radius: 2px;
  animation: tickerPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes tickerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.ar-ticker-scroll {
  font-family: var(--ar-mono);
  font-size: 11px;
  color: var(--ar-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Controls ────────────────────────────────────────────────────── */
.ar-controls {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}

.ar-btn-create {
  flex: 1;
  padding: 10px 16px;
  background: var(--ar-gold-dim);
  border: 1px solid var(--ar-gold);
  color: var(--ar-gold);
  font-family: var(--ar-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.ar-btn-create:hover {
  background: rgba(192,150,72,0.25);
  box-shadow: 0 0 12px var(--ar-gold-glow);
}

.ar-btn-refresh {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(192,150,72,0.3);
  color: var(--ar-ink);
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.ar-btn-refresh:hover { color: var(--ar-gold); }

/* ── Create form ─────────────────────────────────────────────────── */
.ar-create-form {
  margin: 0 16px 16px;
  padding: 20px;
  border: 1px solid rgba(192,150,72,0.25);
  border-radius: 6px;
  background: var(--ar-panel);
}

.ar-form-header {
  font-family: var(--ar-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ar-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(192,150,72,0.2);
}

.ar-field {
  margin-bottom: 14px;
}

.ar-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.ar-label {
  display: block;
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ar-ink);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ar-input, .ar-textarea, .ar-select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(192,150,72,0.3);
  color: #e8dcc4;
  font-family: var(--ar-mono);
  font-size: 13px;
  padding: 6px 2px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.ar-input:focus, .ar-textarea:focus, .ar-select:focus {
  border-bottom-color: var(--ar-gold);
}

.ar-select option { background: #1a120a; }

.ar-milestones-label {
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ar-ink);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ar-milestone-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.ar-milestone-row .ar-milestone-title { flex: 1; }
.ar-milestone-row .ar-milestone-type  { width: 120px; }

.ar-btn-add-milestone {
  background: none;
  border: none;
  color: var(--ar-gold);
  font-family: var(--ar-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 16px;
}

.ar-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(192,150,72,0.15);
}

.ar-btn-submit {
  padding: 9px 20px;
  background: var(--ar-gold-dim);
  border: 1px solid var(--ar-gold);
  color: var(--ar-gold);
  font-family: var(--ar-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}

.ar-btn-submit:hover { background: rgba(192,150,72,0.3); }

.ar-btn-cancel {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(192,150,72,0.2);
  color: var(--ar-ink);
  font-family: var(--ar-mono);
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
}

/* ── Arena list ──────────────────────────────────────────────────── */
.ar-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ar-empty {
  font-family: var(--ar-mono);
  font-size: 12px;
  color: var(--ar-ink);
  text-align: center;
  padding: 32px 0;
}

/* ── Arena card ──────────────────────────────────────────────────── */
.ar-card {
  padding: 16px 18px;
  border: 1px solid rgba(192,150,72,0.2);
  border-radius: 6px;
  background: var(--ar-panel);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.ar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(192,150,72,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.ar-card:hover {
  border-color: rgba(192,150,72,0.5);
  box-shadow: 0 4px 20px rgba(192,150,72,0.12);
}

.ar-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.ar-card-title {
  flex: 1;
  font-family: var(--ar-serif);
  font-size: 15px;
  color: #e8dcc4;
  letter-spacing: 0.04em;
}

.ar-card-status {
  font-family: var(--ar-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.ar-card-status.FORMING   { color: var(--ar-ink); }
.ar-card-status.OPEN      { color: var(--ar-green); }
.ar-card-status.ACTIVE    { color: var(--ar-gold); animation: tickerPulse 3s ease infinite; }
.ar-card-status.EVALUATING { color: #e8a040; }
.ar-card-status.REVEALED  { color: #b48dff; }
.ar-card-status.CLOSED    { color: #555; }

.ar-card-donor {
  font-family: var(--ar-mono);
  font-size: 11px;
  color: var(--ar-ink);
  margin-bottom: 8px;
}

.ar-card-donor span {
  color: var(--ar-gold);
  font-style: italic;
}

.ar-card-meta {
  display: flex;
  gap: 16px;
  font-family: var(--ar-mono);
  font-size: 10px;
  color: #6a5c44;
}

/* ── Arena detail ────────────────────────────────────────────────── */
.ar-detail {
  padding: 16px;
}

.ar-back-btn {
  background: none;
  border: none;
  color: var(--ar-ink);
  font-family: var(--ar-mono);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 16px;
  transition: color 0.2s;
}

.ar-back-btn:hover { color: var(--ar-gold); }

.ar-detail-title {
  font-family: var(--ar-serif);
  font-size: 22px;
  color: var(--ar-gold);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.ar-detail-desc {
  font-size: 13px;
  color: var(--ar-ink);
  line-height: 1.6;
  margin-bottom: 16px;
}

.ar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ar-action-btn {
  padding: 8px 16px;
  border-radius: 3px;
  font-family: var(--ar-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid;
}

.ar-action-btn.primary {
  background: var(--ar-gold-dim);
  border-color: var(--ar-gold);
  color: var(--ar-gold);
}

.ar-action-btn.primary:hover { background: rgba(192,150,72,0.28); }

.ar-action-btn.danger {
  background: rgba(224,82,82,0.1);
  border-color: var(--ar-red);
  color: var(--ar-red);
}

.ar-action-btn.reveal {
  background: rgba(180,141,255,0.1);
  border-color: #b48dff;
  color: #b48dff;
}

/* ── Participants ─────────────────────────────────────────────────── */
.ar-participants-header {
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ar-ink);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(192,150,72,0.15);
}

.ar-participant-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ar-participant-name {
  flex: 1;
  font-size: 13px;
  color: #d8cbb4;
}

.ar-participant-status {
  font-family: var(--ar-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-participant-status.COMPETING  { color: var(--ar-gold); }
.ar-participant-status.ADVANCING  { color: var(--ar-green); }
.ar-participant-status.ELIMINATED { color: var(--ar-red); text-decoration: line-through; }
.ar-participant-status.FINALIST   { color: #b48dff; }
.ar-participant-status.WINNER     { color: var(--ar-gold); font-weight: bold; }
.ar-participant-status.PENDING    { color: var(--ar-ink); }

.ar-participant-milestones {
  font-family: var(--ar-mono);
  font-size: 10px;
  color: var(--ar-ink);
}

/* ── Milestones ───────────────────────────────────────────────────── */
.ar-milestones-section {
  margin: 16px 0;
}

.ar-milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ar-milestone-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(192,150,72,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ar-mono);
  font-size: 11px;
  color: var(--ar-gold);
  flex-shrink: 0;
}

.ar-milestone-info { flex: 1; }
.ar-milestone-item-title { font-size: 13px; color: #d8cbb4; margin-bottom: 2px; }
.ar-milestone-item-type  { font-family: var(--ar-mono); font-size: 10px; color: var(--ar-ink); }

/* ── Join form ────────────────────────────────────────────────────── */
.ar-join-form {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(192,150,72,0.2);
  border-radius: 4px;
  background: var(--ar-panel);
}

/* ── Broadcast ledger ─────────────────────────────────────────────── */
.ar-broadcast {
  margin-top: 20px;
}

.ar-broadcast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ar-ink);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(192,150,72,0.15);
  margin-bottom: 12px;
}

.ar-broadcast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ar-red);
  animation: tickerPulse 2s ease-in-out infinite;
}

.ar-event {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ar-event-type {
  font-family: var(--ar-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ar-gold);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.ar-event-narrative {
  font-size: 13px;
  color: #c4b89a;
  line-height: 1.5;
}

.ar-event-time {
  font-family: var(--ar-mono);
  font-size: 10px;
  color: #4a3e2a;
  margin-top: 4px;
}

/* ── Reveal overlay ───────────────────────────────────────────────── */
.ar-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,4,0,0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: overlayFadeIn 0.6s ease;
}

.ar-reveal-glyph {
  font-size: 72px;
  color: var(--ar-gold);
  text-shadow: 0 0 60px var(--ar-gold-glow);
  margin-bottom: 24px;
  animation: revealGlyphPulse 2s ease-in-out forwards;
}

@keyframes revealGlyphPulse {
  0%   { transform: scale(0.5); opacity: 0; filter: drop-shadow(0 0 0px transparent); }
  50%  { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 40px rgba(192,150,72,0.8)); }
  100% { transform: scale(1);   opacity: 1; filter: drop-shadow(0 0 20px rgba(192,150,72,0.5)); }
}

.ar-reveal-text {
  font-family: var(--ar-serif);
  font-size: 22px;
  color: var(--ar-gold);
  letter-spacing: 0.14em;
  text-align: center;
  margin-bottom: 8px;
}

.ar-reveal-subtext {
  font-family: var(--ar-mono);
  font-size: 12px;
  color: var(--ar-ink);
  letter-spacing: 0.08em;
  text-align: center;
}

.ar-reveal-rules {
  position: absolute;
  left: 20px; right: 20px;
  top: 50%;
  transform: translateY(-50px);
}

.ar-reveal-rules::before,
.ar-reveal-rules::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ar-gold), transparent);
  animation: rulesReveal 1.2s ease 0.4s forwards;
  transform: scaleX(0);
  transform-origin: center;
}

.ar-reveal-rules::before { margin-bottom: 120px; }

/* ── V13 Aegis — Insurance stats grid ───────────────────────────────────── */
.aegis-stat-cell {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(192, 150, 72, 0.2);
  border-radius: 3px;
  padding: 10px 12px;
}

.aegis-stat-label {
  font-size: 0.68rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.aegis-stat-value {
  font-family: var(--lg-mono, monospace);
  font-size: 1.05rem;
  color: #eee;
}

/* ── V13 電子カルテUI ────────────────────────────────────────────────────── */

/* マイルストーン ステータスドット */
.ms-status-dot {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 0.68rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.ms-status-dot.ms-status-pending       { background: rgba(120,120,120,0.3); color: #999; }
.ms-status-dot.ms-status-under_review  { background: rgba(192,150,72,0.2);  color: #c09648; }
.ms-status-dot.ms-status-approved      { background: rgba(80,200,100,0.2);  color: #6fc87a; }
.ms-status-dot.ms-status-rejected      { background: rgba(200,60,60,0.2);   color: #e06060; }
.ms-status-dot.ms-status-hold          { background: rgba(100,100,220,0.2); color: #8888ee; }

/* 達成を報告ボタン */
.ms-report-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(192,150,72,0.4);
  color: #c09648;
  font-family: var(--lg-mono, monospace);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  align-self: center;
}
.ms-report-btn:hover {
  background: rgba(192,150,72,0.1);
  border-color: rgba(192,150,72,0.7);
}

/* 証拠提出フォームラッパー */
.ms-evidence-form {
  margin: 0 0 8px 28px;
}

/* 提出フォームカード */
.karte-submit-form {
  background: rgba(10,10,10,0.8);
  border: 1px solid rgba(192,150,72,0.3);
  border-left: 3px solid rgba(192,150,72,0.6);
  padding: 14px 16px;
  border-radius: 2px;
  margin-top: 4px;
}
.karte-submit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #c09648;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.karte-submit-icon { font-size: 1rem; }

/* 電子カルテカード（法律家向け） */
.karte-card {
  background: rgba(8, 12, 8, 0.9);
  border: 1px solid rgba(192,150,72,0.25);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 14px;
  position: relative;
}
.karte-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(192,150,72,0.6), rgba(192,150,72,0.15));
  border-radius: 3px 0 0 3px;
}

.karte-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.karte-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.karte-milestone-name {
  font-size: 0.9rem;
  color: #ddd;
  font-weight: 500;
}
.karte-timestamp {
  font-size: 0.68rem;
  color: #555;
  font-family: var(--lg-mono, monospace);
  white-space: nowrap;
}

/* 緊急度バッジ */
.karte-urgency {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.karte-urgency-normal   { background: rgba(80,80,80,0.4);   color: #888; }
.karte-urgency-high     { background: rgba(200,150,0,0.25); color: #c09648; }
.karte-urgency-critical { background: rgba(200,50,50,0.3);  color: #e06060;
                           animation: goldGlowPulse 1.2s infinite alternate; }

.karte-patient {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.78rem;
}
.karte-label { color: #666; min-width: 52px; }
.karte-value { color: #bbb; font-family: var(--lg-mono, monospace); }

.karte-body { margin-bottom: 10px; }
.karte-description {
  font-size: 0.82rem;
  color: #ccc;
  line-height: 1.6;
  margin-top: 4px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
}

.karte-evidence-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.karte-evidence-link {
  font-size: 0.72rem;
  color: #c09648;
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid rgba(192,150,72,0.3);
  border-radius: 2px;
  transition: background 0.2s;
}
.karte-evidence-link:hover { background: rgba(192,150,72,0.1); }

.karte-no-evidence {
  font-size: 0.72rem;
  color: #555;
  margin-bottom: 12px;
  font-style: italic;
}

/* 判定アクションボタン */
.karte-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.karte-btn {
  flex: 1;
  padding: 8px 0;
  font-family: var(--lg-mono, monospace);
  font-size: 0.78rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  letter-spacing: 0.05em;
}
.karte-btn-approve {
  background: rgba(80,180,90,0.1);
  border-color: rgba(80,180,90,0.4);
  color: #6fc87a;
}
.karte-btn-approve:hover { background: rgba(80,180,90,0.2); }

.karte-btn-hold {
  background: rgba(100,100,210,0.1);
  border-color: rgba(100,100,210,0.3);
  color: #8888ee;
}
.karte-btn-hold:hover { background: rgba(100,100,210,0.2); }

.karte-btn-reject {
  background: rgba(190,60,60,0.1);
  border-color: rgba(190,60,60,0.35);
  color: #e06060;
}
.karte-btn-reject:hover { background: rgba(190,60,60,0.2); }

/* 所見欄 */
.karte-comment-area {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* 確定ボタン色変化 */
.karte-confirm-approve { background: rgba(80,180,90,0.15)  !important; color: #6fc87a !important; }
.karte-confirm-hold    { background: rgba(100,100,210,0.15)!important; color: #8888ee !important; }
.karte-confirm-reject  { background: rgba(190,60,60,0.15)  !important; color: #e06060 !important; }

/* ar-milestone-item に報告ボタンが並ぶよう flex 化 */
.ar-milestone-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ── デモモードバナー ────────────────────────────────────────────────────── */
.karte-mock-banner {
  font-size: 0.72rem;
  color: #a07820;
  background: rgba(192,150,72,0.08);
  border: 1px dashed rgba(192,150,72,0.35);
  border-radius: 2px;
  padding: 6px 12px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

/* ── 申請者情報行 ──────────────────────────────────────────────────────────── */
.karte-patient {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.karte-avatar {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(192,150,72,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.karte-patient-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.karte-patient-name {
  font-size: 0.88rem;
  color: #ddd;
  font-weight: 500;
}
.karte-patient-role {
  font-size: 0.65rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--lg-mono, monospace);
}

/* ── セクションラベル ───────────────────────────────────────────────────────── */
.karte-section-label {
  font-size: 0.68rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

/* ── 判定スタンプ ──────────────────────────────────────────────────────────── */
.karte-judged {
  position: relative;
  pointer-events: none;
}
.karte-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0,0,0,0.65);
  border-radius: 3px;
  animation: karteStampIn 0.25s ease;
}
.karte-stamp-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.karte-stamp-label {
  font-family: var(--lg-mono, monospace);
  font-size: 1rem;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.karte-stamp-time {
  font-size: 0.68rem;
  color: #888;
  font-family: var(--lg-mono, monospace);
}

@keyframes karteStampIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}