@import url("fonts/font-awesome.css");
@import url("fonts/typeface.css");

/* ========================================
   GameTime3 - Game Webapp Stylesheet
   ======================================== */

/* --- Custom Properties --- */
:root {
	/* Backgrounds (layered depth) */
	--color-bg1: #0f1117;
	--color-bg2: #1a1f2e;
	--color-bg3: #242b3d;
	--color-bg4: #2e3750;

	/* Text */
	--color-text: #e2e8f0;
	--color-text-dim: #8b9cc0;
	--color-text-accent: #c4b5d8;

	/* Borders & effects */
	--color-border: rgba(139, 156, 192, 0.15);
	--color-border-focus: rgba(139, 156, 192, 0.4);
	--color-glow: rgba(100, 130, 200, 0.15);

	/* Team colors */
	--team-red: #ff4444;
	--team-blue: #4488ff;
	--team-green: #44dd44;
	--team-yellow: #ffdd44;

	/* Webbits overrides */
	--wb-color-lite: var(--color-bg3);
	--wb-color-dark: #5577cc;
	--wb-color-bg: var(--color-bg2);
	--wb-color-elem: var(--color-text);
	--wb-anim-time: 0.15s;

	/* Fonts */
	--font-body: 'SourceSansPro', system-ui, sans-serif;
	--font-heading: 'Lato', system-ui, sans-serif;
}

/* --- Base --- */
html {
	font-size: clamp(15px, 2vw, 18px);
	height: 100%;
}

body {
	font-family: var(--font-body);
	background: var(--color-bg1);
	color: var(--color-text);
	line-height: 1.5;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-text);
	margin: 0;
	line-height: 1.2;
}

p { margin: 0; }

a { color: var(--color-text-accent); }
a:visited { color: var(--color-text-dim); }

strong {
	font-weight: bold;
	font-size: 1.1rem;
}

ul li { list-style-type: none; }

/* --- Utility Classes --- */
.hide { display: none !important; }

/* --- Form Controls --- */
input, select, textarea {
	font-family: var(--font-body);
	font-size: 0.9rem;
	background: var(--color-bg1);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 0.35rem 0.5rem;
	cursor: pointer;
}

input:focus, select:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 2px var(--color-glow);
}

input[type="number"] {
	width: 4em;
	text-align: center;
}

.wb-switch input { padding: 3px; }
.wb-check input, .wb-radio input { padding: 0; }
.wb-switch input { background-color: var(--color-bg1); }
.wb-switch input:checked { background-color: var(--color-text); }

/* Checkbox filled indicator when checked */
.wb-check input::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 1px;
	margin: 3px auto;
	transition: var(--wb-anim-time);
}
.wb-check input:checked::after {
	background: var(--color-text);
}

/* --- Buttons --- */
button {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	background: var(--color-bg3);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 0.5rem 1rem;
	cursor: pointer;
	transition: all 0.1s ease;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

button:hover:not(:disabled):not(.disabled) {
	background: var(--color-bg4);
	border-color: var(--color-border-focus);
	box-shadow: 0 0 12px var(--color-glow);
	transform: translateY(-1px);
}

button:active:not(:disabled):not(.disabled) {
	transform: translateY(1px) scale(0.98);
	box-shadow: none;
}

button:disabled, button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none !important;
}

button i { margin-right: 0.35rem; }

.button {
	font-weight: bold;
	transition: all 0.1s ease;
}

.button, .obj-controls {
	-webkit-touch-action: manipulation;
	touch-action: manipulation;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.button.obj_action {
	padding: 2em 1.5em;
	font-size: clamp(0.95rem, 3vw, 1.2rem);
}

.btn-danger {
	border-color: rgba(255, 68, 68, 0.3);
}

.btn-danger:hover:not(:disabled) {
	border-color: rgba(255, 68, 68, 0.5);
	box-shadow: 0 0 12px rgba(255, 68, 68, 0.15);
}

/* --- Hidden Default Host --- */
#default_host_id {
	position: absolute;
	left: -9999px;
	visibility: hidden;
}

/* --- Pages (shared) --- */
main {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

/* ========================================
   LOAD PAGE - Title Screen
   ======================================== */
#load {
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	gap: 1.25rem;
}

.load-brand {
	text-align: center;
	margin-bottom: 0.5rem;
}

.load-brand h3 {
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-shadow: 0 0 40px var(--color-glow);
}

.load-brand h3 i {
	margin-right: 0.3em;
	opacity: 0.7;
}

.load-brand p {
	font-size: 0.85rem;
	color: var(--color-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-top: 0.25rem;
}

.load-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	width: 100%;
	max-width: 600px;
}

.load-actions button {
	flex: 1 1 150px;
	padding: 0.6rem 1rem;
}

/* Preset list */
#game_presets {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 100%;
	max-width: 400px;
	overflow-y: auto;
	flex: 0 1 auto;
	max-height: 40vh;
	min-height: 0;
}

#game_presets label {
	display: block;
}

#game_presets button {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	text-align: center;
}

.selected {
	border-color: var(--color-text-accent) !important;
	box-shadow: 0 0 10px rgba(196, 181, 216, 0.2);
}

.load-footer {
	margin-top: auto;
	text-align: center;
	font-size: 0.75rem;
	color: var(--color-text-dim);
	opacity: 0.5;
	padding-top: 1rem;
}

.load-footer p { margin: 0.15rem 0; }

.load-footer a {
	color: var(--color-text-dim);
}

/* ========================================
   CONFIG PAGE - Fixed toolbar + scrollable content
   ======================================== */
#config {
	padding: 0;
}

#setup_controls {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-bg2);
	border-bottom: 1px solid var(--color-border);
	justify-content: center;
	z-index: 10;
}

#setup_controls button {
	flex: 1 1 auto;
	min-width: 80px;
}

/* Scrollable config body */
.config-scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem;
	-webkit-overflow-scrolling: touch;
}

.config-scroll > h1 {
	text-align: center;
	font-size: clamp(1.3rem, 4vw, 2rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 1rem;
}

/* Config sections */
#gamemode_universal,
#gamemode_typespecific {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 600px;
	margin: 0 auto 1rem;
	width: 100%;
}

/* Config line items (generated by JS templates) */
.line-item {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--color-bg2);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	color: var(--color-text-dim);
}

/* Label text (left side of line-item) */
.line-item h4,
.line-item > .label {
	flex: 1;
	text-align: left;
	font-size: 0.9rem;
	font-family: var(--font-body);
	color: var(--color-text-dim);
	min-width: 0;
}

/* Controls (right side of line-item) */
.line-item input,
.line-item select,
.line-item ul {
	flex: 0 0 auto;
}

/* Time field groups - kept together, right-justified */
.li-time {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--color-text-dim);
	font-size: 0.85rem;
}

.li-time-sep {
	opacity: 0.5;
	padding: 0 0.1rem;
}

/* Checkbox groups inside line-items */
.line-item ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}

.line-item .wb-check {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--color-text-dim);
	white-space: nowrap;
}

/* Switch toggle - right-justified */
.line-item.wb-switch input[type="checkbox"] {
	flex: 0 0 auto;
}

.full-row {
	width: 100% !important;
}

.full-row select, .full-row input {
	max-width: 200px;
	min-width: 45px;
}

.full-row ul {
	max-width: 320px;
}

.time-display {
	display: flex;
	align-items: baseline;
}

.time-display select {
	margin: 0 0.5rem;
}

/* ========================================
   GAME PAGE - Viewport-locked gameplay
   ======================================== */
#game {
	padding: 0.5rem;
	gap: 0.35rem;
}

#game > h1 {
	flex-shrink: 0;
	font-size: clamp(1.1rem, 4vw, 1.8rem);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Control bar */
#game_controls {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: center;
	padding: 0.25rem 0;
}

#game_controls button {
	padding: 0.35rem 0.7rem;
	font-size: clamp(0.7rem, 2vw, 0.85rem);
	min-width: 0;
	white-space: nowrap;
}

/* Game UI area - fills remaining space */
#game_ui {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	width: 100%;
	padding: 0.25rem 0;
}

#game_ui > div {
	width: 100%;
	max-width: 650px;
	text-align: center;
}

/* Game clock - scoreboard style */
#global_timer_container,
#countdown_timer_container {
	background: var(--color-bg1);
	border: 2px solid var(--color-border);
	border-radius: 8px;
	padding: 0.3rem 1rem;
	text-align: center;
}

#global_timer,
#countdown_timer {
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 9vw, 4rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--color-text);
	text-shadow: 0 0 30px var(--color-glow), 0 0 60px rgba(100, 130, 200, 0.08);
}

/* Status text (below clock) */
#status_container {
	padding: 0;
}
#status {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-text-dim);
}

/* Score blocks row */
.game-scores {
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	width: 100%;
}

.score-block {
	flex: 1;
	max-width: 180px;
	padding: 0.35rem 0.5rem;
	background: var(--color-bg2);
	border: 2px solid var(--team-color, var(--color-border));
	border-radius: 6px;
	text-align: center;
}

.score-label {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--team-color, var(--color-text-dim));
	margin-bottom: 0.1rem;
}

.score-value {
	font-family: var(--font-heading);
	font-size: clamp(1.3rem, 4vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.score-sub {
	font-size: 0.7rem;
	color: var(--color-text-dim);
	letter-spacing: 0.05em;
}

/* Action button row */
.game-actions {
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	width: 100%;
}

.game-actions label {
	flex: 1;
	max-width: 200px;
}

.game-actions button {
	width: 100%;
	padding: 1.2em 0.5em;
	font-size: clamp(0.8rem, 2.5vw, 1rem);
}

/* Respawn notification flash */
#respawn_notification_container {
	min-height: 1.2em;
}
#respawn_notification {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-accent);
}

/* ========================================
   Game Components
   ======================================== */

/* Progress Meter (KOTH capture, Disarm arm/disarm) */
.prog-meter {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.1rem, 3.5vw, 1.8rem);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	background: var(--color-bg2);
	margin-bottom: 0.5em;
	min-height: 2.2em;
}

.prog-meter.flash {
	background: #0a0a0a;
	color: #fefefe;
}

.prog-meter .prog-bar {
	position: absolute;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 0%;
	background: rgba(100, 160, 255, 0.25);
}

.prog-meter .status {
	position: relative;
	z-index: 1;
	min-height: 1em;
	padding: 0.25em 0.5em;
}

/* Team-colored progress bars */
.prog-bar.team-red { background: rgba(255, 68, 68, 0.35); }
.prog-bar.team-blue { background: rgba(68, 136, 255, 0.35); }
.prog-bar.team-green { background: rgba(68, 221, 68, 0.35); }
.prog-bar.team-yellow { background: rgba(255, 221, 68, 0.35); }

/* ========================================
   Team Colors
   ======================================== */
.team-red, .btn-team-red { --team-color: var(--team-red); }
.team-blue, .btn-team-blue { --team-color: var(--team-blue); }
.team-green, .btn-team-green { --team-color: var(--team-green); }
.team-yellow, .btn-team-yellow { --team-color: var(--team-yellow); }

.btn-team-red,
.btn-team-blue,
.btn-team-green,
.btn-team-yellow {
	border: 3px solid var(--team-color);
}

.team-red input[type="checkbox"],
.team-blue input[type="checkbox"],
.team-green input[type="checkbox"],
.team-yellow input[type="checkbox"] {
	border: 3px solid var(--team-color);
	border-radius: 3px;
}

/* ========================================
   3T Mode
   ======================================== */
#players_container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	width: 100%;
}

#players_container button {
	min-width: 70px;
	padding: 0.6rem 1rem;
	font-size: 0.95rem;
}

.eliminated {
	opacity: 0.35;
	text-decoration: line-through;
}

#role_reveal_container {
	padding: 1.5rem 1rem;
}

#role_reveal {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 6vw, 2.8rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-shadow: 0 0 25px var(--color-glow);
}

/* ========================================
   Responsive
   ======================================== */

/* Landscape tweaks - keep single column */
@media (orientation: landscape) and (min-width: 768px) {
	#game_ui > div {
		max-width: 700px;
	}
}

/* Portrait tweaks */
@media (orientation: portrait) {
	#game > h1 {
		font-size: clamp(1.2rem, 5vw, 1.6rem);
	}

	#players_container button {
		width: calc(50% - 0.25rem);
	}
}

/* Very short screens (landscape phone) */
@media (max-height: 500px) {
	#game > h1 {
		font-size: 0.9rem;
		padding: 0;
	}

	#game_controls button {
		padding: 0.2rem 0.5rem;
		font-size: 0.7rem;
	}

	.button.obj_action {
		padding: 1em 1em;
	}
}

/* Narrow screens */
@media (max-width: 480px) {
	.load-actions button {
		flex: 1 1 100%;
	}

	#setup_controls button {
		font-size: 0.75rem;
		padding: 0.4rem 0.6rem;
		min-width: 60px;
	}

	.line-item {
		gap: 0.4rem;
		padding: 0.4rem 0.5rem;
	}
}