/* Lemonade harness. Values come from the design handoff
   (references/handoff/Lemonade Harness.dc.html), which carried them as inline
   styles on a React tree; they are collected here instead. */

:root {
  --cyan: #31cde8;
  --ink: #0b2b33;
  --lime: #c8f573;
  --dur-slide: .85s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: Figtree, Helvetica, Arial, sans-serif;
  color: var(--ink);
  /* a game canvas must not scroll or rubber-band under a drag */
  overflow: hidden;
  overscroll-behavior: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #31cde8 0%, #56d9ec 30%, #9deaf2 66%, #edfafc 100%);
}

/* ---- the game ---------------------------------------------------------- */

.game {
  position: absolute;
  inset: 0;
  background: #0b1a21;
  opacity: 0;
  transition: opacity .7s ease;
}
.stage[data-phase="building"] .game,
.stage[data-phase="ready"]    .game,
.stage[data-phase="playing"]  .game { opacity: 1; }

#canvas { display: block; width: 100%; height: 100%; outline: none; }

/* the vignette the design puts over the game view */
.game::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,26,34,.4) 0%, rgba(4,26,34,0) 24%,
                              rgba(4,26,34,0) 58%, rgba(4,26,34,.55) 100%);
}


/* ---- logo / back ------------------------------------------------------- */

/* z-index 9 puts BACK over the load overlay (8). Below it, the overlay
   covered the button and the only way out of `ready` was unreachable. */
.logo { position: absolute; top: 24px; left: 30px; z-index: 7; }
.back { position: absolute; top: 24px; left: 30px; z-index: 9; }

.logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: #fff;
  transition: opacity .4s ease;
}
.logo img { display: block; }

.back {
  display: grid; place-items: center;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateX(-10px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, background .2s ease;
}
.back:hover { background: rgba(255,255,255,.28); }

.stage:not([data-phase="hero"]) .logo { opacity: 0; pointer-events: none; }
.stage:not([data-phase="hero"]) .back { opacity: 1; transform: none; pointer-events: auto; }

/* ---- hud --------------------------------------------------------------- */

.hud {
  position: absolute; top: 26px; right: 30px; z-index: 6;
  display: flex; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.stage[data-phase="playing"] .hud { opacity: 1; pointer-events: auto; }

.hud-btn {
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(8,30,38,.5); color: #fff; backdrop-filter: blur(8px);
  padding: 9px 18px; font: 800 14px Figtree, sans-serif; cursor: pointer;
  transition: background .2s ease;
}
.hud-btn:hover { background: rgba(8,30,38,.75); }

/* ---- headline ---------------------------------------------------------- */

.headline {
  position: absolute; left: 0; right: 0; z-index: 4;
  text-align: center; padding: 0 6%;
  line-height: .94; letter-spacing: -.025em;
  top: var(--headline-top, 30%);
  transition: opacity .45s ease, transform .7s var(--ease);
}
.headline span { display: block; font-size: clamp(34px, 5.4vw, 92px); font-weight: 900; }
.headline .l1 { color: #fff; text-shadow: 0 6px 24px rgba(3,80,105,.2); }
.headline .l2 {
  background: linear-gradient(180deg, #ffffff 40%, #f2ff9a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage:not([data-phase="hero"]) .headline {
  opacity: 0; transform: translateY(-28px); pointer-events: none;
}

/* ---- prompt bar -------------------------------------------------------- */

.bar {
  position: absolute; left: 50%; z-index: 10;
  width: min(760px, 92%); transform: translateX(-50%);
  bottom: var(--bar-bottom, 34%);
  transform-origin: 0% 100%;
  transition: bottom var(--dur-slide) var(--ease), opacity .3s ease,
              transform .4s var(--ease);
}
.stage:not([data-phase="hero"]) .bar { bottom: 26px; }

.bar-shell {
  background: rgba(255,255,255,.3); padding: 7px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 26px 60px rgba(4,50,70,.28); backdrop-filter: blur(12px);
  transition: opacity .4s ease, filter .4s ease;
}
.stage[data-phase="building"] .bar-shell { opacity: .5; filter: saturate(.4); }
/* THE BAR SURVIVES INTO READY AND PLAY. The game is full-bleed behind it, not
   over it, and the load overlay sits BEHIND the bar (z 8 vs 10) -- so "Game
   ready" shows on the bar while the CTA is still up. A player who just watched
   their game build is the likeliest person to want to change it. */

.bar-card {
  position: relative; background: #f1f3f4; border-radius: 14px;
  padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; transition: padding .4s ease;
}
.stage:not([data-phase="hero"]) .bar-card { padding: 16px 16px 12px; }

.bar-progress {
  position: absolute; top: 0; left: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, #31cde8, #c8f573);
  transition: width .25s linear, opacity .4s ease; opacity: 0;
}

#prompt {
  border: none; outline: none; resize: none; background: transparent;
  font: 500 20px/1.35 Figtree, sans-serif; color: var(--ink);
  min-height: 95px;
  transition: min-height .4s ease, font-size .4s ease, padding-right .4s ease;
}
#prompt::placeholder { color: #9aa7ab; }
.stage:not([data-phase="hero"]) #prompt { min-height: 26px; font-size: 16px; }

/* TWO LAYOUTS ONLY, per the signed-off bar spec. Landing: prompt over a
   right-aligned Generate. Game state: one line of prompt over a control row --
   collapse at the left, status beside it, Generate at the right. */
.bar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.stage:not([data-phase="hero"]) .bar-actions { justify-content: space-between; margin-top: 14px; }

.bar-left { display: none; align-items: center; gap: 6px; }
.stage:not([data-phase="hero"]) .bar-left { display: flex; }

.collapse {
  display: grid; place-items: center;
  width: 34px; height: 34px; border: none; border-radius: 9px;
  background: transparent; color: #6b7a7e; cursor: pointer;
  transition: background .2s ease;
}
.collapse:hover { background: #e7eaeb; }

.bar-status {
  display: flex; align-items: center; gap: 9px; padding-left: 4px;
  font-size: 14px; font-weight: 600; color: #8b9a9e; white-space: nowrap;
}
.bar-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; }
/* building is amber and ready is green: the bar carries the run's state even
   when the overlay behind it is gone */
.stage[data-phase="building"] .bar-status .dot { background: #f0b429; }

/* ---- collapsed: the bar slides away into the circle ---- */

.stage[data-collapsed="1"] .bar {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(30px) scale(.9);
}

.fab {
  position: absolute; left: 30px; bottom: 26px; z-index: 10;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.26); backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(4,40,55,.35); cursor: pointer;
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .35s ease, transform .35s var(--ease), background .2s ease;
}
.fab:hover { background: rgba(255,255,255,.45); }
.fab img { display: block; filter: brightness(4); }
.stage[data-collapsed="1"] .fab { opacity: 1; transform: scale(1); pointer-events: auto; }

.generate {
  display: flex; align-items: center; gap: 9px;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 12px 22px; background: var(--ink); color: #fff;
  font: 800 16px Figtree, sans-serif;
  transition: opacity .3s ease, transform .15s ease;
}
.generate:hover:not(:disabled) { transform: translateY(-1px); }
.generate:disabled { opacity: .4; cursor: not-allowed; }
.generate img { display: block; filter: brightness(0) invert(1); }

/* ---- overlay: building / ready ----------------------------------------- */

/* 40% WHILE BUILDING, so the run shows through it. The scaffold, then the
   cube level, then the real level are all rendering behind here long before
   the game is done -- an opaque sheet would hide the entire point of
   publishing them (docs/website-harness-integration-plan.md). It goes back to
   near-opaque for `ready`, where the CTA is the only thing that matters. */
.overlay {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center;
  background: rgba(5,20,26,.82); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease, background-color .6s ease, backdrop-filter .6s ease;
}
.stage[data-phase="building"] .overlay,
.stage[data-phase="ready"]    .overlay { opacity: 1; pointer-events: auto; }
.stage[data-phase="building"] .overlay {
  background: rgba(5,20,26,.40); backdrop-filter: blur(1.5px);
}
/* the status text has to stay readable over a moving game */
.stage[data-phase="building"] .status {
  text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
}

.building, .ready {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transition: opacity .4s ease;
}
/* both sit in the SAME grid cell so they cross-fade in place. At opacity 0
   an element still takes clicks, and this one covered the Play button --
   caught by a scripted click that retried for 30 s and never landed. */
.building { gap: 34px; pointer-events: none; }
.ready { gap: 22px; pointer-events: none; }
.stage[data-phase="building"] .building { opacity: 1; }
.stage[data-phase="ready"] .ready { opacity: 1; pointer-events: auto; }

.dots { display: grid; grid-template-columns: repeat(3, 13px); gap: 11px; }
.dots i {
  width: 13px; height: 13px; border-radius: 50%; background: #4fdcf2;
  animation: dotpulse 1.25s ease-in-out infinite;
}
@keyframes dotpulse {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

.status {
  font-size: 26px; font-weight: 500; letter-spacing: -.01em;
  color: #d4ecf2; text-align: center; padding: 0 8%;
}

.track {
  width: min(280px, 60%); height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.track-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #31cde8, #e8ff8f);
  transition: width .25s linear;
}

.play {
  display: flex; align-items: center; gap: 14px;
  border: none; cursor: pointer; padding: 19px 40px; border-radius: 999px;
  background: #fff; color: var(--ink); font: 900 21px Figtree, sans-serif;
  box-shadow: 0 20px 48px rgba(4,40,55,.4);
  transition: transform .15s ease;
}
.play:hover { transform: translateY(-2px); }
.tri {
  display: inline-block; width: 0; height: 0;
  border-left: 15px solid var(--ink);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

/* ---- modals ------------------------------------------------------------ */

.modal {
  position: absolute; inset: 0; z-index: 12;
  display: grid; place-items: center;
  background: rgba(4,26,34,.55); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal[data-open="1"] { opacity: 1; pointer-events: auto; }

.sheet {
  width: min(420px, 88%); background: #fff; border-radius: 20px;
  padding: 26px 26px 20px; box-shadow: 0 30px 70px rgba(4,40,55,.45);
  display: flex; flex-direction: column; gap: 10px;
}
.sheet-title { font-size: 22px; font-weight: 900; letter-spacing: -.015em; }
.sheet-body { font-size: 16px; font-weight: 500; line-height: 1.45; color: #4b5c61; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

.btn-ghost, .btn-solid {
  padding: 12px 22px; border-radius: 12px;
  font: 800 16px Figtree, sans-serif; cursor: pointer;
}
.btn-ghost { border: 1px solid #d7dcde; background: #fff; color: var(--ink); }
.btn-ghost:hover { background: #f1f3f4; }
.btn-solid { border: none; background: var(--ink); color: #fff; }
.btn-solid:hover { background: #123c47; }

/* ---- small screens ----------------------------------------------------- */
/* The handoff says "nothing width-specific below 700px yet". The target
   includes iPhone, so: give the headline and the copy room, and keep the
   generate button from crowding a one-line prompt. */

@media (max-width: 700px) {
  .logo, .back { top: 16px; left: 16px; }
  .logo { font-size: 20px; gap: 9px; }
  .logo img { width: 28px; height: 28px; }
  .hud { top: 16px; right: 16px; }
  .hud-btn { padding: 8px 14px; font-size: 13px; }
  .headline span { font-size: clamp(30px, 9vw, 46px); }
  .bar { width: 94%; }
  #prompt { font-size: 17px; min-height: 76px; }
  .stage:not([data-phase="hero"]) #prompt { padding-right: 0; min-height: 40px; }
  .bar-status { font-size: 13px; }
  .fab { left: 16px; bottom: 16px; }
  .status { font-size: 19px; }
  .building { gap: 26px; }
  .play { padding: 16px 30px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}