/* MixUp Mayhem — playful arcade, never a generic knowledge-quiz panel. */
.mayhem-screen{max-width:860px;margin:auto;padding:10px 8px 52px;color:#29264f;font-family:inherit}
.mayhem-tile{border:2px solid #bda1f5!important;background:linear-gradient(135deg,#fff3fc,#eaeaff 58%,#e2fbff)!important;box-shadow:0 8px 23px #653a981b!important}
.mayhem-tile .ff-mini-icon{background:transparent!important;box-shadow:none!important}
.mayhem-tile img{width:100%;height:100%;object-fit:contain}
.mayhem-back{background:#ffffff21;color:inherit;border:1px solid #c8c2e7;border-radius:13px;padding:9px 13px;font-size:12px;font-weight:850;cursor:pointer}
.mayhem-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:17px 22px 27px;border-radius:27px;color:white;background:radial-gradient(circle at 83% 5%,#f57db9a6,transparent 45%),radial-gradient(circle at 10% 96%,#39c6c59c,transparent 40%),linear-gradient(135deg,#32237f,#5e35b2 54%,#af418e);box-shadow:0 15px 36px #3c278b47}
.mayhem-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 50% 42%,transparent 0,transparent 58px,#fff1 59px,#fff1 61px)}
.mayhem-hero>.mayhem-back{display:block;border:1px solid #ffffff70;color:white}
.mayhem-hero-icon{font-size:66px;display:block;filter:drop-shadow(0 7px 5px #1b144c77);margin:1px auto}
.mayhem-hero h1{font-size:clamp(37px,9vw,62px);line-height:1;letter-spacing:-.04em;font-weight:1000;margin:4px 0 12px;color:#fff}
.mayhem-hero h1 em{font-style:normal;color:#ffdf8a;text-shadow:0 4px 0 #8c3e88}
.mayhem-hero p{color:#f5f0ff;line-height:1.5;font-size:15px;max-width:570px;margin:0 auto 14px}
.mayhem-kicker{font-weight:950;letter-spacing:.2em;color:#d9c9ff;font-size:10px;margin:5px}
.mayhem-spark{position:absolute;font-size:38px;color:#ffdc91}
.mayhem-spark.one{top:36px;right:12%;transform:rotate(-19deg)}
.mayhem-spark.two{top:103px;left:10%;font-size:28px;color:#affff5}
.mayhem-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}
.mayhem-chip-row span{border:1px solid #ffffff72;background:#ffffff22;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900}
.mayhem-game-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:16px 0}
.mayhem-mini{display:flex;gap:7px;flex-direction:column;align-items:center;text-align:center;border:1px solid #e8def6;border-radius:18px;background:#fff;box-shadow:0 7px 16px #583ea40c;padding:12px 6px;min-height:122px}
.mayhem-mini>span{font-size:32px}
.mayhem-mini b{display:block;font-size:12px;color:#4d337e;line-height:1.25}
.mayhem-mini small{display:block;font-size:10px;line-height:1.3;color:#7c7392;margin-top:5px}
.mayhem-setup,.mayhem-panel{background:#fff;border:1px solid #e7dcf9;border-radius:23px;padding:21px;box-shadow:0 9px 22px #39317b13}
.mayhem-setup h2{font-size:21px;margin:0 0 14px;color:#39306b;text-align:center;font-weight:900}
.mayhem-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.mayhem-settings label,.mayhem-inputlabel{display:flex;flex-direction:column;gap:7px;text-align:left;font-size:12px;font-weight:900;color:#66538a}
.mayhem-settings select,.mayhem-inputlabel input{display:block;width:100%;min-width:0;min-height:47px;background:#faf8ff;border:1.5px solid #e1d9f2;border-radius:13px;padding:10px;color:#362d60;font-size:14px;font-weight:800}
.mayhem-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:17px 0 0}
.mayhem-main-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:13px 8px;min-height:111px;border:0;border-radius:19px;color:#fff;font-weight:900;font-size:17px;box-shadow:0 9px 22px #3d26892e;cursor:pointer}
.mayhem-main-button span{font-size:30px}
.mayhem-main-button small{font-size:11px;font-weight:600;color:#fffde5}
.mayhem-main-button.solo{background:linear-gradient(135deg,#138faf,#2bc7ba)}
.mayhem-main-button.multi{background:linear-gradient(135deg,#8b45bf,#e0589e)}
.mayhem-footnote{text-align:center;font-size:11px;color:#8a8099;margin:15px 0 0}
.mayhem-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 14px}
.mayhem-top strong{font-size:14px;color:#55377e}
.mayhem-top>span{font-weight:900;color:#7f5b9d;font-size:12px}
.mayhem-progress{display:flex;justify-content:space-between;align-items:center;background:#eeeaff;border-radius:13px;padding:12px;margin-bottom:8px;color:#6545a1;font-size:12px;font-weight:900}
.mayhem-timer{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:11px;background:#fff;border-radius:12px;font-size:12px;color:#60458f;font-weight:900}
.mayhem-timer-bar{height:10px;background:#eee8fb;overflow:hidden;border-radius:9px;flex:1}
.mayhem-timer-bar>div{height:100%;border-radius:10px;background:linear-gradient(90deg,#22c9bf,#be67e1);transition:width .23s linear}
.mayhem-timer>span{width:96px;text-align:right}
.mayhem-mode-label{font-size:12px;font-weight:1000;letter-spacing:.05em;color:#6e4bb2;text-align:center}
.mayhem-micro-tag{display:inline-block;font-size:9px;letter-spacing:.02em;border-radius:50px;background:#fae6fa;color:#a55091;padding:4px 8px;margin-left:8px}
.mayhem-panel h2{text-align:center;color:#312d5d;font-size:clamp(19px,5vw,25px);font-weight:1000;line-height:1.23;margin:13px 0 15px}
.mayhem-board{border-radius:19px;text-align:center;margin:8px auto 14px;max-width:590px;padding:14px;background:radial-gradient(circle at 25% 20%,#ffffff7f,transparent 65%),linear-gradient(135deg,#f1efff,#eaf7ff);border:1px solid #e6e2f4}
.mayhem-board>p{font-size:12px;font-weight:900;color:#756099;margin:2px 0 12px}
.mayhem-spot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:340px;margin:auto}
.mayhem-spot-tile{position:relative;height:62px;display:grid;place-items:center;background:#fff;border:2px solid #dddef5;border-radius:13px;box-shadow:0 3px 7px #5e5b890f}
.mayhem-spot-tile>span{font-size:30px;color:#8450c0}
.mayhem-spot-tile>small{position:absolute;top:2px;left:6px;font-size:10px;color:#afa2bd;font-weight:900}
.mayhem-memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:300px;gap:9px;margin:0 auto}
.mayhem-memory-grid>span{display:grid;place-items:center;height:70px;border-radius:15px;background:#fff;font-size:38px;border:2px solid #d9e8f1;box-shadow:0 2px 7px #44337b13}
.mayhem-box-stage{display:flex;justify-content:center;gap:8px}
.mayhem-box-stage span{font-size:clamp(34px,8vw,58px);filter:drop-shadow(0 5px 3px #50418532);animation:mayhem-bounce 2s ease-in-out infinite}
.mayhem-box-stage span:nth-child(2){animation-delay:.25s}.mayhem-box-stage span:nth-child(3){animation-delay:.55s}.mayhem-box-stage span:nth-child(4){animation-delay:.8s}
.mayhem-rush-target{font-size:clamp(21px,6vw,32px);color:#e74d84;font-weight:1000;text-shadow:0 2px #fff;animation:mayhem-bounce .6s ease-in-out infinite alternate}
.mayhem-majority-emoji{font-size:52px}
.mayhem-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mayhem-choice{display:flex;align-items:center;gap:9px;text-align:left;min-height:67px;border:2px solid #dedaf0;border-radius:17px;background:#fff;padding:12px;color:#35305c;font-size:15px;line-height:1.25;font-weight:900;cursor:pointer;overflow-wrap:anywhere;transition:transform .14s ease,background .14s ease}
.mayhem-choice:not(:disabled):hover{border-color:#ab87ea;background:#f7efff}
.mayhem-choice:not(:disabled):active{transform:scale(.97)}
.mayhem-choice:disabled{cursor:default;opacity:.87}
.mayhem-choice.good{background:#e0fbed;border-color:#55c5a5!important;color:#176b56}
.mayhem-choice.bad{background:#ffedf0;border-color:#efa1ae!important;color:#b04259}
.mayhem-choice-icon{display:grid;place-items:center;min-width:35px;height:35px;border-radius:11px;background:#ede8ff;font-size:13px;color:#7c51b1;flex-shrink:0;font-weight:1000}
.mayhem-choice.rush-answer{border-color:var(--pick-color);background:linear-gradient(90deg,color-mix(in srgb,var(--pick-color) 13%,white),white);font-size:15px}
.mayhem-choice.rush-answer .mayhem-choice-icon{background:var(--pick-color);color:#fff}
.mayhem-choices.gift-choices .mayhem-choice{background:linear-gradient(135deg,#fff4dc,#fdf0fa);border-color:#e4c4ec}
.mayhem-choices.gift-choices .mayhem-choice-icon{background:#fff9e7;font-size:25px}
.mayhem-watch-note{text-align:center;border:2px dashed #ceaae4;background:#f7efff;color:#704f9b;border-radius:14px;padding:17px;font-weight:900;font-size:13px}
.mayhem-feedback{border-radius:16px;padding:13px;margin-top:15px;border-left:5px solid #d58eaf;background:#fff2f7;color:#624677;font-size:13px}
.mayhem-feedback.win{border-left-color:#3cc6a5;background:#e8fbf5}
.mayhem-feedback strong{font-size:17px;font-weight:1000}
.mayhem-feedback p{margin:6px 0 0;line-height:1.4}
.mayhem-rewards,.mayhem-tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:11px}
.mayhem-rewards span,.mayhem-tally span{border-radius:9px;padding:7px 9px;background:#fff9;font-size:11px;color:#59487f}
.mayhem-tally b{display:block}
.mayhem-next{display:block;width:100%;margin:15px 0 0;padding:16px 12px;border:0;border-radius:16px;color:#fff;font-weight:950;font-size:17px;background:linear-gradient(120deg,#6c43bc,#df539c);box-shadow:0 8px 23px #4e258f35;cursor:pointer}
.mayhem-next:disabled{opacity:.5;box-shadow:none}
.mayhem-waiting{font-size:12px;color:#6f5b92;font-weight:850;text-align:center;margin:14px}
.mayhem-scores{padding:12px;margin:10px 0 15px;border-radius:16px;background:#fff;border:1px solid #e8ddf7}
.mayhem-score-title{display:flex;justify-content:space-between;color:#6f50ab;font-size:11px;font-weight:1000;letter-spacing:.1em}
.mayhem-score-title small{font-size:11px;letter-spacing:0}
.mayhem-score-row{display:flex;gap:7px;overflow-x:auto;padding-top:9px}
.mayhem-score-row span{display:flex;white-space:nowrap;justify-content:space-between;gap:13px;border-radius:10px;background:#f3eefc;padding:9px 10px;color:#594a84;font-size:12px;min-width:110px}
.mayhem-score-row span.you{background:#e0faf1}
.mayhem-finish{text-align:center;padding:24px 15px;background:linear-gradient(155deg,#fff,#f4edff);border:1px solid #e7ddf5;border-radius:24px}
.mayhem-finish h1{font-size:30px;font-weight:1000;color:#5f3a9b}
.mayhem-finish p{color:#79708d;font-size:13px}
.mayhem-trophy{font-size:75px;filter:drop-shadow(0 8px 6px #bcb1d4)}
.mayhem-number{font-size:68px;font-weight:1000;color:#a64fac;line-height:1.1;letter-spacing:-.03em}
.mayhem-hero.lobby{padding:20px}
.mayhem-hero.lobby h1{font-size:36px}
.mayhem-code-title{font-size:10px;color:#7e679f;letter-spacing:.18em;font-weight:1000;text-align:center}
.mayhem-room-code{font-size:43px;letter-spacing:.12em;color:#7541aa;font-weight:1000;text-align:center}
.mayhem-copy{display:block;width:100%;border:1px solid #bba7eb;border-radius:14px;background:#efeaff;color:#6745a1;padding:13px;margin-top:12px;font-size:14px;font-weight:950}
.mayhem-inputlabel{font-size:13px;margin:12px 0}
.mayhem-join-divider{text-align:center;margin:25px 0 11px;font-weight:1000;letter-spacing:.18em;font-size:10px;color:#a18eb2}
@keyframes mayhem-bounce{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
@media(max-width:650px){.mayhem-game-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mayhem-mini{min-height:75px;flex-direction:row;text-align:left;padding:9px}.mayhem-mini>span{font-size:27px}.mayhem-setup,.mayhem-panel{padding:15px}.mayhem-screen{padding:6px 3px 35px}.mayhem-choice{font-size:14px;min-height:59px;padding:10px 8px}.mayhem-choices{gap:8px}.mayhem-hero h1{font-size:39px}.mayhem-hero-icon{font-size:53px}.mayhem-memory-grid>span{height:61px;font-size:32px}.mayhem-spot-tile{height:58px}.mayhem-micro-tag{font-size:8px}.mayhem-settings{gap:8px}}
@media(max-width:360px){.mayhem-modes,.mayhem-settings{grid-template-columns:1fr}.mayhem-game-list{grid-template-columns:1fr}.mayhem-choice{font-size:13px}.mayhem-room-code{font-size:34px}}
@media(prefers-reduced-motion:reduce){.mayhem-box-stage span,.mayhem-rush-target{animation:none}}

/* V10.9 compact arcade setup: the five modes are automatic, so no mode-selection tiles. */
.mayhem-screen>.mayhem-setup{margin-top:17px}
.mayhem-all-five{margin:4px auto 15px;padding:12px 14px;border:1px solid #d6caee;
 background:linear-gradient(120deg,#f4efff,#e5faf7);border-radius:14px;
 color:#6f4c94;font-size:13px;font-weight:850;text-align:center;line-height:1.45}
.mayhem-tile .ff-mini-icon{background:linear-gradient(145deg,#b1dcf7,#eeb8e0)!important;
 border-radius:16px;overflow:hidden;box-shadow:0 3px 13px #48309122!important}
.mayhem-tile .ff-mini-icon img{width:100%;height:100%;object-fit:cover}
.mayhem-settings select:focus-visible{outline:3px solid #59d5c4;outline-offset:3px}

/* Mayhem hard-mode grids with subtle lookalikes and demanding memory rounds */
.mayhem-spot-grid{grid-template-columns:repeat(var(--mayhem-cols,4),minmax(0,1fr))!important;max-width:410px}
.mayhem-spot-tile{height:clamp(44px,10vw,62px)}
.mayhem-spot-tile>span{font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:clamp(25px,5vw,31px);font-weight:950}
.mayhem-memory-grid{grid-template-columns:repeat(var(--mayhem-cols,4),minmax(0,1fr))!important;max-width:370px}
.mayhem-memory-grid>span{height:clamp(55px,12vw,72px);font-size:clamp(27px,6vw,40px)}
.mayhem-choice.rush-answer{font-size:25px;justify-content:center;min-height:76px}
.mayhem-choice.rush-answer>span:last-child{font-size:40px;filter:drop-shadow(0 2px 2px #0002)}
@media(max-width:420px){.mayhem-memory-grid{gap:5px}.mayhem-memory-grid>span{height:57px;font-size:30px}.mayhem-spot-grid{gap:4px}.mayhem-spot-tile{height:50px}}