:root {
  --bg: #07090f;
  --panel: #10141cee;
  --ink: #efe6cf;
  --muted: #8b93a7;
  --gold: #e2b84a;
  --laser: #ff2a4a;
  --cool: #5ad6ff;
  --line: #2a3140;
}
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  position: fixed; inset: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  user-select: none;
  touch-action: none;
}
body {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 480px at 50% -10%, #1a1020 0%, transparent 60%),
    linear-gradient(180deg, #0b0d14 0%, #07090f 40%, #05060a 100%);
}

#mast {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 7px;
  border-bottom: 1px solid #1c2230;
  background: #0a0c12f2;
  z-index: 12;
}
#mast::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--laser) 18%, var(--gold) 50%, var(--cool) 82%, transparent);
  pointer-events: none;
}
#brand {
  display: flex; gap: 10px; align-items: center;
  text-decoration: none; color: inherit; pointer-events: auto;
}
.s0ld-mark {
  display: flex; align-items: center;
  font-weight: 800; letter-spacing: 0.08em;
  font-size: 22px; color: #f2e6c4;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.s0ld-mark .aperture {
  width: 0.7em; height: 0.7em; margin: 0 0.05em;
  border-radius: 50%;
  border: 2px solid #f2e6c4;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 50%, #ff2a4a 0 30%, #140308 31% 100%);
  box-shadow: 0 0 10px #ff2a4a99;
}
.brand-copy .word {
  font-size: 11px; letter-spacing: 0.28em; color: #f2e6c4; text-transform: lowercase;
}
.brand-copy .tag {
  font-size: 10px; color: var(--gold); letter-spacing: 0.12em;
}
#nav {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
#nav a, #mode-chip, #clock, #mute {
  font-size: 10px; letter-spacing: 0.1em;
  border: 1px solid #3a3348;
  background: #12101ae6;
  color: var(--ink);
  padding: 5px 8px;
  text-decoration: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
#nav a:hover { border-color: var(--gold); color: var(--gold); }
#nav a.on { border-color: var(--laser); color: var(--laser); }
#mute { cursor: pointer; color: var(--cool); }
#mute.off { color: var(--laser); }
#mode-chip { display: none; }

#stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
#bezel {
  position: relative;
  box-shadow:
    0 0 0 2px #1a140c,
    0 0 0 3px var(--gold),
    0 0 0 6px #0a0806,
    0 18px 50px #00000088;
}
#c {
  display: block;
    image-rendering: auto;
  width: min(96vw, calc((100vh - 108px) * 960 / 540));
  height: min(calc(100vh - 108px), calc(96vw * 540 / 960));
  background: #1a5a32;
  cursor: crosshair;
}
#scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(8, 10, 16, 0.03) 0 1px,
    transparent 1px 5px
  );
  opacity: 0.12;
}
#fade {
  position: absolute; inset: 0; pointer-events: none;
  background: #04060c;
  opacity: 0;
  transition: opacity .16s linear;
}
#fade.on { opacity: 1; }

#inv, #card, #craft, #board, #plaque, #prompt-bar, #status, #exit, #made {
  position: absolute;
  z-index: 8;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
#inv {
  top: 8px; right: 8px;
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 5px 7px;
  font-size: 9px;
  min-width: 78px;
  line-height: 1.55;
  color: var(--ink);
}
.inv-h { color: var(--gold); letter-spacing: 0.14em; font-size: 8px; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 3px; }
.dot.metal { background: #c0c8d8; }
.dot.rock { background: #8a8070; }
.dot.wood { background: #b07038; }

#card {
  top: 8px; left: 8px;
  width: min(210px, calc(100% - 24px));
  display: flex; gap: 8px; padding: 7px;
  background: var(--panel);
  border: 1px solid var(--cool);
}
#card[hidden] { display: none !important; }
html.public #card-role { display: none; }
#card-pfp {
  width: 48px; height: 48px; object-fit: contain;
  background: #0c1018; image-rendering: auto; flex: none;
}
#card-name { font-size: 11px; color: #f4f7fb; }
#card-title { font-size: 9px; color: var(--gold); }
.card-meta { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
#card-goal, #card-role {
  font-size: 8px; padding: 1px 5px; border: 1px solid var(--line);
}
#card-goal { color: var(--cool); }
#card-role { color: #ff7a9a; }
#card-cover { margin-top: 4px; font-size: 8px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }

#craft, #board, #plaque {
  left: 50%; bottom: 10px; transform: translateX(-50%);
  width: min(300px, calc(100% - 16px));
  background: var(--panel);
  border: 1px solid var(--gold);
  padding: 7px 9px;
  font-size: 10px;
  position: fixed;
  z-index: 16;
}
#craft[hidden], #board[hidden], #plaque[hidden] { display: none !important; }
.win-h { color: var(--gold); letter-spacing: 0.1em; font-size: 9px; margin-bottom: 5px; }
#craft-list { display: flex; flex-direction: column; gap: 3px; }
#craft-list button, #board-body button, #plaque-a {
  background: #141822; border: 1px solid #3cf0ff66; color: #e8eef6;
  font: 10px ui-monospace, Menlo, Consolas, monospace;
  padding: 4px 7px; cursor: pointer; text-align: left;
}
#craft-list button:disabled { opacity: 0.45; cursor: not-allowed; }
#craft-lock { color: #ff7a9a; font-size: 9px; }
#made {
  top: 84px; left: 8px;
  width: min(240px, calc(100% - 24px));
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--gold);
  font-size: 11px;
}
#made[hidden] { display: none !important; }
#made-sil {
  width: 72px; height: 72px; object-fit: contain;
  background: #07090f; flex: none;
  border: 1px solid #2a3140;
}
#made-name { color: #f2e6c4; font-weight: 700; letter-spacing: 0.04em; }
#made-serial {
  color: var(--laser);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  margin: 4px 0;
  font-size: 10px;
}
#made-class { color: var(--muted); font-size: 10px; line-height: 1.35; }
#made-link, #made-copy {
  display: inline-block;
  margin-top: 6px;
  margin-right: 8px;
  background: #141822; border: 1px solid #3cf0ff66; color: #e8eef6;
  font: 10px ui-monospace, Menlo, Consolas, monospace;
  padding: 4px 7px; cursor: pointer; text-decoration: none;
}
#plaque-b { color: #e8e0d0; line-height: 1.5; margin-bottom: 6px; font-size: 12px; }
#plaque-h, .win-h { letter-spacing: 0.12em; }
#plaque-a { display: inline-block; text-decoration: none; color: var(--cool); }
#plaque-a[hidden] { display: none !important; }
#plaque-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #0c0e14;
  border: 1px solid #3a3348;
  margin: 0 0 8px;
}
#plaque-img[hidden] { display: none !important; }
#plaque-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 0 0 8px;
  padding: 12px;
  border: 1px dashed #8b93a788;
  background:
    repeating-linear-gradient(45deg, #12141c 0 8px, #161820 8px 16px);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.4;
}
#plaque-ph[hidden] { display: none !important; }
html[data-map="art"] #plaque {
  width: min(320px, calc(100% - 24px));
}

#prompt-bar {
  left: 50%; bottom: 36px; transform: translateX(-50%);
  width: min(340px, calc(100vw - 24px)); margin: 0;
  position: fixed;
}
html.public #prompt-bar,
html[data-portal="1"] #prompt-bar,
html:not([data-map="town"]) #prompt-bar { display: none !important; }
#prompt-input {
  width: 100%; box-sizing: border-box;
  background: #07090ecc; border: 1px solid var(--gold);
  color: #e8eef6; font: 11px ui-monospace, Menlo, Consolas, monospace;
  padding: 6px 9px; outline: none;
}
#status {
  left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 9px; color: var(--muted); pointer-events: none;
  max-width: 90vw; text-align: center;
  position: fixed;
  letter-spacing: 0.04em;
}
#exit {
  top: auto; bottom: auto;
  position: fixed;
  top: 52px; left: 12px;
  color: var(--gold); text-decoration: none;
  font-size: 9px; letter-spacing: 0.1em;
  border: 1px solid var(--gold); background: var(--panel); padding: 3px 8px;
}
html[data-map="town"] #exit { display: none; }

#colophon {
  flex: none;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px 8px;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted);
  border-top: 1px solid #1c2230;
  background: #0a0c12f2;
  z-index: 12;
}
#colophon .sep { color: #3a3348; }

@media (max-width: 720px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  #mast { padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); }
  .s0ld-mark { font-size: 16px; }
  .brand-copy { display: none; }
  #nav { gap: 4px; }
  #nav a, #clock, #mute { padding: 7px 8px; font-size: 11px; }
  #stage { flex: 1; min-height: 0; align-items: stretch; justify-content: stretch; }
  #bezel {
    width: 100%;
    height: 100%;
    box-shadow: none;
  }
  #c {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html[data-map="rich"] #c { object-fit: contain; background: #1a120c; }
  #inv { top: auto; bottom: 88px; right: 8px; }
  #card { top: auto; bottom: 88px; left: 8px; width: min(200px, calc(100% - 24px)); }
  #prompt-bar {
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 16px));
  }
  html.public #status, html:not([data-map="town"]) #status { bottom: 8px; }
  #status { bottom: 58px; }
  #exit { top: auto; bottom: auto; top: max(52px, calc(env(safe-area-inset-top) + 44px)); }
  #colophon { font-size: 9px; padding: 4px 8px 6px; }
}

#stick {
  display: none;
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px));
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.55);
  border: 1px solid rgba(226, 184, 74, 0.45);
  z-index: 18;
  touch-action: none;
}
#stick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(242, 230, 196, 0.92);
  box-shadow: 0 0 12px #e2b84a66;
  pointer-events: none;
}
html:not([data-portal="1"]) #stick.on { display: block; }
@media (max-width: 520px), (pointer: coarse) {
  html:not([data-portal="1"]) #stick { display: block; }
}
html[data-map="rich"] #inv,
html[data-map="rich"] #scan { display: none !important; }
html[data-map="rich"] #plaque {
  border-color: #c4b09055;
  background: #14100cee;
  width: min(292px, calc(100% - 24px));
}
html[data-map="rich"] #plaque-h {
  color: #e2c48a;
  letter-spacing: 0.16em;
}
html[data-map="rich"] #plaque-b {
  font-size: 13px;
  line-height: 1.45;
  color: #efe6cf;
}
html[data-map="rich"] #plaque-a {
  background: transparent;
  border: 0;
  color: #8b93a7;
  padding: 0;
  font-size: 10px;
}

html[data-portal="1"],
html[data-portal="1"] body {
  background: #0a1c14;
}
html[data-portal="1"] #mast,
html[data-portal="1"] #colophon,
html[data-portal="1"] #prompt-bar,
html[data-portal="1"] #inv,
html[data-portal="1"] #card,
html[data-portal="1"] #status,
html[data-portal="1"] #exit,
html[data-portal="1"] #scan,
html[data-portal="1"] #craft,
html[data-portal="1"] #made,
html[data-portal="1"] #board,
html[data-portal="1"] #plaque,
html[data-portal="1"] #mute,
html[data-portal="1"] #mode-chip,
html[data-portal="1"] #clock { display: none !important; }
html[data-portal="1"] #stage,
html[data-portal="1"] #bezel {
  width: 100%; height: 100%;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
html[data-portal="1"] #c {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 205% !important;
  height: 205% !important;
  transform: translate(-50%, -50%);
  object-fit: unset;
  cursor: default;
}