/* The arena: artwork, depth, and optional feedback. No challenge rules live here. */
.challenge-page { background:var(--cq-bg); }
.challenge-arena { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1; background:#111315; }
.challenge-arena::after { display:none; }
.challenge-shell { position:relative; }
.challenge-intro { min-height:328px; border:0; border-radius:0; padding:40px 0 24px; background:transparent; }
.challenge-intro::after { display:none; }
.arena-art { position:absolute; inset:0 -56px; z-index:-1; overflow:hidden; background:linear-gradient(90deg,#111315ed 4%,#11131570 65%),url('/assets/challenge-2027-arena.svg') center/cover; mask-image:linear-gradient(#0008,transparent); }
.arena-art::before { display:none; }
.arena-orbit { display:none; }
.arena-orbit::before,.arena-orbit::after { content:''; position:absolute; width:14px; height:14px; background:#ecc17d; box-shadow:0 3px 18px #ffb76c90; transform:rotate(45deg); }
.arena-orbit::before { left:51px; top:51px; }
.arena-orbit::after { right:51px; bottom:51px; width:7px; height:7px; }
.arena-shard { display:none; }
.arena-shard:nth-child(2) { left:48%; top:21%; transform:rotate(24deg); }
.arena-shard:nth-child(3) { left:60%; bottom:10%; width:17px; height:42px; animation-delay:-4s; }
.arena-shard:nth-child(4) { right:3%; top:27%; width:30px; height:74px; animation-delay:-2s; }
.challenge-year { font-size:clamp(76px,9.3vw,124px); color:#ffdc91; text-shadow:0 6px 24px #120714a6; }
.challenge-title-rest { font-size:clamp(22px,2.4vw,33px); }
.challenge-intro h1 { gap:24px; }
.challenge-title > p { font-size:15px; margin-top:24px; }
.challenge-title > p strong { font-size:17px; }
.challenge-card-fan { width:390px; height:270px; bottom:18px; right:34px; transition:transform 180ms ease-out; }
.challenge-card-fan img { width:250px; height:250px; animation:card-hover 6s ease-in-out infinite alternate; }
.challenge-card-fan img:nth-child(1) { --card-angle:-19deg; left:-26px; top:29px; animation-delay:-2s; }
.challenge-card-fan img:nth-child(2) { --card-angle:3deg; left:79px; top:-5px; animation-delay:-4s; }
.challenge-card-fan img:nth-child(3) { --card-angle:18deg; left:188px; top:46px; }
.challenge-atmosphere { display:flex; justify-content:flex-end; gap:6px; margin:12px 0 0; }
.challenge-atmosphere #newChallengeQuick { margin-right:auto; color:#ffe0a0; border-color:#9b794b; }
.challenge-page .challenge-atmosphere button { display:flex; align-items:center; gap:7px; min-height:40px; padding:6px 10px; color:#d6c6dd; border-color:#5c4862; background:#18121e; font-size:10px; }
.challenge-atmosphere button[aria-pressed='true'] { color:#ffe0a0; border-color:#9b794b; }
.challenge-atmosphere svg { width:16px; height:16px; flex-shrink:0; }
.challenge-atmosphere button[aria-pressed='false'] .sound-wave { display:none; }
.challenge-rulebar { margin-top:0; }
.challenge-editor { background:transparent; padding:0; border-radius:0; box-shadow:none; }
.challenge-library { background:transparent; box-shadow:none; }
.challenge-workspace { gap:24px; }
.challenge-deck .challenge-slot.is-empty { background:#ffffff03; border:1px dashed #ffffff26; }
.challenge-slot.is-empty::after { display:none; }
.challenge-deck .challenge-slot.is-empty .card-back { opacity:.23; }
.challenge-page .challenge-slot { transition:transform 220ms var(--cq-ease),background 180ms var(--cq-ease); }
.challenge-slot:focus-visible { outline-offset:1px; }
.challenge-page .is-primary { position:relative; overflow:hidden; }
.challenge-page .is-primary::after { content:''; position:absolute; inset:-50% -30%; background:linear-gradient(110deg,transparent 40%,#fff7d95c 50%,transparent 60%); transform:translateX(-110%); pointer-events:none; }
.challenge-page .is-primary:hover::after { transform:translateX(110%); transition:transform 600ms ease-out; }
.challenge-page button:active:not(:disabled) { transform:scale(.97); }
.challenge-score { background:transparent; box-shadow:none; border-bottom:1px solid var(--cq-line); }
.challenge-score .challenge-wins strong { font-size:52px; }
.challenge-page.is-reset .challenge-editor { background:transparent; border-top:1px solid #dfbb7b60; padding-top:20px; }
.challenge-page.is-playing .challenge-intro { min-height:128px; }
.challenge-page.is-playing .arena-art { opacity:.7; }
.challenge-page.is-playing .challenge-card-fan { display:block; width:220px; height:125px; right:50px; bottom:-12px; }
.challenge-page.is-playing .challenge-card-fan img { width:135px; height:135px; }
.challenge-page.is-playing .challenge-card-fan img:nth-child(1) { left:0; top:12px; }
.challenge-page.is-playing .challenge-card-fan img:nth-child(2) { left:55px; top:0; }
.challenge-page.is-playing .challenge-card-fan img:nth-child(3) { left:110px; top:18px; }
.challenge-card-cell { position:relative; min-width:0; }
.challenge-card-cell > .challenge-card { width:100%; height:100%; }
.challenge-page .card-detail-button { position:absolute; top:2px; right:0; display:grid; place-items:center; width:28px; height:28px; min-height:28px; padding:5px; border-radius:50%; background:#1b1329; border:1px solid #8c7296; color:#f2d7fe; opacity:.7; }
.card-detail-button svg { width:16px; height:16px; }
.challenge-card-cell:hover .card-detail-button,.card-detail-button:focus-visible { opacity:1; }
.challenge-card-tooltip { position:fixed; z-index:90; width:360px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:16px; padding:18px; border-radius:12px; border:1px solid var(--cq-line); color:var(--cq-ink); background:#1c1f22; font-size:13px; }
.challenge-card-tooltip img { width:100%; height:auto; object-fit:contain; }
.challenge-card-tooltip strong { display:block; font-size:16px; }
.challenge-card-tooltip small,.card-inspect-dialog small { display:block; margin:8px 0; color:var(--cq-gold); font-size:11px; font-weight:700; line-height:1.5; }
.challenge-card-tooltip p { margin:0; line-height:1.6; color:var(--cq-ink); overflow-wrap:anywhere; }
.card-inspect-dialog { width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; color:var(--cq-ink); background:var(--cq-bg); border:1px solid var(--cq-line); border-radius:14px; padding:32px 24px 24px; text-align:center; }
.card-inspect-dialog[open] { animation:card-inspect-arrive 180ms var(--cq-ease); }
@keyframes card-inspect-arrive { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.card-inspect-dialog::backdrop { background:#080a0de6; }
.card-inspect-dialog > img { display:block; width:min(300px,100%); height:auto; max-height:44dvh; aspect-ratio:1; object-fit:contain; margin:0 auto 18px; }
.card-inspect-dialog h2 { margin:0; font-size:clamp(23px,4vw,28px); line-height:1.2; overflow-wrap:anywhere; }
.card-inspect-dialog p { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--cq-line); font-size:14px; line-height:1.65; text-align:left; overflow-wrap:anywhere; }
.card-inspect-dialog .dialog-close { position:absolute; top:10px; right:10px; min-width:44px; min-height:44px; padding:4px; font-size:24px; line-height:1; }
.challenge-moment { position:fixed; right:24px; bottom:24px; z-index:80; pointer-events:none; padding:20px 28px; background:linear-gradient(110deg,#453027,#271c30); border:1px solid #dfb36e; border-radius:12px; box-shadow:0 14px 50px #0008; max-width:calc(100vw - 32px); }
.challenge-moment strong { display:block; color:#ffdd94; font-style:italic; font-size:26px; font-weight:900; letter-spacing:-.03em; }
.challenge-moment span { display:block; margin-top:4px; color:#f1deef; font-size:12px; }
.challenge-moment[data-kind='reset'],.challenge-moment[data-kind='finish'] { border-color:#eed4ad; background:linear-gradient(110deg,#603749,#2b203b); }
.effects-paused *,.effects-paused *::before,.effects-paused *::after { animation:none !important; scroll-behavior:auto !important; }
.effects-paused .challenge-card-fan,.effects-paused .challenge-card,.effects-paused .challenge-slot { transform:none !important; }
.effects-paused .challenge-card img,.effects-paused button:hover,.effects-paused .is-primary::after { transform:none !important; transition:none !important; }
.effects-paused .is-primary::after { display:none; }
.effects-hidden .arena-orbit,.effects-hidden .arena-shard,.effects-hidden .challenge-card-fan img { animation-play-state:paused; }
@keyframes arena-orbit { to { transform:rotate(360deg); } }
@keyframes arena-float { to { translate:0 -18px; rotate:12deg; } }
@keyframes card-hover { from { transform:translateY(0) rotate(var(--card-angle)); } to { transform:translateY(-12px) rotate(calc(var(--card-angle) + 3deg)); } }
@media(max-width:1100px) {
 .challenge-intro { padding:30px; min-height:300px; }
 .challenge-intro h1 { display:block; }
 .challenge-title-rest { display:block; font-size:24px; margin-top:10px; }
 .challenge-title-rest br { display:none; }
 .challenge-card-fan { right:-25px; }
 .challenge-title { max-width:60%; }
 .challenge-title > p { margin-top:16px; }
 .challenge-editor { padding:0; }
 .challenge-page.is-playing .challenge-intro h1 { display:flex; }
 .challenge-page.is-playing .challenge-title-rest { margin:0; }
}
@media(max-width:720px) {
 .challenge-intro { min-height:310px; padding:28px 18px; align-items:flex-start; }
 .challenge-title { max-width:100%; }
 .challenge-year { font-size:84px; }
 .challenge-title-rest { font-size:19px; max-width:190px; line-height:1.15; }
 .challenge-title > p { margin-top:22px; font-size:12px; }
 .challenge-title > p strong { font-size:12px; }
 .challenge-card-fan { width:185px; height:200px; right:-18px; bottom:12px; opacity:1; }
 .challenge-card-fan img { width:153px; height:153px; }
 .challenge-card-fan img:nth-child(1) { left:-22px; top:25px; }
 .challenge-card-fan img:nth-child(2) { left:22px; top:0; }
 .challenge-card-fan img:nth-child(3) { left:68px; top:62px; }
 .arena-orbit { width:320px; right:-120px; top:0; }
 .arena-art::before { width:420px; height:420px; right:-150px; top:-50px; }
 .challenge-atmosphere { margin-top:10px; }
 .challenge-workspace { gap:18px; }
 .challenge-editor { padding:0; }
 .challenge-page h2 { font-size:19px; }
 .challenge-page .card-detail-button { width:36px; height:36px; min-height:36px; opacity:1; }
 .challenge-page.is-playing .challenge-intro { min-height:94px; }
 .challenge-page.is-playing .challenge-card-fan { display:none; }
 .challenge-page.is-playing .challenge-title-rest { font-size:13px; max-width:none; }
 .challenge-moment { right:16px; bottom:16px; padding:16px 20px; }
 .challenge-moment strong { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
 .challenge-page *,.challenge-page *::before,.challenge-page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
 .challenge-card:hover img,.challenge-page button:hover:not(:disabled) { transform:none !important; }
 .challenge-page .is-primary::after { display:none; }
}