/* Psychodynamic guide · page styles (on top of /psychoed/psy.css) */
:root{--a:#3ab8b0;--a2:#b08af0;--al:#e6fbf8}
.hero .himg{--hx:62%}
.stage svg .serif text,.stage svg text.serif{font-family:var(--serif);font-style:italic}
/* s2 iceberg */
.ly .bg{transition:fill-opacity .5s,filter .5s}
#ice .ly{transition:opacity .5s}#s2[data-sel] #ice .ly{opacity:.55}#s2 #ice .ly.act{opacity:1}#s2 #ice .ly.act .bg{filter:url(#pz-glow)}
#s2 .ly[data-k=pre].act .bg{fill-opacity:.8}#s2 .ly[data-k=unc].act .bg{fill-opacity:.7}
.wave{animation:pdw 5s ease-in-out infinite}@keyframes pdw{50%{transform:translateY(3px)}}
/* s3 voices */
.voices{display:grid;gap:8px;margin-top:14px}
.voices p{margin:0;display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:baseline;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.voices b{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.voices span{display:none;font:italic 400 20px/1.3 var(--serif);color:#fff6e4}.voices span.show{display:block;animation:psy-fade .6s var(--ease) both}
.v-id{border-left:3px solid #ff8a6a!important}.v-id b{color:#ffab90}
.v-su{border-left:3px solid #b08af0!important}.v-su b{color:#d0b8ff}
.v-eg{border-left:3px solid #3ab8b0!important}.v-eg b{color:#9ff0e8}
/* s4 flip cards */
.flips{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.flc{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.flc .in{display:grid;transition:transform .8s var(--ease);transform-style:preserve-3d}
.flc[aria-pressed="true"] .in{transform:rotateY(180deg)}
.flc .fa,.flc .fb{grid-area:1/1;display:block;padding:14px 15px;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid rgba(255,255,255,.12)}
.flc .fa{background:linear-gradient(160deg,rgba(58,184,176,.16),rgba(255,255,255,.015))}
.flc .fb{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(176,138,240,.24),rgba(58,184,176,.06));border-color:rgba(208,184,255,.45)}
.flc b{display:block;font:italic 500 23px/1.1 var(--serif);color:var(--al);margin-bottom:4px}
.flc .ex{display:block;font-size:14px;line-height:1.4;color:#cfc6b4;margin-bottom:9px}
.flc i{display:block;font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#9ff0e8;margin-bottom:5px}
.flc .fb i{color:#d8c8ff}
.flc .tx2{display:block;font-size:14.5px;line-height:1.45;color:#ece4d4}
.flc .tap{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.flc:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:16px}
.mfc{margin:12px 0 0;text-align:center;font:italic 400 19px/1.3 var(--serif);color:var(--a2)}
@media (min-width:860px){.sc.sc-wide{grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr)}.sc.sc-wide.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,.75fr)}}
/* s5 game */
.game{border-radius:24px;border:1px solid rgba(255,255,255,.09);padding:18px 16px 18px;text-align:center;background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(58,184,176,.18),transparent 70%),linear-gradient(160deg,#0b0f16,#07060c);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.gtop{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gsc{margin:14px auto 16px;max-width:30em;font:italic 400 clamp(21px,2.6vw,26px)/1.35 var(--serif);color:#fff6e4;min-height:3.9em}
.gopts{display:grid;gap:8px;max-width:420px;margin:0 auto}
.gopts button{appearance:none;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--ink);padding:12px 14px;min-height:46px;font:500 15.5px/1.2 var(--sans);cursor:pointer;transition:all .3s var(--ease);touch-action:manipulation}
.gopts button:hover:not(:disabled){border-color:rgba(255,255,255,.45)}
.gopts button.ok{border-color:#6fd8a0;background:rgba(111,216,160,.18)}
.gopts button.bad{border-color:#e88a8a;background:rgba(232,138,138,.12);opacity:.8}
.gopts button:disabled{cursor:default}
.gfb{margin:14px auto 0;max-width:30em;font-size:15px;line-height:1.5;color:#e0d8c8}
.gfb b{color:#fff}
/* s6 loop */
.s6w{opacity:0;transition:opacity .6s}#s6[data-sel=loop] .w-loop,#s6[data-sel=out] .w-out{opacity:1}
/* s9 path */
#s9 .seg{stroke-opacity:.12;transition:stroke-opacity 1s,filter 1s}
#s9.k-notice .sg-notice,#s9.k-name .sg-name,#s9.k-link .sg-link,#s9.k-feel .sg-feel,#s9.k-work .sg-work,#s9.k-choose .sg-choose{stroke-opacity:1;filter:url(#pz-glow)}
#s9 .done9{opacity:0;transition:opacity 1s}#s9.lit .done9{opacity:1}
.prac{display:grid;gap:8px;margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.prac .chip{border-radius:16px;text-align:left;padding:11px 14px;font-size:14px;line-height:1.4;font-weight:400}
.prac .chip b{display:block;font:italic 500 20px/1.1 var(--serif);color:var(--al);margin-bottom:3px}
/* s10 pattern link */
.pl{border-radius:24px;border:1px solid rgba(255,255,255,.09);padding:16px 16px 18px;background:radial-gradient(ellipse 80% 60% at 80% 0%,rgba(176,138,240,.16),transparent 70%),linear-gradient(160deg,#0d0b16,#07060c);box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center}
.pq{margin-bottom:14px}
.plab{margin:0 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.plab small{letter-spacing:.04em;text-transform:none;color:var(--dim)}
.pl input{width:min(100%,420px);margin-top:6px;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--ink);font:16px var(--sans)}
.pl input:focus{outline:2px solid var(--a2);outline-offset:1px}
.chips.mini{margin-top:4px;gap:6px}.chips.mini .chip{min-height:38px;padding:7px 12px;font-size:13.5px}
@media (pointer:coarse){.chips.mini .chip{min-height:42px}}
.mstat{min-height:1.4em;margin:8px 0 0;font-size:13.5px;color:var(--a)}
.pent{position:relative;text-align:left;margin:10px 0 0;padding:12px 44px 12px 14px;border-radius:14px;border:1px solid rgba(176,138,240,.3);background:rgba(176,138,240,.07);font-size:14.5px;line-height:1.5}
.pent small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.pent .lk{font:italic 400 19px/1.35 var(--serif);color:#fff6e4}
.pent .del{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--mute);font-size:20px;cursor:pointer}
.pent .del:hover,.pent .del:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.mtools{display:flex;gap:8px;justify-content:center;margin-top:12px}.mtools .chip{font-size:13px;min-height:38px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.flc .in{transition:none}}
/* phone: flip cards become a swipe row */
@media (max-width:859px){.flips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.flips::-webkit-scrollbar{display:none}.flc{scroll-snap-align:center}.flc .fa,.flc .fb{height:100%}.flc .in{height:100%}.dg .swipe{display:block}}
.swipe{display:none;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:4px}
#s8 .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}