@font-face{
  font-family:'IBM Plex Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexSerif-italic-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Serif';font-style:italic;font-weight:500;font-display:swap;
  src:url('fonts/IBMPlexSerif-italic-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexMono-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/IBMPlexMono-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#2A1A12;
  --paper:#F4EEDF;
  --grid:#C9D3DA;
  --margin-red:#C0563F;
  --sand:#D8C6A1;
  --rule:rgba(42,26,18,.3);
  --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#app{display:flex;width:100%;height:100vh;height:100dvh;overflow:hidden;}

/* ---------------- Arena ---------------- */
#arena{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;
  background:var(--sand);overflow:hidden;
  touch-action:none;cursor:none;
}
#arena canvas{display:block;}

/* ---------------- Ledger ---------------- */
#ledger{
  position:relative;
  flex:0 0 320px;width:320px;
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent 27px,var(--margin-red) 27px,var(--margin-red) 28px,transparent 28px),
    repeating-linear-gradient(0deg,rgba(201,211,218,.5) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(201,211,218,.5) 0 1px,transparent 1px 16px);
  background-position:0 0,0 0,0 0;
  border-left:1px solid var(--rule);
  overflow-y:auto;overflow-x:hidden;
  padding:16px 18px 26px 40px;
  -webkit-overflow-scrolling:touch;
}

.lg-head h1{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:23px;line-height:1.05;margin:2px 0 2px;letter-spacing:.2px;
}
.clock{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85;}
.clock .dot{opacity:.6;padding:0 2px;}

.run-tabs{display:flex;gap:8px;margin:14px 0 4px;}
.tab{
  font-family:var(--mono);font-size:13px;color:var(--ink);
  background:rgba(244,238,223,.72);border:1px solid var(--ink);border-radius:2px;
  padding:7px 10px;cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
  -webkit-user-select:none;user-select:none;
}
.tab-lg{flex:1 1 0;padding:9px 10px;}
.tab:hover{background:#eae0ca;}
.tab:active{transform:translateY(1px);}
.tab.is-active{background:var(--ink);color:var(--paper);}

.lg-block{margin-top:18px;}
.lg-block h2{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:15px;margin:0 0 8px;letter-spacing:.2px;
}

.census{display:flex;flex-direction:column;gap:5px;}
.crow{display:flex;align-items:baseline;font-variant-numeric:tabular-nums;}
.cl{white-space:nowrap;}
.leader{flex:1 1 auto;border-bottom:1px dotted rgba(42,26,18,.55);margin:0 6px;transform:translateY(-3px);min-width:12px;}
.cv{white-space:nowrap;font-weight:500;}

.graph-wrap{position:relative;}
#graph{
  display:block;width:100%;height:90px;
  background:rgba(255,255,255,.16);
  border:1px solid var(--rule);border-radius:1px;
}
.graph-key{display:flex;gap:14px;margin-top:6px;font-size:11px;opacity:.85;}
.graph-key span::before{content:"";display:inline-block;width:14px;height:0;border-top:1.5px solid var(--ink);vertical-align:middle;margin-right:5px;}
.graph-key .k-food::before{border-top-style:dashed;}

.segmented{display:flex;}
.seg{
  flex:1 1 0;font-family:var(--mono);font-size:12px;color:var(--ink);
  background:rgba(244,238,223,.72);
  border:1px solid var(--ink);border-radius:2px;
  padding:7px 2px;cursor:pointer;margin-left:-1px;position:relative;
  transition:background-color .12s ease,color .12s ease;
  -webkit-user-select:none;user-select:none;
}
.seg:first-child{margin-left:0;}
.seg:hover{background:#eae0ca;z-index:1;}
.seg.is-active{background:var(--ink);color:var(--paper);z-index:2;}

.slider{display:block;margin-top:15px;}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.sl-label{white-space:nowrap;}
.sl-val{font-variant-numeric:tabular-nums;font-weight:500;}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:16px;
  background:transparent;margin:0;cursor:pointer;display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ink);border-radius:1px;}
input[type=range]::-moz-range-track{height:2px;background:var(--ink);border-radius:1px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:none;margin-top:-5.5px;
}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--ink);}
input[type=range]:focus{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(42,26,18,.18);}

.toggles{display:flex;flex-direction:column;gap:9px;}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none;}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check .box{
  position:relative;flex:0 0 auto;width:15px;height:15px;
  border:1px solid var(--ink);border-radius:1px;background:rgba(244,238,223,.6);
}
.check input:checked + .box::after{
  content:"";position:absolute;left:4px;top:0px;width:5px;height:9px;
  border-right:1.7px solid var(--ink);border-bottom:1.7px solid var(--ink);
  transform:rotate(38deg);
}
.check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(42,26,18,.18);}

.hint{margin:20px 0 0;font-size:11px;line-height:1.5;opacity:.72;}

/* ---------------- Objectives ---------------- */
.lg-block h2 .obj-count{margin-left:6px;font-family:var(--mono);font-style:normal;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums;}
.objectives{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.obj{display:flex;align-items:center;font-variant-numeric:tabular-nums;}
.obj-box{
  position:relative;flex:0 0 auto;width:15px;height:15px;margin-right:8px;
  border:1px solid var(--ink);border-radius:1px;background:rgba(244,238,223,.6);
}
.obj.is-met .obj-box{background:var(--margin-red);border-color:var(--margin-red);}
.obj.is-met .obj-box::after{
  content:"";position:absolute;left:4px;top:0;width:5px;height:9px;
  border-right:1.7px solid var(--paper);border-bottom:1.7px solid var(--paper);
  transform:rotate(38deg);
}
.obj-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.obj.is-met .obj-label{opacity:.65;}
.obj .leader{min-width:12px;}
.obj-val{flex:0 0 auto;white-space:nowrap;font-weight:500;opacity:.8;padding-left:4px;}
.obj.is-met .obj-val{color:var(--margin-red);opacity:1;font-family:var(--serif);font-style:italic;}

/* ---------------- Field Actions ---------------- */
.actions{display:flex;flex-direction:column;gap:7px;}
.act{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-family:var(--mono);font-size:12px;color:var(--ink);text-align:left;
  background:rgba(244,238,223,.72);border:1px solid var(--ink);border-radius:2px;
  padding:7px 10px;cursor:pointer;min-height:42px;
  transition:background-color .12s ease,color .12s ease,opacity .12s ease;
  -webkit-user-select:none;user-select:none;
}
.act-name{font-weight:500;}
.act-sub{font-size:10.5px;opacity:.68;}
.act:hover:not(:disabled){background:#eae0ca;}
.act:active:not(:disabled){transform:translateY(1px);}
.act:disabled{opacity:.45;cursor:default;}
.act.is-fired{background:var(--ink);color:var(--paper);}
.act.is-fired .act-sub{opacity:.8;}

/* ---------------- Field Log ---------------- */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.log li{font-size:11px;line-height:1.4;opacity:.85;padding-left:12px;position:relative;}
.log li::before{content:"";position:absolute;left:2px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--margin-red);}
.log li.is-new{animation:log-in .3s ease;}
@keyframes log-in{from{opacity:0;transform:translateX(-4px);}to{opacity:.85;transform:none;}}

/* ---------------- Milestone stamp ---------------- */
#stamp{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:5;}
#stamp .stamp-inner{
  display:none;flex-direction:column;align-items:center;gap:4px;
  border:3px double var(--margin-red);border-radius:4px;
  padding:14px 26px;color:var(--margin-red);text-align:center;
  transform:rotate(-8deg);background:rgba(244,238,223,.32);
}
#stamp.show .stamp-inner{display:flex;animation:stamp-in .32s cubic-bezier(.2,1.4,.4,1);}
#stamp .stamp-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;letter-spacing:.5px;}
#stamp .stamp-sub{font-family:var(--mono);font-size:12px;letter-spacing:.5px;}
@keyframes stamp-in{0%{opacity:0;transform:rotate(-8deg) scale(1.6);}60%{opacity:1;transform:rotate(-8deg) scale(.96);}100%{opacity:1;transform:rotate(-8deg) scale(1);}}

/* ---------------- Narrow: stack, and fit one screen so the arena is always in view ---------------- */
@media (max-width:800px){
  html,body{height:100%;overflow:hidden;}
  #app{flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden;}
  #arena{flex:0 0 auto;width:100%;height:64vh;height:64dvh;min-height:0;}
  #ledger{
    flex:1 1 auto;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
    border-left:none;border-top:1px solid var(--rule);
    padding:12px 16px 24px 40px;
    -webkit-overflow-scrolling:touch;
  }
}