/* WVU visual identity colors */
:root {
	--wvu-gold: #EEAA00;
	--wvu-blue: #002855;
	--white: #FFFFFF;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--wvu-blue);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

main {
	width: 100%;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.logo {
	width: 220px;
	max-width: 100%;
	height: auto;
}

.user {
	margin: 0;
	color: var(--white);
}

.signin {
	width: 100%;
	padding: 12px;
	border-radius: 6px;
	background: var(--wvu-gold);
	color: var(--wvu-blue);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.signin:hover {
	background: #ffbb1a;
}

/* Signed-in pages */
main.wide {
	max-width: 560px;
	gap: 16px;
}

.logo.small {
	width: 96px;
}

.elo {
	margin: -12px 0 8px;
	color: var(--wvu-gold);
	font-size: 3rem;
	font-weight: 700;
}

.signin.outline {
	background: transparent;
	border: 2px solid var(--wvu-gold);
	color: var(--wvu-gold);
}

.signin.outline:hover {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

.quiet {
	color: var(--white);
	opacity: 0.7;
	font-size: 0.9rem;
	text-decoration: none;
}

.quiet:hover {
	opacity: 1;
}

/* Last 5 matches */
.matches {
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.matches li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.result {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
}

.result.win {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

.result.loss {
	background: rgba(255, 255, 255, 0.2);
}

.opponent {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.opponent small {
	opacity: 0.7;
}

.change {
	font-weight: 700;
}

/* Leaderboard */
.tabs {
	display: flex;
	gap: 8px;
}

.tabs a {
	padding: 8px 14px;
	border-radius: 6px;
	color: var(--white);
	text-decoration: none;
	opacity: 0.7;
}

.tabs a.active {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
	font-weight: 700;
	opacity: 1;
}

.table-wrap {
	width: 100%;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	color: var(--white);
}

th,
td {
	padding: 10px 8px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	white-space: nowrap;
}

th {
	color: var(--wvu-gold);
	font-size: 0.85rem;
}

td.name {
	width: 100%;
	white-space: normal;
}

/* Report match form */
form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

select,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="datetime-local"] {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid transparent;
	border-radius: 6px;
	background: var(--white);
	font-size: 1rem;
}

select:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="datetime-local"]:focus {
	outline: none;
	border-color: var(--wvu-gold);
}

.choice {
	display: flex;
	gap: 8px;
}

button.signin {
	border: none;
	cursor: pointer;
}

/* Matches waiting on a report */
.pending,
.waiting {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border-radius: 6px;
	color: var(--white);
}

.pending {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 2px solid var(--wvu-gold);
}

.pending p {
	margin: 0;
}

.pending small,
.waiting small {
	display: block;
	opacity: 0.7;
}

.pending form {
	flex: 1;
}

.pending button {
	width: 100%;
	padding: 10px;
	border: 2px solid var(--wvu-gold);
	border-radius: 6px;
	background: transparent;
	color: var(--wvu-gold);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.pending button:hover {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

/* The Confirm step after picking I Won / I Lost */
.pick.confirm,
.pending button.confirm {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

.confirm-prompt {
	margin: 0;
	font-weight: 700;
}

.confirm-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.confirm-step .choice button {
	flex: 1;
}

/* Make the hidden attribute win over display: flex and friends. */
[hidden] {
	display: none !important;
}

.waiting {
	background: rgba(255, 255, 255, 0.08);
}

/* Room list */
.rooms {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.room-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 2px solid transparent;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	text-decoration: none;
}

.room-link:hover {
	background: rgba(255, 255, 255, 0.14);
}

.room-link.mine {
	border-color: var(--wvu-gold);
}

.tag {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	font-weight: 700;
}

.tag.gold {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

/* Room */
.room {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.games {
	width: 100%;
	display: flex;
	gap: 8px;
}

.chip {
	flex: 1;
	padding: 10px;
	border: 2px solid var(--wvu-gold);
	border-radius: 6px;
	color: var(--wvu-gold);
	text-align: center;
	font-weight: 700;
}

.chip.on {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

.chip.clickable {
	cursor: pointer;
}

.chip.clickable:hover {
	background: rgba(238, 170, 0, 0.15);
}

.players {
	width: 100%;
	display: flex;
	gap: 12px;
}

.seat {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16px 8px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	text-align: center;
	overflow-wrap: anywhere;
}

.seat small {
	color: var(--wvu-gold);
	font-weight: 700;
}

.seat.empty {
	border: 2px dashed rgba(255, 255, 255, 0.3);
	background: transparent;
	opacity: 0.7;
}

.seat.breaks,
.seat.ready {
	border-color: var(--wvu-gold);
}

.seat .tag {
	margin-top: 4px;
}

.stakes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 10px;
	font-size: 0.85rem;
	font-weight: 700;
}

.stakes .gain {
	color: var(--wvu-gold);
}

.stakes .lose {
	color: #ffb4a8;
}

.vs {
	align-self: center;
	color: var(--white);
	opacity: 0.6;
}

/* Coin flip */
.flip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	perspective: 800px;
}

.coin {
	position: relative;
	width: 140px;
	height: 140px;
	transform-style: preserve-3d;
}

.face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border: 6px solid #c98f00;
	border-radius: 50%;
	background: var(--wvu-gold);
	color: var(--wvu-blue);
	font-weight: 700;
	text-align: center;
	overflow-wrap: anywhere;
	backface-visibility: hidden;
}

.face.back {
	transform: rotateY(180deg);
}

.breaker {
	min-height: 1.4em;
	margin: 0;
	color: var(--wvu-gold);
	font-size: 1.2rem;
	font-weight: 700;
}

.timer {
	margin: 0;
	color: var(--white);
	font-size: 3.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.timer.stopped {
	color: var(--wvu-gold);
}

.actions {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.actions .choice {
	width: 100%;
}

.signin:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pick {
	flex: 1;
	padding: 12px;
	border: 2px solid var(--wvu-gold);
	border-radius: 6px;
	background: transparent;
	color: var(--wvu-gold);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.pick:hover {
	background: var(--wvu-gold);
	color: var(--wvu-blue);
}

.quiet-btn {
	border: none;
	background: none;
	color: var(--white);
	opacity: 0.7;
	font-size: 0.9rem;
	cursor: pointer;
}

.quiet-btn:hover {
	opacity: 1;
}

.error {
	margin: 0;
	color: #ffb4a8;
}

#empty {
	margin: 0;
}

/* Player stats on the match history page */
.stats {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 4px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.stat strong {
	color: var(--wvu-gold);
	font-size: 1.5rem;
}

.stat small {
	opacity: 0.7;
	font-size: 0.8rem;
}

@media (max-width: 380px) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Head to head */
.picker {
	width: 100%;
}

.h2h {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.h2h-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	border: 2px solid var(--wvu-gold);
	border-radius: 8px;
	color: var(--white);
}

.h2h-side {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	overflow-wrap: anywhere;
}

.h2h-side small {
	color: var(--wvu-gold);
	font-weight: 700;
}

.h2h-record {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wvu-gold);
	font-size: 2.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.h2h-record span {
	color: var(--white);
	opacity: 0.5;
	font-size: 1.6rem;
}

.h2h-games {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 8px;
}

.h2h-games li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	font-size: 0.85rem;
}

.h2h-games strong {
	color: var(--wvu-gold);
	font-size: 1.1rem;
}

/* Profile pictures */
.avatar {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border: 2px solid var(--wvu-gold);
	border-radius: 50%;
	object-fit: cover;
}

.avatar.initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wvu-gold);
	color: var(--wvu-blue);
	font-size: 1.4rem;
	font-weight: 700;
}

.profile {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.profile .avatar {
	width: 140px;
	height: 140px;
	font-size: 3rem;
}

.profile .user {
	font-size: 1.3rem;
	font-weight: 700;
}

.profile .elo {
	margin: 0;
	font-size: 1.5rem;
}

.profile form {
	align-items: center;
}

.upload input {
	display: none;
}

.upload {
	cursor: pointer;
}

.h2h-meta {
	margin: 0;
	color: var(--white);
	opacity: 0.7;
	font-size: 0.85rem;
	text-align: center;
}

/* Admin panel */
main.admin {
	max-width: 960px;
	align-items: stretch;
	gap: 16px;
	color: var(--white);
}

.admin-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wvu-gold);
}

.admin-nav strong {
	color: var(--wvu-gold);
	font-size: 1.2rem;
}

.admin-nav a,
main.admin td a,
.admin-note a {
	color: var(--wvu-gold);
}

.admin-title {
	margin: 0;
	font-size: 1.6rem;
}

.admin-note {
	margin: 0;
	opacity: 0.75;
	font-size: 0.9rem;
}

.admin-ok {
	margin: 0;
	color: var(--wvu-gold);
	font-weight: 700;
}

.admin-search {
	flex-direction: row;
	flex-wrap: wrap;
}

.admin-search input,
.admin-search select {
	flex: 1;
	min-width: 180px;
	width: auto;
}

.admin-search .signin {
	width: auto;
	padding: 12px 20px;
}

.admin-form {
	padding: 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
}

.admin-form h2 {
	margin: 0;
	font-size: 1.1rem;
}

.admin-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.9rem;
}

.admin-form label.admin-check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.admin-form.danger {
	border: 2px solid #ffb4a8;
}

.danger-btn {
	padding: 12px;
	border: none;
	border-radius: 6px;
	background: #ffb4a8;
	color: #4a0d00;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}