@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Nunito:wght@600;700;800&family=Pacifico&family=Mochiy+Pop+One&display=swap');

.ad-block, .ad-sidebar-left, .wallet-card, .hero-top,
.claim-stage, .claim-main, .claim-side,
input[type="text"], input.submit, input.submit2 {
	box-sizing: border-box;
	}

:root {
	--primary: #c6ff3d;
	--primary-light: #e3ffa0;
	--primary-dark: #8fbf1f;
	--accent2: #ff6fb3;
	--light: #eaffe0;
	--dark: #0a0e14;
	--dark-2: #131a12;
	--dark-3: #0f1510;
	--line: #2b3d24;
	--success: #3ddc84;
	--danger: #ff4d6d;
	}

html, body {
	background: var(--dark) !important;
	background-image: none !important;
	padding: 0;
	margin: 0;
	text-align: center;
	color: var(--light);
	font-family: 'Heebo', Verdana, sans-serif;
	font-variant-numeric: tabular-nums;
	position: relative;
	}
a[href*="zerochain.info/address/"] { word-break: break-all; }
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(198,255,61,.025) 0 2px, transparent 2px 4px);
	pointer-events: none;
	}
@font-face {
    font-family: CodeFont;
    src: url(cour.ttf);
}

/* --- legacy <font color="..."> remap onto theme palette --- */
font[color="grey"], font[color="gray"] {
	color: var(--primary) !important;
	font-family: 'Mochiy Pop One', 'Nunito', sans-serif !important;
	font-weight: 700;
	letter-spacing: 1px;
	}
font[color="blue"], font[color="#369cf6"] { color: #8fe0c8 !important; }
font[color="black"] { color: var(--light) !important; }
font[color="green"], font[color="#3c8a39"], font[color="#14b500"] { color: var(--success) !important; }
font[color="#179013"] { color: var(--primary) !important; }
font[color="brown"], font[color="#331a00"] { color: var(--primary-light) !important; }
font[color="red"], font[color="#ff0000"], font[color="darkred"] { color: var(--danger) !important; }
font[color="pink"] { color: var(--accent2) !important; }

h1, h1 font {
	font-family: 'Mochiy Pop One', 'Nunito', sans-serif;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: .02em;
	text-shadow: 0 0 18px rgba(198,255,61,.45);
	}

a { color: var(--primary) !important; text-decoration: none; }
a:hover { color: var(--primary-light) !important; }
.a1, a.a1 { color: var(--light) !important; }
.a1:hover, a.a1:hover { color: var(--primary) !important; }

img[src*="logo.png"] { filter: drop-shadow(0 0 14px rgba(198,255,61,.4)); }

/* --- tables (proof / stats) --- */
table { margin-left: auto; margin-right: auto; border-collapse: collapse; }
table.proof {
	display: block;
	background: var(--dark-2);
	border-radius: 10px;
	overflow-x: auto;
	max-width: 100%;
	}
table.proof th {
	background: var(--primary);
	padding: 10px 8px;
	white-space: nowrap;
	}
table.proof th font { color: var(--dark) !important; font-family: 'Nunito', sans-serif; }
table.proof td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	white-space: nowrap;
	}
table.proof tr:hover td { background: rgba(198,255,61,.08); }

/* --- inputs / buttons --- */
input, select, textarea {
	font: 18px/22px 'Nunito', Verdana, sans-serif;
	}
input[type="text"]{
		background-color: var(--dark-3);
		background-image: none;
		border-radius: 8px;
		border: 2px dashed var(--line);
		color: var(--primary);
		font-size: 16px;
		font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
		transition: 0.2s all ease;
		width: 200px;
		height: 50px;
		padding: 0 14px;
		}
input:hover[type="text"] {
		border-color: var(--primary-light);
		}
input:focus[type="text"] {
		background: var(--dark-3);
		outline: none;
		box-shadow: 0 0 0 4px rgba(198,255,61,.22);
		color: var(--light);
		border-color: var(--primary);
		border-style: solid;
	}
input.submit, input.submit2 {
	background: var(--primary);
	border: none;
	border-radius: 10px;
	color: var(--dark);
	font: 800 16px 'Nunito', sans-serif;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	box-shadow: 0 6px 0 var(--primary-dark);
	transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
	width: 185px;
	height: 44px;
	}
input.submit:hover, input.submit2:hover {
	background: var(--primary-light);
	}
input.submit:not(:disabled):active, input.submit2:not(:disabled):active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--primary-dark);
	}
input.submit2:disabled{
	background: #1c2418;
	color: #4c5a3f;
	box-shadow: 0 6px 0 #10150d;
	border: none;
	cursor: progress;
	}

/* --- sponsored / ad wrappers (shared by ad-places/*.php and the sidebar) --- */
.ad-block, .ad-sidebar-left {
	position: relative;
	display: inline-block;
	margin: 16px auto;
	padding: 22px 14px 14px;
	border: 2px dashed var(--line);
	border-radius: 10px;
	background: var(--dark-3);
	max-width: 100%;
	overflow-x: auto;
	}
.ad-sidebar-left {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	}
.ad-block__label, .ad-sidebar-left::before {
	content: "Sponsored";
	position: absolute;
	top: -1px;
	left: 14px;
	transform: translateY(-50%);
	background: var(--dark);
	color: var(--accent2);
	font: 700 10px 'Nunito', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 2px 8px;
	border: 1px solid var(--line);
	border-radius: 99px;
	}
.ad-block__item, .ad-sidebar-left iframe { display: inline-block; margin: 4px; vertical-align: top; max-width: 100%; }

/* --- claim hero (index.php, logged-out) --- */
.hero-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 14px 0;
	}
.hero-logo { display: block; }
.hero-sitename {
	font-family: 'Mochiy Pop One', 'Nunito', sans-serif;
	color: var(--primary);
	font-weight: 700;
	font-size: clamp(22px, 4vw, 34px);
	letter-spacing: .03em;
	text-shadow: 0 0 18px rgba(198,255,61,.4);
	}
.hero-tagline {
	color: #8fe0c8;
	font-size: 15px;
	max-width: 60ch;
	margin: 0 auto 6px;
	}
.hero-desc {
	color: #8fe0c8;
	font-size: 13.5px;
	max-width: 62ch;
	margin: 10px auto;
	line-height: 1.6;
	}
.wallet-card {
	display: inline-block;
	max-width: 92vw;
	width: 480px;
	margin: 10px auto;
	padding: 22px 22px 18px;
	border: 2px solid var(--line);
	border-radius: 14px;
	background: var(--dark-2);
	box-shadow: inset 0 0 0 1px rgba(198,255,61,.06);
	}
.wallet-label {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent2);
	text-align: left;
	margin: 0 0 8px 2px;
	}
.wallet-input {
	width: 100% !important;
	height: 52px !important;
	font-size: 16px !important;
	text-align: center;
	margin-bottom: 14px;
	}
.wallet-fine { font-size: 12px; color: #8fe0c8; margin-top: 10px; }
.cta-arcade {
	display: block !important;
	width: 100% !important;
	max-width: 460px !important;
	height: 54px !important;
	font-size: 16px !important;
	margin: 0 auto !important;
	}

/* --- claim stage (index.php, playing) --- */
.claim-stage {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 28px;
	flex-wrap: wrap;
	margin: 10px auto;
	max-width: 900px;
	}
.claim-main { flex: 0 1 auto; width: 100%; max-width: 760px; }
.claim-main form { display: block; }
.claim-side {
	flex: 0 1 220px;
	border: 2px dashed var(--line);
	border-radius: 12px;
	padding: 16px;
	background: var(--dark-3);
	}
.claim-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	}
.claim-actions input.submit2 { width: 145px; height: 46px; font-size: 13px; }

@media (max-width: 700px) {
	.hero-top { flex-direction: column; }
	.claim-stage { flex-direction: column; align-items: center; }
	.claim-side { width: 90%; }
	}