/* The board keeps its full column width; analysis scrolls below on short screens. */
button { min-height:44px; min-width:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.language { display:flex; justify-content:flex-end; gap:6px; padding:8px 14px; position:relative; z-index:40; background:#0f0e0d; }
.language button { border:1px solid #635236; padding:8px 12px; border-radius:4px; }
.language [aria-pressed=true] { background:#caa45a; color:#17110a; }
.welcome { position:fixed; inset:60px 0 0; z-index:30; background:#0f0e0d; display:grid; place-items:center; overflow:auto; padding:20px; }
.welcome[hidden] { display:none; }
.welcome-card { width:min(100%,520px); text-align:center; }
.welcome-card h1 { margin:22px 0 18px; font-size:clamp(32px,6vw,48px); }
.welcome-card p { color:#b9ae9b; line-height:1.6; margin:18px 0; }
.welcome-card button { background:#caa45a; color:#17110a; padding:12px 24px; border-radius:4px; font-weight:600; }
#key-art { display:flex; justify-content:center; align-items:center; height:220px; background-size:cover; border:5px ridge #caa45a; box-shadow:0 24px 60px #000; margin-bottom:30px; }
#key-art div { width:30%; height:190px; background-size:contain; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 8px 6px #000); }
/* The hosted desktop frame is often only 720px high. Reserve the language bar,
   app padding and brass frame so both home ranks remain visible together. */
@media(min-width:981px) {
  html:root { --sq:min(72px,calc((100dvh - 168px)/8)); }
  body .app { min-height:calc(100dvh - 60px); }
  body .panel { max-height:calc(100dvh - 116px); }
}
@media(max-width:980px) {
  .app { padding-top:8px; min-height:0; }
  .panel { overflow:visible; }
  .panel .head .kicker { display:none; }
  .panel .head .lede { font-size:13px; }
  .panel .head h1 { font-size:26px; }
  .head2 { flex-wrap:wrap; }
  .promo .box { gap:6px; padding:10px; }
  .promo button { width:64px; height:64px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }