/* The Portal World page: a full-screen canvas with a light HUD on top. */
html, body.world-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.world-page { background: #05060c; touch-action: none; -webkit-user-select: none; user-select: none; }
.world-canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; outline: none; }

/* Loading */
.loading {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(circle at 50% 45%, #1a1020, #05060c 70%);
  transition: opacity 0.6s;
}
.loading .wordmark { font-size: 2rem; }
.loading-text { color: var(--muted); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.72rem; }
.loading-bar { width: 200px; height: 3px; background: rgba(246, 214, 150, 0.15); overflow: hidden; }
.loading-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon), var(--gold)); transition: width 0.25s; }
.loading.is-done { opacity: 0; pointer-events: none; }

/* HUD */
.hud-top {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) var(--gutter) 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 12, 0.55), transparent);
}
.hud-top > * { pointer-events: auto; }
.hud-buttons { display: flex; gap: 8px; }
.hud-left { display: flex; align-items: center; gap: 12px; }
.hud-exit { color: var(--ink); text-decoration: none; padding: 0 14px 0 10px; }
.hud-exit:hover { background: rgba(255, 42, 60, 0.35); }
.hud-exit svg { width: 18px; height: 18px; }
.welcome-exit { margin-top: 4px; color: var(--muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.welcome-exit:hover { color: var(--ink); }
.hud-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(5, 6, 12, 0.55);
  box-shadow: inset 0 0 0 1px rgba(246, 214, 150, 0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.hud-btn svg { width: 16px; height: 16px; fill: currentColor; }
.hud-btn.icon-only { width: 40px; padding: 0; justify-content: center; font-size: 1rem; }
@media (max-width: 420px) { .hud-btn span { display: none; } .hud-btn { width: 40px; padding: 0; justify-content: center; } }

.labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.portal-label {
  position: absolute; left: 0; top: 0;
  display: grid; justify-items: center; gap: 2px;
  text-align: center; white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s;
  will-change: transform;
}
.portal-label b { font: italic 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.portal-label small { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }

.prompt {
  position: fixed; left: 50%; bottom: calc(118px + var(--safe-bottom)); z-index: 8;
  transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px;
  background: rgba(5, 6, 12, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem; white-space: nowrap;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.prompt.is-on { opacity: 1; }

/* Thumb joystick and jump, phones only */
.stick-base {
  position: fixed; left: -60px; top: -60px; z-index: 6;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(243, 235, 221, 0.08); box-shadow: inset 0 0 0 2px rgba(243, 235, 221, 0.25);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.stick-base.is-on { opacity: 1; }
.stick { width: 52px; height: 52px; border-radius: 50%; background: rgba(243, 235, 221, 0.55); }
.jump-btn {
  position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(30px + var(--safe-bottom)); z-index: 7;
  width: 72px; height: 72px; border: 0; border-radius: 50%;
  background: rgba(5, 6, 12, 0.5); box-shadow: inset 0 0 0 2px rgba(246, 214, 150, 0.35);
  display: none; place-items: center; cursor: pointer;
}
.jump-btn svg { width: 30px; height: 30px; fill: var(--gold); }
.jump-btn:active { background: rgba(246, 214, 150, 0.25); }
@media (pointer: coarse) { .jump-btn { display: grid; } }
.controls.touch-only { display: none; }
@media (pointer: coarse) { .controls.touch-only { display: grid; } .controls.mouse-only { display: none; } }

/* Welcome card and character picker */
.welcome, .picker {
  position: fixed; z-index: 20; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 26px 22px 22px;
  background: rgba(11, 7, 5, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.welcome h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.welcome .kicker { margin-bottom: 6px; }
.welcome-lede { color: var(--muted); margin: 10px auto 18px; max-width: 32ch; }
.controls { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.controls li { padding: 10px 8px; border-radius: 8px; background: rgba(246, 214, 150, 0.06); font-size: 0.85rem; color: var(--muted); }
.controls b { display: block; color: var(--gold); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 2px; }
.welcome-actions { display: grid; gap: 10px; }
.welcome-actions .btn { width: 100%; }

.picker { width: min(560px, calc(100vw - 24px)); text-align: left; }
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.picker-head h2 { font-size: 1.9rem; }
.picker-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(246, 214, 150, 0.08); font-size: 1.5rem; cursor: pointer; }
.picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 520px) { .picker-grid { grid-template-columns: repeat(3, 1fr); } }
.pick {
  display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(246, 214, 150, 0.05); box-shadow: inset 0 0 0 1px var(--line);
}
.pick:hover { background: rgba(246, 214, 150, 0.1); }
.pick[aria-selected='true'] { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(246, 214, 150, 0.12); }
.pick-swatch { width: 100%; height: 46px; border-radius: 6px; margin-bottom: 6px; }
.pick b { font: italic 800 1.15rem/1 var(--display); text-transform: uppercase; }
.pick small { color: var(--muted); font-size: 0.72rem; }
.pick.is-loading { opacity: 0.6; }

.travel-flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff8ea 0%, var(--accent) 40%, transparent 80%); }
.travel-flash.is-on { animation: worldflash 0.9s ease-out; }
@keyframes worldflash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

.game-frame { position: fixed; inset: 0; z-index: 40; background: #000; }
.game-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.game-back { position: absolute; top: calc(10px + var(--safe-top)); left: 10px; min-height: 40px; padding: 0 16px; font-size: 0.72rem; }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; color: var(--ink); }

/* Destination dialogs come from index.html; keep them above the HUD. */
.world-page dialog.dest { z-index: 60; }

/* Phones: the Exit button keeps its label; the wordmark makes room for it. */
@media (max-width: 420px) {
  .hud-left .wordmark { display: none; }
  .hud-top .hud-btn.hud-exit { width: auto; padding: 0 12px 0 8px; }
  .hud-top .hud-exit span { display: inline; }
}


/* --- Action, attack -------------------------------------------------------------------------- */
.action-btn {
  position: fixed; left: 50%; bottom: calc(52px + var(--safe-bottom)); z-index: 9;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 8px; border: 0; border-radius: 999px;
  background: rgba(11, 7, 5, 0.78); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 0.95rem var(--body); letter-spacing: 0.04em; cursor: pointer;
  animation: pop 0.25s ease-out;
}
.action-btn .action-key { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--night); font-weight: 800; }
@media (pointer: coarse) { .action-btn .action-key { display: none; } .action-btn { padding: 0 24px; } }
@keyframes pop { from { transform: translateX(-50%) scale(0.8); opacity: 0; } }
.prompt { bottom: calc(118px + var(--safe-bottom)); }
.attack-btn {
  position: fixed; right: calc(108px + env(safe-area-inset-right, 0px)); bottom: calc(36px + var(--safe-bottom)); z-index: 7;
  width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: rgba(5, 6, 12, 0.5); box-shadow: inset 0 0 0 2px rgba(255, 42, 60, 0.55);
  display: grid; place-items: center; cursor: pointer;
}
.attack-btn svg { width: 28px; height: 28px; fill: #ff8a95; }
.attack-btn:active { background: rgba(255, 42, 60, 0.3); }
@media (pointer: fine) { .attack-btn { right: 22px; bottom: 30px; } }

/* --- Dialogue (Zelda-style box) ---------------------------------------------------------------- */
.dialogue {
  position: fixed; z-index: 25; left: 50%; bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px)); min-height: 120px;
  padding: 22px 26px 26px;
  background: linear-gradient(180deg, rgba(14, 10, 22, 0.92), rgba(8, 6, 14, 0.94));
  border: 2px solid rgba(246, 214, 150, 0.55); border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(11, 7, 5, 0.5), 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: pointer; animation: rise 0.3s ease-out;
}
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0; } }
.dialogue-name {
  position: absolute; top: -16px; left: 22px;
  padding: 4px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #ff4b5a, var(--neon) 60%, #c8192b); color: #fff;
  font: italic 800 1rem/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
}
.dialogue-text { font-size: clamp(1rem, 3.8vw, 1.2rem); line-height: 1.5; color: var(--ink); min-height: 3em; }
.dialogue-next { position: absolute; right: 18px; bottom: 10px; color: var(--gold); font-size: 0.9rem; animation: nudge 0.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.npc-tag { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; pointer-events: none; transition: opacity 0.3s; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.npc-tag b { display: block; font: italic 800 1.1rem/1 var(--display); text-transform: uppercase; }
.npc-tag small { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.npc-tag .bang { display: block; margin: 0 auto 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--night); font: 900 1.2rem/30px var(--body); animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-6px); } }

/* --- Toast (item get) ------------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 26; left: 50%; top: 26%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-radius: 14px;
  background: rgba(11, 7, 5, 0.86); box-shadow: inset 0 0 0 2px var(--gold), 0 0 60px rgba(246, 214, 150, 0.35);
  font: italic 800 clamp(1.1rem, 4.6vw, 1.5rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em;
  animation: toast 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.toast b { color: var(--gold); }
@keyframes toast { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }

/* --- Bag and emote panels --------------------------------------------------------------------- */
.panel {
  position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 22px; background: rgba(11, 7, 5, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.bag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot {
  aspect-ratio: 1; border: 0; border-radius: 10px; cursor: pointer; position: relative;
  background: rgba(246, 214, 150, 0.05); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center;
}
.slot.empty { cursor: default; opacity: 0.5; }
.slot[aria-selected='true'] { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(246, 214, 150, 0.12); }
.slot.equipped::after { content: '¹3'; position: absolute; right: 6px; top: 4px; font: 800 0.7rem var(--body); color: var(--night); background: var(--gold); border-radius: 4px; padding: 1px 5px; }
.slot.legendary { box-shadow: inset 0 0 0 1px rgba(255, 42, 60, 0.6), 0 0 18px rgba(255, 42, 60, 0.25); }
.slot.rare { box-shadow: inset 0 0 0 1px rgba(127, 216, 255, 0.5); }
.item-icon { position: relative; width: 60%; height: 60%; transform: rotate(45deg); }
.item-icon i { position: absolute; left: 50%; transform: translateX(-50%); display: block; }
.item-icon .ib { top: 0; width: 18%; height: 62%; background: linear-gradient(90deg, var(--blade), #fff 50%, var(--blade)); clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); box-shadow: 0 0 12px var(--glow); }
.item-icon .ig { top: 62%; width: 62%; height: 7%; background: var(--guard); border-radius: 4px; }
.item-icon .ih { top: 69%; width: 11%; height: 22%; background: var(--grip); }
.item-icon .ip { top: 90%; width: 17%; height: 10%; background: var(--guard); border-radius: 50%; }
.bag-detail { margin-top: 16px; min-height: 90px; color: var(--muted); }
.bag-detail h3 { font-size: 1.5rem; color: var(--ink); }
.bag-detail .rarity { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.bag-detail .rarity.legendary { color: #ff6a76; } .bag-detail .rarity.rare { color: #7fd8ff; }
.bag-detail p { margin: 6px 0 14px; }
.emote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.emote {
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(246, 214, 150, 0.05); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600;
}
.emote:hover, .emote:focus-visible { background: rgba(246, 214, 150, 0.12); }
.emote span { font-size: 1.9rem; line-height: 1; }
.emote small { color: var(--muted); font-size: 0.68rem; }
@media (max-width: 420px) { .hud-buttons { gap: 6px; } }
.toast-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; }