:root{
  --paper:#FAF7F1;
  --ink:#21201D;
  --muted:#6B6459;
  --border:#E4DDCF;
  --forest:#3F7A4E;
  --forest-tint:#E1EEE2;
  --forest-dark:#2C5837;
  --ochre:#B5822A;
  --ochre-tint:#F1E4CB;
  --card:#FFFFFF;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Gowun Dodum', sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
}
h1,h2,h3,.jua{font-family:'Jua', sans-serif}
button{font-family:inherit}
a{color:var(--forest)}

#app{
  max-width:900px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

#hud{
  display:none;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  background:var(--ink);
  color:var(--paper);
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:20;
}
#hud.show{display:flex}
#hud .hud-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  background:rgba(255,255,255,0.08);
  padding:6px 12px;
  border-radius:999px;
}
#hud .hud-letters{
  display:flex;
  gap:4px;
  margin-left:auto;
}
#hud .letter-slot{
  width:28px;height:28px;
  border-radius:6px;
  border:1.5px dashed rgba(250,247,241,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  font-family:'Jua',sans-serif;
}
#hud .letter-slot.filled{
  border-style:solid;
  background:var(--forest);
  border-color:var(--forest);
}
#bgm-toggle{
  background:none;
  border:1.5px solid rgba(250,247,241,0.4);
  color:var(--paper);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  font-size:13px;
}

.scene{
  display:none;
  flex-direction:column;
  gap:22px;
  padding:36px 24px 64px;
  flex:1;
}
.scene.active{display:flex}

.badge{
  width:fit-content;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--forest-dark);
  background:var(--forest-tint);
  padding:5px 14px;
  border-radius:999px;
}
.badge.ochre{color:#8A5321;background:var(--ochre-tint)}

.story-box{
  background:var(--ink);
  color:var(--paper);
  border-radius:16px;
  padding:22px 24px;
  line-height:1.75;
  font-size:15.5px;
}
.story-box .label{font-size:12.5px;color:#9FCBA9;margin-bottom:6px}

.stage{
  background:linear-gradient(#eef2ea,#e4ecdf);
  background:var(--forest-tint);
  border-radius:18px;
  padding:20px;
  display:flex;
  justify-content:center;
}
.stage svg{width:100%;max-width:480px;height:auto}

.hotspot{cursor:pointer;transition:opacity .15s}
.hotspot:hover{opacity:0.85}
.hotspot.revealed{opacity:1}

.hint-caption{
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
}

.field-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
input[type=text]{
  font-family:inherit;
  font-size:15px;
  padding:10px 14px;
  border-radius:10px;
  border:1.5px solid var(--border);
  flex:1;
  min-width:180px;
}
input[type=text]:focus{outline:2px solid var(--forest); border-color:var(--forest)}

button.primary{
  background:var(--forest);
  color:var(--paper);
  border:none;
  border-radius:10px;
  padding:11px 20px;
  font-size:15px;
  cursor:pointer;
}
button.primary:hover{background:var(--forest-dark)}
button.secondary{
  background:var(--card);
  border:1.5px solid var(--border);
  color:var(--ink);
  border-radius:10px;
  padding:10px 18px;
  font-size:14px;
  cursor:pointer;
}
button.secondary:hover{border-color:var(--forest)}
button.hint-btn{
  background:var(--ochre-tint);
  color:#8A5321;
  border:none;
  border-radius:10px;
  padding:9px 16px;
  font-size:13.5px;
  cursor:pointer;
}
button.hint-btn:disabled{opacity:0.4;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--forest); outline-offset:2px}

.feedback{font-size:13.5px; min-height:18px}
.feedback.ok{color:var(--forest-dark)}
.feedback.bad{color:#9C4F24}

.mc-options{display:flex; flex-wrap:wrap; gap:8px}
.mc-options button{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:8px 16px;
  font-size:14px;
  cursor:pointer;
}
.mc-options button.selected{border-color:var(--forest); background:var(--forest-tint)}
.mc-options button.correct{border-color:var(--forest); background:var(--forest); color:#fff}
.mc-options button.wrong{border-color:#B5482A; background:#F6DCCF}

.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.match-col{display:flex; flex-direction:column; gap:10px}
.match-item{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-size:13.5px;
  cursor:pointer;
  line-height:1.5;
}
.match-item.selected{border-color:var(--ochre); background:var(--ochre-tint)}
.match-item.matched{border-color:var(--forest); background:var(--forest-tint); cursor:default; opacity:0.75}
.match-item.shake{animation:shake .3s}
@keyframes shake{
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.room-nav{display:flex; justify-content:flex-end}

/* Inspect modal */
#inspect-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(33,32,29,0.6);
  align-items:center; justify-content:center;
  z-index:50;
  padding:20px;
}
#inspect-overlay.show{display:flex}
#inspect-modal{
  background:var(--paper);
  border-radius:16px;
  max-width:380px;
  width:100%;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#inspect-modal h3{margin:0; font-size:18px}
#inspect-modal p{margin:0; font-size:14px; line-height:1.6; color:var(--muted)}

/* Certificate */
.certificate{
  background:var(--card);
  border:2px solid var(--ochre);
  border-radius:20px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  text-align:center;
}
.certificate .seal{
  width:72px;height:72px;
  border-radius:50%;
  background:var(--forest-tint);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;
  font-family:'Jua',sans-serif;
  color:var(--forest-dark);
  border:3px solid var(--forest);
}
.certificate .grade{font-size:44px; font-family:'Jua',sans-serif; color:var(--ochre)}
.cert-stats{display:flex; gap:18px; font-size:13px; color:var(--muted); flex-wrap:wrap; justify-content:center}
.cert-name-input{text-align:center; font-family:'Jua',sans-serif; font-size:18px}

footer.credits{
  text-align:center;
  font-size:11.5px;
  color:#9C9484;
  padding:18px;
}

@media (max-width:600px){
  .match-grid{grid-template-columns:1fr}
  h1{font-size:26px !important}
}

@media print{
  #hud, .room-nav, footer.credits, button{display:none !important}
  .scene{display:flex !important}
  #app{max-width:none}
}