:root{
  --bg1:#1a1030;
  --bg2:#2d1b4e;
  --accent:#ff5e8a;
  --accent2:#7c4dff;
  --ink:#f4eeff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(124,77,255,0.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255,94,138,0.30), transparent 50%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment:fixed;
  min-height:100vh;
}

/* HEADER */
.header-glass{
  background:rgba(26,16,48,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-glass{
  background:rgba(26,16,48,0.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,0.1);
  box-shadow:0 -8px 30px rgba(0,0,0,0.4);
}

/* AVATAR */
.avatar-pop{animation:pop 0.4s ease;}
@keyframes pop{0%{transform:scale(0.6) rotate(-8deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}

/* LOG ENTRIES */
.log-entry{
  background:rgba(255,255,255,0.05);
  border-left:3px solid rgba(255,255,255,0.15);
  animation:slideIn 0.35s ease;
  line-height:1.4;
}
@keyframes slideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.tone-good{border-left-color:#4ade80;background:rgba(74,222,128,0.08);}
.tone-sad{border-left-color:#f87171;background:rgba(248,113,113,0.10);}
.tone-funny{border-left-color:#fbbf24;background:rgba(251,191,36,0.08);}
.tone-neutral{border-left-color:#60a5fa;background:rgba(96,165,250,0.06);}

/* NAV BUTTONS */
.nav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 2px;border-radius:12px;color:var(--ink);
  background:rgba(255,255,255,0.04);border:none;cursor:pointer;
  transition:all 0.15s;
}
.nav-btn:active{transform:scale(0.92);background:rgba(255,255,255,0.14);}

.age-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-radius:16px;border:none;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  box-shadow:0 6px 20px rgba(255,94,138,0.45);
  transition:transform 0.1s;
  animation:glow 2.5s ease-in-out infinite;
}
.age-btn:active{transform:scale(0.97);}
@keyframes glow{0%,100%{box-shadow:0 6px 20px rgba(255,94,138,0.4);}50%{box-shadow:0 6px 32px rgba(124,77,255,0.6);}}

/* MODALS */
.modal-back{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(10,5,25,0.7);backdrop-filter:blur(4px);
  animation:fade 0.2s ease;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal-sheet, .modal-card{
  width:100%;max-width:28rem;
  background:linear-gradient(160deg,#2a1a4a,#1d1236);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px 24px 0 0;
  padding:20px;max-height:82vh;overflow-y:auto;
  animation:slideUp 0.3s cubic-bezier(.2,.8,.2,1);
}
.modal-card{border-radius:24px;margin:auto;align-self:center;max-height:90vh;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}

.choice-btn{
  width:100%;text-align:left;padding:13px 16px;border-radius:14px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
  color:var(--ink);font-family:inherit;font-size:0.95rem;font-weight:600;
  cursor:pointer;transition:all 0.15s;
}
.choice-btn:active{transform:scale(0.98);background:rgba(255,255,255,0.16);}

.rel-card{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:var(--ink);font-family:inherit;cursor:pointer;transition:all 0.15s;
}
.rel-card:active{transform:scale(0.98);}

.stat-box{
  background:rgba(255,255,255,0.06);
  padding:8px 10px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;
}

.tomb{animation:tombDrop 0.6s cubic-bezier(.3,1.4,.5,1);}
@keyframes tombDrop{0%{transform:translateY(-40px) scale(0.5);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}}

/* scrollbar */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}