/* style.css — Castle Cryptographer */
:root{
  --stone-1:#2a2620; --stone-2:#383229; --stone-3:#403930;
  --mortar:#1c1915;
  --parchment:#f2e6cc; --parchment-dark:#e4d4b4; --parchment-edge:#c8b88c;
  --ink:#3a2a1a; --ink-light:#6a5a40;
  --gold:#d4a843; --gold-bright:#eac456; --gold-deep:#a87a20;
  --torch:#ff7a2a; --torch-glow:rgba(255,122,42,0.35);
  --accent:#d4a843;
  --bg:#1a1714;
  --panel:#2a2520;
  --text:#e8dcc8; --text-dim:#a09078;
  --green:#4a9a4a; --green-light:#6abc6a;
  --red:#b84a3a; --red-light:#d46a5a;
  --serif:Georgia,'Times New Roman','Droid Serif',serif;
  --mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --stone-1:#6a6258; --stone-2:#7a7268; --stone-3:#8a8278;
  --mortar:#5a5248;
  --parchment:#faf3e0; --parchment-dark:#f0e8d0; --parchment-edge:#d8c8a0;
  --ink:#3a2a1a; --ink-light:#7a6a50;
  --gold:#b8902f; --gold-bright:#d4a843; --gold-deep:#8a6a1a;
  --bg:#d8d0c4; --panel:#e8e0d4; --text:#2a2218; --text-dim:#5a5044;
  --green:#3a7a3a; --green-light:#4a9a4a;
  --red:#9a3a2a; --red-light:#b85a4a;
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--serif);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}

#app{
  display:flex;flex-direction:column;height:100%;
  position:relative;
}

/* Stone wall background */
#app::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--stone-1);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cdefs%3E%3Cpattern id='b' width='120' height='80' patternUnits='userSpaceOnUse'%3E%3Crect width='120' height='80' fill='%23383229'/%3E%3Crect x='2' y='2' width='54' height='34' rx='2' fill='%23403930'/%3E%3Crect x='62' y='2' width='54' height='34' rx='2' fill='%23363027'/%3E%3Crect x='-28' y='42' width='54' height='34' rx='2' fill='%233c352c'/%3E%3Crect x='32' y='42' width='54' height='34' rx='2' fill='%23433c32'/%3E%3Crect x='92' y='42' width='54' height='34' rx='2' fill='%23383128'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='120' height='80' fill='url(%23b)'/%3E%3C/svg%3E");
  background-size:120px 80px;
  opacity:0.9;
}
html[data-theme="light"] #app::before{opacity:0.45;}

/* Torch glow overlay */
#app::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 320px 440px at 40px 60px, var(--torch-glow), transparent 70%),
    radial-gradient(ellipse 320px 440px at calc(100% - 40px) 60px, var(--torch-glow), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.35), transparent 60%);
}

/* ── TOP BAR ── */
#topbar{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 70px;gap:12px;
  background:linear-gradient(180deg,rgba(18,16,12,0.96),rgba(18,16,12,0.75));
  border-bottom:2px solid var(--mortar);
  box-shadow:0 4px 24px rgba(0,0,0,0.55),inset 0 -1px 0 rgba(212,168,67,0.1);
  min-height:64px;
}
html[data-theme="light"] #topbar{background:linear-gradient(180deg,rgba(72,64,56,0.92),rgba(72,64,56,0.65));}

.title-block{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;}
.emblem{color:var(--gold);flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));}
#topbar h1{
  font-family:var(--serif);font-weight:900;
  font-size:1.3rem;margin:0;letter-spacing:0.06em;
  color:var(--gold-bright);text-shadow:0 2px 6px rgba(0,0,0,0.7),0 0 20px rgba(212,168,67,0.15);
  white-space:nowrap;
}
.subtitle{margin:0;font-size:0.7rem;color:var(--text-dim);font-style:italic;letter-spacing:0.04em;}

/* Torches */
.torch{position:relative;width:20px;height:50px;flex-shrink:0;}
.torch-mini{position:relative;width:16px;height:36px;display:inline-block;vertical-align:middle;}
.flame{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:24px;
  background:radial-gradient(ellipse at 50% 80%,#ffec80 0%,#ff9a30 40%,#ff4400 75%,transparent 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:flicker 0.5s ease-in-out infinite alternate;
  filter:blur(0.5px);
  box-shadow:0 0 16px var(--torch-glow),0 0 36px var(--torch-glow);
}
.torch .flame{width:18px;height:30px;}
.torch::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:6px;height:24px;background:linear-gradient(180deg,#6a4a2a,#3a2a1a);
  border-radius:2px;
}
.torch-mini::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:5px;height:16px;background:linear-gradient(180deg,#6a4a2a,#3a2a1a);
  border-radius:2px;
}
@keyframes flicker{
  0%{transform:translateX(-50%) scale(1,1) rotate(-2deg);opacity:0.88;}
  100%{transform:translateX(-50%) scale(1.1,1.15) rotate(2deg);opacity:1;}
}

/* Badges */
.badges-pod{flex-shrink:0;width:60px;display:flex;justify-content:flex-end;}
.badge-count{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,0,0,0.45);border:1px solid var(--gold);
  border-radius:20px;padding:4px 10px;color:var(--gold-bright);
  font-family:var(--serif);font-weight:700;font-size:0.82rem;
  box-shadow:0 0 12px rgba(212,168,67,0.15),inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme="light"] .badge-count{background:rgba(255,255,255,0.35);}

/* Sound toggle */
.sound-toggle{
  flex-shrink:0;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--mortar);
  border-radius:50%;
  cursor:pointer;
  color:var(--text-dim);
  transition:all 0.2s;
  padding:0;
}
.sound-toggle:hover{
  color:var(--gold-bright);
  border-color:var(--gold);
  background:rgba(212,168,67,0.12);
  box-shadow:0 0 12px rgba(212,168,67,0.15);
}
.sound-toggle:active{transform:scale(0.92);}
html[data-theme="light"] .sound-toggle{background:rgba(255,255,255,0.3);}

/* ── CONTENT ── */
#content{
  position:relative;z-index:2;flex:1;
  overflow-y:auto;
  padding:20px 16px 90px;
  scroll-behavior:smooth;
}
#content::-webkit-scrollbar{width:10px;}
#content::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);}
#content::-webkit-scrollbar-thumb{background:var(--stone-3);border-radius:5px;border:2px solid var(--mortar);}
#content::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

/* ── ENTRANCE ANIMATIONS ── */
#content.entering{
  animation:contentEnter 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes contentEnter{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.room-card{
  animation:cardEnter 0.45s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
.room-card:nth-child(1){animation-delay:0.08s;}
.room-card:nth-child(2){animation-delay:0.16s;}
.room-card:nth-child(3){animation-delay:0.24s;}
.room-card:nth-child(4){animation-delay:0.32s;}
.codex-card{
  animation:cardEnter 0.45s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
.codex-card:nth-child(1){animation-delay:0.08s;}
.codex-card:nth-child(2){animation-delay:0.16s;}
.codex-card:nth-child(3){animation-delay:0.24s;}
.codex-card:nth-child(4){animation-delay:0.32s;}
@keyframes cardEnter{
  from{opacity:0;transform:translateY(18px) scale(0.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* ── PARCHMENT ── */
.parchment{
  position:relative;
  background:
    radial-gradient(ellipse at 15% 8%, rgba(180,160,120,0.22), transparent 50%),
    radial-gradient(ellipse at 85% 92%, rgba(180,160,120,0.18), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(200,180,140,0.08), transparent 70%),
    linear-gradient(135deg,var(--parchment) 0%,var(--parchment-dark) 100%);
  color:var(--ink);
  border-radius:8px;
  padding:26px 24px;
  margin:14px auto;
  max-width:760px;
  box-shadow:
    0 6px 28px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 0 80px rgba(180,160,120,0.18),
    inset 0 1px 0 rgba(255,255,255,0.2);
  border:1px solid var(--parchment-edge);
}
.parchment::before,.parchment::after{
  content:'';position:absolute;width:34px;height:34px;
  background:radial-gradient(circle,rgba(120,100,70,0.28),transparent 70%);
  border-radius:50%;pointer-events:none;
}
.parchment::before{top:8px;left:8px;}
.parchment::after{bottom:8px;right:8px;}
.parchment h2{
  font-family:var(--serif);font-weight:700;
  color:var(--ink);font-size:1.4rem;margin:0 0 12px;
  border-bottom:2px solid var(--parchment-edge);padding-bottom:10px;
  letter-spacing:0.01em;
}
.parchment h3{font-family:var(--serif);color:var(--ink);margin:14px 0 6px;}
.parchment p{margin:8px 0;line-height:1.65;font-size:1.02rem;}
.parchment strong{color:var(--ink);font-weight:600;}
.parchment em{color:var(--ink-light);}

/* ── HALL ── */
.hall{max-width:820px;margin:0 auto;}
.hall-banner{
  position:relative;border-radius:12px;overflow:hidden;
  margin-bottom:24px;min-height:200px;
  border:2px solid var(--mortar);
  box-shadow:0 8px 36px rgba(0,0,0,0.65),inset 0 0 0 1px rgba(212,168,67,0.1);
}
.hall-img{
  width:100%;height:240px;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--stone-2),var(--stone-1));
}
.hall-overlay{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;gap:14px;
  padding:18px;
  background:linear-gradient(0deg,rgba(18,16,12,0.94),rgba(18,16,12,0.5) 65%,transparent);
}

/* Master figure */
.master-figure{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;
}
.master-portrait{
  width:110px;height:110px;border-radius:50%;
  border:3px solid var(--gold);object-fit:cover;
  background:var(--stone-2);
  box-shadow:0 0 28px var(--torch-glow),0 4px 16px rgba(0,0,0,0.6),inset 0 0 0 1px rgba(255,255,255,0.1);
}
.master-name-plate{
  font-family:var(--serif);font-weight:700;font-size:0.66rem;
  text-align:center;line-height:1.25;letter-spacing:0.06em;
  color:var(--gold-bright);text-shadow:0 1px 4px rgba(0,0,0,0.9);
  text-transform:uppercase;
  background:rgba(0,0,0,0.55);padding:4px 12px;border-radius:5px;
  border:1px solid rgba(212,168,67,0.35);
}
.greeting{flex:1;margin:0;padding:16px 18px;font-size:0.92rem;}
.greeting h2{font-size:1.15rem;margin:0 0 6px;}
.greeting p{margin:6px 0;font-size:0.9rem;line-height:1.55;}

.section-heading{
  font-family:var(--serif);font-weight:700;
  text-align:center;color:var(--gold-bright);
  font-size:1.2rem;letter-spacing:0.1em;
  margin:28px 0 16px;text-shadow:0 2px 6px rgba(0,0,0,0.7);
  display:flex;align-items:center;justify-content:center;gap:10px;
}

.room-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;max-width:820px;margin:0 auto;
}
.room-card{
  background:linear-gradient(160deg,var(--stone-3),var(--stone-2));
  border:2px solid var(--mortar);border-radius:10px;
  padding:20px 14px;text-align:center;cursor:pointer;
  color:var(--text);font-family:var(--serif);
  transition:transform 0.22s cubic-bezier(0.22,0.61,0.36,1),box-shadow 0.22s,border-color 0.22s;
  position:relative;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.04);
}
.room-card:not(:disabled):hover{
  transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 10px 36px rgba(0,0,0,0.55),0 0 24px var(--torch-glow),inset 0 1px 0 rgba(255,255,255,0.06);
}
.room-card:not(:disabled):active{transform:translateY(-2px);}
.room-card.done{border-color:var(--gold);}
.room-card.done::after{
  content:'✓';position:absolute;top:8px;right:12px;
  color:var(--gold-bright);font-size:1.2rem;font-weight:700;
  text-shadow:0 0 8px rgba(212,168,67,0.4);
}
.room-card.locked{opacity:0.45;cursor:not-allowed;}
.room-icon{
  color:var(--accent);width:52px;height:52px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.35);border-radius:50%;
  border:2px solid var(--accent);
  box-shadow:0 0 16px rgba(212,168,67,0.1),inset 0 1px 0 rgba(255,255,255,0.05);
}
.room-icon svg{width:28px;height:28px;}
.room-name{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--gold-bright);margin-bottom:4px;letter-spacing:0.01em;}
.room-desc{font-size:0.82rem;color:var(--text-dim);line-height:1.45;margin-bottom:10px;}
.room-status{font-size:0.76rem;color:var(--accent);font-style:italic;letter-spacing:0.02em;}

/* ── ROOM ── */
.room{max-width:820px;margin:0 auto;}
.room-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;margin-bottom:8px;
  border-bottom:2px solid var(--accent);
}
.room-header h2{
  font-family:var(--serif);font-weight:900;
  color:var(--accent);font-size:1.3rem;margin:0;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);flex:1;letter-spacing:0.02em;
}
.room-header-icon{
  color:var(--accent);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.35);border-radius:50%;border:2px solid var(--accent);
  box-shadow:0 0 12px rgba(212,168,67,0.1);
}
.room-header-icon svg{width:24px;height:24px;}

.back-btn{
  background:var(--stone-2);color:var(--text-dim);
  border:1px solid var(--mortar);border-radius:6px;
  padding:7px 16px;cursor:pointer;font-family:var(--serif);
  font-size:0.85rem;transition:all 0.2s;
}
.back-btn:hover{color:var(--gold-bright);border-color:var(--gold);background:var(--stone-3);}

.block-heading{
  font-family:var(--serif);font-weight:700;
  color:var(--gold-bright);font-size:1.05rem;
  text-align:center;margin:22px 0 8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);letter-spacing:0.02em;
}

/* Lesson */
.lesson h2{font-size:1.35rem;}
.example-box{
  background:rgba(120,100,70,0.1);border:1px dashed var(--parchment-edge);
  border-radius:8px;padding:16px;margin:14px 0;text-align:center;
}
.example-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0;}
.ex-label{font-family:var(--serif);font-weight:700;color:var(--ink-light);min-width:50px;text-align:right;font-size:0.85rem;}
.ex-letters{font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:0.15em;color:var(--ink);}
.ex-letters.mono{font-family:var(--mono);letter-spacing:0.2em;}
.example-arrow{color:var(--ink-light);font-size:0.82rem;font-style:italic;margin:4px 0;}

/* Demo */
.demo-controls{margin-bottom:14px;}
.demo-controls label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);justify-content:center;flex-wrap:wrap;}
.demo-controls input[type=range]{
  width:200px;accent-color:var(--gold);
}
.demo-controls input[type=text],.demo-controls input[type=number]{
  background:rgba(255,255,255,0.5);border:1px solid var(--parchment-edge);
  border-radius:5px;padding:5px 10px;font-family:inherit;font-size:0.95rem;color:var(--ink);
  transition:border-color 0.2s;
}
.demo-controls input:focus{outline:none;border-color:var(--gold);}
.wheel-wrap{
  display:flex;justify-content:center;align-items:center;
  margin:14px auto;padding:10px;
  background:radial-gradient(circle at 50% 45%, rgba(120,100,70,0.15), transparent 70%);
  border-radius:50%;
}
.cipher-wheel{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.wheel-caption{
  font-size:0.85rem;color:var(--ink-light);font-style:italic;
  text-align:center;margin:6px auto 12px;max-width:440px;line-height:1.5;
}
.wheel-caption strong{color:var(--ink);font-style:normal;}
.demo-io{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.io-row{display:flex;align-items:center;gap:10px;}
.io-label{font-family:var(--serif);font-weight:700;color:var(--ink-light);min-width:90px;font-size:0.85rem;}
.io-output{
  flex:1;background:rgba(255,255,255,0.4);border:1px solid var(--parchment-edge);
  border-radius:5px;padding:7px 12px;font-family:var(--serif);font-weight:700;
  font-size:1.05rem;letter-spacing:0.1em;color:var(--ink);min-height:36px;
}
.io-output.mono{font-family:var(--mono);letter-spacing:0.2em;}
.io-row input[type=text]{
  flex:1;background:rgba(255,255,255,0.5);border:1px solid var(--parchment-edge);
  border-radius:5px;padding:7px 12px;font-family:var(--serif);font-weight:700;
  font-size:1.05rem;letter-spacing:0.1em;color:var(--ink);
  transition:border-color 0.2s;
}
.io-row input[type=text]:focus{outline:none;border-color:var(--gold);}
.demo-note{font-size:0.88rem;color:var(--ink-light);font-style:italic;margin-top:10px;line-height:1.5;}

/* Substitution grid */
.sub-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
  gap:4px;margin:12px auto;max-width:520px;
}
.sub-mini{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));}
.sub-pair{
  display:flex;flex-direction:column;align-items:center;
  background:rgba(120,100,70,0.08);border:1px solid var(--parchment-edge);
  border-radius:5px;padding:4px 2px;
}
.sub-from{font-family:var(--serif);font-weight:700;font-size:0.9rem;color:var(--ink);}
.sub-arrow{font-size:0.6rem;color:var(--ink-light);}
.sub-to{font-family:var(--serif);font-weight:700;font-size:0.9rem;color:var(--gold-deep);}

/* Puzzle */
.cipher-text{
  font-family:var(--serif);font-weight:900;font-size:1.4rem;
  letter-spacing:0.2em;text-align:center;
  background:rgba(80,60,40,0.12);border:2px solid var(--parchment-edge);
  border-radius:8px;padding:16px;margin:12px 0;color:var(--ink);
}
.puzzle-hint{font-size:0.88rem;color:var(--ink-light);font-style:italic;text-align:center;line-height:1.5;}
.puzzle-input{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.puzzle-input input[type=text]{
  flex:1;min-width:180px;
  background:rgba(255,255,255,0.6);border:2px solid var(--parchment-edge);
  border-radius:7px;padding:10px 14px;font-family:var(--serif);font-weight:700;
  font-size:1.05rem;letter-spacing:0.1em;color:var(--ink);
  transition:border-color 0.2s,box-shadow 0.2s;
}
.puzzle-input input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,67,0.2);}
.check-btn,.big-btn{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#3a2a1a;border:2px solid var(--gold-deep);border-radius:7px;
  padding:10px 22px;font-family:var(--serif);font-weight:700;
  font-size:0.95rem;cursor:pointer;letter-spacing:0.03em;
  box-shadow:0 3px 12px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.3);
  transition:all 0.15s;
}
.check-btn:hover,.big-btn:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.3);}
.check-btn:active,.big-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.big-btn.secondary{background:linear-gradient(180deg,#8a7a5a,#6a5a40);color:var(--text);border-color:#4a3a20;}
.puzzle-feedback{margin-top:10px;text-align:center;min-height:24px;}
.fb-success{color:var(--green);font-weight:700;font-size:1.05rem;}
.fb-error{color:var(--red);font-weight:700;}
html[data-theme="light"] .fb-success{color:var(--green);}
html[data-theme="light"] .fb-error{color:var(--red);}

/* Solved banner */
.solved-banner{
  display:flex;align-items:center;gap:18px;text-align:left;
}
.solved-banner h3{font-family:var(--serif);color:var(--green);margin:0 0 4px;}
.solved-banner p{margin:0;color:var(--ink);}
.solved-seal{flex-shrink:0;}

/* Seal badge */
.seal{animation:sealPop 0.55s cubic-bezier(0.22,1.5,0.36,1);}
@keyframes sealPop{0%{transform:scale(0) rotate(-20deg);}60%{transform:scale(1.15) rotate(5deg);}100%{transform:scale(1) rotate(0);}}

/* ── CODEX ── */
.codex{max-width:820px;margin:0 auto;}
.codex-intro{
  text-align:center;color:var(--text-dim);font-style:italic;
  margin:10px 0 18px;font-size:0.95rem;
}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.codex-card{
  background:linear-gradient(160deg,var(--parchment),var(--parchment-dark));
  border:2px solid var(--parchment-edge);border-radius:10px;
  padding:20px;color:var(--ink);position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.2);
}
.codex-card.mastered{border-color:var(--accent);box-shadow:0 4px 20px rgba(0,0,0,0.45),0 0 16px var(--torch-glow),inset 0 1px 0 rgba(255,255,255,0.2);}
.codex-icon{
  color:var(--accent);width:40px;height:40px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(120,100,70,0.12);border-radius:50%;border:2px solid var(--accent);
}
.codex-icon svg{width:24px;height:24px;}
.codex-card h3{font-family:var(--serif);font-weight:700;margin:0 0 4px;color:var(--ink);}
.codex-short{font-style:italic;color:var(--ink-light);font-size:0.9rem;margin:0 0 10px;}
.codex-detail p{margin:6px 0;font-size:0.9rem;line-height:1.55;}
.codex-detail strong{color:var(--ink);}
.codex-seal{position:absolute;top:10px;right:10px;transform:scale(0.65);transform-origin:top right;}
.codex-locked{font-size:0.8rem;color:var(--ink-light);font-style:italic;margin-top:8px;}
.codex-empty{text-align:center;padding:30px;}

/* ── TRIAL ── */
.trial{max-width:700px;margin:0 auto;}
.trial-progress{margin:10px 0 14px;}
.progress-bar{
  height:12px;background:rgba(0,0,0,0.45);border-radius:6px;
  border:1px solid var(--mortar);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  border-radius:5px;transition:width 0.4s cubic-bezier(0.22,0.61,0.36,1);
  box-shadow:0 0 8px rgba(212,168,67,0.3);
}
.progress-text{
  display:block;text-align:center;margin-top:6px;
  font-family:var(--serif);font-size:0.82rem;color:var(--text-dim);letter-spacing:0.02em;
}
.quiz-body{min-height:200px;}
.quiz-question{
  font-family:var(--serif);font-weight:700;font-size:1.1rem;
  color:var(--ink);text-align:center;margin-bottom:18px;line-height:1.45;
}
.quiz-choices{display:flex;flex-direction:column;gap:10px;}
.quiz-choice{
  background:rgba(120,100,70,0.08);border:2px solid var(--parchment-edge);
  border-radius:8px;padding:13px 20px;font-family:var(--serif);
  font-size:1rem;color:var(--ink);cursor:pointer;text-align:center;
  transition:all 0.18s;
}
.quiz-choice:hover:not(:disabled){background:rgba(212,168,67,0.18);border-color:var(--gold);transform:translateX(2px);}
.quiz-choice.correct{background:rgba(74,154,74,0.2);border-color:var(--green);color:var(--green);font-weight:700;}
.quiz-choice.wrong{background:rgba(184,74,58,0.2);border-color:var(--red);color:var(--red);}
.quiz-choice:disabled{cursor:default;}

/* Match */
.match-area{display:flex;gap:16px;justify-content:center;margin:14px 0;flex-wrap:wrap;}
.match-col{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px;max-width:300px;}
.match-item{
  background:rgba(120,100,70,0.08);border:2px solid var(--parchment-edge);
  border-radius:8px;padding:11px 16px;cursor:pointer;
  font-size:0.92rem;color:var(--ink);transition:all 0.15s;text-align:center;
}
.match-label{font-family:var(--serif);font-weight:700;}
.match-item:hover{border-color:var(--gold);}
.match-item.selected{background:rgba(212,168,67,0.22);border-color:var(--gold);}
.match-item.matched{background:rgba(74,154,74,0.18);border-color:var(--green);cursor:default;}
.match-item.wrong{background:rgba(184,74,58,0.18);border-color:var(--red);}

/* Trial result */
.trial-result{text-align:center;padding:10px;}
.result-seal{display:flex;justify-content:center;margin-bottom:10px;}
.trial-result h2{font-family:var(--serif);color:var(--ink);font-size:1.3rem;margin:10px 0;}
.trial-result p{color:var(--ink);line-height:1.55;}
.score-display{
  font-family:var(--serif);font-size:1.2rem;color:var(--ink);
  margin:14px 0;padding:12px;background:rgba(120,100,70,0.08);border-radius:8px;
  border:1px solid var(--parchment-edge);
}
.score-display strong{color:var(--gold-deep);font-size:1.5rem;}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}

/* ── FOOTER NAV ── */
#footer{
  position:relative;z-index:5;
  display:flex;gap:8px;justify-content:center;
  padding:10px 16px;flex-shrink:0;
  background:linear-gradient(0deg,rgba(18,16,12,0.96),rgba(18,16,12,0.75));
  border-top:2px solid var(--mortar);
  box-shadow:0 -4px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(212,168,67,0.08);
}
html[data-theme="light"] #footer{background:linear-gradient(0deg,rgba(72,64,56,0.92),rgba(72,64,56,0.65));}
.nav-btn{
  background:var(--stone-2);color:var(--text-dim);
  border:1px solid var(--mortar);border-radius:7px;
  padding:8px 18px;cursor:pointer;font-family:var(--serif);
  font-size:0.82rem;font-weight:700;letter-spacing:0.03em;
  transition:all 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-btn:hover{color:var(--gold-bright);border-color:var(--gold);background:var(--stone-3);box-shadow:0 3px 12px rgba(0,0,0,0.4),0 0 12px rgba(212,168,67,0.1);}
.nav-btn:active{transform:translateY(1px);}

/* ── RESPONSIVE ── */
@media(max-width:560px){
  #topbar{padding:8px 50px;}
  #topbar h1{font-size:1rem;}
  .subtitle{font-size:0.64rem;}
  .master-portrait{width:80px;height:80px;}
  .master-name-plate{font-size:0.56rem;}
  .greeting{padding:12px;font-size:0.82rem;}
  .greeting h2{font-size:1rem;}
  .room-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .room-card{padding:14px 8px;}
  .room-name{font-size:0.88rem;}
  .room-desc{font-size:0.75rem;}
  .cipher-text{font-size:1.1rem;letter-spacing:0.15em;}
  .hall-img{height:180px;}
  .match-col{min-width:140px;}
  .nav-btn{padding:7px 10px;font-size:0.72rem;}
  .torch{width:16px;height:40px;}
  .wheel-wrap{padding:4px;}
  .parchment{padding:20px 18px;}
}
@media(max-width:380px){
  #topbar h1{font-size:0.85rem;}
  .subtitle{display:none;}
  .room-grid{grid-template-columns:1fr;}
  .nav-btn{padding:6px 8px;font-size:0.68rem;}
  .master-portrait{width:64px;height:64px;}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  #content.entering,.room-card,.codex-card,.seal{
    animation:none !important;
  }
  *{transition-duration:0.01ms !important;}
}