/* Teacher? Parent? page. Builds on government-works.css (.gw) */
.tp-hero{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,40px);margin:8px 0 4px}
.tp-steve{width:min(300px,52vw);height:auto;flex:none}
.tp-shark{width:min(330px,46vw);flex:none}
.tp-shark svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){.tp-steve{animation:tp-float 4s ease-in-out infinite}}
@keyframes tp-bob{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(6px) rotate(-3deg)}}
@keyframes tp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:520px){.tp-hero{gap:8px}}
.tp-tag{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line)}
.gw-card>p.tp-first{background:#a7f0e9;color:#04101a;border-color:#a7f0e9}
.gw-card>p.tp-planned{background:#122f3c;color:#e7c98a;border-color:#6d5f3c}
.tp-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.gw a.tp-btn{display:inline-block;padding:.6rem 1.3rem;border-radius:999px;background:#a7f0e9;color:#04101a;font-weight:700;text-decoration:none}
.gw a.tp-btn:hover,.gw a.tp-btn:focus-visible{background:#fff;color:#04101a}
.gw a.tp-btn-alt{background:transparent;color:#a7f0e9;border:1px solid #a7f0e9}
.gw a.tp-btn-alt:hover,.gw a.tp-btn-alt:focus-visible{background:#173846;color:#fff}

.tp-meet-fig{margin:22px auto 6px;text-align:center}
.tp-steve-still img{display:block;margin:0 auto;width:min(230px,60vw);height:auto}
.tp-stage{position:relative;width:min(720px,100%);aspect-ratio:900/600;margin:0 auto 64px;overflow:visible}
.tp-stage svg{display:block;width:100%;height:100%}
.tp-puff{position:absolute;left:80%;top:56%;width:5.5%;aspect-ratio:1;opacity:0;pointer-events:none}
.tp-puff svg{width:100%;height:100%}
.tp-fact{position:absolute;left:50%;top:76%;max-width:min(240px,86%);box-sizing:border-box;padding:6px 11px 7px;text-align:center;background:#fff4d6;border:2px solid #8a5a2b;border-radius:14px;color:#4a2f17;font:600 15px/1.25 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;box-shadow:0 3px 10px #0005;opacity:0;pointer-events:none}
.tp-fact-l{display:block;margin-bottom:2px;color:#9b4a1c;font-size:.72em;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:520px){.tp-fact{font-size:13px}}

/* Steve (right) swims bare; Bruce (left) bobs and leaves bad facts (his poop art and the note sit in .tp-bfx under him) */
.tp-diver{position:relative;flex:none}
.tp-hero{position:relative;padding-bottom:118px}
.tp-bfx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tp-bfx .tp-poop{position:absolute;margin:0}
.tp-bfx .tp-poop img{display:block;width:100%;height:100%}
.tp-bfx .tp-bad{position:absolute;box-sizing:border-box;max-width:min(300px,92%);padding:6px 11px 7px;text-align:center;background:#fff4d6;border:2px solid #8a5a2b;border-radius:14px;color:#4a2f17;font:600 15px/1.25 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;box-shadow:0 3px 10px #0005;opacity:0}
.tp-bfx .tp-bad.still{opacity:1}
.tp-bad-l{display:block;margin-bottom:2px;color:#9b4a1c;font-size:.72em;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:520px){.tp-bfx .tp-bad{font-size:13px}.tp-hero{padding-bottom:124px}}

/* Play the game: first thing on the page, big. The empty span is the spot for the game logo (ChatGPT art) */
.tp-play{display:flex;justify-content:center;margin:6px 0 14px}
.gw a.tp-play-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:.9rem 2.6rem;font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1.1;box-shadow:0 0 0 3px #a7f0e955,0 6px 22px #0007}
.tp-play-logo:empty{display:none}
.tp-play-logo img{display:block;height:clamp(40px,9vw,64px);width:auto}

/* Steve (still): fact papers drop from his hand and turn into bubbles that hold a true fact with its source */
.tp-sstage{position:relative;width:min(780px,100%);margin:0 auto}
.tp-sstage .tp-simg{display:block;margin:0 auto;width:min(230px,60vw);height:auto}
.tp-sfx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.tp-sfx .tp-drop{position:absolute;width:30px;height:auto;margin:0;opacity:0}
.tp-sfx .tp-bubble{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;aspect-ratio:1;pointer-events:auto;opacity:0;color:#eaf8f6;font:500 13px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(120% 140% at 28% 18%,#0b4660f2 0%,#052b3cf5 55%,#031d2bf7 100%);border:2px solid #c9fff6b8;
  box-shadow:inset 0 0 0 1px #ffffff40,inset 0 -8px 16px #7fe3d933,inset 0 6px 12px #ffffff1f,0 3px 14px #0007,0 0 10px #7fe3d933}
.tp-sfx .tp-bubble.still{opacity:1}
.tp-sfx .tp-bubble::before{content:"";position:absolute;top:9%;right:20%;width:16%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#ffffffd9,#ffffff00);transform:rotate(-18deg);pointer-events:none}
.tp-bubble-l{display:block;margin-bottom:3px;color:#a7f0e9;font-size:.74em;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tp-bubble-s{display:block;margin-top:4px;font-size:.88em}
.tp-bubble-s a{color:#a7f0e9;text-decoration:underline}
.tp-bubble-s a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:520px){.tp-sstage .tp-simg{width:44vw;margin-right:0}.tp-sfx .tp-bubble{font-size:12px}}
@media (forced-colors:active){.tp-sfx .tp-bubble{background:Canvas;border-color:CanvasText;color:CanvasText}.tp-bubble-s a{color:LinkText}}

@media (max-width:520px){.tp-shark{width:43vw}.tp-steve{width:45vw}}