/* Convoy campaign: compact preparation, saved branches and touch-first bonus. */
#liveBattlePanel .convoyPreparation{max-width:1120px;margin:16px auto;padding:22px;border:1px solid #a7916255;border-radius:18px;background:linear-gradient(140deg,#182d32,#0d1923);color:#e9eee7}
.convoyPreparation h2{font:28px Georgia;margin:5px 0 10px}.convoyPreparation h3{font-size:18px;margin:12px 0}.convoyPreparation p{line-height:1.5;color:#cbd7d7}
.convoyRoles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
#liveBattlePanel .convoyRoles button{display:flex;flex-direction:column;gap:8px;min-height:82px;padding:15px;border-radius:12px;font-size:17px}
.convoyRoles span{font-size:13px;color:#c7d6d2}
#liveBattlePanel .convoyPreparation button[aria-pressed=true]{border-color:#ecd398;background:#3c514b;box-shadow:inset 0 0 0 1px #d9c28c;color:#fff0c8}
.convoyBrief{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;padding:18px 0;border-bottom:1px solid #91a4a644}
.convoyBrief aside{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:14px;border-radius:12px;background:#29433688;font-size:14px}.convoyBrief aside>strong{font-size:20px;color:#eed49b}
.convoyRoutes{display:flex;flex-wrap:wrap;gap:8px}.convoyRoutes button{min-height:44px;padding:10px 14px}
.convoyHeroChoices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#liveBattlePanel .convoyHeroChoices button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:12px;min-width:0;font-size:14px}
.convoyHeroChoices img{width:100%;height:112px;object-fit:contain}.convoyHeroChoices span{font-size:11px;color:#c1d4d5}.convoyPicked{position:absolute;top:8px;right:10px;color:#ffe1a3}
.convoyStart{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:15px}.convoyStart p{max-width:600px;font-size:13px}.convoyStart button{min-height:48px;white-space:normal;min-width:230px}
#liveBattlePanel[data-bonus=true] .liveEncounter{grid-template-columns:1fr;grid-template-areas:"score" "field"}
#liveBattlePanel[data-bonus=true] .liveSidebar,#liveBattlePanel[data-bonus=true] .liveNotice{display:none!important}
#liveBattlePanel[data-bonus=true].liveBattleView .liveStage{aspect-ratio:auto;min-height:0;height:auto!important;overflow:visible}
#liveBattlePanel[data-bonus=true] .liveStage>canvas{visibility:hidden;position:absolute!important;inset:0;pointer-events:none}
#liveBattlePanel .convoyBonus{position:relative;z-index:8;max-width:1100px;margin:0 auto;background:#081723;color:#e3f4f4;border:1px solid #80c7cd66;border-radius:14px;overflow:hidden}
.convoyBonus header{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:14px 20px;background:#152b36}
.convoyBonus header h2{font:24px Georgia;margin:3px 0}.convoyBonus header>strong{font-size:23px;white-space:nowrap;color:#bdf3f6;font-variant-numeric:tabular-nums}
.convoyBonus>p{margin:0;padding:10px 20px;font-size:14px}
.convoyBonus footer{padding:10px 20px;font-size:12px;color:#b8ced2}
.convoyGhostField{position:relative;aspect-ratio:1000/560;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#2f7d8755,transparent 60%),linear-gradient(#07142644,#06132277),url('../maps/convoy_camino_infinito.webp') center/cover}
#liveBattlePanel .convoyGhostField>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none}
.convoyGhostField>[data-bonus-ghosts]{position:absolute;inset:0;z-index:4;pointer-events:none}
#liveBattlePanel .convoyGhost{position:absolute!important;transform:translate(-50%,-50%)!important;width:76px;height:94px!important;min-width:56px;min-height:64px;padding:3px;border:0;border-radius:50%;background:radial-gradient(ellipse,#7ce8ed33,transparent 72%);pointer-events:auto;touch-action:manipulation;cursor:crosshair;filter:drop-shadow(0 0 8px #7aebfb);animation:convoyGhostFloat .8s ease-in-out infinite alternate}
.convoyGhost img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.convoyGhost:focus-visible{outline:3px solid #ffe1a3;outline-offset:3px}.convoyGhost[hidden]{display:none!important}
#liveBattlePanel .convoyGhost:disabled{background:transparent;opacity:.9}
.convoyGhostField>[data-bonus-start]{position:absolute!important;z-index:5;top:18%;left:50%;transform:translateX(-50%)!important;min-height:48px;max-width:90%;padding:12px 20px;white-space:nowrap}
.convoyBurst{position:absolute;z-index:2;left:28%;right:28%;bottom:10%;height:45%;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(ellipse,#dcfcff,#8cf6ff55 25%,transparent 70%)}
.convoyBonus.burst .convoyBurst{animation:convoyOpen 1.3s ease-out forwards}
@keyframes convoyOpen{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(2)}}
@keyframes convoyGhostFloat{from{translate:0 -3px}to{translate:0 3px}}
@media(max-width:700px){
 #liveBattlePanel .convoyPreparation{margin:8px 0;padding:12px}.convoyPreparation h2{font-size:23px}
 .convoyRoles{gap:7px}#liveBattlePanel .convoyRoles button{font-size:14px;padding:10px;min-height:80px}
 .convoyBrief{grid-template-columns:1fr;gap:8px;padding:12px 0}.convoyBrief aside{font-size:13px}.convoyBrief aside>strong{font-size:18px}
 .convoyHeroChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.convoyHeroChoices img{height:96px}
 .convoyStart{flex-direction:column;align-items:stretch;gap:5px}.convoyStart button{width:100%}
 .convoyBonus header{padding:12px;gap:8px;flex-wrap:wrap}.convoyBonus header>div{flex:1 1 100%}.convoyBonus header h2{font-size:21px}
 .convoyBonus>p,.convoyBonus footer{padding:8px 12px}.convoyGhostField{aspect-ratio:4/5;min-height:360px}
 #liveBattlePanel .convoyGhost{width:56px;height:68px}.convoyGhostField>[data-bonus-start]{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.convoyGhost,.convoyBonus.burst .convoyBurst{animation:none!important}}

/* Direct convoy control: the map fills the encounter; no outside order panel. */
#liveBattlePanel[data-convoy=true].liveBattleView .liveEncounter{grid-template-columns:minmax(0,1fr);grid-template-areas:"score" "objective" "field" "notice";gap:0}
#liveBattlePanel[data-convoy=true] .liveEncounter>.liveObjective{grid-area:objective;padding:8px 12px;font-size:13px;text-align:center;border-bottom:1px solid #9ab2a433}
#liveBattlePanel[data-convoy=true] .liveSidebar,#liveBattlePanel[data-convoy=true] [data-live-actions],#liveBattlePanel[data-convoy=true] .liveProgress,#liveBattlePanel[data-convoy=true] .liveJournal{display:none!important}
#liveBattlePanel[data-convoy=true] .liveStage{cursor:default}
#liveBattlePanel .convoyMapInput{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
#liveBattlePanel .convoyMapInput button{position:absolute!important;transform:translate(-50%,-100%)!important;width:6.6%;height:23%!important;min-width:42px!important;min-height:44px!important;padding:0!important;margin:0!important;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;pointer-events:auto;touch-action:manipulation;cursor:pointer;border-radius:40% 40% 20% 20%;opacity:1!important}
#liveBattlePanel .convoyMapInput button.convoyCarriageHit{width:31%;height:31%!important}
#liveBattlePanel .convoyMapInput button:focus-visible{outline:3px solid #ffe29b!important;outline-offset:2px;background:#ffe29b18!important}
#liveBattlePanel .convoyMapInput button:disabled{cursor:default}
#liveBattlePanel .convoyLength{color:#edcf8f;font-weight:bold;margin:12px 0}
#liveBattlePanel[data-convoy=true][data-bonus=true].liveBattleView .liveEncounter{grid-template-areas:"score" "objective" "field" "notice"}
@media(max-width:700px){
 #liveBattlePanel[data-convoy=true].liveBattleView .liveStage{aspect-ratio:1000/560!important;min-height:0!important}
 #liveBattlePanel[data-convoy=true] .liveEncounter>.liveObjective{font-size:12px;padding:6px}
 #liveBattlePanel[data-convoy=true] .liveHeading h1{font-size:20px!important}
 #liveBattlePanel[data-convoy=true] .liveNotice{font-size:12px!important}
 #liveBattlePanel .convoyMapInput button{width:9%;height:25%!important;min-width:36px!important;min-height:44px!important}
}

/* Convoy controls stay at the edges, away from the cage and the combat centre. */
#liveBattlePanel[data-convoy=true] .fieldControls:not(.fieldTouch) .fieldHeroes{grid-template-columns:repeat(4,48px)!important;max-width:none!important}
#liveBattlePanel[data-convoy=true] .fieldControls.fieldTouch .fieldHeroes{top:max(10px,env(safe-area-inset-top))!important;bottom:auto!important;grid-template-columns:repeat(2,44px)!important;max-width:94px!important;gap:4px!important}
#liveBattlePanel[data-convoy=true] .fieldControls .fieldHeroes button{height:48px!important}
#liveBattlePanel[data-convoy=true] .convoyMapInput button.convoyCarriageHit{border-radius:0}
#liveBattlePanel[data-convoy=true] .fieldControls .fieldActions{gap:8px!important}
@media(pointer:coarse) and (max-height:500px){
 #liveBattlePanel[data-convoy=true] .fieldControls.fieldTouch .fieldHeroes{position:fixed!important;left:max(8px,env(safe-area-inset-left))!important;top:max(8px,env(safe-area-inset-top))!important;bottom:auto!important}
}
