/* Camera Guide (beta). Always dark, like a camera app, so the picture stands out. */
.mr-root {
  --mr-pink: #ff2bd6;
  --mr-pink-soft: rgba(255, 43, 214, 0.18);
  --mr-cyan: #38bdf8;
  --mr-red: #ff453a;
  --mr-amber: #ffb020;
  --mr-panel: rgba(22, 22, 26, 0.96);
  --mr-text: #f5f5f7;
  --mr-muted: #a1a1aa;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: #000;
  color: var(--mr-text);
  font: inherit;
  padding-bottom: env(safe-area-inset-bottom);
}
.mr-root.is-open { display: flex; }
html.mr-open, html.mr-open body { overflow: hidden; }

.mr-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: #0b0b0d;
}
.mr-title { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-seg { display: flex; background: #26262b; border-radius: 999px; padding: 3px; }
.mr-seg-btn {
  border: 0; background: transparent; color: var(--mr-muted); font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
.mr-seg-btn.is-on { background: #fff; color: #000; }
.mr-close {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: #26262b; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.mr-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.mr-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr-still { display: none; }
.mr-root.is-paused .mr-still { display: block; }
.mr-root.is-paused video.mr-media { visibility: hidden; }
.mr-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.mr-box rect { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; }
.mr-box text { font-weight: 800; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 5px; vector-effect: non-scaling-stroke; font-family: system-ui, sans-serif; }
.mr-box.is-target rect { stroke: var(--mr-pink); fill: var(--mr-pink-soft); stroke-width: 5; animation: mr-pulse 1.1s ease-in-out infinite; }
.mr-box.is-target text { fill: var(--mr-pink); }
.mr-box.is-known rect { stroke: var(--mr-cyan); stroke-width: 3; stroke-dasharray: 10 6; }
.mr-box.is-known text { fill: var(--mr-cyan); }
.mr-box.is-error rect { stroke: var(--mr-red); fill: rgba(255, 69, 58, 0.15); stroke-width: 5; }
.mr-box.is-error text { fill: var(--mr-red); }
.mr-box.is-info rect { stroke: var(--mr-amber); fill: rgba(255, 176, 32, 0.12); stroke-width: 4; }
.mr-box.is-info text { fill: var(--mr-amber); }
.mr-box.is-word-live rect { stroke: rgba(56, 189, 248, 0.55); stroke-width: 2; }
.mr-box.is-word rect { stroke: rgba(56, 189, 248, 0.9); fill: rgba(56, 189, 248, 0.08); stroke-width: 2; cursor: pointer; }
.mr-box.is-word.is-picked rect { stroke: var(--mr-pink); fill: rgba(255, 43, 214, 0.3); stroke-width: 3; }
.mr-box.is-guessed rect { stroke-dasharray: 12 7; }
@keyframes mr-pulse { 50% { stroke-opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .mr-box.is-target rect { animation: none; } }

.mr-scanbar {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--mr-pink), transparent);
  opacity: 0; pointer-events: none;
}
.mr-root.is-reading .mr-scanbar { opacity: 0.9; animation: mr-scan 1.6s linear infinite; }
@keyframes mr-scan { from { top: 0; } to { top: 100%; } }
.mr-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 0.82rem;
  white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.mr-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mr-empty > * { pointer-events: auto; }
.mr-bigbtn {
  border: 0; border-radius: 14px; background: #fff; color: #000; font: inherit; font-weight: 700;
  padding: 14px 22px; cursor: pointer;
}

.mr-alert { display: none; }
.mr-alert.is-on {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.9rem;
  background: rgba(255, 69, 58, 0.16); border-top: 3px solid var(--mr-red);
}
.mr-alert.is-info { background: rgba(255, 176, 32, 0.14); border-top-color: var(--mr-amber); }
.mr-alert > div { flex: 1; }
.mr-fix {
  border: 0; border-radius: 10px; background: #fff; color: #000; font: inherit; font-weight: 700;
  padding: 8px 12px; cursor: pointer; white-space: nowrap;
}

.mr-panel {
  background: var(--mr-panel); padding: 12px 14px 10px; max-height: 46vh; overflow-y: auto;
  border-top: 1px solid #2a2a30;
}
.mr-teach { display: none; }
.mr-root.is-teach .mr-teach { display: block; }
.mr-root.is-teach .mr-panel:not(.mr-teach) { display: none; }
.mr-stepno { color: var(--mr-pink); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mr-say { font-size: 1rem; line-height: 1.4; margin: 4px 0 8px; }
.mr-say b { color: #fff; }
.mr-status { font-size: 0.88rem; line-height: 1.4; color: var(--mr-muted); margin-bottom: 10px; min-height: 1.4em; }
.mr-status.is-good { color: #86efac; }
.mr-status.is-bad { color: #fca5a5; }
.mr-status.is-wait { color: var(--mr-muted); }
.mr-status b { color: inherit; }
.mr-row { display: flex; gap: 8px; }
.mr-btn {
  flex: 1; border: 1px solid #3a3a42; background: #26262b; color: #fff; font: inherit; font-weight: 600;
  padding: 11px 10px; border-radius: 12px; cursor: pointer; min-height: 44px;
}
.mr-btn[hidden] { display: none; }
.mr-btn:disabled { opacity: 0.4; cursor: default; }
.mr-btn-main { background: var(--mr-pink); border-color: var(--mr-pink); color: #fff; }
.mr-foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.mr-link, .mr-inline {
  border: 0; background: none; color: var(--mr-cyan); font: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 4px 0; cursor: pointer; text-decoration: underline;
}
.mr-link[hidden] { display: none; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mr-chip {
  border: 1px solid var(--mr-pink); background: var(--mr-pink-soft); color: #fff; font: inherit; font-size: 0.82rem;
  font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.mr-privacy { background: #0b0b0d; color: var(--mr-muted); font-size: 0.72rem; text-align: center; padding: 6px 12px; }

/* Teach mode */
.mr-teach-steps { display: grid; gap: 10px; }
.mr-field { display: grid; gap: 4px; font-size: 0.8rem; color: var(--mr-muted); font-weight: 600; }
.mr-field select, .mr-field input {
  font: inherit; font-size: 0.95rem; color: #fff; background: #1f1f24; border: 1px solid #3a3a42;
  border-radius: 10px; padding: 9px 10px; width: 100%; box-sizing: border-box;
}
.mr-field select:disabled { opacity: 0.5; }
.mr-check { font-size: 0.85rem; color: var(--mr-muted); display: flex; gap: 8px; align-items: center; }
.mr-newerr { display: grid; gap: 10px; padding: 10px; border: 1px dashed #4b4b55; border-radius: 12px; }
.mr-newerr[hidden] { display: none; }
.mr-sel { color: #fff; font-size: 0.95rem; font-weight: 600; }
.mr-ok { color: #86efac; font-size: 0.8rem; font-weight: 600; }
.mr-new { color: var(--mr-amber); font-size: 0.8rem; font-weight: 600; }
.mr-admin { font-size: 0.82rem; color: var(--mr-muted); display: grid; gap: 8px; border-top: 1px solid #2a2a30; padding-top: 10px; }

/* PC and tablets: picture on the left, instructions on the right */
@media (min-width: 900px) {
  .mr-root.is-open {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto 1fr auto auto;
  }
  .mr-top { grid-column: 1 / -1; }
  .mr-stage { grid-column: 1; grid-row: 2 / 5; }
  .mr-alert { grid-column: 2; grid-row: 2; align-self: start; }
  .mr-panel { grid-column: 2; grid-row: 3; max-height: none; border-top: 0; border-left: 1px solid #2a2a30; }
  .mr-root.is-teach .mr-teach { grid-row: 2 / 4; }
  .mr-privacy { grid-column: 2; grid-row: 4; }
  .mr-root:not(.is-teach) .mr-alert:not(.is-on) + .mr-panel { grid-row: 2 / 4; }
}