:root{
    --paper:#e8dcc0; --paper-dark:#d4c39d;
    --ink:#2a1f14; --ink-soft:#4a3826;
    --blood:#7a1f1f; --blood-deep:#5a1414;
    --gold:#a8842c; --olive:#5e6336;
    --shadow:rgba(40,25,10,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{min-height:100%}
  body{
    font-family:'Crimson Pro',serif; color:var(--ink);
    background:
      radial-gradient(ellipse at 20% 10%, rgba(168,132,44,.15), transparent 50%),
      radial-gradient(ellipse at 80% 90%, rgba(122,31,31,.12), transparent 50%),
      repeating-linear-gradient(45deg, transparent 0 2px, rgba(74,56,38,.025) 2px 3px),
      linear-gradient(135deg, #ebdfc3 0%, #d8c8a3 100%);
    background-attachment:fixed; min-height:100vh;
    padding:32px 16px 64px; position:relative;
  }
  body::before{
    content:""; position:fixed; inset:0;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(0,0,0,.08) 0, transparent 2px),
      radial-gradient(circle at 85% 75%, rgba(0,0,0,.06) 0, transparent 2px),
      radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0, transparent 1px);
    background-size:120px 120px,180px 180px,60px 60px;
    pointer-events:none; z-index:0; opacity:.6;
  }
  .stamp{
    position:absolute; top:24px; right:24px;
    border:3px double var(--blood); color:var(--blood);
    font-family:'Cinzel',serif; font-weight:700; letter-spacing:.2em;
    padding:8px 14px; transform:rotate(8deg); font-size:11px;
    opacity:.65; z-index:5; background:rgba(232,220,192,.4);
  }
  .stamp::before{content:"★";margin-right:6px}
  .container{max-width:1100px; margin:0 auto; position:relative; z-index:1}
  header{text-align:center; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--ink-soft); position:relative}
  header::after{content:""; display:block; height:1px; background:var(--ink-soft); margin-top:4px}
  .eyebrow{font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px}
  h1{font-family:'Cinzel',serif; font-weight:900; font-size:clamp(28px,5vw,52px); letter-spacing:.04em; text-transform:uppercase; line-height:1; color:var(--ink); text-shadow:1px 1px 0 rgba(0,0,0,.08)}
  .subtitle{font-style:italic; color:var(--ink-soft); margin-top:10px; font-size:15px}
  .meta{display:flex; justify-content:center; gap:24px; margin-top:14px; font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.2em; color:var(--ink-soft); text-transform:uppercase}
  .meta span{position:relative}
  .meta span + span::before{content:"✦"; position:absolute; left:-14px; color:var(--blood)}

  .target-selector{
    display:flex; justify-content:center; gap:8px; margin-bottom:24px; flex-wrap:wrap; align-items:center;
    background:rgba(74,56,38,.06); padding:12px 16px; border:1px solid var(--ink-soft);
  }
  .target-selector .lbl{font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-right:4px}
  .target-selector button{
    background:var(--paper); border:1px solid var(--ink-soft); padding:6px 14px;
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer; color:var(--ink-soft); transition:all .15s;
  }
  .target-selector button.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .target-selector button:hover:not(.active){border-color:var(--blood)}

  /* Toggle terreno: a terra / in mare. Sotto la stance di ogni esercito */
  .terrain-toggle{
    display:flex; gap:0; margin-bottom:14px;
    border:1px solid var(--ink-soft); border-top:none;
  }
  .terrain-toggle button{
    flex:1; background:rgba(255,250,235,.5); border:none; padding:6px;
    font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.15em;
    text-transform:uppercase; cursor:pointer; color:var(--ink-soft);
  }
  .terrain-toggle button.active{background:var(--ink-soft); color:var(--paper)}
  .terrain-toggle button[data-terrain="sea"].active{background:#2c5266}
  .terrain-toggle button[data-terrain="land"].active{background:#6b5a3a}

  /* Toggle modalità aerea: pattuglia / attacco diretto */
  .aircraft-mode{
    display:flex; justify-content:center; gap:8px; margin:0 0 24px; flex-wrap:wrap;
    align-items:center; background:rgba(74,56,38,.06); padding:12px 16px;
    border:1px solid var(--ink-soft); border-left:3px solid var(--gold);
  }
  .aircraft-mode .lbl{font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-right:4px}
  .aircraft-mode button{
    background:var(--paper); border:1px solid var(--ink-soft); padding:6px 14px;
    font-family:'Cinzel',serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    cursor:pointer; color:var(--ink-soft); transition:all .15s;
  }
  .aircraft-mode button.active{background:var(--gold); color:var(--paper); border-color:var(--gold)}

  /* Pannello eroe + checkbox condizionali */
  .aux-controls{margin:10px 0 12px; display:flex; flex-direction:column; gap:8px}
  .aux-controls .field label{font-size:10px}
  .checkbox-field{
    display:flex; align-items:center; gap:8px; font-size:12px;
    color:var(--ink-soft); font-style:italic; cursor:pointer;
    padding:4px 6px; background:rgba(168,132,44,.06);
    border-left:2px solid var(--gold);
  }
  .checkbox-field input[type=checkbox]{accent-color:var(--blood)}

  /* Distanza iniziale */
  .distance-control{
    display:grid; grid-template-columns:1fr 90px; gap:12px;
    align-items:center; margin:0 0 20px;
    background:rgba(74,56,38,.06); padding:12px 16px;
    border:1px solid var(--ink-soft); border-left:3px solid var(--blood);
  }
  .distance-control label{
    font-family:'Cinzel',serif; font-size:13px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink);
  }
  .distance-control input{
    padding:6px 8px; font-size:15px; text-align:right; font-weight:bold;
    background:rgba(255,250,235,.7); border:1px solid var(--ink-soft);
    font-family:'Special Elite',monospace;
  }
  .distance-control input:focus{outline:none; border-color:var(--blood)}
  .distance-control .hint{
    grid-column:1 / -1; font-size:11px; font-style:italic;
    color:var(--ink-soft); line-height:1.4;
  }

  /* Box danno edifici (canale parallelo) */
  .building-damage{
    background:rgba(168,132,44,.15); border:1px solid var(--gold);
    border-left:4px solid var(--gold); padding:10px 14px; margin-bottom:20px;
    font-family:'Crimson Pro',serif; font-size:14px; color:var(--ink);
    font-style:italic;
  }
  .building-damage strong{font-style:normal; font-family:'Special Elite',monospace; color:var(--blood-deep)}

  .battlefield{display:grid; grid-template-columns:1fr auto 1fr; gap:24px; margin-bottom:32px}
  @media(max-width:880px){.battlefield{grid-template-columns:1fr}.vs-divider{order:2}}

  .army-panel{
    background:linear-gradient(180deg, rgba(255,250,235,.5) 0%, transparent 100%),var(--paper);
    border:2px solid var(--ink); padding:20px; position:relative;
    box-shadow:4px 4px 0 var(--shadow), inset 0 0 40px rgba(74,56,38,.08);
  }
  .army-panel::before{content:""; position:absolute; inset:4px; border:1px solid var(--ink-soft); pointer-events:none}
  .panel-header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; padding-bottom:10px; border-bottom:1px dashed var(--ink-soft)}
  .panel-title{font-family:'Cinzel',serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:14px; color:var(--ink)}
  .panel-num{font-family:'Special Elite',monospace; font-size:10px; color:var(--ink-soft); letter-spacing:.15em}

  /* Box fortificazioni che appare solo quando l'esercito è in difesa */
  .fortifications{
    background:rgba(94,99,54,.08); border-left:3px solid var(--olive);
    padding:10px 12px 4px; margin-bottom:14px;
    animation:slideDown .25s ease-out;
  }
  @keyframes slideDown{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}

  .field{margin-bottom:14px}
  .field label{display:flex; justify-content:space-between; align-items:center; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
  .field label .val{color:var(--ink); font-weight:bold}
  .field select, .field input[type=number]{
    width:100%; padding:8px 10px; background:rgba(255,250,235,.6);
    border:1px solid var(--ink-soft); color:var(--ink);
    font-family:'Crimson Pro',serif; font-size:15px; outline:none;
    transition:border-color .2s, background .2s;
  }
  .field select:focus, .field input[type=number]:focus{border-color:var(--blood); background:rgba(255,250,235,.9)}
  .field input[type=range]{-webkit-appearance:none; width:100%; height:4px; background:var(--ink-soft); outline:none; margin-top:4px}
  .field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; background:var(--blood); border:2px solid var(--paper); border-radius:50%; cursor:pointer; box-shadow:0 2px 4px var(--shadow)}
  .field input[type=range]::-moz-range-thumb{width:16px; height:16px; background:var(--blood); border:2px solid var(--paper); border-radius:50%; cursor:pointer}

  .stance-toggle{display:flex; gap:0; margin-bottom:14px; border:1px solid var(--ink-soft)}
  .stance-toggle button{flex:1; background:rgba(255,250,235,.5); border:none; padding:8px; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; color:var(--ink-soft)}
  .stance-toggle button.active{background:var(--ink); color:var(--paper)}

  .units-list{border-top:1px dashed var(--ink-soft); padding-top:12px; margin-top:4px}
  .units-list-title{font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:grid; grid-template-columns:1fr 70px 60px 70px; gap:8px; padding:0 6px}
  .units-list-title .col-hp,.units-list-title .col-n,.units-list-title .col-tot{text-align:right}
  .unit-row{display:grid; grid-template-columns:1fr 70px 60px 70px; gap:8px; align-items:center; margin-bottom:6px; padding:4px 6px; transition:background .15s}
  .unit-row:hover{background:rgba(122,31,31,.06)}
  .unit-row .uname{font-size:14px; display:flex; align-items:center; gap:8px}
  .unit-icon{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:13px; color:var(--ink)}
  .unit-row .uname .role-tag{font-size:9px; color:var(--ink-soft); font-style:italic; margin-left:4px; opacity:.7}
  .unit-row input{padding:4px 6px; font-size:14px; text-align:right; background:rgba(255,250,235,.5); border:1px solid var(--ink-soft); font-family:'Special Elite',monospace; width:100%}
  .unit-row input:focus{outline:none; border-color:var(--blood)}
  .unit-row input.hp-input{font-size:11px; color:var(--ink-soft); background:rgba(255,250,235,.3)}
  .unit-row input.hp-input::placeholder{color:var(--ink-soft); opacity:.5; font-style:italic}
  .unit-row input.count-input{font-weight:bold}
  .unit-row .row-total{font-family:'Special Elite',monospace; font-size:12px; text-align:right; color:var(--ink-soft); padding:4px 6px}
  .unit-row:hover .row-total{color:var(--ink)}
  .unit-row.placeholder{opacity:.35; pointer-events:none}
  .unit-row.placeholder .uname::after{content:" (TBD)"; font-style:italic; font-size:10px; color:var(--blood)}
  .unit-row.locked{opacity:.4}
  .unit-row.locked .uname::after{content:" 🔒"; font-size:11px; opacity:.6}
  .unit-row.locked input{cursor:not-allowed; background:rgba(74,56,38,.08)}
  .stack-total{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:10px; padding:8px 6px; border-top:2px solid var(--ink-soft);
    border-bottom:1px solid var(--ink-soft);
    font-family:'Cinzel',serif;
  }
  .stack-total .lbl{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
  .stack-total .num{font-family:'Special Elite',monospace; font-size:15px; font-weight:700; color:var(--blood-deep)}

  .unit-section-header{
    font-family:'Special Elite',monospace; font-size:9px; letter-spacing:.25em; text-transform:uppercase;
    color:var(--blood); padding:8px 6px 4px; border-bottom:1px dotted var(--ink-soft);
    margin-top:6px;
  }
  .unit-section-header:first-of-type{margin-top:0}

  .vs-divider{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0}
  .vs-circle{width:64px; height:64px; border:3px double var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-weight:900; font-size:22px; background:var(--paper); color:var(--blood); box-shadow:0 4px 0 var(--shadow); position:relative}
  .vs-circle::before, .vs-circle::after{content:""; position:absolute; width:1px; height:40px; background:var(--ink-soft)}
  .vs-circle::before{top:-50px}
  .vs-circle::after{bottom:-50px}
  @media(max-width:880px){.vs-circle::before, .vs-circle::after{display:none}}

  .calculate-btn{display:block; margin:0 auto 32px; background:var(--ink); color:var(--paper); border:none; padding:16px 48px; font-family:'Cinzel',serif; font-weight:700; font-size:14px; letter-spacing:.3em; text-transform:uppercase; cursor:pointer; transition:transform .15s, box-shadow .15s; box-shadow:4px 4px 0 var(--shadow)}
  .calculate-btn:hover{background:var(--blood-deep); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow)}
  .calculate-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow)}
  .calculate-btn::before, .calculate-btn::after{content:"⚔"; margin:0 12px; color:var(--gold)}

  .results{background:linear-gradient(180deg, rgba(255,250,235,.6) 0%, transparent 80%),var(--paper); border:2px solid var(--ink); padding:28px; box-shadow:4px 4px 0 var(--shadow); position:relative}
  .results::before{content:""; position:absolute; inset:5px; border:1px solid var(--ink-soft); pointer-events:none}
  .results-header{text-align:center; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--ink)}
  .results-header h2{font-family:'Cinzel',serif; font-weight:900; letter-spacing:.25em; text-transform:uppercase; font-size:20px}
  .results-header .date{font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.2em; color:var(--ink-soft); margin-top:6px}
  .winner-banner{text-align:center; padding:14px; margin-bottom:20px; border:2px solid var(--ink); background:var(--ink); color:var(--paper); font-family:'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase}
  .winner-banner.victory{background:var(--blood); border-color:var(--blood-deep)}
  .winner-banner.defense{background:var(--olive); border-color:#3f4424}
  .winner-banner.draw{background:var(--ink-soft)}
  .winner-banner .verdict{font-size:18px; font-weight:900}
  .winner-banner .detail{font-size:12px; opacity:.85; margin-top:4px; letter-spacing:.15em}

  .results-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
  @media(max-width:680px){.results-grid{grid-template-columns:1fr}}
  .result-card{border:1px solid var(--ink-soft); padding:14px; background:rgba(255,250,235,.35)}
  .result-card h3{font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px dashed var(--ink-soft); color:var(--ink)}
  .stat-line{display:flex; justify-content:space-between; padding:4px 0; font-size:14px}
  .stat-line .lbl{color:var(--ink-soft); font-style:italic}
  .stat-line .num{font-family:'Special Elite',monospace; font-weight:bold}
  .stat-line.big{border-top:1px solid var(--ink-soft); margin-top:8px; padding-top:8px; font-size:16px}
  .stat-line.big .num{font-size:18px; color:var(--blood-deep)}
  .stat-line.variance{font-size:12px; color:var(--ink-soft); font-style:italic; padding:2px 0}
  .stat-line.variance .lbl{font-size:11px}
  .stat-line.variance .num{font-family:'Special Elite',monospace; font-weight:normal; font-size:12px}

  .casualties{margin-top:8px; padding-top:8px; border-top:1px dashed var(--ink-soft)}
  .casualty-row{display:flex; justify-content:space-between; font-size:13px; padding:2px 0; color:var(--ink-soft)}
  .casualty-row .lost{color:var(--blood); font-family:'Special Elite',monospace}

  .formula-note{margin-top:16px; padding:12px 14px; background:rgba(74,56,38,.06); border-left:3px solid var(--gold); font-style:italic; font-size:13px; color:var(--ink-soft)}
  .formula-note strong{font-style:normal; color:var(--ink); font-family:'Cinzel',serif; letter-spacing:.1em; text-transform:uppercase; font-size:11px}

  .empty-state{text-align:center; padding:32px 16px; color:var(--ink-soft); font-style:italic; font-size:15px}
  .empty-state::before{content:"⚔"; display:block; font-size:36px; margin-bottom:10px; color:var(--blood); opacity:.5}

  .size-warn{background:rgba(122,31,31,.1); border-left:3px solid var(--blood); padding:8px 12px; font-size:12px; color:var(--blood-deep); margin-top:8px; font-style:italic}

  /* Warning box nel rapporto di battaglia */
  .warnings-box{
    margin-bottom:20px; border:2px solid var(--olive);
    background:rgba(168,132,44,.12);
    box-shadow:3px 3px 0 var(--shadow);
  }
  .warnings-box.has-critical{border-color:var(--blood); background:rgba(122,31,31,.10)}
  .warnings-header{
    background:var(--olive); color:var(--paper); padding:8px 14px;
    font-family:'Cinzel',serif; font-weight:700; font-size:13px;
    letter-spacing:.2em; text-transform:uppercase;
  }
  .warnings-box.has-critical .warnings-header{background:var(--blood)}
  .warnings-list{padding:4px 12px}
  .warning-item{
    padding:10px 4px; border-bottom:1px dashed var(--ink-soft);
  }
  .warning-item:last-child{border-bottom:none}
  .warning-header{
    display:flex; gap:10px; align-items:baseline; margin-bottom:4px;
    flex-wrap:wrap;
  }
  .warning-side{
    font-family:'Special Elite',monospace; font-size:10px;
    letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft);
    padding:2px 6px; background:rgba(74,56,38,.1); border:1px solid var(--ink-soft);
  }
  .warning-title{
    font-family:'Cinzel',serif; font-weight:700; font-size:13px;
    color:var(--ink); letter-spacing:.05em;
  }
  .warning-high .warning-title{color:var(--blood-deep)}
  .warning-msg{font-size:13px; color:var(--ink-soft); font-style:italic; line-height:1.4; padding-left:2px}
  .warnings-footer{
    padding:8px 14px; background:rgba(74,56,38,.06);
    font-family:'Special Elite',monospace; font-size:10px;
    letter-spacing:.1em; color:var(--ink-soft); border-top:1px solid var(--ink-soft);
  }

  footer{text-align:center; margin-top:40px; padding-top:20px; border-top:1px solid var(--ink-soft); font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.2em; color:var(--ink-soft); text-transform:uppercase}

  /* === Scenari best/expected/worst === */
  .scenarios-box{
    border:2px solid var(--ink-soft); margin-bottom:20px;
    background:rgba(255,250,235,.45);
  }
  .scenarios-title{
    font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink); padding:8px 14px;
    background:rgba(74,56,38,.10); border-bottom:1px solid var(--ink-soft);
  }
  .scenario-row{
    display:grid; grid-template-columns:200px 1fr; gap:14px;
    padding:10px 14px; border-bottom:1px dashed var(--ink-soft);
    align-items:center;
  }
  .scenario-row:last-child{border-bottom:none}
  .scenario-row.expected{background:rgba(168,132,44,.08)}
  .scenario-row.victory{background:rgba(94,99,54,.08)}
  .scenario-row.defense{background:rgba(122,31,31,.08)}
  .scenario-label{
    font-family:'Cinzel',serif; font-size:12px; letter-spacing:.08em;
    color:var(--ink); font-weight:700;
  }
  .scenario-stats{
    display:flex; gap:18px; flex-wrap:wrap;
    font-family:'Special Elite',monospace; font-size:12px; color:var(--ink-soft);
  }
  .scenario-stats strong{color:var(--ink); font-weight:700}
  @media(max-width:680px){
    .scenario-row{grid-template-columns:1fr; gap:6px}
  }

  /* === Composizione finale degli stack === */
  .composition-final{
    margin-top:8px; padding-top:8px; border-top:1px dashed var(--ink-soft);
  }
  .composition-final .lost{color:var(--blood); font-family:'Special Elite',monospace; font-size:12px}

  /* === Info note (es. attacco diretto 1 tick) === */
  .info-note{
    margin:10px 0; padding:8px 14px; border-left:3px solid var(--gold);
    background:rgba(168,132,44,.10); font-style:italic; font-size:13px;
    color:var(--ink-soft);
  }

  /* === Log tick-per-tick === */
  .tick-log{
    border:1px solid var(--ink-soft); margin-bottom:20px;
    background:rgba(255,250,235,.35);
  }
  .tick-log summary{
    padding:10px 14px; cursor:pointer; font-family:'Cinzel',serif;
    font-size:12px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink); background:rgba(74,56,38,.08);
    list-style:none; user-select:none;
  }
  .tick-log summary::-webkit-details-marker{display:none}
  .tick-log summary::before{content:"▸ "; display:inline-block; transition:transform .15s}
  .tick-log[open] summary::before{transform:rotate(90deg)}
  .tick-log-scroll{max-height:400px; overflow:auto}
  .tick-table{
    width:100%; border-collapse:collapse; font-size:12px;
    font-family:'Special Elite',monospace;
  }
  .tick-table th, .tick-table td{
    padding:5px 10px; text-align:right; border-bottom:1px dotted var(--ink-soft);
  }
  .tick-table th{
    background:rgba(74,56,38,.08); color:var(--ink); font-weight:700;
    position:sticky; top:0; font-size:11px; letter-spacing:.05em;
  }
  .tick-table td:first-child, .tick-table th:first-child{
    text-align:center; color:var(--ink-soft);
  }
  .tick-table .num{color:var(--ink)}
  .tick-table .lost{color:var(--blood)}
  .tick-table tbody tr:hover{background:rgba(168,132,44,.10)}

  @keyframes slideUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
  .results.show{animation:slideUp .4s ease-out}