/* ── โหมด AR เก็บเหรียญ ────────────────────────────────────────────────────── */

body.ar-body { background: #000; overflow: hidden; overscroll-behavior: none; }

/* จอ AR คือภาพจากกล้อง จึงบังคับโทนมืดเสมอ ไม่ว่าเว็บจะอยู่โทนสว่างหรือมืด
   (ไม่งั้นพอเว็บเป็นธีมสว่าง ตัวหนังสือจะเป็นสีเข้มทับพื้นดำจนอ่านไม่ออก) */
.ar-stage {
    position: fixed; inset: 0; background: #05100d;
    --paper: #f4efe3;
    --mist: #ccdcd5;
    --mist-dim: #9fb6ad;
    --ink: #05100d;
    --ink-2: #0b1c18;
    --line: rgba(246, 241, 230, .18);
    --line-solid: #1f3b34;
    --ember: #f0b357;
    --ember-soft: #ffe0ac;
    color: var(--mist);
}
.ar-stage h1, .ar-stage h2, .ar-stage h3, .ar-stage b { color: var(--paper); }
#arcam {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: #05100d;
}
.ar-scan {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.6), transparent 18%, transparent 62%, rgba(0,0,0,.78)),
        repeating-linear-gradient(to bottom, rgba(127,227,196,.05) 0 2px, transparent 2px 5px);
}
.ar-crosshair {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 46vmin; height: 46vmin; pointer-events: none; z-index: 3;
    border: 1px dashed rgba(127,227,196,.22); border-radius: 50%;
}
.ar-crosshair::after {
    content: ''; position: absolute; inset: 32%; border: 1px solid rgba(127,227,196,.14); border-radius: 50%;
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.ar-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; gap: .7rem; align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
}
.ar-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .95rem; border-radius: 100px;
    border: 1px solid rgba(127,227,196,.3); background: rgba(5,16,13,.6);
    backdrop-filter: blur(10px);
    font-family: var(--font-meta); font-size: .76rem; letter-spacing: .08em; color: #dff5ec;
}
.ar-chip b { color: var(--ember); }
.ar-chip.warn { border-color: rgba(232,163,61,.5); }

.ar-target {
    position: absolute; top: 4.6rem; left: 50%; transform: translateX(-50%);
    z-index: 10; text-align: center; width: min(520px, 92vw);
}
.ar-target b {
    display: block; font-family: var(--font-display); font-size: 1.35rem; color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.9);
}
.ar-target span {
    font-family: var(--font-meta); font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(223,245,236,.72);
}

/* ── เหรียญที่ลอยอยู่ ─────────────────────────────────────────────────────── */
.ar-world { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.token {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    background: none; border: 0; padding: 0;
    display: grid; justify-items: center; gap: .4rem;
    transition: opacity .3s;
    animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 50% { margin-top: -14px; } }
.token .disc {
    width: var(--sz, 76px); height: var(--sz, 76px);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: calc(var(--sz, 76px) * 0.42);
    background: radial-gradient(circle at 34% 30%, #fff8e6, var(--tc, #e8a33d) 58%, color-mix(in srgb, var(--tc,#e8a33d) 60%, #000) 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 14px 34px -10px var(--tc, #e8a33d), inset 0 -6px 14px rgba(0,0,0,.28);
    position: relative;
}
.token .disc i {
    font-size: inherit; line-height: 1;
    color: color-mix(in srgb, var(--tc, #e8a33d) 30%, #1a1206);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.token .disc::after {
    content: ''; position: absolute; inset: -14px; border-radius: 50%;
    border: 1px solid var(--tc, #e8a33d); opacity: .35;
    animation: halo 2.4s ease-out infinite;
}
@keyframes halo { to { transform: scale(1.5); opacity: 0; } }
.token .lbl {
    font-family: var(--font-meta); font-size: .68rem; letter-spacing: .1em;
    padding: .25rem .6rem; border-radius: 100px;
    background: rgba(5,16,13,.72); border: 1px solid rgba(255,255,255,.16);
    color: #dff5ec; white-space: nowrap;
}
.token.far { opacity: .5; filter: grayscale(.55); }
.token.far .disc { box-shadow: none; }
.token.ready .disc { animation: ready-pulse 1.1s ease-in-out infinite; }
@keyframes ready-pulse {
    50% { box-shadow: 0 0 0 8px rgba(255,255,255,.24), 0 18px 44px -8px var(--tc,#e8a33d); transform: scale(1.06); }
}
.token.collected { animation: pop 0.7s var(--ease) forwards; }
@keyframes pop { to { transform: translate(-50%,-160%) scale(1.5); opacity: 0; } }

/* ── เรดาร์ ───────────────────────────────────────────────────────────────── */
.ar-radar {
    position: absolute; left: 1rem; bottom: calc(8.5rem + env(safe-area-inset-bottom));
    width: 108px; height: 108px; z-index: 10;
    border-radius: 50%; border: 1px solid rgba(127,227,196,.28);
    background: rgba(5,16,13,.55); backdrop-filter: blur(8px);
}
.ar-radar::before, .ar-radar::after {
    content: ''; position: absolute; inset: 24%; border: 1px solid rgba(127,227,196,.16); border-radius: 50%;
}
.ar-radar::after { inset: 44%; }
.ar-radar .me {
    position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px;
    border-radius: 50%; background: #7fe3c4; box-shadow: 0 0 10px #7fe3c4;
}
.ar-radar .blip {
    position: absolute; width: 8px; height: 8px; margin: -4px;
    border-radius: 50%; background: var(--tc, #e8a33d);
}
.ar-radar .n {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-meta); font-size: .55rem; color: rgba(223,245,236,.6);
}

/* ── แถบล่าง ─────────────────────────────────────────────────────────────── */
.ar-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
    padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(5,16,13,.94), transparent);
}
.ar-list {
    display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem;
    scrollbar-width: none;
}
.ar-list::-webkit-scrollbar { display: none; }
.ar-item {
    flex: 0 0 auto; min-width: 168px; text-align: left;
    padding: .7rem .9rem; border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.14); background: rgba(5,16,13,.7);
    backdrop-filter: blur(10px); color: #dff5ec;
    transition: all .3s var(--ease);
}
.ar-item.on { border-color: var(--ember); background: rgba(232,163,61,.14); }
.ar-item.done { opacity: .5; }
.ar-item b { display: block; font-family: var(--font-display); font-size: 1rem; color: #fff; }
.ar-item small { font-family: var(--font-meta); font-size: .7rem; letter-spacing: .08em; }
.ar-item .d { color: var(--ember); }
.ar-item.near .d { color: #7fe3c4; }

/* ── ปุ่มเก็บ ─────────────────────────────────────────────────────────────── */
.ar-collect {
    position: absolute; left: 50%; bottom: calc(9.5rem + env(safe-area-inset-bottom));
    transform: translateX(-50%); z-index: 12;
    padding: 1rem 2.2rem; border-radius: 100px; border: 0;
    background: linear-gradient(135deg, #f5d99b, #e8a33d);
    color: #07120f; font-family: var(--font-meta); font-weight: 700; font-size: 1rem;
    box-shadow: 0 16px 40px -12px rgba(232,163,61,.8);
    animation: rise 0.5s var(--ease);
}
.ar-collect[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ── หน้าจอขออนุญาต / ผลลัพธ์ ────────────────────────────────────────────── */
.ar-gate {
    position: absolute; inset: 0; z-index: 20;
    display: grid; place-items: center; text-align: center;
    background: radial-gradient(70% 70% at 50% 40%, #0c2b24, #04100d);
    padding: 2rem;
}
.ar-gate[hidden] { display: none; }
.ar-gate h2 { font-size: clamp(1.6rem, 5vw, 2.6rem); margin: 0 0 .6rem; }
.ar-gate p { color: var(--mist-dim); max-width: 42ch; margin: 0 auto 1.6rem; }
.ar-gate .ico { font-size: 3rem; margin-bottom: 1rem; }

.ar-reward {
    position: absolute; inset: 0; z-index: 22;
    display: grid; place-items: center; text-align: center;
    background: radial-gradient(60% 60% at 50% 45%, rgba(232,163,61,.22), rgba(4,16,13,.94));
    animation: fade-in .4s ease;
}
.ar-reward[hidden] { display: none; }
.ar-reward .coin {
    width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 1.4rem;
    display: grid; place-items: center; font-size: 3.4rem;
    background: radial-gradient(circle at 34% 30%, #fff8e6, var(--tc,#e8a33d) 60%, #a86a1f);
    box-shadow: 0 0 0 6px rgba(255,255,255,.16), 0 24px 60px -14px var(--tc,#e8a33d);
    animation: coin-spin 1.1s var(--ease);
}
@keyframes coin-spin { from { transform: rotateY(540deg) scale(.4); opacity: 0; } }
.ar-reward h2 { font-size: clamp(1.8rem, 6vw, 3rem); margin: 0 0 .3rem; }
.ar-reward .pts { font-family: var(--font-display); font-size: 3rem; color: var(--ember); line-height: 1; }

.spark {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    pointer-events: none; z-index: 21;
}