/* ================= Fortress defence ================= */
#fort-bar {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(84px + var(--sa-t)); width: min(86vw, 360px);
  background: var(--panel); border: 2px solid var(--frame); border-radius: 8px; box-shadow: 0 0 0 2px #000, 0 6px 16px rgba(0, 0, 0, .5);
  padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.fb-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; }
#fb-wave { color: #f2d27a; font-family: 'Rubik', system-ui, sans-serif; font-weight: 800; font-size: 14px; }
#fb-enemies { color: #ff9a8a; font-size: 12px; }
.bar.keep { height: 16px; margin-top: 0; }
.bar.keep .fill { background: linear-gradient(#8ff6ff, #1fa8d0 60%, #10708f); }
.bar.keep span { line-height: 15px; }
#fb-build { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #cfc2ab; }
#wave-btn {
  padding: 5px 12px; border-radius: 14px; font-weight: 700; font-size: 12px; color: #2a1605;
  background: linear-gradient(#ffcf6a, #d8921e); border: 1px solid #000; box-shadow: 0 0 10px rgba(255, 190, 80, .4);
  pointer-events: auto;
}
#wave-btn:active { transform: scale(.95); }
body.in-fort #boss-bar { top: calc(168px + var(--sa-t)); }
body.in-fort #toasts { top: calc(200px + var(--sa-t)); }

.choice-list .ci { width: 18px; height: 18px; vertical-align: -3px; }

.fr-panel { text-align: center; align-items: stretch; }
.fr-hero { font-size: 54px; line-height: 1; margin: 4px 0; animation: logoIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.fr-waves { font-size: 14px; color: #d8cbb4; }
.fr-waves b { color: #fff; font-size: 18px; }
.fr-waves em { color: #ffd23b; font-style: normal; font-weight: 700; }
.fr-items { display: flex; gap: 8px; justify-content: center; }
.fr-items .slot { width: 54px; }

/* Cloud save status */
.cloud-line { font-size: 12px; color: #8fb8e8; min-height: 14px; }
.cloud-line[data-st="off"] { color: var(--muted); }
.cloud-line[data-st="error"] { color: #ff8a7a; }
.cloud-line[data-st="ok"] { color: #7fd8a0; }
#title-screen .cloud-line { position: absolute; bottom: calc(30px + var(--sa-b)); }
.cloud-plain { display: block; }

/* ================= Leaderboard ================= */
.lb-panel { width: min(94vw, 400px); }
.lb-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; touch-action: pan-y; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .28); font-size: 14px; }
.lb-row img { width: 28px; height: 28px; border-radius: 4px; background: #1a1420; }
.lb-row .lb-rank { width: 26px; text-align: center; font-size: 15px; color: var(--muted); }
.lb-row .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row em { font-style: normal; font-weight: 700; color: #f2d27a; }
.lb-row.me { background: rgba(255, 210, 90, .14); box-shadow: inset 0 0 0 1px rgba(255, 210, 90, .5); }
.lb-me { margin-top: 6px; }

/* ================= Control layout editor ================= */
body.custom-layout #actions, body.custom-layout #belt { transform: none !important; }
body.editing-layout #hud { pointer-events: none; }
body.editing-layout #joy { display: block !important; opacity: 1; pointer-events: auto; cursor: grab; }
body.editing-layout #actions .act, body.editing-layout #belt .belt-btn, body.editing-layout #joy {
  outline: 2px dashed rgba(255, 220, 140, .75); outline-offset: 4px; cursor: grab; touch-action: none;
}
body.editing-layout .lay-sel { outline: 3px solid #ffd86a !important; box-shadow: 0 0 22px rgba(255, 210, 90, .8) !important; }
body.editing-layout #btn-ctx, body.editing-layout #fort-bar, body.editing-layout #coach, body.editing-layout #floor-banner { display: none !important; }
#layout-bar {
  position: fixed; left: 50%; top: calc(110px + var(--sa-t)); transform: translateX(-50%); z-index: 26;
  width: min(94vw, 420px); padding: 10px; border-radius: 10px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(20, 15, 26, .95); border: 2px solid var(--frame); box-shadow: 0 0 0 2px #000, 0 10px 24px rgba(0, 0, 0, .6);
}
.lay-hint { text-align: center; font-weight: 700; color: #f2d27a; }
.lay-row { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
#lay-sel { flex: 1; font-size: 12px; color: #d8cbb4; }
#lay-minus, #lay-plus { width: 40px; font-size: 18px; padding: 4px 0; }
.lay-done { background: linear-gradient(#ffcf6a, #d8921e); color: #2a1605; border-color: #000; }

/* ================= Run perks (Archero-style) ================= */
.bar.run { height: 7px; }
.bar.run .fill { background: linear-gradient(#e0a8ff, #8a3ad0); }
.bar.run span { font-size: 6px; line-height: 6px; }
.perk-panel { width: min(94vw, 420px); text-align: center; }
.perk-sub { font-size: 12px; color: var(--muted); margin-top: -4px; }
.perk-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perk-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 10px;
  background: radial-gradient(circle at 50% 20%, #3a2a52, #17111f); border: 2px solid #8a5ad0;
  box-shadow: 0 0 0 2px #000, 0 0 18px rgba(170, 110, 255, .35); color: var(--text);
  animation: perkIn .35s cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.perk-card:nth-child(2) { animation-delay: .06s; }
.perk-card:nth-child(3) { animation-delay: .12s; }
.perk-card:active { transform: scale(.95); }
.perk-card img { width: 46px; height: 46px; filter: drop-shadow(0 0 6px rgba(200, 150, 255, .7)); }
.perk-card b { font-size: 13px; line-height: 1.15; }
.perk-card span { font-size: 11px; color: #cfc2ab; line-height: 1.25; }
.perk-stars { font-style: normal; color: #ffd23b; font-size: 11px; letter-spacing: 1px; }
@keyframes perkIn { from { transform: translateY(20px) scale(.85); opacity: 0; } }
.pause-perks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.pause-perks img { width: 28px; height: 28px; background: #2a1f36; border-radius: 6px; border: 1px solid #8a5ad0; }
.pause-perks sub { color: #ffd23b; font-size: 10px; margin-left: -8px; }

/* Telegram avatars */
#portrait img.photo { image-rendering: auto; object-fit: cover; border-radius: 2px; }
.lb-row img.photo { image-rendering: auto; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--cc); }

/* Stash */
.stash-panel { max-width: 460px; }
.stash-hint { font-size: 12px; opacity: .65; margin: -2px 0 8px; text-align: center; }
.stash-sec { margin-bottom: 10px; }
.stash-h { font-weight: 700; font-size: 13px; margin: 0 0 6px; display: flex; justify-content: space-between; color: #e3c27a; }
.stash-h em { font-style: normal; opacity: .7; color: #ccc; }
.stash-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#stash-box { max-height: 34vh; overflow-y: auto; padding-right: 2px; }
.stash-grid .slot { aspect-ratio: 1; }

/* ---------- Camp hub ---------- */
#hub { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; pointer-events: none;
  padding: calc(10px + var(--sa-t)) calc(12px + var(--sa-r)) calc(8px + var(--sa-b)) calc(12px + var(--sa-l)); }
#hub > * { pointer-events: auto; }
#hub::before { content: ''; position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 7, 16, 0) 0%, rgba(8, 7, 16, .78) 38%, rgba(8, 7, 16, .95) 100%); }
#hub > * { position: relative; }
body.in-hub #pause [data-m="camp"] { display: none; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-hero { display: flex; align-items: center; gap: 10px; background: rgba(14, 11, 22, .72); border: 1px solid rgba(232, 196, 106, .28);
  border-radius: 16px; padding: 6px 14px 6px 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-width: 0; }
.hub-face { position: relative; width: 46px; height: 46px; flex: none; }
.hub-face img { width: 100%; height: 100%; border-radius: 12px; background: #2a2236; image-rendering: pixelated; }
.hub-face img.photo { image-rendering: auto; object-fit: cover; }
.hub-face b { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; border-radius: 11px; background: linear-gradient(#ffd86a, #c8902a);
  color: #2a1a08; font-weight: 800; font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 2px #120e18; padding: 0 4px; }
.hub-who { min-width: 0; }
.hub-who b { display: block; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.hub-who span { font-size: 11px; color: var(--muted); }
.hub-xp { height: 5px; width: 120px; max-width: 40vw; border-radius: 3px; background: rgba(255, 255, 255, .1); margin: 4px 0 3px; overflow: hidden; }
.hub-xp i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #a46cff, #d6a8ff); transition: width .4s; }
.hub-round { width: 44px; height: 44px; border-radius: 50%; flex: none; background: rgba(14, 11, 22, .72); border: 1px solid rgba(232, 196, 106, .28);
  color: var(--gold); font-size: 20px; display: grid; place-items: center; }
.hub-res { display: flex; gap: 8px; margin-top: 8px; align-self: flex-start; }
.hub-res span { display: flex; align-items: center; gap: 5px; background: rgba(14, 11, 22, .72); border-radius: 12px; padding: 4px 10px 4px 6px;
  font-weight: 700; font-size: 13px; border: 1px solid rgba(255, 255, 255, .08); }
.hub-res img { width: 18px; height: 18px; image-rendering: pixelated; }
.hub-stats { margin-top: auto; align-self: center; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hub-stats span { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; background: rgba(14, 11, 22, .6); border-radius: 10px; padding: 4px 10px; }
.hub-play { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 12px auto 12px; width: min(100%, 420px); }
.hub-chapter { --cc: #ff8a30; display: flex; align-items: center; gap: 6px; border-radius: 18px; padding: 10px 8px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--cc) 26%, transparent), rgba(16, 12, 26, .9) 70%);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--cc) 22%, transparent); }
.hub-chapter.locked { filter: grayscale(.8) brightness(.8); }
.hub-ch-body { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-ch-body em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cc); font-weight: 700; }
.hub-ch-body b { font-size: 21px; font-weight: 900; color: #fff4dc; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.hub-ch-body span { font-size: 12px; color: #c8bca8; }
.hub-arrow { width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .08); flex: none; }
.hub-arrow:disabled { opacity: .2; }
.hub-go { height: 64px; border-radius: 20px; font-size: 26px; font-weight: 900; letter-spacing: 2px; color: #2a1404;
  background: linear-gradient(#ffe08a, #ffb02e 55%, #e07a10); box-shadow: 0 5px 0 #8a4a08, 0 10px 24px rgba(255, 150, 40, .35), inset 0 2px 0 rgba(255, 255, 255, .6);
  animation: hubPulse 2.2s ease-in-out infinite; }
.hub-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a4a08, 0 6px 16px rgba(255, 150, 40, .3); }
.hub-go:disabled { filter: grayscale(1) brightness(.6); animation: none; }
@keyframes hubPulse { 50% { box-shadow: 0 5px 0 #8a4a08, 0 10px 34px rgba(255, 170, 60, .6), inset 0 2px 0 rgba(255, 255, 255, .6); } }
.hub-fort { height: 42px; border-radius: 14px; font-weight: 700; font-size: 14px; color: #d8e4ff; background: rgba(40, 52, 96, .75); border: 1px solid rgba(130, 160, 255, .35); }
.hub-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: rgba(14, 11, 22, .85); border: 1px solid rgba(232, 196, 106, .2);
  border-radius: 18px; padding: 6px; }
.hub-nav button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; border-radius: 12px; color: var(--text); font-size: 11px; font-weight: 700; }
.hub-nav button:active { background: rgba(255, 255, 255, .08); }
.hub-nav img { width: 30px; height: 30px; image-rendering: pixelated; }
.hub-emoji { font-size: 24px; line-height: 30px; height: 30px; }
.hub-dot { position: absolute; top: 4px; right: calc(50% - 22px); width: 10px; height: 10px; border-radius: 50%; background: #4cff7a; box-shadow: 0 0 8px #4cff7a; display: none; }
.hub-dot.on { display: block; }
@media (min-aspect-ratio: 1/1) {
  .hub-play { margin-bottom: 8px; }
  .hub-nav { width: min(100%, 520px); margin: 0 auto; }
}

button.hub-res { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
button.hub-res:active { transform: scale(.97); }