/* =====================================================
   Ответственность.exe
   Version: 1.0.0 Release
   style.css
   © 2026
===================================================== */

:root{
    --bg:#09090B;
    --surface:#141418;
    --surface-2:#1B1B20;
    --text:#F6F6F8;
    --muted:#8F8FA3;
    --line:rgba(255,255,255,.08);
    --purple:#6A5CFF;
    --cyan:#49D7FF;
    --green:#44D76E;
    --red:#FF4C61;
    --gold:#F5C451;
    --shadow:0 18px 60px rgba(0,0,0,.45);
    --radius:22px;
}

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

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    background:radial-gradient(circle at 50% 0%,rgba(106,92,255,.18),transparent 38%),var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow:hidden;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

.hidden{display:none!important;}
button{font-family:inherit;}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}
img{display:block;max-width:100%;}

main{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom)) 22px;
}

.loader-screen{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:5000;
}

.loader-content{width:min(90%,360px);text-align:center;}
.loader-logo{font-size:24px;}
.loader-text{margin-top:26px;color:var(--muted);font-size:14px;min-height:22px;line-height:1.55;}
.loader-progress{margin-top:30px;height:6px;background:#1A1A20;border-radius:999px;overflow:hidden;}
.loader-bar{width:35%;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:999px;animation:loaderMove 1.3s linear infinite;}

@keyframes loaderMove{
    from{transform:translateX(-120%);}
    to{transform:translateX(340%);}
}

.welcome-screen,.modal{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(9,9,11,.96);
    backdrop-filter:blur(14px);
    z-index:4000;
    padding:20px;
}

.modal{background:rgba(0,0,0,.72);z-index:4500;animation:fadeIn .25s ease;}

.welcome-card,.modal-card{
    width:min(92%,390px);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid var(--line);
    border-radius:28px;
    padding:34px;
    text-align:center;
    box-shadow:var(--shadow);
}

.modal-card{border-radius:26px;animation:popup .28s ease;}
.welcome-card h2,.modal-card h2{
    font-size:clamp(22px,6vw,30px);
    font-weight:800;
    line-height:1.15;
    text-align:center;
}
.welcome-version{margin-top:8px;color:var(--muted);font-size:13px;letter-spacing:.5px;}
.welcome-card p,.modal-card p{margin:26px 0;line-height:1.85;color:#E3E3E8;}
.welcome-fact{margin:0 0 24px;color:var(--cyan);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.55;}

#close-welcome,#close-about{
    width:100%;
    padding:16px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,var(--purple),var(--cyan));
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

#close-welcome:active,#close-about:active{transform:scale(.97);}

header{width:100%;text-align:center;margin-top:8px;}
header h1{font-size:34px;font-weight:800;letter-spacing:.2px;}
header p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.55;}

.oracle-container{width:100%;flex:1;display:flex;justify-content:center;align-items:center;margin-top:8px;margin-bottom:-12px;}

.oracle-ball{
    position:relative;
    width:min(66vw,300px);
    aspect-ratio:1;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:ballBreath 4.5s ease-in-out infinite;
    transition:transform .45s ease,filter .45s ease;
}

.oracle-ball img{width:100%;pointer-events:none;user-select:none;position:relative;z-index:3;}
.ball-glow{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,rgba(106,92,255,.32) 0%,rgba(73,215,255,.18) 45%,transparent 75%);filter:blur(28px);opacity:.72;animation:glowPulse 4s ease-in-out infinite;z-index:1;}
.ball-fog{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 40%,rgba(255,255,255,.14),transparent 60%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.08),transparent 65%);filter:blur(18px);opacity:0;transition:opacity .45s ease;z-index:2;}

.oracle-ball.thinking{animation:ballShake .18s linear infinite,ballGlowThinking 1.4s ease-in-out infinite;}
.oracle-ball.thinking .ball-fog{opacity:1;}
.oracle-ball.flash{filter:brightness(1.45);}
.oracle-ball.flash .ball-glow{opacity:1;transform:scale(1.18);}
.oracle-ball.yes{filter:drop-shadow(0 0 28px rgba(68,215,110,.55));}
.oracle-ball.no{filter:drop-shadow(0 0 28px rgba(255,76,97,.55));}
.oracle-ball.gold{filter:drop-shadow(0 0 34px rgba(245,196,81,.75));animation:ballBreath 4.5s ease-in-out infinite,goldPulse 1.6s ease-in-out infinite;}
.oracle-ball.gold .ball-glow{background:radial-gradient(circle,rgba(245,196,81,.45),rgba(255,235,170,.2) 45%,transparent 75%);}

.status{width:100%;max-width:420px;min-height:30px;margin-top:0px;margin-bottom:4px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.45;color:var(--cyan);opacity:.92;}
.answer{min-height:56px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:42px;font-weight:800;letter-spacing:.6px;animation:answerAppear .35s ease;}
.answer.yes{color:var(--green);}
.answer.no{color:var(--red);}
.answer.gold{color:var(--gold);font-size:30px;line-height:1.3;}
.result-caption{min-height:22px;margin-top:2px;margin-bottom:6px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5;}

.decision-button{width:100%;max-width:340px;padding:14px 22px;margin-top:4px;border:none;border-radius:18px;background:linear-gradient(135deg,var(--purple),var(--cyan));color:white;font-size:18px;font-weight:700;cursor:pointer;transition:transform .18s ease,filter .18s ease,opacity .25s ease;box-shadow:0 12px 34px rgba(106,92,255,.35);}
.decision-button:hover{filter:brightness(1.08);}
.decision-button:active{transform:scale(.97);}
.decision-button:disabled{opacity:.6;cursor:default;}

.counter{margin-top:12px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:#B8B8C0;opacity:.9;}
.changing-caption{max-width:360px;margin-top:12px;text-align:center;color:var(--muted);font-size:14px;line-height:1.55;min-height:40px;}
footer{width:100%;margin-top:auto;padding-top:10px;padding-bottom:max(14px,env(safe-area-inset-bottom));text-align:center;}
.footer-quote{margin-bottom:12px;color:#B9B9C6;font-size:13px;line-height:1.55;font-style:italic;}
.copyright{font-size:10px;color:#666670;line-height:1.6;}
.disclaimer{
    margin-top: 8px;
    margin-bottom: 6px;
    font-size: 10px;
    color: #5C5C65;
    line-height: 1.6;
}

/* Акцент на ⚠ */
.disclaimer:first-child {
    font-weight: 500;
    color: #8F8FA3;
}
.about-button{margin-top:18px;border:none;background:none;color:#8F8FA3;font-size:12px;cursor:pointer;transition:.25s;}
.about-button:hover{color:white;}
.about-button:active{transform:scale(.95);}
.about-year{margin-top:22px;color:#B9B9C6;font-size:13px;}
.about-small{margin-top:18px;color:#7E7E8F;font-size:12px;line-height:1.6;}

.fade-in{animation:fadeInSoft .4s ease;}

@keyframes ballBreath{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.02);}}
@keyframes glowPulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.95;transform:scale(1.08);}}
@keyframes ballShake{0%{transform:translateX(-2px) rotate(-.6deg);}25%{transform:translateX(2px) rotate(.5deg);}50%{transform:translateY(-1px);}75%{transform:translateX(-1px);}100%{transform:translateX(2px);}}
@keyframes ballGlowThinking{0%,100%{filter:brightness(1);}50%{filter:brightness(1.25);}}
@keyframes answerAppear{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popup{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadeInSoft{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes goldPulse{0%,100%{filter:drop-shadow(0 0 28px rgba(245,196,81,.6));}50%{filter:drop-shadow(0 0 46px rgba(245,196,81,.95));}}

@media (max-width:430px){
    header h1{font-size:30px;}
    header p{font-size:14px;}
    .oracle-ball{width:min(68vw,270px);}
    .answer{font-size:38px;}
    .answer.gold{font-size:26px;}
    .decision-button{max-width:320px;font-size:17px;}
    .welcome-card,.modal-card{padding:28px;}
}

@media (max-height:720px){
    .oracle-container{margin-top:4px;margin-bottom:-16px;}
    .oracle-ball{width:min(54vw,210px);}
    .status{margin-top:0;margin-bottom:2px;min-height:28px;font-size:13px;}
    .result-caption{margin-top:2px;margin-bottom:4px;min-height:20px;}
    .decision-button{margin-top:2px;padding:12px 18px;}
    .counter{margin-top:10px;}
    footer{padding-top:8px;}
}

@media (orientation:landscape){
    body{overflow:auto;}
    main{padding-top:24px;padding-bottom:24px;}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ======================================
   Developer Console
====================================== */

.developer-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:6000;
}

.developer-window{
    width:min(92%,520px);
    height:min(80vh,620px);
    display:flex;
    flex-direction:column;
    background:#070707;
    border:2px solid #3cff7b;
    border-radius:18px;
    overflow:hidden;
    box-shadow:
        0 0 30px rgba(60,255,123,.18),
        inset 0 0 20px rgba(60,255,123,.05);
}

.developer-header{
    padding:14px 18px;
    background:#111;
    color:#45ff75;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.developer-output{
    flex:1;
    overflow-y:auto;
    padding:18px;
    color:#45ff75;
    white-space:pre-wrap;
    font-size:14px;
    line-height:1.6;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.developer-input{
    border:none;
    outline:none;
    padding:16px 18px;
    background:#111;
    color:#45ff75;
    font-size:15px;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.developer-input::placeholder{
    color:#2aa34e;
}

/* ======================================
   Welcome Animation
====================================== */

.welcome-screen{
    animation: welcomeFadeIn 0.6s ease forwards;
}

.welcome-card{
    animation: welcomeSlideUp 0.5s ease 0.15s forwards;
    opacity: 0;
    transform: translateY(24px) scale(0.97);
}

@keyframes welcomeFadeIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes welcomeSlideUp{
    from{
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.changing-caption:empty {
    display: none;
}