* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Noto Sans JP Guard";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/NotoSansJP-Medium.ttf") format("truetype");
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #000;
  color: #111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  overflow: hidden;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

[hidden] {
  display: none !important;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
}

.opening-screen,
.next-screen,
.fade-overlay {
  position: absolute;
  inset: 0;
}

.opening-screen {
  display: grid;
  place-items: center;
  background: #000;
  z-index: 0;
}

.opening-image {
  width: min(78vw, 900px);
  max-height: 78vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.opening-image.is-visible {
  opacity: 1;
}

.next-screen {
  display: grid;
  place-items: center;
  background: #000 url("assets/images/ui/battle_bg.png") center / cover no-repeat;
  opacity: 0;
  z-index: 1;
}

.next-screen.is-visible {
  opacity: 1;
}

.title-image {
  width: min(84vw, 960px);
  max-height: 54vh;
  object-fit: contain;
  opacity: 0;
  transform: translateY(0) scale(1);
  transition:
    opacity 1s ease,
    transform 800ms ease-in-out;
}

.title-image.is-visible {
  opacity: 1;
}

.title-image.is-settled {
  transform: translateY(-22vh) scale(0.82);
}

.matching-button {
  position: absolute;
  top: 54%;
  left: 50%;
  width: min(48vw, 440px);
  max-height: 22vh;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
  cursor: pointer;
  pointer-events: none;
}

.matching-button img {
  display: block;
  width: 100%;
  max-height: 22vh;
  object-fit: contain;
}

.matching-button.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.matching-button:disabled {
  cursor: default;
}

.next-screen.is-battle-starting .title-image {
  opacity: 0;
  transform: translateY(-72vh) scale(0.82);
  transition:
    opacity 900ms ease,
    transform 900ms ease-in;
}

.next-screen.is-battle-starting .matching-button {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  pointer-events: none;
}

.battle-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.battle-scene.is-visible {
  opacity: 1;
  pointer-events: auto;
}


.battle-hud {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 42% 16% 42%;
  align-items: start;
  pointer-events: none;
}

.hp-display {
  --hp-cut: 0%;
  position: relative;
  width: min(43vw, 620px);
  aspect-ratio: 1921 / 819;
  color: #fff;
  font-weight: 900;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.hp-display--player {
  justify-self: start;
  margin-left: 12px;
}

.hp-display--opponent {
  justify-self: end;
  margin-right: 12px;
}

.hp-display__art,
.hp-display__bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hp-display__art {
  overflow: hidden;
}

.hp-display__bar {
  display: block;
  object-fit: contain;
}

.hp-display__gauge {
  position: absolute;
  top: 43%;
  right: 8.5%;
  bottom: 42%;
  left: 24.6%;
  display: block;
  overflow: hidden;
  clip-path: inset(0 var(--hp-cut) 0 0);
  transition: clip-path 320ms ease;
  z-index: 1;
}

.hp-display__gauge-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  height: 625%;
  display: block;
  object-fit: fill;
  transform: translate(-50%, -50%);
}

.hp-display__bar {
  z-index: 0;
}

.hp-display__name,
.hp-display__value {
  position: absolute;
  z-index: 2;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.9);
}

.hp-display__name {
  left: 17%;
  bottom: 25%;
  font-size: clamp(0.8rem, 1.4vw, 1.2rem);
  letter-spacing: 0.08em;
}

.hp-display__value {
  right: 10%;
  bottom: 25%;
  font-size: clamp(0.8rem, 1.3vw, 1.1rem);
  font-variant-numeric: tabular-nums;
}

.hp-display--opponent .hp-display__name {
  left: auto;
  right: 17%;
}

.hp-display--opponent .hp-display__value {
  right: auto;
  left: 10%;
}

.turn-panel {
  position: relative;
  justify-self: center;
  align-self: start;
  width: 100%;
  min-height: clamp(44px, 7vw, 74px);
  pointer-events: none;
}

.turn-panel__label {
  position: absolute;
  top: clamp(18px, 3vh, 34px);
  left: 50%;
  z-index: 1;
  width: clamp(150px, 18vw, 240px);
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}


.turn-panel__label.is-entering {
  position: fixed;
  z-index: 4;
  animation: your-turn-enter 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes your-turn-enter {
  0% {
    top: 50vh;
    left: 50vw;
    width: min(78vw, 620px);
    transform: translate(-50%, -50%);
  }

  100% {
    top: calc(26px + clamp(18px, 3vh, 34px));
    left: 50vw;
    width: clamp(150px, 18vw, 240px);
    transform: translateX(-50%);
  }
}

.turn-panel__subject {
  position: absolute;
  top: clamp(12px, 2vh, 24px);
  left: clamp(12px, 2vw, 24px);
  z-index: 1;
  display: block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: #ffffff;
  font-size: clamp(0.65rem, 1.1vw, 0.82rem);
  font-weight: 700;
  line-height: 1.2;
}

.battle-message {
  position: absolute;
  left: 50%;
  bottom: clamp(148px, 22vh, 230px);
  z-index: 1;
  width: min(86vw, 760px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #102030;
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
}

.battle-character {
  position: absolute;
  top: 52%;
  --damage-brightness: 1.15;
  --damage-shake: 4px;
  --damage-duration: 260ms;
  width: min(30vw, 320px);
  max-height: 44vh;
  object-fit: contain;
  transform: translateY(-50%);
}

.battle-character.is-taking-damage {
  animation: character-damage-shake var(--damage-duration) ease-in-out;
}

.battle-character.is-recovering {
  animation: character-recover-flash 300ms ease-out;
}

.battle-character[data-damage-stage="small"] {
  --damage-brightness: 1.12;
  --damage-shake: 4px;
  --damage-duration: 250ms;
}

.battle-character[data-damage-stage="medium"] {
  --damage-brightness: 1.2;
  --damage-shake: 7px;
  --damage-duration: 320ms;
}

.battle-character[data-damage-stage="large"] {
  --damage-brightness: 1.28;
  --damage-shake: 11px;
  --damage-duration: 400ms;
}

.battle-character[data-damage-stage="huge"] {
  --damage-brightness: 1.35;
  --damage-shake: 15px;
  --damage-duration: 400ms;
}

@keyframes character-damage-shake {
  0%,
  100% {
    filter: none;
    transform: translate(0, -50%);
  }

  12%,
  36%,
  60% {
    filter:
      sepia(1)
      saturate(6)
      hue-rotate(315deg)
      brightness(var(--damage-brightness));
    transform: translate(calc(var(--damage-shake) * -1), -50%);
  }

  24%,
  48%,
  72% {
    filter:
      sepia(1)
      saturate(6)
      hue-rotate(315deg)
      brightness(var(--damage-brightness));
    transform: translate(var(--damage-shake), -50%);
  }
}

@keyframes character-recover-flash {
  0%,
  100% {
    filter: none;
  }

  45% {
    filter:
      drop-shadow(0 0 18px rgba(84, 255, 118, 0.95))
      sepia(1)
      saturate(8)
      hue-rotate(55deg)
      brightness(1.35);
  }
}

.battle-character--player {
  left: 10%;
}

.battle-character--opponent {
  right: 10%;
}

.guard-overlay {
  position: absolute;
  top: 52%;
  left: 10%;
  width: min(30vw, 320px);
  max-height: 44vh;
  aspect-ratio: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}

.guard-overlay.is-active {
  opacity: 1;
}

.guard-overlay__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(28, 74, 126, 0.45));
}

.guard-overlay__value {
  position: absolute;
  left: 50%;
  bottom: 9%;
  min-width: 3.8em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 31, 67, 0.76);
  color: #ffffff;
  font-family: "Noto Sans JP Guard", system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(86, 205, 255, 0.95);
  transform: translateX(-50%);
}

.battle-actions {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 44px);
  width: min(92vw, 980px);
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.battle-action {
  width: clamp(104px, 14vw, 176px);
  height: clamp(104px, 14vw, 176px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.battle-action:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.04);
}

.battle-action:disabled {
  cursor: not-allowed;
}

.battle-action.is-unavailable {
  filter: brightness(0.58);
  opacity: 0.78;
}

.battle-action.is-on-cooldown {
  filter: grayscale(1) brightness(0.72);
}

.battle-action img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fade-overlay {
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 2;
}
.fade-overlay.is-dark {
  opacity: 1;
}

.question-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(88vw, 840px);
  aspect-ratio: 1448 / 1086;
  padding: clamp(64px, 8vw, 94px) clamp(58px, 7vw, 88px) clamp(54px, 6vw, 78px);
  border: 0;
  background: url("assets/images/ui/Old_paper.png") center / 100% 100% no-repeat;
  color: #3f2a16;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.36));
  transform: translate(-50%, -50%);
}

.question-panel__header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 900;
}

.question-panel__text {
  min-height: 3.2em;
  margin: 18px 0;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1.45;
}

.question-panel__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.question-panel__choices--vertical {
  grid-template-columns: 1fr;
}

.question-panel__choice {
  min-height: 64px;
  padding: 12px 16px;
  border: 3px solid #2a66b8;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #e9f3ff 100%);
  color: #102030;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 900;
  cursor: pointer;
  transition:
    background 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.question-panel__choice:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff8d6 0%, #ffe492 100%);
  transform: translateY(-2px);
}

.question-panel__choice:disabled {
  cursor: default;
  opacity: 0.68;
}

.question-panel__feedback {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 900;
  text-align: center;
}

.question-panel__feedback[data-result="correct"] {
  color: #117a32;
}

.question-panel__feedback[data-result="wrong"] {
  color: #b42318;
}

.admin-button {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 2;
  width: clamp(48px, 7vw, 82px);
  height: clamp(48px, 7vw, 82px);
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 500ms ease,
    transform 500ms ease,
    filter 180ms ease;
  cursor: pointer;
  pointer-events: none;
}

.admin-button.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.admin-button:hover {
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
}

.admin-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.next-screen.is-battle-starting .admin-button {
  opacity: 0;
  pointer-events: none;
}

.admin-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

.admin-screen__panel {
  width: min(88vw, 560px);
  padding: 32px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 20px;
  background: rgba(18, 24, 38, 0.94);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.admin-screen__panel h1 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.admin-screen__panel p {
  margin: 0 0 24px;
  font-size: 1rem;
}

.admin-screen__back,
.password-gate__submit,
.password-gate__cancel {
  min-width: 120px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #f7d36a;
  color: #17130a;
  font-weight: 900;
  cursor: pointer;
}

.password-gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
}

.password-gate__panel {
  width: min(92vw, 420px);
  padding: 28px;
  border-radius: 20px;
  background: #111827;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.password-gate__panel h1 {
  margin: 0 0 10px;
  font-size: 1.6rem;
}

.password-gate__panel p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.password-gate__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.password-gate__input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #94a3b8;
  border-radius: 12px;
  font: inherit;
}

.password-gate__error {
  min-height: 1.6em;
  color: #ffb4b4;
  font-weight: 800;
}

.password-gate__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.password-gate__cancel {
  background: #64748b;
  color: #fff;
}

.password-gate__submit:disabled {
  cursor: wait;
  opacity: 0.72;
}