/* ============ BASE ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #0a0a0c;
  --bg-1: #111114;
  --bg-2: #1a1a1f;
  --bg-3: #26262d;
  --line: #2a2a32;
  --line-2: #3a3a44;
  --text: #e8e8ec;
  --text-dim: #8b8b95;
  --text-faint: #55555c;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --shake: 0px;
}

html, body { width: 100%; height: 100%; background: var(--bg-0); color: var(--text); font-family: var(--font-mono); overflow: hidden; }

#root { width: 100%; height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Film grain */
.grain-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.18; mix-blend-mode: overlay;
}

/* ============ APP STAGE ============ */
.app-root { width: 100%; height: 100%; position: relative; background: radial-gradient(ellipse at 50% 30%, #14141a 0%, var(--bg-0) 70%); }

.app-stage {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 20px 24px;
  gap: 16px;
}
.app-stage.shaking { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * 0.5)); }
  20% { transform: translate(var(--shake), calc(var(--shake) * -1)); }
  30% { transform: translate(calc(var(--shake) * -0.7), calc(var(--shake) * 0.7)); }
  40% { transform: translate(calc(var(--shake) * 0.7), calc(var(--shake) * -0.5)); }
  50% { transform: translate(calc(var(--shake) * -0.5), calc(var(--shake) * 0.5)); }
  60% { transform: translate(calc(var(--shake) * 0.4), calc(var(--shake) * -0.4)); }
  70%, 90% { transform: translate(calc(var(--shake) * -0.3), calc(var(--shake) * 0.2)); }
  80% { transform: translate(calc(var(--shake) * 0.2), calc(var(--shake) * -0.2)); }
}

/* ============ HEADER ============ */
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.logo-mark { display: flex; align-items: center; gap: 12px; }
.logo-dot { width: 10px; height: 10px; background: #ff4444; border-radius: 50%; box-shadow: 0 0 10px #ff4444; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.15em; }
.logo-meta { font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; padding-left: 12px; border-left: 1px solid var(--line); }

.gender-picker { display: flex; gap: 0; border: 1px solid var(--line); }
.gender-btn {
  padding: 8px 14px; font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-dim); background: transparent;
  border-right: 1px solid var(--line);
  transition: all 0.15s;
}
.gender-btn:last-child { border-right: none; }
.gender-btn:hover { color: var(--text); background: var(--bg-2); }
.gender-btn.active { color: var(--bg-0); background: var(--text); font-weight: 700; }

/* ============ MAIN GRID ============ */
.main-grid {
  flex: 1; display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 20px; min-height: 0;
}

/* ============ SIDE PANELS ============ */
.side-panel {
  background: var(--bg-1); border: 1px solid var(--line);
  padding: 18px; display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.side-panel-right { gap: 12px; }

.panel-title {
  font-size: 10px; letter-spacing: 0.2em; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

.clear-btn { font-size: 9px; letter-spacing: 0.15em; color: var(--text-faint); padding: 2px 6px; border: 1px solid var(--line); }
.clear-btn:hover { color: var(--text); border-color: var(--line-2); }

/* Stats */
.stats-bar { display: flex; flex-direction: column; gap: 14px; }
.stats-total { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stats-num { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; }
.stats-label { font-size: 10px; letter-spacing: 0.25em; color: var(--text-faint); margin-top: 4px; }
.stats-tiers { display: flex; flex-direction: column; gap: 6px; }
.stat-tier {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; background: var(--bg-2);
  border-left: 2px solid var(--tier-color);
  font-size: 10px; letter-spacing: 0.15em;
}
.stat-tier-label { color: var(--text-dim); }
.stat-tier-count { font-family: var(--font-display); font-weight: 700; color: var(--tier-color); font-size: 13px; }

/* Drop rates */
.rarity-key { display: flex; flex-direction: column; gap: 6px; }
.rate-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 10px; letter-spacing: 0.15em;
}
.rate-pip { width: 8px; height: 8px; background: var(--tier-color); box-shadow: 0 0 6px var(--tier-color); flex-shrink: 0; }
.rate-label { flex: 1; color: var(--text-dim); }
.rate-pct { color: var(--tier-color); font-weight: 700; }

/* History */
.history-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-thumb { background: var(--line-2); }
.history-empty { color: var(--text-faint); font-size: 11px; text-align: center; padding: 30px 0; line-height: 1.6; }

.history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg-2);
  border-left: 2px solid var(--tier-color);
  font-size: 11px; text-align: left;
  transition: all 0.15s;
}
.history-item:hover { background: var(--bg-3); }
.history-tier-pip { width: 6px; height: 6px; background: var(--tier-color); border-radius: 50%; flex-shrink: 0; }
.history-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-tier-label { font-size: 8px; letter-spacing: 0.15em; color: var(--tier-color); flex-shrink: 0; }
.history-legendary .history-name { color: #FFB347; font-weight: 700; }
.history-ultra .history-name { color: #ff5555; font-weight: 700; text-shadow: 0 0 10px rgba(255, 42, 42, 0.7); }

/* ============ MACHINE PANEL ============ */
.machine-panel {
  display: flex; flex-direction: column; gap: 24px;
  align-items: stretch; justify-content: center;
}

/* Reveal frame */
.reveal-frame {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 0;
  flex: 1; max-height: 72vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.reveal-frame.revealed.tier-frame-uncommon { border-color: #31FF31; box-shadow: 0 0 30px rgba(49, 255, 49, 0.25), inset 0 0 60px rgba(49, 255, 49, 0.1); }
.reveal-frame.revealed.tier-frame-rare { border-color: #3a9eff; box-shadow: 0 0 40px rgba(58, 158, 255, 0.35), inset 0 0 80px rgba(58, 158, 255, 0.15); }
.reveal-frame.revealed.tier-frame-epic { border-color: #c77dff; box-shadow: 0 0 60px rgba(199, 125, 255, 0.5), inset 0 0 100px rgba(199, 125, 255, 0.2); }
.reveal-frame.revealed.tier-frame-legendary {
  border-color: #FFB347;
  box-shadow: 0 0 80px rgba(255, 140, 0, 0.7), inset 0 0 120px rgba(255, 140, 0, 0.25);
  animation: legendary-frame-pulse 1.5s ease-in-out infinite;
}
.reveal-frame.revealed.tier-frame-ultra {
  border-color: #ff2a2a;
  box-shadow:
    0 0 100px rgba(255, 42, 42, 0.85),
    0 0 200px rgba(204, 0, 0, 0.4),
    inset 0 0 120px rgba(255, 42, 42, 0.25);
  animation: ultra-frame-pulse 1.4s ease-in-out infinite;
}
@keyframes ultra-frame-pulse {
  0%, 100% { box-shadow: 0 0 100px rgba(255, 42, 42, 0.85), 0 0 200px rgba(204, 0, 0, 0.4), inset 0 0 120px rgba(255, 42, 42, 0.25); }
  50% { box-shadow: 0 0 160px rgba(255, 80, 80, 1), 0 0 280px rgba(255, 0, 0, 0.7), inset 0 0 180px rgba(255, 42, 42, 0.45); }
}
@keyframes legendary-frame-pulse {
  0%, 100% { box-shadow: 0 0 80px rgba(255, 140, 0, 0.7), inset 0 0 120px rgba(255, 140, 0, 0.25); }
  50% { box-shadow: 0 0 130px rgba(255, 200, 0, 1), inset 0 0 160px rgba(255, 200, 0, 0.4); }
}
.reveal-frame.rolling {
  border-color: var(--line-2);
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);
}

/* Frame corner brackets */
.frame-corner {
  position: absolute; width: 24px; height: 24px;
  border: 1px solid var(--text-dim);
  z-index: 2;
}
.frame-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.frame-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.frame-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.frame-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.frame-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 60px; gap: 18px;
}

.reveal-meta {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 700px;
}
.tier-badge {
  font-size: 11px; letter-spacing: 0.3em; font-weight: 700;
  color: var(--text-faint);
  padding: 4px 12px;
  border: 1px solid currentColor;
  opacity: 0.4;
  transition: all 0.3s;
}
.tier-badge.show { color: var(--tier-color); opacity: 1; box-shadow: 0 0 10px var(--tier-color); }
.tier-badge-legendary.show { animation: legendary-badge-pulse 1s ease-in-out infinite; }
@keyframes legendary-badge-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--tier-color); }
  50% { box-shadow: 0 0 25px var(--tier-color), 0 0 40px var(--tier-color); }
}

.reveal-id { font-size: 11px; color: var(--text-faint); letter-spacing: 0.2em; }

/* Slot name */
.slot-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.1;
  color: var(--text);
  text-wrap: balance;
  z-index: 3;
  transition: color 0.3s;
}
.slot-name.rolling { color: var(--text-dim); }
.slot-name.rolling .slot-name-text { animation: jitter 0.05s infinite; }
@keyframes jitter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.5px, -0.5px); }
}

.slot-name.tier-uncommon.settled { color: #31FF31; text-shadow: 0 0 12px rgba(49, 255, 49, 0.6); }
.slot-name.tier-rare.settled { color: #5cb0ff; text-shadow: 0 0 18px rgba(58, 158, 255, 0.8); animation: pulse-rare 2s ease-in-out infinite; }
.slot-name.tier-epic.settled { color: #d9a3ff; text-shadow: 0 0 24px rgba(199, 125, 255, 1), 0 0 60px rgba(199, 125, 255, 0.6); animation: pulse-epic 1.8s ease-in-out infinite; }
.slot-name.tier-legendary.settled {
  background: linear-gradient(90deg, #ff8000 0%, #FFD700 25%, #fff5cc 50%, #FFD700 75%, #ff8000 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 200, 0, 0.6));
  animation: legendary-shimmer 2.4s linear infinite, legendary-breathe 2s ease-in-out infinite;
}
.slot-name.tier-ultra.settled {
  color: #f5f5f7;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 42, 42, 0.7),
    0 0 32px rgba(255, 42, 42, 0.5);
  animation: mythic-name-breathe 1.8s ease-in-out infinite;
}
@keyframes mythic-name-breathe {
  0%, 100% {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 42, 42, 0.7), 0 0 32px rgba(255, 42, 42, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 24px rgba(255, 80, 80, 0.9), 0 0 48px rgba(255, 42, 42, 0.7);
    transform: scale(1.03);
  }
}
@keyframes pulse-rare { 0%, 100% { text-shadow: 0 0 18px rgba(58, 158, 255, 0.8); } 50% { text-shadow: 0 0 28px rgba(58, 158, 255, 1); } }
@keyframes pulse-epic { 0%, 100% { text-shadow: 0 0 24px rgba(199, 125, 255, 1), 0 0 60px rgba(199, 125, 255, 0.6); } 50% { text-shadow: 0 0 40px rgba(199, 125, 255, 1), 0 0 90px rgba(199, 125, 255, 0.8); } }
@keyframes legendary-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes legendary-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Glint sweep on legendary */
.slot-name.tier-legendary.settled::after {
  content: ""; position: absolute; inset: -8px;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  mix-blend-mode: overlay;
  animation: glint-sweep 2.4s linear infinite;
  pointer-events: none;
}
.slot-name.tier-ultra.settled::after {
  content: ""; position: absolute; inset: -12px;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 200, 200, 0.5) 50%, transparent 70%);
  mix-blend-mode: overlay;
  animation: glint-sweep 2.0s linear infinite;
  pointer-events: none;
}
@keyframes glint-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.reveal-sub {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.25em;
  color: var(--text-dim);
  z-index: 3;
}
.sub-divider { color: var(--text-faint); font-size: 8px; }

/* Particle canvases */
.particle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.gold-dust-canvas {
  position: absolute; left: 0; right: 0; bottom: 0; top: 30%;
  width: 100%; pointer-events: none; z-index: 1;
}

/* Share button (face gen) */
.share-btn-face {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 20px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--text-dim); font-size: 11px; letter-spacing: 0.22em;
  transition: all 0.15s; line-height: 1;
}
.share-btn-face:hover:not(:disabled) { color: var(--text); border-color: #4ad8ff; box-shadow: 0 0 16px rgba(74,216,255,0.3); }
.share-btn-face:disabled { opacity: 0.3; cursor: not-allowed; }
.share-btn-face-sub { font-size: 8px; color: var(--text-faint); letter-spacing: 0.18em; }

.share-btn-badge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 20px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--text-dim); font-size: 11px; letter-spacing: 0.22em;
  transition: all 0.15s; line-height: 1;
}
.share-btn-badge:hover:not(:disabled) { color: var(--text); border-color: #c77dff; box-shadow: 0 0 16px rgba(199,125,255,0.3); }
.share-btn-badge:disabled { opacity: 0.3; cursor: not-allowed; }

/* Roll button */
.roll-row { display: flex; justify-content: center; align-items: center; gap: 10px; }
.roll-btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.3em;
  color: var(--bg-0);
  padding: 22px 80px;
  background: var(--text);
  overflow: hidden;
  transition: transform 0.1s;
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--text);
}
.roll-btn:hover:not(.disabled) {
  background: #fff;
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
}
.roll-btn:active:not(.disabled) { transform: scale(0.98); }
.roll-btn.disabled {
  background: var(--bg-3); color: var(--text-faint);
  border-color: var(--line); cursor: not-allowed;
}
.roll-btn.disabled .roll-btn-text { animation: rolling-text 0.4s steps(3) infinite; }
@keyframes rolling-text {
  0% { letter-spacing: 0.3em; }
  50% { letter-spacing: 0.4em; }
  100% { letter-spacing: 0.3em; }
}

.roll-btn-text { position: relative; z-index: 2; }
.roll-btn-hint {
  font-size: 9px; letter-spacing: 0.2em;
  padding: 4px 8px; border: 1px solid currentColor;
  opacity: 0.5;
  position: relative; z-index: 2;
}

/* ============ FOOTER ============ */
.app-footer {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.2em; color: var(--text-faint);
  padding-top: 10px; border-top: 1px solid var(--line);
}

/* ============ LEGENDARY OVERLAY ============ */
.legendary-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(80, 40, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 70%);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: legendary-fadein 0.4s ease-out;
}
.legendary-overlay.ultra-overlay {
  background: radial-gradient(ellipse at center, rgba(80, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.97) 70%);
}
.legendary-overlay.ultra-overlay .legendary-rays {
  background: conic-gradient(from 0deg,
    rgba(255, 42, 42, 0.3) 0deg, transparent 30deg,
    rgba(255, 80, 80, 0.25) 60deg, transparent 90deg,
    rgba(204, 0, 0, 0.3) 120deg, transparent 150deg,
    rgba(255, 42, 42, 0.25) 180deg, transparent 210deg,
    rgba(255, 0, 51, 0.3) 240deg, transparent 270deg,
    rgba(255, 42, 42, 0.25) 300deg, transparent 330deg);
  animation: rays-rotate 8s linear infinite;
}
@keyframes legendary-fadein { from { opacity: 0; } to { opacity: 1; } }

.legendary-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.8) 80%);
  pointer-events: none;
}

.legendary-rays {
  position: absolute; inset: -50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 200, 0, 0.15) 10deg, transparent 20deg,
    transparent 40deg, rgba(255, 200, 0, 0.1) 50deg, transparent 60deg,
    transparent 80deg, rgba(255, 200, 0, 0.15) 90deg, transparent 100deg,
    transparent 120deg, rgba(255, 200, 0, 0.1) 130deg, transparent 140deg,
    transparent 160deg, rgba(255, 200, 0, 0.15) 170deg, transparent 180deg,
    transparent 200deg, rgba(255, 200, 0, 0.1) 210deg, transparent 220deg,
    transparent 240deg, rgba(255, 200, 0, 0.15) 250deg, transparent 260deg,
    transparent 280deg, rgba(255, 200, 0, 0.1) 290deg, transparent 300deg,
    transparent 320deg, rgba(255, 200, 0, 0.15) 330deg, transparent 340deg);
  animation: rays-rotate 20s linear infinite;
  pointer-events: none;
}
@keyframes rays-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.legendary-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-width: 90vw;
}

.legendary-banner {
  position: relative;
  padding: 12px 40px;
  border: 2px solid #FFD700;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 0, 0.2), transparent);
  animation: banner-slide 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.legendary-banner.ultra-banner {
  border-image: linear-gradient(90deg, #ff2a2a, #ff5555, #ff2a2a) 1;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 42, 0.3), rgba(255, 80, 80, 0.35), transparent);
}
.legendary-banner.ultra-banner .legendary-banner-text {
  color: #ff5555;
  text-shadow:
    0 0 12px #ff2a2a,
    0 0 28px rgba(255, 42, 42, 0.9),
    0 0 50px rgba(255, 42, 42, 0.7);
  animation: mythic-banner-pulse 1.4s ease-in-out infinite;
}
@keyframes mythic-banner-pulse {
  0%, 100% { text-shadow: 0 0 12px #ff2a2a, 0 0 28px rgba(255, 42, 42, 0.9), 0 0 50px rgba(255, 42, 42, 0.7); }
  50% { text-shadow: 0 0 16px #ff5555, 0 0 40px rgba(255, 42, 42, 1), 0 0 70px rgba(255, 42, 42, 0.9); }
}
@keyframes banner-slide {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
.legendary-banner-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.5em;
  color: #FFD700;
  text-shadow: 0 0 20px #FFD700;
}

.legendary-name-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 120px);
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg, #fff5cc 0%, #FFD700 40%, #FFB347 70%, #ff8000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 200, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.6));
  animation: name-zoom-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s both,
             legendary-breathe 2.2s ease-in-out 0.9s infinite;
  text-wrap: balance;
  position: relative;
}
.legendary-name-big.ultra-name-big {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f5f5f7;
  color: #f5f5f7;
  filter: none;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 24px rgba(255, 42, 42, 0.9),
    0 0 60px rgba(255, 42, 42, 0.7),
    0 0 100px rgba(255, 42, 42, 0.5);
  animation:
    name-zoom-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s both,
    mythic-big-breathe 1.8s ease-in-out 0.9s infinite;
}
@keyframes mythic-big-breathe {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 24px rgba(255, 42, 42, 0.9), 0 0 60px rgba(255, 42, 42, 0.7), 0 0 100px rgba(255, 42, 42, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 36px rgba(255, 80, 80, 1), 0 0 90px rgba(255, 42, 42, 0.9), 0 0 140px rgba(255, 42, 42, 0.7);
    transform: scale(1.03);
  }
}
@keyframes name-zoom-in {
  from { transform: scale(0.3); opacity: 0; filter: blur(20px); }
  to { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 30px rgba(255, 200, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.6)); }
}

.legendary-sub {
  font-size: 11px; letter-spacing: 0.4em;
  color: rgba(255, 200, 0, 0.7);
  animation: sub-fadein 0.6s ease-out 1.2s both;
}
@keyframes sub-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.7; transform: translateY(0); } }

/* ============ DEV PANEL ============ */
.dev-panel {
  position: fixed; bottom: 12px; left: 12px;
  z-index: 50;
  display: flex; flex-direction: column-reverse; gap: 8px;
  align-items: flex-start;
}
.dev-toggle {
  width: 36px; height: 36px;
  background: var(--bg-1); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  font-family: var(--font-mono);
}
.dev-toggle:hover { color: var(--text); border-color: var(--line-2); background: var(--bg-2); }
.dev-panel-open .dev-toggle { color: var(--text); border-color: var(--line-2); }

.dev-tiers {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
  background: var(--bg-1); border: 1px solid var(--line);
  min-width: 160px;
  animation: dev-fadein 0.15s ease-out;
}
@keyframes dev-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dev-title {
  font-size: 9px; letter-spacing: 0.25em; color: var(--text-faint);
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.dev-tier-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--bg-2); border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 10px; letter-spacing: 0.2em; text-align: left;
  font-family: var(--font-mono);
  transition: all 0.12s;
}
.dev-tier-btn:hover:not(:disabled) {
  color: var(--tier-color); border-color: var(--tier-color);
  background: var(--bg-3);
  box-shadow: 0 0 12px var(--tier-color);
}
.dev-tier-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dev-tier-pip {
  width: 8px; height: 8px;
  background: var(--tier-color);
  box-shadow: 0 0 6px var(--tier-color);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .dev-panel { bottom: 8px; left: 8px; }
  .dev-toggle { width: 32px; height: 32px; font-size: 14px; }
  .dev-tiers { min-width: 140px; padding: 8px; }
  .dev-tier-btn { padding: 6px 8px; font-size: 9px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) and (min-width: 721px) {
  .main-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .side-panel { max-height: 220px; }
  .history-list { flex-direction: row; overflow-x: auto; }
  .history-item { min-width: 200px; }
}

/* ============ MOBILE (≤720px) ============ */
@media (max-width: 720px) {
  html, body { overflow: auto; }

  .app-stage {
    height: auto; min-height: 100%;
    padding: 12px 12px 16px;
    gap: 10px;
  }

  /* Header — compact */
  .app-header { padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .logo-text { font-size: 14px; }
  .logo-meta { display: none; }
  .gender-btn { padding: 6px 10px; font-size: 9px; }

  /* Grid stacks: STATS+RATES → MACHINE → LOG */
  .main-grid {
    display: flex; flex-direction: column;
    gap: 10px;
  }

  /* Side panels — compact, no internal scroll on mobile */
  .side-panel {
    max-height: none; overflow: visible;
    padding: 12px; gap: 12px;
  }

  /* LEFT panel: stats stays compact, rate key inline grid */
  .stats-total { padding: 6px 0; flex-direction: row; align-items: baseline; gap: 12px; border-bottom: none; }
  .stats-num { font-size: 32px; }
  .stats-label { margin-top: 0; font-size: 9px; }

  /* Tier tally — 3-col grid so all 6 tiers fit in 2 rows */
  .stats-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .stat-tier { padding: 5px 6px; font-size: 9px; letter-spacing: 0.1em; }
  .stat-tier-label { font-size: 8px; }
  .stat-tier-count { font-size: 11px; }

  /* Drop rates — 2-col grid for compactness */
  .rarity-key {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
  }
  .rate-row { padding: 3px 0; font-size: 9px; gap: 6px; letter-spacing: 0.08em; }

  /* MACHINE — the hero */
  .machine-panel { gap: 14px; }
  .reveal-frame {
    max-height: none;
    min-height: 56vh;
  }
  .frame-inner { padding: 24px 16px; gap: 16px; }
  .reveal-meta { max-width: 100%; }
  .tier-badge { font-size: 9px; padding: 3px 8px; letter-spacing: 0.2em; }
  .reveal-id { font-size: 9px; }
  .slot-name { font-size: clamp(22px, 7vw, 38px) !important; }

  /* Roll button — big tap target */
  .roll-button {
    min-height: 72px !important;
    font-size: 18px !important;
    letter-spacing: 0.2em;
  }

  /* RIGHT panel: log — show last 5 only on mobile */
  .side-panel-right { gap: 8px; }
  .history-list {
    max-height: 220px;
    overflow-y: auto;
    flex-direction: column;
  }
  .history-item { padding: 7px 8px; font-size: 10px; min-width: 0; }

  /* Footer — stack vertically, smaller */
  .app-footer {
    flex-direction: column; gap: 4px; align-items: center;
    text-align: center; font-size: 8px; letter-spacing: 0.15em;
    padding-top: 8px;
  }

  /* Legendary overlay — fit phone screen */
  .legendary-overlay { padding: 16px; }
  .legendary-name {
    font-size: clamp(28px, 8vw, 48px) !important;
    line-height: 1.1;
    text-align: center;
  }
  .ultra-name-big, .legendary-banner { font-size: clamp(20px, 6vw, 32px) !important; }

  /* Hide noisier decorative bits on tiny screens */
  .frame-corner { width: 14px; height: 14px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .stats-tiers { grid-template-columns: repeat(2, 1fr); }
  .rarity-key { grid-template-columns: 1fr; }
  .gender-btn { padding: 5px 8px; }
  .logo-text { font-size: 12px; }
}

/* ---------- Procedural pixel face ---------- */
.face-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* Main face inside the reveal frame */
.face-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14px auto 4px;
  padding: 8px;
  position: relative;
  animation: face-fade-in 0.4s ease-out;
}
@keyframes face-fade-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.face-main {
  border: 2px solid var(--line-1);
  background: #1a1a1e;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Tier-specific face frames mirror the reveal-frame tier glows */
.face-stage-uncommon  .face-main { border-color: #31FF31; box-shadow: 0 0 18px rgba(49, 255, 49, 0.45), 0 4px 18px rgba(0,0,0,0.5); }
.face-stage-rare      .face-main { border-color: #3a9eff; box-shadow: 0 0 22px rgba(58, 158, 255, 0.55), 0 4px 18px rgba(0,0,0,0.5); }
.face-stage-epic      .face-main { border-color: #c77dff; box-shadow: 0 0 28px rgba(199, 125, 255, 0.65), 0 4px 18px rgba(0,0,0,0.5); }
.face-stage-legendary .face-main {
  border-color: #FFB347;
  box-shadow: 0 0 36px rgba(255, 160, 0, 0.85), 0 0 80px rgba(255, 200, 0, 0.4), 0 4px 18px rgba(0,0,0,0.5);
  animation: face-pulse-leg 1.5s ease-in-out infinite;
}
.face-stage-ultra .face-main {
  border-color: #ff2a2a;
  box-shadow: 0 0 40px rgba(255, 42, 42, 0.95), 0 0 100px rgba(255, 0, 0, 0.5), 0 4px 18px rgba(0,0,0,0.5);
  animation: face-pulse-ultra 1.4s ease-in-out infinite;
}
@keyframes face-pulse-leg {
  0%, 100% { box-shadow: 0 0 36px rgba(255, 160, 0, 0.85), 0 0 80px rgba(255, 200, 0, 0.4), 0 4px 18px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 56px rgba(255, 200, 0, 1),    0 0 120px rgba(255, 220, 0, 0.55), 0 4px 18px rgba(0,0,0,0.5); }
}
@keyframes face-pulse-ultra {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 42, 42, 0.95), 0 0 100px rgba(255, 0, 0, 0.5),  0 4px 18px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 70px rgba(255, 80, 80, 1),     0 0 160px rgba(255, 0, 0, 0.75), 0 4px 18px rgba(0,0,0,0.5); }
}

/* Legendary overlay big face */
.legendary-face-stage {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
  animation: face-fade-in 0.6s ease-out 0.1s backwards;
}
.face-legendary {
  border: 4px solid #FFB347;
  background: #1a1208;
  box-shadow: 0 0 60px rgba(255, 180, 0, 0.9), 0 0 160px rgba(255, 200, 0, 0.5), inset 0 0 0 2px rgba(255,255,255,0.06);
  animation: face-pulse-leg 1.5s ease-in-out infinite;
}
.ultra-face-stage .face-legendary {
  border-color: #ff2a2a;
  background: #180808;
  box-shadow: 0 0 80px rgba(255, 42, 42, 1), 0 0 220px rgba(255, 0, 0, 0.7), inset 0 0 0 2px rgba(255,255,255,0.06);
  animation: face-pulse-ultra 1.4s ease-in-out infinite;
}

/* History thumbnail */
.history-face {
  border: 1px solid var(--line-1);
  background: #1a1a1e;
  flex-shrink: 0;
}
.history-legendary .history-face { border-color: #FFB347; box-shadow: 0 0 6px rgba(255, 160, 0, 0.5); }
.history-ultra     .history-face { border-color: #ff2a2a; box-shadow: 0 0 6px rgba(255, 42, 42, 0.6); }

/* ============ ID BADGE ============ */
.id-badge {
  position: relative;
  width: 290px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-family: var(--font-mono);
  animation: badge-drop-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  z-index: 3;
}
@keyframes badge-drop-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Holographic shimmer overlay — legendary/ultra only */
.badge-holo-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 200, 0.14) 47%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(200, 255, 200, 0.12) 53%,
    transparent 70%
  );
  animation: holo-sweep 3.2s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes holo-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

/* --- Badge header strip --- */
.badge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--tier-color);
  gap: 6px;
  min-height: 34px;
}
.badge-company {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-dept {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.65);
  text-align: right;
  min-width: 0;
}
.badge-dept-emoji { font-size: 14px; flex-shrink: 0; }
.badge-dept-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-dept-generic { font-size: 9px; letter-spacing: 0.1em; color: rgba(0,0,0,0.55); }

/* --- Portrait zone --- */
.badge-portrait-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 14px 8px;
  position: relative;
}
.badge-photo-frame {
  border: 2px solid var(--tier-color);
  background: #111;
  line-height: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.badge-face { display: block; }
.badge-tier-tag {
  margin-top: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.25em;
  color: var(--tier-color);
  text-shadow: 0 0 8px var(--tier-color);
}

/* --- Identity block --- */
.badge-identity {
  padding: 8px 14px 6px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.badge-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.15;
  text-wrap: balance;
}
.badge-role {
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--tier-color);
  margin-top: 4px;
  line-height: 1.4;
  text-wrap: balance;
}

/* --- Flair / notes area --- */
.badge-notes {
  padding: 6px 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
  min-height: 0;
}
.badge-note {
  font-size: 9.5px; letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-condition { color: #8b8b95; font-style: italic; }
.badge-access    { color: #6b8fa8; }
.badge-sin       { color: #a86b5a; }
.badge-sticker   { color: #7aaa6a; }
.badge-clearance { color: var(--tier-color); font-weight: 700; }
.badge-legacy    { color: var(--tier-color); }
.badge-sig       { color: var(--tier-color); font-style: italic; letter-spacing: 0.04em; }

/* --- Barcode footer --- */
.badge-footer-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.badge-barcode {
  display: flex; align-items: flex-end; gap: 1px; height: 22px;
}
.badge-bar {
  background: var(--text-dim);
  height: 100%;
  min-width: 1px;
  opacity: 0.5;
  border-radius: 1px;
}
.badge-id-code {
  font-size: 9px; letter-spacing: 0.15em; color: var(--text-faint);
}

/* ---- Tier-specific badge visuals ---- */

/* Common — scratched gray plastic */
.badge-common {
  background: #1e1e22;
  border: 2px solid #4b5563;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.badge-common::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent, transparent 6px,
    rgba(255,255,255,0.015) 6px, rgba(255,255,255,0.015) 7px
  );
  pointer-events: none; z-index: 5;
}
.badge-common .badge-header { background: #374151; }
.badge-common .badge-company { color: rgba(255,255,255,0.45); }
.badge-common .badge-dept { color: rgba(255,255,255,0.3); }

/* Uncommon — standard blue office badge */
.badge-uncommon {
  background: linear-gradient(160deg, #0f1e2c 0%, #0d1a28 100%);
  border: 2px solid #3a6ea8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.badge-uncommon .badge-header { background: #1a3a5a; }
.badge-uncommon .badge-company { color: rgba(255,255,255,0.55); }
.badge-uncommon .badge-dept { color: rgba(255,255,255,0.4); }

/* Rare — "Visitor" yellow with slight stain */
.badge-rare {
  background: linear-gradient(160deg, #1c1800 0%, #150f00 100%);
  border: 2px solid #b8960a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.badge-rare::before {
  content: "";
  position: absolute;
  top: 55%; left: 30%;
  width: 60px; height: 50px;
  background: radial-gradient(ellipse, rgba(120,80,0,0.18) 0%, transparent 70%);
  pointer-events: none; z-index: 5;
}
.badge-rare .badge-header { background: #3a2a00; }
.badge-rare .badge-company { color: rgba(255,210,0,0.65); }
.badge-rare .badge-dept { color: rgba(255,200,0,0.5); }

/* Epic — vibrant department color */
.badge-epic {
  background: linear-gradient(160deg, #120a20 0%, #0e0818 100%);
  border: 2px solid #c77dff;
  box-shadow: 0 0 20px rgba(199, 125, 255, 0.25), 0 4px 16px rgba(0,0,0,0.6);
}
.badge-epic .badge-header { background: #2a1045; }
.badge-epic .badge-company { color: rgba(220,180,255,0.7); }
.badge-epic .badge-dept { color: rgba(200,150,255,0.55); }

/* Legendary — gold-trimmed hologram */
.badge-legendary {
  background: linear-gradient(160deg, #1a1400 0%, #0e0e00 50%, #1a1400 100%);
  border: 2px solid #ffd040;
  box-shadow: 0 0 28px rgba(255, 208, 64, 0.4), 0 0 60px rgba(255, 180, 0, 0.15), 0 4px 20px rgba(0,0,0,0.7);
  animation: badge-drop-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both, badge-leg-glow 2s ease-in-out 0.45s infinite;
}
@keyframes badge-leg-glow {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 208, 64, 0.4), 0 0 60px rgba(255, 180, 0, 0.15), 0 4px 20px rgba(0,0,0,0.7); }
  50%      { box-shadow: 0 0 48px rgba(255, 220, 80, 0.65), 0 0 100px rgba(255, 200, 0, 0.25), 0 4px 20px rgba(0,0,0,0.7); }
}
.badge-legendary .badge-header { background: linear-gradient(90deg, #7a5800, #c89020, #7a5800); }
.badge-legendary .badge-company { color: rgba(255, 240, 180, 0.9); }
.badge-legendary .badge-dept { color: rgba(255, 220, 130, 0.75); }
.badge-legendary .badge-name { color: #fff5cc; }
.badge-legendary .badge-role {
  background: linear-gradient(90deg, #ff8000, #ffd700, #ff8000);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 700;
}

/* Mythic — obsidian with blood-red glow */
.badge-ultra {
  background: linear-gradient(160deg, #050008 0%, #0a0010 50%, #050008 100%);
  border: 2px solid #ff3030;
  box-shadow: 0 0 36px rgba(255, 42, 42, 0.5), 0 0 80px rgba(180, 0, 0, 0.2), 0 4px 20px rgba(0,0,0,0.8);
  animation: badge-drop-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both, badge-ultra-glow 1.8s ease-in-out 0.45s infinite;
}
@keyframes badge-ultra-glow {
  0%, 100% { box-shadow: 0 0 36px rgba(255, 42, 42, 0.5), 0 0 80px rgba(180, 0, 0, 0.2), 0 4px 20px rgba(0,0,0,0.8); }
  50%      { box-shadow: 0 0 60px rgba(255, 80, 80, 0.75), 0 0 130px rgba(255, 0, 0, 0.35), 0 4px 20px rgba(0,0,0,0.8); }
}
.badge-ultra .badge-header { background: linear-gradient(90deg, #3a0000, #7a0808, #3a0000); }
.badge-ultra .badge-company { color: rgba(255, 180, 180, 0.8); }
.badge-ultra .badge-dept { color: rgba(255, 130, 130, 0.65); }
.badge-ultra .badge-name { color: #f5f5f7; text-shadow: 0 0 8px rgba(255, 42, 42, 0.6); }
.badge-ultra .badge-role { color: #ff6060; font-weight: 700; }
.badge-ultra .badge-clearance { animation: clearance-pulse 2s ease-in-out infinite; }
@keyframes clearance-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.65; }
}