:root {
  --bg: #0b1322; --bg2: #121c30; --bg3: #1a2742; --line: #2c3c5e; --gold: #d8a94f; --gold2: #f3d38a;
  --text: #f4ead6; --muted: #a9b2c4; --good: #6fd38a; --bad: #ff7a6b; --teal: #2bb5a0; --red: #c8433a;
  --r: 14px; --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
button, select { font-family: inherit; }
.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: block; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg3); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .08s, background .15s, border-color .15s; }
.btn:hover:not(:disabled) { border-color: var(--gold); background: #22345a; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #e6b65a, #b9822f); color: #1b1206; border-color: #f3d38a; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f3c76c, #c48d36); }
.btn.danger { background: #5b1d1a; border-color: #a33b33; }
.btn.danger:hover:not(:disabled) { background: #7a2620; border-color: #ff7a6b; }
.btn.gold { background: #3d3214; border-color: #b9822f; color: var(--gold2); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn.lg { padding: 14px 40px; font-size: 18px; }

/* ---------- main menu ---------- */
#menu { background: radial-gradient(ellipse at 50% 30%, #1d3156 0%, #0b1322 60%), var(--bg); display: none; }
#menu.on { display: flex; align-items: center; justify-content: center; padding: 16px; }
#menu::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v33L28 65 0 49V16zM28 65l28 16v33M28 65L0 81v33' fill='none' stroke='%23d8a94f' stroke-width='1'/%3E%3C/svg%3E"); }
.menu-card { position: relative; text-align: center; max-width: 560px; width: 100%; padding: 36px 24px; border-radius: 24px; background: rgba(13, 21, 38, .82); border: 1px solid rgba(216, 169, 79, .35); box-shadow: var(--shadow); }
.menu-card h1 { margin: 10px 0 0; font-size: clamp(30px, 7vw, 46px); font-weight: 900; line-height: 1.2; background: linear-gradient(180deg, #fbe7b5, #d8a94f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { font-size: 15px; letter-spacing: .35em; color: var(--muted); margin-top: 4px; font-weight: 600; direction: ltr; }
.tagline { color: #d7dbe6; font-size: 16px; line-height: 1.8; margin: 18px auto 24px; max-width: 440px; }
.menu-actions { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: auto; }
.emblem svg { filter: drop-shadow(0 6px 18px rgba(216, 169, 79, .35)); }

/* ---------- setup ---------- */
#setup { overflow-y: auto; background: radial-gradient(ellipse at 50% 0%, #18294a, var(--bg) 70%); }
.setup-wrap { max-width: 1100px; margin: auto; padding: 16px 16px 40px; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup-head h2 { margin: 8px 0; font-size: 24px; color: var(--gold2); }
.civ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.civ-card { text-align: start; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r); background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 35%, #0f1830), #0f1830 70%); border: 2px solid transparent; color: var(--text); cursor: pointer; position: relative; min-height: 170px; transition: transform .1s, border-color .15s; }
.civ-card:hover { transform: translateY(-2px); border-color: rgba(216, 169, 79, .5); }
.civ-card.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 169, 79, .25); }
.civ-flag { width: 44px; height: 44px; border-radius: 12px; background: var(--c1); border: 2px solid var(--c2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.civ-flag span { color: var(--c2); font-weight: 900; font-size: 22px; }
.civ-flag.sm { width: 38px; height: 38px; border-radius: 10px; }
.civ-name { font-size: 20px; font-weight: 900; }
.civ-leader { color: var(--gold2); font-size: 13px; }
.civ-ab { font-size: 13px; color: #d7dbe6; line-height: 1.6; }
.civ-uu { font-size: 12px; color: var(--muted); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 14px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); }
.opt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.opt select { background: var(--bg3); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 15px; }
.setup-go { text-align: center; margin-top: 18px; }

/* ---------- game ---------- */
#map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
#map:active { cursor: grabbing; }
#topbar { position: absolute; top: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); background: linear-gradient(180deg, rgba(8, 13, 24, .96), rgba(10, 16, 30, .88)); border-bottom: 1px solid rgba(216, 169, 79, .35); z-index: 5; flex-wrap: wrap; }
.tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 9px; background: rgba(255, 255, 255, .05); font-size: 14px; white-space: nowrap; }
.stat b { font-weight: 800; }
.stat small { color: var(--muted); font-size: 11px; }
.stat.turn { color: var(--gold2); }
.chip { font-size: 12px; margin-inline-end: 3px; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg3); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 700; position: relative; }
.tb-btn:hover { border-color: var(--gold); }
.tb-btn.icon { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 17px; }
.tb-btn.lang { font-size: 13px; }
.tb-btn.alert { border-color: var(--gold); background: #3a2d10; animation: pulse 1.6s infinite; }
.tb-btn.research { max-width: 280px; }
.tb-btn.research span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-btn.research .bar { width: 60px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(216, 169, 79, .25); } }
.bar { display: inline-block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; flex: 1; min-width: 40px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4fb3ff, #7be0ff); border-radius: 4px; }

#panel { position: absolute; top: 58px; inset-inline-start: 8px; width: 340px; max-height: calc(100% - 150px); overflow-y: auto; background: rgba(14, 22, 40, .95); border: 1px solid rgba(216, 169, 79, .35); border-radius: var(--r); box-shadow: var(--shadow); z-index: 6; }
.pn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #26385c) 55%, transparent), transparent); position: sticky; top: 0; backdrop-filter: blur(6px); z-index: 1; border-radius: var(--r) var(--r) 0 0; }
.pn-head h3 { margin: 0; font-size: 19px; font-weight: 900; }
.pn-head small { color: #d6dae4; font-size: 12px; }
.badge { font-size: 11px; background: var(--gold); color: #1b1206; border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.x { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.x:hover { color: var(--text); }
.pn-body { padding: 10px 14px 14px; }
.pn-body h4 { margin: 14px 0 6px; font-size: 14px; color: var(--gold2); display: flex; justify-content: space-between; }
.pn-body h4 small { color: var(--muted); font-weight: 600; }
.yields { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.yields.big { font-size: 15px; justify-content: space-between; background: rgba(255, 255, 255, .04); padding: 8px 10px; border-radius: 10px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(255, 255, 255, .07); font-size: 14px; }
.kv span { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.7; }
.hint { color: var(--gold2); font-size: 13px; margin: 6px 0; }
.unit-stats { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 800; margin-bottom: 6px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acts .btn { flex: 1 1 auto; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.cur-build { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(216, 169, 79, .08); border: 1px solid rgba(216, 169, 79, .25); margin-top: 8px; }
.cur-build > div { display: flex; justify-content: space-between; align-items: baseline; }
.cur-build small { color: var(--muted); }
.bopts { display: flex; flex-direction: column; gap: 5px; }
.bopt { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n t' 'd t'; gap: 0 8px; text-align: start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg3); color: var(--text); cursor: pointer; }
.bopt:hover:not(:disabled) { border-color: var(--gold); }
.bopt.cur { border-color: var(--gold); background: #2d2814; }
.bopt:disabled { opacity: .5; cursor: not-allowed; }
.bn { grid-area: n; font-weight: 800; font-size: 14px; }
.bd { grid-area: d; font-size: 12px; color: var(--muted); }
.bd em { color: var(--bad); font-style: normal; }
.bt { grid-area: t; align-self: center; font-size: 12px; color: var(--gold2); white-space: nowrap; }

#mapctl { position: absolute; bottom: 12px; inset-inline-start: 12px; display: flex; align-items: flex-end; gap: 6px; z-index: 4; padding-bottom: env(safe-area-inset-bottom); }
#mapctl .tb-btn { background: rgba(14, 22, 40, .9); }
#mini { width: 200px; height: 124px; border-radius: 10px; border: 1px solid rgba(216, 169, 79, .45); background: #05080f; cursor: pointer; box-shadow: var(--shadow); }
#endbox { position: absolute; bottom: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 5; padding-bottom: env(safe-area-inset-bottom); }
.end-btn { min-width: 170px; padding: 12px 22px; border-radius: 16px; border: 2px solid #f3d38a; background: linear-gradient(180deg, #e6b65a, #a8722a); color: #1b1206; font-weight: 900; font-size: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.25; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.end-btn small { font-size: 12px; font-weight: 700; opacity: .8; }
.end-btn.block { background: linear-gradient(180deg, #3ab7a3, #1d7a6c); color: #fff; border-color: #8ff0de; animation: pulse 1.6s infinite; font-size: 16px; }
.end-btn:active { transform: scale(.97); }
#nextUnit { background: rgba(14, 22, 40, .92); }

#tut { position: absolute; top: 60px; inset-inline-end: 12px; width: min(360px, calc(100% - 24px)); display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: rgba(40, 32, 10, .95); border: 1px solid var(--gold); box-shadow: var(--shadow); z-index: 7; }
#tut p { margin: 0; flex: 1; font-size: 14px; line-height: 1.7; }
.tut-ic { font-size: 22px; }
.tut-b { display: flex; gap: 6px; width: 100%; justify-content: flex-end; }

#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 30; pointer-events: none; width: min(440px, calc(100% - 32px)); }
.toast { padding: 9px 14px; border-radius: 12px; background: rgba(14, 22, 40, .96); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; transition: opacity .5s, transform .5s; text-align: center; }
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast.war { border-color: var(--red); background: rgba(60, 16, 14, .96); }
.toast.wonder { border-color: var(--gold); }
.toast.tech { border-color: #4fb3ff; }
.toast.diplo { border-color: var(--teal); }
.toast.warn { border-color: #f2c94c; }

#modal { position: fixed; inset: 0; background: rgba(3, 6, 12, .65); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; }
#modal[hidden] { display: none; }
.modal-box { background: var(--bg2); border: 1px solid rgba(216, 169, 79, .45); border-radius: 18px; box-shadow: var(--shadow); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px; width: 100%; }
.modal-box.small { max-width: 420px; }
.modal-box.mid { max-width: 720px; }
.modal-box.wide { max-width: 1280px; height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-box h3 { margin: 0 0 10px; color: var(--gold2); font-size: 20px; }
.modal-box h3 small { color: var(--muted); font-size: 13px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; margin-bottom: 10px; }
.cmp > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--bg3); }
.cmp .vs { color: var(--gold); font-weight: 900; }

.tech-tree { display: flex; gap: 10px; overflow: auto; flex: 1; padding-bottom: 8px; }
.era-col { display: flex; flex-direction: column; gap: 8px; min-width: 200px; flex: none; }
.era-col h4 { margin: 0 0 2px; position: sticky; top: 0; background: var(--bg2); padding: 4px 0; color: var(--gold2); font-size: 14px; z-index: 1; }
.tech { display: flex; flex-direction: column; gap: 3px; text-align: start; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg3); color: var(--text); cursor: pointer; }
.tech b { font-size: 14px; }
.tech small { color: var(--gold2); font-size: 12px; }
.tech em { font-style: normal; font-size: 11px; color: var(--muted); }
.tech .unl { font-size: 11px; color: #c7cede; line-height: 1.6; }
.tech.available { border-color: #4fb3ff; }
.tech.available:hover { background: #1f3358; }
.tech.researching { border-color: var(--gold); background: #2d2814; box-shadow: 0 0 0 2px rgba(216, 169, 79, .25); }
.tech.learned { opacity: .55; background: #15302a; border-color: #2f6f5c; cursor: default; }
.tech.locked { opacity: .75; }
.tech.goal { outline: 2px dashed var(--gold); }

.dip-list { display: flex; flex-direction: column; gap: 10px; }
.dip-card { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, var(--bg3)), var(--bg3)); border: 1px solid var(--line); }
.dip-card.unmet { opacity: .5; align-items: center; }
.dip-main { flex: 1; }
.dip-main > small { color: var(--muted); display: block; margin-top: 4px; }
.dip-tags { display: flex; gap: 6px; margin: 4px 0; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.tag.war { background: #5b1d1a; color: #ffb0a8; }
.tag.peace { background: #1b3b30; color: #9be8c8; }
.tag.ally { background: #2d2814; color: var(--gold2); }
.tag.trade { background: #16314d; color: #9cd2ff; }
.att-friendly { color: var(--good); } .att-cordial { color: #a6e3b2; } .att-neutral { color: var(--text); } .att-wary { color: #f2c94c; } .att-hostile { color: var(--bad); }

.vic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vic { padding: 12px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--line); }
.vic h4 { margin: 0 0 2px; color: var(--gold2); }
.vic > small { color: var(--muted); display: block; margin-bottom: 8px; line-height: 1.6; }
.vrow { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.vrow b { text-align: end; }
.vic .vrow:has(> :nth-child(2):last-child) { grid-template-columns: 1fr auto; }
.end { text-align: center; }
.end h2 { font-size: 34px; margin: 4px 0; }
.end.win h2 { color: var(--gold2); }
.end.lose h2 { color: var(--bad); }
.end-emb { font-size: 56px; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.log { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.log-row { font-size: 14px; padding: 6px 8px; border-radius: 8px; background: var(--bg3); }
.log-row small { color: var(--gold2); margin-inline-end: 6px; }

#busy { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 14px 26px; border-radius: 14px; background: rgba(14, 22, 40, .95); border: 1px solid var(--gold); z-index: 40; font-weight: 800; box-shadow: var(--shadow); }
#busy[hidden] { display: none; }

@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  #topbar { padding: 4px 6px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #topbar::-webkit-scrollbar { display: none; }
  .tb-group { flex-wrap: nowrap; flex: none; }
  .stat { padding: 3px 6px; font-size: 13px; }
  .tb-btn.research { max-width: 150px; }
  .tb-btn.research .bar { width: 34px; min-width: 30px; }
  #panel { top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: 52%; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .pn-head { border-radius: 18px 18px 0 0; }
  #panel:not([hidden]) ~ #mapctl, #panel:not([hidden]) ~ #endbox { display: none; }
  #toasts { top: auto; bottom: 110px; }
  #mini { width: 130px; height: 82px; }
  .end-btn { min-width: 132px; padding: 10px 14px; font-size: 16px; }
  #tut { top: 52px; inset-inline-end: 8px; padding: 8px 10px; }
  #tut p { font-size: 13px; }
  .modal-box { padding: 12px; }
  .era-col { min-width: 170px; }
  .vrow { grid-template-columns: 90px 1fr 40px; }
}