:root { --gold: #f6c56a; --gold2: #ffdf9a; --ink: #0b0806; }
* { box-sizing: border-box; }
html { background: var(--ink); }
/* body stays transparent so MindAR's camera <video> (negative z-index) shows through */
html, body { margin: 0; height: 100%; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Myanmar", "Myanmar Text", sans-serif; overflow: hidden; }
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #3a2410 0%, #140c06 55%, #070504 100%); }
.screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(4px 4px at 12% 30%, #ffb34788, transparent), radial-gradient(3px 3px at 80% 18%, #ffcf7a99, transparent),
              radial-gradient(5px 5px at 68% 72%, #ff9a3c77, transparent), radial-gradient(3px 3px at 25% 82%, #ffd58a88, transparent); }
.card { position: relative; width: 100%; max-width: 380px; text-align: center; padding: 26px 22px 20px; border-radius: 22px;
  background: linear-gradient(180deg, #1d140bcc, #0e0906ee); border: 1px solid #f6c56a55; box-shadow: 0 0 40px #ff9d2e33, inset 0 0 30px #f6c56a14; }
.logo { height: 40px; filter: brightness(0) invert(1); opacity: .95; }
.title { display: block; width: 92%; margin: 14px auto 8px; filter: drop-shadow(0 0 14px #ff9d2e88); }
.mm { font-size: 15px; line-height: 1.7; margin: 6px 0 2px; color: var(--gold2); }
.en { font-size: 14px; margin: 2px 0 16px; color: #e9dcc8; }
.small { font-size: 11.5px; color: #b9a78f; margin: 14px 0 0; }
.big { font-size: 44px; }
h2 { margin: 8px 0; color: var(--gold2); font-size: 20px; }
.btn { appearance: none; border: 0; width: 100%; padding: 15px 18px; border-radius: 999px; font-size: 16px; font-weight: 700; color: #2a1704; cursor: pointer;
  background: linear-gradient(180deg, #ffe7a8, #f4b94e 55%, #d98e1f); box-shadow: 0 6px 22px #ff9d2e55, inset 0 1px 0 #fff8; font-family: inherit; }
.btn:active { transform: translateY(1px); }
.hint { position: fixed; z-index: 10; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; }
.hint .frame { position: relative; width: 70vw; max-width: 340px; aspect-ratio: 3 / 2; margin: 0 auto 14px; animation: pulse 1.8s ease-in-out infinite; }
.hint .frame i { position: absolute; width: 34px; height: 34px; border: 3px solid var(--gold); }
.hint .frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.hint .frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.hint .frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.hint .frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.hint p { margin: 2px; text-shadow: 0 1px 6px #000; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04); opacity: .6; } }
.loading { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: #0b0806aa; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #f6c56a33; border-top-color: var(--gold); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* MindAR puts its <video> behind the canvas; keep both full-screen. */
a-scene, .a-canvas { position: fixed !important; inset: 0; }
.a-enter-vr, .a-enter-ar { display: none !important; }