/* ------------------------------------------------------------------------------------------------
   Total Battle-inspired skin: dark leather shell, parchment panels, gold trim, red/green accents.
   Loaded after app.css. Layout comes from the other sheets; this file only changes the look.
   ------------------------------------------------------------------------------------------------ */
:root{
  --ink:#3a2a1b;
  --muted:#7b6447;
  --line:#d8c39a;
  --paper:#f6e7c6;
  --canvas:#1b100d;
  --green:#2f6b45;
  --green-dark:#245238;
  --green-pale:#e7efd6;
  --gold:#c49a4f;
  --orange:#b5622f;
  --shadow:0 16px 36px rgba(8,3,2,.35);
  --tb-text:#f0e2c6;
  --tb-text-muted:#c0a986;
  --tb-panel:#f6e7c6;
  --tb-panel-deep:#efdcb7;
  --tb-line:#b98a46;
}
html{background:#180d0b}
body{
  background:#180d0b;
  background-image:radial-gradient(1100px 520px at 50% -12%,#45241d 0%,#2a1512 46%,#180d0b 100%);
  background-attachment:fixed;
  color:var(--tb-text);
}

/* ---- shell ----------------------------------------------------------------------------------- */
.sidebar{background:linear-gradient(180deg,#1e0f0d,#130a09);border-right:1px solid #3c211b}
.brand{color:#f6e8cb}
.brand-mark{background:linear-gradient(180deg,#d8b16a,#b27b2f);color:#22120e;box-shadow:0 2px 0 #6d4519}
.brand-dot{color:#d8b16a}
.side-label{color:#8f7456}
.side-link{color:#c8b295}
.side-link.active{background:#33201a;color:#f6e8cb;box-shadow:inset 3px 0 0 #c49a4f}
.side-icon{color:#c9a76b}
.side-now{color:#e0bb76;border-color:#6b4a2e}
.sidebar-bottom .profile{border-top-color:#3c211b}
.profile b{color:#f0e2c6}
.profile p{color:#a78c6d}
.avatar{background:#3b241d;color:#e8d6b8}

.topbar{
  justify-content:flex-end;
  background:linear-gradient(180deg,#3d1e18,#2a1411);
  border-bottom:1px solid var(--tb-line);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  padding:0 14px;
}
.crumb{color:#d9c3a0}
.crumb span{color:#8f6f4e}
.top-right{color:#c9b08a}
.help-btn{color:#e3c078}
.divider{border-color:#6b4a2e}
.live-dot{background:#6fbf8a;box-shadow:0 0 0 3px rgba(111,191,138,.16)}
.dev-badge{color:#f0cf8c;background:#4a2b16;border-color:#8a5a2a}

.page-head{padding:32px 0 24px}
h1{color:#f6e8cb;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;letter-spacing:-.6px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
h1 em{color:#dca94f}
.page-sub{color:#c3ad8d}

/* ---- panels ---------------------------------------------------------------------------------- */
.panel{
  position:relative;
  background:
    radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f8ebd0,#f1dfba);
  border:1px solid var(--tb-line);
  border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(255,246,226,.55),inset 0 0 0 4px rgba(185,138,70,.16),0 16px 36px rgba(8,3,2,.32);
  color:var(--ink);
}
/* small gold corner brackets, like the framed panels in the game */
.panel::before,.panel::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(185,138,70,.45);pointer-events:none}
.panel::before{left:6px;top:6px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.panel::after{right:6px;bottom:6px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.panel h2{font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;font-size:16px;color:#4a2e18;letter-spacing:.1px;padding-bottom:8px;border-bottom:1px solid rgba(185,138,70,.32);margin-bottom:12px}
.panel h3{color:#5a3b22}
.panel .n{background:#ead6ac;color:#7a3f1e;border:1px solid #c9a76b;font-family:'DM Sans',sans-serif}
.panel .src{color:#9a5a20}
.sub-h{font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;color:#5a3b22}

/* ---- forms ----------------------------------------------------------------------------------- */
.fld{color:#6b5538}
.fld input,.fld select,.erow input,.sel input,.manual input,.trow select,#tech-search,.trp .ct,
.capacity-values input,.capacity-source select,.capacity-source input,.search2 input{
  background:#fff8e8;border-color:#cdb183;color:#3d2b1a;
}
.fld input:focus,.fld select:focus,.trp .ct:focus,#tech-search:focus,.search2 input:focus{
  border-color:#a97b3f;box-shadow:0 0 0 2px rgba(196,154,79,.18);
}
.fld input[readonly]{background:#f1e2c4;color:#6b5538}
.chk{color:#5a3b22}
.hint{color:#8a7150}
.note{color:#6b5538}
.adv{border-color:#cdb183;background:rgba(255,248,232,.4)}
.text-button{color:#7a4a24}
.text-button:hover{color:#4a2e18}
.primary-button{
  background:linear-gradient(180deg,#46835a,#2c5a3c);color:#fff4d8;
  border:1px solid #c9a76b;box-shadow:0 2px 0 #1b3a24,0 8px 18px rgba(0,0,0,.28);
}
.primary-button:hover{background:linear-gradient(180deg,#52946a,#346a46)}
.primary-button:disabled{opacity:.7}
.status{color:#c3ad8d}
body.busy .primary-button.big{background:#6e7a58}

/* ---- tabs / chips / troop picker ------------------------------------------------------------- */
.category-tab2{background:#f8ecd2;border-color:#cdb183;color:#6b5538}
.category-tab2.active{background:linear-gradient(180deg,#3f7a52,#2d5c3d);border-color:var(--tb-line);color:#fff4d8}
.category-tab2 span{color:#a08663}
.category-tab2.active span{color:#d8e8cf}
.chip{background:#f8ecd2;border-color:#cdb183;color:#7b6447}
.chip.active{background:#e4eed2;border-color:#8fae6c;color:#315a3a}
.chip:not(.active){opacity:.62}
.chip:hover{opacity:1}
.search2 input{background:#fff8e8;border-color:#cdb183;color:#3d2b1a}
.troop-list2,.tech-list2,.selected-list{border-color:#dcc9a4;background:rgba(255,248,232,.35)}
.trp{border-bottom-color:#eadcbe;color:#3d2b1a}
.trp:hover{background:#f9edd6}
.trp.on{background:#eef1d8;box-shadow:inset 3px 0 0 var(--green)}
.trp .ct:disabled{background:#f1e2c4;color:#a08663}
.trp small{color:#8a7150}
.trp .st{color:#5a3b22}
.catalog-meta2{color:#8a7150}

/* ---- manuals / research ---------------------------------------------------------------------- */
.manual th{color:#8a6f4a}
.manual td:first-child{color:#5a3b22}
.trow{border-bottom-color:#eadcbe}
.trow small{color:#8a7150}
.progress-tab{background:#f8ecd2;border-color:#cdb183;color:#7b6447}
.progress-tab.active{background:#e4eed2;border-color:#8fae6c;color:#315a3a}

/* ---- commanders ------------------------------------------------------------------------------ */
.ccell .nm{color:#6b5538}
.ccell .art{border-color:var(--tb-line);box-shadow:0 2px 6px rgba(40,20,10,.3)}
.ccell.hero-cell .art{border-color:#d8b16a}
.cmd-picker{background:#f9edd6;border-color:#dcc9a4}
.cmd-picker h4{color:#5a3b22}
.cpick .nm{color:#6b5538}
.cpick .art{border-color:#cdb183;background:#3a2a20}
.ccell.empty .art{background:#f5e7c8;border-color:#cdb183;color:#a08663}

/* ---- results --------------------------------------------------------------------------------- */
.score{background:#f8ecd2;border-color:#dcc9a4}
.score span{color:#8a7150}
.score b{color:#3d2b1a;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif}
.score.is-metric{background:#e8efd2;border-color:#a9c090}
.ocell{background:#f8ecd2;border-color:#dcc9a4}
.ocell span{color:#8a7150}
.ocell b{color:#3d2b1a;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif}
.ocell i{color:#7b6447}
.ocell.win{background:#e6efd4;border-color:#a9c090}.ocell.win b{color:#2f6b45}
.ocell.loss{background:#f6e0d6;border-color:#d8a68e}.ocell.loss b{color:#8d2a22}
.ocell.draw{background:#f6eac8;border-color:#ddc080}.ocell.draw b{color:#8a5a12}
.ocell.race{background:#e3e9f1;border-color:#a9bcd2}.ocell.race b{color:#2c4a6e}
table.grid th{color:#8a6f4a;border-bottom-color:#dcc9a4}
table.grid td{border-bottom-color:#eadcbe}
tr.self td{background:#eef1d8}
.bar .track{background:#e6d4b2}
.bar i{background:var(--green)}
.lrow{border-color:#dcc9a4;background:rgba(255,248,232,.35)}
.lrow .nm{color:#3d2b1a}
.lrow .cnt{color:#4a2e18;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif}
.lrow .cnt small{color:#8a7150}
.cpbtn{background:#fdf3df;border-color:#cdb183;color:#3f6a4a}
.cpbtn:hover{background:#f3e6c8}
.copybar{color:#7b6447}
.log{border-color:#dcc9a4;background:rgba(255,248,232,.35)}
.log details{border-bottom-color:#eadcbe}
.log summary{color:#4a2e18}
.log li.enemy{color:#8d2a22}
.log li.player{color:#24583a}
.tab{background:#f8ecd2;border-color:#cdb183;color:#6b5538}
.tab.active{background:var(--green);color:#fff4d8;border-color:var(--green)}

/* ---- game-data panel ------------------------------------------------------------------------- */
.plan-line{background:#f9edd6;border-color:#d8c39a;color:#6b5538}
.plan-line.premium{background:#e9efd4;border-color:#b9c99a}
.plan-line.free{background:#f7efd9;border-color:#dcc9a4}
.plan-line span{color:#8a7150}
.plan-badge{background:#ead6ac;border-color:#c9a76b;color:#7a3f1e}
.live-strip{background:#f9edd6;border-color:#d8c39a;color:#6b5538}
.live-strip #live-text{color:#6b5538}
.dragon-block{background:#f9edd6;border-color:#d8c39a}
.drop{background:#f9edd6;border-color:#cdb183;color:#6b5538}
.imp-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#6b5538}
.imp-status .text-button{margin-left:auto}
.imp-status span{color:#8a7150}
.imp-table td,.imp-table th{color:#5a4630}

/* ---- target pill in the sticky top bar ------------------------------------------------------- */
#panel-target #target-pill{
  --target-bg-top:#f9edd6;--target-bg-bottom:#efdcb8;--target-border:var(--tb-line);
  --target-icon-bg:#e8d3a8;--target-icon-border:#c9a76b;--target-icon-color:#8a5a2a;
  background:linear-gradient(180deg,var(--target-bg-top),var(--target-bg-bottom));
  border-color:var(--target-border);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  transition:background .18s ease,border-color .18s ease;
}
/* Citadel levels reuse the game's tier colours: 10=T2 green, 15=T3 blue, 20=T4 violet,
   25=T5 orange, 30=T6 red. Non-Citadel targets keep the gold parchment. */
#panel-target #target-pill[data-tier-color="green"]{--target-bg-top:#e8f2dc;--target-bg-bottom:#cfe3b8;--target-border:#9bae72;--target-icon-bg:#d9e9c5;--target-icon-border:#91a96a;--target-icon-color:#4f6b37}
#panel-target #target-pill[data-tier-color="blue"]{--target-bg-top:#e5f2f5;--target-bg-bottom:#c4e1e8;--target-border:#7fa8b1;--target-icon-bg:#d3e9ee;--target-icon-border:#78a1aa;--target-icon-color:#366b75}
#panel-target #target-pill[data-tier-color="violet"]{--target-bg-top:#f0eafa;--target-bg-bottom:#d9c7f0;--target-border:#a68bc9;--target-icon-bg:#e4d7f5;--target-icon-border:#9b80bf;--target-icon-color:#654989}
#panel-target #target-pill[data-tier-color="orange"]{--target-bg-top:#fcedd9;--target-bg-bottom:#f2c99d;--target-border:#cc9860;--target-icon-bg:#f5d7af;--target-icon-border:#c58f55;--target-icon-color:#855526}
#panel-target #target-pill[data-tier-color="red"]{--target-bg-top:#fae5dd;--target-bg-bottom:#efbda9;--target-border:#c77b62;--target-icon-bg:#f1c9b9;--target-icon-border:#bd7058;--target-icon-color:#823d2a}
#panel-target #target-pill:focus-within{outline-color:var(--target-icon-border)}
#panel-target .target-icon{background:var(--target-icon-bg);border:1px solid var(--target-icon-border);color:var(--target-icon-color);transition:background .18s ease,border-color .18s ease,color .18s ease}
.target-pill b,.target-pick select{color:#3d2b1a}
.target-pill small{color:#8a7150}
.target-pick > span{font-size:8px;color:#9b8b73;font-weight:700;letter-spacing:1px;line-height:1.2}
.target-pick select{
  width:100%;max-width:250px;appearance:none;border:0;background:transparent;padding:0;
  font:700 12px 'DM Sans',sans-serif;line-height:1.3;cursor:pointer;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;outline:none;
}
.target-pick small{font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.target-pill .chev{color:#8a7150;font-size:10px}

/* ---- hero march toggle on the portrait ------------------------------------------------------- */
#owned-only-wrap[hidden]{display:none}
.ccell .tg{
  position:absolute;top:-7px;left:-7px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font:700 11px 'DM Sans',sans-serif;line-height:1;cursor:pointer;
  border:1px solid var(--tb-line);background:#f5ead0;color:#8a7150;z-index:3;
  box-shadow:0 1px 3px rgba(30,15,5,.35);
}
.ccell .tg.on{background:var(--green);color:#fff4d8}
.ccell .tg.off{background:#e9dcc0;color:#8a7150}
.ccell .tg:focus-visible{outline:2px solid #d8b16a;outline-offset:2px}

/* ---- dialog / footer ------------------------------------------------------------------------- */
dialog{background:linear-gradient(180deg,#f8ebd0,#f1dfba);border-color:var(--tb-line);color:var(--ink)}
dialog::backdrop{background:rgba(12,6,4,.72)}
.dialog-head h2{color:#4a2e18;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif}
dialog p,dialog li{color:#5a4630}
.close-dialog{background:#ead6ac;color:#7a3f1e}
.footer{color:#a08663}
.footer b{color:#c9a76b}

/* ---- narrow screens -------------------------------------------------------------------------- */
@media(max-width:1280px){#load-status{display:none}}
@media(max-width:700px){.topbar{padding:0 8px}}