:root {
  /* Light Mode Colors */
  --bg-color: #ece1ca; 
  --poly-fill: #e0d4c0;
  --poly-stroke: #a39e93;
  --tile-size: 3.2rem;
  
  --card-bg: rgba(255, 252, 248, 0.33);
  --btn-bg: rgba(255, 252, 248, 0.66);
  --card-text: #2c2a27;
  --card-highlight: #d95c14; /* Deep, legible orange */
  --card-highlight-hover: #f07022;
  --a-hover-bg: #ffab6b7f;
}

/* Dark Mode Colors */
html.dark {
  --bg-color: #262422;
  --poly-fill: #312d2a;
  --poly-stroke: #544f49;

  --card-bg: rgba(68, 62, 56, 0.355);
  --btn-bg: rgba(20, 18, 16, 0.66);
  --card-text: #e6e1d8;
  --card-highlight: #ff8c42; /* Vibrant, high-contrast orange */
  --card-highlight-hover: #ffaa6b;
  --a-hover-bg: #b16f3d7f;
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 479;
  font-display: swap;
  src: url('./raleway-479-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 479;
  font-display: swap;
  src: url('./raleway-479-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.style-text {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 479;
  font-style: normal;
}

@font-face {
  font-family: 'Random Cohort';
  src: url('randomcohort-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.custom-text {
  font-family: 'Random Cohort', sans-serif;
  font-variant-ligatures: none;
  letter-spacing: -0.05em;
}

.no-js-warning {
  background-color: rgba(255, 0, 0, 0.1);
  color: #ff0000;
  padding: 0.2rem;
  border-radius: 4px;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-color);
  overflow: hidden;
  /* Smooth transition for the background when toggling themes */
  transition: background-color 0.8s ease;
  position: fixed;
  inset: 0;
  touch-action: none; /* Kills pull-to-refresh and dragging */
}

/* Style the SVG polygon via CSS variables */
#maze-polygon {
  fill: var(--poly-fill);
  stroke: var(--poly-stroke);
  transition: fill 0.8s ease, stroke 0.8s ease;
}

@keyframes slow-spin {
  from { transform: translate(-50%, -50%) rotate(15deg); }
  to { transform: translate(-50%, -50%) rotate(375deg); }
}

#maze-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142vmax;
  height: 142vmax;
  animation: slow-spin 900s linear infinite;
  
  /* Lock down interactivity strictly on the background layer */
  pointer-events: none;
  user-select: none;
}

#maze-grid {
  display: grid;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out; 
}

#maze-grid.fade-in {
  opacity: 1;
}

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  display: block;
  transition: transform 1.5s ease-in-out;

  will-change: transform; 
  content-visibility: auto;
  contain-intrinsic-size: var(--tile-size);
}

/* --- UI Layer Positioning --- */
#ui-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through to the background if needed */
  overflow: hidden;
}

/* --- The Card --- */
.glass-card {
  pointer-events: auto;
  box-sizing: border-box;
  width: 90%;
  max-width: 60em;
  padding: 2rem 2rem 3rem 2rem;
  background-color: var(--card-bg);
  color: var(--card-text);
  backdrop-filter: blur(0.13em);
  -webkit-backdrop-filter: blur(0.13em);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 0; 
  text-align: center;

  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  will-change: transform, backdrop-filter, opacity;

  opacity: 0;
  transform: translateY(2vmax);
  transition: background-color 0.8s ease, color 0.8s ease, opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-card.is-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* --- Typography & Rotation --- */
.card-text {
  font-size: 1.8rem;
}

.head-content {
  container-type: inline-size;
  transform: rotate(-0deg);
  margin-bottom: 1rem;
  overflow: hidden;
}

.main-line {
  white-space: nowrap;
  font-size: min(3rem, 6cqi);
  margin: 1rem 0;
}

.interactive {
  color: var(--card-highlight);
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.interactive:hover {
  color: var(--card-highlight-hover);
  /* Optional: Add a subtle glow on hover for extra emphasis */
  text-shadow: 0 0 8px rgba(240, 112, 34, 0.4); 
}

/* --- Scrolling Text & Alpha Gradient Mask --- */
.scroll-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.mask-edges {
  /* This creates the fade-in effect on the left and right edges */
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.scroll-text {
  display: inline-block;
  font-size: min(2rem, 3.33cqi);
}

.scroll-left {
  animation: scroll-l 30s linear infinite;
}

.scroll-right {
  animation: scroll-r 30s linear infinite;
}

@keyframes scroll-l {
  0% { transform: translateX(50%); }
  100% { transform: translateX(-100%); }
}

@keyframes scroll-r {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(50%); }
}

/* --- Expandable Panel (CSS Grid Trick) --- */
.expandable-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-panel.open {
  grid-template-rows: 1fr;
}

.panel-inner {
  overflow: hidden; /* Crucial: hides content when grid row is 0fr */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-inner p {
  margin: 0.3em 0;
}

.panel-inner a {
  text-decoration:none;
  background-color:rgba(0,0,0,0);
  padding:.15em .2em;
  color: var(--card-text);
  transition:background-color .4s ease, color .6s ease;
}

.panel-inner a:hover {
  background-color: var(--a-hover-bg);
}

.panel-inner a:after {
  content:"°";
  color: #ff266c;
  font-size: 1.2rem;
  line-height: 0;
}

/* Theme Toggle Button Styles */
#theme-toggle {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--poly-stroke);
  background-color: var(--btn-bg);
  color: var(--card-text);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, background-color 0.8s ease, border-color 0.8s ease;
}

.icon-sun, .icon-moon {
  width: 24px;
  height: 24px;
  position: absolute;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default (Light Mode) States */
.icon-moon {
  opacity: 0;
  transform: rotate(-45deg) scale(0.5);
}

.icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Dark Mode States */
html.dark .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.dark .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

#theme-toggle:hover {
  transform: scale(1.1);
}