:root{
  --mx-yellow:#FFCC01;
  --mx-black:#090909;
  --mx-white:#ffffff;

  --bg:#f2f2f4;
  --sky1:#7ecbff;
  --sky2:#bfe9ff;

  --mx-border:4px solid #000;
  --mx-shadow:10px 10px 0 var(--mx-yellow);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Fira Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:#111;
}

/* ================= HEADER / BANNER ================= */
header{
  position:relative;
  overflow:hidden;
  border-bottom:6px solid #000;
}
.banner{
  min-height:270px;
  background: linear-gradient(to bottom,var(--sky1),var(--sky2));
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.banner.has-img{
  background: #0e0e10;
}
.banner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.35));
}

.cloud{
  position:absolute;
  top:36px;
  width:140px;
  height:44px;
  background:#fff;
  opacity:.9;
  box-shadow:48px 0 #fff,96px 10px #fff;
  animation:cloudMove 65s linear infinite;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.15));
  z-index:2;
}
.cloud.c2{ top:92px; animation-duration:95s; opacity:.82 }
@keyframes cloudMove{ from{ left:-220px } to{ left:110% } }

.banner-title{
  position:relative;
  z-index:3;
  margin:0 0 52px;
  background:var(--mx-yellow);
  border:4px solid #000;
  padding:16px 24px;
  font-weight:900;
  font-size:1.7rem;
  box-shadow:10px 10px 0 #000;
  text-transform:uppercase;
  letter-spacing:.6px;
  text-align:center;
  white-space:nowrap;
}
.banner-sub{
  position:absolute;
  z-index:3;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  opacity:.92;
  color:#fff;
  text-shadow: 2px 2px 0 #000;
}

.wrap{
  max-width:1100px;
  margin:22px auto;
  padding:0 20px 40px;
}

/* ================= GRID / CARDS ================= */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px;
  align-items:start;
}
.span-4{ grid-column:span 4; }
.span-6{ grid-column:span 6; }
.span-8{ grid-column:span 8; }
.span-12{ grid-column:span 12; }

@media (max-width:980px){
  .span-4,.span-6,.span-8,.span-12{ grid-column:span 12; }
  .banner-title{ font-size:1.2rem; white-space:normal; margin-bottom:62px; }
}

/* Minecraft-ish cards */
.card{
  background:#fff;
  border:var(--mx-border);
  box-shadow:var(--mx-shadow);
  overflow:hidden;
}
.card h2{
  margin:0;
  padding:14px 18px;
  background:#000;
  color:var(--mx-yellow);
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.card .body{ padding:18px; }

.pill{
  display:inline-block;
  border:3px solid #000;
  background:#fff;
  padding:4px 10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow:4px 4px 0 var(--mx-yellow);
  font-size:.8rem;
}

.hint{ font-weight:700; line-height:1.5; color:#222; }
.small{ font-weight:800; opacity:.85; }

/* Buttons */
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.btn{
  background:var(--mx-yellow);
  border:3px solid #000;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:6px 6px 0 #000;
  text-transform:uppercase;
  letter-spacing:.4px;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  color:#000;
}
.btn.secondary{ background:#fff; }
.btn:active{ transform:translate(2px,2px); box-shadow:none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Inputs */
.inp{
  width:100%;
  border:3px solid #000;
  padding:12px 12px;
  font-weight:800;
  font-family:inherit;
  outline:none;
  background:#fffde7;
}
.inp:focus{ background:#fff; }

.row{ display:grid; gap:10px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:980px){ .row-2{ grid-template-columns:1fr; } }

.toast{
  display:none;
  margin-top:12px;
  border:3px solid #000;
  background:#fffde7;
  padding:10px 12px;
  font-weight:900;
}

/* Results list */
.list{
  display:grid;
  gap:10px;
}
.item{
  border:3px solid #000;
  background:#fff;
  padding:12px;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.item b{ font-weight:900; }
.item .meta{ opacity:.85; font-weight:800; }
.item:hover{ transform:translateY(-1px); }

/* ================= MODAL ================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.modal{
  width:min(920px, 100%);
  max-height: min(86vh, 920px);
  overflow:auto;
  background:#fff;
  border:4px solid #000;
  box-shadow:12px 12px 0 var(--mx-yellow);
}
.modal-header{
  position:sticky;
  top:0;
  background:#000;
  color:var(--mx-yellow);
  padding:14px 18px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  z-index:2;
}
.modal-body{ padding:16px 18px; font-weight:800; }
.modal-actions{ padding:16px 18px; display:flex; gap:10px; flex-wrap:wrap; }
.modal-close{
  background:var(--mx-yellow);
  border:3px solid #000;
  box-shadow:6px 6px 0 rgba(0,0,0,.22);
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
}
.modal-close:active{ transform:translate(2px,2px); box-shadow:none; }

/* Simple tabs */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; }
.tab{
  border:3px solid #000;
  background:#fff;
  box-shadow:4px 4px 0 var(--mx-yellow);
  padding:8px 10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
  cursor:pointer;
}
.tab.active{ background:var(--mx-yellow); }
.panel{ display:none; margin-top:12px; }
.panel.active{ display:block; }