/* Losowa misja po kampanii (public/js/menu/random-op.js): okno jak JOIN/OPTIONS, gwiazdki jak na ekranie kampanii. */

#random-op-modal .modal-panel { width: min(520px, 92vw); }
.random-op-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #efa56833; background: #0a0f0fb0; }
.random-op-zone b { display: block; font-size: 22px; letter-spacing: .14em; color: #f3dcb3; text-shadow: 0 2px 0 #000; }
.random-op-zone small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .2em; color: #8b9493; font-variant-numeric: tabular-nums; }
.random-op-roll { width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; text-align: center; flex: none; }
.random-op-event { display: flex; align-items: baseline; gap: 10px; margin: 12px 2px 0; }
.random-op-event b { letter-spacing: .12em; color: #f4cf82; }
.random-op-difficulty { margin: 12px 0 18px; padding: 14px; border: 1px solid #efa56833; background: #0a0f0fb0; }
.random-op-difficulty-head { display: flex; justify-content: space-between; align-items: baseline; }
.random-op-level { font-size: 11px; letter-spacing: .18em; color: #f4cf82; }
.random-op-stars { display: flex; gap: 8px; margin: 10px 0 12px; }
.random-op-star { width: 46px; height: 42px; padding: 0; text-align: center; font-size: 24px; line-height: 1; color: #58605f; }
.random-op-star.on { color: #ffd98a; text-shadow: 0 0 12px #ffb54a99, 0 1px 3px #000; border-color: #f4cf82; }
.random-op-star:hover { color: #ffe7b0; }
.random-op-modifiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: #7f8b8c; }
.random-op-modifiers li { display: flex; gap: 9px; align-items: center; transition: color .2s; }
.random-op-modifiers li i { font-style: normal; color: #4e5655; }
.random-op-modifiers li.on { color: #f2e6cf; }
.random-op-modifiers li.on i { color: #ffd98a; }
/* HEROIC — czwarta gwiazdka (shared/campaign.js), czerwona jak na ekranie kampanii. */
.random-op-level.heroic { color: #ff6a55; }
.random-op-star.heroic { color: #5e3a36; }
.random-op-star.heroic.on { color: #ff6a55; text-shadow: 0 0 14px #ff3b2acc, 0 1px 3px #000; border-color: #ff7a66; }
.random-op-star.heroic:hover { color: #ff9a88; }
.random-op-modifiers li.heroic i { color: #5e3a36; }
.random-op-modifiers li.heroic.on { color: #ffd6cf; }
.random-op-modifiers li.heroic.on i { color: #ff6a55; }
.random-op-deploy { width: 100%; }
.random-op-deploy span { float: right; }

/* Losowe misje w fiolecie „epickim” (0.28.1, Topek: „przycisk random mission jakiś fioletowy, epicki”): przycisk w menu
   głównym, wiersz pod listą misji w ekranie kampanii, punkt na planecie i karta osiągnięcia po odblokowaniu. */
:root { --rop-violet: #b07cff; --rop-glow: #9b5cff; }
/* Ramka jak reszta menu: steel-frame w dziewięciu polach + narożniki ścięte clip-path (--mn-clip, command-theme.css),
   w fiolecie (ui/steel-frame-violet.svg). 0.28.4 (Topek: „przycisk random mission jest śliczny, ale ma niepoprawne
   ścięcia”): dawniej prostokątny obrys z cieni wewnętrznych, który clip-path ucinał na rogach. Poświata zewnętrzna
   odpadła — clip-path i tak ją obcina. */
#menu > #random-op, .campaign-panel .campaign-random {
  position: relative; overflow: hidden; color: #f4ecff; letter-spacing: .18em; font-weight: 700;
  background: linear-gradient(105deg, transparent 35%, #ffffff30 50%, transparent 65%) -160% 0/60% 100% no-repeat border-box,
    radial-gradient(ellipse at 50% 100%, #6d3fe0 0%, #2b1452 62%, #120826 100%) border-box;
  border: 2px solid transparent; border-image: var(--mn-frame); border-image-source: url('/ui/steel-frame-violet.svg');
  clip-path: var(--mn-clip); border-radius: 0; box-shadow: none; text-shadow: 0 0 8px #d2b3ffaa;
  animation: rop-shine 2.8s ease-in-out infinite;
}
/* Najechanie: ta sama fioletowa ramka (ogólna reguła menu podmienia ją na złotą), jaśniej. */
#menu > #random-op:hover, .campaign-panel .campaign-random:hover { filter: brightness(1.2); border-image-source: url('/ui/steel-frame-violet.svg'); box-shadow: none; }
/* Wiersz na ekranie kampanii: napis na środku, bez strzałki (0.28.5, Topek). */
.campaign-panel .campaign-random { width: 100%; margin-top: 8px; padding: 12px 16px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
/* Menu główne: strzałki › ‹ pulsują jak przy START CAMPAIGN (keyframes cmd-cta-arrow-l/r, command-theme.css), w fiolecie. */
#menu > #random-op::before, #menu > #random-op::after {
  position: absolute; top: 50%; transform: translateY(-52%); color: #e2ccff; font-size: 19px; letter-spacing: 0;
  text-shadow: 0 0 8px #9b5cffcc; pointer-events: none; animation: cmd-cta-arrow-l 1.3s ease-in-out infinite;
}
#menu > #random-op::before { content: '›'; left: 13px; }
#menu > #random-op::after { content: '‹'; right: 13px; animation-name: cmd-cta-arrow-r; }
#menu > #random-op:hover::before, #menu > #random-op:hover::after { animation: none; }
.campaign-panel .campaign-random[hidden], #menu > #random-op[hidden] { display: none; }
@keyframes rop-shine { 0%, 45% { background-position: -160% 0, 0 0; } 75%, 100% { background-position: 260% 0, 0 0; } }
/* Punkt na planecie. */
.campaign-marker.random i { width: 22px; height: 22px; background: var(--rop-violet); border-color: #eadcff; box-shadow: 0 0 0 3px #2b1452, 0 0 16px 4px #9b5cffcc; animation: rop-pulse 1.6s ease-in-out infinite; }
#campaign.drawn .campaign-marker.random i { animation: campaign-ignite .7s calc(var(--order) * var(--campaign-step)) ease-out backwards, rop-pulse 1.6s calc(var(--order) * var(--campaign-step) + .7s) ease-in-out infinite; }
.campaign-marker.random { margin: -11px 0 0 -11px; }
.campaign-marker.random .campaign-flash { left: 11px; top: 11px; box-shadow: 0 0 0 2px #d2b3ff, 0 0 30px 8px #9b5cff; }
.campaign-marker.random b { color: #e6d6ff; }
.campaign-marker.random > span { opacity: 1; color: #d9c2ff; text-shadow: 0 0 8px #9b5cff; letter-spacing: .14em; }
.campaign-marker.random[hidden] { display: none; }
@keyframes rop-pulse { 50% { box-shadow: 0 0 0 3px #2b1452, 0 0 26px 9px #b07cffee; } }
/* Karta osiągnięcia (menu/random-op-unlock.js) — jak WEAPON ACQUIRED, w fiolecie. */
#random-op-unlock { display: grid; place-items: center; z-index: 140; background: #05030bb8; }
#random-op-unlock[hidden] { display: none; }
#random-op-unlock .unlock-card { width: min(560px, 92vw); box-sizing: border-box; padding: 22px 28px 20px; display: grid; grid-template-columns: 96px 1fr; column-gap: 20px;
  grid-template-areas: "art caption" "art name" "art text" "actions actions"; color: #f4ecff;
  background: linear-gradient(160deg, #1d0f38f5, #0d0719f5); border: 1px solid #8f63f0; box-shadow: 0 0 0 1px #000, 0 20px 60px #000c, 0 0 40px #8b5cf655;
  animation: rop-unlock-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
#random-op-unlock .unlock-art { grid-area: art; color: var(--rop-violet); filter: drop-shadow(0 0 12px #9b5cff); animation: rop-unlock-art .8s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
#random-op-unlock .unlock-art svg { width: 96px; height: 96px; display: block; }
#random-op-unlock .caption { grid-area: caption; font-size: 10px; letter-spacing: 3px; font-weight: 700; color: #c7a6ff; align-self: end; }
#random-op-unlock strong { grid-area: name; font-size: 28px; letter-spacing: 2px; margin: 4px 0 2px; text-shadow: 0 0 14px #9b5cffaa; }
#random-op-unlock small { grid-area: text; font-size: 12px; line-height: 1.5; color: #d8cdf0; }
#random-op-unlock .unlock-actions { grid-area: actions; display: flex; gap: 10px; margin-top: 18px; }
#random-op-unlock .unlock-actions button { flex: 1; padding: 12px 14px; letter-spacing: .16em; font-weight: 700; cursor: pointer; color: #f4ecff; background: #1a0f30; border: 1px solid #5d3fa0; }
#random-op-unlock .unlock-actions .unlock-play { background: radial-gradient(ellipse at 50% 100%, #7a47f0 0%, #2e1560 70%); border-color: var(--rop-violet); box-shadow: 0 0 16px #9b5cff66; }
#random-op-unlock .unlock-actions button:hover { filter: brightness(1.2); }
@keyframes rop-unlock-in { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rop-unlock-art { from { opacity: 0; transform: scale(.5) rotate(-25deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #menu > #random-op::before, #menu > #random-op::after, #menu > #random-op, .campaign-panel .campaign-random, .campaign-marker.random i, #random-op-unlock .unlock-card, #random-op-unlock .unlock-art { animation: none; } }