/* Battlefield: one screen for a game of Magic. Magic skin (dark leather, gold foil, card-frame panels, the serif type
   of the cards) is the default; the Terminal skin (body.skin-fallout) swaps the tokens for a green terminal. */
body.skin-magic {
	--bg: #110e0c;
	--panel: #1b1612;
	--panel-hi: #251e18;
	--line: #57452a;
	--line-soft: #33291d;
	--gold: #c9a45a;
	--gold-hi: #ecd497;
	--gold-ink: #1d1408;
	--gold-face: linear-gradient(180deg, #e6c983, #b88d3e);
	--text: #efe5cf;
	--muted: #a59779;
	--faint: #74695a;
	--p1: #7fb2de;
	--p2: #df8463;
	--warn: #e3a64e;
	--bad: #d4664f;
	--head: Cinzel, Georgia, serif;
	--body: 'EB Garamond', Georgia, serif;
	--fs: 18px;
	--life: 66px;
	--r-xs: 6px; /* badges */
	--r-sm: 9px; /* small boxes */
	--r: 12px; /* buttons, inputs, selects, the camera frame */
	--r-lg: 16px; /* panels */
	--r-xl: 22px; /* the drawer */
	--r-pill: 999px; /* chips, phase pills */
	--card-r: 4.75% / 3.4%; /* a real Magic card's corner: 4.75 % of its width */
}
body.skin-fallout {
	--bg: #050d08;
	--panel: #09160e;
	--panel-hi: #0e2116;
	--line: #22512f;
	--line-soft: #143320;
	--gold: #41ff7a;
	--gold-hi: #b4ffca;
	--gold-ink: #03130a;
	--gold-face: #41ff7a;
	--text: #c9ffd8;
	--muted: #6f9c7d;
	--faint: #3f6a4c;
	--p1: #41ff7a;
	--p2: #ffb642;
	--warn: #ffb642;
	--bad: #ff7a5a;
	--head: VT323, monospace;
	--body: 'Space Mono', monospace;
	--fs: 14px;
	--life: 78px;
	--r-xs: 6px; /* badges */
	--r-sm: 9px; /* small boxes */
	--r: 12px; /* buttons, inputs, selects, the camera frame */
	--r-lg: 16px; /* panels */
	--r-xl: 22px; /* the drawer */
	--r-pill: 999px; /* chips, phase pills */
	--card-r: 4.75% / 3.4%;
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: var(--fs) / 1.45 var(--body);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	color-scheme: dark;
}
button,
select,
input,
textarea {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
	background: var(--panel-hi);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 6px 12px;
	transition: border-color 0.12s, color 0.12s;
}
button:hover {
	border-color: var(--gold);
	color: var(--gold-hi);
}
button:active {
	transform: translateY(1px);
}
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
select {
	background: var(--panel-hi);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 6px 10px;
	min-width: 0;
}
kbd {
	font: 600 0.62em/1 var(--body);
	border: 1px solid currentColor;
	border-radius: var(--r-xs);
	padding: 2px 5px;
	margin-left: 8px;
	opacity: 0.75;
	vertical-align: 0.15em;
}
[hidden] {
	display: none !important;
}
.btn-gold {
	background: var(--gold-face);
	border-color: var(--gold-hi);
	color: var(--gold-ink);
	font-weight: 600;
}
.btn-gold:hover {
	color: var(--gold-ink);
	border-color: #fff3cf;
}

/* ---- top bar ---- */
.top {
	height: 58px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
}
.brand {
	font: 700 22px/1 var(--head);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-hi);
	display: flex;
	align-items: center;
	gap: 14px;
}
/* a quiet BETA next to the name, as on the start page (play.css .beta) */
.brand .beta {
	display: inline-block;
	padding: 4px 8px 3px;
	border: 1px solid var(--muted);
	border-radius: var(--r-pill);
	font: 700 11px/1 var(--body);
	letter-spacing: 0.16em;
	color: var(--muted);
}
.pips {
	display: inline-flex;
	gap: 4px;
}
.pips i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
}
.pips .w { background: #f6efcf; }
.pips .u { background: #5f9fd6; }
.pips .b { background: #6f6460; }
.pips .r { background: #d8603f; }
.pips .g { background: #5f9d63; }
.skin-fallout .pips {
	display: none;
}
.status {
	flex: 1;
	text-align: center;
	color: var(--muted);
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ghost {
	background: transparent;
}
.top button {
	white-space: nowrap; /* longer labels (French, Ukrainian) wrap the header row instead of the words */
}
/* a header link ("Hra proti AI") looks like the header buttons */
.top a.ghost {
	color: var(--text);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 6px 12px;
	transition: border-color 0.12s, color 0.12s;
}
.top a.ghost:hover {
	border-color: var(--gold);
	color: var(--gold-hi);
}

/* ---- layout, symmetric in 3 rows: each player's panel with their own cell (tokens, cards) right under it,
   turn and reminders in the middle, the scanner (camera, SKENOVAT, the card explained) at the bottom ---- */
.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 0.72fr) minmax(0, 1.28fr);
	grid-template-areas: 'p0 turn p1' 'b0 rem b1' 'cam card card';
	gap: 14px;
	padding: 0 16px 16px;
	height: calc(100% - 58px);
}
.players,
.side {
	display: contents;
}
#p0 { grid-area: p0; }
#p1 { grid-area: p1; }
.turn { grid-area: turn; }
#board0 { grid-area: b0; }
#board1 { grid-area: b1; }
.side > .frame:first-child { grid-area: rem; }
.camera { grid-area: cam; }
.card { grid-area: card; }
.frame {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line-soft);
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}
.skin-fallout .frame {
	box-shadow: none;
}
.title,
.frame > h2 {
	font: 700 13px/1 var(--head);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0;
}
.skin-fallout .title,
.skin-fallout .frame > h2 {
	font-size: 20px;
	letter-spacing: 0.12em;
}
.frame > h2 {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--line-soft);
}

/* ---- players and turn ---- */
.player {
	padding: 12px 16px 14px;
	gap: 6px;
	align-items: center;
}
.player.on {
	border-color: var(--gold);
	box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--gold);
}
.skin-fallout .player.on {
	box-shadow: inset 0 0 0 1px var(--gold);
}
.ph {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	background: var(--pc);
	flex: none;
}
.pname {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px dashed transparent;
	font: 700 15px/1.2 var(--head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc);
	padding: 2px 0;
}
.skin-fallout .pname {
	font-size: 22px;
}
.pname:hover,
.pname:focus {
	border-bottom-color: var(--line);
	outline: none;
}
.onturn {
	font: 700 11px/1 var(--head);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-ink);
	background: var(--gold);
	padding: 5px 8px 4px;
	border-radius: var(--r-xs);
	visibility: hidden;
}
.player.on .onturn {
	visibility: visible;
}
.life-row {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}
.life-row button {
	width: 48px;
	height: 42px;
	padding: 0;
	font-weight: 600;
}
.life {
	display: inline-block;
	font: 700 var(--life) / 1 var(--head);
	min-width: 2.1em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/* life change: a short red pulse for damage, green for healing */
.life.hit {
	animation: hit 0.6s;
}
.life.heal {
	animation: heal 0.6s;
}
@keyframes hit {
	30% {
		color: var(--bad);
		transform: scale(1.12);
	}
}
@keyframes heal {
	30% {
		color: #93c98d;
		transform: scale(1.12);
	}
}
.delta {
	position: absolute;
	right: -46px;
	top: 50%;
	transform: translateY(-50%);
	font: 700 20px var(--head);
	color: var(--muted);
	opacity: 0;
	transition: opacity 0.3s;
}
.delta.show {
	opacity: 1;
}
.ctr-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	color: var(--muted);
}
.ctr {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ctr button {
	width: 30px;
	height: 30px;
	padding: 0;
}
.ctr b {
	font: 700 22px/1 var(--head);
	color: var(--text);
	min-width: 1.5em;
	text-align: center;
}
.turn {
	padding: 14px 16px;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.turn-head {
	font: 700 19px/1 var(--head);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-hi);
}
.skin-fallout .turn-head {
	font-size: 28px;
}
.turn-head span {
	color: var(--pc);
}
.phases {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.phases li {
	padding: 3px 10px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	color: var(--muted);
	font-size: 15px;
	cursor: pointer;
}
.phases li:hover {
	border-color: var(--line);
	color: var(--text);
}
.phases li.on {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--gold-ink);
	font-weight: 600;
}
.phase-help {
	margin: 0;
	max-width: 36em;
	text-align: center;
	color: var(--muted);
	font-size: 0.9em;
	font-style: italic;
}
.turn-btns {
	display: flex;
	gap: 8px;
}
.turn-btns button {
	padding: 7px 16px;
}

/* ---- camera ---- */
.camera .bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 16px;
	border-bottom: 1px solid var(--line-soft);
}
.camera .bar select {
	flex: 1;
}
.cam-res {
	color: var(--faint);
	font-size: 0.8em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.rotate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px 10px 16px;
	color: var(--muted);
	font-size: 0.9em;
}
.rot-ctl {
	display: flex;
	align-items: center;
	gap: 8px;
}
#mirror {
	padding: 5px 12px;
}
#mirror.on {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--gold-ink);
	font-weight: 600;
}
.seg {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.seg button {
	border: 0;
	border-radius: 0;
	border-left: 1px solid var(--line-soft);
	background: transparent;
	padding: 5px 13px;
	font-variant-numeric: tabular-nums;
}
.seg button:first-child {
	border-left: 0;
}
.seg button.on {
	background: var(--gold);
	color: var(--gold-ink);
	font-weight: 600;
}
/* one-row switches like in the game (play.css .slider): one track, one flat thumb that glides under the chosen item
   (play-util.js measures it into --tx and --tw); the chosen text is brighter, the others muted */
.slider {
	position: relative;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	background: var(--bg);
	isolation: isolate;
}
.slider::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: var(--tw, 0);
	transform: translateX(var(--tx, 0));
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--panel-hi);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slider:not(.ready)::before {
	transition: none;
}
.slider > button,
.slider > button:hover,
.slider > button.on {
	position: relative;
	z-index: 1;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	box-shadow: none;
}
.slider > button {
	padding: 5px 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	transition: color 0.2s;
}
.slider > button:hover {
	color: var(--text);
}
.slider > button.on {
	color: var(--gold-hi);
}
html.reduced .slider::before {
	transition-duration: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
	.slider::before {
		transition-duration: 0.12s;
	}
}
/* the picture fills the space the bottom row leaves, fitted inside without bars (no background); its own
   shape (aspect-ratio from app.js) is ignored, it pushed SKENOVAT out of the window */
.cam-box {
	flex: 3 1 0;
	min-height: 0;
	aspect-ratio: auto !important;
	position: relative;
	margin: 0 12px;
	border-radius: var(--r); /* no background: a tall picture in a wide box sits centred, without black bars */
	overflow: hidden;
	display: grid;
	place-items: center;
}
.cam-box.free {
	flex: 3 1 0;
}
#view {
	display: block;
	cursor: crosshair;
}
/* the camera didn't open: no empty picture box above the message */
.cam-box:has(~ .cam-err:not([hidden])) {
	display: none !important; /* also over the game's embed.css (display: grid) */
}
/* a note under the picture, never over it: the game's camera slot is small and an overlay was cut off there */
.cam-msg {
	flex: none;
	margin: 6px 12px 0; /* in line with the picture */
	padding: 6px 10px;
	border-left: 3px solid var(--warn);
	border-radius: var(--r-sm);
	background: rgba(12, 9, 7, 0.6);
	color: var(--text);
	font-size: 0.85em;
	line-height: 1.35;
}
/* the camera didn't open: one short sentence and Try again under the picture (stays until a source works); the
   steps for allowing the camera fold out under How? */
.cam-err {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 6px 12px 0;
	padding: 8px 10px;
	border: 1px solid var(--warn);
	border-radius: var(--r-sm);
	font-size: 0.88em;
}
.cam-err p {
	flex: 1 1 12em;
	margin: 0;
	line-height: 1.4;
}
.cam-err details {
	flex-basis: 100%;
	color: var(--muted);
	font-size: 0.92em;
	line-height: 1.4;
}
.cam-err summary {
	cursor: pointer;
	color: var(--text);
}
.cam-err details p {
	margin: 4px 0 0;
}
/* ?debug: what the readers saw in the last scan */
.dbg {
	flex: none;
	margin: 6px 12px 0;
	padding: 6px 8px;
	border: 1px dashed var(--muted);
	border-radius: var(--r-sm);
	font: 11px/1.4 ui-monospace, Menlo, monospace;
	color: var(--muted);
	overflow-wrap: anywhere;
	max-height: 40vh;
	overflow: auto;
}
body.embed .dbg {
	max-height: 180px;
}
.dbg .row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
}
.dbg canvas {
	height: 20px;
	max-width: 60%;
	object-fit: contain;
	object-position: left;
	background: #fff;
}
.dbg .hit {
	color: var(--text);
}
/* pairing a phone: the full steps; inside the game's small panel two short lines (no Wi-Fi or certificate online) */
.phone-short {
	display: none;
	margin: 0;
	max-width: 34em;
	text-align: center;
	font-size: 0.82em;
	line-height: 1.4;
}
body.embed .phone ol {
	display: none;
}
body.embed:not(.web) .phone-short.mac,
body.embed.web .phone-short.web {
	display: block;
}
body.web .phone ol li:nth-child(1),
body.web .phone ol li:nth-child(3) {
	display: none;
}
body.embed .phone {
	padding: 10px 12px;
	gap: 7px;
}
body.embed .phone h3 {
	font-size: 13px;
}
body.embed .phone-url,
body.embed .phone-state {
	font-size: 11px;
}
body.embed .cam-err {
	padding: 6px 8px;
	font-size: 0.82em;
}
body.embed .cam-msg {
	font-size: 0.8em;
}
/* inside the game the scanner fills its iframe: not the narrow-window height rule of the full app (78vh) */
body.embed section.camera {
	height: auto !important;
}
.phone {
	position: absolute;
	inset: 0;
	overflow: auto;
	background: var(--panel);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* centred by the auto margins below: an overflowing panel then scrolls from its top (the QR was cut off) */
	gap: 12px;
}
.phone > :first-child {
	margin-top: auto;
}
.phone > :last-child {
	margin-bottom: auto;
}
.phone h3 {
	margin: 0;
	font: 700 16px var(--head);
	letter-spacing: 0.08em;
	color: var(--gold-hi);
}
/* the QR code at its own size in whole pixels per module (no scaling, crisp edges), white quiet zone included:
   phones read it reliably. Nothing may lie over it (no scanlines) */
#qr {
	flex: none;
}
#qr svg {
	display: block;
	background: #fff;
	shape-rendering: crispEdges;
	image-rendering: pixelated;
}
.phone ol {
	margin: 0;
	padding-left: 22px;
	font-size: 0.9em;
	max-width: 30em;
}
.phone-url {
	color: var(--faint);
	font: 12px 'Space Mono', monospace;
	word-break: break-all;
	text-align: center;
}
.phone-state {
	color: var(--warn);
	font-style: italic;
}
.scan {
	margin: 12px 12px 6px;
	height: 76px;
	flex: none;
	background: var(--gold-face);
	border: 1px solid var(--gold-hi);
	border-radius: var(--r);
	color: var(--gold-ink);
	font: 700 26px/1 var(--head);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.skin-fallout .scan {
	font-size: 38px;
	border-color: var(--gold);
}
.scan:hover {
	color: var(--gold-ink);
	border-color: #fff3cf;
}
.scan.busy {
	opacity: 0.7;
	cursor: progress;
}
.auto {
	color: var(--text);
	cursor: pointer;
}
.auto input {
	accent-color: var(--gold);
	width: 16px;
	height: 16px;
	margin: 0 7px 0 0;
	vertical-align: -3px;
}
.scan-hint {
	text-align: center;
	color: var(--faint);
	font-size: 0.82em;
	margin: 0 12px 12px;
}

/* ---- deck check: in place of SKENOVAT while a deck is counted ---- */
body.dc-on #scan,
body.dc-on .scan-hint,
body.dc-on #recent {
	display: none;
}
.dc {
	margin: 12px 12px 12px;
	padding: 12px 14px;
	flex: none;
	background: var(--panel-hi);
	border: 1px solid var(--line);
	border-radius: var(--r);
	display: flex;
	flex-direction: column;
	gap: 8px;
	animation: unfold 0.35s ease-out;
}
.dc.ok {
	border-color: var(--gold);
}
.dc.bad {
	border-color: var(--warn);
}
.dc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.dc-head b {
	font: 700 1.05em var(--head);
	letter-spacing: 0.08em;
	color: var(--gold-hi);
}
.dc-count {
	flex: none;
	white-space: nowrap;
	font: 700 1.6em/1 var(--head);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.dc-last,
.dc-result p {
	margin: 0;
	font-size: 0.92em;
	color: var(--muted);
}
.dc-result p:first-child {
	color: var(--text);
}
.dc.bad .dc-result p:first-child {
	color: var(--warn);
}
.dc-btns {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ---- the card ---- */
.card-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.say-ctl {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 14px var(--body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}
.say-ctl button {
	padding: 3px 11px;
}
#sayOn.on {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--gold-ink);
	font-weight: 600;
}
.card-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 20px 22px;
}
.cv {
	display: grid;
	grid-template-columns: clamp(130px, 19%, 250px) 1fr; /* the card picture fits the bottom row's height */
	gap: 24px;
	align-items: start;
}
.cv-art {
	margin: 0;
	position: sticky;
	top: 0;
}
.cv-art img {
	width: 100%;
	aspect-ratio: 63 / 88;
	object-fit: cover;
	display: block;
	border-radius: var(--card-r);
	background: #000;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.cv-name {
	font: 700 30px/1.15 var(--head);
	color: var(--gold-hi);
	margin: 0 0 8px;
}
.skin-fallout .cv-name {
	font-size: 40px;
}
.cv-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	color: var(--muted);
	font-style: italic;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line-soft);
}
.cv-meta .mana {
	font-style: normal;
	white-space: nowrap;
}
.cv-board {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--muted);
	font-size: 0.92em;
}
.cv-board b {
	color: var(--text);
	font-family: var(--head);
}
.cv-board button {
	padding: 2px 9px;
	font-size: 0.9em;
}
.cv-sum {
	font-size: 1.2em;
	line-height: 1.45;
	margin: 16px 0 4px;
}
.cv-sum.none {
	font-size: 1em;
	color: var(--muted);
	font-style: italic;
}
.cv-sec h3 {
	font: 700 12px/1 var(--head);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 22px 0 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.skin-fallout .cv-sec h3 {
	font-size: 18px;
}
.cv-sec h3::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line-soft);
}
.cv-sec h3 small {
	font: italic 400 13px var(--body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--faint);
}
.tr {
	border-left: 2px solid var(--bad);
	padding: 4px 0 4px 12px;
	margin: 10px 0;
}
.ev {
	display: inline-block;
	font: 700 11px/1 var(--head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bad);
	margin-right: 8px;
}
.skin-fallout .ev {
	font-size: 16px;
}
.acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.acts button {
	padding: 3px 10px;
	font-size: 0.85em;
}
.kw {
	margin: 0;
}
.kw dt {
	font: 700 14px/1.3 var(--head);
	letter-spacing: 0.06em;
	color: var(--gold-hi);
}
.skin-fallout .kw dt {
	font-size: 20px;
}
.kw dd {
	margin: 2px 0 12px;
}
.cv-oracle {
	color: var(--muted);
	font-size: 0.92em;
	white-space: pre-line;
	margin: 0;
}
.cv-flavor {
	color: var(--faint);
	font-size: 0.85em;
	margin-top: 10px;
}
.unsure {
	border: 1px solid var(--warn);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	margin-bottom: 16px;
	background: rgba(227, 166, 78, 0.08);
}
.unsure b {
	color: var(--warn);
}
.unsure .acts button {
	font-size: 0.9em;
}
.ms {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	margin: 0 1px;
	vertical-align: -0.12em;
	background: #cbc3b5;
	color: #16110b;
	font: 700 0.72em/1 'EB Garamond', Georgia, serif;
	font-style: normal;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}
.ms.w { background: #f6efcf; }
.ms.u { background: #9cc5e8; }
.ms.b { background: #a99d97; }
.ms.r { background: #e8936f; }
.ms.g { background: #92c38d; }
.empty {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--muted);
	gap: 6px;
	padding: 20px;
}
.ghost-card {
	width: 128px;
	aspect-ratio: 63 / 88;
	border: 2px dashed var(--line);
	border-radius: var(--r);
	display: grid;
	place-items: center;
	font: 700 48px var(--head);
	color: var(--line);
	margin-bottom: 14px;
}
.empty .big {
	font: 700 24px/1.3 var(--head);
	color: var(--text);
	margin: 0;
}
.skin-fallout .empty .big {
	font-size: 32px;
}
.empty p {
	margin: 0;
	max-width: 30em;
}
/* recent scans: the space under SKENOVAT that the camera picture leaves free */
.recent {
	flex: 1 1 0;
	min-height: 78px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px;
	padding: 10px 14px 12px;
	border-top: 1px solid var(--line-soft);
	overflow-y: auto;
}
.recent .rl {
	width: 100%;
	color: var(--faint);
	font-size: 0.85em;
	margin-right: 4px;
}
.recent button {
	flex: none;
	width: 50px;
	padding: 0;
	border-radius: var(--card-r);
	overflow: hidden;
	background: #000;
}
.recent button.on {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold);
}
.recent img {
	width: 100%;
	aspect-ratio: 63 / 88;
	display: block;
}

.answer {
	flex: none;
	max-height: 40%;
	overflow: auto;
	position: relative;
	margin: 0 16px 4px;
	padding: 12px 44px 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--panel-hi);
}
.answer .q {
	margin: 0 0 6px;
	color: var(--gold-hi);
	font-weight: 600;
}
.answer .a {
	margin: 0;
	white-space: pre-line;
}
.answer .a.wait {
	color: var(--muted);
	font-style: italic;
}
.answer .x {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 9px;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
}
.ask {
	flex: none;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--line-soft);
}
.ask input {
	flex: 1;
	min-width: 0;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 9px 12px;
}
.ask input:focus {
	outline: none;
	border-color: var(--gold);
}
.ask input::placeholder {
	color: var(--faint);
}

/* ---- right column: reminders, cards on the table, tokens ---- */
.list {
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin: 0;
	padding: 8px 16px 12px;
	list-style: none;
}
.list > li {
	padding: 8px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.92em;
}
.list > li:last-child {
	border-bottom: 0;
}
.list > li b {
	font-family: var(--head);
	font-size: 0.85em;
	color: var(--gold-hi);
	margin-right: 4px;
}
.list > li.ban {
	color: var(--warn);
}
.none {
	color: var(--faint);
	font-style: italic;
	border: 0 !important;
}
.bp {
	margin: 4px 0 10px;
}
.bp-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 12px var(--head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc);
	margin-bottom: 4px;
}
.skin-fallout .bp-name {
	font-size: 18px;
}
.bc {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: var(--r-sm);
	padding: 4px 8px 4px 18px;
	font-size: 0.92em;
}
.bc:hover,
.bc.on {
	background: var(--panel-hi);
}
.bc .tap {
	color: var(--muted);
}
.tok {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.92em;
}
.tok .tn {
	flex: 1;
	min-width: 0;
}
.tok .tn b {
	font-family: var(--head);
}
.tok button {
	padding: 2px 9px;
	font-size: 0.85em;
}
.tok button.on {
	border-color: var(--gold);
	color: var(--gold-hi);
}
.tok .dot-btn {
	background: transparent;
	border: 0;
	padding: 4px;
}
.chips {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 10px 14px 12px;
	border-top: 1px solid var(--line-soft);
}
.chips .cl {
	color: var(--faint);
	font-size: 0.82em;
	width: 100%;
}
.chips button {
	padding: 2px 11px;
	border-radius: var(--r-pill);
	font-size: 0.85em;
}

/* ---- per player: cards on the table and token pictures ---- */
.pboard > h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pc);
}
.pb-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 8px 14px;
}
.cc {
	margin-left: 6px;
	font-size: 0.82em;
	color: var(--gold-hi);
}
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 10px;
	margin-bottom: 8px;
}
.tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	user-select: none;
}
.tile-art {
	position: relative;
	aspect-ratio: 63 / 88;
	border-radius: var(--card-r);
	overflow: hidden;
	background: var(--panel-hi);
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	transition: transform 0.15s, opacity 0.15s;
}
.tile-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tile-name {
	font: 700 11px/1.2 var(--head);
	text-align: center;
	padding: 4px;
}
.tile .cnt,
.tile .tpt,
.tile .ttap {
	position: absolute;
	font: 700 12px/1 var(--head);
	padding: 3px 5px;
	border-radius: var(--r-xs);
}
.tile .cnt {
	right: 3px;
	top: 3px;
	background: var(--gold);
	color: var(--gold-ink);
}
.tile .tpt {
	left: 3px;
	bottom: 3px;
	background: rgba(12, 9, 7, 0.85);
}
.tile .ttap {
	left: 3px;
	top: 3px;
	background: rgba(12, 9, 7, 0.85);
	color: var(--gold-hi);
}
/* a tapped stack lies sideways, like the real cards */
.tile.tapped .tile-art {
	transform: rotate(90deg) scale(0.72);
	opacity: 0.8;
}
.tile-btns {
	display: flex;
	gap: 4px;
}
.tile-btns button {
	flex: 1;
	padding: 2px 0;
}
.tile.die .tile-art {
	animation: die 0.35s forwards;
}
@keyframes die {
	to {
		transform: scale(0.6) rotate(-14deg);
		opacity: 0;
		filter: saturate(0) brightness(0.6);
	}
}
/* any number: click +1, right-click −1, mouse wheel */
[data-num] {
	cursor: ns-resize;
	user-select: none;
	border-radius: var(--r-sm);
	transition: background 0.12s;
}
[data-num]:hover {
	background: var(--panel-hi); /* numbers are buttons too: click +1, right-click −1, wheel */
}
.lethal {
	color: var(--bad) !important;
}
.ctrs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.ctr-chip {
	padding: 3px 10px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	font-size: 0.85em;
	color: var(--muted);
}
.ctr-chip.has {
	border-color: var(--gold);
	color: var(--text);
}
.ctr-chip b {
	font-family: var(--head);
	color: var(--gold-hi);
}

/* ---- settings drawer ---- */
.drawer-wrap {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	background: rgba(0, 0, 0, 0.55);
}
.drawer {
	width: min(470px, 100%);
	height: 100%;
	border-radius: var(--r-xl) 0 0 var(--r-xl);
	overflow: auto;
}
.drawer > h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.drawer > h2 button {
	font: 600 14px var(--body);
	letter-spacing: 0;
	text-transform: none;
}
.drawer-body {
	padding: 4px 20px 28px;
}
.drawer h3 {
	font: 700 12px var(--head);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 22px 0 10px;
}
.skin-fallout .drawer h3 {
	font-size: 18px;
}
.drawer label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0;
}
.drawer .row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;
}
.note {
	color: var(--muted);
	font-size: 0.85em;
	margin: 4px 0 10px;
}
textarea {
	width: 100%;
	height: 120px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 8px 10px;
	font: 13px/1.45 'Space Mono', monospace;
	resize: vertical;
}

/* a landscape camera picture gets a wider column */
/* the scanner row is lower than the old column: compact camera controls leave the picture more room */
.camera .bar {
	padding-top: 6px;
	padding-bottom: 6px;
}
.rotate {
	padding-top: 6px;
	padding-bottom: 6px;
}
.scan {
	height: 62px;
	margin-top: 10px;
}
.recent {
	min-height: 0;
}

/* ---- motion: short and physical, no glows; switched off for people who ask for less motion ---- */
.cv.enter .cv-art img {
	animation: flip-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes flip-in {
	from {
		transform: perspective(1100px) rotateY(-95deg) scale(0.9);
		opacity: 0;
	}
	45% {
		opacity: 1;
	}
	to {
		transform: perspective(1100px) rotateY(0) scale(1);
	}
}
/* the explanation unfolds part after part */
.cv.enter .cv-text > * {
	animation: unfold 0.45s ease-out both;
}
.cv.enter .cv-text > :nth-child(2) { animation-delay: 0.08s; }
.cv.enter .cv-text > :nth-child(3) { animation-delay: 0.16s; }
.cv.enter .cv-text > :nth-child(4) { animation-delay: 0.24s; }
.cv.enter .cv-text > :nth-child(5) { animation-delay: 0.32s; }
.cv.enter .cv-text > :nth-child(6) { animation-delay: 0.4s; }
.cv.enter .cv-text > :nth-child(n + 7) { animation-delay: 0.48s; }
.answer:not([hidden]) {
	animation: unfold 0.35s ease-out both;
}
@keyframes unfold {
	from {
		opacity: 0;
		transform: translateY(10px);
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		transform: none;
		clip-path: inset(0 0 -20% 0);
	}
}
/* a counter that changed jumps once */
.rad,
.en,
.cmd {
	display: inline-block;
}
.bump {
	animation: bump 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes bump {
	35% {
		transform: scale(1.35) translateY(-2px);
		color: var(--gold-hi);
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---- smaller windows: stack and scroll ---- */
@media (max-width: 1180px) {
	body {
		overflow: auto;
	}
	.layout {
		height: auto;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: 'turn turn' 'p0 p1' 'b0 b1' 'rem rem' 'cam card';
	}
	#board0,
	#board1 {
		height: 320px;
	}
	.camera,
	.card {
		height: 78vh;
	}
}
@media (max-width: 760px) {
	.top {
		height: auto;
		flex-wrap: wrap;
		row-gap: 6px;
		padding: 8px 12px;
	}
	.brand {
		flex: 1 0 100%;
	}
	.status {
		display: none;
	}
	.layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'turn' 'p0' 'p1' 'cam' 'card' 'b0' 'b1' 'rem';
		padding: 0 12px 16px;
	}
	.side > .frame:first-child {
		max-height: 260px;
	}
	.cv {
		grid-template-columns: minmax(0, 1fr);
	}
	.cv-art {
		position: static;
		max-width: 260px;
	}
}

/* the online version: no AI questions, no Desk View, no explanations written on demand */
body.web #ask,
body.web #answer,
body.web #ai,
body.web #aiStatus,
body.web #deskBtn,
body.web [data-i18n='set.deskNote'] {
	display: none !important;
}
body:not(.web) .web-only {
	display: none !important;
}