/* V3 presentation layer: cinematic key art, production-readable squad UI, and field operations. */
.title-atmosphere{
  background-image:
    linear-gradient(90deg,rgba(3,8,10,.98) 0%,rgba(3,8,10,.88) 29%,rgba(3,8,10,.48) 52%,rgba(3,8,10,.08) 77%),
    linear-gradient(0deg,rgba(2,5,7,.72),transparent 38%),
    url("assets/environment/v3-title-keyart.png");
  background-position:center,center,center;
  background-size:cover;
}
.title-atmosphere:before{left:auto;right:0;bottom:0;width:62%;height:100%;background:radial-gradient(circle at 62% 53%,rgba(226,181,87,.13),transparent 35%);filter:none}
.title-atmosphere:after{background:radial-gradient(ellipse at 58% 48%,transparent 30%,rgba(0,0,0,.7));animation:titlePulse 7s ease-in-out infinite alternate}
.title-content{filter:drop-shadow(0 10px 24px rgba(0,0,0,.65))}

/* Generated 4x4 squad icon atlas. Percentage offsets are relative to the
   container/image delta: 0/33.333/66.667/100 select the four cells. */
.command-icon{background-position:calc(var(--icon-col,0) * 33.333333%) calc(var(--icon-row,0) * 33.333333%)!important}
.command-wheel>button{display:grid;width:128px;grid-template-columns:32px 1fr;grid-template-rows:1fr 1fr;column-gap:6px;align-items:center}
.command-wheel>button:before{content:none!important;display:none!important}
.command-wheel>button kbd{position:absolute;right:6px;top:5px;min-width:17px;min-height:17px;padding:2px}
.command-wheel>button strong{padding-right:14px;font-size:10px}.command-wheel>button small{font-size:8px}
.command-wheel>button:nth-of-type(1),.command-wheel>button:nth-of-type(4){left:146px}
.command-wheel>button:nth-of-type(2),.command-wheel>button:nth-of-type(3){right:20px}
.command-wheel>button:nth-of-type(5),.command-wheel>button:nth-of-type(6){left:20px}
.command-wheel-title span{font-size:9px}.command-wheel-title strong{font-size:12px}

/* Keep tactical information legible without swallowing the battlefield. */
.squad-hud{width:270px;padding:10px}.squad-hud-head{font-size:11px}.squad-hud-head strong{font-size:11px}
.squad-card{height:68px;grid-template-columns:52px 1fr 40px;gap:7px;padding:5px}
.squad-card canvas{width:50px;height:56px}.squad-card-copy strong{font-size:11px}.squad-card-copy strong em{font-size:9px}
.squad-card-copy small{font-size:10px;line-height:1.25}.squad-assist{width:38px;height:45px;font-size:10px}.squad-assist small{font-size:8px}
.signal-row{grid-template-columns:47px 1fr 29px;font-size:10px}.squad-actions button{min-height:34px;font-size:9px}.squad-actions kbd{font-size:9px}

/* Field operation ticker; created by the runtime director. */
.field-op-card{position:absolute;right:17px;top:306px;width:274px;padding:10px;border-right:2px solid var(--field-op,#e2b95b);pointer-events:none}
.field-op-card .field-op-head{display:flex;align-items:center;gap:9px;color:#80918f;font:900 10px ui-monospace,monospace;letter-spacing:.12em}
.field-op-card .field-op-icon{width:34px;height:34px;background-image:url("assets/sprites/v3-commands.png");background-size:136px 136px;background-position:0 0;image-rendering:pixelated}
.field-op-card strong{display:block;margin-top:6px;color:#f1f3ec;font:900 12px ui-monospace,monospace;letter-spacing:.04em}
.field-op-card small{display:block;margin-top:4px;color:#95a5a1;font:700 10px/1.4 ui-monospace,monospace}
.field-op-card .field-op-line{height:3px;margin-top:7px;background:#182427;overflow:hidden}.field-op-card .field-op-line i{display:block;width:100%;height:100%;background:var(--field-op,#e2b95b)}

/* New touch actions stay above the thumb sticks and retain 44px targets. */
.touch-ui button[data-touch="command"]{right:160px;bottom:198px}
.touch-ui button[data-touch="squad"]{left:278px;bottom:155px}
.touch-ui button[data-touch="assist"]{right:225px;bottom:142px}

@media (max-width:900px){
  .squad-hud{top:96px;bottom:auto;left:8px;width:auto;max-width:310px;padding:5px}
  .squad-hud-head,.signal-row,.squad-actions{display:none}
  .squad-cards{flex-direction:row;gap:4px}
  .squad-card{width:92px;height:50px;grid-template-columns:38px 1fr;padding:3px}
  .squad-card canvas{width:36px;height:42px}.squad-card-copy strong{font-size:10px}.squad-card-copy strong em,.squad-card-copy small,.squad-assist{display:none}
  .field-op-card{right:8px;top:234px;width:220px;padding:7px}.field-op-card .field-op-head{font-size:9px}.field-op-card strong{font-size:10px}.field-op-card small{font-size:9px}
}

@media (max-width:650px){
  .title-screen{padding-left:5vw}.title-content{width:90vw}.title-content h1{font-size:3.55rem}.title-actions{width:min(280px,90vw)}
  .title-atmosphere{background-position:center,center,61% center}
  .survivor-card{gap:7px}.survivor-info{padding-top:1px}.name-line{display:grid;grid-template-columns:1fr;align-content:start;gap:2px;margin-bottom:3px;line-height:1}.name-line #survivor-name{font-size:12px;letter-spacing:.08em}.name-line #armor-tier{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;line-height:1.1;letter-spacing:.03em}.survivor-info .meter{margin:2px 0}
  .command-wheel{transform:translate(-50%,-50%) scale(.78)}
  .field-op-card{display:block;left:auto;right:6px;top:80px;width:min(190px,46vw);padding:5px 7px;z-index:29}
  .field-op-card .field-op-icon{display:none}.field-op-card .field-op-head{font-size:8px}.field-op-card strong{font-size:9px;margin-top:3px}.field-op-card small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.field-op-card .field-op-line{margin-top:3px}
  .squad-hud{top:82px;bottom:auto;transform:scale(.88);transform-origin:left top}
}

@media (max-height:560px){.command-wheel{transform:translate(-50%,-50%) scale(.72)}}
@media (prefers-reduced-motion:reduce){.title-atmosphere:after,.squad-card.downed{animation:none!important}.squad-hud,.signal-meter i,.squad-hp i{transition:none!important}}