* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    background: #000;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow: hidden;
}

/* =========================
   Rotate Device Message
========================= */

.rotate-device-message {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;

    padding:
        calc(30px + env(safe-area-inset-top))
        calc(30px + env(safe-area-inset-right))
        calc(30px + env(safe-area-inset-bottom))
        calc(30px + env(safe-area-inset-left));

    background: #000;
    color: #fff;

    text-align: center;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;

    z-index: 9999;
}

.rotate-device-message::before {
    content: "↻";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 22px;

    font-size: 46px;
    font-weight: 700;
    line-height: 1;

    transform: rotate(-90deg);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .35),
        inset 0 0 0 1px rgba(255, 255, 255, .15);
}

/* =========================
   Camera Base
========================= */

#cameraPage {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: #000;
    overflow: hidden;
}

#cameraVideo,
#selectedPhotoFrame {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));

    transform: translate(-50%, -50%);

    object-fit: cover;
}

#cameraVideo {
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

#livePreviewCanvas {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));

    transform: translate(-50%, -50%);

    z-index: 3;
    background: transparent;
    pointer-events: none;
}

#selectedPhotoFrame {
    display: none;
}

#captureCanvas {
    display: none;
}

/* =========================
   Bottom Menu - Professional UI
========================= */

.bottom-menu {
    position: absolute;
    left: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom));
    transform: translateX(-50%);

    width: min(100vw, calc(100dvh * 16 / 9));
    padding: 0 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 20;
    pointer-events: auto;
}

/* Common reset */

.bottom-menu-btn,
.capture-main-btn {
    border: none;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-weight: 900;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

/* Side buttons: ホーム / フレーム */

.bottom-menu-btn {
    width: 66px;
    height: 66px;

    border-radius: 50%;

    flex-direction: column;
    gap: 4px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            rgba(30, 30, 30, .72),
            rgba(10, 10, 10, .62)
        );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, .34),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .24);
}

.bottom-menu-btn:hover {
    background:
        linear-gradient(
            180deg,
            rgba(45, 45, 45, .78),
            rgba(18, 18, 18, .70)
        );
}

.bottom-menu-btn:active {
    transform: scale(.94);
}

.bottom-icon {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bottom-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .04em;
    color: #fff;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, .75),
        0 0 2px rgba(0, 0, 0, .65);
}

.layer-toggle-btn {
    position: absolute;
    right: max(25px, env(safe-area-inset-right));
    bottom: 6px;
    z-index: 3;
    pointer-events: auto;
}

.layer-toggle-btn:not(.is-behind) {
    box-shadow:
        0 0 0 3px rgba(255, 209, 102, .72),
        0 10px 26px rgba(0, 0, 0, .34);
}

.layer-toggle-btn.is-behind {
    background:
        linear-gradient(
            180deg,
            rgba(26, 126, 174, .88),
            rgba(10, 72, 108, .82)
        );
    box-shadow:
        0 0 0 3px rgba(115, 215, 255, .72),
        0 10px 26px rgba(0, 0, 0, .34);
}

.layer-toggle-icon {
    position: relative;
    width: 28px;
    height: 25px;
}

.layer-toggle-person,
.layer-toggle-person::after,
.layer-toggle-frame {
    position: absolute;
    display: block;
}

.layer-toggle-person {
    left: 10px;
    top: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #74dc8a;
    z-index: 2;
}

.layer-toggle-person::after {
    content: "";
    left: -2px;
    top: 7px;
    width: 12px;
    height: 13px;
    border-radius: 6px 6px 3px 3px;
    background: #74dc8a;
}

.layer-toggle-frame {
    inset: 4px 0 0;
    border: 2px solid #ffd166;
    border-radius: 4px;
    z-index: 3;
}

.layer-toggle-btn.is-behind .layer-toggle-frame {
    z-index: 1;
    border-color: #73d7ff;
}

/* =========================
   Capture Button - Camera Icon
========================= */

.capture-main-btn {
    position: relative;

    width: 78px;
    height: 78px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, .38),
        inset 0 0 0 2px rgba(255, 255, 255, .22);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

/* círculo externo branco */

.capture-main-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    border: 4px solid rgba(255, 255, 255, .95);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .25),
        0 8px 22px rgba(0, 0, 0, .35);
}

/* círculo interno branco */

.capture-main-btn::after {
    content: "";

    position: absolute;
    inset: 12px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .96);

    box-shadow:
        inset 0 -2px 6px rgba(0, 0, 0, .10),
        0 2px 8px rgba(0, 0, 0, .18);
}

/* ícone da câmera em SVG */

.capture-camera-icon {
    position: relative;
    z-index: 3;

    width: 44px;
    height: 44px;

    transform: translateY(-3px);

    fill: none;
    stroke: #727272;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capture-main-btn:active {
    transform: scale(.94);
}

/* caso ainda existam classes antigas */

.capture-core,
.capture-label,
.capture-circle {
    display: none;
}

/* =========================
   Frame Panel
========================= */

.frame-panel {
    position: absolute;
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: min(100vw, calc(100dvh * 16 / 9));
    min-height: 180px;

    padding:
        18px
        16px
        calc(22px + env(safe-area-inset-bottom));

    background: rgba(0, 0, 0, .84);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 30;

    transition:
        opacity .22s ease,
        transform .22s ease;
}

.frame-panel.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(100%);
}

.frame-panel-close {
    position: absolute;
    right: 14px;
    top: 12px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .96);
    color: #222;

    font-size: 21px;
    font-weight: 900;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.frame-panel-close:active {
    transform: scale(.94);
}

.frame-panel-title {
    margin: 0 52px 16px 2px;

    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.frame-carousel {
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 4px 4px 8px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.frame-carousel::-webkit-scrollbar {
    display: none;
}

.frame-btn {
    flex: 0 0 auto;

    width: 126px;
    height: 72px;

    padding: 4px;

    border: 3px solid rgba(255, 255, 255, .65);
    border-radius: 16px;

    background: rgba(255, 255, 255, .94);

    scroll-snap-align: center;

    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.frame-btn.selected {
    border-color: #ff6f91;
    transform: scale(1.08);

    box-shadow:
        0 0 0 4px rgba(255, 111, 145, .30),
        0 8px 20px rgba(0, 0, 0, .35);
}

.frame-btn img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    border-radius: 10px;
}

.frame-btn:active {
    transform: scale(.94);
}

.frame-btn.selected:active {
    transform: scale(1.02);
}

/* =========================
   Switch Camera Button
   bitmap icon
========================= */

.switch-camera-btn {
    position: absolute;
    top: calc(18px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));

    width: 48px;
    height: 48px;

    border: none;
    padding: 0;

    background: transparent;
    box-shadow: none;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 12;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
        transform .16s ease,
        opacity .16s ease;
}

.switch-camera-btn:active {
    transform: scale(.92);
    opacity: .8;
}

.switch-camera-img {
    width: 38px;
    height: 38px;

    display: block;
    object-fit: contain;

    pointer-events: none;

    filter:
        drop-shadow(0 2px 5px rgba(0, 0, 0, .65))
        drop-shadow(0 0 2px rgba(0, 0, 0, .55));
}

/* =========================
   Preview
========================= */

.preview-area {
    position: absolute;
    inset: 0;

    z-index: 30;
    background: #000;

    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-area.hidden {
    display: none;
}

#previewImage {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));

    object-fit: contain;
}

.preview-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(26px + env(safe-area-inset-bottom));

    display: flex;
    justify-content: center;
    gap: 16px;

    z-index: 35;
}

.preview-bottom button {
    border: none;
    border-radius: 999px;

    padding: 14px 24px;

    background: #fff;
    color: #333;

    font-size: 15px;
    font-weight: 900;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.preview-bottom button:active {
    transform: scale(.96);
}



/* =========================
   Photo / Frame Button Layout
   Apenas esta parte controla a posição dos botões inferiores
========================= */

.bottom-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 20;

    height: 78px;
    width: 100%;
    padding: 0;
    transform: none;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.frame-panel {
    z-index: 30;
}

.preview-area {
    z-index: 40;
}

/* Botão de foto no centro */

#captureBtn {
    position: absolute;
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);
    margin: 0;

    z-index: 2;
    pointer-events: auto;
}

#captureBtn:active {
    transform: translateX(-50%) scale(.94);
}

/* Botão フレーム / voltar painel à esquerda */

#openFramePanelBtn {
    position: absolute;
    left: max(25px, env(safe-area-inset-left));
    bottom: 6px;

    z-index: 3;
    pointer-events: auto;
}

/* Conteúdo interno não bloqueia o clique */

#openFramePanelBtn *,
#captureBtn *,
#layerToggleBtn * {
    pointer-events: none;
}

/* =========================
   Smartphone Orientation
========================= */

/* Smartphone na vertical:
   esconde a câmera e pede para girar */

/* =========================
   Smartphone Orientation
========================= */

.rotate-device-message {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;

    padding:
        calc(30px + env(safe-area-inset-top))
        calc(30px + env(safe-area-inset-right))
        calc(30px + env(safe-area-inset-bottom))
        calc(30px + env(safe-area-inset-left));

    background: #000;
    color: #fff;

    text-align: center;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.5;

    z-index: 9999;
}


/* Ajustes para smartphones landscape com pouca altura */

@media (orientation: landscape) and (max-height: 500px) {
    .bottom-menu {
        bottom: max(8px, env(safe-area-inset-bottom));
        height: 66px;
    }

    .bottom-menu-btn {
        width: 56px;
        height: 56px;
    }

    .capture-main-btn {
        width: 66px;
        height: 66px;
    }

    .capture-main-btn::after {
        inset: 10px;
    }

    .capture-camera-icon {
        width: 38px;
        height: 38px;
    }

    #openFramePanelBtn {
        bottom: 5px;
    }

    .layer-toggle-btn {
        right: max(12px, env(safe-area-inset-right));
        bottom: 5px;
    }

    .switch-camera-btn {
        top: calc(10px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
    }

    .frame-panel {
        min-height: 150px;

        padding:
            14px
            14px
            calc(14px + env(safe-area-inset-bottom));
    }

    .frame-panel-title {
        margin-bottom: 10px;
    }

    .preview-bottom {
        bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .preview-bottom button {
        padding: 11px 20px;
        font-size: 14px;
    }
}

#saveBtn,
#retakeBtn {
    position: relative;
    z-index: 50;
    pointer-events: auto;
    touch-action: manipulation;
}

/* =========================
   Correção Home Button
========================= */

#homeButton {
    position: fixed !important;

    top: calc(16px + env(safe-area-inset-top)) !important;
    left: calc(16px + env(safe-area-inset-left)) !important;

    right: auto !important;
    bottom: auto !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 50 !important;
}


/* =========================
   Correção Frame Panel
========================= */

.frame-panel {
    position: fixed;

    left: 50%;
    right: auto;
    bottom: 0;

    width: calc(
        100vw -
        env(safe-area-inset-left) -
        env(safe-area-inset-right) -
        32px
    );

    max-width: 1100px;

    transform: translateX(-50%);

    border-radius: 22px 22px 0 0;

    overflow: hidden;
    box-sizing: border-box;
}


/* Estado fechado */

.frame-panel.hidden {
    transform:
        translateX(-50%)
        translateY(100%);
}


/* Carrossel dentro do painel */

.frame-carousel {
    width: 100%;
    max-width: 100%;

    padding:
        4px
        54px
        10px
        4px;

    overflow-x: auto;
    overflow-y: hidden;
}


/* Impede os frames de encolherem */

.frame-btn {
    flex-shrink: 0;
}


/* Botão fechar sempre dentro do painel */

.frame-panel-close {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 5;
}