:root {
  --color-state: rgba(0, 0, 0, 0.1);
}
html.dark {
  --color-state: rgba(255, 255, 255, 0.15);
}

html,body{margin:0;height:100%;background:#ffffff;-webkit-tap-highlight-color:transparent}
html.dark,html.dark body{background:#000000}
#splash{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:1;transition:opacity .35s ease;display:flex;flex-direction:column;align-items:center;padding:9vh 20px 0;box-sizing:border-box}
.splash-top{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.splash-icon{display:block;width:44px;height:44px;background-color:#3e84f7;-webkit-mask:url(../img/mobile-arrow-down.svg) center/contain no-repeat;mask:url(../img/mobile-arrow-down.svg) center/contain no-repeat}
html.dark .splash-icon{background-color:#9ab4ff}
.splash-top p{margin:0;font-size:22px;font-weight:400;font-family:system-ui,-apple-system,sans-serif;color:#202124;line-height:1.4}
html.dark .splash-top p{color:#ffffff}
/* Sizes are fixed in CSS px (dp), like the Google "Checking info" screen, so they stay the same
   physical size when the display density / smallest width changes. */
#splash .splash-icon,#load-error .splash-icon{width:28px;height:28px}
#splash .spinner{position:absolute;left:50%;top:57%;width:220px;height:220px;max-width:62vmin;max-height:62vmin;transform:translate(-50%,-50%);display:block}

/* Wide / high-dp viewports (e.g. smallest width ~500dp): content sits in a centered card */
@media (min-width:480px) and (min-height:560px){
  #splash{inset:auto;top:50%;left:50%;width:min(93vw,466px);height:min(51vh,560px);transform:translate(-50%,-50%);padding:0 20px;justify-content:center;background:#ffffff;box-shadow:0 2px 14px rgba(0,0,0,.28)}
  html.dark #splash{background:#121212;box-shadow:0 0 0 1px #2a2a2a,0 2px 14px rgba(0,0,0,.6)}
  #splash .splash-icon{width:24px;height:24px}
  #splash .spinner{position:static;transform:none;margin-top:28px}
}

#load-error{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:9vh 20px 20px;box-sizing:border-box;text-align:center;font-family:system-ui,-apple-system,sans-serif;background:#ffffff}
html.dark #load-error{background:#000000}
#load-error.visible{display:flex}
#load-error .splash-top{gap:8px}
#load-error .err-title{margin:0;font-size:24px;font-weight:500;color:#202124;line-height:1.4}
html.dark #load-error .err-title{color:#ffffff}
#load-error .err-hint{margin:8px 0 0 0;font-size:16px;font-weight:400;color:#5f6368;line-height:1.4}
html.dark #load-error .err-hint{color:#c4c7c5}
#load-error .err-reason{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:#5f6368;word-break:break-word}
html.dark #load-error .err-reason{color:#c4c7c5}

#load-error button{
  --color-state: rgba(255, 255, 255, 0.28);
  position: absolute;
  right: 20px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 9px 24px;
  min-width: 72px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background-color: #1a73e8;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}
#load-error button:hover,
#load-error button:focus,
#load-error button:active,
#load-error button:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#load-error button:hover{
  background-color: #1765cc;
}
html.dark #load-error button{
  --color-state: rgba(0, 0, 0, 0.18);
  color: #202124;
  background-color: #8ab4f8;
}
html.dark #load-error button:hover{
  background-color: #a1c2fa;
}
#splash.fade-out{opacity:0}
@media (prefers-reduced-motion:reduce){#splash{transition:none}}

/* Error screen: same card layout as the splash on wide / high-dp viewports */
@media (min-width:480px) and (min-height:560px){
  #load-error{inset:auto;top:50%;left:50%;width:min(93vw,466px);height:min(51vh,560px);transform:translate(-50%,-50%);padding:0 20px;justify-content:center;background:#ffffff;box-shadow:0 2px 14px rgba(0,0,0,.28)}
  html.dark #load-error{background:#121212;box-shadow:0 0 0 1px #2a2a2a,0 2px 14px rgba(0,0,0,.6)}
  #load-error .splash-icon{width:24px;height:24px}
}