:root {
  color-scheme:dark;
  --bg:#17232c;
  --ink:#f0eee3;
  --muted:#9aafad;
  --mint:#7efae4;
  --line:#3c5055;
  --coral:#d87572;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 78% 0,#263c43 0,transparent 55%),#111d25;
  color:var(--ink);
  min-height:100svh
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  border:1px solid var(--line);
  background:#22343c;
  user-select:none
}
button:disabled {
  cursor:default;
  opacity:.38
}
button:not(:disabled):active {
  transform:translateY(1px);
  filter:brightness(1.15)
}
button:focus-visible {
  outline:2px solid var(--mint);
  outline-offset:4px
}
button svg {
  width:22px;
  height:22px;
  flex-shrink:0
}
button,dialog {
  border-radius:14px
}
h1,h2,p {
  margin:0
}
button:focus:not(:focus-visible) {
  outline:none
}
.screen {
  max-width:640px;
  margin:auto;
  padding:24px 24px max(18px,env(safe-area-inset-bottom));
  min-height:100svh
}
.brand,.topbar {
  display:flex;
  align-items:center;
  gap:12px
}
.brand {
  font-weight:650;
  font-size:18px
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:3px;
  margin-top:5px;
  color:var(--muted)
}
.logo-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #79928c;
  border-radius:13px;
  transform:rotate(-8deg);
  color:var(--mint)
}
.logo-mark svg {
  width:27px;
  height:27px
}
.edition {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  display:flex;
  gap:7px;
  align-items:center;
  margin-left:auto;
  white-space:nowrap;
  font-weight:400
}
.edition i {
  width:3px;
  height:3px;
  border-radius:50%;
  background:#94c5b5
}
.home-intro {
  margin-top:48px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:#a8c7bf;
  font-weight:500
}
.home h1 {
  font-size:37px;
  line-height:1.45;
  letter-spacing:2px;
  font-weight:600;
  margin-top:14px
}
.home h1 span {
  color:#98dfcc
}
.intro-copy {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:16px
}
.hero-art {
  height:260px;
  position:relative;
  margin:6px -10px 18px;
  overflow:hidden;
  isolation:isolate
}
.orbit {
  position:absolute;
  width:300px;
  height:140px;
  border:1px solid #658b7b24;
  border-radius:50%;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) rotate(-22deg)
}
.o2 {
  width:240px;
  height:240px;
  transform:translate(-50%,-50%) rotate(20deg);
  border-color:#658b7b15
}
.hero-platform {
  position:absolute;
  width:210px;
  height:130px;
  background:linear-gradient(160deg,#30474b,#1b2c33);
  left:50%;
  top:68px;
  transform:translateX(-50%) rotate(-18deg) skew(12deg);
  border-radius:30px;
  border:1px solid #516c6555;
  box-shadow:10px 22px 35px #070d1570,inset 0 2px #a1cdb11a
}
.hero-beam {
  position:absolute;
  width:150px;
  left:calc(50% - 73px);
  top:126px;
  height:3px;
  background:#aeffec;
  box-shadow:0 0 8px #76ffe2,0 0 22px #76ffe2;
  transform:rotate(22deg);
  z-index:2
}
.hero-beam:after {
  content:'';
  position:absolute;
  left:50%;
  top:-4px;
  width:11px;
  height:11px;
  background:#e4fff9;
  border-radius:50%;
  box-shadow:0 0 18px #8cffe7;
  animation:beam 3s ease-in-out infinite
}
.hero-cube {
  position:absolute;
  top:66px;
  left:calc(50% - 100px);
  height:70px;
  width:66px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:650;
  transform:rotate(-12deg);
  z-index:3;
  box-shadow:inset 2px 3px 1px #fff5,0 8px #914f51,5px 14px 18px #080f1955;
  background:linear-gradient(145deg,#f5a18d,#d87572)
}
.hero-cube.mint {
  left:calc(50% + 44px);
  top:120px;
  background:linear-gradient(145deg,#8bd8c8,#3f9e97);
  box-shadow:inset 2px 3px 1px #fff5,0 8px #2b6465,5px 14px 18px #080f1955
}
.hero-robot {
  position:absolute;
  top:160px;
  left:calc(50% - 55px);
  width:29px;
  height:40px;
  border-radius:16px 16px 11px 11px;
  background:linear-gradient(110deg,#fff6df,#9daea6);
  box-shadow:0 5px 8px #0006;
  transform:rotate(-8deg)
}
.hero-robot i {
  position:absolute;
  width:19px;
  height:17px;
  background:#18313b;
  border-radius:50%;
  left:6px;
  top:6px;
  border:2px solid #5c716c
}
.hero-robot i:after {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bcfff0;
  position:absolute;
  right:2px;
  top:2px
}
.art-coordinate {
  position:absolute;
  top:25px;
  right:8px;
  font-size:8px;
  letter-spacing:2px;
  color:#8aa69c
}
.art-caption {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  color:#94b5ab;
  letter-spacing:3px
}
.concept-card {
  display:flex;
  align-items:center;
  width:100%;
  padding:22px 20px;
  text-align:left;
  border:1px solid #57766d;
  border-radius:20px;
  background:linear-gradient(130deg,#2e4548,#1e3239);
  box-shadow:0 14px 32px #07111735,inset 0 1px #abc2a51a
}
.concept-index {
  align-self:flex-start;
  color:#94bcb1;
  font-size:14px;
  margin-right:18px;
  line-height:22px
}
.concept-copy {
  display:grid;
  gap:8px
}
.concept-copy small {
  font-size:10px;
  color:#9db7b1;
  letter-spacing:2px
}
.concept-copy strong {
  font-size:22px;
  font-weight:550;
  letter-spacing:2px
}
.concept-copy>span {
  font-size:11px;
  color:#a8bdb6
}
.concept-copy i {
  margin:0 7px
}
.enter-arrow {
  font-size:30px;
  color:#a6e6d2;
  margin-left:auto
}
.home-footer {
  display:flex;
  justify-content:space-between;
  margin-top:26px;
  color:#7f9692;
  font-size:9px;
  letter-spacing:1px
}
.home-footer span:last-child {
  font-size:7px
}
.icon-button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#24363b70;
  flex-shrink:0
}
.topbar>span {
  font-size:14px
}
.topbar .edition {
  font-size:8px
}
.list-heading {
  margin:35px 0 25px
}
.list-heading h1 {
  font-size:32px;
  font-weight:550;
  letter-spacing:3px;
  margin:10px 0
}
.list-heading h1 span {
  color:#699d8d;
  font-weight:300
}
.list-heading p:not(.eyebrow) {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.progress-label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  margin-top:25px;
  color:#9cbab0;
  letter-spacing:1px
}
.progress-track {
  height:3px;
  background:#304448;
  margin-top:10px;
  border-radius:3px;
  overflow:hidden
}
.progress-track i {
  display:block;
  height:100%;
  background:#9bdfc9
}
.level-grid {
  display:grid;
  gap:10px
}
.level-card {
  display:flex;
  text-align:left;
  align-items:center;
  padding:15px 18px;
  gap:18px;
  background:linear-gradient(120deg,#293e43,#1e3038);
  min-height:73px
}
.level-card:disabled {
  opacity:.5;
  background:#1c2b33
}
.level-number {
  font-size:22px;
  font-weight:300;
  color:#a9c3b9;
  font-variant-numeric:tabular-nums
}
.level-card strong {
  font-size:15px;
  font-weight:500
}
.level-card small {
  display:block;
  color:#98b0a9;
  font-size:10px;
  margin-top:7px
}
.level-status {
  margin-left:auto;
  color:#a4decb
}
.level-card.complete {
  border-color:#567268
}
.level-card.complete .level-number {
  color:#93d9c2
}
.list-note {
  margin:20px 0 0;
  font-size:10px;
  color:#8da49b;
  text-align:center
}
.game {
  max-width:640px;
  padding:16px 18px max(12px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:16px
}
.game .topbar {
  gap:12px
}
.game-heading {
  flex:1
}
.game-heading small {
  font-size:10px;
  color:#97b2a9;
  display:block;
  letter-spacing:2px;
  margin-bottom:5px
}
.game-heading strong {
  font-size:15px;
  color:#a2d8c9;
  font-weight:500;
  display:block
}
.game-heading strong span {
  color:var(--ink);
  margin-left:8px
}
.mission {
  border-top:1px solid #4d646042;
  padding-top:14px
}
.mission>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.mission .eyebrow {
  font-size:9px
}
#steps {
  font-size:10px;
  color:#8fa69f
}
#goals {
  display:flex;
  gap:16px;
  margin-top:12px;
  flex-wrap:wrap
}
.goal {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#bfcac1
}
.goal i {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid #bb9772;
  border-radius:6px;
  font-size:13px;
  font-style:normal;
  color:#efd4a2
}
.goal.A i {
  color:#f2a291;
  border-color:#bd7f75
}
.goal.B i {
  color:#88d9ca;
  border-color:#549c93
}
.goal.done {
  color:#c4f5d7
}
.goal.done i {
  background:#46756555
}
.stage {
  position:relative;
  background:radial-gradient(ellipse at center,#294046,#16252d 80%);
  border:1px solid #425b5d;
  border-radius:20px;
  padding:13px 8px 12px;
  box-shadow:0 18px 35px #070f1640,inset 0 1px #b2d1be18;
  overflow:hidden
}
.stage-top,.stage-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7px;
  font-size:8px;
  letter-spacing:1px;
  color:#8ba89f;
  min-height:17px
}
.stage-bottom {
  font-size:9px;
  letter-spacing:.5px
}
#board {
  width:100%;
  margin:8px auto;
  max-width:540px;
  touch-action:none
}
#board>svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
#patrol {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  letter-spacing:0;
  color:#c3b8a2
}
#patrol b {
  color:#ffd098;
  font-size:16px
}
.patrol-sequence {
  display:inline-flex;
  gap:2px
}
.patrol-sequence i {
  font-style:normal;
  opacity:.5;
  padding:1px 2px
}
.patrol-sequence i.active {
  color:#ffe0b4;
  background:#80654855;
  border-radius:3px;
  opacity:1
}
.interaction {
  display:flex;
  flex-direction:column;
  gap:10px
}
#message {
  min-height:30px;
  font-size:11px;
  color:#b5ccc0;
  line-height:1.65;
  display:flex;
  align-items:center
}
.object-picker {
  display:flex;
  gap:7px
}
.object-chip {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:1;
  font-size:10px;
  padding:4px 6px;
  border-radius:10px;
  background:#22353b
}
.object-chip i {
  width:20px;
  height:22px;
  border-radius:6px;
  font-style:normal;
  display:grid;
  place-items:center;
  background:#dadfcf;
  color:#273e43;
  font-weight:700
}
.object-chip.A i {
  background:#d87572;
  color:#fff1df
}
.object-chip.B i {
  background:#55b9ad;
  color:#f1fff4
}
.object-chip.E i {
  background:#37494e;
  border:1px solid #af9370;
  color:#ecc4a0;
  border-radius:50%
}
.object-chip.selected {
  border-color:#a0efd5;
  background:#36564e;
  box-shadow:0 0 0 1px #9ee4d340
}
.bond-actions {
  display:flex;
  gap:8px
}
.bond-actions button {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex:1;
  font-size:12px;
  background:#263d41;
  border-radius:11px
}
.bond-actions #bind {
  border-color:#597a70;
  color:#c8eedc
}
.bond-actions #bind svg {
  width:18px;
  height:18px
}
.bond-actions #unbind {
  background:#203139;
  color:#b3c4b9
}
#bonds {
  min-height:24px;
  display:flex;
  gap:10px
}
#bonds button {
  height:28px;
  min-width:96px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:8px;
  font-size:10px;
  background:#2a4444;
  border-color:#4a7368;
  padding:0 8px
}
.bond-dot {
  width:5px;
  height:5px;
  background:#b2ffde;
  border-radius:50%;
  box-shadow:0 0 8px #83fcd5
}
.controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding-top:4px;
  margin-top:auto
}
.dpad {
  display:grid;
  grid-template-columns:repeat(3,48px);
  grid-template-rows:repeat(3,44px);
  gap:5px
}
.dpad button {
  font-size:17px;
  border-radius:13px;
  background:linear-gradient(#354a4e,#253a40);
  box-shadow:0 3px 0 #0d1d23,inset 0 1px #c3d9c01a;
  border-color:#54716a;
  color:#e0e8d5
}
.dpad [data-move=U] {
  grid-area:1/2
}
.dpad [data-move=L] {
  grid-area:2/1
}
.dpad [data-move=R] {
  grid-area:2/3
}
.dpad [data-move=D] {
  grid-area:3/2
}
.pad-center {
  grid-area:2/2;
  display:grid;
  place-items:center;
  color:#76988b;
  font-size:23px
}
.utilities {
  display:grid;
  grid-template-columns:repeat(2,60px);
  grid-template-rows:repeat(2,62px);
  gap:8px
}
.utilities button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:10px;
  background:#23373e;
  border-color:#435e5c;
  border-radius:13px
}
.utility-icon {
  font-size:23px;
  line-height:23px
}
.utilities #wait {
  grid-row:1/3;
  align-self:center;
  height:70px
}
.game-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#7f9b91;
  font-size:9px;
  letter-spacing:1px;
  min-height:28px
}
.game-footer button {
  display:flex;
  align-items:center;
  gap:4px;
  border:0;
  font-size:10px;
  padding:6px;
  background:none;
  color:#9bb0a6
}
.game-footer svg {
  width:14px;
  height:14px
}
dialog {
  width:calc(100% - 40px);
  max-width:410px;
  color:var(--ink);
  background:linear-gradient(145deg,#2b4547,#192c34);
  border:1px solid #638277;
  padding:30px 24px;
  box-shadow:0 25px 100px #0007;
  text-align:center;
  max-height:90svh;
  overflow:auto
}
dialog::backdrop {
  background:#08151dc9;
  backdrop-filter:blur(6px)
}
dialog[open] {
  animation:appear .28s ease-out
}
dialog h2 {
  font-size:22px;
  font-weight:550;
  line-height:1.5;
  margin:14px 0
}
dialog p:not(.eyebrow) {
  font-size:12px;
  color:#c1d0c2;
  line-height:1.9
}
.win-symbol {
  border-radius:50%;
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  background:#54877840;
  border:1px solid #83ba9c;
  box-shadow:0 0 40px #8be5ba18
}
.win-symbol svg {
  width:34px;
  height:34px;
  color:#b5f8cb
}
.win-detail {
  margin:16px 0 24px
}
.primary {
  width:100%;
  min-height:49px;
  background:#b5dbc6;
  color:#213d38;
  border-color:#cbe9d5;
  font-weight:600;
  font-size:13px
}
.primary span {
  margin-left:15px
}
.dialog-actions {
  display:flex;
  gap:8px;
  margin-top:14px;
  justify-content:center
}
.dialog-actions button {
  border:0;
  background:transparent;
  font-size:11px;
  min-height:44px;
  color:#bfd0c1;
  padding:5px
}
.help-copy {
  text-align:left;
  display:grid;
  gap:12px;
  margin:20px 0
}
.help-copy .muted {
  font-size:11px;
  color:#94afa3
}
body:has(.game) {
  overscroll-behavior:none
}
.game {
  touch-action:manipulation
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(12px) scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes beam {
  50% {
    left:65%;
    opacity:.65
  }
}
@media(min-width:700px) {
  .home {
    padding-top:40px;
    max-width:560px
  }
  .home-intro {
    margin-top:46px
  }
  .hero-art {
    height:280px
  }
  .game {
    padding-top:24px;
    min-height:100svh;
    max-width:660px
  }
  .game .controls {
    margin-top:0
  }
  .game #board {
    max-width:520px
  }
  .level-grid {
    grid-template-columns:1fr 1fr
  }
  .level-card {
    padding:18px 12px;
    gap:12px
  }
  .levels {
    max-width:720px
  }
  .list-heading {
    margin-top:50px
  }
  .game .interaction {
    max-width:480px;
    width:100%;
    margin:0 auto
  }
  .game .controls {
    gap:60px
  }
  .game-footer {
    max-width:480px;
    width:100%;
    margin:auto auto 0
  }
}
@media(max-width:390px) {
  .screen {
    padding-left:18px;
    padding-right:18px
  }
  .game {
    gap:12px;
    padding-left:14px;
    padding-right:14px
  }
  .home-intro {
    margin-top:36px
  }
  .home h1 {
    font-size:33px
  }
  .hero-art {
    height:240px;
    margin-bottom:12px
  }
  .controls {
    gap:20px
  }
  .object-chip {
    font-size:9px
  }
  .game-heading strong {
    font-size:14px
  }
}
@media(max-height:760px) {
  .game {
    gap:9px
  }
  .game .mission {
    padding-top:9px
  }
  .game .interaction {
    gap:6px
  }
  .game #board {
    max-width:400px
  }
  .game .stage {
    padding-top:7px;
    padding-bottom:7px
  }
  .game .controls {
    padding-top:0
  }
  .game .dpad {
    grid-template-rows:repeat(3,40px);
    gap:4px
  }
  .game .game-footer {
    min-height:20px
  }
  .home-intro {
    margin-top:25px
  }
  .hero-art {
    height:210px
  }
  .home h1 {
    font-size:30px
  }
  .home-footer {
    margin-top:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important
  }
}
.hero-art>svg {
  display:block;
  width:100%;
  height:calc(100% - 20px)
}
@media(max-width:699px) {
  .game {
    gap:10px
  }
  .game .interaction {
    gap:7px
  }
  .game #message {
    min-height:26px
  }
  .game .stage {
    padding-top:9px;
    padding-bottom:9px
  }
  .game #board {
    margin-top:5px;
    margin-bottom:5px
  }
  .game .controls {
    padding-top:0
  }
}
@media (max-width: 699px) and (max-height: 820px) {
  .game { gap: 8px; padding-top: 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .game .stage { padding-top: 6px; padding-bottom: 6px; }
}

/* Existing Game Cloud three-operation UI, themed to the game's established B/C palette. */
.gc-game-dialog { color:var(--ink); background:linear-gradient(145deg,#2b4547,#192c34); --gc-line:#638277; --gc-accent:#a8dcc5; text-align:left; }
.gc-game-dialog button,.gc-game-dialog select { background:#243b40; color:var(--ink); }
.gc-game-dialog button:hover { background:#36554e; }
.gc-game-dialog .gc-game-actions button { background:#29433f; }
.gc-game-dialog .gc-game-primary { color:#213d38; }
.gc-game-dialog .gc-game-version-note,.gc-game-dialog p.cloud-privacy { color:#bfd0c2; }
.gc-game-dialog p.cloud-privacy { font-size:11px; margin:0 0 16px; line-height:1.7; }
.gc-game-dialog .gc-game-status[data-error=true] p { color:#ffc2ad; }
.cloud-list-entry { display:block; min-height:44px; margin:16px auto 0; padding:8px 14px; font-size:12px; }
.home-footer button { min-height:44px; padding:7px 12px; font-size:11px; margin-top:-12px; }
/* v0.2's seven-row level 04 needs a height budget on portrait phones.
   SVG viewBox keeps the complete map centered; controls retain 44px targets. */
@media (max-width: 699px) {
  .game #board > svg { max-height: clamp(160px, calc(100svh - 590px), 350px); }
}