/* ══ ESTATE RAIDS · YOUR ESTATE (estate.js) ══════════════════════════════════════════════
   The furniture over the estate's canvas: its bar, a tip line, the two big buttons and the
   sheet for building. Hidden unless .on; tokens are the page's :root. */
.es{ display:none; }
.es.on{ display:flex; }
#es-sheet.on{ display:block; }
.es .btn, #es-sheet .btn{ white-space:nowrap; height:48px; padding:0 22px; border-radius:999px; border:3px solid var(--ink); background:var(--ink); color:var(--white); font-size:17px; cursor:pointer; }
.es .btn.gold, #es-sheet .btn.gold{ background:var(--gold); color:var(--ink); }
.es .btn.ghost, #es-sheet .btn.ghost{ background:var(--white); color:var(--ink); }
#es-sheet .btn:disabled{ opacity:.45; cursor:not-allowed; }
.es .chip{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px; background:var(--white); padding:5px 12px; font:700 12.5px Inter,sans-serif; }

#es-hud{ position:fixed; z-index:5; top:calc(64px + var(--sat)); left:12px; right:12px; gap:8px; align-items:center; flex-wrap:wrap; pointer-events:none; }
#es-hud > *{ pointer-events:auto; }
#es-hud .name{ background:var(--white); border:3px solid var(--ink); border-radius:18px; padding:6px 14px 8px; box-shadow:4px 4px 0 var(--ink); }
#es-hud .name b{ display:block; font-size:21px; line-height:1; } #es-hud .name small{ font:700 10px Inter,sans-serif; letter-spacing:.14em; color:var(--ink2); }
#es-hud .sp{ flex:1; }
#es-builder i{ width:90px; height:8px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--white); display:block; }
#es-builder i u{ display:block; height:100%; background:var(--gold); width:0; }
#es-tip{ position:fixed; z-index:6; left:50%; top:calc(134px + var(--sat)); transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:999px; padding:7px 16px;
  font:700 13px Inter,sans-serif; white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
#es-tip:empty{ display:none; }
#es-foot{ position:fixed; z-index:5; left:0; right:0; bottom:calc(14px + var(--sab)); justify-content:center; gap:10px; pointer-events:none; }
#es-foot > *{ pointer-events:auto; }

#es-sheet{ position:fixed; z-index:8; left:50%; bottom:calc(10px + var(--sab)); transform:translateX(-50%); width:min(580px,96vw); max-height:72dvh; overflow:auto; background:var(--white);
  border:3px solid var(--ink); border-radius:24px; box-shadow:10px 10px 0 var(--ink); padding:18px 18px 16px; }
#es-sheet h2{ margin:0 0 2px; font-size:30px; line-height:.95; padding-right:40px; } #es-sheet .sub{ margin:0 0 12px; color:var(--ink2); font-size:13.5px; }
#es-sheet .x{ position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); background:#fff; font:900 15px Archivo,sans-serif; cursor:pointer; }
#es-sheet .menu{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
#es-sheet .opt{ border:2px solid var(--ink); border-radius:16px; padding:8px; background:var(--paper); text-align:left; display:grid; grid-template-columns:54px 1fr; gap:8px; align-items:center; cursor:pointer; font:inherit; color:inherit; }
#es-sheet .opt img{ width:54px; height:54px; object-fit:contain; }
#es-sheet .opt b{ display:block; font:900 14px Archivo,sans-serif; font-stretch:112%; text-transform:uppercase; }
#es-sheet .opt small{ display:block; color:var(--ink2); font-size:11.5px; line-height:1.3; }
#es-sheet .opt.off{ opacity:.5; cursor:not-allowed; } #es-sheet .opt.off .why{ color:var(--red); }
#es-sheet .opt:not(.off):hover{ background:#fbf3e3; }
#es-sheet .rowb{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
#es-sheet .kv{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 4px; }
#es-sheet .kv div{ border:2px solid var(--ink); border-radius:14px; padding:8px 12px; background:var(--paper); }
#es-sheet .kv small{ display:block; font:700 10px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
#es-sheet .kv b{ font:900 20px Archivo,sans-serif; }
#es-sheet .note{ font-size:12.5px; color:var(--ink2); margin:10px 0 0; }
@media (max-width:520px){ #es-hud .chip{ font-size:11.5px; padding:4px 9px; } #es-builder i{ width:54px; } #es-foot .btn{ height:46px; font-size:15px; padding:0 16px; } }

/* the defence log (stage 3) */
#es-hud button.chip{ cursor:pointer; font:700 12.5px Inter,sans-serif; color:var(--ink); }
#es-log em{ font-style:normal; display:none; min-width:18px; height:18px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; line-height:18px; text-align:center; padding:0 5px; }
#es-log.new{ border-color:var(--red); } #es-log.new em{ display:inline-block; }
#es-sheet .log{ display:grid; gap:8px; }
#es-sheet .log .row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:2px solid var(--ink); border-radius:16px; padding:8px 10px; background:var(--paper); }
#es-sheet .log .row.new{ box-shadow:4px 4px 0 var(--red); }
#es-sheet .log .band{ display:flex; } #es-sheet .log .band img{ width:38px; height:38px; border-radius:50%; border:2px solid var(--ink); background:#fff; object-fit:cover; margin-left:-10px; } #es-sheet .log .band img:first-child{ margin-left:0; }
#es-sheet .log b{ display:block; font:900 15px Archivo,sans-serif; } #es-sheet .log small{ display:block; font-size:12px; color:var(--ink2); }
#es-sheet .log small.held{ color:var(--green, #4f7a53); font-weight:700; } #es-sheet .log small.fell{ color:var(--red); font-weight:700; }
#es-sheet .log .btn{ height:40px; padding:0 16px; font-size:15px; }
@media (max-width:520px){ #es-sheet .log .band img{ width:30px; height:30px; } #es-sheet .log .btn{ padding:0 12px; } }
/* a replay's bar over the fight (game.js replayBar) */
.replaybar{ position:fixed; z-index:7; left:50%; bottom:calc(18px + var(--sab));   /* where the tap meter sits in a live raid; the prompt line keeps the top */ transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff;
  border-radius:999px; padding:5px 6px 5px 16px; font:700 13px Inter,sans-serif; white-space:nowrap; box-shadow:4px 4px 0 var(--red); }
.replaybar b{ font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.replaybar .pill{ height:30px; padding:0 14px; border-radius:999px; border:2px solid #fff; background:#fff; color:var(--ink); font:800 13px Inter,sans-serif; cursor:pointer; }
/* the register of an estate, in the game's sheet (game.js showRegister) */
#card p.hold{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin:6px 0 10px; }
#card p.hold .pill{ height:30px; padding:0 14px; }
#card .reglots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:6px; margin-top:6px; }
#card .reglots .lot{ position:relative; border:2px solid var(--ink); border-radius:12px; overflow:hidden; background:var(--paper); aspect-ratio:1; }
#card .reglots .lot img{ width:100%; height:100%; object-fit:cover; display:block; }
#card .reglots .lot span{ position:absolute; left:3px; bottom:3px; background:var(--ink); color:#fff; font:800 9.5px Inter,sans-serif; border-radius:6px; padding:1px 5px; }
#card .reglots .lot.fights{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset; }
#card .reglots .lot.fights::after{ content:'FIGHTS'; position:absolute; right:3px; top:3px; background:var(--gold); color:var(--ink); font:900 8.5px Inter,sans-serif; border-radius:6px; padding:1px 4px; }
#card .regnav{ display:flex; gap:8px; margin-top:8px; } #card .regnav .pill{ flex:1; }

/* ── PHONES (25 Sep): the estate's bar is one row that swipes sideways, not four stacked rows ── */
@media (max-width:600px){
  #es-hud{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; gap:6px; left:0; right:0; padding:0 12px 6px; pointer-events:auto; }
  #es-hud::-webkit-scrollbar{ display:none; }
  #es-hud > *{ flex:0 0 auto; }
  #es-hud .sp{ display:none; }
  #es-hud .name{ padding:4px 11px 5px; border-radius:14px; box-shadow:3px 3px 0 var(--ink); }
  #es-hud .name b{ font-size:16px; } #es-hud .name small{ font-size:8.5px; letter-spacing:.1em; }
  #es-tip{ top:calc(116px + var(--sat)); font-size:12px; white-space:normal; text-align:center; width:max-content; max-width:calc(100vw - 32px); border-radius:16px; }
  #es-sheet{ left:0; right:0; bottom:0; transform:none; width:100%; max-height:calc(100dvh - 70px - var(--sat)); border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(28,23,18,.3); padding-bottom:calc(16px + var(--sab)); }
  .replaybar{ max-width:calc(100vw - 24px); }
}

/* ══ 26 SEP: THE BAR AT THE FOOT, VISITING, GETTING STARTED ══════════════════════════════════
   The game's own bar (#nav) sits at the bottom of every tab now, so the estate's sheet and panels
   stand just above it. */
#es-sheet{ bottom:calc(84px + var(--sab)); max-height:calc(100dvh - 170px - var(--sat)); }
#es-foot{ display:none !important; }
/* a visit's panel: who is on guard, what the ground does, your party, Raid */
#es-visit.on{ display:block; }
#es-visit{ position:fixed; z-index:6; left:50%; bottom:calc(82px + var(--sab)); transform:translateX(-50%); width:min(640px,96vw); }
#es-visit .card, #es-guide .card{ background:var(--white); border:3px solid var(--ink); border-radius:22px; box-shadow:8px 8px 0 var(--ink); padding:14px 16px; }
#es-visit .top, #es-guide .top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#es-visit .top b, #es-guide .top b{ font-size:20px; margin-right:auto; }
#es-visit .chip.warn{ border-color:var(--red); color:var(--red); }
#es-visit .guards{ display:flex; gap:8px; margin:10px 0 6px; overflow-x:auto; scrollbar-width:none; }
#es-visit .guards .g{ flex:0 0 auto; display:grid; grid-template-columns:40px auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; border:2px solid var(--ink); border-radius:14px; padding:5px 10px 5px 5px; background:var(--paper); }
#es-visit .guards img{ grid-row:1 / 3; width:40px; height:40px; border-radius:10px; object-fit:cover; background:#fff; }
#es-visit .guards b{ font:900 14px Archivo,sans-serif; color:var(--red); } #es-visit .guards small{ font:700 11px Inter,sans-serif; color:var(--ink2); }
#es-visit .sub{ margin:6px 0 8px; color:var(--ink2); font-size:13px; }
#es-visit .party{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#es-visit .party small{ font:800 10px Inter,sans-serif; letter-spacing:.12em; color:var(--ink2); margin-right:4px; }
#es-visit .party img{ width:34px; height:34px; border-radius:50%; border:2px solid var(--ink); object-fit:cover; background:#fff; }
#es-visit .party em{ font-style:normal; color:var(--ink2); font-size:13px; }
#es-visit .link, #es-guide .link{ background:none; border:0; padding:0 4px; font:700 13px Inter,sans-serif; text-decoration:underline; cursor:pointer; color:var(--ink); }
#es-visit .rowb{ display:flex; gap:8px; margin-top:10px; }
#es-visit .btn{ white-space:nowrap; height:50px; padding:0 22px; border-radius:999px; border:3px solid var(--ink); background:var(--ink); color:var(--white); font-size:17px; cursor:pointer; }
#es-visit .btn.gold{ background:var(--gold); color:var(--ink); } #es-visit .btn.ghost{ background:var(--white); color:var(--ink); }
#es-visit .btn.big{ flex:1; font-size:22px; box-shadow:4px 4px 0 var(--ink); } #es-visit .btn:disabled{ opacity:.5; cursor:not-allowed; }
/* getting started: a small card on your estate until the first session's steps are done */
#es-guide.on{ display:block; }
#es-guide{ position:fixed; z-index:5; left:12px; bottom:calc(84px + var(--sab)); width:min(300px,calc(100vw - 24px)); }
#es-guide .card{ padding:12px 14px; box-shadow:6px 6px 0 var(--gold); }
#es-guide .top b{ font-size:16px; }
#es-guide ol{ list-style:none; margin:8px 0 10px; padding:0; display:grid; gap:5px; }
#es-guide li{ display:grid; grid-template-columns:20px 1fr; gap:8px; align-items:center; font:600 13px Inter,sans-serif; color:var(--ink2); }
#es-guide li i{ width:18px; height:18px; border:2px solid var(--ink); border-radius:6px; display:grid; place-items:center; font:900 12px Archivo; font-style:normal; background:#fff; }
#es-guide li.done{ text-decoration:line-through; } #es-guide li.done i{ background:var(--gold); }
#es-guide li.next{ color:var(--ink); font-weight:800; }
#es-guide .btn{ width:100%; height:42px; font-size:15px; border-radius:999px; border:3px solid var(--ink); background:var(--gold); color:var(--ink); cursor:pointer; }
@media (max-width:600px){
  #es-visit{ left:0; right:0; transform:none; width:auto; bottom:calc(76px + var(--sab)); }
  #es-visit .card{ border-radius:22px 22px 0 0; box-shadow:0 -10px 30px rgba(28,23,18,.25); padding:12px; }
  #es-visit .btn{ height:46px; padding:0 14px; font-size:15px; } #es-visit .btn.big{ font-size:19px; }
  #es-guide{ bottom:calc(80px + var(--sab)); width:auto; right:12px; }
  #es-guide ol{ display:none; }                                  /* on a phone: the next step and its button only */
  #es-sheet{ bottom:0; max-height:calc(100dvh - 70px - var(--sat)); z-index:40; }
}
#es-visit .coach{ margin:0 0 10px; background:var(--ink); color:#fff; border-radius:14px; padding:8px 12px; font:600 13px/1.4 Inter,sans-serif; box-shadow:3px 3px 0 var(--gold); }
/* a wide screen: the visit's panel stands at the right, their ground keeps the height */
@media (min-width:900px){
  #es-visit{ left:auto; right:20px; top:calc(124px + var(--sat)); bottom:auto; transform:none; width:380px; max-height:calc(100dvh - 230px); overflow:auto; }
  #es-visit .guards{ flex-wrap:wrap; }
  #es-visit .rowb{ flex-direction:column; } #es-visit .btn.big{ height:56px; }
}
/* a phone: the visit's panel as small as it can be, so their ground keeps room (26 Sep) */
@media (max-width:600px){
  #es-visit .card{ padding:10px 12px 12px; }
  #es-visit .coach{ font-size:12px; padding:6px 10px; margin-bottom:8px; }
  #es-visit .top b{ font-size:16px; } #es-visit .top .chip{ font-size:10.5px; padding:3px 8px; }
  #es-visit .guards{ margin:6px 0 4px; gap:6px; } #es-visit .guards .g{ grid-template-columns:30px auto; padding:3px 8px 3px 3px; } #es-visit .guards img{ width:30px; height:30px; }
  #es-visit .guards b{ font-size:12.5px; } #es-visit .guards small{ font-size:10px; }
  #es-visit .sub{ display:none; }
  #es-visit .party small{ display:none; } #es-visit .party img{ width:28px; height:28px; }
  #es-visit .rowb{ margin-top:8px; } #es-visit .btn{ height:44px; } #es-visit .btn.big{ font-size:18px; }
}

/* ── THE TIDE (25 Sep): the chip, the tap ring, the banner as it comes in, the result ── */
#es-hud .chip.tide{ pointer-events:auto; cursor:pointer; background:#dfe8e2; }
#es-hud .chip.tide.live{ background:var(--gold); animation:tidepulse 1s ease-in-out infinite; }
#es-hud .chip.fix{ pointer-events:auto; cursor:pointer; background:#f6d9cf; border-color:#c8371f; color:#7a1f10; }
@keyframes tidepulse{ 50%{ transform:scale(1.06); box-shadow:0 0 0 4px rgba(247,147,30,.35); } }
#tide-ring{ position:fixed; z-index:30; left:50%; bottom:calc(96px + var(--sab)); width:92px; height:92px; margin-left:-46px; display:none; pointer-events:none; }
#tide-ring.on{ display:block; }
#tide-ring::before{ content:''; position:absolute; inset:0; border-radius:50%; border:4px solid var(--ink); background:rgba(255,255,255,.85); }
#tide-ring i{ position:absolute; inset:0; border-radius:50%; border:4px solid var(--gold); transform-origin:center; }
#tide-ring b{ position:absolute; inset:0; display:grid; place-items:center; font:900 17px Archivo,sans-serif; letter-spacing:.08em; }
#tide-ring[data-g="perfect"]::before{ background:var(--gold); } #tide-ring[data-g="good"]::before{ background:#ffe3bd; }
#tide-bar{ position:fixed; z-index:30; left:50%; top:calc(120px + var(--sat)); transform:translate(-50%,-12px); opacity:0; transition:opacity .35s, transform .35s; pointer-events:none;
  background:var(--ink); color:#fff; border-radius:18px; padding:12px 20px; text-align:center; width:min(560px,92vw); box-shadow:6px 6px 0 rgba(0,0,0,.25); }
#tide-bar.on{ opacity:1; transform:translate(-50%,0); }
#tide-bar b{ display:block; font-size:26px; line-height:1; color:var(--gold); } #tide-bar span{ display:block; font:700 13px Inter,sans-serif; margin-top:4px; } #tide-bar small{ display:block; font:600 12px Inter,sans-serif; opacity:.8; margin-top:4px; }
#tide-card{ position:fixed; z-index:45; inset:0; display:none; place-items:center; background:rgba(28,23,18,.35); }
#tide-card.on{ display:grid; }
#tide-card .card{ width:min(440px,92vw); background:var(--white); border:3px solid var(--ink); border-radius:24px; box-shadow:10px 10px 0 var(--ink); padding:22px 20px 18px; text-align:center; }
#tide-card .stamp{ font-size:44px; line-height:1; margin-bottom:10px; } #tide-card .stamp.held{ color:#2f6b3c; } #tide-card .stamp.fell{ color:#c8371f; }
#tide-card .sub{ margin:0 0 10px; color:var(--ink2); font-size:14px; } #tide-card .btn{ margin-top:6px; }
#es-sheet .log .row.tide .band img{ background:#dfe8e2; object-fit:contain; }
@media (max-width:600px){ #tide-ring{ bottom:calc(84px + var(--sab)); } #tide-bar b{ font-size:21px; } #tide-card .stamp{ font-size:36px; } }
#tide-bar{ flex-direction:column; }
/* 26 Sep (owner: "better as a side menu?"): on a wide screen your estate's sheets stand at the side, so the ground you
   are building on stays in view; the estate slides left to make room (estate.js fit). Phones keep the bottom sheet. */
@media (min-width:900px){
  #es-sheet.side{ left:auto; right:28px; transform:none; top:calc(118px + var(--sat)); bottom:calc(96px + var(--sab)); width:390px; max-height:none; animation:sidein .22s ease-out; }
  #es-sheet.side .menu{ grid-template-columns:1fr; }
  #es-sheet.side .opt{ grid-template-columns:64px 1fr; padding:10px; } #es-sheet.side .opt img{ width:64px; height:64px; }
  @keyframes sidein{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ── the estate buildout (26 Sep): the build menu's groups, a mine's cart, the workshop, the keep's unlocks and colours ── */
#es-sheet h3.role{ font:900 13px Archivo,sans-serif; font-stretch:112%; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); margin:14px 0 6px; }
#es-sheet h3.role:first-of-type{ margin-top:4px; }
.es .chip.gold{ background:var(--gold); cursor:pointer; font-weight:800; }
#es-hud .chip.gold:hover{ filter:brightness(1.05); }
#es-sheet .research{ margin-top:6px; }
#es-sheet .rs{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:2px solid var(--ink); border-radius:14px; padding:8px 10px; background:var(--paper); margin-bottom:6px; }
#es-sheet .rs b{ display:block; font:900 13.5px Archivo,sans-serif; font-stretch:112%; text-transform:uppercase; }
#es-sheet .rs small{ display:block; color:var(--ink2); font-size:11.5px; line-height:1.3; }
#es-sheet .rs.off{ opacity:.72; }
#es-sheet .rs .btn{ height:36px; padding:0 14px; font-size:13px; }
#es-sheet .unlocks ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
#es-sheet .unlocks li{ font-size:12.5px; line-height:1.35; color:var(--ink2); padding:6px 10px; border-radius:10px; background:var(--paper); }
#es-sheet .unlocks li b{ color:var(--ink); font-weight:800; margin-right:4px; }
#es-sheet .unlocks li.done{ opacity:.55; } #es-sheet .unlocks li.next{ outline:2px solid var(--gold); }
#es-sheet .hues .sw{ display:flex; flex-wrap:wrap; gap:8px; }
#es-sheet .swatch{ width:30px; height:30px; border-radius:50%; border:2px solid var(--ink); cursor:pointer; padding:0; }
#es-sheet .swatch.on{ box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
#es-visit .salute{ display:flex; align-items:center; gap:10px; font:700 12.5px Inter,sans-serif; margin:2px 0 8px; }

/* the Descent chest's sheet (26 Sep) */
#es-sheet .chest{ border:2px solid var(--ink); border-radius:16px; padding:10px 12px; margin-top:10px; background:var(--paper); }
#es-sheet .chest.no-vault, #es-sheet .chest.no-piece, #es-sheet .chest.no-wallet{ border-style:dashed; background:transparent; }
#es-sheet .chest .line{ font-weight:800; margin:8px 0 2px; }
#es-sheet .chest.ready .line, #es-sheet .chest.paid .line{ color:#b8620a; }

/* the siege test (26 Sep) */
#es-sheet .line{ font:800 15px/1.35 Inter,sans-serif; margin:4px 0 10px; }
#es-sheet .sg{ display:grid; gap:8px; }
#es-sheet .sg-row{ display:grid; grid-template-columns:86px 1fr 92px; align-items:center; gap:10px; font-size:13px; }
#es-sheet .sg-bar{ height:14px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); overflow:hidden; }
#es-sheet .sg-bar u{ display:block; height:100%; background:var(--gold); }
#es-sheet .sg-row span{ font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
#es-sheet .sg-list{ display:grid; gap:4px; }
#es-sheet .sg-list div{ display:flex; justify-content:space-between; gap:10px; padding:6px 10px; border-radius:10px; background:var(--paper); font-size:13px; cursor:pointer; }
#es-sheet .sg-list.idle div{ background:transparent; border:2px dashed var(--line, #c9bfae); }
#es-sheet .sg-list b{ font-variant-numeric:tabular-nums; }

/* layout tools (26 Sep) */
#es-hud .chip.act{ background:var(--ink); color:var(--white); }
#es-hud #es-undo{ background:var(--paper, #f4efe6); }
#es-sheet .opt small.here{ display:block; margin-top:3px; font-weight:800; color:#2e6b3a; }
#es-sheet .btn.warn{ border-color:#c8371f; color:#7a1f10; }
#es-sheet .bpname{ width:100%; box-sizing:border-box; border:2px solid var(--ink); border-radius:10px; padding:9px 12px; font:600 14px Inter,sans-serif; margin:4px 0 10px; background:var(--white); }
#es-sheet .bp{ border:2px solid var(--ink); border-radius:14px; padding:10px 12px; margin:0 0 8px; background:var(--paper, #f4efe6); }
#es-sheet .bp.empty{ border-style:dashed; background:transparent; }
#es-sheet .bp b{ display:block; font:800 15px Inter,sans-serif; }
#es-sheet .bp small{ display:block; margin:2px 0 8px; opacity:.8; }

/* estate goals, strength, ranking (26 Sep) */
#es-hud #es-goals em{ font-style:normal; font-weight:900; margin-left:2px; }
#es-hud #es-goals em:empty{ display:none; }
#es-sheet .str{ display:flex; align-items:center; gap:14px; margin:4px 0 10px; }
#es-sheet .str small{ display:block; font:700 11px Inter,sans-serif; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
#es-sheet .str b{ font:900 40px/1 Archivo,Impact,sans-serif; font-stretch:112%; }
#es-sheet .str .note{ margin:0; }
#es-sheet .sg-row b{ font-size:12px; }
#es-sheet .goals{ display:grid; gap:6px; margin-bottom:6px; }
#es-sheet .goal{ display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border:2px solid var(--ink); border-radius:12px; background:var(--white); }
#es-sheet .goal i{ font-style:normal; font-weight:900; text-align:center; }
#es-sheet .goal b{ display:block; font:800 14px Inter,sans-serif; }
#es-sheet .goal small{ display:block; font-size:12px; opacity:.8; }
#es-sheet .goal.met{ background:#fff4e0; border-color:var(--gold); }
#es-sheet .goal.done{ opacity:.55; }
#es-sheet .goals.locked .goal{ border-style:dashed; opacity:.6; }
#es-sheet .goal .btn{ height:34px; padding:0 12px; font-size:12.5px; }
#es-sheet .goal .tag{ font:800 12px Inter,sans-serif; white-space:nowrap; }
#es-sheet .rks{ display:grid; gap:4px; margin-bottom:10px; }
#es-sheet .rk{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:7px 10px; border-radius:10px; background:var(--paper, #f4efe6); }
#es-sheet .rk.you{ background:#fff4e0; outline:2px solid var(--gold); }
#es-sheet .rk i{ font:900 15px Archivo,Impact,sans-serif; font-style:normal; }
#es-sheet .rk b{ display:block; font:800 14px Inter,sans-serif; }
#es-sheet .rk small{ opacity:.75; }
#es-sheet .rk span{ font:900 18px Archivo,Impact,sans-serif; font-variant-numeric:tabular-nums; }
#es-sheet .rks .gap{ text-align:center; opacity:.5; }
#es-sheet .sg.parts .sg-row{ grid-template-columns:170px 1fr 44px; }

/* tower and wall paths (26 Sep) */
#es-sheet .paths{ margin:6px 0 10px; }
#es-sheet .pathrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#es-sheet .pathc{ display:flex; flex-direction:column; gap:4px; border:2px solid var(--ink); border-radius:14px; padding:10px; background:var(--white); }
#es-sheet .pathc img{ height:110px; object-fit:contain; align-self:center; }
#es-sheet .pathc b{ font:900 16px Archivo,Impact,sans-serif; font-stretch:112%; text-transform:uppercase; }
#es-sheet .pathc small{ font-size:12px; line-height:1.35; flex:1; }
#es-sheet .pathc .btn{ height:38px; font-size:13px; }
#es-sheet .pathrow{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#es-sheet .pathc{ min-width:0; }
#es-sheet .pathc img{ max-width:100%; }
#es-sheet .pathc .btn{ width:100%; padding:0 6px; white-space:nowrap; }

/* ── PHONES (27 Sep audit): two rows, nothing off the screen. Row one: the estate, its keep and loot.
   Row two: Goals, the builder, the defence log, Tools (and Undo while you move things). The rest sits in Tools. ── */
#es-hud .chip.more{ display:none; }
@media (max-width:600px){
  #es-hud{ flex-wrap:wrap; overflow:visible; row-gap:6px; padding:0 10px; }
  #es-hud .name{ flex:1 1 100%; max-width:calc(100% - 4px); }
  #es-hud .chip{ font-size:11.5px; padding:4px 9px; }
  #es-hud .chip.tool{ display:none !important; }
  #es-hud .chip.more{ display:inline-flex; cursor:pointer; background:var(--ink); color:var(--white); }
  #es-builder i{ width:44px; }
  #es-tip{ top:calc(196px + var(--sat)); }
}
#es-sheet .menu.tools{ grid-template-columns:1fr; }
#es-sheet .menu.tools .opt{ text-align:left; display:block; width:100%; padding:12px 14px; }
#es-sheet .menu.tools .opt > div{ width:100%; } #es-sheet .menu.tools .opt small{ display:block; margin-top:3px; }
#es-sheet .log .row .acts{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }   /* Watch and Raid back, stacked (28 Sep) */
#es-sheet .log .row .acts .btn{ width:100%; margin:0; white-space:nowrap; }

/* zoom (29 Sep 2026): + / - / Fit, bottom right, over the canvas */
#es-zoom{ position:fixed; z-index:6; right:calc(16px + var(--sar, 0px)); bottom:calc(112px + var(--sab, 0px)); flex-direction:column; gap:8px; }
#es-zoom button{ width:44px; height:44px; border-radius:50%; border:3px solid var(--ink); background:var(--white); color:var(--ink); font:900 22px/1 Archivo,Impact,sans-serif; cursor:pointer; box-shadow:0 3px 0 var(--ink); }
#es-zoom button.fit{ font:800 12px/1 Inter,sans-serif; display:none; }
#es-zoom.in button.fit{ display:block; }
#es-zoom button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }