/* Call to Arms: 1861, "Campaign" look. Call of Duty's language (stencil titles, HUD brackets, intel pop-ups)
   in 1861 materials: worn leather, torn parchment, brass, an engraved sepia map. */

:root {
  --ink: #14110d; --parch: #e8dcc0; --paper: #efe4c8; --paper-ink: #2b1d10; --tan: #7a5a2a;
  --amber: #e9a53a; --amber2: #ffcf6e; --blood: #c2412f; --red: #a3261f; --muted: #a99b80; --good: #8fbf6a; --green: #2f6b3a;
  --U: #7f9fd6; --C: #d1ad6c; --Uk: #2d4a86; --Ck: #8a6324;
  --line: rgba(232, 220, 192, .2);
  --stencil: 'Stardos Stencil', Georgia, serif; --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --fell: 'IM Fell English', Georgia, serif; --sans: Barlow, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: #0f0c09; }
body { margin: 0; min-height: 100vh; color: var(--parch); font: 17px/1.5 var(--sans);
  background: radial-gradient(ellipse at 50% 30%, #3b2f22 0%, #1d1712 65%, #0f0c09 100%) fixed; }
button { font: inherit; }
a { color: var(--amber2); }
#app { position: relative; min-height: 100vh; }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.fx .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; mix-blend-mode: overlay; }
.fx .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%); }

/* ---------- type ---------- */
.stencil { font-family: var(--stencil); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; }
.cond { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.fell { font-family: var(--fell); }
.kick { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 14px; color: var(--amber); }
.muted { color: var(--muted); }
h1, h2, h3 { margin: 0; }

/* ---------- layout ---------- */
.screen { max-width: 1320px; margin: 0 auto; padding: 18px 22px 40px; }
.hdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hdr h1 { font: 700 clamp(30px, 4vw, 42px)/1 var(--stencil); letter-spacing: .05em; text-transform: uppercase; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; align-items: start; }
.cols.wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols.pro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (min-width: 901px) { .cols.files { grid-template-columns: 290px minmax(0, 1fr); } }
@media (max-width: 900px) { .cols, .cols.wide, .cols.even, .cols.pro, .cols.files { grid-template-columns: 1fr; } .screen { padding: 14px 14px 40px; } }

/* ---------- panels ---------- */
.pane { background: linear-gradient(180deg, rgba(42, 33, 25, .94), rgba(24, 19, 14, .94)); border: 1px solid var(--line); padding: 16px 18px; }
.brk { position: relative; }
.brk::before, .brk::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--amber); pointer-events: none; z-index: 2; }
.brk::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.brk::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.desk { background: radial-gradient(ellipse at 40% 30%, #5a4430, #3a2b1e 75%); border: 1px solid rgba(232, 220, 192, .18); box-shadow: inset 0 0 60px rgba(0, 0, 0, .6); padding: 20px; }
.paper { background: var(--paper); color: var(--paper-ink); padding: 22px 26px;
  background-image: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .55), transparent 55%), radial-gradient(ellipse at 95% 95%, rgba(120, 80, 30, .28), transparent 50%); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.paper h4, .paper .h4 { margin: 0 0 6px; font-family: var(--cond); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; color: var(--tan); }
.objective { background: rgba(0, 0, 0, .4); border: 1px solid var(--line); padding: 10px 14px; margin-bottom: 16px; font-weight: 600; }
.objective b { font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-right: 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 6px 18px; cursor: pointer;
  font: 700 18px/1.1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--parch);
  background: rgba(232, 220, 192, .08); border: 1px solid rgba(232, 220, 192, .38);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn:hover, .btn:focus-visible { background: rgba(233, 165, 58, .18); outline: none; }
.btn.hot { background: linear-gradient(90deg, var(--amber), #c9832a); color: #1a1209; border-color: var(--amber2); }
.btn.hot:hover { filter: brightness(1.08); }
.btn.dark { background: var(--paper-ink); color: var(--paper); border: 0; }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.btn.block { width: 100%; }
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid currentColor; font-size: 13px; letter-spacing: 0; opacity: .85; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; font-size: 15px; padding: 4px; }

/* ---------- bars ---------- */
.bar { height: 8px; background: rgba(232, 220, 192, .12); position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--amber); transition: width .5s; }
.big { font: 700 64px/1 var(--cond); }
.big small { font-size: 28px; color: var(--muted); }
.pips { display: flex; gap: 4px; } .pips i { width: 14px; height: 10px; background: rgba(232, 220, 192, .15); display: block; } .pips i.on { background: var(--amber); }

/* ---------- title ---------- */
.title { position: relative; min-height: 100vh; overflow: hidden; }
.title .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.smoke { position: absolute; border-radius: 50%; filter: blur(40px); background: rgba(200, 180, 150, .18); animation: drift 18s linear infinite; }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(120px); } }
.title .menu { position: relative; z-index: 3; padding: clamp(40px, 12vh, 140px) clamp(20px, 7vw, 90px) 40px; max-width: 640px; }
.logo { font: 700 clamp(64px, 11vw, 112px)/.9 var(--stencil); letter-spacing: .05em; text-transform: uppercase; color: var(--parch); text-shadow: 0 4px 0 #000, 0 0 40px rgba(233, 165, 58, .25); }
.logo-small { font-size: .55em; }
.logo-year { display: block; margin-top: 10px; font-size: .42em; letter-spacing: .3em; color: var(--amber); text-shadow: 0 3px 0 #000; }
.title .sub { color: var(--amber); font-size: 20px; margin: 12px 0 40px; }
.mi { display: block; background: none; border: 0; cursor: pointer; text-align: left; font: 600 clamp(24px, 3vw, 30px)/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 220, 192, .72); padding: 8px 0 8px 22px; position: relative; }
.mi:hover, .mi:focus-visible { color: #fff; outline: none; }
.mi:hover::before, .mi:focus-visible::before, .mi.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; background: var(--amber); }
.mi small { display: block; font-size: 14px; letter-spacing: .1em; color: var(--amber); }
.title .profile { position: absolute; right: clamp(16px, 4vw, 40px); top: 28px; z-index: 3; text-align: right; }
.title .tquote { position: absolute; right: clamp(16px, 5vw, 60px); bottom: 50px; z-index: 3; width: min(420px, 80vw); font: italic 20px/1.4 var(--fell); text-align: right; color: rgba(232, 220, 192, .88); }
@media (max-width: 760px) { .title .tquote { position: relative; right: auto; bottom: auto; margin: 10px 20px 40px; text-align: left; } }

/* ---------- forms ---------- */
label.f { display: block; margin: 10px 0 4px; font: 600 14px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.in, select.in { width: 100%; height: 50px; padding: 0 14px; font: 600 19px var(--sans); color: var(--parch); background: rgba(0, 0, 0, .45); border: 1px solid rgba(232, 220, 192, .38); border-radius: 0; }
.in:focus { outline: 2px solid var(--amber); }
select.in option { color: #000; }
.err { color: #ff8a74; font-weight: 600; min-height: 24px; margin-top: 8px; }
.codename { font: 700 40px/1 var(--stencil); letter-spacing: .06em; color: var(--amber2); text-transform: uppercase; margin: 8px 0; }

/* ---------- brainstorm ---------- */
.entry { display: flex; gap: 10px; margin-bottom: 22px; }
.entry .in { flex: 1; min-width: 0; font-size: 19px; }
.cards { display: flex; flex-wrap: wrap; gap: 18px; }
.card { width: 230px; min-height: 140px; padding: 16px 16px 14px; background: var(--paper); color: var(--paper-ink); position: relative; box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
  clip-path: polygon(0 3%, 6% 0, 40% 2%, 70% 0, 100% 2%, 99% 40%, 100% 80%, 98% 100%, 60% 98%, 30% 100%, 2% 98%, 0 60%);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(ellipse at 90% 90%, rgba(120, 80, 30, .35), transparent 50%); animation: drop .35s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-12px) rotate(0); } }
.card:nth-child(odd) { transform: rotate(-1.4deg); } .card:nth-child(even) { transform: rotate(1.2deg); }
.card .cat { font: 700 12px var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--tan); }
.card .txt { font: 23px/1.15 var(--fell); margin-top: 4px; word-break: break-word; }
.card .msg { font-size: 13.5px; font-weight: 600; margin-top: 8px; color: #5a4a30; padding-right: 76px; }
.card .st { position: absolute; right: 12px; bottom: 10px; font: 700 16px var(--stencil); letter-spacing: .08em; padding: 1px 8px; border: 3px solid; transform: rotate(-7deg); }
.card.hit .st { color: var(--green); } .card.broad .st { color: #2f4f8a; } .card.dup .st { color: var(--tan); }
.card.miss { filter: grayscale(.7) brightness(.85); } .card.miss .st { color: #7a2a20; }
.card .x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 18px; color: #7a6a50; cursor: pointer; }
.catrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(232, 220, 192, .1); font: 600 18px var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.catrow.classified { color: rgba(232, 220, 192, .38); }
.hintbox { border: 1px solid var(--amber); background: rgba(233, 165, 58, .1); padding: 8px 12px; font-weight: 600; margin-top: 8px; }
.xp { position: absolute; z-index: 95; transform: translateX(-50%); font: 700 28px var(--cond); letter-spacing: .1em; color: var(--amber2); text-shadow: 0 2px 0 #000, 0 0 16px rgba(233, 165, 58, .7); pointer-events: none; animation: rise 1.6s ease-out forwards; white-space: nowrap; }
.xp.bad { color: #ff8a74; }
@keyframes rise { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -40px; } }

/* ---------- report ---------- */
.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rlist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: rgba(255, 250, 235, .55); border: 1px solid rgba(43, 29, 16, .2); }
.rlist li small { display: block; color: #5a4a30; font-weight: 500; }
.stamp { display: inline-block; border: 4px solid currentColor; padding: 2px 12px; font: 700 22px var(--stencil); letter-spacing: .06em; transform: rotate(-4deg); }
.tally { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tally div { background: rgba(255, 250, 235, .6); border: 1px solid var(--paper-ink); padding: 8px 14px; font: 700 18px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.tally .total { background: var(--paper-ink); color: var(--paper); }
.good { color: var(--green); } .bad { color: var(--red); }

/* ---------- intel files ---------- */
.flist { max-height: calc(100vh - 140px); overflow: auto; position: sticky; top: 12px; }
.flist h4 { margin: 12px 4px 4px; font: 700 13px var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.fi { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; color: var(--parch); text-align: left; padding: 6px 8px; font: 600 15px var(--sans); cursor: pointer; }
.fi:hover { background: rgba(232, 220, 192, .08); }
.fi.on { background: var(--amber); color: #1a1209; }
.fi .no { font: 600 13px var(--cond); opacity: .7; width: 22px; }
.fi .ok { margin-left: auto; font-size: 13px; color: var(--good); } .fi.on .ok { color: #1a1209; }
.fi .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blood); }
.sheet { position: relative; }
.sheet .fileno { font: 700 14px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--tan); border-bottom: 2px solid var(--paper-ink); padding-bottom: 4px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sheet .ftitle { font: 700 clamp(32px, 4vw, 44px)/1.05 var(--stencil); letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 6px; padding-right: 210px; }
.verdict { position: absolute; right: 28px; top: 54px; border: 4px solid currentColor; padding: 4px 12px 2px; transform: rotate(-6deg); text-align: center; font: 700 22px/1.05 var(--stencil); letter-spacing: .06em; max-width: 210px; opacity: .9; }
.verdict small { display: block; font: 600 12px var(--cond); letter-spacing: .2em; }
@media (max-width: 700px) { .sheet .ftitle { padding-right: 0; } .verdict { position: static; display: inline-block; margin: 4px 0 10px; } }
.sheet .lead { font: 23px/1.3 var(--fell); margin: 4px 0 12px; }
.sheet .who { font: 600 13px var(--cond); letter-spacing: .06em; color: var(--tan); margin: -4px 0 12px; text-transform: uppercase; }
.st { background: rgba(255, 250, 235, .55); border: 1px solid rgba(43, 29, 16, .25); padding: 8px 12px; margin-bottom: 10px; }
.st .lab { font: 700 14px var(--cond); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.cmp { display: grid; grid-template-columns: 62px 1fr minmax(120px, 230px); gap: 10px; align-items: center; font-weight: 700; font-size: 15px; margin: 3px 0; }
.cmp.text { grid-template-columns: 62px 1fr; }
.cmp .sd { font: 700 14px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.cmp .tr { height: 16px; background: rgba(43, 29, 16, .1); position: relative; }
.cmp .tr i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.two { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
@media (max-width: 700px) { .two { grid-template-columns: 1fr; } .cmp { grid-template-columns: 54px 1fr; } .cmp .tr { display: none; } }
.pts { margin: 0 0 12px; padding-left: 18px; } .pts li { margin: 5px 0; font-size: 15.5px; }
.why { background: var(--paper-ink); color: var(--paper); padding: 12px 14px; margin-bottom: 12px; font-size: 15.5px; }
.why .h4 { color: var(--amber); }
.dyk { border: 2px dashed var(--tan); padding: 10px 12px; margin-bottom: 12px; } .dyk p { margin: 4px 0; font-size: 15px; }
.notes { border: 2px solid var(--paper-ink); padding: 10px 14px; font: 19px var(--fell); background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(43, 29, 16, .15) 27px 28px); }
.notes .cond { color: var(--red); font-size: 13px; display: block; }
.src { margin-top: 12px; font-size: 12.5px; color: #5a4a30; border-top: 1px solid rgba(43, 29, 16, .3); padding-top: 6px; }

/* ---------- map ---------- */
.mapbox { position: relative; background: #3a4a4c; border: 1px solid rgba(232, 220, 192, .3); overflow: hidden; }
.mapbox svg.map { display: block; width: 100%; height: auto; }
.mapbox .node { cursor: default; }
.mapbox .node.target { cursor: pointer; }
.mapbox .node.target text { pointer-events: bounding-box; }   /* clicking a city's name counts too */
.mapbox .tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.mapbox .tools .btn { min-height: 32px; font-size: 14px; padding: 2px 10px; background: rgba(20, 14, 8, .88); }
.mapbox .hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(20, 14, 8, .92); border: 1px solid var(--amber); padding: 5px 14px; font: 600 16px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--amber2); white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pulse { animation: pulse 1.1s ease-in-out infinite; }

/* ---------- war plan ---------- */
.sidetabs { display: flex; gap: 8px; margin-bottom: 12px; }
.sidetabs .btn { flex: 1; }
.sidetabs .btn.on.u { background: var(--Uk); color: #fff; border-color: var(--U); }
.sidetabs .btn.on.c { background: var(--Ck); color: #fff; border-color: var(--C); }
.step { padding: 12px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step h3 { font: 700 18px var(--cond); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: #fff; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { border: 1px solid rgba(232, 220, 192, .38); background: rgba(232, 220, 192, .06); color: var(--parch); padding: 7px 11px; font: 600 15px var(--sans); text-align: left; cursor: pointer; }
.opt:hover { border-color: var(--amber); }
.opt.on { background: var(--amber); color: #1a1209; border-color: var(--amber2); }
.opt:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.locked .opt:disabled { text-decoration: none; opacity: .4; cursor: default; }
.locked .opt.on:disabled { opacity: 1; }
.olist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.olist li { background: rgba(0, 0, 0, .3); border: 1px solid var(--line); padding: 7px 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; font-weight: 600; font-size: 15px; }
.olist select { grid-column: 1 / -1; width: 100%; padding: 5px; font: 600 14px var(--sans); background: #2a2119; color: var(--parch); border: 1px solid var(--line); }
.olist select.need { border-color: var(--amber); }
.olist .rm { background: none; border: 0; color: #ff8a74; cursor: pointer; font-size: 18px; }
.warnline { color: #ff8a74; font-weight: 600; font-size: 14px; min-height: 22px; margin-top: 6px; }
.gradebox { margin-top: 14px; }
.gradebox ul { list-style: none; padding: 0; margin: 8px 0; }
.gradebox li { padding: 4px 0; border-bottom: 1px solid rgba(43, 29, 16, .15); font-size: 15px; display: grid; grid-template-columns: 44px 1fr; }
.gradebox li b { font: 700 17px var(--cond); }
.quote { font: italic 19px/1.4 var(--fell); border-left: 5px solid var(--Uk); padding: 8px 14px; margin: 10px 0; background: rgba(43, 29, 16, .06); }
.check { list-style: none; padding: 0; margin: 8px 0; } .check li { padding: 5px 0; font-weight: 600; } .check .y { color: var(--green); } .check .n { color: var(--red); }

/* ---------- coin ---------- */
.coinwrap { perspective: 900px; display: flex; justify-content: center; margin: 30px 0; }
.coin { width: 220px; height: 220px; position: relative; transform-style: preserve-3d; transition: transform 2.6s cubic-bezier(.2, .8, .2, 1); }
.coin .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 26px/1.1 var(--stencil); letter-spacing: .05em; border: 6px solid #8a6a2a; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .6); }
.coin .u { background: radial-gradient(circle at 35% 30%, #f5d58a, #c9962e 60%, #8a6a2a); color: #1d2a52; }
.coin .c { background: radial-gradient(circle at 35% 30%, #e8d5b0, #b59d6e 60%, #6b5536); color: #3a2a12; transform: rotateY(180deg); }

/* ---------- prologue ---------- */
.harbor { border: 1px solid rgba(232, 220, 192, .25); background: #1c2628; }
.harbor svg { display: block; width: 100%; height: auto; }
.choice { display: block; width: 100%; text-align: left; cursor: pointer; padding: 12px 16px; margin-bottom: 8px; color: var(--parch); font: 600 16px var(--sans);
  background: rgba(232, 220, 192, .06); border: 1px solid rgba(232, 220, 192, .3); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.choice:hover, .choice:focus-visible { background: rgba(233, 165, 58, .16); border-color: var(--amber); outline: none; }
.choice b { font: 700 19px var(--cond); letter-spacing: .06em; text-transform: uppercase; display: block; color: #fff; }
.choice span { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.fxlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin-top: 8px; }
.fxlist div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(232, 220, 192, .12); padding: 3px 0; font: 600 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.up { color: var(--good); } .down { color: #ff8a74; }
@media (max-width: 600px) { .fxlist { grid-template-columns: 1fr; } }

/* ---------- modal / toast ---------- */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(8, 6, 4, .74); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal > * { width: min(720px, 100%); max-height: 90vh; overflow: auto; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 99; background: #2a2119; border: 1px solid var(--amber); padding: 10px 18px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.saveline { font: 600 13px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media print { .fx, .btn { display: none !important; } body { background: #fff; color: #000; } }

/* phones: the file list becomes a short scrolling box above the file */
@media (max-width: 900px) { .flist { position: static; max-height: 240px; } .mapbox .tools .btn { min-height: 28px; font-size: 12px; } }

/* ---------- the war ---------- */
.screen.war { max-width: 1440px; }
.hud { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 12px; padding: 12px 16px; }
.season { font: 700 clamp(28px, 3.4vw, 40px)/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.meter .lab { display: flex; justify-content: space-between; font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.meter .lab b { color: #fff; }
.meter .bar { height: 10px; }
.meter .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #ff8a74; }
.cols.war { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.legend2 { gap: 18px; font: 600 13px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.unitname { font: 700 22px/1.1 var(--stencil); letter-spacing: .04em; text-transform: uppercase; }
.armylist { max-height: 210px; overflow: auto; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.armylist .fi .ok { color: var(--muted); }
.gcard { display: block; width: 100%; text-align: left; margin: 10px 0 4px; padding: 10px 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); color: var(--parch); }
.gcard b { font: 700 19px var(--cond); letter-spacing: .04em; color: #fff; }
.gstat { display: grid; grid-template-columns: 100px 1fr; align-items: center; font: 600 12px var(--cond); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.gcard .trait { color: #ff8a74; font: 700 14px var(--cond); letter-spacing: .05em; margin-top: 6px; }
.ordered { margin: 8px 0; padding: 6px 10px; border: 1px solid var(--amber); color: var(--amber2); font: 600 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.acts { display: grid; gap: 6px; margin-top: 10px; }
.acts .btn { justify-content: space-between; text-align: left; min-height: 44px; font-size: 16px; letter-spacing: .08em; }
.acts .btn small { display: block; font: 500 12.5px var(--sans); text-transform: none; letter-spacing: 0; opacity: .8; margin-top: 2px; }
.cp { display: flex; gap: 6px; margin: 6px 0; } .cp i { width: 30px; height: 12px; background: var(--amber); transform: skewX(-20deg); } .cp i.used { background: rgba(232, 220, 192, .15); }
.oddsbar { position: relative; height: 26px; margin: 10px 0; border: 1px solid #000; background: linear-gradient(90deg, var(--U) 0 var(--p), var(--C) var(--p) 100%); }
.needle { position: absolute; top: -8px; bottom: -8px; left: 0; width: 4px; background: #fff; box-shadow: 0 0 8px #fff; transition: left 1.6s cubic-bezier(.2, .8, .2, 1); }
.disp { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(232, 220, 192, .12); }
.disp .ic { font-size: 22px; text-align: center; }
.disp b { font: 700 17px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.disp p { margin: 2px 0 0; }
.badline { color: #ffb4a6; }
.deltas { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 10px; font: 700 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.cardline { margin-top: 8px; border-color: var(--amber); }
@media (max-width: 1100px) { .cols.war { grid-template-columns: 1fr; } .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hud { grid-template-columns: 1fr; } }

/* ---------- after-action report ---------- */
.banner.win { border-color: var(--good); } .banner.loss { border-color: #ff8a74; }
.note2 { color: var(--muted); font-size: 15.5px; }
.banner .tally div { background: rgba(0, 0, 0, .3); color: var(--parch); border-color: var(--line); }
.timeline { border: 1px solid var(--line); background: rgba(24, 19, 14, .85); }
.tlrow { display: grid; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(232, 220, 192, .08); }
.tlrow.head { font: 700 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tlrow .when { font: 700 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.tlrow p { margin: 3px 0; font-size: 15px; }
.tlrow p.good { color: #cfe8bd; } .tlrow p.bad { color: #ffb4a6; }
.echo { display: block; text-align: left; background: none; border: 1px solid var(--amber); color: var(--amber2); padding: 5px 9px; margin: 3px 0; cursor: pointer; font: 600 14px var(--sans); }
.echo span { color: var(--muted); }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hcard { text-align: left; padding: 12px; background: var(--paper); color: var(--paper-ink); border: 0; cursor: pointer; font: 600 14px var(--sans); }
.hcard b { display: block; font: 700 16px var(--stencil); letter-spacing: .04em; text-transform: uppercase; }
.hcard.locked { background: rgba(232, 220, 192, .08); color: var(--muted); cursor: default; }
@media (max-width: 700px) { .tlrow { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- head-to-head ---------- */
.joincode { font: 700 clamp(44px, 7vw, 64px)/1 var(--stencil); letter-spacing: .08em; color: var(--amber2); margin: 14px 0; text-shadow: 0 0 24px rgba(233, 165, 58, .35); }
.waiting { text-align: center; }

/* ---------- title screen: two armies at dusk ---------- */
.title2 { display: flex; flex-direction: column; }
.title2 .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.title2 .flash { opacity: 0; animation: flash 4.6s ease-out infinite; }
@keyframes flash { 0%, 90% { opacity: 0; } 91% { opacity: 1; } 96% { opacity: .5; } 100% { opacity: 0; } }
.title2 .clouds { animation: clouds 60s ease-in-out infinite alternate; }
@keyframes clouds { to { transform: translateX(60px); } }
.title2 .center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px, 6vh, 70px) 16px 160px; }
.logo2 { display: flex; flex-direction: column; align-items: center; margin-top: 10px; font-family: var(--stencil); font-weight: 700; text-transform: uppercase; line-height: .9; }
.logo2 .l1 { font-size: clamp(26px, 3.6vw, 46px); letter-spacing: .35em; color: var(--parch); text-shadow: 0 3px 0 #000; margin-left: .35em; }
.logo2 .l2 { font-size: clamp(96px, 16vw, 210px); letter-spacing: .04em; background: linear-gradient(180deg, #fff3d6 0%, #f2d49a 38%, #c9962e 62%, #8a6324 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 34px rgba(233, 165, 58, .45)); }
.logo2 .l3 { display: flex; align-items: center; gap: 18px; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: .5em; color: var(--amber2); margin-top: 6px; text-shadow: 0 3px 0 #000; }
.logo2 .l3::before, .logo2 .l3::after { content: ''; width: clamp(40px, 8vw, 110px); height: 3px; background: linear-gradient(90deg, transparent, var(--amber)); }
.logo2 .l3::after { transform: scaleX(-1); }
.tagline { font: italic clamp(18px, 2vw, 24px) var(--fell); color: rgba(255, 240, 210, .92); margin-top: 14px; text-shadow: 0 2px 8px #000; }
.menu2 { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.row2 { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mi2 { cursor: pointer; border: 1px solid rgba(232, 220, 192, .45); background: rgba(14, 10, 7, .72); color: var(--parch); padding: 10px 22px; font: 600 18px var(--cond); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); backdrop-filter: blur(3px); }
.mi2:hover, .mi2:focus-visible { background: rgba(233, 165, 58, .25); outline: none; color: #fff; }
.mi2.primary { min-width: min(420px, 86vw); padding: 14px 30px; font-size: 26px; font-weight: 700; color: #1a1209; border-color: var(--amber2); background: linear-gradient(90deg, #f2c25c, #c9832a); box-shadow: 0 0 30px rgba(233, 165, 58, .35); }
.mi2.primary:hover { filter: brightness(1.1); color: #000; }
.mi2 small { display: block; font-size: 13px; letter-spacing: .12em; opacity: .85; margin-top: 2px; }
.sides { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; font: 700 clamp(14px, 1.5vw, 20px) var(--cond); letter-spacing: .3em; text-transform: uppercase; }
.sides span { position: absolute; transform: translate(-50%, 0); white-space: nowrap; }
.sides .u { color: #cfe0ff; text-shadow: 0 2px 8px #000; } .sides .c { color: #f1d9a8; text-shadow: 0 2px 8px #000; } .sides .vs { display: none; }
.title2 .bottom { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; }
.title2 .stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px; }
.title2 .stats span { font: 600 14px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--parch); background: rgba(14, 10, 7, .7); border: 1px solid rgba(232, 220, 192, .25); padding: 4px 12px; }
.title2 .ticker { overflow: hidden; background: rgba(8, 6, 4, .88); border-top: 1px solid var(--amber); white-space: nowrap; }
.title2 .ticker .track { display: inline-block; padding: 9px 0; animation: ticker 60s linear infinite; }
.title2 .ticker span { font: 600 15px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--amber2); margin-right: 48px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.title2 { background: linear-gradient(180deg, #140f14 0%, #3a1f22 40%, #8c3a22 75%, #d9772e 100%); }
@media (max-width: 700px) {
  .title2 .profile { position: relative; right: auto; top: auto; z-index: 4; text-align: center; padding-top: 12px; }
  .title2 .profile .cond { font-size: 18px !important; }
  .title2 .stats { display: none; }
  .title2 .center { padding-bottom: 240px; }
  .sides { font-size: 11px; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) { .title2 .flash, .title2 .clouds, .title2 .ticker .track, .smoke { animation: none; } }