/* Cognitive Bias. All rules scoped under .cgb-* (the app inlines only this file). */

/* the board */
.cgb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.cgb-board { display: block; width: 100%; max-width: 460px; max-height: 100%; overflow: visible; touch-action: none; }
.cgb-board.cgb-small { max-width: 300px; }
.cgb-l { font: 800 13px var(--sans); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2.5px; pointer-events: none; }
.cgb-hit { fill: transparent; cursor: grab; }
.cgb-pick { cursor: pointer; }
.cgb-edge { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 3; transition: opacity .5s; pointer-events: none; }
.cgb-tile polygon:first-child { pointer-events: none; }
.cgb-tile.cgb-held .cgb-edge { stroke: var(--gold); }
.cgb-tile.cgb-in .cgb-edge { opacity: 0; }
.cgb-arrive .cgb-cyl { animation: cgbCyl 1s cubic-bezier(.3,1,.4,1) backwards; }
.cgb-arrive .cgb-shade { animation: cgbShade 1.2s ease-out .35s backwards; }
@keyframes cgbCyl { from { opacity: 0; transform: translate(70px, -30px); } }
@keyframes cgbShade { from { opacity: 0; } }

/* the mirror person */
.cgb-you { display: flex; justify-content: center; }
.cgb-you img { width: 190px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
@media (max-height: 700px) { .cgb-you img { width: 140px; } }

/* the call */
.cgb-call { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.cgb-call img { display: block; width: 100%; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.cgb-fan { position: absolute; top: -6px; left: 0; max-width: 52%; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #2b6fd8; color: #fff; font: 700 14px/1.25 var(--sans); opacity: 0; transform: scale(.7); transform-origin: 20% 100%; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.cgb-fan2 { left: auto; right: 0; border-radius: 14px 14px 4px 14px; background: #c8452f; transform-origin: 80% 100%; transition-delay: .5s; }
.cgb-call.said .cgb-fan { opacity: 1; transform: none; }
@media (max-height: 700px) { .cgb-call { max-width: 290px; } }

/* the test */
.cgb-test { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 330px; margin: 0 auto; }
.cgb-gut, .cgb-check { padding: 14px 16px; border-radius: 16px; font: 700 18px/1.3 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); }
.cgb-check { border-color: var(--mint); background: rgba(63,214,154,.10); }
.cgb-gut span, .cgb-check span { display: block; margin-bottom: 4px; font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }