/* 启动页：index.html 里的 #klife-splash，JS 加载前就由这份样式画出（钱包首帧是内联 SVG，Rive 起来前先显示它），应用就绪后由 src/app/launchSplash.ts 接手。
   只在冷启动（<html data-splash>）出现；底色就是页面底色（body），浅色、深色都与状态栏一体。 */
:root { --splash-bg: #f2f2ef; --splash-poster: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 256 256%22%3E%3Cg transform=%22translate(128 134) scale(.94) translate(-128 -128)%22%3E%3Crect x=%2236%22 y=%2284%22 width=%22184%22 height=%22134%22 rx=%2223%22 fill=%22#D6DDD8%22/%3E%3Crect x=%22163%22 y=%22126.5%22 width=%2263%22 height=%2249%22 rx=%2217%22 fill=%22#B6C4BD%22/%3E%3Ccircle cx=%22188%22 cy=%22151%22 r=%229%22 fill=%22#7C8C84%22/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-appearance]) { --splash-bg: #0e0e0f; --splash-poster: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 256 256%22%3E%3Cg transform=%22translate(128 134) scale(.94) translate(-128 -128)%22%3E%3Crect x=%2236%22 y=%2284%22 width=%22184%22 height=%22134%22 rx=%2223%22 fill=%22#555E62%22/%3E%3Crect x=%22163%22 y=%22126.5%22 width=%2263%22 height=%2249%22 rx=%2217%22 fill=%22#717C80%22/%3E%3Ccircle cx=%22188%22 cy=%22151%22 r=%229%22 fill=%22#A4B0AF%22/%3E%3C/g%3E%3C/svg%3E"); } }
:root[data-appearance='light'] { --splash-bg: #f2f2ef; --splash-poster: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 256 256%22%3E%3Cg transform=%22translate(128 134) scale(.94) translate(-128 -128)%22%3E%3Crect x=%2236%22 y=%2284%22 width=%22184%22 height=%22134%22 rx=%2223%22 fill=%22#D6DDD8%22/%3E%3Crect x=%22163%22 y=%22126.5%22 width=%2263%22 height=%2249%22 rx=%2217%22 fill=%22#B6C4BD%22/%3E%3Ccircle cx=%22188%22 cy=%22151%22 r=%229%22 fill=%22#7C8C84%22/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-appearance='dark'] { --splash-bg: #0e0e0f; --splash-poster: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 256 256%22%3E%3Cg transform=%22translate(128 134) scale(.94) translate(-128 -128)%22%3E%3Crect x=%2236%22 y=%2284%22 width=%22184%22 height=%22134%22 rx=%2223%22 fill=%22#555E62%22/%3E%3Crect x=%22163%22 y=%22126.5%22 width=%2263%22 height=%2249%22 rx=%2217%22 fill=%22#717C80%22/%3E%3Ccircle cx=%22188%22 cy=%22151%22 r=%229%22 fill=%22#A4B0AF%22/%3E%3C/g%3E%3C/svg%3E"); }

#klife-splash { display: none; }

:root[data-splash] #klife-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  pointer-events: none;
}

:root[data-splash] body { background: var(--splash-bg); }

/* The page waits inside a circle at the wallet's centre (smaller than the wallet, so its edge never shows) until the door opens. */
:root[data-splash] #root { clip-path: circle(var(--splash-r, 40px) at var(--splash-x, 50vw) var(--splash-y, 50vh)); }

/* Square box for the 256-unit Rive artboard (钱包). The static first frame is drawn here until the Rive canvas (src/app/launchSplash.ts) takes over. */
.klife-splash__logo {
  position: relative;
  width: 168px;
  height: 168px;
  background: center / contain no-repeat var(--splash-poster);
  will-change: transform, opacity;
}

.klife-splash__logo > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}