:root{
  --bg:#fff8f2;
  --paper:#fffdfb;
  --ink:#3b3030;
  --muted:#8b7d7a;
  --line:#eaded7;
  --accent:#c77d70;
  --accent2:#f1c7b8;
  --flame:#d95757;
  --sun:#e5b83f;
  --moon:#6287c5;
  --spark:#63a86b;
  --shadow:0 12px 35px rgba(91,62,54,.10);
}
*{box-sizing:border-box}
body{
  margin:0;background:linear-gradient(180deg,#fff9f4 0%,#fff4ee 100%);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  min-height:100vh;
}
button{font:inherit}
.app{max-width:760px;margin:0 auto;padding:20px 16px 48px}
.screen{display:none}
.screen.active{display:block}
.card{
  background:rgba(255,253,251,.94);border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow);padding:28px;
}
.logo-slot{
  width:120px;height:52px;margin:0 auto 18px;border:1px dashed #d9c6be;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#b19e97;font-size:11px;letter-spacing:.08em;
}
.logo-slot img{max-width:100%;max-height:100%;object-fit:contain}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(27px,7vw,44px);line-height:1.18;text-align:center;letter-spacing:.04em;margin-bottom:12px}
h2{font-size:26px;line-height:1.35}
.subtitle{text-align:center;color:var(--muted);line-height:1.8;margin-bottom:26px}
.school-mark{text-align:center;color:#9b8179;font-size:12px;letter-spacing:.2em;margin-bottom:12px}
.primary{
  display:block;width:100%;border:0;border-radius:18px;padding:15px 18px;
  background:var(--ink);color:white;font-weight:700;cursor:pointer;
  transition:.18s transform,.18s opacity;
}
.primary:hover{transform:translateY(-1px);opacity:.94}
.primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.secondary{
  display:block;width:100%;border:1px solid var(--line);border-radius:18px;padding:14px 18px;
  background:white;color:var(--ink);font-weight:700;cursor:pointer;margin-top:10px;
}
.note{font-size:12px;color:var(--muted);line-height:1.7;text-align:center;margin-top:14px}
.name-box{max-width:480px;margin:0 auto 20px}
.name-box label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
.name-box input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);font:inherit;outline:none}
.name-box input:focus{border-color:var(--accent)}
.name-message{font-size:11px;color:var(--muted);margin-top:7px}
.name-message.error{color:#c74d4d}
.name-message.ok{color:#5d8d63}
.principal{
  margin:18px auto 24px;display:flex;gap:14px;align-items:center;justify-content:center;
}
.sd-slot{
  width:96px;height:96px;border-radius:24px;border:1px dashed #d9c6be;background:#fff8f4;
  display:flex;align-items:center;justify-content:center;color:#b19e97;font-size:10px;text-align:center;overflow:hidden;
}
.sd-slot img{width:100%;height:100%;object-fit:contain}
.speech{
  background:#fff5ee;border:1px solid #ead7ce;border-radius:18px;padding:14px 16px;
  line-height:1.75;position:relative;max-width:430px;
}
.progress-wrap{margin-bottom:20px}
.progress-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.progress{height:7px;background:#eee4df;border-radius:99px;overflow:hidden}
.progress > div{height:100%;background:var(--accent);border-radius:99px;transition:width .25s}
.q-type{font-size:11px;color:var(--accent);letter-spacing:.12em;font-weight:800;margin-bottom:8px}
.question{font-size:23px;line-height:1.5;margin-bottom:20px}
.options{display:grid;gap:10px}
.option{
  border:1px solid var(--line);background:#fff;border-radius:17px;padding:15px 16px;text-align:left;
  cursor:pointer;line-height:1.55;color:var(--ink);transition:.15s;
}
.option:hover{border-color:#cdb2a8;background:#fffaf7}
.option.selected{border:2px solid var(--accent);background:#fff4ef;padding:14px 15px}
.option .letter{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;
  background:#f4ebe7;margin-right:8px;font-size:12px;font-weight:800;color:#765f58}
.result-emblem{
  width:110px;height:110px;border-radius:50%;margin:8px auto 18px;display:grid;place-items:center;
  color:white;font-size:35px;font-weight:900;box-shadow:0 10px 25px rgba(70,50,40,.16)
}
.flame{background:var(--flame)} .sun{background:var(--sun)} .moon{background:var(--moon)} .spark{background:var(--spark)}
.result-name{text-align:center;font-size:14px;letter-spacing:.18em;color:#8b7770;font-weight:800}
.result-title{text-align:center;font-size:34px;margin:5px 0 18px}
.result-comment{
  background:#fff8f3;border:1px solid var(--line);border-radius:20px;padding:18px;line-height:1.85;
}
.scores{margin-top:22px}
.score-row{margin:13px 0}
.house-logo-slot{
  width:42px;height:42px;border-radius:12px;border:1px dashed #d9c6be;background:#fff8f4;
  display:flex;align-items:center;justify-content:center;color:#b19e97;font-size:8px;
  flex:0 0 42px;overflow:hidden;
}
.house-logo-slot img{width:100%;height:100%;object-fit:contain}
.score-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px}
.bar{height:10px;border-radius:99px;background:#eee7e3;overflow:hidden}
.bar > div{height:100%;border-radius:99px}
.second{
  margin-top:20px;padding:15px;border-radius:18px;background:#faf6f3;border:1px solid var(--line);
}
.locked{
  border:1px solid #ead8c8;background:#fff8ef;border-radius:18px;padding:16px;line-height:1.75;margin-top:20px;
}
.shareless{font-size:12px;color:var(--muted);text-align:center;margin-top:12px}
.nav-link{display:block;text-align:center;margin-top:16px;color:var(--muted);font-size:13px;text-decoration:none}
.nav-link:hover{text-decoration:underline;color:var(--ink)}

@media(max-width:560px){
  .app{padding:12px 12px 36px}
  .card{padding:21px 17px;border-radius:23px}
  .question{font-size:20px}
  h1{font-size:30px}
}