:root {
  color-scheme: dark;
  --ink: #e4e0c5;
  --muted: #939987;
  --line: rgba(207, 208, 171, 0.16);
  --panel: #161b17;
  --canvas: #0c110e;
  --accent: #c8d27d;
  --danger: #b85d4b;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  overflow: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.app-shell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 72px 1fr;
  background:
    radial-gradient(circle at 25% 0%, rgba(116, 132, 91, .08), transparent 28%),
    var(--canvas);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.brand {
  color: inherit;
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(200, 210, 125, .5);
  color: var(--accent);
  font-size: 24px;
  transform: rotate(45deg);
}

.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-mark { line-height: 1; }
.brand-mark > * { transform: rotate(-45deg); }

.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { letter-spacing: .28em; font-size: 15px; }
.brand-copy small, .world-state { color: var(--muted); font: 10px/1.4 var(--mono); letter-spacing: .08em; }

.world-state { display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.world-state i { width: 1px; height: 14px; background: var(--line); }
.pulse-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 0 rgba(200,210,125,.5); animation: pulse 2.6s infinite; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  min-height: 0;
  padding: 12px;
  gap: 12px;
}

.map-panel, .character-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.map-panel { display: grid; grid-template-rows: 44px minmax(0, 1fr); }
.map-heading, .panel-label {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .18em;
}
.map-heading small { color: var(--muted); font: 9px var(--mono); letter-spacing: .06em; }

.map-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  background: #15231f;
  touch-action: none;
}
.map-viewport.is-dragging { cursor: grabbing; }
.map-scene {
  position: absolute;
  width: 1600px;
  height: 1000px;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
}
.world-map { width: 100%; height: 100%; display: block; user-select: none; }
.contours { opacity: .18; }
.shoreline { fill: none; stroke: #c5c39a; stroke-width: 15; opacity: .07; }
.mountains { fill: rgba(20,29,25,.55); stroke: #a5ab87; stroke-width: 3; opacity: .7; }
.mountains path { stroke-linejoin: round; }
.rivers { fill: none; stroke: #91a8a0; stroke-width: 8; stroke-linecap: round; opacity: .45; }
.region-labels text { fill: #d1ceb2; opacity: .32; font: 700 58px var(--serif); letter-spacing: .28em; }
.location { cursor: pointer; }
.location circle:not(.location-ring) { fill: var(--accent); filter: drop-shadow(0 0 7px rgba(200,210,125,.7)); }
.location-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .35; animation: locationPulse 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.location text { text-anchor: middle; fill: #dedcbd; font: 500 19px var(--serif); letter-spacing: .12em; paint-order: stroke; stroke: #26362f; stroke-width: 7px; }
.location.danger circle:not(.location-ring) { fill: var(--danger); filter: drop-shadow(0 0 8px rgba(184,93,75,.8)); }
.location.danger .location-ring { stroke: var(--danger); }
.map-decoration circle { fill: none; stroke: #bcc09b; stroke-width: 1; opacity: .2; }
.map-decoration path { fill: none; stroke: #bcc09b; stroke-width: 1; opacity: .25; }
.map-decoration text { fill: #bcc09b; font: 16px var(--mono); opacity: .5; }

.map-hint, .zoom-readout {
  position: absolute;
  bottom: 16px;
  color: rgba(224,224,196,.7);
  background: rgba(11,17,14,.68);
  border: 1px solid rgba(210,215,179,.12);
  backdrop-filter: blur(8px);
  font: 9px var(--mono);
  letter-spacing: .06em;
}
.map-hint { left: 16px; padding: 9px 12px; transition: opacity .35s, transform .35s; }
.map-hint.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.drag-icon { color: var(--accent); margin-right: 7px; }
.zoom-readout { right: 16px; padding: 8px 10px; }
.map-controls { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; background: rgba(11,17,14,.7); backdrop-filter: blur(8px); border: 1px solid rgba(210,215,179,.14); }
.map-controls button { width: 38px; height: 38px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: color .2s, background .2s; }
.map-controls button:hover { color: var(--accent); background: rgba(200,210,125,.08); }
.map-controls .reset-button { border: 0; font-size: 9px; letter-spacing: .08em; }

.character-panel { display: grid; grid-template-rows: 44px minmax(0, 1fr); }
.panel-index { color: var(--accent); font-size: 17px; }
.wallet-empty, .character-data { padding: 34px 30px 28px; min-height: 0; }
.wallet-empty { display: flex; flex-direction: column; justify-content: space-between; animation: revealPanel .7s cubic-bezier(.2,.8,.2,1) both; }
.seal { align-self: flex-end; width: 74px; height: 74px; border: 1px solid rgba(200,210,125,.35); color: rgba(200,210,125,.75); transform: rotate(45deg); display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 13px; font-size: 15px; }
.seal span { transform: rotate(-45deg); }
.eyebrow { margin: 0 0 13px; color: var(--accent); font: 9px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.wallet-empty h1 { margin: 0; font-size: clamp(35px, 3vw, 50px); font-weight: 600; line-height: 1.3; letter-spacing: .08em; }
.wallet-description { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 2; }
.connect-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; color: #172019; background: var(--accent); border: 1px solid var(--accent); cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: .18em; transition: transform .2s, box-shadow .2s, background .2s; }
.connect-button:hover { transform: translateY(-2px); background: #d7df90; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.connect-button:active { transform: translateY(0); }
.connect-button:disabled { cursor: wait; opacity: .7; }
.wallet-note { margin: -12px 0 0; text-align: center; color: #6d7468; font: 8px var(--mono); }

.character-data { display: flex; flex-direction: column; gap: 27px; animation: revealPanel .6s cubic-bezier(.2,.8,.2,1) both; overflow-y: auto; }
.wallet-empty[hidden], .character-data[hidden] { display: none; }
.identity-row { display: flex; align-items: center; gap: 16px; }
.avatar { width: 66px; height: 78px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(200,210,125,.35); background: radial-gradient(circle at 50% 25%, #64715c, #243128 62%, #151d18); position: relative; overflow: hidden; }
.avatar::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(230,225,190,.12); }
.avatar span { font-size: 25px; color: rgba(226,222,190,.8); }
.identity-row h2 { margin: 0 0 5px; font-size: 26px; letter-spacing: .12em; }
.wallet-address { background: transparent; border: 0; color: var(--muted); padding: 0; cursor: pointer; font: 9px var(--mono); }
.wallet-address:hover { color: var(--accent); }
.realm-block { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.realm-block > div { display: flex; flex-direction: column; gap: 8px; }
.realm-block span, .progress-copy, .qi-progress small { color: var(--muted); font: 9px var(--mono); }
.realm-block strong { font-size: 19px; letter-spacing: .12em; }
.realm-block .realm-rank { font: 32px var(--serif); color: var(--accent); opacity: .7; }
.qi-progress { display: flex; flex-direction: column; gap: 10px; }
.progress-copy { display: flex; justify-content: space-between; }
.progress-copy span:last-child { color: var(--ink); }
.progress-track { height: 3px; background: rgba(231,230,197,.1); overflow: hidden; }
.progress-track i { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; animation: progressIn 1s .3s both; }
.qi-progress small { color: #656d62; }
.stat-list { margin: 0; display: flex; flex-direction: column; }
.stat-list div { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(207,208,171,.08); }
.stat-list dt { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.stat-list dd { margin: 0; font: 14px var(--mono); }
.stat-list dd small { margin-left: 5px; color: #747b6e; font: 9px var(--serif); }
.character-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 9px var(--mono); }
.character-footer span { display: flex; align-items: center; gap: 7px; }
.character-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.character-footer button { border: 0; background: none; color: #767d70; cursor: pointer; font: 9px var(--mono); }
.character-footer button:hover { color: var(--danger); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translate(-50%, 20px); padding: 10px 16px; border: 1px solid var(--line); background: rgba(18,24,20,.92); color: var(--ink); font: 10px var(--mono); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(200,210,125,0); } 100% { box-shadow: 0 0 0 0 rgba(200,210,125,0); } }
@keyframes locationPulse { 0% { transform: scale(.72); opacity: .5; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes revealPanel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes progressIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { grid-template-rows: 64px auto; }
  .topbar { padding: 0 16px; }
  .desktop-only, .world-state i { display: none; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(520px, 68svh) auto; padding: 8px; gap: 8px; }
  .character-panel { min-height: 570px; }
  .wallet-empty, .character-data { padding: 28px 24px; }
}

@media (max-width: 560px) {
  .brand-copy small { display: none; }
  .workspace { grid-template-rows: 62svh auto; }
  .map-heading small { max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .map-hint { bottom: 12px; left: 12px; }
  .zoom-readout { bottom: 12px; right: 12px; }
  .map-controls { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}