/* NORA BEAT さわやか版（2026-09-30 社長「黒系より 白とか さわやかな方が」「NORA が前に出すぎない」）。
   style.css のあとに読み、色と面だけを上書きする（これを外せば ライブステージ版に もどる）。
   白〜水色の地・紺の文字・選んだ所は 海の青とミント・いちばん大事なボタンは オレンジ。js では NB.THEME === 'light' */
:root {
  color-scheme: light;
  --night: #eef8fc;
  --panel: #ffffff;
  --panel-soft: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --line: rgba(21, 50, 74, 0.14);
  --line-faint: rgba(21, 50, 74, 0.08);
  --ink: #15324a;
  --ink-2: #4a6477;
  --ink-3: #8ba0af;
  --on-light: #ffffff;
  --gold: #ff8a3d;
  --gold-hi: #ff7a2f;
  --gold-lo: #e0741f;
  --pink: #19b3d3;
  --accent: linear-gradient(90deg, #ff8a5b, #ffb547);
  --cool: linear-gradient(90deg, #19b3d3, #3fcfa0);
  --sea: #19b3d3;
  --mint: #3fcfa0;
  --card-shadow: 0 6px 20px rgba(21, 50, 74, 0.08);
}
body {
  background: linear-gradient(180deg, #dff3fa 0%, #f2fafd 45%, #ffffff 100%);
  color: var(--ink);
}
#jacket-bg {
  filter: blur(44px) saturate(1.1) brightness(1.08);
}
#jacket-bg.on {
  opacity: 0.55;
}

/* ---------- ボタン ---------- */
.btn {
  color: var(--ink);
}
.btn.primary {
  color: #fff;
  background: var(--accent);
  text-shadow: 0 1px 2px rgba(150, 60, 20, 0.25);
  box-shadow: 0 5px 0 #df6d38, 0 10px 24px rgba(255, 138, 91, 0.32);
}
.btn.primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #df6d38, 0 4px 12px rgba(255, 138, 91, 0.3);
}
.btn.ghost {
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint), var(--card-shadow);
}
.btn.ghost:active {
  background: #f1f7fa;
}
.btn[disabled] {
  background: #eef3f6;
  color: var(--ink-3);
  box-shadow: none;
}
.icon-btn {
  color: var(--ink-2);
  background: #fff;
  box-shadow: var(--card-shadow);
}
.topbar h2 {
  color: var(--ink);
  text-shadow: none;
}
.linkish {
  color: #1596cf;
}

/* ---------- タイトル：モズクンとモズコの浜の絵・ロゴは海の青とオレンジ ---------- */
.hero img {
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.logo-word {
  color: var(--sea);
  filter: drop-shadow(0 4px 14px rgba(25, 179, 211, 0.18));
}
.logo-word em {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#scr-title .lead {
  color: var(--ink-2);
  font-weight: 700;
}
#scr-title .roster {
  display: none;
}
.credit,
.credit a {
  color: var(--ink-3);
}

/* ---------- 曲を選ぶ：白いカードの行・選んだ曲は 青いふちのカード ---------- */
.pack-tabs {
  border-bottom-color: var(--line-faint);
}
.pack-tab {
  color: var(--ink-3);
}
.pack-tab[aria-selected='true'] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--sea);
}
.pack-tab[aria-selected='true'] small {
  color: var(--sea);
}
.setlist {
  gap: 8px;
}
.song {
  border-bottom: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(21, 50, 74, 0.06);
}
.song-main:hover {
  background: #f6fbfd;
}
.song-sub,
.song-meta small,
.song-artist {
  color: var(--ink-3);
}
.song.selected {
  margin: 4px 0;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(25, 179, 211, 0.5), 0 10px 28px rgba(21, 50, 74, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.song.selected .jacket {
  box-shadow: 0 8px 20px rgba(21, 50, 74, 0.18);
}
.song-rank {
  box-shadow: inset 0 0 0 1.5px rgba(255, 138, 61, 0.7);
  color: var(--gold);
}
.sdiff {
  background: #f3f8fa;
  color: var(--ink-2);
}
.sdiff[aria-checked='true'] {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c), 0 4px 12px rgba(21, 50, 74, 0.08);
  color: var(--ink);
}
.song-tools .btn.small,
.btn.small.ghost {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.best {
  background: #f3f8fa;
  color: var(--ink-2);
}
.best i {
  color: #fff;
}
.add-song {
  border-color: rgba(21, 50, 74, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.add-song small {
  color: var(--ink-3);
}
.fineprint {
  color: var(--ink-3);
}
.complete-sum {
  color: var(--ink-3);
}
.song-status {
  color: var(--gold-hi);
}

/* ---------- 難易度・準備中・つうしん ---------- */
.mode {
  background: #eaf3f7;
}
.diff {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-faint), var(--card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.diff[aria-pressed='true'] {
  background: #fff;
  box-shadow: inset 0 0 0 2.5px var(--c), 0 8px 20px rgba(21, 50, 74, 0.1);
}
.loading,
.net {
  background: #fff;
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.keypad button {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 #dde7ed;
}
.keypad .go,
.net-steps b {
  color: #fff;
}
.stamp-btn {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- 重ねる窓 ---------- */
.overlay {
  background: rgba(223, 243, 250, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.panel {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(21, 50, 74, 0.22);
}
.help {
  color: var(--ink-3);
}
.toast {
  background: var(--ink);
  color: #fff;
}
.pause-btn {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  box-shadow: var(--card-shadow);
}
.acct-input {
  background: #f3f8fa;
  color: var(--ink);
}
.acct-input:focus {
  box-shadow: inset 0 0 0 2px var(--sea);
}
.rank-list li {
  background: #f3f8fa;
}
.rank-list li.me {
  background: #e3f6fb;
  box-shadow: inset 0 0 0 1.5px var(--sea);
}
.rank-tab {
  color: var(--ink-2);
}
.field input[type='range'],
.toggle input {
  accent-color: var(--sea);
}
.drop {
  background: rgba(238, 248, 252, 0.92);
  border-color: var(--sea);
}

/* ---------- リザルト ---------- */
.res-title {
  color: var(--ink);
}
.res-song,
.res-panel {
  background: #fff;
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.res-panel.p1 {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 122, 138, 0.6), var(--card-shadow);
}
.res-panel.p2 {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(92, 200, 255, 0.7), var(--card-shadow);
}
.res-player {
  color: #fff;
}
.gbar {
  background: #e6eff4;
}
.gbar::after {
  background: repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), rgba(255, 255, 255, 0.7) calc(2% - 1px) 2%);
}
.gbar .ga {
  background: var(--cool);
}
.gline {
  background: var(--gold);
}
.gsoul {
  background: #e6eff4;
  color: var(--ink-2);
}
.gsoul.on {
  color: #fff;
}
.res-score {
  background: #f3f8fa;
  color: var(--ink);
}
.res-counts,
.res-combo {
  background: #f7fbfd;
  box-shadow: inset 0 0 0 1px var(--line-faint);
}
.k-perfect dt {
  color: #ff7a2f;
}
.k-great dt {
  color: #1596cf;
}
.k-good dt {
  color: #36a852;
}
.k-miss dt {
  color: #9aa6b2;
}
.rank-big {
  background: linear-gradient(180deg, #ffb547 0%, #ff8a5b 60%, #ff6f61 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 0 #fff) drop-shadow(0 8px 18px rgba(255, 138, 91, 0.35));
}
.rank-big.r-S {
  background: linear-gradient(180deg, #3fcfa0, #19b3d3 60%, #1a86c9);
  -webkit-background-clip: text;
  background-clip: text;
}
.rank-big.r-C,
.rank-big.r-D {
  background: linear-gradient(180deg, #9fb3c1, #6f8797);
  -webkit-background-clip: text;
  background-clip: text;
}
.stars .off {
  color: #dfe9ef;
}
.res-verdict.ok {
  color: #36a852;
}

/* ---------- 下のタブ・ランキング・地図 ---------- */
.tabbar {
  background: rgba(255, 255, 255, 0.95);
  border-top: 0;
  box-shadow: 0 -4px 20px rgba(21, 50, 74, 0.08);
}
@media (min-width: 560px) {
  .tabbar {
    border: 0;
    box-shadow: 0 8px 30px rgba(21, 50, 74, 0.14);
  }
}
.tabbar .tab {
  color: var(--ink-3);
}
.tabbar .tab[aria-current='true'] {
  color: var(--ink);
  background: #e8f6fb;
}
.tabbar .tab[aria-current='true'] svg {
  color: var(--sea);
}
.tabbar .tab .dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6f61;
  box-shadow: 0 0 0 2px #fff;
}
.tabbar .tab {
  position: relative;
}
.rk-song,
.place {
  background: #fff;
  box-shadow: 0 3px 12px rgba(21, 50, 74, 0.06);
  color: var(--ink);
}
.rk-song:hover {
  background: #f6fbfd;
}
.rk-pack {
  color: var(--ink-2);
}
.map-box {
  background: #e3f3f8;
  box-shadow: var(--card-shadow);
}
.map-pop small {
  color: var(--ink-3);
}

/* ---------- 紺の地に 白い文字（ライブ版では 白地に 濃い文字だった所） ---------- */
.mode button[aria-checked='true'] {
  background: var(--ink);
  color: #fff;
}
.chat-btn {
  color: #fff;
}
.net-code span {
  background: #f3f8fa;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bubble {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(21, 50, 74, 0.18);
}