/* radar-core.css: スキン（色・背景・光る値バー・スライダー・左上アイコン）に関する共通CSS。
   メーカーと「何でもレーダーチャート研究所」で同じファイルを読み込み、見た目を完全に共通にする。app.css より先に読み込むこと。
   ここを直すときは、全44スキンの見た目の指紋（tests/radar/browser/skins-all.spec.js）を確認する。 */
:root {
  --bg: #05060a;
  --panel: #0e1122;
  --panel2: #171c35;
  --band: #1a1f45;
  --line: #2a3152;
  --line2: #3d4975;
  --text: #e8eaf4;
  --mute: #9298b4;
  --accent: #3de8ff;
  --accent-ink: #031418;
  --danger: #ff5a7a;
  --glow1: rgba(180, 108, 255, .13);
  --glow2: rgba(61, 232, 255, .09);
  --cborder: rgba(61, 232, 255, .38);
  --cshadow: rgba(61, 232, 255, .07);
  --f-display: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --f-num: 'Rajdhani', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}
html { background: var(--bg); }
body { background-color: transparent; }
body {
  color: var(--text);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  background-image:
    radial-gradient(900px 420px at 12% -8%, var(--glow1), transparent 70%),
    radial-gradient(800px 380px at 92% 0%, var(--glow2), transparent 70%);
  background-repeat: no-repeat;
}
/* テーマごとの模様（走査線・水玉・魔法陣など）。内容の後ろに敷く固定レイヤー */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--bgx, none); background-size: var(--bgxs, auto); background-position: var(--bgxp, 0 0); background-repeat: var(--bgxr, repeat); -webkit-mask-image: var(--bgxm, none); mask-image: var(--bgxm, none); }
/* 左上のアイコン：ファビコンと同じ2つの五角形。色は現在のスキン（--emb1 / --emb2） */
.emb { display: inline-flex; flex: none; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--emb1, var(--accent)) 50%, transparent)); }
.emb .e1 { stroke: var(--emb1, var(--accent)); fill: var(--emb1, var(--accent)); fill-opacity: .15; }
.emb .e2 { stroke: var(--emb2, var(--accent)); fill: var(--emb2, var(--accent)); fill-opacity: .45; }
html[data-light] .emb { filter: none; }
/* スライダーのグラデ：テーマが --slfill を持つときだけ、塗り部分（つまみまで）をグラデーションにする */
html[data-slg] input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; }
html[data-slg] input[type=range]::-webkit-slider-runnable-track { height: 8px; box-sizing: border-box; border-radius: 99px; border: 1px solid var(--line2); background: var(--slfill) 0 0 / calc(var(--p, .5) * (100% - 20px) + 10px) 100% no-repeat, var(--sltrack, var(--panel2)); }
html[data-slg] input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; box-sizing: border-box; border-radius: 50%; background: var(--slthumb, #fff); border: 2px solid var(--slthumbbd, var(--accent)); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
html[data-slg] input[type=range]::-moz-range-track { height: 8px; box-sizing: border-box; border-radius: 99px; border: 1px solid var(--line2); background: var(--sltrack, var(--panel2)); }
html[data-slg] input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--slfill); }
html[data-slg] input[type=range]::-moz-range-thumb { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: var(--slthumb, #fff); border: 2px solid var(--slthumbbd, var(--accent)); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
/* 角ばったテーマ（レトロPC・レトロゲーム・ゲームボーイ）：すべての角を四角にする */
html[data-sq] *, html[data-sq] *::before, html[data-sq] *::after { border-radius: 0 !important; }
html[data-sq] input[type=range]::-webkit-slider-thumb, html[data-sq] input[type=range]::-webkit-slider-runnable-track, html[data-sq] input[type=range]::-moz-range-thumb, html[data-sq] input[type=range]::-moz-range-track, html[data-sq] input[type=range]::-moz-range-progress { border-radius: 0 !important; }
/* 値のバー（大きく見る・研究所・アンケート入力で共有）の基本。下の追加分が後から上書きする順序を保つこと */
.pvals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pvals li { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 3.5em; gap: 12px; align-items: center; font-size: 13px; }
.pv-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.pv-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pv-bar i { display: block; height: 100%; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.pvals b { font: 700 18px var(--f-num); text-align: right; font-variant-numeric: tabular-nums; }
/* ---- 2026-10-15 追加分: 大きく見る・研究所・アンケート入力で使う値のバー ---- */
/* 値のバー：目盛り付きの溝＋スキンのグラデ（スライダーと同じ --slfill。ない場合はチャート色の濃淡）、先端に光る点 */
.pvals { row-gap: 12px; }
.pvals { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.pvals li { display: contents; } /* 値の列幅を全行でそろえる（書体の幅が広いスキンでも切れない） */
.pv-bar { position: relative; height: 12px; border-radius: 99px; border: 1px solid var(--line2); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line2) calc(25% - 1px) 25%), var(--sltrack, var(--panel2)); overflow: visible; }
.pv-bar i { display: block; position: absolute; height: auto; left: 0; top: -1px; bottom: -1px; width: var(--w); min-width: 12px; border-radius: inherit; background: var(--slfill, linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, var(--panel)), var(--c))); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); transform-origin: left center; animation: pvgrow .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
.pv-bar i::after { content: ''; position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box; border-radius: 50%; background: var(--slthumb, #fff); border: 2px solid var(--slthumbbd, var(--c)); box-shadow: 0 0 8px var(--c); }
[data-light] .pv-bar i { box-shadow: none; }
html[data-sq] .pv-bar, html[data-sq] .pv-bar i, html[data-sq] .pv-bar i::after { border-radius: 0; }
.pvals li.top .pv-l { color: var(--text); font-weight: 700; }
.pvals li.top .pv-bar i { box-shadow: 0 0 16px var(--c); }
.pvals b { font: 700 20px var(--f-num); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pvals b small { font-size: 11px; font-weight: 400; color: var(--mute); margin-left: 1px; }
.pvals li.top b { color: var(--accent); }
@keyframes pvgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pv-bar i { animation: none; } }