@import url('/assets/fonts/fonts.css');

:root {
  --bg-0: #100a08;
  --bg-1: #24130f;
  --ink: #f3e4c8;
  --ink-soft: #ceb28b;
  --brass: #cb9551;
  --brass-dark: #7f572c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Forum', 'Times New Roman', serif;
  background:
    radial-gradient(90rem 42rem at 50% -8%, rgb(122 54 31 / 33%) 0%, transparent 55%),
    radial-gradient(90rem 48rem at 12% 120%, rgb(62 22 15 / 36%) 0%, transparent 58%),
    linear-gradient(170deg, var(--bg-1), var(--bg-0) 58%);
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.035) 0%, transparent 38%),
    radial-gradient(circle at 82% 76%, rgb(255 255 255 / 0.03) 0%, transparent 40%);
  mix-blend-mode: screen;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    transparent 0%,
    rgb(255 231 186 / 2%) 6%,
    transparent 12%,
    rgb(255 231 186 / 2%) 18%,
    transparent 24%
  );
  background-size: 100% 8px;
  opacity: 0.24;
}

.page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.top-bar {
  position: absolute;
  z-index: 20;
  top: max(0.7rem, env(safe-area-inset-top));
  left: max(0.9rem, env(safe-area-inset-left));
  right: max(0.9rem, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  pointer-events: none;
}

.site-title {
  margin: 0;
  font-family: 'Limelight', 'Cinzel', serif;
  font-size: clamp(1.9rem, 4.1vw, 3.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f4dfba;
  pointer-events: none;
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
  max-width: min(62vw, 26rem);
}

.top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.52rem;
  pointer-events: none;
}

.help-link {
  border: 1px solid rgb(196 142 78 / 42%);
  border-radius: 8px;
  padding: 0.35rem 0.62rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  background: rgb(14 8 7 / 62%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
  pointer-events: auto;
}

.scores-toggle-button {
  display: none;
  border: 1px solid rgb(196 142 78 / 42%);
  border-radius: 8px;
  padding: 0.35rem 0.62rem;
  color: var(--ink);
  font: 700 0.9rem/1 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.03em;
  background: rgb(14 8 7 / 62%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
  cursor: pointer;
  pointer-events: auto;
}

.scores-toggle-button:hover {
  border-color: rgb(220 170 102 / 55%);
}

.check-puzzle-button {
  border: 1px solid rgb(196 142 78 / 52%);
  border-radius: 8px;
  padding: 0.38rem 0.66rem;
  color: var(--ink);
  font: 700 0.9rem/1 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.03em;
  background: rgb(15 9 8 / 74%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
  cursor: pointer;
  pointer-events: auto;
}

.check-puzzle-button:hover {
  border-color: rgb(220 170 102 / 68%);
}

.check-puzzle-button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.check-puzzle-button.is-locked {
  opacity: 0.58;
}

.help-link:hover {
  border-color: rgb(220 170 102 / 55%);
}

.date-panel {
  display: grid;
  gap: 0.28rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(196 142 78 / 42%);
  border-radius: 10px;
  background: rgb(14 8 7 / 62%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
  pointer-events: auto;
}

.leaderboard-panel {
  display: grid;
  gap: 0.28rem;
  min-width: 12rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(196 142 78 / 42%);
  border-radius: 10px;
  background: rgb(14 8 7 / 62%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
  pointer-events: auto;
}

.leaderboard-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.leaderboard-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.leaderboard-value {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 0.96rem;
  color: var(--ink);
}

.leaderboard-status {
  min-height: 0.95rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.leaderboard-status.is-error {
  color: #e8b3a8;
}

.leaderboard-histogram {
  margin-top: 0.08rem;
  height: 2.1rem;
  display: flex;
  align-items: end;
  gap: 0.14rem;
  border: 1px solid rgb(196 142 78 / 28%);
  border-radius: 7px;
  padding: 0.22rem 0.24rem;
  background: rgb(18 10 8 / 64%);
}

.leaderboard-bar {
  flex: 1 1 0;
  min-width: 6px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgb(225 178 115 / 88%), rgb(163 113 58 / 88%));
  opacity: 0.9;
}

.leaderboard-bar.is-empty {
  opacity: 0.22;
}

.date-panel-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.puzzle-date-toggle {
  min-width: 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgb(196 142 78 / 45%);
  border-radius: 6px;
  background: rgb(23 13 11 / 90%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.puzzle-date-toggle:hover {
  border-color: rgb(220 170 102 / 55%);
}

.puzzle-date-toggle:focus-visible {
  outline: 2px solid rgb(224 176 106 / 50%);
  outline-offset: 2px;
}

.puzzle-date-arrow {
  font-size: 0.8rem;
  opacity: 0.85;
}

.puzzle-date-menu {
  max-height: min(52vh, 24rem);
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid rgb(196 142 78 / 45%);
  border-radius: 8px;
  background: rgb(23 13 11 / 95%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 42%);
}

.puzzle-date-option {
  width: 100%;
  padding: 0.36rem 0.48rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.puzzle-date-option:hover {
  background: rgb(194 141 76 / 16%);
}

.puzzle-date-option.is-selected {
  background: rgb(194 141 76 / 28%);
  color: #f9e9ce;
}

.hex-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, rgb(35 18 13 / 95%), rgb(17 10 8 / 96%));
  overflow: hidden;
}

.scene-loader {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transform: translate(-50%, -50%);
  padding: 0.6rem 0.85rem;
  border: 1px solid rgb(196 142 78 / 42%);
  border-radius: 10px;
  background: rgb(14 8 7 / 78%);
  color: var(--ink);
  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
  backdrop-filter: blur(2px);
}

.event-toast-stack {
  position: fixed;
  z-index: 50;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.55rem;
  width: min(22rem, calc(100vw - 1.4rem));
  pointer-events: none;
}

.event-toast {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.62rem 0.62rem 0.62rem 0.72rem;
  border: 1px solid rgb(196 142 78 / 46%);
  border-left: 3px solid rgb(214 159 92 / 72%);
  border-radius: 10px;
  background: linear-gradient(160deg, rgb(38 23 18 / 96%), rgb(20 12 10 / 96%));
  box-shadow: 0 12px 24px rgb(0 0 0 / 38%);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: auto;
}

.event-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.event-toast-message {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.3;
}

.event-toast-close {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgb(214 159 92 / 52%);
  border-radius: 999px;
  background: rgb(15 8 6 / 84%);
  color: var(--ink);
  font: 700 0.68rem/1 'Cinzel', 'Times New Roman', serif;
  cursor: pointer;
}

.event-toast-close:hover {
  border-color: rgb(234 188 129 / 72%);
}

.event-toast-close:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.event-toast.is-error {
  border-color: rgb(230 133 114 / 58%);
  border-left-color: rgb(236 155 140 / 86%);
}

.event-toast.is-error .event-toast-close {
  border-color: rgb(230 133 114 / 58%);
}

.event-toast.is-error .event-toast-close:hover {
  border-color: rgb(243 168 155 / 78%);
}

.tile-dialog-overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  overflow-y: auto;
  background:
    radial-gradient(80rem 38rem at 50% -12%, rgb(130 58 34 / 24%) 0%, transparent 62%),
    linear-gradient(170deg, rgb(30 16 13 / 97%), rgb(14 8 7 / 99%) 62%);
}

.tile-dialog-overlay[hidden] {
  display: none;
}

.tile-dialog {
  width: min(42rem, calc(100vw - 1.2rem));
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  padding: 1.2rem 0.9rem 2rem;
}

.tile-dialog-header {
  margin-bottom: 1.1rem;
}

.tile-dialog-header h2 {
  margin: 0;
  text-align: center;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.06rem, 2.8vw, 1.45rem);
  letter-spacing: 0.04em;
}

.tile-chain-stack {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding-bottom: 1.2rem;
}

.chain-card {
  width: min(26rem, calc(100vw - 2rem));
  min-height: 4.25rem;
  display: grid;
  gap: 0.32rem;
  align-content: center;
  padding: 0.72rem 0.86rem;
  border: 1px solid rgb(218 165 97 / 42%);
  border-radius: 10px;
  background: linear-gradient(160deg, rgb(54 32 23 / 92%), rgb(28 16 12 / 94%));
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
}

.chain-card.is-editable {
  cursor: pointer;
}

.chain-card.is-editable:hover {
  border-color: rgb(239 185 124 / 58%);
}

.chain-card.is-editable:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.chain-card.is-editing {
  border-color: rgb(243 190 131 / 74%);
  box-shadow:
    0 12px 26px rgb(0 0 0 / 32%),
    0 0 0 1px rgb(255 223 177 / 22%) inset;
}

.chain-card[data-type='actor'] {
  border-color: rgb(134 175 228 / 46%);
}

.chain-card[data-type='film'] {
  border-color: rgb(221 152 108 / 46%);
}

.chain-card.is-endpoint {
  border-width: 2px;
  border-color: rgb(238 191 124 / 62%);
  background: linear-gradient(162deg, rgb(81 48 33 / 95%), rgb(38 22 16 / 96%));
  box-shadow:
    0 12px 28px rgb(0 0 0 / 34%),
    0 0 0 1px rgb(255 224 176 / 18%) inset;
}

.chain-card-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.chain-card-value {
  font-family: 'Cinzel', 'Times New Roman', serif;
  line-height: 1.2;
}

.chain-card-placeholder {
  color: #e3c79f;
  opacity: 0.9;
}

.chain-plus {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgb(214 159 92 / 56%);
  border-radius: 999px;
  background: rgb(19 11 9 / 82%);
  color: #f1d9b4;
  font: 700 1rem/1 'Cinzel', 'Times New Roman', serif;
  cursor: pointer;
}

.chain-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.chain-card-editor {
  display: grid;
  gap: 0.35rem;
}

.chain-card-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgb(204 150 84 / 54%);
  border-radius: 7px;
  background: rgb(21 12 9 / 90%);
  color: var(--ink);
  font: inherit;
}

.chain-card-input:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.chain-card-helper {
  min-height: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.chain-card-results {
  max-height: 11.5rem;
  overflow: auto;
  display: grid;
  gap: 0.28rem;
  scrollbar-width: thin;
  scrollbar-color: rgb(192 140 78 / 70%) rgb(20 12 10 / 70%);
}

.chain-card-results::-webkit-scrollbar {
  width: 9px;
}

.chain-card-results::-webkit-scrollbar-track {
  background: rgb(20 12 10 / 70%);
  border-radius: 999px;
}

.chain-card-results::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(217 168 102 / 82%), rgb(168 117 63 / 82%));
  border-radius: 999px;
  border: 1px solid rgb(31 18 13 / 78%);
}

.chain-card-results::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(229 183 121 / 88%), rgb(183 130 74 / 88%));
}

.chain-card-result {
  width: 100%;
  padding: 0.34rem 0.46rem;
  border: 1px solid rgb(200 146 80 / 44%);
  border-radius: 7px;
  background: rgb(23 13 11 / 92%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chain-card-result:hover {
  border-color: rgb(234 188 129 / 72%);
  background: rgb(34 20 16 / 94%);
}

.chain-card-result:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.chain-plus:hover {
  border-color: rgb(234 188 129 / 72%);
}

.chain-plus:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.chain-minus {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgb(228 136 122 / 56%);
  border-radius: 999px;
  background: rgb(29 12 10 / 84%);
  color: #f3c3b9;
  font: 700 1rem/1 'Cinzel', 'Times New Roman', serif;
  cursor: pointer;
}

.chain-minus:hover {
  border-color: rgb(244 164 152 / 74%);
}

.chain-minus:focus-visible {
  outline: 2px solid rgb(244 164 152 / 56%);
  outline-offset: 2px;
}

.tile-dialog-close {
  position: fixed;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.6rem, env(safe-area-inset-right));
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgb(214 159 92 / 52%);
  border-radius: 6px;
  background: rgb(17 9 8 / 84%);
  color: var(--ink);
  font: 700 0.9rem/1 'Cinzel', 'Times New Roman', serif;
  cursor: pointer;
}

.tile-dialog-close:hover {
  border-color: rgb(234 188 129 / 72%);
}

.tile-dialog-close:focus-visible {
  outline: 2px solid rgb(231 185 122 / 55%);
  outline-offset: 2px;
}

.score-overlay {
  position: fixed;
  z-index: 32;
  inset: 0;
  overflow-y: auto;
  background:
    radial-gradient(80rem 38rem at 50% -12%, rgb(130 58 34 / 24%) 0%, transparent 62%),
    linear-gradient(170deg, rgb(30 16 13 / 97%), rgb(14 8 7 / 99%) 62%);
}

.score-overlay[hidden] {
  display: none;
}

.score-dialog {
  width: min(56rem, calc(100vw - 1.2rem));
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  padding: 1.2rem 0.9rem 2rem;
}

.score-close {
  position: fixed;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.6rem, env(safe-area-inset-right));
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgb(214 159 92 / 52%);
  border-radius: 6px;
  background: rgb(17 9 8 / 84%);
  color: var(--ink);
  font: 700 0.9rem/1 'Cinzel', 'Times New Roman', serif;
  cursor: pointer;
}

.score-close:hover {
  border-color: rgb(234 188 129 / 72%);
}

.score-header h2 {
  margin: 0;
  text-align: center;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.06rem, 2.8vw, 1.45rem);
  letter-spacing: 0.04em;
}

.score-summary {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 1rem;
}

.score-summary.is-success {
  color: #ccefcf;
}

.score-summary.is-fail {
  color: #f2c1b7;
}

.score-results {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-bottom: 1.2rem;
}

.score-chain {
  display: grid;
  gap: 0.45rem;
  padding: 0.72rem 0.86rem;
  border: 1px solid rgb(218 165 97 / 42%);
  border-radius: 10px;
  background: linear-gradient(160deg, rgb(54 32 23 / 92%), rgb(28 16 12 / 94%));
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
}

.score-chain-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.score-chain-metrics {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78rem;
  color: #e1c49f;
}

.score-chain-errors {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #efb7ac;
}

.score-chain-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.score-node {
  border: 1px solid rgb(218 165 97 / 42%);
  border-radius: 7px;
  padding: 0.2rem 0.44rem;
  background: rgb(19 11 9 / 82%);
  color: var(--ink);
  font-size: 0.86rem;
}

.score-node.is-actor {
  border-color: rgb(134 175 228 / 46%);
}

.score-node.is-film {
  border-color: rgb(221 152 108 / 46%);
}

.score-edge-mark {
  font: 700 0.82rem/1 'Cinzel', 'Times New Roman', serif;
}

.score-edge-mark.is-valid {
  color: #8fdf9a;
}

.score-edge-mark.is-invalid {
  color: #f29f92;
}

.scene-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.scene-loader-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(255 255 255 / 20%);
  border-top-color: #e7b16c;
  border-radius: 50%;
  animation: scene-spin 0.8s linear infinite;
}

.scene-loader-text {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

@keyframes scene-spin {
  to {
    transform: rotate(360deg);
  }
}

.hex-board canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 760px) {
  .top-bar {
    top: max(0.6rem, env(safe-area-inset-top));
    left: max(0.7rem, env(safe-area-inset-left));
    right: max(0.7rem, env(safe-area-inset-right));
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .site-title {
    font-size: clamp(1.35rem, 7.2vw, 2rem);
    max-width: calc(100vw - 1.4rem);
    line-height: 1.06;
  }

  .top-actions {
    position: fixed;
    left: max(0.7rem, env(safe-area-inset-left));
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'check check'
      'scores help';
    gap: 0.45rem;
    align-items: stretch;
  }

  .help-link {
    grid-area: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    padding: 0.32rem 0.56rem;
  }

  .date-panel {
    position: fixed;
    top: calc(max(0.6rem, env(safe-area-inset-top)) + 2.15rem);
    left: max(0.7rem, env(safe-area-inset-left));
    right: max(0.7rem, env(safe-area-inset-right));
    width: auto;
    max-width: calc(100vw - 1.4rem);
  }

  .leaderboard-panel {
    position: fixed;
    left: max(0.7rem, env(safe-area-inset-left));
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + 5.35rem);
    width: auto;
    max-width: calc(100vw - 1.4rem);
    display: none;
  }

  .leaderboard-panel.is-open {
    display: grid;
  }

  .check-puzzle-button {
    grid-area: check;
    width: 100%;
  }

  .scores-toggle-button {
    grid-area: scores;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .puzzle-date-toggle {
    min-width: min(13rem, calc(100vw - 2.4rem));
  }

  .event-toast-stack {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    width: min(21rem, calc(100vw - 1.2rem));
  }
}