/* Lotto Pro AI brand layer. Existing animation rules and game code remain intact. */
:root {
 color-scheme:light;
 --background:240 30% 98%; --foreground:232 31% 17%;
 --card:0 0% 100%; --card-foreground:232 31% 17%;
 --popover:0 0% 100%; --popover-foreground:232 31% 17%;
 --primary:255 51% 43%; --primary-foreground:0 0% 100%;
 --secondary:252 43% 87%; --secondary-foreground:232 31% 17%;
 --muted:250 30% 95%; --muted-foreground:232 14% 38%;
 --accent:255 51% 43%; --accent-foreground:0 0% 100%;
 --red:255 51% 43%; --red-foreground:0 0% 100%;
 --green:151 66% 26%;
 --gold:44 94% 59%; --gold-foreground:230 24% 13%;
 --charcoal:240 30% 98%; --ink:232 31% 17%;
 --border:246 29% 87%; --input:246 29% 87%; --ring:255 51% 43%;
 --shadow-elevated:0 20px 58px #30235512;
}
html { background:#f7f7fb; }
body { color:hsl(var(--foreground)); }
.glass-panel {
 background:#fff;
 border:1px solid #e1dced; border-radius:24px;
 box-shadow:var(--shadow-elevated);
}
.brand-logo { width:min(100%,290px);height:auto;min-height:58px;object-fit:contain; }
.welcome-panel { max-width:460px; padding:30px 26px; }
.welcome-panel>.mb-4:first-child { margin-bottom:28px; }
.welcome-panel>.text-xl {font-family:'Space Grotesk',Inter,sans-serif;font-size:30px;line-height:1.2;letter-spacing:-.7px;margin-bottom:20px;}
.welcome-panel>p {font-size:17px;line-height:1.65;color:#505570;margin-bottom:23px;}
.welcome-panel>.flex>svg {color:#5b3fa5;}
.welcome-panel>.text-left {padding:19px 17px;background:#f8f6fc;border-color:#e7e0f2;border-radius:15px;margin-bottom:26px;}
.welcome-panel h3 {font-size:16px;margin-bottom:13px;}
.welcome-panel ul {font-size:14px;line-height:1.6;}
.welcome-panel ul li {padding-left:2px;}
button.bg-red,a.bg-red {background:linear-gradient(135deg,#6545b5,#513598);box-shadow:0 6px 24px #8075f526,inset 0 1px 0 #ffffff24;}
button.bg-red:hover,a.bg-red:hover {background:linear-gradient(135deg,#5c3cab,#482e8b);}
button:not([aria-label]),a.bg-red {min-height:48px;}
.welcome-panel>button {min-height:54px;font-size:18px;letter-spacing:.4px;border:1px solid #b5aaff66;border-radius:14px;}
button[aria-label^="Number"].bg-white {color:#242335;background:#f5f3fa;}
button[aria-label^="Number"] {touch-action:manipulation;}
button:focus-visible,a:focus-visible {outline:3px solid #c7bfff;outline-offset:4px;}
.text-gray-300 {color:#505570;}
.text-muted-foreground {color:#565b72;}
.simulator-panel .grid {gap:8px;}
.simulator-panel .grid button {width:44px;height:44px;}
@media(max-width:767px) {
 #root>.min-h-screen {min-height:100svh;padding:20px 14px;}
 .glass-panel {padding:24px 20px;border-radius:22px;}
 .welcome-panel {padding:27px 23px;}
 .welcome-panel .brand-logo {width:260px;min-height:51px;}
 .welcome-panel>.text-xl {font-size:28px;}
 .welcome-panel>p {font-size:16px;line-height:1.6;}
 .welcome-panel ul {font-size:13px;line-height:1.65;}
 .welcome-panel>.text-left {padding:17px 14px;}
 .simulator-panel {padding:22px 16px;}
 .simulator-panel .grid {gap:7px;grid-template-columns:repeat(5,minmax(0,1fr));}
 .simulator-panel .grid button {width:42px;height:42px;}
 .fixed.rounded-full {max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;font-size:13px;text-align:center;}
}
@media(min-width:360px) and (max-width:767px) {
 .simulator-panel .grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
}
@media(min-width:420px) and (max-width:767px) {
 .simulator-panel .grid {grid-template-columns:repeat(7,minmax(0,1fr));}
}
@media(max-width:359px) {
 .welcome-panel {padding:24px 17px;}
 .welcome-panel>.text-xl {font-size:25px;}
 .welcome-panel>.text-left {padding:15px 12px;}
 .welcome-panel ul {font-size:12px;}
}
/* Review adjustments: semantic result colors and stronger offer hierarchy. */
:root {--gold:44 94% 59%;--gold-foreground:230 24% 13%;}
.result-miss {background:#d83f59!important;color:#fff!important;border-color:#f16a7f!important;}
.result-miss-panel {background:rgba(216,63,89,.16)!important;border:1px solid rgba(241,106,127,.28);}
.result-miss-panel .text-red {color:#a52543;}
.demo-notice {font-size:12px!important;line-height:1.55!important;color:#565b72!important;padding:11px 13px;border:1px solid #8075f549;border-radius:10px;background:#8075f50a;margin:0 0 18px!important;text-align:left;}
.offer-box {position:relative;padding:30px 26px!important;background:radial-gradient(ellipse at 50% 0,rgba(101,69,181,.08),transparent 70%),#faf8ff!important;border-color:#d6c9ee!important;box-shadow:0 14px 50px #30235514;}
.offer-price {margin:12px 0 22px;}
.offer-old-price {display:block;color:#62647b;font-size:23px;line-height:1.4;text-decoration-thickness:2px;}
.offer-current-price {display:flex;align-items:baseline;justify-content:center;gap:10px;margin:5px 0 3px;color:#20243b;line-height:1;}
.offer-currency {font-size:23px;font-weight:600;color:#5b3fa5;}
.offer-current-price strong {font:700 88px/1 'Space Grotesk',Inter,sans-serif;letter-spacing:-5px;}
.offer-payment {font-size:13px;color:#565b72;margin:10px 0 0;}
@media(max-width:767px){.offer-box{padding:26px 18px!important;}.offer-current-price strong{font-size:80px;}.welcome-panel>.demo-notice{font-size:11px!important;}}

.offer-discount {display:inline-flex;align-items:center;justify-content:center;margin:10px 0 11px;padding:7px 12px;border:1px solid #52cf8b55;border-radius:999px;background:#e7f5ed;color:#146443;font-size:12px;line-height:1.3;font-weight:750;letter-spacing:.5px;}
/* Purchase actions: green; game controls retain the violet identity. */
a.bg-red {background:linear-gradient(135deg,#117047,#0e7047);border:1px solid #5de0a570;box-shadow:0 8px 26px #0a8b462e,inset 0 1px 0 #ffffff21;}
a.bg-red:hover {background:linear-gradient(135deg,#12623f,#0f7248);}
a.bg-red:focus-visible {outline-color:#146443;}

/* Larger reading and touch targets for the 40+ audience. Animation rules stay intact. */
html {font-size:17px;}
body {line-height:1.6;}
.glass-panel {overflow-wrap:break-word;}
.glass-panel .text-xs {font-size:14px;line-height:1.6;}
.glass-panel .text-sm {font-size:16px;line-height:1.6;}
.glass-panel .text-base {font-size:18px;line-height:1.6;}
.glass-panel .text-lg {font-size:20px;line-height:1.5;}
.glass-panel h1,.offer-heading {font-family:'Space Grotesk',Inter,sans-serif;font-size:32px;line-height:1.22;letter-spacing:-.6px;font-weight:700;}
.glass-panel h2 {line-height:1.3;}
.glass-panel button:not([aria-label]),.glass-panel a.bg-red {min-height:54px;}
.glass-panel input,.glass-panel select {font-size:18px;min-height:52px;}
.welcome-panel {max-width:510px;}
.welcome-panel>p {font-size:18px;}
.welcome-panel h3 {font-size:18px;}
.welcome-panel ul {font-size:17px;line-height:1.65;}
.welcome-panel li+li {margin-top:10px;}
.simulator-panel .grid {grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;}
.simulator-panel .grid button {width:48px;height:48px;font-size:18px;}
.game-context {font-size:14px;line-height:1.5;color:#565b72;text-align:center;margin:10px 0 20px;}
.offer-intro,.result-intro {font-size:19px;line-height:1.6;color:#505570;margin:16px 0 28px;}
.offer-payment {font-size:16px;line-height:1.5;}
.offer-discount {font-size:14px;padding:9px 14px;}
.result-summary {padding:36px!important;width:100%;}
.result-total {background:linear-gradient(135deg,#e9f7ee,#f4efff);border:1px solid #62d8a64d;border-radius:18px;padding:28px 20px;margin:24px 0 14px;}
.result-total p {font-size:18px;color:#3c4954;}
.result-total strong {display:block;font-family:'Space Grotesk',Inter,sans-serif;font-size:clamp(38px,6vw,56px);line-height:1.3;color:#146443;margin:10px 0;}
.product-gallery {max-width:100%;padding:0 32px;}
.product-gallery .product-capture {border:1px solid #8075f54d;border-radius:15px;overflow:hidden;background:#f5f5fb;text-align:left;}
.capture-bar {padding:12px 16px;background:#f5f1fb;color:#3e3358;font-size:14px;font-weight:600;}
.product-capture img {display:block;width:100%;height:auto;}
.product-capture figcaption {background:#f5f1fb;color:#3e3358;padding:14px 16px;font-size:16px;line-height:1.5;}
.product-gallery button[aria-roledescription],.product-gallery button {min-width:44px;min-height:44px;}
@media(max-width:767px){
 .glass-panel {padding:26px 20px;}
 .glass-panel h1,.offer-heading {font-size:29px;}
 .welcome-panel ul {font-size:17px;}
 .welcome-panel>p {font-size:18px;}
 .simulator-panel {padding:24px 14px;}
 .simulator-panel .grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;}
 .simulator-panel .grid button {width:46px;height:46px;font-size:18px;}
 .result-summary {padding:28px 20px!important;}
 .product-gallery {padding:0 24px;}
 .capture-bar,.product-capture figcaption {font-size:14px;padding:10px;}
}
@media(min-width:440px) and (max-width:767px){
 .simulator-panel .grid {grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media(max-width:359px){
 .simulator-panel .grid {gap:6px;}
 .simulator-panel .grid button {width:42px;height:44px;}
}

.capture-fullsize {display:block;margin-top:8px;color:#57389d;text-decoration:underline;font-size:16px;min-height:44px;line-height:44px;}

/* Lottery selection: prominent, readable names on phone and desktop. */
.lottery-name{font-family:inherit;font-size:clamp(1.8rem,5vw,2.25rem);font-weight:800;line-height:1.2;letter-spacing:-.025em;margin:0 0 1rem;padding:.65rem .3rem;border-radius:.65rem;background:rgba(130,111,255,.10)}
.lottery-name-max{color:#146443}
.lottery-name-649{color:#57389d}
.result-weekly{font-size:1.125rem;line-height:1.5;margin:1.4rem auto 1rem;max-width:32rem;color:#20243b}

/* Transition CTA: gentle repeating brightness and glow, no rapid flashing. */
@keyframes testNowPulse{0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(143,121,255,.1)}50%{filter:brightness(1.18);box-shadow:0 0 24px 5px rgba(143,121,255,.42)}}
button.test-now-pulse{animation:testNowPulse 1.8s ease-in-out infinite}
button.test-now-pulse:hover,button.test-now-pulse:focus-visible{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){button.test-now-pulse{animation:none}}


/* Keep white labels on filled controls while moving text on panels to ink. */
.glass-panel .text-white { color:hsl(var(--foreground)); }
.glass-panel :is(.bg-red,.bg-green,.bg-primary).text-white,
.glass-panel :is(.bg-red,.bg-green,.bg-primary) > .text-white { color:#fff; }
.glass-panel .text-gray-200 { color:#343950; }
.glass-panel .bg-secondary\/30 { background-color:#f4f1f9; }
.glass-panel .text-muted-foreground\/40 { color:#61667d; }