*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── DARK · Graphite / Amber (default) ── */
  --bg: #16130f;
  --surface: #201c16;
  --border: #332e24;
  --text: #f0ebe1;
  --muted: #7a7064;
  --accent: #e8b35a;
  --accent-fill: rgba(232, 179, 90, 0.10);
  --accent-hover: rgba(232, 179, 90, 0.13);
  --focus-ring: rgba(232, 179, 90, 0.55);
  --danger: #ef6f5e;
  --fav: #f0cd86;
  --scrim: rgba(0, 0, 0, 0.50);
  --scrim-overlay: rgba(22, 19, 15, 0.92);
  --mono: 'DM Mono', monospace;
  --sans: 'Noto Sans JP', sans-serif;
}

[data-theme="light"] {
  /* ── LIGHT · Porcelain / Terracotta ── */
  --bg: #f4f1ea;
  --surface: #ffffff;
  --border: #e2dccf;
  --text: #2a2722;
  --muted: #938b7d;
  --accent: #c75b3e;
  --accent-fill: rgba(199, 91, 62, 0.10);
  --accent-hover: rgba(199, 91, 62, 0.14);
  --focus-ring: rgba(199, 91, 62, 0.45);
  --danger: #cf4436;
  --fav: #c9952f;
  --scrim: rgba(40, 36, 30, 0.40);
  --scrim-overlay: rgba(244, 241, 234, 0.92);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  gap: 12px;
}

/* ── Header ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

.counter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.counter span {
  color: var(--accent);
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  font-size: 18px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
}
.icon-btn:hover { border-color: var(--text); color: var(--text); }

/* ガチャ準備中ラベル（無効ボタン） */
.icon-btn.gacha-soon {
  width: auto;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: not-allowed;
  opacity: 0.55;
}
.icon-btn.gacha-soon:hover { border-color: var(--border); color: var(--muted); }

/* ── Text-safe UI icons (no emoji glyph fallback) ── */
.ui-icon {
  --icon-size: 1em;
  --icon-bg: var(--bg);
  position: relative;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  color: currentColor;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

.icon-btn .ui-icon { --icon-size: 18px; }
.btn .ui-icon,
.seg .ui-icon,
.usage-key .ui-icon { --icon-size: 1.05em; }

.icon-sun {
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: scale(0.58);
  box-shadow:
    0 -0.82em 0 -0.34em currentColor,
    0 0.82em 0 -0.34em currentColor,
    0.82em 0 0 -0.34em currentColor,
    -0.82em 0 0 -0.34em currentColor,
    0.58em 0.58em 0 -0.34em currentColor,
    -0.58em -0.58em 0 -0.34em currentColor,
    0.58em -0.58em 0 -0.34em currentColor,
    -0.58em 0.58em 0 -0.34em currentColor;
}

.icon-moon {
  border-radius: 50%;
  box-shadow: inset 0.32em 0 0 0 currentColor;
}

.icon-settings {
  background: currentColor;
  border-radius: 50%;
  -webkit-mask:
    radial-gradient(circle, transparent 0 0.19em, #000 0.2em 0.37em, transparent 0.38em),
    repeating-conic-gradient(#000 0deg 18deg, transparent 18deg 36deg);
  mask:
    radial-gradient(circle, transparent 0 0.19em, #000 0.2em 0.37em, transparent 0.38em),
    repeating-conic-gradient(#000 0deg 18deg, transparent 18deg 36deg);
}

.icon-star,
.icon-star-fill {
  background: currentColor;
  clip-path: polygon(50% 5%, 61% 36%, 94% 36%, 67% 55%, 78% 88%, 50% 68%, 22% 88%, 33% 55%, 6% 36%, 39% 36%);
}
.icon-star::after {
  content: '';
  position: absolute;
  inset: 0.22em;
  background: var(--icon-bg);
  clip-path: inherit;
}
.image-wrap .ui-icon,
.gr-fav .ui-icon { --icon-bg: var(--surface); }

.icon-pause::before,
.icon-pause::after {
  content: '';
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  width: 0.24em;
  background: currentColor;
  border-radius: 1px;
}
.icon-pause::before { left: 0.22em; }
.icon-pause::after { right: 0.22em; }

.icon-play {
  background: currentColor;
  clip-path: polygon(28% 14%, 28% 86%, 82% 50%);
}

.icon-flip::before,
.icon-flip::after {
  content: '';
  position: absolute;
  left: 0.08em;
  right: 0.08em;
  height: 0.18em;
  border-top: 2px solid currentColor;
}
.icon-flip::before {
  top: 0.24em;
  border-right: 2px solid currentColor;
  transform: skewX(-18deg);
}
.icon-flip::after {
  bottom: 0.24em;
  border-left: 2px solid currentColor;
  transform: skewX(-18deg);
}

.icon-next::before {
  content: '';
  position: absolute;
  inset: 0.22em 0.16em 0.22em 0.1em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.icon-close::before,
.icon-close::after {
  content: '';
  position: absolute;
  left: 0.15em;
  right: 0.15em;
  top: calc(50% - 1px);
  border-top: 2px solid currentColor;
}
.icon-close::before { transform: rotate(45deg); }
.icon-close::after { transform: rotate(-45deg); }
.panel .ui-icon { --icon-bg: var(--surface); }