*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#14100b;font-family:'Alegreya',serif;color:#e9dcc0;cursor:url('assets/cursors/customsword.ani'),url('assets/cursors/customswordbevel.cur'),auto}
#app{position:fixed;inset:0}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:url('assets/cursors/customswordprecision.cur'),url('assets/cursors/customswordbevel.cur'),crosshair}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:10px 14px;background:linear-gradient(180deg,rgba(20,14,8,.92),rgba(20,14,8,.55) 80%,transparent);z-index:5;pointer-events:none}
#topbar>*{pointer-events:auto}
.logo{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;color:#ffd98a;text-shadow:0 2px 8px #000}
.logo span{font-weight:500;font-size:12px;color:#bfae84;letter-spacing:2px;text-transform:uppercase;margin-left:8px}
.resources{display:flex;gap:10px;margin-left:auto;background:rgba(0,0,0,.45);border:1px solid #6b5636;border-radius:10px;padding:6px 12px}
.res{font-size:15px}
.res b{color:#ffe9b0}
.top-actions{display:flex;gap:8px}
button{font-family:'Cinzel',serif;cursor:url('assets/cursors/customswordlink.ani'),url('assets/cursors/customswordbevel.cur'),pointer;border-radius:8px;border:1px solid #6b5636;padding:8px 14px}
button.primary{background:linear-gradient(180deg,#d8a94e,#9a6b1f);color:#1a1206;font-weight:700;border-color:#ffe0a0}
button.primary:hover{filter:brightness(1.1)}
button.ghost{background:rgba(0,0,0,.5);color:#e9dcc0}
button.ghost:hover{background:rgba(60,45,20,.7)}
button:disabled{opacity:.4;cursor:default}
a{cursor:url('assets/cursors/customswordlink.ani'),url('assets/cursors/customswordbevel.cur'),pointer}
#panel{position:absolute;top:64px;left:12px;bottom:12px;width:330px;background:linear-gradient(180deg,rgba(28,21,12,.94),rgba(18,13,8,.94));border:1px solid #7a6238;border-radius:12px;z-index:5;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#panel-content{padding:14px 14px 18px;overflow-y:auto}
#panel h2{font-family:'Cinzel',serif;color:#ffd98a;margin:4px 0 8px;font-size:19px}
#panel h3{font-family:'Cinzel',serif;color:#ffe9b0;margin:12px 0 6px;font-size:14px;letter-spacing:.5px}
.muted{color:#b7a67f;font-size:14px;line-height:1.45}
.teal{color:#7ef0d4}.red{color:#ff9a9a}
.legend{font-size:13px;color:#cbb98e;display:grid;gap:4px;margin:8px 0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.dot.teal{background:#2dd4bf}.dot.red{background:#e5485a}.dot.grey{background:#9a9a9a}
hr{border:none;border-top:1px solid #4a3a22;margin:10px 0}
#selection{font-size:14px}
.army-card,.town-card{background:rgba(255,220,150,.06);border:1px solid #5a472a;border-radius:10px;padding:10px;margin:8px 0}
.unit-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:13px}
.unit-row button{padding:3px 8px;font-size:12px}
.build-btn{width:100%;margin:4px 0;text-align:left;background:rgba(0,0,0,.35);color:#e9dcc0;font-family:'Alegreya',serif}
.build-btn:hover:not(:disabled){background:rgba(120,90,40,.4)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.stat{background:rgba(0,0,0,.35);border-radius:8px;padding:6px 8px;font-size:13px}
.stat b{color:#ffe9b0}
#tutorial-bar{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:linear-gradient(180deg,rgba(34,25,13,.97),rgba(22,16,9,.97));border:2px solid #d8a94e;border-radius:12px;z-index:6;padding:12px 16px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.tut-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
#tut-title{font-family:'Cinzel',serif;color:#ffd98a;font-weight:700;font-size:15px}
.tut-skip{background:none;border:none;color:#8a7a58;font-size:12px;cursor:pointer;text-decoration:underline;padding:2px 4px}
.tut-skip:hover{color:#cbb98e}
#tut-body{color:#e9dcc0;font-size:14px;line-height:1.5;margin:6px 0 8px}
#tut-body b{color:#ffe9b0}
.tut-foot{display:flex;justify-content:space-between;align-items:center}
#tut-progress{color:#8a7a58;font-size:12px;letter-spacing:2px}
#btn-tut-next{padding:6px 16px;font-size:13px}
#toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:10;align-items:center;pointer-events:none}
.toast-msg{background:rgba(20,14,8,.95);border:1px solid #d8a94e;color:#ffe9b0;padding:8px 16px;border-radius:20px;font-size:14px;box-shadow:0 4px 20px #000;animation:fade 3s forwards}
@keyframes fade{0%{opacity:0;transform:translateY(10px)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
#battle-modal,#help-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:20}
#territory-bar{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:rgba(20,14,8,.85);border:1px solid #d8a94e;border-radius:0 0 12px 12px;padding:6px 22px;z-index:5;font-family:'Cinzel',serif;color:#ffd98a;font-size:15px;letter-spacing:1px;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#exit-modal,#world-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:20}
#exit-body{color:#e9dcc0;font-size:14px;line-height:1.55;margin:10px 0 14px}
#exit-body b{color:#ffe9b0}
.exit-actions{display:flex;flex-direction:column;gap:8px}
.exit-actions button{width:100%}
.world-card{background:#1e150c;border:2px solid #d8a94e;border-radius:14px;max-width:900px;width:94vw;max-height:92vh;overflow:auto;padding:18px 20px;box-shadow:0 20px 80px #000;text-align:center}
.world-card h2{font-family:'Cinzel',serif;color:#ffd98a;margin:0 0 4px}
#world-img-wrap{position:relative;margin:10px auto;max-width:860px}
#world-img{width:100%;display:block;border-radius:10px;border:1px solid #6b5636}
#world-buttons{position:absolute;inset:0}
.world-btn{position:absolute;transform:translate(-50%,-50%);background:rgba(20,14,8,.88);border:2px solid #d8a94e;color:#ffe9b0;font-size:12px;padding:6px 10px;white-space:nowrap}
.world-btn:hover:not(:disabled){background:rgba(120,90,40,.9)}
.world-btn.current{border-color:#2dd4bf;box-shadow:0 0 12px #2dd4bf}
.world-btn:disabled{border-color:#555;color:#888}
.world-btn .start-tag{color:#7ef0d4;font-weight:700}
#btn-world-close{margin-top:10px}
#tactics-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:30}
.tactics-card{background:#1e150c;border:2px solid #d8a94e;border-radius:14px;max-width:1020px;width:96vw;max-height:94vh;overflow:auto;padding:16px 18px;box-shadow:0 20px 80px #000;text-align:center}
.tactics-card h2{font-family:'Cinzel',serif;color:#ffd98a;margin:0 0 2px}
#tactics-sub{margin-bottom:8px}
#tactics-board{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #6b5636;background:#0e0b07}
#tactics-info{min-height:40px;margin:8px 0;font-size:14px}
.tactics-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.skills-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0;min-height:10px}
.skill-btn{background:rgba(60,30,90,.55);color:#efe0ff;border:1px solid #a07ee0;padding:7px 12px;font-size:13px}
.skill-btn:hover:not(:disabled){background:rgba(110,60,160,.7)}
.skill-btn.armed{border-color:#ffd98a;box-shadow:0 0 10px #b07ee0}
.skill-btn:disabled{opacity:.45}
.skill-line{color:#9a8fc0;font-size:12px;padding:0 0 3px 18px}
.fort-info{background:rgba(120,90,200,.08);border:1px solid #6a5a9a;border-radius:10px;padding:10px;margin:8px 0}
.terror-banner{background:rgba(120,20,30,.35);border:1px solid #e5485a;color:#ffc9c9;padding:6px 10px;border-radius:8px;font-size:13px;margin:6px 0}
.empire-banner{background:rgba(30,80,60,.35);border:1px solid #2dd4bf;color:#c8f5e8;padding:6px 10px;border-radius:8px;font-size:13px;margin:6px 0}
#board{touch-action:none}
#btn-panel{display:none;position:fixed;right:12px;bottom:12px;z-index:15;font-size:20px;padding:10px 14px;border-radius:50%}
/* ---- mobile: bottom-sheet panel, wrapping topbar, thumb-sized targets ---- */
@media(max-width:800px){
  #topbar{flex-wrap:wrap;gap:8px;padding:8px}
  .logo{font-size:15px}
  .resources{flex-wrap:wrap;gap:6px;margin-left:0;font-size:13px}
  .top-actions{flex-wrap:wrap;gap:6px}
  .top-actions button{padding:10px 12px;font-size:13px}
  #territory-bar{top:auto;bottom:0;font-size:12px;padding:4px 12px;border-radius:12px 12px 0 0}
  #panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:52vh;border-radius:16px 16px 0 0;z-index:14}
  #panel.collapsed{display:none}
  #btn-panel{display:block}
  .world-btn{padding:10px 14px;font-size:14px}
  .tactics-card{width:100vw;max-height:100vh;border-radius:0;padding:10px}
  #tactics-board{max-height:52vh}
  .skill-btn{padding:10px 14px;font-size:14px}
  .unit-row button{padding:8px 12px;font-size:14px}
  .build-btn{padding:10px;font-size:14px}
  .battle-card{width:96vw}
}
.hidden{display:none!important}
.battle-card{background:#1e150c;border:2px solid #d8a94e;border-radius:14px;max-width:560px;width:92vw;max-height:84vh;overflow:auto;padding:20px;box-shadow:0 20px 80px #000}
.battle-card h2{font-family:'Cinzel',serif;color:#ffd98a;margin-top:0}
#battle-vs{display:flex;justify-content:space-between;font-family:'Cinzel',serif;margin:10px 0}
#battle-log{background:#0f0b06;border-radius:8px;padding:12px;font-family:monospace;font-size:12.5px;line-height:1.5;white-space:pre-wrap;max-height:300px;overflow:auto;color:#e8d9b0}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#14100b;color:#ffd98a;font-family:'Cinzel',serif;font-size:22px;z-index:50}
@media(max-width:800px){#panel{width:270px}}