/* Platonic Relationship lesson. All rules scoped under .plt-* */
.plt-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.plt-sc.plt-full { flex: 1; min-height: 0; justify-content: center; }

/* the chat */
.plt-phone { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 26px; background: #0d1222; border: 1.5px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.plt-msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; font: 600 15.5px var(--sans); line-height: 1.3; animation: plt-in .35s ease-out both; }
.plt-msg i { display: block; font: 700 12px var(--sans); font-style: normal; opacity: .7; margin-bottom: 2px; }
.plt-msg.them { align-self: flex-start; background: #2a3044; color: var(--text); border-bottom-left-radius: 5px; }
.plt-msg.me { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 5px; }
@keyframes plt-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.plt-word { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 4px; border: 0; background: none; font: 800 15.5px var(--sans); color: #ffe39a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.plt-word:disabled { opacity: 1; }
.plt-word.split { text-decoration: none; }
.plt-word.split b { color: var(--gold); font-size: 20px; animation: plt-lift .5s ease-out both; }
.plt-word.split s { text-decoration: none; opacity: .3; transition: opacity .4s; }
@keyframes plt-lift { from { transform: translateY(0); } 50% { transform: translateY(-6px) scale(1.15); } }
.plt-hl { color: #ffe39a; }
.plt-reveal { display: flex; justify-content: center; min-height: 0; }
.plt-bust { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: plt-in .5s ease-out both; }
.plt-bust img { height: 150px; width: auto; border-radius: 14px; box-shadow: 0 0 26px rgba(252, 192, 80, .3); }
.plt-bust figcaption { font: 600 13px var(--sans); color: var(--dim); text-align: center; }

/* the painting: the screen's height, panned slowly across the wide canvas */
.plt-paint { margin: 0; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plt-paint img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: 0% 50%; border-radius: 14px; display: block; animation: plt-pan 16s ease-in-out both; }
@keyframes plt-pan { from { object-position: 0% 50%; filter: brightness(.7); } 15% { filter: none; } to { object-position: 100% 50%; } }
.plt-paint figcaption, .plt-pic figcaption, .plt-port figcaption { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

/* the ladder */
.plt-ladder { width: 100%; max-width: 380px; flex: 1; min-height: 0; max-height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.plt-rail { stroke: #b88a3a; stroke-width: 7; stroke-linecap: round; }
.plt-rung { stroke: #8a6a33; stroke-width: 6; stroke-linecap: round; transition: stroke .3s; }
.plt-rung.on { stroke: var(--gold); }
.plt-rl { font: 700 18px var(--sans); fill: var(--faint); transition: fill .3s; }
.plt-rl.on { fill: var(--text); }
.plt-rl.r5.on { fill: var(--gold); font-weight: 800; }
.plt-sun { opacity: .25; transition: opacity .8s; }
.plt-ladder.top .plt-sun { opacity: 1; }

/* the mini ladder */
.plt-mini { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; }
.plt-mr { display: flex; align-items: center; gap: 10px; font: 700 14px var(--sans); color: var(--dim); }
.plt-mr i { width: 46px; height: 6px; border-radius: 3px; background: #8a6a33; flex: 0 0 auto; }
.plt-mr.low { color: var(--text); }
.plt-mini.show .plt-mr.low i { background: var(--gold); box-shadow: 0 0 12px rgba(252, 192, 80, .6); }
.plt-mini.show .plt-mr.low { color: var(--gold); }

/* the word shrinks */
.plt-shrink { gap: 14px; }
.plt-wcard { --k: 1; height: 92px; justify-content: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 18px; background: var(--surface); border: 1.5px solid rgba(252, 192, 80, .4); min-width: 230px; }
.plt-ww { font: italic 800 calc(34px * var(--k)) var(--serif); color: var(--gold); transition: font-size .5s; }
.plt-wm { font: 700 15px var(--sans); color: var(--text); text-align: center; }
.plt-wcard.in .plt-wm { animation: plt-in .4s ease-out both; }
.plt-eraPic { display: flex; align-items: center; justify-content: center; gap: 12px; height: 140px; }
.plt-eraPic .plt-port img { height: 120px; }
.plt-eraPic .plt-bill { opacity: 1; transform: rotate(-3deg); animation: plt-in .4s .3s ease-out both; }
.plt-mini-msg { padding: 9px 13px; border-radius: 18px; border-bottom-right-radius: 5px; background: var(--violet); color: #fff; font: 600 15px var(--sans); }
.plt-mini-msg b { color: #ffe39a; }
.plt-dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; max-width: 340px; }
.plt-date { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--raised); color: var(--faint); font: 800 14px var(--sans); }
.plt-date.next { color: var(--text); border-color: var(--gold); }
.plt-date.done { color: var(--gold); border-color: rgba(252, 192, 80, .35); }
.plt-date:disabled { opacity: 1; }

/* Plato's replies in the chat */
.plt-replies { align-self: stretch; }
.plt-replies .choices.plt-pk { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.plt-pk .choice { max-width: 92%; min-height: 44px; padding: 8px 12px; border-radius: 18px; border-bottom-left-radius: 5px; text-align: left; font-size: 14.5px; }
.plt-pk .choice::before { content: 'Plato'; display: block; font: 700 11.5px var(--sans); opacity: .7; }

/* pictures */
.plt-pic { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.plt-pic img { width: 100%; max-width: 340px; height: auto; border-radius: 12px; display: block; }
.plt-port { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.plt-port img { height: 190px; width: auto; border-radius: 12px; display: block; }
.plt-bill { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; max-width: 150px; border-radius: 6px; background: #efe6d0; color: #2d2414; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: rotate(-3deg); }
.plt-bill small { font: 700 12px var(--sans); color: #6b5a3a; }
.plt-bill b { font: 800 20px var(--serif); line-height: 1.1; }
.plt-bill span { font: italic 600 13px var(--serif); color: #6b5a3a; }

@media (max-height: 700px) {
  .plt-bust img { height: 118px; }
  .plt-port img { height: 160px; }
  .plt-eraPic .plt-port img { height: 96px; }
  .plt-eraPic { height: 104px; }
  .plt-eraPic .plt-bill { padding: 8px 10px; }
  .plt-eraPic .plt-bill b { font-size: 16px; }
  .plt-phone { padding: 10px; gap: 8px; }
  .plt-ww { font-size: calc(28px * var(--k)); }
  .plt-pic img { max-width: 280px; }
  .plt-msg { font-size: 14.5px; padding: 7px 11px; }
}