/* The screen guide dialog: the numbered picture on the left, the list on the right, the tips switch below.
   On a phone the list follows the picture. Same dark glass as the feedback form. */
#screen-guide { position: fixed; inset: 0; margin: auto; width: min(1040px, calc(100% - 24px)); height: min(820px, calc(100dvh - 24px)); padding: 0;
  display: none; flex-direction: column; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: #0f141d; color: #cbd5e1;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); font-family: inherit; overflow: hidden; }
#screen-guide[open] { display: flex; }
#screen-guide::backdrop { background: rgba(4, 6, 10, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sg-top h2 { margin: 0 0 4px; color: #fff; font: 400 1.35rem/1.25 Georgia, "Times New Roman", serif; }
.sg-lead { margin: 0; color: #94a3b8; font-size: .9rem; }
.sg-close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.sg-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 20px 32px; align-items: start; padding: 20px 24px; }
.sg-figure { position: sticky; top: 0; margin: 0; }
.sg-frame { position: relative; container-type: inline-size; }
.sg-frame img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: #05070c; }
.sg-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sg-dots li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: auto; }
.sg-dot { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  /* The dots grow with the picture: about 15 px on a small phone, up to 26 px on a desktop. */
  width: clamp(15px, 4.6cqi, 26px); height: clamp(15px, 4.6cqi, 26px); border-radius: 50%; background: #38bdf8; color: #04121d;
  font: 700 clamp(9px, 2.5cqi, 14px)/1 inherit; box-shadow: 0 0 0 2px rgba(5, 7, 12, .85), 0 0 10px rgba(56, 189, 248, .7); }
.sg-figure figcaption { margin-top: 10px; color: #64748b; font-size: .78rem; line-height: 1.45; text-align: center; }
.sg-key { margin: 0; padding: 0; list-style: none; counter-reset: sg; display: grid; gap: 11px; }
.sg-key li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; color: #cbd5e1; font-size: .88rem; line-height: 1.5; border-radius: 10px; }
.sg-n { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(56, 189, 248, .14); border: 1px solid rgba(56, 189, 248, .5); color: #7dd3fc; font: 700 .7rem/1 inherit; }
.sg-n:hover, .sg-n:focus-visible { background: rgba(56, 189, 248, .32); color: #fff; outline: none; }
.sg-dot:hover, .sg-dot:focus-visible { transform: scale(1.15); outline: none; }
/* A jump lands with a short pulse, so the eye finds the part at once. */
.sg-dot.flash { animation: sg-flash 1.6s ease; }
@keyframes sg-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); } 20% { box-shadow: 0 0 0 10px rgba(56, 189, 248, .35); } }
.sg-key li.flash { animation: sg-row 1.8s ease; }
@keyframes sg-row { 0% { background: rgba(56, 189, 248, .22); } 100% { background: rgba(56, 189, 248, 0); } }
@media (prefers-reduced-motion: reduce) { .sg-dot.flash, .sg-key li.flash { animation: none; } }
.sg-key strong { display: block; color: #f1f5f9; font-weight: 600; }
.sg-foot { padding: 12px 24px 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.sg-tips { display: inline-flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: .88rem; cursor: pointer; }
.sg-tips input { width: 18px; height: 18px; accent-color: #38bdf8; }
#btn-help-mode.tips-on { color: #7dd3fc; }
/* Tablets and narrow windows: the picture on top, centred, the list underneath in two columns. */
@media (max-width: 1000px) {
  .sg-body { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .sg-figure { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
  .sg-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
}
/* Phones: one column. */
@media (max-width: 640px) {
  .sg-body { padding: 16px; }
  .sg-key { grid-template-columns: minmax(0, 1fr); }
  .sg-top, .sg-foot { padding-left: 16px; padding-right: 16px; }
}