:root {
  --ink: #0c0b09;
  --bg: #15130f;
  --bg-deep: #0d0c0a;
  --stone: #d7c7a5;
  --stone-soft: #b9a98a;
  --ivory: #f1e8d4;
  --bronze: #b9955a;
  --bronze-bright: #dfc98e;
  --bronze-dark: #6e5634;
  --panel: rgba(29, 27, 22, .86);
  --panel-strong: rgba(20, 18, 15, .94);
  --line: rgba(229, 211, 173, .16);
  --line-strong: rgba(223, 201, 142, .36);
  --text: #f4ecda;
  --muted: #b9ad96;
  --danger: #d39a84;
  --ok: #bdcaa9;
  --radius: 22px;
  font-family: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(186,145,82,.16), transparent 43%),
    radial-gradient(circle at 50% 70%, rgba(120,88,49,.09), transparent 38%),
    linear-gradient(180deg, #1a1813 0%, #12110e 70%, #0d0c0a 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background:
    repeating-linear-gradient(97deg, transparent 0 19px, rgba(255,255,255,.018) 20px, transparent 21px),
    repeating-linear-gradient(7deg, transparent 0 31px, rgba(0,0,0,.08) 32px, transparent 33px);
  mix-blend-mode: soft-light;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--bronze-bright);
  outline-offset: 3px;
}

.arena-shell {
  min-height: 100vh;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 3.6vw, 46px) 28px;
  display: grid;
  grid-template-rows: auto auto minmax(610px, 1fr) auto;
  gap: 15px;
}

.arena-topbar, .arena-footer, .status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand-block { min-width: 0; }
.eyebrow {
  margin: 0 0 6px;
  color: var(--stone-soft);
  letter-spacing: .19em;
  font-size: .7rem;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: .045em;
  text-shadow: 0 1px 18px rgba(223,201,142,.06);
}
h2 { margin-bottom: 0; font-weight: 500; }
h3 { font-size: .9rem; letter-spacing: .08em; color: var(--bronze-bright); }

.status-strip {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 9px 13px;
  border: 1px solid rgba(229,211,173,.11);
  border-radius: 999px;
  background: rgba(0,0,0,.11);
  color: rgba(185,173,150,.74);
  font-size: .78rem;
  transition: opacity .25s ease;
}
.status-strip span { display: inline-flex; gap: 6px; }
.status-strip b { color: rgba(244,236,218,.86); font-size: .69rem; letter-spacing: .09em; }
.status-strip output { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.arena-stage {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(229,211,173,.16);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 16%, rgba(213,183,121,.10), transparent 31%),
    linear-gradient(180deg, rgba(31,29,23,.96), rgba(12,11,9,.97));
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.025);
}
.arena-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 18%, transparent 82%, rgba(0,0,0,.45)),
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 25%, rgba(0,0,0,.28));
}
.arena-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.arena-horizon {
  position: absolute;
  left: 50%;
  top: 19%;
  width: min(980px, 88%);
  height: 48%;
  transform: translateX(-50%);
  border: 1px solid rgba(217,195,142,.09);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 68% 68% 0 0;
  box-shadow: inset 0 28px 80px rgba(0,0,0,.18);
}
.arena-dome {
  position: absolute;
  left: 50%;
  top: -20%;
  width: min(1000px, 106%);
  aspect-ratio: 1.7 / 1;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  border-bottom: 1px solid rgba(223,201,142,.08);
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0 49%, rgba(217,195,142,.055) 49.5% 50%, transparent 50.5%),
    radial-gradient(ellipse at 50% 100%, transparent 0 67%, rgba(217,195,142,.035) 67.5% 68%, transparent 68.5%);
  opacity: .8;
}
.arena-colonnade {
  position: absolute;
  left: 50%;
  top: 25%;
  width: min(1100px, 100%);
  height: 42%;
  transform: translateX(-50%);
  opacity: .24;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 44%, transparent 56%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 44%, transparent 56%, #000);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 58px,
      rgba(194,176,140,.26) 59px 62px,
      rgba(61,54,42,.72) 63px 69px,
      transparent 70px 116px);
}
.arena-floor {
  position: absolute;
  left: 50%;
  bottom: -31%;
  width: min(1120px, 108%);
  height: 66%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, transparent 0 35%, rgba(190,158,99,.07) 35.5% 36%, transparent 36.5% 47%, rgba(190,158,99,.055) 47.5% 48%, transparent 48.5%),
    radial-gradient(ellipse, rgba(81,67,45,.19), rgba(17,15,11,.05) 62%, transparent 72%);
  border: 1px solid rgba(217,195,142,.08);
  transform-origin: center;
}
.arena-ring {
  position: absolute;
  left: 50%;
  bottom: 7%;
  border-radius: 50%;
  transform: translateX(-50%) perspective(420px) rotateX(68deg);
  border: 1px solid rgba(223,201,142,.15);
  box-shadow: 0 0 38px rgba(181,138,75,.025);
}
.arena-ring-outer { width: 72%; height: 25%; }
.arena-ring-inner { width: 49%; height: 16%; border-color: rgba(223,201,142,.10); }
.arena-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 62%;
  height: 58%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210,170,99,.13), rgba(177,130,65,.035) 42%, transparent 69%);
  opacity: .58;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  animation: arenaBreath 7s ease-in-out infinite alternate;
}
.arena-vignette {
  position: absolute;
  inset: -1px;
  box-shadow: inset 0 0 125px rgba(0,0,0,.66);
}
.arena-stage-content {
  position: relative;
  z-index: 2;
  min-height: 610px;
  padding: clamp(28px, 5vw, 62px);
  display: grid;
  place-items: center;
}

.arena-shell[data-state="ENCODE"] .arena-glow {
  opacity: .9;
  filter: saturate(1.12) brightness(1.08);
  transform: translate(-50%,-48%) scale(1.04);
}
.arena-shell[data-state="RECALL"] .arena-glow,
.arena-shell[data-state="RETEST"] .arena-glow {
  opacity: .22;
  filter: saturate(.65) brightness(.7);
  transform: translate(-50%,-50%) scale(.83);
}
.arena-shell[data-state="REPAIR"] .arena-glow {
  opacity: 1;
  width: 42%;
  filter: saturate(1.18) brightness(1.13);
}
.arena-shell[data-state="SUMMARY"] .arena-glow,
.arena-shell[data-state="COMPLETE"] .arena-glow { opacity: .72; }
.arena-shell[data-state="RECALL"] .arena-colonnade,
.arena-shell[data-state="RETEST"] .arena-colonnade { opacity: .16; }

.card {
  width: min(760px, 100%);
  text-align: center;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(27,25,20,.48), rgba(14,13,10,.34));
  border: 1px solid rgba(228,210,172,.075);
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
  backdrop-filter: blur(2px);
}
.card.ghost-card { background: rgba(17,15,12,.2); border-color: rgba(228,210,172,.045); }
.card h2 {
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  line-height: 1.12;
  margin-bottom: 15px;
  font-weight: 500;
  text-wrap: balance;
}
.card p {
  color: var(--muted);
  line-height: 1.68;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.card .lead { color: #d8cbb1; font-size: 1.02rem; }
.phase-mark {
  width: 46px;
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, var(--bronze-bright), transparent);
  opacity: .7;
}
.ritual-note {
  margin: 0 auto 22px;
  font-size: .88rem;
  letter-spacing: .045em;
  color: rgba(217,195,142,.78)!important;
}

.primary-btn, .ghost-btn, .dev-controls button, .dev-block-title button, .icon-btn {
  border: 1px solid var(--line);
  background: rgba(37,33,26,.9);
  color: var(--text);
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 17px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.primary-btn:hover, .ghost-btn:hover, .dev-controls button:hover { border-color: var(--line-strong); }
.primary-btn:active, .ghost-btn:active { transform: translateY(1px); }
.primary-btn {
  position: relative;
  overflow: hidden;
  min-width: 190px;
  background: linear-gradient(180deg, #e4cd95, #cdb273);
  color: #18150f;
  border-color: rgba(255,255,255,.15);
  font-weight: 700;
  letter-spacing: .025em;
  box-shadow: 0 9px 28px rgba(121,91,43,.14), inset 0 1px rgba(255,255,255,.24);
}
.primary-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(68,49,24,.15);
  border-radius: 10px;
  pointer-events: none;
}
.ghost-btn { background: rgba(12,11,9,.24); }
.dev-entry { color: #d8c495; }
.danger { color: var(--danger); }

.trace-list {
  list-style: none;
  padding: 0;
  margin: 30px auto 32px;
  width: min(560px, 100%);
  display: grid;
  gap: 13px;
}
.trace-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  min-height: 78px;
  overflow: hidden;
  border: 1px solid rgba(221,201,160,.22);
  border-radius: 14px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.045), transparent 35%),
    linear-gradient(180deg, rgba(69,61,47,.42), rgba(28,25,20,.78));
  text-align: left;
  padding: 10px 19px;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 9px 22px rgba(0,0,0,.11);
}
.trace-item::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(218,194,145,.075);
  border-radius: 9px;
  pointer-events: none;
}
.trace-index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(222,199,148,.28);
  border-radius: 50%;
  color: var(--bronze-bright);
  font-size: .78rem;
  background: rgba(12,10,8,.32);
}
.trace-word {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 4vw, 1.72rem);
  letter-spacing: .065em;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.memory-tablet {
  width: min(590px, 100%);
  margin: 28px auto 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(221,201,160,.18);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.028), transparent 35%),
    rgba(13,12,10,.58);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 40px rgba(0,0,0,.15);
}
.recall-form { display: grid; gap: 15px; }
.field { text-align: left; }
.field label {
  display: block;
  margin-bottom: 6px;
  color: rgba(208,194,165,.82);
  font-size: .85rem;
  letter-spacing: .035em;
}
.field input {
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(225,207,171,.16);
  background: rgba(7,7,6,.72);
  color: var(--text);
  caret-color: var(--bronze-bright);
  outline: none;
  box-shadow: inset 0 1px 12px rgba(0,0,0,.18);
}
.field input:focus { border-color: rgba(223,201,142,.62); box-shadow: 0 0 0 3px rgba(217,195,142,.10); }
.recall-form .primary-btn { justify-self: center; margin-top: 6px; }

.result-list {
  list-style: none;
  padding: 0;
  margin: 24px auto;
  width: min(610px, 100%);
  display: grid;
  gap: 9px;
  text-align: left;
}
.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  background: rgba(10,9,8,.32);
}
.result-row::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 4px rgba(185,149,90,.07);
}
.result-row strong { color: var(--bronze-bright); }
.result-row.ok { border-color: rgba(189,202,169,.26); }
.result-row.ok::before { background: var(--ok); box-shadow: 0 0 0 4px rgba(189,202,169,.06); }
.result-row.bad { border-color: rgba(211,154,132,.28); }
.result-row.bad::before { background: var(--danger); box-shadow: 0 0 0 4px rgba(211,154,132,.06); }

.repair-focus {
  width: min(560px, 100%);
  margin: 27px auto 20px;
  padding: 18px;
  border-radius: 50% / 18%;
  background: radial-gradient(ellipse, rgba(187,139,69,.11), transparent 68%);
}
.repair-focus .trace-list { margin-top: 0; margin-bottom: 18px; }
.notice {
  color: #dfc992!important;
  font-style: italic;
  font-size: 1rem;
  max-width: 550px!important;
}

.summary-grid {
  width: min(620px, 100%);
  margin: 26px auto 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}
.summary-grid div {
  min-height: 94px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(221,201,160,.16);
  border-radius: 14px;
  padding: 14px;
  background: rgba(12,11,9,.38);
}
.summary-grid span { display:block; color:var(--muted); font-size:.82rem; margin-bottom:7px; }
.summary-grid strong { font-size:1.3rem; font-weight:500; color:#ead9b3; }
.summary-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 2px;
  padding: 7px 12px;
  border: 1px solid rgba(223,201,142,.18);
  border-radius: 999px;
  color: #d7c49b;
  font-size: .78rem;
  letter-spacing: .05em;
}
.summary-seal::before { content:"◆"; font-size:.55rem; color:var(--bronze); }

.actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.small { font-size:.88rem; }

.arena-footer { min-height: 48px; }
.build-mark {
  margin: 0;
  color: rgba(185,173,150,.48);
  font-size: .68rem;
  letter-spacing: .08em;
  text-align: center;
}

.dev-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(430px, 94vw);
  background: #100f0c;
  border-left: 1px solid var(--line);
  transform: translateX(102%);
  transition: transform .2s ease;
  z-index: 30;
  overflow-y: auto;
  padding: 18px;
  box-shadow: -20px 0 70px rgba(0,0,0,.36);
}
.dev-panel.open { transform: translateX(0); }
.dev-panel-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.icon-btn { min-width:44px; padding:0; font-size:1.4rem; }
.dev-block { border-top: 1px solid var(--line); padding: 16px 0; }
.dev-grid { margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.dev-grid div { background:rgba(35,31,25,.76); padding:10px; border-radius:10px; min-width:0; }
.dev-grid dt { color:var(--muted); font-size:.74rem; }
.dev-grid dd { margin:4px 0 0; overflow-wrap:anywhere; }
.dev-controls { display:grid; gap:8px; }
.dev-controls.grid-2 { grid-template-columns:repeat(2,1fr); }
.dev-controls select {
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#1d1a15;
  color:var(--text);
  padding:8px 10px;
}
.dev-block-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.dev-block-title h3 { margin-bottom:0; }
.dev-block-title button { min-height:34px; padding:5px 9px; }
pre {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem;
  line-height:1.5;
  color:#ddd4c2;
}
.log { max-height:260px; overflow:auto; background:#0a0907; padding:10px; border-radius:10px; }
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.53); z-index:20; backdrop-filter: blur(1px); }

@keyframes arenaBreath {
  from { transform: translate(-50%,-50%) scale(.98); }
  to { transform: translate(-50%,-49%) scale(1.035); }
}

@media (max-width: 720px) {
  .arena-shell {
    padding: 16px 12px 20px;
    grid-template-rows: auto auto minmax(560px, 1fr) auto;
    gap: 11px;
  }
  .arena-topbar { align-items:flex-start; }
  h1 { font-size: 2.25rem; }
  .dev-entry { min-height: 42px; padding: 8px 11px; font-size:.82rem; }
  .status-strip { border-radius: 14px; font-size:.72rem; gap:7px 11px; padding:8px 10px; }
  .status-strip span:nth-child(3) { max-width: 100%; }
  .status-strip output { max-width: 145px; }
  .arena-stage { min-height: 560px; border-radius: 18px; }
  .arena-stage-content { min-height: 560px; padding: 25px 15px; }
  .arena-horizon { top:17%; width:118%; }
  .arena-colonnade { width:140%; opacity:.18; }
  .arena-ring-outer { width: 105%; }
  .arena-ring-inner { width: 72%; }
  .card { padding: 17px 12px; border-left-color:transparent; border-right-color:transparent; }
  .card h2 { font-size: clamp(1.7rem, 8vw, 2.25rem); }
  .trace-list { margin-top:24px; gap:10px; }
  .trace-item { min-height: 70px; grid-template-columns:47px 1fr; padding:9px 14px; }
  .trace-word { font-size:1.25rem; }
  .memory-tablet { padding:16px 13px; }
  .field input { min-height:54px; font-size:16px; }
  .summary-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .summary-grid div { min-height:83px; padding:11px; }
  .arena-footer { align-items:stretch; flex-wrap:wrap; }
  .arena-footer button { flex:1 1 145px; }
  .build-mark { order:3; width:100%; }
  .dev-controls.grid-2, .dev-grid { grid-template-columns:1fr; }
}

@media (max-width: 430px) {
  .eyebrow { letter-spacing:.14em; }
  .arena-shell { padding-left:9px; padding-right:9px; }
  .arena-stage-content { padding-left:10px; padding-right:10px; }
  .card { padding-left:8px; padding-right:8px; }
  .summary-grid { grid-template-columns:1fr; width:min(360px,100%); }
  .primary-btn { width:min(100%, 320px); }
  .actions { display:grid; }
  .actions .ghost-btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto!important;
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}

/* =========================================================
   VNEW.ARENA.0.2.1.1 — SCENE DEPTH + DIEGETIC INTERACTIONS
   Vertical slice QA: more place, less dashboard.
   ========================================================= */

.arena-shell {
  width: min(1460px, 100%);
  grid-template-rows: auto auto minmax(680px, 1fr) auto;
}
.top-actions { display:flex; align-items:center; gap:9px; }
.immersion-toggle { color:rgba(228,211,174,.7); font-size:.82rem; letter-spacing:.05em; }

.arena-stage {
  min-height: 680px;
  border-color: rgba(229,211,173,.19);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(215,184,121,.115), transparent 29%),
    radial-gradient(ellipse at 50% 76%, rgba(121,84,39,.09), transparent 39%),
    linear-gradient(180deg, rgba(35,32,25,.97), rgba(11,10,8,.985));
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.035),
    inset 0 -50px 100px rgba(0,0,0,.13);
}
.arena-stage-content { min-height:680px; padding:clamp(30px,5vw,70px); }

/* Architectural depth */
.arena-arch {
  position:absolute;
  top:11%;
  width:28%;
  height:58%;
  opacity:.33;
  border:1px solid rgba(221,201,159,.13);
  border-bottom:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 20%, transparent 80%, rgba(0,0,0,.08)),
    linear-gradient(180deg, rgba(88,75,54,.15), rgba(20,18,14,.05));
  box-shadow: inset 0 0 55px rgba(0,0,0,.14);
}
.arena-arch::before {
  content:"";
  position:absolute;
  top:7%; bottom:0; width:38%;
  border:1px solid rgba(221,201,159,.12);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 25% 25% 0 0;
  background:linear-gradient(180deg, rgba(10,9,7,.36), rgba(8,7,6,.11));
}
.arena-arch::after {
  content:"";
  position:absolute;
  inset:3% 5% auto;
  height:9px;
  border-top:1px solid rgba(225,205,162,.10);
  border-bottom:1px solid rgba(0,0,0,.22);
}
.arena-arch-left { left:-4%; border-radius:0 54% 0 0 / 0 30% 0 0; transform:perspective(800px) rotateY(7deg); }
.arena-arch-left::before { right:9%; }
.arena-arch-right { right:-4%; border-radius:54% 0 0 0 / 30% 0 0 0; transform:perspective(800px) rotateY(-7deg); }
.arena-arch-right::before { left:9%; }

.arena-balustrade {
  position:absolute;
  left:50%; top:48%;
  width:min(1260px,105%); height:9%;
  transform:translateX(-50%);
  opacity:.22;
  border-top:1px solid rgba(224,203,159,.12);
  border-bottom:1px solid rgba(224,203,159,.07);
  background:
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(213,193,153,.19) 37px 41px, transparent 42px 73px),
    linear-gradient(180deg, rgba(56,49,38,.18), rgba(12,11,9,.02));
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,transparent 43%,transparent 57%,rgba(0,0,0,.55) 70%,#000);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55) 30%,transparent 43%,transparent 57%,rgba(0,0,0,.55) 70%,#000);
}

.arena-brazier {
  position:absolute;
  top:43%;
  width:46px; height:78px;
  opacity:.58;
  transition:opacity .4s ease, filter .4s ease;
}
.arena-brazier-left { left:11%; }
.arena-brazier-right { right:11%; }
.arena-brazier::before {
  content:""; position:absolute; left:50%; bottom:0; width:5px; height:52px; transform:translateX(-50%);
  background:linear-gradient(90deg,#32281a,#8f7043,#2b2217);
  box-shadow:0 0 0 1px rgba(218,190,134,.07);
}
.arena-brazier::after {
  content:""; position:absolute; left:50%; bottom:45px; width:34px; height:12px; transform:translateX(-50%);
  border-radius:3px 3px 50% 50%;
  background:linear-gradient(180deg,#8b6b3c,#342718);
  border:1px solid rgba(220,192,135,.12);
}
.arena-brazier span,
.arena-brazier span::before,
.arena-brazier span::after {
  position:absolute; content:""; display:block; border-radius:50% 50% 45% 45%;
}
.arena-brazier span {
  left:50%; bottom:56px; width:16px; height:26px; transform:translateX(-50%) rotate(3deg);
  background:radial-gradient(ellipse at 50% 80%, rgba(250,218,145,.68), rgba(185,116,54,.3) 42%, transparent 72%);
  filter:blur(.2px); animation:flameQuiet 3.8s ease-in-out infinite alternate;
}
.arena-brazier span::before { inset:-11px -13px; background:radial-gradient(circle,rgba(211,151,74,.14),transparent 67%); filter:blur(4px); }

.arena-threshold {
  position:absolute; left:50%; bottom:-4%; width:min(900px,82%); height:32%; transform:translateX(-50%);
  opacity:.55;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(222,197,145,.11) 50%,transparent 50.3%),
    repeating-conic-gradient(from 45deg at 50% 90%, rgba(213,188,137,.045) 0 1deg, transparent 1deg 13deg);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000);
}

/* The scene breathes differently according to cognitive phase */
.arena-shell[data-state="ENCODE"] .arena-brazier { opacity:.74; filter:brightness(1.13); }
.arena-shell[data-state="RECALL"] .arena-brazier,
.arena-shell[data-state="RETEST"] .arena-brazier { opacity:.28; filter:saturate(.55) brightness(.72); }
.arena-shell[data-state="REPAIR"] .arena-brazier { opacity:.46; }
.arena-shell[data-state="RECALL"] .arena-arch,
.arena-shell[data-state="RETEST"] .arena-arch { opacity:.19; }
.arena-shell[data-state="REPAIR"] .arena-arch { opacity:.17; filter:blur(.3px); }
.arena-shell[data-state="SUMMARY"] .arena-brazier { opacity:.65; }

/* More physical, less card-like */
.card {
  width:min(960px,100%);
  padding:clamp(20px,3vw,34px);
  background:radial-gradient(ellipse at 50% 45%, rgba(25,22,17,.48), rgba(10,9,7,.16) 68%, transparent 100%);
  border-color:rgba(228,210,172,.045);
  box-shadow:none;
  backdrop-filter:none;
}
.card.ghost-card { background:radial-gradient(ellipse,rgba(12,11,9,.26),transparent 70%); }
.card h2 { font-size:clamp(2rem,4.4vw,3rem); text-shadow:0 2px 22px rgba(0,0,0,.38); }
.card .lead { font-size:clamp(1rem,1.55vw,1.11rem); }

/* Three traces become stable objects in the place */
.trace-list.trace-steles {
  width:min(900px,100%);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,22px);
  margin:36px auto 38px;
  align-items:end;
}
.trace-steles .trace-item {
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr;
  justify-items:center;
  align-content:center;
  min-height:210px;
  padding:28px 18px 25px;
  text-align:center;
  border-radius:42% 42% 12px 12px / 15% 15% 12px 12px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.055),transparent 27%,rgba(0,0,0,.13) 71%),
    linear-gradient(180deg,rgba(96,83,62,.58),rgba(43,37,28,.82));
  border:1px solid rgba(224,204,161,.24);
  box-shadow:
    0 24px 38px rgba(0,0,0,.18),
    inset 0 1px rgba(255,255,255,.04),
    inset 0 -15px 24px rgba(0,0,0,.11);
  transform:perspective(700px) rotateX(.6deg);
}
.trace-steles .trace-item::after {
  content:"";
  position:absolute;
  left:9%; right:9%; bottom:-13px; height:15px;
  border:1px solid rgba(221,199,151,.19);
  border-radius:2px 2px 8px 8px;
  background:linear-gradient(180deg,rgba(86,73,53,.82),rgba(30,26,20,.9));
  box-shadow:0 7px 13px rgba(0,0,0,.18);
}
.trace-steles .trace-index {
  width:34px; height:34px; margin-bottom:27px;
  border-color:rgba(227,204,154,.32);
  background:rgba(17,14,10,.34);
}
.trace-steles .trace-word {
  align-self:center;
  font-size:clamp(1.32rem,2.35vw,1.88rem);
  letter-spacing:.085em;
}

/* Recall becomes three empty loci carved into a tablet */
.memory-tablet {
  width:min(760px,100%);
  padding:clamp(20px,3vw,31px);
  border-radius:12px 12px 28px 28px;
  border-color:rgba(221,201,160,.21);
  background:
    linear-gradient(105deg,rgba(255,255,255,.035),transparent 23%,rgba(0,0,0,.12) 76%),
    linear-gradient(180deg,rgba(62,54,41,.46),rgba(17,15,12,.7));
  box-shadow:0 22px 45px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035), inset 0 -18px 28px rgba(0,0,0,.12);
  position:relative;
}
.memory-tablet::before {
  content:""; position:absolute; inset:7px; border:1px solid rgba(221,201,160,.075); border-radius:9px 9px 22px 22px; pointer-events:none;
}
.recall-form { gap:12px; }
.recall-form .field {
  display:grid;
  grid-template-columns:82px 1fr;
  align-items:center;
  gap:14px;
  padding:7px 8px 7px 13px;
  border-bottom:1px solid rgba(225,207,171,.08);
}
.recall-form .field:last-of-type { border-bottom:0; }
.recall-form .field label {
  margin:0;
  color:rgba(221,201,160,.74);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
}
.field input {
  min-height:56px;
  border-radius:8px;
  border-color:rgba(225,207,171,.13);
  background:linear-gradient(180deg,rgba(7,7,6,.72),rgba(13,12,10,.62));
  font-size:1.08rem;
  letter-spacing:.03em;
}

/* Feedback preserves the same three spatial positions */
.result-list.memory-verdicts {
  width:min(850px,100%);
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  text-align:center;
}
.memory-verdicts .result-row {
  min-height:112px;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:16px 13px;
  background:linear-gradient(180deg,rgba(53,47,37,.37),rgba(12,11,9,.35));
}
.memory-verdicts .result-row::before { width:9px; height:9px; }
.memory-verdicts .result-row span { color:var(--muted); font-size:.9rem; }

/* Repair: world retreats; the failed trace becomes an object of focus */
.repair-focus {
  width:min(760px,100%);
  margin:31px auto 25px;
  padding:32px clamp(18px,4vw,42px) 27px;
  border-radius:48% 48% 18px 18px / 20% 20% 18px 18px;
  border:1px solid rgba(215,179,115,.15);
  background:
    radial-gradient(ellipse at 50% 38%,rgba(205,151,72,.14),transparent 56%),
    linear-gradient(180deg,rgba(50,42,29,.18),rgba(8,7,6,.1));
  box-shadow:0 26px 65px rgba(0,0,0,.2);
}
.repair-focus .trace-list.trace-steles { grid-template-columns:repeat(var(--repair-count,1),minmax(0,270px)); justify-content:center; margin:0 auto 28px; }
.repair-focus .trace-steles .trace-item { min-height:190px; }
.notice {
  display:inline-block;
  padding:10px 16px;
  border-top:1px solid rgba(226,200,147,.12);
  border-bottom:1px solid rgba(226,200,147,.08);
  color:#e4cc95!important;
}

/* The memory threshold: a short, non-spectacular passage */
.arena-memory-veil {
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(19,17,13,.62),rgba(7,7,6,.91) 68%),
    rgba(7,7,6,.82);
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.arena-memory-veil span {
  opacity:0;
  color:rgba(229,212,177,.72);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
  transform:translateY(5px);
  transition:opacity .28s ease .08s, transform .28s ease .08s;
}
.arena-shell.memory-passage .arena-memory-veil { opacity:1; visibility:visible; transition:opacity .25s ease; }
.arena-shell.memory-passage .arena-memory-veil span { opacity:1; transform:translateY(0); }
.arena-shell.memory-passage .arena-stage-content { opacity:.04; transform:scale(.992); transition:opacity .23s ease, transform .23s ease; }

/* DEV immersion: keep escape hatches, remove the dashboard feeling */
.arena-shell.immersive-dev {
  padding-top:12px;
  grid-template-rows:auto minmax(760px,1fr);
  gap:10px;
}
.arena-shell.immersive-dev .brand-block,
.arena-shell.immersive-dev .status-strip,
.arena-shell.immersive-dev .arena-footer { display:none; }
.arena-shell.immersive-dev .arena-topbar {
  position:absolute;
  z-index:12;
  right:max(14px,calc((100vw - min(1460px,100vw))/2 + 16px));
  top:14px;
  justify-content:flex-end;
  pointer-events:none;
}
.arena-shell.immersive-dev .top-actions { pointer-events:auto; opacity:.52; transition:opacity .18s ease; }
.arena-shell.immersive-dev .top-actions:hover,
.arena-shell.immersive-dev .top-actions:focus-within { opacity:1; }
.arena-shell.immersive-dev .arena-stage,
.arena-shell.immersive-dev .arena-stage-content { min-height:calc(100vh - 24px); }
.arena-shell.immersive-dev .arena-stage { border-radius:18px; }
.arena-shell.immersive-dev .immersion-toggle::before { content:"← "; }

/* State-specific composition */
.arena-shell[data-state="REPAIR"] .arena-stage::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 0 25%,rgba(5,5,4,.18) 56%,rgba(4,4,3,.38) 100%);
}
.arena-shell[data-state="RECALL"] .arena-stage::after,
.arena-shell[data-state="RETEST"] .arena-stage::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 0 36%,rgba(4,4,3,.15) 70%,rgba(4,4,3,.25) 100%);
}

@keyframes flameQuiet {
  0% { transform:translateX(-50%) rotate(-2deg) scale(.94,1.04); opacity:.75; }
  100% { transform:translateX(-50%) rotate(4deg) scale(1.08,.94); opacity:.95; }
}

@media (max-width: 900px) {
  .arena-shell { grid-template-rows:auto auto minmax(620px,1fr) auto; }
  .arena-stage,.arena-stage-content { min-height:620px; }
  .trace-list.trace-steles { grid-template-columns:1fr; width:min(520px,100%); gap:12px; }
  .trace-steles .trace-item {
    grid-template-columns:54px 1fr;
    grid-template-rows:1fr;
    justify-items:stretch;
    min-height:82px;
    border-radius:14px;
    padding:11px 19px;
    text-align:left;
  }
  .trace-steles .trace-item::after { display:none; }
  .trace-steles .trace-index { margin:0; }
  .trace-steles .trace-word { align-self:center; }
  .result-list.memory-verdicts { grid-template-columns:1fr; width:min(560px,100%); }
  .memory-verdicts .result-row { min-height:72px; flex-direction:row; justify-content:flex-start; text-align:left; }
  .arena-arch { opacity:.18; width:34%; }
  .arena-brazier-left { left:5%; }
  .arena-brazier-right { right:5%; }
}

@media (max-width: 720px) {
  .top-actions { gap:6px; }
  .immersion-toggle,.dev-entry { min-height:42px; padding:8px 11px; font-size:.75rem; }
  .recall-form .field { grid-template-columns:1fr; gap:5px; padding:7px 4px 11px; }
  .recall-form .field label { padding-left:3px; }
  .arena-brazier { display:none; }
  .arena-shell.immersive-dev { padding:0; }
  .arena-shell.immersive-dev .arena-stage { border-radius:0; border-left:0; border-right:0; }
  .arena-shell.immersive-dev .arena-topbar { top:8px; right:8px; }
  .arena-shell.immersive-dev .arena-stage,
  .arena-shell.immersive-dev .arena-stage-content { min-height:100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-brazier span { animation:none!important; }
  .arena-memory-veil,.arena-memory-veil span,.arena-stage-content { transition:none!important; }
}

/* =========================================================
   VNEW.ARENA.0.2.1.2 — REPAIR LOOP INTEGRITY
   DYNAMIC FOCUS + IMMERSIVE VIEWPORT
   ========================================================= */

/* Immersion owns the viewport: no page-level scroll drift. */
body.arena-immersive-lock {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.arena-immersive-lock .arena-shell.immersive-dev {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: block;
}
body.arena-immersive-lock .arena-shell.immersive-dev .arena-stage {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}
body.arena-immersive-lock .arena-shell.immersive-dev .arena-stage-content {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-top: clamp(46px, 6vh, 78px);
  padding-bottom: clamp(28px, 5vh, 62px);
}
body.arena-immersive-lock .arena-shell.immersive-dev .arena-topbar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 30;
}

/* A little more architectural presence, without making the place brighter. */
.arena-arch { opacity: .38; border-color: rgba(226,205,162,.155); }
.arena-balustrade { opacity: .27; }
.arena-brazier { opacity: .64; }
.arena-threshold { opacity: .64; }
.arena-horizon { border-color: rgba(223,201,152,.115); }
.arena-ring { border-color: rgba(223,201,142,.15); }
.arena-ring-inner { border-color: rgba(223,201,142,.12); }
.arena-shell[data-state="RECALL"] .arena-arch,
.arena-shell[data-state="RETEST"] .arena-arch { opacity:.22; }
.arena-shell[data-state="REPAIR"] .arena-arch { opacity:.20; }

/* Recall fields read as engraved response lines rather than modern form boxes. */
.memory-tablet {
  border-color: rgba(221,201,160,.17);
  background:
    linear-gradient(105deg,rgba(255,255,255,.025),transparent 28%,rgba(0,0,0,.10) 75%),
    linear-gradient(180deg,rgba(53,46,35,.34),rgba(13,12,10,.52));
}
.recall-form .field {
  border-bottom-color: rgba(225,207,171,.12);
}
.field input {
  border: 0;
  border-bottom: 1px solid rgba(225,207,171,.25);
  border-radius: 3px;
  background: linear-gradient(180deg,rgba(7,7,6,.18),rgba(7,7,6,.34));
  box-shadow: inset 0 -1px rgba(0,0,0,.24);
}
.field input:focus {
  border-bottom-color: rgba(223,201,142,.78);
  box-shadow: inset 0 -1px rgba(223,201,142,.22), 0 4px 16px rgba(0,0,0,.12);
}

/* Dynamic repair composition: the physical scene follows the number of fragile traces. */
.repair-card { width: min(1080px, 100%); }
.repair-focus {
  transition: width .24s ease, background .24s ease, border-color .24s ease;
}
.repair-focus[data-repair-count="1"] {
  width: min(480px, 100%);
  padding-left: clamp(28px, 5vw, 58px);
  padding-right: clamp(28px, 5vw, 58px);
}
.repair-focus[data-repair-count="1"] .trace-list.trace-steles {
  width: min(350px, 100%);
  grid-template-columns: 1fr;
}
.repair-focus[data-repair-count="1"] .trace-steles .trace-item {
  min-height: 235px;
  transform: perspective(700px) rotateX(.6deg) scale(1.025);
}
.repair-focus[data-repair-count="2"] {
  width: min(720px, 100%);
}
.repair-focus[data-repair-count="2"] .trace-list.trace-steles {
  width: min(610px, 100%);
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.repair-focus[data-repair-count="3"] {
  width: min(940px, 100%);
}
.repair-focus[data-repair-count="3"] .trace-list.trace-steles {
  width: min(850px, 100%);
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.arena-shell[data-state="REPAIR"] .arena-world {
  filter: saturate(.88) brightness(.93);
}
.arena-shell[data-state="REPAIR"] .arena-ring-outer {
  opacity: .54;
  transform: translate(-50%,-50%) scale(.91);
}
.arena-shell[data-state="REPAIR"] .arena-ring-inner {
  opacity: .72;
  transform: translate(-50%,-50%) scale(.94);
}

/* Completion subtly re-opens the architecture; no fanfare. */
.arena-shell[data-state="COMPLETE"] .arena-threshold {
  opacity: .95;
  filter: brightness(1.22);
}
.arena-shell[data-state="COMPLETE"] .arena-glow {
  opacity: .86;
  transform: translate(-50%,-48%) scale(1.06);
}
.arena-shell[data-state="COMPLETE"] .arena-brazier { opacity:.78; filter:brightness(1.08); }

@media (max-width: 900px) {
  .repair-focus[data-repair-count="2"] .trace-list.trace-steles,
  .repair-focus[data-repair-count="3"] .trace-list.trace-steles {
    grid-template-columns: 1fr;
    width: min(520px,100%);
  }
  .repair-focus[data-repair-count="1"] .trace-steles .trace-item {
    min-height: 112px;
    transform: none;
  }
}

@media (max-width: 720px) {
  body.arena-immersive-lock,
  body.arena-immersive-lock .arena-shell.immersive-dev,
  body.arena-immersive-lock .arena-shell.immersive-dev .arena-stage,
  body.arena-immersive-lock .arena-shell.immersive-dev .arena-stage-content {
    height: 100dvh;
    min-height: 100dvh;
  }
  body.arena-immersive-lock .arena-shell.immersive-dev .arena-stage-content {
    padding-top: 58px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .repair-focus[data-repair-count="1"],
  .repair-focus[data-repair-count="2"],
  .repair-focus[data-repair-count="3"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-focus { transition: none!important; }
}