@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Rubik:wght@400;500;700;900&family=Space+Mono:wght@700&display=swap');

/* ================================================================
   DBReunion Dragon-Ball theme
   Flat panel skin replacing the old PNG-sprite "stone frame" chrome.
   Keeps every existing #col-left/#col-mid/#col-right/.box structure
   intact (still used by every page's PHP) - this only restyles it.
================================================================ */

:root {
	--db-ink: #150f0c;
	--db-panel: #1f1611;
	--db-panel-2: #2a1c14;
	--db-orange: #f2610c;
	--db-orange-2: #ff8c2b;
	--db-gold: #ffc93c;
	--db-cream: #ffe9c7;
	--db-text-dim: #c9b7a3;
	--db-line: #4a2f1c;
}

* { box-sizing: border-box; }

html { min-width: 1200px; }

body {
	background: radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(242, 97, 12, .16), transparent 65%), var(--db-ink);
	margin: 0; padding: 0;
	font-size: 13px;
	font-family: 'Rubik', 'Open Sans', sans-serif;
	color: var(--db-text-dim);
}

a { text-decoration: none; color: var(--db-orange-2); transition: color 0.15s linear; }
a:hover { color: var(--db-gold); }
ul { margin: 2px 0 0 0; padding: 0; }
ul li { list-style-type: none; margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: 1.5em; }
ol { margin: 8px 0 5px 5px; }
ol li { margin: 0 0 11px 0; }
textarea { max-width: 530px !important; }

/* ================================================================
   HERO BANNER (new - see layout/overall/header.php)
================================================================ */
#db-hero {
	width: 1170px;
	margin: 0 auto;
	padding: 46px 20px 34px;
	text-align: center;
}
#db-hero .db-orb {
	width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 14px;
	background: radial-gradient(circle at 32% 28%, #fff6d8 0%, #ffc93c 22%, #f2610c 62%, #7a2c04 100%);
	box-shadow: 0 0 16px rgba(255, 150, 40, .7), inset -3px -3px 6px rgba(0,0,0,.4);
	position: relative;
}
#db-hero .db-orb::after {
	content: "\2605"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: #8a1f0a;
}
#db-hero .db-title {
	font-family: 'Bangers', cursive; letter-spacing: 2px;
	font-size: clamp(40px, 6vw, 68px); line-height: .95; margin: 0 0 8px;
	background: linear-gradient(180deg, #fff 0%, var(--db-gold) 35%, var(--db-orange) 75%, #c23e05 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 4px 0 rgba(0,0,0,.45));
}
#db-hero .db-tagline { color: var(--db-text-dim); font-size: 15px; max-width: 520px; margin: 0 auto 22px; }
#db-hero .db-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#db-hero .db-btn {
	font-family: 'Bangers', cursive; font-size: 16px; letter-spacing: 1px; text-decoration: none;
	padding: 12px 28px; border-radius: 4px; display: inline-block;
}
#db-hero .db-btn-primary {
	color: #1a0d02;
	background: linear-gradient(180deg, var(--db-gold), var(--db-orange));
	box-shadow: 0 4px 0 #7a2c04, 0 0 20px rgba(255,140,30,.4);
}
#db-hero .db-btn-ghost {
	color: var(--db-cream); border: 2px solid var(--db-orange); background: rgba(242,97,12,.08);
}

/* ================================================================
   LAYOUT - 3 columns (unchanged structure, same widths as before)
================================================================ */
#layout-wrapper {
	width: 1170px;
	margin: 0 auto;
}
#layout-wrapper::after { content: ''; display: table; clear: both; }

#col-left {
	float: left;
	width: 246px;
	margin-top: 0;
}

#col-mid {
	float: left;
	width: 648px;
	margin-left: 15px;
	min-height: 200px;
}

#col-right {
	float: right;
	width: 246px;
	vertical-align: top;
}

#layout-footer {
	clear: both;
	width: 100%;
	margin: 30px 0 50px 0;
	text-align: center;
	color: var(--db-text-dim);
	font-size: 12px;
}

/* ================================================================
   BOXES (flat panel replacing the old PNG stone-frame chrome)
================================================================ */
.box {
	width: 100%;
	background: linear-gradient(160deg, var(--db-panel-2), var(--db-panel));
	border: 1px solid var(--db-line);
	border-top: 2px solid var(--db-orange);
	position: relative;
	margin-bottom: 18px;
	overflow: hidden;
}
.box::before {
	content: "";
	position: absolute; top: -40%; right: -30%; width: 140px; height: 140px;
	background: radial-gradient(circle, rgba(255,140,30,.16), transparent 70%);
	pointer-events: none;
}

/* corner ornaments removed - no PNG replacement, flat panel look instead */
.c-tl, .c-tr, .c-bl, .c-br { display: none; }

/* Box header */
.box-title {
	background: linear-gradient(180deg, var(--db-orange-2), var(--db-orange));
	width: 100%; min-height: 38px; position: relative;
	display: flex; align-items: center; padding: 0 14px 0 44px;
}
/* Dragon Ball orb used as the icon for every widget title (replaces the old
   per-widget .gif icons, which looked like blank white squares once forced
   white via a color filter). */
.box-title .db-orb-icon {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	z-index: 6; width: 20px; height: 20px; border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff6d8 0%, #ffc93c 22%, #f2610c 62%, #7a2c04 100%);
	box-shadow: 0 0 8px rgba(255,150,40,.6), inset -2px -2px 4px rgba(0,0,0,.4);
}
.box-title .db-orb-icon::after {
	content: "\2605"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 8px; color: #8a1f0a;
}
.box-title span:not(.db-orb-icon) {
	width: 100%; display: block; background: none !important;
	font-family: 'Bangers', cursive; letter-spacing: 1px; font-size: 16px;
	color: #1a0d02; text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* Box footer */
.box-footer { display: none; }

/* Box content - left/right columns */
.box-content {
	margin: 0;
	width: 100%;
	padding: 12px 14px;
	background: transparent;
	position: relative;
	z-index: 10;
}

/* Box content - middle column */
.box-content-mid {
	width: 100%;
	margin: 0;
	position: relative;
	background: transparent;
	color: var(--db-cream);
}
.box-content-mid .inner {
	padding: 20px;
	min-height: 200px;
	position: relative;
	z-index: 10;
	overflow-x: auto;
	overflow-y: visible;
}

/* ================================================================
   LEFT/RIGHT MENUS
================================================================ */
.box-content ul { list-style: none; padding: 0; margin: 0; }
.box-content ul li { padding: 0; margin: 0 0 2px 0; }
.box-content ul li a {
	display: block; color: var(--db-cream); padding: 8px 10px; font-weight: 600; font-size: 12.5px;
	border-left: 3px solid transparent; background: rgba(255,255,255,.02); transition: all .15s;
}
.box-content ul li a:hover { color: var(--db-gold); background: rgba(242,97,12,.16); border-color: var(--db-orange); padding-left: 13px; }
.box-content ul li a::after { content: none; }

/* ================================================================
   QUICK LOGIN (right column)
================================================================ */
.inputtext {
	width: 100%; height: 36px;
	background: rgba(0,0,0,.35);
	border: 1px solid var(--db-line);
	padding: 0 10px; margin: 0 0 8px 0;
	color: var(--db-cream); font-size: 12.5px;
	border-radius: 3px; display: block;
}
.loginbtn, .createbtn {
	height: 32px; padding: 0 16px; margin: 0 4px 4px 0; border: 0; border-radius: 3px;
	display: inline-block; vertical-align: middle; cursor: pointer;
	font-family: 'Bangers', cursive; font-size: 14px; letter-spacing: .5px;
}
.loginbtn { color: #1a0d02; background: linear-gradient(180deg, var(--db-gold), var(--db-orange)); }
.loginbtn:hover { filter: brightness(1.08); }
.createbtn { color: var(--db-cream); background: transparent; border: 2px solid var(--db-orange); }
.createbtn:hover { background: rgba(242,97,12,.16); }

.download-btn {
	display: block; width: 100%; height: 46px; line-height: 46px; text-align: center;
	background: linear-gradient(180deg, var(--db-gold), var(--db-orange));
	color: #1a0d02 !important; font-family: 'Bangers', cursive; font-size: 16px; letter-spacing: 1px;
	border-radius: 4px; margin: 0 0 10px 0; box-shadow: 0 3px 0 #7a2c04;
}
.download-btn:hover { filter: brightness(1.06); }

/* Right column - style */
#col-right .box { text-shadow: none; }
#col-right .box a { color: var(--db-orange-2); }
#col-right .box a:hover { color: var(--db-gold); }

/* Account menu after login */
.acc-menu { width: 100%; margin: 0; }
.acc-menu a {
	display: block; width: 100%; padding: 8px 0;
	font-size: 12px; text-align: center;
	background: rgba(0,0,0,0.25);
	border: 1px solid var(--db-line);
	border-radius: 3px; color: var(--db-cream) !important;
	margin: 0 0 4px 0; transition: background 0.15s;
}
.acc-menu a:hover { background: rgba(242,97,12,.2); }

/* Server info table */
.sinfotable { margin: 0; font-size: 13px; width: 100%; }
.sinfotable td { border-bottom: 1px solid var(--db-line); background: transparent; color: var(--db-cream); padding: 6px 0; }

/* Power gamers */
.toplvl { list-style: none !important; margin: 0 !important; }
.toplvl li { padding: 1px 0; margin: 0; }

/* ================================================================
   SLIDESHOW
================================================================ */
/* 15:11 matches the client's actual screenshot crop (game_screenshot_gallery
   uses g_app.doMapScreenshot(), sized to the map's visible tile dimension -
   see mapview.cpp) - the box takes that shape instead of a fixed height, so
   a real screenshot fills it edge to edge with nothing to crop or letterbox. */
.slider { width: 100%; aspect-ratio: 15 / 11; margin: 0; overflow: hidden; border: 1px solid var(--db-line); position: relative; }
#slides { width: 100%; height: 100%; position: relative; }
#slides img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; object-fit: cover; background: var(--db-ink);
	opacity: 0; transition: opacity .5s;
}
#slides img.active { opacity: 1; }
.slidesjs-pagination { position: absolute; bottom: 5px; right: 5px; z-index: 999; }
ul.slidesjs-pagination { list-style: none !important; padding: 3px; margin: 0; border-radius: 5px; background: rgba(0,0,0,0.5); }
.slidesjs-pagination li { float: left; margin: 0 3px; padding: 0; }
.slidesjs-pagination li a { display: block; width: 10px; height: 10px; border-radius: 15px; background: rgba(255,255,255,0.3); text-indent: -9999px; }
.slidesjs-pagination li a:hover, .slidesjs-pagination li a.active { background: var(--db-gold); }

/* ================================================================
   FORMS
================================================================ */
.form_settings { margin: 15px 0 0 0; }
.form_settings p { padding: 0 0 4px 0; }
.form_settings span { float: left; width: 200px; color: var(--db-cream); }
.form_settings input, .form_settings textarea {
	padding: 7px; width: 299px; font: 100% 'Rubik', arial; border: 1px solid var(--db-line);
	background: rgba(0,0,0,.3); color: var(--db-cream); border-radius: 4px;
}
.form_settings .submit {
	font-family: 'Bangers', cursive; letter-spacing: .5px; border: 0; width: auto; padding: 8px 20px; margin: 0 0 0 212px; height: auto; cursor: pointer;
	background: linear-gradient(180deg, var(--db-gold), var(--db-orange)); color: #1a0d02; border-radius: 4px;
}
.form_settings textarea, .form_settings select { font: 100% 'Rubik', arial; width: 299px; }
.form_settings select { width: 310px; background: rgba(0,0,0,.3); color: var(--db-cream); border: 1px solid var(--db-line); }
.form_settings .checkbox { margin: 4px 0; padding: 0; width: 14px; border: 0; background: none; }
.separator { width: 100%; height: 0; border-top: 1px solid var(--db-line); margin: 0 0 20px 0; }

/* ================================================================
   TABLES
================================================================ */
table { margin: 10px 0 30px 0; width: 100%; border-spacing: 1px; border-collapse: separate; }
table tr th { background: var(--db-panel-2); color: var(--db-gold); padding: 8px 6px; text-align: left; font-family: 'Rubik'; font-weight: 700; border-bottom: 2px solid var(--db-orange); }
table tr td { background: rgba(255,255,255,.03); color: var(--db-cream); padding: 6px; }
tr.yellow td { background: var(--db-panel-2); color: var(--db-gold); padding: 7px 4px; }
table.stripped tr:nth-child(even) td { background: rgba(255,255,255,.05); }
table.stripped tr:nth-child(odd)  td { background: rgba(255,255,255,.02); }
table.TableContent tr td, table.Table3 tr td { background: rgba(255,255,255,.03); }
table.TableContent tr.LabelH td { background: var(--db-panel-2); color: var(--db-gold); }
.TableContainer table { margin: 0 !important; }
.TableContainer td { padding: 4px 6px !important; }
table tr td img { max-width: 100%; }
tr.special { cursor: pointer; }
tr.special:hover td { background: rgba(242,97,12,.25); }

/* ================================================================
   CHANGELOG
================================================================ */
.display-none   { display: none !important; }
.display-inline { display: inline !important; }

/* ================================================================
   BOOTSTRAP COMPAT - ZnoteAAC uses Bootstrap classes on some pages
================================================================ */
.btn {
	display: inline-block;
	padding: 6px 16px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid var(--db-line);
	border-radius: 4px;
	background: var(--db-panel-2);
	color: var(--db-cream);
	text-decoration: none;
	transition: background 0.15s;
}
.btn:hover { background: var(--db-panel); color: var(--db-gold); }
.btn-info { background: #1a4fd6; border-color: #123a9e; color: #fff; }
.btn-info:hover { background: #123a9e; }
.btn-success { background: #2f7d32; border-color: #235e26; color: #fff; }
.btn-danger  { background: #a32d2d; border-color: #791f1f; color: #fff; }

.table-striped tr:nth-child(even) td { background: rgba(255,255,255,.05); }
.table-striped tr:nth-child(odd)  td { background: rgba(255,255,255,.02); }
.table-hover tr:hover td { background: rgba(242,97,12,.2); cursor: pointer; }

/* Highscores - outfit column */
.outfitColumn { width: 40px; text-align: center; }
.outfitColumn img { max-width: 40px; }

/* Highscores - form selects and submit */
#highscoresTable { width: 100%; }
form select {
	padding: 5px 8px;
	border: 1px solid var(--db-line);
	background: rgba(0,0,0,.3);
	color: var(--db-cream);
	border-radius: 3px;
	margin-right: 4px;
	margin-bottom: 8px;
}
form input[type="submit"] {
	padding: 6px 14px;
	border: 0;
	background: linear-gradient(180deg, var(--db-gold), var(--db-orange));
	color: #1a0d02;
	font-family: 'Bangers', cursive; letter-spacing: .5px;
	border-radius: 3px;
	cursor: pointer;
}
form input[type="submit"]:hover { filter: brightness(1.06); }

/* Game Guide widget - match left sidebar link style */
#col-right .box-menu a { color: var(--db-cream) !important; text-shadow: none; }

/* ================================================================
   MOBILE
   Everything above is a fixed 1170px, 3-column desktop layout - html
   itself has min-width:1200px, so a phone just sees it zoomed way out
   instead of adapting. These rules make the columns stack instead of
   float, main content first, without touching any page's PHP (every
   page still emits the same #col-left/#col-mid/#col-right/.box markup,
   this just re-lays it out under the breakpoint).
================================================================ */
@media (max-width: 900px) {
	html { min-width: 0; }

	#db-hero { width: 100%; padding: 28px 16px 20px; }
	#db-hero .db-tagline { max-width: 100%; }
	#db-hero .db-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
	#db-hero .db-btn { text-align: center; }

	#layout-wrapper {
		width: 100%;
		max-width: 100%;
		padding: 0 12px;
		display: flex;
		flex-direction: column;
	}
	#layout-wrapper::after { content: none; }

	#col-left, #col-mid, #col-right {
		float: none;
		width: 100%;
		margin: 0 0 16px;
	}
	/* #col-mid (the actual page content) sits last in the HTML source in
	   every page - floats didn't care, but stacked on a phone that would
	   bury it under both sidebars. Flex order pulls it to the top instead
	   of reshuffling markup every page relies on. */
	#col-mid { order: -1; }

	.box-title span:not(.db-orb-icon) { font-size: 14px; }

	/* A few page-specific hardcoded widths that would otherwise force
	   horizontal scrolling on a phone even after the columns above stack. */
	.mon-search { max-width: 100%; }
	.char-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

@media (max-width: 480px) {
	#db-hero .db-title { font-size: 32px; }
	#col-mid .box-title span:not(.db-orb-icon) { font-size: 13px; }
}
#col-right .box-menu a:hover { color: var(--db-gold) !important; }