/* ═══ android-device.css - the phone's body ════════════════════════════════
   Everything outside the screen: a satin aluminium frame with rounded rails,
   flat black glass with thin even bezels, a matte glass back with a camera
   bar that stands proud of it, side buttons with a short travel, the port
   and the speaker. An original design: no maker's artwork, no logo.

   Light. android-device.js reads the slab's real pose (mid-turn included)
   and gives every surface two numbers: --dk, how far it is turned away from
   the two studio lights, and --hl, how much highlight it catches. Here they
   are plain translucent layers. No blend modes and no filters anywhere in
   the 3D context: either one flattens it in Chrome (see .sheen in sim.css).
   ═══════════════════════════════════════════════════════════════════════ */

.device {
    /* satin graphite aluminium, darkest to lightest */
    --al-edge: #0a0b0d;
    --al-4: #26292d;
    --al-3: #474b51;
    --al-2: #5f646a;
    --al-1: #8e949b;
    --al-hi: #c9ced4;
    /* the rail across its thickness, front glass to back glass: the black
       edge of each glass, the rounded shoulder that catches the light, the
       flat satin band in the middle */
    --profile: var(--al-edge) 0, #15171a 2px, var(--al-4) 3px, var(--al-1) 5px,
        var(--al-hi) 6.2px, var(--al-2) 9px, var(--al-3) 14px, #43474d 20px,
        var(--al-3) 26px, var(--al-2) 31px, #7f858c 34px, #9ba1a8 35px,
        var(--al-4) 37px, #111214 38.5px, var(--al-edge) 40px;
    /* the frame seen from the front or the back: a hairline of the same
       metal, lit from the upper left */
    --ring: conic-gradient(from -50deg, #d6dbe0, #858b92 40deg, #42464b 95deg,
        #62676d 140deg, #a6acb3 175deg, #3c4045 230deg, #25282b 270deg,
        #6e737a 320deg, #d6dbe0);
}

/* ── the rails and the rounded corners ────────────────────────────────── */

/* The engine's corners are three 30-degree facets: at an angle they read as
   a polygon. android-device.js lays nine 10-degree facets on the same arc. */
.device > .corner { display: none; }
.dv-corner {
    position: absolute; left: 50%; top: 50%;
    height: 40px; margin-top: -20px;
    pointer-events: none;
    transition: opacity .25s ease;
    --pd: 0deg;                 /* back glass at the top, front at the bottom */
}
.device.flat .dv-corner { opacity: 0; }

/* each rail runs front-to-back along a different axis (sim.css turns them
   different ways), so --pd points the profile from the front glass */
.device .edge-r { --pd: 90deg; }
.device .edge-l { --pd: 270deg; }
.device .edge-t { --pd: 0deg; }
.device .edge-b { --pd: 180deg; }
/* the plastic antenna breaks, a little way in from each corner */
.device .edge-r, .device .edge-l {
    --breaks: linear-gradient(180deg, transparent 22px, #1b1d20 22px 24.5px,
        transparent 24.5px calc(100% - 24.5px), #1b1d20 calc(100% - 24.5px) calc(100% - 22px), transparent 0);
}
.device .edge-t, .device .edge-b {
    --breaks: linear-gradient(90deg, transparent 30px, #1b1d20 30px 32.5px,
        transparent 32.5px calc(100% - 32.5px), #1b1d20 calc(100% - 32.5px) calc(100% - 30px), transparent 0);
}
.device .edge {
    background:
        linear-gradient(rgba(5,6,8,var(--dk,.3)), rgba(5,6,8,var(--dk,.3))),
        linear-gradient(var(--pd), transparent 8px, rgba(255,255,255,var(--hl,0)) 16px 24px, transparent 32px),
        var(--breaks),
        linear-gradient(var(--pd), var(--profile));
}
/* A facet is lit from one end of its arc to the other (--dka/--hla at its
   left end, --dkb/--hlb at its right), so the corner shades smoothly instead
   of in ten flat steps. The highlight sits on the satin band, as on the rails. */
.dv-corner {
    background:
        linear-gradient(90deg, rgba(5,6,8,var(--dka,.3)), rgba(5,6,8,var(--dkb,.3))),
        linear-gradient(var(--pd), var(--profile));
}
.dv-corner::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 8px; bottom: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,var(--hla,0)), rgba(255,255,255,var(--hlb,0)));
    -webkit-mask-image: linear-gradient(transparent, #000 33.3%, #000 66.7%, transparent);
    mask-image: linear-gradient(transparent, #000 33.3%, #000 66.7%, transparent);
}

/* the side buttons stand out of the rail in 3D: the rail keeps its
   children in its own space instead of painting them flat onto itself */
.device .edge-r { transform-style: preserve-3d; }

/* SIM tray on the left rail, a microphone hole on the top one (added by
   android-device.js) */
.dv-sim {
    position: absolute; left: 13px; top: 452px;
    width: 14px; height: 66px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 0 .6px rgba(255,255,255,.12);
    pointer-events: none;
}
.dv-pin, .dv-mic {
    position: absolute;
    width: 4px; height: 4px; border-radius: 50%;
    background: #040506;
    box-shadow: 0 0 0 .6px rgba(255,255,255,.14);
    pointer-events: none;
}
.dv-pin { left: 18px; top: 528px; }
.dv-mic { left: 64%; top: 18px; }

/* ── the bottom: USB-C in the middle, microphone and speaker holes ─────── */

.device .edge-b .port {
    top: 14px;
    width: 44px; height: 12px;
    border-radius: 6px;
    /* the plastic tongue inside the socket */
    background:
        linear-gradient(#3a3e43, #24272b) 50% 50% / 28px 3.5px no-repeat,
        #030405;
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,.95),
        0 0 0 1px rgba(0,0,0,.45),
        0 .8px 0 1.2px rgba(255,255,255,.1);
}
.device .edge-b .grille {
    top: 16.5px; height: 7px;
    border-radius: 0;
    background: radial-gradient(circle, #030405 0 1.7px, rgba(0,0,0,.45) 2.2px, transparent 2.7px) 0 50% / 7px 7px repeat-x;
}
.device .edge-b .grille.left  { left: 52px; width: 35px; }   /* microphone */
.device .edge-b .grille.right { right: 38px; width: 63px; }  /* speaker */

/* ── side buttons: power, then the volume rocker ───────────────────────
   Each button is a narrow satin cap 5px proud of the rail with two side
   walls (its ::before and ::after turned a quarter round), so it shows its
   height when the phone is turned. The cap is 14px across; a clear 6px
   border each side keeps the target as wide as before. A press sinks it
   3px, about half a millimetre. */
.device .edge .btn3d {
    left: 7px; width: 26px;
    border: solid transparent;
    border-width: 0 6px;
    border-radius: 10px / 6px;          /* 4px by 6px on the cap itself */
    background:
        linear-gradient(rgba(255,255,255,var(--hv,0)), rgba(255,255,255,var(--hv,0))) padding-box,
        linear-gradient(rgba(5,6,8,var(--dk,.3)), rgba(5,6,8,var(--dk,.3))) padding-box,
        linear-gradient(90deg, transparent 3px, rgba(255,255,255,var(--hl,0)) 7px, transparent 11px) padding-box,
        linear-gradient(90deg, #555a60 0, #9aa0a7 1.4px, #c6cbd1 2.4px, #80868d 5px,
            #6a7077 8px, #868c93 11px, #a7adb4 12.4px, #34383c 14px) padding-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.4);
    transform-style: preserve-3d;
    transform: translateZ(5px);
    filter: none;
}
.device .edge .btn3d::before,
.device .edge .btn3d::after {
    content: '';
    position: absolute;
    top: 3px; bottom: 3px;
    width: 5px;
    pointer-events: none;
}
.device .edge .btn3d::before {     /* the wall facing the front glass */
    left: 0;
    transform-origin: 0 50%;
    transform: rotateY(90deg);
    background: linear-gradient(90deg, #8f959c, #5c6167 55%, #26292d);
}
.device .edge .btn3d::after {      /* the wall facing the back */
    right: 0;
    transform-origin: 100% 50%;
    transform: rotateY(-90deg);
    background: linear-gradient(270deg, #6f757c, #42464b 55%, #1a1c1f);
}
.device .edge .btn3d:hover { filter: none; --hv: .09; }
.device .edge .btn3d.press { filter: none; --hv: 0; transform: translateZ(2px); }
.device .edge .btn3d:focus-visible { outline: 2px solid var(--accent, #2f81f7); outline-offset: 1px; }

/* one rocker in two halves: no gap between them, square where they meet */
.device .edge .btn-power { top: 84px; height: 62px; }
.device .edge .btn-volup { top: 176px; height: 60px; border-radius: 10px 10px 6px 6px / 6px 6px 1px 1px; }
.device .edge .btn-voldn { top: 236px; height: 58px; border-radius: 6px 6px 10px 10px / 1px 1px 6px 6px; }
.device .edge .btn-volup { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28); }
.device .edge .btn-voldn { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4); }

/* ── the front: flat black glass in a hairline of frame ─────────────────
   2px of metal ring + 9px of black bezel = sim.css's 11px of padding, so
   the screen keeps exactly its size and place. */
.device .face-front {
    border: 2px solid transparent;
    padding: 9px;
    background:
        linear-gradient(#040506, #040506) padding-box,
        var(--ring) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),     /* the glass's own rounded edge */
        inset 0 0 0 2.5px rgba(0,0,0,.55);
}

/* The glass reflection: a soft window-shaped band that slides across the
   glass as the phone turns (--gx from android-device.js; it moves the way a
   real reflection does, against the turn) and grows toward grazing angles
   (--gs). Clipped to the glass; moved by transform only. */
.device .sheen {
    opacity: 1;
    overflow: hidden;
    backface-visibility: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,.045), transparent 32%);
}
.device .sheen::before {
    content: '';
    position: absolute;
    left: -50%; top: -30%;
    width: 200%; height: 160%;
    background: linear-gradient(105deg,
        transparent 44%, rgba(255,255,255,.085) 48.5%, rgba(255,255,255,.035) 51%,
        transparent 53%, transparent 55.5%, rgba(255,255,255,.04) 57%, transparent 59%);
    transform: translateX(var(--gx, -150px));
    opacity: var(--gs, .55);
}

/* ── the back: matte glass, the camera bar ────────────────────────────── */

.device .face-back {
    transform-style: preserve-3d;           /* the camera bar stands out of it */
    border: 2px solid transparent;
    background:
        /* the soft, wide highlight of frosted glass, where the key light falls */
        radial-gradient(closest-side, rgba(255,255,255,.12), rgba(255,255,255,.045) 50%, transparent)
            var(--bx, calc(50% - 200px)) var(--by, calc(50% - 330px)) / 640px 640px no-repeat padding-box,
        /* the camera bar's own shadow on the glass */
        radial-gradient(166px 54px at 50% 95px, rgba(0,0,0,.42), rgba(0,0,0,.18) 70%, transparent) padding-box,
        linear-gradient(rgba(0,0,0,var(--dk,.15)), rgba(0,0,0,var(--dk,.15))) padding-box,
        linear-gradient(168deg, #2c2f34 0%, #222428 42%, #1b1d20 100%) padding-box,
        var(--ring) border-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 7px rgba(0,0,0,.55);
}
.device .back-logo {
    bottom: 64px;
    font-size: 10px;
    letter-spacing: .48em;
    font-weight: 700;
    /* printed gloss on matte glass: a shade lighter, with a hairline lip */
    color: rgba(196,202,210,.2);
    text-shadow: 0 1px 0 rgba(0,0,0,.45);
    backface-visibility: hidden;
}

/* The camera bar: a pill the width of the phone less the corners, pushed
   --visor-d px out of the back (android-device.js builds its walls from the
   same number and from this box). Polished metal rim, black glass inset. */
.device .cam-island {
    --visor-d: 13;
    display: block;
    top: 50px; left: 34px;
    width: 300px; height: 86px;
    border-radius: 43px;
    border: 4px solid transparent;
    transform: translateZ(calc(var(--visor-d) * 1px));
    backface-visibility: hidden;
    background:
        linear-gradient(rgba(0,0,0,var(--dk,.15)), rgba(0,0,0,var(--dk,.15))) border-box,
        linear-gradient(176deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 38%, transparent 52%) padding-box,
        linear-gradient(#0a0b0e, #121418) padding-box,
        conic-gradient(from -50deg, #f0f3f6, #8d939a 45deg, #4b5056 100deg, #b8bec4 160deg,
            #3b3f44 230deg, #9ba1a8 300deg, #f0f3f6) border-box;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.9), inset 0 2px 3px rgba(0,0,0,.6);
}
.dv-vwall {
    position: absolute;
    backface-visibility: hidden;
    pointer-events: none;
    /* the glass end at the top, the bright chamfer under the rim at the
       bottom; lit end to end like the corner facets */
    background:
        linear-gradient(90deg, rgba(4,5,6,var(--dka,.3)), rgba(4,5,6,var(--dkb,.3))),
        linear-gradient(90deg, rgba(255,255,255,var(--hla,0)), rgba(255,255,255,var(--hlb,0))),
        linear-gradient(180deg, #141619 0, #33373c 25%, #7b8188 68%, #c4c9cf 88%, #6a6f75 100%);
}

/* Lenses: a polished ring, a black barrel, coated glass that throws back a
   violet and a green glint, the inner elements and the aperture. */
.device .cam-island .lens {
    position: absolute;
    top: 13px;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 3px solid transparent;
    background:
        radial-gradient(circle, #010203 0 16%, transparent 17.5%) padding-box,
        radial-gradient(circle, transparent 0 25%, rgba(120,140,200,.32) 27%, transparent 30%) padding-box,
        radial-gradient(circle, transparent 0 41%, rgba(80,92,125,.38) 43%, transparent 46%) padding-box,
        radial-gradient(ellipse 58% 38% at 32% 30%, rgba(150,112,232,.42), transparent 70%) padding-box,
        radial-gradient(ellipse 46% 32% at 70% 72%, rgba(62,192,152,.28), transparent 70%) padding-box,
        radial-gradient(circle, #0c0f15 0 54%, #1d222c 64%, #06070a 72%) padding-box,
        conic-gradient(from 210deg, #eef1f4, #7c828a, #d6dade, #4a4f55, #eef1f4) border-box;
    box-shadow:
        0 0 0 2px #050608,
        0 0 0 3px rgba(255,255,255,.07),
        inset 0 0 0 2px #000,
        inset 0 4px 8px rgba(0,0,0,.7);
}
.device .cam-island .lens::after {      /* the sharp glint of the front element */
    position: absolute;
    inset: 5px;
    width: auto; height: auto;
    margin: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 27%, rgba(255,255,255,.75) 0 1.4px, transparent 2.4px),
        radial-gradient(ellipse 40% 26% at 36% 26%, rgba(255,255,255,.16), transparent 70%);
}
.device .cam-island .lens.dv-main { left: 14px; }
.device .cam-island .lens.dv-wide,
.device .cam-island .lens.dv-tele { top: 16px; width: 46px; height: 46px; }
.device .cam-island .lens.dv-wide { left: 78px; }
.device .cam-island .lens.dv-tele { left: 134px; }
.dv-flash {
    position: absolute;
    left: 200px; top: 28px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    /* the diffuser's rings over a warm white */
    background:
        repeating-radial-gradient(circle, rgba(255,255,255,.5) 0 .8px, transparent 1.3px 2.4px) padding-box,
        radial-gradient(circle at 40% 35%, #fbf7ea, #ddd3b4 55%, #a79c7c) padding-box,
        conic-gradient(from 210deg, #e9ecef, #767c83, #cfd3d8, #4a4f55, #e9ecef) border-box;
    box-shadow: 0 0 0 1.5px #050608;
}
.dv-sensor {
    position: absolute;
    left: 236px; top: 34px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #2a2f38, #07080a 70%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 2px #050608;
}
.dv-vmic {
    position: absolute;
    left: 258px; top: 37px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 .6px rgba(255,255,255,.14);
}

/* ── the ground: a soft contact shadow under the phone ────────────────── */
.device > .shadow {
    bottom: -54px;
    width: 330px; height: 70px;
    background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.3) 45%, transparent);
    filter: blur(7px);
}

@media (prefers-reduced-motion: reduce) {
    .device .edge .btn3d, .dv-corner { transition: none; }
}