:root{--ash:#15110f;--ember:#ff6a1f;--enchant:#56b6ff;--parch:#f4ece2;--muted:#b8a99b}*{box-sizing:border-box}html,body,#root{background:#0c0a09;width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--parch);-webkit-font-smoothing:antialiased;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{position:fixed;inset:0}canvas{touch-action:none;display:block}.overlay{pointer-events:none;position:absolute;inset:0}.brand{padding:22px 28px}.brand h1{letter-spacing:.18em;background:linear-gradient(#ffb347,#ff6a1f);color:#0000;text-shadow:0 0 40px #ff6a1f4d;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(32px,6vw,64px)}.brand .epithet{color:var(--muted);letter-spacing:.28em;text-transform:uppercase;margin-top:4px;font-size:12px}.portrait-card{pointer-events:auto;background:#1a1411;border:1px solid #4a3a2e;border-radius:14px;width:min(240px,40vw);animation:.45s ease-out fadeup;position:absolute;bottom:104px;right:24px;overflow:hidden;box-shadow:0 16px 50px #0009}.portrait-card.charm{border-color:#56b6ff80;box-shadow:0 16px 50px #0009,0 0 28px #56b6ff40}.portrait-card.battle{border-color:#ff6a1f80;box-shadow:0 16px 50px #0009,0 0 28px #ff6a1f40}.portrait-card img{width:100%;height:auto;display:block}.portrait-card .cap{color:var(--muted);padding:8px 12px;font-size:12px;line-height:1.5}.portrait-card .cap b{color:var(--parch)}.controls{pointer-events:none;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.stance-btn{pointer-events:auto;cursor:pointer;color:var(--parch);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14100ed1;border:1px solid #4a3a2e;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:600;transition:transform .18s,box-shadow .18s,border-color .18s}.stance-btn:hover{transform:translateY(-2px)}.stance-btn.battle{border-color:#ff6a1f99;box-shadow:0 0 26px #ff6a1f73}.stance-btn.charm{border-color:#56b6ff99;box-shadow:0 0 26px #56b6ff73}.note{pointer-events:none;max-width:min(440px,56vw);color:var(--muted);font-size:13px;line-height:1.6;position:absolute;bottom:28px;left:28px}.note b{color:var(--parch)}.foot{pointer-events:none;color:#b8a99bb3;text-align:right;font-size:10px;line-height:1.6;position:absolute;top:14px;right:14px}@keyframes fadeup{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width:680px){.portrait-card{width:40vw;bottom:128px;right:14px}.note{max-width:55vw;font-size:12px;bottom:100px;left:14px}.brand{padding:16px 18px}}