/* Tech Daddy Digital: one dark brand look (navy ground, brand gradient band, white mark). No web fonts, no trackers. */
:root {
  --ground: #0B1120; --panel: #121B2E; --line: #24324D; --text: #E8EEF7; --muted: #A3B0C6;
  --blue: #0195DA; --blue-text: #48BCF0; --green: #00B361; --magenta: #AF0070; --purple: #6E0075;
  --brand: linear-gradient(115deg, #0195DA 0%, #0195DA 32%, #00B361 55%, #AF0070 77%, #6E0075 100%);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.65 var(--sans) }
a { color: var(--blue-text); text-underline-offset: 3px }
a:hover { color: #fff }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; border-radius: 4px }
img { max-width: 100%; height: auto }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }

/* header */
.site-head { border-bottom: 1px solid var(--line); background: rgba(11, 17, 32, .92); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px) }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 15px }
.brand img { height: 34px; width: auto }
nav.main { display: flex; gap: 22px; flex-wrap: wrap }
nav.main a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500 }
nav.main a[aria-current="page"], nav.main a:hover { color: var(--text) }

/* hero band */
.band { position: relative; overflow: hidden; background: var(--brand) }
.band svg.traces { position: absolute; right: -40px; top: 0; height: 100%; width: min(60%, 640px); opacity: .7; pointer-events: none }
.hero { position: relative; display: flex; align-items: center; gap: 40px; padding-block: 64px 72px }
.hero img.mark { width: 190px; flex: none }
.hero h1 { font: 400 clamp(52px, 9vw, 104px)/.9 var(--display); letter-spacing: .01em; margin: 0; text-transform: uppercase; text-wrap: balance }
.hero p { margin: 14px 0 0; font-size: 19px; max-width: 34ch; color: #fff }
.band.slim .hero { padding-block: 44px 48px }
.band.slim h1 { font-size: clamp(44px, 7vw, 76px) }

main section { padding-block: 56px }
h2 { font: 400 40px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 18px; text-wrap: balance }
h3 { font-size: 19px; margin: 28px 0 8px }
p, li { max-width: 70ch }
.lede { font-size: 19px; color: var(--muted) }

.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px }
.product .icon { width: 64px; height: 64px; border-radius: 15px; background: var(--brand); display: grid; place-items: center; margin-bottom: 14px }
.product .icon svg { width: 34px; height: 34px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; color: var(--muted) }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9px; background: #0079BC; color: #fff; font-weight: 600; text-decoration: none; border: 0 }
.btn:hover { background: #0A8BD3; color: #fff }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text) }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green) }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; min-width: 0 }
.card h3 { margin-top: 0 }
.card p { color: var(--muted); margin: 0 }

/* game */
.product.game { background: #05070D }
.product .art { border-radius: 10px; width: 100%; max-width: 460px; justify-self: center }
.stores .btn { min-width: 120px; justify-content: center }
.note-content { color: var(--muted); font-size: 15px; margin-top: 18px }
nav.main a { white-space: nowrap }

.reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.review { display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; color: var(--text); text-decoration: none }
.review:hover { border-color: var(--blue-text); color: var(--text) }
.review .store { color: var(--muted); font-size: 14px; font-weight: 600 }
.review .score { font-size: 28px; font-weight: 800 }
.review .count { color: var(--muted); font-size: 14px }
@media (max-width: 760px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* long-form pages */
.doc { max-width: 780px; padding-block: 48px 72px }
.doc h2 { font-size: 34px; margin-top: 44px }
.doc .updated { color: var(--muted); font-size: 15px }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0 }
.doc .tablewrap { overflow-x: auto }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line) }
.doc th { color: var(--muted); font-weight: 600 }
.doc .summary { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px; padding: 16px 20px }
.doc .summary ul { margin: 6px 0 0; padding-left: 20px }
.toc { columns: 2; padding-left: 20px; color: var(--muted) }

.site-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; padding-block: 28px 40px }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap }
.site-foot a { color: var(--muted) }

@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 22px; padding-block: 40px 48px }
  .hero img.mark { width: 120px }
  .product { grid-template-columns: 1fr; padding: 22px }
  .grid3 { grid-template-columns: 1fr }
  .toc { columns: 1 }
  .band svg.traces { width: 90%; opacity: .35 }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto } }