html, body{
	font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
	height: 100%;
	margin: 0;
	background: radial-gradient(circle at top, #2f3e8f 0%, #1f2255 35%, #111127 100%);
	color: #f5f8ff;
	-moz-user-select: none;
	-webkit-user-select: none;
}

*{ box-sizing: border-box; }

h1, h2, h3, h4, h5, h6{ font-weight: 700; margin: 0.4em 0 0.2em; letter-spacing: 0.02em; }
p{ margin: 0.4em 0; }
small{ font-size: 75%; }
a { color: #ffd16f; text-decoration: none; font-weight: bold; }
a:hover, a:visited { color: #ffe29e; }
hr{ border: none; height: 8px; }

button{
	font: inherit;
	font-size: 18px;
	margin: 10px 8px;
	border: 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: linear-gradient(180deg, #ffe792 0%, #ffbb2f 100%);
	color: #352100;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 3px 0 #a56b00;
}
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #a56b00; }

#gamearea {
	position: relative;
	display: grid;
	grid-template-columns: minmax(380px, 1.1fr) minmax(500px, 1fr);
	gap: 16px;
	width: 100%;
	height: 100%;
	padding: 16px;
}

#centre{
	height: 100%;
	padding: 16px 20px;
	text-align: center;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
	border: 2px solid rgba(255, 201, 67, 0.45);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

#mainpane{ display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; gap: 14px; }

#infopane, #mob_infopane{
	background: rgba(9, 14, 48, 0.65);
	border: 2px solid rgba(127, 233, 255, 0.5);
	border-radius: 14px;
	padding: 12px 18px;
	min-width: 300px;
}

#mobpane{ display: none; width: 400px; margin: 40px 0; }
#bloon_container{ position: relative; margin: auto; width: min(320px, 70vw); height: auto; cursor: pointer; }
#great_bloon{ transition: 0.03s linear; position: relative; width: 100%; top: 0%; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)); }

#blooncount, #mob_blooncount{ font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; color: #ffe27f; text-shadow: 0 2px 0 #875900; }
.gps{ color: #95f1ff; font-weight: 700; }

#levelpane, #mob_levelpane{ font-size: 120%; background: rgba(8, 11, 30, 0.65); border-radius: 999px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.18); }
#level_progress{ appearance: none; margin-left: 8px; width: 220px; height: 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background-color: #0e1239; color: #6efb7d; overflow: hidden; }
#level_progress::-webkit-progress-bar{ background-color: #0e1239; }
#level_progress::-webkit-progress-value{ background: linear-gradient(90deg, #62ff7e, #b8ff8a); }

#sidebar{ height: 100%; min-width: 0; }
#sidebar_container{ height: 100%; width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }

#statbar, #genbar{ height: 100%; position: relative; background: rgba(13, 15, 38, 0.88); border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
#statbar > .nano-content{ padding: 12px; }
#genbar > .nano-content{ padding: 14px 10px; }

#generators{ font-size: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.special-generator{
	display: inline-block;
	vertical-align: top;
	width: 188px;
	height: 100px;
	font-size: 12pt;
	cursor: pointer;
	border-radius: 12px;
	padding: 10px;
	background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
	border: 1px solid rgba(255,255,255,0.18);
}

.generator{ display: inline-block; width: 120px; height: 120px; background-size: 100%; font-size: 8pt; cursor: pointer; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.25); }
.generator-info{ display: table-cell; width: 104px; height: 120px; padding: 8px; text-align: right; vertical-align: bottom; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.95) 100%); cursor: pointer; }
.generator-info:hover{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.6) 100%); }
.generator-count{ font-size: 200%; color: #fff68b; text-shadow: 0 2px 0 #111; }

.item{ display: inline-block; width: 60px; height: 60px; border: 3px solid #8cffa8; border-radius: 8px; margin: 6px; cursor: pointer; background: rgba(39,96,35,0.25); }
#bloon_stats{ width: 100%; font-size: 0.95rem; }

#shiny_bloon{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; z-index: 100; opacity: 0; cursor: pointer; }
#shiny_bloon > img{ pointer-events: none; }

#about, #export_save{
	position: absolute; top: 50%; left: 50%; width: min(480px, 90vw); height: 360px; margin-top: -180px; margin-left: calc(min(480px, 90vw) / -2); padding: 10px 20px;
	background-color: #0a0a0a; border: 2px solid #ffd567; border-radius: 12px; display: none;
}
.version{ font-weight: normal; font-size: 12pt; white-space: nowrap; margin-left: 0.2em; }
#export_save{ width: min(420px, 92vw); margin-left: calc(min(420px, 92vw) / -2); }
#export_qr_code{ background-color: white; display: inline-block; padding: 8px; margin-left: 8px; width: 200px; height: 200px; vertical-align: middle; }

#tooltips{ display: none; }
.qtip hr{ border-top: 1px solid #e9e9e9; height: 0; }

@media (max-width: 1100px){
	#gamearea{ grid-template-columns: 1fr; height: auto; min-height: 100%; }
	#sidebar_container{ grid-template-columns: 1fr; }
	#centre{ padding-bottom: 26px; }
}

#menu_tabs{ display:flex; gap:8px; margin-bottom:10px; }
.menu-tab{ font-size:14px; margin:0; padding:6px 10px; }
.menu-tab.active{ filter: saturate(1.2); outline: 2px solid rgba(255,255,255,0.45); }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; }
#battle_panel{ padding: 8px; border-radius: 12px; border:1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); }
#battle_status{ margin:8px 0; font-weight:700; color:#ffe896; }
#battle_timer{ font-weight:700; color:#9cf3ff; margin-bottom:8px; }
#battle_hp{ width:100%; height:14px; margin-bottom:10px; }
#battle_tap{ margin-left:0; }
#battle_trophies{ display:flex; flex-wrap:wrap; gap:8px; }
.battle-trophy{ background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); border-radius:8px; padding:6px 8px; font-size:12px; }
#battle_target_row, #battle_hp_value{ margin:8px 0; font-weight:700; color:#fff; }
#settings_panel{ padding: 8px; border-radius: 12px; border:1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); }
#settings_panel label{ display:block; margin:10px 0; }
#settings_number_format{ width:100%; margin-top:6px; padding:8px 34px 8px 12px; }

#battle_bloon_img{ display:block; max-width:180px; max-height:120px; object-fit:contain; margin:8px auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45)); }

.danger-button{ width:100%; margin-top:12px; background:#9f2631; border-color:#ff8790; color:#fff; font-weight:700; }
.danger-button:hover{ filter:brightness(1.1); }

select{
	font: inherit;
	color: #fff7c8;
	background:
		linear-gradient(45deg, transparent 50%, #ffe27f 50%) right 14px center / 7px 7px no-repeat,
		linear-gradient(135deg, #ffe27f 50%, transparent 50%) right 7px center / 7px 7px no-repeat,
		linear-gradient(180deg, rgba(35, 84, 159, 0.95), rgba(18, 24, 70, 0.98));
	border: 2px solid rgba(255, 226, 127, 0.8);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 3px 0 #0a1440;
	font-weight: 700;
	text-shadow: 0 2px 0 rgba(0,0,0,0.45);
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
select:focus{
	outline: 0;
	border-color: #95f1ff;
	box-shadow: 0 0 0 3px rgba(149, 241, 255, 0.25), inset 0 0 0 1px rgba(255,255,255,0.22), 0 3px 0 #0a1440;
}
select option{ color:#111127; background:#fff7c8; }
button:disabled{ cursor:not-allowed; opacity:.55; filter:grayscale(.35); transform:none; }