/* MAGICDUEL - the companion band (js/md_companion.js; the rule is in its header).
 * z-index 8200: under the Live Help tab (8300 / 8290, css/md_livehelp.css), under the modal mask
 * #popupMask (8400) and #popupContainer (9800). pointer-events none: the game under it stays clickable. */
.mdcomp {
	position: fixed;
	right: 0;
	bottom: 0;
	width: min(60vw, 960px);
	pointer-events: none;
	z-index: 8200;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	display: block;
}
@media (max-width: 1099px) {
	.mdcomp { display: none; }
}
/* THE HEAT CALL (2026-10-22): the hit zone over the creature's body (js/md_companion.js hitUp()). The canvas
 * lets every click through, so this box takes the click: z 8201, above the canvas, under the Live Help tab.
 * Since 2026-10-23 it is up whenever the companion shows, because every click makes the companion play its
 * special move (THE REACTION); the gold halo on hover is full only while a heat call is ready (data-heat="1",
 * data-rest="0"), faint otherwise. */
.mdcomp-hit {
	position: fixed;
	z-index: 8201;
	cursor: pointer;
	pointer-events: auto;
	background: transparent;
	border-radius: 50%;
	transition: box-shadow .25s ease-out;
}
.mdcomp-hit:hover { box-shadow: 0 0 14px 3px rgba(255, 194, 10, .12); }
.mdcomp-hit[data-heat="1"][data-rest="0"]:hover { box-shadow: 0 0 22px 6px rgba(255, 194, 10, .28); }
.mdcomp-hit.busy { pointer-events: none; }
@media (max-width: 1099px) {
	.mdcomp-hit { display: none; }
}
/* THE CUE (2026-10-22): a tiny glowing dot drifting around the companion while it can be clicked for heat and the
 * player holds active heat (js/md_companion.js cueTick()). Design only: never clickable. Drawn in CSS so it needs
 * no skin image; it looks like a heat orb, a third of the size. */
.mdcomp-cue {
	position: fixed;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 8201;
	background: radial-gradient(circle at 38% 32%, #fff6c0 0%, #ffcf3a 45%, #ff9a12 75%, #d86a00 100%);
	box-shadow: 0 0 9px 3px rgba(255, 173, 28, .55), inset 0 1px 3px 1px rgba(255, 240, 160, .8);
	animation: mdcomp-cue-breathe 2.6s ease-in-out infinite;
}
@keyframes mdcomp-cue-breathe {
	0%, 100% { transform: scale(.85); opacity: .75; }
	50% { transform: scale(1.15); opacity: 1; }
}
@media (max-width: 1099px) {
	.mdcomp-cue { display: none; }
}