/* The Activity's layout: the world (a hub or an expedition) behind; the HUD along the bottom; windows open at
   the left (the character, the skills, a trader's wares) and the right (the inventory), D2's way; a centred
   layer for talking, travelling and the passive trees. Built on ui/kit.css. */

html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; }
body { user-select: none; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; display: block; background: #05060a; }
[hidden] { display: none !important; }

/* The UI layer scales with the window like a game's (laid out for 1000 lines; app/main.js sets the scale). */
#ui { position: fixed; inset: 0; pointer-events: none; zoom: var(--ui-scale, 1); }
#ui > * { pointer-events: auto; }

/* Kept outside the town HUD so it stays available on every expedition. */
#world-actions { position: absolute; top: 80px; right: 22px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#run-save-status { padding: 3px 7px; background: #171310df; }
#run-complete-title { display: none; }
/* Once the expedition ends, its way home is the main action above the bottom HUD. */
#world-actions[data-state="complete"] {
  top: auto; right: auto; left: 50%; bottom: 188px; transform: translateX(-50%);
  width: min(440px, calc(100vw / var(--ui-scale, 1) - 32px)); box-sizing: border-box;
  align-items: center; gap: 12px; padding: 22px 28px 18px; text-align: center;
  background: linear-gradient(180deg, #17110bf2, #080604f2); border: 1px solid #8a6838;
  box-shadow: 0 10px 36px #000b, inset 0 0 0 3px #24190e;
}
#world-actions[data-state="complete"] #run-complete-title {
  display: block; margin: 0; color: var(--gold-hi); font: 400 26px/1.2 var(--f-title);
  letter-spacing: 0.05em; text-shadow: 0 2px 0 #000;
}
#world-actions[data-state="complete"] #return-town {
  width: 100%; min-height: 66px; font-size: 22px; color: #fff0c8;
  filter: drop-shadow(0 0 10px #d49a3540);
}
#world-actions[data-state="complete"] #return-town:hover:not(:disabled),
#world-actions[data-state="complete"] #return-town:focus-visible {
  filter: brightness(1.2) drop-shadow(0 0 12px #d49a3566); outline: 2px solid var(--gold-hi); outline-offset: 4px;
}
#world-actions[data-state="complete"] #run-save-status { background: none; padding: 0; }

/* ---- the side windows ------------------------------------------------------------------------------------------ */
.side { position: absolute; top: 74px; bottom: 190px; width: 600px; display: flex; flex-direction: column; animation: slide-in 0.16s ease-out; }
.side.left { left: 46px; } .side.right { right: 46px; }
.side.left { --from: -40px; } .side.right { --from: 40px; }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--from)); } }
.side > .wnd { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wnd-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b5430 #0c0a08; padding-right: 4px; margin-right: -4px; }
.wnd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 10px; border-top: 1px solid #2e261b; }
.gold-line { display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1 var(--f-ui); color: var(--gold-hi); text-shadow: 0 1px 0 #000; }
.gold-line .icon { flex: none; }

/* ---- the centre layer (talk, travel, the trees, the menu) ----------------------------------------------------------- */
#centre { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7)); animation: fade-in 0.18s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
#centre > .wnd { width: min(980px, 92vw); max-height: calc(100vh / var(--ui-scale, 1) - 260px); display: flex; flex-direction: column; }
#centre > .wnd.narrow { width: 640px; }
#centre > .wnd.wide { width: min(1500px, 94vw); }

/* ---- the HUD (D2's bottom panel): ui/hud.css ---------------------------------------------------------------------- */
.belt { display: flex; gap: 2px; }
.belt .slot { width: calc(20px * var(--px)); height: calc(26px * var(--px)); }

/* ---- talking (D2's NPC menu, PoE's dialogue) ------------------------------------------------------------------------- */
.talk { display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
.talk-portrait { position: relative; height: 250px; border: calc(6px * var(--px)) solid transparent; border-image: url('/activity/assets/kit/d/slots/slotd2.png') 6 fill / calc(6px * var(--px)) stretch; image-rendering: pixelated; overflow: hidden; background: #050403; }
.talk-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.talk-name { font: 400 22px/1.1 var(--f-title); letter-spacing: 0.06em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.talk-title { margin-top: 4px; font: italic 15px/1.2 var(--f-ui); color: var(--parch-dim); }
.talk-line { margin: 14px 0 18px; font: 17px/1.55 var(--f-ui); color: var(--parch); text-shadow: 0 1px 0 #000; min-height: 80px; }
.talk-line::before { content: '“'; color: var(--gold); } .talk-line::after { content: '”'; color: var(--gold); }
.talk-options { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.talk-opt { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 4px; border: 0; background: none; font: 400 17px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.06em; color: var(--parch); text-shadow: 0 1px 0 #000; }
.talk-opt:hover { color: var(--gold-hi); background: linear-gradient(90deg, rgba(210, 169, 93, 0.16), transparent); }
.talk-opt .glyph { flex: none; }
.talk-opt small { font: italic 13px/1 var(--f-ui); font-variant: normal; letter-spacing: 0; color: var(--parch-faint); margin-left: 6px; }

/* ---- toasts, the status screen ------------------------------------------------------------------------------------------ */
#toasts { position: fixed; left: 50%; bottom: calc(26vh + 40px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 900; }
.toast { padding: 8px 18px; font: 400 16px/1.2 var(--f-ui); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 10px #000; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.75) 80%, transparent); transition: opacity 0.5s, transform 0.5s; }
.toast.bad { color: #ff8a70; }
.toast.out { opacity: 0; transform: translateY(-8px); }
#status { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1a140d, #050403 70%); }
#status .wnd { width: 560px; text-align: center; }
#status h1 { margin: 6px 0 4px; font: 400 54px/1 var(--f-title); letter-spacing: 0.16em; color: var(--gold-hi); text-shadow: 0 3px 0 #000, 0 0 30px rgba(255, 180, 90, 0.25); }
#status p { color: var(--parch-dim); font: italic 16px/1.5 var(--f-ui); }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

/* ---- shared pieces of the windows ---------------------------------------------------------------------------------------- */
.empty { padding: 30px 10px; text-align: center; font: italic 15px/1.5 var(--f-ui); color: var(--parch-faint); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.dim { color: var(--parch-dim); }
.price { font: 400 15px/1 var(--f-ui); color: var(--gold-hi); white-space: nowrap; }
.price.short { color: var(--bad); }
.loading-line { padding: 40px 0; text-align: center; font: italic 15px var(--f-ui); color: var(--parch-faint); }
/* A click responds locally; confirmed values arrive together in the mutation reply. */
.action-status { position: absolute; z-index: 20; bottom: 48px; left: 50%; transform: translateX(-50%); padding: 8px 18px; color: #f3d990; background: #1c170eef; border: 1px solid #ab8539; pointer-events: none; white-space: nowrap; box-shadow: 0 0 18px #cf9f3c44; }
.wnd[aria-busy="true"] { cursor: progress; }
.wnd[aria-busy="true"] .action-status { animation: action-pending .65s ease-in-out infinite alternate; }
@keyframes action-pending { to { box-shadow: 0 0 24px #cf9f3c88; } }
@media (prefers-reduced-motion: reduce) { .wnd[aria-busy="true"] .action-status { animation: none; } }