/* Powers have distinct silhouettes; effects remain behind target text. */
html:has(#gameDialog[open]) { overflow:hidden; }
.ability-fx-layer { z-index:3; }
#wordLayer { z-index:5; }
.ability-effect { animation:powerReveal 1.8s ease both; background:none; }
.ability-effect > div:not(.ability-announcement) { pointer-events:none; }
.ability-announcement { top:auto;bottom:10px;padding:8px 14px;border-radius:5px;border-left:4px solid var(--ability);background:#06121bf2;box-shadow:0 0 22px color-mix(in srgb,var(--ability) 20%,transparent);font-size:10px;letter-spacing:.09em; }
.ability-freeze { --ability:#b9eeff; }
.ability-bomb { --ability:#ff7652; }
.ability-rocket { --ability:#ffba78; }
.ability-repair { --ability:#7cffb6; }
.ability-overdrive { --ability:#ffe57a;box-shadow:none; }
.cryo-corners { position:absolute;inset:0;border:3px solid #b5eeffa0;border-radius:14px;background:linear-gradient(135deg,#b1e8ff66,transparent 12%,transparent 88%,#b1e8ff66);box-shadow:inset 0 0 40px #74d7ff33; }
.cold-sweep { position:absolute;inset:0;background:linear-gradient(transparent,#bdedff2b,transparent);transform:translateY(-80%);animation:coldSweep 1.6s ease-out; }
.rocket-flight { position:absolute;width:5px;height:160px;left:calc(var(--origin-x) - 3px);top:var(--origin-y);background:linear-gradient(#fff7d5,#ffad5a,transparent);box-shadow:0 0 13px #ff994c;transform-origin:top;animation:rocketFlight .45s ease-in both; }
.rocket-impact { position:absolute;left:50%;top:32%;width:70px;height:70px;translate:-50% -50%;border-radius:50%;background:radial-gradient(#fff7d2, #ffb56844 40%,transparent 70%);animation:impactFlare .65s .35s both; }
.nova-flash { position:absolute;inset:8%;background:radial-gradient(ellipse at 50% 32%,#ffecc23d,#ff64371a 35%,transparent 70%);animation:novaFlash .8s ease-out; }
.nova-shock { position:absolute;left:50%;top:32%;width:80px;height:80px;translate:-50% -50%;border:3px solid #ffbe80;border-radius:50%;box-shadow:0 0 16px #ff743f,inset 0 0 14px #ffad6833;animation:novaShock 1.1s ease-out both; }
.nova-shock.second { animation-delay:.18s;border-color:#ff774f; }
.pilot-barrier { position:absolute;inset:auto 2% 12% 2%;height:65px;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);border-top:2px solid #a6e3ff;border-bottom:2px solid #53c2ff;background:repeating-linear-gradient(60deg,#70caff14 0 2px,transparent 2px 24px),repeating-linear-gradient(-60deg,#70caff14 0 2px,transparent 2px 24px),linear-gradient(#3db8ff15,#3db8ff33);animation:barrierDeploy 1.5s both; }
.barrier-scan { position:absolute;left:2%;right:2%;bottom:13%;height:2px;background:#b4eaff;box-shadow:0 0 20px #54c9ff;animation:barrierScan 1.2s both; }
.nanite-flow { position:absolute;inset:auto 0 0;height:35%;background:radial-gradient(ellipse at 12% 100%,#43e8a634,transparent 65%); }
.repair-pulse { position:absolute;left:0;bottom:0;width:170px;height:170px;border:2px solid #90ffcb;border-radius:50%;translate:-50% 50%;box-shadow:0 0 30px #4fe0a247;animation:repairPulse 1.4s ease-out both; }
.reactor-rails { position:absolute;inset:0;border:2px solid #ffd56d;box-shadow:inset 0 0 35px #ffbd5222;background:linear-gradient(90deg,#ffc64e38,transparent 10%,transparent 90%,#ffc64e38); }
.reactor-pulse { position:absolute;left:0;right:0;bottom:12%;height:3px;background:linear-gradient(90deg,transparent,#fff2a7,transparent);box-shadow:0 0 16px #ffe36a;animation:reactorPulse 1.6s ease-out; }
.power-mote { position:absolute;left:calc(12% + mod(var(--i) * 17,76) * 1%);bottom:10%;width:3px;height:3px;background:var(--ability);color:var(--ability);border-radius:50%;font-style:normal;font-size:12px;box-shadow:0 0 8px var(--ability);animation:moteRise 1.4s calc(var(--i) * .018s) ease-out both; }
.ability-freeze .power-mote { left:calc(5% + var(--i) * 5%);bottom:15%;background:none;width:auto;height:auto; }
.ability-repair .power-mote { left:calc(3% + var(--i) * 2%);background:none;width:auto;height:auto; }
.ability-bomb .power-mote { left:50%;bottom:65%;animation:moteBlast 1.3s calc(var(--i) * .008s) ease-out both; }
.ability-rocket .power-mote { left:50%;bottom:65%;animation:moteBlast 1.1s .4s ease-out both; }
.arena.frozen { border-color:#b9eaff;box-shadow:inset 0 0 30px #80d8ff18,0 0 10px #7fdfff1a; }
.arena.overdriven { border-color:#ffe28d;box-shadow:inset 3px 0 #ffe28d99,inset -3px 0 #ffe28d99,inset 0 0 40px #ffd76d16; }
.showcase-powers { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.showcase-modal { width:min(1080px,100%); }
.showcase-modal .showcase-layout { grid-template-columns:330px minmax(0,1fr); }
.showcase-modal .showcase-actions { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0; }
.showcase-modal .showcase-actions button { padding:8px 4px;font-size:10px; }
.showcase-modal .showcase-powers { grid-template-columns:repeat(3,minmax(0,1fr)); }
.showcase-modal .showcase-powers button { padding:9px 5px;font-size:9px; }
.showcase-modal h3 { font-size:11px;color:#b4d8ef;letter-spacing:.1em; }
.showcase-modal .showcase-viewport { height:380px; }
.showcase-modal .check-row { font-size:10px;margin:12px 0; }
.showcase-modal .record-note { font-size:10px; }
.showcase-powers button { text-align:left;font-size:10px;border-left:3px solid #98d7e7; }
.showcase-powers [data-preview-power=repair] { border-left-color:#71ffb7; }
.showcase-powers [data-preview-power=bomb] { border-left-color:#ff7652; }
.showcase-powers [data-preview-power=overdrive] { border-left-color:#ffe17c; }
.outcome-actions { flex-wrap:wrap; }
#nextMissionButton { min-width:230px;max-width:100%; }
#nextMissionText { white-space:normal; }
.achievements-modal { width:min(1080px,100%);border-top:3px solid #cfb287; }
.progress-tabs { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px; }
.progress-tabs .selected { border-color:#ffdb94;color:#fff0c3;background:#483b236b; }
.medal-summary { display:flex;gap:14px;align-items:center;padding:14px 17px;background:linear-gradient(100deg,#29243d,#102b36);border:1px solid #6c657e;border-radius:10px;color:#ffe5b0; }
.medal-summary b { font-size:25px;white-space:nowrap; }
.medal-summary span { font-size:10px;letter-spacing:.1em; }
.medal-summary strong { margin-left:auto;font-size:12px;color:#c5d9ed; }
.medal-rules { font-size:11px;color:#9db5c9;margin:12px 0; }
.medal-filters { display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;margin:14px 0; }
.medal-filters label { font-size:10px;color:#91acbe; }
.medal-filters input { display:block;width:100%;height:38px;box-sizing:border-box;margin-top:7px;padding:9px 11px;border:1px solid #365267;border-radius:6px;background:#071520;color:#e5f1ff;font:inherit; }
.medal-filters input::placeholder { color:#809bb0; }
.medal-filters label select { margin-top:7px; }
.medal-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.medal-card { --medal:#bc9574;display:flex;flex-direction:column;min-height:155px;padding:13px;border:1px solid #34485b;border-top:2px solid var(--medal);border-radius:9px;background:linear-gradient(145deg,#132435,#0a1320); }
.medal-card[data-rarity=silver] { --medal:#b8d7e6; }
.medal-card[data-rarity=gold] { --medal:#ffd180; }
.medal-card[data-rarity=platinum] { --medal:#c9acff; }
.medal-card.earned { background:linear-gradient(145deg,#183b33,#102226);border-color:#45997f; }
.medal-top { display:flex;gap:4px;justify-content:space-between;align-items:center;font-size:8px; }
.medal-top span { color:#97b4cb; }
.medal-top small { color:var(--medal);text-transform:uppercase;white-space:nowrap;font-size:7px; }
.medal-card h3 { font-size:13px;color:#eef4ff;margin:11px 0 7px; }
.medal-card p { font-size:10px;color:#aec0d2;margin:0;flex:1; }
.medal-progress { padding-top:12px;font-size:8px;color:var(--medal); }
.medal-progress .unlock-bar { margin-top:6px; }
.medal-progress .unlock-bar span { background:var(--medal); }
.medal-pagination { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px; }
.medal-pagination > span { font-size:10px;color:#9db6c9; }
@keyframes powerReveal { 0%{opacity:0;}10%,70%{opacity:1;}100%{opacity:0;} }
@keyframes coldSweep { to{transform:translateY(80%);} }
@keyframes rocketFlight { 0%{opacity:1;scale:1;}100%{left:50%;top:32%;scale:.2;opacity:0;} }
@keyframes impactFlare { 0%{scale:.2;opacity:1;}100%{scale:4;opacity:0;} }
@keyframes novaShock { from{scale:.2;opacity:1;}to{scale:7;opacity:0;} }
@keyframes novaFlash { from{opacity:1;}to{opacity:0;} }
@keyframes barrierDeploy { 0%{scale:.1 1;opacity:0;}20%,65%{scale:1;opacity:1;}100%{opacity:0;} }
@keyframes barrierScan { from{translate:0 0;opacity:1;}to{translate:0 -65px;opacity:0;} }
@keyframes repairPulse { from{scale:.3;opacity:1;}to{scale:4;opacity:0;} }
@keyframes reactorPulse { from{translate:0 0;opacity:1;}to{translate:0 -120px;opacity:0;} }
@keyframes moteRise { from{translate:0 0;opacity:1;}to{translate:0 -160px;opacity:0;} }
@keyframes moteBlast { from{transform:rotate(calc(var(--i) * 20deg)) translateX(15px);opacity:1;}to{transform:rotate(calc(var(--i) * 20deg)) translateX(220px);opacity:0;} }
.reduced-motion .ability-effect { animation:none; }
.reduced-motion .ability-effect * { animation:none!important; }
.reduced-motion .power-mote,.reduced-motion .rocket-flight,.reduced-motion .cold-sweep,.reduced-motion .nova-shock,.reduced-motion .reactor-pulse { display:none; }
.reduced-motion .ability-effect > div:not(.ability-announcement) { opacity:.3; }
.combat-paused .power-mote { animation-play-state:paused; }
@media(max-height:760px) { .achievements-modal{padding:20px;} .achievements-modal .modal-heading{margin-bottom:10px;} .medal-summary{padding:10px 13px;} .medal-rules{font-size:10px;margin:9px 0;} .medal-filters{margin:10px 0;} .medal-card{padding:10px;min-height:136px;} .medal-card h3{font-size:12px;margin:8px 0 5px;} .medal-card p{font-size:9px;} .medal-pagination{margin-top:10px;} }
@media(max-width:1050px) { .medal-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-height:700px) and (min-width:1051px) { .achievements-modal{padding:17px;} .achievements-modal .modal-heading h2{font-size:21px;} .progress-tabs{margin-bottom:10px;} .medal-summary{padding:8px 12px;} .medal-summary b{font-size:21px;} .medal-card{min-height:120px;} .medal-filters{margin:8px 0;} .medal-rules{margin:8px 0;} }
