/* style.css — stiluri UI pentru The 300
 * Consolidat din index.html inline <style> blocks.
 */

/* ====================================================================
 * [1/2] Block L231-L375 — stiluri principale (header, toolbar, butoane)
 * ==================================================================== */
    :root { --ui-bg:#f7f7f7; --ui-border:#e0e0e0; --ui-text:#222; }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:#2f2f2f;color:var(--ui-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    header{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f7f7f7;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:10}
    header h1{margin:0;font-size:16px;font-weight:700}
    .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .group{display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid #e0e0e0;padding:6px;border-radius:10px}
    .btn{border:1px solid #e0e0e0;background:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px;user-select:none}
    .btn:hover{background:#f1f1f1}
    .btn.primary{background:#eef6ff;border-color:#cfe3ff}
    .btn.danger{background:#fff0f2;border-color:#ffd1da;color:#b91c1c}
    .badge{font:12px/1 monospace;background:#111;color:#fff;padding:4px 6px;border-radius:6px}
    .sep{width:1px;height:28px;background:#e0e0e0;margin:0 4px}
    #canvas{display:block;width:100vw;height:calc(100vh - 56px);background:#265b35}
    select,label{font-size:13px}
    #loading{position:fixed;inset:56px 0 0 0;display:none;place-items:center;background:#00000060;color:#fff;z-index:20;font-weight:700;font-size:14px;backdrop-filter:blur(2px)}
    .legend{font-size:12px;opacity:.8}
    /* toast */
    #toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);
      background:#111;color:#fff;border-radius:8px;padding:8px 12px;font:12px/1.2 system-ui;opacity:0;pointer-events:none;transition:opacity .15s}
    #toast.show{opacity:.95}
    [data-ui="1"] { pointer-events: auto; }
    .overlay { pointer-events: none; }
/* === P4_SAFE: HUD Debug & Crash Banner (no try/catch) === */
#hudDebug{ position:fixed; left:8px; top:8px; z-index:50; 
  background:rgba(0,0,0,.55); color:#fff; padding:8px 10px; 
  border-radius:8px; font:12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display:none; white-space:pre; box-shadow:0 6px 20px rgba(0,0,0,.25); }
#crashBanner{ position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:60;
  background:#991b1b; color:#fff; padding:10px 12px; border-radius:10px; display:none;
  box-shadow:0 12px 32px rgba(0,0,0,.35); max-width:min(920px, 92vw); }
#crashBanner .actions{ margin-top:6px; display:flex; gap:8px; }
#crashBanner button{ padding:6px 10px; border:1px solid rgba(255,255,255,.35); background:#7f1d1d; color:#fff; border-radius:8px; cursor:pointer; }
#crashBanner .msg{ font-weight:600; }

/* === PANOU FLOTANT UPGRADE === */
#floatUpgradePanel {
  position:fixed; z-index:9999; display:none;
  background:rgba(15,15,20,0.97); border:1px solid rgba(255,255,255,0.18);
  border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.55);
  padding:12px 14px 10px 14px; min-width:180px; max-width:240px;
  font-family:system-ui,Arial,sans-serif; font-size:13px;
  color:#e8e8f0; pointer-events:all; user-select:none;
}
#floatUpgradePanel .fup-arrow {
  position:absolute; bottom:-8px; top:auto; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:8px solid transparent;
  border-right:8px solid transparent; border-top:8px solid rgba(15,15,20,0.97);
}
#floatUpgradePanel .fup-title { font-weight:700; font-size:14px; color:#fff; margin-bottom:2px; }
#floatUpgradePanel .fup-level { font-size:11px; color:#94a3b8; margin-bottom:8px; }
#floatUpgradePanel .fup-cost { font-size:11px; color:#fbbf24; margin-bottom:10px; background:rgba(251,191,36,0.08); border-radius:6px; padding:4px 7px; }
#floatUpgradePanel .fup-btn { width:100%; padding:7px 0; border-radius:8px; border:none; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; font-weight:700; font-size:13px; cursor:pointer; }
#floatUpgradePanel .fup-btn:hover:not(:disabled) { background:linear-gradient(135deg,#60a5fa,#3b82f6); }
#floatUpgradePanel .fup-btn:disabled { background:#334155; color:#64748b; cursor:not-allowed; }
#floatUpgradePanel .fup-maxbadge { text-align:center; font-size:11px; color:#22c55e; font-weight:600; padding:4px 0 2px; }

/* ── ARMY PANEL (Throne Rush style) ─────────────────────────────────── */
#armyPanel {
  position:fixed; z-index:9999; display:none;
  background:linear-gradient(160deg, #3a2416 0%, #5c3a21 55%, #3a2416 100%);
  border:2px solid #c89552; border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,160,0.25);
  padding:10px; font-family:system-ui,Arial,sans-serif;
  color:#f5e6cc; user-select:none;
}
#armyPanel .ap-title {
  font-weight:700; font-size:12px; color:#ffe9b6;
  text-align:center; margin-bottom:4px; letter-spacing:0.8px;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
#armyPanel .ap-total {
  font-size:11px; color:#e8c480; text-align:center; margin-bottom:8px;
}
#armyPanel .ap-total b { color:#ffd975; font-weight:700; }
#armyPanel .ap-total.full b { color:#ff7a6b; }
#armyPanel .ap-grid {
  display:grid; grid-template-columns:repeat(2, 72px); gap:8px;
}
.ap-slot {
  position:relative; width:72px; height:86px;
  background:linear-gradient(135deg,#6b4a2a,#4a3120);
  border:2px solid #a87845; border-radius:10px;
  cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  transition:transform 0.08s, border-color 0.15s, box-shadow 0.15s;
}
.ap-slot:hover { border-color:#ffd975; box-shadow:0 0 10px rgba(255,217,117,0.55); transform:translateY(-1px); }
.ap-slot:active { transform:translateY(0) scale(0.97); }
.ap-slot.disabled { opacity:0.55; cursor:not-allowed; }
.ap-slot.disabled:hover { border-color:#a87845; box-shadow:none; transform:none; }
.ap-slot img { width:56px; height:56px; object-fit:contain; margin-top:4px; pointer-events:none; image-rendering:pixelated; }
.ap-slot .ap-cost {
  position:absolute; bottom:2px; left:0; right:0;
  text-align:center; font-size:10px; font-weight:700;
  color:#ffe28a; text-shadow:0 1px 2px #000;
}
.ap-slot .ap-counter {
  position:absolute; top:2px; right:2px;
  min-width:22px; height:22px; padding:0 5px;
  background:#dc2626; color:#fff; border-radius:11px;
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
  animation:ap-pop 0.25s ease-out;
  display:none;
}
/* badge timer antrenare — colț stânga sus */
.ap-slot .ap-timer {
  position:absolute; top:2px; left:2px;
  min-width:28px; height:18px; padding:0 5px;
  background:rgba(30,20,10,0.88); color:#ffd975; border:1px solid #c89552;
  border-radius:9px; font-size:10px; font-weight:700; line-height:16px; text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
  display:none;
  z-index:2;
}
/* overlay progres (umbrire jos-sus pe imagine cât se antrenează) */
.ap-slot .ap-progress {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(255,217,117,0.0), rgba(255,217,117,0.22));
  pointer-events:none; height:0%;
  transition:height 0.25s linear;
}
@keyframes ap-pop {
  0% { transform:scale(0.3); }
  70% { transform:scale(1.25); }
  100% { transform:scale(1); }
}

/* ── Command Center "place me first" pulse ──────────────────────────── */
@keyframes cc-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.0); border-color: #ca8a04; }
  50%      { box-shadow: 0 0 0 6px rgba(250,204,21,0.55); border-color: #fde047; }
}
#typeSel.cc-required {
  border: 2px solid #ca8a04 !important;
  border-radius: 5px;
  animation: cc-pulse 1.2s ease-in-out infinite;
  background-color: #422006 !important;
  color: #fde047 !important;
  font-weight: 700;
}


/* ====================================================================
 * [2/2] Block L4399-L4495 — stiluri auxiliare (paneluri, overlays)
 * ==================================================================== */

#btnMyArmy{
  position:fixed;
  top:10px;
  right:230px;
  z-index:100000;
  background:#1e293b;
  color:#fbbf24;
  border:1px solid #334155;
  padding:8px 14px;
  border-radius:12px;
  font-family:system-ui;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
#btnMyArmy:hover{
  background:#334155;
}
#btnMinimap{
 position:absolute;
 top:10px;
 right:140px;
 z-index:100;
 padding:10px 16px;
 background:#007bff;
 color:white;
 border:none;
 border-radius:6px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
#btnMinimap:hover{
 background:#0056b3;
}
#minimap{
 display:none;
 position:absolute;
 bottom:20px;
 left:20px;
 width:600px;
 height:340px;
 border:3px solid white;
 z-index:200;
 background:black;
}
#minimap img{
 width:100%;
 height:100%;
}
#closeMinimap{
 position:absolute;
 top:5px;
 right:5px;
 background:red;
 color:white;
 border:none;
 cursor:pointer;
 padding:2px 6px;
 font-size:12px;
 z-index:300;
}
.playerDot{
 position:absolute;
 background:rgba(0,0,0,0.82);
 color:#ffd700;
 font-size:11px;
 font-weight:bold;
 padding:3px 8px;
 border:1px solid #ffd700;
 border-radius:4px;
 cursor:pointer;
 transform:translateX(-50%);
 white-space:nowrap;
 z-index:10;
 transition: background 0.15s, color 0.15s;
 text-shadow: 0 0 6px #ffd700;
 box-shadow: 0 0 6px rgba(255,215,0,0.4);
 pointer-events:auto;
}
.playerDot:hover{
 background:rgba(255,215,0,0.3);
 color:#fff;
}
/* === OVERRIDE: End Attack button — mutat între Prieteni și Armata mea === */
/* Armata mea e la right:290px și are ~200px lățime, deci ocupă până la ~490px.
   Punem End Attack la right:530px ca să fie clar între Prieteni și Armata mea.
   Selectorul #raidEndBtn = ID-ul real creat în systems/raid_offline.js. */
#raidEndBtn,
#btnEndAttack,
#endAttackBtn,
#end-attack-btn,
[id*="endAttack"],
[id*="end_attack"],
[id*="EndAttack"] {
  right: 530px !important;
}