/* Check-in kiosk (iPad at the entrance). Dark leather look, large type, clear states. */
.kiosk-body{--k-bg:#0d0d0c;--k-panel:#171614;--k-line:rgba(244,237,225,.14);--k-muted:#a9a194;--k-green:#1d8a4a;--k-green-d:#0b4a27;--k-amber:#d9930f;--k-amber-d:#7a4c02;--k-red:#c42b22;--k-red-d:#5e0d09;
  margin:0;height:100vh;height:100dvh;overflow:hidden;color:var(--cream);background:radial-gradient(120% 90% at 20% 0%,#1e1c19 0%,var(--k-bg) 60%);font-family:var(--body)}
.kiosk-body::before{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.55;pointer-events:none;z-index:0}
.kiosk{position:fixed;inset:0;z-index:1;display:grid;grid-template-rows:auto 1fr auto;padding:max(20px,env(safe-area-inset-top)) 32px max(20px,env(safe-area-inset-bottom))}
.k-muted{color:var(--k-muted)}
.k-small{font-size:.92rem}

/* top */
.k-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1.5px dashed var(--k-line)}
.k-brand{display:flex;gap:14px;align-items:center}
.k-brand img{width:64px;height:64px}
.k-brand b{display:block;font:400 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.k-brand span{font:600 .95rem var(--body);color:var(--k-muted);letter-spacing:.08em;text-transform:uppercase}
.k-time{text-align:right}
.k-time span{display:block;font:400 3rem/1 var(--display);letter-spacing:.02em}
.k-time small{font:600 1rem var(--body);color:var(--k-muted);text-transform:capitalize}

/* main */
.k-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;align-items:stretch;padding:22px 0;min-height:0}
.k-cam{position:relative;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 1px var(--k-line);min-height:0}
.k-cam video{width:100%;height:100%;object-fit:cover;display:block}
.k-cam.mirror video{transform:scaleX(-1)}
.k-frame{position:absolute;inset:15% 22%;pointer-events:none}
.k-frame i{position:absolute;width:56px;height:56px;border:5px solid var(--cream);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.k-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:16px}
.k-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:16px}
.k-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:16px}
.k-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:16px}
.k-scanline{position:absolute;left:8px;right:8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(244,237,225,.95),transparent);box-shadow:0 0 18px rgba(244,237,225,.8);animation:k-scan 2.4s ease-in-out infinite}
@keyframes k-scan{0%{top:6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:94%;opacity:0}}
.k-ready{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:center;background:rgba(13,13,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--k-line);padding:10px 16px;border-radius:999px;font-weight:700;letter-spacing:.02em}
.k-dot{width:11px;height:11px;border-radius:50%;background:#3ccf73;box-shadow:0 0 0 0 rgba(60,207,115,.7);animation:k-pulse 1.8s infinite}
.k-cam.off .k-dot{background:var(--k-amber);animation:none}
@keyframes k-pulse{70%{box-shadow:0 0 0 12px rgba(60,207,115,0)}100%{box-shadow:0 0 0 0 rgba(60,207,115,0)}}
.k-cam-msg{position:absolute;inset:auto 18px 70px;background:var(--bad-bg);color:var(--ink);padding:14px 16px;border-radius:12px;font-weight:600;max-width:none;margin:0}
.k-side{display:flex;flex-direction:column;gap:16px;min-height:0}
.k-howto h1{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.95;margin:4px 0 14px}
.k-howto p{font-size:1.2rem;margin:0 0 6px;max-width:30ch}
.k-es{color:var(--k-muted);font-style:italic}
.k-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--k-line);border-radius:18px;padding:16px 18px}
.k-card-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.k-card-h span{font:700 1rem var(--slab);text-transform:uppercase;letter-spacing:.08em}
.k-card-h small{color:var(--k-muted)}
.k-classes{list-style:none;margin:0;padding:0}
.k-classes li{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--k-line);font-size:1.05rem}
.k-classes li:first-child{border-top:0}
.k-classes li b{font:700 1.15rem var(--slab);color:var(--leather-l)}
.k-classes li.now{background:linear-gradient(90deg,rgba(221,210,189,.16),transparent);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px}
.k-classes li.now b::after{content:" · now";font:600 .8rem var(--body);color:#3ccf73}
.k-count{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.k-count b{display:block;font:400 3.2rem/1 var(--display)}
.k-count span{font-weight:700}
.k-count small{display:block;color:var(--k-muted)}
.k-count svg{color:var(--k-muted)}
.k-bump{animation:k-bump .5s ease}
@keyframes k-bump{40%{transform:scale(1.18);color:#3ccf73}}

/* bottom */
.k-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}
.k-btn{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:700 1.12rem var(--body);padding:18px 26px;border-radius:14px;color:var(--ink);background:var(--cream);transition:transform .12s,box-shadow .12s}
.k-btn:active{transform:scale(.98)}
.k-btn small{display:block;font-weight:500;font-size:.88rem;color:var(--muted)}
.k-btn span{text-align:left;line-height:1.2}
.k-btn-xl{font-size:1.35rem;padding:22px 40px}
.k-btn-danger{background:var(--bad);color:#fff}
.k-icon-btn{width:60px;height:60px;border-radius:50%;border:1px solid var(--k-line);background:rgba(255,255,255,.05);color:var(--cream);display:grid;place-items:center;cursor:pointer}

/* overlays */
.k-overlay{position:fixed;inset:0;z-index:20;background:rgba(10,10,9,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.k-start{display:grid;place-items:center;padding:24px;text-align:center}
.k-start-card{width:min(480px,100%)}
.k-start-card img{margin:0 auto 14px;width:110px;height:110px}
.k-start-card h1{font-size:clamp(2.6rem,6vw,4rem);margin-bottom:12px}
.k-alert{background:var(--bad-bg);color:var(--ink);padding:12px 14px;border-radius:10px;font-weight:600;max-width:none}
.k-form{display:grid;gap:8px;text-align:left;margin-top:12px;grid-template-columns:1fr}
.k-form label{color:var(--k-muted);margin:6px 0 0}
.k-form input{background:var(--k-panel);color:var(--cream);border:1px solid var(--k-line);border-bottom:2px solid var(--leather-l);border-radius:10px;font-size:1.1rem}
.k-form .k-btn{margin-top:12px;justify-content:center}
.k-start a{color:var(--leather-l)}
.k-panel{padding:28px 36px;display:flex;flex-direction:column;gap:16px}
.k-panel-h{display:flex;justify-content:space-between;align-items:center}
.k-panel-h h2{font-size:2.4rem}
.k-panel-h small{font:500 1rem var(--body);color:var(--k-muted);text-transform:none;letter-spacing:0;margin-left:10px}
.k-search{display:flex;align-items:center;gap:12px;background:var(--k-panel);border:1px solid var(--k-line);border-radius:16px;padding:6px 18px;color:var(--k-muted)}
.k-search input{border:0;background:transparent;color:var(--cream);font-size:1.6rem;padding:14px 0;box-shadow:none}
.k-search input:focus{box-shadow:none}
.k-results{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-content:start}
.k-results button{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;text-align:left;background:var(--k-panel);color:var(--cream);border:1px solid var(--k-line);border-radius:16px;padding:12px;font:inherit;cursor:pointer;transition:border-color .15s,transform .12s}
.k-results button:hover{border-color:var(--leather-l)}
.k-results button:active{transform:scale(.99)}
.k-results .avatar{width:72px;height:72px;border-radius:50%;font-size:1.5rem;background:#2b2a27;color:var(--leather-l)}
.k-results .avatar img{border-radius:50%}
.k-results b{display:block;font:700 1.25rem/1.1 var(--slab);text-transform:uppercase;margin-bottom:6px}
.k-settings{display:flex;flex-wrap:wrap;gap:12px}
.k-checking{display:grid;place-items:center;text-align:center;background:rgba(10,10,9,.7)}
.k-checking p{font:400 2.4rem var(--display);text-transform:uppercase;margin:18px 0 0}
.k-checking small{display:block;font:500 1.1rem var(--body);text-transform:none;color:var(--k-muted)}
.k-ring{display:block;width:84px;height:84px;margin:0 auto;border-radius:50%;border:6px solid rgba(244,237,225,.18);border-top-color:var(--cream);animation:mcc-spin .8s linear infinite}

/* result */
.k-result{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:5vh 6vw;color:#fff;overflow:hidden;cursor:pointer;animation:k-in .28s ease-out}
.k-result.green{background:linear-gradient(135deg,var(--k-green) 0%,var(--k-green-d) 100%)}
.k-result.amber{background:linear-gradient(135deg,var(--k-amber) 0%,var(--k-amber-d) 100%)}
.k-result.red{background:linear-gradient(135deg,var(--k-red) 0%,var(--k-red-d) 100%)}
.k-result::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.35;pointer-events:none}
.k-result-glow{position:absolute;width:70vmax;height:70vmax;left:-15vmax;top:-25vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
@keyframes k-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.k-result-inner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;width:100%;max-width:1200px}
.k-photo-wrap{position:relative;animation:k-pop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes k-pop{from{transform:scale(.7);opacity:0}}
.k-photo{width:min(30vw,340px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid rgba(255,255,255,.95);box-shadow:0 25px 60px rgba(0,0,0,.35);background:rgba(0,0,0,.2);display:grid;place-items:center;font:400 clamp(4rem,9vw,7.5rem)/1 var(--display)}
.k-photo img{width:100%;height:100%;object-fit:cover}
.k-badge{position:absolute;right:2%;bottom:2%;width:28%;aspect-ratio:1}
.k-badge svg{display:none;width:100%;height:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.k-badge circle{fill:#fff}
.k-badge path{fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:k-draw .45s .25s ease-out forwards}
.green .b-green,.amber .b-amber,.red .b-red{display:block}
.b-green path{stroke:var(--k-green)}.b-amber path{stroke:var(--k-amber)}.b-red path{stroke:var(--k-red)}
@keyframes k-draw{to{stroke-dashoffset:0}}
.k-result-text{min-width:0;animation:k-up .45s .08s ease-out both}
@keyframes k-up{from{transform:translateY(18px);opacity:0}}
.k-big{font:400 clamp(2.8rem,6.4vw,6rem)/.92 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:14px}
.k-big small{display:block;font-size:.42em;opacity:.8;letter-spacing:.06em;margin-top:6px}
.k-name{font:700 clamp(1.9rem,3.8vw,3.2rem)/1.05 var(--slab);text-transform:uppercase;margin-bottom:16px;overflow-wrap:anywhere}
.k-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.k-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);backdrop-filter:blur(4px)}
.k-chip.hl{background:#fff;color:var(--ink)}
.k-detail{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:600;margin:0;max-width:none}
.k-parent{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600;margin:12px 0 0;opacity:.95;max-width:none}
.k-staff{display:inline-block;margin:16px 0 0;padding:8px 14px;border-radius:10px;background:rgba(0,0,0,.28);border:2px dashed rgba(255,255,255,.7);font-weight:700;font-size:1.05rem;max-width:none}
.k-timer{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(0,0,0,.18)}
.k-timer i{display:block;height:100%;width:100%;background:rgba(255,255,255,.85);transform-origin:left}
.k-timer i.run{animation:k-timer linear forwards}
@keyframes k-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.k-hint{position:absolute;bottom:22px;right:28px;font-size:1rem;opacity:.8}
.k-result.noface .k-photo-wrap{display:none}
.k-result.noface .k-result-inner{grid-template-columns:1fr;text-align:center}
.k-result.noface .k-chips{justify-content:center}

@media (max-width:900px),(orientation:portrait){
  .k-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .k-howto,.k-count{display:none}
  .k-result-inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .k-photo{width:min(52vw,320px)}
  .k-chips{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.k-scanline,.k-dot,.k-result,.k-photo-wrap,.k-result-text{animation:none}.k-badge path{animation:none;stroke-dashoffset:0}}
/* fit the side column inside the screen height */
.k-side{overflow:hidden}
.k-howto h1{font-size:clamp(2.2rem,3.8vw,3.2rem);margin-bottom:10px}
.k-howto p{font-size:1.1rem}
.k-classes li:nth-child(n+4){display:none}
@media (max-height:860px){.k-howto p{font-size:1rem;margin-bottom:2px}.k-count b{font-size:2.6rem}.k-card{padding:12px 16px}}
.k-side{gap:12px}

/* Allow pinch zoom (accessibility) but stop accidental double-tap zoom at the door */
.kiosk-body{touch-action:manipulation}
/* Cash payment pending: approve right at the entrance (desk staff) */
.k-cash{margin-top:18px}
.k-cash-ok{min-height:64px;padding:14px 26px;border:0;border-radius:16px;background:#fff;color:#1d4d2c;font:800 clamp(1.1rem,2vw,1.4rem) var(--body,system-ui);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.k-cash-ok:disabled{opacity:.8}
.k-cash-msg{margin:10px 0 0;font-weight:700;max-width:none}
.k-cash-msg:empty{display:none}