:root {
  --navy-950: #020915;
  --navy-900: #06152a;
  --navy-800: #0a2345;
  --gold-100: #fff0bd;
  --gold-300: #ffd981;
  --gold-500: #d8a33b;
  --gold-700: #9a6720;
  --white: #fffaf0;
  --danger: #e64848;
  --success: #2ec96e;
  --glass: rgba(5, 17, 34, .72);
  --line: rgba(255, 217, 129, .55);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #142f55 0%, var(--navy-950) 55%, #000 100%);
  color: var(--white);
  overflow: hidden;
}
.app-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.2vh; }
.stage {
  width: min(100vw, 200vh);
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(14px, 1.5vw, 28px);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,217,129,.16), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(255,217,129,.11), transparent 18%),
    linear-gradient(135deg, rgba(4,13,29,.96), rgba(8,31,61,.96) 50%, rgba(2,9,21,.98)),
    repeating-radial-gradient(circle at 10% 100%, rgba(255,217,129,.15) 0 1px, transparent 1px 9px);
  border: 2px solid rgba(255, 217, 129, .72);
  box-shadow: 0 0 0 8px rgba(0,0,0,.18), 0 26px 90px rgba(0,0,0,.55);
}
.stage::before, .stage::after {
  content: ""; position: absolute; inset: -30% -10%; pointer-events: none;
  background: repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(255,217,129,.18) 19px 20px, transparent 21px 42px);
  transform: rotate(-11deg); opacity: .34; animation: drift 18s linear infinite;
}
.stage::after { transform: rotate(13deg); animation-duration: 23s; opacity: .18; }
@keyframes drift { to { translate: 3% -2%; } }
.watermark { position:absolute; width:28%; opacity:.045; filter: grayscale(1); pointer-events:none; }
.watermark-a { left: -4%; bottom: -10%; } .watermark-b { right: -3%; top: 10%; }
.hero { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; height:16%; }
.top-controls { display:flex; gap:10px; align-items:center; }
.ghost-btn.small { padding: 11px 18px; font-size: 12px; }
.brand-lockup { display:flex; align-items:center; gap:18px; }
.brand-lockup img { width: clamp(78px, 7vw, 128px); height:auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.eyebrow { margin:0; letter-spacing:.45em; color:var(--gold-300); text-transform:uppercase; font-size: clamp(12px, .9vw, 18px); }
h1 { margin:.1em 0; font-family: Georgia, "Times New Roman", serif; color: var(--gold-300); font-size: clamp(38px, 4.1vw, 78px); line-height:.9; text-transform:uppercase; text-shadow: 0 3px 18px rgba(216,163,59,.45); }
.hero p:last-child { margin:0; color:#f7dfaa; letter-spacing:.12em; }
.content-grid { position:relative; z-index:1; height:72%; display:grid; grid-template-columns: 1fr minmax(260px, 22%); gap: clamp(12px, 1.2vw, 22px); }
.glass-card { background: var(--glass); border:1px solid var(--line); border-radius:24px; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.draw-panel { padding: clamp(16px, 1.5vw, 28px); display:flex; flex-direction:column; }
.panel-title { display:flex; align-items:end; justify-content:space-between; color:var(--gold-300); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.panel-title span { font-size: clamp(12px, .85vw, 16px); opacity:.86; } .panel-title strong { font-family: Georgia, serif; font-size: clamp(18px, 1.4vw, 28px); }
.slot-grid { flex:1; display:grid; grid-template-columns: repeat(var(--draw-count, 5), minmax(0, 1fr)); gap: clamp(10px, 1vw, 18px); align-items:center; }
.slot, .result-number {
  min-height: clamp(132px, 13vw, 245px);
  display:grid; place-items:center; border-radius:24px;
  background: radial-gradient(circle at 35% 15%, rgba(255,240,189,.18), transparent 28%), linear-gradient(180deg, rgba(255,217,129,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,217,129,.62);
  box-shadow: inset 0 0 32px rgba(255,217,129,.08), 0 10px 35px rgba(0,0,0,.32);
  font-family: Georgia, serif; font-size: clamp(42px, calc(10vw / max(var(--draw-count, 5), 5) * 3.1), 112px); font-weight: 900; color: var(--gold-300);
  text-shadow: 0 0 18px rgba(216,163,59,.36), 0 4px 0 rgba(84,50,9,.8);
}
.slot.spinning { animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { from { filter: brightness(.92); transform: translateY(0); } to { filter: brightness(1.35); transform: translateY(-3px); } }
.actions { display:flex; justify-content:center; gap:14px; padding-top:18px; }
button { border:0; cursor:pointer; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding: 14px 30px; color:#09111e; transition:.18s ease; }
button:hover { transform: translateY(-2px); filter:brightness(1.08); }
.primary-btn { background: linear-gradient(180deg, #ffe9a5, var(--gold-500)); box-shadow: 0 10px 24px rgba(216,163,59,.28); }
.danger-btn { background: linear-gradient(180deg, #ff9b9b, var(--danger)); color:white; }
.success-btn { background: linear-gradient(180deg, #b9ffd4, var(--success)); color:#062114; }
.ghost-btn { background: rgba(255,217,129,.1); color:var(--gold-100); border:1px solid var(--line); }
.hidden { display:none !important; }
.current-batch { margin-top:14px; padding:12px; border:1px dashed rgba(255,217,129,.45); border-radius:18px; }
.batch-head { display:flex; justify-content:space-between; gap:14px; color:#f8e2af; font-size:14px; margin-bottom:10px; }
.batch-list { display:grid; grid-template-columns:repeat(var(--draw-count, 5), minmax(92px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:2px; }
.reject-card { position:relative; display:grid; gap:6px; place-items:center; border-radius:16px; padding:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,217,129,.3); }
.reject-card strong { font-size: clamp(28px, 2.6vw, 54px); color:var(--gold-300); font-family:Georgia,serif; }
.reject-card label { font-size:12px; color:#ffdca0; }
.reject-card input { accent-color: var(--danger); transform: scale(1.2); }
.side-panel { padding:16px; display:flex; flex-direction:column; min-width:0; }
.result-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap:8px; margin-bottom:14px; }
.result-list.empty-state { display:grid; place-items:center; min-height:74px; border:1px dashed rgba(255,217,129,.35); border-radius:16px; color:rgba(255,240,189,.75); letter-spacing:.08em; text-transform:uppercase; }
.result-number { min-height:74px; border-radius:16px; font-size: clamp(24px, 2vw, 38px); }
.confirmed-box { min-height:0; flex:1; display:flex; flex-direction:column; }
.confirmed-list { overflow:auto; padding-right:5px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.confirmed-pill { border:1px solid rgba(255,217,129,.42); border-radius:999px; padding:8px 10px; text-align:center; color:var(--gold-100); background:rgba(255,217,129,.08); font-weight:800; }
.settings-panel { position:absolute; z-index:3; right:24px; top:18%; padding:16px; border-radius:18px; background:rgba(2,9,21,.92); border:1px solid var(--line); display:flex; gap:10px; align-items:center; }
.settings-panel label { color:#f8e2af; font-size:12px; } .settings-panel input { width:92px; padding:10px; border-radius:10px; border:1px solid var(--line); background:#07172c; color:white; }
.confirm-modal { border:1px solid var(--line); border-radius:24px; background:linear-gradient(160deg, #06152a, #020915); color:var(--white); box-shadow:0 30px 90px rgba(0,0,0,.7); max-width:560px; }
.confirm-modal::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.confirm-modal h2 { font-family:Georgia,serif; color:var(--gold-300); font-size:36px; margin:.2em 0; }
.confirm-modal menu { display:flex; justify-content:flex-end; gap:10px; padding:0; margin-top:18px; }
.modal-summary { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.modal-summary span { padding:8px 12px; border-radius:999px; background:rgba(255,217,129,.1); border:1px solid var(--line); color:var(--gold-100); }
.confetti-layer { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.confetti { position:absolute; width:10px; height:16px; background:var(--gold-300); top:-20px; opacity:.9; animation: fall 1.6s ease-out forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity:0; } }
@media (max-width: 1100px) { body { overflow:auto; } .stage { width:100vw; min-height:100vh; aspect-ratio:auto; border-radius:0; } .content-grid { grid-template-columns:1fr; height:auto; } .slot-grid,.batch-list { grid-template-columns:repeat(5, minmax(80px,1fr)); } }

.slot.placeholder { color: rgba(255,240,189,.72); font-size: clamp(18px, 1.7vw, 30px); text-shadow:none; letter-spacing:.16em; text-align:center; text-transform:uppercase; }
.slot.placeholder img { width:min(58%, 110px); opacity:.7; filter: drop-shadow(0 8px 22px rgba(216,163,59,.28)); margin-bottom:10px; }
.slot.placeholder span { display:block; }
@media (max-width: 1100px) { .slot-grid,.batch-list { grid-template-columns:repeat(var(--draw-count, 5), minmax(80px,1fr)); } .top-controls{flex-wrap:wrap;justify-content:flex-end;} }