/* Solunara — Machine Heavens. Shared theme: warm science-fantasy, sun/moon duality. */
:root {
  --bg:       #0b0e1f;   /* deep night indigo */
  --bg-2:     #161a36;
  --panel:    #1a1f3d;
  --panel-2:  #232a52;
  --border:   #39406f;
  --text:     #e7e9ff;
  --muted:    #9aa0c8;
  --gold:     #f5c451;   /* Solari / sun */
  --silver:   #9ec7ff;   /* Lunari / moon */
  --eclipse:  #c79bff;   /* Eclipse */
  --danger:   #ff7a8a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: radial-gradient(1200px 800px at 50% -10%, #1c2350 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: var(--silver); }

/* ── Centered page shell (title / auth) ── */
.shell {
  position: relative; z-index: 2;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem;
  padding: 2rem; text-align: center;
}
#bg-canvas { position: fixed; inset: 0; z-index: 0; }

/* ── Title ── */
.brand { line-height: 1; }
.brand h1 {
  margin: 0; font-size: clamp(3rem, 11vw, 7rem); letter-spacing: 0.18em;
  font-weight: 800; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, var(--gold) 45%, var(--silver) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(245,196,81,0.25)) drop-shadow(0 2px 24px rgba(158,199,255,0.2));
}
.brand .sub {
  margin-top: 0.5rem; font-size: clamp(0.8rem, 2.4vw, 1.1rem);
  letter-spacing: 0.55em; text-transform: uppercase; color: var(--muted); padding-left: 0.55em;
}
.tagline { max-width: 34rem; color: var(--muted); font-style: italic; font-size: 1.02rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.75rem 1.5rem; min-width: 12rem;
  font: inherit; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--text); cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: 10px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 22px rgba(245,196,81,.18); }
.btn:active { transform: translateY(0); }
.btn-primary { border-color: var(--gold); box-shadow: 0 0 22px rgba(245,196,81,.22); }
.btn-ghost { background: transparent; min-width: 0; padding: 0.5rem 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ── Auth card ── */
.card {
  width: min(420px, 92vw); background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.55); text-align: left;
}
.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }
.tab {
  flex: 1; padding: 0.6rem; text-align: center; cursor: pointer; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem;
}
.tab.active { color: var(--text); border-color: var(--gold); background: var(--panel-2); }
.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.field input {
  width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: var(--text);
  background: #10142e; border: 1px solid var(--border); border-radius: 8px;
}
.field input:focus { outline: none; border-color: var(--silver); box-shadow: 0 0 0 3px rgba(158,199,255,.15); }
.hidden { display: none !important; }
.msg { min-height: 1.1rem; font-size: 0.82rem; color: var(--danger); margin: 0.2rem 0 0.6rem; }

/* ── Faction picker ── */
.factions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 0.4rem; }
.faction {
  cursor: pointer; border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.4rem;
  text-align: center; background: #10142e; transition: border-color .15s, background .15s;
}
.faction .glyph { font-size: 1.5rem; line-height: 1; }
.faction .fname { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; margin-top: 0.3rem; text-transform: uppercase; }
.faction .fdesc { font-size: 0.62rem; color: var(--muted); margin-top: 0.2rem; }
.faction[data-f="solari"].sel  { border-color: var(--gold);    background: rgba(245,196,81,.10); }
.faction[data-f="lunari"].sel  { border-color: var(--silver);  background: rgba(158,199,255,.10); }
.faction[data-f="eclipsed"].sel{ border-color: var(--eclipse); background: rgba(199,155,255,.10); }

/* ── Game HUD ── */
#game-wrap { position: fixed; inset: 0; background: #05060f; }
#game { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg, rgba(8,10,26,.92), rgba(8,10,26,0));
  pointer-events: none; font-size: 0.82rem;
}
.hud .pill {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
  background: rgba(16,20,46,.8); border: 1px solid var(--border); border-radius: 999px;
}
.hud .spacer { flex: 1; }
.hud .clock { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.asc-solari  { color: var(--gold);    border-color: var(--gold)    !important; }
.asc-lunari  { color: var(--silver);  border-color: var(--silver)  !important; }
.asc-eclipse { color: var(--eclipse); border-color: var(--eclipse) !important; }
.hud .btn-ghost { pointer-events: auto; }

/* Region banner that announces itself on border-cross */
.region-banner {
  position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
  z-index: 6; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.region-banner.show { opacity: 1; }
.region-banner .rname {
  font-size: 2rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}
.region-banner .rsub { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

.hint { position: fixed; bottom: 0.7rem; left: 50%; transform: translateX(-50%); z-index: 5;
  color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; pointer-events: none; }

/* ── HUD tool buttons ── */
.hud-tools { display: inline-flex; gap: 0.3rem; pointer-events: auto; }
.hud-btn {
  display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.55rem;
  background: rgba(16,20,46,.8); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 0.82rem; cursor: pointer; line-height: 1;
}
.hud-btn:hover { border-color: var(--gold); }
.hud-btn.active { border-color: var(--gold); background: rgba(245,196,81,.14); }
.hud-btn span { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Who's-online panel ── */
.panel-card {
  position: fixed; top: 3rem; left: 0.6rem; z-index: 7; width: 220px; max-height: 60vh; overflow-y: auto;
  background: rgba(16,20,46,.93); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 0.82rem; backdrop-filter: blur(3px);
}
.panel-card-head { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; color: var(--silver); }
.pl-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem; border-bottom: 1px solid #232a52; }
.pl-row:last-child { border-bottom: none; }
.pl-row .pl-name { font-weight: 700; }
.pl-row .pl-reg { margin-left: auto; color: var(--muted); font-size: 0.7rem; }

/* ── Minimap ── */
.minimap {
  position: fixed; top: 3rem; right: 0.6rem; z-index: 7;
  border: 1px solid var(--border); border-radius: 8px; background: #0c1024;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); image-rendering: pixelated;
}

/* ── World chat window (draggable + resizable) ── */
.chat-window {
  position: fixed; z-index: 8; display: flex; flex-direction: column;
  background: rgba(16,20,46,0.92); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); backdrop-filter: blur(3px); overflow: hidden;
  min-width: 240px; min-height: 150px; font-size: 0.82rem;
}
.chat-window.collapsed { min-height: 0; height: auto !important; }
.chat-window.collapsed .chat-body, .chat-window.collapsed .chat-resize { display: none; }
.chat-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; cursor: move;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--border);
  user-select: none; touch-action: none;
}
.chat-title { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.chat-presence { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.72rem; }
.chat-presence .dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 6px #5fd08a; }
.chat-window.chat-offline .chat-presence .dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.chat-header .chat-min {
  margin-left: auto; width: 22px; height: 22px; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--text); font: inherit;
}
.chat-header .chat-min:hover { border-color: var(--gold); }
.chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.18rem; }
.chat-msg { line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-msg .t { color: #5b628c; font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.chat-msg .who { font-weight: 700; }
.chat-msg .tx { color: var(--text); }
.chat-msg.sys { color: var(--muted); font-style: italic; font-size: 0.76rem; }
.chat-input { padding: 0.4rem; border-top: 1px solid var(--border); }
.chat-input input {
  width: 100%; padding: 0.45rem 0.6rem; font: inherit; color: var(--text);
  background: #0d1130; border: 1px solid var(--border); border-radius: 6px;
}
.chat-input input:focus { outline: none; border-color: var(--silver); box-shadow: 0 0 0 3px rgba(158,199,255,.14); }
.chat-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 75%, var(--border) 75%);
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: #2c3360; border-radius: 4px; }