/* The Azo world shell. Logical properties only: the page may be rendered right to left. */
#hero[hidden],
#world[hidden] { display: none; }

#world {
  position: relative;
  inline-size: 100%;
  block-size: calc(100svh - 60px);
  min-block-size: 420px;
  background: #06090e;
  overflow: hidden;
  color: #e7eef5;
}

#world-canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  touch-action: pan-y;
}

#world-caption,
#world-actions {
  position: absolute;
  inset-inline: 16px;
  z-index: 2;
}

#world-caption { inset-block-end: 76px; text-align: center; font-size: 1.05rem; }
#world-actions { inset-block-end: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

#world-classic {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 3;
  padding: 8px 12px;
  border: 1px solid #0fb4a8;
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.7);
  color: #34e0cf;
  font-size: 0.9rem;
  text-decoration: none;
}
#world-classic:focus-visible { background: #0fb4a8; color: #06090e; outline: 2px solid #e7eef5; outline-offset: 2px; }

html[data-world="pending"] #hero { display: none; }
html[data-world="pending"] #world { display: block; }

/* ---- HUD (Task 2) ------------------------------------------------------------------------- */
#world-caption { inset-block-end: 84px; pointer-events: none; }
#world-caption-text {
  display: inline-block;
  max-inline-size: min(640px, 100%);
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(6, 9, 14, 0.72);
  border: 1px solid rgba(15, 180, 168, 0.35);
  line-height: 1.4;
}
#world-actions button,
#world-actions a {
  min-block-size: 44px;
  padding: 10px 18px;
  border: 1px solid #0fb4a8;
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.85);
  color: #e7eef5;
  font: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  #world-actions button:hover { background: #0fb4a8; color: #06090e; }
}
#world-actions button:focus-visible, #world-actions a:focus-visible { outline: 2px solid #34e0cf; outline-offset: 3px; }
#world-actions a { display: inline-flex; align-items: center; box-sizing: border-box; background: #0fb4a8; color: #06090e; font-weight: 700; text-decoration: none; }
#world-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

#world-overlay {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-inline-size: calc(100% - 200px);
}
#world-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #ef9f27;
  color: #ef9f27;
  background: rgba(6, 9, 14, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
#world-chip[hidden] { display: none; }
/* A backing of its own: a star or a glow can sit right behind it, and the text keeps 4.5:1 over it. */
#world-progress { padding: 4px 10px; border-radius: 999px; background: rgba(6, 9, 14, 0.7); font-size: 0.85rem; color: #d9e1e8; }

#world-debrief, #world-handoff {
  position: absolute;
  z-index: 2;
  inset-block: 56px 150px;
  inset-inline: 16px;
  max-inline-size: 560px;
  margin-inline: auto;
  overflow-y: auto;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(6, 9, 14, 0.88);
  border: 1px solid rgba(15, 180, 168, 0.45);
  font-size: 0.95rem;
}
#world-debrief[hidden], #world-handoff[hidden] { display: none; }
#world-handoff h2, #world-debrief h2 { margin: 0 0 8px; font-size: 1.15rem; color: #34e0cf; }
#world-handoff h3, #world-debrief h3 { margin: 12px 0 4px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
#world-handoff dl, #world-debrief dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
#world-handoff dt, #world-debrief dt { opacity: 0.75; }
#world-handoff dd, #world-debrief dd { margin: 0; }
#world-debrief table { inline-size: 100%; border-collapse: collapse; }
#world-debrief th, #world-debrief td { text-align: start; padding: 3px 6px; border-block-end: 1px solid rgba(231, 238, 245, 0.12); }
#world-debrief td.num { font-variant-numeric: tabular-nums; text-align: end; }
#world-handoff ul, #world-debrief ul { margin: 0; padding-inline-start: 1.1em; }
.debrief-honest { margin: 12px 0 0; padding: 8px 10px; border-inline-start: 3px solid #ef9f27; background: rgba(239, 159, 39, 0.08); }
.debrief-note { margin: 10px 0 0; opacity: 0.85; }


@media (max-width: 600px) {
  #world-overlay { max-inline-size: calc(100% - 24px); inset-block-start: 56px; }
  #world-debrief, #world-handoff { inset-block: 90px 215px; padding: 12px 14px; font-size: 0.85rem; }
  #world-handoff h3, #world-debrief h3 { margin-block-start: 8px; }
  #world-caption { inset-block-end: 146px; font-size: 0.95rem; }
  #world-actions button, #world-actions a { flex: 1 1 40%; justify-content: center; }
}

/* ---- Azo + core (Task 3) ------------------------------------------------------------------- */
/* A click on the scene skips the wake-up, so say so with the cursor. */
#world[data-act="wake"] #world-canvas { cursor: pointer; }

/* ---- printing world (Task 4) -------------------------------------------------------------- */
/* Dragging the PO and the challan needs the touch to stay on the canvas instead of scrolling. */
#world[data-act="printing"] #world-canvas { touch-action: none; }
#world-actions button[data-action="complete"] { border-color: #34e0cf; }
@media (max-width: 600px) {
  /* Five printing buttons wrap to three rows: lift the caption clear of them. */
  #world[data-act="printing"] #world-caption { inset-block-end: 184px; }
  #world[data-act="printing"] #world-actions button { min-block-size: 44px; padding: 8px 10px; font-size: 0.92rem; }
}
/* A spent (disabled) step must not light up under the pointer. */
@media (hover: hover) {
  #world-actions button:disabled:hover { background: rgba(6, 9, 14, 0.85); color: #e7eef5; }
}
/* Engines read as one line of tags, so the debrief fits without scrolling on a laptop. */
#world-debrief .debrief-block ul { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-inline-start: 0; list-style: none; }
#world-debrief .debrief-block li::before { content: "\2022"; margin-inline-end: 6px; color: #34e0cf; }
#world-debrief .debrief-honest { margin-block: 4px 6px; }
@media (max-width: 600px) and (max-height: 700px) {
  #world[data-act="printing"] #world-actions { gap: 6px; inset-block-end: 10px; }
  #world[data-act="printing"] #world-actions button { min-block-size: 40px; padding: 6px 10px; font-size: 0.88rem; }
  #world[data-act="printing"] #world-caption { inset-block-end: 160px; font-size: 0.88rem; }
  #world[data-act="printing"] #world-caption-text { padding: 8px 12px; }
}
/* ---- Pharmacy (Task 5) ---------------------------------------------------------------------- */
#world-status { padding: 3px 10px; border-radius: 999px; border: 1px solid #e24b4a; color: #e7eef5; background: rgba(6, 9, 14, 0.7); font-size: 0.8rem; }
/* Empty, the live region stays rendered (so announcements are reliable) but takes no room. */
#world-status:empty { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; white-space: nowrap; }
/* A pick button carries lot, strips left and expiry on two lines. */
#world-actions button[data-action^="pick-"] { white-space: pre-line; line-height: 1.25; padding-block: 6px; }
@media (max-width: 600px) {
  #world[data-act="pharmacy"] #world-caption { inset-block-end: 150px; }
  #world[data-act="pharmacy"] #world-actions { gap: 6px; }
  #world[data-act="pharmacy"] #world-actions button { flex: 1 1 28%; min-block-size: 44px; padding: 6px 4px; font-size: 0.85rem; }
  #world[data-act="pharmacy"] #world-actions button[data-action^="pick-"] { font-size: 0.78rem; }
}
/* ---- School and finale (Task 6) ---------------------------------------------------------- */
/* The honest label rides in the status pill: amber, not the pharmacy's mistake red. */
#world[data-act="school"] #world-status { border-color: #ef9f27; color: #ef9f27; }
#world[data-act="school"] #world-canvas { touch-action: none; }
#world-handoff li { margin-block: 2px; }
/* The finale recap is as tall as its text, never stretched over an empty panel. */
#world-handoff { inset-block-end: auto; max-block-size: calc(100% - 206px); }
@media (max-width: 600px) {
  #world-handoff { max-block-size: calc(100% - 360px); }
  #world[data-act="finale"] #world-caption { inset-block-end: 140px; }
}
/* ---- Task 7 fixes --------------------------------------------------------------------------- */
/* The caption text takes a touch itself, so a swipe that starts on it scrolls the page even where the
   canvas below takes drags; taps on the caption area otherwise still fall through to the scene. */
#world-caption-text { pointer-events: auto; touch-action: pan-y; }
@media (max-width: 600px) {
  /* A finale with only two actions (all three played) fits on one row: the caption sits lower and
     the recap gets the room, so its last line is never under the caption. */
  #world[data-act="finale"]:has(#world-actions > :nth-child(2):last-child) #world-caption { inset-block-end: 84px; }
  #world[data-act="finale"]:has(#world-actions > :nth-child(2):last-child) #world-handoff { max-block-size: calc(100% - 276px); }
}
/* The amber chip and the status pill sit on an opaque ink backing: their text keeps 4.5:1 whatever the
   scene puts behind them, a white glow included. */
#world-chip, #world-status { background: #06090e; }
/* Shown from the moment the section is visible until the first frame is drawn. */
#world-loading { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: #d9e1e8; font-size: 1rem; }
#world[data-frames] #world-loading, #world-loading[hidden] { display: none; }
@media (hover: hover) {
  #world-classic:hover { background: #0fb4a8; color: #06090e; outline: 2px solid #e7eef5; outline-offset: 2px; }
}