/* The Explain Board screen (js/screens/board.js): a chalkboard in a dark wooden frame, the step strip and controls
   under it, the question box and the saved boards beside it. Landscape tablet first (1280×800); portrait tablets
   (820×1180) and phones (393×851) stack the same parts. Sizes are em of .bd, so one rule set scales; colours come
   from the theme's tokens, except the chalk itself (also in js/board.js, which draws without this file). */
.bd{--chalk:#F3EFE4;--peacock:#5CCBC7;--slate:#1B2B26;--slate2:#14211D;--wood:#4A3524;--wood2:#2E2117;
  flex:1;min-height:0;display:flex;flex-direction:column;gap:.75em;font-size:1rem}
.bd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1em;flex:none}
.bd-ttl{min-width:0}
.bd-ttl h1{font-size:1.75em;margin-top:.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-top .chips{display:flex;gap:.4em;flex-wrap:wrap;justify-content:flex-end}
.bd .eb{font-size:.66em}
.bd .chip{font-size:.72em;padding:.3em .6em}
.bd .tier{font-size:.6em;height:2.6em;padding:0 .9em}
.bd-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 19em;gap:1.3em}
.bd-left{min-height:0;display:flex;flex-direction:column;gap:.6em}
.bd-side{min-height:0;display:flex;flex-direction:column;gap:1em}

/* ── the board: as big as the space allows, always 1000 × 640 ── */
.bd-fit{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.bd-board{position:relative;width:min(calc(100cqw - 1.2em),calc((100cqh - 1.2em) * 1.5625));aspect-ratio:1000 / 640;border-radius:.5em;
  background:radial-gradient(55% 45% at 28% 30%,rgba(255,255,255,.05),transparent 70%),radial-gradient(45% 55% at 78% 72%,rgba(255,255,255,.035),transparent 70%),
    linear-gradient(160deg,var(--slate),var(--slate2));
  box-shadow:inset 0 0 2.2em rgba(0,0,0,.45),0 0 0 .5em var(--wood),0 0 0 .6em var(--wood2),0 .9em 1.8em -.4em rgba(0,0,0,.6)}
.bd-board::after{content:"";position:absolute;left:4%;right:4%;bottom:.35em;height:.5em;border-radius:1em;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(243,239,228,.07),transparent 75%)}
.bd-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.bd-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.35em;color:var(--chalk);font-weight:700;font-size:1.1em;opacity:.85}
.bd-wait span{margin-right:.3em}
.bd-wait i,.bd-steps .more i{width:.4em;height:.4em;border-radius:50%;background:currentColor;animation:bdDot 1.2s ease-in-out infinite}
.bd-wait i:nth-child(3),.bd-steps .more i:nth-child(2){animation-delay:.18s}
.bd-wait i:nth-child(4),.bd-steps .more i:nth-child(3){animation-delay:.36s}
@keyframes bdDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.2em)}}

/* ── what is being said ── */
.bd-say{flex:none;display:flex;align-items:center;gap:.8em;min-height:3.6em;padding:0 .3em}
.bd-mx{flex:none;width:3.4em;height:3.4em}
.bd-say p{flex:1;min-width:0;max-height:4.4em;overflow:auto;font-size:1.05em;line-height:1.4;font-weight:600;color:var(--paper)}
.bd-say p b{display:block;font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:.1em}

/* ── controls and the step strip ── */
.bd-bar{flex:none;display:flex;align-items:center;gap:1em;flex-wrap:wrap}
.bd-ctl{display:flex;gap:.5em}
.bd .btn{height:2.6em;padding:0 1em;font-size:.9em;border-radius:.85em;gap:.45em}
.bd .btn .ic{width:1.2em;height:1.2em}
.bd-ctl #bdPlay{min-width:7.4em}
.bd-steps{display:flex;gap:.4em;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.bd-steps button{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:var(--s1);border:2px solid var(--hair);font-weight:800;font-size:.85em;color:var(--mut);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-press)}
.bd-steps button:active{transform:scale(.92)}
.bd-steps button.done{color:var(--green);border-color:rgba(111,191,139,.45)}
.bd-steps button.on{background:var(--gold);color:var(--ink-on-gold);border-color:var(--gold);transform:scale(1.08)}
.bd-steps .more{display:flex;gap:.25em;color:var(--mut);padding:0 .3em}

/* ── ask for a board ── */
.bd-ask{display:flex;flex-direction:column;gap:.45em;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:.85em .9em .7em}
.bd-askrow{display:flex;gap:.45em}
.bd-askrow input{flex:1;min-width:0;height:2.7em;border-radius:.85em;border:2px solid var(--hair);background:var(--bg);padding:0 .85em;font-size:.95em;color:var(--paper)}
.bd-askrow input::placeholder{color:var(--mut2)}
.bd-askrow input:focus{outline:none;border-color:var(--gold)}
.bd-askrow .btn{height:auto;flex:none}
.bd-msg{min-height:1.3em;font-size:.82em;line-height:1.35;color:var(--mut);font-weight:600}
.bd-msg.off,.bd-msg.warn{color:var(--gold)}
.bd-msg.care{color:var(--paper);font-weight:700}
.bd-msg.ok{color:var(--green)}
.bd-msg.busy{color:var(--blue)}

/* ── the saved boards ── */
.bd-saved{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5em}
.bd-sh{display:flex;justify-content:space-between;align-items:baseline;gap:.6em}
.bd-note{font-size:.72em;color:var(--mut);font-weight:600}
.bd-cards{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.45em;padding:.1em .1em .4em;scrollbar-width:thin}
.bd-card{display:grid;grid-template-columns:2.3em minmax(0,1fr);grid-template-rows:auto auto;column-gap:.75em;align-items:center;text-align:left;padding:.5em .75em;border-radius:.95em;
  background:var(--s1);border:2px solid var(--hair2);box-shadow:0 .22em 0 var(--d-shadow);transition:transform var(--t-press),border-color var(--t-fast),background var(--t-fast)}
.bd-card:active{transform:translateY(.15em);box-shadow:0 .05em 0 var(--d-shadow)}
.bd-card img{grid-row:1 / span 2;width:2.3em;height:2.3em}
.bd-cn{font-weight:800;font-size:.92em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-cl{font-size:.72em;color:var(--mut);font-weight:600}
.bd-card.on{background:var(--s2);border-color:var(--gold)}
.bd-card.on .bd-cl{color:var(--gold)}
.bd-card.nudge{animation:bdNudge .6s var(--pop) both}
@keyframes bdNudge{40%{transform:translateX(.35em);border-color:var(--gold)}}

/* ── portrait: the board on top, everything else under it ── */
@media (orientation:portrait),(max-width:760px){
  .bd{font-size:16px;gap:.6em}
  .bd-main{display:flex;flex-direction:column;gap:.8em}
  .bd-left{flex:none}
  .bd-fit{flex:none;container-type:normal;padding:.6em}
  .bd-board{width:100%}
  .bd-side{flex:1;min-height:0;gap:.75em}
  .bd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:.6em}
  .bd-card{padding:.75em .85em}
  .bd-say p{max-height:8.4em}
}
/* phones */
@media (max-width:560px){
  .bd{font-size:14px;gap:.5em}
  .bd-top{align-items:center}
  .bd-ttl h1{font-size:1.4em}
  .bd-top .chips .tier{display:none}
  .bd-main{gap:.6em}
  .bd-fit{padding:.5em}
  .bd-say{min-height:3em;gap:.6em}
  .bd-mx{width:2.6em;height:2.6em}
  .bd-say p{font-size:.95em;max-height:8.4em}
  .bd-bar{gap:.6em}
  .bd .btn{height:2.5em;padding:0 .8em}
  .bd-ctl #bdPlay{min-width:6.4em}
  .bd-steps button{width:2.2em;height:2.2em}
  .bd-ask{padding:.6em .7em .5em}
  .bd-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4em}
  .bd-card{padding:.45em .55em;column-gap:.5em;grid-template-columns:1.9em minmax(0,1fr)}
  .bd-card img{width:1.9em;height:1.9em}
  .bd-cn{font-size:.84em}
}
@media (prefers-reduced-motion:reduce){.bd-wait i,.bd-steps .more i,.bd-card.nudge{animation:none}}