/* ==========================================================================
   Kalózhajó — site.css (M8 UI/UX overhaul)
   Plain modern CSS instead of the in-browser LESS compilation:
   custom properties for the palette/spacing/fonts, flex/grid layout,
   the old .halfLeft/.halfRight classes kept working as the two book pages.
   Fonts: Pirata One (display) + Alegreya (body), both self-hosted OFL.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* sea / night */
    --c-sea-deep: #0a2036;
    --c-sea: #123a5e;
    --c-night: #081b2e;
    --c-cream: #f5ead0;

    /* parchment / ink */
    --c-parchment: #f2e2b6;
    --c-parchment-2: #ecd9a8;
    --c-parchment-3: #e3cd96;
    --c-ink: #3b2d17;
    --c-ink-soft: #6d5936;
    --c-ink-border: #c9ae78;

    /* accents */
    --c-primary: #16406f;        /* deep blue, primary actions / titles */
    --c-primary-bright: #1d5493;
    --c-accent: #7c2b1e;         /* bookmark-tab red */
    --c-accent-bright: #97392a;
    --c-gold: #e4c26a;
    --c-life: #cf2b2b;
    --c-xp: #1e6fd0;
    --c-danger: #8b1a1a;

    /* type */
    --font-display: 'Pirata One', 'PiecesofEightRegular', serif;
    --font-body: 'Alegreya', Georgia, 'Times New Roman', serif;

    /* spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;

    --shadow-card: 0 1px 3px rgba(59, 45, 23, 0.18), 0 4px 14px rgba(59, 45, 23, 0.10);
    --shadow-pop: 0 6px 24px rgba(4, 14, 26, 0.45);

    /* frame metrics */
    --rail-w: 168px;             /* bookmark tabs */
    --book-max: 1320px;
    --cover-w: clamp(18px, 2.6vw, 38px);   /* bőrborító szélessége */
    --corner-s: clamp(70px, 9vw, 120px);
    --head-h: 80px;
}

/* --------------------------------------------------------------------------
   2. Reset (essentials ported from reset.less / boilerplate.less)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

img { border: 0; height: auto; vertical-align: middle; }
img, video, canvas, svg { max-width: 100%; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
button, input[type="submit"], input[type="reset"], input[type="button"] { cursor: pointer; -webkit-appearance: button; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }
[hidden] { display: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--c-primary-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--c-primary); color: #fff; text-shadow: none; }

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    /* a könyv egy kapitányi asztalon fekszik: sötét tölgy, a széleken sötétebb */
    background:
        radial-gradient(ellipse at 50% 35%, rgba(20, 12, 6, 0) 35%, rgba(8, 4, 2, 0.7) 100%) fixed,
        url('../design/desk.jpg') repeat 0 0 / 600px 600px fixed,
        #2a1a10;
}

/* asztali kellékek a könyv két oldalán, csak ha van mellette hely */
body::before,
body::after {
    content: none;
    position: fixed;
    bottom: 2vh;
    width: clamp(240px, 15vw, 340px);
    aspect-ratio: 561 / 900;
    background: no-repeat center / contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 0;
}
body::before { left: max(8px, calc(50% - 980px)); background-image: url('../design/desk_left.png'); transform: rotate(-6deg); }
body::after  { right: max(8px, calc(50% - 980px)); background-image: url('../design/desk_right.png'); aspect-ratio: 448 / 900; transform: rotate(4deg); }
@media (min-width: 1760px) {
    body::before, body::after { content: ""; }
}
.sitehead, #wrapper { position: relative; z-index: 1; }
/* a fejléc lenyílói (értesítések, palack) a könyv fölé nyílnak */
.sitehead { z-index: 2; }

p { margin: 0 0 var(--sp-3); }

a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-primary-bright); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--c-primary);
    line-height: 1.15;
    margin: 0 0 var(--sp-3);
    text-shadow: 0 1px 0 rgba(255, 250, 230, 0.5);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }
h4, h5, h6 { font-size: 1.15rem; }

hr {
    border: 0;
    border-top: 1px solid var(--c-ink-border);
    height: 0;
    margin: var(--sp-4) 0;
}

small { font-size: 0.82em; color: var(--c-ink-soft); }

table { border-collapse: collapse; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--c-cream);
    color: var(--c-ink);
    padding: var(--sp-2) var(--sp-4);
    border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.sitehead {
    background:
        linear-gradient(180deg, rgba(18, 58, 94, 0.82) 0%, rgba(10, 32, 54, 0.94) 100%),
        url('../design/sea.jpg') repeat 0 0 / 512px 512px,
        var(--c-sea-deep);
    border-bottom: 2px solid rgba(8, 20, 34, 0.8);
    box-shadow: 0 2px 10px rgba(4, 12, 22, 0.5);
}

.headbar {
    max-width: calc(var(--book-max) + 2 * var(--sp-5));
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-5);
    min-height: var(--head-h);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.sitelogo { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.sitelogo img { width: auto; height: clamp(56px, 7vw, 76px); }

.headtools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.coinpurse {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    flex-wrap: wrap;
    background: rgba(7, 19, 33, 0.55);
    border: 1px solid rgba(228, 194, 106, 0.35);
    border-radius: var(--radius-m);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-cream);
    font-weight: 700;
    line-height: 1.2;
}
.coinpurse img.tinyicon { width: 20px; height: 20px; }
.coinpurse .highlight { color: var(--c-cream); font-size: 1.05rem; }

/* tevékenység-chip: minél van elfoglalva a kalóz (munka, gyakorlás, gyógyító, harc) */
.activitychip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    background: rgba(7, 19, 33, 0.55);
    border: 1px solid rgba(228, 194, 106, 0.35);
    border-radius: var(--radius-m);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-cream);
    text-decoration: none;
    line-height: 1.2;
    margin-left: auto;   /* asztalon az érmepurc mellé csúszik */
}
.activitychip img { flex-shrink: 0; }
.activitychip .chipwhat { font-weight: 700; white-space: nowrap; }
.activitychip .chiptime {
    color: var(--c-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.activitychip:hover { background: rgba(29, 84, 147, 0.6); text-decoration: none; }
/* asztalon a chip az érmepurc mellett, a jobb oldali eszközcsoportban áll */
.headbar:has(.activitychip) .headtools { margin-left: 0; }
/* lejárt a tevékenység: vedd át a jutalmat */
.activitychip.done { border-color: #7fb069; background: rgba(46, 92, 44, 0.6); }
.activitychip.done .chiptime { color: #cfe6b8; }

.iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(228, 194, 106, 0.35);
    background: rgba(7, 19, 33, 0.55);
    color: var(--c-cream);
}
.iconbtn:hover { background: rgba(29, 84, 147, 0.6); }
/* flex gyerekként az ikon nem nyomódhat össze (különben 6px széles csík lesz a csengőből) */
.iconbtn svg, .btn svg, .headlogout svg { flex-shrink: 0; min-width: 18px; }

.notifybadge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--c-life);
    border: 1px solid #7d1414;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.headlogout {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-m);
    color: var(--c-cream);
    text-decoration: none;
}
.headlogout:hover { background: rgba(29, 84, 147, 0.6); text-decoration: none; }

/* nyelvváltó: kis kerek címke a fejléc szerszámai előtt */
.langswitch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid rgba(228, 194, 106, 0.35);
    border-radius: var(--radius-m);
    color: var(--c-cream);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.langswitch:hover { background: rgba(29, 84, 147, 0.6); text-decoration: none; }
.headlogout svg { flex-shrink: 0; }
.headlogout span { font-weight: 700; }

/* notifications dropdown */
.notifywrap { position: relative; }

.notifypopup {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(340px, calc(100vw - 2 * var(--sp-4)));
    background: var(--c-parchment);
    color: var(--c-ink);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-pop);
    z-index: 300;
}
.notifypopup::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: var(--c-parchment);
    border-left: 1px solid var(--c-ink-border);
    border-top: 1px solid var(--c-ink-border);
    transform: rotate(45deg);
}

.notifypopuphead {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-primary);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-ink-border);
}

.notifyempty { padding: var(--sp-4) var(--sp-3); color: var(--c-ink-soft); font-style: italic; }

.notifylist { max-height: 320px; overflow-y: auto; }
.notifylist > div {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px dashed var(--c-ink-border);
    font-size: 0.95rem;
}
.notifylist > div:last-child { border-bottom: 0; }
.notifylist abbr { display: block; color: var(--c-ink-soft); font-size: 0.8rem; }
.notifylist a { color: var(--c-primary); }
/* olvasatlan: világos csík + "Új" címke, a megnyitás után ez elenyészik */
.notifylist > div.unread {
    background: rgba(29, 84, 147, 0.09);
    border-left: 3px solid var(--c-primary);
    padding-left: calc(var(--sp-3) - 3px);
}
.notifylist .notifynew {
    float: right;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   5. Bookmark tabs (menu) — desktop/tablet: vertical rail on the book's left
   -------------------------------------------------------------------------- */
#mainnav {
    position: sticky;
    align-self: start;
    grid-column: 1;
    grid-row: 1;
    left: 0;
    top: var(--sp-4);
    padding-top: var(--sp-5);
    z-index: 20;
}

#navtabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.navitem { display: block; }

.navtab {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: var(--rail-w);
    min-height: 52px;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 26px;
    background:
        linear-gradient(180deg, rgba(255, 220, 150, 0.10), rgba(0, 0, 0, 0.18)),
        url('../book/cover.jpg') 40% 30% / 600px auto,
        #3a2214;
    color: #f0d48a;
    border: 1px solid #1d0f07;
    box-shadow: inset 0 0 0 2px rgba(201, 160, 80, 0.55), 2px 3px 8px rgba(0, 0, 0, 0.55);
    border-left: 0;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
    transition: transform 0.15s ease, filter 0.15s ease;
}
a.navtab:hover, button.navtab:hover { filter: brightness(1.15); color: #fff; }

a.navtab.active, button.navtab.active {
    background:
        linear-gradient(180deg, rgba(160, 50, 30, 0.55), rgba(110, 25, 15, 0.65)),
        url('../book/cover.jpg') 40% 30% / 600px auto,
        #6b2516;
    color: #fff3d0;
    transform: translateX(14px);
    box-shadow: 3px 3px 8px rgba(4, 12, 22, 0.5), inset 0 0 0 1px rgba(228, 194, 106, 0.45);
}

.navicon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.navitem.nav-karakter .navicon { object-fit: cover; object-position: 78% 50%; border-radius: 4px; }

.navmorewrap { display: none; }

.navmore { font-family: inherit; text-align: left; }
.navmore svg { flex-shrink: 0; }

#morepanel {
    display: none;
    position: fixed;
    z-index: 300;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--c-parchment);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-pop);
    padding: var(--sp-2);
}
#morepanel ul { list-style: none; margin: 0; padding: 0; }
#morepanel a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-s);
    color: var(--c-ink);
    font-weight: 700;
    text-decoration: none;
}
#morepanel a:hover, #morepanel a.active { background: var(--c-parchment-3); color: var(--c-primary); }

/* desktop rail order (Bolt right after Karakter, as in the mockup) */
.nav-bolt { order: 2; }
.nav-karakter { order: 1; }
.nav-reg { order: 2; }  /* kijelentkezve: Kezdőlap, majd Regisztráció */
.nav-munka { order: 3; }
.nav-gyakorlas { order: 4; }
.nav-harc { order: 5; }
.nav-kikoto { order: 6; }
.nav-hajo { order: 7; }
.nav-toplista { order: 8; }
.nav-rejtekhely { order: 9; display: none; } /* elérhető a Kikötőből */

/* --------------------------------------------------------------------------
   6. The book
   -------------------------------------------------------------------------- */
#wrapper { padding: var(--sp-4) var(--sp-4) var(--sp-7); }

#bookcover {
    position: relative;
    width: 100%;
    max-width: var(--book-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc(var(--rail-w) - 20px) minmax(0, 1fr);
    align-items: start;
}

/* =========================================================================
   A könyv darabokból (2026): bőrborító 9-szeletes border-image-dzsel, a lapok
   ismételhető papír-textúrán, a gerinc árnyéka és a lapszélek CSS-ből, négy
   sarokdísz. Bármekkora szélességre és magasságra nyúlik, nincs képarány.
   ========================================================================= */
#bookpage {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    position: relative;
    /* bőr borító: a sarkok (sárgaréz veretek) fixek, az élek ismétlődnek */
    border: var(--cover-w) solid #3a2214;
    border-image: url('../book/cover.jpg') 92 round;
    border-radius: 6px;
    /* a borító alatt a két lap: papír, a gerincnél árnyék, a külső széleken lapköteg */
    background:
        linear-gradient(90deg,
            rgba(60, 36, 14, 0) 45%,
            rgba(60, 36, 14, 0.08) 48%,
            rgba(40, 22, 8, 0.26) 49.7%,
            rgba(40, 22, 8, 0.30) 50%,
            rgba(40, 22, 8, 0.26) 50.3%,
            rgba(60, 36, 14, 0.08) 52%,
            rgba(60, 36, 14, 0) 55%),
        linear-gradient(90deg, rgba(70, 45, 15, 0.14), rgba(70, 45, 15, 0) 3%, rgba(70, 45, 15, 0) 97%, rgba(70, 45, 15, 0.14)),
        url('../book/paper.jpg') repeat 0 0 / 512px 512px,
        #ecdcb3;
    background-clip: padding-box;
    /* lapköteg: vékony vonalak a lapok szélén, és a könyv árnyéka az asztalon */
    box-shadow:
        inset 0 0 0 1px rgba(120, 85, 40, 0.45),
        inset 0 0 0 3px #e6d3a3,
        inset 0 0 0 4px rgba(120, 85, 40, 0.35),
        inset 0 0 0 6px #ead8aa,
        inset 0 0 0 7px rgba(120, 85, 40, 0.25),
        inset 0 0 40px rgba(110, 70, 25, 0.25),
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

/* sarokdíszek a lap négy sarkában (a ::after a vázlatoké a #content-en) */
#bookpage::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    background:
        url('../book/corner_tl.png') left top / var(--corner-s) no-repeat,
        url('../book/corner_tr.png') right top / var(--corner-s) no-repeat,
        url('../book/corner_bl.png') left bottom / var(--corner-s) no-repeat,
        url('../book/corner_br.png') right bottom / var(--corner-s) no-repeat;
    opacity: 0.6;
    z-index: 0;
}
#bookpage::after { content: none; }

#content {
    position: relative;
    margin: 0;
    padding: clamp(28px, 3.6%, 52px) clamp(24px, 4.2%, 60px) clamp(28px, 3.6%, 52px);
    z-index: 1;
}

#contentinside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 6%;
    row-gap: var(--sp-5);
    align-items: start;
    min-height: 420px;
}

/* a két oldal: új és régi osztálynevek egyaránt */
.page-left, #contentinside > .halfLeft  { grid-column: 1; min-width: 0; }
.page-right, #contentinside > .halfRight { grid-column: 2; min-width: 0; }
#contentinside > .clear { display: none; }
div.clear { clear: both; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn,
input[type="submit"],
input[type="button"],
button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-ink-border);
    background: linear-gradient(180deg, #f7ecc9, var(--c-parchment-3));
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(59, 45, 23, 0.25);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover, a.button:hover {
    background: linear-gradient(180deg, #fdf6dd, var(--c-parchment-2));
    box-shadow: 0 2px 6px rgba(59, 45, 23, 0.3);
}
.btn:active, input[type="submit"]:active, button:active, a.button:active { box-shadow: inset 0 2px 4px rgba(59, 45, 23, 0.25); }

.btn-primary, button.primary, a.button.primary,
input[type="submit"].primary {
    background: linear-gradient(180deg, var(--c-primary-bright), var(--c-primary));
    border-color: #0d2c50;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover, button.primary:hover, a.button.primary:hover,
input[type="submit"].primary:hover {
    background: linear-gradient(180deg, #2564a8, #1a4a80);
    color: #fff;
}

.btn-lg, input[type="submit"].big, button.big, a.button.big {
    font-size: 1.15rem;
    min-height: 52px;
    padding: var(--sp-3) var(--sp-5);
}
.btn-sm { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: 0.9rem; }

a.button.active { background: linear-gradient(180deg, var(--c-primary-bright), var(--c-primary)); color: #fff; }

.pageactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.pageactions > * { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], textarea, select,
.formItem {
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-s);
    background: rgba(255, 251, 236, 0.75);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 1rem;
}
select { min-width: 90px; }
textarea { min-height: 80px; }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
    background: #fffae8;
    border-color: var(--c-primary-bright);
    outline: 2px solid rgba(29, 84, 147, 0.35);
    outline-offset: 0;
}

.formerror {
    color: var(--c-danger);
    font-weight: 700;
    margin: var(--sp-2) 0 var(--sp-3);
}

label { font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Flash message (a keret tetején, a tartalom elején)
   -------------------------------------------------------------------------- */
div.flash {
    grid-column: 1 / -1;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-gold);
    border-radius: var(--radius-m);
    background: linear-gradient(180deg, #fdf3cf, #f6e5b4);
    box-shadow: var(--shadow-card);
    font-weight: 700;
    text-align: center;
}

/* --------------------------------------------------------------------------
   10. Cards, stat tiles, progress bars (karakterlap)
   -------------------------------------------------------------------------- */
.card {
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.cardtitle {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-ink-border);
}
.card .statrow + .statrow {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--c-ink-border);
}

.statrow {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}
.staticon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.statmain { flex: 1 1 auto; min-width: 0; }
.stathead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-1);
}
.statname { font-weight: 700; }
.statval { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-primary); white-space: nowrap; }
.statnote { margin-top: var(--sp-1); font-size: 0.85rem; color: var(--c-ink-soft); }

/* old-style highlight numbers */
span.highlight { font-family: var(--font-display); font-size: 1.35rem; color: var(--c-primary); }

img.smallicon { width: 34px; height: 34px; object-fit: contain; }
img.tinyicon { width: 20px; height: 20px; object-fit: contain; }

/* progress bars */
.progressouter {
    border-radius: 999px;
    border: 1px solid var(--c-ink-border);
    background: rgba(227, 205, 150, 0.6);
    box-shadow: inset 0 1px 3px rgba(59, 45, 23, 0.25);
    height: 18px;
    width: 100%;
    overflow: hidden;
}
.progressinner {
    border-radius: 999px;
    height: 100%;
    width: 0;
    background: linear-gradient(180deg, #a67c3d, #8a6430);
    transition: width 0.4s ease;
}
.progressinner.lifebar, .lifebar .progressinner { background: linear-gradient(180deg, #e5484d, #b91c1c); }
.progressinner.xpbar, .xpbar .progressinner { background: linear-gradient(180deg, #3b8df0, #1a5fb4); }

/* képesség-kockák */
.statgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.stattile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2);
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.stattile .navicon, .stattile img { width: 30px; height: 30px; object-fit: contain; }
.stattile .stattilelabel { font-weight: 700; font-size: 0.9rem; }
.stattile b { font-family: var(--font-display); font-size: 1.7rem; color: var(--c-primary); line-height: 1; }

/* fegyver-helyek */
.weaponrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.weaponslot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    min-height: 110px;
    padding: var(--sp-3);
    border: 2px dashed var(--c-ink-border);
    border-radius: var(--radius-m);
    text-align: center;
    background: rgba(255, 248, 224, 0.4);
}
.weaponslot.filled { border-style: solid; }
.weaponslot img.item { max-width: 84px; max-height: 64px; }
.weaponslot .slotlabel { font-size: 0.8rem; color: var(--c-ink-soft); }
.weaponslot .slotname { font-weight: 700; }
.weaponslot form { width: 100%; margin-top: var(--sp-1); }
.weaponslot form button { width: 100%; }

/* jobb oldal: portré */
.page-hero { text-align: center; position: relative; padding-top: var(--sp-2); }
.heronation {
    margin-bottom: var(--sp-2);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: #17130e;
    color: var(--c-cream);
    border: 1px solid #3d3323;
    border-radius: var(--radius-s);
    padding: var(--sp-1) var(--sp-3);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.heronation svg { flex-shrink: 0; }
.heroname {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: 0;
}
.herometa {
    margin: 0 0 var(--sp-4);
    color: var(--c-ink-soft);
    font-size: 1.05rem;
}
img.characterpic { width: min(360px, 100%); }
.page-hero .characterpic {
    width: auto;
    max-width: min(360px, 100%);
    max-height: min(56vh, 470px);  /* ne lógjon ki az oldal aljáól */
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(59, 45, 23, 0.35));
}

/* oldal címe díszvonallal (karakterlap, később a többi lapnak is) */
.pagetitle { text-align: center; margin-bottom: 0; }
.titleorn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 320px;
    margin: 0 auto var(--sp-4);
    color: var(--c-ink-soft);
    font-size: 0.9rem;
}
.titleorn::before { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-ink-border)); }
.titleorn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-ink-border), transparent); }

/* italok, hajó */
.potionlist, .shipline { list-style: none; margin: 0; padding: 0; }
.potionrow, .shipline li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed var(--c-ink-border);
}
.potionrow:last-child { border-bottom: 0; }
.potioninfo { flex: 1 1 auto; min-width: 0; }
.potioninfo small { display: block; }
.potionrow img.item, .shipline img { flex-shrink: 0; }

/* szintlépés +/– gombok (régi oldal, érintésbarát méret) */
.lvlup_plus, .lvlup_minus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 2px;
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-s);
    background: linear-gradient(180deg, #f7ecc9, var(--c-parchment-3));
    color: var(--c-ink);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.lvlup_plus:hover, .lvlup_minus:hover { background: linear-gradient(180deg, #fdf6dd, var(--c-parchment-2)); text-decoration: none; }

/* --------------------------------------------------------------------------
   11. Régi oldalak elemei (még M8/2 előtt) — ne csorogjanak szét
   -------------------------------------------------------------------------- */
#contentinside table { max-width: 100%; }
#contentinside td, #contentinside th { padding: 2px 5px; vertical-align: top; text-align: left; }

img.starthero {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
}

img.characterpic { max-width: 100%; }
img.healerpic { width: min(260px, 100%); }
img.item { max-width: 70px; max-height: 70px; object-fit: contain; }
img.shippic, img.shippic { max-width: min(360px, 100%); max-height: 240px; object-fit: contain; }
img.shiptiny { max-width: 80px; max-height: 56px; object-fit: contain; }

img#regPreview { display: block; margin: 0 auto var(--sp-4); height: auto; }

/* bolt */
div.shopitem {
    display: inline-block;
    vertical-align: top;
    background: rgba(255, 248, 224, 0.45);
    border: 1px solid var(--c-ink-border) !important; /* a régi inline border black helyett */
    border-radius: var(--radius-s);
    margin: 2px;
}
div.shopitem.notmet { opacity: 0.5; }
div.shopitem form { margin: var(--sp-2) 0; }
div.shopitem button,
div.shopitem input[type="submit"] {
    width: calc(100% - var(--sp-3));
    min-height: 40px;
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.85rem;
    line-height: 1.25;
    white-space: normal; /* az „Eladás (250 bronz)” törhet a kártyán belül */
}
div.shopitem input[type="text"] { min-height: 36px; text-align: center; } /* mennyiség (a szélesség inline marad) */

/* kikötő */
.townmap { position: relative; }
.townmap img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
}
a.townplace {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    text-decoration: none;
    background: rgba(58, 41, 25, 0.82);
    border: 1px solid rgba(235, 215, 168, 0.5);
    border-radius: var(--radius-m);
    white-space: nowrap;
}
a.townplace:hover { background: rgba(97, 68, 39, 0.9); color: #fff; text-decoration: none; }

/* toplista */
.tabs { margin: var(--sp-2) 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tabs a.button { margin: 0; }

table.toplist { width: 100%; }
table.toplist th, table.toplist td { padding: var(--sp-2) var(--sp-3); text-align: left; }
table.toplist th {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--c-primary);
    border-bottom: 2px solid var(--c-ink-border);
}
td.toplistrank, th.toplistrank { width: 40px; text-align: right; font-family: var(--font-display); }
td.toplistvalue { text-align: right; white-space: nowrap; }
tr.merow td, tr.merow a { background: rgba(236, 217, 168, 0.8); font-weight: 700; }
p.toplistme { margin-top: var(--sp-4); }

/* hajó/legénység táblázat */
table.crewlist { width: 100%; }
table.crewlist td { padding: var(--sp-2) var(--sp-3); vertical-align: top; }
td.crewjoined { text-align: right; white-space: nowrap; }
td.crewname, td.crewadmin { white-space: nowrap; }
tr.crewactions td {
    padding: 0 var(--sp-3) var(--sp-3) 14px;
    border-bottom: 1px solid var(--c-ink-border);
}
tr.crewactions form { display: inline-block; margin-right: var(--sp-2); }

/* harc */
.fightPanel {
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.fightStatus { font-family: var(--font-display); color: var(--c-primary); margin: var(--sp-2) 0 var(--sp-3); font-size: 1.15rem; }
.fightRules { margin: var(--sp-3) auto; }
.fightRules td { padding: 2px 8px; }
.fightSlots { text-align: center; margin: var(--sp-3) 0; }
.fightSlot {
    display: inline-block;
    width: 58px;
    height: 58px;
    margin: 2px;
    vertical-align: top;
    border: 2px dashed var(--c-ink-border);
    border-radius: var(--radius-s);
    font-size: 10px;
    line-height: 12px;
    overflow: hidden;
}
.fightSlot span { display: block; margin-top: 20px; }
.fightSlot img { width: 28px; height: 28px; margin-top: 4px; }
.fightSlot.filled { border-style: solid; background: var(--c-parchment-2); cursor: pointer; }
.fightSlot.filled span { margin-top: 0; }
.fightButtons { text-align: center; margin: var(--sp-2) 0 var(--sp-3); }
.fightButtons button { margin: 2px; }
.fightTimer { float: right; color: var(--c-primary); }
.fightNote { font-style: italic; text-align: center; }
.fightLog { margin-top: var(--sp-4); max-height: 280px; overflow: auto; font-size: 0.9rem; }
.fightLog table { width: 100%; }
.fightLog td { padding: 1px 3px; }
.fightLog .stepWin td { color: #2d5e1e; }
.fightLog .stepLose td { color: var(--c-danger); }
.fightLog .stepDraw td { color: #777; }
.fightRoundLog { margin-bottom: var(--sp-2); }
.fighterBox h3 { margin: 0; }
.fighterBox .fighterMeta { font-size: 0.85rem; margin-bottom: 2px; }
.fighterPic { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   12. Debug panel — összecsukva, bal alul, hogy takarja a fejlécet/semmit
   -------------------------------------------------------------------------- */
body > #debug_wrapper {
    position: fixed;
    left: var(--sp-2);
    bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    max-width: min(92vw, 700px);
    font-family: system-ui, sans-serif;
}
body > #debug_wrapper #debug_console_toolbar {
    position: static;
    display: inline-block;
    background: rgba(10, 22, 37, 0.92);
    border: 1px solid #3a4c61;
    border-radius: var(--radius-s);
    padding: 4px 10px;
    box-shadow: var(--shadow-pop);
}
body > #debug_wrapper #debug_console_toolbar a { color: #cfe2ff; padding: 0 5px; }
body > #debug_wrapper #debug_console {
    position: static;
    margin-top: var(--sp-2);
    max-height: 55vh;
    max-width: inherit;
    overflow: auto;
    border-radius: var(--radius-s);
    background: rgba(255, 255, 255, 0.96);
}

/* --------------------------------------------------------------------------
   13. Compact desktop book (1024–1099px)
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
    :root {
        --rail-w: 158px;
        --head-h: 80px;
    }
    .headbar { padding: var(--sp-2) var(--sp-4); }
    #wrapper { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
    .navtab { min-height: 46px; font-size: 0.9rem; gap: var(--sp-2); padding-left: 20px; }
    .navtab { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
    .navicon { width: 20px; height: 20px; }
    .statgrid { gap: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   14. Phone/tablet: one book page and bottom navigation (< 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    :root { --head-h: 64px; }

    body { font-size: 15px; }

    .headbar {
        min-height: var(--head-h);
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
        flex-wrap: nowrap;
    }
    /* tevékenység-chip telefonon: vékony sáv a fejléc alatt
       (a :has-t nem ismerő böngészőben a fejléc sorában marad) */
    .headbar:has(.activitychip) { flex-wrap: wrap; row-gap: var(--sp-1); }
    .headbar .activitychip {
        order: 10;
        flex: 1 1 100%;
        justify-content: center;
        min-height: 36px;
        padding: var(--sp-1) var(--sp-3);
        font-size: 0.9rem;
    }
    .sitelogo { flex-shrink: 1; min-width: 0; }
    /* kijelentkezve is egy sorban: kisebb gombok */
    .headtools > .btn { min-height: 40px; padding: 0 var(--sp-2); font-size: 0.85rem; white-space: nowrap; }
    .sitelogo img { height: 44px; }
    .headtools { gap: var(--sp-2); flex-wrap: nowrap; }
    .coinpurse { font-size: 0.85rem; padding: var(--sp-1) var(--sp-2); gap: 2px 6px; white-space: nowrap; }
    .coinpurse img.tinyicon { width: 15px; height: 15px; }
    .coinpurse .highlight { font-size: 0.95rem; }
    .iconbtn { width: 40px; height: 40px; }
    /* kilépés telefonon: csak ikon */
    .headlogout { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border: 1px solid rgba(228, 194, 106, 0.35); border-radius: 50%; background: rgba(7, 19, 33, 0.55); }
    .headlogout span { display: none; }

    /* könyv: a művészi lap bal fele = egyetlen parchment oldal */
    #wrapper { padding: var(--sp-2) var(--sp-2) calc(76px + env(safe-area-inset-bottom, 0px)); }
    #bookcover { display: block; padding-left: 0; max-width: 760px; }

    /* egy lap: nincs gerinc, a papír és a borító marad */
    #bookpage {
        background:
            linear-gradient(90deg, rgba(70, 45, 15, 0.14), rgba(70, 45, 15, 0) 4%, rgba(70, 45, 15, 0) 96%, rgba(70, 45, 15, 0.14)),
            url('../book/paper.jpg') repeat 0 0 / 420px 420px,
            #ecdcb3;
        background-clip: padding-box;
    }
    #content { padding: 22px 18px 24px; margin: 0; }
    #contentinside { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--sp-4); min-height: 0; }
    .page-left, #contentinside > .halfLeft,
    .page-right, #contentinside > .halfRight { grid-column: 1; margin-bottom: 0; }
    /* a hős-portré (karakterlap, adatlap) és a kép-oldalak elsőként jöjjenek */
    #contentinside > .page-hero,
    #contentinside > .page-picfirst { order: -1; }

    /* alsó navigációs sáv */
    #mainnav {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        padding-top: 0;
        background: linear-gradient(180deg, var(--c-sea) 0%, var(--c-night) 100%);
        border-top: 1px solid rgba(228, 194, 106, 0.3);
        box-shadow: 0 -3px 12px rgba(4, 12, 22, 0.5);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #navtabs {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
    }
    /* a "Több"-ben élő helyek nem állnak a sávba */
    #navtabs > .navmoreitem { display: none; }
    .navitem { flex: 1 1 0; display: flex; order: 0; }
    .nav-kezdolap { order: 0; }
    .nav-reg { order: 2; }  /* kijelentkezve: Kezdőlap, majd Regisztráció */
    .nav-karakter { order: 1; }
    .nav-munka { order: 2; }
    .nav-harc { order: 3; }
    .nav-kikoto { order: 4; }
    .nav-hajo { order: 5; }
    .navmorewrap { order: 6; display: flex; }

    .navtab {
        width: auto;
        flex: 1 1 0;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: var(--sp-1) 2px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        clip-path: none;
        font-size: 0.72rem;
        text-align: center;
        background: transparent;
    }
    .navicon { width: 24px; height: 24px; }
    #mainnav .navtab.active {
        background: transparent;
        color: var(--c-gold);
        box-shadow: inset 0 3px 0 var(--c-gold);
        transform: none;
    }
    #mainnav .navtab.active .navicon { filter: drop-shadow(0 0 4px rgba(228, 194, 106, 0.6)); }
    .navmorewrap .navtab { border-left: 1px solid rgba(228, 194, 106, 0.2); }

    #morepanel { display: block; }

    /* nagy kártyák egy hasábban */
    .statgrid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
    .stattile { padding: var(--sp-2) var(--sp-1); }
    .weaponrow { grid-template-columns: 1fr 1fr; }
    .pageactions { flex-direction: column; }
    .pageactions > * { flex: 1 1 auto; width: 100%; }

    /* széles táblázatok görgethetők, nem tolják szét az oldalt */
    #contentinside table { display: table; }
    .halfLeft, .halfRight, .page-left, .page-right { overflow-wrap: break-word; }
    img.smallicon { width: 28px; height: 28px; }

    .notifypopup { position: fixed; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: var(--sp-2); left: var(--sp-2); width: auto; }
    .notifypopup::before { display: none; }

    body > #debug_wrapper { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* nagyon keskeny (360px) */
@media (max-width: 379.98px) {
    .sitelogo img { height: 38px; }
    .navtab { font-size: 0.66rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.45rem; }
}

/* --------------------------------------------------------------------------
   15. M8/2 — oldal-komponensek (bolt, munka, dokk, harc, toplista, …)
   -------------------------------------------------------------------------- */

/* teljes szélességű sáv a két oldal helyett */
.fullwidth { grid-column: 1 / -1; min-width: 0; }

/* letiltott műveletek: ok a szövegben, nem csak szürkén */
button[disabled], input[type="submit"][disabled], input[type="button"][disabled], a.button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.35);
}
button[disabled]:hover, input[type="submit"][disabled]:hover { background: linear-gradient(180deg, #f7ecc9, var(--c-parchment-3)); }
button.primary[disabled], input[type="submit"].primary[disabled] { background: linear-gradient(180deg, var(--c-primary-bright), var(--c-primary)); }
.reqline { font-size: 0.82rem; color: var(--c-ink-soft); }
.reqline.bad { color: var(--c-danger); font-weight: 700; }

/* tárgykártyák (bolt, fegyverek, rejtekhely) */
.itemgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: var(--sp-3);
}
.itemcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2);
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.itemcard img.item { width: 76px; height: 76px; object-fit: contain; margin-bottom: var(--sp-1); }
.itemcard .itemname { font-weight: 700; line-height: 1.25; }
.itemcard .itemdesc { font-size: 0.82rem; color: var(--c-ink-soft); }
.itemcard .itemprice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    min-height: 26px;
    font-size: 1.05rem;
}
.itemcard form, .itemcard .itemactions { width: 100%; margin-top: var(--sp-1); }
.itemcard button, .itemcard input[type="submit"] {
    width: 100%;
    min-height: 40px;
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.88rem;
    line-height: 1.25;
    white-space: normal;
}
.itemcard.islocked { opacity: 1; }
.itemcard.islocked img.item { filter: grayscale(0.8); opacity: 0.6; }
.itemcard .qtyinput { width: 58px; min-height: 38px; text-align: center; }

/* visszaszámlálás */
.countdownbox {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 7vw, 3rem);
    color: var(--c-primary);
    text-align: center;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin: var(--sp-2) 0;
}
.countdownnote { text-align: center; color: var(--c-ink-soft); font-size: 0.9rem; margin: 0 0 var(--sp-2); }

/* üres állapot */
.emptystate { text-align: center; padding: var(--sp-5) var(--sp-3); color: var(--c-ink-soft); }
.emptystate .emptyicon { width: 64px; height: 64px; object-fit: contain; opacity: 0.6; margin-bottom: var(--sp-2); }
.emptystate p { margin: 0 0 var(--sp-2); }

/* széles táblázatok: kicsiny görgethetők, nem tolják szét az oldalt */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablescroll table { min-width: 100%; }

/* munkahirdetések */
.jobreqs { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.jobreq { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.jobreq img { width: 20px; height: 20px; }
.jobreq.bad { color: var(--c-danger); }
.jobactions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.jobactions label { white-space: nowrap; }

/* harc: harctér + harcosok */
.fightlayout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-5);
    align-items: start;
}
.fighters {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--sp-2);
    align-items: end;
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: var(--sp-3);
}
.fighterBox { text-align: center; min-width: 0; }
.fighterBox .fighterPic { max-height: 230px; width: auto; max-width: 100%; }
.fighterBox .fighterLifeText { font-weight: 700; }
#fighterYou .fighterPic { max-height: 230px; }
.fightVs { font-size: 1.4rem; margin: 0; align-self: center; }
.fightButtons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0; }
.fightButtons button { min-height: 64px; font-size: 1rem; flex-direction: column; gap: var(--sp-1); }
.fightButtons button img { width: 24px; height: 24px; }
.fightActions { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.fightLog table { width: 100%; border-collapse: collapse; }
.fightLog td { padding: var(--sp-1) var(--sp-2); }
.fightLog .fightRoundLog {
    background: rgba(255, 248, 224, 0.5);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-s);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}
.fightLog .fightRoundLog b { display: block; margin-bottom: var(--sp-1); color: var(--c-primary); font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }

/* pontkiosztás (szintlépés) */
.spendlist { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.spendrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: var(--sp-2) var(--sp-3);
}
.spendrow > img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.spendinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spendval { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-primary); line-height: 1.1; }
.spendadded { font-size: 0.85rem; color: var(--c-ink-soft); white-space: nowrap; }
.spendadded b { color: var(--c-primary); font-size: 1.15rem; }
.spendbtns { display: flex; gap: var(--sp-2); }

@media (max-width: 1023.98px) {
    .spendrow { flex-wrap: wrap; }
    .spendadded { width: 100%; order: 3; }
    .spendbtns { margin-left: auto; }
}

/* hajóválasztó kártyák (dokk) */
.shipcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
}
.shipcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    text-align: center;
    padding: var(--sp-3);
    background: rgba(255, 248, 224, 0.9);
    border: 1px dashed var(--c-ink-border);
    border-radius: var(--radius-m);
    cursor: pointer;
}
.shipcard input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.shipcard img { max-width: 120px; max-height: 80px; object-fit: contain; }
.shipcard small { line-height: 1.3; }
.shipcardmeta { font-size: 0.85rem; color: var(--c-ink-soft); }
.shipcard.picked { border-style: solid; border-color: var(--c-primary); background: var(--c-parchment-2); box-shadow: 0 0 0 2px rgba(29, 84, 147, 0.35); }
.shipcard.islocked { opacity: 0.62; cursor: not-allowed; }
.shipcard.islocked input[type="radio"] { pointer-events: none; }
.shipcardstatic { cursor: default; }
.shipcard .upgradeform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
}

/* dokk: a kikötőben álló hajók sorai */
td.fleetpic { width: 90px; text-align: center; }
td.fleetcrew { text-align: right; white-space: nowrap; }

/* nyilvános kalóz adatlap: a hajó sora */
.fleetrow { display: flex; align-items: center; gap: var(--sp-3); }
.fleetrow div { min-width: 0; }

/* belépő doboz alja */
.loginalt { margin-top: var(--sp-4); text-align: center; }

/* hibaoldal */
.hibacode { text-align: center; padding-top: var(--sp-5); }
.hibacodelabel {
    display: block;
    font-family: var(--font-display);
    color: var(--c-ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.hibacodeval {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(6rem, 18vw, 11rem);
    line-height: 1;
    color: var(--c-primary);
}

/* toplista: telefonon a nemzet oszlop elhagyható */
@media (max-width: 479.98px) {
    table.toplist th.toplistnation, table.toplist td.toplistnation { display: none; }
}

.formfield { margin-bottom: var(--sp-4); }
.formfield label, .formlabel { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.formfield .formItem { width: 100%; box-sizing: border-box; }

/* kikötő: telefonon a gomblista helyettesíti a képi hotspotokeat */
.townlist { display: none; }

/* jelentkezők / hajónapló sorai */
.rowlist { width: 100%; }
.rowlist td { padding: var(--sp-2) var(--sp-2); border-bottom: 1px dashed var(--c-ink-border); vertical-align: top; }
.rowlist tr:last-child td { border-bottom: 0; }

@media (max-width: 1023.98px) {
    .fightlayout { grid-template-columns: 1fr; }
    .fighters { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .fighterBox .fighterPic, #fighterYou .fighterPic { max-height: 170px; }
    .fightVs { padding: var(--sp-1) 0; }
    .townmap a.townplace { display: none; }
    .townlist {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2);
        margin-top: var(--sp-3);
    }
    .townlist a { margin: 0; }
    .itemgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
    .jobactions .btn { flex: 1 1 auto; }
}

/* =====================================================================
   Halvány tusvázlatok a lapokon (a 2026-os makett nyomán).
   Lapfajtánként más motívum: a bal és a jobb oldal --sketch-left /
   --sketch-right képe a <body> pg-* osztálya szerint. A vázlat
   átlátszó, sötét szépia vonalrajz; itt halványítjuk, és multiply
   keveréssel "beleivódik" a pergamenbe.
   ===================================================================== */
:root {
    --sketch-left: url('../sketch/chart.png');
    --sketch-right: url('../sketch/harbour.png');
    --sketch-opacity: 0.065;
}
body.pg-work            { --sketch-left: url('../sketch/market.png');   --sketch-right: url('../sketch/harbour.png'); }
body.pg-shop,
body.pg-chest,
body.pg-weapon          { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/market.png'); }
body.pg-fight           { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/battle.png'); }
body.pg-healer          { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/healer.png'); }
body.pg-train,
body.pg-levelup         { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/training.png'); }
body.pg-dock,
body.pg-ship            { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/shipyard.png'); }
body.pg-town,
body.pg-toplista,
body.pg-kaloz           { --sketch-left: url('../sketch/harbour.png');  --sketch-right: url('../sketch/chart.png'); }
body.pg-kezikonyv       { --sketch-left: url('../sketch/chart.png');    --sketch-right: url('../sketch/shipyard.png'); }
body.pg-kincs           { --sketch-left: url('../sketch/harbour.png');  --sketch-right: url('../sketch/chart.png'); }

#content { isolation: isolate; }
#content::before,
#content::after {
    content: "";
    position: absolute;
    top: 3%;
    bottom: 2%;
    width: 44%;
    background-repeat: no-repeat;
    background-position: center 4%;   /* a lap tetejétől keretez, mint a makettben */
    background-size: contain;
    opacity: var(--sketch-opacity);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
#content::before { left: 3.5%;  background-image: var(--sketch-left); }
#content::after  { right: 3.5%; background-image: var(--sketch-right); }
#contentinside { position: relative; z-index: 1; }

/* telefonon egy lap van: csak a lap fő motívuma, a teljes szélességben */
@media (max-width: 1023.98px) {
    #content::before { display: none; }
    #content::after { left: 4%; right: 4%; width: auto; background-position: center top; background-size: 100% auto; }
}

@media print {
    #content::before, #content::after { display: none; }
}


/* Layout refinements: the book frames the game; controls follow the content. */
#contentinside > * { min-width: 0; }
#contentinside > [hidden] { display: none; }
#contentinside p:last-child, .card > :last-child { margin-bottom: 0; }
.card > .pageactions:first-child { margin-top: 0; }
.formfield input, .formfield select, .jobactions select { max-width: 100%; }
.pageactions > form > input[type="submit"], .pageactions > form > button { width: 100%; }
.jobactions { display: grid; grid-template-columns: auto minmax(90px, 1fr); }
.jobactions input[type="submit"] { grid-column: 1 / -1; width: 100%; }
.itemgrid { grid-template-columns: repeat(auto-fill, minmax(min(145px, 100%), 1fr)); align-items: stretch; }
.itemcard { padding: var(--sp-4) var(--sp-3); gap: var(--sp-2); }
.itemcard .itemdesc { font-size: 0.9rem; }
.itemcard .itemactions, .itemcard form { margin-top: auto; padding-top: var(--sp-2); }
.itemcard .qtyinput { width: 76px; min-height: 44px; }
.itemcard .reqline { margin-top: auto; }
.itemcard input[type="submit"], .itemcard button { min-height: 44px; }
#contentinside .tablescroll th, #contentinside .tablescroll td { padding: var(--sp-2); }
#contentinside .tablescroll th { color: var(--c-primary); border-bottom: 1px solid var(--c-ink-border); }
#contentinside .tablescroll tr + tr td { border-top: 1px solid rgba(201, 174, 120, 0.4); }
.tablescroll { margin-top: var(--sp-3); }
.tablescroll:focus-visible { outline: 2px solid var(--c-primary); }
.pg-weapon .weaponrow { grid-template-columns: 1fr; }
.pg-weapon .weaponslot { display: grid; grid-template-columns: 76px minmax(0, 1fr); text-align: left; align-items: center; }
.pg-weapon .weaponslot img { grid-column: 1; grid-row: 1 / 4; }
.pg-weapon .slotlabel, .pg-weapon .slotname, .pg-weapon .weaponslot form { grid-column: 2; }
.pg-chest .progressouter { margin-bottom: var(--sp-4); }
.pg-reg .page-hero { margin-bottom: var(--sp-5); }
.pg-normal .starthero { max-height: 300px; object-fit: cover; object-position: 50% 22%; } /* az arcok maradjanak a képen */
.fighterLife { background: linear-gradient(180deg, #e5484d, #b91c1c); }
.fightButtons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fightButtons button { margin: 0; padding: var(--sp-2) var(--sp-1); overflow-wrap: anywhere; }
.fightSlots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); }
.fightSlot { width: 100%; margin: 0; }
.fighterMeta { font-size: 0.85rem; }
.fightVs { font-family: var(--font-display); }
.sectionfold { margin-bottom: var(--sp-4); }
.sectionfold > summary { cursor: pointer; min-height: 44px; font-family: var(--font-display); font-size: 1.35rem; color: var(--c-primary); padding: var(--sp-2) 0; }
.sectionfold[open] > summary { margin-bottom: var(--sp-3); border-bottom: 1px solid var(--c-ink-border); }
.sectionfold > summary:hover { color: var(--c-primary-bright); }
.sectionfold > summary:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 4px; }
.shipoverview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr); align-items: center; gap: var(--sp-5); }
.shipoverview .pagetitle { text-align: left; margin-bottom: var(--sp-2); }
.shipoverview .pageactions { margin-top: var(--sp-3); }
.shipoverview > img { width: 100%; max-height: 180px; object-fit: contain; }
.crewcards { list-style: none; margin: 0; padding: 0; }
.crewmember + .crewmember { border-top: 1px solid var(--c-ink-border); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.crewidentity { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.crewidentity small { margin-left: auto; }
.crewaction { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.crewaction select { flex: 1; min-width: 110px; }
.crewaction label { width: 100%; }
.crewmember .kickform { margin-top: var(--sp-2); }
.btn-danger { color: var(--c-danger); border-color: #b5816c; background: #f7e6cd; }
.upgrade + .upgrade { margin-top: var(--sp-3); }
.treasurytext { font-size: 1.5rem; }
.shipdonation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); }
.shipdonation .formfield { margin: 0; }
.catalogtabs { display: none; }
.js .catalogtabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.catalogtabs [aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: white; }
.catalogsection { margin-bottom: var(--sp-6); scroll-margin-top: 110px; }
.catalogsection > h3 { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-ink-border); }
.catalogjump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.catalogjump a { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-ink-border); border-radius: 999px; text-decoration: none; background: var(--c-cream); }
.shopcart { position: sticky; top: var(--sp-2); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); margin-bottom: var(--sp-4); background: #fff5d9; border: 1px solid var(--c-ink-border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.shopcart p { margin: 0; }
.shopcart small { display: block; }
.shopcart input[type="submit"] { flex: 0 1 auto; }
@media (max-width: 1023.98px) {
    .headbar { max-width: 780px; }
    .page-hero .characterpic { max-height: 210px; }
    .heronation { justify-self: start; font-size: 0.85rem; margin: 0; }
    .heroname { font-size: 2.3rem; }
    .herometa { margin-bottom: 0; font-size: 0.95rem; }
    .page-picfirst img.healerpic { max-height: 170px; width: auto; }
    .page-picfirst img.shippic { max-height: 130px; }
    .shipoverview { grid-template-columns: minmax(0, 1fr) 100px; gap: var(--sp-3); }
    .shipoverview > img { max-height: 110px; }
    .shipoverview p { font-size: 0.9rem; }
    .shiptools { order: -1; }
    .shipoverview { order: -2; }
    .shipdonation { grid-template-columns: minmax(0, 1fr) auto; }
    .itemgrid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
    .itemcard { padding: var(--sp-3) var(--sp-2); }
    .fighters .fighterPic, #fighterYou .fighterPic { max-height: 130px; }
    .fightRules { width: 100%; font-size: 0.9rem; }
    .fightRules td { padding: var(--sp-1); }
    .fightlayout { gap: var(--sp-3); }

    .pg-reg #regPreview { max-height: 200px; width: auto; }
    .shopcart { top: 0; padding: var(--sp-2); }
    .shopcart input[type="submit"] { min-height: 44px; padding: var(--sp-2); font-size: 0.9rem; }
    .catalogjump { gap: var(--sp-1); }
    .catalogjump a { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.js .catalogtitle, .js .catalogtitle + .titleorn { display: none; }
#buyPanel > p { margin-bottom: var(--sp-4); }
.shipoverview { margin-bottom: 0; }

input[type="submit"].btn-danger { color: var(--c-danger); border-color: #b5816c; background: #f7e6cd; }
.shipdeparture { padding-top: var(--sp-3); border-top: 1px solid var(--c-ink-border); text-align: right; }
#contentinside { align-content: start; }
.js .catalogtabs:last-child { margin-bottom: 0; }
@media (max-width: 1023.98px) {
    .pg-pirate .page-left > .pagetitle, .pg-pirate .page-left > .titleorn { display: none; }
    .pg-kaloz .page-hero { display: block; text-align: center; min-height: 0; }
    .pg-kaloz .page-hero .characterpic { max-height: 140px; }
    .shipoverview > div { display: contents; }
    .shipoverview h1, .shipoverview h2 { grid-column: 1; margin-bottom: 0; }
    .shipoverview > img { grid-column: 2; grid-row: 1 / 3; }
    .shipoverview p, .shipoverview .pageactions { grid-column: 1 / -1; margin-bottom: 0; }
    .shipoverview .pageactions { margin-top: 0; }
    .shipdeparture { text-align: center; }
    .shipdeparture input { width: 100%; }
    .fighters:has(#fighterEnemy[style*="none"]) { grid-template-columns: 1fr; }
    .fighters:has(#fighterEnemy[style*="none"]) .fightVs { display: none; }
    .fighters:has(#fighterEnemy[style*="none"]) #fighterYou { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 12px; text-align: left; }
    .fighters:has(#fighterEnemy[style*="none"]) #fighterYou > * { grid-column: 2; }
    .fighters:has(#fighterEnemy[style*="none"]) #fighterYou .fighterPic { grid-column: 1; grid-row: 1 / 6; max-height: 100px; }
    #fighterYou .fighterName { margin-bottom: 0; }
}

/* az új (nem négyzetes) festett ikonok ne torzuljanak */
img.staticon, img.smallicon, .jobreq img, .fightButtons img, .fightSlot img,
#contentinside .stattile img, #contentinside .statrow img, #contentinside .lvlrow img { object-fit: contain; }

/* karakterlap: teendők és üdvözlés */
.nextsteps .cardtitle { margin-bottom: var(--sp-2); }
.nextstep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.nextstep + .nextstep { border-top: 1px solid var(--c-ink-border); }
.nexttext { flex: 1; min-width: 0; }
.nextform { margin: 0; }
.btn.btn-small { min-height: 40px; padding: 0 var(--sp-3); font-size: 0.9rem; white-space: nowrap; }
.welcomesteps { margin: 0; padding-left: 1.4em; }
.welcomesteps li { padding: var(--sp-1) 0; }
.welcomesteps a { color: var(--c-primary); }

/* munka: közös időtartam-választó, összesítő, zárt munkák */
.hourpicker { border: 0; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hourpicker legend { font-weight: 700; margin-bottom: var(--sp-2); width: 100%; }
.hourbtn { position: relative; }
.hourbtn input { position: absolute; opacity: 0; pointer-events: none; }
.hourbtn span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 72px; min-height: 44px; padding: 0 var(--sp-3);
    border: 1px solid var(--c-ink-border); border-radius: var(--radius-s);
    background: rgba(255, 248, 224, 0.7); cursor: pointer; font-weight: 700;
}
.hourbtn input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.hourbtn input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.jobtotal { margin: var(--sp-2) 0; font-weight: 700; }
.jobtotal > span { display: none; align-items: center; gap: 4px; flex-wrap: wrap; }
.joblist[data-hours="8"] .jobtotal > span[data-h="8"],
.joblist[data-hours="4"] .jobtotal > span[data-h="4"],
.joblist[data-hours="2"] .jobtotal > span[data-h="2"],
.joblist[data-hours="1"] .jobtotal > span[data-h="1"] { display: inline-flex; }
.hourbtn { flex: 1 1 0; min-width: 0; }
.hourbtn span { width: 100%; min-width: 0; padding: 0 var(--sp-1); white-space: nowrap; }
.jobtotal img.tinyicon { width: 18px; height: 18px; }

/* munka: képes sorok, rangok, zárt munkák */
.joblist { padding: var(--sp-1) var(--sp-4); }
.jobrow { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; }
.jobrow + .jobrow { border-top: 1px solid rgba(201, 174, 120, 0.5); }
.jobimg { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--c-ink-border); box-shadow: 0 1px 3px rgba(59, 45, 23, 0.3); }
.jobinfo h3 { margin: 0; }
.jobdesc { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.35; color: var(--c-ink-soft); }
.jobside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.jobside .jobtotal { margin: 0; white-space: nowrap; }
.jobside .jobtotal img.tinyicon { width: 24px; height: 24px; }
.jobside .jobtotal .highlight { font-size: 1.3rem; }
.jobnow { padding-top: 0; margin-bottom: var(--sp-3); }
.jobnow small { font-family: var(--font-body); font-size: 0.85rem; color: var(--c-ink-soft); }
@media (max-width: 480px) {
    .jobrow { grid-template-columns: 64px minmax(0, 1fr); }
    .jobrow .jobimg { width: 64px; height: 64px; grid-row: 1 / 3; align-self: start; }
    .jobside { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

.ranklist { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.rankrow {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-3); align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(255, 248, 224, 0.7); border: 1px solid var(--c-ink-border); border-radius: var(--radius-m);
}
#contentinside .rankrow img { width: 48px; height: 48px; object-fit: contain; }
.rankhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 4px; }
.rankhead strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--c-primary); line-height: 1.1; }
.rankbadge { padding: 1px 10px; border-radius: var(--radius-s); background: var(--c-parchment-2); border: 1px solid var(--c-ink-border); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.rankbar { height: 10px; }
.rankbar .progressinner { background: linear-gradient(180deg, var(--c-primary-bright), var(--c-primary)); }
.rankrow small { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--c-ink-soft); }
/* egy lapon a rangok a cím után, a munkák előtt jönnek */
@media (max-width: 1023.98px) {
    .pg-work .page-left, .pg-work .page-right { display: contents; }
    .pg-work .pagetitle, .pg-work .titleorn { order: -2; }
    .pg-work .titleorn { margin-top: calc(-1 * var(--sp-4)); }
    .pg-work .rankcard { order: -1; margin-bottom: 0; }
}

.lockedjobs summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); list-style: none; }
.lockedjobs summary h3 { margin: 0; }
.lockedjobs summary::-webkit-details-marker { display: none; }
.lockedjobs summary::after { content: "\25B4"; font-family: var(--font-body); font-size: 1.4rem; line-height: 1; color: var(--c-primary); }
.lockedjobs:not([open]) summary::after { content: "\25BE"; }
.lockedjob {
    display: grid; grid-template-columns: 56px 20px minmax(0, 1fr); gap: var(--sp-3); align-items: center;
    padding: var(--sp-2); margin-top: var(--sp-2);
    background: rgba(120, 90, 50, 0.07); border: 1px solid rgba(201, 174, 120, 0.6); border-radius: var(--radius-s);
}
.lockedjob .jobimg { width: 56px; height: 56px; filter: grayscale(1) sepia(0.25); opacity: 0.75; box-shadow: none; }
.lockedjob .lockicon { width: 20px; height: 20px; fill: var(--c-ink-soft); }
.lockedjob strong { display: block; color: var(--c-ink-soft); }
.lockedjob small { display: block; font-size: 0.85rem; color: var(--c-ink-soft); }

/* bolt: egy koppintásos vásárlás, felszerelt jelvény, összevetés */
.itemcard { position: relative; }
.itemcard .btn.buyone { width: 100%; margin-top: var(--sp-2); min-height: 44px; white-space: normal; line-height: 1.2; }
.itemcard .btn.buyone:disabled { opacity: 1; background: rgba(120, 90, 50, 0.12); color: var(--c-ink-soft); border-color: var(--c-ink-border); cursor: not-allowed; font-weight: 600; }
.equippedbadge {
    position: absolute; top: 6px; right: 6px;
    background: var(--c-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
}
.itemcard.isequipped { outline: 2px solid var(--c-primary); }
.cmpline { display: block; font-size: 0.82rem; font-weight: 700; margin-top: 2px; }
.cmpline.better { color: #2d6a1e; }
.cmpline.worse { color: #8b1a1a; }
.cmpline.same { color: var(--c-ink-soft); }
.reqline.bad { color: #8b1a1a; font-weight: 700; }
.justbought { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.justbought img.item { width: 56px; height: 56px; object-fit: contain; }
.justbought p { flex: 1; margin: 0; min-width: 160px; }
.justbought form { margin: 0; }

/* harc: szakaszjelző, szabály-csík, gombsúgók, lépésenkénti eredmény */
.fightphases {
    list-style: none; margin: 0 0 var(--sp-3); padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    counter-reset: ph;
}
.fightphases li {
    counter-increment: ph;
    text-align: center; font-size: 0.78rem; font-weight: 700; line-height: 1.2;
    padding: 6px 2px; border-radius: var(--radius-s);
    background: rgba(120, 90, 50, 0.10); color: var(--c-ink-soft);
    border-bottom: 3px solid transparent;
}
.fightphases li::before { content: counter(ph) ". "; }
.fightphases li.done { color: var(--c-ink); background: rgba(45, 106, 30, 0.10); }
.fightphases li.active { color: #fff; background: var(--c-primary); border-bottom-color: #0b2a4a; }
.fightRules { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
.fightRules li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fightRules img { width: 34px; height: 34px; object-fit: contain; }
.fightRules span { color: var(--c-ink-soft); }
.fightButtons button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; }
.fightButtons button small { font-size: 0.72rem; font-weight: 600; opacity: 0.8; line-height: 1.15; }
.searchclock { font-size: 0.9rem; }
.decidehelp { margin: var(--sp-3) 0 0; padding-left: 1.2em; font-size: 0.9rem; color: var(--c-ink-soft); }
.fightLog tr.reveal { animation: steprev 0.35s ease-out both; }
@keyframes steprev { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fightLog tr.reveal { animation: none; } }

/* érintési célok: a kis gombok is legalább 44px magasak */
.btn.btn-small, .btn.btn-sm { min-height: 44px; }
.spendval.changed { color: #2d6a1e; font-weight: 700; }
.practicebadge { display: inline-block; margin: 0 0 var(--sp-2); padding: 2px 10px; border-radius: 12px; background: rgba(45, 106, 30, 0.14); color: #2d6a1e; font-weight: 700; font-size: 0.85rem; }
/* gyakorlás: a választó és az összesítő ugyanazon az elemen */
.jobtotal[data-hours="8"] > span[data-h="8"],
.jobtotal[data-hours="4"] > span[data-h="4"],
.jobtotal[data-hours="2"] > span[data-h="2"],
.jobtotal[data-hours="1"] > span[data-h="1"] { display: inline-flex; }

/* --------------------------------------------------------------------------
   Közösség: kocsma, fedélzeti tábla, cimborák, palackposta (docs/SOCIAL.md)
   -------------------------------------------------------------------------- */
.nav-kocsma { order: 10; }
.nav-palack { order: 11; }
.nav-cimborak { order: 12; }
.nav-kezikonyv { order: 13; }

.visuallyhidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pageintro { margin: 0 0 var(--sp-3); color: var(--c-ink-soft); }
.inlineform { display: inline-flex; margin: 0; }
button.linkbtn {
    min-height: 0; padding: 2px 6px; border: 0; background: none; box-shadow: none;
    color: var(--c-ink-soft); font-size: 0.85rem; font-weight: 600; text-decoration: underline;
}
button.linkbtn:hover { background: none; box-shadow: none; color: var(--c-danger); }
.charcount { color: var(--c-ink-soft); }
.charcount.near { color: var(--c-danger); font-weight: 700; }
textarea { width: 100%; resize: vertical; line-height: 1.4; }

/* fejléc: palackposta-ikon (a csengő mellett) */
a.mailbtn { text-decoration: none; }
a.mailbtn:hover { text-decoration: none; }

/* tábla-bejegyzések */
.tavernintro { display: flex; gap: var(--sp-3); align-items: center; }
.tavernintro p { margin: 0; }
img.tavernsign { width: 108px; height: auto; flex-shrink: 0; }
.boardform { display: flex; flex-direction: column; gap: var(--sp-2); }
.boardformfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.boardlist, .boardreplies { list-style: none; margin: 0; padding: 0; }
.boardlist > .boardpost {
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.boardlist > .boardpost.mine { border-left: 4px solid var(--c-gold); }
.boardhead { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.boardhead time { color: var(--c-ink-soft); font-size: 0.85rem; }
.boardhead .boarddel { margin-left: auto; }
a.boardauthor { font-weight: 700; color: var(--c-primary); text-decoration: none; }
a.boardauthor:hover { text-decoration: underline; }
.boardbody { margin-top: var(--sp-1); overflow-wrap: anywhere; line-height: 1.45; }
.boardreplies { margin-top: var(--sp-2); border-left: 2px solid var(--c-ink-border); padding-left: var(--sp-3); }
.boardpost.reply { padding: var(--sp-2) 0; }
.boardpost.reply + .boardpost.reply { border-top: 1px dashed var(--c-ink-border); }
.boardpost.reply .boardbody { font-size: 0.95rem; }
.boardreplyform { margin-top: var(--sp-2); }
.boardreplyform summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: 32px; color: var(--c-primary); font-weight: 700; font-size: 0.9rem;
}
.boardreplyform form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.boardpager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-3) 0; }
.boardpagenum { color: var(--c-ink-soft); font-size: 0.9rem; }

/* emberek listája (cimborák, jelölések, keresés, tiltólista) */
.peoplelist { list-style: none; margin: 0; padding: 0; }
.personrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.personrow + .personrow { border-top: 1px dashed var(--c-ink-border); }
.personinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.personinfo a { text-decoration: none; overflow-wrap: anywhere; }
.personinfo small { color: var(--c-ink-soft); }
.personactions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.presence {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    background: #b8a78a; border: 1px solid rgba(59, 45, 23, 0.4);
}
.presence.online { background: #3c9a2a; box-shadow: 0 0 0 3px rgba(60, 154, 42, 0.2); }
.searchform { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.searchform input[type="search"] { flex: 1 1 auto; min-width: 0; }
.chiplist { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* palackposta */
.mailpage { max-width: 920px; margin: 0 auto; width: 100%; }
.maillist { list-style: none; margin: 0; padding: 0; }
.mailrow { display: flex; align-items: center; gap: var(--sp-2); }
.mailrow + .mailrow { border-top: 1px dashed var(--c-ink-border); }
.mailmain {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; gap: 2px var(--sp-3);
    align-items: baseline; padding: var(--sp-3) var(--sp-2);
    color: var(--c-ink); text-decoration: none; border-radius: var(--radius-s);
}
.mailmain:hover { background: rgba(228, 194, 106, 0.18); text-decoration: none; }
.mailwho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailwho small { color: var(--c-ink-soft); }
.mailsubject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maildate { color: var(--c-ink-soft); font-size: 0.85rem; white-space: nowrap; }
.mailstate { grid-column: 2 / -1; color: var(--c-ink-soft); }
.mailrow.unread .mailsubject, .mailrow.unread .mailwho b { font-weight: 800; color: var(--c-primary); }
.mailnew {
    display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 8px;
    background: var(--c-life); color: #fff; font-size: 0.72rem; font-weight: 700; vertical-align: 1px;
}
.maildel { margin: 0; }
.iconbtn.small {
    width: 36px; height: 36px; min-height: 36px; padding: 0;
    background: transparent; border-color: var(--c-ink-border); color: var(--c-ink-soft); box-shadow: none;
}
.iconbtn.small:hover { background: #f7e6cd; color: var(--c-danger); }
.mailreadhead h3 { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }
.mailreadhead p { margin: 0 0 var(--sp-3); color: var(--c-ink-soft); }
.mailbody {
    padding: var(--sp-3) var(--sp-4); background: #fffaea; border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-s); line-height: 1.5; overflow-wrap: anywhere;
}
.mailactions { margin-top: var(--sp-4); }
.mailactions form { margin: 0; display: flex; }
.mailactions form > input { flex: 1 1 auto; }
.mailquote .mailbody { max-height: 14em; overflow: auto; font-size: 0.95rem; }
.mailtoline { margin: 0 0 var(--sp-3); }
.mailform .formfield { margin-bottom: var(--sp-3); }
.mailform .formfield input[type="text"] { width: 100%; }
.mailpick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-4); }

/* kalóz adatlap: közösségi gombok */
.socialbox .presence { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.socialbox p { margin: 0 0 var(--sp-2); }
.socialbox .pageactions { margin-top: var(--sp-3); }
.socialbox .pageactions form { display: flex; margin: 0; }
.socialbox .pageactions form > input { flex: 1 1 auto; }

@media (max-width: 1023.98px) {
    .mailpick { grid-template-columns: minmax(0, 1fr); }
    .mailmain { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-2) var(--sp-1); }
    .mailsubject { grid-column: 1 / -1; grid-row: 2; }
    .mailstate { grid-column: 1 / -1; grid-row: 3; }
    .boardlist > .boardpost { padding: var(--sp-3); }
    .boardreplies { padding-left: var(--sp-2); }
    .personrow { flex-wrap: wrap; }
    .personactions { width: 100%; justify-content: flex-start; padding-left: 0; }
    .presence + .personinfo + .personactions { padding-left: calc(12px + var(--sp-3)); }
}
@media (max-width: 479.98px) {
    img.tavernsign { width: 72px; }
}
/* telefonon a fejlécben a palack-ikon is elfér: sűrűbb eszközsor, egysoros erszény */
@media (max-width: 479.98px) {
    .headtools { gap: 6px; }
    .coinpurse { flex-wrap: nowrap; padding: var(--sp-1) 6px; }
    .iconbtn, .headlogout { width: 38px; height: 38px; min-height: 38px; }
    .sitelogo img { height: 36px; }
    .notifybadge { top: -6px; right: -6px; min-width: 18px; height: 18px; line-height: 16px; font-size: 11px; padding: 0 4px; }
}

/* "Több" lap és kikötő: a hely neve alatt egy sor, hogy mire való */
#morepanel .morename { display: flex; flex-direction: column; line-height: 1.2; }
#morepanel .morename small { font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
.townlist .townbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 56px; justify-content: center; }
.townlist .townbtn small { font-weight: 400; font-size: 0.8rem; opacity: 0.85; }

/* hajó: tag adatai és a kezelés külön; adomány előnézet */
.crewmanage { margin-top: var(--sp-2); }
.crewmanage > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--c-primary); }
.crewmanage[open] > summary { margin-bottom: var(--sp-2); }
.roleshelp { margin: var(--sp-3) 0 0; color: var(--c-ink-soft); }
.donatepreview { margin: var(--sp-2) 0; }
/* az adomány előnézet sorai a rács teljes szélességét kapják */
.shipdonation .donatepreview { grid-column: 1 / -1; margin: 0; }
.shipdonation input[type="submit"] { grid-column: 1 / -1; }

/* mellképek a nevek mellett (portrait/<nemzet>-<nem>.png) */
img.avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    object-fit: cover;
    background: radial-gradient(circle at 50% 35%, #fff4d6, #e4cf9c);
    border: 2px solid var(--c-gold); box-shadow: 0 1px 2px rgba(59, 45, 23, 0.35);
}
img.avatar.small { width: 28px; height: 28px; border-width: 1px; }
img.avatar.large { width: 64px; height: 64px; }
.avatarwrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatarwrap .presence { position: absolute; right: -2px; bottom: -2px; border: 2px solid #fffaea; }
.boardhead { align-items: center; }
.toplistname a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.crewmember { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); }
.crewmember > :not(.avatar) { grid-column: 2; }
.crewmember > .avatar { grid-row: 1 / span 3; align-self: start; }
.mailreadhead { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
.mailreadhead > :not(.avatar) { grid-column: 2; }
.mailreadhead > .avatar { grid-row: 1 / span 2; }
@media (max-width: 1023.98px) {
    .avatarwrap + .personinfo + .personactions,
    img.avatar + .personinfo + .personactions { padding-left: calc(40px + var(--sp-3)); }
    .mailrow > img.avatar { width: 32px; height: 32px; }
}

/* képeslap és ajándék a palackban */
.cardpick { border: 0; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.cardpick legend { font-weight: 700; margin-bottom: var(--sp-2); padding: 0; }
.cardopt {
    position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
    padding: 6px; border: 2px solid var(--c-ink-border); border-radius: var(--radius-s); background: #fffaea;
    font-size: 0.85rem; line-height: 1.2; text-align: center;
}
.cardopt img { width: 100%; aspect-ratio: 463 / 360; object-fit: cover; border-radius: 3px; }
.cardopt.none { justify-content: center; min-height: 80px; color: var(--c-ink-soft); }
.cardopt input { position: absolute; opacity: 0; pointer-events: none; }
.cardopt:hover { border-color: var(--c-gold); }
.cardopt:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(228, 194, 106, 0.55); background: #fff4d6; font-weight: 700; }
.cardopt:has(input:focus-visible) { outline: 3px solid var(--c-primary-bright); outline-offset: 2px; }
.giftrow { display: flex; align-items: center; gap: var(--sp-2); }
.giftrow input { width: 9em; }
.giftfield small { display: block; margin-top: 4px; color: var(--c-ink-soft); }
.giftfield p { margin: 0; }
figure.postcard {
    margin: 0 auto var(--sp-4); max-width: 560px; padding: 10px 10px 6px; background: #fffaea;
    border: 1px solid var(--c-ink-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(59, 45, 23, 0.25);
    transform: rotate(-1deg);
}
figure.postcard img { display: block; width: 100%; border-radius: 3px; }
figure.postcard figcaption { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-primary); text-align: center; padding-top: 6px; }
.giftline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); background: #fff4d6; border: 1px dashed var(--c-gold); border-radius: var(--radius-s); font-weight: 700; }
.mailtag { display: inline-block; padding: 0 6px; border-radius: 8px; background: #e9dcc0; color: var(--c-ink); font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
.mailtag.gift { background: var(--c-gold); }
@media (max-width: 479.98px) {
    .cardpick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* kitüntetések: karakterlap, adatlap, kézikönyv. A még meg nem szerzett érme
   szürke és halvány, a felirata mondja meg, hogyan lehet megszerezni. */
.badgehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.badgehead small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--c-ink-soft); }
.badgegrid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-4) var(--sp-3);
}
.badge { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.badge img { width: auto; height: 84px; object-fit: contain; margin-bottom: var(--sp-1); filter: drop-shadow(0 2px 2px rgba(59, 45, 23, 0.3)); }
.badge.locked img { filter: grayscale(1) opacity(.35); }
.badge b { font-size: 0.92rem; line-height: 1.15; color: var(--c-primary); }
.badge.locked b { color: var(--c-ink-soft); }
.badge small { font-size: 0.78rem; line-height: 1.25; color: var(--c-ink-soft); overflow-wrap: anywhere; }
.badgemore { margin: var(--sp-4) 0 0; text-align: right; }
.badgemore a { color: var(--c-primary); }

/* kézikönyv: tartalomjegyzék, fejezetek ikonnal, a harc háromszöge */
.hbintro { text-align: center; color: var(--c-ink-soft); margin: var(--sp-3) 0 var(--sp-4); }
.handbook > .card { scroll-margin-top: var(--sp-4); }
.hbicon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.hbtoc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px var(--sp-3); }
.hbtoc a {
    display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 2px var(--sp-1);
    color: var(--c-primary); border-radius: var(--radius-s); text-decoration: none;
}
.hbtoc a:hover { background: rgba(228, 194, 106, 0.22); }
.hbhead { display: flex; align-items: center; gap: var(--sp-2); }
.hbsection ol, .hbsection ul:not(.badgegrid):not(.hbtriangle) { padding-left: 1.3em; }
.hbsection li + li { margin-top: var(--sp-1); }
.hbsection a { color: var(--c-primary); }
.hbtriangle { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.hbtriangle li { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3); background: rgba(255, 250, 234, 0.6); border: 1px solid var(--c-ink-border); border-radius: var(--radius-s); }
.hbtriangle img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.hbbadges { margin: var(--sp-4) 0 var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.hbtop { margin: var(--sp-3) 0 0; text-align: right; font-size: 0.85rem; }
.startfoot { grid-column: 1 / -1; text-align: center; margin: 0; color: var(--c-ink-soft); }
.startfoot a { color: var(--c-primary); font-weight: 700; }
@media (max-width: 479.98px) {
    .hbtoc ol { grid-template-columns: minmax(0, 1fr); }
    .badgegrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-3) var(--sp-2); }
    .badge img { height: 64px; }
    .badge b { font-size: 0.84rem; }
    .badge small { font-size: 0.72rem; }
}

/* kincsvadászat: napi zsákmány + kincses térkép */
.dailybody { display: flex; align-items: center; gap: var(--sp-4); }
.dailybody p { margin: 0 0 var(--sp-2); }
.dailybody small { color: var(--c-ink-soft); display: block; }
img.dailychest { width: 112px; height: auto; flex-shrink: 0; filter: drop-shadow(0 4px 6px rgba(59, 45, 23, 0.35)); }
.dailyloot.ready img.dailychest { animation: chestwobble 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes chestwobble { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-4deg); } 88% { transform: rotate(4deg); } 92% { transform: rotate(-2deg); } }
.streak { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.streak li {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 700; color: var(--c-ink-soft);
    border: 2px solid var(--c-ink-border); background: #fffaea;
}
.streak li.done { background: var(--c-gold); border-color: #b08a2e; color: #3b2d17; }
.streak li.today { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 3px rgba(228, 194, 106, 0.55); }
.streak li.bonus { border-style: dashed; }
.iconlist { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.iconlist li { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; }
.iconlist li > img:first-child { flex-shrink: 0; }
.iconlist li > img:first-child { width: 40px; height: 40px; object-fit: contain; }
.treasurestatus { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.treasureboard { position: relative; margin: 0 auto; max-width: 480px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(59, 45, 23, 0.3); }
.treasureboard .boardbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diggrid { position: absolute; inset: 20%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4%; }
.digcell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.digcell img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(59, 45, 23, 0.4)); }
button.digcell {
    padding: 0; min-height: 0; border: 2px dashed transparent; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
button.digcell img { width: 62%; height: 62%; opacity: 0.88; }
button.digcell:hover, button.digcell:focus-visible { transform: scale(1.08); border-color: rgba(59, 45, 23, 0.55); background: rgba(255, 244, 214, 0.35); }
button.digcell:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 2px; }
.digcell b {
    position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: 0 6px; border-radius: 8px; background: rgba(255, 250, 234, 0.92); color: #3b2d17; font-size: 0.75rem;
}
.digcell.missed img { opacity: 0.45; filter: grayscale(0.4); }
.digcell.fresh img { animation: digpop .45s ease-out; }
@keyframes digpop { from { transform: scale(0.3) translateY(20%); opacity: 0; } to { transform: none; opacity: 1; } }
.treasureboard.empty .boardbg { filter: saturate(0.9); }
.treasurecard .pageactions button img { vertical-align: -4px; }
.treasurecard .pageactions { justify-content: center; margin-top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
    .dailyloot.ready img.dailychest, .digcell.fresh img { animation: none; }
}
@media (max-width: 479.98px) {
    img.dailychest { width: 80px; }
    .dailybody { align-items: flex-start; }
}
.centertext { text-align: center; }
button.primary .highlight, input.primary .highlight, .button.primary .highlight { color: inherit; }

/* karakterlap: bal oldalt a napló (teendők, értékek, hajó, kitüntetések),
   jobb oldalt a színpad — a nemzet kikötője nappal/éjjel, zászló, névtábla —
   és a lap alján a felszerelés és a gombok */
.charstage { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: 0; text-align: center; align-self: stretch; }
.stage {
    position: relative; overflow: hidden; isolation: isolate;
    width: 100%; flex: 1 1 auto; min-height: 560px; max-height: 960px;
    border-radius: 6px; border: 2px solid #9b7a3a;
    box-shadow: 0 0 0 4px rgba(236, 220, 179, 0.9), 0 0 0 5px #9b7a3a, 0 10px 24px rgba(59, 45, 23, 0.35);
    background: #cdb784;
}
.stage .stagebg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
/* a festmény széle a pergamenbe olvad */
.stage::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    box-shadow: inset 0 0 40px 14px rgba(236, 220, 179, 0.55);
    background: radial-gradient(ellipse 60% 14% at 50% 90%, rgba(30, 20, 8, 0.35), rgba(30, 20, 8, 0) 70%);
}
.stage-night::after { box-shadow: inset 0 0 40px 14px rgba(236, 220, 179, 0.4); }
.stage .stageflag {
    position: absolute; top: -2px; right: 6%; width: 20%; max-width: 110px; z-index: 1;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4)); transform-origin: 50% 0; animation: flagsway 6s ease-in-out infinite;
}
@keyframes flagsway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg) skewX(-1deg); } }
.charstage .stage .characterpic {
    position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
    width: auto; height: min(80%, 560px); max-height: none; max-width: 90%; object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(20, 12, 4, 0.45));
}
.nameplate {
    position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); z-index: 2;
    min-width: 58%; max-width: 92%; padding: 6px 22px 7px;
    border-radius: 999px; border: 2px solid #6f5420;
    background: linear-gradient(180deg, #f3d98f, #c99b3f 55%, #a87b2b);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.8), 0 4px 10px rgba(30, 20, 8, 0.45);
    color: #2b1f0c;
}
.nameplate::before, .nameplate::after {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff2c4, #7a5a1e); box-shadow: 0 0 0 1px #5d4517;
}
.nameplate::before { left: 10px; }
.nameplate::after { right: 10px; }
.nameplate .heroname { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; margin: 0; color: #2b1f0c; }
.nameplate .herometa { margin: 2px 0 0; font-size: 0.9rem; color: #4a3712; }

.stagebar { display: grid; gap: var(--sp-3); }
.gearslots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.gearslot { margin: 0; }
.gearslot, .gearslot > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 92px; padding: 8px 6px; width: 100%;
    border: 2px solid #b48a2c; border-radius: 6px;
    background: linear-gradient(180deg, #fffaea, #f3e6c4);
    box-shadow: inset 0 0 0 3px rgba(255, 250, 234, 0.9), 0 2px 5px rgba(59, 45, 23, 0.2);
    color: var(--c-ink); text-decoration: none; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.gearslot.potionslot { padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; }
.gearslot img { max-width: 72px; max-height: 50px; object-fit: contain; }
.gearslot span { overflow-wrap: anywhere; }
.gearslot small { font-weight: 400; color: var(--c-ink-soft); }
.gearslot.empty small { display: block; font-weight: 700; }
.gearslot.empty { border-style: dashed; color: var(--c-ink-soft); font-weight: 400; background: rgba(255, 250, 234, 0.5); }
a.gearslot:hover, .gearslot > button:hover { border-color: var(--c-primary); text-decoration: none; transform: translateY(-1px); }
.gearslot > button:focus-visible, a.gearslot:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 2px; }
.stageactions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.stageactions .btn { flex: 1 1 180px; }

/* napló: teendők kipipálandó listaként, élet+xp egy lapon, hajó képpel, kitüntetés-rács */
.checklist .nextstep { display: flex; align-items: center; gap: var(--sp-3); }
.checklist .checkbox {
    width: 20px; height: 20px; flex-shrink: 0; border: 2px solid #8a7550; border-radius: 3px;
    background: #fffaea; box-shadow: inset 0 1px 2px rgba(59, 45, 23, 0.2);
}
.checklist .nexttext { flex: 1 1 auto; min-width: 0; }
.barscard .statrow + .statrow { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--c-ink-border); }
a.myshipcard {
    display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; color: var(--c-ink);
}
a.myshipcard img { width: 150px; max-width: 42%; height: auto; flex-shrink: 0; }
a.myshipcard b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--c-primary); }
a.myshipcard small { color: var(--c-ink-soft); }
a.myshipcard:hover b { text-decoration: underline; }
.badgemini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-1); }
.badgemini .badge a { display: block; border-radius: 6px; }
.badgemini .badge img { display: block; width: 100%; height: auto; max-height: 72px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(59, 45, 23, 0.3)); transition: transform .15s ease; }
.badgemini .badge.locked img { filter: grayscale(1) opacity(.35); }
.badgemini .badge a:hover img, .badgemini .badge a:focus-visible img { transform: scale(1.08); }
.badgemini .badge a:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 2px; }

@media (max-width: 1023.98px) {
    .charstage { gap: var(--sp-3); }
    .stage { flex: none; min-height: 0; height: min(78vw, 380px); }
    .stage .stageflag { width: 64px; }
    .charstage .stage .characterpic { height: 76%; bottom: 13%; }
    .nameplate { bottom: 3%; padding: 4px 18px 5px; }
    .nameplate .heroname { font-size: 1.6rem; }
    .nameplate .herometa { font-size: 0.8rem; }
    .gearslot, .gearslot > button { min-height: 80px; }
    .stageactions .btn { flex: 1 1 140px; }
}
@media (max-width: 479.98px) {
    .badgemini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    a.myshipcard b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .stage .stageflag { animation: none; } }

/* ===================== harc: versus sáv + kártyaasztal + küzdőtér =====================
   bal oldal: a teendő (készenlét, keresés, lapok, döntés, eredmény),
   jobb oldal: a küzdőtér (nemzeti kikötő, a két harcos), fegyverek/képességek, korábbi körök */
.fightpage { display: grid; gap: var(--sp-3); }
.fightpage .fightPanel { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.fightpage .fightStatus { margin: 0 0 var(--sp-2); font-size: 1rem; }
.fightpage .practicebadge { justify-self: center; margin: 0; }

/* --- versus sáv --- */
.vsbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: 10px;
    background: linear-gradient(180deg, #fffaea, #f3e4bf); border: 1px solid #c9a95b;
    box-shadow: inset 0 0 0 3px rgba(255, 250, 234, 0.8), 0 3px 10px rgba(59, 45, 23, 0.18);
}
.vsside { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.vsenemy { flex-direction: row-reverse; text-align: right; }
.vsface {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
    border: 3px solid #b48a2c; background: radial-gradient(circle at 50% 35%, #fff4d6, #d9c08a);
    box-shadow: 0 0 0 2px #fffaea, 0 3px 8px rgba(59, 45, 23, 0.35);
}
.vsside.empty .vsface { visibility: hidden; }
.vsside.empty .vsinfo { opacity: 0.6; }
.vsside.empty .vslife, .vsside.empty .vslifetext { visibility: hidden; }
.vsinfo { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.vsname { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--c-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsmeta, .vslifetext { color: var(--c-ink-soft); font-size: 0.82rem; }
.vslifetext { font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.vslife { height: 12px; border-radius: 6px; background: #e3d3ad; border: 1px solid #a58a52; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }
.vslifefill { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #e5484d, #b91c1c); transition: width .45s ease; }
.vsenemy .vslifefill { margin-left: auto; }
.vslifefill.low { background: linear-gradient(180deg, #ff7b5c, #c2410c); animation: lifepulse 1s ease-in-out infinite; }
@keyframes lifepulse { 50% { filter: brightness(1.25); } }
.vscenter { display: grid; justify-items: center; gap: 2px; }
.vsseal {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.6rem; color: #fff3d0;
    background: radial-gradient(circle at 40% 35%, #c2412f, #7f1d14 70%); border: 3px solid #b48a2c;
    box-shadow: 0 3px 8px rgba(59, 45, 23, 0.4), inset 0 2px 3px rgba(255, 220, 190, 0.4);
}
.vsround { font-weight: 700; color: var(--c-ink-soft); font-size: 0.8rem; }

/* --- a két oldal --- */
.fightbook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--sp-6) * 1.4); align-items: start; }
.fightui { min-width: 0; display: grid; align-content: start; }
.fighthead { margin: 0 0 var(--sp-3); font-size: 1.6rem; }
.fightsub { margin: var(--sp-4) 0 var(--sp-2); font-size: 1.15rem; color: var(--c-primary); }
.fightstart { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.fightstart > * { flex: 1 1 180px; text-align: center; }

/* készenlét */
.readylist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.readylist li {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-radius: 8px; background: #fffaea; border: 1px solid var(--c-ink-border); border-left-width: 4px;
}
.readylist li > span { flex: 1 1 auto; min-width: 0; }
.readylist li.ok { border-left-color: #3f7a2c; }
.readylist li.warn { border-left-color: #c2410c; background: #fff1e4; }
.readylist li.tip { border-left-color: var(--c-gold); }
.readylist li.info { border-left-color: var(--c-primary); }
.rulecards { display: flex; align-items: center; gap: 4px; }
.minicard { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; }
.minicard img { width: 100%; max-width: 92px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 3px 4px rgba(59, 45, 23, 0.3)); }
.minicard figcaption { font-size: 0.78rem; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.minicard.again { opacity: 0.45; }
.beatsarrow { font-family: var(--font-display); font-size: 1.8rem; color: var(--c-gold); flex: 0 0 auto; }
.rulesnote { font-size: 0.92rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; }

/* keresés */
.searchbox { display: flex; align-items: center; gap: var(--sp-4); }
.searchbox p { margin: 0 0 var(--sp-2); }
.spinglass { width: 72px; height: auto; flex-shrink: 0; animation: glassflip 2.4s ease-in-out infinite; }
@keyframes glassflip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.searchbar { height: 10px; border-radius: 5px; background: #e3d3ad; overflow: hidden; margin-bottom: 6px; }
.searchbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-gold), #e9c46a); transition: width .25s linear; }
.warmupcount { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-primary); }
.warmupcount b { font-size: 2.6rem; }

/* --- kártyaasztal --- */
.cardrowhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.cardrowhead h4 { margin: 0; font-size: 1.05rem; color: var(--c-ink-soft); }
.cardrowhead small { color: var(--c-ink-soft); }
.readystamp {
    font-family: var(--font-display); font-size: 1.15rem; color: #2f6b22; border: 2px solid #2f6b22; border-radius: 4px;
    padding: 0 8px; transform: rotate(-6deg); background: rgba(240, 255, 230, 0.6); animation: stamp .35s ease-out;
}
@keyframes stamp { from { transform: rotate(-6deg) scale(2); opacity: 0; } }
.cardrow { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.slot { position: relative; aspect-ratio: 282 / 420; border-radius: 8px; min-width: 0; }
.slot > img, .slot .slotbtn > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.slot .cardlabel, .playcard .cardlabel {
    position: absolute; left: 9%; right: 9%; bottom: 7.5%; height: 12%; display: grid; place-items: center;
    color: #f7e7b8; font-weight: 700; font-size: clamp(0.55rem, 0.9vw, 0.8rem); line-height: 1; text-align: center; overflow: hidden;
}
.slot.empty { border: 2px dashed #b9a274; background: rgba(255, 250, 234, 0.55); display: grid; place-items: center; color: var(--c-ink-soft); font-weight: 700; }
.slot.empty.next { border-color: var(--c-primary); background: rgba(29, 84, 147, 0.06); box-shadow: 0 0 0 3px rgba(29, 84, 147, 0.12); }
.slot .slotbtn { position: absolute; inset: 0; padding: 0; margin: 0; min-height: 0; border: 0; background: none; box-shadow: none; border-radius: 8px; cursor: pointer; }
.slot .slotbtn:hover { transform: translateY(-3px); }
.slot .slotbtn:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 2px; }
.slot.facedown > img { filter: drop-shadow(0 3px 4px rgba(59, 45, 23, 0.3)); }
.enemyrow.shuffle .slot { animation: shuffle .6s ease-in-out; }
.enemyrow.shuffle .slot:nth-child(2) { animation-delay: .05s; } .enemyrow.shuffle .slot:nth-child(3) { animation-delay: .1s; }
.enemyrow.shuffle .slot:nth-child(4) { animation-delay: .15s; } .enemyrow.shuffle .slot:nth-child(5) { animation-delay: .2s; }
@keyframes shuffle { 40% { transform: translateY(-8px) rotate(-3deg); } }
.slot.faceup.justnow { animation: flip .45s ease-out; }
@keyframes flip { from { transform: rotateY(90deg) scale(1.05); } }
.slot.won { box-shadow: 0 0 0 3px #e9c46a, 0 0 18px 4px rgba(233, 196, 106, 0.75); }
.slot.lost > img, .slot.lost .cardlabel { filter: grayscale(0.7) brightness(0.75); }
.slot.tied > img { filter: saturate(0.5); }
.slotdmg {
    position: absolute; top: -10px; right: -6px; z-index: 2; padding: 1px 6px; border-radius: 10px;
    background: #b91c1c; color: #fff; font-weight: 800; font-size: 0.8rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.roundpill {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-2) auto;
    width: fit-content; padding: 4px 18px 4px 8px; border-radius: 999px;
    background: linear-gradient(180deg, #4a3215, #2b1d0c); color: #f7e7b8; border: 2px solid #b48a2c;
    font-family: var(--font-display); font-size: 1.25rem; box-shadow: 0 3px 8px rgba(30, 20, 8, 0.35);
}
.pillglass { width: 30px; height: 30px; object-fit: contain; }
[data-phase="planning"] .pillglass, [data-phase="waiting"] .pillglass { animation: glassflip 4s ease-in-out infinite; }
.pilltimer { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.pilltimer.hurry, #fightDecideTimer.hurry { color: #ff8a65; animation: lifepulse .6s ease-in-out infinite; }

/* a kéz: a három lap */
.handarea { margin-top: var(--sp-3); }
.hand { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); justify-content: center; gap: var(--sp-3); }
.playcard {
    position: relative; aspect-ratio: 282 / 420; padding: 0; margin: 0; min-height: 0; border: 0; border-radius: 10px;
    background: none; box-shadow: none; cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
.playcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(59, 45, 23, 0.4)); }
.playcard:nth-child(1) { transform: rotate(-5deg) translateY(6px); }
.playcard:nth-child(3) { transform: rotate(5deg) translateY(6px); }
.playcard:hover:not(:disabled), .playcard:focus-visible { transform: translateY(-10px) scale(1.04); z-index: 1; }
.playcard:focus-visible { outline: 3px solid var(--c-primary-bright); outline-offset: 3px; }
.playcard:disabled { cursor: default; filter: grayscale(0.6) opacity(0.6); }
.playcard .cardlabel { font-size: clamp(0.62rem, 1vw, 0.85rem); }
.cardbeats {
    position: absolute; top: 4%; right: 4%; width: 30%; aspect-ratio: 1; border-radius: 50%;
    border: 2px solid #e9c46a; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); overflow: hidden; background: #1b2a44;
}
.cardbeats img { width: 100%; height: 100%; display: block; }
.cardbeats::before { content: "›"; position: absolute; left: -12px; top: 50%; transform: translateY(-55%); color: #e9c46a; font-weight: 800; text-shadow: 0 1px 2px #000; }
.playcard kbd {
    position: absolute; top: 4%; left: 5%; min-width: 1.4em; padding: 0 4px; border-radius: 4px;
    background: rgba(20, 14, 6, 0.75); color: #f7e7b8; font: 700 0.72rem/1.4 var(--font-body);
}
.handactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.handactions #fightSend { flex: 1 1 220px; }
.waitingnote { text-align: center; font-style: italic; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; }
.handarea.locked .hand { opacity: 0.6; }
.decidearea { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 10px; background: #fffaea; border: 1px solid var(--c-ink-border); }
.roundsummary { margin: 0; }

/* eredmény */
.endbanner { text-align: center; padding: var(--sp-4) var(--sp-3); border-radius: 10px; color: #fff3d0; background: linear-gradient(180deg, #24406b, #142744); border: 2px solid #b48a2c; box-shadow: 0 6px 16px rgba(20, 30, 50, 0.35); }
.endbanner.win { background: radial-gradient(ellipse at 50% 0%, #3a6aa8, #142744 75%); }
.endbanner.lose { background: linear-gradient(180deg, #6b2a20, #3a130d); }
.endbanner h3 { margin: 0; color: #f7d98a; font-size: clamp(2rem, 4vw, 2.8rem); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.endbanner p { margin: var(--sp-1) 0 0; }
.rewardchips { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.rewardchips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fffaea; border: 1px solid var(--c-ink-border); font-weight: 700; }
.rewardchips li img { width: 22px; height: 22px; }
.rewardchips li.gain { color: #2f6b22; } .rewardchips li.loss { color: #b91c1c; }
.fightsummary { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.fightsummary div { padding: var(--sp-2); border-radius: 8px; background: #fffaea; border: 1px solid var(--c-ink-border); text-align: center; }
.fightsummary dt { font-size: 0.78rem; color: var(--c-ink-soft); }
.fightsummary dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; color: var(--c-primary); }

/* --- küzdőtér --- */
.fightarena { min-width: 0; display: grid; gap: var(--sp-3); align-content: start; }
.arenastage {
    position: relative; overflow: hidden; isolation: isolate; height: 360px; border-radius: 6px;
    border: 2px solid #9b7a3a; box-shadow: 0 0 0 4px rgba(236, 220, 179, 0.9), 0 0 0 5px #9b7a3a, 0 8px 20px rgba(59, 45, 23, 0.3);
    background: #2b3a55;
}
.arenastage .stagebg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -1; }
.arenastage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 12% at 50% 93%, rgba(20, 12, 4, 0.4), transparent 70%); }
.arenafighter { position: absolute; bottom: 5%; height: 86%; width: 42%; display: grid; place-items: end center; transition: transform .4s ease, opacity .4s ease; }
.arenafighter.you { left: 4%; }
.arenafighter.enemy { right: 4%; }
.arenafighter img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(10, 6, 2, 0.5)); }
/* a karakterképek balra néznek: a bal oldali (saját) harcost tükrözzük, hogy egymás felé forduljanak */
.arenafighter.you img { transform: scaleX(-1); }
.arenafighter.mystery img { filter: brightness(0) opacity(0.45); }
.mysterymark { display: none; }
.arenafighter.mystery .mysterymark {
    display: block; position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-size: 4rem; color: #f7e7b8; text-shadow: 0 2px 8px #000;
}
[data-phase="searching"] .arenafighter.mystery { animation: mysterypulse 1.6s ease-in-out infinite; }
@keyframes mysterypulse { 50% { opacity: 0.55; } }
[data-phase="warmup"] .arenafighter.enemy { animation: slidein .7s ease-out; }
@keyframes slidein { from { transform: translateX(60%); opacity: 0; } }
.arenafighter.hit { animation: hit .45s ease-out; }
@keyframes hit { 15% { transform: translateX(-10px); filter: brightness(1.8) sepia(1) hue-rotate(-40deg) saturate(4); } 35% { transform: translateX(8px); } 60% { transform: translateX(-4px); } }
.arenafighter.down { transform: rotate(-8deg) translateY(10px); opacity: 0.55; }
.arenafighter.enemy.down { transform: rotate(8deg) translateY(10px); }
.floater { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--font-display); font-size: 2.4rem; pointer-events: none; animation: floatup 1.3s ease-out forwards; z-index: 3; white-space: nowrap; }
.floater.dmg { color: #ff5a4f; text-shadow: 0 2px 0 #3a0a06, 0 0 10px rgba(0, 0, 0, 0.6); }
.floater.dodge { top: 36%; font-size: 1.5rem; color: #bfe3ff; text-shadow: 0 2px 4px #000; }
.floater.tie { top: 40%; color: #f7e7b8; text-shadow: 0 2px 4px #000; }
@keyframes floatup { to { transform: translate(-50%, -50px); opacity: 0; } }

/* fegyverek és képességek */
.tape { width: 100%; border-collapse: separate; border-spacing: 0; background: #fffaea; border: 1px solid var(--c-ink-border); border-radius: 8px; overflow: hidden; font-size: 0.9rem; }
.tape th, .tape td { padding: 6px 10px; text-align: left; vertical-align: middle; }
.tape thead th { background: #efe0bb; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--c-primary); }
.tape tbody tr + tr > * { border-top: 1px dashed var(--c-ink-border); }
.tape tbody th { width: 30%; font-weight: 700; }
.tape tbody th small { display: block; font-weight: 400; color: var(--c-ink-soft); font-size: 0.75rem; }
.tape td { font-variant-numeric: tabular-nums; }
.tape td.lead { color: #2f6b22; font-weight: 800; }
.tapeweapon { display: flex; align-items: center; gap: 6px; }
.tapeweapon img { width: 34px; height: 26px; object-fit: contain; flex-shrink: 0; }
.tapeweapon small { display: block; color: var(--c-ink-soft); font-weight: 400; }
.tapenone { color: var(--c-ink-soft); font-style: italic; }

/* korábbi körök */
.roundhistory .fightsub { margin-top: 0; }
.roundhistory ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.roundhistory li { display: grid; grid-template-columns: 4em minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-2); row-gap: 2px; align-items: center; padding: 6px 10px; border-radius: 8px; background: #fffaea; border: 1px solid var(--c-ink-border); }
.roundhistory li > b { grid-row: 1 / 3; font-family: var(--font-display); font-weight: 400; color: var(--c-primary); }
.histrow { display: grid; grid-template-columns: 1.6em repeat(5, 34px) auto; align-items: center; gap: 4px; }
.histrow small { color: var(--c-ink-soft); font-weight: 700; }
.histrow em { font-style: normal; font-weight: 800; justify-self: end; padding-left: 4px; }
.histrow em.good { color: #2f6b22; } .histrow em.bad { color: #b91c1c; }
.histstep { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.histstep img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.histstep.won { box-shadow: 0 0 0 2px #e9c46a, 0 0 8px rgba(233, 196, 106, 0.8); }
.histstep.lost img { filter: grayscale(0.8) brightness(0.8); }
.histstep.tied img { filter: saturate(0.4); opacity: 0.8; }
.histstep i { position: absolute; right: -6px; top: -6px; font-style: normal; font-size: 0.62rem; font-weight: 800; color: #fff; background: #b91c1c; border-radius: 8px; padding: 0 4px; line-height: 1.4; }

@media (max-width: 1023.98px) {
    .fightbook { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
    /* harc közben a küzdőtér van felül, előtte és utána a teendő */
    #fightPage:is([data-phase="warmup"], [data-phase="planning"], [data-phase="waiting"], [data-phase="reveal"], [data-phase="deciding"]) .fightarena { order: -1; }
    .arenastage { height: 230px; }
    .vsbar { position: sticky; top: 0; z-index: 6; padding: 6px 10px; gap: var(--sp-2); }
    .vsface { width: 42px; height: 42px; border-width: 2px; }
    .vsname { font-size: 1.1rem; }
    .vsmeta { display: none; }
    .vsseal { width: 40px; height: 40px; font-size: 1.1rem; }
    .vsround { font-size: 0.7rem; }
    .tape { font-size: 0.82rem; }
    .tape th, .tape td { padding: 4px 6px; }
    .fightsummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* telefonon tervezés közben a küzdőtér összecsuk, hogy a lapok elférjenek */
    [data-phase="planning"] .arenastage, [data-phase="waiting"] .arenastage { height: 150px; }
    #fightPage[data-phase="planning"] #fightTape, #fightPage[data-phase="waiting"] #fightTape,
    #fightPage[data-phase="planning"] .roundhistory, #fightPage[data-phase="waiting"] .roundhistory { display: none; }
}
@media (max-width: 479.98px) {
    .cardrow { gap: 4px; }
    .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .vsside { gap: 6px; }
    .roundhistory li { grid-template-columns: minmax(0, 1fr); }
    .roundhistory li > b { grid-row: auto; }
    .histrow { grid-template-columns: 1.4em repeat(5, minmax(0, 30px)) auto; }
    .histstep { width: 30px; height: 30px; }
    .histstep img { width: 26px; height: 26px; }
    .searchbox { align-items: flex-start; }
    .spinglass { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .playcard:nth-child(1), .playcard:nth-child(3) { transform: none; }
}
.fightpage .fightStatus:empty { display: none; }

/* dokk: egy hajó soronként, kép balra, szöveg jobbra */
.shipcards { grid-template-columns: minmax(0, 1fr); }
.shipcards > .shipcard {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: 2px;
    align-items: center; align-content: center; text-align: left; padding: var(--sp-3) var(--sp-4);
}
.shipcards > .shipcard > img { grid-column: 1; grid-row: 1 / span 5; justify-self: center; max-width: 150px; max-height: 96px; }
.shipcards > .shipcard > :not(img):not(input) { grid-column: 2; }
.shipcardhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.shipcardhead b { font-size: 1.15rem; }
.shipprice { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.shipprice.toodear .highlight { color: var(--c-danger); }
.shipcards > .shipcard > small { font-size: 0.92rem; }
@media (max-width: 479.98px) {
    .shipcards > .shipcard { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-3); }
    .shipcards > .shipcard > img { max-width: 88px; max-height: 64px; }
}

/* fegyverek: a kézben lévő fegyver nagy rézkeretben, alatta a táska és a bolt következő darabja */
.armory { display: grid; align-content: start; gap: var(--sp-4); }
.armory > .pagetitle, .armory > .titleorn, .armory > .pageintro { margin-bottom: 0; }
.armory > .pageintro { text-align: center; }
.armslot {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-4); align-items: center;
    padding: var(--sp-4); border-radius: 10px; border: 2px solid #b48a2c;
    background: linear-gradient(180deg, #fffaea, #f1e2bd);
    box-shadow: inset 0 0 0 4px rgba(255, 250, 234, 0.9), 0 4px 12px rgba(59, 45, 23, 0.22);
}
.armslot.empty { border-style: dashed; background: rgba(255, 250, 234, 0.6); }
.armpic { display: grid; place-items: center; height: 130px; border-radius: 8px; background: radial-gradient(circle at 50% 45%, rgba(255, 244, 214, 0.95), rgba(214, 190, 138, 0.35) 70%); }
.armpic img { max-width: 120px; max-height: 118px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(59, 45, 23, 0.35)); transform: rotate(-12deg); }
.armpic img.armghost { width: 56px; transform: none; opacity: 0.35; filter: grayscale(1); }
.arminfo { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.armlabel { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-soft); }
.armname { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--c-primary); }
.armslot.empty .armname { color: var(--c-ink-soft); font-size: 1.5rem; }
.armpower { margin: 2px 0 0; font-size: 0.95rem; }
.armpower b { font-size: 1.1rem; color: var(--c-primary); }
.armunequip { margin: 2px 0 0; }
.forcechip { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #3b2d17; color: #f7e7b8; font-size: 0.78rem; font-weight: 700; }
.deltachip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.deltachip.up { background: #dcefd2; color: #2f6b22; }
.deltachip.down { background: #f6dcd6; color: #9a2a1c; }
.deltachip.same { background: #ece2cc; color: var(--c-ink-soft); }
.armlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.armrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.armlist .armrow + .armrow { padding-top: var(--sp-2); border-top: 1px dashed var(--c-ink-border); }
.armrow > img { width: 64px; height: 52px; object-fit: contain; }
.armrow.islocked > img { filter: grayscale(0.8); opacity: 0.6; }
.armrowinfo { display: grid; gap: 2px; min-width: 0; }
.armrowinfo b { line-height: 1.2; }
.armrowinfo small { color: var(--c-ink-soft); font-size: 0.82rem; }
.armmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.armmeta .reqline { font-size: 0.8rem; }
.armprice { display: inline-flex; align-items: center; gap: 4px; }
.armprice.toodear .highlight { color: var(--c-danger); }
.armempty, .armchest { margin: 0; }
.armchest { margin-top: var(--sp-2); }
@media (max-width: 479.98px) {
    .armslot { grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
    .armpic { height: 96px; }
    .armpic img { max-width: 84px; max-height: 84px; }
    .armname { font-size: 1.5rem; }
    .armrow { grid-template-columns: 48px minmax(0, 1fr); }
    .armrow > img { width: 48px; height: 40px; }
    .armrow > form, .armrow > a { grid-column: 1 / -1; }
    .armrow > form button, .armrow > a { width: 100%; }
}

/* szörnyek a harctéren: nem tükrözzük (balra néznek, az ellenfél jobbról jön), nagyobbak */
.arenafighter.enemy.creaturefoe { width: 50%; right: 1%; }
.vsface.beastface { object-fit: contain; background: radial-gradient(circle at 50% 45%, #3b4c66, #1b2433); padding: 4px; }
.monsterlinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0 0; }

/* szörnyvadászat és tengeri szörny */
.monsterpage { display: grid; align-content: start; gap: var(--sp-4); }
.monsterpage > .pagetitle, .monsterpage > .titleorn, .monsterpage > .pageintro { margin-bottom: 0; }
.monsterpage > .pageintro { text-align: center; }
.wanted {
    position: relative; padding: var(--sp-4); border-radius: 10px; overflow: hidden;
    background: linear-gradient(180deg, #2a2216, #3b2d17 60%, #2a2216); color: #f7e7b8;
    border: 2px solid #b48a2c; box-shadow: inset 0 0 0 4px rgba(20, 14, 6, 0.6), 0 6px 16px rgba(59, 45, 23, 0.35);
}
.wanted.sea { background: linear-gradient(180deg, #13243b, #1d3557 60%, #13243b); }
.wantedhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.wantedweek { font-size: 0.85rem; opacity: 0.85; }
.wantedweek abbr { text-decoration: none; }
.tierbadge {
    display: inline-grid; place-items: center; min-width: 2.2em; padding: 2px 10px; border-radius: 999px;
    font-family: var(--font-display); font-size: 1.05rem; color: #fff6d8; border: 2px solid rgba(255, 236, 180, 0.6);
}
.tierbadge.tier1 { background: #6b7d3a; } .tierbadge.tier2 { background: #2f6f87; } .tierbadge.tier3 { background: #6a4596; }
.tierbadge.tier4 { background: #a1461f; } .tierbadge.tier5 { background: linear-gradient(180deg, #d4a017, #8a5a00); color: #2b1d00; }
.wantedbody { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.wantedpic { display: grid; place-items: center; min-height: 240px; border-radius: 8px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 220, 150, 0.25), transparent 70%); }
.wantedpic img { max-width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.wantedname { margin: 0 0 var(--sp-2); font-size: 2rem; line-height: 1.05; color: #f7d98a; }
.wantedlore { margin: 0 0 var(--sp-3); font-style: italic; line-height: 1.5; }
.wantedtip { margin: 0; font-size: 0.92rem; opacity: 0.95; }
.wantedtip b { color: #f7d98a; }
.wantedreward { margin: var(--sp-3) 0 0; text-align: center; }
.wantedreward .highlight { color: #f7d98a; }
.wanted .pageactions { justify-content: center; margin-top: var(--sp-3); }
.wantednote { margin: var(--sp-2) 0 0; text-align: center; opacity: 0.8; }
.wanted small { color: inherit; }
.wanted.slain .wantedpic img { filter: grayscale(0.6) brightness(0.7) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.slainstamp {
    position: absolute; top: 34%; left: 8%; margin: 0; padding: 4px 16px; transform: rotate(-12deg);
    font-family: var(--font-display); font-size: 2.2rem; color: #ff6b5b; border: 4px solid #ff6b5b; border-radius: 8px;
    background: rgba(40, 10, 6, 0.35); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); pointer-events: none;
}
.poolbar { position: relative; height: 26px; margin-top: var(--sp-3); border-radius: 13px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 236, 180, 0.5); overflow: hidden; }
.poolbar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #e5484d, #9b1c1c); transition: width .5s ease; }
.poolbar b { position: relative; display: grid; place-items: center; height: 100%; font-size: 0.85rem; text-shadow: 0 1px 2px #000; }
.bestiary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-3) var(--sp-2); }
.beast { display: grid; justify-items: center; gap: 2px; text-align: center; padding: var(--sp-2) 4px; border-radius: 8px; }
.beast img { width: 100%; height: 84px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(59, 45, 23, 0.35)); }
.beast b { font-size: 0.82rem; line-height: 1.15; }
.beast small { font-size: 0.72rem; color: var(--c-ink-soft); }
.beast.unseen img { filter: brightness(0) opacity(0.35); }
.beast.unseen b { color: var(--c-ink-soft); }
.beast.now { background: rgba(233, 196, 106, 0.25); box-shadow: inset 0 0 0 2px #e9c46a; }
.beast.now img { filter: drop-shadow(0 3px 4px rgba(59, 45, 23, 0.35)); }
.tierladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tierladder li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 56px; gap: var(--sp-3); align-items: center; padding: 6px 10px; border-radius: 8px; background: #fffaea; border: 1px solid var(--c-ink-border); }
.tierladder li.mine { border-color: #b48a2c; box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.6); }
.tierladder li.later img { filter: brightness(0) opacity(0.35); }
.tierladder img { width: 56px; height: 44px; object-fit: contain; }
.tierladder small { color: var(--c-ink-soft); }
.seaboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seaboard li { display: grid; grid-template-columns: 28px minmax(0, 7em) minmax(0, 1fr) 3em auto; gap: var(--sp-2); align-items: center; }
.seaboard li.me a { font-weight: 800; }
.seaboard a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seadmg { height: 10px; border-radius: 5px; background: #e3d3ad; overflow: hidden; }
.seadmg span { display: block; height: 100%; background: linear-gradient(90deg, #b48a2c, #e9c46a); }
.seaboard b { text-align: right; font-variant-numeric: tabular-nums; }
.seaboard small { color: var(--c-ink-soft); font-size: 0.75rem; white-space: nowrap; }
body.pg-szorny, body.pg-tengeriszorny { --sketch-left: url('../sketch/chart.png'); --sketch-right: url('../sketch/battle.png'); }
@media (max-width: 479.98px) {
    .wantedbody { grid-template-columns: minmax(0, 1fr); }
    .wantedpic { min-height: 180px; }
    .wantedpic img { max-height: 220px; }
    .slainstamp { top: 20%; }
    .seaboard li { grid-template-columns: 28px minmax(0, 1fr) 3em; }
    .seaboard .seadmg, .seaboard small { display: none; }
    .tierladder li { grid-template-columns: auto minmax(0, 1fr) 48px; }
    .tierladder small { display: none; }
}

/* jelentés gomb (táblák, palack, adatlap) */
.reportform { font-size: 0.85rem; }
.reportform summary { cursor: pointer; color: var(--c-ink-soft); min-height: 32px; display: inline-flex; align-items: center; }
.reportform[open] { flex-basis: 100%; }
.reportform form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); max-width: 420px; }
.reportform form input[type="submit"] { align-self: flex-end; }

/* moderátori pult (moderator/) */
.modstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.modstats > div { display: flex; flex-direction: column; align-items: center; padding: var(--sp-2); border: 1px solid var(--c-ink-border); border-radius: 4px; background: var(--c-parchment-2); text-align: center; }
.modstats b { font-size: 1.4rem; }
.modstats small { color: var(--c-ink-soft); }
.modsearch { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.modsearch input[type="search"] { flex: 1 1 220px; }
.modlist { list-style: none; margin: 0; padding: 0; }
.modlist > li { padding: var(--sp-2) 0; border-bottom: 1px dotted var(--c-ink-border); overflow-wrap: anywhere; }
.modlist > li:last-child { border-bottom: 0; }
.modlist small { color: var(--c-ink-soft); }
.modlist .modform { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); }
.modpast { opacity: 0.65; }
.modactive { border-left: 3px solid var(--c-danger); padding-left: var(--sp-2) !important; }
.modbad { color: var(--c-danger); }
.modreports { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.modsnap { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-gold); background: var(--c-cream); white-space: normal; overflow-wrap: anywhere; }
.modreport .pageactions form { display: contents; }
.modcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3); align-items: start; }
.modcols form.modform { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.modpanel ul.chiplist { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.modtypes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.modtypes legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-1); }
.modtable td { vertical-align: top; overflow-wrap: anywhere; }
.modtable td:first-child { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 767.98px) {
    .modcols { grid-template-columns: minmax(0, 1fr); }
}

/* süti sáv (DONE. GDPR, CDN, index.tpl) pergamenen; a könyvtár futáskor saját színeket ír, ezért html body + !important */
html body .done-gdpr-alert-box-wrapper {
    left: auto; right: var(--sp-4); width: calc(100% - 2 * var(--sp-4)); max-width: 420px;
    background: var(--c-parchment); color: var(--c-ink); border: 1px solid var(--c-ink-border);
    border-radius: var(--radius-m); box-shadow: var(--shadow-pop); font-family: var(--font-body);
}
html body .done-gdpr-alert-box-wrapper.active { bottom: var(--sp-4); }
html body .done-gdpr-alert-box-wrapper .done-gdpr-alert-box-bottom-top,
html body .done-gdpr-alert-box-wrapper .done-gdpr-alert-box-bottom-padding { display: none; }
html body .done-gdpr-alert-box-wrapper .done-gdpr-alert-box-body { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-1); }
html body .done-gdpr-alert-box-bg .done-gdpr-alert-box-button-container {
    position: static; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4);
    display: flex; flex-flow: row-reverse wrap; justify-content: flex-start; gap: var(--sp-2);
}
html body .done-gdpr-alert-box-wrapper .done-gdpr-alert-box-button { float: none; margin: 0; }
html body .done-gdpr-alert-box-wrapper .done-gdpr-alert-box-bg p { color: var(--c-ink) !important; font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
html body .done-gdpr-alert-box-wrapper a,
html body .done-gdpr-alert-box-wrapper .done-gdpr-button-more .done-gdpr-alert-box-button-middle a,
html body .done-gdpr-alert-box-wrapper .done-gdpr-button-more .done-gdpr-alert-box-button-middle a::before { color: var(--c-primary) !important; border-color: var(--c-ink-border); }
html body .done-gdpr-alert-box-wrapper .done-gdpr-button-allow .done-gdpr-alert-box-button-middle a { color: #fff !important; }
html body #done-gdpr #done-gdpr-popup-wrapper { font-family: var(--font-body); color: var(--c-ink); }
html body #done-gdpr #done-gdpr-popup-body h2,
html body #done-gdpr #done-gdpr-popup-body h3 { font-family: var(--font-display); font-weight: 400; color: var(--c-primary); }
.sitefoot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-6); font-size: 14px; }
.sitefoot a { color: var(--c-parchment-3); text-decoration-color: rgba(227, 205, 150, 0.4); }
.sitefoot a:hover { color: var(--c-cream); }