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

@font-face {
  font-family: "ZenKaku";
  src: url("../fonts/ZenKakuGothicAntique-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* переменные */

:root {
  --color-white: #F6F1E8;
  --color-black: #0D0D0D;
  --color-deepgrey: #1E1E1E;
  --color-orange: #FF792E;
  --gap: 8px;
  --padding: 8px;
  --radius: 8px;
  --opacity: 0.2;
  --animation-duration: 400ms;
  --animation-cubic: cubic-bezier(0.8, 0, 0.2, 1);
  
  /* Переменные для курсоров - изолируем от JS */
  --cursor-default: crosshair;
  --cursor-clickable: pointer;
}

@supports(corner-shape: squircle) {
  button {
    corner-shape: squircle;
    border-radius: calc(var(--radius) * 16);
  }

  textarea {
    corner-shape: squircle;
    border-radius: calc(var(--radius) * 8);
  }
}


/* основные стили */

/* Радикально простой подход - только базовые элементы */
html, body {
  cursor: crosshair !important;
}

body {
  display: block;
  margin: auto;
  font-optical-sizing: auto;  
  z-index: 100;
  background-color: var(--color-black);
}

/* Все элементы наследуют crosshair, кроме ссылок */
* {
  cursor: inherit !important;
}

body::-webkit-scrollbar {
    display: none;
}

::selection {
background: var(--color-orange);
color: var(--color-black);
}

textarea {
  caret-color: var(--color-orange);
}


h1, h2, h3, h4, h5, h6, button {
  font-family: "Oranienbaum", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--color-white);
  padding: 0;
  margin: 0;
  position: relative;
}

h1 {
  font-size: 20px;
  line-height: 20px;
  transform: scaleY(2);
  font-variant-emoji: text;
}

h2 {
  font-size: 48px;
  line-height: 28px;
  transform: scaleY(2);
  padding-bottom: calc(var(--padding) * 4);
  padding-top: calc(var(--padding) * 4);
  color: var(--color-orange);
}

h3 {
  font-size: 32px;
  line-height: 32px;
  transform: scaleY(2);
  padding-bottom: calc(var(--padding) * 2);
  opacity: 0.4;
}

h4, h5, h6 {
  font-size: 20px;
  line-height: 20px;
  transform: scaleY(2);
  padding-bottom: calc(var(--padding) * 1);
}

button {
  font-size: 24px;
  line-height: 24px;
  transform: scaleY(2);
  padding-bottom: calc(var(--padding) * 1);
}

p, a, textarea {
  font-family: "ZenKaku", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 20px;
  line-height: 20px;
  text-transform: lowercase;
  color: var(--color-white );
  padding: 0;
  margin: 0;
  position: relative;
}

/* Ссылки всегда pointer - максимальная специфичность */
a {
  cursor: pointer !important;
  color: var(--color-orange);
  transition: var(--animation-duration) var(--animation-cubic);
}

mark {
  color: var(--color-orange);
  background-color: var(--color-deepgrey);
}

.white {
  color: var(--color-white);
}

h1 a {
  font-family: "Oranienbaum", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  opacity: 1;
  color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  width: 100%;
  text-align: center;
}

/* Дополнительная защита для всех состояний ссылок */
a:link, a:visited, a:hover, a:active, a:focus, a:any-link {
  cursor: pointer !important;
  transition: var(--animation-duration) var(--animation-cubic);
}

/* Сохраняем цветовые эффекты ссылок при наведении */
a.blend-invert:hover::after {
  opacity: 0;
}

a:hover {
  transition: var(--animation-duration) var(--animation-cubic);
}

.block {
  width: 24vw;
  height: auto;
  margin: auto;
  text-align: -webkit-center;
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 16vh;
  padding-bottom: 16vh;
}

.none {
  display: none;
}

/* Принудительно убираем pointer-events: none со всех элементов которые могут блокировать ссылки */
body * {
  pointer-events: auto;
  text-align: center;
}

.contacts {
  display: flex;
  position: fixed;
  gap: calc(var(--gap));
  z-index: 105;
  bottom: calc(var(--padding) * 2);
  text-align: -webkit-center;
  text-align: center;
  justify-content: center;
  padding-left: calc(var(--padding) * 2);
  padding-top: calc(var(--padding) * 1.5);
  padding-right: calc(var(--padding) * 2);
  padding-bottom: calc(var(--padding) * 2);
  border-radius: calc(var(--radius) * 2);
  background-color: var(--color-deepgrey);
} 

.logo {
  position: fixed;
  z-index: 105;
  top: calc(var(--padding) * 2);
  text-align: -webkit-center;
  text-align: center;
  justify-content: center;
  padding-left: calc(var(--padding) * 2);
  padding-top: calc(var(--padding) * 2);
  padding-right: calc(var(--padding) * 2);
  padding-bottom: calc(var(--padding) * 2);
  border-radius: calc(var(--radius) * 2);
  background-color: var(--color-deepgrey);
} 

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 8);
  text-align: -webkit-center;
}

.content p:not(.results) {
  text-align: center;
}

#question {
  padding-top: calc(var(--padding) / 2);
}

.module {
  display: flex;
  gap: calc(var(--padding) * 2);
  flex-direction: column;
  align-items: center;
}

.game {
  display: flex;
  gap: calc(var(--padding) * 1);
  flex-direction: column;
  align-items: center;
}

.description {
  opacity: 0.4;
}

.results {
  display: flex;
  gap: calc(var(--padding) * 8);
  flex-direction: column;
  align-items: left;
  justify-self: left;
  padding-top: calc(var(--padding) * 2);
  text-align: left;
  text-align-last: left;
}

.results p {
  width: 100%;
}

.question {
  opacity: calc(var(--opacity) * 2);
}

.theme {
  opacity: calc(var(--opacity) * 4);
}

#theme {
  padding-top: calc(var(--padding) * 2);
  color: var(--color-orange);
  opacity: 1;
}

.answer {
}

#results.block {
  height: auto;
  padding-top: calc(var(--padding) * 20);
  padding-bottom: calc(var(--padding) * 20);
}

#number {
  opacity: calc(var(--opacity) * 2);
}

textarea {
  width: 400px;
  height: 100px;
  color: var(--color-white);
  background-color: var(--color-deepgrey);
  padding-left: calc(var(--padding) * 4);
  padding-top: calc(var(--padding) * 1.5);
  padding-right: calc(var(--padding) * 4);
  padding-bottom: calc(var(--padding) * 2);
  border: 0px solid var(--color-white);
  margin-top: calc(var(--padding) * 4);
  text-align: center;
  place-content: center;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-black) var(--color-white);
  box-shadow: inset 0 0 16px 4px var(--color-orange), inset 0 0 1px 1px var(--color-orange);
  border-radius: calc(var(--radius) * 4);
}


button {
  width: auto;
  color: var(--color-black);
  background-color: var(--color-orange);
  padding-left: calc(var(--padding) * 2);
  padding-top: calc(var(--padding) * 5.5);
  padding-right: calc(var(--padding) * 2);
  padding-bottom: calc(var(--padding) * 6);
  border: none;
  margin-top: calc(var(--padding) * 10);
  margin-bottom: calc(var(--padding) * 10);
  box-shadow: inset 0 0 16px 4px var(--color-white), inset 0 0 1px 1px var(--color-white);
  border-radius: calc(var(--radius) * 8);
}

.buttons { 
  display: flex;
  gap: calc(var(--gap) / 4);
  padding-top: calc(var(--padding) * 2);
  justify-content: center;
  flex-direction: row;
}


#resset {
  margin-top: calc(var(--padding) * 1);
  margin-bottom: calc(var(--padding) * 10);
}


*:focus {
  outline: none;
}

.error {
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 1000px) {


  h1 {
    font-size: 48px;
    line-height: 48px;
    padding-bottom: calc(var(--padding) / 2);
  }

  h2 {
    font-size: 80px;
    line-height: 48px;
    padding-top: calc(var(--padding) * 4);
    padding-bottom: calc(var(--padding) * 8);
  }

  h3 {
    font-size: 64px;
    line-height: 64px;
    padding-bottom: calc(var(--padding) * 4);
  }

  h4, h5, h6 {
    font-size: 40px;
    line-height: 40px;
    padding-bottom: calc(var(--padding) * 2);
  }

  button {
    font-size: 48px;
    line-height: 48px;
    padding-bottom: calc(var(--padding) * 2);
  }

  p, a, textarea {
    font-size: 40px;
    line-height: 40px;
  }

  .none {
    display: none;
  }

  textarea {
    width: 640px;
    height: 400px;
    margin-top: calc(var(--padding) * 10);
    border: 4px solid var(--color-black);
    box-shadow: inset 0 0 32px 8px var(--color-orange), inset 0 0 2px 2px var(--color-orange);
  }

  button {
    padding-left: calc(var(--padding) * 4);
    padding-top: calc(var(--padding) * 11.5);
    padding-right: calc(var(--padding) * 4);
    padding-bottom: calc(var(--padding) * 12);
    margin-top: calc(var(--padding) * 10);
    margin-bottom: calc(var(--padding) * 10);
    box-shadow: inset 0 0 32px 8px var(--color-white), inset 0 0 2px 2px var(--color-white);
  }

  .logo {
    top: calc(var(--padding) * 4);
    padding-left: calc(var(--padding) * 4);
    padding-top: calc(var(--padding) * 4);
    padding-right: calc(var(--padding) * 4);
    padding-bottom: calc(var(--padding) * 4);
    border-radius: calc(var(--radius) * 4);
  } 

  .contacts {
    gap: calc(var(--gap) * 2);
    bottom: calc(var(--padding) * 4);
    padding-left: calc(var(--padding) * 4);
    padding-top: calc(var(--padding) * 3);
    padding-right: calc(var(--padding) * 4);
    padding-bottom: calc(var(--padding) * 4);
    border-radius: calc(var(--radius) * 4);
  } 

  .block {
    width: 94vw;
  }

  .contacts {
    gap: calc(var(--gap) * 2);
  }

  .button  {
      margin-top: calc(var(--padding) * 8);
      margin-bottom: calc(var(--padding) * 8);
    }

}