@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══ Variables ═══ */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-main:    #ffffff;
  --text-sub:     #a0aab8;
  --text-muted:   #5a6578;
  --text-hidden:  #222222;

  --border:       rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
  --card-bg:      rgba(8, 10, 14, 0.94);

  --hint-color:   #3e4856;
  --btn-color:    #5a6578;
  --tag-color:    #828d9e;
  --story-color:  #b8c2d0;
  --card-sub:     #5a6578;
  --quote-label:  #3e4856;
  --thought-color:#5a6578;
  --tg-color:     #828d9e;
  --status-online:#10b981;
  --status-recent:#64748b;
  --status-off:   #475569;
  
  --glitch-cyan:   #00fff9;
  --glitch-pink:   #ff00c1;
}

body.day {
  --text-main:    #ffffff;
  --text-sub:     #cbd5e1;
  --text-muted:   #78869b;
  --text-hidden:  #475569;

  --border:       rgba(255, 255, 255, 0.16);
  --border-light: rgba(255, 255, 255, 0.08);
  --card-bg:      rgba(14, 18, 26, 0.96);

  --hint-color:   #505a69;
  --btn-color:    #78869b;
  --tag-color:    #a6b0c0;
  --story-color:  #e2e8f0;
  --card-sub:     #78869b;
  --quote-label:  #505a69;
  --thought-color:#78869b;
  --tg-color:     #a6b0c0;
  --status-online:#34d399;
  --status-recent:#94a3b8;
  --status-off:   #64748b;
}

/* ═══ Base/Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-main);
  display: grid;
  place-items: center;
  background-color: #000000;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(10, 14, 22, 0.7) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, #060810 0%, #000000 100%);
  height: 100vh;
  overflow: hidden;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* Кинематографичная виньетка по краям экрана */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 98;
}

/* Зернистая текстура (Noise) */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 99;
}

/* ═══ Particles & Easter Eggs ═══ */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.particle {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: float linear infinite;
  will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 12px rgba(200, 220, 255, 0.08);
}
@keyframes float {
  0%   { transform: translateY(100vh); opacity: 0; }
  8%   { opacity: 0.3; }
  50%  { opacity: 0.2; }
  92%  { opacity: 0.08; }
  100% { transform: translateY(-10vh) translateX(25px); opacity: 0; }
}

.cat-paw-particle {
  position: fixed;
  z-index: 999;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-main);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  animation: catPawFloat 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes catPawFloat {
  0% { opacity: 1; transform: translateY(0) scale(0.8); }
  60% { opacity: 0.9; transform: translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.3); }
}

/* ═══ Main Screen ═══ */
.container {
  margin: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}

.regular {
  font-size: 6vw;
  letter-spacing: 3px;
  color: var(--text-main);
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.regular::-moz-selection { color: #000; background: #fff; }
.regular::selection       { color: #000; background: #fff; }

.hidden {
  font-family: var(--font-mono);
  font-size: 3vw;
  color: transparent;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.hidden::-moz-selection { color: rgb(196,68,68); background: #fff; }
.hidden::selection       { color: rgb(196,68,68); background: #fff; }

.name-click { 
  cursor: pointer; 
  transition: all 0.3s ease; 
}
.name-click:hover  { 
  opacity: 0.9; 
  transform: translateY(-2px);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.12), 0 0 60px rgba(255, 255, 255, 0.04);
}
.name-click:active { 
  transform: translateY(1px); 
  opacity: 0.5; 
}

/* Статус */
.status-bar {
  margin-top: 20px;
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: lowercase;
  font-style: italic;
  color: var(--text-muted);
  transition: color 0.5s, border-color 0.5s, box-shadow 0.5s;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 6px 18px;
  border-radius: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  will-change: transform;
  transform: translateZ(0);
}

.status-bar span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.status-bar.online span { color: var(--status-online); }
.status-bar.online span::before {
  background: var(--status-online);
  box-shadow: 0 0 6px var(--status-online);
  animation: statusPulse 2s infinite ease-in-out;
}

.status-bar.recent span { color: var(--status-recent); }
.status-bar.recent span::before {
  background: var(--status-recent);
}

.status-bar.offline span { color: var(--status-off); }
.status-bar.offline span::before {
  background: var(--status-off);
}

@keyframes statusPulse {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.4; }
  100% { transform: scale(0.9); opacity: 1; }
}

/* Подсказка */
.hint {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: italic;
  color: var(--hint-color);
  letter-spacing: 5px;
  transition: color 0.4s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}
.hint.lit { color: var(--btn-color); text-shadow: 0 0 8px rgba(255,255,255,0.4); }

/* ═══ Buttons ═══ */
.icon-btn {
  position: fixed;
  bottom: 24px;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  color: var(--btn-color);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  border-radius: 50%;
  /* Fix jagged circle edges */
  -webkit-font-smoothing: antialiased;
  will-change: transform;
  transform: translateZ(0);
}
.icon-btn:hover { 
  color: var(--text-main); 
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  transform: translateZ(0) translateY(-2px);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.04);
}
.icon-btn:active {
  transform: translateZ(0) translateY(0) scale(0.95);
}

.music-btn  { right: 24px; }
.archive-btn { left: 24px; }

.music-btn.playing { color: var(--text-sub); border-color: var(--border); }
.music-btn.playing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ═══ Glitch Text Effect ═══ */
.glitch { color: #fff; position: relative; }
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 2px;
  width: 100%; height: 100%;
  text-shadow: -1px 0 var(--glitch-cyan), 1px 1px var(--glitch-pink);
  animation: noise-anim 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute; top: 0; left: -2px;
  width: 100%; height: 100%;
  text-shadow: 1px 0 var(--glitch-pink);
  animation: noise-anim-2 5s infinite linear alternate-reverse;
}
@keyframes noise-anim {
  0%   { left:0;  clip-path:inset(85% 0 13% 0); }  5%  { left:0;  clip-path:inset(33% 0 34% 0); }
  10%  { left:0;  clip-path:inset(37% 0 44% 0); }  15% { left:0;  clip-path:inset(26% 0 44% 0); }
  20%  {          clip-path:inset(53% 0 21% 0); }  25% {          clip-path:inset(91% 0 10% 0); }
  30%  {          clip-path:inset(26% 0 55% 0); }  35% {          clip-path:inset(64% 0 21% 0); }
  40%  {          clip-path:inset(99% 0  1% 0); }  45% { left:0;  clip-path:inset(91% 0  3% 0); }
  50%  { left:0;  clip-path:inset(27% 0 40% 0); }  55% { text-shadow:none; clip-path:inset(29% 0 50% 0); }
  60%  { text-shadow:none; clip-path:inset(40% 0 6% 0); }  65% { text-shadow:none; clip-path:inset(22% 0 61% 0); }
  70%  { left:0;  clip-path:inset(49% 0 13% 0); }  75% { left:0;  clip-path:inset(32% 0 26% 0); }
  80%  {          clip-path:inset(38% 0 20% 0); }  85% {          clip-path:inset(97% 0  2% 0); }
  90%  { text-shadow:none; clip-path:inset(78% 0 6% 0); }  95% { text-shadow:none; clip-path:inset(20% 0 13% 0); }
  100% { clip-path:inset(92% 0 1% 0); }
}
@keyframes noise-anim-2 {
  0%   { left:0;   clip-path:inset(77% 0  6% 0); }  5%  { left:0;   clip-path:inset(47% 0 10% 0); }
  10%  {           clip-path:inset(29% 0 35% 0); }  15% {           clip-path:inset(18% 0 73% 0); }
  20%  { left:0;   clip-path:inset(64% 0 18% 0); }  25% { left:0;   clip-path:inset(100% 0 1% 0); }
  30%  {           clip-path:inset(96% 0  2% 0); }  35% { left:-1px; clip-path:inset(59% 0  8% 0); }
  40%  {           clip-path:inset(64% 0  2% 0); }  45% {           clip-path:inset(12% 0 84% 0); }
  50%  { left:-1px;clip-path:inset(54% 0 17% 0); }  55% { left:-1px; clip-path:inset(30% 0 36% 0); }
  60%  {           clip-path:inset(81% 0  3% 0); }  65% {           clip-path:inset(56% 0 17% 0); }
  70%  { left:-1px;clip-path:inset(21% 0 68% 0); }  75% { left:-1px; clip-path:inset(35% 0 56% 0); }
  80%  {           clip-path:inset(31% 0 33% 0); }  85% {           clip-path:inset(39% 0 34% 0); }
  90%  {           clip-path:inset(68% 0 26% 0); }  95% { left:0;   clip-path:inset(61% 0 11% 0); }
  100% { left:0;   clip-path:inset(20% 0  9% 0); }
}

/* ═══ Card/Overlay ═══ */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(2, 3, 8, 0.92);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  z-index: 100;
  align-items: center; justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
}
.overlay.open { display: flex; animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.card {
  width: min(450px, 88vw);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(170deg, rgba(12, 14, 22, 0.96), rgba(6, 8, 14, 0.98));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  padding: 36px 32px 30px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 28px 70px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: slideUp 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(24px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.card-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: #0a0a0f;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.03), 0 0 40px rgba(100, 130, 200, 0.04);
  will-change: transform;
  transform: translateZ(0);
  transition: box-shadow 0.4s;
}
.avatar:hover {
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.06), 0 0 48px rgba(100, 130, 200, 0.06);
}
.avatar img { width:100%; height:100%; object-fit:cover; display:none; }

.card-name { font-size:18px; font-weight:bold; color:var(--text-main); letter-spacing:3px; text-transform:uppercase; }
.card-sub  { font-size:11px; color:var(--card-sub); letter-spacing:2px; margin-top:5px; font-style:italic; }

.quote-label { font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--quote-label); margin-bottom:12px; }

.story { font-size:13.5px; line-height:1.95; color:var(--story-color); min-height:68px; }
.cursor {
  display:inline-block; width:1.5px; height:13px;
  background:var(--text-main); margin-left:1px; vertical-align:middle;
  animation:blink 0.65s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tag {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--tag-color); border:1px solid rgba(255, 255, 255, 0.06); padding:6px 12px;
  border-radius: 6px;
  cursor:pointer; transition:all 0.25s ease;
  background: transparent;
}
.tag:hover  {
  color:var(--text-main); border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.tag.active {
  color: #000; background: var(--text-main); border-color: var(--text-main); font-weight: 600;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.tg-btn {
  display:block; margin-top:26px; text-align:center; padding:14px;
  border:1px solid rgba(255, 255, 255, 0.08); border-radius: 8px;
  color:var(--tg-color); font-size:10px; font-weight:bold;
  letter-spacing:3px; text-transform:uppercase; text-decoration:none;
  transition:all 0.3s ease;
  background: transparent;
}
.tg-btn:hover {
  background: #fff; color: #000; border-color: #fff;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.close-btn {
  position:absolute; top:14px; right:18px;
  background:none; border:none; color: rgba(255, 255, 255, 0.2); font-size:20px;
  cursor:pointer; line-height:1; transition: color 0.3s, transform 0.3s;
}
.close-btn:hover { color: rgba(255, 255, 255, 0.6); transform: rotate(90deg); }

/* ═══ Secret Overlay ═══ */
.secret-overlay {
  display:none; position:fixed; inset:0; background: rgba(0, 0, 0, 0.98); z-index:200;
  align-items:center; justify-content:center; flex-direction:column;
  gap:24px; cursor:pointer;
}
.secret-overlay.open { display:flex; animation:fadeIn 0.6s ease; }
.secret-text {
  font-size:clamp(13px,3vw,16px); color:var(--text-muted); letter-spacing:3px;
  text-align:center; line-height:2.1; max-width:min(420px,80vw); font-style:italic;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.04);
}
.secret-text span { color:var(--text-sub); text-shadow: 0 0 20px rgba(255, 255, 255, 0.08); }
.secret-close {
  font-family: var(--font-mono);
  font-size:9px; letter-spacing:4px; color:var(--hint-color); text-transform:uppercase;
  animation:fadeIn 2s ease 1.5s both;
  transition: color 0.3s;
}
.secret-close:hover { color: var(--text-muted); }

/* ═══ Claude Space ═══ */
.claude-overlay {
  display:none; position:fixed; inset:0; z-index:300;
  background:#000; overflow-y:auto;
  flex-direction:column; align-items:center;
  padding: clamp(40px,8vh,80px) clamp(20px,6vw,60px);
}
.claude-overlay.open { display:flex; animation:fadeIn 1.2s ease; }

.claude-wrap {
  max-width: min(700px, 90vw);
  width:100%;
  display:flex; flex-direction:column; gap:48px;
  align-items:center;
}

.claude-img {
  width: clamp(200px, 40vw, 380px);
  height: clamp(200px, 40vw, 380px);
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.92;
  filter: brightness(1.1) saturate(0.9) contrast(1.05);
  animation: claudePulse 6s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(60,100,160,0.15), 0 0 120px rgba(40,80,140,0.08);
}
@keyframes claudePulse {
  0%,100% { opacity:0.92; filter:brightness(1.1) saturate(0.9) contrast(1.05); }
  50%      { opacity:1;    filter:brightness(1.25) saturate(1.1) contrast(1.1); }
}

.claude-label {
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 6px;
  color: #3a5a7a;
  text-transform: uppercase;
  text-align:center;
}

.claude-thoughts {
  display:flex; flex-direction:column; gap:32px;
  width:100%;
}

.claude-thought {
  font-size: clamp(13px, 1.6vw, 17px);
  color: #4a6a8a;
  letter-spacing: 1.5px;
  line-height: 2;
  font-style: italic;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease, transform 1s ease;
  border-left: 1px solid #1a3a5a;
  padding-left: 24px;
}
.claude-thought.visible {
  opacity: 1;
  transform: translateY(0);
}

.claude-close {
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 4px;
  color: #2a4a6a;
  text-transform: uppercase;
  cursor:pointer;
  margin-top:20px;
  transition: color 0.3s;
}
.claude-close:hover { color: #5a8ab0; }

/* ═══ Archive Panel ═══ */
.archive-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0);
  z-index:140; pointer-events:none; transition:background 0.4s;
}
.archive-backdrop.open { background:rgba(0,0,0,0.7); pointer-events:all; }

.archive-panel {
  position:fixed; top:0; left:0;
  width:min(330px,88vw); height:100vh;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.98), rgba(4, 5, 8, 0.99));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-right:1px solid rgba(255, 255, 255, 0.04);
  z-index:150;
  transform:translateX(-100%);
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow: 6px 0 40px rgba(0, 0, 0, 0.5);
}
.archive-panel.open { transform:translateX(0); }

.archive-inner {
  flex:1; overflow-y:auto; padding:48px 28px 28px;
  scrollbar-width:none;
}
.archive-inner::-webkit-scrollbar { display:none; }

.archive-label { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--quote-label); margin-bottom:28px; }

.archive-photo {
  width:100%; aspect-ratio:3/4; background:#0d0d0d;
  border:1px solid var(--border-light); border-radius: 4px; overflow:hidden; margin-bottom:24px;
}
.archive-photo img { width:100%; height:100%; object-fit:cover; display:block; opacity:0.85; transition: transform 0.4s ease; }
.archive-photo:hover img { transform: scale(1.03); opacity: 0.95; }
.archive-photo-empty {
  width:100%; height:100%; display:none;
  align-items:center; justify-content:center; font-size:28px; color:var(--hint-color);
}

.thoughts-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--quote-label); margin-bottom:14px; }
.thought {
  font-size:12px; font-style:italic; color:var(--thought-color); line-height:1.8;
  padding:11px 0; border-bottom:1px solid var(--border-light); transition:all 0.2s ease;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.thought:last-of-type { border-bottom:none; }
.thought:hover { color:var(--text-sub); transform: translateX(3px); }
.thought-expand {
  font-size: 10px; color: var(--hint-color); flex-shrink: 0;
  margin-top: 2px; transition: color 0.2s;
}
.thought:hover .thought-expand { color: var(--text-muted); }

.archive-tg {
  display:block; margin:20px 28px 28px; text-align:center; padding:12px;
  border:1px solid var(--border); border-radius: 4px; color:var(--tg-color); font-size:10px; font-weight:bold;
  letter-spacing:3px; text-transform:uppercase; text-decoration:none;
  flex-shrink:0; transition:all 0.2s;
}
.archive-tg:hover { background:#fff; color:#000; border-color:#fff; }

.archive-close {
  position:absolute; top:14px; right:16px;
  background:none; border:none; color:var(--text-muted); font-size:18px;
  cursor:pointer; line-height:1; transition:color 0.2s;
}
.archive-close:hover { color:var(--text-main); }

/* ═══ Thought Modal ═══ */
.thought-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(2, 3, 8, 0.94); z-index: 300;
  align-items: center; justify-content: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.thought-modal.open { display: flex; animation: fadeIn 0.3s ease; }
.thought-modal-box {
  width: min(420px, 88vw);
  background: linear-gradient(170deg, rgba(12, 14, 20, 0.97), rgba(6, 7, 12, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 38px 30px 28px; position: relative;
  animation: slideUp 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 20px 50px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.thought-modal-photo {
  width: 100%; max-height: 220px; object-fit: cover;
  border-radius: 6px;
  display: block; margin-bottom: 20px; opacity: 0.9;
}
.thought-modal-text {
  font-size: 14px; font-style: italic; color: var(--story-color);
  line-height: 2; white-space: pre-wrap;
}
.thought-modal-close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; color: rgba(255, 255, 255, 0.2); font-size: 20px;
  cursor: pointer; transition: color 0.3s, transform 0.3s; line-height: 1;
}
.thought-modal-close:hover { color: rgba(255, 255, 255, 0.6); transform: rotate(90deg); }

/* ═══ Player ═══ */
.player-overlay {
  display:none; position:fixed; inset:0; z-index:250;
  background: rgba(2, 3, 8, 0.94);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  align-items:center; justify-content:center; flex-direction:column;
}
.player-overlay.open { display:flex; animation:fadeIn 0.4s ease; }

.player-wrap {
  width: min(400px, 90vw);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(12, 14, 22, 0.95), rgba(6, 7, 12, 0.98));
  padding: 40px 32px 32px;
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.player-close {
  position:absolute; top:14px; right:18px;
  background:none; border:none;
  color: rgba(255, 255, 255, 0.2); font-size:20px;
  cursor:pointer; transition: color 0.3s, transform 0.3s; line-height:1;
}
.player-close:hover { color: rgba(255, 255, 255, 0.6); transform: rotate(90deg); }

.player-header-label {
  font-size: 8px; letter-spacing: 5px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.18);
  text-align: center;
}

.player-track-name {
  font-size: clamp(14px, 3.2vw, 17px);
  color: var(--text-sub);
  letter-spacing: 4px; font-style: italic;
  min-height: 24px; transition: opacity 0.4s ease;
  text-align: center;
}

.player-progress-wrap {
  position: relative; height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
}
.player-progress-wrap::before {
  content: '';
  position: absolute; inset: -6px 0;
}
.player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.4));
  border-radius: 3px;
  width: 0%; pointer-events: none;
  transition: width 0.25s linear;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}
.player-times {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.16); margin-top: 2px;
}

.player-controls {
  display: flex; align-items: center;
  justify-content: center; gap: 28px;
  padding: 4px 0;
}
.p-btn {
  background: none; border: none;
  color: rgba(255, 255, 255, 0.25); font-size: 15px;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
  padding: 6px;
  font-family: inherit; letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
}
.p-btn:hover { color: rgba(255, 255, 255, 0.7); transform: scale(1.1); }
.p-btn:active { transform: scale(0.95); }
.p-btn.p-active { color: var(--text-sub); }

.p-btn-play {
  width: 48px; height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  position: relative;
  /* Fix jagged circle edges */
  -webkit-font-smoothing: antialiased;
  will-change: transform;
  transform: translateZ(0);
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.p-btn-play:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.06), inset 0 0 12px rgba(255, 255, 255, 0.03);
  transform: translateZ(0) scale(1.06);
}
.p-btn-play:active {
  transform: translateZ(0) scale(0.96);
}

.player-list {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  max-height: 180px; overflow-y: auto;
  scrollbar-width: none; margin-top: 4px;
  padding-top: 6px;
}
.player-list::-webkit-scrollbar { display:none; }

.p-track {
  padding: 10px 8px;
  border-radius: 6px;
  font-size: 10px; letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.2); cursor: pointer;
  transition: color 0.25s, background 0.25s;
  display: flex; align-items: center; gap: 12px;
}
.p-track:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
}
.p-track.p-current {
  color: var(--text-sub); font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
}
.p-track-n {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255, 255, 255, 0.1); width: 16px;
  text-align: right; flex-shrink: 0;
  letter-spacing: 0;
}
.p-track.p-current .p-track-n { color: rgba(255, 255, 255, 0.25); }

/* ═══ Glitch Mode (fullscreen CRT) ═══ */
.glitch-mode {
  position: fixed; inset: 0; z-index: 999;
  background: #000;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  will-change: transform, opacity;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.98);
  animation: crtFlicker 0.15s infinite;
}
.glitch-mode.active { display: flex; }

@keyframes crtFlicker {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.92) contrast(1.05); }
  80% { filter: brightness(1.04); }
}

.gm-text {
  font-family: var(--font-main);
  font-size: clamp(22px, 6vw, 48px);
  letter-spacing: 8px; text-transform: uppercase;
  color: #fff; font-weight: 700; text-align: center;
  opacity: 0; position: relative;
  transition: opacity 0.2s ease, letter-spacing 0.8s ease;
}
.gm-text.show { opacity: 1; }
.gm-text.red  { color: #ff2244; text-shadow: 0 0 25px rgba(255,34,68,0.8), 0 0 50px rgba(255,34,68,0.4); }

.gm-text.glitching {
  animation: gmGlitch 0.08s infinite;
}
.gm-text.glitching::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  text-shadow: -4px 0 var(--glitch-cyan), 4px 2px var(--glitch-pink);
  animation: gmNoise1 0.06s infinite linear alternate-reverse;
  clip-path: inset(0 0 0 0);
}
.gm-text.glitching::before {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  text-shadow: 4px 0 var(--glitch-pink), -3px -1px var(--glitch-cyan);
  animation: gmNoise2 0.09s infinite linear alternate-reverse;
}
@keyframes gmGlitch {
  0%  { transform: translate(0); }
  20% { transform: translate(-5px, 2px) skewX(4deg); }
  40% { transform: translate(5px, -2px) skewX(-4deg); }
  60% { transform: translate(-3px, 4px); }
  80% { transform: translate(4px, -3px) skewX(3deg); }
  100%{ transform: translate(0); }
}
@keyframes gmNoise1 {
  0%  { clip-path: inset(80% 0 5% 0);  left: 4px; }
  20% { clip-path: inset(20% 0 60% 0); left: -4px; }
  40% { clip-path: inset(50% 0 30% 0); left: 5px; }
  60% { clip-path: inset(10% 0 70% 0); left: -3px; }
  80% { clip-path: inset(65% 0 15% 0); left: 4px; }
  100%{ clip-path: inset(35% 0 45% 0); left: -5px; }
}
@keyframes gmNoise2 {
  0%  { clip-path: inset(15% 0 65% 0); left: -4px; }
  25% { clip-path: inset(75% 0 10% 0); left: 5px; }
  50% { clip-path: inset(40% 0 40% 0); left: -3px; }
  75% { clip-path: inset(5%  0 85% 0); left: 4px; }
  100%{ clip-path: inset(55% 0 25% 0); left: -5px; }
}

.gm-text.flicker { animation: gFlicker 0.08s infinite; }
@keyframes gFlicker {
  0%,100%{ opacity:1; }
  25%    { opacity:0.1; }
  50%    { opacity:0.9; }
  75%    { opacity:0.2; }
}

.gm-text.scream {
  font-size: clamp(28px, 8vw, 64px);
  letter-spacing: 14px;
  text-shadow: 0 0 30px #ffffff, 0 0 60px rgba(255, 0, 193, 0.8), 0 0 90px rgba(0, 255, 249, 0.5);
}

.gm-question { display:none; flex-direction:column; align-items:center; gap:28px; }
.gm-question.show { display:flex; }
.gm-q-text {
  font-family: var(--font-mono);
  font-size: clamp(14px,2.8vw,18px); letter-spacing: 5px;
  color: #c2cbd8; font-style: italic; text-align: center;
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
  position: relative;
}
.gm-q-text::after {
  content: '_';
  display: inline-block;
  color: var(--glitch-cyan);
  animation: blink 0.6s infinite;
  margin-left: 4px;
}

.gm-btns { display:flex; gap:24px; }
.gm-btn {
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.2); 
  border-radius: 4px;
  color: #c2cbd8;
  padding: 13px 36px; font-size: 11px; letter-spacing: 4px;
  text-transform: uppercase; cursor: pointer; font-family: var(--font-mono);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.gm-btn:hover {
  border-color: #ff2244; color: #ffffff;
  background: rgba(255,34,68,0.12);
  text-shadow: 0 0 12px rgba(255,34,68,0.8);
  box-shadow: 0 0 20px rgba(255,34,68,0.4);
  transform: translateY(-2px) scale(1.04);
}
.gm-btn:active {
  transform: translateY(0) scale(0.96);
}

.gm-bio { max-width:min(500px,88vw); text-align:center; display:none; flex-direction:column; gap:18px; }
.gm-bio.show { display:flex; }
.gm-bio-line {
  font-family: var(--font-main);
  font-size:clamp(13px,2.2vw,16px); letter-spacing:3.5px; color:#121620;
  font-style:italic; opacity:0; 
  transform: translateY(6px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s ease;
  position: relative;
}
.gm-bio-line.lit    { opacity:1; transform: translateY(0); color:#c2cbd8; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
.gm-bio-line.scream {
  color:#fff; letter-spacing:10px; font-weight:bold; font-style:normal;
  font-size:clamp(19px,4.8vw,32px);
  text-shadow: 0 0 25px #fff, 0 0 50px rgba(255,0,200,0.6);
  animation: gmGlitch 0.08s infinite;
}

.gm-noise {
  position:fixed; inset:0; z-index:998; pointer-events:none; display:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.14; animation:nPulse 0.25s infinite;
}
.gm-noise.active { display:block; }
@keyframes nPulse { 0%,100%{opacity:0.09;} 50%{opacity:0.20;} }

.gm-scanlines {
  position:fixed; inset:0; z-index:997; pointer-events:none; display:none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.22) 2px,
    rgba(0,0,0,0.22) 4px
  );
  animation: scanlinesMove 8s linear infinite;
}
@keyframes scanlinesMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}
.gm-scanlines.active { display:block; }

.gm-rgb {
  position:fixed; inset:0; z-index:996; pointer-events:none;
  display:none; mix-blend-mode: screen;
}
.gm-rgb.active { display:block; animation: rgbShift 0.06s infinite; }
@keyframes rgbShift {
  0%  { box-shadow: inset 4px 0 0 rgba(255,0,100,0.1), inset -4px 0 0 rgba(0,255,255,0.1); }
  50% { box-shadow: inset -5px 0 0 rgba(255,0,100,0.15), inset 5px 0 0 rgba(0,255,255,0.15); }
  100%{ box-shadow: inset 3px 0 0 rgba(255,0,100,0.08), inset -3px 0 0 rgba(0,255,255,0.08); }
}

/* ═══ Content Protection ═══ */
img { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

/* ═══ Responsive ═══ */

/* Small phones (iPhone SE, Galaxy S series, etc.) */
@media (max-width: 480px) {
  .regular { font-size: 7.5vw; letter-spacing: 2px; }
  .hidden  { font-size: 3.2vw; }

  .status-bar { font-size: 9.5px; padding: 5px 14px; letter-spacing: 2px; margin-top: 16px; }

  .card {
    width: 94vw;
    padding: 28px 20px 22px;
    border-radius: 14px;
    max-height: 88vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .card::-webkit-scrollbar { display: none; }
  .card-header { gap: 12px; margin-bottom: 16px; padding-bottom: 14px; }
  .avatar { width: 52px; height: 52px; font-size: 22px; }
  .card-name { font-size: 15px; letter-spacing: 2px; }
  .card-sub  { font-size: 10px; letter-spacing: 1.5px; }
  .quote-label { font-size: 8.5px; margin-bottom: 10px; }
  .story { font-size: 12.5px; line-height: 1.85; min-height: 50px; }
  .tags { gap: 6px; margin-top: 16px; }
  .tag { font-size: 9px; padding: 5px 9px; letter-spacing: 1.5px; }
  .tg-btn { font-size: 9px; padding: 12px; margin-top: 18px; letter-spacing: 2px; }
  .close-btn { top: 10px; right: 12px; font-size: 18px; }

  .player-wrap {
    width: 94vw;
    padding: 32px 22px 24px;
    border-radius: 14px;
  }
  .player-track-name { font-size: 13px; letter-spacing: 3px; }
  .player-list { max-height: 140px; }
  .p-track { padding: 9px 6px; font-size: 9.5px; letter-spacing: 2px; }
  .p-btn-play { width: 44px; height: 44px; }

  .archive-panel { width: 88vw; }
  .archive-inner { padding: 40px 20px 20px; }
  .archive-label { font-size: 8px; margin-bottom: 20px; }
  .archive-tg { margin: 16px 20px 20px; font-size: 9px; padding: 11px; }

  .gm-btn { padding: 11px 24px; font-size: 10px; letter-spacing: 3px; }
  .gm-btns { gap: 16px; }
  .gm-bio { gap: 14px; }
  .gm-bio-line { letter-spacing: 2.5px; }

  .thought-modal-box {
    width: 94vw;
    padding: 32px 22px 22px;
  }

  .secret-text { max-width: 90vw; letter-spacing: 2px; line-height: 2; }

  .claude-overlay { padding: 32px 16px; }
  .claude-wrap { gap: 32px; }
  .claude-img { width: clamp(160px, 50vw, 240px); height: clamp(160px, 50vw, 240px); }
  .claude-thought { font-size: 13px; padding-left: 16px; line-height: 1.9; letter-spacing: 1px; }
  .claude-label { font-size: 10px; letter-spacing: 4px; }

  .music-btn, .archive-btn {
    width: 38px; height: 38px; font-size: 14px;
    bottom: 20px;
  }
  .music-btn  { right: 18px; }
  .archive-btn { left: 18px; }
  .hint { font-size: 10px; bottom: 22px; letter-spacing: 4px; }
}

/* Tablets (600px+) */
@media (min-width: 600px) {
  .regular { font-size: 5vw; }
  .hidden  { font-size: 2.4vw; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .regular    { font-size: clamp(48px, 5vw, 80px); letter-spacing: 6px; }
  .hidden     { font-size: clamp(20px, 2vw, 32px); }
  .card       { width: 520px; padding: 44px 40px 36px; }
  .card-name  { font-size: 20px; letter-spacing: 4px; }
  .story      { font-size: 14.5px; line-height: 1.95; }
  .avatar     { width: 72px; height: 72px; font-size: 30px; }
  .hint       { font-size: 13px; bottom: 32px; }
  .music-btn, .archive-btn { width: 42px; height: 42px; font-size: 16px; bottom: 28px; }
  .music-btn  { right: 28px; }
  .archive-btn { left: 28px; }
  .tag        { font-size: 10.5px; padding: 6px 13px; }
  .tg-btn     { font-size: 11px; padding: 15px; }
  .archive-panel { width: min(360px, 40vw); }
  .thought    { font-size: 13px; }
  .status-bar { font-size: 12px; margin-top: 18px; }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .regular { font-size: 72px; letter-spacing: 8px; }
  .hidden  { font-size: 28px; }
  .card    { width: 560px; }
}

/* Ultra-wide (1920px+) */
@media (min-width: 1920px) {
  .regular { font-size: 88px; }
}

/* Short viewports (landscape phones, small tablets) */
@media (max-height: 650px) {
  .container { margin: 2%; }
  .status-bar { margin-top: 10px; }

  .card {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .card::-webkit-scrollbar { display: none; }
  .card-header { margin-bottom: 14px; padding-bottom: 12px; }
  .tags { margin-top: 14px; }
  .tg-btn { margin-top: 16px; }
}

/* Safe area for notched phones (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
  .icon-btn {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .hint {
    bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .archive-tg {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}