*{box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,Arial,sans-serif}
body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:
radial-gradient(circle at top,rgba(37,99,235,.18),transparent 26%),
linear-gradient(180deg,#07111f,#0a1830 45%,#0f172a 100%);color:#e6eef8;margin:0;padding:12px}
.container{width:100%;max-width:1120px;padding:22px 22px 18px;text-align:center;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.spinner-layout{position:relative;min-height:calc(100vh - 24px);justify-content:center;border:1px solid rgba(148,163,184,.12);border-radius:24px;background:linear-gradient(180deg,rgba(8,18,36,.92),rgba(10,20,40,.86));box-shadow:0 22px 60px rgba(2,6,23,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.hero-logo-group{display:grid;grid-template-columns:minmax(120px,170px) minmax(260px,1fr) minmax(120px,170px);align-items:center;gap:18px;width:min(100%,860px);margin-bottom:2px}
.hero-logo{display:flex;justify-content:center;align-items:center;width:100%;padding:14px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 16px 36px rgba(2,6,23,.22),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(4px)}
.hero-logo-center{padding:18px 24px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.hero-logo-image{display:block;width:100%;height:auto;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 10px 26px rgba(2,6,23,.24))}
.hero-logo-image-center{max-width:420px;max-height:124px}
.hero-logo-image-side{max-width:110px;max-height:110px}
h1{margin:0;font-size:clamp(24px,3.1vw,34px);line-height:1.1;letter-spacing:.5px;text-wrap:balance}
.display-mode-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;margin-top:-2px}
.display-mode-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#93c5fd}
.display-mode-select{min-width:220px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e6eef8;font-size:14px;font-weight:700;box-shadow:0 8px 20px rgba(2,6,23,.2)}
.display-mode-select:focus{outline:none;border-color:rgba(125,211,252,.8);box-shadow:0 0 0 3px rgba(59,130,246,.16)}
.spinner{display:flex;gap:10px;padding:16px 18px;background:linear-gradient(180deg,#0a2b56,#0c4678);border-radius:18px;box-shadow:0 16px 36px rgba(2,6,23,0.52);justify-content:center;width:fit-content;max-width:100%;margin:0 auto}
.spinner-main{font-size:48px;letter-spacing:8px;width:min(100%,930px)}
.digit{display:inline-block;width:clamp(56px,7vw,86px);height:clamp(86px,11vw,126px);line-height:clamp(86px,11vw,126px);font-size:clamp(52px,6.8vw,82px);background:rgba(255,255,255,0.03);border-radius:14px;text-align:center;font-weight:900;letter-spacing:4px;transition:background .12s,color .12s,transform .12s;box-shadow:0 8px 18px rgba(2,6,23,0.5);flex:0 0 auto}
.spinner-office-banner{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(100%,720px);margin-top:2px;padding:12px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(12,36,64,0.94),rgba(10,28,48,0.82));border:1px solid rgba(125,211,252,0.2);box-shadow:0 10px 24px rgba(2,6,23,0.35)}
.spinner-office-label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#93c5fd;font-weight:700}
.spinner-office-text{font-size:clamp(20px,2.9vw,30px);line-height:1.2;font-weight:800;color:#eff6ff;letter-spacing:.2px}
.spinner-office-banner[hidden]{display:none}

/* colored digits - distinct color per position */
.digit:nth-child(1){background:#0b2338;color:#e6f0ff}
.digit:nth-child(2){background:#084f4a;color:#e9fffb}
.digit:nth-child(3){background:#07603c;color:#ecfff3}
.digit:nth-child(4){background:#41651a;color:#f7ffe6}
.digit:nth-child(5){background:#b7790b;color:#0f1722}
.digit:nth-child(6){background:#d9731a;color:#0f1722}
.digit:nth-child(7){background:#c24141;color:#fff7f7}
.digit:nth-child(8){background:#6b46c1;color:#f6f2ff}
.digit:nth-child(9){background:#1e40af;color:#eaf2ff}

/* subtle active highlight when digit changes */
.digit.active{transform:scale(1.04);box-shadow:0 10px 24px rgba(0,0,0,0.45)}
.primary-control{display:flex;justify-content:center;align-items:center;width:100%;margin-top:8px}
.primary-control button[hidden]{display:none}
.controls{margin-top:4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));gap:10px;justify-content:center;width:100%;max-width:980px;margin-left:auto;margin-right:auto}
.controls-secondary{margin-top:10px}
button{padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.06);font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(2,6,23,0.28);transition:transform .15s ease,filter .15s ease}
button:hover{transform:translateY(-1px);filter:brightness(1.04)}
button:disabled{opacity:.6;cursor:default}
#startBtn,
#stopBtn{min-width:min(100%,360px);padding:18px 42px;font-size:clamp(24px,3vw,34px);font-weight:800;border-radius:18px}
#startBtn{background:linear-gradient(180deg,#14d9c4,#06b6a4);color:white;box-shadow:0 18px 36px rgba(6,182,164,.28),0 10px 24px rgba(2,6,23,.34)}
#startBtn:hover{transform:translateY(-2px) scale(1.01)}
#stopBtn{background:linear-gradient(180deg,#f87171,#ef4444);color:white;box-shadow:0 18px 36px rgba(239,68,68,.24),0 10px 24px rgba(2,6,23,.34)}
#stopBtn:hover{transform:translateY(-2px) scale(1.01)}
#doorprizeBtn{background:#0ea5e9;color:white}
#grandPrizeBtn{background:#facc15;color:#111827}
#viewWinnersBtn{background:#7c3aed;color:white}
.result{margin-top:12px;font-size:18px;color:#e6f3ff}
.result[hidden]{display:none}
.note{margin-top:2px;color:#8ea4c8;font-size:12px}
/* winner area */
.winner-area{margin-top:4px;background:linear-gradient(180deg,#061726,rgba(255,255,255,0.02));padding:14px 16px;border-radius:16px;max-width:900px;width:100%;margin-left:auto;margin-right:auto;box-shadow:0 10px 28px rgba(2,6,23,0.45)}
.winner-area h2{margin:0 0 10px;font-size:18px;color:#f8fafc}
.winner-details{margin:0 0 8px;color:#e6eef8;font-size:16px}
.winner-row{display:grid;grid-template-columns:152px 1fr;gap:12px;align-items:center;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.winner-row strong{display:block;text-align:left;color:#cfe6ff}
.winner-row span{min-width:0;text-align:left}
.debug-panel{margin-top:10px;background:#061625;padding:12px;border-radius:10px;color:#dbeafe;max-width:920px;width:100%;margin-left:auto;margin-right:auto;box-shadow:0 10px 26px rgba(0,0,0,0.6)}
.debug-pre{white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.4;color:#cfe6ff;background:rgba(255,255,255,0.02);padding:8px;border-radius:6px;max-height:260px;overflow:auto}
.debug-panel button{background:#374151;color:white;border-radius:6px;padding:6px 10px;border:0;cursor:pointer}
.debug-panel[hidden]{display:none}
.winner-actions{display:flex;gap:8px;justify-content:center}
.winner-actions button{padding:8px 12px;border-radius:8px;border:0;cursor:pointer}
.winner-area[hidden]{display:none}
.filter-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-content:center;justify-items:center;align-items:end;width:100%;transition:opacity .3s ease,transform .3s ease,max-height .3s ease,margin .3s ease;transform-origin:top center;max-height:220px;opacity:1}
.filter-row.is-hidden{opacity:0;transform:translateY(-8px) scale(.98);max-height:0;overflow:hidden;pointer-events:none;margin:0}
.range-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-content:center;align-items:center;width:100%}
.range-controls label{font-size:14px;color:#cfe6ff}
.range-controls input{width:100%;max-width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:inherit}

.prize-select{display:flex;justify-content:center;align-items:center;width:100%;max-width:640px;margin:0 auto}
.prize-select label{color:#cfe6ff;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}
.prize-select select{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);color:#e6eef8;width:100%;min-width:0;max-width:100%;font-size:16px;font-weight:600;box-shadow:0 8px 20px rgba(2,6,23,0.35)}
.prize-select select:focus{outline:none;border-color:rgba(59,130,246,0.9);box-shadow:0 8px 24px rgba(37,99,235,0.12)}
.prize-select option{background:#071327;color:#e6eef8}

body[data-display-mode="modern"]{background:
radial-gradient(circle at top,rgba(255,255,255,.8),transparent 24%),
linear-gradient(180deg,#dff4ff,#bfe6ff 42%,#8fc9ef 100%);color:#15324a}
body[data-display-mode="modern"] .spinner-layout{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(231,245,255,.92));border-color:rgba(86,160,209,.22);box-shadow:0 24px 60px rgba(64,124,170,.22)}
body[data-display-mode="modern"] h1{color:#123956}
body[data-display-mode="modern"] .hero-logo{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,246,252,.82));border-color:rgba(86,160,209,.22);box-shadow:0 20px 40px rgba(64,124,170,.16),inset 0 1px 0 rgba(255,255,255,.45)}
body[data-display-mode="modern"] .hero-logo-image{filter:drop-shadow(0 12px 24px rgba(64,124,170,.18))}
body[data-display-mode="modern"] .display-mode-label,
body[data-display-mode="modern"] .range-controls label,
body[data-display-mode="modern"] .prize-select label{color:#2a5878}
body[data-display-mode="modern"] .display-mode-select,
body[data-display-mode="modern"] .range-controls input,
body[data-display-mode="modern"] .prize-select select{background:rgba(255,255,255,.82);color:#15324a;border-color:rgba(86,160,209,.25)}
body[data-display-mode="modern"] .prize-select option{background:#f4fbff;color:#15324a}
body[data-display-mode="modern"] .spinner{background:linear-gradient(180deg,#72bce6,#4197cf);box-shadow:0 18px 40px rgba(64,124,170,.24)}
body[data-display-mode="modern"] #startBtn{background:linear-gradient(180deg,#2cc7b8,#129d90);box-shadow:0 18px 36px rgba(18,157,144,.2),0 10px 24px rgba(64,124,170,.18)}
body[data-display-mode="modern"] #stopBtn{background:linear-gradient(180deg,#fb7185,#e11d48);box-shadow:0 18px 36px rgba(225,29,72,.18),0 10px 24px rgba(64,124,170,.18)}
body[data-display-mode="modern"] .digit:nth-child(1){background:#215f85;color:#f3fbff}
body[data-display-mode="modern"] .digit:nth-child(2){background:#2f7ca2;color:#f5fdff}
body[data-display-mode="modern"] .digit:nth-child(3){background:#4a96b8;color:#f8feff}
body[data-display-mode="modern"] .digit:nth-child(4){background:#5aa7c6;color:#f8feff}
body[data-display-mode="modern"] .digit:nth-child(5){background:#b9e5f5;color:#16425d}
body[data-display-mode="modern"] .digit:nth-child(6){background:#6fb6d0;color:#f8feff}
body[data-display-mode="modern"] .digit:nth-child(7){background:#4d8fb8;color:#f7fdff}
body[data-display-mode="modern"] .digit:nth-child(8){background:#78c3de;color:#163f58}
body[data-display-mode="modern"] .digit:nth-child(9){background:#d8f2fb;color:#184058}
body[data-display-mode="modern"] .spinner-office-banner{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(226,243,252,.94));border-color:rgba(86,160,209,.24)}
body[data-display-mode="modern"] .spinner-office-label{color:#35719a}
body[data-display-mode="modern"] .spinner-office-text{color:#123956}
body[data-display-mode="modern"] .winner-area,
body[data-display-mode="modern"] .debug-panel{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(236,247,255,.94));box-shadow:0 14px 28px rgba(64,124,170,.16)}
body[data-display-mode="modern"] .winner-area h2,
body[data-display-mode="modern"] .debug-pre{color:#15324a}
body[data-display-mode="modern"] .winner-row strong{color:#35719a}
body[data-display-mode="modern"] .winner-row span{color:#123956}
body[data-display-mode="modern"] .note{color:#537899}

body[data-display-mode="projector"]{background:
linear-gradient(180deg,#07111d,#0a1830 55%,#0d1420 100%)}
body[data-display-mode="projector"] .spinner-layout{min-height:calc(100vh - 12px);max-width:1280px;padding:16px 18px 12px;border-radius:18px}
body[data-display-mode="projector"] .container{max-width:1280px;padding:16px 18px 12px;gap:10px}
body[data-display-mode="projector"] .hero-logo-group{width:min(100%,760px);gap:14px;grid-template-columns:minmax(110px,145px) minmax(220px,1fr) minmax(110px,145px)}
body[data-display-mode="projector"] .hero-logo{padding:10px 12px;border-radius:16px}
body[data-display-mode="projector"] .hero-logo-center{padding:14px 18px}
body[data-display-mode="projector"] .hero-logo-image-center{max-width:320px;max-height:96px}
body[data-display-mode="projector"] .hero-logo-image-side{max-width:90px;max-height:90px}
body[data-display-mode="projector"] h1{font-size:28px}
body[data-display-mode="projector"] .display-mode-bar{justify-content:flex-end;margin-top:0}
body[data-display-mode="projector"] .display-mode-select{min-width:210px;padding:8px 12px;font-size:13px}
body[data-display-mode="projector"] .spinner{padding:12px 14px;gap:8px}
body[data-display-mode="projector"] .spinner-main{width:min(100%,980px)}
body[data-display-mode="projector"] .digit{width:72px;height:104px;line-height:104px;font-size:66px;border-radius:12px}
body[data-display-mode="projector"] .spinner-office-banner{padding:9px 14px;gap:4px}
body[data-display-mode="projector"] .spinner-office-text{font-size:22px}
body[data-display-mode="projector"] .filter-row{gap:10px}
body[data-display-mode="projector"] .range-controls input,
body[data-display-mode="projector"] .prize-select select{padding:8px 10px}
body[data-display-mode="projector"] .controls{gap:8px}
body[data-display-mode="projector"] button{padding:9px 12px;font-size:14px}
body[data-display-mode="projector"] #startBtn,
body[data-display-mode="projector"] #stopBtn{min-width:min(100%,320px);padding:14px 34px;font-size:28px}
body[data-display-mode="projector"] .winner-area{padding:12px 14px;max-width:980px}
body[data-display-mode="projector"] .winner-area h2{font-size:17px;margin-bottom:8px}
body[data-display-mode="projector"] .winner-details{font-size:15px}
body[data-display-mode="projector"] .winner-row{grid-template-columns:140px 1fr;padding:4px 0}
body[data-display-mode="projector"] .debug-panel{margin-top:6px}
body[data-display-mode="projector"] .note{font-size:11px;margin-top:0}

/* winner_history table styling (used by winner_history.php) */
table.winner{width:100%;border-collapse:collapse;margin-top:8px}
table.winner th{background:linear-gradient(90deg,#0b4f83,#083063);color:#fff;padding:10px;text-align:left}
table.winner td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03);color:#e6eef8}
table.winner tr:hover td{background:rgba(255,255,255,0.02)}
@media (max-width:768px){
	.winner-row{grid-template-columns:120px 1fr}
	.digit{width:72px;height:108px;line-height:108px;font-size:76px}
}

/* badges and pills for winner table */
.badge {display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;color:#fff;font-size:13px;border:1px solid rgba(0,0,0,0.12);box-shadow:0 2px 6px rgba(0,0,0,0.12);text-shadow:0 1px 0 rgba(0,0,0,0.25)}
.badge.gold{background:linear-gradient(90deg,#c48a00,#f08b2e);color:#fff}
.badge.silver{background:linear-gradient(90deg,#7f8fa1,#b4bcc7);color:#fff}
.badge.bronze{background:linear-gradient(90deg,#b36b3a,#8c4b20);color:#fff}
.badge.default{background:linear-gradient(90deg,#1e90ff,#2563eb);color:#fff}
.kd-pill{display:inline-block;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,0.32);color:#ffffff;font-weight:700;border:1px solid rgba(255,255,255,0.06)}

/* refreshed winner table look */
.winner-card{max-width:1200px;margin:0 auto;padding:18px;border-radius:12px;background:linear-gradient(180deg,#071026,#071a2b);box-shadow:0 18px 50px rgba(2,6,23,0.7)}
table.winner{background:transparent;border-radius:8px;overflow:hidden}
table.winner thead th{background:linear-gradient(90deg,#0b3d66,#083155);font-weight:700;letter-spacing:0.4px}
table.winner th, table.winner td{padding:12px 14px}
table.winner tbody tr{transition:transform .12s, background .12s}
table.winner tbody tr:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(2,6,23,0.45)}

/* subtle light cells for readability */
table.winner td{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}

/* office swatch in legend */
.office-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.office-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.office-swatch{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.2)}
.office-label{color:#e6eef8;font-weight:700;font-size:13px}

/* toned-down badge palette */
.badge.gold{background:linear-gradient(90deg,#b8860b,#d99a28)}
.badge.silver{background:linear-gradient(90deg,#6b7782,#98a0aa)}
.badge.bronze{background:linear-gradient(90deg,#9a5b34,#b57550)}
.badge.default{background:linear-gradient(90deg,#2b6fb3,#1f4fb0)}

/* KD pill smaller */
.kd-pill{padding:4px 8px;font-size:12px;border-radius:6px}

/* peringkat row and column highlights */
table.winner thead th{background:linear-gradient(180deg,#072744,#0b3b5e);color:#fff;border-bottom:2px solid rgba(255,255,255,0.12);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.2);}
table.winner td.peringkat-col{text-align:center;font-weight:700;padding:10px 8px}
table.winner tr.peringkat-1{background:linear-gradient(90deg, rgba(198,150,16,0.08), rgba(0,0,0,0));}
table.winner tr.peringkat-2{background:linear-gradient(90deg, rgba(120,140,160,0.06), rgba(0,0,0,0));}
table.winner tr.peringkat-3{background:linear-gradient(90deg, rgba(140,80,40,0.06), rgba(0,0,0,0));}
table.winner tr.peringkat-default{background:transparent}
table.winner tr.peringkat-1 td, table.winner tr.peringkat-2 td, table.winner tr.peringkat-3 td{transition:background .18s ease}
table.winner tr:hover{background:rgba(255,255,255,0.04)}

/* stronger overall table frame */
table.winner{border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 40px rgba(2,6,23,0.6)}
table.winner th, table.winner td{border-right:1px solid rgba(255,255,255,0.03)}
table.winner th:last-child, table.winner td:last-child{border-right:none}

/* toolbar/title styling */
.toolbar h1{font-size:28px;margin:0;color:#ffffff;text-shadow:0 3px 12px rgba(0,0,0,0.6)}
.toolbar{display:flex;align-items:center;gap:12px}

/* stronger contrast for peringkat badge inside table */
.badge{font-size:12px;padding:6px 10px}
.peringkat-highlight{box-shadow:0 4px 10px rgba(0,0,0,0.18);}

/* KD Kantor column highlight */
table.winner th.kd-column{background:linear-gradient(180deg, rgba(14,64,120,0.16), rgba(14,64,120,0.08));color:#ffffff}
table.winner td.kd-column{background:rgba(14,64,120,0.04);color:#eaf6ff;text-align:center}
table.winner td.kd-column .kd-pill{background:transparent;border:1px solid rgba(255,255,255,0.06);box-shadow:none;color:#fff}
table.winner tr:hover td.kd-column{background:rgba(14,64,120,0.08)}

/* other column highlights */
table.winner th.hadiah-column{background:linear-gradient(180deg, rgba(54,95,34,0.16), rgba(54,95,34,0.06));color:#fff}
table.winner td.hadiah-column{background:rgba(54,95,34,0.04);color:#eef9ef}
table.winner tr:hover td.hadiah-column{background:rgba(54,95,34,0.08)}

/* neutralize column cell backgrounds so per-office border stands out */
table.winner td.hadiah-column{background:transparent;color:inherit}
table.winner tr:hover td.hadiah-column{background:rgba(255,255,255,0.02)}

table.winner th.nama-column{background:linear-gradient(180deg, rgba(96,45,140,0.12), rgba(96,45,140,0.06));color:#fff}
table.winner td.nama-column{background:transparent;color:inherit}
table.winner tr:hover td.nama-column{background:rgba(255,255,255,0.02)}

table.winner th.undian-column{background:linear-gradient(180deg, rgba(8,100,120,0.12), rgba(8,100,120,0.06));color:#fff}
table.winner td.undian-column{background:transparent;color:inherit}
table.winner tr:hover td.undian-column{background:rgba(255,255,255,0.02)}

table.winner th.rek-column{background:linear-gradient(180deg, rgba(120,60,20,0.12), rgba(120,60,20,0.06));color:#fff}
table.winner td.rek-column{background:transparent;color:inherit}
table.winner tr:hover td.rek-column{background:rgba(255,255,255,0.02)}

/* Ensure higher specificity to override plain styles */
table.winner th.hadiah-column, table.winner th.nama-column, table.winner th.undian-column, table.winner th.rek-column{border-bottom:1px solid rgba(255,255,255,0.06)}

@media (max-width:992px){
	.spinner-layout{min-height:calc(100vh - 24px)}
	.container{max-width:920px;padding:20px 16px 16px}
	.controls{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
	body{padding:10px}
	.spinner-layout{min-height:calc(100vh - 20px);border-radius:18px}
	.container{padding:16px 12px 14px;gap:12px}
	.hero-logo-group{width:min(100%,620px);gap:12px;grid-template-columns:minmax(84px,110px) minmax(0,1fr) minmax(84px,110px)}
	.hero-logo{padding:10px 12px;border-radius:16px}
	.hero-logo-center{padding:14px 16px}
	#startBtn,
	#stopBtn{min-width:min(100%,280px);padding:16px 28px;font-size:26px}
	.hero-logo-image-center{max-width:280px;max-height:88px}
	.hero-logo-image-side{max-width:72px;max-height:72px}
	h1{font-size:24px}
	.display-mode-bar{justify-content:stretch}
	.display-mode-label{width:100%;text-align:left}
	.display-mode-select{width:100%;min-width:0}
	.spinner{gap:6px;padding:14px 10px}
	.digit{width:58px;height:88px;line-height:88px;font-size:54px;letter-spacing:2px}
	.spinner-office-text{font-size:22px}
	.filter-row{grid-template-columns:1fr;align-items:stretch}
	.range-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
	.range-controls label{display:flex;align-items:center;gap:8px;width:100%;text-align:left}
	.prize-select label{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left}
	.range-controls input{width:100%;max-width:none;min-width:0}
	.prize-select{min-width:0}
	.prize-select select{width:100%;min-width:0}
	.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.controls button:last-child{grid-column:auto}
	.winner-row{grid-template-columns:120px 1fr}
}

@media (max-width:480px){
	body{padding:0}
	.spinner-layout{min-height:100vh;border:none;border-radius:0}
	.container{padding:14px 10px 16px}
	.hero-logo-group{grid-template-columns:1fr;gap:10px;width:100%}
	.hero-logo{padding:10px 12px}
	.hero-logo-center{order:-1}
	.hero-logo-image-center{max-width:240px;max-height:72px}
	.hero-logo-image-side{max-width:64px;max-height:64px}
	h1{font-size:20px}
	.display-mode-bar{gap:8px}
	.spinner{gap:4px;padding:10px 6px;width:100%}
	.digit{width:calc((100vw - 44px) / 9);max-width:38px;min-width:28px;height:54px;line-height:54px;font-size:32px;letter-spacing:0;border-radius:8px}
	.spinner-office-banner{padding:10px 12px;border-radius:12px}
	.spinner-office-text{font-size:18px}
	.result{font-size:15px}
	.note{font-size:12px}
	.controls{grid-template-columns:1fr}
	.controls button{width:100%}
	.filter-row{grid-template-columns:1fr;align-items:stretch}
	.range-controls{gap:8px;grid-template-columns:1fr 1fr}
	.range-controls label{flex:1 1 0}
	.range-controls input{width:100%;max-width:none}
	.prize-select{width:100%;min-width:0}
	.winner-row{grid-template-columns:1fr;gap:4px}
	.winner-row strong,
	.winner-row span{text-align:left}
	.winner-area,
	.debug-panel{padding:14px 12px}
}