:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#4d3627;background:#fefbf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}.topline{height:4px;background:linear-gradient(90deg,#f7c086,#f8cda1 48%,#f9d4ad)}header{background:#fff;border-bottom:1px solid #f7efe6;position:sticky;top:0;z-index:30}.nav{max-width:1200px;margin:auto;min-height:72px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:850;letter-spacing:-.7px;font-size:23px;color:#e09b54}.brand span{color:#f7c692}.links{display:flex;gap:24px;font-weight:600;font-size:14px;color:#8b654c}.links a:hover{color:#e09b54}.cta,.btn{border:0;border-radius:14px;padding:12px 18px;background:#efa85f;color:white;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.15s;box-shadow:0 10px 24px rgba(239,95,160,.18)}.btn:hover,.cta:hover{background:#de9345;transform:translateY(-1px)}.btn.secondary{background:#fff;color:#d9934b;border:1px solid #f2dec9}.btn.secondary:hover{background:#fefaf5}.btn.mint{background:#f7c692}.btn.small{font-size:13px;padding:10px 12px}.shell{max-width:1200px;margin:auto;padding:0 22px}.hero{padding:60px 0 32px;text-align:center}.eyebrow{display:inline-block;background:#fef4e9;color:#d9934b;padding:8px 14px;border-radius:99px;font-weight:800;font-size:13px}.hero h1{font-size:clamp(34px,5.2vw,59px);line-height:1.12;letter-spacing:-2px;margin:18px auto 16px;max-width:860px}.hero h1 em{font-style:normal;color:#efa85f}.hero p{color:#8f674e;font-size:18px;max-width:680px;margin:0 auto;line-height:1.65}.pills{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:22px}.pills span{border:1px solid #f3e5d6;background:white;border-radius:99px;padding:7px 12px;color:#8f674e;font-size:13px;font-weight:650}.workspace{display:grid;grid-template-columns:minmax(310px, .92fr) minmax(0,1.08fr);gap:24px;align-items:start;margin:28px auto 64px}.panel{background:#fff;border:1px solid #f2e7dc;border-radius:24px;box-shadow:0 18px 42px rgba(180,87,133,.08)}.controls{padding:25px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel h2{margin:0;font-size:22px;letter-spacing:-.5px}.muted{color:#8b7185}.step{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#d9934b;font-weight:800;margin:24px 0 10px}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.template{border:1.5px solid #f1e4d6;background:#fffdfa;text-align:left;padding:13px;border-radius:16px;color:#5f4534;font-weight:780;min-height:63px}.template.active{background:#fef7ef;border-color:#efa85f;box-shadow:0 0 0 2px #fdf3e8}.template span{display:block;font-size:11px;font-weight:500;color:#ab8a67;margin-top:4px}label{display:block;font-weight:750;font-size:13px;margin:13px 0 7px}.field{width:100%;padding:12px 13px;background:#fff;color:#513b2d;border:1px solid #eddfd0;border-radius:13px;outline:none}.field:focus{border-color:#efa85f;box-shadow:0 0 0 3px #fdf3e9}textarea.field{resize:vertical;min-height:132px;line-height:1.5}.hint{font-size:12px;color:#91798a;line-height:1.55;margin:7px 0}.checkrow{display:flex;align-items:center;gap:9px;margin:13px 0}.checkrow input{accent-color:#efa85f;width:17px;height:17px}.checkrow label{margin:0;font-weight:600}.action-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.preview{padding:24px;position:sticky;top:92px}.preview-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:17px}.stat{font-size:12px;color:#8b7185}.bingo-card{background:linear-gradient(150deg,#fef8f1,#fdf3e8 46%,#fdf1e4 100%);border-radius:24px;padding:24px;box-shadow:0 18px 36px rgba(181,91,133,.18);color:#61412d}.bingo-title{text-align:center;font-weight:900;font-size:clamp(26px,3.2vw,39px);line-height:1.14;letter-spacing:-1px;overflow-wrap:anywhere}.bingo-sub{text-align:center;color:#a27e59;font-weight:650;margin:7px 0 18px;font-size:13px}.bingo-head{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px}.bingo-head b{text-align:center;font-size:25px;color:#e09b54;letter-spacing:1px}.bingo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.cell{background:rgba(255,255,255,.94);border:1px solid rgba(236,170,196,.42);border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere;padding:6px;font-size:clamp(9px,1vw,12px);font-weight:700;line-height:1.28;color:#70513d;position:relative;user-select:none}.cell:hover{outline:2px solid #f4cea7}.cell.checked{background:#fcebd9;color:#8e542f}.cell.checked:after{content:'✓';position:absolute;right:4px;top:0px;font-size:13px;color:#db964f}.cell.free{background:#fef5eb;color:#b67c3f}.card-foot{font-size:10px;color:#a4805b;letter-spacing:.09em;text-align:center;margin:16px 0 0;font-weight:800}.progress{height:8px;background:#f6eee5;border-radius:20px;overflow:hidden;margin-top:15px}.progress div{height:100%;width:4%;background:linear-gradient(90deg,#f7c692,#efa85f);transition:width .2s}.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.preview-actions .btn{width:100%}.section{margin:70px auto}.section-title{font-size:32px;letter-spacing:-1px;margin:0 0 12px}.section-intro{color:#81697c;max-width:760px;line-height:1.7}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.feature{background:white;border:1px solid #f2e8dd;border-radius:20px;padding:24px}.feature .emoji{font-size:30px}.feature h3{margin:13px 0 6px}.feature p{color:#836a7c;line-height:1.65;font-size:14px;margin:0}.faq{max-width:850px;margin:70px auto}.faq details{border-bottom:1px solid #f0e6dc;padding:19px 0}.faq summary{cursor:pointer;font-weight:750}.faq p{color:#7f687a;line-height:1.7}.footer{background:#fff;border-top:1px solid #f0e6dc;padding:29px 0;margin-top:70px;color:#896f82;font-size:13px}.footer .shell{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.footer a{text-decoration:underline}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#7e563d;color:#fff;border-radius:12px;padding:12px 18px;z-index:50;box-shadow:0 10px 30px rgba(126,61,103,.18);display:none}.noscript{padding:30px;background:#fef8f2;color:#9b6441}@media(max-width:870px){.workspace{grid-template-columns:1fr}.preview{position:static}.links{display:none}.features{grid-template-columns:1fr 1fr}.hero{padding-top:44px}}@media(max-width:520px){.nav{min-height:62px}.hero h1{letter-spacing:-1.4px}.hero p{font-size:16px}.controls,.preview{padding:16px}.bingo-card{padding:12px}.bingo-grid,.bingo-head{gap:4px}.cell{border-radius:5px;font-size:clamp(8px,2.3vw,11px);padding:3px}.bingo-head b{font-size:20px}.features{grid-template-columns:1fr}.preview-actions{gap:7px}.preview-actions .btn{font-size:12px;padding:11px 7px}}
@media print{header,.hero,.controls,.preview-head,.preview-actions,.section,.faq,.footer,#toast,.progress,.stat{display:none!important}body{background:#fff}.workspace{display:block;margin:0}.panel{box-shadow:none;border:0}.preview{padding:0;width:100%}.bingo-card{width:175mm;height:175mm;margin:12mm auto;print-color-adjust:exact;-webkit-print-color-adjust:exact}.cell{font-size:12px}.bingo-title{font-size:34px}}

/* BingoBloom · production visual refinement */
body{background:radial-gradient(ellipse at 12% 7%,#fdf2e6 0,transparent 31%),radial-gradient(ellipse at 90% 17%,#fef4ea 0,transparent 28%),#fffcf9;min-height:100vh}
header{border-color:#f6ebdf;background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.hero{padding:65px 0 36px}.hero h1{max-width:780px;font-weight:850;color:#513a2b}.hero h1 em{background:linear-gradient(110deg,#df9446,#b5895b);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero:before{content:'✦   ♥   ✧';display:block;color:#e4b27d;font-size:21px;letter-spacing:27px;margin:0 auto 12px}
.eyebrow{box-shadow:0 6px 22px #ef5fa016}.workspace{gap:27px}.panel{box-shadow:0 18px 55px rgba(128,47,93,.075)}.controls{padding:30px}.preview{padding:26px}
.template{transition:.2s;position:relative}.template:hover{border-color:#ecbd8c;transform:translateY(-2px);box-shadow:0 8px 17px #b55f8712}
.template.active:after{content:'✓';position:absolute;top:10px;right:10px;color:#d8934c;font-weight:900}
.bingo-card{padding:27px;background:radial-gradient(circle at 85% 5%,#fffdfa 0,transparent 38%),linear-gradient(145deg,#fef4ea,#fcf0e3 50%,#faefe4);border:1px solid #fff;box-shadow:0 17px 40px #be6c9726}
.bingo-title{font-size:clamp(23px,2.6vw,35px)}.bingo-head b{font-size:23px}.cell{transition:background .15s,transform .15s;cursor:pointer}.cell:active{transform:scale(.96)}.cell:focus-visible{outline:3px solid #bc8348;outline-offset:1px}.cell.checked{box-shadow:inset 0 0 0 1px #e8c5a1}
.preview-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-actions .btn{padding:12px 7px;font-size:13px;min-width:0}.preview-head .stat{white-space:nowrap}
.section-title{color:#573d2d}.feature{transition:transform .2s,box-shadow .2s}.feature:hover{transform:translateY(-3px);box-shadow:0 10px 30px #ad63891a}
#toast{max-width:calc(100vw - 28px);text-align:center}.privacy-note{font-size:12px;line-height:1.5;color:#a98662;margin:12px 0 0}
@media(max-width:870px){.hero{padding-top:42px}.workspace{gap:16px}.preview{position:static}.controls{padding:24px}.preview{padding:22px}}
@media(max-width:520px){.shell{padding:0 15px}.hero{padding:32px 0 10px}.hero:before{font-size:15px}.hero h1{font-size:clamp(32px,10vw,42px);margin:13px auto}.hero p{font-size:15px}.pills{margin-top:17px}.pills span{font-size:11px;padding:6px 9px}.workspace{margin-top:23px}.controls,.preview{padding:17px}.bingo-card{padding:12px}.bingo-title{font-size:clamp(21px,6vw,27px)}.bingo-sub{font-size:11px}.bingo-head{gap:3px}.bingo-grid{gap:3px}.bingo-head b{font-size:19px}.cell{font-size:clamp(7px,2.25vw,10px);line-height:1.17;padding:2px;border-radius:6px}.preview-actions{gap:5px}.preview-actions .btn{font-size:11px;padding:11px 3px}.section{margin:45px auto}.section-title{font-size:27px}}
@media print{.hero:before{display:none!important}.preview-actions{display:none!important}.bingo-card{border:0;box-shadow:none}}

/* Final social-play enhancements */
.player-toolbar{background:#fffcf8;border:1px solid #f3e7da;padding:14px;border-radius:17px;margin-top:16px}.player-toolbar label{margin-top:0}.style-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.style-chip{border:1px solid #efddca;background:#fff;border-radius:99px;padding:9px 13px;color:#775742;font-weight:750;font-size:12px}.style-chip.selected{background:#faede0;border-color:#e9a967;color:#9d572b}.player-toolbar .hint{margin-bottom:0}
:root[data-card-style=lavender] .bingo-card{background:linear-gradient(145deg,#fef6ed,#fdeddd 58%,#fcf3e9)}:root[data-card-style=lavender] .bingo-head b{color:#c69562}:root[data-card-style=lavender] .cell.checked{background:#fae2ca;color:#83563a}
:root[data-card-style=peach] .bingo-card{background:linear-gradient(145deg,#fdf2e7,#fdeede 58%,#fef6ee)}:root[data-card-style=peach] .bingo-head b{color:#dc9f5f}:root[data-card-style=peach] .cell.checked{background:#fbdebf;color:#84573a}
.cell:focus-visible,.btn:focus-visible,.style-chip:focus-visible{outline:3px solid #a67e54;outline-offset:2px}
@media(max-width:520px){.style-row{gap:5px}.style-chip{padding:8px 10px}.preview-actions{grid-template-columns:1fr 1fr}}
@media print{.player-toolbar{display:none!important}}

/* social game design */
.play-challenges{margin:18px 0;background:linear-gradient(140deg,#fefbf8,#fef8f1);border:1px solid #f4e5d6;border-radius:20px;padding:17px}.extras-title{display:flex;gap:11px;align-items:center;color:#714f39}.extras-title .spark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fdf0e2;color:#d9934b;font-size:22px}.extras-title strong{display:block;font-size:16px}.extras-title small{display:block;color:#a98662;margin-top:3px}.mode-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.mode{padding:9px 11px;border-radius:99px;background:#fff;color:#8a644c;border:1px solid #efddcb;font-weight:750;font-size:12px}.mode.active{background:#d98e40;color:#fff;border-color:#d98e40}.challenge-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.challenge-metrics>div{text-align:center;background:#fff;border:1px solid #f1e7dc;border-radius:12px;padding:10px 4px}.challenge-metrics small{display:block;font-weight:800;font-size:10px;color:#ac8b69;letter-spacing:.04em}.challenge-metrics strong{display:block;margin-top:3px;font-size:20px;color:#7d5033;font-variant-numeric:tabular-nums}.extra-actions{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.challenge-help{font-size:12px;color:#9e7b57;line-height:1.5}.bingo-card.victory{animation:glowWin .85s ease-out}@keyframes glowWin{40%{box-shadow:0 0 0 7px #fce8d3,0 19px 40px #e971a470}}@media(max-width:520px){.mode-buttons{display:grid;grid-template-columns:1fr 1fr}.mode{font-size:11px}.extra-actions .btn{flex:1;padding:10px 8px;font-size:11px}.challenge-metrics strong{font-size:17px}}

/* BINGOBLOOM BARBIE-PINK PRODUCTION DESIGN SYSTEM */
:root{--pink:#f29d45;--barbie:#ed8416;--grape:#b67736;--ink:#5b3218;--blush:#fef8f1;--frost:#fdf1e4;--line:#f4d7b9;background:#fdf3e8;color:var(--ink)}
body{background:radial-gradient(ellipse at 8% 6%,#fbe4cd,transparent 36%),radial-gradient(ellipse at 90% 23%,#fbe4cc,transparent 45%),linear-gradient(150deg,#fdf3e9 0%,#fcead8 55%,#fcebda 100%);min-height:100vh}
.topline{height:6px;background:linear-gradient(90deg,#f3a24d,#f7c693,#d99650,#f3a24e)}
header{background:#ffebf8eF;border-bottom:1px solid #f2d2b0;backdrop-filter:blur(18px)}
.brand{color:#e58016;font-size:25px}.brand span{color:#ba7a37}.links{color:#8b5838}.links a:hover{color:#d67511}
.cta,.btn{background:linear-gradient(135deg,#f08e28,#d9842c);box-shadow:0 9px 20px #dd3d972a;border-radius:15px}
.cta:hover,.btn:hover{background:linear-gradient(135deg,#da7a16,#a95a27)}
.btn.secondary{background:#fef8f1;color:#a35c2f;border:1px solid #e9c7a3}.btn.secondary:hover{background:#fbe8d5}.btn.mint{background:linear-gradient(135deg,#ca8946,#ec963d)}
.hero{position:relative;padding-top:66px}.hero:before{background:radial-gradient(circle at 50% 42%,#fcbee481,transparent 62%);pointer-events:none}
.hero h1{color:#673414}.hero h1 em{color:#ee8a21}.hero p{color:#865d42}.eyebrow{background:#f8e6d4;color:#b55c23;border:1px solid #f3cfa9}
.pills span{background:#fef5eb;color:#875433;border-color:#eecfaf}
.panel,.feature{background:linear-gradient(150deg,#fefbf8,#fef5eb);border:1px solid #eecead;box-shadow:0 15px 35px #bc399924}
.controls{background:linear-gradient(155deg,#fefaf6,#fdf2e7)}
.step{color:#bb5f24}.muted,.hint,.stat{color:#8c664d}
.template{background:#fef8f1;color:#784d32;border-color:#eed2b5}.template.active{background:#fbe7d2;border-color:#d68b3d;box-shadow:0 0 0 2px #fbf4ec}.template span{color:#9c7a56}
.field{background:#fffcf9;color:#6a4025;border-color:#e5c8a9}.field:focus{border-color:#d17d26;box-shadow:0 0 0 3px #fbe7d3}.checkrow input{accent-color:#d77f23}
.preview{background:linear-gradient(150deg,#fefbf7,#fdf3e8)}
.bingo-card{background:radial-gradient(circle at 5% 4%,#fefaf5,#fce9d5 56%,#f9d8b5);color:#6b3818;border:2px solid #f5cfa8;box-shadow:0 19px 35px #c23a9a30}
.bingo-head b{color:#c35b18}.bingo-sub{color:#997754}.cell{background:#fefaf5;border:1px solid #efcca7;color:#784f34}.cell:hover{outline:2px solid #e7933b}.cell.checked{background:#f5c18a;color:#603b23}.cell.checked:after{color:#8d491d}.cell.free{background:#fad7b3;color:#894b24}.card-foot{color:#936b51}
.progress{background:#f3dbc3}.progress div{background:linear-gradient(90deg,#ed8921,#ce8437)}
.player-toolbar,.play-challenges{background:linear-gradient(130deg,#fdf2e6,#fdeedf);border-color:#edcba8}
.style-chip,.mode{background:#fef8f1;border-color:#e9c6a1;color:#845131}.style-chip.selected,.mode.active{background:#c67622;color:#fff;border-color:#c67622}
.challenge-metrics>div{background:#fef5eb;border-color:#eacdae}.challenge-metrics strong{color:#9b5224}.challenge-metrics small,.challenge-help{color:#8f674e}
.section-title{color:#714224}.section-intro,.feature p,.faq p{color:#8f674e}.faq details{border-color:#e9caa9}
.footer{background:#fcebda;border-color:#e9caaa;color:#865e45}.footer a:hover{color:#b4571c}
#toast{background:#8f5028;box-shadow:0 12px 30px #85206d33}
:root[data-card-style=lavender] .bingo-card{background:linear-gradient(140deg,#fdf3e9,#fadbbb,#f8e0c8)}
:root[data-card-style=peach] .bingo-card{background:linear-gradient(140deg,#fef4ea,#fce5ce,#f3dabf)}
.preview,.controls{min-width:0}.bingo-grid,.bingo-head{min-width:0}.cell{min-width:0;overflow:hidden}
/* On small screens show playing before long edit form, preventing first-play abandonment */
@media(max-width:870px){.workspace{display:flex;flex-direction:column}.preview{order:0;width:100%}.controls{order:1;width:100%}}
@media(max-width:520px){.hero{padding:36px 0 18px}.hero h1{font-size:34px}.workspace{margin-top:18px}.preview,.controls{padding:14px}.bingo-card{padding:12px}.cell{font-size:clamp(7px,2.4vw,11px);border-radius:6px}.preview-actions .btn{font-size:11px;min-height:43px}.cta{padding:10px 13px;font-size:12px}}
/* Dedicated onboarding and completion elements */
.quickstart{background:linear-gradient(115deg,#fbe2c8,#fbdfc1);border:1px solid #ecc296;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;margin-top:18px;color:#794320;box-shadow:0 12px 24px #bf49a51c}
.quickstart strong{font-size:17px}.quickstart p{margin:5px 0 0;font-size:13px;color:#8b5d40}
.quickstart .btn{white-space:nowrap}
.result-banner{background:linear-gradient(130deg,#fadcbd,#fbe3ca);border:1px solid #e4b88a;border-radius:14px;padding:13px 15px;margin:12px 0;color:#7d4521;font-weight:800;text-align:center}
.result-banner[hidden]{display:none!important}
@media(max-width:600px){.quickstart{flex-direction:column;text-align:center}.quickstart .btn{width:100%}}
@media print{body{background:#fff}.quickstart,.result-banner{display:none!important}}