.balloon-footer {
      --bf-cream: #f9f5eb;
      position: relative;
      isolation: isolate;
      display: block;
      overflow: hidden;
      height: clamp(470px, 44vw, 570px);
      min-height: 470px;
      background: #172439;
      color: var(--bf-cream);
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
    }
    .balloon-footer__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
    .balloon-footer::after {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: linear-gradient(90deg, rgba(9,20,38,.50),rgba(13,27,45,.18) 46%,transparent 78%);
      transition: opacity .3s ease;
    }
    .balloon-footer[data-phase="ready"]::after,
    .balloon-footer[data-phase="playing"]::after,
    .balloon-footer[data-phase="over"]::after { opacity: 0; }
    .bf-content { position: absolute; inset: 0; padding: clamp(30px,5vw,78px) clamp(24px,7.5vw,118px) 34px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
    .bf-content > * { pointer-events: auto; }
    .bf-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .bf-mark { font-size: 12px; letter-spacing: .17em; font-weight: 700; text-transform: uppercase; display:flex; align-items:center; gap:10px; }
    .bf-mark-dot { width: 8px; height: 8px; background: #ffd995; border-radius: 50%; box-shadow:0 0 18px #ffd99580; }
    .bf-issue { color: #e1e8f0bd; font-size: 11px; letter-spacing: .14em; font-weight: 550; }
    .bf-copy { max-width: min(580px, 62%); padding-bottom: 3px; }
    .bf-kicker { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:#ffd9a4; margin:0 0 19px; }
    .bf-kicker::before { content:""; width:27px; height:1px; background:#ffd9a4; }
    .bf-title { margin:0; font-weight: 530; font-size:clamp(41px,5.7vw,79px); line-height:.98; letter-spacing:-.068em; text-wrap: balance; }
    .bf-title i { color:#ffd296; font-weight:500; font-family: Georgia, serif; }
    .bf-description { margin:17px 0 0; font-size: 13px; line-height:1.7; max-width:340px; color:#f5f0e5c7; }
    .bf-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #ffffff35; padding-top:22px; }
    .bf-bottom-left, .bf-bottom-right { display:flex; align-items:center; gap:22px; }
    .bf-bottom a, .bf-bottom span { font-size:11px; text-decoration:none; color:#f6f3ebd0; letter-spacing:.02em; }
    .bf-bottom a:hover { color:#fff; }
    .bf-bottom .bf-sky-hint { display:flex; align-items:center; gap:8px; color:#ffd9a4; }
    .bf-sky-hint svg { width:14px; height:14px; }

    .bf-play {
      position:absolute; z-index:3; left:72%; top:47%; transform:translate(-50%, -40%) scale(.95);
      display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.55);
      border-radius:100px; background:#fffaf2; color:#172439; padding:13px 19px 13px 13px;
      box-shadow:0 14px 65px #111b325c; font-size:12px; font-weight:750; letter-spacing:.08em; white-space:nowrap;
      cursor:pointer; opacity:0; pointer-events:none;
      transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .23s ease,box-shadow .25s ease;
    }
    .bf-play-icon { width:32px; height:32px; background:#203049; color:#fff; display:grid; place-items:center; border-radius:50%; }
    .bf-play:hover { box-shadow:0 15px 90px #101827c2; transform:translate(-50%,-50%) scale(1.04) !important; }
    .balloon-footer:hover .bf-play, .balloon-footer:focus-within .bf-play,
    .balloon-footer[data-touch="true"] .bf-play { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
    .balloon-footer[data-phase]:not([data-phase="idle"]) .bf-play { display:none; }
    .balloon-footer[data-phase]:not([data-phase="idle"]) .bf-content { opacity:0; pointer-events:none; transform:translateY(8px); }
    .balloon-footer[data-phase]:not([data-phase="idle"]) .bf-content > * { pointer-events:none; }
    .balloon-footer[data-phase="playing"], .balloon-footer[data-phase="ready"] { touch-action:none; }

    .bf-gameui { position:absolute; inset:0; z-index:4; pointer-events:none; display:none; }
    .balloon-footer[data-phase]:not([data-phase="idle"]) .bf-gameui { display:block; }
    .bf-hud { position:absolute; left:0; right:0; top:24px; display:flex; justify-content:center; align-items:flex-start; padding:0 25px; }
    .bf-score { text-align:center; text-shadow:0 2px 16px #112a3c90; }
    .bf-score-label { color:#fffbe6c9; font-size:10px; letter-spacing:.23em; text-transform:uppercase; font-weight:800; }
    .bf-score-number { display:block; font-size:clamp(44px,6vw,68px); line-height:1.05; letter-spacing:-.065em; color:#fffaf0; font-weight:650; font-variant-numeric:tabular-nums; }
    .bf-exit { position:absolute; top:24px; right:clamp(22px,3.5vw,55px); border:1px solid #ffffff74; color:#fff; background:#1022386e; border-radius:50%; width:39px; height:39px; display:grid; place-items:center; cursor:pointer; pointer-events:auto; }
    .bf-exit:hover { background:#172a4c; }
    .bf-center { position:absolute; inset:0; display:grid; place-items:center; padding:30px; }
    .bf-dialog { max-width:360px; text-align:center; padding:28px 26px 25px; border:1px solid #ffffff55; border-radius:24px; background:#101d32cb; backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); box-shadow:0 20px 90px #10203577; pointer-events:auto; }
    .bf-dialog-eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#f4cd99; margin:0 0 13px; }
    .bf-dialog h3 { margin:0; color:#fff9ec; font-size:clamp(29px,3.5vw,39px); line-height:1.1; letter-spacing:-.05em; font-weight:620; }
    .bf-dialog p { color:#ece9e4cc; font-size:13px; line-height:1.65; margin:12px 0 20px; }
    .bf-key { display:inline-block; border:1px solid #ffffff61; border-bottom-width:3px; border-radius:6px; padding:0px 8px; font-family:inherit; font-size:11px; font-weight:700; line-height:23px; color:#fff; }
    .bf-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; background:#ffdcab; border:0; border-radius:100px; padding:10px 22px; font-size:12px; font-weight:800; color:#1d2b3b; cursor:pointer; }
    .bf-primary:hover { background:#ffebcb; }
    .bf-best { margin:13px 0 0; font-size:12px; color:#fff8e4c9; }
    .bf-instructions { display:block; position:absolute; bottom:26px; width:100%; text-align:center; color:#fffcf2b4; text-shadow:0 2px 16px #223950ad; font-size:12px; letter-spacing:.02em; }
    .bf-mobile-flap { position:absolute; right:22px; bottom:22px; padding:15px 19px; border:1px solid #ffffff95; background:#172439a1; color:white; border-radius:999px; font-size:12px; font-weight:800; pointer-events:auto; display:none; }
    .balloon-footer[data-phase="ready"] .bf-instructions, .balloon-footer[data-phase="over"] .bf-instructions { display:none; }
    .balloon-footer[data-phase="playing"] .bf-center { display:none; }
    .balloon-footer[data-phase="ready"] .bf-score, .balloon-footer[data-phase="over"] .bf-score { opacity:.25; }
    .balloon-footer[data-phase="playing"] .bf-mobile-flap { display:none; }
    .bf-screenreader { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    @media (hover:none), (pointer:coarse) {
      .bf-play { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
      .bf-sky-hint { display:none !important; }
      .balloon-footer[data-phase="playing"] .bf-mobile-flap { display:block; }
      .balloon-footer[data-phase="playing"] .bf-instructions { display:none; }
    }
    @media (max-width: 650px) {
      .demo { min-height:230px; padding:28px 24px 36px; }
      .demo-copy { margin-top:45px; }
      .balloon-footer { height:570px; }
      .bf-content { padding:30px 24px 27px; }
      .bf-copy { max-width:100%; padding-bottom:125px; }
      .bf-title { font-size:clamp(42px,9.7vw,62px); max-width:360px; }
      .bf-description { font-size:12px; max-width:265px; }
      .bf-issue { display:none; }
      .bf-play { left:68%; top:69%; }
      .bf-bottom { gap:10px; align-items:flex-end; }
      .bf-bottom-left, .bf-bottom-right { gap:14px; }
      .bf-bottom-right span { display:none; }
      .bf-bottom-right .bf-sky-hint { display:none; }
      .bf-play { font-size:11px; gap:8px; padding:10px 13px 10px 10px; }
      .bf-dialog { width:min(100%,330px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bf-content,.bf-play,.balloon-footer::after { transition:none; }
      html { scroll-behavior:auto; }
    }
  /* Portfolio theme integration. */
footer.balloon-footer{width:100%;flex-shrink:0;padding:0;margin-top:50px;font-family:'Geist',sans-serif;color:#282a27;background:#b9dfe8;height:620px;min-height:620px;letter-spacing:normal}
.balloon-footer:after{background:linear-gradient(90deg,#faf9f580,transparent 85%)}
.bf-content{max-width:1440px;margin:auto;padding:48px 6% 30px}.bf-copy{max-width:70%}.bf-title{font:450 clamp(40px,5vw,70px)/1.08 'Geist',sans-serif;letter-spacing:-2.8px;text-wrap:initial}.bf-title i{font-family:'EB Garamond',serif;color:inherit;font-weight:400}.bf-description{color:#424d47;max-width:500px;font-size:14px}.bf-mark{font-size:10px}.bf-mark-dot{background:#bd4a25;box-shadow:none}.bf-bottom{border-color:#282a2730;flex-wrap:wrap}.bf-bottom-left,.bf-bottom-right{flex-wrap:wrap;gap:16px}.bf-bottom a,.bf-bottom span{color:#282a27}.bf-bottom a:hover{color:#bd4a25}.bf-bottom .bf-sky-hint{color:#424d47}.bf-play{left:84%;top:47%;opacity:1;pointer-events:auto;font-family:inherit;letter-spacing:.02em}.bf-play-icon{background:#bd4a25}.bf-score-label,.bf-score-number,.bf-instructions{color:#282a27;text-shadow:none}.bf-dialog{background:#faf9f5ed;border-color:#ffffff80}.bf-dialog h3{color:#282a27}.bf-dialog p{color:#61655c}.bf-dialog .bf-dialog-eyebrow{color:#bd4a25}.bf-primary{background:#282a27;color:#faf9f5}.bf-primary:hover{background:#bd4a25}.bf-key{color:inherit;border-color:#999}.bf-exit,.bf-mobile-flap{background:#faf9f5;color:#282a27;border-color:#282a2740}.bf-best{color:#61655c}
html[data-theme=dark] .balloon-footer{color:#f1eee6;background:#081329}html[data-theme=dark] .balloon-footer:after{background:linear-gradient(90deg,#08132970,transparent 85%)}html[data-theme=dark] .bf-description,html[data-theme=dark] .bf-bottom a,html[data-theme=dark] .bf-bottom span,html[data-theme=dark] .bf-score-label,html[data-theme=dark] .bf-score-number,html[data-theme=dark] .bf-instructions{color:#f1eee6}html[data-theme=dark] .bf-bottom{border-color:#ffffff30}html[data-theme=dark] .bf-dialog{background:#161616ed;border-color:#ffffff30}html[data-theme=dark] .bf-dialog h3{color:#f1eee6}html[data-theme=dark] .bf-dialog p{color:#bcbab5}html[data-theme=dark] .bf-dialog .bf-dialog-eyebrow{color:#f1a07d}html[data-theme=dark] .bf-primary{background:#f1a07d;color:#282a27}
@media(max-width:760px){footer.balloon-footer{height:760px;min-height:760px}.bf-content{padding:30px 24px}.bf-copy{max-width:100%;padding-bottom:160px}.bf-title{font-size:44px;letter-spacing:-1.7px;max-width:100%}.bf-description{font-size:14px}.bf-play{left:65%;top:66%}.bf-bottom-left,.bf-bottom-right{gap:14px}.bf-bottom-right span{display:inline}.bf-bottom-right .bf-sky-hint{display:none}.bf-bottom{gap:20px}.bf-bottom-left{flex-wrap:wrap}}
/* Portfolio game controls: warm paper, ink and terracotta. */
.balloon-footer .bf-play,.balloon-footer .bf-primary,.balloon-footer .bf-exit,.balloon-footer .bf-mobile-flap{font-family:'Geist',sans-serif;font-weight:500;letter-spacing:0;border-radius:999px}
.balloon-footer .bf-play{background:var(--ink);color:var(--paper);border:1px solid var(--line);box-shadow:0 8px 24px #282a2720}
.balloon-footer .bf-play:hover{background:var(--accent);box-shadow:0 10px 28px #282a2728}
.balloon-footer .bf-play-icon{background:var(--paper);color:var(--accent)}
.balloon-footer .bf-dialog{border-radius:20px;box-shadow:0 16px 50px #00000020}
.balloon-footer .bf-dialog h3{font-family:'Geist',sans-serif;font-size:clamp(28px,3vw,40px);font-weight:450;letter-spacing:-.035em}
.balloon-footer .bf-dialog-eyebrow,.balloon-footer .bf-score-label{font-weight:600;letter-spacing:.14em}
.balloon-footer .bf-score-number{font-family:'EB Garamond',Georgia,serif;font-weight:400}
.balloon-footer .bf-primary{background:var(--ink);color:var(--paper)}
.balloon-footer .bf-primary:hover{background:var(--accent);color:var(--paper)}
.balloon-footer .bf-exit,.balloon-footer .bf-mobile-flap{background:var(--paper);color:var(--ink);border-color:var(--line)}
/* Direct contact details and accessible social icons at the footer's base. */
.bf-content{padding-bottom:22px}
.bf-bottom{margin-top:auto}
.bf-copy{margin-top:auto;margin-bottom:auto}
.bf-contact-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #282a2726;margin-top:18px;padding-top:12px}
.bf-contact-links{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px}
.bf-contact-links a:hover{color:var(--accent)}
.bf-socials{display:flex;gap:8px;align-items:center}
.bf-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background .2s,color .2s,transform .2s}
.bf-socials svg{width:20px;height:20px}
.bf-socials a:hover{background:#282a2710;color:var(--accent);transform:translateY(-2px)}
html[data-theme=dark] .bf-contact-strip{border-color:#ffffff26}
html[data-theme=dark] .bf-socials a:hover{background:#ffffff15}
@media(max-width:760px){footer.balloon-footer{height:850px;min-height:850px}.bf-contact-strip{align-items:flex-start;flex-direction:column;gap:12px}.bf-contact-links{flex-direction:column;gap:10px}.bf-socials{gap:12px}.bf-play{top:60%}.bf-copy{padding-bottom:160px}.bf-bottom{padding-top:14px}}
/* A single footer baseline: contact details, centered credit, social icons. */
.bf-contact-strip{display:grid;grid-template-columns:1fr auto 1fr;margin-top:auto;gap:20px}
.bf-contact-strip .bf-socials{justify-self:end}
.bf-copyright{font-size:11px;text-align:center;white-space:nowrap}
@media(max-width:1000px){.bf-contact-links{flex-direction:column;gap:8px}}
@media(max-width:760px){.bf-contact-strip{grid-template-columns:1fr;justify-items:center;gap:14px}.bf-contact-links{align-items:center}.bf-contact-strip .bf-socials{justify-self:center}.bf-copyright{grid-row:3}.bf-copy{margin-bottom:auto}}
.bf-contact-strip,html[data-theme=dark] .bf-contact-strip{border-top:var(--divider-width) solid var(--line)}
/* Play button follows the content column on wider screens (position set in balloon-footer.js). */
@media(min-width:761px){.balloon-footer .bf-play{left:var(--bf-play-x,84%)}}