/* =========================================================================
   oritoku-sim.css — /oritoku/simulator/ オリパシミュレーター
   oritoku.css（.ot-* の表・見出し・ハブ）に重ねて使う。値は var(--ds-*) のみ。
   ホロのグラデはこのページでは「大当たりの演出」1回だけ（.sim-stage--top）。
   ========================================================================= */

.sim-hero { margin-bottom: var(--ds-space-stack-md); }
.sim-hero::after { content: none; } /* ホロの線は置かない。このページのグラデは大当たりの演出 1 回だけ */
.sim-hero__title {
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-h1-size);
  line-height: var(--ds-text-h1-lh);
  font-weight: var(--ds-text-h1-weight);
}
.sim-hero__sub { margin: 0; color: var(--ds-color-text-muted); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-lh); }

/* ---------- 絞り込み ---------- */
.sim-filter {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-md); align-items: center; justify-content: space-between;
  margin-bottom: var(--ds-space-stack-sm);
}
.sim-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-sm); }
.sim-tab {
  display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs);
  min-height: var(--ds-touch-target-min);
  padding: 0 var(--ds-space-inline-md);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  font: inherit; font-size: var(--ds-text-body-sm-size); font-weight: var(--ds-text-h3-weight);
  cursor: pointer;
}
.sim-tab.is-active { background: var(--ds-color-bg-inverse); color: var(--ds-color-text-inverse); border-color: var(--ds-color-bg-inverse); }
.sim-tab__icon { border-radius: var(--ds-radius-avatar); }
.sim-tab__n { font-family: var(--ds-font-num); font-weight: var(--ds-text-body-weight); opacity: .75; }
.sim-sort { display: inline-flex; align-items: center; gap: var(--ds-space-inline-sm); font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); }
.sim-sort select {
  min-height: var(--ds-touch-target-min);
  padding: 0 var(--ds-space-inline-sm);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-bg); color: var(--ds-color-text);
  font: inherit; font-size: var(--ds-text-body-sm-size);
}

/* ---------- 一覧 ---------- */
.sim-list .sim-row { cursor: pointer; }
.sim-list .sim-row:hover, .sim-list .sim-row:focus-visible { background: var(--ds-color-bg-paper); outline: none; }
.sim-list .sim-row.is-selected { background: var(--ds-color-badge-bg-cream); }
.sim-list .sim-row.is-hidden { display: none; }
.sim-row__title { color: var(--ds-color-text); font-weight: var(--ds-text-h3-weight); text-decoration: none; }
.sim-row__title:hover { text-decoration: underline; }
.sim-row__site-sp, .sim-row__meta-sp { display: none; }
.sim-num { font-family: var(--ds-font-num); font-variant-numeric: tabular-nums; }
.sim-unit { margin-left: var(--ds-space-inline-xs); font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-rate { font-family: var(--ds-font-num); font-weight: var(--ds-text-h3-weight); }
.sim-rate--plus { color: var(--ds-color-positive); }
.sim-rate__note { margin-left: var(--ds-space-inline-xs); color: var(--ds-color-text-subtle); }
.sim-top { display: block; font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-lh); }
.sim-top__pt { display: block; font-family: var(--ds-font-num); font-size: var(--ds-text-micro-size); color: var(--ds-color-text-muted); }
.sim-col-left, .sim-col-hit, .sim-col-price, .sim-col-rate { white-space: nowrap; }
.sim-col-top { max-width: 14em; }

/* ---------- 引く ---------- */
.sim-play__empty { color: var(--ds-color-text-muted); }
.sim-box {
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-elevated);
  box-shadow: var(--ds-shadow-card);
  padding: var(--ds-space-stack-md);
}
.sim-box__head { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-md); align-items: flex-start; justify-content: space-between; margin-bottom: var(--ds-space-stack-sm); }
.sim-box__site { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); }
.sim-box__site img { border-radius: var(--ds-radius-avatar); }
.sim-box__title { margin: var(--ds-space-inline-xs) 0 0; font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-lh); font-weight: var(--ds-text-h3-weight); }
.sim-box__official { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); }
.sim-box__kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: var(--ds-space-inline-sm) var(--ds-space-inline-md); margin: 0 0 var(--ds-space-stack-sm); }
.sim-box__kv div { padding: var(--ds-space-inline-sm) var(--ds-space-inline-md); background: var(--ds-color-bg-paper); border-radius: var(--ds-radius-input); }
.sim-box__kv dt { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-box__kv dd { margin: 0; font-family: var(--ds-font-num); font-size: var(--ds-text-body-size); font-weight: var(--ds-text-h3-weight); font-variant-numeric: tabular-nums; }
.sim-meter { height: var(--ds-space-inline-sm); border-radius: var(--ds-radius-chip); background: var(--ds-color-bg-subtle); overflow: hidden; margin-bottom: var(--ds-space-stack-sm); }
.sim-meter__bar { height: 100%; background: var(--ds-color-bg-inverse); transition: width .4s ease; }

.sim-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-sm); align-items: center; margin: var(--ds-space-stack-sm) 0; }
.sim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-xs);
  min-height: var(--ds-touch-target-min);
  padding: 0 var(--ds-space-stack-md);
  border: var(--ds-border-width) solid var(--ds-color-bg-inverse);
  border-radius: var(--ds-radius-button);
  background: var(--ds-color-bg-inverse); color: var(--ds-color-text-inverse);
  font: inherit; font-size: var(--ds-text-body-size); font-weight: var(--ds-text-h3-weight);
  cursor: pointer;
}
.sim-btn:hover { background: var(--ds-color-text-muted); border-color: var(--ds-color-text-muted); }
.sim-btn:disabled { opacity: .45; cursor: default; }
.sim-btn--ghost { background: var(--ds-color-bg); color: var(--ds-color-text); }
.sim-btn--ghost:hover { background: var(--ds-color-bg-paper); border-color: var(--ds-color-bg-inverse); }
.sim-btn--small { min-height: var(--ds-touch-target-min); padding: 0 var(--ds-space-inline-md); font-size: var(--ds-text-body-sm-size); }
.sim-btn__cost { font-family: var(--ds-font-num); font-weight: var(--ds-text-body-weight); opacity: .8; font-size: var(--ds-text-caption-size); }
.sim-actions__note { flex-basis: 100%; margin: 0; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }

/* ラインナップ */
.sim-lineup { margin-top: var(--ds-space-stack-sm); }
.sim-lineup summary { cursor: pointer; font-weight: var(--ds-text-h3-weight); padding: var(--ds-space-inline-sm) 0; }
.sim-group { margin: var(--ds-space-stack-xs) 0; }
.sim-group__h { display: flex; align-items: baseline; gap: var(--ds-space-inline-sm); margin: 0 0 var(--ds-space-inline-xs); font-size: var(--ds-text-body-sm-size); }
.sim-group__meta { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); font-family: var(--ds-font-num); }
.sim-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: var(--ds-space-inline-xs) var(--ds-space-inline-sm); }
.sim-prize { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--ds-space-inline-sm); align-items: center; padding: var(--ds-space-inline-xs) var(--ds-space-inline-sm); border: var(--ds-border-width) solid var(--ds-color-border); border-radius: var(--ds-radius-input); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-lh); }
.sim-prize.is-gone { opacity: .45; }
.sim-prize__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-prize__pt { font-family: var(--ds-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-prize__left { grid-column: 1 / -1; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); font-family: var(--ds-font-num); }
.sim-prize__m { color: var(--ds-color-text-subtle); font-family: var(--ds-font-num); }

/* 賞のバッジ（ホロの単色。グラデではない） */
.sim-badge { display: inline-block; padding: 0 var(--ds-space-inline-sm); border-radius: var(--ds-radius-chip); font-size: var(--ds-text-micro-size); font-weight: var(--ds-text-h3-weight); color: var(--ds-color-badge-text); background: var(--ds-color-bg-subtle); white-space: nowrap; }
.sim-badge--top { background: var(--ds-color-badge-bg-pink); }
.sim-badge--high { background: var(--ds-color-badge-bg-cream); }
.sim-badge--mid { background: var(--ds-color-badge-bg-sky); }
.sim-badge--low { background: var(--ds-color-badge-bg-mint); }
.sim-badge--hz { background: var(--ds-color-bg-subtle); color: var(--ds-color-text-muted); }

/* 演出（結果が出るまでの間だけ表示） */
.sim-stage {
  position: relative; min-height: 8em; margin: var(--ds-space-stack-sm) 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-paper);
  overflow: hidden;
}
.sim-stage[hidden] { display: none; }
.sim-stage__text { font-size: var(--ds-text-h2-size); font-weight: var(--ds-text-h2-weight); line-height: var(--ds-text-h2-lh); }
.sim-stage__sub { display: block; margin-top: var(--ds-space-inline-xs); font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); font-weight: var(--ds-text-body-weight); }
.sim-stage--spin .sim-stage__text { animation: sim-pulse .5s ease-in-out infinite alternate; }
.sim-stage--shake { animation: sim-shake .12s linear 6; }
.sim-stage--high { background: var(--ds-color-badge-bg-cream); }
.sim-stage--mid { background: var(--ds-color-badge-bg-sky); }
.sim-stage--top { background: var(--ds-color-accent-gradient); }
.sim-stage--top .sim-stage__text { animation: sim-pop .45s ease-out 1; }
@keyframes sim-pulse { from { opacity: .35; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes sim-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-2%); } 75% { transform: translateX(2%); } 100% { transform: translateX(0); } }
@keyframes sim-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sim-stage--spin .sim-stage__text, .sim-stage--shake, .sim-stage--top .sim-stage__text { animation: none; }
}

/* 結果 */
.sim-result { margin-top: var(--ds-space-stack-sm); border-top: var(--ds-border-width) solid var(--ds-color-border); padding-top: var(--ds-space-stack-sm); }
.sim-result[hidden] { display: none; }
.sim-result__h { margin: 0 0 var(--ds-space-inline-sm); font-size: var(--ds-text-h3-size); font-weight: var(--ds-text-h3-weight); }
.sim-result__verdict { margin: 0 0 var(--ds-space-inline-sm); font-size: var(--ds-text-body-size); }
.sim-result__verdict strong { font-family: var(--ds-font-num); }
.sim-result__kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: var(--ds-space-inline-sm); margin: 0 0 var(--ds-space-stack-sm); }
.sim-result__kv div { padding: var(--ds-space-inline-sm) var(--ds-space-inline-md); border: var(--ds-border-width) solid var(--ds-color-border); border-radius: var(--ds-radius-input); }
.sim-result__kv dt { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-result__kv dd { margin: 0; font-family: var(--ds-font-num); font-size: var(--ds-text-h3-size); font-weight: var(--ds-text-h3-weight); font-variant-numeric: tabular-nums; }
.sim-result__kv dd.is-plus { color: var(--ds-color-positive); }
.sim-result__kv dd.is-minus { color: var(--ds-color-danger); }
.sim-hits { list-style: none; margin: 0 0 var(--ds-space-stack-sm); padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-xs) var(--ds-space-inline-sm); }
.sim-hit { display: inline-flex; align-items: center; gap: var(--ds-space-inline-xs); padding: var(--ds-space-inline-xs) var(--ds-space-inline-sm); border: var(--ds-border-width) solid var(--ds-color-border); border-radius: var(--ds-radius-input); font-size: var(--ds-text-caption-size); }
.sim-hit--hz { color: var(--ds-color-text-muted); }
.sim-hit__n { font-family: var(--ds-font-num); color: var(--ds-color-text-muted); }
.sim-result__note { margin: 0 0 var(--ds-space-inline-sm); font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-result__soldout { margin: 0 0 var(--ds-space-inline-sm); padding: var(--ds-space-inline-sm) var(--ds-space-inline-md); background: var(--ds-color-badge-bg-peach); border-radius: var(--ds-radius-input); font-size: var(--ds-text-caption-size); }
.sim-share { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-sm); }
.sim-share a { text-decoration: none; }

/* ---------- みんなの結果 ---------- */
.sim-live { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-stack-md); }
.sim-live__h { margin: 0 0 var(--ds-space-inline-sm); font-size: var(--ds-text-body-size); font-weight: var(--ds-text-h3-weight); }
.sim-live__note { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); font-weight: var(--ds-text-body-weight); }
.sim-feed { list-style: none; margin: 0; padding: 0; }
.sim-feed li { padding: var(--ds-space-inline-sm) 0; border-bottom: var(--ds-border-width) solid var(--ds-color-border); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-lh); }
.sim-feed__empty { color: var(--ds-color-text-subtle); }
.sim-feed__who { font-weight: var(--ds-text-h3-weight); }
.sim-feed__ago { float: right; color: var(--ds-color-text-subtle); font-family: var(--ds-font-num); }
.sim-feed__prize { display: block; }
.sim-feed__gacha { display: block; color: var(--ds-color-text-subtle); font-size: var(--ds-text-micro-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-rank { list-style: none; margin: 0 0 var(--ds-space-stack-sm); padding: 0; counter-reset: rank; }
.sim-rank li { display: grid; grid-template-columns: 2em 1fr auto; gap: var(--ds-space-inline-sm); align-items: baseline; padding: var(--ds-space-inline-sm) 0; border-bottom: var(--ds-border-width) solid var(--ds-color-border); font-size: var(--ds-text-caption-size); }
.sim-rank li.is-me { background: var(--ds-color-badge-bg-cream); }
.sim-rank__pos { font-family: var(--ds-font-num); font-weight: var(--ds-text-h3-weight); }
.sim-rank__pos.is-1 { color: var(--ds-color-rank-1); }
.sim-rank__pos.is-2 { color: var(--ds-color-rank-2); }
.sim-rank__pos.is-3 { color: var(--ds-color-rank-3); }
.sim-rank__name { font-weight: var(--ds-text-h3-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-rank__meta { display: block; color: var(--ds-color-text-subtle); font-size: var(--ds-text-micro-size); font-family: var(--ds-font-num); font-weight: var(--ds-text-body-weight); }
.sim-rank__rate { font-family: var(--ds-font-num); font-weight: var(--ds-text-h3-weight); font-variant-numeric: tabular-nums; }
.sim-me { margin-top: var(--ds-space-stack-sm); padding: var(--ds-space-stack-sm); background: var(--ds-color-bg-paper); border-radius: var(--ds-radius-card); }
.sim-me__kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-inline-sm); margin: 0 0 var(--ds-space-stack-sm); }
.sim-me__kv dt { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-me__kv dd { margin: 0; font-family: var(--ds-font-num); font-size: var(--ds-text-body-sm-size); font-weight: var(--ds-text-h3-weight); font-variant-numeric: tabular-nums; }
.sim-name__label { display: block; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); margin-bottom: var(--ds-space-inline-xs); }
.sim-name__row { display: flex; gap: var(--ds-space-inline-sm); }
.sim-name__input { flex: 1; min-width: 0; min-height: var(--ds-touch-target-min); padding: 0 var(--ds-space-inline-md); border: var(--ds-border-width) solid var(--ds-color-border-strong); border-radius: var(--ds-radius-input); font: inherit; font-size: var(--ds-text-body-sm-size); background: var(--ds-color-bg); color: var(--ds-color-text); }
.sim-name__note { margin: var(--ds-space-inline-xs) 0 0; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
.sim-name__msg { margin: var(--ds-space-inline-xs) 0 0; min-height: 1.4em; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-muted); }

/* ---------- FAQ ---------- */
.sim-faq { margin: 0; }
.sim-faq__item { padding: var(--ds-space-stack-sm) 0; border-bottom: var(--ds-border-width) solid var(--ds-color-border); }
.sim-faq__q { font-weight: var(--ds-text-h3-weight); margin-bottom: var(--ds-space-inline-xs); }
.sim-faq__a { margin: 0; color: var(--ds-color-text-muted); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-lh); }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .sim-live { grid-template-columns: 1fr; }
  .sim-list .sim-col-site, .sim-list .sim-col-hit, .sim-list .sim-col-top, .sim-list .sim-col-price { display: none; }
  .sim-row__site-sp { display: block; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }
  .sim-row__meta-sp { display: block; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); font-family: var(--ds-font-num); }
  .sim-col-left .sim-unit { display: none; }
  .sim-box { padding: var(--ds-space-stack-sm); }
  .sim-prizes { grid-template-columns: 1fr; }
  .sim-actions .sim-btn { flex: 1 1 30%; padding: 0 var(--ds-space-inline-sm); flex-direction: column; gap: 0; line-height: 1.2; }
  .sim-me__kv { grid-template-columns: 1fr 1fr; }
}