/* ============================================================
   $ANT — Windows 95 x Royal Ant Colony
   Palette: #ef7f36 #8ec582 #f7e501 #008083 #2972b6
   ============================================================ */

:root{
  --orange:#ef7f36;
  --green:#8ec582;
  --yellow:#f7e501;
  --teal:#008083;
  --blue:#2972b6;
  --gray:#c0c0c0;
  --gray-dk:#808080;
  --gray-lt:#dfdfdf;
  --ink:#111;
  --dirt:#c9a26d;
  --font:"MS Sans Serif","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  --mono:"Lucida Console","Courier New",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:20px}

body{
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  background:var(--teal);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247,229,1,.14), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(239,127,54,.18), transparent 45%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 4px);
  padding-bottom:56px;
  overflow-x:hidden;
}

/* ---------- 95 bevels ---------- */
.raised{ border:2px solid; border-color:#fff var(--gray-dk) var(--gray-dk) #fff; }
.sunken{ border:2px solid; border-color:var(--gray-dk) #fff #fff var(--gray-dk); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font); font-size:14px; font-weight:700;
  background:var(--gray); color:var(--ink);
  border:2px solid; border-color:#fff #4a4a4a #4a4a4a #fff;
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--gray-dk);
  padding:6px 14px; cursor:pointer; text-decoration:none; display:inline-block;
  line-height:1.1; white-space:nowrap;
}
.btn:active:not(:disabled){
  border-color:#4a4a4a #fff #fff #4a4a4a;
  box-shadow:inset 1px 1px 0 var(--gray-dk);
  transform:translate(1px,1px);
}
.btn:disabled{color:var(--gray-dk);text-shadow:1px 1px 0 #fff;cursor:default}
.btn-big{font-size:18px;padding:12px 24px;letter-spacing:.5px}
.btn-orange{background:var(--orange);color:#3b1a00}
.btn-blue{background:var(--blue);color:#fff}
.btn-yellow{background:var(--yellow);color:#3b3300}
.btn-green{background:var(--green)}

/* ============================================================
   BOOT SCREEN
   ============================================================ */
#boot{
  position:fixed; inset:0; z-index:9999; background:#000; color:var(--green);
  font-family:var(--mono); display:grid; place-items:center; padding:20px;
  transition:opacity .5s ease, visibility .5s;
}
#boot.gone{opacity:0;visibility:hidden}
.boot-inner{max-width:560px;width:100%}
.boot-logo{color:var(--yellow);font-size:clamp(6px,1.9vw,13px);line-height:1.1;margin-bottom:22px;text-shadow:0 0 12px rgba(247,229,1,.5)}
.boot-line{font-size:13px;margin:5px 0;color:var(--green)}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot-bar{margin:20px 0;height:18px;border:2px solid var(--green);padding:2px}
.boot-fill{height:100%;background:var(--green);width:0;animation:fill 2.4s ease forwards}
@keyframes fill{to{width:100%}}
.boot-btn{margin-top:8px;background:var(--orange);color:#3b1a00;width:100%;font-size:16px;padding:12px}

/* ============================================================
   DESKTOP / WINDOWS
   ============================================================ */
#desktop{max-width:1080px;margin:0 auto;padding:22px 14px 30px;position:relative;z-index:2}

.win{
  background:var(--gray);
  border:2px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--gray-dk), 6px 6px 0 rgba(0,0,0,.35);
  margin-bottom:26px;
  position:relative; z-index:2;   /* sit above the marching ants */
}

.titlebar{
  background:linear-gradient(90deg,#000082,#2972b6);
  color:#fff; font-weight:700; font-size:14px;
  padding:4px 5px; margin:2px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tb-orange{background:linear-gradient(90deg,#8a3b00,var(--orange))}
.tb-teal  {background:linear-gradient(90deg,#003f40,var(--teal))}
.tb-green {background:linear-gradient(90deg,#2f6b2a,var(--green));color:#0d2a0b}
.tb-blue  {background:linear-gradient(90deg,#10365c,var(--blue))}
.tb-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-btns{display:flex;gap:2px;flex:0 0 auto}
.tb-btns b{
  width:20px;height:18px;display:grid;place-items:center;font-size:11px;
  background:var(--gray);color:#000;
  border:2px solid;border-color:#fff #000 #000 #fff;
}
.tb-btns .x{font-weight:900}

.menubar{display:flex;gap:16px;padding:3px 8px;font-size:13px;border-bottom:1px solid var(--gray-dk)}
.win-body{padding:18px}
.statusbar{
  display:flex;justify-content:space-between;font-size:12px;
  margin:0 4px 4px;padding:3px 8px;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}

/* ============================================================
   HERO
   ============================================================ */
.hero-body{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.badge{
  display:inline-block;background:var(--yellow);color:#3b3300;font-weight:700;font-size:12px;
  padding:4px 10px;border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
  letter-spacing:1px;
}
.badge-sol{background:linear-gradient(90deg,#00ffa3,#dc1fff);color:#0b0016}
.hero-title{
  font-size:clamp(64px,13vw,132px); line-height:.85; letter-spacing:-3px;
  color:var(--orange);
  text-shadow:3px 3px 0 #000, 6px 6px 0 var(--teal), 9px 9px 0 rgba(0,0,0,.25);
  margin-bottom:6px;
}
.hero-title .dollar{color:var(--yellow)}
.hero-sub{
  font-size:clamp(16px,3.4vw,24px); font-weight:700; color:var(--teal);
  letter-spacing:1px; margin-bottom:12px;
}
.hero-text{font-size:15px;line-height:1.6;margin-bottom:18px;max-width:52ch}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}

.ca-box{
  background:var(--gray-lt);padding:10px;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}
.ca-box label{font-size:11px;font-weight:700;letter-spacing:1px;display:block;margin-bottom:5px}
.ca-row{display:flex;gap:6px}
.ca-row input{
  flex:1;min-width:0;font-family:var(--mono);font-size:12px;padding:5px;
  background:#fff;border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}

/* medallion */
.hero-right{display:grid;place-items:center}
.medallion{text-align:center}
.coin{
  position:relative;width:min(300px,66vw);aspect-ratio:1;
  display:grid;place-items:center;
  animation:bob 5s ease-in-out infinite;
}
.coin img{
  width:100%;height:auto;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 0 16px rgba(247,229,1,.45)) drop-shadow(5px 7px 0 rgba(0,0,0,.32));
}
/* warm halo so the cut out coin still reads against the grey window */
.coin::before{
  content:'';position:absolute;inset:-6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(247,229,1,.42),rgba(239,127,54,.18) 55%,transparent 72%);
  animation:halo 3.6s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes halo{50%{transform:scale(1.09);opacity:.7}}

.sparkle{position:absolute;z-index:2;color:var(--yellow);font-size:18px;
  text-shadow:0 0 8px rgba(247,229,1,.9);animation:tw 2.2s ease-in-out infinite}
.s1{top:6%;left:8%}
.s2{top:24%;right:2%;animation-delay:.7s}
.s3{bottom:10%;left:2%;animation-delay:1.4s}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.medallion-cap{
  margin-top:14px;font-size:12px;font-weight:700;letter-spacing:2px;color:#fff;
  background:#000;display:inline-block;padding:4px 10px;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:#000;color:var(--yellow);overflow:hidden;margin-bottom:26px;
  border:2px solid;border-color:#fff #000 #000 #fff;padding:8px 0;
  position:relative; z-index:2;
}
.ticker-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:slide 26s linear infinite;font-weight:700;letter-spacing:1px}
.ticker-track span{flex:0 0 auto}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   THE MARCH (banner image)
   ============================================================ */
.march-body{padding:12px}
.march-frame{
  position:relative;line-height:0;overflow:hidden;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
  box-shadow:0 0 0 2px #6b4600 inset;
}
.march-frame img{width:100%;height:auto;display:block}
/* faint CRT lines so the artwork sits inside the 95 aesthetic */
.scanlines{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
}
.march-cap{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.66);color:var(--yellow);
  font-size:clamp(10px,1.7vw,13px);font-weight:700;letter-spacing:2px;
  padding:9px 12px;line-height:1.5;text-align:center;
}

/* ============================================================
   LORE
   ============================================================ */
.lore-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.lore-card{
  background:var(--gray-lt);padding:16px;text-align:center;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
  transition:transform .15s ease;
}
.lore-card:hover{transform:translateY(-4px)}
.lore-emoji{font-size:44px;margin-bottom:8px}
.lore-card h3{font-size:15px;letter-spacing:1px;color:var(--teal);margin-bottom:8px}
.lore-card p{font-size:13.5px;line-height:1.55}
.quote{
  margin-top:18px;text-align:center;background:#000;color:var(--green);
  font-family:var(--mono);font-size:clamp(13px,2.4vw,17px);line-height:1.7;padding:18px;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}
.quote-sig{display:block;margin-top:10px;color:var(--yellow);font-size:12px}

/* ============================================================
   GAME
   ============================================================ */
.game-body{padding:12px}
.game-hud{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hud-box{
  flex:1;min-width:104px;background:var(--gray-lt);font-size:11px;font-weight:700;
  letter-spacing:1px;padding:6px 9px;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}
.hud-box b{display:block;font-size:19px;font-family:var(--mono);color:var(--blue);letter-spacing:0}
.hud-btn{
  font-family:var(--font);text-align:left;cursor:pointer;color:var(--ink);
  border-color:#fff var(--gray-dk) var(--gray-dk) #fff;background:var(--gray-lt);
}
.hud-btn:active{border-color:var(--gray-dk) #fff #fff var(--gray-dk)}

.game-stage{position:relative;line-height:0;border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk)}
#cv{width:100%;height:auto;display:block;background:#87ceeb;touch-action:none;cursor:none}

.overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.82);color:#fff;
  display:grid;place-content:center;justify-items:center;text-align:center;
  gap:12px;padding:20px;line-height:1.5;
}
.overlay.hidden{display:none}
.overlay h2{font-size:clamp(26px,5vw,40px);color:var(--yellow);text-shadow:3px 3px 0 #000;letter-spacing:1px}
.overlay p{font-size:14px}
.overlay .ctrl{font-size:12px;color:var(--green);font-family:var(--mono);line-height:1.8}
.rank{font-size:20px;font-weight:700;color:var(--orange)}
.earned{color:var(--yellow);font-weight:700}

.save-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.save-row.hidden{display:none}
.save-row input{
  font-family:var(--mono);font-size:14px;padding:7px 9px;width:190px;text-transform:uppercase;
  background:#fff;color:#000;border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}

/* ---- tabs ---- */
.tabs{display:flex;gap:3px;margin-top:14px;padding-left:4px}
.tab{
  font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;
  background:var(--gray);padding:7px 16px;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;border-bottom:none;
  position:relative;top:2px;
}
.tab.active{background:var(--gray-lt);padding-bottom:9px;top:0}

.tabpanel{
  background:var(--gray-lt);padding:14px;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
}
.tabpanel.hidden{display:none}
.panel-note{font-size:12px;color:#444;margin-bottom:12px}

/* ---- shop ---- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.shop-card{
  background:var(--gray);padding:11px;display:grid;gap:7px;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
}
.shop-top{display:flex;align-items:center;gap:9px}
.shop-ico{font-size:26px;line-height:1}
.shop-name{font-size:13px;font-weight:700;letter-spacing:.5px}
.shop-desc{font-size:11.5px;color:#333;line-height:1.45;min-height:32px}
.pips{display:flex;gap:3px}
.pips i{
  flex:1;height:11px;background:#fff;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
}
.pips i.on{background:var(--teal)}
.shop-buy{display:flex;justify-content:space-between;align-items:center;gap:8px}
.shop-cost{font-family:var(--mono);font-size:13px;font-weight:700;color:#5a4300}
.shop-card .btn{font-size:12px;padding:5px 11px}
.shop-card.maxed{background:var(--green)}

/* ---- leaderboard ---- */
.board{width:100%;border-collapse:collapse;font-size:13px;background:#fff;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk)}
.board th{
  background:var(--gray);text-align:left;padding:7px 10px;font-size:11px;letter-spacing:1px;
  border-bottom:2px solid var(--gray-dk);
}
.board th:nth-child(3){text-align:right}
.board td{padding:7px 10px;border-bottom:1px solid #ddd}
.board tr:nth-child(even) td{background:#f4f4f4}
.board .b-score{font-family:var(--mono);font-weight:700;color:var(--blue);text-align:right}
.board .b-date{color:#777;font-size:11px}
.board .empty{text-align:center;color:#888;padding:22px}
.board tr.me td{background:var(--yellow)}
.board-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.board-foot .panel-note{margin:0}
.board-btns{display:flex;gap:6px}
.board-btns .btn.hidden{display:none}

/* ============================================================
   TOKENOMICS
   ============================================================ */
.tok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.stat{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  background:var(--gray-lt);padding:11px 13px;font-size:13px;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
}
.stat span{font-weight:700;letter-spacing:.5px}
.stat b{color:var(--teal);font-family:var(--mono);text-align:right}

/* ============================================================
   ROADMAP
   ============================================================ */
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.road-step{
  background:var(--gray-lt);padding:14px;
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
}
.road-step.done{background:var(--green)}
.road-step.live{background:var(--yellow);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(247,229,1,.45)}}
.road-ico{font-size:34px}
.road-step h4{font-size:14px;letter-spacing:1px;margin:6px 0 8px}
.road-step ul{list-style:none;font-size:13px;line-height:1.9}

/* ============================================================
   WIZARD / BUY
   ============================================================ */
.wizard{display:grid;grid-template-columns:130px 1fr;gap:16px}
.wiz-side{
  background:linear-gradient(160deg,var(--teal),#003f40);color:#fff;
  display:grid;place-content:center;text-align:center;font-size:56px;line-height:1.1;padding:16px;
}
.wiz-side small{font-size:12px;letter-spacing:2px;font-weight:700}
.wiz-main h3{font-size:17px;margin-bottom:12px;color:var(--teal)}
.steps{padding-left:22px;font-size:14px;line-height:1.6}
.steps li{margin-bottom:10px}
.steps li::marker{font-weight:700;color:var(--orange)}
.wiz-note{font-size:12px;color:#444;margin-top:12px;font-style:italic}
.wiz-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-dk);flex-wrap:wrap}

/* ============================================================
   SOCIAL
   ============================================================ */
.social-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.social{
  display:grid;place-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:13px;letter-spacing:1px;padding:18px 10px;background:var(--gray-lt);
  border:2px solid;border-color:#fff var(--gray-dk) var(--gray-dk) #fff;
}
.social .ico{width:38px;height:38px;display:block}
.ico-x{color:#000}
.social:hover{background:var(--yellow)}
.social:active{border-color:var(--gray-dk) #fff #fff var(--gray-dk)}
.social-sol:hover{background:#0b0016;color:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{text-align:center;color:#fff;font-size:12px;line-height:1.7;padding:10px 6px 20px;text-shadow:1px 1px 0 rgba(0,0,0,.5);position:relative;z-index:2}
.footer p{max-width:62ch;margin:0 auto 8px}
.copy{opacity:.75}

/* ============================================================
   MARCHING ANTS
   ============================================================ */
.ant-parade{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.ant-parade i{position:absolute;font-size:22px;opacity:.5;animation:march linear infinite}
@keyframes march{from{transform:translateX(-8vw) rotate(90deg)}to{transform:translateX(112vw) rotate(90deg)}}

/* ============================================================
   TASKBAR
   ============================================================ */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:500;height:44px;
  background:var(--gray);border-top:2px solid #fff;
  display:flex;align-items:center;gap:6px;padding:4px 6px;
}
.start-btn{display:flex;align-items:center;gap:6px;font-size:15px;padding:5px 12px}
.flag{font-size:17px}
.tb-tasks{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.tb-tasks::-webkit-scrollbar{display:none}
.tb-task{font-size:12px;font-weight:400;padding:6px 10px}
.tray{
  font-size:12px;font-family:var(--mono);padding:6px 10px;flex:0 0 auto;
  border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk);
  display:flex;align-items:baseline;gap:6px;cursor:default;
}
#tzLabel{font-size:10px;opacity:.7}

.startmenu{
  position:fixed;bottom:46px;left:6px;z-index:600;width:250px;display:flex;
  background:var(--gray);
  border:2px solid;border-color:#fff #000 #000 #fff;
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
}
.startmenu.hidden{display:none}
.sm-side{
  width:34px;background:linear-gradient(180deg,var(--teal),#000);color:#fff;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:900;font-size:19px;letter-spacing:3px;display:grid;place-items:center;padding:12px 0;
}
.sm-side span{color:var(--yellow)}
.startmenu ul{list-style:none;flex:1;padding:4px}
.startmenu li a{display:block;padding:9px 12px;text-decoration:none;color:var(--ink);font-size:14px}
.startmenu li a:hover{background:var(--blue);color:#fff}
.startmenu .sep{height:2px;background:var(--gray-dk);border-bottom:1px solid #fff;margin:4px 2px}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:800;background:var(--yellow);color:#000;font-weight:700;font-size:14px;padding:12px 22px;
  border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:4px 4px 0 rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:.25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .hero-body{grid-template-columns:1fr;text-align:center}
  .hero-text{margin-inline:auto}
  .hero-btns{justify-content:center}
  .tok-grid{grid-template-columns:1fr}
  .wizard{grid-template-columns:1fr}
  .tabs{flex-wrap:wrap}
  .tab{flex:1;text-align:center;padding:8px 6px}
  /* the banner gets short on phones, so the caption moves out of the artwork */
  .march-frame{border:none;box-shadow:none}
  .march-frame img{border:2px solid;border-color:var(--gray-dk) #fff #fff var(--gray-dk)}
  .march-cap{position:static;background:#000;letter-spacing:1px;padding:8px 10px;margin-top:6px}

  /* the portrait canvas has room for the full briefing, just tighter */
  .overlay{gap:9px;padding:14px;overflow-y:auto}
  .overlay h2{font-size:26px}
  .overlay p{font-size:12.5px;line-height:1.45}
  .overlay .ctrl{font-size:11px;line-height:1.7}
  .overlay .btn-big{font-size:15px;padding:10px 20px}
  .save-row input{width:160px;font-size:13px;padding:6px 8px}
  .save-row .btn{font-size:12px;padding:6px 11px}
  .wiz-side{font-size:40px;padding:10px}
  .tb-tasks{display:none}
  #desktop{padding:14px 8px 20px}
  .win-body{padding:14px}

  /* HUD as an even 3 by 2 grid instead of a ragged wrap */
  .game-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .hud-box{min-width:0;padding:5px 8px;font-size:9px;letter-spacing:.5px;overflow:hidden}
  .hud-box b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .game-body{padding:10px}
  .statusbar{font-size:11px}
  .tabpanel{padding:10px}
  .shop-desc{min-height:0}
  .badges{justify-content:center}
  .hero-sub{letter-spacing:0}
}
@media (max-width:480px){
  .hero-btns .btn-big{width:100%;text-align:center}
  /* the date is the least useful column when space is tight */
  .board th:nth-child(4), .board td:nth-child(4){display:none}
  .board th, .board td{padding:7px 8px}
  .hero-title{letter-spacing:-2px;text-shadow:2px 2px 0 #000,4px 4px 0 var(--teal)}
  .quote{padding:14px 10px}
  .win{margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}