/* Skin 5 (Nov 3, 2026; David's feedback on skin 4 + Myrddin's art-direction/v5/UPGRADE-V5.md): chunky relief stone
   with a soft shine on the top panel, subtler stone-coloured text plates, a lighter (cream-washed) vellum with thin
   note halos, ONE weathered rune ring behind the Volume knob that never touches a knob, label or value, no rune or
   constellation marks over any control panel, chunky stone rims above and below the keys, a cracked star-chart lane
   floor, and a layout that tightens as the window gets shorter (fit5.js then scales the whole page uniformly, if
   still needed, so it fits one screen). Loaded after skin4.css. Look only: no function changes, keys keep their
   positions relative to the lane, the hands strip is not restyled. Nothing new animates. */
:root{
  --stone4:url("skin5/stone-relief.webp");
  --stone4-light:linear-gradient(rgba(8,10,24,.16),rgba(8,10,24,.24));
  --plate:rgba(24,29,48,.9);                                   /* stone-coloured, not black */
  --plate-soft:0 0 0 2px var(--plate),0 0 6px 4px rgba(24,29,48,.5);   /* 2 px of plate, then a feathered edge */
  --kb-top:14px; --kb-bot:14px;
}

/* ---------- stone: chunky relief tile; the top panel gets Myrddin's soft shine from the upper left ---------- */
header.console,#recBar,#midiBar,#quizBar,.banner,.panel,#summary,#quizSummary,.piano-notice,.console-row,#laneWrap,.kb-frame{
  background:var(--stone4-light),var(--stone4) 0 0/640px}
header.console{background:url("skin5/gloss.webp") left top/100% 100% no-repeat,var(--stone4-light),var(--stone4) 0 0/640px;background-blend-mode:screen,normal,normal}
header.console,#recBar,#midiBar,#quizBar,.kb-frame,#laneWrap{
  box-shadow:inset 0 2px 0 rgba(190,205,245,.34),inset 2px 0 0 rgba(170,185,235,.16),inset 0 -3px 0 rgba(0,0,0,.55),inset -2px 0 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(10,12,28,.6),0 6px 14px rgba(0,0,0,.6),0 1px 0 rgba(0,0,0,.9)}
#recBar.recording{background:linear-gradient(180deg,rgba(60,20,34,.5),rgba(40,14,24,.6)),var(--stone4) 0 0/640px}
.console-row{background:transparent}                            /* one continuous slab with the header */

/* ---------- no rune / constellation / moon marks over the control panels (David: they collided with the knobs) ---------- */
header.console::before,.console-row::before,#recBar::before,#quizBar::before,#midiBar::before,.kb-frame.rune-frame::before{display:none}
.console-row .vdivider{background:none}
.knobs{background:none}
.knob::after{display:none}                                     /* rings: only the Volume ring below */
/* brass plaque, moon and moon-phase row: only in the band above the panel (never over a control) */
@media (min-width:761px){
  header.console::after{top:-26px;height:26px;background:url("skin/brass-plaque.webp") center top/100px 24px no-repeat,url("sprites/moon-star.svg") top 0 right 14px/24px no-repeat,
    url("skin/moon-phases-skin.svg") bottom 2px left calc(50% + 120px)/110px 10px no-repeat}
}
@media (min-width:761px) and (max-height:859px){
  header.console::after{display:none}                          /* brass plaque and moon row: decoration, dropped when short */
  header.console .nameplate{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* title kept for screen readers */
  header.console{margin-top:8px}
}

/* ---------- text plates: subtler (stone-coloured, feathered, rounded) ---------- */
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){
  border-radius:8px;text-shadow:0 1px 0 #000,0 0 4px #000}
#midiStatus,#serverStatus,#recMsg{background-color:rgba(24,29,48,.96)}
#serverStatus:not(:empty),#recMsg:not(:empty){display:inline-block;padding:1px 4px}   /* the plate covers the whole line, also on a scaled page */

/* ---------- knobs: dark well with ticks; ONE weathered rune ring behind the Volume knob ---------- */
.knob::before{border:2px solid #0b0e1c;background:radial-gradient(circle,#0c0f1e 0 60%,#171c36 61%) padding-box,linear-gradient(#0b0e1c,#0b0e1c) border-box;
  box-shadow:inset 0 6px 10px rgba(0,0,0,.9),0 1px 0 rgba(170,185,235,.24),0 3px 8px rgba(0,0,0,.5)}
header .knobs{--ring:1;--lift:0px}
header .knobs .knob-wrap:nth-child(2) .knob::after{display:block;background:url("skin5/rune-ring.webp") center/100% 100% no-repeat;
  inset:calc(var(--size) * (1 - var(--ring)) / 2);filter:none;opacity:.95}
header .knobs .knob-wrap .label{margin-top:calc(4px + var(--lift))}   /* labels sit below the ring, all three level */
/* computer screens outside Game: knob size (--ks) and ring follow the window height */
@media (min-width:761px){
  body:not(.mode-game) header .knobs{--ks:60px;--ring:1.75;--lift:calc(var(--ks) * (var(--ring) - 1) / 2 + 6px);gap:calc(var(--ks) * 1.1);padding-left:12px}
  body:not(.mode-game) header .knob{--size:var(--ks)}
  body:not(.mode-game) header .knobs .knob-wrap:nth-child(2){margin:0}
  body:not(.mode-game) header .console-row{padding-top:calc(60px * (1.75 - 1) / 2 + 10px);padding-bottom:6px}
}
@media (min-width:761px) and (min-height:960px){
  body:not(.mode-game) header .knobs{--ks:72px;--ring:2.2}
  body:not(.mode-game) header .console-row{padding-top:calc(72px * (2.2 - 1) / 2 + 10px)}
}
@media (min-width:761px) and (max-height:799px){
  body:not(.mode-game) header .knobs{--ks:52px;--ring:1;--lift:0px;gap:28px}
  body:not(.mode-game) header .knobs .knob-wrap:nth-child(2) .knob::after{display:none}
  body:not(.mode-game) header .console-row{padding-top:6px;padding-bottom:6px}
  body:not(.mode-game) header .knob-wrap{flex-direction:row;gap:8px}
  body:not(.mode-game) header .knob-wrap .label{margin:0}
}
/* Game: labels beside the knobs; on tall windows the Volume ring sits between its knob and its label */
body.mode-game header .knobs .knob-wrap:nth-child(2) .knob::after{display:none}
@media (min-width:761px) and (min-height:900px){
  body.mode-game header .knobs{--ring:1.7;gap:30px}
  body.mode-game header .knobs .knob-wrap:nth-child(2) .knob::after{display:block}
  body.mode-game header .knobs .knob-wrap:nth-child(2) .knob{margin:0 calc(56px * .35 + 8px)}
  body.mode-game header .knobs .knob-wrap .label{margin-top:0}
  body.mode-game header .console-row{padding-top:calc(56px * .35 + 8px);padding-bottom:calc(56px * .35 + 8px)}
}
#testInput .knob::after,.srow .knob::after,.knob.small::after{display:none}
@media (max-width:760px){header .knobs .knob-wrap:nth-child(2) .knob::after{display:none}header.console::after{display:none}}   /* phones: knobs fill the row, no room for a ring that touches nothing */   /* typing-velocity and settings knobs stay plain */

/* ---------- keyboard: chunky raised stone rim above and below the keys (padding only) ---------- */
.kb-frame{padding-top:var(--kb-top);padding-bottom:var(--kb-bot);
  background:url("skin5/keybed-rim-top.webp") left top/auto var(--kb-top) repeat-x,url("skin5/keybed-rim-bottom.webp") left bottom/auto var(--kb-bot) repeat-x,
    var(--stone4-light),var(--stone4) 0 0/640px}
body.mode-game .kb-frame{--kb-top:14px;--kb-bot:14px}
@media (min-width:761px) and (min-height:960px){.kb-frame,body.mode-game .kb-frame{--kb-top:20px;--kb-bot:18px}}
@media (max-height:839px) and (min-width:561px){body.mode-game .kb-frame{--kb-top:12px;--kb-bot:12px}body.mode-game #keyboardWrap{margin-top:6px}}
@media (max-width:560px){.kb-frame{--kb-top:10px;--kb-bot:10px}body.mode-game .kb-frame{--kb-top:8px;--kb-bot:8px}}

/* ---------- lane: cracked stone floor with a faint star chart, set deep ---------- */
#lanes{box-shadow:inset 0 14px 22px rgba(0,0,0,.92),inset 0 -4px 10px rgba(0,0,0,.6),inset 8px 0 14px rgba(0,0,0,.7),inset -8px 0 14px rgba(0,0,0,.7),
    inset 0 0 0 3px #0d1124,0 1px 0 rgba(170,185,235,.35);
  background:linear-gradient(180deg,rgba(138,152,255,0) 72%,rgba(138,152,255,.06) 90%,rgba(138,152,255,.14) 100%),
    url("skin5/lane-floor.webp") center top/100% auto repeat-y,#141a33}

/* ---------- vellum: cream wash baked into the image, thin halos only ---------- */
#staff{background:url("skin5/vellum-light.webp") center/100% 100% no-repeat;padding:4px 0 12px}   /* the miss mark under the stave stays clear of the darker torn edge */
#staff .vf-notehead,#staff .vf-stem,#staff .vf-flag,#staff text,#staff .vf-clef{filter:drop-shadow(0 0 1px #fcf6e6) drop-shadow(0 0 1px #fcf6e6)}
#staff text{filter:drop-shadow(0 0 1px #fcf6e6) drop-shadow(0 0 1px #fcf6e6) drop-shadow(0 0 1px #fcf6e6)}   /* small numbers and the red miss mark need a little more */

/* ---------- shorter windows: tighter panels (fit5.js scales the rest uniformly) ---------- */
@media (min-width:761px) and (max-height:959px){
  header.console{padding-top:10px}
  #recBar,#midiBar,#quizBar{padding-top:5px;padding-bottom:5px;margin-top:6px}
  main{padding-top:6px;padding-bottom:8px}
  #staff{margin-top:2px}
  #keyboardWrap{margin-top:8px}
  #legend{margin-top:6px}
  #testInput{margin-top:8px}
}
@media (min-width:761px) and (max-height:799px){
  #midiBar .hint{font-size:12px;line-height:1.3}
  #instruction{margin-top:0}
}

/* ---------- one screen: Game pins the hands to the bottom of the window, so the colour key and the "No keyboard
   handy?" row move above the lane there (same content, shown first) ---------- */
@media (min-width:761px){
  body.mode-game main{display:flex;flex-direction:column}
  body.mode-game main>#legend,body.mode-game main>#testInput{order:-1}
  body.mode-game main>#legend{margin:0 4px 4px}
  body.mode-game main>#testInput{margin:0 0 6px}
}
@media (min-width:761px) and (max-height:799px){#recBar{padding-top:3px;padding-bottom:3px}}
@media (min-width:761px){body.mode-game main{padding-bottom:0}}   /* the app pins the hands near the window bottom in Game */
/* the credits line (web builds): tighter; in Game the app pins the hands to the window bottom, so the footer line is
   not shown there (the same credits stay in Settings, and in every other mode) */
@media (min-width:761px){
  #credits{margin:4px 14px 4px;font-size:11px;line-height:14px}
  body.mode-game #credits{display:none}
}
/* Free play (David's screen: the empty grand staff filled the width and ~190 px of height): on computer screens the
   staff is drawn at most 200 px tall, keeping its proportions, on a vellum strip only as wide as the music */
@media (min-width:761px){
  body.mode-free #staff{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding:4px 18px 12px}
  body.mode-free #staff svg{display:block;height:200px !important;width:auto !important;max-width:100%}
}