@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{
  font-family:'DM Sans','Nunito',sans-serif;
  color:#4f365e;
  background:linear-gradient(180deg,#fffafc 0%,#fff5fb 45%,#fef8ef 100%);
  font-synthesis:none;
  --bg-card:#ffffffd8;
  --bg-card-strong:#fffdfd;
  --text:#523460;
  --text-soft:#7d6888;
  --accent:#f37caf;
  --accent-2:#ffcf70;
  --accent-3:#8fd8c3;
  --line:#e9d9e7;
  --shadow:0 18px 50px rgba(215,110,168,.18);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;overflow-x:hidden;color:var(--text);background:transparent}
.ambient{position:fixed;z-index:-1;filter:blur(90px);border-radius:50%;opacity:.5}
.a1{width:420px;height:420px;background:#ffc0df;top:-120px;left:-90px}
.a2{width:470px;height:470px;background:#ffe7a7;bottom:-180px;right:-100px}
.a3{width:340px;height:340px;background:#b8f0e3;top:35%;left:55%}
.shell{max-width:1200px;margin:auto;padding:38px 22px}
.eyebrow{font-size:12px;letter-spacing:.18em;color:#d56d9e;font-weight:900}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
h1{font-family:'Nunito',sans-serif;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 10px;color:#5b3770}
h1 em{display:block;color:#f39a35;font-style:normal}
.subtitle, header p, .muted{color:var(--text-soft);font-size:18px;line-height:1.7}
.ghost,.text-btn,.circle-btn,.small-btn,.danger-btn{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 18px;font:inherit;color:var(--text);box-shadow:0 8px 20px rgba(178,113,167,.08)}
.ghost:hover,.small-btn:hover,.danger-btn:hover{transform:translateY(-1px);background:#fff9fd}
.panel{background:var(--bg-card);backdrop-filter:blur(14px);border:1px solid #fff;box-shadow:var(--shadow);border-radius:30px}
.gateway{max-width:560px;margin:60px auto;padding:48px;text-align:center}
.emoji{font-size:76px}
.gateway h2{font-family:'Nunito',sans-serif;font-size:34px;margin:20px 0 10px;color:#5a336e}
.gateway p{color:var(--text-soft);font-size:18px;line-height:1.7}
.gateway form{display:grid;gap:14px;text-align:left;margin-top:32px}
.gateway label{font-size:15px;color:#7f5f8d;font-weight:800}
.gateway input,input{background:#fff;border:2px solid #edd6e7;border-radius:16px;padding:17px 18px;font-size:19px;color:#4c345a;width:100%;outline:none}
input:focus{border-color:#f59bc0;box-shadow:0 0 0 4px rgba(245,155,192,.18)}
.primary{background:linear-gradient(120deg,#ffd86f,#ff9cc0);color:#5a3550;border:0;padding:17px 24px;border-radius:16px;font-weight:900;font-size:19px;cursor:pointer;box-shadow:0 14px 30px rgba(255,156,192,.28)}
.primary:hover{filter:brightness(1.03);transform:translateY(-1px)}
.primary:disabled{opacity:.6;cursor:wait}
.footnote,.tiny{font-size:14px;line-height:1.7;color:#9f8da8!important}
.hidden{display:none!important}
.session-bar{display:flex;justify-content:space-between;align-items:center;margin:20px 0;color:#6c5479;font-size:18px}
.text-btn{border:0;text-decoration:underline;background:transparent;box-shadow:none;color:#cd5f96;padding:8px 6px}
.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:22px}
.wheel-panel{padding:28px 30px;text-align:center}
.switch{display:flex;gap:6px;margin:0 auto 20px;width:fit-content;background:#fff8fb;padding:6px;border-radius:999px;border:1px solid #f0d4e6}
.switch button,.tabs button{background:none;color:#8f789a;border:0;border-radius:999px;padding:13px 28px;font:inherit;font-size:17px;font-weight:900;cursor:pointer}
.switch .active,.tabs .active{background:linear-gradient(120deg,#ffd76b,#ffb2ce);color:#5a3550;box-shadow:0 10px 20px rgba(244,145,190,.18)}
.wheel-wrap{position:relative;width:min(100%,500px);aspect-ratio:1;margin:22px auto}
.wheel-wrap canvas{display:block;width:100%;height:100%;border-radius:50%;border:12px solid #ffe4a0;box-shadow:0 0 0 7px #fff, 0 16px 45px rgba(222,129,181,.25);transition:transform 10s cubic-bezier(.12,.72,.09,1);background:#fff}
.pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:4;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:38px solid #ff93bb;filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;background:#fff4c8;color:#db6ea8;border:6px solid #fff;border-radius:50%;box-shadow:0 6px 20px rgba(218,104,160,.2);font-size:28px;pointer-events:none}
.big{width:min(100%,380px);font-size:22px}
.helper{font-size:14px;color:#8c7898}
.result-panel{padding:34px 28px;display:flex;align-items:center;text-align:center;flex-direction:column;justify-content:center}
.sticker{border:1px solid #f4bdd1;border-radius:999px;padding:11px 16px;font-size:12px;font-weight:900;letter-spacing:.14em;color:#d56d9e;background:#fff5fa}
.result-icon{font-size:86px;margin:24px 0 10px}
.result-panel h2{font-family:'Nunito',sans-serif;font-size:40px;line-height:1.22;margin:0;color:#603d74}
.result-text{color:#e5736c;font-size:30px;font-weight:900;overflow-wrap:anywhere;margin:18px 0 10px}
.result-meta{color:#7e6a88;font-size:16px;line-height:1.7}.line{width:100%;height:1px;background:#f0deea;margin:26px 0 10px}
footer{text-align:center;margin-top:40px;color:#af8da1;letter-spacing:.18em;font-size:12px;font-weight:800}
.overlay{position:fixed;inset:0;z-index:12;background:rgba(91,55,112,.24);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(7px)}
.admin{width:min(980px,100%);max-height:95vh;overflow:auto;padding:28px;background:#fffdfd}
.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:5px 0 20px;font-size:36px;color:#5b3770}
.circle-btn{border-radius:50%;padding:10px 14px}.circle-btn:hover{background:#fff4fa}
#admin-login-form{display:grid;gap:12px;max-width:460px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}.editor-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:22px 0}.edit-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.edit-heading h3{font-size:22px;margin:0;color:#674179}.small-btn{font-size:14px;padding:10px 14px}.danger-btn{font-size:14px;padding:10px 14px;background:#fff3f5;color:#ca486f;border-color:#f4c4d3}.inputs{display:grid;gap:12px}.edit-row{display:flex;gap:8px}.edit-row input{padding:13px 14px}.delete{border:1px solid #f1c0d0;background:#fff1f6;color:#d0517d;border-radius:12px;padding:0 14px;cursor:pointer;font-size:18px}.history-head,.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.history-actions{display:flex;gap:10px;flex-wrap:wrap}.table-wrap{overflow:auto;border-radius:18px;border:1px solid #f0deea;background:#fff}table{width:100%;border-collapse:collapse;font-size:15px;text-align:left}th,td{padding:15px 12px;border-bottom:1px solid #f5e5ef}th{color:#a76e8b;font-size:14px;text-transform:uppercase;letter-spacing:.06em}td{color:#614673}#page-label{color:#8b7796;font-size:14px;font-weight:700}.pagination{margin-top:18px}.end{display:block;margin:18px 0 0 auto}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#fff9ea;color:#5a3c4b;border:1px solid #f6dfa7;border-radius:16px;padding:14px 18px;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.12);text-align:center;max-width:90vw;font-size:16px;font-weight:700}
@media(max-width:760px){.shell{padding:24px 14px}.layout,.editor-cols{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.top-actions{justify-content:flex-start}.ghost{font-size:13px;padding:10px 12px}.wheel-panel{padding:20px 12px}.result-panel{padding:24px}.result-icon{font-size:54px;margin:12px}.result-panel h2{font-size:29px}.result-panel h2 br{display:none}.result-text{margin:12px;font-size:24px}.gateway{padding:30px 18px;margin:36px auto}.admin{padding:18px}.switch button{padding:10px 18px;font-size:15px}.subtitle,header p,.muted,.gateway p{font-size:16px}.session-bar{font-size:16px;gap:12px;flex-wrap:wrap}.history-actions{width:100%}}

/* V6 single-line title, cheerful presentation and confetti */
h1{font-size:clamp(28px,4.8vw,64px);white-space:nowrap;letter-spacing:-.058em;line-height:1.13}
h1 em{display:inline;color:#f39a35}
.top{align-items:center}
.celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti-piece{position:absolute;top:-9vh;width:12px;height:18px;border-radius:4px;opacity:0;animation:confetti-fall var(--dur,2.5s) ease-in forwards;transform:rotate(var(--rot,30deg))}
@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg) scale(.7)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx,40px),110vh,0) rotate(var(--turn,900deg)) scale(.8)}}
@media(max-width:760px){h1{font-size:clamp(23px,7.6vw,44px)}.top-actions{align-self:flex-start}}
@media(max-width:380px){h1{font-size:clamp(20px,7vw,28px)}}
@media(prefers-reduced-motion:reduce){.confetti-piece{animation-duration:0.2s!important}}

/* V7 extended birthday celebration and decorative fireworks */
.firework-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:2;filter:drop-shadow(0 0 3px rgba(255,169,90,.35))}
.firework-spark{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--spark-color,#ff83af);opacity:0;box-shadow:0 0 9px var(--spark-color,#ff83af);animation:firework-pop 1.45s cubic-bezier(.14,.65,.25,1) forwards}
@keyframes firework-pop{0%{opacity:0;transform:translate(0,0) scale(.15)}14%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.25)}}
@media(prefers-reduced-motion:reduce){.firework-burst,.firework-spark{display:none!important}}


/* V8: centered celebration masthead, stronger restaurant branding and legible subtitle */
.shell > header { text-align:center; margin:0 auto 34px; }
.shell > header .eyebrow {
  display:table; margin:0 auto 22px; padding:12px 27px;
  border-radius:999px; background:#ffffff;
  border:2px solid #ed9bbd; box-shadow:0 8px 25px rgba(200,91,143,.12);
  color:#9a336c; font-size:clamp(15px,1.8vw,21px);
  letter-spacing:.095em; font-weight:900; line-height:1.5;
}
.shell > header .top { display:flex; flex-direction:column; align-items:center; gap:10px; }
.shell > header .top > div:first-child { width:100%; }
.shell > header .top-actions { order:-1; align-self:flex-end; justify-content:flex-end; margin-bottom:4px; }
.shell > header h1 {
  width:100%; text-align:center; margin:10px 0 13px;
  font-size:clamp(29px,5vw,65px); line-height:1.14;
  letter-spacing:-.048em; white-space:nowrap;
}
.shell > header h1 em {display:inline;color:#f19632}
.shell > header .subtitle {
  color:#653b73; font-size:clamp(18px,2.15vw,25px);
  font-weight:800; line-height:1.5; margin:12px auto 0;
  text-align:center; text-shadow:0 1px 0 #fff;
}
@media(max-width:760px){
  .shell > header .eyebrow {font-size:clamp(13px,3.6vw,18px);padding:9px 13px;letter-spacing:.035em;max-width:100%;}
  .shell > header h1{font-size:clamp(20px,5.5vw,40px);letter-spacing:-.055em;}
  .shell > header .subtitle{font-size:clamp(17px,4.5vw,20px);}
  .shell > header .top-actions{align-self:center;margin-bottom:10px;}
}
@media(max-width:390px){
  .shell > header h1{font-size:clamp(18px,5.2vw,22px);}
}


/* V9: compact masthead, single-line prize heading and visible attribution */
.shell{padding-top:16px;padding-bottom:16px}
.shell > header{margin-bottom:12px}
.shell > header .eyebrow{margin-bottom:7px;padding:8px 20px}
.shell > header .top{gap:1px}
.shell > header .top-actions{margin-bottom:0}
.shell > header h1{margin:2px 0 5px;font-size:clamp(28px,4.2vw,57px)}
.shell > header .subtitle{margin:4px auto 0;font-size:clamp(16px,1.7vw,21px)}
.session-bar{margin:8px 0 12px}
.wheel-panel{padding-top:15px;padding-bottom:14px}
.wheel-wrap{width:min(100%,425px);margin:12px auto 15px}
.result-panel{padding:16px 22px}
.result-icon{font-size:62px;margin:10px 0 4px}
.result-panel h2{font-size:clamp(24px,2.3vw,33px);white-space:nowrap;letter-spacing:-.035em}
.result-text{font-size:clamp(20px,2vw,27px);margin:12px 0 8px}
.result-meta{font-size:15px}
.line{margin:14px 0 7px}
footer{margin-top:14px;font-size:13px;letter-spacing:.09em}
.gateway{margin:25px auto 18px;padding:25px 36px}
.gateway .emoji{font-size:56px}
.gateway h2{font-size:27px;margin:8px 0 6px}
.gateway p{font-size:17px;margin:6px 0}
.gateway form{margin-top:20px}
@media(max-width:760px){
 .shell{padding:13px 12px}
 .shell > header{margin-bottom:10px}
 .shell > header .eyebrow{margin-bottom:5px;padding:6px 10px}
 .shell > header h1{font-size:clamp(20px,5.35vw,36px)}
 .shell > header .top-actions{margin-bottom:4px}
 .shell > header .subtitle{font-size:16px}
 .wheel-wrap{width:min(100%,400px);margin:12px auto}
 .result-panel h2{font-size:clamp(23px,6vw,30px);white-space:nowrap}
 .result-panel{padding:17px 13px}
 .gateway{padding:24px 17px;margin:18px auto}
 .gateway h2{font-size:25px}
 footer{margin-top:12px}
}
@media(max-width:360px){.result-panel h2{font-size:22px}}

/* V10: centered admin password form, login button and guidance. */
#admin-login-view{text-align:center;margin:8px auto 4px;max-width:620px}
#admin-login-view > p{max-width:570px;margin:8px auto 20px;line-height:1.65}
#admin-login-form{margin:0 auto;max-width:480px;width:100%;justify-items:center}
#admin-login-form input,#admin-login-form button{width:100%;text-align:center}
@media(max-width:760px){#admin-login-view{max-width:100%}#admin-login-form{max-width:100%}}

/* V18 login and table number */
#table-number{width:100%}
.session-bar span{overflow-wrap:anywhere}


/* V19: responsive iPhone/iPad layout, portrait and landscape. */
html { -webkit-text-size-adjust: 100%; }
body { width: 100%; min-width: 0; }
.shell { width: 100%; min-width: 0; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.layout > *, .top > *, .wheel-panel, .result-panel { min-width: 0; }
.top-actions { max-width: 100%; }
.ghost, .primary, .small-btn, .text-btn, .danger-btn, .switch button { touch-action: manipulation; }
.wheel-wrap { width: min(100%, 425px); max-width: 100%; }
.wheel-wrap canvas { aspect-ratio: 1; height: auto; border-width: clamp(6px, 1.3vw, 12px); }
.result-panel h2 { white-space: normal; overflow-wrap: anywhere; }
.session-bar { min-width: 0; }
.session-bar > span { min-width: 0; overflow-wrap: anywhere; }
.gateway { width: min(100%, 560px); }
.overlay { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.admin { max-height: min(94dvh, 950px); overscroll-behavior: contain; }
.table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (min-width: 761px) and (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .wheel-panel { padding: 20px 16px; }
  .result-panel { padding: 22px 16px; }
  .wheel-wrap { width: min(100%, 390px); }
  .shell > header h1 { font-size: clamp(31px, 4.1vw, 48px); }
}
@media (max-width: 760px) {
  .shell { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .shell > header .top-actions { align-self: center; justify-content: center; gap: 7px; }
  .shell > header .top-actions .ghost { flex: 0 1 auto; min-height: 42px; white-space: normal; }
  .shell > header h1 { white-space: normal; font-size: clamp(25px, 6.4vw, 42px); line-height: 1.14; }
  .wheel-wrap { width: min(100%, 395px, 68dvh); margin: 14px auto; }
  .wheel-panel { padding: 18px 12px; }
  .result-panel { padding: 18px 14px; }
  .session-bar { margin: 10px 0; gap: 6px 12px; }
  .session-bar > span { flex: 1 1 200px; }
  .switch { max-width: 100%; }
  .switch button { padding: 12px 16px; }
  .gateway { margin: 16px auto; }
  .gateway input, #admin-password { font-size: 16px; }
  .overlay { align-items: center; }
  .admin { padding: 16px; border-radius: 22px; }
  .modal-head h2 { font-size: clamp(22px, 6vw, 32px); }
  th, td { padding: 11px 9px; white-space: nowrap; }
  footer { line-height: 1.6; }
}
@media (max-width: 390px) {
  .shell { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .wheel-wrap { width: min(100%, 330px, 63dvh); }
  .shell > header .top-actions .ghost { font-size: 12px; padding: 9px 10px; }
  .wheel-center { width: 50px; height: 50px; font-size: 23px; }
  .pointer { border-left-width: 15px; border-right-width: 15px; border-top-width: 30px; }
  .gateway { padding: 20px 14px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .layout { grid-template-columns: 1fr; }
  .wheel-wrap { width: min(100%, 485px); }
  .result-panel { padding: 24px; }
  .result-icon { font-size: 52px; margin: 6px 0; }
}
@media (min-width: 761px) and (orientation: landscape) {
  .wheel-wrap { width: min(100%, 390px, 58dvh); }
}

/* V20: better prize visibility and simple bookkeeping filters */
.winner-table{font-size:clamp(25px,4vw,48px);font-weight:950;color:#70427b;margin:12px 0;text-align:center}
.result-text{font-size:clamp(30px,3.6vw,51px)!important;line-height:1.18}
.history-filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:14px 0}
.history-filters label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700}
.history-filters input{width:min(210px,45vw);max-width:100%;box-sizing:border-box}
.daily-summary{padding:14px;margin:14px 0;border-radius:16px;background:#fff0f8;color:#684973;line-height:1.6;overflow-wrap:anywhere}
.history-unlock{max-width:380px;margin:22px auto;display:grid;gap:12px}
@media(max-width:760px){.result-text{font-size:clamp(28px,7.5vw,40px)!important}.winner-table{font-size:clamp(24px,7vw,37px)}}