/* ============ STRATEGY BOARD + SHARED MODALS — the main menu's parchment look ============ */
:root { --pk-ink: #24222b; --pk-ink2: #5d5866; --pk-ink3: #8f8896; --pk-paper: rgba(248, 244, 236, .95); --pk-card: #fffdf8;
  --pk-line: rgba(60, 50, 40, .14); --pk-gold: #c4923a; --pk-gold2: #e8c46a; --pk-red: #b8432f; }
#screen-strategy, #game-menu { font-family: 'Nunito Sans', 'Segoe UI', sans-serif; }
#screen-strategy svg.ic, #game-menu svg.ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex-shrink: 0; }
.star { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; color: #b07a1c; }
.star svg.ic { color: #d8a030; fill: rgba(232,180,60,.35); }

/* ---------- top bar ---------- */
#strat-topbar { top: 14px; height: 54px; width: min(96%, 1120px); gap: 18px; padding: 0 10px 0 16px; border-radius: 14px;
  background: var(--pk-paper); color: var(--pk-ink); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(20, 30, 40, .25), inset 0 1px 0 #fff; font-size: 14px; }
#hud-tribe { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--pk-ink) !important; }
#hud-tribe .emblem { filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
#hud-gold { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff6e2; border: 1px solid #ecd9ae; color: var(--pk-ink); }
#hud-gold svg.ic { color: #d8a030; fill: rgba(232,180,60,.4); width: 18px; height: 18px; }
#hud-gold b { font-size: 17px; }
#hud-gold small { font-size: 12px; color: var(--pk-ink3); font-weight: 600; }
#hud-turn { display: flex; align-items: baseline; gap: 5px; color: var(--pk-ink2); }
#hud-turn small { font-size: 11px; font-weight: 800; letter-spacing: .18em; }
#hud-turn b { font-family: 'Cinzel', serif; font-size: 18px; color: var(--pk-ink); }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--pk-line); background: var(--pk-card);
  color: var(--pk-ink); font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .14s; }
.tb-btn [data-icon] { display: flex; }
.tb-btn svg.ic { color: var(--pk-gold); }
.tb-btn:hover:not(:disabled) { background: #fff; border-color: rgba(60,50,40,.3); }
.tb-btn.icon { padding: 8px 9px; }
.tb-zoom { display: flex; gap: 4px; }
.tb-btn.endturn { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #fff8ea; border: none; padding: 10px 20px;
  background: linear-gradient(180deg, #c95a3e, #9c3624); box-shadow: 0 3px 0 #6e2416; }
.tb-btn.endturn:hover:not(:disabled) { background: linear-gradient(180deg, #d4654a, #a83c28); }
.tb-btn:disabled { opacity: .6; }

/* ---------- unit / resource panel (left) ---------- */
#strat-panel { top: 82px; left: 16px; width: 280px; padding: 14px; border-radius: 14px; background: var(--pk-paper); color: var(--pk-ink);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 40px rgba(20,30,40,.25), inset 0 1px 0 #fff; font-size: 13px; }
.sp-head, .cb-head, .mh { display: flex; align-items: center; gap: 10px; }
.sp-badge { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--pk-ink); color: var(--pk-gold2); display: flex; align-items: center; justify-content: center; }
.sp-badge svg.ic { width: 20px !important; height: 20px !important; vertical-align: 0 !important; }
#strat-panel h3, #strat-citybar h3 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; color: var(--pk-ink); margin: 0; line-height: 1.15; }
.sp-head h3 em, .cb-head h3 em { font-style: normal; font-family: 'Nunito Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-gold); margin-left: 4px; }
.sp-head small, .mh small { display: block; color: var(--pk-ink2); font-size: 12px; line-height: 1.3; margin-top: 2px; }
.sp-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #eef4f8; color: #3a5a70; font-size: 12px; line-height: 1.35; }
.sp-note.warn { background: #fbece6; color: #8a3a24; }
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 8px; }
.sp-stats div { padding: 6px 4px; border-radius: 8px; background: var(--pk-card); border: 1px solid var(--pk-line); text-align: center; }
.sp-stats small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pk-ink3); }
.sp-stats b { font-size: 15px; display: inline-flex; align-items: center; gap: 3px; }
.sp-stats b em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--pk-ink3); }
.sp-stats svg.ic { color: var(--pk-gold); width: 14px; height: 14px; }
.sp-xp { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pk-ink2); margin-bottom: 8px; }
.sp-xp svg.ic { color: var(--pk-gold); }
.sp-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-ink3); margin: 6px 0 5px; }
.sp-list { display: flex; flex-direction: column; gap: 5px; }
#strat-panel button.sp-unit { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 7px 10px;
  border-radius: 9px; background: var(--pk-card); border: 1px solid var(--pk-line); color: var(--pk-ink); font-family: inherit; text-align: left; cursor: pointer; }
#strat-panel button.sp-unit:hover:not(:disabled) { border-color: var(--pk-gold); background: #fff; }
#strat-panel button.sp-unit:disabled { cursor: default; opacity: 1; }
.su-ic { width: 26px; height: 26px; border-radius: 7px; background: #f2ebdc; display: flex; align-items: center; justify-content: center; color: var(--pk-ink2); }
.su-name { font-weight: 700; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.hp { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(0,0,0,.1); overflow: hidden; }
.hp u { display: block; height: 100%; text-decoration: none; }
.su-state { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4a8a3a; }
.sp-unit.done .su-state { color: var(--pk-ink3); }
.sp-unit.done .su-ic { filter: grayscale(1); opacity: .6; }
.sp-legend { margin-top: 10px; font-size: 11.5px; color: var(--pk-ink3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 4px; }
.lg.move { background: #b8dc98; } .lg.merge { background: #9ec8f0; } .lg.atk { background: #e86a55; }
#strat-panel button.sp-cta, #strat-panel button.sp-cta:disabled { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 10px;
  border: none; border-radius: 10px; background: var(--pk-ink); color: #fbf3e2; font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
#strat-panel button.sp-cta svg.ic { color: var(--pk-gold2); }
#strat-panel button.sp-cta:disabled { opacity: .45; cursor: default; }
#strat-panel button.sp-cta .star { color: var(--pk-gold2); }

/* ---------- city tray (bottom centre) ---------- */
#strat-citybar { top: auto; bottom: 18px; width: min(96%, 1120px); display: block; padding: 14px 16px; border-radius: 16px; background: var(--pk-paper); color: var(--pk-ink);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 40px rgba(20,30,40,.25), inset 0 1px 0 #fff; font-size: 13px; }
.cb-id { flex: 1; }
.cb-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; font-size: 12.5px; color: var(--pk-ink2); align-items: center; }
.cb-stats svg.ic { color: var(--pk-gold); }
.cb-stats .pop { display: inline-flex; align-items: center; gap: 3px; }
.cb-stats .pop i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--pk-gold); display: inline-block; }
.cb-stats .pop i.on { background: var(--pk-gold); }
.cb-close { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--pk-line); background: var(--pk-card); color: var(--pk-ink2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cb-close:hover { background: #fff; color: var(--pk-ink); }
.cb-actions { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pk-line); flex-wrap: wrap; }
.cb-group { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.cb-group label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-ink3); text-align: center; }
#strat-citybar button.ca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 92px; min-height: 84px; padding: 8px 6px;
  border-radius: 11px; border: 1px solid var(--pk-line); background: var(--pk-card); color: var(--pk-ink); font-family: inherit; cursor: pointer; transition: all .14s; }
#strat-citybar button.ca:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pk-gold); box-shadow: 0 8px 18px rgba(40,30,20,.12); }
#strat-citybar button.ca:disabled { opacity: .45; cursor: default; }
.ca-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--pk-ink); color: var(--pk-gold2); display: flex; align-items: center; justify-content: center; }
.ca-ic svg.ic { width: 18px !important; height: 18px !important; vertical-align: 0 !important; }
.ca-name { font-weight: 700; font-size: 12px; text-align: center; line-height: 1.15; }
.ca-cost { font-size: 12px; display: flex; align-items: center; gap: 3px; color: var(--pk-ink3); }
.ca-cost small { font-size: 10px; }

#strat-log { top: 82px; color: #f8f2e2; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-weight: 700; }

/* map labels */
.strat-label.city { background: var(--pk-paper); color: var(--pk-ink); border: 2px solid; border-radius: 999px; font-family: 'Cinzel', serif; font-weight: 700; padding: 2px 12px; box-shadow: 0 4px 12px rgba(20,30,40,.25); }
.strat-label.city span { color: #b07a1c; }
.strat-label.army { background: rgba(36,34,43,.82); }

/* ---------- shared modals ---------- */
.modal { background: rgba(20, 22, 30, .55); backdrop-filter: blur(3px); }
.modal .modal-inner { background: var(--pk-paper); color: var(--pk-ink); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 22px 26px;
  box-shadow: 0 30px 80px rgba(10,14,22,.45), inset 0 1px 0 #fff; font-family: 'Nunito Sans', sans-serif; }
.modal .modal-inner h2 { font-family: 'Cinzel', serif; font-weight: 700; color: var(--pk-ink); letter-spacing: .06em; margin: 0; text-align: left; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--pk-line); background: var(--pk-card);
  color: var(--pk-ink); font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 14px; cursor: pointer; }
.ghost:hover { background: #fff; border-color: rgba(60,50,40,.3); }
.ghost svg.ic { color: var(--pk-gold); }
.ghost small { font-weight: 600; color: var(--pk-ink3); margin-left: 4px; }

/* research tree */
.modal-inner.research { width: min(1180px, 96vw); max-height: 90vh; display: flex; flex-direction: column; }
.mh { margin-bottom: 16px; }
.mh > div { flex: 1; }
.tree { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; overflow-y: auto; padding: 2px; }
.tb-col { display: flex; flex-direction: column; }
.tb-node { display: flex; flex-direction: column; }
.tb-kids { position: relative; margin-left: 14px; padding-left: 12px; border-left: 2px solid #e2d6bc; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tb-kids > .tb-node { position: relative; }
.tb-kids > .tb-node::before { content: ''; position: absolute; left: -12px; top: 26px; width: 12px; height: 2px; background: #e2d6bc; }
.tc { display: flex; gap: 10px; padding: 11px; border-radius: 12px; background: var(--pk-card); border: 1px solid var(--pk-line); transition: all .14s; }
.tc-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--pk-ink); color: var(--pk-gold2); display: flex; align-items: center; justify-content: center; }
.tc-ic svg.ic { width: 19px !important; height: 19px !important; vertical-align: 0 !important; }
.tc-body { flex: 1; min-width: 0; }
.tc h4 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; margin: 0 0 2px; color: var(--pk-ink); }
.tc p { font-size: 11.5px; color: var(--pk-ink2); line-height: 1.35; margin: 0 0 8px; }
.tc button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; border: none; background: var(--pk-ink); color: #fbf3e2; font-family: inherit; font-weight: 800; font-size: 12px; cursor: pointer; }
.tc button .star { color: var(--pk-gold2); }
.tc button:disabled { opacity: .45; cursor: default; }
.tc-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pk-ink3); }
.tc.owned { background: #f1f6ea; border-color: #b8d49a; }
.tc.owned .tc-ic { background: #4a8a3a; color: #fff; }
.tc.owned .tc-state { color: #4a8a3a; }
.tc.locked { opacity: .55; }
.tc.locked .tc-ic { background: #b8b0a2; color: #fff; }
.tc.open { border-color: rgba(196,146,58,.5); box-shadow: 0 4px 14px rgba(196,146,58,.15); }
.tc.open:hover { transform: translateY(-2px); }

/* battle prompt */
.modal-inner.bp { width: min(640px, 94vw); text-align: center; }
.bp-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-gold); }
.bp-kicker.warn { color: var(--pk-red); }
.modal-inner.bp h2 { text-align: center; font-size: 30px; margin: 4px 0 14px; }
.modal-inner.bp .vs-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 0 12px; }
.vs-side { flex: 1; padding: 14px; border-radius: 14px; background: var(--pk-card); border: 1px solid var(--pk-line); text-align: center; }
.vs-em .emblem { filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.vs-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px; margin-top: 4px; }
.vs-n { font-family: 'Cinzel', serif; font-weight: 900; font-size: 32px; color: var(--pk-ink); line-height: 1.1; }
.vs-n small { display: block; font-family: 'Nunito Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-ink3); }
.vs-comp { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-weight: 800; font-size: 13px; color: var(--pk-ink2); }
.vs-comp span { display: inline-flex; align-items: center; gap: 3px; }
.vs-comp svg.ic { color: var(--pk-gold); }
.vs-walls { margin-top: 6px; font-size: 12px; color: var(--pk-ink2); }
.vs-mid { font-family: 'Cinzel', serif; font-weight: 900; color: var(--pk-gold); font-size: 18px; }
.bp-desc { font-size: 13px; color: var(--pk-ink2); line-height: 1.45; margin: 0 0 14px; }
.bp-warn { font-size: 13px; color: var(--pk-red); align-self: center; }
.modal-inner.bp .battle-choice { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.modal-inner.bp .cta { margin: 0; padding: 13px 34px; font-size: 16px; }

/* game over */
.modal-inner.go { text-align: center; width: min(520px, 92vw); }
.modal-inner.go h2 { text-align: center; font-size: 28px; margin: 10px 0 6px; }
.modal-inner.go p { color: var(--pk-ink2); margin-bottom: 18px; }

/* ---------- pause menu (all screens) ---------- */
#game-menu .gm-inner { width: 380px; text-align: center; }
#game-menu .menu-runes { font-size: 12px; letter-spacing: 9px; color: var(--pk-gold); margin-bottom: 2px; }
#game-menu h2 { text-align: center; font-size: 28px; margin-bottom: 14px; }
#game-menu .gm-row { color: var(--pk-ink); font-weight: 700; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--pk-line); margin: 0; }
#game-menu .gm-row input[type="range"], #game-menu .gm-row input[type="checkbox"] { accent-color: var(--pk-gold); }
#game-menu #gm-vol-num, #game-menu #gm-sfx-num { color: #b07a1c; width: 44px; text-align: right; font-weight: 800; }
#game-menu kbd { background: var(--pk-card); border: 1px solid var(--pk-line); color: var(--pk-ink2); }
#game-menu .cta { width: 100%; margin-top: 16px; }
#game-menu .ghost { width: 100%; margin-top: 8px; }
#game-menu .hint { color: var(--pk-ink3); }
#strat-citybar .cb-close, .modal .cb-close { margin-left: auto; padding: 0; background: var(--pk-card); border: 1px solid var(--pk-line); color: var(--pk-ink2); }
#strat-citybar .cb-close:hover, .modal .cb-close:hover { background: #fff; color: var(--pk-ink); }
.modal .modal-inner.research { max-width: none; max-height: 90vh; overflow: hidden; }
.modal .modal-inner.bp, .modal .modal-inner.go { max-width: none; }
.tc button { white-space: nowrap; }
.tree { overflow-y: auto; }