/* THE 2AM — style.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* Deeper blacks — more luxurious, less flat */
  --bg:    #080807;
  --surf:  #0f0f0d;
  --card:  #131311;

  /* Warmer whites — aged paper, not clinical */
  --text:  #f0ede6;
  --muted: #c8c4bb;
  --dim:   #7a7670;

  /* Gold accent — richer, more intentional */
  --acc:   #c8a96e;
  --acc2:  #e8d5a3;
  --adim:  #7a6a48;
  --aglow: rgba(200,169,110,0.06);

  /* Borders — barely visible, felt not seen */
  --bord:  rgba(240,237,230,0.10);
  --bord2: rgba(240,237,230,0.20);
  --bord3: rgba(200,169,110,0.25);

  /* Night */
  --nbg:   #05050a;
  --ndim:  #2a2a45;

  /* Typography */
  --serif:   'Cormorant Garamond',Georgia,serif;
  --sans:    'DM Sans',system-ui,sans-serif;
  --display: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --wordmark: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

html,body{height:100%;margin:0;padding:0;}
body{background:var(--bg);font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden;}

.app{width:100vw;height:100vh;background:var(--bg);position:relative;overflow:hidden;}

/* ── SCREENS ── */
.screen{
  display:none;flex-direction:column;
  width:100%;height:100%;
  position:absolute;inset:0;
  overflow-y:auto;background:var(--bg);
  transition:opacity 0.55s ease;
}
.screen.on{display:flex;}
.night-screen.on{display:flex;}

/* ── GLOBAL UTILS ── */
.navspace{height:90px;flex-shrink:0;}
.mt4{margin-top:4px;}.mt8{margin-top:8px;}.mt24{margin-top:24px;}.mt40{margin-top:40px;}
.mb8{margin-bottom:8px;}.mb28{margin-bottom:28px;}.mb32{margin-bottom:32px;}.mb40{margin-bottom:40px;}
.caps{font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;}
.lbl{font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:14px;}
.page-eyebrow{font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:28px;}
.serif-title{font-family:var(--serif);font-size:clamp(30px,4vw,56px);font-weight:300;line-height:1.1;margin-bottom:8px;color:var(--text);letter-spacing:-0.5px;}
.serif-sub{font-family:var(--serif);font-size:clamp(15px,1.6vw,20px);font-weight:300;font-style:italic;color:var(--muted);margin-top:4px;}

/* ── BUTTONS ── */
.btn-border{
  background:transparent;border:0.5px solid rgba(242,240,235,0.35);color:var(--text);
  font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  padding:16px 44px;cursor:pointer;transition:border-color .4s,background .4s;
}
.btn-border:hover{border-color:var(--text);background:var(--aglow);}
.btn-sm{padding:12px 28px;font-size:10px;}
.btn-ghost{
  background:none;border:none;color:var(--muted);font-family:var(--sans);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  padding:10px 0;cursor:pointer;transition:color .3s;
}
.btn-ghost:hover{color:var(--text);}
.back-btn{
  background:none;border:none;color:var(--muted);font-family:var(--sans);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;padding:0 0 24px;transition:color .3s;flex-shrink:0;
}
.back-btn:hover{color:var(--text);}

/* ── NAVBAR ── */
.navbar{
  position:fixed;bottom:0;left:0;right:0;
  padding:10px 0 24px;
  background:linear-gradient(transparent,rgba(8,8,7,0.97) 45%);
  display:flex;justify-content:center;
  gap:clamp(6px,2.8vw,36px);
  z-index:50;
}
.night-navbar{
  background:linear-gradient(transparent,var(--nbg) 40%);
}
.ni{
  background:none;border:none;color:var(--dim);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;padding:5px 10px;font-size:18px;transition:color .3s;
  flex-shrink:0;
}
.ni span{font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:inherit;white-space:nowrap;}
.ni.active{color:var(--acc2);}
.ni:hover:not(.active){color:var(--muted);}

/* ── DEV ── */
.dev-nav{position:fixed;top:0;left:0;right:0;padding:10px 20px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:rgba(10,10,8,0.95);border-bottom:0.5px solid rgba(255,255,255,0.05);z-index:200;}
.dev-btn{background:none;border:0.5px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.35);font-family:var(--sans);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;cursor:pointer;transition:all .2s;}
.dev-btn:hover{border-color:rgba(255,255,255,0.4);color:rgba(255,255,255,0.8);}
.dev-label{font-size:9px;letter-spacing:2px;color:rgba(255,255,255,0.15);text-transform:uppercase;margin-right:4px;}

/* ─────────────────────────────────────
   SPLASH
───────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInOnly{from{opacity:0;}to{opacity:1;}}

.fade-in-1{opacity:0;animation:fadeUp 1.3s ease forwards;animation-delay:0.2s;}
.fade-in-2{opacity:0;animation:fadeUp 1.3s ease forwards;animation-delay:0.8s;}
.fade-in-3{opacity:0;animation:fadeInOnly 1s ease forwards;animation-delay:1.5s;}
.fade-in-4{opacity:0;animation:fadeInOnly 1s ease forwards;animation-delay:1.9s;}

#s-splash{justify-content:center;align-items:center;text-align:center;cursor:pointer;}
.splash-center{display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px;text-transform:uppercase}
.wordmark{font-family:var(--wordmark);font-size:clamp(36px,6vw,82px);font-weight:400;letter-spacing:18px;color:var(--text);line-height:1;text-transform:uppercase;}
.tagline{font-family:var(--serif);font-size:clamp(14px,1.6vw,22px);font-weight:300;font-style:italic;color:var(--dim);line-height:1.8;letter-spacing:0.5px;}
.splash-timer{font-size:10px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin-top:32px;}
.splash-foot{position:absolute;bottom:52px;left:0;right:0;font-family:var(--serif);font-size:clamp(13px,1.2vw,17px);color:var(--dim);text-align:center;padding:0 12%;letter-spacing:0.5px;font-style:italic;}
.splash-click-hint{position:absolute;bottom:24px;left:0;right:0;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);text-align:center;}

/* ─────────────────────────────────────
   ONBOARDING — full centered
───────────────────────────────────── */
#s-onboard{background:var(--bg);}
.ob-counter{position:absolute;top:44px;right:60px;font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
.ob-center{
  flex:1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;padding:60px;
}
.ob-inner{
  display:flex;flex-direction:column;
  align-items:center;
  gap:0;
}
.ob-q{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,42px);
  font-weight:300;color:var(--text);
  line-height:1.5;margin-bottom:40px;
  max-width:600px;
  /* transition handled inline by JS */
}
.ob-next{
  font-size:11px;letter-spacing:3px;color:var(--text);text-transform:uppercase;
  border:0.5px solid rgba(242,240,235,0.3);background:transparent;
  padding:14px 40px;cursor:pointer;
  transition:border-color .4s,color .4s,opacity .3s;
}
.ob-next:hover{border-color:var(--acc);color:var(--acc2);background:rgba(200,169,110,0.06);}

/* ─────────────────────────────────────
   TODAY / LOOP — full centered layout
───────────────────────────────────── */
.loop-layout{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-evenly;
    text-align:center;
    padding:60px 10px 0;
}
.loop-top{
    width:100%;
}

.loop-meta{
    width:100%;
    margin-left: 40px;
    text-align:left;
}
.loop-date{font-size:12px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.loop-divider{color:var(--dim);font-size:12px;}
.loop-how{font-size:12px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
.loop-headline{font-size:clamp(10px,4.5vw,20px);font-weight:300;line-height:5.2;letter-spacing:6px;text-transform:uppercase;color:var(--dim);}
.mood-grid{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:1500px;
}
.mood-btn{
  background:transparent;border:0.1px solid var(--bord);color:var(--text);
  font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);
  font-weight:300;font-style:italic;
  padding:clamp(6px,2vw,10px) 0;
  width:100%;text-align:center;cursor:pointer;letter-spacing:2px;
  transition:border-color .5s,background .4s,opacity .4s;
}
.mood-btn:hover{border-color:var(--bord2);background:rgba(200,169,110,0.04);}
.mood-btn.sel{border-color:var(--acc);background:rgba(200,169,110,0.07);color:var(--acc2);}
.mood-btn.fade{opacity:0.07;pointer-events:none;}
.loop-msg{
  margin-top:32px;

  font-family:var(--serif);
  font-size:clamp(17px,1.8vw,24px);
  font-style:italic;
  color:var(--text);
  font-weight:300;
  line-height:1.7;

  border-left:1px solid var(--acc);
  padding:8px 0 8px 20px;

  opacity:0;
  transition:opacity 1s;

  min-height:44px;
  max-width:1000px;   /* Increased width */

  text-align:left;
  letter-spacing:6px;

  white-space:nowrap; /* Prevents wrapping */
  overflow:hidden;    /* Optional */
}

.loop-msg.show{
  opacity:1;
}

/* ─────────────────────────────────────
   PROMPT — split layout
───────────────────────────────────── */
.prompt-layout{
  flex:1;display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:2fr 1fr;
  gap:0;padding:56px 72px 0;
}
.prompt-top{
  grid-column:1/-1;margin-bottom:32px;
}
.prompt-q{
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,52px);
  font-weight:300;color:var(--text);line-height:4.4;
  margin-top:10px;
}
.prompt-write-area{
  grid-column:1;padding-right:48px;
  display:flex;flex-direction:column;
}
.bare-ta{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(242,240,235,0.18);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(17px,1.8vw,24px);font-weight:300;line-height:2;
  resize:none;outline:none;width:100%;
  min-height:200px;padding-bottom:20px;
  margin-top:8px;transition:border-color .4s;
}
.bare-ta:focus{border-color:rgba(242,240,235,.3);}
.bare-ta::placeholder{color:var(--dim);font-style:italic;}
.save-dot{width:6px;height:6px;border-radius:50%;background:transparent;margin-top:16px;transition:background .5s;}
.save-dot.saved{background:var(--acc);}
.prompt-actions{
  grid-column:2;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:flex-start;
  padding-left:48px;padding-top:8px;gap:16px;
  border-left:0.5px solid var(--bord);
}

/* single-col fallback on narrow screens */
@media(max-width:900px){
  .prompt-layout{grid-template-columns:1fr;padding:48px 32px 0;}
  .prompt-write-area{grid-column:1;padding-right:0;}
  .prompt-actions{grid-column:1;border-left:none;border-top:0.5px solid var(--bord);padding-left:0;padding-top:24px;margin-top:8px;flex-direction:row;flex-wrap:wrap;}
}

/* ─────────────────────────────────────
   JOURNAL — side-by-side
───────────────────────────────────── */
.journal-layout{
  flex:1;display:flex;flex-direction:column;
  padding:56px 72px 0;
}
.journal-header{margin-bottom:32px;}
.journal-rule{font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-top:8px;}
.journal-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;flex:1;
}
.journal-today-col{padding-right:48px;display:flex;flex-direction:column;}
.journal-yday-col{
  padding-left:48px;border-left:0.5px solid var(--bord);
  display:flex;flex-direction:column;
}
.journal-ta{min-height:240px;flex:1;}
.yday-block{padding-left:0;}
.yday-text{font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);font-weight:300;font-style:italic;color:var(--muted);line-height:2;}
.donate-box{margin-top:40px;padding:24px 28px;border:0.5px solid var(--bord);text-align:center;}
.donate-box p{font-family:var(--serif);font-size:clamp(13px,1.2vw,16px);font-style:italic;color:var(--muted);line-height:1.9;margin-bottom:4px;}
.btn-donate{background:none;border:0.5px solid rgba(242,240,235,.25);color:var(--text);font-family:var(--sans);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 28px;cursor:pointer;margin-top:16px;transition:border-color .3s;}
.btn-donate:hover{border-color:var(--text);}

@media(max-width:900px){
  .journal-layout{padding:40px 28px 0;}
  .journal-split{grid-template-columns:1fr;gap:32px;}
  .journal-today-col{padding-right:0;}
  .journal-yday-col{padding-left:0;border-left:none;border-top:0.5px solid var(--bord);padding-top:28px;}
}

/* ─────────────────────────────────────
   ALIVE SCORE
───────────────────────────────────── */
/* LOCKED */
.score-locked-layout{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:60px;text-align:center;
}
.score-locked-center{max-width:540px;}
.score-locked-q{
  font-family:var(--serif);font-size:clamp(32px,5vw,72px);
  font-weight:300;color:var(--text);line-height:1.3;margin-bottom:24px;
}
.score-locked-sub{
  font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);
  font-style:italic;color:var(--muted);line-height:1.8;margin-bottom:32px;
}
.score-days-badge{
  font-size:11px;letter-spacing:3px;color:var(--acc);
  text-transform:uppercase;margin-top:16px;
}

/* UNLOCKED — 3-col grid */
.score-unlocked-layout{
  flex:1;display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr;
  padding:60px 64px 0;gap:0;
}
.score-main{
  padding-right:48px;
  border-right:0.5px solid var(--bord);
  display:flex;flex-direction:column;justify-content:center;
}
.score-bars{
  padding:0 48px;
  border-right:0.5px solid var(--bord);
  display:flex;flex-direction:column;justify-content:center;
}
.score-links{
  padding-left:48px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.score-num{font-family:var(--serif);font-size:clamp(72px,9vw,130px);font-weight:300;color:var(--acc2);line-height:1;margin:8px 0 4px;letter-spacing:-2px;}
.score-quote{font-family:var(--serif);font-size:clamp(13px,1.2vw,16px);font-style:italic;color:var(--dim);line-height:1.9;border-left:0.5px solid var(--bord);padding-left:16px;margin:20px 0 0;}
.bar-row{margin-bottom:24px;}
.bar-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.bar-bg{height:1px;background:var(--bord);overflow:hidden;}
.bar-fill{height:1px;background:linear-gradient(90deg,var(--adim),var(--acc));width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1);}
.bar-lbl{font-family:var(--serif);font-size:13px;color:var(--dim);}
.score-pattern-msg{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);font-style:italic;color:var(--text);line-height:1.8;border-left:0.5px solid rgba(242,240,235,.15);padding:12px 16px;margin-top:8px;min-height:20px;}

/* Score link cards */
.score-link-card{
  border:0.5px solid var(--bord);padding:20px 24px;cursor:pointer;
  transition:border-color .4s,background .4s;position:relative;
}
.score-link-card:hover{border-color:rgba(242,240,235,.3);background:var(--aglow);}
.slc-label{font-family:var(--sans);font-size:11px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
.slc-desc{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);font-style:italic;color:var(--text);line-height:1.5;}
.slc-arrow{position:absolute;bottom:20px;right:24px;color:var(--dim);font-size:16px;transition:color .3s,transform .3s;}
.score-link-card:hover .slc-arrow{color:var(--text);transform:translateX(4px);}

@media(max-width:1000px){
  .score-unlocked-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:40px 32px 0;gap:32px;}
  .score-main,.score-bars{border-right:none;border-bottom:0.5px solid var(--bord);padding-right:0;padding-bottom:28px;}
  .score-links{padding-left:0;}
}

/* ─────────────────────────────────────
   NIGHT MODE — original left-aligned, all text white
   To change text colours: edit the color values below
   .night-label      → eyebrow label colour
   .night-opener     → main heading colour
   .confession       → confession card text colour
   .night-q          → question text colour
   .night-input      → typed text colour
   #night-count      → people count text colour
───────────────────────────────────── */
.night-screen{background:var(--nbg) !important;}
.night-pad{flex:1;display:flex;flex-direction:column;padding:64px 80px 48px;min-height:100%;}

.night-label{
  font-size:10px;letter-spacing:4px;
  color:#ffffff;                     /* ← eyebrow label */
  text-transform:uppercase;margin-bottom:60px;
}
.night-opener{
  font-family:var(--serif);font-size:clamp(26px,3.5vw,52px);
  font-weight:300;
  color:#ffffff;                     /* ← main "You're not the only one awake" */
  line-height:1.4;margin-bottom:52px;
}
.confession{
  font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);
  font-weight:300;font-style:italic;
  color:#ffffff;                     /* ← confession cards text */
  line-height:1.9;border-left:0.5px solid #1e1e40;
  padding:16px 0 16px 22px;margin-bottom:20px;
  opacity:0;transition:opacity 1.8s ease;
}
.confession.on{opacity:1;}
.night-q{
  font-family:var(--serif);font-size:clamp(18px,2vw,28px);
  font-weight:300;
  color:#ffffff;                     /* ← question text */
  line-height:1.5;margin:44px 0 22px;
}
.night-input{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(255,255,255,0.2);
  color:#ffffff;                     /* ← typed input text */
  font-family:var(--serif);font-size:clamp(16px,1.6vw,22px);
  font-weight:300;font-style:italic;
  width:100%;outline:none;padding:12px 0;
}
.night-input::placeholder{color:rgba(255,255,255,0.25);}
.night-skip{
  font-size:10px;letter-spacing:2.5px;
  color:rgba(255,255,255,0.3);       /* ← skip button */
  text-transform:uppercase;text-align:center;
  margin-top:24px;cursor:pointer;padding:12px;transition:color .3s;
}
.night-skip:hover{color:rgba(255,255,255,0.7);}
.night-foot{
  display:flex;align-items:center;gap:12px;
  margin-top:auto;padding-top:28px;
  border-top:0.5px solid #0e0e1e;
}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);flex-shrink:0;animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:1;transform:scale(1.4);}}
#night-count{
  font-size:10px;letter-spacing:2px;
  color:rgba(255,255,255,0.3);       /* ← people count */
  text-transform:uppercase;
}

@media(max-width:768px){
  .night-pad{padding:40px 24px 32px;}
}

/* ─────────────────────────────────────
   UNLIVED LIFE
───────────────────────────────────── */
/* ── UNLIVED — two-column layout ── */
.unlived-layout{
  flex:1;display:grid;
  grid-template-columns:1fr 1fr;
  min-height:0;
  overflow:hidden;
}
.unlived-left{
  padding:52px 48px 40px 72px;
  overflow-y:auto;
  border-right:0.5px solid var(--bord);
  display:flex;flex-direction:column;
}
.unlived-left-head{margin-bottom:28px;}
.unlived-right{
  padding:52px 72px 40px 48px;
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.unlived-right-head{
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:0.5px solid var(--bord);
  display:flex;align-items:baseline;justify-content:space-between;
}
.u-done-count-label{
  font-family:var(--serif);font-size:13px;
  font-style:italic;color:var(--acc);
}

/* Example card */
.u-example-wrap{
  background:var(--surf);
  border:0.5px solid var(--bord);
  border-left:2px solid var(--adim);
  padding:18px 20px;
  margin-bottom:24px;
}
.u-example-tag{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--adim);margin-bottom:8px;
}
.u-example-text{
  font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);
  font-weight:300;font-style:italic;color:var(--muted);line-height:1.6;
}

/* Items */
.u-item{display:flex;align-items:flex-start;gap:0;padding:18px 0;border-bottom:0.5px solid var(--bord);}
.u-dot{width:4px;height:4px;border-radius:50%;background:var(--muted);margin-top:10px;flex-shrink:0;}
.u-text{font-family:var(--serif);font-size:clamp(16px,1.7vw,22px);font-weight:300;font-style:italic;color:var(--text);line-height:1.5;flex:1;}

/* Add input */
.u-add{display:flex;align-items:center;gap:12px;margin-top:24px;}
.u-input{background:transparent;border:none;border-bottom:0.5px solid var(--bord);color:var(--text);font-family:var(--serif);font-size:clamp(16px,1.6vw,22px);font-weight:300;font-style:italic;flex:1;outline:none;padding:10px 0;}
.u-input::placeholder{color:var(--dim);}
.u-add-btn{background:none;border:0.5px solid rgba(242,240,235,.25);color:var(--muted);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;transition:all .3s;flex-shrink:0;}
.u-add-btn:hover{border-color:var(--text);color:var(--text);}

.u-done-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 0;}
.u-done-empty-text{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);font-style:italic;color:var(--dim);line-height:1.8;text-align:center;}
@media(max-width:768px){
  .unlived-layout{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .unlived-left{padding:40px 24px 24px;border-right:none;border-bottom:0.5px solid var(--bord);}
  .unlived-right{padding:24px 24px 40px;}
}

/* ─────────────────────────────────────
   SIT WITH SOMEONE — warm, personal
───────────────────────────────────── */
.sit-screen.on{display:flex;flex-direction:column;}

.sit-header{
  display:flex;align-items:flex-start;gap:20px;
  padding:44px 72px 24px;
  border-bottom:0.5px solid var(--bord);flex-shrink:0;
}
.sit-title-block{flex:1;}
.sit-title{
  font-family:var(--serif);font-size:clamp(26px,3.2vw,46px);
  font-weight:300;color:var(--text);line-height:1.2;margin-bottom:10px;
}
.sit-subtitle{
  font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);
  font-style:italic;color:var(--muted);line-height:1.7;
}
.sit-timer-bar{padding:0 72px;flex-shrink:0;margin-top:16px;}
.timer-track{height:1px;background:var(--bord);overflow:hidden;}
.timer-fill{height:1px;background:var(--muted);width:98%;transition:width 1s linear;}
.timer-lbl{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);text-align:center;padding:10px 0 0;}

.sit-msgs{
  flex:1;overflow-y:auto;
  padding:32px 72px;
  display:flex;flex-direction:column;gap:28px;min-height:0;
}
.sit-row{display:flex;}
.sit-row.me{justify-content:flex-end;}
.bbl{
  font-family:var(--serif);font-size:clamp(16px,1.7vw,22px);
  font-weight:300;font-style:italic;color:var(--muted);
  line-height:1.85;max-width:min(560px,58%);opacity:0;
}
.bbl.me{
  font-style:normal;color:var(--text);text-align:right;
}
.bbl.them,.bbl.me{animation:fadeIn 1.5s ease forwards;}
.a1{animation-delay:0.8s;}.a2{animation-delay:3.2s;}.a3{animation-delay:5.8s;}
@keyframes fadeIn{to{opacity:1;}}

.sit-compose{
  border-top:0.5px solid var(--bord);
  padding:20px 72px 36px;flex-shrink:0;
}
.sit-input{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(242,240,235,0.15);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(18px,1.9vw,26px);
  font-weight:300;font-style:italic;
  width:100%;outline:none;padding:14px 0;margin-bottom:12px;
  transition:border-color .4s;
}
.sit-input:focus{border-color:rgba(242,240,235,.3);}
.sit-input::placeholder{color:var(--dim);}
.sit-note{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.9;}

/* save hint inline dot — silent */



/* ── SAVE STATUS (prompt page) ── */
.save-status{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);margin-top:12px;min-height:16px;
  transition:color .4s;
}

/* ── UNLIVED COMPLETION SYSTEM ── */
.u-item-static .u-dot{background:var(--dim);}

/* Progress bar */
.u-progress-wrap{margin-bottom:20px;}
.u-progress-label{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);margin-bottom:8px;display:flex;justify-content:space-between;}
.u-progress-track{height:1px;background:var(--bord);position:relative;}
.u-progress-fill{height:1px;background:var(--acc);transition:width 0.8s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;}

/* Checkbox circle */
.u-check{
  font-size:22px;color:var(--dim);cursor:pointer;
  flex-shrink:0;margin-top:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;
  border:0.5px solid var(--bord);
  border-radius:50%;
  transition:color .3s,border-color .3s,background .3s;
  user-select:none;
}
.u-check:hover{color:var(--acc);border-color:var(--acc);background:rgba(212,196,154,0.08);}

/* Animation: item flying out */
@keyframes itemComplete{
  0%  {opacity:1;transform:translateX(0);}
  40% {opacity:1;transform:translateX(12px);}
  100%{opacity:0;transform:translateX(40px);max-height:0;padding:0;margin:0;border:none;}
}
.u-completing{animation:itemComplete 0.55s ease forwards;}

/* Done items */
.u-item-done{opacity:0.55;pointer-events:none;}
.u-item-done .u-text{text-decoration:line-through;color:var(--dim);}
.u-check-done{
  font-size:13px;color:var(--acc);
  flex-shrink:0;margin-top:4px;width:22px;text-align:center;
}
.u-done-body{display:flex;flex-direction:column;gap:3px;}
.u-done-date{font-family:var(--serif);font-size:12px;font-style:italic;color:var(--dim);letter-spacing:0.5px;}
.u-done-note{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--dim);margin-top:2px;}

/* Completed lives section */
.u-done-section{margin-top:0;}
.u-done-header{margin-bottom:12px;}
.u-done-count{
  font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);
  font-style:italic;color:var(--acc);line-height:1.6;
}

/* Milestone toast */
.u-milestone{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:clamp(13px,1.3vw,16px);
  font-style:italic;color:var(--text);
  background:var(--surf);border:0.5px solid var(--acc);
  padding:12px 28px;pointer-events:none;
  opacity:0;transition:opacity .5s;z-index:100;
  white-space:nowrap;
}
.u-milestone.show{opacity:1;}

/* ── SCROLL ── */
::-webkit-scrollbar{width:2px;}
::-webkit-scrollbar-thumb{background:var(--dim);border-radius:2px;}

/* ── MOBILE ── */
@media(max-width:768px){
  .loop-layout{padding:48px 24px 0;}
  .sit-header,.sit-timer-bar,.sit-msgs,.sit-compose{padding-left:24px;padding-right:24px;}
  .navbar{gap:4px;padding-left:4px;padding-right:4px;}
  .ni{padding:4px 6px;font-size:16px;}
  .ni span{font-size:7px;letter-spacing:1px;}
  .dev-nav{gap:5px;}
  .ob-counter{right:24px;top:32px;}
  .ob-center{padding:40px 28px 60px;}
}
/* ═══════════════════════════════════════
   AUTH / LOGIN SCREEN
═══════════════════════════════════════ */
#s-auth{justify-content:center;align-items:center;background:var(--bg);}
.auth-center{
  width:min(420px,92vw);
  display:flex;flex-direction:column;align-items:center;
  padding:52px 44px;
  /* No border — background is the container */
  position:relative;z-index:1;
}
.auth-wordmark{
  font-family:var(--wordmark);
  font-size:clamp(24px,3.5vw,42px);
  letter-spacing:14px;margin-bottom:8px;text-transform:uppercase;
}
.auth-tagline{
  font-family:var(--serif);font-size:18px;font-style:italic;
  color:var(--dim);margin-bottom:36px;text-align:center;line-height:1.6;
}
.auth-toggle{
  display:flex;width:100%;
  border:0.5px solid var(--bord);margin-bottom:28px;
}
.auth-tab{
  flex:1;padding:10px;background:none;border:none;
  font-family:var(--sans);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.3s;
}
.auth-tab.active{color:var(--acc2);background:rgba(200,169,110,0.07);}
.auth-input{
  width:100%;background:transparent;border:none;
  border-bottom:0.5px solid var(--bord);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(16px,1.6vw,20px);font-weight:300;
  padding:12px 0;margin-bottom:16px;outline:none;
  transition:border-color .3s;
}
.auth-input:focus{border-color:rgba(242,240,235,.3);}
.auth-input::placeholder{color:var(--dim);font-style:italic;}
.auth-err{
  font-size:12px;min-height:18px;
  margin-bottom:6px;font-family:var(--sans);
  width:100%;color:#e05555;
}
.auth-err.ok{color:var(--acc);}
.auth-btn{
  width:100%;padding:14px;background:transparent;
  border:0.5px solid rgba(242,240,235,.35);color:var(--text);
  font-family:var(--sans);font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;cursor:pointer;margin-top:4px;
  transition:background .3s,border-color .3s;
}
.auth-btn:hover{background:rgba(200,169,110,0.08);border-color:var(--acc);color:var(--acc2);}
.auth-or{
  font-size:10px;letter-spacing:3px;color:var(--dim);
  text-transform:uppercase;margin:20px 0;
}

.auth-link{
  background:none;border:none;color:var(--dim);
  font-family:var(--sans);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;margin-top:16px;transition:.3s;
}
.auth-link:hover{color:var(--muted);}

/* Loading overlay for async operations */
.auth-loading{
  position:fixed;inset:0;background:rgba(10,10,8,0.7);
  display:none;align-items:center;justify-content:center;z-index:300;
}
.auth-loading.on{display:flex;}
.auth-spinner{
  width:24px;height:24px;border:1px solid var(--bord);
  border-top-color:var(--text);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── NIGHT TEXTAREA + SAVE HINT ── */
.night-ta{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(255,255,255,0.2);
  color:#ffffff;font-family:var(--serif);
  font-size:clamp(16px,1.6vw,22px);font-weight:300;font-style:italic;
  width:100%;outline:none;padding:12px 0;resize:none;
  min-height:100px;line-height:1.8;
  transition:border-color .3s;
}
.night-ta:focus{border-color:rgba(255,255,255,0.35);}
.night-ta::placeholder{color:rgba(255,255,255,0.2);}
.night-save-hint{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.3);margin-top:8px;min-height:16px;
  transition:color .4s;
}

/* ── WISHLIST EDIT ── */
.u-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;}
.u-edit-btn{
  font-size:16px;color:var(--dim);cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0.5px solid transparent;border-radius:50%;
  transition:color .3s,border-color .3s;
}
.u-edit-btn:hover{color:var(--muted);border-color:var(--bord);}
.u-edit-input{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(242,240,235,.3);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(16px,1.7vw,22px);font-weight:300;font-style:italic;
  width:100%;outline:none;padding:8px 0;
  transition:border-color .3s;
}
.u-edit-input:focus{border-color:var(--acc);}
.u-edit-save{
  background:transparent;border:0.5px solid rgba(242,240,235,.3);
  color:var(--text);font-family:var(--sans);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;padding:8px 20px;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.u-edit-save:hover{border-color:var(--text);background:var(--aglow);}
.u-edit-cancel{
  background:none;border:none;color:var(--dim);font-family:var(--sans);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;padding:8px 12px;transition:color .3s;
}
.u-edit-cancel:hover{color:var(--muted);}

/* ── SEALED BLOCKS — permanently saved text ── */
.sealed-block{
  font-family:var(--serif);
  font-size:clamp(17px,1.8vw,24px);
  font-weight:300;font-style:italic;
  color:var(--muted);
  line-height:2;
  padding-bottom:16px;
  margin-bottom:4px;
  border-bottom:0.5px dashed rgba(242,240,235,0.12);
  white-space:pre-wrap;
  user-select:none;    /* cannot be selected or copied as a block */
  pointer-events:none; /* cannot be clicked or edited */
  cursor:default;
}
.night-sealed-block{
  color:rgba(255,255,255,0.45);
  border-bottom-color:rgba(255,255,255,0.1);
}

/* ══════════════════════════════════════
   CONNECT / SIT — Game UI
══════════════════════════════════════ */
.sit-mode-btn{
  background:transparent;border:0.5px solid var(--bord);
  color:var(--muted);font-family:var(--sans);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
  padding:8px 18px;cursor:pointer;transition:.3s;flex-shrink:0;
}
.sit-mode-btn:hover{border-color:var(--text);color:var(--text);}

/* Game selector bar */
.sit-game-bar{
  display:flex;gap:0;border-bottom:0.5px solid var(--bord);
  overflow-x:auto;flex-shrink:0;
}
.sgb-btn{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--dim);font-family:var(--sans);font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;white-space:nowrap;transition:.2s;
}
.sgb-btn:hover{color:var(--muted);}
.sgb-btn.active{color:var(--text);border-bottom-color:var(--text);}

/* Game prompt card */
.sit-game-card{
  padding:20px 72px;border-bottom:0.5px solid var(--bord);
  flex-shrink:0;
}
.sgc-category{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px;
}
.sgc-prompt{
  font-family:var(--serif);font-size:clamp(18px,2vw,26px);
  font-weight:300;color:var(--text);line-height:1.5;margin-bottom:14px;
}
.sgc-actions{display:flex;align-items:center;justify-content:space-between;}
.sgc-skip{
  background:none;border:none;color:var(--dim);font-family:var(--sans);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;padding:0;transition:.3s;
}
.sgc-skip:hover{color:var(--muted);}
.sgc-timer-ring{
  font-family:var(--serif);font-size:clamp(20px,2vw,28px);
  color:var(--acc);font-style:italic;
}

/* Choose One */
.sit-choose-panel{padding:20px 72px;border-bottom:0.5px solid var(--bord);flex-shrink:0;}
.scp-q{font-family:var(--serif);font-size:clamp(17px,1.8vw,24px);font-weight:300;color:var(--text);margin-bottom:16px;line-height:1.4;}
.scp-options{display:flex;align-items:center;gap:16px;}
.scp-opt{
  flex:1;padding:14px;background:transparent;
  border:0.5px solid var(--bord);color:var(--muted);
  font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);
  font-style:italic;cursor:pointer;transition:.3s;
}
.scp-opt:hover,.scp-opt.chosen{border-color:var(--text);color:var(--text);background:var(--aglow);}
.scp-or{color:var(--dim);font-family:var(--serif);font-style:italic;font-size:14px;}
.scp-reveal{margin-top:12px;font-family:var(--serif);font-size:14px;font-style:italic;color:var(--acc);}

/* Memory Builder */
.sit-memory-panel{padding:20px 72px;border-bottom:0.5px solid var(--bord);flex-shrink:0;}
.smp-q{font-family:var(--serif);font-size:clamp(16px,1.7vw,22px);font-weight:300;color:var(--text);margin-bottom:12px;}
.smp-input{
  width:100%;background:transparent;border:none;
  border-bottom:0.5px solid var(--bord);color:var(--text);
  font-family:var(--serif);font-size:clamp(16px,1.6vw,20px);
  font-weight:300;font-style:italic;padding:10px 0;outline:none;
  transition:border-color .3s;margin-bottom:12px;display:block;
}
.smp-input:focus{border-color:rgba(242,240,235,.3);}
.smp-input::placeholder{color:var(--dim);}
.smp-next{
  background:transparent;border:0.5px solid var(--bord);
  color:var(--muted);font-family:var(--sans);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;padding:8px 20px;cursor:pointer;transition:.3s;
}
.smp-next:hover{border-color:var(--text);color:var(--text);}
.smp-card{
  background:var(--surf);border:0.5px solid var(--bord);
  padding:20px 24px;margin-top:8px;
}
.smp-card-title{font-family:var(--serif);font-size:clamp(18px,2vw,26px);font-weight:300;color:var(--text);margin-bottom:6px;}
.smp-card-date{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:12px;}
.smp-card-word{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--dim);margin-bottom:8px;}
.smp-card-sentence{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);font-style:italic;color:var(--muted);line-height:1.7;}

@media(max-width:768px){
  .sit-game-card,.sit-choose-panel,.sit-memory-panel{padding-left:24px;padding-right:24px;}
}

.game-card:hover .gc-tag{color:var(--acc);}

/* ══════════════════════════════════════
   CONNECT LANDING PAGE
══════════════════════════════════════ */
.connect-layout{
  flex:1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:52px 72px 0;
}
.connect-header{text-align:center;margin-bottom:40px;}
.connect-sub{font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);font-style:italic;color:var(--muted);margin-top:8px;}
.connect-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:800px;}
.connect-card{
  border:0.5px solid var(--bord);padding:32px 28px;cursor:pointer;
  transition:border-color .4s,background .4s;
  display:flex;flex-direction:column;gap:12px;
}
.connect-card:hover{border-color:var(--bord3);background:rgba(200,169,110,0.04);}
.cc-icon{font-size:24px;color:var(--dim);}
.cc-title{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-weight:300;color:var(--text);}
.cc-desc{font-family:var(--serif);font-size:clamp(14px,1.4vw,17px);font-style:italic;color:var(--muted);line-height:1.7;flex:1;}
.cc-cta{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--adim);margin-top:8px;transition:color .3s;}
.connect-card:hover .cc-cta{color:var(--acc);}

/* GAMES PAGE */
.games-layout{padding:52px 72px 0;flex:1;overflow-y:auto;}
.games-header{margin-bottom:32px;}
.games-sub{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);font-style:italic;color:var(--muted);margin-top:8px;}
.games-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.game-card{
  border:0.5px solid var(--bord);padding:24px 20px;cursor:pointer;
  transition:border-color .4s,background .4s;
  display:flex;flex-direction:column;gap:8px;
}
.game-card:hover{border-color:var(--bord3);background:rgba(200,169,110,0.05);}
.gc-name{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);font-weight:300;color:var(--text);}
.gc-desc{font-family:var(--serif);font-size:clamp(13px,1.3vw,16px);font-style:italic;color:var(--muted);line-height:1.6;flex:1;}
.gc-tag{font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:var(--adim);margin-top:8px;transition:color .3s;}

/* TYPING INDICATOR */
.sit-typing-bbl{padding:12px 16px !important;}
.typing-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--dim);margin:0 2px;
  animation:typingPulse 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2){animation-delay:.2s;}
.typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes typingPulse{0%,80%,100%{opacity:.3;transform:scale(1);}40%{opacity:1;transform:scale(1.3);}}

@media(max-width:900px){
  .connect-cards{grid-template-columns:1fr;}
  .games-grid{grid-template-columns:1fr 1fr;}
  .connect-layout,.games-layout{padding:40px 24px 0;}
}
@media(max-width:600px){
  .games-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   FULL-SCREEN GAME EXPERIENCES
══════════════════════════════════════ */
.game-screen{background:var(--bg);}
.game-screen.on{display:flex;}

.game-fullscreen{
  flex:1;display:flex;flex-direction:column;
  justify-content:flex-start;
  padding:80px 10vw 40px;
  min-height:100%;
}

.game-back{
  position:absolute;top:32px;left:40px;
  background:none;border:none;color:var(--dim);
  font-family:var(--sans);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:color .3s;
}
.game-back:hover{color:var(--muted);}

.game-eyebrow{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--dim);margin-bottom:32px;
}

.game-big-q{
  font-family:var(--serif);
  font-size:clamp(22px,3vw,42px);
  font-weight:300;color:var(--text);
  line-height:1.25;margin-bottom:40px;
  max-width:800px;
}

.game-write-area{margin-bottom:32px;}
.game-ta{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(242,240,235,0.2);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(18px,2vw,26px);font-weight:300;
  font-style:italic;line-height:2;resize:none;
  outline:none;width:100%;min-height:240px;
  padding-bottom:12px;transition:border-color .4s;
}
.game-ta:focus{border-color:rgba(242,240,235,.35);}
.game-ta::placeholder{color:var(--dim);}

.game-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.game-next-btn{
  background:transparent;border:0.5px solid var(--bord2);
  color:var(--text);font-family:var(--sans);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
  padding:12px 32px;cursor:pointer;transition:.3s;
}
.game-next-btn:hover{border-color:var(--acc);color:var(--acc2);background:rgba(200,169,110,0.06);}
.game-done-btn{
  background:none;border:none;color:var(--dim);
  font-family:var(--sans);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:color .3s;
}
.game-done-btn:hover{color:var(--muted);}

/* ── OR / CHOOSE ONE ── */
.game-choose-layout{justify-content:flex-start;padding-top:80px;}
.game-choose-options{
  display:flex;align-items:stretch;gap:0;
  margin-bottom:32px;max-width:700px;
}
.game-choose-opt{
  flex:1;padding:clamp(48px,7vw,90px) 24px;
  background:transparent;border:0.5px solid var(--bord);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(18px,2.2vw,30px);font-weight:300;font-style:italic;
  cursor:pointer;text-align:center;line-height:1.3;
  transition:background .4s,border-color .4s,opacity .4s;
}
.game-choose-opt:hover{background:rgba(200,169,110,0.05);border-color:var(--bord3);}
.game-choose-opt.picked{border-color:var(--acc);background:rgba(200,169,110,0.08);color:var(--acc2);}
.game-choose-opt.other{opacity:0.15;pointer-events:none;}
.game-choose-or{
  display:flex;align-items:center;
  padding:0 20px;color:var(--dim);
  font-family:var(--serif);font-style:italic;font-size:18px;
}
.game-choose-reveal{
  font-family:var(--serif);font-size:clamp(16px,1.8vw,24px);
  font-style:italic;color:var(--muted);line-height:1.7;
  max-width:600px;margin-bottom:24px;
}

/* ── 60 SECONDS ── */
.game-truth-timer{
  display:flex;justify-content:flex-start;
  margin-bottom:28px;
}
.gtt-ring{position:relative;width:80px;height:80px;}
.gtt-svg{width:80px;height:80px;transform:rotate(-90deg);}
.gtt-track{
  fill:none;stroke:var(--bord);stroke-width:3;
}
.gtt-fill{
  fill:none;stroke:var(--acc);stroke-width:3;
  stroke-dasharray:213.6;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear;
  stroke-linecap:round;
}
.gtt-num{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;
  font-weight:300;color:var(--text);
}

/* ── NEVER SENT ── */
.game-unsent-letter{
  border-left:2px solid rgba(242,240,235,0.15);
  padding-left:24px;margin-bottom:32px;
}
.gul-to{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;
}
.gul-body{min-height:160px;}
.gul-note{
  font-family:var(--serif);font-size:13px;
  font-style:italic;color:var(--dim);margin-top:16px;
}
.game-burn-btn{
  background:transparent;border:0.5px solid rgba(242,240,235,.25);
  color:var(--text);font-family:var(--sans);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
  padding:12px 32px;cursor:pointer;transition:.3s;
}
.game-burn-btn:hover{border-color:rgba(255,100,100,.4);color:rgba(255,150,150,.8);}

/* ── SEAL THIS / MEMORY ── */
.game-memory-steps{width:100%;max-width:700px;}
.gms-step{display:flex;flex-direction:column;gap:20px;}
.game-word-input{
  background:transparent;border:none;
  border-bottom:0.5px solid rgba(242,240,235,0.2);
  color:var(--text);font-family:var(--serif);
  font-size:clamp(24px,3vw,48px);font-weight:300;
  outline:none;padding:8px 0;width:100%;max-width:400px;
  transition:border-color .4s;
}
.game-word-input:focus{border-color:rgba(242,240,235,.4);}
.game-word-input::placeholder{color:var(--dim);}
.gms-card{
  border:0.5px solid var(--bord);
  padding:32px 36px;max-width:600px;
}
.gms-card-title{
  font-family:var(--serif);font-size:clamp(24px,3vw,44px);
  font-weight:300;color:var(--text);margin-bottom:6px;
}
.gms-card-date{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:20px;}
.gms-card-word{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--dim);margin-bottom:8px;}
.gms-card-sentence{font-family:var(--serif);font-size:clamp(15px,1.6vw,20px);font-style:italic;color:var(--muted);line-height:1.8;}

/* ── FIVE YEARS ── */
.game-postcard-card{
  border:0.5px solid var(--bord);
  padding:28px 32px;max-width:680px;
  margin-bottom:28px;
}
.gpc-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:0.5px solid var(--bord);
}
.gpc-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);}
.gpc-date{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--dim);}
.gpc-body{min-height:180px;border:none !important;}

@media(max-width:768px){
  .game-fullscreen{padding:60px 24px 32px;}
  .game-back{left:24px;}
  .game-choose-options{flex-direction:column;}
  .game-choose-or{justify-content:center;padding:12px 0;}
}

/* Connect single card layout */
.connect-single{width:100%;max-width:600px;}
.connect-card-full{width:100%;}

/* ══════════════════════════════════════
   ADMIN DASHBOARD
══════════════════════════════════════ */
.admin-layout{
  flex:1;padding:52px 72px 0;overflow-y:auto;
  display:flex;flex-direction:column;gap:32px;
}
.admin-header{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:20px;border-bottom:0.5px solid var(--bord);
}
.admin-title{
  font-family:var(--serif);font-size:clamp(28px,3vw,44px);
  font-weight:300;color:var(--text);
}

/* Stats row */
.admin-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.admin-stat{
  background:var(--card);border:0.5px solid var(--bord);
  padding:20px 24px;
}
.admin-stat-num{
  font-family:var(--serif);font-size:clamp(32px,3.5vw,52px);
  font-weight:300;color:var(--acc2);line-height:1;margin-bottom:6px;
}
.admin-stat-lbl{
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);
}

/* Cost row */
.admin-cost-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.admin-cost-card{
  background:var(--card);border:0.5px solid var(--bord);
  padding:20px 24px;
}
.admin-cost-lbl{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.admin-cost-usd{font-family:var(--serif);font-size:clamp(22px,2.5vw,36px);font-weight:300;color:var(--text);line-height:1;}
.admin-cost-inr{font-family:var(--serif);font-size:clamp(15px,1.6vw,20px);font-weight:300;color:var(--muted);margin-top:4px;font-style:italic;}

/* Section title */
.admin-section-title{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--dim);padding-top:8px;
  border-top:0.5px solid var(--bord);
}

/* Token row */
.admin-token-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.admin-token-item{padding:16px 0;}
.admin-token-num{
  font-family:var(--serif);font-size:clamp(20px,2.2vw,32px);
  font-weight:300;color:var(--acc);margin-bottom:4px;
}
.admin-token-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);}

/* Users table */
.admin-table-wrap{overflow-x:auto;}
.admin-table{
  width:100%;border-collapse:collapse;
  font-size:13px;
}
.admin-table th{
  text-align:left;font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);padding:10px 16px 10px 0;
  border-bottom:0.5px solid var(--bord);font-weight:400;
}
.admin-table td{
  padding:12px 16px 12px 0;color:var(--muted);
  border-bottom:0.5px solid rgba(240,237,230,0.05);
  font-family:var(--sans);font-size:13px;
}
.admin-table td:first-child{color:var(--text);}
.admin-table tr:hover td{background:var(--aglow);}

.admin-refresh-btn{
  align-self:flex-start;background:transparent;
  border:0.5px solid var(--bord);color:var(--dim);
  font-family:var(--sans);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;padding:10px 24px;cursor:pointer;
  transition:.3s;margin-bottom:40px;
}
.admin-refresh-btn:hover{border-color:var(--acc);color:var(--acc);}

@media(max-width:900px){
  .admin-layout{padding:52px 24px 0;}
  .admin-stats-row{grid-template-columns:repeat(2,1fr);}
  .admin-cost-row{grid-template-columns:repeat(2,1fr);}
  .admin-token-row{grid-template-columns:repeat(2,1fr);}
}

/* Sign out button */
.connect-header-row{
  display:flex;align-items:baseline;
  justify-content:space-between;margin-bottom:6px;
}
.signout-btn{
  background:none;border:none;
  color:var(--dim);font-family:var(--sans);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:color .3s;padding:0;
}
.signout-btn:hover{color:var(--acc);}

/* Auth gold glow */
.auth-glow{
  position:absolute;top:0;left:0;right:0;height:280px;
  background:radial-gradient(ellipse at 50% 0%,rgba(200,169,110,0.10) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
#s-auth{position:relative;overflow:hidden;}

/* Floating label fields */
.auth-field{
  width:100%;position:relative;margin-bottom:20px;
}
.auth-label{
  display:block;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--adim);margin-bottom:6px;
}
.auth-field .auth-input{
  margin-bottom:0;
}

/* Google button — more prominent, gold border */
.auth-google{
  width:100%;padding:14px;background:transparent;
  border:0.5px solid var(--bord3);color:var(--muted);
  font-family:var(--sans);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;transition:.3s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:4px;
}
.auth-google:hover{border-color:var(--acc);color:var(--text);}

/* ═══════════════════════════════════════
   DAILY ROOM — The home screen
═══════════════════════════════════════ */
#s-home{flex-direction:column;}
.home-layout{
  flex:1;display:grid;
  grid-template-columns:1fr 1fr;
  min-height:0;
}
.home-left{
  padding:60px 48px 40px 72px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  border-right:0.5px solid var(--bord);
}
.home-top{flex:1;display:flex;flex-direction:column;justify-content:center;}
.home-greeting{
  font-family:var(--sans);font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px;
}
.home-name{
  font-family:var(--serif);font-size:clamp(42px,7vw,96px);
  font-weight:300;color:var(--text);line-height:1;
  letter-spacing:-1px;margin-bottom:32px;
}
.home-mood-line{
  font-family:var(--serif);font-size:clamp(17px,1.8vw,24px);
  font-style:italic;color:var(--muted);line-height:1.6;
}
.home-actions{
  display:flex;align-items:center;gap:20px;
  padding-top:28px;border-top:0.5px solid var(--bord);
}
.home-action-primary{
  background:transparent;border:0.5px solid var(--bord3);
  color:var(--text);font-family:var(--sans);
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  padding:13px 32px;cursor:pointer;transition:.3s;
}
.home-action-primary:hover{border-color:var(--acc);color:var(--acc2);background:rgba(200,169,110,0.06);}
.home-action-secondary{
  background:none;border:none;color:var(--dim);
  font-family:var(--sans);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:color .3s;
}
.home-action-secondary:hover{color:var(--muted);}
.home-right{
  padding:60px 72px 40px 48px;
  display:flex;flex-direction:column;
  justify-content:space-between;
}
.home-streak-block{flex:1;display:flex;flex-direction:column;justify-content:center;}
.home-streak-row{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.home-streak-num{
  font-family:var(--serif);font-size:clamp(80px,12vw,160px);
  font-weight:300;color:var(--acc);line-height:1;letter-spacing:-4px;
}
.home-streak-lbl{
  font-family:var(--serif);font-size:clamp(18px,2vw,28px);
  font-style:italic;color:var(--dim);
}
.home-streak-sub{
  font-family:var(--serif);font-size:clamp(14px,1.4vw,19px);
  font-style:italic;color:var(--dim);margin-bottom:32px;
}
.home-wishlist-tease{
  border-top:0.5px solid var(--bord);padding-top:24px;
}
.home-wishlist-lbl{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--adim);margin-bottom:10px;
}
.home-wishlist-item{
  font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);
  font-style:italic;color:var(--muted);line-height:1.6;
  cursor:pointer;transition:color .3s;
}
.home-wishlist-item:hover{color:var(--text);}

@media(max-width:768px){
  .home-layout{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .home-left{padding:48px 24px 32px;border-right:none;border-bottom:0.5px solid var(--bord);}
  .home-right{padding:32px 24px 40px;}
  .home-streak-num{font-size:clamp(60px,18vw,100px);}
}