:root{
  --bg:rgba(15,23,42,.82);
  --accent:#ffd166;
  --text:#fff;
  font-family:"Noto Sans Thai","Sarabun",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--text)}

.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:20px}
.card-ui{background:var(--bg);backdrop-filter:blur(8px);border-radius:20px;padding:24px;max-width:380px;width:100%;text-align:center}
.card-ui h1{font-size:1.3rem;margin:.4em 0}
.card-ui h2{font-size:1.15rem;margin:.2em 0 .6em}
.card-ui ol{text-align:left;margin:12px auto 18px;padding-left:1.4em;line-height:1.9}
.card-ui .icon{width:56px;height:56px}
.card-ui .note{font-size:.8rem;opacity:.7;margin:14px 0 0}

button{font:inherit;font-weight:700;background:var(--accent);color:#222;border:0;border-radius:999px;
  padding:12px 32px;font-size:1.05rem;cursor:pointer}
button:active{transform:scale(.97)}

.hud{position:fixed;left:50%;transform:translateX(-50%);z-index:10;background:var(--bg);
  padding:10px 18px;border-radius:999px;font-size:.95rem;max-width:92vw;text-align:center;
  transition:opacity .25s}
#hint{top:max(16px,env(safe-area-inset-top))}
#info{bottom:max(20px,env(safe-area-inset-bottom));border-radius:18px;display:flex;flex-direction:column;gap:2px;min-width:70vw}
#info strong{color:var(--accent)}
.hidden{display:none !important}

/* ให้วิดีโอกล้องเต็มจอ */
.a-canvas{z-index:1}
video{object-fit:cover}