/*
 * Главная страница (resources/views/front.blade.php) — макеты владельца 2026-11-06 (v2: «единый каркас»), адаптивная.
 * Графика — картинки старой главной (__Theme/main):
 *   shell-top / shell-middle / shell-bottom — одна рамка (logo3.png, середина из bottom-bg.png, bottom-bg.png): две резные
 *     плашки, логотип, три панели; середина повторяется — рамка растёт под текст;
 *   frame-nav, frame-parchment, frame-panel — те же панели по отдельности (border-image: углы не растягиваются);
 *   menu.webp — кнопка меню (menu-bg.png), logo.webp — логотип (logo.png).
 * Виды:
 *   от 1240px — одна рамка шириной 1300 (не увеличивается; на невысоком экране — мельче);
 *   до 1239px — вход и логотип сверху, под ними меню и пергамент одной высоты, вплотную;
 *   низкий экран боком (телефон) — то же без высокой шапки, вход сразу виден;
 *   планшет и телефон стоя, до 540px — одна колонка, меню свёрнуто.
 */
:root {
    --ink: #291609;
    --link: #8b2b19;
    --gold: #e4d0a7;
    font-family: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: #211710; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { display: flow-root; position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: clip; padding-bottom: 32px; }
.scene { position: absolute; z-index: -1; inset: 0 0 auto; pointer-events: none; }
.scene img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 0 78%, transparent 100%); mask-image: linear-gradient(#000 0 78%, transparent 100%); }

.layout { position: relative; display: grid; }
.left { display: contents; }
.frame { display: none; }
.brand { grid-area: brand; position: relative; z-index: 3; filter: drop-shadow(0 9px 8px rgba(13, 7, 5, .8)); }
.brand img { display: block; width: 100%; height: auto; }
.auth { grid-area: auth; }
.nav { grid-area: nav; }
.parchment { grid-area: main; position: relative; z-index: 2; }
.right { grid-area: right; }

/* ---- Вход ---- */
.auth {
    border: 6px ridge #846039;
    border-radius: 19px 19px 6px 6px;
    background: linear-gradient(135deg, #57391f, #25160f 52%, #50311d);
    padding: 9px 10px 10px;
    box-shadow: 0 6px 14px #100b09b3, inset 0 0 0 2px #31190b;
}
.auth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 7px; }
.auth-fields input {
    width: 100%; min-width: 0; height: 28px; padding: 3px 7px;
    color: #312018; border: 2px solid #b48a54; border-radius: 3px; outline-offset: 2px;
    background: linear-gradient(#fffdfa, #eee7da);
    font-family: Arial, sans-serif; font-size: 12px;
}
.auth-fields input:focus { outline: 2px solid #67abaf; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.auth--in .auth-actions { grid-template-columns: 1fr 1fr; }
.auth--in form { display: contents; }
.welcome { margin: 2px 2px 8px; color: #f3dfb4; font-size: 13px; text-shadow: 0 1px 2px #000; }
.wood-button {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 29px; padding: 3px 6px;
    color: #fff2cc; font-weight: 700; font-size: 10px; text-transform: uppercase; text-decoration: none;
    border: 1px solid #b48249; border-radius: 5px;
    background: linear-gradient(#794c25, #382015 48%, #1e110c);
    box-shadow: inset 0 1px #deae63, 0 2px 3px #130b08;
    text-shadow: 0 1px 2px #000;
    cursor: pointer;
}
.wood-button:hover, .wood-button:focus-visible { filter: brightness(1.23); }
.wood-button--primary { background: linear-gradient(#b96024, #794017 50%, #321507); }
.wood-button--lost { width: 29px; opacity: .5; cursor: default; }
.wood-button--lost:hover { filter: none; }

/* ---- Меню разделов ---- */
.nav > summary { display: none; }
.nav-list { display: flex; flex-direction: column; gap: 7px; }
.nav-link {
    position: relative; display: block;
    min-height: 30px; padding: 8px 12px 5px 29px;
    text-decoration: none; text-transform: uppercase; white-space: nowrap;
    color: var(--gold); font-size: 12px; font-weight: 700; line-height: 1.1;
    text-shadow: 0 1px 1px #1b1009;
    border: 1px solid #a17c4b; border-radius: 19px;
    background: linear-gradient(180deg, #806042, #50331f 44%, #29170f 95%);
    box-shadow: 0 1px #2c1a0d, inset 0 1px rgba(240, 206, 131, .7), inset 0 -1px #281307;
}
.nav-link::before {
    content: ""; position: absolute; top: 50%; left: 10px; margin-top: -5px;
    width: 8px; height: 8px; border: 1px solid #dfc26e; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #bde6d3, #207a82 60%, #0f3038 95%);
    box-shadow: 0 0 4px #19b4b45e;
}
a.nav-link:hover, .nav-link.is-active, a.nav-link:focus-visible { color: #fff1c8; filter: brightness(1.2); }
.nav-link.is-soon { opacity: .5; cursor: default; }
.nav-link.is-soon::before { background: #4a3a2a; box-shadow: none; }

/* ---- Пергамент ---- */
.parchment { display: flex; flex-direction: column; color: var(--ink); }
.parchment-body { flex: 1; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.parchment-body h1 { font-size: 16px; margin: 0 0 8px; color: #5a2a00; }
.parchment-body p { margin: 0 0 8px; }
.parchment-body a { color: var(--link); font-weight: bold; }
.parchment-body .error { color: #a31e0b; font-weight: bold; }
.parchment-body .muted { color: #6b5a3e; font-size: 11px; }
.parchment-body input[type=text], .parchment-body input[type=password], .parchment-body input[type=email], .parchment-body select {
    max-width: 100%; padding: 3px 6px; font: 13px Arial, sans-serif;
    border: 1px solid #a08060; border-radius: 2px; background: #fffaf0; color: #291609;
}
.parchment-body input[type=submit] { padding: 4px 14px; font: bold 13px Arial, sans-serif; cursor: pointer; }
.copyright { margin: 14px 0 0; text-align: center; font-size: 10px; color: #241608; }
.right { color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

/* =========================== Компьютер: одна рамка 1300 =========================== */
@media (min-width: 1240px) {
    .layout {
        width: 1300px;
        min-height: 740px;
        /* ниже героев картины (она растянута по ширине — герои ниже на широком экране), но без прокрутки вниз */
        margin: max(12px, min(12vw, calc(100vh - 780px))) auto 0;
        grid-template-columns: 290px 520px 270px;
        grid-template-rows: 135px auto;
        grid-template-areas: "auth . ." "nav main right";
        column-gap: 50px;
        padding: 165px 62px 62px 58px;
        zoom: .94;
    }
    .frame {
        display: block; position: absolute; z-index: 0; inset: 0; pointer-events: none;
        background: url("shell-top.webp") top center / 1300px 480px no-repeat, url("shell-bottom.webp") bottom center / 1300px 256px no-repeat;
    }
    .frame::before { content: ""; position: absolute; inset: 480px 0 256px; background: url("shell-middle.webp") top center / 1300px 60px repeat-y; }
    .auth, .nav, .parchment, .right { position: relative; z-index: 1; }         /* поверх рамки (.left — display: contents) */

    /* логотип — уже в рамке: ссылка поверх него */
    .brand { position: absolute; left: 380px; top: 0; width: 540px; height: 300px; filter: none; }
    .brand img { width: 100%; height: 100%; opacity: 0; }

    /* вход — на левой резной плашке */
    .auth { align-self: start; justify-self: start; width: 266px; margin: 2px 0 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
    .auth-fields input { height: 30px; }
    .wood-button { min-height: 30px; font-size: 11px; }

    /* меню — кнопками старой главной */
    .nav { justify-self: center; }
    .nav-list { gap: 9px; }
    .nav-link {
        width: 235px; height: 38px; min-height: 0; padding: 0 0 0 46px; line-height: 38px;
        border: 0; border-radius: 0; box-shadow: none;
        background: url("menu.webp") center / 235px 38px no-repeat;
        color: #e4d4b7; font-size: 17px; font-weight: normal;
    }
    .nav-link::before { left: 21px; }

    .parchment { margin-top: 28px; }
    .right { padding: 0 10px; }
}
@media (min-width: 1340px) { .layout { zoom: 1; } }
/* Рамка не увеличивается (владелец 2026-11-06: на 3425px — «слишком огромные»); на невысоком экране — чуть мельче,
   чтобы вход, меню и пергамент помещались без прокрутки. */
@media (min-width: 1240px) and (max-height: 820px) { .layout { zoom: .88; } }
@media (min-width: 1240px) and (max-height: 720px) { .layout { zoom: .8; } }

/* =========================== Ноутбук, планшет боком: две колонки =========================== */
@media (max-width: 1239px) {
    .layout {
        grid-template-columns: 250px minmax(0, 520px);
        grid-template-areas: "auth brand" "nav main" ". right";
        justify-content: center;
        align-items: start;
        padding: clamp(40px, 7vw, 100px) 12px 0;
    }
    .brand { justify-self: center; width: 400px; margin: 0 0 -58px; }
    .auth { align-self: end; margin: 0 -6px 10px 0; }
    /* меню и пергамент — одной высоты, рамки сходятся */
    .nav {
        align-self: stretch; position: relative; z-index: 1;
        margin-right: -14px;
        min-height: 334px;
        padding: 54px 40px 40px 30px;
        border: 0 solid transparent;
        border-image: url("frame-nav.webp") 80 60 130 60 fill / 63px 47px 102px 47px stretch;
        filter: drop-shadow(0 7px 9px rgba(22, 10, 5, .7));
    }
    .parchment {
        align-self: stretch;
        min-height: 345px;
        padding: 70px 50px 44px;
        border: 0 solid transparent;
        border-image: url("frame-parchment.webp") 152 128 170 128 fill / 114px 96px 128px 96px round;
        filter: drop-shadow(0 8px 10px rgba(15, 8, 4, .65));
    }
    .right { display: none; }
    .has-aside .right {
        display: block; margin-top: 12px;
        min-height: 424px; padding: 150px 34px 60px;
        border: 0 solid transparent;
        border-image: url("frame-panel.webp") 190 60 130 60 fill / 149px 47px 102px 47px stretch;
    }
}

/* ---- Низкий экран боком (телефон): шапка не нужна, вход сразу виден ---- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1239px) {
    .layout { padding-top: 8px; grid-template-columns: minmax(0, 250px) minmax(0, 510px); }
    .brand { width: 230px; margin-bottom: -34px; }
    .parchment { min-height: 300px; }
}

/* =========================== Телефон и планшет стоя: одна колонка =========================== */
@media (orientation: portrait) and (max-width: 1366px), (max-width: 540px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "brand" "auth" "nav" "main" "right";
        width: min(100%, 620px);
        min-height: 0;
        margin: 0 auto;
        padding: clamp(110px, 40vw, 300px) 12px 0;
        row-gap: 14px;
        zoom: 1;
    }
    .frame { display: none; }
    .brand { position: relative; left: auto; top: auto; justify-self: center; width: min(88vw, 400px); height: auto; margin: 0;
        filter: drop-shadow(0 9px 8px rgba(13, 7, 5, .8)); }
    .brand img { height: auto; opacity: 1; }
    .auth {
        align-self: auto; margin: 0; padding: 14px;
        border: 6px ridge #846039; border-radius: 19px 19px 6px 6px;
        background: linear-gradient(135deg, #57391f, #25160f 52%, #50311d);
        box-shadow: 0 6px 14px #100b09b3, inset 0 0 0 2px #31190b;
    }
    .auth-fields input { height: 44px; font-size: 16px; }
    .wood-button { min-height: 44px; font-size: 12px; }
    .wood-button--lost { width: 44px; }
    .welcome { font-size: 15px; }
    .nav {
        align-self: auto; margin: 0; min-height: 0; padding: 0;
        border: 6px ridge #846039; border-radius: 12px; border-image: none;
        background: linear-gradient(135deg, #4a301b, #25160f 52%, #43291a);
        box-shadow: 0 6px 14px #100b09b3; filter: none;
    }
    .nav > summary {
        display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px;
        list-style: none; cursor: pointer; color: #f1d59a; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 4px #000;
    }
    .nav > summary::-webkit-details-marker { display: none; }
    .nav > summary::after { content: "▾"; transition: transform .15s; }
    .nav[open] > summary::after { transform: rotate(180deg); }
    .nav-list { gap: 8px; padding: 0 14px 16px; }
    .nav-link { width: auto; height: auto; min-height: 44px; padding: 14px 12px 10px 32px; line-height: 1.1; font-size: 13px; font-weight: 700; }
    .parchment { min-height: 300px; padding: 52px 40px 40px; border-image-width: 102px 85px 113px 85px; }
    .parchment-body { font-size: 14px; }
    .parchment-body input[type=text], .parchment-body input[type=password], .parchment-body input[type=email] { width: 100%; min-height: 40px; font-size: 16px; }
    .parchment-body select { min-height: 40px; font-size: 16px; }                 /* день, месяц, год — в строку */
    .parchment-body input[type=submit] { min-height: 44px; font-size: 16px; }
    .right { display: none; }
    .has-aside .right { display: block; min-height: 0; margin: 0; padding: 20px; border: 6px ridge #846039; border-radius: 12px; border-image: none; background: #25150e; }
}
@media (max-width: 360px) {
    .layout { padding-left: 8px; padding-right: 8px; }
    .parchment { padding: 48px 32px 38px; border-image-width: 91px 77px 102px 77px; }
}
/* Палец, а не мышь: поля не мельче 16px — иначе Safari увеличивает страницу при вводе. */
@media (pointer: coarse) {
    .auth-fields input, .parchment-body input[type=text], .parchment-body input[type=password], .parchment-body select { font-size: 16px; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
    .auth-fields input { height: 34px; }
    .wood-button { min-height: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
    .nav-link, .wood-button { transition: filter .15s ease; }
}

/* Таблица опыта (front/exp.blade.php): строка уровня — жирная, апы — обычные. */
.exp-table { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 12px; }
.exp-table th, .exp-table td { padding: 2px 6px; border-bottom: 1px solid rgba(90, 42, 0, .18); text-align: right; }
.exp-table th { color: #5a2a00; border-bottom: 1px solid rgba(90, 42, 0, .5); }
.exp-table tr.level td { font-weight: bold; background: rgba(90, 42, 0, .07); }
.exp-table th, .exp-table td { overflow-wrap: normal; white-space: nowrap; }
.exp-table .short { display: none; }
@media (max-width: 540px) {
    .exp-table th, .exp-table td { padding: 2px 3px; font-size: 11px; }
    .exp-table .long { display: none; }
    .exp-table .short { display: inline; }
}