@font-face {
	font-family: 'Pink Chicken';
	src: url('../fonts/PinkChicken-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Jember Sketch';
	src: url('../fonts/White On Black.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html { font-family: 'Pink Chicken', sans-serif; }
*, *::before, *::after { font-family: inherit; }

body {
	--danger-color: #a21a1a;
	--page-margin: 2rem;
	margin: var(--page-margin) auto;
	padding: 0 1rem;
	max-width: 1280px;
	line-height: 1.5;
	color: #555;
	background: url('../img/clonk_background_texture-min2.png') #f7f7f7;
	font-size: 1.5rem;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

h1, h2, h3, h4, h5, h6 { 
	margin: 0;
	margin-bottom: 1.5rem;
	font-family: 'Jember Sketch', sans-serif; }
h1 { text-align: left; overflow-wrap: anywhere; }
.account-panel { padding: 1.5rem; background: white; border-radius: .5rem; }
section + section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; }
label { display: block; margin-bottom: .4rem; font-weight: bold; }
input:not([type="hidden"]) { box-sizing: border-box; width: 100%; padding: .65rem; font: inherit; }
button { position: relative; isolation: isolate; padding: .65rem 1rem; font: inherit; cursor: pointer; }
button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url('../img/cardbg/clonk_card_yellow.png') center / 100% 100% no-repeat; opacity: 0; pointer-events: none; }
button:not(:disabled):hover::before, button:not(:disabled):focus-visible::before { opacity: .5; }
.inline-icon { display: inline-block; width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; }
.inline-icon.potion-icon { width: 2.5em; height: 2.5em; }
.button-hint { position: fixed; inset: auto; width: 0; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; pointer-events: none; }
.button-hint:not(:popover-open) { display: none; }
[data-hint]:not(.button-hint)::before, [data-hint]:not(.button-hint)::after { display: none; }
.button-hint:after { box-sizing: border-box; width: min(18rem, calc(100vw - 2rem)); white-space: normal; font-size: 1rem; }
p { color: #555; }
.account-error { color: var(--danger-color); }
.status-bar-name { color: inherit; text-decoration: none; }
.status-bar-name:hover, .status-bar-name:focus-visible { text-decoration: underline; }
.stats-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.stats-actions form { margin: 0; }
.account-action-danger { border: 2px solid var(--danger-color); }
.game-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.game-stat-grid dt { color: #777; font-size: .8em; }
.game-stat-grid dd { margin: 0; font-weight: bold; }
#account-passcode code { overflow-wrap: anywhere; }
.score-table-wrapper { overflow-x: auto; }
.score-table { width: 100%; border-collapse: collapse; text-align: left; }
.score-table th, .score-table td { padding: .5rem; border-bottom: 1px solid #ddd; }
.score-table .is-current { background: rgb(255 224 128 / 35%); }
#login-status:empty { display: none; }

.title { display: block; grid-column: 2; grid-row: 1; justify-self: center; }
.status-bar {
    z-index: 100;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	gap: .5rem 1.5rem;
	margin: calc(-1 * var(--page-margin)) 0 calc(var(--page-margin) - 160px + 20px);
}
.status-bar-name { grid-column: 1; grid-row: 1; margin-top: var(--page-margin); min-width: 0; overflow-wrap: anywhere; }
.status-bar-values { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.5rem; margin-top: var(--page-margin); }
.status-bar-values > span { white-space: nowrap; }
.music-toggle { align-self: center; padding: .15rem .35rem; border: 0; background: transparent; line-height: 1; }
.music-toggle[aria-pressed="false"] { opacity: .5; }
.music-toggle[aria-pressed="false"]::after { content: ''; position: absolute; left: 15%; top: 50%; width: 70%; height: 2px; background: currentColor; transform: rotate(-40deg); pointer-events: none; }
@media (max-width: 40rem) {
	.status-bar { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--page-margin); }
	.title { grid-column: 1; }
	.status-bar-name { grid-column: 1; grid-row: 2; margin-top: 0; }
	.status-bar-values { grid-column: 1; grid-row: 3; justify-content: space-between; margin-top: 0; }
}

.content-modal {
	box-sizing: border-box;
	width: min(48rem, calc(100% - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 1rem;
	border: clamp(2rem, 6vw, 4.5rem) solid transparent;
	border-image: url('../img/oldtech_final/clonk_popup_frame-min.png') 180 fill stretch;
	outline: none;
	background: transparent;
	color: inherit;
	overflow: visible;
}
.content-modal[open] { display: flex; flex-direction: column; }
.modal-content { min-height: 0; overflow: auto; }
.content-modal::backdrop { background: rgba(0, 0, 0, .6); }
html:has(.content-modal[open]) { overflow: hidden; }

.shop-panel, .team-panel { margin: 1.5rem 0; }
.team-callout { margin: 1.5rem 0 0; }
.shop-upgrades { margin-top: 1.5rem; }
.shop-upgrade-list { margin: 0; padding: 0; list-style: none; }
.shop-upgrade-list li { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; }
.shop-upgrade-list li::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../img/cardbg/clonk_card_yellow.png') center / 100% 100% no-repeat; opacity: 0; pointer-events: none; }
.shop-upgrade-list li:hover::before, .shop-upgrade-list li:focus-within::before { opacity: .5; }
.shop-upgrade-list strong { display: block; font-weight: 700; line-height: 1.25; }
.shop-upgrade-list p { margin: 0; color: #888; font-size: .85em; line-height: 1.35; }
.shop-upgrade-list button { flex-shrink: 0; white-space: nowrap; }
#shop-message:empty, #team-message:empty, #team-dismiss-message:empty { display: none; }
.clonk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.clonk-card { display: flex; flex-direction: column; padding: 1rem; background: white; border: 2px solid #ccc; border-radius: .5rem; }
.clonk-card[data-clonk-position]:not([data-clonk-position=""]) { position: relative; isolation: isolate; background-color: transparent; border-color: transparent; border-radius: 0; }
.clonk-card[data-clonk-position]:not([data-clonk-position=""])::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--clonk-card-background) center / 100% 100% no-repeat; opacity: .5; pointer-events: none; }
.clonk-card[data-clonk-position="head"] { --clonk-card-background: url('../img/cardbg/clonk_card_blue.png'); }
.clonk-card[data-clonk-position="torso"] { --clonk-card-background: url('../img/cardbg/clonk_card_red.png'); }
.clonk-card[data-clonk-position*=","] { --clonk-card-background: url('../img/cardbg/clonk_card_purple.png'); }
.clonk-card[data-clonk-position="legs"] { --clonk-card-background: url('../img/cardbg/clonk_card_gray.png'); }
.team-panel .clonk-card { position: relative; }
.clonk-card.is-broken .clonk-image { filter: grayscale(1); opacity: .45; }
.clonk-card.is-broken > :is(h3, .clonk-stats, .clonk-abilities) { opacity: .5; }
:where(.clonk-grid) > .clonk-card:not(:where(.has-appeared)) {
	backface-visibility: hidden;
	animation: clonk-reveal .5s ease-out backwards;
	animation-delay: calc(var(--card-index) * 80ms);
}
@keyframes clonk-reveal {
	from { transform: perspective(900px) rotateY(-90deg); }
	to { transform: perspective(900px) rotateY(0deg); }
}
.clonk-card.is-reordering, .arena-unit.is-reordering { z-index: 4; animation: clonk-reorder .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--clonk-order-delay, 0ms); }
@keyframes clonk-reorder { from { translate: var(--clonk-order-x) var(--clonk-order-y); } to { translate: 0 0; } }
.clonk-order-badges { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; gap: .25rem; white-space: nowrap; }
.clonk-order-badge { min-width: 1.2em; padding: .2em .6em; border-radius: 1rem; background: #fff0bd; color: #674c00; font-size: .6em; line-height: 1.2; text-align: center; }
.clonk-image { width: 100%; height: 10rem; object-fit: contain; }
.clonk-image.is-compound { display: block; height: 14rem; overflow: visible; }
.clonk-card h3 { margin: .25rem 0; line-height: 1.2; text-align: center; }
.clonk-card .clonk-image + h3 { margin-top: calc(.25rem - 12px); }
.clonk-stats { display: flex; justify-content: space-between; gap: .5rem; margin: .25rem 0; font-size: .85em; }
.clonk-stats div { text-align: center; }
.clonk-stats .inline-icon { display: block; width: 2em; height: 2em; margin: 0 auto; }
.clonk-stats dd { margin: 0; font-weight: bold; }
.clonk-level { font-family: 'Jember Sketch', sans-serif; white-space: nowrap; }
.clonk-level-available { color: #967000; }
.clonk-repair { position: absolute; top: .5rem; left: .5rem; z-index: 2; padding: .2rem .4rem; font-size: .7em; }
.clonk-repair:disabled { opacity: .45; cursor: default; }
.clonk-level-up { position: absolute; top: .5rem; right: .5rem; z-index: 2; padding: .2rem .4rem; font-family: 'Jember Sketch', sans-serif; font-size: .7em; }
.clonk-repair:not(:disabled), .clonk-level-up:not(:disabled) { animation: clonk-action-pulse 1.6s ease-in-out infinite; }
@keyframes clonk-action-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}
.clonk-level-layout { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); align-items: start; gap: 2rem; margin-top: 1.5rem; }
.clonk-level-layout .clonk-card { position: relative; }
.clonk-upgrades .shop-upgrade-list li { flex-wrap: wrap; }
.clonk-upgrades form { margin: 0; flex-shrink: 0; }
@media (max-width: 700px) { .clonk-level-layout { grid-template-columns: 1fr; } }
.clonk-abilities { list-style: none; margin: .25rem 0; padding-left: 0; font-size: .8em; }
.clonk-abilities li { display: inline; }
[data-hint]:not(.button-hint) { text-decoration: underline dashed; text-underline-offset: .15em; }
.clonk-bash-screen .clonk-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.clonk-bash-candidate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr auto; gap: .5rem 1rem; min-height: 20rem; }
.clonk-bash-candidate > .clonk-image { position: absolute; top: 1rem; right: 1rem; width: 60%; height: calc(100% - 2rem); min-height: 0; }
.clonk-bash-candidate > .clonk-image + h3 { grid-column: 1; grid-row: 1; margin: 0; text-align: left; overflow-wrap: anywhere; }
.clonk-bash-candidate > .clonk-stats { grid-column: 1; grid-row: 2; }
.clonk-bash-candidate > .clonk-abilities { grid-column: 1; grid-row: 3; min-width: 0; }
.clonk-bash-candidate > form { grid-column: 1; grid-row: 4; }
.clonk-bash-candidate > form button { max-width: 100%; }
.clonk-actions { display: flex; flex-wrap: nowrap; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.clonk-actions button { flex: 1 0 auto; padding: .5rem; font-size: .85em; background-color: rgb(239 239 239 / 50%); white-space: nowrap; }
.team-panel .clonk-actions { gap: .25rem; }
.team-panel .clonk-actions button { padding-inline: .25rem; }
.clonk-actions button:disabled { opacity: .45; cursor: default; }
.clonk-move-front .inline-icon { transform: rotate(180deg); }
.clonk-card-void { justify-content: center; text-align: center; border-style: dashed; background: transparent; }
.clonk-team-empty { min-height: 20rem; }
.clonk-empty-link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 1rem; color: inherit; text-decoration: none; border-radius: inherit; }
.clonk-empty-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1200px) { .clonk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .clonk-grid { grid-template-columns: 1fr; } }

.arena-entry { margin-top: 1.5rem; text-align: center; }
#fight-start-message:empty { display: none; }
.arena-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
#fight-controls.is-playing [data-fight-finished], #fight-controls:not(.is-playing) [data-fight-skip] { display: none; }
#fight-stage { position: relative; background: url('../img/clonk_fight_arena_backdrop.png') center -3.5rem / max(100%, 48rem) 42rem no-repeat; }
.arena-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.arena-team { min-width: 0; }
.arena-team-player { --arena-direction: 1; }
.arena-team-enemy { --arena-direction: -1; }
#fight-battlefield { padding-top: 5.625rem; overflow: clip; }
#fight-battlefield[data-phase="ready"] .arena-lineup, #fight-battlefield[data-phase="attack"] .arena-lineup { overflow: visible; }
.arena-team h3 { margin: 0; text-align: center; font-size: clamp(1rem, 2vw, 1.5rem); }
.arena-lineup { display: flex; align-items: center; gap: .5rem; min-height: 15rem; padding: 1rem .25rem; overflow-x: auto; }
.arena-team-player .arena-lineup { flex-direction: row-reverse; }
.arena-unit { position: relative; display: flex; flex-direction: column; box-sizing: border-box; flex: 0 0 clamp(5rem, 10vw, 8rem); padding: .4rem; font-size: clamp(.75rem, 1.4vw, 1rem); --arena-lunge: clamp(3rem, 10vw, 9rem); }
.arena-unit.is-active { flex-basis: clamp(6.5rem, 13vw, 10rem); }
.arena-sprite { position: relative; isolation: isolate; }
.arena-stars { position: absolute; inset: -.2rem; z-index: -1; pointer-events: none; }
.arena-stars::before, .arena-stars::after { position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1; background: url('../img/icons/clonk_icon_star.svg') center / contain no-repeat; opacity: .35; transform: translate(-50%, -50%); }
.arena-stars::before { content: ''; }
.arena-unit.is-acting .arena-stars::before, .arena-unit.is-acting .arena-stars::after { animation: arena-star-spin 2s linear infinite; }
.arena-unit.is-acting .arena-stars::after { content: ''; width: 85%; opacity: .25; animation-direction: reverse; animation-delay: -.25s; }
.arena-unit .clonk-image { display: block; height: clamp(4rem, 8vw, 7rem); }
.arena-unit.is-active .clonk-image { height: clamp(5rem, 10vw, 9rem); }
.arena-unit .clonk-stats { justify-content: center; gap: .25rem; }
.arena-unit .clonk-stats .inline-icon { width: 1.4em; height: 1.4em; }
.arena-team-enemy .clonk-image { transform: scaleX(-1); }
.arena-unit.is-dead .clonk-image { opacity: .4; filter: grayscale(1); transform: rotate(-20deg); }
.arena-team-enemy .arena-unit.is-dead .clonk-image { transform: scaleX(-1) rotate(-20deg); }
.arena-unit.is-dead .clonk-stats { opacity: .6; }
.arena-unit.is-dead .arena-sprite::after { content: '×'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #a21a1a; font-size: 3rem; line-height: 1; text-shadow: 0 0 3px white; }
.arena-versus { position: relative; font-family: 'Jember Sketch', sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); }
.arena-result-stamp { position: absolute; top: 50%; left: 50%; z-index: 5; padding: .15em .3em; border: .1em solid currentColor; background: rgb(255 255 255 / 92%); font-family: 'Jember Sketch', sans-serif; font-size: clamp(1.5rem, 5vw, 3.5rem); line-height: 1.1; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%) rotate(-12deg); animation: arena-result-stamp .5s ease-out both; }
.arena-result-stamp.is-victory { color: #1e7540; }
.arena-result-stamp.is-defeat { color: #b3261e; }
@keyframes arena-result-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(2.5); } 65% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.arena-consumables { display: flex; justify-content: center; gap: .5rem; min-height: 1.5rem; }
.arena-consumable { display: inline-block; color: #238b45; font-size: 1rem; }
.arena-consumable.is-consumed { position: absolute; margin: 0; animation: arena-consumable-used .5s ease-out both; }
@keyframes arena-consumable-used { to { opacity: 0; transform: translateY(-2rem); } }
.arena-defeated { padding: 1rem; font-size: .85em; }
.arena-log-panel { margin-top: -1.5rem; }
.arena-log-panel h2 { margin-bottom: .5rem; }
.arena-log { box-sizing: border-box; height: 16rem; margin: 0; padding: 2rem calc(7.8125% + 1rem) .5rem; list-style: none; overflow-y: auto; scroll-behavior: smooth; background: url('../img/clonk_fanfold_paper.jpeg') center top / 100% 64rem repeat-y local; font-size: .8em; line-height: 2rem; }
.arena-log li + li { margin-top: 0; }
@media (max-width: 48rem) { .arena-log { padding-top: 1rem; background-size: 100% 32rem; } }
.arena-log li[data-turn]::before { content: attr(data-turn-label) ' '; font-family: 'Jember Sketch', sans-serif; }
.arena-log li:last-child::after { content: ''; display: inline-block; width: .5em; height: 1em; margin-left: .3em; vertical-align: -.1em; background: currentColor; animation: arena-log-cursor 1s step-end infinite; }
@keyframes arena-log-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.arena-log-us { color: #354f70; }
.arena-log-them { color: #78474b; }
.arena-reward-coin { margin-left: .25em; }
.arena-unit.is-reordering { animation-duration: var(--fight-tick); }
.arena-unit.is-ready { z-index: 2; animation: arena-ready var(--fight-tick) ease-in-out both; }
.arena-unit.is-attacking { z-index: 3; animation: arena-attack .3s ease-in-out both; }
.arena-unit.is-damaged .arena-sprite { animation: arena-damage .4s ease; }
@keyframes arena-ready {
	from { transform: none; }
	60% { transform: translateX(calc(-1rem * var(--arena-direction))) translateY(.3rem) rotate(calc(-12deg * var(--arena-direction))) scale(.95, 1.1); }
	to { transform: translateX(calc(-1.3rem * var(--arena-direction))) translateY(.2rem) rotate(calc(-15deg * var(--arena-direction))) scale(1.15, .9); }
}
@keyframes arena-attack {
	from { transform: translateX(calc(-1.3rem * var(--arena-direction))) translateY(.2rem) rotate(calc(-15deg * var(--arena-direction))) scale(1.15, .9); }
	42%, 52% { transform: translateX(calc(var(--arena-lunge) * var(--arena-direction))) translateY(-.65rem) rotate(calc(18deg * var(--arena-direction))) scale(1.25); }
	75% { transform: translateX(calc(-.3rem * var(--arena-direction))) translateY(.2rem) scale(.95, 1.05); }
	to { transform: none; }
}
@keyframes arena-damage { 50% { filter: drop-shadow(0 0 .45rem #bf4545); } }
@keyframes arena-star-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.arena-stat-effects { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.arena-particle-effects { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.arena-particle { position: absolute; color: #c52f36; font-weight: bold; line-height: 1; text-shadow: 0 1px 2px rgb(90 0 0 / 25%); animation: arena-particle-burst 1.2s ease-out both; }
.arena-damage-cause { position: absolute; z-index: 1; color: #a21a1a; font-family: 'Jember Sketch', sans-serif; font-size: clamp(.85rem, 1.8vw, 1.35rem); line-height: 1.1; text-align: center; overflow-wrap: anywhere; text-shadow: 0 0 3px white, 0 0 6px white, 0 1px 2px white; animation: arena-damage-cause .9s ease-out both; }
@keyframes arena-damage-cause { from { opacity: 0; transform: translate(-50%, -50%) scale(.65); } 20%, 65% { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.arena-repair-particle { color: #238b45; text-shadow: 0 1px 2px rgb(0 90 20 / 25%); }
@keyframes arena-particle-burst {
	from { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
	15% { opacity: 1; }
	55% { opacity: .9; transform: translate(calc(-50% + var(--particle-x) * .65), calc(-50% - var(--particle-rise))) rotate(calc(var(--particle-spin) * .6)) scale(1); }
	to { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-fall))) rotate(var(--particle-spin)) scale(.5); }
}
.arena-stat-change { position: absolute; padding: .15rem .45rem; border: 1px solid currentColor; border-radius: 1rem; background: rgb(255 255 255 / 95%); font-size: 1rem; font-weight: bold; line-height: 1.2; white-space: nowrap; animation: arena-stat-rise 1.6s ease-out both; }
.arena-stat-change.is-gain { color: #1e7540; }
.arena-stat-change.is-loss { color: #b3261e; }
.arena-countdown { position: absolute; inset: 0; z-index: 150; display: grid; place-items: center; pointer-events: none; }
.arena-countdown:empty { display: none; }
.arena-countdown-step { color: #6a4c00; font-family: 'Jember Sketch', sans-serif; font-size: clamp(3rem, 10vw, 7rem); line-height: 1.2; animation: arena-countdown-pop 1s ease-out both; }
.arena-countdown-step.is-fight { color: #8d3d34; }
@keyframes arena-countdown-pop { 0% { opacity: 0; transform: scale(.35); } 20% { opacity: 1; transform: scale(1.15); } 45%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes arena-stat-rise { 0% { opacity: 0; transform: translate(-50%, -100%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 3rem)); } }
@keyframes arena-stat-fade { 0%, 100% { opacity: 0; } 15% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	:where(.clonk-grid) > .clonk-card:not(:where(.has-appeared)) { animation: none; }
	.clonk-card.is-reordering, .arena-unit.is-reordering { animation: clonk-reorder .01ms step-end both !important; animation-delay: var(--clonk-order-delay, 0ms) !important; }
	.clonk-repair, .clonk-level-up { animation: none !important; }
	.arena-result-stamp { animation: none; }
	.arena-unit, .arena-unit .arena-sprite { animation: none !important; }
	.arena-stat-change { transform: translate(-50%, -100%); animation-name: arena-stat-fade; }
	.arena-consumable.is-consumed { animation-name: arena-stat-fade; }
	.arena-damage-cause { transform: translate(-50%, -50%); animation-name: arena-stat-fade; }
	.arena-particle { transform: translate(-50%, -50%); animation-name: arena-stat-fade; }
	.arena-stars::before, .arena-stars::after { animation: none !important; }
	.arena-countdown-step { animation-name: arena-stat-fade; }
	.arena-log { scroll-behavior: auto; }
	.arena-log li:last-child::after { animation: none; }
}

.spy-purchase { display: inline; }
.spy-team + .spy-team { margin-top: 2rem; }
.spy-team .clonk-grid { width: 40%; zoom: .4; }