/* =========================================================
   DEVTOOLS DETERRENT

   Deterrent only - a technically
   determined visitor can still get
   around this (undocked DevTools
   windows, disabling JS execution
   timing, etc). It raises the bar for
   casual snooping; it is not real
   access control. See the note where
   ADMIN_KEY is defined for the same
   caveat applied to the generator
   gate.
========================================================= */

#devtools-overlay {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 2600;

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

    display: none;

    width:
        min(90%, 400px);

    padding: 28px;

    text-align: center;

    border-radius: 16px;

    background:
        rgba(18,18,20,.9);

    -webkit-backdrop-filter:
        blur(24px) saturate(1.4);

    backdrop-filter:
        blur(24px) saturate(1.4);

    box-shadow:
        0 20px 60px rgba(0,0,0,.6);

    border:
        1px solid rgba(255,255,255,.1);

}


#devtools-overlay strong {

    display: block;

    color: var(--red);

    font-size: 14px;

    margin-bottom: 8px;

}


#devtools-overlay span {

    color: rgba(255,255,255,.6);

    font-size: 13px;

    line-height: 1.5;

}


body.devtools-detected #devtools-overlay {

    display: block;

}


/* =========================================================
   LONG PRESS 2x INDICATOR
========================================================= */

#long-press-indicator {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 45;

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

    padding: 10px 20px;

    border-radius: 999px;

    background:
        rgba(0,0,0,.65);

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

    backdrop-filter:
        blur(10px);

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .5px;

    pointer-events: none;

    opacity: 1;

    transition: opacity .15s ease;

}


#long-press-indicator.hidden {

    opacity: 0;

    pointer-events: none;

}


/* =========================================================
   KEYBOARD SHORTCUTS OVERLAY
========================================================= */

.shortcuts-overlay {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.7);

}


.shortcuts-overlay.hidden {

    display: none;

}


.shortcuts-panel {

    width: 320px;

    max-width: 90vw;

    max-height: 80vh;

    overflow-y: auto;

    border: 1px solid #2a2a2a;

    border-radius: 12px;

    background: #111;

    padding: 16px;

}


.shortcuts-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    font-weight: 700;

    color: #fff;

    font-size: 15px;

}


.shortcuts-close-btn {

    border: none;

    background: transparent;

    color: #aaa;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    padding: 0 4px;

}


.shortcuts-close-btn:hover {

    color: #fff;

}


.shortcuts-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.shortcuts-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    font-size: 13px;

    color: #ccc;

}


.shortcuts-row kbd {

    flex: 0 0 auto;

    min-width: 28px;

    text-align: center;

    border: 1px solid #3a3a3a;

    border-radius: 6px;

    background: #1a1a1a;

    color: #fff;

    padding: 4px 8px;

    font-size: 12px;

    font-family: inherit;

}


/* =========================================================
   HTML UI END
========================================================= */