/* Skin 4 (Nov 3, 2026; Myrddin's review of skin 3 against David's close-up target): brighter mid blue-grey cracked
   stone with bright chiselled crack edges (Myrddin's lit tile, highlights NOT softened), text protected by small dark
   plates right behind it, darker aged vellum (Myrddin's file as is) with a cream halo only around notes, stems and
   finger numbers, a thick chiselled stone rim above and below the keys, aged ivory keys and blue-grey stone black
   keys, a deeper lane with brighter constellations and 4-point stars, and bigger carved rune rings around thin dark
   knobs. Loaded after skin3.css. Look only: no function changes, the keyboard keeps its size and key positions
   (the rim is padding around it), the hands strip below the keys is not touched, nothing new animates. */
:root{
  --stone4:url("skin4/stone-lit.webp");
  --stone3:var(--stone4);            /* any skin 3 rule left uses the lit tile (skin 3's images are no longer shipped) */
  --stone4-light:linear-gradient(rgba(8,10,20,.06),rgba(8,10,20,.16));
  --plate:rgba(9,11,22,.86);
  --plate-soft:0 0 0 3px var(--plate),0 0 7px 5px rgba(9,11,22,.5);
  --grime4:radial-gradient(ellipse at 18% 28%,rgba(0,0,0,.16),transparent 55%),radial-gradient(ellipse at 80% 72%,rgba(0,0,0,.14),transparent 50%);
  --kb-top:14px; --kb-bot:14px;
}

/* ---------- stone: lit cracked tile, light overlay ---------- */
header.console,#recBar,#midiBar,#quizBar,.banner,.panel,#summary,#quizSummary,.piano-notice{
  background:var(--grime4),var(--stone4-light),var(--stone4) center/768px}
#recBar.recording{background:linear-gradient(180deg,rgba(60,20,34,.5),rgba(40,14,24,.6)),var(--stone4) center/768px}
.console-row{background:var(--grime4),var(--stone4-light),var(--stone4) center/768px}
@media (max-width:760px){.console-row{background:var(--grime4),var(--stone4-light),var(--stone4) center/768px}}
#tapKeys{background:var(--stone4-light),var(--stone4) center/768px}

/* ---------- text on the stone: a small dark plate right behind it (no layout change: background + shadow only) ---------- */
header .scorebox>span,#nextLine,.knob-wrap .label,.knob-wrap output,header .switch,#quizBar .switch,#midiBar>label,#midiStatus,#midiBar .hint,
.rec-name .lbl,.rec-name:not(:has(.lbl)),#recMsg,#serverStatus,#recTimer,#quizBar>label,#quizBar .quiz-progress,#recentTakes summary,.piano-status:not(.tap){
  background-color:var(--plate);box-shadow:var(--plate-soft);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:0 1px 2px #000}
.piano-status.tap{background:linear-gradient(rgba(138,152,255,.14),rgba(138,152,255,.14)),#0b0e1c}   /* the pill: opaque dark base */
#midiBar .hint{border-radius:6px}

/* ---------- knobs: thin dark ring with ticks, a big carved rune ring around each ---------- */
.knob::before{border:2px solid #090b14;background:radial-gradient(circle,#0a0b12 60%,#151a2a 100%) padding-box,linear-gradient(#090b14,#090b14) border-box;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(160,180,235,.2),0 3px 8px rgba(0,0,0,.55)}
.knob::after{background-image:url("skin4/knob-ring.webp")}
@media (min-width:761px){
  body:not(.mode-game) header .knob{--size:88px}
  body:not(.mode-game) .knob::after,body:not(.mode-game) .knobs .knob-wrap:nth-child(2) .knob::after{--ring:2.3}
  body:not(.mode-game) header .knobs{gap:104px;padding-left:52px}
  body:not(.mode-game) .knobs .knob-wrap:nth-child(2){margin:0}
  body:not(.mode-game) header .console-row{padding-top:48px;padding-bottom:34px}
}
/* Game: on taller screens the knob row grows 24 px so the rings can be bigger; on short screens (1280x800) it keeps
   its height so the lane, keys and hands still fit */
@media (min-width:561px) and (min-height:840px){
  body.mode-game header .console-row{padding-top:16px;padding-bottom:17px}
  body.mode-game .knob::after,body.mode-game .knobs .knob-wrap:nth-child(2) .knob::after{--ring:1.75}
  body.mode-game header .knobs{gap:34px;padding-left:16px}
}

/* ---------- lane: deeper, stone rim (its existing 10-13 px frame), brighter constellations, 4-point stars ---------- */
#laneWrap{background:var(--stone4-light),var(--stone4) center/768px}
#lanes{box-shadow:inset 0 14px 22px rgba(0,0,0,.95),inset 0 0 30px rgba(0,0,0,.55),inset 0 0 0 3px #0d1124,inset 0 0 0 4px rgba(160,180,235,.28);
  background:url("skin4/star4.svg") 9% 26%/30px no-repeat,url("skin4/star4.svg") 58% 18%/22px no-repeat,url("skin4/star4.svg") 84% 44%/34px no-repeat,
    url("skin4/star4.svg") 33% 62%/18px no-repeat,url("skin4/star4.svg") 72% 70%/16px no-repeat,
    linear-gradient(180deg,rgba(138,152,255,0) 72%,rgba(138,152,255,.07) 90%,rgba(138,152,255,.16) 100%),
    url("skin4/constellations-bright.svg") center top/600px 240px repeat-x,
    linear-gradient(180deg,rgba(6,8,18,.8),rgba(14,18,40,.88)),var(--stone4) center/768px}

/* ---------- keyboard: thick chiselled stone rim above and below the keys (padding; the keys keep their size and
   x positions), aged ivory, blue-grey stone black keys ---------- */
.kb-frame{padding-top:var(--kb-top);padding-bottom:var(--kb-bot);background:var(--stone4-light),var(--stone4) center/768px;
  box-shadow:inset 0 1px 0 rgba(160,180,235,.32),inset 0 3px 4px rgba(160,180,235,.12),inset 0 -3px 5px rgba(0,0,0,.6),inset 1px 0 0 rgba(160,180,235,.16),inset -1px 0 0 rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.65)}
body.mode-game .kb-frame{--kb-top:12px;--kb-bot:12px;padding-top:var(--kb-top);padding-bottom:var(--kb-bot)}
@media (max-height:839px) and (min-width:561px){body.mode-game .kb-frame{--kb-top:5px;--kb-bot:6px}body.mode-game #keyboardWrap{margin-top:2px}}   /* 1280x800: no spare height, so the rim above the keys comes out of the gap above the lane */
@media (max-width:560px){.kb-frame{--kb-top:8px;--kb-bot:8px}body.mode-game .kb-frame{--kb-top:6px;--kb-bot:6px}}
.kb-frame::after{top:var(--kb-top);bottom:var(--kb-bot);border-radius:2px;mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(255,248,230,0) 20%,rgba(110,80,30,.16) 100%),url("skin4/key-cracks.webp") 0 0/384px repeat;
  box-shadow:inset 0 8px 10px -5px rgba(0,0,0,.85),inset 2px 0 4px rgba(0,0,0,.5),inset -2px 0 4px rgba(0,0,0,.5),0 0 0 1px #0d1124,0 0 0 2px rgba(160,180,235,.25),0 -3px 0 1px rgba(0,0,0,.45)}
body.mode-game .kb-frame::after{top:var(--kb-top);bottom:var(--kb-bot)}
#keyboard .white{fill:#efe4cc;stroke:#4e3f2a}
#keyboard .black{fill:#2a3142;stroke:#56627e}
#keyboard .clabel{fill:#454a5c}                    /* C labels: >= 4.5:1 on the aged ivory */

/* ---------- vellum: Myrddin's aged ragged vellum as is; a soft cream halo only around notes, stems and numbers ---------- */
#staff{background:url("skin4/vellum-ragged.webp") center/100% 100% no-repeat}
#staff .vf-notehead,#staff .vf-stem,#staff .vf-flag,#staff text,#staff .vf-clef{filter:drop-shadow(0 0 1px #f7eed6) drop-shadow(0 0 1px #f7eed6) drop-shadow(0 0 1px #f7eed6) drop-shadow(0 0 1px #f7eed6) drop-shadow(0 0 1.5px #f7eed6) drop-shadow(0 0 3px rgba(247,238,214,.6))}

/* phones and narrow tablets: a little bigger rings, kept inside the screen; the knob row gets the room above them */
@media (max-width:760px){
  .knob::after{--ring:1.5}
  .knobs .knob-wrap:nth-child(2) .knob::after{--ring:1.8}
  header .console-row{padding-top:22px;overflow-x:clip}   /* a ring never makes the page scroll sideways */
}
@media (max-width:560px){
  body.mode-game .knob::after{--ring:1.85}
  body.mode-game .knobs .knob-wrap:nth-child(2) .knob::after{--ring:2.05}
  body.mode-game header .console-row{padding-top:26px;padding-bottom:12px}
}
/* long coloured messages can sit over a bright crack anywhere: a slightly firmer plate */
#midiStatus,#serverStatus,#recMsg{background-color:rgba(9,11,22,.93)}