:root{
  /* sky-blue realistic palette */
  --bg-top: #cfeefe;
  --bg-bottom: #a6d8ff;
  --panel: rgba(255,255,255,0.0);
  --green:#2fa84f;
  --purple:#7b3fa3;
  --muted:#33475b;
  --sky-gradient: linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
}
*{box-sizing:border-box;font-family: 'Cinzel', serif; }
html,body{height:100%;margin:0;background:var(--bg);display:flex;align-items:center;justify-content:center}
#ui{width:100%;max-width:980px;padding:12px}
#topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.teamStatus{display:flex;align-items:center;gap:8px;color:var(--muted)}
.icon{width:44px;height:44px;object-fit:contain;border-radius:6px;background:transparent;padding:0}

/* explicit small red icon styling used for the Red team */
.smallIcon.red{width:44px;height:44px;border-radius:6px;background:#fceaea;border:2px solid #d64545;box-shadow:inset 0 0 0 2px rgba(214,69,69,0.06)}
.controls input[type="number"]{appearance:textfield;padding:8px;border-radius:8px;border:2px solid #ddd;background:#fff;font-weight:700}
.controls button{margin:0 6px;padding:8px 12px;border-radius:8px;border:2px solid #222;background:var(--panel);font-weight:700;cursor:pointer}
.controls button:disabled{opacity:0.45;cursor:default}
#arenaWrap{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#e9f7ee,#f7f3ff);box-shadow:0 18px 42px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.6)}
#arena{display:block;width:100%}
#overlay{position:absolute;left:10px;top:10px;pointer-events:none}
#hint{background:rgba(0,0,0,0.05);padding:6px 10px;border-radius:8px;color:#333;font-size:13px}
#footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
#result{font-size:20px;padding:8px 12px;border-radius:8px}
#result.green{background:linear-gradient(90deg,#e8f9ea,#dff5df);color:var(--green);border:2px solid rgba(47,168,79,0.18)}
#result.purple{background:linear-gradient(90deg,#f3ecfb,#efe7fb);color:var(--purple);border:2px solid rgba(123,63,163,0.12)}
.hidden{display:none}
@media (max-width:640px){
  /* Ensure the experience fits one mobile viewport height with touch-friendly UI */
  html,body{height:100vh;overflow:hidden;margin:0}
  /* make the entire UI stretch full-screen on mobile and avoid side gutters */
  #ui{padding:6px;max-width:100vw;width:100vw;height:100vh;display:flex;flex-direction:column}
  /* let topbar keep its place but keep it compact, arena should fill the rest of the screen */
  #topbar{flex:0 0 auto}
  #arenaWrap{flex:1 1 auto; display:flex; align-items:stretch}
  /* canvas fills available area without causing page scroll */
  #arena{height:100%; width:100%; display:block}
  .controls{display:flex;flex-wrap:wrap;gap:6px}
  .controls button{padding:10px 12px;font-size:15px;min-height:44px;min-width:44px}
  .teamStatus{font-size:13px}
  /* mobile control bar pinned above the bottom edge */
  #mobileControls{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
    padding:6px 6px 8px;
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
    z-index:1300;
    pointer-events:auto;
  }
  #joystickArea{width:110px;height:110px;touch-action:none}
  #mobileActions{display:flex;gap:8px;align-items:center}
  #mobileActions button{padding:10px;border-radius:10px;min-width:44px;min-height:44px}
}