/* The Last Convoy — deterministic tactics roguelike */
:root{
  --accent:#34e0c4; --accent2:#5b8cff; --gold:#ffd24a;
  --ally:#4fd6ff; --enemy:#ff5a6e; --convoy:#ffd24a; --hazard:#ff7a2f;
}
.game-wrap{background:radial-gradient(circle at 50% 22%,#10203a 0%,#081429 48%,#040a16 100%)}
#game-canvas{margin:auto}

.lc-hint{align-self:center;margin-top:auto;margin-bottom:6px;font-size:.74rem;color:var(--muted);
  background:rgba(8,12,26,.6);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.3rem .8rem;
  pointer-events:none;text-align:center;max-width:92%}

/* selected unit action bar (bottom) */
.lc-actionbar{position:absolute;left:0;right:0;bottom:max(72px,calc(66px + var(--safe-bottom)));z-index:16;
  display:flex;flex-direction:column;gap:8px;align-items:center;padding:0 12px;pointer-events:none}
.lc-actionbar.hidden{display:none}
.lc-unitcard{pointer-events:all;display:flex;align-items:center;gap:10px;
  background:rgba(10,16,32,.86);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:8px 14px;backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.45);min-width:min(420px,92vw)}
.lc-uglyph{font-size:1.5rem;filter:drop-shadow(0 0 8px var(--ally))}
.lc-uinfo{flex:1;text-align:left;line-height:1.15}
.lc-uinfo b{font-size:.95rem;font-weight:900}
.lc-uinfo span{display:block;font-size:.66rem;color:var(--muted)}
.lc-uhp{display:flex;gap:3px}
.lc-uhp i{width:9px;height:14px;border-radius:3px;background:#27406a;display:block}
.lc-uhp i.on{background:linear-gradient(180deg,#6fffe0,#23c8a8);box-shadow:0 0 6px rgba(52,224,196,.6)}
.lc-acts{pointer-events:all;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lc-act{min-height:44px;padding:.5rem .95rem;border-radius:12px;font-weight:900;font-size:.86rem;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--text)}
.lc-act:active{transform:scale(.95)}
.lc-act.sel{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04060f;border:none;box-shadow:0 6px 22px rgba(52,224,196,.4)}
.lc-act.ghost{opacity:.45}
.lc-act .k{display:block;font-size:.58rem;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.08em}

.lc-endturn{position:absolute;right:12px;bottom:max(14px,calc(10px + var(--safe-bottom)));z-index:17;
  min-height:48px;padding:.6rem 1.1rem;border-radius:14px;font-weight:900;font-size:.92rem;border:none;
  background:linear-gradient(135deg,var(--gold),#ff9d3b);color:#1a1000;box-shadow:0 10px 30px rgba(255,210,74,.34)}
.lc-endturn.hidden{display:none}
.lc-endturn:active{transform:scale(.96)}
.lc-undo{position:absolute;left:12px;bottom:max(14px,calc(10px + var(--safe-bottom)));z-index:17;
  min-height:48px;padding:.6rem 1rem;border-radius:14px;font-weight:900;font-size:.88rem;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,16,32,.82);color:var(--text);backdrop-filter:blur(10px)}
.lc-undo.hidden{display:none}
.lc-undo:active{transform:scale(.96)}
.lc-endturn.pulse{animation:etpulse 1s ease-in-out infinite}
@keyframes etpulse{50%{box-shadow:0 0 0 6px rgba(255,210,74,.18),0 10px 30px rgba(255,210,74,.5)}}

/* upgrade draft cards */
.lc-draft{display:grid;gap:11px;margin-top:14px}
.lc-card{text-align:left;padding:14px 16px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);transition:transform .1s,border-color .1s}
.lc-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.lc-card:active{transform:scale(.99)}
.lc-card b{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:3px}
.lc-card b .ic{font-size:1.25rem}
.lc-card span{color:var(--muted);font-size:.86rem;line-height:1.4}

@media (max-width:560px){.lc-uinfo span{display:none}.lc-act .k{display:none}}