/* 推し活人生シミュレーター：ゲーム固有のスタイル（色はCSS変数のみ） */
:root {
  --ol-stage: #2a1733;
  --ol-stage-2: #452257;
  --ol-spot: rgba(255, 244, 200, .22);
  --ol-oshi: #fff3c4;
  --ol-pink: #ff5f9e;
  --ol-red: #ff5a5a;
  --ol-blue: #58a6ff;
  --ol-orange: #ffa53d;
  --ol-purple: #b98bff;
  --ol-green: #45d483;
  --ol-teal: #3fd4c8;
  --ol-off: #5b4766;
  --ol-money: #e0a21a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ol-stage: #1a0f22; --ol-stage-2: #2c1638; --ol-off: #4a3a55; --ol-money: #f0b93a; }
}
:root[data-theme="dark"] { --ol-stage: #1a0f22; --ol-stage-2: #2c1638; --ol-off: #4a3a55; --ol-money: #f0b93a; }

.ol-hero { padding: 12px 0 4px; }
.ol-hero h1 em { font-style: normal; color: var(--accent); }
.ol-start { margin: 12px 0 16px; }
.ol-list { margin: 6px 0 0; padding-left: 1.2em; }
.ol-list li + li { margin-top: 4px; }
.ol-friend { border-color: var(--accent); background: var(--accent-soft); }
.ol-daily .btn { white-space: normal; }
.ol-disclaimer { font-size: 11px; color: var(--text-sub); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; margin: 16px 0 0; line-height: 1.6; }

/* ステージSVG */
.ol-stage { display: block; width: 100%; height: auto; margin: 8px 0 12px; }
.ol-stage:not(.is-big) { width: 132px; margin: 0; flex: none; }
.ol-st-bg { fill: var(--ol-stage); }
.ol-st-spot { fill: var(--ol-spot); }
.ol-st-floor { fill: var(--ol-stage-2); }
.ol-st-oshi { fill: var(--ol-oshi); }
.ol-st-heart { fill: var(--ol-pink); font-size: 12px; }
.ol-pl-head { fill: var(--ol-off); }
.ol-pl-light { fill: var(--ol-off); opacity: .5; }
.ol-pl { transform-box: fill-box; transform-origin: 50% 100%; }
.ol-pl.on { animation: ol-wave 1.4s ease-in-out infinite alternate; }
.ol-c-pink .ol-pl.on .ol-pl-light { fill: var(--ol-pink); opacity: 1; }
.ol-c-red .ol-pl.on .ol-pl-light { fill: var(--ol-red); opacity: 1; }
.ol-c-blue .ol-pl.on .ol-pl-light { fill: var(--ol-blue); opacity: 1; }
.ol-c-orange .ol-pl.on .ol-pl-light { fill: var(--ol-orange); opacity: 1; }
.ol-c-purple .ol-pl.on .ol-pl-light { fill: var(--ol-purple); opacity: 1; }
.ol-c-green .ol-pl.on .ol-pl-light { fill: var(--ol-green); opacity: 1; }
.ol-c-teal .ol-pl.on .ol-pl-light { fill: var(--ol-teal); opacity: 1; }
.ol-spot-a { animation: ol-spot 3s ease-in-out infinite alternate; transform-origin: 80px 0; }
.ol-spot-b { animation: ol-spot 3.4s ease-in-out infinite alternate-reverse; transform-origin: 240px 0; }
@keyframes ol-wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes ol-spot { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* ガチャ */
.ol-slots { padding: 8px 12px; }
.ol-slot { display: grid; grid-template-columns: 4em 1fr auto; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px dashed var(--line); min-height: 52px; }
.ol-slot:last-child { border-bottom: 0; }
.ol-slot-label { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.ol-slot-val { font-weight: 800; font-size: 16px; line-height: 1.35; min-width: 0; }
.ol-slot.is-spinning .ol-slot-val { color: var(--text-sub); }
.rare-n { background: var(--surface-2); color: var(--text-sub); }
.rare-r { background: var(--good-soft); color: var(--good); }
.rare-sr { background: var(--info-soft); color: var(--info); }
.rare-ssr { background: var(--accent); color: var(--accent-ink); }

/* プレイ */
.ol-who { font-size: 14px; }
.ol-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 8px 0 10px; }
.ol-cal-cell { text-align: center; font-size: 11px; font-weight: 700; padding: 4px 0; border-radius: 6px; background: var(--surface-2); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.ol-cal-cell.is-done { background: var(--accent-soft); color: var(--accent); }
.ol-cal-cell.is-now { background: var(--accent); color: var(--accent-ink); }
.ol-meters { margin-bottom: 12px; }
.ol-money { font-size: clamp(24px, 7vw, 32px); font-weight: 900; line-height: 1.2; color: var(--ol-money); font-variant-numeric: tabular-nums; }
.ol-money.is-low { color: var(--bad); }
.ol-meter-row { display: grid; grid-template-columns: 3.5em 1fr 2.2em; gap: 8px; align-items: center; margin-top: 6px; }
.ol-mlabel { font-size: 12px; font-weight: 700; color: var(--text-sub); }
.ol-mval { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ol-m-love > span { background: var(--ol-pink); }
.ol-m-life > span { background: var(--good); }
.ol-m-hp > span { background: var(--info); }
.ol-meter-row.is-low .ol-mlabel, .ol-meter-row.is-low .ol-mval { color: var(--bad); }
.ol-meter-row.is-low .meter > span { background: var(--bad); }
.ol-qcard { border: 2px solid var(--accent); }
.ol-q { font-size: 19px; margin: 4px 0 8px; }
.choice:disabled { opacity: .5; cursor: not-allowed; }
.ol-outcome b { line-height: 1.5; }
.ol-evlist { list-style: none; margin: 8px 0 0; padding: 0; }
.ol-ev { display: flex; gap: 8px; justify-content: space-between; font-size: 14px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ol-ev:last-child { border-bottom: 0; }
.ol-ev-m { flex: none; width: 2.6em; font-size: 12px; color: var(--text-sub); padding-top: 2px; }
.ol-ev > span:nth-last-child(2):not(.ol-ev-m), .ol-ev > span:only-child { flex: 1; min-width: 0; }
.ol-ev-v { flex: none; font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.ol-ev-good { color: var(--good); }
.ol-ev-bad { color: var(--bad); }
.ol-ev-choice { font-weight: 700; }
.ol-next { margin-top: 12px; }
.ol-tickets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ol-ticket { width: 52px; height: 36px; border-radius: 6px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--text-sub); background: var(--surface-2); }
.ol-ticket.is-win { border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.ol-ticket.is-lose { border-style: solid; color: var(--text-sub); }

/* 結果 */
.ol-result-card { padding-top: 22px; }
.ol-badge { width: 120px; height: 120px; display: block; margin: 0 auto 6px; }
.ol-badge-ring { fill: var(--accent); }
.ol-badge-in { fill: var(--surface); }
.ol-badge-dot { fill: var(--accent-ink); }
.ol-badge-emoji { font-size: 44px; }
.ol-style-name { font-size: clamp(30px, 9vw, 44px); font-weight: 900; line-height: 1.2; color: var(--accent); }
.ol-line1 { font-weight: 800; font-size: 18px; margin: 8px 0; }
.ol-tip { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; text-align: left; margin: 10px 0 0; }
.ol-breakdown { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin: 4px 0 6px; }
.ol-bd-ticket { background: var(--ol-pink); }
.ol-bd-ensei { background: var(--ol-blue); }
.ol-bd-goods { background: var(--ol-orange); }
.ol-bd-stream { background: var(--ol-purple); }
.ol-bd-cafe { background: var(--ol-teal); }
.ol-bd-other { background: var(--text-sub); }
.ol-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--text-sub); }
.ol-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ol-chart { width: 100%; height: auto; display: block; margin: 12px 0 2px; }
.ol-axis { stroke: var(--line); stroke-width: 1; }
.ol-tick { fill: var(--text-sub); font-size: 9px; }
.ol-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ol-line-money { stroke: var(--ol-money); }
.ol-line-love { stroke: var(--ol-pink); stroke-dasharray: 5 3; }
.ol-chart-key { justify-content: center; gap: 6px; }
.ol-key { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.ol-key-money { background: var(--ol-money); }
.ol-key-love { background: var(--ol-pink); margin-left: 10px; }
.ol-again { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 16px; }
.ol-again .btn { padding: 10px 12px; font-size: 14px; white-space: normal; line-height: 1.35; }
.ol-dist { margin-top: 12px; display: grid; gap: 4px; }
.ol-dist-row { display: grid; grid-template-columns: 8.5em 1fr 3em; gap: 6px; align-items: center; font-size: 12px; }
.ol-dist-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ol-dist-bar i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.ol-dist-row.is-me { font-weight: 800; color: var(--accent); }
.ol-dist-row.is-me .ol-dist-bar i { background: var(--accent); }
.ol-dist-pct { text-align: right; font-variant-numeric: tabular-nums; }
.ol-sources ul { padding-left: 1.2em; margin: 8px 0; }
.ol-sources li + li { margin-top: 6px; }

/* 図鑑 */
.ol-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ol-zukan-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .6; }
.ol-zukan-item.on { opacity: 1; background: var(--surface); border: 1px solid var(--line); }
.ol-zukan-emoji { font-size: 26px; }

/* 静的解説 */
.ol-about h2 { font-size: 18px; margin-top: 8px; }
.ol-about p, .ol-about li { font-size: 14px; }
.ol-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ol-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ol-table th, .ol-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.ol-table th { color: var(--text-sub); white-space: nowrap; }
.ol-table a { word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  .ol-pl.on, .ol-spot-a, .ol-spot-b { animation: none; }
}
.ol-result-card .stats { grid-template-columns: repeat(3, 1fr); }
.ol-result-card .stat { padding: 8px 6px; min-width: 0; }
.ol-result-card .stat b { font-size: 19px; }
.ol-chart { max-width: 460px; margin-left: auto; margin-right: auto; }