:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #153044;
  background: #eef5f8;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { min-height: 100svh; }

button { font: inherit; }

.app { min-height: 100svh; }

.screen {
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.scanner-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand {
  align-self: flex-start;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  color: #35627d;
}

h1 {
  margin: 5vh 0 8px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.25;
}

.guide {
  margin: 0 0 24px;
  font-size: clamp(17px, 2.5vw, 24px);
  color: #526b7a;
}

#reader {
  width: min(76vw, 620px);
  min-height: min(62vw, 500px);
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 28px;
  background: #10212d;
  box-shadow: 0 16px 48px rgba(20, 56, 78, .18);
}

#reader video { object-fit: cover; border-radius: 18px; }

/* 前面カメラは表示だけ鏡像化します。QR解析用の元映像には影響しません。 */
#reader[data-facing="user"] video { transform: scaleX(-1) !important; }
#reader[data-facing="other"] video { transform: none !important; }
#reader img { display: none; }
#reader__dashboard_section_csr button,
#reader__dashboard_section_swaplink { font-size: 18px !important; }

.camera-status {
  min-height: 1.5em;
  margin: 20px 0 0;
  font-size: clamp(17px, 2.2vw, 22px);
  color: #526b7a;
}

.retry-button {
  margin-top: 14px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #123b5d;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.result-screen {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: #e9f8ef;
}

.result-screen[data-tone="exit"] { background: #eaf3fc; }
.result-screen[data-tone="warning"] { background: #fff6dc; }
.result-screen[data-tone="error"] { background: #fdebec; }

.result-icon {
  display: grid;
  place-items: center;
  width: clamp(96px, 15vw, 150px);
  height: clamp(96px, 15vw, 150px);
  margin-bottom: 26px;
  border-radius: 50%;
  background: #12834b;
  color: #fff;
  font-size: clamp(58px, 9vw, 90px);
  font-weight: 800;
}

[data-tone="exit"] .result-icon { background: #176da8; }
[data-tone="warning"] .result-icon { background: #d18a00; }
[data-tone="error"] .result-icon { background: #c63e48; }

.result-name {
  min-height: 1.4em;
  margin: 0 0 12px;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 700;
}

.result-message {
  margin: 0;
  max-width: 900px;
  font-size: clamp(38px, 7vw, 78px);
  line-height: 1.25;
}

.result-time {
  min-height: 1.2em;
  margin: 18px 0 0;
  font-size: clamp(44px, 8vw, 86px);
  font-weight: 800;
}

.return-message {
  margin: 32px 0 0;
  color: #526b7a;
  font-size: clamp(16px, 2vw, 21px);
}

[hidden] { display: none !important; }

@media (orientation: landscape) and (max-height: 720px) {
  h1 { margin-top: 2vh; font-size: 34px; }
  .guide { margin-bottom: 12px; }
  #reader { width: min(52vw, 520px); min-height: 360px; }
  .camera-status { margin-top: 10px; }
}