/* Rock Cycle Recycler: the diorama + work-order row and the route builder / answer buttons inside the practice shell's stage. */
.rcr { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(200px, 1fr) auto; gap: 8px; padding: 8px 12px 10px; }
.rcr-top { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; min-height: 0; }
.rcr-dio { position: relative; min-width: 0; min-height: 0; border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); background: #cfe6f3; }
.rcr-dio-cv { position: absolute; inset: 0; display: block; }
.rcr-ticket { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; padding: 8px 10px; border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--tlg-border) 45%, transparent) 27px 28px); }
.rcr-ticket-h { margin: 0; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ps-accent); }
.rcr-tk { display: flex; align-items: center; gap: 8px; }
.rcr-tk .rcr-spec { flex: none; }
.rcr-tk-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; font-size: 16px; }
.rcr-tk-t span { color: var(--tlg-text-muted); }
.rcr-tk-arrow { padding-left: 34px; font-size: 16px; font-weight: 700; color: var(--tlg-text-muted); }
.rcr-tk-arrow span { font-size: 22px; color: var(--ps-accent); margin-right: 4px; }
.rcr-tk--big { flex-direction: column; align-items: flex-start; gap: 6px; }
.rcr-tk-q { width: 200px; height: 150px; display: grid; place-items: center; font-size: 72px; font-weight: 800; color: var(--tlg-text-muted); border: 3px dashed var(--tlg-border-strong); border-radius: 18px; }
.rcr-tk-blob { flex: none; width: 96px; height: 72px; border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%; }
.rcr-tk-blob--magma { background: radial-gradient(circle at 45% 40%, #fff3a8, #ff9a2a 40%, #b5320f 85%); box-shadow: 0 0 18px #f07a1a; }
.rcr-tk-blob--sed { background: radial-gradient(circle at 30% 40%, #a08d72 0 4px, transparent 5px), radial-gradient(circle at 60% 55%, #c9b48e 0 5px, transparent 6px), radial-gradient(circle at 45% 70%, #7a6d60 0 4px, transparent 5px),
  radial-gradient(circle at 75% 35%, #d6be96 0 4px, transparent 5px), radial-gradient(circle at 20% 70%, #8f8a84 0 4px, transparent 5px), #e9dcc4; border-radius: 50% 50% 12px 12px / 70% 70% 12px 12px; }
.rcr:not(.rcr--route) { grid-template-rows: auto minmax(0, 1fr); }
.rcr:not(.rcr--route) .rcr-dio { aspect-ratio: 10 / 3; }
.rcr:not(.rcr--route) .rcr-bottom { justify-content: center; }
.rcr-bottom { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.rcr .pcb-row { min-height: 92px; }
.rcr .pcb-card { min-height: 44px; padding: 3px 10px 3px 6px; }
.rcr .pcb-card-t { line-height: 1.15; }
.rcr .pcb-tray { gap: 6px; }
/* a card in a step shows its name only, so filled steps keep their height */
.rcr .pcb-slot { min-height: 92px; }
.rcr .pcb-slot .pcb-chip small { display: none; }
.rcr .pcb-slot .pcb-chip { flex: 0 0 auto; min-height: 44px; }
/* the answer buttons (name-it orders) */
.rcr-q { margin: 0; font-size: 16px; }
.rcr-opts { display: grid; gap: 10px; }
.rcr-opts--type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcr-opts--cool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcr-opts--rock { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rcr-opts--type .rcr-opt, .rcr-opts--cool .rcr-opt { min-height: 120px; }
.rcr-opts--rock .rcr-spec { max-width: 100%; height: auto !important; }
.rcr-opt { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 8px 12px; border-radius: var(--tlg-radius-sm); border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text);
  font: inherit; text-align: left; cursor: pointer; }
.rcr-opts--rock .rcr-opt { flex-direction: column; justify-content: center; text-align: center; padding: 8px; }
.rcr-opt:hover { background: var(--tlg-surface-2); }
.rcr-opt-ico svg { width: 56px; height: 56px; display: block; }
.rcr-opt-t { display: flex; flex-direction: column; font-size: 16px; line-height: 1.2; }
.rcr-opt-t small { font-size: 16px; color: var(--tlg-text-muted); }
.rcr-opt[aria-checked="true"] { border-color: var(--ps-accent); background: color-mix(in srgb, var(--ps-accent) 10%, var(--tlg-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps-accent) 35%, transparent); }
.rcr-opt[aria-checked="true"] b::before { content: "● "; }
.rcr-opt:disabled { cursor: default; }
.rcr-opt.is-right { outline: 3px solid var(--tlg-status-done-fg); outline-offset: 2px; }
.rcr-opt.is-right b::after { content: " ✓"; }
.rcr-opt.is-wrong { outline: 3px solid #b42318; outline-offset: 2px; }
.rcr-opt.is-wrong b::after { content: " ✗"; }
/* briefing example: the granite → sandstone strip */
.rcr-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.rcr-ex-rock { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rcr-ex-arrow { font-weight: 800; color: var(--ps-accent); }
.rcr-ex-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--tlg-border-strong); background: var(--tlg-surface); font-weight: 700; }
.rcr-ex-ico svg { width: 26px; height: 26px; display: block; }
.rcr-ex--narrow { flex-direction: column; align-items: flex-start; }
.rcr-ex--narrow .rcr-ex-arrow { transform: rotate(90deg); margin-left: 30px; }
/* start art: the rock-cycle wheel */
.ps-start-art:has(.rcr-start) { position: relative; }
.rcr-start { position: absolute; inset: 0; }
.rcr-start-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcr-start-rock { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 16px; }
.rcr-start-rock span { padding: 1px 8px; border-radius: 999px; background: rgb(255 255 255 / .92); color: #1b1f24; }
.rcr-start-a { left: 50%; top: 2%; transform: translateX(-50%); }
.rcr-start-b { right: 0; bottom: 6%; }
.rcr-start-c { left: 0; bottom: 6%; }
/* the assignment card normally sits bottom-right of the stage while playing; the tray is there, so it moves to the foot of the customer column */
@media (min-width: 901px) {
  html.ps-locked:has(.rcr) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.rcr):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 1100px) { .rcr-top { grid-template-columns: minmax(0, 1fr) 200px; } .rcr-tk .rcr-spec { width: 72px !important; height: 54px !important; } }
@media (max-width: 900px) {
  .rcr { position: static; grid-template-rows: auto auto; }
  .rcr-top { grid-template-columns: 1fr; }
  .rcr-dio { height: auto; aspect-ratio: 10 / 3; min-height: 200px; }
  .rcr-ticket { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rcr-opts--type, .rcr-opts--cool { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rcr-opt { transition: none; } }