/* ══ CLEAN-UP LAYER, the game (5 Nov 2026 look test, v2) ══════════════════════════════════════════════════════════
   The "unslop" rules in the game's own look (Archivo titles, ink lines, orange accent: players rejected the website
   look in the game on 2 Oct). Loaded last in raid.html.
   v2, the owner: "a standard size for each button, then alignment is easier". So every control is one of FOUR sizes,
   and width follows a rule, never the words in it:
     XL 56  the one big call on a full screen (the title screen only)
     L  48  an action in a panel or card: as wide as its column, or equal columns side by side
     M  36  a control in a bar: the top bar, the estate row, the strip's add tile, round icon buttons
     S  28  a filter, a tag, a small tool: chips, sort, team chips, Rename/Delete
   Every bar lines up on the same 12 px outer edge. */
:root{ --b-xl:56px; --b-l:48px; --b-m:36px; --b-s:28px; --edge:12px; --gap:8px; }

/* ── L: actions in panels and cards ── */
.fx .btn, .fx a.btn{ height:var(--b-l) !important; min-height:var(--b-l) !important; padding:0 24px !important; border-width:2px !important; box-sizing:border-box;
  font:900 15px/1 Archivo,sans-serif !important; letter-spacing:.02em !important; white-space:nowrap !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#fx-title .btn{ height:var(--b-xl) !important; min-height:var(--b-xl) !important; font-size:18px !important; padding:0 32px !important; }   /* XL, the title screen's call */
/* the band's actions: two equal columns, then one across both; the name box and its button on one line, the same height */
#fx-band .party{ display:grid !important; grid-template-columns:1fr 1fr; gap:var(--gap) !important; justify-items:stretch !important; margin:16px 0 !important; }
#fx-band .party > .btn, #fx-band .party .guardrow > .btn{ width:100% !important; max-width:none !important; padding:0 12px !important; }
#fx-band .party .guardrow{ display:grid !important; gap:var(--gap) !important; justify-items:stretch !important; margin:0 !important; }
#fx-band .party .guardrow .swap{ grid-column:1 / -1; }
#fx-band .party > small, #fx-band .party > .sharechar{ grid-column:1 / -1; }
#fx-band .party > .sharechar{ width:100% !important; }
#fx-band .party > small{ margin:0 !important; }
.fx .namerow .nr{ gap:var(--gap) !important; }
.fx .namerow input{ height:var(--b-l) !important; border-width:2px !important; font:600 15px Inter,sans-serif !important; padding:0 16px !important; box-sizing:border-box; }
.fx .namerow .btn{ width:168px !important; padding:0 12px !important; }
/* a card's action spans the card */
.fx .move .btn, #fx-band .backto{ width:100% !important; }

/* ── M: controls in bars ── */
#bar .pill, #es-hud .chip, #es-hud .chip.buy{ height:var(--b-m) !important; min-height:var(--b-m) !important; padding:0 14px !important; border:2px solid var(--ink) !important; border-radius:999px !important;
  font:700 13px/1 Inter,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; white-space:nowrap; }
#bar .pill{ background:var(--white); min-width:96px; justify-content:center; }
#bar{ min-height:56px; box-sizing:border-box; padding-left:16px !important; padding-right:10px !important; gap:var(--gap) !important; }
/* round icon buttons: M everywhere (the hero's +, the estate zoom) */
.fx .herosheet .plus, #es-zoom button{ width:var(--b-m) !important; height:var(--b-m) !important; min-height:0 !important; padding:0 !important; border-width:2px !important; box-shadow:none !important;
  display:inline-grid; place-items:center; font-size:18px !important; line-height:1 !important; }

/* ── the estate row: the name box and the M controls on one centre line, the builder on the bar's right edge ── */
#es-hud{ gap:var(--gap) !important; align-items:center !important; }
#es-hud .name{ height:60px; box-sizing:border-box; padding:0 16px !important; display:flex; flex-direction:column; justify-content:center; }
#es-hud .chip{ background:var(--white) !important; color:var(--ink) !important; }
/* one meaning per colour: ink fill = the main action; orange = something happening now; the rest plain */
#es-hud .chip.build, #es-hud .chip.act{ background:var(--ink) !important; color:var(--white) !important; }
#es-hud .chip.tide.live, #es-hud .chip.gold{ background:var(--gold) !important; color:var(--ink) !important; }
#es-hud .chip.fix::before, #es-hud .chip.tide::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
#es-hud .chip.tide:not(.live)::before{ background:var(--ink2); }
#es-builder i{ width:64px !important; height:4px !important; border:0 !important; background:var(--paper2) !important; border-radius:2px !important; }
#es-hud .name small, #bar .t small{ font:500 12px/1.3 Inter,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink2) !important; margin-top:4px; display:block; }
/* one count badge: an orange disc, the same in the row and the tab bar */
#es-hud .chip em, #nav em.on{ font:700 11px/18px Inter,sans-serif !important; font-style:normal !important; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--gold) !important; color:var(--white) !important; border:0 !important; text-align:center; box-sizing:border-box; font-variant-numeric:tabular-nums; }
#es-todayn{ font-size:0 !important; min-width:8px !important; width:8px; height:8px !important; padding:0 !important; }

/* ── S: filters, tags, small tools ── */
.fx .chip, #fx-band .bandbar .chip, #fx-band .sortby select, .fx .herosheet .mini, .fx .teams .chip, .fx .tform button, .fx .tform input, .fx .lvl b{
  height:var(--b-s) !important; min-height:var(--b-s) !important; padding:0 12px !important; border:2px solid var(--ink) !important; border-radius:999px !important;
  font:600 12px/1 Inter,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; white-space:nowrap; }
.fx .chip.add{ border-style:dashed !important; }
.fx .lvl b{ background:var(--ink) !important; color:var(--white) !important; font:900 12px/1 Archivo,sans-serif !important; }
#fx-band .bandbar{ display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap; }
#fx-band .bandbar .fchips{ display:flex; gap:var(--gap); flex-wrap:wrap; }
#fx-band .sortby{ display:inline-flex; align-items:center; gap:var(--gap); font:600 12px Inter,sans-serif; }
.fx .teams .tchips, .fx .teams .ttools, .fx .tform{ display:flex; flex-wrap:wrap; gap:var(--gap) !important; align-items:center; }
/* tags (facts, not buttons): the same S height; the aura's colour as a dot, not a tinted fill */
#fx-band .row{ gap:var(--gap) !important; margin:12px 0 16px !important; }
#fx-band .row .chip[style*="background"]{ background:var(--white) !important; }
#fx-band .row .chip[style*="background"]::before{ content:""; width:8px; height:8px; border-radius:50%; background:#c08a52; }

/* ── words and figures ── */
.fx .k{ font:600 13px/1.3 Inter,sans-serif !important; letter-spacing:0 !important; color:var(--ink2) !important; text-transform:none !important; }
#fx-band .namerow small, #fx-band .party small{ font:400 13px/1.45 Inter,sans-serif !important; color:var(--ink2) !important; }
.fx .lvl{ gap:12px !important; }
.fx .stat{ grid-template-columns:72px 1fr 36px !important; gap:12px !important; }
#fx-band .stats .stat span{ text-transform:capitalize; letter-spacing:0; font:600 13px Inter,sans-serif; }
#fx-band .stats .stat em{ font:700 15px/1 Inter,sans-serif !important; font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
#fx-band .lvl small{ font-variant-numeric:tabular-nums; }
.fx .herosheet .hs-head .pts{ border:0 !important; background:none !important; padding:0 !important; font:600 13px Inter,sans-serif !important; color:var(--ink2) !important; }
.fx .herosheet .hs-head .pts.on{ color:var(--gold) !important; }
.fx .herosheet .hs-auto{ font-size:14px !important; line-height:1.5 !important; color:var(--ink2) !important; }
.fx .herosheet .txt i{ font-style:normal; font:500 12px Inter,sans-serif; color:var(--ink2); }
#fx-band .list button .kt i small{ font-variant-numeric:tabular-nums; }
#fx-band .list button em{ font:700 9px/1 Inter,sans-serif !important; letter-spacing:.02em !important; }
/* the estate row's right end lines up with the top bar's right end (the Sound button), 10 px inside the bar */
#es-builder{ margin-right:10px; }
/* a hidden control stays hidden: the code hides unused ones with an inline display:none */
#es-hud [style*="display: none"], .fx [style*="display: none"], #es-hud [hidden], .fx [hidden], #bar [hidden]{ display:none !important; }
/* the name row splits on the same line as the two action columns below it */
.fx .namerow .btn{ width:calc((100% - var(--gap)) / 2) !important; flex:none !important; }
#fx-band .party{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
/* a phone: one column, every action as wide as the screen's column */
@media (max-width:600px){
  #fx-band .party{ grid-template-columns:minmax(0,1fr) !important; }
  #fx-band .party > *{ grid-column:1 / -1; }
}
/* a pair of bar buttons is one width; the zoom buttons share the bar's right edge; the band's filters sit clear of the bar */
#bar #tofield, #bar #snd{ width:112px; min-width:0; padding:0 !important; justify-content:center; }
/* a phone (5 Nov): the bar keeps one line. The game hides the island line under 520 px, the two buttons size to their
   words (still M 36 tall), and the title never wraps; equal 112s pushed "Estate Raids" onto two lines and the taller
   bar covered the top of the band strip. */
@media (max-width:520px){
  #bar{ min-height:0; }
  #bar .t small{ display:none !important; }
  #bar .t{ white-space:nowrap; flex:none; }
  #bar #tofield, #bar #snd{ width:auto; padding:0 12px !important; }
}
@media (max-width:400px){ #bar{ gap:6px !important; } #bar #tofield, #bar #snd{ padding:0 10px !important; } }
@media (min-width:761px){ #es-zoom{ right:calc(22px + var(--sar, 0px)); } #fx-band .bandbar{ margin-top:12px; } }
/* the estate's sheets: a row's own button (the defence log's Watch) is M 36; a menu's options are rows of one
   height (76), whether their note runs to one line or two */
#es-sheet .acts .btn, .es .acts .btn{ height:var(--b-m) !important; min-height:var(--b-m) !important; padding:0 16px !important; font-size:13px !important; }
#es-sheet .opt, .menu.tools .opt{ min-height:76px; box-sizing:border-box; }
/* THE FREE DEMO (7 Nov 2026): /raids/try. The bar's gold button and the "own band" sheet's three steps */
#bar #tofield.trybuy{ background:var(--gold) !important; color:var(--white) !important; cursor:pointer; }
.trystep{ display:flex; gap:12px; align-items:flex-start; margin:14px 0; text-align:left; }
.trystep > b{ flex:none; width:32px; height:32px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; font:900 15px Archivo,sans-serif; background:var(--white); }
.trystep strong{ display:block; font:700 15px/1.25 Inter,sans-serif; color:var(--ink); }
.trystep p{ margin:3px 0 0 !important; }