:root{
  --bg:#0d0816;--panel:#1b1229;--panel2:#281a3a;--gold:#f5c76c;--gold2:#cc8c2d;
  --cream:#fff1d3;--text:#f7f4ff;--muted:#aaa0b9;--purple:#9d72ff;--red:#ff6f7d;
  --green:#6dd59a;--blue:#66c7ef;--orange:#ff9d55;--border:rgba(245,199,108,.22);--safe:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgba(107,66,172,.28),transparent 34rem),var(--bg);color:var(--text);font-family:Georgia,"Times New Roman",serif}
body{min-height:100vh;min-height:100dvh}button{font:inherit;cursor:pointer}.hidden{display:none!important}
.screen{display:none;min-height:100vh;min-height:100dvh}.screen.active{display:block}
#start-screen{padding:max(30px,env(safe-area-inset-top)) 18px 34px}
.hero-banner{position:relative;overflow:hidden;max-width:900px;margin:0 auto 22px;padding:34px 22px;text-align:center;border:1px solid var(--border);border-radius:28px;background:linear-gradient(160deg,rgba(57,38,86,.96),rgba(17,11,27,.98))}
.hero-glow{position:absolute;width:240px;height:240px;left:50%;top:-125px;transform:translateX(-50%);border-radius:50%;background:rgba(245,199,108,.28);filter:blur(48px)}
.temple-icon{position:relative;font-size:58px}.eyebrow{margin:0 0 7px;color:var(--gold);font-family:Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.18em}
h1,h2,h3,p{margin-top:0}h1{position:relative;margin-bottom:14px;font-size:clamp(42px,11vw,72px)}h1 span{color:var(--gold)}
.intro,.muted,.summary-card p,.card p,.council-card p,.building-card p{color:var(--muted);font-family:Arial,sans-serif;line-height:1.45}
.start-card{max-width:900px;margin:auto}.start-card h2{text-align:center}
.god-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.god-card{min-height:145px;padding:15px;color:var(--text);text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(145deg,var(--panel2),var(--panel))}
.god-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,199,108,.15)}.god-card .symbol{display:block;margin-bottom:8px;font-size:34px}.god-card strong{display:block;color:var(--cream);font-size:19px}.god-card small{display:block;margin-top:5px;color:var(--muted)}
.primary-button,.secondary-button,.danger-button{width:100%;margin-top:16px;padding:16px;border-radius:16px;font-weight:800}
.primary-button{color:#251a08;border:none;background:linear-gradient(135deg,var(--gold),var(--gold2))}.primary-button:disabled{opacity:.45}
.secondary-button{color:var(--gold);border:1px solid var(--gold);background:transparent}.danger-button{color:white;border:1px solid rgba(255,111,125,.45);background:rgba(255,111,125,.12)}
.topbar{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(14px,env(safe-area-inset-top)) 14px 11px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(13,8,22,.91);backdrop-filter:blur(18px)}
.topbar h2{margin:0;color:var(--cream);font-size:22px}.top-actions{display:flex;gap:8px}.icon-button{width:44px;height:44px;color:white;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.year-button{padding:11px 13px;color:#241904;border:none;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));font-family:Arial,sans-serif;font-size:12px;font-weight:900}
.resource-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06)}.resource-strip div{padding:9px 4px;text-align:center;background:#15101f}.resource-strip span,.resource-strip strong,.resource-strip small{display:block}.resource-strip strong{margin:2px 0;color:var(--cream);font-family:Arial,sans-serif;font-size:14px}.resource-strip small{color:var(--muted);font-family:Arial,sans-serif;font-size:9px;text-transform:uppercase}
#main-content{padding:18px 14px calc(110px + var(--safe))}.view{display:none;max-width:960px;margin:auto}.view.active{display:block}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.section-heading h2{margin:0;font-size:27px}.subheading{margin-top:22px}
.pill{padding:7px 10px;color:var(--gold);border:1px solid var(--border);border-radius:999px;background:rgba(245,199,108,.08);font-family:Arial,sans-serif;font-size:11px;font-weight:800}
.summary-card,.selected-map-panel,.card,.log-card,.council-card,.building-card{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(145deg,rgba(40,27,59,.97),rgba(24,16,37,.97));box-shadow:0 14px 28px rgba(0,0,0,.2)}
.summary-card{margin-bottom:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.stat{padding:9px 7px;text-align:center;border-radius:12px;background:rgba(255,255,255,.04);font-family:Arial,sans-serif}.stat strong,.stat small{display:block}.stat small{margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase}
.map-toolbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px}.map-filter{flex:0 0 auto;padding:8px 11px;color:var(--muted);border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04);font-family:Arial,sans-serif;font-size:11px}.map-filter.active{color:#241904;border-color:var(--gold);background:var(--gold);font-weight:800}
.greece-map{position:relative;overflow:hidden;aspect-ratio:1.18/1;min-height:520px;border:1px solid var(--border);border-radius:25px;background:radial-gradient(circle at 55% 45%,rgba(95,176,205,.22),transparent 30%),linear-gradient(160deg,#15334b,#0e1d34 55%,#101329);box-shadow:inset 0 0 80px rgba(0,0,0,.45),0 20px 50px rgba(0,0,0,.28)}
.greece-map:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1px);background-size:22px 22px;opacity:.08}
.map-land{position:absolute;background:linear-gradient(145deg,#627049,#35422f);border:1px solid rgba(255,225,160,.18);box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.3)}
.mainland{left:23%;top:9%;width:42%;height:55%;clip-path:polygon(24% 0,65% 7%,86% 24%,74% 45%,89% 67%,66% 100%,40% 89%,17% 65%,0 35%)}
.peloponnese{left:20%;top:54%;width:31%;height:28%;clip-path:polygon(23% 0,75% 10%,100% 48%,72% 100%,25% 84%,0 45%)}
.crete-island{left:43%;top:84%;width:31%;height:7%;border-radius:50% 40% 45% 50%;transform:rotate(-4deg)}
.asia-minor{right:-9%;top:16%;width:30%;height:48%;clip-path:polygon(18% 0,100% 8%,100% 100%,0 87%,24% 53%)}
.map-sea-label{position:absolute;right:24%;top:53%;z-index:1;color:rgba(181,220,239,.32);font-family:Arial,sans-serif;font-size:14px;font-weight:900;letter-spacing:.2em;transform:rotate(-12deg)}
.route-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.route-layer path{fill:none;stroke:rgba(245,199,108,.22);stroke-width:3;stroke-dasharray:8 10}
.cloud,.ship{position:absolute;z-index:3;opacity:.55;pointer-events:none}.cloud{font-size:32px;animation:drift 18s linear infinite}.cloud-a{top:10%;left:-8%}.cloud-b{top:65%;left:-15%;animation-duration:24s;animation-delay:-8s}.ship{font-size:26px;left:58%;top:60%;animation:sail 14s ease-in-out infinite}
@keyframes drift{to{transform:translateX(115vw)}}@keyframes sail{50%{transform:translate(90px,-35px) rotate(-8deg)}}
.map-marker{position:absolute;z-index:5;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:none;background:transparent;color:white;transition:transform .2s ease,filter .2s ease}
.map-marker:active{transform:translate(-50%,-50%) scale(.92)}.marker-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:23px;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 20px currentColor,0 6px 15px rgba(0,0,0,.5)}
.marker-label{padding:3px 6px;border-radius:8px;background:rgba(9,7,16,.82);font-family:Arial,sans-serif;font-size:9px;font-weight:900;white-space:nowrap}
.map-marker.player{color:var(--green)}.map-marker.rival{color:var(--red)}.map-marker.sacred{color:var(--gold)}.map-marker.danger{color:var(--orange);animation:monsterPulse 1.8s ease-in-out infinite}.map-marker.hero{color:var(--blue);animation:float 2.2s ease-in-out infinite}.map-marker.event{color:#d79cff;animation:pulse 1.6s ease-in-out infinite}
@keyframes float{50%{transform:translate(-50%,-58%)}}@keyframes pulse{50%{filter:brightness(1.6);transform:translate(-50%,-50%) scale(1.08)}}@keyframes monsterPulse{50%{filter:drop-shadow(0 0 12px var(--orange));transform:translate(-50%,-50%) scale(1.06)}}
.map-legend{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px;color:var(--muted);font-family:Arial,sans-serif;font-size:10px}.map-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:9px;height:9px;border-radius:50%}.legend-dot.player{background:var(--green)}.legend-dot.rival{background:var(--red)}.legend-dot.sacred{background:var(--gold)}.legend-dot.danger{background:var(--orange)}
.selected-map-panel{min-height:120px}.selected-map-panel.empty{text-align:center;color:var(--muted);font-family:Arial,sans-serif}
.stack{display:grid;gap:12px}.card-row,.hero-top,.monster-top,.choice-row,.building-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.portrait{font-size:34px}.flex1{flex:1}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.tag{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted);font-family:Arial,sans-serif;font-size:10px}.tag.gold{color:var(--gold);border:1px solid var(--border)}
.meter{height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--gold))}.meter.red span{background:linear-gradient(90deg,var(--red),#ffad6a)}.meter.green span{background:linear-gradient(90deg,var(--green),var(--blue))}.meter.orange span{background:linear-gradient(90deg,var(--orange),#ffd66b)}
.card-button,.choice-button,.action-button{padding:11px 13px;color:var(--cream);border:1px solid var(--border);border-radius:12px;background:rgba(245,199,108,.08);font-family:Arial,sans-serif;font-weight:800}.card-button:disabled,.choice-button:disabled,.action-button:disabled{opacity:.42}
.choice-row{align-items:stretch;margin-top:13px}.choice-button{flex:1}.choice-button.good{border-color:rgba(109,213,154,.35);background:rgba(109,213,154,.08)}.choice-button.bad{border-color:rgba(255,111,125,.32);background:rgba(255,111,125,.08)}
.council-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.council-head{display:flex;align-items:center;gap:10px}.council-icon{font-size:34px}
.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.resource-card{text-align:center}.resource-card .resource-icon{font-size:34px}.resource-card strong{display:block;margin:7px 0 4px;font-family:Arial,sans-serif;font-size:24px}.resource-card small{color:var(--muted);font-family:Arial,sans-serif}
.skill-grid,.building-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.skill-chip,.building-chip{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);font-family:Arial,sans-serif;font-size:11px}.skill-chip.unlocked,.building-chip.built{border-color:rgba(109,213,154,.38);background:rgba(109,213,154,.08)}
.boss-phase{padding:10px 12px;border:1px solid rgba(255,157,85,.28);border-radius:12px;background:rgba(255,157,85,.08);font-family:Arial,sans-serif;color:var(--orange);font-weight:800}
.battle-log{display:grid;gap:7px;margin:12px 0}.battle-line{padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);font-family:Arial,sans-serif}
.bottom-nav{position:fixed;z-index:30;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(16,1fr);padding:7px 1px calc(7px + var(--safe));border-top:1px solid rgba(255,255,255,.08);background:rgba(17,11,27,.97);backdrop-filter:blur(18px)}.nav-button{padding:5px 0;color:var(--muted);border:none;background:transparent;font-family:Arial,sans-serif;font-size:6.5px}.nav-button span{display:block;margin-bottom:2px;font-size:17px}.nav-button.active{color:var(--gold)}
.modal{position:fixed;z-index:50;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.74);backdrop-filter:blur(6px)}.modal-card{position:relative;width:min(100%,780px);max-height:90vh;overflow-y:auto;padding:24px 18px 20px;border:1px solid var(--border);border-radius:24px;background:#1b132a}.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;color:white;border:none;border-radius:50%;background:rgba(255,255,255,.08)}.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.action-grid button{min-height:70px}
.toast{position:fixed;z-index:80;right:16px;bottom:calc(110px + var(--safe));left:16px;max-width:520px;margin:auto;padding:13px 16px;text-align:center;border:1px solid var(--border);border-radius:14px;background:#2a1e3d;font-family:Arial,sans-serif;font-weight:700}
@media(min-width:720px){.god-grid{grid-template-columns:repeat(3,1fr)}.resource-grid{grid-template-columns:repeat(4,1fr)}.council-grid{grid-template-columns:repeat(3,1fr)}.modal{align-items:center}.greece-map{min-height:650px}}


/* Version 0.6.0 — War of the Titans */
.titan-card{position:relative;overflow:hidden}
.titan-card:after{content:"";position:absolute;width:120px;height:120px;right:-45px;top:-50px;border-radius:50%;background:rgba(255,157,85,.08)}
.titan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.titan-icon{font-size:42px}
.seal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.seal-stat{padding:9px;text-align:center;border-radius:12px;background:rgba(255,255,255,.04);font-family:Arial,sans-serif}
.seal-stat strong,.seal-stat small{display:block}.seal-stat small{margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase}
.titan-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.titan-choice button{min-height:64px}
.titan-awake{border-color:rgba(255,111,125,.42);background:linear-gradient(145deg,rgba(77,27,43,.97),rgba(31,14,29,.97))}
.titan-allied{border-color:rgba(109,213,154,.42)}
.titan-sealed{border-color:rgba(102,199,239,.25)}
.council-vote-card{border:1px solid rgba(245,199,108,.28);background:rgba(245,199,108,.06)}
.vote-board{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.vote-member{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);font-family:Arial,sans-serif;font-size:11px}
.vote-member.yes{border:1px solid rgba(109,213,154,.35)}
.vote-member.no{border:1px solid rgba(255,111,125,.35)}
.vote-member.undecided{border:1px solid rgba(245,199,108,.35)}
.tartarus-warning{color:var(--orange)}
@media(min-width:720px){.vote-board{grid-template-columns:repeat(3,1fr)}}


/* Version 0.7.0 — The Age of Legends */
.kingdom-card,.economy-card,.artifact-card,.victory-card,.bloodline-card{position:relative;overflow:hidden}
.kingdom-card:after,.artifact-card:after{content:"";position:absolute;width:110px;height:110px;right:-40px;top:-45px;border-radius:50%;background:rgba(245,199,108,.06)}
.kingdom-banner{display:flex;align-items:center;gap:10px}.kingdom-banner span{font-size:38px}
.diplomacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.diplomacy-stat{padding:9px;text-align:center;border-radius:12px;background:rgba(255,255,255,.04);font-family:Arial,sans-serif}
.diplomacy-stat strong,.diplomacy-stat small{display:block}.diplomacy-stat small{margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase}
.war-badge{color:var(--red);border:1px solid rgba(255,111,125,.35);background:rgba(255,111,125,.08)}
.peace-badge{color:var(--green);border:1px solid rgba(109,213,154,.35);background:rgba(109,213,154,.08)}
.gold-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.gold-action{min-height:78px}
.income-breakdown{display:grid;gap:7px;margin-top:12px}
.income-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-family:Arial,sans-serif;color:var(--muted)}
.income-row:last-child{border-bottom:none}.income-row strong{color:var(--cream)}
.risk-low{color:var(--green)}.risk-medium{color:var(--gold)}.risk-high{color:var(--red)}
.artifact-icon{font-size:43px}.artifact-equipped{border-color:rgba(109,213,154,.4)}
.victory-progress{margin-top:10px}.victory-complete{border-color:rgba(245,199,108,.48);background:linear-gradient(145deg,rgba(70,51,27,.96),rgba(28,20,30,.97))}
.family-tree{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:12px 0}.family-node{padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-family:Arial,sans-serif;font-size:11px}.family-arrow{color:var(--gold)}
.olympic-event{border-color:rgba(245,199,108,.34);background:rgba(245,199,108,.06)}
.enterprise-active{border-color:rgba(102,199,239,.35)}
.tax-slider{width:100%;margin:10px 0}
@media(max-width:480px){
  .bottom-nav{grid-template-columns:repeat(8,1fr);overflow-x:auto;display:flex}
  .nav-button{flex:0 0 12.5%;min-width:48px}
}


/* Version 0.8.0 — Hero Mastery & Living Cities */
.city-district-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.district-button{min-height:74px;text-align:left}
.city-project{border-color:rgba(102,199,239,.35);background:rgba(102,199,239,.07)}
.city-event-card{border-color:rgba(215,156,255,.35)}
.citizen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.citizen-card{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);font-family:Arial,sans-serif}
.citizen-card strong,.citizen-card small{display:block}.citizen-card small{margin-top:3px;color:var(--muted)}
.market-grid,.mentor-grid,.ability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.market-item,.mentor-item,.ability-item{padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);font-family:Arial,sans-serif}
.market-item strong,.mentor-item strong,.ability-item strong{display:block;margin-bottom:4px}
.training-card{border-color:rgba(157,114,255,.28)}
.training-active{border-color:rgba(102,199,239,.42);background:rgba(102,199,239,.07)}
.skill-tree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.skill-node{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);font-family:Arial,sans-serif}
.skill-node.learned{border-color:rgba(109,213,154,.4);background:rgba(109,213,154,.08)}
.skill-node.locked{opacity:.55}
.class-badge{color:var(--blue);border:1px solid rgba(102,199,239,.35);background:rgba(102,199,239,.08)}
.reputation-badge{color:var(--gold)}
.project-progress{margin-top:10px}
.city-tabs{display:flex;gap:7px;overflow-x:auto;margin:12px 0}
.city-tab{flex:0 0 auto;padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted);font-family:Arial,sans-serif;font-size:11px}
.city-tab.active{color:#241904;background:var(--gold);border-color:var(--gold);font-weight:800}
@media(min-width:720px){
  .city-district-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .citizen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mentor-grid,.ability-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}