/*
 * Subpages (imprint, contact, help, restore, activation)
 *
 * Extends style.css, loaded only via src/partials/page-start.php:
 * fluid width, forms, notices. The box (.page-card), header bar and
 * footer live in style.css because the game pages use them as
 * well.
 */

body.page {
    min-width: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
}
body.page div { font-family: inherit; font-size: inherit; }

/* style.css fixes .container at 610px - here it is fluid up to 760px */
body.page .container {
    width: auto;
    min-width: 0;
    max-width: 760px;
    padding: 0 16px;
    box-sizing: border-box;
}
body.page #top .container { padding-top: 0; padding-bottom: 0; }

main.page-main { margin-top: 28px; }

/* Notices after submitting */
.notice {
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 18px;
    background-color: rgba(255, 255, 255, 0.08);
    border-left: 4px solid #4FC3B5;
}
.notice.error {
    background-color: rgba(198, 40, 40, 0.2);
    border-left-color: #EF6B6B;
}

/* Forms */

/* Honeypot in the contact form: pushed off screen instead of display:none,
   some bots skip hidden fields */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-row { margin: 0 0 14px; }
.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #FFFFFF;
}
.page-card input[type="text"],
.page-card input[type="email"],
.page-card input[type="password"],
.page-card select,
.page-card textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: #1c2f2f;
    background-color: rgba(255, 255, 255, 0.94);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 12px;
}
.page-card textarea { min-height: 150px; resize: vertical; }
.page-card input:focus,
.page-card select:focus,
.page-card textarea:focus {
    outline: none;
    border-color: #4FC3B5;
    box-shadow: 0 0 0 3px rgba(79, 195, 181, 0.35);
}


.page-btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--accent);
    border: none;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
    padding: 10px 20px;
    cursor: pointer;
}
.page-btn:hover { background-color: var(--accent-hover); }
.page-btn.secondary {
    color: #FFFFFF;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.page-btn.secondary:hover { background-color: rgba(255, 255, 255, 0.12); }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }


/* Long URLs as link text (privacy policy) may break anywhere instead of
   widening the page on narrow screens */
.page-card a { overflow-wrap: anywhere; }

@media (max-width: 600px) {
    main.page-main { margin-top: 16px; }
    .page-card { padding: 20px 18px; border-radius: 10px; }
    .page-card h1 { font-size: 22px; }
    /* The fixed badge at the bottom left would cover links on narrow
       screens */
    body.page .durak_copy { display: none; }
}