:root{
  --paper:#f4ead8; --paper-deep:#ecdfc6; --ink:#2e293d;
  --ember:#e8531f; --ember-deep:#c73f12; --wheat:#d9a441;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Arial Black','Arial Narrow Bold',Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
.caps{font-family:Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.texture{background-image:radial-gradient(rgba(46,41,61,.06) 1px,transparent 1px);background-size:22px 22px}
.hs{box-shadow:6px 6px 0 0 var(--ink)}
.hs-sm{box-shadow:4px 4px 0 0 var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section,header,footer{border-bottom:3px solid var(--ink)}

.btn{
  font-family:Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  border:3px solid var(--ink);box-shadow:5px 5px 0 0 var(--ink);
  transition:transform .12s,box-shadow .12s;cursor:pointer;user-select:none;
  display:inline-block;text-decoration:none;color:var(--ink);
}
.btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--ink)}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* nav */
.nav{
  position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:56px;border-bottom:3px solid var(--ember);
}
.nav .brand{font-family:'Arial Black',Arial,sans-serif;text-transform:uppercase;font-size:16px;text-decoration:none;color:var(--paper);display:flex;align-items:center;gap:10px}
.nav .links a{
  color:var(--paper);text-decoration:none;font-family:Arial,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin-left:22px;opacity:.75;
}
.nav .links a:hover{opacity:1;color:var(--wheat)}
.nav .links a.here{opacity:1;color:var(--wheat);border-bottom:2px solid var(--wheat);padding-bottom:3px}

/* ticker */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:8px 0;border-top:2px solid rgba(244,234,216,.15)}
.ticker-track{display:inline-block;white-space:nowrap;animation:mq 28s linear infinite;font-size:12px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.wheat{transform-origin:bottom center;animation:sway 5s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.rise{animation:rise .5s ease both}

/* matrix */
.matrix{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;max-width:760px}
.mcell{border:3px solid var(--ink);padding:16px;text-align:left;min-height:140px;cursor:pointer;
  font-family:Georgia,serif;transition:all .15s;background:var(--paper)}
.mcell.active{background:var(--ink)!important;color:var(--paper)!important;transform:translateY(-4px);box-shadow:4px 4px 0 0 var(--ink)}
.mcell.active .accent{color:var(--wheat)!important}
.mhead{font-size:11px;opacity:.7}
.mnum{font-family:'Arial Black',Arial,sans-serif;font-size:34px;margin-top:8px}
.mnum small{font-size:15px;opacity:.6}
.mlabel{font-size:12px;margin-top:6px}
.mnote{font-size:13px;margin-top:8px;line-height:1.4;opacity:0;transition:opacity .15s}
.mcell.active .mnote{opacity:1}
.rowhead{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);border:3px solid var(--ink);font-size:11px;padding:8px 4px}
.colhead{background:var(--ink);color:var(--paper);border:3px solid var(--ink);text-align:center;font-size:12px;padding:8px}

/* game */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--ink)}
.stat{padding:16px;border-right:3px solid var(--ink)}
.stat:last-child{border-right:none}
.stat .l{font-size:10px;opacity:.6}
.stat .v{font-family:'Arial Black',Arial,sans-serif;font-size:26px;margin-top:4px}
@media(max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(-n+2){border-bottom:3px solid var(--ink)}
  .stat:nth-child(2){border-right:none}
  .mnum{font-size:24px}
}
.choice{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}
.choice .btn{flex:1;min-width:220px;padding:22px;font-size:20px}
.choice .btn small{display:block;margin-top:6px;font-size:11px;letter-spacing:0;text-transform:none;opacity:.8}
.banner{border:3px solid var(--ink);padding:18px;margin-top:28px;line-height:1.5}
.panel{border:3px solid var(--ink);background:var(--paper)}
.panel h3{font-size:13px;margin-bottom:12px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.charts .panel{padding:18px}
@media(max-width:760px){.charts{grid-template-columns:1fr}}
.ledger-head{background:var(--ink);color:var(--paper);padding:10px 18px;font-size:13px;border-bottom:3px solid var(--ink)}
.lrow{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:2px solid rgba(46,41,61,.15);font-size:14px}
.lrow:last-child{border-bottom:none}
.lname{width:90px;flex-shrink:0;font-weight:bold}
.lact{width:70px;flex-shrink:0;font-size:11px;opacity:.7}
.lbar{flex:1;height:15px;border:2px solid var(--ink);background:var(--paper-deep);position:relative;overflow:hidden}
.lbar i{position:absolute;top:0;bottom:0;left:0;display:block}
.lpts{width:64px;text-align:right;font-size:12px;flex-shrink:0}
.lgrain{width:80px;text-align:right;font-size:12px;opacity:.7;flex-shrink:0}

/* theory */
.theory{background:var(--ink);color:var(--paper)}
.tcard{border:3px solid rgba(244,234,216,.8);padding:26px;background:rgba(244,234,216,.05)}
.tcard h3{font-size:16px;margin-top:10px}
.tcard p{margin-top:10px;line-height:1.65;color:rgba(244,234,216,.85);font-size:15px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media(max-width:760px){.tgrid{grid-template-columns:1fr}}
h2.big{font-family:'Arial Black',Arial,sans-serif;text-transform:uppercase;line-height:1.1}
.kick{font-size:13px;margin-bottom:12px}