/* ui-unify.css: loaded last. The panels were written by different people with their own prefixes (ec-, sy-, bs-,
   tk-, rk-, hn-, ...). This sheet maps their buttons, tabs, cards, chips, bars, badges, section headers and empty
   states onto the design system in style.css (tokens + .ui-* classes), so every screen reads as one game.
   Rules here only restyle; none of them moves or reorders anything. New work should use the .ui-* classes. */

/* =================== screen title bar =================== */
.pn-title { background:
    radial-gradient(circle at 7px 7px, #f6dfae 0 1.5px, #2a1806 1.6px 2.6px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 7px) 7px, #f6dfae 0 1.5px, #2a1806 1.6px 2.6px, transparent 2.8px),
    var(--surf-wood);
  border-bottom: 2px solid var(--c-amber-lo); box-shadow: inset 0 1px 0 rgba(255,220,150,.16), inset 0 -3px 0 rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.5); min-height: 60px; }
.pn-title h2 { font-size: var(--fs-xl); font-weight: 800; color: var(--c-amber-hi); letter-spacing: .03em; text-shadow: 0 2px 0 #1a0f04, 0 0 12px rgba(240,180,60,.25); }
.pn-title .pn-back { width: 44px; height: 44px; border-radius: var(--r-md); background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5)); border: 1px solid var(--c-rust-4); color: var(--c-amber-pale); box-shadow: var(--bevel), 0 2px 0 #120b04; }
.pn-title .pn-right { align-items: center; gap: 6px; }
.pn-title .pn-right button { min-height: var(--tap-sm); min-width: var(--tap-sm); }

/* =================== tabs =================== */
/* the common tab bar (.pn-tabs, and every panel bar built on it): a sunken rail, the active tab is a raised amber plate */
.pn-tabs { gap: 4px; padding: 4px; border-radius: var(--r-lg); background: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--well); }
.pn-tabs > button, .sc-tabs > button { min-height: var(--tap-sm); padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: none; box-shadow: none; font-size: var(--fs-md); font-weight: 800; color: var(--c-text-2); }
.pn-tabs > button.active, .pn-tabs > button.on, .sc-tabs > button.active { background: var(--surf-amber); color: var(--c-amber-ink); border-color: #ffe7a6 #e0a030 #9a6414; box-shadow: var(--bevel-hi), var(--sh-1); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.pn-tabs .pn-bdg { top: -7px; right: -3px; }
.tk-tabs > button, .rk-tabs > button, .ar-tabs > button, .vh-tabs > button { min-height: var(--tap); font-size: 14px; }
.hn-tabs > button { min-height: var(--tap-sm); }
/* segmented controls (hero detail, profile) share the rail */
.hz-tabs, .pf2-tabs { padding: 4px; border-radius: var(--r-lg); background: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--well); }
.hz-tabs button, .pf2-tabs button { min-height: var(--tap-sm); border-radius: var(--r-md); font-weight: 800; color: var(--c-text-2); }
.hz-tabs button.on, .pf2-tabs button.on { background: var(--surf-amber); color: var(--c-amber-ink); box-shadow: var(--bevel-hi), var(--sh-1); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* bottom icon bars (Duel, Night Watch, Capital, Market): one active plate */
.dl-tab.on, .nw-tab.on, .cw-tab.on, .mk-tab.on { background: var(--surf-amber); box-shadow: var(--bevel-hi); }
.dl-tab, .nw-tab, .cw-tab, .mk-tab, .sn-tab { min-height: 52px; }
.ch-tab { min-height: 48px; border-radius: var(--r-md); }
.ch-tab.on { background: var(--surf-amber); border-color: #ffe7a6 #e0a030 #9a6414; box-shadow: var(--bevel-hi), var(--sh-glow); }
.cm-tabs button { background: var(--surf-card); border-color: var(--c-line); }

/* =================== buttons =================== */
/* amber = the main action, on every panel */
.ec-btn.gold, .bs-btn.gold, .sy-btn.gold, .sv-btn.gold, .bd-btn.gold, .pt-btn.gold, .vh-btn.gold, .sn-btn.gold, .ml-btn.gold, .tk-btn.claim, .rk-btn.claim, .sn-claim, .mo-go:not(.ghost), .cm-claim .go, .sc-go, .sc-act.gold, button.primary.sc-big, .sc-join, .sc-donate, .hx-recruit, .rc-btn.ten
  { background: var(--surf-amber); color: var(--c-amber-ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.ec-btn.gold, .bs-btn.gold, .sy-btn.gold, .sv-btn.gold, .ml-btn.gold, .tk-btn.claim, .rk-btn.claim { border: 1px solid; border-color: #ffe7a6 #e0a030 #9a6414; box-shadow: var(--bevel-hi), 0 3px 0 var(--c-amber-deep), var(--sh-1); }
/* blood red = destructive or hostile */
.ec-btn.red, .bs-btn.red, .sy-btn.red, .ml-btn.bad, .sc-act.red { background: var(--surf-blood); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.ec-btn.red, .bs-btn.red, .sy-btn.red, .ml-btn.bad { border: 1px solid; border-color: #ffab9c #c23a28 #6e1a10; box-shadow: var(--bevel-hi), 0 3px 0 #5a1810, var(--sh-1); }
/* blue = "take me there" */
.tk-btn.go, .rk-btn.go, .ar-go, .rs-go:not(:disabled):not(.busy), .bd-btn.blue, .sc-act.blue { background: var(--surf-blue); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.tk-btn.go, .rk-btn.go, .ar-go { border: 1px solid; border-color: #b9dcff #3a84d6 #173f6a; box-shadow: var(--bevel-hi), 0 3px 0 #12304f, var(--sh-1); }
/* ruby = costs rubies */
.bd-btn.ruby:not(.armed), .vh-btn.ruby:not(.armed) { background: var(--surf-ruby); }
/* plain */
.ec-btn, .sv-btn, .ml-btn { background: var(--surf-raised); border-color: var(--c-line-hi); box-shadow: var(--bevel), 0 3px 0 #0a0f0b, var(--sh-1); }
.ec-btn.ghost { background: rgba(0,0,0,.3); box-shadow: none; }
.bs-btn, .sy-btn { box-shadow: var(--bevel), 0 3px 0 #0a0f0b, var(--sh-1); }
/* one height: 44 px for a button, 40 px for the small ones inside rows */
.ec-btn, .sv-btn, .bs-btn, .sy-btn, .hd-btn, .ml-btn, .rk-btn, .pn-btn-row > button, .pn-bottom .pn-bottom-card button, .ch-empty button { min-height: var(--tap); border-radius: var(--r-lg); font-weight: 800; }
.ec-btn.sm, .sv-btn.sm, .bs-btn.sm, .sy-btn.sm, .tk-btn, .ar-go, .sn-claim, .rs-go, .mo-go:not(.ghost), .hn-act button, .cv-sec button, .dp-sec button, .pn-mission .acts button, .pn-row-btn button, .pn-tech button, .pt-btn.slim, .sh-go, .tr-go
  { min-height: var(--tap-sm); border-radius: var(--r-md); }
.hn-act { min-height: var(--tap-sm); }
.sh-go, .tr-go { min-width: var(--tap-sm); }
.pn-stepper button { min-width: var(--tap-sm); min-height: var(--tap-sm); }
.pn-stepper { border-color: var(--c-line-hi); border-radius: var(--r-md); } .pn-stepper span { min-width: 36px; font-weight: 800; }
/* greyed = cannot be pressed now, the same everywhere */
.ec-btn[disabled], .sv-btn[disabled], .bs-btn[disabled], .sy-btn[disabled], .bd-btn:disabled, .pt-btn:disabled, .vh-btn:disabled, .ml-btn:disabled, .tk-btn:disabled, .rk-btn:disabled, .sc-go:disabled
  { filter: grayscale(.85) brightness(.78); opacity: .75; animation: none; }

/* =================== cards =================== */
.pn-gold, .hd-card, .rc-pity, .pn-bundle, .pn-clan-banner { border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,220,140,.12), var(--sh-1); }
.pn-gold, .hd-card, .rc-pity { background: var(--surf-card); }
.pn-gold { border-color: var(--c-amber-lo); padding: 12px; }
.hd-card { border-color: var(--c-line); padding: 12px; }
.st-group { background: var(--surf-card); border-color: var(--c-line); border-radius: var(--r-lg); box-shadow: var(--bevel), var(--sh-1); }
.pn-result, .pn-mail .ic, .pn-mission .ic, .st-row .ic { border-color: var(--c-line-hi); }
.pn-hub-card { border-radius: var(--r-lg); border-color: var(--c-line-hi); background: radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,.07), transparent 70%), var(--surf-card); }
.pn-hub-card .lb { font-size: var(--fs-md); font-weight: 800; }
.pn-hub-head { border-radius: var(--r-lg); }
.pn-bottom .pn-bottom-card { background: var(--surf-card); border-color: var(--c-amber-lo); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
/* boxes with a header strip (building details, clan menu sections) */
.bd-sec, .al-sec { border-radius: var(--r-lg); background: var(--c-panel); border-color: var(--c-line); box-shadow: var(--sh-1); }
.bd-sec h4, .al-sec h4 { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .08em; color: var(--c-amber); background: var(--tex-scratch), linear-gradient(#263426, #1b2520); border-bottom: 1px solid rgba(200,145,42,.35); }

/* =================== chips =================== */
.pn-chip, .ec-rc, .pf-mini { min-height: 22px; font-weight: 700; border-radius: var(--r-pill); }
.pn-chip { background: var(--c-ink); border-color: var(--c-line-hi); padding: 2px 9px; font-size: var(--fs-sm); }
.pn-chip.gold { border-color: var(--c-amber-lo); color: var(--c-amber-hi); }
.ec-rc { display: inline-flex; align-items: center; gap: 3px; }

/* =================== progress bars =================== */
.pn-bar { height: 10px; background: var(--c-ink); border: 1px solid #000; border-radius: 6px; box-shadow: var(--well); }
.pn-bar i { border-radius: inherit; background: linear-gradient(var(--c-good-hi), #3fa652); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: width var(--t-med) var(--ease-out); }
.pn-bar.gold i { background: linear-gradient(var(--c-amber-hi), var(--c-amber-lo)); }
.pn-bar.blue i { background: linear-gradient(var(--c-blue-hi), #2f86d8); }
.rb-bar { border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: var(--well); }
.rb-bar i { background: linear-gradient(var(--c-good-hi), #4fa52b); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* =================== badges =================== */
.pn-bdg, .al-bdg, .ml-tab-bdg, #pn-rail .pn-rail-badge, .ring-more-bdg, #nav .nav-bdg { background: linear-gradient(var(--c-blood-hi), #c8392e); color: #fff; border: 1.5px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.5); font-weight: 800; }
.pn-bdg.gold, .ml-tab-bdg.gold { background: linear-gradient(#ffe08a, var(--c-amber-lo)); color: var(--c-amber-ink); border-color: #fff6d8; }

/* =================== section headers =================== */
.pn-section, .pn-gold h3, .hd-card h3, .pf-sec > h3, .st-group > h3, .cm-h { font-size: var(--fs-md); font-weight: 800; color: var(--c-amber); text-transform: uppercase; letter-spacing: .06em; }
.pn-section { margin: 16px 0 8px; }

/* =================== empty states =================== */
#panel .pn-empty, #sheet .pn-empty, #panel .ml-empty, #panel .ch-empty, #panel .al-empty, .qp-empty, #panel .sc-rank-empty, #panel .sc-mail-empty
  { color: var(--c-muted); font-size: var(--fs-md); line-height: 1.4; }
#panel .pn-empty, #sheet .pn-empty { padding: 26px 16px; border: 1px dashed var(--c-line-hi); border-radius: var(--r-lg); background: rgba(0,0,0,.18); }
.pn-loading { padding: 22px; font-size: var(--fs-md); }

/* =================== rows and lists =================== */
.pn-row-btn, .pn-stat, .pn-rank, .pn-tech, .pn-mail, .pn-mission, .pn-clan-row, .pn-opp { border-bottom-color: var(--c-line); }
.pn-stat { padding: 9px 0; } .pn-stat b { color: var(--c-amber-hi); font-weight: 800; }
.pn-rank.me { background: linear-gradient(#33290f, #241d0c); border-color: var(--c-amber-lo); border-radius: var(--r-md); }
.st-row { min-height: 52px; }
.st-switch { width: 56px; height: 32px; box-shadow: var(--well); } .st-switch i { width: 24px; height: 24px; } .st-switch.on i { transform: translateX(24px); } .st-switch.on { background: linear-gradient(var(--c-good-hi), #3fa652); }

/* =================== popups over the whole screen (rewards, results) =================== */
.ec-pop-card { border-radius: 8px; border: 9px solid transparent; border-image: var(--frame-rivet) 16 / 9px / 0 stretch; box-shadow: 0 0 40px rgba(240,180,60,.35), var(--sh-3); }
.ec-pop-it { border-radius: var(--r-md); border-color: var(--c-amber-lo); box-shadow: var(--well); }
.ec-pop-it small { font-size: 10px; }
.ec-pop-it .ic .ico { width: 34px; height: 34px; }
.rst-card { border-radius: 8px; border: 9px solid transparent; border-image: var(--frame-rivet) 16 / 9px / 0 stretch; background: var(--tex-noise), linear-gradient(#24321f, #131a13); }

/* =================== text that was too small or too faint to read =================== */
.hx-stat small, .pf-stat small, .hd-cp small, .pf-pow small, .rc-head small, .pf-donut .hole small { font-size: var(--fs-xs); }
.pn-hero .stars { font-size: 10px; } .pn-role { font-size: var(--fs-xs); font-weight: 700; }
.pn-mail.read .t { color: var(--c-muted); }
.pn-note { font-size: var(--fs-sm); line-height: 1.4; }

/* =================== sheets written by the panels =================== */
.ring-more button { min-height: 56px; border-radius: var(--r-lg); background: var(--surf-raised); box-shadow: var(--bevel), 0 3px 0 #0a0f0b; }
.troop-pick input, #coord-bar input { min-height: var(--tap-sm); }
#queue .chip button { min-width: 32px; min-height: 28px; }

/* =================== painted icons inside framed slots =================== */
.pn-hub-card .pn-ico .ico { width: 70%; height: 70%; vertical-align: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.pn-menu button .ic .ico, .pn-mail .ic .ico, .pn-mission .ic .ico, .st-row .ic .ico, .ml-tab-ic .ico, .ch-tab .ic .ico { width: 1.25em; height: 1.25em; vertical-align: -.25em; }
.rb-builder .ico { width: 24px; height: 24px; vertical-align: 0; }
button .ico, .pn-chip .ico, .ec-rc .ico { flex: none; }

/* =================== wide and short screens =================== */
html.land .pn-title { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
html.land .pn-title .pn-back { width: 40px; height: 40px; }
@media (min-width: 700px) { html:not(.land) #toast { max-width: 420px; } }

/* =================== tap targets: nothing a finger must hit is under 40 px =================== */
#top #music-btn, #top #sfx-btn { min-width: 40px; min-height: 40px; margin: -9px 0; padding: 0 4px; display: inline-grid; place-items: center; font-size: 17px; }
#top #sfx-btn::after { bottom: 13px; right: 6px; }
.sh-btns button, .sh-pick button, .ar-seg button, .ar-swapbtn, .cp-raise, .hn-crate, .vh-swap, .sn-mapbtn, .mo-link, .pf2-copy, .cm-info, .bu-go, .bg-tabs button, .hx-sort select, .hx-filter button, .mk-refresh-btn, .free-btn { min-height: var(--tap-sm); }
.sh-pick button, .ch-tr, .sc-edit { min-width: var(--tap-sm); }
.ch-tr, .sc-edit { width: var(--tap-sm); height: var(--tap-sm); }
.dl-help, .nw-help, .cw-help { flex-basis: var(--tap-sm); width: var(--tap-sm); height: var(--tap-sm); }
.sn-help, .sv-help, .pn-title .pn-right .sv-help { width: var(--tap-sm); height: var(--tap-sm); }
.rl-switch { height: 40px; width: 66px; border-radius: 20px; } .rl-switch i { top: 4px; left: 4px; width: 28px; height: 28px; } .rl-switch.on i { left: 30px; }
.mo-levels { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } .mo-levels button { min-height: var(--tap-sm); font-size: var(--fs-md); border-radius: var(--r-md); }
/* small round dots keep their size; the tap area around them grows */
.ec-dots button, .ec-wallet .plus { position: relative; overflow: visible; }
.ec-dots button::after, .ec-wallet .plus::after { content: ''; position: absolute; inset: -6px; }
.hn-find-row input[type=checkbox], #hn-show { width: 24px; height: 24px; }
label:has(> #hn-show) { min-height: var(--tap-sm); display: flex; align-items: center; gap: 10px; }