/*
 * h3.css -- Heroes III Revival retro-fantasy stylesheet.
 * Mobile-first, dark palette with gold accents. No JS, no external fonts.
 *
 * Design goals:
 *   - Feel like a fantasy manuscript on parchment (but readable on a phone).
 *   - Zero dependencies, one file, no build step.
 *   - Big tap targets, high contrast.
 */

/* ---------- Design tokens ---------- */
:root {
    --bg:          #1a0f08;         /* deep brown */
    --bg-panel:    #2a1a10;         /* card background */
    --bg-panel-2:  #3a2618;         /* elevated */
    --ink:         #f0e4c8;         /* parchment text */
    --ink-muted:   #c4b58f;
    --gold:        #d4a850;
    --gold-bright: #f0c464;
    --gold-dim:    #8a6b30;
    --red-blood:   #a03020;
    --stroke:      #5a4020;
    --radius:      6px;
    --shadow:      0 2px 6px rgba(0, 0, 0, 0.6);
    --font-body:   Georgia, 'Times New Roman', serif;
    --font-title:  'Cinzel', 'Trajan Pro', Georgia, serif;
}

/* ---------- Reset + base ---------- */
* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 20% 10%, rgba(212, 168, 80, 0.06), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(160, 48, 32, 0.05), transparent 40%),
        var(--bg);
}

h1, h2, h3 {
    font-family: var(--font-title);
    color: var(--gold-bright);
    letter-spacing: 0.02em;
    margin: 0 0 0.6em 0;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

p {
    margin: 0 0 1em 0;
}

a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dotted var(--gold-dim);
    transition: color 0.15s, border-color 0.15s;
}

a:hover, a:focus {
    color: var(--gold-bright);
    border-bottom-color: var(--gold-bright);
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Header ---------- */
.h3-header {
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border-bottom: 2px solid var(--stroke);
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: var(--shadow);
}

.h3-brand {
    color: var(--gold-bright);
    border: none;
    display: block;
    line-height: 1.1;
    text-align: center;
}

.h3-brand-primary {
    display: block;
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
}

.h3-brand-secondary {
    display: block;
    font-family: var(--font-title);
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.h3-nav {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.h3-nav a {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
}

.h3-nav a.h3-nav-cta {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: var(--bg);
    border-color: var(--gold-bright);
    font-weight: 700;
}

.h3-nav a.h3-nav-cta:hover {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* ---------- Main container ---------- */
.h3-main {
    flex: 1;
    padding: 1.5rem 1rem;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
}

/* ---------- Hero (landing) ---------- */
.h3-hero {
    text-align: center;
    padding: 1rem 0 2rem 0;
}

.h3-hero-banner {
    max-width: 320px;
    margin: 0 auto 1rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.h3-hero-title {
    font-size: 2rem;
    margin-top: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.h3-hero-lead {
    color: var(--ink-muted);
    font-style: italic;
    max-width: 520px;
    margin: 0 auto 1.4rem;
    font-size: 1.05rem;
}

.h3-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 300px;
    margin: 0 auto;
}

/* ---------- Buttons ---------- */
.h3-btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    border: 2px solid var(--stroke);
    font-family: var(--font-title);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    text-decoration: none;
}

.h3-btn:hover, .h3-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.h3-btn:active {
    transform: translateY(0);
}

.h3-btn-primary {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: var(--bg);
    border-color: var(--gold-bright);
}

.h3-btn-primary:hover {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: var(--bg);
    border-color: var(--gold-bright);
}

.h3-btn-secondary {
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    color: var(--gold-bright);
    border-color: var(--stroke);
}

.h3-btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border-color: transparent;
    border-bottom: 1px dashed var(--gold-dim);
    padding: 0.7rem 1.2rem;
}

/* ---------- Features grid (landing) ---------- */
.h3-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.h3-feature {
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow);
}

.h3-feature h2 {
    color: var(--gold-bright);
    margin-top: 0;
    font-size: 1.1rem;
}

.h3-feature p {
    margin-bottom: 0;
    color: var(--ink-muted);
    font-size: 0.95rem;
}

/* ---------- Article / About ---------- */
.h3-article {
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1.5rem 1.2rem;
    box-shadow: var(--shadow);
}

.h3-article h1 { margin-top: 0; }

.h3-article ol {
    padding-left: 1.4rem;
    color: var(--ink-muted);
}

.h3-article ol li {
    margin-bottom: 0.4rem;
}

.h3-cta-inline {
    margin-top: 1.4rem;
    text-align: center;
}

/* ---------- Forms (used later at /login, /register) ---------- */
.h3-form {
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1.4rem 1.2rem;
    max-width: 400px;
    margin: 1rem auto;
    box-shadow: var(--shadow);
}

.h3-form label {
    display: block;
    color: var(--gold);
    margin: 0.8rem 0 0.3rem;
    font-family: var(--font-title);
    font-size: 0.95rem;
}

.h3-form input[type="text"],
.h3-form input[type="password"],
.h3-form input[type="email"],
.h3-form select,
.h3-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
}

.h3-form input:focus, .h3-form select:focus, .h3-form textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}

.h3-form .h3-btn {
    width: 100%;
    margin-top: 1.2rem;
}

.h3-form-error {
    color: var(--red-blood);
    background: rgba(160, 48, 32, 0.1);
    border: 1px solid var(--red-blood);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* ---------- Error page ---------- */
.h3-error {
    text-align: center;
    padding: 3rem 1rem;
}

.h3-error h1 {
    font-size: 5rem;
    color: var(--red-blood);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.h3-error h2 {
    color: var(--gold);
    margin-top: 0;
}

/* ---------- Footer ---------- */
.h3-footer {
    padding: 1rem;
    text-align: center;
    color: var(--ink-muted);
    border-top: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
}

/* ---------- Auth: user badge in nav ---------- */
.h3-user {
    color: var(--ink-muted);
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border-left: 1px solid var(--stroke);
    margin-left: 0.4rem;
}

.h3-user strong {
    color: var(--gold-bright);
    font-family: var(--font-title);
}

.h3-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    margin-left: 0.4rem;
    background: var(--red-blood);
    color: #fff;
    font-size: 0.7rem;
    font-style: normal;
    font-family: var(--font-title);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 3px;
    vertical-align: middle;
}

.h3-badge-admin {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: var(--bg);
}

/* ---------- Auth: form wrapper + hints ---------- */
.h3-form-wrapper {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.h3-form-hint {
    color: var(--ink-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.5rem;
    text-align: center;
}

.h3-form-hint a {
    color: var(--gold-bright);
}

.h3-form small.h3-form-hint {
    display: block;
    text-align: left;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.h3-form h1 {
    margin-top: 0;
    text-align: center;
    font-size: 1.6rem;
}

/* ---------- Admin panel ---------- */
.h3-nav-admin {
    background: linear-gradient(180deg, var(--red-blood), #6a2010) !important;
    color: #fff !important;
    border-color: var(--red-blood) !important;
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em;
}

.h3-admin {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.h3-admin-side {
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1rem 0.5rem;
    box-shadow: var(--shadow);
}

.h3-admin-side-title {
    font-family: var(--font-title);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0 0.6rem 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--stroke);
}

.h3-admin-side nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.h3-admin-side nav a {
    display: block;
    padding: 0.55rem 0.8rem;
    color: var(--ink);
    border: none;
    border-left: 3px solid transparent;
    border-radius: 3px;
    font-size: 0.92rem;
    text-decoration: none;
}

.h3-admin-side nav a:hover {
    background: rgba(212, 168, 80, 0.08);
    color: var(--gold-bright);
}

.h3-admin-side nav a.active {
    background: rgba(212, 168, 80, 0.15);
    color: var(--gold-bright);
    border-left-color: var(--gold);
}

.h3-admin-body {
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    min-width: 0;
}

.h3-admin-body h1 {
    margin-top: 0;
    font-size: 1.8rem;
}

.h3-admin-lead {
    color: var(--ink-muted);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.h3-admin-empty {
    padding: 2rem;
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
}

.h3-admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.h3-admin-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.h3-admin-card-value {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--gold-bright);
    line-height: 1;
}

.h3-admin-card-label {
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h3-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    overflow: hidden;
}

.h3-admin-table th,
.h3-admin-table td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--stroke);
}

.h3-admin-table th {
    background: rgba(212, 168, 80, 0.08);
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h3-admin-table tr:last-child td {
    border-bottom: none;
}

.h3-admin-table code {
    background: rgba(0, 0, 0, 0.4);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--gold);
}

/* Collapse admin sidebar on mobile */
@media (max-width: 720px) {
    .h3-admin {
        grid-template-columns: 1fr;
    }
    .h3-admin-side {
        padding: 0.5rem;
    }
    .h3-admin-side nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.3rem;
    }
    .h3-admin-side nav a {
        flex: 1 0 auto;
        text-align: center;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .h3-admin-side nav a.active {
        border-left: none;
        border-bottom-color: var(--gold);
    }
}

/* ---------- Admin: users page (Step 2) ---------- */
.h3-admin-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.h3-admin-search input[type="text"] {
    background: var(--bg-panel);
    color: var(--ink);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.4rem 0.7rem;
    font-family: var(--font-body);
    font-size: 1rem;
    flex: 1 1 12rem;
    min-width: 8rem;
}
.h3-admin-search button {
    background: var(--gold-dim);
    color: var(--ink);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-family: var(--font-body);
}
.h3-admin-search button:hover { background: var(--gold); color: var(--bg); }
.h3-admin-search-clear {
    color: var(--ink-muted);
    text-decoration: underline;
    font-size: 0.85rem;
}
.h3-admin-search-count {
    margin-left: auto;
    color: var(--ink-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.h3-admin-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--bg-panel);
}
.h3-admin-users {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.h3-admin-users th,
.h3-admin-users td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--stroke);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.h3-admin-users tr:last-child td { border-bottom: none; }
.h3-admin-users tr.h3-row-banned { background: rgba(160, 48, 32, 0.10); }
.h3-admin-users tr.h3-row-deleted { background: rgba(0, 0, 0, 0.30); opacity: 0.70; }
.h3-admin-users tr:hover { background: rgba(212, 168, 80, 0.06); }

.h3-tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    border: 1px solid var(--stroke);
    background: var(--bg-panel-2);
}
.h3-tag-ok    { color: #a8d488; border-color: #4a6a2a; }
.h3-tag-warn  { color: var(--gold-bright); border-color: var(--gold-dim); }
.h3-tag-bad   { color: #f0a090; border-color: var(--red-blood); }
.h3-tag-role  { color: var(--gold-bright); border-color: var(--gold); background: rgba(212, 168, 80, 0.10); }
.h3-tag-muted { color: var(--ink-muted); font-style: italic; }

.h3-flash {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 4px solid var(--gold);
    background: var(--bg-panel-2);
}
.h3-flash-ok    { border-left-color: #6a9040; }
.h3-flash-error { border-left-color: var(--red-blood); }

.h3-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-panel-2);
    color: var(--ink-muted);
    margin-left: 0.3rem;
    font-style: normal;
}
.h3-badge-admin { color: var(--gold-bright); border: 1px solid var(--gold-dim); }
.h3-muted { color: var(--ink-muted); font-size: 0.8rem; }

.h3-actions { width: 4rem; text-align: center; }
.h3-action { position: relative; display: inline-block; }
.h3-action > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--bg-panel-2);
    color: var(--gold-bright);
    user-select: none;
}
.h3-action > summary::-webkit-details-marker { display: none; }
.h3-action[open] > summary { background: var(--gold-dim); color: var(--bg); }

.h3-action-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    background: var(--bg-panel);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
    padding: 0.6rem;
    box-shadow: var(--shadow);
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.h3-action-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--stroke);
}
.h3-action-form:last-child { border-bottom: none; padding-bottom: 0; }
.h3-action-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--ink-muted);
    gap: 0.15rem;
}
.h3-action-form select,
.h3-action-form input[type="text"] {
    background: var(--bg-panel-2);
    color: var(--ink);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.3rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.h3-btn {
    background: var(--gold-dim);
    color: var(--ink);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
}
.h3-btn:hover  { background: var(--gold); color: var(--bg); }
.h3-btn-ok     { background: #4a6a2a; border-color: #6a9040; }
.h3-btn-ok:hover { background: #6a9040; color: var(--bg); }
.h3-btn-warn   { background: #7a5020; border-color: var(--gold); }
.h3-btn-bad    { background: var(--red-blood); border-color: #c04030; }
.h3-btn-bad:hover { background: #c04030; }

.h3-admin-pager {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.h3-admin-pager a {
    color: var(--gold-bright);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
}
.h3-admin-pager a:hover { background: var(--gold-dim); }
.h3-pager-off  { color: var(--ink-muted); padding: 0.3rem 0.7rem; opacity: 0.5; }
.h3-pager-info { color: var(--ink-muted); font-size: 0.9rem; }

/* ---------- Admin: announcements + broadcast (Step 3) ---------- */
.h3-admin-card-wide {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin: 0.5rem 0 1.5rem;
}
.h3-admin-card-wide h2 { margin-top: 0; font-size: 1.1rem; }

.h3-admin-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.h3-admin-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--gold);
    font-family: var(--font-title);
    font-size: 0.95rem;
}
.h3-admin-form input[type="text"],
.h3-admin-form textarea {
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
    resize: vertical;
}
.h3-admin-form input[type="text"]:focus,
.h3-admin-form textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}
.h3-admin-form button { align-self: flex-start; }

.h3-btn-primary-admin {
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    color: var(--bg);
    border-color: var(--gold-bright);
    font-family: var(--font-title);
    padding: 0.55rem 1.2rem;
}
.h3-btn-primary-admin:hover {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

.h3-admin-warn {
    color: var(--gold-bright);
    background: rgba(160, 48, 32, 0.10);
    border: 1px solid var(--red-blood);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.h3-admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.h3-admin-list-item {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
}
.h3-admin-list-body {
    flex: 1;
    min-width: 0;
}
.h3-admin-list-meta {
    color: var(--ink-muted);
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}
.h3-admin-list-meta strong { color: var(--gold-bright); }
.h3-admin-list-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.95rem;
}
.h3-admin-list-action {
    flex-shrink: 0;
}

/* ---------- Admin: quiz page (Step 4) ---------- */
.h3-quiz-item { padding: 0.4rem 0.6rem; }
.h3-quiz-item details { width: 100%; }
.h3-quiz-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}
.h3-quiz-item summary::-webkit-details-marker { display: none; }
.h3-quiz-item[open] > summary { margin-bottom: 0.6rem; border-bottom: 1px dashed var(--stroke); padding-bottom: 0.5rem; }

.h3-quiz-id {
    color: var(--gold-bright);
    font-family: var(--font-title);
    font-weight: 700;
    flex-shrink: 0;
}
.h3-quiz-q {
    flex: 1 1 20rem;
    min-width: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.h3-quiz-edit {
    background: rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
}
.h3-quiz-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.h3-quiz-delete-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--stroke);
}

.h3-admin-form input[type="number"] {
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    font-size: 1rem;
    max-width: 8rem;
}

/* ---------- Theme switcher dropdown (5.6.1) ---------- */
.h3-theme-switch {
    position: relative;
    margin-left: 0.4rem;
}
.h3-theme-switch > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.2);
    color: var(--ink);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}
.h3-theme-switch > summary::-webkit-details-marker { display: none; }
.h3-theme-switch > summary::after {
    content: '▾';
    color: var(--gold);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}
.h3-theme-switch[open] > summary {
    background: var(--gold-dim);
    color: var(--bg);
    border-color: var(--gold);
}
.h3-theme-current { font-family: var(--font-title); letter-spacing: 0.02em; }

.h3-theme-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 22rem;
    max-width: calc(100vw - 1.5rem);
    background: var(--bg-panel);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
    padding: 0.5rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
/* On narrow viewports, pin dropdown to viewport edges instead of trigger.
   Anchoring at right:0 of an off-center trigger + min-width 22rem = clipped. */
@media (max-width: 640px) {
    .h3-theme-menu {
        position: fixed;
        top: auto;
        left: 0.5rem;
        right: 0.5rem;
        min-width: 0;
        max-width: none;
        width: auto;
        margin-top: 0.4rem;
    }
    .h3-theme-blurb { display: none; } /* keep only name+icon on small screens */
    .h3-theme-option { padding: 0.7rem 0.6rem; } /* bigger tap target */
}
.h3-theme-menu-title {
    font-family: var(--font-title);
    font-size: 0.75rem;
    color: var(--ink-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--stroke);
    margin-bottom: 0.3rem;
}
.h3-theme-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border: none !important;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}
.h3-theme-option:hover, .h3-theme-option:focus {
    background: rgba(212, 168, 80, 0.10);
    color: var(--gold-bright);
}
.h3-theme-option.active {
    background: rgba(212, 168, 80, 0.18);
    color: var(--gold-bright);
    outline: 1px solid var(--gold-dim);
}
.h3-theme-icon  { font-size: 1.3rem; flex-shrink: 0; }
.h3-theme-info  { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.h3-theme-name  { font-family: var(--font-title); font-size: 0.95rem; color: var(--gold-bright); }
.h3-theme-blurb { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }
.h3-theme-check { color: var(--gold-bright); font-size: 1.1rem; flex-shrink: 0; }

/* ---------- Admin sidebar: grouped sections (5.6.1) ---------- */
.h3-admin-side-group + .h3-admin-side-group { margin-top: 0.9rem; }
.h3-admin-side-group-title {
    font-family: var(--font-title);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0.1rem 0.9rem 0.35rem;
    opacity: 0.75;
}
.h3-admin-side-icon {
    display: inline-block;
    width: 1.4rem;
    text-align: center;
    margin-right: 0.35rem;
    font-size: 1rem;
}
.h3-admin-side nav a {
    display: flex !important;
    align-items: center;
}

/* ---------- Admin: audit log meta expandable (Step 5) ---------- */
.h3-log-meta { display: inline-block; }
.h3-log-meta summary {
    cursor: pointer;
    color: var(--gold);
    font-size: 0.85rem;
    list-style: none;
}
.h3-log-meta summary::-webkit-details-marker { display: none; }
.h3-log-meta pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
    max-width: 32rem;
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---------- Responsive: wider screens ---------- */
@media (min-width: 640px) {
    .h3-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
    }
    .h3-brand { text-align: left; }
    .h3-brand-primary { font-size: 1.8rem; }
    .h3-hero-actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }
    .h3-features {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================================
 * THEMES (5.6.1) -- H3 castle palettes.
 *
 * Each theme redefines the design-token custom properties. The rest of the
 * stylesheet consumes these tokens via var(--X), so this is the only place
 * where colors need to change per-theme.
 *
 * data-theme="tavern" is the default (matches :root above). We only emit
 * the overrides for the other five.
 * ===================================================================== */

/* ---------- Castle (Holy Knights) ---------- */
html[data-theme="castle"] {
    --bg:          #0e1a2e;
    --bg-panel:    #182642;
    --bg-panel-2:  #223357;
    --ink:         #f4ecd8;
    --ink-muted:   #b8c7dc;
    --gold:        #e8c46b;
    --gold-bright: #ffd97c;
    --gold-dim:    #a17d34;
    --red-blood:   #8f2a2a;
    --stroke:      #3a4f7a;
}
html[data-theme="castle"] body {
    background:
        radial-gradient(circle at 20% 10%, rgba(232, 196, 107, 0.08), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(58, 79, 122, 0.15), transparent 40%),
        var(--bg);
}

/* ---------- Rampart (Elves & Dwarves) ---------- */
html[data-theme="rampart"] {
    --bg:          #0d1a12;
    --bg-panel:    #1a2b1e;
    --bg-panel-2:  #26402c;
    --ink:         #e8f0d8;
    --ink-muted:   #bccca4;
    --gold:        #c68a3c;         /* copper */
    --gold-bright: #e0a355;
    --gold-dim:    #7d5626;
    --red-blood:   #7a3020;
    --stroke:      #3a5028;
}
html[data-theme="rampart"] body {
    background:
        radial-gradient(circle at 15% 15%, rgba(198, 138, 60, 0.06), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(58, 80, 40, 0.15), transparent 45%),
        var(--bg);
}

/* ---------- Necropolis (The Undead) ---------- */
html[data-theme="necropolis"] {
    --bg:          #0d0814;
    --bg-panel:    #1a1128;
    --bg-panel-2:  #2b1c40;
    --ink:         #ede4f0;
    --ink-muted:   #a898b8;
    --gold:        #9c6ec4;         /* amethyst instead of gold */
    --gold-bright: #c295e2;
    --gold-dim:    #614078;
    --red-blood:   #a01830;
    --stroke:      #3d2c56;
}
html[data-theme="necropolis"] body {
    background:
        radial-gradient(circle at 25% 25%, rgba(156, 110, 196, 0.08), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(160, 24, 48, 0.06), transparent 45%),
        var(--bg);
}

/* ---------- Inferno (Demons of Chaos) ---------- */
html[data-theme="inferno"] {
    --bg:          #140705;
    --bg-panel:    #251008;
    --bg-panel-2:  #391a0d;
    --ink:         #ffe0c8;
    --ink-muted:   #d4a08a;
    --gold:        #ff7a2e;         /* volcanic orange */
    --gold-bright: #ffa04a;
    --gold-dim:    #a94b1a;
    --red-blood:   #cc2020;
    --stroke:      #5a2818;
}
html[data-theme="inferno"] body {
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 122, 46, 0.10), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(204, 32, 32, 0.10), transparent 40%),
        var(--bg);
}

/* ---------- Dungeon (Dark Elves & Minotaurs) ---------- */
html[data-theme="dungeon"] {
    --bg:          #060a18;
    --bg-panel:    #0e1730;
    --bg-panel-2:  #182647;
    --ink:         #d8e6f0;
    --ink-muted:   #90a8c0;
    --gold:        #4dc5c5;         /* turquoise */
    --gold-bright: #7ce0e0;
    --gold-dim:    #2a7a7a;
    --red-blood:   #8a2050;
    --stroke:      #2a3a5c;
}
html[data-theme="dungeon"] body {
    background:
        radial-gradient(circle at 20% 20%, rgba(77, 197, 197, 0.07), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(138, 32, 80, 0.06), transparent 45%),
        var(--bg);
}

/* =====================================================================
 * Game frame (5.7.4) -- when the legacy WML is served under /game/*,
 * the wml_to_html filter wraps it in <main class="h3-game-main">.
 * We centre & narrow that column so the content isn't hugging the left.
 * ===================================================================== */
.h3-game-main {
    max-width: 44rem;
    margin: 1rem auto;
    padding: 1rem 1.2rem;
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-align: center;
    line-height: 1.55;
}
.h3-game-main a {
    color: var(--gold-bright);
}
.h3-game-main img {
    display: inline-block;
    margin: 0.4rem auto;
    max-width: 100%;
}
.h3-game-main hr,
.h3-game-main p:has(> br:only-child) {
    color: var(--stroke);
}
.h3-game-main small { font-size: 0.95em; }
.h3-game-main b, .h3-game-main strong { color: var(--gold-bright); }
.h3-game-main .wml-anchor {
    display: inline-block;
    margin: 0.2rem;
}
.h3-game-main .wml-anchor button {
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    color: var(--gold-bright);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    font-family: var(--font-body);
}
.h3-game-main .wml-anchor button:hover {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--bg-panel-2), rgba(0,0,0,0.35));
}
.h3-game-header {
    padding: 0.6rem 1rem;
}
.h3-game-header .h3-brand-primary { font-size: 1.2rem; }
.h3-game-header .h3-brand-secondary { font-size: 0.75rem; }

/* =====================================================================
 * Tavern Lobby (5.7.3) -- Heroes 3 style home for logged-in users.
 * Portrait + resource strip + big Play button + stacked menu cards.
 * ===================================================================== */

.h3-tavern {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1rem 0.5rem 2rem;
}

/* -- Header: portrait + hero name + big Play -- */
.h3-tavern-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 1rem;
    align-items: center;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.h3-portrait {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold-dim));
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 -3px 0 rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.h3-portrait-initials { text-shadow: 0 1px 0 rgba(255,255,255,0.15); }
.h3-portrait-level {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background: var(--red-blood);
    color: #fff;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-panel);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.h3-tavern-hero { min-width: 0; }
.h3-tavern-name {
    margin: 0 0 0.3rem;
    font-family: var(--font-title);
    color: var(--gold-bright);
    font-size: 1.5rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.h3-tavern-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.h3-tavern-sub .h3-tag {
    font-size: 0.75rem;
}

.h3-btn-play {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
    color: var(--bg);
    border: 2px solid var(--gold-bright);
    padding: 0.7rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 -3px 0 rgba(0,0,0,0.25);
    transition: transform 0.08s ease, box-shadow 0.15s ease;
    font-family: var(--font-title);
}
.h3-btn-play:hover,
.h3-btn-play:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.6), inset 0 -3px 0 rgba(0,0,0,0.25);
    color: var(--bg);
}
.h3-btn-play:active { transform: translateY(0); }
.h3-btn-play-icon {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}
.h3-btn-play-body {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}
.h3-btn-play-label {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.h3-btn-play-sub {
    font-size: 0.75rem;
    opacity: 0.75;
    font-family: var(--font-body);
    font-style: italic;
}

/* -- Resource strip (H3 top bar) -- */
.h3-resources {
    list-style: none;
    padding: 0.6rem 0.7rem;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05)),
        var(--bg-panel);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.h3-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.3rem 0.2rem;
    border-radius: 4px;
    text-align: center;
}
.h3-res + .h3-res { border-left: 1px dashed var(--stroke); }
.h3-res-icon {
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.h3-res-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.h3-res-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    font-family: var(--font-title);
}
.h3-res-value {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gold-bright);
    font-size: 0.95rem;
}

/* -- Menu cards, stacked 1-per-row -- */
.h3-tavern-menu {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}
.h3-tcard {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--stroke);
    border-left: 4px solid var(--gold-dim);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition:
        transform 0.08s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}
.h3-tcard:hover,
.h3-tcard:focus {
    transform: translateX(3px);
    border-left-color: var(--gold-bright);
    background: linear-gradient(180deg, var(--bg-panel-2), rgba(0,0,0,0.35));
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.h3-tcard-icon {
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.h3-tcard-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.h3-tcard-label {
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--gold-bright);
    font-size: 1.05rem;
}
.h3-tcard-label small {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.85rem;
    font-family: var(--font-body);
}
.h3-tcard-sub {
    color: var(--ink-muted);
    font-size: 0.83rem;
    font-family: var(--font-body);
}
.h3-tcard-arrow {
    color: var(--gold);
    font-size: 1.5rem;
    font-family: var(--font-title);
    padding: 0 0.2rem;
    opacity: 0.7;
}
.h3-tcard-alert {
    border-left-color: var(--red-blood);
    background: linear-gradient(180deg, rgba(160,48,32,0.12), var(--bg-panel));
}
.h3-tcard-alert .h3-tcard-label small { color: var(--gold-bright); font-weight: 700; }
.h3-tcard-admin  { border-left-style: dashed; }
.h3-tcard-logout { opacity: 0.75; }
.h3-tcard-logout:hover { opacity: 1; }

/* -- Tavern news -- */
.h3-tavern-news {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}
.h3-tavern-news-title {
    margin: 0 0 0.7rem;
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--stroke);
}
.h3-tavern-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.h3-tavern-news-item {
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed var(--stroke);
}
.h3-tavern-news-item:last-child { border-bottom: none; padding-bottom: 0; }
.h3-tavern-news-h {
    margin: 0 0 0.2rem;
    font-family: var(--font-title);
    color: var(--gold-bright);
    font-size: 1rem;
}
.h3-tavern-news-when {
    display: block;
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 0.3rem;
}
.h3-tavern-news-body {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.h3-tavern-cheer {
    text-align: center;
    color: var(--ink-muted);
    font-family: var(--font-title);
    letter-spacing: 0.03em;
    margin: 1.5rem 0 0;
}

/* -- Mobile tweaks -- */
@media (max-width: 640px) {
    .h3-tavern-head {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .h3-btn-play {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .h3-tavern-name { font-size: 1.2rem; }
    .h3-resources {
        grid-template-columns: repeat(4, 1fr);
    }
    .h3-res + .h3-res { border-left: none; }
    .h3-tcard { grid-template-columns: 2rem 1fr auto; padding: 0.7rem 0.8rem; }
    .h3-tcard-icon { font-size: 1.4rem; }
    .h3-tcard-label { font-size: 0.95rem; }
}

/* ---------- (legacy dashboard CSS kept for backwards-compat, if any old
     view still references .h3-dashboard) ---------- */
.h3-dashboard {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 0.5rem 2rem;
}
.h3-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--stroke);
}
.h3-dash-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.h3-dash-title strong { color: var(--gold-bright); }
.h3-dash-hello {
    color: var(--ink-muted);
    font-weight: 400;
    font-size: 0.95rem;
}
.h3-dash-level {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.h3-dash-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.7rem;
    margin-bottom: 2rem;
}
.h3-dash-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 0.7rem;
    align-items: baseline;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}
.h3-dash-item:hover,
.h3-dash-item:focus {
    transform: translateY(-1px);
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--bg-panel-2), rgba(0, 0, 0, 0.35));
    text-decoration: none;
}
.h3-dash-glyph {
    grid-row: 1 / span 2;
    color: var(--gold-bright);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    align-self: center;
}
.h3-dash-label {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gold-bright);
}
.h3-dash-label small {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.85rem;
    font-family: var(--font-body);
}
.h3-dash-sub {
    color: var(--ink-muted);
    font-size: 0.8rem;
    grid-column: 2;
}
.h3-dash-play {
    background: linear-gradient(180deg, rgba(232, 176, 32, 0.15), var(--bg-panel));
    border-color: var(--gold);
    box-shadow: 0 1px 0 rgba(232, 176, 32, 0.4) inset;
}
.h3-dash-play .h3-dash-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.h3-dash-alert {
    border-color: var(--red-blood);
    background: linear-gradient(180deg, rgba(160, 48, 32, 0.12), var(--bg-panel));
}
.h3-dash-alert .h3-dash-label small {
    color: var(--gold-bright);
    font-weight: 700;
}
.h3-dash-admin  { border-style: dashed; }
.h3-dash-logout {
    opacity: 0.85;
    background: linear-gradient(180deg, var(--bg-panel), rgba(0, 0, 0, 0.35));
}

.h3-dash-news {
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin-bottom: 1.2rem;
}
.h3-dash-news-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-title);
    color: var(--gold);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.h3-dash-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.h3-dash-news-item {
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--stroke);
}
.h3-dash-news-item:last-child { border-bottom: none; padding-bottom: 0; }
.h3-dash-news-h {
    margin: 0 0 0.2rem;
    font-family: var(--font-title);
    color: var(--gold-bright);
    font-size: 0.98rem;
}
.h3-dash-news-when {
    color: var(--ink-muted);
    font-size: 0.75rem;
    display: block;
    margin-bottom: 0.2rem;
}
.h3-dash-news-body {
    margin: 0;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.h3-dash-happy {
    text-align: center;
    color: var(--gold);
    font-style: italic;
    margin: 1rem 0 0;
}

@media (max-width: 640px) {
    .h3-dash-menu {
        grid-template-columns: 1fr;
    }
    .h3-dash-title { font-size: 1.15rem; }
}

/* ========================================================================
   Phase 5.8: context-back link + reply-disabled marker
   Injected by legacy wml_to_html filter for post-submit / PM view pages.
   ======================================================================== */
.h3-back-link {
    font-weight: 600;
    color: var(--gold, #d9a441);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding: 0 0.15rem;
}
.h3-back-link:hover {
    color: var(--gold-bright, #f5c766);
    border-bottom-style: solid;
}
.h3-reply-disabled {
    color: var(--ink-muted, #7a7268);
    font-style: italic;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.7;
}
/* ========================================================================
   Phase 5.8.2: mobile responsive fixes for admin panel + game frame
   ======================================================================== */

/* Admin: users table needs horizontal scroll on narrow screens (dropdown
   ban form was overflowing the card + being cut off). Wrap it in the
   .h3-admin-users-wrap container in the view for clean scroll, else
   fall back to overflow-x on the table itself. */
.h3-admin-users {
    overflow-x: auto;
    display: block;
}
.h3-admin-users tbody { display: table; width: 100%; }

/* Any inline <details><summary>Ban</summary>...</details> or <form> that
   opens inside a users-table row should shrink to fit the mobile viewport
   and never wider than the card. */
.h3-admin-users details,
.h3-admin-users form,
.h3-admin-users .h3-ban-form {
    max-width: 100%;
    box-sizing: border-box;
}

.h3-admin-users details[open] {
    display: block;
    position: relative;
    z-index: 1;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    margin-top: 0.3rem;
    max-width: 260px;
}

.h3-admin-users details[open] input,
.h3-admin-users details[open] select {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    /* On mobile: shrink admin sub-forms further, stack fields vertically. */
    .h3-admin-users details[open] {
        max-width: 100%;
    }
    /* Legacy game frame: reduce padding so text has more room. */
    .h3-game-main {
        padding: 0.6rem !important;
        max-width: 100% !important;
    }
    /* Prevent long unbreakable words (e.g. system PM text) from stretching
       the layout wider than the viewport on phones. */
    .h3-game-main {
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    /* Legacy tables of stats (Recruit Army page etc.) - allow wrap. */
    .h3-game-main table { display: block; overflow-x: auto; }
}
/* ========================================================================
   Phase 5.8.5: Register wizard -- hero picker
   ======================================================================== */
.h3-register-form fieldset.h3-register-hero {
    margin-top: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}
.h3-register-form fieldset.h3-register-hero legend {
    padding: 0 0.4rem;
    color: var(--gold, #d9a441);
    font-weight: 600;
}
.h3-register-form select {
    width: 100%;
    padding: 0.45rem 0.5rem;
    margin: 0.25rem 0 0.4rem;
    background: rgba(0, 0, 0, 0.35);
    color: var(--ink, #f0e6c8);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.95rem;
}
.h3-hero-preview {
    margin-top: 0.5rem;
    text-align: center;
    min-height: 60px;
}
.h3-hero-preview img {
    max-width: 96px;
    max-height: 96px;
    border: 2px solid var(--gold, #d9a441);
    border-radius: 4px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.30);
}
/* ============================================================ */
/* Faza 5.9.14 � Hero Info + polish (home_v2g)                  */
/* ============================================================ */

.h3-home {
    padding: 0.5rem 0;
    color: var(--ink, #f0e6c8);
}
.h3-home .h3-hero-block {
    text-align: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.h3-home .h3-hero-portrait {
    display: inline-block;
    border: 2px solid var(--gold, #d9a441);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.35);
    min-width: 130px;
}
.h3-home .h3-hero-img {
    max-width: 96px;
    max-height: 96px;
    display: block;
    margin: 0.3rem auto;
}
.h3-home .h3-hero-name {
    font-size: 1.05rem;
    color: var(--gold, #d9a441);
}
.h3-home .h3-hero-sub {
    font-size: 0.85rem;
    color: var(--ink-dim, #cbb890);
    font-style: italic;
}
.h3-home .h3-hero-stats {
    margin-top: 0.5rem;
    display: inline-block;
    text-align: left;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
}
.h3-home .h3-hero-stats-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold-dim, #b0782e);
    margin-top: 0.3rem;
}
.h3-home .h3-hero-stats-title:first-child { margin-top: 0; }
.h3-home .h3-hero-stats-row {
    font-size: 0.95rem;
    line-height: 1.4;
}
.h3-home .h3-hero-stats-xp {
    margin-top: 0.4rem;
    color: var(--ink-dim, #cbb890);
    font-size: 0.85rem;
}

/* Resource strip with icons */
.h3-home .h3-res-strip {
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    line-height: 1.6;
}
.h3-home .h3-res-row1 {
    font-size: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--gold-dim, #b0782e);
    margin-bottom: 0.3rem;
}
.h3-home .h3-res-row2 { font-size: 0.85rem; }
.h3-home .h3-res-ico {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
    display: inline-block;
}
.h3-home .h3-res-primary b { color: var(--gold, #d9a441); }

/* Section headers */
.h3-home .h3-section-hd {
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    font-size: 0.95rem;
    color: var(--gold, #d9a441);
    letter-spacing: 0.5px;
}
.h3-home .h3-section-ico { margin-right: 0.4rem; }
.h3-home .h3-section-lbl { text-transform: uppercase; }

.h3-home .h3-nav-block { margin-bottom: 0.4rem; }
.h3-home .h3-list {
    list-style: none;
    padding-left: 1rem;
    margin: 0.2rem 0;
}
.h3-home .h3-list li {
    padding: 0.15rem 0;
    font-size: 0.95rem;
}
.h3-home .h3-list li::before {
    content: "� ";
    color: var(--gold-dim, #b0782e);
    margin-right: 0.15rem;
}
.h3-home .h3-sublist {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0.1rem 0;
}
.h3-home .h3-sublist li::before { content: ""; }

.h3-home .h3-lands-title { margin-top: 0.4rem; margin-bottom: 0.2rem; }
.h3-home .h3-land-locked {
    color: var(--ink-dim, #8a7a5a);
    font-style: italic;
}
.h3-home .h3-lock-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0 0.35rem;
    background: rgba(139, 0, 0, 0.35);
    border: 1px solid #a44;
    color: #eab;
    border-radius: 3px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.h3-home .h3-badge {
    display: inline-block;
    background: var(--gold, #d9a441);
    color: #201a08;
    padding: 0 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.35rem;
}
.h3-home .h3-count {
    color: var(--ink-dim, #cbb890);
    font-size: 0.8rem;
    margin-left: 0.2rem;
}

.h3-home .h3-news-block { margin-top: 0.75rem; }
.h3-home .h3-news-item {
    padding: 0.4rem 0.5rem;
    background: rgba(0, 0, 0, 0.20);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    font-size: 0.9rem;
}

.h3-home .h3-footer-block {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gold-dim, #b0782e);
    text-align: center;
    font-size: 0.85rem;
}
.h3-home .h3-day-line {
    color: var(--ink-dim, #cbb890);
    margin-bottom: 0.4rem;
}
.h3-home .h3-logout-line { margin-top: 0.4rem; }

/* Settings page */
.h3-settings { padding: 0.5rem 0; }
.h3-settings .h3-page-title {
    color: var(--gold, #d9a441);
    font-size: 1.3rem;
    margin: 0 0 0.6rem;
}
.h3-settings .h3-nav-block {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
}

/* PC/desktop: 3-col grid for building cards & unit cards */
@media (min-width: 768px) {
    .h3-buildings-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .h3-unit-card,
    .h3-building-card {
        display: block;
        margin: 0;
    }
}
@media (max-width: 767px) {
    .h3-buildings-grid { display: block; }
    .h3-unit-card,
    .h3-building-card { display: block; width: 100%; margin-bottom: 0.5rem; }
}

/* Barracks list card (Faza 5.9.14e) */
.h3-unit-card {
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    background: rgba(0, 0, 0, 0.20);
    margin-bottom: 0.5rem;
}
.h3-unit-card .h3-unit-hd {
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    color: var(--gold, #d9a441);
}
.h3-unit-card .h3-unit-img {
    vertical-align: middle;
    margin-right: 0.4rem;
    max-width: 44px;
    max-height: 44px;
}
.h3-unit-card .h3-unit-stats {
    font-size: 0.85rem;
    color: var(--ink-dim, #cbb890);
    margin: 0.15rem 0;
}
.h3-unit-card .h3-unit-actions {
    margin-top: 0.35rem;
}
.h3-unit-card .h3-unit-actions a {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    margin-right: 0.3rem;
    background: rgba(217, 164, 65, 0.15);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 3px;
    font-size: 0.85rem;
    text-decoration: none;
}
.h3-unit-card .h3-unit-actions a:hover {
    background: rgba(217, 164, 65, 0.30);
}

/* ============================================================ */
/* Faza 5.9.14 — Hero Info + polish (home_v2g) + Settings + PC grid */
/* ============================================================ */

.h3-home {
    padding: 0.5rem 0;
    color: var(--ink, #f0e6c8);
}
.h3-home .h3-hero-block {
    text-align: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.h3-home .h3-hero-portrait {
    display: inline-block;
    border: 2px solid var(--gold, #d9a441);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.35);
    min-width: 130px;
}
.h3-home .h3-hero-img {
    max-width: 96px;
    max-height: 96px;
    display: block;
    margin: 0.3rem auto;
}
.h3-home .h3-hero-name {
    font-size: 1.05rem;
    color: var(--gold, #d9a441);
}
.h3-home .h3-hero-sub {
    font-size: 0.85rem;
    color: var(--ink-dim, #cbb890);
    font-style: italic;
}
.h3-home .h3-hero-stats {
    margin-top: 0.5rem;
    display: inline-block;
    text-align: left;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
}
.h3-home .h3-hero-stats-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold-dim, #b0782e);
    margin-top: 0.3rem;
}
.h3-home .h3-hero-stats-title:first-child { margin-top: 0; }
.h3-home .h3-hero-stats-row {
    font-size: 0.95rem;
    line-height: 1.4;
}
.h3-home .h3-hero-stats-xp {
    margin-top: 0.4rem;
    color: var(--ink-dim, #cbb890);
    font-size: 0.85rem;
}

/* Resource strip with icons */
.h3-home .h3-res-strip {
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.h3-home .h3-res-row1 {
    font-size: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed var(--gold-dim, #b0782e);
    margin-bottom: 0.3rem;
}
.h3-home .h3-res-row2 { font-size: 0.9rem; }
.h3-home .h3-res-ico {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
    display: inline-block;
    image-rendering: pixelated;
}
.h3-home .h3-res-primary b { color: var(--gold, #d9a441); }

/* Section headers (replace ASCII decorators) */
.h3-home .h3-section-hd {
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    font-size: 0.95rem;
    color: var(--gold, #d9a441);
    letter-spacing: 0.5px;
}
.h3-home .h3-section-ico { margin-right: 0.4rem; }
.h3-home .h3-section-lbl { text-transform: uppercase; }

.h3-home .h3-nav-block { margin-bottom: 0.4rem; }
.h3-home .h3-list {
    list-style: none;
    padding-left: 1rem;
    margin: 0.2rem 0;
}
.h3-home .h3-list li {
    padding: 0.15rem 0;
    font-size: 0.95rem;
}
.h3-home .h3-list li::before {
    content: "\00BB\00a0";
    color: var(--gold-dim, #b0782e);
}
.h3-home .h3-sublist {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0.1rem 0;
}
.h3-home .h3-sublist li::before { content: ""; }

.h3-home .h3-lands-title { margin-top: 0.4rem; margin-bottom: 0.2rem; }
.h3-home .h3-land-locked {
    color: var(--ink-dim, #8a7a5a);
    font-style: italic;
}
.h3-home .h3-lock-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0 0.35rem;
    background: rgba(139, 0, 0, 0.35);
    border: 1px solid #a44;
    color: #eab;
    border-radius: 3px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.h3-home .h3-badge {
    display: inline-block;
    background: var(--gold, #d9a441);
    color: #201a08;
    padding: 0 0.4rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.35rem;
}
.h3-home .h3-count {
    color: var(--ink-dim, #cbb890);
    font-size: 0.8rem;
    margin-left: 0.2rem;
}

.h3-home .h3-news-block { margin-top: 0.75rem; }
.h3-home .h3-news-item {
    padding: 0.4rem 0.5rem;
    background: rgba(0, 0, 0, 0.20);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    font-size: 0.9rem;
}

.h3-home .h3-footer-block {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--gold-dim, #b0782e);
    text-align: center;
    font-size: 0.85rem;
}
.h3-home .h3-day-line {
    color: var(--ink-dim, #cbb890);
    margin-bottom: 0.4rem;
}
.h3-home .h3-logout-line { margin-top: 0.4rem; }

/* Settings page */
.h3-settings { padding: 0.5rem 0; }
.h3-settings .h3-page-title {
    color: var(--gold, #d9a441);
    font-size: 1.3rem;
    margin: 0 0 0.6rem;
}
.h3-settings .h3-nav-block {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
}
.h3-settings .h3-section-hd {
    margin-top: 0;
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    padding: 0.25rem 0;
    color: var(--gold, #d9a441);
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* PC/desktop: 3-col grid for building cards & unit cards */
@media (min-width: 768px) {
    .h3-buildings-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .h3-unit-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .h3-unit-card,
    .h3-building-card {
        display: block;
        margin: 0;
    }
}
@media (max-width: 767px) {
    .h3-buildings-grid,
    .h3-unit-cards { display: block; }
    .h3-unit-card,
    .h3-building-card { display: block; width: 100%; margin-bottom: 0.5rem; }
}

/* Barracks list card (Faza 5.9.14e) */
.h3-unit-card {
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    background: rgba(0, 0, 0, 0.20);
    margin-bottom: 0.5rem;
}
.h3-unit-card .h3-unit-hd {
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    padding-bottom: 0.25rem;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    color: var(--gold, #d9a441);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.h3-unit-card .h3-unit-img {
    vertical-align: middle;
    max-width: 44px;
    max-height: 44px;
}
.h3-unit-card .h3-unit-stats {
    font-size: 0.85rem;
    color: var(--ink-dim, #cbb890);
    margin: 0.15rem 0;
}
.h3-unit-card .h3-unit-actions {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.h3-unit-card .h3-unit-actions a {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: rgba(217, 164, 65, 0.15);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 3px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink, #f0e6c8);
}
.h3-unit-card .h3-unit-actions a:hover {
    background: rgba(217, 164, 65, 0.30);
    color: var(--gold, #d9a441);
}
.h3-unit-card .h3-unit-actions a.h3-danger {
    background: rgba(139, 0, 0, 0.25);
    border-color: #a44;
    color: #eab;
}
.h3-unit-card .h3-unit-actions a.h3-danger:hover {
    background: rgba(139, 0, 0, 0.45);
}



/* ============================================================ */
/* Faza 5.9.14b — Fix cascade indent + collapsible + card grids */
/* ============================================================ */

/* Global reset for our nested lists so indentation does NOT cascade */
.h3-home ul.h3-list,
.h3-home ul.h3-sublist,
.h3-mycastle ul.h3-list,
.h3-settings ul.h3-list {
    list-style: none;
    padding-left: 0.5rem !important;
    margin: 0.2rem 0 !important;
    text-indent: 0 !important;
}
.h3-home ul.h3-list > li,
.h3-mycastle ul.h3-list > li,
.h3-settings ul.h3-list > li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left;
}
.h3-home ul.h3-sublist {
    padding-left: 1.25rem !important;
    margin-top: 0.1rem !important;
}

/* <details> + <summary> style for collapsible sections */
.h3-home details.h3-nav-block,
.h3-mycastle details.h3-nav-block {
    margin-bottom: 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
}
.h3-home details.h3-nav-block[open],
.h3-mycastle details.h3-nav-block[open] {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(217, 164, 65, 0.15);
}
.h3-home details.h3-nav-block > summary,
.h3-mycastle details.h3-nav-block > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    color: var(--gold, #d9a441);
    font-weight: 600;
    letter-spacing: 0.5px;
    user-select: none;
}
.h3-home details.h3-nav-block > summary::-webkit-details-marker,
.h3-mycastle details.h3-nav-block > summary::-webkit-details-marker { display: none; }
.h3-home details.h3-nav-block .h3-section-link {
    color: inherit;
    text-decoration: none;
    flex: 1;
}
.h3-home details.h3-nav-block .h3-section-link:hover {
    text-decoration: underline;
}
.h3-home details.h3-nav-block .h3-expand-hint {
    color: var(--gold-dim, #b0782e);
    transition: transform 0.15s ease;
    margin-left: 0.5rem;
}
.h3-home details.h3-nav-block[open] .h3-expand-hint {
    transform: rotate(180deg);
}

/* The World section — lands 2-col on desktop */
.h3-home .h3-lands-list {
    padding-left: 0.5rem !important;
}
.h3-home .h3-lands-title {
    padding-left: 0.5rem;
    margin-top: 0.5rem;
    color: var(--ink-dim, #cbb890);
}
@media (min-width: 768px) {
    .h3-home .h3-lands-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.15rem 1rem;
    }
}
@media (max-width: 767px) {
    .h3-home .h3-lands-list { display: block; }
}

/* Page titles (Settings, Manage Buildings, etc.) */
.h3-page-title {
    color: var(--gold, #d9a441);
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    letter-spacing: 0.5px;
}

/* Castle overview header */
.h3-mycastle-overview .h3-castle-header {
    text-align: center;
}
.h3-mycastle-overview .h3-castle-img {
    max-width: 200px;
    max-height: 140px;
    display: block;
    margin: 0 auto 0.5rem;
    border: 2px solid var(--gold, #d9a441);
    border-radius: 5px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.30);
}

/* Building cards (Manage Buildings grid) */
.h3-buildings-grid {
    display: block;
    gap: 12px;
}
.h3-building-card {
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 5px;
    padding: 0.5rem 0.65rem;
    background: rgba(0, 0, 0, 0.20);
    margin-bottom: 0.5rem;
}
.h3-building-card-hd {
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    padding-bottom: 0.25rem;
    margin-bottom: 0.3rem;
    color: var(--gold, #d9a441);
    font-size: 1rem;
}
.h3-building-icon { margin-right: 0.35rem; font-size: 1.1rem; }
.h3-building-card-state {
    font-size: 0.9rem;
    margin: 0.2rem 0;
}
.h3-building-card-effect {
    font-size: 0.8rem;
    color: var(--ink-dim, #cbb890);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .h3-buildings-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .h3-building-card { margin-bottom: 0; }
}

/* Kill dumb spacing from wrapping <p align="center"> in index.php */
.h3-home { text-align: left; }
.h3-home .h3-hero-block { text-align: center; }
.h3-home .h3-treasury-block { text-align: center; }
.h3-home .h3-footer-block { text-align: center; }
.h3-mycastle-overview { text-align: left; }
.h3-mycastle-overview .h3-castle-header { text-align: center; }
.h3-mycastle-overview .h3-footer-block { text-align: center; }
.h3-mycastle .h3-day-line { text-align: center; }



/* ============================================================ */
/* Faza 5.9.14c — buttons, clickable cards, expand-hint visibility */
/* ============================================================ */

/* Expand hint arrow (▾) — make visible on both light & dark themes */
.h3-home details.h3-nav-block .h3-expand-hint,
.h3-mycastle details.h3-nav-block .h3-expand-hint {
    color: var(--gold, #d9a441) !important;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    background: rgba(217, 164, 65, 0.12);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 3px;
    line-height: 1;
    display: inline-block;
}

/* Clickable building cards (Manage Buildings preview + Dwellings preview) */
.h3-building-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.h3-building-card-link:hover {
    background: rgba(217, 164, 65, 0.10);
    border-color: var(--gold, #d9a441);
    transform: translateY(-1px);
}
.h3-building-card-link:active { transform: translateY(0); }

/* Unit image inside dwelling building cards */
.h3-building-unit-img {
    vertical-align: middle;
    max-width: 44px;
    max-height: 44px;
    margin-right: 0.4rem;
    border-radius: 3px;
}

/* Section "open full page" button */
.h3-block-actions {
    text-align: right;
    margin-top: 0.4rem;
}
.h3-btn {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: rgba(217, 164, 65, 0.15);
    border: 1px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    color: var(--gold, #d9a441);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
}
.h3-btn:hover {
    background: rgba(217, 164, 65, 0.28);
    color: var(--ink, #f0e6c8);
}
.h3-btn:active { background: rgba(217, 164, 65, 0.40); }

/* Section headers on mycastle overview — align with home_v2g look */
.h3-mycastle-overview .h3-section-hd {
    color: var(--gold, #d9a441);
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--gold-dim, #b0782e);
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.95rem;
}



/* ============================================================ */
/* Faza 5.9.14d — Modern Realm Gateway (home.php) + Mithril polish */
/* ============================================================ */

/* Mithril premium resource highlight in the top strip */
.h3-res-premium .h3-res-icon {
    filter: drop-shadow(0 0 4px rgba(179, 143, 255, 0.65));
}
.h3-res-premium .h3-res-value {
    color: #d0aaff;
    font-weight: 700;
}
.h3-res-premium {
    background: linear-gradient(180deg, rgba(179, 143, 255, 0.10), rgba(179, 143, 255, 0.02));
    border-radius: 6px;
}

/* Realm Gateway sections */
.h3-realm-gateway {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 1.2rem 0;
}
.h3-gw {
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(217, 164, 65, 0.18);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}
.h3-gw-title {
    color: var(--gold, #d9a441);
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(217, 164, 65, 0.35);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.h3-gw-ico {
    font-size: 1.15rem;
    filter: drop-shadow(0 0 3px rgba(217, 164, 65, 0.35));
}
.h3-gw-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 600px) {
    .h3-gw-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
    .h3-gw-cards { grid-template-columns: 1fr 1fr 1fr; }
}
.h3-gw-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(217, 164, 65, 0.22);
    border-radius: 6px;
    color: var(--ink, #f0e6c8);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.h3-gw-card:hover {
    background: rgba(217, 164, 65, 0.12);
    border-color: var(--gold, #d9a441);
    transform: translateY(-1px);
}
.h3-gw-card:active { transform: translateY(0); }
.h3-gw-card-disabled {
    opacity: 0.55;
    cursor: default;
}
.h3-gw-card-disabled:hover { transform: none; background: rgba(0,0,0,0.25); border-color: rgba(217,164,65,0.22); }
.h3-gw-card-ico {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
.h3-gw-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.h3-gw-card-label {
    color: var(--gold, #d9a441);
    font-weight: 600;
    font-size: 0.95rem;
}
.h3-gw-card-sub {
    color: var(--ink-dim, #cbb890);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h3-gw-card-arrow {
    color: var(--gold-dim, #b0782e);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.h3-gw-badge {
    display: inline-block;
    background: var(--gold, #d9a441);
    color: #201a08;
    padding: 0 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.h3-gw-lock {
    display: inline-block;
    background: rgba(139, 0, 0, 0.35);
    border: 1px solid #a44;
    color: #eab;
    padding: 0 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* Footer (Logout) section — subtle */
.h3-gw-footer {
    background: transparent;
    border: none;
    padding-top: 0.5rem;
}
.h3-gw-card-logout {
    background: rgba(139, 0, 0, 0.15);
    border-color: rgba(139, 0, 0, 0.40);
}
.h3-gw-card-logout:hover {
    background: rgba(139, 0, 0, 0.30);
    border-color: #a44;
}



/* ============================================================ */
/* Faza 5.9.15a — hero details, unit cards, layout switcher     */
/* ============================================================ */

/* Hero bio blocks on mymenu?n=info */
.h3-mymenu-info .h3-hero-bio {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--gold-dim, #b0782e);
    border-radius: 4px;
    line-height: 1.5;
    font-size: 0.92rem;
    margin: 0.4rem 0;
}

/* Unit cards as anchor links (army page + dwellings preview) */
.h3-unit-card.h3-unit-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.h3-unit-card.h3-unit-card-link:hover {
    background: rgba(217, 164, 65, 0.12);
    border-color: var(--gold, #d9a441);
    transform: translateY(-1px);
}

/* Layout switcher — collapsible <details> in footer */
.h3-layout-switch {
    margin: 0.75rem auto;
    max-width: 480px;
    border: 1px solid rgba(217, 164, 65, 0.25);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.20);
    overflow: hidden;
}
.h3-layout-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gold, #d9a441);
    user-select: none;
    gap: 0.5rem;
}
.h3-layout-summary::-webkit-details-marker { display: none; }
.h3-layout-lbl { font-size: 0.9rem; letter-spacing: 0.5px; }
.h3-layout-switch[open] .h3-expand-hint { transform: rotate(180deg); }
.h3-layout-body {
    padding: 0.5rem 0.75rem 0.75rem;
    background: rgba(0, 0, 0, 0.10);
    border-top: 1px solid rgba(217, 164, 65, 0.20);
    font-size: 0.85rem;
    line-height: 1.6;
}
.h3-layout-current { color: var(--ink-dim, #cbb890); margin-bottom: 0.35rem; }
.h3-layout-group  { margin: 0.15rem 0; }
.h3-layout-classic {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(217, 164, 65, 0.25);
    color: var(--ink-dim, #cbb890);
}


/* Faza 5.9.16m — H3-style map/sublocation cards with unit portraits + action buttons */
.h3-map-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.h3-map-card:hover {
    border-color: rgba(200, 150, 60, 0.5);
    background: linear-gradient(180deg, rgba(200,150,60,0.06), rgba(0,0,0,0.2));
}
.h3-map-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 2px;
}
.h3-map-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: 0.35rem;
}
.h3-map-name {
    font-size: 0.95em;
    color: #e5d5b0;
    letter-spacing: 0.02em;
}
.h3-map-name b {
    color: #f7d774;
}
.h3-map-actions {
    display: flex;
    gap: 0.4rem;
}
.h3-map-actions .h3-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85em;
    border: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(180deg, #3a2a1a, #1c1408);
    color: #e5d5b0;
    text-decoration: none;
    border-radius: 3px;
    display: inline-block;
    transition: all 0.15s;
    letter-spacing: 0.05em;
    font-weight: bold;
}
.h3-map-actions .h3-btn:hover {
    background: linear-gradient(180deg, #5a3a20, #2a1a10);
    border-color: #b88848;
    color: #ffd47a;
}
.h3-btn-danger {
    background: linear-gradient(180deg, #6a2020, #300808) !important;
    color: #ff9c9c !important;
    border-color: rgba(255, 100, 100, 0.3) !important;
}
.h3-btn-danger:hover {
    background: linear-gradient(180deg, #883030, #400c0c) !important;
    color: #ffb0b0 !important;
    border-color: #ff5c5c !important;
}
.h3-map-object {
    border-left: 3px solid #a860c0;
}
.h3-map-creature {
    border-left: 3px solid #c05050;
}
.h3-map-resource {
    border-left: 3px solid #60a860;
}



/* Faza 5.9.16m3 — Full map views layout (Land / Territory / Sublocation) with vertical cards */
.h3-mapview {
    padding: 0.5rem;
}
.h3-mapview-header {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(80,60,30,0.15), rgba(0,0,0,0.35));
    border: 1px solid rgba(180,130,50,0.35);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.h3-mapview-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #f7d774;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.h3-mapview-crumbs {
    font-size: 0.9em;
    color: #a49070;
    font-style: italic;
    margin-bottom: 0.5rem;
}
.h3-mapview-banner {
    display: block;
    margin: 0.5rem auto;
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
    border: 1px solid rgba(180,130,50,0.4);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.h3-mapview-lore {
    font-size: 0.9em;
    color: #c5b590;
    margin-top: 0.5rem;
    line-height: 1.4;
}
.h3-mapview-siege {
    text-align: center;
    padding: 0.6rem;
    background: linear-gradient(180deg, #4a2818, #1a0808);
    border: 1px solid #8a4820;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.h3-mapview-siege a {
    color: #ffd47a;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}
.h3-mapview-cooldown, .h3-mapview-online {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.75rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    color: #a49070;
}
.h3-mapview-footer {
    text-align: center;
    padding: 0.75rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(180,130,50,0.25);
    color: #a49070;
}
.h3-mapview-footer a {
    color: #c5a878;
    text-decoration: none;
}
.h3-mapview-footer a:hover { color: #ffd47a; }

/* Grid: responsive, 2 col mobile / 3-4 col desktop */
.h3-mapcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.h3-mapcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    background: linear-gradient(180deg, rgba(60,45,25,0.5), rgba(20,10,4,0.7));
    border: 1px solid rgba(180,130,50,0.3);
    border-radius: 6px;
    text-align: center;
    min-height: 190px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.15s;
}
.h3-mapcard:hover {
    border-color: #c8a848;
    box-shadow: 0 4px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}
.h3-mapcard-locked {
    opacity: 0.55;
    filter: grayscale(0.5);
}
.h3-mapcard-locked:hover {
    transform: none;
    border-color: rgba(180,130,50,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.h3-mapcard-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(180,130,50,0.4);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 0.5rem;
}
.h3-mapcard-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #8a7050;
}
.h3-mapcard-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #e5d5b0;
    font-size: 0.9em;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}
.h3-mapcard-name b {
    color: #f7d774;
    font-size: 1.1em;
}
.h3-mapcard-name small {
    color: #a49070;
    display: block;
    margin-top: 0.15rem;
}
.h3-mapcard-btn {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 3px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(180deg, #3a2a1a, #1c1408);
    color: #e5d5b0;
    text-transform: uppercase;
    transition: all 0.15s;
}
.h3-mapcard-btn:hover {
    color: #ffd47a;
    border-color: #b88848;
}
.h3-btn-danger {
    background: linear-gradient(180deg, #6a2020, #300808) !important;
    color: #ff9c9c !important;
    border-color: rgba(255,100,100,0.35) !important;
}
.h3-btn-danger:hover {
    background: linear-gradient(180deg, #883030, #400c0c) !important;
    color: #ffb0b0 !important;
    border-color: #ff5c5c !important;
}
.h3-btn-primary {
    background: linear-gradient(180deg, #2a5a30, #0a1c0c) !important;
    color: #9cdd9c !important;
    border-color: rgba(120,200,120,0.35) !important;
}
.h3-btn-primary:hover {
    background: linear-gradient(180deg, #388038, #142a14) !important;
    color: #b0ffb0 !important;
    border-color: #5cff5c !important;
}
.h3-btn-neutral {
    background: linear-gradient(180deg, #3a2a5a, #100820) !important;
    color: #c5a8dd !important;
    border-color: rgba(180,130,220,0.35) !important;
}
.h3-btn-neutral:hover {
    background: linear-gradient(180deg, #503888, #1a1030) !important;
    color: #d8b8ff !important;
    border-color: #a878ff !important;
}
.h3-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0,0,0,0.5) !important;
    color: #6a5040 !important;
}

/* Category tint left borders */
.h3-mapcard-object   { border-left: 3px solid #a860c0; }
.h3-mapcard-creature { border-left: 3px solid #c05050; }
.h3-mapcard-resource { border-left: 3px solid #60a860; }
.h3-mapcard-region   { border-left: 3px solid #4488c8; }
.h3-mapcard-subloc   { border-left: 3px solid #c88848; }



/* ═══════════════════════════════════════════════════════════════
 * Faza 5.9.16n — Event/Object pages full H3 styling + Auto-Hunt UI
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Event page shell ─── */
.h3-event {
    padding: 8px;
    border: 2px solid #8a6b30;
    background: linear-gradient(180deg, #302416 0%, #1c150a 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    margin: 4px 0;
}
.h3-event .h3-mapview-header {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #6a4f22;
    margin-bottom: 10px;
}
.h3-event .h3-mapview-title {
    color: #f0d787;
    font-size: 1.15em;
    font-weight: bold;
    margin-bottom: 4px;
}
.h3-event .h3-mapview-crumbs {
    color: #a08050;
    font-size: 0.85em;
    margin-bottom: 8px;
}
.h3-event-portrait {
    display: block;
    margin: 8px auto;
    max-width: 128px;
    max-height: 128px;
    image-rendering: pixelated;
    border: 2px solid #6a4f22;
    background: #0d0906;
    padding: 4px;
    box-shadow: 0 0 8px rgba(240, 215, 135, 0.25);
}
.h3-event .h3-mapview-lore {
    color: #d6c090;
    text-align: center;
    font-size: 0.95em;
    margin-top: 6px;
}

/* ─── Stats card (event battle preview) ─── */
.h3-event-stats {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #6a4f22;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 10px 0;
    color: #e0d0a0;
}
.h3-event-stats-row {
    font-size: 0.95em;
    padding: 3px 0;
    border-bottom: 1px dotted #4a3818;
}
.h3-event-stats-row:last-child { border-bottom: none; }
.h3-event-stats-row b { color: #f0d787; }
.h3-event-stats-row small { color: #a08050; }
.h3-event-extras { padding-top: 6px; margin-top: 4px; border-top: 1px solid #4a3818; }
.h3-event-extras i { color: #e5a94c; }

/* ─── Action row (attack + auto-hunt buttons) ─── */
.h3-event-actions {
    text-align: center;
    padding: 8px 0;
    margin-top: 4px;
}
.h3-event-attack {
    display: block;
    margin: 8px auto;
    padding: 14px 18px;
    background: linear-gradient(180deg, #b23025 0%, #7a1a12 100%);
    border: 2px solid #ffcc44;
    color: #fff !important;
    font-size: 1.15em;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 2px 10px rgba(255, 60, 40, 0.55), inset 0 0 6px rgba(255, 220, 120, 0.25);
    border-radius: 3px;
    cursor: pointer;
}
.h3-event-attack:hover { filter: brightness(1.15); }
.h3-event-attack-lbl { letter-spacing: 1px; }
.h3-event-btn {
    display: inline-block;
    margin: 6px 4px;
    padding: 8px 14px;
    border: 1px solid #8a6b30;
    color: #f0d787 !important;
    background: linear-gradient(180deg, #4a3818 0%, #2a1e0a 100%);
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 3px;
}
.h3-event-btn:hover { filter: brightness(1.2); }

/* ─── Auto-Hunt page shell ─── */
.h3-home-autohunt {
    padding: 8px;
    border: 2px solid #8a6b30;
    background: linear-gradient(180deg, #201a10 0%, #100c06 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    margin: 4px 0;
}
.h3-home-autohunt .h3-mapview-header {
    padding-bottom: 6px;
    border-bottom: 1px solid #6a4f22;
    margin-bottom: 10px;
}
.h3-home-autohunt .h3-mapview-title { color: #ffcc44; font-size: 1.1em; }
.h3-home-autohunt .h3-mapview-lore {
    color: #d6c090;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #4a3818;
    border-radius: 3px;
    line-height: 1.55;
}
.h3-home-autohunt .h3-mapview-footer {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px dotted #4a3818;
    text-align: right;
}



/* ═══════════════════════════════════════════════════════════════
 * Faza 5.9.16n-fix1 — Auto-Hunt bottom panel + esthetic polish
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Auto-Hunt collapsible panel (sits below map cards) ─── */
.h3-ah-panel {
    margin: 14px 0 6px;
    border: 1px solid #6a4f22;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(48, 36, 22, 0.85) 0%, rgba(28, 21, 10, 0.85) 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.h3-ah-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    color: #f0d787;
    display: block;
    user-select: none;
    background: linear-gradient(180deg, #3a2b12 0%, #241a08 100%);
    border-bottom: 1px solid #6a4f22;
    transition: background 0.15s;
}
.h3-ah-summary::-webkit-details-marker { display: none; }
.h3-ah-summary::marker { content: ""; }
.h3-ah-summary:hover { filter: brightness(1.15); }
.h3-ah-icon { font-size: 1.1em; margin-right: 4px; }
.h3-ah-hint {
    float: right;
    color: #a08050;
    transition: transform 0.2s;
}
details[open] .h3-ah-hint { transform: rotate(180deg); }

/* Status badge inside summary */
.h3-ah-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.85em;
    vertical-align: middle;
}
.h3-ah-badge-on {
    background: rgba(90, 200, 90, 0.18);
    color: #a5e5a5;
    border: 1px solid #4a8a4a;
}
.h3-ah-badge-elsewhere {
    background: rgba(230, 180, 60, 0.16);
    color: #ffd48a;
    border: 1px solid #8a6b30;
}
.h3-ah-badge-off {
    background: rgba(140, 140, 140, 0.15);
    color: #b0b0b0;
    border: 1px solid #555;
}

/* Body */
.h3-ah-body { padding: 12px 14px; }
.h3-ah-rules {
    color: #b8a878;
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #8a6b30;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    line-height: 1.5;
}
.h3-ah-targets-label { color: #f0d787; margin-bottom: 6px; }
.h3-ah-targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.h3-ah-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px;
    background: linear-gradient(180deg, #2a1e0a 0%, #150e04 100%);
    border: 1px solid #6a4f22;
    border-radius: 3px;
    color: #e0d0a0 !important;
    text-decoration: none;
    font-size: 0.9em;
    transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
}
.h3-ah-target:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 6px rgba(240, 215, 135, 0.35);
    transform: translateY(-1px);
}
.h3-ah-target img {
    display: block;
    margin: 0 auto 4px;
    max-width: 56px;
    max-height: 56px;
    image-rendering: pixelated;
    background: #0d0906;
    padding: 2px;
    border: 1px solid #4a3818;
}
.h3-ah-target-noimg {
    display: inline-block;
    width: 56px;
    height: 56px;
    line-height: 56px;
    color: #6a4f22;
    background: #0d0906;
    border: 1px solid #4a3818;
    font-size: 1.5em;
}
.h3-ah-target-name { display: block; margin-top: 2px; color: #f0d787; }
.h3-ah-target-current {
    border-color: #ffcc44;
    box-shadow: 0 0 8px rgba(255, 204, 68, 0.35);
    background: linear-gradient(180deg, #3a2b12 0%, #241a08 100%);
}
.h3-ah-target-badge {
    display: block;
    margin-top: 4px;
    font-size: 0.75em;
    color: #a5e5a5;
    letter-spacing: 0.5px;
}

/* Stop button */
.h3-ah-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dotted #4a3818;
    text-align: center;
}
.h3-ah-stop {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(180deg, #7a1a12 0%, #4a0806 100%);
    color: #ffd0c0 !important;
    border: 1px solid #b23025;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.95em;
    box-shadow: 0 1px 6px rgba(255, 60, 40, 0.25);
}
.h3-ah-stop:hover { filter: brightness(1.2); }

/* ─── Esthetic polish for existing pieces ─── */

/* Map banner image — slightly larger + subtle glow so subloc feels epic */
.h3-mapview-banner {
    display: block;
    margin: 8px auto;
    max-width: 200px;
    max-height: 128px;
    image-rendering: pixelated;
    border: 2px solid #6a4f22;
    background: #0d0906;
    padding: 4px;
    box-shadow: 0 0 12px rgba(240, 215, 135, 0.2);
}

/* Sublocation title punchier */
.h3-mapview-sub .h3-mapview-title { font-size: 1.25em; letter-spacing: 0.5px; }
.h3-mapview-sub .h3-mapview-lore  { padding: 6px 12px; font-style: italic; }

/* Map cards — slight lift on hover */
.h3-mapcard {
    transition: transform 0.1s, box-shadow 0.15s;
}
.h3-mapcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}



/* ═══════════════════════════════════════════════════════════════
 * Faza 5.9.16n Phase B/C — Auto-Hunt scheduler + attack loop UI
 * ═══════════════════════════════════════════════════════════════ */

/* Home page banner shown when Auto-Hunt is ON */
.h3-ah-home-banner {
    display: block;
    margin: 8px auto;
    padding: 10px 14px;
    max-width: 520px;
    background: linear-gradient(180deg, #3a2b12 0%, #241a08 100%);
    border: 1px solid #ffcc44;
    border-radius: 4px;
    color: #f0d787;
    text-align: center;
    box-shadow: 0 0 12px rgba(255, 204, 68, 0.28), inset 0 0 4px rgba(255, 204, 68, 0.12);
}
.h3-ah-home-banner b { color: #ffcc44; }
.h3-ah-home-banner small { color: #d6c090; }
.h3-ah-home-banner a { color: #a5e5a5; text-decoration: none; }
.h3-ah-home-banner a:hover { text-decoration: underline; }

/* Inline "continue" strip shown at bottom of a victory screen */
.h3-ah-tick-info {
    display: block;
    margin: 6px 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid #ffcc44;
    color: #d6c090;
    border-radius: 2px;
}
.h3-ah-tick-info b { color: #ffcc44; }
.h3-ah-tick-info a { color: #a5e5a5; text-decoration: none; }
.h3-ah-tick-info a:hover { text-decoration: underline; }



/* ═══════════════════════════════════════════════════════════════
 * Faza 5.9.16n-fix4 — Map view row-mode + view toggle
 * ═══════════════════════════════════════════════════════════════ */

.h3-mapview-view-toggle {
    margin: 6px 0 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid #8a6b30;
    color: #d6c090;
    border-radius: 2px;
}
.h3-mapview-view-toggle a { color: #a5e5a5; text-decoration: none; margin: 0 2px; }
.h3-mapview-view-toggle a:hover { text-decoration: underline; }
.h3-mapview-view-toggle b { color: #ffcc44; }

/* Rows mode: convert the 3-col grid into a single-column stack of
 * rectangular banners (img left, name middle, action right). */
.h3-mapcards-grid.h3-mapcards-rows {
    display: block;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "img body btn";
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 6px;
    text-align: left;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-img {
    grid-area: img;
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: contain;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-noimg {
    grid-area: img;
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.6em;
    margin: 0;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-name {
    grid-area: body;
    padding: 0;
    text-align: left;
    font-size: 1em;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-name b {
    color: #ffcc44;
    font-size: 1.1em;
    margin-right: 4px;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-name br { display: none; }
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard-btn {
    grid-area: btn;
    margin: 0;
    padding: 8px 18px;
    min-width: 92px;
    text-align: center;
}
.h3-mapcards-grid.h3-mapcards-rows .h3-mapcard:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}



/* Faza 5.9.16p -- Multi-target Auto-Hunt picker + priority order + start btn. */
.h3-ah-target-picked {
    border-color: #4a8a4a !important;
    background: rgba(90,200,90,.16) !important;
    box-shadow: 0 0 6px rgba(90,200,90,.4);
}
.h3-ah-target-ord {
    background: #ffcc44 !important;
    color: #1a140b !important;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: .78em;
    margin-left: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.h3-ah-start {
    background: linear-gradient(180deg, #4a8a4a, #2a6a2a);
    color: #f0ffe0;
    border: 1px solid #2a6a2a;
    padding: 7px 14px;
    border-radius: 4px;
    font-weight: bold;
    font-size: .92em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    margin-right: 8px;
}
.h3-ah-start:hover { background: linear-gradient(180deg, #5aa05a, #3a7a3a); }
.h3-ah-clear { color: #b8a878; text-decoration: none; font-size: .85em; margin-left: 6px; }
.h3-ah-clear:hover { color: #ffcc44; text-decoration: underline; }


/* v0.5.9.17a-ah-global-widget */
/* Global sticky Auto-Hunt widget, injected by wml_to_html.php on every
   /game/* page when the current user has auto_hunt=1. Fixed to top so the
   user always sees hunt status + Resume/Manage/Stop controls even after
   navigating away (back-to-sublocation, going fishing, visiting Capitol,
   etc.). Hidden by default via [hidden]; JS unhides after first successful
   status poll. */
.h3-ah-global {
    position: sticky;
    top: 0;
    z-index: 900;
    background: linear-gradient(90deg, #3a1d0d 0%, #6c2a12 40%, #3a1d0d 100%);
    color: #ffe9b8;
    border-bottom: 2px solid #b17a3a;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    line-height: 1.4;
}
.h3-ah-global[hidden] { display: none; }
.h3-ah-global-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}
.h3-ah-global-badge {
    color: #ffd77a;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.h3-ah-global-status {
    font-style: italic;
    color: #b3e5b3;
}
.h3-ah-global-target { color: #f0d090; }
.h3-ah-global-stats { color: #cdd; opacity: 0.9; }
.h3-ah-global-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.h3-ah-global-btn {
    display: inline-block;
    padding: 3px 10px;
    background: #2d1608;
    color: #ffe9b8;
    border: 1px solid #8a5a2e;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.h3-ah-global-btn:hover {
    background: #4a2410;
    border-color: #d9a15b;
    color: #fff;
}
.h3-ah-global-btn-primary {
    background: #5a3016;
    border-color: #d9a15b;
    color: #ffdc90;
}
.h3-ah-global-btn-primary:hover {
    background: #7a3f1c;
}
.h3-ah-global-btn-danger {
    border-color: #a04030;
    color: #ffb4a4;
}
.h3-ah-global-btn-danger:hover {
    background: #4a1810;
    border-color: #d05a48;
    color: #ffd0c4;
}
@media (max-width: 640px) {
    .h3-ah-global-inner { font-size: 0.82rem; padding: 5px 8px; }
    .h3-ah-global-actions { width: 100%; margin-left: 0; margin-top: 4px; }
    .h3-ah-global-btn { flex: 1 1 auto; text-align: center; }
}