/* GENERATED FILE — copied from preview/pcf-duel.css by tools/build-app-css.mjs. */

/* The Duel page: lobby and table. Copied verbatim to assets/css/pcf-duel.css by
   tools/build-app-css.mjs.

   Colours come from the site's tokens (pcf-app.css, on .pcf-app) with the
   dark theme as fallback, so the duel server's dev page — which loads no site
   CSS — still looks like the table. A few colours exist only here: the felt,
   the calmer next-phase button, the orange of targets. */

/* iOS enlarges text when the phone is turned sideways, unless told not to:
   every panel of the sideways table grew past the room it was measured for
   (the table in landscape "completely broken", 2026-09-28) */
html.pcf-duel-table, .pcf-app--duel, .pcf-duel { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.pcf-duel {
	--dt-bg: var(--bg, #141618);
	--dt-surface: var(--surface, #1d2023);
	--dt-s2: var(--surface-2, #24282c);
	--dt-s3: var(--surface-3, #2c3135);
	--dt-text: var(--text, #f3f3f2);
	--dt-muted: var(--muted, #d0d0cc);
	--dt-faint: var(--faint, #9a9a96);
	--dt-line: var(--line, #3a3e42);
	--dt-accent: var(--accent, #f3f3f2);
	--dt-on-accent: var(--on-accent, #141618);
	--dt-danger: var(--forbidden, #e2695f);
	--dt-gold: var(--gold, #e6bb45);
	--dt-monster: var(--monster, #d8ab68);
	--dt-spell: var(--spell, #56bfad);
	--dt-trap: var(--trap, #dd7ab0);

	--dt-table: #171a1c;
	--dt-next-bg: #22314d;
	--dt-next-fg: #e6ecf7;
	--dt-next-line: #34486c;
	--dt-target: #ffb38a;
	--dt-attack: #e2695f;
	--dt-me: #8fb8ff;
	--dt-opp: #ffb38a;
	--dt-online: #6fbf85;
	--dt-ease: cubic-bezier(.22, 1, .36, 1);

	--cw: 80px;
	--ch: 117px;

	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--dt-bg);
	color: var(--dt-text);
	font-size: 14px;
	line-height: 1.45;
}

/* the site's light theme: the page opens light unless the visitor chose dark */
.pcf-app:not([data-theme="dark"]) .pcf-duel {
	--dt-table: #efefeb;
	--dt-next-bg: #dfe6f2;
	--dt-next-fg: #14233f;
	--dt-next-line: #c2cee2;
	--dt-target: #b04a17;
	--dt-attack: #b3261e;
	--dt-me: #1f63b8;
	--dt-opp: #b04a17;
	--dt-online: #2f6f3e;
}

/* the page is the whole screen, like the other app screens */
/* minus the WordPress toolbar, which signed-in accounts may see above the page */
.pcf-app.pcf-app--duel {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.pcf-app--duel .site-head { flex: 0 0 auto; }
/* at the table the site's header and footer step aside: the table is the page
   (the lobby keeps them; "Leave" in the table's bar goes back to it) */
.pcf-app.pcf-app--duel.is-duel-table .site-head,
body.pcf-duel-table .site-foot { display: none; }
body.pcf-duel-table { overflow: hidden; }
/* no pull-to-refresh, no rubber band: a swipe on the table is never the page's */
html.pcf-duel-table,
body.pcf-duel-table { overscroll-behavior: none; }
/* taps are taps: no double-tap zoom anywhere on the table, and on a phone
   the board takes every touch itself (drags, taps — never a page pan) */
.pcf-duel.is-table { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pcf-duel.is-compact .dt-board { touch-action: none; }
/* iOS zooms into any field under 16 px when it gets the focus */
@media (pointer: coarse) {
	.pcf-duel .dt-lpinput,
	.pcf-duel .dt-input { font-size: 16px; }
}
.pcf-duel:not(.is-table) { overflow-y: auto; }
.pcf-duel__boot { margin: 48px auto; color: var(--dt-muted); }
.pcf-duel [hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Buttons and bits shared by lobby and table                           */
/* ------------------------------------------------------------------ */

.pcf-duel .dl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 16px;
	border: 1px solid var(--dt-line);
	border-radius: 99px;
	background: var(--dt-surface);
	color: var(--dt-text);
	font: inherit;
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 180ms var(--dt-ease), border-color 180ms var(--dt-ease), transform 180ms var(--dt-ease);
}
.pcf-duel .dl-btn:hover:not(:disabled) { background: var(--dt-s2); }
.pcf-duel .dl-btn:active:not(:disabled) { transform: translateY(1px); }
.pcf-duel .dl-btn:disabled { opacity: .45; cursor: default; }
.pcf-duel .dl-btn.is-primary { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-on-accent); font-weight: 600; }
.pcf-duel .dl-btn.is-primary:hover:not(:disabled) { background: var(--dt-accent); opacity: .88; }
.pcf-duel .dl-btn.is-danger { color: var(--dt-danger); border-color: color-mix(in srgb, var(--dt-danger) 40%, var(--dt-line)); }
.pcf-duel .dl-btn.is-small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.pcf-duel .dl-btn.is-next { background: var(--dt-next-bg); border-color: var(--dt-next-line); color: var(--dt-next-fg); font-weight: 600; }
.pcf-duel .dl-btn.is-next:hover:not(:disabled) { background: var(--dt-next-bg); filter: brightness(1.08); }
.pcf-duel .dl-btn kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }
.pcf-duel :focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 2px; }
.pcf-duel .dt-pile:focus:not(:focus-visible) { outline: none; }

.pcf-duel .dt-avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 99px;
	object-fit: cover;
	background: var(--dt-s3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 12.5px;
}
.pcf-duel .dt-muted { color: var(--dt-muted); }
.pcf-duel .dt-small { font-size: 12.5px; }
.pcf-duel .dt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 99px;
	border: 1px solid var(--dt-line);
	font-size: 12.5px;
}
.pcf-duel .dt-chip.is-strong { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-on-accent); font-weight: 600; }
.pcf-duel .dt-seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--dt-s2); border: 1px solid var(--dt-line); }
.pcf-duel .dt-seg button,
.pcf-duel .dl-seg button {
	flex: 1 1 auto;
	padding: 6px 14px;
	border: 0;
	border-radius: 99px;
	background: none;
	color: var(--dt-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.pcf-duel .dt-seg button[aria-pressed="true"],
.pcf-duel .dl-seg button[aria-pressed="true"] { background: var(--dt-accent); color: var(--dt-on-accent); }

/* ------------------------------------------------------------------ */
/* Lobby                                                                */
/* ------------------------------------------------------------------ */

.pcf-duel .dl { width: min(1180px, 100%); margin: 0 auto; padding: 32px 20px 64px; box-sizing: border-box; }
.pcf-duel .dl-head { margin-bottom: 24px; }
.pcf-duel .dl-head h1 { margin: 2px 0 6px; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.pcf-duel .dl-head p { margin: 0; color: var(--dt-muted); max-width: 60ch; }
.pcf-duel .dl-kicker,
.pcf-duel .dt-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-faint); }
.pcf-duel .dl-notice { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: var(--dt-muted); }
/* the warning under "Bot trash talk" when Salty is chosen (piano/09) */
.pcf-duel .dl-notice.dl-talkwarn { margin: 8px 0 0; padding: 10px 12px; border-color: color-mix(in srgb, var(--dt-danger) 55%, transparent); background: color-mix(in srgb, var(--dt-danger) 10%, transparent); color: var(--dt-text); font-size: 13px; line-height: 1.4; }
.pcf-duel .dl-notice.dl-talkwarn[hidden] { display: none; }
.pcf-duel .dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* your duels head the page, full width; the replays close it, full width */
.pcf-duel .dl-yours { margin-bottom: 20px; border-width: 2px; }
.pcf-duel .dl-replays { grid-column: 1 / -1; }
.pcf-duel .dl-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--dt-surface); border: 1px solid var(--dt-line); }
.pcf-duel .dl-card h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.pcf-duel .dl-dev { width: min(420px, 100%); margin: 40px auto; box-sizing: border-box; }
.pcf-duel .dl-field { display: flex; flex-direction: column; gap: 6px; }
.pcf-duel .dl-field > span { font-size: 12.5px; color: var(--dt-muted); }
.pcf-duel .dl-input,
.pcf-duel .dl-select,
.pcf-duel .dl-field input {
	min-height: 40px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--dt-line);
	background: var(--dt-bg);
	color: var(--dt-text);
	font: inherit;
	box-sizing: border-box;
	width: 100%;
}
.pcf-duel .dl-seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--dt-s2); border: 1px solid var(--dt-line); }
.pcf-duel .dl-link,
.pcf-duel .dt-link { font-size: 13px; font-weight: 600; color: var(--dt-text); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.pcf-duel .dl-msg { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--dt-danger); }
.pcf-duel .dl-msg.is-ok { color: var(--dt-online); }
.pcf-duel .dl-note,
.pcf-duel .dl-empty { margin: 0; color: var(--dt-muted); font-size: 13px; }
.pcf-duel .dl-list { display: flex; flex-direction: column; gap: 10px; }
.pcf-duel .dl-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px 14px;
	align-items: center;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--dt-line);
	background: var(--dt-bg);
}
.pcf-duel .dl-row.is-highlight { border-color: var(--dt-accent); box-shadow: 0 0 0 1px var(--dt-accent); }
.pcf-duel .dl-row__deck { grid-column: 1 / -1; }
.pcf-duel .dl-row__actions { grid-column: 2; grid-row: 1; display: flex; gap: 8px; }
.pcf-duel .dl-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcf-duel .dl-who__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pcf-duel .dl-who__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcf-duel .dl-sub { font-size: 12.5px; color: var(--dt-muted); }
/* the state of a duel in the one list */
.pcf-duel .dl-state { display: inline-flex; align-items: center; margin-right: 8px; padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pcf-duel .dl-state.is-in { background: var(--dt-danger); color: #fff; }
.pcf-duel .dl-state.is-ready { background: var(--dt-online); color: #0d1a10; }
.pcf-duel .dl-state.is-wait { border: 1px solid var(--dt-line); color: var(--dt-muted); }
.pcf-duel .dl-row.is-incoming .dl-row__deck { display: flex; align-items: center; gap: 8px; }
.pcf-duel .dl-row.is-incoming .dl-select { flex: 1 1 auto; }
.pcf-duel .dl-chip { padding: 0 8px; border-radius: 99px; border: 1px solid var(--dt-line); font-size: 11.5px; color: var(--dt-text); }
.pcf-duel .dl-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dt-muted); cursor: pointer; }
.pcf-duel .dl-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--dt-accent); }

/* Open challenges: full width under Your duels, the format filter beside
   the title */
.pcf-duel .dl-open { margin-bottom: 20px; }
.pcf-duel .dl-open__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pcf-duel .dl-looking { font-size: 12.5px; font-weight: 600; color: var(--dt-online); }
.pcf-duel .dl-looking:empty { display: none; }
.pcf-duel .dl-openseg { margin-left: auto; }
.pcf-duel .dl-openseg button { padding: 5px 12px; font-size: 12.5px; }
.pcf-duel .dl-opennote { margin-top: 2px; font-size: 13px; color: var(--dt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* one line per challenge: who on the left, your deck and Join on the right */
.pcf-duel .dl-row.is-open .dl-row__actions { align-items: center; }
.pcf-duel .dl-opendeck { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dt-muted); white-space: nowrap; }
.pcf-duel .dl-opendeck .dl-select { width: 220px; }
.pcf-duel .dl-openmark { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--dt-s2); border: 1px solid var(--dt-line); font-size: 16px; }

@media (max-width: 760px) {
	.pcf-duel .dl-grid { grid-template-columns: minmax(0, 1fr); }
	.pcf-duel .dl-row { grid-template-columns: minmax(0, 1fr); }
	.pcf-duel .dl-row__actions { grid-column: 1; grid-row: auto; }
	.pcf-duel .dl-openseg { margin-left: 0; width: 100%; }
	.pcf-duel .dl-openseg button { flex: 1 1 auto; padding: 5px 8px; white-space: nowrap; }
	.pcf-duel .dl-opendeck { flex: 1 1 auto; min-width: 0; }
	.pcf-duel .dl-opendeck .dl-select { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* Table: frame                                                         */
/* ------------------------------------------------------------------ */

.pcf-duel .dt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pcf-duel .dt-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 8px 20px;
	border-bottom: 1px solid var(--dt-line);
	background: var(--dt-surface);
}
.pcf-duel .dt-bar__title { display: flex; flex-direction: column; line-height: 1.2; }
.pcf-duel .dt-bar__title span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pcf-duel .dt-bar__turn { display: flex; align-items: center; gap: 10px; }
.pcf-duel .dt-bar__actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pcf-duel .dt-bar__actions .dl-btn { min-height: 34px; padding: 0 14px; }

.pcf-duel .dt-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.pcf-duel .dt-board { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--dt-table); }

.pcf-duel .dt-grid {
	--gap: 8px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 24px;
	display: grid;
	grid-template-columns: max-content 190px;
	grid-template-rows: max-content max-content 44px max-content minmax(calc(var(--cw) * 1.1 * 1.4625), max-content);
	column-gap: 20px;
	row-gap: 10px;
	justify-content: center;
	align-content: center;
}
/* your panel bottom right, the opponent's above it; the hand tools sit left
   of your hand, so a long hand never runs under them */
.pcf-duel .dt-player.is-opp { grid-column: 2; grid-row: 2; align-self: start; }
.pcf-duel .dt-handwrap.is-opp { grid-column: 1; grid-row: 1; }
.pcf-duel .dt-field.is-opp { grid-column: 1; grid-row: 2; }
.pcf-duel .dt-phase { grid-column: 1; grid-row: 3; }
.pcf-duel .dt-field.is-me { grid-column: 1; grid-row: 4; }
.pcf-duel .dt-player.is-me { grid-column: 2; grid-row: 4 / 6; align-self: end; }
.pcf-duel .dt-handwrap.is-me { grid-column: 1; grid-row: 5; }

/* ------------------------------------------------------------------ */
/* Table: players                                                       */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-player {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border-radius: 16px;
	background: var(--dt-surface);
	border: 1px solid var(--dt-line);
	transition: border-color 200ms var(--dt-ease);
	position: relative;
}
.pcf-duel .dt-player.is-hit { border-color: var(--dt-danger); }
.pcf-duel .dt-player__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcf-duel .dt-player.is-me .dt-avatar:not(img) { background: var(--dt-accent); color: var(--dt-on-accent); }
.pcf-duel .dt-player__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pcf-duel .dt-player__name { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.pcf-duel .dt-online { width: 8px; height: 8px; border-radius: 99px; background: var(--dt-line); flex: 0 0 auto; }
.pcf-duel .dt-online.is-on { background: var(--dt-online); }
.pcf-duel .dt-lp { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pcf-duel .dt-lpbar { height: 4px; border-radius: 99px; background: var(--dt-s3); overflow: hidden; }
.pcf-duel .dt-lpbar div { height: 100%; border-radius: 99px; background: var(--dt-accent); transition: width 600ms var(--dt-ease); }
.pcf-duel .dt-lpfloat { position: absolute; right: 14px; top: 62px; font-weight: 700; font-size: 16px; color: var(--dt-danger); animation: dt-float 1000ms ease-out forwards; pointer-events: none; }
.pcf-duel .dt-lpfloat.is-gain { color: var(--dt-online); }
.pcf-duel .dt-lpform { display: flex; flex-wrap: wrap; gap: 6px; }
.pcf-duel .dt-lpform .dl-btn { min-height: 36px; }
.pcf-duel .dt-lpform:not(.is-compact) .dl-btn[type="submit"] { flex: 1 1 100%; }
.pcf-duel .dt-lpfield {
	flex: 1 1 60px;
	display: flex;
	align-items: center;
	min-height: 36px;
	border-radius: 99px;
	border: 1px solid var(--dt-line);
	background: var(--dt-bg);
	overflow: hidden;
}
.pcf-duel .dt-lpsign { width: 26px; text-align: center; font-size: 17px; font-weight: 600; color: var(--dt-danger); }
.pcf-duel .dt-lpsign.is-add { color: var(--dt-online); }
.pcf-duel .dt-lpinput { width: 100%; min-width: 0; height: 34px; padding: 0 10px 0 0; border: 0; background: transparent; color: var(--dt-text); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.pcf-duel .dt-lpplus { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--dt-line); border-radius: 99px; background: var(--dt-surface); color: var(--dt-text); font: inherit; font-size: 17px; cursor: pointer; }
.pcf-duel .dt-lpplus[aria-pressed="true"] { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-on-accent); }
.pcf-duel .dt-lpform.is-compact .dt-lpfield { flex-basis: 50px; }

/* ------------------------------------------------------------------ */
/* Table: zones and cards                                               */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-field { display: grid; gap: var(--gap); grid-template-rows: var(--ch) var(--ch); }
/* nine columns, the same on both sides: two before the five zones, two after
   (one of them empty), so the zones of the two fields line up */
.pcf-duel .dt-field.is-me,
.pcf-duel .dt-field.is-opp { grid-template-columns: var(--cw) var(--cw) repeat(5, var(--ch)) var(--cw) var(--cw); }

.pcf-duel .dt-zone {
	position: relative;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px dashed var(--dt-line);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 150ms var(--dt-ease), border-color 150ms var(--dt-ease);
}
.pcf-duel .dt-zone.has-card { border-color: transparent; }
.pcf-duel .dt-zone.is-gap { border: 0; }
.pcf-duel .dt-pile { cursor: pointer; border-style: solid; }
.pcf-duel .dt-pile.is-peeking { box-shadow: 0 0 0 2px var(--dt-accent); }
.pcf-duel .dt-zone__label { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-faint); text-align: center; }
.pcf-duel .dt-count {
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2;
	padding: 0 7px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .74);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.pcf-duel.is-dragging .dt-zone { border-color: var(--dt-faint); }
.pcf-duel .dt-zone.is-over,
.pcf-duel .dt-handwrap.is-over { background: color-mix(in srgb, var(--dt-accent) 12%, transparent); border-color: var(--dt-accent); border-style: solid; }

.pcf-duel .dt-card,
.dt-ghost {
	position: relative;
	width: var(--cw);
	height: var(--ch);
	flex: 0 0 auto;
	perspective: 900px;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.pcf-duel .dt-card__turn,
.dt-ghost .dt-card__turn { width: 100%; height: 100%; }
.pcf-duel .dt-field.is-opp .dt-card__turn,
.pcf-duel .dt-hand.is-opp .dt-card__turn { transform: rotate(180deg); }
.pcf-duel .dt-card__body,
.dt-ghost .dt-card__body {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	transition: transform 300ms var(--dt-ease);
	transform-style: preserve-3d;
}
.pcf-duel .dt-card__body.is-def { transform: rotate(90deg); }
.pcf-duel .dt-card__face,
.dt-ghost .dt-card__face { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.pcf-duel .dt-card__face.is-set { opacity: .55; filter: grayscale(.35); }
@media (hover: hover) {
	.pcf-duel .dt-card:hover .dt-card__body { box-shadow: 0 0 0 2px var(--dt-accent); }
}
.pcf-duel .dt-card.is-dragging { opacity: .3; }
.pcf-duel .dt-card.is-targeted .dt-card__body::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 9px;
	border: 2px solid var(--dt-target);
	animation: dt-target 1100ms ease-out infinite;
	pointer-events: none;
}
/* its own layer: it follows the finger by transform, and the shadow is not
   painted again at every step */
.dt-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); will-change: transform; }

/* the back: night blue, the site's white mark (an <img>, so its URL is
   never resolved against this stylesheet) */
.pcf-duel .dt-card__back,
.dt-ghost .dt-card__back {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	background: radial-gradient(circle at 50% 42%, #1c2c50 0%, #0a1122 58%, #03050b 100%);
	box-shadow: 0 0 0 1px #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* a sleeve (piano/08): its picture fills the back, no frame, no mark */
.pcf-duel .dt-card__back.has-sleeve,
.dt-ghost .dt-card__back.has-sleeve { background: #0a1122 center / cover no-repeat; }
.pcf-duel .dt-card__back.has-sleeve::before,
.dt-ghost .dt-card__back.has-sleeve::before { content: none; }
.pcf-duel .dt-card__back img,
.dt-ghost .dt-card__back img { position: relative; width: 58%; height: auto; opacity: .92; pointer-events: none; }
.pcf-duel .dt-fxcard { box-sizing: border-box; }
.pcf-duel .dt-card__back::before {
	content: "";
	position: absolute;
	inset: 6%;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 3px;
}

.pcf-duel .dt-tag {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 0 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .74);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}
.pcf-duel .dt-tag.is-reveal { background: var(--dt-opp); color: #1a1406; }
/* Counters: a small quiet badge in the card's corner — a dot and the number,
   in the table's own colours (the poker chips were too loud, 2026-09-28).
   The "Counter" tool beside your hand is dragged onto any card on the field;
   a card's badge dragged off, or tapped, takes one away. */
.pcf-duel .dt-ctrdot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dt-gold);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-gold) 30%, transparent);
	flex: 0 0 auto;
}
.pcf-duel .dt-ctr {
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	padding: 0 6px 0 5px;
	border-radius: 99px;
	background: rgba(10, 12, 16, .82);
	border: 1px solid color-mix(in srgb, var(--dt-gold) 55%, transparent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.pcf-duel .dt-ctr .dt-ctrdot { width: 6px; height: 6px; box-shadow: none; }
.pcf-duel .dt-chipsrc { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; gap: 7px; }
.pcf-duel .dt-chipsrc .dt-ctrdot { width: 9px; height: 9px; }
.dt-chipghost { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; }
.dt-chipghost .dt-ctrdot { display: block; width: 16px; height: 16px; border-radius: 50%; background: #e6bb45; box-shadow: 0 0 0 4px rgba(230, 187, 69, .3), 0 6px 14px rgba(0, 0, 0, .5); }
.pcf-duel.is-chipping .dt-field .dt-card { cursor: copy; }
.pcf-duel .dt-card.is-over .dt-card__body { box-shadow: 0 0 0 3px var(--dt-gold); }
.pcf-duel.is-compact .dt-ctr { height: 15px; padding: 0 4px; font-size: 9.5px; gap: 3px; top: 1px; right: 1px; }
/* what a card counts by itself (turns, Standby Phases): a clock, upper left */
.pcf-duel .dt-tally {
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	padding: 0 6px 0 4px;
	border-radius: 99px;
	background: rgba(10, 12, 16, .82);
	border: 1px solid color-mix(in srgb, var(--dt-accent) 60%, transparent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.pcf-duel .dt-tally.is-inline { position: static; align-self: flex-start; margin-top: 2px; background: color-mix(in srgb, var(--dt-danger) 80%, #000); }
.pcf-duel .dt-tally__clock { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-sizing: border-box; }
.pcf-duel .dt-tally__clock::after { content: ""; position: absolute; left: 2px; top: 0; width: 2px; height: 3px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; }
.pcf-duel.is-compact .dt-tally { height: 15px; padding: 0 4px 0 3px; font-size: 9.5px; gap: 3px; top: 1px; left: 1px; }

/* ATK / DEF under a face-up monster (Master Duel on a desktop, Duel Links on
   a phone): on the card's lower edge, never turned with a Defense card */
.pcf-duel .dt-atkdef {
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(10, 12, 16, .86);
	color: rgba(255, 255, 255, .6);
	font-size: clamp(9px, calc(var(--cw) * .15), 13px);
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.pcf-duel .dt-atkdef b { color: #fff; font-weight: 700; }
.pcf-duel .dt-atkdef b.is-up { color: #7fdc9a; }
.pcf-duel .dt-atkdef b.is-down { color: #ff8f84; }
@media (hover: hover) { .pcf-duel .dt-atkdef:hover { background: var(--dt-accent); } .pcf-duel .dt-atkdef:hover b { color: var(--dt-on-accent); } }
.pcf-duel.is-compact .dt-atkdef { bottom: -4px; padding: 0 4px; border-radius: 4px; }
/* your own face-down monster: the numbers for you alone, quieter, not a button */
.pcf-duel .dt-atkdef.is-set { background: rgba(10, 12, 16, .7); border: 1px dashed rgba(255, 255, 255, .35); cursor: default; pointer-events: none; }
.pcf-duel .dt-atkdef.is-set b { color: rgba(255, 255, 255, .78); }
/* the modal lists and piles show cards, not a monster in play */
.pcf-duel .dt-modal .dt-atkdef, .pcf-duel .dt-hand .dt-atkdef { display: none; }

.pcf-duel .dt-statform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 12px; min-width: 220px; }
.pcf-duel .dt-statform .dl-btn { justify-content: center; }
.pcf-duel .dt-statf { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--dt-faint); }
.pcf-duel .dt-statin { width: 100%; box-sizing: border-box; height: 38px; padding: 0 8px; border-radius: 10px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.pcf-duel .dt-statform .dl-btn { min-height: 36px; }

/* the lens: on a hovered card, fixes it in the panel */
.pcf-duel .dt-lens {
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 5;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: none;
	place-items: center;
	background: rgba(12, 12, 14, .78);
	color: #fff;
	cursor: zoom-in;
}
.pcf-duel .dt-lens svg { width: 12px; height: 12px; display: block; }
@media (hover: hover) {
	.pcf-duel:not(.is-compact) .dt-card:hover > .dt-lens { display: grid; }
	.pcf-duel .dt-lens:hover { background: var(--dt-accent); color: var(--dt-on-accent); }
}
.pcf-duel .dt-card.is-pinned .dt-card__body { box-shadow: 0 0 0 2px var(--dt-me); }
.pcf-duel .dt-card.is-pinned > .dt-lens { display: grid; background: var(--dt-me); color: #0d1528; }
.pcf-duel .dt-preview { position: relative; }
.pcf-duel .dt-preview.is-pinned { box-shadow: inset 3px 0 0 var(--dt-me); }
.pcf-duel .dt-pin {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid var(--dt-line);
	background: var(--dt-surface);
	color: var(--dt-muted);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
}
.pcf-duel .dt-pin.is-on { background: var(--dt-me); border-color: var(--dt-me); color: #0d1528; }

/* a card just drawn: a glow and a tag for a couple of seconds */
.pcf-duel .dt-card.is-new .dt-card__body { box-shadow: 0 0 0 2px var(--dt-gold), 0 0 18px 2px color-mix(in srgb, var(--dt-gold) 60%, transparent); }
.pcf-duel .dt-newtag {
	position: absolute;
	left: 50%;
	top: -10px;
	transform: translateX(-50%);
	z-index: 7;
	padding: 1px 8px;
	border-radius: 99px;
	background: var(--dt-gold);
	color: #1a1406;
	font-size: 10.5px;
	font-weight: 800;
	white-space: nowrap;
	pointer-events: none;
	animation: dt-ask-in 260ms var(--dt-ease);
}

/* the other player away: in their panel, and as the question in yours */
.pcf-duel .dt-away { display: inline-block; align-self: flex-start; padding: 0 7px; border-radius: 99px; background: var(--dt-danger); color: #fff; font-size: 10.5px; font-weight: 700; }
.pcf-duel .dt-ask.is-gone { background: color-mix(in srgb, var(--dt-danger) 12%, var(--dt-surface)); animation: dt-ask-in 260ms var(--dt-ease); }
.pcf-duel .dt-sig[disabled] { opacity: .55; cursor: default; }

/* hands: the opponent's along the top edge, yours under your field */
/* width 0 / min-width 100%: a hand takes its row's width and never widens the
   column (eleven cards used to push the field off the screen) */
.pcf-duel .dt-handwrap { position: relative; display: flex; align-items: center; gap: 14px; width: 0; min-width: 100%; }
.pcf-duel .dt-handwrap.is-opp { overflow: hidden; }
/* a hand is as wide as its row: past that the cards overlap (--fan, set by
   the page) rather than run under the tools or off the screen */
.pcf-duel .dt-hand { --hgap: 8px; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.pcf-duel .dt-hand > .dt-card + .dt-card { margin-left: var(--fan, var(--hgap)); }
.pcf-duel .dt-hand.is-opp { align-self: flex-end; }
.pcf-duel .dt-hand .dt-card.is-hand { width: calc(var(--cw) * 1.1); height: calc(var(--cw) * 1.1 * 1.4625); }
/* the opponent's hand: whole cards, smaller than yours (2026-10-28: they used to peek in, cut by the edge) */
.pcf-duel .dt-hand.is-opp .dt-card.is-hand { width: calc(var(--cw) * .62); height: calc(var(--cw) * .62 * 1.4625); }
.pcf-duel .dt-hand.is-me .dt-card.is-hand { box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .8); border-radius: 5px; }
@media (hover: hover) {
	.pcf-duel .dt-hand.is-me .dt-card.is-hand:hover { transform: translateY(-8px); transition: transform 180ms var(--dt-ease); z-index: 3; }
}
.pcf-duel .dt-handtools { order: -1; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.pcf-duel .dt-handtools .dl-btn { justify-content: flex-start; min-height: 30px; }

/* ------------------------------------------------------------------ */
/* Table: the phase bar on the centre line                              */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-phase { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pcf-duel .dt-phase::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--dt-line); z-index: -1; }
.pcf-duel .dt-track { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--dt-s2); border: 1px solid var(--dt-line); }
.pcf-duel .dt-step {
	min-height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: 99px;
	background: none;
	color: var(--dt-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 150ms var(--dt-ease), color 150ms var(--dt-ease);
}
.pcf-duel .dt-step:hover:not(:disabled):not(.is-now) { background: var(--dt-s3); color: var(--dt-text); }
.pcf-duel .dt-step.is-past { color: var(--dt-faint); }
.pcf-duel .dt-step.is-now { background: var(--dt-next-bg); color: var(--dt-next-fg); box-shadow: inset 0 0 0 1px var(--dt-next-line); }
.pcf-duel .dt-step:disabled { cursor: default; }
.pcf-duel .dt-track.is-theirs .dt-step.is-now { background: var(--dt-s3); color: var(--dt-text); box-shadow: none; }
.pcf-duel .dt-step__short { display: none; }
.pcf-duel .dt.is-tight .dt-step .dt-step__long { display: none; }
.pcf-duel .dt.is-tight .dt-step .dt-step__short { display: inline; }
.pcf-duel .dt-step--arrow {
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dt-line);
	background: var(--dt-surface);
	color: var(--dt-text);
}
.pcf-duel .dt-step--arrow:disabled { opacity: .4; }
.pcf-duel .dt-whose { background: var(--dt-surface); }

/* signals: small in your panel, big when a question is waiting for you */
/* Ask · OK · Wait in your panel: always there, big enough to hit without looking */
.pcf-duel .dt-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pcf-duel .dt-signals .dt-sig { flex-direction: column; gap: 3px; min-width: 0; min-height: 50px; padding: 5px 2px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.pcf-duel .dt-signals .dt-sig.is-ok { border-color: color-mix(in srgb, var(--dt-online) 55%, var(--dt-line)); }
.pcf-duel .dt-signals .dt-sig.is-wait { border-color: color-mix(in srgb, var(--dt-gold) 55%, var(--dt-line)); }
.pcf-duel .dt-signals .dt-sig.is-ask { border-color: color-mix(in srgb, var(--dt-me) 55%, var(--dt-line)); }
.pcf-duel .dt-sig {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 0 8px;
	border-radius: 99px;
	border: 1px solid var(--dt-line);
	background: var(--dt-surface);
	color: var(--dt-text);
	font: inherit;
	font-size: 12.5px;
	white-space: nowrap;
	cursor: pointer;
}
.pcf-duel .dt-sig:hover { background: var(--dt-s2); }
.pcf-duel .dt-sig.is-ok svg { color: var(--dt-online); }
.pcf-duel .dt-sig.is-wait svg { color: var(--dt-gold); }
.pcf-duel .dt-sig.is-chain svg { color: var(--dt-target); }
.pcf-duel .dt-sig.is-ask svg { color: var(--dt-me); }
.pcf-duel .dt-sig.is-big { min-height: 42px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.pcf-duel .dt-sig.is-big kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .5; }
.pcf-duel .dt-sig.is-big.is-ok { border-color: var(--dt-online); background: color-mix(in srgb, var(--dt-online) 14%, var(--dt-surface)); }
.pcf-duel .dt-sig.is-big.is-wait { border-color: var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 12%, var(--dt-surface)); }
.pcf-duel .dt-sig.is-big.is-chain { border-color: var(--dt-target); background: color-mix(in srgb, var(--dt-target) 14%, var(--dt-surface)); }

/* the question to the player who may respond: red, heading the side panel —
   beside the table, never over the cards or the players' panels */
.pcf-duel .dt-ask {
	flex: 0 0 auto;
	margin: 12px 12px 4px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--dt-danger) 16%, var(--dt-surface));
	border: 2px solid var(--dt-danger);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-danger) 22%, transparent), 0 24px 50px -24px rgba(0, 0, 0, .8);
	animation: dt-ask-in 260ms var(--dt-ease), dt-ask-glow 1600ms ease-in-out 260ms infinite;
	box-sizing: border-box;
}
.pcf-duel .dt-ask p { margin: 0; }
.pcf-duel .dt-ask__q { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--dt-text); }
.pcf-duel .dt-ask__q svg { color: var(--dt-danger); }
.pcf-duel .dt-ask__what { font-size: 12.5px; line-height: 1.35; color: var(--dt-muted); }
.pcf-duel .dt-ask__what strong { color: var(--dt-text); }
.pcf-duel .dt-ask__buttons { display: flex; flex-direction: column; gap: 6px; }
.pcf-duel .dt-ask__buttons .dt-sig { justify-content: flex-start; min-height: 38px; }
.pcf-duel .dt-ask__buttons .dt-sig kbd { margin-left: auto; }
.pcf-duel .dt-ask.is-turn { background: color-mix(in srgb, var(--dt-next-bg) 55%, var(--dt-surface)); border-color: var(--dt-me); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-me) 20%, transparent), 0 24px 50px -24px rgba(0, 0, 0, .8); animation: dt-ask-in 260ms var(--dt-ease); }
.pcf-duel .dt-ask.is-turn .dt-ask__q svg { color: var(--dt-me); }
.pcf-duel .dt-sig.is-big.is-start { border-color: var(--dt-me); background: var(--dt-next-bg); color: var(--dt-next-fg); }
.pcf-duel .dt-sig.is-start svg { color: currentColor; }
@keyframes dt-ask-glow { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dt-danger) 12%, transparent), 0 24px 50px -24px rgba(0, 0, 0, .8); } }
@keyframes dt-ask-in { from { opacity: 0; transform: translateY(8px); } }

/* the one who asked waits here, at the head of the side panel */
.pcf-duel .dt-waitchip {
	flex: 0 0 auto;
	margin: 12px 12px 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--dt-surface);
	border: 1px solid var(--dt-line);
	font-size: 12.5px;
	z-index: 5;
}
.pcf-duel .dt-waitchip p { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.pcf-duel .dt-waitchip svg { color: var(--dt-me); flex: 0 0 auto; }
.pcf-duel .dt-waitchip.is-thinking { border-color: var(--dt-gold); }
.pcf-duel .dt-waitchip.is-thinking svg { color: var(--dt-gold); }
.pcf-duel .dt-waitchip .dl-btn { align-self: flex-start; min-height: 28px; font-size: 12px; }

.pcf-duel .dt-sigpop { left: 0; right: 0; top: 16%; z-index: 44; display: flex; justify-content: center; }
.pcf-duel .dt-sigpop.is-mine { top: auto; bottom: 22%; }
.pcf-duel .dt-sigpop span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 99px;
	background: var(--dt-surface);
	border: 2px solid var(--dt-line);
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
	animation: dt-banner 2200ms ease forwards;
}
.pcf-duel .dt-sigpop.is-mine span { font-size: 13.5px; padding: 6px 14px; border-width: 1px; animation-duration: 1200ms; }
.pcf-duel .dt-sigpop.is-ok span { border-color: var(--dt-online); }
.pcf-duel .dt-sigpop.is-ok svg { color: var(--dt-online); }
.pcf-duel .dt-sigpop.is-wait span { border-color: var(--dt-gold); }
.pcf-duel .dt-sigpop.is-wait svg { color: var(--dt-gold); }
.pcf-duel .dt-sigpop.is-chain span { border-color: var(--dt-target); }
.pcf-duel .dt-sigpop.is-chain svg { color: var(--dt-target); }
.pcf-duel .dt-sigpop.is-ask svg { color: var(--dt-me); }
.pcf-duel .dt-sigword { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--dt-text); }
.pcf-duel .dt-sigword.is-ok svg { color: var(--dt-online); }
.pcf-duel .dt-sigword.is-wait svg { color: var(--dt-gold); }
.pcf-duel .dt-sigword.is-chain svg { color: var(--dt-target); }
.pcf-duel .dt-sigword.is-ask svg { color: var(--dt-me); }
.pcf-duel .dt-phase .dl-btn { min-height: 40px; }

/* ------------------------------------------------------------------ */
/* Table: panel (card, log, chat)                                       */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-panel { display: flex; flex-direction: column; min-height: 0; background: var(--dt-surface); border-left: 1px solid var(--dt-line); }
.pcf-duel .dt-bar__more,
.pcf-duel .dt-bar__log { display: none; }
.pcf-duel .dt-panel__close { display: none; }
/* the card being read: its own room at the top of the panel. The log below
   takes what is left and scrolls — it used to be the other way round, and the
   card came out as a sliver with its name cut in half */
.pcf-duel .dt-preview { flex: 0 0 auto; max-height: 52%; min-height: 0; padding: 16px; border-bottom: 1px solid var(--dt-line); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.pcf-duel .dt-panel.has-ask .dt-preview { max-height: 30%; }
.pcf-duel .dt-preview p { margin: 0; }
.pcf-duel .dt-preview__top { display: flex; gap: 14px; align-items: flex-start; }
.pcf-duel .dt-preview__img { width: 132px; height: 193px; border-radius: 7px; flex: 0 0 auto; object-fit: cover; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.pcf-duel .dt-preview__meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 2px; }
.pcf-duel .dt-preview__meta h2 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; }
.pcf-duel .dt-preview__meta .dt-chip { align-self: flex-start; text-transform: capitalize; }
.pcf-duel .dt-preview__text { font-size: 13.5px; line-height: 1.55; color: var(--dt-text); opacity: .86; white-space: pre-line; }
.pcf-duel .dt-stats { font-variant-numeric: tabular-nums; font-size: 14px; }
.pcf-duel .dt-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--dt-faint); }
.pcf-duel .dt-dot.is-monster { background: var(--dt-monster); }
.pcf-duel .dt-dot.is-spell { background: var(--dt-spell); }
.pcf-duel .dt-dot.is-trap { background: var(--dt-trap); }
.pcf-duel .dt-tabs-wrap { padding: 12px 16px 8px; }
.pcf-duel .dt-log { list-style: none; margin: 0; padding: 0 16px 12px; flex: 1 1 0; min-height: 80px; overflow-y: auto; font-size: 13px; }
.pcf-duel .dt-log__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 3px 0; color: var(--dt-muted); }
.pcf-duel .dt-log__line strong { color: var(--dt-text); font-weight: 600; }
.pcf-duel .dt-log__line > span:nth-child(2) { flex: 1 1 calc(100% - 20px); min-width: 0; }
.pcf-duel .dt-log__line.is-chat { color: var(--dt-text); }
/* the bot's lines (piano/09): its colour, a bar and a tint, unlike the log's grey lines */
.pcf-duel .dt-log__line.is-bot { margin: 3px 0; padding: 5px 8px 5px 10px; border-left: 3px solid var(--dt-opp); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--dt-opp) 12%, transparent); font-style: italic; }
.pcf-duel .dt-log__line.is-bot strong { color: var(--dt-opp); font-style: normal; }
.pcf-duel .dt-log__line.is-bot .dt-log__dot { display: none; }
/* its line on the table, for a few seconds: over the opponent's side */
.pcf-duel .dt-talk { position: absolute; z-index: 30; top: 10px; left: 50%; transform: translateX(-50%); max-width: min(440px, 86%); padding: 8px 14px 9px; border-radius: 14px 14px 14px 4px; border: 1px solid color-mix(in srgb, var(--dt-opp) 55%, transparent); background: color-mix(in srgb, var(--dt-table) 82%, var(--dt-opp)); color: var(--dt-text); font-size: 14px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; animation: dt-talk-in .22s var(--dt-ease); }
.pcf-duel .dt-talk[hidden] { display: none; }
.pcf-duel .dt-talk strong { display: block; margin-bottom: 1px; color: var(--dt-opp); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pcf-duel .dt-talk span { font-style: italic; }
.pcf-duel .dt-talk.is-typing span { letter-spacing: .2em; font-style: normal; }
@keyframes dt-talk-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-talk { animation: none; } }
.pcf-duel .dt-talkbtn[hidden], .pcf-duel .dt-bar > .dt-talkbtn[hidden], .pcf-duel .dt-foot > .dt-foot__r > .dt-talkbtn[hidden] { display: none; }
.pcf-duel .dt-talkbtn.is-muted { color: var(--dt-muted); }
.pcf-duel .dt-log__dot { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; transform: translateY(-1px); background: var(--dt-opp); }
.pcf-duel .dt-log__line.is-me .dt-log__dot { background: var(--dt-me); }
.pcf-duel .dt-log__turn { margin-top: 8px; padding: 8px 0 2px; border-top: 1px solid var(--dt-line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-faint); }
/* who won: the duel's last line, in the chat and in the log */
.pcf-duel .dt-log__result { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--dt-gold, #c9a227) 16%, transparent); color: var(--dt-text, inherit); font-weight: 600; list-style: none; }
.pcf-duel .dt-private {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 15px;
	padding: 0 8px;
	border-radius: 99px;
	border: 1px solid color-mix(in srgb, var(--dt-target) 45%, var(--dt-line));
	color: var(--dt-target);
	font-size: 11.5px;
}
.pcf-duel .dt-chat { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--dt-line); }
.pcf-duel .dt-input { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--dt-line); background: var(--dt-bg); color: var(--dt-text); font: inherit; }
.pcf-duel .dt-badge { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--dt-danger); color: #fff; font-size: 11px; font-weight: 700; }
.pcf-duel .dt-bottom { display: none; }

/* ------------------------------------------------------------------ */
/* Menus, piles, status                                                 */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-menu {
	position: fixed;
	z-index: 60;
	width: 250px;
	padding: 6px;
	border-radius: 12px;
	background: var(--dt-surface);
	border: 1px solid var(--dt-line);
	box-shadow: 0 32px 70px -30px rgba(0, 0, 0, .8);
	display: flex;
	flex-direction: column;
}
.pcf-duel .dt-menu__title { padding: 6px 10px 4px; font-size: 12px; color: var(--dt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcf-duel .dt-menu__group { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid var(--dt-line); }
.pcf-duel .dt-menu__group:last-child { border-bottom: 0; }
.pcf-duel .dt-menu button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--dt-text);
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
}
.pcf-duel .dt-menu button:hover,
.pcf-duel .dt-menu button:focus-visible { background: var(--dt-s3); outline: none; }
.pcf-duel .dt-menu button.is-checked { font-weight: 600; background: var(--dt-s2); }
.pcf-duel .dt-menuback { position: fixed; inset: 0; z-index: 59; background: rgba(5, 7, 10, .5); }
.pcf-duel .dt-menu.is-sheet {
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	width: auto;
	max-height: 78vh;
	overflow-y: auto;
	padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
	border-radius: 20px 20px 0 0;
	border-bottom: 0;
	animation: dt-sheet-in 220ms var(--dt-ease);
	-webkit-overflow-scrolling: touch;
}
.pcf-duel .dt-menu.is-sheet button { min-height: 48px; font-size: 15px; padding: 0 12px; }
.pcf-duel .dt-menu.is-sheet kbd { display: none; }
.pcf-duel .dt-menu__head { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 2px 10px; background: var(--dt-surface); border-bottom: 1px solid var(--dt-line); }
.pcf-duel .dt-menu__head img { width: 44px; height: 64px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.pcf-duel .dt-menu__head strong { flex: 1 1 auto; font-size: 15px; line-height: 1.25; }
.pcf-duel .dt-menu.is-sheet .dt-menu__head .dl-btn { min-height: 36px; font-size: 13px; border: 1px solid var(--dt-line); background: var(--dt-s2); }
/* the card, big, on an upright phone */
.pcf-duel .dt-detail { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px 14px; padding: 12px 2px 6px; align-items: start; }
.pcf-duel .dt-detail__img { width: 100%; border-radius: 8px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .8); }
.pcf-duel .dt-detail__meta { display: flex; flex-direction: column; gap: 8px; }
.pcf-duel .dt-detail__meta .dt-chip { align-self: flex-start; text-transform: capitalize; }
.pcf-duel .dt-detail__text { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.pcf-duel .dt-detail .dt-link { grid-column: 1 / -1; }
.pcf-duel .dt-menu.is-sheet .dt-detail__btn { width: 100%; min-height: 48px; margin-top: 8px; justify-content: center; border: 1px solid var(--dt-line); background: var(--dt-s2); font-weight: 600; }
@keyframes dt-sheet-in { from { transform: translateY(40px); opacity: 0; } }
.pcf-duel .dt-menu kbd { font: inherit; font-size: 11.5px; min-width: 18px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--dt-line); color: var(--dt-faint); text-align: center; }

.pcf-duel .dt-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 7, 10, .6); }
.pcf-duel .dt-modal__box { width: min(900px, 100%); max-height: 85vh; display: flex; flex-direction: column; border-radius: 20px; background: var(--dt-surface); border: 1px solid var(--dt-line); overflow: hidden; }
.pcf-duel .dt-modal__box header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--dt-line); }
.pcf-duel .dt-modal__box h2 { margin: 0; font-size: 18px; }
.pcf-duel .dt-modal__box footer { padding: 12px 20px; border-top: 1px solid var(--dt-line); }
.pcf-duel .dt-modal__grid { --cw: 104px; --ch: 152px; overflow-y: auto; padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; justify-items: center; }

/* solo: the other side's Life Points are yours to change, from its number on a phone */
.pcf-duel.is-compact .dt-player.is-opp .dt-lpform { display: none; }
.pcf-duel .dt-player.is-opp .dt-lp[role="button"] { cursor: pointer; }
.pcf-duel .dt-player.is-opp .dt-lpform { margin-top: 2px; }

/* the match: score and clock */
.pcf-duel .dt-matchchip { gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcf-duel .dt-clock { font-weight: 700; }
/* the last five minutes, then time: a warm tint, then a red pill that pulses
   — a timer running out has to be seen without looking for it */
.pcf-duel .dt-clock.is-low { color: var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 16%, transparent); padding: 0 6px; border-radius: 99px; }
.pcf-duel .dt-clock.is-out {
	color: #fff;
	background: var(--dt-danger);
	padding: 0 8px;
	border-radius: 99px;
	animation: dt-time-out 1.4s ease-in-out infinite;
}
@keyframes dt-time-out {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dt-danger) 70%, transparent); }
	50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--dt-danger) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-clock.is-out { animation: none; } }
.pcf-duel .dt-gone { color: var(--dt-muted); }
.pcf-duel .dt-accept { animation: dt-accept 1400ms ease-in-out infinite; }
@keyframes dt-accept { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dt-me) 30%, transparent); } }
.pcf-duel.is-port .dt-player .dt-matchchip { margin-left: auto; font-size: 11.5px; padding: 1px 8px; }

/* a replay: its controls under the bar, nothing to play with on the table */
.pcf-duel .dt-rbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 6px 16px; border-bottom: 1px solid var(--dt-line); background: var(--dt-surface); }
.pcf-duel .dt-rbar__play,
.pcf-duel .dt-rbar__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pcf-duel .dt-rbar__play { flex: 1 1 360px; }
.pcf-duel .dt-rbar .dl-btn { min-height: 32px; padding: 0 10px; }
.pcf-duel .dt-rbar .dl-btn.is-on { background: var(--dt-next-bg); border-color: var(--dt-next-line); color: var(--dt-next-fg); }
.pcf-duel .dt-rbar__range { flex: 1 1 120px; min-width: 80px; accent-color: var(--dt-me); }
.pcf-duel .dt-rbar__pos { font-size: 12px; color: var(--dt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcf-duel.is-compact .dt-rbar { padding: 6px 8px; gap: 6px; }
/* on a phone the options are one row that scrolls sideways */
.pcf-duel.is-compact .dt-rbar__opts { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; touch-action: pan-x; }
.pcf-duel.is-compact .dt-rbar__opts .dl-btn { flex: 0 0 auto; }
.pcf-duel.is-compact .dt-rbar .dl-btn { min-height: 34px; font-size: 12px; padding: 0 8px; }
.pcf-duel.is-replay .dt-signals,
.pcf-duel.is-replay .dt-lpform,
.pcf-duel.is-replay .dt-bottom .dt-sig,
.pcf-duel.is-replay .dt-open__actions button,
.pcf-duel.is-replay .dt-chat { display: none; }
.pcf-duel.is-replay.is-compact .dt-player.is-me .dt-lp::after { content: none; }

/* side decking (piano/08, model C of design/side-deck/ in the table's
   colours): the plans on the left, the three steps in the middle, the count
   and Ready below. A computer: the whole window; a phone: one column, the
   plans in a row that scrolls sideways, the bar fixed at the bottom. */
.pcf-duel .dt-sd { display: flex; flex-direction: column; width: min(1480px, 100%); height: 94vh; height: 94dvh; max-height: none; padding: 0; overflow: hidden; }
.pcf-duel .dt-sd__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--dt-line); }
.pcf-duel .dt-sd__head h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.01em; }
.pcf-duel .dt-sd__head .dt-kicker { letter-spacing: .12em; }
.pcf-duel .dt-sd__headr { display: flex; align-items: center; gap: 14px; }
.pcf-duel .dt-sd__opp { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dt-muted); white-space: nowrap; }
.pcf-duel .dt-sd__opp i { width: 8px; height: 8px; border-radius: 50%; background: var(--dt-gold); }
.pcf-duel .dt-sd__opp.is-ready i { background: var(--dt-online); }
.pcf-duel .dt-sd__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.pcf-duel .dt-sd__plans { min-height: 0; overflow-y: auto; padding: 18px 18px 14px; border-right: 1px solid var(--dt-line); display: flex; flex-direction: column; gap: 10px; }
.pcf-duel .dt-sd__plans h3 { margin: 0; font-size: 17px; }
.pcf-duel .dt-sd__sub, .pcf-duel .dt-sd__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dt-faint); }
.pcf-duel .dt-sd__note { margin-top: auto; padding-top: 10px; }
.pcf-duel .dt-sd__order { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dt-muted); }
.pcf-duel .dt-sd__planlist { display: flex; flex-direction: column; gap: 8px; }
.pcf-duel .dt-sd__plan { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 14px; text-align: left; border: 1px solid var(--dt-line); border-radius: 12px; background: var(--dt-s2); color: var(--dt-text); font: inherit; cursor: pointer; transition: border-color 160ms, background 160ms; }
.pcf-duel .dt-sd__plan strong { font-size: 15px; }
.pcf-duel .dt-sd__plan span { font-size: 13px; color: var(--dt-muted); }
.pcf-duel .dt-sd__plan:hover { border-color: var(--dt-faint); }
.pcf-duel .dt-sd__plan.is-on { border: 2px solid var(--dt-me); padding: 10px 13px; background: color-mix(in srgb, var(--dt-me) 10%, var(--dt-s2)); }
.pcf-duel .dt-sd__plan .dt-sd__fits { color: var(--dt-online); font-weight: 600; }
.pcf-duel .dt-sd__plan .dt-sd__review { color: var(--dt-gold); }
.pcf-duel .dt-sd__plan.is-none { background: none; }
.pcf-duel .dt-sd__saveplan { padding: 12px; border: 1.5px dashed var(--dt-line); border-radius: 12px; background: none; color: var(--dt-text); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.pcf-duel .dt-sd__saveplan:disabled { opacity: .45; cursor: default; }
.pcf-duel .dt-sd__saveform { display: flex; flex-wrap: wrap; gap: 6px; }
.pcf-duel .dt-sd__saveform .dt-input { flex: 1 1 100%; font-size: 16px; }

.pcf-duel .dt-sd__work { min-height: 0; overflow-y: auto; padding: 16px 22px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* the deck as the Deckbuilder shows it: Main ten a row, Side and Extra fifteen
   a row; fitSide() picks the width that lets it all fit the window */
.pcf-duel .dt-sd__board { margin: 0 auto; }
.pcf-duel .dt-sd__board h4 { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dt-muted); }
.pcf-duel .dt-sd__board h4:first-child { margin-top: 0; }
.pcf-duel .dt-sd__board h4 b { color: var(--dt-text); letter-spacing: 0; }
.pcf-duel .dt-sd__board h4 .dt-muted { margin-left: auto; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.pcf-duel .dt-sd__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pcf-duel .dt-sd__grid.is-side, .pcf-duel .dt-sd__grid.is-extra { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
.pcf-duel .dt-sd__card { position: relative; isolation: isolate; display: block; min-width: 0; padding: 0; border: 0; border-radius: 5px; background: var(--dt-s2); aspect-ratio: 59 / 86; cursor: pointer; box-shadow: 0 0 0 1px var(--dt-line); transition: box-shadow 160ms, opacity 160ms, filter 160ms; }
.pcf-duel .dt-sd__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
/* the name: only where the picture is missing (it sits under the image) */
.pcf-duel .dt-sd__cname { position: absolute; inset: 0; z-index: -1; padding: 4px; overflow: hidden; font-size: 9.5px; line-height: 1.15; color: var(--dt-muted); text-align: left; }
.pcf-duel .dt-sd__mark { position: absolute; top: -6px; right: -6px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--dt-surface); }
/* chosen, not swapped yet: the table's blue */
.pcf-duel .dt-sd__card.is-sel { box-shadow: 0 0 0 3px var(--dt-me), 0 0 16px 2px color-mix(in srgb, var(--dt-me) 45%, transparent); }
.pcf-duel .dt-sd__card.is-sel .dt-sd__mark { background: var(--dt-me); color: #0b1a33; }
/* swapped: green where it came in, red where it went out */
.pcf-duel .dt-sd__card.is-in, .pcf-duel .dt-sd__card.is-out { cursor: default; }
.pcf-duel .dt-sd__card.is-in { box-shadow: 0 0 0 3px #4fc283, 0 0 16px 2px color-mix(in srgb, #4fc283 50%, transparent); }
.pcf-duel .dt-sd__card.is-in .dt-sd__mark { background: #2f9e62; }
.pcf-duel .dt-sd__card.is-out { box-shadow: 0 0 0 3px #e2695f, 0 0 16px 2px color-mix(in srgb, #e2695f 50%, transparent); }
.pcf-duel .dt-sd__card.is-out .dt-sd__mark { background: #d9534a; }
.pcf-duel .dt-sd__card.is-out img { filter: saturate(.55) brightness(.8); }
@media (hover: hover) { .pcf-duel .dt-sd__card:not(.is-in):not(.is-out):not(.is-sel):hover { box-shadow: 0 0 0 2px var(--dt-faint); } }
.pcf-duel .dt-sd__swap.is-ready { background: var(--dt-me); border-color: var(--dt-me); color: #0b1a33; font-weight: 700; }
.pcf-duel .dt-sd__warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 12%, transparent); }

.pcf-duel .dt-sd__foot { display: flex; align-items: center; gap: 20px; padding: 12px 22px; border-top: 1px solid var(--dt-line); background: var(--dt-surface); }
.pcf-duel .dt-sd__count { display: flex; align-items: baseline; gap: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-muted); white-space: nowrap; }
.pcf-duel .dt-sd__count b { font-size: 34px; line-height: 1; margin-right: 4px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pcf-duel .dt-sd__count .is-out b { color: #f08a80; }
.pcf-duel .dt-sd__count .is-in b { color: #6fd39a; }
.pcf-duel .dt-sd__state { flex: 1 1 auto; margin: 0; font-size: 14px; color: var(--dt-gold); }
.pcf-duel .dt-sd__state.is-ok { color: #6fd39a; }
.pcf-duel .dt-sd__btns { display: flex; gap: 8px; flex: 0 0 auto; }
.pcf-duel .dt-sd__btns .dl-btn { min-height: 44px; padding: 0 18px; }
.pcf-duel .dt-sd__ready { font-weight: 700; }
.pcf-duel .dt-sd__ready:disabled, .pcf-duel .dt-sd__btns .dl-btn:disabled { opacity: .45; cursor: default; }

/* a phone: one column; the plans a row that scrolls sideways */
.pcf-duel.is-compact .dt-modal:has(.dt-sd) { padding: 0; }
.pcf-duel.is-compact .dt-sd { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.pcf-duel.is-compact .dt-sd__head { padding: 10px 14px; }
.pcf-duel.is-compact .dt-sd__head h2 { font-size: 19px; }
.pcf-duel.is-compact .dt-sd__head .dt-kicker { font-size: 10px; }
.pcf-duel.is-compact .dt-sd__opp { display: none; }
.pcf-duel.is-compact .dt-sd__body { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pcf-duel.is-compact .dt-sd__plans { flex: 0 0 auto; overflow: visible; border: 0; border-bottom: 1px solid var(--dt-line); padding: 10px 14px; gap: 8px; }
.pcf-duel.is-compact .dt-sd__plans h3, .pcf-duel.is-compact .dt-sd__sub, .pcf-duel.is-compact .dt-sd__note { display: none; }
.pcf-duel.is-compact .dt-sd__planlist { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; touch-action: pan-x; }
.pcf-duel.is-compact .dt-sd__plan { flex: 0 0 auto; max-width: 70vw; }
.pcf-duel.is-compact .dt-sd__work { flex: 0 0 auto; overflow: visible; padding: 12px 14px 20px; }
.pcf-duel.is-compact .dt-sd__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.pcf-duel.is-compact .dt-sd__grid.is-side, .pcf-duel.is-compact .dt-sd__grid.is-extra { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.pcf-duel.is-compact .dt-sd__mark { width: 17px; height: 17px; font-size: 11px; top: -5px; right: -5px; }
.pcf-duel.is-compact .dt-sd__foot { flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.pcf-duel.is-compact .dt-sd__count b { font-size: 24px; }
.pcf-duel.is-compact .dt-sd__state { flex: 1 1 0; font-size: 12.5px; }
.pcf-duel.is-compact .dt-sd__btns { flex: 1 1 100%; }
.pcf-duel.is-compact .dt-sd__btns .dl-btn { flex: 1 1 auto; padding: 0 10px; }
.pcf-duel.is-compact .dt-sd__swap { flex: 2 1 auto; }

/* upright phone: a pile or the Deck shows four cards a row, not three big ones */
.pcf-duel.is-port .dt-modal { padding: 10px; }
.pcf-duel.is-port .dt-modal__box { max-height: 92vh; max-height: 92dvh; }
.pcf-duel.is-port .dt-modal__box header { padding: 12px 14px; }
.pcf-duel.is-port .dt-modal__grid:not(.dt-discard) {
	--cw: calc((100vw - 20px - 24px - 18px) / 4);
	--ch: calc(var(--cw) * 1.4625);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	padding: 12px;
}
.pcf-duel.is-port .dt-modal__box footer { padding: 10px 14px; }

/* a pile's window scrolls under a finger laid on a card too (on the table a
   card takes the touch for dragging; in a list there is nothing to drag) */
.pcf-duel .dt-modal .dt-card,
.pcf-duel.is-compact .dt-modal .dt-card { touch-action: pan-y; }
.pcf-duel .dt-modal__grid { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pcf-duel .dt-deckfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pcf-duel .dt-deckfoot__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pcf-duel.is-port .dt-deckfoot__btns { flex: 1 1 100%; }
.pcf-duel.is-port .dt-deckfoot__btns .dl-btn { flex: 1 1 0; min-height: 44px; }

/* the iPhone's home bar and its notch sideways (viewport-fit=cover at the table) */
.pcf-duel.is-port .dt-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.pcf-duel.is-land .dt-grid { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.pcf-duel.is-land .dt-bar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
.pcf-duel.is-port .dt-rbar { padding-top: max(6px, env(safe-area-inset-top)); }

/* a yes/no question */
.pcf-duel .dt-confirm { width: min(420px, 100%); }
.pcf-duel .dt-confirm__text { margin: 0; padding: 16px 20px 4px; color: var(--dt-muted); }
.pcf-duel .dt-confirm footer { border-top: 0; }

/* the hand limit: pick the cards to discard at the end of the turn */
.pcf-duel .dt-discard__card { position: relative; padding: 0; border: 0; background: none; border-radius: 7px; cursor: pointer; width: 104px; transition: transform 150ms var(--dt-ease); }
.pcf-duel .dt-discard__card img { display: block; width: 100%; border-radius: 7px; }
.pcf-duel .dt-discard__card.is-on { transform: translateY(-4px); }
.pcf-duel .dt-discard__card.is-on img { box-shadow: 0 0 0 3px var(--dt-danger); opacity: .75; }
.pcf-duel .dt-discard__tag { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 1px 8px; border-radius: 99px; background: var(--dt-danger); color: #fff; font-size: 11.5px; font-weight: 700; }
.pcf-duel .dt-discard__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.pcf-duel.is-compact .dt-discard { --cw: 84px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); padding: 14px; gap: 10px; }
.pcf-duel.is-compact .dt-discard__card { width: 84px; }

/* who goes first: two dice, one each */
.pcf-duel .dt-open { position: absolute; inset: 0; z-index: 32; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--dt-table) 70%, transparent); backdrop-filter: blur(4px); }
.pcf-duel .dt-open__box { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border-radius: 20px; background: var(--dt-surface); border: 1px solid var(--dt-line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); text-align: center; box-sizing: border-box; }
.pcf-duel .dt-open__box h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.pcf-duel .dt-open__box > p { margin: 0; font-size: 13.5px; }
.pcf-duel .dt-open__dice { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0; }
.pcf-duel .dt-open__vs { color: var(--dt-faint); font-weight: 600; }
.pcf-duel .dt-open__side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 120px; padding: 12px; border-radius: 16px; border: 1px solid transparent; transition: border-color 300ms var(--dt-ease), background 300ms var(--dt-ease); }
.pcf-duel .dt-open__side.is-win { border-color: var(--dt-online); background: color-mix(in srgb, var(--dt-online) 10%, transparent); }
.pcf-duel .dt-open__die { width: 76px; height: 76px; font-size: 36px; border-radius: 16px; }
.pcf-duel .dt-open__line { font-size: 12.5px; color: var(--dt-muted); }
.pcf-duel .dt-open__side.is-rolling .dt-open__line { visibility: hidden; }
.pcf-duel .dt-open__box.is-settling .dt-open__actions,
.pcf-duel .dt-open__box.is-settling .dt-open__side.is-win { visibility: hidden; }
.pcf-duel .dt-open__box.is-settling .dt-open__side.is-win { visibility: visible; border-color: transparent; background: none; }
.pcf-duel .dt-open__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 48px; }
.pcf-duel .dt-open__note { margin: 0; font-size: 14px; color: var(--dt-muted); }
.pcf-duel .dt-open__note.is-strong { color: var(--dt-text); font-weight: 600; }
.pcf-duel .dt-open__roll { min-height: 46px; padding: 0 24px; font-size: 15px; }
.pcf-duel .dt-open__roll kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }
.pcf-duel .dt-open__choice { display: flex; gap: 8px; }
.pcf-duel .dt-open__choice .dl-btn { min-height: 44px; padding: 0 22px; font-size: 14.5px; }
.pcf-duel.is-compact .dt-open__box { padding: 16px; gap: 8px; }
.pcf-duel.is-compact .dt-open__side { min-width: 96px; padding: 8px; }
.pcf-duel.is-compact .dt-open__die { width: 60px; height: 60px; font-size: 28px; }
.pcf-duel.is-compact .dt-open__roll kbd { display: none; }

.pcf-duel .dt-status { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--dt-table) 82%, transparent); color: var(--dt-muted); font-size: 15px; }
.pcf-duel .dt-status.is-error { color: var(--dt-danger); }
/* on the way in: nothing but the loading line until the table is measured */
.pcf-duel.is-booting .dt { visibility: hidden; }
.pcf-duel.is-booting .dt-status { visibility: visible; position: fixed; background: var(--dt-table); }
.pcf-duel .dt-pick {
	position: absolute;
	left: 50%;
	top: 12px;
	z-index: 45;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 16px;
	border-radius: 99px;
	background: var(--dt-surface);
	border: 1px solid var(--dt-target);
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8);
	font-weight: 600;
	white-space: nowrap;
}
.pcf-duel.is-picking .dt-field .dt-zone.has-card:not(.dt-pile) .dt-card { cursor: crosshair; }
.pcf-duel.is-picking .dt-field .dt-zone.has-card:not(.dt-pile) .dt-card__body { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-target) 60%, transparent); }

.dt-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 200;
	transform: translate(-50%, 16px);
	max-width: min(520px, calc(100vw - 32px));
	padding: 10px 18px;
	border-radius: 99px;
	background: #1d2023;
	color: #f3f3f2;
	border: 1px solid #3a3e42;
	font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}
.dt-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.dt-toast.is-error { border-color: #e2695f; }
.dt-toast.is-ok { border-color: #6fbf85; }
/* the automatic duel: a message goes at the top, small, and never over a
   question (Fase 3.1) */
html.pcf-duel-auto .dt-toast { top: max(10px, env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -16px); padding: 7px 14px; font-size: 13px; }
html.pcf-duel-auto .dt-toast.is-on { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ */
/* Effects layer                                                        */
/* ------------------------------------------------------------------ */

/* targets: a numbered pin on the target and on the card pointing at it */
.pcf-duel .dt-mark {
	position: absolute;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6);
}
.pcf-duel .dt-mark.is-to { top: -10px; background: var(--dt-target); color: #1a1406; }
/* a picked card in a hand: the opponent's hand shows only its lower part */
.pcf-duel .dt-hand.is-opp .dt-mark.is-to { top: auto; bottom: 4px; }
@media (hover: hover) {
	.pcf-duel .dt-hand.is-opp .dt-card:hover .dt-card__body { box-shadow: 0 0 0 2px var(--dt-target); }
}
.pcf-duel .dt-mark.is-from { bottom: -10px; background: var(--dt-surface); color: var(--dt-target); border: 1.5px solid var(--dt-target); }

/* the moment of a target or an attack: a beam that draws itself and fades */
.pcf-duel .dt-beams { position: absolute; left: 0; top: 0; overflow: visible; }
.pcf-duel .dt-beam { fill: none; stroke: var(--dt-target); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px var(--dt-target)); }
.pcf-duel .dt-beam.is-attack { stroke: var(--dt-attack); stroke-width: 4; filter: drop-shadow(0 0 8px var(--dt-attack)); }
.pcf-duel .dt-beam__dot { fill: var(--dt-target); transform-box: fill-box; transform-origin: center; }
.pcf-duel .dt-beam__dot.is-attack { fill: var(--dt-attack); }
/* the link between a targeting card and its target: discreet, bright for two
   seconds when made and while the pointer is on either card */
.pcf-duel .dt-links { position: absolute; left: 0; top: 0; z-index: 34; pointer-events: none; overflow: visible; }
.pcf-duel .dt-link { opacity: .3; transition: opacity 500ms ease; }
.pcf-duel .dt-link.is-bright { opacity: 1; transition-duration: 160ms; }
.pcf-duel .dt-link.is-bound:not(.is-bright) { opacity: 0; }
.pcf-duel .dt-link__line { fill: none; stroke: var(--dt-target); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 5; transition: stroke-width 300ms ease; }
.pcf-duel .dt-link__dot { fill: var(--dt-target); }
.pcf-duel .dt-link.is-bright .dt-link__line { stroke-width: 3.5; stroke-dasharray: none; filter: drop-shadow(0 0 6px var(--dt-target)); }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-link, .pcf-duel .dt-link__line { transition: none; } }
.pcf-duel .dt-fx { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
.pcf-duel .dt-fx > * { position: absolute; }
/* attack: the hit on the target */
.pcf-duel .dt-hit { border-radius: 10px; pointer-events: none; }
.pcf-duel .dt-hit::before,
.pcf-duel .dt-hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcf-duel .dt-hit::before { background: radial-gradient(circle, color-mix(in srgb, var(--dt-attack) 70%, transparent) 0%, transparent 70%); animation: dt-hit-flash 600ms ease-out forwards; }
.pcf-duel .dt-hit::after { border: 3px solid var(--dt-attack); animation: dt-land 600ms ease-out forwards; }
@keyframes dt-hit-flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4); } }

/* special summon: a column of light and two rings */
.pcf-duel .dt-ss { pointer-events: none; overflow: visible; }
.pcf-duel .dt-ss__col {
	position: absolute;
	left: 50%;
	bottom: -10%;
	width: 130%;
	height: 260%;
	transform: translateX(-50%);
	transform-origin: 50% 100%;
	background: linear-gradient(to top, rgba(143, 184, 255, 0) 0%, rgba(143, 184, 255, .55) 35%, rgba(255, 255, 255, .25) 70%, rgba(255, 255, 255, 0) 100%);
	filter: blur(6px);
	border-radius: 50%;
	animation: dt-ss-col 1000ms ease-out forwards;
}
.pcf-duel .dt-ss__ring { position: absolute; inset: -4px; border-radius: 10px; border: 2px solid #cfe0ff; box-shadow: 0 0 18px 2px rgba(143, 184, 255, .6); animation: dt-ss-ring 900ms ease-out forwards; }
.pcf-duel .dt-ss__ring.is-late { animation-delay: 180ms; opacity: 0; }
@keyframes dt-ss-col { 0% { opacity: 0; transform: translateX(-50%) scaleY(.2); } 30% { opacity: 1; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.1); } }
@keyframes dt-ss-ring { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.45); } }

/* while dragging one of your field cards: what it can hit lights up */
.pcf-duel.is-dragging-mon .dt-field.is-opp .dt-zone--mzone.has-card { box-shadow: 0 0 0 2px var(--dt-attack); border-radius: 6px; }
.pcf-duel.is-dragging-mon .dt-player.is-opp { border-color: var(--dt-attack); border-style: dashed; }
.pcf-duel.is-dragging-mon .dt-player.is-opp.is-over { background: color-mix(in srgb, var(--dt-attack) 14%, var(--dt-surface)); }
.pcf-duel.is-dragging-field .dt-field.is-opp .dt-zone.has-card:not(.dt-pile) { box-shadow: 0 0 0 2px var(--dt-target); border-radius: 6px; }
.pcf-duel.is-dragging-mon .dt-field.is-opp .dt-zone.is-over,
.pcf-duel.is-dragging-field .dt-field.is-opp .dt-zone.is-over { background: color-mix(in srgb, var(--dt-attack) 18%, transparent); }
.pcf-duel .dt-draghint { left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; z-index: 46; }
.pcf-duel .dt-draghint span { padding: 6px 14px; border-radius: 99px; background: var(--dt-surface); border: 1px solid var(--dt-line); font-size: 12.5px; color: var(--dt-muted); }

.pcf-duel .dt-ring { box-sizing: border-box; border: 2px solid var(--dt-accent); border-radius: 9px; animation: dt-land 800ms ease-out forwards; }
.pcf-duel .dt-fxcard { width: auto; height: auto; }
.pcf-duel .dt-spot {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 7, 10, .62);
	animation: dt-fade-in 220ms ease-out;
	transition: opacity 300ms ease;
}
.pcf-duel .dt-spot img { width: min(260px, 40%); border-radius: 12px; box-shadow: 0 0 0 1px #f3f3f2, 0 0 60px 12px rgba(143, 184, 255, .45); animation: dt-spot-in 420ms var(--dt-ease); }
.pcf-duel .dt-spot.is-out { opacity: 0; }
.pcf-duel .dt-banner { left: 0; right: 0; top: 38%; display: flex; justify-content: center; }
.pcf-duel .dt-banner span,
.pcf-duel .dt-tagfloat span,
.pcf-duel .dt-result {
	padding: 7px 16px;
	border-radius: 99px;
	background: var(--dt-accent);
	color: var(--dt-on-accent);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	animation: dt-banner 1600ms ease forwards;
}
.pcf-duel .dt-tagfloat { display: flex; justify-content: center; }
/* a revealed card or hand: a small box at the side of the table, so that the
   field stays in sight while it is open (owner, 2026-10-27) */
.pcf-duel .dt-showcase {
	right: 8px;
	top: 47%;
	transform: translateY(-50%);
	max-width: min(46%, 420px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px 6px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--dt-table) 88%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-opp) 60%, transparent), 0 16px 30px -18px rgba(0, 0, 0, .8);
	animation: dt-fade-in 200ms ease-out;
	transition: opacity 300ms ease;
}
.pcf-duel .dt-showcase.is-out { opacity: 0; }
.pcf-duel .dt-showcase__title { padding: 4px 12px; border-radius: 99px; background: var(--dt-accent); color: var(--dt-on-accent); font-weight: 600; font-size: 13px; text-align: center; }
.pcf-duel .dt-showcase__cards { display: flex; gap: 6px; perspective: 900px; }
.pcf-duel .dt-showcase__cards { flex-wrap: wrap; justify-content: center; max-width: 100%; padding: 0 6px; box-sizing: border-box; }
.pcf-duel .dt-showcase__cards img { width: calc(var(--cw) * .8); border-radius: 5px; box-shadow: 0 0 0 1px var(--dt-opp), 0 12px 24px -16px rgba(0, 0, 0, .8); }
/* live, the window waits for the player looking at it to close it */
.pcf-duel .dt-showcase.is-held { pointer-events: auto; z-index: 3; }
.pcf-duel .dt-showcase.is-held .dt-showcase__cards img { cursor: zoom-in; }
.pcf-duel .dt-showcase.is-out { pointer-events: none; }
.pcf-duel .dt-showcase__close { min-width: 90px; }
.pcf-duel.is-compact .dt-showcase { gap: 6px; padding: 8px 4px; right: 4px; }
.pcf-duel.is-compact .dt-showcase__cards { gap: 4px; }
.pcf-duel.is-compact .dt-showcase__cards img { width: calc(var(--cw) * .85); }
.pcf-duel .dt-tagfloat span { padding: 2px 10px; font-size: 12px; animation-duration: 1100ms; }
.pcf-duel .dt-coin { left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; perspective: 700px; }
.pcf-duel .dt-coin__inner { position: relative; width: 96px; height: 96px; transform-style: preserve-3d; }
/* several coins or dice of the same moment, side by side */
.pcf-duel .dt-coin__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 92vw; perspective: 700px; }
.pcf-duel .dt-coin.is-many .dt-coin__inner { width: 72px; height: 72px; }
.pcf-duel .dt-coin__results:empty { display: none; }
.pcf-duel .dt-coin__face {
	position: absolute;
	inset: 0;
	border-radius: 99px;
	background: #fff;
	border: 4px solid #c9a23a;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	color: #1a1406;
	font-weight: 700;
	font-size: 28px;
}
.pcf-duel .dt-coin__face img { width: 100%; height: 100%; object-fit: cover; }
.pcf-duel .dt-coin__face.is-heads img { transform: scale(1.25); }
.pcf-duel .dt-coin__face.is-tails { transform: rotateY(180deg); }
.pcf-duel .dt-coin__face.is-tails img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.pcf-duel .dt-coin__who { padding: 3px 12px; border-radius: 99px; background: var(--dt-surface); border: 1px solid var(--dt-line); font-size: 12.5px; color: var(--dt-muted); }
.pcf-duel .dt-result { animation: none; }
.pcf-duel .dt-die {
	width: 84px;
	height: 84px;
	border-radius: 18px;
	background: #fff;
	color: #111;
	border: 3px solid #c9a23a;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@keyframes dt-land { from { opacity: .95; transform: scale(.94); } to { opacity: 0; transform: scale(1.24); } }
@keyframes dt-target { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.14); } }
@keyframes dt-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
@keyframes dt-fade-in { from { opacity: 0; } }
@keyframes dt-spot-in { from { opacity: 0; transform: scale(.7) translateY(30px); } }
@keyframes dt-banner { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.pcf-duel *, .pcf-duel *::before, .pcf-duel *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ */
/* Phones and short screens: two layouts that fit without scrolling      */
/*   .is-port  upright: one column                                      */
/*   .is-land  sideways: players | field | your hand                     */
/* ------------------------------------------------------------------ */

.pcf-app.pcf-app--duel.is-duel-compact .site-head { display: none; }

.pcf-duel.is-compact .dt-bar { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; }
.pcf-duel.is-compact .dt-bar__title span { display: none; }
.pcf-duel.is-compact .dt-bar__title strong { font-size: 13px; white-space: nowrap; }
.pcf-duel.is-compact .dt-bar__turn { gap: 6px; font-size: 12.5px; white-space: nowrap; }
.pcf-duel.is-compact .dt-bar__actions { display: none; }
.pcf-duel.is-compact .dt-bar__more { display: inline-flex; margin-left: auto; min-height: 36px; padding: 0 14px; font-size: 18px; line-height: 1; }
/* sideways there is no bar: every pixel of height goes to the table. Chat and
   ⋯ (coin, die, draw, concede, leave) head the right-hand column instead. */
.pcf-duel.is-land .dt-bar { display: none; }
.pcf-duel.is-land .dt-col3 > .dt-bottom { display: flex; position: static; flex: 0 0 auto; padding: 0; gap: 6px; border: 0; background: none; justify-content: flex-start; }
.pcf-duel.is-land .dt-col3 > .dt-bottom .dt-sig { display: none; }
.pcf-duel.is-land .dt-col3 > .dt-bottom .dt-bottom__icon { min-height: 34px; min-width: 44px; }
/* the card panel, empty: a line, not a box — the room goes to your hand */
.pcf-duel.is-land .dt-preview.is-empty { flex: 0 0 auto; padding: 6px 8px; }


.pcf-duel.is-compact .dt-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pcf-duel.is-compact .dt-board { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pcf-duel.is-compact .dt-grid { --gap: 3px; height: 100%; padding: 6px; column-gap: 8px; row-gap: 6px; align-content: center; }

/* zones: five card columns and, narrower (--pw), the piles and the Field Zone —
   the width goes to the cards you play. A Defense card turns and shrinks. */
.pcf-duel.is-compact .dt-field { grid-template-rows: var(--ch) var(--ch); justify-content: center; }
.pcf-duel.is-compact .dt-field.is-me,
.pcf-duel.is-compact .dt-field.is-opp { grid-template-columns: var(--pw) var(--pw) repeat(5, var(--cw)) var(--pw) var(--pw); }
.pcf-duel.is-compact .dt-field .dt-pile,
.pcf-duel.is-compact .dt-field .dt-zone--fzone { --cw: var(--pw); --ch: var(--ph); }
/* phone upright: seven columns — the Banished pile is the icon on the GY (fissure()) */
.pcf-duel.is-compact .dt-field.is-slim { grid-template-columns: var(--pw) repeat(5, var(--cw)) var(--pw); }
.pcf-duel .dt-fissure {
	--fs: clamp(24px, calc(var(--pw) * .62), 34px);
	position: absolute;
	z-index: 6;
	left: 50%;
	top: calc(var(--fs) * -.5);
	width: var(--fs);
	height: var(--fs);
	margin-left: calc(var(--fs) * -.5);
	border-radius: 50%;
	border: 2px solid #8a6cff;
	box-sizing: border-box;
	background: #120b24;
	box-shadow: 0 0 0 2px var(--dt-bg), 0 0 12px -2px rgba(138, 108, 255, .7);
	cursor: pointer;
	touch-action: none;
}
/* the opponent's: on the edge that faces the centre line, below their GY */
.pcf-duel .dt-field.is-opp .dt-fissure { top: auto; bottom: calc(var(--fs) * -.5); }
/* yours: on the lower edge of your GY — its upper edge is where the phase
   button sits, on the right of the centre line (owner, 2026-10-08) */
.pcf-duel .dt-field.is-me .dt-fissure { top: auto; bottom: calc(var(--fs) * -.5); }
/* room beside the field: out to the side of the GY, level with its bottom
   (yours) or its bottom (theirs) — clear of the phase button */
.pcf-duel .is-fissure-out .dt-field.is-me .dt-fissure { top: auto; bottom: 0; left: calc(100% + 6px); margin-left: 0; }
.pcf-duel .is-fissure-out .dt-field.is-opp .dt-fissure { top: auto; bottom: 0; left: auto; right: calc(100% + 6px); margin-left: 0; }
.pcf-duel .dt-fissure:not(.has-card) { opacity: .5; box-shadow: 0 0 0 2px var(--dt-bg); }
.pcf-duel .dt-fissure__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	/* the artwork, not the card's frame: it sits in the card's upper middle */
	object-position: 50% 32%;
	transform: scale(1.9);
	clip-path: circle(26% at 50% 50%);
	pointer-events: none;
}
.pcf-duel .dt-fissure__n {
	position: absolute;
	right: -7px;
	bottom: -5px;
	min-width: 15px;
	padding: 0 3px;
	box-sizing: border-box;
	border-radius: 99px;
	background: #8a6cff;
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	pointer-events: none;
}
.pcf-duel .dt-fissure:not(.has-card) .dt-fissure__n { display: none; }
.pcf-duel .dt-fissure.is-over,
.pcf-duel .dt-fissure:focus-visible { box-shadow: 0 0 0 2px var(--dt-bg), 0 0 0 4px var(--dt-accent); }
/* your hand keeps its room with no card in it: the field does not jump
   up and down, and a card can still be dragged back into it */
.pcf-duel.is-compact .dt-hand.is-me { min-height: calc(var(--hw) * 1.4625); }
.pcf-duel.is-compact .dt-card__body.is-def { transform: rotate(90deg) scale(.7); }
/* a finger drags cards: the table never scrolls, the hand fans instead */
.pcf-duel.is-compact .dt-card { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pcf-duel.is-compact .dt-hand.is-me { --hgap: 5px; }
.pcf-duel.is-compact .dt-hand.is-me .dt-card.is-hand { width: var(--hw); height: calc(var(--hw) * 1.4625); }
.pcf-duel.is-compact .dt-hand.is-me .dt-card.is-hand:hover { transform: none; }
.pcf-duel.is-compact .dt-zone__label { font-size: 7.5px; letter-spacing: .02em; }
.pcf-duel.is-compact .dt-count { font-size: 10px; padding: 0 4px; right: 2px; bottom: 2px; }
.pcf-duel.is-compact .dt-tag { font-size: 7.5px; padding: 0 3px; top: 2px; left: 2px; }
.pcf-duel.is-compact .dt-mark { font-size: 10px; padding: 0 5px; }
.pcf-duel.is-compact .dt-mark svg { width: 11px; height: 11px; }

/* players: one tight card each */
.pcf-duel.is-compact .dt-player { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; gap: 6px 10px; border-radius: 12px; }
.pcf-duel.is-compact .dt-player__who { flex: 1 1 auto; min-width: 0; gap: 8px; }
.pcf-duel.is-compact .dt-avatar { width: 26px; height: 26px; font-size: 11px; }
.pcf-duel.is-compact .dt-player__name { font-size: 13.5px; }
.pcf-duel.is-compact .dt-player__text .dt-small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcf-duel.is-compact .dt-lp { font-size: 22px; }
.pcf-duel.is-compact .dt-lpbar { display: none; }
.pcf-duel.is-compact .dt-lpfloat { top: 4px; }
.pcf-duel.is-compact .dt-lpform { flex: 1 1 100%; flex-wrap: nowrap; }
.pcf-duel.is-compact .dt-lpform:not(.is-compact) .dl-btn[type="submit"] { flex: 0 0 auto; }
.pcf-duel.is-compact .dt-lpfield,
.pcf-duel.is-compact .dt-lpform .dl-btn { min-height: 34px; height: 34px; }
.pcf-duel.is-compact .dt-lpplus { width: 34px; height: 34px; }

/* the phase track, short names */
.pcf-duel.is-compact .dt-phase { gap: 6px; flex-wrap: nowrap; }
.pcf-duel.is-compact .dt-phase::before { display: none; }
.pcf-duel.is-compact .dt-step__long { display: none; }
.pcf-duel.is-compact .dt-step__short { display: inline; }
.pcf-duel.is-compact .dt-step { padding: 0 8px; min-height: 34px; font-size: 12.5px; }
.pcf-duel.is-compact .dt-step--arrow { width: 34px; height: 34px; min-height: 34px; }
.pcf-duel.is-compact .dt-phase .dl-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.pcf-duel.is-compact .dt-whose { display: none; }
/* on a phone the phases are tapped directly: the arrows go, the bar fits 320 px */
.pcf-duel.is-compact .dt-step--arrow:first-child { display: none; }
.pcf-duel.is-port .dt-step--arrow { display: none; }

/* hand tools: icons only */
.pcf-duel.is-compact .dt-handtools .dl-btn { font-size: 0; gap: 0; min-height: 38px; width: 40px; padding: 0; justify-content: center; }
.pcf-duel.is-compact .dt-handtools .dl-btn svg { width: 17px; height: 17px; }

/* log and chat: a sheet from the bottom */
.pcf-duel.is-compact .dt-panel {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 55;
	height: 78vh;
	height: 78dvh;
	border-left: 0;
	border-top: 1px solid var(--dt-line);
	border-radius: 20px 20px 0 0;
	transform: translateY(105%);
	transition: transform 260ms var(--dt-ease);
	box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .8);
}
.pcf-duel.is-compact.is-panel-open .dt-panel { transform: none; }
.pcf-duel.is-compact .dt-panel__close { display: inline-flex; align-self: flex-end; margin: 10px 12px 0; }
.pcf-duel.is-compact .dt-preview { max-height: 40%; }
.pcf-duel.is-compact .dt-preview__img { width: 96px; height: 140px; }

/* the question and the waiting chip float above the table (they are moved out
   of the panel, which is a closed sheet here) */
.pcf-duel.is-compact .dt-ask,
.pcf-duel.is-compact .dt-waitchip { position: fixed; z-index: 52; margin: 0; }
.pcf-duel.is-compact .dt-ask__buttons { flex-direction: row; }
.pcf-duel.is-compact .dt-ask__buttons .dt-sig { flex: 1 1 0; justify-content: center; padding: 0 6px; min-height: 40px; }
.pcf-duel.is-compact .dt-ask__buttons kbd { display: none; }
.pcf-duel.is-compact .dt-ask__what { display: none; }
.pcf-duel.is-compact .dt-waitchip { flex-direction: row; align-items: center; justify-content: space-between; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8); }

/* ---- upright ---- */
.pcf-duel.is-port .dt-grid {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: none;
	grid-template-areas: "oppP" "oHand" "oField" "phase" "mField" "hand" "meP";
	justify-content: stretch;
}
.pcf-duel.is-port .dt-player.is-opp { grid-area: oppP; }
.pcf-duel.is-port .dt-handwrap.is-opp { grid-area: oHand; height: calc(var(--cw) * .5 * 1.4625 + 2px); }
.pcf-duel.is-port .dt-hand.is-opp .dt-card.is-hand { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5 * 1.4625); }
.pcf-duel.is-port .dt-field.is-opp { grid-area: oField; justify-self: center; }
.pcf-duel.is-port .dt-phase { grid-area: phase; }
.pcf-duel.is-port .dt-field.is-me { grid-area: mField; justify-self: center; }
.pcf-duel.is-port .dt-handwrap.is-me { grid-area: hand; gap: 6px; }
.pcf-duel.is-port .dt-player.is-me { grid-area: meP; align-self: stretch; }
.pcf-duel.is-port .dt-signals { display: none; }
.pcf-duel.is-port .dt-bottom {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: var(--dt-surface);
	border-top: 1px solid var(--dt-line);
}
.pcf-duel.is-port .dt-bottom .dl-btn,
.pcf-duel.is-port .dt-bottom .dt-sig { min-height: 44px; font-size: 13px; }
/* the question covers the opponent's panel, never your field, hand or LP */
.pcf-duel.is-port .dt-ask { left: 8px; right: 8px; top: 6px; padding: 10px 12px; gap: 6px; }

/* Upright, every row counts (an iPhone with Safari's bars is ~660 px tall,
   an SE ~550): no top bar — its log and ⋯ are in the bottom bar — and one
   line per player. Your Life Points open their form when tapped. */
.pcf-duel.is-port .dt-bar { display: none; }
.pcf-duel.is-port .dt-grid { row-gap: 4px; }
.pcf-duel.is-port .dt-player { flex-wrap: nowrap; padding: 5px 8px; gap: 8px; min-height: 40px; box-sizing: border-box; }
.pcf-duel.is-port .dt-player__text { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.pcf-duel.is-port .dt-player__text .dt-small { font-size: 11px; }
/* the opponent's row: name, the match chip and the LP — the hand and the
   Deck counts are on the table already, and squeezed the clock */
.pcf-duel.is-port .dt-player.is-opp .dt-player__text .dt-small { display: none; }
.pcf-duel.is-port .dt-lp { font-size: 21px; }
.pcf-duel.is-port .dt-player.is-me .dt-player__text,
.pcf-duel.is-port .dt-player.is-me .dt-lpform { display: none; }
.pcf-duel.is-port .dt-player.is-me .dt-lp { cursor: pointer; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-bg); }
.pcf-duel.is-port .dt-player.is-me .dt-lp::after { content: "±"; margin-left: 6px; font-size: 14px; color: var(--dt-faint); vertical-align: 3px; }
.pcf-duel.is-port .dt-player .dt-handtools { order: 0; flex-direction: row; gap: 4px; min-width: 0; }
/* six tools (shuffle, reveal, counter, token, coin, dice) beside the avatar and the LP */
.pcf-duel.is-port .dt-player .dt-handtools .dl-btn { min-height: 34px; width: clamp(30px, calc((100vw - 150px) / 6 - 4px), 40px); }
.pcf-duel.is-port .dt-player.is-me { gap: 6px; }
.pcf-duel.is-port .dt-player.is-me .dt-lp { padding: 5px 8px; font-size: 19px; }
.pcf-duel.is-port .dt-whose { display: inline-flex; font-size: 12px; padding: 2px 10px; white-space: nowrap; }
.pcf-duel.is-port .dt-bottom .dt-bottom__icon { flex: 0 0 44px; padding: 0; font-size: 20px; position: relative; }
.pcf-duel.is-port .dt-bottom .dt-bottom__icon .dt-badge { position: absolute; top: 2px; right: 0; }
.pcf-duel.is-port .dt-bottom .dt-sig { flex: 1 1 0; }
/* the Life Points form, at the top where the keyboard can't cover it */
.pcf-duel .dt-menu.is-sheet.is-top { top: 8px; bottom: auto; left: 8px; right: 8px; border-radius: 20px; border-bottom: 1px solid var(--dt-line); padding-bottom: 12px; }
.pcf-duel .dt-lpsheet { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 0; }
.pcf-duel .dt-lpsheet .dt-lpform { flex-wrap: nowrap; }
.pcf-duel .dt-lpsheet .dt-lpfield { min-height: 46px; }
.pcf-duel .dt-lpsheet .dt-lpinput { height: 44px; font-size: 18px; }
.pcf-duel .dt-lpsheet .dt-lpplus { width: 46px; height: 46px; }
.pcf-duel .dt-lpsheet .dl-btn[type="submit"] { min-height: 46px; padding: 0 16px; }
.pcf-duel .dt-lpsheet p { margin: 0; }
/* the menu's own buttons are bare rows: these two are real buttons */
.pcf-duel .dt-menu .dt-lpsheet button { justify-content: center; border: 1px solid var(--dt-line); background: var(--dt-s2); border-radius: 99px; font-size: 15px; }
.pcf-duel .dt-menu .dt-lpsheet .dt-lpplus[aria-pressed="true"] { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-on-accent); }
.pcf-duel .dt-menu .dt-lpsheet button[type="submit"] { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-on-accent); font-weight: 600; }
.pcf-duel.is-port .dt-waitchip { left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); }

/* ---- sideways ---- */
/* players | field | a column of their own for the rest: the question, the
   opponent's hand, the card being read, your hand with its tools */
.pcf-duel.is-land .dt-grid {
	grid-template-columns: var(--side, 144px) max-content minmax(150px, 1fr);
	grid-template-rows: minmax(0, 1fr) 34px minmax(0, 1fr);
	grid-template-areas: "oppP oField col3" "meP phase col3" "meP mField col3";
	justify-content: stretch;
	align-content: stretch;
	row-gap: 4px;
}
.pcf-duel.is-land .dt-player.is-opp { grid-area: oppP; align-self: start; }
.pcf-duel.is-land .dt-player.is-me { grid-area: meP; align-self: end; }
.pcf-duel.is-land .dt-player { gap: 6px 8px; padding: 8px; }
.pcf-duel.is-land .dt-player__who .dt-avatar { display: none; }
.pcf-duel.is-land .dt-player.is-me .dt-player__text .dt-small { display: none; }
.pcf-duel.is-land .dt-lpform { flex-wrap: nowrap; }
.pcf-duel.is-land .dt-lpform .dt-lpfield { flex: 1 1 0; min-width: 0; }
.pcf-duel.is-land .dt-lpform { gap: 4px; }
.pcf-duel.is-land .dt-lpform .dl-btn[type="submit"] { flex: 0 0 32px; width: 32px; padding: 0; }
.pcf-duel.is-land .dt-lpplus { width: 32px; }
.pcf-duel.is-land .dt-lpsign { width: 16px; }
.pcf-duel.is-land .dt-lpapply__t { display: none; }
.pcf-duel.is-land .dt-signals { flex: 1 1 100%; gap: 4px; }
.pcf-duel.is-land .dt-signals .dt-sig { min-height: 38px; font-size: 11px; padding: 2px; gap: 1px; border-radius: 10px; }
.pcf-duel.is-land .dt-field.is-opp { grid-area: oField; align-self: end; }
.pcf-duel.is-land .dt-phase { grid-area: phase; }
.pcf-duel.is-land .dt-field.is-me { grid-area: mField; align-self: start; }
.pcf-duel .dt-col3 { display: none; }
.pcf-duel.is-land .dt-col3 { grid-area: col3; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.pcf-duel.is-land .dt-handwrap.is-opp { flex: 0 0 auto; overflow: visible; }
.pcf-duel.is-land .dt-hand.is-opp { --hgap: 3px; justify-content: flex-start; }
.pcf-duel.is-land .dt-hand.is-opp .dt-card.is-hand { width: calc(var(--cw) * .55); height: calc(var(--cw) * .55 * 1.4625); margin-top: 0; }
.pcf-duel.is-land .dt-handwrap.is-me { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 6px; }
.pcf-duel.is-land .dt-handtools { flex-direction: row; }
.pcf-duel.is-land .dt-handtools .dl-btn { min-height: 32px; }
.pcf-duel.is-land .dt-hand.is-me { flex: 0 0 auto; justify-content: flex-start; }
.pcf-duel.is-land .dt-bottom { display: none; }
/* sideways: the card being read sits between the two hands, always in view */
.pcf-duel.is-land .dt-preview {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	padding: 8px;
	gap: 6px;
	border: 1px solid var(--dt-line);
	border-radius: 12px;
	background: var(--dt-surface);
}
.pcf-duel.is-land .dt-preview__top { gap: 8px; }
.pcf-duel.is-land .dt-preview__img { width: 54px; height: 79px; border-radius: 4px; }
.pcf-duel.is-land .dt-preview__meta { gap: 4px; }
.pcf-duel.is-land .dt-preview__meta h2 { font-size: 13px; }
.pcf-duel.is-land .dt-preview__meta .dt-chip { font-size: 11px; padding: 0 7px; }
.pcf-duel.is-land .dt-preview__meta .dt-small,
.pcf-duel.is-land .dt-stats { font-size: 11.5px; }
.pcf-duel.is-land .dt-preview__text { font-size: 12px; line-height: 1.45; }
.pcf-duel.is-land .dt-preview .dt-link { font-size: 12px; }
.pcf-duel.is-land .dt-preview > .dt-muted { font-size: 12px; margin: 0; }
/* sideways the question heads the right-hand column, over the opponent's
   hand: never on the field, your hand or your Life Points */
.pcf-duel.is-land .dt-ask,
.pcf-duel.is-land .dt-waitchip { position: relative; flex: 0 0 auto; }
.pcf-duel.is-land .dt-ask { padding: 8px 10px; gap: 6px; border-radius: 12px; }
.pcf-duel.is-land .dt-ask__q { font-size: 13.5px; }
.pcf-duel.is-land .dt-ask__buttons .dt-sig { min-height: 38px; font-size: 13px; padding: 0 4px; gap: 4px; }
.pcf-duel.is-land .dt-waitchip { padding: 4px 4px 4px 10px; border-radius: 12px; font-size: 12px; }
.pcf-duel.is-land .dt-waitchip .dl-btn { min-height: 28px; }
.pcf-duel.is-land .dt-panel { height: 88vh; height: 88dvh; left: auto; width: min(420px, 60vw); border-radius: 20px 0 0 0; }
.pcf-duel.is-land .dt-menu.is-sheet { left: auto; width: min(420px, 60vw); max-height: 88vh; }

/* ------------------------------------------------------------------ */
/* The Field Spell's ground                                             */
/* ------------------------------------------------------------------ */

/* A face-up Field Spell lends the table its artwork: the art box of the card,
   blown up to cover the board, under a veil of the table's own colour so the
   zones and cards stay the thing you read. */
.pcf-duel .dt-grid { position: relative; z-index: 1; }
/* the player's own ground (profile): under the Field Spell's terrain, which covers it */
.pcf-duel .dt-ground { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pcf-duel .dt-ground img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcf-duel .dt-report__body { display: grid; gap: 10px; padding: 14px 20px 6px; }
.pcf-duel .dt-report__field { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--dt-text) 25%, transparent); background: var(--dt-surface); color: var(--dt-text); }
.pcf-duel .dt-report__text { resize: vertical; min-height: 110px; }
.pcf-duel .dt-report__note { margin: 0; font-size: 13px; color: var(--dt-muted); }
.pcf-duel .dt-terrain {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 900ms var(--dt-ease);
}
.pcf-duel .dt-terrain.is-on { opacity: 1; }
.pcf-duel .dt-terrain img {
	position: absolute;
	max-width: none;
	filter: saturate(1.15) blur(1px);
	transform: scale(1.06);
	transition: transform 2600ms var(--dt-ease);
}
.pcf-duel .dt-terrain.is-on img { transform: none; }
/* the high-resolution artwork: sharp, no blur — the veil keeps cards readable */
.pcf-duel .dt-terrain img[data-full] { filter: saturate(1.1); image-rendering: auto; }
.pcf-duel .dt-terrain__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--dt-table) 30%, transparent) 0%, color-mix(in srgb, var(--dt-table) 64%, transparent) 100%);
}
/* no backdrop-filter here: a blur behind each of the ~20 empty zones, over
   the 1600 px artwork, had a phone redo all of them on every frame of every
   animation (2026-10-02, "less fluid") — a slightly denser veil instead */
.pcf-duel .dt-board.has-terrain .dt-zone:not(.has-card):not(.is-gap),
.pcf-duel .dt-board.has-ground .dt-zone:not(.has-card):not(.is-gap) {
	background: color-mix(in srgb, var(--dt-table) 70%, transparent);
	border-color: color-mix(in srgb, var(--dt-text) 38%, transparent);
}
.pcf-duel .dt-board.has-terrain .dt-zone__label,
.pcf-duel .dt-board.has-ground .dt-zone__label { color: var(--dt-muted); }
.pcf-duel .dt-board.has-ground .dt-phase::before,
.pcf-duel .dt-board.has-terrain .dt-phase::before { background: color-mix(in srgb, var(--dt-text) 30%, transparent); }

/* the hint under the question, and the waiting chip's row */
.pcf-duel .dt-ask__hint { font-size: 11.5px; color: var(--dt-muted); }
.pcf-duel .dt-waitchip__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ------------------------------------------------------------------ */
/* Tokens, rulings, pins on piles                                       */
/* ------------------------------------------------------------------ */

.pcf-duel .dt-tokenbtn img { width: 15px; height: 22px; border-radius: 2px; object-fit: cover; }
.pcf-duel .dt-vanish { z-index: 40; }
/* several cards into one pile: each flies in turn (pileRush), lit by where
   it goes — red to the Graveyard, violet to the banished, blue to a Deck */
.pcf-duel .dt-rush { z-index: 41; border-radius: 5px; will-change: transform, opacity; }
.pcf-duel .dt-rush img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.pcf-duel .dt-rush.is-gy { filter: drop-shadow(0 0 7px rgba(226, 105, 95, .85)) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.pcf-duel .dt-rush.is-banish { filter: drop-shadow(0 0 8px rgba(178, 140, 255, .9)) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.pcf-duel .dt-rush.is-back { filter: drop-shadow(0 0 7px rgba(143, 184, 255, .8)) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.pcf-duel .dt-ring.is-gy { border-color: #e2695f; }
.pcf-duel .dt-ring.is-banish { border-color: #b28cff; }
.pcf-duel .dt-ring.is-back { border-color: #8fb8ff; }
.pcf-duel .dt-vanish img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.pcf-duel .dt-mark.is-pile { top: auto; bottom: -10px; }
.pcf-duel .dt-modal__box.is-picking { border-color: var(--dt-target); box-shadow: 0 0 0 2px var(--dt-target); }
.pcf-duel .dt-modal__box.is-picking .dt-kicker { color: var(--dt-target); font-weight: 700; }
.pcf-duel .dt-board.has-terrain .dt-zone--mzone:not(.has-card) { cursor: pointer; }
.pcf-duel .dt-field.is-me .dt-zone--mzone:not(.has-card) { cursor: pointer; }

/* the rulings of the duel's format, folded like the deckbuilder's */
.pcf-duel .dt-rulings { margin: 0; font-size: 12.5px; }
.pcf-duel p.dt-rulings.is-empty { color: var(--dt-faint); }
.pcf-duel details.dt-rulings { border-top: 1px solid var(--dt-line); padding-top: 10px; }
.pcf-duel details.dt-rulings summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--dt-muted); list-style: none; }
.pcf-duel details.dt-rulings summary::-webkit-details-marker { display: none; }
.pcf-duel details.dt-rulings summary::before { content: "▸"; font-size: 11px; transition: transform 150ms var(--dt-ease); }
.pcf-duel details.dt-rulings[open] summary::before { transform: rotate(90deg); }
.pcf-duel .dt-rulings__n { font-size: 11px; background: var(--dt-s3); color: var(--dt-muted); border-radius: 99px; padding: 1px 8px; letter-spacing: 0; }
.pcf-duel .dt-rulings ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pcf-duel .dt-rulings li { position: relative; padding-left: 14px; line-height: 1.5; color: var(--dt-muted); }
.pcf-duel .dt-rulings li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--dt-line); }
.pcf-duel .dt-detail .dt-rulings { grid-column: 1 / -1; font-size: 13.5px; }

/* phones: the box must not grow over the opponent's cards */
.pcf-duel.is-compact .dt-ask__hint { display: none; }
.pcf-duel.is-compact .dt-waitchip__row { flex: 1 1 auto; }
.pcf-duel.is-compact .dt-tokenbtn img { width: 17px; height: 25px; }
@media (prefers-reduced-motion: reduce) {
	.pcf-duel .dt-terrain, .pcf-duel .dt-terrain img { transition: none; }
}

/* sideways, a narrow column: the match chip gets its own line, the answers
   to a question stack and wrap instead of running off the right edge */
.pcf-duel.is-land .dt-player__who { flex-wrap: wrap; row-gap: 4px; }
.pcf-duel.is-land .dt-player .dt-matchchip { flex: 1 1 100%; justify-content: flex-start; font-size: 11px; padding: 1px 7px; margin: 0; }
.pcf-duel.is-land .dt-player__text { min-width: 0; }
.pcf-duel.is-land .dt-ask__buttons { flex-direction: column; }
.pcf-duel.is-land .dt-ask__buttons .dt-sig { flex: 0 0 auto; min-width: 0; white-space: normal; }
.pcf-duel.is-land .dt-ask__q { font-size: 13px; }
.pcf-duel.is-land .dt-ask__what { font-size: 11.5px; }
.pcf-duel.is-land .dt-col3, .pcf-duel.is-land .dt-grid { overflow: hidden; }

/* upright: what the cards cannot use (their size is set by the width) is
   shared out between the rows instead of piling up above and below the
   table — an installed app has the whole screen, and showed two empty bands */
.pcf-duel.is-port .dt-grid { align-content: space-between; padding-top: max(6px, env(safe-area-inset-top)); }

/* target marks: shown when the target is made, then only on the cards the
   pointer is on or that are selected (see freshMarks / showMarks) */
.pcf-duel .dt-mark { opacity: 0; transition: opacity 220ms ease; }
.pcf-duel .marks-fresh > .dt-mark,
.pcf-duel .show-marks > .dt-mark { opacity: 1; }
.pcf-duel .dt-card.is-targeted:not(.marks-fresh):not(.show-marks) .dt-card__body::after { display: none; }

/* a card of the opening hands not dealt yet */
.pcf-duel .dt-card.is-dealing { opacity: 0; }

/* the coin and the dice: the figure and the word */
.pcf-duel .dt-toss { display: inline-flex; align-items: center; gap: 7px; }
.pcf-duel .dt-toss .dt-coinfig { width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; object-fit: contain; background: #fbf8f1; border: 1.5px solid #c9a13a; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pcf-duel .dt-toss .dt-dicefig { display: block; flex: 0 0 auto; }
.pcf-duel .dt-toss[disabled] img, .pcf-duel .dt-toss[disabled] svg { opacity: .5; }
/* on a phone, at the top of the ⋯ sheet, next to each other */
.pcf-duel .dt-tossrow { display: flex; gap: 8px; padding: 10px 12px 4px; }
.pcf-duel .dt-tossrow .dt-toss { flex: 1 1 0; justify-content: center; min-height: 52px; font-size: 15px; font-weight: 600; }
.pcf-duel .dt-toss.is-big .dt-coinfig { width: 34px; height: 34px; }
.pcf-duel .dt-toss.is-big .dt-dicefig { width: 32px; height: 32px; }
.pcf-duel .dt-menu .dt-tossrow .dt-toss { border: 1px solid var(--dt-line); background: var(--dt-s2); border-radius: 14px; justify-content: center; }

/* a pile's window, hidden: a bar at the bottom, the table free above it */
.pcf-duel .dt-lowbar {
	position: fixed;
	left: 50%;
	bottom: max(12px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 48;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 16px;
	border-radius: 99px;
	background: var(--dt-surface);
	border: 1px solid var(--dt-line);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
	font-size: 13px;
	animation: dt-ask-in 220ms var(--dt-ease);
}
.pcf-duel .dt-lowbar__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcf-duel .dt-modal__hbtns { display: flex; gap: 8px; }
/* on a phone the lowered bar sits over the bottom bar, not under a thumb's reach */
.pcf-duel.is-port .dt-lowbar { bottom: calc(70px + env(safe-area-inset-bottom)); }
.pcf-duel .dt-lowbar[hidden] { display: none; }

/* ---- summons: normal, fusion, synchro (summonFx) ---- */
.pcf-duel .dt-sm { position: absolute; z-index: 44; pointer-events: none; overflow: visible; }
.pcf-duel .dt-sm > span { position: absolute; pointer-events: none; }
/* normal: two flattened rings of dust spreading from under the card */
.pcf-duel .dt-sm__ring { left: -30%; right: -30%; bottom: -8%; height: 34%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dt-text) 70%, transparent); opacity: 0; animation: dt-sm-ring 700ms cubic-bezier(.2,.8,.3,1) forwards; }
.pcf-duel .dt-sm__ring.is-late { animation-delay: 110ms; border-width: 1px; }
@keyframes dt-sm-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
/* fusion: a vortex, violet and orange, turning and closing */
.pcf-duel .dt-sm__vortex { left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 10%, #8a3ffc 18%, transparent 30% 45%, #ff8a3d 55%, transparent 68% 80%, #c26bff 90%, transparent);
	mask: radial-gradient(circle, transparent 22%, #000 26%, #000 62%, transparent 70%);
	-webkit-mask: radial-gradient(circle, transparent 22%, #000 26%, #000 62%, transparent 70%);
	animation: dt-sm-vortex 1400ms cubic-bezier(.3,.6,.3,1) forwards; }
.pcf-duel .dt-sm__vortex.is-b { width: 140%; animation-direction: reverse; animation-duration: 1200ms; opacity: .8; }
.pcf-duel .dt-sm__glow { inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(194, 107, 255, .75), rgba(255, 138, 61, .25) 45%, transparent 68%); animation: dt-sm-fade 1300ms ease-out forwards; }
@keyframes dt-sm-vortex { 0% { rotate: 0deg; scale: .4; opacity: 0; } 25% { opacity: 1; } 100% { rotate: 540deg; scale: 1; opacity: 0; } }
@keyframes dt-sm-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* synchro: rings of green light sliding down over the zone, then a flash */
.pcf-duel .dt-sm__tune { left: -18%; right: -18%; height: 16%; top: -20%; border-radius: 50%; border: 2px solid #b9ffcf; box-shadow: 0 0 12px 2px rgba(120, 255, 170, .7), inset 0 0 8px rgba(120, 255, 170, .6); opacity: 0;
	animation: dt-sm-tune 900ms cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i) * 140ms); }
@keyframes dt-sm-tune { 0% { top: -20%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.pcf-duel .dt-sm__flash { inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(160, 255, 200, .4) 35%, transparent 65%); opacity: 0; animation: dt-sm-flash 600ms ease-out 650ms forwards; }
@keyframes dt-sm-flash { 0% { opacity: 0; scale: .5; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.3; } }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-sm > span { animation: none; opacity: 0; } }

/* Set: a monster lands in Defense with a cold wave along the zone; a
   Spell/Trap is sealed by four edges closing in. Flip: a golden burst. */
.pcf-duel .dt-set, .pcf-duel .dt-flipfx { position: absolute; z-index: 44; pointer-events: none; overflow: visible; }
.pcf-duel .dt-set > span, .pcf-duel .dt-flipfx > span { position: absolute; pointer-events: none; }
.pcf-duel .dt-set__wave { left: 50%; top: 50%; width: 100%; height: 70%; translate: -50% -50%; border-radius: 10px; border: 2px solid rgba(110, 170, 255, .9); box-shadow: 0 0 14px rgba(80, 150, 255, .6); opacity: 0; animation: dt-set-wave 760ms cubic-bezier(.2,.8,.3,1) forwards; }
.pcf-duel .dt-set__wave.is-late { animation-delay: 140ms; border-width: 1px; }
@keyframes dt-set-wave { 0% { opacity: .95; scale: .55 .6; } 100% { opacity: 0; scale: 1.5 1.15; } }
.pcf-duel .dt-set__line { left: -15%; right: -15%; top: 50%; height: 2px; translate: 0 -50%; background: linear-gradient(90deg, transparent, rgba(160, 205, 255, .95), transparent); opacity: 0; animation: dt-set-line 600ms ease-out forwards; }
@keyframes dt-set-line { 0% { opacity: 0; scale: .2 1; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1.1 1; } }
.pcf-duel .dt-set__edge { background: rgba(190, 150, 255, .95); box-shadow: 0 0 10px rgba(170, 120, 255, .8); opacity: 0; animation: dt-set-edge 560ms cubic-bezier(.4,0,.2,1) forwards; }
.pcf-duel .dt-set__edge.is-t, .pcf-duel .dt-set__edge.is-b { left: 8%; right: 8%; height: 2px; }
.pcf-duel .dt-set__edge.is-l, .pcf-duel .dt-set__edge.is-r { top: 8%; bottom: 8%; width: 2px; }
.pcf-duel .dt-set__edge.is-t { top: -22%; --dx: 0; --dy: 22%; }
.pcf-duel .dt-set__edge.is-b { bottom: -22%; --dx: 0; --dy: -22%; }
.pcf-duel .dt-set__edge.is-l { left: -22%; --dx: 22%; --dy: 0; }
.pcf-duel .dt-set__edge.is-r { right: -22%; --dx: -22%; --dy: 0; }
@keyframes dt-set-edge { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; translate: calc(var(--dx) * 4) calc(var(--dy) * 4); } 100% { opacity: 0; translate: calc(var(--dx) * 4) calc(var(--dy) * 4); } }
.pcf-duel .dt-set__seal { inset: 8%; border-radius: 6px; background: radial-gradient(circle, rgba(200, 170, 255, .6), transparent 70%); opacity: 0; animation: dt-sm-flash 420ms ease-out 360ms forwards; }
.pcf-duel .dt-flipfx__burst { inset: -35%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 210, .95), rgba(255, 196, 60, .5) 35%, transparent 66%); opacity: 0; animation: dt-sm-flash 700ms ease-out 180ms forwards; }
.pcf-duel .dt-flipfx__rays { left: 50%; top: 50%; width: 230%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: repeating-conic-gradient(rgba(255, 210, 90, .55) 0deg 6deg, transparent 6deg 30deg);
	-webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
	opacity: 0; animation: dt-flip-rays 950ms cubic-bezier(.2,.8,.3,1) 120ms forwards; }
@keyframes dt-flip-rays { 0% { opacity: 0; rotate: 0deg; scale: .4; } 30% { opacity: 1; } 100% { opacity: 0; rotate: 60deg; scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-set > span, .pcf-duel .dt-flipfx > span { animation: none; opacity: 0; } }

/* a finger held on a card: it sinks slowly, the details open at two seconds */
.pcf-duel .dt-card.is-pressing .dt-card__body { transition: transform 1650ms linear, filter 1650ms linear; transform: scale(.9); filter: brightness(1.15); }
.pcf-duel .dt-card.is-pressing .dt-card__body.is-def { transform: rotate(90deg) scale(.9); }
.pcf-duel.is-compact .dt-card.is-pressing .dt-card__body.is-def { transform: rotate(90deg) scale(.63); }

/* the coin and the dice among a phone's hand tools: the figure alone */
.pcf-duel.is-compact .dt-handtools .dt-toss--tool .dt-coinfig { width: 20px; height: 20px; }
.pcf-duel.is-compact .dt-handtools .dt-toss--tool .dt-dicefig { width: 19px; height: 19px; }

/* the keyboard shortcuts */
.pcf-duel .dt-keysbtn { display: inline-flex; align-items: center; gap: 6px; }
.pcf-duel .dt-keysbtn kbd { font: 600 11px/1 inherit; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--dt-line); }
.pcf-duel .dt-keys { width: min(760px, calc(100vw - 32px)); }
.pcf-duel .dt-keys__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px 28px; padding: 4px 20px 8px; }
.pcf-duel .dt-keys h3 { margin: 6px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dt-muted); }
.pcf-duel .dt-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; align-items: center; }
.pcf-duel .dt-keys dt { margin: 0; text-align: right; }
.pcf-duel .dt-keys dd { margin: 0; font-size: 13.5px; }
.pcf-duel .dt-keys kbd { display: inline-block; min-width: 22px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--dt-line); border-bottom-width: 2px; background: var(--dt-s2); font: 600 12px/1.2 inherit; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .pcf-duel .dt-keys__cols { grid-template-columns: 1fr; } }

/* Concede and Offer a draw, in your own panel under Ask · OK · Wait
   (2026-10-01: in the top bar nobody found them). Concede first and red;
   the draw beside it, gold when the other player has offered one. */
.pcf-duel .dt-endrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.pcf-duel .dt-endbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	min-height: 34px;
	padding: 4px 6px;
	border-radius: 10px;
	border: 1px solid var(--dt-line);
	background: var(--dt-bg);
	color: var(--dt-text);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.pcf-duel .dt-endbtn.is-concede { color: var(--dt-danger); border-color: color-mix(in srgb, var(--dt-danger) 55%, var(--dt-line)); }
.pcf-duel .dt-endbtn.is-concede:hover { background: var(--dt-danger); color: #fff; }
.pcf-duel .dt-endbtn.is-draw:hover { background: var(--dt-s2); }
.pcf-duel .dt-endbtn.is-asked { border-color: var(--dt-gold); color: var(--dt-gold); }
.pcf-duel.is-land .dt-endrow { grid-template-columns: 1fr; gap: 4px; }
.pcf-duel.is-land .dt-endbtn { min-height: 28px; font-size: 11.5px; }
.pcf-duel.is-port .dt-bottom .dt-bottom__icon.is-concede { color: var(--dt-danger); }
.pcf-duel.is-port .dt-bottom .dt-bottom__icon.is-asked { color: var(--dt-gold); border-color: var(--dt-gold); }

/* ------------------------------------------------------------------------ */
/* The automatic duel (3.0, DUEL-AUTOMATICO.md §8.4)                         */
/* Duel Links / Master Duel: the cards that can act glow blue, a tap shows   */
/* round buttons over the card, the cards to choose glow gold, a chance to   */
/* respond is a bar with Pass.                                               */
/* ------------------------------------------------------------------------ */
.pcf-duel { --dt-auto: #5fb4ff; }
.pcf-app:not([data-theme="dark"]) .pcf-duel { --dt-auto: #1f7ae0; }

.pcf-duel .dt-card.is-can .dt-card__body,
.pcf-duel [data-pile].is-can { box-shadow: 0 0 0 2px var(--dt-auto), 0 0 14px 2px color-mix(in srgb, var(--dt-auto) 65%, transparent); animation: dt-can 1.6s ease-in-out infinite; }
.pcf-duel [data-pile].is-can { border-radius: 8px; }
@keyframes dt-can { 50% { box-shadow: 0 0 0 2px var(--dt-auto), 0 0 24px 6px color-mix(in srgb, var(--dt-auto) 80%, transparent); } }
.pcf-duel .dt-card.is-can { cursor: pointer; }
.pcf-duel .dt-card.is-pickable .dt-card__body { box-shadow: 0 0 0 2px var(--dt-gold), 0 0 16px 3px color-mix(in srgb, var(--dt-gold) 55%, transparent); cursor: pointer; }
.pcf-duel .dt-card.is-picked .dt-card__body { box-shadow: 0 0 0 3px var(--dt-gold), 0 0 22px 6px color-mix(in srgb, var(--dt-gold) 70%, transparent); filter: brightness(1.12); }
.pcf-duel .dt-card.is-chained .dt-card__body { box-shadow: 0 0 0 2px var(--dt-target), 0 0 18px 4px color-mix(in srgb, var(--dt-target) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-card.is-can .dt-card__body, .pcf-duel [data-pile].is-can { animation: none; } }

/* the round buttons over a tapped card */
.pcf-duel .dt-acts { position: fixed; z-index: 58; display: flex; gap: 12px; padding: 4px; pointer-events: auto; animation: dt-acts-in 160ms var(--dt-ease); }
@keyframes dt-acts-in { from { opacity: 0; transform: translateY(6px) scale(.92); } }
.pcf-duel .dt-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; border: 0; color: #f1f6ff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pcf-duel .dt-act__dot {
	width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 50% 30%, #3b78c4, #12284a 72%);
	border: 2px solid #9ccaff;
	box-shadow: 0 0 0 3px rgba(18, 40, 74, .65), 0 0 18px 2px rgba(95, 180, 255, .45), 0 10px 20px -8px rgba(0, 0, 0, .8);
	color: #eaf3ff; transition: transform 120ms var(--dt-ease), filter 120ms;
}
.pcf-duel .dt-act:hover .dt-act__dot, .pcf-duel .dt-act:focus-visible .dt-act__dot { transform: scale(1.08); filter: brightness(1.2); }
.pcf-duel .dt-act.is-attack .dt-act__dot { background: radial-gradient(circle at 50% 30%, #c4483d, #4a1410 72%); border-color: #ffab9e; box-shadow: 0 0 0 3px rgba(74, 20, 16, .65), 0 0 18px 2px rgba(226, 105, 95, .5), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.pcf-duel .dt-act.is-proc .dt-act__dot, .pcf-duel .dt-act.is-activate .dt-act__dot, .pcf-duel .dt-act.is-trigger .dt-act__dot { border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(74, 60, 16, .6), 0 0 18px 2px rgba(230, 187, 69, .45), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.pcf-duel .dt-act__t { padding: 2px 9px; border-radius: 999px; background: rgba(8, 12, 20, .88); white-space: nowrap; text-shadow: none; }

/* the question bar: at the head of the side panel (desktop), over the centre
   line of the table (phone) */
.pcf-duel .dt-autobar { flex: 0 0 auto; margin: 12px 12px 4px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--dt-surface); border: 1px solid var(--dt-line); box-sizing: border-box; }
.pcf-duel .dt-board > .dt-autobar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 34; width: max-content; max-width: calc(100% - 16px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85); }
.pcf-duel .dt-autobar[hidden] { display: none; }
.pcf-duel .dt-autobar__q { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pcf-duel .dt-autobar__hint { margin: 0; color: var(--dt-faint); font-size: 13px; }
/* a window passing by itself (Responses "Off"): the time left, and "held" once touched */
.pcf-duel .dt-autobar__timer { margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--dt-faint); font-size: 12px; }
.pcf-duel .dt-autobar__timerbar { display: block; height: 3px; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: left center; animation: dt-quiet linear forwards; }
.pcf-duel .dt-autobar__timer.is-held .dt-autobar__timerbar { display: none; }
@keyframes dt-quiet { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pcf-duel .dt-autobar.is-strip > .dt-autobar__timer { flex: 1 1 100%; order: 3; }
.pcf-duel .dt-autobar__row { display: flex; flex-wrap: wrap; gap: 6px; }
.pcf-duel .dt-autobar.is-turn { border-color: var(--dt-next-line); background: color-mix(in srgb, var(--dt-next-bg) 45%, var(--dt-surface)); }
.pcf-duel .dt-autobar.is-respond { border: 2px solid var(--dt-auto); background: color-mix(in srgb, var(--dt-auto) 14%, var(--dt-surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-auto) 22%, transparent); animation: dt-ask-in 220ms var(--dt-ease); }
.pcf-duel .dt-board > .dt-autobar.is-respond { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-auto) 22%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .85); }
.pcf-duel .dt-autobar.is-wait { color: var(--dt-muted); }
.pcf-duel .dt-autobar.is-select { border-color: var(--dt-gold); }
.pcf-duel .dt-autobtn { display: inline-flex; align-items: center; gap: 6px; }
.pcf-duel .dt-autobtn img { width: 20px; height: 29px; object-fit: cover; border-radius: 2px; }
.pcf-duel .dt-autopass { margin-left: auto; min-width: 92px; justify-content: center; gap: 8px; }
.pcf-duel .dt-autopass kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }
.pcf-duel.is-compact .dt-autopass kbd { display: none; }
.pcf-duel .dt-autochain { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.pcf-duel .dt-autochain li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--dt-s2); font-size: 12px; }
.pcf-duel .dt-autochain b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dt-target); color: #2a1206; font-size: 11px; }
.pcf-duel .dt-autochain li.is-me b { background: var(--dt-me); color: #0b1a33; }
.pcf-duel .dt-dschip { background: color-mix(in srgb, var(--dt-attack) 22%, var(--dt-s2)); }
.pcf-duel .dt-endturn.is-battle { background: color-mix(in srgb, var(--dt-attack) 30%, var(--dt-next-bg)); border-color: color-mix(in srgb, var(--dt-attack) 55%, var(--dt-next-line)); }

/* "Choose N cards": a sheet of pictures at the bottom; the field stays in sight */
.pcf-duel .dt-autosel { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 57; width: min(760px, calc(100vw - 24px)); max-height: 46vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--dt-surface); border: 2px solid var(--dt-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-gold) 20%, transparent), 0 24px 50px -20px rgba(0, 0, 0, .9); box-sizing: border-box; animation: dt-ask-in 220ms var(--dt-ease); }
.pcf-duel .dt-autosel[hidden] { display: none; }
.pcf-duel .dt-autosel__head { display: flex; align-items: baseline; gap: 10px; }
.pcf-duel .dt-autosel__grid { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.pcf-duel .dt-autosel__item { position: relative; flex: 0 0 auto; }
.pcf-duel .dt-autosel__info { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(10,14,22,.78); color: #fff; font: 600 12px/20px Georgia, serif; font-style: italic; cursor: pointer; }
.pcf-duel .dt-autosel__info:hover { background: var(--dt-me); color: #0b1a33; }
.pcf-duel .dt-autochain li > button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pcf-duel .dt-autochain li > button:hover span { text-decoration: underline; }
.pcf-duel .dt-autosel__card { position: relative; flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; color: var(--dt-muted); font: inherit; font-size: 11px; cursor: pointer; text-align: center; }
.pcf-duel .dt-autosel__card img, .pcf-duel .dt-autosel__card .dt-card__back { width: 84px; height: 122px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px var(--dt-line); }
.pcf-duel .dt-autosel__card.is-on img { box-shadow: 0 0 0 3px var(--dt-gold), 0 0 16px 3px color-mix(in srgb, var(--dt-gold) 60%, transparent); }
.pcf-duel .dt-autosel__tick { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--dt-gold); color: #2a1f05; font-weight: 800; }
.pcf-duel .dt-autosel__where { line-height: 1.2; }
.pcf-duel .dt-autosel__foot { display: flex; justify-content: flex-end; }
.pcf-duel.is-compact .dt-autosel__card, .pcf-duel.is-compact .dt-autosel__card img, .pcf-duel.is-compact .dt-autosel__card .dt-card__back { width: 64px; }
.pcf-duel.is-compact .dt-autosel__card img, .pcf-duel.is-compact .dt-autosel__card .dt-card__back { height: 93px; }
/* no chat with a bot: the panel is the card and the log */
.pcf-duel.is-auto .dt-chat, .pcf-duel.is-auto .dt-tabs-wrap { display: none; }
.pcf-duel .dt-autobar__ctx { margin: -4px 0 0 23px; color: var(--dt-muted); font-size: 13px; }
/* the engine keeps the Life Points: nothing to type */
.pcf-duel.is-auto.is-port .dt-player.is-me .dt-lp::after { content: none; }
/* choosing a zone (Master Duel): the free ones in gold */
.pcf-duel .dt-zone.is-zonepick { border: 2px solid var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 16%, transparent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--dt-gold) 45%, transparent); cursor: pointer; animation: dt-can 1.4s ease-in-out infinite; }
.pcf-duel .dt-step.is-go { box-shadow: inset 0 0 0 1px var(--dt-auto); color: var(--dt-text); cursor: pointer; }
.pcf-duel .dt-step.is-go:hover { background: color-mix(in srgb, var(--dt-auto) 22%, transparent); }
.pcf-duel .dt-autocancel { gap: 8px; }
.pcf-duel .dt-autocancel kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }
.pcf-duel.is-compact .dt-autocancel kbd { display: none; }
/* resolving by hand: the manual table's tools are on */
.pcf-duel .dt-autobar.is-manual { border: 2px solid var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 10%, var(--dt-surface)); }
.pcf-duel .dt-autobar__text { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--dt-s2); font-size: 13px; line-height: 1.45; max-height: 9em; overflow: auto; }
.pcf-duel .dt-byhand.is-on { border-color: var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 18%, var(--dt-surface)); }
/* online, the chat is back (a person on the other side) */
.pcf-duel.is-auto.is-auto-online .dt-chat, .pcf-duel.is-auto.is-auto-online .dt-tabs-wrap { display: revert; }
.pcf-duel.is-auto.is-auto-online .dt-chat { display: flex; }
/* the bot's trash talk (piano/09): the chat is back against the bot while it talks */
.pcf-duel.is-auto.is-auto-talk .dt-chat, .pcf-duel.is-auto.is-auto-talk .dt-tabs-wrap { display: revert; }
.pcf-duel.is-auto.is-auto-talk .dt-chat { display: flex; }
/* a phone: the question is a strip over your hand, never on the field */
.pcf-duel .dt-autobar.is-strip { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 56px); z-index: 34; margin: 0; padding: 8px 10px; gap: 5px; max-height: 34vh; overflow: auto; font-size: 13px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .85); }
.pcf-duel.is-land .dt-autobar.is-strip { left: auto; right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); width: min(320px, 40vw); max-height: 60vh; }
.pcf-duel .dt-autobar.is-strip .dt-autobar__ctx { margin-left: 0; font-size: 12px; }
.pcf-duel .dt-autobar.is-strip .dt-autobar__text { max-height: 5.5em; font-size: 12px; }
.pcf-duel .dt-autobar.is-strip .dt-autobar__row .dl-btn { min-height: 36px; }
.pcf-duel .dt-bottom__icon.dt-byhand.is-on { border-color: var(--dt-gold); background: color-mix(in srgb, var(--dt-gold) 22%, var(--dt-surface)); }
.pcf-duel .dt-autobar.is-strip { flex-flow: row wrap; align-items: center; column-gap: 10px; }
.pcf-duel .dt-autobar.is-strip > .dt-autobar__q { flex: 1 1 auto; min-width: 0; }
.pcf-duel .dt-autobar.is-strip > .dt-autobar__ctx, .pcf-duel .dt-autobar.is-strip > .dt-autobar__text, .pcf-duel .dt-autobar.is-strip > .dt-autochain, .pcf-duel .dt-autobar.is-strip > .dt-autobar__hint { flex: 1 1 100%; order: 3; }
.pcf-duel .dt-autobar.is-strip > .dt-autobar__row { flex: 0 1 auto; margin-left: auto; }
.pcf-duel .dt-autobar.is-strip .dt-autopass { min-width: 76px; }

/* ------------------------------------------------------------------ */
/* The Laboratory (?lab=1): an editor of situations for the automatic  */
/* duel — cards in any zone, then Play (DUEL-AUTOMATICO.md, Fase 1)    */
/* ------------------------------------------------------------------ */
.pcf-duel .lab { display: flex; flex-direction: column; gap: 16px; }
.pcf-duel .lab .dl-card { gap: 12px; }
.pcf-duel .lab-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.pcf-duel .lab-row .dl-field { margin: 0; }
.pcf-duel .lab-actions { align-items: center; }
.pcf-duel .lab-num { width: 92px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; }
.pcf-duel .lab-name, .pcf-duel .lab-search { flex: 1 1 220px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; box-sizing: border-box; }
.pcf-duel .lab-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; cursor: pointer; }
.pcf-duel .lab-check input, .pcf-duel .lab-fresh input { width: 18px; height: 18px; accent-color: var(--dt-accent); }
.pcf-duel .lab-lib details { border-top: 1px solid var(--dt-line); padding-top: 10px; }
.pcf-duel .lab-lib details:first-child { border-top: 0; padding-top: 0; }
.pcf-duel .lab-lib summary { cursor: pointer; padding: 4px 0; }
.pcf-duel .lab-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pcf-duel .lab-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; background: var(--dt-s2); }
.pcf-duel .lab-list li > div { flex: 1 1 auto; min-width: 0; }
.pcf-duel .lab-list p { margin: 4px 0 0; }
.pcf-duel .lab-del { min-width: 40px; }
.pcf-duel .lab-find { position: sticky; top: 8px; z-index: 5; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .9); }
.pcf-duel .lab-findhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pcf-duel .lab-to { font-size: 14px; color: var(--dt-muted); }
.pcf-duel .lab-to strong { color: var(--dt-gold); }
.pcf-duel .lab-results { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; min-height: 24px; }
.pcf-duel .lab-results .dl-sub { margin: 0; }
.pcf-duel .lab-hit { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 11px; line-height: 1.2; text-align: center; cursor: pointer; }
.pcf-duel .lab-hit img { width: 76px; height: 111px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px var(--dt-line); }
.pcf-duel .lab-hit:hover img, .pcf-duel .lab-hit:focus-visible img { box-shadow: 0 0 0 3px var(--dt-gold); }
.pcf-duel .lab-side.is-opp { border-color: color-mix(in srgb, var(--dt-target) 45%, var(--dt-line)); }
.pcf-duel .lab-sidehead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pcf-duel .lab-sidehead h2 { margin: 0; flex: 1 1 auto; }
.pcf-duel .lab-lp { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pcf-duel .lab-field { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pcf-duel .lab-cell { display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 6px; border-radius: 10px; border: 1px dashed var(--dt-line); box-sizing: border-box; }
.pcf-duel .lab-cell.is-blank { border: 0; }
.pcf-duel .lab-cell.has-card { border-style: solid; }
.pcf-duel .lab-cell.is-target, .pcf-duel .lab-pile.is-target { border: 2px solid var(--dt-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-gold) 22%, transparent); }
.pcf-duel .lab-empty { flex: 1 1 auto; border: 0; border-radius: 6px; background: none; color: var(--dt-muted); font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.pcf-duel .lab-empty:hover { background: var(--dt-s2); color: inherit; }
.pcf-duel .lab-thumb { display: grid; place-items: center; height: 92px; padding: 0; border: 0; background: none; cursor: pointer; }
.pcf-duel .lab-thumb img { height: 92px; width: auto; border-radius: 4px; transition: transform 160ms; }
.pcf-duel .lab-thumb.is-def img { transform: rotate(-90deg) scale(.82); }
.pcf-duel .lab-thumb.is-set img { filter: brightness(.55) saturate(.6); }
.pcf-duel .lab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pcf-duel .lab-sel { min-height: 30px; max-width: 100%; padding: 0 4px; border-radius: 8px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; font-size: 12px; }
.pcf-duel .lab-fresh { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dt-muted); cursor: pointer; }
.pcf-duel .lab-x { width: 28px; height: 28px; margin-left: auto; padding: 0; border-radius: 50%; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.pcf-duel .lab-pile { display: flex; gap: 10px; align-items: stretch; padding: 6px; border-radius: 10px; border: 1px solid transparent; }
.pcf-duel .lab-pilehead { flex: 0 0 132px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.pcf-duel .lab-strip { flex: 1 1 auto; display: flex; gap: 6px; overflow-x: auto; align-items: center; min-height: 36px; }
.pcf-duel .lab-strip:has(.lab-pc) { min-height: 92px; }
.pcf-duel .lab-pc { position: relative; flex: 0 0 auto; }
.pcf-duel .lab-pc img { display: block; width: 58px; height: 85px; object-fit: cover; border-radius: 4px; }
.pcf-duel .lab-pcbtns { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; opacity: 0; transition: opacity 120ms; }
.pcf-duel .lab-pc:hover .lab-pcbtns, .pcf-duel .lab-pc:focus-within .lab-pcbtns { opacity: 1; }
.pcf-duel .lab-pcbtns button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: rgba(10, 14, 22, .85); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.pcf-duel .lab-none { align-self: center; }
@media (hover: none) { .pcf-duel .lab-pcbtns { opacity: 1; } }
@media (max-width: 720px) {
	.pcf-duel .lab-field { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcf-duel .lab-cell.is-blank { display: none; }
	.pcf-duel .lab-pile { flex-direction: column; }
	.pcf-duel .lab-pilehead { flex-basis: auto; flex-direction: row; align-items: center; }
}
.pcf-duel .lab .dl-seg { flex-wrap: wrap; border-radius: 20px; }
.pcf-duel .lab .dl-seg button { white-space: nowrap; }
.pcf-duel .lab-how { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; max-width: 760px; font-size: 15px; line-height: 1.45; }
.pcf-duel .lab-expect { border: 2px solid var(--dt-gold); gap: 6px; }
.pcf-duel .lab-expect p { margin: 0; font-size: 15px; line-height: 1.5; }
.pcf-duel .lab-exp { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; resize: vertical; box-sizing: border-box; }

/* The automatic duel, step by step (Master Duel): "Chain N" with the card
   large, the link resolving, the phases */
.pcf-duel .dt-chainspot__box { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: dt-spot-in 380ms var(--dt-ease); }
.pcf-duel .dt-chainspot img { width: min(240px, 38vw); border-radius: 12px; box-shadow: 0 0 0 2px #f3f3f2, 0 0 60px 14px rgba(143, 184, 255, .5); animation: none; }
.pcf-duel .dt-chainspot.is-opp img { box-shadow: 0 0 0 2px #f3f3f2, 0 0 60px 14px rgba(255, 140, 90, .55); }
.pcf-duel .dt-chainspot__n { font-size: clamp(28px, 5vw, 46px); font-weight: 800; font-style: italic; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 24px rgba(143, 184, 255, .9); }
.pcf-duel .dt-chainspot.is-opp .dt-chainspot__n { text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 24px rgba(255, 140, 90, .95); }
.pcf-duel .dt-chainspot__who { padding: 6px 14px; border-radius: 99px; background: rgba(5, 7, 10, .8); color: #fff; font-size: 14px; font-weight: 600; }
.pcf-duel .dt-resolvetag { display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.pcf-duel .dt-resolvetag span { transform: translateY(-110%); }
.pcf-duel .dt-resolvetag span { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--dt-gold); color: #2a1f05; font-size: 12px; font-weight: 700; white-space: nowrap; animation: dt-fade-in 200ms ease-out; }
.pcf-duel .dt-autopos { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 5vw, 48px); padding: 8px 0 4px; }
.pcf-duel .dt-autopos__opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer; }
.pcf-duel .dt-autopos__opt:hover, .pcf-duel .dt-autopos__opt:focus-visible { background: var(--dt-s2); }
.pcf-duel .dt-autopos__card { display: grid; place-items: center; width: 132px; height: 132px; }
.pcf-duel .dt-autopos__card img, .pcf-duel .dt-autopos__card .dt-card__back { width: 88px; height: 128px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px var(--dt-line); transition: transform 160ms; }
.pcf-duel .dt-autopos__opt.is-def .dt-autopos__card img, .pcf-duel .dt-autopos__opt.is-def .dt-autopos__card .dt-card__back { transform: rotate(-90deg); }
.pcf-duel .dt-autopos__opt:hover img, .pcf-duel .dt-autopos__opt:hover .dt-card__back { box-shadow: 0 0 0 3px var(--dt-gold); }
.pcf-duel .dt-autopos__label { font-size: 14px; font-weight: 600; }
.pcf-duel .dt-dschip { white-space: nowrap; }
.pcf-duel .dt-askbtn.is-smart { border-color: var(--dt-gold); color: var(--dt-gold); }
.pcf-duel .dt-askbtn.is-off { border-color: var(--dt-target); color: var(--dt-target); }
/* the speaker: on the bar on a desktop, by the thumb on a phone */
.pcf-duel .dt-bar > .dt-soundbtn, .pcf-duel .dt-bar > .dt-talkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; min-width: 40px; padding: 0 10px; }
.pcf-duel .dt-soundbtn.is-muted { color: var(--dt-muted); }
.pcf-duel .dt-autosel__sum { font-size: 13px; color: var(--dt-muted); }
.pcf-duel .dt-autosel__sum.is-ok { color: var(--dt-gold); font-weight: 600; }
.pcf-duel .dt-declare__in { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font: inherit; box-sizing: border-box; }
.pcf-duel .dt-declare__list { min-height: 60px; }

/* ------------------------------------------------------------------ */
/* The table, Master Duel style (analisi/FASE-3.md)                     */
/* ------------------------------------------------------------------ */
/* the question window: bottom of the table (desktop), a sheet (upright
   phone, 45% at most), the column right of the field (sideways) */
.pcf-duel .dt-board > .dt-autosel { position: absolute; left: 50%; z-index: 40; bottom: 10px; transform: translateX(-50%); width: min(780px, calc(100% - 24px)); max-height: calc(100% - 20px); overflow: auto; }
.pcf-duel.is-port .dt-autosel { left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); transform: none; width: auto; max-height: 45vh; max-height: 45dvh; overflow: auto; padding: 10px; gap: 7px; }
.pcf-duel.is-land .dt-col3 { position: relative; }
.pcf-duel.is-land .dt-col3 > .dt-autosel { position: absolute; inset: 0; left: 0; bottom: 0; transform: none; width: auto; max-height: none; overflow: auto; padding: 8px; gap: 6px; border-width: 2px; z-index: 40; }
.pcf-duel.is-land .dt-col3 > .dt-autosel.is-min { top: auto; }
.pcf-duel .dt-autosel.is-menu, .pcf-duel .dt-autosel.is-position { border-color: var(--dt-auto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-auto) 20%, transparent), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.pcf-duel .dt-autosel__head { align-items: center; }
.pcf-duel .dt-autosel__head > strong { flex: 1 1 auto; min-width: 0; }
.pcf-duel .dt-autosel__min { flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -4px -4px 0; padding: 0; border-radius: 50%; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.pcf-duel .dt-autosel__min:hover { border-color: var(--dt-auto); }
/* lowered: one line, the field in view; a tap on it brings it back */
.pcf-duel .dt-autosel.is-min { max-height: none; padding-top: 8px; padding-bottom: 8px; }
.pcf-duel .dt-autosel.is-min > :not(.dt-autosel__head) { display: none; }
.pcf-duel .dt-autosel.is-min .dt-autosel__head { cursor: pointer; }
.pcf-duel .dt-board > .dt-autosel.is-min { width: auto; max-width: calc(100% - 24px); }
.pcf-duel .dt-autosel__foot { gap: 8px; align-items: center; }
.pcf-duel .dt-autosel__foot .dt-autocancel { margin-right: auto; }
.pcf-duel .dt-autosel__foot .dt-autopass { margin-left: 0; }
.pcf-duel .dt-autosel__foot .dt-autook { min-width: 110px; justify-content: center; gap: 8px; }
.pcf-duel .dt-autook kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .55; }
.pcf-duel.is-compact .dt-autook kbd { display: none; }
.pcf-duel .dt-autosel__card { transition: transform 120ms var(--dt-ease); }
.pcf-duel .dt-autosel__card:hover img { box-shadow: 0 0 0 2px var(--dt-auto); }
.pcf-duel .dt-autosel__card.is-on img { box-shadow: 0 0 0 3px var(--dt-gold), 0 0 16px 3px color-mix(in srgb, var(--dt-gold) 60%, transparent); }
/* what the question is about: the card, its text */
.pcf-duel .dt-autowin__ctx { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 12px; background: var(--dt-s2); }
.pcf-duel .dt-autowin__pic { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
.pcf-duel .dt-autowin__pic img { display: block; width: 58px; height: 85px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--dt-line); }
.pcf-duel .dt-autowin__say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pcf-duel .dt-autowin__line { margin: 0; font-weight: 600; font-size: 14px; }
.pcf-duel .dt-autowin__line.is-plain { color: var(--dt-muted); font-weight: 500; }
.pcf-duel .dt-autowin__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dt-muted); max-height: 6.2em; overflow: auto; }
.pcf-duel .dt-autowin__hint { margin: 0; font-size: 12px; color: var(--dt-faint); }
.pcf-duel .dt-autowin__link { white-space: nowrap; flex: 0 0 auto; padding: 2px 9px; border-radius: 99px; background: var(--dt-target); color: #2a1206; font-size: 12px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; }
.pcf-duel .dt-autowin__opts { display: flex; flex-direction: column; gap: 6px; }
.pcf-duel .dt-autowin__opt { justify-content: flex-start; text-align: left; min-height: 42px; white-space: normal; }
.pcf-duel.is-compact .dt-autowin__pic img { width: 44px; height: 64px; }
.pcf-duel.is-compact .dt-autowin__text { max-height: 4.4em; font-size: 12px; }
.pcf-duel.is-land .dt-autowin__ctx { padding: 6px; gap: 6px; }
.pcf-duel.is-land .dt-autosel__card, .pcf-duel.is-land .dt-autosel__card img, .pcf-duel.is-land .dt-autosel__card .dt-card__back { width: 54px; }
.pcf-duel.is-land .dt-autosel__card img, .pcf-duel.is-land .dt-autosel__card .dt-card__back { height: 79px; }
.pcf-duel.is-land .dt-autosel__foot { flex-wrap: wrap; }
.pcf-duel.is-land .dt-autosel__foot .dl-btn { min-height: 34px; padding: 0 10px; }
.pcf-duel.is-land .dt-autosel__foot .dt-autook { min-width: 0; flex: 1 1 auto; }
.pcf-duel.is-land .dt-autosel__head strong { font-size: 13px; }
.pcf-duel.is-land .dt-autopos { gap: 8px; }
.pcf-duel.is-land .dt-autopos__card { width: 84px; height: 84px; }
.pcf-duel.is-land .dt-autopos__card img, .pcf-duel.is-land .dt-autopos__card .dt-card__back { width: 54px; height: 79px; }
.pcf-duel.is-port .dt-autopos__card { width: 104px; height: 104px; }
.pcf-duel.is-port .dt-autopos__card img, .pcf-duel.is-port .dt-autopos__card .dt-card__back { width: 68px; height: 99px; }
/* a choice on the field: the banner at the top of the table */
.pcf-duel .dt-autobanner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 36; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: calc(100% - 16px); padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--dt-surface) 94%, transparent); border: 2px solid var(--dt-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-gold) 18%, transparent), 0 16px 34px -16px rgba(0, 0, 0, .9); box-sizing: border-box; animation: dt-ask-in 220ms var(--dt-ease); }
.pcf-duel .dt-autobanner[hidden] { display: none; }
.pcf-duel .dt-autobanner__q { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.pcf-duel .dt-autobanner__n { white-space: nowrap; color: var(--dt-gold); font-weight: 700; font-size: 13px; }
.pcf-duel .dt-autobanner__row { display: flex; gap: 6px; }
.pcf-duel.is-compact .dt-autobanner { padding: 6px 10px; font-size: 13px; top: 4px; }
.pcf-duel.is-compact .dt-autobanner .dl-btn { min-height: 34px; padding: 0 12px; }
.pcf-duel.is-land .dt-autobanner { left: calc(var(--side, 144px) + 8px); right: auto; transform: none; max-width: 52%; }
/* Confirm over the card chosen on the field */
.pcf-duel .dt-act.is-confirm .dt-act__dot { background: radial-gradient(circle at 50% 30%, #c79a2a, #4a3608 72%); border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(74, 54, 8, .6), 0 0 18px 2px rgba(230, 187, 69, .55), 0 10px 20px -8px rgba(0, 0, 0, .8); color: #fff8e1; }
/* the phase button and its selector (Master Duel f0024, f0048) */
.pcf-duel .dt-phase.is-autophase { justify-content: center; min-height: 34px; }
.pcf-duel .dt-phasebtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 30; width: 66px; height: 66px; padding: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: default;
	background: radial-gradient(circle at 50% 30%, #2f5d9c, #0f203c 72%); border: 2px solid #7fb2f0; color: #eaf3ff; font: inherit; box-shadow: 0 0 0 3px rgba(15, 32, 60, .7), 0 10px 22px -10px rgba(0, 0, 0, .9); }
.pcf-duel .dt-phasebtn.is-theirs { background: radial-gradient(circle at 50% 30%, #9c3a2f, #3c120f 72%); border-color: #f0907f; box-shadow: 0 0 0 3px rgba(60, 18, 15, .7), 0 10px 22px -10px rgba(0, 0, 0, .9); }
.pcf-duel .dt-phasebtn.is-go { cursor: pointer; box-shadow: 0 0 0 3px rgba(15, 32, 60, .7), 0 0 16px 3px color-mix(in srgb, var(--dt-auto) 55%, transparent); }
.pcf-duel .dt-phasebtn.is-go:hover, .pcf-duel .dt-phasebtn.is-open { filter: brightness(1.18); }
.pcf-duel .dt-phasebtn__t { font-size: 10px; font-weight: 600; opacity: .8; letter-spacing: .02em; }
.pcf-duel .dt-phasebtn__p { font-size: 14px; font-weight: 800; line-height: 1.05; text-align: center; }
.pcf-duel .dt-phasesel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 45; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 99px; background: var(--dt-surface); border: 2px solid var(--dt-auto); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9); animation: dt-acts-in 160ms var(--dt-ease); }
.pcf-duel .dt-phasesel__p { width: 58px; height: 46px; padding: 0; border-radius: 99px; border: 1px solid transparent; background: none; color: var(--dt-faint); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.pcf-duel .dt-phasesel__p b { font-size: 14px; }
.pcf-duel .dt-phasesel__p span { font-size: 10.5px; }
.pcf-duel .dt-phasesel__p.is-now { background: var(--dt-s3); color: var(--dt-text); }
.pcf-duel .dt-phasesel__p.is-go { color: #eaf3ff; background: color-mix(in srgb, var(--dt-auto) 26%, var(--dt-s2)); border-color: var(--dt-auto); cursor: pointer; }
.pcf-duel .dt-phasesel__p.is-go.is-battle { background: color-mix(in srgb, var(--dt-attack) 30%, var(--dt-s2)); border-color: color-mix(in srgb, var(--dt-attack) 70%, #fff); }
.pcf-duel .dt-phasesel__p.is-go:hover { filter: brightness(1.2); }
.pcf-duel .dt-phasesel__x { width: 40px; height: 40px; margin-left: 2px; padding: 0; border-radius: 50%; border: 1px solid var(--dt-line); background: var(--dt-s2); color: inherit; font-size: 15px; cursor: pointer; }
.pcf-duel.is-compact .dt-phasebtn { width: 50px; height: 50px; right: 2px; }
.pcf-duel.is-compact .dt-phasebtn__t { font-size: 8.5px; }
.pcf-duel.is-compact .dt-phasebtn__p { font-size: 11.5px; }
.pcf-duel.is-compact .dt-phasesel__p { width: 46px; height: 40px; }
.pcf-duel.is-compact .dt-phasesel__p b { font-size: 12.5px; }
.pcf-duel.is-compact .dt-phasesel__p span { font-size: 9px; }
.pcf-duel.is-compact .dt-phasesel__x { width: 34px; height: 34px; }
/* the link number on a card in the chain */
.pcf-duel .dt-card > .dt-chainno { position: absolute; top: -9px; left: -9px; z-index: 6; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; box-sizing: border-box; background: var(--dt-target); color: #2a1206; font-size: 12.5px; font-weight: 800; font-style: italic; border: 2px solid #fff3e8; box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .8); pointer-events: none; }
.pcf-duel.is-compact .dt-card > .dt-chainno { min-width: 19px; height: 19px; font-size: 10.5px; top: -7px; left: -7px; }
/* a desktop (piano/08, model C): the card being read in its own column on
   the left (Master Duel f0030), the log, the chat and the question on the
   right, no players' panels beside the field — see the model C block */
/* the big things (Master Duel): phase and turn, Direct Attack, Final Blow */
.pcf-duel .dt-banner.is-big span { padding: 0 24px; border-radius: 0; background: none; color: #fff; font-size: clamp(26px, 5.2vw, 54px); font-weight: 800; font-style: italic; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 28px rgba(95, 180, 255, .95); transform: skewX(-8deg); animation: dt-bigbanner 1000ms var(--dt-ease) forwards; }
.pcf-duel .dt-banner.is-big.is-opp span { text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 28px rgba(255, 110, 80, .95); }
.pcf-duel .dt-banner.is-big { top: 40%; background: linear-gradient(90deg, transparent, rgba(8, 20, 40, .7) 25%, rgba(8, 20, 40, .7) 75%, transparent); padding: 6px 0; }
.pcf-duel .dt-banner.is-big.is-opp { background: linear-gradient(90deg, transparent, rgba(40, 12, 8, .7) 25%, rgba(40, 12, 8, .7) 75%, transparent); }
@keyframes dt-bigbanner { 0% { opacity: 0; transform: skewX(-8deg) translateX(-60px); } 18% { opacity: 1; transform: skewX(-8deg); } 82% { opacity: 1; transform: skewX(-8deg); } 100% { opacity: 0; transform: skewX(-8deg) translateX(60px); } }
/* the damage, large over the Life Points */
.pcf-duel.is-auto .dt-lpfloat { font-size: 30px; font-weight: 800; top: 30px; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); animation-duration: 1300ms; }
.pcf-duel.is-auto.is-compact .dt-lpfloat { font-size: 22px; top: 2px; right: 70px; }
/* the end of the duel */
.pcf-duel .dt-autoend { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at center, rgba(5, 10, 20, .92), rgba(5, 10, 20, .78) 70%); animation: dt-fade-in 400ms ease-out; text-align: center; padding: 16px; }
.pcf-duel .dt-autoend__t { font-size: clamp(48px, 10vw, 110px); font-weight: 900; font-style: italic; letter-spacing: .06em; text-transform: uppercase; color: #fff; transform: skewX(-8deg); animation: dt-endin 700ms var(--dt-ease); }
.pcf-duel .dt-autoend.is-win .dt-autoend__t { color: #ffe9a8; text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(255, 200, 80, .9); }
.pcf-duel .dt-autoend.is-lose .dt-autoend__t { color: #ffd2cb; text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(226, 80, 60, .9); }
.pcf-duel .dt-autoend.is-draw .dt-autoend__t { text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(160, 180, 210, .8); }
.pcf-duel .dt-autoend__why { margin: 0; padding: 6px 16px; border-radius: 99px; background: rgba(5, 7, 10, .75); color: #f3f3f2; font-size: 15px; }
.pcf-duel .dt-autoend__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pcf-duel .dt-autoend__score { margin: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.pcf-duel .dt-autoend__score:empty { display: none; }
.pcf-duel .dt.is-autoend .dt-phase { visibility: hidden; }
.pcf-duel .dt-firstpick { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pcf-duel .dt-autoend .dt-firstpick { flex: 1 1 100%; }
.pcf-duel .dt-autoend .dt-firstpick .dt-muted { flex: 1 1 100%; color: #e6e9ef; font-size: 14px; }
.pcf-duel .dt-autoend__row .dl-btn { min-width: 120px; min-height: 44px; justify-content: center; }
@keyframes dt-endin { from { opacity: 0; transform: skewX(-8deg) scale(1.6); } }
/* the attack being fought: a line, and the numbers that will meet */
.pcf-duel .dt-battlewrap { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.pcf-duel .dt-battleline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pcf-duel .dt-battleline line { stroke: #ff8a6a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; filter: drop-shadow(0 0 6px rgba(255, 110, 80, .9)); animation: dt-march 700ms linear infinite; }
.pcf-duel .dt-battleline.is-me line { stroke: #8fc4ff; filter: drop-shadow(0 0 6px rgba(95, 180, 255, .9)); }
@keyframes dt-march { to { stroke-dashoffset: -18; } }
.pcf-duel .dt-battlebox { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(8, 10, 16, .9); border: 1px solid #ff8a6a; color: #fff; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .9); }
.pcf-duel .dt-battlebox.is-me { border-color: #8fc4ff; }
.pcf-duel .dt-battlebox__vs { opacity: .8; }
.pcf-duel.is-compact .dt-battlebox { font-size: 11px; padding: 2px 8px; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-battleline line { animation: none; } }
/* a short phone: the window scrolls, its buttons stay in sight at the bottom */
.pcf-duel .dt-autosel > * { flex-shrink: 0; }
.pcf-duel .dt-autosel__foot { position: sticky; bottom: -12px; margin-bottom: -4px; padding: 6px 0 4px; background: var(--dt-surface); z-index: 1; }
.pcf-duel.is-port .dt-autosel__foot { bottom: -10px; }
.pcf-duel.is-land .dt-col3 > .dt-autosel .dt-autosel__foot { bottom: -8px; }
@media (max-height: 600px) { .pcf-duel.is-port .dt-autowin__text { max-height: 2.9em; } .pcf-duel.is-port .dt-autowin__line { font-size: 13px; } }
/* the opponent deciding: their panel glows, a pill on the centre line */
.pcf-duel .dt-player.is-thinking { border-color: var(--dt-target); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-target) 55%, transparent), 0 0 22px 4px color-mix(in srgb, var(--dt-target) 35%, transparent); animation: dt-think 1.4s ease-in-out infinite; }
.pcf-duel .dt-player.is-thinking:not(.is-responding) { border-color: var(--dt-faint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-text) 25%, transparent); animation: none; }
@keyframes dt-think { 50% { box-shadow: 0 0 0 2px var(--dt-target), 0 0 30px 8px color-mix(in srgb, var(--dt-target) 50%, transparent); } }
.pcf-duel .dt-thinktag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--dt-target) 22%, var(--dt-s2)); color: var(--dt-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pcf-duel .dt-player.is-thinking:not(.is-responding) .dt-thinktag { background: var(--dt-s2); color: var(--dt-muted); }
.pcf-duel .dt-thinktag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dt-target); animation: dt-blink 1s ease-in-out infinite; }
.pcf-duel .dt-player.is-thinking:not(.is-responding) .dt-thinktag__dot { background: var(--dt-muted); }
@keyframes dt-blink { 50% { opacity: .25; } }
.pcf-duel .dt-dots::after { content: "…"; display: inline-block; width: 1.1em; text-align: left; animation: dt-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dt-dots { 0% { width: 0; } 100% { width: 1.1em; } }
.pcf-duel .dt-waitpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 99px; background: var(--dt-surface); border: 1px solid var(--dt-line); color: var(--dt-muted); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; animation: dt-fade-in 200ms ease-out; }
.pcf-duel .dt-waitpill.is-respond { border: 2px solid var(--dt-target); color: var(--dt-text); background: color-mix(in srgb, var(--dt-target) 18%, var(--dt-surface)); box-shadow: 0 0 16px 2px color-mix(in srgb, var(--dt-target) 35%, transparent); }
.pcf-duel .dt-waitpill svg { flex: 0 0 auto; animation: dt-spin 2s linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
.pcf-duel.is-compact .dt-waitpill { font-size: 11.5px; padding: 3px 10px; gap: 5px; margin-right: 54px; }
.pcf-duel.is-compact .dt-thinktag { font-size: 10.5px; padding: 1px 7px; }
@media (prefers-reduced-motion: reduce) { .pcf-duel .dt-player.is-thinking, .pcf-duel .dt-thinktag__dot, .pcf-duel .dt-dots::after, .pcf-duel .dt-waitpill svg { animation: none; } }
.pcf-duel .dt-zonesbtn.is-on { border-color: var(--dt-gold); color: var(--dt-gold); }
.pcf-duel .dt-phase.is-autophase .dt-waitpill { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 31; max-width: calc(100% - 90px); }
.pcf-duel.is-compact .dt-phase.is-autophase .dt-waitpill { left: 2px; margin-right: 0; max-width: calc(100% - 64px); }
/* a phone: the pill and the glowing panel say it; no strip over your hand */
.pcf-duel.is-compact .dt-autobar.is-wait { display: none; }
/* a Monster Zone that cannot be used (Ojama King) */
/* a zone that cannot be used: a red X across it while it stays so (Ojama
   King, Embodiment of Apophis's Spell & Trap Zone) */
.pcf-duel .dt-zone.is-locked { background: color-mix(in srgb, var(--dt-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dt-danger) 60%, var(--dt-line)); }
.pcf-duel .dt-zone.is-locked::after {
	content: "";
	position: absolute;
	inset: 14%;
	pointer-events: none;
	background:
		linear-gradient(45deg, transparent calc(50% - 1.5px), var(--dt-danger) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
		linear-gradient(-45deg, transparent calc(50% - 1.5px), var(--dt-danger) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
	opacity: .85;
}
.pcf-duel .dt-zone.is-locked .dt-zone__label { position: relative; z-index: 1; color: var(--dt-danger); }

/* The replay of an automatic match: the steps, at the bottom of the table */
.pcf-duel .dt-arpbar { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 71; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: calc(100% - 16px); padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--dt-surface) 94%, transparent); border: 1px solid var(--dt-line); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .9); box-sizing: border-box; }
.pcf-duel .dt-arpbar .dl-btn[disabled] { opacity: .45; }
.pcf-duel .dt-arpbar__n { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dt-muted, inherit); font-size: .85em; padding: 0 4px; }
.pcf-duel .dt-arpbar .dl-btn.is-on { background: var(--dt-next-bg); border-color: var(--dt-next-line); color: var(--dt-next-fg); }
.pcf-duel .dt-arpbar__range { width: 160px; min-width: 80px; flex: 0 1 160px; accent-color: var(--dt-next-line); }
@media (max-width: 600px) {
	.pcf-duel .dt-arpbar { top: 58px; bottom: auto; left: 8px; right: 8px; transform: none; flex-wrap: wrap; gap: 4px; padding: 4px 6px; max-width: none; }
	.pcf-duel .dt-arpbar__range { flex: 1 1 100%; order: 10; width: auto; }
	.pcf-duel .dt-arpbar .dl-btn { padding: 4px 8px; min-height: 30px; font-size: .8rem; }
	.pcf-duel .dt-arpbar__n { font-size: .75rem; padding: 0 2px; }
}

/* The other player is gone: the room's clock until the duel (3 min) or the
   match (1 more min) can be claimed. Above the table and above the end of a
   duel, never in the way of the hand. */
.pcf-duel .dt-claim { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 75; width: min(420px, calc(100% - 32px)); box-sizing: border-box; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--dt-danger) 14%, var(--dt-surface)); border: 1px solid color-mix(in srgb, var(--dt-danger) 45%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: dt-ask-in 260ms var(--dt-ease); text-align: left; }
.pcf-duel .dt-claim.is-ready { border-color: var(--dt-gold); }
.pcf-duel .dt-claim__q { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; }
.pcf-duel .dt-claim__what { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--dt-muted); }
.pcf-duel .dt-claim__clock { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.pcf-duel .dt-claim__when { font-size: 13px; }
.pcf-duel .dt-claim__time { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pcf-duel .dt-claim__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pcf-duel .dt-claim__buttons .dl-btn { flex: 1 1 auto; min-height: 40px; }
.pcf-duel .dt-claim .dl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Responses: a coloured dot per mode (Auto, Smart, On, Off), on the bar's
   button, on the phone's badge on the table and in the chooser */
.pcf-duel .dt-askdot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--dt-accent); }
.pcf-duel .dt-askdot.is-smart { background: var(--dt-gold); }
.pcf-duel .dt-askdot.is-always { background: #6fcf97; }
.pcf-duel .dt-askdot.is-off { background: var(--dt-target); }
.pcf-duel .dt-askbtn { gap: 7px; }
.pcf-duel .dt-askbtn.is-always { border-color: #6fcf97; color: #6fcf97; }
.pcf-duel .dt-menu__txt { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-width: 0; }
.pcf-duel .dt-menu__label { display: flex; align-items: center; gap: 8px; }
.pcf-duel .dt-menu__hint { font-size: 12px; line-height: 1.35; color: var(--dt-muted); font-weight: 400; }
.pcf-duel .dt-menu.is-sheet .dt-menu__hint { font-size: 12.5px; }
.pcf-duel .dt-menu button.is-checked .dt-menu__label::after { content: "✓"; margin-left: auto; padding-left: 8px; color: var(--dt-accent); }
.pcf-duel .dt-handtools .dl-btn.dt-askpill,
.pcf-duel.is-compact .dt-handtools .dl-btn.dt-askpill,
.pcf-duel.is-compact .dt-player .dt-handtools .dl-btn.dt-askpill { width: auto; font-size: 12px; gap: 6px; padding: 0 10px; border-radius: 99px; white-space: nowrap; justify-content: center; }
.pcf-duel .dt-askpill__k { color: var(--dt-muted); font-weight: 400; }
.pcf-duel .dt-handtools .dl-btn.dt-concedepill,
.pcf-duel.is-compact .dt-handtools .dl-btn.dt-concedepill,
.pcf-duel.is-compact .dt-player .dt-handtools .dl-btn.dt-concedepill { width: auto; font-size: 12px; gap: 5px; padding: 0 10px; border-radius: 99px; white-space: nowrap; justify-content: center; color: var(--dt-danger); border-color: color-mix(in srgb, var(--dt-danger) 55%, var(--dt-line)); }
.pcf-duel .dt-askpill.is-smart { border-color: var(--dt-gold); }
.pcf-duel .dt-askpill.is-off { border-color: var(--dt-target); }
.pcf-duel .dt-askpill.is-always { border-color: #6fcf97; }

/* The format's card text, and the switch to today's (piano/03, 3.4) */
.pcf-duel .dt-era-row { display: block; margin-top: 6px; }
.pcf-duel .dt-era {
	appearance: none;
	border: 1px solid var(--dt-line, rgba(255,255,255,.18));
	background: transparent;
	color: inherit;
	opacity: .75;
	border-radius: 99px;
	padding: 1px 9px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}
.pcf-duel .dt-era:hover, .pcf-duel .dt-era[aria-pressed="true"] { opacity: 1; }
.pcf-duel .is-today > span:first-child { opacity: .7; }

/* ------------------------------------------------------------------ */
/* Model C on a computer (piano/08, design/duello/C-retro-2005-duello) */
/* in the table's own colours: the Life Points across the top, the card */
/* being read on the left, log · chat · the question on the right, the  */
/* phases and the buttons in a bar at the bottom. placeDesk() sets      */
/* .is-modelc; a phone keeps its own layout.                            */
/* ------------------------------------------------------------------ */
.pcf-duel .dt-score, .pcf-duel .dt-cardcol, .pcf-duel .dt-foot { display: none; }
.pcf-duel.is-modelc .dt-bar { display: block; padding: 0; }
.pcf-duel.is-modelc .dt-bar > :not(.dt-score) { display: none; }
.pcf-duel.is-modelc .dt-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto) minmax(0, 1fr); align-items: center; gap: 32px; padding: 10px 24px 12px; }
.pcf-duel .dt-score__p { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who lp" "bar bar"; align-items: end; gap: 6px 18px; min-width: 0; }
.pcf-duel .dt-score__p.is-opp { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lp who" "bar bar"; text-align: right; }
.pcf-duel .dt-score__who { grid-area: who; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcf-duel .dt-score__name { font-size: 15px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcf-duel .dt-score__name .dt-online { display: inline-block; margin-left: 7px; vertical-align: middle; }
.pcf-duel .dt-score__you { color: var(--dt-me); font-weight: 600; }
.pcf-duel .dt-score__counts { font-size: 12px; color: var(--dt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcf-duel .dt-score__lp { grid-area: lp; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pcf-duel .dt-score__bar { grid-area: bar; height: 8px; border-radius: 99px; background: var(--dt-s3); overflow: hidden; }
/* the bars empty toward the middle: yours from the left, theirs from the right */
.pcf-duel .dt-score__bar > div { height: 100%; margin-left: auto; border-radius: inherit; background: var(--dt-me); transition: width 700ms var(--dt-ease); }
.pcf-duel .dt-score__p.is-opp .dt-score__bar > div { margin-left: 0; background: var(--dt-opp); }
.pcf-duel .dt-score__p.is-turn .dt-score__name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; background: var(--dt-me); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-me) 25%, transparent); }
.pcf-duel .dt-score__p.is-opp.is-turn .dt-score__name::before { background: var(--dt-opp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-opp) 25%, transparent); }
.pcf-duel .dt-score__mid { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pcf-duel .dt-score__turn { font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.pcf-duel .dt-score__mid.is-me .dt-score__turn { color: var(--dt-me); }
.pcf-duel .dt-score__turn.is-end { font-size: 17px; }
.pcf-duel .dt-score__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-faint); white-space: nowrap; }
.pcf-duel .dt-score__mid .dt-matchchip { margin-top: 2px; }

.pcf-duel.is-modelc.is-auto .dt-main { grid-template-columns: 280px minmax(0, 1fr) 300px; }
.pcf-duel.is-modelc.is-auto .dt-cardcol { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--dt-surface); border-right: 1px solid var(--dt-line); }
.pcf-duel.is-modelc .dt-cardcol .dt-preview { max-height: none; border-bottom: 0; padding: 18px; }
.pcf-duel.is-modelc .dt-cardcol .dt-preview__top { flex-direction: column; gap: 14px; }
.pcf-duel.is-modelc .dt-cardcol .dt-preview__img { width: min(100%, 230px); height: auto; aspect-ratio: 1 / 1.4585; align-self: center; border-radius: 9px; }
.pcf-duel.is-modelc .dt-cardcol .dt-preview__meta h2 { font-size: 19px; }
.pcf-duel.is-modelc .dt-cardcol .dt-preview.is-empty { justify-content: center; text-align: center; height: 100%; box-sizing: border-box; }
/* the players' panels: their Life Points are across the top now */
.pcf-duel.is-modelc.is-auto .dt-player { display: none; }
.pcf-duel.is-modelc.is-auto .dt-grid { grid-template-columns: max-content; }
.pcf-duel.is-modelc .dt-player .dt-lp,
.pcf-duel.is-modelc .dt-player .dt-lpbar { display: none; }
/* the opponent's face behind their hand: a direct attack goes straight at it */
.pcf-duel .dt-face { display: none; }
.pcf-duel.is-modelc .dt-handwrap.is-opp { overflow: visible; padding-top: 40px; }
.pcf-duel.is-modelc .dt-face.is-opp { display: block; position: absolute; top: 0; left: 50%; z-index: 0; transform: translateX(-50%); border-radius: 50%; }
.pcf-duel.is-modelc .dt-hand.is-opp { position: relative; z-index: 1; }
/* initials (no picture): in the half that shows above the cards */
.pcf-duel .dt-face .dt-face__img { display: grid; place-items: start center; padding-top: 12px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-sizing: border-box; border: 3px solid var(--dt-opp); background: var(--dt-s3); color: var(--dt-text); font-size: 22px; font-weight: 800; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9); }
.pcf-duel.is-dragging-mon .dt-field.is-opp.is-over,
.pcf-duel.is-dragging-mon .dt-handwrap.is-opp.is-over { outline: 2px dashed var(--dt-attack); outline-offset: 4px; border-radius: 12px; }
.pcf-duel.is-dragging-mon .dt-handwrap.is-opp.is-over .dt-face__img { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-attack) 45%, transparent); }
/* the question at the foot of the right column */
.pcf-duel.is-modelc .dt-panel > .dt-ask:not([hidden]) { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }

.pcf-duel.is-modelc .dt-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 20px; border-top: 1px solid var(--dt-line); background: var(--dt-surface); }
.pcf-duel .dt-phasetrack { display: flex; gap: 6px; }
.pcf-duel .dt-phasetrack__p { min-width: 46px; height: 36px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--dt-line); background: var(--dt-s2); color: var(--dt-faint); font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.pcf-duel .dt-phasetrack__p.is-past { opacity: .55; }
.pcf-duel .dt-phasetrack__p.is-on.is-me { background: var(--dt-me); border-color: var(--dt-me); color: #0b1a33; }
.pcf-duel .dt-phasetrack__p.is-on.is-opp { background: var(--dt-opp); border-color: var(--dt-opp); color: #2a1206; }
.pcf-duel .dt-foot__r { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcf-duel .dt-foot__end:empty { display: none; }
.pcf-duel .dt-foot__end .dt-endrow { margin: 0; flex-wrap: nowrap; }
.pcf-duel .dt-foot .dt-bar__actions { margin-left: 0; flex-wrap: wrap; justify-content: flex-end; }
.pcf-duel .dt-foot .dt-bar__actions .dl-btn, .pcf-duel .dt-foot > .dt-foot__r > .dt-soundbtn, .pcf-duel .dt-foot > .dt-foot__r > .dt-talkbtn { min-height: 40px; }
.pcf-duel .dt-foot > .dt-foot__r > .dt-soundbtn, .pcf-duel .dt-foot > .dt-foot__r > .dt-talkbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }
@media (max-width: 1180px) {
	.pcf-duel.is-modelc.is-auto .dt-main { grid-template-columns: 240px minmax(0, 1fr) 270px; }
	.pcf-duel.is-modelc .dt-score__lp { font-size: 28px; }
	.pcf-duel .dt-phasetrack__p { min-width: 38px; }
}
/* the manual table has its own phases on the centre line, to tap */
.pcf-duel.is-modelc:not(.is-auto) .dt-phasetrack { display: none; }
/* the site's dropdown menus (pcf-select.js) in the Duel page's colours */
.pcf-duel .ygo-select__trigger { min-height: 40px; border-radius: 12px; border-color: var(--dt-line); background: var(--dt-bg); color: var(--dt-text); }
.pcf-duel .ygo-select__trigger:hover { background: var(--dt-s2); }