:root{
  --navy:#062f57;--title:#102b4a;--gold:#d4a43a;--parch:#f5ebd5;
  --card:#f1e7d2;--red:#8a241f;--ink:#18212a;--green:#2e7d32;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--parch);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
#app{min-height:100vh}
.screen{min-height:100vh;padding:18px 16px 46px;background:
  radial-gradient(circle at 50% 0,rgba(255,255,255,.46),transparent 34rem),var(--parch)}
.content{width:min(900px,100%);margin:0 auto}
.title{font-family:Georgia,'Times New Roman',serif;color:var(--title);text-align:center;font-size:clamp(2rem,7vw,3rem);margin:18px 0 6px}
.subtitle{text-align:center;color:#555;margin:0 0 14px;font-size:1rem}
.divider{display:flex;align-items:center;gap:14px;color:var(--gold);margin:10px 0 20px}
.divider:before,.divider:after{content:"";height:2px;background:var(--gold);flex:1}.divider span{font-size:1.5rem}
.back{border:2px solid var(--gold);background:var(--navy);color:white;border-radius:15px;padding:11px 18px;font-weight:800;cursor:pointer}
.menu{display:grid;gap:12px;margin-top:20px}
.menu-btn{
  display:flex;align-items:center;gap:18px;width:100%;min-height:72px;
  border:2px solid var(--gold);border-radius:16px;
  background:linear-gradient(90deg,#07345f,#082e54);
  color:white;padding:6px 18px;text-align:left;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.22rem;font-weight:800;cursor:pointer;
}
.menu-btn img{
  width:66px;height:66px;object-fit:contain;
  border-radius:10px;flex:none;
  background:#062f57;
  padding:2px;
  border:1px solid rgba(212,164,58,.55);
}
.card{background:var(--card);border:1.5px solid var(--gold);border-radius:18px;padding:16px;margin:12px 0}
.card h2,.card h3{font-family:Georgia,serif;color:var(--title);margin:0 0 10px}
.card h2{font-size:1.25rem}.card h3{font-size:1.05rem}
.card p{white-space:pre-line;line-height:1.48;margin:0}
.img-btn{margin-top:13px;border:1.5px solid var(--gold);background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.inline-image{width:100%;max-height:380px;object-fit:contain;background:#fff;border-radius:10px;margin-top:12px}
.home{min-height:100vh;background:
  linear-gradient(to bottom,rgba(245,235,213,.15),rgba(7,25,45,.58)),
  url('assets/home_bg.png') center/cover no-repeat;display:flex;justify-content:center}
.home-panel{width:min(650px,100%);padding:30px 16px 40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh}
.home-title{text-align:center;color:white;text-shadow:0 2px 8px #000;margin:auto 0 24px}
.home-title h1{font-family:Georgia,serif;font-size:clamp(2rem,8vw,3.7rem);line-height:.95;margin:0}.home-title .red{color:#b72b28}
.home-title p{font-family:Georgia,serif;font-weight:800;letter-spacing:.06em}
.signature{text-align:center;color:white;font-weight:800;text-shadow:0 2px 5px #000;margin-top:18px}
.home .menu-btn{background:rgba(6,47,87,.96);backdrop-filter:blur(2px)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nation-btn{min-height:92px;justify-content:center;text-align:center}
.unit-banner{width:100%;border-radius:16px;display:block;margin:12px 0;border:1px solid var(--gold)}
.unit-table{width:100%;border-collapse:collapse;font-size:.92rem}
.unit-table th,.unit-table td{border-bottom:1px solid #cbbf9f;padding:8px 6px;text-align:left;vertical-align:top}
.unit-table th{color:var(--title);font-family:Georgia,serif}
.terrain-card img{width:100%;max-height:330px;object-fit:contain;background:white;border-radius:10px}
.dice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.die{text-align:center}
.die img{width:100%;aspect-ratio:1;object-fit:contain;border:3px solid #888;border-radius:10px;background:white}
.die.hit img{border-color:var(--green)}.die.flag img{border-color:var(--gold)}
.die b{display:block;color:var(--title);font-size:.83rem;margin-top:4px}
.choice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice-row.two{grid-template-columns:repeat(2,1fr)}
.choice{border:1.5px solid #777;background:transparent;color:var(--title);border-radius:12px;padding:12px 8px;font-weight:800;cursor:pointer}
.choice.active{background:var(--navy);color:white;border-color:var(--gold);border-width:2px}
.result{background:#e5f1df;border-color:var(--green)}
.result h3{color:#1b5e20}
.setup-img{width:100%;max-height:330px;object-fit:contain;background:#fff;border-radius:10px;margin-top:12px}
.placeholder{text-align:center;padding:30px 12px;color:#665b4b}
.modal{position:fixed;inset:0;background:var(--parch);z-index:50;display:flex;flex-direction:column}
.modal[hidden]{display:none}
.modal-bar{background:var(--navy);color:white;padding:10px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.modal-actions{display:flex;gap:6px;flex-wrap:wrap}.modal-actions button{background:var(--navy);border:1px solid var(--gold);color:white;border-radius:8px;padding:8px 10px;font-weight:800}
.modal-stage{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  touch-action:none;
}
.modal-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  transform-origin:center center;
  user-select:none;
  -webkit-user-drag:none;
}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e8ddc5;color:#5b4a2e;font-size:.78rem;margin-left:6px}
@media(max-width:600px){
 .screen{padding:14px 12px 38px}.grid-2,.grid-3{grid-template-columns:1fr}
 .menu-btn{min-height:64px}.menu-btn img{width:50px;height:50px}
 .unit-table{font-size:.82rem}.unit-table th:nth-child(5),.unit-table td:nth-child(5){display:none}
 .dice-grid{gap:7px}.choice-row{grid-template-columns:1fr}.choice-row.two{grid-template-columns:1fr 1fr}
}

.rules-menu .menu{gap:10px}
.rules-menu .menu-btn{min-height:76px}
.rules-menu .menu-btn img{width:64px;height:64px}
.rules-menu .menu-btn span{line-height:1.05}
@media(max-width:600px){
  .rules-menu .menu-btn{min-height:70px;padding:5px 12px;gap:12px;font-size:1rem}
  .rules-menu .menu-btn img{width:58px;height:58px}
}

@media(max-width:600px){
  .modal-stage{padding:8px}
  .modal-bar{padding:8px}
  .modal-actions button{padding:7px 9px;font-size:.86rem}
}