/* Kingdom Quest v50: six design systems plus tactile game interactions. */
.design-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.design-mini.mosaic{background:linear-gradient(135deg,#240c3c,#081e48)}.design-mini.mosaic i{border-radius:50% 50% 4px 4px;background:#f0579b}.design-mini.mosaic b{background:linear-gradient(145deg,#25a9a0,#6845bb);border:2px solid #f2c96f}.design-mini.adventure{background:#d7b56d}.design-mini.adventure i{background:#73451f}.design-mini.adventure b{background:#2b6656;border-radius:2px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}.design-mini.broadcast{background:#07101b}.design-mini.broadcast i{background:#ff334f}.design-mini.broadcast b{background:#f4f7fb;border-radius:1px}

/* Shared tactile behavior for every preview except Classic. */
body:not([data-design="classic"]) .clue-button,body:not([data-design="classic"]) .format-switch label>span,body:not([data-design="classic"]) .experience-switch label>span,body:not([data-design="classic"]) .mode-switch label>span,body:not([data-design="classic"]) .score-card,body:not([data-design="classic"]) .pack-card,body:not([data-design="classic"]) .lab-card{position:relative;overflow:hidden;transform-style:preserve-3d;transform-origin:center;will-change:transform;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .25s ease}
body:not([data-design="classic"]) .is-tilting{transform:perspective(720px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-3px)!important;z-index:2;filter:brightness(1.08)}
body:not([data-design="classic"]) .tile-pressed{transform:perspective(720px) scale(.96)!important;filter:brightness(1.18)}
.tile-ripple{position:absolute!important;z-index:8;width:14px!important;height:14px!important;margin:-7px 0 0 -7px!important;border:2px solid rgba(255,255,255,.85)!important;border-radius:50%!important;background:rgba(255,255,255,.22)!important;pointer-events:none!important;animation:kqRipple .62s ease-out forwards!important}
body.design-switching .setup-copy,body.design-switching .setup-card,body.design-switching .game-screen .board,body.design-switching .game-screen .score-strip{animation:kqDesignEnter .6s cubic-bezier(.2,.8,.2,1) both}
body:not([data-design="classic"]) .score-card.active::after{content:"";position:absolute;inset:-1px;border:2px solid var(--gold);pointer-events:none;animation:kqActivePulse 1.7s ease-in-out infinite}
body:not([data-design="classic"]) .clue-button:not(.used){animation:kqTileArrive .45s backwards;animation-delay:calc(var(--row,0)*45ms)}
@keyframes kqRipple{to{width:190px;height:190px;margin:-95px 0 0 -95px;opacity:0}}
@keyframes kqDesignEnter{from{opacity:.25;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes kqActivePulse{50%{opacity:.25;transform:scale(.96)}}
@keyframes kqTileArrive{from{opacity:0;transform:translateY(12px) scale(.94)}}

/* Stained Glass: arched window geometry and luminous jewel panels. */
body[data-design="mosaic"]{--navy:#0b1534;--navy-2:#17214b;--panel:rgba(13,21,54,.94);--gold:#f1c76b;--gold-2:#ffe5a3;--blue:#3254a8;--blue-2:#6948b8;--border:rgba(244,208,126,.34);background:radial-gradient(circle at 50% -20%,rgba(255,202,94,.23),transparent 38rem),conic-gradient(from 30deg at 15% 20%,#101a43,#291147,#092f49,#101a43)}
body[data-design="mosaic"] .stage-glow{opacity:.5;background-image:linear-gradient(60deg,transparent 47%,rgba(248,215,136,.08) 48%,rgba(248,215,136,.08) 52%,transparent 53%),linear-gradient(-60deg,transparent 47%,rgba(248,215,136,.06) 48%,rgba(248,215,136,.06) 52%,transparent 53%);background-size:84px 145px}
body[data-design="mosaic"] .topbar{margin-top:12px;padding:10px 18px;border:1px solid rgba(241,199,107,.3);border-radius:40px 40px 12px 12px;background:rgba(8,14,39,.8);backdrop-filter:blur(14px)}
body[data-design="mosaic"] .setup-screen{align-items:start;padding-top:80px}
body[data-design="mosaic"] .setup-copy{text-align:center;padding:40px 28px;border:1px solid rgba(241,199,107,.28);border-radius:240px 240px 20px 20px;background:linear-gradient(145deg,rgba(213,49,124,.13),rgba(23,180,169,.1));box-shadow:inset 0 0 55px rgba(44,190,204,.08)}
body[data-design="mosaic"] .setup-copy h1{font-size:clamp(3.6rem,6.5vw,7rem)}
body[data-design="mosaic"] .setup-card,body[data-design="mosaic"] dialog{border:3px double #d8ae59;border-radius:80px 80px 16px 16px;background:linear-gradient(145deg,rgba(30,19,72,.97),rgba(7,38,58,.98));box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 0 42px rgba(82,52,180,.16)}
body[data-design="mosaic"] .format-switch label>span,body[data-design="mosaic"] .experience-switch span,body[data-design="mosaic"] .mode-switch label>span{border:2px solid rgba(241,199,107,.35);border-radius:45px 45px 8px 8px;background:linear-gradient(145deg,rgba(207,50,125,.16),rgba(35,174,169,.13))}
body[data-design="mosaic"] .category-title{border:2px solid #d6aa57;border-radius:48px 48px 5px 5px;background:linear-gradient(160deg,#93295f,#3b358f)}
body[data-design="mosaic"] .clue-button{border:3px double rgba(242,201,111,.8);border-radius:38px 38px 6px 6px;background:linear-gradient(155deg,#127a83,#3a3b98);box-shadow:inset 0 0 24px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.25)}
body[data-design="mosaic"] .clue-button:hover{background:linear-gradient(155deg,#20a19f,#6948bd);box-shadow:0 0 24px rgba(239,197,105,.35)}

/* Adventure Quest: tactile expedition cards and a warm map-grid surface. */
body[data-design="adventure"]{--ink:#fff5d6;--muted:#d8c69c;--navy:#1d332d;--navy-2:#27463c;--panel:rgba(35,54,43,.96);--gold:#f1bd55;--gold-2:#ffe1a0;--blue:#316e5c;--blue-2:#438e70;--border:rgba(242,205,126,.3);background:radial-gradient(circle at 80% 10%,rgba(241,189,85,.18),transparent 25rem),repeating-linear-gradient(15deg,rgba(255,255,255,.018) 0 2px,transparent 2px 11px),#172923}
body[data-design="adventure"] .stage-glow{background:radial-gradient(circle at 15% 30%,transparent 0 80px,rgba(242,205,126,.08) 81px 83px,transparent 84px),radial-gradient(circle at 75% 70%,transparent 0 130px,rgba(242,205,126,.06) 131px 133px,transparent 134px);opacity:1}
body[data-design="adventure"] .topbar{margin-top:14px;padding:10px 16px;border:2px solid #8d6839;border-radius:6px;background:#22392f;box-shadow:7px 7px 0 rgba(8,17,13,.35)}
body[data-design="adventure"] .brand-mark{border-radius:3px;transform:rotate(-3deg);background:#bd7e2d}
body[data-design="adventure"] .setup-screen{grid-template-columns:.82fr 1.18fr;align-items:start;padding-top:78px}
body[data-design="adventure"] .setup-copy{padding:30px;border:2px solid #8d6839;background:linear-gradient(145deg,rgba(92,64,35,.36),rgba(23,45,38,.72));clip-path:polygon(14px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 14px)}
body[data-design="adventure"] .setup-copy h1{font-size:clamp(3.4rem,6vw,6.7rem);text-shadow:3px 4px #10231c}
body[data-design="adventure"] .setup-card,body[data-design="adventure"] dialog{border:2px solid #997243;border-radius:5px;background:linear-gradient(145deg,#304a3d,#1c322a);box-shadow:10px 12px 0 rgba(8,17,13,.28)}
body[data-design="adventure"] .format-switch label>span,body[data-design="adventure"] .experience-switch span,body[data-design="adventure"] .mode-switch label>span{border-radius:3px;background:rgba(245,218,158,.06);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
body[data-design="adventure"] .score-card{border-radius:3px;background:#2e4c3e;box-shadow:4px 5px 0 rgba(8,17,13,.22)}
body[data-design="adventure"] .category-title{border-radius:2px;background:#704a25;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
body[data-design="adventure"] .clue-button{border:2px solid #a77d3f;border-radius:3px;background:linear-gradient(145deg,#3c795f,#285645);box-shadow:5px 6px 0 rgba(7,16,12,.32);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
body[data-design="adventure"] .clue-button:hover{background:#4b9573;transform:translate(-2px,-4px);box-shadow:8px 10px 0 rgba(7,16,12,.3)}

/* Broadcast Arena: compact television graphics, ticker scores, sharp feedback. */
body[data-design="broadcast"]{--ink:#f5f8fc;--muted:#9fb0c4;--navy:#07101b;--navy-2:#0d1b2b;--panel:rgba(9,20,34,.97);--gold:#ffcc32;--gold-2:#ffe47e;--blue:#1167a8;--blue-2:#168ac7;--red:#ff3654;--border:rgba(177,207,233,.22);background:linear-gradient(120deg,transparent 0 62%,rgba(13,91,151,.13) 62% 63%,transparent 63%),#06101a}
body[data-design="broadcast"] .stage-glow{opacity:.55;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 6px}
body[data-design="broadcast"] .topbar{margin-top:10px;padding:8px 14px;border-left:6px solid #ff3654;border-bottom:1px solid var(--border);background:#0b1928}
body[data-design="broadcast"] .brand-mark{border-radius:2px;background:#ff3654;color:#fff}
body[data-design="broadcast"] .setup-screen{grid-template-columns:minmax(420px,.9fr) minmax(560px,1.1fr);align-items:start;padding-top:64px}
body[data-design="broadcast"] .setup-copy{padding-top:22px}
body[data-design="broadcast"] .setup-copy h1{font-family:Arial,sans-serif;font-size:clamp(3.5rem,6.5vw,7.3rem);line-height:.87;text-transform:uppercase;letter-spacing:-.06em}
body[data-design="broadcast"] .setup-copy h1 em{display:block;padding:9px 12px;background:#ff3654;color:#fff;box-decoration-break:clone}
body[data-design="broadcast"] .setup-card,body[data-design="broadcast"] dialog{border:1px solid #27425b;border-radius:0;background:#0b1928;box-shadow:14px 14px 0 #030911}
body[data-design="broadcast"] .format-switch label>span,body[data-design="broadcast"] .experience-switch span,body[data-design="broadcast"] .mode-switch label>span{border-radius:0;border-left:4px solid #285f89;background:#101f30}
body[data-design="broadcast"] .format-switch input:checked+span,body[data-design="broadcast"] .experience-switch input:checked+span,body[data-design="broadcast"] .mode-switch input:checked+span{border-left-color:#ff3654;background:#172a3d}
body[data-design="broadcast"] .score-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;padding:3px;background:#ff3654}
body[data-design="broadcast"] .score-card{border:0;border-radius:0;background:#0b1928}
body[data-design="broadcast"] .score-card.active{background:#163b59;box-shadow:inset 0 -5px #ffcc32}
body[data-design="broadcast"] .board{gap:3px;padding:3px;background:#263e54}
body[data-design="broadcast"] .category-title{border-radius:0;background:#ff3654;color:#fff;text-transform:uppercase}
body[data-design="broadcast"] .clue-button{border:0;border-radius:0;background:linear-gradient(145deg,#0e5689,#092f50);font-family:Arial,sans-serif;font-weight:900;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-design="broadcast"] .clue-button:hover{background:#147ebd;box-shadow:inset 0 -6px #ffcc32}

@media(max-width:1000px){body[data-design="adventure"] .setup-screen,body[data-design="broadcast"] .setup-screen{grid-template-columns:1fr}body[data-design="adventure"] .setup-copy,body[data-design="broadcast"] .setup-copy{max-width:760px}}
@media(max-width:760px){.design-preview-grid{grid-template-columns:1fr}body[data-design="mosaic"] .setup-copy{border-radius:90px 90px 14px 14px;padding:30px 16px}body[data-design="mosaic"] .setup-card{border-radius:44px 44px 12px 12px}body[data-design="adventure"] .setup-screen,body[data-design="broadcast"] .setup-screen{padding-top:44px}body[data-design="broadcast"] .setup-copy h1 em{padding:6px}}
@media(prefers-reduced-motion:reduce){body:not([data-design="classic"]) .is-tilting,body:not([data-design="classic"]) .tile-pressed{transform:none!important}.tile-ripple{display:none}.design-switching .setup-copy,.design-switching .setup-card,.design-switching .game-screen .board,.design-switching .game-screen .score-strip,body:not([data-design="classic"]) .score-card.active::after,body:not([data-design="classic"]) .clue-button:not(.used){animation:none!important}}