.bta-main { max-width: 860px; }
.bta-heading { text-align: center; margin-top: 14px; }
.bta-heading .game-title { justify-content: center; }
.bta-heading p, .bta-library-intro p { color: var(--ink-soft); font-weight: 600; }
#game-stage { gap: 22px; }
#bta-library, #bta-play { width: 100%; }
.bta-library-intro { text-align: center; max-width: 580px; margin: 10px auto 24px; }
.bta-eyebrow { color: var(--teal-deep); font-size: .73rem; font-weight: 800; letter-spacing: 1px; }
.bta-library-intro h2 { font: 800 1.7rem var(--font-display); margin: 10px 0; }
.bta-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bta-filters .active { background: var(--ink); color: white; }
.bta-progress, .bta-scoring { text-align: center; color: var(--ink-soft); font-size: .85rem; font-weight: 600; line-height: 1.5; }
.bta-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.bta-level { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 #22314a18; cursor: pointer; }
.bta-level:hover { transform: translateY(-2px); }
.bta-level.completed { background: #e8f7ee; }
.bta-level-icon { display: grid; place-items: center; flex: 0 0 42px; height: 46px; border-radius: 12px; background: #e7f3fb; font-size: 1.7rem; }
.bta-level-title { display: block; font: 800 .95rem var(--font-display); }
.bta-level-meta, .bta-level-stars { display: block; margin-top: 6px; font: 700 .71rem var(--font-body); color: var(--ink-soft); }
.bta-level-stars { color: #966000; letter-spacing: 2px; font-size: .95rem; }
.bta-play-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: .85rem; }
.bta-story { margin: 24px 0 18px; }
.bta-story h2 { font: 800 1.65rem var(--font-display); margin: 7px 0 10px; }
.bta-story p { font-weight: 600; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.bta-rules { margin-bottom: 18px; }
.bta-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); padding: 12px 0; font-size: .85rem; font-weight: 600; }
.bta-stats strong { color: var(--ink); margin-left: 4px; }
.bta-scene { position: relative; border: 2px solid var(--ink); border-radius: 16px; background: #f8f3e8; padding: 18px; overflow: hidden; }
.bta-scene.is-solved { animation: bta-glow .6s ease-out; }
.bta-banks { display: grid; grid-template-columns: minmax(0,1fr) 65px minmax(0,1fr); gap: 10px; align-items: stretch; }
.bta-bank { background: #e2efd7; border: 1px solid #adc49f; border-radius: 12px; padding: 10px; min-height: 180px; }
.bta-bank h3 { font-size: .76rem; margin: 0 0 10px; }
.bta-bank-items { display: flex; flex-direction: column; gap: 7px; }
.bta-person { min-height: 44px; display: flex; gap: 7px; align-items: center; width: 100%; border: 2px solid transparent; border-radius: 8px; background: #ffffffb0; color: #22314a; padding: 7px; font: 700 .78rem var(--font-body); cursor: pointer; }
.bta-person .bta-emoji { font-size: 1.5rem; flex: 0 0 26px; }
.bta-person:disabled { cursor: default; }
.bta-person[aria-pressed=true], .bta-required-traveler { border-color: #2862aa; background: #d5edff; box-shadow: 0 0 0 1px #2862aa; }
.bta-required-traveler { cursor: default; }
.bta-river { position: relative; background: repeating-linear-gradient(0deg,#65c4e9 0px,#65c4e9 16px,#a7e0f3 17px,#65c4e9 20px); border-radius: 8px; }
.bta-river.is-bridge { background: repeating-linear-gradient(0deg,#aa7a45 0px,#aa7a45 11px,#76502f 12px,#76502f 14px); border-inline: 4px solid #684b31; }
.bta-boat { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); font-size: 2.1rem; }
.bta-side-label { text-align: center; font-size: .8rem; font-weight: 700; margin: 14px 0 10px; }
.bta-cross { display: block; margin: auto; min-height: 44px; }
.bta-cross:disabled { opacity: .55; }
.bta-water-goal { text-align: center; font-weight: 800; margin: 0 0 16px; }
.bta-jugs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; text-align: center; }
.bta-jug-wrap h3 { font-size: .9rem; margin: 0 0 12px; }
.bta-jug { position: relative; isolation: isolate; height: 170px; width: min(115px,100%); margin: auto; border: 4px solid #496e89; border-top: none; border-radius: 0 0 16px 16px; background: #eaf7fd; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bta-water { position: absolute; bottom: 0; left: 0; right: 0; background: #61c4ef; border-top: 3px solid #b7edff; transition: height .25s ease; z-index: -1; }
.bta-jug-value { background: #ffffffe0; color: #22314a; font-weight: 800; padding: 5px 8px; border-radius: 8px; font-size: .95rem; }
.bta-jug-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.bta-jug-controls .pill-btn { padding: 8px 10px; font-size: .75rem; min-height: 38px; }
.bta-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bta-slot { position: relative; flex: 1 1 66px; max-width: 110px; min-height: 100px; border: 2px dashed #9bafbb; border-radius: 12px; background: #ffffff90; padding: 10px 5px; color: var(--ink); cursor: pointer; font: 700 .76rem var(--font-body); }
.bta-slot strong { display: block; margin-bottom: 6px; color: #486b87; }
.bta-slot .bta-emoji { display: block; font-size: 1.7rem; margin-bottom: 5px; }
.bta-order-items { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; justify-content: center; }
.bta-order-items .bta-person { width: auto; max-width: 180px; }
.bta-order-items .placed { background: #e7e9e8; }
.bta-order-help { text-align: center; font-size: .85rem; color: var(--ink-soft); }
.bta-draggable:not(:disabled) { touch-action: none; cursor: grab; }
.bta-dragging { opacity: .45; cursor: grabbing; }
.bta-drop-target { background: #d5edff; border-color: #2862aa; box-shadow: 0 0 0 2px #2862aa; }
.bta-drag-preview { position: fixed; z-index: 10000; pointer-events: none; transform: translate(-50%, -115%); padding: 10px 16px; border: 2px solid #2862aa; border-radius: 10px; background: #d5edff; color: #22314a; font-weight: 700; box-shadow: 0 6px 18px #22314a33; }
.bta-actions { display: flex; justify-content: center; gap: 12px; margin: 12px 0 20px; }
.bta-status { min-height: 2.8em; font-size: .9rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.5; margin: 14px 0 0; }
.bta-hint { background: #fff6d6; border: 2px solid #c9a748; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.bta-hint h3 { font-size: .9rem; margin: 0 0 7px; }
.bta-hint p { margin: 0; font-size: .9rem; line-height: 1.6; }
.bta-clue-list { padding-left: 22px; }
.bta-solution { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
.bta-solution summary { font-weight: 800; cursor: pointer; }
.bta-solution li { margin-bottom: 8px; }
.bta-win-icon { font-size: 2.5rem; }
.bta-win-stars { font-size: 2rem; color: #996100; letter-spacing: 5px; margin: 12px 0; }
#bta-win:not([hidden]) .win-card { animation: bta-appear .25s ease-out; }
@keyframes bta-appear { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bta-glow { 50% { box-shadow: 0 0 0 6px #35c4b860; } }
@media (prefers-reduced-motion:reduce) { .bta-scene.is-solved, #bta-win .win-card { animation: none; } .bta-water { transition: none; } }
@media(max-width:560px) { .bta-levels { grid-template-columns: 1fr; } .bta-scene { padding: 12px 8px; } .bta-banks { grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); gap: 6px; } .bta-bank { padding: 7px; } .bta-person { font-size: .72rem; gap: 4px; padding: 5px; } .bta-jugs { gap: 12px; } .bta-story h2 { font-size: 1.4rem; } .bta-level { padding: 12px; } }

/* Additional riddle workspaces share the same story, hint, and completion controls. */
.bta-task-heading { text-align: center; font-weight: 800; line-height: 1.5; margin: 0 0 18px; }
.bta-token-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.bta-token-list .pill-btn { min-height: 42px; }
.bta-token-list [aria-pressed=true] { background: #d5edff; outline: 2px solid #2862aa; }
.bta-evidence { font-size: .88rem; line-height: 1.6; padding-left: 23px; }
.bta-evidence li { margin-bottom: 8px; }
.bta-scale-pans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bta-scale-pan { border: 3px solid #637489; border-top: none; border-radius: 0 0 24px 24px; background: #e6edf4; padding: 12px; min-height: 110px; text-align: center; }
.bta-scale-pan h3 { font-size: .9rem; margin: 0 0 8px; }
.bta-scale-off { border: 2px dashed #637489; border-radius: 12px; padding: 12px; margin-top: 16px; min-height: 90px; text-align: center; }
.bta-scale-off h3 { font-size: .9rem; margin: 0 0 8px; }
.bta-scale-pan .bta-token-list, .bta-scale-off .bta-token-list { min-height: 48px; }
.bta-drop-help { color: var(--ink-soft); font-size: .8rem; }
.bta-light-board { display: grid; gap: 10px; max-width: 360px; margin: 20px auto; }
.bta-light { aspect-ratio: 1; min-height: 48px; border: 3px solid #596579; border-radius: 14px; background: #253148; color: #a9b6ca; font-size: clamp(1.5rem,6vw,2.5rem); cursor: pointer; }
.bta-light.is-lit { background: #ffe08a; border-color: #b47a19; color: #704800; box-shadow: inset 0 0 14px #fff5cb; }
.bta-light:focus-visible { outline: 3px solid #2862aa; outline-offset: 3px; }
.bta-light:disabled { cursor: default; }
.bta-scale-pan p { font-size: .8rem; line-height: 1.5; }
.bta-scale-log, .bta-scale-answer { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.bta-scale-log h3, .bta-scale-answer h3 { margin: 0 0 10px; font-size: 1rem; }
.bta-scale-answer .bta-token-list { justify-content: flex-start; }
.bta-speakers { display: grid; gap: 12px; margin-bottom: 18px; }
.bta-speaker { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.bta-speaker h3 { font-size: 1rem; margin: 0 0 8px; }
.bta-speaker blockquote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid #35c4b8; font-size: .9rem; line-height: 1.5; }
.bta-speaker .bta-token-list { justify-content: flex-start; margin-bottom: 0; }
.bta-room-grid { display: grid; gap: 10px; max-width: 420px; margin: auto; }
.bta-room { min-height: 64px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; }
.bta-room:disabled { opacity: .55; cursor: default; }
.bta-room.current { opacity: 1; background: #d2edff; }
.bta-connections { margin-top: 12px; font-size: .85rem; line-height: 1.7; }
.bta-connections summary { cursor: pointer; font-weight: 800; }
.bta-connections ul { columns: 2; padding-left: 22px; }
.bta-sandglass { display: grid; gap: 10px; place-items: center; padding: 16px 0; }
.bta-sand-icon { display: block; font-size: 4rem; }
.bta-code-slots { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 12px; margin-bottom: 16px; }
.bta-code-position { background: #ffffffb0; border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.bta-code-position h3 { margin: 0; font-size: .8rem; }
.bta-code-digit { display: block; font-size: 1.8rem; margin: 8px 0; }
.bta-code-position .bta-token-list { gap: 5px; margin: 8px 0 0; }
.bta-code-position .pill-btn { padding: 6px 10px; min-height: 36px; }
.bta-clue-table, .bta-match-table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: .85rem; }
.bta-clue-table th, .bta-clue-table td, .bta-match-table th, .bta-match-table td { border: 1px solid #becbd2; text-align: center; padding: 9px 5px; }
.bta-clue-table th, .bta-match-table th { background: #e6edf4; color: #22314a; }
.bta-table-scroll { overflow-x: auto; }
.bta-match { min-width: 38px; min-height: 38px; border: 1px solid #b2c1cb; border-radius: 6px; font-size: 1.2rem; font-weight: 800; background: var(--surface); color: var(--ink); cursor: pointer; }
.bta-match.yes { background: #d8f3df; color: #24704a; }
.bta-swap-tiles { display: grid; gap: 5px; }
.bta-swap-tile { border: 2px solid var(--ink); border-radius: 8px; background: #d6f4e9; color: var(--ink); padding: 12px 2px; min-height: 65px; cursor: pointer; font-size: clamp(.7rem,2vw,1.2rem); }
.bta-swap-tile.R { background: #ffe0b4; }.bta-swap-tile.empty { background: transparent; border-style: dashed; }
.bta-swap-tile:disabled { cursor: default; }.bta-swap-tile:not(:disabled) { box-shadow: 0 0 0 2px #35c4b8; }
.bta-route-map { position: relative; height: 290px; max-width: 460px; margin: auto; }
.bta-route-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bta-route-map line { stroke: #8a7358; stroke-width: 1.5; }.bta-route-map line.used { stroke: #35a47b; stroke-dasharray: 2 2; }
.bta-island { position: absolute; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); background: #ddebce; color: var(--ink); font-weight: 800; cursor: pointer; }
.bta-island.current { background: #ffd35c; }.bta-island:disabled { cursor: default; }
.bta-route-bridges { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.bta-route-bridges .pill-btn { font-size: .78rem; padding: 7px 12px; }
.bta-number-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0; }
.bta-number-tile { min-width: 64px; min-height: 64px; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); color: var(--ink); font: 800 1.5rem var(--font-display); cursor: pointer; }
.bta-number-tile.active { background: #d5edff; border-color: #2862aa; box-shadow: 0 0 0 2px #2862aa; }
.bta-number-tile:focus-visible { outline: 3px solid #2862aa; outline-offset: 3px; }
.bta-number-ops { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bta-number-ops .pill-btn { min-width: 52px; min-height: 48px; font-size: 1.4rem; }
.bta-number-tile:disabled { cursor: default; }
@media(max-width:440px) { .bta-filters { gap: 5px; }.bta-filters .pill-btn { font-size: .73rem; padding: 7px 10px; }.bta-scale-pans { gap: 10px; }.bta-code-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }.bta-match-table { font-size: .72rem; }.bta-match-table th,.bta-match-table td { padding: 5px 2px; }.bta-match { min-width: 32px; min-height: 36px; }.bta-route-map { height: 240px; }.bta-connections ul { columns: 1; } }


.bta-safe-dial { position: relative; width: min(260px,90%); aspect-ratio: 1; margin: 24px auto 10px; border: 8px solid #77879a; border-radius: 50%; background: radial-gradient(circle,#e7edf4 50%,#bcc9d7); box-shadow: 0 0 0 3px #25334b; }
.bta-safe-tick { position: absolute; transform: translate(-50%,-50%); color: #25334b; font-weight: 800; font-size: 1rem; }
.bta-safe-tick.current { background: #ffe39a; outline: 2px solid #b47c20; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.bta-safe-needle { position: absolute; top: 20%; left: calc(50% - 2px); width: 4px; height: 30%; transform-origin: center bottom; background: #c33844; border-radius: 3px; }
.bta-safe-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #34455e; font-size: 1.8rem; }
.bta-safe-reading { text-align: center; font-weight: 800; }
.bta-safe-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bta-safe-stops { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; list-style: none; }
.bta-safe-stops li { padding: 8px 10px; background: #e8edf4; border: 2px solid #b5c3d3; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.bta-safe-stops li.current { background: #fff2ce; border-color: #b47c20; }