/* =====================================================================
   RO WOE Planner — woe.css
   Palette reprise de war-table.css : mêmes variables, mêmes noms, pour
   qu'une évolution de la charte du tracker se propage ici sans effort.
   ===================================================================== */
:root{
  --bg:#0f1116; --bg2:#161a21;
  --border:#232830; --border2:#2b313b;
  --text:#e8e3d8; --text2:#8a929d; --text3:#6c7683; --text-dim:#4d545e;
  --card-footer-border:#1c2028;
  --header-bg:linear-gradient(180deg,#1a1f27,#0f1116);
  --modal-bg:linear-gradient(145deg,#1a1f27,#0f1116);
  --modal-input-bg:#12151b;
  --hint-color:#3a4049; --scrollbar:#2b313b;
  --badge-bg:#1d1a10; --badge-border:#6d5c22; --badge-color:#c9a227;
  --fbtn-border:#2b313b; --fbtn-color:#6c7683;
  --fbtn-active-bg:#c9a227; --fbtn-active-border:#c9a227; --fbtn-active-color:#1a1408;
  --map-bg:#12151b; --map-border:#2b313b;
  --coords-bg:#12151b; --coords-color:#c9a227;
  --accent:#c9a227;
  --wt-signal:#c9a227;
  --danger:#ff4d4d; --danger-bg:#2a1113; --danger-line:#770000;
  --ok:#44cc88;
}
body.game-ro  { --wt-signal:#a06bff; }
body.game-roz { --wt-signal:#1fb6d4; }

:root[data-theme="light"]{
  --bg:#f2f0ea; --bg2:#ffffff;
  --border:#e4e1d9; --border2:#d6d2c8;
  --text:#1f2228; --text2:#4d545e; --text3:#6b7280; --text-dim:#8a9099;
  --card-footer-border:#e8e5dd;
  --header-bg:linear-gradient(180deg,#fbf9f4,#f2f0ea);
  --modal-bg:linear-gradient(145deg,#fff,#f7f5ef);
  --modal-input-bg:#fff;
  --hint-color:#b8b4aa; --scrollbar:#c9c5ba;
  --badge-bg:#fbf4dc; --badge-border:#c9b578; --badge-color:#8a6d10;
  --fbtn-border:#d6d2c8; --fbtn-color:#6b7280;
  --fbtn-active-bg:#c9a227; --fbtn-active-border:#8a6d10; --fbtn-active-color:#1a1408;
  --map-bg:#f7f5ef; --map-border:#d6d2c8;
  --coords-bg:#fff; --coords-color:#8a6d10;
  --accent:#8a6d10;
  --danger:#c22; --danger-bg:#fbeaea; --danger-line:#c22;
  --ok:#1c8f5a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}
.signal-rule{height:2px;background:var(--wt-signal)}
.app{max-width:1500px;margin:0 auto;padding:12px}
.muted{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.lead{font-size:13px;color:var(--text2);margin:0 0 10px;max-width:62ch}
.err{font-size:12px;color:var(--danger);min-height:18px;margin:8px 0 0}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;background:var(--header-bg);
  border:1px solid var(--border);border-radius:6px;
}
#title{font-size:17px;font-weight:700;
  text-shadow:0 0 14px color-mix(in srgb, var(--wt-signal) 55%, transparent);}
#title span{color:var(--accent)}
.badge{background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--badge-color);
  border-radius:4px;padding:3px 9px;font-size:11px;font-weight:600;letter-spacing:.06em}
select,input,textarea{
  font:inherit;font-size:13px;background:var(--modal-input-bg);color:var(--text);
  border:1px solid var(--border2);border-radius:4px;padding:6px 8px;
}
textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.wt-btn{border:1px solid var(--fbtn-border);color:var(--fbtn-color);border-radius:4px;
  padding:5px 10px;font-size:12px;font-weight:600}
.wt-btn:hover{color:var(--text);border-color:var(--border2)}
.wt-btn--on{background:color-mix(in srgb, var(--accent) 14%, transparent);
  border-color:var(--accent);color:var(--accent);font-weight:700}
.wt-btn--fill{background:var(--fbtn-active-bg);border-color:var(--fbtn-active-border);
  color:var(--fbtn-active-color)}
.wt-btn[disabled]{opacity:.4;cursor:not-allowed}
.phases,.tools,.topactions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.clock{margin-left:auto;text-align:right}
.clock .t{font-size:25px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.clock .l{font-size:11px;color:var(--text3);letter-spacing:.04em}

/* ---------- panneaux ---------- */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.panel.pad{padding:0 14px 14px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-bottom:1px solid var(--card-footer-border)}
.panel.pad .phead{margin:0 -14px 12px;padding-left:14px;padding-right:14px}
.phead h2{font-size:11px;font-weight:700;margin:0;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3)}
.pbody{padding:7px}
.formrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.formrow.tight input{width:120px}
.formrow input[type=number]{width:64px}
.gate{max-width:620px;margin:12px auto 0;display:grid;gap:10px}

/* ---------- board ---------- */
.board{display:grid;grid-template-columns:236px minmax(0,1fr) 262px;gap:10px;margin-top:10px}
.group{border-radius:4px;margin-bottom:3px;border:1px solid transparent}
.group:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}
.group.sel{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent)}
.grow{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;text-align:left}
.dot{width:14px;height:14px;border-radius:2px;flex:none}
.gname{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teams{display:flex;flex-wrap:wrap;gap:3px;padding:0 8px 7px 30px}
.pip{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;min-width:21px;
  padding:1px 4px;text-align:center;border-radius:2px;background:var(--modal-input-bg);
  border:1px solid var(--border);color:var(--text-dim)}
.pip.contact{background:var(--danger);border-color:var(--danger);color:#fff}
.pip.clear{border-color:var(--ok);color:var(--ok)}
.pip.mine{outline:1px solid var(--accent)}
.hint{font-size:11px;color:var(--hint-color);padding:5px 10px 8px;margin:0}

/* ---------- carte ---------- */
.mapwrap{background:var(--map-bg);display:grid;place-items:center;padding:10px;min-height:120px}
.stage{position:relative;line-height:0;touch-action:none;border:1px solid var(--map-border)}
.stage img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
.stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.noplate{color:var(--text-dim);font-size:12px;padding:28px 20px;line-height:1.4;text-align:center}
.marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;
  padding:2px 7px 2px 4px;border-radius:3px;background:rgba(15,17,22,.88);
  border:1px solid currentColor;cursor:grab;line-height:1.15;white-space:nowrap}
.marker:active{cursor:grabbing}
.marker .mn{font-size:11px;font-weight:600;color:var(--text)}
.marker .mi{width:12px;height:12px;border-radius:2px;background:currentColor;flex:none}
.marker.note{border-style:dashed}
.marker.contact{border-color:var(--danger);color:var(--danger);
  animation:pulse 1s steps(2,end) infinite}
.marker.mine{box-shadow:0 0 0 1px var(--accent)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,77,.85)}50%{box-shadow:0 0 0 7px rgba(255,77,77,0)}}
@media (prefers-reduced-motion:reduce){.marker.contact{animation:none;background:rgba(255,77,77,.28)}}
.readout{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 11px;
  background:var(--coords-bg);border-top:1px solid var(--card-footer-border);
  font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}
.readout b{color:var(--coords-color);font-weight:700}
.credit{font-size:10px;color:var(--hint-color);padding:6px 11px 8px;margin:0}

/* ---------- contact ---------- */
.statrow{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:3px;margin-bottom:2px}
.statrow.contact{background:var(--danger-bg);box-shadow:inset 2px 0 0 var(--danger-line)}
.statrow .n{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.statrow.contact .n{color:var(--text)}
.statrow .v{font-size:11px;font-weight:600;color:var(--text-dim);font-variant-numeric:tabular-nums}
.statrow.contact .v{color:var(--danger)}
.statrow.ok .v{color:var(--ok)}
.log{max-height:168px;overflow:auto;padding:2px 4px}
.log::-webkit-scrollbar{width:8px}
.log::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
.logline{display:flex;gap:8px;font-size:11px;padding:3px 5px;color:var(--text2);
  border-bottom:1px solid var(--card-footer-border)}
.logline time{color:var(--text-dim);flex:none;font-variant-numeric:tabular-nums}
.logline .c{color:var(--danger)}
.logline .s{color:var(--ok)}

/* ---------- timeline ---------- */
.timeline{margin-top:10px}
.track{position:relative;height:58px;margin:8px 12px 4px}
.rail{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--border2)}
.mile{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:110px}
.mile .b{width:7px;height:7px;border-radius:1px;background:var(--bg2);
  border:1px solid var(--text-dim);margin:22px auto 0}
.mile .x{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.mile .y{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.2}
.playhead{position:absolute;top:14px;bottom:6px;width:2px;background:var(--accent)}

/* ---------- vue membre ---------- */
.watch{max-width:820px;margin:10px auto 0;display:grid;gap:10px}
.order{padding:16px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:6px}
.order .who{font-size:12px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.order .what{font-size:32px;font-weight:700;line-height:1.12;margin:4px 0 6px}
.order .where{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}
.order.contact{border-color:var(--danger-line);background:var(--danger-bg)}
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{font-size:19px;font-weight:700;padding:24px 10px;border-radius:6px;
  border:2px solid var(--border2);background:var(--bg2);color:var(--text2)}
.big.attack{border-color:var(--danger-line);color:var(--danger)}
.big.attack.on{background:var(--danger);border-color:var(--danger);color:#fff}
.big.safe{border-color:var(--ok);color:var(--ok)}
.big.safe.on{background:var(--ok);border-color:var(--ok);color:#0c1a13}
.big[disabled]{opacity:.4}
.decay{text-align:center;font-size:12px;color:var(--text-dim);min-height:18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--border2);border-radius:12px;padding:3px 10px;font-size:12px;color:var(--text2)}

/* ---------- modale ---------- */
.modal{position:fixed;inset:0;background:rgba(5,7,10,.72);display:grid;place-items:center;padding:16px;z-index:50}
.modalbox{background:var(--modal-bg);border:1px solid var(--border2);border-radius:6px;
  padding:0 16px 16px;max-width:560px;width:100%}
.modalbox .phead{margin:0 -16px 12px;padding-left:16px;padding-right:16px}

@media (max-width:1100px){ .board{grid-template-columns:1fr} .clock{margin-left:0} }
/* Sur un téléphone en pleine WOE, seuls l'ordre et les deux boutons comptent. */
@media (max-width:720px){ .timeline{display:none} .watchmap{display:none} }

/* ---------- ajouts : etat temps reel, edition, apercu ---------- */

/* Le rouge reste reserve au contact : un tableau perime s'annonce en
   doré, pas en rouge, sinon les deux alertes se confondent. */
.conn{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:10px;border:1px solid var(--border2);color:var(--text-dim)}
.conn.live{border-color:var(--ok);color:var(--ok)}
.conn.stale{border-color:var(--accent);color:var(--accent);
  animation:blink 1.4s steps(2,end) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.conn.stale{animation:none}}

.grpedit{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 8px 8px 8px}
.grpedit input[type=text]{width:104px}
.grpedit input[type=color]{width:32px;padding:2px;height:28px}
.grpedit input[type=number]{width:52px}
.gedit{font-size:11px;color:var(--text-dim);padding:2px 5px;border-radius:3px}
.gedit:hover{color:var(--text)}

.marker.erasable{cursor:crosshair;border-style:dotted}
.stage svg.erasing{pointer-events:auto}
.stage svg.erasing line{stroke-width:9;cursor:crosshair}

.mile.past .b{background:var(--accent);border-color:var(--accent)}
.mile.past .y{color:var(--text-dim)}
.mile .del{font-size:10px;color:var(--text-dim);margin-top:2px}
.mile .del:hover{color:var(--danger)}

.crow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;
  border:1px solid var(--border);margin-bottom:6px;background:var(--bg2)}
.crow.contact{border-color:var(--danger-line);background:var(--danger-bg)}
.crow .cname{flex:1;font-size:13px;font-weight:600}
.crow .cmeta{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------- barre de guilde ---------- */
.guildbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 12px;margin-top:8px;background:var(--bg2);
  border:1px solid var(--border);border-radius:6px;font-size:12px;
}
.gb-who{font-weight:600;color:var(--text)}
.gb-k{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.gb-v{color:var(--text2)}
.gb-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--modal-input-bg);border:1px solid var(--border2);border-radius:3px;
  padding:2px 7px;color:var(--text2);max-width:280px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gb-sep{width:1px;height:16px;background:var(--border2)}
.gb-online{color:var(--ok);font-weight:600;font-variant-numeric:tabular-nums}
.gb-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.gb-support{border-color:var(--badge-border);color:var(--badge-color);
  text-decoration:none;letter-spacing:.05em;cursor:pointer}
.gb-support:hover{background:var(--fbtn-active-bg);color:var(--fbtn-active-color);
  border-color:var(--fbtn-active-border)}
.gb-err{margin:6px 2px 0}
@media (max-width:720px){ .gb-code{max-width:120px} .gb-right{margin-left:0;width:100%} }

/* ---------- zones ---------- */
.zone-draft{stroke-dasharray:3 3}

/* ---------- telephone ----------
   Le tableau leader empilait trois colonnes : la carte finissait sous une
   liste de quarante pastilles, donc invisible. Sur petit ecran la carte
   passe en premier, les groupes deviennent compacts, le journal est
   plafonne, et les cibles tactiles grossissent. */
@media (max-width:820px){
  .app{padding:8px}
  .board{display:flex;flex-direction:column;gap:8px}
  .mapPanel{order:-1}
  .topbar{gap:8px;padding:8px 10px}
  #title{font-size:15px}
  .clock .t{font-size:20px}
  .phase-note{display:none}
  .teams{padding-left:8px}
  .pip{min-width:26px;padding:3px 5px;font-size:11px}
  .wt-btn{padding:7px 11px}
  .log{max-height:120px}
  .readout{gap:8px}
  .credit{display:none}
  .guildbar{font-size:11px;gap:7px}
  .grpedit input[type=text]{width:88px}
}

/* ---------- segmenté Attack / Defense ---------- */
.seg{display:inline-flex;border:1px solid var(--fbtn-border);border-radius:4px;overflow:hidden}
.seg-btn{
  font-size:12px;font-weight:600;padding:6px 15px;
  color:var(--fbtn-color);background:transparent;transition:background .12s,color .12s;
}
.seg-btn + .seg-btn{border-left:1px solid var(--fbtn-border)}
.seg-btn:hover{color:var(--text);background:color-mix(in srgb, var(--text) 6%, transparent)}
/* L'etat selectionne est plein et opaque, le reste transparent : la
   difference doit se lire sans comparer les deux. */
.seg-btn.on{
  background:var(--fbtn-active-bg);color:var(--fbtn-active-color);
  font-weight:700;box-shadow:inset 0 0 0 1px var(--fbtn-active-border);
}
.seg-btn.on:hover{background:var(--fbtn-active-bg);color:var(--fbtn-active-color)}

/* ---------- planche absente ----------
   Un carré blanc plutôt qu'un message : on peut déjà y poser des ordres,
   et la planche viendra se glisser dessous plus tard. */
.blankplate{width:340px;height:340px;max-width:100%;background:#fff;
  display:grid;place-items:center}
.blankplate span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b9b9b9}

/* ---------- vue globale ---------- */
.cityfilter{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.cityname{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin:14px 0 7px}
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px}
.ctile{border:1px solid var(--border);border-radius:5px;background:var(--bg2);
  padding:6px;text-align:left;display:flex;flex-direction:column;gap:5px}
.ctile:hover{border-color:var(--text-dim)}
.ctile .thumb{width:100%;aspect-ratio:1;background:#fff;border-radius:3px;overflow:hidden;
  display:grid;place-items:center}
.ctile .thumb img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.ctile .cn{font-size:12px;font-weight:600;color:var(--text);line-height:1.2}
.ctile .cs{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.ctile.live{border-color:var(--accent)}
.ctile.live .cs{color:var(--accent)}
/* Même code couleur que la pastille au contact : le rouge ne dit qu'une chose. */
.ctile.contact{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger) inset;
  animation:pulse 1s steps(2,end) infinite}
.ctile.contact .cs{color:var(--danger);font-weight:700}
@media (prefers-reduced-motion:reduce){.ctile.contact{animation:none;background:var(--danger-bg)}}
@media (max-width:820px){ .ctiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} }

/* ---------- administration des châteaux ---------- */
.castleadmin{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:5px;padding:6px}
.castleadmin .cacity{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);margin:8px 0 4px}
.castleadmin label{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:3px;
  font-size:12px;color:var(--text2);cursor:pointer}
.castleadmin label:hover{background:color-mix(in srgb, var(--text) 5%, transparent)}
.castleadmin input{width:14px;height:14px;accent-color:var(--accent);margin:0}
.castleadmin .ca-map{color:var(--text-dim);font-size:10px;margin-left:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.castleadmin label.off{color:var(--text-dim)}
.castleadmin label.locked{opacity:.55;cursor:not-allowed}

/* Les jalons dans le journal : doré comme la tête de lecture de la frise.
   Ils parlent du temps, pas d'un contact — le rouge reste inutilisable ici. */
.logline .m{color:var(--accent);font-weight:600}

/* Le bloc d'accueil s'adresse à quelqu'un qui découvre l'outil : il porte
   le liseré de version plutôt que la bordure neutre des panneaux. */
.intro{border-left:3px solid var(--wt-signal)}
.gate .hint{padding:6px 0 0}