/* Zeno of Citium lesson. All rules scoped under .zen-* */
.zen-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zen-note { font-size: 12.5px; color: var(--dim); text-align: center; max-width: 300px; }
.zen-art img { display: block; width: 290px; max-width: 100%; max-height: 32vh; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.zen-quote { width: 100%; max-width: 330px; padding: 14px 16px 12px 18px; border-radius: 16px; background: linear-gradient(160deg, rgba(252, 192, 80, .10), rgba(123, 92, 253, .08)); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.zen-quote p { margin: 0 0 8px; font: italic 500 18px/1.4 var(--serif); color: var(--text); }
.zen-quote cite { display: block; font: 500 12px var(--sans); font-style: normal; color: var(--dim); }

/* ---------- the sea ---------- */
.zen-seabox { width: 100%; max-width: 340px; }
.zen-sea { display: block; width: 100%; height: auto; border-radius: 14px; overflow: hidden; }
.zen-cloud ellipse { fill: rgba(169, 155, 255, .14); }
.zen-mast { stroke: #C9A27A; stroke-width: 3; }
.zen-sail { fill: #EAE3D7; stroke: #C9B79B; stroke-width: 1.5; }
.zen-hull { fill: #8A5A36; stroke: #C9A27A; stroke-width: 2; stroke-linejoin: round; }
.zen-jin path:first-child { fill: #B9774A; stroke: #E0A77A; stroke-width: 1.2; }
.zen-dye { fill: #8E3FB5; }
.zen-wave.b { fill: rgba(91, 69, 200, .55); }
.zen-wave.f { fill: rgba(123, 92, 253, .75); }
.zen-slick ellipse { fill: rgba(142, 63, 181, .75); animation: zenSpread 1.2s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes zenSpread { from { transform: scaleX(.2); opacity: 0; } }
.zen-seabox.sunk .zen-ship { opacity: 0; transition: opacity .6s .1s; }
.zen-seabox.still .zen-slick ellipse { animation: none; }

/* ---------- the fire ---------- */
.zen-fire svg { display: block; width: 84px; height: 84px; margin: 0 auto; }
.zen-fl { fill: var(--gold); opacity: .9; }
.zen-fl2 { fill: #FFE2A0; }

/* ---------- the test ---------- */
.zen-test { width: 100%; max-width: 350px; display: grid; grid-template-columns: 1fr 1.05fr 1fr; align-items: start; gap: 8px; }
.zen-person { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-height: 150px; text-align: center; transition: border-color .3s; }
.zen-person svg { width: 34px; height: 44px; }
.zen-person.k svg { fill: rgba(63, 214, 154, .35); stroke: var(--mint); stroke-width: 1.5; }
.zen-person.c svg { fill: rgba(216, 85, 85, .3); stroke: var(--red); stroke-width: 1.5; }
.zen-person b { font: 700 12.5px var(--sans); color: var(--text); }
.zen-out { font: 600 13px/1.3 var(--sans); color: var(--dim); min-height: 34px; }
.zen-person.k.on { border-color: var(--mint); }
.zen-person.k.on .zen-out { color: var(--mint); }
.zen-person.c.on { border-color: var(--red); }
.zen-person.c.on .zen-out { color: #F2A3A3; }
.zen-test.pass .zen-person.c.on { border-color: var(--mint); }
.zen-test.pass .zen-person.c.on .zen-out { color: var(--mint); }
.zen-ped { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 16px; }
.zen-item { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2E2A55, #17152E); border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(252, 192, 80, .25); transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.zen-item svg { width: 42px; height: 42px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zen-test.give .zen-item { animation: zenGive .5s ease-out; }
@keyframes zenGive { 50% { transform: scale(1.12); } }
.zen-iname { font: 700 14px var(--sans); color: var(--gold); }
.zen-verdict { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; min-height: 20px; }
.zen-test.pass .zen-verdict { color: var(--mint-ink); background: var(--mint); }
.zen-test.fail .zen-verdict { color: var(--red-ink); background: var(--red); }

.zen-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 330px; }
.zen-chip { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font: 700 14px var(--sans); color: var(--text); }
.zen-chip i { font: 600 12px var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.zen-chip.ok { border-color: var(--mint); }
.zen-chip.ok i { color: var(--mint); }
.zen-chip.no { opacity: .7; }
.zen-chip.no i { color: #F2A3A3; }

/* ---------- the court ---------- */
.zen-court { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.zen-throne { width: 150px; padding: 8px 10px; border-radius: 16px 16px 10px 10px; background: linear-gradient(180deg, rgba(252, 192, 80, .22), rgba(252, 192, 80, .06)); border: 2px solid var(--gold); text-align: center; display: flex; flex-direction: column; align-items: center; }
.zen-crown { font-size: 22px; color: var(--gold); line-height: 1; }
.zen-throne b { font: 700 17px var(--sans); color: var(--gold); }
.zen-sub { font: 600 12px var(--sans); color: var(--dim); }
.zen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.zen-seat, .zen-door { padding: 7px 8px; border-radius: 12px; border: 1.5px dashed var(--line-strong); text-align: center; min-height: 64px; }
.zen-seat > span, .zen-door > span { font: 600 12px var(--sans); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.zen-door { width: 100%; opacity: .85; }
.zen-sv { min-height: 28px; margin-top: 4px; }
.zen-tag { display: inline-block; padding: 4px 10px; border-radius: 10px; font: 700 14px var(--sans); animation: zenIn .35s ease-out; }
.zen-tag.up { color: var(--violet-bright); background: rgba(123, 92, 253, .2); }
.zen-tag.down { color: var(--dim); background: var(--raised); }
@keyframes zenIn { from { transform: translateY(8px); opacity: 0; } }

@media (max-height: 700px) {
  .zen-art img { width: 240px; max-height: 26vh; }
  .zen-seabox { max-width: 290px; }
  .zen-quote p { font-size: 16px; }
  .zen-person { min-height: 132px; padding: 8px 3px; }
  .zen-item { width: 60px; height: 60px; }
  .zen-item svg { width: 36px; height: 36px; }
  .zen-fire svg { width: 64px; height: 64px; }
}