:root {
  --bg: #070705;
  --bg-2: #10100d;
  --panel: rgba(18, 18, 14, .88);
  --panel-strong: rgba(23, 22, 18, .96);
  --line: rgba(205, 154, 73, .32);
  --line-strong: rgba(238, 196, 116, .56);
  --text: #fff3d0;
  --muted: #b9a984;
  --primary: #b5342c;
  --secondary: #cf9b49;
  --accent: #ffe1a0;
  --good: #70d36b;
  --danger: #d22e25;
  --shadow: 0 28px 80px rgba(0, 0, 0, .58);
  --radius: 18px;
  --font: "Noto Sans KR", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at 12% -8%, rgba(184, 42, 32, .24), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(214, 156, 65, .18), transparent 30%),
    linear-gradient(135deg, #040403 0%, #10100c 44%, #060604 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255, 220, 150, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 220, 150, .025) 1px, transparent 1px);
  background-size: 44px 44px;
}
body::after {
  content: "";
  position: fixed;
  right: -18vw;
  bottom: -22vh;
  width: 70vw;
  height: 42vh;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  opacity: .52;
  filter: blur(52px);
  background: linear-gradient(90deg, transparent, rgba(180, 42, 32, .55), rgba(206, 148, 70, .34));
  transform: rotate(-7deg);
}
button, input, select, textarea { font: inherit; min-width: 0; line-height: 1.25; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; filter: grayscale(.12); }
input, select, textarea {
  color: var(--text);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(222, 174, 97, .26);
  border-radius: 10px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(222, 174, 97, .18); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background: rgba(207,155,73,.38); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.app-shell { width: min(1920px, 100%); margin: 0 auto; padding: 10px 10px 18px; }
.top-hero {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(420px, 1.35fr) minmax(250px, .95fr) minmax(280px, 1fr) 112px;
  grid-template-areas: "price progress live brand settings";
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(24, 23, 19, .98), rgba(9, 10, 8, .94)),
    radial-gradient(circle at top left, rgba(196, 52, 42, .18), transparent 30%);
  border-radius: 14px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-box {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}
.logo-badge {
  width: 70px; height: 70px; flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, rgba(199, 63, 49, .95), rgba(23, 21, 17, .95));
  border: 1px solid rgba(238, 196, 116, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 12px 34px rgba(0,0,0,.35);
  font-weight: 1000; font-size: 25px; color: #ffe3a3;
}
.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.12), rgba(0,0,0,.08));
}
.brand-title {
  font-size: 31px;
  font-weight: 1000;
  letter-spacing: -.08em;
  line-height: 1;
  color: #f2bd68;
  text-shadow: 0 0 18px rgba(207,155,73,.25);
}
.brand-subtitle {
  margin-top: 11px;
  color: #d5b47a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .42em;
}
.hero-card, .live-status {
  border: 1px solid rgba(205,154,73,.34);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(30, 29, 24, .92), rgba(10, 11, 9, .72)),
    radial-gradient(circle at 0 0, rgba(255,255,255,.08), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.18);
}
.price-card, .progress-card { display: flex; align-items: center; gap: 18px; padding: 14px 18px; min-width: 0; flex-wrap: wrap; }
.price-card { grid-area: price; }
.progress-card { grid-area: progress; }
.metric-block { display: grid; gap: 5px; min-width: 95px; }
.metric-block.wide { min-width: 0; }
.metric-block.grow { flex: 1; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 850; }
.metric-block strong { color: #fff1c2; font-size: 17px; font-weight: 950; line-height: 1.35; overflow-wrap: anywhere; }
.divider { width: 1px; align-self: stretch; background: rgba(238,196,116,.28); }
.mini-progress, .progress-track {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(238,196,116,.30);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(43,40,32,.52));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.mini-progress span, .progress-track span {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, #9f251e, #e0a34d, #ffe2a2);
  box-shadow: 0 0 16px rgba(238, 196, 116, .38);
  transition: width .35s ease;
}
.top-percent { font-size: 30px; color: #f0bd6b; line-height: 1; }
.metric-block.righty { margin-left: auto; min-width: 132px; gap: 8px; color: #e5d2a5; font-weight: 900; }
.metric-block.righty span { display: flex; justify-content: space-between; gap: 12px; }
.live-status { grid-area: live; padding: 15px 16px; display: grid; gap: 8px; min-width: 0; }
.live-status strong, .live-status small {
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.45;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.live-status strong { padding: 8px 10px; border-radius: 10px; background: rgba(157, 34, 28, .55); color: #ffe1c6; font-size: 14px; }
.live-status small { color: #c6da8b; font-weight: 800; font-size: 13px; }
.red-dot, .green-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:0; vertical-align:1px; }
.red-dot { background:#f24b3f; box-shadow: 0 0 9px rgba(242,75,63,.7); }
.green-dot { background:#76d36f; box-shadow: 0 0 9px rgba(118,211,111,.6); }
.ghost-button, .panel-title button, .tool-btn, .jump-box button, .import-label, .mini-add {
  color: var(--text);
  border: 1px solid rgba(205,154,73,.40);
  background: linear-gradient(180deg, rgba(31,29,23,.92), rgba(8,9,8,.94));
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.20);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.ghost-button { grid-area: settings; width: 100%; flex-direction: column; gap: 7px; padding: 10px; }
.ghost-button .ico { font-size: 22px; }
.ghost-button:hover, .panel-title button:hover, .tool-btn:hover, .jump-box button:hover, .import-label:hover, .mini-add:hover {
  transform: translateY(-1px);
  border-color: rgba(255,224,160,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 15px 28px rgba(0,0,0,.32), 0 0 0 3px rgba(207,155,73,.08);
}
.tool-btn.primary {
  color: #2b1608;
  border-color: rgba(255,224,160,.75);
  background: linear-gradient(135deg, #fff0bd, #d3a251 38%, #8e5c20 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 16px 36px rgba(211,162,81,.28);
}
.tool-btn.danger, .tool-btn.outline-hot {
  border-color: rgba(225, 72, 55, .62);
  background: linear-gradient(180deg, rgba(116, 21, 18, .95), rgba(38, 11, 10, .92));
  color: #ffe3bf;
}
.tool-btn.danger { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(181,52,44,.24); }
.tool-btn.full, .import-label { width: 100%; }
.ico { filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.board-tabs { display: flex; gap: 8px; align-items: end; margin-top: 10px; min-height: 45px; overflow-x: auto; padding-bottom: 4px; }
.board-tab {
  min-width: 140px; padding: 13px 18px;
  border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(205,154,73,.26);
  color: #d3c097;
  background: linear-gradient(180deg, rgba(22,21,17,.75), rgba(8,8,6,.76));
  font-weight: 950;
}
.board-tab.active { color:#ffe2a2; border-color: rgba(255,224,160,.65); background: linear-gradient(180deg, rgba(116, 31, 24, .62), rgba(23,20,15,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.board-tab.add { border-style: dashed; color:#d8bd7c; }
.control-deck {
  margin-top: 0;
  border: 1px solid rgba(205,154,73,.30);
  border-radius: 13px;
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: linear-gradient(180deg, rgba(16,15,12,.88), rgba(5,5,4,.92));
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
}
.button-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.button-row .tool-btn { flex: 0 0 auto; }
.right-tools { justify-content: flex-end; }
.buyer-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(205,154,73,.22);
  min-width: 0;
}
.buyer-inline label { color: #d6bd83; font-size: 13px; font-weight: 900; white-space: nowrap; }
.buyer-inline input {
  flex: 1;
  min-width: 240px;
  height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 900;
}
.jump-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(205,154,73,.28);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  color: #d9c194;
  font-weight: 900;
  font-size: 13px;
}
.jump-box input {
  width: 96px;
  height: 40px;
  text-align: center;
  padding: 0 10px;
  font-weight: 900;
}
.jump-box button { padding: 10px 14px; border-radius: 10px; color:#fff1c2; background: linear-gradient(180deg, #7f1914, #2a0d0b); }
.selected-chip {
  display: inline-flex; align-items: center; gap: 8px;
  color: #d9c194;
  border: 1px solid rgba(205,154,73,.32);
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
}
.selected-chip strong { color: #ffcc7b; font-size: 18px; }
.chip-x { color:#8e8064; }
.dashboard-grid { display: grid; grid-template-columns: 320px minmax(720px, 1fr) 360px; gap: 12px; margin-top: 12px; align-items: start; min-height: 0; }
.left-stack, .right-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; align-self: start; }
.right-stack { min-height: 0; height: auto; align-self: start; }
.panel, .board-stage {
  border: 1px solid rgba(205,154,73,.30);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(22, 22, 17, .90), rgba(8, 9, 7, .88)),
    radial-gradient(circle at 20% 0, rgba(255,255,255,.06), transparent 35%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.panel-title { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(205,154,73,.20); }
.panel-title span { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 950; }
.panel-title i { font-style: normal; color: #efbd72; }
.panel-title button { padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.panel-title small { color:#ccb88d; font-weight:900; }
.mini-input-panel { min-height: 130px; }
.buyer-quick-row { display:flex; gap:8px; padding: 12px 14px 6px; }
.buyer-quick-row input { flex:1; height:38px; padding:0 12px; }
.mini-add { padding:9px 12px; color:#ffe9b1; }
.queue-box {
  margin: 8px 14px 14px;
  min-height: 76px;
  max-height: 270px;
  display:grid;
  gap: 8px;
  align-content:start;
  padding: 10px;
  border:1px dashed rgba(205,154,73,.22);
  border-radius:10px;
  color:#a99a78;
  font-weight:800;
  font-size:13px;
  overflow: auto;
  overscroll-behavior: contain;
}
.queue-box::-webkit-scrollbar { width: 7px; }
.queue-box::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(205,154,73,.26); }
.queue-empty { min-height: 52px; display:grid; place-items:center; text-align:center; }
.queue-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(205,154,73,.18);
  background: rgba(255,255,255,.03);
}
.queue-item.current {
  border-color: rgba(255,224,160,.48);
  box-shadow: inset 0 0 0 1px rgba(255,224,160,.08);
  background: linear-gradient(180deg, rgba(112,29,23,.38), rgba(17,12,10,.38));
}
.queue-main { display:flex; align-items:center; gap:10px; min-width:0; }
.queue-main strong { display:block; color:#ffe5ae; overflow-wrap:anywhere; }
.queue-order {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe6ae, #bd8440);
  color:#2b1608;
  font-weight: 1000;
}
.queue-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.queue-action, .icon-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(205,154,73,.30);
  background: linear-gradient(180deg, rgba(31,29,23,.92), rgba(8,9,8,.94));
  color: var(--text);
  font-weight: 900;
}
.queue-action.danger, .icon-button {
  border-color: rgba(225,72,55,.46);
  background: linear-gradient(180deg, rgba(116,21,18,.95), rgba(38,11,10,.92));
}
.buyer-list, .history-list { padding: 12px; max-height: 310px; overflow: auto; }
.empty-state { min-height: 190px; display: grid; place-items: center; text-align: center; border: 1px solid rgba(205,154,73,.22); border-radius: 14px; background: radial-gradient(circle at 50% 18%, rgba(205,154,73,.10), transparent 28%), rgba(0,0,0,.18); color: #b8a680; }
.empty-state > div { display: grid; gap: 8px; justify-items: center; }
.empty-icon { font-size: 46px; opacity: .72; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.empty-state strong { color:#d9c491; font-size: 15px; }
.empty-state span:last-child { font-size: 13px; line-height:1.5; }
.buyer-item, .history-item, .top-prize-item, .rank-line {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid rgba(205,154,73,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.14));
  border-radius: 13px;
  padding: 10px;
  margin-bottom: 8px;
}
.history-thumb, .top-prize-thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,226,160,.32);
  background: rgba(0,0,0,.22);
}
.badge-mini {
  min-width: 34px; height: 34px; padding: 0 8px;
  display:grid; place-items:center;
  border-radius: 10px;
  color:#2b1608;
  background: linear-gradient(135deg, #ffe6ae, #bd8440);
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.item-sub { color:#ad9b74; font-size: 12px; font-weight: 800; margin-top: 3px; }
.board-stage { min-height: 720px; height: 100%; padding: 15px 18px 18px; position: relative; display:flex; flex-direction:column; gap:14px; }
.stage-head { display:flex; align-items:center; justify-content:space-between; gap: 14px; margin-bottom: 14px; }
.stage-head h2 { margin:0; font-size: 18px; letter-spacing: -.03em; color: #ffe3a3; }
.stage-head h2 small { color:#bda87a; font-size:13px; }
.stage-progress-wrap { display:flex; align-items:center; gap:12px; flex: 1; max-width: 760px; }
.progress-label { font-size: 13px; font-weight: 900; white-space: nowrap; color:#d8c18b; }
.progress-label strong { color:#ffcc7b; margin-left:4px; }
.progress-track { flex: 1; height: 9px; }
.board-frame {
  flex: 1;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(205,154,73,.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(205,154,73,.12), transparent 30%),
    linear-gradient(180deg, rgba(13,14,11,.92), rgba(8,8,6,.97));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 60px rgba(0,0,0,.36), 0 0 34px rgba(170, 112, 47, .08);
  overflow: hidden;
}
.board-frame-inner { position: relative; display: grid; gap: 10px; height: 100%; min-height: 0; }
.ticket-grid-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(205,154,73,.16);
  background: rgba(255,255,255,.015);
  padding: 8px;
}
.ticket-grid {
  --ticket-columns: 10;
  display: grid;
  grid-template-columns: repeat(var(--ticket-columns), minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  transition: opacity .22s ease, transform .34s ease;
}
.ticket-grid.paged { gap: 7px; }
.ticket-grid.grid-hidden { opacity: 0; transform: scale(.985); }
.ticket-grid.shuffle-reappear { animation: shuffleReappear .48s ease; }
@keyframes shuffleReappear {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.app-shell.shuffle-lock .ticket,
.app-shell.shuffle-lock .tool-btn,
.app-shell.shuffle-lock .ghost-button,
.app-shell.shuffle-lock .draw-ticket-button,
.app-shell.shuffle-lock .page-btn,
.app-shell.shuffle-lock .board-tab,
.app-shell.shuffle-lock .jump-box input,
.app-shell.shuffle-lock .jump-box button {
  pointer-events: none;
}
.app-shell.shuffle-lock .ticket,
.app-shell.shuffle-lock .tool-btn,
.app-shell.shuffle-lock .ghost-button,
.app-shell.shuffle-lock .draw-ticket-button,
.app-shell.shuffle-lock .page-btn,
.app-shell.shuffle-lock .board-tab {
  cursor: wait;
}
.shuffle-overlay {
  position: absolute;
  inset: 48px 0 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}
.shuffle-overlay.active { opacity: 1; }
.shuffle-overlay.fade-out { opacity: 0; }
.shuffle-clone {
  position: absolute;
  border-radius: 8px;
  border: 1px solid rgba(255,225,178,.58);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(135deg, #c94131, #a42019 56%, #741814);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.35);
  will-change: transform, opacity;
  transition:
    transform .58s cubic-bezier(.22,.88,.24,1),
    opacity .28s ease,
    filter .28s ease,
    box-shadow .28s ease;
  z-index: 2;
}
.shuffle-clone.closed-card {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(135deg, #c94131, #a42019 56%, #741814);
}
.shuffle-clone.opened-card {
  border-color: rgba(205,154,73,.18);
  background:
    linear-gradient(135deg, rgba(31,28,22,.52), rgba(11,11,9,.44)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(0,0,0,.03) 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.22);
  opacity: .55;
}
.shuffle-overlay.collect .shuffle-clone.closed-card {
  transform:
    translate(calc(var(--collect-x) + var(--stack-x)), calc(var(--collect-y) + var(--stack-y)))
    rotate(var(--stack-rotate))
    scale(var(--stack-scale));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,226,160,.08);
}
.shuffle-overlay.collect .shuffle-clone.opened-card {
  transform:
    translate(var(--collect-x), var(--collect-y))
    rotate(calc(var(--stack-rotate) * .3))
    scale(.97);
}
.shuffle-overlay.mixing .shuffle-clone.closed-card {
  animation: shuffleMixing 0.42s ease-in-out infinite alternate;
}
.shuffle-overlay.release .shuffle-clone {
  transition-delay: var(--release-delay, 0ms);
  transform: translate(var(--release-x), var(--release-y)) scale(1) rotate(0deg);
}
.shuffle-overlay.fade-out .shuffle-clone {
  opacity: 0;
  transform: translate(var(--release-x), var(--release-y)) scale(1.03);
}
@keyframes shuffleMixing {
  0% {
    transform:
      translate(calc(var(--collect-x) + var(--stack-x)), calc(var(--collect-y) + var(--stack-y)))
      rotate(calc(var(--stack-rotate) - 5deg))
      scale(calc(var(--stack-scale) * .99));
  }
  100% {
    transform:
      translate(calc(var(--collect-x) + var(--stack-x) * .72), calc(var(--collect-y) + var(--stack-y) * 1.16))
      rotate(calc(var(--stack-rotate) + 5deg))
      scale(calc(var(--stack-scale) * 1.02));
  }
}
.board-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.page-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; flex-wrap: wrap; }
.page-summary {
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(205,154,73,.24);
  background: rgba(0,0,0,.22);
  color: #d6bd83;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}
.page-summary strong { color: #fff0bd; font-size: 16px; letter-spacing: .02em; }
.page-summary small { color: #bfa578; font-size: 12px; }
.page-btn {
  min-width: 92px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(205,154,73,.28);
  background: linear-gradient(180deg, rgba(31,29,23,.92), rgba(8,9,8,.94));
  color: #ffe6ae;
  font-weight: 900;
  font-size: 14px;
}
.jump-box label { white-space: nowrap; }
.ticket {
  min-height: 58px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6px 6px 5px;
  border: 1px solid rgba(255,225,178,.58);
  border-radius: 7px;
  color: #fff1d0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(135deg, #c94131, #a42019 56%, #741814);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -14px 24px rgba(69, 15, 12, .34),
    0 5px 0 #4f1510,
    0 11px 16px rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.40);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease, filter .13s ease;
}
.ticket::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,238,210,.72);
  border-radius: 5px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(120,25,20,.20);
}
.ticket::after {
  content: "";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,.035), transparent 40%, rgba(0,0,0,.08));
  background-size: 10px 10px, 100% 100%;
  opacity:.9;
}
.ticket:hover:not(.opened) { transform: translateY(-3px); border-color: #fff2c4; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 7px 0 #4f1510, 0 15px 22px rgba(0,0,0,.42), 0 0 0 3px rgba(207,155,73,.16); }
.ticket .ticket-mini { display:block; font-size: 9px; font-weight: 900; letter-spacing: .02em; opacity:.88; line-height: 1.15; overflow:hidden; text-overflow:ellipsis; }
.ticket strong { display:block; font-size: 18px; font-weight: 1000; line-height:1.12; margin-top: 5px; font-family: var(--font); letter-spacing:.08em; }
.ticket .ticket-result { display:block; font-size: 10px; font-weight: 950; line-height:1.15; margin-top: 5px; overflow-wrap:anywhere; color: rgba(255,240,205,.82); }
.ticket-grid.paged .ticket { min-height: 54px; padding: 6px 5px 5px; }
.ticket-grid.paged .ticket strong { font-size: 15px; margin-top: 4px; }
.ticket-grid.paged .ticket .ticket-mini,
.ticket-grid.paged .ticket .ticket-result { font-size: 9px; }
.ticket-grid.compact .ticket { min-height: 54px; padding: 6px 5px 5px; }
.ticket-grid.compact .ticket strong { font-size: 16px; }
.ticket-grid.compact .ticket .ticket-result { font-size: 9px; }
.ticket-grid.dense .ticket,
.ticket-grid.ultra .ticket { min-height: 50px; padding: 5px 4px 4px; }
.ticket-grid.dense .ticket strong,
.ticket-grid.ultra .ticket strong { font-size: 14px; }
.ticket-grid.dense .ticket .ticket-mini,
.ticket-grid.ultra .ticket .ticket-mini { font-size: 8px; }
.ticket-grid.dense .ticket .ticket-result,
.ticket-grid.ultra .ticket .ticket-result { font-size: 8px; }
.ticket .selection-mark {
  position:absolute; right: -2px; top: -2px; width: 25px; height:25px;
  display:none; place-items:center;
  border-radius: 0 6px 0 12px;
  background: linear-gradient(135deg, #fff0bd, #d3a251);
  color:#541610; font-weight:1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.ticket.selected {
  transform: translateY(-5px) scale(1.045);
  border-color: #fff4c9;
  background: linear-gradient(135deg, #efb447, #d33d2d 40%, #931b16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 7px 0 #5e1a12,
    0 18px 28px rgba(0,0,0,.48),
    0 0 0 3px rgba(255,226,160,.42),
    0 0 24px rgba(235,183,91,.48);
  animation: selectedPulse 1.1s ease-in-out infinite alternate;
}
.ticket.pinpoint {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #c94131, #a42019 56%, #741814) padding-box,
    linear-gradient(90deg, #ff4d4d, #ffb84d, #f6ff4d, #4dff9f, #4db8ff, #7b5cff, #ff4dd8) border-box;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.06),
    0 0 28px rgba(255,255,255,.2),
    0 14px 22px rgba(0,0,0,.45);
  animation: pinpointPulse 1.15s linear infinite;
}
@keyframes pinpointPulse {
  0% { transform: translateY(-2px) scale(1); filter: hue-rotate(0deg); }
  50% { transform: translateY(-6px) scale(1.04); filter: hue-rotate(180deg); }
  100% { transform: translateY(-2px) scale(1); filter: hue-rotate(360deg); }
}
.ticket.selected .selection-mark { display:grid; }
.ticket.selected::before { border-color:#fff8d8; box-shadow: 0 0 18px rgba(255,226,160,.35) inset; }
@keyframes selectedPulse { from { filter: brightness(1.02); } to { filter: brightness(1.18); } }
.ticket.opening { animation: ticketOpen .38s ease-in-out; }
@keyframes ticketOpen { 0%{ transform: rotateY(0) scale(1); } 55%{ transform: rotateY(86deg) scale(1.05); } 100%{ transform: rotateY(0) scale(1); } }
.ticket.opened {
  color:#9c8a67;
  border-color: rgba(205,154,73,.12);
  background:
    linear-gradient(135deg, rgba(31,28,22,.45), rgba(11,11,9,.38)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(0,0,0,.04) 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(255,255,255,.02), 0 2px 0 rgba(5,5,5,.55);
  transform: none;
  opacity: .5;
}
.ticket.opened::before {
  inset: 0;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.12), transparent 16%),
    linear-gradient(125deg, transparent 0 18%, rgba(0,0,0,.18) 18% 22%, transparent 22% 44%, rgba(255,255,255,.04) 44% 48%, transparent 48% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ticket.opened strong { font-size: 24px; color:#e5d4ad; letter-spacing: -.04em; margin-top: 3px; }
.ticket.opened .ticket-mini { opacity:.88; color:#bda36f; }
.ticket.opened .ticket-result { color:#d6c39a; font-size: 9px; }
.ticket-grid.paged .ticket.opened strong,
.ticket-grid.compact .ticket.opened strong { font-size: 18px; }
.ticket-grid.paged .ticket.opened .ticket-mini,
.ticket-grid.compact .ticket.opened .ticket-mini { font-size: 8px; }
.ticket.opened.top-prize, .ticket.opened.prize-hit, .ticket.opened.lastone-hit {
  border-color: rgba(255,226,160,.18);
  background:
    linear-gradient(135deg, rgba(220,168,78,.16), rgba(43,18,13,.22)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(0,0,0,.04) 10px 20px);
}
.ticket.opened.top-prize .ticket-result, .ticket.opened.prize-hit .ticket-result, .ticket.opened.lastone-hit .ticket-result { color:#d8c18b; text-shadow: none; }
.draw-ticket-button {
  position: relative;
  display: block;
  width: min(540px, 64%);
  height: 104px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 0 20px rgba(204, 60, 45, .38)) drop-shadow(0 18px 24px rgba(0,0,0,.42));
  transition: transform .16s ease, filter .16s ease;
}
.draw-ticket-button:hover { transform: translateY(-3px) scale(1.015); filter: drop-shadow(0 0 28px rgba(238, 196, 116, .42)) drop-shadow(0 22px 28px rgba(0,0,0,.50)); }
.draw-ticket-button img { width:100%; height:100%; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,226,160,.46); }
.draw-ticket-button .draw-glow { position:absolute; inset: 8px; border-radius: 12px; border:1px solid rgba(255,244,207,.72); pointer-events:none; }
.draw-caption { position:absolute; left:0; right:0; bottom:12px; text-align:center; color:rgba(255,245,216,.82); font-weight:900; font-size:11px; letter-spacing:.35em; text-shadow:0 2px 4px rgba(0,0,0,.55); }
.prize-panel {
  flex: 0 0 auto;
  height: 1000px;
  min-height: 0;
  max-height: 1000px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: start;
}
.summary-card {
  margin: 14px;
  padding: 18px;
  display:flex; justify-content:space-between; gap:18px;
  border: 1px solid rgba(205,154,73,.28);
  border-radius: 14px;
  background: rgba(0,0,0,.20);
}
.summary-card small { display:block; color:#aa9a72; font-weight:900; margin-bottom:9px; }
.summary-card strong { font-size: 28px; color:#ffe7ad; }
.summary-card .cyan { color:#fff0bd; }
.lastone-card, .top-prize-item { margin: 0 14px 12px; }
.lastone-card {
  display:flex; align-items:center; gap:12px;
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(205,154,73,.30);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(114, 31, 25, .34), rgba(0,0,0,.25));
}
.lastone-card.claimed { opacity:.72; }
.last-icon { width:46px; height:46px; border-radius:10px; display:grid; place-items:center; font-size:28px; font-weight:1000; color:#ffe6ae; background: linear-gradient(135deg, #bd3128, #5e1611); border:1px solid rgba(255,226,160,.34); }
.top-prize-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 740px;
  overflow: auto;
  padding-bottom: 12px;
}
.top-prize-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  align-items: stretch;
}
.top-prize-item::before { content:none; }
.top-prize-media { position: relative; }
.top-prize-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}
.top-prize-fallback {
  display: grid;
  place-items: center;
  font-size: 48px;
  color: #2b1608;
}
.top-prize-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8,8,6,.76);
  border: 1px solid rgba(255,226,160,.32);
  color: #ffe6ae;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.top-prize-body { display: grid; gap: 8px; }
.top-prize-body strong { color: #fff0bd; font-size: 16px; line-height: 1.45; }
.top-prize-desc {
  margin: 0;
  color: #ccb88d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
  word-break: keep-all;
}
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display:grid; place-items:center; padding: 22px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display:none !important; }
.result-modal, .tool-modal, .settings-modal {
  position: relative;
  width: min(680px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255,226,160,.42);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0%, rgba(189,49,40,.22), transparent 32%), linear-gradient(180deg, rgba(28,27,22,.98), rgba(8,8,6,.98));
  box-shadow: 0 36px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.result-modal { width: min(620px, 96vw); text-align:center; overflow: visible; }
.result-modal.jackpot-mode {
  box-shadow: 0 36px 120px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 42px rgba(239,180,71,.2);
}
.result-modal.jackpot-burst {
  animation: jackpotModalBurst .52s ease;
}
@keyframes jackpotModalBurst {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.018); filter: brightness(1.14); }
  100% { transform: scale(1); filter: brightness(1); }
}
.result-spark { position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size: 52px; color:#ffdf94; text-shadow:0 0 24px rgba(255,223,148,.6); pointer-events:none; }
.modal-close {
  position:absolute;
  top:12px;
  right:12px;
  z-index: 20;
  width: 38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,154,73,.32);
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#ffe6ae;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.tear-stage {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 6px 0 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,226,160,.08), transparent 34%), rgba(7,7,6,.38);
}
.open-ticket-card {
  width: 220px; height: 152px;
  margin: 20px auto 15px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 2px solid rgba(255,244,207,.72);
  background: linear-gradient(135deg, #c94131, #8c2019);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 8px rgba(255,238,210,.12);
  position: relative;
}
.open-ticket-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,244,207,.75); border-radius:10px; }
.open-ticket-card .ticket-number { font-size: 70px; font-weight: 1000; color:#fff3d0; font-family: var(--font); line-height: 1; letter-spacing: -.04em; }
.open-ticket-card .ticket-brand { position:absolute; top:28px; left:0; right:0; font-size: 13px; font-weight: 950; color:#ffe2b1; }
.result-image-wrap {
  width: min(320px, 82%);
  min-height: 220px;
  margin: 0 auto 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,226,160,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.result-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-image-fallback {
  width: 100%;
  height: 100%;
  display:grid;
  place-items:center;
  font-size: 72px;
  background: radial-gradient(circle at 50% 30%, rgba(255,230,170,.18), transparent 38%), linear-gradient(135deg, rgba(181,52,44,.55), rgba(0,0,0,.18));
}
.result-rank { display:inline-flex; align-items:center; justify-content:center; min-width: 110px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #ffe6ae, #c88e42); color:#35190a; font-weight:1000; }
.result-modal h2 { margin: 15px 0 7px; color:#fff0bd; font-size: 32px; }
.result-modal p { color:#cbb88b; font-weight:900; }
.lastone-alert { margin: 12px auto 0; padding: 11px 14px; border-radius: 999px; background: rgba(183,42,34,.38); border:1px solid rgba(255,226,160,.35); color:#ffe7ad; font-weight:1000; }
.tear-guide {
  margin-top: 16px;
  color: #edd8aa;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}
.tear-progress {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}
.tear-progress span { color: #f3dfb2; font-weight: 900; letter-spacing: .06em; }
.tear-progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255,226,160,.26);
  background: linear-gradient(180deg, rgba(19,18,15,.72), rgba(5,5,4,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tear-progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b1c16, #b5342c 24%, #dca84e 62%, #fff1bf 100%);
  transition: width .14s ease;
  box-shadow: 0 0 16px rgba(239,180,71,.35);
}
.tear-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  border-radius: 20px;
}
.tear-canvas:active { cursor: grabbing; }
.result-modal .modal-actions .tool-btn {
  min-width: 170px;
  min-height: 46px;
  border: 1px solid rgba(205,154,73,.28);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,29,23,.95), rgba(8,8,6,.96));
  color: #f1dfb1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.22);
}
.result-modal .modal-actions .tool-btn.primary {
  background: linear-gradient(135deg, #ffe6ae, #d49543 52%, #8f281d);
  color: #41150d;
  border-color: rgba(255,226,160,.36);
}
.modal-actions { display:flex; justify-content:center; gap:10px; margin-top: 18px; }
.tool-modal { width: min(820px, 96vw); }
.tool-btn.active {
  border-color: rgba(255,226,160,.48);
  box-shadow: 0 0 0 1px rgba(255,226,160,.08) inset, 0 0 20px rgba(239,180,71,.14);
}
.game-fullscreen-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(181,52,44,.18), transparent 34%),
    linear-gradient(180deg, rgba(24,22,18,.99), rgba(7,7,6,.995));
}
.game-fullscreen-shell:fullscreen::backdrop {
  background: rgba(4, 3, 2, .96);
}
.game-fullscreen-shell.is-fullscreen {
  border-radius: 0;
}
.tool-modal h2, .settings-modal h2 { margin: 0 0 16px; color:#ffe2a2; }
.tool-form { display:grid; gap: 18px; }
.tool-form .inline { display:flex; flex-wrap:wrap; gap:10px; }
.tool-form label { color:#d6bd83; font-weight:900; display:grid; gap:6px; }
.tool-form input { height:38px; padding:0 10px; width:110px; }
.rank-view { display:grid; gap:10px; }
.big-number { min-height: 106px; display:grid; place-items:center; border-radius:18px; border:1px solid rgba(205,154,73,.28); background:rgba(0,0,0,.22); font-size: 46px; font-weight:1000; color:#ffe6ae; }
.cannon-stage, .roulette-stage { min-height: 330px; position:relative; overflow:hidden; border:1px solid rgba(205,154,73,.30); border-radius:20px; background: radial-gradient(circle at 50% 0%, rgba(205,154,73,.16), transparent 30%), linear-gradient(180deg, #191713, #070706); }
.cannon-barrel { position:absolute; left:56px; bottom:70px; width:170px; height:54px; border-radius: 18px 42px 42px 18px; background: linear-gradient(180deg, #5c5042, #171511); border:1px solid rgba(255,226,160,.28); box-shadow: inset 0 8px 14px rgba(255,255,255,.08); }
.cannon-barrel::before { content:""; position:absolute; left:-26px; bottom:-26px; width:80px; height:80px; border-radius:50%; background: radial-gradient(circle, #b78a42, #24160b 62%); border:1px solid rgba(255,226,160,.32); }
.cannon-ball { position:absolute; left:185px; bottom:83px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #fff, #d1a04f 30%, #6d261e 80%); opacity:0; }
.cannon-stage.fire .cannon-barrel { animation: recoil .45s ease; }
.cannon-stage.fire .cannon-ball { animation: fireball .9s ease-out; }
@keyframes recoil { 50%{ transform: translateX(-13px); } }
@keyframes fireball { 0%{opacity:1; transform:translate(0,0) scale(1)} 100%{opacity:0; transform:translate(510px,-150px) scale(.55)} }
.explosion { position:absolute; right:86px; top:60px; font-size:80px; opacity:.2; }
.result-balls { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:14px; }
.result-ball { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#2b1608; font-weight:1000; background:linear-gradient(135deg,#fff2bd,#d39c48); box-shadow:0 8px 18px rgba(0,0,0,.36); }
.result-name-ball {
  min-height: 52px;
  min-width: 180px;
  padding: 10px 18px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  color:#2b1608;
  font-weight:1000;
  background:linear-gradient(135deg,#fff2bd,#d39c48);
  box-shadow:0 8px 18px rgba(0,0,0,.36);
}
.result-name-ball.winner { background: linear-gradient(135deg, #ffe9b9, #efb347); transform: scale(1.04); }
.cannon-picker-app {
  --cp-line: rgba(255, 255, 255, 0.12);
  --cp-text: #f7f7fb;
  --cp-muted: #aeb6d7;
  --cp-accent: #ffd166;
  --cp-accent-2: #ff7a59;
  position: relative;
  width: 100%;
  min-height: min(78vh, 900px);
  height: min(78vh, 900px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 122, 89, 0.18), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(255, 209, 102, 0.16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(92, 107, 255, 0.18), transparent 38%),
    linear-gradient(135deg, #080a14 0%, #11182e 52%, #090b16 100%);
  color: var(--cp-text);
}
.cannon-picker-canvas-wrap {
  position: absolute;
  inset: 0;
}
#cannonPickerCanvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cannon-picker-topbar {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.cannon-picker-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: rgba(9, 12, 25, 0.62);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.cannon-picker-brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2));
  color: #1a1020;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.28);
}
.cannon-picker-brand-title {
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
}
.cannon-picker-brand-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--cp-muted);
}
.cannon-picker-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.cannon-picker-stat-pill {
  min-width: 112px;
  padding: 10px 14px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: rgba(9, 12, 25, 0.62);
  color: var(--cp-muted);
  text-align: center;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.cannon-picker-stat-pill strong {
  color: var(--cp-text);
  margin-left: 5px;
}
.cannon-picker-history-panel {
  position: absolute;
  top: 105px;
  right: 22px;
  z-index: 5;
  width: min(320px, calc(100% - 44px));
  max-height: calc(100% - 230px);
  padding: 18px;
  border: 1px solid var(--cp-line);
  border-radius: 22px;
  background: rgba(20, 25, 48, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
.cannon-picker-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cannon-picker-history-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.04em;
  color: #f7f7fb;
}
.cannon-picker-history-count {
  color: var(--cp-muted);
  font-size: 13px;
}
.cannon-picker-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 44dvh;
  overflow: auto;
  padding-right: 3px;
}
.cannon-picker-history-list::-webkit-scrollbar {
  width: 6px;
}
.cannon-picker-history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.cannon-picker-history-chip {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 850;
  color: #fff7d6;
  text-align: center;
  overflow-wrap: anywhere;
}
.cannon-picker-history-empty {
  grid-column: 1 / -1;
  padding: 26px 10px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 16px;
  color: var(--cp-muted);
  text-align: center;
  font-size: 14px;
}
.cannon-picker-controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.cannon-picker-btn {
  position: relative;
  min-width: 138px;
  padding: 15px 24px;
  border-radius: 999px;
  border: 0;
  color: #160e08;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff0a8 0%, #ffd166 42%, #ff9f43 100%);
  box-shadow: 0 16px 34px rgba(255, 159, 67, 0.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cannon-picker-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 20px 42px rgba(255, 159, 67, 0.36), inset 0 1px 0 rgba(255,255,255,.5);
}
.cannon-picker-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.cannon-picker-btn-secondary {
  color: var(--cp-text);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--cp-line);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
}
.cannon-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 36%, rgba(255, 209, 102, 0.10), transparent 28%), rgba(4, 6, 12, 0.74);
  backdrop-filter: blur(14px);
  transition: opacity .25s ease, visibility .25s ease;
}
.cannon-picker-overlay.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cannon-picker-setup-card {
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(28, 34, 64, 0.96), rgba(12, 16, 34, 0.96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}
.cannon-picker-setup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 209, 102, .26);
  border-radius: 999px;
  color: #ffe7a3;
  background: rgba(255, 209, 102, .08);
  font-size: 13px;
  font-weight: 750;
}
.cannon-picker-setup-card h1 {
  margin: 18px 0 8px;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1;
  letter-spacing: -0.07em;
  color: #fff;
}
.cannon-picker-setup-card p {
  margin: 0 0 24px;
  color: var(--cp-muted);
  line-height: 1.65;
  font-size: 14px;
}
.cannon-picker-field {
  margin-top: 15px;
}
.cannon-picker-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #dce2ff;
  font-size: 14px;
  font-weight: 760;
}
.cannon-picker-field small {
  color: var(--cp-muted);
  font-weight: 500;
}
.cannon-picker-textarea {
  width: 100%;
  min-height: 132px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  outline: none;
  color: var(--cp-text);
  background: rgba(255, 255, 255, 0.07);
  transition: border-color .15s ease, box-shadow .15s ease;
  resize: vertical;
  line-height: 1.6;
}
.cannon-picker-textarea:focus {
  border-color: rgba(255, 209, 102, .58);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, .1);
}
.cannon-picker-toggle-row {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.cannon-picker-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.cannon-picker-toggle strong {
  display: block;
  margin-bottom: 2px;
  color: #f4f6ff;
  font-size: 14px;
}
.cannon-picker-toggle span {
  color: var(--cp-muted);
  font-size: 12px;
}
.cannon-picker-switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}
.cannon-picker-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cannon-picker-switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .16s ease;
}
.cannon-picker-switch i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .16s ease;
}
.cannon-picker-switch input:checked + i {
  background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2));
}
.cannon-picker-switch input:checked + i::after {
  transform: translateX(22px);
}
.cannon-picker-error {
  min-height: 20px;
  margin: 12px 0 0;
  color: #ff5d73;
  font-size: 13px;
  font-weight: 700;
}
.cannon-picker-start-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.cannon-picker-start-row .cannon-picker-btn {
  flex: 1;
  border-radius: 16px;
}
.cannon-picker-result-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 26;
  display: none;
  min-width: min(430px, calc(100% - 44px));
  max-width: min(620px, calc(100% - 44px));
  padding: 26px 24px;
  border: 1px solid rgba(255, 209, 102, .28);
  border-radius: 28px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(255, 209, 102, .18), transparent 42%), rgba(11, 13, 26, .92);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  backdrop-filter: blur(18px);
  pointer-events: none;
}
.cannon-picker-result-pop.show {
  display: block;
  animation: resultIn .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.cannon-picker-result-label {
  color: var(--cp-muted);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
}
.cannon-picker-result-value {
  margin-top: 8px;
  font-size: clamp(42px, 8vw, 88px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -0.08em;
  color: #fff2b3;
  text-shadow: 0 0 36px rgba(255, 209, 102, .36);
  overflow-wrap: anywhere;
}
.cannon-picker-result-help {
  margin-top: 8px;
  color: var(--cp-muted);
  font-size: 14px;
  line-height: 1.6;
}
.cannon-picker-toast {
  position: absolute;
  left: 50%;
  top: 96px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 16, 32, .82);
  border: 1px solid var(--cp-line);
  box-shadow: 0 16px 50px rgba(0,0,0,.32);
  transform: translate(-50%, -10px);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.cannon-picker-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cannon-picker-app:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
}
.cannon-tool { display: grid; gap: 18px; }
.cannon-config-card,
.cannon-stage-card,
.cannon-history-card {
  border: 1px solid rgba(205,154,73,.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,160,.08), transparent 34%),
    linear-gradient(180deg, rgba(25,22,18,.96), rgba(7,7,6,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.18);
}
.cannon-config-card { padding: 18px; display: grid; gap: 14px; }
.cannon-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cannon-config-head h3,
.cannon-history-head h3 {
  margin: 0;
  color: #ffe7ad;
  font-size: 20px;
  letter-spacing: -.04em;
}
.cannon-config-head p,
.cannon-history-head p {
  margin: 7px 0 0;
  color: #c8b17e;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}
.cannon-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cannon-stat {
  min-width: 88px;
  padding: 11px 12px;
  border-radius: 18px;
  border: 1px solid rgba(205,154,73,.18);
  background: rgba(0,0,0,.18);
  text-align: center;
}
.cannon-stat b {
  display: block;
  color: #fff0bd;
  font-size: 26px;
  line-height: 1;
}
.cannon-stat small {
  display: block;
  margin-top: 6px;
  color: #cdb787;
  font-size: 12px;
  font-weight: 900;
}
.cannon-input {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(205,154,73,.22);
  background: rgba(7,7,6,.72);
  color: #fff0bd;
  resize: vertical;
  font-weight: 850;
  line-height: 1.55;
}
.cannon-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cannon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(205,154,73,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.16));
  color: #ffe6ae;
  font-weight: 900;
}
.cannon-chip strong { font-size: 14px; }
.cannon-chip small { color: #c9b07b; font-size: 12px; }
.cannon-chip.empty {
  min-height: 48px;
  border-style: dashed;
  color: #b79c67;
}
.cannon-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .78fr);
  gap: 18px;
  align-items: stretch;
}
.cannon-stage-card {
  padding: 18px;
  display: grid;
  gap: 16px;
}
.cannon-stage-top,
.cannon-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cannon-stage-kicker {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(181,52,44,.22);
  border: 1px solid rgba(255,226,160,.22);
  color: #ffd996;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .16em;
}
.cannon-stage-top strong {
  display: block;
  margin-top: 8px;
  color: #fff0bd;
  font-size: clamp(22px, 3.1vw, 32px);
  letter-spacing: -.05em;
}
.cannon-stage-counter,
.cannon-history-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(205,154,73,.22);
  background: rgba(0,0,0,.22);
  color: #d9c28f;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.cannon-canvas-wrap {
  position: relative;
  min-height: 480px;
  border-radius: 24px;
  border: 1px solid rgba(205,154,73,.18);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 20%, rgba(255,226,160,.12), transparent 22%),
    linear-gradient(180deg, #20120d, #060606);
}
.cannon-canvas {
  display: block;
  width: 100%;
  height: min(70vh, 560px);
}
.cannon-stage-overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,226,160,.24);
  background:
    linear-gradient(180deg, rgba(26,18,12,.88), rgba(7,7,6,.9)),
    radial-gradient(circle at 50% 0%, rgba(255,226,160,.08), transparent 36%);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
}
.cannon-stage-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe6ae, #d39442);
  color: #3f150c;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.cannon-stage-overlay strong {
  color: #fff0bd;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.cannon-stage-overlay small {
  color: #d8c18d;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 850;
}
.cannon-stage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cannon-history-card {
  padding: 18px;
  display: grid;
  gap: 16px;
}
.cannon-result-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(205,154,73,.18);
  background: rgba(0,0,0,.2);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cannon-result-card.winner {
  transform: translateY(-2px);
  border-color: rgba(255,226,160,.42);
  box-shadow: 0 0 0 1px rgba(255,226,160,.06) inset, 0 0 28px rgba(239,180,71,.12);
}
.cannon-result-kicker {
  color: #b79e69;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.cannon-result-card strong {
  color: #fff0bd;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.cannon-result-card small {
  color: #ceb887;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
}
.cannon-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 3px;
}
.cannon-history-grid::-webkit-scrollbar { width: 6px; }
.cannon-history-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(205,154,73,.24); }
.cannon-history-chip,
.cannon-history-empty {
  min-height: 74px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(205,154,73,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
}
.cannon-history-chip {
  display: grid;
  align-content: center;
  gap: 6px;
}
.cannon-history-chip span {
  color: #b99f6a;
  font-size: 12px;
  font-weight: 1000;
}
.cannon-history-chip strong {
  color: #fff0bd;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cannon-history-empty {
  display: grid;
  place-items: center;
  color: #b79c67;
  text-align: center;
  font-weight: 850;
}
.cannon-tool:fullscreen .cannon-tool-layout {
  min-height: calc(100vh - 220px);
}
.cannon-tool:fullscreen .cannon-canvas-wrap {
  min-height: calc(100vh - 310px);
}
.cannon-tool:fullscreen .cannon-canvas {
  height: calc(100vh - 310px);
}
.roulette-stage { display:grid; place-items:center; gap:18px; padding: 24px; }
.roulette-ring {
  width: min(290px, 74vw);
  height: min(290px, 74vw);
  border-radius: 50%;
  border: 12px solid rgba(210,159,77,.75);
  background: radial-gradient(circle at 50% 50%, rgba(255,235,180,.18), transparent 34%), rgba(0,0,0,.22);
  box-shadow: inset 0 0 40px rgba(255,255,255,.06), 0 0 34px rgba(210,159,77,.20);
  display:grid;
  place-items:center;
  position: relative;
  text-align:center;
  padding: 40px;
}
.roulette-ring span {
  position:absolute;
  width: 120px;
  color:#ffe7b0;
  font-size: 13px;
  font-weight: 900;
}
.roulette-ring span:nth-child(1) { top: 20px; left: 50%; transform: translateX(-50%); }
.roulette-ring span:nth-child(2) { top: 64px; right: 28px; }
.roulette-ring span:nth-child(3) { top: 50%; right: 12px; transform: translateY(-50%); }
.roulette-ring span:nth-child(4) { bottom: 64px; right: 28px; }
.roulette-ring span:nth-child(5) { bottom: 20px; left: 50%; transform: translateX(-50%); }
.roulette-ring span:nth-child(6) { bottom: 64px; left: 28px; }
.roulette-ring span:nth-child(7) { top: 50%; left: 12px; transform: translateY(-50%); }
.roulette-ring span:nth-child(8) { top: 64px; left: 28px; }
.roulette-ring.spin { animation: rouletteSpin 1.35s cubic-bezier(.18,.9,.28,1); }
@keyframes rouletteSpin { to { transform: rotate(1260deg); } }
.roulette-pointer { color:#ffe6ae; font-size: 28px; margin-top: -10px; }
.roulette-output {
  min-width: 180px;
  padding: 10px 18px;
  border-radius: 999px;
  background:linear-gradient(135deg,#ffe6ae,#c7893e);
  color:#2b1608;
  font-size:28px;
  font-weight:1000;
  text-align:center;
  overflow-wrap:anywhere;
}
.roulette-tool { display: grid; gap: 18px; }
.roulette-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  gap: 16px;
  align-items: stretch;
}
.roulette-config-card,
.roulette-stage-card,
.roulette-result-card {
  border: 1px solid rgba(205,154,73,.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(181,52,44,.16), transparent 38%),
    linear-gradient(180deg, rgba(24,22,18,.96), rgba(7,7,6,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  padding: 18px;
}
.roulette-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.roulette-config-head h3 {
  margin: 0 0 6px;
  color: #ffe7ad;
  font-size: 24px;
  letter-spacing: -.04em;
}
.roulette-config-head p {
  margin: 0;
  color: #c8b27f;
  font-size: 13px;
  line-height: 1.6;
}
.roulette-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.roulette-stat {
  min-width: 96px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(205,154,73,.2);
  background: rgba(0,0,0,.22);
}
.roulette-stat b {
  display: block;
  color: #fff0bd;
  font-size: 22px;
  line-height: 1;
}
.roulette-stat small {
  color: #a79268;
  font-size: 12px;
  font-weight: 900;
}
.roulette-input {
  width: 100%;
  min-height: 124px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(205,154,73,.24);
  background: rgba(8,8,6,.72);
  color: #fff2cb;
  line-height: 1.6;
  font-family: "Noto Sans KR", sans-serif;
}
.roulette-input:focus {
  outline: none;
  border-color: rgba(255,226,160,.44);
  box-shadow: 0 0 0 4px rgba(207,155,73,.12);
}
.roulette-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.roulette-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(205,154,73,.18);
  background: rgba(0,0,0,.24);
  color: #f5e6bf;
  font-size: 13px;
  font-weight: 800;
}
.roulette-chip b { color: #efb447; }
.roulette-chip.empty { color: #ab9670; }
.roulette-stage-card {
  display: grid;
  gap: 16px;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.roulette-wheel-zone {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.roulette-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.34));
}
.roulette-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 42px solid #ffe6ae;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.roulette-wheel-pointer::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -39px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff4d1;
}
.roulette-center-cap {
  position: absolute;
  width: 108px;
  height: 108px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff1c1, #d69a41);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 18px 34px rgba(0,0,0,.24);
  color: #4f170f;
  font-weight: 1000;
  letter-spacing: -.05em;
  cursor: pointer;
  z-index: 3;
}
.roulette-center-cap span { font-size: 19px; }
.roulette-stage-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.roulette-result-card {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.roulette-result-card.winner {
  border-color: rgba(255,226,160,.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 36px rgba(239,180,71,.18);
  transform: translateY(-2px);
}
.roulette-result-kicker {
  color: #b79e69;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.roulette-result-name {
  color: #fff0bd;
  font-size: clamp(30px, 4.8vw, 48px);
  line-height: 1.05;
  font-weight: 1000;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.roulette-result-sub {
  color: #cdb787;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}
.roulette-celebration {
  position: absolute;
  inset: 14px;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.roulette-celebration-glow {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,226,160,.24), transparent 26%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.52));
  opacity: 0;
  transition: opacity .18s ease;
}
.roulette-celebration.show .roulette-celebration-glow { opacity: 1; }
.roulette-celebration-card {
  position: relative;
  z-index: 2;
  min-width: min(300px, 74%);
  padding: 22px 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,226,160,.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,160,.18), transparent 38%),
    linear-gradient(180deg, rgba(33,18,12,.95), rgba(10,10,8,.96));
  box-shadow: 0 24px 54px rgba(0,0,0,.42);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .18s ease, transform .18s ease;
}
.roulette-celebration.show .roulette-celebration-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.roulette-celebration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe6ae, #efb447);
  color: #4c180f;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.roulette-celebration-card strong {
  display: block;
  margin-top: 14px;
  color: #fff0bd;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}
.roulette-celebration-card small {
  display: block;
  margin-top: 10px;
  color: #d2bb85;
  font-size: 14px;
  font-weight: 900;
}
.roulette-celebration-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.roulette-celebration-confetti span {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: var(--confetti, #ffe6ae);
  opacity: 0;
  transform: translate3d(0, -16px, 0) rotate(0deg);
}
.roulette-celebration.show .roulette-celebration-confetti span {
  animation: rouletteConfettiFall var(--duration, 1.8s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}
.result-celebration {
  position: absolute;
  inset: 14px;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.result-celebration-glow {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,226,160,.26), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5));
  opacity: 0;
  transition: opacity .18s ease;
}
.result-celebration.show .result-celebration-glow { opacity: 1; }
.result-celebration-card {
  position: relative;
  z-index: 2;
  min-width: min(320px, 78%);
  padding: 22px 22px 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,226,160,.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,226,160,.18), transparent 40%),
    linear-gradient(180deg, rgba(50,28,19,.94), rgba(13,11,9,.96));
  box-shadow: 0 24px 54px rgba(0,0,0,.42);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .18s ease, transform .18s ease;
}
.result-celebration.show .result-celebration-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.result-celebration.minimal .result-celebration-card { display: none; }
.result-celebration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe6ae, #efb447);
  color: #4c180f;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.result-celebration-card strong {
  display: block;
  margin-top: 14px;
  color: #fff0bd;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.04;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.result-celebration-card small {
  display: block;
  margin-top: 10px;
  color: #d2bb85;
  font-size: 14px;
  font-weight: 900;
}
.result-celebration-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.result-celebration-confetti span {
  position: absolute;
  top: -24px;
  display: grid;
  place-items: center;
  width: max(26px, var(--size, 30px));
  height: max(26px, var(--size, 30px));
  font-size: var(--size, 30px);
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, -16px, 0) rotate(0deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.result-celebration.show .result-celebration-confetti span {
  animation: rouletteConfettiFall var(--duration, 1.9s) ease-out forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes rouletteConfettiFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 0px), 360px, 0) rotate(var(--rotate, 360deg));
  }
}
.iframe-shell {
  border-radius: 20px;
  border: 1px solid rgba(205,154,73,.24);
  background: linear-gradient(180deg, rgba(24,22,18,.96), rgba(7,7,6,.98));
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.wp-roulette-iframe {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  border: 0;
  background: #0b0b0a;
}
.roulette-tool:fullscreen .roulette-tool-layout {
  min-height: calc(100vh - 220px);
}
.roulette-tool:fullscreen .roulette-wheel-zone {
  width: min(78vh, 900px);
}
.roulette-tool:fullscreen .roulette-result-card {
  min-height: calc(100vh - 320px);
}
.pinball-tool {
  display: grid;
  gap: 14px;
}
.pinball-stage-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pinball-tool:fullscreen .iframe-shell {
  min-height: calc(100vh - 140px);
}
.pinball-tool:fullscreen .wp-roulette-iframe {
  height: calc(100vh - 170px);
}
.batch-result-wrap { display: grid; gap: 14px; }
.batch-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(205,154,73,.22);
  background: rgba(0,0,0,.22);
}
.batch-result-head strong { color: #ffe7ad; font-size: 18px; }
.batch-result-head span { color: #d4bb84; font-weight: 900; }
.batch-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.batch-result-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(205,154,73,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
}
.batch-result-card.hot {
  border-color: rgba(255,226,160,.46);
  box-shadow: 0 0 0 1px rgba(255,226,160,.08) inset, 0 0 24px rgba(225, 163, 72, .12);
}
.batch-result-card img,
.batch-result-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(255,226,160,.22);
  overflow: hidden;
}
.batch-result-card img { object-fit: cover; background: rgba(0,0,0,.18); }
.batch-result-fallback {
  display: grid;
  place-items: center;
  font-size: 42px;
  background: radial-gradient(circle at 50% 30%, rgba(255,230,170,.18), transparent 38%), linear-gradient(135deg, rgba(181,52,44,.55), rgba(0,0,0,.18));
}
.batch-result-card strong { color: #ffe8b4; font-size: 15px; }
.batch-result-card span,
.batch-result-card small { color: #c8b27f; font-weight: 900; }
.batch-result-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #ffe8b4;
  font-size: 12px;
  font-weight: 1000;
}
.settings-modal { width: min(1180px, 97vw); }
.settings-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.settings-head p { color:#bda87a; margin:6px 0 0; }
.settings-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.setting-card { border:1px solid rgba(205,154,73,.25); border-radius:16px; padding:16px; background:rgba(0,0,0,.20); }
.setting-card.wide { grid-column:1 / -1; }
.setting-card h3 { margin:0 0 12px; color:#ffe0a1; }
.setting-card label { display:grid; gap:7px; color:#d1b983; font-weight:900; margin-bottom:11px; }
.setting-card input, .setting-card select { height:40px; padding:0 12px; }
.color-row { display:flex; gap:12px; flex-wrap:wrap; }
.color-row input { padding:0; width:72px; }
.muted-warning { color:#a99872; line-height:1.55; font-size:13px; }
.prize-editor { display:grid; gap:10px; }
.prize-row { display:grid; gap:10px; padding: 14px; border-radius: 16px; border:1px solid rgba(205,154,73,.16); background:rgba(255,255,255,.03); }
.prize-row-head { display:grid; gap:4px; }
.prize-row-head strong { color:#fff0bd; font-size:15px; }
.prize-row-head small { color:#b7a37c; font-size:12px; font-weight:800; line-height:1.5; }
.prize-row-main { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; align-items:end; }
.prize-row-extra { display:grid; grid-template-columns: 150px minmax(220px, 1fr) 110px 72px 56px; gap:8px; align-items:center; }
.prize-row input { min-width:0; }
.prize-row label { display:grid; gap:6px; margin:0; font-size:12px; color:#d8c18b; font-weight:900; }
.prize-row label input { width:100%; }
.ticket-number-field input[readonly] { color:#bca777; }
.prize-toggle { display:flex !important; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid rgba(205,154,73,.20); border-radius:12px; padding: 0 10px; background: rgba(0,0,0,.18); }
.file-chip {
  min-height: 40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(205,154,73,.30);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31,29,23,.92), rgba(8,9,8,.94));
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.prize-image-preview {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border:1px solid rgba(255,226,160,.32);
  overflow:hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,226,160,.16), transparent 40%), rgba(0,0,0,.22);
  display:grid;
  place-items:center;
}
.prize-image-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.prize-image-preview span {
  font-size: 30px;
}
.sticky-actions { position: sticky; bottom: -24px; padding:14px 0 0; background:linear-gradient(180deg, transparent, rgba(8,8,6,.96) 40%); }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 200; display:grid; gap:8px; }
.toast { min-width: 230px; padding: 13px 15px; border-radius: 13px; border:1px solid rgba(205,154,73,.36); background:rgba(13,13,10,.95); color:#ffe0a1; font-weight:900; box-shadow:0 18px 40px rgba(0,0,0,.38); }
@media (max-width: 1450px) {
  .top-hero { grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.2fr) minmax(220px, .9fr) minmax(240px, 1fr) 100px; }
  .dashboard-grid { grid-template-columns: 300px minmax(650px, 1fr) 330px; }
  .tool-btn, .ghost-button { padding: 10px 11px; }
}
@media (max-width: 1180px) {
  .top-hero, .control-deck, .dashboard-grid { grid-template-columns: 1fr; }
  .top-hero { grid-template-areas: "brand" "price" "progress" "live" "settings"; }
  .right-tools { justify-content:flex-start; }
  .board-stage { min-height:auto; }
  .board-bottom-bar,
  .page-controls { justify-content:flex-start; }
  .draw-ticket-button { width:min(560px, 90%); }
  .cannon-tool-layout { grid-template-columns: 1fr; }
  .cannon-canvas-wrap { min-height: 420px; }
  .cannon-canvas { height: min(62vh, 500px); }
  .roulette-tool-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding: 6px; }
  .ticket { min-height:50px; }
  .brand-title { font-size: 24px; }
  .stage-head { align-items:flex-start; flex-direction:column; }
  .settings-grid { grid-template-columns:1fr; }
  .prize-row-main,
  .prize-row-extra { grid-template-columns:1fr; }
  .queue-item { align-items:flex-start; flex-direction:column; }
  .queue-actions { width:100%; justify-content:flex-start; }
  .ticket-grid { gap: 6px; }
  .jump-box { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .jump-box input { width: 100%; }
  .page-summary { width: 100%; }
  .batch-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cannon-config-head,
  .cannon-stage-top,
  .cannon-history-head { flex-direction: column; }
  .cannon-stats { width: 100%; }
  .cannon-stat { flex: 1; }
  .cannon-canvas-wrap { min-height: 360px; }
  .cannon-canvas { height: 360px; }
  .cannon-stage-overlay {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px;
  }
  .cannon-stage-actions { flex-direction: column; width: 100%; }
  .cannon-stage-actions .tool-btn { width: 100%; }
  .roulette-config-head { flex-direction: column; }
  .roulette-stats { width: 100%; }
  .roulette-stat { flex: 1; }
  .roulette-stage-actions { flex-direction: column; width: 100%; }
  .roulette-stage-actions .tool-btn { width: 100%; }
  .roulette-center-cap { width: 88px; height: 88px; }
  .roulette-center-cap span { font-size: 16px; }
  .roulette-wheel-pointer { border-left-width: 17px; border-right-width: 17px; border-top-width: 34px; }
}
@media (max-width: 760px) {
  .cannon-picker-topbar {
    top: 12px;
    left: 12px;
    right: 12px;
    align-items: flex-start;
  }
  .cannon-picker-brand {
    padding: 10px 12px;
  }
  .cannon-picker-brand-sub {
    display: none;
  }
  .cannon-picker-stats {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .cannon-picker-stat-pill {
    min-width: auto;
    padding: 8px 11px;
    font-size: 12px;
  }
  .cannon-picker-history-panel {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 92px;
    width: auto;
    max-height: 178px;
    padding: 14px;
  }
  .cannon-picker-history-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 96px;
  }
  .cannon-picker-controls {
    bottom: 18px;
    width: calc(100% - 24px);
  }
  .cannon-picker-controls .cannon-picker-btn {
    min-width: 0;
    flex: 1;
    padding: 14px 16px;
  }
  .cannon-picker-setup-card {
    padding: 22px;
  }
}
@media (max-width: 480px) {
  .queue-box { max-height: 220px; }
}