/* Friend quiz: focused questions with tactile, readable answer cards. */
body.bfg-play{background:radial-gradient(ellipse at top left,#eee4ff,transparent 55%),#faf9fd!important}
.bfg-play>.container{margin-top:24px!important}
.bfg-play .card{background:white;border:1px solid #e7dcf2;border-radius:26px;padding:24px 20px;box-shadow:0 18px 50px -30px #69429830}
.bfg-play .question-text{font-size:clamp(23px,5.5vw,29px);line-height:1.3;margin-bottom:9px}
.bfg-play .choose-label{color:#766188;font-size:12px;margin-bottom:22px}
.bfg-play .options-grid{gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bfg-play .option-card{min-width:0;min-height:150px;padding:9px 9px 14px;gap:12px;border:2px solid #e9e0f2;border-radius:20px;background:linear-gradient(160deg,#fff,#faf7ff);box-shadow:0 4px 0 #eee7f5;transition:border-color .18s,background .18s,box-shadow .18s;overflow:visible}
.bfg-play .opt-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:#f5effa}
.bfg-play .opt-label{color:#352145;font-size:14px;line-height:1.4;font-weight:650!important;padding:0 4px;overflow-wrap:anywhere}
@media(hover:hover){.bfg-play .option-card:not(.disabled):hover{border-color:#aa81e7;background:#f6efff;box-shadow:0 5px 0 #ddcbed,0 8px 18px #7750a312}}
.bfg-play .option-card:focus-visible{outline:3px solid #7c42d6;outline-offset:4px}
.bfg-play .option-card.selected{border-color:#8750d9;background:#f0e4ff;box-shadow:0 3px 0 #c8a7e9}
.bfg-play .option-card.correct{border-color:#388550;background:#edf9ef;box-shadow:0 3px 0 #bedfc6}
.bfg-play .option-card.wrong{border-color:#c55961;background:#fff1f1;box-shadow:0 3px 0 #edc6c9}
.bfg-play .option-card.correct::before,.bfg-play .option-card.wrong::before{top:7px;right:7px;width:28px;height:28px;border:2px solid white}
.bfg-play .option-card.correct::before{background:#287641}.bfg-play .option-card.wrong::before{background:#b43f49}
@media(max-width:370px){.bfg-play .card{padding:20px 13px}.bfg-play .options-grid{gap:11px}.bfg-play .option-card{min-height:125px;padding:7px 7px 11px;border-radius:16px}.bfg-play .opt-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.bfg-play .option-card{animation:none!important;opacity:1;transform:none!important;transition:none}}

/* Creator flow: spacious question surface and compact progress toolbar. */
.bfg-play>.container{max-width:560px!important;width:100%!important;padding:18px 16px 36px!important;min-height:0!important;max-height:none!important;height:auto!important;overflow:visible!important;margin:0 auto!important}
.bfg-play .topbar{padding:12px;gap:14px;background:#fff;border:1px solid #e7ddef;box-shadow:0 5px 22px #52327908;margin-bottom:20px;border-radius:19px}
.bfg-play .back-btn{width:40px;height:40px;background:#f5effc;border:0;border-radius:13px;flex-shrink:0}
.bfg-play .progress-bar-wrap{height:9px;background:#eee7f7;border-radius:20px;overflow:hidden}
.bfg-play .progress-bar-fill{background:linear-gradient(90deg,#aa7bea,#7843d3);border-radius:20px}
.bfg-play .counter{background:#f2eafb;color:#694195;border:1px solid #e8d9f7;padding:8px 10px;border-radius:12px;font-weight:700;font-size:13px;white-space:nowrap}
.bfg-play .card{padding:28px 22px!important;flex:none!important}
.bfg-play .question-text{font-size:clamp(25px,6vw,32px)!important;letter-spacing:-.035em;max-width:430px;margin:0 auto 12px}
.bfg-play .options-grid{flex:none;gap:14px}
.bfg-play .option-card{aspect-ratio:auto;position:relative;justify-content:flex-start;min-height:155px;padding:10px 10px 16px}
.bfg-play .opt-img{height:auto!important;max-height:145px;aspect-ratio:4/3}
.bfg-play .option-card.selected::before{top:7px;right:7px;width:28px;height:28px;background:#7843d3;border:2px solid white;z-index:2}
.bfg-play .answer-status:empty{display:none}
.bfg-play .answer-status{color:#694195;font-size:12px;text-align:center;margin-bottom:15px}
@media(max-width:370px){.bfg-play>.container{padding:12px 10px 28px!important}.bfg-play .card{padding:24px 14px!important}.bfg-play .options-grid{gap:11px}.bfg-play .option-card{min-height:125px;padding:8px 8px 12px}}
@media(min-width:800px){.bfg-play>.container{margin:24px auto!important}.bfg-play .card{padding:34px 28px!important}}

/* Bold creator experience: jewel-tone question header and collectible answer tiles. */
body.bfg-play{background:radial-gradient(ellipse at 0 0,#dfccfa,transparent 55%),radial-gradient(ellipse at 100% 90%,#e3edce,transparent 50%),#f6f2fb!important}
.bfg-play .topbar{background:#ffffffd9;backdrop-filter:blur(16px);border-color:#fff;box-shadow:0 8px 25px #5335750b}
.bfg-play .progress-bar-fill{background:linear-gradient(90deg,#a371ef,#7640d6);box-shadow:0 0 12px #9d69e970}
.bfg-play .card{padding:0!important;border-radius:30px!important;overflow:hidden;box-shadow:0 24px 65px -30px #41216855!important;border:1px solid #e6dced!important;background:#fff}
.question-hero{position:relative;isolation:isolate;padding:25px 24px 27px;background:radial-gradient(ellipse at 0 0,#7043a8,transparent 65%),linear-gradient(125deg,#352047,#241537);overflow:hidden;text-align:center}
.question-hero::before,.question-hero::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:210px;height:210px;border:1px solid #ffffff16;border-radius:50%;right:-145px;top:-75px;box-shadow:0 0 0 28px #ffffff05,0 0 0 56px #ffffff03}
.question-hero::after{width:110px;height:110px;top:auto;right:auto;left:-80px;bottom:-65px;border-color:#d1f38840}
.question-spark{display:grid;place-items:center;width:34px;height:34px;background:#d4f597;color:#40502b;border-radius:11px;margin:0 auto 15px;transform:rotate(-9deg);font-size:24px;box-shadow:0 0 0 5px #ffffff08}
.bfg-play .question-text{color:#fff!important;font-size:clamp(25px,5.8vw,32px)!important;line-height:1.22;letter-spacing:-.04em!important;margin-bottom:12px}
.bfg-play .choose-label{color:#ddcbee;font-size:12px;font-weight:500;margin:0}
.bfg-play .options-grid{padding:22px;gap:14px}
.bfg-play .option-card{--tile:#f3ecfd;--edge:#e1d2f4;background:linear-gradient(155deg,#fff,var(--tile));border:1.5px solid var(--edge);border-radius:21px;box-shadow:0 5px 0 var(--edge),0 10px 18px #38204e07;padding:9px 9px 14px;gap:11px;min-height:145px}
.bfg-play .option-card:nth-child(2){--tile:#fff1e8;--edge:#f0d9c6}.bfg-play .option-card:nth-child(3){--tile:#edf4ff;--edge:#d2dff2}.bfg-play .option-card:nth-child(4){--tile:#f0f7e7;--edge:#dbe8c8}
.bfg-play .opt-img{background:var(--tile);border-radius:14px;max-height:130px;width:100%;object-fit:contain}
.bfg-play .opt-label{font-size:14px;color:#3a274a;line-height:1.35;font-weight:700!important}
.bfg-play .option-card.selected{background:#eee0ff;border-color:#8451cd;box-shadow:0 4px 0 #b995e7,0 0 0 3px #b995e72a}
.bfg-play .option-card.selected::before{background:#6f35c3}
.bfg-play .answer-status:not(:empty){padding:13px 20px 0;margin:0}
@media(hover:hover){.bfg-play .option-card:not(.selected):hover{border-color:#a782d7;background:var(--tile);box-shadow:0 5px 0 #c6ace4,0 10px 24px #69468e20}}
@media(max-width:370px){.question-hero{padding:22px 18px}.bfg-play .options-grid{padding:17px 14px 22px;gap:12px}.bfg-play .option-card{min-height:120px;border-radius:17px}.bfg-play .opt-label{font-size:12px}}
@media(min-width:800px){.question-hero{padding:30px}.bfg-play .options-grid{padding:26px;gap:18px}}

/* Preserve the friend's right/wrong answer feedback over the tile palette. */
.bfg-play .option-card.correct{background:#edf9ef;border-color:#388550;box-shadow:0 4px 0 #bedfc6}.bfg-play .option-card.wrong{background:#fff1f1;border-color:#c55961;box-shadow:0 4px 0 #edc6c9}
.bfg-play .option-card.correct::before{background:#287641}.bfg-play .option-card.wrong::before{background:#b43f49}
.bfg-play .question-slide{flex:none}.bfg-play .option-card.disabled:hover{transform:none}
.bfg-play .name-card{border-radius:28px!important;background:linear-gradient(150deg,#fff,#f7f0ff)!important;box-shadow:0 24px 65px -30px #41216845!important}
.bfg-play .name-title{color:#352047;letter-spacing:-.04em}.bfg-play .nt-name{color:#8048c8}
.bfg-play .start-btn{background:linear-gradient(115deg,#9259e5,#7034c6);box-shadow:0 5px 0 #56269e,0 10px 22px #7840c62b;border-radius:15px}