@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
}

:root {
  --thh-font-family: 'Segoe UI', sans-serif;
  --thh-font-scale: 1;
  --thh-bg-color: #071629;
  --thh-text-color: #ffffff;
  --thh-panel-bg: rgba(7, 22, 41, 0.85);
  --thh-panel-border: rgba(255, 255, 255, 0.16);
  --thh-viewport-offset-top: 0px;
  --thh-viewport-offset-bottom: 0px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--thh-bg-color);
  color: var(--thh-text-color);
  font-family: var(--thh-font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-stack {
  position: relative;
  width: min(100vw, calc(100vh * (16 / 9)));
  height: min(100vh, calc(100vw * (9 / 16)));
  max-width: 1280px;
  max-height: 720px;
}

.loading-state {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top, 0px) + var(--thh-viewport-offset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  letter-spacing: 0.05em;
  z-index: 4;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#glCanvas {
  z-index: 0;
}

#mainCanvas {
  z-index: 1;
}

#overlayCanvas {
  z-index: 2;
  pointer-events: none;
  image-rendering: pixelated;
}

.accessibility-panel {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top, 0px) + var(--thh-viewport-offset-top, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--thh-panel-bg);
  border: 1px solid var(--thh-panel-border);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  font-size: calc(0.85rem * var(--thh-font-scale));
  z-index: 3;
}

.accessibility-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}

.accessibility-panel select,
.accessibility-panel input[type='checkbox'] {
  accent-color: #ffd166;
}

.accessibility-panel__action {
  margin-top: 4px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--thh-panel-border);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}

.accessibility-panel__action:disabled {
  opacity: 0.6;
  cursor: default;
}

.toast-region {
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--thh-viewport-offset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}

.toast { 
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(7, 22, 41, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--thh-text-color);
  font-size: calc(0.9rem * var(--thh-font-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: toast-enter 160ms ease-out forwards;
}

.toast--info {
  border-color: rgba(110, 231, 255, 0.45);
  background: rgba(10, 48, 72, 0.94);
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.debug-overlay {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px) + var(--thh-viewport-offset-top, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  padding: 12px 16px;
  min-width: 240px;
  max-width: 320px;
  font-size: calc(0.78rem * var(--thh-font-scale));
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--thh-text-color);
  background: rgba(7, 22, 41, 0.9);
  border: 1px solid var(--thh-panel-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  z-index: 6;
  pointer-events: none;
}

.debug-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  margin-bottom: 6px;
}

.debug-overlay__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.debug-overlay__status {
  font-family: 'Atkinson Hyperlegible', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
}

.debug-overlay__metrics {
  margin: 0;
  font-family: 'Fira Code', 'Source Code Pro', monospace;
  font-size: 0.76rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.debug-overlay__section-title {
  margin: 8px 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.debug-overlay__instructions {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
  opacity: 0.88;
  font-size: 0.72rem;
}

.debug-overlay__instructions li {
  list-style: disc;
}

@media (max-width: 600px) {
  .accessibility-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--thh-viewport-offset-bottom, 0px));
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(340px, 90vw);
  }

  .accessibility-panel label {
    width: 140px;
  }

  .accessibility-panel__action {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .accessibility-panel {
    top: calc(16px + env(safe-area-inset-top, 0px) + var(--thh-viewport-offset-top, 0px) + 40px);
    bottom: auto;
    right: calc(24px + env(safe-area-inset-right, 0px));
    left: auto;
    transform: none;
    flex-direction: row;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .accessibility-panel {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--thh-viewport-offset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: min(420px, 90vw);
  }

  .accessibility-panel label {
    width: 160px;
  }
}