@font-face{font-family:"EB Garamond";font-weight:400;font-style:normal;font-display:block;src:url(/vendor/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:500;font-style:normal;font-display:block;src:url(/vendor/fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-style:normal;font-display:block;src:url(/vendor/fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-style:italic;font-display:block;src:url(/vendor/fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:500;font-style:normal;font-display:block;src:url(/vendor/fonts/cinzel-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:600;font-style:normal;font-display:block;src:url(/vendor/fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:700;font-style:normal;font-display:block;src:url(/vendor/fonts/cinzel-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel Decorative";font-weight:700;font-style:normal;font-display:block;src:url(/vendor/fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2")}
:root {
  --bg: #070504;
  --gold: #e2c27a;
  --gold-hi: #f6e2a6;
  --gold-lo: #8a6420;
  --leather: #2a140c;
  --leather-hi: #3d2014;
  --ink: #24170d;
  --parchment: #ecdcb8;
  --blue: #1c3473;
  --panel-text: #ecdcb8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--panel-text); overflow: hidden; }
body { font-family: "EB Garamond", Georgia, serif; }
#app { position: fixed; inset: 0; }
.viewport { position: absolute; inset: 0; }
.viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#app::after { /* vignette, as from candlelight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 9vh; min-height: 52px; z-index: 5;
  display: flex; align-items: center; gap: 2vw; padding: 0 2.4vw;
  background: linear-gradient(#120a06ee, #0b0604cc 70%, transparent);
  font-family: "Cinzel", serif;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--gold); min-width: 0; }
.brand svg { width: clamp(22px, 2.4vw, 36px); height: auto; }
.brand-name { font-size: clamp(18px, 2.3vw, 34px); letter-spacing: .06em; line-height: 1; color: var(--gold-hi); text-shadow: 0 1px 6px #000; }
.brand-sub { font-size: clamp(10px, .95vw, 15px); letter-spacing: .12em; color: var(--gold); }
.mainnav { display: flex; gap: clamp(8px, 2.4vw, 46px); margin: 0 auto; }
.navitem { font-size: clamp(12px, 1.25vw, 19px); letter-spacing: .05em; color: var(--gold); padding: 8px 6px; position: relative; }
.navitem.active { color: var(--gold-hi); }
.navitem.active::before, .navitem.active::after {
  content: "◆"; position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--gold);
}
.navitem.active::before { top: -4px; } .navitem.active::after { bottom: -4px; }
.navitem.active { border-top: 1px solid var(--gold-lo); border-bottom: 1px solid var(--gold-lo); }
.topicons { display: flex; gap: clamp(8px, 2vw, 34px); }
.iconbtn { width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); color: var(--gold); padding: 4px; }
.iconbtn svg { width: 100%; height: 100%; }
.iconbtn:hover, .navitem:hover { color: var(--gold-hi); }

/* ---------- control bar ---------- */
.controlbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; min-height: 78px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 2.2vw; padding: 1vh 2.5vw 1.2vh;
  background: linear-gradient(transparent, #0b0604dd 30%, #120a06f2);
}
.tiles { display: flex; gap: .9vw; }
.tile {
  width: clamp(54px, 6.2vw, 104px); height: clamp(52px, 8.6vh, 84px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(#3d2014, #1d0e08); border: 1px solid #6e4e22; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1a0c06, inset 0 1px 0 #7a5a2a, 0 3px 8px #000a;
  color: var(--gold); font-family: "Cinzel", serif; font-size: clamp(8px, .8vw, 13px); line-height: 1.05; text-align: center;
}
.tile svg { width: 42%; height: auto; max-height: 50%; }
.tile.active, .tile:hover { color: var(--gold-hi); border-color: var(--gold); box-shadow: inset 0 0 0 2px #1a0c06, inset 0 0 18px #c8973a55, 0 3px 8px #000a; }
.transport { display: flex; flex-direction: column; align-items: center; gap: .6vh; flex: 0 1 30vw; min-width: 160px; }
.tbtns { display: flex; align-items: center; gap: 1.6vw; }
.round {
  width: clamp(30px, 2.8vw, 44px); height: clamp(30px, 2.8vw, 44px); border-radius: 50%;
  background: radial-gradient(#4a2a16, #1a0c06); border: 2px solid #8a6a32; color: var(--gold); padding: 7px;
  box-shadow: 0 2px 6px #000a;
}
.round.big { width: clamp(40px, 3.8vw, 60px); height: clamp(40px, 3.8vw, 60px); border-color: var(--gold); padding: 10px; }
.round svg { width: 100%; height: 100%; }
.track { width: 100%; }
.track input { width: 100%; accent-color: #c8973a; }
.times { display: flex; justify-content: space-between; font-size: clamp(10px, .85vw, 13px); color: var(--gold); font-family: "Cinzel", serif; }

/* ---------- cards ---------- */
.card {
  position: absolute; z-index: 8; color: var(--ink);
  background: linear-gradient(#efe0bd, #dcc795); border: 2px solid #9a7430; border-radius: 4px;
  box-shadow: 0 0 0 4px #2a140c, 0 0 0 5px #9a7430, 0 18px 40px #000c;
  padding: 18px 22px;
}
.card[hidden] { display: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #9a743088; margin-bottom: 12px; }
.card h2 { font-family: "Cinzel", serif; font-weight: 600; font-size: 22px; margin: 4px 0 8px; color: #6b1a12; }
.card .x { font-size: 28px; line-height: 1; color: #6b1a12; padding: 0 6px; }
.chapters { right: 13vw; top: 14vh; width: min(420px, 90vw); max-height: 66vh; overflow: auto; }
.chapters .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.chapters .grid button {
  font-family: "Cinzel", serif; font-size: 16px; padding: 8px 0; border: 1px solid #9a743088; border-radius: 3px; background: #f6ead0;
}
.chapters .grid button:hover, .chapters .grid button.on { background: var(--blue); color: var(--gold-hi); border-color: var(--gold); }
.account { right: 2.4vw; top: 10vh; width: min(360px, 92vw); font-size: 18px; }
.account p { margin: 8px 0; }
.account .muted { color: #5a4630; font-style: italic; }
.btn {
  display: inline-block; margin: 6px 8px 0 0; padding: 8px 16px; font-family: "Cinzel", serif; font-size: 15px;
  background: linear-gradient(#3d2014, #1d0e08); color: var(--gold-hi); border: 1px solid #9a7430; border-radius: 3px; text-decoration: none;
}
.btn.ghost { background: transparent; color: #4a2010; }
.authform label { display: block; font-family: "Cinzel", serif; font-size: 13px; margin: 8px 0; }
.authform input { display: block; width: 100%; margin-top: 4px; padding: 8px; font: 17px "EB Garamond", serif; border: 1px solid #9a7430; background: #fbf3e0; border-radius: 3px; }
.authform .err { color: #8e1b14; min-height: 1em; margin: 4px 0; }
.toast {
  position: absolute; left: 50%; bottom: 16vh; transform: translate(-50%, 20px); opacity: 0; z-index: 9;
  background: #1d0e08f0; color: var(--gold-hi); border: 1px solid #9a7430; padding: 10px 18px; border-radius: 3px;
  font-size: 17px; transition: all .3s; pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hint {
  position: absolute; left: 50%; top: 10.5vh; transform: translateX(-50%); z-index: 6;
  font-family: "Cinzel", serif; letter-spacing: .1em; color: var(--gold-hi); padding: 10px 20px;
  background: #1d0e08cc; border: 1px solid #9a7430; border-radius: 3px; animation: breathe 2.6s ease-in-out infinite;
}
.hint[hidden] { display: none; }
@keyframes breathe { 50% { opacity: .55; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app.immersive .topbar, #app.immersive .controlbar { opacity: 0; pointer-events: none; transition: opacity .4s; }
#app.immersive .controlbar:hover { opacity: 1; pointer-events: auto; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #070504; color: var(--gold); font-family: "Cinzel", serif; transition: opacity .8s;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader .title { font-size: clamp(28px, 4vw, 54px); letter-spacing: .08em; color: var(--gold-hi); }
#loader .status { font-family: "EB Garamond", serif; font-style: italic; font-size: 18px; }

@media (max-width: 760px) {
  .mainnav { display: none; }
  .topicons { margin-left: auto; }
  .controlbar { gap: 8px; padding: 6px 8px; }
  .tiles .tile:nth-child(n+3) { display: none; }
  .transport { flex: 1 1 auto; min-width: 0; }
  .chapters { right: 4vw; }
}
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }