/* Layout: one narrow column like a phone screen: crest (avatar + name), link buttons, donate, schedule, about, contact. */
:root{
  --bg:#0e1220; --panel:#171c2e; --line:#2a3150; --fg:#eef0f8; --muted:#9aa2c0;
  --accent:#e8b84a; --on-accent:#1a1406; --live:#ff3b5c;
  --display:"Bungee","Be Vietnam Pro",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root{--bg:#f3f1ea;--panel:#ffffff;--line:#ddd8c8;--fg:#191b26;--muted:#5d6275;color-scheme:light}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:520px;margin:0 auto;padding-block:28px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.sample{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;text-align:center}
.crest{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:8px}
.crest a{text-decoration:none}
.av{position:relative;width:128px;height:128px;border-radius:50%;padding:4px;background:conic-gradient(from 210deg,var(--accent),transparent 40%,var(--accent) 70%,transparent)}
.av.live{background:var(--live);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--live) 25%,transparent)}}
@media (prefers-reduced-motion: reduce){.av.live{animation:none}}
.av img,.av .ph{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--panel);border:3px solid var(--bg)}
.av .ph{display:grid;place-items:center;font-family:var(--display);font-size:44px;color:var(--accent)}
.livebadge{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);background:var(--live);color:#fff;font:700 11px var(--mono);letter-spacing:.12em;padding:3px 9px;border-radius:6px;white-space:nowrap}
.livebar{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--live);color:#fff;font-weight:700;padding:12px 16px;border-radius:12px;text-decoration:none}
.livebar:hover,.livebar:focus-visible{filter:brightness(1.08);outline:none}
h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,8vw,38px);line-height:1.1;margin:8px 0 0;text-wrap:balance;letter-spacing:.01em}
.handle{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tag{margin:0;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chip{font:500 12px var(--mono);letter-spacing:.04em;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip.rank{border-color:var(--accent);color:var(--accent)}
.links{display:flex;flex-direction:column;gap:10px}
.lk{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;transition:transform .12s,border-color .12s}
.lk:hover,.lk:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:none}
.lk.main{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.lk svg{width:22px;height:22px;flex:none}
.lk span{flex:1;min-width:0}
.lk small{display:block;font-weight:400;font-size:12px;opacity:.75;overflow-wrap:anywhere}
.sec h2{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.sched{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.sched div{padding:9px 0;border-bottom:1px solid var(--line)}
.sched .d{font-weight:600;padding-right:18px}
.sched .t{font-family:var(--mono);font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums;text-align:right}
.about{white-space:pre-line;margin:0}
.ct{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ct b{font-weight:500;color:var(--muted);min-width:70px}
.ct span{flex:1;min-width:0;font-family:var(--mono);font-size:14px;overflow-wrap:anywhere;user-select:all}
.btn{font:600 13px var(--body);padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.btn:hover,.btn:focus-visible{border-color:var(--accent);outline:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.dan{color:var(--live)}
.btn:disabled{opacity:.5;cursor:default}
.donate{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:14px}
.donate .qr{width:180px;height:auto;max-width:100%;border-radius:10px;background:#fff;padding:6px;flex:none}
.dinfo{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.dinfo .bank{font-weight:700;font-size:16px}
.dinfo .holder{font-family:var(--mono);font-size:13px;color:var(--muted);text-transform:uppercase}
.dinfo .ct{border-bottom:0;padding:6px 0}
.dinfo .ct span{font-size:16px;color:var(--accent)}
.dnote{margin:4px 0 0;font-size:13px;color:var(--muted)}
.foot{text-align:center;font:12px var(--mono);color:var(--muted)}
.loading{padding:60px 16px;text-align:center;color:var(--muted)}