.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.theme-controls {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 20;
}

#theme-toggle img {
  transition: transform 0.3s ease;
}



#special-buttn img {
  transition: transform 0.3s ease;
}



.theme-toggle {
  background: none;
  /*border: 1px solid var(--border);*/
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* Icon toggling based on theme */
html[data-theme="dark"] .theme-toggle .icon-light {
  display: none;
}

html[data-theme="light"] .theme-toggle .icon-dark {
  display: none;
}

.theme-toggle .theme-icon {
  width: 1.5em;
  height: 1.5em;
  display: block;
}

.sidebar {
  width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  flex-shrink: 0;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.sidebar-item {
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

.sidebar-item .default-text,
.sidebar-item .hover-text {
   color: var(--text);
   text-decoration: none;
   font-size: 1.2rem;
}

.sidebar-item .hover-text {
   display: none;
   color: var(--text);
   text-decoration: none;
   font-weight: bold;
}






.sidebar-item a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.8rem 2rem;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

 .main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* CRT effect for main screen */
  .main-content::before {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: repeating-linear-gradient(0deg, rgba(0,255,43,.12) 0px, rgba(0,255,43,.12) 1px, transparent 1px, transparent 2px);
    pointer-events:none;
    z-index:-1;
  }

  .main-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(0,255,43,0.12) 0px, rgba(0,255,43,0.12) 25px, transparent 70px);
    transition: background 0.05s;
  }


.display-name {
  font-family: 'Playfair Display', serif;
  font-size: 7rem;
  font-weight: 700;
  user-select: none;
  white-space: nowrap;
}

.char {
  color: #ffffff;
  transition: color 0.2s, text-shadow 0.2s;
}

.large-char {
  font-size: 1.6em;
}

.baroque-char {
  color: #aaffaa !important;
  text-shadow: 0 0 3px #aaffaa, 0 0 5px #aaffaa !important;
}

.hover-description {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.hover-description h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-alt);
}

.hover-description p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.hidden {
  display: none;
}

/* Light theme specific color adjustments */
html[data-theme="light"] .char {
    color: #0b5c0b;
}

html,
body,
a,
button,
input,
textarea,
select,
label,
iframe,
[role="button"],
[onclick],
.cursor-pointer,
.clickable,
.theme-toggle,
.theme-controls * {
    cursor: none !important;
}

* {
    cursor: none !important;
}

/* Also hide native cursor during click, hover, focus, and active states */
a:active,
a:focus,
button:active,
button:focus,
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    cursor: none !important;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(0,0,0);
    background: var(--cursor-base);
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    animation: pulse 1.5s infinite;
    transition: background-color 0.15s ease;
    z-index: 10001;
}

@keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.7; }
}

body { cursor: none; }


html[data-theme="light"] .sidebar-item .default-text,
html[data-theme="light"] .sidebar-item .hover-text {
  color: #0b5c0b;
}

/* Mobile-first layout (≤ 768px) */
@media (max-width: 768px) {
  html, body, .layout {
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }

  .layout {
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 0 0 50vh;
    order: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1.2;
  }

  .sidebar {
    flex: 0 0 50vh;
    order: 2;
    border: none;
    border-top: 1px solid var(--text);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align: center;
  }

  .sidebar-item {
    margin: 0;
    text-align: center;
  }

  .sidebar-item a {
    padding: 0.4rem 0;
    justify-content: center;
    text-align: center;
  }

  .theme-toggle {
    width: 44px;
    height: 44px;
  }

  #default-display {
    font-size: clamp(2rem, 8vw, 4rem);
    text-align: center;
    line-height: 1.2;
  }

  .large-char { font-size: 1.2em; }

  .sidebar-item .hover-text,
  #hover-display {
    display: none !important;
  }
}

/* Hover handling – only on devices that support hover */
@media (hover: hover) {
  #theme-toggle:hover img {
    transform: scale(1.08);
  }

  #special-buttn:hover img {
    transform: scale(1.1);
  }

  .theme-toggle:hover {
    box-shadow: var(--shadow);
  }

  .sidebar-item:hover {
    background-color: var(--hover-bg);
    text-shadow: 0 0 5px var(--text), 0 0 10px var(--text);
  }

  .sidebar-item:hover .default-text {
    display: none;
  }

  .sidebar-item:hover .hover-text {
    display: block;
  }
}

/* Explicitly turn off hover on touch devices */
@media (hover: none) {
  .sidebar-item:hover,
  .theme-toggle:hover,
  .theme-toggle:active,
  .sidebar-item a:hover {
    background: transparent !important;
    color: var(--text) !important;
    text-shadow: none !important;
  }
}

/* ------------------------------------------------------------
   Page Transition Overlay – CRT Matrix Tunnel
   ------------------------------------------------------------ */

.transition-overlay {
    --transition-duration: 560ms;
    --transition-easing: cubic-bezier(0.76, 0, 0.24, 1);
    --transition-ink: #010602;
    --transition-line: #00ff41;
    --transition-glow: rgba(0, 255, 65, 0.68);

    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    opacity: 0;
    font-family: "Courier New", Courier, monospace;
    transition: opacity 100ms ease;
}

.transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.transition-grid,
.transition-scanlines,
.transition-panel,
.transition-edge,
.transition-readout,
.transition-corner {
    pointer-events: none;
}

.transition-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        linear-gradient(rgba(0, 255, 65, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.055) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(0, 255, 65, 0.13), transparent 48%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    transition: opacity 180ms ease;
}

.transition-overlay.active .transition-grid {
    opacity: 1;
}

.transition-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(0, 0, 0, 0.24) 2px,
        rgba(0, 0, 0, 0.24) 4px
    );
    transition: opacity 120ms ease;
}

.transition-overlay.active .transition-scanlines {
    opacity: 0.48;
    animation: transition-scan 1s linear infinite;
}

.transition-panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 0 49.8%, rgba(0, 255, 65, 0.045) 50%, transparent 50.2%),
        linear-gradient(180deg, rgba(0, 255, 65, 0.04), transparent 22%, transparent 78%, rgba(0, 255, 65, 0.04)),
        var(--transition-ink);
    will-change: transform;
    transition: transform var(--transition-duration) var(--transition-easing);
}

.transition-panel::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.38;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 255, 65, 0.07) 3px,
        rgba(0, 255, 65, 0.07) 4px
    );
}

.transition-panel-top {
    top: 0;
    transform: scaleY(0);
    transform-origin: center top;
}

.transition-panel-bottom {
    bottom: 0;
    transform: scaleY(0);
    transform-origin: center bottom;
}

/* Exit: the two CRT shutters close over the current page. */
.transition-overlay.exit.exit-animate .transition-panel {
    transform: scaleY(1);
}

/* Entry: the same shutters open from the center of the new page. */
.transition-overlay.entry .transition-panel {
    transform: scaleY(1);
}

.transition-overlay.entry.entry-animate .transition-panel {
    transform: scaleY(0);
}

.transition-edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 3;
    background: var(--transition-line);
    box-shadow:
        0 0 5px var(--transition-line),
        0 0 16px var(--transition-glow),
        0 0 34px var(--transition-glow);
    will-change: transform;
    transition: transform var(--transition-duration) var(--transition-easing);
}

.transition-edge-top {
    top: 0;
}

.transition-edge-bottom {
    bottom: 0;
}

.transition-overlay.exit.exit-animate .transition-edge-top {
    transform: translateY(calc(50vh - 1px));
}

.transition-overlay.exit.exit-animate .transition-edge-bottom {
    transform: translateY(calc(-50vh + 1px));
}

.transition-overlay.entry .transition-edge-top {
    transform: translateY(calc(50vh - 1px));
}

.transition-overlay.entry .transition-edge-bottom {
    transform: translateY(calc(-50vh + 1px));
}

.transition-overlay.entry.entry-animate .transition-edge {
    transform: translateY(0);
}

.transition-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: flex;
    width: min(330px, calc(100vw - 40px));
    box-sizing: border-box;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.1rem 0.9rem;
    border: 1px solid rgba(0, 255, 65, 0.72);
    border-left: 3px solid var(--transition-line);
    background: rgba(1, 6, 2, 0.88);
    box-shadow:
        0 0 0 1px rgba(0, 255, 65, 0.1),
        0 0 22px rgba(0, 255, 65, 0.18);
    color: var(--transition-line);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
        opacity 180ms ease,
        transform 280ms var(--transition-easing);
}

.transition-readout::before,
.transition-readout::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    border-color: var(--transition-line);
}

.transition-readout::before {
    top: -1px;
    right: -1px;
    border-top: 1px solid;
    border-right: 1px solid;
}

.transition-readout::after {
    right: -1px;
    bottom: -1px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.transition-overlay.exit.exit-animate .transition-readout,
.transition-overlay.entry .transition-readout {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.transition-overlay.entry.entry-animate .transition-readout {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.04);
}

.transition-readout-kicker {
    color: rgba(170, 255, 170, 0.72);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
}

.transition-readout-status {
    min-height: 1.2em;
    color: #eaffeb;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-shadow: 0 0 8px var(--transition-glow);
    animation: transition-status-blink 1.1s steps(2, end) infinite;
}

.transition-readout-track {
    display: block;
    height: 3px;
    overflow: hidden;
    background: rgba(0, 255, 65, 0.18);
}

.transition-readout-progress {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--transition-line);
    box-shadow: 0 0 8px var(--transition-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-duration) var(--transition-easing);
}

.transition-overlay.exit.exit-animate .transition-readout-progress,
.transition-overlay.entry .transition-readout-progress {
    transform: scaleX(1);
}

.transition-overlay.entry.entry-animate .transition-readout-progress {
    transform: scaleX(0);
    transform-origin: right center;
}

.transition-corner {
    position: absolute;
    z-index: 4;
    color: rgba(170, 255, 170, 0.62);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    opacity: 0;
    transition: opacity 180ms ease;
}

.transition-overlay.active .transition-corner {
    opacity: 1;
}

.transition-corner-top {
    top: 1.2rem;
    right: 1.4rem;
}

.transition-corner-bottom {
    bottom: 1.2rem;
    left: 1.4rem;
}

.transition-overlay.entry.entry-animate {
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-easing);
}

@keyframes transition-scan {
    from { background-position: 0 0; }
    to { background-position: 0 8px; }
}

@keyframes transition-status-blink {
    0%, 82% { opacity: 1; }
    83%, 100% { opacity: 0.58; }
}

html[data-theme="light"] .transition-overlay {
    --transition-line: #1a4d2e;
    --transition-glow: rgba(26, 77, 46, 0.58);
}

html[data-theme="light"] .transition-readout-status {
    color: #eaffeb;
}

@media (max-width: 768px) {
    .transition-readout {
        width: min(300px, calc(100vw - 32px));
        padding: 0.85rem 0.9rem 0.78rem;
    }

    .transition-corner {
        font-size: 0.5rem;
    }

    .transition-corner-top {
        top: 0.8rem;
        right: 0.8rem;
    }

    .transition-corner-bottom {
        bottom: 0.8rem;
        left: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .transition-overlay,
    .transition-panel,
    .transition-edge,
    .transition-readout,
    .transition-readout-progress {
        animation: none !important;
        transition-duration: 1ms !important;
    }
}

/* ------------------------------------------------------------
   Mobile Device Disclaimer Overlay
   ------------------------------------------------------------ */
.mobile-disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000; /* above page transition overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-disclaimer-overlay.hidden {
    display: none;
}

.mobile-disclaimer-box {
    position: relative;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--text);
    box-shadow: 0 0 15px var(--glow);
    padding: 2rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

.mobile-disclaimer-close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: #ff3333;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    z-index: 1;
}

.mobile-disclaimer-close:hover {
    filter: brightness(1.2);
}

.mobile-disclaimer-title {
    color: var(--text);
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    text-transform: uppercase;
    text-shadow: 0 0 5px var(--glow);
}

.mobile-disclaimer-divider {
    color: var(--text);
    margin-bottom: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.9rem;
}

.mobile-disclaimer-message {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.mobile-disclaimer-red {
    color: #ff3333;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
}

.mobile-disclaimer-continue {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    padding: 0.7rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s;
}

.mobile-disclaimer-continue:hover {
    background: var(--text);
    color: var(--bg);
}

/* ------------------------------------------------------------
   Subpage slide-in navigation (triggered by home button hover)
   ------------------------------------------------------------ */
.subpage-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 10000;
    background: var(--bg);
    border-right: none;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

.subpage-nav-overlay.visible {
    transform: translateX(0);
    pointer-events: auto;
    border-right: 1px solid var(--text);
    box-shadow: 0 0 15px var(--glow);
}

.subpage-nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    box-sizing: border-box;
}

.subpage-nav .sidebar-list {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.subpage-nav .sidebar-item {
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.subpage-nav .sidebar-item a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.8rem 2rem;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

.subpage-nav .sidebar-item .default-text,
.subpage-nav .sidebar-item .hover-text {
    color: var(--text);
    text-decoration: none;
    font-size: 1.2rem;
}

.subpage-nav .sidebar-item .hover-text {
    display: none;
    color: var(--text);
    text-decoration: none;
    font-weight: bold;
}

.subpage-nav .nav-disabled {
    pointer-events: none;
    opacity: 0.35;
}

/* Hover behaviour on devices that support hover */
@media (hover: hover) {
    .subpage-nav .sidebar-item:hover {
        background-color: var(--hover-bg);
        text-shadow: 0 0 5px var(--text), 0 0 10px var(--text);
    }

    .subpage-nav .sidebar-item:hover .default-text {
        display: none;
    }

    .subpage-nav .sidebar-item:hover .hover-text {
        display: block;
    }
}

/* Touch devices: no hover effects */
@media (hover: none) {
    .subpage-nav .sidebar-item:hover,
    .subpage-nav .sidebar-item a:hover {
        background: transparent !important;
        color: var(--text) !important;
        text-shadow: none !important;
    }
}

/* Keep subpage nav visually consistent even when page-specific CSS
   adds global anchor underlines, hover backgrounds, or CRT overlays. */
.subpage-nav .sidebar-item a,
.subpage-nav .sidebar-item a:link,
.subpage-nav .sidebar-item a:visited {
    border-bottom: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.subpage-nav .sidebar-item a:hover,
.subpage-nav .sidebar-item a:active {
    background: transparent;
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Opening Screen Overlay
   ------------------------------------------------------------ */
.opening-screen {
    position: fixed;
    inset: 0;
    z-index: 10002; /* above everything, including page transition */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.opening-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* use contain if you want letterboxing */
}