:root {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #16344a;
  background: #dff8ff;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 18%, #fff7a8 0 5%, transparent 5.5%),
    radial-gradient(circle at 92% 10%, #b8e9ff 0 8%, transparent 8.5%),
    linear-gradient(145deg, #e9fbff 0%, #cdeff5 48%, #f5fff0 100%);
}

button { font: inherit; }

.topbar {
  min-height: 56px;
  padding: 7px max(16px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #8bd4df;
  background: #ffffffeb;
}

.brand {
  color: #154663;
  text-decoration: none;
  font-weight: 1000;
  letter-spacing: .07em;
}

.brand b { color: #ee5e57; }

.pill-button, .tool-button {
  border: 2px solid #72bdd0;
  border-radius: 999px;
  background: #fff;
  color: #18506d;
  padding: 8px 13px;
  font-weight: 900;
  cursor: pointer;
}

main {
  width: min(1160px, 100%);
  margin: auto;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(390px, 560px);
  gap: 32px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: #17688b;
  color: #fff;
  font-weight: 900;
}

.intro h1 {
  margin: 10px 0 16px;
  color: #113e62;
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: .94;
  text-shadow: 0 5px 0 #fff;
}

.intro h1 span { color: #ed625d; }
.lead { font-size: 1.08rem; line-height: 1.8; font-weight: 800; }
.lead b { color: #087da0; }

.science-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.science-cards p {
  margin: 0;
  min-height: 92px;
  padding: 14px 8px;
  border: 2px solid #c2ebef;
  border-radius: 17px;
  background: #fff;
  text-align: center;
  font-size: .82rem;
  line-height: 1.55;
  box-shadow: 0 7px 20px #1b60751a;
}

.science-cards b { color: #135b77; }

.records {
  width: max-content;
  max-width: 100%;
  margin-top: 16px;
  padding: 11px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  border-radius: 17px;
  background: #113e62;
  color: #fff;
  font-weight: 900;
}

.records strong { color: #ffe866; font-size: 1.2rem; }

.game-card {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 5px solid #fff;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px #164b6833;
  overflow: hidden;
}

.hud {
  margin-bottom: 7px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.hud div {
  padding: 6px 3px;
  border-radius: 13px;
  background: #e7f7fa;
  text-align: center;
}

.hud small { display: block; color: #4e7a8b; font-size: .67rem; font-weight: 900; }
.hud b { font-size: 1.05rem; }

.lab-window {
  min-height: 570px;
  padding: 16px;
  border-radius: 22px;
  background:
    linear-gradient(#ffffff16 1px, transparent 1px),
    linear-gradient(90deg, #ffffff16 1px, transparent 1px),
    linear-gradient(150deg, #123f60, #176b84 58%, #18566d);
  background-size: 24px 24px, 24px 24px, auto;
  color: #fff;
}

.stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage-heading small { color: #a8eaf2; font-weight: 900; }
.stage-heading h2 { margin: 2px 0; font-size: 1.28rem; }

.target-chip {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 14px;
  background: #fff;
  color: #144d68;
  font-size: .82rem;
  font-weight: 1000;
}

.sample-track {
  margin: 13px 0 9px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 2px solid #8fe7ec;
  border-radius: 18px;
  background: #092d48aa;
}

.sample-track small { display: block; color: #a9eaf3; font-size: .7rem; font-weight: 900; }
.sample-track b { font-size: .95rem; }

.sample-orbit {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 22px #7ff5ff88;
  font-size: 1.8rem;
  transition: transform .25s, background .25s;
}

.sample-orbit.pulse { animation: sample-pulse .45s; }

.mission {
  min-height: 2.7em;
  margin: 7px 0 10px;
  color: #e8fcff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.45;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(var(--slot-count, 4), minmax(46px, 1fr));
  gap: 7px;
  align-items: stretch;
}

.slot-wrap { min-width: 0; text-align: center; }

.checkpoint {
  min-height: 35px;
  margin-bottom: 5px;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ffffff18;
  color: #bceaf1;
  font-size: .61rem;
  font-weight: 900;
  line-height: 1.15;
}

.checkpoint.required { background: #ffef9b; color: #5d4a08; }
.checkpoint.ok { background: #7df1aa; color: #0b5630; }
.checkpoint.bad { background: #ff9b9b; color: #691b23; }

.slot {
  width: 100%;
  min-height: 92px;
  padding: 5px 2px;
  display: grid;
  place-items: center;
  border: 2px dashed #8cdbe6;
  border-radius: 14px;
  background: #0b304a88;
  color: #d8f8ff;
  cursor: pointer;
}

.slot.active { outline: 4px solid #fff176; transform: translateY(-3px); }
.slot .order { font-size: .65rem; opacity: .8; }

.device-card {
  width: 100%;
  min-height: 76px;
  padding: 5px 2px;
  border: 2px solid #fff;
  border-radius: 12px;
  color: #173a4f;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 4px 0 #07304866;
  touch-action: manipulation;
}

.device-card span { display: block; font-size: 1.45rem; }
.device-card small { display: block; font-size: .62rem; }
.device-card[data-type="heat"] { background: linear-gradient(#fff3a0, #ff9f63); }
.device-card[data-type="cool"] { background: linear-gradient(#e9feff, #7dddf6); }
.device-card[data-type="keep"] { background: linear-gradient(#f4edff, #cbb8ee); }
.device-card.selected { outline: 4px solid #fff35b; transform: translateY(-3px); }

.tray-wrap {
  margin-top: 12px;
  padding: 9px;
  border-radius: 15px;
  background: #ffffff17;
}

.tray-wrap p { margin: 0 0 7px; font-size: .69rem; color: #d7f8ff; }
.tray { display: flex; justify-content: center; gap: 7px; min-height: 69px; }
.tray .device-card { max-width: 88px; min-height: 65px; }

.lab-message {
  min-height: 42px;
  margin: 10px 0 8px;
  padding: 7px 10px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #061f34a8;
  color: #fff;
  text-align: center;
  font-size: .73rem;
  font-weight: 900;
  line-height: 1.35;
}

.lab-message.success { background: #13643d; }
.lab-message.failure { background: #862f3c; }

.main-actions { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 7px; }

.primary-button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(#fff37a, #ffbd43);
  color: #154056;
  font-size: .95rem;
  font-weight: 1000;
  box-shadow: 0 5px 0 #be6c27;
  cursor: pointer;
}

.primary-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #be6c27; }
.tool-button { padding: 8px 5px; border-color: #9cdde5; font-size: .75rem; }
button:disabled { opacity: .48; cursor: default; transform: none !important; }

.collection {
  margin-top: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 13px;
  background: #e8f8fa;
  color: #37687b;
  font-size: .7rem;
  font-weight: 900;
}

#badgeShelf { display: flex; gap: 5px; font-size: 1.25rem; }
.badge-locked { filter: grayscale(1); opacity: .25; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #082c47e8;
  color: #fff;
  text-align: center;
  overflow-y: auto;
}

.overlay[hidden] { display: none; }

.overlay-panel {
  width: min(100%, 430px);
  padding: 20px;
  border: 3px solid #91e9ee;
  border-radius: 24px;
  background: #114e69f5;
  box-shadow: 0 0 35px #5feefa55;
}

.overlay-icon { font-size: 2.35rem; }
.overlay-panel h2 { margin: 6px 0 9px; font-size: 1.55rem; }
.overlay-panel > p { margin: 7px 0 15px; line-height: 1.65; font-size: .88rem; }

#rankingWrap {
  max-height: 260px;
  margin-top: 17px;
  padding: 9px;
  overflow: auto;
  border-radius: 14px;
  background: #ffffffed;
  color: #173a4f;
  text-align: left;
  font-size: .75rem;
}

#rankingWrap[hidden] { display: none; }
#leaderboard h3 { margin: 0 0 7px; }

footer { padding: 13px; color: #4a8192; text-align: center; font-size: .75rem; font-weight: 900; letter-spacing: .18em; }

@keyframes sample-pulse {
  0% { transform: scale(.75) rotate(-12deg); }
  65% { transform: scale(1.18) rotate(7deg); }
  100% { transform: scale(1); }
}

@media (max-width: 800px) {
  .topbar { min-height: 50px; }
  main { display: block; padding: 8px; }
  .intro { text-align: center; }
  .intro h1 { margin: 5px 0 6px; font-size: 1.75rem; line-height: 1; }
  .intro h1 br { display: none; }
  .intro h1 span { margin-right: .2em; }
  .eyebrow { padding: 4px 9px; font-size: .67rem; }
  .lead, .science-cards { display: none; }
  .records { margin: 5px auto; padding: 5px 10px; font-size: .66rem; }
  .records strong { font-size: .85rem; }
  .game-card { max-width: 560px; margin: auto; padding: 7px; }
  .lab-window { min-height: 0; padding: 12px 9px; }
  .stage-heading h2 { font-size: 1.05rem; }
  .sample-track { margin: 8px 0 6px; padding: 6px 10px; }
  .sample-orbit { width: 41px; height: 41px; font-size: 1.5rem; }
  .mission { margin: 4px 0 7px; min-height: 0; }
  .slot { min-height: 78px; }
  .device-card { min-height: 65px; }
  .main-actions { grid-template-columns: 1.5fr 1fr 1fr; }
  .primary-button { padding: 10px 7px; font-size: .82rem; }
  .collection { margin-top: 6px; padding: 5px; }
  footer { display: none; }
}

@media (max-width: 420px) {
  .pipeline { gap: 4px; }
  .checkpoint { font-size: .54rem; }
  .device-card span { font-size: 1.2rem; }
  .device-card small { font-size: .54rem; }
  .tray { gap: 4px; }
  .tool-button { font-size: .67rem; }
}

@media (max-height: 720px) and (max-width: 800px) {
  .intro { display: none; }
  .topbar { min-height: 44px; }
  .sample-track { margin: 5px 0; }
  .mission { display: none; }
  .lab-message { min-height: 34px; margin: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sample-orbit { transition: none; }
  .sample-orbit.pulse { animation-duration: .01ms; }
}