/* Pipeline: the board, a column of plaques around a stone-framed board, skinned by the theme. */
.stage.pipe { justify-content: flex-start; padding: 8px 10px 10px; overflow: hidden; }
.pipe, .pipe button { font-family: var(--script-font, var(--skin-font)); }
/* the board */
.boardframe { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: var(--skin-radius); background: var(--skin-panel); border: 3px solid var(--skin-trim, var(--skin-frame)); box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15); }
canvas#grid { display: block; border-radius: calc(var(--skin-radius) * .6); touch-action: none; background: #16202a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
/* moods */
html[data-mood="cartoon"] .boardframe { border-width: 3px; }
html[data-mood="steel"] .boardframe { border-radius: 0; }
html[data-mood="chalk"] .boardframe { border-style: dashed; }
html.has-skin-bg .statusbar { background: rgba(8,9,14,.62); border-radius: 10px; }
@media (min-width: 900px) { .stage.pipe { padding-top: 12px; } }
/* a real desktop: the phone column opens up (the mock's layout): menu and the mascot top left, the sign centred
   and larger, the four plaques as a 2x2 block top right, the board big in the middle, and the action row gets its
   words back as pills with the hint lamp largest. Phones keep the round icon row. */
@media (min-width: 1100px) and (min-height: 640px) {
  .column { width: 100%; max-width: 1280px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: start; }
  .topbar { display: contents; }
  .topbar__btns { grid-column: 1; grid-row: 1; justify-self: start; }
  .round-btn { width: 56px; height: 56px; }
  .topbar__mascot { grid-column: 1; grid-row: 1 / 3; justify-self: start; align-self: start; margin-inline-start: 76px; margin-top: -4px; margin-bottom: 0; height: clamp(170px, 24vh, 260px); max-width: 30vw; }
  .plaque-logo { grid-column: 2; grid-row: 1; justify-self: center; justify-content: center; }
  .plaque-logo img { height: clamp(96px, 14vh, 150px); }
  .statrow { grid-column: 3; grid-row: 1 / 3; justify-self: end; grid-template-columns: repeat(2, minmax(185px, 215px)); gap: 10px; }
  .splaque { padding: 10px 14px; gap: 10px; border-radius: 16px; }
  .splaque__icon { width: 40px; height: 40px; background: none; }
  .splaque__icon svg { width: 27px; height: 27px; }
  .splaque span { font-size: 11px; }
  .splaque b { font-size: 1.35rem; }
  /* the mock paints the GRID plaque's icon in the sky tint; the others stay gold */
  .statrow .splaque:nth-child(2) .splaque__icon { color: var(--skin-tint, var(--skin-accent)); }
  #lesson-host { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
  .lesson { font-size: 17px; font-weight: 700; padding-top: 0; color: var(--skin-text); }
  html.has-skin-bg .lesson { background: none; border-radius: 0; padding: 0 12px; text-shadow: 0 2px 6px rgba(0,0,0,.65); }
  .lesson__text { display: none; }
  .boardframe { grid-column: 1 / -1; grid-row: 3; justify-self: center; align-self: stretch; min-height: 0; width: min(100%, calc(100dvh - 330px)); }
  .actions-row { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: center; align-items: center; gap: 12px; }
  .actions-row .abtn { width: auto; height: 54px; padding: 0 26px; border-radius: 27px; gap: 9px; font-size: 15px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
  .actions-row .abtn .sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
  .actions-row .abtn--hint { height: 64px; padding: 0 32px; font-size: 17px; border-radius: 32px; }
  .actions-row .abtn--round, .actions-row .abtn--desk { width: 54px; height: 54px; padding: 0; border-radius: 50%; font-size: 26px; }
  .actions-row .abtn--desk { display: inline-flex; background: linear-gradient(180deg, color-mix(in srgb, var(--skin-panel) 82%, #fff), color-mix(in srgb, var(--skin-panel) 72%, #000)); border-color: var(--skin-frame); color: #fff; }
  .actions-row .abtn--desk svg { width: 24px; height: 24px; }
  #btn-undo { order: 1; } #btn-clear { order: 2; } #btn-hint { order: 3; } #btn-prev { order: 4; } #btn-next-lvl { order: 5; } #btn-home { order: 6; } #btn-star { order: 7; }
  .statusbar, html.has-skin-bg .statusbar { grid-column: 1 / -1; grid-row: 5; justify-self: center; width: min(100%, 820px); min-height: 34px; padding: 0 12px; background: none; border: none; box-shadow: none; justify-content: center; }
  .statusbar .msg { flex: 0 1 auto; text-align: center; font-size: 13.5px; text-shadow: 0 2px 6px rgba(0,0,0,.7); max-height: 40px; }
}
/* a theme with a drawn play scene (art.stage: the room with an empty framed board painted in): on a desktop the
   scene is the whole stage and the real board is pinned into the painted frame. The numbers are that frame's
   inner rectangle in the plate (1586x992: 442,225 - 1132,775) pushed through background-size: cover by hand:
   a screen wider than the plate is height-bound (vh terms), a narrower one width-bound (vw terms). The canvas
   paints no background there (js), so the cards sit straight on the painted board, and the painted Einstein
   replaces the sprite mascot. */
@media (min-width: 1100px) and (min-height: 640px) and (orientation: landscape) {
  html.has-skin-stage .stage.pipe { background: var(--skin-stage) center / cover no-repeat; }
  html.has-skin-stage .topbar__mascot { display: none; }
  html.has-skin-stage .boardframe { position: fixed; margin: 0; padding: 6px; background: none; border: none; box-shadow: none; }
  html.has-skin-stage canvas#grid { background: transparent; box-shadow: none; }
}
@media (min-width: 1100px) and (min-height: 640px) and (orientation: landscape) and (min-aspect-ratio: 1586/992) {
  html.has-skin-stage .boardframe { left: calc(50vw - 35.383vh); top: 22.681vh; width: 69.556vh; height: 55.444vh; }
}
@media (min-width: 1100px) and (min-height: 640px) and (orientation: landscape) and (max-aspect-ratio: 1586/992) {
  html.has-skin-stage .boardframe { left: 27.869vw; top: calc(50vh - 17.087vw); width: 43.506vw; height: 34.678vw; }
}
/* the portrait companion (art.stagePortrait): a phone held upright plays inside the drawn scene - the painted
   Einstein band on top, a calm navy play zone in the middle, the desk at the bottom. The board loses its frame
   and background (the zone is painted), the level arrows yield to the mock's three rounds (the clear card
   still moves between levels), and the sprite mascot yields to the painted one. A phone on its side
   keeps the classic framed board. */
@media (orientation: portrait) {
  html.has-skin-stage-portrait .stage.pipe { background: var(--skin-stage-portrait) center / cover no-repeat; }
  html.has-skin-stage-portrait .topbar__mascot { display: none; }
  html.has-skin-stage-portrait .boardframe { background: none; border: none; box-shadow: none; padding: 2px; }
  html.has-skin-stage-portrait canvas#grid { background: transparent; box-shadow: none; }
  html.has-skin-stage-portrait .lesson, html.has-skin-bg.has-skin-stage-portrait .lesson { background: none; padding: 4px 12px 0; color: var(--skin-text); text-shadow: 0 2px 5px rgba(0,0,0,.7); }
  html.has-skin-stage-portrait .statusbar, html.has-skin-bg.has-skin-stage-portrait .statusbar { background: none; border: none; box-shadow: none; justify-content: center; }
  html.has-skin-stage-portrait .statusbar .msg { flex: 0 1 auto; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.75); }
  html.has-skin-stage-portrait #btn-prev, html.has-skin-stage-portrait #btn-next-lvl { display: none; }
  html.has-skin-stage-portrait .actions-row { display: flex; justify-content: center; align-items: center; gap: 20px; }
  html.has-skin-stage-portrait .actions-row .abtn { width: 52px; height: 52px; }
  html.has-skin-stage-portrait .actions-row .abtn--hint { width: 66px; height: 66px; }
  html.has-skin-stage-portrait #btn-undo { order: 1; } html.has-skin-stage-portrait #btn-hint { order: 2; } html.has-skin-stage-portrait #btn-clear { order: 3; }
  /* the kit HUD on phones: the icons come back (a general phone rule hides them), small enough that four
     plaques with the longest label (CONNECTED) still share a 390px row */
  html.has-skin-stage-portrait .splaque { padding: 6px 7px; gap: 4px; border-radius: 13px; }
  html.has-skin-stage-portrait .splaque__icon { display: grid; width: 16px; height: 16px; border-radius: 5px; background: none; }
  html.has-skin-stage-portrait .splaque__icon svg { width: 14px; height: 14px; }
  html.has-skin-stage-portrait .splaque span { font-size: 8px; letter-spacing: .03em; }
  html.has-skin-stage-portrait .splaque b { font-size: .95rem; }
  html.has-skin-stage-portrait .statrow .splaque:nth-child(2) .splaque__icon { color: var(--skin-tint, var(--skin-accent)); }
}
/* the narrowest phones: four plaques with icons no longer fit, the labels keep the row */
@media (orientation: portrait) and (max-width: 374px) {
  html.has-skin-stage-portrait .splaque__icon { display: none; }
}
@media (max-height: 600px) { .plaque-logo { display: none; } #lesson-host { display: none; } .topbar__mascot { display: none; } }
@media (max-width: 420px) { .actions-row { gap: 6px; grid-template-columns: 38px 1fr 1fr 1fr 38px; } }
/* a phone on its side: the board takes the full height on the left and the plaques stack beside it (in one column
   the board shrank to a fifth of the screen, too small to draw on) */
@media (orientation: landscape) and (max-height: 520px) {
  .stage.pipe { padding: 8px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .column { width: 100%; max-width: 900px; display: grid; grid-template-columns: min(calc(100dvh - 16px), calc(100vw - 290px)) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 8px 12px; }
  .boardframe { grid-column: 1; grid-row: 1 / -1; padding: 6px; }
  .topbar { grid-column: 2; grid-row: 1; }
  .topbar__mascot { display: none; }
  .statrow { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, 1fr); }
  #lesson-host { display: none; }
  .actions-row { grid-column: 2; grid-row: 4; grid-template-columns: 34px repeat(3, minmax(min-content, 1fr)) 34px; gap: 5px; }
  .actions-row .abtn { width: 38px; height: 38px; }
  .actions-row .abtn--hint { width: 44px; height: 44px; }
  .actions-row .abtn svg { width: 17px; height: 17px; flex: none; }
  .actions-row .abtn--round { width: 34px; height: 34px; font-size: 18px; }
  .statusbar { grid-column: 2; grid-row: 5; min-height: 40px; }
  .statusbar .msg { font-size: 11.5px; max-height: 40px; }
  .plaque-logo { display: flex; } .plaque-logo img { height: 44px; }
}
/* inside the app one level is played: the level arrows keep their grid cells but are not offered */
html.hosted-play #btn-prev, html.hosted-play #btn-next-lvl, html.hosted-play #btn-home { visibility: hidden; }