/* Skin 6 (Nov 3, 2026; Myrddin's review of skin 5 + art-direction/v5/UPGRADE-V5.md): stone keys in a chunky raised
   stone rim, deeper relief stone with lit crack lips and a chipped bevelled frame, bigger knobs in Game with the
   weathered Volume ring, a darker stained vellum, and tighter panels so the page needs less scaling. Loaded after
   skin5.css. Look only: no function change, key positions unchanged, the hands strip is not restyled, nothing new
   animates. */

/* ---------- 1. keys: Myrddin's stone keys (4 white and 3 black variants, fixed per key by its MIDI number; the
   patterns are in index.html's skin-defs). A held or judged key gets its result colour from the app as before (an
   inline fill, drawn instead of the stone), the next key keeps its blue. ---------- */
#keyboard :is([data-midi="21"],[data-midi="28"],[data-midi="35"],[data-midi="41"],[data-midi="48"],[data-midi="55"],[data-midi="62"],[data-midi="69"],[data-midi="76"],[data-midi="83"],[data-midi="89"],[data-midi="96"],[data-midi="103"]){fill:url(#skKeyW1)}
#keyboard :is([data-midi="23"],[data-midi="29"],[data-midi="36"],[data-midi="43"],[data-midi="50"],[data-midi="57"],[data-midi="64"],[data-midi="71"],[data-midi="77"],[data-midi="84"],[data-midi="91"],[data-midi="98"],[data-midi="105"]){fill:url(#skKeyW2)}
#keyboard :is([data-midi="24"],[data-midi="31"],[data-midi="38"],[data-midi="45"],[data-midi="52"],[data-midi="59"],[data-midi="65"],[data-midi="72"],[data-midi="79"],[data-midi="86"],[data-midi="93"],[data-midi="100"],[data-midi="107"]){fill:url(#skKeyW3)}
#keyboard :is([data-midi="26"],[data-midi="33"],[data-midi="40"],[data-midi="47"],[data-midi="53"],[data-midi="60"],[data-midi="67"],[data-midi="74"],[data-midi="81"],[data-midi="88"],[data-midi="95"],[data-midi="101"],[data-midi="108"]){fill:url(#skKeyW4)}
#keyboard :is([data-midi="22"],[data-midi="30"],[data-midi="37"],[data-midi="44"],[data-midi="51"],[data-midi="58"],[data-midi="66"],[data-midi="73"],[data-midi="80"],[data-midi="87"],[data-midi="94"],[data-midi="102"]){fill:url(#skKeyB1)}
#keyboard :is([data-midi="25"],[data-midi="32"],[data-midi="39"],[data-midi="46"],[data-midi="54"],[data-midi="61"],[data-midi="68"],[data-midi="75"],[data-midi="82"],[data-midi="90"],[data-midi="97"],[data-midi="104"]){fill:url(#skKeyB2)}
#keyboard :is([data-midi="27"],[data-midi="34"],[data-midi="42"],[data-midi="49"],[data-midi="56"],[data-midi="63"],[data-midi="70"],[data-midi="78"],[data-midi="85"],[data-midi="92"],[data-midi="99"],[data-midi="106"]){fill:url(#skKeyB3)}
#keyboard{background:#0a0d18}                                 /* the gaps between the stone keys */
#keyboard .white{stroke:#1c1912;stroke-width:.8}
#keyboard .black{stroke:#0b0d16;stroke-width:.8}
#keyboard .clabel{fill:#24262f;font-weight:700}               /* C labels: >= 4.5:1 on the stone ivory */
.kb-frame::after{background:none}                             /* skin 4's crack overlay: the stone keys carry their own cracks */
/* chunky raised stone rim above and below the keys */
.kb-frame{background:url("skin6/keybed-rim-top.webp") left top/auto var(--kb-top) repeat-x,url("skin6/keybed-rim-bottom.webp") left bottom/auto var(--kb-bot) repeat-x,
    var(--lips),var(--stone4-light),var(--stone4) 0 0/768px;background-blend-mode:normal,normal,screen,normal,normal}
@media (min-width:761px){.kb-frame{--kb-top:22px;--kb-bot:20px}body.mode-game .kb-frame{--kb-top:18px;--kb-bot:16px}}
@media (min-width:761px) and (max-height:839px){body.mode-game .kb-frame{--kb-top:14px;--kb-bot:12px}}
@media (min-width:761px) and (max-height:999px){.kb-frame{--kb-top:16px;--kb-bot:14px}}   /* short windows: a slimmer rim, the same keys */
/* phones: the drawn keys are 1.6x taller (drawn stretched downwards; widths and positions unchanged) */
@media (max-width:760px){
  #keyboard{transform:scaleY(1.6);transform-origin:50% 0;margin-bottom:calc(100% * .6 * 152 / 1250)}
  body.mode-game #keyboard{margin-bottom:calc(100% * .6 * 102 / 1250)}
  .kb-frame{--kb-top:12px;--kb-bot:12px}
}
/* the big tap keys (web build, touch screens): the same stone keys; a lit key's colour (inline) and the next key's
   blue still replace the stone */
.tk.white{background:url("skin6/key-white-1.webp") 0 0/100% 100%;border-color:#1c1912}
.tk.white:not(.target):nth-child(4n+2){background-image:url("skin6/key-white-2.webp")}
.tk.white:not(.target):nth-child(4n+3){background-image:url("skin6/key-white-3.webp")}
.tk.white:not(.target):nth-child(4n){background-image:url("skin6/key-white-4.webp")}
.tk.black{background:url("skin6/key-black-1.webp") 0 0/100% 100%;border-color:#0b0d16}
.tk.black:not(.target):nth-child(3n+1){background-image:url("skin6/key-black-2.webp")}
.tk.black:not(.target):nth-child(3n+2){background-image:url("skin6/key-black-3.webp")}
.tk-name{color:#24262f;font-weight:700}

/* ---------- 2. stone: Myrddin's relief tile with its lit crack lips (screen, same size and offset), the soft shine on
   the top panel, and the chipped bevelled frame around the top panel, the vellum and the lane ---------- */
:root{--stone4:url("skin6/stone-relief.webp");--lips:url("skin6/crack-lips.webp") 0 0/768px;--rim:url("skin6/panel-rim.webp") 36 / 10px round}
header.console,#recBar,#midiBar,#quizBar,.banner,.panel,#summary,#quizSummary,.piano-notice,#laneWrap,#tapKeys{
  background:var(--lips),var(--stone4-light),var(--stone4) 0 0/768px;background-blend-mode:screen,normal,normal}
header.console{background:url("skin5/gloss.webp") left top/100% 100% no-repeat,var(--lips),var(--stone4-light),var(--stone4) 0 0/768px;background-blend-mode:screen,screen,normal,normal;padding-bottom:8px}
#recBar.recording{background:linear-gradient(180deg,rgba(60,20,34,.5),rgba(40,14,24,.6)),var(--stone4) 0 0/768px}
/* the frame is drawn on top, over the panel's own 2 px edge and padding only (never over a control) */
header.console::before,#laneWrap::before{display:block;content:"";position:absolute;inset:0 -2px -2px;border:10px solid transparent;border-image:var(--rim);
  background:none;filter:none;opacity:1;pointer-events:none}
#laneWrap::before{border-bottom-width:0}                       /* the lane runs on into the keybed below it */
/* the vellum lies in its own framed stone slab */
#staff{border:10px solid transparent;border-image:var(--rim);
  background:url("skin6/vellum-aged.webp") center/100% 100% no-repeat padding-box,var(--lips),var(--stone4-light),var(--stone4) 0 0/768px;
  background-clip:padding-box;background-blend-mode:normal,screen,normal,normal}
@media (max-width:760px){header.console::before,#laneWrap::before,#staff{border-width:6px;border-image-width:6px}#laneWrap::before{border-bottom-width:0}}
/* noteheads on the darker vellum: one more pass of skin 5's cream halo, so a judged (coloured) note stays >= 3:1 */
#staff .vf-notehead{filter:drop-shadow(0 0 1px #fcf6e6) drop-shadow(0 0 1px #fcf6e6) drop-shadow(0 0 1px #fcf6e6)}
/* text plates: 3 px corners and a 4 px rim, so the plate covers the corners of every text line box (the lit crack
   lips are brighter than skin 5's stone) */
:root{--plate-soft:0 0 0 4px var(--plate),0 0 6px 6px rgba(24,29,48,.5)}
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:3px}
/* the title tab, when it is only kept for screen readers (short windows), sits inside the panel instead of on its
   carved top edge */
@media (min-width:761px) and (max-height:859px){header.console .nameplate{top:40%;left:40%;transform:none}}

/* ---------- 3. the knobs as the centrepiece of the top panel, on computers 1200 px and wider: at its right, labels
   and values under them, the weathered rune ring behind Volume, clear of every knob and label. Game: twice skin 5's
   size; the other modes: a little smaller than skin 5's row of knobs but beside the tabs instead of on a row of their
   own. The colour key shares the instruction line and the "No keyboard handy?" row gets a small velocity knob, so the
   page needs less scaling. Same controls, same order for the keyboard and screen readers (grid placement only; the
   knob row's box is dissolved into the panel's grid with display:contents). ---------- */
@media (min-width:1200px){
  #top{--ks:56px;--hr:1.62;--over:calc(var(--ks) * (var(--hr) - 1) / 2);--kw:max(var(--ks), 96px);
    --kcol:calc(2 * var(--kw) + max(var(--kw), var(--ks) + 2 * (var(--over) - 10px)) + 36px)}   /* knob size, ring, overhang, column width (knobs + their labels) */
  body.mode-game #top{--ks:92px;--hr:1.52}
  header.console{padding-top:12px;display:grid;grid-template-columns:repeat(5,max-content) 1fr max-content;align-items:center;column-gap:8px;row-gap:0;padding-bottom:8px}
  header.console>.seg,header.console>.loop,header.console>#exerciseSelect,header.console>#repeatBtn,header.console>#settingsBtn{grid-row:1;margin:0}
  header.console>#settingsBtn{justify-self:start}
  header.console>#gameBar{grid-column:1/7;grid-row:2;margin:6px 0 0;padding:0;align-self:start;border:0;box-shadow:none}
  header.console>.console-row{display:contents}
  #top header .knobs{--ks:inherit;grid-column:7;grid-row:1/6;align-self:start;gap:14px;padding:calc(var(--over) + 4px) 4px 0;margin:0}
  #top header .knob{--size:var(--ks)}
  #top header .knob-wrap{flex-direction:column;gap:2px;width:var(--kw)}
  #top header .knobs .knob-wrap:nth-child(2){width:auto;min-width:var(--kw)}
  #top header .knobs .knob-wrap .label{margin-top:calc(var(--over) + 4px)}
  #top header .knobs .knob-wrap:nth-child(2) .knob{margin:0 calc(var(--over) - 10px)}   /* ring 4 px clear of its neighbours */
  #top header .knobs .knob-wrap:nth-child(2) .knob::after{display:block;--ring:var(--hr)}
  header .console-row .vdivider{display:none}
  header.console>.console-row>#factCard{grid-column:1/7;grid-row:3;align-self:start;max-width:none;margin:6px 0 0}
  /* the colour key on the instruction line; the velocity knob in the "No keyboard handy?" row at a small size */
  #top~main{display:flex;flex-flow:row wrap;align-items:center}   /* #top~: over skin 5's Game column */
  main>*{flex:1 1 100%}
  main>#instruction{order:-1;flex:1 1 auto;margin:0}
  main>#legend{order:-1;flex:0 1 auto;margin:0 4px}
  main>#testInput{order:-2;margin:0 0 4px;padding-top:2px;padding-bottom:2px}
  #testInput .knob{--size:30px !important}   /* knob.js writes the 56 px size inline */
  #testInput>label{display:inline-flex;align-items:center;gap:6px}
  #midiBar{padding-top:2px;padding-bottom:2px}
  body.mode-game #midiBar{flex-wrap:wrap}
  body.mode-game #midiBar .piano-status{flex:none;overflow:visible}   /* shown whole (on a line of its own if needed) instead of cut off: it goes away after the first click */
  body.mode-quiz main>#instruction{flex-basis:100%}
  body.mode-quiz #staff svg{display:block;height:190px !important;width:auto !important;max-width:100%;margin:0 auto}   /* one note: a smaller slab */
}
/* Exercise, Free play and Note quiz: the record bar sits in the top panel's lower left, under the tabs and the lesson
   list (a reserved last row of the panel's grid, so it never covers a control); its own slab is dropped there. The
   recent-takes list opens as a drop-down instead of growing the bar. */
@media (min-width:1200px){
  body:not(.mode-game) #top{display:grid;grid-template:auto/minmax(0,1fr)}
  body:not(.mode-game) #top>header.console{grid-area:1/1;grid-template-rows:repeat(4,auto) 46px}
  body:not(.mode-game) #top>#recBar{grid-area:1/1;align-self:end;z-index:1;flex-wrap:nowrap;height:40px;box-sizing:border-box;
    margin:0 calc(46px + var(--kcol)) 10px 30px;padding:0;background:none;box-shadow:none;border:0}
  body:not(.mode-game) #top>#recBar.recording{padding:0 8px;background:linear-gradient(180deg,rgba(60,20,34,.55),rgba(40,14,24,.7));border-radius:6px}
  body:not(.mode-game) #recBar>#serverStatus,body:not(.mode-game) #recBar>#recMsg{min-width:0;font-size:12px;line-height:15px}
  body:not(.mode-game) #recBar .rec-name{white-space:nowrap;flex:none}
  body:not(.mode-game) #recentTakes{position:relative}
  body:not(.mode-game) #recentTakes[open] ul{position:absolute;right:0;top:100%;z-index:5;min-width:240px;padding:8px 12px 8px 26px;
    background:#1a1f33;border:1px solid #3b4466;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.6);color:#d9dcef}
}
/* short computer windows: the slabs give back their spare padding before the page is scaled */
@media (min-width:1200px) and (max-height:999px){
  main>#instruction{line-height:1.15}
  body.mode-quiz #staff svg{height:160px !important}
  #midiBar .hint{font-size:12px;line-height:15px}
}
@media (min-width:1200px) and (max-height:799px){body.mode-quiz #staff svg{height:140px !important}}
/* narrower computers: tabs, Loop and Settings on the first line, the lesson list under them, the game controls below */
@media (min-width:1200px) and (max-width:1599px){
  header.console{grid-template-columns:repeat(4,max-content) 1fr max-content}
  header.console>.seg{grid-area:1/1}
  header.console>.loop{grid-area:1/2}
  header.console>#repeatBtn{grid-area:1/3}
  header.console>#settingsBtn{grid-area:1/4}
  header.console>#exerciseSelect{grid-area:2/1/3/5;justify-self:start;margin-top:6px}
  header.console>#gameBar{grid-area:3/1/4/6}
  #top header .knobs{grid-area:1/6/6/7}
  header.console>.console-row>#factCard{grid-area:4/1/5/6}
}

/* ---------- 4. the brass plaque and the title tab above the top panel sit fully inside the window ---------- */
@media (min-width:761px) and (min-height:860px){header.console{margin-top:34px}}