/* ===================================================
   OPERATION: SAHTE GERÇEKLER
   =================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            #162b35 0%,
            #081219 52%,
            #020609 100%
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}

body{
    min-height:100dvh;
    overscroll-behavior:none;
    touch-action:none;
}

canvas{

    display:block;

    margin:0;

    image-rendering:auto;

    box-shadow:
        0 24px 70px rgba(0,0,0,.65),
        0 0 0 1px rgba(110,185,200,.16);

}

#game{

    width:100%;
    height:100%;

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

}

body.touch-layout #game{
    justify-content:center;
}

#orientation-overlay{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:
        max(24px, env(safe-area-inset-top))
        max(24px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(24px, env(safe-area-inset-left));
    color:#eef7fa;
    background:
        radial-gradient(circle at 50% 38%, #183541 0%, #081219 58%, #020609 100%);
    text-align:center;
}

#orientation-overlay[hidden]{display:none}

#mobile-fullscreen-prompt{position:fixed;inset:0;z-index:90000;display:flex;align-items:center;justify-content:center;padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:rgba(2,8,12,.82);color:#eef7fa;text-align:center}
#mobile-fullscreen-prompt[hidden]{display:none}
.fullscreen-card{width:min(420px,88vw);padding:22px;border:1px solid rgba(143,202,216,.42);border-radius:14px;background:rgba(7,24,32,.98);box-shadow:0 22px 65px rgba(0,0,0,.58)}
.fullscreen-card strong,.fullscreen-card span{display:block}.fullscreen-card strong{margin-bottom:8px;color:#ffe59b;font-size:22px}.fullscreen-card span{margin-bottom:17px;color:#bfd0d6;font-size:14px;line-height:1.45}
.fullscreen-card button{height:46px;border-radius:7px;font-weight:700;letter-spacing:.8px}.fullscreen-start{width:100%;background:#d2b45b;color:#10202a}.fullscreen-skip{margin-top:8px;padding:0 16px;background:transparent;color:#aebfc6;border:1px solid #4c6570}

.orientation-card{
    width:min(430px, 92vw);
    padding:30px 24px;
    border:1px solid rgba(143,202,216,.35);
    border-radius:16px;
    background:rgba(7,20,27,.9);
    box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.orientation-phone{
    width:58px;
    height:92px;
    margin:0 auto 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px solid #e8d38e;
    border-radius:10px;
    color:#e8d38e;
    font-size:34px;
    animation:turn-device 1.8s ease-in-out infinite;
}

.orientation-card h1{font-size:25px;margin-bottom:12px}
.orientation-card p{color:#b9cad0;font-size:16px;line-height:1.5}

@keyframes turn-device{
    0%,25%{transform:rotate(0deg)}
    65%,100%{transform:rotate(90deg)}
}

@media (prefers-reduced-motion:reduce){
    .orientation-phone{animation:none;transform:rotate(90deg)}
}

/* Mobil oyun kontrolleri: işlem solda, analog joystick sağda */
#mobile-controls{display:none;position:fixed;inset:0;z-index:60000;pointer-events:none}
body.touch-layout:not(.portrait-layout) #mobile-controls{display:block}
#mobile-action,#mobile-joystick{position:absolute;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#mobile-action{left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));min-width:138px;height:64px;padding:0 22px;border:2px solid rgba(240,207,112,.85);border-radius:32px;background:rgba(10,30,39,.9);color:#fff0b6;font:700 15px Arial,sans-serif;letter-spacing:1.2px;box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 18px rgba(240,207,112,.08)}
#mobile-action[hidden]{display:none}
#mobile-action.pressed{transform:scale(.94);background:rgba(51,91,99,.95)}
#mobile-joystick{right:max(24px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%}
.joystick-ring{position:absolute;inset:0;border:2px solid rgba(166,214,224,.5);border-radius:50%;background:radial-gradient(circle,rgba(31,73,84,.22) 0 36%,rgba(5,18,25,.72) 38% 100%);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.joystick-knob{position:absolute;left:41px;top:41px;width:50px;height:50px;border:2px solid rgba(240,207,112,.8);border-radius:50%;background:rgba(27,65,75,.95);box-shadow:0 6px 15px rgba(0,0,0,.5);will-change:transform}
#mobile-utilities{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));display:flex;gap:8px;pointer-events:auto}
#mobile-utilities button{min-width:88px;height:42px;padding:0 12px;border:1px solid rgba(140,190,202,.58);border-radius:7px;background:rgba(8,25,33,.9);color:#dce9ed;font:700 11px Arial,sans-serif;letter-spacing:.8px;touch-action:none;-webkit-tap-highlight-color:transparent}
#mobile-utilities button[hidden]{display:none}
#mobile-utilities button.active{border-color:#e8d38e;color:#ffe9a7;background:rgba(38,66,73,.96)}
#mobile-controls.panel-modal-open #mobile-action,#mobile-controls.panel-modal-open #mobile-joystick{display:none}

@media (max-height:430px){
    #mobile-action{height:56px;min-width:124px;bottom:max(14px,env(safe-area-inset-bottom))}
    #mobile-joystick{width:112px;height:112px;bottom:max(10px,env(safe-area-inset-bottom))}
    .joystick-knob{left:36px;top:36px;width:40px;height:40px}
    #mobile-utilities button{height:36px;min-width:78px;padding:0 9px;font-size:10px}
}

/* Üst ses kontrol paneli */
#audio-controls{position:fixed;top:12px;right:14px;z-index:50000;color:#dce7ec;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.5px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.audio-summary{height:38px;min-width:84px;padding:0 13px;border:1px solid #56717d;border-radius:5px;background:rgba(11,25,33,.96);color:#e8d38e;font-weight:700;cursor:pointer}.audio-summary:hover{background:#18313d}.speaker{margin-right:7px}
.audio-panel{position:absolute;right:0;top:45px;width:250px;max-height:calc(100dvh - 58px);overflow-y:auto;overscroll-behavior:contain;padding:14px 15px 16px;border:1px solid #56717d;border-radius:6px;background:rgba(8,20,27,.98)}.audio-title{padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid #344b56;color:#e8d38e;font-weight:700;letter-spacing:1.2px}
.audio-toggle,.audio-slider{display:grid;grid-template-columns:72px 1fr 38px;align-items:center;min-height:34px;gap:8px}.audio-toggle{grid-template-columns:1fr 42px}.audio-toggle input{position:absolute;opacity:0}.audio-toggle i{position:relative;width:40px;height:20px;border-radius:12px;background:#273c45;box-shadow:inset 0 0 0 1px #526872;cursor:pointer}.audio-toggle i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#9babb2;transition:.15s}.audio-toggle input:checked+i{background:#2d6872}.audio-toggle input:checked+i:after{left:23px;background:#f0cf70}
.audio-slider input{width:100%;accent-color:#d9b957;cursor:pointer}.audio-slider output{text-align:right;color:#95aab3;font-size:10px}
@media(max-width:700px){#audio-controls{top:6px;right:6px;transform:scale(.9);transform-origin:top right}}
@media(max-height:500px){
    body.touch-layout #audio-controls{top:5px;right:6px;transform:none}
    body.touch-layout .audio-summary{height:34px;min-width:76px;padding:0 10px}
    body.touch-layout .audio-panel{top:38px;width:232px;max-height:calc(100dvh - 44px);padding:8px 11px 10px}
    body.touch-layout .audio-title{padding-bottom:5px;margin-bottom:3px}
    body.touch-layout .audio-toggle,body.touch-layout .audio-slider{min-height:27px}
}

/* ===================================================
   LOADING
   =================================================== */

#loading{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:20px;

    color:#ffffff;

    background:#000000;

    z-index:9999;

}

#loading h1{

    font-size:40px;

    letter-spacing:3px;

}

#loading p{

    font-size:18px;

    color:#aaaaaa;

}

/* ===================================================
   GAME HUD
   =================================================== */

.hud{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    pointer-events:none;

}

.topBar{

    position:absolute;

    top:10px;

    left:50%;

    transform:translateX(-50%);

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

    color:white;

    padding:10px 25px;

    border-radius:8px;

    font-size:20px;

}

.bottomHelp{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

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

    color:#ddd;

    padding:10px 18px;

    border-radius:8px;

    font-size:16px;

}

/* ===================================================
   NOTEBOOK
   =================================================== */

.notebook{

    position:absolute;

    inset:0;

    display:none;

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

    z-index:1000;

}

.notebookContent{

    width:900px;

    height:600px;

    margin:40px auto;

    background:#f3edd8;

    border-radius:12px;

    padding:30px;

    overflow:auto;

    color:#222;

}

.notebook h1{

    font-size:34px;

    margin-bottom:20px;

}

.notebook ul{

    list-style:none;

}

.notebook li{

    margin-bottom:14px;

    padding-bottom:10px;

    border-bottom:1px solid #d5d5d5;

    font-size:18px;

}

/* ===================================================
   EVIDENCE
   =================================================== */

.evidence{

    position:absolute;

    inset:0;

    display:none;

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

    z-index:1001;

}

.evidenceContent{

    width:900px;

    height:600px;

    margin:40px auto;

    background:#202020;

    border-radius:12px;

    padding:30px;

    color:#ffffff;

    overflow:auto;

}

.evidenceItem{

    margin-bottom:25px;

    padding-bottom:20px;

    border-bottom:1px solid #555;

}

.evidenceTitle{

    color:#ffd34d;

    font-size:24px;

    margin-bottom:8px;

}

.evidenceDescription{

    color:#dddddd;

    line-height:1.6;

}

/* ===================================================
   DIALOG
   =================================================== */

.dialog{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    width:1100px;

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

    border-radius:12px;

    color:white;

    padding:22px;

    display:none;

}

.dialogName{

    color:#00ff99;

    font-weight:bold;

    font-size:24px;

    margin-bottom:12px;

}

.dialogText{

    font-size:22px;

    line-height:1.6;

}

.dialogHelp{

    margin-top:16px;

    color:#aaaaaa;

    text-align:right;

    font-size:16px;

}

/* ===================================================
   MISSION
   =================================================== */

.mission{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

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

    color:white;

    padding:14px 28px;

    border-radius:8px;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.missionTitle{

    color:#00ff99;

    font-size:22px;

    font-weight:bold;

}

.missionText{

    font-size:17px;

}

/* ===================================================
   MESSAGE
   =================================================== */

.popup{

    position:absolute;

    top:80px;

    left:50%;

    transform:translateX(-50%);

    background:#111;

    color:#00ff66;

    padding:14px 28px;

    border-radius:8px;

    font-size:24px;

    font-weight:bold;

    display:none;

}

/* ===================================================
   BUTTON
   =================================================== */

button{

    cursor:pointer;

    border:none;

    outline:none;

    transition:.2s;

}

button:hover{

    transform:scale(1.03);

}

/* ===================================================
   SCROLLBAR
   =================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#222;

}

::-webkit-scrollbar-thumb{

    background:#666;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#888;

}