:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #162b43; background: #f3f7fc; --accent: #2563a9; --muted: #587087; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 12% 10%, #e6f0fc 0, transparent 45%), radial-gradient(ellipse at 95% 80%, #eaf3fb 0, transparent 40%), #f3f7fc; min-height: 100vh; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #3489b7; outline-offset: 4px; }
[hidden] { display: none !important; }
.draw-shell { width: min(1160px, calc(100% - 64px)); margin: auto; }
.draw-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; }
.draw-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; font-weight: 750; letter-spacing: -.025em; }
.draw-brand img { object-fit: contain; }
.draw-brand small { display: block; margin-top: 4px; color: #587087; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.header-actions { display: flex; align-items: center; gap: 13px; }
.live-pill, .admin-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #4a718c; }
.live-pill > span, .sync-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #3489b7; box-shadow: 0 0 0 4px #e6f1fa; }
.admin-pill { padding: 8px 10px; background: #e7f1fb; border-radius: 9px; color: #2563a9; font-weight: 700; }
.sign-in { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 1px solid #c5d9ec; border-radius: 12px; text-decoration: none; color: #2563a9; font-size: 12px; font-weight: 700; background: #ffffffb8; transition: background .15s; }
.sign-in:hover { background: #edf5fe; }
.sign-in svg { width: 17px; height: 17px; }
.page-intro { padding: 24px 0 30px; }
.draw-intro-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.draw-intro-copy { min-width: 0; }
.lucky-vote-actions { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }
.lucky-vote-link, .lucky-vote-results-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 11px 13px; border: 1px solid #c7d9e9; border-radius: 11px; font-size: 11px; font-weight: 700; color: #32658e; background: #ffffffd9; text-decoration: none; }
.lucky-vote-link { color: #fff; background: #2563a9; border-color: #2563a9; }
.lucky-vote-link:hover { background: #1e528d; } .lucky-vote-results-link:hover { background: #e8f2fc; }
.lucky-vote-actions svg { width: 18px; height: 18px; flex-shrink: 0; }
.draw-vote-notice { margin: 0 0 22px; padding: 15px 18px; border: 1px solid #bedfce; border-radius: 13px; background: #edf8f2; color: #2f6c50; font-size: 12px; line-height: 1.8; }
.draw-vote-notice a { margin-left: 9px; color: #2563a9; text-underline-offset: 3px; }
@media (max-width:760px) { .draw-intro-heading { flex-direction: column; align-items: flex-start; gap: 0; } .lucky-vote-actions { align-self: flex-end; flex-wrap: wrap; margin: 0 0 20px; gap: 8px; } }
@media (max-width:380px) { .lucky-vote-link, .lucky-vote-results-link { padding: 10px; font-size: 10px; } }
.eyebrow { margin: 0 0 12px; color: #376483; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.eyebrow > span { margin-right: 6px; }
h1 { margin: 0; font-size: clamp(38px, 5vw, 56px); letter-spacing: -.06em; line-height: 1.08; font-weight: 760; }
h1 > span { color: #336e9f; }
.intro-text { margin: 15px 0 20px; color: #4a6178; font-size: 14px; line-height: 1.6; }
.draw-rules { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11px; color: #50657c; }
.draw-rules > span { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 5px 10px; border: 1px solid #d4e2ef; border-radius: 8px; background: #ffffffa6; }
.draw-rules b { color: #336e9f; font-size: 10px; }
.draw-rules .random-rule { padding-left: 4px; border: 0; background: none; color: #587087; }
.draw-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 26px; align-items: start; }
.jar-card, .results-card, .participants-card { border: 1px solid #fff; border-radius: 24px; background: #ffffffd9; box-shadow: 0 10px 42px #22436e09, 0 1px 3px #22436e06; }
.jar-card { position: relative; overflow: hidden; padding: 23px 26px 20px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-top h2 { margin: 0; font-size: 14px; letter-spacing: -.02em; font-weight: 700; }
.remaining-label { color: #587087; font-size: 11px; }
.drawing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.zoom-controls { display: inline-flex; align-items: center; border: 1px solid #cbddec; border-radius: 10px; background: #f4f8fc; overflow: hidden; }
.zoom-controls button { min-width: 36px; height: 36px; border: 0; background: transparent; color: #2563a9; cursor: pointer; font-size: 19px; }
.zoom-controls button:hover:not(:disabled) { background: #deecfa; }
.zoom-controls button:disabled { color: #a8bdcf; }
.zoom-controls #zoom-reset { min-width: 64px; font-size: 11px; font-weight: 700; border-inline: 1px solid #d7e4ef; }
.zoom-controls button:focus-visible { outline-offset: -3px; }
.maximize-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 1px solid #cbddec; border-radius: 10px; color: #2563a9; background: #f4f8fc; font-size: 11px; font-weight: 700; cursor: pointer; }
.maximize-button:hover { background: #deecfa; }
.maximize-button svg { width: 16px; height: 16px; }
.restore-symbol { display: none; }
.drawing-viewport { display: flex; align-items: flex-start; overflow: auto; height: 500px; width: 100%; margin-top: 4px; border-radius: 14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b4cde3 transparent; }
.drawing-viewport:focus-visible { outline: 2px solid #3489b7; outline-offset: -2px; }
.drawing-zoom-space { position: relative; flex: 0 0 auto; margin: auto; width: 510px; height: 500px; }
.draw-stage { position: absolute; top: 0; left: 0; width: 510px; height: 500px; transform-origin: top left; }
.stage-halo { position: absolute; left: 50%; top: 23px; transform: translateX(-50%); width: 91%; aspect-ratio: 1; max-height: 420px; border-radius: 50%; background: radial-gradient(ellipse, #e5f0fb80, #f3f8fd60 65%, transparent 70%); }
.stage-spark { position: absolute; color: #b0cce5; font-size: 27px; }
.spark-one { top: 58px; right: 16px; transform: rotate(15deg); }
.spark-two { top: 318px; left: 4px; font-size: 35px; color: #c1d9ed; }
.jar-art { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); width: 100%; max-width: 460px; aspect-ratio: 460 / 400; }
.jar-glass { position: absolute; inset: 12% 9% 8%; border: 2px solid #a9c8e1; border-bottom-width: 4px; border-radius: 70px 70px 88px 88px; background: linear-gradient(105deg, #edf6ff80, #ffffff16 32%, #d3e8f91c 73%, #8db5d828); box-shadow: inset 7px 0 10px #7aa6cc15, inset -6px 0 10px #6896bf0e, 0 18px 22px -20px #4c7fa660; }
.jar-neck { position: absolute; left: 32%; top: 5%; width: 36%; height: 12%; background: linear-gradient(90deg, #d3e5f551, #ffffffa6 16%, #ffffff29 76%, #aecce566); border: 2px solid #afcde4; border-bottom: 0; border-radius: 10px 10px 0 0; }
.jar-rim { position: absolute; z-index: 4; left: 31%; top: 3.6%; width: 38%; height: 5%; border: 2px solid #a1c2de; border-radius: 50%; background: linear-gradient(#fff, #e6f0f9); box-shadow: inset 0 3px 1px #fff, 0 3px 0 #c1d9ed; }
#staff-balls { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.glass-shine { position: absolute; z-index: 2; left: 12.2%; top: 21%; width: 13px; height: 54%; border-radius: 50%; background: linear-gradient(#fff0, #ffffffbd 22%, #ffffff8f 65%, #fff0); transform: rotate(1deg); pointer-events: none; }
.glass-glint { position: absolute; z-index: 2; right: 12%; top: 26%; width: 3px; height: 35%; border-radius: 50%; background: #ffffffc7; pointer-events: none; }
.jar-base { position: absolute; z-index: 3; left: 12%; bottom: 6.5%; width: 76%; height: 6.8%; border-radius: 8px 8px 18px 18px; background: linear-gradient(#86afd1, #4f85b0); box-shadow: inset 0 3px #c4daeb, 0 10px 15px -9px #396a9458; }
.jar-gate { position: absolute; z-index: 4; left: 42%; bottom: 1%; width: 16%; height: 13%; border-radius: 15px 15px 25px 25px; background: linear-gradient(90deg, #5489b5, #b7d4e9 35%, #7da9cc); border: 1px solid #6898bd; box-shadow: inset 0 4px 5px #426e9440, 0 6px 10px #548bb525; }
.jar-gate span { display: block; width: 66%; height: 40%; margin: 17% auto 0; background: #294f70; border-radius: 50% 50% 40% 40%; box-shadow: inset 0 4px 7px #163d5e40, 0 2px #cbdfeecc; }
.revealed-ball { position: absolute; z-index: 5; left: 50%; top: 365px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; padding: 7px; transform: translate(-50%, 30px); border: 1px solid #9fc4e5; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #f6fbff, #c6e1f5 60%, #91bade); box-shadow: inset -4px -6px 8px #5689b920, inset 3px 3px 5px #ffffffa6, 0 10px 18px #4879a325; text-align: center; }
.revealed-ball > span { font-size: 29px; font-weight: 780; letter-spacing: -.06em; line-height: 1; color: #205584; }
.revealed-ball > b { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; color: #2e608c; font-weight: 650; line-height: 1.15; }
.revealed-ball.rolling { animation: roll-out 1.05s cubic-bezier(.3,.6,.35,1) both; }
.jar-art.mixing { animation: jar-mix .28s ease-in-out infinite alternate; }
.stage-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; color: #50657c; font-size: 12px; }
.draw-controls { display: flex; gap: 10px; margin-top: 18px; }
@media (max-width: 620px) {
    .draw-controls { flex-wrap: wrap; }
    .draw-controls .draw-button { flex-basis: 100%; }
    .draw-controls .auto-button { flex: 1; min-width: 0; }
}
.draw-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.confirm-order-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 11px; border: 1px solid #2563a9; border-radius: 10px; background: #2563a9; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.confirm-order-button:disabled { opacity: .45; cursor: not-allowed; }
.order-page-link { flex-basis: 100%; color: #336e9f; font-size: 11px; text-align: center; text-decoration: none; }
.order-confirm-status { flex-basis: 100%; margin: 0; color: #32684e; font-size: 11px; line-height: 1.7; text-align: center; }
.order-confirm-status a { color: #2563a9; text-underline-offset: 3px; }
.export-button, .reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid #cbddec; border-radius: 10px; background: #f4f8fc; color: #2563a9; font-size: 11px; font-weight: 650; text-decoration: none; cursor: pointer; }
.export-button svg, .reset-button svg { width: 16px; height: 16px; }
.export-button:hover { background: #deecfa; }
.export-button[aria-disabled="true"], .reset-button:disabled { opacity: .5; cursor: not-allowed; }
.reset-button { color: #915048; border-color: #e1d4d1; background: #fffaf8; }
.reset-button:hover:not(:disabled) { background: #faeee9; }
.fast-draw .revealed-ball.rolling { animation-duration: .105s; }
.fast-draw .jar-art.mixing { animation-duration: .028s; }
.fast-draw .result-row { animation-duration: .035s; }
.draw-button, .auto-button { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .16s, box-shadow .16s; }
.draw-button { flex: 1; background: #2563a9; color: #fff; box-shadow: 0 5px 13px #2563a927; }
.draw-button svg { width: 19px; height: 19px; }
.draw-button:hover:not(:disabled) { background: #1d528d; box-shadow: 0 5px 18px #2563a93b; }
.auto-button { padding: 0 17px; border: 1px solid #cbddec; background: #edf5fe; color: #336e9f; min-width: 105px; }
.auto-button:hover:not(:disabled), .auto-button.is-active { background: #deecfa; color: #1d528d; }
button:disabled { cursor: not-allowed; }
.draw-button:disabled { background: #a8c4df; box-shadow: none; }
.auto-button:disabled { opacity: .6; }
.access-note { margin: 13px 0 0; font-size: 10px; line-height: 1.6; color: #587087; text-align: center; }
.results-column { min-width: 0; }
.results-card { padding: 24px 22px 0; overflow: hidden; }
.result-count { padding: 5px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #336e9f; background: #eaf3fc; font-variant-numeric: tabular-nums; }
.progress-track { margin-top: 20px; height: 4px; border-radius: 10px; overflow: hidden; background: #e3edf6; }
.progress-track > span { display: block; height: 100%; width: 0; background: #548fbd; border-radius: inherit; transition: width .4s; }
.results-empty { text-align: center; padding: 54px 12px 56px; }
.results-empty > span { display: block; color: #aac8e2; font-size: 54px; line-height: 1; }
.results-empty h3 { font-size: 13px; color: #506b86; font-weight: 650; margin: 18px 0 9px; }
.results-empty p { max-width: 220px; margin: 0 auto; font-size: 11px; line-height: 1.8; color: #668096; }
.results-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--result-rows, 1), minmax(0, 1fr)); column-gap: 12px; list-style: none; margin: 16px 0 17px; padding: 0; max-height: none; overflow: visible; }
.results-list:empty { margin: 0; }
.priority-results { flex:0 0 auto; margin:12px 0 0; padding:9px 11px; border:1px solid #cbdff0; border-radius:11px; background:#f1f7fd; }
.priority-results h3 { margin:0 0 6px; color:#336e9f; font-size:10px; font-weight:750; }
.priority-results-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 14px; margin:0; padding:0; list-style:none; }
.priority-results-list .result-row { padding:1px 0; min-height:16px; }
.priority-results-list .result-number { width:26px; height:15px; border-radius:5px; }
.priority-results:not([hidden]) ~ .results-list { margin-top:10px; }
.result-row { display: flex; align-items: center; gap: 5px; min-height: 0; padding: 0 1px; border-bottom: 1px solid #edf3f9; }
.result-row:last-child { border-bottom: 0; }
.result-number { width: 13px; height: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf3fc; color: #336e9f; font-size: 8px; font-weight: 750; font-variant-numeric: tabular-nums; }
.result-name { min-width: 0; font-size: 11px; line-height: 14px; font-weight: 650; color: #294e70; white-space: nowrap; }
.result-reserved { margin-left: auto; font-size: 7px; line-height: 10px; color: #587b99; padding: 0 3px; background: #edf5fc; border-radius: 3px; }
.result-fixed-dot { display:inline-block; width:7px; height:7px; flex:0 0 7px; margin-left:auto; border-radius:50%; background:#f2c230; box-shadow:0 0 0 1px #d5a713; }
.result-row.latest .result-number { background: #dcecf9; color: #2563a9; }
.results-footer { margin: 17px -22px 0; padding: 16px 22px; background: #f4f8fc; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: #668096; }
.sync-dot { width: 5px; height: 5px; box-shadow: none; }
.participants-card { margin-top: 18px; padding: 19px 21px; border-radius: 18px; }
.participants-card summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; cursor: pointer; font-size: 12px; font-weight: 700; color: #3e6283; list-style: none; }
.participants-card summary::-webkit-details-marker { display: none; }
.participants-card summary::after { content: "+"; font-size: 17px; color: #7b9fbd; font-weight: 400; }
.participants-card[open] summary::after { content: "−"; }
.participants-card summary > span { margin-left: auto; font-size: 10px; color: #668096; font-weight: 500; }
.names-note { color: #668096; font-size: 10px; line-height: 1.6; margin: 12px 0 9px; }
.participant-names { display: flex; gap: 5px; flex-wrap: wrap; max-height: 175px; overflow: auto; scrollbar-width: thin; }
.participant-names > span { color: #506e89; font-size: 9px; padding: 5px 7px; border-radius: 5px; background: #edf4fb; }
.save-note { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 16px 16px 0; font-size: 10px; line-height: 1.6; color: #668096; }
.save-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: #7b9bb5; }
.draw-layout > .save-note { margin: 0 16px; }
@media (min-width: 721px) {
    .draw-layout { row-gap: 12px; align-items: stretch; }
    .jar-card { align-self: start; }
    /* The jar sets the row height; both right-hand cards share that space. */
    .results-column { display: flex; flex-direction: column; min-height: 0; contain: size; }
    .results-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .results-card > .card-top, .results-card > .progress-track, .results-footer { flex-shrink: 0; }
    .results-empty { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; padding: 18px 12px; }
    .results-list:not(:empty) { flex: 0 1 calc(var(--result-rows, 1) * 18px); min-height: 0; max-height: none; }
    .results-footer { margin-top: auto; }
    .participants-card { flex: 0 0 auto; }
    .draw-layout > .save-note { grid-column: 2; }
    body.draw-maximized .results-column { contain: none; }
}
.draw-error { margin: 16px 0 6px; padding: 14px 18px; border: 1px solid #edd5bd; border-radius: 12px; background: #fff5eb; color: #986640; font-size: 12px; line-height: 1.6; }
.draw-footer { margin-top: 36px; padding: 24px 0; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid #d5e3ef; color: #587087; font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px; border-radius: 9px; background: #fff; transform: translateY(-160%); z-index: 20; }
.skip-link:focus { transform: none; }
@keyframes jar-mix { from { transform: translateX(-50%) rotate(-.8deg); } to { transform: translateX(-50%) rotate(.8deg); } }
@keyframes roll-out { 0% { opacity: 0; transform: translate(-50%,-30px) scale(.35) rotate(-35deg); } 18% { opacity: 1; } 58% { transform: translate(-50%,46px) scale(1) rotate(10deg); } 78% { transform: translate(-50%,30px) scale(1) rotate(-4deg); } 100% { opacity: 1; transform: translate(-50%,30px) scale(1); } }
@keyframes result-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 950px) { .draw-shell { width: calc(100% - 40px); } .draw-layout { gap: 18px; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); } .jar-card { padding: 21px 17px 18px; } .drawing-viewport { height: 460px; } .live-pill { display: none; } }
@media (max-width: 720px) { .draw-layout { grid-template-columns: 1fr; } .draw-header { padding: 20px 0; gap: 12px; } .header-actions { gap: 7px; } .admin-pill { display: none; } .page-intro { padding-top: 15px; padding-bottom: 25px; } .jar-card { max-width: 560px; width: 100%; margin: 0 auto; padding: 22px; } .drawing-viewport { height: 430px; } .results-list { grid-template-rows: repeat(var(--result-rows, 1), 18px); } .draw-footer span { display: none; } }
@media (max-width: 420px) { .draw-shell { width: calc(100% - 28px); } .draw-brand { font-size: 12px; gap: 7px; } .draw-brand img { width: 34px; height: 34px; } .draw-brand small { font-size: 10px; } .sign-in { padding: 10px; gap: 6px; font-size: 11px; } .sign-in svg { width: 15px; } .intro-text { font-size: 12px; } .draw-rules { font-size: 10px; } .draw-rules .random-rule { width: 100%; } .jar-card { padding: 20px 15px 18px; } .drawing-viewport { height: 350px; } .zoom-controls button { min-height: 42px; min-width: 39px; } .maximize-button { min-height: 44px; } .draw-button, .auto-button { font-size: 11px; } .auto-button { min-width: 93px; padding: 0 12px; } }

body.draw-maximized { overflow: hidden; }
.jar-card.is-maximized { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; height: 100dvh; max-width: none; margin: 0; padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: #f3f7fc; display: grid; grid-template-columns: minmax(0,1fr) clamp(220px,26vw,360px); grid-template-rows: auto auto auto minmax(0,1fr) auto auto auto; column-gap: 24px; }
.jar-card.is-maximized > .card-top { grid-area: 1 / 1; }
.jar-card.is-maximized > .drawing-toolbar { grid-area: 2 / 1; }
.jar-card.is-maximized > .draw-error { grid-area: 3 / 1; }
.jar-card.is-maximized > .drawing-viewport { grid-area: 4 / 1; }
.jar-card.is-maximized > .draw-controls { grid-area: 5 / 1; }
.jar-card.is-maximized > .draw-secondary-actions { grid-area: 6 / 1; }
.jar-card.is-maximized > .access-note { grid-area: 7 / 1; }
.jar-card.is-maximized .card-top, .jar-card.is-maximized .drawing-toolbar, .jar-card.is-maximized .draw-error, .jar-card.is-maximized .draw-controls, .jar-card.is-maximized .draw-secondary-actions, .jar-card.is-maximized .access-note { flex: 0 0 auto; }
.jar-card.is-maximized .drawing-viewport { flex: 1 1 auto; min-height: 0; height: auto; margin-top: 8px; }
.jar-card.is-maximized .drawing-toolbar { margin-top: 12px; }
.jar-card.is-maximized .draw-controls { width: min(100%, 620px); justify-self: center; margin-top: 10px; }
.jar-card.is-maximized .draw-secondary-actions { width: min(100%, 620px); justify-self: center; margin-top: 8px; }
.jar-card.is-maximized .access-note { margin-top: 8px; }
.jar-card.is-maximized .expand-symbol { display: none; }
.jar-card.is-maximized .restore-symbol { display: initial; }
.jar-card::backdrop { background: #f3f7fc; }
.maximized-results { grid-area: 1 / 2 / 8 / 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px; border: 1px solid #d7e5f1; border-radius: 18px; background: #ffffffd9; }
.compact-results-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid #dce8f2; }
.compact-results-head h2 { margin: 0; font-size: 14px; }
.compact-results-head > span { color: #336e9f; font-size: 11px; font-variant-numeric: tabular-nums; }
.compact-results-empty { color: #668096; font-size: 12px; line-height: 1.6; }
.compact-priority-results { flex:0 0 auto; margin-top:10px; padding:8px; border:1px solid #cbdff0; border-radius:9px; background:#f1f7fd; }
.compact-priority-results h3 { margin:0 0 5px; color:#336e9f; font-size:10px; font-weight:750; }
.compact-priority-results ol { display:grid; gap:3px; margin:0; padding:0; list-style:none; }
.compact-priority-results li { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:4px; padding:1px 0; color:#294e70; font-size:11px; line-height:14px; }
.compact-priority-results b { color:#336e9f; font-variant-numeric:tabular-nums; }
.compact-priority-results li.has-fixed-dot { grid-template-columns:30px minmax(0,1fr) 7px; }
.compact-priority-results .result-fixed-dot { justify-self:end; }
.compact-results-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--result-rows, 1), minmax(0, 1fr)); column-gap: 8px; flex: 0 1 calc(var(--result-rows, 1) * 24px); min-height: 0; overflow: visible; margin: 10px 0 0; padding: 0; list-style: none; }
.compact-results-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; min-height: 0; gap: 4px; padding: 0 2px; border-bottom: 1px solid #e3edf6; font-size: 11px; line-height: 14px; }
.compact-results-list b { color: #336e9f; font-variant-numeric: tabular-nums; }
.compact-results-list span { white-space: nowrap; }
.compact-results-list li.has-fixed-dot { grid-template-columns:20px minmax(0,1fr) 7px; }
.compact-results-list .result-fixed-dot { justify-self:end; }
.compact-latest { border-radius: 8px; background: #eaf3fc; }
.draw-reset-confirm { position: fixed; inset: 0; z-index: 10100; display: grid; place-items: center; padding: 20px; background: #173c6055; backdrop-filter: blur(5px); }
.reset-confirm-card { width: min(460px,100%); padding: 25px; border: 1px solid #d4e2ef; border-radius: 20px; background: #fff; box-shadow: 0 20px 70px #183e6033; }
.reset-confirm-card h2 { margin: 0 0 12px; font-size: 22px; }
.reset-confirm-card p { color: #50657c; font-size: 13px; line-height: 1.7; }
.reset-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.reset-confirm-actions button { flex: 1; padding: 10px; min-width: 130px; }
#lucky-jar-3d { position: absolute; left: -5.435%; top: -13%; width: 110.87%; height: 125%; z-index: 5; pointer-events: none; }
.jar-art.has-3d > :not(#lucky-jar-3d) { visibility: hidden; }
.jar-art.has-3d.mixing { animation: none; }
.jar-is-3d .revealed-ball { top: auto; left: calc(50% + 110px); bottom: 35px; width: auto; min-width: 100px; height: auto; padding: 7px 15px; border-radius: 12px; transform: translateX(-50%); background: #ffffffe8; box-shadow: 0 6px 16px #4879a320; }
.jar-is-3d .revealed-ball.rolling { animation: none; }
.jar-is-3d .revealed-ball > span { font-size: 23px; }
@media (max-width: 620px) {
    .jar-card.is-maximized { padding: 12px 10px; grid-template-columns: minmax(0,1fr) minmax(140px,42%); column-gap: 10px; }
    .jar-card.is-maximized .card-top, .jar-card.is-maximized .drawing-toolbar { flex-wrap: wrap; gap: 6px; }
    .jar-card.is-maximized .card-top h2 { font-size: 13px; }
    .jar-card.is-maximized .remaining-label, .jar-card.is-maximized .access-note { font-size: 9px; }
    .maximized-results { padding: 10px 7px; border-radius: 12px; }
    .compact-results-head { flex-wrap: wrap; padding-bottom: 9px; }
    .compact-results-head h2 { font-size: 12px; }
    .compact-results-list { column-gap: 5px; }
    .compact-results-list li { grid-template-columns: 13px minmax(0,1fr); gap: 2px; padding: 0; font-size: 9px; line-height: 12px; }
    .compact-results-list li.has-fixed-dot { grid-template-columns:13px minmax(0,1fr) 7px; }
    .compact-priority-results { padding:6px; }
    .compact-priority-results li { font-size:9px; line-height:12px; }
    .compact-priority-results h3 { font-size:9px; }
    .jar-card.is-maximized .export-button, .jar-card.is-maximized .reset-button { padding: 7px 5px; gap: 4px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.draw-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 12px; border: 1px solid #c5d9ec; border-radius: 12px; color: #2563a9; background: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.draw-home-button svg { width: 21px; height: 21px; }
.draw-home-button:hover { background: #edf5fe; }
.centre-results-section { margin: 32px 0; }
.centre-results-section > h2 { margin: 0 0 8px; font-size: 23px; }
.centre-results-note { margin: 0 0 18px; color: #587087; font-size: 13px; line-height: 1.6; }
.centre-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.centre-result-card { min-width: 0; padding: 20px; border: 1px solid #dbe7f1; border-radius: 18px; background: #ffffffde; }
.centre-result-card h3 { margin: 0 0 12px; color: #2563a9; font-size: 18px; }
.centre-result-card table { width: 100%; border-collapse: collapse; font-size: 12px; }
.centre-result-card th, .centre-result-card td { padding: 10px 5px; border-bottom: 1px solid #e2ebf4; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.centre-result-card th { color: #587087; font-size: 11px; }
.centre-result-card td:last-child { font-variant-numeric: tabular-nums; color: #2563a9; font-weight: 700; }
.centre-draw-value { display:flex; align-items:center; gap:10px; }
.centre-draw-number { white-space:nowrap; }
.centre-staff-marker { display:inline-flex; align-items:center; margin-left:auto; padding:2px 6px; border:1px solid #d4e2ef; border-radius:4px; background:#edf5fc; color:#587b99; font-size:10px; font-weight:650; white-space:nowrap; }
.centre-staff-dot { width:7px; height:7px; flex:0 0 7px; margin-left:auto; border-radius:50%; background:#f2c230; box-shadow:0 0 0 1px #d5a713; }
.draw-rule-update { padding: 14px 18px; border: 1px solid #d4e2ef; border-radius: 12px; color: #50657c; background: #fff; font-size: 12px; line-height: 1.7; }
@media (max-width: 900px) { .centre-results { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .draw-home-button span { display: none; } .draw-home-button { width: 42px; padding: 8px; } }