/* General — Battle 1. Landscape war table: top strip with the siege clock, army panel on the right,
   Talas's lines bottom-left, the dispatch log bottom-right. Single dark theme, colours set explicitly. */
:root{
  --ink:#140f0a; --umber:#2e2117; --paper:#ecdcb6; --paper-2:#c4ad80; --sheet:#f3e6c6; --text-ink:#20170f; --muted:#6b5a42;
  --cinnabar:#b7322c; --gold:#d8b46a; --azure:#2f5d7c; --jade:#4e7d5b;
  --brush:'LXGW WenKai TC','Noto Serif TC','PingFang TC','Microsoft JhengHei','STKaiti',serif;
  --text:'EB Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--ink);color:var(--paper);font-family:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--ink)}
#stage.aim{cursor:crosshair}#stage.pointy{cursor:pointer}#stage.drag{cursor:grabbing}
button{font:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* top strip */
.top{position:fixed;left:0;right:0;top:0;padding:calc(6px + var(--sa-t)) calc(12px + var(--sa-r)) 6px calc(12px + var(--sa-l));display:flex;align-items:center;gap:14px;z-index:5;background:linear-gradient(rgba(14,10,6,.9),rgba(14,10,6,.55) 70%,rgba(14,10,6,0));pointer-events:none}
.top > *{pointer-events:auto}
.when{display:flex;align-items:center;gap:8px;flex:none}
.when .seal{width:34px;height:34px;background:var(--cinnabar);color:#fff4e0;font-family:var(--brush);font-weight:700;font-size:23px;display:grid;place-items:center;border-radius:3px}
.when > div:last-child{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.when b{font-family:var(--brush);font-size:24px;font-weight:400;line-height:1}
.when #day{font-size:14px;color:var(--paper-2);letter-spacing:.06em}
.when #time{font-size:16px;font-weight:600;min-width:42px}
.clock{flex:1;min-width:150px;max-width:520px;margin:0 auto}
.clock .track{position:relative;height:9px;background:rgba(236,220,182,.13);border-radius:5px;margin:10px 0 3px}
.clock .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#4a2e1a,#7a5a2a);border-radius:5px}
.clock .nowmk{position:absolute;top:-4px;width:3px;height:17px;background:var(--paper);border-radius:2px;margin-left:-1px}
.clock .mk{position:absolute;top:-15px;margin-left:-11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.clock .mk b{font-family:var(--brush);font-weight:700;font-size:13px;color:#fff4e0}
.clock .fall{background:var(--cinnabar);box-shadow:0 0 0 2px rgba(20,15,10,.8);transition:left .4s ease}
.clock .relief{background:#6a5428;box-shadow:0 0 0 2px rgba(20,15,10,.8)}
.clock .legend{display:flex;justify-content:space-between;font-size:12px;color:var(--paper-2);gap:8px;white-space:nowrap}
.clock .legend #fallText{color:#f0a090}
.clock .legend #fallText.safe{color:#b9d6a6}
.clock.flash .track{animation:flash 1.2s ease 2}
@keyframes flash{50%{box-shadow:0 0 0 3px var(--gold)}}
.ctl{display:flex;gap:8px;align-items:center;flex:none}
.speed{display:flex;border:1px solid rgba(216,180,106,.38);border-radius:4px;overflow:hidden;background:rgba(20,15,10,.75)}
.speed button{color:var(--paper);background:transparent;border:0;padding:6px 0;cursor:pointer;min-width:42px;font-size:14px}
.speed button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.speed button+button{border-left:1px solid rgba(216,180,106,.25)}
.speed.flash{animation:flash 1.2s ease 3}
.sleep{display:flex;gap:6px;align-items:center;color:var(--paper);background:#2a3550;border:1px solid #6a7cae;border-radius:4px;padding:5px 10px;cursor:pointer;font-size:14px}
.sleep b{font-family:var(--brush);font-weight:700;font-size:17px}
.sndb{font-family:var(--brush);font-size:18px;width:36px;height:32px;color:var(--paper);background:rgba(20,15,10,.75);border:1px solid rgba(216,180,106,.38);border-radius:4px;cursor:pointer}
.sndb[aria-pressed="false"]{opacity:.45;text-decoration:line-through}

/* army panel: a hanging scroll on the right */
.panel{position:fixed;right:calc(10px + var(--sa-r));top:56px;width:min(300px,40vw);max-height:calc(100% - 66px);z-index:4;color:var(--text-ink);display:flex;flex-direction:column;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.panel::before,.panel::after{content:"";height:10px;border-radius:5px;background:linear-gradient(#6b4325,#2b170a);margin:0 -6px;flex:none}
.panel .body{background:linear-gradient(90deg,#d9c194,#efdfbb 6%,#f3e6c6 50%,#efdfbb 94%,#d9c194);padding:10px 13px 12px;overflow-y:auto;scrollbar-width:thin;position:relative}
.panel.fresh .body{animation:unroll .45s ease}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.ph{display:flex;gap:9px;align-items:center;padding-right:24px}
.ph .pz{font-family:var(--brush);font-weight:700;font-size:30px;line-height:1;color:var(--cinnabar)}
.ph .pn{font-size:16px;font-weight:600;line-height:1.15}
.ph .pc{font-size:12.5px;font-style:italic;color:#5a4a36}
.close{position:absolute;right:6px;top:6px;font-size:18px;background:none;border:0;color:#6b5a42;cursor:pointer;width:30px;height:30px}
.sum{font-size:13px;color:#3b2c1c;margin:6px 0;font-variant-numeric:tabular-nums}
.bats{display:flex;gap:4px;margin:4px 0 8px}
.bat{width:34px;height:34px;display:grid;place-items:center;font-family:var(--brush);font-weight:700;font-size:16px;color:#fff4e0;border-radius:2px;background:#7a2a1e}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;font-size:13px;margin-bottom:6px}
.kv dt{color:#6b5a42}.kv dd{margin:0;font-weight:600}
.kv dd .g{font-family:var(--brush);font-weight:700;font-size:16px;margin-right:4px;color:var(--cinnabar)}
.bar{height:6px;background:rgba(60,40,20,.18);border-radius:4px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#7a2a1e,var(--cinnabar))}
.sig{font-size:12.5px;background:rgba(183,50,44,.1);border-left:3px solid var(--cinnabar);padding:4px 7px;margin:4px 0 8px}
.note{font-size:12.5px;font-style:italic;color:#5a4a36;margin:4px 0}
.cmds{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:4px}
.cmds button{font-size:11.5px;background:rgba(60,40,20,.08);border:1px solid rgba(60,40,20,.28);border-radius:3px;padding:5px 0 4px;cursor:pointer;color:#3b2c1c;display:flex;flex-direction:column;align-items:center;gap:1px}
.cmds button b{font-family:var(--brush);font-weight:700;font-size:20px;line-height:1;color:var(--cinnabar)}
.cmds button[aria-pressed="true"]{background:#3b2c1c;color:#f3e6c6}.cmds button[aria-pressed="true"] b{color:#f3e6c6}
.cmds button:disabled{opacity:.35;cursor:default}

/* tags over the pieces */
#tags{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tag{position:absolute;left:0;top:0;white-space:nowrap;font-size:11.5px;line-height:1.15;padding:2px 6px 2px 4px;background:rgba(243,230,198,.92);color:var(--ink);border-radius:2px;display:flex;gap:4px;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35);will-change:transform}
.tag b{font-family:var(--brush);font-weight:700;font-size:14px;color:var(--cinnabar)}
.tag.enemy{background:rgba(220,212,196,.9)}.tag.enemy b{color:var(--ink)}
.tag.sel{outline:2px solid var(--gold)}
.tag.eta{background:rgba(20,15,10,.75);color:var(--paper);font-size:11px;box-shadow:none}
.tag .st{color:var(--cinnabar);font-weight:600}
.tag.coach{animation:coach 1.4s ease-in-out infinite}
@keyframes coach{50%{box-shadow:0 0 0 4px var(--gold),0 2px 6px rgba(0,0,0,.35)}}

/* the command ring */
.radial{position:fixed;left:0;top:0;width:0;height:0;z-index:8}
.radial .ring{position:absolute;left:-88px;top:-88px;width:176px;height:176px;border-radius:50%;background:radial-gradient(circle,rgba(20,15,10,0) 32%,rgba(20,15,10,.6) 34%,rgba(20,15,10,.6) 70%,rgba(20,15,10,0) 72%);animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.ri{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1px solid rgba(216,180,106,.55);background:radial-gradient(circle at 40% 35%,#3a2a1c,#140f0a);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.5);animation:pop .18s ease-out}
.ri b{font-family:var(--brush);font-weight:700;font-size:24px;line-height:1}
.ri small{font-size:10px;margin-top:1px}
.ri.hot,.ri:hover{background:radial-gradient(circle at 40% 35%,#d0473c,#8f1d18);border-color:#f3c48a}
.rc{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(216,180,106,.4);background:rgba(20,15,10,.9);color:var(--paper-2);font-size:12px;cursor:pointer}
.rlabel{position:absolute;left:-100px;width:200px;top:96px;text-align:center;font-size:12px;color:var(--paper);text-shadow:0 1px 4px #000}

/* Talas speaks */
.talk{position:fixed;left:calc(10px + var(--sa-l));bottom:calc(10px + var(--sa-b));width:min(560px,58vw);z-index:6;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:linear-gradient(90deg,#e6d2a6,#f3e6c6 18%,#f3e6c6 85%,#e8d5aa);color:var(--text-ink);border-radius:3px;padding:8px 10px 8px 8px;box-shadow:0 8px 22px rgba(0,0,0,.5);border-left:4px solid var(--cinnabar);animation:rise .35s ease}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
.talk .who{width:40px;height:40px;border-radius:50%;background:#3b2c1c;color:#f3e6c6;display:grid;place-items:center;font-family:var(--brush);font-weight:700;font-size:22px}
.talk .name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b5a42;font-weight:600}
.talk .line{font-size:15.5px;line-height:1.3}
.talk .act{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.skip{background:none;border:0;color:#6b5a42;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:2px}
.btn{font-size:14px;background:var(--cinnabar);color:#fff4e0;border:0;border-radius:3px;padding:7px 12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;justify-content:center}
.btn .g{font-family:var(--brush);font-weight:700;font-size:19px;line-height:1}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.btn.big{font-size:16px;padding:10px 18px}

/* dispatch log */
.log{position:fixed;right:calc(10px + var(--sa-r));bottom:calc(10px + var(--sa-b));width:min(330px,36vw);z-index:3;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.log div{background:rgba(236,220,182,.92);color:var(--ink);font-size:12px;line-height:1.28;padding:3px 7px;border-left:3px solid var(--umber);animation:rise .35s ease}
.log div b{font-family:var(--brush);font-weight:700;font-size:14px;margin-right:4px}
.log div.sig{border-left-color:var(--cinnabar)}.log div.rep{border-left-color:var(--azure)}.log div.ack{border-left-color:var(--jade)}.log div.big{border-left-color:var(--gold);background:#f6e3b4}
.log .tm{color:#6b5a42;font-size:10.5px;margin-right:4px;font-variant-numeric:tabular-nums}

/* overlays */
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(10,7,4,.62);padding:12px calc(12px + var(--sa-r)) 12px calc(12px + var(--sa-l))}
.overlay .sheet{width:min(720px,100%);max-height:calc(100vh - 24px);overflow:auto;background:linear-gradient(#ead7ad,#f3e6c6 12%,#f3e6c6 88%,#e2cc9e);color:var(--text-ink);padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;box-shadow:0 18px 40px rgba(0,0,0,.6);border-top:10px solid #3b2414;border-bottom:10px solid #3b2414;animation:unrollx .55s ease}
@keyframes unrollx{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
.overlay .title{font-family:var(--brush);font-weight:700;font-size:64px;line-height:1;color:var(--cinnabar);border-right:1px solid rgba(60,40,20,.2);padding-right:18px;writing-mode:vertical-rl;white-space:nowrap}
.overlay h1{margin:0;font-size:30px;font-weight:600;letter-spacing:.08em}
.overlay h2{margin:0 0 4px;font-size:22px}
.overlay .sub{margin:2px 0 8px;color:#5a4a36;font-size:15px}
.overlay .story{margin:0 0 8px;font-size:15px;line-height:1.4}
.overlay .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.overlay .credit{font-size:12.5px;color:#6b5a42;font-style:italic}
.diff{display:flex;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.diff button{border:1px solid rgba(60,40,20,.35);background:transparent;border-radius:4px;padding:6px 12px;cursor:pointer;color:#3b2c1c;text-align:left;display:flex;flex-direction:column}
.diff button b{font-size:15px}.diff button small{font-size:12px;color:#6b5a42}
.diff button[aria-checked="true"]{background:#3b2c1c;color:#f3e6c6;border-color:#3b2c1c}.diff button[aria-checked="true"] small{color:#d8c7a2}
.seals{display:flex;gap:12px;margin:8px 0 10px;flex-wrap:wrap}
.sealx{display:flex;gap:8px;align-items:center;font-size:13.5px;min-width:160px}
.sealx i{width:44px;height:44px;border-radius:4px;display:grid;place-items:center;font-family:var(--brush);font-weight:700;font-size:26px;font-style:normal;background:rgba(60,40,20,.12);color:rgba(60,40,20,.35);border:2px dashed rgba(60,40,20,.3)}
.sealx.on i{background:var(--cinnabar);color:#fff4e0;border:2px solid #8f1d18;transform:rotate(-4deg)}
.sealx small{display:block;color:#6b5a42;font-size:12px}
.stats{font-size:13.5px;color:#3b2c1c;margin:0 0 8px;font-variant-numeric:tabular-nums}
.secret{border-top:1px solid rgba(60,40,20,.2);padding-top:8px;margin-top:4px;font-size:14.5px}
.secret b{font-weight:600;color:var(--cinnabar);font-size:17px;margin-right:6px}
.secret em{display:block;color:#5a4a36;margin-top:3px}
.rotate{z-index:30;background:var(--ink);text-align:center;color:var(--paper)}
.rotate .phone{font-size:56px;animation:turn 2s ease-in-out infinite}
@keyframes turn{50%{transform:rotate(-90deg)}}
.rotate p{font-size:18px}
.rotate .btn{color:var(--paper)}
.veil{position:fixed;inset:0;background:var(--ink);display:grid;place-items:center;z-index:40;transition:opacity 1s ease}
.veil.gone{opacity:0;pointer-events:none}
.veil .vz{font-family:var(--brush);font-weight:700;font-size:96px;line-height:1;text-align:center;color:var(--paper)}
.veil .vs{margin-top:12px;text-align:center;font-style:italic;color:var(--paper-2)}
.err{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;z-index:50;background:var(--ink);color:var(--paper)}

/* short landscape screens (phones) */
@media (max-height:500px){
  .top{gap:10px;padding-top:calc(4px + var(--sa-t))}
  .when .seal{display:none}
  .when #day{font-size:12px}
  .clock .legend{font-size:11px}
  .clock .legend .rel{display:none}
  .speed button{min-width:38px;padding:5px 0}
  .sleep{padding:4px 8px;font-size:12.5px}
  .panel{top:46px;max-height:calc(100% - 54px);width:min(232px,30vw)}
  .panel .body{padding:6px 9px 8px}
  .ph{gap:7px}.ph .pz{font-size:22px}.ph .pn{font-size:14px}.ph .pc,.panel .bats,.panel .note{display:none}
  .sum{font-size:12px;margin:3px 0}
  .kv{font-size:12px;gap:0 8px;margin-bottom:3px}.kv dd .g{font-size:14px}
  .sig{font-size:11.5px;padding:2px 6px;margin:2px 0 4px}
  .cmds{gap:4px}.cmds button{font-size:10px;padding:3px 0 2px}.cmds button b{font-size:17px}
  .close{width:26px;height:26px;top:2px;right:2px}
  .talk{width:min(520px,62vw);padding:6px 8px 6px 6px;gap:8px}
  .talk .who{width:32px;height:32px;font-size:18px}
  .talk .line{font-size:14px}
  .log{width:min(260px,34vw)}
  .log div:nth-child(n+3){display:none}
  .overlay .sheet{padding:12px 16px;gap:4px 16px}
  .overlay .title{font-size:44px}
  .overlay h1{font-size:24px}
  .overlay .story{font-size:13.5px;margin-bottom:5px}
}
@media (prefers-reduced-motion:reduce){.panel.fresh .body,.overlay .sheet,.ri,.radial .ring,.log div,.talk,.tag.coach,.rotate .phone{animation:none}}