/* Game Layer & Dashboard — extracted from style.css */

/* ═══════════════════════════════════════════
   DASHBOARD BUTTON
   ═══════════════════════════════════════════ */

.dashboard-btn {
  position: fixed; top: 78px; left: 76px; z-index: 500;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease-out, background .2s ease-out, transform .3s var(--ease), opacity .3s ease-out;
}
.dashboard-btn.visible { display: flex; animation: fadeIn .3s var(--ease) forwards }
.dashboard-btn::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--gold);
  clip-path: inset(0 50% 0 50%); transition: clip-path .2s ease-out;
  pointer-events: none;
}
.dashboard-btn:hover { border-color: transparent; transform: scale(1.1) }
.dashboard-btn:hover::before { clip-path: inset(0 0 0 0) }
.dashboard-btn svg { width: 11px; height: 11px; stroke: var(--t3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease-out }
.dashboard-btn:hover svg { stroke: var(--t1) }

/* ═══════════════════════════════════════════
   DASHBOARD PANEL
   ═══════════════════════════════════════════ */

.dashboard-panel {
  position: fixed; top: 114px; left: 36px; z-index: 499;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 24px 20px; min-width: 280px; max-width: 320px;
  opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none;
  transition: opacity .2s var(--ease), transform .25s var(--ease);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
}
.dashboard-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto }
.dashboard-title {
  font-family: var(--sans); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
  font-weight: 500;
}
.dashboard-progress-bar {
  width: 100%; height: 2px; background: var(--border); border-radius: 2px;
  margin-bottom: 18px; overflow: hidden;
}
.dashboard-progress-fill {
  height: 100%; background: var(--gold); border-radius: 2px;
  transition: width .6s var(--ease);
}
.dashboard-stat {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 350; color: var(--t2);
  letter-spacing: .01em;
}
.dashboard-stat-val { color: var(--t1); font-weight: 450; font-family: var(--sans); font-size: .7rem; letter-spacing: .02em }
.dashboard-stat-highlight .dashboard-stat-val { color: var(--gold) }
.dashboard-read-list {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.dashboard-read-label {
  font-family: var(--sans); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 8px;
  font-weight: 500;
}
.dashboard-folder {
  margin-bottom: 6px;
}
.dashboard-folder-name {
  font-family: var(--sans); font-size: .6rem; font-weight: 450;
  color: var(--t3); letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 0 4px; display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; transition: color .15s;
}
.dashboard-folder-name:hover { color: var(--t1) }
.dashboard-folder-chevron {
  transition: transform .2s var(--ease); flex-shrink: 0;
}
.dashboard-folder-name:not(.collapsed) .dashboard-folder-chevron {
  transform: rotate(90deg);
}
.dashboard-folder-count {
  font-size: .5rem; color: var(--t4); font-weight: 400; margin-left: auto;
}
.dashboard-folder-items {
  overflow: hidden; max-height: 500px;
  transition: max-height .25s var(--ease), opacity .2s ease-out;
  opacity: 1;
}
.dashboard-folder-items.collapsed {
  max-height: 0; opacity: 0;
}
.dashboard-read-link {
  font-family: var(--sans); font-size: .72rem; font-weight: 350; color: var(--t2);
  letter-spacing: .01em; transition: color .15s, padding-left .2s var(--ease);
  padding: 3px 0 3px 18px; display: block;
}
.dashboard-read-link:hover { color: var(--gold); padding-left: 22px }
.dashboard-pin {
  display: flex; justify-content: flex-end; padding-top: 14px; margin-top: 12px;
  border-top: 1px solid var(--border);
}
.dashboard-pin-btn {
  font-family: var(--sans); font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3); background: none; border: none;
  cursor: pointer; transition: color .15s; font-weight: 450;
}
.dashboard-pin-btn:hover { color: var(--t1) }

/* ═══════════════════════════════════════════
   [GAME] SLOW MODE — all transitions 2x slower
   ═══════════════════════════════════════════ */

[data-speed="slow"] .overlay { transition: opacity .7s var(--ease) }
[data-speed="slow"] .overlay-panel { transition: transform 1s var(--ease) }
[data-speed="slow"] .btn-3d, [data-speed="slow"] .hero-branch { transition-duration: .4s }
[data-speed="slow"] .page-transition { transition-duration: .4s }
[data-speed="slow"] .custom-cursor { transition-duration: .4s }
[data-speed="slow"] .sec, [data-speed="slow"] .statement, [data-speed="slow"] .contact,
[data-speed="slow"] .tree-teaser, [data-speed="slow"] .about-block, [data-speed="slow"] .block {
  transition-duration: 1.6s;
}
[data-speed="slow"] .row { transition-duration: .4s }
[data-speed="slow"] .statement-word { transition-duration: .3s }

/* ═══════════════════════════════════════════
   [GAME] LOADING SCREEN
   ═══════════════════════════════════════════ */

.game-loading {
  position: fixed; inset: 0; z-index: 99999;
  background: #060606;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  transition: opacity .5s ease-out;
}
.game-loading.done { opacity: 0; pointer-events: none }
.game-loading-bar-wrap {
  width: 200px; height: 2px; background: rgba(196,162,101,0.12); border-radius: 2px; overflow: hidden;
}
.game-loading-bar {
  height: 100%; width: 0; background: var(--gold); border-radius: 2px;
  transition: width .2s ease-out;
}

/* ═══════════════════════════════════════════
   [GAME] TYPEWRITER
   ═══════════════════════════════════════════ */

.typewriter-cursor {
  display: inline-block; width: 2px; height: 1em; background: var(--gold);
  margin-left: 4px; vertical-align: text-bottom;
  animation: blink-cursor .7s step-end infinite;
}
@keyframes blink-cursor { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* ═══════════════════════════════════════════
   [GAME] HOVER TRAIL (single following dot)
   ═══════════════════════════════════════════ */

.trail-follow {
  position: fixed; pointer-events: none; z-index: 10000;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  transition: opacity .3s ease-out;
}
.trail-follow.visible { opacity: .35 }
[data-cursor="system"] .trail-follow { display: none }
@media (hover: none) { .trail-follow { display: none } }

/* ═══════════════════════════════════════════
   [GAME] PARTICLE BURST
   ═══════════════════════════════════════════ */

.particle {
  position: fixed; pointer-events: none; z-index: 10000;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold);
}

/* ═══════════════════════════════════════════
   READING TIME BADGE
   ═══════════════════════════════════════════ */

.reading-time {
  font-size: .78rem; color: var(--t3); letter-spacing: .04em;
  text-transform: uppercase; font-family: var(--sans); font-weight: 350;
  opacity: 0; animation: fadeIn .6s var(--ease) .6s forwards;
}
.article-meta .reading-time { margin-left: 12px }
.page-meta-line { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; opacity: 0; animation: fadeIn .6s var(--ease) .5s forwards }
.about-header .reading-time { margin-top: 16px }

/* ═══════════════════════════════════════════
   [GAME] KONAMI CODE EFFECT (gold rain)
   ═══════════════════════════════════════════ */

.konami-drop {
  position: fixed; top: -20px; z-index: 50001;
  width: 3px; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  pointer-events: none; opacity: .6;
  animation: konami-fall linear forwards;
}
@keyframes konami-fall { to { top: 110vh; opacity: 0 } }