/* kiosk — one phone screen, big targets, nothing to learn */

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(40rem 26rem at 70% -10%, #ec489914, transparent 60%),
        #0d0f14;
    color: #e8e9ee;
    font: 17px/1.5 -apple-system, Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.wrap { width: min(22rem, 92vw); text-align: center; padding: 2rem 0; }
.glyph { font-size: 3rem; }
.shop {
    font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #8b8f99; margin: 0.4rem 0 1.6rem;
}
h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 0.8rem; }
.dim { color: #8b8f99; }
.status { margin: 0 0 1.4rem; }
.notice {
    background: #f59e0b22; border: 1px solid #f59e0b55; color: #fcd34d;
    border-radius: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.9rem;
}

input {
    width: 100%; font-size: 1.6rem; text-align: center; letter-spacing: 0.35em;
    color: #e8e9ee; background: #23252d;
    border: 1px solid #2e313a; border-radius: 0.6rem;
    padding: 0.7rem; margin: 0.4rem 0 1rem;
}
input:focus { outline: none; border-color: #ec4899; }

.big {
    display: block; width: 100%;
    font: inherit; font-size: 1.15rem; font-weight: 600;
    padding: 1rem; margin: 0.6rem 0;
    border-radius: 0.7rem; border: 1px solid transparent; cursor: pointer;
}
.big.primary { background: #ec4899; color: #fff; }
.big.ghost   { background: transparent; color: #e8e9ee; border-color: #2e313a; }
.big.ghost.warn { color: #fcd34d; border-color: #f59e0b55; }
.big:active  { transform: scale(0.985); }
.big:disabled { opacity: 0.5; }

.bigtick {
    font-size: 4rem; line-height: 1; color: #22c55e; margin-bottom: 0.8rem;
    animation: pop 0.35s ease;
}
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.locbtn {
    margin-top: 1.6rem;
    font: inherit; font-size: 0.82rem;
    color: #8b8f99; background: transparent;
    border: 1px dashed #2e313a; border-radius: 999px;
    padding: 0.35rem 0.9rem; cursor: pointer;
}
.locbtn:disabled { opacity: 0.5; }

.counter {
    font-size: 3rem; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em; margin: 0.4rem 0 0.1rem; color: #f9a8d4;
}
.rescan { margin-top: 2rem; font-size: 0.88rem; }

/* in-page camera scanner */
.cam { position: fixed; inset: 0; z-index: 10; background: #000;
       display: flex; align-items: center; justify-content: center; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam .frame {
    position: relative; width: min(64vw, 17rem); aspect-ratio: 1;
    border: 3px solid #ec4899; border-radius: 1rem;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
.cam #camx {
    position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
    font: inherit; font-size: 1rem; color: #e8e9ee; cursor: pointer;
    background: rgba(13, 15, 20, 0.72); border: 1px solid #2e313a;
    border-radius: 999px; padding: 0.7rem 2.2rem;
}
.rescan { margin-top: 2rem; }
.rescan p { margin-bottom: 0.6rem; font-size: 0.88rem; }