/* The Last Keep - layout and HUD. Art: Time Fantasy (finalbossblues). */
:root{
  --ink:#0d1410;
  --night:#19377b;
  --night-2:#10275c;
  --paper:#fdf6e3;
  --muted:#b9c4d8;
  --gold:#ffd766;
  --blue:#56a8ff;
  --red:#ff5a4e;
  --ok:#7ee07e;
  --ui:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);font-family:var(--ui)}
body{display:flex;flex-direction:column;min-height:100%;overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}

#stage{flex:1;display:grid;place-items:center;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#game{
  position:relative;
  width:min(100vw, calc((100dvh - 1.6rem) * 16 / 9));
  aspect-ratio:16/9;
  container-type:size;
  overflow:hidden;
  background:#3f6a35;
  user-select:none;-webkit-user-select:none;
}
#view{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}

.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1rem;padding:.3rem .8rem calc(.3rem + env(safe-area-inset-bottom));
  font-size:.68rem;letter-spacing:.04em;color:#8c9a8f;min-height:1.6rem}
.legal a{color:inherit;text-decoration:none}
.legal a:hover,.legal a:focus-visible{color:var(--paper)}
/* (2026-10-13: footer on the main menu only): hidden in battle, on the rival screen and on the trophies panel */
body:has(#menu[hidden]) .legal,body:has(#newSetup:not([hidden])) .legal,body:has(#achPanel:not([hidden])) .legal{display:none}

/* Pixel window frame from the Time Fantasy window skin */
.frame, .panel, #recruits .unit, .shopbtn, .tools button, .purse, .score{
  border:solid calc(5 * 100cqw / 640) transparent;
  border-image:url(/siege/assets/ui_frame.png?v=2df7405279) 5 / calc(5 * 100cqw / 640) stretch;
  background:rgba(25,55,123,.92);
  background-clip:padding-box;
  image-rendering:pixelated;
}
.icon{display:inline-block;width:calc(16 * 100cqw / 640);height:calc(16 * 100cqw / 640);flex:none;
  background:url(/siege/assets/icons.png?v=2df7405279) 0 0 / auto 100% no-repeat;image-rendering:pixelated}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-size:2.1cqw;text-shadow:0 .12em 0 rgba(0,0,0,.55)}
#hud .top{position:absolute;left:1cqw;right:1cqw;top:1cqh;display:flex;align-items:stretch;gap:1cqw}
.score{flex:1;display:flex;align-items:center;gap:.8cqw;padding:.2cqh 1cqw;font-weight:800;min-width:0}
.score .who{font-size:.8em;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:15cqw}
.score b{font-size:1.1em;font-variant-numeric:tabular-nums}
.score .of{font-size:.75em;color:var(--muted)}
.score .bar{flex:1;height:1.8cqh;min-width:6cqw;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.score .bar i{display:block;height:100%;width:0;transition:width .25s ease-out}
.score.you .bar i{background:linear-gradient(#8fd0ff,var(--blue))}
.score.them .bar i{background:linear-gradient(#ff9d8f,var(--red));margin-left:auto}
.score.them .bar{display:flex}
.score.you .who{color:#bfe3ff}.score.them .who{color:#ffc1ba}
.purse{display:flex;align-items:center;gap:.6cqw;padding:.2cqh 1.2cqw;font-weight:800;color:var(--gold)}
.purse b{font-size:1.25em;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.purse small{font-size:.7em;color:var(--muted);font-weight:600}
.tools{display:flex;gap:.6cqw;pointer-events:auto}
.tools button{min-width:5.6cqw;padding:0 .6cqw;font-weight:800;font-size:.95em;border-radius:0}
.tools button.off{color:var(--muted)}
.soundrow{display:flex;gap:1cqw;justify-content:center;flex-wrap:wrap}
.panel .soundrow button{font-size:.75em;padding:.6cqh 1.4cqw}

#hud .bottom{position:absolute;left:1cqw;right:1cqw;bottom:1.2cqh;display:flex;gap:1cqw;align-items:stretch;pointer-events:auto}
#recruits{flex:1;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:.8cqw}
#recruits .unit[hidden]{display:none}
#recruits.many{gap:.5cqw}
#recruits.many .unit{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;padding:.3cqh .3cqw}
#recruits.many .unit canvas{grid-row:auto}
#recruits.many .unit .nm{display:none}
#recruits.many .unit .cost{justify-self:center;font-size:.8em}
#recruits.lots{gap:.3cqw}
#recruits.lots .unit{padding:.2cqh .1cqw}
#recruits.lots .unit canvas{width:calc(27 * 100cqw / 640);height:calc(27 * 100cqw / 640)}
#recruits.lots .unit .cost{font-size:.7em;gap:0;letter-spacing:-.02em}
#recruits.lots .unit .cost .icon, #recruits.lots .unit kbd{display:none}
#recruits .unit{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.5cqw;
  align-items:center;padding:.3cqh .6cqw;text-align:left;border-radius:0;min-height:13cqh;overflow:hidden}
#recruits .unit canvas{grid-row:1 / span 2;width:calc(34 * 100cqw / 640);height:calc(34 * 100cqw / 640);image-rendering:pixelated}
#recruits .unit .nm{font-weight:800;font-size:.72em;line-height:1.05;align-self:end}
#recruits .unit .cost{display:flex;align-items:center;gap:.3cqw;color:var(--gold);font-weight:800;font-size:.9em;align-self:start}
#recruits .unit .cost .icon{width:calc(12 * 100cqw / 640);height:calc(12 * 100cqw / 640)}
#recruits .unit kbd, .shopbtn kbd{position:absolute;right:.5cqw;top:.2cqh;line-height:1;font:700 .62em var(--ui);color:var(--muted);opacity:.9}
#recruits .unit .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.55);pointer-events:none}
#recruits .unit[aria-disabled="true"]{filter:grayscale(.65) brightness(.8)}
#recruits .unit.poor .cost{color:#ff9b8c}
#recruits .unit:not([aria-disabled="true"]):hover{background-color:rgba(38,78,168,.95)}
#recruits .unit:active{transform:translateY(1px)}
.shopbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3cqh;
  padding:.3cqh 1.4cqw;font-weight:800;font-size:.85em;border-radius:0;min-width:11cqw}
.shopbtn .icon{width:calc(20 * 100cqw / 640);height:calc(20 * 100cqw / 640)}
.shopbtn.ready{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{background-color:rgba(25,55,123,.92)}50%{background-color:rgba(120,96,20,.95)}}

#toast{position:absolute;left:50%;top:14cqh;translate:-50% 0;padding:.6cqh 2cqw;font:800 2.2cqw var(--ui);
  background:rgba(13,20,16,.72);border-radius:.4cqw;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}

/* ---------- Panels ---------- */
.panel{position:absolute;color:var(--paper);font-size:2.2cqw;padding:2cqh 2.4cqw}
.panel h1,.panel h2{margin:0;font-weight:900;letter-spacing:.01em;text-shadow:0 .1em 0 rgba(0,0,0,.5)}
.panel.center{left:50%;top:50%;translate:-50% -50%;width:min(64cqw,100%);max-height:94cqh;overflow:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.4cqh}
.panel.small{width:40cqw}
.panel a.home{color:var(--muted);font-size:.8em;font-weight:700;text-decoration:none;padding:.6cqh 1cqw;background:rgba(255,255,255,.06)}
.panel a.home:hover,.panel a.home:focus-visible{color:var(--paper);background:rgba(255,255,255,.16)}
.panel a.home.top{align-self:flex-start;margin-bottom:-1cqh}
#menu{font-size:1.8cqw;gap:1.2cqh}
@media (max-height:480px){#menu{gap:.5cqh}}   /* phones held sideways: the whole menu fits without scrolling */
#menu h1{font-size:4.6cqw;color:var(--gold)}
#menu .tag{margin:0;font-size:1em;line-height:1.35;color:#e8eefc}
.how{list-style:none;margin:0;padding:0;display:grid;gap:.8cqh;text-align:left;font-size:.85em;line-height:1.3}
.how li{display:flex;gap:1cqw;align-items:center}
.diff{border:0;margin:0;padding:0;display:flex;gap:1cqw;width:100%}
.diff legend{font-size:.8em;color:var(--muted);margin:0 auto .6cqh;letter-spacing:.06em;text-transform:uppercase}
.diff label{flex:1 1 0;min-width:0;display:flex;cursor:pointer}
.diff input{position:absolute;opacity:0;pointer-events:none}
.diff span{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.2cqh;white-space:normal;line-height:1.15;padding:1cqh .6cqw;border:2px solid rgba(255,255,255,.18);background:rgba(0,0,0,.2)}
.diff b{font-size:.8em}.diff small{font-size:.72em;color:var(--muted)}
.diff input:checked + span{border-color:var(--gold);background:rgba(255,215,102,.14)}
.diff input:focus-visible + span{outline:2px solid var(--paper);outline-offset:2px}
.panel button{border:0;background:rgba(255,255,255,.1);padding:1cqh 2cqw;font-weight:700;font-size:.9em}
.panel button:hover{background:rgba(255,255,255,.2)}
.panel button.big{background:var(--gold);color:#2a1d05;font-size:1.25em;font-weight:900;padding:1.4cqh 4cqw;box-shadow:0 .5cqh 0 #a8801d}
.panel button.big:hover{filter:brightness(1.08)}
.panel button.big:active{translate:0 .3cqh;box-shadow:0 .2cqh 0 #a8801d}
.record{margin:0;font-size:.8em;color:var(--muted);min-height:1em}
#overTitle{font-size:5cqw}
#over.win #overTitle{color:var(--gold)}#over.lose #overTitle{color:#ff9b8c}
#overLine{margin:0;font-size:1em}
#overStats{display:grid;grid-template-columns:auto auto auto;gap:.4cqh 2.4cqw;margin:0;font-size:.85em;text-align:left}
#overStats dt{color:var(--muted)}#overStats dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
#overStats .h{font-weight:800;color:var(--muted);font-size:.8em;text-transform:uppercase;letter-spacing:.06em}
/* the end-screen buttons all share one width (2026-09-28) */
.overBtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqh 1cqw;width:min(100%,56cqw)}
.overBtns>*{box-sizing:border-box;text-align:center;font-size:.75em;padding:1cqh .6cqw;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.overBtns>button.big{grid-column:1/-1;font-size:1.05em;padding:1cqh 2cqw;flex-direction:column}
.overBtns>[hidden]{display:none}
.overBtns>a.home{color:var(--paper);background:rgba(255,255,255,.1)}
.playRow{display:flex;gap:1.4cqw;justify-content:center;align-items:stretch}
.playRow>button.big{font-size:1.1em;padding:1.1cqh 2.6cqw;white-space:nowrap}
#over{gap:1cqh}
#over.lose #overTitle{font-size:4.2cqw}#over.lose #overStats{font-size:.78em}#over.lose #overLine{font-size:.9em}
.playRow>[hidden]{display:none}
#btnContinue small,#btnCheckpoint small{display:block;font-size:.55em;font-weight:700;margin-top:.2cqh;opacity:.8}
#eventTag{position:absolute;left:50%;top:9.5cqh;translate:-50% 0;padding:.4cqh 1.6cqw;font:800 1.7cqw var(--ui);color:#ffe08a;
  background:rgba(13,20,16,.72);border:1px solid rgba(255,215,102,.45);border-radius:2cqw;pointer-events:none;white-space:nowrap}

#shop{right:1cqw;top:12cqh;bottom:18cqh;width:min(46cqw,100%);display:flex;flex-direction:column;gap:1cqh;font-size:2cqw}
#shop header{display:flex;align-items:center;gap:1cqw}
#shop h2{font-size:1.15em;flex:1}
.tabs{display:flex;gap:.4cqw}
.tabs button{padding:.6cqh 1.2cqw;font-size:.8em}
.tabs button[aria-selected="true"]{background:var(--gold);color:#2a1d05}
#shop .close{padding:0 1cqw;font-size:1.4em;line-height:1}
#shopList{list-style:none;margin:0;padding:0;overflow:auto;display:grid;gap:.8cqh;flex:1;min-height:0}
#shopList li{display:grid;grid-template-columns:auto 1fr auto;gap:.4cqh 1cqw;align-items:center;padding:.8cqh .8cqw;background:rgba(0,0,0,.22)}
#shopList .icon{width:calc(24 * 100cqw / 640);height:calc(24 * 100cqw / 640);grid-row:span 2}
#shopList .nm{font-weight:800;font-size:.95em;display:flex;flex-wrap:wrap;gap:.3cqh .8cqw;align-items:center;min-width:0}
#shopList .lvl{display:inline-flex;align-items:center;gap:.6cqw;font-size:.72em;font-weight:800;color:var(--gold);white-space:nowrap}
#shopList .lvl .bar{display:block;width:5.5em;height:.45em;background:rgba(255,255,255,.16);border-radius:1em;overflow:hidden}
#shopList .lvl .bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:1em;transition:width .25s}
#shopList .lvl.full .lv{color:var(--ok)}
#shopList .lvl.full .bar i{background:var(--ok)}
#shopList .lvl.one .bar{display:none}
#shopList li{grid-template-columns:auto minmax(0,1fr) auto}
#shopList .nm{overflow:hidden}
#shopList .ds{font-size:.78em;color:#d9e2f4;line-height:1.3;grid-column:2}
#shopList button{grid-row:span 2;display:flex;align-items:center;gap:.4cqw;color:var(--gold);font-weight:800;padding:.8cqh 1cqw;min-width:9cqw;justify-content:center}
#shopList button .icon{width:calc(12 * 100cqw / 640);height:calc(12 * 100cqw / 640);grid-row:auto}
#shopList button:disabled{opacity:.5;cursor:default;color:var(--muted)}
#shopList button.max{color:var(--ok)}
.hint{margin:0;font-size:.72em;color:var(--muted)}

#rotate{position:absolute;inset:0;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;
  background:rgba(13,20,16,.92);text-align:center;padding:1rem;font-size:1rem;z-index:20}
#rotate button{border:0;background:var(--gold);color:#2a1d05;font-weight:800;padding:.6rem 1.2rem}

button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .shopbtn.ready{animation:none;background-color:rgba(120,96,20,.95)}
  .score .bar i{transition:none}
}
.loadfail{padding:1rem}

.menu-legal{display:none;flex-wrap:wrap;justify-content:center;gap:.2rem 1rem;font-size:.7em;color:var(--muted)}
.menu-legal a{color:inherit;text-decoration:none}
body:has(#newSetup:not([hidden])) .menu-legal,body:has(#achPanel:not([hidden])) .menu-legal{display:none} /* (2026-10-13: footer on the main menu only) */
@media (max-height:520px){
  .legal{display:none}
  #game{width:min(100vw, calc(100dvh * 16 / 9))}
  .menu-legal{display:flex}
}
@media (pointer:coarse){ #recruits .unit kbd, .shopbtn kbd{display:none} }
#recruits .unit .nm, #recruits .unit .cost{justify-self:start;min-width:0;max-width:100%;overflow:hidden}

/* ---------- Achievements ---------- */
#achPanel{left:50%;top:50%;translate:-50% -50%;width:min(70cqw,100%);height:86cqh;background-color:#142a63;display:flex;flex-direction:column;gap:1cqh;font-size:1.9cqw;z-index:6}
#achPanel header{display:flex;align-items:center;gap:1.4cqw}
#achPanel h2{font-size:1.3em;color:var(--gold)}
#achCount{flex:1;color:var(--muted);font-size:.85em;font-weight:700}
#achPanel .close{padding:0 1cqw;font-size:1.4em;line-height:1}
#achList{list-style:none;margin:0;padding:0;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:.8cqh 1cqw;flex:1;min-height:0;align-content:start}
#achList li{display:flex;gap:1cqw;align-items:flex-start;padding:.8cqh .8cqw;background:rgba(0,0,0,.25)}
#achList li.t0{opacity:.7}
#achList li.t3{background:rgba(255,215,102,.12);box-shadow:inset 0 0 0 1px rgba(255,215,102,.35)}
#achList li > span:last-child{display:flex;flex-direction:column;gap:.3cqh;min-width:0}
/* trophies: Time Fantasy icon cups (assets/medals.png: bronze, silver, gold, legendary); unearned = dark silhouette */
#achList .pips{display:flex;align-items:flex-end;justify-content:center;gap:0;flex:none;width:calc(48 * 100cqw / 640)}
#achList .pips i,#achToast .medal{display:block;width:calc(16 * 100cqw / 640);height:calc(16 * 100cqw / 640);flex:none;
  background:url(/siege/assets/medals.png?v=2df7405279) 0 0 / 400% 100% no-repeat;image-rendering:pixelated}
#achList .pips i{filter:brightness(0) opacity(.35)}
#achList .pips i.on{filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
#achList .pips .m2,#achToast.m2 .medal{background-position:33.333% 0}
#achList .pips .m3,#achToast.m3 .medal{background-position:66.667% 0}
#achList .pips .m4,#achToast.m4 .medal{background-position:100% 0}
#achList .pips i.m4{width:calc(24 * 100cqw / 640);height:calc(24 * 100cqw / 640)}
#achList li.sep{grid-column:1 / -1;background:none;padding:1.2cqh 0 .2cqh;color:#9fd0ff;font-weight:800;font-size:.9em;letter-spacing:.04em;text-transform:uppercase}
#achList li.one{background:rgba(80,140,255,.10)}
#achList li.one:not(.got){opacity:.7}
#achList li.one.got{background:rgba(80,140,255,.2);box-shadow:inset 0 0 0 1px rgba(120,180,255,.55)}
#achList li.one.got b{color:#9fd0ff}
#achList b{font-size:.95em}
#achList li.t1 b{color:#e7a56a}#achList li.t2 b{color:#dfe6ee}#achList li.t3 b{color:var(--gold)}
#achList small{font-size:.78em;color:#d9e2f4;line-height:1.3}
#achList small.gold{color:var(--gold);font-weight:800}
/* 2026-10-14 : achievements pop up in the top left corner, just under the top bar, 15% smaller than before
   (was bottom right: font 1.9cqw, padding 1cqh 1.6cqw, gap 1cqw, max-width 44cqw, 28 px medal). */
#achToast{position:absolute;left:1cqw;top:11.5cqh;display:flex;gap:.85cqw;align-items:center;padding:.85cqh 1.36cqw;z-index:7;
  background:rgba(20,32,70,.95);box-shadow:inset 0 0 0 2px var(--gold),0 .6cqh 1.4cqh rgba(0,0,0,.4);color:var(--paper);
  font:700 1.615cqw var(--ui);translate:calc(-100% - 2cqw) 0;transition:translate .35s ease;pointer-events:none}
#achToast.on{translate:0 0}
#achToast{max-width:37.4cqw}
#game:has(#achToast.on) #toast{top:28cqh}                       /* the battle message steps down out of its way */
#achToast .medal{width:calc(23.8 * 100cqw / 640);height:calc(23.8 * 100cqw / 640)}
#achToast.m1{box-shadow:inset 0 0 0 2px #c77a3a,0 .6cqh 1.4cqh rgba(0,0,0,.4)}
#achToast.m2{box-shadow:inset 0 0 0 2px #c9d2dc,0 .6cqh 1.4cqh rgba(0,0,0,.4)}
#achToast.m4{box-shadow:inset 0 0 0 2px #7fb6ff,0 .6cqh 1.4cqh rgba(0,0,0,.4)}
#achToast span:last-child{display:flex;flex-direction:column;min-width:0}
#achToast em{font-style:normal;font-weight:600;font-size:.78em;color:#d9e2f4;line-height:1.3;margin-top:.3cqh}
#achToast small{font-size:.7em;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#achToast b{color:var(--gold)}
#view{cursor:pointer}
@media (max-width:700px){#achList{grid-template-columns:1fr}}

/* ---------- Spells ---------- */
#recruits .unit.spell{background-color:rgba(70,30,110,.92)}
#recruits .unit.spell .icon{grid-row:1 / span 2;width:calc(26 * 100cqw / 640);height:calc(26 * 100cqw / 640)}
#recruits .unit.spell .cost{color:#d9b8ff}
#recruits .unit.spell.aiming{box-shadow:inset 0 0 0 3px var(--gold)}
#view.aiming{cursor:crosshair}
/* the witch in the woods: an RPG-style text box at the bottom of the battlefield (2026-09-29) */
#witchTalk{position:absolute;left:50%;bottom:21cqh;translate:-50% 0;width:min(66cqw,100%);display:flex;gap:1.6cqw;align-items:flex-start;
  padding:1.6cqh 1.8cqw;z-index:8;background:rgba(28,16,44,.96);box-shadow:inset 0 0 0 2px #a67fe0,0 .8cqh 2cqh rgba(0,0,0,.5);
  color:#efe6ff;font:600 2.1cqw var(--ui)}
#witchFace{width:calc(26 * 3 * 100cqw / 640);height:calc(22 * 3 * 100cqw / 640);flex:none;image-rendering:pixelated;
  background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(166,127,224,.6)}
#witchTalk .wt-body{flex:1;display:flex;flex-direction:column;gap:1cqh;min-width:0}
#witchTalk h2{margin:0;font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:#c9a8ff}
#witchTalk p{margin:0;line-height:1.4;min-height:2.8em;font-style:italic}
#witchChoices{display:flex;flex-wrap:wrap;gap:.8cqw;justify-content:flex-end}
#witchChoices button{border:0;padding:.9cqh 1.8cqw;font:700 .9em var(--ui);color:#efe6ff;background:rgba(166,127,224,.22);cursor:pointer}
#witchChoices button:hover,#witchChoices button:focus-visible{background:rgba(166,127,224,.45);outline:none}
/* becoming the Lich King: purple dark, three lines of text, while the world turns over */
#lichFx{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(40,6,60,.45),rgba(8,0,14,.95));opacity:0}
#lichFx p{margin:0;font:900 4.4cqw var(--ui);color:#d9b3ff;text-align:center;text-shadow:0 0 2cqw rgba(170,90,255,.9),0 .3cqh 0 #000;transition:opacity .35s}
/* as the Lich King your keep is on the right: swap the score panels and colour yours purple */
#game.lich .score.them{order:-1}
#game.lich .score.you{order:2}
#game.lich .score.them .who{order:1}#game.lich .score.them .bar{order:2}#game.lich .score.them b{order:3}#game.lich .score.them .of{order:4}
#game.lich .score.you b{order:1}#game.lich .score.you .of{order:2}#game.lich .score.you .bar{order:3}#game.lich .score.you .who{order:4}
#game.lich .tools{order:3}
#game.lich .score.you .bar{display:flex}
#game.lich .score.you .bar i{background:linear-gradient(#d9b3ff,#9a5cf0);margin-left:auto}
#game.lich .score.them .bar{display:block}
#game.lich .score.them .bar i{background:linear-gradient(#8fd0ff,var(--blue));margin-left:0}
#game.lich .score.you .who{color:#e0c8ff}#game.lich .score.them .who{color:#bfe3ff}
@media (max-width:700px){#witchTalk{font-size:2.6cqw;bottom:24cqh}}

/* ---------- Shared site menu (2026-10-01) ----------
   /assets/menu.js draws Continue, Start New Game, Load Game, Achievements, Settings, Credits and Exit into
   #mainMenu with the game's own .mi buttons; these rules make it wear the game's look. */
#menu,#pauseMenu{--vm-accent:var(--gold);--vm-muted:var(--muted);--vm-danger:#ff9b8c;--vm-gap:1cqh;--vm-width:30cqw}
#mainMenu{width:100%}
.panel .mi{border:0;background:rgba(255,255,255,.1);color:var(--paper);padding:1cqh 2cqw;font-weight:700;font-size:.9em;text-decoration:none;border-radius:0;cursor:pointer}
.panel .mi:hover,.panel .mi:focus-visible{background:rgba(255,255,255,.2)}
.panel a.mi:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.panel .mi[disabled],.panel .mi[disabled]:hover{background:rgba(255,255,255,.06)}
/* the main action wears the gold "big" look: Continue when there is a save, otherwise Start New Game */
#mainMenu .vm-list>[data-vm="continue"]:not([disabled]),
#mainMenu .vm-list>[data-vm="continue"][disabled]+[data-vm="new"],
#mainMenu>.mi.big{background:var(--gold);color:#2a1d05;font-weight:900;font-size:1.05em;box-shadow:0 .5cqh 0 #a8801d;margin-bottom:.5cqh}
#mainMenu .vm-list>[data-vm="continue"]:not([disabled]):hover,
#mainMenu .vm-list>[data-vm="continue"][disabled]+[data-vm="new"]:hover{filter:brightness(1.08)}
#mainMenu .vm-h{color:var(--gold);font-size:1.3em}
#mainMenu .vm-slot .vm-sub,#mainMenu .vm-item .vm-sub{color:inherit}
#mainMenu .vm-credits .vm-maker{color:var(--gold)}
#mainMenu .vm-note a{color:var(--gold)}
#mainMenu .vm-del{border-radius:0;font-weight:700}
/* the rival screen behind Start New Game */
#newSetup{display:flex;flex-direction:column;align-items:center;gap:1.2cqh;width:100%}
#btnSetupBack{min-width:14cqw}
#menu.setup .record{display:none}
/* pause menu: Settings shows the shared sliders in place of the buttons */
#pauseMain{display:flex;flex-direction:column;align-items:center;gap:1.4cqh}
#pauseSettings{width:100%;--vm-width:34cqw;text-align:left}
#pauseSettings .vm-back{align-self:center;min-width:14cqw}

/* phones held sideways: two columns so the whole menu fits without scrolling */
@media (max-height:480px){
  #menu{--vm-width:52cqw;--vm-gap:1.4cqh}
  #mainMenu .vm-list{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4cqw}
  #mainMenu .vm-list>:last-child{grid-column:1/-1}
  #mainMenu .vm-item{min-height:10.5cqh;padding:.8cqh 1.4cqw}
  #mainMenu .vm-list>[data-vm="continue"]:not([disabled]),
  #mainMenu .vm-list>[data-vm="continue"][disabled]+[data-vm="new"]{margin-bottom:0}
  #mainMenu .vm-slot>.vm-slot-btn,#mainMenu .vm-del{min-height:10.5cqh}
  #menu[data-view="load"] .tag,#menu[data-view="settings"] .tag,#menu[data-view="credits"] .tag{display:none}
}

/* phones held upright: the title screen fills the screen (the battle itself still asks to turn sideways) */
@media (orientation:portrait) and (max-width:700px){
  #game.on-title{width:100%;height:100%;aspect-ratio:auto}
  #game.on-title #view{object-fit:cover;object-position:left center}
  #game.on-title #menu{font-size:4.3cqw;width:92cqw;max-height:96cqh;padding:3cqh 5cqw;gap:2cqh;
    border-width:3px;border-image-width:3px;--vm-width:100%;--vm-gap:1.4cqh}
  #game.on-title #menu h1{font-size:10cqw;margin-top:3cqh}
  #game.on-title #menu .mi{padding:1.2cqh 3cqw}
  #game.on-title .diff{flex-direction:column;gap:1.2cqh}
  #game.on-title .diff span{padding:1.2cqh 3cqw}
  #game.on-title .playRow>button.big{padding:1.4cqh 8cqw}
  #game.on-title #btnSetupBack{min-width:40cqw}
  #game.on-title .how{gap:1cqh}
  #game.on-title .how .icon{width:6cqw;height:6cqw}
  #game.on-title .vim-live--siege{top:2cqh;right:4cqw}
  #game.on-title #achPanel{width:94cqw;height:90cqh;font-size:3.6cqw;border-width:3px;border-image-width:3px}
}

/* vm-mute room (2026-10-04): the site-wide mute button from /assets/menu.js sits in the top right corner. */
#hud .top{right:calc(1cqw + 52px)}

/* Auto-buy (2026-10-14, the developer): right-click a troop card (long-press on a phone) and it keeps hiring that troop.
   While it is on, a spark of light runs round and round the card. The ring is masked to a thin band inside the
   frame (the card clips anything outside its padding box); the outer span carries the glow so the mask can't cut it. */
@property --spark{syntax:"<angle>";inherits:false;initial-value:0deg}
#recruits .unit{-webkit-touch-callout:none}
#recruits .unit .spark{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;
  animation:spark-twinkle .5s ease-in-out infinite alternate}
#recruits .unit .spark i{position:absolute;inset:0;padding:calc(2.5 * 100cqw / 640);
  background:conic-gradient(from var(--spark),transparent 0 58%,rgba(255,215,102,.18) 74%,rgba(255,222,130,.85) 93%,#fff 97.5%,rgba(255,255,255,0) 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spark-run 1.5s linear infinite}
#recruits .unit.auto .spark{display:block}
#recruits .unit.auto{box-shadow:inset 0 0 calc(8 * 100cqw / 640) rgba(255,215,102,.35)}
#recruits .unit.auto[aria-disabled="true"]{filter:none;background-color:rgba(35,43,62,.92)}   /* keep the spark bright while the card waits */
#recruits .unit.auto[aria-disabled="true"] > :not(.spark){filter:grayscale(.65) brightness(.8)}
@keyframes spark-run{to{--spark:360deg}}
@keyframes spark-twinkle{from{filter:drop-shadow(0 0 1px #ffe39a)}to{filter:drop-shadow(0 0 3px #fff6d0) brightness(1.3)}}
@media (prefers-reduced-motion:reduce){
  #recruits .unit .spark{animation:none}
  #recruits .unit .spark i{animation:none;background:rgba(255,215,102,.9)}
}

/* All-time high score line on the Victory / Defeat panel (2026-10-14) */
#overRecord{margin:0;color:var(--gold);font-weight:800;font-size:.85em}
#overRecord a{color:inherit;text-decoration:underline;text-underline-offset:.15em}