/* Codegame feature styles (hub, clash detail, play IDE). */

.codegame-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1rem;
}

.codegame-table {
	width: 100%;
	border-collapse: collapse;
}

.codegame-table th,
.codegame-table td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.codegame-table th[data-sort] {
	cursor: pointer;
	user-select: none;
}

.codegame-table th[data-sort]:hover {
	text-decoration: underline;
}

.codegame-muted {
	opacity: 0.7;
}

.codegame-push-right {
	margin-left: auto;
}

/* style.css's .btn-primary is width:40% (form button); the hub button should hug its text */
#loadLinkBtn {
	width: auto;
}

.codegame-top-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.codegame-top-nav {
	display: flex;
	gap: 0.4rem;
}

.codegame-you {
	font-style: italic;
	font-weight: 700;
}

.codegame-error {
	color: #c0392b;
	min-height: 1.2em;
}

.codegame-attribution {
	font-size: 0.95rem;
	opacity: 0.85;
	margin: 0.25rem 0 1rem;
}

.codegame-stats {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.codegame-stats .stat-value {
	font-size: 1.4rem;
	font-weight: 600;
	display: block;
}

.codegame-statement-frame {
	width: 100%;
	min-height: 320px;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
	background: #fff;
}

.codegame-lang-tabs {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.codegame-lang-tabs button.active {
	font-weight: 700;
	text-decoration: underline;
}

/* Play page: full-screen IDE, no site chrome */

body.codegame-ide-body {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Compact controls: the site's default .btn styles are oversized for an IDE */
.codegame-ide .btn,
.codegame-ide .btn-small {
	width: auto;
	padding: 3px 10px;
	font-size: 0.8rem;
	font-weight: 500;
	border-radius: 4px;
	white-space: nowrap;
}

.codegame-ide select {
	font-size: 0.85rem;
	padding: 2px 6px;
	max-width: 170px;
}

.codegame-ide-toolbar {
	flex-wrap: nowrap;
}

.codegame-ide-toolbar .codegame-counter {
	white-space: nowrap;
	font-size: 0.8rem;
}

.codegame-ide-toolbar #actionStatus {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.8rem;
}

.codegame-ide {
	flex: 1;
	display: flex;
	min-height: 0;
}

.codegame-ide-left {
	display: flex;
	flex-direction: column;
	min-width: 160px;
	min-height: 0;
	border-right: none;
}

.codegame-ide-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

#testsPane {
	flex: 1;
}

.codegame-ide-topbar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.6rem;
	border-bottom: 1px solid #d5d5e0;
	flex: none;
	font-size: 0.9rem;
	background: #f2f2f7;
	color: #1c1c28;
}

.codegame-ide-title {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.codegame-ide-frame {
	flex: 1;
	min-height: 0;
	width: 100%;
	border: 0;
	background: #fff;
}

.codegame-pane-scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0.4rem 0.5rem;
	font-size: 0.85rem;
	background: #f7f7fb;
	color: #1c1c28;
}

.codegame-split-v {
	flex: none;
	width: 6px;
	cursor: col-resize;
	background: rgba(127, 127, 127, 0.25);
}

.codegame-split-h {
	flex: none;
	height: 6px;
	cursor: row-resize;
	background: rgba(127, 127, 127, 0.25);
}

.codegame-split-v:hover,
.codegame-split-h:hover {
	background: rgba(127, 127, 127, 0.55);
}

.codegame-ide-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.codegame-ide-toolbar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.6rem;
	flex: none;
	border-bottom: 1px solid #d5d5e0;
	background: #f2f2f7;
	color: #1c1c28;
}

.codegame-ide-editor {
	flex: 1;
	min-height: 0;
}

.codegame-ide-editor .CodeMirror {
	height: 100%;
	font-size: 14px;
	font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
	/* JetBrains Mono ligates !=, =>, etc. into single glyphs; misleading when
	   counting bytes/chars, so render literal characters. */
	font-variant-ligatures: none;
	font-feature-settings: 'liga' 0, 'calt' 0;
}

.codegame-submit-banner {
	margin: 0.4rem 0.6rem;
	background: #ffffff;
	border: 1px solid #d5d5e0;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

.codegame-submit-banner.codegame-result-pass {
	border-left: 4px solid #0f6b3a;
}

.codegame-submit-banner.codegame-result-fail {
	border-left: 4px solid #b02a1e;
}

/* Test list items */

.codegame-test-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.codegame-test-item {
	border: 1px solid #d5d5e0;
	border-left: 4px solid #b8b8c8;
	border-radius: 4px;
	padding: 0.35rem 0.5rem;
	background: #ffffff;
	color: #1c1c28;
}

.codegame-test-item.pass {
	border-left-color: #0f6b3a;
	background: #e8f6ee;
}

.codegame-test-item.fail {
	border-left-color: #b02a1e;
	background: #fdecea;
}

.codegame-test-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.codegame-test-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #5a5a70;
	margin-top: 0.35rem;
}

.codegame-test-item pre {
	margin: 0.1rem 0 0;
	white-space: pre;
	overflow-x: auto;
	font-size: 0.8rem;
	color: #1c1c28;
}

.codegame-output-entry {
	border-bottom: 1px solid #d5d5e0;
	padding: 0.3rem 0;
}

.codegame-output-entry pre {
	white-space: pre;
	overflow-x: auto;
	font-size: 0.8rem;
	margin: 0.1rem 0 0;
}

.codegame-output-stderr {
	color: #b02a1e;
}

.codegame-result-pass {
	color: #0f6b3a;
	font-weight: 700;
}

.codegame-result-fail {
	color: #b02a1e;
	font-weight: 700;
}

.codegame-counter {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #1c1c28;
}