.world-stage[data-world-roam] { cursor: crosshair; }
.world-stage[data-world-roam] button,
.world-stage[data-world-roam] input { cursor: pointer; }

.game-shell.is-world-transitioning { cursor: wait; }
.game-shell.is-world-transitioning button,
.game-shell.is-world-transitioning input { pointer-events: none !important; }

.world-travel-overlay {
  position: absolute;
  z-index: 28;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: min(420px,calc(100% - 40px));
  padding: 18px 22px;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  color: #effff9;
  background: linear-gradient(110deg,rgba(4,37,34,.92),rgba(15,91,79,.84));
  border: 1px solid rgba(199,234,218,.52);
  border-radius: 4px 22px 4px 22px;
  box-shadow: 0 28px 80px rgba(2,24,22,.44),inset 0 0 34px rgba(132,229,204,.08);
  backdrop-filter: blur(16px);
  pointer-events: none;
  transform: translate(-50%,-50%);
  animation: travel-card-in .68s cubic-bezier(.16,.84,.2,1) both;
}

.world-travel-overlay > i {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(232,211,148,.74);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(125,224,202,.3),inset 0 0 18px rgba(125,224,202,.14);
  animation: travel-seal-spin 2.8s linear infinite;
}

.world-travel-overlay > i::before,
.world-travel-overlay > i::after { content: ""; position: absolute; background: #e6d18f; }
.world-travel-overlay > i::before { top: 23px; right: 8px; left: 8px; height: 1px; }
.world-travel-overlay > i::after { top: 8px; bottom: 8px; left: 23px; width: 1px; }
.world-travel-overlay span { display: grid; gap: 2px; }
.world-travel-overlay small { color: #a8dfd3; font-size: 9px; letter-spacing: .18em; }
.world-travel-overlay b { font: 400 23px "STKaiti","KaiTi",serif; letter-spacing: .12em; }
.world-travel-overlay em { color: rgba(225,246,238,.72); font-size: 11px; font-style: normal; }

.npc-cinematic {
  position: fixed;
  z-index: 180;
  inset: 0;
  overflow: hidden;
  color: #effff8;
  background: rgba(3,25,24,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.npc-cinematic.is-active { opacity: 1; }
.npc-cinematic.is-leaving { opacity: 0; }
.npc-cinematic__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,28,27,.15),rgba(3,28,27,.82) 53%,rgba(3,28,27,.96)),linear-gradient(180deg,transparent 38%,rgba(3,28,27,.7));
  backdrop-filter: blur(5px) saturate(.85);
}

.npc-cinematic__portrait {
  position: absolute;
  top: -5%;
  bottom: -7%;
  left: 4%;
  width: 48%;
  background-color: #173e39;
  background-position: center 16%;
  background-size: cover;
  border: 1px solid rgba(232,207,137,.34);
  box-shadow: 42px 0 90px rgba(3,28,27,.34);
  filter: saturate(.86) contrast(1.04);
  transform: translateX(-8%) scale(1.04);
  animation: npc-portrait-arrive .82s cubic-bezier(.16,.84,.2,1) both,npc-portrait-breathe 4.8s .82s ease-in-out infinite alternate;
}

.npc-cinematic__copy {
  position: absolute;
  top: 50%;
  right: clamp(28px,8vw,150px);
  display: grid;
  width: min(520px,46vw);
  padding: 26px 28px 25px;
  gap: 4px;
  background: linear-gradient(135deg,rgba(8,54,49,.86),rgba(6,42,40,.68));
  border: 1px solid rgba(189,230,214,.32);
  border-radius: 3px 24px 3px 24px;
  box-shadow: 0 28px 90px rgba(1,20,19,.38),inset 0 0 45px rgba(108,214,190,.06);
  backdrop-filter: blur(13px);
  transform: translateY(-50%);
  animation: npc-copy-arrive .62s .12s cubic-bezier(.16,.84,.2,1) both;
}

.npc-cinematic__copy small { color: #9edbd0; font-size: 10px; letter-spacing: .16em; }
.npc-cinematic__copy h2 { margin: 4px 0 0; color: #f0d998; font: 400 42px "STKaiti","KaiTi",serif; letter-spacing: .16em; }
.npc-cinematic__copy span { color: rgba(224,245,237,.76); font: 400 15px "STKaiti","KaiTi",serif; letter-spacing: .08em; }
.npc-cinematic__copy p { margin: 14px 0 0; color: rgba(239,251,247,.92); font: 400 17px/1.9 "STKaiti","KaiTi",serif; }
.npc-cinematic__copy > i { width: 68%; height: 1px; margin-top: 13px; background: linear-gradient(90deg,#e3cb83,transparent); }

.combat-feedback { position: absolute; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.combat-number {
  position: absolute;
  display: grid;
  color: #fff5c8;
  font: 700 31px/1 Georgia,serif;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.9),0 0 18px rgba(255,214,114,.72);
  animation: combat-number-rise .9s cubic-bezier(.12,.76,.2,1) both;
}
.combat-number small { margin-top: 3px; color: rgba(240,255,249,.78); font: 700 8px/1 system-ui,sans-serif; letter-spacing: .14em; }
.combat-number--enemy { top: 24%; right: 18%; }
.combat-number--player { top: 30%; left: 18%; color: #ffb6a9; text-shadow: 0 2px 4px rgba(0,0,0,.9),0 0 18px rgba(255,105,87,.66); }
.combat-number--heal { top: 38%; left: 25%; color: #bfffd7; }
.combat-number--mana { top: 47%; left: 23%; color: #a9f3ff; }
.combat-feedback > em {
  position: absolute;
  top: 18%;
  left: 50%;
  padding: 5px 14px;
  color: #f4dfa1;
  background: rgba(4,43,40,.76);
  border: 1px solid rgba(232,207,137,.42);
  border-radius: 999px;
  font: 400 13px "STKaiti","KaiTi",serif;
  letter-spacing: .12em;
  transform: translateX(-50%);
  animation: combat-cue-in .78s ease-out both;
}

.game-shell button:not(:disabled) { -webkit-tap-highlight-color: rgba(79,190,170,.16); }
.game-shell button:not(:disabled):active { filter: brightness(1.08); transform: translateY(1px) scale(.985); }
.world-node:not(:disabled):active { transform: translate(-21px,-50%) scale(.92); }

@keyframes travel-card-in { 0% { opacity: 0; transform: translate(-50%,-42%) scale(.94); } 38% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-57%) scale(1.03); } }
@keyframes travel-seal-spin { to { transform: rotate(360deg); } }
@keyframes npc-portrait-arrive { from { opacity: 0; transform: translateX(-15%) scale(1.08); } to { opacity: .94; transform: translateX(-8%) scale(1.04); } }
@keyframes npc-portrait-breathe { from { transform: translateX(-8%) scale(1.04); } to { transform: translateX(-6%) scale(1.075); } }
@keyframes npc-copy-arrive { from { opacity: 0; transform: translate(34px,-50%); } to { opacity: 1; transform: translate(0,-50%); } }
@keyframes combat-number-rise { 0% { opacity: 0; transform: translateY(18px) scale(.72); } 22% { opacity: 1; transform: translateY(0) scale(1.12); } 100% { opacity: 0; transform: translateY(-44px) scale(.96); } }
@keyframes combat-cue-in { 0% { opacity: 0; transform: translate(-50%,12px) scale(.9); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-18px) scale(1.03); } }

@media (max-width:760px) {
  .world-travel-overlay { min-width: calc(100% - 28px); padding: 14px 15px; grid-template-columns: 44px 1fr; }
  .world-travel-overlay > i { width: 40px; height: 40px; }
  .world-travel-overlay > i::before { top: 19px; }
  .world-travel-overlay > i::after { top: 7px; bottom: 7px; left: 19px; }
  .world-travel-overlay b { font-size: 19px; }
  .world-travel-overlay em { grid-column: 2; font-size: 11px; }
  .npc-cinematic__veil { background: linear-gradient(180deg,rgba(3,28,27,.06),rgba(3,28,27,.34) 42%,rgba(3,28,27,.96) 72%); }
  .npc-cinematic__portrait { top: -4%; right: -9%; bottom: 24%; left: -9%; width: auto; background-position: center 14%; opacity: .9; }
  .npc-cinematic__copy { top: auto; right: 12px; bottom: max(18px,env(safe-area-inset-bottom)); left: 12px; width: auto; padding: 18px 19px 17px; transform: none; }
  .npc-cinematic__copy { animation-name: npc-copy-arrive-mobile; }
  .npc-cinematic__copy small { font-size: 9px; }
  .npc-cinematic__copy h2 { font-size: 32px; }
  .npc-cinematic__copy span { font-size: 14px; }
  .npc-cinematic__copy p { margin-top: 9px; font-size: 15px; line-height: 1.72; }
  .combat-number { font-size: 25px; }
  .combat-number--enemy { right: 15%; }
  .combat-number--player { left: 15%; }
  .world-node:not(:disabled):active { transform: translate(-23px,-50%) scale(.92); }
}

@media (prefers-reduced-motion:reduce) {
  .world-travel-overlay,.world-travel-overlay > i,.npc-cinematic__portrait,.npc-cinematic__copy,.combat-number,.combat-feedback > em { animation: none !important; }
  .npc-cinematic,.npc-cinematic.is-active { transition: none; }
  .game-shell button:not(:disabled):active { transform: none; }
}

@keyframes npc-copy-arrive-mobile { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }