@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/press-start.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --pond: #1c120e;
  --pond-deep: #100a08;
  --lime: #f0b34a;
  --cream: #fff1dc;
  --pink: #ff6b4a;
  --titlebar: linear-gradient(90deg, #8a3d16, #e07a28 52%, #ffc56a);
  --glass: rgba(36, 20, 12, 0.72);
  --font: "Press Start 2P", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.swamp {
  min-height: 100vh;
  padding-bottom: 54px;
  color: var(--cream);
  font-family: var(--font);
  background-color: var(--pond);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(240, 160, 60, 0.16) 0 34px, transparent 35px),
    radial-gradient(circle at 82% 30%, rgba(224, 110, 40, 0.12) 0 48px, transparent 49px),
    radial-gradient(circle at 64% 78%, rgba(255, 196, 110, 0.08) 0 40px, transparent 41px),
    radial-gradient(circle at 30% 62%, rgba(255, 255, 255, 0.04) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 50% 120%, rgba(255, 220, 170, 0.03) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #3a2218 0, var(--pond) 45%, var(--pond-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: none;
}

button, a, input { font-family: inherit; }

.ticker-wrap {
  width: min(80vw, 100%);
  margin: 12px auto 8px;
  padding: 0 12px;
}

.ticker {
  position: relative;
  overflow: hidden;
  height: 32px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 23s linear infinite;
}

.ticker-track span {
  margin: 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg, #8a3d16, #ffc56a, #fff1dc, #ffc56a, #8a3d16, #ffc56a, #fff1dc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes shine {
  to { background-position: 200% center; }
}

.desk {
  display: flex;
  gap: 12px;
  padding: 0 12px 24px;
}

.desktop-nav {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  flex-shrink: 0;
}

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--cream);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px dashed transparent;
}

.desk-icon img {
  width: 52px;
  height: 52px;
  padding: 5px;
  object-fit: contain;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #fff1dc 0, #f0b34a 70%, #d4892a 100%);
  border: 2px solid #ffe0b0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
}

.desk-icon span {
  background: rgba(28, 16, 10, 0.8);
  padding: 2px 4px;
  border-radius: 3px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.desk-icon:hover,
.desk-icon:focus-visible {
  border-color: rgba(240, 179, 74, 0.6);
  background: rgba(240, 179, 74, 0.08);
  outline: none;
}

.board {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.win-slot { scroll-margin-top: 16px; min-width: 0; }
.win-slot.hidden { display: none; }

.window {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--glass);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  box-shadow:
    0 0 0 1px rgba(240, 179, 74, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.45),
    -3px -1.5px 0 rgba(180, 60, 20, 0.45),
    3px 1.5px 0 rgba(255, 196, 90, 0.4);
}

.reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1) 45%, transparent 50%);
}

.title-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 35px;
  padding: 8px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: var(--titlebar);
  color: #fff6e8;
  text-shadow: 0 1px 0 #5a2a10;
}

.pixel-text {
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-bar-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 20;
}

.title-bar-controls button {
  width: 16px;
  height: 14px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background-color: silver;
  background-repeat: no-repeat;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  cursor: pointer;
}

.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
  background-position: left 4px bottom 3px;
}

.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");
  background-position: left 3px top 2px;
}

.title-bar-controls button[aria-label="Close"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
  background-position: left 4px top 3px;
}

.window-body {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.window-body.tight { padding: 6px; }

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("../assets/fx/noise.png");
  z-index: 2;
}

.window-content { position: relative; z-index: 20; }

.hero {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #2a1810 url("../assets/art/main-bg.jpg") center / cover no-repeat;
}

.hero-copy {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;
  max-width: 340px;
}

.hero h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
}

.hero h1.short { font-size: 42px; }

.hero p {
  margin: 12px 0 0;
  max-width: 300px;
  font-size: 9px;
  line-height: 1.7;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 4px 8px;
}

.cast {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 10px;
}

.cast-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 6px;
  border-radius: 8px;
  border: 1px solid rgba(240, 179, 74, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-size: 10px;
  cursor: pointer;
}

.cast-btn img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 6px;
  background: #2a1810;
}

.cast-btn.on,
.cast-btn:hover {
  background: var(--lime);
  color: #3a1c08;
  border-color: var(--lime);
}

.hero-mascot {
  position: absolute;
  right: 4%;
  bottom: 0;
  z-index: 10;
  height: 86%;
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(240, 179, 74, 0.3));
}

.x-link {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 2px solid rgba(240, 179, 74, 0.7);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.x-link svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.x-link:hover {
  color: var(--lime);
  border-color: var(--lime);
}

.socials {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.socials .reflection { border-radius: 16px; }

.social-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.btn-98 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #808080;
  background: linear-gradient(#333, #1a1a1a);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.btn-98:hover { background: linear-gradient(#444, #333); transform: translateY(-1px); }
.btn-98:active { transform: translateY(1px); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3); }
.btn-98.small { min-height: 32px; font-size: 8px; padding: 2px 8px; }
.btn-98.wide { width: 100%; margin-top: 16px; font-size: 9px; min-height: 36px; }

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 8px;
  line-height: 1.6;
  color: rgba(241, 239, 210, 0.75);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 9px;
  line-height: 1.6;
  color: var(--cream);
}

.stat-list .row,
.hold-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lime { color: var(--lime); font-weight: 400; }

.progress {
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 179, 74, 0.4);
}

.progress > div {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--lime) 0 10px, #e07a28 10px 14px);
  box-shadow: 0 0 10px rgba(240, 179, 74, 0.6);
}

.cam {
  position: relative;
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}

.cam img.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  font-size: 10px;
  color: #ef4444;
  animation: pulse 1.2s steps(2) infinite;
}

.cam-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffd7a1;
  font-size: 8px;
  line-height: 1.5;
}

.fire {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.feed {
  height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.feed-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
  opacity: 0.8;
}

.feed-empty img { width: 48px; height: 48px; image-rendering: pixelated; }

.feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-bottom: 1px solid rgba(240, 179, 74, 0.12);
  color: var(--cream);
  text-decoration: none;
  font-size: 9px;
  line-height: 1.5;
}

.feed-row > img,
.feed-row > .stack {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(240, 179, 74, 0.35);
}

.stack {
  position: relative;
  display: block;
  overflow: hidden;
  background: #2a1810;
}

.stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.cam .stack {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.feed-row span.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .dim { opacity: 0.6; font-size: 8px; white-space: nowrap; }
.feed-row:hover { background: rgba(240, 179, 74, 0.08); }

.live-dot { color: var(--pink); animation: blink 1.2s steps(2) infinite; }

@keyframes blink { 50% { opacity: 0.2; } }
@keyframes pulse { 50% { opacity: 0.45; } }

.steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 9px;
  line-height: 1.7;
  color: var(--cream);
}

#how .window-body { padding: 16px 18px 18px; }

#how .steps {
  font-size: 13px;
  line-height: 1.85;
  gap: 16px;
  padding-left: 28px;
}

#how .phrase-row code {
  font-size: 13px;
  padding: 12px 14px;
}

#how .btn-98 {
  font-size: 12px;
  min-height: 48px;
  padding: 8px 16px;
}

#how .btn-98.small {
  font-size: 11px;
  min-height: 42px;
}

#how #wallet-status {
  font-size: 12px;
  line-height: 1.7;
}

.mint-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}

.mint-side .wallet-box { margin-top: 0; margin-bottom: 12px; }

.mint-side .wallet-box .btn-98 { flex: 1 1 140px; }

.mint-preview {
  width: min(100%, 240px);
  aspect-ratio: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(240, 179, 74, 0.55);
  background: #2a1810;
}

.mint-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pick-block { margin-bottom: 12px; }

.pick-label {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

.pick-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.pick-chip {
  flex: 0 0 92px;
  width: 92px;
  padding: 4px;
  border-radius: 8px;
  border: 2px solid rgba(240, 179, 74, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  cursor: pointer;
  font-family: inherit;
  font-size: 8px;
  line-height: 1.4;
  text-align: left;
}

.pick-chip img,
.pick-chip .chip-pic {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
  background: #2a1810;
}

.pick-chip .chip-pic {
  position: relative;
  overflow: hidden;
}

.pick-chip .chip-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.pick-chip span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-chip.on {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
}

@media (max-width: 800px) {
  .mint-layout { grid-template-columns: 1fr; }
  #how .steps { font-size: 11px; }
}

.phrase-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phrase-row code {
  flex: 1;
  padding: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(240, 179, 74, 0.4);
  color: var(--lime);
  font-family: inherit;
  font-size: 9px;
}

.wallet-box {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#wallet-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 8px;
  line-height: 1.6;
  color: var(--cream);
}

.wallet-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}

.wallet-modal[hidden] { display: none; }

.wallet-sheet {
  width: min(520px, 100%);
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(36, 20, 12, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.wallet-lead {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--cream);
}

#wallet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

.wallet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(240, 179, 74, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.wallet-row img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #111;
  flex: none;
}

.wallet-row span { flex: 1; }

.wallet-row b {
  font-weight: 400;
  font-size: 9px;
  color: var(--lime);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.trait-tab {
  font-size: 8px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(240, 179, 74, 0.3);
}

.trait-tab.on {
  background: var(--lime);
  color: #3a1c08;
  border-color: var(--lime);
}

.trait-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.trait-grid {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.trait-card {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(240, 179, 74, 0.18);
  color: inherit;
  text-decoration: none;
}

.trait-card .pic {
  aspect-ratio: 1;
  position: relative;
  background: #2a1810;
}

.trait-card .pic img,
.trait-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layer-eyes.fit-cz { transform-origin: 50% 42%; transform: translate(-3%, -2%) scale(0.8); }
.base-cz { transform-origin: 50% 42%; transform: translate(0, 6%) scale(0.88); }
.layer-head.fit-cz.hat-snap { transform-origin: 48% 55%; transform: translate(-2%, -6%) scale(0.9); }
.layer-head.fit-cz.hat-beanie { transform-origin: 50% 44%; transform: translate(-1%, -2%) scale(0.92); }
.layer-head.fit-cz.hat-cap { transform-origin: 50% 36%; transform: translate(-1%, 2%) scale(1.02); }
.layer-eyes.fit-elon { transform-origin: 50% 42%; transform: translate(-3%, -2%) scale(0.8); }
.base-elon { transform-origin: 50% 42%; transform: translate(0, 6%) scale(0.88); }
.layer-head.fit-elon.hat-snap { transform-origin: 48% 55%; transform: translate(-2%, -6%) scale(0.9); }
.layer-head.fit-elon.hat-beanie { transform-origin: 50% 44%; transform: translate(-1%, -2%) scale(0.92); }
.layer-head.fit-elon.hat-cap { transform-origin: 50% 36%; transform: translate(-1%, 2%) scale(1.02); }
.layer-eyes.fit-nailong { transform-origin: 55% 48%; transform: translate(-11%, -20%) scale(0.78); }
.layer-eyes.fit-inu { transform-origin: 55% 48%; transform: translate(2%, 2%) scale(0.72); }
.layer-head.fit-nailong.hat-snap { transform-origin: 50% 28%; transform: translate(-1%, -16%) scale(1.0); }
.layer-head.fit-nailong.hat-beanie { transform-origin: 50% 20%; transform: translate(0, -14%) scale(0.98); }
.layer-head.fit-nailong.hat-cap { transform-origin: 50% 12%; transform: translate(0, -22%) scale(1.02); }
.layer-clothes.fit-nailong { transform-origin: 50% 70%; transform: translate(0, -12%) scale(1.02); }

.trait-card > img {
  position: static;
  display: block;
  aspect-ratio: 1;
}

.trait-card .cap {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  font-size: 7px;
  line-height: 1.5;
  color: var(--cream);
}

.trait-card .cap b { color: var(--lime); font-weight: 400; }
.trait-card .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: linear-gradient(#6b3416, #3a1c0c);
  border-top: 2px solid var(--lime);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.5);
}

.start {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  color: #3a1c08;
  background: linear-gradient(180deg, #ffe0a8, var(--lime));
  border: 2px outset #ffe4bc;
  border-radius: 6px;
  cursor: pointer;
}

.start img { width: 22px; height: 22px; image-rendering: pixelated; }

.tasks { display: none; gap: 4px; }

.task {
  height: 30px;
  padding: 0 10px;
  font-size: 8px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(240, 179, 74, 0.35);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.task:hover,
.task.on { background: rgba(240, 179, 74, 0.15); }

.tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font-size: 8px;
  color: var(--lime);
  background: rgba(0, 0, 0, 0.35);
  border: 1px inset rgba(240, 179, 74, 0.4);
  border-radius: 4px;
}

.tray .btn-98 { min-height: 22px; font-size: 8px; padding: 2px 6px; }
.clock { opacity: 0.8; }

.tray-x {
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.tray-x:hover { color: #fff; }

.start-menu {
  position: fixed;
  left: 8px;
  bottom: 52px;
  z-index: 70;
  width: 240px;
}

.start-menu[hidden] { display: none; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--cream);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover { background: rgba(240, 179, 74, 0.18); }

.menu-item img {
  width: 24px;
  height: 24px;
  padding: 2px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffd59a;
  image-rendering: pixelated;
}

.spark,
.pop {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  image-rendering: pixelated;
}

.spark { width: 32px; height: 32px; }
.pop {
  width: 48px;
  height: 48px;
  z-index: 9998;
  animation: click-pop 0.6s ease-out forwards;
}

@keyframes click-pop {
  0% { transform: scale(0.5); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.feed::-webkit-scrollbar,
.trait-grid::-webkit-scrollbar { width: 10px; }
.feed::-webkit-scrollbar-thumb,
.trait-grid::-webkit-scrollbar-thumb {
  background: #e07a28;
  border: 2px solid #3a1c08;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .hero { height: 520px; }
  .hero h1 { font-size: 40px; }
  .hero h1.short { font-size: 56px; }
  .cam { height: 300px; }
  .trait-grid,
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .board { grid-template-columns: repeat(12, 1fr); }
  .span-8 { grid-column: span 8; grid-row: span 2; }
  .span-4 { grid-column: span 4; }
  .span-7 { grid-column: span 7; }
  .span-5 { grid-column: span 5; }
  .span-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
  .tasks { display: flex; }
  .trait-grid,
  .gallery-grid { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 720px) {
  .ticker-track span { font-size: 16px; }
  .ca-label { display: none; }
}