*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --void:#07090e;--deep:#0b0e16;--base:#0f1420;--surf:#141b28;--elev:#1a2235;--hover:#1f293f;
  --inp:#0c1018;--brd:rgba(100,180,255,.07);--brd2:rgba(100,180,255,.12);--brd3:rgba(100,180,255,.22);
  --h:#edf2ff;--p:#c2cee6;--s:#8294b0;--m:#526078;
  --cyan:#3ee8e0;--cyan2:#6ff0ea;--cyandim:#2ab5af;--cyanglow:rgba(62,232,224,.12);--cyanstr:rgba(62,232,224,.22);--cyanbright:rgba(62,232,224,.38);
  --coral:#ff6b6b;--coral2:#ff8f8f;--coraldim:#e05555;--coralglow:rgba(255,107,107,.12);--coralstr:rgba(255,107,107,.22);
  --violet:#a78bfa;--violetdim:rgba(167,139,250,.12);
  --green:#4ade80;--greendim:rgba(74,222,128,.12);
  --amber:#fbbf24;--amberdim:rgba(251,191,36,.12);
  --rose:#fb7185;--rosedim:rgba(251,113,133,.12);
  --sky:#38bdf8;--skydim:rgba(56,189,248,.12);
  --red:#ef4444;--reddim:rgba(239,68,68,.12);
  --star:#fbbf24;--starempty:#1e2636;
  --r:10px;--rl:14px;--rxl:18px;--r2xl:22px;
  --ease:cubic-bezier(.4,0,.2,1);--easeout:cubic-bezier(0,0,.2,1);
  --sidebar-w:240px;
}
body{font-family:'Nunito',sans-serif;background:var(--void);color:var(--p);min-height:100vh;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--void)}::-webkit-scrollbar-thumb{background:var(--brd3);border-radius:4px}
::selection{background:var(--cyan);color:#07090e}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes sd{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes si{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes scComplete{0%{opacity:0;transform:scale(.88) translateY(20px)}60%{transform:scale(1.03) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes iconPop{0%{transform:scale(0) rotate(-15deg)}50%{transform:scale(1.25) rotate(5deg)}70%{transform:scale(.95) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes streakGlow{0%,100%{box-shadow:0 0 10px rgba(62,232,224,.12)}50%{box-shadow:0 0 32px rgba(62,232,224,.28)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes rewardPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}60%{transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes progressFill{from{width:0%}to{width:var(--fill-w)}}
@keyframes nudgeIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes rewardShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes sidebarGlow{0%{background-position:0 0}100%{background-position:0 200%}}
@keyframes pulseOrb{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(100,180,255,.04) 2px,rgba(100,180,255,.04) 4px)}
.drag-over{border-color:var(--cyan)!important;background:var(--cyanglow)!important}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.6) sepia(.5) hue-rotate(160deg);cursor:pointer}
select option{background:var(--base);color:var(--h)}
.sidebar{position:relative}
.sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--cyan),var(--coral),var(--violet),transparent);background-size:100% 200%;animation:sidebarGlow 8s linear infinite;opacity:.5}
/* Sidebar glow orbs */
.sidebar-orb1{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(62,232,224,.07) 0%,transparent 70%);pointer-events:none;animation:pulseOrb 6s ease infinite}
.sidebar-orb2{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,107,.05) 0%,transparent 70%);pointer-events:none;animation:pulseOrb 8s ease infinite 2s}
/* ── MOBILE OVERRIDES ── */
@media(max-width:900px){
  .sidebar{display:none!important}
  .mob-head{display:flex!important}
  .mob-tab-bar{display:flex!important}
  .mob-drop{display:none!important}
  .main{margin-left:0!important;padding:66px 14px 82px!important;max-width:100%!important}
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .lib-grid{grid-template-columns:repeat(2,1fr)!important}
  .hero-stat-grid{grid-template-columns:repeat(3,1fr)!important}
  /* touch targets */
  button{min-height:36px}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .main{padding:62px 12px 76px!important}
  .hero-stat-grid{grid-template-columns:1fr 1fr!important}
}
@media(min-width:901px){
  .mob-head{display:none!important}
  .mob-drop{display:none!important}
  .mob-tab-bar{display:none!important}
}
/* Bottom tab bar */
.mob-tab-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--base);border-top:1px solid var(--brd2);
  display:none;align-items:stretch;height:58px;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mob-tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:4px 2px;background:none;border:none;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2px;
  text-transform:uppercase;color:var(--m);transition:color .15s;min-width:0;overflow:hidden;
}
.mob-tab-btn.active{color:var(--cyan)}
.mob-tab-btn .tab-ic{font-size:20px;line-height:1}
.mob-fab{
  flex:0 0 72px;display:flex;align-items:center;justify-content:center;
  position:relative;background:none;border:none;cursor:pointer;padding:0;
}
.mob-fab-inner{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--cyandim));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  box-shadow:0 0 0 3px var(--base),0 0 20px rgba(62,232,224,.35);
  transition:all .18s;
  position:relative;top:-12px;
}
.mob-fab:active .mob-fab-inner{transform:scale(.92);box-shadow:0 0 0 3px var(--base),0 0 32px rgba(62,232,224,.55)}
/* Session card actions always visible on touch */
@media(hover:none){
  .sess-actions{opacity:1!important}
  .ss-del-btn{opacity:1!important}
  .card-actions{opacity:1!important}
}
@media(hover:hover){
  .card-actions{opacity:0;transition:opacity .12s}
  .card-actions:focus-within,.card-actions:hover{opacity:1}
  .lib-card:hover .card-actions{opacity:1}
}
/* Bigger touch targets for star rating on mobile */
@media(max-width:900px){
  .star-btn{padding:4px!important}
}

/* ── SESSION TIMER WIDGET ── */
@keyframes timerPulse{0%,100%{box-shadow:0 0 0 0 rgba(62,232,224,.0),0 8px 40px rgba(0,0,0,.7)}50%{box-shadow:0 0 0 6px rgba(62,232,224,.12),0 8px 40px rgba(0,0,0,.7)}}
@keyframes timerSlideIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Knight walk cycle */
@keyframes knightWalk{0%,100%{transform:translateY(0) scaleX(1)}25%{transform:translateY(-3px) scaleX(1)}50%{transform:translateY(0) scaleX(1)}75%{transform:translateY(-2px) scaleX(1)}}
/* Sword swing */
@keyframes swordSwing{0%,100%{transform:rotate(-20deg) translateY(0)}50%{transform:rotate(15deg) translateY(-4px)}}
/* Dragon tail/body sway */
@keyframes dragonSway{0%,100%{transform:scaleX(-1) translateY(0)}40%{transform:scaleX(-1) translateY(-4px)}70%{transform:scaleX(-1) translateY(-2px)}}
/* Dragon flame flicker */
@keyframes flameFlicker{0%,100%{opacity:1;transform:scaleX(.9) scaleY(1)}30%{opacity:.7;transform:scaleX(1.1) scaleY(.85)}60%{opacity:.9;transform:scaleX(.95) scaleY(1.1)}}
/* Impact spark */
@keyframes spark{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}
/* Shield flash */
@keyframes shieldFlash{0%,100%{opacity:.7}50%{opacity:1}}
/* Timer colon blink */
@keyframes colonBlink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.timer-widget{
  position:fixed;bottom:24px;right:20px;z-index:1200;
  animation:timerSlideIn .38s cubic-bezier(.34,1.56,.64,1) both;
  max-width:calc(100vw - 24px);
}
@media(max-width:900px){
  .timer-widget{bottom:70px;right:12px;max-width:calc(100vw - 24px)}
}

@keyframes scaleIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.skeleton{animation:pulse 1.5s ease infinite;background:var(--elev);border-radius:6px}
/* Hide scrollbar on horizontally scrollable rows */
[style*="overflowX: auto"]::-webkit-scrollbar,
[style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }

/* ═══ JOURNAL ENTRY THEMES ═══ */

/* ── Parchment (Fantasy Paper) ── */
.jt-parchment {
  background: linear-gradient(160deg,#2a1f0e,#1e1608) !important;
  border: 1px solid #8b6914 !important;
  border-left: 3px solid #c49a1a !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 60px rgba(0,0,0,.4), 0 2px 12px rgba(0,0,0,.5) !important;
  position: relative;
}
.jt-parchment::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity: .35;
}
.jt-parchment .jt-date { color: #c49a1a !important; font-family: 'Rajdhani', serif !important; letter-spacing: 1px; }
.jt-parchment .jt-notes { color: #d4b483 !important; font-family: 'Nunito', serif !important; font-style: italic !important; line-height: 1.9 !important; }
.jt-parchment .jt-hours { background: rgba(196,154,26,.15) !important; border: 1px solid rgba(196,154,26,.3) !important; color: #c49a1a !important; }
.jt-parchment .jt-meta { color: #a07830 !important; }
.jt-parchment-input {
  background: linear-gradient(160deg,#2a1f0e,#1e1608) !important;
  border-color: #8b6914 !important;
  color: #d4b483 !important;
  font-family: 'Nunito', serif !important;
  font-style: italic;
  line-height: 1.9 !important;
}
.jt-parchment-input::placeholder { color: #7a5c2a !important; font-style: italic; }
.jt-parchment-input:focus { border-color: #c49a1a !important; box-shadow: 0 0 0 3px rgba(196,154,26,.15) !important; }

/* ── Cyberpunk (Neon) ── */
.jt-cyberpunk {
  background: linear-gradient(160deg,#050b14,#08111e) !important;
  border: 1px solid rgba(0,255,200,.2) !important;
  border-left: 3px solid #00ffc8 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(0,255,200,.06), inset 0 0 40px rgba(0,0,0,.6) !important;
  position: relative;
  overflow: hidden;
}
.jt-cyberpunk::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,#00ffc8,#ff00ff,transparent);
  opacity: .5;
}
.jt-cyberpunk .jt-date { color: #00ffc8 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase; }
.jt-cyberpunk .jt-notes { color: #a0ffee !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; line-height: 1.8 !important; }
.jt-cyberpunk .jt-hours { background: rgba(0,255,200,.08) !important; border: 1px solid rgba(0,255,200,.25) !important; color: #00ffc8 !important; font-family: 'IBM Plex Mono', monospace !important; }
.jt-cyberpunk .jt-meta { color: #4a8080 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.jt-cyberpunk-input {
  background: linear-gradient(160deg,#050b14,#08111e) !important;
  border-color: rgba(0,255,200,.25) !important;
  color: #a0ffee !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 13px !important;
  caret-color: #00ffc8;
}
.jt-cyberpunk-input::placeholder { color: #1a4040 !important; }
.jt-cyberpunk-input:focus { border-color: rgba(0,255,200,.6) !important; box-shadow: 0 0 0 3px rgba(0,255,200,.08), 0 0 20px rgba(0,255,200,.08) !important; }

/* ── Typewriter (Monospace Noir) ── */
.jt-typewriter {
  background: #0e0e0e !important;
  border: 1px solid #2a2a2a !important;
  border-left: 3px solid #888 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.jt-typewriter::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(255,255,255,.014) 28px,rgba(255,255,255,.014) 29px);
}
.jt-typewriter .jt-date { color: #bbb !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; letter-spacing: .5px; }
.jt-typewriter .jt-notes { color: #d0d0d0 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 13.5px !important; line-height: 2 !important; }
.jt-typewriter .jt-hours { background: rgba(255,255,255,.06) !important; border: 1px solid #333 !important; color: #aaa !important; font-family: 'IBM Plex Mono', monospace !important; }
.jt-typewriter .jt-meta { color: #555 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.jt-typewriter-input {
  background: #0e0e0e !important;
  border-color: #2a2a2a !important;
  color: #d0d0d0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 13.5px !important;
  line-height: 2 !important;
  border-radius: 0 !important;
  caret-color: #fff;
}
.jt-typewriter-input::placeholder { color: #333 !important; }
.jt-typewriter-input:focus { border-color: #555 !important; box-shadow: none !important; }

/* ══════════════════════════════════════════
   PREMIUM UI UPGRADES
   ══════════════════════════════════════════ */

/* ── Buttons ── */
.btn-primary{will-change:transform;transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s!important}
.btn-primary:not(:disabled):hover{transform:translateY(-1px)!important;box-shadow:0 0 32px rgba(62,232,224,.3),0 6px 20px rgba(0,0,0,.3)!important}
.btn-primary:not(:disabled):active{transform:translateY(0) scale(.97)!important;box-shadow:0 0 16px rgba(62,232,224,.18)!important}
.btn-ghost{transition:all .15s var(--ease)!important}
.btn-ghost:not(:disabled):hover{border-color:var(--brd3)!important;color:var(--h)!important;background:var(--elev)!important}
.btn-ghost:not(:disabled):active{transform:scale(.97)!important}
.btn-danger:not(:disabled):hover{filter:brightness(1.15)!important;transform:translateY(-1px)!important}
.btn-danger:not(:disabled):active{transform:scale(.97)!important}
.btn-accent:not(:disabled):hover{background:rgba(62,232,224,.2)!important;border-color:rgba(62,232,224,.35)!important}

/* ── Inputs ── */
input:not([type=date]):not([type=number]):not([type=checkbox]):focus,
textarea:focus{transform:scale(1.002);transform-origin:left center;transition:transform .15s var(--ease),border-color .15s,box-shadow .15s}

/* ── Library grid cards ── */
.lib-card{will-change:transform,box-shadow;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s!important}
.lib-card:hover{transform:translateY(-4px)!important;box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 0 1px var(--brd3)!important}
.lib-card:active{transform:translateY(-2px) scale(.99)!important}
.lib-card .cover-frame::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:inherit;pointer-events:none;z-index:2}

/* ── Library list cards ── */
.lib-list-card{will-change:transform;transition:transform .15s var(--ease),background .12s,border-color .12s!important}
.lib-list-card:hover{transform:translateX(3px)!important;background:var(--hover)!important;border-color:var(--brd3)!important}

/* ── Session cards ── */
.sess-card{will-change:transform,box-shadow;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .15s!important}
.sess-card:hover{transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(0,0,0,.3)!important}
.sess-card:hover .sess-expand-hint{opacity:1!important}
.sess-card.expanded{transform:none!important;box-shadow:0 4px 24px rgba(0,0,0,.2)!important}
.sess-expand-hint{opacity:.5;transition:opacity .15s!important}

/* ── Journal cards ── */
.journal-card{will-change:transform,box-shadow;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .15s!important}
.journal-card:hover{transform:translateY(-2px)!important;box-shadow:0 6px 24px rgba(0,0,0,.28)!important;border-color:var(--brd3)!important}
.journal-game-row{transition:box-shadow .15s,border-color .15s!important}
.journal-game-row:hover{box-shadow:0 4px 20px rgba(0,0,0,.25)!important;border-color:var(--brd3)!important}
.journal-month-label{position:relative}
.journal-month-label::after{content:'';position:absolute;bottom:-2px;left:0;width:28px;height:2px;background:var(--cyan);border-radius:2px}

/* ── Status pulse ── */
@keyframes playingPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.35)}60%{box-shadow:0 0 0 5px rgba(74,222,128,0)}}
.status-playing{animation:playingPulse 2.8s ease infinite!important}

/* ── Progress bar shimmer ── */
@keyframes playingShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.progress-playing{background:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 50%,var(--cyan) 100%)!important;background-size:200% 100%!important;animation:playingShimmer 2.5s linear infinite!important}

/* ── Skeleton ── */
@keyframes skelShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel,.skeleton{background:linear-gradient(90deg,var(--elev) 25%,var(--hover) 50%,var(--elev) 75%)!important;background-size:800px 100%!important;animation:skelShimmer 1.4s ease infinite!important;border-radius:8px}

/* ── Toast ── */
.toast-premium{border-left:3px solid var(--cyan)!important;border-top:1px solid rgba(62,232,224,.3)!important;border-right:1px solid rgba(62,232,224,.15)!important;border-bottom:1px solid rgba(62,232,224,.15)!important;border-radius:var(--rl)!important;min-width:260px;padding:13px 24px 13px 18px!important}

/* ── Tabs ── */
.tab-btn{transition:color .15s,background .15s!important}
.tab-btn:not(.tab-active):hover{color:var(--s)!important;background:var(--elev)!important;border-radius:var(--r) var(--r) 0 0!important}

/* ── Stat numbers ── */
.hero-num{font-size:clamp(32px,7vw,44px)!important}
.mini-num{font-size:clamp(20px,5vw,26px)!important}
.stat-tile-num{font-size:clamp(26px,5vw,36px)!important}
.stat-tile{will-change:transform,box-shadow;transition:transform .18s var(--ease),box-shadow .18s var(--ease)!important}
.stat-tile:hover{transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(0,0,0,.3)!important}

/* ── Page transitions ── */
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.page-detail{animation:slideInRight .28s var(--ease) both!important}

/* ── Sidebar nav ── */
.nav-item{transition:all .12s var(--ease)!important}
.nav-item:hover:not(.nav-active){transform:translateX(2px)!important}
.sidebar-divider{height:1px;background:linear-gradient(90deg,transparent,var(--brd2),transparent);margin:12px 0}
/* Sidebar action buttons (Quick Log, Add Game) */
.sidebar-action{will-change:transform;transition:transform .15s var(--ease),box-shadow .15s!important}
.sidebar-action:hover{transform:translateY(-1px)!important;box-shadow:0 4px 16px rgba(0,0,0,.3)!important}
.sidebar-action:active{transform:scale(.97)!important}
/* Sidebar profile card */
.sidebar-profile{transition:background .12s,border-color .12s!important}
.sidebar-profile:hover{background:var(--hover)!important;border-color:var(--brd2)!important}

/* ── Quick Log save ── */
.ql-save-btn{will-change:transform;transition:transform .18s var(--ease),box-shadow .18s var(--ease)!important}
.ql-save-btn:not(:disabled):hover{transform:translateY(-1px)!important;box-shadow:0 0 32px rgba(62,232,224,.28),0 6px 20px rgba(0,0,0,.3)!important}
.ql-save-btn:not(:disabled):active{transform:scale(.97)!important}

/* ── Emotion picker ── */
.emo-btn{will-change:transform;transition:transform .15s var(--ease),box-shadow .15s,border-color .12s,background .12s!important}
.emo-btn:hover{transform:scale(1.06)!important}
.emo-btn.selected{transform:scale(1.04)!important}
/* Emotion chips in session cards */
.emo-chip{transition:transform .12s,filter .12s!important;cursor:default}
.emo-chip:hover{transform:scale(1.06)!important;filter:brightness(1.1)!important}

/* ── Screenshot thumbnails ── */
.ss-thumb{transition:transform .2s var(--ease),box-shadow .2s!important;overflow:hidden}
.ss-thumb:hover{transform:scale(1.03)!important;box-shadow:0 8px 24px rgba(0,0,0,.5)!important}
.ss-thumb:hover .ss-del-btn{opacity:1!important}
.ss-del-btn{transition:opacity .15s!important}
/* Drop zone hover */
.drop-zone{transition:border-color .15s,background .15s,transform .15s!important}
.drop-zone:hover{border-color:var(--cyan)!important;background:var(--cyanglow)!important;transform:scale(1.005)!important}

/* ── EmptyState ── */
@keyframes emptyFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}
.empty-icon{animation:emptyFloat 3.5s ease infinite!important}
.empty-action-btn{transition:all .15s var(--ease)!important}
.empty-action-btn:hover{background:rgba(62,232,224,.2)!important;border-color:rgba(62,232,224,.4)!important;transform:translateY(-1px)!important}
.empty-action-btn:active{transform:scale(.97)!important}

/* ── GlobalSearch ── */
.search-result-row{transition:background .1s,padding-left .12s!important}
.search-result-row:hover{background:var(--surf)!important;padding-left:24px!important}
.search-input-wrap:focus-within{box-shadow:inset 0 0 0 1px rgba(62,232,224,.25)!important}

/* ── Milestone cards ── */
.milestone-card{will-change:transform,box-shadow;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s!important}
.milestone-card:hover{transform:translateY(-3px)!important;box-shadow:0 12px 36px rgba(0,0,0,.35)!important}
.milestone-card.done:hover{box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 24px rgba(74,222,128,.12)!important}
@keyframes iconBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.94)}}
.milestone-icon-wrap{transition:transform .2s var(--ease)!important}
.milestone-card:hover .milestone-icon-wrap{animation:iconBounce .5s var(--ease) both!important}
.icon-picker-btn{transition:transform .12s var(--ease),border-color .12s,background .12s!important}
.icon-picker-btn:hover{transform:scale(1.18)!important}
.icon-picker-btn.selected{transform:scale(1.1)!important}

/* ── Stats insights ── */
.insight-chip{transition:transform .15s var(--ease),background .15s,border-color .15s!important}
.insight-chip:hover{transform:translateY(-1px) scale(1.02)!important;background:var(--hover)!important;border-color:var(--brd2)!important}

/* ── Profile ── */
.profile-banner{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s!important}
.profile-banner:hover{transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(0,0,0,.28)!important}
.avatar-btn{transition:transform .12s var(--ease),border-color .12s,background .12s!important}
.avatar-btn:hover{transform:scale(1.15)!important}
.avatar-btn.selected{transform:scale(1.1)!important}

/* ── View toggle buttons in Library ── */
.view-toggle-btn{transition:all .12s var(--ease)!important}
.view-toggle-btn:hover{border-color:var(--cyan)!important;color:var(--cyan)!important;background:var(--cyanglow)!important}

/* ══════════════════════════════════════════════════════
   VISIBLE RESTING-STATE UPGRADES
   These change how the app looks before you touch it.
   ══════════════════════════════════════════════════════ */

/* ── 1. Sidebar sits on a darker layer ── */
.sidebar{background:var(--deep)!important}

/* ── 2. Active nav item gets a left-border accent ── */
.nav-active{
  border-left:2px solid var(--cyan)!important;
  padding-left:14px!important;
}

/* ── 3. Cards have a resting shadow — they float off the page ── */
.lib-card,
.sess-card,
.journal-card,
.journal-game-row,
.milestone-card,
.stat-tile {
  box-shadow:0 2px 12px rgba(0,0,0,.45),0 0 0 1px rgba(100,180,255,.07)!important;
}

/* ── 4. Primary button glows at rest ── */
.btn-primary{
  box-shadow:0 0 18px rgba(62,232,224,.22),0 2px 8px rgba(0,0,0,.3)!important;
}
.btn-primary:not(:disabled):hover{
  box-shadow:0 0 36px rgba(62,232,224,.5),0 6px 20px rgba(0,0,0,.35)!important;
  transform:translateY(-1px)!important;
}

/* ── 5. Page h1 titles are heavier and tighter ── */
h1{font-weight:900!important;letter-spacing:-.5px!important}


@keyframes trophyBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}40%{transform:scale(1.3) rotate(5deg);opacity:1}60%{transform:scale(.9) rotate(-3deg)}80%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}