/*
 * SoundSwitch 固有の追加 CSS（k386.css の後に読む）。
 * ヒーローの「画面のイメージ」（メニューバーのパネルと音量表示を CSS で再現した図）だけを置く。
 * 色は k386.css の変数を使う。
 */

.ss-stage {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 12px;
  padding: clamp(16px, 3vw, 28px);
  background:
    radial-gradient(420px 260px at 20% 90%, var(--accent-soft), transparent 70%),
    linear-gradient(160deg, var(--paper-2), var(--surface-2));
  font-size: 0.8rem;
  line-height: 1.4;
}

.ss-menubar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 4px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: 0.72rem; font-weight: 600; color: var(--ink-2);
}
.ss-menubar__left, .ss-menubar__right { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ss-menubar__left b { color: var(--ink); }
.ss-menubar__glyph { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: var(--muted); }
.ss-menubar__glyph.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.ss-menubar__clock { font-variant-numeric: tabular-nums; color: var(--ink); }

.ss-panel {
  position: relative; width: min(100%, 320px); padding: 8px 0 6px;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 14px;
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.ss-panel::before {
  content: ""; position: absolute; top: -7px; right: 44px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--surface); border-left: 1px solid var(--rule-strong); border-top: 1px solid var(--rule-strong);
}
.ss-panel__label { margin: 0; padding: 2px 14px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; color: var(--muted); }
.ss-panel ul { list-style: none; margin: 0; padding: 0 6px; }
.ss-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px 14px; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px; color: var(--ink-2);
}
.ss-row svg { color: var(--muted); }
.ss-row.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.ss-row.is-active svg { color: var(--accent); }
.ss-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-pin { opacity: 0.35; }
.ss-pin.is-pinned { opacity: 1; }
.ss-pin.is-pinned svg { color: var(--accent); }
.ss-volume { display: grid; grid-template-columns: 20px minmax(0, 1fr) 36px; align-items: center; gap: 8px; padding: 6px 14px; color: var(--muted); }
.ss-volume__track { position: relative; height: 5px; border-radius: 999px; background: var(--rule); }
.ss-volume__fill { position: absolute; inset: 0 28% 0 0; border-radius: 999px; background: var(--accent); }
.ss-volume__knob { position: absolute; top: 50%; left: 72%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
.ss-volume__value { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-rule { height: 1px; margin: 4px 14px; border: 0; background: var(--rule); }
.ss-panel__foot { display: flex; justify-content: space-between; gap: 8px; padding: 2px 14px 0; font-size: 0.7rem; color: var(--muted); }

.ss-hud {
  justify-self: start;
  display: grid; justify-items: center; gap: 8px; padding: 14px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--paper);
  box-shadow: var(--shadow-lg); font-size: 0.7rem; font-weight: 600;
}
.ss-hud__bar { position: relative; width: 116px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 25%, transparent); }
.ss-hud__bar span { position: absolute; inset: 0 28% 0 0; border-radius: 999px; background: var(--accent); }
.ss-hud__dots { display: inline-flex; gap: 5px; }
.ss-hud__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 40%, transparent); }
.ss-hud__dots i.is-on { background: var(--accent); }

/* 説明文は図の上に置く（右下に立つキャラと吹き出しに隠れないように） */
.k-hero__visual .k-shot figcaption:first-child { border-top: 0; border-bottom: 1px solid var(--rule); }
/* 広い画面では、右下のキャラの分だけ図の下を空ける */
@media (min-width: 901px) {
  .k-hero__visual .ss-stage { padding-bottom: 150px; }
}