/* ============================================================
   TEKILA ROULETTE — base.css
   Theme-agnostic structure + default theme variables (mexican)
   Theme overrides live in themes.css
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* -------- default variables (mexican sunset) -------- */
:root {
  /* fonts (theme-overridden) — JP fallback at end so Japanese text always renders */
  --font-display: "Bebas Neue", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-body:    "Yeseva One", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", serif;

  /* surface */
  --bg-grad-1: #2a0e1f;
  --bg-grad-2: #5b1f2c;
  --bg-grad-3: #b8520a;
  --bg-grad-4: #f2a93b;
  --bg-overlay-noise: 0.10;

  /* accents */
  --accent-1: #e84a30;   /* terracotta primary */
  --accent-2: #f2c14e;   /* marigold */
  --accent-3: #3d8b6e;   /* cactus green */
  --accent-4: #f7e8c1;   /* desert bone */

  /* text */
  --text:        #fff5e6;
  --text-dim:    rgba(247, 232, 193, 0.72);
  --text-shadow: 0 2px 12px rgba(232, 74, 48, 0.45);

  /* player palette (8 distinct, high-contrast) */
  --player-1: #e84a30;
  --player-2: #f2c14e;
  --player-3: #3d8b6e;
  --player-4: #4fc3f7;
  --player-5: #b76fa2;
  --player-6: #f47a4a;
  --player-7: #e8d34d;
  --player-8: #c45842;

  /* wheel rim */
  --wheel-rim-inner: #f2c14e;
  --wheel-rim-outer: #6b2010;
  --wheel-rim-glow:  rgba(242, 193, 78, 0.6);

  /* center dot */
  --center-bg-1: #fff5e6;
  --center-bg-2: #f2c14e;
  --center-glow: rgba(242, 193, 78, 0.65);

  /* commentary */
  --commentary-color:    #f2c14e;
  --commentary-shadow-1: #e84a30;
  --commentary-shadow-2: #3d8b6e;

  /* winner ring */
  --winner-ring: rgba(242, 193, 78, 0.95);

  /* modal */
  --modal-bg:     rgba(20, 8, 18, 0.92);
  --modal-border: rgba(247, 232, 193, 0.18);
  --modal-card:   rgba(247, 232, 193, 0.05);

  /* confetti */
  --confetti-1: #e84a30;
  --confetti-2: #f2c14e;
  --confetti-3: #3d8b6e;
  --confetti-4: #f7e8c1;
  --confetti-5: #b76fa2;
  --confetti-6: #ffffff;

  /* tap feedback */
  --tap-glow: rgba(242, 193, 78, 0.5);
}

/* ============================================================
   GLOBAL LAYOUT
   ============================================================ */
body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse at 30% 110%, var(--bg-grad-3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% -10%, var(--bg-grad-4) 0%, transparent 40%),
    linear-gradient(168deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 60%, var(--bg-grad-1) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* extra bottom padding leaves room for the fixed ad zone (.ad-zone is 60px) */
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    calc(max(28px, env(safe-area-inset-bottom)) + 70px)
    max(14px, env(safe-area-inset-left));
  color: var(--text);
  position: relative;
  letter-spacing: 0.02em;
}

/* atmospheric noise + stars layer */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 11%, var(--accent-2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 67%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 78%, var(--accent-4) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 35%, var(--accent-2) 50%, transparent 51%);
  background-size: 360px 360px, 280px 280px, 420px 420px, 320px 320px, 240px 240px;
  opacity: var(--bg-overlay-noise);
  animation: starfield-drift 60s linear infinite;
  z-index: 0;
}
@keyframes starfield-drift {
  to { background-position: 360px 360px, -280px 280px, 420px -420px, -320px -320px, 240px 240px; }
}

/* main columns */
.app {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  min-width: 0;
}
.header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.app-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.4vw, 32px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 0.95;
  color: var(--text);
  text-transform: uppercase;
  text-shadow:
    0 0 18px var(--text-shadow),
    -1px -1px 0 var(--accent-1);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  overflow: hidden;
}
.app-title .glyph { font-size: 0.9em; }
.icon-btn { flex-shrink: 0; }
.icon-btn {
  background: transparent;
  border: 1px solid var(--modal-border);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: transform 0.18s, background 0.18s, border-color 0.18s;
}
.icon-btn:hover { background: var(--modal-card); border-color: var(--accent-2); }
.icon-btn:active { transform: scale(0.94); }

/* ============================================================
   MODE SELECTOR
   ============================================================ */
.mode-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.mode-btn {
  background: transparent;
  border: none;
  padding: 10px 6px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: clamp(12px, 3.4vw, 15px);
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.mode-btn .ico { font-size: 18px; line-height: 1; }
.mode-btn[aria-selected="true"] {
  background: linear-gradient(165deg, var(--accent-1), var(--accent-2));
  color: #1a0a14;
  box-shadow: 0 6px 18px -6px var(--accent-1), inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* ============================================================
   SCOREBOARD
   ============================================================ */
.scoreboard-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.scoreboard-wrap.empty { display: none; }
.scoreboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-family: var(--font-display);
}
.scoreboard-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.78;
}
.scoreboard-reset {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent-1);
  border-radius: 999px;
  padding: 3px 10px 4px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity .15s, color .15s, border-color .15s, transform .1s, background .15s;
}
.scoreboard-reset:hover:not(:disabled),
.scoreboard-reset:focus-visible:not(:disabled) {
  opacity: 1;
  color: var(--text);
  border-color: var(--accent-1);
  outline: none;
}
.scoreboard-reset:active:not(:disabled) { transform: scale(0.96); }
.scoreboard-reset:disabled {
  opacity: 0.3;
  cursor: default;
}
.scoreboard {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.score-pill {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  backdrop-filter: blur(8px);
  padding: 7px 11px 9px;
  border-radius: 14px;
  text-align: center;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 0.3s;
  position: relative;
}
.score-pill .emoji {
  font-size: 16px;
  line-height: 1;
}
.score-pill .name {
  font-size: 11px;
  font-family: var(--font-body);
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
}
.score-pill .num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.score-pill .num::after {
  content: var(--unit, "杯");
  font-size: 10px;
  margin-left: 1px;
  opacity: 0.7;
}
.score-pill.bump { animation: score-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes score-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22) translateY(-5px); }
  100% { transform: scale(1); }
}
.score-pill.dim { opacity: 0.55; }

/* ============================================================
   WHEEL
   ============================================================ */
.wheel-stage {
  position: relative;
  width: min(86vw, 380px);
  height: min(86vw, 380px);
  margin: 6px auto 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wheel-stage[data-spinning="true"] {
  pointer-events: none;
  filter: brightness(0.92);
}
.wheel-stage[data-spinning="false"] {
  cursor: pointer;
}
.wheel-glow {
  position: absolute; inset: -36px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--center-glow) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.wheel-glow.on {
  opacity: 1;
  animation: wheel-pulse 0.9s ease-in-out infinite;
}
@keyframes wheel-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.pointer {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 38px solid var(--accent-2);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  z-index: 10;
}
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 8px var(--wheel-rim-inner),
    0 0 0 12px var(--wheel-rim-outer),
    0 22px 60px rgba(0,0,0,0.55),
    inset 0 0 80px rgba(0,0,0,0.35);
  /* conic-gradient is set inline by wheel.js */
}
.wheel::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0) 0 8deg,
    rgba(255,255,255,0.07) 8deg 16deg
  );
  border-radius: 50%;
  pointer-events: none;
}
.wheel-divider {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  /* set inline by wheel.js: conic-gradient with N divider lines */
}
.wheel-label {
  position: absolute;
  top: 50%; left: 50%;
  font-family: var(--font-display);
  font-size: clamp(11px, 3vw, 17px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.85);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.wheel-label .e { font-size: 1.3em; line-height: 1; margin-bottom: 2px; }
.wheel-label.tight  { font-size: clamp(9px, 2.4vw, 13px); }
.wheel-label.tight .e { font-size: 1.0em; }
/* For very narrow segments (≤17° / 21+ players) clip the name so adjacent
 * labels don't visually overlap. 14-char names truncate with an ellipsis
 * and the emoji takes priority. */
.wheel-label.tight .t  { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.wheel-label.xtight    { font-size: clamp(8px, 2vw, 11px); letter-spacing: 0; }
.wheel-label.xtight .t { max-width: 56px; }
.wheel-label.xtight .e { font-size: 0.9em; }
.wheel-label.void {
  color: rgba(255,255,255,0.5);
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.center-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: radial-gradient(circle, var(--center-bg-1) 25%, var(--center-bg-2) 100%);
  border-radius: 50%;
  box-shadow:
    0 0 24px var(--center-glow),
    inset 0 -4px 8px rgba(0,0,0,0.3);
  z-index: 5;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tap-hint {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--text-dim);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.85;
  animation: tap-hint-pulse 2s ease-in-out infinite;
}
@keyframes tap-hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
.wheel-stage[data-spinning="true"] .tap-hint { display: none; }
.winner-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.winner-pulse.on { animation: winner-ring 1.05s ease-out 3; }
@keyframes winner-ring {
  0%   { opacity: 0.85; box-shadow: 0 0 0 0 var(--winner-ring); }
  100% { opacity: 0;    box-shadow: 0 0 0 90px transparent; }
}

/* ============================================================
   RESULT / REVEAL
   ============================================================ */
.result {
  font-family: var(--font-display);
  font-size: clamp(18px, 4.9vw, 30px);
  letter-spacing: 0.04em;
  font-weight: 400;
  text-align: center;
  line-height: 1.25;
  min-height: 56px;
  margin-top: 28px;
  padding: 0 12px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.45s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.result.show { opacity: 1; transform: scale(1); }

.reveal-card {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 22px 20px 18px;
  margin-top: 12px;
  text-align: center;
  display: none;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.65);
}
.reveal-card.show { display: flex; }
.reveal-card .winner-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.reveal-card .badge {
  align-self: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--modal-border);
}
.reveal-card .badge.cat-romance { background: rgba(255, 107, 157, 0.18); border-color: #ff6b9d; }
.reveal-card .badge.cat-work    { background: rgba(79, 195, 247, 0.18); border-color: #4fc3f7; }
.reveal-card .badge.cat-memory  { background: rgba(167, 139, 250, 0.18); border-color: #a78bfa; }
.reveal-card .badge.cat-silly   { background: rgba(242, 193, 78, 0.18); border-color: var(--accent-2); }
.reveal-card .badge.cat-deep    { background: rgba(231, 76, 60, 0.20); border-color: var(--accent-1); }
.reveal-card .badge.lvl-mild    { background: rgba(74, 222, 128, 0.18); border-color: #4ade80; }
.reveal-card .badge.lvl-normal  { background: rgba(242, 193, 78, 0.18); border-color: var(--accent-2); }
.reveal-card .badge.lvl-hard    { background: rgba(232, 74, 48, 0.22); border-color: var(--accent-1); }
.reveal-card .badge.nominate {
  background: linear-gradient(135deg, rgba(255, 191, 0, 0.30), rgba(255, 107, 0, 0.30));
  border-color: var(--accent-2);
  color: #ffe9a8;
  letter-spacing: 0.18em;
  font-size: 13px;
  white-space: nowrap;
}
.reveal-card .badge.godNominate {
  background: linear-gradient(135deg, #6b3ec3, #ffd966);
  border-color: #ffd966;
  color: #fff;
  text-shadow: 0 0 8px #ffd966, 0 1px 0 rgba(0,0,0,0.55);
  letter-spacing: 0.2em;
  font-size: 13px;
  white-space: nowrap;
}
.reveal-card .text {
  font-family: var(--font-body);
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.45;
  padding: 4px 4px 8px;
  white-space: pre-line;
}
.reveal-card { position: relative; }
.multiplier-badge {
  position: absolute;
  top: -22px;
  right: -10px;
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border: 4px solid #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: #1a0a14;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transform: rotate(-14deg) scale(0);
  box-shadow: 0 6px 16px -4px var(--accent-1), 0 0 0 4px rgba(255,255,255,0.18);
  z-index: 6;
  white-space: nowrap;
}
.multiplier-badge.show {
  display: flex;
  animation: badge-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             badge-wiggle 1.4s ease-in-out 0.55s infinite alternate;
}
@keyframes badge-pop {
  0%   { transform: rotate(-30deg) scale(0); }
  60%  { transform: rotate(-10deg) scale(1.25); }
  100% { transform: rotate(-14deg) scale(1); }
}
@keyframes badge-wiggle {
  0%   { transform: rotate(-14deg) scale(1); }
  100% { transform: rotate(-8deg) scale(1.07); }
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #1a0a14;
  border: none;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  box-shadow: 0 10px 28px -10px var(--accent-1);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px var(--accent-1); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--modal-border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.btn-secondary:hover { background: var(--modal-card); border-color: var(--accent-2); }
.btn-danger {
  background: transparent;
  border: 1px solid var(--accent-1);
  color: var(--accent-1);
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.btn-danger:hover { background: var(--accent-1); color: #1a0a14; }

/* ============================================================
   COMMENTARY (実況テロップ)
   ============================================================ */
.commentary {
  position: fixed;
  top: 16%;
  left: 50%;
  transform: translateX(-50%) scale(0.78);
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 40px);
  letter-spacing: 0.12em;
  color: var(--commentary-color);
  text-transform: uppercase;
  text-shadow:
    0 0 12px var(--commentary-color),
    3px 3px 0 var(--commentary-shadow-1),
    6px 6px 0 var(--commentary-shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  white-space: nowrap;
}
.commentary.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* ============================================================
   CHANCE-TIME BANNER (pre-spin slam-in)
   ============================================================ */
.chance-banner {
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-15deg);
  font-family: var(--font-display);
  font-size: clamp(28px, 9vw, 56px);
  letter-spacing: 0.10em;
  color: var(--accent-2);
  text-shadow:
    0 0 20px var(--accent-1),
    4px 4px 0 var(--accent-1),
    -4px -4px 0 var(--accent-3);
  z-index: 150;
  pointer-events: none;
  white-space: nowrap;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.7));
  opacity: 0;
}
.chance-banner.show {
  animation: chance-slam 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes chance-slam {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.4) rotate(2deg);  opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1) rotate(-1deg);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);    opacity: 1; }
}
.chance-banner.hide {
  animation: chance-out 0.7s ease-in forwards;
}
@keyframes chance-out {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.55) translateY(-40px); opacity: 0; }
}

/* settings cards (game-settings group inside Themes tab) */
.settings-group {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}
.settings-group h4 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.opt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.opt-btn {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  color: var(--text-dim);
  padding: 9px 6px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .14s, color .14s, border-color .14s;
}
.opt-btn .ico { font-size: 16px; }
.opt-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.opt-btn[aria-pressed="true"] {
  background: linear-gradient(165deg, var(--accent-1), var(--accent-2));
  color: #1a0a14;
  border-color: var(--accent-2);
}
.opt-help { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* ============================================================
   RARE EFFECTS — lightning / reach / push / flash
   ============================================================ */
.fx-flash {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  z-index: 180;
  transition: background 0.05s linear;
}
.fx-flash.on { background: rgba(255, 255, 255, 0.85); }

.fx-lightning {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 175;
  opacity: 0;
}

/* ============ RAIN ============ */
.fx-rain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.45s ease, background 0.6s ease;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 16, 36, 0.0) 0%, rgba(8, 16, 36, 0.18) 100%);
}
/* Tier 1 — drizzle: lighter veil, faint drops */
.fx-rain.light {
  background: linear-gradient(180deg, rgba(8, 16, 36, 0.0) 0%, rgba(8, 16, 36, 0.08) 100%);
}
.fx-rain.light .fx-raindrop {
  width: 1px;
  height: 12vh;
  filter: blur(0.5px);
}
/* Tier 2/3 — heavy: dark sky, fat slanted drops */
.fx-rain.heavy {
  background: linear-gradient(180deg, rgba(4, 8, 22, 0.18) 0%, rgba(4, 8, 22, 0.55) 100%);
}
.fx-rain.heavy .fx-raindrop {
  width: 2.2px;
  height: 22vh;
  filter: blur(0.2px);
  background: linear-gradient(to bottom, rgba(180,210,255,0) 0%, rgba(190,220,255,0.85) 50%, rgba(240,250,255,1) 100%);
}
.fx-rain.on { opacity: 1; }
.fx-raindrop {
  position: absolute;
  top: -10vh;
  width: 1.4px;
  height: 16vh;
  background: linear-gradient(to bottom, rgba(180,210,255,0) 0%, rgba(180,210,255,0.65) 60%, rgba(220,240,255,0.95) 100%);
  border-radius: 1px;
  filter: blur(0.3px);
  animation-name: rain-fall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes rain-fall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(120vh); }
}

/* ============ STORM (max-tier weather) ============ */
.fx-storm {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 185;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fx-storm.on { opacity: 1; }
.fx-storm .storm-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.0) 30%, rgba(8,12,28,0.55) 100%);
  animation: storm-veil-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes storm-veil-pulse {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}
.fx-storm .storm-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.7);
  font-family: var(--font-display, sans-serif);
  font-size: clamp(34px, 9vw, 72px);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 18px #6ab2ff, 0 0 38px #2960c0, 0 4px 0 rgba(0,0,0,0.55);
  animation: storm-banner-pop 1.6s cubic-bezier(0.18, 0.6, 0.18, 1.1) forwards;
  white-space: nowrap;
}
@keyframes storm-banner-pop {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  8%   { transform: translate(-50%, 0) scale(1.15); opacity: 1; }
  18%  { transform: translate(-50%, 0) scale(1.0);  opacity: 1; }
  82%  { transform: translate(-50%, 0) scale(1.0);  opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1.0);  opacity: 0; }
}
/* Tier-1 / Tier-2 weather banners (small + lower in the viewport so they
 * don't compete with the wheel's commentary). Tier 3 keeps the big STORM look. */
.fx-storm .storm-banner.tier-1 {
  top: 9%;
  font-size: clamp(20px, 5vw, 36px);
  letter-spacing: 0.06em;
  color: #cfe4ff;
  text-shadow: 0 0 10px #6ab2ff, 0 2px 0 rgba(0,0,0,0.5);
  animation-duration: 1.4s;
}
.fx-storm .storm-banner.tier-2 {
  top: 14%;
  font-size: clamp(28px, 7vw, 54px);
  color: #eaf3ff;
  text-shadow: 0 0 14px #4d96ff, 0 0 30px #1a4eaa, 0 3px 0 rgba(0,0,0,0.55);
  animation-duration: 1.5s;
}
.reveal-card .badge.storm {
  background: linear-gradient(135deg, #2c4f9a, #6ab2ff);
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.45);
}
.fx-lightning.on { animation: lightning-strike 0.7s ease-out forwards; }
.fx-lightning svg { width: 100%; height: 100%; }
.fx-lightning path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 36px #c9e0ff);
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.fx-lightning.on path { animation: bolt-trace 0.5s ease-out forwards; }
@keyframes lightning-strike {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.4; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bolt-trace {
  to { stroke-dashoffset: 0; }
}

.fx-reach-banner {
  position: fixed;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-8deg);
  font-family: var(--font-display);
  font-size: clamp(40px, 12vw, 80px);
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow:
    0 0 24px var(--accent-1),
    0 0 48px var(--accent-1),
    4px 4px 0 var(--accent-1),
    -4px -4px 0 var(--accent-2);
  z-index: 170;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
}
.fx-reach-banner.on {
  animation: reach-slam 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes reach-slam {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.6) rotate(3deg); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.05) rotate(0deg); opacity: 1; }
  90%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

.fx-push-beg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 165;
  opacity: 0;
}
.fx-push-beg.on { opacity: 1; pointer-events: auto; }
.fx-push-beg .label {
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 72px);
  letter-spacing: 0.18em;
  color: var(--accent-2);
  text-shadow:
    0 0 30px var(--accent-1),
    4px 4px 0 var(--accent-1),
    -4px -4px 0 #fff;
  animation: push-pulse 0.4s ease-in-out infinite alternate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
@keyframes push-pulse {
  0%   { transform: scale(1) rotate(-2deg); }
  100% { transform: scale(1.15) rotate(2deg); }
}
.fx-push-counter {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  text-shadow: 0 0 14px var(--accent-1);
}
.fx-push-meter {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 320px;
  height: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  overflow: hidden;
}
.fx-push-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
  transition: width 0.08s ease-out;
}

/* a quick "scoreboard celebration" pop on push hits */
/* CUT-IN — diagonal panel slides in from off-screen with character + line */
.fx-cutin {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 168;
  overflow: hidden;
  display: none;
}
.fx-cutin.on { display: block; }
.fx-cutin .panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vw;
  height: 36vh;
  transform: translate(-50%, -50%) skewX(-14deg) translateX(140vw);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.0) 0 24px,
      rgba(255,255,255,0.06) 24px 28px),
    linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 0 60px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.fx-cutin .panel-content {
  transform: skewX(14deg);
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.fx-cutin .emoji {
  font-size: clamp(64px, 18vw, 120px);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.fx-cutin .text-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fx-cutin .text {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 48px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 0 20px rgba(0,0,0,0.4),
    3px 3px 0 rgba(0,0,0,0.5);
}
.fx-cutin .badge-strip {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 32px);
  letter-spacing: 0.18em;
  color: var(--accent-2);
  text-shadow:
    0 0 12px var(--accent-1),
    2px 2px 0 var(--accent-1);
}
.fx-cutin .sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 4vw, 22px);
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.fx-cutin .panel.nominate {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.0) 0 24px,
      rgba(255,255,255,0.06) 24px 28px),
    linear-gradient(135deg, #d72b3a, #ff6b3a);
}

.fx-cutin.on .panel { animation: cutin-swoop 1.5s cubic-bezier(0.18, 0.7, 0.25, 1) forwards; }
@keyframes cutin-swoop {
  0%   { transform: translate(-50%, -50%) skewX(-14deg) translateX(140vw); opacity: 0; }
  20%  { transform: translate(-50%, -50%) skewX(-14deg) translateX(0);     opacity: 1; }
  60%  { transform: translate(-50%, -50%) skewX(-14deg) translateX(0);     opacity: 1; }
  100% { transform: translate(-50%, -50%) skewX(-14deg) translateX(-140vw); opacity: 0; }
}

/* sparks that radiate from the cut-in impact moment */
.fx-cutin .spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  transform-origin: 50% 0%;
  opacity: 0;
}
.fx-cutin.on .spark { animation: spark-flash 0.6s ease-out forwards 0.18s; }
@keyframes spark-flash {
  0%   { opacity: 0; transform: translate(-50%, 0) rotate(var(--ang, 0deg)) scaleY(0.2); }
  30%  { opacity: 1; transform: translate(-50%, 0) rotate(var(--ang, 0deg)) scaleY(1.8); }
  100% { opacity: 0; transform: translate(-50%, 0) rotate(var(--ang, 0deg)) scaleY(2.4); }
}

.fx-tap-burst {
  position: fixed;
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 40px);
  font-weight: bold;
  color: var(--accent-2);
  text-shadow: 0 0 14px var(--accent-1);
  pointer-events: none;
  z-index: 200;
  animation: tap-burst 0.55s ease-out forwards;
}
@keyframes tap-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.9); }
}

/* ============================================================
   FX (floater / confetti / shake / spotlight)
   ============================================================ */
.floater {
  position: fixed;
  font-family: var(--font-display);
  font-size: clamp(20px, 4.8vw, 32px);
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.85);
  pointer-events: none;
  z-index: 99;
  animation: float-up 1.5s ease-out forwards;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 1; transform: translateY(-32px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-130px) scale(0.78); }
}

.confetti {
  position: fixed;
  width: 10px; height: 18px;
  top: -20px;
  pointer-events: none;
  z-index: 50;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

.shake-screen { animation: screen-shake 0.55s ease-in-out; }
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-9px, 4px); }
  40%      { transform: translate(9px, -4px); }
  60%      { transform: translate(-7px, 3px); }
  80%      { transform: translate(7px, -3px); }
}

.spotlight {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 200px, rgba(0,0,0,0.7) 420px);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 40;
}
.spotlight.on { opacity: 1; }

/* ============================================================
   MODAL (Mypage)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, rgba(20,8,18,0.65), rgba(8,3,12,0.92));
  backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tab-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 14px;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 1px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.05;
  min-width: 0;
  white-space: nowrap;
}
.tab-btn .ico { font-size: 16px; }
.tab-btn[aria-selected="true"] {
  background: linear-gradient(165deg, var(--accent-1), var(--accent-2));
  color: #1a0a14;
}
.tab-panel { display: none; flex-direction: column; gap: 12px; }
.tab-panel.show { display: flex; }

/* player editor rows */
.player-row {
  display: grid;
  grid-template-columns: 28px 56px 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  padding: 8px;
  border-radius: 12px;
  transition: opacity 0.18s;
}
.player-row.inactive {
  opacity: 0.45;
}
.player-row.inactive .name-input {
  text-decoration: line-through;
  color: var(--text-dim);
}
.active-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.active-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--accent-2);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, transform 0.1s;
}
.active-toggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.active-toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; left: 6px;
  width: 6px; height: 11px;
  border-right: 2.5px solid #1a0a14;
  border-bottom: 2.5px solid #1a0a14;
  transform: rotate(45deg);
}
.active-toggle input[type="checkbox"]:active {
  transform: scale(0.92);
}
.player-row .emoji-pick {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--modal-border);
  background: rgba(0,0,0,0.25);
  font-size: 22px;
  display: grid;
  place-items: center;
}
.player-row .name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--modal-border);
  color: var(--text);
  padding: 6px 4px;
  font-family: var(--font-body);
  font-size: 16px;
}
.player-row .name-input:focus { outline: none; border-bottom-color: var(--accent-2); }
.player-row .remove-btn {
  background: transparent;
  border: 1px solid var(--modal-border);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 18px;
}
.player-row .remove-btn:hover { color: var(--accent-1); border-color: var(--accent-1); }

.add-player-btn {
  background: transparent;
  border: 1px dashed var(--modal-border);
  color: var(--text-dim);
  padding: 12px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.add-player-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--modal-card);
}

/* emoji picker popover */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 12px;
}
.emoji-grid button {
  background: transparent;
  border: none;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.emoji-grid button:hover { background: var(--modal-card); }

/* stats panel */
.stats-section { display: flex; flex-direction: column; gap: 6px; }
.stats-section h4 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.stats-row {
  display: grid;
  grid-template-columns: 30px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 10px;
}
.stats-row .e { font-size: 18px; }
.stats-row .n { font-family: var(--font-body); font-size: 15px; }
.stats-row .v {
  font-family: var(--font-display);
  font-size: 18px;
  text-align: right;
  color: var(--accent-2);
}
.stats-empty {
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  padding: 20px 0;
}

.month-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 8px;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 10px;
  height: 80px;
}
.month-bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent-1), var(--accent-2));
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 2px;
}
.month-bar .lbl {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--text-dim);
}

/* theme selector */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.theme-card {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.2s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card[aria-selected="true"] {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2), 0 14px 30px -14px var(--accent-2);
}
.theme-card svg { display: block; width: 100%; height: 80px; }
.theme-card .meta {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-card .meta .ico { font-size: 16px; }
.theme-card .meta .name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* custom prompt/penalty editor */
.custom-form {
  display: grid;
  gap: 8px;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 12px;
  padding: 10px;
}
.custom-form select,
.custom-form textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--modal-border);
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  font-family: var(--font-body);
}
.custom-form select:focus,
.custom-form textarea:focus { outline: none; border-color: var(--accent-2); }
.custom-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}
.custom-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
}
.custom-item .tag {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  text-transform: uppercase;
}
.custom-item .x {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
}
.custom-item .x:hover { color: var(--accent-1); }

.errmsg {
  color: var(--accent-1);
  font-size: 13px;
  text-align: left;
  min-height: 18px;
  flex: 1;
}
.errmsg.ok { color: var(--accent-2); }

/* ============================================================
   WISHES BOARD
   ============================================================ */
.wishes-intro {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 4px 2px;
}
.custom-form input[type="text"] {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--modal-border);
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  font-family: var(--font-body);
}
.custom-form input[type="text"]:focus { outline: none; border-color: var(--accent-2); }
.wishes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wish-card {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wish-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wish-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.wish-time {
  font-size: 11px;
  color: var(--text-dim);
}
.wish-body {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.wish-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.wish-action-btn {
  background: transparent;
  border: 1px solid var(--modal-border);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wish-action-btn:hover { color: var(--accent-2); border-color: var(--accent-2); }
.wish-replies {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--modal-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wish-reply {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--modal-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.wish-reply .wish-meta {
  margin-bottom: 4px;
}
.wishes-empty {
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  padding: 20px 0;
}
.reply-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--modal-border);
}
.reply-form textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--modal-border);
  color: var(--text);
  padding: 6px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
}
.reply-form .reply-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ============================================================
   FIRST-RUN ONBOARDING
   ============================================================ */
.onboard {
  background: var(--modal-card);
  border: 1px solid var(--modal-border);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  display: none;
  flex-direction: column;
  gap: 12px;
}
.onboard.show { display: flex; }
.onboard h2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.onboard p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

.hidden { display: none !important; }

/* ============================================================
   AD ZONE (bottom-fixed, swap content later for AdSense / affiliate)
   ============================================================ */
.ad-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: rgba(10, 4, 14, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--modal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  z-index: 110;
  padding: 0 16px;
  box-shadow: 0 -8px 18px -8px rgba(0, 0, 0, 0.6);
}
/* Honour the HTML `hidden` attribute even with the `display: flex` above. */
.ad-zone[hidden] { display: none; }
.ad-zone:empty::before {
  content: "📣";
  margin-right: 8px;
}

/* ============================================================
   COUNTDOWN OVERLAY (3 - 2 - 1 - GO)
   ============================================================ */
.fx-countdown {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
}
.fx-countdown.on { display: flex; }
.fx-countdown .num {
  font-family: var(--font-display);
  font-size: clamp(120px, 36vw, 220px);
  letter-spacing: 0.08em;
  color: var(--accent-2);
  text-shadow:
    0 0 30px var(--accent-1),
    0 0 60px var(--accent-1),
    6px 6px 0 var(--accent-1);
  animation: countdown-pop 0.95s ease-out forwards;
}
.fx-countdown .num.go {
  color: #fff;
  font-size: clamp(80px, 24vw, 160px);
  text-shadow:
    0 0 36px var(--accent-2),
    0 0 72px var(--accent-2),
    6px 6px 0 var(--accent-1);
}
@keyframes countdown-pop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  20%  { transform: scale(1.6) rotate(4deg);  opacity: 1; }
  60%  { transform: scale(1) rotate(0deg);    opacity: 1; }
  100% { transform: scale(0.85) translateY(-20px); opacity: 0; }
}

/* ============================================================
   GOD MODE OVERLAY (pachislot-style blackout + premium reveal)
   ============================================================ */
.fx-god {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  display: none;
}
.fx-god.on { display: block; pointer-events: auto; }
.fx-god.hide { animation: god-hide 1s ease-out forwards; }
@keyframes god-hide { to { opacity: 0; } }

/* 確変 / GOD streak — pulsing banner painted only on chained fires (2nd, 3rd
 * in a row). Sits above the overlay so it reads even during the blackout. */
.fx-god .god-streak-badge {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe45c 0%, #ff7a2a 50%, #c4276b 100%);
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(18px, 4.4vw, 28px);
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(0,0,0,0.5), 0 2px 0 rgba(0,0,0,0.35);
  box-shadow: 0 0 24px rgba(255,180,80,0.85), 0 0 60px rgba(255,90,40,0.6);
  z-index: 260;
  animation: god-streak-pulse 0.9s ease-in-out infinite alternate;
  white-space: nowrap;
}
@keyframes god-streak-pulse {
  from { transform: translateX(-50%) scale(1.0);  filter: brightness(1); }
  to   { transform: translateX(-50%) scale(1.08); filter: brightness(1.4); }
}

/* Phase 0: pre-blackout violent shake */
.fx-god .god-warn {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.0);
  animation: god-warn-shake 0.5s steps(8, end) forwards;
}
@keyframes god-warn-shake {
  0%   { transform: translate(0,0); background: rgba(0,0,0,0); }
  100% { transform: translate(0,0); background: rgba(0,0,0,0.4); }
}
body.god-shake { animation: god-body-shake 0.5s linear infinite; }
@keyframes god-body-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 4px); }
  20% { transform: translate(7px, -3px); }
  30% { transform: translate(-5px, -5px); }
  40% { transform: translate(8px, 5px); }
  50% { transform: translate(-7px, -2px); }
  60% { transform: translate(6px, 4px); }
  70% { transform: translate(-4px, -6px); }
  80% { transform: translate(7px, 2px); }
  90% { transform: translate(-5px, 5px); }
}

/* Phase 1+2: total blackout */
.god-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
}
.god-overlay.fade-in {
  animation: god-fade-in 1s ease-in forwards;
}
@keyframes god-fade-in { to { opacity: 1; } }

/* Phase 3: power-restore white flash */
.god-flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.god-flash.on {
  animation: god-flash-burst 0.6s ease-out forwards;
}
@keyframes god-flash-burst {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Phase 4: character stage */
.god-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(circle at center, var(--gA), #000 70%);
  opacity: 0;
}
.god-stage.show { animation: god-stage-in 0.4s ease-out 0.15s forwards; }
@keyframes god-stage-in { to { opacity: 1; } }

/* radiating light rays from char center */
.god-rays {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.god-rays .ray {
  position: absolute;
  width: 12px;
  height: 200vmax;
  background: linear-gradient(to top, transparent, var(--gB), transparent);
  transform-origin: center center;
  opacity: 0;
  filter: blur(3px);
}
.god-stage.show .god-rays .ray {
  animation: god-ray-spin 8s linear infinite;
  opacity: 0.55;
}
@keyframes god-ray-spin {
  from { transform: rotate(var(--rot, 0deg)); }
  to   { transform: rotate(calc(var(--rot, 0deg) + 360deg)); }
}

.god-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: scale(0.2);
  z-index: 2;
}
.god-char.show {
  animation: god-char-pop 0.85s cubic-bezier(0.34, 1.7, 0.64, 1) forwards,
             god-char-pulse 1.4s ease-in-out 0.85s infinite alternate;
}
@keyframes god-char-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  35%  { opacity: 1; transform: scale(1.5) rotate(10deg); }
  55%  { transform: scale(0.95) rotate(-3deg); }
  75%  { transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes god-char-pulse {
  0%   { filter: drop-shadow(0 0 40px var(--gA)) drop-shadow(0 0 80px var(--gB)); }
  100% { filter: drop-shadow(0 0 80px var(--gB)) drop-shadow(0 0 160px var(--gA)); }
}
.god-emoji {
  font-size: clamp(220px, 60vw, 380px);
  line-height: 1;
  text-shadow:
    0 0 60px var(--gA),
    0 0 120px var(--gA),
    0 0 180px var(--gB);
}
.god-line {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 56px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 24px var(--gA),
    0 0 48px var(--gB),
    4px 4px 0 var(--gA),
    -2px -2px 0 var(--gB);
  text-align: center;
  padding: 0 16px;
  letter-spacing: 0.12em;
}

/* Phase 5+6: giant "how many shots?" counter (replaces the old slot reel,
   which was visually unclear about what number meant). Positioned absolutely
   over the god-char so the layout never overflows the viewport regardless of
   screen height. */
.god-counter {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, 0) scale(0.3);
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 32px 14px;
  border: 5px solid var(--gA, #ffd966);
  border-radius: 26px;
  background: linear-gradient(180deg, #1a0a14, #2a1428);
  box-shadow:
    0 0 80px var(--gA, rgba(255, 217, 102, 0.7)),
    inset 0 0 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  z-index: 4;
  font-family: var(--font-display);
  color: #fff5e6;
}
.god-counter::before {
  content: attr(data-label);
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gA);
  color: #1a0a14;
  font-size: 13px;
  letter-spacing: 0.32em;
  padding: 3px 14px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}
.god-counter.show {
  animation: god-counter-pop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) forwards;
}
@keyframes god-counter-pop {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.3) rotate(-12deg); }
  60%  { transform: translate(-50%, 0) scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
}
.god-counter-num {
  font-size: clamp(120px, 28vw, 220px);
  font-weight: 700;
  line-height: 0.9;
  color: var(--gA, #ffd966);
  text-shadow:
    0 0 24px var(--gA),
    0 0 48px var(--gB),
    4px 4px 0 #000;
  min-width: 0.7em;
  text-align: center;
  display: inline-block;
}
.god-counter-unit {
  font-size: clamp(40px, 9vw, 80px);
  letter-spacing: 0.08em;
  color: #fff5e6;
  text-shadow: 0 0 16px var(--gA), 4px 4px 0 #000;
}
.god-counter.spinning .god-counter-num { animation: god-counter-flicker 0.18s steps(1) infinite; }
@keyframes god-counter-flicker {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.god-counter.snap {
  animation: god-counter-snap 0.6s cubic-bezier(0.18, 0.7, 0.25, 1) forwards;
}
@keyframes god-counter-snap {
  0%   { box-shadow: 0 0 80px var(--gA), inset 0 0 60px rgba(0,0,0,0.7); border-color: var(--gA); transform: translate(-50%, 0) scale(1); }
  20%  { box-shadow: 0 0 220px #fff, inset 0 0 80px #fff; border-color: #fff;    transform: translate(-50%, 0) scale(1.18); }
  100% { box-shadow: 0 0 80px var(--gA), inset 0 0 60px rgba(0,0,0,0.7); border-color: var(--gA); transform: translate(-50%, 0) scale(1); }
}
.god-counter.snap .god-counter-num {
  animation: god-counter-final 0.6s ease-out forwards;
}
@keyframes god-counter-final {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
  30%  { transform: scale(1.55); filter: drop-shadow(0 0 60px var(--gA)) drop-shadow(0 0 100px #fff); }
  100% { transform: scale(1.0);  filter: drop-shadow(0 0 24px var(--gA)); }
}

/* Phase 7: final premium count */
.god-final {
  font-family: var(--font-display);
  /* slightly tamed font ramp so long lines like "💀 破滅!! 5杯一気!!" /
     "🙏 奇跡!! 飲まなくていい!!" don't overflow the viewport */
  font-size: clamp(28px, 7.5vw, 56px);
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #fff;
  text-shadow:
    0 0 40px var(--gA),
    0 0 80px var(--gB),
    6px 6px 0 #000;
  opacity: 0;
  transform: scale(0.3);
  text-align: center;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--gA), var(--gB));
  border-radius: 20px;
  border: 4px solid #fff;
  z-index: 4;
  /* preserve literal "\n" in i18n strings, allow soft-wrap on overflow */
  white-space: pre-line;
  word-break: normal;
  overflow-wrap: anywhere;
  /* fixed 88vw so the badge always reads as the climactic banner — long
     i18n strings wrap cleanly inside, short ones are just centered with
     extra padding. flex-shrink:0 prevents the parent flex column from
     squashing it back to min-content. */
  width: 88vw;
  max-width: 480px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.god-final.show {
  animation: god-final-pop 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) forwards,
             god-final-pulse 1.2s ease-in-out 0.7s infinite alternate;
}
@keyframes god-final-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  60%  { transform: scale(1.25) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes god-final-pulse {
  0%   { box-shadow: 0 0 40px var(--gA); }
  100% { box-shadow: 0 0 80px var(--gB), 0 0 120px var(--gA); }
}

/* ============================================================
   APP-LEVEL TOAST
   ============================================================ */
.app-toast {
  position: fixed;
  bottom: 90px;     /* sit above the ad zone */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 8, 18, 0.95);
  border: 1px solid var(--modal-border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 220;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.7);
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}
.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}
.app-toast.hide { opacity: 0; }