/* ==========================================================================
   Insert Deck

   1 tokens            7 shop bar and       13 notices and small shop pieces
   2 base                cart drawer        14 cart and checkout
   3 type              8 footer             15 account and order pages
   4 parts             9 home               16 a deck of the visitor's own
   5 buttons          10 deck tiles         17 small screens and motion
   6 forms            11 the stage
                      12 the card list
                      12b every card, pointed at; making it yours

   Two rooms. With the lights on the page is cream ticket paper with ink
   outlines. With the lights off (data-theme="dark" on the root) it is the
   dark of the cabinet. Buttons, chips and tickets are objects: they keep
   their colours in both rooms.

   Rules that have to out-rank WooCommerce's own stylesheet start with the
   body's ID, #insertdeck.
   ========================================================================== */

/* ---------- 1 tokens ---------- */
:root {
	--ink: #16112B;
	--cabinet: #120E24;
	--cream: #FFF3DC;
	--cream-deep: #D8C69A;
	--violet: #6B3BFF;
	--violet-deep: #3D1FB3;
	--gold: #FFC83A;
	--gold-deep: #C98F12;
	--pink: #FF4F9A;
	--pink-deep: #C4286D;
	--teal: #14CFC0;
	--teal-deep: #0A948A;
	--white: #FFFFFF;
	--shine: rgba(255, 255, 255, .5);
	--screen-glow: #3A2A8C;
	--screen-mid: #1D1546;
	--scan: rgba(0, 0, 0, .2);

	/* the game's own colours: pips only */
	--pip-w: #F6EFCF;
	--pip-u: #2E7BD6;
	--pip-b: #2A2433;
	--pip-r: #E0472E;
	--pip-g: #2F9E5A;
	--pip-c: #B9B4C4;

	/* the room: lights on */
	--bg: #FFF3DC;
	--surface: #FFFBF1;
	--sunk: #F5E4C0;
	--fg: #16112B;
	--muted: #5E587A;
	--line: #16112B;
	--accent-text: #5A2BE8;
	--danger: #C4183C;
	--dot: rgba(22, 17, 43, .11);
	--grid: rgba(107, 59, 255, .17);

	--marquee-font: "Bungee", "Arial Black", Impact, sans-serif;
	--hud-font: "Press Start 2P", "Courier New", monospace;
	--body-font: "Rubik", "Segoe UI", system-ui, sans-serif;

	--bw: 3px;
	--travel: 6px;
	--wrap: 1180px;
	--gutter: clamp(16px, 4vw, 36px);
}
:root[data-theme="dark"] {
	--bg: #120E24;
	--surface: #1F1846;
	--sunk: #0B0818;
	--fg: #FFF3DC;
	--muted: #B8B1D8;
	--line: #FFF3DC;
	--accent-text: #A98DFF;
	--danger: #FF7A93;
	--dot: rgba(255, 243, 220, .10);
	--grid: rgba(169, 141, 255, .20);
	color-scheme: dark;
}

/* ---------- 2 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--bg);
	background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px);
	background-size: 16px 16px;
	color: var(--fg);
	font: 400 17px/1.6 var(--body-font);
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; font-weight: 700; }
.skip-link:focus { left: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.site-main { display: block; padding-block: clamp(22px, 4vw, 44px) clamp(52px, 8vw, 96px); }
.site-main--home { padding-top: 0; display: grid; gap: clamp(44px, 7vw, 80px); }

/* ---------- 3 type ---------- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--marquee-font); font-weight: 400; text-transform: uppercase; line-height: 1.05; }
h1 { font-size: clamp(30px, 5vw, 50px); }
h2 { font-size: clamp(24px, 3.6vw, 36px); }
h3 { font: 800 19px/1.25 var(--body-font); }
.hud { font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { margin: 0; color: var(--accent-text); }
.pagehead { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.pagehead p { margin: 0; max-width: 62ch; }
.sec { display: grid; gap: 26px; }
.sec__head { display: grid; gap: 10px; }
.sec__more { margin: 0; padding-bottom: 10px; }
.entry--prose { max-width: 68ch; }
.entry > :last-child { margin-bottom: 0; }
.empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: var(--muted); }
.post { margin-bottom: 34px; }
.post__title { font-size: 26px; margin-bottom: 8px; }
.post__title a { color: var(--fg); text-decoration: none; }

/* the wordmark: marquee capitals on a stack of sleeves */
.wordmark {
	--a: var(--pink);
	--b: var(--teal);
	--c: var(--violet);
	display: inline-block;
	font: 400 40px/.95 var(--marquee-font);
	text-transform: uppercase;
	color: var(--wm-fill, var(--cream));
	padding: 0 .2em .16em 0;
	transform: skewX(-6deg);
	transform-origin: left bottom;
	text-shadow:
		.012em .012em 0 var(--a), .024em .024em 0 var(--a), .036em .036em 0 var(--a), .048em .048em 0 var(--a),
		.060em .060em 0 var(--b), .072em .072em 0 var(--b), .084em .084em 0 var(--b), .096em .096em 0 var(--b),
		.108em .108em 0 var(--c), .120em .120em 0 var(--c), .132em .132em 0 var(--c), .144em .144em 0 var(--c);
}
.wordmark--xl { font-size: clamp(54px, 13vw, 140px); }
.wordmark--bar { font-size: 22px; white-space: nowrap; --wm-fill: var(--fg); }
.wordmark--foot { font-size: 34px; }

/* ---------- 4 parts ---------- */
.px { display: inline-block; flex: none; vertical-align: middle; }
.mark { display: block; flex: none; }

.crt {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 95% at 28% 18%, var(--screen-glow) 0%, var(--screen-mid) 46%, var(--cabinet) 82%);
	color: var(--cream);
}
.crt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
}
/* a screen that shows a picture has no scan lines: they would lie over the cards */
.crt--clear::after { content: none; }
.carpet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.stripes {
	height: 18px;
	border-bottom: var(--bw) solid var(--ink);
	background: repeating-linear-gradient(-45deg,
		var(--pink) 0 12px, var(--ink) 12px 15px,
		var(--teal) 15px 27px, var(--ink) 27px 30px,
		var(--gold) 30px 42px, var(--ink) 42px 45px,
		var(--violet) 45px 57px, var(--ink) 57px 60px);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 400 9px/1 var(--hud-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 8px 6px;
	border: 2px solid var(--ink);
	border-radius: 6px;
	background: var(--c, var(--gold));
	color: var(--ink);
	white-space: nowrap;
}
.chip--pink { --c: var(--pink); }
.chip--teal { --c: var(--teal); }
.chip--cream { --c: var(--cream); }
.chip--violet { --c: var(--violet); color: var(--cream); }

.pips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pip {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--line);
	display: grid;
	place-items: center;
	font: 800 11px/1 var(--body-font);
	background: var(--c);
	color: var(--t, var(--white));
}
.pip--w { --c: var(--pip-w); --t: var(--ink); }
.pip--u { --c: var(--pip-u); }
.pip--b { --c: var(--pip-b); --t: var(--cream); }
.pip--r { --c: var(--pip-r); }
.pip--g { --c: var(--pip-g); }
.pip--c { --c: var(--pip-c); --t: var(--ink); }

.ticket {
	--notch: var(--surface);
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 18px 8px;
	background: var(--gold);
	color: var(--ink);
	border: var(--bw) solid var(--ink);
	border-radius: 8px;
	font: 400 20px/1 var(--marquee-font);
	white-space: nowrap;
}
.ticket::before, .ticket::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--notch);
	border: var(--bw) solid var(--ink);
}
.ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket--lg { font-size: 30px; padding: 12px 24px 10px; }
.ticket del { opacity: .6; font-size: .7em; }
.ticket ins { text-decoration: none; }

.stats { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.stat { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; align-items: center; }
.stat dt { color: var(--muted); }
.stat dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 2.4ch; gap: 8px; align-items: center; }
.stat b { text-align: right; font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 10px; background: repeating-linear-gradient(90deg, var(--sunk) 0 7px, transparent 7px 10px); }
.bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v) * 1%);
	background: repeating-linear-gradient(90deg, var(--c, var(--accent-text)) 0 7px, transparent 7px 10px);
}
.bar--creatures { --c: var(--pink); }
.bar--lands { --c: var(--teal); }

.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.stages li { display: inline-flex; align-items: center; gap: 8px; }
.stages li[aria-current] { color: var(--fg); }
.lamp { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); background: var(--sunk); }
.lamp.is-on { background: var(--teal); }
.lamp.is-now { background: var(--gold); }

.fan { position: absolute; inset: 0; z-index: 2; }
.fan i {
	position: absolute;
	bottom: 14%;
	left: 50%;
	width: 26%;
	margin-left: -13%;
	aspect-ratio: 63 / 88;
	background: var(--c);
	border: var(--bw) solid var(--ink);
	border-radius: 8px;
	box-shadow: inset 0 0 0 4px var(--shine);
	transform-origin: 50% 125%;
	transform: rotate(var(--r));
}
.fan i:last-child::after {
	content: "";
	position: absolute;
	inset: 30% 26% 30% 32%;
	background: var(--violet);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.blink { animation: blink 1s steps(1, end) infinite; color: var(--gold); }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- 5 buttons ---------- */
.btn,
#insertdeck .button,
#insertdeck .wp-element-button,
#insertdeck .wc-block-components-button:not(.is-link) {
	--fill: var(--cream);
	--deep: var(--cream-deep);
	--label: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	height: auto;
	margin: 0;
	padding: 0 22px;
	font: 400 15px/1.1 var(--marquee-font);
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: var(--label);
	background: var(--fill);
	border: var(--bw) solid var(--ink);
	border-radius: 14px;
	box-shadow: 0 var(--travel) 0 var(--deep), 0 calc(var(--travel) + 3px) 0 var(--ink);
	cursor: pointer;
	opacity: 1;
	transition: transform .08s, box-shadow .08s;
}
.btn:hover,
#insertdeck .button:hover,
#insertdeck .wp-element-button:hover,
#insertdeck .wc-block-components-button:not(.is-link):hover {
	color: var(--label);
	background: var(--fill);
	transform: translateY(-2px);
	box-shadow: 0 calc(var(--travel) + 2px) 0 var(--deep), 0 calc(var(--travel) + 5px) 0 var(--ink);
}
.btn:active,
#insertdeck .button:active,
#insertdeck .wp-element-button:active,
#insertdeck .wc-block-components-button:not(.is-link):active {
	transform: translateY(var(--travel));
	box-shadow: 0 0 0 var(--deep), 0 3px 0 var(--ink);
}
/* gold: the step that moves the order forward */
.btn,
#insertdeck .button.alt,
#insertdeck .add_to_cart_button,
#insertdeck .single_add_to_cart_button,
#insertdeck .checkout-button,
#insertdeck .wc-block-components-button.contained,
#insertdeck .wc-block-cart__submit-button,
#insertdeck .wc-block-components-checkout-place-order-button {
	--fill: var(--gold);
	--deep: var(--gold-deep);
}
.btn--violet { --fill: var(--violet); --deep: var(--violet-deep); --label: var(--cream); }
.btn--cream { --fill: var(--cream); --deep: var(--cream-deep); }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 18px; --travel: 8px; border-radius: 16px; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 12px; --travel: 4px; border-radius: 10px; }
#insertdeck .button:disabled,
#insertdeck .button.disabled,
#insertdeck .wc-block-components-button:disabled {
	--fill: var(--sunk);
	--label: var(--muted);
	border: var(--bw) dashed var(--muted);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}
/* the tick or the spinner WooCommerce adds to a button must not push the label about */
#insertdeck .button.loading { opacity: .6; padding-right: 22px; }
#insertdeck .button.loading::after { position: static; margin-left: .5em; }
#insertdeck .button.added::after { margin-left: .5em; vertical-align: baseline; }

.pad {
	--fill: var(--pink);
	--deep: var(--pink-deep);
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	border: var(--bw) solid var(--ink);
	background: radial-gradient(circle at 34% 28%, var(--shine) 0 12%, transparent 13%), var(--fill);
	box-shadow: 0 5px 0 var(--deep), 0 8px 0 var(--ink);
	font: 400 20px/1 var(--marquee-font);
	color: var(--ink);
	cursor: pointer;
	transition: transform .08s, box-shadow .08s;
}
.pad:active { transform: translateY(5px); box-shadow: 0 0 0 var(--deep), 0 3px 0 var(--ink); }
.pad--teal { --fill: var(--teal); --deep: var(--teal-deep); }
.pad--sm { width: 32px; height: 32px; font-size: 16px; box-shadow: 0 3px 0 var(--deep), 0 6px 0 var(--ink); }
.pad--sm:active { transform: translateY(3px); box-shadow: 0 0 0 var(--deep), 0 3px 0 var(--ink); }
.pad:disabled { --fill: var(--sunk); --deep: var(--sunk); color: var(--muted); cursor: not-allowed; background: var(--sunk); border-style: dashed; border-color: var(--muted); box-shadow: none; transform: none; }

/* ---------- 6 forms ---------- */
/* (the cart and checkout blocks bring their own fields; those are dressed in section 14) */
#insertdeck .input-text,
#insertdeck select:not([class*="wc-block"]),
#insertdeck textarea:not([class*="wc-block"]),
#insertdeck input[type="search"] {
	max-width: 100%;
	font: 500 16px/1.3 var(--body-font);
	color: var(--fg);
	background-color: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 12px;
	padding: 11px 14px;
}
#insertdeck .input-text:focus-visible,
#insertdeck select:not([class*="wc-block"]):focus-visible,
#insertdeck textarea:not([class*="wc-block"]):focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#insertdeck label { font-weight: 500; }
#insertdeck .required { color: var(--danger); text-decoration: none; }

/* the add-on switches */
.bonuses { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.bonuses legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin-bottom: 10px; font-weight: 700; }
.bonus {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--surface);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 14px;
	cursor: pointer;
	min-width: 0;
}
.bonus input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bonus__switch {
	flex: none;
	position: relative;
	width: 54px;
	height: 30px;
	border-radius: 999px;
	background: var(--sunk);
	border: var(--bw) solid var(--line);
	transition: background .12s;
}
.bonus__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--muted);
	transition: transform .12s, background .12s;
}
.bonus input:checked + .bonus__switch { background: var(--teal); }
.bonus input:checked + .bonus__switch::after { transform: translateX(24px); background: var(--ink); }
.bonus input:focus-visible + .bonus__switch { outline: 3px solid var(--teal); outline-offset: 3px; }
.bonus__text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.bonus__text b { font-weight: 700; }
.bonus__text small { color: var(--muted); font-size: 13px; }
.bonus__price { font: 400 15px/1 var(--marquee-font); white-space: nowrap; }

/* the papers: one of three tiles, each with a small card that shows what it is made of */
.papers { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.papers legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.paper {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: start;
	gap: 10px;
	padding: 14px 12px 12px;
	color: var(--fg);
	cursor: pointer;
	min-width: 0;
}
.paper input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* the tile is a frame behind the label's content: the chosen one stands on a sleeve of its own */
.paper__frame {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 14px;
	transition: box-shadow .12s;
}
.paper:hover .paper__frame { box-shadow: 3px 3px 0 var(--teal), 3px 3px 0 var(--bw) var(--line); }
.paper input:checked ~ .paper__frame { box-shadow: 6px 6px 0 var(--teal), 6px 6px 0 var(--bw) var(--line); }
.paper input:focus-visible ~ .paper__frame { outline: 3px solid var(--teal); outline-offset: 3px; }
.paper__mark {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sunk);
	border: var(--bw) solid var(--line);
	transition: background .12s;
}
.paper__mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--ink);
	transform: scale(0);
	transition: transform .12s;
}
.paper input:checked ~ .paper__mark { background: var(--teal); }
.paper input:checked ~ .paper__mark::after { transform: scale(1); }
/* a card seen a little from below, so that its edge shows: paper, core, paper */
.paper__card {
	--edge: var(--cream);
	--core: var(--cream-deep);
	--face: var(--cream);
	position: relative;
	display: block;
	width: 40px;
	height: 56px;
	margin: 0 0 10px 2px;
	border: 2px solid var(--ink);
	border-radius: 5px;
	background:
		linear-gradient(var(--ink), var(--ink)) 50% 5px / 26px 22px no-repeat,
		linear-gradient(var(--ink), var(--ink)) 5px 33px / 26px 2px no-repeat,
		linear-gradient(var(--ink), var(--ink)) 5px 38px / 18px 2px no-repeat,
		var(--face);
	box-shadow: 0 2px 0 var(--edge), 0 6px 0 var(--core), 0 8px 0 var(--edge), 0 10px 0 var(--ink);
	transform: rotate(-4deg);
	overflow: hidden;
}
.paper--black-core .paper__card { --core: var(--ink); }
.paper--holo .paper__card { --face: linear-gradient(125deg, var(--pink) 0%, var(--gold) 30%, var(--teal) 62%, var(--violet) 100%); }
/* the foil catches the light when the tile is pointed at or chosen */
.paper--holo .paper__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, var(--shine) 50%, transparent 62%) 120% 0 / 300% 100% no-repeat;
	transition: background-position .5s;
}
.paper--holo:hover .paper__card::after,
.paper--holo input:checked ~ .paper__card::after { background-position: -20% 0; }
.paper__text { display: grid; gap: 2px; align-content: start; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.paper__text b { font-weight: 700; }
.paper__text small { color: var(--muted); font-size: 13px; }
.paper__price { font: 400 15px/1 var(--marquee-font); white-space: nowrap; }

/* ---------- 7 shop bar ---------- */
.shopbar { position: relative; z-index: 20; background: var(--surface); border-bottom: var(--bw) solid var(--line); }
.marquee { background: var(--ink); color: var(--cream); overflow: hidden; white-space: nowrap; }
.marquee__run { display: inline-flex; gap: 44px; padding: 8px 22px; animation: slide 32s linear infinite; }
.marquee__run span::before { content: "\2605\00a0"; color: var(--gold); }
.marquee:hover .marquee__run { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
/* (the buttons at the bar's end stand close together, as one group; the logo keeps its distance from the links) */
.shopbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 14px; }
.shopbar__logo { display: inline-flex; align-items: center; gap: 12px; margin-right: 12px; text-decoration: none; color: var(--fg); }
.shopbar__nav { flex: 1 1 auto; }
.shopbar__nav ul { display: flex; gap: 6px 24px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.shopbar__nav a { display: block; padding-block: 3px; color: var(--fg); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.shopbar__nav a:hover,
.shopbar__nav .current-menu-item > a { border-color: var(--gold); }
/* the lights switch: a round button like the account's, with the sun in it while the lights are on and the moon
   while they are off */
.lights {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 50%;
	cursor: pointer;
	--px-line: var(--line);
}
.lights:hover { background: var(--sunk); }
.lights:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.lights__moon,
:root[data-theme="dark"] .lights__sun { display: none; }
:root[data-theme="dark"] .lights__moon { display: block; }
.cartpill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background: var(--bg);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}
.cartpill:hover { color: var(--fg); background: var(--sunk); }
.cartpill__count.is-empty { --c: var(--sunk); border-color: var(--muted); color: var(--muted); }
/* the account: a small player beside the cart, with a lamp that is lit for whoever is logged in */
.acctpill {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	background: var(--bg);
	border: var(--bw) solid var(--line);
	border-radius: 50%;
}
.acctpill:hover { background: var(--sunk); }
.acctpill[aria-current="page"] { box-shadow: 0 0 0 3px var(--gold); }
.acctpill.is-in::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--teal);
	border: 2px solid var(--line);
}

/* the cart drawer: the cart beside the page */
.cartdrawer:not([open]) { display: none; }
.cartdrawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100%, 440px);
	max-width: none;
	height: 100%;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--surface);
	color: var(--fg);
	border: 0;
	border-left: var(--bw) solid var(--line);
}
.cartdrawer::backdrop { background: rgba(18, 14, 36, .62); }
.cartdrawer[open] { animation: drawer-in .2s ease-out; }
.cartdrawer[open]::backdrop { animation: scrim-in .2s ease-out; }
.cartdrawer.is-leaving { animation: drawer-out .16s ease-in forwards; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes scrim-in { from { opacity: 0; } }
/* the page behind stays where it is while the drawer is open */
html:has(.cartdrawer[open]) { overflow: hidden; scrollbar-gutter: stable; }
.cartdrawer__in { display: flex; flex-direction: column; height: 100%; }
.cartdrawer__in > .stripes { flex: none; height: 12px; }
.cartdrawer__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px 18px; border-bottom: var(--bw) solid var(--line); }
#insertdeck .cartdrawer__title { margin: 0; font: 400 24px/1 var(--marquee-font); text-transform: uppercase; }
.cartdrawer__close { margin-left: auto; }
.cartdrawer__alert { flex: none; margin: 0; padding: 10px 20px; background: var(--cabinet); color: var(--cream); font-size: 15px; border-bottom: var(--bw) solid var(--line); }
.cartdrawer__body { flex: 1; display: flex; flex-direction: column; min-height: 0; transition: opacity .12s; }
/* (important: after an add to cart WooCommerce's script leaves an opacity of its own on what it swapped in) */
.cartdrawer[aria-busy="true"] .cartdrawer__body { opacity: .55 !important; pointer-events: none; }
.cartdrawer__lines { flex: 1; min-height: 0; margin: 0; padding: 2px 20px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.cartline {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	grid-template-areas: "art text price" "art qty remove";
	align-items: start;
	gap: 10px 14px;
	padding: 18px 0;
	border-top: 2px dashed var(--sunk);
}
.cartline:first-child { border-top: 0; }
.cartline__art { grid-area: art; display: block; }
#insertdeck .cartline__art img { display: block; width: 76px; height: 76px; margin: 0; object-fit: cover; background: var(--cabinet); border: var(--bw) solid var(--ink); border-radius: 12px; }
.cartline__text { grid-area: text; min-width: 0; }
.cartline__name { display: block; font: 400 16px/1.15 var(--marquee-font); text-transform: uppercase; text-decoration: none; color: var(--fg); overflow-wrap: anywhere; }
a.cartline__name:hover { color: var(--accent-text); }
/* the paper and the add-ons of a line, as WooCommerce lists them */
#insertdeck .cartline dl.variation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 6px; margin: 6px 0 0; padding: 0; border: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
#insertdeck .cartline dl.variation dt { float: none; clear: none; margin: 0; padding: 0; font-weight: 700; color: var(--fg); }
#insertdeck .cartline dl.variation dd { float: none; margin: 0; padding: 0; }
#insertdeck .cartline dl.variation p { margin: 0; }
.cartline__price { grid-area: price; font: 400 16px/1.15 var(--marquee-font); white-space: nowrap; }
.cartline__qty { grid-area: qty; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.cartline__count { min-width: 1.6em; text-align: center; font: 400 17px/1 var(--marquee-font); font-variant-numeric: tabular-nums; }
.cartline__count b { font-weight: 400; }
.cartline__remove { grid-area: remove; align-self: center; justify-self: end; font-size: 13px; color: var(--muted); }
.cartline__remove:hover { color: var(--danger); }
.cartdrawer__foot { flex: none; display: grid; gap: 12px; padding: 16px 20px 28px; border-top: var(--bw) solid var(--line); background: var(--bg); }
.cartdrawer__sum { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; font-weight: 700; }
.cartdrawer__sum .ticket { --notch: var(--bg); }
.cartdrawer__sum--part { font-weight: 500; font-size: 15px; }
.cartdrawer__sum--part + .cartdrawer__sum--part { margin-top: -6px; }
.cartdrawer__sum--off { color: var(--accent-text); font-weight: 700; }
.cartdrawer__note { margin: 0; font-size: 13px; color: var(--muted); }
/* the free cards offer: where a cart stands with it, as a bar of two stretches (the cards to buy, the free ones) */
.freeplay { display: grid; gap: 8px; min-width: 0; padding: 12px 14px 14px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; }
.freeplay[hidden], .freeplay [hidden] { display: none; }
.freeplay__go { margin-left: 4px; font-weight: 700; white-space: nowrap; }
#insertdeck .freeplay p { margin: 0; max-width: none; }
.freeplay__say { font-size: 14px; line-height: 1.45; }
.freeplay__say strong { margin-right: 4px; font-weight: 800; }
.freeplay.is-won .freeplay__say strong { padding: 2px 7px; background: var(--teal); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; white-space: nowrap; }
.freeplay__meter { display: flex; gap: 6px; }
.freeplay__meter .bar { min-width: 0; height: 12px; }
.freeplay__bought { flex: var(--buy, 3) 1 0; }
.freeplay__given { flex: var(--free, 1) 1 0; --c: var(--teal); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--teal) 34%, var(--sunk)) 0 7px, transparent 7px 10px); }
.freeplay.is-blocked { border-style: dashed; }
.freeplay.is-blocked .freeplay__meter { display: none; }
.freeplay--page { max-width: 720px; margin: 0 0 24px; padding: 14px 18px 16px; border-radius: 18px; }
.freeplay--page .freeplay__say { font-size: 16px; }
/* (its line among a cart's discounts is the shop's to give and to take back: no button takes it out) */
#insertdeck .wc-block-components-chip__remove[aria-label*="cards free"],
#insertdeck .wc-block-components-chip__remove[aria-label*="card free"] { display: none; }
.cartdrawer__foot .btn { width: 100%; }
.cartdrawer__foot .btn + .btn { margin-top: 6px; }
.cartdrawer__empty { flex: 1; display: grid; gap: 12px; align-content: center; justify-items: center; padding: 30px 28px 60px; text-align: center; }
.cartdrawer__empty p { margin: 0; max-width: 30ch; }
#insertdeck .cartdrawer__lead { font: 400 22px/1.1 var(--marquee-font); text-transform: uppercase; }
.cartdrawer__empty .btn { margin-top: 8px; }

/* ---------- 8 footer ---------- */
.sitefoot { border-top: var(--bw) solid var(--line); }
.sitefoot .carpet { opacity: .3; }
.sitefoot__in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 22px 48px;
	align-items: start;
	padding-block: clamp(34px, 6vw, 64px);
}
.sitefoot__brand { display: grid; gap: 12px; justify-items: start; }
.sitefoot__logo { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.sitefoot__line { margin: 0; font: 400 18px/1.1 var(--marquee-font); text-transform: uppercase; color: var(--gold); }
.sitefoot__nav ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.sitefoot__nav a { color: var(--cream); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.sitefoot__nav a:hover { border-color: var(--gold); }
.sitefoot__note { grid-column: 1 / -1; margin: 0; max-width: 70ch; font-size: 14px; color: var(--cream); opacity: .85; }
.sitefoot__copy { grid-column: 1 / -1; margin: 0; color: var(--cream); opacity: .7; }

/* ---------- 9 home ---------- */
.hero { border-bottom: var(--bw) solid var(--line); }
.hero .carpet { -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 88%); mask-image: linear-gradient(90deg, transparent 50%, #000 88%); }
.hero__in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	gap: clamp(20px, 4vw, 44px);
	align-items: end;
	padding-block: clamp(26px, 5vw, 60px);
}
.hero__hud { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.hero__hud b { color: var(--gold); font-weight: 400; }
.hero__main { display: grid; gap: 18px; justify-items: start; }
.hero__name { font-size: inherit; line-height: 1; }
.hero__line { margin: 0; font: 400 clamp(20px, 3.4vw, 34px)/1.1 var(--marquee-font); color: var(--gold); text-transform: uppercase; }
.hero__copy { margin: 0; font-size: 18px; max-width: 46ch; }
.hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin: 0; padding-bottom: 12px; }
.hero__more { color: var(--cream); font-weight: 700; }
/* with two ways in (the shop's decks, and a deck of the visitor's own) the words' side is wider: the two buttons stand side by side */
@media (min-width: 821px) {
	.hero--two .hero__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); }
}
.hero__more:hover { color: var(--gold); }
.hero__side { display: grid; gap: 16px; justify-items: center; text-align: center; }
.hero__side .mark { width: min(100%, 210px); height: auto; }
.hero__side p { margin: 0; }

.pillars { display: grid; gap: 28px 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pillar { display: grid; gap: 8px; align-content: start; justify-items: start; counter-increment: step; }
.pillar h3::before { content: counter(step) ". "; color: var(--accent-text); }
.pillar p { margin: 0; font-size: 16px; }

.gameover { border: var(--bw) solid var(--line); border-radius: 26px; }
.gameover .carpet { opacity: .45; }
.gameover__in { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 6vw, 72px); }
.gameover__in p { margin: 0; }
.gameover__in p:last-child { padding-bottom: 12px; margin-top: 8px; }

/* ---------- 10 deck tiles ---------- */
#insertdeck ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
	gap: 40px 34px;
	margin: 0;
	padding: 4px 22px 22px 4px;
	list-style: none;
	clear: both;
}
#insertdeck ul.products::before,
#insertdeck ul.products::after { display: none; }
#insertdeck ul.products li.product { display: flex; width: auto; float: none; margin: 0; padding: 0; }
.deck {
	position: relative;
	flex: 1;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-width: 0;
	background: var(--surface);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 18px;
	box-shadow: 6px 6px 0 var(--pink), 6px 6px 0 3px var(--line), 12px 12px 0 var(--teal), 12px 12px 0 3px var(--line);
	transition: transform .14s, box-shadow .14s;
}
.deck:hover, .deck:focus-within {
	transform: translate(-4px, -4px);
	box-shadow: 10px 10px 0 var(--pink), 10px 10px 0 3px var(--line), 20px 20px 0 var(--teal), 20px 20px 0 3px var(--line);
}
.deck__art { display: block; aspect-ratio: 1; border-radius: 14px 14px 0 0; border-bottom: var(--bw) solid var(--line); }
#insertdeck .deck__art img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.deck__art .chip { position: absolute; top: 10px; left: 10px; z-index: 3; }
.deck__art .deck__cursor { left: auto; right: 10px; opacity: 0; }
.deck:hover .deck__cursor, .deck:focus-within .deck__cursor { opacity: 1; }
.deck__body { display: grid; gap: 10px; align-content: start; padding: 14px 16px 6px; min-width: 0; }
#insertdeck .deck__name { margin: 0; padding: 0; font: 400 19px/1.12 var(--marquee-font); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.deck__name a { color: var(--fg); text-decoration: none; }
.deck__name a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 16px; }
.deck__meta { margin: 0; font-size: 14px; color: var(--muted); }
.deck__foot { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 14px; padding: 12px 20px 22px; }
#insertdeck .deck__foot .button { min-height: 36px; margin: 0; padding: 0 14px; font-size: 12px; --travel: 4px; border-radius: 10px; }
#insertdeck .deck__foot .added_to_cart { flex-basis: 100%; padding: 0; font-size: 14px; font-weight: 700; }

.shoptools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 26px; }
#insertdeck .woocommerce-result-count { margin: 0; color: var(--muted); font-size: 15px; }
#insertdeck .woocommerce-ordering { margin: 0; }
#insertdeck .woocommerce-ordering select { padding: 8px 12px; font-size: 15px; }
#insertdeck .woocommerce-breadcrumb { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
#insertdeck .woocommerce-breadcrumb a { color: var(--muted); }
.crumb-sep { margin-inline: 8px; color: var(--accent-text); }
#insertdeck nav.woocommerce-pagination { margin-top: 38px; text-align: left; }
#insertdeck nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; }
#insertdeck nav.woocommerce-pagination ul li { border: 0; float: none; margin: 0; overflow: visible; }
#insertdeck nav.woocommerce-pagination ul li a,
#insertdeck nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	background: var(--surface);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 12px;
	font: 400 14px/1 var(--marquee-font);
	text-decoration: none;
}
#insertdeck nav.woocommerce-pagination ul li span.current { background: var(--gold); color: var(--ink); border-color: var(--ink); }

/* ---------- 11 the stage ---------- */
#insertdeck div.product { display: grid; gap: clamp(34px, 5vw, 60px); }
#insertdeck div.product::before, #insertdeck div.product::after { display: none; }
.stage {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(18px, 3vw, 34px);
	align-items: start;
	padding: clamp(14px, 2.6vw, 30px);
	border: var(--bw) solid var(--line);
	border-radius: 26px;
	background-color: var(--surface);
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 24px 24px;
}
.stage__screen { min-width: 0; }
#insertdeck div.product div.images { float: none; width: auto; margin: 0; }
#insertdeck div.product div.summary { float: none; width: auto; margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; container: summary / inline-size; }
#insertdeck div.product div.summary > * { margin: 0; }

/* the listing images play on a screen, with nothing laid over them */
#insertdeck .woocommerce-product-gallery { position: relative; }
#insertdeck .woocommerce-product-gallery .flex-viewport,
#insertdeck .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
	position: relative;
	overflow: hidden;
	background: var(--cabinet);
	border: var(--bw) solid var(--ink);
	border-radius: 22px;
}
#insertdeck .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
#insertdeck .woocommerce-product-gallery__trigger { top: 14px; right: 14px; z-index: 5; border: var(--bw) solid var(--ink); }
#insertdeck .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; overflow: visible; }
#insertdeck .woocommerce-product-gallery .flex-control-thumbs li { width: auto; float: none; margin: 0; list-style: none; }
#insertdeck .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: var(--bw) solid var(--line);
	border-radius: 10px;
	opacity: .55;
	cursor: pointer;
}
#insertdeck .woocommerce-product-gallery .flex-control-thumbs img:hover,
#insertdeck .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
#insertdeck .woocommerce-product-gallery .flex-control-thumbs img.flex-active { box-shadow: 0 0 0 3px var(--gold); }

.stage__chips { display: flex; flex-wrap: wrap; gap: 8px; }
#insertdeck .stage__name { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.04; }
#insertdeck .woocommerce-product-details__short-description p { margin: 0; }

#insertdeck form.cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; margin: 4px 0 0; }
#insertdeck form.cart .papers,
#insertdeck form.cart .packs,
#insertdeck form.cart .packcost,
#insertdeck form.cart .bonuses { grid-column: 1 / -1; }
#insertdeck form.cart .ticket { justify-self: start; }
#insertdeck form.cart .quantity { display: inline-flex; align-items: center; gap: 10px; float: none; margin: 0; justify-self: end; padding-bottom: 8px; }
#insertdeck form.cart .quantity .qty {
	width: 2.6em;
	padding: 0;
	text-align: center;
	font: 400 22px/1 var(--marquee-font);
	color: var(--fg);
	background: transparent;
	border: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
#insertdeck form.cart .quantity .qty::-webkit-inner-spin-button,
#insertdeck form.cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#insertdeck form.cart .single_add_to_cart_button { grid-column: 1 / -1; float: none; min-height: 60px; font-size: 18px; --travel: 8px; border-radius: 16px; margin-bottom: 11px; }
#insertdeck .product_meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--muted); }
#insertdeck .product_meta a { color: var(--muted); }
#insertdeck .stock { margin: 0; font-weight: 700; color: var(--fg); }
#insertdeck .stock.out-of-stock { color: var(--danger); }

/* below the stage, the stat screen: how strong the deck is and how its costs are spread */
.statscreen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 34px); }
.statscreen--one { grid-template-columns: minmax(0, 1fr); }
.statpanel {
	display: grid;
	gap: 12px;
	align-content: start;
	justify-items: start;
	min-width: 0;
	padding: clamp(18px, 3vw, 32px);
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 18px;
}
.statpanel > * { margin: 0; }
#insertdeck .statpanel__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: clamp(20px, 2.6vw, 26px); }
.statpanel__title span { color: var(--accent-text); }
.statpanel__list { font-size: 15px; }
.statpanel__note { font-size: 14px; color: var(--muted); }

.meter { display: inline-flex; align-items: flex-end; gap: 6px; }
.meter i { width: 30px; background: var(--sunk); border: 2px solid var(--line); border-radius: 4px; }
.meter i:nth-child(1) { height: 12px; }
.meter i:nth-child(2) { height: 18px; }
.meter i:nth-child(3) { height: 24px; }
.meter i:nth-child(4) { height: 30px; }
.meter i:nth-child(5) { height: 36px; }
.meter i.is-on { background: var(--teal); }
.meter i.is-now { background: var(--gold); }

.curve {
	justify-self: stretch;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: clamp(4px, 1.4vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.curve li { display: grid; gap: 8px; min-width: 0; }
.curve__track { display: flex; align-items: flex-end; justify-content: center; height: 164px; border-bottom: var(--bw) solid var(--line); }
.curve__bar { position: relative; width: min(100%, 46px); height: var(--h); background: repeating-linear-gradient(0deg, var(--accent-text) 0 7px, transparent 7px 10px); }
.curve__bar b { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); font: 400 15px/1 var(--marquee-font); font-variant-numeric: tabular-nums; }
.curve .is-empty b { color: var(--muted); }
.curve__mv { color: var(--muted); }

/* ---------- 12 the card list, and the other tabs ---------- */
#insertdeck .woocommerce-tabs { margin: 0; padding: 0; }
#insertdeck .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; list-style: none; overflow: visible; }
#insertdeck .woocommerce-tabs ul.tabs::before,
#insertdeck .woocommerce-tabs ul.tabs li::before,
#insertdeck .woocommerce-tabs ul.tabs li::after { display: none; }
#insertdeck .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 999px; }
#insertdeck .woocommerce-tabs ul.tabs li a { display: block; padding: 8px 18px; font: 700 15px/1.2 var(--body-font); color: var(--fg); text-decoration: none; }
#insertdeck .woocommerce-tabs ul.tabs li.active { background: var(--fg); }
#insertdeck .woocommerce-tabs ul.tabs li.active a { color: var(--bg); }
#insertdeck .woocommerce-Tabs-panel {
	margin: 0;
	padding: clamp(18px, 3vw, 32px);
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 18px;
}
#insertdeck .woocommerce-Tabs-panel > h2 { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 18px; }
.is-deck #tab-description { columns: 3 220px; column-gap: 38px; }
.is-deck #tab-description > h2 { column-span: all; }
.is-deck #tab-description h3 {
	margin: 0 0 8px;
	padding-top: 6px;
	font: 400 10px/1.7 var(--hud-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-text);
	break-after: avoid;
}
.is-deck #tab-description ul { margin: 0 0 18px; padding: 0; list-style: none; font-size: 15px; }
.is-deck #tab-description li { padding: 3px 0; border-bottom: 2px dotted var(--sunk); break-inside: avoid; }

/* ---------- 12b every card, pointed at; making it yours ---------- */
/* the list the theme draws in place of the description: the panel itself is no longer in columns, its groups are */
.is-deck #tab-description:has(.cardlist) { columns: auto; }
.cardlist { display: grid; gap: 22px; }
.cardlist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
#insertdeck .cardlist__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: clamp(20px, 2.6vw, 26px); scroll-margin-top: 110px; }
.cardlist__groups { columns: 3 230px; column-gap: 38px; }
.cardgroup__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 8px;
	padding-top: 6px;
	font: 400 10px/1.7 var(--hud-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-text);
	break-after: avoid;
}
.cardgroup__count { color: var(--fg); }
.cardgroup__note { font: 500 12px/1 var(--body-font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cardgroup__list { margin: 0 0 18px; padding: 0; list-style: none; font-size: 15px; }
.cardrow {
	display: grid;
	grid-template-columns: 2.2ch minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 2px 0;
	border-bottom: 2px dotted var(--sunk);
	break-inside: avoid;
}
.cardrow__qty { font: 700 13px/1 var(--body-font); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cardrow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); text-decoration: none; cursor: zoom-in; }
.cardrow__name:hover,
.cardrow__name:focus-visible { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cardlist__note { margin: 0; font-size: 13px; color: var(--muted); }

/* the same cards as pictures: each with how many of it, the bonus rounds after the deck */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; }
.cardgrid[hidden], .cardlist__groups[hidden] { display: none; }
.cardgrid__item { position: relative; display: grid; gap: 6px; }
.cardgrid__pic { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.cardgrid__pic img { display: block; width: 100%; height: auto; aspect-ratio: 146 / 204; border-radius: 7px; background: var(--sunk); box-shadow: 0 0 0 2px var(--line); }
.cardgrid__pic:hover img, .cardgrid__pic:focus-visible img { box-shadow: 0 0 0 2px var(--line), 5px 5px 0 var(--violet); }
.cardgrid__qty { position: absolute; top: -8px; left: -8px; z-index: 1; }
.cardgrid__name { font-size: 13px; line-height: 1.25; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardgrid__head { grid-column: 1 / -1; margin: 6px 0 -6px; font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* two buttons as one switch: the one that is pressed is lit */
.seg { display: inline-flex; padding: 3px; gap: 3px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface); }
.seg[hidden] { display: none; }
.seg__btn { padding: 7px 14px; font: 700 13px/1 var(--body-font); color: var(--fg); background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.seg__btn[aria-pressed="true"] { color: var(--bg); background: var(--fg); }
.seg__btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* what a card costs: a coin for each symbol */
.mana { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ms {
	--c: var(--pip-c);
	--t: var(--ink);
	display: inline-grid;
	place-items: center;
	width: 17px;
	height: 17px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: var(--c);
	color: var(--t);
	font: 800 9px/1 var(--body-font);
	font-style: normal;
	text-transform: uppercase;
}
.ms--w { --c: var(--pip-w); }
.ms--u { --c: var(--pip-u); --t: var(--white); }
.ms--b { --c: var(--pip-b); --t: var(--cream); }
.ms--r { --c: var(--pip-r); --t: var(--white); }
.ms--g { --c: var(--pip-g); --t: var(--white); }
.ms--n { --c: var(--sunk); --t: var(--fg); }
.ms--two { background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); --t: var(--ink); }
.ms--life { box-shadow: inset 0 0 0 2px var(--shine); }
.mana__or { margin: 0 2px; color: var(--muted); font-size: 12px; }

/* the card itself, while its name is pointed at: beside the pointer, never under it */
.cardpeek {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100000;
	display: flex;
	gap: 10px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .12s, transform .12s;
}
.cardpeek.is-on { opacity: 1; transform: none; }
.cardpeek img {
	display: block;
	width: 244px;
	height: auto;
	aspect-ratio: 488 / 680;
	border-radius: 12px;
	background: var(--cabinet);
	box-shadow: 0 0 0 var(--bw) var(--ink), 8px 8px 0 var(--violet), 8px 8px 0 var(--bw) var(--ink);
}

/* tapped, or opened from the keyboard: the card large, over a dimmed page, with its back where it has one */
.cardsheet {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
}
.cardsheet:not([open]) { display: none; }
.cardsheet::backdrop { background: rgba(18, 14, 36, .78); }
.cardsheet__in { display: grid; justify-items: center; gap: 16px; padding: 18px; }
.cardsheet__card { position: relative; perspective: 1400px; }
.cardsheet__card img {
	display: block;
	width: min(84vw, 380px);
	height: auto;
	aspect-ratio: 488 / 680;
	border-radius: 4.6% / 3.3%;
	background: var(--cabinet);
	box-shadow: 0 0 0 var(--bw) var(--ink), 10px 10px 0 var(--violet), 10px 10px 0 var(--bw) var(--ink);
}
.cardsheet__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cardsheet__tools [hidden] { display: none; } /* "Turn it over", for a card without a back */

/* beside the price: how many cards there are, and the way down to them */
.seeall { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 400 10px/1.6 var(--hud-font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; }
.seeall:hover, .seeall:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.seeall__arrow { width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); animation: seeall 1.4s ease-in-out infinite; }
@keyframes seeall { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

/* every card can be changed: said beside the price, and over the list as a screen that asks */
.makeit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 14px;
	border: var(--bw) dashed var(--violet);
	border-radius: 16px;
	background: color-mix(in srgb, var(--violet) 9%, var(--surface));
}
.makeit[hidden] { display: none; }
.makeit__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: var(--bw) solid var(--ink);
	background: radial-gradient(circle at 34% 28%, var(--shine) 0 12%, transparent 13%), var(--pink);
	box-shadow: 0 4px 0 var(--pink-deep), 0 7px 0 var(--ink);
}
.makeit__text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.makeit__title { display: block; font: 400 16px/1.15 var(--marquee-font); text-transform: uppercase; color: var(--fg); margin-bottom: 2px; }
.makeit__go .px { margin-left: -4px; }
.makeit--wide {
	position: relative;
	overflow: hidden;
	padding: clamp(16px, 2.6vw, 24px) clamp(16px, 3vw, 28px);
	border: var(--bw) solid var(--ink);
	border-radius: 18px;
	background: radial-gradient(120% 140% at 12% 0%, var(--screen-glow) 0%, var(--screen-mid) 50%, var(--cabinet) 90%);
	color: var(--cream);
	box-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--teal);
	margin: 0 12px 12px 0;
}
.makeit--wide .makeit__text { color: rgba(255, 243, 220, .82); font-size: 15px; }
.makeit--wide .makeit__title { color: var(--gold); font-size: clamp(17px, 2vw, 21px); }
.makeit--wide .makeit__go { --fill: var(--gold); --deep: var(--gold-deep); --label: var(--ink); }

#insertdeck section.related, #insertdeck section.upsells { display: grid; gap: 22px; }
#insertdeck section.related > h2, #insertdeck section.upsells > h2 { font-size: clamp(22px, 3vw, 30px); }

/* reviews */
#insertdeck #reviews #comments ol.commentlist { margin: 0; padding: 0; list-style: none; }
#insertdeck #review_form #respond { margin-top: 18px; }
#insertdeck #review_form #respond textarea { width: 100%; }
#insertdeck .star-rating { color: var(--gold-deep); }
#insertdeck p.stars a { color: var(--gold-deep); }

/* ---------- 13 notices and small shop pieces ---------- */
#insertdeck .woocommerce-notices-wrapper:empty { display: none; }
#insertdeck .woocommerce-message,
#insertdeck .woocommerce-info,
#insertdeck .woocommerce-error,
#insertdeck .wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--cabinet);
	color: var(--cream);
	border: var(--bw) solid var(--line);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--teal);
	list-style: none;
	font-size: 16px;
}
#insertdeck .woocommerce-message::before,
#insertdeck .woocommerce-info::before,
#insertdeck .woocommerce-error::before { display: none; }
#insertdeck .woocommerce-info, #insertdeck .wc-block-components-notice-banner.is-info { box-shadow: 5px 5px 0 var(--violet); }
#insertdeck .woocommerce-error, #insertdeck .wc-block-components-notice-banner.is-error { box-shadow: 5px 5px 0 var(--pink); }
#insertdeck .woocommerce-message a:not(.button),
#insertdeck .woocommerce-info a:not(.button),
#insertdeck .woocommerce-error a:not(.button),
#insertdeck .wc-block-components-notice-banner a { color: var(--gold); }
#insertdeck .woocommerce-message .button,
#insertdeck .woocommerce-info .button,
#insertdeck .woocommerce-error .button { order: 2; float: none; margin-left: auto; min-height: 36px; padding: 0 14px; font-size: 12px; --travel: 4px; border-radius: 10px; margin-bottom: 7px; }
#insertdeck .woocommerce-error li { margin: 0; }
#insertdeck .wc-block-components-notice-banner > svg { background: var(--cream); fill: var(--ink); }
#insertdeck .wc-block-components-notice-banner__content { color: var(--cream); }

#insertdeck table.shop_table { width: 100%; border: var(--bw) solid var(--line); border-radius: 16px; border-collapse: separate; border-spacing: 0; background: var(--surface); overflow: hidden; }
#insertdeck table.shop_table th, #insertdeck table.shop_table td { padding: 12px 16px; border-top: 2px dashed var(--sunk); text-align: left; }
#insertdeck table.shop_table thead th { border-top: 0; font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: var(--bw) solid var(--line); }
#insertdeck .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; width: auto; }
#insertdeck .col2-set .col-1, #insertdeck .col2-set .col-2 { float: none; width: auto; }

/* ---------- 14 cart and checkout ---------- */
#insertdeck .wc-block-cart,
#insertdeck .wc-block-checkout { font-family: var(--body-font); color: var(--fg); }
#insertdeck .wc-block-cart-items,
#insertdeck .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper,
#insertdeck .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 18px;
}
#insertdeck .wc-block-cart-items { border-collapse: separate; border-spacing: 0; overflow: hidden; }
#insertdeck .wc-block-cart-items th,
#insertdeck .wc-block-cart-items td { border: 0; }
#insertdeck .wc-block-cart-items th { padding: 14px 16px; font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: var(--bw) solid var(--line); visibility: visible; }
#insertdeck .wc-block-cart-items td { padding: 16px; border-top: 2px dashed var(--sunk); }
#insertdeck .wc-block-cart-items .wc-block-cart-items__row:first-child td { border-top: 0; }
#insertdeck .wc-block-cart-item__image img { border: var(--bw) solid var(--ink); border-radius: 12px; }
#insertdeck .wc-block-components-product-name { font: 400 17px/1.15 var(--marquee-font); text-transform: uppercase; color: var(--fg); text-decoration: none; }
#insertdeck .wc-block-components-product-metadata,
#insertdeck .wc-block-components-product-details { color: var(--muted); font-size: 14px; }
#insertdeck .wc-block-components-product-details__name { font-weight: 700; color: var(--fg); }
#insertdeck .wc-block-cart-item__total .wc-block-components-product-price__value,
#insertdeck .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--marquee-font); font-weight: 400; }
#insertdeck .wc-block-components-quantity-selector { border: var(--bw) solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
#insertdeck .wc-block-components-quantity-selector::after { display: none; }
#insertdeck .wc-block-components-quantity-selector__input { color: var(--fg); font-weight: 700; background: transparent; }
#insertdeck .wc-block-components-quantity-selector__button { color: var(--fg); opacity: 1; min-width: 34px; }
#insertdeck .wc-block-components-quantity-selector__button:hover { background: var(--sunk); }
#insertdeck .wc-block-cart-item__remove-link { color: var(--muted); }
#insertdeck .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper { padding: 16px 18px; margin-bottom: 14px; }
#insertdeck .wc-block-checkout .wc-block-components-totals-wrapper { border-top: 2px dashed var(--sunk); }
#insertdeck .wc-block-components-order-summary-item .wc-block-components-product-name { font: 700 15px/1.3 var(--body-font); text-transform: none; word-break: normal; overflow-wrap: break-word; }
#insertdeck .wc-block-components-order-summary-item__description { min-width: 0; }
#insertdeck .wc-block-cart__totals-title,
#insertdeck .wc-block-components-checkout-step__title,
#insertdeck .wc-block-components-checkout-order-summary__title-text { font: 400 18px/1.15 var(--marquee-font); letter-spacing: .01em; text-transform: uppercase; color: var(--fg); }
#insertdeck .wc-block-components-totals-item__label { font-weight: 500; }
#insertdeck .wc-block-components-panel__button { color: var(--fg); }
#insertdeck .wc-block-cart__submit-container { padding-bottom: 12px; }
#insertdeck .wc-block-components-button:not(.is-link) { width: 100%; min-height: 56px; font-size: 16px; }
#insertdeck .wc-block-components-button:not(.is-link) .wc-block-components-button__text { font: inherit; }
#insertdeck .wc-block-components-checkout-place-order-button { margin-bottom: 12px; }
#insertdeck .wc-block-checkout__actions_row { align-items: center; gap: 14px; }

#insertdeck .wc-block-components-text-input input,
#insertdeck .wc-block-components-textarea,
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__select,
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--surface);
	color: var(--fg);
	border-radius: 12px;
}
#insertdeck .wc-block-components-text-input input,
#insertdeck .wc-block-components-textarea,
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__container { border: var(--bw) solid var(--line); }
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__select { border: 0; }
#insertdeck .wc-block-components-text-input label,
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--muted); }
#insertdeck .wc-block-components-text-input input:focus,
#insertdeck .wc-blocks-components-select .wc-blocks-components-select__select:focus { outline: 3px solid var(--teal); outline-offset: 2px; box-shadow: none; }
#insertdeck .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border: var(--bw) solid var(--line); border-radius: 6px; background-color: var(--surface); }
#insertdeck .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background-color: var(--teal); }
#insertdeck .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--ink); }
#insertdeck .wc-block-components-radio-control__input { border: var(--bw) solid var(--line); background: var(--surface); }
#insertdeck .wc-block-components-radio-control__input:checked::before { background: var(--violet); }
#insertdeck .wc-block-components-radio-control--highlight-checked,
#insertdeck .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
#insertdeck .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option { border-radius: 12px; }
#insertdeck .wc-block-components-radio-control--highlight-checked::after { border: var(--bw) solid var(--line); border-radius: 14px; }
#insertdeck .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
#insertdeck .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 3px var(--violet); }
#insertdeck .wp-block-woocommerce-checkout-order-summary-block { padding: 6px 18px; }
#insertdeck .wc-block-components-order-summary-item__image img { border: 2px solid var(--ink); border-radius: 8px; }
#insertdeck .wc-block-components-order-summary-item__quantity { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
#insertdeck .wc-block-cart__empty-cart__title { font-family: var(--marquee-font); font-weight: 400; text-transform: uppercase; }
#insertdeck .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { font-family: var(--marquee-font); font-weight: 400; text-transform: uppercase; color: var(--fg); }
#insertdeck .wc-block-components-validation-error { color: var(--danger); }
#insertdeck .has-error input { border-color: var(--danger); }

/* ---------- 15 account and order pages ---------- */
/* WooCommerce clears its floats with two generated boxes. In a grid each of them would take a cell
   and push what the page holds into the wrong column. */
#insertdeck.woocommerce-account .woocommerce::before,
#insertdeck.woocommerce-account .woocommerce::after { display: none; }
#insertdeck.woocommerce-account .woocommerce:has(> .acctside) { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px 44px; align-items: start; }
#insertdeck .woocommerce-MyAccount-navigation, #insertdeck .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }

/* beside every account page: the player's card, and under it the menu */
.acctside { display: grid; gap: 26px; min-width: 0; }
.playercard {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-content: center;
	margin: 0 10px 0 0;
	padding: 16px;
	background: var(--surface);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 18px;
	box-shadow: 5px 5px 0 var(--pink), 5px 5px 0 var(--bw) var(--line), 10px 10px 0 var(--teal), 10px 10px 0 var(--bw) var(--line);
}
.playercard p { margin: 0; min-width: 0; }
.playercard__face { grid-row: 1 / span 3; display: grid; place-items: center; width: 62px; height: 62px; border: var(--bw) solid var(--ink); border-radius: 14px; background: radial-gradient(120% 95% at 28% 18%, var(--screen-glow) 0%, var(--screen-mid) 46%, var(--cabinet) 82%); }
.playercard__name { font: 400 18px/1.15 var(--marquee-font); text-transform: uppercase; overflow-wrap: anywhere; }
.playercard__mail { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#insertdeck .woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 18px; }
#insertdeck .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
#insertdeck .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--fg); border-radius: 11px; font-weight: 700; text-decoration: none; }
#insertdeck .woocommerce-MyAccount-navigation a:hover { background: var(--sunk); }
#insertdeck .woocommerce-MyAccount-navigation .is-active a { background: var(--fg); color: var(--bg); }
/* the cursor of a game's menu, at the page that is open */
#insertdeck .woocommerce-MyAccount-navigation a::after { content: ""; margin-left: auto; border-block: 6px solid transparent; border-right: 9px solid transparent; }
#insertdeck .woocommerce-MyAccount-navigation .is-active a::after { border-right-color: var(--gold); }
#insertdeck .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 4px; padding-top: 6px; border-top: 2px dashed var(--sunk); }

/* what an account page holds */
#insertdeck .woocommerce-MyAccount-content > p { max-width: 64ch; }
#insertdeck .woocommerce-MyAccount-content mark,
#insertdeck .woocommerce-order mark { background: none; color: inherit; font-weight: 700; }
/* the last order, as a ticket with its stub */
.lastorder { display: grid; gap: 12px; max-width: 660px; margin-top: 24px; padding: 20px 22px 22px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 18px; }
.lastorder p { margin: 0; }
#insertdeck .lastorder .lastorder__title { margin: 0; font: 400 clamp(22px, 3vw, 28px)/1.05 var(--marquee-font); text-transform: uppercase; }
.lastorder__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px 22px; margin: 4px 0; padding: 14px 0; border-block: 2px dashed var(--sunk); }
.lastorder__facts dt { font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lastorder__facts dd { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-weight: 700; }
.lastorder__go { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 9px; }
/* the decks the account's owner brought: the shop's tiles, and the way to bring another */
.mydecks { display: grid; gap: 20px; min-width: 0; }
#insertdeck .mydecks__note { margin: 0; max-width: 60ch; font-size: 15px; color: var(--muted); }
#insertdeck .mydecks__go { margin: 6px 0 0; padding-bottom: 9px; }
.mydecks__none { margin-top: 0; }
/* (a tile's name is a heading here too, and keeps the tile's own type among the account's headings) */
#insertdeck .woocommerce-MyAccount-content .deck__name { margin: 0; font: 400 19px/1.12 var(--marquee-font); }
.orderlamp { display: inline-flex; align-items: center; gap: 8px; }
.lamp { flex: none; }
#insertdeck .woocommerce-orders-table .button { min-height: 36px; padding: 0 14px; font-size: 12px; --travel: 4px; border-radius: 10px; margin-bottom: 7px; }
#insertdeck .woocommerce-orders-table__cell-order-number a { font-weight: 700; }
#insertdeck .woocommerce-pagination { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; padding-bottom: 9px; }
#insertdeck table.shop_table tfoot th { color: var(--muted); font-weight: 500; }
#insertdeck table.shop_table .product-total, #insertdeck table.shop_table tfoot td:has(.amount) { text-align: right; }
/* an amount stays in one piece; a buyer's note, which stands in the same column, reads as plain text and runs on as it needs */
#insertdeck table.shop_table .amount { white-space: nowrap; }
#insertdeck table.shop_table tfoot td { font-weight: 400; }
#insertdeck table.shop_table tfoot td .amount { font-weight: 700; }
#insertdeck table.shop_table .product-quantity { font-weight: 500; color: var(--muted); }
#insertdeck ul.wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
#insertdeck ul.wc-item-meta li { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; }
#insertdeck ul.wc-item-meta p { margin: 0; }
#insertdeck .wc-item-meta-label { font-weight: 700; color: var(--fg); }
#insertdeck p.order-again { margin: 18px 0 0; padding-bottom: 9px; }
/* the addresses, each a card with its own way in */
#insertdeck .woocommerce-Address { padding: 18px 20px 20px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 18px; }
#insertdeck .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px dashed var(--sunk); }
#insertdeck .woocommerce-Address-title::before, #insertdeck .woocommerce-Address-title::after { display: none; }
#insertdeck .woocommerce-Address .woocommerce-Address-title h2 { float: none; margin: 0; }
#insertdeck .woocommerce-Address-title .edit { float: none; padding: 6px 12px; background: var(--bg); color: var(--fg); border: var(--bw) solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; }
#insertdeck .woocommerce-Address-title .edit:hover { background: var(--sunk); }
#insertdeck .woocommerce-Address address { padding: 0; background: none; border: 0; border-radius: 0; }

/* forms: the login, and the ones that change an address or the account */
#insertdeck form.woocommerce-form-login,
#insertdeck form.woocommerce-form-register,
#insertdeck form.woocommerce-ResetPassword,
#insertdeck form.checkout_coupon,
#insertdeck .woocommerce-MyAccount-content > form { margin: 0; padding: 22px 22px 24px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 18px; }
#insertdeck form.woocommerce-ResetPassword,
#insertdeck form.checkout_coupon { max-width: 460px; }
#insertdeck .woocommerce-MyAccount-content > form { max-width: 660px; }
#insertdeck .woocommerce-MyAccount-content > form > h2:first-child,
#insertdeck .woocommerce-MyAccount-content > form > h3:first-child { margin-top: 0; }
#insertdeck .woocommerce form .form-row .input-text { width: 100%; }
#insertdeck .woocommerce form .form-row { float: none; width: auto; margin: 0 0 14px; padding: 0; }
#insertdeck .woocommerce form .form-row label { display: block; margin-bottom: 4px; line-height: 1.5; }
#insertdeck .woocommerce form .form-row::before, #insertdeck .woocommerce form .form-row::after { display: none; }
#insertdeck .woocommerce form .clear { display: none; }
#insertdeck .woocommerce form > p:last-child { margin-bottom: 0; }
/* a first and a last name stand side by side */
#insertdeck form.edit-account,
#insertdeck .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
#insertdeck form.edit-account > *,
#insertdeck .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }
#insertdeck form.edit-account > .form-row-first,
#insertdeck .woocommerce-address-fields__field-wrapper > .form-row-first { grid-column: 1; }
#insertdeck form.edit-account > .form-row-last,
#insertdeck .woocommerce-address-fields__field-wrapper > .form-row-last { grid-column: 2; }
#insertdeck .woocommerce form fieldset { min-width: 0; margin: 10px 0 16px; padding: 16px 0 0; border: 0; border-top: 2px dashed var(--sunk); }
#insertdeck .woocommerce form legend { padding: 0 10px 0 0; font: 400 16px/1.2 var(--marquee-font); text-transform: uppercase; }
#insertdeck .woocommerce form .form-row em { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--muted); }
#insertdeck .woocommerce form button[type="submit"] { --fill: var(--gold); --deep: var(--gold-deep); margin-bottom: 9px; }
/* a tick box in the shop's own dress */
#insertdeck .woocommerce form .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; margin: 0; line-height: 1.2; cursor: pointer; }
#insertdeck .woocommerce-form__input-checkbox {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	display: inline-grid;
	place-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 7px;
	cursor: pointer;
}
#insertdeck .woocommerce-form__input-checkbox:checked { background: var(--teal); }
#insertdeck .woocommerce-form__input-checkbox:checked::after { content: ""; width: 11px; height: 6px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-2px) rotate(-45deg); }
#insertdeck .woocommerce-password-strength { margin-top: 8px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--sunk); color: var(--fg); }
#insertdeck .woocommerce-password-strength.strong, #insertdeck .woocommerce-password-strength.good { background: var(--teal); color: var(--ink); }
#insertdeck .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* a country, chosen from a list that can be searched */
#insertdeck .select2-container--default .select2-selection--single { height: auto; padding: 11px 40px 11px 14px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px; }
#insertdeck .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; font: 500 16px/1.3 var(--body-font); color: var(--fg); }
#insertdeck .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
#insertdeck .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 12px; height: 20px; margin-top: -10px; }
#insertdeck .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--fg) transparent transparent; }
#insertdeck .select2-container--default.select2-container--focus .select2-selection--single { outline: 3px solid var(--teal); outline-offset: 2px; }
#insertdeck .select2-dropdown { background: var(--surface); color: var(--fg); border: var(--bw) solid var(--line); border-radius: 12px; overflow: hidden; }
#insertdeck .select2-container--default .select2-search--dropdown .select2-search__field { padding: 8px 10px; background: var(--bg); color: var(--fg); border: 2px solid var(--line); border-radius: 8px; }
#insertdeck .select2-container--default .select2-results__option { padding: 8px 12px; }
#insertdeck .select2-container--default .select2-results__option--highlighted[aria-selected],
#insertdeck .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--violet); color: var(--cream); }
#insertdeck .select2-container--default .select2-results__option[aria-selected="true"],
#insertdeck .select2-container--default .select2-results__option[data-selected="true"] { background: var(--sunk); color: var(--fg); }

/* the login: the form, and beside it a word for whoever has no account yet */
.gate { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 28px 40px; align-items: stretch; }
.gate:not(:has(.gate__word)) { grid-template-columns: minmax(0, 1fr); }
.gate__forms { min-width: 0; }
#insertdeck .gate__forms h2 { margin: 0 0 14px; font: 400 22px/1.1 var(--marquee-font); text-transform: uppercase; }
#insertdeck .gate__forms .col2-set { gap: 28px 40px; }
#insertdeck .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 18px; }
#insertdeck .woocommerce-form-login .lost_password { margin: 14px 0 0; font-size: 14px; }
.gate__word { display: grid; align-content: center; min-height: 260px; padding: clamp(22px, 4vw, 40px); border: var(--bw) solid var(--line); border-radius: 22px; }
.gate__word .carpet { opacity: .4; }
.gate__in { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: start; max-width: 44ch; }
.gate__in p { margin: 0; }
.gate__in .eyebrow { color: var(--gold); }
#insertdeck .gate__title { margin: 0; font: 400 clamp(24px, 3.4vw, 34px)/1.05 var(--marquee-font); text-transform: uppercase; }
.gate__in p:last-child { margin-top: 8px; padding-bottom: 9px; }
/* the eye that shows a password as it is typed */
#insertdeck .password-input { position: relative; display: block; }
#insertdeck .password-input .input-text { padding-right: 48px; }
#insertdeck .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	padding: 0;
	background: var(--muted);
	border: 0;
	cursor: pointer;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.500 5 2.300 9.200 1 12c1.300 2.800 5.500 7 11 7s9.700-4.200 11-7c-1.300-2.800-5.500-7-11-7zm0 11.500a4.500 4.500 0 1 1 0-9 4.500 4.500 0 0 1 0 9zm0-2.500a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.500 5 2.300 9.200 1 12c1.300 2.800 5.500 7 11 7s9.700-4.200 11-7c-1.300-2.800-5.500-7-11-7zm0 11.500a4.500 4.500 0 1 1 0-9 4.500 4.500 0 0 1 0 9zm0-2.500a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#insertdeck .show-password-input.display-password { background: var(--accent-text); }
#insertdeck ul.order_details, #insertdeck ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	margin: 0 0 26px;
	padding: 18px 22px;
	list-style: none;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 16px;
}
#insertdeck ul.order_details li { float: none; margin: 0; padding: 0; border: 0; font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#insertdeck ul.order_details li strong { display: block; margin-top: 4px; font: 700 16px/1.3 var(--body-font); letter-spacing: 0; text-transform: none; color: var(--fg); }
#insertdeck .woocommerce-order h2, #insertdeck .woocommerce-MyAccount-content h2, #insertdeck .woocommerce-MyAccount-content h3 { font: 400 20px/1.15 var(--marquee-font); text-transform: uppercase; margin: 26px 0 14px; }
#insertdeck address { font-style: normal; padding: 16px 18px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; }
/* at the checkout a saved address already stands in a card of WooCommerce's own */
#insertdeck .wc-block-components-address-card address { padding: 0; background: none; border: 0; border-radius: 0; }

/* ---------- 16 a deck of the visitor's own ---------- */
/* the page that takes its link: a screen, and beside it the slot the link goes into */
.insert {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(18px, 3vw, 38px);
	align-items: stretch;
	margin-bottom: clamp(44px, 7vw, 80px);
	padding: clamp(14px, 2.6vw, 30px);
	border: var(--bw) solid var(--line);
	border-radius: 26px;
	background-color: var(--surface);
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 24px 24px;
}
.insert__screen { display: grid; grid-template-rows: auto minmax(200px, 1fr) auto; min-height: 400px; border: var(--bw) solid var(--ink); border-radius: 22px; }
.insert__screen .carpet { opacity: .26; }
.insert__hud { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0; padding: 18px 20px 0; }
.insert__hud b { color: var(--gold); font-weight: 400; }
.insert__deck { position: relative; z-index: 2; }
.insert__say { position: relative; z-index: 2; margin: 0; padding: 0 20px 24px; font-size: 12px; text-align: center; }
/* while a deck is being read, the cards close to a stack and fan out again, one after the other */
.insert.is-reading .fan i { animation: shuffle 1.3s ease-in-out infinite; }
.insert.is-reading .fan i:nth-child(1) { animation-delay: 0s; }
.insert.is-reading .fan i:nth-child(2) { animation-delay: .09s; }
.insert.is-reading .fan i:nth-child(3) { animation-delay: .18s; }
.insert.is-reading .fan i:nth-child(4) { animation-delay: .27s; }
.insert.is-reading .fan i:nth-child(5) { animation-delay: .36s; }
@keyframes shuffle { 0%, 100% { transform: rotate(var(--r)); } 45%, 60% { transform: rotate(0deg) translateY(-9%); } }

.insert__panel { display: grid; gap: 14px; align-content: center; min-width: 0; padding: clamp(2px, 1.2vw, 14px) clamp(0px, 1vw, 10px); }
.insert__panel > * { margin: 0; }
.insert__panel > p { max-width: 56ch; }
#insertdeck .insert__title { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.05; }
.insert__form { display: grid; gap: 8px; margin-top: 4px; }
#insertdeck .insert__form label { font-weight: 700; }
.insert__slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 9px; }
#insertdeck .insert__slot .input-text { width: 100%; min-height: 48px; }
.insert__alert, .owntool__said--bad { padding: 11px 14px; background: var(--cabinet); color: var(--cream); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--pink); font-size: 15px; }
#insertdeck .insert__alert { margin: 2px 4px 4px 0; }
.insert__wait, .owntool__said[data-wait] { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
/* (a line that says nothing is not there at all, whatever lays it out when it speaks) */
.insert__wait[hidden], .insert__alert[hidden], .owntool__said[hidden] { display: none; }
.insert__wait::before, .owntool__said[data-wait]::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--line); animation: blink 1s steps(1, end) infinite; }
.insert__facts { display: grid; gap: 7px; padding: 0; list-style: none; font-size: 15px; }
.insert__facts li { position: relative; padding-left: 22px; }
.insert__facts li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; background: var(--teal); border: 2px solid var(--line); }
.insert__price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; font-size: 15px; color: var(--muted); }
.insert__price .ticket { margin-left: 8px; }
.insert__go { padding-bottom: 9px; }
/* under the slot: the decks this visitor brought before */
.insert-made { margin-bottom: clamp(44px, 7vw, 80px); }
.insert-made__note { margin: 0; max-width: 60ch; font-size: 15px; color: var(--muted); }
.insert-made__more { margin: 0; padding-bottom: 9px; }
.insert-how { margin-bottom: 0; }
.btn:disabled { opacity: .72; cursor: progress; transform: none; }

/* in the shop's list, before the first deck: the tile that leads there */
.deck--own .deck__art .fan i { bottom: 16%; }
.deck__pitch { margin: 0; font-size: 14px; }
.ticket small { font: 500 12px/1 var(--body-font); }

/* on the home page: a screen that asks for it */
.ownpanel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: stretch; border: var(--bw) solid var(--line); border-radius: 26px; }
.ownpanel .carpet { opacity: .3; }
.ownpanel__in { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; padding: clamp(26px, 5vw, 56px); }
.ownpanel__in > * { margin: 0; }
.ownpanel__in > p { max-width: 54ch; }
.ownpanel__in .eyebrow { color: var(--gold); }
#insertdeck .ownpanel__go { margin-top: 6px; padding-bottom: 12px; }
.ownpanel__side { position: relative; z-index: 2; min-height: 240px; }

/* the page of such a deck: what its owner should know, and what can be done with it */
/* (beside a column this long the screen comes along, where the two stand side by side) */
@media (min-width: 821px) {
	.is-own .stage__screen { position: sticky; top: 18px; }
}
.ownnotes { display: grid; gap: 8px; padding: 12px 14px; background: var(--bg); border: var(--bw) dashed var(--line); border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ownnotes p { margin: 0; }
.owntools { display: grid; gap: 12px; padding-top: 18px; border-top: 2px dashed var(--sunk); }
.owntool { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start; padding: 14px 16px 16px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; }
.owntool__text { display: grid; gap: 5px; min-width: 0; font-size: 15px; line-height: 1.5; }
.owntool__text p { margin: 0; overflow-wrap: anywhere; }
#insertdeck .owntool__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 800 16px/1.25 var(--body-font); text-transform: none; }
.owntool__hint { font-size: 13px; color: var(--muted); }
.owntool form { margin: 0; padding-bottom: 7px; }
.owntool__said { grid-column: 1 / -1; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.owntool__lamp { display: flex; align-items: flex-start; gap: 9px; }
.owntool__lamp .lamp { margin-top: 3px; }
/* while its pictures are being drawn, the deck's screen says so */
.ownscreen { position: relative; display: grid; align-content: start; justify-items: center; gap: 10px; aspect-ratio: 1; padding: 11% 22px 22px; text-align: center; }
.ownscreen .carpet { opacity: .26; }
.ownscreen__say, .ownscreen__note { position: relative; z-index: 3; margin: 0; }
.ownscreen__say { font-size: 12px; color: var(--gold); }
.ownscreen__note { max-width: 34ch; font-size: 14px; }

/* a deck brought as pictures (inc/own-pictures.php) */
/* a slot for each way in: the choice is made of radio buttons, and the slot whose button is on shows */
.ways, .way { display: grid; gap: 14px; min-width: 0; }
.ways > *, .way > * { margin: 0; }
.way > p { max-width: 56ch; }
.ways__pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ways__tabs { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 8px; }
.ways__tab {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	font: 400 13px/1 var(--marquee-font);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--cream);
	border: var(--bw) solid var(--ink);
	border-radius: 12px;
	box-shadow: 0 4px 0 var(--cream-deep), 0 7px 0 var(--ink);
	cursor: pointer;
	transition: transform .08s, box-shadow .08s;
}
#insertdeck .ways__tab { font-weight: 400; }
.ways__tab:hover { transform: translateY(-1px); }
.ways .way { display: none; }
#insert-way-moxfield:checked ~ .way--moxfield,
#insert-way-list:checked ~ .way--list,
#insert-way-mpcfill:checked ~ .way--mpcfill,
#insert-way-drive:checked ~ .way--drive,
#insert-way-scan:checked ~ .way--scan { display: grid; }
/* the button of the slot that shows is pressed in, and lit */
#insert-way-moxfield:checked ~ .ways__tabs [for="insert-way-moxfield"],
#insert-way-list:checked ~ .ways__tabs [for="insert-way-list"],
#insert-way-mpcfill:checked ~ .ways__tabs [for="insert-way-mpcfill"],
#insert-way-drive:checked ~ .ways__tabs [for="insert-way-drive"],
#insert-way-scan:checked ~ .ways__tabs [for="insert-way-scan"] { background: var(--gold); transform: translateY(4px); box-shadow: 0 0 0 var(--gold-deep), 0 3px 0 var(--ink); }
#insert-way-moxfield:focus-visible ~ .ways__tabs [for="insert-way-moxfield"],
#insert-way-list:focus-visible ~ .ways__tabs [for="insert-way-list"],
#insert-way-mpcfill:focus-visible ~ .ways__tabs [for="insert-way-mpcfill"],
#insert-way-drive:focus-visible ~ .ways__tabs [for="insert-way-drive"],
#insert-way-scan:focus-visible ~ .ways__tabs [for="insert-way-scan"] { outline: 3px solid var(--teal); outline-offset: 3px; }

/* the deck itself, pasted as a list: a box as wide as its panel, tall enough for a hand of cards, that grows downward only */
#insertdeck .insert__list { display: block; width: 100%; min-width: 0; min-height: 216px; line-height: 1.5; resize: vertical; }
#insertdeck .insert__form--list > .input-text { width: 100%; }
#insertdeck .insert__form label small { font-weight: 500; color: var(--muted); }
/* what the shop says of a list that came back: the lines that name no card, and the box that leaves them out */
.insert__check { display: grid; gap: 10px; }
.insert__check:not(:has(> :not([hidden]))) { display: none; }
.insert__unmatched { display: grid; gap: 3px; max-height: 190px; margin: 0; padding: 10px 14px 10px 32px; overflow: auto; font-size: 14px; line-height: 1.45; background: var(--bg); border: var(--bw) dashed var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.insert__unmatched[hidden], .insert__without[hidden] { display: none; }
.insert__without { display: flex; align-items: center; gap: 10px; cursor: pointer; }
#insertdeck .insert__form .insert__without { font-weight: 500; }
.insert__without input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--teal); }
.owntool__go { margin: 0; padding-bottom: 7px; }

/* the order file, and the choice of back that goes with it */
/* (as wide as its panel and no wider: left to itself, the field is as wide as its button and its words) */
.ways, .way, .way .insert__form { min-width: 0; }
.insert__file { width: 100%; min-width: 0; max-width: 100%; padding: 10px; font: 500 15px/1.3 var(--body-font); color: var(--fg); background: var(--surface); border: var(--bw) dashed var(--line); border-radius: 12px; }
.insert__file::file-selector-button { margin-right: 12px; padding: 9px 14px 8px; font: 400 12px/1 var(--marquee-font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); background: var(--cream); border: var(--bw) solid var(--ink); border-radius: 10px; cursor: pointer; }
.backs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 6px 0 0; padding: 0; border: 0; }
.backs legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.back { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; cursor: pointer; }
#insertdeck .insert__form .back { font-weight: 500; }
.back input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.back__mark { flex: none; width: 20px; height: 20px; margin-top: 2px; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--bg); }
.back input:checked ~ .back__mark { background: radial-gradient(circle, var(--ink) 0 34%, var(--teal) 38%); }
.back input:focus-visible ~ .back__mark { outline: 3px solid var(--teal); outline-offset: 3px; }
.back:has(input:checked) { box-shadow: 5px 5px 0 var(--teal), 5px 5px 0 var(--bw) var(--line); }
.back__text { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.back__text b { font-weight: 700; }
.back__text small { color: var(--muted); font-size: 13px; }
.insert__send { padding: 6px 0 9px; }

/* a deck in the making: what a folder holds, how far the fetching is */
.watch { display: grid; gap: 14px; min-width: 0; }
.watch > * { margin: 0; }
.watch > p { max-width: 56ch; }
.watch__files { display: grid; max-height: 344px; margin: 0; padding: 0; overflow: auto; list-style: none; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; }
.watch__file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 9px 12px; border-bottom: 2px dashed var(--sunk); font-size: 14px; line-height: 1.4; }
.watch__file:last-child { border-bottom: 0; }
.watch__file .lamp { grid-row: 1 / span 2; margin-top: 2px; }
.watch__file.is-out .lamp { background: var(--pink); }
.watch__name { font-weight: 700; overflow-wrap: anywhere; }
.watch__size, .watch__why { grid-column: 2; font-size: 13px; }
.watch__size { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); }
.watch__note { font-size: 14px; color: var(--muted); }
.watch__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-bottom: 9px; }
.watch__go .ticket { margin-left: 8px; }
.watch__over { font-size: 15px; }
.watch__count { font: 400 clamp(26px, 4vw, 40px)/1 var(--marquee-font); text-transform: uppercase; }
.watch__count b { font-weight: 400; color: var(--accent-text); }
.watch__meter { padding: 5px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px; }
.watch__meter .bar { display: block; height: 18px; --c: var(--teal); }
.watch__meter .bar::after { transition: width .4s steps(8, end); }
/* the pictures of a scanned page, to choose from: each a card with a box to tick; what is unticked steps back */
.watch__from { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.picks { display: grid; gap: 14px; min-width: 0; }
.picks > * { margin: 0; }
.picks__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.picks__count { font-weight: 700; }
.picks__all { padding: 6px 12px 5px; font: 400 12px/1 var(--marquee-font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); background: var(--cream); border: var(--bw) solid var(--ink); border-radius: 10px; cursor: pointer; }
.picks__all[hidden] { display: none; }
.picks__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 16px 12px; max-height: 560px; margin: 0; padding: 12px; overflow: auto; list-style: none; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; }
.pick { min-width: 0; }
.pick label { position: relative; display: grid; gap: 4px; align-content: start; font-size: 13px; line-height: 1.35; cursor: pointer; }
#insertdeck .picks .pick label { font-weight: 500; }
.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick__frame { position: relative; display: block; aspect-ratio: 63 / 88; overflow: hidden; background: var(--sunk); border: var(--bw) solid var(--line); border-radius: 9px; }
.pick__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick__mark { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 6px; }
.pick input:checked ~ .pick__frame { box-shadow: 4px 4px 0 var(--teal); }
.pick input:checked ~ .pick__frame .pick__mark { background: var(--teal); }
.pick input:checked ~ .pick__frame .pick__mark::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.pick input:not(:checked) ~ .pick__frame img { opacity: .35; filter: grayscale(1); }
.pick input:not(:checked) ~ .pick__name, .pick input:not(:checked) ~ .pick__size { color: var(--muted); }
.pick input:focus-visible ~ .pick__frame { outline: 3px solid var(--teal); outline-offset: 3px; }
.pick__name { overflow-wrap: anywhere; }
.pick__size { font-size: 12px; color: var(--muted); }
.pick.is-soft .pick__size { color: var(--danger); }
.watch__rest > summary { font-weight: 700; cursor: pointer; }
.watch__rest[open] > summary { margin-bottom: 10px; }

/* the page of a deck of pictures: what is left out, the back, and the pictures themselves */
.ownnotes__list { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; }
.ownnotes__more summary { font-weight: 700; cursor: pointer; }
.ownnotes__more[open] summary { margin-bottom: 6px; }
.owntool__back { display: grid; gap: 4px; justify-items: center; width: 72px; margin: 0; font-size: 12px; color: var(--muted); }
.owntool__back img { display: block; width: 100%; height: auto; border: 2px solid var(--line); border-radius: 5px; }
.is-pictures #tab-description { columns: auto; }
.is-pictures #tab-description .ownpics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 20px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.is-pictures #tab-description .ownpic { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0; border: 0; line-height: 1.35; }
.ownpic__frame { display: block; aspect-ratio: 63 / 88; overflow: hidden; background: var(--sunk); border: var(--bw) solid var(--line); border-radius: 9px; box-shadow: 4px 4px 0 var(--sunk); }
.ownpic__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ownpic__name { overflow-wrap: anywhere; }
.ownpic__dpi { font-size: 12px; color: var(--muted); }
.ownpic.is-soft .ownpic__dpi { color: var(--danger); }

/* ---------- 16b a booster ---------- */
/* the pack laid open: every card of it face down in a tray, in the colour of what it can be */
.pack {
	display: grid;
	gap: 12px;
	padding: 16px 18px 14px;
	background: var(--sunk);
	border: var(--bw) solid var(--line);
	border-radius: 16px;
}
.pack > * { margin: 0; }
#insertdeck .pack__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 18px; }
.pack__slots { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 0; list-style: none; }
.packslot { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.packslot__cards { display: flex; padding-left: 9px; }
.packslot__cards i {
	position: relative;
	flex: none;
	width: 27px;
	aspect-ratio: 63 / 88;
	margin-left: -9px;
	/* a common is a plain card: paper in either room, like the colours of the others */
	background: var(--c, var(--cream));
	border: 2px solid var(--ink);
	border-radius: 4px;
	box-shadow: 2px 0 0 rgba(22, 17, 43, .16);
}
.packslot__label { font-size: 14px; font-weight: 700; line-height: 1.25; }
.packslot--uncommon { --c: var(--teal); }
.packslot--rare { --c: var(--gold); }
.packslot--land { --c: var(--cream-deep); }
.packslot--any { --c: var(--violet); }
.packslot--any-foil,
.packslot--common-foil,
.packslot--uncommon-foil,
.packslot--rare-foil,
.packslot--land-foil { --c: linear-gradient(125deg, var(--pink) 0%, var(--gold) 34%, var(--teal) 66%, var(--violet) 100%); }
/* a card that can be anything says so */
.packslot--any .packslot__cards i::after,
.packslot--any-foil .packslot__cards i::after {
	content: "?";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cream);
	font: 400 13px/1 var(--marquee-font);
}
.packslot--any-foil .packslot__cards i::after { color: var(--ink); }
.pack__odds { font-size: 15px; }
.pack__note { font-size: 14px; color: var(--muted); }

/* how many packs: a button for each number players buy together; the one that is chosen stands on a sleeve */
.packs { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.packs legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.packbtn {
	display: grid;
	gap: 4px;
	align-content: start;
	min-width: 0;
	padding: 12px 14px 11px;
	text-align: left;
	font: inherit;
	color: var(--fg);
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 14px;
	cursor: pointer;
	transition: transform .12s, box-shadow .12s;
}
.packbtn b { font: 400 16px/1.1 var(--marquee-font); text-transform: uppercase; }
.packbtn small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.packbtn:hover { box-shadow: 3px 3px 0 var(--teal), 3px 3px 0 var(--bw) var(--line); }
.packbtn[aria-pressed="true"] { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--teal), 6px 6px 0 var(--bw) var(--line); }
.packcost { display: grid; gap: 2px; margin: 0; font-size: 14px; color: var(--muted); }
.packcost b { color: var(--fg); font-weight: 700; white-space: nowrap; }
.packcost [data-pack-total] { color: var(--fg); font-weight: 700; }

/* ---------- 16c finding: the search box, the filters, what a search found ---------- */
/* the box: a field with its button inside, and the answers that drop out under it */
.findbox { position: relative; min-width: 0; }
/* in the shop bar: a round button among the bar's buttons, and the field comes down under the bar when the
   button is pressed, over the page and not pushing it. (A field in the bar itself made the bar a crowd.) */
.shopbar__find {
	display: none;
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	right: 0;
	justify-content: center;
	padding: 14px var(--gutter);
	background: var(--surface);
	border-block: var(--bw) solid var(--line);
}
.shopbar__find.is-open,
.shopbar__find:target { display: flex; }
.shopbar__find .findbox { flex: 0 1 560px; }
#insertdeck .shopbar .findbox__field { padding: 8px 50px 8px 18px; background: var(--bg); border-radius: 999px; }
.shopbar .findbox__go { width: auto; aspect-ratio: 1; border-radius: 50%; }
/* the button: a round one, like the account's */
.findpill {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	color: var(--fg);
	background: var(--bg);
	border: var(--bw) solid var(--line);
	border-radius: 50%;
	--px-line: var(--line);
}
.findpill:hover { color: var(--fg); background: var(--sunk); }
.findpill[aria-expanded="true"] { background: var(--gold); color: var(--ink); --px-line: var(--ink); }
.findpill:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#insertdeck .findbox__field { width: 100%; padding: 9px 12px; font-size: 15px; border-radius: 12px; }
#insertdeck .findbox__field:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#insertdeck .findbox__field::-webkit-search-cancel-button { display: none; }
.findbox__go {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	width: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--gold);
	border: 2px solid var(--ink);
	border-radius: 9px;
	cursor: pointer;
	--px-line: var(--ink);
}
.findbox__go:hover { background: var(--teal); }
.findbox__go:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.findlist {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	left: 0;
	width: max(100%, 340px);
	max-width: calc(100vw - 32px);
	max-height: min(70vh, 520px);
	overflow-y: auto;
	display: grid;
	gap: 2px;
	padding: 10px;
	background: var(--surface);
	color: var(--fg);
	border: var(--bw) solid var(--line);
	border-radius: 14px;
	box-shadow: 6px 6px 0 var(--teal), 6px 6px 0 var(--bw) var(--line);
}
.findlist[hidden] { display: none; }
.findlist__choices,
.findlist__set,
.findlist__rest { display: grid; gap: 2px; }
.findlist__choices[hidden] { display: none; }
.findlist__group { margin: 2px 6px; color: var(--accent-text); }
.findlist__set + .findlist__set .findlist__group { margin-top: 8px; }
.findlist__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	width: 100%;
	padding: 8px 10px;
	text-align: left;
	font: inherit;
	color: var(--fg);
	background: none;
	border: 0;
	border-radius: 9px;
	text-decoration: none;
	cursor: pointer;
}
.findlist__item b { font-weight: 700; }
.findlist__item small { color: var(--muted); font-size: 13px; }
.findlist__item .pip { width: 18px; height: 18px; font-size: 9px; border-width: 1.5px; }
.findlist__item .pips { gap: 3px; }
.findlist__item:hover,
.findlist__item.is-active { background: var(--sunk); }
.findlist__item.is-active { outline: 2px solid var(--line); outline-offset: -2px; }
.findlist__all { margin: 6px 4px 2px; padding: 8px 6px 2px; border-top: 2px dashed var(--line); font-weight: 700; color: var(--accent-text); }
.findlist__none { margin: 4px 6px; color: var(--muted); font-size: 14px; }

/* the filters: a strip of switches above the grid; what is on stands out by more than its colour */
.findbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 30px;
	margin-bottom: 22px;
	padding: 16px 18px;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 16px;
}
/* (where a filter's link lands: a little air above the strip) */
.findbar { scroll-margin-top: 16px; }
.findbar__set { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; }
.findbar__label { color: var(--muted); }
.findbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.findbar__how { margin-top: 2px; }
.findpip { width: 34px; height: 34px; font-size: 13px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.findpip:hover { transform: translate(-1px, -1px); }
.findpip.is-on { transform: translate(-2px, -2px); box-shadow: 0 0 0 3px var(--gold), 4px 4px 0 3px var(--line); }
.findchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	font: 700 14px/1 var(--body-font);
	color: var(--fg);
	background: var(--surface);
	border: 2px solid var(--line);
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
}
a.findchip:hover { background: var(--sunk); }
.findchip--num { min-width: 34px; padding: 0 8px; }
.findchip.is-on { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--line); }
.findpip:focus-visible,
.findchip:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.findbar__card { flex: 1 1 260px; }
#insertdeck .findbar__card .findbox__field { flex: 1 1 150px; width: auto; min-width: 0; }
.findbar__now { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; font-size: 15px; }
.findbar__said { font-weight: 700; }
.findbar__clear { color: var(--accent-text); font-weight: 700; }

/* what a search found beside the products */
.findcards { margin-bottom: 24px; }
#insertdeck .findcards__title { margin: 0 0 12px; font-size: 20px; }
.findcards__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.findcard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 14px;
	background: var(--surface);
	border: var(--bw) solid var(--line);
	border-radius: 12px;
}
.findcard__where { display: flex; flex-wrap: wrap; gap: 8px; }
.findmeant,
.findways { margin: 0 0 14px; font-size: 17px; }
.findmeant a,
.findways a { font-weight: 700; color: var(--accent-text); }

/* ---------- 16d the newsletter ---------- */
/* above the footer: a ticket that takes an address. Paper with the grid, on a stack of two sleeves. */
.newsband { margin-bottom: clamp(44px, 7vw, 80px); }
.newsband__in,
.newsbox {
	border: var(--bw) solid var(--line);
	border-radius: 26px;
	background-color: var(--surface);
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 24px 24px;
	box-shadow: 7px 7px 0 var(--pink), 14px 14px 0 var(--teal);
}
.newsband__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 44px);
	align-items: center;
	/* (the sleeves take room to the right and below: the ticket stays inside the page's width) */
	margin-right: 14px;
	padding: clamp(22px, 3.4vw, 40px);
}
.newsband__say { display: grid; gap: 10px; }
.newsband__say > * { margin: 0; }
.newsband__say h2 { font-size: clamp(22px, 2.8vw, 30px); }
.newsband__say > p:last-child { max-width: 46ch; }

.newsform { display: grid; gap: 8px; min-width: 0; }
.newsform__slot { padding-bottom: 9px; }
#insertdeck .newsform__slot .input-text { width: 100%; min-height: 48px; }
.newsform__note { margin: 0; font-size: 14px; color: var(--muted); }
.newsform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsform__done { margin: 0; padding: 11px 14px; background: var(--teal); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; font-weight: 700; }
/* (what the script takes away once an address is taken is gone, whatever lays it out while it is there) */
.newsform__done[hidden], .newsform__slot[hidden], .newsform__topics[hidden], .newsform__note[hidden] { display: none; }
#insertdeck .newsform .insert__alert { margin: 2px 4px 4px 0; }
/* which letters: tick boxes in a row, each as wide as its words */
.newsform__topics { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
.newsform__topics legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
#insertdeck .newsform__topics label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.newsform__topics input { width: 20px; height: 20px; margin: 0; accent-color: var(--violet); }

/* the newsletter's own page: the same ticket, as wide as a column of text */
.newsbox { display: grid; gap: 14px; max-width: 720px; margin: 0 14px 14px 0; padding: clamp(22px, 3.4vw, 40px); }
.newsbox > * { margin: 0; }
#insertdeck .newsbox__title { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.05; }
.newsbox__said { padding: 11px 14px; background: var(--teal); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; font-weight: 700; }
#insertdeck .newsbox .insert__alert { margin: 0; }
.newsbox__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; padding-bottom: 9px; }
.newsbox__manage { display: grid; gap: 14px; }
.newsbox__leave { display: grid; gap: 8px; padding-top: 14px; border-top: var(--bw) dotted var(--line); }
.newsbox__other { font-weight: 700; }

/* ---------- 17 small screens and motion ---------- */
@media (max-width: 1000px) {
	.shopbar__row { gap: 10px 12px; }
	.shopbar__logo { margin-right: auto; }
	.shopbar__nav { order: 5; flex-basis: 100%; }
	.shopbar__nav ul { flex-wrap: wrap; }
}
@media (max-width: 820px) {
	.hero__in { grid-template-columns: minmax(0, 1fr); }
	.hero__side { display: none; }
	.hero .carpet { opacity: .28; -webkit-mask-image: none; mask-image: none; }
	.stage { grid-template-columns: minmax(0, 1fr); }
	.statscreen { grid-template-columns: minmax(0, 1fr); }
	.sitefoot__in { grid-template-columns: minmax(0, 1fr); }
	/* the account: the card and the menu above what the page holds, the menu two to a row */
	#insertdeck.woocommerce-account .woocommerce:has(> .acctside) { grid-template-columns: minmax(0, 1fr); }
	#insertdeck .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#insertdeck .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; padding-top: 0; border-top: 0; }
	.gate { grid-template-columns: minmax(0, 1fr); }
	.gate__word { min-height: 0; }
	/* a deck of the visitor's own: the screen above the slot, and smaller */
	.insert { grid-template-columns: minmax(0, 1fr); }
	.insert__screen { min-height: 0; grid-template-rows: auto 190px auto; }
	.ownpanel { grid-template-columns: minmax(0, 1fr); }
	.ownpanel__side { display: none; }
	/* the newsletter's ticket: what it says above its form */
	.newsband__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	/* a list of orders as cards: every cell says what it is */
	#insertdeck table.shop_table_responsive thead { display: none; }
	#insertdeck table.shop_table_responsive tbody tr { display: block; padding: 8px 0; border-top: var(--bw) solid var(--line); }
	#insertdeck table.shop_table_responsive tbody tr:first-child { border-top: 0; }
	#insertdeck table.shop_table_responsive tbody th,
	#insertdeck table.shop_table_responsive tbody td { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; padding: 7px 16px; border-top: 0; text-align: right; }
	#insertdeck table.shop_table_responsive tbody th::before,
	#insertdeck table.shop_table_responsive tbody td::before { content: attr(data-title); margin-right: auto; padding-right: 12px; font: 400 10px/1.7 var(--hud-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.wordmark--bar { font-size: 19px; }
	/* two rows: the logo with the account and the cart, then the menu with the lights switch */
	.shopbar__row { gap: 10px; }
	.shopbar__nav { flex: 1 1 0; min-width: 55%; }
	.lights { order: 6; }
	.cartpill { gap: 6px; padding: 7px 10px; }
	/* still read out, no longer shown: the coin and the count say it */
	.cartpill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
	#insertdeck ul.products { gap: 34px 0; padding-right: 20px; }
	#insertdeck form.cart { grid-template-columns: minmax(0, 1fr); }
	#insertdeck form.cart .quantity { justify-self: start; }
	.is-deck #tab-description { columns: 1; }
	/* the papers as rows, here too for a browser that does not know the rule below */
	.papers { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.paper { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 0 14px; padding: 10px 50px 10px 14px; }
	.paper__card { grid-row: 1 / span 2; width: 30px; height: 42px; margin: 0 0 9px; background-size: 18px 15px, 18px 2px, 12px 2px, auto; background-position: 50% 4px, 4px 24px, 4px 29px, 0 0; }
	.paper__text, .paper__price { grid-column: 2; }
	.paper__price { margin-top: 5px; }
	.paper__mark { top: 50%; right: 14px; margin-top: -11px; }
	/* the slot: the link above the button that sends it */
	.insert__slot { grid-template-columns: minmax(0, 1fr); }
	.insert__slot .btn { width: 100%; }
	.owntool { grid-template-columns: minmax(0, 1fr); }
	/* the two backs one under the other, and the button of a deck in the making as wide as its panel */
	.backs { grid-template-columns: minmax(0, 1fr); }
	.insert__send .btn, .watch__go .btn { width: 100%; }
	/* the newsletter's ticket: a thinner stack of sleeves, and buttons as wide as the ticket */
	.newsband__in, .newsbox { box-shadow: 5px 5px 0 var(--pink), 10px 10px 0 var(--teal); }
	.newsband__in { margin-right: 10px; }
	.newsbox { margin-right: 10px; }
	.newsbox__go .btn { width: 100%; }
}
@media (max-width: 400px) {
	/* the smaller phones: the logo, the account and the cart still share the first row */
	.shopbar__logo { gap: 8px; }
	.wordmark--bar { font-size: 16px; }
	.acctpill { width: 40px; height: 40px; }
	.cartpill { padding: 6px 9px; }
}
/* where the facts beside the screen are narrow, the papers are rows like the bonus rounds below them:
   the card, beside it what the paper is and, under that, what it costs extra */
@container summary (max-width: 430px) {
	.packs { grid-template-columns: minmax(0, 1fr); }
	.packbtn { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
	.papers { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.paper { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 0 14px; padding: 10px 50px 10px 14px; }
	.paper__card { grid-row: 1 / span 2; width: 30px; height: 42px; margin: 0 0 9px; background-size: 18px 15px, 18px 2px, 12px 2px, auto; background-position: 50% 4px, 4px 24px, 4px 29px, 0 0; }
	.paper__text, .paper__price { grid-column: 2; }
	.paper__price { margin-top: 5px; }
	.paper__mark { top: 50%; right: 14px; margin-top: -11px; }
	.owntool { grid-template-columns: minmax(0, 1fr); }
}
/* where the visitor's own colours replace the page's, what is chosen and what is switched on still shows */
@media (max-width: 860px) {
	/* the answers are as wide as the box they hang under */
	.findlist { width: 100%; }
}
@media (max-width: 640px) {
	/* the search button and the lights switch go beside the links: the logo, the cart and the account fill the first row */
	.shopbar__row .shopbar__nav { flex: 1 1 0; min-width: 50%; }
	.lights,
	.findpill { order: 6; width: 38px; height: 38px; }
}
@media (forced-colors: active) {
	.findpip.is-on,
	.findchip.is-on,
	.findlist__item.is-active { outline: 3px solid Highlight; outline-offset: 2px; }
	.packbtn[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
	.paper input:checked ~ .paper__frame { border-width: 7px; }
	.paper input:checked ~ .paper__mark,
	.bonus input:checked + .bonus__switch { background: Highlight; }
	.paper input:checked ~ .paper__mark::after,
	.bonus input:checked + .bonus__switch::after { background: HighlightText; }
	.back input:checked ~ .back__mark { background: Highlight; }
	#insert-way-moxfield:checked ~ .ways__tabs [for="insert-way-moxfield"],
	#insert-way-list:checked ~ .ways__tabs [for="insert-way-list"],
	#insert-way-mpcfill:checked ~ .ways__tabs [for="insert-way-mpcfill"],
	#insert-way-drive:checked ~ .ways__tabs [for="insert-way-drive"],
	#insert-way-scan:checked ~ .ways__tabs [for="insert-way-scan"] { border-width: 6px; }
	.pick input:checked ~ .pick__frame { border-width: 6px; }
	.pick input:checked ~ .pick__frame .pick__mark { background: Highlight; }
}
@media (max-width: 640px) {
	/* the screen that asks: the words over the button, the button as wide as the screen */
	.makeit--wide { grid-template-columns: auto minmax(0, 1fr); }
	.makeit--wide .makeit__go { grid-column: 1 / -1; width: 100%; }
	.cardlist__groups { columns: 1; }
	.cardgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
}
@container summary (max-width: 360px) {
	.makeit { grid-template-columns: auto minmax(0, 1fr); }
	.makeit .makeit__go { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.seeall__arrow, .cardpeek { animation: none; transition: none; }
	.blink, .marquee__run { animation: none; }
	.insert.is-reading .fan i, .insert__wait::before, .owntool__said[data-wait]::before { animation: none; }
	.cartdrawer[open], .cartdrawer[open]::backdrop, .cartdrawer.is-leaving { animation: none; }
	.cartdrawer__body { transition: none; }
	.paper__frame, .paper__mark, .paper__mark::after, .paper__card::after,
	.btn, .pad, .deck, .bonus__switch, .bonus__switch::after, .ways__tab, .watch__meter .bar::after,
	#insertdeck .button, #insertdeck .wc-block-components-button { transition: none; }
}