:root {
	--padding: min(1.2vw, 1.2vh);
}

#menu-buttons #open-updates { display: none; }

.main {
	display: flex; flex-direction: column; align-items: center;
	gap: 1em; padding: 1em;
	max-width: 900px;
}

.ship-table table, .relationship-list, #info, #mail-form {
	background: var(--white);
	border: var(--d-pink) var(--menu-border) solid;
	border-radius: calc(var(--menu-border) * 3);
	moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	color: var(--pink);
	strong, b, header, h3 { color: var(--d-pink); }
}
.relationship-list, #info, #mail-form {
	padding: min(2vw,calc(var(--menu-border) * 4));
}
.relationship-list, #info, .ship-table, #mail-form, #letter-display, #inbox .box { filter: drop-shadow(3px 5px var(--l-pink)); }

.relationship-list { flex-grow: 1; }

/* middle section */
#middle {
	display: flex; gap: 1em; width: 100%;
	@media screen and (width < 700px) { flex-direction: column; }
}

#info { flex-grow: 1;}
#info header { font-size: 1.5em; font-weight: bold; text-transform: uppercase; }

/* INBOX STATS */
@media screen and (width >= 700px) {
	#inbox { width: 320px; flex-shrink: 0; }
}
#inbox header { width: 100%; text-align: center; }
#inbox .box {
	margin: 0 auto;
	padding: var(--padding);
	/* put the border/padding inside instead of outside */
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	border: var(--menu-border) var(--d-pink) solid;
	color: var(--d-pink);
	text-align: center;
	font-size: 1rem;
	webkit-box-sizing: border-box; box-sizing: border-box;
	background: var(--diagonal-stripes);
	background-blend-mode: screen;
	font-weight: bold;
}
#inbox .box > * { filter: drop-shadow(0 0 2px var(--white)) drop-shadow(0 0 4px var(--white)); }
#inbox .box:before { /* pastel overlay */
	content: '';
	position: absolute; top: 0; left: 0;
	z-index: -1;
	width: 100%; height: 100%;
	background: var(--ll-pink); opacity: .85;
	mix-blend-mode: screen;
	border-radius: inherit;
}
#inbox .box:first-child { border-radius: calc(var(--menu-border) * 3) calc(var(--menu-border) * 3) 0 0; }
#inbox .box:last-child { border-radius: 0 0 calc(var(--menu-border) * 3) calc(var(--menu-border) * 3); }
#inbox .box:not(:first-child) { border-top: none; }
#inbox .box .title {
	margin: 0;
	text-align: center; text-transform: uppercase;
	letter-spacing: .05em;
	font-family: "Super Comic", sans-serif;
}
#inbox .box > .wrapper {
	display: inline-block;
}
#inbox .box .icon { height: 1.5rem; }
#inbox .box .item-stat {
	max-width: max(2em, min(25%, 8vh));
	aspect-ratio: 1;
	font-size: 1.15em;
	padding: .2em; padding-bottom: 0;
	/* put the border/padding inside instead of outside */
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#inbox .box .item-stat img {
	width: auto; max-width: 100%;
}

/* current status */
.ship-table table { padding: min(1.5vw,calc(var(--menu-border) * 2)); }
.ship-table th, .ship-table td { padding: min(1vw,.25em); text-align: center; max-width: 68vw; }
.ship-table th:first-child { text-align: right; padding-left: 0; }
.ship-table tr:first-child th { padding-top: 0; }

.ship-table td:nth-child(2) { background: var(--l-pink); }
.ship-table td:nth-child(3) { background: var(--orange); }
.ship-table td:nth-child(4) { background: var(--yellow); }
.ship-table td:nth-child(5) { background: var(--green); }
.ship-table td:nth-child(6) { background: var(--l-blue); }
.ship-table td:nth-child(7) { background: var(--l-purple); }

.ship-table img { max-width: 100%; filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white); }

.emoji, .relationship-list img { height: 1em; margin-bottom: -.15em; }

#current {
	display: flex;
	gap: 1em;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}

h3 { margin-bottom: .25em; margin-top: .5em; }
h2 { margin-bottom: .25em; }
h2:first-child, #current h3:first-child { margin-top: 0px; }
p:last-child { margin-bottom: .15em; }

#mail {
	display: flex;
	gap: 1em;
	@media screen and (width <= 700px) { flex-wrap: wrap; justify-content: center; }
	@media screen and (width > 700px) { flex-wrap: no-wrap; justify-content: space-between; align-items: center; }
}

#mail-form {
	margin-bottom: 0px;
	flex-shrink: 1;
}
#mail-form .button-list {
	display: flex; flex-wrap: wrap;
}
#mail-form .name {
	position: relative;
	display: block;
	color: var(--white);
	padding: .15em .5em;
	border-radius: .75em;
	border: var(--menu-border) var(--white) solid;
	moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	flex-grow: 1; max-width: 50%;
	text-align: center;
}
#mail-form .name:has(input:checked) {
	border-color: var(--dd-blue);
}
#mail-form .name input[type=radio] {
	position: absolute;
	left: 0; top: 0;
	opacity: 0; margin: 0;
	width: 100%; height: 100%;
}
#mail-form button[type=submit] {
	margin-top: .5em;
	background: var(--pink);
	border-radius: .5em;
	padding: .25em .75em;
	color: var(--white);
}

#letter-display {
	position: relative;
	width: min(90%,max(200px,min(60%,500px)));
	@media screen and (width >= 700px) { max-width: min(75vh,40vw); }
	aspect-ratio: 1;
	flex-shrink: 0;
}
#letter-display img:not(.type) { position: absolute; top: 0; left: 0; }
#letter-display img { max-width: 100%; user-select: none; pointer-events: none; }