/* Scan the gorilla: phone game */
.sg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(24px,4.5vw,64px);overflow:hidden;background:radial-gradient(ellipse 50% 70% at 72% 55%,#5fa8e02e,transparent 70%),radial-gradient(ellipse 40% 50% at 90% 10%,#ffd76a14,transparent 70%),linear-gradient(165deg,#161e25,#0b1116)}
.sg-copy h2{font-size:clamp(36px,4.4vw,64px);font-weight:700;letter-spacing:-.06em;line-height:.95;margin:0}
.sg-copy h2 span{display:block;background:linear-gradient(95deg,#f2faff,#b9d9ee 45%,#6fb2e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-copy>p{font-size:16px;line-height:1.7;color:var(--case-soft);max-width:44ch;margin:20px 0 28px}
.sg-journey{list-style:none;padding:0;margin:0;display:grid;gap:0;position:relative}
.sg-journey::before{content:'';position:absolute;left:23px;top:30px;bottom:30px;width:2px;background:linear-gradient(#9fd8ff,#ffd76a);opacity:.5}
.sg-journey li{position:relative;display:flex;gap:16px;align-items:flex-start;padding:12px 0}
.sg-journey li>b{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#0a0f13;border:1px solid #9fd8ff55;box-shadow:0 0 24px -6px #5fa8e0;font-size:20px}
.sg-journey li:last-child>b{border-color:#ffd76a77;box-shadow:0 0 24px -6px #ffb347}
.sg-journey strong{display:block;font-size:17px;letter-spacing:-.02em;margin:3px 0 3px}
.sg-journey span{font-size:14px;line-height:1.5;color:var(--case-soft)}
.sg-device{position:relative;justify-self:center;width:min(360px,100%);padding:12px 0}
.sg-device::before{content:'';position:absolute;inset:8% -20%;background:radial-gradient(circle,#5fa8e040,transparent 62%);filter:blur(12px);z-index:0}
.sg-phone{position:relative;z-index:1;aspect-ratio:9/19.5;padding:11px;border-radius:52px;background:linear-gradient(160deg,#3d4c5a,#0d161e);border:1px solid #dbeeff55;box-shadow:inset 0 1px 0 #ffffff55,inset 0 0 0 2px #0a121a,0 60px 120px -30px #000,0 0 70px -20px #5fa8e066}
.sg-phone::after{content:'';position:absolute;top:22px;left:50%;width:30%;height:26px;margin-left:-15%;border-radius:16px;background:#000;z-index:20}
.sg-screenwrap{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#000;isolation:isolate}
.sg-screenwrap.flash::after{content:'';position:absolute;inset:0;z-index:15;background:#9fd8ff;animation:sg-flash .35s ease-out forwards;pointer-events:none}
@keyframes sg-flash{from{opacity:.35}to{opacity:0}}
.sg-stage{--lx:50%;--ly:45%;--lr:60px;position:absolute;inset:0;background:#0b1116 url(gorilla-hero.jpg) 38% 50%/cover;touch-action:none;outline:none}
.sg-stage::before{content:'';position:absolute;inset:0;z-index:1;background:#03080ce6;transition:opacity .3s;-webkit-mask:radial-gradient(circle at var(--lx) var(--ly),transparent 0 var(--lr),#000 calc(var(--lr) + 1px));mask:radial-gradient(circle at var(--lx) var(--ly),transparent 0 var(--lr),#000 calc(var(--lr) + 1px));pointer-events:none}
.sg:not(.is-playing) .sg-stage::before{opacity:0}
.sg-lens{position:absolute;z-index:3;left:var(--lx);top:var(--ly);width:calc(var(--lr) * 2);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #cfeaff;box-shadow:0 0 0 1px #0008,0 0 28px #5fa8e0aa,inset 0 0 22px #5fa8e055;pointer-events:none;transition:opacity .3s}
.sg:not(.is-playing) .sg-lens{opacity:0}
.sg-lens::before,.sg-lens::after{content:'';position:absolute;left:50%;top:50%;background:#cfeaffaa}
.sg-lens::before{width:2px;height:20%;transform:translate(-50%,-50%)}.sg-lens::after{height:2px;width:20%;transform:translate(-50%,-50%)}
.sg-ring{--p:0;position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(#9fd8ff calc(var(--p)*360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 64%,#000 65%);mask:radial-gradient(circle,transparent 64%,#000 65%)}
.sg-dot{position:absolute;z-index:2;width:0;height:0}
.sg:not(.is-playing) .sg-dot:not(.is-found){opacity:0}
.sg-dot i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#9fd8ff;box-shadow:0 0 0 4px #9fd8ff44,0 0 18px #5fa8e0;animation:sg-pulse 1.4s ease-in-out infinite}
.sg-dot.is-ticket i{border-radius:4px;width:26px;height:16px;left:-13px;top:-8px;background:linear-gradient(135deg,#ffd76a,#ff9f43);box-shadow:0 0 0 4px #ffd76a44,0 0 20px #ffb347}
.sg-dot b{position:absolute;left:14px;top:-12px;white-space:nowrap;padding:4px 9px;border-radius:10px;background:#f4f8fb;color:#07131d;font-size:11px;font-weight:700;opacity:0;transform:translateY(6px);transition:.25s}
.sg-dot.is-found{z-index:4}.sg-dot.is-found i{background:#7ee087;box-shadow:0 0 0 4px #7ee08744,0 0 18px #7ee087;animation:none}
.sg-dot.is-found b{opacity:1;transform:none}
.sg-dot.is-found::after{content:attr(data-pts);position:absolute;left:-16px;top:-42px;font-weight:800;font-size:16px;color:#7ee087;text-shadow:0 2px 8px #000;animation:sg-up 1s ease-out forwards}
@keyframes sg-pulse{50%{transform:scale(.7)}}
@keyframes sg-up{to{transform:translateY(-22px);opacity:0}}
.sg-hud{position:absolute;z-index:10;left:14px;right:14px;top:58px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-10px);transition:.3s;pointer-events:none}
.sg.is-playing .sg-hud{opacity:1;transform:none}
.sg-timer{--t:1;flex:none;position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:conic-gradient(#9fd8ff calc(var(--t)*360deg),#ffffff22 0);font-weight:800;font-size:14px;color:#fff}
.sg-timer::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#07131ddd}
.sg-timer b{position:relative;font-variant-numeric:tabular-nums}
.sg-pills{flex:1;display:flex;gap:5px}
.sg-pill{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;padding:4px 8px;border-radius:12px;background:#07131dcc;backdrop-filter:blur(8px);border:1px solid #ffffff22;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#9fb6c5}
.sg-pill b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;text-transform:none;color:#fff;font-variant-numeric:tabular-nums}
.sg-view{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;cursor:default}
.sg-view[hidden]{display:none}
/* intro: camera pointed at the giant standee */
.sg-intro{background:#000}
.sg-cam{position:absolute;inset:0;overflow:hidden;background:#0c1a12}
.sg-cam::before{content:"";position:absolute;inset:-10%;background:url(gorilla-hero.jpg) 70% 30%/cover;filter:blur(18px) brightness(.55) saturate(1.1)}
.sg-cam-photo{position:absolute;left:-3%;top:15%;width:106%;aspect-ratio:1;background:url(gorilla-hero.jpg) 0 0/100% 100%;filter:saturate(1.05) brightness(.9);-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent);animation:sg-camdrift 9s ease-in-out infinite alternate}
@keyframes sg-camdrift{from{transform:translate(0,0)}to{transform:translate(-1.5%,1%)}}
.sg-standee{position:absolute;left:67%;top:27%;width:30%;aspect-ratio:1/2.3;padding:7% 5% 5%;border-radius:6px;background:linear-gradient(170deg,#0b1a26,#03080c 60%);box-shadow:0 24px 40px -8px #000,inset 0 0 0 2px #9fd8ff44;transform:perspective(600px) rotateY(-12deg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6%}
.sg-standee::after{content:'';position:absolute;left:14%;right:14%;bottom:-4%;height:4%;border-radius:0 0 6px 6px;background:#2a3540}
.sg-standee small{font:800 5px/1.2 Inter,Arial,sans-serif;letter-spacing:.2em;color:#9fd8ff}
.sg-standee strong{font:900 11px/.95 Inter,Arial,sans-serif;letter-spacing:-.04em;color:#fff}
.sg-standee strong span{display:block;color:#ffd76a}
.sg-standee .sg-qr{position:relative;width:92%;aspect-ratio:1;padding:6%;border-radius:6px;background:#fff}
.sg-standee .sg-qr img{display:block;width:100%;height:100%}
.sg-standee em{font:700 5px/1.3 Inter,Arial,sans-serif;font-style:normal;color:#cfe3f0}
.sg-lock{position:absolute;inset:-18%;animation:sg-lock 4.5s ease-in-out infinite}
.sg-lock i{position:absolute;width:26%;height:26%;border:3px solid #fff;filter:drop-shadow(0 0 6px #5fa8e0)}
.sg-lock i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.sg-lock i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.sg-lock i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 10px}.sg-lock i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
@keyframes sg-lock{0%,10%{opacity:0;transform:scale(1.5)}28%,100%{opacity:1;transform:scale(1)}}
.sg-open{position:absolute;left:12px;right:12px;top:60px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:#f4f8fbf0;color:#07131d;box-shadow:0 20px 40px -10px #000c;animation:sg-open 4.5s ease-in-out infinite}
.sg-open em{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#b9d9ee,#5fa8e0)}
.sg-open span{flex:1;font-size:12px;font-weight:700;line-height:1.2}.sg-open small{display:block;font-size:9px;font-weight:600;color:#5a6b78}.sg-open b{font-size:12px;color:#1f6fb2}
@keyframes sg-open{0%,34%{opacity:0;transform:translateY(-14px)}42%,100%{opacity:1;transform:none}}
.sg-sheet{position:relative;z-index:2;margin-top:auto;padding:22px 18px 26px;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#0b1620f2,#050b10);border-top:1px solid #ffffff22;text-align:center;display:grid;gap:12px}
.sg-sheet h3{margin:0;font-size:24px;letter-spacing:-.04em;line-height:1}
.sg-sheet p{margin:0;font-size:13px;line-height:1.5;color:#a9bdca}
.sg-btns{display:flex;gap:8px;justify-content:center}
.sg-btn{flex:1;border:0;cursor:pointer;padding:14px 12px;border-radius:30px;font:800 14px/1 Inter,Arial,sans-serif;background:linear-gradient(95deg,#e6f5ff,#b9d9ee 50%,#6fb2e6);color:#07131d}
.sg-btn.ghost{background:#ffffff14;color:#eef4f8;border:1px solid #ffffff38}
.sg-btn:focus-visible{outline:3px solid #9fd8ff;outline-offset:3px}
.sg-tag{justify-self:center;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:30px;background:#ffd76a1f;border:1px solid #ffd76a55;color:#ffe29a;font-size:11px;font-weight:700}
/* turn + end */
.sg-turn{justify-content:flex-end;background:linear-gradient(180deg,#03080c40,#03080cd9 70%)}
.sg-end{justify-content:center;align-items:center;gap:14px;padding:70px 18px 24px;background:radial-gradient(circle at 50% 40%,#ffd76a26,transparent 55%),#03080cee;text-align:center}
.sg-end h3{margin:0;font-size:26px;letter-spacing:-.04em}
.sg-ticket{position:relative;width:100%;max-width:250px;padding:18px 18px 16px;border-radius:14px;background:linear-gradient(135deg,#ffe08a,#ffb347);color:#2a1a00;text-align:left;box-shadow:0 20px 50px -10px #ffb34799;animation:sg-win .7s cubic-bezier(.2,1.4,.4,1) both}
.sg-ticket::before,.sg-ticket::after{content:'';position:absolute;top:58%;width:20px;height:20px;border-radius:50%;background:#050b10}
.sg-ticket::before{left:-10px}.sg-ticket::after{right:-10px}
.sg-ticket small{display:block;font:800 9px/1 Inter,Arial,sans-serif;letter-spacing:.2em;opacity:.7}
.sg-ticket strong{display:block;font:900 30px/1 Inter,Arial,sans-serif;letter-spacing:-.04em;margin:6px 0 12px}
.sg-ticket div{display:flex;justify-content:space-between;padding-top:12px;border-top:2px dashed #2a1a0055;font-size:12px;font-weight:700}
@keyframes sg-win{from{transform:scale(.6) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.sg-scores{list-style:none;padding:0;margin:0;display:grid;gap:6px;width:100%;max-width:250px}
.sg-scores:empty{display:none}
.sg-scores li{display:flex;justify-content:space-between;padding:9px 13px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f;font-size:14px}
.sg-scores li:first-child{border-color:#ffd76a88}
.sg-best{margin:0;font-size:11px;color:#7f9aab}
@media(max-width:900px){.sg{grid-template-columns:1fr}.sg-device{order:-1}}
@media(max-width:650px){.sg{padding:18px 16px 24px}.sg-copy h2{font-size:40px}.sg-device{width:min(310px,88%)}}
@media(prefers-reduced-motion:reduce){.sg-dot i,.sg-cam,.sg-lock,.sg-open{animation:none}.sg-dot.is-found::after,.sg-ticket{animation:none}}

.sg-standee::before{content:"";position:absolute;left:38%;right:38%;bottom:-16%;height:12%;background:linear-gradient(#2a3540,#151c22)}

/* runner */
.sg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;background:#0a1a0f;cursor:pointer}
.sg-hud .sg-pills{gap:4px}
.sg-danger{display:inline-flex;gap:3px;align-items:center;height:14px}
.sg-danger i{width:7px;height:7px;border-radius:50%;background:#7ee087}
.sg-danger[data-level="1"] i:nth-child(3),.sg-danger[data-level="0"] i:nth-child(n+2){background:#ffffff2e}
.sg-danger[data-level="1"] i{background:#ffc94d}.sg-danger[data-level="1"] i:nth-child(3){background:#ffffff2e}
.sg-danger[data-level="0"] i:first-child{background:#ff5a4e;box-shadow:0 0 8px #ff5a4e}

/* 3D gorilla in step card 01 */
.g3d{background:radial-gradient(circle at 50% 45%,#173a58 0%,#081421 75%)}
.g3d canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;cursor:grab;touch-action:pan-y}
.g3d canvas:active{cursor:grabbing}
.g3d.is-3d>img{opacity:0}
.g3d b{z-index:2}
.g3d-hint{position:absolute;right:12px;bottom:10px;z-index:2;font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9fc6e6;opacity:0;transition:opacity .4s}
.g3d.is-3d .g3d-hint{opacity:.85}
.case-steps li:hover .g3d canvas{transform:none}

.sg-3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}

/* Standalone game page opened by the standee QR: only the game, full screen */
.sg-app-body{margin:0;min-height:100svh;background:#050b10;overflow:hidden}
.sg-app{position:fixed;inset:0;display:block;padding:0;background:#050b10}
.sg-app .sg-screenwrap{position:absolute;top:0;bottom:0;left:50%;width:min(100%,520px);transform:translateX(-50%);border-radius:0}
.sg-app .sg-hud{top:calc(env(safe-area-inset-top, 0px) + 12px)}
.sg-app .sg-sheet{padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px))}
.sg-app-bg{position:absolute;inset:0;background:url(gorilla-hero.jpg) 50% 25%/cover}
.sg-app-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050b1000 35%,#050b10 88%)}
.sg-app-title{margin:0;font-size:28px;letter-spacing:-.04em;line-height:1}