:root {
  --sky: #8fd3ff;
  --sky2: #d8f1ff;
  --grass: #6bbf4e;
  --grass-dark: #3f7f2b;
  --soil: #7a4b2a;
  --hay: #f6d77b;
  --paper: #fffaf0;
  --barn: #b3261e;
  --ink: #2b1d12;
  --muted: #6f5a48;
  --gold: #ffaf00;
  --radius: 14px;
  --meme: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Marker Felt", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--grass); }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(0,0,0,.04) 38px 40px),
    linear-gradient(var(--grass) 0, var(--grass-dark) 100%);
  overflow-x: hidden;
}

a { color: var(--barn); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 48px 16px 0;
  background: linear-gradient(var(--sky) 0, var(--sky2) 70%, var(--grass) 70%);
  overflow: hidden;
}
.sky { position: absolute; inset: 0; pointer-events: none; font-size: 48px; }
.sun { position: absolute; top: 16px; right: 6%; animation: spin 30s linear infinite; }
.cloud { position: absolute; opacity: .9; animation: drift 40s linear infinite; }
.c1 { top: 30px; left: -10%; }
.c2 { top: 90px; left: -30%; font-size: 64px; animation-duration: 60s; }

.kicker { margin: 0; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-size: 13px; position: relative; }
h1 {
  position: relative;
  margin: 4px 0 0;
  font: 900 clamp(48px, 13vw, 120px)/1 var(--meme);
  color: var(--gold);
  -webkit-text-stroke: 3px var(--soil);
  text-shadow: 6px 6px 0 var(--barn);
  letter-spacing: .04em;
}
.wobble { display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
.tagline { position: relative; font: 700 clamp(17px, 3.5vw, 22px) var(--meme); margin: 8px 0 12px; }

.status {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 6px 14px;
  background: var(--paper);
  border: 3px solid var(--soil);
  border-radius: 999px;
  font-weight: 700;
}
.dot { width: 12px; height: 12px; border-radius: 50%; background: #aaa; }
.status.online .dot { background: #2ecc40; box-shadow: 0 0 0 0 #2ecc40; animation: ping 1.6s infinite; }
.status.offline .dot { background: var(--barn); }

.modlink { position: relative; margin: 14px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.modlink .btn { display: inline-block; text-decoration: none; font-size: 18px; }
.modlink small { font-weight: 700; color: var(--muted); }

.chicken {
  position: relative;
  display: block;
  margin: 12px auto 0;
  font-size: 96px;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .1s;
}
.chicken:hover { transform: rotate(-8deg) scale(1.05); }
.chicken:active { transform: scale(.9); }
.chicken:focus-visible { outline: 4px dashed var(--barn); outline-offset: 4px; border-radius: 12px; }
.poopcount { position: relative; margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.barn { position: relative; font-size: clamp(28px, 7vw, 48px); letter-spacing: -.05em; margin-top: 8px; line-height: 1.2; }

.poop {
  position: fixed;
  top: -60px;
  font-size: 40px;
  pointer-events: none;
  z-index: 50;
  animation: fall 2.2s cubic-bezier(.45,.05,.8,.6) forwards;
}

/* ---------- ticker ---------- */
.ticker {
  background: var(--barn);
  color: #fff;
  border-block: 4px solid var(--soil);
  overflow: hidden;
  white-space: nowrap;
  font: 700 16px/2.2 var(--meme);
}
.ticker-track { display: inline-block; padding-left: 100%; animation: scroll 60s linear infinite; }
.ticker-track span { margin-right: 48px; }

/* ---------- layout ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 8px; }
section {
  background: var(--paper);
  border: 4px solid var(--soil);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--soil);
  padding: 16px 20px 20px;
  margin-bottom: 28px;
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
h2 {
  margin: -16px -20px 16px;
  padding: 10px 20px;
  font: 700 22px/1.3 var(--meme);
  background: repeating-linear-gradient(0deg, #a0683c 0 9px, #8f5a31 9px 11px);
  color: #fff8e1;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
  border-radius: 9px 9px 0 0;
}
h2 small { font-size: 14px; opacity: .85; }
.split { padding-top: 20px; }
.split h2 { margin: 0 0 16px; border-radius: 9px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.card {
  background: var(--hay);
  border: 3px solid var(--soil);
  border-radius: 12px;
  padding: 12px 14px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .15s;
}
.card:hover { transform: rotate(0) scale(1.03); }
.card .label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.card .value { font: 900 26px/1.2 var(--meme); overflow-wrap: anywhere; }
.card .sub { font-size: 13px; color: var(--muted); }
.card.bad .value { color: var(--barn); }
.card.good .value { color: var(--grass-dark); }

/* ---------- meme stats ---------- */
.memes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.memes li {
  font: 700 17px/1.4 var(--meme);
  padding: 10px 14px 10px 48px;
  position: relative;
  background: #fff;
  border: 2px dashed var(--soil);
  border-radius: 10px;
}
.memes li::before { content: "💩"; position: absolute; left: 12px; top: 8px; font-size: 22px; }

/* ---------- weather ---------- */
.weather { font: 700 22px var(--meme); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.weather .big { font-size: 56px; line-height: 1; }
.weather .joke { flex-basis: 100%; font-size: 16px; font-weight: 400; color: var(--muted); }
.forecast { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.forecast li { text-align: center; background: var(--sky2); border: 2px solid var(--soil); border-radius: 10px; padding: 6px 2px; font-size: 13px; }
.forecast .ico { font-size: 26px; display: block; }

.quote {
  margin: 0 0 14px;
  padding: 16px 18px;
  font: 700 21px/1.4 var(--meme);
  background: #fff;
  border-left: 8px solid var(--gold);
  border-radius: 8px;
  min-height: 96px;
}
.btn {
  font: 700 16px var(--meme);
  background: var(--gold);
  color: var(--ink);
  border: 3px solid var(--soil);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--soil);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--soil); }
.btn:focus-visible { outline: 3px dashed var(--barn); outline-offset: 3px; }

/* ---------- map ---------- */
.mapwrap { max-width: 720px; margin: 0 auto; border: 4px solid var(--soil); border-radius: 12px; overflow: hidden; background: var(--grass-dark); }
#map { display: block; width: 100%; height: auto; aspect-ratio: 1; }
/* Fragnet's map is a square at the top of its page and pins its info popups to the
   map's bottom edge, so the frame must be square too or the popups fall out of view.
   Capping the width at the viewport height keeps map and popup on screen together. */
.livewrap {
  position: relative;
  width: min(100%, calc(100vh - 32px));
  width: min(100%, calc(100dvh - 32px));
  margin: 0 auto;
  border: 4px solid var(--soil);
  border-radius: 12px;
  overflow: hidden;
  background: #1b1b1b;
}
.livewrap iframe { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; }

/* Full screen: real Fullscreen API where available, a fixed overlay otherwise (iPhone).
   The map stays a centred square so Fragnet's popups remain on screen. */
.livewrap:fullscreen,
.livewrap.is-full {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: #111;
}
.livewrap:fullscreen iframe,
.livewrap.is-full iframe { width: min(100vw, 100vh); width: min(100vw, 100dvh); }
.fullclose {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  font: 700 22px/1 system-ui, sans-serif;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--soil);
  border-radius: 50%;
  cursor: pointer;
}
.livewrap:fullscreen .fullclose,
.livewrap.is-full .fullclose { display: block; }
.fullclose:focus-visible { outline: 3px dashed #fff; outline-offset: 3px; }
body.no-scroll { overflow: hidden; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  font: 700 15px var(--meme);
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--soil);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--gold); box-shadow: 0 3px 0 var(--soil); }
.tab:focus-visible { outline: 3px dashed var(--barn); outline-offset: 3px; }
.legend { text-align: center; font-size: 14px; color: var(--muted); }
.sw { display: inline-block; width: 12px; height: 12px; border: 2px solid #000; vertical-align: -1px; margin-left: 10px; }
.sw.field { background: var(--gold); }
.sw.veh { background: #fff; border-radius: 50%; }
.sw.ai { background: #00c2ff; border-radius: 50%; }
.sw.player { background: var(--barn); border-radius: 50%; }

/* ---------- fields / vehicles / contracts ---------- */
.fields, .vehicles, .contracts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.item { background: #fff; border: 2px solid var(--soil); border-radius: 10px; padding: 10px 12px; }
.item .title { font-weight: 800; display: flex; gap: 8px; align-items: center; }
.item .meta { font-size: 13px; color: var(--muted); }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--soil); flex: none; }
.bar { height: 10px; background: #eadfcf; border-radius: 99px; overflow: hidden; margin-top: 6px; border: 1px solid var(--soil); }
.bar > i { display: block; height: 100%; background: var(--grass); width: 0; }
.bar.fuel > i { background: var(--gold); }
.bar.low > i { background: var(--barn); }
.tag { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: #00c2ff; color: #002233; }
.tag.drive { background: var(--barn); color: #fff; }
.empty { color: var(--muted); font-style: italic; }

footer { text-align: center; color: #f2ffe8; padding: 8px 16px 40px; font-size: 14px; }
footer a { color: var(--hay); }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(140vw); } }
@keyframes wobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.05); } }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(46,204,64,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,64,0); } }
@keyframes scroll { to { transform: translateX(-100%); } }
@keyframes fall { to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }

@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  section { padding: 14px 14px 16px; }
  h2 { margin: -14px -14px 14px; padding: 10px 14px; font-size: 19px; }
  .split h2 { margin: 0 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track { padding-left: 16px; white-space: normal; }
}