/* Layout: full-screen isometric canvas with floating HUD panels; dark tunnel palette, single visual world */
:root {
  color-scheme: dark;
  --bg: #07090d; --panel: #0d131c; --panel2: #121a26; --line: rgba(46, 230, 214, 0.22); --edge: rgba(255, 255, 255, 0.08);
  --ink: #eaf0f6; --muted: #8e9aad; --teal: #2ee6d6; --teal-d: #0b6e66; --gold: #f2b33d; --gold-d: #8a5d0c;
  --red: #ff4a3a; --red-d: #8f0608; --violet: #a77bff; --green: #3dff9a; --shadow: rgba(0, 0, 0, 0.55);
  --display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font: 600 16px/1.3 var(--body); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { -webkit-user-drag: none; user-drag: none; }
input, textarea { -webkit-touch-callout: default; }
#app { position: relative; height: 100%; overflow: hidden; background: var(--bg); }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#cv:active { cursor: grabbing; }
[hidden] { display: none !important; }
.i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: 0.04em; text-wrap: balance; }
h4 { font-size: 13px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.16em; margin: 16px 0 8px; }
h4 .hint { font: 600 13px var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }

/* buttons */
.btn { font: 800 13px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #06201d; cursor: pointer;
  background: linear-gradient(#6ff5e9, #22b7aa); border: 0; border-bottom: 4px solid var(--teal-d); border-radius: 12px;
  padding: 11px 15px 9px; box-shadow: 0 6px 14px var(--shadow); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.btn:focus-visible, .card:focus-visible, .tcard:focus-visible, .dcard:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.gold, .btn.raid { color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); border-bottom-color: var(--gold-d); }
.btn.red { color: #fff; background: linear-gradient(#ff6a5a, #c8211b); border-bottom-color: var(--red-d); }
.btn.ghost { color: var(--ink); background: rgba(14, 20, 30, 0.88); border: 1px solid var(--edge); border-bottom: 4px solid #05070b; }
.btn.primary { color: #06201d; }
.btn:disabled { color: #8e9aad; background: #1f2733; border-bottom-color: #10151d; cursor: not-allowed; box-shadow: none; }
.btn.small { padding: 8px 11px 7px; font-size: 11px; }
.btn.big { padding: 15px 30px 13px; font-size: 18px; }
.btn .t { font: 700 11px var(--body); opacity: 0.8; text-transform: none; letter-spacing: 0; }
.cost { display: inline-flex; align-items: center; font: 800 14px var(--body); }
.cost.short { color: var(--red); }
.btn .cost.short { color: #7a0a05; }
.x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* HUD: the profile corner top left (level and XP, name, trophies and league, the battle log), the Devs in the middle,
   the resources stacked down the right, as Clash lays them out */
#hud-top { position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: start; gap: 8px; pointer-events: none; }
#hud-top button { pointer-events: auto; }
.hud-l { grid-column: 1; grid-row: 1; display: grid; gap: 7px; justify-items: start; min-width: 0; }
.hud-c { grid-column: 2; grid-row: 1; justify-self: center; display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.res-group { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 6px; justify-items: stretch; }
.p-card { position: relative; display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; text-align: left; min-width: 0; max-width: min(300px, 46vw); }
.p-lv { position: relative; z-index: 1; flex: none; width: 48px; height: 48px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
.p-lv svg { display: block; width: 100%; height: 100%; }
.p-id { margin-left: -15px; padding: 6px 12px 7px 21px; min-width: 132px; display: grid; gap: 5px; background: rgba(8, 11, 17, 0.86); border: 1px solid var(--edge); border-left: 0;
  border-radius: 0 12px 12px 0; box-shadow: 0 6px 18px var(--shadow); min-width: 0; }
.p-nm { display: flex; align-items: center; gap: 5px; min-width: 0; }
.p-nm b { font: 800 14px var(--display); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-nm .cbadge { flex: none; }
.p-xp { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.p-xp i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #1fa99d, #7ffff2); transition: width 0.6s ease; }
.p-su { font: 800 10px/1 var(--display); font-style: normal; letter-spacing: 0.04em; color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c);
  border-radius: 6px; padding: 4px 6px 3px; flex: none; }
.p-card.guest .p-nm b { color: #c8d2df; }
.p-card.guest { max-width: min(320px, 56vw); }    /* (1.34: room for the name beside a longer Sign up: Registrarse, Cadastrar) */
.p-card .gen { font: 900 10px/16px var(--display); font-style: normal; width: 16px; height: 16px; flex: none; border-radius: 50%; text-align: center; color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); }
.p-card:hover .p-id { border-color: var(--line); }
.p-card:focus-visible { outline: none; } .p-card:focus-visible .p-id { outline: 3px solid #fff; outline-offset: 1px; }
.p-card.lvup .p-lv { animation: lvPop 1s cubic-bezier(0.2, 1.4, 0.4, 1); }
.p-card.lvup .p-xp i { transition: none; }
@keyframes lvPop { 0% { transform: scale(1); } 28% { transform: scale(1.4) rotate(-10deg); filter: drop-shadow(0 0 12px #7ffff2); } 100% { transform: scale(1); } }
.p-row { display: flex; gap: 6px; align-items: center; padding-left: 3px; }
.chip.trophy { gap: 5px; padding: 2px 12px 2px 3px; color: var(--ink); cursor: pointer; }
.chip.trophy b { font: 800 14px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.p-lg svg { display: block; width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.chip.inbox { position: relative; padding: 8px 10px; color: var(--ink); cursor: pointer; }
.chip.inbox .bi { display: block; width: 18px; height: 18px; }
.chip.inbox .badge { top: -6px; right: -6px; }
#chip-devs { cursor: pointer; }
.res { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; padding: 5px 7px 5px 12px; background: rgba(8, 11, 17, 0.84); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 6px 18px var(--shadow); }
.res .ico .i { width: 26px; height: 26px; margin: 0; }
.res .ico img.i.ri { width: 34px; height: 34px; margin: -4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
img.i.ri { width: 19px; height: 19px; vertical-align: -4px; }
.rv { display: grid; min-width: 74px; }
.rv b { font: 800 16px var(--display); font-variant-numeric: tabular-nums; }
.rv i { font: 600 11px var(--body); color: var(--muted); font-style: normal; }
.res .rv { flex: 1; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 5px; min-width: 104px; text-align: right; }
.res .rv .meter { grid-column: 1 / -1; }
.res.shards .rv { grid-template-columns: 1fr; }
.meter { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; margin-top: 2px; }
.meter span { display: block; height: 100%; width: 0; border-radius: 3px; }
.res.hash .meter span { background: var(--gold); } .res.gas .meter span { background: #ecd630; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background: rgba(8, 11, 17, 0.84); border: 1px solid var(--edge); border-radius: 999px; font: 700 13px var(--display); }
/* narrow screens: the Devs go under the profile corner */
@media (max-width: 600px) {
  .hud-c { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 0; padding-left: 3px; }
  .p-lv { width: 42px; height: 42px; }
  .p-id { min-width: 104px; padding: 5px 10px 6px 18px; gap: 4px; }
  .p-nm b { font-size: 12px; }
  .p-xp { height: 6px; }
  .p-lg svg { width: 26px; height: 26px; }
  .chip.trophy b { font-size: 13px; }
  .res .rv { min-width: 84px; } .res .rv b { font-size: 14px; } .res .rv i { font-size: 10px; }
  .res { padding: 4px 6px 4px 9px; } .res .ico img.i.ri { width: 28px; height: 28px; margin: -3px; }
}
/* short screens (a phone on its side): everything a size smaller and closer together */
@media (max-height: 500px) {
  #hud-top { top: max(6px, env(safe-area-inset-top, 0px)); gap: 6px; }
  .hud-l { gap: 5px; }
  .p-lv { width: 38px; height: 38px; }
  .p-id { padding: 4px 10px 5px 17px; gap: 3px; }
  .p-nm b { font-size: 12px; }
  .p-lg svg { width: 24px; height: 24px; }
  .chip.inbox { padding: 6px 8px; }
  .res-group { gap: 4px; }
  .res { padding: 3px 6px 3px 9px; border-radius: 11px; } .res .rv b { font-size: 13px; } .res .rv { min-width: 84px; }
  .res .ico img.i.ri { width: 26px; height: 26px; margin: -3px; }
}
#hud-bottom { position: absolute; bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; pointer-events: none; }
#hud-bottom > *, .hb-right > * { pointer-events: auto; }
.hb-right { display: flex; gap: 8px; }
#b-raid { font-size: 20px; padding: 16px 28px 14px; border-radius: 16px; }
#b-army small { font: 700 12px var(--body); opacity: 0.75; margin-left: 4px; text-transform: none; }

/* building sheet + place bar */
.panelish { position: absolute; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); background: rgba(10, 14, 21, 0.95);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px var(--shadow); padding: 14px; z-index: 5; }
/* on a narrow screen the 12 px each side is measured to the panel's edge, padding and border included (it ran 3 px
   past both edges of a phone held upright) */
@media (max-width: 700px) { .panelish { box-sizing: border-box; } }
#sheet { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 74px); }
.sh-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; }
.sh-head img { width: 64px; height: 54px; object-fit: contain; }
.sh-head h3 { font-size: 17px; }
.desc { margin: 8px 0 6px; color: #c5cfdc; font-weight: 500; }
.stats { display: flex; flex-wrap: wrap; gap: 6px; }
.stats span { background: var(--panel2); border: 1px solid var(--edge); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.acts .warn { flex-basis: 100%; margin: 0; font-size: 13px; }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.prog { height: 8px; background: #1b2330; border-radius: 6px; overflow: hidden; margin-top: 10px; }
.prog span { display: block; height: 100%; background: linear-gradient(90deg, #f2c230, #ffd77a); }
#placebar { bottom: max(12px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* the buttons stay put on the right (a run of walls taps Place over and over); the words wrap beside them */
#place-info { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.pb-btns { display: flex; gap: 8px; flex: none; }

/* modal */
.modal { position: absolute; inset: 0; background: rgba(2, 4, 8, 0.62); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 12px; }
.mpanel { width: min(560px, 100%); max-height: calc(100% - 24px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px var(--shadow); padding: 16px max(16px, env(safe-area-inset-left, 0px)) 20px; }
.modal.wide .mpanel { width: min(900px, 100%); }
.mpanel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; position: sticky; top: -16px; background: var(--panel); padding: 6px 0; z-index: 2; }
.mpanel h2 { font-size: 20px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { font: 700 13px var(--display); color: var(--muted); background: var(--panel2); border: 1px solid var(--edge); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.tab.on { color: #06201d; background: var(--teal); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card, .tcard { display: grid; justify-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px; cursor: pointer; color: var(--ink); font: inherit; text-align: center; }
.card:hover:not(:disabled), .tcard:hover:not(:disabled) { border-color: var(--line); background: #172231; }
.card img { width: 100%; max-width: 140px; height: 96px; object-fit: contain; }
.card b, .tcard b { font: 700 13px var(--display); }
.card .row, .tcard .row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.card .t, .tcard .t { font-size: 12px; color: var(--muted); }
.card.dis, .tcard.dis { opacity: 0.55; cursor: not-allowed; }
.state { font-size: 12px; color: var(--gold); }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.tcard img { width: 84px; height: 98px; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.45); }
.armyhead { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.armyhead .meter.big { grid-column: 1 / -1; height: 10px; }
.armyhead .meter.big span { background: var(--teal); }
.armyhead img.mini { width: 40px; height: 47px; border-radius: 7px; }
.armyrow, .qrow, .conrow, .cqrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai { position: relative; }
.ai img { width: 54px; height: 63px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
.ai b { position: absolute; right: -4px; bottom: -2px; background: #06201d; color: var(--teal); font: 800 12px var(--display); padding: 2px 5px; border-radius: 8px; border: 1px solid var(--teal); }
.qi { position: relative; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.qi img { width: 52px; height: 61px; border-radius: 8px; opacity: 0.85; }
.qi span { position: absolute; left: 0; right: 0; bottom: -2px; font: 700 10px var(--display); text-align: center; text-shadow: 0 1px 2px #000; }
.qi i { position: absolute; top: -6px; right: -6px; font-style: normal; font-weight: 900; background: var(--red); color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 15px; line-height: 19px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.qi b { position: absolute; left: -5px; top: -6px; background: #06201d; color: var(--teal); font: 800 11px var(--display); padding: 1px 5px; border-radius: 8px; border: 1px solid var(--teal); }
/* press and hold to train (1.20): the press is the game's, not the browser's (no callout, no text selection, no drag) */
.tcard, .qi, .ccard { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tcard img, .qi img, .ai img, .ccard svg { -webkit-user-drag: none; pointer-events: none; }
.tcard { position: relative; transition: transform 0.08s ease-out; }
.tcard.held, .tcard.held:hover:not(:disabled), .ccard.held { transform: scale(0.95); border-color: var(--teal); background: #12303a; }
.qi img { transition: transform 0.08s ease-out; }
.qi.held img { transform: scale(0.9); }
#b-place { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform 0.08s ease-out; }
#b-place.held { transform: scale(0.94); filter: brightness(1.15); }
.tcard .qn { position: absolute; top: 6px; right: 6px; font: 800 12px var(--display); color: #06201d; background: var(--teal); border-radius: 10px; padding: 2px 7px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.ccard { flex: 1 1 200px; display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; text-align: left; background: var(--panel2); border: 1px solid var(--edge); border-left: 4px solid var(--c); border-radius: 12px; padding: 10px; color: var(--ink); cursor: pointer; font: inherit; }
.ccard .cci .cico { width: 46px; height: 46px; }
.ccard .ccb { display: grid; gap: 4px; min-width: 0; }
.ccard b { font: 800 14px var(--display); color: var(--c); }
.ccard .row { display: flex; gap: 8px; align-items: center; }
.ccard.dis { opacity: 0.5; cursor: not-allowed; }
.cq { font-size: 12px; padding: 3px 8px 3px 4px; border-radius: 8px; border: 1px solid var(--c); color: var(--c); display: inline-flex; align-items: center; gap: 4px; }
.cq .cico { width: 18px; height: 18px; filter: none; }
/* 1.29: troops and Contracts are free (Clash Anytime); a Contract in the army, with its − like a troop's */
.free { color: var(--teal); font: 800 11px var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.qi.con { width: 52px; height: 52px; border-radius: 10px; border: 2px solid var(--c); background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; }
.qi.con .cci { display: grid; place-items: center; transition: transform 0.08s ease-out; }
.qi.con .cci svg, .qi.con .cci img { width: 32px; height: 32px; }
.qi.con.held .cci { transform: scale(0.9); }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.hcard { display: grid; grid-template-columns: 110px 1fr; gap: 10px; background: var(--panel2); border: 1px solid rgba(242, 179, 61, 0.25); border-radius: 16px; padding: 12px; }
.hcard.locked img { filter: grayscale(0.85) brightness(0.6); }
.hcard img { width: 110px; height: 110px; object-fit: contain; }
.hcard h3 { font-size: 16px; color: var(--gold); }
.hcard p { margin: 4px 0; font-size: 14px; font-weight: 500; color: #c5cfdc; }
.hcard .role { color: var(--muted); font-weight: 700; }
.hcard .line { color: var(--muted); font-style: italic; }
.raidopts { display: grid; gap: 10px; }
.ropt { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; background: var(--panel2); border: 1px solid var(--edge); border-radius: 16px; padding: 10px; color: var(--ink); cursor: pointer; font: inherit; }
.ropt img { width: 64px; height: 75px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.ropt.cartel img { border-color: var(--red); } .ropt.def img { border-color: var(--gold); }
.ropt b { font: 800 15px var(--display); display: block; margin-bottom: 2px; }
.ropt span { color: #c5cfdc; font-weight: 500; }
.ropt:hover { border-color: var(--line); }
.cline { position: relative; display: grid; gap: 10px; padding-left: 4px; }
.cline::before { content: ''; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 6px; background: var(--red); border-radius: 3px; opacity: 0.85; }
.stop { position: relative; display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px; }
.stop.locked { opacity: 0.55; }
.stop .dot { width: 38px; height: 38px; border-radius: 50%; background: #f4f1ea; border: 6px solid #0d131c; outline: 3px solid var(--red); display: grid; place-items: center; font: 900 14px var(--display); color: #0d131c; margin-left: 2px; }
.stop b { font: 800 15px var(--display); }
.stop p { margin: 3px 0 0; font-weight: 500; }
.stars { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: -4px; }
.star { width: 18px; height: 18px; fill: #2a3140; stroke: #05070b; stroke-width: 1.2; }
.star.on { fill: var(--gold); }
.howto { margin: 0; padding-left: 18px; color: #c5cfdc; font-weight: 500; display: grid; gap: 6px; }
.kit { display: flex; flex-wrap: wrap; gap: 8px; }

/* battle hud */
#bhud { position: absolute; inset: 0; pointer-events: none; }
#bhud > * { pointer-events: auto; }
#bt-top { position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
#bt-top > * { pointer-events: auto; }
#bt-name { background: rgba(8, 11, 17, 0.84); border: 1px solid var(--edge); border-radius: 14px; padding: 8px 12px; display: grid; gap: 2px; max-width: 46%; }
#bt-name b { font: 800 15px var(--display); }
#bt-name span { font-size: 14px; color: #c5cfdc; }
#bt-right { display: grid; justify-items: end; gap: 6px; }
#bt-time { font: 900 26px var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px #000; display: flex; align-items: baseline; gap: 6px; }
#bt-time small { font: 700 12px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
#bt-stars { display: flex; align-items: center; gap: 2px; background: rgba(8, 11, 17, 0.84); border-radius: 12px; padding: 5px 9px; border: 1px solid var(--edge); }
#bt-stars .star { width: 22px; height: 22px; }
#bt-stars b { font: 800 15px var(--display); margin-left: 6px; }
#bt-loot { font: 800 14px var(--body); display: flex; gap: 8px; text-shadow: 0 1px 4px #000; }
/* what is left to take (counts down as it is stolen) and what the raid is worth in trophies */
#bt-name .avl { display: grid; gap: 1px; margin-top: 3px; }
#bt-name .avl small { font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#bt-name .ar { display: flex; align-items: center; gap: 6px; font: 900 17px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
#bt-name .ar .i { width: 20px; height: 20px; }
#bt-name .ar em { font-style: normal; display: inline-block; transform-origin: left center; }
#bt-name .offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font: 800 12px var(--display); color: #c5cfdc; }
#bt-name .offer .i { width: 16px; height: 16px; }
#bt-name .offer b.w { color: #8dff7a; } #bt-name .offer b.l { color: #ff8a7a; }
#b-next .ncost { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: 11px; }
#b-next .ncost .i { width: 14px; height: 14px; }
/* the last 30 seconds: the clock turns red and beats */
#bt-time.low { color: #ff5a4a; animation: clockBeat 1s ease-in-out infinite; }
@keyframes clockBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.1); } }
/* the results: what the raid cost */
.rused { display: grid; justify-items: center; gap: 6px; margin: 2px 0 4px; }
.rused small { font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rurow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.ru { position: relative; width: 40px; height: 47px; border-radius: 8px; overflow: hidden; background: #141c28; border: 1px solid #263244; display: grid; place-items: center; }
.ru.hero { border-color: rgba(242, 179, 61, 0.7); }
.ru img { width: 40px; height: 47px; object-fit: cover; display: block; }
.ru .cico { width: 34px; height: 34px; }
.ru b { position: absolute; left: 2px; top: 2px; font: 800 10px var(--display); background: rgba(0, 0, 0, 0.78); border-radius: 5px; padding: 1px 3px; color: #fff; }
#bt-loot:empty { display: none; }
#bt-loot small { align-self: center; font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bt-btns { display: flex; gap: 6px; }
#deploy { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px; background: rgba(6, 8, 12, 0.8); border: 1px solid var(--edge); border-radius: 16px; scrollbar-width: thin; }
.dcard { position: relative; flex: none; width: 70px; height: 98px; padding: 0; background: #141c28; border: 2px solid #263244; border-radius: 12px; cursor: pointer; color: var(--ink); }
.dcard img { width: 66px; height: 77px; display: block; border-radius: 9px; }
.dcard span { position: absolute; left: 0; right: 0; bottom: 3px; font: 700 10px var(--display); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.dcard .cnt { position: absolute; top: 3px; left: 3px; background: rgba(0, 0, 0, 0.75); font: 800 11px var(--display); padding: 2px 5px; border-radius: 7px; }
.dcard.on { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(46, 230, 214, 0.35), 0 0 18px rgba(46, 230, 214, 0.45); }
.dcard.hero { border-color: rgba(242, 179, 61, 0.7); }
.dcard.hero.on { border-color: var(--gold); box-shadow: 0 0 18px rgba(242, 179, 61, 0.55); }
/* an ability ready: a golden glow pulsing round the card (its opacity animated, so the browser's compositor runs it
   without repainting the card every frame) */
.dcard.ability { border-color: var(--gold); box-shadow: 0 0 6px rgba(242, 179, 61, 0.4); }
.dcard.ability::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; pointer-events: none; box-shadow: 0 0 22px rgba(242, 179, 61, 0.9); opacity: 0; animation: pulse 1s infinite alternate; }
.dcard.ability .cnt { background: var(--gold); color: #2a1700; }
.dcard.empty { opacity: 0.35; filter: grayscale(1); }
/* a hero on the field: health under the portrait, the ability's time running down over it (a wedge in the hero's
   colour that sweeps away clockwise), the badge reading TAP, ACTIVE, used or KO */
.dcard .hp { position: absolute; left: 6px; right: 6px; top: 69px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.72); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); overflow: hidden; display: none; }
.dcard.field .hp { display: block; }
.dcard .hp b { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(#9dff7a, #2fbf3a); transition: width 0.2s ease-out; }
.dcard .hp.mid b { background: linear-gradient(#ffe27a, #e8b02a); }
.dcard .hp.low b { background: linear-gradient(#ffb07a, #ff4a3a); }
.dcard.active { border-color: var(--hc, var(--gold)); box-shadow: 0 0 16px var(--hca, rgba(242, 179, 61, 0.5)); }
.dcard.active::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: conic-gradient(rgba(4, 6, 10, 0.58) 0 var(--abd, 0%), var(--hcs, rgba(242, 179, 61, 0.22)) var(--abd, 0%) 100%); }
.dcard.active .cnt { background: var(--hc, var(--gold)); color: #08131a; }
.dcard.spent:not(.active) .cnt { background: rgba(0, 0, 0, 0.75); color: #9aa6b8; }
.dcard.contract .cicon { width: 66px; height: 77px; display: grid; place-items: center; font: 900 30px var(--display); color: var(--c); background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.1), transparent 68%); }
.cico { display: block; width: 54px; height: 54px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
/* troop level, bottom left of the portrait (gold when maxed), as on Clash's army bar */
.dcard .lv { position: absolute; left: 4px; top: 54px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 6px; font: 800 11px/17px var(--display); font-style: normal; text-align: center; color: #fff;
  background: linear-gradient(#3a3f6e, #1d2142); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.dcard .lv.max { background: linear-gradient(#ffe48a, #e3a01c); color: #2a1700; border-color: #fff4c8; }
@keyframes pulse { from { opacity: 0; } to { opacity: 1; } }
.pad { padding: 8px 12px; margin: 0; }
#results { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2, 4, 8, 0.6); z-index: 25; padding: 16px; }
.rbox { width: min(440px, 100%); text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px; box-shadow: 0 30px 80px var(--shadow); }
.rbox h2 { font-size: 30px; }
.rbox.win h2 { color: var(--gold); } .rbox.lose h2 { color: var(--red); }
.rstars { display: flex; justify-content: center; gap: 6px; margin: 10px 0; }
.rstars .star { width: 54px; height: 54px; }
.pct { font: 800 18px var(--display); margin: 4px 0; }
.rloot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0 16px; font: 800 18px var(--body); }
.rloot .i { width: 20px; height: 20px; }

/* guide, toasts, splash */
#guide { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 110px); display: flex; align-items: flex-end; gap: 8px; max-width: min(540px, calc(100% - 24px)); z-index: 30; }
#g-img { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--teal); background: #0d131c; flex: none; box-shadow: 0 0 24px rgba(46, 230, 214, 0.4); }
.bubble { background: rgba(10, 14, 21, 0.97); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 12px 14px; box-shadow: 0 18px 40px var(--shadow); display: grid; gap: 6px; justify-items: start; }
.bubble b { font: 800 12px var(--display); color: var(--teal); letter-spacing: 0.14em; text-transform: uppercase; }
.bubble p { margin: 0; font-weight: 600; font-size: 16px; }
#toasts { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 120px); display: grid; gap: 6px; justify-items: center; z-index: 40; pointer-events: none; width: min(520px, calc(100% - 32px)); }
.toast { background: rgba(10, 14, 21, 0.95); border: 1px solid var(--edge); border-radius: 12px; padding: 8px 14px; font-weight: 700; box-shadow: 0 10px 24px var(--shadow); transition: opacity 0.4s, transform 0.4s; text-align: center; }
.toast.out { opacity: 0; transform: translateY(8px); }
.float { position: absolute; transform: translate(-50%, 0); font: 900 18px var(--display); text-shadow: 0 2px 6px #000; pointer-events: none; animation: rise 1.1s ease-out forwards; z-index: 40; }
@keyframes rise { to { transform: translate(-50%, -50px); opacity: 0; } }
#splash { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(22px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(5, 8, 12, 0.6) 0%, rgba(5, 8, 12, 0) 30%, rgba(5, 8, 12, 0) 66%, rgba(5, 8, 12, 0.92) 100%),
    var(--splash-bg, none) center bottom / cover no-repeat,
    radial-gradient(900px 500px at 50% 40%, rgba(46, 230, 214, 0.16), transparent 70%), #07090d; }
.sp-top, .sp-bottom { display: grid; justify-items: center; gap: 8px; text-align: center; }
.sp-kicker { margin: 0; font: 700 12px var(--display); letter-spacing: 0.32em; text-transform: uppercase; color: #bfeee9; text-shadow: 0 2px 8px #000; }
#splash-img { width: min(760px, 86vw); max-height: 24vh; object-fit: contain; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)); }
.sp-tag { font: 700 clamp(15px, 2.2vw, 20px) var(--display); margin: 0; letter-spacing: 0.06em; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.sp-bottom .btn.big { font-size: 22px; padding: 17px 54px 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.35); }
.sp-note { color: #b9c3d2; margin: 0; font-size: 13px; text-shadow: 0 1px 4px #000; }
@media (max-aspect-ratio: 1/1) {
  #splash { background: radial-gradient(700px 420px at 50% 22%, rgba(46, 230, 214, 0.14), transparent 70%),
      linear-gradient(180deg, #07090d 0%, #07090d 40%, rgba(7, 9, 13, 0) 52%, rgba(7, 9, 13, 0) 74%, rgba(5, 8, 12, 0.92) 100%),
      var(--splash-bg, none) center bottom / auto 64% no-repeat, #07090d; }
  .sp-top { margin-top: 15vh; }
}
/* 1.23: the key art carries the kicker, the logo and the tagline itself (SPRITES.splashTitled): wider than tall, it is
   shown whole from its top, the page's own title kept in place but unseen, and only its foot darkened under the
   buttons; held upright, the page's title stands over the art below its tagline (the painted logo would not fit) */
#splash.titled { background: linear-gradient(180deg, rgba(5, 8, 12, 0) 0%, rgba(5, 8, 12, 0) 70%, rgba(5, 8, 12, 0.88) 100%),
    var(--splash-bg, none) center top / cover no-repeat, #07090d; }
#splash.titled .sp-top { visibility: hidden; }
/* a log-in or confirm form open on a short screen: the unseen title gives up its room, and the screen scrolls if the
   form is still taller (on a phone held sideways the Log in button was below the screen, out of reach) */
#splash { overflow-y: auto; }
#splash.titled:has(.login:not([hidden])) { justify-content: flex-end; }
#splash.titled:has(.login:not([hidden])) .sp-top { display: none; }
/* ...and solid: on a phone held sideways the form sits over the painted logo, which showed through its 8% of glass */
#splash.titled .login { background: #080b11; }
@media (max-aspect-ratio: 1/1) {
  #splash.titled { background: radial-gradient(700px 420px at 50% 22%, rgba(46, 230, 214, 0.14), transparent 70%),
      linear-gradient(180deg, #07090d 0%, #07090d 34%, rgba(7, 9, 13, 0) 46%, rgba(7, 9, 13, 0) 72%, rgba(5, 8, 12, 0.9) 100%),
      var(--splash-tall, none) center bottom / auto 66% no-repeat, #07090d; }
  #splash.titled .sp-top { visibility: visible; }
  #splash.titled:has(.login:not([hidden])) { justify-content: space-between; }
  #splash.titled:has(.login:not([hidden])) .sp-top { display: grid; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .sp-kicker { display: none; }
  #splash-img { max-height: 19vh; }
  .sp-tag { font-size: 13px; }
  .sp-bottom .btn.big { font-size: 17px; padding: 12px 40px 10px; }
  .sp-note { font-size: 11px; }
}
@media (max-width: 640px) {
  .chip { font-size: 11px; padding: 5px 8px; }
  #b-raid { font-size: 17px; padding: 14px 20px 12px; }
  .hb-right .btn { padding: 11px 11px 9px; font-size: 12px; }
  .modal { align-items: flex-end; padding: 0; }
  .mpanel { border-radius: 20px 20px 0 0; max-height: 88%; }
  #bt-name { max-width: 60%; } #bt-time { font-size: 22px; }
  .bt-btns { flex-direction: column; align-items: flex-end; }
  #bt-name .avl small { font-size: 9px; letter-spacing: 0.1em; }
  #bt-name .ar { font-size: 15px; } #bt-name .offer { font-size: 11px; gap: 2px 8px; }
  .hcard { grid-template-columns: 84px 1fr; } .hcard img { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .dcard.ability::before { animation: none; opacity: 0.6; } .float { animation-duration: 0.01s; } }

/* online play: account, trophies, shields, battle log, leaderboard, overlays */
#chip-trophy:hover, #b-log:hover, #chip-devs:hover { border-color: var(--line); }
.chip.shield { color: #7ffff2; border-color: rgba(46, 230, 214, 0.45); }
#b-log { position: relative; }
.badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff;
  font: 800 11px/20px var(--display); letter-spacing: 0; box-shadow: 0 0 0 2px #05070b; }
#netbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top, 0px)) + 58px); z-index: 60;
  background: var(--red-d); color: #fff; border: 1px solid var(--red); border-radius: 999px; padding: 6px 14px; font: 700 13px var(--display); box-shadow: 0 8px 20px var(--shadow); pointer-events: none; }
#busy { position: absolute; inset: 0; z-index: 56; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(2, 4, 8, 0.55); }
#busy-text { margin: 0; font: 700 16px var(--display); text-shadow: 0 2px 6px #000; text-align: center; padding: 0 16px; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(46, 230, 214, 0.2); border-top-color: var(--teal); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#attack { position: absolute; inset: 0; z-index: 48; display: grid; place-items: center; background: rgba(40, 4, 6, 0.74); padding: 16px; }
.abox { width: min(440px, 100%); display: grid; gap: 10px; text-align: center; background: var(--panel); border: 2px solid var(--red); border-radius: 22px; padding: 24px 18px; box-shadow: 0 0 60px rgba(255, 74, 58, 0.35); }
.abox h2 { color: var(--red); font-size: 22px; }
.abox p { margin: 0; color: #c5cfdc; font-weight: 500; }
.abox .atime { font: 800 16px var(--display); color: var(--ink); }
.login { width: min(380px, 100%); display: grid; gap: 10px; text-align: left; background: rgba(8, 11, 17, 0.92); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: 0 20px 50px var(--shadow); }
.ltabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ltab { font: 700 12px var(--display); letter-spacing: 0.04em; color: var(--muted); background: var(--panel2); border: 1px solid var(--edge); padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.ltab.on { color: #06201d; background: var(--teal); border-color: var(--teal); }
.login label { display: grid; gap: 4px; }
.login label span { font: 700 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.login input { font: 600 17px var(--body); color: var(--ink); background: #0a0f17; border: 1px solid #263244; border-radius: 10px; padding: 10px 12px; min-width: 0; user-select: text; -webkit-user-select: text; }
.login input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.2); }
.lmsg { min-height: 1.3em; margin: 0; color: var(--gold); font-size: 14px; }
.login .btn.big { width: 100%; font-size: 18px; padding: 14px 20px 12px; }
.login .sp-note { text-align: center; }
.login .vwho { margin: 0; color: #dfe6ee; font-size: 14px; line-height: 1.45; }
.linkish { background: none; border: 0; padding: 0; color: #7ffff2; font: inherit; text-decoration: underline; cursor: pointer; }
#bt-name .tag { justify-self: start; font: 800 10px var(--display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: #06201d; background: var(--teal); border-radius: 6px; padding: 2px 6px; }
#bt-name .tag.red { background: var(--red); color: #fff; }
.raidlinks { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.rbox .warn { color: var(--gold); }
.rbox .spinner { margin: 6px auto 14px; }
.loglist { display: grid; gap: 8px; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; background: var(--panel2); border: 1px solid var(--edge); border-left: 4px solid var(--muted); border-radius: 12px; padding: 10px 12px; }
.lrow.good { border-left-color: var(--green); } .lrow.bad { border-left-color: var(--red); }
.lmain { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.lmain b { font: 800 15px var(--display); overflow-wrap: anywhere; }
.lmain .stars { margin-left: 0; }
.lmain .pct { font-size: 14px; margin: 0; }
.lsub { grid-column: 1; color: #c5cfdc; font-weight: 500; font-size: 14px; }
.lbtns { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.board { display: grid; gap: 4px; margin-bottom: 10px; }
.brow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--edge); }
.brow.me { border-color: var(--teal); background: rgba(46, 230, 214, 0.08); }
.brow .rk { font: 900 14px var(--display); color: var(--muted); text-align: center; }
.brow:nth-child(1) .rk { color: var(--gold); } .brow:nth-child(2) .rk { color: #d8dee8; } .brow:nth-child(3) .rk { color: #e0955a; }
.brow b { font: 700 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .tr { font: 800 15px var(--display); color: var(--gold); display: inline-flex; align-items: center; }
.acct { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel2); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; font-weight: 500; }
@media (max-width: 640px) {
  .lrow { grid-template-columns: minmax(0, 1fr); } .lbtns { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .brow { grid-template-columns: 30px minmax(0, 1fr) auto; } .brow .muted { display: none; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* phones: Log and Menu shrink to icons so the bottom bar fits */
.bi { display: none; width: 20px; height: 20px; }
.modal:not([hidden]) ~ #guide, #chat:not([hidden]) ~ #guide { display: none !important; }
@media (max-width: 480px) {
  .btn.iconish .bl { display: none; }
  .btn.iconish .bi { display: block; }
  .hb-right .btn.iconish { padding: 10px 10px 8px; }
  #hud-bottom, .hb-right { gap: 6px; }
  #b-raid { font-size: 16px; padding: 14px 16px 12px; }
  .hb-right .btn { padding: 11px 10px 9px; }
}
#idle { position: absolute; inset: 0; z-index: 47; display: grid; place-items: center; background: rgba(2, 4, 8, 0.72); padding: 16px; }
.abox.idlebox { border-color: var(--teal); box-shadow: 0 0 60px rgba(46, 230, 214, 0.25); justify-items: center; }
.abox.idlebox h2 { color: var(--teal); }

/* ---------------------------------------------------------------- motion: a little life in the interface */
.btn { transition: transform 0.09s ease-out, filter 0.15s ease-out, box-shadow 0.15s ease-out; }
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.1); } }
.btn:active:not(:disabled) { transform: translateY(2px) scale(0.96); }
.dcard { transition: transform 0.1s ease-out; }
.dcard:active { transform: scale(0.93); }
.res { transform-origin: 80% 50%; }
.res.bump { animation: resBump 0.38s cubic-bezier(0.3, 1.7, 0.5, 1); }
.res.bump .ico { animation: icoTwist 0.38s ease-out; }
@keyframes resBump { 0% { transform: scale(1); } 30% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes icoTwist { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg) scale(1.15); } 70% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
#sheet.in { animation: sheetIn 0.26s cubic-bezier(0.2, 1.35, 0.4, 1); }
/* 1.28: a building being dragged: its sheet steps out of the way until it is let go */
#sheet { transition: opacity 0.16s ease-out; }
#sheet.moving { opacity: 0; pointer-events: none; }
@keyframes sheetIn { from { transform: translateX(-50%) translateY(22px) scale(0.96); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.modal:not([hidden]) { animation: fadeIn 0.18s ease-out; }
.modal:not([hidden]) .mpanel { animation: panelIn 0.26s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes panelIn { from { transform: translateY(18px) scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { animation: toastIn 0.3s cubic-bezier(0.2, 1.35, 0.4, 1); }
@keyframes toastIn { from { transform: translateY(-12px) scale(0.92); opacity: 0; } }
#bt-stars .sts { display: flex; align-items: center; gap: 2px; }
#bt-stars .star.pop { animation: starPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes starPop { 0% { transform: scale(0.2) rotate(-50deg); } 55% { transform: scale(1.6) rotate(12deg); filter: drop-shadow(0 0 8px #ffd23a); } 100% { transform: scale(1) rotate(0); } }
#results:not([hidden]) .rbox { animation: panelIn 0.34s cubic-bezier(0.2, 1.3, 0.4, 1); }
.rstars .star { animation: starPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.rstars .star:nth-child(1) { animation-delay: 0.25s; } .rstars .star:nth-child(2) { animation-delay: 0.5s; } .rstars .star:nth-child(3) { animation-delay: 0.75s; }
.rstars .star:not(.on) { animation-name: starIn; }
@keyframes starIn { from { transform: scale(0.4); opacity: 0; } }
.rbox.win h2 { animation: winGlow 1.6s ease-in-out 0.6s infinite alternate; }
@keyframes winGlow { from { text-shadow: 0 0 0 rgba(242, 179, 61, 0); } to { text-shadow: 0 0 18px rgba(242, 179, 61, 0.65); } }
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.seg .btn.on { box-shadow: 0 0 0 2px rgba(46, 230, 214, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .btn, .dcard { transition: none; }
  .res.bump, .res.bump .ico, #sheet.in, .modal:not([hidden]), .modal:not([hidden]) .mpanel, .toast, #bt-stars .star.pop,
  #results:not([hidden]) .rbox, .rstars .star, .rbox.win h2, #bt-time.low { animation: none; }
}
#splash:not([hidden]) #splash-img { animation: logoFloat 4.5s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#splash:not([hidden]) #b-play:not([hidden]) { animation: playPulse 1.9s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(242, 179, 61, 0); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 26px 4px rgba(242, 179, 61, 0.45); } }
@media (prefers-reduced-motion: reduce) { #splash:not([hidden]) #splash-img, #splash:not([hidden]) #b-play:not([hidden]) { animation: none; } }

/* ---------------------------------------------------------------- raid banners: stars earned, hero abilities, victory */
.starban { position: absolute; left: 50%; top: 27%; z-index: 24; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none;
  animation: banIn 0.42s cubic-bezier(0.2, 1.55, 0.4, 1); }
.starban .rays { position: absolute; top: 52px; left: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 215, 106, 0.34) 0 9deg, rgba(255, 215, 106, 0) 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  animation: raySpin 5s linear infinite; transition: opacity 0.25s; }
.starban svg { position: relative; width: 104px; height: 104px; fill: #ffd23a; stroke: #7a4a00; stroke-width: 1.1; filter: drop-shadow(0 0 18px rgba(255, 210, 58, 0.85));
  transition: transform 0.58s cubic-bezier(0.55, 0, 0.75, 0.2); }
.starban b { position: relative; font: 900 22px var(--display); color: #ffe7a0; letter-spacing: 0.06em; white-space: nowrap;
  text-shadow: 0 3px 0 #5a3500, 0 0 18px rgba(0, 0, 0, 0.85); transition: opacity 0.2s; }
.starban.fly .rays, .starban.fly b { opacity: 0; }
@keyframes banIn { from { opacity: 0; transform: translateX(-50%) scale(0.25) rotate(-12deg); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes raySpin { to { transform: rotate(360deg); } }
.abban { position: absolute; left: 0; top: 20%; z-index: 24; display: flex; align-items: center; gap: 12px; padding: 10px 40px 10px max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, rgba(8, 11, 17, 0.96), rgba(8, 11, 17, 0.88) 72%, rgba(8, 11, 17, 0)); border-top: 2px solid var(--hc); border-bottom: 2px solid var(--hc);
  pointer-events: none; animation: abIn 1.9s cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.abban img { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--hc); box-shadow: 0 0 22px var(--hc); object-fit: cover; background: #1b2230; }
.abban small { display: block; font: 700 12px var(--display); color: var(--hc); letter-spacing: 0.2em; text-transform: uppercase; }
.abban b { font: 900 28px var(--display); color: #fff; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 0 18px var(--hc), 0 3px 0 rgba(0, 0, 0, 0.6); }
@keyframes abIn { 0% { transform: translateX(-105%); } 16% { transform: translateX(0); } 82% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#results .rbox { position: relative; z-index: 1; }
.confetti i { position: absolute; top: -24px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: 0.92;
  animation: confettiFall var(--t) linear var(--d) infinite; }
@keyframes confettiFall { from { transform: translateY(-24px) rotate(var(--r)) rotateY(0deg); } to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)) rotateY(900deg); } }
.rloot em { font-style: normal; }
@media (max-width: 520px) { .abban b { font-size: 21px; } .abban img { width: 56px; height: 56px; } .starban b { font-size: 17px; } .starban svg { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .starban, .starban .rays, .abban, .confetti i { animation: none; } .confetti { display: none; } }

/* the clouds between screens: steam rolls in from the edges while a station is found and parts on it */
#clouds { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: auto; transition: opacity 0.12s; }
#clouds.out { pointer-events: none; }
#clouds .cl { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * -0.3);
  transform: translate(var(--fx), var(--fy)) scale(1.15); transition: transform 0.44s cubic-bezier(0.22, 0.85, 0.3, 1); filter: drop-shadow(0 10px 18px rgba(16, 34, 48, 0.28)); will-change: transform; }
#clouds .cl svg { display: block; width: 100%; height: auto; }
#clouds.in .cl { transform: translate(0, 0) scale(1); }
#clouds.out .cl { transform: translate(calc(var(--fx) * 1.15), calc(var(--fy) * 1.15)) scale(1.25); transition: transform 0.62s cubic-bezier(0.55, 0, 0.7, 0.4); }
#clouds .cfill { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #ffffff, #dde7ee 75%); opacity: 0; transition: opacity 0.16s; }
#clouds.in .cfill { opacity: 1; transition-delay: 0.3s; }
#clouds.out .cfill { opacity: 0; transition: opacity 0.1s; transition-delay: 0s; }
#clouds .ctext { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; opacity: 0; transition: opacity 0.18s; padding: 0 16px; text-align: center; }
#clouds.in .ctext { opacity: 1; transition-delay: 0.32s; }
#clouds.out .ctext { opacity: 0; transition-delay: 0s; transition-duration: 0.08s; }
#clouds .ctext b { font: 900 19px var(--display); color: #1d3140; letter-spacing: 0.06em; text-transform: uppercase; }
#clouds .ctext b:empty, #clouds .ctext b:empty + i { display: none; }
#clouds .ctext i { width: 46px; height: 8px; background: radial-gradient(circle, #2b8f86 0 3.5px, transparent 4px) 0 50% / 16px 8px repeat-x; animation: cloudDots 0.9s steps(3) infinite; }
@keyframes cloudDots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#clouds.cover .cl, #clouds.cover .cfill, #clouds.cover .ctext { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #clouds .cl, #clouds.out .cl { transition: none; transform: none; }
  #clouds.out { opacity: 0; transition: opacity 0.3s; }
  #clouds .ctext i { animation: none; }
}

/* ---------------------------------------------------------------- raid displays after Clash (1.13) */
/* your own storages in the raid's corner, filling up as you steal (FULL: the rest spills) */
#bt-loot { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; text-shadow: none; font: inherit; }
.bres { position: relative; display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; background: rgba(8, 11, 17, 0.84); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 6px 18px var(--shadow); }
.bres .ico .i { width: 22px; height: 22px; margin: 0; }
.bres .ico img.i.ri { width: 28px; height: 28px; margin: -3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.bres .rv { min-width: 62px; }
.bres .rv b { font-size: 14px; }
.bres.hash .meter span { background: var(--gold); } .bres.gas .meter span { background: #ecd630; }
.bres .meter span { transition: width 0.25s ease-out; }
.bres .gain { font: 800 11px var(--display); font-style: normal; color: #8dff7a; text-shadow: 0 1px 3px #000; }
.bres .gain:empty { display: none; }
.bres .fl { display: none; position: absolute; top: -8px; right: -5px; font: 800 9px/1 var(--display); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: var(--red); border-radius: 6px; padding: 3px 5px; box-shadow: 0 0 0 2px #05070b; }
.bres.full { border-color: rgba(255, 74, 58, 0.6); }
.bres.full .meter span { background: linear-gradient(90deg, #ff8a3a, #ff4a3a); }
.bres.full .fl { display: block; }
/* messages in the middle of a raid: red for can't, gold for news */
#notice { position: absolute; left: 50%; top: 31%; z-index: 23; transform: translateX(-50%); pointer-events: none; text-align: center; width: max-content; max-width: calc(100% - 32px);
  font: 900 23px/1.2 var(--display); letter-spacing: 0.03em; color: #ff5546; --o: #2e0402;
  text-shadow: 2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -2px 0 var(--o), 1.5px 1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px -1.5px 0 var(--o),
    0 4px 0 var(--o), 0 0 16px rgba(0, 0, 0, 0.75); }
#notice.gold { color: #ffd76a; --o: #3a2200; }
#notice.go { animation: noticeIn 1.8s ease-out forwards; }
@keyframes noticeIn { 0% { opacity: 0; transform: translateX(-50%) scale(0.7); } 10% { opacity: 1; transform: translateX(-50%) scale(1.07); }
  18% { transform: translateX(-50%) scale(1); } 75% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
/* confirmations (Surrender?, End battle?, Finish now?) */
.modal.narrow .mpanel { width: min(420px, 100%); }
.confirm { display: grid; gap: 12px; }
.confirm p { margin: 0; color: #c5cfdc; font-weight: 600; font-size: 16px; }
.confirm p b { color: var(--ink); }
.confirm .cf-stake { display: flex; align-items: center; gap: 4px; font: 800 15px var(--display); color: #c5cfdc; }
.confirm .cf-stake b.l { color: #ff8a7a; }
.cf-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* a hero whose ability is spent: grey portrait, live health bar (as on Clash's army bar) */
.dcard.spent:not(.active) img { filter: grayscale(1) brightness(0.82); }
/* troop levels on the results' Troops used row */
.ru .lv { position: absolute; left: 2px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 5px; font: 800 9px/13px var(--display); font-style: normal; text-align: center; color: #fff;
  background: linear-gradient(#3a3f6e, #1d2142); border: 1px solid rgba(255, 255, 255, 0.35); }
.ru .lv.max { background: linear-gradient(#ffe48a, #e3a01c); color: #2a1700; border-color: #fff4c8; }
@media (max-width: 640px) {
  #bt-loot { flex-direction: column; align-items: flex-end; gap: 4px; }
  .bres { padding: 3px 8px 3px 5px; } .bres .rv { min-width: 52px; } .bres .rv b { font-size: 12px; }
  #notice { font-size: 17px; top: 27%; }
}
@media (prefers-reduced-motion: reduce) { #notice.go { animation: none; } .bres .meter span { transition: none; } }

/* ---------------------------------------------------------------- station displays after Clash (1.13) */
/* a full storage says so on the resource bar */
.res.full .meter span { background: linear-gradient(90deg, #ff8a3a, #ff4a3a) !important; }
.res.full .rv i { color: #ffb39a; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
/* the Devs chip opens the Devs menu; the Shop shows how many more buildings you can put down */
#chip-devs { color: var(--ink); cursor: pointer; pointer-events: auto; }
#chip-devs:hover, #chip-devs.on { border-color: var(--line); }
#chip-devs.on { background: rgba(46, 230, 214, 0.16); }
#b-shop { position: relative; }
#devmenu { position: absolute; z-index: 7; box-sizing: border-box; top: calc(max(10px, env(safe-area-inset-top, 0px)) + 42px); right: max(12px, env(safe-area-inset-right, 0px));
  width: min(380px, calc(100% - 24px)); max-height: calc(100% - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 10px;
  background: rgba(7, 10, 15, 0.93); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px var(--shadow); animation: dmIn 0.2s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes dmIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
#devmenu header { position: sticky; top: -4px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 2px 6px; background: rgba(7, 10, 15, 0.97); }
#devmenu header b { font: 800 14px var(--display); display: inline-flex; align-items: center; gap: 4px; }
#devmenu header span { font: 700 12px var(--display); color: var(--muted); }
#devmenu h5 { margin: 8px 2px 4px; font: 800 11px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#devmenu h5.sg { color: #8dff7a; }
.dm-row { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; margin: 2px 0;
  background: rgba(255, 255, 255, 0.035); border: 1px solid transparent; border-radius: 10px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
button.dm-row:hover { border-color: var(--line); background: rgba(46, 230, 214, 0.07); }
.dm-i { width: 34px; height: 30px; display: grid; place-items: center; }
.dm-i img { max-width: 34px; max-height: 30px; object-fit: contain; }
.dm-i.card img { width: 26px; height: 30px; border-radius: 5px; object-fit: cover; }
.dm-i.dev .i { width: 20px; height: 20px; margin: 0; }
.dm-n { font: 700 14px var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-n em { font-style: normal; color: var(--muted); }
.dm-n small { display: block; font: 600 11px var(--body); color: var(--muted); }
.dm-row .cost { font-size: 14px; }
.dm-row.short .dm-n, .dm-row.short .cost { color: #ff8a7a; }
.dm-row.free { grid-template-columns: 34px 1fr; cursor: default; }
.dm-row.free .dm-n { color: #8dff7a; font-weight: 800; }
.dm-t { display: grid; justify-items: end; gap: 3px; font: 800 13px var(--display); font-variant-numeric: tabular-nums; }
.dm-t i { display: block; width: 64px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.dm-t i b { display: block; height: 100%; background: linear-gradient(90deg, #f2c230, #ffe27a); }
.dm-none { margin: 6px 2px; color: var(--muted); font-size: 14px; }
/* "Busy!" notes (an upgrading defense, a hero leveling up) */
.busy { margin: 6px 0 0; font-size: 13px; color: #ffcf8a; font-weight: 600; }
.busy b { color: #ff8a5a; }
/* the upgrade window: level bar, next level drawn, stat cards with the gain, Node unlocks, time + button */
.modal.upgd .mpanel { width: min(780px, 100%); }
.mpanel h2 em { font-style: normal; color: var(--gold); }
.lvbar { position: relative; height: 16px; border-radius: 8px; background: #1b2330; border: 1px solid var(--edge); overflow: hidden; margin: 0 0 12px; }
.lvbar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#7af27a, #2fae3a); }
.lvbar b { position: relative; display: block; text-align: center; font: 800 10px/16px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; }
.upg { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.upr { display: grid; gap: 12px; align-content: start; min-width: 0; }
.upr .unl { background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px; }
.upv { display: grid; gap: 8px; background: radial-gradient(circle at 50% 40%, rgba(46, 230, 214, 0.12), transparent 70%), var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px; }
.upv > img { width: 100%; max-width: 100%; aspect-ratio: 520 / 400; object-fit: contain; }
.upv.por > img { aspect-ratio: auto; max-height: 230px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); }
.upd { margin: 0; color: #c5cfdc; font-weight: 500; font-size: 14px; }
.upd b { color: var(--ink); }
.upd.newlook { margin-bottom: 6px; }
.upd.newlook b { color: #ffd76a; margin-right: 6px; }
.scg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.sc.up { background: linear-gradient(rgba(122, 242, 122, 0.12), rgba(122, 242, 122, 0.04)); border-color: rgba(122, 242, 122, 0.4); }
.sc .sci .i, .sc .sci img.i { width: 28px; height: 28px; margin: 0; vertical-align: middle; }
.scv { display: grid; gap: 2px; min-width: 0; }
.scv small { font: 700 10px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scv b { font: 800 16px var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scv b em { font-style: normal; color: #7af27a; margin-left: 6px; font-size: 14px; }
.sc.fixed .scv b { font: 700 15px var(--body); }
.scb { position: relative; display: block; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin-top: 2px; }
.scb span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #8a94a6; }
.scb span.nx { background: #7af27a; }
.unl { display: grid; gap: 6px; }
.unl small, .unl p { font: 700 10px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.unl p { text-transform: none; letter-spacing: 0; font: 600 13px var(--body); }
.unr { display: flex; flex-wrap: wrap; gap: 6px; }
.ut { position: relative; width: 52px; height: 46px; border-radius: 9px; background: #182130; border: 1px solid #2a3648; display: grid; place-items: center; }
.ut img { max-width: 48px; max-height: 42px; object-fit: contain; }
.ut.card img { width: 38px; height: 44px; border-radius: 6px; object-fit: cover; }
.ut .cico { width: 38px; height: 38px; }
.ut i { position: absolute; left: -3px; top: -6px; font: 800 9px/1 var(--display); font-style: normal; text-transform: uppercase; color: #06201d; background: #9dfcef; border-radius: 5px; padding: 2px 4px; box-shadow: 0 0 0 2px #0d131c; }
.ut i.new { background: #ffd23a; color: #2a1700; }
.upwarn { margin: 10px 0 0; font-weight: 600; font-size: 14px; color: #ffcf8a; }
.upbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.upbar .btn.ghost { margin-right: auto; }
.uptime { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; padding: 6px 12px; border-radius: 12px; background: #141c28; border: 1px solid var(--edge); color: var(--ink); }
.uptime .i { grid-row: span 2; width: 22px; height: 22px; margin: 0; }
.uptime small { font: 700 10px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.uptime b { font: 800 15px var(--display); }
.btn.short .cost, .btn.short .cost.short { color: #7a0a05; }
.btn.short { filter: saturate(0.6); }
@media (max-width: 640px) {
  .upg { grid-template-columns: 1fr; }
  .upv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .upv > img { grid-row: span 2; }
  .upv.por > img { max-height: 150px; }
  .scg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sc { grid-template-columns: 24px minmax(0, 1fr); padding: 6px 8px; gap: 6px; }
  .sc .sci .i, .sc .sci img.i { width: 22px; height: 22px; }
  .scv b { font-size: 14px; } .scv b em { font-size: 12px; margin-left: 4px; }
  .upbar .btn.big { font-size: 15px; padding: 12px 16px 10px; }
  #devmenu { max-height: calc(100% - 170px); }
}
@media (prefers-reduced-motion: reduce) { #devmenu { animation: none; } }

/* 1.14: guests and accounts, crews, chat */
.tag { display: inline-block; font: 800 9px/1.5 var(--display); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 5px; padding: 1px 5px; color: #06201d; background: var(--teal); vertical-align: 1px; }
.tag.gold, .tag.gen { color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); }
.tag.mod { color: #fff; background: #5b4fd1; }
.tag.role { color: #bfeee9; background: rgba(46, 230, 214, 0.16); border: 1px solid rgba(46, 230, 214, 0.35); }
.cbadge { flex: none; display: inline-block; vertical-align: middle; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5)); }
.warn { color: var(--gold); }
.center { text-align: center; }

/* the chat tab on the station's left edge, and the drawer it opens */
#chat-tab { position: absolute; left: 0; top: 44%; transform: translateY(-50%); z-index: 6; pointer-events: auto; display: grid; justify-items: center; gap: 2px;
  padding: 10px 8px 8px max(8px, env(safe-area-inset-left, 0px)); color: var(--teal); background: rgba(8, 11, 17, 0.9); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 16px 16px 0; box-shadow: 0 8px 22px var(--shadow); cursor: pointer; font: 800 9px var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
#chat-tab svg { width: 26px; height: 26px; }
#chat-tab:hover, #chat-tab.on { color: #7ffff2; background: rgba(13, 19, 28, 0.96); }
#chat-tab .badge { top: -6px; right: -8px; }
.badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -3px; right: -3px; }
#chat { position: absolute; left: 0; top: 0; bottom: 0; z-index: 18; width: min(400px, 100%); display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top, 0px)) 0 max(10px, env(safe-area-inset-bottom, 0px)) max(0px, env(safe-area-inset-left, 0px));
  background: rgba(8, 11, 17, 0.96); border-right: 1px solid var(--line); box-shadow: 18px 0 50px rgba(0, 0, 0, 0.55); animation: chatIn 0.22s cubic-bezier(0.2, 1, 0.3, 1); }
@keyframes chatIn { from { transform: translateX(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #chat { animation: none; } }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 8px 12px; border-bottom: 1px solid var(--edge); }
.ch-tabs { display: flex; gap: 6px; }
.ch-tab { position: relative; font: 800 13px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--panel2);
  border: 1px solid var(--edge); border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.ch-tab.on { color: #06201d; background: var(--teal); border-color: var(--teal); }
.ch-tab .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #05070b; }
.ch-tab .badge { top: -8px; right: -8px; }
#ch-crew { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--edge); background: rgba(46, 230, 214, 0.05); }
.ch-crewbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; padding: 0; font: inherit; }
.ch-crewbtn span { display: grid; min-width: 0; }
.ch-crewbtn b { font: 800 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-crewbtn small { color: var(--muted); font-weight: 600; }
.ch-crewbtn i { margin-left: auto; font: 700 12px var(--body); font-style: normal; color: #7ffff2; white-space: nowrap; }
#ch-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; user-select: text; -webkit-user-select: text; }
#ch-list > :first-child { margin-top: auto; }
.cm { background: var(--panel2); border: 1px solid var(--edge); border-radius: 12px; padding: 7px 10px 8px; cursor: pointer; }
.cm:hover, .cm:focus-visible { border-color: rgba(46, 230, 214, 0.35); outline: none; }
.cm.me { border-color: rgba(46, 230, 214, 0.3); background: #10202a; }
.cm-h { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.cm-n { font: 800 13px var(--display); color: #ffd77a; overflow-wrap: anywhere; }
.cm.me .cm-n { color: #7ffff2; }
.cm-crew { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.cm-h time { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.cm-t { margin: 2px 0 0; font-weight: 500; font-size: 15px; line-height: 1.35; color: #e6ecf3; overflow-wrap: anywhere; }
.cm.sys { display: flex; gap: 8px; justify-content: center; align-items: baseline; background: none; border: 0; padding: 2px 6px; cursor: default; text-align: center;
  color: #9fd8d2; font-size: 13px; font-weight: 600; font-style: italic; }
.cm.sys time { font-size: 11px; color: var(--muted); font-style: normal; }
.cm-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ch-empty { text-align: center; margin: auto 0 8px; }
.ch-muted { margin: 4px 0 0; text-align: center; color: var(--gold); font-size: 13px; }
#ch-form { display: flex; gap: 8px; padding: 8px 10px 0; border-top: 1px solid var(--edge); }
#ch-input, .fld input, .fld textarea, .cf-search input, .cr-ask input, .lshare input, .cr-link input, .lay-paste input, .lc-form input, .lay-share textarea { flex: 1; min-width: 0; font: 600 16px var(--body); color: var(--ink); background: #0a0f17; border: 1px solid #263244;
  border-radius: 10px; padding: 9px 12px; user-select: text; -webkit-user-select: text; }
#ch-input:focus, .fld input:focus, .fld textarea:focus, .cf-search input:focus, .cr-ask input:focus, .lshare input:focus, .cr-link input:focus, .lay-paste input:focus, .lc-form input:focus, .lay-share textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.2); }
#ch-gate { padding: 10px 12px 0; border-top: 1px solid var(--edge); }
#ch-gate p { margin: 0 0 8px; font-weight: 500; color: #c5cfdc; }

/* crews: the finder (Crew tab with no crew), a crew's page, starting or editing one */
.cf { display: grid; gap: 10px; margin-top: 0 !important; }
.cf-hero { display: flex; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px 12px; }
.cf-hero b { font: 800 15px var(--display); }
.cf-hero p { margin: 2px 0 0; }
.cf-search { display: flex; gap: 8px; }
.cf-list { display: grid; gap: 6px; }
.crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--panel2);
  border: 1px solid var(--edge); border-radius: 12px; padding: 8px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.crow:hover { border-color: var(--line); background: #172231; }
.cr-main, .cr-side { display: grid; min-width: 0; }
.cr-main b { font: 800 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-main small, .cr-side small { color: var(--muted); font-weight: 600; font-size: 12px; }
.cr-side { justify-items: end; }
.cr-side b { font: 800 13px var(--display); }
.cf-new { width: 100%; }
.cr-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cr-info { flex: 1 1 260px; min-width: 0; display: grid; gap: 8px; }
.cr-descr { margin: 0; font-weight: 500; color: #dfe6ee; font-size: 16px; }
.cr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-chips span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; background: var(--panel2); border: 1px solid var(--edge); border-radius: 999px; padding: 3px 10px; }
.cr-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cr-note { color: var(--muted); font-weight: 700; }
.cr-ask { display: flex; gap: 8px; flex: 1; min-width: 0; }
.cr-reqs, .mlist { display: grid; gap: 6px; }
.cr-req { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--panel2); border: 1px solid rgba(242, 179, 61, 0.35); border-radius: 12px; padding: 8px 12px; }
.cr-req b { font: 800 14px var(--display); }
.cr-req small { display: block; color: var(--muted); font-weight: 600; }
.cr-req p { margin: 4px 0 0; font-weight: 500; font-style: italic; color: #dfe6ee; }
.cr-reqb { display: flex; gap: 6px; }
.mrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; background: var(--panel2); border: 1px solid var(--edge); border-radius: 12px; padding: 7px 10px; }
.mrow.me { border-color: rgba(46, 230, 214, 0.45); }
.mrow .rk { font: 800 13px var(--display); color: var(--muted); text-align: center; }
.mrow .mn { display: grid; min-width: 0; }
.mrow .mn b { font: 800 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .mn small { color: var(--muted); font-weight: 600; }
.mrow .mn .on { color: var(--green); font-style: normal; }
.mrow .mnode { color: var(--muted); font-size: 13px; }
.mrow .mt { font: 800 13px var(--display); display: inline-flex; align-items: center; gap: 2px; }
.mrow .macts { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.crf { display: grid; gap: 12px; }
.crf-top { display: flex; gap: 14px; align-items: center; }
.crf-badge { flex: none; width: 84px; display: grid; place-items: center; }
.crf-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.fld { display: grid; gap: 5px; }
.fld > span { font: 700 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fld textarea { resize: none; font-size: 15px; }
.fld input:disabled { opacity: 0.6; }
.swatches, .symbols { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); gap: 6px; }
.sw { aspect-ratio: 1; max-width: 100%; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.5); background: var(--c); cursor: pointer; }
.sw.on { box-shadow: 0 0 0 3px #fff; }
.sy { aspect-ratio: 1; max-width: 100%; border-radius: 10px; border: 1px solid var(--edge); background: var(--panel2); cursor: pointer; display: grid; place-items: center; padding: 6px; }
.sy svg { width: 100%; height: 100%; fill: #c5cfdc; }
.sy.on { background: var(--c); border-color: #fff; }
.sy.on svg { fill: #fff; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper b { min-width: 76px; text-align: center; font: 800 16px var(--display); display: inline-flex; align-items: center; justify-content: center; gap: 3px; }

/* guests: what needs an account, signing up, the inbox screen, which station to keep */
.gate { display: flex; gap: 14px; align-items: center; }
.gate img { flex: none; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--teal); background: #06201d; object-fit: cover; }
.gate p { margin: 0 0 6px; font-weight: 500; }
.gate-lead { font-size: 17px; color: var(--ink); font-weight: 700 !important; }
.gate-btns, .pend-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gate-btns .btn.big { flex: 1 1 140px; }
.suf { display: grid; gap: 10px; }
.suf p { margin: 0; }
.suf .btn.big { width: 100%; }
.pend { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pend p { margin: 0; font-weight: 500; }
.pend-ico { width: 72px; height: 72px; }
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.pick-card { display: grid; gap: 8px; align-content: start; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.pick-card.g { border-color: rgba(242, 179, 61, 0.45); }
.pick-card h3 { font-size: 15px; }
.pick-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-weight: 500; }
.pick-card li { display: flex; align-items: center; gap: 4px; }
.rcta { display: grid; gap: 6px; justify-items: center; margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: rgba(242, 179, 61, 0.1); border: 1px solid rgba(242, 179, 61, 0.45); }
.rcta b { font: 800 15px var(--display); color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.rcta p { margin: 0; font-weight: 500; font-size: 14px; }
.ropt.gated img { filter: saturate(0.6); }
.ropt b .tag { margin-left: 8px; }
.acct.guest { border-color: rgba(242, 179, 61, 0.45); }
.acct-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* 1.35: a base from the offline copy: the window's buttons, and its code */
.pick-go { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
textarea.code { width: 100%; box-sizing: border-box; resize: none; font: 500 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all;
  color: var(--ink); background: #0a0f17; border: 1px solid #263244; border-radius: 10px; padding: 8px 10px; user-select: text; -webkit-user-select: text; }
textarea.code:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.2); }
.btn.del-t { color: #FF8A80; }
.acrew { display: inline-flex; align-items: center; gap: 4px; }
.gate-note { color: #ffd77a; }
.bname { display: grid; min-width: 0; }
.bname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcrew { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.brow.crewrow { width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.bname.crewn { display: flex; align-items: center; gap: 8px; }
.brow.crewrow:hover { border-color: var(--line); }

/* the splash: Play straight away, Log in for members */
.sp-alt { margin: 0; color: #dfe6ee; font-weight: 600; font-size: 15px; text-shadow: 0 1px 4px #000; }
.sp-alt .linkish { font-weight: 800; }
.lhead { font-size: 15px; text-align: center; }
.lback { justify-self: center; font-size: 14px; }

@media (max-width: 560px) {
  #chat { width: 100%; border-right: 0; background: #080b11; }
  #chat-tab { top: 52%; padding: 8px 6px 6px max(6px, env(safe-area-inset-left, 0px)); }
  #chat-tab svg { width: 22px; height: 22px; }
  .mrow { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .mrow .mnode { display: none; }
  .gate { align-items: flex-start; }
  .gate img { width: 56px; height: 56px; }
  .crf-badge { width: 64px; }
}

/* 1.16: the profile card (tap the corner) */
.pf { display: grid; gap: 4px; }
.pf-head { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.pf-head .lvb { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); }
.pf-id { display: grid; gap: 6px; min-width: 0; }
.pf-id h3 { font-size: 19px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.pf-id p { margin: 0; }
.pf-crew { display: flex; align-items: center; gap: 6px; font: 700 14px var(--display); }
.pf-xp { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.pf-xp span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #1fa99d, #7ffff2); }
.pf-rename { display: flex; gap: 6px; }
.pf-rename input { flex: 1; min-width: 0; font: 700 15px var(--body); color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; user-select: text; -webkit-user-select: text; }
.pf-lg { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.pf-lg p { margin: 2px 0 0; }
.pf-lgn { font: 800 17px var(--display); }
.pf-tr { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.pf-tr b { font: 800 16px var(--display); color: var(--gold); margin-right: 4px; }
.lgladder { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.lgl { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 4px 0 3px; border-radius: 10px; opacity: 0.55; font: 700 9px var(--display); color: var(--muted); }
.lgl svg { width: 100%; max-width: 34px; height: auto; }
.pf-id h3 .linkish { font: 700 13px var(--body); }
.lgl.on { opacity: 1; background: rgba(46, 230, 214, 0.1); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pf-stats span { display: grid; gap: 1px; background: var(--panel2); border: 1px solid var(--edge); border-radius: 10px; padding: 7px 8px; font-size: 12px; color: var(--muted); text-align: center; }
.pf-stats b { font: 800 15px var(--display); color: var(--ink); }
.pf-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-btns:empty { display: none; }
.lgb.sm { margin-right: 3px; flex: none; }
@media (max-width: 420px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-head { grid-template-columns: 68px minmax(0, 1fr); } .pf-head .lvb { width: 68px; height: 68px; } }

/* 1.16: phones on their side and other short screens. The building sheet takes the bottom row's place (the Raid,
   Army and Shop buttons come back when it closes), raid cards shrink so the map shows, results fit */
@media (max-height: 500px) {
  #app.sheet-open #hud-bottom { display: none; }    /* ui.js sets it: :has() is missing before Safari 15.4 / Firefox 121 */
  #sheet { bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: min(640px, calc(100% - 24px)); padding: 9px 12px 10px; border-radius: 14px; }
  .sh-head { grid-template-columns: 46px 1fr auto; gap: 8px; }
  .sh-head img { width: 46px; height: 40px; }
  .sh-head h3 { font-size: 15px; }
  .sh-head > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .sh-head p { margin: 0; font-size: 13px; }
  #sheet .desc { margin: 4px 0; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  #sheet .stats span { font-size: 12px; padding: 2px 7px; }
  #sheet .acts { margin-top: 7px; gap: 6px; }
  #sheet .hint { display: none; }
  #hud-bottom { bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  #b-raid { font-size: 17px; padding: 12px 22px 10px; }
  .hb-right .btn { padding: 10px 12px 8px; }
  #guide { bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 62px); }
  #g-img { width: 56px; height: 56px; }
  .bubble { padding: 9px 12px; }
  #deploy { padding: 5px; gap: 5px; border-radius: 12px; bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
  .dcard { width: 54px; height: 72px; border-radius: 10px; }
  .dcard img { width: 50px; height: 57px; border-radius: 8px; }
  .dcard span { font-size: 8px; bottom: 2px; }
  .dcard .cnt { font-size: 10px; top: 2px; left: 2px; padding: 1px 4px; border-radius: 6px; }
  .dcard .lv { top: 38px; min-width: 16px; height: 16px; font-size: 10px; line-height: 14px; padding: 0 3px; }
  .dcard .hp { top: 50px; height: 5px; left: 4px; right: 4px; }
  .dcard.contract .cicon { width: 50px; height: 57px; }
  .dcard.contract .cico { width: 40px; height: 40px; }
  #bt-top { top: max(6px, env(safe-area-inset-top, 0px)); }
  #bt-name { padding: 5px 9px; border-radius: 11px; }
  #bt-name b { font-size: 13px; }
  #bt-name .ar { font-size: 14px; } #bt-name .ar .i { width: 16px; height: 16px; }
  #bt-right { gap: 4px; }
  #bt-time { font-size: 20px; }
  #bt-stars { padding: 3px 7px; } #bt-stars .star { width: 17px; height: 17px; } #bt-stars b { font-size: 13px; }
  .bres { padding: 2px 8px 2px 5px; } .bres .rv b { font-size: 12px; } .bres .ico img.i.ri { width: 22px; height: 22px; margin: -2px; }
  .bt-btns .btn.small { padding: 7px 9px 6px; font-size: 10px; }
  #results { padding: 8px; overflow-y: auto; }
  .rbox { padding: 12px 16px 14px; border-radius: 16px; }
  .rbox h2 { font-size: 23px; }
  .rstars { margin: 4px 0; } .rstars .star { width: 36px; height: 36px; }
  .pct { font-size: 15px; margin: 2px 0; }
  .rloot { margin: 6px 0 8px; font-size: 15px; gap: 10px; }
  .rused { margin: 0 0 2px; } .ru, .ru img { width: 32px; height: 38px; }
  .modal { align-items: center; }
  .mpanel { max-height: calc(100% - 16px); padding-top: 10px; }
}
/* very short (a small phone on its side): the raid's name panel loses its loot lines, which the corner repeats */
@media (max-height: 380px) {
  #bt-name .offer { display: none; }
  .dcard { width: 50px; height: 66px; } .dcard img { width: 46px; height: 52px; } .dcard .lv { top: 34px; } .dcard .hp { top: 46px; }
}
/* fingers: the small round buttons take a tap a little outside their edges */
@media (pointer: coarse) {
  #hud-top .chip, .x { position: relative; }
  #hud-top .chip::after, .x::after, #res-cu::after { content: ''; position: absolute; inset: -7px -3px; }
  /* 1.28: and so do every button and tab, to 44 px tall or so (the size Apple and Google give a finger) without
     growing on the screen: the small ones (Next, End battle, Music) by 7 px above and below, the rest by 4 (measured
     from inside the border: a button's 4 px bottom edge is made up below) */
  .btn, .tab { position: relative; }
  .btn::after, .tab::after { content: ''; position: absolute; inset: -4px -2px -8px; }
  .btn.small::after { inset: -7px -2px -11px; }
  .tab::after { inset: -8px -3px; }
  .x::after { inset: -7px -6px; }
}

/* 1.16: the loading screen, over everything until the game has started (no script needed to show it) */
#boot { position: absolute; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px;
  background: radial-gradient(800px 460px at 50% 42%, rgba(46, 230, 214, 0.12), transparent 70%), #07090d; transition: opacity 0.35s ease; }
#boot.out { opacity: 0; pointer-events: none; }
.boot-name { font: 900 clamp(30px, 7vw, 54px) var(--display); letter-spacing: 0.08em; color: #eaf0f6; text-shadow: 0 0 28px rgba(46, 230, 214, 0.35), 0 4px 0 #04211e; }
.boot-bar { position: relative; width: min(320px, 70vw); height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.boot-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, #1fa99d, #7ffff2); transition: width 0.25s ease-out; }
/* no figure yet (the single-file game, or before the loader starts): a light that runs along the bar */
.boot-bar i:not([style]) { width: 34%; animation: bootRun 1.3s ease-in-out infinite; }
@keyframes bootRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
#boot-note { margin: 0; font: 600 14px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 1.20: what is coming in (megabytes, then pictures), and word when it is slow or has gone wrong */
#boot-sub { min-height: 1.3em; margin-top: -8px; max-width: min(340px, 86vw); text-align: center; font: 600 12px var(--body); color: #7f8ea6; font-variant-numeric: tabular-nums; }
#boot-sub.slow { color: #f2c46a; }
#boot-reload { margin-top: 2px; }
#boot.bad .boot-bar i { background: linear-gradient(90deg, #b8332c, #ff6b5e); }
#boot.bad #boot-note { color: #ff9a8f; }
@media (prefers-reduced-motion: reduce) { .boot-bar i:not([style]) { animation: none; width: 100%; opacity: 0.4; } #boot { transition: none; } }

/* the menu's controls: two short lists side by side (one under the other on phones) */
.ctls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ctl { background: var(--panel2); border: 1px solid var(--edge); border-radius: 12px; padding: 9px 12px; }
.ctl b { font: 800 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.ctl ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; color: #c5cfdc; font-weight: 500; font-size: 14px; }
@media (max-width: 560px) { .ctls { grid-template-columns: minmax(0, 1fr); } }
.sp-load { display: grid; justify-items: center; gap: 5px; }
.sp-load .boot-bar { width: min(240px, 60vw); height: 6px; }
.sp-load small { font: 600 12px var(--body); color: #b9c3d2; text-shadow: 0 1px 4px #000; }

/* ---------------------------------------------------------------- the CU token and its store (1.17) */
/* the CU counter: a teal-edged plate that opens the store, a + on its left (Clash's gem counter), a glint now and then */
#res-cu { cursor: pointer; pointer-events: auto; position: relative; border-color: rgba(46, 230, 214, 0.38);
  box-shadow: inset 0 0 14px rgba(46, 230, 214, 0.10), 0 6px 18px var(--shadow); }
#res-cu:hover { border-color: rgba(46, 230, 214, 0.7); }
#res-cu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#res-cu .ico { position: relative; display: inline-flex; }
#res-cu .ico img.i.ri { width: 36px; height: 36px; margin: -5px -4px -5px -3px; }
.cu-plus { order: 3; display: grid; place-items: center; width: 22px; height: 22px; margin-right: auto; border-radius: 7px; font: 900 17px/1 var(--display);
  font-style: normal; color: #062b18; background: linear-gradient(#8dff9e, #2fcf5a); border-bottom: 3px solid #12702b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
#res-cu .rv { min-width: 70px; }
.cu-glint { position: absolute; left: 4px; top: -1px; width: 15px; height: 15px; pointer-events: none; opacity: 0;
  background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px #bffff8) drop-shadow(0 0 6px #2ee6d6); animation: cuGlint 6.5s ease-in-out 2s infinite; }
@keyframes cuGlint { 0%, 86%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 90% { opacity: 1; transform: scale(1.15) rotate(45deg); } 95% { opacity: 0.85; transform: scale(0.8) rotate(80deg); } }
@media (max-width: 600px) { #res-cu .ico img.i.ri { width: 30px; height: 30px; margin: -4px -3px -4px -2px; } .cu-plus { width: 19px; height: 19px; font-size: 15px; } #res-cu .rv { min-width: 62px; } }
@media (max-height: 500px) { #res-cu .ico img.i.ri { width: 28px; height: 28px; margin: -4px -3px -4px -2px; } .cu-plus { width: 18px; height: 18px; font-size: 14px; border-bottom-width: 2px; } #res-cu .rv { min-width: 62px; } }

/* the Shop's CU Tokens tab */
.tab.cu { display: inline-flex; align-items: center; gap: 4px; color: #bffcf5; border-color: rgba(46, 230, 214, 0.45);
  background: linear-gradient(135deg, rgba(46, 230, 214, 0.22), rgba(167, 123, 255, 0.18)); }
.tab.cu img.i.ri { width: 20px; height: 20px; margin: -3px 0; }
.tab.cu.on { color: #04201c; background: linear-gradient(135deg, #7ffff2, #2ee6d6 60%, #b49bff); }
.cu-store { display: grid; gap: 10px; }
.cu-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 50%, rgba(46, 230, 214, 0.32), rgba(46, 230, 214, 0) 55%), linear-gradient(120deg, #0f2a33, #141a2e 70%, #221640);
  border: 1px solid rgba(46, 230, 214, 0.35); }
.cu-hero { width: 96px; height: 96px; object-fit: contain; flex: none; margin: -8px -4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); animation: cuFloat 3.6s ease-in-out infinite; }
.cu-hero.ph { display: grid; place-items: center; } .cu-hero.ph img { width: 72px; height: 72px; }
@keyframes cuFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.cu-ht { display: grid; gap: 4px; min-width: 0; }
.cu-ht h3 { font-size: 20px; background: linear-gradient(#ffffff, #8ffff2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cu-ht p { margin: 0; color: #c5d6e2; font-size: 15px; }
.cu-have { font: 700 13px var(--body); color: var(--muted); } .cu-have b { font: 800 15px var(--display); color: var(--ink); }
.cu-have img.i.ri { width: 20px; height: 20px; }
.cu-test { position: absolute; top: 8px; right: 10px; font: 800 10px var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  color: #2a1700; background: #ffcf5a; padding: 4px 8px; border-radius: 6px; }
.cu-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cu-pack { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 8px 10px; border-radius: 16px; cursor: pointer; color: var(--ink); font: inherit; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 34%, #165a62 0%, #0d2a33 55%, #0a1420 100%); border: 1px solid rgba(46, 230, 214, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px var(--shadow); transition: transform 0.12s ease-out, border-color 0.15s; }
.cu-pack:hover { border-color: rgba(127, 255, 242, 0.75); transform: translateY(-2px); }
.cu-pack:active { transform: translateY(1px) scale(0.98); }
.cu-pack:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cu-pack.tagged { border-color: rgba(255, 207, 90, 0.55); }
.cu-art { width: 100%; aspect-ratio: 1; max-width: 150px; display: grid; place-items: center; margin-top: 4px; }
.cu-art img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.2); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); transition: transform 0.2s ease-out; }
.cu-pack:hover .cu-art img { transform: scale(1.27) rotate(-1deg); }
.cu-ph { display: grid; place-items: center; } .cu-ph img { width: 56px; height: 56px; } .cu-ph.big img { width: 96px; height: 96px; }
.cu-amt { display: inline-flex; align-items: center; gap: 2px; font: 900 18px var(--display); color: #fff; text-shadow: 0 2px 0 #052c30, 0 0 12px rgba(46, 230, 214, 0.6); }
.cu-amt img.i.ri { width: 24px; height: 24px; margin-right: 1px; }
.cu-amt.big { font-size: 24px; } .cu-amt.big img.i.ri { width: 32px; height: 32px; }
.cu-name { font: 700 12px var(--display); color: #a9e6e0; letter-spacing: 0.03em; }
.cu-more { font: 800 12px var(--body); color: #8dff9e; min-height: 16px; }
.cu-price { margin-top: 4px; width: 100%; padding: 9px 6px 7px; border-radius: 10px; font: 800 15px/1 var(--display); color: #2a1700;
  background: linear-gradient(#ffd77a, #e59b1c); border-bottom: 4px solid var(--gold-d); box-shadow: 0 4px 10px var(--shadow); }
.cu-price.off { color: #c7d0dc; background: #1f2733; border-bottom-color: #10151d; font-size: 12px; }
.cu-tag { position: absolute; top: 0; left: 0; z-index: 1; font: 800 10px var(--display); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal;
  color: #04201c; background: linear-gradient(#7ffff2, #2ee6d6); padding: 5px 10px 4px 9px; border-radius: 15px 0 10px 0; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.cu-tag.gold { color: #2a1700; background: linear-gradient(#ffe39a, #f2b33d); }
.cu-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(46, 230, 214, 0.08); border: 1px dashed rgba(46, 230, 214, 0.35); color: #c5d6e2; font-size: 14px; }
.cu-h4 { margin: 6px 0 0; }
.cu-tops { display: grid; gap: 8px; }
.cu-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.cu-tr { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; min-width: 120px; }
.cu-tr img.i.ri, .cu-tr .i { grid-row: span 2; width: 30px; height: 30px; margin: 0; }
.cu-tr b { font: 800 14px var(--display); } .cu-tr small { color: var(--muted); font-size: 12px; }
.cu-tbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; flex: 1 1 250px; min-width: 0; }
.cu-tb { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; cursor: pointer; color: var(--ink); font: inherit;
  background: #172231; border: 1px solid rgba(46, 230, 214, 0.25); border-bottom: 3px solid #0a1018; }
.cu-tb:hover:not(:disabled) { border-color: rgba(127, 255, 242, 0.6); }
.cu-tb b { font: 800 12px var(--display); } .cu-tb small { font: 700 12px var(--body); color: #c5d6e2; } .cu-tb span { font: 800 13px var(--body); color: #8ffff2; }
.cu-tb img.i.ri { width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; }
.cu-tb.short span { color: var(--red); }
.cu-tb:disabled { opacity: 0.5; cursor: not-allowed; }
.cu-fine { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
/* buying one */
.cu-buy { display: flex; align-items: center; gap: 12px; }
.cu-buy > img { width: 132px; height: 132px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.cu-buy p { margin: 6px 0 0; color: #c5cfdc; font-size: 15px; }
.cu-testline { color: #ffcf5a !important; font-size: 13px !important; }
.cu-buy + .cf-btns { margin-top: 14px; } .cu-buy ~ .cu-fine { margin-top: 10px; }
/* a phone: the Test mode badge goes above the title instead of over it */
@media (max-width: 600px) { .cu-test { position: static; order: -1; justify-self: start; margin-bottom: 2px; } }
@media (max-width: 420px) { .cu-buy { flex-direction: column; text-align: center; } .cu-buy + .cf-btns { justify-content: center; } .cu-buy ~ .cu-fine { text-align: center; }
  .cu-head { padding: 8px 10px; } .cu-hero { width: 72px; height: 72px; } .cu-ht p { font-size: 13px; } }
/* a phone on its side: a slim header and short cards, so a row of packs and their prices fit without scrolling */
@media (max-height: 500px) { .cu-head { padding: 6px 12px; gap: 10px; } .cu-hero { width: 48px; height: 48px; margin: -4px -2px; } .cu-ht h3 { font-size: 15px; } .cu-ht p { display: none; }
  .cu-test { position: absolute; top: 6px; margin: 0; }
  .cu-ht { grid-template-columns: auto auto; align-items: baseline; column-gap: 12px; }
  .cu-packs { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; } .cu-pack { padding: 4px 6px 7px; } .cu-art { max-width: 78px; margin-top: 0; }
  .cu-amt { font-size: 15px; } .cu-amt img.i.ri { width: 19px; height: 19px; } .cu-name, .cu-more { font-size: 11px; } .cu-more { min-height: 14px; }
  .cu-price { padding: 7px 4px 5px; font-size: 13px; border-bottom-width: 3px; }
  .cu-buy > img { width: 96px; height: 96px; } }
/* the CU arrive */
.cu-cele { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(10, 60, 66, 0.82), rgba(2, 4, 8, 0.9) 70%);
  animation: fadeIn 0.25s ease-out; }
.cu-cele.out { opacity: 0; transition: opacity 0.3s ease-in; }
.cu-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(127, 255, 242, 0.13) 0deg 7deg, rgba(127, 255, 242, 0) 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 42%); mask: radial-gradient(circle, #000 0%, transparent 42%); animation: cuSpin 18s linear infinite; }
@keyframes cuSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cu-cbox { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px; }
.cu-cimg { width: min(300px, 62vmin); height: min(300px, 62vmin); object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  animation: cuPop 0.7s cubic-bezier(0.2, 1.5, 0.35, 1) both; }
@keyframes cuPop { 0% { transform: scale(0.2) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.cu-cbox h2 { font-size: clamp(26px, 6vmin, 40px); color: #fff; text-shadow: 0 3px 0 #052c30, 0 0 22px rgba(46, 230, 214, 0.75); }
.cu-cname { margin: 0; font: 700 15px var(--display); color: #a9e6e0; letter-spacing: 0.05em; }
.cu-camt { display: inline-flex; align-items: center; gap: 4px; font: 900 clamp(30px, 8vmin, 52px) var(--display); color: #fff;
  text-shadow: 0 3px 0 #052c30, 0 0 18px rgba(46, 230, 214, 0.8); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.cu-camt em { font-style: normal; }
.cu-camt img.i.ri { width: 1.15em; height: 1.15em; }
.cu-fly { position: fixed; z-index: 70; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  transition: transform 0.62s cubic-bezier(0.5, -0.25, 0.75, 0.6), opacity 0.62s; filter: drop-shadow(0 0 8px rgba(46, 230, 214, 0.8)); }
.cu-fly img, .cu-fly .i { width: 100%; height: 100%; }
@media (max-height: 500px) { .cu-cimg { width: min(180px, 46vmin); height: min(180px, 46vmin); } }
@media (prefers-reduced-motion: reduce) { .cu-glint, .cu-hero, .cu-rays, .cu-cimg { animation: none; } .cu-glint { display: none; } }

/* paying with $CU or ETH (1.18) */
.cu-cxchip { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 0; padding: 2px 8px; border-radius: 999px; font: 800 11px var(--body); color: #e9ddff;
  background: linear-gradient(135deg, rgba(167, 123, 255, 0.28), rgba(46, 230, 214, 0.18)); border: 1px solid rgba(180, 155, 255, 0.45); }
.cu-cxchip b { font: 900 11px var(--display); color: #fff; }
.cu-cx { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(167, 123, 255, 0.14), rgba(46, 230, 214, 0.08)); border: 1px solid rgba(180, 155, 255, 0.35); }
.cu-cxh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cu-cxh span { font: 800 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #cdbdff; margin-right: auto; }
.cu-cxh b { display: inline-flex; align-items: center; font: 900 15px var(--display); color: #fff; } .cu-cxh b img.i.ri { width: 20px; height: 20px; }
.cu-cxh i { font: 800 11px var(--display); font-style: normal; color: #04201c; background: linear-gradient(#7ffff2, #2ee6d6); padding: 3px 7px; border-radius: 999px; }
.cu-cxadm { font: 800 10px var(--display); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #2a1700; background: #ffcf5a; padding: 3px 7px; border-radius: 6px; }
.cu-cxbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cu-cxb { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 9px 10px 8px; border-radius: 12px;
  cursor: pointer; color: var(--ink); font: inherit; background: #171e33; border: 1px solid rgba(180, 155, 255, 0.4); border-bottom: 4px solid #0b0f1c; min-width: 0; }
.cu-cxb:hover:not(:disabled) { border-color: rgba(214, 200, 255, 0.85); }
.cu-cxb:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.cu-cxb:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cu-cxb:disabled { opacity: 0.55; cursor: not-allowed; }
.cu-cxb b { font: 800 13px var(--display); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-cxb small { grid-column: 2; font: 700 13px var(--body); color: #cdbdff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-coin { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 10px var(--display); letter-spacing: -0.02em; }
.cx-coin.cu { color: #04201c; background: radial-gradient(circle at 35% 30%, #b8fff8, #2ee6d6 60%, #0b6e66); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 0 10px rgba(46, 230, 214, 0.45); }
.cx-coin.eth { color: #fff; background: radial-gradient(circle at 35% 30%, #c9b8ff, #7b5cf0 60%, #3b2a8c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 0 10px rgba(167, 123, 255, 0.45); }
.cu-cxnote { margin: 0; color: #b9c3d3; font-size: 13px; line-height: 1.35; }
.cx-help p a { color: #7ffff2; }
/* the payment sheet */
.cx-sheet { display: grid; gap: 12px; }
.cx-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--edge); }
.cx-head img { width: 76px; height: 76px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.cx-head div { display: grid; gap: 2px; min-width: 0; } .cx-head span { font: 800 15px var(--display); color: #fff; overflow-wrap: anywhere; } .cx-head small { color: #8dff9e; font: 700 13px var(--body); }
.cx-lead { margin: 0; font: 800 16px var(--display); color: #fff; }
.cx-fine { margin: 0; color: #b9c3d3; font-size: 14px; line-height: 1.4; } .cx-fine a { color: #7ffff2; }
.cx-line { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.cx-line b { font: 800 15px var(--display); letter-spacing: 0.02em; color: #fff; } .cx-line p { margin: 3px 0 0; color: #c5cfdc; font-size: 15px; line-height: 1.35; }
.cx-li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #172231; color: var(--teal); }
.cx-li svg { width: 18px; height: 18px; }
.cx-line.ok .cx-li { background: rgba(61, 255, 154, 0.15); color: var(--green); }
.cx-line.warn .cx-li { background: rgba(242, 179, 61, 0.16); color: var(--gold); }
.cx-line.no .cx-li { background: rgba(255, 106, 90, 0.14); color: #ff8a7a; }
.cx-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(46, 230, 214, 0.25); border-top-color: var(--teal); animation: cxSpin 0.8s linear infinite; }
@keyframes cxSpin { to { transform: rotate(360deg); } }
.cx-bar { height: 10px; border-radius: 999px; background: #172231; overflow: hidden; border: 1px solid var(--edge); }
.cx-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2ee6d6, #b49bff); transition: width 0.6s ease-out; }
.cx-ws { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cx-w { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--ink); font: inherit; text-decoration: none;
  background: #172231; border: 1px solid rgba(46, 230, 214, 0.3); border-bottom: 4px solid #0a1018; min-width: 0; }
.cx-w:hover { border-color: rgba(127, 255, 242, 0.75); } .cx-w:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cx-w img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.cx-w b { font: 800 14px/1.15 var(--display); overflow-wrap: anywhere; min-width: 0; }
a.btn { text-decoration: none; }
.cx-wi { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: #7ffff2; } .cx-wi svg { width: 24px; height: 24px; }
.cx-qr { justify-self: center; width: min(240px, 70vw); padding: 10px; border-radius: 14px; background: #fff; }
.cx-qr svg { display: block; width: 100%; height: auto; }
.cx-copy input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--edge); background: #0a1018; color: var(--ink); font: 600 13px var(--body); user-select: text; -webkit-user-select: text; }
.cu-cbonus { font: 800 13px var(--display); letter-spacing: 0.06em; color: #04201c; background: linear-gradient(#7ffff2, #2ee6d6); padding: 5px 12px; border-radius: 999px; box-shadow: 0 0 16px rgba(46, 230, 214, 0.5); }
@media (max-width: 420px) { .cu-cxbs { grid-template-columns: 1fr; } .cx-head img { width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .cx-spin { animation-duration: 3s; } }

/* Sybil's training (1.20): the dimmed screen with a hole over what she points at, the ring and the hand, her bubble */
#tut { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#tut .td { position: absolute; background: rgba(3, 7, 12, 0.58); pointer-events: auto; touch-action: none; }
#tut-ring { position: absolute; box-sizing: border-box; border: 3px solid #ffe27a; box-shadow: 0 0 0 4px rgba(255, 226, 122, 0.25), 0 0 22px rgba(255, 210, 90, 0.7);
  pointer-events: none; animation: tutRing 1.1s ease-in-out infinite; }
@keyframes tutRing { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#tut-hand { position: absolute; width: 64px; height: 72px; pointer-events: none; transform-origin: 23px 2px;
  transform: scale(var(--fx, 1), var(--fy, 1)); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
#tut-hand svg { width: 64px; height: 72px; display: block; animation: tutTap 1.1s ease-in-out infinite; transform-origin: 23px 2px; }
#tut-hand.hold svg { animation: tutHold 1.6s ease-in-out infinite; }
#tut-hand.nudge svg { animation: tutNudge 0.42s ease-out 1, tutTap 1.1s ease-in-out 0.42s infinite; }
@keyframes tutTap { 0%, 100% { transform: translate(10px, 14px) scale(1); } 45% { transform: translate(0, 0) scale(0.9); } 60% { transform: translate(0, 0) scale(0.9); } }
@keyframes tutHold { 0% { transform: translate(10px, 14px); } 25%, 85% { transform: translate(0, 0) scale(0.88); } 100% { transform: translate(10px, 14px); } }
@keyframes tutNudge { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-6px, 0) rotate(-8deg); } 65% { transform: translate(6px, 0) rotate(8deg); } }
#tut-say { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 96px);
  display: flex; align-items: flex-end; gap: 8px; max-width: 560px; margin: 0 auto; pointer-events: none; }
#tut-say.top { bottom: auto; top: calc(max(10px, env(safe-area-inset-top, 0px)) + 96px); }
#tut-say img { width: 86px; height: 101px; flex: none; border-radius: 16px; border: 2px solid var(--teal); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); background: #0b1c22; }
#tut-say .bubble { pointer-events: auto; border-color: var(--teal); }
#tut-say .bubble p { font-size: 17px; line-height: 1.35; }
#tut-say.pop .bubble, #tut-say.pop img { animation: tutPop 0.28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tutPop { from { transform: scale(0.88); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 560px) {
  #tut-say { bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 84px); }
  #tut-say img { width: 64px; height: 75px; }
  #tut-say .bubble p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { #tut-hand svg, #tut-ring { animation: none; } }
/* toasts move to the middle while Sybil's bubble sits at the top or bottom */
#app.tut-on #toasts { bottom: auto; top: 38%; }

/* ================================================================ Crew Wars (1.24) */
/* the War button over Raid: crossed swords on a dark coin with a steel rim, what the war is up to under it */
.hb-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none !important; }
.hb-left > * { pointer-events: auto; }
.warbtn { position: relative; width: 64px; padding: 0 0 4px; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 1px; color: #e8eef5; }
.warbtn .wsw { width: 56px; height: 56px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a4a5e, #141c27 70%);
  border: 3px solid #a9b6c6; box-shadow: 0 0 0 2px #0a0e14, 0 6px 14px var(--shadow), inset 0 -4px 8px rgba(0, 0, 0, 0.45); }
.warbtn span { font: 800 10px/1.15 var(--display); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(8, 11, 17, 0.88); border: 1px solid var(--edge);
  border-radius: 7px; padding: 2px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: -9px; position: relative; }
.warbtn .badge { top: -4px; right: 0; }
.warbtn.battle .wsw { border-color: #ff6a5a; box-shadow: 0 0 0 2px #0a0e14, 0 0 16px rgba(255, 74, 58, 0.55), inset 0 -4px 8px rgba(0, 0, 0, 0.45); }
.warbtn.battle span { color: #ffd1cc; border-color: rgba(255, 74, 58, 0.5); }
.warbtn.prep .wsw { border-color: var(--gold); }
.warbtn.search .wsw { animation: warpulse 1.6s ease-in-out infinite; }
.warbtn.loot .wsw { border-color: var(--gold); box-shadow: 0 0 0 2px #0a0e14, 0 0 14px rgba(242, 179, 61, 0.55); }
.warbtn:active .wsw { transform: translateY(2px); }
.warbtn:focus-visible { outline: none; } .warbtn:focus-visible .wsw { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes warpulse { 0%, 100% { box-shadow: 0 0 0 2px #0a0e14, 0 6px 14px var(--shadow); } 50% { box-shadow: 0 0 0 2px #0a0e14, 0 0 18px rgba(46, 230, 214, 0.6); } }
@media (prefers-reduced-motion: reduce) { .warbtn.search .wsw { animation: none; } }
@media (max-height: 500px) { .warbtn { width: 54px; } .warbtn .wsw { width: 46px; height: 46px; padding: 6px; } .hb-left { gap: 5px; } }

/* the raid header in a war attack */
#bt-name .tag.war { background: linear-gradient(#ff6a5a, #c8211b); color: #fff; }
#bt-name .wbest { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#bt-name .wbest small { font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#bt-name .wbest .star { width: 15px; height: 15px; }
.rloot.rwar { align-items: center; gap: 10px; }
.rloot.rwar span { font: 700 12px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rloot.rwar b { font: 900 22px var(--display); color: var(--gold); }

/* the war window */
.modal.war .mpanel { width: min(960px, 100%); }
.wv { display: grid; gap: 12px; }
.wv-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(46, 230, 214, 0.12), rgba(13, 19, 28, 0.6) 40%, rgba(13, 19, 28, 0.6) 60%, rgba(255, 74, 58, 0.14)); border: 1px solid var(--edge); }
.wv-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wv-side.them { flex-direction: row-reverse; text-align: right; }
.wv-sn { display: grid; gap: 1px; min-width: 0; }
.wv-sn b { font: 800 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-sn small { color: var(--muted); font-size: 13px; }
.wv-st { display: inline-flex; align-items: center; gap: 4px; font: 900 24px var(--display); color: var(--gold); }
.wv-side.them .wv-st { justify-content: flex-end; }
.wv-st .star { width: 22px; height: 22px; }
.wv-mid { display: grid; justify-items: center; gap: 1px; padding: 0 6px; }
.wv-mid small { font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.wv-mid b { font: 900 19px var(--display); font-variant-numeric: tabular-nums; }
.wv-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: #1b2330; margin-top: -6px; }
.wv-bar .us { background: linear-gradient(90deg, #22b7aa, #6ff5e9); }
.wv-bar .them { background: linear-gradient(90deg, #ff6a5a, #c8211b); margin-left: auto; }
.wv-note { margin: 0; color: #c5cfdc; font-size: 15px; }
.wv-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wv-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.wv-col h4 { margin: 0 0 2px; display: flex; gap: 6px; align-items: center; }
.wv-col.them h4 { color: #ff8f84; }
.wv-map .wv-col.us { order: -1; }
.wb { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 8px 5px 6px; border-radius: 12px;
  background: var(--panel2); border: 1px solid var(--edge); min-height: 46px; }
.wb.me { border-color: var(--line); background: #11202a; }
.wb.flat { opacity: 0.72; }
.wb-pos { font: 800 14px var(--display); color: var(--muted); text-align: center; }
.wb-img { width: 46px; height: 36px; object-fit: contain; }
.wb-n { display: grid; min-width: 0; }
.wb-n b { font: 700 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-n small { color: var(--muted); font-size: 13px; }
.wb-st { display: flex; }
.wb-st .star { width: 16px; height: 16px; }
.wb .btn.small { padding: 8px 10px 6px; }
.wv-atts { display: grid; gap: 6px; }
.wa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px 64px auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--panel2);
  border-left: 4px solid var(--teal); font-size: 14px; }
.wa.theirs { border-left-color: var(--red); }
.wa-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-who small { color: var(--muted); }
.wa .star { width: 15px; height: 15px; }
.wa-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.wa-new { color: var(--gold); font-weight: 800; }
.wa-t { color: var(--muted); font-size: 13px; text-align: right; }
.wv-search { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); }
.wv-search p { margin: 4px 0 8px; }
.wv-loot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(242, 179, 61, 0.18), rgba(242, 179, 61, 0.05)); border: 1px solid rgba(242, 179, 61, 0.4); }
.wv-loot > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 800 16px var(--body); }
.wv-loot b { font: 800 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.wv-result { text-align: center; padding: 14px; border-radius: 16px; border: 1px solid var(--edge); background: var(--panel2); display: grid; gap: 8px; justify-items: center; }
.wv-result h3 { font-size: 26px; }
.wv-result.win { background: radial-gradient(120% 140% at 50% 0%, rgba(242, 179, 61, 0.25), var(--panel2) 60%); border-color: rgba(242, 179, 61, 0.45); }
.wv-result.win h3 { color: var(--gold); }
.wv-result.lose h3 { color: #ff8f84; }
.wv-result p { margin: 0; }
.wv-rs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wv-rs b { font: 800 14px var(--display); }
.wv-rsc { font: 900 20px var(--display); color: var(--gold); padding: 0 6px; }
.wv-idle { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--edge); }
.wv-idle p { margin: 0; color: #c5cfdc; }
.wv-idle .wsw, .wv-sh .wsw { width: 64px; height: 64px; flex: none; }
.wv-start { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); }
.wv-sh { display: flex; gap: 12px; align-items: center; }
.wv-sh p { margin: 4px 0 0; }
.wv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.wp { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 7px 9px;
  border-radius: 11px; background: #0e151f; border: 1px solid var(--edge); color: var(--ink); font: inherit; cursor: pointer; }
.wp .wp-box { grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #4a5568; }
.wp.on { border-color: var(--line); background: #10202a; }
.wp.on .wp-box { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px #0e151f; }
.wp b { font: 700 13px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp small { color: var(--muted); font-size: 12px; }
.wp:disabled { opacity: 0.5; cursor: not-allowed; }
.wv-start .btn.big { justify-self: start; }
.wv-log { display: grid; gap: 6px; }
.wl { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--panel2); }
.wl-r { font: 800 11px var(--display); font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; border-radius: 6px; padding: 3px 0; background: #2a3140; }
.wl.win .wl-r { background: linear-gradient(#ffd77a, #e59b1c); color: #2a1700; }
.wl.lose .wl-r { background: #6b1f1a; color: #ffd1cc; }
.wl-vs { display: flex; gap: 6px; align-items: center; min-width: 0; }
.wl-vs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--display); }
.wl-sc { font: 800 15px var(--display); color: var(--gold); }
.wl small { color: var(--muted); }
@media (max-width: 720px) {
  .wv-map { grid-template-columns: minmax(0, 1fr); }
  .wv-map .wv-col.us { order: 0; }
  .wv-score { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 10px 8px; gap: 6px; }
  .wv-side .cbadge { width: 34px; height: 37px; }
  .wv-sn b { font-size: 12px; } .wv-st { font-size: 19px; } .wv-st .star { width: 17px; height: 17px; } .wv-sn small { font-size: 11px; }
  .wv-mid b { font-size: 16px; }
  /* 1.35.1: a crew's name takes a second line before it's cut, and the clock's words sit closer: in Spanish the clock
     (PREPARACIÓN, PARA LA BATALLA) is wider than in English, and a bot crew's name ("The Ape Bulls") lost its end */
  .wv-sn b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.15; }
  .wv-mid small { letter-spacing: 0.06em; }
  .wa { grid-template-columns: minmax(0, 1fr) auto auto auto; } .wa-t, .wa-new { display: none; }
  .wl { grid-template-columns: 46px minmax(0, 1fr) auto; } .wl small { display: none; }
}
@media (max-width: 420px) {
  .wv-side { flex-direction: column; align-items: flex-start; gap: 4px; } .wv-side.them { flex-direction: column; align-items: flex-end; }
  /* a base's stars go under its name, so the Attack button keeps to the row's right */
  .wb { grid-template-columns: 18px 38px minmax(0, 1fr) auto; column-gap: 7px; row-gap: 1px; }
  .wb-pos, .wb-img { grid-row: 1 / 3; }
  .wb-n { grid-column: 3; grid-row: 1; } .wb-st { grid-column: 3; grid-row: 2; } .wb .btn.small { grid-column: 4; grid-row: 1 / 3; }
  .wb-st .star { width: 14px; height: 14px; }
  .wb-img { width: 38px; height: 30px; }
}

/* ---------------------------------------------------------------- reinforcements (1.25): the Interchange */
.dcard.cc { border-color: rgba(46, 230, 214, 0.55); background: radial-gradient(circle at 50% 42%, #1b3a44, #121a26 70%); }
.dcard.cc img { object-fit: cover; object-position: 50% 38%; }
.ru.cc { border-color: rgba(46, 230, 214, 0.6); }
.ru.cc img { object-fit: cover; object-position: 50% 40%; }
.ai .lv { position: absolute; left: 2px; bottom: 2px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 5px; font: 800 10px/15px var(--display); font-style: normal; text-align: center; color: #fff;
  background: linear-gradient(#3a3f6e, #1d2142); border: 1px solid rgba(255, 255, 255, 0.35); }
.ai .lv.max { background: linear-gradient(#ffe48a, #e3a01c); color: #2a1700; border-color: #fff4c8; }
h4 .h4btn { margin-left: 10px; vertical-align: 1px; }
.ix-head { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; }
.ix-head img { width: 104px; height: 80px; object-fit: cover; border-radius: 12px; background: #141c28; border: 1px solid var(--edge); }
.ix-head > div, .dn-head { display: grid; gap: 4px; min-width: 0; }
.ix-head .meter.big, .dn-head .meter.big { height: 10px; }
.ix-head .meter.big span, .dn-head .meter.big span { background: var(--teal); }
.ix-row { min-height: 64px; align-items: center; }
.ix-asks { display: grid; gap: 8px; margin-top: 6px; }
.ix-asks .btn { justify-self: start; }
.ix-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.ix-ask input { flex: 1 1 180px; min-width: 0; font: 600 15px var(--body); color: var(--ink); background: #0d131c; border: 1px solid var(--edge); border-radius: 10px; padding: 9px 11px; }
.ix-ask input:focus { outline: none; border-color: var(--teal); }
.ix-full { color: #ffd77a; font-weight: 700; margin: 0; }
/* the crew chat's request card */
.cm.rqc { border-color: rgba(46, 230, 214, 0.32); background: linear-gradient(#11222b, var(--panel2)); }
.tag.rqt { color: #06201d; background: var(--teal); }
.rq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; }
.rq b { font: 800 13px var(--display); color: #bff7f1; }
.rq-bar { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rq-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22c3b6, var(--teal)); border-radius: 5px; }
.rq-from { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.rq-from b { color: #e6ecf3; }
.rq-acts { display: flex; justify-content: flex-end; margin-top: 6px; min-height: 28px; align-items: center; }
.rq-done { font: 800 11px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd77a; }
/* the donate panel */
.dn-head span.muted { overflow-wrap: anywhere; }
.dgrid .tcard.dn { padding-bottom: 8px; }
.mrow .mn .mdon { font: 700 11px var(--display); color: #9fd8d2; letter-spacing: 0.02em; }
/* ---------------------------------------------------------------- 1.26: the daily Star Bonus, the Treasury, achievements */
/* five pips under RAID while a Star Bonus is open */
#b-raid { flex-direction: column; gap: 4px; }
.sbpips { display: flex; gap: 3px; }
.sbpips i { width: 9px; height: 9px; background: rgba(42, 23, 0, 0.35); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 61%, 80% 100%, 50% 78%, 20% 100%, 30% 61%, 0 38%, 38% 35%); }
.sbpips i.on { background: #fff6dc; box-shadow: none; }
/* the Raid window's strip and the Treasury box */
.sbstrip { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(242, 179, 61, 0.2), rgba(242, 179, 61, 0.04)); border: 1px solid rgba(242, 179, 61, 0.42); }
.sbstrip > b { font: 800 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.sbstrip.wait { background: var(--panel2); border-color: var(--edge); }
.sbstrip .small { flex: 1 1 220px; min-width: 0; }
.sbstrip .i { width: 15px; height: 15px; }
.sb-pips { display: flex; gap: 2px; }
.sb-pips .star { width: 20px; height: 20px; }
.treas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(46, 230, 214, 0.14), rgba(46, 230, 214, 0.03)); border: 1px solid rgba(46, 230, 214, 0.32); }
.treas > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 800 16px var(--body); }
.treas b { font: 800 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.ix .treas { margin-top: 12px; }
/* the results' Star Bonus line */
.rsb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(242, 179, 61, 0.26), rgba(242, 179, 61, 0.08)); border: 1px solid rgba(242, 179, 61, 0.5); font: 800 16px var(--body); }
.rsb b { font: 900 14px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #ffd77a; }
.rsb small { flex-basis: 100%; text-align: center; color: var(--muted); font-weight: 600; }
/* a count of achievements to claim on the profile corner */
.p-ach { position: absolute; left: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 900 11px/18px var(--display); text-align: center;
  color: #fff; background: var(--red); box-shadow: 0 0 0 2px #0b0f15; }
.hot { color: #ffd77a; }
.pf-ach { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-ach .star, .ach-head .star { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
/* the Achievements window */
.ach-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 800 16px var(--body); }
.ach-claim { font: 800 11px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); border-radius: 8px; padding: 4px 8px; }
.ach-list { display: grid; gap: 8px; }
.ach-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.ach-row.ready { border-color: rgba(242, 179, 61, 0.6); background: linear-gradient(90deg, rgba(242, 179, 61, 0.14), var(--panel2) 60%); }
.ach-row.done { opacity: 0.78; }
.ach-ico { width: 64px; height: 56px; display: grid; place-items: center; }
.ach-ico img { max-width: 64px; max-height: 56px; object-fit: contain; }
.ach-ico img.achc { width: 46px; height: 56px; object-fit: cover; border-radius: 9px; border: 2px solid rgba(255, 255, 255, 0.12); }
.ach-ico svg.lgb { width: 52px; height: 52px; }
.ach-big .i, .ach-big img.i.ri { width: 46px; height: 46px; margin: 0; vertical-align: middle; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.ach-big.war svg { width: 40px; height: 40px; }
.ach-main { min-width: 0; display: grid; gap: 4px; }
.ach-main p { margin: 0; }
.ach-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-top b { font: 800 14px var(--display); letter-spacing: 0.03em; }
.ach-pips { display: flex; gap: 1px; }
.ach-pips .star { width: 17px; height: 17px; }
.ach-pips .pip.ready .star { fill: rgba(242, 179, 61, 0.16); stroke: #ffd77a; stroke-width: 1.8; animation: achGlow 1.1s ease-in-out infinite alternate; }
@keyframes achGlow { from { filter: none; } to { filter: drop-shadow(0 0 4px rgba(255, 215, 122, 0.9)); } }
.ach-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ach-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22c3b6, var(--teal)); }
.ach-row.ready .ach-bar span { background: linear-gradient(90deg, #e59b1c, #ffd77a); }
.ach-bar em { position: absolute; inset: 0; font: 800 11px/16px var(--display); font-style: normal; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.ach-side { display: grid; justify-items: end; gap: 6px; }
.ach-rew { display: flex; align-items: center; gap: 2px; font: 800 15px var(--body); white-space: nowrap; }
.ach-rew small { margin-left: 6px; color: var(--muted); font-weight: 700; }
.ach-done { font: 800 11px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
@media (max-width: 520px) {
  .ach-row { grid-template-columns: 48px minmax(0, 1fr); }
  .ach-ico { width: 48px; height: 44px; }
  .ach-ico img { max-width: 48px; max-height: 44px; }
  .ach-ico img.achc { width: 36px; height: 44px; }
  .ach-side { grid-column: 2; display: flex; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ach-pips .pip.ready .star { animation: none; } }

/* ---------------------------------------------------------------- the app and its notifications (1.27) */
.acct b.on { color: var(--teal); }
.acct + .acct { margin-top: 8px; }
.i.shr { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: -0.12em; color: var(--teal); }
.apppush { display: grid; gap: 12px; max-width: 560px; }
.apppush p { margin: 0; line-height: 1.4; }
.apppush > .btn { justify-self: start; }
.apppush h4 { margin: 4px 0 0; }
.pstat { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.pstat .pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); flex: none; }
.pkinds { margin: 0; }
.pwhat { margin: 0; padding-left: 18px; color: #c5cfdc; font-weight: 500; display: grid; gap: 4px; }
.pwhat li.no { opacity: 0.45; }
.pwhat b { color: var(--ink); }
.perr { color: #ff8a7a; font-weight: 600; }

/* ---------------------------------------------------------------- 1.29: the News window, its calendar, the what's-new card */
.chip.news .badge.dot { top: -3px; right: -3px; }
.tab { position: relative; }
.tab .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.nlist { display: grid; gap: 10px; }
.nitem { background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px 4px; user-select: text; -webkit-user-select: text; }
.nitem.update { border-left: 4px solid var(--teal); }
.nitem.event { border-left: 4px solid var(--gold); }
.mpanel .nitem header { display: flex; justify-content: flex-start; align-items: center; gap: 6px; margin: 0; position: static; background: none; padding: 0; }
.nitem header time { margin-left: auto; font-size: 12px; color: var(--muted); }
.nitem .tag.nn { color: #fff; background: var(--red); }
.nitem.news .tag.nk { color: #e8e1ff; background: rgba(167, 123, 255, 0.3); }
.nitem.event .tag.nk { color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); }
.nitem h4 { margin: 8px 0 4px; font: 800 16px/1.25 var(--display); text-wrap: balance; color: var(--ink); text-transform: none; letter-spacing: 0; }
.nbody { font-weight: 500; font-size: 15px; line-height: 1.45; color: #dce4ee; max-width: 68ch; }
.nbody p { margin: 0 0 8px; }
.nbody ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.evlist { display: grid; gap: 8px; margin-bottom: 6px; }
.evrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; }
.evrow.now { border-color: rgba(46, 230, 214, 0.4); }
.evi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--gold); background: rgba(242, 179, 61, 0.12); }
.evrow.now .evi { color: var(--teal); background: rgba(46, 230, 214, 0.12); }
.evb { min-width: 0; }
.evb b { font: 800 14px var(--display); }
.evb small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.evb p { margin: 3px 0 0; font-weight: 500; font-size: 14px; line-height: 1.35; color: #d4dce7; }
.evt { font: 800 11px var(--display); color: var(--gold); text-align: right; white-space: nowrap; }
.evrow.now .evt { color: var(--teal); }
@media (max-width: 480px) { .evrow { grid-template-columns: 30px minmax(0, 1fr); } .evt { grid-column: 2; text-align: left; } .evi { width: 30px; height: 30px; font-size: 16px; } }
/* (1.32: the card lets taps through to the station; only Read and ✕ take them) */
.newscard { pointer-events: none; display: flex; align-items: stretch; gap: 0; max-width: 100%; background: rgba(10, 14, 21, 0.97); border: 1px solid rgba(46, 230, 214, 0.45);
  border-radius: 14px; box-shadow: 0 12px 28px var(--shadow); animation: toastIn 0.35s cubic-bezier(0.2, 1.35, 0.4, 1); transition: opacity 0.35s, transform 0.35s; }
.newscard button { pointer-events: auto; }
.newscard.out { opacity: 0; transform: translateY(10px); }
.newscard.out button { pointer-events: none; }
.newscard .nc-body { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 4px 9px 12px; color: var(--ink); text-align: left; }
.newscard .nc-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--teal); background: rgba(46, 230, 214, 0.14); }
.newscard .nc-ico .bi { display: block; width: 20px; height: 20px; }
.newscard .nc-body > span { display: grid; min-width: 0; }
.newscard .nc-tag { font: 800 9px var(--display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.newscard b { font: 800 14px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.newscard .nc-open { flex: none; align-self: center; min-height: 36px; margin-left: 6px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(46, 230, 214, 0.55);
  background: rgba(46, 230, 214, 0.16); color: var(--teal); font: 800 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.newscard .nc-x { flex: none; width: 42px; background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; }
/* 1.29: a replay shared in the crew chat; sharing one from the Battle log; a crew's invite link */
.cm.rp { border-color: rgba(242, 179, 61, 0.35); }
.cm-sh { font-size: 12px; color: var(--muted); font-weight: 600; }
.cm-rp { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 6px; padding: 7px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.rp-vs { min-width: 0; flex: 1 1 140px; font-size: 14px; overflow-wrap: anywhere; } .rp-vs i { color: var(--muted); font-style: normal; }
.rp-res { display: inline-flex; align-items: center; gap: 5px; } .rp-res .stars svg { width: 15px; height: 15px; } .rp-res b { font: 800 13px var(--display); }
.lshare { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.lshare input { flex: 1 1 180px; min-width: 0; }
.lshared { grid-column: 1 / -1; margin: 0; color: var(--teal); font-weight: 700; }
.cr-link { margin: 8px 0 0; } .cr-link input { width: 100%; box-sizing: border-box; }

/* ================================================================ layouts (1.30): the Layout tab, the editor, the Layouts window */
/* the Layout tab on the station's right edge (the chat tab's mirror) */
#lay-tab { position: absolute; right: 0; top: 44%; transform: translateY(-50%); z-index: 6; pointer-events: auto; display: grid; justify-items: center; gap: 2px;
  padding: 10px max(8px, env(safe-area-inset-right, 0px)) 8px 8px; color: var(--gold); background: rgba(8, 11, 17, 0.9); border: 1px solid rgba(242, 179, 61, 0.3); border-right: 0;
  border-radius: 16px 0 0 16px; box-shadow: 0 8px 22px var(--shadow); cursor: pointer; font: 800 9px var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
#lay-tab .bi { width: 26px; height: 26px; display: block; }
#lay-tab:hover { color: #ffd77a; background: rgba(13, 19, 28, 0.96); }
#lay-tab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
#app.sheet-open #lay-tab { display: none; }
@media (max-height: 500px), (max-width: 560px) { #lay-tab { top: 52%; padding: 8px max(6px, env(safe-area-inset-right, 0px)) 6px 6px; } #lay-tab .bi { width: 22px; height: 22px; } }

/* the editor: a bar along the top (close, name, undo, redo, save), the tools and the tray along the bottom */
#edit { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#edit > * { pointer-events: auto; }
#ed-top { top: max(10px, env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; width: min(640px, calc(100% - 24px)); }
.ed-t { flex: 1 1 auto; min-width: 0; display: grid; }
.ed-t b { font: 800 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-btns { display: flex; gap: 6px; flex: none; }
#ed-undo, #ed-redo { font: 800 16px/1 var(--body); padding: 6px 10px 5px; }
#ed-bot { bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding: 10px; width: min(900px, calc(100% - 24px)); display: grid; gap: 8px; }
#app.sheet-open #ed-bot { display: none; }
.ed-tools { display: flex; gap: 6px; flex-wrap: wrap; }
#ed-erase.on { color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); border: 0; border-bottom: 4px solid var(--gold-d); }
.ed-tray { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 6px; scrollbar-width: thin; min-height: 74px; }
.ed-it { position: relative; flex: none; width: 74px; height: 74px; padding: 4px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font: inherit; }
.ed-it:hover { border-color: var(--line); }
.ed-it:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.ed-it img { width: 60px; height: 50px; object-fit: contain; pointer-events: none; }
.ed-it b { position: absolute; right: 4px; top: 3px; font: 800 12px var(--display); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.ed-it i { position: absolute; left: 4px; bottom: 3px; font: 800 9px var(--display); font-style: normal; letter-spacing: 0.06em; color: #ffe6a6; text-shadow: 0 1px 2px #000; }
.ed-done { margin: auto 0; color: var(--teal); font-weight: 700; padding: 0 4px; }
@media (max-height: 500px) { #ed-bot { padding: 7px 8px; gap: 6px; } .ed-tray { min-height: 60px; } .ed-it { width: 60px; height: 60px; } .ed-it img { width: 48px; height: 40px; } }
@media (max-width: 560px) { #ed-top { gap: 6px; padding: 7px 8px; } .ed-t b { font-size: 13px; } }

/* the Layouts window: a card for each slot (its map from above, its name and state, what can be done) */
.lay-note { margin: 0 0 10px; font-weight: 500; }
.lay-wb { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px; padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 106, 90, 0.08); border: 1px solid rgba(255, 106, 90, 0.25); }
.laylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.laycard { display: grid; gap: 8px; align-content: start; background: var(--panel2); border: 1px solid var(--edge); border-radius: 14px; padding: 10px; min-width: 0; }
.laycard.on { border-color: rgba(46, 230, 214, 0.5); box-shadow: inset 0 0 0 1px rgba(46, 230, 214, 0.2); }
.laymini { display: block; width: 100%; height: auto; border-radius: 8px; background: #0a111a; }
.laymini.big { max-width: 420px; margin: 0 auto 8px; }
.lc-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.lc-b .lc-n { font: 800 15px var(--display); overflow-wrap: anywhere; }
.lc-b small { flex-basis: 100%; color: var(--muted); font-size: 13px; line-height: 1.3; }
.lc-b small .warn { font-weight: 700; }
.tag.lc-on { color: #06201d; background: var(--teal); }
.tag.lc-war { color: #fff; background: linear-gradient(#ff6a5a, #c8211b); }
.lc-acts, .lc-more, .lc-src { display: flex; gap: 6px; flex-wrap: wrap; }
.lc-more .btn { padding: 6px 9px 5px; font-size: 10px; }
.lc-x { border-top: 1px solid var(--edge); padding-top: 8px; }
.lc-x p { margin: 0 0 6px; }
.lc-form, .lay-paste { display: flex; gap: 6px; }
.lay-share textarea { width: 100%; box-sizing: border-box; resize: none; font-size: 14px; word-break: break-all; }
.lay-share p, .lay-link p { margin: 0 0 8px; font-weight: 500; }

/* ============================================================ seasons (1.31): the medallion, the Season window, the Alpha Pass */
.ssa { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
/* the medallion over the Raid button: the tier, a ring for the way to the next, silver free and gold with the pass */
.ssnbtn .ssw { position: relative; width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#e8eef5 var(--p, 0%), rgba(255, 255, 255, 0.12) 0); border: 0; padding: 4px;
  box-shadow: 0 0 0 2px #0a0e14, 0 6px 14px var(--shadow); }
.ssnbtn .ssw::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #3a4a5e, #141c27 72%);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.45); }
.ssnbtn .ssw b { position: relative; font: 900 21px/1 var(--display); color: #f1f5fa; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.ssnbtn .ssw::after { content: ''; position: absolute; left: 50%; top: 4px; width: 12px; height: 7px; margin-left: -6px; border-radius: 0 0 6px 6px;
  background: linear-gradient(#e8eef5, #8d9aab); opacity: 0.85; }
.ssnbtn.pass .ssw { background: conic-gradient(#ffd77a var(--p, 0%), rgba(242, 179, 61, 0.2) 0); box-shadow: 0 0 0 2px #0a0e14, 0 0 14px rgba(242, 179, 61, 0.35), 0 6px 14px var(--shadow); }
.ssnbtn.pass .ssw::before { background: radial-gradient(circle at 50% 32%, #5a4520, #1d1408 72%); }
.ssnbtn.pass .ssw b { color: #ffe7a6; }
.ssnbtn.pass .ssw::after { background: linear-gradient(#fff3c4, #e59b1c); }
.ssnbtn.pass span:not(.ssw) { color: #ffe7a6; border-color: rgba(242, 179, 61, 0.45); }
.ssnbtn.ready .ssw { animation: ssnGlow 1.3s ease-in-out infinite alternate; }
@keyframes ssnGlow { from { filter: none; } to { filter: drop-shadow(0 0 8px rgba(242, 179, 61, 0.75)); } }
.ssnbtn:active .ssw { transform: translateY(2px); }
.ssnbtn:focus-visible .ssw { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ssnbtn.ready .ssw { animation: none; filter: drop-shadow(0 0 6px rgba(242, 179, 61, 0.7)); } }
@media (max-height: 500px) { .ssnbtn .ssw { width: 46px; height: 46px; } .ssnbtn .ssw b { font-size: 17px; } }

/* a quest done, a tier reached: a small card over the toasts */
.ssnpop { pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(46, 230, 214, 0.16), rgba(10, 14, 21, 0.96) 55%); border: 1px solid rgba(46, 230, 214, 0.45);
  box-shadow: 0 10px 24px var(--shadow); animation: toastIn 0.3s cubic-bezier(0.2, 1.35, 0.4, 1); transition: opacity 0.4s, transform 0.4s; max-width: 100%; }
.ssnpop.big { background: linear-gradient(90deg, rgba(242, 179, 61, 0.22), rgba(10, 14, 21, 0.96) 60%); border-color: rgba(242, 179, 61, 0.6); }
.ssnpop.out { opacity: 0; transform: translateY(8px); }
.ssnpop .sp-ico .ssa { width: 30px; height: 30px; }
.ssnpop .sp-t { display: grid; gap: 1px; min-width: 0; text-align: left; }
.ssnpop .sp-t b { font: 800 11px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.ssnpop.big .sp-t b { color: var(--gold); }
.ssnpop .sp-t span { font-weight: 700; overflow-wrap: anywhere; }
.ssnpop .sp-t em { font: 800 12px var(--display); font-style: normal; color: #ffd77a; }

/* the window: points and tier, the season's clock */
.ssn-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(232, 238, 245, 0.08), var(--panel2) 55%); border: 1px solid var(--edge); }
.ssn-head.pass { background: linear-gradient(120deg, rgba(242, 179, 61, 0.18), var(--panel2) 60%); border-color: rgba(242, 179, 61, 0.4); }
.ssn-medal { width: 60px; height: 60px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: radial-gradient(circle at 50% 32%, #3a4a5e, #141c27 70%) padding-box, conic-gradient(#e8eef5 var(--p, 0%), rgba(255, 255, 255, 0.14) 0) border-box;
  border: 5px solid transparent; box-shadow: 0 4px 12px var(--shadow); }
.ssn-head.pass .ssn-medal { background: radial-gradient(circle at 50% 32%, #5a4520, #1d1408 70%) padding-box, conic-gradient(#ffd77a var(--p, 0%), rgba(242, 179, 61, 0.2) 0) border-box; }
.ssn-medal b { font: 900 22px/1 var(--display); }
.ssn-medal small { font: 700 9px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ssn-ht { min-width: 0; display: grid; gap: 4px; }
.ssn-l1 { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font: 700 15px var(--body); }
.ssn-l1 > b { font: 800 18px var(--display); }
.ssn-pchip { display: inline-flex; align-items: center; gap: 4px; font: 800 10px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #2a1700;
  background: linear-gradient(#ffd77a, #e59b1c); border-radius: 8px; padding: 3px 7px 3px 4px; }
.ssn-pchip .ssa { width: 14px; height: 14px; }
.ssn-bar { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.ssn-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #8fa3b8, #e8eef5); }
.ssn-head.pass .ssn-bar span { background: linear-gradient(90deg, #e59b1c, #ffd77a); }
.ssn-ends { text-align: right; display: grid; }
.ssn-ends small { font: 700 10px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ssn-ends b { font: 800 15px var(--display); font-variant-numeric: tabular-nums; }
.tab .tbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--red); color: #fff; font: 800 11px var(--body); }

/* quests */
.ssq-list { display: grid; gap: 8px; }
.ssq { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.ssq.done { opacity: 0.7; background: linear-gradient(90deg, rgba(61, 255, 154, 0.08), var(--panel2) 55%); }
.ssq-ico { width: 52px; height: 48px; display: grid; place-items: center; }
.ssq-ico img { max-width: 52px; max-height: 48px; object-fit: contain; }
.ssq-ico img.ssq-card { width: 38px; height: 46px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.12); }
.ssq-big .i, .ssq-big .star, .ssq-big svg { width: 36px; height: 36px; margin: 0; vertical-align: middle; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.ssq-big img.i.ri { width: 50px; height: 50px; margin: -7px; vertical-align: middle; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.ssq-big .star { fill: #ffd23a; stroke: #6b4a00; stroke-width: 1.2; }
.ssq-big.sb { position: relative; }
.ssq-big.sb i { position: absolute; right: -4px; bottom: -2px; font: 900 13px var(--display); font-style: normal; color: #2a1700; background: var(--gold); border-radius: 7px; padding: 0 4px; }
.ssq-big.ctr .cletter, .ssq-big.ctr img { width: 36px; height: 36px; font-size: 26px; }
.ssq-main { min-width: 0; display: grid; gap: 4px; }
.ssq-main > b { font: 700 15px/1.2 var(--body); overflow-wrap: anywhere; }
.ssq-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ssq-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #22b7aa, #6ff5e9); }
.ssq-bar em { position: absolute; inset: 0; display: grid; place-items: center; font: 800 11px var(--display); font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); font-variant-numeric: tabular-nums; }
.ssq-side { display: flex; align-items: center; gap: 8px; }
.ssq-pts { font: 800 13px var(--display); color: #ffd77a; white-space: nowrap; }
.ssq-swap, .ssq-ok { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ssq-swap { cursor: pointer; color: var(--teal); background: #141c28; border: 1px solid rgba(46, 230, 214, 0.35); }
.ssq-swap svg, .ssq-ok svg { width: 20px; height: 20px; }
.ssq-swap:disabled { color: #4a5668; border-color: var(--edge); cursor: default; }
.ssq-swap:not(:disabled):active { transform: translateY(1px); }
.ssq-swap:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ssq-ok { color: #06331c; background: var(--green); }
.ssq-note svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--teal); }
.ssn-vault { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; margin: 12px 0 10px; border-radius: 14px; background: var(--panel2); border: 1px dashed rgba(242, 179, 61, 0.45); }
.ssn-vault > div { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ssn-vault > div b { font: 800 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ssn-vault > span { display: inline-flex; align-items: center; gap: 2px; font: 800 16px var(--body); white-space: nowrap; }
.ssn-vault > span small { color: var(--muted); font-weight: 700; margin-left: 3px; }

/* the track: a column a tier, free on top, the Alpha Pass below, scrolled sideways */
.ssr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ssr-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.ssr-lbls { display: grid; grid-template-rows: 92px 34px 92px; gap: 6px; }
.ssr-lbls span { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 10px; padding: 4px 2px; background: #141c28; color: #c9d3df; border: 1px solid var(--edge); }
.ssr-lbls span.t { writing-mode: horizontal-tb; transform: none; background: none; border: 0; color: var(--muted); font-size: 9px; }
.ssr-lbls span.p { color: #2a1700; background: linear-gradient(90deg, #ffd77a, #e59b1c); border-color: transparent; gap: 3px; }
.ssr-lbls span.p .ssa { width: 14px; height: 14px; transform: rotate(90deg); }
.ssr-track { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.ssr-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 12px; }
.ssr-col { flex: 0 0 82px; display: grid; grid-template-rows: 92px 34px 92px; gap: 6px; scroll-snap-align: center; }
.ssr-cell { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 12px; padding: 6px 4px; text-align: center;
  background: #121a26; border: 1px solid var(--edge); color: var(--ink); font: inherit; min-width: 0; }
.ssr-cell.f { background: linear-gradient(#1a2433, #121a26); }
.ssr-cell.p { background: linear-gradient(#2a2010, #17120a); border-color: rgba(242, 179, 61, 0.25); }
.ssr-cell.none { background: rgba(255, 255, 255, 0.02); border-style: dashed; color: var(--muted); }
.ssr-cell.todo, .ssr-cell.lock { opacity: 0.62; }
.ssr-cell.got { opacity: 0.5; }
.ssr-cell.claim { cursor: pointer; border: 2px solid #ffd77a; box-shadow: 0 0 0 2px rgba(242, 179, 61, 0.25), 0 0 14px rgba(242, 179, 61, 0.45); animation: ssnGlow 1.1s ease-in-out infinite alternate; }
.ssr-cell.claim::after { content: 'Claim'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font: 800 9px var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.ssr-cell.claim:active { transform: translateY(1px); }
.ssr-cell.claim:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ssr-cell em { font: 800 13px var(--display); font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.ssr-i .i { width: 30px; height: 30px; margin: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.ssr-i img.i.ri { width: 42px; height: 42px; margin: -6px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.ssr-i.two { display: flex; }
.ssr-i.two .i { width: 24px; height: 24px; }
.ssr-i.two img.i.ri { width: 34px; height: 34px; margin: -5px; }
.ssr-i.two > :last-child { margin-left: -12px; }
.ssr-st { width: 56px; height: 44px; object-fit: contain; }
.ssr-cell img.ssr-st + em { font-size: 10px; }
.ssr-mark { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.ssr-mark svg { width: 13px; height: 13px; }
.ssr-mark.ok { background: var(--green); color: #06331c; }
.ssr-mark.lk { background: #2a2010; color: #ffd77a; border: 1px solid rgba(242, 179, 61, 0.5); }
.ssr-n { position: absolute; top: 4px; right: 4px; font: 800 11px var(--display); font-style: normal; color: #2a1700; background: var(--gold); border-radius: 7px; padding: 1px 5px; }
.ssr-tier { display: grid; place-items: center; align-content: center; border-radius: 10px; background: #0a0f16; border: 1px solid var(--edge); }
.ssr-tier b { font: 900 14px/1 var(--display); }
.ssr-tier small { font: 700 9px var(--body); color: var(--muted); }
.ssr-col.got .ssr-tier { background: linear-gradient(#22b7aa, #0b6e66); border-color: transparent; }
.ssr-col.got .ssr-tier small { color: #c9fff8; }
.ssr-col.next .ssr-tier { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(46, 230, 214, 0.25); }
.ssr-col.bonus .ssr-tier b { color: var(--gold); }
.ssn-getpass { width: 100%; margin: 4px 0 10px; }

/* the Alpha Pass */
.ssp-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(242, 179, 61, 0.2), #17120a 70%); border: 1px solid rgba(242, 179, 61, 0.45); }
.ssp-card h3 { font-size: 20px; color: #ffd77a; }
.ssp-card p { margin: 4px 0 0; color: #e6d3a8; }
.ssp-emb .ssa { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(242, 179, 61, 0.35)); }
.ssp-perks { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ssp-perks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.ssp-perks p { margin: 2px 0 0; font-size: 14px; color: #c5cfdc; }
.ssp-perks b { font: 800 13px var(--display); letter-spacing: 0.04em; }
.spk-i { width: 44px; height: 40px; display: grid; place-items: center; }
.spk-i img { max-width: 44px; max-height: 40px; object-fit: contain; }
.spk-i .i, .spk-i .star { width: 30px; height: 30px; margin: 0; }
.spk-i img.i.ri { width: 42px; height: 42px; margin: -6px; }
.spk-i .star { fill: #ffd23a; stroke: #6b4a00; stroke-width: 1.2; }
.spk-now { display: inline-block; margin-left: 4px; font: 800 11px var(--display); color: #2a1700; background: var(--gold); border-radius: 6px; padding: 1px 6px; }
.ssp-buy { width: 100%; }
.ssp-on { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(61, 255, 154, 0.08); border: 1px solid rgba(61, 255, 154, 0.35); font-weight: 700; }
.ssp-on svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.ssp-cf { justify-items: center; text-align: center; }
.ssp-cf .cf-btns { justify-content: center; }
.cost.pass { gap: 3px; color: #ffd77a; font-size: 12px; }
.cost.pass .ssa { width: 15px; height: 15px; }
.upboost { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 3px; font: 800 10px var(--display); font-style: normal; letter-spacing: 0.06em; color: #ffd77a; text-transform: uppercase; }
.upboost .ssa { width: 13px; height: 13px; }

/* the season's end */
.ssn-over { display: grid; gap: 10px; }
.sso-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.sso-top .ssa { width: 56px; height: 56px; }
.sso-top p, .ssn-over > p { margin: 0; }
.sso-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sso-list li { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.sso-amt { display: inline-flex; align-items: center; gap: 2px 6px; font: 800 17px var(--display); }
.sso-amt img.i.ri { width: 26px; height: 26px; margin: -3px; }
.sso-list .ssn-st { width: 48px; height: 38px; object-fit: contain; }
.sso-st { display: grid; gap: 1px; min-width: 0; }

@media (max-width: 560px) {
  .ssn-head { grid-template-columns: auto minmax(0, 1fr); }
  .ssn-ends { grid-column: 1 / -1; text-align: left; display: flex; gap: 6px; align-items: baseline; }
  .ssq { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .ssq-ico { width: 44px; height: 44px; }
  .ssq-ico img { max-width: 44px; max-height: 44px; }
  .ssq-ico img.ssq-card { width: 34px; height: 42px; }
  .ssq-side { flex-direction: column; gap: 4px; }
  .ssr-col { flex-basis: 74px; }
}

/* ============================================================ 1.32: the Crew Games */
.cgbtn .wsw { padding: 6px; border-color: var(--gold); background: radial-gradient(circle at 50% 35%, #4a3a1c, #1a1309 70%); }
.cgbtn .cgi { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.cgbtn.ready .wsw { animation: warpulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 2px #0a0e14, 0 0 14px rgba(242, 179, 61, 0.55); }
.cgbtn.live .wsw { border-color: var(--teal); }
@media (max-height: 500px) { .cgbtn .wsw { width: 46px; height: 46px; padding: 5px; } }
.cgpop { border-color: rgba(242, 179, 61, 0.55); background: linear-gradient(90deg, rgba(242, 179, 61, 0.18), rgba(10, 14, 21, 0.96) 55%); }
.cgpop .sp-ico .cgi { width: 30px; height: 30px; }
.cgpop .sp-t b { color: var(--gold); }
.cg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; margin-bottom: 10px;
  background: linear-gradient(120deg, rgba(242, 179, 61, 0.14), var(--panel2) 60%); border: 1px solid rgba(242, 179, 61, 0.35); }
.cg-crew { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cg-crew > div { display: grid; min-width: 0; }
.cg-crew b { font: 800 17px var(--display); overflow-wrap: anywhere; }
.cg-crew .cgi { width: 36px; height: 36px; }
.cgt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin: 4px 0 0; }
.cgt-seg { position: relative; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; display: grid; place-items: center; }
.cgt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c98a1f, #ffd77a); opacity: 0.85; }
.cgt-seg.got .cgt-fill { width: 100% !important; }
.cgt-mark { position: relative; font: 900 13px/1 var(--display); color: #fff; text-shadow: 0 1px 2px #000; margin-top: -9px; }
.cgt-seg small { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font: 700 9px var(--display); color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
.cgt-seg.got small { color: #2a1700; }
.cgt-seg.got .cgt-mark { color: #2a1700; text-shadow: none; }
.cgt-note { margin: 6px 0 10px; }
.cg-me { display: grid; gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); margin-bottom: 12px; }
.cg-me > span { font-variant-numeric: tabular-nums; }
.cg-mebar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.cg-mebar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #22b7aa, #6ff5e9); }
.cg-mebar i { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--gold); }
.cg-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cgc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.cgc.act { border-color: rgba(46, 230, 214, 0.5); background: linear-gradient(90deg, rgba(46, 230, 214, 0.1), var(--panel2) 60%); margin-bottom: 4px; }
.cgc.act.out { border-color: rgba(255, 106, 90, 0.5); background: linear-gradient(90deg, rgba(255, 74, 58, 0.1), var(--panel2) 60%); }
.cgc-main { min-width: 0; display: grid; gap: 4px; }
.cgc-main > b { font: 700 15px/1.2 var(--body); overflow-wrap: anywhere; }
.cgc-main small { display: flex; align-items: center; gap: 4px; }
.cgk { width: 14px; height: 14px; flex: none; }
.cgc-side { display: grid; justify-items: end; gap: 6px; }
.cgc-btns { display: flex; gap: 6px; align-items: center; }
.cg-lock { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.cg-lock svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.cgm-list { display: grid; gap: 6px; }
.cgm { display: grid; grid-template-columns: 22px minmax(0, 7em) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.cgm.me { border-color: rgba(46, 230, 214, 0.5); }
.cgm-i { font: 800 12px var(--display); color: var(--muted); text-align: center; }
.cgm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgm-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cgm-bar span { display: block; height: 100%; background: linear-gradient(90deg, #c98a1f, #ffd77a); }
.cgm em { font: 800 13px var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.cgr-list { display: grid; gap: 6px; margin-bottom: 12px; }
.cgr { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--edge); }
.cgr.locked { opacity: 0.5; }
.cgr-t { display: grid; justify-items: center; }
.cgr-t b { font: 900 16px var(--display); color: var(--gold); }
.cgr-t small { font: 700 10px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.cgr-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cgr-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 40px; padding: 4px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--edge); color: inherit; font-variant-numeric: tabular-nums; }
.cgr-opt .i { width: 20px; height: 20px; margin: 0; }
.cgr-opt b { font: 800 13px var(--display); }
.cgr-opt small { font: 700 10px var(--display); color: var(--muted); }
.cgr-opt:not(:disabled):hover { border-color: var(--gold); }
.cgr-opt:disabled { cursor: default; }
.cgr-opt.got { border-color: var(--teal); background: rgba(46, 230, 214, 0.12); }
.cgr-opt.got i { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #04221f; display: grid; place-items: center; }
.cgr-opt.got i svg { width: 12px; height: 12px; }
.cgr-lock { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 520px) {
  .cg-board { grid-template-columns: minmax(0, 1fr); }
  .cgc { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cgt-seg small { font-size: 8px; }
  .cgm { grid-template-columns: 18px minmax(0, 6em) minmax(0, 1fr) auto; }
  .cgr-opt { min-height: 36px; }
}

/* ============================================================ 1.32: friendly challenges and friendly wars */
.tag.fr, #bt-name .tag.fr { background: linear-gradient(#ffd77a, #e59b1c); color: #2a1700; }
.fci { width: 18px; height: 18px; flex: none; }
.ch-fcbtn { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.ch-fcbtn .fci { width: 16px; height: 16px; }
@media (max-width: 420px) { .ch-fcbtn span { display: none; } .ch-crewbtn i { display: none; } }
.cm.fc { border-color: rgba(255, 106, 90, 0.4); }
.cm.fr { border-color: rgba(255, 106, 90, 0.3); }
.cm-fc { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 6px; padding: 7px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.fc-base { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: #ffb3a8; }
.fc-base span { display: grid; min-width: 0; color: var(--ink); }
.fc-base b { overflow-wrap: anywhere; }
.fc-base small { color: var(--muted); }
.fcf { display: grid; gap: 12px; }
.fcf-list { display: grid; gap: 6px; }
.fcf-opt { display: grid; gap: 1px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: inherit; font: inherit; background: var(--panel2); border: 2px solid var(--edge); }
.fcf-opt small { color: var(--muted); }
.fcf-opt.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(242, 179, 61, 0.14), var(--panel2) 70%); }
.fcf button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wv-offers { display: grid; gap: 8px; margin-bottom: 12px; }
.wo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(242, 179, 61, 0.12), var(--panel2) 60%); border: 1px solid rgba(242, 179, 61, 0.35); }
.wo.mine { background: var(--panel2); border-color: var(--edge); }
.wo-main { display: grid; gap: 2px; min-width: 0; }
.wo-main b { overflow-wrap: anywhere; }
.wo-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wo-go { display: flex; gap: 8px; align-items: center; }
.wo-go .btn.big { flex: 1; }
.wv-mid .tag.fr { justify-self: center; margin-bottom: 2px; }
@media (max-width: 520px) { .wo { grid-template-columns: auto minmax(0, 1fr); } .wo-btns { grid-column: 1 / -1; justify-content: stretch; } .wo-btns .btn { flex: 1; } }
/* on short screens (a phone on its side) the Season and the Crew Games sit side by side over War and Raid, clear of the chat tab */
@media (max-height: 500px) {
  .hb-left { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; justify-items: start; align-items: end; column-gap: 4px; }
  .hb-left > #b-raid { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- 1.33: the War League and the Medal Shop */
.warbtn.league .wsw { border-color: var(--gold); box-shadow: 0 0 0 2px #0a0e14, 0 0 14px rgba(242, 179, 61, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.45); }
.warbtn.league span { color: #ffe7b0; border-color: rgba(242, 179, 61, 0.45); }
.tag.lgt { color: #2a1700; background: linear-gradient(#ffd77a, #e59b1c); }
.lg { display: grid; gap: 12px; }
.lg-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: radial-gradient(120% 160% at 0% 0%, rgba(242, 179, 61, 0.18), var(--panel2) 60%); border: 1px solid rgba(242, 179, 61, 0.35); }
.lg-head .lgb { flex: none; }
.lg-nob { width: 58px; height: 58px; display: grid; place-items: center; flex: none; }
.lg-nob .wsw { width: 52px; height: 52px; }
.lg-ht { display: grid; gap: 2px; min-width: 0; }
.lg-ht small { font: 800 10px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.lg-ht b { font: 900 20px/1.1 var(--display); }
.lg-ht span { color: #c5cfdc; font-size: 13px; }
.lg-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; margin-top: 12px; border-radius: 14px; background: var(--panel2); border: 1px solid rgba(242, 179, 61, 0.3); }
.lg-card .wsw { width: 46px; height: 46px; }
.lg-card div { display: grid; gap: 2px; min-width: 0; }
.lg-card small { color: #c5cfdc; }
.lg-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lg-signed { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); }
.lg-signed p { margin: 0; }
.lg-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.lg-pl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.lg-pl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--display); }
.lg-pl small { grid-column: 1; color: var(--muted); }
.lg-pl .lg-st, .lg-pl .cost { grid-row: 1 / span 2; display: flex; align-items: center; gap: 3px; font: 800 13px var(--display); }
.lg-pl .lg-st .star { width: 15px; height: 15px; }
.lg-pl.me { border-color: rgba(46, 230, 214, 0.55); }
.lg-table { display: grid; gap: 4px; }
.lt { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) 54px 48px 34px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 11px; background: var(--panel2); border: 1px solid var(--edge); }
.lt.lt-h { background: none; border: 0; padding: 0 10px; font: 800 9px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lt-p { font: 900 15px var(--display); text-align: center; }
.lt-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--display); }
.lt-s { display: flex; align-items: center; gap: 3px; font: 800 14px var(--display); }
.lt-s .star { width: 15px; height: 15px; }
.lt-d, .lt-w { font-size: 12px; color: #c5cfdc; text-align: right; }
.lt.up { box-shadow: inset 4px 0 0 #3ddc84; }
.lt.down { box-shadow: inset 4px 0 0 #ff6a5a; }
.lt.me { border-color: rgba(46, 230, 214, 0.6); background: linear-gradient(90deg, rgba(46, 230, 214, 0.12), var(--panel2) 60%); }
.lg-zones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.lg-zones .z { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-zones .z.up { background: #3ddc84; } .lg-zones .z.down { background: #ff6a5a; }
.lg-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lr { display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.lr.battle { border-color: rgba(255, 106, 90, 0.6); }
.lr.prep { border-color: rgba(242, 179, 61, 0.5); }
.lr-t { font: 800 11px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lr.battle .lr-t { color: #ffb3aa; } .lr.prep .lr-t { color: var(--gold); }
.lm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; font-size: 12px; color: #aab6c6; }
.lm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-b { text-align: right; }
.lm-s { font: 800 11px var(--display); color: #e8eef5; }
.lm .won { color: #fff; font-weight: 700; }
.lm.mine { color: #e8eef5; }
.lm.mine .lm-s { color: var(--teal); }
.lg-res .lg-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lg-arr { font: 800 12px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lg-arr.up { color: #3ddc84; } .lg-arr.down { color: #ff8f84; }
.lg-bonus h3 { margin: 0; }
.lg-form .seg .btn[disabled] { opacity: 0.4; }
/* the Medal Shop */
.ms-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel2); border: 1px solid rgba(242, 179, 61, 0.35); }
.ms-head > .i { width: 34px; height: 34px; flex: none; }
.ms-head > div { display: grid; gap: 2px; }
.ms-head b { font: 900 20px var(--display); color: var(--gold); }
.ms-mine { display: grid; gap: 6px; }
.ms-own { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--edge); }
.msi { width: 40px; height: 40px; display: grid; place-items: center; }
.msi.big .i { width: 34px; height: 34px; }
.card.ms .msi { width: 64px; height: 64px; margin: 6px auto 2px; }
.card.ms .msi.big .i { width: 52px; height: 52px; }
.card.ms .muted.small { line-height: 1.3; }
.ms-use { display: grid; gap: 6px; }
.ms-t { display: grid; gap: 2px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--edge); background: var(--panel2); color: var(--ink); cursor: pointer; font: inherit; }
.ms-t b { font: 700 14px var(--display); }
.ms-t small { color: var(--muted); }
.ms-t:hover, .ms-t:focus-visible { border-color: var(--gold); outline: none; }
@media (max-width: 480px) { .lt { grid-template-columns: 20px 24px minmax(0, 1fr) 46px 40px 28px; gap: 6px; padding: 6px 8px; } .lg-ht b { font-size: 17px; } }