/* ============================================================
   BJ HOUSE GAME SERVERS - style.css
   Shared styling for the games portal. One file so adding a
   game is still just a new directory with an index.html.

   Every "animated gif" on this site is inline SVG + a CSS
   animation. Nothing is downloaded from anywhere. Static SVG
   sprites are used as backgrounds and the MOTION is done by
   CSS on the host element, because SVG-as-an-image does not
   run its own animations in Chrome.
   ============================================================ */

:root {
	--hot:    #ff00ff;
	--lime:   #00ff00;
	--cyan:   #00ffff;
	--yellow: #ffff00;
	--red:    #ff0000;
	--deep:   #000033;
	--panel:  #1a0033;
	--line:   #00ffff;
}

* { box-sizing: border-box; }

/* --- the tiled starfield, fixed so it does not scroll ------- */
body {
	margin: 0;
	padding: 0 0 3rem;
	color: #ffffff;
	background-color: #000020;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect width='160' height='160' fill='%23000020'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='14' cy='22' r='1'/%3E%3Ccircle cx='58' cy='9' r='1.4'/%3E%3Ccircle cx='103' cy='31' r='1'/%3E%3Ccircle cx='140' cy='16' r='1.2'/%3E%3Ccircle cx='31' cy='63' r='1.3'/%3E%3Ccircle cx='77' cy='52' r='1'/%3E%3Ccircle cx='122' cy='71' r='1'/%3E%3Ccircle cx='9' cy='98' r='1.2'/%3E%3Ccircle cx='49' cy='113' r='1'/%3E%3Ccircle cx='90' cy='95' r='1.4'/%3E%3Ccircle cx='134' cy='108' r='1'/%3E%3Ccircle cx='23' cy='141' r='1'/%3E%3Ccircle cx='68' cy='150' r='1.2'/%3E%3Ccircle cx='112' cy='134' r='1'/%3E%3Ccircle cx='151' cy='147' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	font: 16px/1.55 "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive, sans-serif;
}

/* second star layer, offset and twinkling over the first */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%2399ddff'%3E%3Ccircle cx='37' cy='18' r='1'/%3E%3Ccircle cx='96' cy='44' r='1.2'/%3E%3Ccircle cx='163' cy='27' r='1'/%3E%3Ccircle cx='19' cy='87' r='1.1'/%3E%3Ccircle cx='128' cy='103' r='1'/%3E%3Ccircle cx='181' cy='129' r='1.2'/%3E%3Ccircle cx='55' cy='158' r='1'/%3E%3Ccircle cx='108' cy='186' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
	animation: twinkle 1.6s steps(2, end) infinite;
}

.wrap {
	position: relative;
	z-index: 1;
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 .75rem;
}

/* ============================================================
   TOP MARQUEE
   ============================================================ */
.marquee {
	overflow: hidden;
	white-space: nowrap;
	background: #000000;
	border-top: 3px ridge var(--lime);
	border-bottom: 3px ridge var(--lime);
	padding: .35rem 0;
	margin-bottom: 1rem;
	font-family: "Courier New", monospace;
	font-weight: bold;
	color: var(--lime);
	text-shadow: 0 0 6px var(--lime);
}
.marquee span {
	display: inline-block;
	padding-left: 100%;
	animation: marquee-scroll 22s linear infinite;
}

/* ============================================================
   THE BIG RAINBOW TITLE
   ============================================================ */
h1 {
	margin: 0 0 .25rem;
	text-align: center;
	font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif;
	font-size: clamp(1.9rem, 7vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	background: linear-gradient(90deg,
		#ff0000, #ff8800, #ffff00, #00ff00,
		#00ffff, #0088ff, #ff00ff, #ff0000);
	background-size: 400% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
	filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 10px #ff00ff);
	animation: rainbow 4s linear infinite;
}

.sub {
	text-align: center;
	color: var(--yellow);
	margin: 0 0 1rem;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000;
}

h2 {
	font-family: Impact, "Arial Black", sans-serif;
	font-size: 1.35rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cyan);
	text-shadow: 2px 2px 0 #000, 0 0 8px var(--cyan);
	margin: 1.75rem 0 .6rem;
}

a { color: var(--cyan); }
a:visited { color: #ff88ff; }
a:hover { color: var(--yellow); }

/* ============================================================
   "ANIMATED GIF" SPRITES
   ============================================================ */

/* barber-pole construction bar */
.gif-construction-bar {
	height: 26px;
	margin: .75rem 0;
	border: 2px outset #ffcc00;
	background-image: repeating-linear-gradient(45deg,
		#ffcc00 0 14px, #000000 14px 28px);
	background-size: 39.6px 39.6px;
	animation: barber 1s linear infinite;
}

/* flaming divider */
.gif-flame-bar {
	height: 14px;
	margin: 1rem 0;
	border-radius: 7px;
	background-image: linear-gradient(90deg,
		#ff0000, #ff6600, #ffcc00, #ffffff,
		#ffcc00, #ff6600, #ff0000);
	background-size: 200% 100%;
	box-shadow: 0 0 12px #ff6600;
	animation: flame 1.2s linear infinite;
}

/* spinning globe: continents scroll behind a round mask */
.gif-globe {
	display: inline-block;
	width: 46px; height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	vertical-align: middle;
	background-image:
		radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='46'%3E%3Crect width='184' height='46' fill='%230044cc'/%3E%3Cg fill='%2300cc44'%3E%3Cpath d='M6 10h14l6 8-8 10H8l-4-9z'/%3E%3Cpath d='M40 22h18l5 9-10 8-11-4z'/%3E%3Cpath d='M74 6h20l4 10-9 6-13-3z'/%3E%3Cpath d='M104 24h16l6 10-12 7-9-8z'/%3E%3Cpath d='M132 9h18l5 9-8 8-14-4z'/%3E%3Cpath d='M160 26h20l4 9-11 8-12-6z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 100% 100%, 184px 46px;
	background-repeat: no-repeat, repeat-x;
	border: 1px solid #001a55;
	box-shadow: 0 0 10px #00aaff;
	animation: globe-spin 3s linear infinite;
}

/* blinking NEW! starburst */
.gif-new {
	display: inline-block;
	width: 52px; height: 26px;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26'%3E%3Cpolygon fill='%23ff0000' points='26,0 31,7 40,3 39,12 49,13 41,19 47,26 37,25 34,26 26,21 18,26 15,25 5,26 11,19 3,13 13,12 12,3 21,7'/%3E%3Ctext x='26' y='18' font-family='Arial Black,Arial,sans-serif' font-size='11' font-weight='bold' fill='%23ffff00' text-anchor='middle'%3ENEW%3C/text%3E%3C/svg%3E") center/contain no-repeat;
	animation: blink 0.7s steps(2, end) infinite;
}

/* little digger for the construction notice */
.gif-digger {
	display: inline-block;
	width: 44px; height: 34px;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34'%3E%3Crect x='6' y='16' width='22' height='10' rx='2' fill='%23ffcc00' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='11' y='10' width='10' height='7' fill='%2366ddff' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M27 18 L38 8 L41 11 L31 21 Z' fill='%23ffcc00' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M36 6 h7 v6 h-7 z' fill='%23cc8800' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='27' r='5' fill='%23222' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='27' r='5' fill='%23222' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
	animation: dig 0.9s ease-in-out infinite alternate;
}

/* wobbling envelope */
.gif-mail {
	display: inline-block;
	width: 34px; height: 24px;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24'%3E%3Crect x='1' y='1' width='32' height='22' rx='2' fill='%23ffffff' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M1 2 L17 14 L33 2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
	animation: wobble 0.6s ease-in-out infinite alternate;
}

.blink { animation: blink 0.8s steps(2, end) infinite; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
	text-align: center;
	margin: 1rem 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .85rem;
	font-weight: bold;
}
.nav a {
	display: inline-block;
	margin: .2rem;
	padding: .35rem .7rem;
	color: #000;
	text-decoration: none;
	background: linear-gradient(#ffff99, #ffcc00);
	border: 3px outset #ffdd44;
}
.nav a:hover {
	background: linear-gradient(#ff99ff, var(--hot));
	border-style: inset;
	color: #fff;
}

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel, .card, .connect, dl, .counter-box, .webring {
	background: var(--panel);
	border: 4px ridge var(--hot);
	box-shadow: 0 0 14px rgba(255, 0, 255, .5);
}

.card {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .9rem 1rem;
	margin-bottom: .9rem;
	text-decoration: none;
	color: #fff;
}
.card:hover {
	border-color: var(--lime);
	box-shadow: 0 0 18px var(--lime);
	background: #26004d;
}
.card-body { flex: 1 1 auto; min-width: 0; }
.card h3 {
	margin: 0 0 .15rem;
	font-family: Impact, "Arial Black", sans-serif;
	font-size: 1.3rem;
	letter-spacing: .04em;
	color: var(--yellow);
	text-shadow: 2px 2px 0 #000;
}
.card p {
	margin: 0;
	font-family: "Courier New", monospace;
	font-weight: bold;
	color: var(--lime);
	word-break: break-all;
}

.panel { padding: 1rem 1.15rem; }

/* connect address box */
.connect {
	padding: 1rem 1.15rem;
	margin: 0 0 1.25rem;
	text-align: center;
	border-color: var(--lime);
	box-shadow: 0 0 14px rgba(0, 255, 0, .5);
}
.connect span {
	display: block;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .72rem;
	font-weight: bold;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: .4rem;
}
.addr {
	font-family: "Courier New", monospace;
	font-size: clamp(1rem, 3.4vw, 1.45rem);
	font-weight: bold;
	color: var(--yellow);
	text-shadow: 0 0 8px var(--yellow);
	word-break: break-all;
}

/* details list */
dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .45rem 1.25rem;
	margin: 0;
	padding: 1rem 1.15rem;
	border-color: var(--cyan);
	box-shadow: 0 0 14px rgba(0, 255, 255, .45);
	font-family: Verdana, Geneva, sans-serif;
	font-size: .85rem;
}
dt { color: var(--cyan); font-weight: bold; }
dd { margin: 0; color: #fff; }

ol, ul { padding-left: 1.3rem; }
ol li, ul li { margin-bottom: .45rem; }

code {
	font-family: "Courier New", monospace;
	font-weight: bold;
	background: #000;
	color: var(--lime);
	padding: .1rem .3rem;
	border: 1px solid var(--lime);
}

/* ============================================================
   HIT COUNTER
   ============================================================ */
.counter-box {
	text-align: center;
	padding: .9rem 1rem;
	margin: 1.25rem 0;
	border-color: var(--cyan);
	font-family: Verdana, Geneva, sans-serif;
	font-size: .8rem;
	font-weight: bold;
	color: var(--cyan);
}
.counter {
	display: flex;
	width: max-content;
	gap: 3px;
	margin: .45rem auto 0;
	padding: .3rem;
	background: #000;
	border: 3px inset #444;
}
.counter b {
	display: inline-block;
	min-width: 1.05em;
	padding: .12rem .18rem;
	background: #001100;
	color: var(--lime);
	font-family: "Courier New", monospace;
	font-size: 1.5rem;
	text-shadow: 0 0 7px var(--lime);
}

/* ============================================================
   88x31 BUTTONS + WEBRING
   ============================================================ */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 1.25rem 0;
}
.btn88 {
	width: 88px; height: 31px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 8px;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	border: 1px solid #000;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
	text-decoration: none;
	overflow: hidden;
}
.btn88 i { font-style: normal; font-size: 10px; }
.b-netscape { background: linear-gradient(#000066, #000000); color: #ffffff; }
.b-notepad  { background: linear-gradient(#ffffff, #c0c0c0); color: #000080; }
.b-html     { background: linear-gradient(#ff6600, #cc0000); color: #ffffff; }
.b-proxmox  { background: linear-gradient(#333333, #000000); color: #ff9900; }
.b-noframes { background: linear-gradient(#009900, #003300); color: #ffff00; }
.b-flash    { background: linear-gradient(#cc0000, #660000); color: #ffff00; }

.webring {
	margin: 1.25rem 0;
	padding: .85rem 1rem;
	text-align: center;
	border-color: var(--yellow);
	box-shadow: 0 0 14px rgba(255, 255, 0, .4);
	font-family: Verdana, Geneva, sans-serif;
	font-size: .78rem;
}
.webring b {
	display: block;
	font-family: Impact, "Arial Black", sans-serif;
	font-size: 1rem;
	letter-spacing: .1em;
	color: var(--yellow);
	margin-bottom: .3rem;
}

/* MIDI toggle */
.midi {
	display: inline-block;
	margin-top: .5rem;
	padding: .3rem .8rem;
	font-family: "Courier New", monospace;
	font-size: .8rem;
	font-weight: bold;
	color: #000;
	background: linear-gradient(#ccffcc, #33cc33);
	border: 3px outset #66ee66;
	cursor: pointer;
}
.midi:active { border-style: inset; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 3px double var(--hot);
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .78rem;
	color: #ccccff;
}
footer .sig { color: var(--hot); font-weight: bold; }

/* sparkle cursor trail */
.sparkle {
	position: fixed;
	width: 6px; height: 6px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	animation: sparkle-fade .7s linear forwards;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes rainbow      { to { background-position: 400% 0; } }
@keyframes blink        { 50% { opacity: 0; } }
@keyframes twinkle      { 50% { opacity: .25; } }
@keyframes barber       { to { background-position: 39.6px 0; } }
@keyframes flame        { to { background-position: -200% 0; } }
@keyframes globe-spin   { to { background-position: 0 0, -184px 0; } }
@keyframes marquee-scroll { to { transform: translateX(-100%); } }
@keyframes dig          { from { transform: rotate(-5deg) translateY(0); }
                          to   { transform: rotate(4deg) translateY(-3px); } }
@keyframes wobble       { from { transform: rotate(-9deg); }
                          to   { transform: rotate(9deg); } }
@keyframes sparkle-fade { from { transform: scale(1); opacity: 1; }
                          to   { transform: scale(0); opacity: 0; } }

/* Authentic, but not at the cost of making people ill. */
@media (prefers-reduced-motion: reduce) {
	*, body::before {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
	}
	.marquee span { padding-left: 0; }
}