/* BLOCK_LAB — /war : the Colony Block War mock app (7 screens). Pixel/mono system, CSP-safe (no inline styles). */
:root{--g:#CBF806;--o:#ff6a1a;--gold:#d4af37;--bg:#000;--panel:#0e1116;--line:#23262e;--ink:#f5f4f0;--dim:#9aa0aa;
  --pixel:'Press Start 2P','Space Mono',monospace;--mono:'Space Mono','Consolas',ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:12px;color:var(--ink)}
.brand img{width:24px;height:24px}.brand b{color:var(--g);font-weight:400}.brand span{color:var(--dim);font-family:var(--mono);font-size:12px}
.wnav .sp{flex:1}
.home{font-size:12px;color:var(--dim);font-weight:700}.home:hover{color:var(--ink)}
.app{max-width:520px;margin:0 auto;padding:10px 14px 80px}
.steps{display:flex;gap:6px;overflow-x:auto;padding:8px 0 12px;scrollbar-width:none}.steps::-webkit-scrollbar{display:none}
.steps button{font-family:var(--pixel);font-size:8.5px;padding:9px 10px;border-radius:999px;background:#0e1116;border:1px solid var(--line);color:var(--dim);white-space:nowrap;cursor:pointer}
.steps button.on{color:#0a0b0e;background:var(--g);border-color:var(--g)}
.scr{display:none}.scr.active{display:block;animation:win .35s ease}
@keyframes win{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{font-size:10px;color:var(--g);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 4px}
h1{font-family:var(--pixel);font-size:15px;line-height:1.55;margin:4px 0 8px;color:var(--ink)}
h1.center{text-align:center}h1 .g{color:var(--g)}h1 .o{color:var(--o)}
p{font-size:11.5px;line-height:1.65;color:var(--dim);margin:0 0 10px}
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}
.wcard.g{border-color:rgba(203,248,6,.55)}.wcard.o{border-color:rgba(255,106,26,.6)}.wcard.gold{border-color:rgba(212,175,55,.6)}
.k{font-size:9.5px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.v{font-family:var(--pixel);font-size:12px;color:var(--g);margin-top:5px;line-height:1.4}.v.o{color:var(--o)}.v.gold{color:var(--gold)}.v.w{color:var(--ink)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.btn{display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:10px;padding:14px 12px;border-radius:999px;margin:10px 0 0;cursor:pointer;line-height:1.3;text-align:center;border:2px solid var(--g);background:var(--g);color:#0a0b0e;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(203,248,6,.5)}
.btn.o{background:var(--o);border-color:var(--o);color:#0a0b0e}
.btn.sm{padding:10px;font-size:9px;margin-top:8px}
.actions{display:flex;gap:10px;margin-top:10px}.actions .btn{flex:1;margin:0}
.field{margin:8px 0}.field label{display:block;font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.field .in{background:#090b0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink)}.field .in b{color:var(--g)}
.chip{display:inline-block;font-size:10px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--dim);margin:3px 3px 0 0;cursor:pointer}
.chip.on{border-color:var(--g);color:var(--g)}
.blk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}.blk:last-child{border-bottom:0}
.sq{width:26px;height:26px;border-radius:6px;background:var(--g);flex:none}.sq.lo{background:#3a3f48}.sq.o{background:var(--o)}.sq.gold{background:var(--gold)}
.pts{margin-left:auto;font-family:var(--pixel);font-size:9.5px;color:var(--g);white-space:nowrap}.pts.lo{color:#5c6473}
.bar2{height:10px;border-radius:6px;background:#1a1d24;overflow:hidden;margin-top:6px}.bar2 i{display:block;height:100%;background:var(--g);animation:barin 1.1s cubic-bezier(.2,.8,.2,1)}.bar2 i.o{background:var(--o)}
.bar2 i.w92{width:92%}.bar2 i.w100{width:100%}
@keyframes barin{from{width:0}}
.cd{font-family:var(--pixel);font-size:24px;color:var(--ink);text-align:center;margin:8px 0 2px;letter-spacing:.02em}
.cd.sm{font-size:12px;text-align:left;margin:0;color:var(--o)}
input.dial{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--g),var(--o));margin:12px 0 6px;outline:none}
input.dial::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:8px;background:#fff;border:3px solid #0a0b0e;cursor:pointer}
input.dial::-moz-range-thumb{width:30px;height:30px;border-radius:8px;background:#fff;border:3px solid #0a0b0e;cursor:pointer}
.wall{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:8px}.wall i{display:block;aspect-ratio:1;border-radius:4px;background:#1a1414;border:1px solid #2a1e1e}.wall i.e{background:var(--o)}
.split{font-size:11px}.split div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.split div:last-child{border-bottom:0;font-family:var(--pixel);font-size:9.5px;color:var(--gold)}
.mini{font-size:9.5px;color:var(--dim);line-height:1.55}
.link{background:#090b0f;border:1px dashed var(--g);border-radius:10px;padding:10px;font-size:10px;color:var(--g);word-break:break-all;margin-top:8px}
.wfoot{text-align:center;font-size:9.5px;color:#5c6473;padding:18px 10px 0;line-height:1.6}
.app{overflow:hidden}
.wnav{flex-wrap:nowrap;min-width:0}.wnav .brand{min-width:0}.wnav .brand span{white-space:nowrap}
@media (max-width:520px){.wnav{gap:8px;padding:12px 12px}.wnav .home{display:none}.brand{font-size:11px}.fxtoggle{font-size:10px;padding:7px 10px}h1{font-size:13.5px}.cd{font-size:20px}.v{font-size:11px}}
@media (min-width:700px){.app{max-width:560px}h1{font-size:17px}}

/* live dApp bits */
.connect{font-family:var(--pixel);font-size:9px;padding:10px 12px;border-radius:999px;background:var(--g);color:#0a0b0e;border:2px solid var(--g);cursor:pointer;white-space:nowrap}
.wnote{font-size:11px;line-height:1.5;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:#0e1116;color:var(--dim);margin:6px 0 4px;word-break:break-word}
.wnote.ok{border-color:rgba(203,248,6,.5);color:var(--g)}.wnote.warn{border-color:rgba(255,106,26,.6);color:var(--o)}.wnote.info{color:var(--ink)}
input.in{width:100%;font-family:var(--mono);font-size:12px;color:var(--g);background:#090b0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
input.in:focus{border-color:var(--g)}
input.in::placeholder{color:#4a505b}
.btn.sm.ghost{background:transparent;color:var(--ink)}
@media (max-width:520px){.connect{font-size:8px;padding:9px 10px}}

/* sealed -> reveal */
.rvimg{width:100%;max-width:300px;display:block;margin:0 auto 6px;border-radius:18px;background:#07080b}
.rvimg.crack{animation:crack .7s cubic-bezier(.2,.9,.2,1)}
@keyframes crack{0%{transform:scale(.94) rotate(-1.5deg);filter:brightness(2.2) saturate(1.4)}60%{transform:scale(1.03);filter:brightness(1.3)}100%{transform:none;filter:none}}
.cd2{font-family:var(--pixel);font-size:15px;color:var(--o);margin-top:4px;line-height:1.4}
#rv-act{margin-top:12px}

[hidden]{display:none!important}

.btn.gold{background:#d4af37;border-color:#d4af37;color:#0a0b0e}
.btn.o{background:var(--o);border-color:var(--o);color:#0a0b0e}

/* ============================================================
   WAR SCREENS — 2026-09-13 redesign layer.
   Restyles the existing class vocabulary rather than replacing the
   markup: war.js binds ~60 ids plus .chip / .cd / #steps button, so
   rebuilding the HTML would mean rewriting its whole binding layer.
   ============================================================ */

.scr{max-width:640px;margin:0 auto}

/* Cards become panels with a hard offset shadow */
.scr .wcard{
  background:#12141a;border:2px solid #242838;border-radius:12px;
  padding:20px;box-shadow:6px 6px 0 rgba(0,0,0,.55);margin-bottom:16px;
}
.scr .wcard.g{border-color:#CBF806;box-shadow:6px 6px 0 rgba(0,0,0,.55),inset 0 0 16px rgba(203,248,6,.06)}
.scr .wcard.o{border-color:#ff6a1a;background:rgba(255,106,26,.05)}
.scr .wcard.gold{border-color:#d4af37;box-shadow:6px 6px 0 rgba(0,0,0,.55),inset 0 0 16px rgba(212,175,55,.07)}

/* Labels and values */
.scr .k{font-family:var(--mono);font-size:11px;color:#6b7386;letter-spacing:.04em;margin-bottom:6px}
.scr .v{font-family:var(--pixel);font-size:15px;color:#f4f6f0;line-height:1.5}
.scr .v.o{color:#ff6a1a}
.scr .v.w{color:#4fc3ff}
.scr .v.gold{color:#d4af37}
.scr .mini{font-family:var(--mono);font-size:11.5px;color:#6b7386;line-height:1.6}

/* Stat rows become bordered stat boxes */
.scr .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.scr .row > div{background:#171a21;border:1px solid #242838;border-radius:8px;padding:11px 13px}
.scr .row > div .k{margin-bottom:5px}

/* THE LOCK BAR — the lobby's countdown, given real presence.
   .cd is what war.js rewrites every second; it holds only the time. */
.lockbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#171a21;border:2px solid #ff6a1a;border-radius:10px;
  padding:14px 18px;margin-bottom:18px;
  box-shadow:inset 0 0 18px rgba(255,106,26,.09);
}
.lockbar-k{font-family:var(--mono);font-size:11px;color:#6b7386;letter-spacing:.14em;text-transform:uppercase}
.lockbar-t{
  font-family:var(--pixel);font-size:22px;color:#ff6a1a;line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,106,26,.45);
}
@media(max-width:520px){.lockbar{justify-content:center;text-align:center}.lockbar-t{font-size:17px}}

/* Comparison bars */
.scr .bar2{height:12px;background:#0b0c10;border:1px solid #242838;border-radius:4px;overflow:hidden;margin-top:8px}
.scr .bar2 i{display:block;height:100%;background:#CBF806}
.scr .bar2 i.o{background:#ff6a1a}

/* Segmented chips */
.scr .fgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.scr .chip{
  font-family:var(--pixel);font-size:9.5px;color:#6b7386;text-align:center;
  background:#171a21;border:2px solid #242838;border-radius:6px;padding:12px 6px;cursor:pointer;
}
.scr .chip.on{background:#12141a;border-color:#CBF806;color:#CBF806;box-shadow:2px 2px 0 rgba(0,0,0,.45)}

/* Block rows (reveal / join eligibility) */
.scr .blk{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#171a21;border:2px solid #242838;border-radius:8px;
  padding:12px 14px;margin-bottom:8px;
}
.scr .blk .sq{font-family:var(--pixel);font-size:11px;color:#f4f6f0}
.scr .blk .pts{font-family:var(--pixel);font-size:11px;color:#CBF806}
.scr .blk .sq.lo,.scr .blk .pts.lo{color:#6b7386}
.scr .blk:has(.lo){opacity:.6;border-color:#242838}

/* Buttons */
.scr .btn{
  display:block;width:100%;text-align:center;
  font-family:var(--pixel);font-size:12px;line-height:1.4;
  padding:16px 14px;border-radius:6px;border:2px solid #CBF806;
  background:#CBF806;color:#0b0c10;box-shadow:4px 4px 0 rgba(0,0,0,.55);
  margin-bottom:10px;
}
.scr .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.scr .btn.ghost{background:#171a21;color:#f4f6f0;border-color:#242838}
.scr .btn.o{background:#ff6a1a;border-color:#ff6a1a;color:#0b0c10}
.scr .btn.gold{background:#d4af37;border-color:#d4af37;color:#0b0c10}
.scr .btn.sm{font-size:10.5px;padding:13px 12px}
.scr .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.scr .actions .btn{margin-bottom:0}

/* Inputs */
.scr .field{margin-bottom:14px}
.scr input.in{
  width:100%;background:#171a21;border:2px solid #242838;border-radius:6px;
  padding:13px 15px;color:#f4f6f0;font-family:var(--mono);font-size:13px;
}
.scr input.in:focus{border-color:#CBF806;outline:none}

/* Proof / invite link */
.scr .link{
  background:#0b0c10;border:1px solid #242838;border-radius:6px;
  padding:11px 13px;font-family:var(--mono);font-size:12px;color:#CBF806;word-break:break-all;
}

/* Reveal countdown + art */
.scr .cd2{font-family:var(--pixel);font-size:15px;color:#ff6a1a;font-variant-numeric:tabular-nums}
.scr .rvimg{border:2px solid #242838;border-radius:10px;background:#171a21}

/* Ash wall */
/* (earlier wall rules removed - superseded by the block-art wall below) */

/* lobby timeline (OPEN → LATE → LOCK → RESOLVE) */
.tl{margin:10px 0 4px}
.tl-bar{position:relative;height:8px;border-radius:6px;background:#1a1d24;overflow:visible}
.tl-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--g),var(--o));width:0;transition:width .9s linear}
.tl-bar b{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--o);box-shadow:0 0 12px var(--o);transition:left .9s linear}
.tl-marks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;color:var(--dim);letter-spacing:.06em;margin-top:6px}
.tl-marks span:nth-child(3),.tl-marks span:nth-child(4){color:var(--o)}
.center{text-align:center}
.bar2 i{transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* WALL OF THE FALLEN — real block art, not empty squares.
   Tiles cycle through the nine kinds by position; `.e` is a burned block and
   keeps the ember outline, the rest are ash-grey with a hairline. The earlier
   redesign layer styled only `i.e`, which left every other cell invisible. */
.scr .wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));
  gap:5px;margin-top:12px;
}
.scr .wall i{
  display:block;aspect-ratio:1;border-radius:3px;
  background-size:cover;background-position:center;
  border:1px solid #2a2320;
  filter:grayscale(.92) brightness(.34);     /* still standing, but not the subject */
}
/* The fallen show their real art at full colour -- these tiles are mostly dark
   rock at 22px, so any ember tint crushes them to black and only the glyph
   highlight survives. The burn is carried by the outline, not by filtering. */
.scr .wall i.e{
  border:1px solid #ff6a1a;
  filter:none;
  box-shadow:0 0 8px rgba(255,106,26,.45);
}
.scr .wall i:nth-child(9n+1){background-image:url('/blocks/volcanic_96.png')}
.scr .wall i:nth-child(9n+2){background-image:url('/blocks/obsidian_96.png')}
.scr .wall i:nth-child(9n+3){background-image:url('/blocks/rust_96.png')}
.scr .wall i:nth-child(9n+4){background-image:url('/blocks/storm_96.png')}
.scr .wall i:nth-child(9n+5){background-image:url('/blocks/magma_96.png')}
.scr .wall i:nth-child(9n+6){background-image:url('/blocks/gel_96.png')}
.scr .wall i:nth-child(9n+7){background-image:url('/blocks/ice_96.png')}
.scr .wall i:nth-child(9n+8){background-image:url('/blocks/amber_96.png')}
.scr .wall i:nth-child(9n+9){background-image:url('/blocks/holo_96.png')}