/* Gaslighting lesson. All rules scoped under .gl-* */

.gl-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.gl-note { font-size: 13px; color: var(--dim); text-align: center; }

/* the parlor: the picture fills the room, the lamp kept in view */
.gl-par { position: relative; flex: 1; min-height: 260px; width: 100%; overflow: hidden; }
.gl-pic { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 3 / 2; translate: -40% 0; }
.gl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-halo { position: absolute; left: 18%; top: 13%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 130, .8), rgba(255, 180, 80, .3) 45%, rgba(255, 180, 80, 0) 70%); mix-blend-mode: screen; pointer-events: none; }
.gl-snuff { position: absolute; left: 18%; top: 13%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(20, 12, 30, .92) 0, rgba(20, 12, 30, .7) 30%, rgba(20, 12, 30, 0) 68%); opacity: 0; pointer-events: none; }
.gl-dark { position: absolute; inset: 0; background: #07040F; opacity: 0; pointer-events: none; }
.gl-greg { position: absolute; right: 12px; bottom: 10px; width: 62%; max-width: 280px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; opacity: 0; translate: 0 16px; transition: opacity .5s, translate .5s cubic-bezier(.2,.8,.2,1); }
.gl-in .gl-greg { opacity: 1; translate: 0 0; }
.gl-greg img { width: 92px; height: 92px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid #7B6BA8; background: #1B1626; }
.gl-greg span { font: 700 12px var(--sans); color: var(--dim); background: rgba(10, 8, 20, .7); padding: 2px 8px; border-radius: 999px; }
.gl-bub { position: relative; padding: 9px 12px; border-radius: 16px 16px 4px 16px; background: #F4EEFF; color: #1A1430; font: 600 15px/1.3 var(--serif); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }

/* the house */
.gl-house { display: block; width: 100%; height: auto; max-height: 40vh; cursor: pointer; }
.gl-roof { fill: #2A2140; stroke: #54457E; stroke-width: 2; stroke-linejoin: round; }
.gl-room { fill: #241C38; stroke: #54457E; stroke-width: 2; }
.gl-trunk { fill: #6B4A2B; stroke: #A87844; stroke-width: 1.5; }
.gl-pipe { fill: none; stroke: #8C7A5B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gl-flow { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 9; stroke-linecap: round; opacity: 0; }
.gl-on .gl-flow { opacity: .9; animation: gl-flow 1.2s linear 3; }
@keyframes gl-flow { to { stroke-dashoffset: -28; } }
.gl-glow { fill: url(#glg); }
.gl-flame path { fill: #FFD76A; stroke: #FF9F2E; stroke-width: 1; }
.gl-flame { transition: transform .1s; }
.gl-arm, .gl-cup { fill: none; stroke: #C9A15A; stroke-width: 2; }
.gl-cup { fill: #C9A15A; }
.gl-table { fill: #6B4A2B; }
.gl-tl { font: 700 13px var(--sans); fill: var(--faint); }
.gl-tp { fill: #E7B7D4; }

.gl-rim { fill: #1B1626; stroke: #E7B7D4; stroke-width: 2; }
.gl-fg .gl-rim { stroke: #7B6BA8; }
.gl-fg { opacity: 0; transition: opacity .6s .2s; }
.gl-on .gl-fg { opacity: 1; }
.gl-tg { fill: #B9A8F0; opacity: 0; transition: opacity .6s .2s; }
.gl-on .gl-tg { opacity: 1; }

/* two denials */
.gl-said { position: relative; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color .3s, background .3s; }
.gl-said small { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.gl-said p { margin: 2px 0 0; font: 600 18px/1.3 var(--serif); }
.gl-said em { display: none; position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--raised); color: var(--dim); }
.gl-said.gl-tagged em { display: block; }
.gl-said.gl-hot { border-color: var(--gold); background: rgba(252, 192, 80, .1); }
.gl-said.gl-hot em { background: var(--gold); color: #1A1206; }

/* Paula and the people she checks with */
.gl-ring { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.gl-me { display: flex; align-items: center; gap: 10px; }
.gl-pp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 44px; padding: 0; background: none; border: 0; color: var(--text); transition: opacity .5s, filter .5s; }
.gl-pp img { width: 84px; height: 84px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--mint); background: #2A2140; transition: border-color .4s, transform .5s; }
.gl-pa img { width: 104px; height: 104px; border-color: #E7B7D4; }
.gl-pp b { font: 700 12.5px var(--sans); white-space: nowrap; }
.gl-pp em { font-style: normal; font: 800 12px var(--sans); color: var(--dim); min-height: 15px; }
.gl-pp.gl-gone img { filter: grayscale(1) brightness(.6); border-color: var(--line-strong); transform: scaleX(-1); }
.gl-pp.gl-gone b { color: var(--faint); }
.gl-think { position: relative; max-width: 150px; padding: 9px 12px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); font: 600 16px/1.25 var(--serif); }
.gl-think::before { content: ''; position: absolute; left: -9px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.gl-think.gl-pop { animation: gl-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes gl-pop { from { transform: scale(.85); opacity: .3; } }
.gl-who { display: flex; justify-content: center; gap: 14px; width: 100%; }
.gl-who .gl-pp { flex: 0 1 100px; }
.gl-cam { opacity: 0; pointer-events: none; }
.gl-cam.gl-wait { opacity: .95; pointer-events: auto; cursor: pointer; }
.gl-cam.gl-wait img { border-color: var(--gold); border-style: dashed; }
.gl-cam.gl-came { opacity: 1; }
.gl-cam.gl-came img { border-color: var(--gold); }
.gl-cam.gl-came em { color: var(--gold); }

/* three texts */
.gl-texts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gl-th { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s, opacity .3s; }
.gl-th:disabled { cursor: default; }
.gl-nm { display: block; font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.gl-me2 { align-self: flex-end; max-width: 80%; margin: 0; padding: 5px 10px; border-radius: 14px 14px 4px 14px; background: var(--violet); color: #fff; font: 600 14px/1.3 var(--sans); }
.gl-them { align-self: flex-start; max-width: 88%; margin: 0; padding: 5px 10px; border-radius: 14px 14px 14px 4px; background: var(--raised); font: 600 14px/1.3 var(--sans); }
.gl-them i { color: var(--faint); font-weight: 700; }
.gl-th em { display: none; font-style: normal; font-size: 12px; font-weight: 800; color: var(--dim); }
.gl-th.gl-hot em { display: block; }
.gl-th.gl-hot { border-color: var(--gold); }
.gl-th.gl-hot em { color: var(--gold); }
.gl-th.gl-cool { opacity: .7; }

/* reply cards are the tap targets */
button.gl-said { display: block; width: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
button.gl-said:disabled { cursor: default; }
.gl-same { padding: 8px 14px; }
.gl-same p { font: 600 15px var(--sans); color: var(--dim); }
.gl-said.gl-miss, .gl-th.gl-miss { border-color: var(--red); }
.gl-wlab { font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: -6px; }
.gl-think small { display: block; margin-top: 3px; font: 800 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }

@media (max-height: 700px) {
  .gl-pp img { width: 70px; height: 70px; }
  .gl-pa img { width: 86px; height: 86px; }
  .gl-me2, .gl-them { font-size: 13px; }
  .gl-th { padding: 6px 9px; gap: 3px; }
  .gl-texts { gap: 6px; }
  .gl-me2, .gl-them { padding: 4px 9px; }
}