/* settings-skin.css (round 14b): reskin of the in-game Settings menu (v34 markup from set-controls.js).
   Pure CSS; restyles existing ids/classes only. Every selector is scoped under
   "#game-set-back .set-panel" so it outranks set-controls.js's injected <style> and touches nothing else. */

#game-set-back .set-panel {
  --sk-gold: #ffd36a;
  --sk-gold-hi: #fff1b8;
  --sk-green: #5fe38c;
  --sk-steel-1: #3a444d;
  --sk-steel-2: #1b2227;
  --sk-steel-3: #0d1215;
  --sk-felt-1: #1f5a3a;
  --sk-felt-2: #0c2e1d;
  --sk-ink: #e9f1f4;
  --sk-dim: #93a4ad;
}

/* ---------- Graphics: trigger button ---------- */
#game-set-back .set-panel .sc-gfx .sc-gbtn {
  height: 16px; padding: 0 9px; gap: 6px;
  border: 1px solid #66747e; border-radius: 999px;
  background: linear-gradient(180deg, #56616a 0%, var(--sk-steel-1) 45%, var(--sk-steel-2) 100%);
  color: var(--sk-gold-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
#game-set-back .set-panel .sc-gfx .sc-gbtn::after { border-top-color: var(--sk-gold); }
#game-set-back .set-panel .sc-gfx .sc-gbtn:hover { border-color: var(--sk-gold); filter: brightness(1.12); }
#game-set-back .set-panel .sc-gfx .sc-gbtn:focus-visible { outline: 2px solid var(--sk-gold); outline-offset: 2px; }

/* ---------- Graphics: tile grid popup ---------- */
#game-set-back .set-panel .sc-gfx .sc-grid {
  gap: 6px; padding: 7px;
  border: 1px solid #5b6770; border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #232b31, #0b0f12);
  box-shadow: 0 10px 26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}

#game-set-back .set-panel .sc-gfx .sc-tile {
  position: relative; box-sizing: border-box;
  min-width: 0; min-height: 48px; height: 48px; padding: 6px 1px 5px; gap: 5px;
  border: 1px solid #0a1a12; border-radius: 8px;
  /* felt: soft centre light + fine nap over a green baize gradient */
  background:
    radial-gradient(120% 80% at 50% 25%, rgba(255,255,255,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--sk-felt-1), var(--sk-felt-2));
  color: #cfe3d6;
  font: 800 8.5px/1 Manrope, Tahoma, Arial, sans-serif; letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.45), 0 0 0 1px #4a565e, 0 2px 3px rgba(0,0,0,.6);
  transition: transform .12s, box-shadow .15s, color .15s, filter .15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#game-set-back .set-panel .sc-gfx .sc-tile span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* quality-bars glyph in a small steel socket */
#game-set-back .set-panel .sc-gfx .sc-tile b {
  height: 13px; gap: 2px; padding: 2px 4px; border-radius: 4px; align-items: flex-end;
  background: linear-gradient(180deg, var(--sk-steel-3), #20282d);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12);
}
#game-set-back .set-panel .sc-gfx .sc-tile b i { width: 3px; border-radius: 1px; background: rgba(180,195,200,.22); box-shadow: none; }
#game-set-back .set-panel .sc-gfx .sc-tile b i.lit { background: linear-gradient(180deg, var(--sk-gold-hi), var(--sk-gold)); box-shadow: 0 0 3px rgba(255,211,106,.7); }
/* Auto: green bars (adaptive) instead of gold */
#game-set-back .set-panel .sc-gfx .sc-tile[data-v="auto"] b i.lit { background: linear-gradient(180deg, #b8ffd0, var(--sk-green)); box-shadow: 0 0 3px rgba(95,227,140,.7); }

#game-set-back .set-panel .sc-gfx .sc-tile:hover { color: #fff; filter: brightness(1.15); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.4), 0 0 0 1px #8a979f, 0 4px 8px rgba(0,0,0,.6); }
#game-set-back .set-panel .sc-gfx .sc-tile:active { transform: translateY(1px) scale(.97); }
#game-set-back .set-panel .sc-gfx .sc-tile:focus { outline: none; }
#game-set-back .set-panel .sc-gfx .sc-tile:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 2px #0b0f12, 0 0 0 4px var(--sk-green), 0 0 10px rgba(95,227,140,.6);
}
/* selected tile: bright gold ring */
#game-set-back .set-panel .sc-gfx .sc-tile.on,
#game-set-back .set-panel .sc-gfx .sc-tile[aria-selected="true"] {
  color: var(--sk-gold-hi);
  background:
    radial-gradient(120% 80% at 50% 25%, rgba(255,236,170,.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a7a4c, #0f3a24);
  text-shadow: 0 0 6px rgba(255,211,106,.8), 0 1px 1px rgba(0,0,0,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px var(--sk-gold), 0 0 12px rgba(255,211,106,.55);
}
#game-set-back .set-panel .sc-gfx .sc-tile.on:focus-visible {
  box-shadow: 0 0 0 2px var(--sk-gold), 0 0 0 4px var(--sk-green), 0 0 12px rgba(255,211,106,.6);
}

/* ---------- Sound / Path Off-On: steel segmented pill ---------- */
#game-set-back .set-panel .sc-rrow {
  gap: 0; height: 18px; padding: 0 2px 0 4px;
  border: 1px solid #4b565e; border-radius: 9px;
  background: linear-gradient(180deg, rgba(40,48,54,.9), rgba(12,16,19,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 1px rgba(0,0,0,.5);
}
#game-set-back .set-panel .sc-rrow .sc-rlabel { color: var(--sk-ink); padding-right: 6px; }
#game-set-back .set-panel .sc-rrow .pcs-radio {
  height: 14px; min-width: 34px; justify-content: center; gap: 3px; padding: 0 7px;
  border: 1px solid #0a0e10; border-radius: 0; color: var(--sk-dim);
  background: linear-gradient(180deg, #4a545c 0%, var(--sk-steel-1) 40%, var(--sk-steel-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}
#game-set-back .set-panel .sc-rrow .pcs-radio.off { border-radius: 8px 0 0 8px; border-right-width: 0; }
#game-set-back .set-panel .sc-rrow .pcs-radio.on  { border-radius: 0 8px 8px 0; }
#game-set-back .set-panel .sc-rrow .pcs-radio .pcs-rg { width: 8px; height: 8px; }
#game-set-back .set-panel .sc-rrow .pcs-radio:hover { color: #fff; border-color: #0a0e10; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 6px rgba(255,211,106,.35); }
#game-set-back .set-panel .sc-rrow .pcs-radio:has(input:checked) {
  border-color: #0a0e10; color: #1b1405; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.25), 0 0 8px rgba(255,211,106,.5);
}
#game-set-back .set-panel .sc-rrow .pcs-radio.on:has(input:checked)  { background: linear-gradient(180deg, #fff1b8, var(--sk-gold) 55%, #c9952b); }
#game-set-back .set-panel .sc-rrow .pcs-radio.off:has(input:checked) { background: linear-gradient(180deg, #e6ecef, #aab5bb 55%, #6d7980); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 2px rgba(0,0,0,.3); }
#game-set-back .set-panel .sc-rrow .pcs-radio:has(input:focus-visible) { outline: 2px solid var(--sk-green); outline-offset: 1px; z-index: 1; }

/* touch screens: taller hit areas for the pill and grid tiles */
@media (pointer: coarse) {
  #game-set-back .set-panel .sc-rrow .pcs-radio { min-width: 40px; }
  #game-set-back .set-panel .sc-gfx .sc-tile { min-height: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  #game-set-back .set-panel .sc-gfx .sc-tile, #game-set-back .set-panel .sc-rrow .pcs-radio { transition: none; }
}