/* Royal Front v2 - campaign panel, compact strip, cash-out report.
   Loaded after style.css; everything is scoped to .cq* classes. */
.cq { box-sizing: border-box; max-width: 100%; margin: 4px 14px; padding: 10px 12px 8px; border: 1px solid #6c8f89; border-radius: 12px;
  background: #122f38; box-shadow: 0 5px 18px #10272266; color: #eef; flex-shrink: 0; overflow: hidden; }
.cq-header { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cq-title h2 { margin: 0; font-size: 21px; color: #ffdfa2; letter-spacing: -.4px; }
.cq-eyebrow { font-size: 9px; letter-spacing: 2px; color: #93b8b9; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.cq-chip { background: #0c2229; border: 1px solid #3b5d63; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cq-chip.siege { background: #6b4b12; border-color: #ffcf6b; color: #ffe5a8; }
.cq-chip.threat { background: #5b1f24; border-color: #ff7b7b; color: #ffd0d0; }
.cq-o { font-weight: 800; margin: 0 2px; }
.cq-chip.perks .cq-o { opacity: .55; }
.cq-chip.perks .cq-o.on { opacity: 1; text-decoration: underline; }
.suit-A { color: #ffe08a; }
.cq-suit { font-weight: 800; }
.cq-muster { margin-top: 6px; font-size: 11px; font-weight: 600; color: #bfe6ff; background: #0f3f55; border-radius: 6px; padding: 4px 8px; }
.cq-notes { color: #ffd98a; font-weight: 500; }
.cq-body { display: flex; gap: 12px; align-items: stretch; margin-top: 8px; }
.cq-map { display: block; flex: 1; min-width: 0; width: 100%; max-height: 330px; background: radial-gradient(ellipse, #245362, #122f38 72%); border-radius: 8px; }
.cq-tile { cursor: pointer; outline: none; }
.cq-tile rect { stroke: #0e2a31; stroke-width: 2.5; transition: filter .12s; }
.cq-tile:hover rect, .cq-tile:focus rect { filter: brightness(1.25); stroke: #fff; }
.cq-tile.adjacent rect { stroke: #d6f2e0; stroke-width: 2; stroke-dasharray: 5 3; }
.cq-tile.source rect { stroke: #ffdd95; stroke-width: 4; }
.cq-tile.target rect { stroke: #fff; stroke-width: 4; }
.cq-tile.cut rect { opacity: .55; }
.cq-tile.threatened.own-1 rect { stroke: #ff7b7b; stroke-width: 3.5; }
.cq-tile text { fill: #fff; pointer-events: none; paint-order: stroke; stroke: #0b1c2288; stroke-width: 2px; }
.cq-name { font-size: 10px; font-weight: 600; }
.cq-troops { font-size: 27px; font-weight: 900; }
.cq-wall { font-size: 9px; font-weight: 700; fill: #ffe5a8 !important; }
.cq-front { font-size: 22px; font-weight: 900; opacity: .6; }
.cq-front.on { opacity: 1; }
.cq-front.suit-S { fill: var(--suit-s); } .cq-front.suit-H { fill: var(--suit-h); }
.cq-front.suit-C { fill: var(--suit-c); } .cq-front.suit-D { fill: var(--suit-d); }
.cq-front-count { font-size: 10px; fill: #cfe; font-weight: 700; }
.cq-intent { animation: cq-march calc(1.2s / var(--speed, 1)) linear infinite; }
.cq-intent-force { font-size: 12px; font-weight: 900; fill: #fff; }
.cq-raid-ring { fill: none; stroke: #ff5a5a; stroke-width: 4; stroke-dasharray: 8 4; animation: cq-march calc(1.2s / var(--speed, 1)) linear infinite; }
.cq-raid-label { font-size: 11px; font-weight: 900; fill: #ffd0d0; paint-order: stroke; stroke: #3b0d10; stroke-width: 3px; }
.cq-route { fill: none; stroke: #ffe2a3; stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .8; }
@keyframes cq-march { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .cq-intent, .cq-raid-ring { animation: none; } }
.cq-command { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; border-left: 1px solid #54767c66; padding: 4px 0 4px 12px; }
.cq-command h3 { font-size: 15px; margin: 0; }
.cq-command p { font-size: 11px; font-weight: 500; line-height: 1.4; margin: 0; }
.cq-row { display: flex; gap: 5px; flex-wrap: wrap; }
.cq-row .btn { flex: 1 1 auto; }
.cq-target { font-size: 12px; font-weight: 600; }
.cq-preview { color: #ffd0d0; }
.cq-preview.good { color: #bff5c7; }
.cq-warn { color: #ffb4a8; font-size: 11px; font-weight: 600; }
.cq-info { margin-top: 6px; font-size: 11px; font-weight: 500; color: #dfeee9; line-height: 1.5; }
.cq-footer { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; border-top: 1px solid #54767c66; padding-top: 6px; font-size: 11px; color: #bdd5cc; }
.cq-forecast { font-size: 11px; font-weight: 700; color: #9fd8ff; margin-top: 4px; }
.cq-intents { margin: 0; padding-left: 16px; font-weight: 600; }
.cq-intents li.f2 { color: #ff9b9b; } .cq-intents li.f3 { color: #d3b8ff; } .cq-intents li.raid { color: #ff7070; font-weight: 800; }
.cq-log { color: #e8d3a7; font-weight: 500; line-height: 1.45; }
.cq-strip { display: none; box-sizing: border-box; width: calc(100% - 16px); margin: 4px 8px; padding: 6px 10px; min-height: 40px; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #122f38; border: 1px solid #6c8f89; border-radius: 10px; color: #eef; font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.cq-strip.danger { border-color: #ff7b7b; background: #3a1a22; }
.cq-strip-title { color: #ffdfa2; font-weight: 800; }
.cq-strip-line { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8d3a7; }
.cq-strip-open { color: #9fd8ff; font-weight: 800; }
.cq-cashout { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #122f38; border: 1px solid #54767c; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; }
.cq-cashout .cq-next { color: #ffb4a8; margin-top: 4px; }
.cq-cashout .cq-perks { color: #bff5c7; margin-top: 4px; }
.cq-boss-note { font-size: 11px; color: #ffd98a; margin-top: 4px; }
.tt-map { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #8fb9b366; color: #9fe3d3; font-size: 12px; font-weight: 600; }
.tt-map b { color: #ffdfa2; }
.cq-help { color: #c7d6d2; font-size: 12px; line-height: 1.55; font-weight: 500; margin: 8px 0 0; padding-left: 18px; }
.conquest-modal { width: min(1100px, 96vw); box-sizing: border-box; }
.conquest-modal .cq { margin: 0; }
.conquest-modal .cq-map { max-height: 420px; }

/* Inline placement: the full panel on roomy screens, the strip on phones / short windows,
   so the hand and the Play button always stay on screen. */
@media (max-width: 899px), (max-height: 760px) {
  .cq-inline .cq { display: none; }
  .cq-inline .cq-strip { display: flex; }
}
@media (max-width: 899px) {
  .cq-body { flex-direction: column; }
  .cq-command { width: auto; border-left: 0; border-top: 1px solid #54767c66; padding: 8px 0 0; }
  .conquest-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; overflow-y: auto; padding: 10px; }
  .conquest-modal .cq-map { max-height: none; }
}
@media (max-width: 560px) {
  .cq { margin: 0; padding: 8px; }
  .cq-name { display: none; }
  .cq-troops { font-size: 34px; }
  .cq-wall { font-size: 12px; }
  .cq-title h2 { font-size: 18px; }
  .cq-chip { font-size: 10px; padding: 2px 7px; }
}
@media (pointer: coarse) {
  .cq .btn, .cq-strip, .conquest-modal .btn { min-height: 40px; }
}
/* short landscape phones: no inline strip at all (the sidebar "Royal Front" button opens the map) */
@media (max-height: 500px) {
  .cq-inline { display: none; }
}