/* ==========================================================================
   Meme-Maker.
   Chrome from the design's "Meme Maker" screen; the tool's own widgets keep
   the `ep-` prefix they were ported with, because the script writes that markup
   and renaming 1,100 lines to match a prefix would be a rewrite pretending to
   be a port.
   ========================================================================== */

.epi-meme {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 34px var(--gutter) 80px;
}

.epi-meme__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.epi-meme__cubes { display: flex; gap: 4px; }

.epi-meme__cube {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	animation: epi-flash-pulse 1.5s ease-in-out infinite;
}

.epi-meme__cube--red { background: var(--ui-bear); }
.epi-meme__cube--green { background: var(--ui-bull); animation-delay: 0.75s; }

.epi-meme__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.6px;
	text-transform: uppercase;
}

.epi-meme__chip {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.4px;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(47, 125, 255, 0.14);
	border: 1px solid rgba(47, 125, 255, 0.35);
	color: var(--ui-accent-soft);
	text-transform: uppercase;
}

.epi-meme__stand {
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-dim);
	margin-bottom: 28px;
	max-width: 60ch;
}

.epi-meme__grid {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.ep-maker__tools {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- upload ---------------------------------------------------------------- */

.epi-meme__upload {
	display: block;
	position: relative;
	cursor: pointer;
}

.epi-meme__upload input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.epi-meme__upload-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	border-radius: 13px;
	border: 1px dashed rgba(47, 125, 255, 0.5);
	background: rgba(47, 125, 255, 0.06);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.3px;
	color: #B3D2FF;
	text-transform: uppercase;
	transition: background 150ms ease;
	text-align: center;
	padding: 0 12px;
}

.epi-meme__upload:hover .epi-meme__upload-btn { background: rgba(47, 125, 255, 0.12); }

/* --- panels ---------------------------------------------------------------- */

.epi-meme__panel {
	border: 1px solid var(--line);
	border-radius: var(--r-rail);
	background: var(--bg-card);
	padding: 16px;
}

.epi-meme__panel-t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1.8px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.epi-meme__panel-add { display: flex; gap: 6px; }

.epi-meme__layers,
.epi-meme__props,
.epi-meme__opts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.epi-meme__props { max-height: 420px; overflow-y: auto; }

/* --- tool grid ------------------------------------------------------------- */

.ep-tools {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 12px;
}

.ep-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 58px;
	border-radius: var(--r-ctrl);
	border: 1px solid var(--line-strong);
	background: var(--bg-raised);
	color: var(--fg-dim);
	font-size: 16px;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.ep-tool em {
	font-family: var(--font-mono);
	font-size: 8.5px;
	font-style: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.ep-tool:hover { border-color: var(--line-hover); color: var(--fg); }

.ep-tool.is-active {
	border-color: rgba(47, 125, 255, 0.6);
	background: rgba(47, 125, 255, 0.12);
	color: #fff;
}

/* --- generated widgets (the script writes this markup) --------------------- */

.ep-group {
	border: 1px solid var(--line-soft);
	border-radius: var(--r-ctrl);
	background: rgba(255, 255, 255, 0.015);
	padding: 12px;
}

.ep-group__t {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.5px;
	color: var(--fg-faint);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.ep-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}

.ep-row:last-child { margin-bottom: 0; }

.ep-row__l {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.8px;
	color: var(--fg-mute);
	min-width: 74px;
}

.ep-range {
	flex: 1;
	accent-color: var(--ui-accent);
	min-width: 0;
}

.ep-color {
	width: 34px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

.ep-field,
.ep-unit select,
.ep-unit input {
	flex: 1;
	min-width: 0;
	height: 32px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--line-strong);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: 11px;
}

.ep-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-mute);
	cursor: pointer;
}

.ep-check input { accent-color: var(--ui-accent); }

.ep-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ep-chip {
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid var(--line-strong);
	background: var(--bg-raised);
	color: var(--fg-mute);
	cursor: pointer;
}

.ep-chip.is-on {
	border-color: rgba(47, 125, 255, 0.6);
	background: rgba(47, 125, 255, 0.14);
	color: #fff;
}

.ep-seg {
	display: flex;
	padding: 3px;
	border-radius: 9px;
	background: var(--bg);
	border: 1px solid var(--line-soft);
	gap: 3px;
}

.ep-seg__b {
	flex: 1;
	padding: 6px 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--fg-faint);
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.ep-seg__b.is-on {
	background: rgba(255, 255, 255, 0.08);
	color: var(--fg);
}

.ep-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ep-mini {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1px;
	padding: 5px 9px;
	border-radius: 7px;
	border: 1px solid var(--line-strong);
	background: var(--bg-raised);
	color: var(--fg-mute);
	cursor: pointer;
	text-transform: uppercase;
}

.ep-mini:hover { border-color: var(--line-hover); color: var(--fg); }

.ep-layer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 9px;
	border: 1px solid var(--line-soft);
	background: var(--bg-raised);
	cursor: pointer;
}

.ep-layer.is-active {
	border-color: rgba(47, 125, 255, 0.55);
	background: rgba(47, 125, 255, 0.10);
}

.ep-layer__icon { font-size: 13px; }

.ep-layer__name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--fg-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-layer__vis,
.ep-layer__mv,
.ep-layer__del {
	border: 0;
	background: none;
	color: var(--fg-ghost);
	cursor: pointer;
	font-size: 11px;
	padding: 2px 4px;
}

.ep-layer__del:hover { color: var(--ui-bear); }
.ep-layer__vis:hover,
.ep-layer__mv:hover { color: var(--fg); }

.ep-maker__note {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--fg-faint);
	margin-top: 8px;
}

.ep-unit {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- stage ----------------------------------------------------------------- */

.epi-meme__stage {
	position: relative;
	border-radius: var(--r-panel);
	border: 1px solid var(--line-strong);
	background: var(--bg-footer);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	margin-bottom: 14px;
}

.epi-meme__stage canvas {
	max-width: 100%;
	max-height: 72vh;
	display: block;
	touch-action: none;
}

.epi-meme__stage.is-drop { border-color: rgba(47, 125, 255, 0.7); }

/*
 * The ported script flags a loaded image by putting `ep-has-image` on
 * document.body, not on the stage — so these hang off body. Getting that
 * wrong is silent: the canvas draws correctly and the empty state simply
 * never goes away.
 */
body:not(.ep-has-image) .epi-meme__stage canvas { opacity: 0; }

.epi-meme__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.4px;
	color: var(--fg-ghost);
	text-transform: uppercase;
}

body.ep-has-image .epi-meme__empty { display: none; }

.epi-meme__empty-mark {
	display: flex;
	gap: 6px;
	padding: 10px;
	border-radius: 12px;
	background: var(--bg-raised);
	border: 1px solid var(--line-strong);
}

.epi-meme__empty-mark .epi-meme__cube {
	width: 34px;
	height: 34px;
	border-radius: 7px;
}

/* --- export ---------------------------------------------------------------- */

.epi-meme__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
}

.epi-meme__export {
	flex: 1;
	min-width: 180px;
	height: 48px;
	border: 0;
	border-radius: 12px;
	background: var(--ui-accent);
	box-shadow: 0 8px 24px -10px rgba(47, 125, 255, 0.9);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	color: #fff;
	text-transform: uppercase;
}

.epi-meme__export--ghost {
	flex: 0 0 auto;
	min-width: 150px;
	background: transparent;
	border: 1px solid var(--line-hover);
	box-shadow: none;
	color: var(--fg-soft);
}

.epi-meme__export[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }

/* The route into the contest. Green rather than the accent blue, because it is
   the one control here that publishes something rather than saving it. */
.epi-meme__export--send {
	background: linear-gradient(180deg, var(--cube-green), #00A55C);
	box-shadow: 0 8px 24px -10px rgba(0, 232, 126, 0.85);
	color: #04150C;
	font-weight: 700;
}

.epi-meme__export--send:hover:not([disabled]) {
	box-shadow: 0 10px 30px -8px rgba(0, 232, 126, 1);
}

/* An anchor in the same row as the buttons — it has to sit on their baseline
   and match their box, or the row reads as broken. */
a.epi-meme__export {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 18px;
}

.epi-meme__sendmsg {
	flex: 1 0 100%;
	margin: 0;
	min-height: 1em;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.6px;
	color: var(--fg-mute);
}

.epi-meme__sendmsg.is-ok  { color: var(--cube-green); }
.epi-meme__sendmsg.is-bad { color: var(--ui-bear); }

/* --- the merged screen ------------------------------------------------------
   The maker keeps its own padding; what it loses is the bottom of it, because
   the battle follows immediately underneath rather than the footer. */

.epi-meme--merged { padding-bottom: 0; }

.epi-battle__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 8px 0 22px;
}

.epi-battle__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--line-strong), transparent);
}

.epi-meme__warning {
	width: 220px;
	min-height: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 12px;
	border: 1px solid rgba(255, 214, 102, 0.3);
	background: rgba(255, 214, 102, 0.06);
	font-family: var(--font-mono);
	font-size: 9.5px;
	line-height: 1.35;
	letter-spacing: 0.8px;
	color: #E8C37A;
	text-align: center;
	padding: 6px 10px;
}

.epi-meme__warning span { color: #A98F58; }

/* --- narrow ---------------------------------------------------------------- */

@media (max-width: 1080px) {
	.epi-meme__grid { grid-template-columns: minmax(0, 1fr); }
	.epi-meme__stage { min-height: 320px; }
}

@media (max-width: 640px) {
	.epi-meme { padding: 22px var(--gutter) 60px; }
	.epi-meme__title { font-size: 28px; letter-spacing: -1.1px; }
	.ep-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
	.ep-tool { height: 52px; }
	.epi-meme__actions { flex-direction: column; }
	.epi-meme__export,
	.epi-meme__export--ghost,
	.epi-meme__warning { width: 100%; }
}