.pinball-container {
    border: 1px solid #7b7b7b;
    padding: 1em;
    margin: 1em 0;
    max-width: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.pinball-grid {
    display: grid;
    gap: 2px;
    margin: 0 auto;
    width: 100%;
    max-width: min(70vh, 90vw);
    position: relative;
}

.pinball-cell {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.pinball-cell.main-cell {
    background: #222;
    border: 1px solid #7b7b7b;
}
.pinball-cell.main-cell[data-pin-type="/"]::before,
.pinball-cell.main-cell[data-pin-type="\\"]::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 80%;
	top: 10%;
	left: 50%;
	border-radius: 10px;
	background-color: #f2bfbf;
	transform: translateX(-50%) rotate(45deg);
}

.pinball-cell.main-cell[data-pin-type="\\"]::before {
	transform: translateX(-50%) rotate(-45deg);
}

.pinball-cell.border-cell {
    aspect-ratio: 0;
    height: 100%;
    width: 100%;
    background: #111;
}

.pinball-cell.exit-cell {
    cursor: pointer;
    transition: all 0.2s;
}

.pinball-cell.exit-cell:hover {
    background: #333;
}

.pinball-cell.launch-cell {
    background: rgb(21, 91, 35);
}

.launch-arrow {
    font-size: 1.5em;
    /* animation: bounce 0.5s infinite alternate; */
}

@keyframes bounce {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

/* .pinball-cell.pin-visible { */
/*     font-size: 1.5em; */
/*     font-weight: bold; */
/*     /* animation: pin-bounce 1s infinite; */ */
/* } */

.pinball-cell.correct-exit {
    background: rgba(110, 255, 32, 0.3);
    border: 2px solid #6fff20 !important;
}

.pinball-cell.correct-exit::after {
    content: '✓';
    font-size: 1.5em;
    color: #6fff20;
}

.pinball-cell.correct-show {
    background: rgba(110, 255, 32, 0.3);
    border: 2px solid #6fff20 !important;
}

.pinball-cell.correct-show::after {
    content: '⍜';
    font-size: 1.5em;
    color: #6fff20;
    animation: breath-pulse 1.5s infinite;
}

/* Анимация для пинов */
@keyframes pin-bounce {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.pinball-start,
.pinball-stop,
.pinball-restart,
.pinball-next-level,
.pinball-prev-level,
.pinball-same-level {
    background: #222;
    border: 1px solid #7b7b7b;
    padding: 0.6em 1em;
    margin: 0.3em;
    font-size: 1em;
    transition: all 0.3s;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.pinball-start:hover,
.pinball-stop:hover,
.pinball-restart:hover,
.pinball-next-level:hover,
.pinball-prev-level:hover,
.pinball-same-level:hover {
    background: #EE4540;
    color: black;
    transform: translateY(-2px);
}

/* Специфичные стили для кнопок управления уровнем */
.pinball-next-level {
    border-color: #6fff20 !important;
}

.pinball-prev-level {
    border-color: #ffa500 !important;
}

.pinball-same-level {
    border-color: #7b7b7b !important;
}
.pinball-result {
    text-align: center;
    padding: 1em;
    font-size: 1.2em;
    line-height: 1.6;
    margin-top: 1em;
}

.pinball-result-buttons {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 0.8em;
}

.game-fullscreen .pinball-grid {
    margin: auto;
}

/* .game-fullscreen .pinball-result { */
/*     position: fixed; */
/*     bottom: 20px; */
/*     left: 0; */
/*     right: 0; */
/*     background: rgba(0, 0, 0, 0.8); */
/*     padding: 1em; */
/*     margin: 0; */
/* } */

.pinball-footer {
	display: flex;
  justify-content: center;
  align-items: center;
	gap: 1em;
	margin-top: 1em;
}

.pinball-header {
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.1em;
    color: #aaa;
}

.pinball-level {
    display: inline-block;
    padding: 0.3em 0.8em;
    background: #222;
    border: 1px solid #7b7b7b;
    border-radius: 4px;
    color: white;
}

/* Шарик — анимированный элемент */
.pinball-ball {
    position: absolute;
    width: clamp(10px, 3vw, 22px);
    height: clamp(10px, 3vw, 22px);
    background: radial-gradient(circle at 35% 35%, #fff 0%, #6fc7ff 50%, #1a6dcc 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(110, 199, 255, 0.9), 0 0 18px rgba(110, 199, 255, 0.4);
    transition: none;
}

/* Анимация появления линий траектории */
@keyframes ball-path-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Подсветка ячеек с изменением направления (отскок) */
.pinball-cell.ball-path-change {
    background: rgba(255, 179, 71, 0.08) !important;
}

.pinball-cell.wrong-exit {
    background: rgba(255, 50, 50, 0.3);
    border: 2px solid #ff3232 !important;
}

.pinball-cell.wrong-exit::after {
    content: '✗';
    font-size: 1.5em;
    color: #ff3232;
}

.pinball-result-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 0.8em;
}

.pinball-result-buttons button {
    margin: 0;
    white-space: nowrap;
}