/* Bingo: a printed card with ink rules, marked with a dauber. Each card's
   dauber color comes from its seed. The fields, action bar and checkboxes
   come from live.css and base.css. */

.bingo-app {
	/* On a short, wide screen the whole card still fits */
	max-width: min(560px, max(360px, 100dvh - 240px));
}

main:has(.bingo-app) {
	padding-top: 24px;
}

.bingo-app[data-screen="entry"] .screen-entry,
.bingo-app[data-screen="card"] .screen-card,
.bingo-app[data-screen="edit"] .screen-edit {
	display: block;
	animation: screen-in 0.4s var(--ease-out);
}

.bingo-app [hidden] {
	display: none !important;
}

.form-error {
	font-weight: 600;
}

/* ---------- Bingo balls (the logo and board codes) ---------- */

.ball-row {
	display: flex;
	gap: 0.08em;
}

.ball {
	--ball: var(--coral);
	display: inline-grid;
	place-items: center;
	width: 1em;
	height: 1em;
	border: 0.04em solid var(--ink);
	border-radius: 50%;
	background: var(--ball);
	box-shadow: 0.05em 0.05em 0 var(--ink);
	line-height: 1;
}

.ball > span {
	display: grid;
	place-items: center;
	width: 1.24em;
	height: 1.24em;
	padding-bottom: 0.06em;
	border: 0.06em solid var(--ink);
	border-radius: 50%;
	background: var(--surface);
	font-size: 0.5em; /* em below are this size: the disc is 62% of the ball */
	font-weight: 800;
	font-stretch: 85%;
}

.ball-row .ball:nth-child(1) { --ball: #ff6fa8; }
.ball-row .ball:nth-child(2) { --ball: #2fd3a0; }
.ball-row .ball:nth-child(3) { --ball: #9b85ff; }
.ball-row .ball:nth-child(4) { --ball: #ffc93c; }
.ball-row .ball:nth-child(5) { --ball: #4fd6e8; }

/* Dropped in one at a time, like balls out of the cage */
.bingo-logo .ball,
.share-code .ball {
	animation: ball-drop 0.7s calc(var(--i) * 80ms) var(--ease-spring) both;
}

@keyframes ball-drop {
	from {
		opacity: 0;
		transform: translateY(-0.8em) rotate(-90deg);
	}
}

/* ---------- Entry ---------- */

.bingo-logo {
	display: flex;
	justify-content: center;
	margin: 6px 0 28px;
	font-size: clamp(56px, 16vw, 84px);
}

.bingo-logo .ball:nth-child(even) {
	transform: translateY(0.12em);
	animation-name: ball-drop-low;
}

@keyframes ball-drop-low {
	from {
		opacity: 0;
		transform: translateY(-0.7em) rotate(-90deg);
	}
	to {
		transform: translateY(0.12em);
	}
}

.make-btn {
	display: flex;
	width: 100%;
}

.mine {
	margin-top: 32px;
}

.mine h2 {
	margin-bottom: 12px;
	font-size: 24px;
}

.mine-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mine-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-right: 8px;
	border: var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.mine-link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 8px 8px 8px 16px;
	border-radius: 10px;
	text-decoration: none;
}

.mine-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mine-code {
	color: var(--muted);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.08em;
}

.mine-link:hover .mine-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------- Card page ---------- */

.card-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

/* The board code, which opens sharing */
.code-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 12px 5px 6px;
	border: var(--border);
	border-radius: 50px;
	background: var(--surface);
	box-shadow: 3px 3px 0 var(--ink);
	color: var(--ink);
	font: inherit;
	font-size: 30px;
	cursor: pointer;
	transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.code-chip:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--ink);
}

.code-chip [data-code-chip] {
	display: flex;
	gap: 3px;
}

.code-chip .ball {
	box-shadow: none;
}

.code-chip svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card-bar .btn.ghost {
	margin-left: auto;
}

.card-title {
	margin-bottom: 16px;
	font-size: clamp(30px, 8vw, 44px);
	overflow-wrap: anywhere;
}

.card-tools {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.card-tools .btn,
.edit-actions .btn.ghost {
	color: var(--muted);
}

.btn.is-armed {
	border-color: var(--ink);
	background: var(--coral);
	color: var(--ink) !important;
}

/* ---------- The card ---------- */

.bingo-card {
	--daub: #ff6fa8;
	border: 3px solid var(--ink);
	border-radius: var(--radius-card);
	background: var(--ink);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.bingo-head {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	background: var(--coral);
	border-bottom: 3px solid var(--ink);
}

.bingo-head span {
	display: grid;
	place-items: center;
	padding: 2px 0 4px;
	font-weight: 800;
	font-size: clamp(30px, 9vw, 46px);
	font-stretch: 75%;
	line-height: 1;
	color: var(--surface);
	-webkit-text-stroke: 2px var(--ink);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--ink);
}

.bingo-grid-wrap {
	position: relative;
}

/* The ink between squares is the card showing through. */
.bingo-grid {
	display: grid;
	grid-template-columns: repeat(var(--size, 5), minmax(0, 1fr));
	gap: 2px;
}

.sq {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	min-width: 0;
	padding: 4px;
	border: 0;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.sq:focus-visible {
	outline: 3px solid var(--mint-strong);
	outline-offset: -5px;
	z-index: 1;
}

.sq-text {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-align: center;
	overflow-wrap: normal;
	hyphens: manual;
}

.sq-text.is-squeezed {
	overflow-wrap: anywhere;
}

/* The daub: a blot of dauber ink over the square, a little off-round and turned. */
.sq::before {
	content: "";
	position: absolute;
	inset: 9%;
	border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
	background: radial-gradient(circle at 40% 38%, color-mix(in srgb, var(--daub) 70%, #fff), var(--daub) 70%);
	mix-blend-mode: multiply;
	transform: rotate(var(--r, 0deg)) scale(0);
	opacity: 0;
	transition: transform 0.18s var(--ease-out), opacity 0.18s;
}

.sq[aria-pressed="true"]::before {
	transform: rotate(var(--r, 0deg)) scale(1);
	opacity: 0.9;
}

.sq.is-stamped[aria-pressed="true"]::before {
	animation: daub 0.35s var(--ease-spring);
}

@keyframes daub {
	0% {
		transform: rotate(var(--r, 0deg)) scale(1.35);
		opacity: 0;
	}
	45% {
		transform: rotate(var(--r, 0deg)) scale(0.92);
		opacity: 1;
	}
}

.sq:active .sq-text {
	transform: scale(0.94);
}

.sq.is-free {
	background: var(--ink);
	color: var(--surface);
	cursor: default;
}

.sq.is-free svg {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	fill: var(--yellow);
	transform: rotate(var(--r, 0deg));
}

.sq.is-free .sq-text {
	padding-top: 0.12em;
	color: var(--ink);
	font-weight: 800;
}

.sq.is-blank {
	background: repeating-linear-gradient(-45deg, var(--surface) 0 6px, #f1eff6 6px 12px);
}

/* A stroke through each complete line */
.bingo-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.bingo-lines line {
	stroke: var(--ink);
	stroke-width: 5;
	stroke-linecap: round;
	opacity: 0.85;
}

.bingo-lines line.is-new {
	stroke-dasharray: var(--len);
	animation: strike 0.45s 0.1s var(--ease-out) both;
}

@keyframes strike {
	from {
		stroke-dashoffset: var(--len);
	}
}

/* ---------- Share ---------- */

.share {
	width: min(380px, calc(100% - 32px));
	padding: 26px 22px 22px;
	border: var(--border);
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	color: var(--ink);
	text-align: center;
}

.share[open] {
	display: grid;
	justify-items: center;
	gap: 16px;
	animation: pop-in 0.35s var(--ease-spring);
}

.share::backdrop {
	background: #2a2540a6;
}

.share-code {
	display: flex;
	gap: 6px;
	font-size: 58px;
}

.share-qr {
	width: min(220px, 70vw);
	padding: 12px;
	border: var(--border);
	border-radius: 12px;
}

.share-qr svg {
	width: 100%;
	height: auto;
}

.share-url {
	max-width: 100%;
	color: var(--muted);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.share form {
	position: absolute;
	top: 8px;
	right: 8px;
}

.share-close {
	width: 38px;
	height: 38px;
	border: 2px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.share-close:hover {
	border-color: var(--ink);
}

/* ---------- Editor ---------- */

.edit-app {
	max-width: 1040px;
}

.edit-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.edit-head h1 {
	font-size: clamp(36px, 9vw, 52px);
}

.edit-head .btn {
	margin-left: auto;
}

.edit-form {
	display: grid;
	gap: 18px;
}

.edit-form .setting {
	margin: 0;
}

.field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.count-pill.is-short {
	background: var(--peach);
}

.field textarea {
	width: 100%;
	min-height: 220px;
	padding: 10px 14px;
	border: var(--border);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	resize: vertical;
}

.field textarea:focus-visible {
	outline: 3px solid var(--mint-strong);
	outline-offset: 1px;
}

.field textarea::placeholder,
.field input::placeholder {
	color: #a29db3;
}

.edit-form .seg span {
	min-width: 64px;
	padding: 8px 14px;
	text-align: center;
}

.checks {
	display: grid;
	gap: 12px;
}

.edit-preview {
	margin-top: 22px;
}

.bingo-card.is-preview .sq {
	cursor: default;
}

.edit-actions .action-buttons {
	justify-content: flex-end;
}

.edit-actions .form-error {
	text-align: center;
}

@media (min-width: 900px) {
	.edit-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 32px;
		align-items: start;
	}

	.edit-preview {
		position: sticky;
		top: 24px;
		margin-top: 0;
	}

	.edit-actions {
		position: static;
		grid-column: 1 / -1;
	}

	.edit-actions .btn.big {
		flex: none;
		min-width: 240px;
	}

	.edit-actions .action-buttons {
		justify-content: flex-end;
	}
}