:root {
  --db-cream:#fff7e6; --db-cream-2:#f6e7c5; --db-ink:#2a1609; --db-brown:#5c2f10; --db-wood:#b96d22;
  --db-orange:#ff9f1c; --db-red:#f04f43; --db-blue:#238cff; --db-green:#45a94b; --db-purple:#8c52c8;
  --db-shadow:0 28px 78px rgba(45,24,8,.22); --db-radius:28px; --db-max:1180px;
}
.db-body { color:var(--db-ink); background:linear-gradient(180deg,#fffaf0 0%,#f5e7c9 55%,#fff9ee 100%); }
.db-body .site-header { background:rgba(255,250,240,.9); border-bottom-color:rgba(76,39,13,.12); }
.db-body .site-header.scrolled { background:rgba(255,250,240,.97); }
.db-body .site-nav { color:#6e513e; }
.db-body .site-nav a:hover,.db-body .site-nav a:focus-visible { color:#2a1609; }
.db-body .site-nav .nav-featured { color:#8a4415; }
.db-body .nav-toggle { border-color:rgba(76,39,13,.18); background:rgba(92,47,16,.06); }
.db-body .nav-toggle span { background:#2a1609; }
.db-body .brand { box-shadow:0 8px 24px rgba(74,40,16,.12); }
.db-main { overflow:hidden; }
.db-wrap { width:min(100% - 40px,var(--db-max)); margin:0 auto; }
.db-hero { position:relative; min-height:100vh; display:grid; align-items:center; padding:142px 0 82px; isolation:isolate; }
.db-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 80% 20%,rgba(255,159,28,.20),transparent 26rem),radial-gradient(circle at 12% 10%,rgba(35,140,255,.15),transparent 22rem),linear-gradient(rgba(92,47,16,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(92,47,16,.045) 1px,transparent 1px); background-size:auto,auto,72px 72px,72px 72px; }
.db-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr); gap:clamp(38px,7vw,92px); align-items:center; }
.db-title-lockup { display:flex; gap:20px; align-items:center; }
.db-title-lockup img { width:112px; height:112px; border-radius:28px; box-shadow:0 18px 48px rgba(77,42,12,.25); }
.db-kicker { margin:0 0 10px; color:#a15419; font-size:.78rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.db-title-lockup h1 { margin:0; color:#2a1609; font-size:clamp(3.2rem,8vw,6.9rem); line-height:.9; letter-spacing:-.055em; }
.db-tagline { margin:28px 0 0; font-size:clamp(2rem,5vw,4rem); line-height:.98; font-weight:900; letter-spacing:-.045em; color:#5c2f10; }
.db-lede { max-width:680px; margin:20px 0 0; color:#70513a; font-size:clamp(1.05rem,2vw,1.24rem); }
.db-store-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.store-button { display:inline-flex; min-width:210px; min-height:62px; align-items:center; gap:13px; padding:10px 18px; border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; background:#111; box-shadow:0 14px 32px rgba(42,22,9,.18); transition:transform .18s ease,box-shadow .18s ease; }
.store-button:hover,.store-button:focus-visible { transform:translateY(-2px); box-shadow:0 18px 40px rgba(42,22,9,.28); }
.store-button small,.store-button strong { display:block; line-height:1.05; }
.store-button small { font-size:.72rem; letter-spacing:.02em; }
.store-button strong { margin-top:3px; font-size:1.25rem; }
.store-apple { width:34px; font-size:2.2rem; line-height:1; text-align:center; }
.play-mark { position:relative; width:34px; height:36px; display:inline-block; overflow:hidden; }
.play-mark::before { content:""; position:absolute; inset:2px 0; clip-path:polygon(0 0,100% 50%,0 100%); background:linear-gradient(135deg,#35d36a 0 33%,#38a9ff 33% 61%,#ffd54a 61% 78%,#ff5c55 78%); }
.db-availability { margin:14px 0 0; color:#896b54; font-size:.9rem; }
.db-hero-media { display:grid; place-items:center; }
.db-phone { position:relative; width:min(100%,360px); aspect-ratio:9/18.7; padding:10px; border-radius:46px; background:linear-gradient(145deg,#3d210f,#100904); box-shadow:0 38px 92px rgba(66,32,7,.34),0 0 0 1px rgba(255,255,255,.28); transform:rotate(1.5deg); }
.db-phone::before { content:""; position:absolute; top:16px; left:50%; z-index:3; width:96px; height:22px; border-radius:999px; background:#140b05; transform:translateX(-50%); }
.db-phone video { width:100%; height:100%; object-fit:cover; border-radius:36px; background:#f6e7c5; }
.db-phone-glow { position:absolute; inset:8% -18% -10%; z-index:-1; filter:blur(30px); background:radial-gradient(circle,rgba(255,159,28,.34),transparent 62%); }
.db-section { padding:clamp(78px,10vw,132px) 0; }
.db-section-heading { max-width:720px; margin-bottom:42px; }
.db-section-heading.centered { margin-right:auto; margin-left:auto; text-align:center; }
.db-section-heading h2,.db-download h2 { margin:0; color:#2a1609; font-size:clamp(2.4rem,5.8vw,5rem); line-height:.98; letter-spacing:-.05em; }
.db-section-heading > p:last-child { color:#765944; font-size:1.05rem; }
.db-mechanics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.db-mechanic { position:relative; min-height:330px; padding:26px; border:1px solid rgba(92,47,16,.15); border-radius:var(--db-radius); background:rgba(255,255,255,.65); box-shadow:0 20px 54px rgba(74,40,16,.10); }
.db-step-number { display:inline-block; color:#a15419; font-size:.78rem; font-weight:900; letter-spacing:.14em; }
.tile-mini { display:flex; align-items:center; justify-content:center; gap:5px; min-height:105px; margin:24px 0 22px; border-radius:20px; background:#5a2d0e; }
.tile-mini b { display:grid; width:48px; height:48px; place-items:center; border:3px solid rgba(42,22,9,.5); border-radius:11px; color:#fff; font-size:1.35rem; text-shadow:0 2px 2px rgba(0,0,0,.3); }
.tile-mini b:nth-child(1){background:var(--db-red)} .tile-mini b:nth-child(2){background:var(--db-green)} .tile-mini b:nth-child(3){background:var(--db-blue)}
.tile-plan b:nth-child(1){background:var(--db-purple)} .tile-plan b:nth-child(2){background:var(--db-orange)} .tile-plan b:nth-child(3){background:var(--db-red)}
.tile-blast b { box-shadow:0 0 0 5px rgba(255,159,28,.18),0 0 28px rgba(255,159,28,.56); }
.db-mechanic h3,.db-feature h3 { margin:0 0 8px; color:#3d210f; font-size:1.45rem; }
.db-mechanic p,.db-feature p { margin:0; color:#765944; }
.db-trailer-section { background:linear-gradient(180deg,rgba(185,109,34,.10),rgba(255,255,255,.28)); border-top:1px solid rgba(92,47,16,.08); border-bottom:1px solid rgba(92,47,16,.08); }
.db-trailer-grid { display:grid; grid-template-columns:minmax(0,.72fr) minmax(320px,.72fr); gap:clamp(36px,7vw,90px); align-items:center; }
.db-trailer-card { width:min(100%,430px); justify-self:end; padding:10px; border-radius:38px; background:#3d210f; box-shadow:var(--db-shadow); }
.db-trailer-card video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:29px; background:#f6e7c5; }
.db-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.db-feature { min-height:270px; padding:28px; border:1px solid rgba(92,47,16,.14); border-radius:var(--db-radius); background:rgba(255,255,255,.72); box-shadow:0 18px 50px rgba(74,40,16,.09); }
.db-feature-icon { display:grid; width:54px; height:54px; place-items:center; margin-bottom:38px; border-radius:17px; color:#fff; background:linear-gradient(135deg,#ff9f1c,#f04f43); font-size:1.55rem; box-shadow:0 12px 24px rgba(240,79,67,.2); }
.db-feature:nth-child(2) .db-feature-icon { background:linear-gradient(135deg,#238cff,#8c52c8); }
.db-feature:nth-child(3) .db-feature-icon { background:linear-gradient(135deg,#45a94b,#ff9f1c); }
.db-gallery-section { background:#2b1609; color:#fff; }
.db-gallery-section .db-kicker { color:#ffc779; }
.db-gallery-section .db-section-heading h2 { color:#fff7e6; }
.db-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.db-gallery figure { margin:0; overflow:hidden; border-radius:24px; background:#fff7e6; box-shadow:0 24px 56px rgba(0,0,0,.26); }
.db-gallery img { width:100%; aspect-ratio:9/16; object-fit:cover; }
.db-gallery figcaption { padding:16px; color:#3d210f; font-weight:800; text-align:center; }
.db-download { padding:clamp(30px,6vw,64px); border:1px solid rgba(92,47,16,.17); border-radius:34px; background:radial-gradient(circle at 80% 10%,rgba(35,140,255,.18),transparent 20rem),radial-gradient(circle at 10% 90%,rgba(255,159,28,.22),transparent 20rem),rgba(255,255,255,.76); box-shadow:var(--db-shadow); text-align:center; }
.db-download-copy { display:flex; justify-content:center; align-items:center; gap:20px; }
.db-download-copy img { border-radius:24px; box-shadow:0 16px 40px rgba(74,40,16,.22); }
.db-download-copy p { margin:10px 0 0; color:#765944; }
.db-store-row-center { justify-content:center; }
.db-qr-area { margin-top:40px; padding-top:34px; border-top:1px solid rgba(92,47,16,.14); }
.db-qr-area > p { color:#765944; }
.db-qr-grid { display:flex; justify-content:center; gap:24px; margin-top:18px; }
.db-qr-grid a { display:grid; gap:10px; justify-items:center; padding:14px; border:1px solid rgba(92,47,16,.14); border-radius:20px; background:#fff; color:#3d210f; box-shadow:0 14px 32px rgba(74,40,16,.10); }
.db-qr-grid img { width:154px; height:154px; }
.db-footer { background:#1d0e05; color:#d7bea8; }
.db-footer strong { color:#fff7e6; }
.db-footer .footer-links a:hover { color:#ffc779; }
.video-unavailable::after { content:"Gameplay video will be added soon."; position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:#fff7e6; background:#3d210f; }
@media(max-width:980px){.db-hero-grid,.db-trailer-grid{grid-template-columns:1fr}.db-hero{min-height:auto}.db-hero-media{margin-top:12px}.db-trailer-card{justify-self:center}.db-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.db-mechanics,.db-feature-grid{grid-template-columns:1fr}.db-hero{padding-top:122px}.db-title-lockup img{width:86px;height:86px}.db-store-row{display:grid}.store-button{width:100%}.db-qr-area{display:none}.db-download-copy{align-items:flex-start;text-align:left}.db-gallery{gap:12px}.db-gallery figcaption{font-size:.88rem}}
@media(max-width:480px){.db-wrap{width:min(100% - 28px,var(--db-max))}.db-title-lockup{align-items:flex-start}.db-title-lockup h1{font-size:3rem}.db-tagline{font-size:2.3rem}.db-phone{width:290px}.db-gallery{grid-template-columns:1fr 1fr}.db-download-copy img{width:72px;height:72px}}


/* Playable demo */
.db-playable-section {
  background:
    radial-gradient(circle at 18% 22%, rgba(35,140,255,.13), transparent 22rem),
    radial-gradient(circle at 82% 78%, rgba(255,159,28,.18), transparent 24rem);
}

.db-playable-card {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(92,47,16,.18);
  border-radius: 40px;
  background: linear-gradient(145deg,#3d210f,#140b05);
  box-shadow: var(--db-shadow);
}

.db-playable-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 30px;
  background: #f6e7c5;
}

.db-playable-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f6e7c5;
  transition: opacity .2s ease;
}

.db-playable-frame.is-loading {
  opacity: .35;
}

.db-playable-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: #3d210f;
  background: #fff1cf;
  text-align: center;
}

.db-playable-loading[hidden],
.db-playable-cta[hidden] {
  display: none !important;
}

.db-playable-loading img {
  border-radius: 24px;
  box-shadow: 0 16px 38px rgba(74,40,16,.22);
}

.db-playable-cta {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(42,22,9,.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.db-playable-cta-card {
  width: min(100%, 390px);
  padding: 28px 24px 22px;
  border: 3px solid #6b3c16;
  border-radius: 32px;
  color: #3d210f;
  background:
    radial-gradient(circle at 88% 8%, rgba(35,140,255,.13), transparent 11rem),
    radial-gradient(circle at 8% 92%, rgba(255,159,28,.18), transparent 12rem),
    #fff1cf;
  box-shadow: 0 26px 70px rgba(0,0,0,.36);
  text-align: center;
}

.db-playable-icon-wrap img {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(74,40,16,.24);
}

.db-cta-tiles {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 14px;
}

.db-cta-tiles span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 3px solid rgba(42,22,9,.55);
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(0,0,0,.3);
}

.db-cta-tiles span:nth-child(1) { background: var(--db-red); }
.db-cta-tiles span:nth-child(2) { background: var(--db-blue); }
.db-cta-tiles span:nth-child(3) { background: var(--db-green); }

.db-playable-cta-card h3 {
  margin: 0;
  color: #2a1609;
  font-size: clamp(2.3rem, 8vw, 3.5rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.db-playable-tagline {
  margin: 10px 0 0;
  color: #a15419;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.db-playable-store-row {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.db-playable-store-row .store-button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}

.db-play-another {
  margin-top: 16px;
  border: 0;
  border-bottom: 2px solid rgba(92,47,16,.34);
  padding: 7px 3px;
  color: #5c2f10;
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.db-play-another:hover,
.db-play-another:focus-visible {
  color: #a15419;
  border-bottom-color: #a15419;
}

.db-round-note {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #896b54;
  font-size: .78rem;
}

@media (max-width: 520px) {
  .db-playable-card {
    padding: 7px;
    border-radius: 30px;
  }

  .db-playable-frame-wrap {
    border-radius: 24px;
  }

  .db-playable-cta {
    padding: 14px;
  }

  .db-playable-cta-card {
    padding: 22px 16px 18px;
    border-radius: 26px;
  }

  .db-playable-icon-wrap img {
    width: 78px;
    height: 78px;
  }
}


/* Playable size hardening — v3 */
.db-playable-section .db-wrap {
  display: grid;
  justify-items: center;
}

.db-playable-section .db-section-heading {
  width: min(100%, 760px);
}

.db-playable-section .db-playable-card {
  box-sizing: border-box;
  width: min(92vw, 480px);
  max-width: 480px;
  min-width: 320px;
  margin-inline: auto;
}

.db-playable-section .db-playable-frame-wrap {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

.db-playable-section .db-playable-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  overflow: hidden;
}

@media (max-width: 560px) {
  .db-playable-section .db-playable-card {
    width: min(calc(100vw - 28px), 440px);
    min-width: 0;
  }
}
/* Replace the existing playable sizing rules with this block. */
.db-playable-section .db-wrap {
  display: grid;
  justify-items: center;
}

.db-playable-section .db-section-heading {
  width: min(100%, 760px);
}

.db-playable-section .db-playable-card {
  box-sizing: border-box;
  width: min(92vw, 540px) !important;
  max-width: 540px !important;
  min-width: 320px;
  margin-inline: auto !important;
}

.db-playable-section .db-playable-frame-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
}

.db-playable-section .db-playable-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 600px) {
  .db-playable-section .db-playable-card {
    width: min(calc(100vw - 24px), 540px) !important;
    min-width: 0;
  }
}