/* Skin 7 (Nov 4, 2026; Myrddin's review of skin 6): deep slate-blue stone with silver crack lips, the star-chart lane
   floor set deep in the stone, and the three knobs as a centred row in the middle of the top panel with the weathered
   rune ring behind Volume. Loaded after skin6.css. Look and layout only: no function change, key positions unchanged,
   the hands strip is not restyled, nothing new animates. */

/* ---------- 1. stone: one slate tile with its silver crack lips baked in (skin 6's separate lip layer is dropped) ---------- */
:root{--stone4:url("skin7/stone-slate.webp");--lips:none 0 0/768px}

/* ---------- 2. lane: Myrddin's star-chart floor at full detail (cracks, faint constellation lines, capped sparkles),
   tiled instead of one stretched copy, set deeper in the stone. A still image: nothing flashes or moves. ---------- */
#lanes{background:linear-gradient(180deg,rgba(138,152,255,0) 72%,rgba(138,152,255,.06) 90%,rgba(138,152,255,.14) 100%),
    url("skin7/lane-starchart.webp") 0 0/448px auto repeat,#141a33;
  box-shadow:inset 0 18px 26px rgba(0,0,0,.95),inset 0 -4px 10px rgba(0,0,0,.6),inset 12px 0 16px rgba(0,0,0,.75),inset -12px 0 16px rgba(0,0,0,.75),
    inset 0 0 0 3px #0d1124,0 1px 0 rgba(170,185,235,.35)}
@media (max-width:760px){#lanes{background-size:auto,300px auto,auto}}

/* ---------- 3. the knobs as a centred row in the middle of the top panel (computers 1200 px and wider), the weathered
   rune ring behind Volume centred on it, as in Myrddin's target. The panel's grid has three columns: the same width
   left and right of the knob row, so the knobs sit at the panel's centre whatever the controls are. Left: the tabs,
   the lesson list, then Loop, Repeat (or the piano-sound switch in Game) and Settings; right: the game controls
   (Game) or the piano-sound switch with the record bar under it (the other modes). Grid placement only: same
   controls, same order for the keyboard and screen readers. ---------- */
@media (min-width:1200px){
  #top{--cg:20px}
  header.console{grid-template-columns:minmax(0,1fr) var(--kcol) minmax(0,1fr);grid-template-rows:repeat(3,auto);column-gap:var(--cg);row-gap:4px}
  header.console>.seg{grid-area:1/1;justify-self:start}
  header.console>#exerciseSelect{grid-area:2/1;justify-self:start;max-width:100%;margin:0}
  header.console>.loop{grid-area:3/1;justify-self:start}
  header.console>#repeatBtn{grid-area:3/1;justify-self:center}
  header.console>#settingsBtn{grid-area:3/1;justify-self:end}
  body:is(.mode-free,.mode-quiz) header.console>#settingsBtn{grid-area:2/1;justify-self:start}
  header.console>.piano-quick{grid-area:1/3;justify-self:start;margin:0}
  body.mode-game header.console>.piano-quick{grid-area:3/1;justify-self:center}
  #top header .knobs{grid-area:1/2/4/3;justify-self:center;align-self:start}
  header.console>#gameBar{grid-area:1/3/4/4;align-self:center;margin:0;flex-wrap:wrap}
  header.console>.console-row>#factCard{grid-area:4/1/5/2;margin:6px 0 0}
  body:not(.mode-game) #top>header.console{grid-template-rows:repeat(3,auto)}
  body:not(.mode-game) #top>#recBar{flex-wrap:wrap;height:auto;row-gap:2px;align-content:end;margin:0 31px 10px calc(50% + var(--kcol) / 2 + var(--cg))}
  body:not(.mode-game) #recBar>#serverStatus,body:not(.mode-game) #recBar>#recMsg{flex:1 1 100%}
}