/* Social Gym Club demo: iPhone, camera, poster and print */
.phone-wrap { position: relative; flex: none; }
.iphone { position: absolute; top: 0; left: 0; width: 399px; height: 836px; transform-origin: 0 0; border-radius: 62px; padding: 12px; background: linear-gradient(145deg, #45454d, #18181c 40%, #2c2c32); box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 2px rgba(255,255,255,.06); }
.hw { position: absolute; width: 4px; border-radius: 2px; background: #2f2f35; }
.hw-a { left: -3px; top: 140px; height: 32px; } .hw-b { left: -3px; top: 200px; height: 62px; }
.hw-c { left: -3px; top: 276px; height: 62px; } .hw-d { right: -3px; top: 230px; height: 96px; }
.screen { position: relative; width: 375px; height: 812px; border-radius: 50px; overflow: hidden; background: #0F0F1A; color: #fff; display: flex; flex-direction: column; font-family: -apple-system, "SF Pro Rounded", ui-rounded, var(--font); }
.status { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 40px; font-size: 16px; font-weight: 650; z-index: 45; pointer-events: none; }
.sicons { display: flex; align-items: center; gap: 6px; fill: #fff; }
.batt { width: 26px; height: 13px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 4px; padding: 1.5px; display: inline-block; }
.batt i { display: block; width: 78%; height: 100%; border-radius: 2px; background: #fff; }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 50; overflow: hidden; transition: width .5s cubic-bezier(.3,1.35,.5,1), height .5s cubic-bezier(.3,1.35,.5,1), border-radius .5s; }
.island.open { width: 312px; height: 54px; border-radius: 28px; }
.island-text { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px; font-size: 14px; font-weight: 650; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.island.open .island-text { opacity: 1; transition-delay: .18s; }
.island-text > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ii { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--grn); color: #062b1e; }
.ii.flame { background: var(--grad); color: #fff; } .ii.up { background: var(--yel); color: #2a1c00; } .ii.alert { background: var(--red); color: #fff; }
.home-ind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: #fff; transform: translateX(-50%); z-index: 46; opacity: .85; }

.p-head { padding-top: 54px; flex: none; }
.ph-title { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 18px 8px; }
.ph-title h1 { font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.ph-bell { position: relative; margin-bottom: 8px; }
.ph-bell i { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ph-seg { margin: 0 16px 10px; display: grid; grid-template-columns: repeat(3, 1fr); background: #1F1F2B; border-radius: 10px; padding: 2px; }
.ph-seg span { text-align: center; padding: 7px; font-size: 13.5px; font-weight: 650; color: #b9b4c6; border-radius: 8px; }
.ph-seg .on { background: #2E2E3D; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.p-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; }
.p-scroll::-webkit-scrollbar { display: none; }
.p-in { padding: 4px 16px 104px; }
.p-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: rgba(20,20,30,.88); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 8px; z-index: 30; }
.tb { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8b8799; font-size: 10.5px; font-weight: 600; }
.tb.on { color: var(--ember); }

/* not joined */
.c-hero { margin-top: 6px; border-radius: 22px; padding: 22px 20px; text-align: center; background: linear-gradient(135deg, #FF7333, #E64026 55%, #c22b5e); box-shadow: 0 14px 34px rgba(230,64,38,.3); }
.c-hero-ic { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.2); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.c-hero h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.c-hero p { font-size: 14px; opacity: .92; margin: 0; line-height: 1.35; }
.c-code { margin-top: 14px; background: #1F1F2B; border-radius: 18px; padding: 14px; }
.c-code label { font-size: 13px; color: #b9b4c6; font-weight: 650; }
.c-code-row { display: flex; gap: 8px; margin-top: 8px; }
.c-code input { flex: 1; min-width: 0; background: #0F0F1A; border: 1px solid #2E2E3D; border-radius: 12px; padding: 11px 12px; font-size: 20px; font-weight: 800; letter-spacing: .18em; color: #fff; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Consolas, monospace; outline: none; }
.c-code input:focus { border-color: var(--ember); }
.c-code input::placeholder { color: #45424f; }
.err { color: #ff8592; font-size: 12.5px; min-height: 16px; margin: 6px 0 0; }
.pbtn { border: 0; border-radius: 12px; padding: 0 16px; font-size: 15px; font-weight: 750; color: #fff; }
.pbtn.primary { background: var(--grad); }
.pbtn.ghost { background: #2E2E3D; }
.c-scan { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.16); color: #b9b4c6; font-size: 13px; line-height: 1.35; }
.c-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.c-feat div { background: #1F1F2B; border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: #d6d1e2; }
.c-feat .ic { color: var(--ember); }

/* joined */
.p-in > .cl-head.enter { animation: viewIn .4s ease both; }
.cl-head { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.cl-head h2 { font-size: 20px; font-weight: 800; margin: 0; }
.cl-head small { color: #9d95ad; font-size: 13px; }
.cl-pos { display: flex; gap: 8px; align-items: center; background: linear-gradient(90deg, rgba(255,115,51,.24), rgba(255,115,51,.05)); border: 1px solid rgba(255,115,51,.35); border-radius: 14px; padding: 10px 14px; font-size: 14.5px; font-weight: 750; margin-bottom: 10px; }
.cl-pos .ic { color: var(--ember); }
.cl-pos b { margin-left: auto; color: var(--yel); font-variant-numeric: tabular-nums; }
.cl-card { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.cl-card small { display: block; font-size: 11.5px; color: #9d95ad; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cl-card.notice { background: #1F1F2B; border-left: 3px solid var(--blu); }
.cl-card.notice > .ic { color: var(--blu); margin-top: 2px; }
.cl-card.notice p { margin: 3px 0 0; font-size: 14px; line-height: 1.38; word-break: break-word; }
.cl-card.prize { background: linear-gradient(135deg, rgba(255,201,61,.2), rgba(255,115,51,.08)); border: 1px solid rgba(255,201,61,.35); align-items: center; }
.pz-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--yel); color: #3a2500; display: flex; align-items: center; justify-content: center; flex: none; }
.cl-card.prize b { display: block; font-size: 16px; margin: 2px 0; word-break: break-word; }
.cl-card.prize span { font-size: 12.5px; color: var(--yel); }
.cl-sec { margin-top: 18px; }
.cl-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.cl-sh h3 { font-size: 18px; font-weight: 800; margin: 0; }
.cl-sh small { color: #9d95ad; font-size: 12.5px; }
.p-rank { list-style: none; padding: 6px; margin: 0; background: #1F1F2B; border-radius: 16px; }
.p-rank li { display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 12px; }
.p-rank .rk b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.p-rank .xp { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.p-rank li.me { background: rgba(255,201,61,.13); box-shadow: inset 0 0 0 1px rgba(255,201,61,.35); }
.p-rank li.bump { animation: bump .9s ease; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.04); background: rgba(255,201,61,.3); } 100% { transform: scale(1); } }
.p-rank li.gap { display: block; text-align: center; color: #6f6880; padding: 0; line-height: 1; }
.rt-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.rt-row::-webkit-scrollbar { display: none; }
.rt { flex: none; width: 170px; background: #1F1F2B; border-radius: 16px; padding: 12px; position: relative; border-top: 3px solid var(--c); }
.rt-ic { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rt b { display: block; font-size: 13.5px; line-height: 1.25; min-height: 34px; }
.rt small { color: #9d95ad; font-size: 11.5px; }
.rt-r { position: absolute; top: 12px; right: 12px; font-size: 11.5px; color: var(--yel); display: flex; gap: 3px; align-items: center; font-weight: 700; }
.compose { display: flex; gap: 10px; align-items: center; background: #1F1F2B; border-radius: 14px; padding: 10px 12px; color: #7d7890; font-size: 14px; margin-bottom: 4px; }
.p-post { display: flex; gap: 10px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.p-post > div { flex: 1; min-width: 0; }
.pp-h { display: flex; gap: 6px; align-items: center; }
.pp-h b { font-size: 14px; }
.pp-h time { color: #8b8799; font-size: 12px; margin-left: auto; }
.p-post p { margin: 4px 0 6px; font-size: 14px; line-height: 1.38; color: #e8e4f0; }
.pp-f { display: flex; gap: 14px; color: #8b8799; font-size: 12.5px; }
.pp-f span { display: inline-flex; gap: 4px; align-items: center; }

/* join sheet */
.p-sheet { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.sh-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s; }
.sh { position: absolute; left: 0; right: 0; bottom: 0; background: #1a1a26; border-radius: 26px 26px 0 0; padding: 10px 18px 34px; transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.9,.25,1); }
.p-sheet.open { pointer-events: auto; }
.p-sheet.open .sh-dim { opacity: 1; }
.p-sheet.open .sh { transform: none; }
.grab { width: 38px; height: 5px; border-radius: 3px; background: #4a4758; margin: 0 auto 12px; }
.sh-pre { display: block; text-align: center; color: #9d95ad; font-size: 13px; }
.sh-gym { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 14px; text-align: center; }
.sh-gym h2 { font-size: 22px; font-weight: 800; margin: 6px 0 0; }
.sh-gym span { color: #9d95ad; font-size: 13px; }
.consent { display: flex; gap: 12px; background: #0F0F1A; border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(61,232,168,.25); }
.consent > .ic { color: var(--grn); margin-top: 1px; }
.consent b { font-size: 14px; }
.consent p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #c8c3d4; }
.sh-fld { display: block; margin: 14px 0; }
.sh-fld span { display: block; font-size: 13px; color: #9d95ad; font-weight: 650; margin-bottom: 6px; }
.sh-fld input { width: 100%; background: #0F0F1A; border: 1px solid #2E2E3D; border-radius: 12px; padding: 12px; font-size: 16px; color: #fff; outline: none; }
.sh-fld input:focus { border-color: var(--ember); }
.sh-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sh-btns .pbtn { height: 50px; }

/* camera */
.p-cam { position: absolute; inset: 0; z-index: 35; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
.p-cam.open { opacity: 1; pointer-events: auto; }
.cam-feed { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #5a4d40 0%, #2a241e 55%, #0b0a09 100%); }
.cam-feed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px); }
.cam-poster { position: absolute; left: 50%; top: 44%; width: 214px; background: #fff; color: #16121c; border-radius: 6px; padding: 0 0 14px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6); transform: translate(-50%, -50%) perspective(700px) rotateX(7deg) rotateZ(-2.5deg); }
.p-cam.open .cam-poster { animation: drift 3.2s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-50%, -50%) perspective(700px) rotateX(7deg) rotateZ(-2.5deg); } to { transform: translate(calc(-50% + 4px), calc(-50% - 3px)) perspective(700px) rotateX(6deg) rotateZ(-1.8deg); } }
.cp-band { height: 36px; background: var(--grad); display: flex; align-items: center; justify-content: center; border-radius: 6px 6px 0 0; }
.cp-band img { width: 24px; height: 24px; border-radius: 6px; }
.cam-poster small { display: block; font-size: 10px; margin-top: 8px; color: #6b6475; }
.cam-poster b { display: block; font-size: 15px; font-weight: 900; margin: 2px 8px 8px; }
.cp-qr { width: 138px; margin: 0 auto; }
.cp-qr svg { width: 100%; height: auto; display: block; }
.cp-code { display: block; font-size: 12px; font-weight: 900; letter-spacing: .2em; margin-top: 8px; font-family: ui-monospace, Consolas, monospace; }
.cam-frame { position: absolute; left: 50%; top: 47.5%; width: 176px; height: 176px; transform: translate(-50%, -50%); }
.cam-frame i { position: absolute; width: 28px; height: 28px; border: 4px solid #FFD60A; }
.cam-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.cam-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.cam-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.cam-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.p-cam.open .cam-frame { animation: lock .7s .35s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes lock { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.cam-pill { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: #FFD60A; color: #1c1600; border: 0; border-radius: 14px; padding: 7px 16px 7px 7px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; white-space: nowrap; z-index: 2; }
.p-cam.open .cam-pill { animation: pillIn .45s 1.1s cubic-bezier(.2,.9,.3,1.3) forwards, nudge 1.6s 2.4s ease-in-out infinite; }
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nudge { 0%, 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } 50% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } }
.cp-ic img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.cp-tx { text-align: left; }
.cp-tx small { display: block; font-size: 11px; opacity: .7; }
.cp-tx b { display: block; font-size: 14.5px; }
.cam-ui { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(transparent, rgba(0,0,0,.85) 45%); }
.cam-mode { position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%); color: #FFD60A; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; }
.cam-bar { position: absolute; bottom: 42px; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; }
.thumb { width: 44px; height: 44px; border-radius: 8px; background: #2c2c2c; border: 2px solid #555; }
.shutter { width: 70px; height: 70px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 7px #fff; }
.cam-x { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; }

/* confetti */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.fx i { position: absolute; top: -16px; width: 8px; height: 13px; border-radius: 2px; animation-name: fall; animation-timing-function: cubic-bezier(.3,.6,.6,1); animation-fill-mode: forwards; }
@keyframes fall { to { transform: translate(var(--dx), 860px) rotate(var(--r)); opacity: .3; } }

/* controls under the phone */
.controls { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 399px; max-width: 100%; }
.ctl-cap { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.ctl-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ctl-hint { color: var(--muted); font-size: 12px; text-align: center; margin: 0; line-height: 1.5; }
.code-chip { background: var(--card); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.code-chip b { letter-spacing: .12em; color: #fff; font-family: ui-monospace, Consolas, monospace; }

/* A4 poster (also used for print) */
.poster { width: 210mm; height: 297mm; background: #fff; color: #16121c; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pt-band { height: 26mm; flex: none; background: linear-gradient(120deg, #FF8A3D, #E64026 60%, #c22b5e); display: flex; align-items: center; gap: 4mm; padding: 0 14mm; color: #fff; font-size: 7mm; font-weight: 700; }
.pt-band img { width: 13mm; height: 13mm; border-radius: 3mm; }
.pt-band b { font-weight: 900; }
.pt-body { flex: 1; justify-content: center; padding: 6mm 16mm 8mm; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pt-kick { font-size: 6mm; font-weight: 650; color: #6b6475; margin: 0; }
.pt-gym { font-size: 15mm; font-weight: 900; letter-spacing: -.02em; margin: 1mm 0 3mm; line-height: 1.05; word-break: break-word; }
.pt-head { font-size: 7.5mm; font-weight: 800; color: #E64026; margin: 0 0 11mm; }
.pt-mid { display: flex; gap: 9mm; align-items: center; }
.pt-qr { width: 100mm; height: 100mm; padding: 5mm; border: 1.2mm solid #16121c; border-radius: 6mm; flex: none; }
.pt-qr svg { width: 100%; height: 100%; display: block; }
.pt-steps { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 7mm; width: 70mm; }
.pt-steps li { display: flex; gap: 4mm; align-items: center; font-size: 5.6mm; font-weight: 650; line-height: 1.25; }
.pt-steps b { flex: none; width: 10mm; height: 10mm; border-radius: 50%; background: #FF7333; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 5.5mm; font-weight: 900; }
.pt-codel { font-size: 4.6mm; color: #6b6475; margin: 7mm 0 1mm; }
.pt-code { font-size: 13mm; font-weight: 900; margin: 0; font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 0; }
.pt-code i { display: inline-block; width: 2.5mm; }
.pt-prize { display: flex; gap: 5mm; align-items: center; margin-top: 8mm; padding: 5mm 9mm; border-radius: 6mm; background: #FFF4D6; border: .6mm solid #FFC93D; color: #a06800; text-align: left; max-width: 160mm; }
.pt-prize small { display: block; font-size: 4.2mm; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pt-prize b { display: block; font-size: 7mm; color: #16121c; word-break: break-word; }
.pt-foot { height: 16mm; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 14mm; background: #16121c; color: #fff; font-size: 4.6mm; font-weight: 650; }
.pt-foot span:last-child { opacity: .6; }
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; height: auto; overflow: visible; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  #print-root .poster { page-break-after: avoid; break-after: avoid; }
}