/* Her flip phone: in the corner of her room, and open as a screen with her contacts and their texts */

.phone-button {
	position: absolute;
	right: 16px;
	bottom: 22px;
	width: 70px;
	height: 115px;
	padding: 0;
	border: 0;
	background: none;
	filter: drop-shadow(4px 4px 0 rgba(59, 31, 92, 0.35));
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.phone-button svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
}

.phone-button .badge {
	top: -6px;
	right: -6px;
}

/* A new text: the phone buzzes in whole-pixel steps every few seconds */
.phone-button.ringing {
	animation: buzz 2.6s steps(1, end) infinite;
}

@keyframes buzz {
	0%, 70% { transform: none; }
	72% { transform: translateX(-4px) rotate(-4deg); }
	75% { transform: translateX(4px) rotate(4deg); }
	78% { transform: translateX(-4px) rotate(-4deg); }
	81% { transform: translateX(4px) rotate(4deg); }
	84%, 100% { transform: none; }
}

/* ---------- Open phone ---------- */

.phone {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 30px;
	background: rgba(59, 31, 92, 0.45);
}

/* The screen, inside a pink pixel bezel */
.phone-device {
	display: flex;
	flex-direction: column;
	width: min(100%, 340px);
	height: min(100%, 600px);
	border: 3px solid var(--ink);
	background: var(--paper);
	box-shadow: 0 0 0 10px var(--pink), 0 0 0 13px var(--ink), 10px 10px 0 13px rgba(59, 31, 92, 0.35);
	font: 19.5px/1.35 "Cozette", monospace;
}

.phone-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 6px 6px 6px 10px;
	border-bottom: 3px solid var(--ink);
	background: #bfe6ff;
	font: 13px "Silkscreen", monospace;
}

.phone-head #phone-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phone-contact img {
	display: block;
	width: 28px;
	height: 28px;
	border: 2px solid var(--ink);
	object-fit: cover;
}

.phone-contact:empty {
	display: none;
}

.phone-head button {
	flex: none;
	width: 28px;
	height: 28px;
	border: 3px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font: 14px "Silkscreen", monospace;
	cursor: pointer;
}

/* Contacts: who has texted, newest first */
.contacts {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.contacts li + li {
	border-top: 3px dashed #e4d6f5;
}

.contact {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.contact img {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border: 3px solid var(--ink);
	object-fit: cover;
}

/* MKR's avatar: a heart seal on pink */
.contact-art {
	display: grid;
	place-items: center;
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border: 3px solid var(--ink);
	background: var(--pink);
}

.contact-art svg {
	display: block;
	width: 26px;
	height: 23px;
	shape-rendering: crispEdges;
}

.phone-contact .contact-art {
	width: 28px;
	height: 28px;
	border-width: 2px;
}

.phone-contact .contact-art svg {
	width: 16px;
	height: 14px;
}

.contact-name {
	grid-column: 2;
	font: 12px "Silkscreen", monospace;
}

.contact-preview {
	grid-column: 2;
	min-width: 0;
	overflow: hidden;
	color: #8a6aab;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.contact .unread {
	grid-column: 3;
	grid-row: 1 / span 2;
	width: 12px;
	height: 12px;
	background: #e0245e;
	box-shadow: 0 0 0 2px var(--ink);
}

.contacts-empty {
	padding: 24px 14px;
	color: #8a6aab;
	text-align: center;
}

.phone-chat .reward {
	align-self: flex-start;
}

/* The gift cards' pictures: the rocket's snapshot and the flower */
.reward-icon img,
.reward-icon .flower {
	display: block;
	width: 44px;
	height: 44px;
	image-rendering: pixelated;
	shape-rendering: crispEdges;
}

.phone-chat .reward:disabled {
	cursor: default;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.phone-button.ringing {
		animation: none;
	}
}