/* The arcade sponsor roadsign (sponsor.js), built like Mitchell's roadside sign in the Short Stack scene: a framed
   panel (here the sponsor's photo) over a colored band with their name, on two posts in the frame's color, with a
   "Monthly Sponsor" plate bolted across the posts. On the ground beside the play area on wide screens, slim beside
   the board or sideways under the court on phones, on short posts on the end-of-game card. */
.sponsor-slot { z-index: 5; }
.sponsor-slot.off { display: none; }
.sponsor-slot.side { position: fixed; bottom: 0; display: flex; }
.sponsor-slot.slim { position: fixed; display: flex; }
.sponsor-slot.strip { width: min(300px, calc(100% - 40px)); margin: 6px auto 18px; } /* (room under it for Become a Sponsor) */
.sponsor-slot.endcard { width: min(170px, 60%); margin: 12px auto 4px; }

.roadsign { display: flex; flex-direction: column; width: 100%; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rs-face {
	display: block; line-height: 0;
	border: 5px solid var(--rs-frame);
	border-radius: 3px; overflow: hidden;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 0 10px 20px rgb(0 0 0 / 0.4);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.rs-band { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 8px 7px; background: var(--rs-band); line-height: 1; }
.rs-logo { display: block; width: 76%; height: auto; }
.rs-tag { font: 700 0.7rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.02em; white-space: nowrap; }
/* two posts down to the ground, with the sponsor plate bolted across them */
.rs-posts { position: relative; flex: 1; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 22%; min-height: 26px; }
.rs-posts i { flex: none; width: 7px; align-self: stretch; background: var(--rs-frame); box-shadow: inset -2px 0 0 rgb(0 0 0 / 0.25); }
/* the plate: a very small one-line credit (Frank 2026-10-23: "much smaller it should be one line", then "much much
   smaller it should be very minor"; sponsor.js shrinks it further where a sign is narrow) */
.rs-plate {
	position: absolute; left: 50%; top: 5px; transform: translateX(-50%); white-space: nowrap;
	padding: 1px 3px 0; border-radius: 2px;
	background: rgb(251 243 228 / 0.82); color: #17110f;
	font: 600 6px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}
/* "Press here" in the band: the sign is the button */
.rs-cta {
	margin-top: 2px; padding: 3px 8px 2px; border-radius: 999px;
	background: #fff; color: var(--rs-band);
	font: 800 0.65rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}
.rs-cta b { font-size: 0.9em; }
.roadsign:hover .rs-cta, .roadsign:focus-visible .rs-cta { background: #fbf3e4; }
/* "Become a Sponsor" under the plate: a small link to the sponsor form (Frank 2026-10-23) */
.rs-join {
	position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
	padding: 4px 6px; /* a bigger tap target than the text */
	font: 700 8px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
	color: #ffcf3d; text-decoration: underline; text-underline-offset: 2px; text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
}
.rs-join:focus-visible { outline: 2px solid #f2b33d; outline-offset: 1px; border-radius: 3px; }
.sponsor-slot { position: relative; }
.sponsor-slot.side, .sponsor-slot.slim { position: fixed; }
.sponsor-slot.endcard { display: flex; flex-direction: column; align-items: center; }
.sponsor-slot.endcard .rs-join { position: static; transform: none; margin-top: 2px; }
.sponsor-slot.endcard .rs-posts { flex: none; height: 20px; } /* short posts, so the plate still names it */
.sponsor-slot.small .rs-tag { display: none; }
.sponsor-slot.slim .rs-cta, .sponsor-slot.small .rs-cta, .sponsor-slot.strip.tight .rs-cta { padding: 2px 5px 1px; font-size: 0.6rem; }
.sponsor-slot.strip.tight .rs-tag { display: none; }
/* slim (phones, beside the board): her face in a square, the logo stacked under it, no tagline */
.sponsor-slot.slim .rs-photo { aspect-ratio: 1; object-position: 62% 40%; }
.sponsor-slot.slim .rs-face { border-width: 3px; }
.sponsor-slot.slim .rs-band { padding: 5px 4px 6px; }
.sponsor-slot.slim .rs-logo { width: 92%; }
.sponsor-slot.slim .rs-tag { display: none; }
.sponsor-slot.slim .rs-posts { padding: 0 24%; }
.sponsor-slot.slim .rs-posts i { width: 5px; }
/* strip (upright phones, under the court): the same sign turned sideways, photo left and the band right, short posts */
.sponsor-slot.strip .rs-face { display: flex; align-items: stretch; }
.sponsor-slot.strip .rs-photo { width: 46%; aspect-ratio: 2 / 1; }
.sponsor-slot.strip .rs-band { flex: 1; justify-content: center; padding: 5px 6px; }
.sponsor-slot.strip .rs-logo { width: 74%; }
.sponsor-slot.strip .rs-posts { flex: none; height: 20px; padding: 0 26%; }
.sponsor-slot.strip.tight .rs-posts { height: 13px; } /* tiny phones: short posts, so the plate stays on screen */
.sponsor-slot.strip.tight .rs-photo { width: 40%; }
.sponsor-slot.strip.tight .rs-band { padding: 3px 4px; gap: 2px; }
.sponsor-slot.strip.tight .rs-logo { width: 62%; }
.sponsor-slot.strip.tight .rs-face { border-width: 3px; }
.sponsor-slot.strip.tight .rs-plate { top: 3px; }

.roadsign:hover .rs-face, .roadsign:focus-visible .rs-face { transform: translateY(-3px); }
.roadsign:focus-visible { outline: 3px solid #f2b33d; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .rs-face { transition: none; } }
@media print { .sponsor-slot { display: none; } }