/************************************************************************************/
/*	Built-in help (MGhelp.php) and the guided tour (script/MGtour.js)				*/
/*	Font and sizes are set here on purpose: the game pages (MGStyles.css) reset		*/
/*	headings and paragraphs and use a small 11px body font.							*/
/************************************************************************************/
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the "?" button at the bottom left; a dot until this page's help was opened */
.help-fab { position: fixed; z-index: 60; left: 1.2rem; bottom: 1.2rem; width: 44px; height: 44px; padding: 0; border-radius: 50%;
			border: 1px solid #fff; background: #000; color: #fff; font: 700 20px/1 'Segoe UI', Roboto, Arial, sans-serif; cursor: pointer;
			box-shadow: 0 4px 16px rgba(0, 0, 0, .55); transition: background .15s, color .15s, transform .15s; }
.help-fab:hover, .help-fab:focus-visible, .help-fab[aria-expanded="true"] { background: #e8590c; border-color: #e8590c; outline: none; }
.help-fab:hover { transform: translateY(-2px); }
.help-fab.is-new::after { content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
						  background: #e8590c; box-shadow: 0 0 0 2px #000; }
@media (prefers-reduced-motion: no-preference) {
	.help-fab.is-new { animation: help-pulse 2.4s ease-in-out 3; }
	@keyframes help-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 0 0 rgba(232, 89, 12, .55); }
							50% { box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 0 10px rgba(232, 89, 12, 0); } }
}

/* the panel with the steps, above the button */
.help-panel, .tour-card { font: 400 15px/1.5 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #c9d1dc; text-align: left; }
.help-panel { position: fixed; z-index: 61; left: 1.2rem; bottom: calc(1.2rem + 54px); width: min(400px, calc(100vw - 2.4rem));
			  max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
			  background: #161a22; border: 1px solid #3a4250; border-top: 4px solid #e8590c; border-radius: 8px;
			  box-shadow: 0 12px 40px rgba(0, 0, 0, .7); padding: 1rem 1.1rem 1.1rem; }
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.help-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.help-close, .tour-x { width: 28px; height: 28px; flex: none; padding: 0; background: none; border: 1px solid #3a4250; border-radius: 4px; color: #fff;
					   font: 18px/1 Arial, sans-serif; cursor: pointer; }
.help-close:hover, .tour-x:hover { border-color: #fff; }
/* the rules of the game: first item of the panel */
.help-rules { margin: .7rem 0 .4rem; border: 1px solid #3a4250; border-radius: 6px; background: #1f2530; }
.help-rules summary { padding: .55rem .7rem; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px; list-style-position: inside; }
.help-rules summary:hover, .help-rules summary:focus-visible { color: #f59f6b; outline: none; }
.help-rules ol { margin: 0; padding: 0 .9rem .7rem 2rem; font-size: 14px; }
.help-rules li { margin: .25rem 0; }
.help-sub { margin: .9rem 0 0; color: #8b95a5; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.help-intro { margin: .5rem 0 .8rem; font-size: 14px; }
.help-steps { list-style: none; counter-reset: help; margin: 0; padding: 0; display: grid; gap: .35rem; }
.help-steps li { counter-increment: help; }
.help-step { display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .5rem; width: 100%; padding: .5rem .55rem; text-align: left;
			 background: none; border: 1px solid transparent; border-radius: 6px; color: #c9d1dc; font: 400 14px/1.45 'Segoe UI', Roboto, Arial, sans-serif; cursor: pointer; }
.help-step::before { content: counter(help); grid-row: span 2; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid #e8590c;
					 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.help-step strong { color: #fff; font-weight: 700; }
.help-step:hover, .help-step:focus-visible { border-color: #3a4250; background: #1f2530; outline: none; }
.help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .9rem; }
.help-hint { color: #8b95a5; font-size: 13px; }
.help-btn { padding: 8px 14px; border: 1px solid #e8590c; border-radius: 6px; background: #e8590c; color: #fff;
			font: 700 14px/1.2 'Segoe UI', Roboto, Arial, sans-serif; cursor: pointer; }
.help-btn:hover { background: #c44a08; border-color: #c44a08; }
.help-btn.outline { background: none; color: #fff; border-color: #3a4250; }
.help-btn.outline:hover { border-color: #fff; }
.help-btn:focus-visible, .help-step:focus-visible, .help-close:focus-visible { outline: 3px solid #f59f6b; outline-offset: 1px; }

/* the tour: the page dimmed except the highlighted part, and a card with the explanation */
.tour-shade { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tour-shade.is-dark { background: rgba(0, 0, 0, .62); }
.tour-spot { position: fixed; z-index: 901; pointer-events: none; border: 2px solid #e8590c; border-radius: 6px;
			 box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); transition: left .25s, top .25s, width .25s, height .25s; }
.tour-spot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-card { position: fixed; z-index: 902; background: #161a22; border: 1px solid #e8590c; border-radius: 8px; padding: .9rem 1rem 1rem;
			 box-shadow: 0 12px 40px rgba(0, 0, 0, .7); outline: none; }
.tour-card .tour-x { position: absolute; top: .55rem; right: .55rem; }
.tour-count { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8b95a5; padding-right: 2rem; }
.tour-card h3 { margin: .25rem 2rem .35rem 0; color: #fff; font-size: 16px; font-weight: 700; }
.tour-card p { margin: 0 0 .9rem; font-size: 14px; line-height: 1.5; }
.tour-btns { display: flex; justify-content: space-between; gap: .5rem; }

@media (max-width: 720px) {
	.help-fab { left: .8rem; bottom: .8rem; width: 40px; height: 40px; font-size: 18px; }
	.help-panel { left: .8rem; right: .8rem; width: auto; bottom: calc(.8rem + 50px); }
}
@media print { .help-fab, .help-panel { display: none !important; } }