@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

.ar-root {
  --ink: #16211B;
  --panel: #202B22;
  --panel-2: #28352C;
  --panel-3: #303F34;
  --hairline: #3C4B3F;
  --parchment: #EDE6D3;
  --muted: #9CA79A;
  --brass: #C99A3D;
  --brass-dark: #A67C2E;
  --seal: #9A3A2C;
  --seal-dark: #7A2C21;
  --go: #6C9A55;
  --go-dark: #4F7A3B;
  --danger: #C15A4E;

  min-height: 100vh;
  width: 100%;
  background-color: var(--ink);
  background-image:
    repeating-radial-gradient(circle at 15% 20%, transparent 0 42px, rgba(201,154,61,0.05) 43px 44px),
    repeating-radial-gradient(circle at 85% 75%, transparent 0 58px, rgba(201,154,61,0.045) 59px 60px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 70px, rgba(237,230,211,0.025) 71px 72px);
  color: var(--parchment);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.ar-shell { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }

.ar-display { font-family: 'Staatliches', system-ui, sans-serif; letter-spacing: 0.03em; }
.ar-mono { font-family: 'IBM Plex Mono', monospace; }

.ar-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.ar-cover { text-align: center; padding: 48px 12px 16px; }
.ar-cover-title { font-size: 56px; line-height: 1; color: var(--parchment); margin: 10px 0 6px; }
.ar-cover-sub { color: var(--muted); font-size: 15px; max-width: 460px; margin: 0 auto 36px; }

.ar-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ar-roles { grid-template-columns: 1fr; } }

.ar-role-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px 22px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ar-role-card:hover { border-color: var(--brass); transform: translateY(-2px); background: var(--panel-2); }
.ar-role-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.ar-role-card .ar-role-icon { color: var(--brass); margin-bottom: 14px; font-size: 30px; }
.ar-role-card h3 { font-family: 'Staatliches', sans-serif; font-size: 26px; letter-spacing: 0.02em; margin: 0 0 6px; }
.ar-role-card p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.5; }

.ar-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 22px;
  margin-bottom: 16px;
}

.ar-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.ar-input, .ar-textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--hairline);
  color: var(--parchment);
  border-radius: 3px;
  padding: 10px 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14.5px;
}
.ar-input:focus, .ar-textarea:focus { outline: none; border-color: var(--brass); }
.ar-textarea { resize: vertical; min-height: 64px; }

.ar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 3px;
  padding: 10px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.ar-btn:active { transform: translateY(1px); }
.ar-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ar-btn-primary { background: var(--brass); color: #1B140A; }
.ar-btn-primary:hover { filter: brightness(1.08); }
.ar-btn-go { background: var(--go); color: #10190C; }
.ar-btn-go:hover { filter: brightness(1.08); }
.ar-btn-ghost { background: transparent; color: var(--parchment); border-color: var(--hairline); }
.ar-btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.ar-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.ar-btn-danger:hover { background: rgba(193,90,78,0.12); }
.ar-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ar-btn-sm { padding: 6px 10px; font-size: 12.5px; }

.ar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap; gap: 10px;
}
.ar-header-title { display: flex; align-items: center; gap: 10px; }
.ar-header-title h1 { font-family: 'Staatliches', sans-serif; font-size: 26px; margin: 0; letter-spacing: 0.02em; }

.ar-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.ar-tab {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 3px; cursor: pointer; color: var(--muted);
  border: 1px solid var(--hairline); background: transparent;
}
.ar-tab.active { color: var(--ink); background: var(--brass); border-color: var(--brass); font-weight: 600; }

.ar-loc-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.ar-loc-row:last-child { border-bottom: none; }
.ar-loc-num { font-family: 'Staatliches', sans-serif; font-size: 22px; color: var(--brass); width: 34px; flex-shrink: 0; text-align: center; padding-top: 2px; }
.ar-loc-body { flex: 1; min-width: 0; }
.ar-loc-name { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.ar-loc-meta { color: var(--muted); font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.ar-loc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ar-icon-btn { background: transparent; border: 1px solid var(--hairline); color: var(--muted); border-radius: 3px; padding: 6px 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.ar-icon-btn:hover { color: var(--parchment); border-color: var(--brass); }

.ar-table { width: 100%; border-collapse: collapse; }
.ar-table th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; border-bottom: 1px solid var(--hairline); }
.ar-table td { padding: 12px 10px; border-bottom: 1px solid var(--hairline); font-size: 14px; vertical-align: middle; }
.ar-table tr:last-child td { border-bottom: none; }

.ar-progress-track { width: 100%; height: 7px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.ar-progress-fill { height: 100%; background: var(--brass); border-radius: 4px; transition: width 0.4s ease; }
.ar-progress-fill.done { background: var(--go); }

.ar-badge { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; display: inline-block; }
.ar-badge-go { background: rgba(108,154,85,0.18); color: #9FCB86; }

.ar-empty { text-align: center; padding: 40px 20px; color: var(--muted); border: 1px dashed var(--hairline); border-radius: 4px; font-size: 14px; }

.ar-checkpoint-num { text-align: center; margin-bottom: 18px; }
.ar-checkpoint-num .n { font-family: 'Staatliches', sans-serif; font-size: 15px; color: var(--brass); letter-spacing: 0.14em; }

.ar-clue-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 4px; padding: 30px 26px; position: relative; }
.ar-clue-card::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(201,154,61,0.25); border-radius: 3px; pointer-events: none; }
.ar-clue-label { color: var(--brass); }
.ar-clue-text { font-size: 19px; line-height: 1.55; margin: 12px 0 0; }
.ar-task-text { font-size: 16px; line-height: 1.6; color: var(--parchment); margin: 10px 0 20px; }

.ar-feedback { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 12px; font-weight: 600; }
.ar-feedback.bad { color: var(--danger); }
.ar-feedback.good { color: #9FCB86; }

.ar-shake { animation: ar-shake 0.4s ease; }
@keyframes ar-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.ar-stamp-wrap { position: relative; }
.ar-stamp {
  position: absolute; top: 50%; left: 50%; width: 150px; height: 150px;
  border: 5px solid var(--seal); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--seal); font-family: 'Staatliches', sans-serif; font-size: 20px; letter-spacing: 0.08em;
  text-align: center; transform: translate(-50%, -50%) rotate(-14deg) scale(2.6);
  opacity: 0; pointer-events: none; z-index: 5; mix-blend-mode: multiply;
}
.ar-stamp.show { animation: ar-stamp-thud 0.9s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes ar-stamp-thud {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.8); }
  35% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-14deg) scale(0.94); }
  45% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); }
  60% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}

.ar-finish-wrap { text-align: center; padding: 50px 20px; }
.ar-finish-title { font-size: 48px; margin: 10px 0; }
.ar-finish-time { font-family: 'IBM Plex Mono', monospace; font-size: 26px; color: var(--brass); }

.ar-inline { display: flex; gap: 10px; }
.ar-inline > * { flex: 1; }

.ar-footer-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 26px; }
.ar-link { color: var(--brass); cursor: pointer; text-decoration: underline; background: none; border: none; font: inherit; padding: 0; }

.ar-photo-drop {
  border: 1.5px dashed var(--hairline); border-radius: 4px; padding: 24px; text-align: center;
  cursor: pointer; color: var(--muted); font-size: 13.5px; margin-bottom: 16px;
}
.ar-photo-drop:hover { border-color: var(--brass); color: var(--brass); }
.ar-photo-preview { width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; display: block; border: 1px solid var(--hairline); }
.ar-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--hairline); }

.ar-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: currentColor;
  border-radius: 50%; display: inline-block; animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }