:root {
  --dt-ink: #151515;
  --dt-paper: #f7f2e7;
  --dt-cyan: #12c9d7;
  --dt-pink: #fb168c;
  --dt-yellow: #ffd321;
  --dt-green: #2fdd7c;
  --dt-red: #dc2452;
}

.dotumble-page { background: var(--dt-paper); color: var(--dt-ink); }
.dotumble-page main { overflow: hidden; }
.dt-topbar { color: var(--dt-ink); }
.dt-topbar .brand b { color: var(--dt-pink); }
.dt-topbar nav a::after { background: var(--dt-cyan); }
.dt-store-pill { justify-self: end; padding: 11px 16px; border: 3px solid var(--dt-ink); border-radius: 999px; background: var(--dt-green); color: var(--dt-ink); font-weight: 1000; box-shadow: 4px 5px 0 var(--dt-ink); }

.dt-hero { min-height: 880px; padding: 145px max(28px, calc((100% - 1320px)/2)) 105px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; position: relative; isolation: isolate; background: var(--dt-paper); }
.dt-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; background-image: radial-gradient(circle, var(--dt-ink) 1.5px, transparent 1.7px); background-size: 35px 35px; mask-image: linear-gradient(90deg, transparent, black 40%, transparent); }
.dt-hero::after { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; right: 5%; top: 15%; border-radius: 50%; background: var(--dt-cyan); box-shadow: 45px 42px 0 var(--dt-pink); opacity: .16; }
.dt-eyebrow { margin: 0 0 20px; color: #098795; font-family: var(--pixel); font-size: 11px; line-height: 1.8; letter-spacing: .02em; text-transform: uppercase; }
.dt-hero h1 { margin: 0 0 25px; font-size: clamp(76px, 9vw, 145px); font-weight: 1000; line-height: .78; letter-spacing: -.095em; text-shadow: 6px 7px 0 var(--dt-cyan); }
.dt-hero h1 span { color: var(--dt-pink); text-shadow: 6px 7px 0 var(--dt-yellow); }
.dt-lead { max-width: 700px; margin: 0; color: #5f564d; font-size: 21px; line-height: 1.65; }
.dt-actions { margin-top: 33px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.dt-button { min-height: 57px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 4px solid var(--dt-ink); border-radius: 12px; background: var(--dt-green); color: var(--dt-ink); font-weight: 1000; box-shadow: 7px 7px 0 var(--dt-ink); transition: transform .16s, box-shadow .16s; }
.dt-button:hover, .dt-button:focus-visible { transform: translate(3px,3px); box-shadow: 4px 4px 0 var(--dt-ink); }
.dt-link { color: #087c89; font-weight: 1000; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.dt-facts { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 9px; }
.dt-facts span { padding: 8px 11px; border: 2px solid var(--dt-ink); border-radius: 999px; background: white; font-size: 13px; font-weight: 1000; }
.dt-identity { min-height: 560px; display: grid; place-items: center; position: relative; }
.dt-ball-mark { width: min(470px, 80%); aspect-ratio: 1; overflow: hidden; border: 8px solid var(--dt-ink); border-radius: 50%; background: white; box-shadow: 20px 21px 0 var(--dt-pink), -14px -13px 0 var(--dt-cyan); transform: rotate(2deg); }
.dt-ball-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); mix-blend-mode: multiply; }
.dt-scribble { position: absolute; z-index: 3; padding: 10px 14px; border: 4px solid var(--dt-ink); border-radius: 9px; color: var(--dt-ink); font-family: var(--hand); font-size: 22px; box-shadow: 6px 7px 0 var(--dt-ink); }
.dt-scribble-one { left: 0; top: 11%; background: var(--dt-yellow); transform: rotate(-7deg); }
.dt-scribble-two { right: 0; bottom: 10%; background: var(--dt-ink); color: var(--dt-cyan); font-family: var(--pixel); font-size: 9px; transform: rotate(5deg); }

.dt-gameplay { padding: 125px max(28px, calc((100% - 1240px)/2)); display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 100px; background: var(--dt-ink); color: white; }
.dt-phone-column { min-height: 690px; display: grid; place-items: center; position: relative; }
.dt-phone { width: min(390px, 88%); overflow: hidden; border: 12px solid #050505; border-radius: 48px; background: #050505; box-shadow: 16px 18px 0 var(--dt-cyan); transform: rotate(-2deg); }
.dt-phone img { width: 100%; height: auto; display: block; }
.dt-current-badge { position: absolute; right: -2%; bottom: 10%; padding: 9px 12px; border: 3px solid #050505; border-radius: 8px; background: var(--dt-yellow); color: var(--dt-ink); font-family: var(--pixel); font-size: 9px; box-shadow: 5px 6px 0 #050505; transform: rotate(5deg); }
.dt-copy h2, .dt-heading h2, .dt-online h2, .dt-final h2 { margin: 0; font-size: clamp(54px, 6.6vw, 92px); line-height: .87; letter-spacing: -.06em; }
.dt-copy h2 em, .dt-online h2 em { color: var(--dt-pink); font-style: normal; }
.dt-copy > p:not(.dt-eyebrow), .dt-heading > p:not(.dt-eyebrow), .dt-online p, .dt-final p:not(.dt-eyebrow) { color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.65; }
.dt-math { margin: 32px 0; display: flex; flex-wrap: wrap; gap: 9px; }
.dt-math span { padding: 10px 12px; border: 3px solid white; border-radius: 8px; background: #222; font-family: var(--pixel); font-size: 10px; }
.dt-math .good { color: var(--dt-green); }
.dt-math .multiply { color: #7feeff; }
.dt-math .bad { color: #ff668a; }
.dt-list { margin: 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.dt-list li { padding-left: 27px; position: relative; display: grid; gap: 2px; }
.dt-list li::before { content: "●"; position: absolute; left: 0; color: var(--dt-cyan); }
.dt-list b { color: white; font-size: 18px; }
.dt-list span { color: rgba(255,255,255,.58); }

.dt-loop { padding: 125px max(28px, calc((100% - 1320px)/2)); background: var(--dt-paper); }
.dt-heading { max-width: 780px; }
.dt-loop-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.dt-loop-grid article { min-height: 310px; padding: 30px 25px; border: 5px solid var(--dt-ink); border-radius: 22px 28px 20px 25px; background: white; box-shadow: 8px 9px 0 var(--dt-cyan); }
.dt-loop-grid article:nth-child(2n) { transform: translateY(22px); box-shadow-color: var(--dt-pink); }
.dt-loop-grid article:nth-child(3) { box-shadow-color: var(--dt-yellow); }
.dt-loop-grid article:nth-child(4) { box-shadow-color: var(--dt-green); }
.dt-loop-grid article > span { font-family: var(--pixel); font-size: 10px; color: var(--dt-pink); }
.dt-loop-grid h3 { margin: 28px 0 11px; font-size: 32px; }
.dt-loop-grid p { margin: 0; color: #675e55; line-height: 1.55; }

.dt-progression { padding: 125px max(28px, calc((100% - 1240px)/2)); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 95px; background: var(--dt-pink); color: white; }
.dt-progression .dt-eyebrow { color: var(--dt-yellow); }
.dt-progress-steps { margin-top: 35px; display: grid; gap: 11px; }
.dt-progress-steps div { padding: 14px 16px; display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 16px; border: 3px solid var(--dt-ink); border-radius: 10px; background: var(--dt-paper); color: var(--dt-ink); box-shadow: 5px 6px 0 var(--dt-ink); }
.dt-progress-steps b { color: #a6005c; font-family: var(--pixel); font-size: 11px; }
.dt-progress-steps span { font-weight: 1000; }
.dt-map-note { min-height: 470px; padding: 55px 35px; display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr; align-items: center; gap: 8px; position: relative; border: 7px solid var(--dt-ink); border-radius: 35px; background: var(--dt-paper); color: var(--dt-ink); box-shadow: 15px 17px 0 var(--dt-ink); transform: rotate(2deg); }
.dt-map-note > span { position: absolute; left: 50%; top: 35px; transform: translateX(-50%); width: 90%; text-align: center; color: #8b0050; font-family: var(--pixel); font-size: 10px; line-height: 1.6; }
.dt-map-note strong { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 5px solid var(--dt-ink); border-radius: 50%; background: white; color: #b76400; font-size: 24px; box-shadow: 6px 7px 0 var(--dt-yellow); }
.dt-map-note i { height: 5px; background: var(--dt-ink); }

.dt-vault { padding: 125px max(28px, calc((100% - 1220px)/2)); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 95px; background: #080b21; color: white; }
.dt-vault .dt-eyebrow { color: var(--dt-cyan); }
.dt-vault-board { min-height: 560px; padding: 55px; display: grid; grid-template-columns: repeat(3,1fr); align-content: center; gap: 18px; position: relative; border: 6px solid var(--dt-paper); border-radius: 30px; background: #11152f; box-shadow: 14px 16px 0 var(--dt-cyan); }
.dt-vault-board div { aspect-ratio: 3/4; display: grid; place-items: center; border: 5px solid #050505; border-radius: 15px; background: var(--dt-paper); color: var(--dt-pink); font-family: var(--pixel); font-size: 26px; box-shadow: 5px 6px 0 #050505; transform: rotate(-2deg); }
.dt-vault-board div:nth-child(even) { transform: rotate(2deg); }
.dt-vault-board div.danger { background: var(--dt-red); color: white; }
.dt-vault-board > span { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 90%; color: var(--dt-yellow); text-align: center; font-family: var(--pixel); font-size: 9px; line-height: 1.5; }

.dt-online { padding: 115px max(28px, calc((100% - 1220px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 90px; background: var(--dt-cyan); color: var(--dt-ink); }
.dt-online .dt-eyebrow { color: #075e67; }
.dt-online h2 em { color: #a0005c; }
.dt-online p { color: #184e54; }
.dt-online ul { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; }
.dt-online li { padding: 13px; border: 3px solid var(--dt-ink); border-radius: 9px; background: var(--dt-paper); font-weight: 1000; box-shadow: 4px 5px 0 var(--dt-ink); }
.dt-online .dt-link { color: #5d0035; }

.dt-final { padding: 90px max(28px, calc((100% - 1180px)/2)); display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 45px; background: var(--dt-paper); }
.dt-mini-ball { width: 145px; aspect-ratio: 1; overflow: hidden; border: 5px solid var(--dt-ink); border-radius: 50%; background: white; box-shadow: 8px 9px 0 var(--dt-pink); }
.dt-mini-ball img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); mix-blend-mode: multiply; }
.dt-final h2 { font-size: 53px; }
.dt-final p:not(.dt-eyebrow) { color: #655b52; margin-bottom: 0; }
.dt-button-disabled { opacity: .72; cursor: default; background: var(--dt-yellow); }
.dt-footer { background: #07091b; }

/* Home card: loaded independently so GitHub Pages never depends on stale inline additions. */
.dotumble-home-card { max-width: 1220px !important; min-height: 430px; margin: 100px auto 0 !important; display: grid !important; grid-template-columns: 360px 1fr !important; overflow: hidden; border: 7px solid var(--brown-dark); border-radius: 30px; background: #080b21; box-shadow: 14px 15px 0 var(--dt-cyan); color: white; }
.dotumble-home-art { min-height: 430px !important; display: grid; place-items: center; position: relative; background: var(--dt-paper) !important; }
.dotumble-home-art img { width: 235px !important; height: 235px !important; object-fit: cover; border: 6px solid var(--dt-ink); border-radius: 50% !important; box-shadow: 10px 11px 0 var(--dt-pink) !important; transform: none !important; mix-blend-mode: multiply; }
.dotumble-home-art span { position: absolute; left: 22px !important; top: 22px !important; padding: 8px 11px; border: 3px solid var(--dt-ink); border-radius: 8px; background: var(--dt-yellow); color: var(--dt-ink); font-family: var(--hand); font-size: 19px; box-shadow: 4px 5px 0 var(--dt-ink); }
.dotumble-home-copy { padding: 50px 52px !important; }
.dotumble-home-copy h3 { margin: 5px 0 15px !important; color: var(--dt-pink); font-size: 62px !important; line-height: .9; }
.dotumble-home-copy > p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.55; }
.dotumble-home-copy ul { margin: 20px 0 28px; padding-left: 20px; line-height: 1.8; font-weight: 900; }
.dotumble-home-copy .button { width: fit-content; }

/* Privacy page overrides share the same compact asset system. */
.privacy-page .privacy-hero { background: var(--dt-paper); color: var(--dt-ink); }
.privacy-page .privacy-hero h1 span { color: var(--dt-pink); }
.privacy-page .privacy-hero > div > p:not(.dotumble-kicker) { color: #62584e; }
.privacy-page .privacy-meta { max-width: 430px; background: white; }
.privacy-page .privacy-meta img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; mix-blend-mode: multiply; }
.privacy-page .dotumble-footer { background: #07091b; }

@media (max-width: 1100px) {
  .dt-store-pill { display: none; }
  .dt-hero, .dt-gameplay, .dt-progression, .dt-vault, .dt-online { grid-template-columns: 1fr; }
  .dt-hero { padding-top: 125px; text-align: center; }
  .dt-lead { margin-left: auto; margin-right: auto; }
  .dt-actions, .dt-facts { justify-content: center; }
  .dt-identity { width: min(650px,100%); margin: 0 auto; }
  .dt-gameplay { text-align: center; }
  .dt-math { justify-content: center; }
  .dt-list { max-width: 650px; margin: 0 auto; text-align: left; }
  .dt-loop-grid { grid-template-columns: 1fr 1fr; }
  .dt-progression, .dt-vault, .dt-online { text-align: center; }
  .dt-progress-steps, .dt-map-note, .dt-vault-board { width: min(720px,100%); margin-left: auto; margin-right: auto; }
  .dt-online ul { text-align: left; }
  .dt-final { grid-template-columns: 130px 1fr; }
  .dt-final > .dt-button { grid-column: 1/-1; justify-self: center; }
}

@media (max-width: 720px) {
  .dt-topbar { color: var(--dt-ink); }
  .dt-hero, .dt-gameplay, .dt-loop, .dt-progression, .dt-vault, .dt-online { padding: 100px 18px; }
  .dt-hero h1 { font-size: 67px; }
  .dt-lead { font-size: 17px; }
  .dt-identity { min-height: 420px; }
  .dt-ball-mark { width: 72%; border-width: 5px; box-shadow: 11px 12px 0 var(--dt-pink), -8px -8px 0 var(--dt-cyan); }
  .dt-scribble { font-size: 16px; }
  .dt-scribble-two { display: none; }
  .dt-phone-column { min-height: 610px; }
  .dt-phone { width: min(350px,82%); border-width: 8px; border-radius: 36px; }
  .dt-current-badge { right: 0; }
  .dt-copy h2, .dt-heading h2, .dt-online h2 { font-size: 50px; }
  .dt-loop-grid { grid-template-columns: 1fr; }
  .dt-loop-grid article, .dt-loop-grid article:nth-child(2n) { min-height: auto; transform: none; }
  .dt-map-note { min-height: 330px; padding: 65px 20px 30px; }
  .dt-map-note strong { border-width: 3px; font-size: 16px; }
  .dt-vault-board { min-height: 430px; padding: 45px 25px 55px; gap: 10px; }
  .dt-vault-board div { border-width: 3px; }
  .dt-online ul { grid-template-columns: 1fr; }
  .dt-final { padding: 80px 18px; grid-template-columns: 1fr; text-align: center; }
  .dt-mini-ball { margin: 0 auto; }
  .dotumble-home-card { grid-template-columns: 1fr !important; margin-top: 75px !important; }
  .dotumble-home-art { min-height: 330px !important; }
  .dotumble-home-art img { width: 190px !important; height: 190px !important; }
  .dotumble-home-copy { padding: 36px 23px !important; }
  .dotumble-home-copy h3 { font-size: 50px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-button { transition: none; }
}