/* ====== Rogue backend look ====== */
:root{
  --bg:#0b0b0c;
  --fg:#d9d3c5;
  --muted:#a79f8b;
  --accent:#b59a5b;
  --focus:rgba(181,154,91,.6);
  --edge:#1a1a1d;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

*{ box-sizing:border-box; }
a{ color:var(--accent); text-decoration:none; }
a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ====== Layout ====== */
.wrap{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

header,footer{
  padding:16px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--edge);
}
footer{ border-top:1px solid var(--edge); border-bottom:none; }

header h1{
  margin:0 0 6px 0;
  font-size:clamp(18px,2.6vw,24px);
  letter-spacing:.03em;
}
header .sub{ color:var(--muted); font-size:.95rem; }

main{
  padding:24px clamp(16px,4vw,40px) 40px;
  display:grid;
  gap:28px;
  align-content:start;
}

.panel{
  border:1px solid var(--edge);
  background:#0f0f11;
  padding:clamp(16px,3vw,24px);
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}

.grid{ display:grid; gap:16px; }
.hint{ color:var(--muted); font-size:.95rem; }

/* Utilities */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.pill{
  display:inline-block;
  padding:.2rem .6rem;
  border:1px solid #2a2a2e;
  border-radius:999px;
  background:#0c0c0e;
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.02em;
}

/* Divider line helper (for single-line callouts) */
.divider{
  display:flex; align-items:center; gap:.75rem;
}
.divider::before,.divider::after{
  content:""; flex:1 1 auto; height:1px; background:#222;
}

/* ====== HUD ====== */
.hud{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hud label{
  font-size:.8rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.hud input{
  width:100%;
  padding:10px 12px;
  font:inherit;
  color:var(--fg);
  background:#0c0c0e;
  border:1px solid #2a2a2e;
  border-radius:6px;
  outline:none;
}
.hud input:focus{
  box-shadow:0 0 0 2px var(--focus);
  border-color:var(--focus);
}
.good{ color:#a7e3a3; }
.bad{ color:#f2a09a; }

/* Optional: light-up block when ready */
.block{
  border:1px solid #232326;
  background:#0c0c0e;
  border-radius:8px;
  padding:12px 14px;
  transition:box-shadow .2s, border-color .2s;
}
.block.ready{
  border-color:rgba(181,154,91,.55);
  box-shadow:0 0 0 2px var(--focus);
}

/* ====== WAX SEAL LAYERS ====== */
/* Use a backgrounded element to avoid iOS image long-press/save */
#waxSealStage{ display:grid; place-items:center; gap:.5rem; }

#waxSeal{
  width:clamp(180px,40vw,320px);
  aspect-ratio:1/1;
  background-image:url('/img/wax-seal.png'); /* base image */
  background-size:cover;
  background-position:center;
  border-radius:50%;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none; /* iOS: prevent Save Image */
  touch-action:none;          /* prevent scroll/zoom during hold */
  outline:none;
  position:relative;
  cursor:pointer;
  z-index:1;
  -webkit-tap-highlight-color:transparent;
}

/* Mid-progress visual at ~50% (JS toggles .half) */
#waxSeal.half{
  background-image:url('/img/wax-seal-press2.png');
}

/* Completed visual (JS toggles .done) */
#waxSeal.done{
  background-image:url('/img/wax-seal-final.png');
  cursor:default;
}

/* Optional subtle hold ring */
#waxSeal.is-holding::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.05);
  border-radius:50%;
}

/* ====== LEDGER INK BLEED ====== */
#ledgerBox{
  position:relative;
  width:min(560px,90vw);
  height:340px;
  margin:12px auto;
  background:#0a0f14;
  border:1px solid #223;
  border-radius:8px;
  overflow:hidden;
}
#ledgerBox .layer{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  will-change:opacity;
  opacity:0;   /* JS animates this for crossfade */
  pointer-events:none; /* purely visual */
}

/* Initial states: before visible, after hidden */
#ledgerBefore{ opacity:1; }
#ledgerAfter{ opacity:0; }

/* Optional caption/progress styling */
.progress{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* ====== Buttons ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border:1px solid #2a2a2e;
  background:#0c0c0e;
  color:var(--fg);
  border-radius:8px;
  cursor:pointer;
  font:inherit;
}
.btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.btn[disabled], .btn:disabled{
  opacity:.55; cursor:not-allowed;
}

/* ====== Terminal-ish text (optional) ====== */
.term{
  font-size:.95rem;
  line-height:1.55;
  color:var(--fg);
  background:#0c0c0e;
  border:1px solid #232326;
  border-radius:8px;
  padding:12px 14px;
  max-height:50vh;
  overflow:auto;
}
.term .muted{ color:var(--muted); }

/* Optional live caret if you render one */
.caret{
  display:inline-block;
  width:.6ch; height:1em;
  background:currentColor;
  vertical-align:-.15em;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ====== Overlays / gating ====== */
/* If you gate the page with a login overlay: mark it with [data-ra-overlay] */
[data-ra-overlay]{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(2px);
  z-index:999;
}

/* When hidden, make it truly non-interactive so it doesn't eat clicks */
[data-ra-overlay][aria-hidden="true"]{
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* ====== Small screens ====== */
@media (max-width: 520px){
  .hud{ grid-template-columns:1fr; }
  #ledgerBox{ height:260px; }
}

/* Glow the "Summon Dialogue" button when all three fragments are correct */
@keyframes raBtnGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(95,187,166,.35) inset,
      0 0 0 2px rgba(95,187,166,.18),
      0 0 18px rgba(95,187,166,.14);
    transform: translateZ(0) scale(1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(95,187,166,.5) inset,
      0 0 0 3px rgba(95,187,166,.28),
      0 0 34px rgba(95,187,166,.22);
    transform: translateZ(0) scale(1.01);
  }
}

/* Visual glow + GREEN TEXT when ready (covers both .highlight-block and .block patterns) */
.highlight-block.ready #openTerminal,
.block.ready #openTerminal,
#openTerminal.glow {
  border-color: rgba(95,187,166,.55);
  background: linear-gradient(180deg, #101820, #0c141a);
  animation: raBtnGlow 1.8s ease-in-out infinite;
  color: #22c55e !important; /* bright green text */
}

@media (prefers-reduced-motion: reduce) {
  .highlight-block.ready #openTerminal,
  .block.ready #openTerminal,
  #openTerminal.glow { animation: none; }
}