.page-404{display:flex;align-items:center;justify-content:center;padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);background-color:var(--white)}.page-404__content{text-align:center}.badge-404{display:inline-block;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);padding-left:var(--spacing-md);padding-right:var(--spacing-md);background-color:var(--base-100);color:var(--base-600);border-radius:var(--radius-sm);font-size:var(--max-font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em}form input[type="search"]{display:block;width:100%;padding:var(--spacing-md);border:1px solid var(--base-300);border-radius:var(--radius-md);background-color:var(--white);font-size:var(--max-font-size-md);color:var(--base-900)}form input[type="search"]:focus{outline:2px solid var(--brand-500);outline-offset:2px}button.primary{display:inline-block;margin-top:var(--spacing-md);padding:var(--btn-v-padding) var(--btn-h-padding);background-color:var(--btn-bg-color);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-size:var(--max-font-size-md);font-weight:600;transition:background-color 0.2s ease}button.primary:hover{background-color:var(--btn-bg-color-hover)}button.primary:focus{outline:2px solid var(--brand-500);outline-offset:2px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(15 31 47 / .5);display:none;align-items:center;justify-content:center;z-index:1000}.modal.is-open{display:flex}.modal__content{background-color:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-2xl);max-width:90%;width:auto;position:relative;max-height:90vh;overflow-y:auto;box-sizing:border-box}.modal__close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:none;border:none;font-size:var(--max-font-size-xl);color:var(--base-700);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color 0.2s ease}.modal__close:hover{color:var(--base-900)}.modal__close:focus{outline:2px solid var(--brand-500);outline-offset:2px}.game__wrapper{position:relative;width:calc(100% - var(--spacing-lg) * 2);margin:var(--spacing-lg);overflow:hidden}#snake-game{display:block;width:100%;height:auto;aspect-ratio:1 / 1;border:2px solid var(--base-300);border-radius:var(--radius-md);background-color:var(--base-50);cursor:pointer;touch-action:none;box-sizing:border-box}.game__score{text-align:center;font-size:var(--max-font-size-lg);font-weight:700;color:var(--base-900);margin-bottom:var(--spacing-md)}.game__game-over{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgb(15 31 47 / .8);border-radius:var(--radius-md);align-items:center;justify-content:center;flex-direction:column;color:var(--white);z-index:10}.game__game-over.is-active{display:flex}@media (max-width:var(--breakpoint-md)){.page-404{min-height:auto;padding:var(--spacing-lg)}.page-404__content{padding:var(--spacing-md)}.modal__content{width:95%;max-height:95vh}.game__wrapper{max-width:300px}#snake-game{max-width:100%}}@media (max-width:var(--breakpoint-sm)){.page-404__content{padding:var(--spacing-sm)}.modal__content{width:98%;padding:var(--spacing-lg)}.game__wrapper{max-width:250px}}