.tactical-strip{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.75rem 0 1rem;padding:.65rem .8rem;border:1px solid rgba(119,171,130,.28);border-radius:.8rem;background:rgba(4,14,9,.72);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.tactical-strip span,.tactical-strip strong{font-size:.72rem}
.tactical-strip strong{color:#f2d87d}
.tactical-strip span{padding:.28rem .45rem;border-radius:.42rem;background:rgba(255,255,255,.035);color:#c7d5ca}
.tactical-strip .tactical-turn{background:#173d27;color:#bdf58f;font-weight:900;letter-spacing:.06em}
.hand .card{position:relative}
.hand-shortcut{position:absolute;right:.42rem;top:.42rem;z-index:3;display:grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .28rem;border:1px solid rgba(242,216,125,.36);border-radius:.38rem;background:rgba(5,13,9,.9);color:#f2d87d;font:800 .62rem/1 system-ui;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.card.unplayable .hand-shortcut{opacity:.38}
.lane.valid-target{outline:2px solid rgba(189,245,143,.35);outline-offset:2px}
.attack-button:not(:disabled){box-shadow:0 0 0 1px rgba(242,216,125,.16),0 8px 18px rgba(0,0,0,.18)}

@media(max-width:720px){
  .tactical-strip{position:sticky;top:calc(var(--dtf-global-header-height,66px) + 8px);z-index:20;margin:.45rem 0 .7rem;padding:.55rem .6rem;backdrop-filter:blur(10px)}
  .tactical-strip span:last-child{flex-basis:100%}
  .hand-shortcut{display:none}

  /* Lane choice is a simultaneous tactical decision. Keep all three lanes in
     view instead of forcing a 680px horizontal battlefield on phone screens. */
  .arena{overflow-x:hidden}
  .lane-grid{min-width:0!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .lane{min-width:0}
  .lane .card{width:100%;min-width:0}
  .lane .card h3{overflow-wrap:anywhere}
  .lane .card-body{min-width:0}
  .lane .stat-box{min-width:0;overflow:hidden}
  .lane .unit-footer{gap:3px;flex-wrap:wrap}
}

@media(max-width:430px){
  .lane-grid{gap:4px}
  .lane{padding:4px;min-height:166px}
  .lane .card{min-height:154px;border-radius:12px}
  .lane .card-head{padding:7px 6px 3px}
  .lane .card h3{font-size:.72rem}
  .lane .card-stage{font-size:.46rem;letter-spacing:.04em}
  .lane .card-art{height:30px;margin:3px 5px}
  .lane .card-body{padding:2px 5px 5px;gap:3px}
  .lane .stat-box{padding:4px 3px;font-size:.46rem;letter-spacing:.04em}
  .lane .stat-box b{font-size:.74rem}
  .lane .unit-footer{padding:0 5px 5px;font-size:.5rem}
  .lane .attack-button{min-height:44px;margin:0 4px 4px;padding:.38rem .18rem;font-size:.58rem}
  .lane-index{left:5px;top:4px}
}

@media(prefers-reduced-motion:reduce){
  .lane.valid-target,.attack-button{transition:none!important}
}