/* 共用：學院色票、星空、導覽列、分類帽、提示 */
:root,[data-house="ravenclaw"]{
  --h:#24356e; --deep:#070d24; --mid:#15214d; --metal:#c49a5a; --hi:#ecd09a;
  --ink-h:#1d3787; --wash:rgba(45,85,210,.3); --wash2:rgba(40,70,170,.09); --same:rgba(196,154,90,.36);
}
[data-house="slytherin"]{
  --h:#1e5a3a; --deep:#04120a; --mid:#0f2d1d; --metal:#b8c0c8; --hi:#eef2f5;
  --ink-h:#17663b; --wash:rgba(25,120,65,.22); --wash2:rgba(25,120,65,.09); --same:rgba(120,135,150,.34);
}
[data-house="gryffindor"]{
  --h:#7f1d1d; --deep:#170404; --mid:#3d0e0e; --metal:#d6a84a; --hi:#f5d888;
  --ink-h:#9a1b1b; --wash:rgba(170,30,30,.2); --wash2:rgba(170,30,30,.08); --same:rgba(214,168,74,.38);
}
[data-house="hufflepuff"]{
  --h:#5a4a1a; --deep:#100d06; --mid:#2b2412; --metal:#e3b52a; --hi:#f8de78;
  --ink-h:#7b5600; --wash:rgba(220,170,30,.28); --wash2:rgba(220,170,30,.12); --same:rgba(60,50,30,.18);
}
:root{
  --parch:#f0e2bf; --parch2:#e2cd9c; --ink:#2a1f14; --ink-soft:#6e5b40;
  --text:#efe6d2; --dim:#b3a78e; --err:#a3161a; --err-wash:rgba(180,25,30,.16); --ok:#2f6b3a;
  --line-metal:color-mix(in srgb,var(--metal) 42%,transparent);
  --parch-bg:radial-gradient(ellipse at 25% 15%,#faf1d8,transparent 55%),radial-gradient(ellipse at 85% 95%,#d9bf86,transparent 55%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(120,80,30,.22)),var(--parch);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  background:radial-gradient(1200px 700px at 50% -15%,var(--mid),transparent 70%),var(--deep);
  color:var(--text);font-family:'Noto Serif TC',serif;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
#sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#fff;animation:tw 3.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.85}}

/* 導覽 */
.hw-nav{display:flex;align-items:center;gap:8px}
.hw-back{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:99px;border:1px solid var(--line-metal);background:rgba(0,0,0,.25);color:var(--hi);font-size:13px;text-decoration:none;letter-spacing:.1em;transition:all .2s}
.hw-back:hover{border-color:var(--metal);box-shadow:0 0 14px -4px var(--metal)}
.hw-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hw-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:99px;background:color-mix(in srgb,var(--metal) 16%,transparent);border:1px solid var(--line-metal);font-size:13px;color:var(--hi)}
.hw-badge svg{width:20px;height:24px}
.hw-badge b{font-family:Cinzel,serif;font-weight:700}

/* 提示 */
.hw-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:60;padding:11px 20px;border-radius:99px;
  background:linear-gradient(135deg,var(--hi),var(--metal));color:var(--deep);font-weight:700;letter-spacing:.1em;box-shadow:0 12px 30px -10px #000;transition:all .35s cubic-bezier(.2,1.3,.4,1);pointer-events:none}
.hw-toast.show{transform:translate(-50%,0);opacity:1}

/* 分類帽 */
.hw-sort{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px 16px;
  background:radial-gradient(900px 600px at 50% 0%,rgba(60,50,30,.5),transparent 70%),rgba(5,5,12,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto}
.hw-sort-card{position:relative;width:min(480px,100%);padding:84px 24px 24px;border-radius:8px;color:var(--ink);background:var(--parch-bg);box-shadow:inset 0 0 50px rgba(120,80,30,.35),0 30px 70px -20px #000;text-align:center;margin-top:60px}
.hw-hat{position:absolute;left:50%;top:-74px;width:150px;transform:translateX(-50%);filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.hw-hat.talk{animation:hat .5s ease-in-out infinite alternate}
@keyframes hat{to{transform:translateX(-50%) rotate(-4deg) scaleY(1.04)}}
.hw-step{font-family:Cinzel,serif;font-size:12px;letter-spacing:.3em;color:var(--ink-soft)}
.hw-q{margin:8px 0 18px;font-size:19px;font-weight:700;line-height:1.6}
.hw-opts{display:grid;gap:9px}
.hw-opt{padding:13px 16px;border-radius:8px;text-align:left;font-size:15px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.35);border:1px solid rgba(90,60,20,.3);transition:all .18s}
.hw-opt:hover{background:rgba(255,255,255,.6);border-color:rgba(90,60,20,.6);transform:translateX(3px)}
.hw-fade{animation:hwfade .35s ease}
@keyframes hwfade{from{opacity:0;transform:translateY(8px)}}
.hw-say{font-size:17px;color:var(--ink-soft);min-height:28px;font-style:italic}
.hw-result{display:none}
.hw-result.show{display:block;animation:hwfade .5s ease}
.hw-result .crest-big{width:110px;height:130px;margin:6px auto 4px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35))}
.hw-result h2{margin:4px 0;font-size:34px;letter-spacing:.3em;padding-left:.3em}
.hw-result .trait{color:var(--ink-soft);margin:0 0 20px}
.hw-row{display:flex;gap:10px}
.hw-row button{flex:1;padding:12px;border-radius:8px;font-weight:700;letter-spacing:.1em}
.hw-pri{background:var(--h);color:var(--hi);box-shadow:inset 0 0 0 1px var(--metal)}
.hw-ghost{border:1px solid rgba(90,60,20,.4)!important;color:var(--ink)}
.hw-pick{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.hw-pick.show{display:grid}
.hw-pick button{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid rgba(90,60,20,.3);background:rgba(255,255,255,.3);font-weight:700;color:var(--ink)}
.hw-pick button:hover{background:rgba(255,255,255,.6)}
.hw-pick svg{width:24px;height:28px;flex:none}