:root {
  --green: #8cff3a;
  --pink: #ff4078;
  --cyan: #3fd0ff;
  --amber: #ffb020;
  --panel: rgba(16, 18, 20, 0.9);
  --cond: "Avenir Next Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #050607;
  color: #fff;
  font-family: var(--sans);
}

body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 64, 120, 0.18), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(140, 255, 58, 0.12), transparent 45%),
    #050607;
}

button {
  font-family: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ---- PC: 中央にスマホ枠 ---- */

.desk {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.device {
  position: relative;
  width: 390px;
  height: min(844px, calc(100dvh - 32px));
  border-radius: 46px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 10px #16181b,
    0 0 0 12px #2c2f33,
    0 30px 90px rgba(0, 0, 0, 0.7);
  isolation: isolate;
}

.device .top {
  top: 16px;
}

.device .bottom {
  bottom: 14px;
}

@media (max-width: 600px), (max-height: 640px) {
  .desk {
    display: block;
    padding: 0;
  }

  .device {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .device .top {
    top: calc(var(--safe-t) + 8px);
  }

  .device .bottom {
    bottom: calc(var(--safe-b) + 8px);
  }
}

/* ---- フィード ---- */

.feed {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.feed::-webkit-scrollbar {
  display: none;
}

.item {
  position: relative;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #000;
}

/* 焼き込みの表示（上部の枠・コメント欄・投票パネル）を、縮小して描いた canvas を引き伸ばしたぼかしで隠す。
   位置は 720×1280 の動画に対する割合 */
.cover {
  position: absolute;
  left: -6%;
  display: block;
  width: 112%;
  pointer-events: none;
  filter: blur(7px) brightness(0.55) saturate(1.25);
  transition: opacity 0.4s;
}

/* 焼き込みの上部表示（タイトル・配信者カード・状態・時計）は、ぼかしではなく上からの暗いグラデーションで沈める */
.top-shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24%;
  background: linear-gradient(to bottom, rgba(6, 6, 10, 0.97) 0%, rgba(6, 6, 10, 0.95) 72%, rgba(6, 6, 10, 0));
  pointer-events: none;
}

.room.endcard .top-shade {
  opacity: 0;
  transition: opacity 0.5s;
}

/* 焼き込みのコメント欄は左側だけ。右側（台の操作・手元）は見せる */
.cover.cv-chat {
  top: 61.72%;
  width: 70%;
  height: 41.28%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px), linear-gradient(to right, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px), linear-gradient(to right, #000 80%, transparent);
  mask-composite: intersect;
}

.cover.cv-bar {
  top: 91.41%;
  height: 11.59%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}

.room.endcard .ui {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

/* ---- LIVE 画面の表示 ---- */

.ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.top {
  position: absolute;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

.hdr {
  display: flex;
  align-items: center;
  gap: 6px;
}

.grow {
  flex: 1;
}

.host {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 4px 3px 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
}

.ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #ff9a3c);
  flex: none;
}

.host-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #000;
  object-fit: cover;
}

.host-av.emoji {
  display: grid;
  place-items: center;
  background: #222;
  font-size: 16px;
}

.who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.who b {
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
}

.who .sub {
  font-size: 10.5px;
  opacity: 0.8;
  white-space: nowrap;
}

.follow {
  border: 0;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.follow.on {
  background: rgba(255, 255, 255, 0.2);
}

.viewers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stack {
  display: flex;
}

.stack .av {
  margin-left: -9px;
  border: 2px solid #000;
}

.count {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pill {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.x {
  width: 26px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 17px;
}

.chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.chips .lang {
  padding: 3px 8px;
}

.chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  white-space: nowrap;
}

.live-chip {
  background: var(--pink);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.chip.gold {
  color: #ffd84a;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: auto;
  gap: 6px;
}

/* 上部の状態の行の右端。上のヘッダーの丸いボタンと同じ見た目 */
.share-btn {
  display: grid;
  place-items: center;
  align-self: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  transition: transform 0.12s;
}

.share-btn:active {
  transform: scale(0.92);
}

.share-btn .ico {
  display: grid;
}

.status,
.clock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 5px 10px 5px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: var(--panel);
}

.xh {
  display: grid;
  flex: none;
}

.st-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.st-txt b {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-txt small,
.status.simple small {
  font-family: var(--cond);
  font-size: 12px;
  color: #bec4c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status.simple {
  padding-left: 12px;
}

.status.simple b {
  display: block;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
}

.dot-live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(255, 64, 120, 0.7);
  animation: pulse 1.6s infinite;
  flex: none;
}

.clock {
  padding: 5px 8px;
  gap: 6px;
}

.clk {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.att {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 6px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.25);
  line-height: 1;
}

.att small {
  font-family: var(--cond);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.att b {
  font-family: var(--cond);
  font-size: 20px;
  line-height: 1;
  color: var(--green);
}

.steprow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.step {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step i {
  margin-right: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #0a0a0a;
  font-family: var(--cond);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.budget {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 投票・オークションのパネル（下部の入力欄のすぐ上。配信者と台を隠さないよう薄く） ---- */

.panel-slot {
  display: none;
}

.panel-slot.on {
  display: block;
  animation: panelIn 0.3s ease-out;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.vpanel {
  padding: 7px 10px 7px;
  border: 1.5px solid var(--cyan);
  border-radius: 14px;
  background: rgba(12, 14, 16, 0.86);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.vpanel.auction {
  border-color: var(--amber);
}

.vpanel.pulse {
  animation: glow 0.9s 2;
}

.vp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.vp-head > div {
  display: flex;
  align-items: center;
  min-width: 0;
}

.vp-head b {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vp-head small {
  display: none;
}

.timer {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.timer.hot {
  background: var(--pink);
  animation: pop 0.4s;
}

.wins {
  flex: none;
  padding: 1px 10px;
  border-radius: 10px;
  background: var(--pink);
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 800;
  animation: pop 0.35s;
}

.vp-bar {
  height: 3px;
  margin: 6px 0 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.vp-bar i {
  display: block;
  height: 100%;
  background: var(--cyan);
}

.vp-bar.amber i {
  background: var(--amber);
}

/* 3 択は横並び。上段に記号と割合、下段に台の名前 */
.vopts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.vopt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 5px 7px 5px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--cond);
  font-weight: 700;
  text-align: left;
  overflow: hidden;
}

.vo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.vopt .pc {
  font-size: 17px;
  line-height: 1.1;
}

.vopt .nm {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  opacity: 0.92;
}

.vopt:has(.vo-st) .nm {
  text-align: center;
}

.vo-st {
  position: relative;
  z-index: 1;
  align-self: center;
  height: 44px;
  max-width: 100%;
  margin: 1px 0 2px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transform: rotate(-4deg);
  transition: transform 0.2s;
  pointer-events: none;
}

.vopt:nth-child(2) .vo-st {
  transform: rotate(3deg);
}

.vopt:not(:disabled):active .vo-st {
  transform: scale(0.9);
}

.vopt.mine .vo-st {
  animation: vo-wiggle 1.6s ease-in-out infinite;
}

.vopt.win .vo-st {
  animation: vo-hop 0.9s ease-in-out infinite;
}

.vopt.lose .vo-st {
  filter: grayscale(0.7) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

@keyframes vo-wiggle {
  0%,
  100% {
    transform: rotate(-6deg) scale(1.06);
  }
  50% {
    transform: rotate(6deg) scale(1.06);
  }
}

@keyframes vo-hop {
  0%,
  100% {
    transform: translateY(0) scale(1.1);
  }
  40% {
    transform: translateY(-5px) scale(1.16) rotate(-5deg);
  }
}

.vopt:disabled {
  color: #fff;
  opacity: 1;
  cursor: default;
}

.vopt:not(:disabled):active {
  transform: scale(0.98);
}

.vopt > span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.vopt .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(63, 208, 255, 0.55);
  transition: width 0.2s linear;
}

.vopt .k {
  width: 20px;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
}

.vopt.mine {
  box-shadow: inset 0 0 0 2px var(--green);
}

.vopt.mine .fill {
  background: rgba(140, 255, 58, 0.5);
}

.vopt.win .fill {
  background: var(--pink);
}

.vopt.lose {
  opacity: 0.55;
}

.vp-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 10.5px;
  color: #aab;
}

.vp-foot small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vp-foot small:last-child {
  flex: none;
}

.au-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.au-cur small {
  display: block;
  font-size: 10px;
  color: #aab;
}

.au-cur b {
  display: block;
  font-family: var(--cond);
  font-size: 34px;
  line-height: 1;
  color: var(--amber);
}

.au-cur small.me {
  color: var(--green);
  font-weight: 700;
}

.au-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.au-list li {
  display: flex;
  justify-content: space-between;
  color: #9aa0a8;
}

.au-list li.lead {
  color: #fff;
  animation: pop 0.3s;
}

.au-list li.me {
  color: var(--green);
}

.au-ctrl {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.stepper {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.stepper button {
  width: 36px;
  height: 40px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 20px;
}

.stepper b {
  min-width: 48px;
  text-align: center;
  font-family: var(--cond);
  font-size: 20px;
}

.btn.bid {
  margin: 0;
  padding-top: 7px;
  padding-bottom: 7px;
  background: var(--amber);
  color: #111;
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 800;
}

.sold {
  margin-top: 6px;
  padding: 4px;
  border-radius: 10px;
  background: var(--pink);
  text-align: center;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 800;
  animation: pop 0.35s;
}

.au-state {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
}

.vpanel .fine {
  margin-top: 3px;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.au-state.ok {
  color: var(--green);
}

.au-state.bad {
  color: #ff7a9a;
}

.fine {
  display: block;
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: #8a9099;
}

.center {
  text-align: center;
}

/* ---- 下部：ギフトのバナー・ピン留め商品・コメント・入力欄 ---- */

.bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px;
  pointer-events: none;
}

.bottom > * {
  pointer-events: auto;
}

.room.paneling .banners .banner {
  display: none;
}

.banners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 44px 3px 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 64, 120, 0.9), rgba(255, 64, 120, 0));
  animation: slideIn 0.3s ease-out;
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.banner.out {
  opacity: 0;
  transform: translateX(-24px);
}

.banner .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.banner .txt b {
  font-size: 12px;
}

.banner .txt small {
  font-size: 11px;
  opacity: 0.9;
}

.banner .gem {
  height: 38px;
  margin: -4px 0;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.banner .combo {
  font-family: var(--cond);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  color: #ffd84a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.banner .combo.bump {
  animation: bump 0.3s;
}

.chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  width: 70%;
  height: calc(340px * var(--s, 0.66));
  overflow: hidden;
  opacity: 0.86;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
  mask-image: linear-gradient(to bottom, transparent, #000 26%);
  pointer-events: none;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 3px 9px 4px 3px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 12.5px;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: rowIn 0.2s ease-out;
  flex: none;
}

.row small {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}

.row.self {
  background: rgba(140, 255, 58, 0.16);
}

.row.join {
  padding-left: 8px;
  background: none;
  font-size: 12px;
  color: #cfe;
  opacity: 0.85;
}

.row.sys {
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  color: #ffe27a;
}

.row.gift span {
  color: #ffd84a;
}

.row.gift em {
  font-style: normal;
  font-weight: 800;
}

.row.gift .gift-st {
  height: 26px;
  margin: -4px 0 -6px 4px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.row.buy {
  padding: 4px 9px;
  font-size: 12px;
  color: #ffd1e0;
}

.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  color: #000;
  font-weight: 800;
  text-shadow: none;
}

/* 下部の操作：ワンタップのリアクション列と、入力欄＋ボタンのドック */

.bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -10px;
  padding: 2px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
}

.quick::-webkit-scrollbar {
  display: none;
}

/* 無料ステッカーのワンタップ列。ステッカーそのものを並べ、左端の丸でステッカーの画面を開く */
.qst {
  display: grid;
  flex: none;
  place-items: center;
  height: 40px;
  min-width: 40px;
  padding: 0 5px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  transition:
    transform 0.12s,
    background 0.15s;
}

.qst img {
  display: block;
  height: 32px;
  max-width: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.qst:active {
  transform: scale(0.88);
}

.qst.bump {
  background: rgba(255, 64, 120, 0.4);
  animation: pop 0.3s ease-out;
}

.qst.open {
  width: 40px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d6f, #ffb020);
  box-shadow: 0 3px 10px rgba(255, 45, 111, 0.4);
  color: #fff;
}

.room.typing .quick {
  display: none;
}

.room.paneling .chat {
  height: calc(200px * var(--s, 0.66));
}

/* 下部の操作（TikTok LIVE と同じく枠で囲まず、半透明の丸いボタンと細い入力欄を並べる） */
.dock {
  display: flex;
  align-items: center;
  gap: 8px;
}

.say {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 0 4px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.42);
  transition: box-shadow 0.15s, background 0.15s;
}

.say:focus-within {
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 0 1.5px rgba(255, 64, 120, 0.85);
}

.say-ico {
  display: grid;
  flex: none;
  color: rgba(255, 255, 255, 0.55);
}

.say input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.say input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.send {
  display: none;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  animation: pop 0.2s ease-out;
}

.dock.has-text .send {
  display: grid;
}

.act {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  transition: transform 0.12s, background 0.15s;
}

.act:active {
  transform: scale(0.88);
  background: rgba(0, 0, 0, 0.6);
}

.act .ico {
  display: grid;
}

/* この LIVE のいいね数（いいねの右上の小さな札。ほかの視聴者の分も増えていく） */
.act-lbl {
  position: absolute;
  top: -6px;
  right: -3px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  padding: 2px 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.act-lbl:empty {
  display: none;
}

.act.gift {
  border-color: rgba(255, 120, 170, 0.55);
  box-shadow: 0 0 12px rgba(255, 64, 140, 0.35);
}

.act.like .ico {
  color: var(--pink);
}

.act.like.bump .ico {
  animation: likeBump 0.35s ease-out;
}

.room.typing .act {
  display: none;
}

@keyframes likeBump {
  40% {
    transform: scale(1.35);
  }
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #15151c;
  border-radius: 999px;
  background: #fff;
  color: var(--pink);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 13px;
}

.hearts {
  position: absolute;
  right: 6px;
  bottom: calc(var(--safe-b) + 110px);
  width: 64px;
  height: 45%;
  pointer-events: none;
}

.heart {
  position: absolute;
  right: 14px;
  bottom: 0;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  animation: heartUp 2.4s ease-out forwards;
}

.heart.big {
  font-size: 34px;
}

.heart.at {
  right: auto;
  bottom: auto;
  font-size: 84px;
  animation: tapHeart 0.9s ease-out forwards;
}

.big-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.big-gift {
  position: absolute;
  left: 50%;
  top: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: bigGift 2.6s ease-out forwards;
}

.big-gift .emo {
  height: 150px;
}

.big-gift b {
  font-size: 18px;
}

.unmute {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  pointer-events: auto;
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.track {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.track li {
  position: relative;
  margin: 9px 0;
  padding-left: 22px;
  font-size: 13px;
}

.track li small {
  display: block;
  font-size: 11px;
  color: #aab;
}

.track li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
}

.track li.done::before {
  background: var(--green);
}

.track li.now::before {
  border: 2px solid var(--amber);
  animation: pulse 1.6s infinite;
}

.lines .line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}

.lines .line.green span:last-child {
  color: var(--green);
}

.lines .line.total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lines .line.total b {
  font-size: 17px;
}

/* ---- ボタン・シート・トースト ---- */

.btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn:not(:disabled):active {
  transform: scale(0.97);
}

.btn.primary,
.btn.hot {
  background: var(--pink);
}

.btn.sm {
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.btn.wide {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.btn.big {
  padding: 14px;
  font-size: 17px;
}

.btn.done {
  background: rgba(140, 255, 58, 0.18);
  color: var(--green);
}

.btn.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.sheet-back {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s;
}

.sheet-back.on {
  opacity: 1;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 78%;
  overflow-y: auto;
  padding-bottom: var(--safe-b);
  border-radius: 20px 20px 0 0;
  background: #15171a;
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.26s ease-out;
}

.sheet.on {
  transform: none;
}

.sheet.tall {
  max-height: 88%;
}

.grab {
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.sheet-body {
  padding: 10px 16px 18px;
}

.sheet-body h3 {
  margin: 8px 0 4px;
  font-size: 17px;
  line-height: 1.3;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet-head h3 {
  flex: 1;
  margin: 0;
}

.sheet-head small {
  color: #aab;
}

.fomo {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--amber);
}

.shop-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-thumb {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
}

.shop-thumb img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #222;
}

.shop-thumb i {
  position: absolute;
  top: -5px;
  left: -5px;
  font-style: normal;
}

.shop-info {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
}

.shop-info b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
}

.shop-info small {
  font-size: 11.5px;
  color: #aab;
}

.prod-hero {
  position: relative;
}

.prod-hero img {
  display: block;
  width: 100%;
  height: 230px;
  border-radius: 14px;
  object-fit: cover;
  background: #222;
}

.prod-hero.session img {
  height: 160px;
  object-position: center 30%;
}

.prod-hero .deal {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pink);
  font-size: 11px;
  font-weight: 800;
}

.price-big {
  margin: 4px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--pink);
}

.price-big s {
  font-size: 15px;
  font-weight: 400;
  color: #888;
}

.price-big small {
  font-size: 12px;
  font-weight: 400;
  color: #aab;
}

.desc {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #ccd;
}

.fees {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #ccd;
}

.sheet .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.sheet .opt small {
  color: #aab;
}

.seg {
  display: flex;
  gap: 6px;
}

.seg button {
  width: 42px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
}

.seg button.on {
  border-color: var(--pink);
  background: rgba(255, 64, 120, 0.2);
}

.country {
  max-width: 60%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
}

.country option {
  color: #000;
}

.co-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.co-item img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.co-item b {
  font-size: 13px;
}

.co-item small {
  display: block;
  color: #aab;
  font-size: 12px;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0 4px;
}

.gift-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.gift-cell.on {
  border-color: var(--pink);
  background: rgba(255, 64, 120, 0.14);
}

.gift-cell .emo {
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}

.gift-cell small {
  font-size: 10.5px;
  text-align: center;
}

.gift-cell i {
  font-size: 10px;
  font-style: normal;
  color: #ffd84a;
}

.packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.pack {
  padding: 10px 6px;
  border: 1px solid rgba(255, 216, 74, 0.4);
  border-radius: 12px;
  background: rgba(255, 216, 74, 0.1);
  color: #fff;
}

.pack b {
  display: block;
  font-size: 14px;
}

.pack small {
  color: #aab;
}

#toast {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 50;
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.82);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}

#toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- 参加画面 ---- */

.join {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #000;
}

.join-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(4px) brightness(0.5);
}

.join-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 20px 20px calc(var(--safe-b) + 26px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 45%, transparent 85%);
}

.join-top {
  position: absolute;
  top: calc(var(--safe-t) + 18px);
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.join-top .lang {
  margin-left: auto;
}

.join-top .back {
  text-decoration: none;
  font-size: 13px;
}

.logo {
  display: flex;
  flex-direction: column;
  font-family: var(--cond);
  font-size: 46px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.logo em {
  font-style: normal;
  color: var(--green);
}

.tag {
  margin: 0;
  font-size: 15px;
  color: #dde;
}

.join-host {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.join-host img {
  width: 44px;
  height: 44px;
  border: 2px solid var(--pink);
  border-radius: 50%;
  object-fit: cover;
}

.join-host b {
  font-size: 14px;
}

.join-host small {
  display: block;
  font-size: 12px;
  color: #bbc;
}

.field small {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #aab;
}

.at {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.at span {
  font-size: 16px;
  color: #aab;
}

.at input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding-left: 4px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 16px;
  outline: none;
}

/* ---- 告知カード ---- */

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 32px),
    #050607;
}

.an-body {
  width: 100%;
  max-width: 340px;
  padding: 24px;
  text-align: center;
}

.an-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c);
  color: #000;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.an-body h2 {
  margin: 14px 0 4px;
  font-family: var(--cond);
  font-size: 50px;
  line-height: 1;
}

.an-when {
  margin: 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.an-target {
  margin: 0;
  font-size: 14px;
  color: #ccd;
}

.an-count {
  margin: 14px 0 6px;
  font-size: 12px;
  color: #aab;
}

.hint {
  margin-top: 18px;
  font-size: 12px;
  color: #aab;
  animation: bob 1.6s infinite;
}

/* ---- 動き ---- */

@keyframes heartUp {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(0, -20px) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -300px) scale(1.15) rotate(var(--rot));
  }
}

@keyframes tapHeart {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(var(--rot));
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2) rotate(var(--rot));
  }
  45% {
    transform: translate(-50%, -50%) scale(1) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -140%) scale(1.3) rotate(var(--rot));
  }
}

@keyframes bigGift {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.3);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(0.8);
  }
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
}

@keyframes pop {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.12);
  }
}

@keyframes bump {
  50% {
    transform: scale(1.5);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 64, 120, 0.7);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 64, 120, 0);
  }
}

@keyframes glow {
  50% {
    box-shadow: 0 0 0 6px rgba(255, 176, 32, 0.5);
  }
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  15%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@keyframes bob {
  50% {
    transform: translateY(-4px);
  }
}

/* ---- ホーム・購入品・マイページ（色は変数。data-theme="jtcc" で日本トレカセンター風に切り替える） ---- */

.app,
.sheet.in-app {
  --bg: #0a0b0e;
  --ink: #fff;
  --sub: #c3c8cf;
  --faint: #8c939b;
  --card: #16181d;
  --card2: #22252c;
  --line: rgba(255, 255, 255, 0.1);
  --accent: var(--pink);
  --accent-ink: #fff;
  --sel: var(--pink);
  --live: #ff2d64;
  --gold: #ffd84a;
  --ok: #8cff3a;
  --price: #ff5c8a;
  --link: var(--cyan);
  --tabbg: rgba(10, 11, 14, 0.96);
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

[data-theme="jtcc"] .app,
[data-theme="jtcc"] .sheet.in-app {
  --bg: #f2f2f4;
  --ink: #2e2e2e;
  --sub: #55565c;
  --faint: #8a8a8e;
  --card: #fff;
  --card2: #f2f2f4;
  --line: #e2e2e6;
  --accent: #ffd71f;
  --accent-ink: #2e2e2e;
  --sel: #22ac38;
  --live: #f30296;
  --gold: #d9a400;
  --ok: #17a53a;
  --price: #ea453c;
  --link: #1f6fe0;
  --tabbg: #fff;
  --shadow: 0 4px 16px rgba(20, 20, 40, 0.08);
  --band: linear-gradient(160deg, #b61ad8 0%, #d615b8 55%, #ec1690 100%);
}

.app {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 50% at 0% 0%, rgba(255, 64, 120, 0.14), transparent 60%), var(--bg);
  color: var(--ink);
}

[data-theme="jtcc"] .app {
  background: var(--bg);
}

.app-view {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.app-view::-webkit-scrollbar {
  display: none;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 16px 28px;
}

.app .muted {
  color: var(--sub);
}

.app .fine,
.sheet.in-app .fine {
  color: var(--faint);
}

.app .dot-live {
  background: var(--live);
}

/* ヘッダー（上に貼りつく） */

.app-hd {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0 -16px -8px;
  padding: max(12px, calc(var(--safe-t) + 6px)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[data-theme="jtcc"] .app-hd {
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}

.app-hd h2 {
  margin: 0;
  font-family: var(--cond);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.app-hd .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}

.app-hd .back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 15px;
  text-decoration: none;
}

.pill.coin {
  gap: 2px;
  font-family: var(--cond);
  font-size: 15px !important;
  font-weight: 800;
}

.app .pill.coin {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
}

[data-theme="jtcc"] .app .pill.coin {
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="jtcc"] .app-hd .pill.lang {
  border: 2px solid #f8c215;
  color: var(--ink);
}

.coin-ico {
  position: relative;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.22em;
  font-style: normal;
  vertical-align: -0.14em;
}

.coin-ico::before {
  content: "🪙";
  position: absolute;
  inset: 0;
  font-size: 0.95em;
  line-height: 1.1em;
  text-align: center;
}

[data-theme="jtcc"] .coin-ico::before {
  content: "";
  border-radius: 50%;
  background: linear-gradient(160deg, #dff566, #8fc31f);
  box-shadow: inset 0 0 0 1.5px #5c9a12;
}

[data-theme="jtcc"] .coin-ico::after {
  content: "";
  position: absolute;
  top: 31%;
  left: 31%;
  width: 38%;
  height: 38%;
  border-radius: 1px;
  background: #178a2c;
  transform: rotate(45deg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand > span {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand b {
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand em {
  color: var(--green);
  font-style: normal;
}

.brand small {
  margin-top: 3px;
  color: var(--pink);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.brand-mark {
  position: relative;
  flex: none;
  width: 26px;
  height: 24px;
}

.brand-mark i {
  position: absolute;
  border-radius: 3px;
  transform: rotate(45deg);
}

.brand-mark i:first-child {
  top: 6px;
  left: 1px;
  width: 15px;
  height: 15px;
  background: var(--pink);
}

.brand-mark i:last-child {
  top: 1px;
  left: 13px;
  width: 10px;
  height: 10px;
  background: var(--green);
}

[data-theme="jtcc"] .brand em {
  color: #22ac38;
}

[data-theme="jtcc"] .brand small {
  color: var(--faint);
}

[data-theme="jtcc"] .brand-mark i:first-child {
  background: #22ac38;
}

[data-theme="jtcc"] .brand-mark i:last-child {
  background: #8fc31f;
}

/* あいさつ */

.hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.hello-txt {
  min-width: 0;
}

.hello-txt small {
  color: var(--sub);
  font-size: 13px;
  font-weight: 700;
}

.hello-txt h1 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  word-break: break-all;
}

.hello-live {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--live) 14%, var(--card));
  color: var(--ink);
  text-align: left;
}

.hello-live b {
  display: block;
  color: var(--live);
  font-family: var(--cond);
  font-size: 22px;
  line-height: 1;
}

.hello-live small {
  color: var(--sub);
  font-size: 10.5px;
  font-weight: 800;
}

[data-theme="jtcc"] .hello-live {
  border: 0;
  background: #fff;
  box-shadow: var(--shadow);
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 176, 32, 0.5);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 176, 32, 0.24), rgba(255, 64, 120, 0.12)), var(--card);
  color: var(--ink);
  text-align: left;
}

.notice .emo {
  font-size: 26px;
}

.notice b,
.notice small {
  display: block;
}

.notice small {
  margin-top: 2px;
  color: #ffc861;
  font-size: 12px;
  font-weight: 700;
}

[data-theme="jtcc"] .notice {
  border: 2px solid #f8c215;
  background: #fff8d6;
}

[data-theme="jtcc"] .notice small {
  color: #b07800;
}

/* 見出し */

.sec h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
}

.sec-note {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

.sec h2 .more {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
}

.sec h2 .sec-note:last-child {
  margin-left: auto;
}

[data-theme="jtcc"] .sec.band {
  margin: 0 -16px;
  padding: 16px 16px 18px;
  background: var(--band);
}

[data-theme="jtcc"] .sec.band h2 {
  color: #fff;
}

[data-theme="jtcc"] .sec.band .sec-t::before,
[data-theme="jtcc"] .sec.band .sec-t::after {
  content: "⚡";
  margin: 0 4px;
  color: #ffe357;
}

[data-theme="jtcc"] .sec.band .sec-note {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="jtcc"] .sec.band .dot-live {
  background: #ffe357;
}

.rail {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  scroll-snap-align: start;
}

/* 配信中：縦長のカード */

.live-card {
  position: relative;
  flex: none;
  width: 42%;
  max-width: 200px;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #111;
  color: #fff;
  text-align: left;
  box-shadow: var(--shadow);
}

.live-card.top {
  box-shadow:
    0 0 0 2px var(--live),
    var(--shadow);
}

[data-theme="jtcc"] .live-card.top {
  box-shadow:
    0 0 0 3px #ffe357,
    0 8px 22px rgba(60, 0, 60, 0.35);
}

.live-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.live-card:active > img {
  transform: scale(1.04);
}

.live-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 22%, transparent 45%, rgba(0, 0, 0, 0.9));
}

.lc-top,
.lc-bot {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lc-top {
  top: 8px;
}

.lc-top .chip {
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 800;
}

.lc-top .live-chip {
  background: var(--live);
  font-style: normal;
}

.lc-rank {
  position: absolute;
  top: 34px;
  left: 8px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff9a1f, #ff3b3b);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.lc-bot {
  bottom: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lc-tags {
  display: flex;
  gap: 4px;
}

.lc-tags i {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
}

[data-theme="jtcc"] .lc-tags i {
  background: #ffe357;
  color: #2e2e2e;
}

.lc-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lc-host {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.lc-host .h-av {
  box-shadow: 0 0 0 2px var(--live);
}

.lc-host small {
  overflow: hidden;
  color: #eceef2;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h-av {
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}

.h-av.emoji {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #ffb020, #ff7a45);
}

/* 配信者 */

.st-chip {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 76px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}

.st-chip .ring {
  display: block;
  width: auto;
  height: auto;
  padding: 3px;
  border-radius: 50%;
  background: var(--line);
}

.st-chip.live .ring,
.st-hero.live .h-av,
.oshi-av.live .h-av {
  background: conic-gradient(from 200deg, var(--live, var(--pink)), #ff9a3c, var(--live, var(--pink)));
}

[data-theme="jtcc"] .st-chip.live .ring,
[data-theme="jtcc"] .st-hero.live .h-av,
[data-theme="jtcc"] .oshi-av.live .h-av {
  background: conic-gradient(from 200deg, #f30296, #ffd71f, #22ac38, #f30296);
}

.st-chip .h-av {
  display: block;
  border: 2px solid var(--bg);
}

.st-live {
  position: absolute;
  top: 58px;
  left: 50%;
  padding: 1px 6px;
  border: 2px solid var(--bg, #07080a);
  border-radius: 6px;
  background: var(--live, var(--pink));
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  transform: translateX(-50%);
}

.st-chip b {
  margin-top: 6px;
  font-size: 12px;
}

.st-chip small {
  color: var(--faint);
  font-size: 10.5px;
  white-space: nowrap;
}

.st-chip.live small {
  color: var(--live);
  font-weight: 800;
}

/* これからの配信 */

.up-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.up-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-left: 4px solid var(--c);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.up-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}

.up-main > span {
  min-width: 0;
}

.up-main small,
.up-main b,
.up-main span span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-main small {
  color: var(--c);
  font-size: 11px;
  font-weight: 800;
}

.up-main b {
  font-size: 14.5px;
}

.up-main span span {
  color: var(--sub);
  font-size: 12px;
}

.bell {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 54px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card2);
  color: var(--ink);
  font-size: 16px;
}

.bell span {
  font-size: 9.5px;
  font-weight: 800;
}

.bell.on {
  border-color: transparent;
  background: var(--live);
  color: #fff;
}

/* 商品 */

.p-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  width: 136px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}

.p-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.p-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-img i {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--live, var(--pink));
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.p-card b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.p-card .price,
.s-main .price {
  color: var(--price);
  font-size: 15px;
  font-weight: 900;
}

.p-card .price s,
.s-main .price s {
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
}

/* ショップ */

.sp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #111;
  color: #fff;
  text-align: left;
  box-shadow: var(--shadow);
}

.sp-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.sp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.88) 10%, rgba(0, 0, 0, 0.35) 70%, transparent);
}

.sp-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: 72%;
}

.sp-txt .live-chip {
  background: var(--live);
  font-style: normal;
}

.sp-txt b {
  font-size: 17px;
  line-height: 1.25;
}

.sp-txt small {
  color: #ff8fb0;
  font-weight: 800;
}

[data-theme="jtcc"] .sp-txt small {
  color: #ffe357;
}

.cats {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cats::-webkit-scrollbar {
  display: none;
}

.cats button {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--sub);
  font-size: 13px;
  font-weight: 700;
}

.cats button small {
  color: var(--faint);
  font-size: 11px;
}

.cats button.on {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

.cats button.on small {
  color: inherit;
  opacity: 0.6;
}

[data-theme="jtcc"] .cats button.on {
  border: 1.5px solid #2e2e2e;
  background: #ffe357;
  color: #2e2e2e;
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

.s-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}

.s-main b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.stock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stock i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.stock i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a45, var(--pink));
}

[data-theme="jtcc"] .stock i::after {
  background: #7ccf3b;
}

.stock small {
  color: var(--faint);
  font-size: 11px;
}

.s-live {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--live) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--live) 12%, transparent);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
}

.s-live .dot-live {
  width: 7px;
  height: 7px;
}

.trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  list-style: none;
  font-size: 13px;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust li span {
  width: 22px;
  text-align: center;
}

/* 下のタブ */

.tabbar {
  display: grid;
  flex: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  padding: 6px 4px max(8px, var(--safe-b));
  border-top: 1px solid var(--line);
  background: var(--tabbg);
}

.tab {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--faint);
}

.tab .ico {
  display: grid;
}

.tab-lbl {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tab.on {
  color: var(--ink);
}

[data-theme="jtcc"] .tab.on {
  color: #22ac38;
}

.tab.live .ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--live), #ff7a45);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--live) 45%, transparent);
}

[data-theme="jtcc"] .tab.live .ico {
  background: linear-gradient(140deg, #f30296, #ff5fb8);
}

.tab.live .tab-lbl {
  color: var(--live);
  font-weight: 900;
}

.tab .badge {
  top: -2px;
  right: calc(50% - 22px);
  border-color: var(--tabbg);
  background: var(--live);
  color: #fff;
}

/* 配信者のシート */

.st-sheet {
  text-align: center;
}

.st-hero {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}

.st-hero .h-av {
  display: block;
  padding: 3px;
}

.st-hero .st-live {
  top: auto;
  bottom: -6px;
  font-size: 11px;
}

.st-sheet h3 {
  margin: 12px 0 2px;
  font-family: var(--cond);
  font-size: 26px;
}

.st-city {
  margin: 0 0 12px;
  color: var(--sub, #b8bcc4);
  font-size: 13px;
}

.st-sheet .desc {
  text-align: left;
}

.st-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-left: 3px solid var(--c);
  border-radius: 14px;
  background: var(--card2, rgba(255, 255, 255, 0.06));
  text-align: left;
}

.st-next > span {
  flex: 1;
}

.st-next small,
.st-next b,
.st-next span span {
  display: block;
}

.st-next small {
  color: var(--c);
  font-size: 11px;
  font-weight: 800;
}

.st-next span span {
  color: var(--sub, #b8bcc4);
  font-size: 12px;
}

.kpis {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 8px;
}

.kpi {
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--card2, rgba(255, 255, 255, 0.06));
  text-align: center;
}

.kpi b {
  display: block;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 800;
}

.kpi small {
  color: var(--sub, #9aa0a8);
  font-size: 11px;
}

/* ボタン・シート（アプリ側） */

:is(.app, .sheet.in-app) .btn {
  background: var(--card2);
  color: var(--ink);
}

:is(.app, .sheet.in-app) .btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

:is(.app, .sheet.in-app) .btn.hot {
  background: var(--live);
  color: #fff;
}

:is(.app, .sheet.in-app) .btn.done {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

:is(.app, .sheet.in-app) .btn.danger {
  background: rgba(255, 64, 64, 0.1);
  color: #ff5a5a;
  box-shadow: inset 0 0 0 1px rgba(255, 64, 64, 0.35);
}

[data-theme="jtcc"] :is(.app, .sheet.in-app) .btn.primary {
  background: linear-gradient(99deg, #ffe050 0%, #ffd71f 100%);
  box-shadow: 0 3px 0 #e0b400;
}

.sheet.in-app {
  background: var(--card);
  color: var(--ink);
}

.sheet.in-app .grab {
  background: var(--line);
}

.sheet.in-app :is(.desc, .fees) {
  color: var(--sub);
}

.sheet.in-app :is(.sheet-head small, .opt small, .co-item small, .shop-info small, .price-big small) {
  color: var(--faint);
}

.sheet.in-app .price-big {
  color: var(--price);
}

.sheet.in-app .shop-info {
  color: var(--ink);
}

.sheet.in-app :is(.seg button, .stepper) {
  background: var(--card2);
  color: var(--ink);
}

.sheet.in-app .stepper button {
  color: var(--ink);
}

.sheet.in-app .seg button.on {
  border-color: var(--sel);
  background: color-mix(in srgb, var(--sel) 16%, transparent);
}

.sheet.in-app :is(.country, .at) {
  border-color: var(--line);
  background: var(--card2);
  color: var(--ink);
}

.sheet.in-app .at input {
  color: var(--ink);
}

.sheet.in-app .lines .line.total {
  border-top-color: var(--line);
}

.sheet.in-app .lines .line.green span:last-child {
  color: var(--ok);
}

.sheet.in-app .shop-row {
  border-bottom-color: var(--line);
}

/* 購入品 */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}

.empty .emo {
  font-size: 44px;
}

.empty p {
  margin: 0 0 8px;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.6;
}

.empty.sm {
  align-items: flex-start;
  padding: 0;
  text-align: left;
}

.o-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.o-sum > div {
  padding: 12px 8px 10px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.o-sum b {
  display: block;
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.o-sum > div:first-child b {
  color: var(--live);
}

.o-sum > div:nth-child(2) b {
  color: var(--ok);
}

.o-sum small {
  color: var(--sub);
  font-size: 11px;
  font-weight: 700;
}

.o-filter {
  margin-top: -8px;
}

.o-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.o-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.o-card.s1 {
  border-color: rgba(255, 176, 32, 0.55);
}

.o-head {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.o-head img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
}

.o-head b,
.o-head small {
  display: block;
}

.o-head b {
  font-size: 14px;
  line-height: 1.3;
}

.o-head small {
  margin-top: 3px;
  color: var(--faint);
  font-size: 11.5px;
}

.o-total {
  font-size: 15px;
}

.o-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.o-st,
.o-prize {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.o-st.s0 {
  background: var(--card2);
  color: var(--sub);
}

.o-st.s1 {
  background: rgba(255, 176, 32, 0.2);
  color: #ffb020;
}

.o-st.s2 {
  background: rgba(63, 208, 255, 0.18);
  color: var(--link);
}

.o-st.s3 {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

[data-theme="jtcc"] .o-st.s1 {
  color: #c47f00;
}

.o-prize {
  background: rgba(255, 216, 74, 0.2);
  color: var(--gold);
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.o-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 16px 0 4px;
  padding: 0;
  list-style: none;
}

.o-steps::before,
.o-steps::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 12.5%;
  height: 3px;
  border-radius: 2px;
}

.o-steps::before {
  right: 12.5%;
  background: var(--line);
}

.o-steps::after {
  width: calc(75% * var(--p));
  background: var(--ok);
  transition: width 0.6s;
}

.o-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.o-steps i {
  width: 15px;
  height: 15px;
  border: 3px solid var(--card2);
  border-radius: 50%;
  background: var(--card2);
}

.o-steps li.done i {
  border-color: var(--ok);
  background: var(--ok);
}

.o-steps li.now i {
  border-color: var(--ok);
  background: var(--card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent);
}

.o-steps small {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
}

.o-steps li.done small,
.o-steps li.now small {
  color: var(--ink);
}

.o-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card2);
}

.o-track button {
  border: 0;
  background: none;
  color: var(--link);
  font-size: 12px;
}

/* マイページ：ファンパス */

.fan-card {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  padding: 14px 16px 12px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--rk) 42%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(63, 208, 255, 0.22), transparent 60%),
    linear-gradient(150deg, #1d1532, #0d0e14 70%);
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rk) 60%, transparent),
    0 14px 34px rgba(0, 0, 0, 0.5);
}

.fan-card > * {
  position: relative;
  z-index: 1;
}

.fan-card > .fc-holo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 44%, rgba(140, 255, 58, 0.12) 50%, rgba(63, 208, 255, 0.14) 56%, transparent 70%);
  background-size: 260% 100%;
  animation: fcHolo 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fcHolo {
  0%,
  100% {
    background-position: 110% 0;
  }
  50% {
    background-position: -10% 0;
  }
}

.fc-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.fc-brand em {
  color: var(--green);
  font-style: normal;
}

.fc-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.me-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 3px solid var(--rk, #fff);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--green), #2fbf71);
  color: #062;
  font-size: 27px;
  font-weight: 900;
  box-shadow: 0 0 18px color-mix(in srgb, var(--rk, #fff) 60%, transparent);
}

.fc-who .who {
  flex: 1;
  min-width: 0;
}

.fc-rank {
  display: block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--rk);
  color: #111;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.fc-who .who b {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-who .who small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.fan-card .fc-edit {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.fc-lv {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.fc-lvnum {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--cond);
  font-size: 42px;
  font-weight: 800;
  line-height: 0.9;
  background: linear-gradient(180deg, #fff 30%, var(--rk));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fc-lvnum small {
  font-size: 15px;
}

.fc-xp {
  flex: 1;
  min-width: 0;
}

.fc-bar {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
}

.fc-bar i {
  display: block;
  width: calc(var(--p) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rk), #fff);
  box-shadow: 0 0 12px var(--rk);
  animation: fcFill 1.1s ease-out;
}

@keyframes fcFill {
  from {
    width: 0;
  }
}

.fc-xp small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.fc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.fc-stat {
  text-align: center;
}

.fc-stat span {
  font-size: 16px;
}

.fc-stat b {
  display: block;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
}

.fc-stat small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 700;
}

[data-theme="jtcc"] .fan-card {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(135deg, #fffbe0 0%, #ffe357 45%, #f8c215 100%);
  color: #2e2e2e;
  box-shadow:
    0 0 0 2px #2e2e2e,
    0 10px 26px rgba(120, 80, 0, 0.25);
}

[data-theme="jtcc"] .fan-card > .fc-holo {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0.2) 54%, transparent 68%);
  background-size: 260% 100%;
}

[data-theme="jtcc"] .fc-top,
[data-theme="jtcc"] .fc-who .who small,
[data-theme="jtcc"] .fc-xp small,
[data-theme="jtcc"] .fc-stat small {
  color: rgba(46, 46, 46, 0.72);
}

[data-theme="jtcc"] .fc-brand em {
  color: #178a2c;
}

[data-theme="jtcc"] .fc-rank {
  background: #2e2e2e;
  color: #ffe357;
}

[data-theme="jtcc"] .me-av {
  border-color: #fff;
  background: linear-gradient(140deg, #22ac38, #8fc31f);
  color: #fff;
  box-shadow: 0 0 0 2px #2e2e2e;
}

[data-theme="jtcc"] .fan-card .fc-edit {
  background: #fff;
  color: #2e2e2e;
  box-shadow: inset 0 0 0 1.5px #2e2e2e;
}

[data-theme="jtcc"] .fc-lvnum {
  background: linear-gradient(180deg, #2e2e2e 40%, #178a2c);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="jtcc"] .fc-bar {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="jtcc"] .fc-bar i {
  background: linear-gradient(90deg, #22ac38, #8fc31f);
  box-shadow: none;
}

[data-theme="jtcc"] .fc-stats {
  border-top-color: rgba(0, 0, 0, 0.25);
}

/* 毎日ボーナス */

.daily {
  padding: 14px;
  border: 1px solid rgba(255, 176, 32, 0.4);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.16), rgba(255, 64, 120, 0.1)), var(--card);
}

[data-theme="jtcc"] .daily {
  border: 2px solid #ffd71f;
  background: #fff;
  box-shadow: var(--shadow);
}

.dl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dl-head b {
  font-size: 16px;
  font-weight: 900;
}

.dl-head small {
  color: var(--sub);
  font-size: 12px;
  font-weight: 800;
}

.dl-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dl-days li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dl-days i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card2);
  font-size: 16px;
  font-style: normal;
}

.dl-days small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.dl-days li.done i {
  background: var(--ok);
  color: #0b0b10;
  font-weight: 900;
}

[data-theme="jtcc"] .dl-days li.done i {
  color: #fff;
}

.dl-days li.now i {
  background: linear-gradient(140deg, #ffe357, #ffb020);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ffb020 35%, transparent);
  animation: dlPulse 1.4s ease-in-out infinite;
}

.dl-days li.now small {
  color: var(--ink);
}

.dl-days li.big i {
  background: linear-gradient(140deg, #b98cff, #3fd0ff);
}

@keyframes dlPulse {
  50% {
    transform: scale(1.1);
  }
}

.dl-claim {
  position: relative;
  overflow: hidden;
  margin-top: 12px !important;
}

.dl-claim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: dlShine 2.4s ease-in-out infinite;
}

@keyframes dlShine {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}

.dl-done {
  margin: 12px 0 0;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

/* バッジ */

.bd-count {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--sub);
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 800;
}

.badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bdg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  background: var(--card2);
  text-align: center;
}

.bdg-medal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--line);
  font-size: 21px;
  filter: grayscale(1);
  opacity: 0.5;
}

.bdg.ok .bdg-medal {
  background: conic-gradient(from 30deg, #ffe89a, #f8c215, #fff4c2, #e0a800, #ffe89a);
  box-shadow: 0 0 14px rgba(248, 194, 21, 0.5);
  filter: none;
  opacity: 1;
}

.bdg b {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

.bdg.ok b {
  color: var(--ink);
}

.bdg small {
  color: var(--faint);
  font-size: 9.5px;
  font-weight: 700;
}

.bdg.ok small {
  color: var(--ok);
  font-weight: 900;
}

.bdg-bar {
  display: block;
  width: 78%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}

.bdg-bar i {
  display: block;
  width: calc(var(--p) * 100%);
  height: 100%;
  background: var(--sel);
}

/* マイページのカード */

.me-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.me-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
}

.me-card h4 {
  margin: 14px 0 8px;
  font-size: 13px;
}

.me-card > .btn.sm {
  margin-top: 10px;
}

.coin-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.coin-row small {
  display: block;
  color: var(--sub);
  font-size: 11px;
}

.coin-big {
  display: flex;
  align-items: center;
  color: var(--gold);
  font-family: var(--cond);
  font-size: 32px;
  font-weight: 800;
}

[data-theme="jtcc"] .coin-big {
  color: var(--ink);
}

.me-card .packs {
  gap: 8px;
  margin: 16px 0 6px;
}

.me-card .pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--card)), var(--card));
  color: var(--ink);
}

.me-card .pack em {
  position: absolute;
  top: -9px;
  left: 50%;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--live);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.me-card .pack.t2 em {
  background: linear-gradient(90deg, #ff9a1f, #ff3b6b);
}

[data-theme="jtcc"] .me-card .pack {
  border: 1.5px solid var(--line);
  background: #fff;
}

[data-theme="jtcc"] .me-card .pack.t2 {
  border-color: #f8c215;
  background: #fffbe6;
}

[data-theme="jtcc"] .me-card .pack.t2 em {
  background: #ea453c;
}

.pk-stack {
  display: flex;
  align-items: flex-end;
  height: 26px;
}

.pk-stack i {
  font-size: 20px;
  font-style: normal;
}

.pk-stack i + i {
  margin-left: -9px;
}

.me-card .pack b {
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 800;
}

.me-card .pack small {
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 700;
}

.rows {
  display: flex;
  flex-direction: column;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.rows .emo {
  width: 28px;
  font-size: 22px;
  text-align: center;
}

.rows .grow {
  flex: 1;
  min-width: 0;
}

.rows .grow b,
.rows .grow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rows .grow b {
  font-size: 13.5px;
}

.rows small {
  color: var(--sub);
  font-size: 11.5px;
}

.rows small.gold {
  color: var(--gold);
  font-weight: 800;
}

.pill-st {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.pill-st.ok {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.pill-st.bad {
  background: var(--card2);
  color: var(--sub);
}

/* 推し（フォロー中） */

.oshi {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.oshi::-webkit-scrollbar {
  display: none;
}

.oshi-av {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}

.oshi-av .h-av {
  padding: 2px;
  background: var(--line);
}

.oshi-av .st-live {
  top: 46px;
}

.oshi-av small {
  font-size: 11px;
  font-weight: 800;
}

/* デザインの切り替え */

.theme-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.th-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px 10px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card2);
  color: var(--ink);
  text-align: left;
  transition: transform 0.12s;
}

.th-opt:active {
  transform: scale(0.96);
}

.th-opt.on {
  border-color: var(--sel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel) 22%, transparent);
}

.th-opt b {
  margin-top: 5px;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.th-opt small {
  color: var(--sub);
  font-size: 11px;
}

.th-opt em {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sel);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.th-opt.on em {
  display: grid;
}

.th-prev {
  position: relative;
  display: block;
  height: 80px;
  overflow: hidden;
  border-radius: 10px;
}

.th-prev i {
  position: absolute;
  border-radius: 5px;
}

.th-neon .th-prev {
  background: radial-gradient(circle at 20% 0%, rgba(255, 64, 120, 0.5), transparent 60%), #0a0b0e;
}

.th-neon .a {
  top: 8px;
  left: 8px;
  width: 44%;
  height: 8px;
  background: #fff;
}

.th-neon .b {
  top: 24px;
  left: 8px;
  width: 30%;
  height: 48px;
  background: linear-gradient(180deg, #4a2a55, #16181d);
  box-shadow: 0 0 0 1.5px #ff4078;
}

.th-neon .c {
  top: 24px;
  left: 44%;
  right: 8px;
  height: 22px;
  background: #22252c;
}

.th-neon .d {
  top: 54px;
  left: 44%;
  width: 34%;
  height: 14px;
  border-radius: 999px;
  background: #ff4078;
}

.th-jtcc .th-prev {
  background: #f2f2f4;
}

.th-jtcc .a {
  top: 0;
  right: 0;
  left: 0;
  height: 16px;
  border-radius: 0;
  background: #fff;
  box-shadow: inset 0 -1px #e2e2e6;
}

.th-jtcc .a::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #22ac38;
  transform: rotate(45deg);
}

.th-jtcc .b {
  top: 20px;
  right: 0;
  left: 0;
  height: 36px;
  border-radius: 0;
  background: linear-gradient(160deg, #b61ad8, #ec1690);
}

.th-jtcc .c {
  top: 26px;
  left: 8px;
  width: 42%;
  height: 24px;
  background: #fff;
}

.th-jtcc .d {
  bottom: 5px;
  left: 8px;
  width: 38%;
  height: 14px;
  border-radius: 999px;
  background: #ffe357;
  box-shadow: 0 0 0 1.5px #2e2e2e;
}

/* 設定 */

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.me-card h3 + .set-row {
  border-top: 0;
  padding-top: 2px;
}

.set-lbl {
  font-size: 14px;
  font-weight: 700;
}

.sel-wrap {
  position: relative;
  display: inline-block;
}

.sel-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--sub);
  border-bottom: 2px solid var(--sub);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.sel {
  min-width: 150px;
  max-width: 210px;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card2);
  color: var(--ink);
  font: 700 14px var(--sans);
  -webkit-appearance: none;
  appearance: none;
}

.sel:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 1px;
}

.sel option {
  color: #000;
}

.switch {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s;
}

.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

.switch.on {
  background: var(--ok);
}

.switch.on i {
  transform: translateX(20px);
}

.btn.danger {
  background: rgba(255, 64, 64, 0.12);
  color: #ff6b6b;
  box-shadow: inset 0 0 0 1px rgba(255, 64, 64, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .fan-card > .fc-holo,
  .dl-days li.now i,
  .dl-claim::after {
    animation: none;
  }
}

.an-x {
  position: absolute;
  top: max(18px, calc(var(--safe-t) + 10px));
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

/* ---- 盛り上げの演出（js/fx.js） ---- */

.fx-layer,
.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.fx-canvas {
  width: 100%;
  height: 100%;
}

.fx-flash {
  background: var(--c);
  animation: fxFlash 0.6s ease-out forwards;
}

@keyframes fxFlash {
  0% {
    opacity: var(--o);
  }
  100% {
    opacity: 0;
  }
}

.fx-slam {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transform: translateY(-50%);
  animation: fxSlam 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.fx-slam b {
  font-family: var(--cond);
  font-size: 64px;
  font-style: italic;
  font-weight: 800;
  line-height: 0.95;
  color: var(--c);
  -webkit-text-stroke: 2px #fff;
  text-shadow:
    0 4px 0 #000,
    0 0 28px var(--g),
    0 0 60px var(--g);
  letter-spacing: 0.01em;
}

.fx-slam small {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

@keyframes fxSlam {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(3) rotate(-8deg);
  }
  14% {
    opacity: 1;
    transform: translateY(-50%) scale(0.92) rotate(-4deg);
  }
  22% {
    transform: translateY(-50%) scale(1.06) rotate(-4deg);
  }
  30%,
  78% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(-4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-80%) scale(1.1) rotate(-4deg);
  }
}

.fx-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid var(--c);
  border-radius: 50%;
  animation: fxRing 0.7s ease-out forwards;
}

@keyframes fxRing {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(7);
  }
}

.fx-float {
  position: absolute;
  color: var(--c);
  font-family: var(--cond);
  font-size: 26px;
  font-style: italic;
  font-weight: 800;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: fxFloat 1.1s ease-out forwards;
}

@keyframes fxFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -80%) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -260%) scale(1);
  }
}

.fx-shake {
  animation: fxShake 0.45s;
}

.fx-shake-lg {
  animation: fxShakeLg 0.65s;
}

@keyframes fxShake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translate(-5px, 2px) rotate(-0.6deg);
  }
  40% {
    transform: translate(5px, -2px) rotate(0.6deg);
  }
  60% {
    transform: translate(-3px, 1px);
  }
  80% {
    transform: translate(3px, -1px);
  }
}

@keyframes fxShakeLg {
  0%,
  100% {
    transform: none;
  }
  10% {
    transform: translate(-10px, 4px) rotate(-1.2deg) scale(1.02);
  }
  25% {
    transform: translate(10px, -5px) rotate(1.2deg) scale(1.02);
  }
  40% {
    transform: translate(-8px, 3px) rotate(-0.8deg);
  }
  55% {
    transform: translate(7px, -3px) rotate(0.6deg);
  }
  70% {
    transform: translate(-4px, 2px);
  }
  85% {
    transform: translate(3px, -1px);
  }
}

/* 残り3秒・最後の挑戦の緊張（周りが赤く脈打つ） */
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.room.fx-urgent::after,
.room.fx-tension::after {
  opacity: 1;
  box-shadow: inset 0 0 70px 14px rgba(255, 30, 80, 0.75);
  animation: fxUrgent 0.5s ease-in-out infinite alternate;
}

.room.fx-tension::after {
  box-shadow: inset 0 0 90px 18px rgba(255, 216, 74, 0.8);
  animation-duration: var(--beat, 0.7s);
}

@keyframes fxUrgent {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

/* 金額が更新されたとき */
.fx-bump {
  animation: fxBump 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes fxBump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.35);
    color: #ffd84a;
  }
  100% {
    transform: scale(1);
  }
}

/* いいねの連打 */
.like-combo {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  font-family: var(--cond);
  font-size: 30px;
  font-style: italic;
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke: 1px var(--pink);
  text-shadow: 0 0 16px var(--pink), 0 2px 0 #000;
  transform: translate(-50%, -100%);
  animation: likeCombo 0.9s ease-out forwards;
}

.like-combo small {
  font-size: 15px;
}

@keyframes likeCombo {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1.3);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -170%) scale(0.95);
  }
}

/* 押した感触 */
.tab,
.pack,
.cats button,
.s-main,
.p-card,
.live-card,
.st-chip,
.bell,
.s-live,
.sp-hero {
  transition: transform 0.12s;
}

.tab:active,
.pack:active,
.cats button:active,
.s-main:active,
.p-card:active,
.live-card:active,
.st-chip:active,
.bell:active,
.s-live:active,
.sp-hero:active {
  transform: scale(0.95);
}

@keyframes shine {
  0%,
  55% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

/* 下タブの LIVE は波紋で誘う */
.tab.live .ico {
  position: relative;
}

.tab.live .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 64, 120, 0.6);
  animation: liveRing 2s ease-out infinite;
}

@keyframes liveRing {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 64, 120, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(255, 64, 120, 0);
  }
}

.tab.pop .ico {
  animation: tabPop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes tabPop {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .room.fx-urgent::after,
  .room.fx-tension::after,
  .tab.live .ico::after {
    animation: none;
  }
}

/* ---- ステッカー（js/stickers.js） ---- */

.st-layer {
  overflow: hidden;
}

.st-pop,
.st-slap {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 10px 11px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}

/* HYPES の hyStickerPop: 中央から飛んできて 1.16 倍まで行き過ぎ、傾いて落ち着く */
.st-pop {
  transform: translate(-50%, -50%) rotate(var(--pose));
  animation:
    stickerPop 0.92s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d) both,
    stickerOut 0.45s ease-in calc(var(--d) + var(--hold)) forwards;
}

@keyframes stickerPop {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(calc(var(--pose) + var(--spin))) scale(0.18);
  }
  14% {
    opacity: 1;
  }
  66% {
    transform: translate(-50%, -50%) rotate(var(--pose)) scale(1.16);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--pose)) scale(1);
  }
}

@keyframes stickerOut {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--pose)) scale(0.6);
  }
}

.st-slap {
  transform: translate(-50%, -50%) rotate(var(--rot));
  animation:
    stickerSlap 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both,
    stickerSlapOut 0.4s ease-in var(--hold) forwards;
}

@keyframes stickerSlap {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--rot) - 18deg)) scale(2.4);
    filter: blur(6px) drop-shadow(0 30px 30px rgba(0, 0, 0, 0.3));
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.9);
    filter: blur(0) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5));
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);
  }
}

@keyframes stickerSlapOut {
  to {
    opacity: 0;
    transform: translate(-50%, -80%) rotate(var(--rot)) scale(0.85);
  }
}

/* 大きな場面: 回る光の筋・横切る光・カメラの寄り（HYPES のクラブフィルム） */
.fx-rays {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, 0.13) 0deg 7deg, transparent 7deg 16deg);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 42%, #000 18%, transparent 62%);
  animation: fxRays 2.6s ease-out forwards;
}

@keyframes fxRays {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scale(1.2);
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: rotate(10deg) scale(1.05);
  }
}

.fx-sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -50%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  animation: fxSweep 1.1s 0.18s ease-in-out both;
}

@keyframes fxSweep {
  0% {
    left: -50%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.fx-punch {
  animation: fxPunch 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: 50% 42%;
}

@keyframes fxPunch {
  0% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.09);
  }
  100% {
    transform: scale(1);
  }
}

.fx-slam b {
  animation: slamFocus 0.5s ease-out both;
}

@keyframes slamFocus {
  from {
    filter: blur(8px);
  }
  to {
    filter: blur(0);
  }
}

/* ---- オークションの競り合い ---- */

.au-list li.new {
  animation: bidIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes bidIn {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
    background: rgba(255, 176, 32, 0.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.au-heat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b30, #ff7a1a);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
  vertical-align: middle;
  animation: heatPulse 0.5s ease-in-out infinite alternate;
}

.au-heat[hidden] {
  display: none;
}

@keyframes heatPulse {
  from {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 90, 40, 0);
  }
  to {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255, 90, 40, 0.8);
  }
}

.au-quick {
  display: flex;
  gap: 6px;
}

.au-quick button {
  flex: 1;
  padding: 6px 0;
  border: 1px solid rgba(255, 176, 32, 0.55);
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.14);
  color: #ffd27a;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.1s;
}

.au-quick button:active {
  transform: scale(0.93);
  background: rgba(255, 176, 32, 0.35);
}

.au-quick button:disabled {
  opacity: 0.4;
}

/* ---- ステッカーのコメント・送る画面 ---- */

.row.sticker img {
  display: block;
  width: auto;
  max-width: 100px;
  height: 42px;
  margin-top: 2px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
  animation: pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 2px 8px;
}

.st-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.1s;
}

.st-grid button:active {
  transform: scale(0.9);
}

.st-grid img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- 湧き出すステッカー（映像と表示のあいだの層。下部のバー・パネルの上、右端から小さく出て、少し上がって消える） ---- */

.st-flow-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.st-flow {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  will-change: transform, opacity;
  animation: stBubble var(--dur) cubic-bezier(0.25, 0.6, 0.45, 1) forwards;
}

@keyframes stBubble {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: translate(calc(var(--sx) * 0.15), -10px) scale(1.14) rotate(var(--rot));
  }
  26% {
    transform: translate(calc(var(--sx) * 0.3), calc(var(--up) * -0.22)) scale(1) rotate(var(--rot));
  }
  70% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx), calc(var(--up) * -1)) scale(0.78) rotate(calc(var(--rot) * -1));
  }
}

/* ---- ステッカーの送る画面：タブ・有料・まとめて流す ---- */

.st-tabs {
  display: flex;
  gap: 6px;
  margin: 2px 0 10px;
}

.st-tabs button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.st-tabs button.on {
  border-color: transparent;
  background: linear-gradient(120deg, #ff2d6f, #ffb020);
}

.st-grid button {
  position: relative;
}

.st-grid .price {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffd84a;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

.st-grid .raid-tag {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #9bd00f;
  color: #0b0b0b;
  font-size: 9px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.04em;
}

.st-storms {
  display: grid;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding-bottom: 8px;
}

.st-storm {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 45, 111, 0.28), rgba(255, 176, 32, 0.22));
  color: #fff;
  text-align: left;
}

.st-storm.raid {
  background: linear-gradient(120deg, rgba(155, 208, 15, 0.32), rgba(20, 20, 20, 0.6));
}

.st-storm img {
  width: 64px;
  height: 52px;
  object-fit: contain;
}

.st-storm b {
  display: block;
  font-family: var(--cond);
  font-size: 19px;
  font-style: italic;
}

.st-storm small {
  opacity: 0.75;
  font-size: 11px;
}

.st-storm em {
  padding: 5px 10px;
  border-radius: 999px;
  background: #ffd84a;
  color: #111;
  font-size: 13px;
  font-weight: 900;
  font-style: normal;
}

.st-storm:active {
  transform: scale(0.97);
}

.row.sticker.paid > div {
  padding: 4px 8px 6px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 216, 74, 0.35), rgba(255, 45, 111, 0.3));
  box-shadow: 0 0 0 1px rgba(255, 216, 74, 0.6);
}

.row.sticker.paid small em {
  margin-left: 4px;
  color: #ffd84a;
  font-style: normal;
  font-weight: 900;
}

.row.sticker.paid img {
  height: 52px;
  max-width: 120px;
}

/* 課金ステッカー・まとめて湧き出させたときの帯（ギフトのバナーと同じ列、コメント欄のすぐ上に短く） */
.st-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 80px);
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ff2d6f, #ffb020);
  box-shadow: 0 6px 18px rgba(255, 45, 111, 0.4);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: stBanner 2.6s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

.st-banner.raid {
  background: linear-gradient(120deg, #151515, #2c3a08);
  box-shadow: 0 0 0 2px #9bd00f, 0 8px 24px rgba(155, 208, 15, 0.45);
}

.st-banner img {
  flex: none;
  height: 26px;
}

.st-banner span {
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes stBanner {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.9);
  }
  12% {
    opacity: 1;
    transform: translateX(4px) scale(1.04);
  }
  18%,
  85% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* ---- 9人の配信（hype.js）: HYPE メーター・予想パネル・フィーバー ---- */

.hy-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 19px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.hy-row {
  gap: 6px;
}

.hy-meter {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
}

.hy-meter b {
  flex: none;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.hy-bar {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.hy-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3fd0ff, #ff4078 60%, #ffd84a);
  transition: width 0.25s ease-out;
}

.hy-meter em {
  flex: none;
  font-family: var(--cond);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: #ffd84a;
}

.hy-meter.hot .hy-bar i {
  animation: hyHot 0.5s ease-in-out infinite alternate;
}

.hy-meter.fever {
  background: linear-gradient(90deg, #ff2d6f, #ffb020, #8cff3a, #3fd0ff, #b18cff, #ff2d6f);
  background-size: 300% 100%;
  animation: hyFever 1.2s linear infinite;
}

.hy-meter.fever .hy-bar {
  background: rgba(0, 0, 0, 0.35);
}

.hy-meter.fever em,
.hy-meter.fever b {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes hyHot {
  to {
    filter: brightness(1.5) saturate(1.4);
  }
}

@keyframes hyFever {
  to {
    background-position: 300% 0;
  }
}

.hy-score {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffd84a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  animation: pop 0.35s;
}

.hy-score[hidden] {
  display: none;
}

.vopts.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vpanel.hy-predict {
  border-color: var(--c, #3fd0ff);
}

.hy-predict .vopt {
  padding: 7px 10px;
}

.hy-predict .vopt .nm {
  font-size: 15px;
  opacity: 1;
}

.vopt.pr-get .fill {
  background: rgba(140, 255, 58, 0.42);
}

.vopt.pr-miss .fill {
  background: rgba(255, 64, 120, 0.42);
}

.hy-predict .vopt.win .fill {
  background: var(--c, var(--pink));
}

.hy-ask {
  display: block;
  margin-top: 5px;
  color: #ffd84a;
  font-size: 11px;
  font-weight: 700;
}

.hy-picks {
  margin-top: 4px;
}

.vpanel.auction .au-ctrl .btn.bid {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vpanel.auction .btn.bid:disabled {
  opacity: 0.55;
  font-size: 15px;
}

.hy-picks .vopt {
  padding: 6px 8px;
}

.hy-picks .vopt .nm {
  font-size: 13px;
  opacity: 1;
}

.hy-picks .vopt .fill {
  background: rgba(255, 176, 32, 0.55);
}

.follow.nudge {
  animation: nudge 0.9s ease-in-out 5;
}

@keyframes nudge {
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 5px rgba(255, 64, 120, 0.45);
  }
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.room.fever::before {
  opacity: 1;
  box-shadow: inset 0 0 0 3px #ff2d6f, inset 0 0 60px 10px rgba(255, 45, 111, 0.55);
  animation: hyEdge 1.2s linear infinite;
}

@keyframes hyEdge {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hy-meter.fever,
  .room.fever::before,
  .follow.nudge {
    animation: none;
  }
}

/* ---- オークションの説明（何を競っているか） ---- */

.hy-au-sub {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #c9ccd6;
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- 「取れる？」予想：黒いガラスにヘアラインと配信者の色ひとつ。GET と MISS の一騎打ち ---- */

.vpanel.hy-predict {
  position: relative;
  overflow: hidden;
  padding: 8px 10px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 52%),
    radial-gradient(120% 140% at 100% 100%, rgba(255, 255, 255, 0.06), transparent 50%),
    linear-gradient(180deg, rgba(22, 22, 30, 0.95), rgba(6, 6, 10, 0.97));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  isolation: isolate;
}

/* 細い走査線と、ときどき横切る光 */
.vpanel.hy-predict::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.vpanel.hy-predict::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-18deg);
  animation: prSheen 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes prSheen {
  0%,
  60% {
    left: -40%;
  }
  100% {
    left: 130%;
  }
}

/* 四隅の L 字（照準のような枠） */
.pr-corners {
  position: absolute;
  inset: 4px;
  z-index: 2;
  pointer-events: none;
  --l: 12px;
  --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(#fff, #fff) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(#fff, #fff) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(#fff, #fff) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(#fff, #fff) bottom right / var(--w) var(--l) no-repeat;
  opacity: 0.85;
}

.pr-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pr-try {
  flex: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--c);
  color: #0b0b10;
  font-family: var(--cond);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hy-predict .vp-head b {
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff 0%, #e8ecf4 46%, #9aa3b5 54%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pr-streak {
  flex: none;
  padding: 1px 7px;
  border: 1px solid rgba(255, 190, 80, 0.6);
  border-radius: 999px;
  color: #ffd27a;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(255, 170, 40, 0.35);
  animation: pop 0.35s;
}

.pr-streak[hidden] {
  display: none;
}

/* 締め切りまでの輪 */
.pr-clock {
  --p: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0b0b10 58%, transparent 60%),
    conic-gradient(var(--c) calc(var(--p) * 1turn), rgba(255, 255, 255, 0.12) 0);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.hy-predict.locked .pr-clock {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #aab;
}

.hy-predict.done .pr-clock {
  visibility: hidden;
}

.hy-predict.hot .pr-clock {
  color: #fff;
  background:
    radial-gradient(circle, #2a0710 58%, transparent 60%),
    conic-gradient(#ff4d6d calc(var(--p) * 1turn), rgba(255, 255, 255, 0.12) 0);
  animation: prTick 0.5s ease-in-out infinite alternate;
}

@keyframes prTick {
  to {
    transform: scale(1.12);
    box-shadow: 0 0 16px rgba(255, 77, 109, 0.6);
  }
}

/* 一騎打ち */
.pr-duel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin-top: 7px;
}

.pr-duel .vopt {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  transition:
    transform 0.15s,
    filter 0.3s,
    opacity 0.3s,
    box-shadow 0.3s;
}

.pr-duel .vopt.pr-get {
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-right: 26px;
  box-shadow: inset 3px 0 0 #7dffb0;
}

.pr-duel .vopt.pr-miss {
  flex-direction: row-reverse;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 26px;
  box-shadow: inset -3px 0 0 #ff6f8e;
}

.pr-glyph {
  flex: none;
  font-size: 15px;
  line-height: 1;
  opacity: 0.85;
}

.pr-get .pr-glyph {
  color: #7dffb0;
}

.pr-miss .pr-glyph {
  color: #ff6f8e;
}

.pr-lbl {
  flex: none;
  font-family: var(--cond);
  font-size: 21px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff 0%, #eef2f8 44%, #8b94a7 53%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pr-duel .vopt .pc {
  margin-left: auto;
  font-size: 17px;
  opacity: 0.9;
}

.pr-duel .vopt.pr-miss .pc {
  margin-left: 0;
  margin-right: auto;
}

.pr-tag {
  position: absolute;
  top: 3px;
  padding: 0 5px;
  border-radius: 3px;
  background: #fff;
  color: #0b0b10;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 13px;
}

.pr-get .pr-tag {
  right: 22px;
}

.pr-miss .pr-tag {
  left: 22px;
}

.pr-tag:empty {
  display: none;
}

.pr-duel .vopt:has(.pr-tag:not(:empty)) .pc {
  transform: translateY(7px);
}

.pr-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
}

.pr-duel .vopt > span:not(.pr-tag) {
  position: relative;
  z-index: 1;
}

.pr-duel .vopt > .pr-tag {
  position: absolute;
  z-index: 2;
}

.pr-duel .vopt:not(:disabled):active {
  transform: scale(0.96);
}

.pr-duel .vopt.mine {
  border-color: var(--c);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 22px color-mix(in srgb, var(--c) 55%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--c) 30%, transparent);
}

.pr-duel .vopt.mine .pr-sheen {
  animation: prBtnSheen 1.4s ease-out;
}

@keyframes prBtnSheen {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -40% 0;
  }
}

/* 結果：当たった側は光って持ち上がり、外れた側は色が抜ける */
.pr-duel .vopt.win {
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff 10%), color-mix(in srgb, var(--c) 35%, #000));
  animation: prWin 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.pr-duel .vopt.win .pr-lbl {
  background: none;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.pr-duel .vopt.win .pr-sheen {
  animation: prBtnSheen 1.2s ease-out infinite;
}

.pr-duel .vopt.lose {
  filter: grayscale(1) brightness(0.55);
  opacity: 1;
}

@keyframes prWin {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.06);
  }
}

/* VS の丸（金属の縁がゆっくり回る） */
.pr-vs {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 5px -11px 0;
  border-radius: 50%;
}

.pr-vs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #fff, #7b8499, #fff, var(--c), #fff, #7b8499, #fff);
  animation: prSpin 4s linear infinite;
}

.pr-vs b {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a36, #07070b);
  font-family: var(--cond);
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@keyframes prSpin {
  to {
    transform: rotate(1turn);
  }
}

/* 観客の綱引き */
.pr-tug {
  position: relative;
  display: flex;
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.pr-tug i {
  display: block;
  height: 100%;
  transition: width 0.4s ease-out;
}

.pr-tug .g {
  position: relative;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(125, 255, 176, 0.35), #7dffb0);
}

.pr-tug .m {
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #ff6f8e, rgba(255, 111, 142, 0.35));
}

.pr-tug .g::after {
  content: "";
  position: absolute;
  right: -1.5px;
  top: -4px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
}

.hy-predict .vp-foot {
  margin-top: 5px;
}

/* 判子：締め切りは斜めの帯、結果は大きな判子 */
.pr-stamp {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  font-family: var(--cond);
  font-style: italic;
  font-weight: 800;
  white-space: nowrap;
}

.hy-predict.locked .pr-stamp {
  padding: 3px 40px;
  background: repeating-linear-gradient(-45deg, #0b0b10 0 8px, #16161f 8px 16px);
  border-top: 1px solid var(--c);
  border-bottom: 1px solid var(--c);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.3em;
  animation: prBand 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes prBand {
  0% {
    opacity: 0;
    transform: translate(-150%, -50%) rotate(-6deg);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  100% {
    opacity: 0;
    transform: translate(60%, -50%) rotate(-6deg);
  }
}

.hy-predict.done .pr-stamp {
  padding: 0 14px;
  border: 3px solid currentColor;
  border-radius: 8px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px currentColor;
  box-shadow:
    0 0 24px color-mix(in srgb, currentColor 45%, transparent),
    inset 0 0 12px color-mix(in srgb, currentColor 35%, transparent);
  animation: prStamp 1.8s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

.hy-predict.done.got .pr-stamp {
  color: #fff3c4;
  background: rgba(20, 14, 0, 0.55);
}

.hy-predict.done.missed .pr-stamp {
  color: #ff6f8e;
  background: rgba(24, 0, 8, 0.55);
}

@keyframes prStamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-14deg) scale(2.6);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.92);
  }
  32%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.05);
  }
}

/* 締め切り直前は縁が脈打つ。最後の挑戦は金の縁と、落ちるまで鼓動 */
.hy-predict.hot {
  animation: prHot 0.5s ease-in-out infinite alternate;
}

@keyframes prHot {
  to {
    border-color: #ff6f8e;
    box-shadow:
      0 0 0 1px rgba(255, 111, 142, 0.6),
      0 0 26px rgba(255, 77, 109, 0.35),
      0 12px 30px rgba(0, 0, 0, 0.55);
  }
}

.hy-predict.final {
  border-color: rgba(255, 216, 120, 0.55);
}

.hy-predict.final .pr-try {
  background: linear-gradient(180deg, #fff3c4, #ffc94a 55%, #c98a00);
}

.room.fx-tension .hy-predict.final:not(.hot) {
  animation: prBeat var(--beat, 600ms) ease-out infinite;
}

@keyframes prBeat {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 216, 120, 0.7),
      0 12px 30px rgba(0, 0, 0, 0.55);
  }
  100% {
    box-shadow:
      0 0 0 10px rgba(255, 216, 120, 0),
      0 12px 30px rgba(0, 0, 0, 0.55);
  }
}

/* ---- いいね：ハートの輪と光 ---- */

.love-burst {
  position: absolute;
  z-index: 7;
  width: 0;
  height: 0;
  pointer-events: none;
}

.love-burst b {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c);
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 8px var(--c);
  transform: translate(-50%, -50%);
  animation: loveFly 0.8s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

@keyframes loveFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.3);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(var(--s));
  }
}

.love-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border: 2px solid #ff9ec4;
  border-radius: 50%;
  box-shadow:
    0 0 14px #ff2d6f,
    inset 0 0 10px rgba(255, 45, 111, 0.6);
  transform: translate(-50%, -50%) scale(0.5);
  animation: loveRing 0.6s ease-out forwards;
}

@keyframes loveRing {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6);
  }
}

.love-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(120% 70% at 100% 100%, rgba(255, 45, 111, 0.45), transparent 60%);
  box-shadow: inset 0 0 60px rgba(255, 45, 111, 0.45);
  animation: loveGlow 1.4s ease-out forwards;
}

@keyframes loveGlow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.act.like .ico {
  filter: drop-shadow(0 0 6px rgba(255, 64, 120, 0.55));
}

.act.like.bump .ico {
  animation: likeBumpLux 0.45s cubic-bezier(0.2, 1.8, 0.4, 1);
}

@keyframes likeBumpLux {
  0% {
    transform: scale(0.8);
  }
  45% {
    transform: scale(1.45) rotate(-8deg);
    filter: drop-shadow(0 0 12px #ff2d6f);
  }
  100% {
    transform: scale(1);
  }
}

.like-combo {
  background: linear-gradient(180deg, #fff 0%, #ffd1e0 45%, #ff4d8d 55%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 10px rgba(255, 45, 111, 0.8)) drop-shadow(0 2px 0 #000);
  text-shadow: none;
}

/* ---- 高いギフト：光輪と名前の札 ---- */

.big-gift {
  top: 38%;
  gap: 6px;
  text-shadow: none;
}

.big-gift .emo {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}

.bg-halo {
  position: absolute;
  left: 50%;
  top: 72px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 22%, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
  mask: radial-gradient(circle, #000 35%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: prSpin 6s linear infinite;
}

.big-gift.t3 .bg-halo {
  width: 280px;
  height: 280px;
  background:
    radial-gradient(circle, rgba(255, 236, 170, 0.6) 0 20%, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255, 210, 90, 0.4) 0 5deg, transparent 5deg 15deg);
}

.big-gift.excl .bg-halo {
  background:
    radial-gradient(circle, rgba(255, 180, 220, 0.5) 0 20%, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255, 120, 190, 0.35) 0 6deg, transparent 6deg 18deg);
}

.bg-plate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 18px 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.9), rgba(6, 6, 10, 0.92));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.big-gift.t3 .bg-plate {
  border-color: rgba(255, 216, 120, 0.75);
  box-shadow:
    0 0 24px rgba(255, 190, 60, 0.35),
    0 10px 26px rgba(0, 0, 0, 0.5);
}

.bg-plate small {
  font-family: var(--cond);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: #c9ccd6;
}

.big-gift.t3 .bg-plate small {
  background: linear-gradient(90deg, #fff3c4, #ffc94a, #fff3c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.big-gift.excl .bg-plate small {
  color: #ff9ec4;
}

.bg-plate b {
  font-size: 16px;
}

.bg-plate em {
  font-size: 12px;
  font-style: normal;
  color: #dde;
}

/* ---- ギフトの画面：選んだギフトの大きな見本・格ごとの枠・まとめて贈る ---- */

.gift-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}

.gh-emo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 40px;
}

.gh-emo i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.16) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 72%);
  mask: radial-gradient(circle, #000 40%, transparent 72%);
  animation: prSpin 8s linear infinite;
}

.gh-emo img {
  position: relative;
  height: 58px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  animation: pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.gh-emo.t3 i {
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 90, 0.45) 0 6deg, transparent 6deg 16deg);
}

.gh-emo.excl i {
  background: repeating-conic-gradient(from 0deg, rgba(255, 130, 200, 0.4) 0 6deg, transparent 6deg 16deg);
}

.gh-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gh-txt small {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #aab;
}

.gh-txt b {
  overflow: hidden;
  font-size: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gh-txt em {
  font-size: 12.5px;
  font-style: normal;
  color: #ffd84a;
}

.gift-grid {
  max-height: 232px;
  overflow-y: auto;
  padding: 4px 2px 2px;
}

.gift-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  transition:
    transform 0.12s,
    border-color 0.2s;
}

.gift-cell:active {
  transform: scale(0.94);
}

.gift-cell em {
  position: absolute;
  top: -6px;
  left: 50%;
  padding: 0 5px;
  border-radius: 3px;
  background: #22222c;
  color: #c9ccd6;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.gift-cell.t1 {
  border-color: rgba(200, 210, 230, 0.35);
}

.gift-cell.t2 {
  border-color: rgba(255, 210, 110, 0.5);
  background: linear-gradient(180deg, rgba(255, 200, 90, 0.12), rgba(255, 255, 255, 0.02));
}

.gift-cell.t2 em {
  background: linear-gradient(180deg, #ffe7a8, #c98a00);
  color: #1a1204;
}

.gift-cell.t3 {
  border: 0;
  background:
    linear-gradient(180deg, rgba(40, 30, 10, 0.95), rgba(14, 10, 4, 0.95)) padding-box,
    conic-gradient(from var(--gspin, 0deg), #fff3c4, #c98a00, #fff3c4, #7a5200, #fff3c4) border-box;
  border: 1.5px solid transparent;
  animation: giftSpin 3s linear infinite;
}

.gift-cell.t3 em {
  background: #0b0b10;
  color: #ffd27a;
  border: 1px solid rgba(255, 210, 110, 0.7);
  line-height: 10px;
}

.gift-cell.excl {
  border-color: color-mix(in srgb, #ff6fb5 70%, transparent);
  background: linear-gradient(180deg, rgba(255, 111, 181, 0.18), rgba(255, 255, 255, 0.02));
}

.gift-cell.excl em {
  background: #ff6fb5;
  color: #1a0410;
}

.gift-cell.on {
  border-color: #fff;
  box-shadow:
    0 0 0 1px #fff,
    0 0 18px rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
}

.gift-cell.t3.on {
  box-shadow:
    0 0 0 1px #fff3c4,
    0 0 22px rgba(255, 200, 80, 0.45);
}

@property --gspin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes giftSpin {
  to {
    --gspin: 360deg;
  }
}

.gift-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.gift-qty {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.gift-qty button {
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aab;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 800;
}

.gift-qty button.on {
  background: #fff;
  color: #0b0b10;
}

.gift-foot .gift-send {
  margin: 0;
}

/* ---- ステッカーの配信者タブ ---- */

.st-tabs button.creator {
  font-weight: 800;
}

.st-grid.creator {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- LIVE：配信者の名前からアカウントページへ ---- */

.host-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}

/* ---- ワンタップ列の RAID ステッカー ---- */

.qst.raid {
  position: relative;
  background: linear-gradient(135deg, rgba(155, 208, 15, 0.35), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 0 0 1.5px rgba(190, 255, 60, 0.75);
}

.qst.raid i {
  position: absolute;
  right: 2px;
  bottom: 1px;
  padding: 0 3px;
  border-radius: 4px;
  background: #9bd00f;
  color: #0b0b10;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

/* ---- 投票の競り合い：票数・「+n」・首位の入れ替わり ---- */

.vopt .vc {
  position: absolute;
  right: 6px;
  top: 25px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.vopt .pc {
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.vopt .vo-mine {
  position: absolute;
  left: 5px;
  top: 25px;
  z-index: 1;
  padding: 1px 6px;
  border-radius: 999px;
  background: #3fd0ff;
  color: #04202b;
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 0 8px rgba(63, 208, 255, 0.6);
}

.vopt .vo-mine:empty {
  display: none;
}

.vo-plus {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  color: #bff0ff;
  font-family: var(--cond);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(63, 208, 255, 0.9), 0 1px 2px #000;
  pointer-events: none;
  animation: voPlus 0.75s ease-out forwards;
}

@keyframes voPlus {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.7);
  }
  25% {
    opacity: 1;
    transform: translateY(-4px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(0.95);
  }
}

.vopt.tick .fill {
  animation: voTick 0.35s ease-out;
}

@keyframes voTick {
  0% {
    filter: brightness(1.9) saturate(1.3);
  }
  100% {
    filter: none;
  }
}

.vopt.lead {
  animation: voLead 0.6s ease-out;
}

@keyframes voLead {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 216, 74, 0.9);
  }
  40% {
    box-shadow: 0 0 0 3px rgba(255, 216, 74, 0.9), 0 0 18px rgba(255, 216, 74, 0.7);
  }
  100% {
    box-shadow: none;
  }
}

.vpanel.vote {
  position: relative;
}

.vp-flip {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd84a, #ff8a1f);
  color: #1a1000;
  font-family: var(--cond);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 150, 30, 0.55);
  transform: translateX(-50%);
  pointer-events: none;
}

.vp-flip[hidden] {
  display: none;
}

.vp-flip.on {
  animation: flipIn 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes flipIn {
  0% {
    transform: translateX(-50%) scale(0.4) rotate(-8deg);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* ---- オークションの演出：光・額の跳ね・入札者の札・入札合戦 ---- */

.vpanel.auction {
  position: relative;
}

.vpanel.auction.hit {
  animation: auHit 0.28s ease-out;
}

.vpanel.auction.hit-big {
  animation: auHitBig 0.45s ease-out;
}

.vpanel.auction.hit-me {
  animation: auHitMe 0.45s ease-out;
}

@keyframes auHit {
  0% {
    box-shadow: 0 0 0 2px #ffb020, 0 0 26px rgba(255, 176, 32, 0.8), 0 8px 22px rgba(0, 0, 0, 0.45);
  }
  100% {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }
}

@keyframes auHitBig {
  0% {
    transform: scale(1.03);
    box-shadow: 0 0 0 3px #ffd84a, 0 0 40px rgba(255, 200, 40, 1);
  }
  100% {
    transform: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }
}

@keyframes auHitMe {
  0% {
    transform: scale(1.025);
    box-shadow: 0 0 0 3px #8cff3a, 0 0 36px rgba(140, 255, 58, 0.9);
  }
  100% {
    transform: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }
}

.au-cur b {
  font-variant-numeric: tabular-nums;
}

.au-cur b.roll {
  animation: auRoll 0.32s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes auRoll {
  0% {
    color: #fff;
    text-shadow: 0 0 18px #ffb020, 0 0 4px #fff;
    transform: translateY(-10px) scale(1.3);
  }
  100% {
    transform: none;
  }
}

.au-list li {
  align-items: center;
}

.au-list li.lead {
  color: var(--c, #fff);
  text-shadow: 0 0 10px color-mix(in srgb, var(--c, #ffb020) 60%, transparent);
}

.au-flag {
  margin-right: 4px;
  font-style: normal;
  font-size: 12px;
}

/* 入札者の札がパネルの上を右から左へ横切る */
.au-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  height: 74px;
  overflow: hidden;
  pointer-events: none;
}

.au-fly {
  position: absolute;
  top: var(--y, 20px);
  left: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 30%, transparent));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
  animation: auFly var(--d, 0.9s) cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
}

.au-fly i {
  font-style: normal;
}

.au-fly b {
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffd84a;
  font-family: var(--cond);
  font-size: 15px;
}

.au-fly.big {
  font-size: 14px;
  box-shadow: 0 0 22px var(--c);
}

.au-fly.big b {
  font-size: 19px;
}

.au-fly.me {
  background: linear-gradient(90deg, #3a8f0a, rgba(140, 255, 58, 0.35));
}

@keyframes auFly {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-12deg);
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-100% - 460px)) skewX(-12deg);
  }
}

.au-combo {
  position: absolute;
  bottom: calc(100% - 8px);
  right: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b30, #ff9a1f);
  color: #fff;
  font-family: var(--cond);
  font-size: calc(12px + var(--lv, 0) * 6px);
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 0 calc(8px + var(--lv, 0) * 20px) rgba(255, 90, 30, 0.9);
}

.au-combo[hidden] {
  display: none;
}

.au-combo.bump {
  animation: comboBump 0.3s cubic-bezier(0.2, 1.8, 0.4, 1);
}

@keyframes comboBump {
  0% {
    transform: scale(1.45) rotate(-4deg);
  }
  100% {
    transform: none;
  }
}

.au-edge {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.au-edge.on {
  animation: auPulse 0.4s ease-out;
}

@keyframes auPulse {
  0% {
    opacity: 1;
    box-shadow: inset 0 0 0 2px rgba(255, 176, 32, 0.9), inset 0 0 50px rgba(255, 176, 32, 0.45);
  }
  100% {
    opacity: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 176, 32, 0), inset 0 0 50px rgba(255, 176, 32, 0);
  }
}

/* ---- ホーム：ヘッダーのあいさつ・一行ニュース ---- */

.home .brand small {
  color: var(--sub);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-top: 4px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.tk-live {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--live);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.tk-live .dot-live {
  width: 6px;
  height: 6px;
  background: #fff;
}

.tk-win {
  position: relative;
  flex: 1;
  height: 100%;
  min-width: 0;
}

.tk-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.4s cubic-bezier(0.3, 1.2, 0.5, 1),
    opacity 0.3s;
  pointer-events: none;
}

.tk-item.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tk-item.off {
  opacity: 0;
  transform: translateY(-100%);
}

.tk-item.mine {
  color: var(--gold);
}

.tk-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-go {
  color: var(--faint);
  font-size: 16px;
}

[data-theme="jtcc"] .ticker {
  border: 2px solid #f8c215;
  background: #fffbe6;
}

[data-theme="jtcc"] .tk-item.mine {
  color: #b07800;
}

/* ---- ホーム：いまGET！ ---- */

.got-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 3px;
  width: 132px;
  padding: 0 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}

.got-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
}

.got-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.got-burst {
  position: absolute;
  top: 6px;
  right: -4px;
  padding: 3px 12px 3px 9px;
  background: linear-gradient(90deg, #ffd84a, #ff9a1f);
  color: #2a1400;
  font-family: var(--cond);
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  transform: rotate(8deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  animation: gotWobble 2.4s ease-in-out infinite;
}

@keyframes gotWobble {
  0%,
  100% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(3deg) scale(1.08);
  }
}

.got-host {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 8px 0;
}

.got-host .h-av {
  box-shadow: 0 0 0 2px var(--c);
}

.got-host small {
  color: var(--c);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.got-card b {
  display: -webkit-box;
  margin: 0 8px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.got-card small.got-who,
.got-card small.got-amt {
  margin: 0 8px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.got-who {
  color: var(--sub);
  font-weight: 700;
}

.got-amt {
  color: var(--gold);
  font-weight: 800;
}

/* ---- ホーム：今週のランキング ---- */

.sec.rank {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 14%, var(--card)), var(--card) 55%);
  box-shadow: var(--shadow);
}

.sec.rank h2 .sec-note {
  margin-left: auto;
}

.rk-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 12px;
  background: var(--card2);
}

.rk-tabs button {
  padding: 8px 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--sub);
  font-size: 13px;
  font-weight: 800;
}

.rk-tabs button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.rk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rk-list li > * {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  text-align: left;
}

.rk-list li:nth-child(1) > * {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}

.rk-list li.me > * {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}

.rk {
  width: 26px;
  flex: none;
  color: var(--faint);
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.rk-av {
  display: grid;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: var(--line);
}

.rk-av.live {
  background: conic-gradient(from 200deg, var(--live), #ff9a3c, var(--live));
}

.rk-who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.rk-who b,
.rk-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rk-who b {
  font-size: 14px;
}

.rk-who small {
  color: var(--faint);
  font-size: 11px;
}

.rk-val {
  position: relative;
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 3px;
  min-width: 64px;
  justify-content: flex-end;
  padding-bottom: 6px;
}

.rk-val b {
  font-family: var(--cond);
  font-size: 19px;
}

.rk-val small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.rk-val i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--p, 0) * 100%);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--live));
}

.rk-me {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--ok) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ink);
  text-align: left;
}

.rk-me small {
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---- これからの配信：カウントダウンとフォロー ---- */

.up-main em.cd {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

[data-theme="jtcc"] .up-main em.cd {
  color: #2e2e2e;
}

.fl-btn {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 64px;
  padding: 7px 0;
  border: 0;
  border-radius: 12px;
  background: var(--live);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--live) 40%, transparent);
}

.fl-btn b {
  font-size: 17px;
  line-height: 1.1;
}

.fl-btn.on {
  background: var(--card2);
  color: var(--sub);
  box-shadow: inset 0 0 0 1px var(--line);
}

.fl-btn:active {
  transform: scale(0.94);
}

/* ---- ショップ：タイムセール・ガチャ・並び替え・商品の札 ---- */

.sale {
  margin: 0 -16px;
  padding: 12px 16px 14px;
  background: linear-gradient(120deg, #ff2d55, #ff7a1a 60%, #ffb020);
  color: #fff;
}

.sale-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sale-hd b {
  font-family: var(--cond);
  font-size: 22px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.sale-hd small {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.9;
}

.sale-hd em {
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--cond);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.sale .rail {
  margin: 0 -16px;
}

.sale-card {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  width: 112px;
  padding: 0 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #2e2e2e;
  text-align: left;
  box-shadow: 0 6px 16px rgba(120, 20, 0, 0.3);
}

.sale-card .p-img {
  border-radius: 0;
  box-shadow: none;
}

.sale-pct {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 7px;
  border-radius: 7px;
  background: #ff2d55;
  color: #fff;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sale-price {
  margin: 0 8px;
  color: #e5213d;
  font-size: 15px;
  font-weight: 900;
}

.sale-price s {
  color: #999;
  font-size: 10.5px;
  font-weight: 400;
}

.sale-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 8px;
}

.sale-left i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: #f1d9d9;
}

.sale-left i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, #ff7a1a, #ff2d55);
}

.sale-left small {
  color: #c2302e;
  font-size: 10.5px;
  font-weight: 800;
}

.gacha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, #6a2cff, #2a0b5e 60%, #140630);
  color: #fff;
  box-shadow: 0 10px 24px rgba(60, 20, 140, 0.35);
}

.gacha::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, 0.05) 18px 20px);
  pointer-events: none;
}

.gc-machine {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 64px;
}

.gc-dome {
  position: relative;
  width: 60px;
  height: 52px;
  border-radius: 30px 30px 8px 8px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.gc-dome i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--b) 50%, #fff 50%);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2);
  animation: gcJiggle 1.6s ease-in-out infinite;
}

.gc-dome .b0 {
  --b: #ff4078;
  left: 4px;
  bottom: 2px;
}

.gc-dome .b1 {
  --b: #ffd84a;
  left: 21px;
  bottom: 1px;
  animation-delay: 0.2s;
}

.gc-dome .b2 {
  --b: #3fd0ff;
  left: 38px;
  bottom: 3px;
  animation-delay: 0.4s;
}

.gc-dome .b3 {
  --b: #8cff3a;
  left: 12px;
  bottom: 17px;
  animation-delay: 0.6s;
}

.gc-dome .b4 {
  --b: #c79bff;
  left: 30px;
  bottom: 18px;
  animation-delay: 0.3s;
}

.gc-dome .b5 {
  --b: #ff8a5c;
  left: 21px;
  bottom: 32px;
  animation-delay: 0.5s;
}

@keyframes gcJiggle {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(20deg);
  }
}

.gc-base {
  display: grid;
  place-items: center;
  width: 64px;
  height: 22px;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #ff4078, #c2185b);
}

.gc-base i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffd84a;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.gc-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gc-txt > small:first-child {
  color: #ffd84a;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.gc-txt b {
  font-size: 15px;
  line-height: 1.25;
}

.gc-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

.btn.gc-spin {
  position: relative;
  z-index: 1;
  flex: none;
  min-width: 72px;
  padding: 11px 12px;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 900;
}

.btn.gc-spin.free {
  animation: gcPulse 1.1s ease-in-out infinite;
}

@keyframes gcPulse {
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 0 5px rgba(255, 216, 74, 0.35);
  }
}

.gc-sheet {
  text-align: center;
}

.gc-stage {
  display: grid;
  place-items: center;
  height: 150px;
}

.gc-cap {
  position: relative;
  width: 96px;
  height: 96px;
  animation: gcShake 0.32s ease-in-out 4;
}

.gc-cap i {
  position: absolute;
  left: 0;
  width: 96px;
  height: 48px;
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.gc-cap i:first-child {
  top: 0;
  border-radius: 48px 48px 0 0;
  background: linear-gradient(160deg, #ff7ab8, #e0167a);
}

.gc-cap i:last-child {
  bottom: 0;
  border-radius: 0 0 48px 48px;
  background: linear-gradient(180deg, #f4f4f8, #cfd2dc);
}

.gc-cap.r1 i:first-child {
  background: linear-gradient(160deg, #6fe0ff, #1c8fd6);
}

.gc-cap.r2 i:first-child {
  background: linear-gradient(160deg, #d6a4ff, #7a2cff);
}

.gc-cap.r3 i:first-child {
  background: linear-gradient(160deg, #fff27a, #ffb51f);
}

.gc-cap.open {
  animation: none;
}

.gc-cap.open i:first-child {
  transform: translateY(-34px) rotate(-18deg);
}

.gc-cap.open i:last-child {
  transform: translateY(26px) rotate(8deg);
  opacity: 0.4;
}

@keyframes gcShake {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

.gc-reveal {
  min-height: 110px;
}

.gc-win {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: pop 0.4s ease-out;
}

.gc-st {
  height: 70px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.gc-coins {
  font-family: var(--cond);
  font-size: 44px;
  font-weight: 900;
  color: var(--gold, #ffd84a);
}

.gc-coins.r3 {
  background: linear-gradient(90deg, #ffd84a, #ff4078, #3fd0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gc-reveal p {
  margin: 4px 0 0;
  font-weight: 900;
}

.sorts {
  display: flex;
  gap: 14px;
  margin: -12px 0 -6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sorts button {
  flex: none;
  padding: 2px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 800;
}

.sorts button.on {
  border-color: var(--live);
  color: var(--ink);
}

[data-theme="jtcc"] .sorts button.on {
  border-color: #22ac38;
}

.p-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.p-tag.hot {
  background: linear-gradient(90deg, #ff3b30, #ff9a1f);
}

.p-tag.new {
  background: #1f8fff;
}

.p-tag.limited {
  background: #111;
  color: #ffd84a;
  box-shadow: inset 0 0 0 1px #ffd84a;
}

.p-img .p-rank {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  line-height: 1;
  border-radius: 0 12px 0 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 900;
}

.p-rank.r1 {
  background: linear-gradient(135deg, #ffe27a, #d9a400);
  color: #3a2800;
}

.p-rank.r2 {
  background: linear-gradient(135deg, #f2f4f8, #a8afbd);
  color: #2e2e2e;
}

.p-rank.r3 {
  background: linear-gradient(135deg, #ffc49a, #b8672e);
}

.s-eyes {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
}

.s-tile.low .stock small {
  color: var(--price);
  font-weight: 900;
}

/* 商品の画像の見せ方（投票の絵・アクリルスタンド・フォトカード・ミステリーボックス） */

.look-sticker,
.look-box {
  position: relative;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c, #ff4078) 45%, #fff), color-mix(in srgb, var(--c, #ff4078) 85%, #000)) !important;
}

.look-sticker img,
.look-box img {
  object-fit: contain !important;
  padding: 12%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}

.look-acrylic {
  position: relative;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--c, #ff4078) 40%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, #f4f5f8 0 10px, #eceef3 10px 20px) !important;
}

.look-acrylic img {
  position: absolute;
  top: 7%;
  left: 21%;
  width: 58% !important;
  height: 72% !important;
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px 14px 10px 10px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 8px 14px rgba(0, 0, 0, 0.25);
}

.look-acrylic::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 9%;
  height: 10%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(200, 210, 230, 0.8));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.look-acrylic::after {
  content: "";
  position: absolute;
  top: 7%;
  left: 21%;
  width: 58%;
  height: 72%;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.55), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.25));
  pointer-events: none;
}

.look-pcard {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, #ff4078) 30%, #1a1a24), #0e0e14) !important;
}

.look-pcard img {
  position: absolute;
  top: 9%;
  left: 22%;
  width: 56% !important;
  height: 82% !important;
  border: 3px solid #fff;
  border-radius: 8px;
  object-fit: cover;
  transform: rotate(-5deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.look-pcard::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 22%;
  width: 56%;
  height: 82%;
  border-radius: 8px;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 220, 0.35) 38%, rgba(120, 230, 255, 0.35) 50%, rgba(255, 255, 140, 0.3) 62%, transparent 80%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  transform: rotate(-5deg);
  animation: holo 3.2s linear infinite;
  pointer-events: none;
}

@keyframes holo {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -150% 0;
  }
}

.prod-hero.look-sticker img,
.prod-hero.look-box img {
  padding: 6% 20%;
}

.prod-hero.look-acrylic,
.prod-hero.look-pcard {
  height: 230px;
  border-radius: 14px;
}

/* ---- 配信者のアカウントページ ---- */

.page.profile {
  gap: 16px;
}

.pf-hd {
  margin-bottom: -16px;
}

.pf-hd .back {
  font-size: 22px;
  line-height: 1;
}

.pf-hd-name {
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 800;
}

.pf-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 -16px;
  padding: 26px 16px 18px;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.pf-cover-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(14px) saturate(1.3) brightness(0.55);
  transform: scale(1.1);
}

.pf-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, transparent), rgba(0, 0, 0, 0.35) 55%, var(--bg));
}

.pf-cover > :not(img) {
  position: relative;
  z-index: 1;
}

.pf-av {
  position: relative;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.pf-av.live {
  background: conic-gradient(from 200deg, var(--live, #ff2d64), #ff9a3c, var(--c), var(--live, #ff2d64));
  animation: pfSpin 4s linear infinite;
}

.pf-av .h-av {
  display: block;
  border: 3px solid #0b0b10;
}

.pf-av.live .h-av {
  animation: pfSpin 4s linear infinite reverse;
}

@keyframes pfSpin {
  to {
    transform: rotate(360deg);
  }
}

.pf-av .st-live {
  top: auto;
  bottom: -6px;
  font-size: 11px;
}

.pf-cover h1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 2px;
  font-family: var(--cond);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pf-ok {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1fa1ff;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.pf-handle {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  font-weight: 700;
}

.pf-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: 14px;
}

.pf-counts > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pf-counts > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.pf-counts b {
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 800;
}

.pf-counts small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.pf-acts {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.pf-acts .btn {
  margin: 0;
}

.btn.pf-follow {
  flex: 1;
  background: var(--live, #ff2d64);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--live, #ff2d64) 45%, transparent);
}

.btn.pf-follow.on {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.btn.pf-watch {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: #0b0b10;
  font-weight: 900;
}

.btn.pf-icon {
  width: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 18px;
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
}

.pf-tags i {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--card2);
  color: var(--sub);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
}

.pf-tags i.hot {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--gold);
}

.pf-bio {
  margin: -4px 0 0;
  color: var(--sub);
  font-size: 13.5px;
  line-height: 1.55;
}

.pf-live {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--live) 26%, var(--card)), var(--card));
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--live) 60%, transparent),
    var(--shadow);
}

.pf-live img {
  flex: none;
  width: 64px;
  height: 86px;
  border-radius: 10px;
  object-fit: cover;
}

.pf-live > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pf-live-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf-live-top .live-chip {
  background: var(--live);
  font-style: normal;
}

.pf-live-top small {
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 700;
}

.pf-live b {
  font-size: 14.5px;
  line-height: 1.3;
}

.pf-go {
  color: var(--live);
  font-size: 12px;
  font-weight: 900;
}

.pf-next,
.pf-sign,
.pf-tabwrap {
  padding: 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.pf-next-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pf-next-top > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pf-next-top small {
  color: var(--c);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

[data-theme="jtcc"] .pf-next-top small {
  color: #22ac38;
}

.pf-next-top b {
  font-size: 15px;
}

.pf-next-top b.cd {
  flex: none;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--live);
  color: #fff;
  font-family: var(--cond);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.pf-target {
  margin: 6px 0 0;
  color: var(--sub);
  font-size: 12.5px;
}

.pf-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0 6px;
  padding: 0;
  list-style: none;
}

.pf-week li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--card2);
}

.pf-week li small {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 800;
}

.pf-week li b {
  color: var(--faint);
  font-size: 11px;
}

.pf-week li.on {
  background: color-mix(in srgb, var(--c) 22%, var(--card2));
}

.pf-week li.on b {
  color: var(--ink);
}

.pf-week li.today {
  box-shadow: inset 0 0 0 1.5px var(--live);
}

.pf-jst {
  color: var(--faint);
  font-size: 10.5px;
}

.pf-stats {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 8px;
}

.pf-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 8px 4px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.pf-stats b {
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 800;
}

.pf-stats small {
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.2;
}

.pf-ring {
  position: relative;
}

.pf-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  margin: auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), var(--card2) 0);
  -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px);
  mask: radial-gradient(circle, transparent 26px, #000 27px);
}

.pf-ring b,
.pf-ring small {
  position: relative;
}

.pf-ring small {
  margin-top: 28px;
}

.pf-ring b {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.pf-sign small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.pf-sign b {
  display: block;
  margin: 2px 0 4px;
  font-size: 17px;
}

.pf-sign p {
  margin: 0;
  color: var(--sub);
  font-size: 12.5px;
  line-height: 1.5;
}

.pf-tabwrap {
  padding: 6px 10px 12px;
}

.pf-tabs {
  position: sticky;
  top: 56px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -10px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.pf-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 2.5px solid transparent;
  background: none;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 900;
}

.pf-tabs button small {
  font-size: 10px;
  font-weight: 700;
}

.pf-tabs button.on {
  border-color: var(--ink);
  color: var(--ink);
}

.pf-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 -6px;
}

.pf-vid {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  text-align: left;
}

.pf-vid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-vid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85));
}

.pf-pin,
.pf-viral {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--live, #ff2d64);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
}

.pf-viral {
  top: auto;
  bottom: 44px;
  background: linear-gradient(90deg, #ff9a1f, #ff3b3b);
}

.pf-vid-t {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 20px;
  z-index: 1;
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pf-vid-b {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.9;
}

.pf-replays {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-rp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  text-align: left;
}

.pf-rp:active {
  background: var(--card2);
}

.pf-rp-img {
  position: relative;
  flex: none;
  width: 92px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}

.pf-rp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-rp-img i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.pf-rp-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pf-rp-txt small {
  color: var(--faint);
  font-size: 10.5px;
}

.pf-rp-txt b {
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-res {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--card2);
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.pf-res.get {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--gold);
}

.pf-rp-play {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card2);
  color: var(--ink);
  font-size: 12px;
}

.pf-prizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pf-prize {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pf-prize-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 45%, #fff), color-mix(in srgb, var(--c) 85%, #000));
}

.pf-prize-img img {
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

.pf-prize.photo .pf-prize-img img {
  padding: 0;
  object-fit: cover;
  filter: none;
}

.pf-prize b {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-prize small {
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 900;
}

.pf-fans-note {
  margin: 4px 0 8px;
  color: var(--faint);
  font-size: 11.5px;
}

.pf-fans ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-fans li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 12px;
}

.pf-fans li:first-child {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.pf-fans li.me {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}

.pf-fans li b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-fans li small {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.pf-me {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--ok) 60%, transparent);
  border-radius: 12px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

[data-theme="jtcc"] .pf-cover::after {
  background: linear-gradient(180deg, rgba(182, 26, 216, 0.45), rgba(236, 22, 144, 0.35) 55%, var(--bg));
}

[data-theme="jtcc"] .btn.pf-follow:not(.on) {
  background: linear-gradient(99deg, #ffe050 0%, #ffd71f 100%);
  color: #2e2e2e;
  box-shadow: 0 3px 0 #e0b400;
}

[data-theme="jtcc"] .pf-tabs button.on {
  border-color: #22ac38;
  color: #22ac38;
}

@media (prefers-reduced-motion: reduce) {
  .au-fly,
  .vo-plus,
  .got-burst,
  .gc-dome i,
  .btn.gc-spin.free,
  .look-pcard::after,
  .pf-av.live,
  .pf-av.live .h-av {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vpanel.hy-predict::after,
  .pr-vs::before,
  .hy-predict.hot,
  .room.fx-tension .hy-predict.final,
  .bg-halo,
  .gh-emo i,
  .gift-cell.t3 {
    animation: none;
  }
}

/* ---- ハートの嵐（ランダムに来る） ---- */

@property --fa {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.room.heart-fever .act.like {
  border-color: transparent;
  background: conic-gradient(from var(--fa), #ff2d6f, #ff9a1f, #ffe45c, #ff5fd2, #a45bff, #ff2d6f);
  color: #fff;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.9), 0 0 22px 6px rgba(255, 45, 111, 0.85), 0 0 44px 10px rgba(255, 160, 40, 0.45);
  animation: likeBeat 0.42s ease-in-out infinite, feverSpin 1.1s linear infinite;
}

.room.heart-fever .act.like .ico {
  color: #fff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 1px 0 rgba(120, 0, 40, 0.6));
  animation: feverHeart 0.42s ease-in-out infinite;
}

.room.heart-fever .act.like::before,
.room.heart-fever .act.like::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2.5px solid #ff7ab8;
  border-radius: 50%;
  pointer-events: none;
  animation: feverRipple 0.84s ease-out infinite;
}

.room.heart-fever .act.like::after {
  border-color: #ffd84a;
  animation-delay: 0.42s;
}

.room.heart-fever .act-lbl {
  z-index: 1;
  border-color: #fff;
  background: linear-gradient(90deg, #ffe45c, #ff9a1f, #ff2d6f, #ffe45c);
  background-size: 300% 100%;
  color: #3a0015;
  font-size: 10.5px;
  box-shadow: 0 0 12px rgba(255, 176, 32, 0.9);
  animation: feverLbl 0.8s linear infinite, feverLblBeat 0.42s ease-in-out infinite;
}

.room.heart-fever .act-lbl::before {
  content: "🔥";
  margin-right: 2px;
}

@keyframes feverSpin {
  to {
    --fa: 360deg;
  }
}

@keyframes feverHeart {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.35) rotate(-8deg);
  }
}

@keyframes feverRipple {
  from {
    opacity: 0.95;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.3);
  }
}

@keyframes feverLbl {
  to {
    background-position: 300% 0;
  }
}

@keyframes feverLblBeat {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
}

.room.heart-fever .hearts {
  width: 96px;
}

@keyframes likeBeat {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  55% {
    transform: scale(0.96);
  }
}

.like-fever {
  position: absolute;
  z-index: 6;
  display: grid;
  justify-items: end;
  padding: 4px 10px 5px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 45, 111, 0.92), rgba(255, 122, 184, 0.92));
  box-shadow: 0 0 18px rgba(255, 45, 111, 0.7);
  color: #fff;
  font-family: var(--cond);
  pointer-events: none;
  transform: translate(-100%, calc(-100% - 8px));
  animation: feverIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.like-fever small {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.like-fever b {
  font-size: 22px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.like-fever.out {
  animation: feverOut 0.45s ease-in forwards;
}

@keyframes feverIn {
  from {
    opacity: 0;
    transform: translate(-100%, calc(-100% - 8px)) scale(0.5);
  }
}

@keyframes feverOut {
  to {
    opacity: 0;
    transform: translate(-100%, calc(-100% - 40px)) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .room.heart-fever .act.like,
  .room.heart-fever .act.like .ico,
  .room.heart-fever .act.like::before,
  .room.heart-fever .act.like::after,
  .room.heart-fever .act-lbl,
  .like-fever {
    animation: none;
  }
}