* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
	width: 100%; height: 100%; overflow: hidden; background: #03253f;
	font-family: system-ui, sans-serif;
	touch-action: none; overscroll-behavior: none;
}
#game { display: block; width: 100vw; height: 100vh; }
.overlay {
	position: fixed; inset: 0; display: flex; align-items: center;
	justify-content: center; background: rgba(2, 20, 35, 0.85); z-index: 10;
}
.hidden { display: none !important; }
#join-box { text-align: center; color: #d9f1ff; }
#join-box h1 { font-size: 2.2rem; margin-bottom: 1rem; }
#join-box input {
	font-size: 1.2rem; padding: 0.5rem 0.8rem; border-radius: 8px;
	border: none; outline: none; text-align: center;
}
#hues { display: flex; justify-content: center; gap: 8px; margin-top: 0.7rem; }
.hue {
	width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
	border: 2px solid rgba(255,255,255,0.25); transition: transform 0.1s, border-color 0.1s;
}
.hue:hover { transform: scale(1.15); }
.hue.selected { border-color: #fff; transform: scale(1.2); }
#touchui {
	position: fixed; right: 18px; bottom: 18px; z-index: 7;
	display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.tbtn {
	width: 60px; height: 60px; border-radius: 50%; font-size: 1.6rem;
	background: rgba(2, 20, 35, 0.55); border: 2px solid rgba(255,255,255,0.3);
	display: flex; align-items: center; justify-content: center;
	user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.tbtn.big { width: 76px; height: 76px; font-size: 2rem; }
.tbtn:active { background: rgba(29,180,160,0.5); }
#join-box button {
	display: block; margin: 1rem auto 0; font-size: 1.2rem;
	padding: 0.5rem 1.5rem; border-radius: 8px; border: none; cursor: pointer;
	background: #1db4a0; color: #032; font-weight: bold;
}
#join-box .hint { margin-top: 0.6rem; font-size: 0.85rem; opacity: 0.7; }
#species {
	display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 10px; margin: 1.2rem 0 0.4rem; max-width: 760px;
}
@media (max-width: 700px) { #species { grid-template-columns: repeat(2, 1fr); } }
.sp {
	border: 2px solid rgba(255,255,255,0.15); border-radius: 12px;
	padding: 10px 8px; cursor: pointer; background: rgba(255,255,255,0.05);
	transition: border-color 0.15s, background 0.15s; user-select: none;
}
.sp:hover { background: rgba(255,255,255,0.12); }
.sp.selected { border-color: #1db4a0; background: rgba(29,180,160,0.18); }
.sp .ico { font-size: 1.8rem; }
.sp b { display: block; margin: 2px 0 6px; }
.sp small { display: block; font-size: 0.72rem; line-height: 1.35; text-align: left; }
.sp .pro { color: #9ef0b0; }
.sp .con { color: #ffb4a8; margin-top: 3px; }
#hud {
	position: fixed; left: 16px; bottom: 16px; color: #d9f1ff; z-index: 5;
	text-shadow: 0 1px 3px #000;
}
#hud #stats { font-size: 1.1rem; margin-bottom: 2px; }
#hud #rank { font-size: 0.85rem; opacity: 0.85; margin-bottom: 6px; color: #ffd34d; }
#shield-wrap {
	width: 220px; height: 5px; background: rgba(255,255,255,0.15);
	border-radius: 3px; overflow: hidden; margin-bottom: 3px;
}
#shield { height: 100%; width: 0; background: #7fe3ff; transition: width 0.15s linear; }
#stam-wrap {
	width: 220px; height: 10px; background: rgba(255,255,255,0.2);
	border-radius: 5px; overflow: hidden;
}
#stam { height: 100%; width: 100%; background: #ffd34d; transition: width 0.1s linear; }
#lb {
	position: fixed; right: 16px; top: 16px; color: #d9f1ff; z-index: 5;
	background: rgba(2, 20, 35, 0.5); padding: 10px 14px; border-radius: 10px;
	min-width: 180px; font-size: 0.9rem; text-shadow: 0 1px 2px #000;
}
#lb h3 { font-size: 0.95rem; margin-bottom: 4px; }
#lb ol { padding-left: 1.4em; }
#lb .hof-title { margin-top: 8px; color: #ffd34d; }
#feed {
	position: fixed; top: 16px; left: 16px; z-index: 5; color: #d9f1ff;
	font-size: 0.85rem; text-shadow: 0 1px 2px #000; pointer-events: none;
}
#feed .entry {
	background: rgba(2, 20, 35, 0.45); border-radius: 6px; padding: 3px 8px;
	margin-bottom: 4px; transition: opacity 0.6s; max-width: 340px;
}
#statpanel {
	position: fixed; left: 16px; bottom: 90px; z-index: 6; color: #d9f1ff;
	background: rgba(2, 20, 35, 0.65); border-radius: 10px; padding: 10px 12px;
	font-size: 0.85rem; text-shadow: 0 1px 2px #000;
	border: 1px solid rgba(29,180,160,0.6);
}
#statpts { font-weight: bold; margin-bottom: 6px; color: #9ef0b0; }
#statpanel .stat {
	display: grid; grid-template-columns: 1.2em 7.5em 4.5em auto;
	gap: 6px; align-items: center; padding: 3px 4px; border-radius: 6px;
	cursor: pointer; user-select: none;
}
#statpanel .stat:hover { background: rgba(255,255,255,0.12); }
#statpanel .stat.maxed { opacity: 0.45; cursor: default; }
#statpanel .key {
	background: rgba(255,255,255,0.15); border-radius: 4px; text-align: center;
	font-weight: bold; font-size: 0.8rem;
}
#statpanel .pips { letter-spacing: 2px; color: #ffd34d; }
#statpanel .fx { font-size: 0.7rem; opacity: 0.65; }
#toast {
	position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
	color: #ffb4b4; font-size: 1.4rem; text-shadow: 0 1px 4px #000; z-index: 6;
	transition: opacity 0.5s; opacity: 0; pointer-events: none;
}