/* "How ARC Prize built ARC-AGI-3" figures: full sentences on the game screen.
   Sizes use container units so the figure scales like an image in the sticky
   stage, the inline fallback, and on phones. */
.bf-console{padding:8px}
.bf{container-type:inline-size;aspect-ratio:480/310;overflow:hidden;background:#0d0c10;border:1px solid #613a53;border-radius:3px;color:#f4eef2;font-family:var(--sans)}
.bf>*{font-size:3.1cqw;line-height:1.38}
.bf p{margin:0;font:inherit;color:#e6dde3}
.bf b{font-weight:700;color:#fff}
.bf-foot{padding:0 4.5cqw;color:#c9bec6!important;font-size:2.8cqw!important}
.bf-muted{color:#b0a2ac!important;font-size:2.7cqw!important}

/* 1: real opening frame beside three numbered sentences */
.bf-two{display:grid;grid-template-columns:38% 1fr;gap:4cqw;align-items:center;height:100%;padding:4cqw}
.bf-frame{width:100%;aspect-ratio:1;image-rendering:pixelated;border:1px solid #453640}
.bf-rows{display:grid;gap:2.6cqw}
.bf-row{display:grid;grid-template-columns:6cqw 1fr;gap:2.5cqw;align-items:start}
.bf-row b{display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:50%;background:#ed9dcb;color:#21171e;font-size:3.2cqw}

/* 2: four production stages as columns */
.bf-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:4cqw 4cqw 2.4cqw}
.bf-stages div{padding:2.6cqw;border:1px solid #453640;border-top:1.2cqw solid #ed9dcb;border-radius:2px;background:#171219;min-height:37cqw}
.bf-stages div:nth-child(2){border-top-color:#69d5e2}.bf-stages div:nth-child(3){border-top-color:#f5d265}.bf-stages div:nth-child(4){border-top-color:#8fd694}
.bf-stages span{display:block;margin-bottom:1.6cqw;font-weight:700;color:#fff;font-size:3.1cqw}
.bf-stages p{font-size:2.55cqw!important;line-height:1.36}

/* 3: real level screens from s5i5 */
.bf-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;padding:4.5cqw}
.bf-levels img{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;border:1px solid #453640}
.bf-levels span{display:block;margin:1.6cqw 0 .6cqw;font-weight:700;color:#fff;font-size:3cqw}
.bf-levels p{font-size:2.6cqw!important;line-height:1.35}

/* 4: automated checks */
.bf-checks{display:grid;gap:1.8cqw;padding:4.5cqw 4.5cqw 3cqw}
.bf-checks div{display:grid;grid-template-columns:20cqw 1fr;gap:3cqw;align-items:baseline;padding-bottom:1.8cqw;border-bottom:1px solid #2e2530}
.bf-checks b{font:600 4cqw/1 var(--tech);color:#f5d265}
.bf-checks p{font-size:2.9cqw!important}

/* 5: ten players */
.bf-people{display:grid;gap:2.4cqw;padding:4.5cqw}
.bf-seats{display:grid;grid-template-columns:repeat(10,1fr);gap:1.6cqw;margin-bottom:1cqw}
.bf-seats i{aspect-ratio:1;border-radius:50%;border:.5cqw solid #69d5e2;background:#171219}
.bf-seats i.win{background:#69d5e2}

/* 6: ranked finishers */
.bf-baseline{display:grid;gap:1.7cqw;padding:4.5cqw}
.bf-head{color:#b0a2ac!important;font-size:2.7cqw!important;margin-bottom:.6cqw!important}
.bf-bar{display:grid;grid-template-columns:13cqw 1fr 7cqw;gap:2cqw;align-items:center;font-size:2.8cqw}
.bf-bar span{color:#c9bec6}
.bf-bar i{display:block;height:4cqw;background:#5b4a57}
.bf-bar b{font:600 3cqw var(--tech);text-align:right}
.bf-bar.base i{background:#f5d265}.bf-bar.base span,.bf-bar.base b{color:#f5d265}
.bf-baseline .bf-foot{padding:1.4cqw 0 0}

/* 7: the three sets, widths proportional to 25 / 55 / 55 */
.bf-sets{display:grid;grid-template-columns:25fr 55fr 55fr;gap:2cqw;padding:4.5cqw 4.5cqw 3cqw}
.bf-sets div{padding:2.4cqw;border-radius:2px;min-height:42cqw}
.bf-sets .pub{background:#3a2a36;border:1px solid #ed9dcb}
.bf-sets .semi{background:#1f2f33;border:1px solid #69d5e2}
.bf-sets .priv{background:#1c1a14;border:1px solid #f5d265}
.bf-sets b{display:block;font:600 7cqw/1 var(--tech)}
.bf-sets span{display:block;margin:1cqw 0 1.6cqw;font-weight:700;font-size:3cqw;color:#fff}
.bf-sets p{font-size:2.6cqw!important;line-height:1.38}
.bf-sets .pub p{font-size:2.3cqw!important}

/* Scoring chapter figures */
.bs{display:grid;align-content:start;gap:2.8cqw;height:100%;padding:4.5cqw}
.bs>p{font-size:2.9cqw!important}
.bs-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:.8cqw}
.bs-grid i,.bs-line i,.bs-key i{display:block;aspect-ratio:1;border-radius:1px}
.bs .ex{background:#69d5e2}.bs .te{background:#f5d265}.bs .fi{background:#ed9dcb}
.bs-key{display:grid;gap:1cqw;font-size:2.7cqw;color:#e6dde3}
.bs-key span{display:flex;align-items:center;gap:1.6cqw}.bs-key i{width:2.6cqw}
.bs-row{display:grid;grid-template-columns:19cqw 1fr 6cqw;gap:2cqw;align-items:center;font-size:2.8cqw}
.bs-row span{color:#c9bec6}.bs-row b{font:600 3.4cqw var(--tech);text-align:right}
.bs-line{display:grid;grid-template-columns:repeat(40,1fr);gap:.35cqw}
.bs .h{background:#f5d265}.bs .a{background:#ed9dcb}
.bs-calc>div{display:grid;gap:.6cqw;padding-bottom:2cqw;border-bottom:1px solid #2e2530}
.bs-calc span{font-size:2.6cqw;color:#b0a2ac}
.bs-calc b{font:600 4.4cqw/1.1 var(--tech);color:#fff}
.bs-calc .res b{font-size:7cqw;color:#f5d265}.bs-calc .res{border-bottom:0}
.bs-weights{display:grid;grid-template-columns:repeat(8,1fr);gap:1.6cqw;align-items:end;height:30cqw}
.bs-w{display:grid;grid-template-rows:1fr auto;height:100%;align-items:end;text-align:center}
.bs-w i{display:block;background:#69d5e2}
.bs-w.off i{background:none;border:.4cqw dashed #69d5e2}
.bs-w span{margin-top:1cqw;font:600 2.8cqw var(--tech);color:#c9bec6}
.bs-games{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.bs-games div{padding:2.6cqw;border:1px solid #453640;background:#171219}
.bs-games b{display:block;font:600 6cqw/1 var(--tech);color:#fff;margin-bottom:1.4cqw}
.bs-games span{display:block;font-size:2.6cqw;line-height:1.35;color:#c9bec6}
.bs-avg{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;padding-top:2.4cqw;border-top:1px solid #453640;font-size:2.9cqw}
.bs-avg b{font:600 7cqw/1 var(--tech);color:#f5d265}
.bs-headp{color:#b0a2ac!important;font-size:2.7cqw!important}
.bs-h{display:grid;grid-template-columns:24cqw 1fr 11cqw;gap:2cqw;align-items:center;font-size:3cqw;font-weight:700}
.bs-h div{height:5cqw;background:#1d1720}
.bs-h i{display:block;height:100%;background:#69d5e2}.bs-h.std i{background:#ed9dcb}
.bs-h b{font:600 4cqw var(--tech);text-align:right}
.bs-sub{margin-top:-1.4cqw!important;font-size:2.6cqw!important;color:#b0a2ac!important}
