body{

    margin:0;
    overflow:hidden;
    background:#eef4fb;
    font-family:Arial;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;

}

#officeBg{

    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;

}

#officeBg svg{

    width:100%;
    height:100%;
    display:block;

}

@keyframes wifiBlink{

    0%, 100% { opacity:1; }
    50% { opacity:0.15; }

}

.wifi-blink{

    animation:wifiBlink 1.6s ease-in-out infinite;

}

canvas{

    display:block;
    position:relative;
    z-index:1;
    background:transparent;

}

#ui{

    position:absolute;

    top:20px;
    left:20px;

    z-index:100;

}

#counter{

    font-size:32px;
    font-weight:bold;

    margin-bottom:12px;

}

#uiButtons{

    display:flex;
    gap:10px;
    flex-wrap:wrap;

}

.upload{

    background:white;

    padding:12px;

    border-radius:12px;

    cursor:pointer;

    display:inline-block;

    border:none;

    font-size:15px;
    font-family:Arial;

}

.upload:hover{

    transform:scale(1.03);

}

.upload input{

    display:none;

}

#weaponBar{

    position:absolute;

    bottom:20px;
    width:100%;

    display:flex;

    justify-content:center;

    gap:15px;

    z-index:100;

}

.weapon{

    width:70px;
    height:70px;

    border:none;

    border-radius:20px;

    font-size:30px;

    cursor:pointer;

    transition:.2s;

    background:white;

}

.weapon:hover{

    transform:scale(1.1);

}

.active{

    outline:4px solid orange;

}

#headImage{

    position:absolute;

    width:70px;
    height:70px;

    border-radius:50%;

    overflow:hidden;

    background:#ffe0bd;

    border:4px solid #333;

    z-index:50;

    pointer-events:none;

    background-size:cover;
    background-position:center;

}

#bonkText{

    position:absolute;

    left:0;
    top:0;

    font-size:48px;
    font-weight:bold;

    color:#ff3131;

    text-shadow:3px 3px white;

    pointer-events:none;

    opacity:0;

    transform:scale(0.5);

    transition:
        opacity .15s,
        transform .15s;

    z-index:1000;

}

#weaponCursor{

    position:absolute;

    left:0;
    top:0;

    font-size:56px;

    pointer-events:none;

    z-index:900;

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

    transition:transform .05s linear;

    filter:drop-shadow(2px 4px 3px rgba(0,0,0,.25));

}

/* тряска экрана при ударе, для того самого антистресс-удовлетворения */
@keyframes screenShake{

    0%   { transform:translate(0,0); }
    25%  { transform:translate(-6px,4px); }
    50%  { transform:translate(6px,-4px); }
    75%  { transform:translate(-4px,-2px); }
    100% { transform:translate(0,0); }

}

body.shake{

    animation:screenShake .18s linear;

}

/* надпись-"крик" человечка */
#victimText{

    position:absolute;

    left:0;
    top:0;

    font-size:22px;
    font-weight:bold;

    color:#1e3a5f;

    background:#ffffff;

    padding:6px 12px;

    border-radius:14px;

    border:2px solid #1e3a5f;

    pointer-events:none;

    opacity:0;

    white-space:nowrap;

    transform:translate(-50%,0) scale(0.8);

    z-index:950;

}

@keyframes victimFloat{

    0%   { opacity:0; transform:translate(-50%,0) scale(0.7); }
    15%  { opacity:1; transform:translate(-50%,-14px) scale(1); }
    75%  { opacity:1; transform:translate(-50%,-55px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-75px) scale(0.9); }

}

#victimText.show{

    animation:victimFloat 1.1s ease-out forwards;

}

/* стартовый экран — заодно разблокирует звук по настоящему клику */
#startOverlay{

    position:fixed;
    inset:0;

    background:rgba(20,30,45,0.55);

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

    z-index:2000;

    cursor:pointer;

}

#startOverlay.hidden{

    display:none;

}

#startOverlayCard{

    background:white;

    padding:36px 44px;

    border-radius:24px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}

#startOverlayEmoji{

    font-size:52px;
    margin-bottom:10px;

}

#startOverlayTitle{

    font-size:24px;
    font-weight:bold;
    color:#222;

}

#startOverlaySubtitle{

    font-size:15px;
    color:#777;
    margin-top:6px;

}

/* бейдж с именем жертвы на груди */
#victimBadge{

    position:absolute;

    left:0;
    top:0;

    display:none;

    background:#ffffff;

    border:2px solid #333;

    border-radius:6px;

    padding:3px 10px;

    font-size:13px;
    font-weight:bold;
    font-family:Arial;
    color:#222;

    white-space:nowrap;

    pointer-events:none;

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

    z-index:60;

}

/* --- Кулер с колой --- */
#coolerWidget{

    position:fixed;

    left:190px;
    bottom:24px;

    width:74px;
    height:150px;

    cursor:pointer;

    z-index:500;

    -webkit-tap-highlight-color:transparent;

}

#coolerWidget:hover #coolerBody{

    transform:scale(1.04);

}

#coolerBody{

    position:absolute;
    inset:0;

    background:#f2f2f2;

    border:2px solid #d8d8d8;

    border-radius:10px;

    transition:transform .15s;

    box-shadow:0 6px 14px rgba(0,0,0,.15);

}

#coolerTank{

    position:absolute;

    left:9px;
    top:12px;

    width:56px;
    height:80px;

    background:linear-gradient(#8a140f,#4a0a07);

    border-radius:6px;

    overflow:hidden;

}

#coolerLabel{

    position:absolute;

    left:9px;
    top:12px;

    width:56px;
    height:80px;

    display:flex;

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

    color:#ffffff;

    font-weight:bold;
    font-size:12px;
    font-family:Arial;

    letter-spacing:1px;

    opacity:0.9;

    pointer-events:none;

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

}

#coolerBase{

    position:absolute;

    left:22px;
    bottom:14px;

    width:30px;
    height:16px;

    background:#4a4a4a;

    border-radius:3px;

}

.bubble{

    position:absolute;

    bottom:0;

    width:6px;
    height:6px;

    border-radius:50%;

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

    animation:bubbleRise linear forwards;

}

@keyframes bubbleRise{

    0%   { transform:translateY(0) scale(0.6); opacity:0.9; }
    100% { transform:translateY(-78px) scale(1.1); opacity:0; }

}

/* --- Резиновая уточка --- */
#duckWidget{

    position:fixed;

    right:200px;
    bottom:20px;

    font-size:56px;

    cursor:pointer;

    z-index:500;

    user-select:none;

    transform-origin:center bottom;

    filter:drop-shadow(2px 4px 3px rgba(0,0,0,.2));

}

#duckWidget.quack{

    animation:duckSquish .35s ease;

}

@keyframes duckSquish{

    0%   { transform:scale(1,1); }
    30%  { transform:scale(1.18,0.82); }
    60%  { transform:scale(0.92,1.1); }
    100% { transform:scale(1,1); }

}

#duckQuackText{

    position:absolute;

    left:50%;
    top:-6px;

    transform:translate(-50%,0);

    font-size:15px;
    font-weight:bold;
    font-family:Arial;
    color:#333;

    background:#fff;

    padding:3px 9px;

    border-radius:10px;

    border:2px solid #333;

    opacity:0;

    pointer-events:none;

    white-space:nowrap;

}

#duckQuackText.show{

    animation:quackFloat .9s ease-out forwards;

}

@keyframes quackFloat{

    0%   { opacity:0; transform:translate(-50%,0) scale(.7); }
    20%  { opacity:1; transform:translate(-50%,-14px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-46px) scale(.9); }

}

/* --- Дождь из долларов --- */
.moneyFall{

    position:fixed;

    top:-60px;

    pointer-events:none;

    z-index:400;

    animation-name:moneyDrop;
    animation-timing-function:linear;
    animation-fill-mode:forwards;

}

@keyframes moneyDrop{

    0%   { transform:translateY(0) rotate(0deg); opacity:1; }
    100% { transform:translateY(115vh) rotate(var(--rot, 360deg)); opacity:.9; }

}