/* 2026 marketplace presentation layer. Transaction behaviour remains in isle-marketplace.html. */
html[data-game="isle"] body.isle-marketplace-page {
  --market-ink: #02090e;
  --market-panel: rgba(7, 20, 28, .92);
  --market-line: rgba(105, 181, 199, .2);
  --market-cyan: #43d6ff;
  --market-green: #5cf1bd;
  --market-gold: #d8ef98;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 9%, rgba(67, 214, 255, .08), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(92, 241, 189, .06), transparent 25%),
    #02090e;
}

html[data-game="isle"] body.isle-marketplace-page .main {
  width: min(100%, 1440px);
  max-width: none;
  padding: 30px clamp(18px, 3vw, 42px) 100px;
}

/* Cinematic exchange hero */
html[data-game="isle"] body.isle-marketplace-page .market-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  grid-template-rows: 1fr auto;
  gap: 28px 18px;
  align-items: center;
  margin: 0 0 26px;
  padding: clamp(34px, 5vw, 72px) clamp(28px, 5vw, 72px) 30px;
  border: 1px solid rgba(91, 194, 218, .24);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(1, 9, 14, .98) 2%, rgba(1, 9, 14, .91) 38%, rgba(1, 9, 14, .37) 72%, rgba(1, 9, 14, .68)),
    linear-gradient(0deg, rgba(1, 8, 12, .86), transparent 60%),
    url("Ruins_isle.webp") 50% 43% / cover;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(67, 214, 255, .12), transparent 1px) 0 0 / 90px 100%,
    linear-gradient(rgba(67, 214, 255, .07), transparent 1px) 0 0 / 100% 90px;
  opacity: .17;
  mask-image: linear-gradient(90deg, black, transparent 75%);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero::after {
  content: "SURVIVOR EXCHANGE  /  EU RUINS";
  position: absolute;
  right: 22px;
  top: 24px;
  color: rgba(185, 226, 237, .42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 660px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--market-green);
  font-size: 11px;
  letter-spacing: .16em;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--market-green);
  box-shadow: 0 0 18px rgba(92, 241, 189, .9);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .title {
  margin: 18px 0 18px;
  color: #f7fbfc;
  font-size: clamp(56px, 6.6vw, 98px);
  line-height: .82;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .62);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .title em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(229, 247, 249, .8);
  text-shadow: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .subtitle {
  max-width: 590px;
  color: #c1d2d8;
  font-size: 15px;
  line-height: 1.7;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-actions .button {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 10px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-primary span {
  display: inline-block;
  margin-left: 18px;
  transition: transform .2s ease;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-primary:hover span {
  transform: translateX(4px);
}

html[data-game="isle"] body.isle-marketplace-page .market-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  color: #92aeb8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}

html[data-game="isle"] body.isle-marketplace-page .market-trust i {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  margin-right: 5px;
  border: 1px solid rgba(92, 241, 189, .3);
  border-radius: 50%;
  color: var(--market-green);
  font-size: 9px;
  font-style: normal;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 400px;
  pointer-events: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
  position: absolute;
  inset: -14% -19% -5% -22%;
  display: block;
  opacity: 0;
  transform: translateX(16px) scale(.985);
  filter: drop-shadow(0 32px 30px rgba(0, 0, 0, .5));
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .15, 1);
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer.is-ready {
  opacity: 1;
  transform: translateX(0) scale(1);
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-stage,
html[data-game="isle"] body.isle-marketplace-page .market-rex-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-status {
  position: absolute;
  right: 20%;
  top: 18%;
  color: rgba(192, 216, 222, .55);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer.is-ready .market-rex-status {
  display: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-specimen-line {
  position: absolute;
  right: 96px;
  bottom: 62px;
  width: 94px;
  height: 1px;
  background: rgba(92, 241, 189, .45);
  transform: rotate(-38deg);
  transform-origin: right;
}

html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 0;
  width: 208px;
  padding: 12px 14px;
  border: 1px solid rgba(92, 241, 189, .26);
  border-left: 3px solid var(--market-green);
  background: rgba(3, 13, 18, .78);
  backdrop-filter: blur(12px);
}

html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque span,
html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque small {
  display: block;
  color: #7e9ba5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque strong {
  display: block;
  margin: 3px 0;
  font-family: var(--font-h);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .rule {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(119, 187, 204, .2);
  border-radius: 12px;
  background: rgba(2, 12, 17, .72);
  backdrop-filter: blur(10px);
}

html[data-game="isle"] body.isle-marketplace-page .rule-index {
  color: rgba(92, 241, 189, .58);
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 700;
}

html[data-game="isle"] body.isle-marketplace-page .rule-label {
  color: #7897a2;
  font-size: 8px;
  letter-spacing: .13em;
}

html[data-game="isle"] body.isle-marketplace-page .rule-value {
  color: #f4f9fa;
  font-size: 18px;
}

/* Trading desk */
html[data-game="isle"] body.isle-marketplace-page .market-desk {
  position: sticky;
  z-index: 40;
  top: 74px;
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  align-items: stretch;
  margin: 0 0 16px;
  border: 1px solid var(--market-line);
  border-radius: 16px;
  background: rgba(3, 13, 19, .92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

html[data-game="isle"] body.isle-marketplace-page .market-desk-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 18px;
  border-right: 1px solid var(--market-line);
}

html[data-game="isle"] body.isle-marketplace-page .market-desk-heading span {
  color: var(--market-green);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .market-desk-heading strong {
  margin-top: 3px;
  font-family: var(--font-h);
  font-size: 18px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

html[data-game="isle"] body.isle-marketplace-page .tab {
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px 10px 17px;
  border: 0;
  border-right: 1px solid rgba(105, 181, 199, .12);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

html[data-game="isle"] body.isle-marketplace-page .tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}

html[data-game="isle"] body.isle-marketplace-page .tab span {
  color: #b8cbd1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}

html[data-game="isle"] body.isle-marketplace-page .tab small {
  color: #5f7b85;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

html[data-game="isle"] body.isle-marketplace-page .tab:hover,
html[data-game="isle"] body.isle-marketplace-page .tab.active {
  border-color: rgba(105, 181, 199, .12);
  background: linear-gradient(180deg, rgba(67, 214, 255, .09), rgba(67, 214, 255, .025));
}

html[data-game="isle"] body.isle-marketplace-page .tab.active::before {
  background: var(--market-cyan);
  box-shadow: 0 0 14px rgba(67, 214, 255, .65);
}

html[data-game="isle"] body.isle-marketplace-page .tab.active span {
  color: #fff;
}

html[data-game="isle"] body.isle-marketplace-page .tab.active small {
  color: #8db3bf;
}

/* Marketplace workspace */
html[data-game="isle"] body.isle-marketplace-page .panel {
  border-color: var(--market-line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(67, 214, 255, .025), transparent 34%),
    rgba(5, 17, 24, .94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}

html[data-game="isle"] body.isle-marketplace-page .panel-head {
  min-height: 106px;
  padding: 24px 26px;
  border-color: rgba(105, 181, 199, .16);
  background: rgba(2, 10, 15, .32);
}

html[data-game="isle"] body.isle-marketplace-page .panel-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--market-green);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .panel-title {
  color: #f4f8f9;
  font-size: 28px;
}

html[data-game="isle"] body.isle-marketplace-page .panel-note {
  color: #7895a0;
  line-height: 1.5;
}

html[data-game="isle"] body.isle-marketplace-page .listing-count {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

html[data-game="isle"] body.isle-marketplace-page .listing-count strong {
  color: var(--market-green);
  font-family: var(--font-h);
  font-size: 38px;
  line-height: .9;
}

html[data-game="isle"] body.isle-marketplace-page .listing-count span {
  margin-top: 5px;
  color: #6f8b94;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .panel-body {
  padding: 26px;
}

html[data-game="isle"] body.isle-marketplace-page .filters {
  position: relative;
  gap: 8px;
  margin-bottom: 22px;
  padding: 10px;
  border: 1px solid rgba(105, 181, 199, .15);
  border-radius: 14px;
  background: rgba(2, 10, 15, .48);
}

html[data-game="isle"] body.isle-marketplace-page input,
html[data-game="isle"] body.isle-marketplace-page select {
  min-height: 44px;
  border-color: rgba(104, 177, 195, .24);
  border-radius: 9px;
  background: rgba(6, 22, 30, .92);
}

html[data-game="isle"] body.isle-marketplace-page .button {
  border-radius: 9px;
  background: linear-gradient(135deg, #52ddff, #2fbaea);
  box-shadow: 0 9px 26px rgba(24, 163, 207, .16);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

html[data-game="isle"] body.isle-marketplace-page .button:not(.secondary):not(.danger) {
  border-color: rgba(104, 230, 255, .48) !important;
  color: #001117 !important;
  background: linear-gradient(135deg, #64e3ff, #2eb9e7) !important;
  box-shadow: 0 10px 28px rgba(34, 180, 222, .2) !important;
}

html[data-game="isle"] body.isle-marketplace-page .button.secondary {
  border-color: rgba(101, 180, 200, .28);
  background: rgba(11, 35, 46, .86);
  box-shadow: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0 !important;
}

html[data-game="isle"] body.isle-marketplace-page .dino-card {
  position: relative;
  border-color: rgba(103, 178, 197, .17);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(9, 29, 39, .97), rgba(3, 13, 19, .98));
  box-shadow: 0 16px 46px rgba(0, 0, 0, .2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html[data-game="isle"] body.isle-marketplace-page .dino-card:hover {
  transform: translateY(-5px);
  border-color: rgba(67, 214, 255, .42);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .34);
}

html[data-game="isle"] body.isle-marketplace-page .dino-art {
  position: relative;
  overflow: hidden;
  height: 158px;
  border-bottom: 1px solid rgba(103, 178, 197, .14);
  background:
    radial-gradient(circle at 68% 55%, rgba(92, 241, 189, .14), transparent 38%),
    linear-gradient(135deg, rgba(67, 214, 255, .08), rgba(2, 10, 15, .4)),
    url("Ruins_isle.webp") center 50% / cover;
}

html[data-game="isle"] body.isle-marketplace-page .dino-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(3, 13, 19, .8));
}

html[data-game="isle"] body.isle-marketplace-page .dino-art img {
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: -16%;
  width: 84%;
  height: 112%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 15px 14px rgba(0, 0, 0, .42));
  transition: transform .35s ease;
}

html[data-game="isle"] body.isle-marketplace-page .dino-card:hover .dino-art img {
  transform: scale(1.035) translateX(-2%);
}

html[data-game="isle"] body.isle-marketplace-page .lot-label {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  padding: 5px 8px;
  border: 1px solid rgba(92, 241, 189, .3);
  border-radius: 999px;
  color: var(--market-green);
  background: rgba(2, 13, 17, .72);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

html[data-game="isle"] body.isle-marketplace-page .dino-art-fallback {
  position: absolute;
  right: 18px;
  bottom: -20px;
  color: rgba(127, 191, 205, .1);
  font: 900 120px/.8 var(--font-h);
}

html[data-game="isle"] body.isle-marketplace-page .dino-top {
  padding: 17px 17px 13px;
  border-color: rgba(103, 178, 197, .13);
  background: transparent;
}

html[data-game="isle"] body.isle-marketplace-page .dino-name {
  color: #fff;
  font-size: 25px;
}

html[data-game="isle"] body.isle-marketplace-page .stats {
  gap: 0;
  padding: 14px 17px;
}

html[data-game="isle"] body.isle-marketplace-page .stats > div {
  padding-left: 11px;
  border-left: 1px solid rgba(103, 178, 197, .15);
}

html[data-game="isle"] body.isle-marketplace-page .stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

html[data-game="isle"] body.isle-marketplace-page .stat-value {
  color: #e8f2f4;
  font-size: 18px;
}

html[data-game="isle"] body.isle-marketplace-page .card-foot {
  padding: 15px 17px 17px;
  border-color: rgba(103, 178, 197, .14);
  background: rgba(1, 8, 12, .28);
}

html[data-game="isle"] body.isle-marketplace-page .price {
  color: var(--market-gold);
  font-size: 27px;
}

html[data-game="isle"] body.isle-marketplace-page .form-card,
html[data-game="isle"] body.isle-marketplace-page .pick,
html[data-game="isle"] body.isle-marketplace-page .history-row,
html[data-game="isle"] body.isle-marketplace-page .wanted-row {
  border-color: rgba(103, 178, 197, .18);
  background: rgba(4, 17, 24, .84);
}

html[data-game="isle"] body.isle-marketplace-page .empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  border-color: rgba(103, 178, 197, .24);
  background: radial-gradient(circle, rgba(67, 214, 255, .035), transparent 60%);
}

/* Footer */
html[data-game="isle"] body.isle-marketplace-page .market-footer {
  border-top-color: rgba(104, 180, 199, .18);
  background:
    linear-gradient(90deg, rgba(2, 10, 15, .97), rgba(2, 10, 15, .84)),
    url("Ruins_isle.webp") center 60% / cover;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer .footer-inner {
  max-width: 1356px;
  align-items: center;
  padding-block: 18px;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer .footer-inner > div {
  display: flex;
  flex-direction: column;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer strong {
  color: #fff;
  font: 800 22px/1 var(--font-h);
  letter-spacing: .12em;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer strong em {
  color: var(--market-cyan);
  font-style: normal;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer .footer-inner > div span {
  margin-top: 5px;
  color: #708c96;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer p {
  max-width: 430px;
  margin: 0;
  color: #87a2ac;
  line-height: 1.5;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer a {
  color: #a9c0c8;
  font-weight: 800;
  text-decoration: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-footer a:hover {
  color: var(--market-cyan);
}

@media (max-width: 1160px) {
  html[data-game="isle"] body.isle-marketplace-page .market-hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
  }

  html[data-game="isle"] body.isle-marketplace-page .market-desk {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  html[data-game="isle"] body.isle-marketplace-page .tabs {
    grid-template-columns: repeat(8, 112px);
  }
}

@media (max-width: 980px) {
  html[data-game="isle"] body.isle-marketplace-page .market-hero {
    min-height: 720px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 250px auto;
    padding: 48px 34px 24px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-copy {
    max-width: 670px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-visual {
    min-height: 250px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
    inset: -50% -16% -38% -4%;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque {
    right: 0;
    bottom: 2px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
    grid-row: 3;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-desk {
    top: 68px;
    grid-template-columns: 1fr;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-desk-heading {
    display: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  html[data-game="isle"] body.isle-marketplace-page .main {
    padding: 14px 11px 68px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero {
    min-height: 660px;
    grid-template-rows: auto 180px auto;
    gap: 12px;
    padding: 34px 20px 18px;
    border-radius: 19px;
    background-position: 44% center;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero::after,
  html[data-game="isle"] body.isle-marketplace-page .market-specimen-line,
  html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque {
    display: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .title {
    margin-block: 14px;
    font-size: clamp(46px, 16vw, 66px);
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .subtitle {
    font-size: 13px;
    line-height: 1.55;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-actions .button {
    flex: 1 1 150px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-trust {
    display: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
    inset: -65% -45% -55% -20%;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .rule {
    display: block;
    padding: 10px 8px;
  }

  html[data-game="isle"] body.isle-marketplace-page .rule-index {
    display: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .rule-label {
    font-size: 6px;
  }

  html[data-game="isle"] body.isle-marketplace-page .rule-value {
    font-size: 13px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-desk {
    top: 62px;
    border-radius: 12px;
  }

  html[data-game="isle"] body.isle-marketplace-page .tabs {
    grid-template-columns: repeat(8, 100px);
  }

  html[data-game="isle"] body.isle-marketplace-page .tab {
    min-height: 58px;
    padding-left: 13px;
  }

  html[data-game="isle"] body.isle-marketplace-page .panel-head {
    min-height: 92px;
    padding: 18px;
  }

  html[data-game="isle"] body.isle-marketplace-page .listing-count {
    display: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .panel-body {
    padding: 13px;
  }

  html[data-game="isle"] body.isle-marketplace-page .filters {
    padding: 7px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-grid {
    grid-template-columns: 1fr;
  }

  html[data-game="isle"] body.isle-marketplace-page .dino-art {
    height: 180px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-footer .footer-inner {
    align-items: flex-start;
  }
}

/* Account-theme rules deliberately use !important globally; keep this page's
   active desk state quieter than a primary purchase button. */
html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) body.isle-marketplace-page .tab.active {
  color: var(--txt, #fff) !important;
  border-color: color-mix(in srgb, var(--isle-accent) 46%, transparent) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--isle-accent) 17%, var(--card)),
    color-mix(in srgb, var(--isle-accent) 10%, var(--card))) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--isle-accent) 10%, transparent) !important;
}

html[data-game="isle"][data-isle-theme]:not([data-isle-theme="isle"]) body.isle-marketplace-page .tab:hover:not(.active) {
  color: var(--txt, #fff) !important;
  background: color-mix(in srgb, var(--isle-accent) 7%, var(--card)) !important;
  box-shadow: none !important;
}

@media (min-width: 641px) and (max-width: 980px) {
  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
    inset: -44% -10% -40% -30%;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer.is-ready {
    transform: translateX(22%) scale(.98);
  }
}

/* One shared 3D scene for the complete Evrima roster. */
html[data-game="isle"] body.isle-marketplace-page .market-lineup-viewer {
  opacity: 1;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .38));
}

html[data-game="isle"] body.isle-marketplace-page .market-lineup-viewer.is-ready {
  opacity: 1;
  transform: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-lineup-status {
  right: 5%;
  top: auto;
  bottom: 11%;
}

@media (min-width: 981px) {
  html[data-game="isle"] body.isle-marketplace-page .market-hero-visual {
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    min-height: 430px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-lineup-viewer {
    inset: 0 -2% -2% 24%;
    transform: none;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-copy,
  html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
    z-index: 3;
  }
}

@media (max-width: 980px) {
  html[data-game="isle"] body.isle-marketplace-page .market-lineup-viewer,
  html[data-game="isle"] body.isle-marketplace-page .market-lineup-viewer.is-ready {
    inset: -8% -8% -16%;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-game="isle"] body.isle-marketplace-page *,
  html[data-game="isle"] body.isle-marketplace-page *::before,
  html[data-game="isle"] body.isle-marketplace-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Composition correction: compact on wide screens and inherit the active Isle theme. */
html[data-game="isle"] body.isle-marketplace-page {
  --market-accent: var(--red, #43d6ff);
  --market-cyan: var(--market-accent);
  --market-green: var(--market-accent);
  --market-line: color-mix(in srgb, var(--market-accent) 24%, transparent);
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--market-accent) 9%, transparent), transparent 34%),
    #05090d !important;
}

html[data-game="isle"] body.isle-marketplace-page .main {
  width: calc(100% - 40px) !important;
  max-width: 1360px !important;
  padding: 26px 0 86px !important;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero {
  min-height: 500px;
  grid-template-columns: minmax(440px, .86fr) minmax(0, 1.14fr);
  grid-template-rows: 1fr auto;
  gap: 12px 24px;
  padding: 46px 48px 34px;
  background:
    radial-gradient(circle at 72% 48%, color-mix(in srgb, var(--market-accent) 11%, transparent), transparent 31%),
    linear-gradient(90deg, rgba(2, 10, 14, .98), rgba(2, 10, 14, .84) 43%, rgba(2, 10, 14, .36) 78%, rgba(2, 10, 14, .58)),
    url("Ruins_isle.webp") 54% 48% / cover;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--market-accent) 16%, transparent), transparent 1px) 0 0 / 90px 100%,
    linear-gradient(color-mix(in srgb, var(--market-accent) 10%, transparent), transparent 1px) 0 0 / 100% 90px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 520px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .title {
  margin: 14px 0 15px;
  font-size: clamp(58px, 5.1vw, 78px);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .eyebrow,
html[data-game="isle"] body.isle-marketplace-page .panel-kicker,
html[data-game="isle"] body.isle-marketplace-page .listing-count strong,
html[data-game="isle"] body.isle-marketplace-page .rule-index {
  color: var(--market-accent) !important;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .eyebrow span {
  background: var(--market-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--market-accent) 80%, transparent);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-primary,
html[data-game="isle"] body.isle-marketplace-page .button:not(.secondary):not(.danger) {
  border-color: color-mix(in srgb, var(--market-accent) 62%, white 12%) !important;
  color: #fff !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--market-accent) 86%, white 8%), var(--market-accent)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--market-accent) 24%, transparent) !important;
}

html[data-game="isle"] body.isle-marketplace-page .market-trust i {
  border-color: color-mix(in srgb, var(--market-accent) 35%, transparent);
  color: var(--market-accent);
}

html[data-game="isle"] body.isle-marketplace-page .market-hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 420px;
  align-self: stretch;
}

/* site-shell.css caps a page hero's right-hand card at 560px; the 3D lineup
   is not a card and needs the whole column, or wide screens squeeze it. */
html[data-game="isle"] body.isle-marketplace-page .market-hero.market-hero > .market-hero-visual.market-hero-visual {
  min-width: 0;
  max-width: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
  inset: -6% -22% -12% -18%;
}

html[data-game="isle"] body.isle-marketplace-page .market-specimen-line,
html[data-game="isle"] body.isle-marketplace-page .market-specimen-plaque {
  display: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  max-width: 540px !important;
  gap: 7px;
}

html[data-game="isle"] body.isle-marketplace-page .market-hero .rule {
  gap: 9px;
  min-height: 58px;
  padding: 10px 11px;
  border-color: color-mix(in srgb, var(--market-accent) 22%, transparent);
  background: rgba(3, 13, 18, .78);
}

html[data-game="isle"] body.isle-marketplace-page .rule-index {
  font-size: 16px;
}

html[data-game="isle"] body.isle-marketplace-page .rule-label {
  font-size: 7px;
  line-height: 1.25;
}

html[data-game="isle"] body.isle-marketplace-page .rule-value {
  font-size: 13px;
  white-space: nowrap;
}

html[data-game="isle"] body.isle-marketplace-page .market-desk {
  top: 76px;
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-game="isle"] body.isle-marketplace-page .market-desk-heading {
  display: none;
}

html[data-game="isle"] body.isle-marketplace-page .tabs {
  display: flex;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--market-line);
  border-radius: 14px;
  background: rgba(3, 13, 19, .94);
  box-shadow: 0 15px 46px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}

html[data-game="isle"] body.isle-marketplace-page .tab {
  flex: 0 0 auto;
  min-width: 116px;
  min-height: 52px;
  padding: 9px 13px;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
}

html[data-game="isle"] body.isle-marketplace-page .tab::before {
  display: none;
}

html[data-game="isle"] body.isle-marketplace-page .tab:hover {
  border-color: color-mix(in srgb, var(--market-accent) 24%, transparent) !important;
  background: color-mix(in srgb, var(--market-accent) 7%, transparent) !important;
}

html[data-game="isle"] body.isle-marketplace-page .tab.active {
  border-color: color-mix(in srgb, var(--market-accent) 42%, transparent) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--market-accent) 17%, rgba(5, 18, 25, .96)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--market-accent) 12%, transparent) !important;
}

html[data-game="isle"] body.isle-marketplace-page .panel {
  border-color: var(--market-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--market-accent) 3%, transparent), transparent 34%),
    rgba(5, 15, 21, .96);
}

html[data-game="isle"] body.isle-marketplace-page .pick {
  min-height: 104px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: center;
  overflow: hidden;
  padding: 9px 12px 9px 9px;
  border-color: color-mix(in srgb, var(--market-accent) 18%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--market-accent) 6%, transparent), transparent 56%),
    rgba(3, 14, 20, .92);
}

html[data-game="isle"] body.isle-marketplace-page .pick:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--market-accent) 38%, transparent);
}

html[data-game="isle"] body.isle-marketplace-page .pick:has(input:checked) {
  border-color: var(--market-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--market-accent) 15%, transparent);
}

html[data-game="isle"] body.isle-marketplace-page .pick-art {
  position: relative;
  overflow: hidden;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--market-accent) 14%, transparent), transparent 65%),
    rgba(0, 6, 9, .68);
}

html[data-game="isle"] body.isle-marketplace-page .pick-art img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .4));
}

html[data-game="isle"] body.isle-marketplace-page .pick-art > span {
  color: color-mix(in srgb, var(--market-accent) 30%, transparent);
  font: 800 30px var(--font-h);
}

html[data-game="isle"] body.isle-marketplace-page .pick-copy,
html[data-game="isle"] body.isle-marketplace-page .pick-species {
  display: block;
}

html[data-game="isle"] body.isle-marketplace-page .pick-title {
  display: block;
  color: #f6fafb;
  font-family: var(--font-h);
  font-size: 20px;
  line-height: 1.05;
}

html[data-game="isle"] body.isle-marketplace-page .pick-species {
  margin-top: 4px;
  color: color-mix(in srgb, var(--market-accent) 64%, #b6cbd2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

html[data-game="isle"] body.isle-marketplace-page .pick-meta {
  margin-top: 5px;
}

html[data-game="isle"] body.isle-marketplace-page .pick-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--market-accent) 28%, transparent);
  border-radius: 50%;
  color: transparent;
  font-size: 10px;
}

html[data-game="isle"] body.isle-marketplace-page .pick:has(input:checked) .pick-check {
  color: #fff;
  border-color: var(--market-accent);
  background: var(--market-accent);
}

@media (min-width: 1180px) {
  html[data-game="isle"] body.isle-marketplace-page .sell-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

@media (max-width: 980px) {
  html[data-game="isle"] body.isle-marketplace-page .main {
    width: calc(100% - 26px) !important;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero {
    min-height: 650px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 230px auto;
    padding: 40px 30px 24px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero-visual {
    grid-column: 1;
    grid-row: 2;
    min-height: 230px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
    inset: -44% -8% -40% -8%;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
    grid-column: 1;
    grid-row: 3;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-desk {
    top: 68px;
  }
}

@media (max-width: 640px) {
  html[data-game="isle"] body.isle-marketplace-page .main {
    width: calc(100% - 20px) !important;
    padding-top: 12px !important;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero {
    min-height: 610px;
    grid-template-rows: auto 165px auto;
    padding: 30px 18px 16px;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-rex-viewer {
    inset: -58% -30% -52% -28%;
  }

  html[data-game="isle"] body.isle-marketplace-page .market-hero .rules {
    max-width: none !important;
  }

  html[data-game="isle"] body.isle-marketplace-page .tabs {
    padding: 5px;
  }

  html[data-game="isle"] body.isle-marketplace-page .tab {
    min-width: 104px;
  }

  html[data-game="isle"] body.isle-marketplace-page .pick {
    grid-template-columns: 68px minmax(0, 1fr) 20px;
    min-height: 88px;
  }

  html[data-game="isle"] body.isle-marketplace-page .pick-art {
    width: 68px;
    height: 68px;
  }
}

/* The 3D roster lineup stays exactly inside its banner area at every width.
   Older rules bled the viewer past the banner (negative insets), which cut
   the tallest animals off at the right edge on wide screens. */
html[data-game="isle"] body.isle-marketplace-page #marketLineupViewer {
  inset: 0;
  transform: none;
}

/* On desktop the lineup canvas spans the whole banner behind the copy; the
   script keeps the animals in the space to the right of the text. */
@media (min-width: 981px) {
  html[data-game="isle"] body.isle-marketplace-page .market-hero.market-hero > .market-hero-visual.market-hero-visual {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
  }
  html[data-game="isle"] body.isle-marketplace-page .market-hero.market-hero > .market-hero-copy,
  html[data-game="isle"] body.isle-marketplace-page .market-hero.market-hero > .rules {
    position: relative;
    z-index: 3;
  }
}

/* Phones: the lineup row is 165px, so the viewer must not keep the 230px
   tablet minimum or it spills over the rule cards below. */
@media (max-width: 640px) {
  html[data-game="isle"] body.isle-marketplace-page .market-hero.market-hero > .market-hero-visual.market-hero-visual {
    min-height: 165px;
  }
}

/* Short names under each animal in the 3D lineup (placed by the script). */
html[data-game="isle"] body.isle-marketplace-page .market-lineup-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
html[data-game="isle"] body.isle-marketplace-page .market-lineup-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(2, 10, 14, .62);
  color: rgba(214, 236, 242, .88);
  font: 700 11px/1 var(--font-h, "Rajdhani", sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 640px) {
  html[data-game="isle"] body.isle-marketplace-page .market-lineup-label {
    font-size: 9px;
  }
}