/* ==========================================================================
   PORTRAIT
   ========================================================================== */


.portrait-game {
	width: 100%;
}


/* --------------------------------------------------------------------------
   FRAME
   -------------------------------------------------------------------------- */

.portrait-frame {
	position: relative;

	width: 100%;
	aspect-ratio: 1 / 1;
}


/* --------------------------------------------------------------------------
   GRID
   -------------------------------------------------------------------------- */

.portrait-grid {
	display: grid;

	grid-template-columns: repeat(14, 1fr);
	grid-template-rows: repeat(14, 1fr);

	width: 100%;
	aspect-ratio: 1 / 1;
}


/* --------------------------------------------------------------------------
   PIXELS
   -------------------------------------------------------------------------- */

.portrait-pixel {
	position: relative;

	appearance: none;

	width: 100%;
	aspect-ratio: 1 / 1;

	padding: 0;
	margin: 0;

	border: 0;

	background: var(--color-accent);

	cursor: pointer;

	overflow: hidden;
}


/* GREY PORTRAIT LAYER */

.portrait-pixel::after {
	content: "";

	position: absolute;
	inset: 0;

	background: var(--pixel-grey);

	opacity: 1;

	transition:
		opacity 450ms ease;
}


/* REVEALED */

.portrait-pixel.is-revealed::after {
	opacity: 0;
}


/* WINNING PIXEL */

.portrait-pixel.is-winner {
	background: var(--color-disrupt);
}


/* --------------------------------------------------------------------------
   RESULT OVERLAY
   -------------------------------------------------------------------------- */

.portrait-result {
	position: absolute;
	z-index: 10;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(245, 243, 238, 0.5);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 400ms ease,
		visibility 400ms ease;
}

.portrait-result.is-visible {
	opacity: 1;
	visibility: visible;
}


.portrait-result-content {
	text-align: center;
}


.portrait-result-message {
	margin: 0 0 20px;

	font-family: var(--font-condensed);
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 500;

	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   RESTART
   -------------------------------------------------------------------------- */

.portrait-restart {
	appearance: none;

	padding: 0;

	border: 0;
	background: none;

	color: var(--color-accent);

	font-family: var(--font-condensed);
	font-size: 0.875rem;
	font-weight: 500;

	letter-spacing: 0.05em;
	text-transform: uppercase;

	cursor: pointer;
}


/* --------------------------------------------------------------------------
   GAME UI
   -------------------------------------------------------------------------- */

.portrait-game {
	position: relative;

	width: 100%;
}


/* --------------------------------------------------------------------------
   GAME DISCOVERY
   -------------------------------------------------------------------------- */

.portrait-game-ui {
	opacity: 0;

	transition:
		opacity 300ms ease;
}

.portrait-game-ui.is-active {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   TOP / BOTTOM SHARED
   -------------------------------------------------------------------------- */

.portrait-game-top,
.portrait-game-bottom {
	position: absolute;
	z-index: 5;

	left: 0;

	width: 100%;

	font-size: 0.875rem;

	pointer-events: none;
}


/* --------------------------------------------------------------------------
   TOP
   -------------------------------------------------------------------------- */

.portrait-game-top {
	top: -32px;

	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.portrait-game-top strong {
	font-family: var(--font-pixel);
	font-weight: 600;

	letter-spacing: 0;
}

.portrait-game-top > :first-child {
	text-align: left;
}

.portrait-game-top > :last-child {
	text-align: right;
}


/* --------------------------------------------------------------------------
   BOTTOM
   -------------------------------------------------------------------------- */

.portrait-game-bottom {
	bottom: -32px;

	display: grid;

	grid-template-columns:
		1fr
		1fr
		1fr;

	align-items: center;
}

.portrait-game-bottom > :first-child {
	text-align: left;
}

.portrait-game-bottom > :nth-child(2) {
	text-align: center;
}

.portrait-game-bottom > :last-child {
	text-align: right;
}


/* --------------------------------------------------------------------------
   HINT
   -------------------------------------------------------------------------- */

.portrait-game-hint {
	font-family: var(--font-pixel);
	font-weight: 600;

	opacity: 0;

	transform: translateY(-3px);

	transition:
		opacity 200ms ease,
		transform 200ms ease;
}

.portrait-game-hint.is-active {
	opacity: 1;

	transform: translateY(0);
}