@font-face {
  font-family: Studio Display;
  src: url("SairaCondensed-Black.ttf") format("truetype");
  font-display: swap;
  font-weight: 900;
}
@font-face {
  font-family: Studio Text;
  src: url("RobotoCondensed-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: Studio Text;
  src: url("RobotoCondensed-Black.ttf") format("truetype");
  font-display: swap;
  font-weight: 900;
}

:root {
  color-scheme: dark;
  --ink: #101012;
  --surface: #18181c;
  --panel: #202024;
  --paper: #fff5df;
  --subtle: #d0c7b8;
  --yellow: #ffc627;
  --edge: #4a453d;
  --display: Studio Display, Impact, "Arial Narrow", sans-serif;
  --text: Studio Text, "Arial Narrow", sans-serif;
  --paper-cut: polygon(2% 11%, 12% 6%, 21% 9%, 31% 2%, 49% 5%, 63% 1%, 77% 6%, 94% 5%, 92% 14%, 100% 22%, 97% 47%, 100% 69%, 94% 79%, 98% 92%, 79% 95%, 59% 92%, 47% 100%, 26% 95%, 7% 98%, 9% 86%, 0 80%, 4% 60%, 0 34%, 5% 25%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1.25rem; }
body {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.125rem/1.5 var(--text);
}
main { flex: 1; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
button { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.99;
}
h2 { font-size: clamp(2.25rem, 4.5vw, 3.8rem); }
h3 { font-size: 1.35rem; font-weight: 900; line-height: 1.16; }
.shell { width: min(100% - 3rem, 73.5rem); margin-inline: auto; }
.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 10;
  top: .6rem;
  left: .6rem;
  padding: .65rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
}
.masthead {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ffffff22;
  background: #151517;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.6rem;
}
.studio-sign, .main-nav {
  display: flex;
  align-items: center;
  font-weight: 900;
}
.studio-sign {
  gap: .65rem;
  text-decoration: none;
  font: 900 1.6rem/.95 var(--display);
  letter-spacing: .015em;
  white-space: nowrap;
}
.studio-mini {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 2.55rem;
  background: var(--yellow);
  clip-path: var(--paper-cut);
}
.studio-mini img { width: 3.65rem; max-width: none; }
.main-nav { gap: clamp(.45rem, 2vw, 1.8rem); }
.main-nav a {
  display: inline-grid;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}
.main-nav a[aria-current] { color: var(--yellow); }
.main-nav .language {
  min-width: 2.9rem;
  place-items: center;
  border: 1px solid #70684e;
  color: var(--yellow);
  font-size: .92rem;
  letter-spacing: .07em;
}
.main-nav .language:hover { background: var(--yellow); color: var(--ink); }
.kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--yellow);
  font-weight: 900;
  font-size: .83rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: .65rem;
  height: .65rem;
  flex: none;
  background: currentColor;
  transform: rotate(-12deg) skew(-8deg);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.05rem;
  width: fit-content;
  max-width: 100%;
  min-height: 3.1rem;
  padding: .66rem 1rem;
  border: 1px solid #9d947b;
  border-radius: .27rem .17rem .27rem .17rem;
  background: #1b1a1be6;
  color: var(--paper);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.button span { font: 900 1.05rem/1 system-ui, sans-serif; }
.button:hover { border-color: var(--yellow); background: #2d2719; }
.button.primary { border-color: var(--yellow); background: var(--yellow); color: #15100a; }
.button.primary:hover { border-color: #ffe186; background: #ffe186; }

.page-home {
  background: radial-gradient(ellipse at 78% 12%, #292014 0, transparent 36rem), var(--ink);
}
.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(1.3rem, 3.5vw, 3rem);
  min-height: 29.1rem;
  padding-block: 3.5rem 3.75rem;
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero h1 {
  margin: .42rem 0 .55rem;
  color: var(--paper);
  font-size: clamp(4rem, 8.45vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: nowrap;
}
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero-tagline {
  margin-top: 1rem;
  font-weight: 900;
  font-size: clamp(1.55rem, 3.3vw, 2.35rem);
  line-height: 1.1;
}
.hero-intro { max-width: 27.5rem; margin: .65rem 0 1.6rem; color: var(--subtle); }
.hero-art { position: relative; isolation: isolate; min-width: 0; aspect-ratio: 1.37; }
.hero-ring {
  position: absolute;
  inset: 5% 11% 3%;
  transform: rotate(-10deg);
  border: 1px dashed #d59a3d70;
  border-radius: 50%;
}
.hero-halftone {
  position: absolute;
  inset: 3%;
  background: radial-gradient(circle, #bd872f 1.15px, transparent 1.4px) 0 0 / 9px 9px;
  mask-image: radial-gradient(ellipse, #000a 24%, transparent 69%);
}
.hero-sticker, .sticker-shadow {
  position: absolute;
  inset: 12% 4% 14%;
  display: grid;
  place-items: center;
  clip-path: var(--paper-cut);
  transform: rotate(-8deg);
}
.sticker-shadow { transform: translate(.55rem, .74rem) rotate(-8deg); background: #050506; }
.hero-sticker {
  background:
    radial-gradient(ellipse at 30% 19%, #ffe180, transparent 62%),
    repeating-linear-gradient(112deg, #ffca32 0 2px, #ffca22 2px 4px);
}
.hero-sticker img { width: 97%; }
.sticker-tape {
  position: absolute;
  width: 20%;
  height: 10%;
  top: 12%;
  right: 6%;
  background: #fff2d0;
  clip-path: polygon(0 5%, 100% 0, 96% 95%, 2% 100%, 5% 76%, 0 47%);
  transform: rotate(18deg);
  opacity: .88;
}
.spark {
  position: absolute;
  z-index: 1;
  color: var(--yellow);
  font: 900 clamp(1.8rem, 3vw, 3.7rem)/1 system-ui, sans-serif;
}
.spark-top { top: 0; left: 12%; }
.spark-bottom { right: 2%; bottom: 8%; color: var(--paper); transform: rotate(18deg); }

.games-section {
  padding-block: 2.75rem 3.5rem;
  border-top: 1px solid #674e25;
  border-bottom: 1px solid #373132;
  background: #19191b;
  scroll-margin-top: .25rem;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.45rem;
}
.section-heading h2 { margin-top: .35rem; }
.section-heading > p { max-width: 23rem; color: var(--subtle); }
.game-grid, .support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.game-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--edge);
  background: #202024;
  box-shadow: 0 .35rem 0 #0c0c0e;
}
.card-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.8;
  border-bottom: 1px solid var(--edge);
}
.borders .card-art, .borders .game-feature {
  background: radial-gradient(ellipse at 70% 27%, #647c59 0, transparent 65%), #25392e;
}
.takeover .card-art, .takeover .game-feature {
  background: radial-gradient(ellipse at 78% 33%, #68451e 0, transparent 61%), #241e21;
}
.card-art::before, .feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background: repeating-radial-gradient(ellipse at 72% 46%, transparent 0 1.05rem, #e4c48358 1.08rem 1.15rem);
  mask-image: linear-gradient(90deg, #0009, #000 55%, transparent);
}
.takeover .card-art::before, .takeover .feature-art::before {
  background: radial-gradient(circle, #ffcc72 1.1px, transparent 1.4px) 0 0 / 8px 8px;
  mask-image: radial-gradient(ellipse at 67% 35%, #000 0, transparent 73%);
}
.issue {
  position: absolute;
  z-index: -1;
  top: 5%;
  left: 5.5%;
  color: #fff8dc3b;
  font: 900 clamp(2.7rem, 10vw, 8rem)/.84 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}
.card-orbit {
  position: absolute;
  z-index: -1;
  inset: 13% 7% 5% 40%;
  background: #ffc62733;
  clip-path: polygon(10% 14%, 88% 0, 100% 87%, 14% 100%, 0 83%);
  transform: rotate(-8deg);
}
.card-borders-cover { width: 100%; height: 100%; object-fit: cover; }
.card-borders-icon {
  position: absolute;
  width: clamp(2.1rem, 11%, 3.6rem);
  height: auto;
  inset: auto auto 5% 4%;
  border: 2px solid #fff8e8;
  border-radius: .4rem;
  box-shadow: .2rem .3rem 0 #121813a6;
}
.card-dusty {
  position: absolute;
  width: 56%;
  right: 7%;
  top: -8%;
  filter: drop-shadow(.38rem .45rem 0 #161117);
}
.game-wordmark {
  position: absolute;
  bottom: 7%;
  left: 5%;
  width: 55%;
  filter: drop-shadow(.16rem .27rem 0 #12121299);
}
.takeover .game-wordmark, .takeover .feature-wordmark, .takeover .support-wordmark {
  background: var(--yellow);
  clip-path: var(--paper-cut);
  transform: rotate(-5deg);
}
.card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  padding: clamp(1rem, 2.5vw, 1.65rem);
}
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .85rem; }
.card-copy > p { color: var(--subtle); }
.card-copy .button { margin-top: auto; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  max-width: 100%;
  padding: .26rem .56rem;
  border: 1px solid #85724d;
  background: #181819;
  color: #ffda86;
  font-weight: 900;
  font-size: .86rem;
  line-height: 1.3;
}
.badge::before { content: ""; width: .39rem; height: .39rem; flex: none; background: var(--yellow); transform: rotate(45deg); }
.borders .badge { border-color: #798d65; color: #d8edc5; }
.borders .badge::before { background: #b5d390; }
.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  padding-block: 3rem 3.3rem;
}
.support-strip h2 { margin-block: .4rem .55rem; }
.support-strip p:not(.kicker) { color: var(--subtle); }
.support-strip .button { flex: none; }

.game-page { padding-block: 2rem 4rem; }
.game-feature {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 1rem;
  min-height: 29rem;
  overflow: hidden;
  border: 1px solid #83704e;
}
.feature-copy { position: relative; z-index: 1; align-self: center; padding: clamp(1.25rem, 4vw, 3.4rem); }
.feature-wordmark { width: min(100%, 26rem); margin: .9rem 0 1.1rem; }
.feature-borders-title { margin: .75rem 0 .8rem; font: 900 clamp(3.2rem, 6vw, 6.2rem)/.86 var(--display); }
.borders .feature-line { font-size: clamp(1.5rem, 2.9vw, 2.6rem); }
.borders .feature-copy > p:not(.feature-line, .badge) + p { margin-top: .7rem; }
.feature-line {
  margin-bottom: .6rem;
  font: 900 clamp(2rem, 5vw, 3.9rem)/.98 var(--display);
}
.feature-copy > p:not(.feature-line, .badge) { max-width: 27rem; }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
  margin: 1rem 0 1.45rem;
  list-style: none;
}
.tags li {
  padding: .2rem .55rem;
  border: 1px solid #b0a588;
  background: #171718b8;
  font-weight: 900;
  font-size: .83rem;
}
.feature-art { position: relative; isolation: isolate; min-height: 23rem; }
.feature-ring {
  position: absolute;
  inset: 13% 7% 12% 8%;
  z-index: -1;
  border-radius: 50%;
  border: 1px dashed #e0bc779f;
  transform: rotate(9deg);
}
.feature-borders-cover {
  position: absolute;
  width: 90%;
  height: auto;
  top: 50%;
  left: 50%;
  border: 3px solid #f3e6cb;
  box-shadow: .6rem .65rem 0 #101410b0;
  transform: translate(-50%, -50%) rotate(2deg);
}
.feature-dusty {
  position: absolute;
  width: min(85%, 24rem);
  top: 50%;
  left: 50%;
  max-height: 110%;
  object-fit: contain;
  transform: translate(-50%, -49%);
  filter: drop-shadow(.65rem .65rem 0 #1a1317);
}
.subsection { margin-top: 3.4rem; }
.match-reel-frame {
  padding: clamp(.35rem, 1vw, .75rem);
  border: 1px solid #83704e;
  border-top: .23rem solid var(--yellow);
  background: var(--panel);
}
.match-reel-video {
  display: block;
  width: 100%;
  height: auto;
  background: #101012;
}
.match-reel-frame figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  padding: .55rem .2rem .12rem;
}
.match-reel-frame figcaption a { color: var(--paper); text-underline-offset: .2em; }
.match-reel-frame figcaption a:hover { color: var(--yellow); }
.gallery { display: grid; gap: 1.05rem; }
.gallery.borders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery.borders.phone { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-heading { margin: 1.6rem 0 .75rem; }
.gallery.takeover { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery figure { min-width: 0; }
.gallery a {
  display: block;
  position: relative;
  padding: .3rem;
  border: 1px solid #777166;
  background: var(--panel);
}
.gallery a:hover { border-color: var(--yellow); }
.gallery img { width: 100%; }
.gallery.takeover a { display: grid; aspect-ratio: 16 / 9; background: #101012; }
.gallery.takeover img { height: 100%; min-height: 0; object-fit: contain; }
.gallery figcaption { margin-top: .5rem; color: var(--subtle); font-size: 1rem; }
.enlarge {
  display: grid;
  position: absolute;
  bottom: .65rem;
  right: .65rem;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--yellow);
  background: #151414;
  color: var(--yellow);
  font: 900 1.15rem/1 system-ui, sans-serif;
}
.image-dialog {
  width: fit-content;
  max-width: min(94vw, 72rem);
  max-height: 95vh;
  padding: .55rem;
  overflow: auto;
  border: 1px solid var(--yellow);
  background: #161618;
  color: var(--paper);
}
.image-dialog::backdrop { background: #08080bea; }
.image-dialog form { display: flex; justify-content: flex-end; margin-bottom: .45rem; }
.image-dialog button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  border: 1px solid #999079;
  background: #252427;
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
}
.image-dialog img { max-height: 73vh; object-fit: contain; }
.image-dialog figcaption { padding: .45rem .15rem 0; }
.document-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding: clamp(1.1rem, 3.5vw, 2.25rem);
  border: 1px solid var(--edge);
  border-left: .32rem solid var(--yellow);
  background: var(--surface);
}
.document-box h2 { margin: .5rem 0 1rem; }
.link-list, .contents {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.link-list a, .legal-text a, .contents a, .crumb { text-underline-offset: .19em; }
.link-list a, .legal-text a { color: #ffdc8d; }
.link-list a:hover, .legal-text a:hover { color: #fff4cf; }

.interior { padding-block: 3.25rem 4rem; }
.page-heading { max-width: 52rem; padding-bottom: 1.7rem; }
.page-heading h1 {
  margin: .65rem 0 .9rem;
  font-size: clamp(2.7rem, 6vw, 5.25rem);
  letter-spacing: -.018em;
}
.page-heading > p:not(.kicker) { max-width: 40rem; color: var(--subtle); }
.page-heading .actions, .page-heading > .button { margin-top: 1.1rem; }
.page-heading .fineprint { font-size: .97rem; }
.support-inbox {
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--edge);
  border-top: .28rem solid var(--yellow);
  background: var(--surface);
}
.support-inbox [hidden] { display: none; }
.support-inbox h2 { margin: .35rem 0 .65rem; }
.support-inbox h3 { margin: 1.25rem 0 .55rem; }
.support-inbox p { overflow-wrap: anywhere; }
.support-inbox form { display: grid; gap: .8rem; max-width: 47rem; }
.support-inbox form > .button { justify-self: start; }
.support-inbox label { display: grid; gap: .3rem; min-width: 0; font-weight: 700; }
.support-inbox .support-check { display: flex; gap: .55rem; align-items: baseline; color: var(--subtle); font-size: .93rem; }
.support-inbox .support-check input { width: auto; accent-color: var(--yellow); flex: none; }
.support-inbox input, .support-inbox textarea, .support-inbox select {
  width: 100%;
  padding: .58rem .7rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: #101012;
  color: #fff6db;
  font: inherit;
}
.support-inbox textarea { resize: vertical; }
.support-inbox button { cursor: pointer; font: inherit; }
.support-inbox button:disabled { opacity: .55; cursor: wait; }
.support-upload { display: grid; gap: .3rem; min-width: 0; }
.support-upload input[type="file"] { min-width: 0; max-width: 100%; cursor: pointer; }
.support-upload input::file-selector-button {
  margin-inline-end: .6rem; padding: .3rem .55rem; border: 1px solid var(--edge); border-radius: .25rem;
  background: #29251b; color: #fff6db; cursor: pointer; font: inherit;
}
.support-upload small { color: var(--subtle); font-weight: 400; }
.support-upload-status:empty { display: none; }
.support-upload-clear { justify-self: start; }
.support-attachment-list { display: grid; gap: .32rem; list-style: none; padding: 0; margin: .6rem 0 0; }
.support-attachment-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .5rem; }
.support-attachment-list a { color: #ffdc8d; overflow-wrap: anywhere; }
.support-attachment-list span { color: var(--subtle); font-size: .84rem; }
.support-toolbar, .support-fields { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: .75rem; }
.support-fields > label { flex: 1 1 12rem; }
.support-toolbar > strong { color: var(--yellow); margin-right: auto; }
.support-ticket {
  display: grid;
  gap: .18rem;
  width: 100%;
  margin-bottom: .35rem;
  padding: .75rem .9rem;
  border: 1px solid var(--edge);
  background: #15151a;
  color: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}
.support-ticket:hover, .support-ticket[aria-current="true"] { border-color: var(--yellow); }
.support-ticket[aria-current="true"] { background: #20201b; }
.support-ticket-title { font-size: 1.12rem; }
.support-meta, .support-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .65rem; min-width: 0; }
.support-meta { color: var(--subtle); font-size: .88rem; }
.support-badge { padding: .12rem .46rem; border: 1px solid var(--edge); border-radius: 3px; color: #fff6db; }
.support-badge.game-takeover { background: var(--yellow); color: #14110a; border-color: transparent; font-weight: 800; }
.support-badge.game-borders { background: #adc78d; color: #14170d; border-color: transparent; font-weight: 800; }
.support-state { color: #c6bdab; }
.support-author { padding-block: .2rem .08rem; overflow-wrap: anywhere; }
.support-email { color: #f4d58a; }
.support-reference { color: var(--subtle); font-size: .84rem; }
#support-messages .support-reference { display: block; margin-top: .45rem; }
#support-thread-details { display: grid; gap: .32rem; }
#support-playtest > p:not(.kicker), #support-playtest form { margin-top: .6rem; }
#support-playtest-login:not([hidden]) { margin-top: .65rem; }
.support-application-data { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: .3rem .75rem; margin-block: .5rem; }
.support-application-data dt { color: var(--subtle); }
.support-application-data dd { margin: 0; overflow-wrap: anywhere; }
#support-status:empty { display: none; }
#support-status, #support-sign-in p { margin-bottom: .7rem; color: var(--subtle); }

.support-sign-in-card:not([hidden]) {
  display: grid; gap: .85rem; align-items: center;
  width: min(100%, 43rem); padding: clamp(.9rem, 2vw, 1.35rem);
  background: linear-gradient(145deg, #252220 0%, #17171b 70%);
  border: 1px solid #6a5531; border-left: .22rem solid var(--yellow);
  border-radius: .6rem; margin-block: .8rem;
}
.support-sign-in-card strong { font-size: 1.25rem; }
#support-sign-in p { margin: .2rem 0 0; }
#google-button { display: flex; align-items: center; min-height: 44px; width: min(100%, 256px); min-width: 0; }
#google-button > div { overflow: hidden; border-radius: 999px; }
#google-button > div:focus-within { outline: 2px solid #ffc629; outline-offset: 3px; }
#studio-owner-link { margin-block: .7rem; }
.studio-heading { padding-bottom: 1.05rem; }
.studio-inbox { margin-top: 0; }
.studio-game-tools:not([hidden]) { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin: .9rem 0; padding: .8rem 1rem; border-left: .18rem solid var(--yellow); background: #202023; border-radius: .35rem; }
.studio-game-tools h2 { margin: 0; font-size: 1.16rem; }
.studio-game-tools p { margin: .2rem 0 0; max-width: 38rem; color: var(--subtle); font-size: .9rem; }
.studio-game-tools .actions { margin: 0; }
.studio-quotas:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .65rem 0 1.35rem; }
.studio-quotas > div { display: grid; gap: .1rem; padding: .55rem .8rem; background: #202023; border: 1px solid #393635; border-top: .15rem solid var(--yellow); border-radius: .32rem; }
.studio-quotas span { color: var(--subtle); font-size: .86rem; }
.studio-quotas strong { color: var(--yellow); font-size: clamp(1.05rem, 3vw, 1.45rem); font-variant-numeric: tabular-nums; }
.studio-attachment-quota, .studio-render-feedback {
  margin: .85rem 0 1.3rem; padding: .8rem 1rem; border: 1px solid var(--edge); border-radius: .4rem; background: #18181b;
}
.studio-attachment-quota { scroll-margin-top: 4.5rem; }
.studio-attachment-quota h2, .studio-render-feedback h2 { margin: 0 0 .45rem; font-size: 1.23rem; }
#studio-attachment-usage { color: var(--subtle); font-variant-numeric: tabular-nums; }
#studio-attachment-alert { margin-top: .4rem; color: #ffb1a6; font-weight: 700; }
.render-gallery > p:not(.kicker) { color: var(--subtle); margin-bottom: .7rem; }
#render-gallery-status:empty { display: none; }
#render-gallery-status { color: var(--yellow); }
#render-gallery-form { max-width: 58rem; }
.render-stage {
  position: relative; width: 100%; margin: .2rem 0; overflow: hidden; border-radius: .35rem;
  background: #101012; outline: 1px solid var(--edge);
}
.render-stage img { display: block; width: 100%; height: auto; }
#render-gallery-stage img { cursor: crosshair; }
.render-hint { color: var(--subtle); }
.render-coordinates { display: grid; grid-template-columns: repeat(2, minmax(0, 8rem)); gap: .65rem; }
.render-marker {
  position: absolute; display: block; width: 1.1rem; height: 1.1rem; transform: translate(-50%, -50%);
  border: .15rem solid #101012; outline: .12rem solid #fff6db; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 .35rem .12rem #101012; pointer-events: none;
}
.render-marker-saved { width: .76rem; height: .76rem; background: #fff6db; }
.render-marker-draft { z-index: 1; }
.render-note { margin: .5rem 0; padding: .65rem .8rem; border: 1px solid var(--edge); border-radius: .35rem; background: #131316; }
.render-note p { margin-top: .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.render-preview { max-width: 58rem; margin-top: .45rem; }
.render-preview summary { cursor: pointer; color: #ffdc8d; }
.render-preview .render-stage { margin-top: .6rem; }
.support-reply-card { padding: .75rem; border: 1px solid #555044; background: #181819; border-radius: .45rem; }
.support-reply-card .actions { margin-top: .28rem; }
#support-thread { margin-top: 1rem; border-top: 1px solid var(--edge); }
#support-thread-empty { color: var(--subtle); padding: 1.3rem 0; }
@media (min-width: 850px) {
  [data-role="owner"] .support-workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.3rem; }
  [data-role="owner"] #support-thread { margin: 0; border-top: 0; border-left: 1px solid var(--edge); padding-left: 1.3rem; }
  [data-role="owner"] #support-tickets { max-height: 68vh; overflow-y: auto; padding-right: .25rem; }
}
#support-messages { margin: .8rem 0; }
#support-messages article { padding: .83rem 1rem; border: 1px solid #37363a; border-left-width: .24rem; margin-bottom: .55rem; background: #111114; border-radius: .45rem; }
#support-messages article.studio-reply { border-color: #645536; border-left-color: var(--yellow); background: linear-gradient(130deg, #292313, #1b1a18 68%); }
#support-messages article.studio-reply strong { color: #ffdf89; }
.support-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .8rem; }
.support-message-meta time { color: var(--subtle); font-size: .8rem; }
#support-messages article p { margin-top: .38rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-mail-state { display: inline-block; margin-top: .58rem; padding: .13rem .45rem; border-radius: .28rem; font-size: .78rem; background: #3a321c; color: #ffde8b; }
.support-mail-state.sent { background: #203322; color: #c1e0af; }
.support-mail-state.failed { background: #3c2727; color: #f5a8a8; }
.support-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.15rem, 3vw, 1.85rem);
  border: 1px solid var(--edge);
  border-top: .28rem solid var(--yellow);
  background: var(--surface);
}
.support-card.borders { border-top-color: #9bb578; }
.support-borders-icon { width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: .35rem; }
.support-wordmark {
  width: min(100%, 13.75rem);
  height: 4.6rem;
  margin-bottom: .9rem;
  object-fit: contain;
  object-position: left center;
}
.support-card p { margin-bottom: 1rem; color: var(--subtle); }
.support-card .button { margin-block: auto .85rem; }
.faq { max-width: 49rem; margin-top: 3rem; }
.faq h2 { margin-bottom: 1.2rem; }
.faq details { border-top: 1px solid var(--edge); }
.faq details:last-child { border-bottom: 1px solid var(--edge); }
.faq summary { cursor: pointer; padding: .85rem .15rem; font-weight: 900; }
.faq summary::marker { color: var(--yellow); }
.faq details p { padding: 0 .2rem 1rem 1.15rem; color: var(--subtle); }
.legal-heading { max-width: 63rem; }
.legal-heading h1 { font-size: clamp(2.25rem, 5.3vw, 4.6rem); }
.crumb { display: inline-block; color: var(--yellow); font-weight: 900; }
.revision { font-size: 1rem; }
.legal-layout {
  display: grid;
  grid-template-columns: minmax(11.75rem, 15rem) minmax(0, 47rem);
  align-items: start;
  gap: 1rem clamp(1.3rem, 4vw, 3.25rem);
}
.legal-layout aside {
  position: sticky;
  top: 1rem;
  padding: 1rem;
  border: 1px solid var(--edge);
  background: var(--surface);
}
.contents { flex-direction: column; margin-top: .75rem; font-size: 1rem; }
.legal-text { color: var(--subtle); font-size: 1.13rem; line-height: 1.62; overflow-wrap: anywhere; }
.legal-text h2 { margin: 1.65rem 0 .45rem; color: var(--paper); font-size: clamp(1.65rem, 3.8vw, 2.45rem); }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p + p { margin-top: .8rem; }
.legal-actions { margin-top: 1.65rem; padding-top: 1.2rem; border-top: 1px solid var(--edge); }
.legal-actions .button { margin-bottom: 1rem; }
.site-footer { border-top: 1px solid #514635; background: #131315; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.6rem; }
.footer-brand { display: flex; flex-direction: column; flex: none; }
.footer-brand strong { font: 900 1.7rem/.95 var(--display); color: var(--yellow); }
.footer-brand small { margin-top: .3rem; color: var(--subtle); font-size: .81rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem 1.2rem; }
.site-footer nav a { color: var(--subtle); text-underline-offset: .2em; font-size: 1rem; }
.site-footer nav a:hover { color: var(--yellow); }

@media (max-width: 57rem) {
  .hero { gap: 1.25rem; min-height: 25rem; }
  .hero h1 { font-size: clamp(3.65rem, 8.6vw, 5.2rem); }
  .game-feature { min-height: 25rem; }
  .gallery.takeover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 43rem) {
  .support-application-data { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .support-application-data dt { overflow-wrap: anywhere; }
  .shell { width: min(100% - 2rem, 73.5rem); }
  .hero { grid-template-columns: 1fr; gap: .25rem; padding-block: 2.2rem 1.5rem; }
  .hero h1 { font-size: clamp(3.85rem, 14.5vw, 6.8rem); }
  .hero-art { width: min(100%, 24rem); margin-inline: auto; }
  .hero-intro { margin-bottom: 1.15rem; }
  .section-heading, .support-strip, .document-box { align-items: flex-start; flex-direction: column; }
  .section-heading { gap: .55rem; }
  .games-section { padding-block: 2rem 2.5rem; }
  .game-grid, .support-grid { grid-template-columns: 1fr; }
  .game-page { padding-top: 1rem; }
  .game-feature { grid-template-columns: 1fr; gap: 0; }
  .feature-art { min-height: 20rem; }
  .feature-copy { padding-bottom: .65rem; }
  .borders .feature-art { min-height: clamp(9rem, 50vw, 19rem); }
  .feature-dusty { max-height: 110%; }
  .gallery.borders, .gallery.borders.phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery.takeover { grid-template-columns: 1fr; }
  .subsection { margin-top: 2.4rem; }
  .interior { padding-block: 2rem 3rem; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-layout aside { position: static; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .site-footer nav { justify-content: flex-start; }
}
@media (max-width: 26rem) {
  .masthead-inner { gap: .45rem; min-height: 3.7rem; }
  .studio-sign { gap: .35rem; font-size: 1.22rem; }
  .studio-mini { width: 2.45rem; height: 1.9rem; }
  .studio-mini img { width: 2.7rem; }
  .main-nav { gap: .5rem; font-size: .96rem; }
  .main-nav .language { min-width: 2.65rem; }
  .hero h1 { font-size: clamp(3rem, 13.3vw, 4.8rem); }
  .hero-tagline { margin-top: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}