/* Burgundy CSS fallback. The main phone uses local WebGL geometry.
   Hollow perimeter avoids the old stacked slabs showing through at side angles. */
.j-scene { position:absolute; inset:0; perspective:1700px; perspective-origin:50% 48%; pointer-events:none; z-index:3; }
.j-carrier { --j-half-depth:calc(var(--j-phone-h)*.0225); position:absolute; top:50%; left:50%; width:calc(var(--j-phone-h)*.482); height:var(--j-phone-h); transform:translate3d(-50%,-50%,0); transform-style:preserve-3d; will-change:transform; }
.j-phone { position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; }
.j-rim { position:absolute; left:var(--x); top:var(--y); width:calc(var(--j-phone-h)*var(--length) + .6px); height:calc(var(--j-half-depth)*2); background:linear-gradient(0deg,#663e4a,#a87787 12%,#663e4a 28%,#865463 75%,#ad8390 90%,#502c38); transform:translate(-50%,-50%) rotateZ(var(--a)) rotateX(90deg); backface-visibility:visible; }
.j-front,.j-back { position:absolute; inset:0; border-radius:calc(var(--j-phone-h)*.072); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.j-front { transform:translateZ(var(--j-half-depth)); background:#090b0f; border:1px solid #9b7280; padding:calc(var(--j-phone-h)*.008); box-shadow:inset 0 0 0 1px #67414e; }
.j-screen { height:100%; width:100%; position:relative; border-radius:calc(var(--j-phone-h)*.063); overflow:hidden; background:#f5f7fb; }
.j-screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; opacity:0; }
.j-screen img.j-active { opacity:1; }
.j-screen-glass { position:absolute; inset:0; background:linear-gradient(120deg,#ffffff0a,transparent 48%,#a8c1dc07); pointer-events:none; }
.j-dynamic-island { position:absolute; top:1.2%; left:50%; width:19%; height:2.5%; transform:translateX(-50%); border-radius:99px; background:#030406; box-shadow:inset 0 0 0 1px #11151b; }
.j-dynamic-island:after { content:''; position:absolute; right:10%; top:28%; width:12%; height:44%; border-radius:50%; background:radial-gradient(circle at 40% 40%,#1c2a42,#05070d 70%); }
.j-back { transform:rotateY(180deg) translateZ(var(--j-half-depth)); border:1px solid #714552; background:linear-gradient(125deg,#6d414f 0%,#48232f 45%,#5c313f 100%); box-shadow:inset 0 0 0 2px #80515f; }
.j-back:before { content:''; position:absolute; inset:29% 4.5% 2.5%; border-radius:calc(var(--j-phone-h)*.048); background:linear-gradient(130deg,#6d414f,#502a37); border:1px solid #9b68744d; }
.j-apple-mark { position:absolute; width:16%; height:auto; left:42%; top:49%; fill:#8c5b6b; }
.j-camera-island { position:absolute; top:3.1%; left:5.5%; width:89%; height:23.5%; border-radius:calc(var(--j-phone-h)*.044); background:linear-gradient(135deg,#855361,#502c39 85%); border:1px solid #9e7480; box-shadow:0 3px 1px #3f1c29,0 5px 8px #5d67752b,inset 0 0 0 1px #69404e; }
.j-lens { position:absolute; width:22%; aspect-ratio:1; border-radius:50%; border:calc(var(--j-phone-h)*.004) solid #835662; background:radial-gradient(circle at 40% 36%,#4d6680 0%,#142435 12%,#080e17 28%,#152130 40%,#03070c 54%,#202733 58%,#03070d 67%); box-shadow:0 0 0 1px #ad8590,0 2px 3px #4e586b70,inset 0 0 0 2px #10151e; }
.j-lens:nth-child(1) { left:5%; top:7%; }
.j-lens:nth-child(2) { left:5%; bottom:7%; }
.j-lens:nth-child(3) { left:31%; top:30%; }
.j-flash,.j-lidar { position:absolute; right:12%; width:9%; aspect-ratio:1; border-radius:50%; }
.j-flash { top:15%; background:radial-gradient(circle,#faf6e9,#d9d3c1); box-shadow:0 0 0 1px #aeb5bf; }
.j-lidar { bottom:15%; background:radial-gradient(circle,#151c27,#070a10); box-shadow:0 0 0 1px #aeb5bf; }
.j-microphone { position:absolute; right:15.5%; top:48%; width:2%; aspect-ratio:1; background:#37404d; border-radius:50%; }
.j-phone-shadow { position:absolute; left:50%; top:87%; width:250px; height:28px; border-radius:50%; background:radial-gradient(ellipse,#071b3b22,transparent 70%); z-index:1; transform:translateX(-50%); will-change:transform; }

/* Full-volume model replaces the CSS surfaces once local textures are ready. */
.j-phone-canvas { position:absolute; inset:0; width:100%; height:100%; display:none; pointer-events:none; }
.has-webgl-phone .j-phone-canvas { display:block; }
.has-webgl-phone .j-carrier { visibility:hidden; }

/* Simplified Android counterpart when WebGL is unavailable. */
.is-android .j-front,.is-android .j-back { border-radius:calc(var(--j-phone-h)*.046); border-color:#85869e; }
.is-android .j-screen { border-radius:calc(var(--j-phone-h)*.037); }
.is-android .j-rim { background:linear-gradient(0deg,#45465b,#b6b6ce 12%,#64667d 30%,#898ba3 78%,#c5c6dc 91%,#45465b); }
.is-android .j-back { background:linear-gradient(125deg,#8a8ba5,#5d5e78 53%,#77788f); box-shadow:inset 0 0 0 2px #9293ac; }
.is-android .j-back:before { display:none; }
.is-android .j-back:after { content:'SAMSUNG'; position:absolute; top:81%; width:100%; text-align:center; color:#424357; font:700 calc(var(--j-phone-h)*.019)/1 Arial,sans-serif; letter-spacing:.12em; }
.is-android .j-apple-mark { display:none; }
.is-android .j-camera-island { left:5.3%; top:2.5%; width:29%; height:36.5%; border-radius:calc(var(--j-phone-h)*.07); background:linear-gradient(120deg,#b3b4ce,#74758e 60%,#999ab3); border-color:#9fa0b9; }
.is-android .j-lens { width:83%; left:8.5%; border-color:#9798ad; box-shadow:0 0 0 1px #c1c2d2,0 2px 3px #38394d70,inset 0 0 0 2px #10151e; }
.is-android .j-lens:nth-child(1) { top:3%; }
.is-android .j-lens:nth-child(2) { top:35%; bottom:auto; }
.is-android .j-lens:nth-child(3) { top:67%; left:8.5%; }
.is-android .j-lidar { width:39%; left:125%; top:9%; bottom:auto; }
.is-android .j-flash { width:18%; left:136%; top:30%; }
.is-android .j-microphone { width:39%; left:125%; top:41%; background:radial-gradient(circle at 45% 40%,#25315c,#05080f 58%,#7a7c96 64%,#080b10 69%); }
.is-android .j-dynamic-island { width:3.6%; height:auto; aspect-ratio:1; top:1.7%; }
.is-android .j-dynamic-island:after { inset:25%; width:auto; height:auto; }