:root {
  color-scheme: dark;
  --ink: #fff7e8;
  --muted: #c7c0b3;
  --green: #84e35f;
  --amber: #f2bd68;
  --line: rgba(255, 255, 255, 0.15);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(120, 214, 207, 0.14), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(242, 189, 104, 0.16), transparent 28%),
    linear-gradient(145deg, #101512 0%, #090b0a 45%, #17100e 100%);
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

.game-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 13, 12, 0.88);
  backdrop-filter: blur(18px);
}

.game-header nav,
main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.game-header nav {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  text-decoration: none;
}

.brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132, 227, 95, 0.5);
  background: rgba(132, 227, 95, 0.13);
  color: #dfffce;
}

.brand img { display:block; width:clamp(168px,22vw,232px); height:auto; }

.back-link {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 850;
  text-decoration: none;
}

.game-intro {
  padding: clamp(36px, 6vw, 72px) 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 28px;
  align-items: end;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 800px;
  margin-bottom: 0;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.87;
}

.game-intro > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.5;
}

.game-shell {
  padding-bottom: clamp(50px, 7vw, 84px);
}

.game-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(132, 227, 95, 0.35);
  border-radius: 10px;
  background: #17120e;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.game-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
}

.launch-screen,
.launch-screen img,
#unityGame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.launch-screen {
  z-index: 2;
  cursor: pointer;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: #17120e;
}

.launch-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:#08090938; }
.launch-play { display:flex; align-items:center; gap:15px; border:2px solid #ff986e; border-radius:100px; padding:18px 42px; background:#ff693b; color:#151515; font-size:clamp(1.35rem,3vw,2rem); font-weight:950; box-shadow:0 8px 30px #0009; animation:play-invitation 2.4s ease-in-out infinite; }
.launch-play>span { font-size:.7em; }
.launch-caption { font-weight:750; font-size:clamp(.8rem,1.5vw,1rem); padding:7px 14px; border-radius:4px; background:#0d100fe6; }
.launch-screen:hover .launch-play { background:#ff855b; }
@keyframes play-invitation { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 #ff693b55,0 8px 30px #0009; } 50% { transform:scale(1.045); box-shadow:0 0 0 14px #ff693b00,0 8px 30px #0009; } }
@media(prefers-reduced-motion:reduce) { .launch-play { animation:none; } }

.launch-screen:focus-visible {
  outline: 3px solid #fff7e8;
  outline-offset: -6px;
}

.launch-screen[hidden] {
  display: none;
}

.launch-screen img {
  object-fit: cover;
}

.game-controls button {
  min-height: 40px;
  border: 1px solid var(--line);
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-weight: 950;
  cursor: pointer;
}

#unityGame {
  border: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

.is-playing #unityGame {
  opacity: 1;
}

.game-controls {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.game-controls p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.game-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.android-callout { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-top:18px; padding:clamp(22px,3vw,36px); border:1px solid #ffffff26; border-top:3px solid #ff693b; border-radius:8px; background:#171918; }
.android-copy { min-width:0; }
.android-copy h2 { font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; margin:0 0 12px; }
.android-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.5; margin-bottom:20px; max-width:540px; }
.android-callout .eyebrow { color:#ff946f; font-size:.67rem; }
.android-proof { display:flex; flex-wrap:wrap; gap:16px 30px; list-style:none; margin:0 0 18px; padding:0; }
.android-proof li { display:flex; flex-direction:column; gap:4px; }
.android-proof strong { font-size:1.65rem; line-height:1; }
.android-proof strong span { color:#f2bd68; }
.android-proof li>span { font-size:.8rem; color:var(--muted); }
.android-review-link { font-size:.78rem; text-underline-offset:4px; color:var(--muted); }
.android-download { display:block; flex:none; width:252px; max-width:100%; padding:18px; line-height:0; text-decoration:none; }
.android-download img { display:block; width:100%; height:auto; }
.android-download:focus-visible,.android-review-link:focus-visible,.ios-browser-play:focus-visible,.ios-policy:focus-visible { outline:3px solid var(--ink); outline-offset:5px; }
.ios-callout { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:20px; padding:clamp(22px,3vw,36px); border:1px solid #ffffff26; border-radius:8px; background:linear-gradient(115deg,#201a18,#151616); }
.ios-copy { min-width:0; max-width:650px; }
.ios-callout .eyebrow { color:#ff946f; font-size:.67rem; }
.ios-copy h2 { font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; margin:0 0 14px; }
.ios-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.5; margin:0 0 14px; }
.ios-copy .ios-reassurance { color:var(--ink); }
.ios-browser-play { display:inline-flex; align-items:center; gap:22px; margin:6px 0 16px; padding:14px 20px; border:1px solid #ff946f; border-radius:4px; background:#ff693b; color:#141414; font:inherit; font-weight:800; cursor:pointer; }
.ios-browser-play:hover { background:#ff855b; }
.ios-policy { display:block; width:fit-content; max-width:100%; color:var(--muted); font-size:.72rem; line-height:1.5; text-underline-offset:4px; }
.ios-rejected { position:relative; flex:none; width:252px; max-width:100%; padding:18px 12px 0; text-align:center; }
.ios-unavailable { position:relative; padding:12px 0; }
.ios-unavailable img { display:block; width:100%; height:auto; }
.ios-red-cross { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ios-red-cross path { fill:none; stroke:#f52b35; stroke-width:9; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.ios-stamp-caption { display:block; margin-top:18px; color:var(--muted); font-size:.65rem; letter-spacing:.12em; line-height:1.6; }
@media(max-width:650px) { .android-callout,.ios-callout { align-items:stretch; flex-direction:column; gap:24px; } .android-download { align-self:flex-start; } .ios-rejected { align-self:center; order:-1; } .launch-play { padding:13px 30px; } .launch-overlay { gap:10px; } }

.how-to-play {
  padding: 0 0 clamp(64px, 9vw, 110px);
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 0.95;
}

.how-to-play ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.how-to-play li {
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-content: center;
  border-top: 1px solid var(--line);
  counter-increment: steps;
}

.how-to-play li::before {
  grid-row: span 2;
  content: counter(steps, decimal-leading-zero);
  color: var(--green);
  font-weight: 950;
}

.how-to-play strong {
  font-size: 1.05rem;
}

.how-to-play span {
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .game-intro,
  .how-to-play {
    grid-template-columns: 1fr;
  }

  .game-frame {
    aspect-ratio: 16 / 10;
  }

  .game-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .game-controls button {
    width: 100%;
  }

  .game-controls {
    padding-top: 14px;
  }
}

/* A small transparent rubber stamp above the official crossed-out badge. */
.ios-rejected-stamp{display:table;margin:0 auto 22px;padding:5px 12px 4px;border:2px solid #f52b35;border-radius:2px;background:transparent;color:#f52b35;font:900 .82rem/1.15 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg);box-shadow:inset 0 0 0 2px #181818,inset 0 0 0 3px #f52b3580}