/**
 * The Iowa Cob Arcade. Scoped under .icp-arcade (itself inside .icp, so it inherits the same
 * --icp-* colour/font tokens as the rest of the plugin) so it cannot leak into the theme.
 */
.icp-arcade { margin-top: var(--icp-gap); }
.icp-arcade__head { text-align: center; margin-bottom: var(--icp-gap); }
.icp-arcade__kicker {
	margin: 0 0 0.3rem; font-family: var(--icp-ui); font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--icp-gold);
}
.icp-arcade__title { margin: 0; font-family: var(--icp-head); font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.4rem); color: var(--icp-green-deep); }
.icp-arcade__sub { margin: 0.4rem auto 0; max-width: 640px; color: var(--icp-muted); }
.icp-arcade__games { display: grid; grid-template-columns: 1fr; gap: var(--icp-gap); }
@media (min-width: 900px) {
	.icp-arcade__games { grid-template-columns: 1fr 1fr; align-items: start; }
}
.icp-arcade-game {
	background: var(--icp-card); border: 1px solid var(--icp-line); border-top: 4px solid var(--icp-gold);
	border-radius: 2px; padding: 1rem; min-width: 0; scroll-margin-top: calc(var(--icp-header-offset, 0px) + 1rem);
}
.icp-arcade-game__title { margin: 0; font-family: var(--icp-head); font-weight: 700; font-size: clamp(1.2rem, 3.5vw, 1.5rem); color: var(--icp-green-deep); }
.icp-arcade-game__desc { margin: 0.3rem 0 0.9rem; color: var(--icp-muted); font-size: 0.92rem; }

/* ---------- Pothole Dodge (ported, renamed from dispatch-*) ---------- */
.icp-arcade-pothole__toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 0.6rem; font-family: var(--icp-ui); }
.icp-arcade-pothole__score, .icp-arcade-pothole__best { display: flex; align-items: baseline; gap: 0.5rem; }
.icp-arcade-pothole__score-label, .icp-arcade-pothole__best span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--icp-muted); }
.icp-arcade-pothole__score strong { font-size: 1.4rem; color: var(--icp-green-deep); }
.icp-arcade-pothole__best strong { font-size: 1.05rem; }
.icp-arcade-pothole__stage {
	position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; min-height: 320px;
	border: 4px solid var(--icp-ink);
	background: linear-gradient(90deg, #716f6b 0%, #575653 9%, #474643 9%, #474643 91%, #575653 91%, #716f6b 100%);
	outline: none; touch-action: manipulation;
}
.icp-arcade-pothole__stage:focus-visible { box-shadow: 0 0 0 3px var(--icp-cream), 0 0 0 6px var(--icp-gold); }
.icp-arcade-pothole__road { position: absolute; inset: 0; pointer-events: none; }
.icp-arcade-pothole__road::before, .icp-arcade-pothole__road::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.35); }
.icp-arcade-pothole__road::before { left: 9%; }
.icp-arcade-pothole__road::after { right: 9%; }
.icp-arcade-pothole__line {
	position: absolute; top: -25%; bottom: -25%; width: 4px;
	background: repeating-linear-gradient(to bottom, rgba(255,221,87,0.9) 0, rgba(255,221,87,0.9) 34px, transparent 34px, transparent 68px);
	animation: icp-arcade-road-scroll 1.1s linear infinite; animation-play-state: paused;
}
.icp-arcade-pothole__line--one { left: 33.333%; }
.icp-arcade-pothole__line--two { left: 66.666%; }
.icp-arcade-pothole-game.is-running .icp-arcade-pothole__line { animation-play-state: running; }
@keyframes icp-arcade-road-scroll { from { transform: translateY(-68px); } to { transform: translateY(0); } }
.icp-arcade-pothole__message {
	position: absolute; z-index: 6; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center;
	width: min(82%, 360px); padding: 1rem 1.2rem; transform: translate(-50%, -50%);
	border: 3px solid var(--icp-ink); background: rgba(244,240,229,0.96); text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.icp-arcade-pothole__message[hidden] { display: none; }
.icp-arcade-pothole__message strong { font-family: var(--icp-head); font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1; }
.icp-arcade-pothole__message span { margin-top: 0.5rem; font-family: var(--icp-ui); font-size: 0.92rem; line-height: 1.35; }
.icp-arcade-pothole__player { position: absolute; z-index: 4; bottom: 6%; left: 50%; width: 48px; height: 78px; transform: translateX(-50%); transition: left 110ms ease-out; }
.icp-arcade-pothole__window { position: absolute; top: 7px; left: 9px; width: 30px; height: 21px; border: 3px solid var(--icp-ink); border-radius: 8px 8px 3px 3px; background: #9eb7c5; }
.icp-arcade-pothole__body { position: absolute; inset: 0; border: 3px solid var(--icp-ink); border-radius: 15px 15px 8px 8px; background: var(--icp-red); box-shadow: inset 0 -10px 0 rgba(0,0,0,0.12); }
.icp-arcade-pothole__light { position: absolute; bottom: 6px; width: 8px; height: 6px; border: 1px solid #6f4d00; border-radius: 2px; background: var(--icp-gold); }
.icp-arcade-pothole__light--l { left: 7px; }
.icp-arcade-pothole__light--r { right: 7px; }
.icp-arcade-pothole__wheel { position: absolute; z-index: -1; top: 16px; width: 7px; height: 52px; border-radius: 4px; background: #111; }
.icp-arcade-pothole__wheel--l { left: -4px; }
.icp-arcade-pothole__wheel--r { right: -4px; }
/* The falling pothole obstacle itself (created by icp-arcade.js) -- deliberately NOT the game
   container, which is .icp-arcade-pothole-game, so the two never collide on this class name. */
.icp-arcade-pothole {
	position: absolute; z-index: 3; width: var(--pothole-width, 60px); height: var(--pothole-height, 34px);
	border: 4px solid #252422; border-radius: 42% 58% 51% 49% / 58% 42% 61% 39%;
	background: radial-gradient(ellipse at 44% 38%, #161616 0%, #232220 44%, #35332f 66%, #1d1c1a 100%);
	box-shadow: 0 4px 3px rgba(0,0,0,0.35), inset 4px 4px 5px rgba(255,255,255,0.05);
}
.icp-arcade-pothole::after { content: ""; position: absolute; inset: -8px; border: 2px dashed rgba(34,32,29,0.32); border-radius: inherit; }
.icp-arcade-pothole__controls, .icp-arcade-pothole__touch { display: flex; justify-content: center; gap: 0.65rem; }
.icp-arcade-pothole__controls { margin-top: 0.9rem; }
.icp-arcade-pothole__touch { margin-top: 0.65rem; }
.icp-arcade-pothole__steer { width: 64px; min-height: 46px; font-size: 1.4rem; }
.icp-arcade-pothole__status { margin: 0.75rem 0 0; text-align: center; font-family: var(--icp-ui); font-size: 0.8rem; line-height: 1.4; color: var(--icp-muted); }
@media (min-width: 700px) { .icp-arcade-pothole__touch { display: none; } }
@media (max-width: 420px) { .icp-arcade-pothole__stage { min-height: 340px; aspect-ratio: 3 / 4; } .icp-arcade-pothole__player { width: 42px; height: 68px; } }
@media (prefers-reduced-motion: reduce) { .icp-arcade-pothole__line { animation: none !important; } .icp-arcade-pothole__player { transition: none; } }

/* ---------- Clean Up Your Shit! (river cleanup, canvas) ---------- */
.icp-arcade-river__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.6rem; font-family: var(--icp-ui); }
.icp-arcade-river__stat { display: flex; align-items: baseline; gap: 0.4rem; }
.icp-arcade-river__stat-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--icp-muted); }
.icp-arcade-river__stat strong { font-size: 1.3rem; color: var(--icp-green-deep); }
.icp-arcade-river__health { flex: 1 1 100%; }
.icp-arcade-river__healthbar { height: 10px; border: 1px solid var(--icp-line); border-radius: 5px; overflow: hidden; background: var(--icp-line); }
.icp-arcade-river__healthfill { height: 100%; background: var(--icp-green); transition: width 160ms ease, background-color 300ms ease; }
.icp-arcade-river__lives { display: flex; gap: 0.25rem; }
.icp-arcade-river__life { width: 1rem; height: 1rem; }
.icp-arcade-river__stagewrap {
	position: relative; width: 100%; max-width: 460px; margin: 0 auto;
	aspect-ratio: 3 / 4; border: 4px solid var(--icp-ink); border-radius: 3px; overflow: hidden; touch-action: none;
}
.icp-arcade-river__canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.icp-arcade-river__canvas:focus-visible { outline: 3px solid var(--icp-gold); outline-offset: -3px; }
.icp-arcade-river__overlay {
	position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.6rem; padding: 1.2rem; text-align: center; background: rgba(13, 51, 37, 0.88); color: #fff;
}
.icp-arcade-river__overlay[hidden] { display: none; }
.icp-arcade-river__overlay h4 { margin: 0; font-family: var(--icp-head); font-size: clamp(1.3rem, 4vw, 1.8rem); }
.icp-arcade-river__overlay p { margin: 0; max-width: 320px; font-size: 0.92rem; }
.icp-arcade-river__controls { display: flex; justify-content: center; gap: 0.65rem; margin-top: 0.9rem; }
.icp-arcade-river__status { margin: 0.75rem 0 0; text-align: center; font-family: var(--icp-ui); font-size: 0.8rem; line-height: 1.4; color: var(--icp-muted); }
@media (prefers-reduced-motion: reduce) { .icp-arcade-river__healthfill { transition: none; } }