/* === ИГРА "КОРПОРАТИВНЫЙ ПОБЕГ" (ПОЛНАЯ ШИРИНА) === */
.runner-full-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Хак для выхода за пределы любых контейнеров */
    margin-top: 60px;
    position: relative;
    font-family: 'Fira Code', monospace;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    background: transparent;
}

.runner-full-wrapper.shake { animation: screenShake 0.4s cubic-bezier(.36,.07,.19,.97) both; border-color: var(--c-accent); }

.runner-header {
    display: flex; justify-content: space-between; padding: 15px 5%;
    border-bottom: 1px dashed var(--border);
    font-size: 0.9rem; color: var(--text-muted);
    background: rgba(5,5,5,0.8); z-index: 30; position: relative;
}

.runner-canvas {
    width: 100%; height: 350px; position: relative; overflow: hidden;
    cursor: pointer; touch-action: none;
    background: transparent;
}

/* Бегущая неоновая земля */
.runner-canvas::after {
    content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-accent) 0, var(--c-accent) 15px, transparent 15px, transparent 30px);
    animation: groundMove 0.8s linear infinite; z-index: 15;
}
.runner-canvas.paused::after { animation-play-state: paused; }

.runner-player { position: absolute; left: 10%; bottom: 2px; z-index: 20; transform-origin: bottom center; display: flex; justify-content: center; align-items: flex-end;}
#r-sprite { font-size: clamp(3rem, 8vw, 4rem); line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 42, 0, 0.4)); transform: scaleX(-1); display: inline-block; transform-origin: center bottom; transition: transform 0.1s; }
.runner-player.running #r-sprite { animation: runBob 0.3s infinite alternate; }
.runner-player.jumping #r-sprite { transform: scaleX(-1) scaleY(1.2) scaleX(0.8) rotate(10deg); }
.runner-player.falling #r-sprite { transform: scaleX(-1) scaleY(0.9) scaleX(1.1) rotate(-10deg); }
.runner-player.dead #r-sprite { transform: scaleX(-1) translateY(10px) rotate(90deg); filter: drop-shadow(0 0 15px red) grayscale(100%); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.runner-obstacle { position: absolute; bottom: 2px; font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1; z-index: 15; transform-origin: center; animation: obstacleWobble 2s infinite alternate ease-in-out; }
.runner-bg-item { position: absolute; font-size: 3rem; color: #222; z-index: 5; opacity: 0.2; filter: grayscale(100%); }
.dust-particle { position: absolute; background: rgba(255, 42, 0, 0.4); border-radius: 50%; bottom: 2px; z-index: 10; animation: dustFade 0.6s forwards cubic-bezier(0.2, 1, 0.3, 1); pointer-events: none;}

.runner-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); font-size: 1.5rem; background: rgba(5,5,5,0.7); z-index: 40; transition: opacity 0.3s; backdrop-filter: blur(4px);}
.runner-msg.hidden { opacity: 0; pointer-events: none; }

@keyframes runBob { 0% { transform: scaleX(-1) translateY(0) rotate(0deg); } 100% { transform: scaleX(-1) translateY(-8px) rotate(-5deg); } }
@keyframes obstacleWobble { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes groundMove { 0% { background-position: 0 0; } 100% { background-position: -30px 0; } }
@keyframes dustFade { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-40px, -20px) scale(3); } }
@keyframes screenShake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }

/* На мобильных смещаем человечка ближе к левому краю */
@media (max-width: 768px) {
    .runner-player { left: 5%; }
}