:root{--bg:#0d1117;--ocean:#101820;--panel:#131920;--panel2:#1a2130;--bdr:#252d38;--bdr2:#2e3a4a;--gold:#c9a84c;--gold2:#f0d080;--gold3:#6a5020;--text:#cdd5e0;--dim:#4a5568}
body.light {
  --bg: #f0f2f5;
  --ocean: #e0e5ec;
  --panel: #ffffff;
  --panel2: #f8f9fc;
  --bdr: #d1d5db;
  --bdr2: #9ca3af;
  --gold: #b8860b;
  --gold2: #daa520;
  --gold3: #8b6508;
  --text: #1f2937;
  --dim: #6b7280;
}
/* ── SITELOCK & CRAZY GAMES ── */
.cg-hidden { display: none !important; }
#sitelock-overlay.show { display: flex !important; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;display:flex;flex-direction:column;touch-action:manipulation}

/* ── ANIMATIONS ── */
@keyframes fx-attack{0%{filter:brightness(1)}25%{filter:brightness(2.5) saturate(3) drop-shadow(0 0 12px #ff4400)}50%{filter:brightness(1.5)}75%{filter:brightness(2) drop-shadow(0 0 8px #ff6600)}100%{filter:brightness(1)}}
@keyframes fx-gain{0%{filter:brightness(1)}30%{filter:brightness(2) drop-shadow(0 0 10px #44ff88)}70%{filter:brightness(1.4) drop-shadow(0 0 6px #22cc66)}100%{filter:brightness(1)}}
@keyframes fx-loss{0%,100%{transform:translate(0,0)}15%{transform:translate(-4px,0)}30%{transform:translate(4px,0)}45%{transform:translate(-3px,0)}60%{transform:translate(3px,0)}80%{transform:translate(-2px,0)}}
@keyframes fx-capture{0%{filter:brightness(1)}20%{filter:brightness(3) saturate(2) drop-shadow(0 0 18px #ffdd00)}60%{filter:brightness(2)}100%{filter:brightness(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes glow{from{text-shadow:0 0 20px rgba(201,168,76,.4)}to{text-shadow:0 0 60px rgba(201,168,76,.9)}}
@keyframes slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes taqs-pop{0%{opacity:0;transform:translateX(-50%) scale(.7) translateY(-10px)}60%{opacity:1;transform:translateX(-50%) scale(1.06)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes taqs-icon-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes ping{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(2.5);opacity:0}}
@keyframes wave{0%,100%{transform:translateY(0) scaleY(1)}25%{transform:translateY(-4px) scaleY(1.1)}50%{transform:translateY(0) scaleY(.9)}75%{transform:translateY(-2px) scaleY(1.05)}}
@keyframes ocean-flow{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes cloud-drift{0%{transform:translateX(-100%)}100%{transform:translateX(calc(100vw + 200px))}}
@keyframes explode-ring{0%{r:0;opacity:1}100%{r:60;opacity:0}}
@keyframes explode-particle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
@keyframes flag-wave{0%,100%{transform:skewX(0deg) scaleX(1)}25%{transform:skewX(-5deg) scaleX(0.97)}75%{transform:skewX(5deg) scaleX(1.03)}}
@keyframes reaction-pop{0%{transform:scale(0) translateY(0);opacity:0}30%{transform:scale(1.4) translateY(-5px);opacity:1}60%{transform:scale(1) translateY(-15px);opacity:1}100%{transform:scale(.6) translateY(-40px);opacity:0}}
@keyframes team-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

.fx-attack{animation:fx-attack .6s ease-out}
.fx-gain{animation:fx-gain .5s ease-out}
.fx-loss{animation:fx-loss .4s ease-in-out}
.fx-capture{animation:fx-capture .8s ease-out}

/* ── OCEAN WAVES ── */
#ocean-canvas{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55}
#cloud-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}
.cloud{position:absolute;background:rgba(255,255,255,.06);border-radius:50%;filter:blur(18px);animation:cloud-drift linear infinite}
#world-svg{position:relative;z-index:2}

/* ── REACTION BUBBLES ── */
.reaction-bubble{position:fixed;font-size:1.5rem;pointer-events:none;z-index:9999;animation:reaction-pop .9s ease-out forwards}

/* ── TURN GLOW for active player panel ── */
.turn-glow{animation:turn-pulse 1.5s infinite !important}
@keyframes turn-pulse{0%,100%{box-shadow:0 0 8px var(--gold3)}50%{box-shadow:0 0 22px var(--gold),0 0 40px var(--gold3)}}

/* ── CHAT REACTIONS ── */
.reaction-bar{display:flex;gap:4px;padding:4px 8px;border-top:1px solid var(--bdr);flex-wrap:wrap}
.reaction-btn{background:none;border:1px solid var(--bdr);border-radius:12px;padding:2px 6px;font-size:.75rem;cursor:pointer;transition:all .15s;color:var(--text)}
.reaction-btn:hover{border-color:var(--gold3);background:rgba(201,168,76,.1);transform:scale(1.2)}

/* ── PRIVATE MESSAGE POPUP — REDESIGNED ── */
#pm-overlay{position:fixed;inset:0;background:rgba(4,7,12,.72);display:none;align-items:center;justify-content:center;z-index:5000;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#pm-overlay.show{display:flex;animation:fade-in .2s ease-out}
#pm-box{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid rgba(201,168,76,.25);border-radius:18px;padding:0;width:100%;max-width:360px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05) inset;animation:confirm-pop .24s cubic-bezier(.22,1,.36,1)}
#pm-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg, rgba(201,168,76,.13), transparent);border-bottom:1px solid rgba(201,168,76,.18)}
#pm-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:800;font-family:'Cinzel Decorative',serif;flex-shrink:0;border:2px solid;box-shadow:0 0 14px rgba(201,168,76,.12)}
#pm-player-name{flex:1;font-size:.82rem;font-weight:800;letter-spacing:.3px}
#pm-player-label{font-size:.52rem;color:var(--dim);margin-top:2px;letter-spacing:.8px}
#pm-close-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--dim);cursor:pointer;font-size:.9rem;width:28px;height:28px;border-radius:8px;transition:all .15s}
#pm-close-btn:hover{color:#fc8181;border-color:rgba(252,129,129,.5)}
#pm-msgs{height:230px;overflow-y:auto;padding:14px 14px;display:flex;flex-direction:column;gap:8px;background: radial-gradient(ellipse at top, rgba(201,168,76,.025), transparent 55%)}
#pm-msgs:empty::after{content:'💬 ابدأ المحادثة الآن…';display:block;text-align:center;color:var(--dim);font-size:.68rem;margin-top:60px;opacity:.9}
.pm-msg{display:flex;flex-direction:column;max-width:82%}
.pm-msg.mine{align-self:flex-end;align-items:flex-end}
.pm-msg.theirs{align-self:flex-start;align-items:flex-start}
.pm-bubble{padding:9px 13px;border-radius:14px;font-size:.74rem;line-height:1.5;word-break:break-word;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.pm-msg.mine .pm-bubble{background:linear-gradient(135deg,rgba(201,168,76,.32),rgba(201,168,76,.16));border:1px solid rgba(201,168,76,.45);color:var(--gold2);border-bottom-right-radius:5px}
.pm-msg.theirs .pm-bubble{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--text);border-bottom-left-radius:5px}
.pm-time{font-size:.45rem;color:var(--dim);margin-top:3px;padding:0 4px}
.pm-emoji-bar{display:flex;gap:5px;padding:9px 12px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap;background:rgba(0,0,0,.18)}
.pm-emoji-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:4px 7px;font-size:.9rem;cursor:pointer;transition:all .15s;line-height:1}
.pm-emoji-btn:hover{transform:scale(1.22);background:rgba(201,168,76,.18);border-color:var(--gold3)}
#pm-form{display:flex;align-items:center;gap:7px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22)}
#pm-inp{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);font-family:'Nunito',sans-serif;font-size:.74rem;padding:10px 13px;outline:none;border-radius:11px}
#pm-inp::placeholder{color:var(--dim)}
#pm-inp:focus{border-color:var(--gold3);background:rgba(255,255,255,.08)}
#pm-send-btn{background:linear-gradient(135deg, var(--gold), var(--gold2));border:none;color:#1a1406;cursor:pointer;padding:10px 14px;font-size:.95rem;border-radius:11px;font-weight:800;transition:all .15s}
#pm-send-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* notification badge on player card */

.pm-notif-badge{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:#fc8181;border:2px solid var(--panel);font-size:.42rem;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;animation:ping .8s ease-out infinite}
.pcard-wrap{position:relative}
/* clickable style for player avatar/name */
.pm-clickable{cursor:pointer;transition:opacity .15s}
.pm-clickable:hover{opacity:.75}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:safe center;z-index:200;background:var(--bg);padding:16px;overflow-y:auto;touch-action:auto !important}
.screen > div, .screen > .card { margin: 0 auto; }
.side { touch-action: pan-y !important; }
.screen.active{display:flex}
.logo{font-family:'Cinzel Decorative',serif;font-size:clamp(1.1rem,6vw,2rem);color:var(--gold);letter-spacing:clamp(1px,1vw,6px);text-shadow:0 0 40px rgba(201,168,76,.4);text-align:center;white-space:nowrap;max-width:100%}
.sub{font-size:.65rem;color:var(--dim);letter-spacing:3px;text-align:center;margin-top:4px}
.card{background:var(--panel2);border:1px solid var(--bdr2);border-radius:10px;padding:16px 20px;width:100%;max-width:440px;margin:0 auto}
.card h3{font-size:.7rem;font-weight:700;color:var(--gold);letter-spacing:2px;margin-bottom:14px;border-bottom:1px solid var(--bdr);padding-bottom:8px;text-transform:uppercase}
.inp{background:var(--panel);border:1px solid var(--bdr2);color:var(--text);padding:10px 13px;font-family:'Nunito',sans-serif;font-size:.9rem;border-radius:6px;width:100%;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--gold3)}
.label{font-size:.65rem;color:var(--dim);letter-spacing:1px;margin-bottom:5px;font-weight:700}
.err{font-size:.7rem;color:#f56565;text-align:center;min-height:1.2em;margin-top:6px}
.btn{background:var(--panel);border:1px solid var(--bdr2);color:var(--text);padding:10px 14px;font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.5px;cursor:pointer;border-radius:6px;width:100%;transition:all .15s}
.btn:hover{border-color:var(--gold3);color:var(--gold)}
.btn.pri{border-color:var(--gold3);color:var(--gold);background:rgba(201,168,76,.08)}
.btn.pri:hover{background:rgba(201,168,76,.18)}
.btn.big{font-family:'Cinzel Decorative',serif;font-size:.82rem;letter-spacing:2px;padding:13px;border-color:var(--gold3);color:var(--gold)}
.btn.big:hover{background:rgba(201,168,76,.12);box-shadow:0 0 20px rgba(201,168,76,.1)}
.btn.grn{border-color:#276749;color:#48bb78}
.btn.red{border-color:#742a2a;color:#fc8181}
.btn:disabled{opacity:.25;cursor:not-allowed}
.or{text-align:center;font-size:.65rem;color:var(--dim);letter-spacing:2px;position:relative;margin:4px 0}
.or::before,.or::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--bdr)}
.or::before{left:0}.or::after{right:0}

/* ── NAME SCREEN colors ── */
.color-grid{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.color-opt{width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;flex-shrink:0}
.color-opt:hover{transform:scale(1.15)}
.color-opt.sel{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.35)}

/* ── ROOM CODE ── */
.room-code{font-family:'Cinzel Decorative',serif;font-size:2rem;color:var(--gold);letter-spacing:14px;text-align:center;padding:14px;background:rgba(0,0,0,.3);border-radius:6px;border:1px solid var(--bdr2);cursor:pointer}
.room-code:hover{border-color:var(--gold3)}
.copy-hint{font-size:.55rem;color:var(--dim);letter-spacing:2px;font-family:'Nunito',sans-serif;margin-top:4px}
.pslot{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,0,0,.2);border-radius:6px;border:1px solid var(--bdr);margin-bottom:6px}
.psdot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.psname{flex:1;font-size:.8rem;font-weight:600}
.pstag{font-size:.5rem;background:rgba(201,168,76,.15);color:var(--gold);padding:2px 6px;border-radius:8px;border:1px solid var(--gold3)}
.pshost{font-size:.5rem;color:#63b3ed;border:1px solid #2b6cb0;padding:2px 6px;border-radius:8px}

/* ── HEADER ── */
#hdr{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;flex-shrink:0;border-bottom:1px solid var(--bdr);background:linear-gradient(180deg,#0d1117,#101820)}
#hdr h1{font-family:'Cinzel Decorative',serif;font-size:.95rem;color:var(--gold);letter-spacing:4px}
#round-counter{font-size:.68rem;font-weight:800;letter-spacing:1px;color:var(--text);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:10px;margin-left:12px;white-space:nowrap}
.hbtns{display:flex;gap:6px;align-items:center}
.hbtn{background:none;border:1px solid var(--bdr);color:var(--dim);font-family:'Nunito',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.5px;padding:4px 9px;cursor:pointer;border-radius:4px;transition:all .15s}
.hbtn:hover{border-color:var(--gold3);color:var(--gold)}
.hbtn.icon{font-size:.95rem;padding:4px 7px;border-radius:50%;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;gap:1px}
.hbtn.icon .ico{width:14px;height:14px}
#cards-btn{width:auto !important;border-radius:14px !important;padding:4px 8px !important;min-width:34px}
#cards-btn .ico{width:13px;height:13px}

/* ── TURN BANNER ── */
#tbar{height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--bdr);transition:background .4s}
#tb-left{display:flex;align-items:center;gap:8px;position:relative}
#tb-dot{width:9px;height:9px;border-radius:50%}
#tb-name{font-size:.75rem;font-weight:800;letter-spacing:.5px}
#tb-round{font-size:.62rem;font-weight:800;letter-spacing:.8px;color:var(--gold);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 11px;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.04);}
#tb-phase{font-size:.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:2px 8px;letter-spacing:1px;color:rgba(255,255,255,.45)}
#tb-hint{font-size:.58rem;color:rgba(255,255,255,.5);text-align:right;max-width:250px;line-height:1.3}
#tb-wait{font-size:.6rem;color:var(--gold);border:1px solid var(--gold3);border-radius:4px;padding:3px 8px;animation:blink 1s infinite}

/* ── TIMER BAR ── */
#timer-bar{height:4px;width:100%;background:rgba(0,0,0,.3);flex-shrink:0;overflow:hidden}
#timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#27ae60,#48bb78);transition:width .1s linear}
#timer-fill.warning{background:linear-gradient(90deg,#e67e22,#f1c40f)}
#timer-fill.danger{background:linear-gradient(90deg,#c0392b,#e74c3c)}

/* ── MAIN LAYOUT ── */
#game-layout{display:flex;flex:1;overflow:hidden}

/* ── SIDE PANELS ── */
.side{width:170px;min-width:170px;background:var(--panel);display:flex;flex-direction:column;padding:8px;gap:6px;overflow-y:auto;border-color:var(--bdr)}
#lpanel{border-right:1px solid var(--bdr)}
#rpanel{border-left:1px solid var(--bdr)}
.ptitle{font-size:.55rem;font-weight:800;letter-spacing:2px;color:var(--gold);border-bottom:1px solid var(--bdr);padding-bottom:4px;margin-bottom:2px;text-transform:uppercase}
.lsep{height:1px;background:var(--bdr);flex-shrink:0}
.pcard{border-left:3px solid;border-radius:4px;padding:6px 8px;background:var(--panel2)}
.pcard.active{background:rgba(255,255,255,.04)}
.pcname{font-size:.7rem;font-weight:800;letter-spacing:.3px;margin-bottom:2px}
.pcard.active .pcname::before{content:'▶ ';color:var(--gold)}
.pcard.elim{opacity:.2;filter:grayscale(1)}
.pcstats{font-size:.58rem;color:var(--dim);line-height:1.8}.pcstats b{color:var(--text)}
.ytag{font-size:.44rem;background:rgba(201,168,76,.15);color:var(--gold);padding:1px 5px;border-radius:6px;border:1px solid var(--gold3);margin-left:4px}
.ctag{font-size:.42rem;padding:1px 5px;border-radius:8px;border:1px solid;display:inline-block;margin:1px}
.contlist{font-size:.56rem;color:var(--dim);line-height:2}
.contlist .cb{display:flex;justify-content:space-between;align-items:center}
.contlist .cb span{color:var(--gold);font-weight:700}
.phase-card{border-radius:6px;padding:9px 10px;background:var(--panel2);border:1px solid var(--bdr2)}
.phlabel{font-size:.5rem;letter-spacing:2px;color:var(--dim);font-weight:700;margin-bottom:2px;text-transform:uppercase}
.phname{font-size:.95rem;color:var(--gold);font-weight:800;margin-bottom:4px}
.phinfo{font-size:.62rem;color:var(--text);line-height:1.65}
.phinfo .hl{color:var(--gold2);font-weight:700}
.phinfo .sm{font-size:.52rem;color:var(--dim)}
.steps{display:flex;margin:5px 0}
.step{flex:1;text-align:center;font-size:.46rem;border-bottom:2px solid var(--bdr);color:var(--dim);padding:3px;transition:all .2s;font-weight:700;letter-spacing:.5px}
.step.active{border-color:var(--gold);color:var(--gold)}
.step.done{border-color:#276749;color:#48bb78}

/* ── MAP ── */
#marea{flex:1;position:relative;overflow:hidden;background:var(--ocean);cursor:grab;isolation:isolate}
#marea.panning{cursor:grabbing}
#marea.noturn{cursor:default}
/* keep the SVG background the same as the map area so store backgrounds do not show ugly blocks/margins */
#world-svg{width:auto;height:100%;max-width:100%;display:block;margin:0 auto;background:var(--ocean);overflow:visible}
.tp{stroke:#0d1420;stroke-width:.8;cursor:pointer;transition:filter .1s}
.tp:hover{filter:brightness(1.25) drop-shadow(0 0 5px rgba(255,210,80,.25))}
.tp.sel{stroke:var(--gold2);stroke-width:2.5;filter:brightness(1.35)}
.tp.atking{stroke:#ff7700;stroke-width:3;animation:patk .5s infinite alternate}
.tp.vtarget{stroke:#ff2200;stroke-width:2.5;animation:ptgt .6s infinite alternate}
.tp.vmove{stroke:#00aaff;stroke-width:2;filter:brightness(1.15)}
@keyframes patk{from{stroke-width:2.5;stroke:#ff7700}to{stroke-width:4;stroke:#ffaa00}}
@keyframes ptgt{from{stroke-width:2;stroke:#ff2200}to{stroke-width:3.5;stroke:#ff5500}}
.lbl{pointer-events:none;user-select:none}
.ln{font-family:'Nunito',sans-serif;font-size:7px;fill:rgba(255,255,255,.9);font-weight:800;paint-order:stroke fill;stroke:rgba(0,0,0,.85);stroke-width:2px;opacity:var(--ln-opacity, 0);transition:opacity .2s}
.lnum{font-family:'Cinzel Decorative',serif;font-size:10px;fill:#fff;paint-order:stroke fill;stroke:rgba(0,0,0,.9);stroke-width:3px;opacity:1}
.ping-ring{animation:ping .8s ease-out forwards}

/* ── ZOOM ── */
.zctrl{position:absolute;bottom:10px;right:10px;z-index:20;display:flex;gap:3px}
.zbtn{width:28px;height:28px;background:rgba(10,14,20,.88);border:1px solid var(--bdr2);color:var(--gold);font-size:.9rem;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .12s;font-weight:700}
.zbtn:hover{border-color:var(--gold3)}.zbtn.w{width:auto;padding:0 8px;font-size:.5rem;letter-spacing:1px;font-family:'Nunito',sans-serif}

/* ── MOBILE BOTTOM BAR ── */
/* overflow-x:auto is a safety net: if a device is narrow enough that all
   buttons can't fit even after shrinking, they become horizontally
   scrollable instead of silently getting clipped off-screen and unreachable
   (this is what previously made Leave/Cards/Chat/Settings inaccessible). */
#mobile-bar{display:none;height:48px;flex-shrink:0;background:var(--panel);border-top:1px solid var(--bdr);padding:0 8px;align-items:center;gap:6px;z-index:30;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.mbtn{background:none;border:1px solid var(--bdr2);color:var(--dim);font-family:'Nunito',sans-serif;font-size:.65rem;font-weight:700;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s;flex-shrink:0;min-width:36px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.mbtn:hover,.mbtn.active{border-color:var(--gold3);color:var(--gold);background:rgba(201,168,76,.06)}
@media(max-width:400px){
  #mobile-bar{padding:0 5px;gap:4px}
  .mbtn{padding:6px 8px;font-size:.6rem}
  #mb-info{display:none}
}

/* Battle Log floating panel removed — it was covering essential mobile controls
   (Leave/Cards/Chat/Settings became unreachable). addLog()/G.log still exist in
   JS (game state + many call sites), just with no UI rendering them anymore. */

/* ── CHAT PANEL — REDESIGNED ── */
#chatpanel{
  position:fixed; bottom:58px; left:14px; width:320px; max-width:calc(100vw - 28px);
  z-index:40; background:linear-gradient(180deg, rgba(25,30,40,.97), rgba(18,22,30,.97));
  border:1px solid rgba(201,168,76,.25); border-radius:16px; overflow:hidden;
  box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:all .28s cubic-bezier(.22,1,.36,1);
}
#chatpanel.hidden{transform:translateY(16px) scale(.97);opacity:0;pointer-events:none}
#chat-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.04));border-bottom:1px solid rgba(201,168,76,.18)}
#chat-head .ch-ico{width:28px;height:28px;border-radius:8px;background:rgba(201,168,76,.15);display:flex;align-items:center;justify-content:center;color:var(--gold)}
#chat-head span{font-size:.62rem;font-weight:800;color:var(--gold2);letter-spacing:1.8px;text-transform:uppercase}
#chat-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--dim);cursor:pointer;font-size:.8rem;width:26px;height:26px;border-radius:7px;transition:all .15s}
#chat-close:hover{color:#fc8181;border-color:rgba(252,129,129,.5)}
#chat-msgs{height:240px;overflow-y:auto;padding:12px 12px;display:flex;flex-direction:column;gap:9px;background: radial-gradient(ellipse at top, rgba(201,168,76,.03), transparent 60%)}
#chat-msgs::-webkit-scrollbar{width:5px} #chat-msgs::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:3px}
.cmsg{display:flex;gap:8px;align-items:flex-start;animation:fade-in .2s ease-out}
.cmsg.me{flex-direction:row-reverse}
.c-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--dim)}
.cmsg.me .c-avatar{background:rgba(201,168,76,.15);border-color:var(--gold3);color:var(--gold)}
.c-bubble{max-width:72%;padding:8px 11px;border-radius:12px;font-size:.7rem;line-height:1.5;position:relative}
.cmsg:not(.me) .c-bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text);border-top-left-radius:4px}
.cmsg.me .c-bubble{background:linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.1));border:1px solid rgba(201,168,76,.35);color:var(--gold2);border-top-right-radius:4px}
.c-name{font-size:.5rem;font-weight:700;opacity:.72;margin-bottom:2px}
.c-time{font-size:.45rem;color:var(--dim);margin-top:3px;opacity:.8}
.chat-emoji-bar{display:flex;gap:4px;padding:7px 10px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2);flex-wrap:wrap}
.chat-emoji-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:3px 6px;font-size:.78rem;cursor:pointer;transition:all .12s}
.chat-emoji-btn:hover{transform:scale(1.18);background:rgba(201,168,76,.15);border-color:var(--gold3)}
#chat-form{display:flex;align-items:center;gap:7px;padding:9px 10px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.25)}
#chat-inp{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text);font-family:'Nunito',sans-serif;font-size:.72rem;padding:9px 12px;border-radius:10px;outline:none;transition:border-color .15s}
#chat-inp:focus{border-color:var(--gold3);background:rgba(255,255,255,.07)}
#chat-send{background:linear-gradient(135deg, var(--gold), var(--gold2));border:none;color:#1a1406;cursor:pointer;padding:9px 13px;font-size:.82rem;border-radius:10px;font-weight:800;transition:all .15s}
#chat-send:hover{filter:brightness(1.08);transform:translateY(-1px)}
.chat-sys{font-size:.58rem;color:var(--dim);text-align:center;padding:4px;font-style:italic}

/* ── MODAL ── */

#moverlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
#moverlay.show{display:flex}
#modal{background:var(--panel);border:1px solid var(--bdr2);border-radius:10px;padding:20px 22px;width:100%;max-width:390px;text-align:center;max-height:90vh;overflow-y:auto;animation:fade-in .2s ease-out}
#modal h3{font-size:.9rem;font-weight:800;color:var(--gold);letter-spacing:1px;margin-bottom:12px}
.darea{background:rgba(0,0,0,.3);border-radius:6px;padding:12px 8px;margin:10px 0}
.dlbl{font-size:.55rem;letter-spacing:2px;color:var(--dim);margin-bottom:6px;font-weight:700;text-transform:uppercase}
.drow{display:flex;gap:8px;justify-content:center}
.die{width:42px;height:42px;border-radius:6px;font-family:'Cinzel Decorative',serif;font-size:1.2rem;display:flex;align-items:center;justify-content:center;border:2px solid;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.die.a{border-color:#822727;background:rgba(180,40,40,.15);color:#fc8181}
.die.d{border-color:#1a4a7a;background:rgba(30,80,150,.15);color:#63b3ed}
.die.won{border-color:var(--gold);background:rgba(201,168,76,.12)}
.die.lost{opacity:.28;border-color:#333}
.rline{font-size:.72rem;margin:3px 0;padding:3px 8px;border-radius:4px}
.rline.atk{background:rgba(200,60,60,.1);color:#fc8181}
.rline.def{background:rgba(60,100,200,.1);color:#63b3ed}
.srow{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px 0}
.snum{font-family:'Cinzel Decorative',serif;font-size:1.5rem;color:var(--gold);min-width:46px;text-align:center}
.sbtn{width:34px;height:34px;border-radius:6px;font-size:1.1rem;background:var(--panel2);border:1px solid var(--bdr2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.sbtn:hover{border-color:var(--gold3);color:var(--gold)}
.qbtns{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:4px 0 10px}
.qb{background:var(--panel2);border:1px solid var(--bdr2);color:var(--dim);font-family:'Nunito',sans-serif;font-size:.58rem;font-weight:700;padding:3px 10px;cursor:pointer;border-radius:4px}
.qb:hover{border-color:var(--gold3);color:var(--gold)}
.mbtns{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.mbtns .btn{width:auto;padding:8px 18px}

/* ── WIN ── */
#winscreen{position:fixed;inset:0;background:rgba(0,0,0,.95);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:300;gap:14px}
#winscreen h2{font-family:'Cinzel Decorative',serif;font-size:clamp(1.5rem,6vw,2.4rem);color:var(--gold);animation:glow 2s infinite alternate}


/* ── CARDS ── */
@keyframes card-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes card-draw{0%{transform:rotateY(90deg) scale(.7);opacity:0}60%{transform:rotateY(-8deg) scale(1.05)}100%{transform:rotateY(0) scale(1);opacity:1}}
@keyframes card-bounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.04)}70%{transform:translateY(-2px) scale(1.01)}}
@keyframes card-glow-pulse{0%,100%{box-shadow:0 0 8px 0 rgba(201,168,76,.3)}50%{box-shadow:0 0 22px 4px rgba(201,168,76,.65)}}
@keyframes card-notify{0%{transform:scale(1)}20%{transform:scale(1.35) rotate(-6deg)}50%{transform:scale(1.2) rotate(4deg)}80%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
.cards-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:center}
.card-chip{
  width:108px;height:148px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;font-size:1.05rem;border:2px solid;cursor:default;
  transition:transform .18s,box-shadow .18s;
  padding:12px 8px;text-align:center;position:relative;overflow:hidden;
}
.card-chip::before{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,.07) 100%);
  pointer-events:none;
}
.card-chip .cn{font-size:.78rem;font-weight:800;line-height:1.2;letter-spacing:.3px}
.card-chip .cb{font-size:.6rem;color:rgba(255,255,255,.6);line-height:1.35;margin-top:1px}
.card-chip .cicon{font-size:2rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.card-chip.sel{
  transform:translateY(-8px) scale(1.06)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 3px currentColor!important;
}
.card-chip:not(.sel):hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.card-chip.inf{
  border-color:#3a8050;
  background:linear-gradient(155deg,rgba(50,100,65,.55) 0%,rgba(30,70,45,.8) 100%);
  color:#7be3a0;box-shadow:0 4px 16px rgba(50,180,90,.12);
}
.card-chip.cav{
  border-color:#3a5a90;
  background:linear-gradient(155deg,rgba(50,80,140,.55) 0%,rgba(30,55,110,.8) 100%);
  color:#78b8f0;box-shadow:0 4px 16px rgba(60,120,220,.12);
}
.card-chip.art{
  border-color:#903a3a;
  background:linear-gradient(155deg,rgba(140,50,50,.55) 0%,rgba(110,30,30,.8) 100%);
  color:#f08080;box-shadow:0 4px 16px rgba(220,60,60,.12);
}
.card-chip.wld{
  border-color:#c09030;
  background:linear-gradient(155deg,rgba(140,100,30,.55) 0%,rgba(100,70,15,.8) 100%);
  color:var(--gold2);box-shadow:0 4px 16px rgba(201,168,76,.18);
}
.card-chip.wld.taqs-card{
  border-color:var(--gold);
  background:linear-gradient(155deg,rgba(160,115,20,.6) 0%,rgba(110,75,10,.88) 100%);
  animation:card-glow-pulse 2.5s ease-in-out infinite;
}
.card-chip.reward{
  width:200px;height:260px;border-radius:20px;gap:16px;
  font-size:1.2rem;padding:20px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 30px rgba(201,168,76,.2);
  animation:card-draw .55s cubic-bezier(.22,1,.36,1) forwards;
}
.card-chip.reward .cn{font-size:1.05rem;font-weight:900}
.card-chip.reward .cb{font-size:.78rem;color:rgba(255,255,255,.85);line-height:1.5}
.card-chip.reward .cicon{font-size:2.6rem}
.card-chip.new-card{animation:card-draw .5s cubic-bezier(.22,1,.36,1) forwards}
#trade-bar{padding:8px 10px;background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.06));border:1px solid var(--gold3);border-radius:8px;margin-top:8px;display:none}
#trade-bar.show{display:block}
.trade-info{font-size:.6rem;color:var(--gold);margin-bottom:6px;font-weight:700}
/* Card panel improved header */
#cards-btn.has-cards{border-color:var(--gold)!important;color:var(--gold)!important;animation:card-notify .6s ease-out}
#card-head{background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.06))!important}
.card-panel-empty{font-size:.62rem;color:var(--dim);text-align:center;padding:12px 8px;line-height:1.7}
.card-panel-empty .ce-icon{font-size:1.8rem;display:block;margin-bottom:6px;opacity:.4}
/* Trade hint banner */
.trade-hint-banner{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(72,187,120,.18),rgba(72,187,120,.07));
  border:1px solid #276749;border-radius:8px;
  padding:7px 10px;margin-top:8px;cursor:pointer;
  transition:all .2s;
}
.trade-hint-banner:hover{background:linear-gradient(135deg,rgba(72,187,120,.3),rgba(72,187,120,.12));}
.trade-hint-banner span{font-size:.65rem;color:#48bb78;font-weight:700}
/* ── BLIZZARD ── */
.bliz-icon{pointer-events:none;user-select:none}
/* ── CASTLE ── */
.fort-icon{pointer-events:none;user-select:none}
/* ── CONT OVERLAY ── */
.cont-lbl{pointer-events:none;user-select:none}
/* ── MODE OPTS ── */
.mode-grid{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.mode-opt{flex:1;min-width:80px;padding:10px 8px;border:2px solid var(--bdr2);border-radius:8px;background:var(--panel);cursor:pointer;text-align:center;transition:all .2s}
.mode-opt:hover{border-color:var(--gold3)}
.mode-opt.sel{border-color:var(--gold);background:rgba(201,168,76,.1)}
.mode-opt .mi{font-size:1.4rem;display:block;margin-bottom:4px}
.mode-opt .mn{font-size:.65rem;font-weight:800;color:var(--text)}
.mode-opt .md{font-size:.52rem;color:var(--dim);margin-top:2px}
.mode-opt.locked{cursor:not-allowed;opacity:.5;filter:grayscale(.6);position:relative}
.mode-opt.locked:hover{border-color:var(--bdr2)}
.mode-opt.locked .md{color:var(--gold3);font-weight:700;letter-spacing:.5px}
/* ── PLAYER PANEL UPGRADE ── */
.pcard-wrap{display:flex;gap:6px;align-items:stretch;margin-bottom:6px}
.pcard-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;border:2px solid;font-weight:800;font-family:'Cinzel Decorative',serif}
.pcard-body{flex:1;border-radius:4px;padding:5px 7px;border-left:3px solid}
.pcard-body.active{background:rgba(255,255,255,.04)}
.pcard-body.elim{opacity:.2;filter:grayscale(1)}
.pcname2{font-size:.68rem;font-weight:800;margin-bottom:1px}
.pcstat2{font-size:.52rem;color:var(--dim);line-height:1.7}
.pcstat2 b{color:var(--text)}
.pcards-count{display:inline-block;background:rgba(201,168,76,.15);color:var(--gold);font-size:.44rem;padding:1px 5px;border-radius:6px;border:1px solid var(--gold3);margin-left:3px;font-weight:700}
/* ── CARD PANEL ── */
#cardpanel{position:fixed;bottom:10px;left:10px;z-index:45;background:var(--panel);border:1px solid var(--bdr2);border-radius:8px;min-width:240px;max-width:340px;overflow:hidden;transition:all .25s;box-shadow:0 4px 20px rgba(0,0,0,.5)}
#cardpanel.hidden{transform:translateY(calc(100% + 14px));opacity:0;pointer-events:none}
#card-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--panel2);border-bottom:1px solid var(--bdr)}
#card-head span{font-size:.55rem;font-weight:800;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
#card-close{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem}
#card-body{padding:8px 10px}
@media(max-width:680px){#cardpanel{bottom:58px}}

/* ── MOBILE RESPONSIVE ── */
@media(max-width:680px){
  #lpanel,#rpanel{display:none}
  #lpanel.open,#rpanel.open{display:flex;position:fixed;top:76px;bottom:48px;z-index:50;overflow-y:auto}
  #lpanel.open{left:0;width:160px}
  #rpanel.open{right:0;width:160px}
  #mobile-bar{display:flex}
  #chatpanel{top:auto;bottom:58px;left:8px;right:8px;width:auto;max-width:none}
  #chat-msgs{height:200px}
  .zctrl{bottom:58px}
  /* The in-game header's button row (Bonuses/Cards/Chat/Settings/Leave) has no
     wrapping and was getting clipped off-screen on narrow phones with no way
     to scroll to it — the bottom mobile-bar already provides all of those
     actions, so on small screens we hide the header's buttons and keep only
     the logo + online badge visible, avoiding any hidden/unreachable controls. */
  #hdr .hbtns .hbtn{display:none}
  #hdr .hbtns{margin-left:auto}
}
@media(max-width:400px){
  #hdr h1{font-size:.75rem;letter-spacing:2px}
  #tb-hint{display:none}
}

/* ═══════════════════════════════════════════════════════════
   NEW FEATURE STYLES — added 2026-06-07
   ═══════════════════════════════════════════════════════════ */

/* ── SVG ICON SYSTEM ── */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;flex-shrink:0;line-height:1}
.ico-lg{width:1.4em;height:1.4em}
.ico-xl{width:1.8em;height:1.8em}

/* ── LOADING SCREEN with REAL PROGRESS BAR ── */
#loading-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a2138 0%,#0a0d14 100%);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9998;font-family:'Nunito',sans-serif}
#loading-overlay.active{display:flex;animation:fade-in .3s ease-out}
.loading-globe{width:120px;height:120px;margin-bottom:24px;animation:loading-spin 3s linear infinite,loading-pulse 2s ease-in-out infinite}
@keyframes loading-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes loading-pulse{0%,100%{filter:drop-shadow(0 0 18px rgba(201,168,76,.35))}50%{filter:drop-shadow(0 0 32px rgba(201,168,76,.7))}}
.loading-title{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.4rem;letter-spacing:8px;text-shadow:0 0 40px rgba(201,168,76,.6);margin-bottom:8px}
.loading-sub{font-size:.7rem;color:var(--dim);letter-spacing:3px;margin-bottom:28px;text-transform:uppercase}
.loading-bar-wrap{width:min(360px,80vw);height:8px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;border:1px solid rgba(201,168,76,.2);position:relative}
.loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold3),var(--gold),var(--gold2));border-radius:6px;transition:width .3s ease-out;box-shadow:0 0 14px rgba(201,168,76,.5);position:relative;overflow:hidden}
.loading-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:loading-shimmer 1.5s infinite}
@keyframes loading-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.loading-percent{margin-top:14px;font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1rem;letter-spacing:3px;font-variant-numeric:tabular-nums}
.loading-status{margin-top:8px;font-size:.65rem;color:var(--dim);letter-spacing:1.5px;min-height:1em;text-align:center}

/* ── CONFIRMATION DIALOG ── */
#confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
#confirm-overlay.show{display:flex;animation:fade-in .2s ease-out}
#confirm-box{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--bdr2);border-radius:14px;padding:24px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(201,168,76,.1);animation:confirm-pop .25s cubic-bezier(.22,1,.36,1)}
@keyframes confirm-pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
#confirm-icon{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,rgba(231,76,60,.25),rgba(231,76,60,.05));margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#fc8181;border:2px solid rgba(231,76,60,.4)}
#confirm-icon .ico{width:30px;height:30px}
#confirm-title{font-family:'Cinzel Decorative',serif;font-size:1.05rem;color:var(--gold);letter-spacing:3px;margin-bottom:8px}
#confirm-msg{font-size:.78rem;color:var(--text);line-height:1.55;margin-bottom:18px}
#confirm-actions{display:flex;gap:10px;justify-content:center}
#confirm-actions button{flex:1;max-width:140px;padding:11px 14px;border-radius:8px;font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .15s;border:1px solid}
.cf-no{background:var(--panel);border-color:var(--bdr2);color:var(--text)}
.cf-no:hover{border-color:var(--gold3);color:var(--gold)}
.cf-yes{background:linear-gradient(135deg,rgba(231,76,60,.25),rgba(231,76,60,.12));border-color:#822727;color:#fc8181}
.cf-yes:hover{background:linear-gradient(135deg,rgba(231,76,60,.45),rgba(231,76,60,.22));box-shadow:0 4px 18px rgba(231,76,60,.3)}

/* ── INTRO MAP ANIMATION ── */
@keyframes map-intro-zoom{
  0%{opacity:0;transform:scale(2.4) rotate(-3deg);filter:blur(8px) brightness(.4)}
  35%{opacity:.5;transform:scale(1.6) rotate(-1deg);filter:blur(3px) brightness(.7)}
  70%{opacity:1;transform:scale(1.05) rotate(0);filter:blur(0) brightness(1.1)}
  100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0) brightness(1)}
}
@keyframes map-intro-reveal{
  0%{clip-path:circle(0% at 50% 50%);opacity:0}
  100%{clip-path:circle(150% at 50% 50%);opacity:1}
}
#world-svg.intro-anim{animation:map-intro-zoom 1.6s cubic-bezier(.22,1,.36,1) forwards,map-intro-reveal 1.4s ease-out forwards}
@keyframes territory-pop-in{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.tp.tp-intro{animation:territory-pop-in .6s ease-out backwards;transform-origin:center;transform-box:fill-box}

/* ── IMPROVED TERRITORY BORDERS ── */
.tp{stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#world-svg .tp{stroke:#0a0f18;stroke-width:1.75;stroke-opacity:.95}
/* map-specific border tuning */
#world-svg .tp[data-id^="s_"]{stroke-width:.7}
#world-svg .tp.sel{stroke:var(--gold2) !important;stroke-width:3 !important;filter:brightness(1.35) drop-shadow(0 0 6px rgba(240,208,128,.5))}
#world-svg .tp:hover{stroke:#1a2638 !important;stroke-width:1.6 !important;filter:brightness(1.2) drop-shadow(0 0 8px rgba(255,210,80,.3))}
#world-svg .tp[data-id^="s_"]:hover{stroke-width:.9 !important}
/* Attack/Fortify highlights must override the global SVG border rules */
#world-svg .tp.atking{stroke:#ffb000 !important;stroke-width:3.8 !important;filter:brightness(1.55) saturate(1.45) drop-shadow(0 0 10px rgba(255,170,0,.75)) !important;animation:patk .5s infinite alternate}
#world-svg .tp.vtarget{stroke:#ff2200 !important;stroke-width:3.4 !important;filter:brightness(1.65) saturate(1.6) drop-shadow(0 0 12px rgba(255,50,0,.85)) !important;animation:ptgt .6s infinite alternate}
#world-svg .tp.vtarget:hover{stroke:#ffdd55 !important;stroke-width:4 !important;filter:brightness(1.9) saturate(1.8) drop-shadow(0 0 18px rgba(255,80,0,1)) !important}
#world-svg .tp.vmove{stroke:#00aaff !important;stroke-width:3 !important;filter:brightness(1.4) drop-shadow(0 0 10px rgba(0,170,255,.75)) !important}
/* Continent outer-border shading via subtle drop-shadow */
#world-svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}

/* ── SMOOTH ZOOM ── */
#world-svg{transition:filter .3s ease}

/* ── WEATHER EFFECTS ── */
#weather-layer{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.weather-particle{position:absolute;pointer-events:none;will-change:transform,opacity}
.rain-drop{width:1.5px;height:14px;background:linear-gradient(180deg,transparent,rgba(160,200,255,.7));border-radius:1px;animation:rain-fall linear infinite}
@keyframes rain-fall{0%{transform:translateY(-30px) translateX(0);opacity:0}10%{opacity:.8}100%{transform:translateY(110vh) translateX(-30px);opacity:0}}
.snow-flake{color:rgba(255,255,255,.85);font-size:14px;animation:snow-fall linear infinite;text-shadow:0 0 4px rgba(255,255,255,.4);user-select:none}
@keyframes snow-fall{0%{transform:translateY(-30px) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}50%{transform:translateY(50vh) translateX(40px) rotate(180deg)}100%{transform:translateY(110vh) translateX(-20px) rotate(360deg);opacity:0}}
.sand-particle{width:3px;height:3px;background:rgba(220,180,110,.45);border-radius:50%;animation:sand-blow linear infinite;box-shadow:0 0 4px rgba(220,180,110,.3)}
@keyframes sand-blow{0%{transform:translateX(-50px) translateY(0);opacity:0}10%{opacity:.7}100%{transform:translateX(110vw) translateY(40px);opacity:0}}
.weather-storm-flash{position:absolute;inset:0;background:rgba(255,255,255,.3);opacity:0;animation:storm-flash 8s infinite;pointer-events:none}
@keyframes storm-flash{0%,4%,8%,100%{opacity:0}2%{opacity:.8}6%{opacity:.5}}

/* ── BOTTOM SHEET (mobile) ── */
@media(max-width:680px){
  .side.bottom-sheet{
    position:fixed !important;
    bottom:0 !important;left:0 !important;right:0 !important;top:auto !important;
    width:100% !important;max-width:100% !important;
    height:60vh !important;max-height:60vh !important;
    border-radius:18px 18px 0 0 !important;
    border-top:1px solid var(--bdr2) !important;
    box-shadow:0 -8px 40px rgba(0,0,0,.65) !important;
    z-index:55 !important;
    animation:bs-slide-up .35s cubic-bezier(.22,1,.36,1);
    padding:10px 12px 14px !important;
    overflow-y:auto;
  }
  .side.bottom-sheet::before{
    content:'';display:block;width:40px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.22);margin:0 auto 10px;
  }
  #bs-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:54;display:none;animation:fade-in .2s ease-out;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  #bs-backdrop.show{display:block}
}
@keyframes bs-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ── PLAY NOW button ── */
.btn.play-now{
  background:linear-gradient(135deg,rgba(72,187,120,.2),rgba(72,187,120,.06));
  border:2px solid #276749;color:#48bb78;
  font-family:'Cinzel Decorative',serif;letter-spacing:3px;
  font-size:.9rem;padding:14px;
  box-shadow:0 4px 18px rgba(72,187,120,.18);
  transition:all .2s;position:relative;overflow:hidden;
}
.btn.play-now:hover{
  background:linear-gradient(135deg,rgba(72,187,120,.35),rgba(72,187,120,.15));
  box-shadow:0 6px 25px rgba(72,187,120,.4);transform:translateY(-1px);
}
.btn.play-now:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.play-now::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  animation:play-shimmer 2.4s infinite;
}
@keyframes play-shimmer{to{left:120%}}

/* ── INVITE LINK ── */
.invite-link-box{display:flex;gap:6px;margin-top:10px;align-items:stretch}
.invite-link-box input{
  flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--bdr2);
  color:var(--text);padding:9px 12px;border-radius:6px;font-size:.7rem;
  font-family:'Nunito',sans-serif;outline:none;
}
.invite-link-box input:focus{border-color:var(--gold3)}
.invite-btn{
  background:rgba(99,179,237,.15);border:1px solid #2b6cb0;color:#63b3ed;
  padding:9px 12px;border-radius:6px;cursor:pointer;font-size:.7rem;font-weight:700;
  display:flex;align-items:center;gap:5px;white-space:nowrap;transition:all .15s;
  font-family:'Nunito',sans-serif;
}
.invite-btn:hover{background:rgba(99,179,237,.3)}
.invite-share-row{display:flex;gap:6px;margin-top:8px}
.invite-share-row .invite-btn{flex:1;justify-content:center}

/* ── TOUCH SENSITIVITY enhancements ── */
.tp,.zbtn,.btn,.hbtn,.mbtn,.invite-btn{touch-action:manipulation}
@media(pointer:coarse){
  .zbtn{width:38px !important;height:38px !important;font-size:1.1rem !important}
  .zbtn.w{width:auto !important;padding:0 12px !important}
  .hbtn{padding:7px 11px !important;min-height:36px}
  .hbtn.icon{width:34px !important;height:34px !important}
  .mbtn{padding:9px 14px !important;min-height:40px}
  .btn{min-height:44px}
  .tp{stroke-width:1.6 !important}
}

/* === IMPROVED OCEAN & CLOUDS === */
#ocean-canvas { opacity: 0.65; transition: opacity .3s; }
.cloud { animation: cloud-drift 45s linear infinite; filter: blur(22px); }
.cloud:nth-child(2n) { animation-duration: 62s; }
.cloud:nth-child(3n) { animation-duration: 38s; }

/* === BETTER EXPLOSION PARTICLES === */
.explosion-particle {
  position: absolute;
  width: 6px; height: 6px;
  background: #f6e05e;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  animation: explode-particle-enhanced 0.7s ease-out forwards;
}
@keyframes explode-particle-enhanced {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0) translate(var(--dx), var(--dy)); opacity: 0; }
}

/* === BUBBLE PARTICLES === */
.bubble {
  position: absolute;
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  pointer-events: none;
  animation: bubble-rise 1.8s ease-out forwards;
}
@keyframes bubble-rise {
  0% { transform: translateY(0) scale(0.6); opacity: .8; }
  100% { transform: translateY(-120px) scale(1.3); opacity: 0; }
}


/* ── ACCOUNT / AUTH SYSTEM ── */
#account-fixed{position:fixed;top:12px;left:12px;z-index:215;display:none;align-items:center;gap:6px}
#account-fixed.show{display:flex}
.account-pill{background:rgba(13,17,23,.92);border:1px solid var(--bdr);color:var(--dim);font-family:'Nunito',sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.8px;padding:6px 11px;border-radius:4px;cursor:pointer;transition:all .15s;box-shadow:0 6px 22px rgba(0,0,0,.25);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.account-pill:hover{border-color:var(--gold3);color:var(--gold)}
.account-pill.guest{border-color:var(--gold3);color:var(--gold)}
.account-pill.verified{border-color:var(--gold3);color:var(--gold);background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(13,17,23,.92))}
.account-pill-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#d4af37,#8B6914);display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;border:1.5px solid #f0d080;color:#1a1406;font-weight:900;font-family:'Cinzel Decorative',serif;line-height:1;overflow:hidden}
.account-pill.guest .account-pill-avatar{background:rgba(255,255,255,.08);border-color:var(--bdr);color:var(--dim);font-size:.7rem}
.account-pill-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.account-pill.verified .account-pill-avatar{box-shadow:0 0 10px rgba(212,175,55,.3)}
@media(max-width:680px){#account-fixed{top:10px;left:8px}.account-pill{font-size:.58rem;padding:5px 8px}.account-pill-avatar{width:20px;height:20px;font-size:.58rem}.account-pill-text{max-width:90px}}
#auth-overlay{position:fixed;inset:0;background:rgba(4,7,12,.78);display:none;align-items:center;justify-content:center;z-index:10000;padding:16px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#auth-overlay.show{display:flex;animation:fade-in .18s ease-out}
#auth-box{width:100%;max-width:420px;background:linear-gradient(155deg,var(--panel2),var(--panel));border:1px solid rgba(201,168,76,.28);border-radius:18px;overflow:hidden;box-shadow:0 26px 80px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04) inset;animation:confirm-pop .22s cubic-bezier(.22,1,.36,1)}
.auth-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(201,168,76,.16);background:linear-gradient(135deg,rgba(201,168,76,.14),transparent)}
.auth-title{flex:1;color:var(--gold);font-weight:900;letter-spacing:1.5px;font-size:.82rem}
.auth-close{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--dim);cursor:pointer;font-weight:900}
.auth-close:hover{color:#fc8181;border-color:rgba(252,129,129,.5)}
.auth-body{padding:16px}
.auth-tabs{display:flex;gap:6px;background:rgba(0,0,0,.22);border:1px solid var(--bdr);border-radius:12px;padding:4px;margin-bottom:14px}
.auth-tab{flex:1;border:none;background:transparent;color:var(--dim);padding:9px;border-radius:9px;cursor:pointer;font-weight:800;font-family:'Nunito',sans-serif}
.auth-tab.active{background:rgba(201,168,76,.14);color:var(--gold);box-shadow:0 0 0 1px var(--gold3) inset}
.auth-row{margin-bottom:10px}.auth-small{font-size:.62rem;color:var(--dim);line-height:1.55;margin-top:8px;text-align:center}
.auth-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 14px}.auth-stat{background:rgba(0,0,0,.22);border:1px solid var(--bdr);border-radius:10px;padding:10px;text-align:center}.auth-stat b{display:block;color:var(--gold);font-size:1rem}.auth-stat span{font-size:.55rem;color:var(--dim);letter-spacing:1px}
.auth-msg{min-height:1.2em;font-size:.68rem;text-align:center;margin-top:8px;color:var(--dim);line-height:1.5}.auth-msg.err{color:#fc8181}.auth-msg.ok{color:#48bb78}
.shop-locked{padding:18px;text-align:center;border:1px dashed var(--gold3);border-radius:12px;background:rgba(201,168,76,.07);font-size:.78rem;line-height:1.7}


/* ═══════ Haptic Feedback — game-themed toggle switch ═══════ */
.haptic-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 13px;border-radius:11px;cursor:pointer;user-select:none;
  background:linear-gradient(135deg,rgba(201,168,76,.10),rgba(106,80,32,.06));
  border:1px solid var(--gold3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 4px rgba(0,0,0,.25);
  transition:background .2s,border-color .2s,transform .12s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.haptic-row::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 18% 50%, rgba(240,208,128,.10), transparent 55%);
  opacity:0;transition:opacity .25s;
}
.haptic-row:hover{
  background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(106,80,32,.10));
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(201,168,76,.18);
}
.haptic-row:hover::before{opacity:1}
.haptic-row:active{transform:scale(.985)}
.haptic-info{display:flex;align-items:center;gap:11px;min-width:0;flex:1;position:relative;z-index:1}
.haptic-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f0d080 0%,#c9a84c 55%,#8a6f2a 100%);
  color:#1a1207;
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.4);
}
.haptic-row:has(input:checked) .haptic-icon{ animation:hapticShake 2.4s ease-in-out infinite; }
.haptic-row:has(input:checked) .haptic-icon{ box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.4),
    0 0 14px rgba(240,208,128,.45);
}
/* Fallback for browsers that do not support :has() (Firefox <121, older Safari) */
.haptic-row.haptic-active .haptic-icon{ animation:hapticShake 2.4s ease-in-out infinite; box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.4), 0 0 14px rgba(240,208,128,.45); }
@keyframes hapticShake{
  0%,90%,100%{transform:translateX(0) rotate(0)}
  91%{transform:translateX(-1.2px) rotate(-4deg)}
  92%{transform:translateX(1.2px) rotate(4deg)}
  93%{transform:translateX(-1.2px) rotate(-4deg)}
  94%{transform:translateX(1.2px) rotate(4deg)}
  95%{transform:translateX(-.8px) rotate(-2deg)}
  96%{transform:translateX(.8px) rotate(2deg)}
  97%{transform:translateX(-.4px) rotate(-1deg)}
}
.haptic-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.haptic-title{font-size:.82rem;font-weight:800;color:var(--gold2);line-height:1.2;letter-spacing:.3px}
.haptic-sub{font-size:.6rem;color:var(--dim);line-height:1.3}

/* The switch — gold-themed */
.hswitch{position:relative;display:inline-block;width:50px;height:26px;flex-shrink:0;z-index:1}
.hswitch input{opacity:0;width:0;height:0;position:absolute}
.hslider{
  position:absolute;inset:0;cursor:pointer;
  background:linear-gradient(180deg,#1a1d24,#262b35);
  border:1px solid #0a0c10;
  border-radius:26px;transition:background .25s,box-shadow .25s,border-color .25s;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.03);
}
.hslider::before{
  content:"";position:absolute;left:2px;top:1.5px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(145deg,#dcdfe6 0%,#8d94a3 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 2px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s;
}
.hslider::after{
  /* tiny center notch like a game-piece nub */
  content:"";position:absolute;left:9px;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(0,0,0,.25));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.hswitch input:checked + .hslider{
  background:linear-gradient(180deg,#3a2d10,#5a4318);
  border-color:#1a1207;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(240,208,128,.18),
    0 0 12px rgba(201,168,76,.45),
    0 0 0 1px rgba(201,168,76,.3);
}
.hswitch input:checked + .hslider::before{
  transform:translateX(23px);
  background:linear-gradient(145deg,#f6e2a8 0%,#c9a84c 60%,#8a6f2a 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 2px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 8px rgba(240,208,128,.55);
}
.hswitch input:checked + .hslider::after{ transform:translateX(23px) }
.hswitch input:focus-visible + .hslider{outline:2px solid var(--gold);outline-offset:3px}
[dir="rtl"] .hswitch input:checked + .hslider::before,
[dir="rtl"] .hswitch input:checked + .hslider::after{transform:translateX(-23px)}

/* ═══ LEADERBOARD ═══ */
.lb-tab{
  flex:1;border:none;background:transparent;color:var(--dim);
  padding:9px;border-radius:9px;cursor:pointer;font-weight:800;
  font-family:'Nunito',sans-serif;font-size:.7rem;transition:all .15s;
}
.lb-tab:hover{color:var(--gold)}
.lb-tab.active{background:rgba(201,168,76,.14);color:var(--gold);box-shadow:0 0 0 1px var(--gold3) inset}
.lb-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(135deg,rgba(0,0,0,.22),rgba(0,0,0,.12));
  border:1px solid var(--bdr);border-radius:12px;transition:all .15s;
}
.lb-row:hover{border-color:var(--gold3)}
.lb-row.me{border-color:var(--gold);background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.04));box-shadow:0 0 12px rgba(201,168,76,.15)}
.lb-rank{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;flex-shrink:0;font-family:'Cinzel Decorative',serif}
.lb-rank.r1{background:linear-gradient(135deg,#ffd700,#b8860b);color:#1a1406;box-shadow:0 0 14px rgba(255,215,0,.4);border:2px solid #ffd700}
.lb-rank.r2{background:linear-gradient(135deg,#c0c0c0,#808080);color:#1a1a1a;box-shadow:0 0 10px rgba(192,192,192,.3);border:2px solid #c0c0c0}
.lb-rank.r3{background:linear-gradient(135deg,#cd7f32,#8b4513);color:#fff;box-shadow:0 0 10px rgba(205,127,50,.3);border:2px solid #cd7f32}
.lb-rank.rn{background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--bdr)}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:.78rem;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stats{font-size:.52rem;color:var(--dim);margin-top:2px;letter-spacing:.5px}
.lb-stats b{color:var(--gold)}
.lb-stats .lb-wr{color:#48bb78}
.lb-value{text-align:right;flex-shrink:0;min-width:60px}
.lb-value .lb-num{font-family:'Cinzel Decorative',serif;font-size:1rem;font-weight:900;color:var(--gold)}
.lb-value .lb-label{font-size:.42rem;color:var(--dim);letter-spacing:1px;margin-top:1px}
.lb-badge{display:inline-block;background:linear-gradient(135deg,#d4af37,#8B6914);color:#1a1406;font-size:.48rem;font-weight:900;padding:1px 6px;border-radius:5px;letter-spacing:.5px;margin-left:4px}
#lb-my-rank{display:flex;align-items:center;gap:10px}

/* ═══ FUSHWA WELCOME POPUP ═══ */
@keyframes fushwa-entrance{
  0%{opacity:0;transform:scale(.7) translateY(30px)}
  50%{opacity:1;transform:scale(1.03) translateY(-5px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes fushwa-glow-pulse{
  0%,100%{box-shadow:0 0 20px rgba(212,175,55,.3),0 0 40px rgba(212,175,55,.1)}
  50%{box-shadow:0 0 40px rgba(212,175,55,.6),0 0 80px rgba(212,175,55,.2)}
}
@keyframes fushwa-shimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
#fushwa-welcome-overlay.show{display:flex!important;animation:fade-in .3s ease-out}
#fushwa-welcome-box{animation:fushwa-entrance .5s cubic-bezier(.22,1,.36,1) forwards}
#fushwa-avatar{animation:fushwa-glow-pulse 2.5s ease-in-out infinite}
#fushwa-start-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:fushwa-shimmer 2.5s infinite;
}

/* ═══ CRAZYGAMES-STYLE PROFILE (inside auth modal) ═══ */
.cg-profile-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.04));border:1px solid var(--gold3);border-radius:14px;padding:14px;margin-bottom:12px}
.cg-profile-avatar-big{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#d4af37,#8B6914);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;border:3px solid #f0d080;box-shadow:0 0 20px rgba(212,175,55,.35);font-family:'Cinzel Decorative',serif;font-weight:900;color:#1a1406}
.cg-profile-hero-info{flex:1;min-width:0}
.cg-profile-hero-name{font-family:'Cinzel Decorative',serif;font-size:1.1rem;font-weight:900;color:var(--gold2);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-profile-hero-email{font-size:.6rem;color:var(--dim);margin-top:2px;word-break:break-all}
.cg-profile-hero-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cg-badge{display:inline-flex;align-items:center;gap:4px;font-size:.58rem;font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:.3px}
.cg-badge-level{background:linear-gradient(135deg,#d4af37,#8B6914);color:#1a1406;box-shadow:0 2px 8px rgba(212,175,55,.3)}
.cg-badge-rank{background:rgba(72,187,120,.15);border:1px solid #276749;color:#48bb78}
.cg-badge-coins{background:rgba(99,179,237,.15);border:1px solid #2b6cb0;color:#63b3ed}
.cg-xp-section{background:rgba(0,0,0,.22);border:1px solid var(--bdr);border-radius:12px;padding:12px;margin-bottom:12px}
.cg-xp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cg-xp-label{font-size:.62rem;color:var(--dim);font-weight:700;letter-spacing:1px}
.cg-xp-text{font-size:.68rem;font-weight:900;color:var(--gold)}
.cg-xp-bar-outer{position:relative;height:10px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.cg-xp-bar-inner{height:100%;background:linear-gradient(90deg,#d4af37,#f0d080);border-radius:8px;transition:width .6s cubic-bezier(.22,1,.36,1);position:relative;z-index:1}
.cg-xp-bar-glow{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);border-radius:8px;transition:width .6s;animation:cg-xp-shimmer 2s infinite}
@keyframes cg-xp-shimmer{0%{opacity:.3}50%{opacity:.8}100%{opacity:.3}}
.cg-xp-next{font-size:.55rem;color:var(--dim);margin-top:6px;text-align:right}
.cg-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cg-stat-card{text-align:center;background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-radius:12px;padding:10px 6px;transition:all .2s}
.cg-stat-card:hover{border-color:var(--gold3);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cg-stat-icon{font-size:1.3rem;margin-bottom:4px}
.cg-stat-value{font-family:'Cinzel Decorative',serif;font-size:1.1rem;font-weight:900;color:var(--gold);margin-bottom:2px}
.cg-stat-label{font-size:.45rem;color:var(--dim);letter-spacing:1.5px;font-weight:700}
.cg-stat-games .cg-stat-value{color:#63b3ed}
.cg-stat-wins .cg-stat-value{color:#48bb78}
.cg-stat-wr .cg-stat-value{color:#f6ad55}
.cg-stat-coins .cg-stat-value{color:#d4af37}
@media(max-width:420px){
  .cg-stats-grid{grid-template-columns:repeat(2,1fr)}
  .cg-profile-hero{flex-direction:column;text-align:center}
  .cg-profile-hero-badges{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   ANIMATED FORTIFY / MOVE ARROWS
   Individual arrow SHAPES between each pair of consecutive territories,
   appearing one after another with staggered delay.
   Each arrow = shaft (polygon) + triangular head + glow.
   ═══════════════════════════════════════════════════════════ */

/* Smooth fade-in for arrow groups */
[id^="__mv-seg-"],
[id^="__remote-seg-"] {
  transition: opacity 0.2s ease-out;
}

/* Ping ring at source/destination - keep pulsing */
.ping-ring {
  animation: ping 1.2s ease-out infinite !important;
}

/* Pulse rings for move arrows */
#__mv-pulse-src,
#__mv-pulse-dst,
#__remote-pulse-src,
#__remote-pulse-dst {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   CHEVRON-STYLE FORTIFY / MOVE ARROWS  ( ››››››› )
   Each arrow segment is a chain of chevrons flowing toward the
   destination. Used by the SVG arrow shapes on the map.
   ═══════════════════════════════════════════════════════════ */
@keyframes chvIn {
  from { opacity: 0; }
  to   { opacity: 0.95; }
}
@keyframes chvFlow {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.3; }
}

/* Territory chain shown inside the Fortify modal:
   Egypt ›››› Libya ›››› Tunisia ›››› destination            */
.ft-chain {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 5px;
  padding: 10px 12px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(240,208,128,.18);
  border-radius: 8px;
  margin-bottom: 12px;
  direction: ltr;              /* source always reads first, left → right */
  overflow-x: auto;
}
.ft-node {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold, #f0d080);
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}
.ft-node.src {
  color: #9be29b;
  border: 1px solid rgba(155,226,155,.45);
}
.ft-node.dst {
  color: #63b3ed;
  border: 1px solid rgba(99,179,237,.55);
  box-shadow: 0 0 9px rgba(99,179,237,.35);
}
.ft-chv {
  color: #f0d080;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: -3px;
  padding-right: 3px;
  animation: chvFlow 1.1s ease-in-out infinite;
}
.ft-chain-lbl {
  display: block;
  font-size: .46rem;
  letter-spacing: 1px;
  color: var(--dim, #8899aa);
  margin-bottom: 6px;
  direction: ltr;
  text-align: left;
}