/* LUUPIE app shell — stitched-fabric UI language (analysis doc §7: panels behave
   like sewn pieces, not SaaS cards; UI never permanently covers >35% of scene). */
@import url("tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  user-select: none;
}

/* ---- Device frame: the game renders at its DESIGN master resolution
   (mobile 1920x864 / tablet 1600x1200 per SCREEN_AND_MOTION_SPEC.md, read this
   session) and the whole stage is scaled to the viewport by js/viewport.js.
   Why this instead of per-component responsive rules: it guarantees the exact
   designed proportions and touch-target ratios at every screen size, and it is
   why nothing can overflow or disappear on a small phone. In portrait the stage
   is additionally rotated 90deg so the landscape game fills the screen. ---- */
#stage-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--ink2) 0%, var(--ink) 70%);
}
#stage {
  --design-w: 1920;
  --design-h: 864;
  --fit: 1;
  --rot: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--fit));
  transform-origin: center center;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 1px #000, 0 30px 80px #000c;
  background: var(--ink2);
  container-type: size;
}
#stage.tablet { --design-w: 1600; --design-h: 1200; }

/* Portrait hint — non-blocking (research: never block the player), auto-hides */
#rotate-hint {
  position: fixed;
  z-index: 200;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #140B1Ff2;
  border: 1.5px solid var(--teal);
  color: var(--cream);
  font: 700 14px/1 var(--font-display);
  box-shadow: 0 10px 30px #000a;
}
#rotate-hint.show { display: flex; animation: hint-in 320ms var(--ease-pop); }
#rotate-hint .rot-ico { font-size: 20px; animation: rot-nudge 1.8s ease-in-out infinite; }
@keyframes hint-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes rot-nudge { 0%, 60%, 100% { transform: rotate(0); } 30% { transform: rotate(90deg); } }

/* ---- Screen layers ---- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; }
.scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.scene-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, #0A0712cc 0%, transparent 18%, transparent 78%, #0A0712d9 100%),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, #0A071288 100%);
}
.screen > .ui { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: var(--safe-edge); }

/* ---- Stitched panel ---- */
.panel {
  background: linear-gradient(160deg, #2F153Eee, #140B1Ff2);
  border: 1.5px solid #703499aa;
  border-radius: var(--panel-radius);
  box-shadow: inset 0 0 0 5px #0a071233, 0 10px 30px #00000088;
  position: relative;
}
.panel::before {
  content: "";
  position: absolute; inset: 7px;
  border: 2px dashed #BEAFCA44;   /* stitch seam */
  border-radius: calc(var(--panel-radius) - 8px);
  pointer-events: none;
}
.panel.crisis { border-color: var(--red); animation: crisis-pulse 900ms infinite; }
@keyframes crisis-pulse {
  0%, 100% { box-shadow: inset 0 0 0 5px #0a071233, 0 0 24px #FF536055; }
  50% { box-shadow: inset 0 0 0 5px #0a071233, 0 0 44px #FF5360aa; }
}

/* ---- Buttons ---- */
.btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  font: 700 17px/1 var(--font-display);
  letter-spacing: .4px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--teal), #2BB5A8);
  box-shadow: 0 5px 0 #1B8078, 0 10px 24px #3EDDCD44;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform var(--t-micro) var(--ease-pop), box-shadow var(--t-micro), filter var(--t-micro);
}
.btn:active { transform: translateY(4px) scale(.98); box-shadow: 0 1px 0 #1B8078; }
.btn:hover { filter: brightness(1.08); }
.btn.magenta { background: linear-gradient(180deg, var(--magenta), #B93275); box-shadow: 0 5px 0 #8A2358, 0 10px 24px #E54C9744; color: var(--white); }
.btn.magenta:active { box-shadow: 0 1px 0 #8A2358; }
.btn.amber { background: linear-gradient(180deg, var(--amber), #D99427); box-shadow: 0 5px 0 #A06B15; }
.btn.ghost { background: #481F5666; color: var(--cream); border: 1.5px solid #703499; box-shadow: none; }
.btn.danger { background: linear-gradient(180deg, var(--red), #C23843); box-shadow: 0 5px 0 #8F2830; color: var(--white); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.icon-btn {
  width: var(--touch-min); height: var(--touch-min);
  border-radius: 50%;
  border: 1.5px solid #703499aa;
  background: #140B1Fd9;
  color: var(--cream);
  font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--t-micro) var(--ease-pop), border-color var(--t-micro);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn:hover { border-color: var(--teal); }

/* ---- HUD ---- */
.hud-top {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.hud-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #140B1Fd9;
  border: 1.5px solid #70349988;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font: 700 15px/1 var(--font-display);
  color: var(--cream);
  min-height: 44px;
}
.hud-pill img { width: 30px; height: 30px; object-fit: contain; }
.hud-pill .plus {
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--teal); color: var(--ink); font-weight: 900; cursor: pointer;
  display: grid; place-items: center; font-size: 15px;
}
.spacer { flex: 1; }

/* ---- Common text ---- */
h1.screen-title { font: 800 clamp(20px, 4cqh, 34px)/1.15 var(--font-display); color: var(--cream); text-shadow: 0 2px 12px #000; }
.subtitle { color: var(--muted); font-size: clamp(12px, 2.4cqh, 16px); }
.gold { color: var(--amber); }
.tealtx { color: var(--teal); }

/* ---- Meters / rings ---- */
.meter { height: 14px; border-radius: 999px; background: #0A0712aa; border: 1px solid #70349966; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--cyan)); transition: width 300ms var(--ease-out); }
.meter.warn > i { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.meter.crit > i { background: linear-gradient(90deg, var(--red), var(--magenta)); }

.ring { --p: 100; --ring-color: var(--teal); width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--p) * 1%), #0A0712cc 0);
  display: grid; place-items: center; }
.ring::after { content: ""; width: 44px; height: 44px; border-radius: 50%; background: #140B1F; position: absolute; }
.ring > * { position: relative; z-index: 1; }

/* ---- Toy entity on shift floor ---- */
.toy {
  position: absolute;
  width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: left 700ms var(--ease-out), top 700ms var(--ease-out), transform var(--t-micro);
  z-index: 3;
}
.toy:hover { transform: scale(1.06); }
.toy img.face { width: 72px; height: 72px; border-radius: 22px; border: 3px solid var(--teal); object-fit: cover; box-shadow: 0 6px 18px #000a; background: var(--plum); }
.toy.psycho img.face { border-color: var(--red); animation: shake 300ms infinite; }
.toy.selected img.face { border-color: var(--amber); box-shadow: 0 0 0 4px #FFBB4855, 0 6px 18px #000a; }
.toy .need {
  position: absolute; top: -14px; right: -8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--plum2); border: 2px solid var(--cream);
  display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 3px 10px #000a;
}
@keyframes shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }

/* patience ring under toy */
.toy .patience { width: 60px; height: 8px; border-radius: 999px; background: #0A0712cc; overflow: hidden; }
.toy .patience > i { display: block; height: 100%; background: var(--green); transition: width 250ms linear; }
.toy .patience.warn > i { background: var(--amber); }
.toy .patience.crit > i { background: var(--red); }

/* multi-step repair chain indicator under the toy */
.toy .chain { display: flex; gap: 3px; align-items: center; }
.toy .chain .cdot {
  width: 20px; height: 20px; border-radius: 6px;
  background: #0A0712cc; border: 1.5px solid #70349988;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
}
.toy .chain .cdot.done { border-color: var(--green); background: #1a3a2acc; opacity: .8; }
.toy .chain .cdot.now { border-color: var(--teal); box-shadow: 0 0 10px #3EDDCD66; transform: scale(1.12); }

/* psycho stage tinting on the toy frame (colour is never the only signal — the
   badge icon and the shake amount change too; analysis §7 accessibility rule) */
.toy[data-stage="tension"] img.face { border-color: var(--amber); }
.toy[data-stage="critical"] img.face { border-color: var(--orange); animation: shake 420ms infinite; }
.toy[data-stage="recovery"] img.face { border-color: var(--cyan); }

/* minigame dot pulse so targets read instantly on a small screen */
.mg-dot { animation: mg-pulse 1.4s ease-in-out infinite; }
@keyframes mg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* stations */
.station {
  position: absolute;
  width: 150px; padding: 10px;
  text-align: center;
  border-radius: 20px;
  background: #140B1Fd0;
  border: 2px dashed #70349988;
  cursor: pointer;
  z-index: 2;
  transition: border-color var(--t-micro), transform var(--t-micro);
}
.station:hover, .station.hot { border-color: var(--teal); transform: scale(1.03); }
.station .s-name { font: 800 13px/1.2 var(--font-display); color: var(--cream); }
.station .s-cap { font-size: 11px; color: var(--muted); }
.station.busy { border-color: var(--amber); }
.station.locked { opacity: .45; cursor: not-allowed; }

/* ---- Modal / sheet ---- */
.modal-veil {
  position: absolute; inset: 0; z-index: 50;
  background: #0A0712c8;
  display: none;
  place-items: center;
  backdrop-filter: blur(3px);
}
.modal-veil.open { display: grid; }
.modal { width: min(680px, 84%); max-height: 86%; overflow: auto; padding: 30px; animation: pop-in var(--t-panel) var(--ease-pop); }
@keyframes pop-in { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Grid cards (meta screens) ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; overflow: auto; padding: 4px; }
.card {
  padding: 16px; text-align: center; cursor: pointer;
  transition: transform var(--t-micro) var(--ease-pop), border-color var(--t-micro);
}
.card:hover { transform: translateY(-4px); border-color: var(--teal); }
.card img.thumb { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; margin-bottom: 8px; }
.card .c-title { font: 800 14px/1.2 var(--font-display); }
.card .c-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.card.locked { filter: grayscale(.75) brightness(.65); }

/* ---- Reward burst ---- */
.reward-item { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; animation: reward-pop var(--t-reward) var(--ease-pop) backwards; }
.reward-item img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 14px #FFBB4866); }
@keyframes reward-pop { from { transform: translateY(26px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* stars */
.stars { display: flex; gap: 10px; justify-content: center; font-size: 44px; }
.stars .st { color: #3a2a4a; transition: color 200ms, transform 400ms var(--ease-pop); }
.stars .st.on { color: var(--amber); text-shadow: 0 0 22px #FFBB4899; transform: scale(1.15); }

/* ---- Toast ---- */
#toast {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%) translateY(20px);
  z-index: 90; padding: 12px 22px; border-radius: 999px;
  background: #140B1Ff0; border: 1.5px solid var(--teal); color: var(--cream);
  font: 700 14px/1 var(--font-display); opacity: 0; pointer-events: none;
  transition: opacity var(--t-panel), transform var(--t-panel) var(--ease-pop);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { border-color: var(--red); }

/* ---- Bottom action dock (analysis §5: 3 quick actions bottom edge) ---- */
.dock { display: flex; gap: 12px; justify-content: center; align-items: flex-end; pointer-events: auto; }

/* ---- Side quest rail (right panel) ---- */
.right-rail {
  position: absolute; right: var(--safe-edge); top: 50%; transform: translateY(-50%);
  width: clamp(200px, 24cqw, 280px);
  padding: 18px; z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
}
.right-rail h3 { font-size: 13px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }

/* crew rail (left) */
.crew-rail { position: absolute; left: var(--safe-edge); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.crew-rail img { width: 58px; height: 58px; border-radius: 18px; border: 2.5px solid #703499; object-fit: cover; cursor: pointer; transition: border-color var(--t-micro), transform var(--t-micro); background: var(--plum); }
.crew-rail img:hover { border-color: var(--teal); transform: scale(1.08); }

/* minigame swipe canvas */
#mg-canvas { position: absolute; inset: 0; z-index: 3; touch-action: none; }

/* skill tree */
.skill-node {
  width: 76px; height: 76px; border-radius: 50%;
  border: 2.5px solid #703499; background: #140B1Fd9;
  display: grid; place-items: center; cursor: pointer; position: absolute;
  font-size: 24px;
  transition: border-color var(--t-micro), transform var(--t-micro), box-shadow var(--t-micro);
}
.skill-node:hover { transform: scale(1.1); }
.skill-node.owned { border-color: var(--teal); box-shadow: 0 0 18px #3EDDCD66; }
.skill-node.avail { border-color: var(--amber); animation: avail-glow 1.6s infinite; }
.skill-node.locked { opacity: .4; }
@keyframes avail-glow { 0%,100% { box-shadow: 0 0 8px #FFBB4844; } 50% { box-shadow: 0 0 24px #FFBB4899; } }

/* season pass track */
.pass-track { display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px; }
.pass-node { min-width: 130px; padding: 12px; text-align: center; }
.pass-node.claimed { border-color: var(--green); }
.pass-node .tier { font: 900 20px/1 var(--font-display); color: var(--amber); }

/* leaderboard rows */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #140B1Faa; border: 1px solid #70349944; }
.lb-row.me { border-color: var(--teal); background: #1c3a3aaa; }
.lb-row .rank { font: 900 18px/1 var(--font-display); width: 34px; color: var(--muted); }
.lb-row img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }

/* settings rows */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px dashed #70349955; min-height: var(--touch-min); }
.toggle { width: 62px; height: 34px; border-radius: 999px; background: #0A0712; border: 1.5px solid #703499; position: relative; cursor: pointer; transition: background var(--t-micro); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--muted); transition: left var(--t-micro) var(--ease-pop), background var(--t-micro); }
.toggle.on { background: #1B8078; }
.toggle.on::after { left: 30px; background: var(--teal); }

/* generic list scroll */
.scroll-y { overflow-y: auto; min-height: 0; }

/* screen fade-in via WAAPI fallback class */
.screen.active > .ui { animation: screen-in var(--t-panel) var(--ease-out); }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Onboarding spotlight (js/tutorial.js) ----
   Research finding: teach by gating the next tap, never by blocking the screen. The card
   sits low so it cannot cover the queue, and #tut-layer stays pointer-events:none so the
   real target underneath is what receives the tap. */
#tut-layer {
  position: absolute; inset: 0; z-index: 70; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 12cqh;
}
.tut-card {
  pointer-events: auto;
  max-width: min(560px, 78%);
  padding: 14px 20px;
  text-align: center;
  border-color: var(--teal);
  animation: tut-in var(--t-panel) var(--ease-pop);
}
.tut-card p { color: var(--cream); font: 700 clamp(13px, 2.6cqh, 17px)/1.35 var(--font-display); margin: 6px 0 0; }
.tut-card .tut-step { font: 900 12px/1 var(--font-display); color: var(--teal); letter-spacing: .12em; }
.tut-card .btn { margin-top: 10px; }
@keyframes tut-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.tut-focus { position: relative; z-index: 75 !important; animation: tut-pulse 1.4s ease-in-out infinite; }
@keyframes tut-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 #3EDDCD00); }
  50%      { filter: drop-shadow(0 0 14px #3EDDCDcc); }
}

/* ---- Siege defence (js/siege.js) ----
   .siege-field is a sibling of .ui (z-index 2 at line 92) and matches .toy's z-index 3,
   so lanes render above the background art while the HUD panel stays readable. */
.siege-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.siege-enemy {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.siege-enemy img { width: 78px; height: 78px; border-radius: 22px; object-fit: cover; border: 3px solid var(--red); background: var(--plum); box-shadow: 0 6px 18px #000a; animation: shake 320ms infinite; }
.siege-enemy .ehp { font: 900 13px/1 var(--font-display); color: var(--red); text-shadow: 0 2px 6px #000; }
.siege-enemy:active img { transform: scale(.93); }

.boss-cue {
  min-width: 118px; padding: 8px 16px; border-radius: 999px;
  font: 900 15px/1 var(--font-display); letter-spacing: .08em;
  background: #0A0712; border: 2px solid var(--steel); color: var(--muted);
  transition: color var(--t-micro), border-color var(--t-micro), transform var(--t-micro);
}
.boss-cue.open {
  color: var(--ink); border-color: var(--teal);
  background: linear-gradient(180deg, var(--teal), var(--cyan));
  transform: scale(1.08);
}