/* ══ ESTATE RAIDS · THE SITE'S COLOURS ON THE GAME'S OWN LAYOUT (2 Oct 2026) ══════════════════════════════════
   The owner and the players chose the game's own layout back (the floating bar, the estate's chips, the tab pill,
   the side panels: "the old one looks like a game"), with the colours of the new site: warm paper, near-black ink,
   the orange accent. The colour tokens are in private/raid.html (:root); this file recolours the few tints that were
   written in place in frame.css and estate.css. The drawn world and the fight's ring colours are untouched. */
#es-hud .chip.tide { background: #f1eee8; }
#es-hud .chip.tide.live { background: var(--gold); color: #fff; }
#es-sheet .opt:not(.off):hover { background: #fff4ee; }
.es .chip.buy:hover { background: #ff7a50 !important; color: #fff !important; }
/* the sheet's ✕ stays at the top of the sheet while it scrolls (2 Oct phone audit) */
#es-sheet .x { position: sticky !important; top: 0; float: right; z-index: 3; }
/* phones (2 Oct audit, carried into the game's own layout) */
@media (max-width: 760px) {
  /* the Band's row of fighters: tall enough for the tiles (they were cut to a sliver) */
  #fx-band .list { box-sizing: border-box; height: calc(62px + var(--sat) + 86px) !important; min-height: 0 !important; flex: none; align-items: flex-start; }
  /* the zoom buttons step above the getting-started card, and up out of the way of a visit's panel */
  body:has(#es-guide.on) #es-zoom { bottom: calc(240px + var(--sab)) !important; }
  #es-visit .link { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (max-width: 760px) {
  /* the title's big button fits the screen (it ran 20-30 px past both edges) */
  #fx-title .go .main { box-sizing: border-box; width: auto !important; flex: 1 1 100%; max-width: calc(100vw - 28px); padding: 0 16px !important; }
  /* the game's own sheets (the Register, sign-in, targets) cover the tab bar */
  .sheet { z-index: 40 !important; }
  /* the Band page scrolls clear of the tab bar */
  #fx-band .page { padding-bottom: calc(110px + var(--sab)) !important; }
  #fx-band .herosheet .chip, .fx .herosheet button.chip { min-height: 34px; }
  /* finger-sized chips on the estate's bar */
  #es-hud button.chip { min-height: 32px; padding: 6px 11px !important; }
}
/* ══ THE DAY STREAK (2 Oct 2026) ══ */
#es-hud .chip.streak { cursor: pointer; border-color: var(--gold); color: var(--gold); background: var(--white); font-weight: 800; }
#es-hud .chip.streak.done { background: var(--gold); color: #fff; }
#es-hud .chip.streak.cold { border-color: var(--ink); color: var(--ink2); }
#es-sheet .stk-ladder { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 8px; }
#es-sheet .stk-day { border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); padding: 8px 4px 6px; text-align: center; display: grid; gap: 2px; }
#es-sheet .stk-day small { font: 700 10px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
#es-sheet .stk-day b { font: 900 15px Archivo, sans-serif; white-space: nowrap; }
#es-sheet .stk-day i { font: 700 10.5px Inter, sans-serif; font-style: normal; color: var(--ink2); min-height: 13px; }
#es-sheet .stk-day.done { background: var(--gold); border-color: var(--gold); color: #fff; }
#es-sheet .stk-day.done small, #es-sheet .stk-day.done i { color: #fff; }
#es-sheet .stk-day.next { box-shadow: 3px 3px 0 var(--ink); background: var(--white); }
#es-sheet .stk-day.next i { color: var(--gold); }
.fx .tal.streak { background: #fff4ee; border-color: var(--gold); }
@media (max-width: 520px) { #es-sheet .stk-ladder { grid-template-columns: repeat(4, 1fr); } }
/* the hero sheet: with no skill points to spend, the + buttons step aside (a grey + read as broken, 2 Oct) */
.fx .herosheet:not(:has(.pts.on)) .plus { display: none; }
#es-sheet.side .stk-ladder { grid-template-columns: repeat(4, 1fr); }

/* ── THE TIDE, FELT (2 Oct): the banner on every screen while a tide can be fought, the "while you were away" card,
   and what the beasts carried off ── */
#tide-alert { position: fixed; z-index: 44; left: 50%; top: calc(14px + var(--sat, 0px)); transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 18px 10px 14px; border: 0; border-radius: 99px;
  background: var(--ink); color: #fff; font: 500 14px "Instrument Sans", Inter, sans-serif; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45);
  transition: opacity .3s, transform .3s; white-space: nowrap; }
#tide-alert.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: tidealert 1.6s ease-in-out infinite; }
#tide-alert i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,79,31,.3); flex: none; }
#tide-alert b { font-weight: 600; } #tide-alert span { color: #cfcac0; overflow: hidden; text-overflow: ellipsis; }
#tide-alert:hover { background: var(--gold); } #tide-alert:hover span { color: #fff; }
@keyframes tidealert { 50% { box-shadow: 0 14px 30px -12px rgba(0,0,0,.45), 0 0 0 6px rgba(255,79,31,.25); } }
#tide-card .card.away .stamp { font-size: 30px; letter-spacing: .02em; }
#tide-card .card.away .rows { display: grid; gap: 6px; margin: 4px 0 12px; max-height: 40vh; overflow: auto; }
#tide-card .card.away .row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: #f1eee8; font-size: 13.5px; text-align: left; }
#tide-card .card.away .row b { font-weight: 600; white-space: nowrap; } #tide-card .card.away .row.fell span { color: var(--red); }
#tide-card .card.away .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#tide-card .sub.stolen { color: var(--red); font-weight: 600; }
@media (max-width: 600px) { #tide-alert { font-size: 13px; padding: 9px 14px 9px 12px; } #tide-card .card.away .stamp { font-size: 24px; } }

/* ── THE INK LAIR'S PANEL (2 Oct) ── */
#es-visit .card.lair .rowb { display: flex; flex-wrap: wrap; gap: 8px; }
#es-visit .card.lair .rowb .btn { flex: 0 0 auto; width: 100%; }
#es-visit .card.lair .btn.locked { background: #f1eee8 !important; color: var(--ink2, #77736b) !important; border-color: #d8d3c9 !important; box-shadow: none !important; opacity: 1; }
#es-visit .card.lair .guards .g img { object-fit: contain; background: #f1eee8; }

/* ── 6 Oct: the weekly Lair assault: its banner on every screen, the shared health bar, the damage board ── */
#lair-alert { position: fixed; z-index: 44; left: 50%; top: calc(62px + var(--sat, 0px)); transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 9px 16px; border: 0; border-radius: 999px; background: #2a2140; color: #fff;
  font: 600 13px "Instrument Sans", sans-serif; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .3s, transform .3s; cursor: pointer; }
#lair-alert.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#lair-alert i { width: 10px; height: 10px; border-radius: 50%; background: #b98cff; box-shadow: 0 0 0 4px rgba(185,140,255,.3); flex: none; }
#lair-alert span { color: #d9cdf2; overflow: hidden; text-overflow: ellipsis; }
#lair-alert .short { display: none; }
/* 11 Oct: the countdown before the assault: an amber dot, the clock in steady digits, a pulse in the last 15 minutes */
#lair-alert.soon b { font-variant-numeric: tabular-nums; }
#lair-alert.soon i { background: #ffb547; box-shadow: 0 0 0 4px rgba(255,181,71,.28); }
#lair-alert.soon.close i { animation: lairpulse 1s ease-in-out infinite; }
@keyframes lairpulse { 50% { box-shadow: 0 0 0 8px rgba(255,181,71,0); transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { #lair-alert.soon.close i { animation: none; } }
/* 18 Oct: on a computer it sat under the top bar, over each screen's heading (the estate's name and chips, YOUR ESTATE
   on the face-off, RAIDED!). It now sits in the top bar's empty middle there too: the whole line when there is room,
   the countdown alone when there is less, the short form below that. The intro, title, how to play, face-off and
   results are moments of their own: it steps aside for them */
@media (min-width: 601px) {
  #lair-alert { top: calc(18px + var(--sat, 0px)); max-width: calc(100vw - 470px); padding: 7px 14px; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
  #lair-alert.on { transform: translate(-50%, 0); }
}
@media (min-width: 601px) and (max-width: 1000px) { #lair-alert span { display: none; } }
/* 18 Oct: a visit's zoom buttons. On a phone they sat over the north-east and south-east ways in and their labels;
   they now sit small, side by side, at the left just above the panel. On a wide screen they hid behind the panel;
   they stand just left of it */
@media (max-width: 899px) {
  body:has(#es-visit.on) #es-zoom { top: auto !important; bottom: calc(var(--es-vpanel, 340px) + 8px) !important; right: auto; left: calc(12px + var(--sal, 0px)); flex-direction: row; gap: 6px; }
  body:has(#es-visit.on) #es-zoom button { width: 36px; height: 36px; font-size: 18px; }
}
@media (min-width: 900px) { body:has(#es-visit.on) #es-zoom { right: calc(var(--es-vside, 420px) + 4px); } }
@media (min-width: 601px) and (max-width: 860px) {
  #lair-alert { max-width: calc(100vw - 440px); }
  #lair-alert b:not(.short) { display: none; } #lair-alert .short { display: inline; overflow: hidden; text-overflow: ellipsis; }
}
body:has(#fx-intro.on, #fx-title.on, #fx-how.on, #fx-vs.on, #fx-results.on) #lair-alert { opacity: 0; pointer-events: none; }
/* 6 Oct: on a phone it covered the estate's name; it sits in the top bar's empty middle there, short */
@media (max-width: 600px) {
  #lair-alert { left: auto; right: 84px; top: calc(17px + var(--sat, 0px)); transform: translateY(-8px); padding: 7px 11px; gap: 6px; max-width: calc(100vw - 262px); font-size: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
  #lair-alert.on { transform: none; }
  #lair-alert b:not(.short), #lair-alert span { display: none; }
  #lair-alert .short { display: inline; overflow: hidden; text-overflow: ellipsis; }
  #lair-alert i { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(185,140,255,.3); }
}
.lairbar { position: relative; height: 22px; border: 2px solid var(--ink); border-radius: 11px; background: var(--white); overflow: hidden; margin: 8px 0 4px; }
.lairbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3b2a5a, #7a3fb0); transition: width .8s ease; }
.lairbar b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 12px Archivo, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .02em; }
#es-visit .assault .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#es-visit .assault .board { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; background: var(--white); font-size: 13px; margin: 6px 0; }
#es-visit .assault .board div { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; padding: 3px 0; }
#es-visit .assault .board div.you { font-weight: 800; color: var(--gold); }
#es-visit .assault .board em { font-style: normal; }
/* 6 Oct: nothing to tap but the fight while a tide or the Lair is fought */
body.tidefight #nav, body.tidefight #es-hud button, body.tidefight #es-tools, body.tidefight #lair-alert, body.tidefight #es-guide { visibility: hidden !important; pointer-events: none !important; }
/* the heroes' specials in the Lair fight (6 Oct) */
#lair-sp { position: fixed; z-index: 31; left: 50%; bottom: calc(200px + var(--sab, 0px)); transform: translateX(-50%); display: none; gap: 8px; max-width: calc(100vw - 24px); }
#lair-sp.on { display: flex; }
#lair-sp .h { position: relative; width: 84px; padding: 6px 4px 7px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); display: grid; justify-items: center; gap: 3px; cursor: pointer; touch-action: manipulation; font: inherit; color: var(--ink); }
#lair-sp .h img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: #ddd; }
#lair-sp .h b { font: 800 10px/1.1 Archivo, sans-serif; letter-spacing: .04em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lair-sp .h i { width: 62px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; }
#lair-sp .h i u { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }
#lair-sp .h em { position: absolute; top: 3px; right: 6px; font: 800 9px Archivo, sans-serif; font-style: normal; opacity: .45; }
#lair-sp .h.ready { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold); animation: spReady .8s ease-in-out infinite alternate; }
#lair-sp .h.ready i u { background: var(--gold); }
#lair-sp .h.go { background: var(--gold); color: var(--white); animation: none; }
#lair-sp .h.down { opacity: .35; pointer-events: none; filter: grayscale(1); }
@keyframes spReady { from { transform: translateY(0); } to { transform: translateY(-4px); } }
#es-visit .assault .board.blows div { grid-template-columns: 1fr auto 52px; }
#es-visit .assault .board.blows b { font-weight: 400; opacity: .6; text-align: right; }
#es-visit .assault .board.blows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tide-card .card.lairres .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* 6 Oct: the Lair, live: the one field's strip (the shared bar, how many are out, the latest blows) */
#coop-hud { position: fixed; z-index: 29; left: 50%; top: calc(132px + var(--sat, 0px)); transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); display: none;
  padding: 8px 12px 6px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); box-shadow: 0 4px 0 var(--ink); }
#coop-hud.on { display: block; }
#coop-hud .lairbar { margin: 0 0 4px; }
#coop-hud .sub { margin: 0; font-size: 12px; opacity: .75; }
#coop-hud .feed { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
#coop-hud .feed div { font: 700 11px "Instrument Sans", sans-serif; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.07); white-space: nowrap; }
#coop-hud .feed div.you { background: var(--gold); color: var(--white); }
#coop-hud .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#coop-hud .row .btn { padding: 5px 12px; font-size: 12px; min-height: 0; }
@media (max-width: 600px) {
  body.tidefight #es-hud { display: none !important; }
  #coop-hud { top: calc(62px + var(--sat, 0px)); padding: 6px 10px 5px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
  #coop-hud .lairbar { height: 18px; } #coop-hud .lairbar b { font-size: 10px; }
  #coop-hud .sub { font-size: 11px; }
  #coop-hud .feed { flex-wrap: nowrap; overflow: hidden; }
}
#coop-hud .row .acts { display: flex; gap: 6px; flex: none; }