:root{
  --bg:#140d07; --panel:#241809; --panel2:#2f2110; --line:#4a3618;
  --ink:#f0e6d2; --sub:#b09a74; --gold:#f4c95d; --red:#e2683b;
  --green:#7fc06a; --blue:#5aa9e6; --jade:#46c7a0; --parch:#e8d8b0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:radial-gradient(120% 80% at 50% -10%, #2a1c0c 0%, var(--bg) 60%);
  color:var(--ink);
  font-family:"Apple SD Gothic Neo","Malgun Gothic",ui-monospace,SFMono-Regular,Menlo,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:0 10px env(safe-area-inset-bottom);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}

.topbar{
  width:100%; max-width:1060px; display:flex; align-items:center; gap:14px;
  padding:12px 4px; font-size:13px;
}
.topbar .back{color:var(--sub);}
.topbar .back:hover{color:var(--ink);}
.topbar .brand{font-weight:800; letter-spacing:1px; font-size:16px; color:var(--gold);}
.topbar .hs{margin-left:auto; color:var(--gold); font-weight:700; letter-spacing:.5px;}

#app{
  width:100%; max-width:1060px; display:flex; gap:12px; align-items:stretch;
}
#stage{
  position:relative; flex:0 0 auto;
  border:2px solid var(--line); border-radius:12px; overflow:hidden;
  background:#0c0a06; line-height:0;
  box-shadow:0 12px 44px rgba(0,0,0,.55);
}
canvas#map{ display:block; width:720px; height:540px; cursor:pointer; }

.tip{
  position:absolute; pointer-events:none; z-index:6;
  background:rgba(12,8,3,.94); border:1px solid var(--gold);
  border-radius:8px; padding:7px 10px; font-size:12px; line-height:1.5;
  color:var(--ink); max-width:200px; transform:translate(-50%,-115%);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.tip b{color:var(--gold);} .tip.hidden{display:none;}

#side{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; max-width:320px;}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:12.5px;
}
.realm-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.realm-head .flag{width:16px; height:16px; border-radius:4px; flex:0 0 auto; box-shadow:0 0 0 1px #0006;}
.realm-head b{font-size:15px;}
.realm-head .realm-sub{margin-left:auto; color:var(--sub); font-size:11px;}
.realm-stats{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px;}
.realm-stats .s{display:flex; justify-content:space-between;}
.realm-stats .s span{color:var(--sub);}
.realm-stats .s b{color:var(--ink);}

.cityPanel .city-empty{color:var(--sub); padding:14px 0; text-align:center;}
.city-title{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.city-title .dot{width:12px; height:12px; border-radius:50%;}
.city-title b{font-size:16px;}
.city-title .own{margin-left:auto; font-size:11px; color:var(--sub);}
.city-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:8px;}
.city-grid .r{display:flex; justify-content:space-between; align-items:center;}
.city-grid .r span{color:var(--sub);} .city-grid .r b{color:var(--ink);}
.statbar{height:6px; border-radius:3px; background:#0008; overflow:hidden; flex:1; margin-left:7px; min-width:42px;}
.statbar>i{display:block; height:100%;}
.gens{margin-top:6px; border-top:1px solid var(--line); padding-top:7px;}
.gens .gt{color:var(--sub); font-size:11px; margin-bottom:4px;}
.gen{
  display:flex; align-items:center; gap:6px; padding:3px 5px; margin:2px 0;
  background:var(--panel2); border-radius:6px; font-size:11.5px;
}
.gen .gn{font-weight:700;} .gen .gs{color:var(--sub); margin-left:auto; font-variant-numeric:tabular-nums;}

.log{flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column-reverse;
  min-height:90px; max-height:200px; line-height:1.5;}
.log .m{margin:2px 0;}
.log .m.dim{opacity:.5;}
.c-gold{color:var(--gold);} .c-red{color:var(--red);} .c-green{color:var(--green);}
.c-blue{color:var(--blue);} .c-jade{color:var(--jade);} .c-sub{color:var(--sub);}

#cmdbar{
  width:100%; max-width:1060px; margin-top:12px; display:flex; gap:8px;
}
.cb{
  flex:1; font:inherit; font-weight:800; font-size:14px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:13px 4px; cursor:pointer; transition:background .12s, border-color .12s;
}
.cb:hover{background:#3c2a14; border-color:var(--gold);}
.cb:active{background:#4a3318;}
.cb.end{flex:0 0 130px; background:#3a1f10; border-color:#6b3a18; color:var(--gold);}
.cb:disabled{opacity:.4; cursor:not-allowed;}

.hint{
  width:100%; max-width:1060px; color:var(--sub); font-size:11.5px;
  text-align:center; margin:12px 0 22px; line-height:1.7;
}
.hint b{color:var(--gold);}

/* 모달 공통 */
.modal{
  position:fixed; inset:0; background:rgba(6,4,2,.82);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:50;
}
.modal.hidden{display:none;}
.modal-card,.battle-card{
  background:var(--panel); border:1px solid var(--gold); border-radius:14px;
  padding:18px 20px; max-width:460px; width:100%; max-height:86vh; overflow:auto;
  font-size:13px; line-height:1.6; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-card h2,.battle-card h2{font-size:18px; margin-bottom:4px; color:var(--gold);}
.modal-card .lead{color:var(--sub); margin-bottom:12px; font-size:12px;}
.opt{
  display:flex; align-items:center; gap:10px; padding:11px 12px; margin:7px 0;
  background:var(--panel2); border:1px solid var(--line); border-radius:9px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.opt:hover{border-color:var(--gold); background:#3a2913;}
.opt.dis{opacity:.45; cursor:not-allowed; pointer-events:none;}
.opt .ic{font-size:22px; flex:0 0 auto; width:30px; text-align:center;}
.opt .ot{flex:1;}
.opt .ot .on{font-weight:800;}
.opt .ot .od{color:var(--sub); font-size:11.5px; margin-top:1px;}
.opt .cost{font-size:11px; color:var(--gold); text-align:right; white-space:nowrap; line-height:1.45;}
.opt.sel{border-color:var(--jade); background:#15302a;}
.row-btns{display:flex; gap:8px; margin-top:14px;}
.btn{
  flex:1; padding:11px; font:inherit; font-weight:800; border-radius:9px; cursor:pointer;
  background:var(--gold); color:#1a1206; border:none;
}
.btn.ghost{background:var(--panel2); color:var(--ink); border:1px solid var(--line);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.field{margin:12px 0;}
.field label{display:block; color:var(--sub); font-size:12px; margin-bottom:6px;}
.field .val{color:var(--gold); font-weight:800;}
input[type=range]{width:100%; accent-color:var(--gold);}
.pickgen{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.pickgen .pg{
  padding:6px 9px; border-radius:8px; background:var(--panel2);
  border:1px solid var(--line); cursor:pointer; font-size:12px;
}
.pickgen .pg.on{border-color:var(--jade); background:#15302a; color:var(--jade);}
.pickgen .pg.dis{opacity:.4; cursor:not-allowed;}

/* 전투 */
.bt-field{display:flex; align-items:stretch; gap:10px; margin:10px 0;}
.bt-army{flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px;}
.bt-army.atk{border-color:#6b3a18;} .bt-army.def{border-color:#2f4a6b;}
.bt-army .bn{font-weight:800; font-size:13px; margin-bottom:2px;}
.bt-army .bn small{color:var(--sub); font-weight:400;}
.bt-army .bg{font-size:11px; color:var(--sub); margin-bottom:6px; min-height:14px;}
.bt-troop{font-size:20px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;}
.bt-bar{height:9px; border-radius:5px; background:#000; overflow:hidden; margin:5px 0;}
.bt-bar>i{display:block; height:100%; transition:width .35s;}
.bt-mor{font-size:11px; color:var(--sub);}
.bt-vs{align-self:center; font-size:22px; color:var(--red); font-weight:800;}
.bt-log{
  background:#0c0905; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:12px; line-height:1.55; height:120px; overflow-y:auto;
  display:flex; flex-direction:column-reverse;
}
.bt-cmds{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px;}
.bt-cmds .bcb{
  font:inherit; font-weight:700; font-size:12.5px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  padding:11px 4px; cursor:pointer;
}
.bt-cmds .bcb:hover{border-color:var(--gold); background:#3a2913;}
.bt-cmds .bcb:disabled{opacity:.4; cursor:not-allowed;}
.bt-cmds .bcb small{display:block; color:var(--sub); font-size:10px; font-weight:400; margin-top:2px;}

.title-screen{ text-align:center; }
.title-screen .big{font-size:34px; font-weight:900; color:var(--gold); letter-spacing:2px;}
.title-screen .sub{color:var(--sub); margin:6px 0 4px;}
.lords{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.lord{
  text-align:left; padding:10px 12px; background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.lord:hover{border-color:var(--gold); background:#3a2913;}
.lord .ln{font-weight:800; display:flex; align-items:center; gap:7px;}
.lord .ln .f{width:12px; height:12px; border-radius:3px;}
.lord .ld{color:var(--sub); font-size:11px; margin-top:4px; line-height:1.5;}

@media (max-width:1000px){
  #app{flex-direction:column; align-items:center;}
  canvas#map{width:min(94vw,720px); height:auto;}
  #side{max-width:min(94vw,720px); width:100%;}
  .log{max-height:150px;}
}
@media (max-width:520px){
  .cb{font-size:12px; padding:11px 2px;}
  .cb.end{flex:0 0 92px;}
  .realm-stats{grid-template-columns:1fr 1fr;}
}