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

/* the ship */
.phl-ship { width: 100%; max-width: 360px; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }
.phl-ship.bob { animation: phl-bob 4s ease-in-out infinite; }
@keyframes phl-bob { 50% { transform: translateY(4px) rotate(-.6deg); } }
.phl-sea { fill: #2a5a9e; opacity: .9; }
.phl-sea.back { fill: #1d3f73; }
.phl-mast { stroke: #8a6a33; stroke-width: 5; stroke-linecap: round; }
.phl-sail { fill: #efe6d0; stroke: #c9b98f; stroke-width: 2; }
.phl-emb { fill: #c94f3d; }
.phl-oar { stroke: #a77c3c; stroke-width: 3.5; stroke-linecap: round; }
.phl-rim { fill: none; stroke: #3b2a17; stroke-width: 3; }
.phl-board rect { transition: fill .35s; }
.phl-board.old rect { fill: #5a4632; }
.phl-board.new rect { fill: #e2b66c; }
.phl-crack { fill: none; stroke: #2a1d10; stroke-width: 2; stroke-linecap: round; transition: opacity .3s; }
.phl-board.new .phl-crack { opacity: 0; }
.phl-seam { stroke: rgba(40, 26, 12, .55); stroke-width: 1.5; }
.phl-board.pop rect { animation: phl-pop .4s ease-out; }
@keyframes phl-pop { from { fill: #fff3cf; } }
.phl-board.gone { opacity: 0; }
.phl-board { transition: opacity .3s; }
.phl-board.pick rect { fill: var(--gold); }
.phl-num { font: 800 16px var(--sans); fill: #3b2a17; pointer-events: none; }
.phl-ship .phl-board[data-tap] { cursor: pointer; }

.phl-lab { font: 700 13px var(--sans); color: var(--dim); text-align: center; }
.phl-lab.count { font-size: 15px; color: var(--text); padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); }
.phl-lab.count.done { color: var(--gold); border-color: rgba(252, 192, 80, .5); }

/* two ships */
.phl-two { flex-direction: row; justify-content: center; gap: 8px; }
.phl-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.phl-ship.small { max-width: 180px; }

/* the dialogue, written out on parchment like a play script */
.phl-chat { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 6px; background: #efe6d0; color: #2d2414; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); border-top: 6px solid #c9b98f; border-bottom: 6px solid #c9b98f; }
.phl-msg { padding: 2px 0; font: italic 600 16px var(--serif); line-height: 1.3; animation: phl-in .35s ease-out both; }
.phl-msg i { display: block; font: 800 12px var(--sans); font-style: normal; letter-spacing: .6px; text-transform: uppercase; color: #8a5a2a; margin-bottom: 1px; }
.phl-msg.me { padding-left: 14px; border-left: 3px solid #7b5cfd; }
.phl-msg.me i { color: #5a3fd0; }
@keyframes phl-in { from { opacity: 0; transform: translateY(8px); } }
.phl-replies { align-self: stretch; }
.phl-replies .choices.phl-pk { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.phl-pk .choice { min-height: 44px; padding: 6px 10px; border-radius: 10px; text-align: left; font: italic 600 14.5px var(--serif); line-height: 1.25; color: #2d2414; background: rgba(255, 255, 255, .45); border: 1.5px dashed #a98c55; --ledge: #c9b98f; }
.phl-pk .choice { flex-direction: column; align-items: flex-start; justify-content: center; }
.phl-pk .choice::before { content: 'Socrates (you)'; display: block; font: 800 11.5px var(--sans); font-style: normal; letter-spacing: .5px; text-transform: uppercase; color: #5a3fd0; }
.phl-pk .choice.right { background: rgba(63, 214, 154, .25); border-style: solid; }
.phl-pk .choice.wrong { background: rgba(216, 85, 85, .18); border-style: solid; }

/* you, and your rule */
.phl-me { gap: 10px; }
.phl-person { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.phl-person img { height: 190px; width: auto; display: block; transition: filter .8s; }
.phl-person figcaption { font: 700 13px var(--sans); color: var(--dim); text-align: center; max-width: 260px; }
.phl-me.skin .phl-person img { filter: drop-shadow(0 0 12px rgba(255, 214, 122, .85)); }
.phl-me.skin .phl-person figcaption { color: var(--gold); }
.phl-rulechip { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-strong); font: 600 13.5px var(--sans); color: var(--dim); }
.phl-rulechip b { color: var(--text); }

/* the clock and the rule */
.phl-clockrow { gap: 12px; }
.phl-cw { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.phl-clock { width: 112px; height: 112px; }
.phl-cf { fill: #f4ecd8; stroke: #8a6a33; stroke-width: 5; }
.phl-ct { stroke: #3b2a17; stroke-width: 3; stroke-linecap: round; }
.phl-hh { stroke: #1a1208; stroke-width: 6; stroke-linecap: round; }
.phl-mh { stroke: #1a1208; stroke-width: 4; stroke-linecap: round; }
.phl-sh line { stroke: #c94f3d; stroke-width: 2; }
.phl-sh { transform-box: view-box; transform-origin: 70px 70px; animation: phl-tick 60s steps(60) infinite; }
.phl-clock.stopped .phl-sh { animation-play-state: paused; }
.phl-clock.stopped .phl-cf { fill: #d9cfb8; }
@keyframes phl-tick { to { transform: rotate(360deg); } }
.phl-hub { fill: #c94f3d; }
.phl-rule { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-strong); min-width: 240px; }
.phl-rule b { font: 800 13px var(--sans); color: var(--gold); letter-spacing: .3px; }
.phl-rule em { font: italic 700 15px var(--serif); color: var(--text); }
.phl-tick { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 10px; margin: 0 -10px; border: 0; border-radius: 10px; background: none; font: 700 15px var(--sans); color: var(--text); text-align: left; }
.phl-tick:disabled { opacity: 1; }
.phl-tick:not(:disabled) i { border-color: var(--gold); }
.phl-tick.late i { background: var(--gold); border-color: var(--gold); }
@media (max-height: 700px) { .phl-tick { min-height: 44px; } .phl-rule { gap: 0; padding: 8px 16px; } }
.phl-tick i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; }
.phl-tick.on i { background: var(--mint); border-color: var(--mint); }
.phl-tick.on i::after { content: ''; width: 5px; height: 10px; border: solid #08130e; border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }

@media (max-height: 700px) {
  .phl-ship { max-width: 320px; }
  .phl-clock { width: 92px; height: 92px; }
  .phl-msg { font-size: 14px; }
  .phl-chat { padding: 10px; gap: 6px; }
  .phl-pk .choice { min-height: 44px; padding: 5px 11px; font-size: 13.5px; }
}