/* AfterFall RTS — stile UI (brand proprio) */
:root{
  --bg:#0a0e0c; --panel:#111714; --panel-2:#0d1310;
  --line:#1e2a24; --line-2:#2b3a31;
  /* --green = accento principale: viene sovrascritto col colore della fazione scelta */
  --green:#39d98a;
  --green-dim:color-mix(in srgb, var(--green) 62%, #041008);
  --green-glow:color-mix(in srgb, var(--green) 35%, transparent);
  --text:#d9e6df; --muted:#7d8f86; --danger:#ff5b4a; --gold:#f7c948;
  --radius:12px; --shadow:0 10px 40px rgba(0,0,0,.5);
  /* colori canonici di fazione (fissi, indipendenti dall'accento --green) */
  --f-vanguard:#3d7bff; --f-dominion:#5aa832; --f-scavengers:#f0b323; --f-echo:#ff3b3b;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
#bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(57,217,138,.08), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(74,200,255,.05), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px),
    var(--bg);
}

/* topbar */
#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,23,20,.9), rgba(17,23,20,.3));
}
.brand{display:flex; align-items:center; gap:10px; letter-spacing:2px}
.brand-logo{height:40px; width:auto; display:block;
  -webkit-mask-image:radial-gradient(120% 130% at 50% 50%, #000 62%, transparent 92%);
  mask-image:radial-gradient(120% 130% at 50% 50%, #000 62%, transparent 92%)}
.brand-sub{color:var(--muted); font-size:12px; letter-spacing:4px; border:1px solid var(--line-2); padding:2px 6px; border-radius:6px}
.conn{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.conn .dot{width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 8px var(--danger)}
.conn.on .dot{background:var(--green); box-shadow:0 0 10px var(--green)}

/* layout schermi */
main{height:calc(100% - 59px); position:relative}
.screen{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; padding:24px; overflow:auto;
}
.screen.active{display:flex; animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}

/* card generica */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}

/* login */
.hero{max-width:640px; text-align:center}
.hero-logo{display:block; width:min(520px,82vw); height:auto; margin:0 auto 4px;
  filter:drop-shadow(0 8px 34px rgba(57,217,138,.14));
  -webkit-mask-image:radial-gradient(135% 120% at 50% 46%, #000 58%, transparent 86%);
  mask-image:radial-gradient(135% 120% at 50% 46%, #000 58%, transparent 86%)}
.tagline{text-align:center; color:var(--text); letter-spacing:3px; text-transform:uppercase; font-size:13px; margin:0 0 18px; opacity:.85}
.lead{color:var(--muted); font-size:16px; margin:0 auto 26px; max-width:480px}
.login-card{max-width:380px; margin:0 auto; text-align:left}
.login-card label{display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px}
input[type=text]{
  width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--line-2);
  background:#0a0f0d; color:var(--text); font-size:15px; outline:none;
}
input[type=text]:focus{border-color:var(--green-dim); box-shadow:0 0 0 3px var(--green-glow)}
.hint{color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center}

/* bottoni */
.btn{
  cursor:pointer; border:none; border-radius:9px; font-size:14px; font-weight:600;
  padding:12px 16px; color:#04120b; background:var(--green); transition:.15s;
}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn:active{transform:none}
.btn-sm{padding:8px 12px; font-size:13px}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line-2)}
.btn-ghost:hover{color:var(--text); border-color:var(--green-dim)}
.btn-google{width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1a1a1a}
.btn-google .g{font-weight:800; color:#4285f4}

/* menu / profilo */
#screen-menu{flex-direction:column; gap:22px; align-content:flex-start}
.profile-card{display:flex; align-items:center; gap:18px; width:min(680px,92vw)}
.avatar{width:56px; height:56px; border-radius:12px; display:grid; place-items:center; font-size:26px; color:var(--green); background:#0a0f0d; border:1px solid var(--line-2)}
.profile-info{flex:1}
.profile-name{font-size:20px; font-weight:700}
.profile-stats{display:flex; gap:22px; margin-top:6px}
.stat{display:flex; flex-direction:column}
.stat b{font-size:18px; color:var(--green)}
.stat i{font-style:normal; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.section-title{font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:2px; font-size:13px; margin:0}
.modes{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.mode-card{
  cursor:pointer; width:260px; text-align:left; padding:22px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-2); border-radius:var(--radius); color:var(--text); transition:.18s;
}
.mode-card:hover{border-color:var(--green-dim); box-shadow:0 0 0 3px var(--green-glow); transform:translateY(-2px)}
.mode-big{font-size:34px; font-weight:800; color:var(--green)}
.mode-label{font-size:16px; font-weight:600; margin-top:4px}
.mode-desc{color:var(--muted); font-size:13px; margin-top:8px}

/* coda */
.queue-card{text-align:center; width:min(420px,92vw)}
.spinner{width:44px; height:44px; border-radius:50%; border:4px solid var(--line-2); border-top-color:var(--green); margin:0 auto 18px; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted)}

/* lobby */
.lobby-card{width:min(560px,92vw); text-align:center}
.lobby-players{display:flex; flex-direction:column; gap:10px; margin:18px 0}
.lp{display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line-2); border-radius:9px; background:#0a0f0d}
.lp .chip{width:14px; height:14px; border-radius:4px}
.lp .lp-name{font-weight:600}
.lp .lp-faction{color:var(--muted); font-size:13px; margin-left:auto}
.lp.you{border-color:var(--green-dim)}
.faction-block{margin:16px 0}
.faction-picker{display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap}
.fac{cursor:pointer; padding:8px 12px; border-radius:8px; border:1px solid var(--line-2); background:#0a0f0d; display:flex; align-items:center; gap:8px; font-size:13px}
.fac .chip{width:12px;height:12px;border-radius:3px}
.fac.sel{border-color:var(--green); box-shadow:0 0 0 2px var(--green-glow)}
.countdown{margin-top:14px; color:var(--muted)}
.countdown b{color:var(--green); font-size:20px}

/* partita */
#screen-game{padding:0; align-items:stretch; justify-content:stretch}
#screen-game.active{display:flex; flex-direction:column}
#game-header{display:flex; align-items:center; gap:16px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel-2)}
#game-players{display:flex; gap:14px}
.gp{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600}
.gp .chip{width:12px;height:12px;border-radius:3px}
.gp .vs{color:var(--muted); margin:0 4px}
.game-note{margin-left:auto; color:var(--muted); font-size:12px; font-style:italic}
#game-stage{flex:1; display:grid; place-items:center; padding:16px; min-height:0}
#game-canvas{max-width:100%; max-height:100%; border:1px solid var(--line-2); border-radius:10px; background:#070b09; cursor:crosshair}
#chat{border-top:1px solid var(--line); background:var(--panel-2); padding:10px 14px}
#chat-log{max-height:110px; overflow:auto; font-size:13px; display:flex; flex-direction:column; gap:4px; margin-bottom:8px}
#chat-log .msg b{color:var(--green)}
#chat-log .msg.sys{color:var(--muted); font-style:italic}
#chat-form{display:flex; gap:8px}
#chat-form input{flex:1}

/* ---- DASHBOARD (home post-login) ---- */
#screen-home.active{display:block; padding:0; overflow:hidden}
.dash{display:flex; height:100%}
.sidebar{width:280px; flex-shrink:0; background:var(--panel-2); border-right:1px solid var(--line); padding:22px 18px; display:flex; flex-direction:column; gap:16px; overflow:auto}
.side-profile{text-align:center}
.side-profile .avatar{width:64px; height:64px; margin:0 auto 10px; font-size:30px}
.side-name{font-size:18px; font-weight:700}
.side-rank{color:var(--green); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; margin-top:2px}
.side-stats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.side-stats li{display:flex; justify-content:space-between; padding:9px 11px; border-radius:7px; font-size:13px}
.side-stats li:nth-child(odd){background:#0a0f0d}
.side-stats li span{color:var(--muted)}
.side-stats li b{color:var(--text)}
.side-nav{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.nav-btn{text-align:left; cursor:pointer; background:transparent; border:1px solid transparent; color:var(--muted); padding:11px 14px; border-radius:8px; font-size:14px; font-weight:600}
.nav-btn:hover{color:var(--text); background:#0a0f0d}
.nav-btn.active{color:var(--green); background:#0a0f0d; border-color:var(--green-dim)}
.side-logout{margin-top:auto}

.dash-main{flex:1; padding:26px 30px; overflow:auto}
.dash-view{display:none}
.dash-view.active{display:block; animation:fade .25s ease}
.dash-title{margin:0 0 4px; font-size:24px}
.dash-sub{color:var(--muted); margin:0 0 20px; font-size:14px}

.chat-panel{margin-top:26px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); overflow:hidden; max-width:720px}
.chat-panel-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; font-size:14px}
.chat-panel-head .online{color:var(--green); font-size:12px; font-weight:600}
.global-log{height:200px; overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:5px; font-size:14px}
.global-log .gmsg b{color:var(--green)}
#global-form{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line)}
#global-form input{flex:1}

.lb-wrap{max-width:720px; border:1px solid var(--line-2); border-radius:12px; overflow:hidden}
.lb-table{width:100%; border-collapse:collapse; font-size:14px}
.lb-table th{text-align:left; padding:12px 14px; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:1px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.lb-table td{padding:11px 14px; border-bottom:1px solid var(--line)}
.lb-table td:nth-child(3){color:var(--green); font-weight:600}
.lb-table tr.me{background:rgba(57,217,138,.08)}

/* ready check + caricamento */
.btn-ready{display:block; width:100%; max-width:280px; margin:8px auto; font-size:16px; padding:14px}
.btn-ready.done{background:var(--green-dim); color:#eaffee; cursor:default}
.lp-ready{margin-left:12px; font-size:12px; color:var(--muted); white-space:nowrap}
.lp-ready.on{color:var(--green); font-weight:600}
.loading-box{text-align:center}
.loading-box h2{margin:6px 0 8px}

/* ---- SELEZIONE FAZIONE (primo accesso) ---- */
#screen-faction.active{display:flex; align-items:center; justify-content:center; overflow:auto; padding:24px}
.faction-select{text-align:center; max-width:1080px; width:100%}
.fs-title{font-size:30px; letter-spacing:2px; margin:0 0 6px; text-transform:uppercase}
.fs-sub{color:var(--muted); margin:0 0 26px}
.faction-cards{display:flex; gap:20px; justify-content:center; flex-wrap:wrap}
.fcard{position:relative; width:300px; max-width:88vw; aspect-ratio:3/4; padding:0; cursor:pointer;
  border:2px solid var(--line-2); border-radius:14px; overflow:hidden; background:#0a0f0d; transition:.18s; --fc:#39d98a}
.fcard:hover{border-color:var(--fc); box-shadow:0 0 0 3px color-mix(in srgb, var(--fc) 38%, transparent), 0 14px 44px rgba(0,0,0,.55); transform:translateY(-5px)}
.fcard-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.fcard-body{position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px;
  background:radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--fc) 22%, #0a0f0d), #0a0f0d)}
.fcard-name{font-size:26px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--fc)}
.fcard-motto{color:#d9e6df; font-size:13px; opacity:.85; text-transform:uppercase; letter-spacing:1px}
.fcard-choose{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2; padding:9px 18px; border-radius:9px;
  background:var(--fc); color:#04120b; font-weight:800; font-size:14px; opacity:0; transition:.18s}
.fcard:hover .fcard-choose{opacity:1}

/* ============================================================
   VISTA GIOCA — switch PARTITA RAPIDA / WORLD MAP
   ============================================================ */
.play-tabs{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap}
.play-tab{
  flex:1; min-width:220px; cursor:pointer; text-align:left; padding:14px 18px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-2); border-radius:12px; color:var(--text); transition:.16s;
  display:flex; flex-direction:column; gap:3px;
}
.play-tab:hover{border-color:var(--green-dim); transform:translateY(-1px)}
.play-tab.active{border-color:var(--green); box-shadow:0 0 0 2px var(--green-glow); background:linear-gradient(180deg,#0c1611,var(--panel-2))}
.play-tab-big{font-size:17px; font-weight:800; letter-spacing:1.5px}
.play-tab.active .play-tab-big{color:var(--green)}
.play-tab-sub{font-size:12px; color:var(--muted); letter-spacing:.3px}

.play-pane{display:none}
.play-pane.active{display:block; animation:fade .22s ease}

/* ============================================================
   WORLD MAP — mappa Global War (dark tattico)
   ============================================================ */
.wm-legend{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.wm-tag{
  display:flex; align-items:center; gap:7px; padding:6px 10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  font-size:11px; letter-spacing:1px;
}
.wm-tag .wm-chip{width:11px; height:11px; border-radius:3px; box-shadow:0 0 8px currentColor}
.wm-tag .wm-tag-name{font-weight:700; color:var(--text)}
.wm-tag .wm-tag-count{font-family:var(--mono); font-size:13px; font-weight:700; min-width:18px; text-align:right; color:var(--text)}
.wm-tag[data-faction="vanguard"]  {color:var(--f-vanguard)}
.wm-tag[data-faction="dominion"]  {color:var(--f-dominion)}
.wm-tag[data-faction="scavengers"]{color:var(--f-scavengers)}
.wm-tag[data-faction="echo"]      {color:var(--f-echo)}
.wm-you{margin-left:auto; font-size:12px; color:var(--muted)}
.wm-you b{color:var(--green); text-transform:uppercase; letter-spacing:1px}

.wm-stage{
  position:relative; height:min(70vh,720px); min-height:420px;
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:var(--panel-2); box-shadow:inset 0 0 60px rgba(0,0,0,.5);
}
#wm-svg{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#wm-svg.grabbing{cursor:grabbing}
#wm-viewport{transition:transform .16s cubic-bezier(.22,.61,.36,1)}
#wm-viewport.dragging{transition:none}

#wm-graticule line{stroke:rgba(57,217,138,.05); stroke-width:.6}
#wm-graticule .equator{stroke:rgba(57,217,138,.12); stroke-width:.8; stroke-dasharray:6 6}
.wm-land{fill:#0e2a20; stroke:#2f6f52; stroke-width:1; stroke-linejoin:round; filter:url(#wm-landShadow)}
.wm-antarctica{fill:#0c211a; stroke:#255a43; stroke-width:1}

/* celle regione */
.wm-region .wm-hex{stroke-width:1.4; stroke-linejoin:round; fill-opacity:.30; transition:fill-opacity .4s, stroke-width .2s}
.wm-region .wm-core{opacity:.9; transition:opacity .4s}
.wm-region .wm-ring{fill:none; stroke-width:1.6; opacity:0; transition:opacity .25s}
.wm-region .wm-glow{fill:none; stroke:none}

/* colori per fazione */
.wm-region.vanguard   .wm-hex,.wm-region.vanguard   .wm-core{fill:var(--f-vanguard)}
.wm-region.dominion   .wm-hex,.wm-region.dominion   .wm-core{fill:var(--f-dominion)}
.wm-region.scavengers .wm-hex,.wm-region.scavengers .wm-core{fill:var(--f-scavengers)}
.wm-region.echo       .wm-hex,.wm-region.echo       .wm-core{fill:var(--f-echo)}
.wm-region.vanguard   .wm-hex{stroke:var(--f-vanguard)}
.wm-region.dominion   .wm-hex{stroke:var(--f-dominion)}
.wm-region.scavengers .wm-hex{stroke:var(--f-scavengers)}
.wm-region.echo       .wm-hex{stroke:var(--f-echo)}
.wm-region.vanguard   .wm-ring{stroke:var(--f-vanguard)}
.wm-region.dominion   .wm-ring{stroke:var(--f-dominion)}
.wm-region.scavengers .wm-ring{stroke:var(--f-scavengers)}
.wm-region.echo       .wm-ring{stroke:var(--f-echo)}

/* modificatori di stato */
.wm-region.contested .wm-hex{stroke-dasharray:3 2.4}
.wm-region.liberated .wm-hex{fill-opacity:.46}
.wm-region.peaceful  .wm-hex{fill-opacity:.22}

/* NON selezionabili: passive, non cliccabili */
.wm-region{cursor:default}
/* possedute dal giocatore: contorno tenue */
.wm-region.mine .wm-hex{fill-opacity:.42}
.wm-region.mine .wm-ring{opacity:.55; stroke-dasharray:2 3}

/* SELEZIONABILI: nemico al confine → glow + cursore + ring pulsante */
.wm-region.selectable{cursor:pointer}
.wm-region.selectable .wm-hex{fill-opacity:.6; stroke-width:2.2}
.wm-region.selectable .wm-glow{
  fill:none; stroke:#fff; stroke-width:1; opacity:.5;
  transform-box:fill-box; transform-origin:center; animation:wmPulse 2s ease-out infinite;
}
.wm-region.selectable:hover .wm-hex{fill-opacity:.85; stroke-width:3}
.wm-region.selectable:hover .wm-glow{opacity:.8; stroke-width:1.4}
.wm-region.selectable .wm-ring{opacity:1; stroke-width:1.8}
@keyframes wmPulse{0%{opacity:.5; transform:scale(.7)}100%{opacity:0; transform:scale(1.5)}}

.wm-region.selected .wm-hex{fill-opacity:.85; stroke-width:3.4}
.wm-region.selected .wm-ring{opacity:1; stroke-width:2.4}

/* effetto scintilla */
.wm-spark{fill:none; stroke:#fff; stroke-width:1.4; transform-box:fill-box; transform-origin:center; animation:wmSpark 1s ease-out forwards}
@keyframes wmSpark{0%{opacity:1; transform:scale(.3)}100%{opacity:0; transform:scale(2.6)}}

/* tooltip */
.wm-tooltip{
  position:absolute; z-index:6; pointer-events:none; min-width:150px; padding:8px 11px;
  background:rgba(10,14,12,.95); border:1px solid var(--line-2); border-left:3px solid var(--green);
  border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.6); transform:translate(-50%,calc(-100% - 14px));
}
.wm-tooltip .wm-tt-name{font-weight:700; letter-spacing:1px; font-size:13px; text-transform:uppercase}
.wm-tooltip .wm-tt-row{display:flex; justify-content:space-between; gap:12px; margin-top:4px}
.wm-tooltip .wm-tt-fac{font-size:11px; font-weight:700; letter-spacing:1px}
.wm-tooltip .wm-tt-state{font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase}
.wm-tooltip .wm-tt-hint{margin-top:6px; font-size:11px; color:var(--green); letter-spacing:.5px; font-weight:600}

/* controlli zoom */
.wm-zoomctl{position:absolute; right:12px; bottom:12px; z-index:5; display:flex; flex-direction:column; gap:6px}
.wm-zoomctl button{
  width:36px; height:36px; cursor:pointer; background:rgba(12,17,14,.92); color:var(--text);
  border:1px solid var(--line-2); border-radius:7px; font-size:18px; font-weight:700; line-height:1; transition:.14s;
}
.wm-zoomctl button:hover{border-color:var(--green-dim); color:var(--green); box-shadow:0 0 0 2px var(--green-glow)}
.wm-zoomctl button:active{transform:translateY(1px)}

/* readout zoom */
.wm-readout{
  position:absolute; left:12px; bottom:12px; z-index:5; font-family:var(--mono); font-size:11px;
  color:var(--muted); letter-spacing:1px; background:rgba(10,14,12,.6); border:1px solid var(--line);
  border-left:2px solid var(--green-dim); padding:6px 10px; border-radius:5px;
}
.wm-readout b{color:var(--green); font-weight:700}

/* pannello briefing (slide-in dentro lo stage) */
.wm-panel{
  position:absolute; top:0; right:0; bottom:0; z-index:8; width:320px; max-width:86%;
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border-left:1px solid var(--line-2);
  box-shadow:-16px 0 40px rgba(0,0,0,.5); padding:20px 20px 16px; overflow-y:auto;
  transform:translateX(106%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.wm-panel.open{transform:none}
.wm-panel-close{
  position:absolute; top:10px; right:12px; width:28px; height:28px; background:transparent;
  border:1px solid var(--line-2); border-radius:6px; color:var(--muted); font-size:17px; cursor:pointer; transition:.14s;
}
.wm-panel-close:hover{color:var(--text); border-color:var(--green-dim)}
.wm-panel-eyebrow{color:var(--green); font-size:10px; letter-spacing:3px; font-weight:700}
.wm-panel h3{margin:8px 0 2px; font-size:20px; letter-spacing:1px; text-transform:uppercase; line-height:1.1}
.wm-panel-id{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:2px; margin-bottom:14px}
.wm-panel-fac{display:flex; align-items:center; gap:12px; padding:11px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02)}
.wm-panel-fac-chip{width:24px; height:24px; border-radius:5px; box-shadow:0 0 12px currentColor; flex-shrink:0}
.wm-panel-fac-label{font-size:10px; color:var(--muted); letter-spacing:2px}
.wm-panel-fac-name{font-size:15px; font-weight:800; letter-spacing:1px; text-transform:uppercase}
.wm-panel-state{margin:11px 0; padding:11px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02)}
.wm-panel-state-label{font-size:10px; color:var(--muted); letter-spacing:2px}
.wm-panel-state-val{font-size:15px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-top:3px}
.wm-panel-stats{display:flex; gap:8px; margin:11px 0}
.wm-pstat{flex:1; text-align:center; padding:9px 4px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02)}
.wm-pstat i{display:block; font-style:normal; font-size:9px; color:var(--muted); letter-spacing:1.2px}
.wm-pstat b{display:block; font-family:var(--mono); font-size:15px; color:var(--text); margin-top:4px}
.wm-panel-brief{color:var(--muted); font-size:13px; line-height:1.55; margin:13px 2px 16px}
.wm-panel-action{
  width:100%; padding:14px; cursor:pointer; border:none; border-radius:8px; font-size:15px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase; color:#1c0603; background:var(--f-echo); transition:.14s;
}
.wm-panel-action:hover{filter:brightness(1.1); box-shadow:0 0 0 3px rgba(255,59,59,.3)}
.wm-panel-action:active{transform:translateY(1px)}
.wm-panel-note{text-align:center; color:var(--muted); font-size:11px; margin-top:9px; font-style:italic}

@media (max-width:720px){
  .wm-panel{width:100%; max-width:100%}
  .wm-you{width:100%; margin-left:0; order:5}
}