/* V34 — deliberate decisions, readable feedback and repeat-safe transitions. */

.meguru-v34 .screen:not(.is-active),
.meguru-v34 .screen:not(.is-active) * {
  animation-play-state:paused !important;
}

.confetti span {
  top:-24px !important;
  animation-name:v34-confetti-fall !important;
  animation-duration:1.35s !important;
  animation-iteration-count:1 !important;
  animation-fill-mode:forwards !important;
  animation-delay:var(--delay) !important;
  will-change:transform,opacity;
}

@keyframes v34-confetti-fall {
  from { opacity:1; transform:translate3d(0,0,0) rotate(var(--rotation)); }
  to { opacity:0; transform:translate3d(12px,620px,0) rotate(560deg); }
}

#sort-next[data-v34-finishing="true"] {
  cursor:progress;
  opacity:.82;
}

#sort-complete:focus { outline:0; }

/* Diagnosis model kit ------------------------------------------------------ */

#build-screen .scene-heading h2,
#operate-screen .scene-heading h2 { text-wrap:balance; }

.model-rush-hud .rush-timer { display:none; }
.model-rush-hud { grid-template-columns:1fr auto; }
.model-rush-hud>#rush-time {
  display:grid;
  min-width:54px;
  min-height:42px;
  place-items:center;
  border:1px solid rgba(186,255,33,.42);
  color:var(--od-lime,#baff21);
  background:rgba(186,255,33,.08);
  font-size:20px;
}

.v34-model-mission {
  display:grid;
  gap:8px;
  margin:3px 0 13px;
  padding:14px 15px;
  border:1px solid rgba(0,229,255,.42);
  border-left:5px solid var(--od-cyan,#00e5ff);
  color:#e9fff8;
  background:linear-gradient(120deg,rgba(0,229,255,.1),rgba(186,255,33,.055));
}

#build-screen .v34-model-mission { order:-3; }
#build-screen .model-rush-start { order:-2; }
#build-screen .model-complete-button { order:-1; min-height:58px; margin:0 0 13px; font-size:16px; touch-action:manipulation; }
#build-screen .model-complete-button[aria-busy="true"] { opacity:.76; cursor:progress; }

.v34-model-mission header {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.v34-model-mission header span,
.v34-model-mission>small {
  color:var(--od-cyan,#00e5ff);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
}

.v34-model-mission header strong {
  color:var(--od-lime,#baff21);
  font-size:12px;
}

.v34-model-mission h3 {
  margin:0;
  color:#fff;
  font-size:clamp(17px,1.55vw,22px) !important;
  line-height:1.45;
}

.v34-model-mission>p {
  margin:0;
  color:#a8c7be;
  font-size:13px;
  line-height:1.55;
}

.v34-model-mission ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:2px 0 0;
  padding:0;
  list-style:none;
  counter-reset:model-step;
}

.v34-model-mission ol li {
  display:flex;
  gap:7px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  color:#d8eee8;
  background:rgba(0,0,0,.18);
  font-size:12px;
  font-weight:850;
  counter-increment:model-step;
}

.v34-model-mission ol li::before {
  display:grid;
  flex:0 0 24px;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  color:#07110e;
  background:var(--od-lime,#baff21);
  content:counter(model-step);
  font-weight:950;
}

.v34-model-feedback {
  display:grid;
  gap:3px;
  margin-top:3px;
  padding:10px 11px;
  border-left:4px solid #ff7f68;
  background:rgba(255,127,104,.1);
}

.v34-model-feedback.is-correct {
  border-left-color:var(--od-lime,#baff21);
  background:rgba(186,255,33,.09);
}

.v34-model-feedback b { color:#fff; font-size:13px; }
.v34-model-feedback p { margin:0; color:#b4cec6; font-size:12px; line-height:1.55; }

.model-runner button.is-eliminated {
  opacity:.2 !important;
  filter:grayscale(1);
}

.model-runner button.is-answer {
  border-color:var(--od-lime,#baff21);
  box-shadow:0 0 0 2px var(--od-lime,#baff21),0 0 24px rgba(186,255,33,.3);
}

.model-kit-panel.is-commissioning .model-runner { display:none; }
.model-kit-panel.is-commissioning .v34-model-mission { min-height:0; align-content:start; }
.model-kit-panel.is-review .model-runner,
.model-kit-panel.is-review .model-next-part { display:none; }
.model-kit-panel.is-review .v34-model-mission { border-color:rgba(186,255,33,.5); border-left-color:var(--od-lime,#baff21); background:linear-gradient(120deg,rgba(186,255,33,.11),rgba(0,229,255,.055)); }

.v34-flow-options {
  display:grid;
  gap:8px;
  margin-top:4px;
}

.v34-flow-options button {
  min-height:52px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.2);
  color:#ecfff9;
  background:#10221d;
  font-size:13px;
  font-weight:900;
  text-align:left;
  cursor:pointer;
}

.v34-flow-options button:hover:not(:disabled),
.v34-flow-options button:focus-visible {
  border-color:var(--od-cyan,#00e5ff);
  background:#17342c;
  transform:translateX(3px);
}

.v34-flow-options button:disabled { opacity:.32; cursor:default; }
.v34-model-mission .v34-flow-options+.v34-model-feedback { margin-top:5px; }

.v36-model-crew-guide {
  display:grid;
  grid-template-columns:112px 1fr;
  gap:18px;
  align-items:center;
  padding:16px;
  border:1px solid rgba(53,116,126,.24);
  border-radius:20px;
  color:#173847;
  background:linear-gradient(120deg,#effaf7,#fff8df);
}

.v36-model-crew-portrait {
  width:112px;
  aspect-ratio:1;
  border:3px solid #fff;
  border-radius:28px;
  background:#20404a url("assets/meguru-crew-roster-v2.webp") var(--v36-crew-x,0%) var(--v36-crew-y,0%)/300% 200% no-repeat;
  box-shadow:0 12px 26px rgba(22,68,76,.2);
}
.v36-model-crew-portrait[data-crew="mio"] { --v36-crew-x:0%;--v36-crew-y:0%; }
.v36-model-crew-portrait[data-crew="rin"] { --v36-crew-x:50%;--v36-crew-y:0%; }
.v36-model-crew-portrait[data-crew="mei"] { --v36-crew-x:100%;--v36-crew-y:0%; }
.v36-model-crew-portrait[data-crew="sara"] { --v36-crew-x:0%;--v36-crew-y:100%; }
.v36-model-crew-portrait[data-crew="haru"] { --v36-crew-x:50%;--v36-crew-y:100%; }
.v36-model-crew-portrait[data-crew="ren"] { --v36-crew-x:100%;--v36-crew-y:100%; }
.v36-model-crew-guide small { color:#3f7d84; font-size:12px; font-weight:950; letter-spacing:.08em; }
.v36-model-crew-guide h3 { margin:4px 0 0; color:#173847; font-size:20px; }
.v36-model-crew-guide b { display:block; margin-top:9px; color:#bd4b34; font-size:16px; }
.v36-model-crew-guide p { margin:5px 0 0; color:#3f5f66; font-size:15px; line-height:1.75; }

@media (max-width:620px) {
  .v34-model-mission header { align-items:flex-start; flex-direction:column; }
  .v34-model-mission ol { grid-template-columns:1fr; }
  .v36-model-crew-guide { grid-template-columns:78px 1fr; gap:12px; padding:12px; }
  .v36-model-crew-portrait { width:78px; border-radius:20px; }
  .v36-model-crew-guide h3 { font-size:17px; }
  .v36-model-crew-guide p { grid-column:1/-1; font-size:14px; }
}

/* Six-shift operations ----------------------------------------------------- */

.v34-operation-mission {
  display:grid;
  gap:14px;
  max-width:1400px;
  margin:14px auto 18px;
  padding:18px;
  border:1px solid rgba(0,229,255,.4);
  border-top:5px solid var(--od-cyan,#00e5ff);
  color:#ecfffa;
  background:
    radial-gradient(circle at 92% 0,rgba(186,255,33,.12),transparent 27%),
    linear-gradient(125deg,#071511,#0b211b);
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

.v34-operation-mission>header {
  display:flex;
  gap:20px;
  align-items:end;
  justify-content:space-between;
}

.v34-operation-mission>header small {
  color:var(--od-cyan,#00e5ff);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}

.v34-operation-mission>header h3 {
  max-width:900px;
  margin:5px 0 0;
  color:#fff;
  font-size:clamp(22px,2.8vw,38px);
  line-height:1.25;
  text-wrap:balance;
}

.v34-operation-mission>header>strong {
  min-width:86px;
  color:var(--od-lime,#baff21);
  font-size:28px;
  text-align:right;
}

.v34-operation-rules {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.v34-operation-rules article {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 10px;
  align-items:center;
  min-height:68px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
}

.v34-operation-rules article span {
  grid-row:1/3;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  color:#07110e;
  background:var(--od-lime,#baff21);
  font-size:16px;
  font-weight:950;
}

.v34-operation-rules article b { color:#fff; font-size:14px; }
.v34-operation-rules article small { color:#90afa5; font-size:12px; }

.v34-operation-rules>span,
.v34-operation-rules>b {
  min-height:34px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.13);
  font-size:12px;
}

.v34-operation-rules>span { color:#85aaa0; }
.v34-operation-rules>b { color:#eaffde; background:rgba(186,255,33,.07); }

.v34-shift-card {
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.2);
}

.v34-shift-card[hidden] { display:none !important; }

.v34-shift-card>small {
  color:#ff9a73;
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
}

.v34-shift-card>h4 {
  margin:0;
  color:#fff;
  font-size:clamp(20px,2.2vw,29px);
  line-height:1.35;
}

.v34-shift-card>p { margin:0; color:#a8c5bc; font-size:13px; }

.v34-shift-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:5px;
}

.v34-shift-options button {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 9px;
  min-height:105px;
  padding:12px;
  border:1px solid rgba(0,229,255,.25);
  color:#eafff9;
  background:#10251f;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.v34-shift-options button>span {
  grid-row:1/3;
  color:var(--od-cyan,#00e5ff);
  font-size:11px;
  font-weight:950;
}

.v34-shift-options button>b { font-size:14px; line-height:1.4; }
.v34-shift-options button>small { color:#89aaa0; font-size:12px; line-height:1.45; }

.v34-shift-options button:hover:not(:disabled),
.v34-shift-options button:focus-visible {
  border-color:var(--od-lime,#baff21);
  background:#17382e;
  transform:translateY(-3px);
}

.v34-shift-options button:disabled { cursor:default; opacity:.48; }
.v34-shift-options button.is-selected { opacity:1; border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.16); }
.v34-shift-options button.is-best { opacity:1; border-color:var(--od-lime,#baff21); }

.v34-shift-feedback {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-top:5px;
  padding:12px;
  border-left:5px solid #ff795f;
  background:rgba(255,121,95,.09);
}

.v34-shift-feedback[hidden] { display:none !important; }

.v34-shift-feedback.is-best { border-left-color:var(--od-lime,#baff21); background:rgba(186,255,33,.08); }
.v34-shift-feedback.is-safe { border-left-color:#ffd45a; background:rgba(255,212,90,.08); }
.v34-shift-feedback>strong { color:var(--od-lime,#baff21); font-size:12px; }
.v34-shift-feedback.is-safe>strong { color:#ffd45a; }
.v34-shift-feedback.is-risky>strong { color:#ff8d70; }
.v34-shift-feedback b { color:#fff; font-size:14px; }
.v34-shift-feedback p { margin:4px 0 0; color:#a9c4bc; font-size:12px; line-height:1.5; }
.v34-shift-feedback>span { color:#fff; font-size:21px; font-weight:950; }

.v34-operation-action-slot { display:flex; justify-content:flex-end; }
.v34-operation-action-slot>#operation-action {
  width:min(100%,520px) !important;
  min-height:58px;
  margin:0 !important;
  font-size:15px;
}

/* The shared .primary-button rule uses display:flex. Without this explicit
   hidden-state rule, the start/next control remained visible while the player
   was supposed to choose one of the three shift actions. */
.v34-operation-action-slot>#operation-action[hidden] { display:none !important; }

#operate-screen.v34-shift-mode .control-group,
#operate-screen.v34-shift-mode .command-deck { display:none !important; }
#operate-screen.v34-shift-mode .control-room { align-content:start; }
#operate-screen.v34-shift-mode .event-card { margin-top:14px; }
#operate-screen.v34-shift-mode .operation-layout { margin-top:0; }

@media (max-width:980px) {
  .v34-operation-rules,
  .v34-shift-options { grid-template-columns:1fr; }
  .v34-shift-options button { min-height:78px; }
  .v34-operation-rules>span { grid-column:1/-1; }
  .v34-model-mission ol { grid-template-columns:1fr; }
}

@media (max-width:740px) {
  .v34-model-mission,
  .v34-operation-mission { padding:12px; }
  .v34-model-mission header,
  .v34-operation-mission>header { align-items:flex-start; flex-direction:column; }
  .v34-operation-mission>header>strong { text-align:left; }
  .v34-shift-feedback { grid-template-columns:1fr; }
  .v34-operation-action-slot>#operation-action { width:100% !important; }
}

@media (prefers-reduced-motion:reduce) {
  .confetti span { animation:none !important; }
  .v34-shift-options button,
  .v34-flow-options button { transition:none; }
}