/* Skin 2 (Nov 3, 2026; Myrddin's SKIN.md "David's emphasis" + full-mockup checklist): more stars, night sky, moons,
   runes, brass plaque, weathered stone, brass knob rings, framed Start, recessed ivory keyboard, glowing lit keys.
   Loaded after theme.css. Decoration only: no layout boxes change size (rings, frames and glows are shadows or
   pseudo-elements), nothing moves except the existing slow star twinkle, and the hands strip is not touched.
   All decorative images are CSS backgrounds or pseudo-elements, so screen readers never see them. */
:root{
  --sky:url("skin/night-sky.webp");
  --constellations:url("skin/constellations-skin.svg");          /* lines .2, dots .22 */
  --brass-tile:url("skin/brass-tile.webp");
  /* weathered stone: dark in the middle where the text is, lighter toward the edges so the carved stone shows */
  --stone-dark:linear-gradient(90deg,rgba(8,10,20,0) 0,rgba(8,10,20,.30) 20px,rgba(8,10,20,.30) calc(100% - 20px),rgba(8,10,20,0) 100%),
    linear-gradient(180deg,rgba(8,10,20,0) 0,rgba(8,10,20,.18) 12px,rgba(8,10,20,.18) calc(100% - 12px),rgba(8,10,20,0) 100%),
    linear-gradient(rgba(8,10,20,.14),rgba(8,10,20,.14));
  --corner-runes:url("skin/corner-rune.svg") top 2px left 2px/12px no-repeat,url("skin/corner-rune.svg") top 2px right 2px/12px no-repeat,
    url("skin/corner-rune.svg") bottom 2px left 2px/12px no-repeat,url("skin/corner-rune.svg") bottom 2px right 2px/12px no-repeat;
  --corner-stars:url("skin/corner-star.svg") top 1px right 16px/11px no-repeat,url("skin/corner-star.svg") bottom 1px left 16px/11px no-repeat;
  --rune-border:url("skin/rune-border.svg") top 2px left 30px/96px 6px repeat-x,url("skin/rune-border.svg") bottom 2px left 78px/96px 6px repeat-x;
}

/* ---------- night sky, brighter stars (opacity only, 9 s, 24 steps), constellations in the margins ---------- */
body{background:var(--constellations) 0 0/900px 360px repeat,linear-gradient(rgba(6,8,16,.30),rgba(6,8,16,.50)),var(--sky) center top/cover no-repeat fixed,var(--bg)}
body::before{opacity:.8}
body::after{opacity:.35;animation-name:twinkle-skin}
@keyframes twinkle-skin{from{opacity:.35}to{opacity:.75}}
@media (prefers-reduced-motion:reduce){body::after{animation:none;opacity:.5}}   /* frozen at a static fill */
body.no-fx::after{animation:none;opacity:.5}

/* ---------- stone panels: weathered texture, chiselled edge, rune corners, carved stars ---------- */
header.console,#recBar,#midiBar,#quizBar,.banner,.panel,#summary,#quizSummary,.piano-notice{
  background:var(--stone-dark),var(--stone-tile) center/384px}
#recBar,#quizBar{position:relative}   /* (the MIDI bar has no room for decoration: its text runs to the edges) */
#recBar::before,#quizBar::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:var(--corner-runes),var(--corner-stars),var(--rune-border)}
header.console,#recBar,#midiBar,#quizBar{
  box-shadow:inset 1px 1px 0 rgba(200,210,255,.22),inset -1px -2px 0 rgba(0,0,0,.6),inset 0 0 9px -2px rgba(150,165,230,.16),inset 0 0 0 4px rgba(8,10,20,.16),inset 0 0 0 5px rgba(138,152,255,.16),0 10px 24px rgba(0,0,0,.5)}
header.console{box-shadow:inset 0 0 0 1px var(--rune-line),inset 2px 2px 0 rgba(200,210,255,.16),inset -2px -3px 0 rgba(0,0,0,.55),inset 0 0 10px -2px rgba(150,165,230,.16),0 10px 24px rgba(0,0,0,.5)}
/* worn, chiselled edges: a little moonlight caught on the rim (outer 8 px only, never under text) */
#recBar.recording{background:linear-gradient(180deg,rgba(60,20,34,.55),rgba(40,14,24,.7)),var(--stone-tile) center/384px}

/* header: carved rune borders, rune corners, carved stars, moon-phase row and a second crescent moon (top right) */
header.console::before{left:2px;right:2px;top:2px;bottom:2px;opacity:1;filter:drop-shadow(0 0 3px rgba(138,152,255,.55));
  background:var(--corner-runes),url("skin/corner-star.svg") bottom 1px right 18px/11px no-repeat,url("skin/corner-star.svg") bottom 1px left 18px/11px no-repeat,
    url("skin/rune-border.svg") bottom 2px left 60px/96px 6px repeat-x}
/* along the top edge: the brass rune plaque (Myrddin's asset, 5 KB webp), a moon-phase row and a second crescent
   moon in the top-right corner, all sitting on the edge above the controls (never over them) */
header.console::after{top:-16px;left:0;right:0;width:auto;height:31px;margin:0;opacity:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  background: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}
/* the title tab: a larger crescent moon (28 px), hanging over the panel edge */
header.console .nameplate .moon{width:28px;height:28px;margin:-6px 6px -14px -4px;transform:translateY(4px);filter:drop-shadow(0 0 4px rgba(238,235,247,.55))}

/* knob row: constellations behind the knobs, a rune strip beside them */
.console-row{background:var(--constellations) right -60px center/600px 240px no-repeat,linear-gradient(180deg,rgba(6,8,16,.62),rgba(6,8,16,.75)),var(--stone-tile) center/384px}
.console-row .vdivider{width:14px;background:url("skin/rune-column.svg") center top/14px 84px repeat-y;filter:drop-shadow(0 0 3px rgba(138,152,255,.5))}

/* ---------- knobs: round stone-and-brass ring, dark well (the arc keeps its indigo glow) ---------- */
.knob::before{content:"";position:absolute;inset:calc(var(--size) * -.07);border-radius:50%;pointer-events:none;
  border:calc(var(--size) * .035 + 1px) solid transparent;
  background:radial-gradient(circle,#0a0b12 62%,#161a2b 100%) padding-box,var(--brass-tile) center/48px border-box;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.55)}
@media (min-width:561px){body:not(.mode-game) header .knob{--size:96px}}   /* a bit larger outside Game mode (Game keeps its size so everything fits) */

/* ---------- Start / Pause: glowing blue in a stone-and-brass frame ---------- */
#gameStart.btn.primary,#gameStart.btn.primary.running{color:#fff;border-color:#2a3590;background:linear-gradient(180deg,#5463e0,var(--accent-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.3),0 0 0 2px #0c0e18,0 0 0 4px #b8995a,0 0 0 6px #161a2b,0 0 18px 5px rgba(84,99,224,.42)}

/* ---------- keyboard recessed in a stone frame, warm ivory keys, lit keys glow in their own colour ---------- */
.kb-frame{box-shadow:inset 0 0 0 1px var(--rune-line),inset 2px 2px 0 rgba(200,210,255,.14),inset -2px -3px 0 rgba(0,0,0,.6),var(--sh-panel)}
.kb-frame::after{content:"";position:absolute;left:var(--frame-pad);right:var(--frame-pad);top:8px;bottom:12px;pointer-events:none;border-radius:0 0 6px 6px;
  box-shadow:inset 0 7px 9px -6px rgba(0,0,0,.65),inset 0 -2px 5px -2px rgba(0,0,0,.35),inset 1px 0 2px rgba(0,0,0,.4),inset -1px 0 2px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.55)}
body.mode-game .kb-frame::after{top:0}
@media (max-height:920px) and (min-width:561px){body.mode-game .kb-frame::after{bottom:6px}}
#keyboard .white{fill:#f6f0e1}                       /* warm ivory (lit keys still get the result colour from the app) */
#keyboard .clabel{fill:#767b90}                      /* C3, C4 labels: same contrast on ivory as before on white */
#keyboard{overflow:visible}
body:not(.no-fx) #keyboard rect[style*="fill:"]{filter:url(#skinKeyGlow)}   /* a soft glow in the key's own colour while it is held */

/* ---------- lane: brighter constellations behind the bars ---------- */
#lanes{background: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(--stone-tile) center/384px}
#laneWrap::after{opacity:.34;filter:drop-shadow(0 0 3px rgba(138,152,255,.5))}

/* ---------- vellum: a little more weathering at the very edges (notation area unchanged) ---------- */
#staff{box-shadow:inset 0 0 6px rgba(60,40,20,.55),inset 0 0 14px -4px rgba(60,40,20,.45),inset 0 0 0 1px rgba(255,240,200,.18),0 0 0 3px #0c0e18,0 0 0 4px rgba(138,152,255,.22),0 6px 16px rgba(0,0,0,.5)}

/* ---------- phones ---------- */
@media (max-width:560px){
  header.console::after{top:-13px;height:26px;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}
  .knob::before{inset:calc(var(--size) * -.05)}
}
@media (max-width:760px){.console-row{background:linear-gradient(180deg,rgba(6,8,16,.62),rgba(6,8,16,.75)),var(--stone-tile) center/384px}}   /* knobs fill the row: no lines behind their labels */

/* status messages in red (MIDI blocked, save helper not answering) read at 4.5:1+ on the stone; the judging
   colour --wrong itself is unchanged */
#midiStatus.error,.server-status.error,.server-status.bad,.rec-msg.error{color:#ff8f8f}