:root {
  --bg-black: #100c0a;
  --bg-deep: #221B18;
  --bg-panel: #221b18e0;
  --bg-panel-2: #2d241fdc;
  --line: #6f4b36;
  --line-soft: #46342b;
  --gold: #e5b66e;
  --gold-soft: #ffe1aa;
  --ember: #b85f33;
  --ember-soft: #df8d54;
  --text: #f4e4cc;
  --muted: #c9ad8f;
  --max: 1160px;
  --radius: 16px;
  --shadow: 0 18px 45px #0a07068f;
}

* {
  box-sizing: border-box;
}

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

html {
  cursor: url("/tanitim/varlik/imlec/cursor-default30f4.svg?v=3") 3 2, auto;
}

body {
  color: var(--text);
  font-family: "Exo 2", sans-serif;
  line-height: 1.5;
  background: #0b0506;
  overflow-x: hidden;
  position: relative;
  top: 0 !important;
}

body.cinematic-lock {
  overflow: hidden;
}

a,
button,
.btn,
.chip,
.mini-tab,
.download-item,
.side-panel-close,
.language-switcher button,
.js-panel-trigger {
  cursor: url("/tanitim/varlik/imlec/cursor-pointer30f4.svg?v=3") 3 2, pointer;
}

#google_translate_element {
  position: fixed;
  left: -9999px;
  bottom: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.goog-te-gadget {
  display: none !important;
}

.language-switcher {
  position: relative;
  z-index: 120;
  font-family: "Exo 2", sans-serif;
  flex-shrink: 0;
}

.language-switcher.is-floating {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
}

.language-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background:
    radial-gradient(140px 80px at 50% 0%, #d0a0622c, transparent 70%),
    linear-gradient(180deg, #352820f0, #17110ef4);
  color: #fff1d2;
  box-shadow: 0 16px 34px #09060499, inset 0 0 16px #f2c27d12;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  min-height: 38px;
  padding: 0.48rem 0.68rem;
  text-transform: uppercase;
}

.language-current-flag {
  font-size: 1.05rem;
  line-height: 1;
}

.language-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.55rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  width: min(330px, calc(100vw - 2rem));
  border: 1px solid #8d5c3c;
  border-radius: 16px;
  background:
    radial-gradient(260px 130px at 20% 0%, #d0a06224, transparent 72%),
    linear-gradient(180deg, #30251ff4, #120d0bf8);
  box-shadow: 0 24px 48px #090604b3, inset 0 0 18px #f2c27d0d;
  opacity: 0;
  padding: 0.55rem;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.language-switcher.is-floating .language-switcher-menu {
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 0.55rem);
  transform-origin: bottom left;
}

.language-switcher.is-open .language-switcher-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.language-switcher-menu button {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "flag code"
    "flag name";
  align-items: center;
  gap: 0 0.42rem;
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background: linear-gradient(180deg, #251c17, #17110e);
  color: #f7dfc4;
  padding: 0.52rem;
  text-align: left;
}

.language-switcher-menu button:hover,
.language-switcher-menu button.is-active {
  border-color: #e0a762;
  background:
    radial-gradient(120px 70px at 85% 10%, #e0a76228, transparent 72%),
    linear-gradient(180deg, #38291f, #1b130f);
}

.language-switcher-menu button span {
  grid-area: flag;
  font-size: 1.2rem;
}

.language-switcher-menu button strong {
  grid-area: code;
  color: #ffd9aa;
  font-size: 0.78rem;
  line-height: 1;
}

.language-switcher-menu button em {
  grid-area: name;
  color: #c9ad8f;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.1;
}

input,
textarea,
select {
  cursor: text;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: url("/tanitim/varlik/imlec/cursor-pointer30f4.svg?v=3") 3 2, pointer;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, #080304de 0%, #0c0406f2 48%, #090304fb 100%),
    url("/tanitim/varlik/gorsel/bg-theme.jpg") center top / cover no-repeat;
  z-index: -5;
  filter: saturate(1.05) contrast(1.1);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 600px at 82% 20%, #e04a2d22, transparent 60%),
    radial-gradient(900px 550px at 10% 65%, #ff7a5517, transparent 66%),
    linear-gradient(90deg, #000000bb 0%, #00000033 35%, #00000088 100%);
  z-index: -4;
  pointer-events: none;
}

.container {
  width: min(var(--max), 93vw);
  margin-inline: auto;
}

.grid-overlay {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(#ffffff0c 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0c 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.17;
  z-index: -3;
  mask-image: radial-gradient(circle at center, #000 45%, transparent 95%);
  pointer-events: none;
}

.bg-orb {
  position: fixed;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -2;
  opacity: 0.36;
  pointer-events: none;
}

.orb-a {
  background: #d33b2a;
  left: -140px;
  top: 120px;
}

.orb-b {
  background: #5e1514;
  right: -120px;
  top: 320px;
}

.opening-cinematic {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background:
    radial-gradient(750px 340px at 50% 48%, #ff6f4a22 0%, transparent 72%),
    linear-gradient(180deg, #090405f2 0%, #0c0507f5 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.opening-cinematic.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.opening-cinematic.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.opening-cinematic-inner {
  width: min(650px, 90vw);
  text-align: center;
  border: 1px solid #6f4b36;
  border-radius: 16px;
  background: linear-gradient(180deg, #30251fdd 0%, #221b18dd 100%);
  box-shadow: inset 0 0 26px #ffffff08, 0 22px 48px #0000009c;
  padding: 1rem 1rem 0.85rem;
  animation: cinematicPulse 2s ease-in-out infinite;
}

.opening-cinematic-inner img {
  width: min(100%, 380px);
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 8px 16px #000000bd);
}

.opening-cinematic-inner p {
  margin: 0.65rem 0 0;
  color: #e8bd96;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.78rem;
}

@keyframes cinematicPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, #120708e8, #120708cc);
  border-bottom: 1px solid #6f4b36;
  box-shadow: 0 6px 22px #00000088;
  backdrop-filter: blur(6px);
}

body.home-page .site-header {
  top: 0;
}

.nav-wrap {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}

.brand-logo {
  width: auto;
  height: clamp(76px, 7.5vw, 96px);
  max-width: min(48vw, 360px);
  display: block;
  filter: drop-shadow(0 6px 12px #00000099);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.84rem;
  min-width: 0;
}

.main-nav a,
.site-footer a {
  color: #d4b08e;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.83rem;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.main-nav a:hover,
.site-footer a:hover {
  color: #ffe1b2;
}

.main-nav a {
  position: relative;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffcf95 0%, #df8b44 100%);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  box-shadow: 0 0 12px #df8b4491;
}

.main-nav a:hover {
  text-shadow: 0 0 10px #f2ad6d66;
}

.main-nav a:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.main-nav a.is-active {
  color: #2b120d;
  border: 1px solid #f0b56d;
  background: linear-gradient(180deg, #ffd39e, #dd8a43);
  padding: 0.3rem 0.52rem;
  border-radius: 8px;
}

.main-nav a.is-active::after {
  transform: scaleX(1);
  opacity: 1;
  animation: navUnderlinePulse 2.2s ease-in-out infinite;
}

@keyframes navUnderlinePulse {
  0%,
  100% {
    box-shadow: 0 0 8px #df8b4460;
  }
  50% {
    box-shadow: 0 0 15px #f2b56fbb;
  }
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.nav-cta .btn {
  white-space: nowrap;
  padding: 0.52rem 0.76rem;
  font-size: 0.76rem;
}

.nav-cta .btn-solid {
  padding-inline: 0.9rem;
}

.mobile-nav-link {
  display: none;
}

.btn-mini {
  padding: 0.5rem 0.66rem;
  font-size: 0.76rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 11px;
  border: 1px solid transparent;
  padding: 0.62rem 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  font-size: 0.84rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-solid {
  color: #250d08;
  border-color: #f0ba73;
  background: linear-gradient(180deg, #ffd59c 0%, #e29049 50%, #bd5d2b 100%);
  box-shadow: 0 10px 22px #7a2b158f;
}

.btn-solid:hover {
  box-shadow: 0 14px 28px #8f3218b3;
}

.btn-ghost {
  color: #f5d6b2;
  border-color: #8d5c3c;
  background: linear-gradient(180deg, #2e231e99, #1b1411bc);
}

.btn-ghost:hover {
  border-color: #b98552;
  box-shadow: 0 0 0 1px #b9855233, 0 0 16px #b985524d;
}

.hero {
  padding: 3.2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

.cinematic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 440px at 70% 8%, #ff6d4e22 0%, transparent 65%),
    radial-gradient(940px 360px at 8% 60%, #d7412f1f 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero-parallax-layer,
.hero-fog,
.hero-embers {
  position: absolute;
  pointer-events: none;
}

.hero-parallax-layer {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, #080304f2 0%, #0c050794 45%, #080304e8 100%),
    url("/tanitim/varlik/gorsel/hero-warrior-v2.jpg") right center / cover no-repeat;
  opacity: 0.2;
  filter: blur(1px) saturate(0.95);
}

.hero-fog {
  width: 70%;
  aspect-ratio: 4 / 1;
  filter: blur(36px);
  opacity: 0.24;
  z-index: 1;
  animation: fogFloat 18s ease-in-out infinite;
}

.hero-fog-a {
  left: -8%;
  bottom: 6%;
  background: radial-gradient(circle, #ff8c7052 0%, #ff8c7000 72%);
}

.hero-fog-b {
  right: -12%;
  top: 18%;
  background: radial-gradient(circle, #f46f5450 0%, #f46f5400 72%);
  animation-delay: -8s;
}

.hero-embers {
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(2px 2px at 8% 26%, #ffc88eaa, transparent 70%),
    radial-gradient(2px 2px at 22% 70%, #ffa16dbb, transparent 72%),
    radial-gradient(2px 2px at 58% 40%, #ffd9adaa, transparent 75%),
    radial-gradient(2px 2px at 80% 72%, #ff895db6, transparent 72%),
    radial-gradient(2px 2px at 92% 28%, #ffd4a4a0, transparent 70%);
  animation: embersDrift 7s linear infinite;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #7f3428 50%, transparent 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}

[data-parallax-item] {
  --parallax-x: 0px;
  --parallax-y: 0px;
  will-change: transform;
}

.hero-copy {
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #221b18bf 0%, #221b18ca 100%);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0;
  color: #ffb680;
  letter-spacing: 2.2px;
  font-size: 0.77rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cinzel", serif;
  line-height: 1.2;
}

h1 {
  margin-top: 0.54rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 13.5ch;
  text-transform: uppercase;
  text-shadow: 0 4px 16px #000000cc;
}

h1 span {
  color: var(--gold-soft);
}

.hero-lead {
  margin: 1rem 0 1.2rem;
  color: #e8c9a4;
  max-width: 57ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-points {
  margin: 1.2rem 0 0;
  padding-left: 1.1rem;
  color: #ddb78f;
}

.hero-points li + li {
  margin-top: 0.35rem;
}

.hero-seals {
  margin-top: 1.16rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.hero-visual {
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  border: 1px solid #6f4b36;
  background: #221B18;
  box-shadow: var(--shadow);
  position: relative;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0d0507d8 0%, transparent 48%, #0d05078c 100%);
  pointer-events: none;
}

.hero-visual img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.stats-row {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.live-status-row {
  margin-top: 1rem;
  margin-bottom: -3.6rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  position: relative;
  z-index: 2;
  transform: translateY(-3.6rem);
}

.stat-card {
  padding: 0.95rem;
  border-radius: 12px;
  border: 1px solid #6f4b36;
  background: linear-gradient(180deg, #2d241fcb 0%, #221b18d4 100%);
  box-shadow: inset 0 0 18px #ffffff0a, var(--shadow);
}

.stat-card p {
  margin: 0;
  color: #d1aa83;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat-card strong {
  display: block;
  margin-top: 0.25rem;
  font-family: "Cinzel", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.62rem);
  color: #ffe2b2;
}

.status-card {
  position: relative;
  overflow: hidden;
  padding: 0.95rem;
  border-radius: 12px;
  border: 1px solid #6f4b36;
  background:
    radial-gradient(220px 100px at 90% 0%, #ff8c5a1d, transparent 70%),
    linear-gradient(180deg, #2d241fcb 0%, #221b18d4 100%);
  box-shadow: inset 0 0 18px #ffffff0a, var(--shadow);
}

.status-card p {
  margin: 0;
  color: #d1aa83;
  font-size: 0.81rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.status-value {
  display: block;
  margin-top: 0.26rem;
  font-family: "Cinzel", serif;
  font-size: clamp(1.02rem, 1.9vw, 1.3rem);
  color: #ffe2b2;
}

.status-meta {
  display: block;
  margin-top: 0.24rem;
  color: #ccaa86;
  font-size: 0.78rem;
}

.launch-card {
  min-height: 118px;
  padding: 1.16rem 1.2rem;
  display: grid;
  align-content: center;
}

.hero-seals .launch-card {
  min-height: 58px;
  padding: 0.48rem 0.72rem;
  border-radius: 10px;
}

.hero-seals .launch-card p {
  font-size: 0.64rem;
}

.launch-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, #d0a06252 0 1px, transparent 1px calc(100% - 1px), #d0a06242 calc(100% - 1px)),
    radial-gradient(160px 80px at 90% 18%, #f0bf7924, transparent 72%);
  opacity: 0.8;
}

.launch-card p,
.launch-card .status-value,
.launch-card .status-meta {
  position: relative;
  z-index: 1;
}

.launch-card .status-value {
  font-size: clamp(1.42rem, 3vw, 2.15rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-seals .launch-card .status-value {
  font-size: clamp(0.98rem, 1.5vw, 1.22rem);
}

.launch-card .status-meta {
  margin-top: 0.34rem;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.hero-seals .launch-card .status-meta {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.68rem;
  line-height: 1.2;
}

.hero-seals .launch-card[data-live-kind="online"] .status-value {
  color: #b7e28a;
}

.features,
.spotlight,
.comparison,
.insight,
.event-cycle,
.visuals,
.social-proof,
.final-cta {
  padding: 3.8rem 0;
  position: relative;
}

.features::before,
.spotlight::before,
.comparison::before,
.insight::before,
.event-cycle::before,
.visuals::before,
.social-proof::before,
.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #8a5a3b 50%, transparent 100%);
}

.section-head h2 {
  margin-top: 0.52rem;
  max-width: 23ch;
  font-size: clamp(1.45rem, 3.7vw, 2.15rem);
  text-transform: uppercase;
}

@keyframes fogFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-2%, -5%, 0);
  }
}

@keyframes embersDrift {
  0% {
    transform: translateY(0);
    opacity: 0.42;
  }
  50% {
    opacity: 0.28;
  }
  100% {
    transform: translateY(-14px);
    opacity: 0.42;
  }
}

.engine-lead {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch;
  gap: 1rem;
}

.engine-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #6f4b36;
  border-radius: 18px;
  background:
    radial-gradient(420px 180px at 12% 0%, #d0a06224, transparent 72%),
    radial-gradient(360px 160px at 92% 92%, #5b452b55, transparent 74%),
    linear-gradient(145deg, #2d241fe8 0%, #15100de8 100%);
  box-shadow: inset 0 0 24px #ffffff08, 0 24px 52px #09060494;
  padding: clamp(1.05rem, 2.2vw, 1.55rem);
}

.engine-kicker {
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.engine-copy h3 {
  max-width: 12ch;
  margin: 0.35rem 0 0.85rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.7rem, 3.4vw, 2.65rem);
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 18px #d0a06244;
}

.engine-copy p {
  margin: 0;
  color: #e2bc95;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.62;
}

.engine-copy p + p {
  margin-top: 0.6rem;
}

.engine-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.engine-metric-grid div {
  border: 1px solid #6f4b36;
  border-radius: 13px;
  background:
    radial-gradient(180px 90px at 86% 12%, #d0a06220, transparent 72%),
    linear-gradient(160deg, #30251fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 14px #f2c27d0a;
  padding: 0.7rem;
}

.engine-metric-grid strong {
  display: block;
  color: #ffd9aa;
  font-family: "Cinzel", serif;
  font-size: 0.9rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.engine-metric-grid span {
  display: block;
  margin-top: 0.25rem;
  color: #d9bc98;
  font-size: 0.78rem;
  line-height: 1.28;
}

.engine-video {
  margin: 0;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 420px;
  max-height: 520px;
  border-radius: 18px;
  border: 1px solid #6f4b36;
  background:
    radial-gradient(220px 160px at 50% 18%, #d0a06218, transparent 72%),
    linear-gradient(180deg, #17110e, #080604);
  box-shadow: 0 24px 52px #09060494;
}

.engine-video img,
.engine-video video {
  width: 100%;
  height: 100%;
  min-height: 210px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.engine-video figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem 0.75rem;
  background: linear-gradient(180deg, transparent, #100607eb);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffd6ab;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.video-badge {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #efb36d;
  display: grid;
  place-items: center;
  color: #2c130b;
  background: linear-gradient(180deg, #ffd49b, #df8a43);
  font-size: 0.76rem;
}

.feature-filter {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.chip {
  border-radius: 999px;
  border: 1px solid #8d5c3c;
  background: #2d241fbf;
  color: #ebc7a1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.75rem;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
}

.chip.is-active {
  border-color: #f0b56d;
  color: #1f0d08;
  background: linear-gradient(180deg, #ffd39e, #dd8a43);
}

.feature-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.feature-card {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid #6f4b36;
  background:
    radial-gradient(220px 100px at 100% 0%, #ff7a5520, transparent 70%),
    linear-gradient(180deg, #2d241fcc 0%, #221b18d2 100%);
  box-shadow: inset 0 0 10px #ffffff0a, var(--shadow);
}

.feature-card h3 {
  font-size: 1.02rem;
  color: #ffe1b7;
}

.feature-card p {
  margin: 0.5rem 0 0;
  color: #d8b18c;
  font-size: 0.93rem;
}

.feature-card.is-hidden {
  display: none;
}

.roadmap {
  padding: 3.8rem 0;
  position: relative;
}

.roadmap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #8a5a3b 50%, transparent 100%);
}

.roadmap-layout {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1rem;
  align-items: stretch;
}

.roadmap-visual {
  border: 1px solid #6f4b36;
  border-radius: 16px;
  background:
    radial-gradient(260px 140px at 70% 0%, #ff7a5515, transparent 72%),
    linear-gradient(180deg, #2d241fc9 0%, #221b18cf 100%);
  box-shadow: inset 0 0 18px #ffffff08, var(--shadow);
  padding: 1rem;
}

.roadmap-visual img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #6f4b36;
  display: block;
}

.roadmap-visual img.roadmap-logo-img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: clamp(1.25rem, 4vw, 3rem);
  background:
    radial-gradient(320px 160px at 50% 40%, #d0a06224, transparent 70%),
    linear-gradient(180deg, #120d0b 0%, #080604 100%);
}

.roadmap-visual p {
  margin: 0.85rem auto 0;
  max-width: 34ch;
  text-align: center;
  color: #f0c99e;
  font-size: clamp(0.94rem, 1.65vw, 1.1rem);
  font-family: "Cinzel", serif;
}

.roadmap-list {
  position: relative;
  display: grid;
  gap: 0.72rem;
  padding-left: 0.1rem;
}

.roadmap-list::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6f8f34 0%, #6f8f34 78%, #5e5e5e 78%, #5e5e5e 100%);
}

.roadmap-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 0.7rem;
  position: relative;
}

.roadmap-node {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 18px;
  margin-left: 7px;
  border: 2px solid #5f5f5f;
  background: #707070;
  box-shadow: 0 0 0 6px #17110e;
  position: relative;
  z-index: 1;
}

.roadmap-row.is-done .roadmap-node {
  border-color: #8cae4b;
  background: #6f8f34;
}

.roadmap-row.is-current .roadmap-node {
  border-color: #b8b8b8;
  background: #9c9c9c;
}

.roadmap-row.is-current .roadmap-item {
  border-color: #d9ad6c;
  background:
    radial-gradient(220px 96px at 100% 0%, #d0a06222, transparent 72%),
    linear-gradient(180deg, #352820e3 0%, #221b18e8 100%);
  box-shadow: inset 0 0 16px #f2c27d13, 0 16px 34px #09060473;
}

.roadmap-item {
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background: linear-gradient(180deg, #2d241fcb 0%, #221b18cf 100%);
  box-shadow: inset 0 0 14px #ffffff06;
  overflow: hidden;
}

.roadmap-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.9rem 0.95rem;
  color: #f4d5ad;
  font-size: 1.05rem;
  font-family: "Cinzel", serif;
}

.roadmap-item summary::-webkit-details-marker {
  display: none;
}

.roadmap-item p {
  margin: 0;
  padding: 0 0.95rem 0.95rem;
  color: #d8b18c;
}

.roadmap-chevron {
  color: #f1c084;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.roadmap-item[open] .roadmap-chevron {
  transform: rotate(180deg);
}

.announcements {
  position: relative;
  padding: 3.8rem 0;
}

.announcements-page {
  min-height: calc(100svh - 220px);
  padding-top: 2.7rem;
}

.announcements::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #8a5a3b 50%, transparent 100%);
}

.announcements-board {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 0.78rem;
  align-items: stretch;
}

.section-title-main {
  margin: 0.2rem 0 0;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  color: #f7e7cf;
  text-transform: uppercase;
  text-shadow: 0 4px 18px #090604d1;
}

.announcement-feature,
.patchnote-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(260px 140px at 100% 0%, #d0a06224, transparent 72%),
    linear-gradient(180deg, #30251fd8 0%, #1c1512e8 100%);
  box-shadow: inset 0 0 18px #f5c98908, 0 18px 42px #0906048f;
}

.announcement-feature {
  display: grid;
  align-content: start;
  gap: 0.62rem;
  padding: clamp(0.9rem, 2vw, 1.18rem);
}

.announcement-meta,
.patchnote-card div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.announcement-meta time,
.patchnote-card time {
  color: #caa17d;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.announcement-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  padding: 0.25rem 0.56rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.announcement-badge.is-live {
  border-color: #ffd08d;
  background: linear-gradient(180deg, #ffd79f, #d88642);
  color: #23100b;
  box-shadow: 0 0 18px #d0915540;
}

.announcement-badge.is-patch {
  border-color: #f0bf79;
  color: #2b120d;
  background: linear-gradient(180deg, #ffc992, #e1853f);
}

.announcement-badge.is-notice {
  border-color: #8fc7ff;
  color: #d7eaff;
  background: #1d3555;
}

.announcement-badge.is-event {
  border-color: #7ff5aa;
  color: #d1f6e0;
  background: #1d4737;
}

.announcement-badge.is-hotfix {
  border-color: #ffb06f;
  color: #fff0dc;
  background: #7a2f1e;
  box-shadow: 0 0 16px #ef70474d;
}

.announcement-feature h3,
.patchnote-card h3 {
  margin: 0;
  color: #f7e7cf;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  text-shadow: 0 4px 18px #090604d1;
}

.announcement-feature h3 {
  font-size: clamp(1.55rem, 3.4vw, 2.55rem);
  line-height: 1.02;
}

.announcement-feature h4 {
  margin: 0.2rem 0 0;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  text-transform: uppercase;
}

.announcement-feature p,
.patchnote-card p {
  margin: 0;
  color: #d5b99c;
  line-height: 1.48;
}

.announcement-subblock {
  display: grid;
  gap: 0.38rem;
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background:
    radial-gradient(180px 90px at 100% 0%, #7ff5aa1f, transparent 72%),
    linear-gradient(180deg, #241c18d9 0%, #17110ede 100%);
  padding: 0.62rem;
}

.announcement-subblock.is-launcher-required {
  border-color: #f0bf79;
  background:
    linear-gradient(90deg, #e69a4426, transparent 42%),
    linear-gradient(180deg, #352318f2 0%, #1d1410f2 100%);
  box-shadow: inset 4px 0 0 #e69a44, 0 10px 24px #09060470;
  padding: 0.78rem;
}

.announcement-subblock.is-launcher-required p {
  color: #f2d7b5;
  font-weight: 700;
}

.announcement-subblock.is-launcher-required .announcement-actions {
  margin-top: 0.3rem;
}

.announcement-hotfix {
  border-color: #a96742;
  background:
    radial-gradient(280px 160px at 100% 0%, #ef70472e, transparent 72%),
    linear-gradient(180deg, #35231dda 0%, #1b1310ed 100%);
}

.announcement-subblock.is-performance-alert {
  border-color: #d47a4e;
  background:
    linear-gradient(90deg, #b8472c2e, transparent 48%),
    linear-gradient(180deg, #321d18f2 0%, #1d1310f2 100%);
  box-shadow: inset 4px 0 0 #e36f45, 0 10px 24px #09060470;
  padding: 0.78rem;
}

.announcement-subblock.is-performance-alert p {
  color: #f0d5ba;
}

.announcement-feature ul,
.patchnote-list {
  display: grid;
  gap: 0.34rem;
  margin: 0;
  padding-left: 1.1rem;
  color: #f0d2b3;
}

.announcement-fix-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.95rem;
  font-size: 0.84rem;
  line-height: 1.34;
}

.announcement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.patchnotes-stack {
  display: grid;
  gap: 0.58rem;
}

.patchnote-card {
  display: grid;
  gap: 0.38rem;
  padding: 0.76rem;
}

.patchnote-card-featured {
  gap: 0.62rem;
}

.patchnote-card h3 {
  font-size: 1rem;
}

.quick-fix-card {
  border-color: #ffd08d;
  background:
    radial-gradient(220px 100px at 100% 0%, #ffd79f36, transparent 72%),
    linear-gradient(180deg, #4b2d1d 0%, #201712 100%);
  box-shadow: inset 0 0 18px #ffd79f16, 0 18px 42px #0906048f, 0 0 20px #d0915530;
}

.announcement-history {
  display: grid;
  gap: 0.78rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid #6f4b36;
}

.announcement-history-head {
  display: grid;
  gap: 0.18rem;
}

.announcement-history-head h2 {
  margin: 0;
  color: #f7e7cf;
  font-family: "Cinzel", serif;
  font-size: clamp(1.42rem, 3.2vw, 2.35rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 4px 18px #090604d1;
}

.announcement-history-card {
  background:
    radial-gradient(240px 120px at 100% 0%, #8fc7ff18, transparent 72%),
    linear-gradient(180deg, #2a221fd8 0%, #171210e8 100%);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

#rankings .insight-grid {
  grid-template-columns: 1fr;
}

.rankings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.rankings-page {
  display: grid;
  gap: 1rem;
}

.rankings-intro {
  max-width: 720px;
}

.rankings-intro h1 {
  margin: 0.2rem 0 0.35rem;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #f7e7cf;
  text-shadow: 0 4px 18px #090604d1;
}

.rankings-intro p:last-child {
  max-width: 58ch;
  color: #d3b697;
  font-size: 1rem;
}

.rankings-status {
  width: fit-content;
  max-width: 100%;
  border: 1px solid #6f4b36;
  border-radius: 8px;
  background: linear-gradient(180deg, #30251fc7 0%, #1d1613d1 100%);
  color: #d9bc98;
  padding: 0.58rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: inset 0 0 14px #f5c98907, 0 12px 26px #09060466;
}

.rankings-status.is-error {
  border-color: #9a6345;
  color: #f0bf79;
}

.ranking-panel {
  min-width: 0;
}

.ranking-panel-head,
.ranking-panel .panel-head {
  align-items: flex-start;
}

.ranking-eyebrow {
  margin: 0 0 0.16rem;
  color: #f0bf79;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.ranking-updated {
  flex: 0 0 auto;
  color: #cdb191;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: right;
}

.ranking-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ranking-table {
  min-width: 500px;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
  width: 3.2rem;
  text-align: center;
}

.ranking-table td:nth-child(2) {
  font-weight: 800;
  color: #f6dec1;
}

.ranking-table td {
  white-space: nowrap;
}

.panel {
  border-radius: var(--radius);
  border: 1px solid #6f4b36;
  background: linear-gradient(180deg, #2d241fc7 0%, #221b18cd 100%);
  padding: 1rem;
  box-shadow: inset 0 0 22px #ffffff08, var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.panel-head h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
}

.panel-head a {
  color: #f3bf7c;
  text-decoration: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  font-weight: 800;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.8rem;
}

th,
td {
  text-align: left;
  padding: 0.52rem 0.4rem;
  border-bottom: 1px solid #6f4b36;
}

thead th {
  color: #caa17d;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

tbody td {
  color: #f0d2b3;
  font-size: 0.93rem;
}

tbody tr:nth-child(1) td:first-child {
  color: #ffd98f;
  font-weight: 800;
}

tbody tr:nth-child(2) td:first-child {
  color: #ffc089;
  font-weight: 800;
}

tbody tr:nth-child(3) td:first-child {
  color: #ff9e73;
  font-weight: 800;
}

.mini-tabs {
  display: flex;
  gap: 0.35rem;
}

.mini-tab {
  border: 1px solid #8d5c3c;
  background: #2d241fbf;
  color: #e2bb96;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.34rem 0.52rem;
  cursor: pointer;
}

.mini-tab.is-active {
  color: #1f0d08;
  border-color: #f0b56d;
  background: linear-gradient(180deg, #ffd39e, #dd8a43);
}

.news-list {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.55rem;
}

.news-item {
  border-radius: 11px;
  border: 1px solid #6f4b36;
  background: linear-gradient(180deg, #30251fc4, #221b18d1);
  padding: 0.7rem;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c89f7b;
  font-size: 0.8rem;
}

.news-title {
  margin: 0.28rem 0 0;
  color: #ffe0bb;
  font-weight: 700;
}

.badge {
  border-radius: 999px;
  padding: 0.15rem 0.48rem;
  border: 1px solid;
  font-size: 0.68rem;
  font-weight: 800;
}

.badge.patch {
  color: #2b120d;
  background: linear-gradient(180deg, #ffc992, #e1853f);
  border-color: #ffcb99;
}

.badge.event {
  color: #fae8d2;
  background: #3a2a22;
  border-color: #8d5c3c;
}

.mini-spotlight {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.62rem;
}

.mini-spotlight:focus-visible {
  outline: 2px solid #f3bf82;
  outline-offset: 3px;
  border-radius: 14px;
}

.mini-spotlight-nav {
  width: 42px;
  height: 42px;
  border: 1px solid #8d5c3c;
  border-radius: 12px;
  background: linear-gradient(180deg, #2e231e, #1b1411);
  color: #ffd7b0;
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.mini-spotlight-nav:hover {
  transform: translateY(-1px);
  border-color: #df8648;
}

.mini-spotlight-viewport {
  overflow: hidden;
  border: 1px solid #6f4b36;
  border-radius: 15px;
  background: linear-gradient(180deg, #30251fcc, #221b18cc);
  box-shadow: inset 0 0 20px #ffffff08, var(--shadow);
}

.mini-spotlight-track {
  display: flex;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.mini-spotlight-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.75rem;
}

.mini-spotlight-slide img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid #6f4b36;
}

.mini-spotlight-slide div {
  border: 1px solid #6f4b36;
  border-radius: 11px;
  background:
    radial-gradient(220px 80px at 100% 0%, #ff7a551d, transparent 70%),
    linear-gradient(180deg, #2d241fc9 0%, #221b18cf 100%);
  box-shadow: inset 0 0 16px #ffffff08;
  padding: 0.8rem;
}

.mini-spotlight-slide h3 {
  font-size: clamp(1rem, 2.25vw, 1.35rem);
  text-transform: uppercase;
}

.mini-spotlight-slide p {
  margin: 0.55rem 0 0;
  color: #ddb995;
}

.mini-spotlight-dots {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.mini-spotlight-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #8d3f2f;
  background: #3a2a22;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mini-spotlight-dot.is-active {
  background: linear-gradient(180deg, #ffd5a1, #df8a44);
  border-color: #f3bf82;
  transform: scale(1.2);
}

.comparison-list {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.8rem;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.7rem;
}

.compare-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  padding: 0.92rem;
  box-shadow: inset 0 0 16px #ffffff08, var(--shadow);
}

.compare-old {
  background:
    radial-gradient(220px 100px at 100% 0%, #b9855217, transparent 70%),
    linear-gradient(180deg, #2d241fcc, #221b18cc);
}

.compare-new {
  background:
    radial-gradient(220px 100px at 100% 0%, #ff8f5928, transparent 70%),
    linear-gradient(180deg, #2d241fcc, #17110ecc);
}

.compare-label {
  margin: 0;
  color: #ffbb85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  font-size: 0.73rem;
}

.compare-card h3 {
  margin-top: 0.4rem;
  font-size: 1rem;
  text-transform: uppercase;
}

.compare-card p:last-child {
  margin: 0.5rem 0 0;
  color: #d8b18c;
}

.compare-arrow {
  align-self: center;
  font-size: 1.35rem;
  color: #f4be80;
}

.event-timeline {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

.event-day {
  border: 1px solid #6f4b36;
  border-radius: 13px;
  background:
    radial-gradient(180px 80px at 100% 0%, #ff7a5519, transparent 70%),
    linear-gradient(180deg, #2d241fcc, #221b18cc);
  box-shadow: inset 0 0 14px #ffffff07, var(--shadow);
  padding: 0.82rem;
}

.event-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.event-day header p {
  margin: 0;
  color: #f0bd84;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  font-weight: 800;
}

.event-day header span {
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  color: #ffd9b0;
  font-size: 0.7rem;
  font-weight: 800;
}

.event-day h3 {
  margin-top: 0.38rem;
  font-size: 0.95rem;
}

.event-day p {
  margin: 0.46rem 0 0;
  color: #d7b08c;
  font-size: 0.86rem;
}

.event-day.is-today {
  border-color: #f2b36d;
}

.event-day.is-today header span {
  border-color: #f2b36d;
  color: #2a120c;
  background: linear-gradient(180deg, #ffd59f, #de8a43);
}

.event-day.is-next {
  border-color: #8d5c3c;
}

.proof-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.proof-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(220px 90px at 100% 0%, #ff7a551c, transparent 70%),
    linear-gradient(180deg, #2d241fcc, #221b18cc);
  box-shadow: inset 0 0 16px #ffffff08, var(--shadow);
  padding: 1rem 0.9rem;
  text-align: center;
}

.proof-card strong {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: #ffe1b6;
}

.proof-card p {
  margin: 0.45rem 0 0;
  color: #d7b08a;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.quick-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 84;
  display: grid;
  gap: 0.45rem;
}

.quick-action {
  text-decoration: none;
  border: 1px solid #8d5c3c;
  border-radius: 10px;
  background: linear-gradient(180deg, #2e231eee, #1b1411ed);
  color: #ffd8b0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  font-size: 0.72rem;
  padding: 0.45rem 0.62rem;
  text-align: center;
  box-shadow: 0 10px 20px #0000007d;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.quick-action:hover {
  border-color: #e29049;
  transform: translateY(-1px);
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.visual-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #6f4b36;
  background: #221b18cf;
  box-shadow: var(--shadow);
}

.visual-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid #6f4b36;
}

.visual-card div {
  padding: 0.85rem;
}

.visual-card h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

.visual-card p {
  margin: 0.45rem 0 0;
  color: #d8b28e;
}

.final-cta {
  text-align: center;
  padding-bottom: 4.8rem;
}

.final-cta h2 {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  text-transform: uppercase;
}

.final-cta p {
  color: #dbb693;
  max-width: 60ch;
  margin: 0.75rem auto 1.15rem;
}

.site-footer {
  border-top: 1px solid #6f4b36;
  background: #120707e5;
}

.footer-wrap {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-wrap p {
  margin: 0;
  color: #b78d6a;
  font-size: 0.86rem;
}

.footer-wrap nav {
  display: flex;
  gap: 0.95rem;
}

.partner-backlinks {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 0.75rem;
  border-top: 1px solid #4a3327;
}

.partner-backlink {
  min-width: 0;
}

.partner-backlink-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.partner-backlink-logo img {
  display: block;
  width: auto;
  max-width: 170px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.site-footer .partner-backlink-text {
  color: #cba77f;
  font-size: 0.7rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.site-footer .partner-backlink-text:hover,
.site-footer .partner-backlink-text:focus-visible {
  color: #ffe0ad;
}

.site-footer .inforge-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid #6f4b36;
  border-radius: 4px;
  background: #100b09c7;
  color: #d9bc98;
  text-transform: none;
  box-shadow: inset 0 0 14px #f2c27d0a;
}

.site-footer .inforge-footer-link:hover,
.site-footer .inforge-footer-link:focus-visible {
  border-color: #d39a58;
  color: #ffe0ad;
  box-shadow: 0 8px 18px #00000070, inset 0 0 16px #f2c27d12;
}

.inforge-footer-link img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 88px;
  object-fit: contain;
}

.inforge-footer-link span {
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.epvp-footer-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0.74rem auto 1rem;
  border: 1px solid #d0a06270;
  border-radius: 50%;
  background: #090604c9;
  box-shadow: 0 8px 18px #0000008a, inset 0 0 12px #f2c27d12;
  transform: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.epvp-footer-link:hover {
  border-color: #f0bf79;
  box-shadow: 0 10px 22px #00000099, 0 0 18px #d0a06240, inset 0 0 14px #f2c27d18;
  transform: translateY(-2px);
}

.epvp-footer-link img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body.presentation-only .epvp-footer-link {
  position: fixed;
  left: 50%;
  bottom: 0.58rem;
  z-index: 72;
  margin: 0;
  transform: translateX(-50%);
}

body.presentation-only .epvp-footer-link:hover {
  transform: translateX(-50%) translateY(-2px);
}

body.panel-open {
  overflow: hidden;
}

.side-panel-overlay {
  position: fixed;
  inset: 0;
  background: #00000099;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.side-panel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 94vw);
  height: 100vh;
  background: linear-gradient(180deg, #2d241f 0%, #15080a 100%);
  border-left: 1px solid #6f4b36;
  box-shadow: -18px 0 40px #000000a3;
  transform: translateX(106%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.24s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.side-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1rem 0.8rem;
  border-bottom: 1px solid #6f4b36;
  background: linear-gradient(180deg, #352820, #221b18);
}

.side-panel-head h3 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.side-panel-close {
  width: 34px;
  height: 34px;
  border: 1px solid #8d5c3c;
  border-radius: 10px;
  color: #ffd6b0;
  background: #2e231e;
  font-size: 1.2rem;
  cursor: pointer;
}

.side-panel-close:hover {
  background: #3a2b23;
}

.side-panel-body {
  padding: 1rem;
  overflow-y: auto;
}

.panel-form {
  display: grid;
  gap: 0.75rem;
}

.panel-field {
  display: grid;
  gap: 0.35rem;
}

.panel-field span {
  color: #ddb995;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

.panel-field input {
  border: 1px solid #6f4b36;
  border-radius: 10px;
  background: #17110e;
  color: #f8e4cc;
  padding: 0.66rem 0.7rem;
  outline: none;
}

.panel-field input:focus {
  border-color: #f2b56f;
  box-shadow: 0 0 0 3px #f2b56f2f;
}

.panel-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #d5b08a;
  font-size: 0.83rem;
}

.panel-check input {
  margin-top: 0.2rem;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.panel-actions .btn {
  flex: 1 1 170px;
}

.download-list {
  display: grid;
  gap: 0.72rem;
}

.download-item {
  position: relative;
  display: grid;
  gap: 0.18rem;
  text-decoration: none;
  border: 1px solid #9b6a43;
  border-radius: 12px;
  padding: 0.95rem;
  background:
    radial-gradient(160px 80px at 100% 0%, #ffd07a35, transparent 72%),
    linear-gradient(180deg, #5d371e 0%, #2b1c16 100%);
  color: #fff1d2;
  box-shadow: inset 0 0 18px #fff0bd12, 0 12px 26px #09060475;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.download-item-sendgb {
  border-color: #ffb152;
  background:
    radial-gradient(210px 105px at 100% 0%, #ffdd7a66, transparent 72%),
    linear-gradient(180deg, #9a5522 0%, #4d2a18 100%);
}

.download-item-drive {
  border-color: #7ff5aa;
  background:
    radial-gradient(210px 105px at 100% 0%, #7ce4ff4d, transparent 72%),
    linear-gradient(180deg, #23785d 0%, #193d32 100%);
}

.download-item-direct {
  border-color: #8fc7ff;
  background:
    radial-gradient(210px 105px at 100% 0%, #8fc7ff59, transparent 72%),
    linear-gradient(180deg, #255b9e 0%, #182f58 100%);
}

.download-item strong {
  display: block;
  color: #fff4dc;
  text-transform: uppercase;
  font-size: 0.94rem;
  line-height: 1.18;
  text-shadow: 0 2px 10px #0000008c;
}

.download-item span {
  display: block;
  color: #f0d3ad;
  font-size: 0.84rem;
  line-height: 1.3;
}

.download-item-drive span {
  color: #c8ead8;
}

.download-item-direct span {
  color: #d7eaff;
}

.download-item:hover {
  border-color: #ffd08d;
  box-shadow: inset 0 0 20px #fff0bd1f, 0 16px 32px #0906048a, 0 0 18px #e9a24b3d;
  transform: translateY(-1px);
}

.download-item-drive:hover {
  border-color: #9df0bd;
  box-shadow: inset 0 0 20px #d8ffe91a, 0 16px 32px #0906048a, 0 0 18px #6bcf9035;
}

.download-item-direct:hover {
  border-color: #b9dcff;
  box-shadow: inset 0 0 20px #d7eaff24, 0 16px 32px #0906048a, 0 0 18px #75b8ff38;
}

.download-requirements {
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.download-requirements-head {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(220px 100px at 50% 0%, #d0a06220, transparent 72%),
    linear-gradient(180deg, #30251f, #17110e);
  padding: 0.85rem;
  text-align: center;
}

.download-requirements-head span {
  display: block;
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.download-requirements-head h4 {
  margin: 0.25rem 0 0;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.requirement-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(260px 120px at 90% 10%, #d0a06216, transparent 72%),
    linear-gradient(180deg, #2d241f, #17110e);
  box-shadow: inset 0 0 18px #f2c27d0b;
  padding: 0.85rem;
}

.requirement-card.is-recommended {
  border-color: #8d5c3c;
  background:
    radial-gradient(260px 120px at 90% 10%, #f0bf7924, transparent 72%),
    linear-gradient(180deg, #32261f, #17110e);
}

.requirement-card h5 {
  margin: 0 0 0.65rem;
  color: #ffd9aa;
  font-family: "Cinzel", serif;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.requirement-card dl {
  display: grid;
  gap: 0.48rem;
  margin: 0;
}

.requirement-card dl div {
  display: grid;
  gap: 0.18rem;
  border-top: 1px solid #6f4b363f;
  padding-top: 0.48rem;
}

.requirement-card dl div:first-child {
  border-top: 0;
  padding-top: 0;
}

.requirement-card dt {
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.requirement-card dd {
  margin: 0;
  color: #e5c7a5;
  font-size: 0.82rem;
  line-height: 1.45;
}

.requirement-notes ul {
  display: grid;
  gap: 0.48rem;
  margin: 0;
  padding-left: 1.05rem;
  color: #e5c7a5;
  font-size: 0.82rem;
  line-height: 1.45;
}

.panel-coming-soon {
  display: grid;
  place-items: center;
  min-height: 260px;
  text-align: center;
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(260px 120px at 50% 20%, #d0a06222, transparent 72%),
    linear-gradient(180deg, #30251f, #17110e);
  box-shadow: inset 0 0 18px #f2c27d10, 0 18px 34px #0906047a;
  padding: 1.1rem;
}

.panel-coming-soon .coming-soon-kicker {
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panel-coming-soon strong {
  display: block;
  margin-top: 0.45rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 18px #d0a06255;
}

.panel-coming-soon p {
  max-width: 30rem;
  margin: 0.7rem auto 0;
  color: #d9bc98;
  font-size: 0.9rem;
  line-height: 1.55;
}

.panel-register-info {
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background:
    radial-gradient(220px 120px at 100% 0%, #c8864d22, transparent 72%),
    linear-gradient(180deg, #30251fdc 0%, #1b1411df 100%);
  padding: 1rem;
  box-shadow: inset 0 0 18px #f5c98908, 0 16px 34px #09060473;
}

.panel-register-info .coming-soon-kicker {
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.panel-register-info strong {
  display: block;
  margin: 0.3rem 0 0.62rem;
  color: #f7e7cf;
  font-family: "Cinzel", serif;
  font-size: 1.18rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.panel-register-info p {
  margin: 0;
  color: #d4b694;
  font-size: 0.95rem;
  line-height: 1.65;
}

.panel-note {
  margin: 0.9rem 0 0;
  color: #c79f7a;
  font-size: 0.82rem;
}

.system-reqs {
  margin-top: 0.85rem;
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background: linear-gradient(180deg, #2e231e, #17110e);
  box-shadow: inset 0 0 12px #ffffff07;
  padding: 0.72rem;
}

.system-reqs h4 {
  margin: 0;
  color: #ffcf95;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.78rem;
}

.system-reqs-grid {
  margin-top: 0.52rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.system-reqs-col h5 {
  margin: 0;
  color: #f3c496;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.system-reqs-col ul {
  margin: 0.3rem 0 0;
  padding-left: 0.95rem;
  color: #d9b28d;
  font-size: 0.76rem;
  line-height: 1.35;
}

.system-reqs-col li + li {
  margin-top: 0.18rem;
}

.inner-hero {
  padding: 3.5rem 0 2.3rem;
}

.inner-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: stretch;
}

.inner-copy {
  border: 1px solid #6f4b36;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2d241fc7 0%, #221b18cc 100%);
  box-shadow: var(--shadow);
  padding: 1.15rem;
}

.inner-copy h1 {
  max-width: 16ch;
  font-size: clamp(1.8rem, 4.3vw, 3rem);
}

.inner-copy p {
  color: #e3bc95;
  margin: 0.65rem 0 0;
}

.inner-media {
  border: 1px solid #6f4b36;
  border-radius: var(--radius);
  background: #17110e;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.inner-media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: block;
  object-fit: cover;
}

.content-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.lore-panel {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background: linear-gradient(180deg, #2d241fc4 0%, #221b18cf 100%);
  box-shadow: inset 0 0 20px #ffffff08, var(--shadow);
  padding: 1rem;
}

.lore-panel h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

.lore-panel p {
  margin: 0.55rem 0 0;
  color: #d9b38f;
}

.stack-list {
  margin: 0.6rem 0 0;
  padding-left: 1rem;
  color: #ddb995;
}

.stack-list li + li {
  margin-top: 0.3rem;
}

.rules-page {
  background:
    linear-gradient(180deg, #15100e 0%, #221b18 36%, #15100e 100%);
}

.rules-main {
  min-height: 70vh;
  padding: clamp(2.6rem, 5vw, 4.8rem) 0 clamp(4rem, 7vw, 6.5rem);
}

.rules-intro {
  border-bottom: 1px solid #745039;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.rules-intro h1 {
  max-width: none;
  margin-top: 0.35rem;
  color: #fff1d2;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1;
}

.rules-intro > p:last-of-type {
  max-width: 760px;
  margin: 0.85rem 0 0;
  color: #dfc0a3;
  font-size: clamp(0.96rem, 1.4vw, 1.12rem);
  line-height: 1.65;
}

.rules-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.rules-meta span {
  border: 1px solid #765039;
  border-radius: 6px;
  background: #1b1411c9;
  color: #edbd7b;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.48rem 0.68rem;
  text-transform: uppercase;
}

.rules-acceptance {
  position: relative;
  max-width: 920px;
  margin-top: 1.35rem;
  padding: 1rem 1.1rem 1rem 1.3rem;
  border: 1px solid #9a673f;
  border-left: 4px solid #d99b58;
  border-radius: 5px;
  background: #241711d9;
  box-shadow: inset 0 0 24px #d99b580d;
}

.rules-acceptance strong {
  display: block;
  color: #f1c27f;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.rules-acceptance p {
  margin: 0.42rem 0 0;
  color: #e3c7ac;
  font-size: clamp(0.86rem, 1.2vw, 0.96rem);
  font-weight: 600;
  line-height: 1.62;
}

.rules-layout {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.rules-toc {
  position: sticky;
  top: 7rem;
  border-top: 2px solid #d19a59;
  padding-top: 0.85rem;
}

.rules-toc > p {
  margin: 0 0 0.65rem;
  color: #f1c27f;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rules-toc nav {
  display: grid;
}

.rules-toc a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.45rem;
  border-bottom: 1px solid #50382b;
  color: #b9885f;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 0.72rem 0;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.rules-toc a span {
  color: #dec0a4;
}

.rules-toc a:hover {
  border-color: #b77b48;
  color: #f0bd78;
}

.rules-content {
  min-width: 0;
}

.rules-section {
  scroll-margin-top: 7rem;
  border-top: 1px solid #694832;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

.rules-section:first-child {
  border-top-color: #b77b48;
}

.rules-section header {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
}

.rules-section header > span {
  color: #d99b58;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.rules-section h2 {
  margin: 0;
  color: #fff0d4;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.rule-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-list li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.7rem;
  border-top: 1px solid #443027;
  padding: 0.9rem 0;
}

.rule-list li > span {
  color: #c98750;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.6;
}

.rule-list p {
  margin: 0;
  color: #dfc4aa;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.62;
}

.rule-list a {
  color: #f0b96f;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #a86e41;
  text-underline-offset: 3px;
}

.rules-contact {
  border-bottom: 1px solid #694832;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.legal-index {
  position: sticky;
  top: 7rem;
  min-width: 0;
  border-top: 2px solid #d19a59;
  padding-top: 0.9rem;
}

.legal-index > p {
  margin: 0 0 0.65rem;
  color: #f1c27f;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.legal-index nav {
  display: grid;
}

.legal-index a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  border-bottom: 1px solid #50382b;
  padding: 0.72rem 0;
  color: #b9885f;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-index a span {
  color: #dec0a4;
  font-family: "Cinzel", Georgia, serif;
}

.legal-index a strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-index a:hover,
.legal-index a.is-active {
  border-color: #c88b51;
  color: #f0bd78;
}

.legal-support-link {
  display: inline-flex;
  margin-top: 1rem;
  color: #e1b075;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #835735;
  text-underline-offset: 4px;
}

.legal-documents {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.legal-document {
  scroll-margin-top: 7rem;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #62432f;
  border-radius: 6px;
  background: #17110fbd;
  box-shadow: inset 0 1px #ffffff08;
}

.legal-document[open] {
  border-color: #96633e;
  background: #1a1310e8;
}

.legal-document summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 1.5rem;
  gap: 0.8rem;
  align-items: center;
  min-width: 0;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.legal-document summary::-webkit-details-marker {
  display: none;
}

.legal-document-number {
  color: #d99b58;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.legal-document-heading {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.legal-document-heading strong {
  color: #fff0d4;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.96rem, 1.6vw, 1.18rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.legal-document-heading small {
  color: #ba9a80;
  font-size: 0.75rem;
  line-height: 1.4;
}

.legal-document-meta {
  color: #c7915a;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
}

.legal-document-toggle {
  color: #e2ad6d;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.legal-document-toggle::before {
  content: "+";
}

.legal-document[open] .legal-document-toggle {
  transform: rotate(45deg);
}

.legal-document-body {
  min-width: 0;
  border-top: 1px solid #523727;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.legal-document-title {
  border-bottom: 1px solid #66442f;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
}

.legal-document-title p {
  margin: 0 0 0.35rem;
  color: #d99b58;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.legal-document-title h2 {
  margin: 0;
  color: #fff0d4;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.legal-document-title time {
  display: block;
  margin-top: 0.55rem;
  color: #b69072;
  font-size: 0.78rem;
  font-weight: 700;
}

.legal-document-body h3 {
  margin: 2rem 0 0.65rem;
  color: #f0bd78;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.3;
}

.legal-document-body h4 {
  margin: 1.3rem 0 0.5rem;
  color: #e3b98e;
  font-size: 0.98rem;
  line-height: 1.4;
}

.legal-document-body p {
  margin: 0.55rem 0;
  color: #dac0a8;
  font-size: clamp(0.88rem, 1.15vw, 0.98rem);
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.legal-document-body strong {
  color: #f2d4af;
}

.legal-list {
  display: grid;
  gap: 0.48rem;
  margin: 0.65rem 0 1rem;
  padding: 0;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-left: 1.15rem;
  color: #dac0a8;
  font-size: clamp(0.88rem, 1.15vw, 0.98rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.legal-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border: 1px solid #d99b58;
  transform: rotate(45deg);
}

@media (max-width: 820px) {
  .rules-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .rules-toc {
    position: static;
    top: auto;
  }

  .rules-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .legal-index {
    position: static;
    top: auto;
  }

  .legal-index nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

@media (max-width: 520px) {
  .rules-main {
    padding-top: 2rem;
  }

  .rules-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rules-toc nav {
    grid-template-columns: 1fr;
  }

  .rules-section header,
  .rule-list li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.45rem;
  }

  .legal-index nav {
    grid-template-columns: 1fr;
  }

  .legal-document summary {
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.2rem;
    gap: 0.55rem;
    padding: 0.9rem 0.8rem;
  }

  .legal-document-meta {
    grid-column: 2;
    white-space: normal;
  }

  .legal-document-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .legal-document-heading small {
    font-size: 0.7rem;
  }

  .legal-document-body {
    padding: 1rem 0.9rem 1.35rem;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #6f4b36;
  box-shadow: var(--shadow);
}

.rework-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.rework-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(220px 85px at 100% 0%, #ff7a551e, transparent 70%),
    linear-gradient(180deg, #2d241fc6 0%, #221b18ce 100%);
  box-shadow: inset 0 0 16px #ffffff08, var(--shadow);
  padding: 0.95rem;
}

.rework-tag {
  margin: 0;
  color: #ffb87e;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 0.72rem;
}

.rework-card h3 {
  margin-top: 0.35rem;
  font-size: 1rem;
  text-transform: uppercase;
}

.rework-card p {
  margin: 0.55rem 0 0;
  color: #ddb995;
}

.feature-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
}

.feature-slider-nav {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #8d5c3c;
  background: linear-gradient(180deg, #2e231e, #1b1411);
  color: #ffd8b2;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-slider-nav:hover {
  transform: translateY(-1px);
  border-color: #d98244;
}

.feature-slider-viewport {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #6f4b36;
  background: linear-gradient(180deg, #2d241fcc, #17110ecc);
  box-shadow: inset 0 0 20px #ffffff08, var(--shadow);
}

.feature-slider-track {
  display: flex;
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.feature-slider-track.no-animate {
  transition: none !important;
}

.feature-slide {
  min-width: 100%;
  padding: 1rem;
}

.feature-slide-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(240px 120px at 100% 0%, #ff7a551f, transparent 72%),
    linear-gradient(180deg, #2d241fc9 0%, #221b18cf 100%);
  box-shadow: inset 0 0 16px #ffffff08;
  padding: 1rem;
}

.feature-slide-card h3 {
  margin-top: 0.35rem;
  font-size: clamp(1.08rem, 2.3vw, 1.45rem);
  text-transform: uppercase;
}

.feature-slide-card > p:last-child {
  margin: 0.65rem 0 0;
  color: #ddb995;
  max-width: 72ch;
}

.feature-slide-media {
  margin: 0.8rem 0 0;
  border: 1px solid #6f4b36;
  border-radius: 12px;
  overflow: hidden;
  background: #17110e;
  position: relative;
}

.feature-slide-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.feature-slide-video figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.72rem;
  background: linear-gradient(180deg, transparent, #100607e8);
  color: #ffd2a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.74rem;
  font-weight: 700;
}

.feature-slider-dots {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.feature-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #8d3f2f;
  background: #3a2a22;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.feature-slider-dot.is-active {
  background: linear-gradient(180deg, #ffd5a1, #df8a44);
  border-color: #f3bf82;
  transform: scale(1.2);
}

.feature-slider-hint {
  margin: 0.8rem 0 0;
  text-align: center;
  color: #caa07c;
  font-size: 0.82rem;
}

body.presentation-only {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #090405;
}

html.presentation-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.presentation-root.ios-safe-mode,
html.presentation-root.ios-safe-mode body.presentation-only {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.presentation-root.ios-safe-mode body.presentation-only,
html.presentation-root.ios-safe-mode .showcase {
  position: fixed;
  inset: 0;
}

html.presentation-root.ios-safe-mode .showcase {
  height: 100svh;
  height: 100dvh;
  touch-action: none;
}

/* WebKit must not promote the 41-screen track as one device-pixel GPU texture. */
html.presentation-root.ios-safe-mode .showcase-track {
  position: relative;
  height: 100%;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

html.presentation-root.ios-safe-mode .showcase-slide {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
}

html.presentation-root.ios-safe-mode .showcase-slide.is-active {
  display: grid;
}

html.presentation-root.ios-safe-mode .showcase-card,
html.presentation-root.ios-safe-mode .showcase-card-wide,
html.presentation-root.ios-safe-mode .showcase-progress-list {
  -webkit-overflow-scrolling: auto;
  touch-action: none !important;
}

body.presentation-only::before {
  background: #090405;
  filter: none;
}

body.presentation-only::after,
body.presentation-only .grid-overlay,
body.presentation-only .bg-orb {
  display: none;
}

.showcase {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
}

.showcase-track {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.78s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.showcase-track.no-animate {
  transition: none !important;
}

.showcase-slide {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  padding: clamp(1rem, 2.5vh, 1.8rem) clamp(0.85rem, 3vw, 1.6rem);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.showcase-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #080304e8 0%, #0d0508e0 46%, #080304eb 100%),
    var(--slide-bg) center / cover no-repeat;
  transform: scale(1.07);
  filter: saturate(1.1) contrast(1.08);
  z-index: -2;
}

.showcase-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 360px at 80% 20%, #ff704820, transparent 70%),
    radial-gradient(640px 300px at 10% 70%, #e14b2f1e, transparent 72%);
  z-index: -1;
}

.showcase-card {
  width: min(950px, 100%);
  border: 1px solid #5d251f;
  border-radius: 18px;
  background:
    radial-gradient(300px 120px at 100% 0%, #ff7a5520, transparent 70%),
    linear-gradient(180deg, #2d241fe6 0%, #14080ae8 100%);
  box-shadow: inset 0 0 24px #ffffff08, 0 20px 46px #00000099;
  padding: clamp(0.9rem, 2.1vw, 1.5rem);
  opacity: 0.35;
  transform: translateY(26px) scale(0.985);
  transition: transform 0.78s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}

.showcase-slide.is-active .showcase-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.showcase-tag {
  margin: 0;
  color: #ffb982;
  letter-spacing: 1.4px;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
}

.showcase-card h1,
.showcase-card h2 {
  margin-top: 0.45rem;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3.2vw, 2.45rem);
}

.showcase-media {
  margin: 0.75rem 0 0;
  border: 1px solid #6f4b36;
  border-radius: 14px;
  overflow: hidden;
  background: #17110e;
  box-shadow: 0 16px 30px #00000080;
  position: relative;
  cursor: zoom-in;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-media::before {
  content: "CLICK TO ENLARGE";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(82%, 260px);
  padding: 0.72rem 1rem;
  border: 1px solid #f0bf79;
  border-radius: 999px;
  background: linear-gradient(180deg, #2e231eea 0%, #17110ef2 100%);
  color: #ffe0ad;
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 14px 30px #090604b8, 0 0 22px #d0a0625c;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(320px 180px at 50% 50%, #f0bf7928, #09060499 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.showcase-media:hover,
.showcase-media:focus-within {
  border-color: #d0a062;
  box-shadow: 0 24px 48px #090604b0, 0 0 0 1px #d0a06235, inset 0 0 24px #f2c27d10;
  transform: translateY(-4px) scale(1.018);
}

.showcase-media:hover::before,
.showcase-media:focus-within::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.showcase-media:hover::after,
.showcase-media:focus-within::after {
  opacity: 1;
}

.showcase-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.8;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s ease;
}

.showcase-slide.is-active .showcase-media img {
  transform: scale(1);
}

.showcase-media-video figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 0.75rem;
  background: linear-gradient(180deg, transparent, #100607e8);
  color: #ffd2a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.74rem;
  font-weight: 700;
}

.showcase-card > p:last-child {
  margin: 0.75rem 0 0;
  color: #dfb995;
  font-size: clamp(0.93rem, 1.85vw, 1.05rem);
  max-width: 70ch;
}

.showcase-arrow {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #8d5c3c;
  background: linear-gradient(180deg, #2d241ff2, #221b18e8);
  color: #ffd8b0;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 50;
  box-shadow: 0 12px 24px #0000008a;
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.showcase-arrow-up {
  top: 0.85rem;
}

.showcase-arrow-down {
  bottom: 3.35rem;
}

.showcase-arrow:hover {
  border-color: #e3904a;
  transform: translateX(-50%) translateY(-1px);
}

.showcase-arrow:disabled {
  opacity: 0.36;
  pointer-events: none;
}

.showcase-side-controls {
  position: fixed;
  right: clamp(0.5rem, 1.5vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 52;
  display: grid;
  gap: 0.55rem;
  width: min(270px, 36vw);
}

.showcase-home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.68rem 0.85rem;
  border: 1px solid #8a6a45;
  border-radius: 10px;
  background: #5B452B;
  color: #ffe0ad;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 12px 24px #0000007a;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.showcase-home-button:hover {
  transform: translateY(-1px);
  border-color: #d0a062;
  background: #6b5232;
}

.showcase-progress {
  display: grid;
  grid-template-columns: 1fr 12px;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}

.showcase-progress-list {
  position: relative;
  display: grid;
  gap: 0.34rem;
  padding: 0.6rem 0.52rem;
  border: 1px solid #6f4b36;
  border-radius: 12px;
  background: linear-gradient(180deg, #1e0d10da, #221b18d8);
  box-shadow: 0 12px 26px #0000007f;
}

.showcase-progress-item {
  border: 1px solid transparent;
  background: #00000000;
  color: #d3ac84;
  border-radius: 9px;
  width: 100%;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  padding: 0.42rem 0.46rem;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 0.42rem;
  align-items: center;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease;
}

.showcase-progress-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #8e3e2e;
  background: #3a2a22;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.showcase-progress-item:hover {
  border-color: #b98552;
  color: #f5d6b2;
  transform: translateX(-1px);
}

.showcase-progress-item.is-active {
  border-color: #f2b56f;
  background: linear-gradient(180deg, #2f1316ef, #221b18dc);
  color: #ffe2bc;
}

.showcase-progress-item.is-active::before {
  border-color: #f3bf82;
  background: linear-gradient(180deg, #ffd5a1, #df8a44);
  transform: scale(1.15);
}

.showcase-progress-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-progress-rail {
  position: relative;
  border-radius: 999px;
  border: 1px solid #623026;
  background: linear-gradient(180deg, #2d241fd9, #221b18d9);
  overflow: hidden;
}

.showcase-progress-fill {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffcf93 0%, #e08d46 55%, #b85a2c 100%);
  box-shadow: 0 0 14px #ef9e59b3;
  transition: height 0.5s ease;
}

.reveal,
.reveal-delay,
.reveal-delay-2,
.reveal-delay-3 {
  opacity: 0;
  transform: translate3d(var(--parallax-x, 0px), calc(22px + var(--parallax-y, 0px)), 0);
  animation: rise 0.8s ease forwards;
}

.reveal-delay {
  animation-delay: 0.12s;
}

.reveal-delay-2 {
  animation-delay: 0.22s;
}

.reveal-delay-3 {
  animation-delay: 0.32s;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  }
}

@media (max-width: 1260px) {
  .brand-logo {
    height: clamp(68px, 7vw, 88px);
    max-width: min(44vw, 320px);
  }

  .main-nav {
    gap: 0.62rem;
  }

  .main-nav a {
    font-size: 0.77rem;
  }

  .nav-cta .btn {
    padding: 0.47rem 0.62rem;
    font-size: 0.72rem;
  }

  .nav-cta .btn-solid {
    padding-inline: 0.78rem;
  }
}

@media (max-width: 1000px) {
  .showcase-side-controls {
    width: min(230px, 42vw);
    right: 0.5rem;
  }

  .showcase-progress-item {
    font-size: 0.68rem;
    padding: 0.38rem 0.4rem;
  }

  .showcase-card {
    width: min(92vw, 760px);
  }

  .showcase-media img {
    aspect-ratio: 16 / 10;
  }

  .main-nav {
    display: none;
  }

  .site-header {
    position: static;
  }

  .mobile-nav-link {
    display: inline-flex;
  }

  .hero-grid,
  .insight-grid,
  .announcements-board,
  .visual-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid,
  .event-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-row {
    grid-template-columns: 1fr;
  }

  .compare-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .mini-spotlight-slide {
    grid-template-columns: 1fr;
  }

  .stats-row,
  .live-status-row,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-status-row {
    margin-top: 1rem;
    margin-bottom: 0;
    transform: none;
  }

  .mini-spotlight {
    grid-template-columns: 1fr;
  }

  .mini-spotlight-nav {
    width: 100%;
    height: 40px;
  }

  .feature-slider {
    grid-template-columns: 1fr;
  }

  .feature-slider-nav {
    width: 100%;
    height: 40px;
  }

  .inner-hero-grid,
  .content-columns,
  .image-grid,
  .engine-lead,
  .rework-grid,
  .roadmap-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .announcements {
    padding: 3rem 0;
  }

  .announcement-feature,
  .patchnote-card {
    border-radius: 12px;
  }

  .announcement-actions .btn {
    width: 100%;
  }

  .announcement-fix-list {
    grid-template-columns: 1fr;
    font-size: 0.86rem;
  }

  .announcement-meta,
  .patchnote-card div {
    align-items: flex-start;
    flex-direction: column;
  }

  .rankings-page {
    gap: 0.8rem;
  }

  .rankings-intro h1 {
    font-size: clamp(1.72rem, 11vw, 2.35rem);
  }

  .rankings-intro p:last-child,
  .rankings-status {
    font-size: 0.82rem;
  }

  .ranking-panel .panel-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .ranking-updated {
    text-align: left;
  }

  .ranking-table {
    min-width: 420px;
  }

  .ranking-table th,
  .ranking-table td {
    padding: 0.48rem 0.34rem;
    font-size: 0.82rem;
  }

  .showcase-side-controls {
    width: 58px;
    right: 0.35rem;
  }

  .showcase-home-button {
    min-height: 34px;
    padding: 0.32rem 0.22rem;
    font-size: 0.58rem;
    line-height: 1.05;
    word-break: break-word;
  }

  .showcase-progress {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .showcase-progress-list {
    padding: 0.4rem 0.35rem;
  }

  .showcase-progress-item {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0.34rem 0.2rem;
  }

  .showcase-progress-item-label {
    display: none;
  }

  .showcase-progress-rail {
    min-height: 54px;
  }

  .showcase-slide {
    padding: 0.7rem 0.62rem;
  }

  .showcase-card {
    border-radius: 14px;
    padding: 0.78rem;
  }

  .showcase-tag {
    font-size: 0.67rem;
  }

  .showcase-card h1,
  .showcase-card h2 {
    font-size: clamp(1.04rem, 6vw, 1.46rem);
  }

  .showcase-card > p:last-child {
    font-size: 0.9rem;
    margin-top: 0.62rem;
  }

  .showcase-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  .showcase-arrow-up {
    top: 0.52rem;
  }

  .showcase-arrow-down {
    bottom: 0.52rem;
  }

  .nav-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
  }

  .brand-logo {
    width: auto;
    height: clamp(62px, 11vw, 74px);
    max-width: 72vw;
  }

  .nav-cta {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .nav-cta .btn {
    width: 100%;
    min-width: 0;
    padding: 0.52rem 0.45rem;
    font-size: 0.66rem;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .nav-cta .btn-solid {
    padding-inline: 0.45rem;
  }

  .nav-cta .language-switcher,
  .nav-cta .language-switcher-toggle {
    width: 100%;
  }

  .nav-cta .language-switcher-toggle {
    justify-content: center;
  }

  .system-reqs-grid {
    grid-template-columns: 1fr;
  }

  .container {
    width: min(100% - 1.8rem, var(--max));
  }

  .hero-grid,
  .hero-copy,
  .hero-visual {
    min-width: 0;
    width: 100%;
  }

  .hero-lead {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .stats-row,
  .live-status-row,
  .proof-grid,
  .event-timeline,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero-seals {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    display: none;
  }

  .roadmap-visual img {
    max-height: 420px;
  }

  .hero {
    padding-top: 2rem;
  }

  .inner-hero {
    padding-top: 2.6rem;
  }

  .footer-wrap {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1rem 0;
  }
}

/* #221B18 theme refresh */
body {
  background: #221B18;
}

body::before {
  background:
    linear-gradient(180deg, #221b18f2 0%, #18120fed 44%, #221b18f8 100%),
    linear-gradient(90deg, #100b09f0 0%, #221b1882 48%, #120d0bf0 100%),
    url("/tanitim/varlik/gorsel/bg-theme.jpg") center top / cover no-repeat;
  filter: saturate(0.9) contrast(1.08) brightness(0.72);
}

body::after {
  background:
    linear-gradient(180deg, #221b185c 0%, #16100dcc 100%),
    radial-gradient(980px 520px at 76% 18%, #a95b3424, transparent 64%),
    radial-gradient(760px 420px at 10% 72%, #d79c5c18, transparent 70%);
}

.grid-overlay {
  background-image:
    linear-gradient(#e0b0780c 1px, transparent 1px),
    linear-gradient(90deg, #e0b0780c 1px, transparent 1px);
  opacity: 0.13;
}

.orb-a,
.orb-b {
  opacity: 0.18;
  background: #8a5033;
}

.site-header {
  background: linear-gradient(180deg, #221b18f5 0%, #17110edd 100%);
  border-bottom-color: #6f4b36;
  box-shadow: 0 8px 26px #090604a8;
}

.main-nav a,
.site-footer a {
  color: #d9bc98;
}

.main-nav a:hover,
.main-nav a.is-active,
.site-footer a:hover {
  color: #ffe0ad;
}

.main-nav a::after {
  background: linear-gradient(90deg, #f1c47d 0%, #aa6840 100%);
  box-shadow: 0 0 13px #d0915588;
}

.btn,
.quick-action,
.feature-slider-nav,
.showcase-arrow {
  border-color: #8d5c3c;
  background: linear-gradient(180deg, #2e231e 0%, #1c1512 100%);
  color: #f2d2aa;
  box-shadow: 0 10px 22px #0906047a;
}

.btn:hover,
.quick-action:hover,
.feature-slider-nav:hover,
.showcase-arrow:hover {
  border-color: #d19257;
  box-shadow: 0 0 0 1px #d1925738, 0 0 20px #b36a3d5e;
}

.btn-solid,
.feature-filter .is-active,
.mini-tab.is-active {
  border-color: #f0bf79;
  background: linear-gradient(180deg, #f1c47d 0%, #c77a43 52%, #8f4e32 100%);
  color: #201410;
  box-shadow: 0 12px 28px #7c432a8c;
}

.btn-solid:hover {
  box-shadow: 0 15px 32px #8b4b2fa8;
}

.btn-ghost {
  border-color: #79533c;
  background: linear-gradient(180deg, #2b201bd4, #1b1411d4);
  color: #f0d0aa;
}

.btn-ghost:hover {
  border-color: #be7b4f;
  background: linear-gradient(180deg, #382920e8, #221b18e8);
}

.hero,
.features,
.roadmap,
.spotlight,
.comparison,
.events,
.social-proof,
.inner-hero,
.showcase-slide {
  background-color: transparent;
}

.hero::after,
.roadmap::before,
.features::before,
.showcase-slide::before {
  background: linear-gradient(90deg, transparent 0%, #8a5a3b 50%, transparent 100%);
}

.hero-copy,
.hero-visual,
.server-stat,
.mini-spotlight,
.feature-card,
.compare-card,
.timeline-card,
.proof-card,
.panel,
.lore-panel,
.roadmap-item,
.download-item,
.side-panel,
.showcase-card,
.showcase-progress-list,
.feature-slide-card,
.system-reqs,
.roadmap-visual,
.content-box,
.visual-card {
  border-color: #6f4b36;
  background:
    linear-gradient(180deg, #2d241fd8 0%, #221b18e6 100%);
  box-shadow: inset 0 0 20px #f5c98908, 0 18px 42px #0906048f;
}

.hero-visual,
.roadmap-visual,
.feature-slide-media,
.showcase-media {
  background: #17110e;
}

.feature-card,
.proof-card,
.timeline-card,
.lore-panel,
.download-item,
.compare-card {
  background:
    radial-gradient(240px 120px at 100% 0%, #c8864d1f, transparent 72%),
    linear-gradient(180deg, #30251fd1 0%, #221b18de 100%);
}

.compare-new {
  border-color: #b98552;
  background:
    radial-gradient(240px 120px at 100% 0%, #df9f591d, transparent 72%),
    linear-gradient(180deg, #352820d8 0%, #221b18e8 100%);
}

.compare-old {
  border-color: #604637;
}

.section-kicker,
.hero-kicker,
.showcase-tag,
.compare-label,
.panel-head a,
.feature-card h3,
.proof-card strong,
.timeline-card strong,
.roadmap-item summary,
.lore-panel h3 {
  color: #f0bf79;
}

.hero h1,
.section-title h2,
.inner-hero h1,
.showcase-card h1,
.showcase-card h2,
.panel-head h3 {
  color: #f7e7cf;
  text-shadow: 0 4px 18px #090604d1;
}

.hero-lead,
.feature-card p,
.lore-panel p,
.panel td,
.roadmap-item p,
.showcase-card > p:last-child,
.feature-slide-card > p:last-child,
.proof-card p,
.timeline-card p {
  color: #d5b99c;
}

.live-status-row,
.stats-row,
.proof-grid,
.event-timeline {
  color: #f4e4cc;
}

.roadmap-list::before {
  background: linear-gradient(180deg, #8e683c 0%, #8e683c 78%, #5f5750 78%, #5f5750 100%);
}

.roadmap-node {
  border-color: #6b5648;
  background: #6e6258;
  box-shadow: 0 0 0 6px #221b18;
}

.roadmap-row.is-done .roadmap-node,
.roadmap-row.is-current .roadmap-node {
  border-color: #d9ad6c;
  background: #b78145;
}

.roadmap-row.is-current .roadmap-item {
  border-color: #d9ad6c;
  background:
    radial-gradient(220px 96px at 100% 0%, #d0a06228, transparent 72%),
    linear-gradient(180deg, #352820e8 0%, #221b18e8 100%);
  box-shadow: inset 0 0 16px #f2c27d14, 0 16px 34px #09060473;
}

.feature-slider-dot,
.mini-spotlight-dot,
.showcase-progress-item::before {
  border-color: #8d5c3c;
  background: #3a2a22;
}

.feature-slider-dot.is-active,
.mini-spotlight-dot.is-active,
.showcase-progress-item.is-active::before {
  border-color: #f0bf79;
  background: linear-gradient(180deg, #f1c47d, #b86b3f);
}

.showcase-progress-item {
  color: #cdb08f;
}

.showcase-progress-item:hover,
.showcase-progress-item.is-active {
  border-color: #b98552;
  background: linear-gradient(180deg, #352820e8, #221b18e8);
  color: #ffe0ad;
}

.showcase-progress-rail {
  border-color: #6f4b36;
  background: linear-gradient(180deg, #30251f, #19120f);
}

.showcase-progress-fill {
  background: linear-gradient(180deg, #f1c47d 0%, #c77a43 55%, #8f4e32 100%);
  box-shadow: 0 0 14px #d09155a3;
}

.side-panel {
  background: linear-gradient(180deg, #2b211c 0%, #18120f 100%);
  border-left-color: #7c553d;
}

.side-panel-head {
  border-bottom-color: #6f4b36;
  background: linear-gradient(180deg, #352820, #221b18);
}

.panel-field input {
  border-color: #76533e;
  background: #17110e;
  color: #f6e4ca;
}

.panel-field input:focus {
  border-color: #e0a762;
  box-shadow: 0 0 0 3px #d0915530;
}

.panel-note,
.side-panel-body,
.panel-field span {
  color: #cbb090;
}

.site-footer {
  border-top-color: #6f4b36;
  background: #19120fe8;
}

.opening-cinematic {
  background:
    radial-gradient(680px 320px at 50% 48%, #c8864d23 0%, transparent 72%),
    linear-gradient(180deg, #221b18f4 0%, #130e0cf8 100%);
}

.opening-cinematic-inner {
  border-color: #7c553d;
  background: linear-gradient(180deg, #30251fdc 0%, #1b1411df 100%);
}

.stat-card,
.status-card,
.mini-spotlight-slide,
.event-timeline article,
.comparison-row,
.system-reqs-col,
.panel table {
  border-color: #6f4b36;
  background:
    radial-gradient(220px 95px at 100% 0%, #c8864d18, transparent 72%),
    linear-gradient(180deg, #30251fd1 0%, #221b18de 100%);
  box-shadow: inset 0 0 16px #f5c98907, 0 14px 32px #09060473;
}

.stat-card p,
.status-card p,
.status-meta,
.mini-spotlight-slide p,
.download-item span,
.system-reqs-col li {
  color: #cdb191;
}

.stat-card strong,
.status-value,
.mini-spotlight-slide h3,
.download-item strong,
.system-reqs h4,
.system-reqs-col h5 {
  color: #f0bf79;
}

.compare-arrow {
  color: #f0bf79;
  text-shadow: 0 0 14px #b86b3f88;
}

.panel th {
  color: #d9bc98;
}

.download-item.download-item-sendgb {
  border-color: #ffb152;
  background:
    radial-gradient(230px 120px at 100% 0%, #ffdf7c70, transparent 72%),
    linear-gradient(180deg, #a95f25 0%, #563019 100%);
  box-shadow: inset 0 0 22px #fff0bd22, 0 14px 30px #09060482, 0 0 16px #e9a24b2f;
}

.download-item.download-item-drive {
  border-color: #7ff5aa;
  background:
    radial-gradient(230px 120px at 100% 0%, #80e9ff55, transparent 72%),
    linear-gradient(180deg, #258264 0%, #194636 100%);
  box-shadow: inset 0 0 22px #d8ffe922, 0 14px 30px #09060482, 0 0 16px #6bcf9030;
}

.download-item.download-item-direct {
  border-color: #8fc7ff;
  background:
    radial-gradient(230px 120px at 100% 0%, #8fc7ff61, transparent 72%),
    linear-gradient(180deg, #2868b9 0%, #183866 100%);
  box-shadow: inset 0 0 22px #d7eaff24, 0 14px 30px #09060482, 0 0 16px #75b8ff33;
}

.download-item.download-item-sendgb strong,
.download-item.download-item-drive strong,
.download-item.download-item-direct strong {
  color: #fff8e8;
}

.download-item.download-item-sendgb span {
  color: #ffe0ad;
}

.download-item.download-item-drive span {
  color: #d1f6e0;
}

.download-item.download-item-direct span {
  color: #d7eaff;
}

/* Legacy red cleanup: keep every remaining surface in the #221B18 family. */
.engine-copy,
.engine-video,
.chip:not(.is-active),
.news-item,
.mini-spotlight-viewport,
.mini-spotlight-slide div,
.event-day,
.inner-copy,
.inner-media,
.rework-card,
.feature-slider-viewport,
.feature-slide-card,
.feature-slide-media,
.showcase-card,
.showcase-media,
.showcase-progress-list,
.showcase-progress-rail {
  border-color: #6f4b36;
  background:
    radial-gradient(260px 120px at 100% 0%, #b9855217, transparent 72%),
    linear-gradient(180deg, #2d241fdc 0%, #221b18ea 100%);
  box-shadow: inset 0 0 18px #f2c27d08, 0 16px 38px #09060486;
}

.engine-video figcaption,
.feature-slide-video figcaption,
.showcase-media-video figcaption {
  background: linear-gradient(180deg, transparent 0%, #18120ff0 100%);
  color: #f2d2aa;
}

.mini-spotlight-nav,
.feature-slider-nav,
.showcase-arrow,
.quick-action,
.side-panel-close {
  border-color: #8d5c3c;
  background: linear-gradient(180deg, #2e231e 0%, #1b1411 100%);
  color: #f2d2aa;
}

.mini-spotlight-nav:hover,
.feature-slider-nav:hover,
.showcase-arrow:hover,
.quick-action:hover,
.side-panel-close:hover {
  border-color: #d19257;
  background: linear-gradient(180deg, #3a2b23 0%, #221b18 100%);
}

.badge.event {
  color: #f8dec0;
  background: #3a2a22;
  border-color: #8d5c3c;
}

.event-day.is-next {
  border-color: #8d5c3c;
}

.showcase-slide::before {
  background:
    linear-gradient(180deg, #221b18e8 0%, #18120fdc 46%, #221b18ed 100%),
    var(--slide-bg) center / cover no-repeat;
  filter: saturate(0.92) contrast(1.06) brightness(0.78);
}

.showcase-slide::after {
  background:
    radial-gradient(760px 360px at 80% 20%, #b985521c, transparent 70%),
    radial-gradient(640px 300px at 10% 70%, #d79c5c14, transparent 72%);
}

.engine-copy p,
.inner-copy p,
.rework-card p,
.event-day p,
.mini-spotlight-slide p,
.showcase-card > p:last-child {
  color: #d5b99c;
}

.rework-tag,
.event-day header p,
.showcase-tag,
.news-title {
  color: #f0bf79;
}

/* Presentation content refresh */
.showcase-card-wide {
  width: min(1200px, calc(100vw - 280px));
  max-height: calc(100svh - 4.8rem);
  overflow: hidden;
}

.showcase-card-topic {
  min-height: min(520px, calc(100svh - 5.6rem));
}

.showcase-topic-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(460px, 1.2fr);
  gap: clamp(1rem, 2.2vw, 1.7rem);
  align-items: center;
  min-height: inherit;
}

.showcase-topic-layout-text {
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.9fr);
}

.showcase-boss-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
}

.showcase-boss-panel {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.showcase-boss-preview {
  margin: 0;
}

.showcase-boss-preview img {
  aspect-ratio: 16 / 8.5;
  object-position: center;
}

.showcase-boss-summary {
  display: inline-grid;
  gap: 0.18rem;
  margin-top: 1rem;
  padding: 0.74rem 0.9rem;
  border: 1px solid #8d5c3c;
  border-radius: 12px;
  background:
    radial-gradient(180px 90px at 100% 0%, #d0a06224, transparent 70%),
    linear-gradient(180deg, #2d241fd8, #17110ee8);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060473;
}

.showcase-boss-summary strong {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  text-transform: uppercase;
}

.showcase-boss-summary span {
  color: #d5b99c;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.showcase-boss-map-card {
  border: 1px solid #6f4b36;
  border-radius: 14px;
  background:
    radial-gradient(220px 120px at 100% 0%, #b985521f, transparent 72%),
    linear-gradient(180deg, #2d241fd8 0%, #17110ee8 100%);
  box-shadow: inset 0 0 20px #f2c27d08, 0 16px 34px #09060482;
  padding: 0.82rem;
}

.showcase-boss-card-title {
  margin: 0 0 0.65rem;
  color: #f0bf79;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-boss-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-boss-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 42px;
  border: 1px solid #6f4b365f;
  border-left: 3px solid #b98552;
  border-radius: 10px;
  background: #16100da8;
  color: #f0d5b7;
  padding: 0.5rem 0.62rem;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.showcase-boss-list li:hover {
  transform: translateX(4px) translateY(-2px);
  border-color: #d0a062;
  background: linear-gradient(180deg, #2f241de0, #1b1411e8);
  box-shadow: 0 12px 24px #09060482, inset 0 0 16px #f2c27d10;
}

.showcase-boss-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
}

.showcase-boss-list strong {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #d0a062;
  border-radius: 999px;
  background: linear-gradient(180deg, #f1c47d 0%, #b86b3f 100%);
  color: #201410;
  font-weight: 900;
  box-shadow: 0 0 16px #d0a06245;
}

.showcase-drop-card {
  min-height: min(560px, calc(100svh - 5.2rem));
}

.showcase-drop-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(460px, 1.18fr);
}

.showcase-drop-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  min-width: 0;
}

.showcase-drop-rule {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border: 1px solid #8d5c3c;
  border-radius: 16px;
  background:
    radial-gradient(240px 150px at 88% 10%, #d0a0622b, transparent 72%),
    linear-gradient(145deg, #2d241fe2 0%, #17110ef0 100%);
  box-shadow: inset 0 0 24px #f2c27d0a, 0 16px 34px #09060482;
  padding: clamp(0.95rem, 1.8vw, 1.3rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-drop-rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f0bf7917 52%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.65;
  pointer-events: none;
}

.showcase-drop-rule:hover {
  transform: translateY(-5px) scale(1.018);
  border-color: #d0a062;
  background:
    radial-gradient(280px 170px at 88% 10%, #e0a76233, transparent 74%),
    linear-gradient(145deg, #352820ea 0%, #1b1411f2 100%);
  box-shadow: inset 0 0 30px #f2c27d13, 0 24px 46px #090604a6, 0 0 0 1px #d0a06228;
}

.showcase-drop-rule span,
.showcase-drop-rule strong,
.showcase-drop-rule p {
  position: relative;
  z-index: 1;
}

.showcase-drop-rule span {
  display: block;
  color: #f0bf79;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-drop-rule strong {
  display: block;
  margin: 0.35rem 0 0.55rem;
  color: #ffe0ad;
  font-family: "Cinzel", serif;
  font-size: clamp(3.7rem, 7vw, 6.2rem);
  font-weight: 900;
  line-height: 0.95;
  text-shadow: 0 10px 28px #090604d8, 0 0 28px #d0a06273;
}

.showcase-drop-rule p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.92rem, 1.35vw, 1.06rem);
  line-height: 1.65;
}

.showcase-drop-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid #6f4b36;
  border-left: 4px solid #b98552;
  border-radius: 14px;
  background:
    radial-gradient(240px 120px at 100% 0%, #b985521f, transparent 72%),
    linear-gradient(180deg, #221b18d8 0%, #16100dea 100%);
  box-shadow: inset 0 0 18px #f2c27d08, 0 14px 28px #09060473;
  padding: clamp(0.85rem, 1.5vw, 1.05rem);
}

.showcase-drop-note strong {
  display: block;
  margin-bottom: 0.22rem;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.showcase-drop-note p {
  margin: 0;
  color: #f0d5b7;
  font-size: clamp(0.94rem, 1.35vw, 1.06rem);
  line-height: 1.65;
}

.showcase-drop-icon-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.45rem;
  padding: 0.42rem;
  border: 1px solid #8d5c3c;
  border-radius: 12px;
  background:
    radial-gradient(70px 44px at 50% 45%, #d0a06224, transparent 72%),
    #100c0ab8;
  box-shadow: inset 0 0 14px #f2c27d0a;
}

.showcase-item-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #6f4b36;
  border-radius: 8px;
  background: linear-gradient(180deg, #2d241f, #17110e);
  box-shadow: 0 8px 16px #0906047a;
}

.showcase-item-icon.is-muted {
  opacity: 0.58;
  filter: grayscale(0.18);
}

.showcase-item-icon img {
  display: block;
  max-width: 26px;
  max-height: 26px;
  image-rendering: pixelated;
}

.showcase-warrior-card {
  min-height: min(560px, calc(100svh - 5.2rem));
}

.showcase-warrior-layout {
  grid-template-columns: minmax(0, 0.74fr) minmax(480px, 1.16fr);
}

.showcase-warrior-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.showcase-warrior-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(80px 46px at 22% 50%, #d0a06226, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.34rem 0.85rem 0.34rem 0.34rem;
  text-transform: uppercase;
}

.showcase-warrior-portrait img {
  width: 34px;
  height: 34px;
  border: 1px solid #d0a06280;
  border-radius: 50%;
  box-shadow: 0 0 14px #d0a0623f;
}

.showcase-warrior-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 190px at 18% 14%, #d0a0621f, transparent 72%),
    radial-gradient(260px 180px at 92% 86%, #5b452b54, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0c, 0 22px 44px #0906048f;
  padding: clamp(1rem, 1.7vw, 1.35rem);
}

.showcase-warrior-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-warrior-change-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.showcase-warrior-change {
  min-height: 280px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 120px at 84% 12%, #e0a7621e, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 16px 30px #09060473;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-warrior-change:hover {
  transform: translateY(-6px) scale(1.014);
  border-color: #d0a062;
  background:
    radial-gradient(210px 140px at 84% 12%, #e0a76230, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 24px 46px #090604a1, 0 0 0 1px #d0a06228;
}

.showcase-warrior-change-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
}

.showcase-warrior-skill-icon {
  width: 54px;
  height: 54px;
  border: 1px solid #d0a0628a;
  border-radius: 12px;
  background:
    radial-gradient(52px 38px at 50% 50%, #f2c27d24, transparent 74%),
    #100c0ad9;
  box-shadow: inset 0 0 12px #f2c27d14, 0 0 18px #d0a0623f;
  image-rendering: pixelated;
  padding: 0.25rem;
}

.showcase-warrior-change-head span {
  display: block;
  color: #f0bf79;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.showcase-warrior-change-head strong {
  display: block;
  margin-top: 0.2rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.24rem, 2vw, 1.65rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 10px 24px #090604d6;
}

.showcase-warrior-change em {
  display: inline-flex;
  margin: 1rem 0 0.65rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #120d0bcf;
  color: #f0bf79;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 0.42rem 0.7rem;
  text-transform: uppercase;
}

.showcase-warrior-change p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.95rem, 1.35vw, 1.06rem);
  line-height: 1.68;
}

.showcase-shaman-card {
  min-height: min(580px, calc(100svh - 5.2rem));
}

.showcase-shaman-layout {
  grid-template-columns: minmax(0, 0.68fr) minmax(520px, 1.22fr);
}

.showcase-shaman-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.showcase-shaman-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(86px 48px at 22% 50%, #d0a06228, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.34rem 0.85rem 0.34rem 0.34rem;
  text-transform: uppercase;
}

.showcase-shaman-portrait img {
  width: 34px;
  height: 34px;
  border: 1px solid #d0a06280;
  border-radius: 50%;
  box-shadow: 0 0 14px #d0a0623f;
}

.showcase-class-note-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.showcase-class-note {
  border: 1px solid #76503a;
  border-left: 3px solid #d0a062;
  border-radius: 7px;
  background:
    radial-gradient(150px 80px at 92% 0%, #d0a0621c, transparent 72%),
    linear-gradient(155deg, #251b16e8 0%, #120d0be8 100%);
  box-shadow: inset 0 0 16px #f2c27d08;
  padding: 0.58rem 0.7rem;
}

.showcase-class-note strong,
.showcase-class-note span {
  display: block;
}

.showcase-class-note strong {
  color: #efbc78;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.7rem, 0.9vw, 0.78rem);
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.showcase-class-note span {
  margin-top: 0.24rem;
  color: #e8ccb0;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.42;
}

.showcase-shaman-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.82rem, 1.25vw, 1.05rem);
}

.showcase-shaman-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-shaman-change-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.showcase-shaman-change {
  min-height: 192px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 120px at 84% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 16px 30px #09060473;
  padding: clamp(0.78rem, 1.15vw, 0.95rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-shaman-change-wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.showcase-shaman-shield-card {
  display: grid;
  grid-template-columns: minmax(250px, 0.96fr) minmax(250px, 1.04fr);
  gap: 0.65rem;
  align-items: center;
}

.showcase-shaman-change:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 24px 46px #090604a1, 0 0 0 1px #d0a06228;
}

.showcase-shaman-change-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.showcase-shaman-skill-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #d0a0628a;
  border-radius: 12px;
  background:
    radial-gradient(52px 38px at 50% 50%, #f2c27d24, transparent 74%),
    #100c0ad9;
  box-shadow: inset 0 0 12px #f2c27d14, 0 0 18px #d0a0623f;
  image-rendering: pixelated;
  padding: 0.25rem;
}

.showcase-shaman-change-head span {
  display: block;
  color: #f0bf79;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.showcase-shaman-change-head strong {
  display: block;
  margin-top: 0.2rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.14rem, 1.75vw, 1.46rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 10px 24px #090604d6;
}

.showcase-shaman-change em {
  display: inline-flex;
  margin: 0.62rem 0 0.42rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #120d0bcf;
  color: #f0bf79;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 0.32rem 0.56rem;
  text-transform: uppercase;
}

.showcase-shaman-change p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.84rem, 1.02vw, 0.94rem);
  line-height: 1.48;
}

.showcase-shaman-shield-preview {
  display: grid;
  grid-template-columns: minmax(150px, 0.88fr) minmax(190px, 1.12fr);
  gap: 0.6rem;
  margin-top: 0;
}

.showcase-shaman-shield-preview .showcase-media {
  margin: 0;
  border-radius: 13px;
  border-color: #8d5c3c;
  background:
    radial-gradient(180px 120px at 50% 45%, #5b452b33, transparent 72%),
    #100c0a;
}

.showcase-shaman-shield-preview img {
  width: 100%;
  object-fit: cover;
}

.showcase-shaman-shield-aura img {
  aspect-ratio: 16 / 8.2;
  object-position: center 42%;
}

.showcase-shaman-shield-bar img {
  aspect-ratio: 16 / 8.2;
  object-fit: contain;
  padding: 0.28rem;
}

.showcase-shaman-shield-preview figcaption {
  font-size: 0.58rem;
  min-height: 1.55rem;
  padding: 0.32rem 0.46rem;
}

.showcase-ninja-card {
  min-height: min(590px, calc(100svh - 5.2rem));
}

.showcase-ninja-layout {
  grid-template-columns: minmax(0, 0.68fr) minmax(520px, 1.22fr);
}

.showcase-ninja-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.showcase-ninja-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(86px 48px at 22% 50%, #d0a06228, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.34rem 0.85rem 0.34rem 0.34rem;
  text-transform: uppercase;
}

.showcase-ninja-portrait img {
  width: 34px;
  height: 34px;
  border: 1px solid #d0a06280;
  border-radius: 50%;
  box-shadow: 0 0 14px #d0a0623f;
}

.showcase-ninja-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.85rem, 1.45vw, 1.1rem);
}

.showcase-ninja-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-ninja-preview {
  position: relative;
  z-index: 1;
  margin-bottom: 0.85rem;
}

.showcase-ninja-preview img {
  min-height: 0;
  height: clamp(190px, 28vh, 250px);
  aspect-ratio: 16 / 8.6;
}

.showcase-ninja-change-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.showcase-ninja-change {
  min-height: 224px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 120px at 84% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 16px 30px #09060473;
  padding: clamp(0.9rem, 1.35vw, 1.05rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-ninja-change:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 24px 46px #090604a1, 0 0 0 1px #d0a06228;
}

.showcase-ninja-change-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.showcase-ninja-skill-icon {
  width: 52px;
  height: 52px;
  border: 1px solid #d0a0628a;
  border-radius: 12px;
  background:
    radial-gradient(52px 38px at 50% 50%, #f2c27d24, transparent 74%),
    #100c0ad9;
  box-shadow: inset 0 0 12px #f2c27d14, 0 0 18px #d0a0623f;
  image-rendering: pixelated;
  padding: 0.25rem;
}

.showcase-ninja-change-head span {
  display: block;
  color: #f0bf79;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.showcase-ninja-change-head strong {
  display: block;
  margin-top: 0.2rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.14rem, 1.75vw, 1.46rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 10px 24px #090604d6;
}

.showcase-ninja-change em {
  display: inline-flex;
  margin: 0.85rem 0 0.55rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #120d0bcf;
  color: #f0bf79;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 0.38rem 0.64rem;
  text-transform: uppercase;
}

.showcase-ninja-change p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.62;
}

.showcase-sura-card {
  min-height: min(590px, calc(100svh - 5.2rem));
}

.showcase-sura-layout {
  grid-template-columns: minmax(0, 0.66fr) minmax(540px, 1.24fr);
}

.showcase-sura-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.showcase-sura-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(86px 48px at 22% 50%, #d0a06228, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.34rem 0.85rem 0.34rem 0.34rem;
  text-transform: uppercase;
}

.showcase-sura-portrait img {
  width: 34px;
  height: 34px;
  border: 1px solid #d0a06280;
  border-radius: 50%;
  box-shadow: 0 0 14px #d0a0623f;
}

.showcase-sura-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.68rem, 1vw, 0.8rem);
}

.showcase-sura-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-sura-spirit-row,
.showcase-sura-target-grid {
  position: relative;
  z-index: 1;
}

.showcase-sura-spirit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}

.showcase-sura-spirit-tier {
  min-height: 154px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(150px 100px at 80% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 26px #09060470;
  padding: clamp(0.62rem, 1vw, 0.78rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-sura-spirit-tier:hover,
.showcase-sura-target-card:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: #d0a062;
  box-shadow: inset 0 0 28px #f2c27d14, 0 24px 46px #090604a1, 0 0 0 1px #d0a06228;
}

.showcase-sura-spirit-tier-prime {
  border-color: #b98552;
  background:
    radial-gradient(180px 120px at 80% 12%, #f0bf7934, transparent 74%),
    linear-gradient(160deg, #3a2a20ec 0%, #1a130ff4 100%);
}

.showcase-sura-skill-icon {
  width: 44px;
  height: 44px;
  border: 1px solid #d0a0628a;
  border-radius: 12px;
  background:
    radial-gradient(52px 38px at 50% 50%, #f2c27d24, transparent 74%),
    #100c0ad9;
  box-shadow: inset 0 0 12px #f2c27d14, 0 0 18px #d0a0623f;
  image-rendering: pixelated;
  padding: 0.25rem;
}

.showcase-sura-spirit-tier span,
.showcase-sura-target-card span {
  display: block;
  margin-top: 0.5rem;
  color: #f0bf79;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-sura-spirit-tier strong,
.showcase-sura-target-card strong {
  display: block;
  margin-top: 0.22rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.2rem, 1.8vw, 1.52rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 10px 24px #090604d6;
}

.showcase-sura-spirit-tier p {
  margin: 0.4rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.84rem, 1.05vw, 0.95rem);
  line-height: 1.5;
}

.showcase-sura-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-top: 0.62rem;
}

.showcase-sura-target-card {
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 120px at 84% 12%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 26px #09060470;
  padding: clamp(0.66rem, 1vw, 0.82rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-sura-target-card span {
  margin-top: 0;
}

.showcase-sura-target-card ul {
  display: grid;
  gap: 0.26rem;
  margin: 0.46rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-sura-target-card li {
  position: relative;
  color: #ead0ad;
  font-size: clamp(0.86rem, 1.05vw, 0.96rem);
  line-height: 1.45;
  padding-left: 1rem;
}

.showcase-sura-target-card-wide {
  grid-column: 1 / -1;
}

.showcase-sura-target-card-wide ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.85rem;
}

.showcase-sura-preview {
  position: relative;
  z-index: 1;
  margin-top: 0.62rem;
}

.showcase-sura-preview img {
  min-height: 0;
  height: clamp(90px, 13vh, 115px);
  aspect-ratio: 16 / 7.2;
}

.showcase-craft-card {
  min-height: min(590px, calc(100svh - 5.2rem));
}

.showcase-craft-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.18fr);
}

.showcase-craft-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.showcase-craft-flow-step {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 92px;
  border: 1px solid #7c543d;
  border-radius: 14px;
  background:
    radial-gradient(130px 80px at 50% 16%, #d0a06224, transparent 74%),
    linear-gradient(180deg, #2b221de6 0%, #17110ef0 100%);
  box-shadow: inset 0 0 18px #f2c27d0c, 0 12px 24px #0906046f;
  padding: 0.68rem;
  text-align: center;
}

.showcase-craft-flow-step span {
  color: #f0bf79;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-craft-flow-step strong {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 8px 18px #090604d6;
}

.showcase-craft-flow-item img {
  width: 34px;
  height: 34px;
  margin-bottom: 0.42rem;
  border: 1px solid #d0a06280;
  border-radius: 8px;
  background: #100c0ad9;
  box-shadow: inset 0 0 10px #f2c27d12, 0 0 14px #d0a06238;
  image-rendering: pixelated;
  padding: 0.18rem;
}

.showcase-craft-flow-arrow {
  display: grid;
  place-items: center;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 1.4rem;
  font-weight: 900;
  text-shadow: 0 0 18px #d0a06270;
}

.showcase-craft-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.85rem, 1.35vw, 1.05rem);
}

.showcase-craft-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-craft-gallery,
.showcase-craft-preview,
.showcase-craft-note-grid {
  position: relative;
  z-index: 1;
}

.showcase-craft-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.showcase-craft-preview-main {
  grid-column: 1 / -1;
}

.showcase-craft-preview img {
  min-height: 0;
  height: clamp(118px, 17vh, 142px);
  aspect-ratio: 16 / 9.35;
}

.showcase-craft-preview-main img {
  height: clamp(205px, 29vh, 250px);
}

.showcase-craft-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-top: 0.62rem;
}

.showcase-craft-note {
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(150px 90px at 86% 10%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.66rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-craft-note:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: #d0a062;
  box-shadow: inset 0 0 26px #f2c27d13, 0 20px 38px #09060494, 0 0 0 1px #d0a06228;
}

.showcase-craft-note span {
  display: block;
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-craft-note strong {
  display: block;
  margin-top: 0.24rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 900;
}

.showcase-craft-note p {
  margin: 0.34rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  line-height: 1.42;
}

.showcase-routes-card {
  min-height: min(590px, calc(100svh - 5.2rem));
}

.showcase-routes-layout {
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.04fr);
}

.showcase-routes-source-list {
  display: grid;
  gap: 0.62rem;
  margin-top: 1.1rem;
}

.showcase-routes-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(160px 90px at 92% 12%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.62rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-routes-source:hover,
.showcase-routes-recipe:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  box-shadow: inset 0 0 26px #f2c27d13, 0 20px 38px #09060494, 0 0 0 1px #d0a06228;
}

.showcase-routes-source img,
.showcase-routes-ingredients img,
.showcase-routes-recipe strong img {
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid #d0a06280;
  border-radius: 8px;
  background: #100c0ad9;
  box-shadow: inset 0 0 10px #f2c27d12, 0 0 14px #d0a06238;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.12rem;
}

.showcase-routes-source strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 900;
  line-height: 1.05;
}

.showcase-routes-source span {
  display: block;
  margin-top: 0.22rem;
  color: #ead0ad;
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.38;
}

.showcase-routes-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.85rem, 1.35vw, 1.05rem);
}

.showcase-routes-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-routes-recipe-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.showcase-routes-recipe {
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 110px at 84% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 26px #09060470;
  padding: 0.82rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-routes-recipe-wide {
  grid-column: 1 / -1;
}

.showcase-routes-recipe > span {
  display: block;
  color: #f0bf79;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-routes-ingredients {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.8rem 0;
  border: 1px solid #5f4636;
  border-radius: 13px;
  background: #100c0aa8;
  padding: 0.5rem;
}

.showcase-routes-ingredients b {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  font-weight: 900;
  text-shadow: 0 0 12px #d0a06260;
}

.showcase-routes-recipe strong {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 900;
}

.showcase-routes-recipe p {
  margin: 0.55rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  line-height: 1.42;
}

.showcase-crafting-hub-card {
  min-height: min(610px, calc(100svh - 5rem));
}

.showcase-crafting-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(560px, 1.24fr);
  gap: clamp(0.95rem, 2vw, 1.35rem);
  align-items: center;
}

.showcase-crafting-hub-copy h2 {
  margin-top: 0.45rem;
  text-transform: uppercase;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.showcase-crafting-hub-copy p {
  color: #ead0ad;
  font-size: clamp(0.92rem, 1.2vw, 1rem);
  line-height: 1.55;
}

.showcase-crafting-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.showcase-crafting-source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
  border: 1px solid #72513b;
  border-radius: 13px;
  background:
    radial-gradient(150px 86px at 92% 12%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 16px #f2c27d0a, 0 10px 20px #09060466;
  padding: 0.54rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-crafting-source-card:hover,
.showcase-crafting-recipe-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: #d0a062;
  box-shadow: inset 0 0 24px #f2c27d13, 0 18px 34px #09060494, 0 0 0 1px #d0a06228;
}

.showcase-crafting-source-card img,
.showcase-crafting-icons img {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid #d0a06280;
  border-radius: 8px;
  background: #100c0ad9;
  box-shadow: inset 0 0 10px #f2c27d12, 0 0 14px #d0a06238;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.1rem;
}

.showcase-crafting-source-card strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.92rem, 1.1vw, 1.04rem);
  font-weight: 900;
  line-height: 1.05;
}

.showcase-crafting-source-card span {
  display: block;
  margin-top: 0.18rem;
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
  line-height: 1.3;
}

.showcase-crafting-hub-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(340px 210px at 14% 12%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.72rem, 1.15vw, 0.92rem);
}

.showcase-crafting-hub-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-crafting-gallery,
.showcase-crafting-recipe-grid {
  position: relative;
  z-index: 1;
}

.showcase-crafting-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.showcase-crafting-shot-main {
  grid-column: 1 / -1;
}

.showcase-crafting-shot img {
  min-height: 0;
  height: clamp(92px, 13vh, 112px);
  aspect-ratio: 16 / 9.35;
}

.showcase-crafting-shot-main img {
  height: clamp(170px, 24vh, 205px);
}

.showcase-crafting-recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.showcase-crafting-recipe-card {
  border: 1px solid #72513b;
  border-radius: 13px;
  background:
    radial-gradient(150px 86px at 88% 10%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 16px #f2c27d0a, 0 10px 20px #09060466;
  padding: 0.58rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-crafting-recipe-card-wide {
  grid-column: 1 / -1;
}

.showcase-sprint-card {
  justify-self: center;
  width: min(900px, calc(100vw - 390px));
  min-height: min(540px, calc(100svh - 5.2rem));
  margin-left: 0;
}

.showcase-sprint-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(430px, 1.24fr);
  gap: clamp(0.95rem, 1.65vw, 1.18rem);
  align-items: center;
}

.showcase-sprint-copy {
  align-self: stretch;
}

.showcase-sprint-title-row {
  display: flex;
  align-items: center;
  gap: clamp(0.68rem, 1vw, 0.82rem);
  margin-top: 0.45rem;
}

.showcase-sprint-title-row img {
  width: clamp(38px, 3.5vw, 48px);
  height: clamp(38px, 3.5vw, 48px);
  border: 1px solid #d0a062a3;
  border-radius: 11px;
  background: linear-gradient(180deg, #2b221de8, #100c0ad9);
  box-shadow: inset 0 0 12px #f2c27d17, 0 0 20px #d0a06242;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.2rem;
}

.showcase-sprint-title-row h2 {
  margin: 0;
  text-transform: uppercase;
}

.showcase-sprint-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  margin-top: 0.82rem;
  border: 1px solid #8d5c3c;
  border-radius: 13px;
  background:
    radial-gradient(150px 86px at 20% 20%, #e0a76225, transparent 72%),
    linear-gradient(145deg, #2d231edf 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0d, 0 12px 24px #09060478;
  padding: 0.62rem;
}

.showcase-sprint-key span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 36px;
  border: 1px solid #d0a062;
  border-radius: 9px;
  background: linear-gradient(180deg, #5b452b 0%, #2a1b13 100%);
  color: #ffe3b0;
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: 0.13em;
  box-shadow: inset 0 0 12px #f2c27d21, 0 0 18px #d0a06242;
}

.showcase-sprint-key strong {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.94rem, 1.18vw, 1.08rem);
  line-height: 1.28;
  text-transform: uppercase;
}

.showcase-sprint-points {
  display: grid;
  gap: 0.42rem;
  margin: 0.72rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-sprint-points li {
  border: 1px solid #6f4b367a;
  border-left: 3px solid #b98552;
  border-radius: 10px;
  background: linear-gradient(180deg, #221b18c2, #16100dd4);
  color: #f0d5b7;
  font-size: clamp(0.74rem, 0.86vw, 0.82rem);
  line-height: 1.32;
  box-shadow: inset 0 0 12px #f2c27d06;
  padding: 0.46rem 0.62rem;
}

.showcase-sprint-panel {
  display: grid;
  gap: 0.62rem;
  min-width: 0;
}

.showcase-sprint-preview {
  margin: 0;
  border-color: #8d5c3c;
  box-shadow: 0 20px 40px #09060499, 0 0 0 1px #d0a06224;
}

.showcase-sprint-preview img {
  aspect-ratio: 16 / 8.15;
  min-height: 0;
  height: clamp(174px, 25vh, 228px);
  object-position: center;
}

.showcase-sprint-preview figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.52rem 0.65rem;
  background: linear-gradient(180deg, transparent, #100607e8);
  color: #ffd2a6;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-sprint-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.showcase-sprint-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  align-items: center;
  column-gap: 0.48rem;
  row-gap: 0.12rem;
  border: 1px solid #72513b;
  border-radius: 12px;
  background:
    radial-gradient(120px 70px at 90% 15%, #e0a7621f, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 16px #f2c27d0a, 0 10px 20px #09060466;
  padding: 0.52rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.showcase-sprint-feature:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: #d0a062;
  box-shadow: inset 0 0 24px #f2c27d13, 0 18px 34px #09060494, 0 0 0 1px #d0a06228;
}

.showcase-sprint-feature img {
  grid-area: icon;
  width: 30px;
  height: 30px;
  border: 1px solid #d0a06280;
  border-radius: 8px;
  background: #100c0ad9;
  box-shadow: inset 0 0 10px #f2c27d12, 0 0 14px #d0a06238;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.1rem;
}

.showcase-sprint-feature strong {
  grid-area: title;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.82rem, 0.95vw, 0.94rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.showcase-sprint-feature span {
  grid-area: text;
  color: #ead0ad;
  font-size: clamp(0.66rem, 0.76vw, 0.73rem);
  line-height: 1.22;
}

.showcase-crafting-recipe-card span {
  display: block;
  color: #f0bf79;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}



.showcase-biologist-card {
  min-height: min(610px, calc(100svh - 5rem));
}

.showcase-biologist-layout {
  grid-template-columns: minmax(0, 0.62fr) minmax(620px, 1.38fr);
  gap: clamp(0.95rem, 1.85vw, 1.3rem);
}

.showcase-biologist-copy p:not(.showcase-tag) {
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 1.56;
}

.showcase-biologist-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
  margin-top: 1rem;
}

.showcase-biologist-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(86px 48px at 22% 50%, #d0a06228, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 0.3rem 0.78rem;
  text-transform: uppercase;
}

.showcase-biologist-npc-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.82rem;
  align-items: center;
  margin-top: 1rem;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(160px 120px at 16% 18%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe0 0%, #17110eea 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 16px 30px #09060473;
  padding: 0.75rem;
}

.showcase-biologist-npc-card img {
  width: clamp(70px, 6.5vw, 96px);
  height: clamp(120px, 11vw, 156px);
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 18px #090604aa);
}

.showcase-biologist-npc-card strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.22vw, 1.16rem);
  font-weight: 900;
  line-height: 1.08;
}

.showcase-biologist-npc-card p {
  margin: 0.45rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.88vw, 0.82rem);
  line-height: 1.36;
}

.showcase-biologist-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.65rem, 1.1vw, 0.85rem);
}

.showcase-biologist-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-biologist-table,
.showcase-biologist-note {
  position: relative;
  z-index: 1;
}

.showcase-biologist-table {
  display: grid;
  gap: 0.36rem;
}

.showcase-biologist-row {
  display: grid;
  grid-template-columns: 52px minmax(190px, 1.1fr) minmax(220px, 1.25fr);
  gap: 0.55rem;
  align-items: center;
  border: 1px solid #72513b;
  border-radius: 11px;
  background: linear-gradient(160deg, #2a211ddb 0%, #15100ee8 100%);
  box-shadow: inset 0 0 12px #f2c27d08, 0 8px 16px #0906044f;
  color: #ead0ad;
  font-size: clamp(0.68rem, 0.82vw, 0.76rem);
  line-height: 1.18;
  padding: 0.36rem 0.48rem;
}

.showcase-biologist-head {
  border-color: #8d5c3c;
  background: linear-gradient(180deg, #4a3225e8 0%, #221813f0 100%);
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.showcase-biologist-row > span:first-child {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.92rem, 1.1vw, 1.04rem);
  font-weight: 900;
  text-align: center;
}

.showcase-biologist-head > span:first-child {
  color: #f0bf79;
  font-family: inherit;
  font-size: inherit;
}

.showcase-biologist-row span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.showcase-biologist-row img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid #d0a06266;
  border-radius: 6px;
  background: #100c0ad9;
  box-shadow: inset 0 0 8px #f2c27d10, 0 0 12px #d0a06225;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.08rem;
}

.showcase-biologist-row span:nth-child(3) {
  color: #fff1d2;
  font-weight: 800;
}

.showcase-biologist-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  margin-top: 0.62rem;
  border: 1px solid #8d5c3c;
  border-radius: 13px;
  background:
    radial-gradient(160px 90px at 18% 22%, #e0a76226, transparent 72%),
    linear-gradient(145deg, #2d231edf 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0d, 0 12px 24px #09060478;
  padding: 0.62rem 0.72rem;
}

.showcase-biologist-note strong {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.showcase-biologist-note span {
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
  line-height: 1.32;
}

.showcase-language-card {
  min-height: min(560px, calc(100svh - 5.2rem));
}

.showcase-language-layout {
  grid-template-columns: minmax(0, 0.7fr) minmax(520px, 1.3fr);
}

.showcase-language-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.showcase-language-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid #7c543d;
  border-radius: 999px;
  background:
    radial-gradient(86px 48px at 22% 50%, #d0a06228, transparent 74%),
    linear-gradient(180deg, #2b221ddc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 22px #09060466;
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 0.34rem 0.95rem;
  text-transform: uppercase;
}

.showcase-language-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.85rem, 1.45vw, 1.1rem);
}

.showcase-language-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-language-book-row,
.showcase-language-flow {
  position: relative;
  z-index: 1;
}

.showcase-language-book-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.showcase-language-book-card {
  min-height: 220px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 120px at 84% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 16px 30px #09060473;
  text-align: center;
  padding: clamp(0.9rem, 1.35vw, 1.05rem);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-language-book-card:hover,
.showcase-language-step:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 24px 46px #090604a1, 0 0 0 1px #d0a06228;
}

.showcase-language-book-card img {
  display: block;
  width: clamp(78px, 7.5vw, 104px);
  height: clamp(78px, 7.5vw, 104px);
  margin: 0 auto 0.78rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px #090604aa);
}

.showcase-language-book-card strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 900;
  line-height: 1.1;
}

.showcase-language-book-card span {
  display: block;
  margin-top: 0.55rem;
  color: #ead0ad;
  font-size: clamp(0.78rem, 0.92vw, 0.86rem);
  line-height: 1.34;
}

.showcase-language-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: stretch;
  margin-top: 0.85rem;
}

.showcase-language-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.78rem;
  align-items: center;
  border: 1px solid #72513b;
  border-radius: 15px;
  background:
    radial-gradient(160px 100px at 88% 14%, #e0a7621f, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.78rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-language-step img {
  width: 46px;
  height: 46px;
  border: 1px solid #d0a0628a;
  border-radius: 12px;
  background:
    radial-gradient(52px 38px at 50% 50%, #f2c27d24, transparent 74%),
    #100c0ad9;
  box-shadow: inset 0 0 12px #f2c27d14, 0 0 18px #d0a0623f;
  image-rendering: pixelated;
  object-fit: contain;
  padding: 0.22rem;
}

.showcase-language-step strong {
  display: block;
  color: #f0bf79;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.showcase-language-step p {
  margin: 0.25rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
  line-height: 1.32;
}

.showcase-language-arrow {
  display: grid;
  place-items: center;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 900;
  text-shadow: 0 0 18px #d0a06265;
}

.showcase-potion-card {
  min-height: min(580px, calc(100svh - 5.2rem));
}

.showcase-potion-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(560px, 1.28fr);
}

.showcase-potion-copy p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.52;
}

.showcase-potion-quest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.85rem;
  border: 1px solid #7c543d;
  border-radius: 16px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.62rem;
}

.showcase-potion-quest img {
  width: 62px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px #09060499);
}

.showcase-potion-quest span {
  display: block;
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-potion-quest strong {
  display: block;
  margin-top: 0.18rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 900;
}

.showcase-potion-quest p {
  margin: 0.28rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.75rem, 0.84vw, 0.82rem);
  line-height: 1.28;
}

.showcase-potion-notes {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.68rem;
}

.showcase-potion-notes span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 800;
  line-height: 1.28;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
}

.showcase-potion-notes span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-potion-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-potion-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-potion-media,
.showcase-potion-elixirs,
.showcase-potion-flow {
  position: relative;
  z-index: 1;
}

.showcase-potion-media {
  margin: 0;
}

.showcase-potion-media img {
  width: 100%;
  aspect-ratio: 16 / 7.2;
  object-fit: cover;
  object-position: center 47%;
}

.showcase-potion-elixirs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.58rem;
}

.showcase-potion-elixirs span {
  display: grid;
  justify-items: center;
  gap: 0.24rem;
  border: 1px solid #72513b;
  border-radius: 12px;
  background:
    radial-gradient(68px 42px at 50% 18%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 20px #0906045c;
  color: #f2d2aa;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  min-height: 62px;
  padding: 0.42rem 0.28rem 0.34rem;
  text-transform: uppercase;
}

.showcase-potion-elixirs img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px #d0a06252);
}

.showcase-potion-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-potion-flow div {
  min-height: 116px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-potion-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-potion-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.88rem, 1.12vw, 1rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-potion-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.34;
}

.showcase-fishing-card {
  justify-self: center;
  width: min(860px, calc(100vw - 420px));
  min-height: min(580px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-fishing-layout {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
}

.showcase-fishing-copy p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.52;
}

.showcase-fishing-quest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.78rem;
  border: 1px solid #7c543d;
  border-radius: 16px;
  background:
    radial-gradient(180px 110px at 12% 28%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.58rem;
}

.showcase-fishing-quest img {
  width: 62px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px #09060499);
}

.showcase-fishing-quest span {
  display: block;
  color: #f0bf79;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-fishing-quest strong {
  display: block;
  margin-top: 0.18rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 900;
}

.showcase-fishing-quest p {
  margin: 0.28rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.75rem, 0.84vw, 0.82rem);
  line-height: 1.28;
}

.showcase-fishing-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  margin-top: 0.66rem;
}

.showcase-fishing-items span {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  border: 1px solid #72513b;
  border-radius: 13px;
  background:
    radial-gradient(78px 46px at 50% 18%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 14px #f2c27d0a, 0 10px 20px #0906045c;
  color: #f2d2aa;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  min-height: 64px;
  padding: 0.48rem 0.34rem 0.38rem;
  text-align: center;
  text-transform: uppercase;
}

.showcase-fishing-items img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px #d0a06252);
}

.showcase-fishing-items span:first-child img {
  height: 40px;
  image-rendering: auto;
}

.showcase-fishing-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-fishing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-fishing-media,
.showcase-fishing-flow,
.showcase-fishing-value {
  position: relative;
  z-index: 1;
}

.showcase-fishing-media {
  margin: 0;
}

.showcase-fishing-media img {
  width: 100%;
  aspect-ratio: 16 / 7.15;
  object-fit: cover;
  object-position: center 50%;
}

.showcase-fishing-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-fishing-flow div {
  min-height: 124px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-fishing-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-fishing-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-fishing-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-fishing-value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  margin-top: 0.58rem;
  border: 1px solid #8d5c3c;
  border-left-color: #d0a062;
  border-radius: 14px;
  background:
    radial-gradient(180px 80px at 12% 50%, #d0a06224, transparent 74%),
    linear-gradient(180deg, #261d19cf, #17110edb);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 22px #09060458;
  padding: 0.62rem 0.72rem;
}

.showcase-fishing-value strong {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  font-weight: 900;
  line-height: 1.1;
}

.showcase-fishing-value span {
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-qol-card {
  justify-self: center;
  width: min(860px, calc(100vw - 420px));
  min-height: min(580px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-qol-layout {
  grid-template-columns: minmax(0, 0.78fr) minmax(470px, 1.22fr);
}

.showcase-qol-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-qol-badges {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.showcase-qol-badges span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #f2d2aa;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.72px;
  line-height: 1.25;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
  text-transform: uppercase;
}

.showcase-qol-badges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-qol-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.62rem;
}

.showcase-qol-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-qol-copy .showcase-qol-note p:not(.showcase-tag) {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-qol-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-qol-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-qol-gallery,
.showcase-qol-flow {
  position: relative;
  z-index: 1;
}

.showcase-qol-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 0.58rem;
}

.showcase-qol-media {
  margin: 0;
}

.showcase-qol-media img {
  width: 100%;
  height: clamp(270px, 42vh, 350px);
  object-fit: contain;
  object-position: center bottom;
  background:
    radial-gradient(160px 140px at 50% 40%, #d0a06218, transparent 72%),
    #100c0a;
}

.showcase-qol-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-qol-flow div {
  min-height: 118px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-qol-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-qol-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-qol-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-offline-card {
  justify-self: center;
  width: min(900px, calc(100vw - 400px));
  min-height: min(580px, calc(100svh - 5.2rem));
  margin-right: 165px;
}

.showcase-offline-layout {
  grid-template-columns: minmax(0, 0.74fr) minmax(500px, 1.26fr);
}

.showcase-offline-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-offline-badges {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.showcase-offline-badges span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #f2d2aa;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.72px;
  line-height: 1.25;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
  text-transform: uppercase;
}

.showcase-offline-badges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-offline-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.68rem;
}

.showcase-offline-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-offline-copy .showcase-offline-note p:not(.showcase-tag) {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-offline-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-offline-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-offline-media,
.showcase-offline-flow {
  position: relative;
  z-index: 1;
}

.showcase-offline-media {
  margin: 0;
}

.showcase-offline-media img {
  width: 100%;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center 47%;
}

.showcase-offline-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-offline-flow div {
  min-height: 116px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-offline-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-offline-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-offline-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-shopsearch-card {
  justify-self: center;
  width: min(890px, calc(100vw - 400px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 180px;
}

.showcase-shopsearch-layout {
  grid-template-columns: minmax(285px, 0.9fr) minmax(440px, 1.1fr);
}

.showcase-shopsearch-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-shopsearch-badges {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.showcase-shopsearch-badges span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #f2d2aa;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.72px;
  line-height: 1.25;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
  text-transform: uppercase;
}

.showcase-shopsearch-badges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-shopsearch-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.68rem;
}

.showcase-shopsearch-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-shopsearch-copy .showcase-shopsearch-note p:not(.showcase-tag) {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-shopsearch-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-shopsearch-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-shopsearch-media,
.showcase-shopsearch-flow {
  position: relative;
  z-index: 1;
}

.showcase-shopsearch-media {
  margin: 0;
}

.showcase-shopsearch-media img {
  width: 100%;
  aspect-ratio: 16 / 8.1;
  object-fit: cover;
  object-position: center 50%;
}

.showcase-shopsearch-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-shopsearch-flow div {
  min-height: 108px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-shopsearch-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-shopsearch-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-shopsearch-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-character-sale-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-character-sale-layout {
  grid-template-columns: minmax(330px, 0.82fr) minmax(490px, 1.18fr);
}

.showcase-character-sale-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.88rem, 1.08vw, 0.98rem);
  line-height: 1.5;
}

.showcase-character-sale-focus {
  margin-top: 0.82rem;
  border: 1px solid #8d5c3c;
  border-left-color: #f0bf79;
  border-radius: 16px;
  background:
    radial-gradient(220px 120px at 16% 24%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #33271fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 24px #f2c27d10, 0 16px 30px #09060478;
  padding: 0.78rem;
}

.showcase-character-sale-focus span,
.showcase-character-sale-core span {
  display: inline-flex;
  margin-bottom: 0.48rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-character-sale-focus strong,
.showcase-character-sale-core strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.28vw, 1.14rem);
  font-weight: 900;
  line-height: 1.14;
}

.showcase-character-sale-focus p,
.showcase-character-sale-core p {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.82vw, 0.78rem);
  line-height: 1.32;
}

.showcase-character-sale-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-character-sale-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-character-sale-core,
.showcase-character-sale-grid,
.showcase-character-sale-note {
  position: relative;
  z-index: 1;
}

.showcase-character-sale-media {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  border-radius: 16px;
}

.showcase-character-sale-media img {
  width: 100%;
  height: clamp(160px, 20svh, 198px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(220px 130px at 50% 24%, #d0a06218, transparent 70%),
    linear-gradient(180deg, #120d0b 0%, #080604 100%);
}

.showcase-character-sale-core {
  min-height: 92px;
  border: 1px solid #d0a062;
  border-radius: 16px;
  background:
    radial-gradient(260px 130px at 50% 10%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #3a2a20eb 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.58rem;
}

.showcase-character-sale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.42rem;
}

.showcase-character-sale-grid div {
  min-height: 72px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.5rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-character-sale-grid div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-character-sale-grid strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.72rem, 0.86vw, 0.82rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-character-sale-grid p {
  margin: 0.26rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.62rem, 0.7vw, 0.68rem);
  line-height: 1.22;
}

.showcase-character-sale-note {
  margin-top: 0.42rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(220px 110px at 10% 28%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.5rem;
}

.showcase-character-sale-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.78rem, 0.94vw, 0.88rem);
  font-weight: 900;
}

.showcase-character-sale-note p {
  margin: 0.22rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem);
  line-height: 1.22;
}

.showcase-weaponstr-card {
  justify-self: center;
  width: min(880px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 165px;
}

.showcase-weaponstr-layout {
  grid-template-columns: minmax(300px, 0.84fr) minmax(460px, 1.16fr);
}

.showcase-weaponstr-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-weaponstr-badges {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.showcase-weaponstr-badges span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #f2d2aa;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.72px;
  line-height: 1.25;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
  text-transform: uppercase;
}

.showcase-weaponstr-badges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-weaponstr-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.68rem;
}

.showcase-weaponstr-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-weaponstr-copy .showcase-weaponstr-note p:not(.showcase-tag) {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-weaponstr-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-weaponstr-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-weaponstr-icon-grid,
.showcase-weaponstr-flow {
  position: relative;
  z-index: 1;
}

.showcase-weaponstr-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

.showcase-weaponstr-icon-grid div {
  min-height: 224px;
  border: 1px solid #72513b;
  border-radius: 15px;
  background:
    radial-gradient(170px 90px at 50% 16%, #e0a76222, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.82rem;
  text-align: center;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-weaponstr-icon-grid div:hover,
.showcase-weaponstr-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-weaponstr-icon-grid img {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.68rem;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px #d0a06255);
}

.showcase-weaponstr-icon-grid strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 900;
}

.showcase-weaponstr-icon-grid p {
  margin: 0.5rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.34;
}

.showcase-weaponstr-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-weaponstr-flow div {
  min-height: 112px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-weaponstr-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-weaponstr-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-hunting-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-hunting-layout {
  grid-template-columns: minmax(300px, 0.82fr) minmax(480px, 1.18fr);
}

.showcase-hunting-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-hunting-badges {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.showcase-hunting-badges span {
  position: relative;
  border: 1px solid #6f4b36;
  border-left-color: #d0a062;
  border-radius: 12px;
  background: linear-gradient(180deg, #261d19cf, #17110edb);
  color: #f2d2aa;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  font-weight: 900;
  letter-spacing: 0.72px;
  line-height: 1.25;
  padding: 0.48rem 0.64rem 0.48rem 1.72rem;
  text-transform: uppercase;
}

.showcase-hunting-badges span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 12px #d0a06290;
  transform: translateY(-50%);
}

.showcase-hunting-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(180px 110px at 10% 30%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.68rem;
}

.showcase-hunting-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-hunting-copy .showcase-hunting-note p:not(.showcase-tag) {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-hunting-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(280px 190px at 92% 84%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-hunting-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-hunting-media,
.showcase-hunting-flow {
  position: relative;
  z-index: 1;
}

.showcase-hunting-media {
  border-radius: 16px;
  min-height: 286px;
}

.showcase-hunting-media img {
  width: 100%;
  height: 100%;
  min-height: 286px;
  object-fit: cover;
  object-position: 50% 48%;
}

.showcase-hunting-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-hunting-flow div {
  min-height: 112px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-hunting-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-hunting-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-hunting-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-battlepass-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-battlepass-layout {
  grid-template-columns: minmax(300px, 0.82fr) minmax(500px, 1.18fr);
}

.showcase-battlepass-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.92rem, 1.16vw, 1.04rem);
  line-height: 1.56;
}

.showcase-battlepass-highlight {
  margin-top: 1rem;
  border: 1px solid #8d5c3c;
  border-left-color: #f0bf79;
  border-radius: 18px;
  background:
    radial-gradient(210px 120px at 18% 20%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #33271fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 24px #f2c27d10, 0 16px 30px #09060478;
  padding: 0.88rem;
}

.showcase-battlepass-highlight span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.5rem;
  border: 1px solid #d0a06278;
  border-radius: 999px;
  background: #5b452b8c;
  color: #ffe0ad;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  padding: 0.26rem 0.58rem;
  text-transform: uppercase;
}

.showcase-battlepass-highlight strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-battlepass-highlight p {
  margin: 0.44rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.75rem, 0.86vw, 0.82rem);
  line-height: 1.38;
}

.showcase-battlepass-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 22px;
  background:
    radial-gradient(380px 240px at 18% 10%, #d0a06224, transparent 72%),
    radial-gradient(360px 240px at 92% 86%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 30px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.85rem, 1.25vw, 1rem);
}

.showcase-battlepass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-battlepass-reward {
  position: relative;
  z-index: 1;
  min-height: 148px;
  border: 1px solid #72513b;
  border-radius: 16px;
  background:
    radial-gradient(180px 110px at 86% 12%, #e0a76221, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.86rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-battlepass-reward:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(230px 150px at 84% 12%, #e0a76234, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-battlepass-reward.is-main {
  grid-column: 1 / -1;
  min-height: 132px;
}

.showcase-battlepass-reward span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  border: 1px solid #d0a06270;
  border-radius: 999px;
  background: #080604ba;
  color: #f0bf79;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 0.22rem 0.52rem;
  text-transform: uppercase;
}

.showcase-battlepass-reward strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.9rem, 1.08vw, 1rem);
  font-weight: 900;
  line-height: 1.13;
}

.showcase-battlepass-reward p {
  margin: 0.44rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.34;
}

.showcase-premium-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-premium-layout {
  grid-template-columns: minmax(300px, 0.78fr) minmax(500px, 1.22fr);
}

.showcase-premium-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-premium-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.12rem 0.72rem;
  align-items: center;
  margin-top: 0.72rem;
  border: 1px solid #8d5c3c;
  border-left-color: #f0bf79;
  border-radius: 16px;
  background:
    radial-gradient(190px 110px at 18% 20%, #f0bf7933, transparent 74%),
    linear-gradient(160deg, #33271fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 24px #f2c27d10, 0 16px 30px #09060478;
  padding: 0.72rem;
}

.showcase-premium-highlight span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-width: 78px;
  min-height: 62px;
  border: 1px solid #d0a062;
  border-radius: 14px;
  background: linear-gradient(180deg, #6b482b 0%, #2d2118 100%);
  color: #ffe4ad;
  font-family: "Cinzel", serif;
  font-size: clamp(1.26rem, 2.4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 0 16px #f0bf7975;
}

.showcase-premium-highlight strong {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.32vw, 1.18rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-premium-highlight p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.3;
}

.showcase-premium-highlight.is-exp {
  border-left-color: #d3ef8a;
  background:
    radial-gradient(190px 110px at 18% 20%, #d3ef8a24, transparent 74%),
    linear-gradient(160deg, #30271ee8 0%, #17110ef2 100%);
}

.showcase-premium-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-premium-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-premium-grid,
.showcase-premium-note {
  position: relative;
  z-index: 1;
}

.showcase-premium-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.showcase-premium-grid div {
  min-height: 126px;
  border: 1px solid #72513b;
  border-radius: 15px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.76rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-premium-grid div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-premium-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.48rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-premium-grid strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.88rem, 1.08vw, 1rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-premium-grid p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-premium-note {
  margin-top: 0.58rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(220px 110px at 10% 28%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.72rem;
}

.showcase-premium-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 900;
}

.showcase-premium-note p {
  margin: 0.34rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-client-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-client-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(430px, 1.1fr);
}

.showcase-client-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.86rem, 1.05vw, 0.96rem);
  line-height: 1.46;
}

.showcase-client-copy h2 {
  font-size: clamp(2.45rem, 4.8vw, 4.45rem);
  line-height: 0.95;
}

.showcase-client-rule {
  margin-top: 0.62rem;
  border: 1px solid #765139;
  border-left-color: #d0a062;
  border-radius: 16px;
  background:
    radial-gradient(180px 100px at 16% 20%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.64rem;
}

.showcase-client-rule span {
  display: inline-flex;
  margin-bottom: 0.4rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-client-rule strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-client-rule p {
  margin: 0.34rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.76rem);
  line-height: 1.28;
}

.showcase-client-rule.is-limited {
  border-left-color: #ef9f77;
  background:
    radial-gradient(180px 100px at 16% 20%, #ef9f7725, transparent 72%),
    linear-gradient(160deg, #30231ee8 0%, #17110ef2 100%);
}

.showcase-client-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-client-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-client-diagram,
.showcase-client-note {
  position: relative;
  z-index: 1;
}

.showcase-client-diagram {
  display: grid;
  gap: 0.64rem;
}

.showcase-client-node {
  border: 1px solid #72513b;
  border-radius: 15px;
  background:
    radial-gradient(190px 95px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.8rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-client-node:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-client-node.is-main {
  min-height: 148px;
  border-color: #d0a062;
  background:
    radial-gradient(260px 130px at 50% 10%, #f0bf7933, transparent 74%),
    linear-gradient(160deg, #3a2a20eb 0%, #17110ef2 100%);
  text-align: center;
}

.showcase-client-node-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

.showcase-client-node span {
  display: inline-flex;
  margin-bottom: 0.46rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.18rem 0.48rem;
  text-transform: uppercase;
}

.showcase-client-node strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.9rem, 1.14vw, 1.05rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-client-node.is-main strong {
  font-size: clamp(1.35rem, 2.2vw, 1.92rem);
}

.showcase-client-node p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-client-connector {
  display: grid;
  place-items: center;
  color: #d0a062;
  font-size: 1.2rem;
  line-height: 1;
  text-shadow: 0 0 16px #d0a06280;
}

.showcase-client-note {
  margin-top: 0.68rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(220px 110px at 10% 28%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.72rem;
}

.showcase-client-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 900;
}

.showcase-client-note p {
  margin: 0.34rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.32;
}

.showcase-mining-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-mining-layout {
  grid-template-columns: minmax(310px, 0.8fr) minmax(490px, 1.2fr);
}

.showcase-mining-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-mining-npc {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.72rem;
  align-items: center;
  margin-top: 1rem;
  border: 1px solid #7c543d;
  border-radius: 16px;
  background:
    radial-gradient(180px 110px at 12% 30%, #d0a06228, transparent 72%),
    linear-gradient(160deg, #30251fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.72rem;
}

.showcase-mining-npc img {
  width: 92px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px #050302b8) drop-shadow(0 0 18px #d0a06235);
}

.showcase-mining-npc span {
  display: inline-flex;
  margin-bottom: 0.4rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-mining-npc strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.98rem, 1.18vw, 1.1rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-mining-npc p {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.72rem, 0.82vw, 0.78rem);
  line-height: 1.32;
}

.showcase-mining-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-mining-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-mining-media,
.showcase-mining-flow {
  position: relative;
  z-index: 1;
}

.showcase-mining-media {
  border-radius: 16px;
  min-height: 286px;
}

.showcase-mining-media img {
  width: 100%;
  height: 100%;
  min-height: 286px;
  object-fit: cover;
  object-position: 50% 48%;
}

.showcase-mining-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-mining-flow div {
  min-height: 112px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-mining-flow div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-mining-flow strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-mining-flow p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-horse-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-horse-layout {
  grid-template-columns: minmax(330px, 0.84fr) minmax(460px, 1.16fr);
}

.showcase-horse-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-horse-reminder {
  margin-top: 0.92rem;
  border: 1px solid #8d5c3c;
  border-left-color: #f0bf79;
  border-radius: 16px;
  background:
    radial-gradient(220px 120px at 16% 24%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #33271fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 24px #f2c27d10, 0 16px 30px #09060478;
  padding: 0.78rem;
}

.showcase-horse-reminder span,
.showcase-horse-main span {
  display: inline-flex;
  margin-bottom: 0.48rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-horse-reminder strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 900;
  line-height: 1.16;
}

.showcase-horse-reminder p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.34;
}

.showcase-horse-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-horse-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-horse-ui,
.showcase-horse-note {
  position: relative;
  z-index: 1;
}

.showcase-horse-media {
  margin: 0 0 0.58rem;
  border-radius: 16px;
}

.showcase-horse-media img {
  width: 100%;
  height: clamp(168px, 21svh, 205px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background:
    radial-gradient(220px 130px at 50% 24%, #d0a06218, transparent 70%),
    linear-gradient(180deg, #120d0b 0%, #080604 100%);
}

.showcase-horse-main {
  min-height: 84px;
  border: 1px solid #d0a062;
  border-radius: 16px;
  background:
    radial-gradient(260px 130px at 50% 10%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #3a2a20eb 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.58rem;
  text-align: center;
}

.showcase-horse-main strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.02rem, 1.52vw, 1.28rem);
  font-weight: 900;
  line-height: 1.1;
}

.showcase-horse-main p {
  margin: 0.34rem auto 0;
  max-width: 30rem;
  color: #ead0ad;
  font-size: clamp(0.76rem, 0.88vw, 0.84rem);
  line-height: 1.34;
}

.showcase-horse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.42rem;
}

.showcase-horse-grid div {
  min-height: 68px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.48rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-horse-grid div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-horse-grid strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.72rem, 0.86vw, 0.82rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-horse-grid p {
  margin: 0.28rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.62rem, 0.7vw, 0.68rem);
  line-height: 1.22;
}

.showcase-horse-note {
  margin-top: 0.42rem;
  border: 1px solid #7c543d;
  border-radius: 15px;
  background:
    radial-gradient(220px 110px at 10% 28%, #d0a06225, transparent 72%),
    linear-gradient(160deg, #30251fe3 0%, #17110ef0 100%);
  box-shadow: inset 0 0 20px #f2c27d0b, 0 14px 28px #09060470;
  padding: 0.48rem;
}

.showcase-horse-note strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.78rem, 0.94vw, 0.88rem);
  font-weight: 900;
}

.showcase-horse-note p {
  margin: 0.24rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.62rem, 0.72vw, 0.7rem);
  line-height: 1.22;
}

.showcase-rebalance-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
}

.showcase-rebalance-layout {
  grid-template-columns: minmax(330px, 0.84fr) minmax(460px, 1.16fr);
}

.showcase-rebalance-copy > p:not(.showcase-tag) {
  max-width: 34rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.54;
}

.showcase-rebalance-focus {
  margin-top: 0.92rem;
  border: 1px solid #8d5c3c;
  border-left-color: #f0bf79;
  border-radius: 16px;
  background:
    radial-gradient(220px 120px at 16% 24%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #33271fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 24px #f2c27d10, 0 16px 30px #09060478;
  padding: 0.78rem;
}

.showcase-rebalance-focus span,
.showcase-rebalance-core span {
  display: inline-flex;
  margin-bottom: 0.48rem;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background: #140f0cc8;
  color: #f0bf79;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.72px;
  padding: 0.2rem 0.48rem;
  text-transform: uppercase;
}

.showcase-rebalance-focus strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 900;
  line-height: 1.16;
}

.showcase-rebalance-focus p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.74rem, 0.84vw, 0.8rem);
  line-height: 1.34;
}

.showcase-rebalance-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 210px at 18% 10%, #d0a06222, transparent 72%),
    radial-gradient(300px 210px at 92% 82%, #5b452b62, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: clamp(0.75rem, 1.25vw, 1rem);
}

.showcase-rebalance-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d12 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.7;
  pointer-events: none;
}

.showcase-rebalance-core,
.showcase-rebalance-grid {
  position: relative;
  z-index: 1;
}

.showcase-rebalance-core {
  min-height: 150px;
  border: 1px solid #d0a062;
  border-radius: 16px;
  background:
    radial-gradient(260px 130px at 50% 10%, #f0bf7930, transparent 74%),
    linear-gradient(160deg, #3a2a20eb 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.9rem;
  text-align: center;
}

.showcase-rebalance-core strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.22rem, 1.9vw, 1.62rem);
  font-weight: 900;
  line-height: 1.1;
}

.showcase-rebalance-core p {
  margin: 0.48rem auto 0;
  max-width: 30rem;
  color: #ead0ad;
  font-size: clamp(0.76rem, 0.88vw, 0.84rem);
  line-height: 1.34;
}

.showcase-rebalance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  margin-top: 0.58rem;
}

.showcase-rebalance-grid div {
  min-height: 118px;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76220, transparent 72%),
    linear-gradient(160deg, #31261fe8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-rebalance-grid div:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d0a062;
  background:
    radial-gradient(220px 150px at 84% 12%, #e0a76232, transparent 74%),
    linear-gradient(160deg, #392b22ec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 28px #f2c27d14, 0 22px 40px #09060496, 0 0 0 1px #d0a06228;
}

.showcase-rebalance-grid strong {
  display: block;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.86rem, 1.08vw, 0.98rem);
  font-weight: 900;
  line-height: 1.12;
}

.showcase-rebalance-grid p {
  margin: 0.42rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  line-height: 1.32;
}

.showcase-upgrade-card {
  justify-self: center;
  width: min(900px, calc(100vw - 410px));
  min-height: min(560px, calc(100svh - 5.2rem));
  margin-right: 150px;
  padding: clamp(0.78rem, 1.05vw, 0.96rem);
}

.showcase-upgrade-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.showcase-upgrade-head h2 {
  margin: 0;
  max-width: 720px;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.72rem, 2.45vw, 2.65rem);
  font-weight: 900;
  line-height: 0.98;
  text-shadow: 0 2px 0 #000, 0 0 24px #d0a06242;
}

.showcase-upgrade-table {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(360px 220px at 12% 8%, #d0a06222, transparent 72%),
    radial-gradient(320px 210px at 90% 86%, #5b452b5c, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  padding: 0.48rem;
}

.showcase-upgrade-table::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f2c27d10 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.65;
  pointer-events: none;
}

.showcase-upgrade-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(150px, 0.8fr) minmax(280px, 1.5fr);
  gap: 0.55rem;
  align-items: center;
  min-height: 27px;
  border: 1px solid #72513b;
  border-radius: 10px;
  background:
    radial-gradient(170px 90px at 86% 12%, #e0a76217, transparent 72%),
    linear-gradient(160deg, #261d19dc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 12px #f2c27d08;
  padding: 0.14rem 0.52rem;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.showcase-upgrade-row:not(.showcase-upgrade-header):hover {
  transform: translateY(-2px);
  border-color: #d0a062;
  background:
    radial-gradient(220px 130px at 84% 12%, #e0a7622b, transparent 74%),
    linear-gradient(160deg, #33261fec 0%, #1a130ff4 100%);
  box-shadow: inset 0 0 18px #f2c27d12, 0 12px 22px #09060475, 0 0 0 1px #d0a06224;
}

.showcase-upgrade-header {
  min-height: 27px;
  border-color: #8d5c3c;
  background: linear-gradient(180deg, #5b452b 0%, #2b2119 100%);
  color: #ffe0ad;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.78px;
  text-transform: uppercase;
}

.showcase-upgrade-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #6f4b36;
  border-radius: 8px;
  background: #080604d8;
  box-shadow: inset 0 0 10px #f2c27d10, 0 6px 12px #05030280;
}

.showcase-upgrade-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #d0a06245);
}

.showcase-upgrade-row strong {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(0.67rem, 0.72vw, 0.76rem);
  font-weight: 900;
  line-height: 1.08;
}

.showcase-upgrade-row span:last-child {
  color: #ead0ad;
  font-size: clamp(0.62rem, 0.68vw, 0.7rem);
  font-weight: 700;
  line-height: 1.2;
}

.showcase-upgrade-header span:last-child {
  grid-column: auto;
}

.showcase-crafting-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  margin-top: 0.46rem;
  border: 1px solid #5f4636;
  border-radius: 12px;
  background: #100c0aa8;
  padding: 0.38rem;
}

.showcase-crafting-icons b {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 0.92rem;
  font-weight: 900;
  text-shadow: 0 0 12px #d0a06260;
}

.showcase-crafting-recipe-card p {
  margin: 0.38rem 0 0;
  color: #ead0ad;
  font-size: 0.78rem;
  line-height: 1.32;
  text-align: center;
}

.showcase-sura-target-card li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: #d0a062;
  box-shadow: 0 0 10px #d0a06280;
}

.showcase-gaya-card,
.showcase-auto-run-card {
  min-height: min(560px, calc(100svh - 5.2rem));
}

.showcase-gaya-layout,
.showcase-auto-run-layout {
  grid-template-columns: minmax(0, 0.74fr) minmax(440px, 1.26fr);
}

.showcase-gaya-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.52rem;
  margin-top: 1rem;
}

.showcase-gaya-flow span,
.showcase-gaya-flow strong {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #8d5c3c;
  border-radius: 999px;
  background:
    radial-gradient(110px 54px at 24% 18%, #f0bf7924, transparent 72%),
    linear-gradient(180deg, #2d241fe2 0%, #17110ef0 100%);
  color: #f2d2aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.7px;
  padding: 0.42rem 0.72rem;
  text-transform: uppercase;
}

.showcase-gaya-flow strong {
  justify-content: center;
  min-width: 38px;
  padding: 0;
  color: #f0bf79;
}

.showcase-gaya-panel,
.showcase-auto-run-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 190px at 16% 14%, #d0a06224, transparent 72%),
    radial-gradient(280px 190px at 88% 84%, #5b452b54, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  min-width: 0;
  padding: clamp(0.82rem, 1.35vw, 1.08rem);
}

.showcase-gaya-token {
  display: grid;
  gap: 0.22rem;
  margin-bottom: 0.82rem;
  border: 1px solid #b98552;
  border-radius: 15px;
  background:
    radial-gradient(180px 96px at 100% 0%, #f0bf7930, transparent 72%),
    linear-gradient(180deg, #33261fe8 0%, #18110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d10, 0 14px 28px #09060478;
  padding: 0.82rem;
}

.showcase-gaya-token strong {
  color: #ffe0ad;
  font-family: "Cinzel", serif;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
}

.showcase-gaya-token span {
  color: #d8b18c;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.showcase-gaya-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.showcase-gaya-grid div {
  border: 1px solid #72513b;
  border-left: 4px solid #b98552;
  border-radius: 14px;
  background:
    radial-gradient(160px 90px at 90% 10%, #e0a7621f, transparent 72%),
    linear-gradient(160deg, #2d231ee6 0%, #17110ef2 100%);
  box-shadow: inset 0 0 16px #f2c27d0a, 0 12px 24px #09060466;
  padding: 0.72rem;
}

.showcase-gaya-grid strong,
.showcase-auto-run-note strong {
  display: block;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.showcase-gaya-grid p,
.showcase-auto-run-note p {
  margin: 0.4rem 0 0;
  color: #ead0ad;
  font-size: clamp(0.86rem, 1.2vw, 0.98rem);
  line-height: 1.5;
}

.showcase-auto-run-points {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-auto-run-points li {
  border: 1px solid #6f4b36;
  border-left: 4px solid #b98552;
  border-radius: 12px;
  background: #16100db8;
  color: #f0d5b7;
  font-size: clamp(0.84rem, 1.15vw, 0.96rem);
  font-weight: 800;
  line-height: 1.42;
  padding: 0.54rem 0.68rem;
}

.showcase-auto-run-preview {
  margin: 0;
  background:
    radial-gradient(220px 140px at 50% 20%, #d0a06222, transparent 74%),
    #100c0ad9;
}

.showcase-auto-run-preview img {
  width: 100%;
  max-height: min(44svh, 430px);
  object-fit: contain;
  image-rendering: auto;
}

.showcase-auto-run-note {
  margin-top: 0.72rem;
  border: 1px solid #72513b;
  border-radius: 14px;
  background:
    radial-gradient(180px 94px at 100% 0%, #b9855224, transparent 72%),
    linear-gradient(180deg, #221b18d8 0%, #16100dea 100%);
  box-shadow: inset 0 0 18px #f2c27d08, 0 14px 28px #09060473;
  padding: 0.76rem;
}

.showcase-group-card,
.showcase-drop-protect-card {
  min-height: min(560px, calc(100svh - 5.2rem));
}

.showcase-group-layout,
.showcase-drop-protect-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(430px, 1.28fr);
}

.showcase-group-points {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-group-points li {
  border: 1px solid #6f4b36;
  border-left: 4px solid #b98552;
  border-radius: 12px;
  background: #16100db8;
  color: #f0d5b7;
  font-size: clamp(0.84rem, 1.15vw, 0.96rem);
  font-weight: 800;
  line-height: 1.42;
  padding: 0.54rem 0.68rem;
}

.showcase-group-panel,
.showcase-drop-protect-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 190px at 16% 14%, #d0a06224, transparent 72%),
    radial-gradient(280px 190px at 88% 84%, #5b452b54, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  min-width: 0;
  padding: clamp(0.82rem, 1.35vw, 1.08rem);
}

.showcase-group-preview {
  margin: 0;
  background:
    radial-gradient(220px 140px at 50% 20%, #d0a06222, transparent 74%),
    #100c0ad9;
}

.showcase-group-preview img {
  width: 100%;
  max-height: min(54svh, 500px);
  object-fit: contain;
}

.showcase-drop-protect-value {
  display: grid;
  gap: 0.18rem;
  margin-top: 1rem;
  border: 1px solid #8d5c3c;
  border-left: 4px solid #b98552;
  border-radius: 14px;
  background:
    radial-gradient(180px 90px at 100% 0%, #d0a06224, transparent 70%),
    linear-gradient(180deg, #2d241fd8, #17110ee8);
  box-shadow: inset 0 0 18px #f2c27d0a, 0 12px 24px #09060473;
  padding: 0.82rem;
}

.showcase-drop-protect-value strong,
.showcase-drop-protect-cardlet strong {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.showcase-drop-protect-value span,
.showcase-drop-protect-cardlet p {
  color: #ead0ad;
  font-size: clamp(0.86rem, 1.18vw, 0.98rem);
  line-height: 1.5;
}

.showcase-drop-protect-cardlet {
  border: 1px solid #b98552;
  border-radius: 15px;
  background:
    radial-gradient(180px 96px at 100% 0%, #f0bf7930, transparent 72%),
    linear-gradient(180deg, #33261fe8 0%, #18110ef2 100%);
  box-shadow: inset 0 0 20px #f2c27d10, 0 14px 28px #09060478;
  padding: 0.82rem;
}

.showcase-drop-protect-cardlet p {
  margin: 0.42rem 0 0;
}

.showcase-drop-protect-table {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.72rem;
}

.showcase-drop-protect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #72513b;
  border-left: 4px solid #b98552;
  border-radius: 13px;
  background:
    radial-gradient(150px 86px at 88% 10%, #e0a7621d, transparent 72%),
    linear-gradient(160deg, #2d231ee8 0%, #17110ef2 100%);
  box-shadow: inset 0 0 16px #f2c27d0a, 0 10px 20px #09060466;
  padding: 0.68rem 0.78rem;
}

.showcase-drop-protect-head {
  border-left-color: #d0a062;
  background: #100c0ad9;
  color: #f0bf79;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.showcase-drop-protect-row strong {
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.08;
}

.showcase-drop-protect-row span:last-child {
  color: #f0d5b7;
  font-weight: 900;
}

.showcase-voice-card {
  min-height: min(500px, calc(100svh - 5.2rem));
}

.showcase-voice-layout {
  align-items: center;
  grid-template-columns: minmax(0, 0.7fr) minmax(430px, 1.3fr);
  gap: clamp(1rem, 2vw, 1.65rem);
}

.showcase-voice-card h2 {
  font-size: clamp(1.95rem, 3.2vw, 3.35rem);
  line-height: 1.02;
}

.showcase-voice-card .showcase-copy p:not(.showcase-tag) {
  font-size: clamp(0.92rem, 1.2vw, 1.04rem);
  line-height: 1.48;
}

.showcase-voice-points {
  display: grid;
  gap: 0.42rem;
  margin: 0.84rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-voice-points li {
  border: 1px solid #6f4b36;
  border-left: 4px solid #b98552;
  border-radius: 12px;
  background: #16100db8;
  color: #f0d5b7;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  font-weight: 800;
  line-height: 1.34;
  padding: 0.46rem 0.6rem;
}

.showcase-voice-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0.62rem;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 18px;
  background:
    radial-gradient(320px 190px at 16% 14%, #d0a06224, transparent 72%),
    radial-gradient(280px 190px at 88% 84%, #5b452b54, transparent 74%),
    linear-gradient(145deg, #2a211dde 0%, #14100de8 100%);
  box-shadow: inset 0 0 28px #f2c27d0d, 0 22px 44px #0906048f;
  min-width: 0;
  padding: clamp(0.66rem, 1vw, 0.86rem);
}

.showcase-voice-preview {
  margin: 0;
  background:
    radial-gradient(220px 140px at 50% 20%, #d0a06222, transparent 74%),
    #100c0ad9;
}

.showcase-voice-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: min(25svh, 190px);
  object-fit: contain;
  transform: none;
}

.showcase-voice-preview-message img {
  max-height: min(25svh, 190px);
}

.showcase-slide.is-active .showcase-voice-preview img {
  transform: none;
}

.showcase-voice-preview figcaption {
  position: static;
  padding: 0.34rem 0.42rem 0.06rem;
  background: transparent;
  color: #f0bf79;
  font-size: 0.66rem;
  line-height: 1.1;
}

@media (min-width: 1181px) {
  .showcase-gaya-card,
  .showcase-auto-run-card,
  .showcase-group-card,
  .showcase-drop-protect-card,
  .showcase-voice-card {
    justify-self: center;
    width: min(860px, calc(100vw - 560px));
    margin-left: 0;
  }
}

.showcase-text-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 16px;
  background:
    radial-gradient(260px 140px at 92% 12%, #d0915524, transparent 72%),
    linear-gradient(145deg, #2d241fdc 0%, #17110ee8 100%);
  box-shadow: inset 0 0 24px #f2c27d0a, 0 16px 34px #09060482;
  padding: clamp(1rem, 2vw, 1.35rem);
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.72s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-slide.is-active .showcase-text-panel {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.18s, 0.18s, 0s, 0s, 0s;
}

.showcase-text-panel:hover {
  border-color: #d0a062;
  background:
    radial-gradient(300px 160px at 92% 12%, #e0a7622f, transparent 74%),
    linear-gradient(145deg, #352820e8 0%, #1b1411f0 100%);
  box-shadow: inset 0 0 28px #f2c27d12, 0 22px 44px #090604a6, 0 0 0 1px #d0a06228;
}

.showcase-text-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, #f0bf7918 48%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 18px);
  opacity: 0.65;
  pointer-events: none;
}

.showcase-text-panel p,
.showcase-text-panel ul {
  position: relative;
  z-index: 1;
}

.showcase-text-panel p {
  margin: 0;
  color: #ead0ad;
  font-size: clamp(0.96rem, 1.35vw, 1.08rem);
  line-height: 1.7;
}

.showcase-mounted-card {
  justify-self: center;
  width: min(850px, calc(100vw - 430px));
  min-height: min(520px, calc(100svh - 5.6rem));
  margin-right: 160px;
}

.showcase-mounted-card .showcase-topic-layout-text {
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
}

.showcase-mounted-panel h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.75rem;
  color: #fff1d2;
  font-family: "Cinzel", serif;
  font-size: clamp(1.35rem, 2.15vw, 1.85rem);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 10px 24px #090604d6;
}

.showcase-mounted-panel p {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.56;
}

.showcase-text-panel ul {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-text-panel li {
  border-left: 3px solid #b98552;
  border-top: 1px solid #6f4b362e;
  border-right: 1px solid #6f4b362e;
  border-bottom: 1px solid #6f4b362e;
  border-radius: 9px;
  background: #16100d8c;
  color: #f0d5b7;
  padding: 0.58rem 0.72rem;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

.showcase-text-panel li:hover,
.showcase-points li:hover {
  transform: translateX(4px) translateY(-2px);
  border-color: #d0a062;
  background: linear-gradient(180deg, #2f241de0, #1b1411e8);
  color: #ffe0ad;
  box-shadow: 0 12px 24px #09060482, inset 0 0 16px #f2c27d10;
}

.showcase-visual-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  border: 1px dashed #b9855280;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(240px 140px at 50% 42%, #b9855226, transparent 72%),
    linear-gradient(135deg, #17110edb 0%, #2d241fd4 52%, #17110ee6 100%);
  box-shadow: inset 0 0 24px #f2c27d08, 0 16px 34px #09060482;
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.72s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.showcase-slide.is-active .showcase-visual-placeholder {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.18s, 0.18s, 0s, 0s, 0s;
}

.showcase-visual-placeholder:hover {
  border-color: #d0a062;
  background:
    radial-gradient(280px 160px at 50% 42%, #d0a06230, transparent 74%),
    linear-gradient(135deg, #1c1512e8 0%, #352820e0 52%, #17110ef0 100%);
  box-shadow: inset 0 0 30px #f2c27d10, 0 22px 44px #090604a6, 0 0 0 1px #d0a06226;
}

.showcase-visual-placeholder::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid #6f4b364f;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 0%, #e0b07818 50%, transparent 100%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 16px);
  opacity: 0.72;
}

.showcase-visual-placeholder span {
  position: relative;
  z-index: 1;
  color: #f0bf79;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.showcase-visual-placeholder small {
  position: absolute;
  right: 1rem;
  bottom: 0.82rem;
  z-index: 1;
  color: #d5b99c;
  font-family: "Cinzel", serif;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  opacity: 0.17;
}

.showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(1rem, 2.2vw, 1.55rem);
  align-items: center;
}

.showcase-copy {
  min-width: 0;
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity 0.7s ease, transform 0.78s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase-slide.is-active .showcase-copy {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

.showcase-copy p:not(.showcase-tag) {
  margin: 0.75rem 0 0;
  color: #d5b99c;
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  line-height: 1.65;
}

.showcase-points {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.showcase-points li {
  border: 1px solid #6f4b367a;
  border-left: 3px solid #b98552;
  border-radius: 10px;
  background: linear-gradient(180deg, #221b18c2, #16100dd4);
  color: #f0d5b7;
  padding: 0.58rem 0.72rem;
  box-shadow: inset 0 0 12px #f2c27d06;
}

.showcase-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
  min-width: 0;
}

.showcase-media-grid-duo .showcase-media img {
  aspect-ratio: 16 / 12;
}

.showcase-media-grid .showcase-media,
.showcase-media-feature {
  margin: 0;
}

.showcase-media-grid-quad .showcase-media img {
  aspect-ratio: 16 / 10.5;
}

.showcase-media-feature img {
  min-height: 360px;
}

.showcase-media.is-ui img {
  object-fit: contain;
  background:
    radial-gradient(180px 120px at 50% 45%, #5b452b33, transparent 72%),
    #100c0a;
  padding: 0.35rem;
}

.showcase-media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.48rem 0.64rem;
  background: linear-gradient(180deg, transparent 0%, #18120ff0 72%);
  color: #f2d2aa;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.presentation-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  padding: clamp(0.7rem, 2vw, 1.25rem);
  background:
    radial-gradient(900px 420px at 50% 20%, #b9855220, transparent 72%),
    linear-gradient(180deg, #090604ef 0%, #120d0bf6 100%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(8px);
}

.presentation-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.presentation-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.presentation-lightbox-title {
  min-width: min(100%, 360px);
  max-width: 760px;
  color: #f2d2aa;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-align: center;
  text-transform: uppercase;
}

.presentation-lightbox-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  border: 1px solid #8d5c3c;
  border-radius: 11px;
  background: linear-gradient(180deg, #2e231e 0%, #1b1411 100%);
  color: #ffe0ad;
  font-weight: 900;
  box-shadow: 0 10px 22px #0906047a;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.presentation-lightbox-button:hover {
  border-color: #d0a062;
  box-shadow: 0 0 0 1px #d0a06230, 0 0 20px #b36a3d66;
  transform: translateY(-1px);
}

.presentation-lightbox-stage {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #6f4b36;
  border-radius: 18px;
  background:
    radial-gradient(420px 220px at 50% 50%, #5b452b24, transparent 72%),
    #100c0af0;
  box-shadow: inset 0 0 28px #f2c27d08, 0 22px 52px #000000b8;
}

.presentation-lightbox-image {
  display: block;
  max-width: min(94vw, 1500px);
  max-height: 78svh;
  object-fit: contain;
  transform: scale(var(--lightbox-zoom, 1));
  transform-origin: center;
  transition: transform 0.16s ease;
  user-select: none;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .presentation-lightbox {
    padding: 0.65rem;
  }

  .presentation-lightbox-title {
    order: -1;
    width: 100%;
  }

  .presentation-lightbox-image {
    max-height: 72svh;
  }
}

.showcase-progress-list {
  max-height: min(72svh, 620px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #8d5c3c #221b18;
}

.showcase-progress-list::-webkit-scrollbar {
  width: 6px;
}

.showcase-progress-list::-webkit-scrollbar-track {
  background: #221b18;
}

.showcase-progress-list::-webkit-scrollbar-thumb {
  background: #8d5c3c;
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .showcase-card-wide {
    width: min(90vw, 820px);
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
  }

  .showcase-layout {
    grid-template-columns: 1fr;
  }

  .showcase-topic-layout {
    grid-template-columns: 1fr;
  }

  .showcase-topic-layout-text {
    grid-template-columns: 1fr;
  }

  .showcase-boss-layout {
    grid-template-columns: 1fr;
  }

  .showcase-drop-layout {
    grid-template-columns: 1fr;
  }

  .showcase-warrior-layout {
    grid-template-columns: 1fr;
  }

  .showcase-shaman-layout {
    grid-template-columns: 1fr;
  }

  .showcase-ninja-layout {
    grid-template-columns: 1fr;
  }

  .showcase-sura-layout {
    grid-template-columns: 1fr;
  }

  .showcase-craft-layout {
    grid-template-columns: 1fr;
  }

  .showcase-routes-layout {
    grid-template-columns: 1fr;
  }

  .showcase-crafting-hub-layout {
    grid-template-columns: 1fr;
  }

  .showcase-biologist-layout {
    grid-template-columns: 1fr;
  }

  .showcase-language-layout {
    grid-template-columns: 1fr;
  }

  .showcase-potion-layout {
    grid-template-columns: 1fr;
  }

  .showcase-fishing-layout {
    grid-template-columns: 1fr;
  }

  .showcase-qol-layout {
    grid-template-columns: 1fr;
  }

  .showcase-offline-layout {
    grid-template-columns: 1fr;
  }

  .showcase-shopsearch-layout {
    grid-template-columns: 1fr;
  }

  .showcase-character-sale-layout {
    grid-template-columns: 1fr;
  }

  .showcase-weaponstr-layout {
    grid-template-columns: 1fr;
  }

  .showcase-hunting-layout {
    grid-template-columns: 1fr;
  }

  .showcase-battlepass-layout {
    grid-template-columns: 1fr;
  }

  .showcase-premium-layout {
    grid-template-columns: 1fr;
  }

  .showcase-client-layout {
    grid-template-columns: 1fr;
  }

  .showcase-mining-layout {
    grid-template-columns: 1fr;
  }

  .showcase-horse-layout {
    grid-template-columns: 1fr;
  }

  .showcase-rebalance-layout {
    grid-template-columns: 1fr;
  }

  .showcase-sprint-layout {
    grid-template-columns: 1fr;
  }

  .showcase-gaya-layout,
  .showcase-auto-run-layout,
  .showcase-group-layout,
  .showcase-drop-protect-layout {
    grid-template-columns: 1fr;
  }

  .showcase-sprint-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-visual-placeholder {
    min-height: 220px;
  }

  .showcase-media-feature img {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .showcase-card-wide {
    width: calc(100vw - 4.6rem);
    max-height: calc(100svh - 5.8rem);
  }

  .showcase-media-grid {
    grid-template-columns: 1fr;
  }

  .showcase-boss-list {
    grid-template-columns: 1fr;
  }

  .showcase-drop-panel {
    grid-template-columns: 1fr;
  }

  .showcase-warrior-change-grid {
    grid-template-columns: 1fr;
  }

  .showcase-warrior-change {
    min-height: 0;
  }

  .showcase-shaman-change-grid {
    grid-template-columns: 1fr;
  }

  .showcase-shaman-shield-preview {
    grid-template-columns: 1fr;
  }

  .showcase-shaman-shield-card {
    grid-template-columns: 1fr;
  }

  .showcase-shaman-change,
  .showcase-shaman-change-wide {
    grid-column: auto;
    min-height: 0;
  }

  .showcase-ninja-change-grid {
    grid-template-columns: 1fr;
  }

  .showcase-ninja-change {
    min-height: 0;
  }

  .showcase-sura-spirit-row,
  .showcase-sura-target-grid {
    grid-template-columns: 1fr;
  }

  .showcase-sura-target-card-wide {
    grid-column: auto;
  }

  .showcase-sura-target-card-wide ul {
    grid-template-columns: 1fr;
  }

  .showcase-sura-spirit-tier {
    min-height: 0;
  }

  .showcase-craft-flow,
  .showcase-craft-gallery,
  .showcase-craft-note-grid {
    grid-template-columns: 1fr;
  }

  .showcase-craft-preview-main {
    grid-column: auto;
  }

  .showcase-routes-recipe-grid {
    grid-template-columns: 1fr;
  }

  .showcase-routes-recipe-wide {
    grid-column: auto;
  }

  .showcase-crafting-source-grid,
  .showcase-crafting-gallery,
  .showcase-crafting-recipe-grid,
  .showcase-biologist-row,
  .showcase-biologist-note,
  .showcase-language-book-row,
  .showcase-language-flow,
  .showcase-potion-elixirs,
  .showcase-potion-flow,
  .showcase-fishing-items,
  .showcase-fishing-flow,
  .showcase-fishing-value,
  .showcase-qol-gallery,
  .showcase-qol-flow,
  .showcase-offline-flow,
  .showcase-shopsearch-flow,
  .showcase-character-sale-grid,
  .showcase-weaponstr-icon-grid,
  .showcase-weaponstr-flow,
  .showcase-hunting-flow,
  .showcase-battlepass-panel,
  .showcase-premium-grid,
  .showcase-client-node-grid,
  .showcase-mining-flow,
  .showcase-horse-grid,
  .showcase-rebalance-grid,
  .showcase-sprint-feature-grid {
    grid-template-columns: 1fr;
  }

  .showcase-upgrade-head {
    display: block;
  }

  .showcase-upgrade-row {
    grid-template-columns: 42px 1fr;
  }

  .showcase-upgrade-row span:last-child {
    grid-column: 2;
  }

  .showcase-upgrade-header {
    display: none;
  }

  .showcase-crafting-shot-main,
  .showcase-crafting-recipe-card-wide {
    grid-column: auto;
  }

  .showcase-craft-flow-arrow {
    transform: rotate(90deg);
  }

  .showcase-drop-note {
    grid-column: auto;
    align-items: flex-start;
  }

  .showcase-points li {
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 1.5rem);
  }

  .hero-copy {
    padding: 1rem;
    overflow: hidden;
  }

  .hero-lead,
  .hero-copy p {
    max-width: 100%;
  }

  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }
}

/* Mobile presentation fit pass: keep the right progress rail visible without covering slides. */
@media (max-width: 640px) {
  body.presentation-only {
    overflow: hidden;
  }

  .showcase-slide {
    padding: 3.7rem 0.75rem 4.35rem;
    justify-items: start;
  }

  .showcase-card,
  .showcase-card-wide {
    width: min(100%, calc(100vw - 5.1rem));
    justify-self: start;
    max-height: calc(100svh - 11.2rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .showcase-card-topic {
    min-height: 0;
  }

  .showcase-sprint-card,
  .showcase-fishing-card,
  .showcase-qol-card,
  .showcase-offline-card,
  .showcase-shopsearch-card,
  .showcase-character-sale-card,
  .showcase-weaponstr-card,
  .showcase-hunting-card,
  .showcase-battlepass-card,
  .showcase-premium-card,
  .showcase-client-card,
  .showcase-mining-card,
  .showcase-horse-card,
  .showcase-rebalance-card,
  .showcase-upgrade-card,
  .showcase-mounted-card {
    width: min(100%, calc(100vw - 5.1rem));
    min-height: 0;
    margin: 0;
  }

  .showcase-side-controls {
    left: auto;
    right: 0.35rem;
    top: 50%;
    width: 50px;
    transform: translateY(-50%);
    display: grid;
    gap: 0.38rem;
  }

  .showcase-home-button {
    min-height: 34px;
    padding: 0.34rem 0.18rem;
    font-size: 0;
    line-height: 1.05;
    white-space: normal;
    word-break: break-word;
  }

  .showcase-home-button::before {
    content: "HOME";
    font-size: 0.62rem;
  }

  .showcase-progress {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    width: 100%;
  }

  .showcase-progress-list {
    display: grid;
    max-height: min(58svh, 430px);
    padding: 0.4rem 0.28rem;
    gap: 0.3rem;
    overflow-y: auto;
  }

  .showcase-progress-item {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0.3rem 0.12rem;
  }

  .showcase-progress-item-label {
    display: none;
  }

  .showcase-progress-rail {
    display: block;
    justify-self: center;
    width: 10px;
    min-height: 48px;
    height: 48px;
  }

  body.presentation-only .language-switcher.is-floating {
    left: 0.72rem;
    right: auto;
    top: 0.58rem;
    bottom: auto;
  }

  body.presentation-only .language-switcher.is-floating .language-switcher-menu {
    left: 0;
    right: auto;
    top: calc(100% + 0.55rem);
    bottom: auto;
    transform-origin: top left;
  }

  .showcase-arrow {
    width: 36px;
    height: 36px;
  }

  .showcase-arrow-up {
    top: 0.5rem;
  }

  .showcase-arrow-down {
    bottom: 3.05rem;
  }

  .showcase-topic-layout,
  .showcase-topic-layout-text,
  .showcase-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .showcase-mounted-card .showcase-topic-layout-text,
  .showcase-boss-layout,
  .showcase-drop-layout,
  .showcase-warrior-layout,
  .showcase-shaman-layout,
  .showcase-ninja-layout,
  .showcase-sura-layout,
  .showcase-craft-layout,
  .showcase-routes-layout,
  .showcase-crafting-hub-layout,
  .showcase-biologist-layout,
  .showcase-language-layout,
  .showcase-potion-layout,
  .showcase-fishing-layout,
  .showcase-qol-layout,
  .showcase-offline-layout,
  .showcase-shopsearch-layout,
  .showcase-character-sale-layout,
  .showcase-weaponstr-layout,
  .showcase-hunting-layout,
  .showcase-battlepass-layout,
  .showcase-premium-layout,
  .showcase-client-layout,
  .showcase-mining-layout,
  .showcase-horse-layout,
  .showcase-rebalance-layout,
  .showcase-sprint-layout,
  .showcase-gaya-layout,
  .showcase-auto-run-layout,
  .showcase-group-layout,
  .showcase-drop-protect-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-card h1,
  .showcase-card h2 {
    font-size: clamp(1.18rem, 6.2vw, 1.7rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .showcase-copy,
  .showcase-text-panel,
  .showcase-visual-placeholder {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .showcase-copy p:not(.showcase-tag) {
    font-size: clamp(0.86rem, 3.8vw, 0.98rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .showcase-text-panel {
    max-width: 100%;
    padding: 0.82rem;
    overflow-wrap: anywhere;
  }

  .showcase-mounted-panel h3,
  .showcase-text-panel h3 {
    font-size: clamp(0.98rem, 4.8vw, 1.2rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .showcase-text-panel p {
    font-size: clamp(0.82rem, 3.7vw, 0.94rem);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .showcase-text-panel ul {
    gap: 0.42rem;
    margin-top: 0.72rem;
  }

  .showcase-text-panel li {
    padding: 0.48rem 0.56rem;
    font-size: clamp(0.78rem, 3.5vw, 0.9rem);
    line-height: 1.38;
    overflow-wrap: anywhere;
  }

  .showcase-text-panel,
  .showcase-gaya-panel,
  .showcase-auto-run-panel,
  .showcase-group-panel,
  .showcase-drop-protect-panel,
  .showcase-visual-placeholder,
  .showcase-media,
  .showcase-boss-panel,
  .showcase-drop-panel,
  .showcase-warrior-panel,
  .showcase-shaman-panel,
  .showcase-ninja-panel,
  .showcase-sura-panel,
  .showcase-craft-panel,
  .showcase-routes-panel,
  .showcase-crafting-hub-panel,
  .showcase-biologist-panel,
  .showcase-language-panel,
  .showcase-potion-panel,
  .showcase-fishing-panel,
  .showcase-qol-panel,
  .showcase-offline-panel,
  .showcase-shopsearch-panel,
  .showcase-character-sale-panel,
  .showcase-weaponstr-panel,
  .showcase-hunting-panel,
  .showcase-battlepass-panel,
  .showcase-premium-panel,
  .showcase-client-panel,
  .showcase-mining-panel,
  .showcase-horse-panel,
  .showcase-rebalance-panel {
    min-width: 0;
  }

  .showcase-gaya-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-gaya-flow {
    gap: 0.38rem;
  }

  .showcase-gaya-flow span {
    min-height: 34px;
    font-size: 0.68rem;
    padding: 0.34rem 0.55rem;
  }

  .showcase-gaya-flow strong {
    min-width: 34px;
  }

  .showcase-gaya-panel,
  .showcase-auto-run-panel {
    padding: 0.7rem;
  }

  .showcase-auto-run-preview img {
    max-height: min(32svh, 280px);
  }

  .showcase-group-preview img {
    max-height: min(34svh, 300px);
  }

  .showcase-drop-protect-table {
    gap: 0.42rem;
  }

  .showcase-drop-protect-row {
    padding: 0.56rem 0.62rem;
  }
}

@media (max-width: 1180px) {
  .showcase-voice-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .showcase-voice-card {
    width: min(100%, calc(100vw - 5.1rem));
    min-height: 0;
    margin: 0;
  }

  .showcase-voice-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-voice-panel {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 0.7rem;
  }

  .showcase-voice-points li {
    padding: 0.58rem;
  }

  .showcase-voice-preview img {
    max-height: min(28svh, 230px);
  }

  .showcase-voice-preview-message img {
    max-height: min(24svh, 190px);
  }
}

@media (max-width: 359px) {
  .showcase-card,
  .showcase-card-wide,
  .showcase-sprint-card,
  .showcase-fishing-card,
  .showcase-qol-card,
  .showcase-offline-card,
  .showcase-shopsearch-card,
  .showcase-character-sale-card,
  .showcase-weaponstr-card,
  .showcase-hunting-card,
  .showcase-battlepass-card,
  .showcase-premium-card,
  .showcase-client-card,
  .showcase-mining-card,
  .showcase-horse-card,
  .showcase-rebalance-card,
  .showcase-upgrade-card,
  .showcase-mounted-card,
  .showcase-gaya-card,
  .showcase-auto-run-card,
  .showcase-group-card,
  .showcase-drop-protect-card,
  .showcase-voice-card {
    width: min(100%, calc(100vw - 4.8rem));
  }

  .showcase-side-controls {
    right: 0.25rem;
    width: 46px;
  }

  .showcase-card {
    padding: clamp(0.7rem, 4.6vw, 0.95rem);
  }

  .showcase-media,
  .showcase-boss-preview,
  .showcase-drop-panel,
  .showcase-crafting-hub-panel {
    overflow-x: hidden;
  }

  .showcase-boss-layout,
  .showcase-drop-layout,
  .showcase-crafting-hub-layout,
  .showcase-gaya-layout,
  .showcase-auto-run-layout,
  .showcase-group-layout,
  .showcase-drop-protect-layout,
  .showcase-voice-layout {
    gap: 0.62rem;
  }

  .showcase-boss-panel,
  .showcase-drop-panel,
  .showcase-crafting-hub-panel,
  .showcase-gaya-panel,
  .showcase-auto-run-panel,
  .showcase-group-panel,
  .showcase-drop-protect-panel,
  .showcase-voice-panel {
    gap: 0.55rem;
    padding: 0.64rem;
  }

  .showcase-boss-list,
  .showcase-drop-panel,
  .showcase-crafting-gallery,
  .showcase-crafting-recipe-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-boss-list span {
    display: block;
    max-width: 10ch;
  }

  .showcase-drop-rule {
    min-height: 0;
    padding: 0.72rem;
  }

  .showcase-drop-rule strong {
    font-size: clamp(2.75rem, 18vw, 3.7rem);
  }

  .showcase-drop-note {
    display: grid;
    gap: 0.62rem;
  }

  .showcase-drop-icon-row {
    justify-self: start;
    flex-wrap: wrap;
  }

  .showcase-crafting-icons {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.26rem;
  }

  .showcase-crafting-icons img {
    width: 30px;
    height: 30px;
  }

  .showcase-gaya-token {
    padding: 0.62rem;
  }

  .showcase-gaya-grid div,
  .showcase-auto-run-note,
  .showcase-auto-run-points li,
  .showcase-group-points li,
  .showcase-voice-points li,
  .showcase-drop-protect-value,
  .showcase-drop-protect-cardlet,
  .showcase-drop-protect-row {
    padding: 0.58rem;
  }

  .showcase-voice-preview img {
    max-height: min(25svh, 190px);
  }

  .showcase-voice-preview-message img {
    max-height: min(22svh, 160px);
  }

  .showcase-auto-run-preview img {
    max-height: min(28svh, 210px);
  }

  .showcase-group-preview img {
    max-height: min(30svh, 230px);
  }

  .showcase-warrior-change-head,
  .showcase-shaman-change-head,
  .showcase-ninja-change-head {
    gap: 0.55rem;
  }

  .showcase-warrior-skill-icon,
  .showcase-shaman-skill-icon,
  .showcase-ninja-skill-icon {
    width: 44px;
    height: 44px;
  }

  .showcase-warrior-change-head strong,
  .showcase-shaman-change-head strong,
  .showcase-ninja-change-head strong {
    font-size: clamp(1rem, 5.1vw, 1.18rem);
    overflow-wrap: anywhere;
  }

  .showcase-crafting-hub-track {
    min-width: 0;
  }
}

/* Polish labels need more horizontal room than the English navigation. */
@media (min-width: 1001px) {
  html[lang="pl"] .site-header .nav-wrap {
    width: min(1360px, 96vw);
    gap: 0.55rem;
  }

  html[lang="pl"] .site-header .brand-logo {
    height: clamp(64px, 5.4vw, 78px);
    max-width: 220px;
  }

  html[lang="pl"] .site-header .main-nav {
    justify-content: flex-start;
    gap: 0.58rem;
  }

  html[lang="pl"] .site-header .main-nav a {
    font-size: 0.72rem;
  }

  html[lang="pl"] .site-header .nav-cta {
    gap: 0.34rem;
  }

  html[lang="pl"] .site-header .nav-cta .btn {
    padding: 0.47rem 0.58rem;
    font-size: 0.68rem;
  }

  html[lang="pl"] .site-header .nav-cta .btn-solid {
    padding-inline: 0.72rem;
  }

  html[lang="pl"] .site-header .language-switcher-toggle {
    min-height: 35px;
    gap: 0.32rem;
    padding: 0.42rem 0.56rem;
    font-size: 0.7rem;
  }

  html[lang="pl"] .site-header .language-current-flag {
    font-size: 0.92rem;
  }
}

@media (min-width: 1001px) and (max-width: 1180px) {
  html[lang="pl"] .site-header .nav-wrap {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand navigation"
      "actions actions";
    padding-block: 0.42rem 0.62rem;
  }

  html[lang="pl"] .site-header .brand {
    grid-area: brand;
  }

  html[lang="pl"] .site-header .main-nav {
    grid-area: navigation;
    justify-content: flex-end;
  }

  html[lang="pl"] .site-header .nav-cta {
    grid-area: actions;
    justify-content: center;
  }
}

/* Dedicated PvP and PvE channel presentation. */
.showcase-channel-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.showcase-channel-panel {
  min-width: 0;
  border-top: 1px solid #704a32;
  border-bottom: 1px solid #704a32;
}

.showcase-channel-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-channel-mode {
  min-width: 0;
  padding: clamp(0.85rem, 2vw, 1.2rem);
}

.showcase-channel-mode + .showcase-channel-mode {
  border-left: 1px solid #4b3529;
}

.showcase-channel-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-channel-mode.is-pvp .showcase-channel-label,
.showcase-channel-mode.is-pvp h3 {
  color: #ef9a74;
}

.showcase-channel-mode.is-pve .showcase-channel-label,
.showcase-channel-mode.is-pve h3 {
  color: #9bc6ad;
}

.showcase-channel-mode h3 {
  margin: 0 0 0.75rem;
  font-family: "Cinzel", serif;
  font-size: clamp(0.9rem, 1.6vw, 1.12rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.showcase-channel-mode ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.48rem;
  list-style: none;
}

.showcase-channel-mode li {
  position: relative;
  padding-left: 0.95rem;
  color: #d7bea1;
  font-size: clamp(0.76rem, 1.15vw, 0.9rem);
  line-height: 1.42;
}

.showcase-channel-mode li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.showcase-channel-summary {
  margin: 0;
  padding: 0.85rem clamp(0.85rem, 2vw, 1.2rem);
  border-top: 1px solid #4b3529;
  color: #cdb18e;
  font-size: clamp(0.76rem, 1.1vw, 0.88rem);
  line-height: 1.5;
}

@media (min-width: 1181px) {
  .showcase-channel-card {
    width: min(900px, 94vw);
    
  }
}

@media (max-width: 760px) {
  .showcase-channel-layout,
  .showcase-channel-modes {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-channel-layout {
    align-items: start;
    gap: 0.8rem;
  }

  .showcase-channel-mode {
    padding: 0.72rem;
  }

  .showcase-channel-mode + .showcase-channel-mode {
    border-top: 1px solid #4b3529;
    border-left: 0;
  }

  .showcase-channel-mode h3 {
    margin-bottom: 0.55rem;
    font-size: clamp(0.88rem, 4.4vw, 1.05rem);
  }

  .showcase-channel-mode li,
  .showcase-channel-summary {
    font-size: clamp(0.74rem, 3.4vw, 0.86rem);
  }

  .showcase-channel-summary {
    padding: 0.7rem;
  }
}

/* Monster Knowledge presentation. */
.showcase-knowledge-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(350px, 1.08fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.showcase-knowledge-card h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.04;
}

.showcase-knowledge-copy > p:not(.showcase-tag) {
  font-size: clamp(0.84rem, 1.05vw, 0.94rem);
  line-height: 1.48;
}

.showcase-knowledge-flow {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.45rem;
}

.showcase-knowledge-flow > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 0.58rem;
  padding: 0.5rem 0.62rem;
  border-left: 3px solid #d99a52;
  background: linear-gradient(90deg, #382619d9, #15100dcc 72%);
}

.showcase-knowledge-flow span {
  grid-row: 1 / span 2;
  color: #d99a52;
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  font-weight: 800;
}

.showcase-knowledge-flow strong {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.showcase-knowledge-flow p {
  margin: 0.16rem 0 0;
  color: #d6c1a8;
  font-size: 0.73rem;
  line-height: 1.34;
}

.showcase-knowledge-note {
  padding: 0.58rem 0.66rem;
  border: 1px solid #704a32;
  background: #120d0bcc;
  color: #d7bea1;
}

.showcase-knowledge-note strong {
  color: #f0bf79;
}

.showcase-knowledge-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.7rem;
}

.showcase-knowledge-preview {
  margin: 0;
  border-color: #8d5c3c;
  background: #090706;
}

.showcase-knowledge-preview img {
  width: 100%;
  object-fit: contain;
  background: #090706;
}

.showcase-knowledge-preview.is-locked img {
  height: min(19vh, 145px);
}

.showcase-knowledge-preview.is-unlocked img {
  height: min(46vh, 355px);
}

@media (min-width: 1181px) {
  .showcase-knowledge-card {
    width: min(900px, 94vw);
    
  }
}

@media (max-width: 760px) {
  .showcase-knowledge-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
  }

  .showcase-knowledge-flow {
    margin-top: 0.75rem;
  }

  .showcase-knowledge-preview.is-locked img,
  .showcase-knowledge-preview.is-unlocked img {
    height: auto;
    max-height: 420px;
  }
}

/* Hunting mission target highlight presentation. */
.showcase-hunt-target-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.showcase-hunt-target-card h2 {
  font-size: clamp(1.7rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.showcase-hunt-target-copy > p:not(.showcase-tag) {
  font-size: clamp(0.84rem, 1.05vw, 0.94rem);
  line-height: 1.48;
}

.showcase-hunt-target-points {
  margin-top: 1rem;
  display: grid;
  gap: 0.55rem;
}

.showcase-hunt-target-points > div {
  padding: 0.5rem 0.62rem;
  border-left: 3px solid #d99a52;
  background: linear-gradient(90deg, #382619d9, #15100dcc 70%);
  box-shadow: inset 0 0 14px #d99a5212;
}

.showcase-hunt-target-points strong {
  display: block;
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.showcase-hunt-target-points p {
  margin: 0.2rem 0 0;
  color: #d6c1a8;
  font-size: 0.74rem;
  line-height: 1.34;
}

.showcase-hunt-target-media {
  margin: 0;
  border-color: #8d5c3c;
  background: #0b0908;
}

.showcase-hunt-target-media img {
  width: 100%;
  height: min(56vh, 500px);
  object-fit: contain;
  background: #0b0908;
}

@media (min-width: 1181px) {
  .showcase-hunt-target-card {
    width: min(900px, 94vw);
    
  }
}

@media (max-width: 760px) {
  .showcase-hunt-target-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
  }

  .showcase-hunt-target-points {
    margin-top: 0.75rem;
  }

  .showcase-hunt-target-points > div {
    padding: 0.55rem 0.62rem;
  }

  .showcase-hunt-target-media img {
    height: auto;
    max-height: 420px;
  }
}

/* Official launch date and Crossplay presentation. */
.opening-cinematic-inner .opening-date {
  display: block;
  margin-top: 0.38rem;
  color: #ffe0ad;
  font-family: "Cinzel", serif;
  font-size: clamp(1.65rem, 5vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 22px #d0915575, 0 6px 18px #090604c7;
}

.opening-cinematic-inner .opening-date.is-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: #c9f7d4;
  text-transform: uppercase;
  text-shadow: 0 0 22px #59d37b80, 0 6px 18px #090604c7;
}

.opening-online-dot {
  width: 0.58rem;
  height: 0.58rem;
  flex: 0 0 auto;
  border: 1px solid #d9ffe2;
  border-radius: 50%;
  background: #62e386;
  box-shadow: 0 0 0 4px #62e3861f, 0 0 18px #62e386;
}

.opening-cinematic-inner .opening-note {
  display: block;
  margin-top: 0.42rem;
  color: #cba77f;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-seals .launch-date-card {
  border-color: #d0a062;
  background:
    radial-gradient(180px 80px at 100% 0%, #e6a75f35, transparent 72%),
    linear-gradient(180deg, #49301fe8 0%, #221813ed 100%);
  box-shadow: inset 0 0 20px #f2c27d12, 0 12px 28px #0906048f, 0 0 18px #d0915530;
}

.hero-seals .launch-date-card .status-value {
  display: block;
  color: #ffe0ad;
  font-family: "Cinzel", serif;
  font-variant-numeric: tabular-nums;
}

.showcase-crossplay-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(520px, 1.3fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  min-height: inherit;
}

.showcase-crossplay-copy > p:not(.showcase-tag) {
  color: #d6c1a8;
  font-size: clamp(0.84rem, 1.05vw, 0.95rem);
  line-height: 1.52;
}

.showcase-crossplay-platforms {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.45fr);
  align-items: center;
  gap: 0.5rem;
}

.showcase-crossplay-platforms span {
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid #8d5c3c;
  border-radius: 8px;
  background: linear-gradient(180deg, #34251ddd 0%, #17110ee8 100%);
  color: #f7e7cf;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.showcase-crossplay-platforms span.is-development {
  border-color: #d0a062;
  color: #ffe0ad;
  box-shadow: inset 0 0 16px #d0a06218, 0 0 18px #d0915526;
}

.showcase-crossplay-platforms b {
  color: #f0bf79;
  font-family: "Cinzel", serif;
  font-size: 1.25rem;
}

.showcase-crossplay-note {
  margin: 0.9rem 0 0;
  padding-left: 0.72rem;
  border-left: 3px solid #d0a062;
}

.showcase-crossplay-media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #8d5c3c;
  border-radius: 10px;
  background: #0b0908;
  box-shadow: 0 18px 36px #00000099, inset 0 0 20px #f2c27d0a;
}

.showcase-crossplay-media video {
  display: block;
  width: 100%;
  aspect-ratio: 1592 / 630;
  object-fit: cover;
  background: #0b0908;
}

.showcase-crossplay-media figcaption {
  padding: 0.58rem 0.72rem;
  border-top: 1px solid #4b3529;
  color: #cba77f;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 1181px) {
  .showcase-crossplay-card {
    width: min(1100px, 94vw);
    
  }
}

@media (max-width: 1180px) {
  .showcase-crossplay-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 640px) {
  .opening-cinematic-inner {
    width: min(92vw, 430px);
    padding: 0.85rem;
  }

  .opening-cinematic-inner img {
    width: min(82%, 290px);
  }

  .showcase-crossplay-layout {
    gap: 0.72rem;
  }

  .showcase-crossplay-platforms {
    margin-top: 0.72rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.34rem;
  }

  .showcase-crossplay-platforms b {
    display: none;
  }

  .showcase-crossplay-platforms span {
    padding: 0.5rem 0.58rem;
    font-size: 0.68rem;
  }

  .showcase-crossplay-note {
    margin-top: 0.65rem;
    font-size: 0.76rem !important;
  }

  .showcase-crossplay-media figcaption {
    padding: 0.45rem 0.55rem;
    font-size: 0.62rem;
  }

}

/* Discord community popover */
.discord-community-trigger {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.discord-community-popover {
  position: fixed;
  right: 7.8rem;
  bottom: 1rem;
  z-index: 83;
  width: min(430px, calc(100vw - 10rem));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
  transform-origin: right bottom;
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 220ms ease;
}

.discord-community-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.discord-community-card {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid #d39339;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #140d0df7 0%, #140d0deb 52%, #140d0d91 76%, #140d0dcc 100%),
    url("/tanitim/varlik/gorsel/hero-warrior-v2.jpg") 76% center / cover no-repeat;
  box-shadow:
    0 0 0 1px #3e2919,
    0 0 26px #d3933945,
    0 22px 46px #000000c7;
}

.discord-community-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #e5a54413, transparent 34%),
    linear-gradient(90deg, transparent 66%, #0000003b);
  pointer-events: none;
}

.discord-card-corner {
  position: absolute;
  left: 8px;
  width: 15px;
  height: 15px;
  border-left: 2px solid #f2b84d;
  pointer-events: none;
}

.discord-card-corner-top {
  top: 8px;
  border-top: 2px solid #f2b84d;
}

.discord-card-corner-bottom {
  bottom: 8px;
  border-bottom: 2px solid #f2b84d;
}

.discord-community-close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: #efb447;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.discord-community-close:hover,
.discord-community-close:focus-visible {
  color: #ffe3a8;
  transform: rotate(5deg);
}

.discord-community-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-right: 2.5rem;
}

.discord-community-emblem {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid #efb447;
  border-radius: 50%;
  background: #5d3b20c7;
  box-shadow: 0 0 18px #e9a63e42;
}

.discord-community-emblem > span {
  position: relative;
  width: 28px;
  height: 20px;
  border-radius: 8px 8px 10px 10px;
  background: #fff0d1;
}

.discord-community-emblem > span::before {
  content: "";
  position: absolute;
  inset: 7px 6px auto;
  height: 5px;
  border-left: 4px solid #8b5b2c;
  border-right: 4px solid #8b5b2c;
}

.discord-community-emblem > span::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -4px;
  border-width: 5px 0 0 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff0d1;
  transform: rotate(12deg);
}

.discord-community-heading p,
.discord-community-heading h2,
.discord-community-heading span {
  margin: 0;
}

.discord-community-heading p {
  color: #d29a55;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.discord-community-heading h2 {
  margin-top: 0.12rem;
  color: #ffe4b9;
  font-family: "Cinzel", serif;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
}

.discord-community-heading div > span {
  display: block;
  margin-top: 0.3rem;
  color: #b88f6b;
  font-size: 0.66rem;
  font-weight: 700;
}

.discord-community-stats {
  position: relative;
  z-index: 1;
  width: 66%;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #82552e;
  border-radius: 4px;
  overflow: hidden;
  background: #0d0908db;
}

.discord-community-stats > div {
  min-width: 0;
  padding: 0.55rem 0.7rem;
}

.discord-community-stats > div + div {
  border-left: 1px solid #82552e;
}

.discord-community-stats span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #9f7857;
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
}

.discord-community-stats i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #72d94d;
  box-shadow: 0 0 8px #72d94d;
}

.discord-community-stats strong {
  display: block;
  margin-top: 0.18rem;
  color: #f1cb89;
  font-family: "Cinzel", serif;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.discord-community-links {
  position: relative;
  z-index: 1;
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #684528;
  border-radius: 4px;
  background: #0b0807e8;
}

.discord-community-links a {
  min-width: 0;
  min-height: 34px;
  padding: 0.4rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: #d7b087;
  font-size: 0.58rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.discord-community-links a + a {
  border-left: 1px solid #3d291c;
}

.discord-community-links a:hover,
.discord-community-links a:focus-visible {
  color: #ffe4b9;
  background: #5c3d223d;
}

.discord-link-marker {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 1px;
}

.marker-giveaways {
  background: #ffbf4d;
}

.marker-news {
  background: #ef507f;
}

.marker-support {
  background: #e8ddc7;
}

.marker-trading {
  background: #6db9dd;
}

.discord-community-join {
  position: relative;
  z-index: 1;
  min-height: 46px;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid #ffe0a3;
  border-radius: 4px;
  color: #2b1708;
  background: linear-gradient(180deg, #ffe1a0, #cc852b);
  box-shadow: inset 0 1px 0 #fff1c9, 0 8px 20px #00000070;
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 160ms ease, transform 160ms ease;
}

.discord-community-join:hover,
.discord-community-join:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .quick-actions {
    right: 0.75rem;
    bottom: 0.75rem;
    display: grid;
  }

  .quick-actions > .quick-action:not(.discord-community-trigger) {
    display: none;
  }

  .discord-community-trigger {
    width: auto;
    min-height: 42px;
    padding-inline: 0.9rem;
  }

  .discord-community-popover {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 96;
    width: auto;
    transform: translateY(24px) scale(0.98);
    transform-origin: center bottom;
  }

  .discord-community-popover.is-open {
    transform: translateY(0) scale(1);
  }

  .discord-community-card {
    min-height: 0;
    padding: 1.1rem;
    background-position: 72% center;
  }

  .discord-community-stats {
    width: 72%;
  }
}

@media (max-width: 430px) {
  .discord-community-card {
    background:
      linear-gradient(90deg, #140d0df9 0%, #140d0ded 72%, #140d0dc9 100%),
      url("/tanitim/varlik/gorsel/hero-warrior-v2.jpg") 72% center / cover no-repeat;
  }

  .discord-community-heading h2 {
    font-size: 1.22rem;
  }

  .discord-community-stats {
    width: 100%;
  }

  .discord-community-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discord-community-links a:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #3d291c;
  }

  .discord-community-links a:nth-child(4) {
    border-top: 1px solid #3d291c;
  }
}

/* Persistent official launch date on presentation pages */
.showcase-launch-banner {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 56;
  min-width: 350px;
  padding: 1.08rem 1.35rem 1.12rem 1.55rem;
  display: grid;
  gap: 0.14rem;
  overflow: hidden;
  border: 2px solid #e0a153;
  border-radius: 6px;
  color: #ffe3b6;
  background:
    linear-gradient(135deg, #291915f2, #100b0aed),
    repeating-linear-gradient(135deg, transparent 0 13px, #e8ad620d 13px 14px);
  box-shadow:
    inset 0 0 34px #e8ad6224,
    0 0 0 1px #4d2d20,
    0 0 42px #e9a14c70,
    0 22px 44px #000000bf;
  pointer-events: none;
  transform: translateX(-50%);
}

.showcase-launch-banner::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 7px;
  background: linear-gradient(180deg, #ffe2a3, #bd672f);
  box-shadow: 0 0 16px #f2b56f;
}

.showcase-launch-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffe7b825, transparent);
  transform: skewX(-18deg);
  animation: showcase-launch-shine 5.5s ease-in-out infinite;
}

.showcase-launch-banner span,
.showcase-launch-banner small {
  position: relative;
  z-index: 1;
  color: #d8a467;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 1.75px;
  text-transform: uppercase;
}

.showcase-launch-banner time {
  position: relative;
  z-index: 1;
  color: #fff0d2;
  font-family: "Cinzel", serif;
  font-size: 2.35rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow:
    0 0 10px #fff0d240,
    0 0 26px #e6a45b8c;
}

.showcase-launch-banner small {
  color: #b98c68;
  margin-top: 0.12rem;
  font-size: 0.62rem;
  letter-spacing: 1.15px;
}

.presentation-only .showcase-arrow-up {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@keyframes showcase-launch-shine {
  0%,
  62% {
    left: -40%;
  }

  82%,
  100% {
    left: 125%;
  }
}

@media (max-width: 760px) {
  .showcase-launch-banner {
    top: 0.65rem;
    left: 50%;
    min-width: 245px;
    padding: 0.78rem 0.9rem 0.82rem 1.08rem;
  }

  .showcase-launch-banner span {
    font-size: 0.58rem;
    letter-spacing: 1.1px;
  }

  .showcase-launch-banner time {
    font-size: 1.55rem;
  }

  .showcase-launch-banner small {
    font-size: 0.5rem;
  }

  .presentation-only .showcase-arrow-up {
    top: 6.9rem;
    right: 0.65rem;
    left: auto;
    transform: none;
  }

  .presentation-only .showcase-arrow-up:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 360px) and (max-height: 620px) {
  .showcase-launch-banner {
    min-width: 218px;
    padding-block: 0.62rem;
  }

  .showcase-launch-banner time {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-launch-banner::after {
    animation: none;
  }
}

/* ==========================================================================
   KRIPTOMT2 WEB-MATCHED FRAME & THEME SYSTEM (Metin2 Presentation)
   ========================================================================== */
:root {
  --bg: #0A0813;
  --surface: #15111F;
  --surface-2: #1F1830;
  --line: #2C2542;
  --accent: #E7B24C;
  --accent-2: #F4CE7A;
  --lilac: #B99CE6;
  --text: #F3EEF7;
  --muted: #B3A9C4;
  --faint: #7A7192;
  --radius: 16px;
}

/* Embers canvas (floating rising fire particles strictly behind cards) */
.bg__embers {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  z-index: 1 !important;
}

.showcase-track {
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   PREFACE (ÖN SÖZ) & VIDEO BACKGROUND SLIDE
   ========================================================================== */
.showcase-slide-preface {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100% !important;
  padding: 0 1.2rem !important;
  margin: 0 !important;
}

.preface-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.85 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.preface-video-scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 45%, rgba(10, 8, 19, 0.45) 85%, rgba(10, 8, 19, 0.78) 100%),
    linear-gradient(180deg, rgba(10, 8, 19, 0.45) 0%, rgba(10, 8, 19, 0.15) 40%, rgba(10, 8, 19, 0.55) 78%, rgba(10, 8, 19, 0.88) 100%) !important;
  pointer-events: none !important;
}

.preface-wrapper {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: min(840px, 94vw) !important;
  margin: 0 auto !important;
  gap: clamp(1rem, 2.2vw, 1.8rem) !important;
}

/* Wide Frameless Countdown Timer (No Border, No Small Box) */
/* Compact Countdown Timer */
.preface-countdown-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.preface-opening-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-bottom: 0.2rem !important;
  color: #E7B24C !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(0.62rem, 0.75vw, 0.72rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.preface-countdown {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.4rem, 1.5vw, 1.2rem) !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.p-cd-unit {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: clamp(38px, 5vw, 58px) !important;
}

.p-cd-num {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.35rem, 2.5vw, 2.0rem) !important;
  line-height: 1 !important;
  color: #F3EEF7 !important;
  text-shadow: 0 3px 20px rgba(231, 178, 76, 0.35), 0 0 12px rgba(231, 178, 76, 0.2) !important;
  font-variant-numeric: tabular-nums !important;
}

.p-cd-lbl {
  margin-top: 0.2rem !important;
  font-size: clamp(0.48rem, 0.58vw, 0.56rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #B3A9C4 !important;
  font-family: "Cinzel", Georgia, serif !important;
}

.p-cd-sep {
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.1rem, 2.0vw, 1.6rem) !important;
  line-height: 1 !important;
  color: #E7B24C !important;
  opacity: 0.6 !important;
  padding-bottom: 0.6rem !important;
}

.showcase-card.showcase-preface-card,
.showcase-preface-card {
  position: relative !important;
  z-index: 3 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: min(580px, 88vw) !important;
  width: 100% !important;
  text-align: center !important;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 3.2vw, 2.4rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  /* legacy bg stripped */
  /* legacy border stripped */
  border-radius: 16px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.showcase-preface-title {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: #F3EEF7 !important;
  margin: 0.35rem 0 0.85rem !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 25px rgba(231, 178, 76, 0.3) !important;
}

.showcase-preface-content {
  max-width: 500px !important;
  color: #B3A9C4 !important;
  font-size: clamp(0.84rem, 1vw, 0.92rem) !important;
  line-height: 1.6 !important;
}

.showcase-preface-content p + p {
  margin-top: 0.75rem !important;
}

/* Scroll Prompt & Arrow Animation */
.showcase-scroll-prompt {
  margin-top: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.2s ease !important;
}

.showcase-scroll-prompt:hover {
  transform: translateY(2px) !important;
}

.showcase-scroll-text {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #E7B24C !important;
  animation: scroll-text-pulse 2s ease-in-out infinite !important;
}

@keyframes scroll-text-pulse {
  0%, 100% {
    opacity: 0.55;
    text-shadow: 0 0 8px rgba(231, 178, 76, 0.2);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 18px rgba(231, 178, 76, 0.85), 0 0 30px rgba(244, 206, 122, 0.5);
  }
}

.showcase-scroll-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  /* legacy border stripped */
  /* legacy bg stripped */
  color: #E7B24C !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  animation: scroll-bob 2.2s ease-in-out infinite !important;
  transition: border-color 0.25s, color 0.25s, transform 0.25s !important;
}

.showcase-scroll-prompt:hover .showcase-scroll-arrow {
  border-color: #E7B24C !important;
  color: #F4CE7A !important;
  box-shadow: 0 0 16px rgba(231, 178, 76, 0.5) !important;
}

@keyframes scroll-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* Hide sidebar and BOTH up/down slide navigation buttons when at the intro / preface slide */
.showcase.is-intro .showcase-side-controls,
.showcase.is-intro .showcase-arrow-up,
.showcase.is-intro .showcase-arrow-down {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

.showcase-progress-item.is-preface-item {
  display: none !important;
}

.showcase-launch-banner {
  display: none !important;
}

/* Global scrollbars */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #E7B24C rgba(21, 17, 31, 0.85) !important;
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: rgba(10, 8, 19, 0.9) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F4CE7A, #E7B24C) !important;
  border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #FFE5A3 !important;
}

body.presentation-only {
  background: #0A0813 !important;
}

body.presentation-only::before {
  background: #0A0813 !important;
}

/* Showcase Slide Background Overlay */
.showcase-slide:not(.showcase-slide-preface)::before {
  background:
    linear-gradient(180deg, rgba(10, 8, 19, 0.65) 0%, rgba(15, 12, 24, 0.35) 48%, rgba(10, 8, 19, 0.72) 100%),
    var(--slide-bg) center / cover no-repeat !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.95) !important;
}

.showcase-slide:not(.showcase-slide-preface)::after {
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 45%, rgba(10, 8, 19, 0.32) 85%, rgba(10, 8, 19, 0.58) 100%),
    radial-gradient(85% 75% at 50% 40%, rgba(8, 6, 16, 0.30), rgba(8, 6, 16, 0.15) 55%, transparent 85%) !important;
}

/* ==========================================================================
   MAIN CARDS (EXACT FRAME STYLE FROM WEB NCARD - EXPANDED SIZE)
   ========================================================================== */
.showcase-card:not(.showcase-preface-card),
.showcase-card-wide:not(.showcase-preface-card),
.showcase-card-topic:not(.showcase-preface-card),
.showcase-sprint-card,
.showcase-fishing-card,
.showcase-qol-card,
.showcase-offline-card,
.showcase-shopsearch-card,
.showcase-character-sale-card,
.showcase-weaponstr-card,
.showcase-hunting-card,
.showcase-battlepass-card,
.showcase-premium-card,
.showcase-client-card,
.showcase-mining-card,
.showcase-horse-card,
.showcase-rebalance-card,
.showcase-upgrade-card,
.showcase-mounted-card,
.showcase-gaya-card,
.showcase-auto-run-card,
.showcase-group-card,
.showcase-drop-protect-card,
.showcase-voice-card,
.showcase-channel-card,
.showcase-knowledge-card,
.showcase-hunt-target-card,
.showcase-starter-card,
.showcase-artemisia-card,
.showcase-pet-card,
.showcase-gorev-card,
.showcase-crossplay-card {
  position: relative !important;
  z-index: 2 !important;
  /* legacy bg stripped */
  /* legacy border stripped */
  border-radius: 18px !important;
  padding: clamp(1.8rem, 2.6vw, 2.8rem) clamp(2rem, 3vw, 3.2rem) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
  transition: none !important;
  cursor: default !important;
}

/* Disable hover engage on main cards */
.showcase-card:hover,
.showcase-card-wide:hover,
.showcase-card-topic:hover {
  transform: none !important;
  border-color: #2C2542 !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5) !important;
}

.showcase-card h1,
.showcase-card h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.85rem, 2.8vw, 2.7rem) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  margin-bottom: 0.8rem !important;
  color: #F3EEF7 !important;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.6) !important;
}

.showcase-tag {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(0.72rem, 1vw, 0.84rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.45rem !important;
  color: #E7B24C !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

.showcase-card > p:last-child,
.showcase-copy p {
  color: #B3A9C4 !important;
  font-size: clamp(0.96rem, 1.15vw, 1.08rem) !important;
  line-height: 1.7 !important;
}

/* Media Elements (NO hover engage) */
.showcase-media {
  /* legacy border stripped */
  border-radius: 14px !important;
  background: rgba(10, 8, 19, 0.85) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4) !important;
  transform: none !important;
  transition: none !important;
  cursor: default !important;
}

.showcase-media::before,
.showcase-media::after {
  display: none !important;
}

.showcase-media:hover,
.showcase-media:focus-within {
  transform: none !important;
  border-color: #2C2542 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4) !important;
}

/* Navigation Arrows */
.showcase-arrow {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: 44px !important;
  height: 44px !important;
  /* legacy border stripped */
  border-radius: 12px !important;
  /* legacy bg stripped */
  color: #B3A9C4 !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
  z-index: 55 !important;
}

.showcase-arrow-up {
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.showcase-arrow-down {
  bottom: 1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.showcase-arrow:hover {
  border-color: #E7B24C !important;
  background: rgba(31, 24, 48, 0.9) !important;
  color: #F4CE7A !important;
  box-shadow: 0 0 18px rgba(231, 178, 76, 0.35) !important;
}

/* ==========================================================================
   SIDEBAR CONTROLS (LEFT POSITIONED WITH WEB FRAME)
   ========================================================================== */
.showcase-side-controls {
  position: fixed !important;
  left: clamp(0.5rem, 1.5vw, 1.2rem) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 52 !important;
  display: grid !important;
  gap: 0.55rem !important;
  width: min(260px, 32vw) !important;
}

.showcase-home-button {
  /* legacy border stripped */
  border-radius: 12px !important;
  /* legacy bg stripped */
  color: #F3EEF7 !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
  transform: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.showcase-home-button:hover {
  border-color: #E7B24C !important;
  background: rgba(31, 24, 48, 0.95) !important;
  color: #F4CE7A !important;
  box-shadow: 0 0 18px rgba(231, 178, 76, 0.35) !important;
  transform: none !important;
}

/* Progress List in Web Frame Style (NO hover engage) */
.showcase-progress-list {
  /* legacy bg stripped */
  /* legacy border stripped */
  border-radius: 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E7B24C rgba(21, 17, 31, 0.85) !important;
  transform: none !important;
}

.showcase-progress-list::-webkit-scrollbar {
  width: 6px !important;
}

.showcase-progress-list::-webkit-scrollbar-track {
  background: rgba(10, 8, 19, 0.9) !important;
  border-radius: 999px !important;
}

.showcase-progress-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F4CE7A, #E7B24C) !important;
  border-radius: 999px !important;
}

.showcase-progress-list::-webkit-scrollbar-thumb:hover {
  background: #FFE5A3 !important;
}

.showcase-progress-item {
  color: #B3A9C4 !important;
  border-radius: 8px !important;
  font-size: clamp(0.72rem, 1vw, 0.82rem) !important;
  transform: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.showcase-progress-item::before {
  /* legacy border stripped */
  background: rgba(10, 8, 19, 0.8) !important;
}

.showcase-progress-item:hover {
  border-color: transparent !important;
  color: #F3EEF7 !important;
  background: rgba(44, 37, 66, 0.5) !important;
  transform: none !important;
}

.showcase-progress-item.is-active {
  border-color: #E7B24C !important;
  background: rgba(44, 37, 66, 0.75) !important;
  color: #F3EEF7 !important;
  font-weight: 700 !important;
  transform: none !important;
}

.showcase-progress-item.is-active::before {
  border-color: #F4CE7A !important;
  background: linear-gradient(180deg, #F4CE7A, #E7B24C) !important;
  box-shadow: 0 0 10px rgba(231, 178, 76, 0.6) !important;
}

.showcase-progress-rail {
  /* legacy border stripped */
  border-radius: 999px !important;
  background: rgba(10, 8, 19, 0.85) !important;
}

.showcase-progress-fill {
  background: linear-gradient(180deg, #F4CE7A 0%, #E7B24C 100%) !important;
  box-shadow: 0 0 14px rgba(231, 178, 76, 0.6) !important;
}

/* Card Alignment for Left Sidebar (Excluded Preface Card) */
.showcase-card:not(.showcase-preface-card),
.showcase-card-wide:not(.showcase-preface-card),
.showcase-sprint-card,
.showcase-fishing-card,
.showcase-qol-card,
.showcase-offline-card,
.showcase-shopsearch-card,
.showcase-character-sale-card,
.showcase-weaponstr-card,
.showcase-hunting-card,
.showcase-battlepass-card,
.showcase-premium-card,
.showcase-client-card,
.showcase-mining-card,
.showcase-horse-card,
.showcase-rebalance-card,
.showcase-upgrade-card,
.showcase-mounted-card,
.showcase-gaya-card,
.showcase-auto-run-card,
.showcase-group-card,
.showcase-drop-protect-card,
.showcase-voice-card,
.showcase-channel-card,
.showcase-knowledge-card,
.showcase-hunt-target-card,
.showcase-knowledge-card,
.showcase-hunt-target-card,
.showcase-starter-card,
.showcase-artemisia-card,
.showcase-pet-card,
.showcase-legalsatis-card,
.showcase-gorev-card,
.showcase-crossplay-card {
  
  margin: 0 auto !important;
  max-width: min(1340px, 94vw) !important;
  width: 94vw !important;
}

@media (max-width: 1180px) {
  .showcase-card:not(.showcase-preface-card),
  .showcase-card-wide:not(.showcase-preface-card),
  .showcase-sprint-card,
  .showcase-fishing-card,
  .showcase-qol-card,
  .showcase-offline-card,
  .showcase-shopsearch-card,
  .showcase-character-sale-card,
  .showcase-weaponstr-card,
  .showcase-hunting-card,
  .showcase-battlepass-card,
  .showcase-premium-card,
  .showcase-client-card,
  .showcase-mining-card,
  .showcase-horse-card,
  .showcase-rebalance-card,
  .showcase-upgrade-card,
  .showcase-mounted-card,
  .showcase-gaya-card,
  .showcase-auto-run-card,
  .showcase-group-card,
  .showcase-drop-protect-card,
  .showcase-voice-card,
  .showcase-channel-card,
  .showcase-knowledge-card,
  .showcase-hunt-target-card,
  .showcase-starter-card,
  .showcase-artemisia-card,
  .showcase-pet-card,
  .showcase-legalsatis-card,
  .showcase-gorev-card,
  .showcase-crossplay-card {
    margin: 0 auto !important;
    max-width: 94vw !important;
    width: 94vw !important;
  }
}

@media (max-width: 640px) {
  .showcase-side-controls {
    left: 0.35rem !important;
    right: auto !important;
    width: 48px !important;
  }

  .showcase-card:not(.showcase-preface-card),
  .showcase-card-wide:not(.showcase-preface-card),
  .showcase-sprint-card,
  .showcase-fishing-card,
  .showcase-qol-card,
  .showcase-offline-card,
  .showcase-shopsearch-card,
  .showcase-character-sale-card,
  .showcase-weaponstr-card,
  .showcase-hunting-card,
  .showcase-battlepass-card,
  .showcase-premium-card,
  .showcase-client-card,
  .showcase-mining-card,
  .showcase-horse-card,
  .showcase-rebalance-card,
  .showcase-upgrade-card,
  .showcase-mounted-card,
  .showcase-gaya-card,
  .showcase-auto-run-card,
  .showcase-group-card,
  .showcase-drop-protect-card,
  .showcase-voice-card,
  .showcase-channel-card,
  .showcase-knowledge-card,
  .showcase-hunt-target-card,
  .showcase-starter-card,
  .showcase-artemisia-card,
  .showcase-pet-card,
  .showcase-legalsatis-card,
  .showcase-gorev-card,
  .showcase-crossplay-card {
    margin: 0 auto !important;
    max-width: 94vw !important;
    width: min(100%, 94vw) !important;
  }
}

/* Artemisia & Pet Slide Layouts & Media */
.showcase-artemisia-layout,
.showcase-pet-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1.2fr) !important;
  align-items: center !important;
  gap: clamp(1.2rem, 2.5vw, 2.6rem) !important;
}

.showcase-artemisia-media,
.showcase-pet-media {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.showcase-artemisia-media img,
.showcase-pet-media img {
  width: 100% !important;
  height: auto !important;
  max-height: min(480px, 58vh) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7)) !important;
}

@media (max-width: 1080px) {
  .showcase-artemisia-layout,
  .showcase-pet-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Starter Slide Layout */
.showcase-starter-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(1.2rem, 2.5vw, 2.4rem) !important;
}

.starter-deck-selector {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin: 1.2rem 0 1rem !important;
}

.starter-badge-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.65rem 0.85rem !important;
  background: rgba(18, 13, 24, 0.88) !important;
  border: 1.5px solid rgba(231, 178, 76, 0.35) !important;
  border-radius: 12px !important;
  color: #B3A9C4 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.starter-badge-item .badge-info strong {
  display: block !important;
  color: #FFFFFF !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

.starter-badge-item .badge-info small {
  display: block !important;
  color: #A69DB8 !important;
  font-size: 0.72rem !important;
}

.starter-badge-item:hover {
  border-color: #E7B24C !important;
  background: rgba(35, 27, 54, 0.95) !important;
  color: #F3EEF7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 12px rgba(231, 178, 76, 0.3) !important;
}

.starter-badge-item:hover .badge-info strong {
  color: #FFE640 !important;
}

.starter-badge-item.active {
  border-color: #E7B24C !important;
  background: rgba(44, 37, 66, 0.95) !important;
  color: #F3EEF7 !important;
  box-shadow: 0 0 16px rgba(231, 178, 76, 0.4) !important;
}

.starter-badge-item.active .badge-info strong {
  color: #FFE640 !important;
}

.badge-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(231, 178, 76, 0.25), rgba(21, 17, 31, 0.8)) !important;
  border: 1px solid #E7B24C !important;
  color: #F4CE7A !important;
  font-family: "Cinzel", serif !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

.badge-info {
  display: flex !important;
  flex-direction: column !important;
}

.badge-info strong {
  font-size: 0.84rem !important;
  color: #F3EEF7 !important;
  line-height: 1.2 !important;
}

.badge-info small {
  font-size: 0.68rem !important;
  color: #B3A9C4 !important;
  margin-top: 2px !important;
}

.deck-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-top: 0.8rem !important;
}

.deck-swap-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  /* legacy border stripped */
  /* legacy bg stripped */
  color: #E7B24C !important;
  font-family: "Cinzel", serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

.deck-swap-btn:hover {
  border-color: #E7B24C !important;
  background: rgba(44, 37, 66, 0.9) !important;
  color: #F4CE7A !important;
  box-shadow: 0 0 16px rgba(231, 178, 76, 0.35) !important;
  transform: translateY(-1px) !important;
}

.deck-hint-text {
  font-size: 0.74rem !important;
  color: #B3A9C4 !important;
  opacity: 0.85 !important;
}

/* ==========================================================================
   DIAGONAL LAYERED STACK CONTAINER
   ========================================================================== */
.showcase-deck-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  min-height: 440px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 1200px !important;
  padding: 1rem !important;
}

.showcase-deck-stage {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
}

.deck-card {
  position: absolute !important;
  cursor: pointer !important;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.45s ease, z-index 0.45s ease, filter 0.45s ease !important;
  user-select: none !important;
  outline: none !important;
}

/* Card 1: 16 Lv Başlangıç (Sol Üst Çapraz) */
.deck-card-1 {
  top: 0 !important;
  left: 0 !important;
  width: min(340px, 75%) !important;
}

.deck-card-1.is-front {
  transform: translate(0, 0) scale(1) rotate(-1.5deg) !important;
  z-index: 6 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.8)) !important;
}

.deck-card-1.is-back {
  transform: translate(-30px, -20px) scale(0.86) rotate(-5deg) !important;
  z-index: 2 !important;
  opacity: 0.65 !important;
  filter: brightness(0.65) blur(0.5px) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6)) !important;
}

/* Card 2: 35 Lv Grand Master (Sağ Alt Çapraz) */
.deck-card-2 {
  bottom: 0 !important;
  right: 0 !important;
  width: min(360px, 78%) !important;
}

.deck-card-2.is-front {
  transform: translate(0, 0) scale(1) rotate(1.5deg) !important;
  z-index: 6 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.8)) !important;
}

.deck-card-2.is-back {
  transform: translate(30px, 20px) scale(0.86) rotate(5deg) !important;
  z-index: 2 !important;
  opacity: 0.65 !important;
  filter: brightness(0.65) blur(0.5px) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6)) !important;
}

.deck-card:hover.is-back {
  opacity: 0.88 !important;
  filter: brightness(0.85) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7)) !important;
}

.deck-card-inner {
  position: relative !important;
  /* legacy bg stripped */
  border: 1.5px solid #2C2542 !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.deck-card.is-front:hover .deck-card-inner {
  border-color: #E7B24C !important;
  box-shadow: 0 0 25px rgba(231, 178, 76, 0.3), 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

.deck-card-inner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 340px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: rgba(10, 8, 19, 0.6) !important;
}

.deck-card-tag {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 8px !important;
  background: rgba(10, 8, 19, 0.88) !important;
  border: 1px solid #E7B24C !important;
  color: #F4CE7A !important;
  font-family: "Cinzel", serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

.deck-zoom-hint {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 8px !important;
  /* legacy bg stripped */
  /* legacy border stripped */
  color: #F3EEF7 !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
  transition: all 0.2s ease !important;
}

.deck-card.is-front:hover .deck-zoom-hint {
  opacity: 1 !important;
  border-color: #E7B24C !important;
  color: #E7B24C !important;
  background: rgba(35, 27, 54, 0.95) !important;
}

/* Floating swap button on deck */
.deck-floating-swap {
  position: absolute !important;
  right: 42% !important;
  top: 48% !important;
  transform: translate(50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2c2146, #15111f) !important;
  border: 1.5px solid #E7B24C !important;
  color: #F4CE7A !important;
  display: grid !important;
  place-items: center !important;
  z-index: 10 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 18px rgba(231, 178, 76, 0.35) !important;
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.2s ease !important;
}

.deck-floating-swap:hover {
  transform: translate(50%, -50%) scale(1.15) rotate(180deg) !important;
  border-color: #FFE5A3 !important;
  color: #FFE5A3 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 28px rgba(231, 178, 76, 0.65) !important;
}

/* ==========================================================================
   LIGHTBOX / FULLSCREEN ZOOM MODAL
   ========================================================================= */
.showcase-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease !important;
}

.showcase-lightbox.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 6, 14, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.lightbox-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: min(92vw, 980px) !important;
  max-height: min(92vh, 880px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 1.2rem !important;
  /* legacy bg stripped */
  border: 1.5px solid #2C2542 !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(231, 178, 76, 0.25) !important;
  transform: scale(0.95) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.showcase-lightbox.is-active .lightbox-content {
  transform: scale(1) !important;
}

.lightbox-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(44, 37, 66, 0.85) !important;
  /* legacy border stripped */
  color: #F3EEF7 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.lightbox-close:hover {
  background: #E7B24C !important;
  color: #0A0813 !important;
  border-color: #F4CE7A !important;
  transform: scale(1.1) !important;
}

.lightbox-image-wrap {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.lightbox-image-wrap img {
  display: block !important;
  max-width: 100% !important;
  max-height: calc(80vh - 60px) !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.lightbox-caption {
  margin-top: 0.8rem !important;
  font-family: "Cinzel", serif !important;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #F4CE7A !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

@media (max-width: 1080px) {
  .showcase-starter-layout {
    grid-template-columns: 1fr !important;
  }

  .showcase-deck-wrapper {
    min-height: 380px !important;
  }

  .showcase-deck-stage {
    height: 360px !important;
  }

  .deck-card-1 {
    width: min(280px, 68%) !important;
  }

  .deck-card-2 {
    width: min(300px, 72%) !important;
  }
}

/* ==========================================================================
   ALL INNER BOXES, PANELS, LISTS & SUB-CONTAINERS (WEB FRAME STYLE)
   ========================================================================== */
.showcase-text-panel,
.showcase-mounted-panel,
.showcase-visual-placeholder,
.showcase-potion-quest,
.showcase-potion-flow div,
.showcase-potion-panel,
.showcase-fishing-quest,
.showcase-fishing-flow div,
.showcase-fishing-panel,
.showcase-qol-note,
.showcase-qol-flow div,
.showcase-qol-panel,
.showcase-offline-note,
.showcase-offline-flow div,
.showcase-offline-panel,
.showcase-shopsearch-note,
.showcase-shopsearch-flow div,
.showcase-shopsearch-panel,
.showcase-character-sale-focus,
.showcase-character-sale-core,
.showcase-character-sale-grid div,
.showcase-character-sale-note,
.showcase-character-sale-panel,
.showcase-weaponstr-note,
.showcase-weaponstr-icon-grid div,
.showcase-weaponstr-flow div,
.showcase-weaponstr-panel,
.showcase-hunting-note,
.showcase-hunting-flow div,
.showcase-hunting-panel,
.showcase-gaya-grid div,
.showcase-auto-run-note,
.showcase-auto-run-panel,
.showcase-group-panel,
.showcase-drop-protect-panel,
.showcase-drop-protect-cardlet,
.showcase-drop-protect-value,
.showcase-voice-panel,
.showcase-channel-panel,
.showcase-channel-mode,
.showcase-upgrade-card,
.showcase-battlepass-panel,
.showcase-battlepass-grid div,
.showcase-premium-grid div,
.showcase-premium-panel,
.showcase-client-node-grid div,
.showcase-client-panel,
.showcase-mining-flow div,
.showcase-mining-panel,
.showcase-horse-grid div,
.showcase-horse-panel,
.showcase-rebalance-grid div,
.showcase-rebalance-panel,
.showcase-craft-flow-step,
.showcase-craft-note,
.showcase-craft-panel,
.showcase-routes-source,
.showcase-routes-recipe,
.showcase-routes-panel,
.showcase-knowledge-flow > div,
.showcase-knowledge-note,
.showcase-hunt-target-points > div,
.showcase-hunt-target-card,
.showcase-knowledge-preview,
.showcase-boss-summary,
.showcase-boss-map-card,
.showcase-drop-rule,
.showcase-drop-note,
.showcase-warrior-panel,
.showcase-warrior-change,
.showcase-shaman-panel,
.showcase-shaman-change,
.showcase-ninja-panel,
.showcase-ninja-change,
.showcase-sura-panel,
.showcase-sura-spirit-tier,
.showcase-sura-spirit-tier-prime,
.showcase-sura-target-card,
.showcase-crafting-source-card,
.showcase-crafting-recipe-card,
.showcase-language-book-card,
.showcase-language-step,
.showcase-biologist-npc-card,
.showcase-biologist-note {
  /* legacy bg stripped */
  /* legacy border stripped */
  border-radius: 14px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
  transform: none !important;
  transition: none !important;
  cursor: default !important;
}

.showcase-text-panel::before,
.showcase-visual-placeholder::before,
.showcase-potion-panel::before,
.showcase-fishing-panel::before,
.showcase-qol-panel::before,
.showcase-offline-panel::before,
.showcase-shopsearch-panel::before,
.showcase-character-sale-panel::before,
.showcase-weaponstr-panel::before,
.showcase-craft-panel::before,
.showcase-routes-panel::before,
.showcase-warrior-panel::before,
.showcase-shaman-panel::before {
  display: none !important;
}

/* NO hover engage on inner boxes */
.showcase-text-panel:hover,
.showcase-potion-flow div:hover,
.showcase-fishing-flow div:hover,
.showcase-qol-flow div:hover,
.showcase-offline-flow div:hover,
.showcase-shopsearch-flow div:hover,
.showcase-character-sale-grid div:hover,
.showcase-weaponstr-icon-grid div:hover,
.showcase-weaponstr-flow div:hover,
.showcase-craft-note:hover,
.showcase-routes-source:hover,
.showcase-routes-recipe:hover,
.showcase-visual-placeholder:hover,
.showcase-warrior-change:hover,
.showcase-shaman-change:hover,
.showcase-ninja-change:hover,
.showcase-boss-map-card:hover,
.showcase-drop-rule:hover {
  transform: none !important;
  border-color: #2C2542 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* All list items inside text panels and cards */
.showcase-text-panel li,
.showcase-points li,
.showcase-sprint-points li,
.showcase-auto-run-points li,
.showcase-group-points li,
.showcase-voice-points li,
.showcase-channel-mode li,
.showcase-sura-target-card li,
.showcase-boss-list li,
.showcase-drop-protect-row {
  /* legacy border stripped */
  border-left: 3px solid #E7B24C !important;
  border-radius: 10px !important;
  background: rgba(31, 24, 48, 0.5) !important;
  color: #F3EEF7 !important;
  transform: none !important;
  transition: none !important;
}

.showcase-text-panel li:hover,
.showcase-points li:hover,
.showcase-sprint-points li:hover,
.showcase-auto-run-points li:hover,
.showcase-group-points li:hover,
.showcase-voice-points li:hover,
.showcase-boss-list li:hover {
  transform: none !important;
  border-color: #2C2542 !important;
  border-left-color: #E7B24C !important;
  background: rgba(31, 24, 48, 0.5) !important;
  color: #F3EEF7 !important;
  box-shadow: none !important;
}

/* Badges, Pills and markers */
.showcase-potion-notes span,
.showcase-qol-badges span,
.showcase-offline-badges span,
.showcase-shopsearch-badges span,
.showcase-weaponstr-badges span,
.showcase-hunting-badges span,
.showcase-character-sale-focus span,
.showcase-character-sale-core span,
.showcase-gaya-flow span,
.showcase-routes-source span,
.showcase-sprint-feature span,
.showcase-fishing-value span,
.showcase-language-badges span,
.showcase-biologist-badges span,
.showcase-crossplay-platforms span {
  /* legacy border stripped */
  border-radius: 999px !important;
  background: rgba(31, 24, 48, 0.6) !important;
  color: #F3EEF7 !important;
}

.showcase-potion-notes span::before,
.showcase-qol-badges span::before,
.showcase-offline-badges span::before,
.showcase-shopsearch-badges span::before,
.showcase-weaponstr-badges span::before,
.showcase-hunting-badges span::before {
  background: #E7B24C !important;
  box-shadow: 0 0 10px rgba(231, 178, 76, 0.6) !important;
}

/* Sub-headings, Strong tags, Em tags */
.showcase-text-panel h3,
.showcase-mounted-panel h3,
.showcase-potion-quest strong,
.showcase-potion-flow strong,
.showcase-fishing-quest strong,
.showcase-fishing-flow strong,
.showcase-fishing-value strong,
.showcase-qol-note strong,
.showcase-qol-flow strong,
.showcase-offline-note strong,
.showcase-offline-flow strong,
.showcase-shopsearch-note strong,
.showcase-shopsearch-flow strong,
.showcase-character-sale-focus strong,
.showcase-character-sale-core strong,
.showcase-character-sale-grid strong,
.showcase-character-sale-note strong,
.showcase-weaponstr-note strong,
.showcase-weaponstr-icon-grid strong,
.showcase-weaponstr-flow strong,
.showcase-hunting-note strong,
.showcase-hunting-flow strong,
.showcase-craft-note strong,
.showcase-routes-source strong,
.showcase-routes-recipe strong,
.showcase-knowledge-flow strong,
.showcase-knowledge-note strong,
.showcase-hunt-target-points strong,
.showcase-drop-protect-value strong,
.showcase-drop-protect-cardlet strong,
.showcase-drop-protect-row strong,
.showcase-channel-mode h3,
.showcase-boss-summary strong,
.showcase-boss-card-title,
.showcase-drop-rule strong,
.showcase-drop-note strong,
.showcase-warrior-change-head strong,
.showcase-shaman-change-head strong,
.showcase-ninja-change-head strong,
.showcase-class-note strong,
.showcase-sura-spirit-tier strong,
.showcase-sura-target-card strong,
.showcase-crafting-source-card strong,
.showcase-sprint-key strong,
.showcase-language-book-card strong,
.showcase-language-step strong,
.showcase-biologist-npc-card strong,
.showcase-biologist-note strong {
  color: #F4CE7A !important;
  font-family: "Cinzel", Georgia, serif !important;
}

/* Small text & Paragraphs inside panels */
.showcase-text-panel p,
.showcase-mounted-panel p,
.showcase-potion-quest p,
.showcase-potion-flow p,
.showcase-fishing-quest p,
.showcase-fishing-flow p,
.showcase-qol-note p,
.showcase-qol-flow p,
.showcase-offline-note p,
.showcase-offline-flow p,
.showcase-shopsearch-note p,
.showcase-shopsearch-flow p,
.showcase-character-sale-focus p,
.showcase-character-sale-core p,
.showcase-character-sale-grid p,
.showcase-character-sale-note p,
.showcase-weaponstr-note p,
.showcase-weaponstr-icon-grid p,
.showcase-weaponstr-flow p,
.showcase-hunting-note p,
.showcase-hunting-flow p,
.showcase-craft-note p,
.showcase-routes-recipe p,
.showcase-knowledge-flow p,
.showcase-knowledge-note,
.showcase-hunt-target-points p,
.showcase-drop-protect-value span,
.showcase-drop-protect-cardlet p,
.showcase-channel-summary,
.showcase-boss-summary span,
.showcase-drop-rule p,
.showcase-drop-note p,
.showcase-warrior-change p,
.showcase-shaman-change p,
.showcase-ninja-change p,
.showcase-class-note span {
  color: #B3A9C4 !important;
  line-height: 1.55 !important;
}

/* Icons & Images in panels */
.showcase-potion-elixirs span,
.showcase-fishing-items span,
.showcase-routes-ingredients,
.showcase-routes-source img,
.showcase-routes-ingredients img,
.showcase-routes-recipe strong img,
.showcase-crafting-source-card img,
.showcase-crafting-icons img,
.showcase-sprint-title-row img,
.showcase-sprint-feature img,
.showcase-biologist-row img,
.showcase-weaponstr-icon-grid img,
.showcase-item-icon,
.showcase-drop-icon-row {
  /* legacy border stripped */
  background: rgba(10, 8, 19, 0.8) !important;
  color: #F3EEF7 !important;
  border-radius: 8px !important;
}

.showcase-routes-ingredients b,
.showcase-craft-flow-arrow,
.showcase-language-arrow,
.showcase-crossplay-platforms b,
.showcase-warrior-change-head span,
.showcase-shaman-change-head span,
.showcase-ninja-change-head span,
.showcase-sura-target-card span,
.showcase-drop-rule span {
  color: #E7B24C !important;
}

/* Launch Banner (Web Accent Theme) */
.showcase-launch-banner {
  border: 1px solid rgba(231, 178, 76, 0.6) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(231, 178, 76, 0.12), rgba(185, 156, 230, 0.08)), rgba(21, 17, 31, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(231, 178, 76, 0.2) !important;
}

.showcase-launch-banner span,
.showcase-launch-banner small {
  color: #E7B24C !important;
  font-family: "Cinzel", Georgia, serif !important;
}

.showcase-launch-banner time {
  color: #F3EEF7 !important;
  text-shadow: 0 0 20px rgba(231, 178, 76, 0.4) !important;
}

/* Portait Images */
.showcase-warrior-portrait,
.showcase-shaman-portrait,
.showcase-ninja-portrait,
.showcase-sura-portrait {
  /* legacy border stripped */
  border-radius: 12px !important;
  background: rgba(31, 24, 48, 0.6) !important;
  color: #F3EEF7 !important;
}

.showcase-warrior-portrait img,
.showcase-shaman-portrait img,
.showcase-ninja-portrait img,
.showcase-sura-portrait img {
  /* legacy border stripped */
  border-radius: 8px !important;
}

.showcase-warrior-change em,
.showcase-shaman-change em,
.showcase-ninja-change em {
  /* legacy border stripped */
  background: rgba(10, 8, 19, 0.8) !important;
  color: #F4CE7A !important;
  border-radius: 6px !important;
}

.showcase-boss-list strong {
  border: 1px solid #E7B24C !important;
  background: linear-gradient(135deg, #F4CE7A, #E7B24C) !important;
  color: #1a1204 !important;
  border-radius: 6px !important;
}

.showcase-biologist-table {
  /* legacy border stripped */
  border-radius: 10px !important;
  overflow: hidden !important;
}

.showcase-biologist-head {
  background: rgba(31, 24, 48, 0.8) !important;
  color: #F4CE7A !important;
  font-family: "Cinzel", serif !important;
}

.showcase-biologist-row {
  border-bottom: 1px solid #2C2542 !important;
  color: #B3A9C4 !important;
}

/* Hide language switcher and epvp */
.language-switcher,
.epvp-footer-link,
#google_translate_element {
  display: none !important;
}




/* ==========================================================================
   KRIPTOMT2 DEFINITIVE LIGHTER BLUE THEME, FULL CENTERING & PROPORTIONAL SCALING
   ========================================================================== */

/* 1. HIDE ALL SIDEBAR / NAVIGATION BARS */
.showcase-progress,
.showcase-home-button,
.showcase-side-controls,
#showcaseProgress {
  display: none !important;
}

/* 2. FULL VIEWPORT SLIDE CONTAINER - STRICTLY CENTERED */
.showcase-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: clamp(1rem, 2vh, 2.5rem) 1.5rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Showcase slide background with var(--slide-bg) */
.showcase-slide:not(.showcase-slide-preface)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.65) 0%, rgba(12, 8, 18, 0.35) 48%, rgba(8, 5, 12, 0.75) 100%),
    var(--slide-bg) center / cover no-repeat !important;
  transform: scale(1.04) !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.95) !important;
  z-index: -2 !important;
}

/* ==========================================================================
   KRIPTOMT2 DEFINITIVE RESTORATION: CURSOR.CUR + EXACT METIN2 TOOLTIP + CLEAN STYLES
   ========================================================================== */

/* 1. OFFICIAL CURSOR.CUR STYLING */
html, body, .presentation-root, * {
  cursor: url("/tanitim/varlik/imlec/cursor.cur"), auto !important;
}

a, button, [role="button"], input, select, textarea,
.showcase-btn, .showcase-action-btn, .hequip-swap-btn,
.donusum-char-card, .donusum-toplu-text-link, .inv-slot,
.mt2-quest-row, .mt2-item-slot, .showcase-arrow,
.deck-swap-button, .showcase-deck-item, .quest-action-btn,
.mt2-window-close, .donusum-modal-close, .donusum-step-dot,
.donusum-item-icon-wrap, .donusum-step-icon-slot {
  cursor: url("/tanitim/varlik/imlec/cursor.cur"), pointer !important;
}

/* 2. BASE SLIDE DOCKING & CARDS */
.showcase-progress,
.showcase-home-button,
.showcase-side-controls,
#showcaseProgress {
  display: none !important;
}

.showcase-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
}

.showcase-card,
.showcase-card-wide,
.showcase-card-topic,
.showcase-crossplay-card,
.showcase-preface-card,
.showcase-donusum-card,
.showcase-offpazar-card,
.showcase-hequip-card,
.showcase-gorev-card,
.showcase-starter-card,
.showcase-pet-card,
.showcase-artemisia-card,
.showcase-legalsatis-card,
.showcase-sprint-card,
.showcase-fishing-card,
.showcase-potion-card,
.showcase-biologist-card,
.showcase-language-card,
.showcase-craft-card,
.showcase-hunt-target-card,
.showcase-channel-card-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 18px !important;
}

/* 3. 2-COLUMN MEDIA LAYOUTS */
.showcase-layout,
.showcase-crossplay-layout,
.showcase-artemisia-layout,
.showcase-pet-layout,
.showcase-starter-layout,
.showcase-gorev-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1.2fr) !important;
  align-items: center !important;
  gap: clamp(1.5rem, 3vw, 3.5rem) !important;
  width: 100% !important;
}

.showcase-media,
.showcase-starter-media,
.showcase-artemisia-media,
.showcase-pet-media,
.showcase-gorev-gif-wrap,
.showcase-gorev-media {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.showcase-media img,
.showcase-media video,
.showcase-starter-media img,
.showcase-starter-media video,
.showcase-artemisia-media img,
.showcase-artemisia-media video,
.showcase-pet-media img,
.showcase-pet-media video,
.showcase-gorev-gif-wrap img,
.showcase-gorev-gif-wrap video,
.showcase-gorev-media img {
  max-width: 100% !important;
  max-height: min(480px, 55vh) !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 4. GÖREVLER (SLIDE 05) - BUTTON & INTERACTIVE MODAL */
.showcase-gorev-actions {
  margin-top: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
}

.quest-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #E7B24C 0%, #B88627 100%) !important;
  color: #120B16 !important;
  font-family: "Cinzel", serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  box-shadow: 0 10px 25px rgba(231, 178, 76, 0.35), 0 6px 15px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.25s ease !important;
  border: 1px solid #FFE08A !important;
  text-decoration: none !important;
}

.quest-action-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: linear-gradient(135deg, #F4CE7A 0%, #D49B2E 100%) !important;
  box-shadow: 0 0 30px rgba(231, 178, 76, 0.6), 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

.quest-lightbox,
.mt2-quest-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease, visibility 0.24s ease !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

.quest-lightbox.is-active,
.mt2-quest-modal.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.quest-lightbox-backdrop,
.mt2-quest-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(4, 2, 8, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.mt2-quest-window {
  position: relative !important;
  width: min(860px, 98vw) !important;
  max-height: 94vh !important;
  background:
    radial-gradient(ellipse at top center, rgba(231, 178, 76, 0.08), transparent 70%),
    linear-gradient(180deg, #221714 0%, #140d0f 60%, #0c0709 100%) !important;
  border: 2px solid #6b4324 !important;
  border-radius: 6px !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(231, 178, 76, 0.35),
    inset 0 0 30px rgba(0, 0, 0, 0.9) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  user-select: none !important;
  z-index: 2 !important;
}

.mt2-window-titlebar {
  position: relative !important;
  height: 36px !important;
  background: linear-gradient(180deg, #442a1b 0%, #2b170e 50%, #190e09 100%) !important;
  border-bottom: 1.5px solid #6b4324 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.mt2-window-title {
  font-family: "Cinzel", serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 8px rgba(231, 178, 76, 0.6), 0 2px 4px #000 !important;
}

.mt2-window-close {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ab2e2e 0%, #601414 100%) !important;
  border: 1px solid #e06060 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
  transition: all 0.18s ease !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.mt2-window-close:hover {
  background: linear-gradient(180deg, #d33c3c 0%, #7e1d1d 100%) !important;
  border-color: #ff9999 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.mt2-window-body {
  display: grid !important;
  grid-template-columns: 310px 1fr !important;
  gap: 10px !important;
  padding: 10px !important;
  overflow-y: auto !important;
  max-height: calc(94vh - 36px) !important;
}

.mt2-quest-list-panel {
  background: rgba(14, 9, 11, 0.88) !important;
  border: 1px solid #54331a !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 480px !important;
}

.mt2-panel-header {
  padding: 8px 10px 6px !important;
  background: linear-gradient(180deg, #2b1a13 0%, #180f0c 100%) !important;
  border-bottom: 1px solid #4a2c16 !important;
}

.mt2-panel-header h4 {
  margin: 0 !important;
  font-family: "Cinzel", serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #ffde94 !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.mt2-panel-header p {
  margin: 2px 0 0 !important;
  font-size: 0.68rem !important;
  color: #9e8574 !important;
}

.mt2-quest-scroll-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.mt2-quest-row {
  position: relative !important;
  height: 52px !important;
  background: rgba(26, 17, 19, 0.8) !important;
  border: 1px solid #3d2312 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 7px !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

.mt2-quest-row:hover {
  background: rgba(231, 178, 76, 0.1) !important;
  border-color: #7d4f24 !important;
}

.mt2-quest-row.is-active {
  background: linear-gradient(90deg, rgba(231, 178, 76, 0.28) 0%, rgba(231, 178, 76, 0.08) 100%) !important;
  border-color: #E7B24C !important;
  box-shadow: 0 0 10px rgba(231, 178, 76, 0.3), inset 0 0 8px rgba(231, 178, 76, 0.18) !important;
}

.mt2-quest-row-icon {
  width: 26px !important;
  height: 26px !important;
  margin-right: 7px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important;
}

.mt2-quest-row-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mt2-quest-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

.mt2-quest-row-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #FFF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mt2-quest-row.is-active .mt2-quest-row-title {
  color: #FFE699 !important;
  text-shadow: 0 0 6px rgba(231, 178, 76, 0.5) !important;
}

.mt2-quest-row-badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.04em !important;
}

.badge-aktif {
  background: rgba(231, 178, 76, 0.25) !important;
  color: #ffde6b !important;
  border: 1px solid rgba(231, 178, 76, 0.5) !important;
}

.badge-pet {
  background: rgba(100, 210, 255, 0.25) !important;
  color: #64d2ff !important;
  border: 1px solid rgba(100, 210, 255, 0.5) !important;
}

.mt2-quest-row-bot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 2px !important;
}

.mt2-quest-row-sub {
  font-size: 0.65rem !important;
  color: #a89485 !important;
}

.mt2-quest-row-lvl {
  font-size: 0.65rem !important;
  color: #857060 !important;
  font-weight: 600 !important;
}

.mt2-quest-row-mini-icons {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin-left: 5px !important;
  flex-shrink: 0 !important;
}

.mt2-quest-row-mini-icons img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 2px !important;
  background: #140d0f !important;
  border: 1px solid #432815 !important;
  object-fit: contain !important;
}

.mt2-quest-detail-panel {
  background: rgba(14, 9, 11, 0.88) !important;
  border: 1px solid #54331a !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 12px !important;
  height: 480px !important;
  box-sizing: border-box !important;
}

.mt2-detail-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #3d2312 !important;
  padding-bottom: 5px !important;
  margin-bottom: 6px !important;
}

.mt2-detail-title {
  font-family: "Cinzel", serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffde7a !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  text-shadow: 0 0 8px rgba(231, 178, 76, 0.5) !important;
}

.mt2-detail-lvl {
  font-size: 0.72rem !important;
  color: #b89f8a !important;
}

.mt2-chamber-stage {
  position: relative !important;
  width: 100% !important;
  height: 185px !important;
  background: url('/tanitim/varlik/gorsel/quest_chamber_bg.png') center bottom / cover no-repeat !important;
  border: 1.5px solid #7d4f24 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
}

.mt2-chamber-aura {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 65% !important;
  height: 30px !important;
  background: radial-gradient(ellipse at center, rgba(231, 178, 76, 0.3) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 80%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Mob Breathing Animation */
.mt2-chamber-mob {
  position: relative !important;
  z-index: 2 !important;
  max-height: 160px !important;
  max-width: 90% !important;
  object-fit: contain !important;
  margin-bottom: 4px !important;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(231, 178, 76, 0.3)) !important;
  animation: mobFloatBreathe 3.6s ease-in-out infinite !important;
  transform-origin: bottom center !important;
  transition: opacity 0.2s ease !important;
}

@keyframes mobFloatBreathe {
  0%, 100% {
    transform: translate(var(--mob-offset-x, 0px), 0px) scale(var(--mob-scale, 1)) !important;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(231, 178, 76, 0.25)) !important;
  }
  50% {
    transform: translate(var(--mob-offset-x, 0px), -8px) scale(calc(var(--mob-scale, 1) * 1.03), calc(var(--mob-scale, 1) * 0.985)) !important;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(231, 178, 76, 0.5)) !important;
  }
}

.mt2-info-grid {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  gap: 3px 8px !important;
  font-size: 0.74rem !important;
  margin-bottom: 5px !important;
}

.mt2-info-lbl {
  color: #64d2ff !important;
  font-weight: 700 !important;
}

.mt2-info-val {
  color: #fff !important;
  line-height: 1.3 !important;
}

.mt2-prog-wrap {
  margin-bottom: 6px !important;
}

.mt2-prog-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.7rem !important;
  margin-bottom: 2px !important;
}

.mt2-prog-header .lbl {
  color: #64d2ff !important;
  font-weight: 700 !important;
}

.mt2-prog-header .val {
  color: #ffde6b !important;
  font-weight: 700 !important;
}

.mt2-prog-bar-track {
  position: relative !important;
  height: 9px !important;
  background: #11090a !important;
  border: 1px solid #5a381f !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.mt2-prog-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #a16823 0%, #e7b24c 50%, #fff1a8 100%) !important;
  width: 0% !important;
  border-radius: 3px !important;
  box-shadow: 0 0 6px rgba(231, 178, 76, 0.8) !important;
}

.mt2-rewards-split {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 10px !important;
  border-top: 1px solid #3d2312 !important;
  padding-top: 6px !important;
  margin-top: auto !important;
}

.mt2-rewards-sec h5 {
  margin: 0 0 5px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.mt2-rewards-sec.items h5 {
  color: #58ecff !important;
}

.mt2-rewards-sec.applies h5 {
  color: #ffd740 !important;
}

.mt2-slots-row {
  display: flex !important;
  gap: 5px !important;
}

.mt2-item-slot {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  background: #0f090b !important;
  border: 1px solid #4a2c16 !important;
  border-radius: 3px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

.mt2-item-slot:hover {
  border-color: #e7b24c !important;
  box-shadow: 0 0 8px rgba(231, 178, 76, 0.5) !important;
  transform: scale(1.06) !important;
}

.mt2-item-slot img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

.mt2-item-count {
  position: absolute !important;
  bottom: 1px !important;
  right: 2px !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px #000, 0 0 4px #000 !important;
  pointer-events: none !important;
}

.mt2-applies-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.mt2-applies-list li {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #70ff70 !important;
  text-shadow: 0 0 5px rgba(112, 255, 112, 0.35) !important;
  line-height: 1.25 !important;
}

.mt2-applies-list li::before {
  content: "- " !important;
  color: #a8ffa8 !important;
}

/* 5. DÖNÜŞÜMLER (SLIDE 06) - NO CARD BORDER + CENTERED SHAMAN */
.showcase-slide-donusum {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.donusum-carousel-stage {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.2rem !important;
  margin-top: 1rem !important;
}

.donusum-toplu-text-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 24px !important;
  background: rgba(22, 16, 26, 0.75) !important;
  border: 1px solid #7d4f24 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.donusum-toplu-text-link:hover {
  background: rgba(45, 25, 20, 0.9) !important;
  border-color: #ffd27a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(231, 178, 76, 0.3) !important;
}

.donusum-toplu-heading {
  font-family: "Cinzel", serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #ffde7a !important;
  letter-spacing: 0.08em !important;
}

.donusum-toplu-subtext {
  font-size: 0.82rem !important;
  color: #B3A9C4 !important;
}

.donusum-track-viewport {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 0 !important;
}

.donusum-char-track {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
}

/* NO BORDER ON CHARACTER CARDS */
.donusum-char-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  width: 130px !important;
  cursor: pointer !important;
  transition: transform 0.22s ease !important;
}

.donusum-char-card:hover {
  transform: translateY(-6px) scale(1.05) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.donusum-char-img-wrap {
  width: 120px !important;
  height: 165px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.donusum-char-img-wrap img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Şaman Centering Offset Fix */
.donusum-char-card[data-char="saman"] .donusum-char-img-wrap img {
  transform: translateX(12px) !important;
}

.donusum-char-card:hover .donusum-char-img-wrap img {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 8px 20px rgba(231, 178, 76, 0.45)) drop-shadow(0 4px 10px rgba(0,0,0,0.9)) brightness(1.1) !important;
}

.donusum-char-card[data-char="saman"]:hover .donusum-char-img-wrap img {
  transform: translateX(12px) scale(1.08) !important;
}

.donusum-char-name {
  font-family: "Cinzel", serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffde7a !important;
  letter-spacing: 0.06em !important;
  margin-top: 6px !important;
  text-align: center !important;
}

/* DÖNÜŞÜM MODAL WINDOW (EXPANDED + NO SCROLLBAR) */
.donusum-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  padding: 1rem !important;
  overflow: hidden !important;
}

.donusum-modal.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.donusum-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(4, 3, 8, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.donusum-modal-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(1380px, 98vw) !important;
  max-width: 1380px !important;
  min-height: 540px !important;
  max-height: 96vh !important;
  background: rgba(16, 11, 14, 0.98) !important;
  border: 1.5px solid #6b4324 !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 30px rgba(231, 178, 76, 0.2) !important;
  padding: 2.2rem 2.2rem 2.4rem !important; /* Slightly reduced bottom padding */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

.donusum-modal-content::-webkit-scrollbar,
.donusum-modal-body::-webkit-scrollbar,
.donusum-tree-stage::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.donusum-modal-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(36, 20, 18, 0.9) !important;
  border: 1px solid #d4a359 !important;
  color: #ffde7a !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.donusum-modal-close:hover {
  background: #d4a359 !important;
  color: #120b0d !important;
  transform: rotate(90deg) scale(1.1) !important;
}

.donusum-modal-header {
  text-align: center !important;
  margin-bottom: 0.6rem !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.donusum-modal-title {
  font-family: "Cinzel", serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.3rem 0 !important;
  text-shadow: 0 0 16px rgba(231, 178, 76, 0.5) !important;
  letter-spacing: 0.06em !important;
}

.donusum-modal-notice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #ffdf85 !important;
  background: rgba(231, 178, 76, 0.1) !important;
  border: 1px solid rgba(231, 178, 76, 0.3) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.9rem !important;
  margin: 0 auto !important;
}

.donusum-modal-body {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

.donusum-tree-stage {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  padding: 0.5rem 0 !important;
}

/* PERFECT VERTICAL SPACING & ALIGNMENT: EXPANDED MODAL + NO SCROLLBAR + INCREASED WEAPON/ARMOR GAP */
.donusum-stage-layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.2rem !important;
  margin: 0 auto !important;
}

.donusum-trees-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  gap: 3.8rem !important; /* Generously increased distance between weapons (eller) and armors (zırhlar) */
}

.donusum-vertical-tree-flow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  gap: 1.3rem !important; /* Compact clean helmets distance */
}

.donusum-vertical-tree-flow .donusum-flow-arrow-down {
  margin: 0 !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E7B24C !important;
  font-size: 0.95rem !important;
}

/* HORIZONTAL TREE FLOW & EXACT 64px ICON ALIGNMENT */
.donusum-tree-flow {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* NO BORDER ON TRANSFORMATION ITEMS */
.donusum-item-icon-wrap {
  position: relative !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

.donusum-item-icon-wrap:hover {
  transform: translateY(-3px) scale(1.12) !important;
  filter: drop-shadow(0 0 10px rgba(255, 215, 120, 0.85)) brightness(1.22) !important;
  z-index: 10 !important;
}

.donusum-item-icon-wrap img {
  max-width: 46px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) !important;
}

.donusum-flow-arrow {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E7B24C !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  user-select: none !important;
}

.donusum-flow-arrow-down {
  transform: rotate(90deg) !important;
  color: #E7B24C !important;
  font-size: 1.05rem !important;
  user-select: none !important;
}

/* +11 ~ +19 STEP GROUP CARD (PERFECTLY ALIGNED TOP ICON & LOWERED DOT BUTTONS) */
.donusum-step-group-wrap {
  position: relative !important;
  width: 108px !important;
  min-width: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  filter: none !important;
}

.donusum-step-group-wrap:hover {
  transform: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.donusum-step-icon-slot {
  width: 100% !important;
  height: 64px !important; /* MATCHES 64px EXACTLY */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.donusum-step-icon-slot img {
  max-width: 46px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

.donusum-step-icon-slot:hover img {
  transform: translateY(-3px) scale(1.12) !important;
  filter: drop-shadow(0 0 10px rgba(255, 215, 120, 0.85)) brightness(1.22) !important;
}

.donusum-step-dots-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  width: 100% !important;
  margin-top: 6px !important; /* Pushed down below the icon */
}

.donusum-step-dots-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

/* ONLY INDIVIDUAL DOT GETS HOVER */
.donusum-step-dot {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #180f12 !important;
  border: 1px solid rgba(231, 178, 76, 0.5) !important;
  color: #f4ce7a !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.donusum-step-dot:hover {
  background: linear-gradient(135deg, #f4ce7a 0%, #d49b2e 100%) !important;
  color: #100a0c !important;
  border-color: #ffe08a !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(231, 178, 76, 0.9) !important;
  transform: scale(1.18) !important;
  z-index: 5 !important;
}

.donusum-step-dot.is-active,
.donusum-step-dot.active {
  background: linear-gradient(135deg, #e7b24c 0%, #b88627 100%) !important;
  color: #100a0c !important;
  border-color: #ffe08a !important;
  font-weight: 800 !important;
  box-shadow: 0 0 8px rgba(231, 178, 76, 0.7) !important;
}

.donusum-step-dot-sm {
  width: 17px !important;
  height: 17px !important;
  font-size: 0.52rem !important;
}

/* TOPLU DÖNÜŞÜMLER MODAL LAYOUT */
.toplu-modal-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  width: 100% !important;
  max-width: 880px !important;
}

.toplu-category-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0.2rem 0 !important;
  width: 100% !important;
}

.toplu-category-title {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #F4CE7A !important;
  text-shadow: 0 0 10px rgba(231, 178, 76, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.4rem !important;
  border-bottom: 1px solid rgba(231, 178, 76, 0.3) !important;
  padding-bottom: 0.2rem !important;
  min-width: 140px !important;
}

.toplu-shields-row-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem 1.2rem !important;
  width: 100% !important;
}

.toplu-single-pair {
  display: flex !important;
  align-items: center !gap: 6px !important;
}

.toplu-split-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.6rem 1.5rem !important;
  width: 100% !important;
}

.donusum-converge-flow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.donusum-converge-inputs {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
}

.donusum-kupe-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.donusum-converge-bracket {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.donusum-converge-target {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.toplu-centered-flow {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.toplu-shoes-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* 6. HIZLI EKİPMAN (SLIDE 08) - KEPT 100% WORKING */
.hequip-tri-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.mt2-win {
  width: 176px !important;
  height: 252px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  flex: 0 0 176px !important;
  background: #160e10 !important;
  border: 1.5px solid #5a381f !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 0, 0, 0.85) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.mt2-win-titlebar {
  width: 100% !important;
  height: 22px !important;
  background: linear-gradient(180deg, #3d2315 0%, #20120b 100%) !important;
  border: 1px solid #6a4023 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}

.mt2-win-title {
  font-family: "Cinzel", serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #ffde7a !important;
  letter-spacing: 0.04em !important;
}

.mt2-win-close {
  width: 14px !important;
  height: 14px !important;
  background: #2a150b !important;
  border: 1px solid #7d4f24 !important;
  color: #ffde7a !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
  border-radius: 2px !important;
  cursor: pointer !important;
}

.mt2-win-body {
  position: relative !important;
  width: 162px !important;
  height: 194px !important;
  background: url("/tanitim/varlik/gorsel/envanter.png") center / contain no-repeat !important;
  border: 1px solid #4a2815 !important;
  border-radius: 3px !important;
  background-color: #100a0c !important;
  overflow: hidden !important;
}

.inv-slot {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  z-index: 2 !important;
}

.inv-slot:hover {
  filter: drop-shadow(0 0 6px #ffd07a) brightness(1.15) !important;
  transform: scale(1.06) !important;
}

.inv-slot img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

.slot-silah   { left: 3px !important;   top: 3px !important;   width: 32px !important; height: 96px !important; }
.slot-kask    { left: 43px !important;  top: 2px !important;   width: 32px !important; height: 32px !important; }
.slot-zirh    { left: 43px !important;  top: 37px !important;  width: 32px !important; height: 64px !important; }
.slot-ayakkabi{ left: 43px !important;  top: 149px !important; width: 32px !important; height: 32px !important; }
.slot-bilezik { left: 81px !important;  top: 72px !important;  width: 32px !important; height: 32px !important; }
.slot-kolye   { left: 120px !important; top: 73px !important;  width: 32px !important; height: 32px !important; }
.slot-kupe    { left: 116px !important; top: 43px !important;  width: 32px !important; height: 32px !important; }
.slot-unique1 { left: 116px !important; top: 151px !important; width: 32px !important; height: 32px !important; }
.slot-unique2 { left: 116px !important; top: 112px !important; width: 32px !important; height: 32px !important; }
.slot-kalkan  { left: 83px !important;  top: 44px !important;  width: 32px !important; height: 32px !important; }
.slot-yuzuk1  { left: 5px !important;   top: 150px !important; width: 32px !important; height: 32px !important; }
.slot-yuzuk2  { left: 80px !important;  top: 150px !important; width: 32px !important; height: 32px !important; }
.slot-kemer   { left: 80px !important;  top: 106px !important; width: 32px !important; height: 32px !important; }

.mt2-win-footer {
  width: 100% !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hequip-swap-btn {
  background: linear-gradient(135deg, #e7b24c 0%, #b88627 100%) !important;
  color: #120b0d !important;
  font-family: "Cinzel", serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  border: 1px solid #ffe08a !important;
  border-radius: 4px !important;
  padding: 3px 12px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(231, 178, 76, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.hequip-swap-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(231, 178, 76, 0.5) !important;
  filter: brightness(1.1) !important;
}

.mt2-inv-status-bar {
  width: 100% !important;
  height: 100% !important;
  background: #11090c !important;
  border: 1px solid #3d2315 !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  color: #8c7667 !important;
  font-family: "Cinzel", serif !important;
}

.hequip-video-stage {
  position: relative !important;
  width: 320px !important;
  height: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  flex: 0 0 320px !important;
  aspect-ratio: 1 / 1 !important;
  background: #000 !important;
  border: 1.5px solid #6b4c2b !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 0, 0, 0.8) !important;
  box-sizing: border-box !important;
}

.hequip-video-stage video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

/* 7. EXACT PHOTO-MATCHED METIN2 TOOLTIP */
.mt2-tooltip {
  position: fixed !important;
  z-index: 99999999 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.95) !important;
  border: 1px solid #d4a359 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(90, 56, 31, 0.9) !important;
  padding: 10px 14px !important;
  min-width: 180px !important;
  max-width: 280px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  border-radius: 2px !important;
  transition: opacity 0.12s ease !important;
  box-sizing: border-box !important;
}

.mt2-tooltip.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Decorative Corner Brackets (Exact match to screenshot) */
.mt2-tt-corner {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border: 1.5px solid #e2b474 !important;
  pointer-events: none !important;
}
.mt2-tt-tl { top: -2px !important; left: -2px !important; border-right: none !important; border-bottom: none !important; }
.mt2-tt-tr { top: -2px !important; right: -2px !important; border-left: none !important; border-bottom: none !important; }
.mt2-tt-bl { bottom: -2px !important; left: -2px !important; border-right: none !important; border-top: none !important; }
.mt2-tt-br { bottom: -2px !important; right: -2px !important; border-left: none !important; border-top: none !important; }

/* BRIGHT YELLOW TITLE */
.mt2-tooltip-title {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFE640 !important; /* Bright yellow as requested */
  text-align: center !important;
  margin: 0 0 4px 0 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

.mt2-tooltip-req {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: #FFFFFF !important; /* Pure white */
  text-align: center !important;
  margin: 0 0 6px 0 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

.mt2-tooltip-val,
.mt2-tooltip-bonus {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: #85f096 !important; /* Authentic green matching user photo */
  text-align: center !important;
  margin: 0 0 2px 0 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

.mt2-tooltip-values,
.mt2-tooltip-bonuses {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* KUTSANMIŞ METAL UPGRADE ROW & DIVIDER */
.mt2-tt-metal-divider {
  width: 90% !important;
  height: 1px !important;
  background: rgba(231, 178, 76, 0.45) !important;
  margin: 6px auto 5px !important;
}

.mt2-tt-metal-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.mt2-tt-metal-icon {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)) !important;
}

.mt2-tt-metal-text {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  color: #c4a768 !important; /* Dim / soft yellow */
  text-shadow: 1px 1px 2px #000 !important;
  line-height: 1.2 !important;
}

/* 8. HARİTA BEKÇİSİ (SLIDE 09) INTERACTIVE QUEST & MAP PREVIEW */
.showcase-harita-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(1080px, 94vw) !important;
  max-width: 1080px !important;
  padding: 2.2rem 2.4rem !important;
  box-sizing: border-box !important;
}

.showcase-harita-header {
  text-align: center !important;
  margin-bottom: 1.6rem !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.showcase-harita-header h2 {
  font-family: "Cinzel", serif !important;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0.2rem 0 0.4rem 0 !important;
  text-shadow: 0 0 16px rgba(231, 178, 76, 0.5), 0 2px 6px #000 !important;
  letter-spacing: 0.06em !important;
}

.showcase-harita-desc {
  font-size: 0.95rem !important;
  color: #B3A9C4 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.harita-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.4rem !important;
  width: 100% !important;
  min-height: 400px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.harita-quest-box {
  position: relative !important;
  width: 380px !important;
  height: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.5px solid #7d4f24 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(231, 178, 76, 0.2) !important;
  background: #000 !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease !important;
}

.harita-quest-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.harita-quest-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.harita-quest-dialog {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -46%) !important;
  width: 78% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  z-index: 5 !important;
}

.harita-quest-btn {
  width: 100% !important;
  padding: 8px 12px !important;
  background: rgba(14, 9, 12, 0.88) !important;
  border: 1px solid rgba(231, 178, 76, 0.4) !important;
  border-radius: 4px !important;
  color: #FFF !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.18s ease !important;
  text-shadow: 1px 1px 2px #000 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-sizing: border-box !important;
}

.harita-quest-btn:hover {
  background: linear-gradient(90deg, rgba(231, 178, 76, 0.35) 0%, rgba(231, 178, 76, 0.15) 100%) !important;
  border-color: #ffd27a !important;
  color: #ffea9f !important;
  transform: scale(1.03) !important;
  box-shadow: 0 0 10px rgba(231, 178, 76, 0.4) !important;
}

.harita-quest-btn.is-active {
  background: linear-gradient(90deg, #E7B24C 0%, #B88627 100%) !important;
  border-color: #FFE08A !important;
  color: #120B16 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 0 14px rgba(231, 178, 76, 0.6) !important;
  transform: scale(1.04) !important;
}

/* Initially preview is collapsed / hidden if not selected */
.harita-preview-box {
  position: relative !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 380px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #000 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

/* When a map option is clicked, stage smoothly expands side by side */
.harita-stage.has-active-map .harita-preview-box {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: 1.5px solid #7d4f24 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(231, 178, 76, 0.2) !important;
}

.harita-preview-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.harita-preview-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(2px) brightness(0.35) !important; /* Small blur so photo is clearly recognizable */
  transform: scale(1.06) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.harita-preview-overlay {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 1.4rem 1.5rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.harita-preview-title {
  font-family: "Cinzel", serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #FFE640 !important;
  margin: 0 0 0.75rem 0 !important;
  text-shadow: 0 0 10px rgba(231, 178, 76, 0.5), 1px 1px 3px #000 !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid rgba(231, 178, 76, 0.35) !important;
  padding-bottom: 0.4rem !important;
}

.harita-preview-text {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
  color: #FFFFFF !important;
  text-shadow: 1px 1px 2px #000, 0 0 4px #000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.harita-preview-text p {
  margin: 0 !important;
}

/* 9. GELİŞMİŞ RAPOR SİSTEMİ (SLIDE 10) */
.showcase-rapor-card {
  width: min(1180px, 94vw) !important;
  max-width: 1180px !important;
  padding: 2rem 2.8rem !important;
  box-sizing: border-box !important;
}

.showcase-rapor-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3rem !important;
  width: 100% !important;
}

.showcase-rapor-card .showcase-copy,
.showcase-rapor-copy {
  flex: 1 1 0% !important;
  max-width: 620px !important;
  opacity: 1 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.showcase-rapor-copy .showcase-tag {
  color: #E7B24C !important;
  font-family: "Cinzel", serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.35rem !important;
  text-shadow: 0 0 10px rgba(231, 178, 76, 0.4) !important;
}

.showcase-rapor-copy h2 {
  font-family: "Cinzel", serif !important;
  font-size: clamp(1.65rem, 2.5vw, 2.3rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0.2rem 0 0.85rem 0 !important;
  text-shadow: 0 0 16px rgba(231, 178, 76, 0.45), 0 2px 6px #000 !important;
  letter-spacing: 0.05em !important;
}

.showcase-rapor-card .showcase-rapor-desc,
.showcase-rapor-desc {
  font-size: 1.04rem !important;
  line-height: 1.65 !important;
  color: #D6CFE2 !important;
  margin: 0 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

.showcase-rapor-media-wrap {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.showcase-rapor-video-frame {
  position: relative !important;
  width: 360px !important;
  height: 480px !important;
  aspect-ratio: 3 / 4 !important; /* Exact 1080x1440 render ratio */
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #7d4f24 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(231, 178, 76, 0.25) !important;
  background: #000 !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.showcase-rapor-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Preserves 100% original uncropped video resolution */
  display: block !important;
  pointer-events: none !important;
}


.showcase-legalsatis-card {
  margin: 0 auto !important;
  max-width: min(1340px, 94vw) !important;
  width: 94vw !important;
  background: linear-gradient(rgba(14, 10, 20, 0.68), rgba(14, 10, 20, 0.78)), url('/tanitim/varlik/gorsel/legalsatis.jpg') center/cover no-repeat !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1.5px solid #7d4f24 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(231, 178, 76, 0.2) !important;
}

.showcase-legalsatis-copy h1 {
  color: #FFFFFF !important;
  text-shadow: 0 0 18px rgba(231, 178, 76, 0.6), 0 2px 8px #000, 0 0 4px #000 !important;
}

.showcase-legalsatis-copy p,
.showcase-legalsatis-copy li {
  color: #F3EEF9 !important;
  text-shadow: 1px 1px 3px #000, 0 0 6px #000, 0 0 10px #000 !important;
}

.showcase-legalsatis-copy strong {
  color: #FFE640 !important;
  text-shadow: 1px 1px 2px #000 !important;
}

/* DEFINITIVE SHOWCASE SLIDE BACKGROUND FIX */
.showcase-slide:not(.showcase-slide-preface)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.65) 0%, rgba(12, 8, 18, 0.35) 48%, rgba(8, 5, 12, 0.75) 100%),
    var(--slide-bg) center / cover no-repeat !important;
  transform: scale(1.04) !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.95) !important;
  z-index: -2 !important;
}

/* DEFINITIVE SHOWCASE SLIDE BACKGROUND VIBRANT RENDERING */
.showcase-slide:not(.showcase-slide-preface)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(8, 5, 12, 0.38) 0%, rgba(12, 8, 18, 0.15) 48%, rgba(8, 5, 12, 0.48) 100%),
    var(--slide-bg) center / cover no-repeat !important;
  transform: scale(1.02) !important;
  filter: saturate(1.15) contrast(1.05) brightness(1.0) !important;
  z-index: -2 !important;
}

.showcase-slide:not(.showcase-slide-preface)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(10, 8, 19, 0.25) 85%, rgba(10, 8, 19, 0.45) 100%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   DEFINITIVE SHOWCASE SLIDE BACKGROUND SYSTEM
   ========================================================================== */
.showcase-slide-starter {
  --slide-bg: url('/tanitim/varlik/gorsel/baslangicarka.jpg') !important;
}
.showcase-slide-artemisia {
  --slide-bg: url('/tanitim/varlik/gorsel/artemisarka.jpg') !important;
}
.showcase-slide-pet {
  --slide-bg: url('/tanitim/varlik/gorsel/petsistemiarka.jpg') !important;
}
.showcase-slide-legalsatis {
  --slide-bg: url('/tanitim/varlik/gorsel/legalsatis.jpg') !important;
}
.showcase-slide-donusum {
  --slide-bg: url('/tanitim/varlik/gorsel/donusumlerarka.jpg') !important;
}
.showcase-slide-hequip {
  --slide-bg: url('/tanitim/varlik/gorsel/hekipmanarka.jpg') !important;
}
.showcase-slide[data-topic="09"] {
  --slide-bg: url('/tanitim/varlik/gorsel/haritabekciarka.jpg') !important;
}
.showcase-slide[data-topic="10"] {
  --slide-bg: url('/tanitim/varlik/gorsel/raporarka.jpg') !important;
}

.showcase-slide:not(.showcase-slide-preface)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(180deg, rgba(8, 5, 12, 0.25) 0%, rgba(12, 8, 18, 0.10) 48%, rgba(8, 5, 12, 0.35) 100%),
    var(--slide-bg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  filter: saturate(1.1) contrast(1.05) brightness(1.0) !important;
  opacity: 1 !important;
  z-index: -2 !important;
}

.showcase-slide:not(.showcase-slide-preface)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 65%, rgba(10, 8, 19, 0.2) 85%, rgba(10, 8, 19, 0.35) 100%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* HIDE DISABLED NAV ARROWS (UP ON FIRST SLIDE, DOWN ON LAST SLIDE) */
.showcase-arrow:disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* CLASSIC PRESENTATION FOOTER */
.presentation-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0.85rem 1.5rem !important;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 5, 12, 0.85) 30%, rgba(8, 5, 12, 0.98) 100%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 50 !important;
  border-top: 1px solid rgba(231, 178, 76, 0.22) !important;
}

.presentation-footer-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  max-width: 1200px !important;
  width: 100% !important;
}

.presentation-footer-copy {
  margin: 0 !important;
  font-size: 0.84rem !important;
  color: #B3A9C4 !important;
  letter-spacing: 0.3px !important;
}

.presentation-footer-links {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.presentation-footer-links a {
  color: #E7B24C !important;
  text-decoration: none !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.presentation-footer-links a:hover {
  color: #FFE640 !important;
  text-shadow: 0 0 10px rgba(255, 230, 64, 0.6) !important;
  text-decoration: underline !important;
}

.footer-sep {
  color: rgba(231, 178, 76, 0.45) !important;
  font-size: 0.85rem !important;
}

/* ==========================================================================
   KRIPTOMT2 TOPBAR & PREFACE BRANDING
   ========================================================================== */
.topbar-hover-zone {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 25px !important;
  z-index: 99 !important;
}

.presentation-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 58px !important;
  padding: 0 clamp(1rem, 3vw, 2.5rem) !important;
  background: linear-gradient(180deg, rgba(8, 5, 12, 0.88) 0%, rgba(8, 5, 12, 0.45) 75%, transparent 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 100 !important;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.presentation-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.topbar-logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.3s ease !important;
}

.topbar-logo-img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) !important;
}

.topbar-logo-link:hover {
  transform: scale(1.04) !important;
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(78, 168, 255, 0.6)) !important;
}

.topbar-socials {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-left: auto !important;
}

.social-icon-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(26, 20, 36, 0.75) !important;
  border: 1px solid rgba(231, 178, 76, 0.35) !important;
  color: #D6C29E !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.social-icon-link svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

.social-icon-link:hover {
  transform: translateY(-2px) scale(1.08) !important;
}

.social-discord:hover {
  color: #7289DA !important;
  border-color: #7289DA !important;
  background: rgba(114, 137, 218, 0.25) !important;
  box-shadow: 0 0 12px rgba(114, 137, 218, 0.5) !important;
}

.social-instagram:hover {
  color: #E1306C !important;
  border-color: #E1306C !important;
  background: rgba(225, 48, 108, 0.25) !important;
  box-shadow: 0 0 12px rgba(225, 48, 108, 0.5) !important;
}

.social-youtube:hover {
  color: #FF2B2B !important;
  border-color: #FF2B2B !important;
  background: rgba(255, 43, 43, 0.25) !important;
  box-shadow: 0 0 12px rgba(255, 43, 43, 0.5) !important;
}

/* STATE 1: ON PREFACE (INTRO) SLIDE */
body.is-at-intro .presentation-header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body.is-at-intro .presentation-header .topbar-logo-link {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* STATE 2: ON OTHER SLIDES (SLIDES 1..10) */
body:not(.is-at-intro) .presentation-header {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

body:not(.is-at-intro) .presentation-header:hover,
body:not(.is-at-intro) .presentation-header.is-hovered,
body:not(.is-at-intro) .topbar-hover-zone:hover ~ .presentation-header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body:not(.is-at-intro) .presentation-header .topbar-logo-link {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* PREFACE MAIN LOGO BETWEEN COUNTDOWN AND PREFACE CARD */
.preface-logo-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0.8rem 0 1rem !important;
  z-index: 5 !important;
}

.preface-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease !important;
}

.preface-main-logo {
  height: clamp(80px, 11vh, 125px) !important;
  max-height: 135px !important;
  width: auto !important;
  max-width: min(540px, 90vw) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(78, 168, 255, 0.6)) !important;
}

.preface-logo-link:hover {
  transform: scale(1.05) translateY(-2px) !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 28px rgba(78, 168, 255, 0.65)) !important;
}

/* ==========================================================================
   KRIPTOMT2 PRELOADER & PROTECTION
   ========================================================================== */
body.presentation-only {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

#kriptoPreloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #08040b !important;
  background: radial-gradient(circle at center, #170e24 0%, #08040b 100%) !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
  pointer-events: auto !important;
}

#kriptoPreloader.preloader-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

.preloader-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 90vw !important;
}

.preloader-logo {
  height: clamp(85px, 12vh, 130px) !important;
  width: auto !important;
  max-width: min(520px, 85vw) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(78, 168, 255, 0.6)) !important;
  animation: preloaderPulse 2.2s ease-in-out infinite alternate !important;
}

@keyframes preloaderPulse {
  0% {
    transform: scale(0.98);
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(78, 168, 255, 0.4));
  }
  100% {
    transform: scale(1.03);
    filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 45px rgba(78, 168, 255, 0.85));
  }
}

.preloader-bar-wrap {
  position: relative !important;
  width: clamp(240px, 32vw, 360px) !important;
  height: 6px !important;
  margin-top: 2rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(231, 178, 76, 0.3) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.preloader-bar-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #b88628 0%, #e7b24c 50%, #ffe885 100%) !important;
  box-shadow: 0 0 12px rgba(231, 178, 76, 0.9) !important;
  border-radius: 3px !important;
  transition: width 0.35s ease !important;
  animation: preloaderProgress 2s ease-in-out infinite !important;
}

@keyframes preloaderProgress {
  0% {
    left: -40%;
    width: 40%;
  }
  50% {
    left: 20%;
    width: 60%;
  }
  100% {
    left: 100%;
    width: 30%;
  }
}

.preloader-text {
  margin-top: 1rem !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(0.72rem, 0.9vw, 0.84rem) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #D6C29E !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  opacity: 0.85 !important;
}