/* Skin 3 (Nov 3, 2026; Myrddin's UPGRADE-V3.md, David's close-up target): ancient cracked stone with bevelled,
   chiselled panel edges, deep cracks and relief, grime and edge vignettes, a carved concentric rune ring around the
   knobs, a ragged cracked vellum staff, the note lane and keyboard set deep in the stone. Loaded after skin2.css.
   Look only: no panel changes height or place (rings, rims, recesses are shadows, filters and pseudo-elements; only
   the Volume knob moves a little sideways on computer screens outside Game, to make room for its bigger ring),
   nothing new animates, and the hands strip below the keys is not touched (it keeps the skin 2 stone).
   The cracked tile's rare bright crack-edge highlights are softened in the file itself (tools/make_skin3_assets.py)
   so every text on the stone keeps 4.5:1 against the brightest stone pixel in its own box. */
:root{
  --stone3:url("skin3/stone-cracked.webp");
  --stone3-light:linear-gradient(rgba(8,10,20,.10),rgba(8,10,20,.22));
  --grime:radial-gradient(ellipse at 20% 30%,rgba(0,0,0,.18),transparent 55%),radial-gradient(ellipse at 78% 70%,rgba(0,0,0,.16),transparent 50%),
    radial-gradient(ellipse at 52% 8%,rgba(0,0,0,.12),transparent 40%);
  --bevel:inset 0 1px 0 rgba(160,180,235,.30),inset 0 3px 4px rgba(160,180,235,.10),inset 1px 0 0 rgba(160,180,235,.16),inset -1px 0 0 rgba(0,0,0,.55),
    inset 0 -3px 5px rgba(0,0,0,.6),inset 0 0 0 5px rgba(8,10,22,.35),0 4px 10px rgba(0,0,0,.65);
  --recess:inset 0 10px 18px rgba(0,0,0,.9),inset 0 0 0 3px #131830,inset 0 0 0 4px rgba(160,180,235,.22),inset 0 -2px 0 rgba(160,180,235,.25);
  /* text a touch brighter so it stays >= 4.5:1 on the lighter, deeper-carved stone */
  --label:#d3d4e2; --muted:#c6c8d9;
}

/* ---------- stone panels: cracked tile at 768 px, light overlay, grime, bevelled chiselled lip ---------- */
header.console,#recBar,#midiBar,#quizBar,.banner,.panel,#summary,#quizSummary,.piano-notice{
  background:var(--grime),var(--stone3-light),var(--stone3) center/768px;border-color:#070a16}
#recBar.recording{background:linear-gradient(180deg,rgba(60,20,34,.5),rgba(40,14,24,.62)),var(--stone3) center/768px}
header.console,#recBar,#midiBar,#quizBar{box-shadow:var(--bevel)}
header.console{box-shadow:inset 0 0 40px rgba(0,0,0,.45),var(--bevel)}            /* aged: darker toward the edges */

/* knob row: the same stone (no dark band any more), a carved rune groove between the rows */
.console-row{position:relative;background:var(--constellations) right -60px center/600px 240px no-repeat,var(--grime),var(--stone3-light),var(--stone3) center/768px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.75),inset 0 2px 0 rgba(160,180,235,.16)}
.console-row::before{content:"";position:absolute;left:40px;right:40px;top:3px;height:6px;pointer-events:none;opacity:.5;
  background:url("skin/rune-border.svg") left top/96px 6px repeat-x;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
@media (max-width:760px){.console-row{background:var(--grime),var(--stone3-light),var(--stone3) center/768px}}
.knobs{background:none}                         /* the orrery sketch gives way to the carved rings */

/* ---------- knobs: a carved concentric rune ring behind each knob (Volume biggest), knob in its own dark well ---------- */
.knob{isolation:isolate}
.knob::after{content:"";position:absolute;z-index:-1;pointer-events:none;--ring:1.45;inset:calc(var(--size) * (1 - var(--ring)) / 2);
  background:url("skin3/knob-ring.webp") center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.65))}
.knobs .knob-wrap:nth-child(2) .knob::after{--ring:1.75}
.knob-wrap .label,.knob-wrap output{position:relative;z-index:1}   /* labels stay above the rings */
@media (min-width:761px){body:not(.mode-game) .knobs .knob-wrap:nth-child(2){margin:0 36px}body:not(.mode-game) header .knobs{padding-left:8px}}   /* room for the big ring (sideways only) */
body.mode-game .knob::after{--ring:1.3}
body.mode-game .knobs .knob-wrap:nth-child(2) .knob::after{--ring:1.4}   /* Game: the knob row is slim, rings stay inside it */
@media (max-width:560px){body.mode-game .knob::after{--ring:1.5}body.mode-game .knobs .knob-wrap:nth-child(2) .knob::after{--ring:1.65}}   /* phone: room above and below */
.srow .knob::after,.knob.small::after{display:none}   /* settings knobs stay plain */

/* ---------- brass plaque: a rivet at each end ---------- */
header.console::after{background:radial-gradient(circle,#f3dc9c 0 1.2px,#8a6a2e 2.2px,rgba(30,20,8,.8) 3px,transparent 3.6px) calc(50% - 54px) 11px/8px 8px no-repeat,
  radial-gradient(circle,#f3dc9c 0 1.2px,#8a6a2e 2.2px,rgba(30,20,8,.8) 3px,transparent 3.6px) calc(50% + 54px) 11px/8px 8px no-repeat,
  url("skin/brass-plaque.webp") center top/124px 30px no-repeat,url("sprites/moon-star.svg") top 0 right 14px/28px no-repeat,
  url("skin/moon-phases-skin.svg") bottom 0 left calc(50% + 140px)/120px 11px no-repeat}
@media (max-width:560px){header.console::after{background:url("skin/brass-plaque.webp") top 0 right 46px/100px 24px no-repeat,url("sprites/moon-star.svg") top 0 right 10px/24px no-repeat}}

/* ---------- note lane and keyboard set deep in the stone ---------- */
#laneWrap{background:var(--stone3-light),var(--stone3) center/768px;box-shadow:var(--bevel)}
#lanes{box-shadow:var(--recess);
  background:radial-gradient(circle,rgba(190,170,255,.9) 0 1px,rgba(190,170,255,.25) 2px,transparent 4px) 12% 30%/9px 9px no-repeat,
    radial-gradient(circle,rgba(190,170,255,.9) 0 1px,rgba(190,170,255,.25) 2px,transparent 4px) 63% 22%/9px 9px no-repeat,
    radial-gradient(circle,rgba(190,170,255,.9) 0 1px,rgba(190,170,255,.25) 2px,transparent 4px) 87% 48%/9px 9px no-repeat,
    linear-gradient(180deg,rgba(138,152,255,0) 72%,rgba(138,152,255,.07) 90%,rgba(138,152,255,.16) 100%),
    var(--constellations) center top/600px 240px repeat-x,
    linear-gradient(180deg,rgba(6,8,18,.82),rgba(14,18,40,.9)),var(--stone3) center/768px}
.kb-frame{background:var(--stone3-light),var(--stone3) center/768px;box-shadow:var(--bevel)}
.kb-frame::after{box-shadow:inset 0 9px 12px -5px rgba(0,0,0,.85),inset 0 0 0 1px #131830,inset 0 -2px 0 rgba(160,180,235,.25),inset 2px 0 4px rgba(0,0,0,.55),inset -2px 0 4px rgba(0,0,0,.55),
  0 0 0 1px rgba(160,180,235,.22),0 0 0 2px rgba(0,0,0,.6)}
body.mode-game .kb-frame{box-shadow: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)}
#tapKeys{background:var(--stone3-light),var(--stone3) center/768px}

/* ---------- ragged, cracked, stained vellum (pale wash baked into the file where the notes sit) ---------- */
#staff{background:url("skin3/vellum-ragged.webp") center/100% 100% no-repeat;box-shadow:none;border-color:transparent;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}

/* thin bars full of text (MIDI line, its hints): a little more overlay; status messages in red read >= 4.5:1
   on the brighter stone (the judging colour --wrong is unchanged) */
#midiBar{background:linear-gradient(rgba(8,10,20,.34),rgba(8,10,20,.42)),var(--stone3) center/768px}
#midiStatus.error,.server-status.error,.server-status.bad,.rec-msg.error{color:#ffb3b3}
@media (max-width:560px){#recBar::before,#quizBar::before{background:url("skin/corner-rune.svg") top 2px left 2px/12px no-repeat,url("skin/corner-rune.svg") top 2px right 2px/12px no-repeat}}   /* phone: text wraps to the edges, so only the top corner runes stay */