:root {
  --bg:#111411;
  --panel:#1b201b;
  --line:#333b31;
  --text:#f3f1e9;
  --muted:#a9b2a5;
  --accent:#ffbd72;
  --green:#b6cf99
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 Arial,Helvetica,sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

a,button,input,select,textarea,summary {
  outline-offset:6px
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent)
}

img {
  max-width:100%;
  display:block
}

::selection {
  background:var(--accent);
  color:#111
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin:auto
}

header {
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:5;
  background:var(--bg)
}

.nav {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.brand img {
  height:auto;
  width:213px
}

.navlinks {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:14px
}

.navlinks a {
  color:#c1c8ba
}

.navlinks a:hover,.navlinks a[aria-current=page] {
  color:var(--accent)
}

.navlinks .contact {
  border:1px solid #57634c;
  padding:9px 19px;
  border-radius:5px;
  color:var(--text)
}

.menu {
  display:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 12px;
  border-radius:4px
}

.eyebrow {
  font:12px/1.5 monospace;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:10px
}

.eyebrow:before {
  content:'';
  height:7px;
  width:7px;
  background:var(--accent);
  display:block
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:585px;
  align-items:center;
  gap:30px;
  padding-block:65px
}

.hero h1 {
  font-size:clamp(48px,5.4vw,76px);
  line-height:1.06;
  letter-spacing:-3.5px;
  margin:24px 0
}

.hero h1 em {
  font-style:normal;
  color:var(--accent)
}

.hero p {
  max-width:450px;
  color:var(--muted);
  font-size:18px;
  margin-bottom:32px
}

.actions {
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  background:var(--accent);
  color:#1c2019;
  padding:14px 22px;
  border-radius:4px;
  border:1px solid var(--accent);
  font-weight:700;
  font-size:14px;
  cursor:pointer
}

.btn:hover {
  background:#ffd09c
}

.textlink {
  font-size:14px;
  border-bottom:1px solid #76806b;
  padding-block:5px
}

.hero-art {
  position:relative;
  isolation:isolate;
  padding:35px 0
}

.hero-art:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse,#b3752526,transparent 67%);
  z-index:-1
}

.hero-art img {
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 25px 30px #0005)
}

.art-caption {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font:11px monospace;
  color:#a6ad9d;
  letter-spacing:1.5px;
  margin-top:20px
}

.art-caption:before,.art-caption:after {
  content:'';
  width:35px;
  height:1px;
  background:var(--line)
}

.ticker {
  border-block:1px solid var(--line);
  padding:15px 0;
  color:#aebba5;
  font:11px monospace;
  letter-spacing:2px
}

.ticker .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.ticker b {
  color:var(--accent);
  font-weight:400
}

section {
  padding:80px 0
}

.sectionhead {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end;
  margin-bottom:32px
}

h2 {
  font-size:38px;
  line-height:1.2;
  letter-spacing:-1.2px;
  margin:12px 0
}

h3 {
  font-size:24px;
  line-height:1.3;
  margin:0 0 12px
}

.sectionhead p {
  color:var(--muted);
  max-width:310px;
  font-size:14px;
  margin:0
}

.games {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

.game {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
  display:flex;
  flex-direction:column
}

.game-art {
  height:240px;
  position:relative;
  overflow:hidden;
  background:#152833
}

.game-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}

.game:hover .game-art img {
  transform:scale(1.04)
}

.game-art.screenshot {
  background:radial-gradient(ellipse at center,#2b5260,#121f2a)
}

.game-art.screenshot img {
  width:190px;
  height:auto;
  object-fit:cover;
  object-position:top;
  margin:25px auto;
  max-width:64%;
  transform:rotate(-9deg);
  box-shadow:0 0 40px #0008;
  border:1px solid #577184;
  border-radius:8px
}

.game:hover .game-art.screenshot img {
  transform:rotate(-6deg) translateY(-5px)
}

.game-art.delvebound img {
  object-position:center 35%
}

.number {
  position:absolute;
  left:15px;
  top:15px;
  border:1px solid #ffffff38;
  background:#111b;
  backdrop-filter:blur(5px);
  border-radius:3px;
  padding:4px 9px;
  font:11px monospace;
  color:#e3e7d9
}

.game-body {
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1
}

.tags {
  font:10px monospace;
  letter-spacing:1.2px;
  color:var(--green);
  text-transform:uppercase;
  margin-bottom:12px
}

.game-body p {
  color:var(--muted);
  font-size:14px;
  margin:0 0 24px
}

.game details {
  margin-top:auto;
  border-top:1px solid #394132;
  padding-top:14px
}

.game summary {
  list-style:none;
  font-size:13px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  color:#e4e8dc
}

.game summary:after {
  content:'+';
  color:var(--accent)
}

.game details[open] summary:after {
  content:'−'
}

.game details p {
  margin:16px 0 0
}

.about {
  border-block:1px solid var(--line);
  background:#191d17
}

.about-grid {
  display:grid;
  grid-template-columns:230px 1fr 230px;
  gap:45px;
  align-items:center
}

.cat-portrait {
  height:170px;
  object-fit:contain;
  margin:auto
}

.about p {
  color:var(--muted);
  max-width:540px
}

.smallnote {
  border-left:1px solid #414b39;
  padding-left:25px;
  font:13px/1.8 monospace;
  color:#b9c4ad
}

.smallnote span {
  color:var(--accent)
}

.help-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.help-strip p {
  color:var(--muted)
}

footer {
  border-top:1px solid var(--line);
  padding:35px 0;
  color:var(--muted);
  font-size:12px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center
}

.footer-brand {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--text);
  font-size:16px;
  font-weight:700
}

.footer-brand img {
  width:33px
}

.footer-links {
  display:flex;
  gap:26px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #293025;
  margin-top:25px;
  padding-top:22px;
  font-size:11px;
  color:#929c8a
}

.pagehero {
  padding:68px 0 45px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 85% 10%,#79512617,transparent 60%)
}

.pagehero h1 {
  font-size:clamp(42px,5vw,64px);
  letter-spacing:-2px;
  line-height:1.1;
  margin:20px 0
}

.pagehero p {
  max-width:670px;
  color:var(--muted);
  font-size:18px
}

.doc-layout {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:65px;
  padding:55px 0 90px
}

.sidenav {
  align-self:start;
  position:sticky;
  top:30px;
  display:grid;
  gap:12px;
  font-size:13px;
  color:var(--muted)
}

.sidenav strong {
  font:11px monospace;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--accent);
  margin-bottom:10px
}

.sidenav a:hover {
  color:var(--text)
}

.prose {
  max-width:780px
}

.prose section {
  padding:0;
  margin-bottom:40px
}

.prose h2 {
  font-size:25px;
  letter-spacing:-.5px
}

.prose h3 {
  font-size:18px;
  margin-top:23px
}

.prose p,.prose li {
  color:#b8c1b1;
  font-size:15px
}

.prose a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px
}

.notice {
  padding:22px 25px;
  border-left:3px solid var(--accent);
  background:#25281f;
  border-radius:0 5px 5px 0;
  margin:20px 0 35px
}

.notice p {
  margin:0;
  font-size:14px
}

.meta {
  font:11px monospace;
  letter-spacing:1px;
  color:#aebba5
}

.prose ul,.prose ol {
  padding-left:23px
}

.prose li {
  margin:10px 0
}

.support-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:65px;
  padding:60px 0 85px
}

.support-card {
  padding:32px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px
}

label {
  display:block;
  font-size:13px;
  margin:20px 0 7px
}

input,select,textarea {
  width:100%;
  border:1px solid #4d5745;
  background:#131812;
  color:var(--text);
  padding:12px 14px;
  border-radius:4px
}

textarea {
  min-height:145px;
  resize:vertical
}

.formnote {
  font-size:12px;
  color:var(--muted)
}

form .btn {
  margin-top:22px;
  width:100%
}

.faq {
  border-bottom:1px solid var(--line);
  padding:19px 0
}

.faq summary {
  cursor:pointer;
  font-size:15px
}

.faq p {
  font-size:14px;
  color:var(--muted)
}

.email {
  display:inline-block;
  color:var(--accent);
  font-size:18px;
  word-break:break-word
}

.support-info p {
  color:var(--muted);
  font-size:15px
}

.support-info h3 {
  margin-top:32px;
  font-size:20px
}

.breadcrumb {
  color:var(--muted);
  font:12px monospace;
  margin-bottom:30px
}

.breadcrumb a:hover {
  color:var(--accent)
}

.skip {
  position:fixed;
  top:-100px;
  background:var(--accent);
  color:#111;
  padding:10px;
  z-index:20
}

.skip:focus {
  top:10px
}

@media(min-width:1500px) {
  .hero {
    min-height:650px
  }
}

@media(max-width:950px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .navlinks {
    gap:18px
  }
  .hero {
    min-height:520px;
    gap:0
  }
  .hero h1 {
    font-size:57px
  }
  .games {
    gap:16px
  }
  .game-art {
    height:200px
  }
  .game-body {
    padding:20px
  }
  .game h3 {
    font-size:21px
  }
  .about-grid {
    grid-template-columns:130px 1fr;
    gap:32px
  }
  .smallnote {
    display:none
  }
  .doc-layout {
    gap:30px;
    grid-template-columns:170px 1fr
  }
  .support-grid {
    gap:30px
  }
}

@media(max-width:700px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .nav {
    height:78px
  }
  .brand img {
    width:175px
  }
  .menu {
    display:block
  }
  .navlinks {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:77px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:25px;
    flex-direction:column;
    align-items:stretch
  }
  .navlinks.open {
    display:flex
  }
  .hero {
    grid-template-columns:1fr;
    padding:45px 0 25px;
    gap:0
  }
  .hero h1 {
    font-size:55px;
    letter-spacing:-2.5px
  }
  .hero p {
    font-size:16px
  }
  .hero-art {
    padding:10px 35px 20px;
    max-width:400px;
    margin:auto
  }
  .art-caption {
    font-size:9px;
    margin-top:5px
  }
  .ticker .wrap {
    flex-wrap:wrap;
    justify-content:center;
    font-size:9px;
    gap:8px 20px
  }
  .sectionhead {
    display:block
  }
  .sectionhead p {
    max-width:none;
    margin-top:15px
  }
  .games {
    grid-template-columns:1fr;
    gap:25px
  }
  .game-art {
    height:235px
  }
  .game-art.delvenomics img {
    object-fit:cover
  }
  .game-body {
    padding:25px
  }
  .game h3 {
    font-size:27px
  }
  section {
    padding:52px 0
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .cat-portrait {
    height:125px
  }
  .about-text {
    text-align:center
  }
  .about .eyebrow {
    justify-content:center
  }
  .help-strip {
    display:block
  }
  .help-strip .btn {
    margin-top:15px
  }
  h2 {
    font-size:32px
  }
  .footer-top {
    display:block
  }
  .footer-links {
    margin-top:25px;
    gap:18px;
    flex-wrap:wrap
  }
  .footer-bottom {
    gap:20px;
    align-items:start
  }
  .doc-layout {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:32px
  }
  .sidenav {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line)
  }
  .sidenav strong {
    width:100%;
    margin:0
  }
  .pagehero {
    padding:40px 0 30px
  }
  .pagehero p {
    font-size:16px
  }
  .support-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .support-card {
    padding:24px
  }
  .footer-bottom span:last-child {
    max-width:130px;
    text-align:right
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* Real gameplay screenshots; click to see the complete portrait image. */
.game-art.screenshot.delvenomics {
  background: radial-gradient(ellipse at center, #35304c, #161923);
}

.game-art.screenshot.delvebound {
  background: radial-gradient(ellipse at center, #34304e, #191a25);
}

.game-art.screenshot a {
  display: block;
}