:root {
  color-scheme: dark;
  --bg: #12091f;
  --panel: #251337;
  --line: #5f4270;
  --text: #fff5e3;
  --muted: #d7c9e3;
  --gold: #efc979;
  --pale: #ffe5a6;
  --purple-dark: #1a0e2a;
  --gold-border: #85643d;
  --gold-sheen: linear-gradient(115deg, #fff1bd, #eac174 54%, #cc9851);
  --mono: ui-monospace, "Cascadia Mono", monospace;
  --display: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--text);
  background: radial-gradient(ellipse 42rem 27rem at 50% 10rem, #522574 0%, transparent 94%), radial-gradient(ellipse 36rem 30rem at 92% 40%, #241039, transparent), var(--bg);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pale); outline-offset: 4px; }

.shell { width: min(1080px, calc(100% - 32px)); margin-inline: auto; }
.topbar { border-bottom: 1px solid #a7784948; background: linear-gradient(100deg, #180b2b, #241036 54%, #1a0d2b); }
.topbar-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand, .profile-brand { display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; }
.brand { width: 110px; height: 72px; flex: none; }
.profile-brand { width: 125px; height: 82px; margin: 0 auto 6px; }
.brand-logo { display: block; width: 100%; height: auto; }
.history-link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; color: var(--muted); font-size: .86rem; text-decoration: none; }
.history-link:hover, .history-link span { color: var(--pale); }
.topbar nav { display: flex; align-items: center; gap: clamp(10px, 4vw, 26px); }

.intro { position: relative; isolation: isolate; overflow: hidden; padding: clamp(37px, 6vw, 68px) 8px clamp(28px, 5vw, 47px); text-align: center; }
.intro::before, .intro::after { content: ""; position: absolute; inset: 14% 12% 11%; z-index: -1; border: 1px solid #ddad6945; border-radius: 50%; mask-image: linear-gradient(85deg, #000, transparent 36%, transparent 64%, #000); }
.intro::before { transform: rotate(-8deg); }
.intro::after { transform: rotate(8deg) scale(.89); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--pale); font-size: .71rem; font-weight: 760; letter-spacing: .12em; }
.signal { display: inline-block; width: 6px; aspect-ratio: 1; flex: none; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 11px #f7c78170; }
.eyebrow-line { width: clamp(12px, 4vw, 32px); height: 1px; background: #d2a15b8c; }
.demo { display: inline-block; padding: 6px 10px; border: 1px solid #946b48; border-radius: 99px; color: var(--pale); background: #382243; font-size: .76rem; font-weight: 700; white-space: nowrap; }
h1, h2, p { margin: 0; }
h1 { margin-top: 12px; font: 900 clamp(3.1rem, 9vw, 5.6rem)/1.08 var(--display); letter-spacing: .025em; }
.intro h1 { color: var(--pale); background: linear-gradient(180deg, #fff9d9 8%, #f2d289 58%, #d7a25b 96%); background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 9px #2a0b33a6); }
.intro p { max-width: 56ch; margin: 15px auto 0; color: var(--muted); font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.75; }

.game-grid { display: grid; gap: 16px; }
.machine, .status-panel, .rules, .rewards { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(155deg, #2d1842, var(--panel) 70%); box-shadow: 0 13px 28px #0e051947; }
.machine {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 4vw, 34px);
  background: radial-gradient(ellipse 78% 62% at 50% 0%, #563072 0%, transparent 96%), linear-gradient(165deg, #331a4b, #231133 90%);
  border-color: #98734f;
  box-shadow: 0 16px 38px #0b04166e, inset 0 0 0 4px #1b0f294a;
}
.machine::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.machine-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: clamp(16px, 3vw, 28px); }
h2 { font-size: 1.21rem; font-weight: 830; letter-spacing: .025em; }
.machine-id { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #d8ac6f55; border-radius: 99px; color: var(--pale); font-size: .72rem; white-space: nowrap; }
.machine-id .signal { width: 5px; }
.range-display { position: relative; padding: clamp(16px, 4vw, 30px); background: radial-gradient(ellipse at 50% 110%, #3c2052, #170c25 75%); border: 1px solid #997752; border-radius: 10px; text-align: center; box-shadow: inset 0 0 22px #09041080; }
.range-display::before { content: ""; position: absolute; inset: 5px; border: 1px solid #b58d5a45; border-radius: 7px; pointer-events: none; }
.range-display.hit { border-color: var(--gold); box-shadow: 0 0 24px #f0bd6145; }
.range-readout { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(9px, 3vw, 22px); color: #ffe6a7; font: 700 clamp(2rem, 8.5vw, 5rem)/1.02 Georgia, serif; text-shadow: 0 0 20px #f9c27145; font-variant-numeric: lining-nums tabular-nums; }
.range-divider { color: #c69454; font-size: .64em; }
.range-line { height: 3px; margin-top: 17px; position: relative; border-radius: 4px; background: #58376b; }
.range-line span { height: 100%; position: absolute; background: var(--gold-sheen); border-radius: inherit; min-width: 3px; box-shadow: 0 0 10px #f3c67e70; transition: left .2s, width .2s; }
.guess-form { margin-top: clamp(16px, 3vw, 24px); }
.guess-form label, .guess-label, .admin label { display: block; margin-bottom: 8px; font-weight: 800; }
.guess-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1.15fr); gap: 9px; }
.guess-controls input, .admin textarea { min-width: 0; min-height: 52px; width: 100%; padding: 8px 12px; color: var(--text); background: var(--purple-dark); border: 1px solid #896798; border-radius: 7px; font: 700 1.05rem/1.4 var(--mono); }
.guess-controls input::placeholder { color: #b4a2c1; }
.guess-controls input[aria-invalid="true"] { border-color: #ff9b9d; }
.challenge-controls { grid-template-columns: minmax(0, 1.55fr) minmax(115px, .85fr); align-items: center; gap: clamp(9px, 2vw, 18px); }
.guess-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, 1.5vw, 11px); }
.guess-digits input { height: clamp(52px, 7vw, 64px); padding: 4px; background: #3c2351; border: 1px solid #a181aa; border-radius: 10px; color: var(--pale); font-size: clamp(1.5rem, 4vw, 2rem); text-align: center; caret-color: var(--gold); }
.guess-digits input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: #503266; }
.guess-digits input[aria-invalid="true"]:focus { outline-color: #ff9b9d; }
@media (max-width: 480px) {
  .challenge-controls { grid-template-columns: 1fr; }
}
.guess-form .small { margin-top: 7px; }
.field-error { color: #ffacad; font-size: .9rem; line-height: 1.5; }
.field-error:not(:empty) { margin-top: 9px; padding: 8px 10px; border-left: 2px solid #ff9b9d; background: #3e1b32; }
.profile-open { margin-top: 16px; }
.profile-dialog { width: min(465px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: clamp(22px, 5vw, 34px); border: 1px solid #c3945a; border-radius: 16px; background: radial-gradient(ellipse at 50% -5%, #502568, transparent 72%), #29163c; color: var(--text); box-shadow: 0 22px 62px #07020dd9, inset 0 0 0 4px #d6a36b20; }
.profile-dialog::backdrop { background: #10071cdc; backdrop-filter: blur(4px); }
.profile-dialog h2 { font-size: clamp(1.18rem, 4vw, 1.55rem); line-height: 1.42; }
#profile-dialog h2, .profile-kicker, #nickname-help { text-align: center; }
.victory-dialog { text-align: center; background: radial-gradient(ellipse at 50% 8%, #563273, transparent 61%), #29163c; }
.victory-dialog h2 { color: var(--pale); font: 800 clamp(1.6rem, 6vw, 2.2rem)/1.25 var(--display); }
.victory-dismiss { position: absolute; top: 10px; right: 12px; min-height: 42px; padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: .84rem; }
.victory-dismiss:hover { background: #4d3465; color: var(--text); }
.victory-art { display: grid; position: relative; place-items: center; width: min(100%, 220px); height: 102px; margin: 6px auto 10px; }
.victory-mark { display: grid; z-index: 1; place-items: center; width: 64px; aspect-ratio: 1; border: 1px solid #f7d488; border-radius: 50%; background: radial-gradient(circle at 35% 20%, #664385, #3a2155 78%); box-shadow: 0 0 20px #ecc77b44, inset 0 0 0 4px #ddb46c2e; color: var(--pale); font-size: 2rem; }
.victory-spark { position: absolute; top: 50%; left: 50%; width: 7px; aspect-ratio: 1; background: var(--gold-sheen); transform: translate(var(--x), var(--y)) rotate(45deg); box-shadow: 0 0 10px #eac07155; }
.victory-spark:nth-child(1) { --x: -77px; --y: -25px; }
.victory-spark:nth-child(2) { --x: 63px; --y: -33px; }
.victory-spark:nth-child(3) { --x: -60px; --y: 22px; }
.victory-spark:nth-child(4) { --x: 79px; --y: 10px; }
.victory-spark:nth-child(5) { --x: -36px; --y: -43px; width: 4px; }
.victory-spark:nth-child(6) { --x: 40px; --y: 35px; width: 4px; }
.victory-dialog.celebrating[open] .victory-mark { animation: victory-pop .55s cubic-bezier(.18,.7,.31,1.25) both; }
.victory-dialog.celebrating[open] .victory-spark { animation: victory-burst .75s cubic-bezier(.12,.76,.35,1) both; }
@keyframes victory-pop {
  from { opacity: .25; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes victory-burst {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(45deg); }
}
#victory-description { margin-top: 9px; }
.victory-coupon { margin-top: 16px; padding: 12px; border: 1px solid var(--gold-border); border-radius: 8px; background: var(--purple-dark); }
.victory-coupon code { display: block; margin: 6px 0 12px; color: var(--pale); font: 800 clamp(1.04rem, 4vw, 1.34rem)/1.35 var(--mono); user-select: all; overflow-wrap: anywhere; }
.victory-actions { display: grid; justify-items: stretch; gap: 8px; }
.victory-actions .redeem-link { justify-content: center; }
#victory-redeem:not([hidden]) { animation: victory-reveal .25s ease-out both; }
@keyframes victory-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.victory-rewards { margin-top: 15px; }
#nickname-help { margin-top: 9px; }
.profile-form .guess-controls { grid-template-columns: minmax(0, 1fr); }
.profile-form .spin { margin-top: 12px; }
.current-profile { margin-top: 16px; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.current-profile strong { color: var(--pale); }
.spin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 10px 15px;
  background: var(--gold-sheen);
  color: #23112a;
  border: 1px solid #fce5a5;
  border-radius: 7px;
  box-shadow: 0 4px 12px #0e051b57, inset 0 -2px #8f5a3b3b;
  font-weight: 900;
  letter-spacing: .09em;
  cursor: pointer;
  transition: background 140ms, transform 140ms;
}
.spin:not(:disabled):hover { background: linear-gradient(115deg, #fff6d4, #f6ce83 54%, #dfa95f); }
.spin:not(:disabled):active { transform: translateY(1px); }
.spin:disabled { cursor: default; color: #d2c3dc; background: #533962; border-color: #81698c; box-shadow: none; }
.result { margin-top: 12px; min-height: 1.45em; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.result.success { color: var(--pale); }
.answer-reveal:not(:empty) { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--gold-border); border-radius: 7px; background: var(--purple-dark); color: var(--pale); font-size: .95rem; font-weight: 760; }

.side { display: grid; align-content: start; gap: 16px; }
.status-panel, .rules, .rewards { padding: clamp(16px, 3vw, 25px); }
.index { color: var(--pale); margin-bottom: 8px; font-size: .69rem; font-weight: 740; line-height: 1.4; letter-spacing: .12em; }
.count { margin-top: 6px; color: var(--muted); font: 1.05rem/1 var(--mono); }
.count strong { color: var(--pale); font: 700 3.6rem/1 Georgia, serif; margin-right: 9px; }
.meter { display: flex; gap: 6px; margin: 13px 0 10px; }
.meter span { flex: 1; height: 5px; border-radius: 2px; background: #654875; }
.meter .filled { background: var(--gold-sheen); }
.small, .rules li, .empty { color: var(--muted); font-size: .86rem; line-height: 1.65; }
.rules ol { margin: 9px 0 0; padding-left: 1.4rem; }
.rules li + li { margin-top: 4px; }
.rules li::marker { color: var(--pale); font-family: var(--mono); }

.rewards { margin-top: 16px; scroll-margin-top: 12px; }
#rewards { background: radial-gradient(ellipse 55% 110% at 95% 0%, #422759, transparent), linear-gradient(150deg, #301c45, var(--panel)); border-color: #876249; }
.owner-gate h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.5rem); letter-spacing: -.03em; }
.owner-gate .small { margin-block: 10px; }
.rewards-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.empty { margin-top: 14px; }
.reward-notice:not(:empty) { margin-top: 12px; color: var(--pale); font-size: .86rem; }
.reward-list { padding: 0; margin: 0; list-style: none; }
.reward-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 15px; border-top: 1px solid var(--line); }
.reward-item:first-child { margin-top: 15px; }
.reward-item:last-child { padding-bottom: 1px; }
.reward-info { display: grid; gap: 4px; }
.reward-date { color: var(--muted); font-size: .8rem; }
.reward-action { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.reward-code { min-width: 0; max-width: 100%; color: var(--pale); font: 750 .84rem/1.3 var(--mono); padding: 7px 8px; background: var(--purple-dark); border: 1px solid var(--line); border-radius: 5px; overflow-wrap: anywhere; }
.claim, .text-button { min-height: 42px; padding: 6px 12px; border: 1px solid var(--gold-border); border-radius: 6px; background: transparent; color: var(--pale); cursor: pointer; font-size: .84rem; }
.claim:not(:disabled):hover, .text-button:not(:disabled):hover { background: #503365; }
.redeem-link { display: inline-flex; align-items: center; text-decoration: none; }
.claim:disabled, .text-button:disabled { color: var(--muted); cursor: default; }
.text-button { margin-top: 9px; }
.admin-totals { display: flex; flex-wrap: wrap; gap: 12px; margin: 17px 0; }
.admin-totals div { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px; }
.admin-totals dt { font-size: .8rem; color: var(--muted); }
.admin-totals dd { margin: 4px 0 0; font: 800 1.35rem/1 var(--mono); }
.admin-privacy { margin-top: 8px; }
.admin-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 15px; }
.admin-filter label { margin: 0; font-size: .9rem; }
.admin-filter input { min-height: 42px; padding: 6px 10px; background: var(--purple-dark); border: 1px solid #896798; border-radius: 5px; color: var(--text); font: inherit; }
.admin-details { display: grid; gap: 18px; }
.admin-details h3 { margin: 0 0 8px; font-size: 1rem; }
.admin-details section, .admin-details form { min-width: 0; border-top: 1px solid var(--line); padding-top: 15px; }
.winner-info { min-width: 0; overflow-wrap: anywhere; }
.winner-id { font-family: var(--mono); }
.admin textarea { margin-block: 8px; resize: vertical; }
.admin-inventory { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.admin-inventory summary { width: fit-content; min-height: 34px; color: var(--pale); font-weight: 800; cursor: pointer; }
.inventory-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inventory-tools .inventory-select { display: inline-flex; align-items: center; gap: 5px; min-height: 42px; margin: 0 4px 0 0; color: var(--muted); font-size: .86rem; }
.admin-inventory input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold); }
.inventory-list { max-height: 18rem; overflow-y: auto; padding: 0; margin: 10px 0 0; list-style: none; }
.inventory-list:empty { display: none; }
.inventory-list li { border-top: 1px solid var(--line); }
.inventory-list .inventory-code { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 5px 8px; margin: 0; cursor: pointer; overflow-wrap: anywhere; }
.inventory-code code { min-width: 0; font: 700 .87rem/1.45 var(--mono); }
#inventory-count { margin-top: 8px; }
.inventory-confirm-message { margin-top: 9px; }
.inventory-tools [value="delete"] { border-color: #ff9b9d; color: #ffb3b4; }
.reward-item small { color: var(--muted); }
.reward-action { min-width: 0; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding-block: 21px 28px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.footer span span { color: var(--pale); }

@media (min-width: 780px) {
  .shell { width: min(1080px, calc(100% - 56px)); }
  .game-grid { grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); }
  .side { grid-template-rows: auto 1fr; }
  .admin-details { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .victory-dialog.celebrating[open] .victory-mark, .victory-dialog.celebrating[open] .victory-spark,
  #victory-redeem:not([hidden]) { animation: none; }
}