@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cinzel-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cinzel-900.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-900.woff2") format("woff2");
}

:root {
  --gold: #d4af37;
  --gold-dim: #8a6a24;
  --ink: #0a0c18;
  --card: rgba(12, 14, 28, 0.94);
  --wine: #5c1a32;
  --wine-dark: #2e101c;
  --navy: #12162a;
  --ivory: #e8d5a3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  background: #0a0c16;
  color: var(--gold);
  font-family: "Cinzel", serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  --pad: 12px;
  --fit-w: calc(100vw - var(--pad) * 2);
  --fit-h: calc(100svh - var(--pad) * 2);
  position: relative;
  width: min(var(--fit-w), calc(var(--fit-h) * 16 / 9));
  height: min(var(--fit-h), calc(var(--fit-w) * 9 / 16));
  max-width: 100vw;
  max-height: 100svh;
  margin: 0 auto;
  background: #0a0c16;
  overflow: hidden;
  flex: 0 0 auto;
}

html.force-land,
html.force-land body {
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

html.force-land #stage {
  --vis-w: calc(100vw - 16px);
  --vis-h: calc(100svh - 16px);
  position: fixed;
  height: min(var(--vis-w), calc(var(--vis-h) * 9 / 16));
  width: calc(min(var(--vis-w), calc(var(--vis-h) * 9 / 16)) * 16 / 9);
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

#scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.07) 0px,
    rgba(0, 0, 0, 0.07) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  z-index: 4;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.screen.active { display: flex; }

#title-screen {
  background: #0a0c16;
  overflow: hidden;
}

#title-screen .void {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(92, 26, 50, 0.28), transparent 52%),
    radial-gradient(ellipse at 50% 80%, rgba(18, 22, 48, 0.9), #0a0c16 70%);
}

#title-screen .rift {
  position: absolute;
  left: 50%;
  top: -4%;
  height: 108%;
  width: 18%;
  z-index: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 12px #d4af37) drop-shadow(0 0 32px #8a6a24);
  opacity: 0.92;
  animation: riftPulse 2.8s ease-in-out infinite;
}

@keyframes riftPulse {
  0%, 100% { filter: drop-shadow(0 0 8px #e6c35c) drop-shadow(0 0 22px #a07c28); }
  50% { filter: drop-shadow(0 0 16px #fff3c4) drop-shadow(0 0 36px #e6c35c); }
}

.embers {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #e6c35c 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 22%, #fff3c4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 70%, #e6c35c 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 78%, #c9a227 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 55%, #fff6c8 50%, transparent 51%);
  animation: drift 8s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

.title-col {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 7% 8%;
}

.ver {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 3;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #8a7340;
  pointer-events: none;
}

.privacy-link {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 3;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8a7340;
  text-decoration: none;
  pointer-events: auto;
}
.privacy-link:hover,
.privacy-link:focus {
  color: #d4af37;
}

.series {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  margin-bottom: 0.55em;
}

.presents-line {
  display: block;
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(11px, 2.4vw, 18px);
  letter-spacing: 0.22em;
  white-space: nowrap;
  color: #d4af37;
  -webkit-text-stroke: 0.7px #1a1430;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 #2e101c, 0 0 10px rgba(212, 175, 55, 0.35);
}

.series span:last-child {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.42em;
  font-size: clamp(8px, 1.3vw, 11px);
  text-transform: lowercase;
  color: #d4af37;
  text-shadow: 0 1px 2px #0a0c16;
}

.title-col h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(18px, 4.6vw, 44px);
  line-height: 1;
  white-space: nowrap;
  color: #e8d5a3;
  -webkit-text-stroke: 1.5px #1a1430;
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 #2e101c,
    0 0 14px rgba(18, 22, 42, 0.85);
  margin-bottom: 0.35em;
}

.era-tag {
  font-size: clamp(11px, 1.7vw, 15px);
  letter-spacing: 0.28em;
  color: #7ee0ea;
  -webkit-text-stroke: 0.6px #0a1c28;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 #07131f, 0 0 10px rgba(7, 19, 31, 0.9);
  margin-bottom: 0.7em;
}

.diff-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1.1em;
  width: min(420px, 92%);
}

.diff-row .gold-btn {
  min-width: 0;
  flex: 1 1 70px;
  padding: 7px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.diff-row .gold-btn.on {
  background: linear-gradient(#6e2440, #3a1428);
  border-color: #e6c35c;
  color: #f3e6c0;
  box-shadow: 0 0 12px rgba(230, 195, 92, 0.28);
}

.keys {
  display: none;
  position: absolute;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 6;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  background: rgba(8, 10, 22, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #e8d5a3;
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  pointer-events: auto;
}

.keys p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keys b { color: #e6c35c; margin: 0 2px 0 7px; }
.keys b:first-child { margin-left: 0; }

.keys button {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #8a6a24;
  background: rgba(18, 22, 42, 0.9);
  color: #d4af37;
  font-family: "Cinzel", serif;
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.show-keys .keys { display: flex; }

.keys-show {
  display: none;
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 6;
  appearance: none;
  border: 1px solid #8a6a24;
  background: rgba(8, 10, 22, 0.78);
  color: #d4af37;
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 5px 9px;
  cursor: pointer;
}

.keys-off .keys-show { display: block; }
.show-touch .keys,
.show-touch .keys-show { display: none !important; }

.btn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.gold-btn {
  appearance: none;
  min-width: 220px;
  padding: 12px 28px;
  border: 2px solid #d4af37;
  background: linear-gradient(#6e2440, #3a1428);
  color: #e8d5a3;
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: 0.22em;
  font-size: 14px;
  cursor: pointer;
  text-shadow: 0 1px 0 #1a0c14;
  box-shadow: 0 0 14px rgba(92, 26, 50, 0.4), inset 0 1px 0 rgba(232, 213, 163, 0.15);
}

.gold-btn:hover,
.gold-btn:focus {
  background: linear-gradient(#8a3050, #4a1a32);
  color: #f3e6c0;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  outline: none;
}

.gold-btn:active { transform: translateY(1px); }

.gold-btn.ghost {
  background: rgba(18, 22, 42, 0.88);
  box-shadow: none;
  border: 2px solid #8a6a24;
  color: #d4af37;
  text-shadow: 0 1px 0 #0a0c16;
}

.gold-btn.ghost:hover,
.gold-btn.ghost:focus {
  background: #5c1a32;
  border-color: #d4af37;
  color: #e8d5a3;
}

.gold-btn.muted {
  color: #8a7340;
  border-color: #4a3a20;
  background: #1a1830;
}

.card {
  width: min(420px, 88%);
  background: var(--card);
  border: 1px solid var(--gold-dim);
  padding: 28px 26px 24px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(230, 195, 92, 0.05);
}

.card.dead { border-color: #8a3030; }

.card h2 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: clamp(22px, 4vw, 32px);
  color: #f3e2a0;
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}

.card.dead h2 { color: #e8c070; }

.card dl {
  text-align: left;
  margin: 16px 0 14px;
}

.card dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(230, 195, 92, 0.12);
  font-size: 13px;
}

.card dt { color: var(--gold); letter-spacing: 0.12em; }
.card dd { color: #d7c89a; font-family: Georgia, serif; }

.hint {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.45;
  color: #bba86a;
  margin: 10px 0 18px;
}

#load-screen {
  background: #000;
  z-index: 8;
}

.load-txt {
  letter-spacing: 0.4em;
  font-size: 12px;
  animation: riftPulse 1.6s ease-in-out infinite;
}

#pause-screen,
#dead-screen,
#win-screen,
#how-screen,
#era-screen,
#board-screen {
  background: rgba(0, 0, 0, 0.55);
}

.score-line {
  font-family: "Cinzel", serif;
  letter-spacing: 0.18em;
  color: #d4af37;
  margin: 0 0 10px;
}
.score-line strong { color: #e8d5a3; }

.score-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.score-form input {
  min-width: 140px;
  padding: 10px 12px;
  border: 2px solid #8a6a24;
  background: #12162a;
  color: #e8d5a3;
  font-family: "Cinzel", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.score-form .gold-btn { min-width: 0; padding: 10px 16px; }

.board-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  max-height: 42vh;
  overflow: auto;
}
.board-list li {
  display: grid;
  grid-template-columns: 1.6em 1fr auto;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  color: #e8d5a3;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.board-list li span:first-child { color: #d4af37; }
.board-list .empty { display: block; text-align: center; color: #8a7340; border: 0; }

.gold-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  color: #8a7340;
  background: #1a1830;
  border-color: #4a3a20;
  box-shadow: none;
}

.era-list .gold-btn { min-width: 280px; }

.touch {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.touch button {
  pointer-events: auto;
  border: 1px solid rgba(230, 195, 92, 0.55);
  background: rgba(8, 6, 4, 0.58);
  color: #e6c35c;
  font-family: "Cinzel", serif;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  backdrop-filter: blur(6px);
}

.touch button:active,
.touch button.held {
  background: rgba(230, 195, 92, 0.38);
  color: #fff6c8;
  box-shadow: 0 0 14px rgba(230, 195, 92, 0.35);
}

.dpad {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 168px;
  height: 168px;
  pointer-events: none;
}

.dpad button {
  position: absolute;
  width: 56px;
  height: 56px;
  font-size: 18px;
  border-radius: 10px;
}

.dpad button::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.dpad-up { left: 56px; top: 0; border-radius: 10px 10px 4px 4px; }
.dpad-down { left: 56px; bottom: 0; border-radius: 4px 4px 10px 10px; }
.dpad-left { left: 0; top: 56px; border-radius: 10px 4px 4px 10px; }
.dpad-right { right: 0; top: 56px; border-radius: 4px 10px 10px 4px; }

.atk-pad {
  left: auto;
  right: max(10px, env(safe-area-inset-right));
}

.atk-pad button {
  font-size: 9px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atk-pad span {
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
  pointer-events: none;
}

.atk-pad .dpad-right,
.act-jump {
  background: rgba(212, 175, 55, 0.62);
  border: 2px solid #e6c35c;
  color: #fff8d6;
  box-shadow: 0 0 16px rgba(230, 195, 92, 0.45);
}

.atk-pad .dpad-down {
  background: rgba(8, 6, 4, 0.42);
  border-color: rgba(138, 115, 64, 0.38);
  color: #6a5a38;
}

.atk-pad .dpad-down.ready {
  background: rgba(212, 175, 55, 0.62);
  border: 2px solid #e6c35c;
  color: #fff8d6;
  box-shadow: 0 0 16px rgba(230, 195, 92, 0.5);
}

.act-jump {
  position: absolute;
  right: calc(max(10px, env(safe-area-inset-right)) + 176px);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px);
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 8;
}

.act-jump span { pointer-events: none; }

.touch-pause {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 44px;
  height: 36px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.touch-mute {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(58px, calc(env(safe-area-inset-right) + 48px));
  width: 44px;
  height: 36px;
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: 0;
}

.touch-mute.muted {
  color: #8a7340;
  border-color: #4a3a20;
  background: rgba(26, 24, 48, 0.72);
}

.show-touch.play-touch .touch { display: block; }

@media (max-width: 820px), (pointer: coarse) {
  .show-touch.play-touch .touch { display: block; }
  .gold-btn { min-width: 160px; min-height: 40px; }
  .card { max-width: 94%; padding: 18px 14px 16px; }
  .card dl div { grid-template-columns: 72px 1fr; font-size: 12px; }
  .era-list .gold-btn { min-width: 0; width: 100%; }
  .title-col { padding: 4% 5%; }
  .btn-col { gap: 7px; }
}

@media (max-width: 420px) {
  .dpad { width: 148px; height: 148px; }
  .dpad button { width: 48px; height: 48px; }
  .dpad-up, .dpad-down { left: 50px; }
  .dpad-left, .dpad-right { top: 50px; }
  .act-jump {
    width: 56px;
    height: 56px;
    right: calc(max(10px, env(safe-area-inset-right)) + 156px);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 46px);
    font-size: 10px;
  }
}

@media (max-height: 500px) {
  .title-col { padding: 6px 14px 4px; }
  .series { margin-bottom: 0.15em; gap: 0.05em; }
  .presents-line { font-size: clamp(10px, 3.2vh, 14px); }
  .title-col h1 { font-size: clamp(16px, 7.2vh, 28px); margin-bottom: 0.12em; }
  .era-tag { margin-bottom: 0.28em; font-size: clamp(10px, 3vh, 12px); }
  .diff-row { margin-bottom: 0.4em; gap: 4px; }
  .diff-row .gold-btn { padding: 4px 6px; font-size: 8px; min-height: 24px; }
  .keys { font-size: 8px; padding: 4px 8px; }
  .ver { font-size: 8px; }
  .privacy-link { font-size: 8px; }
  .btn-col { gap: 4px; }
  .gold-btn { min-width: 160px; min-height: 30px; padding: 5px 16px; }
  .dpad { width: 128px; height: 128px; }
  .dpad button { width: 42px; height: 42px; font-size: 16px; }
  .dpad-up, .dpad-down { left: 43px; }
  .dpad-left, .dpad-right { top: 43px; }
  .atk-pad span { font-size: 8px; }
  .act-jump {
    width: 48px;
    height: 48px;
    right: calc(max(10px, env(safe-area-inset-right)) + 136px);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 40px);
    font-size: 9px;
  }
  .touch-pause,
  .touch-mute { width: 40px; height: 32px; }
}