/* EQ2 Browser: the game's own layout, on the shared design kit (design/kit.css, linked first in index.html).
   Every colour, radius, shadow and font comes from the kit's --eq-* tokens; the components are the kit's (eq-glass,
   eq-btn, eq-seg, eq-card, eq-hud, eq-unit, eq-chat, eq-nameplate, eq-progress, eq-login). This file only places them. */

#app { min-height: 100vh; min-height: 100dvh; }
.booting { display: grid; place-items: center; min-height: 100vh; color: var(--eq-text-3); margin: 0; }

/* ---- login ---------------------------------------------------------------------------------------------------- */
.world-seg > button.is-closed { color: var(--eq-text-3); }
.world-seg > button.is-closed[aria-pressed="true"] { color: var(--eq-text-2); }
.art-slot:empty, .test-accounts:empty { display: none; }
.eq-login__status.is-error { color: var(--eq-bad-ink); }
.eq-login__status:empty { min-height: 0; }
.eq-login__status { margin-top: 14px; text-align: center; }

/* ---- character select ----------------------------------------------------------------------------------------- */
.chars-panel { width: min(780px, 100%); padding: 22px 22px 18px; border-radius: var(--eq-radius-xl); }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { margin: 0 0 6px; }
.world-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--eq-text-2); font-size: var(--eq-size-sm); }
.who { display: flex; align-items: center; gap: 6px; color: var(--eq-text-2); font-size: var(--eq-size-sm); }
.char-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  max-height: min(56vh, 520px); overflow: auto; padding: 4px; margin: 0 -4px 4px; border-radius: var(--eq-radius-lg);
}
.char { padding: 14px 16px; cursor: pointer; user-select: none; }
.char.on { box-shadow: var(--eq-shadow-2), inset 0 0 0 2px var(--eq-accent); }
.char-name { font: var(--eq-weight-bold) var(--eq-size-xl)/1.25 var(--eq-font-display); letter-spacing: var(--eq-tracking-heading); }
.char-desc { color: var(--eq-text-2); margin: 2px 0 8px; }
.char-meta { display: flex; flex-direction: column; gap: 2px; color: var(--eq-text-3); font-size: var(--eq-size-xs); }
.empty { grid-column: 1 / -1; text-align: center; padding: 36px 12px; color: var(--eq-text-2); }
.empty strong { color: var(--eq-text-1); display: block; margin-bottom: 4px; }
.chars-status { min-height: 0; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--eq-sep); }
.actions .eq-btn--primary { min-width: 160px; }
@media (max-width: 520px) {
  .chars-panel { padding: 18px 14px 14px; }
  .actions { flex-direction: column-reverse; }
  .actions .eq-btn { width: 100%; }
}

/* ---- the world ------------------------------------------------------------------------------------------------- */
.screen.world { position: fixed; inset: 0; }
.screen.world .view { position: absolute; inset: 0; z-index: 0; }
.screen.world canvas { display: block; outline: none; touch-action: none; }
/* Its own layer: the label renderer numbers each tag's z-index, and those must stay under the HUD. */
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.labels .eq-nameplate { pointer-events: none; transition: opacity var(--eq-dur-2) var(--eq-ease); }
.labels .eq-nameplate.plate-cluttered { opacity: 0 !important; } /* behind a nearer tag (BC-19) */

.hud-where { padding: 10px 14px; border-radius: var(--eq-radius-lg); max-width: min(420px, 60vw); }
/* Zone titles use the brand face (Cinzel, brand.css); loading screens and zone titles only (VISUAL-PLAN §1.4). */
.hud-zone { font: var(--eq-weight-bold) var(--eq-size-lg)/1.25 var(--eq-font-brand, var(--eq-font-display)); letter-spacing: .03em; }
.hud-who { color: var(--eq-text-2); font-size: var(--eq-size-sm); }
.hud-dev { padding: 8px 12px; border-radius: var(--eq-radius-md); font-size: var(--eq-size-xs); color: var(--eq-text-2); }
.hud-menu { display: flex; gap: 8px; }
.hud-help { padding: 6px 14px; color: var(--eq-text-2); font-size: var(--eq-size-xs); white-space: nowrap; }
/* Chat sits above the kit's Hub token in the bottom-left corner (HUB-TOKEN.md). */
.hud-bl { padding-bottom: var(--eq-hub-reserve, 52px); }
.hud-bl .eq-chat { width: min(440px, calc(100vw - 24px)); --eq-chat-h: 168px; }
.chat-field { flex: 1; min-width: 0; height: 30px; }
.eq-chat__input { display: flex; gap: 6px; margin-top: 6px; }
.eq-chat__line.is-warning { color: var(--eq-bad-ink); font-style: normal; }
.target-frame { width: min(320px, calc(100vw - 24px)); }
.tf-clear { margin-left: auto; font-size: 16px; }
.tf-note { margin-top: 2px; }
.tf-open { align-self: flex-start; }
/* Ruling 20: "Not yet mapped for Origins (showing EMU)" under the zone name; it may wrap on narrow screens. */
.hud-zone-note { margin: 4px 0 2px; } /* the kit's eq-fallback--sm; it wraps on narrow screens */
.hud-zone-note .eq-fallback { white-space: normal; }
.chat-link { pointer-events: auto; }
.hud-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--eq-bad-ink); padding: 16px 20px; max-width: min(520px, 90vw); pointer-events: auto; }
.hud-error:empty { display: none; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: var(--eq-backdrop); z-index: 3; }
.loading[hidden] { display: none; }
.loading-card { position: relative; z-index: 1; width: min(420px, calc(100vw - 32px)); padding: 20px 22px; }
.loading-title { margin: 0 0 14px; color: var(--eq-text-1); }
.loading-title:empty { display: none; }
.loading-note { margin-top: 12px; }
.zone-arrival {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  max-width: 90vw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #f6f1e4; opacity: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .5);
}
.zone-arrival.is-on { animation: zone-arrival 3s var(--eq-ease) 1 both; }
@keyframes zone-arrival {
  0% { opacity: 0; transform: translate(-50%, -40%); }
  18%, 80% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -55%); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes zone-arrival { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }
}
.loading-about { margin-top: 12px; }

@media (max-width: 640px) {
  .hud-help { display: none; }
  .hud-bl .eq-chat { --eq-chat-h: 120px; }
  .eq-hud__bl { grid-column: 1 / -1; } /* the help pill is hidden here, so chat may use the whole width */
  /* The target above the chat, clear of the menu. It spans the whole row so it never widens the middle column (which
     squeezed the zone panel and the chat to slivers while something was targeted). */
  .eq-hud__tc { grid-column: 1 / -1; grid-row: 3; align-self: end; margin-bottom: calc(212px + var(--eq-hub-reserve, 52px)); }
}

/* ---- the login card's plain wordmark (ruling 37: Aegis is out until the new logo is picked) ------------------- */
.login-brand { margin: 4px 0 2px; text-align: center; color: var(--eq-gold, var(--eq-text-1)); }

/* ---- play windows (js/ui/windows.js, js/world/play.js): kit glass panels placed on the HUD grid ---------------- */
.eq-hud__tl:has(.player-frame) .hud-who { display: none; } /* the player frame already shows name and level */
.player-frame { width: min(300px, calc(100vw - 24px)); }
.pf-coin:empty { display: none; }
.pf-coin { font-size: var(--eq-size-xs); }
.tf-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
/* Windows get the screen's height, not the HUD grid's middle row (234 px at 1024×768, audit): inventory, journal
   and the quest tracker in a column on the right between the menu and the help pill; loot, merchant and quest
   windows centred below the target frame. Each window scrolls inside itself. */
.hud-menu { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
/* grid-area: auto, or the absolute box would still be framed by its grid area */
.eq-hud > .hud-mr, .eq-hud > .hud-ml { grid-area: auto; position: absolute; display: flex; flex-direction: column; gap: 8px; pointer-events: none; overflow: visible; }
.hud-mr { right: var(--eq-gap, 12px); top: calc(var(--eq-gap, 12px) + 56px); bottom: calc(var(--eq-gap, 12px) + 48px); align-items: flex-end; }
.hud-ml { left: 50%; translate: -50% 0; top: calc(var(--eq-gap, 12px) + 150px); bottom: calc(var(--eq-gap, 12px) + 48px); align-items: center; }
.hud-mr > *, .hud-ml > * { pointer-events: auto; flex: 0 1 auto; min-height: 0; }
.hud-mr > .game-window, .hud-ml > .game-window { max-height: 100%; }
.game-window { width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 640px); padding: 12px 14px 14px; border-radius: var(--eq-radius-lg); }
.inventory-window { width: min(400px, calc(100vw - 24px)); }
.gw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gw-title { margin: 0; font: var(--eq-weight-bold) var(--eq-size-lg)/1.25 var(--eq-font-display); }
.gw-sub { margin: 4px 0 0; color: var(--eq-warn-ink); }
.gw-body { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 10px; padding-right: 2px; } /* content height; shrinks (and scrolls) only when the screen runs out */
.gw-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.gw-foot > .eq-hint { margin-right: auto; }
.merchant-window .eq-tabs { margin-top: 10px; }
.gw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.gw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--eq-size-sm); }
.gw-count { color: var(--eq-text-2); }
.gw-price { flex: none; font-size: var(--eq-size-xs); }
.gw-qty { width: 52px; height: 30px; }
.gw-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
  font: var(--eq-weight-bold) 12px/1 var(--eq-font-display); color: var(--eq-text-2); background: var(--eq-fill-2);
}
.gw-icon > img { width: 100%; height: 100%; object-fit: cover; }
.gw-icon--coin { background: radial-gradient(circle at 35% 30%, #ffe48a, #c98c12); }
.gw-section { margin: 12px 0 6px; font-size: var(--eq-size-xs); font-weight: var(--eq-weight-semibold); color: var(--eq-text-3); letter-spacing: var(--eq-tracking-label); }
.gw-section:first-child { margin-top: 0; }
.gw-gear, .gw-bags { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.gw-gear .eq-slot, .gw-bags .eq-slot { position: relative; width: 100%; aspect-ratio: 1; }
.gw-slot-text { font: var(--eq-weight-bold) 11px/1 var(--eq-font-display); }
.gw-slot-count { position: absolute; right: 3px; bottom: 2px; font: var(--eq-weight-bold) 10px/1 var(--eq-font-mono); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.gw-detail { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.gw-card { width: 100%; }
.gw-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-danger { color: var(--eq-bad-ink); }
.labels .eq-nameplate.is-dead { filter: grayscale(1) brightness(.8); }
.death-screen { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: auto; background: rgba(8, 8, 14, .55); }
.death-screen[hidden] { display: none; }
.death-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 28px; max-width: min(420px, calc(100vw - 32px)); text-align: center; border-radius: var(--eq-radius-xl); }
.death-text { margin: 0; color: var(--eq-text-2); }
@media (max-width: 640px) {
  /* Windows become a sheet over the top half of the screen on phones. */
  .game-window { position: fixed; left: 12px; right: 12px; top: 12px; width: auto; max-height: 58vh; z-index: 3; }
  .player-frame { width: min(240px, calc(50vw - 12px)); }
}

/* ---- create a character (BC-4, js/ui/create.js) ----------------------------------------------------------------- */
.create-panel { width: min(980px, calc(100vw - 24px)); max-height: calc(100svh - 24px - var(--eq-hub-reserve, 52px)); overflow: auto; padding: 18px 20px 16px; border-radius: var(--eq-radius-xl); }
.create-panel .head { margin-bottom: 12px; }
.create-sub { margin: 4px 0 0; }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.cc-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chips > .eq-chip { height: 32px; padding: 0 12px; cursor: pointer; }
.cc-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.cc-group-name { margin: 0 0 6px; font-size: var(--eq-size-xs); font-weight: var(--eq-weight-semibold); color: var(--eq-text-3); letter-spacing: var(--eq-tracking-label); }
.cc-class-note { margin-top: 6px; }
.cc-look > summary { cursor: pointer; font-weight: var(--eq-weight-semibold); color: var(--eq-text-2); padding: 6px 0; }
.cc-look[open] > summary { margin-bottom: 8px; }
.cc-look { display: flex; flex-direction: column; gap: 10px; }
.cc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-swatch {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: var(--cc-swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .3);
}
.cc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--eq-surface-solid, #111), 0 0 0 4px var(--eq-accent); }
.cc-swatch:focus-visible { outline: 3px solid var(--eq-focus); outline-offset: 3px; }
.cc-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-preview { position: relative; aspect-ratio: 3 / 4; border-radius: var(--eq-radius-lg); overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, color-mix(in srgb, var(--eq-accent) 22%, transparent), transparent 70%), var(--eq-fill-1); }
.cc-canvas { display: block; width: 100%; height: 100%; }
.cc-preview-note { position: absolute; left: 12px; right: 12px; bottom: 10px; text-align: center; }
.cc-summary { margin: 0; text-align: center; font-weight: var(--eq-weight-semibold); }
.cc-status.is-error { color: var(--eq-bad-ink); }
@media (max-width: 760px) {
  .cc-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-side { position: static; order: -1; flex-direction: row; align-items: center; }
  .cc-preview { width: 120px; flex: none; }
  .cc-summary { text-align: left; }
  .cc-classes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- combat feedback and group (js/world/floaters.js, js/ui/windows.js) ------------------------------------------ */
.labels .float-num {
  pointer-events: none; white-space: nowrap; font: 800 18px/1 var(--eq-font-display); letter-spacing: .01em;
  color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 1px rgba(0, 0, 0, .9);
  animation: float-num 1.3s cubic-bezier(.2, .8, .3, 1) both;
}
.labels .float-num--dealt { color: #fff7e0; }
.labels .float-num--crit { color: #ffd166; font-size: 24px; }
.labels .float-num--taken { color: #ff6b5b; }
.labels .float-num--miss { color: #c9d1dc; font-size: 14px; font-weight: 700; }
.labels .float-num--xp { color: var(--eq-xp-b, #b48cff); font-size: 15px; }
@keyframes float-num {
  0% { opacity: 0; translate: 0 6px; scale: .8; }
  12% { opacity: 1; translate: 0 0; scale: 1.1; }
  25% { scale: 1; }
  100% { opacity: 0; translate: 0 -46px; }
}
.level-up {
  position: absolute; left: 50%; top: 22%; translate: -50% 0; z-index: 2; pointer-events: none; opacity: 0;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .55);
}
.level-up.is-on { animation: level-up 2.6s var(--eq-ease) both; }
@keyframes level-up {
  0% { opacity: 0; scale: .85; } 15% { opacity: 1; scale: 1.04; } 25% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; translate: -50% -18px; }
}
.eq-bar.pf-gain { animation: pf-gain .9s var(--eq-ease); }
@keyframes pf-gain { 30% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--eq-xp-b, #b48cff) 70%, transparent), 0 0 14px var(--eq-xp-b, #b48cff); } }
@media (prefers-reduced-motion: reduce) {
  .labels .float-num { animation-duration: 1.3s; animation-name: float-num-still; }
  @keyframes float-num-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
  .level-up.is-on { animation-name: float-num-still; }
  .eq-bar.pf-gain { animation: none; }
}
.group-window { width: min(260px, calc(100vw - 24px)); padding: 8px 10px 10px; border-radius: var(--eq-radius-lg); display: flex; flex-direction: column; gap: 6px; }
.group-head { display: flex; align-items: center; justify-content: space-between; }
.group-title { margin: 0; font-size: var(--eq-size-xs); font-weight: var(--eq-weight-semibold); color: var(--eq-text-3); letter-spacing: var(--eq-tracking-label); }
.group-list { display: flex; flex-direction: column; gap: 6px; }
.group-member { width: 100%; }
.group-member.is-offline { opacity: .55; }
.invite-prompt { width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border-radius: var(--eq-radius-lg); display: flex; flex-direction: column; gap: 10px; }
.invite-text { margin: 0; font-weight: var(--eq-weight-semibold); }

/* ---- quests (js/ui/quests.js) ------------------------------------------------------------------------------------ */
.labels .quest-mark {
  margin: 0 auto 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 900 15px/1 var(--eq-font-display); color: #1b1300;
  background: radial-gradient(circle at 35% 30%, var(--eq-gold-hi, #f3d58f), var(--eq-gold, #e0b04a) 60%, var(--eq-gold-deep, #a97a26));
  box-shadow: 0 0 10px rgba(255, 210, 110, .7), 0 1px 2px rgba(0, 0, 0, .6);
}
.labels .quest-mark--progress { background: radial-gradient(circle at 35% 30%, #e6eefc, #a9b8d6); box-shadow: 0 0 8px rgba(170, 200, 255, .55), 0 1px 2px rgba(0, 0, 0, .6); }
.labels .quest-mark--ready { animation: quest-ready 1.6s ease-in-out infinite alternate; }
@keyframes quest-ready { to { box-shadow: 0 0 18px rgba(255, 210, 110, .95), 0 1px 2px rgba(0, 0, 0, .6); } }
@media (prefers-reduced-motion: reduce) { .labels .quest-mark--ready { animation: none; } }
.q-sub { color: var(--eq-text-2); }
.q-desc { margin: 0 0 8px; font-size: var(--eq-size-sm); line-height: 1.45; }
.q-group { margin: 8px 0; }
.q-group-text { margin: 0 0 4px; font-size: var(--eq-size-sm); color: var(--eq-text-2); font-style: italic; }
.q-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.q-step { display: flex; gap: 8px; align-items: baseline; font-size: var(--eq-size-sm); }
.q-step::before { content: "•"; color: var(--eq-text-3); }
.q-step.is-done { color: var(--eq-text-3); }
.q-step.is-done .q-step-text { text-decoration: line-through; }
.q-step.is-done::before { content: "✓"; color: var(--eq-good-ink); }
.q-step-count { margin-left: auto; font: var(--eq-weight-semibold) 11px/1 var(--eq-font-mono); color: var(--eq-text-2); }
.q-rewards { margin-top: 10px; }
.gw-icon--xp { font-size: 10px; color: #fff; background: linear-gradient(135deg, var(--eq-xp-a, #7a5cff), var(--eq-xp-b, #b48cff)); }
.q-pick { width: 100%; border: 0; border-radius: var(--eq-radius-md); padding: 4px 8px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.q-pick[aria-checked="true"] { background: var(--eq-accent-soft); box-shadow: inset 0 0 0 1px var(--eq-accent); }
.q-pick:focus-visible { outline: 2px solid var(--eq-focus); outline-offset: 2px; }
.journal-window { width: min(400px, calc(100vw - 24px)); }
.q-list { display: flex; flex-direction: column; gap: 8px; }
.q-entry { border-radius: var(--eq-radius-md); background: var(--eq-fill-1); padding: 8px 10px; }
.q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; cursor: pointer; }
.q-name { font-weight: var(--eq-weight-semibold); }
.q-level { margin-left: auto; font-size: var(--eq-size-xs); color: var(--eq-text-2); }
.quest-tracker { width: min(260px, calc(100vw - 24px)); padding: 8px 12px; border-radius: var(--eq-radius-lg); display: flex; flex-direction: column; gap: 8px; }
.qt-name { all: unset; cursor: pointer; font-weight: var(--eq-weight-semibold); font-size: var(--eq-size-sm); color: var(--eq-gold, #e0b04a); }
.qt-name:focus-visible { outline: 2px solid var(--eq-focus); outline-offset: 2px; border-radius: 4px; }
.qt-step { margin: 2px 0 0; font-size: var(--eq-size-xs); color: var(--eq-text-2); }
.qt-ready { color: var(--eq-good-ink); }
@media (max-width: 640px) { .quest-tracker { display: none; } } /* the journal (J / the Journal button) has it all on phones */

/* ---- login and character screens at phone width (Product Architect audit: the 400 px card overflowed 375 px) ---- */
main.eq-login { grid-template-columns: minmax(0, 1fr); }
main.eq-login > .eq-login__card, main.eq-login > .chars-panel, main.eq-login > .create-panel { justify-self: center; width: min(var(--card-w, 400px), 100%); }
main.eq-login > .chars-panel { --card-w: 780px; }
main.eq-login > .create-panel { --card-w: 980px; }