/* ARGANA — shared styles
   Old-timey adventure-game chrome: tans, maroon, brass — the Correspondence's
   archive reimagined as a Sierra-style parser interface. */

:root{
  --bg:#2b1810;
  --bg-vignette: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(166,124,61,0.14), transparent 60%);

  --box-a:#d9c39c;
  --box-b:#c2a878;
  --border-outer:#3b2415;
  --border-inner:#7a2434;

  --maroon:#7a2434;
  --maroon-bright:#9c3347;
  --gold:#a67c3d;
  --forest:#4a5d3a;
  --rust:#8a2a1f;

  --ink:#3b2415;
  --ink-dim:#8a7458;
  --parchment:#f2e6c9;

  --display:"IM Fell English SC", serif;
  --body:"IM Fell English", serif;
  --mono:"Courier Prime", monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg-vignette), var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  min-height:100vh;
}

/* subtle vintage-screen glow — warm, not cool */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,235,200,0.045) 0px,
    rgba(255,235,200,0.045) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:overlay;
}

a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--parchment); text-decoration:underline;}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--display);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
}

.wordmark{
  font-family:var(--display);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--parchment);
  text-shadow:3px 3px 0 var(--maroon);
}

hr.rule{
  border:none;
  border-top:2px dashed var(--maroon);
  margin:2rem 0;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- PIXEL WINDOW (shared chrome) ---------- */
.pixel-box{
  background:linear-gradient(180deg, var(--box-a), var(--box-b));
  border:4px solid var(--border-outer);
  box-shadow:0 0 0 4px var(--border-inner), 0 0 0 8px var(--border-outer);
  color:var(--ink);
}

/* ---------- GATE ---------- */
.gate{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6vh 1.5rem;
  gap:1.75rem;
}

.sigil{
  width:110px;
  height:110px;
  opacity:0.9;
}
.sigil circle, .sigil path, .sigil line{
  stroke:var(--gold);
  fill:none;
  stroke-width:2.5;
}

.gate h1.wordmark{
  font-size:clamp(1.6rem, 5vw, 2.6rem);
  margin:0;
}

/* the parser box — dialogue text AND the "cut the deck" prompt live in
   the same window, like a Sierra-style adventure game command bar */
.parser-box{
  position:relative;
  padding:1.3rem 1.5rem;
  text-align:left;
  max-width:32em;
}
.dialogue-text{
  margin:0;
  font-family:var(--body);
  font-size:1.15rem;
  line-height:1.75;
  color:var(--ink);
  white-space:pre-wrap;
  min-height:3.5em;
}
.dialogue-cursor{
  display:inline-block;
  margin-left:0.3em;
  color:var(--maroon);
  opacity:0;
}
.dialogue-cursor.idle{
  animation:blink 0.9s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.parser-divider{
  border:none;
  border-top:2px dashed var(--maroon);
  margin:1rem 0 1.1rem;
  opacity:0.6;
}

.gate-form{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--display);
}

.gate-form label{
  color:var(--maroon);
  font-size:0.8rem;
  letter-spacing:0.02em;
}

.gate-form input[type="text"]{
  background:var(--bg);
  border:3px solid var(--border-outer);
  box-shadow:0 0 0 3px var(--border-inner);
  color:var(--parchment);
  font-family:var(--mono);
  font-size:1rem;
  padding:0.6rem 0.75rem;
  width:11em;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.gate-form button{
  background:var(--box-a);
  border:3px solid var(--border-outer);
  box-shadow:0 0 0 3px var(--border-inner);
  color:var(--maroon);
  font-family:var(--display);
  font-size:0.85rem;
  letter-spacing:0.02em;
  padding:0.65rem 0.9rem;
  cursor:pointer;
  transition:transform 0.08s ease;
}
.gate-form button:hover{
  transform:translateY(-2px);
  color:var(--maroon-bright);
}
.gate-form button:active{
  transform:translateY(1px);
}

.gate-error{
  min-height:1.4em;
  color:var(--rust);
  font-family:var(--body);
  font-size:0.95rem;
  margin-top:0.6rem;
  margin-bottom:0;
}

.gate.shake{
  animation:shake 0.4s steps(6);
}
@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-8px);}
  40%,60%{transform:translateX(8px);}
}

.gate-hint{
  font-family:var(--body);
  font-style:italic;
  font-size:0.85rem;
  color:rgba(242,230,201,0.45);
  max-width:26em;
}

/* ---------- WHEEL ---------- */
.wheel-page{
  padding:4vh 1.25rem 6vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}

.wheel-header{
  text-align:center;
  max-width:38em;
}
.wheel-header h1{
  font-family:var(--display);
  letter-spacing:0.04em;
  font-size:clamp(1.3rem,3.4vw,1.8rem);
  margin:0.6em 0 0.5em;
  line-height:1.4;
  color:var(--parchment);
}
.wheel-header p{
  color:rgba(242,230,201,0.65);
  font-size:1rem;
}

.wheel-wrap{
  position:relative;
  width:min(92vw, 560px);
  aspect-ratio:1/1;
  margin:1.5rem 0;
}

.wheel-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:34%;
  height:34%;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0.5rem;
}
.wheel-center span{
  font-family:var(--display);
  font-size:0.7rem;
  line-height:1.5;
  letter-spacing:0.02em;
  color:var(--ink-dim);
}

.wheel-ring{
  position:absolute;
  inset:0;
  border:2px dashed rgba(122,36,52,0.4);
  border-radius:50%;
}

.node{
  position:absolute;
  width:58px;
  height:74px;
  margin-left:-29px;
  margin-top:-37px;
  background:linear-gradient(180deg, var(--box-a), var(--box-b));
  border:3px solid var(--border-outer);
  box-shadow:0 0 0 3px var(--border-inner);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  color:var(--ink);
  text-decoration:none;
  transition:transform 0.12s steps(3);
  cursor:pointer;
}
.node .num{
  font-size:0.85rem;
}
.node .glyph{
  font-size:0.55rem;
  font-family:var(--display);
  color:var(--forest);
  margin-top:0.4em;
  text-align:center;
  line-height:1.3;
}

.node.unlocked:hover,
.node.unlocked:focus-visible{
  transform:scale(1.1);
  box-shadow:0 0 0 3px var(--gold);
}

.node.locked{
  box-shadow:0 0 0 3px rgba(122,36,52,0.3);
  color:var(--ink-dim);
  transform:rotate(180deg);
  filter:saturate(0.6) brightness(0.85);
}
.node.locked .glyph{
  color:var(--rust);
  transform:rotate(180deg);
}
.node.locked:hover{
  box-shadow:0 0 0 3px var(--rust);
}

.node.locked::after{
  content:attr(data-hint);
  position:absolute;
  bottom:-2.8em;
  left:50%;
  transform:translateX(-50%) rotate(180deg);
  width:9em;
  font-family:var(--body);
  font-size:0.8rem;
  color:rgba(242,230,201,0.7);
  text-align:center;
  opacity:0;
  transition:opacity 0.15s ease;
  pointer-events:none;
}
.node.locked:hover::after{ opacity:1; }

.ledger{
  width:min(92vw, 620px);
  padding:1rem 1.2rem;
  font-family:var(--body);
  font-size:0.95rem;
}
.ledger-row{
  display:flex;
  justify-content:space-between;
  padding:0.4rem 0;
  border-bottom:2px dotted rgba(122,36,52,0.3);
  color:var(--ink-dim);
}
.ledger-row.unlocked{ color:var(--forest); }
.ledger-row .roman{ color:var(--maroon); width:3.5em; font-family:var(--display); font-size:0.8rem; }

.keyring{
  width:min(92vw, 620px);
  display:flex;
  gap:0.5rem;
  font-family:var(--body);
  margin-top:0.5rem;
}
.keyring input{
  flex:1;
  background:var(--bg);
  border:3px solid var(--border-outer);
  box-shadow:0 0 0 3px var(--border-inner);
  color:var(--parchment);
  padding:0.55rem 0.7rem;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.keyring button{
  background:var(--box-a);
  border:3px solid var(--border-outer);
  box-shadow:0 0 0 3px var(--border-inner);
  color:var(--maroon);
  font-family:var(--display);
  font-size:0.8rem;
  padding:0.55rem 0.9rem;
  cursor:pointer;
}
.keyring button:hover{ box-shadow:0 0 0 3px var(--gold); color:var(--maroon-bright); }

.keyring-msg{
  font-family:var(--body);
  font-size:0.9rem;
  min-height:1.4em;
  color:var(--forest);
}

.channels{
  width:min(92vw, 620px);
  margin-top:1rem;
  padding:1rem 1.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.6rem;
  font-family:var(--body);
  font-size:0.95rem;
}
.channels a{ color:var(--ink-dim); }
.channels a:hover{ color:var(--maroon); }

/* ---------- CARD PAGE ---------- */
.card-page{
  max-width:640px;
  margin:0 auto;
  padding:5vh 1.25rem 8vh;
}

.card-nav{
  font-family:var(--display);
  font-size:0.8rem;
}
.card-nav a{ color:var(--gold); }

.card-frame{
  margin:2rem 0;
  padding:2rem 1.5rem;
}

.card-frame .roman{
  font-family:var(--display);
  letter-spacing:0.08em;
  color:var(--maroon);
  font-size:0.85rem;
}

.card-frame h1{
  font-family:var(--display);
  letter-spacing:0.03em;
  font-size:clamp(1.4rem,4vw,2rem);
  margin:0.5em 0 1.1em;
  line-height:1.4;
  color:var(--ink);
}

.card-art{
  width:100%;
  max-width:240px;
  margin:0 auto 1.5rem;
  display:block;
}
.card-art .line{
  stroke:var(--maroon);
  fill:none;
  stroke-width:2.5;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.card-art .fill-verdigris{ fill:var(--forest); stroke:none; }
.card-art .fill-brass{ fill:var(--gold); stroke:none; }

.meanings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:1.5rem 0;
  font-size:0.98rem;
}
@media (max-width:480px){
  .meanings{ grid-template-columns:1fr; }
}
.meanings h3{
  font-family:var(--display);
  font-size:0.75rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 0.5em;
  line-height:1.4;
}

.reveal{
  margin:2rem 0;
  padding:1rem;
  border:2px dashed rgba(122,36,52,0.5);
}
.reveal p{
  color:var(--box-a);
  background:var(--box-a);
  user-select:all;
  transition:color 0.15s ease;
}
.reveal p::selection{ color:var(--ink); background:var(--gold); }
.reveal-label{
  font-family:var(--display);
  font-size:0.75rem;
  letter-spacing:0.03em;
  color:var(--maroon);
  margin-bottom:0.7rem;
  line-height:1.4;
}

.cipher{
  font-family:var(--mono);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.12em;
  color:var(--maroon);
  word-break:break-all;
  line-height:2;
}

footer.sitefoot{
  text-align:center;
  font-family:var(--display);
  font-size:0.7rem;
  letter-spacing:0.02em;
  color:rgba(242,230,201,0.4);
  padding:3rem 1rem 2rem;
  line-height:2;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}