@import url("./legacy.css");
@import url("./ui.css");
@import url("./mobile.css");


/* 지박사 NPC: 업로드한 4방향 스프라이트에서 분리한 이미지 */
.professor-npc {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -86%);
  pointer-events: none;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.28));
}

.professor-npc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.portal-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}

.portal-marker {
  position: absolute;
  border: 3px solid rgba(48, 156, 255, 0.95);
  background: rgba(52, 170, 255, 0.26);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9) inset,
    0 0 14px rgba(42, 151, 255, 0.7);
  animation: portalPulse 1.1s ease-in-out infinite alternate;
}

@keyframes portalPulse {
  from { opacity: 0.58; }
  to { opacity: 0.95; }
}

.player.walking img {
  animation: trainerWalkStep 0.24s steps(2, end) infinite !important;
  transform-origin: 50% 100%;
}

@keyframes trainerWalkStep {
  0% { transform: translateX(-1px) rotate(-1.2deg) scaleY(1); }
  50% { transform: translateX(1px) rotate(1.2deg) scaleY(0.985); }
  100% { transform: translateX(-1px) rotate(-1.2deg) scaleY(1); }
}

/* Portal and battle overrides: keep visual markers, movement checks, and selection layout in one tile-based rhythm. */
.portal-marker {
  border-width: 2px;
  border-radius: 0;
}

html.in-battle .battle-scene {
  inset: 0 0 44% 0 !important;
}

html.is-pc.in-battle .battle-scene,
html.is-mobile.is-portrait.in-battle .battle-scene {
  inset: 0 0 44% 0 !important;
}

html.is-pc.in-battle .battle-bottom,
html.is-mobile.is-portrait.in-battle .battle-bottom {
  height: 44% !important;
  grid-template-columns: minmax(150px, 22%) minmax(0, 78%) !important;
  gap: 8px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

html.in-battle .battle-message,
html.in-battle .battle-command {
  padding: 10px 12px !important;
  overflow: hidden !important;
}

html.in-battle .battle-message p {
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.28 !important;
}

html.in-battle .battle-command {
  grid-template-rows: auto auto 1fr !important;
  gap: 6px !important;
}

html.in-battle .bad-prompt {
  padding: 7px 10px !important;
}

html.in-battle .bad-prompt span {
  font-size: clamp(13px, 1.15vw, 17px) !important;
}

html.in-battle .bad-prompt strong {
  font-size: clamp(15px, 1.35vw, 20px) !important;
}

html.in-battle .battle-step-line {
  font-size: clamp(16px, 1.25vw, 20px) !important;
}

html.in-battle .choice-list {
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, minmax(46px, 1fr)) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html.in-battle .choice-btn {
  min-height: 0 !important;
  padding: 8px 12px !important;
  font-size: clamp(16px, 1.18vw, 19px) !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html.in-battle .key-hint {
  display: none !important;
}

html.is-mobile.is-landscape.in-battle .battle-scene {
  inset: 0 44% 0 0 !important;
}

html.is-mobile.is-landscape.in-battle .battle-bottom {
  left: 56% !important;
  width: 44% !important;
  grid-template-rows: 0.55fr 1.45fr !important;
}

html.is-mobile.is-landscape.in-battle .choice-btn {
  font-size: clamp(12px, 2.3vw, 16px) !important;
  padding: 6px 8px !important;
}

html.is-pc .mobile-controls,
html:not(.is-mobile) .mobile-controls {
  display: none !important;
}

html.is-mobile.in-map .mobile-controls {
  display: grid !important;
  opacity: 0.58 !important;
}

/* Final battle readability pass */
html.is-pc.in-battle .battle-scene,
html.is-mobile.is-portrait.in-battle .battle-scene {
  inset: 0 0 56% 0 !important;
}

html.is-pc.in-battle .battle-bottom,
html.is-mobile.is-portrait.in-battle .battle-bottom {
  height: 56% !important;
  grid-template-columns: minmax(130px, 20%) minmax(0, 80%) !important;
}

html.is-pc.in-battle .enemy-pokemon,
html.is-mobile.is-portrait.in-battle .enemy-pokemon {
  top: 20% !important;
}

html.is-pc.in-battle .player-pokemon,
html.is-mobile.is-portrait.in-battle .player-pokemon {
  bottom: 16% !important;
}

html.in-battle .choice-list {
  grid-template-rows: repeat(7, minmax(38px, auto)) !important;
  align-content: stretch !important;
}

html.in-battle .choice-btn {
  min-height: 38px !important;
  max-height: none !important;
  overflow: visible !important;
  word-break: keep-all !important;
}

html.in-battle .prompt-card {
  background: #fff9df !important;
}

.breakdown-area h3,
.result-learning-box h3 {
  margin: 12px 0 6px;
  font-size: 18px;
}

.breakdown-item {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(70px, auto);
  gap: 6px 10px;
}

.breakdown-item small {
  grid-column: 1 / -1;
  color: #33324a;
  line-height: 1.35;
}

.result-learning-box {
  margin-top: 12px;
  padding: 12px;
  border: 2px solid #d7ccb1;
  background: #fffdf2;
}

.result-learning-box ul,
.dex-analysis {
  margin: 6px 0 10px 20px;
  padding: 0;
}

.dex-card-feedback {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  font-size: 14px;
}