/* === Base === */
body {
background: #181c22 url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
color: #e0e6ed;
position: relative;
}

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(24, 28, 34, 0.82);
z-index: 0;
pointer-events: none;
}

.container, #footer, .modal-content, #playtime-summary.well, .avatar-card {
position: relative;
z-index: 1;
}

/* === Links === */
a, a:visited {
color: #00bfff;
}
a:hover {
color: #66d9ff;
}

/* === Hero Picker (legacy) === */
.hero-pic {
width: 170px;
text-align: center;
}
.hero-pic img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 140px;
max-height: 40px;
}
.hero-pic label {
width: 140px;
}
.hero-pic * {
cursor: pointer;
}
input[type=checkbox].invisible-friend {
display: none;
}

p.res-answer {
padding: 15px;
}
div#disclaimer {
margin-top: 20px;
}

/* === Summary === */
#playtime-summary.well {
background: rgba(35, 42, 52, 0.85);
border: 1px solid #2d3748;
border-radius: 8px;
color: #e0e6ed;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* === Avatar Grid Cards === */
.avatar-row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin-bottom: 18px;
}
.custom-col-7 {
	flex: 0 0 calc(100% / 7);
	max-width: calc(100% / 7);
	box-sizing: border-box;
	padding-left: 6px;
	padding-right: 6px;
}
.avatar-card {
	background: rgba(35, 42, 52, 0.8);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	padding: 12px 6px 10px 6px;
	margin-bottom: 0;
	transition: box-shadow 0.2s, background 0.2s;
	color: #e0e6ed;
	border: 1px solid #2d3748;
}
.avatar-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
	background: rgba(40, 48, 64, 0.8);
}

.avatar-img {
border-radius: 8px;
border: 2px solid #2d3748;
margin-bottom: 6px;
transition: border-color 0.2s;
background: transparent;
}
.avatar-img:hover {
border-color: #00bfff;
}

/* === Footer === */
#footer {
margin-top: 40px;
padding: 20px 0 10px 0;
border-top: 2px solid #232a34;
text-align: center;
background: transparent;
font-size: 15px;
color: #b0b8c1;
}

#footer .tahiti-logo {
display: block;
margin: 0 auto 10px auto;
max-width: 120px;
height: auto;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
background: transparent;
box-shadow: none;
border: none;
}

/* === Modal === */
.modal-content {
background: #232a34;
color: #e0e6ed;
border-radius: 10px;
border: 1px solid #2d3748;
}
.modal-header, .modal-footer {
border-color: #2d3748;
background: #232a34;
}
.modal-title {
color: #e0e6ed;
}

/* === Result transition (legacy) === */
div#result {
transition-property: all;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
div#result.collapsed {
overflow-y: hidden;
max-height: 0;
color: rgba(0, 0, 0, 0);
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}