/* Behavioral addiction lesson. Everything scoped under .ba-*. */

.ba-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ba-hero { width: min(92%, 340px); }
.ba-hero.ba-small { width: min(60%, 220px); }
.ba-hero img { width: 100%; display: block; }
.ba-cap { font: 700 13px var(--sans); color: var(--dim); text-align: center; }

/* the gamblers' signs */
.ba-signs { width: min(100%, 330px); display: flex; flex-direction: column; gap: 6px; }
.ba-signs span { font: 600 14px var(--sans); color: var(--text); padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.ba-signs span.on { opacity: 1; transform: none; }
.ba-sc.filed .ba-signs span { border-color: rgba(252,192,80,.5); }

/* the survey */
/* 10 by 10, packed so it reads as a crowd: at full width the column pitch is three figures wide and the grid reads as stripes. Its height is capped by the Sam screen, which also shows all seven signs. */
.ba-sc { --ba-row: 18px; }
.ba-grid { transform-origin: 50% 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1); width: calc(var(--ba-row) * 13); max-width: 100%; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: var(--ba-row); gap: 2px 0; }
.ba-grid i { position: relative; display: grid; place-items: center; height: var(--ba-row); color: rgba(234, 227, 215, .32); transition: color .25s, opacity .25s, transform .25s; }
.ba-grid i svg { display: block; height: var(--ba-row); width: calc(var(--ba-row) * .75); fill: currentColor; overflow: visible; }
.ba-grid i.tr svg { stroke: var(--red); stroke-width: 1.6; paint-order: stroke; }
.ba-grid i.tr { color: rgba(216, 85, 85, .55); }
.ba-grid i.on { color: var(--gold); }
/* Sam: ringed and hollow until the answer, since gold gives the answer away and grey gives the wrong one */
.ba-grid i.ba-sam svg { fill: none; stroke: #fff; stroke-width: 1.5; }
.ba-grid i.ba-sam::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ba-row) + 6px); height: calc(var(--ba-row) + 6px); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--violet-bright); }
.ba-grid i.ba-sam.ba-hit { color: var(--gold); }
.ba-grid i.ba-sam.ba-hit svg { fill: currentColor; stroke: none; }
.ba-grid i.ba-hit { animation: baHit .5s backwards; }
@keyframes baHit { 40% { transform: scale(1.8); } }
.ba-grid.ba-pop i { animation: baPop .35s cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes baPop { from { opacity: 0; transform: translateY(6px) scale(.4); } }
.ba-grid.ba-lg { transform: scale(1.35); }
.ba-grid.ba-solved i:not(.tr) { opacity: .3; }
.ba-cap em { font-style: normal; }
.ba-key-tr { color: var(--red); }
.ba-key-sam { color: var(--violet-bright); }
.ba-read { display: flex; gap: 14px; justify-content: center; font: 600 13.5px var(--sans); color: var(--dim); padding: 1px 14px; border-radius: 12px; border: 1px solid var(--line); transition: border-color .3s; }
.ba-read b { font: 700 15px var(--mono); color: var(--text); }
.ba-read.ba-good { border-color: var(--mint); }
.ba-read.ba-good b { color: var(--mint); }
/* the survey's signs: shown from the first count, tappable only while fixing it */
.ba-survey { width: 100%; display: grid; gap: 3px; }
.ba-sk { font: 700 13px var(--sans); color: var(--dim); text-align: center; }
.ba-sk b { color: var(--text); }
.ba-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
.ba-chip { min-height: 0; padding: 4px 8px; border-radius: 10px; font: 600 12.5px var(--sans); line-height: 1.2; color: var(--dim); background: transparent; border: 1px dashed var(--line-strong); text-decoration: line-through; transition: color .2s, border-color .2s, background .2s, min-height .2s; }
.ba-chip:disabled { cursor: default; opacity: 1; }
.ba-chip.on { color: var(--text); background: var(--surface); border: 1px solid rgba(252,192,80,.55); text-decoration: none; }
.ba-chip.ba-mine { border: 2px solid var(--violet-bright); }
.ba-live .ba-chip { min-height: 44px; cursor: pointer; }
.ba-live .ba-chip.on { border-color: var(--gold); }

/* the list */
.ba-list { width: min(100%, 330px); display: flex; flex-direction: column; gap: 6px; }
.ba-lt { font: 700 13px var(--sans); color: var(--dim); margin-top: 6px; }
.ba-li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ba-li b { font: 700 14.5px var(--sans); color: var(--text); }
.ba-li span { font: 600 13px var(--mono); color: var(--dim); }
.ba-li.yes { border-color: rgba(252,192,80,.5); }
.ba-li.no { border-style: dashed; }
.ba-li.no b { color: var(--dim); font-weight: 600; }

@media (max-height: 700px) {
  .ba-hero { width: min(78%, 270px); }
  .ba-hero.ba-small { width: min(44%, 160px); }
  .ba-signs span { padding: 6px 10px; font-size: 13.5px; }
  .ba-sc { --ba-row: 12px; gap: 6px; }
  .ba-grid.ba-lg { transform: scale(1.8); }
  .ba-chip { font-size: 12px; }
  .ba-live .ba-chip { min-height: 44px; }
}