/* SlopGrounds.com: lovingly hand-coded in Notepad, circa 2003 (spiritually) */
html { background: #000; }
body {
  margin: 0; padding: 12px 0 30px;
  font: 11px/1.45 Verdana, Tahoma, Geneva, sans-serif; color: #e8e8e8;
  /* tiled starfield + diagonal "carbon" pattern, like every portal of the era */
  background-color: #050812;
  background-image:
    radial-gradient(1px 1px at 12px 18px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61px 44px, #9cf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93px 9px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 37px 88px, #ffd 50%, transparent 51%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
  background-size: 110px 110px, 110px 110px, 110px 110px, 110px 110px, auto;
}
a { color: #ffcc00; }
a:visited { color: #ff9933; }
a:hover { color: #fff; background: #cc0000; text-decoration: none; }
.wrap { width: 980px; margin: 0 auto; background: #0b1328; border: 2px solid #3a5a9a; box-shadow: 0 0 0 2px #000, 0 0 30px rgba(60,120,255,.35); }

/* ---------- IE6-style "information bar" plugin warning (permanent, not dismissable) ---------- */
.plugin-bar { margin: -12px 0 12px; padding: 4px 10px; background: #ffffe1; color: #000; border-bottom: 1px solid #a0a0a0;
  font: 11px/1.4 Tahoma, Verdana, sans-serif; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 0 #fff inset; }
.pb-icon { flex: none; width: 16px; height: 14px; background: #f5c400; color: #000; font: bold 10px/15px Verdana, sans-serif; text-align: center;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- header ---------- */
.header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; height: 92px;
  background: linear-gradient(#1e3c80, #0a1a44 55%, #061030); border-bottom: 3px ridge #6688cc; position: relative; overflow: hidden; }
.header::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px); pointer-events: none; }
.logo { text-decoration: none; position: relative; display: block; }
.logo:hover { background: none; }
.logo .big { font: 900 38px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; font-style: italic;
  background: linear-gradient(#fff 0%, #cfe0ff 38%, #4a6aa8 50%, #e9f1ff 62%, #8fa8d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px #0a1a44; filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 10px rgba(255,180,0,.55)); }
.logo .big b { background: linear-gradient(#fff6a0, #ffb300 50%, #ff5a00); -webkit-background-clip: text; background-clip: text; }
.logo .tagline { display: block; font: bold 11px Verdana, sans-serif; color: #ffcc00; letter-spacing: 1px; margin-top: 4px; text-shadow: 1px 1px 0 #000; }
.logo .tagline i { color: #9cf; }

/* fake 468x60 banner ad */
.banner468 { width: 468px; height: 60px; border: 2px outset #999; background: #000; position: relative; overflow: hidden; display: block; text-decoration: none; flex: none; }
.banner468:hover { background: #000; }
.banner468 .ad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font: 900 15px Arial, sans-serif; color: #fff; text-align: center; opacity: 0; animation: adcycle 12s infinite; }
.banner468 .ad:nth-child(1) { background: linear-gradient(90deg, #ff0, #f80); color: #c00; animation-delay: 0s; }
.banner468 .ad:nth-child(2) { background: linear-gradient(90deg, #003, #00a); color: #0f0; animation-delay: 4s; font-family: "Courier New", monospace; }
.banner468 .ad:nth-child(3) { background: linear-gradient(90deg, #600, #e00); color: #fff; animation-delay: 8s; }
@keyframes adcycle { 0%, 30% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
.banner468 .tiny { position: absolute; right: 3px; bottom: 1px; font: 9px Verdana; color: #888; z-index: 2; }
.target { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#fff 0 18%, #c00 19% 38%, #fff 39% 58%, #c00 59% 78%, #fff 79%); animation: jitter .25s steps(2) infinite; flex: none; }
@keyframes jitter { 50% { transform: translate(14px, -3px); } }

/* ---------- nav ---------- */
.nav { display: flex; background: linear-gradient(#5a6a8a, #2a3654); border-bottom: 2px solid #000; padding: 3px; gap: 3px; }
.nav a { flex: 1; text-align: center; font: bold 11px Verdana, sans-serif; color: #fff; text-decoration: none; padding: 5px 0;
  background: linear-gradient(#8fa3c8, #4a5d86 50%, #34466e 51%, #4a5d86); border: 2px outset #a8b8d8; text-shadow: 1px 1px 0 #000; }
.nav a:hover { background: linear-gradient(#ffd85a, #ff9a00 50%, #e07000 51%, #ffae2a); color: #000; text-shadow: none; border-color: #ffe08a; }
.nav a:active, .nav a.on { border-style: inset; }
.nav a.on { background: linear-gradient(#ffe08a, #ffb300); color: #000; text-shadow: none; }

/* ---------- ticker ---------- */
.ticker { background: #000; border-bottom: 1px solid #333; color: #0f0; font: bold 12px "Courier New", monospace; padding: 3px 0; }
.ticker b { color: #ff0; }
.ticker .r { color: #f33; }

/* ---------- layout ---------- */
.cols { display: grid; grid-template-columns: 180px 1fr 180px; gap: 8px; padding: 8px; }
.box { background: #0e1a36; border: 1px solid #4a6aa8; margin-bottom: 8px; box-shadow: 2px 2px 0 #000; }
.box h3 { margin: 0; font: bold 11px Verdana, sans-serif; color: #fff; padding: 4px 6px; letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(#3a6ad0, #1a3a8a 50%, #102a6a 51%, #2a4aa0); border-bottom: 1px solid #000; text-shadow: 1px 1px 0 #000; }
.box h3.hot { background: linear-gradient(#ff7a2a, #c42a00 50%, #a01a00 51%, #d83a10); }
.box h3.gold { background: linear-gradient(#ffe36a, #d49a00 50%, #b07a00 51%, #e8b020); color: #000; text-shadow: 0 1px 0 #fff6b0; }
.box .in { padding: 6px; }
.box ol, .box ul { margin: 0; padding-left: 20px; }
.box li { margin: 2px 0; }
.soon { color: #6a7aa0; font-style: italic; }
hr.flame { border: 0; height: 6px; margin: 8px 0; background: repeating-linear-gradient(90deg, #ff3a00 0 6px, #ffb300 6px 12px, #ff6a00 12px 18px); filter: blur(.4px); }

/* blink + NEW! */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.new { display: inline-block; font: 900 9px Arial, sans-serif; color: #fff; background: #e00; padding: 1px 4px; transform: rotate(-8deg); border: 1px solid #ff0; animation: blink 0.8s steps(1) infinite; vertical-align: middle; }
.star { color: #ffcc00; letter-spacing: -1px; }

/* featured game */
.feature { display: grid; grid-template-columns: 300px 1fr; gap: 10px; }
.thumb { display: block; align-self: start; border: 3px ridge #c8a400; background: #000; line-height: 0; position: relative; }
.thumb:hover { background: #000; }
.thumb img { width: 100%; height: auto; }
.thumb .badge { position: absolute; right: -10px; top: -12px; width: 64px; height: 64px; line-height: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 900 11px Arial, sans-serif; color: #c00; background: #ff0; clip-path: polygon(50% 0, 61% 18%, 82% 8%, 79% 30%, 100% 35%, 84% 52%, 98% 70%, 76% 72%, 78% 94%, 58% 84%, 50% 100%, 40% 84%, 20% 94%, 22% 72%, 2% 70%, 16% 52%, 0 35%, 21% 30%, 18% 8%, 39% 18%); animation: spinbadge 3s linear infinite; }
@keyframes spinbadge { 50% { transform: rotate(14deg) scale(1.12); } }
.gtitle { font: 900 20px/1.1 Impact, "Arial Black", sans-serif; color: #fff; text-shadow: 2px 2px 0 #c00, 4px 4px 0 #000; margin: 2px 0 6px; letter-spacing: .5px; }
.gtitle small { display: block; color: #ffcc00; font-size: 14px; text-shadow: 2px 2px 0 #000; }
.meta { font-size: 10px; color: #9ab; margin: 6px 0; }
.meta b { color: #fff; }

/* chunky play button */
.playbtn { display: inline-block; font: 900 22px Impact, "Arial Black", sans-serif; letter-spacing: 2px; color: #fff; text-decoration: none; padding: 8px 26px; margin-top: 6px;
  background: linear-gradient(#7cff5a, #1ea800 50%, #138000 51%, #3ccf1a); border: 3px outset #9f9; text-shadow: 2px 2px 0 #000; box-shadow: 0 0 0 2px #000, 0 0 18px rgba(80,255,60,.6); animation: pulse 1.2s ease-in-out infinite; }
.playbtn:hover { color: #fff; background: linear-gradient(#fffa6a, #ffb300 50%, #e08a00 51%, #ffcf2a); border-color: #ffe08a; }
.playbtn:active { border-style: inset; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px #000, 0 0 30px rgba(80,255,60,.95); transform: scale(1.04); } }
.playbtn:visited { color: #fff; }

/* game grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.card { background: #08122a; border: 1px solid #2a3a6a; padding: 4px; text-align: center; font-size: 10px; }
.card .t { height: 70px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #111 0 8px, #1a1a1a 8px 16px); color: #444; font: 900 34px Impact, sans-serif; overflow: hidden; }
.card .t img { width: 100%; height: 100%; object-fit: cover; }
.card b { display: block; color: #fff; margin-top: 3px; }
.card.real { border-color: #c8a400; }
.uc { display: inline-block; font: bold 9px Verdana; color: #000; background: repeating-linear-gradient(45deg, #ffcc00 0 6px, #000 6px 12px); padding: 1px 2px; }
.uc span { background: #ffcc00; padding: 0 3px; }

/* news */
.news h4 { margin: 8px 0 2px; font: bold 12px Verdana; color: #ffcc00; }
.news h4 span { color: #9ab; font-weight: normal; font-size: 10px; }
.news p { margin: 0 0 6px; }

/* poll */
.poll label { display: block; margin: 2px 0; cursor: pointer; }
.poll button, .btn { font: bold 10px Verdana; color: #000; background: linear-gradient(#fff, #c8c8c8); border: 2px outset #ddd; padding: 2px 8px; cursor: pointer; margin-top: 4px; }
.poll button:active, .btn:active { border-style: inset; }
.pollres { display: none; margin-top: 4px; }
.pollres .bar { height: 9px; background: linear-gradient(#5f5, #090); border: 1px solid #000; margin: 1px 0 4px; }

/* counter */
.counter { display: inline-flex; gap: 1px; background: #000; padding: 2px; border: 2px inset #666; }
.counter span { font: bold 14px "Courier New", monospace; color: #0f0; background: linear-gradient(#111, #222 50%, #111 51%, #1a1a1a); width: 11px; text-align: center; text-shadow: 0 0 4px #0f0; }

/* 88x31 buttons */
.b88 { display: inline-flex; width: 88px; height: 31px; margin: 2px; border: 1px solid #000; font: bold 9px/1.05 Verdana, sans-serif; text-decoration: none; align-items: center; overflow: hidden; vertical-align: top; }
.b88:hover { background: none; outline: 1px solid #fff; }
.b88 .l { width: 31px; height: 100%; display: flex; align-items: center; justify-content: center; font: 900 13px Impact, sans-serif; flex: none; }
.b88 .r { flex: 1; padding: 0 2px; text-align: center; }
.b88.a { background: #000; color: #fc0; } .b88.a .l { background: #c00; color: #fff; }
.b88.b { background: #fff; color: #00c; } .b88.b .l { background: #00c; color: #fff; }
.b88.c { background: #0a0; color: #ff0; } .b88.c .l { background: #000; color: #0f0; }
.b88.d { background: linear-gradient(#ddd, #888); color: #000; } .b88.d .l { background: #555; color: #fff; }
.b88.e { background: #306; color: #fcf; } .b88.e .l { background: #f0c; color: #fff; }

.center { text-align: center; }
.small { font-size: 9px; color: #8899aa; }
.webring { text-align: center; font-size: 10px; border: 2px ridge #888; padding: 4px; background: #000; }
.email-spin { display: inline-block; animation: spin 2s linear infinite; font-weight: bold; color: #0ff; font-size: 14px; }
@keyframes spin { to { transform: rotateY(360deg); } }

/* footer */
.footer { text-align: center; padding: 10px; border-top: 3px ridge #6688cc; background: #060c1c; font-size: 10px; color: #8899aa; }
.footer a { color: #9cf; }

/* ---------- game page ---------- */
.gamepage { padding: 8px; }
body.game { -webkit-user-select: none; user-select: none; }
.crumbs { font-size: 10px; margin-bottom: 6px; }
.gamehead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
.gamehead .gtitle { margin: 0; font-size: 24px; }
.flashwin { width: 960px; margin: 0 auto; border: 2px outset #8a9ac0; background: #c0c0c0; box-shadow: 3px 3px 0 #000; }
.flashwin .tb { display: flex; justify-content: space-between; align-items: center; padding: 2px 3px 2px 6px; font: bold 11px Tahoma, Verdana, sans-serif; color: #fff;
  background: linear-gradient(90deg, #0a246a, #a6caf0); }
.flashwin .tb .x { display: inline-flex; gap: 2px; }
.flashwin .tb .x span { width: 16px; height: 14px; background: #c0c0c0; border: 1px outset #fff; color: #000; font: bold 9px/12px Tahoma; text-align: center; }
.stage { position: relative; width: 956px; height: 620px; margin: 0 2px 2px; background: #000; border: 2px inset #808080; overflow: hidden; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0b0a0e; }
.preloader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 2;
  background: radial-gradient(ellipse at center, #2a0a0a, #000 70%); color: #fff; font: bold 12px Verdana, sans-serif; text-align: center; }
.preloader img { width: 560px; max-width: 80%; border: 2px solid #333; }
.lbar { width: 360px; height: 18px; border: 2px solid #fff; padding: 2px; background: #000; }
.lbar div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #e60012 0 10px, #ff4a5a 10px 20px); transition: width .12s linear; }
.lpct { font: bold 14px "Courier New", monospace; color: #0f0; }
.clicktoplay { display: none; }
.tip { color: #ffcc00; font-size: 11px; max-width: 520px; }
.stagebar { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; font: 11px Tahoma, Verdana, sans-serif; color: #000; }
.stagebar .btn { margin: 0 0 0 4px; }
.under { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 8px; margin-top: 8px; }
.keys td { padding: 1px 4px; vertical-align: top; }
.keys kbd { display: inline-block; min-width: 40px; text-align: center; font: bold 10px Verdana; color: #000; background: linear-gradient(#fff, #bbb); border: 1px solid #555; border-bottom-width: 3px; border-radius: 3px; padding: 0 4px; }
.comment { border-bottom: 1px dotted #2a3a6a; padding: 4px 0; }
.comment b { color: #9cf; }
.comment span { color: #667; font-size: 9px; }
.rate { font-size: 18px; color: #555; cursor: pointer; user-select: none; }
.rate .on { color: #ffcc00; text-shadow: 0 0 6px #fc0; }
.noscript { background: #c00; color: #fff; padding: 8px; text-align: center; font-weight: bold; }

/* under construction page */
.ucpage { padding: 40px 20px; text-align: center; }
.ucpage .sign { display: inline-block; padding: 18px 30px; background: repeating-linear-gradient(45deg, #ffcc00 0 20px, #000 20px 40px); }
.ucpage .sign div { background: #ffcc00; color: #000; font: 900 34px Impact, sans-serif; padding: 10px 24px; letter-spacing: 2px; }
.digger { font-size: 40px; display: inline-block; animation: dig .5s ease-in-out infinite alternate; }
@keyframes dig { to { transform: rotate(-25deg) translateY(4px); } }