@font-face { font-family: Cinzel; src: url(/fonts/Cinzel-Bold.ttf); font-weight: 700; font-display: swap; }
@font-face { font-family: Cinzel; src: url(/fonts/Cinzel-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Garamond; src: url(/fonts/EBGaramond-Medium.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: Garamond; src: url(/fonts/EBGaramond-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --ink: #2b1a0e; --ink2: #5a3d22; --gold: #c9a227; --gold2: #f0d77a; --night: #22140b;
  --p0: #c9a227; --p1: #a3263a; --p2: #2a5ba8; --p3: #2e8b57; --p4: #6b3fa0; --p5: #1f8a8a;
  --g0: #9b1c2c; --g1: #1f4e9c; --g2: #1f7a4a; --g3: #b9790d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Garamond, Georgia, serif; font-weight: 500; color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,240,200,.35), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(60,30,10,.55), transparent 60%),
    linear-gradient(#3a2414, #1c1009);
  min-height: 100vh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#app {
  max-width: 520px; margin: 0 auto; min-height: 100vh; padding: 18px 16px 28px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(150,100,40,.25), transparent 55%),
    #ecdcb4;
  box-shadow: inset 0 0 60px rgba(110,70,25,.55), 0 0 40px rgba(0,0,0,.6);
  border-left: 3px double var(--gold); border-right: 3px double var(--gold);
}
.view { display: none; animation: fade .35s ease; }
.view.on { display: block; }
.center { text-align: center; padding-top: 12vh; }
.hidden { display: none !important; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2, .btn, .sub, .title, .top, label, .qnum, .verdict, .gem b { font-family: Cinzel, serif; }
.brand { text-align: center; margin: 6px 0 10px; }
.logo { width: 92%; max-width: 420px; }
.tag { margin: 0; color: var(--ink2); font-style: italic; font-size: 18px; }
.scroll {
  margin: 14px 0; padding: 20px 18px; border-radius: 10px;
  background: rgba(255,250,235,.55); border: 2px solid rgba(150,110,40,.5);
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(80,50,20,.25);
}
label { display: block; font-weight: 700; font-size: 15px; letter-spacing: .06em; margin-bottom: 14px; color: var(--ink2); }
label small { font-weight: 400; letter-spacing: 0; text-transform: none; }
input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 600 24px Garamond, serif; color: var(--ink);
  background: #fffaf0; border: 2px solid #b8955a; border-radius: 8px; outline: none;
}
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.3); }
#in-code { font-family: Cinzel, serif; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; text-align: center; font-size: 30px; }
.btn {
  display: block; width: 100%; padding: 15px; font-size: 20px; font-weight: 700; letter-spacing: .08em; border-radius: 10px; cursor: pointer;
  color: #2a1606; border: 2px solid #7a5a12;
  background: linear-gradient(#f6e08a, #d4ab3a 55%, #b88a1c);
  box-shadow: 0 3px 0 #6e4f0e, 0 8px 18px rgba(80,50,10,.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e4f0e; }
.btn:disabled { opacity: .5; }
.link { background: none; border: none; color: var(--ink2); text-decoration: underline; font: 500 16px Garamond, serif; cursor: pointer; }
.err { color: #9b1c2c; min-height: 1.2em; margin: 0 0 10px; font-weight: 700; }
.verse { text-align: center; color: var(--ink2); font-style: italic; font-size: 17px; margin-top: 18px; }
.verse span { font-style: normal; font-family: Cinzel, serif; font-size: 13px; }
.hint { color: var(--ink2); text-align: center; font-style: italic; font-size: 17px; }
.sub { text-align: center; letter-spacing: .12em; color: var(--ink2); font-size: 16px; text-transform: uppercase; margin: 18px 0 8px; }
.title { text-align: center; font-size: 26px; margin: 10px 0; }

.top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--ink2); }
.code { letter-spacing: .2em; color: var(--ink); }
.me-seal { text-align: center; margin-top: 16px; }
.me-seal h1 { margin: 8px 0 0; font-size: 30px; }
.seal {
  width: 34px; height: 34px; border-radius: 50%; display: inline-block; flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 45%), var(--c, var(--p0));
  box-shadow: 0 0 0 3px rgba(0,0,0,.15) inset, 0 2px 4px rgba(0,0,0,.35);
}
.seal.big { width: 70px; height: 70px; }
.roster { list-style: none; padding: 0; margin: 0; }
.roster li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0; border-radius: 8px;
  background: rgba(255,250,235,.55); border: 1px solid rgba(150,110,40,.4); font-size: 21px; font-weight: 700;
}
.roster li .pts { margin-left: auto; font-family: Cinzel, serif; font-size: 18px; }
.roster li.empty { opacity: .45; font-weight: 500; font-style: italic; }

.qnum { font-weight: 700; }
.score-pill { font-family: Cinzel, serif; font-weight: 700; color: var(--ink); }
.timer { height: 10px; border-radius: 6px; background: rgba(90,60,30,.25); margin: 10px 0 14px; overflow: hidden; border: 1px solid rgba(90,60,30,.35); }
.timer .fill { height: 100%; width: 100%; background: linear-gradient(90deg, #b88a1c, #f0d77a); transition: width .25s linear; }
.qtext { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 2px 16px; text-align: center; }
.gems { display: grid; gap: 12px; }
.gem {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 10px 14px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 2px solid #e9cf7a; color: #fff8e6; font: 700 20px Garamond, serif; line-height: 1.15;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.gem b {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #2a1606; text-shadow: none;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #e1bc4e 55%, #a77d16);
}
.g0 { background: linear-gradient(135deg, #c2364a, var(--g0)); }
.g1 { background: linear-gradient(135deg, #3a6fc4, var(--g1)); }
.g2 { background: linear-gradient(135deg, #2f9a62, var(--g2)); }
.g3 { background: linear-gradient(135deg, #e0a634, var(--g3)); }
.gem:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gems.locked .gem { opacity: .35; }
.gems.locked .gem.picked { opacity: 1; outline: 4px solid var(--gold); outline-offset: 2px; }
.sealed { text-align: center; font-style: italic; color: var(--ink2); font-size: 18px; }

.verdict { font-size: 40px; font-weight: 700; }
.verdict.good { color: #1f7a4a; }
.verdict.bad { color: #9b1c2c; }
.verdict small { display: block; font-size: 22px; color: var(--ink); margin-top: 4px; }
.answer-was { font-size: 22px; font-weight: 700; margin: 18px 0 4px; }
.ref { font-family: Cinzel, serif; color: var(--ink2); margin: 0; }
.standing { margin-top: 26px; font-size: 20px; }
.standing b { font-family: Cinzel, serif; }

.giant { font-size: 120px; margin: 10px 0; color: var(--ink); text-shadow: 0 3px 0 rgba(201,162,39,.6); }
.podium { padding: 0; list-style: none; }
.podium li { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 8px 0; border-radius: 10px; background: rgba(255,250,235,.55); border: 1px solid rgba(150,110,40,.4); font-size: 21px; font-weight: 700; }
.podium li .place { font-family: Cinzel, serif; width: 34px; text-align: center; font-size: 22px; }
.podium li .pts { margin-left: auto; font-family: Cinzel, serif; }
.podium li.first { background: linear-gradient(#fff3c4, #f0d77a); border: 2px solid var(--gold); }
.final-me { text-align: center; font-size: 20px; }