/* Hírek gomb és popup (l. plans/28a-hirlevel-megvalositasi-terv.md 11.
   pont, views/partials/news-button.hbs, views/layouts/minimal.hbs,
   public/js/news-panel.js). */

/* A gomb ikonja a global tileset borítékja (4. sor, 0-tól számozva 3):
   nyitott boríték (3. oszlop), amikor áll, csukott (2. oszlop), amikor
   pulzál. A kivágás képlete az exit-button.css .scene-action-btn-icon-é. */
.scene-news-btn-icon {
    --tile-row: 3;
    --tile-col: 3;
}

.scene-news-btn.has-unread .scene-news-btn-icon {
    --tile-col: 2;
}

/* Játékos, nem szabályos pulzálás: ugrás, szünet, rezgés, összemegy és
   visszapattan, hosszabb szünet. Az EGÉSZ gomb mozog, így az ikon és a
   felirat együtt ugrál (nem egymástól függetlenül fordulnak el). A hosszt
   és a késleltetést a JS gombonként kicsit véletlenszerűre állítja.
   Szándékosan nincs prefers-reduced-motion kivétel: Windowson kikapcsolt
   "Animációk megjelenítése" (pl. távoli asztalon) mellett is pulzálnia kell,
   ugyanúgy, mint a játék többi figyelemfelhívó animációjának. */
/* A felirat a többi gombhoz hasonlóan csak egérrel fölé állva csúszik ki
   (l. exit-button.css), és mivel az egész gomb mozog, akkor együtt ugrál
   az ikonnal. */
.scene-news-btn.has-unread {
    animation: news-btn-pulse var(--news-pulse-duration, 6s) ease-in-out var(--news-pulse-delay, 0s) infinite;
    transform-origin: 2.75cqw 70%;
}

@keyframes news-btn-pulse {
    0%    { transform: translateY(0) rotate(0) scale(1); }
    4%    { transform: translateY(-14%) rotate(0) scale(1.02); }
    8%    { transform: translateY(0) rotate(0) scale(1); }
    11%   { transform: translateY(-9%) rotate(-7deg) scale(1.02); }
    15%   { transform: translateY(0) rotate(0) scale(1); }
    /* szünet */
    32%   { transform: rotate(0); }
    34%   { transform: rotate(6deg); }
    36%   { transform: rotate(-6deg); }
    38%   { transform: rotate(5deg); }
    40%   { transform: rotate(-4deg); }
    42%   { transform: rotate(0); }
    /* szünet */
    56%   { transform: scale(1); }
    60%   { transform: scale(0.85); }
    65%   { transform: scale(1.12) rotate(3deg); }
    69%   { transform: scale(0.97); }
    72%   { transform: scale(1); }
    /* hosszabb szünet */
    100%  { transform: translateY(0) rotate(0) scale(1); }
}

/* Popup: ugyanaz a teljes képernyős, sötétített háttér, mint a fejezet-
   ismertetőnél. A panel világos "papír" színű, mint a hírlevél, hogy a hír
   ugyanúgy nézzen ki, mint a levélben. A bezáró gomb a közös
   .popup-close-btn (pages/zone.css), itt sötét változatban. */
.news-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 16, 0.6);
}

.news-overlay[hidden] {
    display: none;
}

.news-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 960px;
    max-width: 94vw;
    height: 86vh;
    box-sizing: border-box;
    background: #efe9dc;
    border: 1px solid #d6c9a8;
    border-top: 3px solid #c9a24a;
    border-radius: 1em;
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.6);
    color: #2d3340;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    overflow: hidden;
}

.news-panel .popup-close-btn {
    background: rgba(26, 32, 44, 0.85);
    border-color: rgba(26, 32, 44, 0.85);
    color: #fff;
    z-index: 1;
}

.news-panel-title {
    margin: 0;
    padding: 0.8em 2.5em 0.6em;
    text-align: center;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: #12161e;
}

/* Feliratkozási felhívás: kitölti a panel teljes tartalmát. A megafon és a
   logó alul-felül auto margót kap (l. lent), így a szabad hely 4 egyenlő
   részre oszlik: a megafon a cím és a szöveg közti, a logó a gombok és a
   panel alja közti sáv közepén áll, a szöveg+gombok blokk középen marad. */
.news-prompt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2em;
    padding: 1em 2.5em;
    text-align: center;
}

.news-prompt[hidden],
.news-feed[hidden] {
    display: none;
}

/* A felhívás képei: fent a global tileset hangosbemondója (4. sor 2.
   oszlop, 0-tól számozva 3/1), alul a játék kis logója. A logó
   magasságát a panel (86vh) magasságához kötjük, hogy alacsony ablakban
   se tolja ki a gombokat. */
.news-prompt-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    max-height: 18vh;
    object-fit: contain;
    margin: auto 0;
}

.news-prompt-icon {
    --tile-row: 3;
    --tile-col: 1;
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    flex-shrink: 0;
    margin: auto 0;
    background-image: var(--tileset-global);
    background-size: calc(var(--tileset-img-w) / var(--tileset-cell) * 100%) calc(var(--tileset-img-h) / var(--tileset-cell) * 100%);
    background-position:
        calc(var(--tile-col) * var(--tileset-cell) / (var(--tileset-img-w) - var(--tileset-cell)) * 100%)
        calc(var(--tile-row) * var(--tileset-cell) / (var(--tileset-img-h) - var(--tileset-cell)) * 100%);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0.2em 0.4em rgba(0, 0, 0, 0.35));
}

/* A panel a hírcím-lista miatt szélesebb lett (960px) -- a felhívás
   szövege a korábbi, 640px-es panel szélességén marad. */
.news-prompt-text {
    max-width: 560px;
    margin: 0 0 0.6em;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 2.2rem;
    line-height: 1.25;
    color: #12161e;
}

.news-prompt-accept {
    padding: 0.6em 2.2em;
    border: none;
    border-radius: 0.6em;
    background: linear-gradient(180deg, #e0b84f, #c9a24a);
    box-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.25);
    color: #12161e;
    font-family: 'Denk One', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.news-prompt-accept:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0.35em 0.8em rgba(0, 0, 0, 0.3);
}

/* A "Nem kérek" ugyanolyan sárga gomb, mint az elfogadás, csak jóval
   kisebb és a sima szöveg-betűtípussal: jól látható, de nem versenyez a
   fő gombbal. */
.news-prompt-decline {
    padding: 0.4em 1.2em;
    border: none;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #e0b84f, #c9a24a);
    box-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.2);
    color: #12161e;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.news-prompt-decline:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
}

/* Hírfolyam: bal oldalt a hírcím-lista, jobbra (szélesebb sáv) a
   gördíthető hírek, alul a feliratkozás jelölőnégyzete egy nem gördülő
   lábléc-sávban (a címsor párja). A két oszlopot egy árnyalattal
   sötétebb háttér és egy vékony vonal választja el. */
.news-feed {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.news-feed-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    border-top: 1px solid #ddd2b8;
    border-bottom: 1px solid #ddd2b8;
}

/* A jelölőnégyzet a közös components/fancy-checkbox.css "szép" változata. */
.news-feed-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.4em 2.5em 1.4em;
    color: #12161e;
}

.news-index {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em 0.8em 1.6em;
    overflow-y: auto;
    background: #e7e0cf;
    border-right: 1px solid #d6c9a8;
    /* Görgethető, de gördítősáv nélkül. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-index::-webkit-scrollbar {
    display: none;
}

.news-index[hidden] {
    display: none;
}

.news-index-card {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    flex-shrink: 0;
    width: 100%;
    padding: 0.7em 0.8em;
    border: 1px solid #d6c9a8;
    border-left: 4px solid transparent;
    border-radius: 0.5em;
    background: #f6f2e8;
    color: #12161e;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.news-index-card:hover {
    background: #fff;
}

.news-index-card.is-selected {
    background: #fff;
    border-color: #c9a24a;
    border-left-color: #c9a24a;
    box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.12);
}

.news-index-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.news-index-date {
    font-size: 0.75rem;
    color: #7a7466;
}

/* A gördülő hírfolyam -- position: relative, hogy a hírek offsetTop-ja
   ehhez a konténerhez mérődjön (l. news-panel.js scrollTargetFor). */
.news-feed-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 1em 1.4em 1.6em;
}

@media (max-width: 700px) {
    .news-index {
        flex-basis: 150px;
    }
}

/* Minden hír külön fehér "lap", kis hézaggal a következőtől. */
.news-items {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.news-empty {
    text-align: center;
    color: #7a7466;
    font-style: italic;
}

/* Egy hír -- a renderNewsItem (services/news-render.js) kimenete. A
   képek ugyanúgy a konténer 80%-a, középre igazítva, mint a levélben. */
.news-item {
    position: relative;
    padding: 1.6em 2em 1.2em;
    background: #fff;
    border: 1px solid #d6c9a8;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.08);
}

.news-item-date {
    position: absolute;
    top: 0.9em;
    right: 1.2em;
    font-size: 0.8rem;
    color: #7a7466;
}

.news-item-title {
    margin: 0.6em 0 0.8em;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.3;
    color: #12161e;
}

.news-item-body p {
    margin: 0 0 1em;
    font-size: 1rem;
    line-height: 1.5;
}

.news-item-image {
    margin: 0.6em 0 1.2em;
    text-align: center;
}

/* A 80%-nál szélesebb kép arra kicsinyül, a keskenyebb az eredeti
   méretében marad (nem nagyítjuk fel). */
.news-item-image img {
    display: block;
    width: auto;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
}

.news-item-image figcaption {
    padding-top: 0.4em;
    font-size: 0.8rem;
    font-style: italic;
    color: #6b6f78;
}