@font-face {
  font-family: "Palui SP";
  src: url("fonts/PaluiSP-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

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

:root {
  --background-color: #f2b0c1;
  --grid-line-color: #f39eae;
  --letter-color: #cc0e1f;
  --hud-background: rgba(255, 255, 255, 0.3);
  --hud-text-color: #b30b1c;
  --hud-shadow: rgba(0, 0, 0, 0.15);
  --panel-side-offset: clamp(16px, 8vw, 136px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background-color);
  font-family: "Arial", sans-serif;
  overflow: hidden;
  height: 100vh;
}

#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

.score-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Asset", "Palui SP", serif;
  font-weight: 400;
  font-size: clamp(64px, 18vw, 110px);
  color: var(--letter-color);
  letter-spacing: -0.04em;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.controls-hint {
  position: fixed;
  left: 50%;
  top: calc(50% + min(8vh, 52px));
  transform: translateX(-50%);
  display: flex;
  gap: clamp(16px, 4vw, 32px);
  font-family: "Geist Mono", "Palui SP", monospace;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  color: #ffffff;
  pointer-events: none;
  user-select: none;
}

.controls-hint__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.2;
  min-height: clamp(24px, 4vh, 32px);
}

.controls-hint__arrow {
  opacity: 1;
  display: inline-block;
  transform-origin: center;
}

.controls-hint__key {
  text-transform: lowercase;
  opacity: 0.64;
  display: inline-block;
  transform-origin: center;
}

.control-pulse {
  animation: control-pulse 700ms cubic-bezier(0.22, 0.66, 0.32, 1);
}

/* alternate directional effect */
.control-spin {
  animation: control-spin 760ms cubic-bezier(0.28, 0.9, 0.45, 1.2);
}

@keyframes control-pulse {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-11px) scale(1.1);
  }
  55% {
    transform: translateY(4px) scale(0.95);
  }
  78% {
    transform: translateY(-4px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes control-spin {
  0% {
    transform: rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  28% {
    transform: rotate(-16deg) scale(1.12);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
  }
  55% {
    transform: rotate(12deg) scale(0.95);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  }
  78% {
    transform: rotate(-6deg) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.32));
  }
  100% {
    transform: rotate(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}

.info-panel {
  position: fixed;
  left: var(--panel-side-offset);
  right: var(--panel-side-offset);
  top: clamp(24px, 12vh, 80px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: clamp(32px, 12vw, 120px);
  row-gap: clamp(28px, 6vh, 48px);
  font-family: "Geist Mono", "Palui SP", monospace;
  font-size: clamp(14px, 1.8vw, 16px);
  color: #cc0e1f;
}

.info-panel__section {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vh, 20px);
}

.info-panel__section--contacts {
  align-items: flex-end;
  text-align: right;
}

.info-panel__title {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.info-panel__links {
  display: flex;
  gap: clamp(20px, 6vw, 32px);
  position: relative;
  flex-wrap: wrap;
}

.info-panel__section--contacts .info-panel__links {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  :root {
    --panel-side-offset: clamp(12px, 6vw, 48px);
  }

  .info-panel {
    right: auto;
    width: calc(100% - 2 * var(--panel-side-offset));
    flex-direction: column;
    align-items: flex-start;
    column-gap: 0;
    row-gap: clamp(20px, 6vh, 32px);
  }

  .info-panel__section--contacts {
    align-items: flex-start;
    text-align: left;
  }

  .info-panel__section--contacts .info-panel__links {
    justify-content: flex-start;
  }

  .info-panel__links {
    gap: clamp(16px, 8vw, 28px);
  }
}

.info-panel__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: clamp(2px, 0.8vh, 4px) 0;
}

.hover-star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 16px);
  height: var(--size, 16px);
  color: rgba(255, 255, 255, var(--opacity, 0.8));
  transform: translate(-50%, -50%) scale(0.1);
  pointer-events: none;
  animation: hover-star-fly var(--duration, 800ms) ease-out forwards;
}

.hover-star svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes hover-star-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  35% {
    opacity: var(--opacity, 0.8);
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1);
    opacity: 0;
  }
}