:root{color-scheme:dark;--gold:#d7b45c;--ink:#080706}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Georgia,'Yu Mincho',serif;color:#f4e8c5;background:#251910 url('/assets/wood.webp') center/cover fixed}
.stage{min-height:100vh;display:grid;place-content:center;gap:1.4rem;padding:1.5rem;background:linear-gradient(#0004,#0008)}
header{display:flex;flex-direction:column;align-items:flex-start;gap:.72rem;width:min(420px,calc(100vw - 3rem))}
.sigil{width:min(248px,68vw);line-height:0;filter:drop-shadow(0 3px 9px #000b)}
.sigil img{display:block;width:100%;height:auto;object-fit:contain}
h1{max-width:100%;font-size:clamp(1.15rem,3vw,1.65rem);line-height:1.25;letter-spacing:.045em;overflow-wrap:break-word;margin:0;text-wrap:balance}
.login{position:relative;isolation:isolate;width:min(420px,calc(100vw - 3rem));padding:2rem;background:#070706f2;border:1px solid #a78437;box-shadow:0 20px 60px #000b,0 0 24px #d9ab3638}
.login:before{content:'';position:absolute;z-index:-2;inset:-3px;background:conic-gradient(from var(--a),#5c4214 0 13%,#f6d66b 17%,#fff5bc 18%,#bd8423 20%,#5c4214 28% 54%,#e8b83f 58%,#fff2a0 59%,#8a5b15 61%,#5c4214 68% 88%,#f1c956 93%,#fff7c8 94%,#6a4917 97%);animation:gold-flow 6.5s linear infinite;box-shadow:0 0 10px #e9bd4a88,0 0 26px #b67a2044}
.login:after{content:'';position:absolute;z-index:-1;inset:1px;background:linear-gradient(145deg,#0b0a08 0%,#050504 62%,#100d07 100%)}
.spark-field{position:absolute;inset:-5px;z-index:2;pointer-events:none;overflow:visible}
.spark-field i{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff6ba;box-shadow:0 0 4px 1px #fff6ba,0 0 10px 3px #efba3f,0 0 18px 5px #b8781d;animation:border-spark 7s linear infinite}
.spark-field i:after{content:'';position:absolute;inset:-3px;transform:rotate(45deg);border-top:1px solid #ffe894;border-bottom:1px solid #ffe894;opacity:.75}
.spark-field i:nth-child(2){width:3px;height:3px;animation-delay:-2.25s;animation-duration:8.5s;opacity:.75}
.spark-field i:nth-child(3){width:2px;height:2px;animation-delay:-5s;animation-duration:10s;opacity:.6}
h2{text-align:center;font-size:.9rem;letter-spacing:.28em;color:var(--gold);margin:0 0 1.5rem}
label{display:grid;gap:.45rem;margin:.9rem 0;font-size:.8rem;color:#d8caa5}
input,select{width:100%;padding:.85rem 1rem;border:1px solid #75602f;background:#111;color:white;border-radius:2px;font:inherit}
input:focus,select:focus{outline:2px solid #e1c36d;outline-offset:2px}
button{width:100%;margin-top:.8rem;padding:.9rem;border:1px solid #cda94f;background:#17130b;color:#efd984;font:inherit;letter-spacing:.1em;cursor:pointer}
button:hover{background:#251d0d}
.notice{text-align:center;font-size:.78rem;line-height:1.7;color:#d6c9ad}
.help{font-size:.78rem;line-height:1.65;color:#d6c9ad}
.steps{padding-left:1.25rem;font-size:.8rem;line-height:1.7;color:#e0d3b4}
.admin-stage{place-content:start center;padding-top:2rem;padding-bottom:3rem}
.admin-card{width:min(760px,calc(100vw - 3rem))}
.admin-stage>header{width:min(760px,calc(100vw - 3rem))}
.admin-nav{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.2rem}
.admin-nav button{margin:0}
.account-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-bottom:1rem}.account-nav a,.account-nav button{display:grid;place-items:center;min-height:2.7rem;width:100%;margin:0;padding:.55rem .65rem;border:1px solid #8e6f2a;background:#17130b;color:#efd984;text-align:center;text-decoration:none;font-size:.78rem}
.admin-panel[hidden],.invite[hidden]{display:none}
.user-row{display:grid;gap:.55rem;padding:1rem 0;border-top:1px solid #6d5628}
.user-email,.status{font-size:.78rem;color:#d6c9ad;overflow-wrap:anywhere}
.edit-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.65rem;align-items:end}
.edit-form label{margin:0}
.edit-form button{margin:0;white-space:nowrap}
.row-actions{display:flex;gap:.65rem;flex-wrap:wrap}
.row-actions button{width:auto;margin:0}
.danger{border-color:#a86755;color:#f0b4a2}
.invite{margin-top:1.2rem;padding:1rem;border:1px solid #8e6f2a;background:#0c0a06}
.invite pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#f4df96}
#error{min-height:1.2em;color:#f0a89d;font-size:.8rem}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes gold-flow{to{--a:360deg}}
@keyframes border-spark{0%{left:0;top:0;transform:translate(-50%,-50%) scale(.75)}24%{left:100%;top:0;transform:translate(-50%,-50%) scale(1.25)}25%{left:100%;top:0}49%{left:100%;top:100%;transform:translate(-50%,-50%) scale(.8)}50%{left:100%;top:100%}74%{left:0;top:100%;transform:translate(-50%,-50%) scale(1.15)}75%{left:0;top:100%}100%{left:0;top:0;transform:translate(-50%,-50%) scale(.75)}}
.motion-paused .login:before,.motion-paused .spark-field i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.login:before{animation:none;background:#b4923f;box-shadow:0 0 12px #d8ad4d55}.spark-field{display:none}}
@media(max-width:520px){.stage{place-content:start center;padding-top:1.35rem;gap:1.1rem}header{gap:.55rem}.sigil{width:min(218px,64vw)}h1{font-size:clamp(1.05rem,5.2vw,1.35rem)}.login{padding:1.4rem}}
@media(max-width:680px){.admin-nav,.edit-form,.account-nav{grid-template-columns:1fr}.admin-nav{gap:.45rem}.row-actions button{width:100%}}
@media(max-height:460px) and (orientation:landscape){.stage{place-content:start center;grid-template-columns:minmax(250px,320px) minmax(310px,420px);align-items:center;column-gap:1.4rem;row-gap:.15rem;padding:.8rem 1.25rem}.stage>header{width:100%;align-self:start;padding-top:.35rem}.sigil{width:min(210px,25vw)}h1{font-size:clamp(1rem,2.5vw,1.35rem)}.login{width:100%;padding:1.05rem 1.35rem}.login h2{margin-bottom:.65rem}.login label{margin:.55rem 0}.login input{padding:.65rem .8rem}.login button{padding:.65rem;margin-top:.45rem}.notice{grid-column:1/-1;margin:.15rem 0 0}}
