/* TryOn big screen. 55-inch portrait, 1080x1920 at 1:1 (scaled to fit smaller windows by kiosk.js).
   Palette: ground #F7F5F0, ink #1F1B2E, plum #5B2A86, zari #C9A24A. 8-pt spacing. One headline face; everything else system sans. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@500;600;700&display=swap');
:root {
  --ground:#F7F5F0; --ink:#1F1B2E; --plum:#5B2A86; --plum-deep:#44206A; --zari:#C9A24A; --zari-deep:#A98332;
  --muted:#6E6880; --mist:#CFC8DE; --warn:#8A2E2E; --ok:#2F6B3C;
  --glass:rgba(247,245,240,.72); --glass-dark:rgba(31,27,46,.56); --white-pill:rgba(255,255,255,.82);
  --r-card:24px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(31,27,46,.05), 0 8px 24px rgba(31,27,46,.08), 0 24px 56px rgba(31,27,46,.10);
  --shadow-float:0 2px 6px rgba(31,27,46,.10), 0 16px 40px rgba(31,27,46,.18);
  --sans:-apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Manrope, "Segoe UI", sans-serif;
  --serif:Fraunces, "New York", Georgia, serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html, body { margin:0; height:100%; background:var(--ground); color:var(--ink); font-family:var(--sans); -webkit-user-select:none; user-select:none; overflow:hidden; -webkit-font-smoothing:antialiased; }
#app { width:1080px; height:1920px; margin:0 auto; position:relative; overflow:hidden; background:var(--ground); }
button { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid var(--plum); outline-offset:3px; }
button:active { transform:scale(.97); }
button { transition:transform 120ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease), opacity 160ms; }
button:disabled { opacity:.4; cursor:default; transform:none; }

/* ---- screens and transitions */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--ground); }
.screen[hidden] { display:none; }
[hidden] { display:none !important; }   /* .pill and other display rules must never show a hidden control (the dev test-photo button showed on the shop kiosk, KC 2026-10-12) */
.screen.enter { animation:screen-in 240ms var(--ease) both; }
@keyframes screen-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .screen.enter { animation:none; } button:active { transform:none; } * { animation-duration:.01ms !important; } }

/* ---- frosted bars */
.bar-top { position:absolute; top:0; left:0; right:0; height:112px; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:0 48px; box-sizing:border-box;
  background:var(--glass); -webkit-backdrop-filter:saturate(1.4) blur(28px); backdrop-filter:saturate(1.4) blur(28px); }
.bar-top::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(31,27,46,.06); }
.brand { font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:-.01em; }
.bar-top .sub { font-size:22px; color:var(--muted); font-weight:500; max-width:620px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-top .back { height:56px; padding:0 24px; border-radius:var(--r-pill); background:rgba(31,27,46,.06); font-size:20px; font-weight:600; color:var(--plum); }
.tray { position:absolute; left:0; right:0; bottom:0; z-index:6; padding:24px 48px 40px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--glass); -webkit-backdrop-filter:saturate(1.4) blur(28px); backdrop-filter:saturate(1.4) blur(28px); box-shadow:0 -1px 0 rgba(31,27,46,.06), 0 -24px 48px rgba(31,27,46,.06); }
.tray .stack { display:flex; align-items:center; gap:16px; min-width:0; flex:1; overflow:hidden; }
.tray > div:last-child, .tray > button { flex-shrink:0; }
.tray .thumbs { display:flex; }
.tray .thumbs { flex-shrink:0; }
.tray .thumbs .chip { width:72px; height:96px; border-radius:16px; margin-right:-18px; box-shadow:0 0 0 3px var(--ground), var(--shadow-card); }
.tray .thumbs .chip:last-child { margin-right:0; }
.tray .label { display:flex; flex-direction:column; gap:2px; margin-left:16px; }
.tray .label b { font-size:26px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#s-capture .tray .label b { font-size:18px; white-space:normal; line-height:1.15; max-width:120px; }
#s-capture .tray .stack { gap:12px; }
#s-capture .tray .pill.quiet { padding:0 22px; }
.tray .label span { font-size:18px; color:var(--muted); }
.dark { background:var(--ink); color:#fff; }
.dark .bar-top { background:var(--glass-dark); color:#fff; }
.dark .bar-top .sub { color:var(--mist); }
.dark .tray { background:var(--glass-dark); color:#fff; box-shadow:0 -1px 0 rgba(255,255,255,.08); }
.dark .tray .label span { color:var(--mist); }
.dark .tray .thumbs .chip { box-shadow:0 0 0 3px var(--ink); }

/* ---- pills */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:64px; padding:0 30px; border-radius:var(--r-pill); font-size:22px; font-weight:600; white-space:nowrap; }
.pill.primary { background:var(--plum); color:#fff; box-shadow:0 8px 20px rgba(91,42,134,.28); }
.pill.primary:active { background:var(--plum-deep); }
.pill.gold { background:var(--zari); color:var(--ink); height:72px; padding:0 36px; font-size:24px; font-weight:700; box-shadow:0 10px 24px rgba(201,162,74,.35); }
.pill.gold:active { background:var(--zari-deep); }
.pill.glass { background:var(--white-pill); color:var(--ink); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 2px 8px rgba(31,27,46,.12); }
.pill.quiet { background:rgba(31,27,46,.06); color:var(--ink); }
.dark .pill.quiet { background:rgba(255,255,255,.12); color:#fff; }
.pill.small { height:56px; padding:0 24px; font-size:20px; }
.pill.on { background:var(--plum); color:#fff; }
.pill.danger { color:var(--warn); }

/* ---- photos: fetched with the token, so they are background images; shimmer until loaded */
.photo { background:#E9E5DD center/cover no-repeat; position:relative; overflow:hidden; }
.photo:not(.loaded)::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---- showcase: 2 x 3 photo grid, each 3:4, scrolls under the bars */
.scroll { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }
.headline { margin:0; font-family:var(--serif); font-size:60px; font-weight:500; line-height:1.05; letter-spacing:-.015em; }
#showcase-scroll { padding:144px 48px 220px; box-sizing:border-box; }
#showcase-scroll .headline { margin-bottom:28px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.card { position:relative; aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); background:#E9E5DD; isolation:isolate; }
.card .photo { position:absolute; inset:0; }
.card .scrim { position:absolute; left:0; right:0; bottom:0; padding:120px 24px 24px; background:linear-gradient(to top, rgba(31,27,46,.78) 0%, rgba(31,27,46,.45) 45%, rgba(31,27,46,0) 100%); color:#fff; display:flex; flex-direction:column; gap:4px; }
.card .name { font-size:28px; font-weight:600; letter-spacing:-.01em; }
.card .meta { font-size:18px; color:rgba(255,255,255,.78); font-weight:500; }
.card .price { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; }
.card .acts { display:flex; gap:12px; margin-top:16px; }
.card .acts .pill { height:60px; flex:1; font-size:21px; }
.card .rack { position:absolute; top:20px; left:20px; height:40px; padding:0 16px; border-radius:var(--r-pill); background:var(--white-pill); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:16px; font-weight:600; display:flex; align-items:center; }
.card.loved::after { content:""; position:absolute; inset:0; border-radius:var(--r-card); box-shadow:inset 0 0 0 4px var(--zari); pointer-events:none; }
.empty { padding:64px 24px; text-align:center; font-size:24px; color:var(--muted); }

/* ---- pile */
#pile-scroll { padding:144px 48px 240px; box-sizing:border-box; display:flex; flex-direction:column; gap:20px; }
.lead { margin:0 0 8px; font-size:22px; color:var(--muted); font-weight:500; }
.row-card { display:flex; align-items:center; gap:24px; padding:16px; border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow-card); }
.row-card .photo { width:168px; height:224px; border-radius:18px; flex-shrink:0; }
.row-card .info { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.row-card .name { font-size:30px; font-weight:600; letter-spacing:-.01em; }
.row-card .meta { font-size:19px; color:var(--muted); }
.row-card .price { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.row-card .acts { display:flex; flex-direction:column; gap:10px; }
.morelike { padding:24px; border-radius:var(--r-card); background:rgba(91,42,134,.06); display:flex; flex-direction:column; gap:16px; }
.morelike .label { font-size:20px; font-weight:600; color:var(--plum); }
.morelike .strip { display:flex; gap:16px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.morelike .thumb { width:132px; height:176px; border-radius:18px; flex-shrink:0; box-shadow:var(--shadow-card); }
.morelike .hint { font-size:18px; color:var(--muted); }

/* ---- capture: full-bleed camera, glowing silhouette */
#s-capture { background:#141221; }
.stage { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); opacity:.92; }
.stage .fade { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,18,33,.55) 0, rgba(20,18,33,0) 24%, rgba(20,18,33,0) 70%, rgba(20,18,33,.7) 100%); pointer-events:none; }
.stage svg { position:relative; z-index:2; margin-top:140px; filter:drop-shadow(0 0 14px rgba(201,162,74,.75)) drop-shadow(0 0 40px rgba(201,162,74,.35)); opacity:.95; }
.stage .mark { position:absolute; z-index:2; left:50%; bottom:300px; transform:translateX(-50%); width:220px; height:30px; border-radius:50%; border:3px solid rgba(201,162,74,.9); box-shadow:0 0 24px rgba(201,162,74,.5); }
.stage .count { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--serif); font-size:280px; font-weight:600; color:#fff; line-height:1; text-shadow:0 8px 40px rgba(0,0,0,.4); }
.capture-copy { position:absolute; z-index:4; top:136px; left:48px; right:48px; color:#fff; display:flex; flex-direction:column; gap:8px; }
.capture-copy .headline { font-size:52px; color:#fff; }
.capture-copy .lead { color:var(--mist); }
.status-pill { display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 22px; border-radius:var(--r-pill); background:rgba(31,27,46,.6); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; font-size:20px; font-weight:600; align-self:flex-start; margin-top:12px; }
.status-pill i { width:14px; height:14px; border-radius:50%; background:#5FBF7A; }
.privacy { position:absolute; z-index:4; left:48px; right:48px; bottom:176px; font-size:17px; color:rgba(255,255,255,.6); margin:0; }

/* ---- results: horizontal carousel of try-ons, floating pills */
#results-body { position:absolute; top:112px; left:0; right:0; bottom:0; display:flex; flex-direction:column; }
.carousel { display:flex; gap:32px; overflow-x:auto; scroll-snap-type:x mandatory; padding:32px 90px 16px; scrollbar-width:none; flex:1; align-items:center; }
.carousel::-webkit-scrollbar { display:none; }
.carousel[hidden], .compare[hidden] { display:none; }
.slide { position:relative; flex:0 0 900px; height:1200px; border-radius:28px; overflow:hidden; scroll-snap-align:center; box-shadow:var(--shadow-card); background:#E9E5DD; }
.slide .photo { position:absolute; inset:0; background-size:contain; background-color:#EFECE6; }
.slide .tag { position:absolute; top:24px; left:24px; height:48px; padding:0 20px; border-radius:var(--r-pill); background:var(--white-pill); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:18px; font-weight:600; display:flex; align-items:center; }
.slide .floating { position:absolute; left:24px; right:24px; bottom:24px; display:flex; gap:12px; }
.slide .floating .pill { flex:1; height:72px; font-size:23px; }
.slide .waiting { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; color:var(--muted); font-size:24px; font-weight:500; }
.ring { width:96px; height:96px; }
.ring circle { fill:none; stroke-width:6; stroke-linecap:round; }
.ring .track { stroke:rgba(31,27,46,.08); }
.ring .arc { stroke:var(--plum); stroke-dasharray:80 200; transform-origin:center; animation:ring-turn 1.6s linear infinite; }
@keyframes ring-turn { to { transform:rotate(360deg); } }
.strip { display:flex; gap:16px; padding:8px 48px 16px; align-items:center; }
.strip .tile { width:120px; height:160px; border-radius:16px; box-shadow:var(--shadow-card); position:relative; }
.strip .tile.on::after { content:""; position:absolute; inset:0; border-radius:16px; box-shadow:inset 0 0 0 4px var(--plum); }
.strip .tile.pending { display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); background:rgba(31,27,46,.05); box-shadow:none; }
.strip .spacer { flex:1; }
.tools { display:flex; gap:12px; padding:0 48px 24px; }
.compare { position:relative; flex:1; margin:32px 48px 16px; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-card); background:#EFECE6; touch-action:none; }
.compare .photo { position:absolute; inset:0; background-size:contain; }
.compare .right { clip-path:inset(0 0 0 50%); }
.compare .handle { position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff; box-shadow:0 0 0 1px rgba(31,27,46,.15); transform:translateX(-50%); }
.compare .handle::after { content:""; position:absolute; top:50%; left:50%; width:72px; height:72px; border-radius:50%; background:var(--white-pill); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transform:translate(-50%,-50%); box-shadow:var(--shadow-float); }
.compare .tag { position:absolute; top:24px; height:48px; padding:0 20px; border-radius:var(--r-pill); background:var(--white-pill); font-size:18px; font-weight:600; display:flex; align-items:center; }
.compare .tag.l { left:24px; } .compare .tag.r { right:24px; }

/* ---- over / unlock */
.centre { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; text-align:center; padding:0 96px; }
.centre .headline { font-size:64px; }
.centre .lead { max-width:760px; }
#unlock { display:flex; flex-direction:column; gap:16px; width:640px; max-width:90%; }
#unlock[hidden] { display:none; }
#unlock input { height:72px; font:600 24px var(--sans); padding:0 24px; border:0; border-radius:20px; background:#fff; box-shadow:var(--shadow-card); color:var(--ink); }
#unlock input:focus { outline:3px solid var(--plum); }

/* ---- listening mark (six voice states), top-right in the bar */
#voice-mark { position:absolute; top:28px; right:48px; z-index:7; display:flex; align-items:center; gap:12px; height:56px; padding:0 20px; border-radius:var(--r-pill); background:var(--white-pill); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); font-size:18px; font-weight:600; color:var(--muted); box-shadow:0 2px 8px rgba(31,27,46,.10); }
#voice-mark .dot { width:14px; height:14px; border-radius:50%; background:#B5AFC4; }
#voice-mark.v-off { display:none; }
#voice-mark.v-waiting .dot { background:#5FBF7A; }
#voice-mark.v-hearing .dot { background:var(--zari); animation:v-pulse .9s ease-in-out infinite; }
#voice-mark.v-thinking .dot { background:var(--plum); animation:v-pulse 1.4s ease-in-out infinite; }
#voice-mark.v-speaking .dot { background:var(--plum); box-shadow:0 0 0 6px rgba(91,42,134,.18); }
#voice-mark.v-error .dot { background:var(--warn); }
@keyframes v-pulse { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(1.35); opacity:.6 } }
#voice-heard { position:absolute; top:128px; right:48px; z-index:7; max-width:640px; padding:14px 20px; border-radius:18px; background:rgba(31,27,46,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; font-size:21px; box-shadow:var(--shadow-float); }
#voice-heard[hidden] { display:none; }
#toast { position:absolute; left:50%; bottom:200px; z-index:9; transform:translateX(-50%); padding:14px 24px; border-radius:var(--r-pill); background:rgba(31,27,46,.9); color:#fff; font-size:19px; display:none; box-shadow:var(--shadow-float); }

/* ---- capture: no automatic shot; a big gold button, then preview */
.pill.gold.big { height:80px; padding:0 44px; font-size:26px; }
#s-preview { background:#141221; }
#s-preview .photo.preview { position:absolute; inset:0; background-size:contain; background-color:#141221; transform:scaleX(-1); }
#s-preview .photo.preview.loaded::before { display:none; }
#s-photo .photo.full { position:absolute; inset:0; background-size:contain; background-color:#141221; }
#s-preview .capture-copy { top:136px; }
/* plain TV (TRYON_KIOSK_TOUCH=0): no buttons to press; try-on and saree thumbnails stay as pictures */
body.no-touch #app button:not(#unlock-go):not(.tile):not(.thumb) { display:none !important; }
body.no-touch #app button { pointer-events:none; } body.no-touch #unlock-go { pointer-events:auto; }