/* Serenity Hub — night-sky dashboard */
*{box-sizing:border-box}

:root{
  --night:#0f0614;
  --dusk:#1a0b25;
  --panel:#1b0c27;
  --panel-2:#241033;
  --line:rgba(255,170,215,.14);
  --line-strong:rgba(255,170,215,.28);
  --moon:#f8ecf3;
  --muted:#b093a8;

  --rose:#ff7eb6;
  --gold:#f5c46b;
  --mint:#6fe6bf;
  --sky:#7cc8ff;
  --violet:#b995ff;
  --lime:#b9ea7c;
  --coral:#ff8d7c;

  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--moon);font-family:var(--body);font-size:15px;line-height:1.5;
  background:
    radial-gradient(60% 50% at 85% -10%,rgba(255,126,182,.20),transparent 70%),
    radial-gradient(50% 40% at 0% 30%,rgba(185,149,255,.12),transparent 70%),
    var(--night);
  background-attachment:fixed;
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px}

/* ── Buttons & inputs ── */
.primary,.ghost{
  border-radius:12px;padding:12px 18px;font-weight:600;
  transition:transform .15s,background .15s,border-color .15s;
}
.primary{
  width:100%;margin-top:22px;border:0;color:#2a0a1b;
  background:linear-gradient(135deg,#ffb3d6,var(--rose));
}
.primary:hover{transform:translateY(-1px);background:linear-gradient(135deg,#ffc3de,#ff8fc0)}
.ghost{border:1px solid var(--line-strong);background:transparent;color:var(--moon)}
.ghost:hover{border-color:var(--rose);background:rgba(255,126,182,.08)}
.small{width:auto;margin:0;padding:9px 16px;font-size:14px}

/* ── Sign in ── */
.auth-screen{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr}
.auth-art{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:48px;
  padding:clamp(32px,6vw,88px);overflow:hidden;
  background:
    radial-gradient(circle at 30% 35%,rgba(255,126,182,.22),transparent 55%),
    linear-gradient(160deg,#2a1038,#150820 70%);
  border-right:1px solid var(--line);
}
.auth-art:before{ /* tiny star field */
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 38% 72%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 66% 24%,#ffd0e6,transparent),radial-gradient(1px 1px at 82% 61%,#fff,transparent),
    radial-gradient(1px 1px at 24% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 12%,#fff,transparent),
    radial-gradient(1px 1px at 52% 46%,#fff,transparent),radial-gradient(1px 1px at 7% 56%,#ffd0e6,transparent);
}
.d20{width:min(300px,52vw);height:auto;position:relative;animation:float 9s ease-in-out infinite}
.d20-num{font-family:var(--display);font-weight:800;font-size:30px;fill:#ffd0e6;opacity:.9}
.auth-copy{position:relative;max-width:30rem}
.auth-brand{margin:0 0 14px;color:var(--rose);font-weight:600;font-size:15px}
.auth-copy h2{
  margin:0 0 16px;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.15;letter-spacing:-.02em;
}
.auth-copy p:last-child{margin:0;color:var(--muted);font-size:17px;max-width:27rem}

.auth-panel{display:grid;place-items:center;padding:28px}
.auth-card{width:min(400px,100%)}
.auth-title{margin:0 0 24px;font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.02em}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:8px}
.tabs button{border:0;background:none;padding:12px 4px;font-weight:600;color:var(--muted);text-align:left;transition:color .25s}
.tabs button.active{color:var(--moon)}
.tab-ink{position:absolute;left:0;bottom:-1px;width:50%;height:2px;background:var(--rose);box-shadow:0 0 12px var(--rose);transition:transform .35s cubic-bezier(.65,0,.25,1)}
.tabs[data-mode="register"] .tab-ink{transform:translateX(100%)}
.auth-card label{display:block;color:var(--muted);font-size:14px;font-weight:500;margin:18px 0 7px}
.auth-card input{
  width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:12px;
  background:rgba(255,255,255,.03);outline:0;transition:border-color .15s,box-shadow .15s;
}
.auth-card input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,126,182,.18)}
.error{min-height:22px;color:#ff9bbf;font-size:14px;margin-top:12px}

/* ── Shell & top bar ── */
.shell{max-width:1240px;margin:0 auto;padding:26px 32px 40px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:36px}
.wordmark{display:flex;align-items:center;gap:12px;color:var(--rose);font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.wordmark span{color:var(--moon)}
.topbar-actions{display:flex;align-items:center;gap:16px}
.live{display:flex;align-items:center;gap:9px;color:var(--mint);font-size:14px;font-weight:500}
.live i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:pulse 2s ease-in-out infinite}
.topbar .ghost{padding:8px 16px;font-size:14px}

/* ── Hero: headline count + account constellation ── */
.hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:32px;align-items:center;margin-bottom:28px}
.hero-hello{margin:0 0 10px;color:var(--muted);font-size:16px}
.hero-hello span{color:var(--moon);font-weight:600}
.hero-number{
  margin:0;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.05em;
  font-size:clamp(72px,10vw,132px);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 10%,#ffb3d6 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-of{font-weight:400;font-size:.32em;letter-spacing:-.02em;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:.15em}
.hero-label{margin:12px 0 0;font-size:22px;font-weight:600}
.hero-note{margin:8px 0 0;color:var(--muted);font-size:14px;max-width:22rem}

.sky-wrap{
  margin:0;position:relative;border:1px solid var(--line);border-radius:28px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 50%,#2b1239 0%,#170a21 70%);
  aspect-ratio:16/9;
}
.sky{display:block;width:100%;height:100%}
.sky-legend{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.lg{width:9px;height:9px;border-radius:50%;display:inline-block}
.lg.on{background:var(--rose);box-shadow:0 0 8px var(--rose)}
.lg.off{background:#6a5466;margin-left:10px}
.sky .bgstar{fill:#fff}
.sky .ring{fill:none;stroke:rgba(255,255,255,.07)}
.sky .ring.dash{stroke-dasharray:2 7}
.sky .link{stroke:rgba(255,170,215,.28);stroke-width:1}
.sky .link.dim{stroke:rgba(255,255,255,.08)}
.sky .halo{fill:var(--rose);opacity:.22}
.sky .core{fill:#fff2f8}
.sky .core.off{fill:#6a5466}
.sky .halo.off{display:none}
.sky .star.on .halo{transform-box:fill-box;transform-origin:center;animation:twinkle 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.sky .tag{fill:var(--moon);font:500 12px var(--body);paint-order:stroke;stroke:#170a21;stroke-width:3px}
.sky .tag.off{fill:var(--muted)}
.sky .hint{fill:var(--muted);font:500 15px var(--body);text-anchor:middle}

/* ── API token strip ── */
.key{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;
  padding:18px 22px;margin-bottom:28px;border:1px dashed var(--line-strong);border-radius:20px;
  background:rgba(255,255,255,.02);color:var(--gold);
}
.key-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.key-label{color:var(--muted);font-size:13px;font-weight:500}
.token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--moon);word-break:break-all}
.key-actions{display:flex;gap:8px}
.key-help{grid-column:2/-1;margin:0;color:var(--muted);font-size:13px}

/* ── Totals: bento ── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-bottom:36px}
.stat{
  --c:var(--rose);
  position:relative;overflow:hidden;min-height:132px;padding:22px 24px;border-radius:24px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  transition:border-color .2s;
}
.stat:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.stat:before{ /* glow in the stat's own colour */
  content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 28%,transparent),transparent 70%);pointer-events:none;
}
.ico{
  position:absolute;right:22px;top:20px;width:30px;height:30px;
  fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.stat-label{margin:0 0 6px;color:var(--muted);font-size:14px;font-weight:500}
.stat-value{
  display:block;font-family:var(--display);font-weight:600;color:var(--c);
  font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.03em;white-space:nowrap;
}
.s-tickets{grid-column:span 6;grid-row:span 2;min-height:280px}
.s-tickets .stat-value{font-size:clamp(48px,6.4vw,84px);letter-spacing:-.05em}
.s-tickets .ico{width:44px;height:44px;right:28px;top:26px}
.s-tickets{ /* ticket stub: notches on the left & right edges */
  -webkit-mask:radial-gradient(circle 14px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 14px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 14px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  border-style:dashed;border-color:var(--line-strong);
}
.s-gems{grid-column:span 6}
.s-gems .stat-value{font-size:clamp(30px,4vw,48px)}
.s-jackpot,.s-lucky{grid-column:span 3}
.s-rerolls,.s-rebirths,.s-rolls{grid-column:span 4}

/* ── Accounts ledger ── */
.ledger-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.ledger h2{margin:0;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.filter{
  width:min(260px,100%);padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;
  background:rgba(255,255,255,.03);outline:0;font-size:14px;
}
.filter:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,126,182,.18)}
.filter::placeholder{color:var(--muted)}

.table-wrap{border:1px solid var(--line);border-radius:24px;background:rgba(27,12,39,.6);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:980px}
th{
  padding:16px 18px;text-align:left;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
}
td{padding:15px 18px;border-top:1px solid rgba(255,170,215,.07);font-size:15px;white-space:nowrap}
tbody tr:first-child td{border-top:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,126,182,.06)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.user{font-weight:600}

.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.status-dot{width:8px;height:8px;border-radius:50%}
.online{color:var(--mint)}
.online .status-dot{background:var(--mint);box-shadow:0 0 9px var(--mint)}
.offline{color:#9a8094}
.offline .status-dot{background:#6a5466}

.c-ticket{color:var(--gold)}
.c-jackpot{color:var(--rose)}
.c-lucky{color:var(--mint)}
.c-gem{color:var(--sky)}
.c-trait{color:var(--violet)}
.c-rebirth{color:var(--lime)}
.c-roll{color:var(--coral)}

.delete-btn{
  padding:6px 12px;border:1px solid transparent;border-radius:9px;background:none;color:#ff9bbf;font-size:14px;font-weight:600;
  transition:background .15s,border-color .15s;
}
.delete-btn:hover{background:rgba(255,90,140,.12);border-color:rgba(255,120,160,.4)}
.delete-btn:disabled{opacity:.55;cursor:wait}
.empty{text-align:center;color:var(--muted);padding:44px 20px}
.empty.hidden{display:none}

footer{margin-top:32px;color:var(--muted);font-size:13px}

/* ── Motion ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes twinkle{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.55;transform:scale(1.5)}}
@keyframes arrive{from{opacity:0}to{opacity:1}}
.sky .star{animation:arrive .8s both;animation-delay:calc(var(--i,0)*90ms)}

/* ── Tablet ── */
@media(max-width:960px){
  .auth-screen{grid-template-columns:1fr}
  .auth-art{flex-direction:row;align-items:center;gap:28px;padding:32px 24px;border-right:0;border-bottom:1px solid var(--line)}
  .d20{width:120px;flex:none}
  .auth-copy p:last-child{font-size:15px}
  .hero{grid-template-columns:1fr;gap:22px}
  .s-tickets{grid-column:span 12;grid-row:auto;min-height:200px}
  .s-gems{grid-column:span 12}
  .s-jackpot,.s-lucky{grid-column:span 6}
  .s-rerolls,.s-rebirths,.s-rolls{grid-column:span 4}
}

/* ── Phone ── */
@media(max-width:640px){
  .shell{padding:18px 16px 32px}
  .topbar{margin-bottom:24px}
  .live span{display:none}
  .auth-art{flex-direction:column;align-items:flex-start;gap:16px}
  .d20{width:84px}
  .auth-copy h2{font-size:24px}
  .key{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .key-actions{grid-column:1/-1}
  .key-help{grid-column:1/-1}
  .bento{gap:10px}
  .stat{padding:18px;min-height:110px;border-radius:20px}
  .s-jackpot,.s-lucky,.s-rerolls,.s-rebirths,.s-rolls{grid-column:span 6}
  .s-rolls{grid-column:span 12}
  .ledger-head{flex-direction:column;align-items:stretch}
  .filter{width:100%}

  /* table becomes a stack of account cards */
  .table-wrap{border:0;background:none;overflow:visible}
  table,tbody,tr,td{display:block;min-width:0}
  thead{display:none}
  tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding:16px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,var(--panel-2),var(--panel));
  }
  td{padding:6px 0;border:0;font-size:15px}
  td.num,td{text-align:left}
  td[data-label]:before{content:attr(data-label);display:block;color:var(--muted);font-size:12px;font-weight:500}
  td.user{grid-column:1/-1;order:-1;font-size:18px}
  td.user:before{display:none}
  td.status-cell{grid-column:1/-1;order:-2}
  td.status-cell:before{display:none}
  td.act{grid-column:1/-1;margin-top:6px}
  td.act:before{display:none}
  .delete-btn{width:100%;border-color:rgba(255,120,160,.35);padding:10px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── Sign-in & sign-up motion ── */
/* page load: die drops in, copy and form rise in order */
.d20{animation:dieIn .9s cubic-bezier(.2,.8,.2,1) both,float 9s ease-in-out .9s infinite}
.auth-copy>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.auth-copy>:nth-child(1){animation-delay:.25s}.auth-copy>:nth-child(2){animation-delay:.35s}.auth-copy>:nth-child(3){animation-delay:.45s}
.auth-title{animation:rise .6s .2s cubic-bezier(.2,.8,.2,1) both}
.tabs{animation:rise .6s .3s cubic-bezier(.2,.8,.2,1) both}
#authForm>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
#authForm>:nth-child(1){animation-delay:.38s}#authForm>:nth-child(2){animation-delay:.44s}#authForm>:nth-child(3){animation-delay:.5s}
#authForm>:nth-child(4){animation-delay:.56s}#authForm>:nth-child(5){animation-delay:.62s}
/* switching between log in and create account: fields re-enter */
#authForm.swap>*{animation:swapIn .45s cubic-bezier(.2,.8,.2,1) both}
#authForm.swap>:nth-child(2){animation-delay:.04s}#authForm.swap>:nth-child(3){animation-delay:.08s}
#authForm.swap>:nth-child(4){animation-delay:.12s}#authForm.swap>:nth-child(5){animation-delay:.16s}
.auth-title.swap{animation:swapIn .4s cubic-bezier(.2,.8,.2,1) both}

/* submitting */
.primary{position:relative;overflow:hidden}
.primary.loading{pointer-events:none;color:transparent}
.primary.loading:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(42,10,27,.25);border-top-color:#2a0a1b;animation:spin .7s linear infinite}
.primary.loading:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 1.1s ease-in-out infinite}

/* wrong password etc. */
#authForm.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.error:not(:empty){animation:swapIn .3s both}

/* success: die rolls, screen dissolves */
.auth-screen{transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.auth-screen.leaving{opacity:0;transform:scale(1.04);filter:blur(6px);pointer-events:none}
.auth-screen.leaving .d20{animation:dieRoll .8s cubic-bezier(.5,0,.2,1) both}
.auth-screen.leaving .auth-card{transform:translateY(-8px);opacity:.6;transition:all .4s}

/* dashboard entrance, once, after signing in */
#dashboard.enter .topbar,#dashboard.enter .hero,#dashboard.enter .key,#dashboard.enter .bento>*,#dashboard.enter .ledger,#dashboard.enter footer{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
#dashboard.enter .hero{animation-delay:.08s}
#dashboard.enter .key{animation-delay:.18s}
#dashboard.enter .bento>:nth-child(1){animation-delay:.24s}#dashboard.enter .bento>:nth-child(2){animation-delay:.3s}
#dashboard.enter .bento>:nth-child(3){animation-delay:.36s}#dashboard.enter .bento>:nth-child(4){animation-delay:.4s}
#dashboard.enter .bento>:nth-child(5){animation-delay:.44s}#dashboard.enter .bento>:nth-child(6){animation-delay:.48s}
#dashboard.enter .bento>:nth-child(7){animation-delay:.52s}
#dashboard.enter .ledger{animation-delay:.58s}
#dashboard.enter footer{animation-delay:.66s}
#dashboard.enter .sky .star{animation-delay:calc(.5s + var(--i,0)*120ms)}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes swapIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes dieIn{from{opacity:0;transform:translateY(-60px) rotate(-120deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes dieRoll{0%{transform:rotate(0) scale(1)}60%{transform:rotate(300deg) scale(1.15)}100%{transform:rotate(360deg) scale(1.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{to{transform:translateX(100%)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.stat.bump{animation:bump 1.4s ease-out}
@keyframes bump{0%{border-color:var(--c);background-color:color-mix(in srgb,var(--c) 14%,transparent)}100%{border-color:var(--line)}}