:root{--gold:#d49a46;--gold2:#ffdb83;--panel:#422617;--panel2:#24130e;--ink:#f8e6c4;--bad:#ff9b8d;--good:#a9ff96;--blue:#86c7ff;--purple:#d8a1ff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#130b07}.hidden{display:none!important}button,input{font:inherit}.login-screen{position:fixed;inset:0;display:grid;place-items:center;background:#263421 url('assets/backgrounds/login_village.png') center/cover no-repeat}.top-strip{position:absolute;top:0;left:0;right:0;height:38px;display:flex;gap:20px;align-items:center;padding:0 18px;background:linear-gradient(#6f3a18,#2a160c);border-bottom:2px solid #a86b30;z-index:2}.top-strip span{font-size:13px;color:#e9c280}.login-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),rgba(0,0,0,.62)),linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.05),rgba(0,0,0,.24))}.login-card{position:relative;width:min(430px,92vw);padding:24px 28px;background:linear-gradient(#503124,#1f100b);border:6px solid #8b5528;border-radius:18px;box-shadow:0 18px 65px #000b;text-align:center}.game-logo{width:320px;max-width:100%;display:block;margin:-92px auto 10px;filter:drop-shadow(0 8px 10px #000)}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px}.tab{padding:9px;border:2px solid #9f682f;background:#312016;color:#edd3a8;border-radius:5px;cursor:pointer}.tab.active{background:#264768;color:white;box-shadow:inset 0 0 0 1px #87b5de}.auth-form{text-align:left}.auth-form label{display:block;font-weight:bold;margin:10px 0 5px}.auth-form input{width:100%;padding:9px;border:2px solid #20100a;background:#ccb9b4;color:#160d09;border-radius:2px}.form-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.small-row{font-size:13px}.check{display:flex!important;align-items:center;gap:6px;font-weight:normal!important}.check input{width:auto}.text-button{background:none;border:0;color:white;text-decoration:underline;cursor:pointer}.hero-button{width:100%;margin-top:15px;padding:16px;border:3px solid #ffdf76;border-radius:10px;background:linear-gradient(#efb44c,#b83e16 56%,#7d240d);color:#fff;font-size:28px;font-weight:bold;letter-spacing:1px;cursor:pointer;text-shadow:0 2px 1px #000}.auth-message{min-height:22px;text-align:center;color:#ffd589}.demo-box{display:flex;gap:8px;justify-content:center;margin-top:12px}.demo-box button{padding:7px 10px;border:1px solid #b67a33;background:#2f1d13;color:#ffe0a3;border-radius:5px;cursor:pointer}.login-note{font-size:12px;color:#d7bb8a;line-height:1.35}.game-screen{position:fixed;inset:0;background:#1b2d22;user-select:none}.game-screen canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}.game-screen canvas.placing{cursor:crosshair}.game-screen canvas.dragging{cursor:grabbing}.topbar{position:absolute;top:0;left:0;right:0;min-height:58px;padding:5px 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(#5b2d16,#2b160e);border-bottom:3px solid #9d6a31;box-shadow:0 4px 16px rgba(0,0,0,.5);z-index:5}.city-title{min-width:210px;padding:5px 12px;border:2px solid #27120a;background:#1e140f;border-radius:4px}.city-title span{font-size:18px;font-weight:bold}.city-title small{display:block;color:#e0bb76}.era-pill{width:260px;text-align:center;background:#7b3025;border:2px solid #300d0a;border-radius:22px;padding:3px 12px;box-shadow:inset 0 0 0 2px #a15c31}.era-pill span{font-weight:bold}.era-pill em{font-style:normal;font-size:12px;color:#ffd77d}.xp-track{height:9px;background:#3b1b19;border:1px solid #1a0c08;margin:2px 10px;border-radius:10px;overflow:hidden}.xp-track span{display:block;height:100%;background:linear-gradient(90deg,#f5af31,#fae46c);width:0%}.resources{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.resource{display:flex;gap:5px;align-items:center;min-width:64px;background:#2a160d;border:2px solid #815329;border-radius:5px;padding:4px 7px}.resource b{font-size:15px}.res-icon{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#bd8131;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}.small-btn{padding:8px 10px;border:2px solid #af7a36;border-radius:4px;background:#50311e;color:#ffe1a1;cursor:pointer}.small-btn.power{background:#263746}.save-status{padding:6px 10px;border:2px solid #6e4827;border-radius:999px;background:#20130d;color:#e9d09b;font-size:12px;min-width:120px;text-align:center}.save-status.saving{color:#fff1bf;border-color:#d4a14f}.save-status.saved{color:#baf6ac;border-color:#6f9f58}.save-status.dirty{color:#ffd6a1}.panel-toggle{position:absolute;top:86px;right:308px;width:36px;height:44px;border:3px solid #8a572b;border-right:0;border-radius:10px 0 0 10px;background:linear-gradient(#704527,#3d2418);color:#ffe0a3;cursor:pointer;z-index:5;box-shadow:0 8px 24px #0007;transition:right .22s ease}.panel-toggle.collapsed{right:12px;transform:scaleX(-1)}.right-panel{transition:transform .22s ease}.right-panel.collapsed{transform:translateX(calc(100% + 12px))}.placement-info{position:absolute;left:148px;bottom:106px;width:350px;max-height:32vh;overflow:auto;padding:12px;background:rgba(54,31,19,.96);border:3px solid #9d6a31;border-radius:10px;z-index:4;box-shadow:0 8px 28px #0009}.placement-info h3{margin:0 0 6px;color:#ffd77d}.placement-info p{margin:5px 0;font-size:13px}.placement-info.good{border-color:#75b255}.placement-info.bad{border-color:#b45447}.placement-info ul{margin:6px 0 0 18px;padding:0}.placement-info li{font-size:12px;margin:2px 0}.build-search{width:100%;margin:4px 0 10px;padding:10px 12px;border:2px solid #6b4527;background:#20120c;color:#ffe7bf;border-radius:8px}.build-search::placeholder{color:#c9ad86}.building-card .meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.building-card .meta .tag{margin:0}.fx-note{position:absolute;pointer-events:none}.left-rail{position:absolute;top:72px;left:8px;width:130px;display:grid;gap:10px;z-index:4}.portrait-card{position:relative;height:66px;padding-left:44px;border:3px solid #6d401f;border-radius:10px;background:linear-gradient(90deg,#9b4429,#d17828);color:#fff;text-align:left;font-weight:bold;cursor:pointer;box-shadow:0 5px 14px #0006;text-shadow:0 2px 1px #000}.portrait-card:before{content:'';position:absolute;left:-10px;top:7px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#d8b686,#81512e);border:3px solid #4e2b17}.portrait-card b{position:absolute;right:8px;top:8px;background:#5b1e17;border:2px solid #e0a24a;border-radius:50%;min-width:26px;height:26px;display:grid;place-items:center;padding:0 4px}.portrait-card.event{background:linear-gradient(90deg,#9b2821,#d7552d)}.portrait-card.guild{background:linear-gradient(90deg,#253d74,#4774aa)}.free-card{height:60px;border:3px solid #6d401f;border-radius:8px;background:linear-gradient(#d63d24,#8f1c14);color:#fff;font-size:16px;font-weight:bold;cursor:pointer;text-shadow:0 2px 1px #000;box-shadow:0 5px 14px #0006}.free-card.purple{background:linear-gradient(#7340b5,#33135f)}.right-panel{position:absolute;top:78px;right:12px;width:292px;max-height:calc(100vh - 180px);overflow:auto;padding:14px;background:var(--panel);border:4px solid #8a572b;border-radius:10px;box-shadow:0 8px 28px #0008;z-index:4;scrollbar-width:thin}.right-panel h3{margin:0 0 6px;color:#ffd77d}.right-panel p{font-size:14px;line-height:1.35}.panel-button{width:100%;margin-top:8px;padding:9px;border:2px solid #b67a33;background:linear-gradient(#704527,#3d2418);color:#ffe0a3;border-radius:7px;cursor:pointer}.panel-button.hot{background:linear-gradient(#8f4e24,#592716);box-shadow:0 0 0 1px #f2c36d inset}.panel-button b{float:right;background:#64271d;border:1px solid #d4a14f;border-radius:999px;min-width:22px;padding:1px 5px}.city-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.stat-pill{font-size:12px;background:#25160f;border:1px solid #6f4a29;border-radius:5px;padding:5px;text-align:center}.stat-pill.good{color:var(--good)}.stat-pill.warn{color:#ffd57e}.stat-pill.bad{color:var(--bad)}.loop-box{padding:8px;border:1px solid #76502c;background:#28170f;border-radius:8px;font-size:12px}.selected-panel{position:absolute;left:148px;bottom:106px;width:350px;max-height:42vh;overflow:auto;padding:12px;background:var(--panel);border:3px solid #9d6a31;border-radius:10px;z-index:4;box-shadow:0 8px 28px #0009}.selected-panel h3{margin:0 0 5px;color:#ffd77d}.selected-panel p{margin:5px 0;font-size:13px}.selected-panel button{margin:4px 4px 0 0;padding:7px 9px;border:1px solid #b67a33;background:#51301e;color:#ffe0a3;border-radius:5px;cursor:pointer}.selected-panel button:disabled{opacity:.45;cursor:not-allowed}.tag{display:inline-block;margin:2px 3px 2px 0;padding:2px 6px;background:#2c1b12;border:1px solid #76502c;border-radius:20px;font-size:12px}.bottom-bar{position:absolute;left:0;right:0;bottom:0;height:92px;display:flex;align-items:center;gap:7px;padding:8px 14px;background:linear-gradient(#573018,#2d170e);border-top:4px solid #9d6a31;z-index:5;box-shadow:0 -4px 16px rgba(0,0,0,.5)}.nav-tile{width:68px;height:56px;border:3px solid #9d6a31;border-radius:8px;background:linear-gradient(#8e572c,#432517);color:#ffe1a1;font-weight:bold;cursor:pointer}.nav-tile.active{outline:3px solid #f7d777;background:linear-gradient(#b56b34,#68351b)}.zoom-box{margin-left:auto;display:flex;align-items:center;gap:5px;background:#1e130d;border:2px solid #7c512b;border-radius:7px;padding:7px}.zoom-box button{width:32px;height:32px;border:1px solid #ad7a42;background:#51301e;color:#fff;border-radius:5px;cursor:pointer}.zoom-box span{min-width:50px;text-align:center}.hint{max-width:390px;font-size:13px;color:#e6c991}.drawer{position:absolute;left:148px;bottom:102px;width:780px;max-width:calc(100vw - 470px);max-height:48vh;overflow:auto;padding:14px;background:var(--panel);border:4px solid #8a572b;border-radius:12px;box-shadow:0 8px 28px #0009;z-index:4;transform:translateY(calc(100% + 125px));transition:.22s transform}.drawer.open{transform:translateY(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between}.drawer h2{margin:0 0 10px;color:#ffd77d}.close{border:2px solid #be8340;background:#3d2418;color:#ffe0a3;border-radius:5px;cursor:pointer;font-size:20px;line-height:1}.close.float{float:right}.build-tabs,.modal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}.build-tab,.modal-tab{padding:7px 10px;border:1px solid #9f6b33;background:#2a1a11;color:#f0d09a;border-radius:999px;cursor:pointer;font-size:13px}.build-tab.active,.modal-tab.active{background:#7e4d27;color:#fff;box-shadow:inset 0 0 0 1px #e4bc67}.building-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}.building-card{text-align:left;padding:8px;border:2px solid #8a572b;background:linear-gradient(#604026,#2c1a12);color:#f5e5c1;border-radius:9px;min-height:172px;cursor:pointer}.building-card.selected{outline:3px solid #f6d36b}.building-card.locked{filter:grayscale(1);opacity:.55;cursor:not-allowed}.building-card img{width:54px;height:54px;float:left;margin-right:8px}.building-card h4{margin:4px 0;color:#ffe29d}.building-card p{clear:both;margin:8px 0 4px;font-size:13px;line-height:1.25}.cost{font-size:12px;color:#e0bb76}.drawer-note{font-size:12px;color:#d2b98d}.modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.48);z-index:8}.modal-card{width:min(760px,92vw);max-height:84vh;overflow:auto;padding:20px;background:linear-gradient(#4f3022,#24130e);border:5px solid #9b6330;border-radius:15px;box-shadow:0 18px 70px #000;color:#f9e8c3}.modal-card.wide{width:min(1120px,94vw)}.modal-card h2{margin-top:0;color:#ffd77d}.grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}.card{padding:12px;border:2px solid #76502b;background:rgba(30,18,13,.72);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,226,157,.05)}.card.done{background:rgba(53,82,45,.65);border-color:#80a95c}.card.hot{border-color:#deaa56;box-shadow:0 0 0 1px rgba(255,229,136,.18),inset 0 0 20px rgba(255,168,43,.08)}.card h4{margin:0 0 6px;color:#ffe29d}.card p{font-size:13px;line-height:1.32}.card button,.modal-action{padding:7px 10px;border:1px solid #b67a33;background:#51301e;color:#ffe0a3;border-radius:5px;cursor:pointer;margin:4px 4px 0 0}.card button:disabled,.modal-action:disabled{opacity:.45;cursor:not-allowed}.progress{height:10px;background:#2b1a12;border:1px solid #76502b;border-radius:999px;overflow:hidden;margin:6px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,#eaa53e,#ffe07a)}.row{display:flex;gap:8px;align-items:center;justify-content:space-between}.mini{font-size:12px;color:#d3b887}.toast{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);padding:12px 18px;background:rgba(38,21,14,.96);border:3px solid #d39d4b;border-radius:999px;color:#ffecc7;z-index:20;box-shadow:0 8px 28px #0009;max-width:80vw;text-align:center;pointer-events:none}.pulse{animation:pulse 1.2s infinite}@keyframes pulse{50%{filter:brightness(1.22);transform:translateY(-1px)}}button:hover{filter:brightness(1.12)}button:active{transform:translateY(1px)}.right-panel::-webkit-scrollbar,.drawer::-webkit-scrollbar,.modal-card::-webkit-scrollbar{width:10px}.right-panel::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.modal-card::-webkit-scrollbar-thumb{background:#8a572b;border-radius:10px}.right-panel::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.modal-card::-webkit-scrollbar-track{background:#24130e}@media (max-width:1120px){.right-panel{display:none}.panel-toggle{display:none}.drawer{left:12px;max-width:calc(100vw - 24px);width:auto}.selected-panel,.placement-info{left:12px}.resources .resource{min-width:auto}.hint{display:none}}@media (max-height:760px){.drawer{max-height:52vh}.left-rail{top:64px}.bottom-bar{height:82px}.nav-tile{height:50px}.topbar{transform-origin:top left;transform:scale(.9);width:111%}.panel-toggle{top:74px}}

.quest-tracker{margin:8px 0;padding:9px;border:1px solid #7d5630;background:rgba(31,18,11,.82);border-radius:8px}
.quest-tracker h4{margin:0 0 5px;color:#ffdf8e;font-size:14px}
.quest-tracker p{margin:3px 0;font-size:12px}
.quest-tracker .progress{margin:6px 0 2px}
.city-event-alert{margin:8px 0;padding:8px;border:2px solid #d69e4b;background:linear-gradient(#6b341e,#33170f);border-radius:8px;font-size:12px;box-shadow:inset 0 0 18px rgba(255,201,92,.10)}
.road-quality{position:absolute;right:16px;bottom:102px;z-index:4;padding:8px 12px;background:rgba(40,23,14,.92);border:2px solid #8d6338;border-radius:9px;font-size:12px;color:#f5ddad;pointer-events:none}


/* V1.5 left rail graphics + cloud save polish */
.city-title{
  position:relative;
  padding-left:60px;
  min-width:230px;
}
.city-title:before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  border-radius:50%;
  border:3px solid #8b5728;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,239,176,.95), rgba(202,142,68,.95) 45%, rgba(91,49,22,.98) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.15), 0 3px 8px rgba(0,0,0,.45);
}
.city-title:after{
  content:'♛';
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-54%);
  color:#3b2010;
  font-size:21px;
  text-shadow:0 1px rgba(255,239,180,.75);
}
.save-status.saved{
  color:#baffad;
  border-color:#75b95f;
  box-shadow:0 0 0 1px rgba(139,255,113,.15) inset;
}
.save-status.saving{
  animation:cloudPulse 1.1s infinite;
}
@keyframes cloudPulse{50%{filter:brightness(1.25)}}

.left-rail{
  width:178px;
  gap:9px;
}
.portrait-card{
  height:68px;
  padding-left:78px;
  padding-right:36px;
  display:flex;
  align-items:center;
  overflow:visible;
  font-size:17px;
}
.portrait-card:before{
  left:8px;
  top:50%;
  width:58px;
  height:58px;
  transform:translateY(-50%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:3px solid #542c15;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 5px 10px rgba(0,0,0,.35);
}
.portrait-card.story:before{background-image:url('assets/ui/left_story.png');}
.portrait-card.event:before{background-image:url('assets/ui/left_event.png');}
.portrait-card.guild:before{background-image:url('assets/ui/left_guild.png');}
.portrait-card span{position:relative;z-index:1;white-space:nowrap;}
.portrait-card b{
  right:9px;
  top:8px;
  min-width:26px;
  height:26px;
  background:#4a1b13;
}
.free-card{
  position:relative;
  height:62px;
  padding-left:62px;
  text-align:left;
  font-size:16px;
}
.free-card:before{
  content:'';
  position:absolute;
  left:10px;
  top:50%;
  width:42px;
  height:42px;
  transform:translateY(-50%);
  background:url('assets/ui/left_reward.png') center/cover no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.free-card.purple:before{
  background-image:url('assets/ui/left_chest.png');
}
.drawer-note{
  color:#e8cfa1;
}
@media (max-width:1120px){
  .left-rail{width:156px}
  .portrait-card{padding-left:68px;font-size:15px}
  .portrait-card:before{width:52px;height:52px}
}


/* V1.6 daily return systems */
.daily-return-mini{
  margin-top:8px;
  border-color:#9f7034;
  background:linear-gradient(#352015,#21130d);
}
.daily-return-mini p{margin:4px 0}
.daily-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  padding:7px;
  border:1px solid #76502c;
  border-radius:7px;
  background:#20120c;
  font-size:12px;
}
.daily-mini.hot{
  border-color:#e2ae57;
  box-shadow:inset 0 0 18px rgba(255,204,87,.12);
}
.mini-claim{
  border:1px solid #b67a33;
  background:#55311e;
  color:#ffe0a3;
  border-radius:5px;
  padding:4px 8px;
  cursor:pointer;
}
.daily-calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(90px,1fr));
  gap:8px;
  margin:8px 0 12px;
}
.daily-cell{
  min-height:92px;
  padding:8px;
  border:2px solid #6d4727;
  border-radius:10px;
  background:linear-gradient(#4d3020,#24140e);
  box-shadow:inset 0 0 0 1px rgba(255,228,157,.05);
}
.daily-cell b{
  display:block;
  color:#ffe29d;
}
.daily-cell span{
  display:block;
  margin-top:4px;
  font-size:12px;
}
.daily-cell em{
  display:block;
  margin-top:5px;
  color:#d2b98d;
  font-size:11px;
  font-style:normal;
}
.daily-cell.today{
  border-color:#f0bd5e;
  box-shadow:0 0 0 1px rgba(255,216,113,.25), inset 0 0 22px rgba(255,191,67,.10);
}
.daily-cell.done{
  border-color:#6f9f58;
  background:linear-gradient(#34492c,#1d291b);
}
.daily-calendar.hot .daily-cell.today{
  animation:pulse 1.5s infinite;
}
.card.hot [data-claim-daily],
.card.hot [data-claim-citizen],
.card.hot [data-claim-tutorial],
.card.hot [data-event-shop]{
  box-shadow:0 0 0 2px rgba(255,216,113,.20);
}
@media (max-width:900px){
  .daily-calendar{grid-template-columns:repeat(2,1fr)}
}


/* V1.7 grand strategy graphics upgrade: original isometric/map UI art */
:root{--v17-stone:#c7aa73;--v17-red:#8d2f24;--v17-map:#16251f;}
.login-card{width:min(480px,94vw);overflow:visible;background:linear-gradient(180deg,rgba(86,50,30,.96),rgba(30,16,10,.98)),url('assets/ui/menu_panel_banner.png') center 2px/96% auto no-repeat;}
.login-card:before{content:'';position:absolute;inset:-16px;border-radius:24px;border:2px solid rgba(255,218,132,.45);pointer-events:none;box-shadow:0 0 0 8px rgba(49,25,13,.42),0 28px 90px rgba(0,0,0,.65)}
.login-art-strip{position:relative;margin:-4px 0 12px;border:3px solid #8f5d2e;border-radius:12px;overflow:hidden;background:#1c140d;box-shadow:inset 0 0 0 1px rgba(255,224,146,.18),0 8px 22px rgba(0,0,0,.35)}
.login-art-strip img{display:block;width:100%;height:92px;object-fit:cover;filter:saturate(1.12) contrast(1.05)}
.login-art-caption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:10px;align-items:end;padding:18px 12px 8px;background:linear-gradient(transparent,rgba(25,12,8,.82));text-align:left;text-shadow:0 2px 2px #000}
.login-art-caption strong{font-size:18px;color:#ffe8a9}.login-art-caption span{font-size:12px;color:#efd0a0}.hero-button{position:relative;box-shadow:inset 0 1px rgba(255,255,255,.38),0 7px 0 #5b180d,0 11px 24px rgba(0,0,0,.42)}
.topbar{background:linear-gradient(180deg,rgba(95,50,23,.96),rgba(35,18,10,.98)),url('assets/ui/menu_panel_banner.png') center/900px 120px no-repeat;border-image:linear-gradient(90deg,#6d3e1d,#f1c56c,#6d3e1d) 1;}
.city-title:before{background-image:url('assets/ui/tab_dynasty.png');background-size:cover;background-position:center}.city-title:after{content:''}.era-pill{background:linear-gradient(180deg,#934234,#542016);position:relative;overflow:hidden}.era-pill:before{content:'';position:absolute;inset:0;background:url('assets/ui/menu_civilization_panorama.png') center/420px 115px no-repeat;opacity:.16;mix-blend-mode:screen;pointer-events:none}.era-pill>*{position:relative}
.resource{background:linear-gradient(180deg,#3a2113,#20120c);box-shadow:inset 0 0 0 1px rgba(255,218,132,.1),0 3px 8px rgba(0,0,0,.25)}.res-icon{background:radial-gradient(circle at 35% 30%,#ffe3a0,#c38332 55%,#6b3519);border:1px solid #f1c56c}
.drawer{width:880px;max-height:56vh;background:linear-gradient(180deg,rgba(79,48,31,.97),rgba(35,19,12,.98));border-color:#a67335;box-shadow:0 14px 46px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,226,151,.10)}
.drawer:before,.modal-card:before,.right-panel:before,.selected-panel:before,.placement-info:before{content:'';position:absolute;inset:0;border-radius:inherit;background:url('assets/ui/menu_civilization_panorama.png') center top/cover no-repeat;opacity:.085;pointer-events:none;mix-blend-mode:screen}
.drawer-head,.drawer-showcase,.build-search,.build-tabs,.building-cards,.drawer-note,.modal-card>*{position:relative}.drawer h2,.modal-card h2{padding-left:38px;text-shadow:0 2px 2px #000}.drawer h2:before,.modal-card h2:before{content:'';position:absolute;width:32px;height:32px;margin-left:-38px;margin-top:-3px;background:url('assets/ui/nav_build.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)}
.drawer-showcase{display:grid;grid-template-columns:230px 1fr;gap:13px;align-items:center;margin:0 0 12px;padding:9px;border:2px solid #85582e;border-radius:12px;background:linear-gradient(90deg,rgba(30,18,11,.85),rgba(87,50,28,.64));box-shadow:inset 0 0 20px rgba(255,198,91,.05)}
.drawer-showcase img{width:100%;height:82px;object-fit:cover;border:2px solid #c6924a;border-radius:9px;box-shadow:0 5px 14px rgba(0,0,0,.35)}.drawer-showcase strong{display:block;color:#ffe29d;font-size:20px}.drawer-showcase span{font-size:13px;color:#e8cfa1}.build-search{background:#1c110b url('assets/ui/tab_collection.png') 10px center/27px no-repeat;padding-left:46px;border-color:#9f7034}
.build-tab,.modal-tab{display:flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;background:linear-gradient(180deg,#3b2417,#23140d);border-color:#8b5a2d;box-shadow:inset 0 0 0 1px rgba(255,226,151,.06)}.build-tab img,.modal-tab img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 1px #0008)}.build-tab.active,.modal-tab.active{background:linear-gradient(180deg,#96602f,#5b3019);box-shadow:0 0 0 1px rgba(255,218,132,.45),inset 0 0 16px rgba(255,191,66,.16)}
.building-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.building-card{position:relative;overflow:hidden;min-height:255px;padding:0 10px 10px;background:linear-gradient(180deg,#654127,#2a190f);border-color:#986431;box-shadow:0 6px 15px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,226,151,.08)}.building-card:before{content:'';position:absolute;left:0;right:0;top:0;height:88px;background:url('assets/ui/menu_civilization_panorama.png') center/360px 110px no-repeat;opacity:.22}.building-art{position:relative;display:block;height:116px;margin:4px -2px 0;border-bottom:1px solid rgba(255,224,146,.16)}.building-art:after{content:'';position:absolute;left:14px;right:14px;bottom:8px;height:28px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(6px)}.building-art img{position:relative;z-index:1;width:100%;height:122px;object-fit:contain;float:none;margin:0;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}.building-card-title{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;margin-top:3px}.building-card-title img{float:none;width:34px;height:34px;margin:0;object-fit:contain}.building-card h4{font-size:16px;margin:0;color:#ffe5a4}.building-card p{clear:none;margin:7px 0 5px}.building-card.selected{outline:3px solid #ffe07a;box-shadow:0 0 0 4px rgba(255,207,75,.2),0 8px 18px #0008}.building-card.locked .building-art{filter:grayscale(1)}
.left-rail{width:190px}.portrait-card,.free-card{border-color:#a36c34;box-shadow:0 8px 22px rgba(0,0,0,.44), inset 0 0 16px rgba(255,213,123,.08)}.portrait-card:after,.free-card:after{content:'';position:absolute;inset:3px;border:1px solid rgba(255,222,148,.18);border-radius:7px;pointer-events:none}.portrait-card.story{background:linear-gradient(90deg,#7a3825,#c96a2a)}.portrait-card.event{background:linear-gradient(90deg,#862c28,#d05b32)}.portrait-card.guild{background:linear-gradient(90deg,#253d74,#5b83b8)}.free-card{background:linear-gradient(90deg,#8d2519,#d85a2c)}.free-card.purple{background:linear-gradient(90deg,#40206f,#8651c6)}
.right-panel{position:absolute;background:linear-gradient(180deg,rgba(73,43,27,.97),rgba(34,18,11,.98));border-color:#a16b34}.right-panel h3{display:flex;align-items:center;gap:8px;font-size:20px}.right-panel h3:before{content:'';width:44px;height:44px;display:inline-block;background:url('assets/ui/advisor_portrait.png') center/contain no-repeat;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}.panel-button{position:relative;overflow:hidden;text-align:left;padding-left:42px;background:linear-gradient(180deg,#704527,#3a2114)}.panel-button:before{content:'';position:absolute;left:8px;top:50%;width:25px;height:25px;transform:translateY(-50%);background:url('assets/ui/tab_tasks.png') center/contain no-repeat}.panel-button#openBuildMenu:before{background-image:url('assets/ui/nav_build.png')}.panel-button#openActivityHub:before{background-image:url('assets/ui/tab_tasks.png')}.panel-button#openResearch:before{background-image:url('assets/ui/tab_research.png')}.panel-button#openWorld:before{background-image:url('assets/ui/tab_world.png')}.panel-button#openOrders:before{background-image:url('assets/ui/tab_orders.png')}.panel-button#openCollection:before{background-image:url('assets/ui/tab_collection.png')}.panel-button#openAdvisors:before{background-image:url('assets/ui/tab_advisors.png')}.panel-button#openCrafting:before{background-image:url('assets/ui/tab_crafting.png')}.panel-button#openDynasty:before{background-image:url('assets/ui/tab_dynasty.png')}.panel-button#openInventory:before{background-image:url('assets/ui/tab_inventory.png')}.panel-button#collectAllBtn:before{background-image:url('assets/ui/resource_coin.png')}
.bottom-bar{background:linear-gradient(180deg,rgba(95,51,23,.98),rgba(35,18,10,.99));border-top-color:#b07b3b}.nav-tile{position:relative;padding-top:32px;width:74px;height:66px;background:linear-gradient(180deg,#7a4b25,#382015);box-shadow:inset 0 0 0 1px rgba(255,226,151,.08),0 5px 12px rgba(0,0,0,.35)}.nav-tile:before{content:'';position:absolute;top:4px;left:50%;width:31px;height:31px;transform:translateX(-50%);background:url('assets/ui/nav_build.png') center/contain no-repeat;filter:drop-shadow(0 2px 1px #0008)}#moveBtn:before{background-image:url('assets/ui/nav_move.png')}#bulldozeBtn:before{background-image:url('assets/ui/nav_remove.png')}#roadsBtn:before{background-image:url('assets/ui/nav_road.png')}#inventoryBtn:before{background-image:url('assets/ui/nav_items.png')}#researchBtn2:before{background-image:url('assets/ui/nav_tech.png')}#mapBtn2:before{background-image:url('assets/ui/nav_map.png')}#flatBtn:before{background-image:url('assets/ui/nav_flat.png')}.nav-tile.active{outline-color:#ffe58f;background:linear-gradient(180deg,#ad6b31,#63331a)}
.modal-card{position:relative;background:linear-gradient(180deg,rgba(75,45,29,.98),rgba(32,17,10,.99));border-color:#a66f37}.modal-hero{display:flex;align-items:center;gap:14px;margin:4px 0 12px;padding:12px 14px;border:2px solid #86582d;border-radius:13px;background:linear-gradient(90deg,rgba(38,23,14,.92),rgba(97,55,30,.65)),url('assets/ui/menu_civilization_panorama.png') center/cover no-repeat}.modal-hero img{width:62px;height:62px;filter:drop-shadow(0 5px 4px rgba(0,0,0,.45))}.modal-hero strong{display:block;color:#ffe29d;font-size:22px}.modal-hero span{font-size:13px;color:#e7cba0}.card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(62,38,24,.88),rgba(29,18,12,.92));border-color:#896039;padding-top:15px}.card:after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#e7b85b,transparent);opacity:.55}.card-crest{position:absolute;right:8px;top:8px;width:34px;height:34px;background:url('assets/ui/tab_tasks.png') center/contain no-repeat;opacity:.46;filter:drop-shadow(0 2px 1px #000)}.card h4{padding-right:40px}.card.hot .card-crest{opacity:.85;background-image:url('assets/ui/resource_gem.png')}.card.done .card-crest{background-image:url('assets/ui/cat_decoration.png')}.codex-art{height:112px;margin:-3px 0 6px;border-radius:9px;background:radial-gradient(ellipse at center,rgba(255,223,138,.15),rgba(0,0,0,.13) 70%);display:grid;place-items:center}.codex-art img{max-width:100%;max-height:116px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}.daily-cell{position:relative;overflow:hidden}.daily-cell:before{content:'';position:absolute;right:-12px;bottom:-12px;width:68px;height:68px;background:url('assets/ui/tab_tasks.png') center/contain no-repeat;opacity:.12}.selected-panel,.placement-info{position:absolute;background:linear-gradient(180deg,rgba(75,45,29,.98),rgba(32,17,10,.99));border-color:#b17a3a}.selected-art,.placement-art{position:relative;display:flex;align-items:center;gap:10px;margin:-3px 0 7px}.selected-art img,.placement-art img{width:100px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}.selected-art h3,.placement-art h3{margin:0 0 3px}.selected-art p,.placement-art p{margin:0!important}.toast{background:linear-gradient(180deg,#5b3420,#26150d);border-color:#e5b565;box-shadow:0 10px 30px #000a, inset 0 0 0 1px rgba(255,226,151,.14)}
@media (max-width:1120px){.drawer-showcase{grid-template-columns:1fr}.drawer-showcase img{height:70px}.building-cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.left-rail{width:156px}.nav-tile{width:64px}.login-art-caption{display:block}}
@media (max-height:760px){.drawer-showcase{display:none}.building-card{min-height:218px}.building-art{height:86px}.building-art img{height:92px}.nav-tile{height:58px}}


/* === V1.8 GRAND STRATEGY NAVY-GOLD MENU OVERHAUL === */
:root{--gold:#c8a96b;--gold2:#f1deb0;--panel:#12203b;--panel2:#091120;--ink:#f3e5c4;--bad:#f4b3a5;--good:#b6ec8a;--blue:#93cbff;--purple:#dcb4ff}
html,body{background:#050a14;color:var(--ink)}
body:before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 50% 10%,rgba(113,145,198,.10),transparent 38%),linear-gradient(180deg,rgba(3,8,18,.2),rgba(3,8,18,.68));pointer-events:none;z-index:0}
.login-screen{background:linear-gradient(180deg,rgba(6,11,22,.48),rgba(5,10,18,.82)),url('assets/backgrounds/login_village.png') center/cover no-repeat}
.login-shade{background:radial-gradient(circle at top,rgba(205,168,93,.15),transparent 32%),linear-gradient(180deg,rgba(4,9,20,.04),rgba(4,8,18,.72))}
.top-strip{height:42px;background:linear-gradient(180deg,#162743,#09101c);border-bottom:1px solid rgba(214,180,109,.86);box-shadow:0 3px 14px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,235,188,.08);letter-spacing:.4px}
.login-card,.right-panel,.drawer,.modal-card,.selected-panel,.placement-info{background:linear-gradient(180deg,rgba(16,26,49,.97),rgba(8,14,26,.99));border:2px solid #ac8450;box-shadow:0 18px 45px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,230,177,.06)}
.login-card:before,.right-panel:after,.drawer:after,.modal-card:after,.selected-panel:after,.placement-info:after{content:'';position:absolute;left:12px;right:12px;top:10px;height:42px;inset:auto 12px auto 12px;border:0;box-shadow:none;border-radius:0;background:url('assets/ui/menu_panel_banner.png') center/contain no-repeat;opacity:.22;pointer-events:none}
.login-card{width:min(470px,92vw);padding-top:22px;border-radius:18px;overflow:hidden}
.game-logo{max-width:85%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.46))}
.login-art-strip{background:linear-gradient(180deg,rgba(9,16,30,.95),rgba(10,18,32,.85));border:1px solid rgba(202,170,98,.7);box-shadow:inset 0 0 0 1px rgba(255,232,180,.06),0 10px 18px rgba(0,0,0,.28)}
.login-art-caption strong{color:#f0dfb2;letter-spacing:.06em;text-transform:uppercase;font-size:20px}.login-art-caption span{color:#d8c4a0}
.login-card label,.login-note,.top-strip span{color:#d4c3a2}
.login-card input,.build-search{background:linear-gradient(180deg,#0f172c,#0a1120);color:var(--ink);border:1px solid #8b6a3d;box-shadow:inset 0 1px 0 rgba(255,236,193,.04)}
.tab,.hero-button,.demo-box button,.small-btn,.close,.panel-button,.build-tab,.modal-tab,.nav-tile,.portrait-card,.free-card,.card button,.zoom-box button{background:linear-gradient(180deg,#24334e,#101a2e)!important;color:var(--ink);border:1px solid #9a7748;box-shadow:inset 0 0 0 1px rgba(255,236,193,.05),0 5px 12px rgba(0,0,0,.26)}
.tab.active,.hero-button,.small-btn:hover,.panel-button:hover,.build-tab.active,.modal-tab.active,.nav-tile.active,.demo-box button:hover,.zoom-box button:hover{background:linear-gradient(180deg,#3b4f77,#16233b)!important;border-color:#e0bf78;box-shadow:0 0 0 1px rgba(236,202,127,.45), inset 0 0 24px rgba(255,240,202,.06), 0 8px 18px rgba(0,0,0,.32)}
.hero-button{letter-spacing:.1em;text-transform:uppercase}.auth-message{color:#ffe4a6}.demo-box{gap:10px}
.topbar{background:linear-gradient(180deg,rgba(16,26,49,.98),rgba(7,12,24,.98));border-bottom:1px solid rgba(210,178,105,.82);box-shadow:0 8px 18px rgba(0,0,0,.32)}
.city-title,.era-pill,.resource,.save-status{background:linear-gradient(180deg,#172744,#0d1525);border:1px solid rgba(172,132,80,.85);color:var(--ink)}
.right-panel{background:linear-gradient(180deg,rgba(16,26,49,.97),rgba(8,13,25,.99));padding-top:18px}
.right-panel h3,.drawer-head h2,.modal-card h2{font-size:22px;letter-spacing:.09em;text-transform:uppercase;color:#f3deb0}
.drawer{width:910px;max-height:58vh}.drawer:before,.modal-card:before,.right-panel:before,.selected-panel:before,.placement-info:before{background:url('assets/ui/menu_panel_banner.png') center top/cover no-repeat;opacity:.07}
.drawer-head{position:relative;padding:16px 18px 14px 18px;margin:-2px -2px 12px -2px;background:linear-gradient(180deg,rgba(14,21,39,.96),rgba(13,20,36,.4));border-bottom:1px solid rgba(211,177,104,.52)}
.drawer-showcase{background:linear-gradient(90deg,rgba(11,16,28,.92),rgba(25,39,68,.68));border:1px solid rgba(205,173,102,.72)}
.drawer-showcase strong{color:#f3ddb0;letter-spacing:.05em;text-transform:uppercase}.drawer-showcase span{color:#d7c39c}
.build-tabs,.modal-tabs{background:linear-gradient(180deg,rgba(11,17,31,.6),rgba(8,13,25,.1));padding:4px;border-radius:12px}
.build-tab,.modal-tab{background:linear-gradient(180deg,#1d2943,#0f1728)!important}
.building-card,.card{background:linear-gradient(180deg,rgba(25,38,65,.95),rgba(10,17,31,.96));border:1px solid #8e6d41;box-shadow:0 10px 20px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,229,179,.05)}
.building-card h4,.card h4{color:#f5deb0}.drawer-note,.hint,.card p,.selected-panel p,.placement-info p{color:#d7c39c}
.bottom-bar{background:linear-gradient(180deg,rgba(13,21,39,.98),rgba(7,11,21,.99));border-top:1px solid rgba(205,173,102,.84);box-shadow:0 -10px 18px rgba(0,0,0,.28)}
.nav-tile{background:linear-gradient(180deg,#1a2945,#0e1626)!important;border:1px solid #96754a}
.zoom-box{background:linear-gradient(180deg,#14223b,#0d1525);border:1px solid rgba(172,132,80,.82)}
.panel-toggle{background:linear-gradient(180deg,#22324f,#10182b);border:1px solid #a47d4c;color:#f2dfb7}
.selected-panel,.placement-info,.toast{background:linear-gradient(180deg,rgba(16,26,49,.98),rgba(8,13,25,.99));border:1px solid #a98553}
.toast{color:var(--ink);border:1px solid #dfc07c}
@media (max-width:1120px){.right-panel{width:260px}.drawer{width:min(94vw,910px)}}


/* === V1.9 DEEP GRAPHICS SYSTEM PATCH === */
.resource{position:relative;overflow:hidden;min-width:88px;padding:5px 9px 5px 7px;gap:6px}
.resource:after{content:'';position:absolute;inset:1px;border:1px solid rgba(244,219,159,.10);border-radius:10px;pointer-events:none}
.res-icon{width:32px;height:32px;display:grid;place-items:center;background:none;border:0;box-shadow:none;flex:0 0 auto}
.res-icon img,.res-img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45))}
.res-icon em{display:none}
.resource b{font-size:13px;color:#f6e6c1;text-shadow:0 1px 1px #000}
.left-rail{width:202px}
.portrait-card,.free-card{min-height:68px;background-size:cover!important;background-position:center!important;isolation:isolate}
.portrait-card:before,.free-card:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,18,.72),rgba(10,17,32,.36));z-index:-1;border-radius:inherit}
.portrait-card.story{background-image:url('assets/ui/left_story_panel.png')!important}
.portrait-card.event{background-image:url('assets/ui/left_event_panel.png')!important}
.portrait-card.guild{background-image:url('assets/ui/left_guild_panel.png')!important}
.free-card{background-image:url('assets/ui/left_reward_panel.png')!important}
.free-card.purple{background-image:url('assets/ui/modal_card_bg.png')!important}
.portrait-card span,.free-card{letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 3px rgba(0,0,0,.8)}
.building-card{background:linear-gradient(180deg,rgba(11,17,31,.36),rgba(9,14,25,.96)),url('assets/ui/card_building_bg.png') center top/cover no-repeat!important}
.building-card:before{background:linear-gradient(90deg,transparent,rgba(237,203,128,.8),transparent);height:2px;opacity:.5}
.building-art{background:radial-gradient(ellipse at center,rgba(255,225,150,.12),rgba(0,0,0,.18) 72%);border-radius:10px;margin-top:8px}
.building-art img{filter:drop-shadow(0 12px 10px rgba(0,0,0,.62)) saturate(1.07)}
.modal-hero{min-height:96px;border:1px solid rgba(211,178,105,.72);background:linear-gradient(90deg,rgba(7,11,20,.88),rgba(22,34,57,.66)),url('assets/ui/modal_card_bg.png') center/cover no-repeat!important}
.modal-hero.world{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/world_map_panel.png')!important}
.modal-hero.research{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/research_tree_bg.png')!important}
.research-visual,.world-visual{position:relative;overflow:hidden;border:1px solid rgba(211,178,105,.70);border-radius:14px;min-height:156px;margin:4px 0 14px;padding:18px;background:linear-gradient(90deg,rgba(6,10,18,.68),rgba(9,17,34,.34)),url('assets/ui/research_tree_bg.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,236,193,.05),0 10px 22px rgba(0,0,0,.25)}
.world-visual{background-image:linear-gradient(90deg,rgba(6,10,18,.60),rgba(9,17,34,.25)),url('assets/ui/world_map_panel.png')}
.research-visual h3,.world-visual h3{margin:0 0 6px;color:#f3deb0;letter-spacing:.08em;text-transform:uppercase}
.research-visual p,.world-visual p{max-width:650px;margin:0 0 10px;color:#ead5aa}
.research-line{position:absolute;left:310px;right:36px;top:76px;height:3px;background:linear-gradient(90deg,#d2a75d,#6e8fb8,#d2a75d);box-shadow:0 0 12px rgba(219,180,94,.38)}
.research-nodes{display:flex;gap:18px;align-items:center;margin-top:22px;position:relative;z-index:2;flex-wrap:wrap}
.research-node{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid #a98553;background:linear-gradient(180deg,#1b2c49,#0b1325);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.research-node.done{border-color:#e5c778;background:linear-gradient(180deg,#435a83,#182849)}
.research-node.hot{border-color:#ffdf84;box-shadow:0 0 0 3px rgba(255,218,132,.16),0 0 18px rgba(247,203,102,.35)}
.world-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.world-stats span,.research-summary span{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(211,178,105,.45);background:rgba(6,10,20,.48);border-radius:999px;padding:6px 10px;color:#f3deb0}
.province-card .sector{border-color:rgba(211,178,105,.30);background:rgba(8,14,27,.62)}
.grid-list .card{background:linear-gradient(180deg,rgba(16,27,49,.92),rgba(8,14,25,.96)),url('assets/ui/modal_card_bg.png') center/cover no-repeat}
.card.hot{box-shadow:0 0 0 1px rgba(255,224,143,.34),0 0 24px rgba(207,166,83,.16)}
.card.done{box-shadow:inset 0 0 0 1px rgba(177,230,145,.16)}
.card button{margin-top:6px}
.codex-art{background:radial-gradient(ellipse at center,rgba(255,223,138,.18),rgba(0,0,0,.18) 70%),url('assets/ui/card_building_bg.png') center/cover no-repeat;border:1px solid rgba(211,178,105,.28)}
.selected-art,.placement-art{background:linear-gradient(90deg,rgba(9,16,30,.62),rgba(19,30,52,.20));border:1px solid rgba(211,178,105,.28);border-radius:12px;padding:8px}
.selected-art img,.placement-art img{width:116px;height:88px}
@media (max-height:760px){.resource{min-width:70px}.res-icon{width:28px;height:28px}.res-icon img{width:30px;height:30px}.research-visual,.world-visual{min-height:110px}}


/* === V2.0 LIVING CITY VISUAL UPGRADE === */
#gameCanvas{filter:saturate(1.06) contrast(1.03) brightness(1.02)}
.topbar,.bottom-bar,.right-panel,.drawer,.modal-card,.selected-panel,.placement-info{backdrop-filter:blur(2px)}
.hint{opacity:.9}
#cityTitle,#playerBadge{cursor:pointer}
#openCityOverview:before{background-image:url('assets/ui/nav_build.png')!important}

/* === V2.1 CITY DETAILS PANEL === */
.city-detail-panel{right:22px;bottom:92px;left:auto;width:min(470px,32vw);max-height:70vh;overflow:auto;background:linear-gradient(180deg,rgba(10,17,29,.96),rgba(7,12,22,.98)),url('assets/ui/city_detail_bg.png') center top/cover no-repeat;border:2px solid rgba(206,176,108,.9);box-shadow:0 18px 48px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,235,188,.06)}
.city-detail-panel .tag{margin-right:6px;margin-bottom:4px}
.city-panel-hero{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:center;padding:10px;border:1px solid rgba(206,176,108,.35);border-radius:14px;background:linear-gradient(180deg,rgba(8,14,25,.62),rgba(17,28,45,.35))}
.city-panel-hero img{width:120px;height:96px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.55))}
.city-panel-head small{display:block;color:#d8caa4;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.city-panel-head h3{margin:0 0 5px;color:#f5e3bb;font-size:22px;letter-spacing:.03em}
.city-panel-head p{margin:0;color:#d6c39b}
.city-tag-row{margin-top:8px}
.city-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.city-metric{padding:10px 12px;border-radius:12px;border:1px solid rgba(206,176,108,.28);background:linear-gradient(180deg,rgba(8,13,24,.70),rgba(14,22,39,.5))}
.city-metric span{display:block;color:#cab98f;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.city-metric b{font-size:15px;color:#f4e1b2}
.city-metric.good b{color:#c6f0a6}
.city-panel-section{margin-top:12px;padding:12px;border:1px solid rgba(206,176,108,.25);border-radius:14px;background:linear-gradient(180deg,rgba(8,14,25,.55),rgba(12,18,31,.35))}
.city-panel-section h4{margin:0 0 8px;color:#f3ddb0;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.yield-row{display:flex;flex-wrap:wrap;gap:8px}
.yield-row span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid rgba(206,176,108,.25);background:rgba(8,12,21,.5)}
.yield-row img{width:18px;height:18px;object-fit:contain}
.yield-row.stack{display:grid;grid-template-columns:1fr;gap:7px}
.city-plan-list{display:grid;grid-template-columns:1fr;gap:8px}
.city-plan-list button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:10px 12px}
.city-plan-list button.active{outline:1px solid rgba(240,205,126,.58)}
.city-plan-list button small{display:block;color:#d9c7a0}
.city-panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.city-panel-actions button{flex:1 1 140px}

/* === V2.1 CITY OVERVIEW MODAL === */
.city-overview-board{display:grid;gap:14px}
.city-overview-banner{padding:18px;border-radius:16px;border:1px solid rgba(206,176,108,.35);background:linear-gradient(180deg,rgba(8,13,23,.66),rgba(17,27,44,.40)),url('assets/ui/terrain_banner_bg.png') center/cover no-repeat}
.city-overview-banner h3{margin:0 0 6px;color:#f4e1b2;text-transform:uppercase;letter-spacing:.08em}
.city-overview-banner p{margin:0;color:#dbcaa4;max-width:720px}
.city-overview-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.city-overview-metrics span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(206,176,108,.3);background:rgba(7,11,20,.46);color:#f3deb0}
.grid-list.two-col{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.city-card{background:linear-gradient(180deg,rgba(10,17,29,.92),rgba(7,12,22,.98)),url('assets/ui/city_detail_bg.png') center/cover no-repeat}
.city-mini-list{display:grid;gap:8px}
.city-mini-card{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:8px;border-radius:12px;background:rgba(8,12,21,.45);border:1px solid rgba(206,176,108,.18)}
.city-mini-card img{width:60px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.48))}
.city-mini-card b{display:block;color:#f3deb0}.city-mini-card span{display:block;color:#d7c59c;font-size:12px}

/* === V2.2 RESEARCH TREE UPGRADE === */
.research-tree-board{display:grid;gap:14px}
.research-tree-summary{padding:18px;border-radius:16px;border:1px solid rgba(206,176,108,.38);background:linear-gradient(180deg,rgba(8,13,23,.70),rgba(17,27,44,.44)),url('assets/ui/research_tree_board_bg.png') center/cover no-repeat}
.research-tree-summary h3{margin:0 0 6px;color:#f4e1b2;text-transform:uppercase;letter-spacing:.08em}
.research-tree-summary p{margin:0 0 10px;color:#dbcaa4;max-width:760px}
.age-lane{padding:14px;border:1px solid rgba(206,176,108,.25);border-radius:16px;background:linear-gradient(180deg,rgba(8,13,23,.48),rgba(14,21,37,.30))}
.age-lane-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.age-lane-head h4{margin:0;color:#f3ddb0;letter-spacing:.08em;text-transform:uppercase}
.age-lane-head span{color:#d8c69f}
.tech-node-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:10px}
.tech-node{position:relative;padding:12px;border-radius:14px;border:1px solid rgba(206,176,108,.22);background:linear-gradient(180deg,rgba(8,12,21,.80),rgba(13,21,38,.62));box-shadow:0 10px 20px rgba(0,0,0,.18)}
.tech-node:before{content:'';position:absolute;left:16px;right:16px;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(240,205,126,.75),transparent);opacity:.5}
.tech-node-top{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;margin-bottom:8px}
.tech-state{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#24334e,#111a2d);border:1px solid rgba(206,176,108,.45);color:#f3deb0;font-weight:700}
.tech-node h5{margin:0;color:#f4e1b2;font-size:15px}
.tech-node small{color:#d8c7a0}
.tech-node p{color:#d8c59c;font-size:13px;min-height:38px}
.tech-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tech-tags span{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(7,11,20,.52);border:1px solid rgba(206,176,108,.18);color:#e5d4ad}
.tech-node.done{border-color:rgba(170,223,124,.45);box-shadow:0 0 0 1px rgba(170,223,124,.12)}
.tech-node.done .tech-state{background:linear-gradient(180deg,#49693d,#20331d);border-color:rgba(170,223,124,.7);color:#d7f5bf}
.tech-node.ready{border-color:rgba(255,220,138,.5);box-shadow:0 0 0 1px rgba(255,220,138,.14), 0 0 18px rgba(240,205,126,.08)}
.tech-node.ready .tech-state{background:linear-gradient(180deg,#614a19,#2b210a);border-color:rgba(255,220,138,.8);color:#ffeab4}
.tech-node.locked{opacity:.78}
.modal-hero.city{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/city_detail_bg.png')!important}
.modal-hero.research{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/research_tree_board_bg.png')!important}
@media (max-width:1200px){.city-detail-panel{width:min(430px,40vw)} }
@media (max-width:900px){.city-detail-panel{left:12px;right:12px;width:auto;bottom:78px;max-height:52vh}.city-panel-hero{grid-template-columns:94px 1fr}.city-panel-hero img{width:88px;height:74px}.city-metric-grid{grid-template-columns:1fr 1fr}.tech-node-row{grid-template-columns:1fr}.grid-list.two-col{grid-template-columns:1fr}}


/* === V2.3 WORLD MAP EXPANSION === */
.world-board{margin:12px 0 16px;padding:14px;border:1px solid rgba(208,176,109,.35);border-radius:18px;background:linear-gradient(180deg,rgba(8,12,21,.64),rgba(14,22,39,.28))}
.world-board-art{border-radius:14px;overflow:hidden;border:1px solid rgba(208,176,109,.25);background:rgba(6,10,18,.4)}
.world-board-art img{width:100%;display:block;height:auto}
.province-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin-top:12px}
.province-node{padding:10px 8px;border-radius:12px;text-align:center;border:1px solid rgba(208,176,109,.22);background:linear-gradient(180deg,rgba(13,20,35,.88),rgba(8,12,21,.78))}
.province-node b{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 6px;border-radius:50%;background:#1b2d49;border:1px solid rgba(238,206,128,.45);color:#f3ddb0}
.province-node span{display:block;color:#ddcb9f;font-size:12px;line-height:1.25}
.province-node.scouted{box-shadow:0 0 0 1px rgba(144,189,231,.10)}
.province-node.done{box-shadow:0 0 0 1px rgba(170,223,124,.16);background:linear-gradient(180deg,rgba(24,40,31,.88),rgba(12,22,16,.80))}
.province-node.done b{background:#39582e}
.province-node.locked{opacity:.66}
.province-grid .card{background:linear-gradient(180deg,rgba(10,17,29,.92),rgba(7,12,22,.98)),url('assets/ui/province_card_art.png') center/cover no-repeat}
.province-header{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;margin-bottom:10px;padding:8px;border-radius:14px;border:1px solid rgba(208,176,109,.24);background:rgba(7,11,20,.42)}
.province-header.fogged{filter:saturate(.35) brightness(.9)}
.province-header img{width:88px;height:60px;object-fit:cover;border-radius:10px;border:1px solid rgba(208,176,109,.25)}
.province-header small{display:block;color:#cfbc95;text-transform:uppercase;letter-spacing:.1em}
.province-header h5{margin:2px 0 4px;color:#f3ddb0;font-size:18px}
.province-header span{color:#dbc79d;font-size:12px}
.sector-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.sector{padding:10px 12px;border-radius:12px;border:1px solid rgba(208,176,109,.18);background:rgba(7,11,20,.48)}
.sector.done{border-color:rgba(170,223,124,.36);background:rgba(18,34,20,.55)}
.sector b,.sector span,.sector small,.sector em{display:block}
.sector b{color:#f1dfb6;margin-bottom:2px}.sector span{color:#d6c39d;font-size:13px}.sector small{color:#cbb88f;margin:5px 0 6px}.sector em{color:#bbe79d;font-style:normal;font-size:12px}
.sector-actions{display:flex;gap:8px;flex-wrap:wrap}
.claim-province{margin-top:10px}

/* === V2.4 BUILDING EVOLUTION === */
.building-card .tag{position:relative}
.building-card.selected{box-shadow:0 0 0 1px rgba(240,205,126,.35), 0 0 26px rgba(240,205,126,.14)}
.city-panel-section .yield-row span b{color:#f4e1b2}
.city-panel-head h3:after{content:'';display:block;width:80px;height:2px;margin-top:7px;background:linear-gradient(90deg,rgba(240,205,126,.7),transparent)}
.city-panel-hero img{background:radial-gradient(ellipse at center,rgba(255,225,150,.12),rgba(0,0,0,0) 70%)}
@media (max-width:900px){.province-track{grid-template-columns:repeat(2,minmax(120px,1fr))}.province-header{grid-template-columns:72px 1fr}.province-header img{width:72px;height:52px}}


/* === V2.5 DAILY RETURN SYSTEM UPGRADE === */
.daily-calendar-v25{
  display:grid;
  grid-template-columns:repeat(5,minmax(118px,1fr));
  gap:8px;
  margin:8px 0 12px;
}
.daily-calendar-v25 .daily-cell{
  position:relative;
  min-height:92px;
  padding:10px;
  border-radius:13px;
  border:1px solid rgba(206,176,108,.25);
  background:linear-gradient(180deg,rgba(9,15,28,.82),rgba(14,23,40,.60));
  box-shadow:inset 0 0 0 1px rgba(255,235,188,.04);
  overflow:hidden;
}
.daily-calendar-v25 .daily-cell:before{
  content:'';
  position:absolute;
  right:-16px;
  bottom:-20px;
  width:72px;
  height:72px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(241,205,126,.18),transparent 64%);
}
.daily-calendar-v25 .daily-cell b{display:block;color:#f4e1b2;margin-bottom:4px}
.daily-calendar-v25 .daily-cell span{display:block;color:#d8c6a0;font-size:12px;min-height:28px}
.daily-calendar-v25 .daily-cell em{display:block;color:#bfcfe8;font-size:11px;font-style:normal;margin-top:5px}
.daily-calendar-v25 .daily-cell.today{
  border-color:rgba(255,222,139,.86);
  box-shadow:0 0 0 2px rgba(255,222,139,.14),0 0 22px rgba(255,222,139,.12);
}
.daily-calendar-v25 .daily-cell.done{border-color:rgba(172,226,139,.34);background:linear-gradient(180deg,rgba(20,38,25,.78),rgba(11,22,17,.64))}
.daily-calendar-v25 .daily-cell.milestone:after{
  content:'★';
  position:absolute;
  top:8px;
  right:10px;
  color:#ffe29d;
  text-shadow:0 0 10px rgba(255,226,157,.5);
}
.daily-royal-card{
  border-color:rgba(240,205,126,.45)!important;
  background:linear-gradient(180deg,rgba(18,31,54,.92),rgba(7,12,22,.96)),url('assets/ui/menu_panel_banner.png') center/cover no-repeat!important;
}
@media (max-width:1200px){.daily-calendar-v25{grid-template-columns:repeat(4,minmax(110px,1fr))}}
@media (max-width:760px){.daily-calendar-v25{grid-template-columns:repeat(2,minmax(120px,1fr))}.daily-calendar-v25 .daily-cell{min-height:82px}}

/* === V2.6 SOUND AND ATMOSPHERE === */
.small-btn.sound{
  min-width:92px;
  background:linear-gradient(180deg,#29405f,#111d31)!important;
}
.small-btn.sound:before{content:'♪ ';color:#ffe2a0}
.small-btn.sound.muted{
  opacity:.78;
  background:linear-gradient(180deg,#2b2f3d,#11141e)!important;
}
.small-btn.sound.muted:before{content:'× ';color:#f4b3a5}


/* === V2.7 TUTORIAL / ADVISOR STORY === */
.panel-button.story{background:linear-gradient(180deg,#3b355c,#1a1831)!important;border-color:rgba(223,190,123,.34)!important;color:#f3dfb0}
.advisor-banner{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin:8px 0 14px;padding:10px;border-radius:16px;border:1px solid rgba(212,181,112,.28);background:linear-gradient(180deg,rgba(14,20,34,.88),rgba(9,14,24,.76))}
.advisor-banner.compact{grid-template-columns:120px 1fr}
.advisor-banner img{width:100%;height:112px;object-fit:cover;border-radius:12px;border:1px solid rgba(212,181,112,.24)}
.advisor-banner strong{display:block;color:#f4e1b2;font-size:18px;margin-bottom:4px}
.advisor-banner span{display:block;color:#d7c49b;font-size:13px;line-height:1.4}
.advisor-guide-head{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;margin-bottom:8px}
.advisor-guide-badge{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0c1,#8e6c32);color:#332410;font-size:26px;box-shadow:0 0 0 2px rgba(242,214,145,.28)}
.story-dots{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.story-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1a253b;border:1px solid rgba(212,181,112,.24);color:#d5c39b;font-size:11px}
.story-dot.done{background:#31492c;color:#c6edab}
.story-dot.current{background:#5b4a22;color:#f4e1b2}
.chapter-rail{display:grid;grid-template-columns:1fr;gap:8px}
.chapter-chip{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid rgba(212,181,112,.18);background:rgba(8,12,21,.42)}
.chapter-chip b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#24344f;color:#f1ddb0}
.chapter-chip.done{background:rgba(25,39,24,.55);border-color:rgba(154,205,117,.28)}
.chapter-chip.done b{background:#3c5f31;color:#d4efb2}
.chapter-chip.current{box-shadow:0 0 0 1px rgba(242,214,145,.18),0 0 18px rgba(242,214,145,.08)}
.chapter-chip span{color:#d9c69d;font-size:12px;line-height:1.35}
.story-choice-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.story-choice-list button{text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(212,181,112,.2);background:linear-gradient(180deg,rgba(17,24,38,.9),rgba(10,14,24,.86));color:#e8d7b0;cursor:pointer}
.story-choice-list button b,.story-choice-list button span,.story-choice-list button em{display:block}
.story-choice-list button span{font-size:12px;color:#ccb98d;margin-top:2px;line-height:1.35}
.story-choice-list button em{font-style:normal;font-size:11px;color:#afc3df;margin-top:6px}
.story-choice-list button:disabled{opacity:.6;cursor:not-allowed}
.journal-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.journal-entry{padding:9px 10px;border-radius:12px;background:rgba(9,14,24,.52);border:1px solid rgba(212,181,112,.14)}
.journal-entry b,.journal-entry span{display:block}
.journal-entry b{color:#f1ddb2;margin-bottom:3px}
.journal-entry span{color:#d2c099;font-size:12px;line-height:1.4}
.loop-box.advisor-story-mini{margin-top:8px;border-color:rgba(212,181,112,.25)}
@media (max-width:900px){.advisor-banner,.advisor-banner.compact{grid-template-columns:1fr}.advisor-banner img{height:92px}}


/* === V2.8 CAMPAIGN / HEROES === */
.panel-button.campaign{background:linear-gradient(180deg,#27455f,#16273c)!important;border-color:rgba(145,192,231,.34)!important;color:#d7e9ff}
.panel-button.heroes{background:linear-gradient(180deg,#5f4126,#312014)!important;border-color:rgba(223,190,123,.34)!important;color:#f4e1b2}
.loop-box.campaign-mini{margin-top:8px;border-color:rgba(141,192,236,.25)}
.campaign-banner{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin:8px 0 14px;padding:10px;border-radius:16px;border:1px solid rgba(145,192,231,.22);background:linear-gradient(180deg,rgba(12,22,39,.92),rgba(10,15,24,.76))}
.campaign-banner img{width:100%;height:112px;object-fit:cover;border-radius:12px;border:1px solid rgba(212,181,112,.18)}
.campaign-banner strong{display:block;color:#dcecff;font-size:18px;margin-bottom:4px}
.campaign-banner span{display:block;color:#d8e0ec;font-size:13px;line-height:1.4}
.campaign-track-card{margin-top:14px}
.campaign-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.campaign-node{padding:10px;border-radius:14px;background:rgba(8,14,24,.58);border:1px solid rgba(145,192,231,.16);display:grid;gap:4px}
.campaign-node b{font-size:20px}
.campaign-node span{color:#ebd8b0;font-weight:700;font-size:13px}
.campaign-node small{color:#c0cede;font-size:11px}
.campaign-node.done{background:rgba(20,43,34,.6);border-color:rgba(154,205,117,.3)}
.campaign-node.current{box-shadow:0 0 0 1px rgba(145,192,231,.32),0 0 18px rgba(145,192,231,.12)}
.hero-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.hero-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(23,37,57,.85);border:1px solid rgba(212,181,112,.16);color:#f0dfb5;font-size:12px}
.hero-chip.empty{color:#b8c7d8}
.hero-summary-card{margin:8px 0 14px}
@media (max-width:900px){.campaign-banner{grid-template-columns:1fr}.campaign-banner img{height:92px}}


/* === V2.9 BATTLES / ENEMIES / EQUIPMENT === */
.enemy-board,.battle-report-card,.hero-summary-card{
  border-color:rgba(222,190,124,.28)!important;
}
.enemy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}
.enemy-unit{
  padding:11px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(39,25,27,.72),rgba(12,15,24,.80));
  border:1px solid rgba(226,132,109,.25);
  box-shadow:inset 0 0 0 1px rgba(255,235,188,.035);
}
.enemy-unit b,.enemy-unit span,.enemy-unit em,.enemy-unit small{display:block}
.enemy-unit b{color:#ffd1c5;margin-bottom:4px}
.enemy-unit span{color:#e7c19d;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.enemy-unit em{color:#f2dfb6;font-style:normal;font-size:12px;margin-top:4px}
.enemy-unit small{color:#c9b99f;line-height:1.35;margin-top:4px}
.battle-report{
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(9,15,27,.78),rgba(12,18,30,.62));
  border:1px solid rgba(212,181,112,.18);
}
.battle-report.win{border-color:rgba(164,225,126,.34);box-shadow:0 0 0 1px rgba(164,225,126,.08)}
.battle-report.loss{border-color:rgba(233,128,107,.34);box-shadow:0 0 0 1px rgba(233,128,107,.08)}
.battle-report-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.battle-report-head b{color:#f5dfb3}
.battle-report-head span{color:#bcd7ee}
.battle-rounds{
  display:grid;
  gap:6px;
}
.battle-rounds p{
  margin:0;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(7,11,20,.42);
  border:1px solid rgba(212,181,112,.10);
  color:#d9c7a1;
}
.gear-slot{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:9px;
  align-items:center;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(212,181,112,.18);
  background:rgba(7,11,20,.45);
}
.gear-slot img{
  width:40px;
  height:40px;
  object-fit:contain;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));
}
.gear-slot b,.gear-slot span,.gear-slot em{display:block}
.gear-slot b{
  color:#f1ddb2;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}
.gear-slot span{color:#d7c6a0;font-size:12px}
.gear-slot em{color:#b7d3f0;font-style:normal;font-size:11px;margin-top:2px}
.gear-slot button{margin-top:5px}
.gear-slot.empty{opacity:.82}
.gear-slot.uncommon,.tag.uncommon{border-color:rgba(155,225,136,.35)!important}
.gear-slot.rare,.tag.rare{border-color:rgba(136,189,255,.40)!important}
.gear-slot.epic,.tag.epic{border-color:rgba(215,161,255,.45)!important}
.gear-slot.legendary,.tag.legendary{border-color:rgba(255,224,138,.58)!important;box-shadow:0 0 16px rgba(255,224,138,.10)}
.hero-gear-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:10px 0;
}
.gear-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.gear-action-row button{
  flex:1 1 120px;
}
.card .tag.common{color:#c9d4df}
.card .tag.uncommon{color:#b8f0a8}
.card .tag.rare{color:#a7ccff}
.card .tag.epic{color:#e3b8ff}
.card .tag.legendary{color:#ffe7a3}
.modal-hero.campaign{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/battle_report_banner.png')!important}
.modal-hero.heroes{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/equipment_panel_banner.png')!important}


/* === V3.0 REAL BATTLE SCREEN / V2.9.1 HOTFIX === */
.modal-hero.campaign{background-image:linear-gradient(90deg,rgba(7,11,20,.72),rgba(22,34,57,.36)),url('assets/ui/battle_screen_banner.png')!important}

/* === V3.0.2 MODAL CLOSE + GROUNDED BUILD PREVIEW HOTFIX === */
.modal{z-index:80}
#offlineModal{z-index:120}
#mainModal{z-index:90}
.modal-card{isolation:isolate}
.close,
.close.float{
  position:relative;
  z-index:50;
  min-width:36px;
  min-height:36px;
  display:inline-grid;
  place-items:center;
  padding:0;
  pointer-events:auto;
  touch-action:manipulation;
}
.modal-card>.close.float{
  position:sticky;
  top:0;
  float:right;
  margin:-6px -6px 8px 8px;
}
#offlineModal .modal-card>.close.float{
  position:absolute;
  top:18px;
  right:20px;
}
#offlineModal .modal-card{
  overflow:visible;
  padding-top:28px;
}
.placement-art{
  overflow:hidden;
}
.placement-art:before{
  content:'';
  position:absolute;
  left:20px;
  bottom:12px;
  width:112px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 68%);
  filter:blur(2px);
  pointer-events:none;
}
.placement-art img{
  position:relative;
  z-index:1;
  transform:translateY(7px);
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.5)) saturate(1.05)!important;
}
.placement-info{
  max-height:36vh;
}
.building-art img{
  transform:translateY(6px);
}
.battle-screen-card{margin-top:14px;border-color:rgba(145,192,231,.28)!important}
.battle-screen{display:grid;grid-template-columns:1fr 170px 1fr;gap:12px;align-items:center;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(11,18,29,.92),rgba(18,24,38,.75));border:1px solid rgba(212,181,112,.18);overflow:hidden;position:relative}
.battle-screen:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,214,120,.08),transparent 34%),linear-gradient(90deg,rgba(113,170,223,.06),transparent 40%,rgba(231,123,104,.06));pointer-events:none}
.battle-lane{display:grid;gap:10px;position:relative;z-index:1}
.combat-unit{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(7,11,20,.56);border:1px solid rgba(255,255,255,.06);animation:battleFloat 2.4s ease-in-out infinite;animation-delay:var(--delay,0s)}
.combat-unit.hero{border-color:rgba(113,170,223,.28)}
.combat-unit.enemy{border-color:rgba(231,123,104,.26)}
.combat-unit.resolved.hero{box-shadow:0 0 20px rgba(113,170,223,.08)}
.combat-unit.resolved.enemy{box-shadow:0 0 20px rgba(231,123,104,.08)}
.combat-avatar{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(34,55,82,.95),rgba(16,26,41,.95));border:1px solid rgba(212,181,112,.20);font-size:26px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))}
.combat-meta b,.combat-meta span{display:block}
.combat-meta b{color:#f3dfb6;font-size:13px}
.combat-meta span{color:#bdd3ea;font-size:11px;margin-top:2px}
.combat-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.combat-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8fd68f,#cce9aa);animation:barGlow 1.6s ease-in-out infinite}
.combat-bar.enemy i{background:linear-gradient(90deg,#e47f72,#f1c0a7)}
.battle-center{display:grid;gap:10px;justify-items:center;z-index:1}
.battle-badge{padding:7px 12px;border-radius:999px;background:rgba(18,29,45,.9);border:1px solid rgba(212,181,112,.20);color:#f0ddb4;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.battle-clash{font-size:38px;animation:clashPulse 1.1s ease-in-out infinite}
.battle-tip{font-size:12px;color:#c8d7e6;text-align:center;line-height:1.4}
.battle-screen.victory .battle-badge{border-color:rgba(165,224,128,.34);color:#d6f1b8}
.battle-screen.defeat .battle-badge{border-color:rgba(231,123,104,.34);color:#ffd0c7}
.battle-contrib{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@keyframes battleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes clashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes barGlow{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.12)}}
@media (max-width:950px){.battle-screen{grid-template-columns:1fr}.battle-center{order:-1}}

/* === V3.0.3 UI READABILITY + PLAYTEST READINESS HOTFIX === */
.topbar{
  flex-wrap:wrap;
  align-content:flex-start;
  gap:7px;
  overflow:visible;
}
.city-title{min-width:190px}
.era-pill{width:230px}
.resources{
  margin-left:0;
  flex:1 1 720px;
  min-width:360px;
  justify-content:flex-start;
  gap:5px;
}
.resource{
  min-width:56px;
  padding:4px 6px;
}
.resource b{font-size:14px}
.save-status{min-width:108px}
.small-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
.bottom-bar{
  gap:6px;
  overflow:hidden;
}
.hint{
  flex:1 1 280px;
  max-width:520px;
  min-width:180px;
  line-height:1.25;
  overflow:hidden;
}
.modal{
  place-items:start center;
  padding:clamp(78px,8vh,108px) 14px 106px;
  overflow:hidden;
}
#mainModal .modal-card.wide{
  width:min(1040px,calc(100vw - 360px));
  max-height:calc(100vh - 210px);
}
.modal-card{
  max-height:calc(100vh - 210px);
}
#mainModal .modal-card>.close.float{
  position:sticky;
  top:0;
  margin:-8px -8px 10px auto;
  box-shadow:0 8px 18px rgba(0,0,0,.32);
}
.modal-tabs{
  position:sticky;
  top:38px;
  z-index:22;
  padding:4px 0 8px;
  background:linear-gradient(180deg,rgba(16,25,40,.98),rgba(16,25,40,.88));
  backdrop-filter:blur(2px);
}
.modal-content{
  padding-bottom:16px;
}
.grid-list{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.drawer{
  left:174px;
  top:104px;
  bottom:104px;
  width:min(860px,calc(100vw - 520px));
  max-width:none;
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:12px;
}
.drawer.open{transform:translateY(0)}
.drawer-head{
  flex:0 0 auto;
  gap:10px;
}
.drawer-head .close{
  margin-left:auto;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.drawer h2{
  margin-bottom:6px;
}
.drawer-showcase{
  grid-template-columns:140px 1fr;
  gap:10px;
  padding:7px;
  margin-bottom:8px;
  flex:0 0 auto;
}
.drawer-showcase img{
  height:58px;
}
.build-search{
  flex:0 0 auto;
  margin:2px 0 8px;
  padding-top:8px;
  padding-bottom:8px;
}
.build-tabs{
  flex:0 0 auto;
  margin-bottom:8px;
}
.building-cards{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:2px 6px 8px 2px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.drawer-note{
  flex:0 0 auto;
  margin:8px 0 0;
}
.building-art:before{
  content:'';
  position:absolute;
  left:14%;
  right:14%;
  bottom:12px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(213,183,108,.05),rgba(238,214,151,.18),rgba(213,183,108,.05));
  transform:skewX(-12deg);
  pointer-events:none;
}
.building-art:after{
  bottom:5px;
  height:34px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 68%);
  filter:blur(5px);
}
.building-art img{
  transform:translateY(10px);
}
.placement-art:before{
  background:radial-gradient(ellipse at center,rgba(0,0,0,.40),rgba(0,0,0,0) 70%);
}
@media (max-width:2100px){
  .resources{flex-basis:620px}
  .resource{min-width:52px}
  .save-status{font-size:11px}
  .small-btn{padding:7px 8px}
}
@media (max-width:1450px){
  .topbar{min-height:92px}
  .resources{
    order:3;
    flex-basis:100%;
    min-width:0;
  }
  .left-rail{top:104px}
  .right-panel{top:112px;max-height:calc(100vh - 216px)}
  .panel-toggle{top:112px}
  .drawer{top:118px;width:min(820px,calc(100vw - 230px))}
  .modal{padding-top:112px}
  #mainModal .modal-card.wide{width:min(1040px,94vw)}
}
@media (max-width:1120px){
  .drawer{left:12px;right:12px;width:auto;top:104px}
  .drawer-showcase{display:none}
  .modal{padding:92px 8px 98px}
  #mainModal .modal-card.wide{width:96vw;max-height:calc(100vh - 190px)}
  .modal-card{max-height:calc(100vh - 190px)}
}
@media (max-height:760px){
  .modal{padding-top:72px}
  #mainModal .modal-card.wide,.modal-card{max-height:calc(100vh - 170px)}
  .drawer{top:82px;bottom:92px}
  .drawer-showcase{display:none}
}