/* Kingdom Quest v49: structurally distinct design profiles. */
body::before,body::after{pointer-events:none}

/* Live Game Show: a centered stage, light beams, console-like setup, and marquee board. */
body[data-design="show"]{overflow-x:hidden}
body[data-design="show"]::before{content:"";position:fixed;z-index:-1;inset:-18vh -12vw auto;width:58vw;height:95vh;background:linear-gradient(112deg,transparent 18%,rgba(78,218,255,.17) 46%,transparent 72%);transform:rotate(-13deg);transform-origin:top;animation:kqSpotlight 9s ease-in-out infinite alternate}
body[data-design="show"]::after{content:"";position:fixed;z-index:-1;inset:-20vh -15vw auto auto;width:58vw;height:100vh;background:linear-gradient(248deg,transparent 20%,rgba(244,48,168,.14) 48%,transparent 74%);transform:rotate(12deg);transform-origin:top;animation:kqSpotlight 11s ease-in-out infinite alternate-reverse}
body[data-design="show"] .app-shell{width:min(1540px,100%)}
body[data-design="show"] .topbar{border-bottom:1px solid rgba(74,224,255,.18)}
body[data-design="show"] .brand-mark{border-radius:50%;box-shadow:0 0 0 4px rgba(53,228,255,.12),0 0 30px rgba(53,228,255,.24)}
body[data-design="show"] .platform-tools button,body[data-design="show"] .platform-tools a{border-radius:999px;background:rgba(15,28,74,.72)}
body[data-design="show"] .setup-screen{grid-template-columns:1fr;gap:28px;min-height:auto;padding:42px 3vw 70px}
body[data-design="show"] .setup-copy{display:grid;justify-items:center;text-align:center}
body[data-design="show"] .setup-copy h1{max-width:1120px;font-size:clamp(3.9rem,8vw,8.5rem);line-height:.86;text-transform:uppercase;letter-spacing:-.065em}
body[data-design="show"] .setup-copy>p:not(.eyebrow){max-width:720px}
body[data-design="show"] .setup-copy .difficulty-ruler{width:min(620px,100%)}
body[data-design="show"] .setup-card{width:min(1120px,100%);margin-inline:auto;padding:clamp(22px,3vw,38px);border-radius:8px 34px 8px 34px;background:linear-gradient(145deg,rgba(24,31,86,.95),rgba(8,17,51,.97));clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
body[data-design="show"] .format-switch{grid-template-columns:repeat(4,1fr)}
body[data-design="show"] .experience-switch{grid-template-columns:repeat(3,1fr)}
body[data-design="show"] .mode-switch label>span,body[data-design="show"] .format-switch label>span,body[data-design="show"] .experience-switch span{min-height:96px;border-radius:5px 20px 5px 20px;background:linear-gradient(145deg,rgba(53,228,255,.06),rgba(149,54,230,.1));box-shadow:inset 0 1px rgba(255,255,255,.09)}
body[data-design="show"] .mode-switch input:checked+span,body[data-design="show"] .format-switch input:checked+span,body[data-design="show"] .experience-switch input:checked+span{transform:translateY(-4px);box-shadow:0 12px 32px rgba(28,185,255,.18),inset 0 0 0 2px var(--gold)}
body[data-design="show"] .score-strip{gap:10px;padding:12px;border:1px solid rgba(61,220,255,.18);background:rgba(5,13,42,.68);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
body[data-design="show"] .score-card{min-height:76px;border-radius:4px 18px 4px 18px}
body[data-design="show"] .board{gap:10px;padding:12px;background:rgba(5,12,40,.72);border:1px solid rgba(53,228,255,.18)}
body[data-design="show"] .category-title{border-radius:4px 18px 4px 18px;background:linear-gradient(145deg,#1c2d82,#5a248f);text-transform:uppercase;letter-spacing:.04em}
body[data-design="show"] .clue-button{min-height:clamp(72px,8vw,110px);border-radius:4px 20px 4px 20px;position:relative;overflow:hidden}
body[data-design="show"] .clue-button::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18),transparent 67%);transform:translateX(-130%);transition:transform .45s ease}
body[data-design="show"] .clue-button:hover::after{transform:translateX(130%)}
body[data-design="show"] dialog{border-radius:8px 32px 8px 32px}

/* Modern Study: a restrained editorial workspace instead of a game-show stage. */
body[data-design="study"]{background:linear-gradient(90deg,rgba(28,70,99,.055) 1px,transparent 1px),linear-gradient(#f7fafc 31px,rgba(28,70,99,.06) 32px);background-size:32px 32px}
body[data-design="study"] .stage-glow{display:none}
body[data-design="study"] .topbar{min-height:74px;margin-top:14px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.88);box-shadow:0 8px 30px rgba(29,58,78,.07);backdrop-filter:blur(12px)}
body[data-design="study"] .brand-mark{border-radius:8px;background:#173f67;color:#fff;box-shadow:none}
body[data-design="study"] .platform-tools{gap:3px}
body[data-design="study"] .platform-tools button,body[data-design="study"] .platform-tools a{border:0;border-radius:6px;background:transparent;color:#294b68}
body[data-design="study"] .platform-tools button:hover,body[data-design="study"] .platform-tools a:hover{background:#e6eef4}
body[data-design="study"] .setup-screen{grid-template-columns:minmax(260px,.62fr) minmax(560px,1.38fr);align-items:start;gap:clamp(30px,5vw,80px);padding:72px 2vw}
body[data-design="study"] .setup-copy{position:sticky;top:30px;padding:24px 0 24px 26px;border-left:7px solid #a76216}
body[data-design="study"] .setup-copy h1{font-size:clamp(3.1rem,5.4vw,5.8rem);line-height:1.02;letter-spacing:-.05em}
body[data-design="study"] .setup-copy h1 em{display:block;margin-top:9px;color:#245f88}
body[data-design="study"] .setup-card{padding:clamp(26px,4vw,50px);border:1px solid rgba(30,66,92,.15);border-radius:3px;background:#fff;box-shadow:0 24px 70px rgba(39,67,88,.1),inset 7px 0 #dbe7ef}
body[data-design="study"] .setup-card .eyebrow{color:#245f88}
body[data-design="study"] .mode-switch label>span,body[data-design="study"] .format-switch label>span,body[data-design="study"] .experience-switch span{min-height:86px;border:0;border-bottom:2px solid #d5e1e9;border-radius:2px;background:#f5f8fa;box-shadow:none}
body[data-design="study"] .mode-switch input:checked+span,body[data-design="study"] .format-switch input:checked+span,body[data-design="study"] .experience-switch input:checked+span{border-bottom-color:#a76216;background:#edf4f8;box-shadow:inset 4px 0 #245f88}
body[data-design="study"] .board-play-tools{border-radius:3px;background:#fff;box-shadow:0 10px 30px rgba(39,67,88,.08)}
body[data-design="study"] .score-strip{gap:0;border:1px solid var(--border);background:#fff}
body[data-design="study"] .score-card{border:0;border-right:1px solid var(--border);border-radius:0;background:#fff}
body[data-design="study"] .score-card:last-child{border-right:0}
body[data-design="study"] .score-card.active{background:#edf4f8;box-shadow:inset 0 -4px #a76216}
body[data-design="study"] .board{gap:2px;padding:2px;border:1px solid #b8cad7;background:#b8cad7}
body[data-design="study"] .category-title{border-radius:0;background:#173f67;color:#fff}
body[data-design="study"] .clue-button{min-height:clamp(62px,7vw,88px);border-radius:0;background:#fff;color:#245f88;font-family:inherit;font-weight:900}
body[data-design="study"] .clue-button:hover{background:#eaf2f7;color:#173f67}
body[data-design="study"] dialog{border-radius:4px;border-left:7px solid #245f88}

@keyframes kqSpotlight{from{transform:rotate(-16deg) translateX(-4vw)}to{transform:rotate(-7deg) translateX(6vw)}}
@media(max-width:900px){body[data-design="show"] .format-switch{grid-template-columns:1fr 1fr}body[data-design="study"] .setup-screen{grid-template-columns:1fr;padding-top:44px}body[data-design="study"] .setup-copy{position:static;max-width:680px}}
@media(max-width:700px){body[data-design="show"] .setup-copy h1{text-align:center}body[data-design="show"] .setup-card{clip-path:none;border-radius:18px}body[data-design="show"] .format-switch{grid-template-columns:1fr}body[data-design="show"] .experience-switch{grid-template-columns:1fr}body[data-design="show"] .score-strip{clip-path:none}body[data-design="study"] .topbar{margin-top:8px;border-radius:8px}body[data-design="study"] .setup-screen{padding:42px 0}body[data-design="study"] .setup-copy{padding-left:18px}body[data-design="study"] .setup-card{padding:22px 16px}}
@media(prefers-reduced-motion:reduce){body[data-design="show"]::before,body[data-design="show"]::after{animation:none}}
