/* The tower page template (tower_page.py; the Cannon first): hero with the turning model, level stepper and the
   Attributes list, the sticky jump bar, tip cards, the configurer's section, the level table's heat bars, the cooling
   cards, research cards, the Height | Challenge pair. On top of the theme's .bb-page / .bb-unit (bb-pages.css,
   bb-units.css) and guides.css (.bbg-table). Server pub/media/units/css/, ?v= like the unit scripts.
   Tokens: the storefront's --color-bb-* (fallbacks the same hex), the menu plate's --bb-rivet. */
.bbt {
    --bbt-line: var(--color-bb-line, #2a3756);
    --bbt-panel: var(--color-bb-panel, #161f36);
    --bbt-panel-2: var(--color-bb-panel-2, #1d2844);
    --bbt-muted: var(--color-bb-muted, #9aa6c0);
    --bbt-text: var(--color-bb-text, #e8ecf5);
    --bbt-amber: var(--color-bb-amber, #f59e0b);
    --bbt-amber-hi: var(--color-bb-amber-hi, #fbbf24);
    --bbt-gold: var(--color-bb-gold, #d9a33a);
    --bbt-blue: var(--color-bb-blue, #38bdf8);
    --bbt-green: #4ade80;
    --bbt-red: #ff5a4a;
    --bbt-jump-h: 48px;
    --bbc-top: calc(var(--bbt-jump-h) + 8px);        /* the configurer's sticky columns sit under the jump bar */
    --bbc-strip-top: var(--bbt-jump-h);
}
.bbt *, .bbt *::before, .bbt *::after { box-sizing: border-box; }

/* A riveted plate */
.bbt-plate, .bbt-attrs, .bbt-tip, .bbt-cool, .bbt-res, .bbt-band {
    position: relative;
    border: 1px solid var(--bbt-line);
    border-radius: 10px;
    background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 40%), var(--bbt-panel);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -2px 0 rgb(0 0 0 / .25);
}
.bbt-plate::before, .bbt-attrs::before, .bbt-tip::before, .bbt-cool::before, .bbt-res::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    opacity: .85;
    background: var(--bb-rivet) left top / 10px 10px no-repeat, var(--bb-rivet) right top / 10px 10px no-repeat;
}

/* ---- hero ---- */
.bbt-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro attrs" "stage attrs";
    grid-template-rows: auto 1fr;
    gap: 1rem 2rem;
    padding: 1.6rem;
    border: 1px solid var(--bbt-line);
    border-radius: 12px;
    background: radial-gradient(40rem 20rem at 20% 100%, rgb(56 189 248 / .08), transparent 70%),
                linear-gradient(180deg, var(--bbt-panel), var(--color-bb-bg, #0e1424));
}
.bbt-hero__intro { grid-area: intro; min-width: 0; }
.bbt-hero__intro .bb-lede { font-size: 1.02rem; line-height: 1.6; }
.bbt-hero__stage { grid-area: stage; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.bbt-hero__stage .bb-turntable { max-width: 420px; }
/* "Drag to spin" under the model, never on its base: its own line below the turntable */
.bbt-hero__stage .bb-turntable { margin-bottom: 1.5rem; }
.bb-page .bbt-hero__stage .bb-turntable__hint { bottom: -1.6rem; z-index: 1; line-height: 1.2; }
.bbt-attrs { grid-area: attrs; min-width: 0; padding: 1.1rem 1.3rem .9rem; align-self: start; }
.bb-page .bbt-attrs__title { margin: 0 0 .5rem; padding-left: .6rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bbt-amber); }
.bbt-attrs__title small { margin-left: .5rem; font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--bbt-muted); font-weight: 500; }
.bbt-attr-list { margin: 0; }
.bbt-attr {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: .2rem 1rem;
    padding: .42rem .6rem;
    border-bottom: 1px solid var(--bbt-line);
}
.bbt-attr:nth-child(odd) { background: rgb(255 255 255 / .02); }
.bbt-attr:last-child { border-bottom: 0; }
.bbt-attr dt { color: var(--bbt-muted); font-weight: 500; font-size: .95rem; }
.bbt-attr dd { margin: 0; min-width: 0; font-size: .95rem; }
.bbt-v { font-family: var(--font-mono, ui-monospace, monospace); color: var(--bbt-text); }
.bbt-v.bbt-v--text { font-family: var(--font-body, system-ui); font-weight: 600; }
.bbt-d { font-family: var(--font-mono, ui-monospace, monospace); font-size: .9rem; color: var(--bbt-muted); }
.bbt-d.is-up { color: var(--bbt-green); }
.bbt-d.is-down { color: var(--bbt-red); }
.bbt-d.is-total { color: var(--bbt-muted); }
.bbt-sub { display: block; margin-top: .1rem; font-size: .82rem; line-height: 1.4; color: var(--bbt-muted); }
.bbt-sub[hidden] { display: none; }
.bbt-sub.is-hot { color: #ff8a7a; }
.bbt-sub.is-ok { color: var(--bbt-green); }
.bbt-chip {
    margin-left: .3rem;
    padding: 0 .4rem;
    border: 1px solid rgb(56 189 248 / .5);
    border-radius: 4px;
    font-size: .75rem;
    color: var(--bbt-blue);
    white-space: nowrap;
}
.bbt-chip[hidden] { display: none; }
.bb-page .bbt-attr a { color: var(--bbt-blue); }
.bb-page .bbt-attrs__hint { margin: .6rem 0 0; font-size: .8rem; color: var(--bbt-muted); }

/* steppers */
.bbt-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgb(56 189 248 / .55);
    border-radius: .45rem;
    background: var(--bbt-panel-2);
    color: var(--bbt-blue);
    font: 800 1.15rem/1 var(--font-body, system-ui);
    cursor: pointer;
    touch-action: manipulation;
}
.bbt-step:hover:not(:disabled) { background: #26365a; color: var(--bbt-amber-hi); }
.bbt-step:disabled { opacity: .35; cursor: default; border-color: var(--bbt-line); color: var(--bbt-muted); }
.bbt-step:focus-visible, .bbt-pip:focus-visible, .bbt-build-btn:focus-visible { outline: 3px solid var(--bbt-blue); outline-offset: 2px; }
.bbt-heights { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .45rem; }
.bbt-hline { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.bbt-hline .bbt-heights__label { width: 6.6rem; flex: none; }
.bbt-heights[hidden] { display: none; }
.bbt-heights__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bbt-muted); }
.bbt-stepper {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem;
    border: 1px solid #3c5a86;
    border-radius: .55rem;
    background: var(--color-bb-bg, #0e1424);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .45);
}
.bbt-stepper .bbt-step { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.bbt-stepper output { width: 8.2rem; flex: none; text-align: center; font: 700 .85rem var(--font-display, system-ui); color: var(--bbt-text); white-space: nowrap; }
.bbt-heights__total { font-size: .82rem; color: var(--bbt-blue); }

/* level stepper under the model: the game's level lights */
.bbt-lv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; max-width: 440px; }
.bbt-lv[hidden] { display: none; }
.bbt-lv__pips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; }
.bbt-pip {
    min-width: 0;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--bbt-line);
    border-radius: 5px;
    background: #0b1120;
    color: var(--bbt-muted);
    font: 700 .85rem var(--font-display, system-ui);
    cursor: pointer;
}
.bbt-pip.is-lit { background: color-mix(in srgb, var(--lit) 30%, #0b1120); border-color: var(--lit); color: #fff; box-shadow: 0 0 8px color-mix(in srgb, var(--lit) 45%, transparent); }
.bbt-pip[aria-pressed="true"] { background: var(--lit); color: #0e1424; }
.bbt-pip:hover { border-color: var(--bbt-amber-hi); }
.bb-page .bbt-lv__label { grid-column: 1 / -1; margin: 0; text-align: center; font: 600 .95rem var(--font-display, system-ui); color: var(--bbt-text); }
.bb-page a.bbt-build-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .6rem 1.4rem;
    border: 1px solid var(--bbt-amber-hi);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--bbt-amber-hi), var(--bbt-amber));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .25), 0 6px 18px rgb(245 158 11 / .2);
    color: #0e1424;
    font: 700 1rem var(--font-display, system-ui);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
}
.bb-page a.bbt-build-btn:hover { filter: brightness(1.08); color: #0e1424; }

/* ---- jump bar ---- */
.bbt-jump {
    position: sticky;
    top: 0;
    /* In its place it sits under the walking Clanker (../clanker/clanker.css --clanker-z: 25); stuck at the top
       (.is-stuck, js/tower_page.js) it rises over it and the page */
    z-index: 20;
    margin: 1.25rem 0 0;
    border: 1px solid var(--bbt-line);
    border-bottom: 2px solid var(--bbt-gold);
    border-radius: 8px;
    background: rgb(10 15 28 / .94);
    backdrop-filter: blur(6px);
}
.bbt-jump.is-stuck { z-index: 30; }
.bbt-jump__in { display: flex; gap: .25rem; height: calc(var(--bbt-jump-h) - 3px); padding: 0 .5rem; overflow-x: auto; scrollbar-width: none; }
.bbt-jump__in::-webkit-scrollbar { display: none; }
.bb-page .bbt-jump a {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 .8rem;
    border-bottom: 3px solid transparent;
    color: var(--bbt-muted);
    font: 600 .92rem var(--font-display, system-ui);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.bb-page .bbt-jump a:hover { color: var(--bbt-text); }
.bb-page .bbt-jump a.is-on { color: var(--bbt-amber-hi); border-bottom-color: var(--bbt-amber); }
.bbt-jump a[hidden] { display: none; }

/* ---- sections ---- */
.bbt-sec { scroll-margin-top: calc(var(--bbt-jump-h) + 12px); margin: 2.25rem 0 0; }
#bb-us { scroll-margin-top: calc(var(--bbt-jump-h) + 12px); }
.bb-page .bbt-sec > h2 { margin: 0 0 .7rem; }
.bb-page .bbt-sec__lede { margin: 0 0 1rem; color: #c9d1e3; }
.bb-page .bbt h3 { color: var(--bbt-text); }

.bbt-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .9rem; }
.bbt-tip { padding: 1.1rem 1.1rem .9rem; border-top: 3px solid var(--bbt-blue); }
.bb-page .bbt-tip h3 { margin: 0 0 .4rem; padding-left: .5rem; font-size: 1.02rem; color: var(--bbt-blue); }
.bb-page .bbt-tip p { margin: 0; font-size: .93rem; line-height: 1.55; color: #c9d1e3; }

.bbt-cfg { min-height: 20rem; }
.bbt-cfg.is-ready { min-height: 0; }
.bbt-howcfg { margin-top: 1rem; padding: .9rem 1.3rem; }
.bbt-howcfg > summary { cursor: pointer; padding-left: .6rem; color: var(--bbt-blue); font: 600 .95rem var(--font-display, system-ui); }
.bbt-howcfg__in { padding: .4rem .6rem 0; font-size: .9rem; }
.bb-page .bbt-howcfg h3 { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--bbt-amber); }
.bb-page .bbt-howcfg li, .bb-page .bbt-howcfg p { font-size: .9rem; line-height: 1.55; color: #c9d1e3; }
.bbt-howcfg code { font-family: var(--font-mono, monospace); font-size: .85em; color: var(--bbt-amber-hi); overflow-wrap: anywhere; }
.bbt-howcfg .bbg-table th, .bbt-howcfg .bbg-table td { padding: .3rem .5rem; font-size: .82rem; }

/* heat */
.bbt-cools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.bbt-cool { padding: 1.1rem 1.2rem 1rem; text-align: center; }
.bbt-icon { display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto; color: var(--bbt-blue); }
.bbt-cool--snow .bbt-icon { color: #a5f3fc; }
.bbt-cool--both .bbt-icon { color: var(--bbt-amber-hi); }
.bb-page .bbt-cool h3 { margin: .2rem 0 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.bb-page .bbt-cool .bbt-cool__x { margin: .1rem 0 .3rem; font: 800 2.3rem/1.1 var(--font-display, system-ui); color: var(--bbt-amber-hi); }
.bb-page .bbt-cool p { margin: 0; font-size: .9rem; line-height: 1.5; color: #c9d1e3; }
.bbt-heatcmp { margin: .9rem 0; padding: 1rem 1.3rem; }
.bb-page .bbt-heatcmp h3 { margin: 0 0 .6rem; padding-left: .5rem; font-size: .95rem; }
.bbt-heatcmp h3 small { margin-left: .4rem; color: var(--bbt-muted); font-weight: 500; }
.bbt-hbar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: .8rem; margin: .35rem 0; }
.bbt-hbar__label { font: 600 .9rem var(--font-display, system-ui); color: var(--bbt-muted); }
.bbt-hbar__val { font-family: var(--font-mono, monospace); font-size: .9rem; text-align: right; }
.bbt-hbar__track { position: relative; display: block; height: 12px; border: 1px solid var(--bbt-line); border-radius: 6px; background: #0b1120; overflow: visible; }
.bbt-hbar__track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #38bdf8, #f59e0b); }
.bbt-hbar__track i.is-hot { background: linear-gradient(90deg, #38bdf8, #f59e0b 55%, #ff3b2f); }
.bbt-hbar__track b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #ff3b2f; }
.bb-page ul.bbt-facts { columns: 2 26rem; column-gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.bb-page ul.bbt-facts li { break-inside: avoid; position: relative; margin: 0 0 .55rem; padding-left: 1.2rem; font-size: .92rem; line-height: 1.55; color: #c9d1e3; }
.bb-page ul.bbt-facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: var(--bb-rivet) center / contain no-repeat; }

/* every level */
.bbt-levels tr.is-on td { background: rgb(245 158 11 / .14); color: var(--bbt-amber-hi); }
.bbt-levels tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--bbt-amber); }
.bbt-levels tbody tr { cursor: pointer; }
.bbt-levels tbody tr:hover td { background: rgb(255 255 255 / .04); }
.bbt-heatcell { min-width: 11rem; }
.bbt-heatcell .bbt-hbar__track { display: inline-block; width: calc(100% - 4.2rem); vertical-align: middle; margin-right: .5rem; height: 9px; }
.bbt-need { color: #ff8a7a; }
.bbt-bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: .9rem; }
.bb-page .bbt-band { margin: 0; padding: .8rem 1rem; font-size: .88rem; line-height: 1.5; color: #c9d1e3; border-left: 3px solid var(--bbt-blue); }
.bbt-band strong { display: block; margin-bottom: .15rem; color: var(--bbt-blue); font-family: var(--font-display, system-ui); }

/* research */
.bbt-research { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; }
.bbt-res { padding: 1rem 1.1rem .9rem; }
.bb-page .bbt-res h3 { margin: 0 0 .35rem; padding-left: .5rem; font-size: .98rem; }
.bb-page .bbt-pips { display: flex; gap: 4px; margin: 0 0 .5rem; padding-left: .5rem; }
.bbt-pips i { width: 1.3rem; height: .55rem; border-radius: 2px; background: var(--bbt-amber); box-shadow: 0 0 6px rgb(245 158 11 / .4); }
.bbt-pips i:nth-child(n+2) { opacity: .8; }
.bbt-pips i:nth-child(n+3) { opacity: .65; }
.bbt-pips i:nth-child(n+4) { opacity: .5; }
.bbt-pips i:nth-child(n+5) { opacity: .38; }
.bb-page .bbt-res p:last-child { margin: 0; font-size: .9rem; line-height: 1.5; color: #c9d1e3; }

/* challenge | height and ground */
.bbt-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; align-items: stretch; }
.bbt-pair > .bbt-plate { padding: 1.2rem 1.4rem; }
.bb-page .bbt-pair h3 { margin: 0 0 .5rem; padding-left: .5rem; font-size: 1.15rem; color: var(--bbt-amber); }
.bb-page .bbt-pair h4 { margin: .2rem 0 .3rem; font-size: 1rem; color: var(--bbt-text); }
.bb-page .bbt-pair p, .bb-page .bbt-pair li { font-size: .92rem; line-height: 1.55; color: #c9d1e3; }
.bb-page .bbt-pair ul { margin: 0 0 .4rem; }
.bb-page .bbt-pair li { margin: .2rem 0; }
.bbt-faq .bb-faq > h2 { margin-top: 0; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
    .bbt-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.4rem; padding: 1.2rem; }
    .bbt-attr { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .bbt-bands { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .bbt { --bbt-jump-h: 44px; }
    .bbt-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "stage" "attrs"; padding: 1rem; }
    .bbt-cools { grid-template-columns: minmax(0, 1fr); }
    .bbt-pair { grid-template-columns: minmax(0, 1fr); }
    .bbt-jump { margin-left: -.25rem; margin-right: -.25rem; }
    .bb-page .bbt-jump a { padding: 0 .6rem; font-size: .85rem; }
}
@media (max-width: 480px) {
    .bbt-attr { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .45rem .4rem; }
    .bbt-attr dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
    .bbt-attrs { padding: .9rem .8rem .7rem; }
    .bbt-stepper output { width: 7.4rem; }
    .bbt-hline .bbt-heights__label { width: 5.6rem; }
    .bbt-hbar { grid-template-columns: 4.2rem minmax(0, 1fr) 3.8rem; gap: .5rem; }
    .bbt-hero { padding: .8rem; }
    .bbt-lv__pips { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; }
    .bbt-pip { height: 2.1rem; font-size: .85rem; }
}