/* ==========================================================================
   HitityWithARat — Site Styles
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #000000;
  --card-bg:     rgba(20, 20, 26, 0.72);
  --card-border: rgba(255,255,255,0.08);
  --text:        #ffffff;
  --text-sub:    #92929a;
  --text-muted:  #60606a;

  --nav-bg:      rgba(22,22,28,0.45);
  --nav-border:  rgba(255,255,255,0.09);

  --font-title:  'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --ease:        cubic-bezier(0.16,1,0.3,1);
}

/* ── Light mode overrides ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f0f0f3;
  --card-bg:     rgba(255,255,255,0.82);
  --card-border: rgba(0,0,0,0.09);
  --text:        #111114;
  --text-sub:    #606068;
  --text-muted:  #9898a2;
  --nav-bg:      rgba(230,230,236,0.65);
  --nav-border:  rgba(0,0,0,0.1);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background-color:var(--bg) !important;
  color:var(--text);
  font-family:var(--font-sans);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-font-smoothing:antialiased;
}

.hidden{display:none !important;}

/* ── Theme toggle ────────────────────────────────────────────────────── */
.theme-toggle-btn{
  position:fixed;top:20px;right:20px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(24,24,30,0.55);
  border:1px solid rgba(255,255,255,0.09);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(16px);
  transition:transform .3s var(--ease),border-color .3s,background .3s;
  z-index:100;
}
[data-theme="light"] .theme-toggle-btn{
  background:rgba(220,220,226,0.7);
  border-color:rgba(0,0,0,0.1);
}
.theme-toggle-btn:hover{transform:scale(1.08);}

/* ── Main wrapper ────────────────────────────────────────────────────── */
.main-wrapper{
  position: relative;
  z-index: 10;
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top: max(36px, calc(50vh - 160px));
  padding-bottom:60px;
  transition:padding-top .5s var(--ease);
}
.main-wrapper.panel-open{
  padding-top:32px;
}

/* ── Profile header ──────────────────────────────────────────────────── */
.profile-header{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-bottom:24px;
}

.avatar-container{margin-bottom:16px;}

.avatar-ring{
  width:110px;height:110px;
  border-radius:50%;padding:3px;
  background:linear-gradient(135deg,#e6c875,#4ecdc4,#5562ea);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(78,205,196,0.14);
  transition:width .5s var(--ease),height .5s var(--ease),padding .5s var(--ease);
}
.avatar-ring.shrunk{width:88px;height:88px;padding:2px;}

.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#121316;}

.profile-name{
  font-family:var(--font-title);
  font-size:2.2rem;font-weight:800;color:var(--text);
  letter-spacing:-0.025em;margin-bottom:6px;
  transition:font-size .5s var(--ease),margin-bottom .5s var(--ease);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.profile-name.shrunk{font-size:1.85rem;margin-bottom:4px;}

.profile-subtext{
  font-size:0.92rem;color:var(--text-sub);font-weight:400;letter-spacing:-0.01em;
  transition:font-size .5s var(--ease),opacity .5s var(--ease);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.profile-subtext.shrunk{font-size:0.86rem;opacity:.9;}

[data-theme="light"] .profile-name,
[data-theme="light"] .profile-subtext,
[data-theme="light"] .footer-subtext{text-shadow:none;}

/* ── Liquid glass navbar ─────────────────────────────────────────────── */
.nav-pill-container{
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.11),0 8px 24px rgba(0,0,0,0.45);
  border-radius:999px;
  padding:5px;
  margin-bottom:22px;
}
[data-theme="light"] .nav-pill-container{
  box-shadow:none;
}
.nav-pills-track{display:flex;align-items:center;gap:2px;}

.nav-pill-btn{
  background:transparent;border:1px solid transparent;
  color:rgba(255,255,255,0.52);
  padding:8px 22px;
  font-size:0.9rem;font-weight:500;font-family:inherit;
  border-radius:999px;cursor:pointer;
  transition:color .2s,background-color .2s,border-color .2s;
}
[data-theme="light"] .nav-pill-btn{color:rgba(0,0,0,0.45);}
.nav-pill-btn:hover{color:var(--text);background:rgba(255,255,255,0.06);}
[data-theme="light"] .nav-pill-btn:hover{background:rgba(0,0,0,0.05);}
.nav-pill-btn.active{
  color:var(--text);
  background:rgba(255,255,255,0.11);
  border-color:rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.18);
  font-weight:600;
}
[data-theme="light"] .nav-pill-btn.active{
  background:rgba(0,0,0,0.07);
  border-color:rgba(0,0,0,0.12);
}

/* ── Accordion ───────────────────────────────────────────────────────── */
.accordion-container{
  width:100%;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.accordion-container.expanded{grid-template-rows:1fr;}
.accordion-inner{overflow:hidden;}

/* ── Glass card ──────────────────────────────────────────────────────── */
.glass-card{
  width:520px;max-width:100%;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 40px rgba(0,0,0,0.65);
  margin-bottom:20px;
}
.panel-content{animation:fadeIn .25s ease forwards;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
[data-theme="light"] .glass-card{
  box-shadow:none;
}

.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-title{font-size:1.05rem;font-weight:700;color:var(--text);}
.card-badge,.card-count-badge{font-size:0.78rem;font-family:var(--font-mono);color:var(--text-muted);}

/* Biography */
.bio-inner-box{
  border:1px dashed rgba(255,255,255,0.13);border-radius:12px;
  padding:16px;background:rgba(0,0,0,0.22);
}
[data-theme="light"] .bio-inner-box{
  border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.03);
}
.bio-text{font-size:0.88rem;line-height:1.55;color:#a2a2ae;font-style:italic;margin-bottom:14px;}
[data-theme="light"] .bio-text{color:#5a5a68;}
.bio-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.bio-tag{
  font-size:0.75rem;font-family:var(--font-mono);color:var(--text-muted);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.05);
  padding:4px 10px;border-radius:999px;
}
[data-theme="light"] .bio-tag{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.07);}
.bio-footer-note{font-size:0.72rem;color:#4c4c56;font-family:var(--font-mono);}

/* Socials — internal scroll */
.socials-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:280px;
  overflow-y:auto;
  padding-right:4px;
}
.socials-list::-webkit-scrollbar{width:4px;}
.socials-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16);border-radius:4px;}
[data-theme="light"] .socials-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.14);}

.social-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;
  border-bottom:1px solid rgba(255,255,255,0.035);
  cursor:pointer;
  transition:background-color .2s,transform .2s;
}
[data-theme="light"] .social-item{border-bottom-color:rgba(0,0,0,0.04);}
.social-item:hover{background:rgba(255,255,255,0.045);transform:translateX(3px);}
[data-theme="light"] .social-item:hover{background:rgba(0,0,0,0.04);}
.social-icon-box{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-sub);flex-shrink:0;}
.social-info{display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.social-name{font-size:0.9rem;font-weight:600;color:var(--text);}
.social-handle{font-size:0.76rem;font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Quotes carousel */
.quotes-box{
  display:flex;flex-direction:column;align-items:center;
  min-height:120px;
}
.quote-slide{
  width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:fadeIn .3s ease forwards;
}
#quote-pfp{
  width:64px;height:64px;border-radius:50%;
  object-fit:cover;
  background:#121316;
  margin-bottom:10px;
  border:2px solid rgba(255,255,255,0.1);
}
[data-theme="light"] #quote-pfp{border-color:rgba(0,0,0,0.1);}
.quote-avatar-fallback{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#e6c875,#4ecdc4,#5562ea);
  color:#fff;font-size:1.4rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.quote-text{
  font-size:0.88rem;line-height:1.5;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
  margin-bottom:8px;
}
.quote-author{font-size:0.78rem;font-family:var(--font-mono);color:var(--text-sub);}
.quote-image{max-width:100%;max-height:260px;border-radius:8px;display:block;margin:0 auto 8px;}
.quotes-nav{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:12px;
}
.quote-nav-btn{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);
  color:var(--text);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s;
}
[data-theme="light"] .quote-nav-btn{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.1);}
.quote-nav-btn:hover{background:rgba(255,255,255,0.16);}
[data-theme="light"] .quote-nav-btn:hover{background:rgba(0,0,0,0.12);}
.quote-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:180px;}
.quote-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.2);cursor:pointer;
  transition:background-color .2s;
}
[data-theme="light"] .quote-dot{background:rgba(0,0,0,0.2);}
.quote-dot.active{background:#4ecdc4;}

/* Settings — toggles */
.settings-list{display:flex;flex-direction:column;gap:2px;}
.setting-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px;border-radius:8px;
  border-bottom:1px solid rgba(255,255,255,0.035);
}
[data-theme="light"] .setting-item{border-bottom-color:rgba(0,0,0,0.04);}
.setting-item:hover{background:rgba(255,255,255,0.045);}
[data-theme="light"] .setting-item:hover{background:rgba(0,0,0,0.04);}
.setting-label{font-size:0.9rem;font-weight:600;color:var(--text);}
.setting-toggle{
  width:44px;height:26px;border-radius:999px;border:none;
  background:rgba(255,255,255,0.14);
  position:relative;cursor:pointer;
  transition:background-color .2s;
  flex-shrink:0;
}
[data-theme="light"] .setting-toggle{background:rgba(0,0,0,0.18);}
.setting-toggle .setting-toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  transition:transform .2s var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
}
[data-theme="light"] .setting-toggle .setting-toggle-thumb{background:#fff;}
.setting-toggle.on{background:#34c759;}
.setting-toggle.on .setting-toggle-thumb{transform:translateX(18px);}

/* Footer */
.page-footer{margin-top:2px;text-align:center;}
.footer-subtext{font-size:0.78rem;color:#787885;font-weight:500;text-shadow:0 1px 5px rgba(0,0,0,0.8);}
[data-theme="light"] .footer-subtext{color:#9090a0;}

/* ── Mac windows ─────────────────────────────────────────────────────── */
#mac-windows-desktop{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:1000;
}

.mac-window{
  position:absolute;
  background:rgba(16,16,20,0.97);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:10px;
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  box-shadow:
    0 24px 54px rgba(0,0,0,0.85),
    0  6px 20px rgba(0,0,0,0.55),
    0  1px  0   rgba(255,255,255,0.06) inset;
  pointer-events:auto;
  display:flex;flex-direction:column;overflow:hidden;
  animation:openWin .3s var(--ease) forwards;
  transition:opacity .22s,transform .22s;
}
@keyframes openWin{
  from{opacity:0;transform:scale(0.93) translateY(8px);}
  to  {opacity:1;transform:scale(1)    translateY(0);}
}

.mac-window-header{
  height:28px;padding:0 12px;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.07);
  cursor:grab;user-select:none;
  background:rgba(20,20,26,0.96);
  position:relative;
}
.mac-window-header:active{cursor:grabbing;}

.mac-window-body{
  background:rgba(4,4,6,0.99);
  padding:14px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

[data-theme="light"] .mac-window{
  background:rgba(255,255,255,0.97);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow:
    0 20px 44px rgba(0,0,0,0.25),
    0  4px 14px rgba(0,0,0,0.12),
    0  1px  0   rgba(255,255,255,0.7) inset;
}
[data-theme="light"] .mac-window-header{
  background:rgba(245,245,248,0.96);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .mac-window-body{background:rgba(255,255,255,0.99);}
[data-theme="light"] .mac-window-title{color:#6a6a74;}

.mac-traffic-lights{display:flex;align-items:center;gap:6px;}
.mac-dot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;transition:filter .2s;}
.mac-dot-close   {background:#ff5f56;}
.mac-dot-minimize{background:#ffbd2e;}
.mac-dot-maximize{background:#27c93f;}
.mac-dot:hover{filter:brightness(1.2);}

.mac-window-title{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:0.75rem;font-family:var(--font-mono);color:#6a6a74;
  pointer-events:none;
}

/* Social popup */
.social-popup-icon-container{
  width:50px;height:50px;border-radius:12px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.social-popup-icon-container svg{width:24px;height:24px;color:#fff;}
.social-popup-title {font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:2px;}
.social-popup-handle{font-size:0.78rem;font-family:var(--font-mono);color:var(--text-sub);margin-bottom:14px;}
.social-popup-actions{display:flex;gap:8px;width:100%;}

.btn-mac-action{
  flex:1;padding:8px 12px;border-radius:8px;
  font-size:0.82rem;font-weight:500;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background-color .2s;
}
.btn-mac-cancel{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.09);color:#fff;}
.btn-mac-cancel:hover{background:rgba(255,255,255,0.13);}

[data-theme="light"] .social-popup-icon-container svg{color:#111;}
[data-theme="light"] .social-popup-title{color:#111;}
[data-theme="light"] .btn-mac-cancel{background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.12);color:#111;}
[data-theme="light"] .btn-mac-cancel:hover{background:rgba(0,0,0,0.1);}
.btn-mac-open  {background:#fff;border:none;color:#000;font-weight:700;}
.btn-mac-open:hover{background:#e4e4e4;}

/* Arch window content */
.arch-window-content{padding:10px 20px;font-size:0.9rem;font-weight:500;color:#fff;text-align:center;width:100%;}
[data-theme="light"] .arch-window-content{color:#111;}

/* Popup image window content */
.popup-img{
  width:100%;
  max-width:230px;
  border-radius:12px;
  display:block;
  object-fit:cover;
}

/* ── Rainbow Splat Event Overlay ─────────────────────────────────────── */
.rainbow-splat-overlay {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  width: 75vw;
  max-width: 800px;
  transform: translate(-50%, -50%);
  transition: opacity 1.5s var(--ease);
  opacity: 1;
  filter: drop-shadow(0 15px 35px rgba(0,0,0,0.8));
}
.rainbow-splat-overlay.fade-out {
  opacity: 0;
}

/* ── Smaller Random Flying Spinning Images ───────────────────────────── */
.flying-spin-image {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  width: 200px;
  height: 200px;
  max-width: 30vw;
  max-height: 30vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.85));
  will-change: transform, opacity;
}

/* ── Unclosable Video Modal Window ───────────────────────────────────── */
.video-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw;
  max-width: 920px;
  z-index: 10000;
  pointer-events: auto;
}
.video-element {
  width: 100%;
  max-height: 75vh;
  border-radius: 0 0 10px 10px;
  background: #000;
  display: block;
}

/* ── Credits Screen (5-minute timeout) ───────────────────────────────── */
#credits-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
#credits-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#credits-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
}

.credits-text-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px;
  pointer-events: none;
}

.credits-main {
  font-family: 'Boogaloo', cursive;
  font-size: clamp(2rem, 6vw, 5rem);
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 20px rgba(255,50,50,0.9),
    0 4px 20px rgba(0,0,0,0.9);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 2s ease 1s, transform 2s ease 1s;
  line-height: 1.15;
  max-width: 800px;
}

.credits-sub {
  font-family: 'Boogaloo', cursive;
  font-size: clamp(1rem, 3vw, 2.2rem);
  color: #ffcc00;
  text-shadow: 0 0 14px rgba(255,180,0,0.8), 0 3px 14px rgba(0,0,0,0.9);
  margin-top: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2s ease 2.2s, transform 2s ease 2.2s;
}

.credits-text-wrap.animate .credits-main,
.credits-text-wrap.animate .credits-sub {
  opacity: 1;
  transform: none;
}

/* ── Spooky Overlay ──────────────────────────────────────────────────── */
#spooky-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#spooky-overlay img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  display: block;
}

/* ── IP Popup (light mode) ───────────────────────────────────────────── */
.ip-popup-value {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  word-break: break-all;
}
[data-theme="light"] .ip-popup-value{color:#111;}

/* ── Gaster easter egg ───────────────────────────────────────────────── */
.gaster-msg{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:6px 4px;
}
.gaster-line{font-size:0.82rem;font-family:var(--font-mono);color:#cfcfcf;line-height:1.4;}
.gaster-big{
  font-size:1.25rem;font-weight:700;letter-spacing:0.14em;
  color:#fff;
  animation:gasterFlicker 0.5s steps(2) infinite;
}
.gaster-dim{color:#7a7a84;font-size:0.72rem;}
@keyframes gasterFlicker{
  0%{opacity:1;}
  50%{opacity:0.35;}
  100%{opacity:1;}
}
[data-theme="light"] .gaster-line{color:#333;}
[data-theme="light"] .gaster-big{color:#000;}
[data-theme="light"] .gaster-dim{color:#666;}