/* P53 lesson. All rules scoped under .p53-* */
.p53-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.p53-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.p53-cap { font-size: 12.5px; color: var(--dim); text-align: center; }
.p53-hero { display: grid; place-items: center; }
.p53-hero img { width: 300px; max-width: 100%; max-height: 36vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.p53-t { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }
.p53-t.l { text-anchor: start; }

/* DNA and cells */
.p53-dna { stroke: var(--violet-bright); stroke-width: 5; stroke-linecap: round; fill: none; }
.p53-brk path { stroke: #FF6B6B; stroke-width: 3.5; stroke-linecap: round; }
.p53-rules { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.p53-rules > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.p53-rules svg { grid-column: 1; width: 100%; height: auto; display: block; }
.p53-rules span { grid-column: 1; font-size: 13px; color: var(--dim); font-weight: 600; }
.p53-rules b { grid-column: 2; grid-row: 1 / 3; font-size: 15px; }
.p53-rules .go b, .p53-t.go { color: var(--mint); fill: var(--mint); }
.p53-rules .fix b, .p53-t.fix { color: var(--gold); fill: var(--gold); }
.p53-rules .die b, .p53-t.die { color: #FF8A8A; fill: #FF8A8A; }

.p53-count { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.p53-hold { width: 100%; display: grid; place-items: center; min-height: 150px; }
.p53-cell { width: 100%; max-width: 330px; height: auto; display: block; overflow: visible; }
.p53-body rect { fill: rgba(227,165,140,.12); stroke: #E3A58C; stroke-width: 2.5; transition: fill .3s, stroke .3s; }
.p53-body { transform-origin: 130px 60px; transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .6s; }
.p53-cell.in .p53-body { animation: p53In .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes p53In { from { transform: translateX(40px); opacity: 0; } }
.p53-cell.go .p53-body rect { stroke: var(--mint); fill: rgba(63,214,154,.14); }
.p53-cell.fix .p53-body rect { stroke: var(--gold); fill: rgba(252,192,80,.14); }
.p53-cell.die .p53-body { transform: scale(.2); opacity: 0; }
.p53-cell.die .p53-body rect { stroke: #FF6B6B; }
.p53-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p53-act { min-height: 56px; padding: 6px 4px; font-size: 14px; line-height: 1.15; white-space: normal; }
.p53-act.go { color: var(--mint); }
.p53-act.fix { color: var(--gold); }
.p53-act.die { color: #FF8A8A; }
.p53-act.wrong { border-color: var(--red); }
.p53-act.off { opacity: .4; }
.p53-act:disabled { opacity: .45; }

/* the level */
.p53-meter { max-width: 320px; }
.p53-tube { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.p53-fill { fill: var(--violet-bright); }
.p53-line { stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 4; }
.p53-do { font-size: 16px; }

/* no guard */
.p53-banner { font-size: 13px; font-weight: 800; color: #FF8A8A; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(216,85,85,.5); }
.p53-gens { width: 100%; display: flex; flex-direction: column; gap: 6px; min-height: 170px; }
.p53-gen { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; animation: p53Row .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes p53Row { from { opacity: 0; transform: translateY(-6px); } }
.p53-gen span { font-size: 12px; font-weight: 700; color: var(--dim); }
.p53-gen > div { display: flex; }
.p53-gen > div { flex-wrap: nowrap; gap: 2px; }
.p53-gen i { display: inline-flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1.5px; flex: 0 1 14px; min-width: 0; height: 26px; padding: 2px 1px; border-radius: 5px; background: rgba(227,165,140,.18); border: 1px solid #E3A58C; }
.p53-gen b { width: 3.5px; height: 3.5px; border-radius: 50%; background: #FF6B6B; }

/* elephants */
.p53-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.p53-two div { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 22px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.p53-two b { font: 700 26px var(--mono); color: var(--text); }
.p53-two .hi b { color: var(--gold); }
.p53-two span { font-size: 13.5px; color: var(--dim); line-height: 1.3; }
.p53-btitle { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--dim); }
.p53-bars { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: opacity .3s; }
.p53-hide { opacity: .25; }
.p53-bar { display: grid; grid-template-columns: 1fr 56px; grid-template-rows: auto auto; gap: 3px 8px; align-items: center; }
.p53-bar span { grid-column: 1 / 3; font-size: 13.5px; color: var(--text); font-weight: 600; }
.p53-bar i { display: block; height: 14px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.p53-bar b { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.p53-bar em { font: 700 14px var(--mono); font-style: normal; color: var(--gold); text-align: right; }
.p53-offrow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.p53-offrow span { font-size: 13px; font-weight: 700; color: var(--faint); text-decoration: line-through; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line-strong); }
.p53-bar.p53-hide { opacity: .25; }