/*
 * MAGICDUEL - the regeneration card (js/md_regencard.js), the card over the big counter in the corner.
 *
 * Its own look, by design: an instrument panel with a luminous ring and bars, on the soft bark of the
 * frame under the menu. Linked by core/Regen/inc.regencard.php with ?r=<filemtime>, because css/ is cached.
 *
 * GAME COLOURS ONLY, LIGHT ON BARK (Mur, 2026-10-07: "use game colors only", then "too dark, bring them
 * towards the bark background under the menu and that counter, softer, reverse colors", then "make it
 * #bfac8f"): the ground is #bfac8f, flat, the text is the frame's ink (#1c120d, #38342c,
 * #514d40, #635e52), the ring and the day bar are the stats bars' gold (#e6b747 with the orange glow
 * rgba(255,162,0)), the links are the game's own (#880000, hover #ff6600), danger is the announcement
 * red and orange (#d15213, #f07d43), SAFE IS BRIGHT GOLD (#fcba03; "the green has no place", Mur), and
 * the deep gold of the profile (#a8792a, #6a4800) carries the amber words. Nothing from outside the game.
 * The reasons under the tick are plain colour-coded words, no pills (Mur, same night).
 *
 * Colour carries meaning on the streak bar and is never the only sign: ok (green) is more than half the
 * time left, warn (amber) under half, bad (red) under a quarter; the words under the bar say the same.
 */

/* the counter itself becomes the handle: on a phone its box lets taps through (layout.css.php sets
   pointer-events:none on #nextRegentime), so the digits take their own taps back */
#nextRegentime #div_regentimer {
	pointer-events: auto;
	cursor: pointer;
	border-radius: 6px;
	transition: text-shadow .18s ease;
}
#nextRegentime #div_regentimer:hover,
#nextRegentime #div_regentimer[aria-expanded="true"] {
	text-shadow: 1px 1px #444, 0 0 12px rgba(230, 183, 71, .75);
}
#nextRegentime #div_regentimer:focus-visible {
	outline: 2px solid rgba(230, 183, 71, .9);
	outline-offset: 3px;
}

.mdrg-card {
	--bg-1: #e8e7dc;   /* the ground Mur named, 2026-10-07: "make it #e8e7dc" */
	--bg-2: #e8e7dc;
	--line: rgba(56, 52, 44, .22);
	--ink: #1c120d;
	--ink-soft: #514d40;
	--ink-faint: #635e52;
	--gold: #e6b747;
	--gold-2: #a8792a;
	--gold-deep: #6a4800;
	--gold-soft: rgba(230, 183, 71, .32);
	--glow: rgba(255, 162, 0, .5);
	/* no green anywhere (Mur, 2026-10-07): the game's "good" is bright gold; the ladder is gold, orange, red */
	--ok: #fcba03;
	--ok-2: #e6b747;
	--ok-text: #c78b2a;
	--warn: #f07d43;
	--warn-2: #edaf1c;
	--warn-text: #d15213;
	--bad: #d15213;
	--bad-2: #f07d43;
	--bad-text: #880000;
	--track: rgba(28, 18, 13, .14);
	--tile: rgba(28, 18, 13, .055);

	position: fixed;
	z-index: 10050;
	box-sizing: border-box;
	width: 336px;
	max-width: calc(100vw - 16px);
	color: var(--ink);
	background: var(--bg-1);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(238, 236, 224, .35) inset, 0 14px 30px -12px rgba(28, 18, 13, .6), 0 3px 8px rgba(28, 18, 13, .25);
	overflow: hidden;
	font-family: 'Jost', 'Segoe UI', Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	font-weight: normal;
	line-height: 1.3;
	text-align: left;
	text-shadow: none;
	opacity: 0;
	transform: translateY(-4px) scale(.98);
	transform-origin: top left;
	transition: opacity .16s ease, transform .16s ease;
	pointer-events: auto;   /* the hover card too: it stays while the mouse is over it, so its link can be reached */
}
.mdrg-card *, .mdrg-card *::before, .mdrg-card *::after { box-sizing: border-box; }
/* the game styles every div, span and p (css.default.ui-general.css) and Bootstrap bolds dt: one
   class of specificity resets that, and every rule below still wins by coming later */
.mdrg-card :where(div, span, p, b, i, a, button) { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-shadow: none; }
.mdrg-card.mdrg-on { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ head */

.mdrg-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 12px 4px 14px;
}
.mdrg-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gold-deep);
	background: var(--gold-soft);
	box-shadow: 0 0 0 1px rgba(168, 121, 42, .45) inset, 0 0 12px rgba(255, 162, 0, .3);
}
.mdrg-ico svg { width: 17px; height: 17px; display: block; }
.mdrg-ttl { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.mdrg-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.mdrg-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-soft); overflow-wrap: anywhere; }
.mdrg-close {
	display: none;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin: -4px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	font: 20px/28px Arial, sans-serif;
	cursor: pointer;
}
.mdrg-close:hover, .mdrg-close:focus-visible { background: rgba(28, 18, 13, .12); color: var(--ink); outline: none; }
.mdrg-pinned .mdrg-close { display: block; }

/* ------------------------------------------------------------------ the tick */

.mdrg-regen {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 14px 10px;
}
.mdrg-clock {
	position: relative;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	margin-bottom: 12px;      /* room for the words under the ring */
}
.mdrg-clock svg { position: absolute; inset: 0; width: 72px; height: 72px; display: block; }
.mdrg-ring-bg { fill: none; stroke: var(--track); stroke-width: 5; }
.mdrg-ring-fg {
	fill: none;
	stroke: var(--gold);
	stroke-width: 5;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .5s linear;
	filter: drop-shadow(0 0 3px var(--glow));
}
.mdrg-digits {
	position: absolute;
	left: 0; right: 0; top: 50%;
	transform: translateY(-50%);
	text-align: center;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.mdrg-clock-l {
	position: absolute;
	left: -10px; right: -10px; top: 100%;
	margin-top: 2px;
	text-align: center;
	font-size: 9.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
	white-space: nowrap;
}

/* the four pays: what a tick adds, the stat's short name, how full it is */
.mdrg-pay {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 8px;
}
.mdrg-ps {
	position: relative;
	padding: 6px 8px 7px;
	border-radius: 9px;
	background: var(--tile);
	border: 1px solid rgba(56, 52, 44, .14);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "n l" "m m" "v v";
	column-gap: 6px;
	align-items: baseline;
}
.mdrg-ps b { grid-area: n; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mdrg-ps-l { grid-area: l; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mdrg-ps-m { grid-area: m; display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--track); overflow: hidden; }
.mdrg-ps-m i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 5px var(--glow); }
.mdrg-ps-v { grid-area: v; margin-top: 3px; font-size: 9.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ what sets the beat */

/* plain words, colour-coded, no pills (Mur, 2026-10-07) */
.mdrg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	padding: 0 14px 10px;
}
.mdrg-chip {
	--c: var(--ink-soft);
	display: inline-block;
	font-size: 11px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--c);
	overflow-wrap: anywhere;
}
.mdrg-chip-boon  { --c: var(--ok-text); }
.mdrg-chip-harm  { --c: var(--bad-text); }
.mdrg-chip-world { --c: var(--warn-text); }
.mdrg-chip-guard,
.mdrg-chip-ally  { --c: #3c464f; }
.mdrg-chip-mark  { --c: var(--ink-soft); }

/* ------------------------------------------------------------------ the days */

.mdrg-days {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0 14px;
	padding: 10px 0 8px;
	border-top: 1px solid var(--line);
}
.mdrg-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; min-width: 0; }
.mdrg-big b { font-size: 24px; line-height: 1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mdrg-big-l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mdrg-big-n { flex: 1 0 100%; font-size: 10.5px; color: var(--ink-soft); }
.mdrg-big-b {
	display: inline-block;
	margin-top: 1px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ok-text);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ the two clocks */

.mdrg-rows { padding: 2px 14px 10px; display: grid; row-gap: 9px; }
.mdrg-row {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	grid-template-areas: "l b v" ". s s";
	column-gap: 10px;
	row-gap: 3px;
	align-items: center;
}
.mdrg-row-l { grid-area: l; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.mdrg-row-v { grid-area: v; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 58px; text-align: right; }
.mdrg-row-s { grid-area: s; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.mdrg-row-s svg { width: 11px; height: 11px; flex: 0 0 11px; }
.mdrg-row-s-ok { color: var(--ok-text); }
.mdrg-row-s-warn { color: var(--gold-deep); }
.mdrg-bar {
	grid-area: b;
	display: block;
	height: 7px;
	border-radius: 4px;
	background: var(--track);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(28, 18, 13, .35) inset;
}
.mdrg-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	transition: width .6s linear, background-color .4s ease, box-shadow .4s ease;
}
/* the realm day fills with gold as it runs; the words say how much is left */
.mdrg-row-day .mdrg-bar i { background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 8px var(--glow); }
/* the streak bar drains, and its colour is the danger */
.mdrg-row-safe.mdrg-ok   .mdrg-bar i { background: linear-gradient(90deg, var(--ok-2), var(--ok)); box-shadow: 0 0 8px var(--glow); }
.mdrg-row-safe.mdrg-ok   .mdrg-row-v { color: var(--ok-text); }
.mdrg-row-safe.mdrg-warn .mdrg-bar i { background: linear-gradient(90deg, var(--warn-2), var(--warn)); box-shadow: 0 0 8px rgba(240, 125, 67, .55); }
.mdrg-row-safe.mdrg-warn .mdrg-row-v { color: var(--warn-text); }
.mdrg-row-safe.mdrg-bad  .mdrg-bar i { background: linear-gradient(90deg, var(--bad), var(--bad-2)); box-shadow: 0 0 10px rgba(209, 82, 19, .55); animation: mdrgPulse 1.6s ease-in-out infinite; }
.mdrg-row-safe.mdrg-bad  .mdrg-row-v { color: var(--bad-text); }
@keyframes mdrgPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .62; }
}

/* ------------------------------------------------------------------ foot */

.mdrg-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 14px 9px;
	border-top: 1px solid var(--line);
	background: rgba(28, 18, 13, .05);
	font-size: 10.5px;
	color: var(--ink-faint);
}
.mdrg-realm { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mdrg-help { color: #880000; text-decoration: none; white-space: nowrap; }
.mdrg-help:hover, .mdrg-help:focus-visible { text-decoration: underline; color: #ff6600; }

/* ------------------------------------------------------------------ the sheet (phone, touch) */

.mdrg-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10040;
	background: rgba(28, 18, 13, .5);
	opacity: 0;
	transition: opacity .16s ease;
}
.mdrg-backdrop.mdrg-on { opacity: 1; }

/* left, top, width and max-height are set by the script from window.visualViewport: the game's page
   is often WIDER than the phone, so bottom:0 of the layout viewport can sit below the visible screen */
.mdrg-card.mdrg-sheet {
	max-width: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(16px);
	transform-origin: center bottom;
	border-radius: 16px;
	font-size: 13.5px;
}
.mdrg-card.mdrg-sheet.mdrg-on { transform: none; }
.mdrg-sheet .mdrg-close { flex-basis: 38px; width: 38px; height: 38px; font-size: 24px; line-height: 38px; margin: -6px -6px 0 0; }
.mdrg-sheet .mdrg-name { font-size: 17px; }
.mdrg-sheet .mdrg-sub { font-size: 12px; }
.mdrg-sheet .mdrg-clock { flex-basis: 84px; width: 84px; height: 84px; }
.mdrg-sheet .mdrg-clock svg { width: 84px; height: 84px; }
.mdrg-sheet .mdrg-digits { font-size: 21px; }
.mdrg-sheet .mdrg-ps b { font-size: 16px; }
.mdrg-sheet .mdrg-ps-l, .mdrg-sheet .mdrg-ps-v { font-size: 10.5px; }
.mdrg-sheet .mdrg-chip { font-size: 12px; padding: 4px 9px 5px; }
.mdrg-sheet .mdrg-big b { font-size: 28px; }
.mdrg-sheet .mdrg-big-l, .mdrg-sheet .mdrg-row-l { font-size: 11px; }
.mdrg-sheet .mdrg-row-v { font-size: 15px; }
.mdrg-sheet .mdrg-row-s, .mdrg-sheet .mdrg-big-n, .mdrg-sheet .mdrg-foot { font-size: 12px; }
.mdrg-sheet .mdrg-bar { height: 9px; }

@media (prefers-reduced-motion: reduce) {
	.mdrg-card, .mdrg-backdrop, .mdrg-bar i, .mdrg-ring-fg { transition: none; }
	.mdrg-card, .mdrg-card.mdrg-sheet { transform: none; }
	.mdrg-row-safe.mdrg-bad .mdrg-bar i { animation: none; }
}