@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/montserrat-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/montserrat-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/montserrat-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/montserrat-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
    --bg: #14181f;
    --panel: #1e2430;
    --border: #333c4d;
    --text: #e8ecf3;
    --muted: #8a93a6;
    --accent: #c9a24a;
    --accent-dark: #9c7c2f;
    --error: #b3432f;
    --success: #3f8f5c;
    --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

h1, h2, h3 { color: var(--accent); font-weight: normal; letter-spacing: 0.02em; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: 0.9em; }

.topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--panel);
    border-bottom: 2px solid var(--accent-dark);
}
.topnav .brand { font-size: 1.2rem; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.topnav .brand img { display: block; height: auto; }
.auth-logo { margin: 0.5rem 0 0.2rem; }
.form label.terms-check { flex-direction: row; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.45; }
.form label.terms-check input { width: auto; margin-top: 0.2rem; flex: none; }
.auth-logo img { display: block; width: min(380px, 100%); height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7)); }
.topnav .brand .brand-icon { width: 40px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.topnav .brand .brand-word { width: 150px; }
@media (max-width: 380px) { .topnav .brand .brand-icon { width: 34px; } .topnav .brand .brand-word { width: 120px; } }
.topnav a { color: var(--text); text-decoration: none; padding: 0.25rem 0.5rem; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--accent); }
.topnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-spacer { flex: 1; }
.nav-user { color: var(--muted); }

.flash { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.flash-success { background: rgba(63,143,92,0.2); border: 1px solid var(--success); }
.flash-error { background: rgba(179,67,47,0.2); border: 1px solid var(--error); }

.form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 420px; }
.form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.form label[hidden] { display: none; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; }

input, textarea, select {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem;
    border-radius: 4px;
    font-family: inherit;
}
.qty-input { width: 4.5rem; }

button {
    background: var(--accent-dark);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
button:hover { background: var(--accent); }

.table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: normal; text-transform: uppercase; font-size: 0.8em; }
.table tr.you { background: rgba(201,162,74,0.08); }

#resource-bar {
    display: flex;
    gap: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
}
#resource-bar .resource { display: flex; flex-direction: column; }
#resource-bar .label { color: var(--muted); font-size: 0.75em; text-transform: uppercase; }
#resource-bar .value { font-size: 1.3rem; color: var(--accent); }

.race-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: none; }
.race-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
}
.race-card:has(input:checked) { border-color: var(--accent); }
.race-card input { margin-right: 0.5rem; }
.race-stats { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.9em; }

.dragon-alert { display: block; }
.countdown { color: var(--accent); font-variant-numeric: tabular-nums; }
.countdown-done { color: var(--success); }

.pagination { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }

.map-pan {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}
.map-pan a, .map-pan span.muted { padding: 0.2rem 0.4rem; }

.plot-grid {
    display: grid;
    gap: 2px;
    margin: 1rem 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.plot-grid-world {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
}
.plot-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.6rem;
    color: #fff;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.3);
    opacity: 0.55;
}
.plot-cell.owned { opacity: 1; }
.plot-cell.owned.mine { box-shadow: inset 0 0 0 2px #3f8f5c; }
.plot-cell.owned.theirs { box-shadow: inset 0 0 0 2px #c96a2a; }
.plot-cell.owned.ally { box-shadow: inset 0 0 0 2px #3a8fe0; }
.role-badge { display: inline-block; padding: 0 0.5rem; border-radius: 10px; font-size: 0.8rem; text-transform: capitalize; border: 1px solid var(--border); }
.role-leader { color: var(--accent); border-color: var(--accent); }
.role-officer { color: #6fb0f0; border-color: #3a8fe0; }
.plot-cell.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.plot-cell.terrain-forest { background: #2f5c3a; }
.plot-cell.terrain-mountain { background: #5a5850; }
.plot-cell.terrain-grassland { background: #5c8a3a; }
.plot-cell.terrain-desert { background: #b58a4a; }
.plot-cell.terrain-plains { background: #7a9a5a; }
.plot-cell.terrain-ocean { background: #1c3a5c; opacity: 0.7; pointer-events: none; }
.plot-cell.terrain-coastal { background: #3a7a8a; }
.plot-cell.terrain-lake { background: #2d6ea3; opacity: 0.7; pointer-events: none; }
.plot-cell.terrain-beach { background: #d9c48a; }
.plot-building { font-weight: bold; }
.building-icon-img { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.3em; }
/* Dashboard alerts: a small thumbnail of the camp / dungeon / raid painting before its name. */
.alert-thumb .encounter-icon-img { width: 2.6em; height: 2.6em; object-fit: contain; vertical-align: middle; margin: -0.6em 0.2em -0.5em 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
/* Build picker: one card per building that can go on this plot, with its painting, time, defence and cost. */
.build-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.6rem 0 0.8rem; }
.build-card { position: relative; cursor: pointer; }
.build-card input { position: absolute; opacity: 0; pointer-events: none; }
.build-card-body { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 100%; box-sizing: border-box; padding: 0.5rem 0.45rem 0.6rem; text-align: center;
    border: 2px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.15s, background 0.15s; }
.build-card:hover .build-card-body { border-color: var(--accent-dark); }
.build-card input:checked + .build-card-body { border-color: var(--accent); background: rgba(216, 168, 76, 0.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.build-card input:focus-visible + .build-card-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.build-card-art { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; font-size: 3.4rem; line-height: 1; }
.build-card-art .building-icon-img { width: 96px; height: 96px; vertical-align: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.build-card-art .gi { width: 72px; height: 72px; }
.build-card-name { font-weight: bold; }
.build-card-meta { font-size: 0.8rem; color: var(--muted); }
.build-card-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; font-size: 0.78rem; }

/* The selected tile's building, shown large in the plot panel so the artwork can be appreciated. */
.building-showcase { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0 0.8rem; }
.building-showcase h3, .building-showcase p { margin: 0; }
.building-showcase-art { flex: none; font-size: 4.5rem; line-height: 1; } /* an emoji stand-in (no painted art yet) is drawn large too */
.building-showcase .building-icon-img { width: 160px; height: 160px; flex: none; vertical-align: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.building-showcase .gi { width: 96px; height: 96px; }
@media (max-width: 420px) { .building-showcase .building-icon-img { width: 120px; height: 120px; } }
.plot-grid-island .plot-building .building-icon-img { width: calc(var(--cell, 32px) * 0.45); height: calc(var(--cell, 32px) * 0.45); vertical-align: 0; }
.plot-garrison {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.6rem;
    background: rgba(0,0,0,0.5);
    padding: 0 2px;
    border-radius: 2px;
}
.plot-knight, .plot-noble {
    position: absolute;
    top: 1px;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.5);
    padding: 0 2px;
    border-radius: 2px;
    line-height: 1.3;
}
/* Allied armies standing on someone else's tile: their own badge (top centre - the corners are taken by knights,
   nobles, camps, scouts and the owner's troop count), so a shared tile is not one number. */
.plot-guests { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.6rem; line-height: 1.3; background: rgba(28, 74, 140, 0.85); color: #fff; padding: 0 2px; border-radius: 2px; }
.plot-grid-island .plot-guests { font-size: 0.65rem; }
.plot-guests.plot-guests-mine { background: rgba(28, 120, 70, 0.9); }
/* The game's own SVG icons (includes/icons.php): sized to the surrounding text. */
.gi { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.event-icon .gi { width: 2rem; height: 2rem; min-width: 2rem; vertical-align: middle; }
.evp-ico .gi { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.plot-guests .gi { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 1px; }
.plot-building .gi { width: 1.4em; height: 1.4em; }
.armies-here { list-style: none; padding: 0; margin: 0.4rem 0; }
.armies-here li { padding: 0.15rem 0.5rem; border-left: 3px solid var(--border); margin: 0.2rem 0; }
.armies-here .army-mine { border-left-color: #46e682; }
.armies-here .army-ally { border-left-color: #4aa8ff; }
.plot-knight { left: 1px; }
.plot-noble { right: 1px; }
.plot-encounter {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 0.85rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px #000);
}
.plot-encounter-dungeon { animation: plot-encounter-pulse 1.8s ease-in-out infinite; }
/* Painted camp / dungeon / raid art (public_html/assets/img/encounters): centred on the tile like a building, a bit bigger. */
.plot-encounter-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.plot-encounter-art .encounter-icon-img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.building-showcase .encounter-icon-img { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.building-showcase .flash { flex: 1; margin: 0; }
@media (max-width: 420px) { .building-showcase .encounter-icon-img { width: 120px; height: 120px; } }
@keyframes plot-encounter-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.plot-detail { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; margin-top: 1rem; }
.plot-detail h3 { margin-top: 1.25rem; }

.world-cell {
    aspect-ratio: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.65rem;
    color: #fff;
    padding: 2px;
}
.world-cell.empty { background: #10151d; border: 1px dashed var(--border); }
.world-cell.occupied { background: #2f5c3a; border: 1px solid var(--accent-dark); }
.world-cell.occupied:hover { background: var(--accent-dark); }
.world-cell-raid { font-size: 0.85em; font-weight: bold; color: #ffd166; }
.world-cell-name { font-weight: bold; font-size: 0.95em; overflow-wrap: anywhere; }
.world-cell-stat { color: rgba(255,255,255,0.75); font-size: 0.85em; }

.site-footer { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: 0.85em; }

.plot-grid-island .plot-cell { font-size: 0.7rem; border-radius: 3px; }
.plot-grid-island .plot-building { text-shadow: 0 0 2px #000; }
.plot-grid-island .plot-garrison { font-size: 0.65rem; }
.plot-grid-island .plot-cell.unclaimed { opacity: 0.55; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; margin: 0.5rem 0; }
.map-legend .swatch { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.35); }

.plot-grid-island .plot-building { font-size: 1.05rem; line-height: 1; display: flex; flex-direction: column; align-items: center; text-shadow: none; }
.plot-grid-island .plot-building small { font-size: 0.6rem; font-weight: bold; background: rgba(0,0,0,0.55); border-radius: 3px; padding: 0 3px; margin-top: 1px; }

/* Wall/Gate/Moat connector art: one absolutely-positioned overlay per plot, its background-image and rotation
   picked purely by CSS class (computed server-side from neighbor data - see island_grid_tiles.php). Only 11 source
   images exist; the other 17 wall/gate/moat orientations are the same image rotated in 90-degree steps, which is
   also why every source image is a perfect square (a non-square image would distort on the 90/270deg rotations). */
.plot-obstacle { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 2; }
.plot-obstacle-level { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: bold; background: rgba(0,0,0,0.55); border-radius: 3px; padding: 0 3px; color: #fff; z-index: 3; }
.wall-shape-0 { background-image: url(/assets/img/obstacles/wall-post.webp); }
.wall-shape-1 { background-image: url(/assets/img/obstacles/wall-end.webp?v=2); }
.wall-shape-2 { background-image: url(/assets/img/obstacles/wall-end.webp?v=2); transform: rotate(90deg); }
.wall-shape-4 { background-image: url(/assets/img/obstacles/wall-end.webp?v=2); transform: rotate(180deg); }
.wall-shape-8 { background-image: url(/assets/img/obstacles/wall-end.webp?v=2); transform: rotate(270deg); }
.wall-shape-5 { background-image: url(/assets/img/obstacles/wall-straight.webp); }
.wall-shape-10 { background-image: url(/assets/img/obstacles/wall-straight.webp); transform: rotate(90deg); }
.wall-shape-3 { background-image: url(/assets/img/obstacles/wall-corner.webp?v=2); }
.wall-shape-6 { background-image: url(/assets/img/obstacles/wall-corner.webp?v=2); transform: rotate(90deg); }
.wall-shape-12 { background-image: url(/assets/img/obstacles/wall-corner.webp?v=2); transform: rotate(180deg); }
.wall-shape-9 { background-image: url(/assets/img/obstacles/wall-corner.webp?v=2); transform: rotate(270deg); }
.wall-shape-7 { background-image: url(/assets/img/obstacles/wall-t.webp?v=2); }
.wall-shape-14 { background-image: url(/assets/img/obstacles/wall-t.webp?v=2); transform: rotate(90deg); }
.wall-shape-13 { background-image: url(/assets/img/obstacles/wall-t.webp?v=2); transform: rotate(180deg); }
.wall-shape-11 { background-image: url(/assets/img/obstacles/wall-t.webp?v=2); transform: rotate(270deg); }
.wall-shape-15 { background-image: url(/assets/img/obstacles/wall-cross.webp?v=2); }
.gate-shape-v { background-image: url(/assets/img/obstacles/gate-line.webp); }
.gate-shape-h { background-image: url(/assets/img/obstacles/gate-line.webp); transform: rotate(90deg); }
.gate-shape-free { background-image: url(/assets/img/obstacles/gate-free.webp); }
.moat-hug-n { background-image: url(/assets/img/obstacles/moat-hug.webp); }
.moat-hug-e { background-image: url(/assets/img/obstacles/moat-hug.webp); transform: rotate(90deg); }
.moat-hug-s { background-image: url(/assets/img/obstacles/moat-hug.webp); transform: rotate(180deg); }
.moat-hug-w { background-image: url(/assets/img/obstacles/moat-hug.webp); transform: rotate(270deg); }
.moat-corner-ne { background-image: url(/assets/img/obstacles/moat-outer.webp); }
.moat-corner-es { background-image: url(/assets/img/obstacles/moat-outer.webp); transform: rotate(90deg); }
.moat-corner-sw { background-image: url(/assets/img/obstacles/moat-outer.webp); transform: rotate(180deg); }
.moat-corner-wn { background-image: url(/assets/img/obstacles/moat-outer.webp); transform: rotate(270deg); }
.moat-inner-wn { background-image: url(/assets/img/obstacles/moat-inner.webp); }
.moat-inner-ne { background-image: url(/assets/img/obstacles/moat-inner.webp); transform: rotate(90deg); }
.moat-inner-es { background-image: url(/assets/img/obstacles/moat-inner.webp); transform: rotate(180deg); }
.moat-inner-sw { background-image: url(/assets/img/obstacles/moat-inner.webp); transform: rotate(270deg); }
.moat-open { background-image: url(/assets/img/obstacles/moat-open.webp); }
/* Drawbridge: the moat piece underneath, plus planks laid across its channel (drawn for a moat along the north edge). */
.drawbridge-n { background-image: url(/assets/img/obstacles/drawbridge.webp); z-index: 3; }
.drawbridge-e { background-image: url(/assets/img/obstacles/drawbridge.webp); transform: rotate(90deg); z-index: 3; }
.drawbridge-s { background-image: url(/assets/img/obstacles/drawbridge.webp); transform: rotate(180deg); z-index: 3; }
.drawbridge-w { background-image: url(/assets/img/obstacles/drawbridge.webp); transform: rotate(270deg); z-index: 3; }
#resource-bar { flex-wrap: wrap; }
#resource-bar .rate { font-size: 0.75rem; color: var(--muted); }
#resource-bar .rate-up { color: #6fcf8f; }
.cost-line { margin: 0.5rem 0; }
.cost-chip { display: inline-block; padding: 0.1rem 0.5rem; margin: 0 0.15rem 0.15rem 0; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); font-size: 0.85rem; }
.cost-chip.cost-short { background: rgba(179,67,47,0.25); border-color: var(--error); color: #ffb4a3; }

.announcement { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid var(--accent-dark); background: rgba(201,162,74,0.12); }
.announcement-warning { border-color: #d59a2f; background: rgba(213,154,47,0.18); }
.announcement-danger { border-color: var(--error); background: rgba(179,67,47,0.22); }
.announcement-close { flex: none; background: none; border: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; opacity: 0.7; }
.announcement-close:hover { opacity: 1; }
.alert-close { float: right; margin: -0.15rem -0.3rem 0 0.5rem; background: none; border: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; opacity: 0.7; }
.alert-close:hover { opacity: 1; }
.treaty-offer > summary { display: inline-block; background: var(--accent-dark); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; list-style: none; }
.treaty-offer > summary::-webkit-details-marker { display: none; }
.treaty-offer > summary:hover { background: var(--accent); }
.treaty-offer[open] > summary { margin-bottom: 0.8rem; }
.treaty-choice { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.treaty-choice legend { padding: 0; margin-bottom: 0.3rem; font-size: 0.95rem; }
.form .treaty-choice label { flex-direction: row; align-items: baseline; gap: 0.45rem; cursor: pointer; }
.select-search { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0.25rem 0 0.3rem; }
.inline-form .select-search { display: inline-block; width: auto; min-width: 11rem; margin: 0 0.3rem 0 0; }
.siege-status { border-left: 3px solid var(--accent-dark); padding: 0.3rem 0.8rem; margin: 0.6rem 0; }
.siege-status p { margin: 0.2rem 0; }
.xp-bar { height: 0.6rem; border-radius: 4px; background: rgba(255,255,255,0.08); border: 1px solid var(--accent-dark); overflow: hidden; max-width: 30rem; }
.xp-bar span { display: block; height: 100%; background: var(--accent); }
.fill-buttons { display: inline-flex; gap: 0.25rem; margin-left: 0.4rem; flex-wrap: wrap; vertical-align: middle; }
.fill-button { padding: 0.15rem 0.45rem; font-size: 0.8rem; }
.treaty { border-left: 3px solid var(--accent-dark); padding: 0.3rem 0.8rem; margin: 0.6rem 0; }
.treaty-in { border-left-color: var(--accent); }
.war-status { color: var(--error); }

.chat-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.chat-tabs a { padding: 0.4rem 0.9rem; text-decoration: none; color: var(--text); border-bottom: 2px solid transparent; }
.chat-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.chat-count { display: inline-block; min-width: 1.2rem; padding: 0 0.35rem; border-radius: 10px; background: var(--error); color: #fff; font-size: 0.7rem; text-align: center; line-height: 1.2rem; }
.chat-layout { display: flex; gap: 1rem; align-items: flex-start; }
.chat-side { flex: none; width: 210px; display: flex; flex-direction: column; gap: 0.25rem; }
.chat-side a { padding: 0.3rem 0.5rem; border-radius: 4px; text-decoration: none; color: var(--text); }
.chat-side a.active, .chat-side a:hover { background: var(--panel); color: var(--accent); }
.chat-main { flex: 1; min-width: 0; }
.chat-log { height: 26rem; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; }
/* Chat messages (rows built by assets/js/chatrow.js), laid out like a phone's messages: avatar, then name + time over
   the bubble; your own messages on the right. Every bubble starts at the same place whatever its design. A quick
   follow-up from the same player (.is-cont) drops the avatar and name. */
.chat-msg { --chat-avatar: 2.25rem; display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.45rem 0 0.1rem; overflow-wrap: anywhere; }
.chat-msg.is-cont { padding-top: 0.15rem; }
.chat-msg.mine { flex-direction: row-reverse; }
.chat-avatar { flex: none; width: var(--chat-avatar); height: var(--chat-avatar); border-radius: 50%; overflow: hidden; border: 1px solid var(--accent-dark); background: var(--bg); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-avatar-none { color: var(--accent); font-weight: bold; font-size: 1rem; }
.chat-msg.is-cont .chat-avatar { visibility: hidden; height: 0; border: 0; }
.chat-stack { min-width: 0; max-width: min(78%, 40rem); display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.chat-msg.mine .chat-stack { align-items: flex-end; }
.chat-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; line-height: 1.2; max-width: 100%; }
.chat-msg.mine .chat-head { flex-direction: row-reverse; }
.chat-msg.is-cont .chat-head { display: none; }
.chat-head .np-plate.has-art { margin: 0.55em 0.2em; }
.chat-msg.mine .chat-name:not(.np-plate) { color: var(--accent); }
.chat-time { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.chat-line { display: flex; align-items: flex-end; gap: 0.35rem; max-width: 100%; }
.chat-msg.mine .chat-line { flex-direction: row-reverse; }
.chat-line .chat-body { min-width: 0; }
.chat-body.bubble-plain { display: inline-block; max-width: 100%; padding: 0.35em 0.75em; border-radius: 14px 14px 14px 4px; background: var(--bg); border: 1px solid var(--border); }
.chat-msg.mine .chat-body.bubble-plain { border-radius: 14px 14px 4px 14px; background: rgba(201, 162, 74, 0.16); border-color: rgba(201, 162, 74, 0.45); }
.chat-msg.mine .chat-body.bubble:not(.has-art) { border-radius: 10px 10px 2px 10px; }
.chat-tools { visibility: hidden; display: flex; gap: 0.25rem; flex: none; }
.chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { visibility: visible; }
.chat-tools button { padding: 0 0.4rem; font-size: 0.7rem; background: transparent; border: 1px solid var(--border); color: var(--muted); }
.cw-log .chat-msg { --chat-avatar: 1.8rem; gap: 0.45rem; }
.cw-log .chat-stack { max-width: 82%; }
.chat-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.chat-form input[type=text] { flex: 1; }
.chat-error { color: #ffb4a3; margin: 0.4rem 0 0; }
@media (max-width: 700px) { .chat-layout { flex-direction: column; } .chat-side { width: 100%; } }

.chat-count[hidden] { display: none; }

.bug-reply { margin-top: 0.4rem; padding: 0.4rem 0.7rem; border-left: 3px solid var(--accent); background: rgba(201,162,74,0.08); font-size: 0.9rem; }

/* Site-wide chat: a tray of icon buttons in the corner and a window that opens above it */
.cw { position: fixed; right: 1rem; bottom: 0; z-index: 900; width: min(360px, calc(100vw - 2rem)); font-family: var(--font); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.cw-panel, .cw-tray { pointer-events: auto; }
.cw-panel { width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.55); display: flex; flex-direction: column; height: min(430px, 70vh); margin-bottom: 0.7rem; overflow: hidden; }
.cw-panel[hidden] { display: none; }
/* Phones: while chat is open the page behind it does not scroll, and scrolling the conversation never spills over. */
html.cw-lock, html.cw-lock body { overflow: hidden; overscroll-behavior: none; }
.cw-log, .cw-list { overscroll-behavior: contain; }
.cw-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(#2b3346, #222a3a); border-bottom: 1px solid var(--border); }
.cw-title { padding: 0.45rem 0.8rem; font-size: 0.9rem; color: var(--accent); letter-spacing: 0.02em; }
.cw-x { background: transparent; padding: 0.3rem 0.8rem; font-size: 1.2rem; line-height: 1; color: var(--muted); }
.cw-x:hover { color: #fff; background: transparent; }
.cw-tray { display: flex; gap: 6px; padding: 0 0 max(0.7rem, env(safe-area-inset-bottom)); }
.cw-btn { --cw-ink: #252c3a; position: relative; width: 52px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; border: 1px solid #4b566b; background: linear-gradient(#3b4458, #262d3c); color: #b9c2d3; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 3px 0 #10151d, 0 6px 12px rgba(0,0,0,0.5); transition: transform 0.08s, box-shadow 0.08s, color 0.15s; }
.cw-btn svg { width: 25px; height: 25px; }
.cw-btn:hover { color: #fff; background: linear-gradient(#444e64, #2b3344); }
.cw-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 #10151d, 0 3px 6px rgba(0,0,0,0.5); }
.cw-btn.active { --cw-ink: #b48b2a; background: linear-gradient(#dcb95f, #a07f2c); border-color: #ecd083; color: #1d1708; }
.cw-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cw-pill { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); min-width: 1.6rem; padding: 0 0.4rem; background: #58b12a; border: 2px solid #eaf6da; color: #fff; font-weight: bold; font-size: 0.75rem; line-height: 1.15rem; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); white-space: nowrap; pointer-events: none; }
.cw-pill[hidden] { display: none; }
.cw-sub { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.cw-link { background: transparent; color: var(--accent); padding: 0; font-size: 0.85rem; }
.cw-list { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.cw-list[hidden], .cw-log[hidden], .cw-form[hidden], .cw-sub[hidden] { display: none; }
.cw-newdm { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.cw-newdm input { flex: 1; min-width: 0; }
.cw-conv { display: flex; justify-content: space-between; align-items: center; background: var(--bg); text-align: left; border: 1px solid var(--border); }
.cw-log { flex: 1; overflow-y: auto; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.cw-form { display: flex; gap: 0.3rem; padding: 0.4rem; border-top: 1px solid var(--border); }
.cw-form input { flex: 1; min-width: 0; }
.cw-note { margin: 0.5rem 0; }
.cw .chat-error { margin: 0 0.5rem; font-size: 0.85rem; }
body { padding-bottom: 4.5rem; }
@media (max-width: 700px) { .cw { right: 0.5rem; width: calc(100vw - 1rem); } .cw-panel { height: 60vh; } }
/* Mail */
.mail-list td { vertical-align: top; }
.mail-list tr.mail-unread td { font-weight: bold; }
.mail-list tr.mail-unread a { color: var(--accent); }
.mail-kind { display: inline-block; padding: 0 0.4rem; border-radius: 10px; font-size: 0.7rem; text-transform: uppercase; border: 1px solid var(--border); color: var(--muted); }
.mail-kind-staff { color: var(--accent); border-color: var(--accent); }
.mail-view { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; max-width: 760px; }
.mail-body { margin: 1rem 0; overflow-wrap: anywhere; }
.mail-actions { display: flex; gap: 0.8rem; align-items: center; }
.mail-actions .button { display: inline-block; background: var(--accent-dark); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; }
.mail-form { max-width: 640px; }
.mail-form textarea { resize: vertical; }
/* ==========================================================================
   Responsive layout
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
input, select, textarea { max-width: 100%; }
select { text-overflow: ellipsis; }
.inline-form { flex-wrap: wrap; }

/* Nav: links live in .nav-links; below 1100px they collapse into a drawer opened by .nav-toggle. */
.topnav { flex-wrap: wrap; padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
.nav-links { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-width: 0; }
.nav-links a { padding: 0.25rem 0.2rem; font-size: 0.92rem; }
.nav-toggle { display: none; margin-left: auto; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--border); color: var(--text); }
.nav-toggle:hover { background: var(--bg); }

/* Island map: the grid is sized by --cell inside a scrollable frame, so the page itself never scrolls sideways. */
/* crosshair, not grab: a hand cursor's visual "point" isn't at its real hotspot (what hover/click actually use), which
   made the highlight look offset from the cursor - worse the smaller the tiles, since that mismatch is a fixed
   number of pixels. A crosshair's centre is unambiguous. Dragging still gets the hand, since precise pointing does
   not matter mid-pan. */
.map-scroll { position: relative; width: fit-content; max-width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: #0b0e13; margin: 1rem auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; cursor: crosshair; }
.map-scroll:focus-visible { outline: 2px solid var(--accent); }
/* The grid inside carries a hidden border of extra tiles (pulled out of view with negative margins) that dragging
   reveals - the frame has to crop them, so it doesn't scroll any more; panning is done by dragging. */
.map-scroll { overflow: hidden; }
.map-scroll.dragging { cursor: grabbing; user-select: none; overflow: hidden; }
.map-scroll .plot-grid-island { will-change: transform; }
.map-scroll .plot-cell { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.map-scroll.dragging .plot-cell { pointer-events: none; }
.plot-grid-island { grid-template-columns: repeat(var(--cols, 25), var(--cell, var(--cell-base, 32px))); grid-auto-rows: var(--cell, var(--cell-base, 32px)); width: max-content; margin: 0; padding: 2px; overflow: visible; }
/* A single floating highlight that follows the cursor (a child of .map-scroll, so it survives the tile grid's own
   innerHTML being replaced on every pan/zoom), instead of every one of a huge number of tiles carrying its own
   :hover style - native :hover across thousands of small tiles is what made the highlight visibly lag behind the
   cursor at high zoom (a repaint per tile per boundary crossing). Repositioning one already-painted box via
   transform is a compositor-only operation, so it stays instant no matter how many tiles are loaded. */
.plot-hover-box { position: absolute; top: 0; left: 0; outline: 2px solid #fff; opacity: 0; pointer-events: none; z-index: 4; will-change: transform; }

/* Zoomed out past the last tile level: the whole island as one picture, with a draggable marker (percentage-positioned,
   so it stays correct at any rendered image size) showing where zooming back in will centre the tile view. */
.map-scroll[data-map-mode="overview"] { width: 100%; max-width: 900px; overflow: visible; cursor: default; }
.map-overview-wrap { position: relative; width: 100%; }
.map-overview-img { display: block; width: 100%; height: auto; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; border-radius: 4px; }
.map-locator { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 10px rgba(255,255,255,0.55); cursor: move; touch-action: none; }
.map-legend span { white-space: nowrap; }

@media (max-width: 1100px) {
    .topnav { gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .nav-toggle { display: inline-flex; }
    .nav-links { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--border); margin-top: 0.4rem; }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 0.7rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .nav-links a.active { border-bottom-color: var(--accent); }
    .nav-links .nav-spacer { display: none; }
    .nav-links .nav-user { padding: 0.7rem 0.5rem; }
}

@media (max-width: 900px) {
    .map-scroll { max-height: 70vh; max-height: 70dvh; }
    .plot-grid-island { --cell-base: 40px; }
    .plot-grid-island .plot-cell { font-size: 0.8rem; }
    .plot-grid-island .plot-building { font-size: 1.25rem; }
    .plot-grid-island .plot-building small, .plot-grid-island .plot-garrison { font-size: 0.7rem; }
    .plot-detail { scroll-margin-top: 0.5rem; }
    .table { display: block; overflow-x: auto; }
}

@media (max-width: 700px) {
    .container { padding: 1rem max(0.75rem, env(safe-area-inset-left)) 4rem max(0.75rem, env(safe-area-inset-right)); }
    h1 { font-size: 1.5rem; margin: 0.4rem 0 0.6rem; }
    h2 { font-size: 1.25rem; }
    .form { max-width: 100%; }
    .form select, .form input:not([type=checkbox]):not([type=radio]), .form textarea { width: 100%; }
    .form input.qty-input { width: 100%; }
    .plot-detail { padding: 0.8rem; }
    .inline-form { width: 100%; }
    .inline-form select { flex: 1 1 100%; }

    .map-pan { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .map-pan a { display: block; text-align: center; padding: 0.6rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); }
    .map-pan span.muted { text-align: center; padding: 0.6rem 0.4rem; border: 1px dashed var(--border); border-radius: 4px; }
    .map-pan > span.muted:last-child { grid-column: 1 / -1; }
    .map-legend { gap: 0.3rem 0.8rem; font-size: 0.75rem; }
    .plot-grid-world { grid-template-columns: repeat(12, 4rem); width: max-content; overflow: visible; }
    .world-map-scroll { overflow-x: auto; }
    .world-cell { font-size: 0.6rem; }

    #resource-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; padding: 0.6rem 0.8rem; }
    #resource-bar .resource:last-child { grid-column: 1 / -1; }
    #resource-bar .value { font-size: 1.1rem; }

    .race-grid { grid-template-columns: 1fr; }
    .cost-chip { font-size: 0.8rem; }
    .pagination { flex-wrap: wrap; }

    /* Tables become stacked cards; labels are copied from the headings by app.js. */
    .table.stack { display: block; overflow: visible; }
    .table.stack thead { display: none; }
    .table.stack tbody { display: block; }
    .table.stack tr { display: block; margin: 0 0 0.6rem; padding: 0.3rem 0.7rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
    .table.stack td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); overflow-wrap: anywhere; }
    .table.stack td:last-child { border-bottom: 0; }
    .table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; text-align: left; align-self: center; }
    .table.stack td[colspan] { display: block; text-align: left; }
    .table.stack td[colspan]::before { content: none; }

    .chat-log { height: 55vh; height: 55dvh; min-height: 14rem; }
    .chat-side { flex-direction: row; flex-wrap: wrap; }
    .chat-side h3 { flex: 0 0 100%; margin: 0.2rem 0; }
    .chat-side form { flex: 0 0 100%; }
    .chat-tabs { overflow-x: auto; white-space: nowrap; }
    .mail-actions { flex-wrap: wrap; }
    .mail-view { padding: 0.8rem; }

    .cw { right: 0; left: 0; width: 100%; }
    .cw-panel { height: min(64vh, 520px); height: min(64dvh, 520px); border-radius: 12px 12px 0 0; border-left: 0; border-right: 0; margin-bottom: 0.5rem; }
    .cw-tray { padding-right: 0.6rem; }
    .cw-btn { width: 56px; height: 50px; }
    .cw-x, .cw-form button { min-height: 44px; }
    .cw-list button, .cw-conv { min-height: 44px; }
    body { padding-bottom: 5rem; }
}

/* Touch devices: comfortable tap targets, iOS does not zoom into 16px fields, hover-only controls become visible. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
    button, .button { min-height: 44px; }
    .topnav a, .chat-tabs a, .chat-side a { min-height: 44px; display: inline-flex; align-items: center; }
    .chat-tools { visibility: visible; }
    .chat-tools button { min-height: 32px; padding: 0 0.7rem; }
}
@media (hover: none) { .chat-tools { visibility: visible; } }

@media (max-width: 380px) {
    .topnav .brand { font-size: 1rem; }
    .plot-grid-island { --cell-base: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* ==========================================================================
   Island map: who holds what
   unclaimed = dimmed, no ring | yours = green ring | ally = blue ring | other = orange ring
   ========================================================================== */
.plot-grid-island .plot-cell { opacity: 1; box-shadow: none; }
.plot-grid-island .plot-cell.terrain-ocean { opacity: 0.7; }
.plot-grid-island .plot-cell.owned { z-index: 1; }
.plot-grid-island .plot-cell.owned.mine { box-shadow: inset 0 0 0 3px #46d17a, 0 0 0 1px #0b0e13; }
.plot-grid-island .plot-cell.owned.ally { box-shadow: inset 0 0 0 3px #4aa8ff, 0 0 0 1px #0b0e13; }
.plot-grid-island .plot-cell.owned.theirs { box-shadow: inset 0 0 0 3px #ff8a3a, 0 0 0 1px #0b0e13; }
.plot-grid-island .plot-cell.expandable { outline: 2px dashed rgba(255,255,255,0.9); outline-offset: -4px; opacity: 0.85; }
.plot-grid-island .plot-cell.selected { outline: 3px solid #fff; outline-offset: -1px; z-index: 2; }

.map-legend { align-items: center; }
.map-legend .swatch { width: 16px; height: 16px; vertical-align: -3px; position: relative; }
.map-legend .sw-unclaimed { background: #5c8a3a; opacity: 0.55; }
.map-legend .sw-mine, .map-legend .sw-ally, .map-legend .sw-theirs { background: #5c8a3a; }
.map-legend .sw-mine { box-shadow: inset 0 0 0 3px #46d17a; }
.map-legend .sw-ally { box-shadow: inset 0 0 0 3px #4aa8ff; }
.map-legend .sw-theirs { box-shadow: inset 0 0 0 3px #ff8a3a; }
.map-legend .sw-expand { background: #5c8a3a; border: 2px dashed rgba(255,255,255,0.9); }
.map-legend .legend-sep { flex: 0 0 100%; height: 0; }

/* Send-army panel */
.send-army { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.army-src { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.army-src[hidden] { display: none; }
.army-unit { flex-direction: row !important; justify-content: space-between; align-items: center; gap: 0.6rem; }
.army-qty { display: inline-flex; gap: 0.3rem; align-items: center; flex: none; }
.army-all { padding: 0.25rem 0.6rem; background: var(--panel); border: 1px solid var(--border); color: var(--text); }
@media (max-width: 700px) { .army-unit { flex-wrap: wrap; } .army-form .army-qty input.qty-input { width: 5.5rem; } }
.veteran-line { color: var(--accent); }
.veteran-pick { background: var(--panel2, rgba(201,162,74,0.08)); border: 1px solid var(--accent); border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.veteran-pick form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
/* ==========================================================================
   Player profiles
   ========================================================================== */
.player-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(201,162,74,0.6); }
.player-link:hover { color: var(--accent); border-bottom-style: solid; }
.chat-name.player-link { font-weight: bold; }
.topnav a.nav-user { color: var(--muted); }
.topnav a.nav-user:hover { color: var(--accent); }

.profile-head { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.profile-id { flex: 1; min-width: 220px; }
.profile-id h1 { margin: 0 0 0.2rem; }
.profile-id p { margin: 0.2rem 0; }
.profile-motto { font-style: italic; color: var(--text); }
.profile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.7rem; }
.profile-actions .button, .profile-form .button { display: inline-block; background: var(--accent-dark); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; }
.profile-avatar { width: 160px; height: 160px; flex: none; border-radius: 8px; overflow: hidden; border: 2px solid var(--accent-dark); background: var(--panel); display: flex; align-items: center; justify-content: center; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar.small { width: 96px; height: 96px; }
.profile-avatar-none { font-size: 3.5rem; color: var(--accent); }
.profile-avatar.small .profile-avatar-none { font-size: 2.2rem; }
.profile-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.profile-card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1.1rem 1rem; margin-bottom: 1rem; }
.profile-card h2 { margin-top: 0.2rem; font-size: 1.2rem; }
.profile-stats { width: 100%; border-collapse: collapse; }
.profile-stats th { text-align: left; color: var(--muted); font-weight: normal; padding: 0.25rem 0.8rem 0.25rem 0; white-space: nowrap; vertical-align: top; }
.profile-stats td { padding: 0.25rem 0; }
.profile-edit-image { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.profile-form textarea { width: 100%; font-family: var(--font); font-size: 0.9rem; }
.profile-form { max-width: none; }

/* The signature box: rendered BBCode. Pictures are capped so nobody can take over the page. */
.sig { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem 1rem; overflow: hidden; overflow-wrap: anywhere; max-height: 640px; overflow-y: auto; }
.sig .bb-img { display: inline-block; max-width: 100%; max-height: 200px; height: auto; vertical-align: middle; }
.sig .bb-banner { max-height: 150px; }
.bb-u { text-decoration: underline; }
.bb-s { text-decoration: line-through; }
.bb-center { text-align: center; }
.bb-left { text-align: left; }
.bb-right { text-align: right; }
.bb-quote { margin: 0.5rem 0; padding: 0.4rem 0.8rem; border-left: 3px solid var(--accent-dark); background: rgba(255,255,255,0.04); }
.bb-hr { border: 0; border-top: 1px solid var(--border); margin: 0.6rem 0; }
.bb-toolbar { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin: 0.3rem 0; }
.bb-toolbar[hidden] { display: none; }
.bb-toolbar button { padding: 0.3rem 0.7rem; min-width: 2.2rem; }
.bb-toolbar input[type=color] { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--border); background: transparent; }

@media (max-width: 700px) {
    .profile-head { flex-direction: column; align-items: flex-start; }
    .profile-avatar { width: 120px; height: 120px; }
    .bb-toolbar button, .bb-toolbar select { min-height: 40px; }
}
.profile-report { margin: 0 0 1rem; }
.profile-report summary { cursor: pointer; }
.profile-report .form { margin-top: 0.6rem; }

/* Storage caps, upkeep and morale in the resource bar */
#resource-bar .cap { color: var(--muted); font-size: 0.8rem; }
#resource-bar .resource.full .value { color: #e0a030; }
#resource-bar .resource.full::after { content: "full"; font-size: 0.65rem; text-transform: uppercase; color: #e0a030; }
#resource-bar .rate-down { color: #ff8a7a; }
#resource-bar .morale-mutinous .value, #resource-bar .morale-low .value { color: #e0574f; }
#resource-bar .morale-steady .value { color: var(--accent); }
#resource-bar .morale-high .value, #resource-bar .morale-inspired .value { color: #6fcf8f; }
.hunger-warning { margin: 0.5rem 0 1rem; }
.cost-chip.cost-over { border-style: dashed; border-color: #e0a030; color: #f0c060; }

/* Help page */
.help-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 1rem 0 1.5rem; padding: 0.7rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.help-toc a { padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; font-size: 0.9rem; color: var(--text); }
.help-toc a:hover { border-color: var(--accent); color: var(--accent); }
.help-section { margin-bottom: 2rem; scroll-margin-top: 1rem; max-width: 860px; }
.help-section h3 { margin-bottom: 0.2rem; }
.help-section ul, .help-section ol { padding-left: 1.3rem; }
.help-section li { margin: 0.3rem 0; }
/* ==========================================================================
   Advertising (see includes/ads.php)
   Wide screens (>= 1480px): two fixed 160x600 rails in the side margins. Narrower: one in-page unit above the footer.
   ========================================================================== */
.ad-rail { display: none; position: fixed; top: 5.5rem; width: 160px; z-index: 5; }
.ad-inline { display: block; margin: 2rem 0 1rem; min-height: 110px; text-align: center; clear: both; }
.ad-label { display: block; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; text-align: center; }
.ad-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 0.85rem; border: 2px dashed var(--border); border-radius: 4px; background: rgba(255,255,255,0.02); }
.ad-rail .ad-placeholder { width: 160px; height: 600px; }
.ad-inline .ad-placeholder { min-height: 100px; width: 100%; max-width: 728px; margin: 0 auto; }
@media (min-width: 1480px) {
    .ad-rail { display: block; }
    .ad-rail-left { left: calc(50% - 500px - 72px - 160px); }
    .ad-rail-right { left: calc(50% + 500px + 72px); }
    .ad-inline { display: none; }
    /* Keep the chat panel inside the content column so an open chat never covers the right-hand ad. */
    .cw { right: calc(50% - 500px); }
}
/* Own banners and pasted ad code */
.ad-banner .ad-img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ad-rail .ad-img { width: 160px; max-height: 600px; object-fit: contain; }
.ad-code-target { text-align: center; }
.train-cost { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.3rem; align-items: center; margin-left: 0.3rem; }
@media (max-width: 700px) { .train-cost { flex: 1 1 100%; margin: 0.3rem 0 0; } }

/* Online indicator: a small glowing green dot next to a name */
.online-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 3px 1px rgba(61,220,132,0.85), 0 0 7px 2px rgba(61,220,132,0.45); vertical-align: middle; animation: online-glow 2.6s ease-in-out infinite; }
.online-dot[hidden] { display: none; }
.online-dot.big { width: 10px; height: 10px; margin-left: 0.4rem; margin-right: 0.3rem; }
@keyframes online-glow { 0%, 100% { box-shadow: 0 0 3px 1px rgba(61,220,132,0.7), 0 0 7px 2px rgba(61,220,132,0.35); } 50% { box-shadow: 0 0 5px 2px rgba(61,220,132,1), 0 0 12px 3px rgba(61,220,132,0.55); } }
@media (prefers-reduced-motion: reduce) { .online-dot { animation: none; } }
.profile-online { font-size: 0.85rem; }
/* Quick links bar under the top menu */
.quicklinks { display: none; gap: 0.3rem; padding: 0.35rem max(1rem, env(safe-area-inset-left)); background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; justify-content: center; -webkit-overflow-scrolling: touch; }
.quicklinks a { display: flex; flex-direction: column; align-items: center; min-width: 4.2rem; padding: 0.25rem 0.5rem; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 0.72rem; white-space: nowrap; border: 1px solid transparent; }
.quicklinks a:hover { color: var(--accent); background: var(--bg); }
.quicklinks a.active { color: var(--accent); border-color: var(--border); background: var(--bg); }
.quicklinks .ql-icon { font-size: 1.35rem; line-height: 1.3; }
@media (max-width: 700px) { .quicklinks { display: flex; justify-content: flex-start; } .quicklinks a { min-width: 3.6rem; } }
.ql-editor { list-style: none; margin: 0.5rem 0; padding: 0; }
.ql-editor li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.3rem; background: var(--bg); }
.ql-editor li label { flex: 1; display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.ql-editor .ql-move { padding: 0.1rem 0.5rem; }

/* World map: unexplored waters */
.world-cell.explorable { background: #10151d; border: 1px dashed var(--accent); color: var(--accent); }
.world-cell.explorable:hover, .world-cell.picked { background: #1b2433; border-style: solid; }
.world-cell.exploring { background: #14202c; border: 1px dashed #4a90c2; color: #8fc1e6; }
.world-cell.explorable .world-cell-stat, .world-cell.exploring .world-cell-stat { font-size: 1.3em; color: inherit; }

/* Player-name dropdown (playersearch.js) */
.ps-menu { color-scheme: dark; position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); max-height: 18rem; overflow-y: auto; font-size: 0.9rem; }
.ps-menu[hidden] { display: none; }
.ps-head { padding: 0.25rem 0.6rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15); }
.ps-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.6rem; cursor: pointer; color: var(--text); }
.ps-item:hover, .ps-item.on { background: var(--bg); color: var(--accent); }
.ps-tag { color: var(--muted); font-size: 0.8em; }
.ps-id { margin-left: auto; color: var(--muted); font-size: 0.8em; }
.profile-id-tag { font-size: 0.9rem; color: var(--muted); font-weight: normal; margin-left: 0.4rem; }

/* Gems */
.nav-gems { color: #7fd6ff !important; white-space: nowrap; }
.gem-balance { font-size: 1.15rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.shop-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.shop-item h3 { margin: 0; font-size: 1rem; }
.shop-item p { margin: 0; flex: 1; }
.gem-plus { color: #46d17a; }
.gem-minus { color: #ff8a3a; }
.speedup-form { display: inline; margin-left: 0.4rem; }
.speedup-btn { padding: 0.1rem 0.5rem; font-size: 0.8rem; background: transparent; color: #7fd6ff; border: 1px solid #3a7fa8; border-radius: 12px; cursor: pointer; }
.speedup-btn:hover { background: #12303f; }

/* Crests */
.crest { display: inline-block; vertical-align: middle; }
.crest-inline { margin-right: 0.4rem; }
.crest-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.alliance-motto { font-style: italic; margin: 0.25rem 0; }
.alliance-join-box { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; }
.alliance-link { font-weight: 600; }
.friends-add { flex-wrap: wrap; margin: 0.75rem 0; }
.friends-note-input { min-width: 16rem; flex: 1; }
.friends-note-form { display: flex; gap: 0.4rem; align-items: flex-start; }
.friends-note-form textarea { min-width: 12rem; }
.friends-actions { white-space: nowrap; }
.friends-actions form, .friends-actions a { display: inline-block; margin: 0.1rem; }
.profile-private-note { margin: 0.5rem 0 0; }
.table .online-dot { margin-right: 0.35rem; }
.mail-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.mail-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
.mail-check-col { width: 2rem; text-align: center; }
.mail-list tr.mail-selected { background: rgba(255, 255, 255, 0.06); }
/* Crest editor (public_html/crest-editor.php): preview card on the left (on top on phones), parts in four tabs, each a
   part with its colour. Premium parts not unlocked yet are listed under the preview with Buy buttons. */
.crest-editor { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 1rem; }
.crest-stage { position: sticky; top: 0.5rem; z-index: 2; flex: 0 0 240px; align-items: center; text-align: center; }
.crest-stage .crest-balance { justify-content: center; }
.crest-stage #crest-preview { align-self: center; }
.crest-missing { width: 100%; text-align: left; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.crest-missing-title { display: block; color: #ffb84a; font-size: 0.85rem; margin-bottom: 0.3rem; }
.crest-missing ul { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.crest-missing li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.crest-missing li button { padding: 0.2rem 0.7rem; font-size: 0.8rem; }
#crest-missing-all button { width: 100%; }
#crest-missing-all .muted { font-size: 0.85rem; }
.crest-actions { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.crest-actions .muted { font-size: 0.8rem; }
.crest-workbench { flex: 1; min-width: 0; }
.crest-pane { padding-top: 0.6rem; }
.crest-group { margin-bottom: 1rem; }
.crest-group h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--accent); }
.crest-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crest-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 5px 4px; background: var(--panel); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.66rem; text-align: center; color: var(--muted); }
.crest-opt input { position: absolute; opacity: 0; pointer-events: none; }
.crest-opt:hover { border-color: rgba(201, 162, 74, 0.6); }
.crest-opt:has(input:checked) { border-color: var(--accent); background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.crest-opt:has(input:focus-visible) { outline: 2px solid #fff; }
.crest-opt.locked .crest-thumb, .crest-opt.locked .crest-swatch { opacity: 0.75; }
.crest-swatch { width: 34px; height: 34px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); }
.crest-thumb svg { display: block; }
.crest-price { display: inline-flex; align-items: center; gap: 2px; font-size: 0.65rem; color: #ffb84a; }
.crest-price.is-owned { color: #7fd6ff; }
.crest-price .gi { width: 0.9em; height: 0.9em; }
.crest-legend { font-size: 0.8rem; }
.crest-legend .gi { width: 1em; height: 1em; }
@media (max-width: 700px) {
    .crest-editor { flex-direction: column; align-items: stretch; }
    .crest-stage { position: static; flex-basis: auto; }
    .crest-stage #crest-preview { width: 125px; height: 150px; }
    .crest-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .crest-actions .muted { flex-basis: 100%; }
    .crest-opt { width: 60px; }
}
.crest-preview-only { margin: 1rem 0; }
.crest-head { display: flex; align-items: center; gap: 0.8rem; }
.profile-crest { flex: 0 0 auto; align-self: center; }

/* Events log */
.event-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.event-tabs a { padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.event-tabs a:hover { color: var(--accent); }
.event-tabs a.active { color: var(--accent); border-color: var(--accent); background: var(--panel); }
.event-list { display: flex; flex-direction: column; gap: 0.5rem; }
.event { display: flex; gap: 0.8rem; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 6px; padding: 0.7rem 0.9rem; }
.event-new { border-left-color: var(--accent); background: #232b3a; }
.event-combat { border-left-color: #c0463d; }
.event-building { border-left-color: #6a8f3a; }
.event-world { border-left-color: #3a8fe0; }
.event-dynasty { border-left-color: #a06ad0; }
.event-alliance { border-left-color: #3aa89a; }
.event-icon { font-size: 1.5rem; line-height: 1.3; }
.event-main { flex: 1; min-width: 0; }
.event-main h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.event-main p { margin: 0.15rem 0; overflow-wrap: anywhere; }
.event-meta { font-size: 0.75rem; }
.event-badge { font-size: 0.65rem; background: var(--accent); color: #14181f; border-radius: 8px; padding: 0 0.4rem; vertical-align: middle; }
.event-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1rem 0; }

/* Market */
.table-scroll { overflow-x: auto; }
.market-table td, .market-table th { white-space: nowrap; }
.market-filter a .muted { font-size: 0.75rem; }
.market-recent { margin-top: 1.5rem; }
.market-chip { display: inline-block; margin: 0.15rem 0.3rem 0.15rem 0; padding: 0.1rem 0.6rem; border: 1px solid var(--border); border-radius: 12px; font-size: 0.8rem; background: var(--panel); }

/* Notification badges on the quick links bar and the phone menu button */
.quicklinks a .ql-icon { position: relative; display: inline-block; }
.quicklinks .ql-badge { position: absolute; top: -4px; right: -10px; min-width: 1.05rem; padding: 0 0.28rem; font-size: 0.62rem; line-height: 1.05rem; border: 2px solid var(--panel); box-sizing: content-box; }
.nav-toggle .chat-count { margin-left: 0.3rem; }

/* Bug report screenshots */
.bug-shots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.bug-shots img { display: block; max-width: 220px; max-height: 150px; border: 1px solid var(--border); border-radius: 4px; }

/* Attack preview */
.win-chance { margin: 0.4rem 0; padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.9rem; }
.win-chance:empty { display: none; }
.win-chance.good { border-color: #46d17a; background: rgba(70,209,122,0.1); }
.win-chance.even { border-color: #e0b030; background: rgba(224,176,48,0.1); }
.win-chance.bad { border-color: #e0574f; background: rgba(224,87,79,0.1); }

/* Island overview picture */
.island-overview { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #0d1520; margin: 0.8rem 0; }
.island-overview img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; cursor: crosshair; image-rendering: pixelated; }
.island-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0; font-size: 0.85rem; }
.island-legend .sw { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; vertical-align: -2px; border: 1px solid rgba(255,255,255,0.25); }
.island-legend .sw.frame { background: transparent; border: 2px solid #fff; }
.overview-link { font-weight: bold; }

/* Changelog */
.changelog-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1.1rem; margin: 1rem 0; }
.changelog-panel.has-new { border-color: var(--accent); }
.changelog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.changelog-head h2 { margin: 0; font-size: 1.15rem; }
.changelog-head form { display: inline; margin-left: 0.6rem; }
.changelog-entry { border-left: 3px solid var(--border); padding: 0.1rem 0 0.1rem 0.9rem; margin: 0.9rem 0; }
.changelog-entry.changelog-new { border-left-color: var(--accent); }
.changelog-entry h2, .changelog-entry h3 { margin: 0; font-size: 1.05rem; }
.changelog-date { font-size: 0.8rem; font-weight: normal; }
.changelog-body p { margin: 0.35rem 0; }
.changelog-body ul { margin: 0.35rem 0; padding-left: 1.2rem; }
.changelog-body li { margin: 0.15rem 0; }

/* Version tags and the update pop-up */
.version-tag { display: inline-block; padding: 0 0.5rem; border-radius: 10px; background: var(--accent-dark); color: #fff; font-size: 0.8em; font-weight: normal; vertical-align: 1px; }
.footer-version { color: var(--accent); }
.dashboard-version { text-align: center; margin: 2rem 0 0.5rem; }
.cl-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 9, 14, 0.78); backdrop-filter: blur(3px); }
.cl-card { width: min(640px, 100%); max-height: min(85vh, 760px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); overflow: hidden; }
.cl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem 0.8rem; background: linear-gradient(#2b3346, #222a3a); border-bottom: 1px solid var(--border); }
.cl-head h2 { margin: 0; font-size: 1.35rem; color: var(--accent); }
.cl-kicker { margin: 0 0 0.15rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cl-x { background: transparent; color: var(--muted); font-size: 1.6rem; line-height: 1; padding: 0 0.4rem; border: 0; cursor: pointer; }
.cl-x:hover { color: #fff; background: transparent; }
.cl-scroll { overflow-y: auto; padding: 0.4rem 1.2rem; }
.cl-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--border); background: var(--bg); }
.cl-foot button { min-width: 7rem; }
body.cl-open { overflow: hidden; }
@media (max-width: 700px) { .cl-modal { align-items: flex-end; padding: 0; } .cl-card { max-height: 88vh; max-height: 88dvh; border-radius: 14px 14px 0 0; width: 100%; } }

.lineage-badge { display: inline-block; padding: 0 0.5rem; border-radius: 10px; font-size: 0.75rem; border: 1px solid var(--border); cursor: help; vertical-align: middle; }
.lineage-badge.mixed { border-style: dashed; }
.referral-link { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.referral-link input, .referral-link textarea { flex: 1 1 260px; min-width: 0; }
.referral-link textarea { resize: vertical; font: inherit; }
.referral-share { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.referral-share button[hidden] { display: none; }
.achievement-list { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.achievement-list li.locked { opacity: 0.55; }
.merit-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rank-badge { color: var(--accent); border-color: var(--accent); cursor: help; }
.profile-merits { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0; }
.profile-rank { margin: 0.2rem 0; }
.merit-badge { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 10px; font-size: 0.85rem; border: 1px solid var(--border); cursor: help; background: var(--panel); }
.merit-editor { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.merit-editor label { display: flex; align-items: center; gap: 0.4rem; }
.achv-editor { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.achv-editor label { display: flex; align-items: center; gap: 0.4rem; }

/* Nameplates: a small pill background behind a player's name, unlocked by earning an Achievement tier (or, for a
   handful of special Merits like Game Master, the merit itself). Applies to a name-link (a.player-link) or a badge
   chip (.merit-badge) alike. Rarity is by tier position (1st pick=bronze, 2nd=silver, 3rd=gold, the last tier of any
   track=legendary), not per-achievement art - gamemaster is a unique, one-of-a-kind style above the ladder. */
.nameplate-bronze, .nameplate-silver, .nameplate-gold, .nameplate-legendary, .nameplate-gamemaster {
    display: inline-block; padding: 0 0.4rem; border-radius: 8px; border: 1px solid transparent;
}
.nameplate-bronze { background: rgba(205, 127, 50, 0.18); border-color: #cd7f32; }
.nameplate-silver { background: rgba(192, 192, 192, 0.16); border-color: #c0c0c0; }
.nameplate-gold { background: rgba(201, 162, 74, 0.2); border-color: var(--accent); }
.nameplate-legendary {
    background: linear-gradient(90deg, rgba(201, 162, 74, 0.25), rgba(155, 89, 219, 0.25));
    border-color: #9b59db; box-shadow: 0 0 6px rgba(155, 89, 219, 0.35);
}
.nameplate-gamemaster {
    background: linear-gradient(90deg, rgba(155, 46, 46, 0.3), rgba(201, 162, 74, 0.3), rgba(155, 46, 46, 0.3));
    border-color: var(--accent); box-shadow: 0 0 8px rgba(201, 162, 74, 0.5); font-weight: bold;
}

/* Painted nameplates and chat bubbles (includes/cosmetics.php). Each design ("set") defines its colours and paintings
   once; names get .np-plate, chat message bodies get .bubble. Without a painting (no .has-art) they fall back to the
   plain pills above; with one, CSS border-image slices it: the plate's end caps are its outer quarters (384x96 art,
   the dark band is only its middle ~30%, so the caps spill above and below the line through border-image-outset),
   the bubble's corners its outer 27% (256x256 art), and the plain middle stretches to fit. Each bubble design has its
   own border widths so the text starts where its dark interior does (measured from the paintings). Effects (.fx-*)
   are added by the game, not the art. */
.nameplate-bronze, .bubble-bronze { --set-bg: rgba(205, 127, 50, 0.16); --set-line: #cd7f32; --set-glow: rgba(205, 127, 50, 0.5); --art-plate: url(/assets/img/cosmetics/bronze-plate.webp); --art-bubble: url(/assets/img/cosmetics/bronze-bubble.webp); }
.nameplate-silver, .bubble-silver { --set-bg: rgba(192, 192, 192, 0.14); --set-line: #c0c0c0; --set-glow: rgba(220, 225, 235, 0.55); --art-plate: url(/assets/img/cosmetics/silver-plate.webp); --art-bubble: url(/assets/img/cosmetics/silver-bubble.webp); }
.nameplate-gold, .bubble-gold { --set-bg: rgba(201, 162, 74, 0.18); --set-line: var(--accent); --set-glow: rgba(240, 200, 100, 0.6); --art-plate: url(/assets/img/cosmetics/gold-plate.webp); --art-bubble: url(/assets/img/cosmetics/gold-bubble.webp); }
.nameplate-legendary, .bubble-legendary { --set-bg: linear-gradient(90deg, rgba(201, 162, 74, 0.22), rgba(155, 89, 219, 0.22)); --set-line: #9b59db; --set-glow: rgba(170, 110, 240, 0.65); --art-plate: url(/assets/img/cosmetics/legendary-plate.webp); --art-bubble: url(/assets/img/cosmetics/legendary-bubble.webp); }
.nameplate-gamemaster, .bubble-gamemaster { --set-bg: linear-gradient(90deg, rgba(155, 46, 46, 0.28), rgba(201, 162, 74, 0.28), rgba(155, 46, 46, 0.28)); --set-line: var(--accent); --set-glow: rgba(240, 190, 80, 0.7); --art-plate: url(/assets/img/cosmetics/gamemaster-plate.webp); --art-bubble: url(/assets/img/cosmetics/gamemaster-bubble.webp); }
.nameplate-dragonfire, .bubble-dragonfire { --set-bg: linear-gradient(90deg, rgba(60, 18, 8, 0.55), rgba(150, 45, 15, 0.4), rgba(60, 18, 8, 0.55)); --set-line: #e0662a; --set-glow: rgba(255, 110, 40, 0.7); --art-plate: url(/assets/img/cosmetics/dragonfire-plate.webp); --art-bubble: url(/assets/img/cosmetics/dragonfire-bubble.webp); }
.nameplate-frostbound, .bubble-frostbound { --set-bg: linear-gradient(90deg, rgba(150, 205, 245, 0.2), rgba(225, 245, 255, 0.12), rgba(150, 205, 245, 0.2)); --set-line: #9fd4f5; --set-glow: rgba(170, 225, 255, 0.7); --art-plate: url(/assets/img/cosmetics/frostbound-plate.webp); --art-bubble: url(/assets/img/cosmetics/frostbound-bubble.webp); }
.nameplate-amethyst, .bubble-amethyst { --set-bg: linear-gradient(90deg, rgba(95, 40, 140, 0.4), rgba(140, 70, 190, 0.3), rgba(95, 40, 140, 0.4)); --set-line: #d4a94e; --set-glow: rgba(190, 120, 255, 0.65); --art-plate: url(/assets/img/cosmetics/amethyst-plate.webp); --art-bubble: url(/assets/img/cosmetics/amethyst-bubble.webp); }
.nameplate-abyssal, .bubble-abyssal { --set-bg: linear-gradient(90deg, rgba(10, 70, 80, 0.45), rgba(25, 120, 125, 0.3), rgba(10, 70, 80, 0.45)); --set-line: #3fb8b0; --set-glow: rgba(60, 220, 210, 0.6); --art-plate: url(/assets/img/cosmetics/abyssal-plate.webp); --art-bubble: url(/assets/img/cosmetics/abyssal-bubble.webp); }
.nameplate-wildwood, .bubble-wildwood { --set-bg: linear-gradient(90deg, rgba(40, 70, 30, 0.5), rgba(80, 120, 50, 0.35), rgba(40, 70, 30, 0.5)); --set-line: #7fb35a; --set-glow: rgba(190, 240, 120, 0.6); --art-plate: url(/assets/img/cosmetics/wildwood-plate.webp); --art-bubble: url(/assets/img/cosmetics/wildwood-bubble.webp); }
.nameplate-runestone, .bubble-runestone { --set-bg: linear-gradient(90deg, rgba(70, 70, 75, 0.55), rgba(110, 105, 100, 0.4), rgba(70, 70, 75, 0.55)); --set-line: #e09a3a; --set-glow: rgba(255, 160, 60, 0.6); --art-plate: url(/assets/img/cosmetics/runestone-plate.webp); --art-bubble: url(/assets/img/cosmetics/runestone-bubble.webp); }
.nameplate-stormcaller, .bubble-stormcaller { --set-bg: linear-gradient(90deg, rgba(30, 40, 70, 0.55), rgba(60, 80, 130, 0.4), rgba(30, 40, 70, 0.55)); --set-line: #8fb8ff; --set-glow: rgba(160, 200, 255, 0.75); --art-plate: url(/assets/img/cosmetics/stormcaller-plate.webp); --art-bubble: url(/assets/img/cosmetics/stormcaller-bubble.webp); }
.nameplate-celestial, .bubble-celestial { --set-bg: linear-gradient(90deg, rgba(15, 25, 70, 0.6), rgba(40, 50, 120, 0.45), rgba(15, 25, 70, 0.6)); --set-line: #cfd8ff; --set-glow: rgba(210, 220, 255, 0.65); --art-plate: url(/assets/img/cosmetics/celestial-plate.webp); --art-bubble: url(/assets/img/cosmetics/celestial-bubble.webp); }
.nameplate-ghostfire, .bubble-ghostfire { --set-bg: linear-gradient(90deg, rgba(25, 35, 30, 0.6), rgba(50, 90, 60, 0.4), rgba(25, 35, 30, 0.6)); --set-line: #6dff9e; --set-glow: rgba(90, 255, 150, 0.6); --art-plate: url(/assets/img/cosmetics/ghostfire-plate.webp); --art-bubble: url(/assets/img/cosmetics/ghostfire-bubble.webp); }
.nameplate-sunforged, .bubble-sunforged { --set-bg: linear-gradient(90deg, rgba(220, 180, 90, 0.3), rgba(255, 240, 200, 0.25), rgba(220, 180, 90, 0.3)); --set-line: #ffe08a; --set-glow: rgba(255, 230, 150, 0.75); --art-plate: url(/assets/img/cosmetics/sunforged-plate.webp); --art-bubble: url(/assets/img/cosmetics/sunforged-bubble.webp); }
.nameplate-dragonfire, .nameplate-frostbound, .nameplate-amethyst, .nameplate-abyssal,
.nameplate-wildwood, .nameplate-runestone, .nameplate-stormcaller, .nameplate-celestial, .nameplate-ghostfire, .nameplate-sunforged {
    display: inline-block; padding: 0 0.4rem; border-radius: 8px; border: 1px solid var(--set-line); background: var(--set-bg);
}

/* Nameplate on a player's name */
.np-plate { position: relative; display: inline-flex; align-items: center; gap: 0.25em; vertical-align: baseline; white-space: nowrap; }
.np-plate.player-link { border-bottom-style: solid; }
.np-emblem { display: inline-flex; line-height: 0; }
.np-emblem .gi { width: 1em; height: 1em; }
.np-plate.has-art {
    background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0.4em; line-height: 1.2;
    border-style: solid; border-color: transparent; border-width: 0 2.3em; min-width: 9em; justify-content: center;
    border-image: var(--art-plate) 0 25% fill / 0 2.9em / 0.75em 0.2em 0.95em stretch;
    color: #f6ecd4; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.np-plate.has-art:hover { color: #fff; }
h1 .np-plate.has-art, h2 .np-plate.has-art { margin: 0.3em 0.45em; }

/* Chat bubble around a message */
.chat-body.bubble { display: inline-block; max-width: 100%; padding: 0.1em 0.55em; border-radius: 10px 10px 10px 2px; border: 1px solid var(--set-line); background: var(--set-bg); overflow-wrap: anywhere; vertical-align: top; }
.chat-body.bubble.has-art {
    position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; margin: 0;
    padding: calc(var(--bb-t, 0.85em) + 0.2em) calc(var(--bb-r, 0.7em) + 0.3em) calc(var(--bb-b, 1.2em) + 0.2em) calc(var(--bb-l, 0.7em) + 0.3em);
    color: #f6ecd4; text-shadow: 0 1px 2px #000;
}
.chat-body.bubble.has-art::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-sizing: border-box;
    border: 1.25em solid transparent; border-image: var(--art-bubble) 27.34% fill / 1.25em / 0 stretch;
}
/* Your own messages: the painting is mirrored (tail on the right) and the side spacing swaps with it. */
.chat-msg.mine .chat-body.bubble.has-art { padding-left: calc(var(--bb-r, 0.7em) + 0.3em); padding-right: calc(var(--bb-l, 0.7em) + 0.3em); }
.chat-msg.mine .chat-body.bubble.has-art::before { transform: scaleX(-1); }
.nameplate-frostbound.has-art, .nameplate-amethyst.has-art, .nameplate-legendary.has-art,
.nameplate-runestone.has-art, .nameplate-stormcaller.has-art, .nameplate-ghostfire.has-art, .nameplate-sunforged.has-art, .nameplate-celestial.has-art { border-width: 0 2.8em; } /* their caps reach further in */
/* Where each painting's dark inside starts (measured from the art). */
.bubble-abyssal { --bb-t: 1.03em; --bb-r: 0.56em; --bb-b: 0.95em; --bb-l: 0.55em; }
.bubble-amethyst { --bb-t: 0.85em; --bb-r: 0.65em; --bb-b: 1.47em; --bb-l: 0.65em; }
.bubble-bronze { --bb-t: 0.71em; --bb-r: 0.86em; --bb-b: 1.14em; --bb-l: 0.87em; }
.bubble-dragonfire { --bb-t: 1.1em; --bb-r: 0.75em; --bb-b: 1.15em; --bb-l: 0.58em; }
.bubble-frostbound { --bb-t: 0.87em; --bb-r: 0.75em; --bb-b: 1.39em; --bb-l: 0.75em; }
.bubble-gamemaster { --bb-t: 1em; --bb-r: 0.68em; --bb-b: 0.96em; --bb-l: 0.68em; }
.bubble-gold { --bb-t: 0.77em; --bb-r: 0.6em; --bb-b: 1.24em; --bb-l: 0.6em; }
.bubble-legendary { --bb-t: 0.89em; --bb-r: 0.75em; --bb-b: 1.24em; --bb-l: 0.75em; }
.bubble-silver { --bb-t: 0.79em; --bb-r: 0.78em; --bb-b: 1.35em; --bb-l: 0.78em; }
.bubble-wildwood { --bb-t: 0.83em; --bb-r: 0.59em; --bb-b: 1.04em; --bb-l: 0.59em; }
.bubble-runestone { --bb-t: 0.76em; --bb-r: 0.68em; --bb-b: 1.07em; --bb-l: 0.61em; }
.bubble-stormcaller { --bb-t: 0.65em; --bb-r: 0.59em; --bb-b: 1.01em; --bb-l: 0.59em; }
.bubble-celestial { --bb-t: 0.89em; --bb-r: 0.61em; --bb-b: 1.07em; --bb-l: 0.61em; }
.bubble-ghostfire { --bb-t: 0.7em; --bb-r: 0.65em; --bb-b: 0.84em; --bb-l: 0.65em; }
.bubble-sunforged { --bb-t: 0.65em; --bb-r: 0.72em; --bb-b: 1.08em; --bb-l: 0.71em; }
/* Effects. Names: a light passing over the lettering (sheen, sweep, royal), a breathing glow around the frame (glow,
   royal, tide), rising embers (embers) or twinkling glints (frost, sparkle). Bubbles keep only the gentle frame glow. */
.np-plate.fx-sheen .np-name, .np-plate.fx-sweep .np-name, .np-plate.fx-royal .np-name {
    background: linear-gradient(110deg, currentColor 40%, #fff 50%, currentColor 60%) 100% 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
    animation: np-shine 6s ease-in-out infinite;
}
.np-plate.fx-sweep .np-name { animation-duration: 4s; }
.np-plate.fx-royal .np-name { animation-duration: 3.5s; }
.np-plate.fx-glow, .np-plate.fx-royal, .np-plate.fx-tide, .np-plate.fx-embers,
.bubble.fx-glow, .bubble.fx-royal, .bubble.fx-tide, .bubble.fx-embers, .bubble.fx-frost, .bubble.fx-sparkle { animation: np-glow 3.2s ease-in-out infinite; }
.np-plate.fx-tide, .bubble.fx-tide { animation-duration: 5s; }
.np-plate.fx-embers, .bubble.fx-embers { animation-name: np-flicker; animation-duration: 1.8s; }
.np-plate.fx-embers::after, .np-plate.fx-frost::after, .np-plate.fx-sparkle::after {
    content: ''; position: absolute; left: 0.2em; right: 0.2em; top: -0.55em; height: 1.4em; pointer-events: none;
    background:
        radial-gradient(circle at 12% 85%, var(--fx-dot) 0 1.3px, transparent 2px),
        radial-gradient(circle at 38% 55%, var(--fx-dot) 0 1px, transparent 1.7px),
        radial-gradient(circle at 63% 90%, var(--fx-dot) 0 1.4px, transparent 2px),
        radial-gradient(circle at 88% 60%, var(--fx-dot) 0 1px, transparent 1.7px);
}
.np-plate.fx-embers::after { --fx-dot: #ffb347; animation: np-embers 2.4s linear infinite; }
.np-plate.fx-frost::after { --fx-dot: #e8f8ff; top: -0.1em; height: 100%; animation: np-twinkle 2.8s ease-in-out infinite; }
.np-plate.fx-sparkle::after { --fx-dot: #f3d98a; top: -0.1em; height: 100%; animation: np-twinkle 2.2s ease-in-out infinite; }
.np-plate.fx-fireflies::after, .np-plate.fx-stars::after {
    content: ''; position: absolute; left: 0.2em; right: 0.2em; top: -0.3em; height: 120%; pointer-events: none;
    background:
        radial-gradient(circle at 10% 30%, var(--fx-dot) 0 1.2px, transparent 2px),
        radial-gradient(circle at 35% 80%, var(--fx-dot) 0 1px, transparent 1.7px),
        radial-gradient(circle at 60% 20%, var(--fx-dot) 0 1.3px, transparent 2px),
        radial-gradient(circle at 85% 70%, var(--fx-dot) 0 1px, transparent 1.7px);
}
.np-plate.fx-fireflies::after { --fx-dot: #d8ff7a; animation: np-drift 4s ease-in-out infinite; }
.np-plate.fx-stars::after { --fx-dot: #ffffff; animation: np-twinkle 3s ease-in-out infinite; }
.np-plate.fx-storm, .bubble.fx-storm { animation: np-storm 5s linear infinite; }
.bubble.fx-fireflies, .bubble.fx-stars { animation: np-glow 3.6s ease-in-out infinite; }
@keyframes np-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes np-glow { 0%, 100% { filter: drop-shadow(0 0 1px var(--set-glow)); } 50% { filter: drop-shadow(0 0 5px var(--set-glow)); } }
@keyframes np-flicker { 0%, 100% { filter: drop-shadow(0 0 2px var(--set-glow)); } 30% { filter: drop-shadow(0 0 5px var(--set-glow)); } 60% { filter: drop-shadow(0 0 3px var(--set-glow)); } }
@keyframes np-embers { 0% { transform: translateY(0.5em); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-0.5em); opacity: 0; } }
@keyframes np-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes np-drift { 0%, 100% { opacity: 0.2; transform: translate(0, 0.15em); } 50% { opacity: 1; transform: translate(0.25em, -0.15em); } }
@keyframes np-storm { 0%, 86%, 100% { filter: drop-shadow(0 0 2px var(--set-glow)); } 88% { filter: drop-shadow(0 0 9px var(--set-glow)) brightness(1.5); } 90% { filter: drop-shadow(0 0 2px var(--set-glow)); } 92% { filter: drop-shadow(0 0 7px var(--set-glow)) brightness(1.35); } }
@media (prefers-reduced-motion: reduce) {
    .np-plate, .np-plate::after, .np-plate .np-name, .bubble { animation: none !important; }
    .np-plate.fx-embers::after { opacity: 0.6; transform: none; }
}

/* Picker and shop previews */
.cosmetic-form > p { margin: 0.8rem 0 0.5rem; }
.cosmetic-form > p.cosmetic-balance { margin: 0 0 0.6rem; }
.default-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
.cosmetic-option.is-locked .card-actions { margin-top: 0.1rem; }
.cosmetic-form > button[type=submit] { margin: 0; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.cosmetic-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; padding: 0.8rem 0.5rem 0.6rem; cursor: pointer; }
.cosmetic-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.cosmetic-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.cosmetic-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cosmetic-preview { min-height: 2.4em; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.cosmetic-option .chat-body.bubble { text-align: left; }
.cosmetic-option.is-locked { cursor: default; }
.cosmetic-option.is-locked .cosmetic-preview { opacity: 0.5; filter: grayscale(0.6); }
.cosmetic-pair { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.4rem 0; }

.achv-track { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; }
.achv-track h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.achv-tiers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; }
.achv-bar { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; height: 0.6rem; overflow: hidden; margin-top: 0.3rem; }
.achv-bar-fill { background: var(--accent); height: 100%; }

/* Live events panel: desktop = a tab on the page edge that slides out a full-height drawer; phones = a list above the chat icons */
.evp { position: fixed; z-index: 850; font-family: var(--font); pointer-events: none; }
.evp[hidden] { display: none; }
/* Phones: the list opens above the chat icons, from the bell in the chat tray */
.evp.evp-mobile { top: auto; bottom: calc(4.6rem + env(safe-area-inset-bottom)); right: 1rem; width: min(360px, calc(100vw - 2rem)); z-index: 901; display: flex; flex-direction: column; align-items: flex-end; }
.evp.evp-mobile[hidden] { display: none; } /* must follow the display:flex rule above, which would otherwise keep a closed list open */
.evp.evp-mobile .evp-panel { max-height: min(60vh, 430px); }
.cw-events { display: none; }
@media (max-width: 899px) { .cw-events { display: flex; } }
.evp-panel, .evp-tab { pointer-events: auto; }
.evp-panel { width: 100%; max-height: min(520px, calc(100vh - 5.75rem - 4.5rem)); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; }
.evp-panel[hidden], .evp-tab[hidden] { display: none; }
/* Desktop drawer. --evp-top is kept at the bottom edge of the header by eventspanel.js, so the drawer starts below it. */
.evp:not(.evp-mobile) { top: var(--evp-top, 3.75rem); bottom: 0; width: 0; }
.evp:not(.evp-mobile).evp-right { right: 0; bottom: 3.9rem; } /* leaves the chat icons (bottom right) uncovered */
.evp:not(.evp-mobile).evp-left { left: 0; }
.evp:not(.evp-mobile) .evp-panel { position: absolute; top: 0; bottom: 0; width: 340px; max-height: none; transition: transform 0.28s ease, visibility 0s; box-shadow: 0 6px 24px rgba(0,0,0,0.55); }
.evp-right:not(.evp-mobile) .evp-panel { right: 0; border-radius: 10px 0 0 10px; border-right: 0; }
.evp-left:not(.evp-mobile) .evp-panel { left: 0; border-radius: 0 10px 10px 0; border-left: 0; }
.evp-right.evp-min:not(.evp-mobile) .evp-panel { transform: translateX(100%); visibility: hidden; transition: transform 0.28s ease, visibility 0s 0.28s; }
.evp-left.evp-min:not(.evp-mobile) .evp-panel { transform: translateX(-100%); visibility: hidden; transition: transform 0.28s ease, visibility 0s 0.28s; }
.evp:not(.evp-mobile) .evp-tab { position: absolute; top: 50%; margin-top: -4.2rem; writing-mode: vertical-rl; text-orientation: mixed; padding: 0.8rem 0.4rem; border-radius: 10px 0 0 10px; border-right: 0; box-shadow: -3px 0 12px rgba(0,0,0,0.5); transition: right 0.28s ease, left 0.28s ease; display: flex; align-items: center; gap: 0.4rem; }
.evp-right:not(.evp-mobile) .evp-tab { right: 0; }
.evp-right:not(.evp-mobile):not(.evp-min) .evp-tab { right: 340px; }
.evp-left:not(.evp-mobile) .evp-tab { left: 0; border-radius: 0 10px 10px 0; border-right: 1px solid var(--border); border-left: 0; box-shadow: 3px 0 12px rgba(0,0,0,0.5); }
.evp-left:not(.evp-mobile):not(.evp-min) .evp-tab { left: 340px; }
.evp:not(.evp-mobile) .evp-tab .evp-badge { writing-mode: horizontal-tb; }
@media (prefers-reduced-motion: reduce) { .evp:not(.evp-mobile) .evp-panel, .evp:not(.evp-mobile) .evp-tab { transition: none; } }
.evp-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.evp-title { flex: 1; font-weight: 600; color: var(--accent); }
.evp-all { font-size: 0.8rem; }
.evp-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 0.1rem 0.5rem; font-size: 0.78rem; cursor: pointer; }
.evp-btn:hover { color: var(--accent); border-color: var(--accent); }
.evp-x { font-size: 1rem; line-height: 1; padding: 0.1rem 0.45rem; }
.evp-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.evp-item { display: flex; gap: 0.5rem; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; line-height: 1.35; }
.evp-item:last-child { border-bottom: 0; }
.evp-item.unread { background: rgba(201,162,74,0.08); border-left: 3px solid var(--accent); padding-left: calc(0.65rem - 3px); }
.evp-ico { flex: none; font-size: 1.05rem; }
.evp-main { min-width: 0; overflow-wrap: anywhere; }
.evp-item-title { font-weight: 600; }
.evp-body { color: var(--muted); margin-top: 0.1rem; }
.evp-meta { color: var(--muted); font-size: 0.72rem; margin-top: 0.2rem; }
.evp-empty { margin: 0; padding: 1rem; text-align: center; color: var(--muted); font-size: 0.82rem; }
.evp-empty[hidden] { display: none; }
.evp-tab { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.82rem; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.5); }
.evp-tab:hover { border-color: var(--accent); color: var(--accent); }
.evp-badge { display: inline-block; min-width: 1.2em; padding: 0 0.35em; border-radius: 999px; background: var(--accent); color: #111; font-size: 0.72rem; font-weight: 700; text-align: center; }
.evp-badge[hidden] { display: none; }
.evp-new { animation: evp-in 0.45s ease-out; }
.evp-pulse { animation: evp-pulse 1.2s ease-out 2; }
@keyframes evp-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes evp-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,162,74,0.7); } 100% { box-shadow: 0 0 0 12px rgba(201,162,74,0); } }
@media (prefers-reduced-motion: reduce) { .evp-new, .evp-pulse { animation: none; } }
/* Background form submission (assets/js/softnav.js): thin progress bar while an action is in flight */
.softbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 1000; opacity: 0; pointer-events: none; }
.softbar.on { opacity: 1; width: 85%; transition: width 8s cubic-bezier(0.1, 0.6, 0.2, 1); }.softnav-toast { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1001; max-width: min(560px, calc(100vw - 2rem)); margin: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.55); cursor: default; }
.softnav-toast.hidden { display: none; }/* The flash tints are see-through; the toast floats over the page, so give it a solid base to stay readable. */
.softnav-toast { background-color: var(--panel); }
.softnav-toast.flash-success { background-image: linear-gradient(rgba(63,143,92,0.28), rgba(63,143,92,0.28)); }
.softnav-toast.flash-error { background-image: linear-gradient(rgba(179,67,47,0.28), rgba(179,67,47,0.28)); }
/* Spymasters page */
.spy-row { padding: 0.6rem 0; border-top: 1px solid var(--border); }
.spy-row:first-of-type { border-top: 0; }
.spy-row h3 { margin: 0 0 0.3rem; }
/* A neutral/enemy army seen next to your land: a marker, no size */
.plot-army-spotted { position: absolute; bottom: 1px; right: 2px; font-size: 0.75rem; line-height: 1; color: #ff6b5a; background: rgba(0,0,0,0.55); padding: 0 2px; border-radius: 2px; }
/* Coordinates in prose that open the map on that plot */
a.coord-link { white-space: nowrap; text-decoration: underline dotted; }

/* A plot with an attack, conquest or raid on the way: a red glow that pulses so it catches the eye even on a small,
   busy map tile. The low point is still a solid ring (not near-invisible) and a slight scale pulse adds motion beyond
   just the glow. opacity:1 stops the unclaimed-tile dimming from muting it (the same fix as .unclaimed.selected). */
@keyframes battle-glow {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 45, 30, 0.65), 0 0 7px 2px rgba(255, 45, 30, 0.6); transform: scale(1); }
    50% { box-shadow: inset 0 0 0 3px rgba(255, 45, 30, 1), 0 0 18px 6px rgba(255, 45, 30, 1); transform: scale(1.12); }
}
.plot-cell.battle { animation: battle-glow 1.1s ease-in-out infinite; position: relative; z-index: 3; }
.plot-grid-island .plot-cell.battle { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .plot-cell.battle { animation: none; box-shadow: inset 0 0 0 3px rgba(255, 45, 30, 1), 0 0 14px 5px rgba(255, 45, 30, 0.9); } }

/* Unclaimed tiles are dimmed with opacity, which would also dull the selection border: keep the selected one at full strength */
.plot-grid-island .plot-cell.unclaimed.selected { opacity: 1; box-shadow: 0 0 0 1px #0b0e13, 0 0 6px 1px rgba(255, 255, 255, 0.7); }

/* Max button beside quantity fields */
.max-btn { width: auto; padding: 0.2rem 0.55rem; margin-left: 0.3rem; font-size: 0.8rem; }

/* Your scouts keeping watch on a tile */
.plot-scout { position: absolute; bottom: 1px; left: 2px; font-size: 0.7rem; line-height: 1; background: rgba(0,0,0,0.55); padding: 0 2px; border-radius: 2px; }
.bet-form { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.25rem; }
.bet-stake { width: 6.5rem; }
.prison-badge { background: #4a1f24; border-color: #a33b47; color: #f0c4c9; text-transform: none; }
.prison-bar { border-color: #a33b47; }
.prison-log { max-height: 55vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; background: var(--panel); }
.prison-msg { margin: 0.35rem 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(255,255,255,0.04); max-width: 90%; overflow-wrap: anywhere; }
.prison-msg.staff { border-left: 3px solid var(--accent); }
.prison-msg.mine { margin-left: auto; background: rgba(201,162,74,0.12); }
.prison-msg .meta { display: block; color: var(--muted); font-size: 0.75rem; }
.prison-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.prison-form input[type=text] { flex: 1; }
.topnav a.nav-prison { color: #f0c4c9; font-weight: 600; border-bottom-color: #a33b47; }
.dev-bar { background: #5b3b00; color: #ffd98a; text-align: center; padding: 0.25rem 0.5rem; font-size: 0.78rem; letter-spacing: 0.04em; border-bottom: 1px solid #c9a24a; position: relative; z-index: 2000; }
.dev-play-bar { background: #1f3a2e; color: #cfeedd; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; padding: 0.3rem 0.75rem; font-size: 0.85rem; border-bottom: 1px solid #3f8f66; position: relative; z-index: 2000; }
.dev-play-bar a { color: #ffd98a; }
.dev-switch { display: inline-flex; gap: 0.3rem; margin: 0; }
.dev-switch select, .dev-switch button { padding: 0.1rem 0.4rem; font-size: 0.8rem; }
/* Jousting bracket drawn as a tree: one column per round, connector lines between the cells */
.bracket-scroll { overflow-x: auto; padding: 0.4rem 0 0.8rem; -webkit-overflow-scrolling: touch; }
.bracket { display: flex; align-items: stretch; width: max-content; min-width: 100%; }
.br-round { display: flex; flex-direction: column; width: 172px; flex: none; padding-right: 24px; }
.br-round:last-child { padding-right: 0; }
.br-title { font-weight: 700; color: var(--accent); padding: 0 0 0.45rem; }
.br-title small { display: block; font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.br-cells { flex: 1; display: flex; flex-direction: column; }
.br-cell { flex: 1 1 0; min-height: 66px; display: flex; align-items: center; position: relative; }
.br-cell::after { content: ""; position: absolute; right: -12px; top: 50%; width: 12px; border-top: 2px solid var(--border); }
.br-cell::before { content: ""; position: absolute; right: -12px; border-right: 2px solid var(--border); }
.br-cell.br-top::before { top: 50%; height: 50%; }
.br-cell.br-bottom::before { bottom: 50%; height: 50%; }
.br-cell.br-last::after, .br-cell.br-last::before { display: none; }
.br-match { width: 100%; position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); }
.br-round + .br-round .br-cell .br-match::before { content: ""; position: absolute; left: -13px; top: 50%; width: 12px; border-top: 2px solid var(--border); }
.br-side { display: flex; align-items: baseline; gap: 0.35rem; padding: 0.22rem 0.4rem; font-size: 0.82rem; white-space: nowrap; overflow: hidden; }
.br-side + .br-side { border-top: 1px solid var(--border); }
.br-seed { color: var(--muted); font-size: 0.72rem; min-width: 1.3rem; }
.br-name { font-weight: 600; flex: none; }
.br-user { margin-left: auto; color: var(--muted); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.br-win { background: rgba(70,209,122,0.14); }
.br-win .br-name { color: #86e3a9; }
.br-out { opacity: 0.5; }
.br-out .br-name { text-decoration: line-through; }
.br-mine { box-shadow: inset 0 0 0 2px var(--accent); }
.br-empty { color: var(--muted); font-style: italic; font-size: 0.78rem; }
.br-bye .br-empty { padding-top: 0.05rem; padding-bottom: 0.05rem; font-size: 0.7rem; }
.br-third { margin-top: 0.6rem; max-width: 172px; }
.br-log { margin-top: 0.6rem; }
.br-log summary { cursor: pointer; color: var(--muted); }
.br-mine-line { color: var(--accent); }
/* Page backgrounds: a painted backdrop behind the page (partials/header.php, includes/backgrounds.php). Phones and portrait
   screens get the tall picture, wide screens the panoramic one, whose detail sits in the side margins around the content column. */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg) var(--bg-tall) center top / cover no-repeat; }
.page-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 24, 31, 0.25), rgba(20, 24, 31, 0.5) 50%, rgba(20, 24, 31, 0.8)); }
@media (min-width: 801px) and (orientation: landscape) { .page-bg { background-image: var(--bg-wide); background-position: center; } }
body.has-bg main.container { background: rgba(20, 24, 31, 0.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-left: 1px solid rgba(51, 60, 77, 0.8); border-right: 1px solid rgba(51, 60, 77, 0.8); min-height: calc(100vh - 3.5rem); }
body.has-bg .site-footer { background: rgba(20, 24, 31, 0.85); }
@media (max-width: 800px) { body.has-bg main.container { background: rgba(20, 24, 31, 0.68); border-left: 0; border-right: 0; } }
body.bg-hero .page-bg::after { background: linear-gradient(rgba(20, 24, 31, 0.05), rgba(20, 24, 31, 0.25) 60%, rgba(20, 24, 31, 0.6)); }
body.bg-hero main.container { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.bg-hero main.container h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
body.bg-hero main.container .form { background: rgba(20, 24, 31, 0.82); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
body.bg-hero main.container > p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
@media print { .page-bg { display: none; } }

/* ---- Armies page: summary, tabs, card grid, pop-ups ---- */
.page-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.9rem; }
.page-summary strong { color: var(--accent); }
.page-tabs { display: flex; gap: 0.3rem; border-bottom: 2px solid var(--border); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab { background: transparent; color: var(--muted); border: none; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -2px; padding: 0.55rem 0.8rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.page-tab:hover { background: transparent; color: var(--text); }
.page-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { background: var(--border); color: var(--text); border-radius: 999px; font-size: 0.75em; padding: 0.05rem 0.45rem; min-width: 1.4em; text-align: center; }
.page-tab.is-active .tab-count { background: var(--accent-dark); }
.page-empty { background: var(--panel); border: 1px dashed var(--border); border-radius: 8px; padding: 1rem; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.game-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent-dark); border-radius: 8px; padding: 0.75rem 0.85rem; font: inherit; min-width: 0; }
button.game-card { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
button.game-card:hover { background: var(--panel); border-color: var(--accent); transform: translateY(-2px); }
.game-card.status-good { border-left-color: var(--success); }
.game-card.status-bad { border-left-color: var(--error); }
.game-card.status-info { border-left-color: #4a7fc9; }
.game-card.status-warn { border-left-color: #c97a4a; }
.game-card.is-faded { opacity: 0.6; border-left-color: var(--muted); border-style: dashed; }
.game-card-status { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.game-card-status strong { color: var(--accent); }
.game-card-name { font-size: 1.1em; color: var(--accent); overflow-wrap: anywhere; }
.game-card-total { font-size: 1.5em; font-weight: 600; line-height: 1.1; }
.game-card-total small { font-size: 0.55em; font-weight: normal; color: var(--muted); }
.game-card-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.class-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem 0.05rem 0.35rem; font-size: 0.85em; }
.game-card-meta { font-size: 0.88em; }
.game-card form { margin-top: 0.3rem; }
.game-card-art { align-self: center; }
.game-card-art .building-icon-img { width: 72px; height: 72px; vertical-align: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.game-card-art .gi, .game-card-icon .gi { width: 2.6em; height: 2.6em; }
dialog.game-dialog { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--bg); color: var(--text); border: 1px solid var(--accent-dark); border-radius: 10px; padding: 1rem 1.2rem 1.2rem; }
dialog.game-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dialog-head h2 { margin: 0; }
.dialog-head p { margin: 0.2rem 0 0; }
.dialog-close { background: transparent; color: var(--muted); border: 1px solid var(--border); font-size: 1.4rem; line-height: 1; padding: 0.15rem 0.55rem; }
.dialog-close:hover { color: var(--text); background: var(--panel); }
.dialog-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; background: var(--panel); border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.8rem 0; }
.dialog-stats strong { color: var(--accent); }
.dialog-list { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.25rem; }
.dialog-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1rem 0 0; border-bottom: 1px solid var(--border); }
.dialog-tab { background: transparent; color: var(--muted); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0.4rem 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.dialog-tab:hover { background: var(--panel); color: var(--text); }
.dialog-tab.is-active { background: var(--panel); color: var(--accent); border-color: var(--border); }
.dialog-pane { background: var(--panel); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; padding: 0.8rem; }
.dialog-pane h3 { font-size: 1rem; margin: 0.6rem 0 0.4rem; }
.dialog-pane h3:first-child { margin-top: 0; }
.dialog-pane form + form, .dialog-pane form + h3 { margin-top: 0.8rem; }
@media (max-width: 600px) {
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
    dialog.game-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; --dlg-pad-top: 0.9rem; padding: 0.9rem 1rem 1.2rem; padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); }
}
.dialog-head h2:focus { outline: none; }
/* The heading and its close button stay pinned to the top while a long pop-up scrolls (on phones the browser bars can
   also take part of the screen, so the pop-up height uses the visible screen, dvh, where supported). */
dialog.game-dialog > .dialog-head { position: sticky; top: calc(-1 * var(--dlg-pad-top, 1rem)); z-index: 3; margin: calc(-1 * var(--dlg-pad-top, 1rem)) 0 0; padding: var(--dlg-pad-top, 1rem) 0 0.5rem; background: var(--bg); }
/* While a pop-up is open the page behind it stays still: scrolling inside the pop-up never spills over to the page. */
dialog.game-dialog { overscroll-behavior: contain; }
html:has(dialog.game-dialog[open]), html:has(dialog.game-dialog[open]) body { overflow: hidden; }
/* ---- Card-page kit extras (alliance, dynasty, diplomacy...) ---- */
.card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.game-card .card-actions { margin: 0.3rem 0 0; }
.card-actions form { margin: 0; }
.page-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.page-panel h2 { font-size: 1.15rem; }
.page-panel-danger { border-color: rgba(179, 67, 47, 0.45); }
.page-panel-danger form + form { margin-left: 0.4rem; }
.page-log { list-style: none; padding: 0; margin: 0 0 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.page-log li { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--border); }
.page-log li:last-child { border-bottom: none; }
.page-log li > .muted:first-child { display: inline-block; min-width: 11.5em; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tab-count.tab-count-alert, .page-tab.is-active .tab-count.tab-count-alert { background: var(--error); color: #fff; }
.game-card.is-dim { opacity: 0.75; border-left-color: var(--border); }
.game-card.is-you { box-shadow: inset 0 0 0 1px var(--accent-dark); }
.card-grid.card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.game-card-art .crest { display: block; }
.game-card-name .alliance-link { color: inherit; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.crest-head h1 a { text-decoration: none; }
/* Link buttons, and a quieter outlined look for secondary choices (Decline, Remove, Withdraw...). */
a.button { display: inline-block; background: var(--accent-dark); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; }
a.button:hover { background: var(--accent); }
button.secondary, a.button.secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-dark); }
button.secondary:hover, a.button.secondary:hover { background: rgba(201, 162, 74, 0.12); color: var(--text); }
a.button.button-small, button.button-small { padding: 0.3rem 0.75rem; font-size: 0.9rem; }
/* Family stat bars (dynasty, heir market) */
.stat-bars { display: grid; gap: 0.2rem; width: 100%; margin-top: 0.2rem; }
.stat-bar { display: grid; grid-template-columns: 6.6em 1fr 1.4em; align-items: center; gap: 0.4rem; font-size: 0.78em; color: var(--muted); }
.stat-bar-track { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.stat-bar-track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 3px; }
.stat-bar-value { text-align: right; color: var(--text); }
.game-dialog > .stat-bars { max-width: 360px; margin: 0.6rem 0; }
.page-tab { font-size: 0.9rem; }
a.page-tab { text-decoration: none; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.filter-chips a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); text-decoration: none; background: var(--panel); }
.filter-chips a:hover { color: var(--text); border-color: var(--accent-dark); }
.filter-chips a.is-active { color: var(--accent); border-color: var(--accent); }
.check-label { flex-direction: row !important; align-items: center; gap: 0.4rem !important; }
.card-grid.card-grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.odds-chips { margin-bottom: 0.6rem; }
.game-card .bet-form { flex-wrap: wrap; }
/* Dashboard overview */
a.game-card { text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.game-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.building-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.building-card { align-items: center; text-align: center; }
.building-card .game-card-art .building-icon-img { width: 64px; height: 64px; vertical-align: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.building-card .game-card-art .gi { width: 48px; height: 48px; }
.building-card .game-card-name { font-size: 1rem; }
/* My Island: plot summary, panel tabs, build pop-up */
.plot-summary { display: flex; gap: 1rem; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.6rem 0 0.9rem; }
.plot-summary p { margin: 0.15rem 0; }
.plot-summary-title { font-size: 1.1rem; color: var(--accent); }
.plot-summary-art { flex: none; }
.plot-summary-art .building-icon-img { width: 96px; height: 96px; vertical-align: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.plot-summary-art .gi { width: 56px; height: 56px; }
.plot-summary-art img { max-width: 96px; max-height: 96px; }
.panel-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border); }
.panel-tab { background: transparent; color: var(--muted); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 0.45rem 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.panel-tab:hover { background: var(--bg); color: var(--text); }
.panel-tab.is-active { background: var(--bg); color: var(--accent); border-color: var(--border); }
.panel-pane { background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; padding: 0.8rem 0.9rem; }
.panel-pane > :first-child, .panel-pane .send-army > h3:first-child { margin-top: 0; }
.panel-pane .panel-danger { margin-top: 0.8rem; }
dialog.game-dialog.build-dialog { width: min(980px, calc(100vw - 2rem)); }
.build-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 0; }
.build-option { align-items: center; text-align: center; border-left-width: 1px; }
.build-option .game-card-art .building-icon-img { width: 88px; height: 88px; vertical-align: 0; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.build-option .game-card-art .gi { width: 64px; height: 64px; }
.build-option form { justify-content: center; flex-wrap: wrap; margin-top: auto; padding-top: 0.3rem; }
.build-option.is-short { opacity: 0.8; }
.map-pan.card-actions { margin: 0.6rem 0; }
@media (max-width: 600px) { .plot-summary-art .building-icon-img { width: 64px; height: 64px; } .build-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.map-pan a.button { padding: 0.3rem 0.75rem; }
.panel-pane .send-army { border-top: none; margin-top: 0; padding-top: 0; }
/* Army picker, card search, training cards */
.army-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; }
.card-search { width: 100%; margin: 0.4rem 0 0.8rem; }
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; }
.game-card.is-picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.game-card[hidden] { display: none; }
.unit-art .unit-icon-img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.army-unit .unit-icon-img { width: 1.6em; height: 1.6em; object-fit: contain; vertical-align: -0.45em; }
.train-card-form { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; margin-top: auto; padding-top: 0.3rem; }
.train-card-form .train-qty { display: inline-flex; align-items: center; gap: 0.2rem; }
.train-card-form .train-cost { font-size: 0.85em; }
/* Keep the whole training form inside its card on narrow screens: one column that never wraps into a second one (the
   general phone rule giving .train-cost a full row is meant for row layouts), and a quantity box that can shrink. */
.build-option { min-width: 0; }
.build-option .train-card-form { flex-wrap: nowrap; min-width: 0; }
.build-option .train-card-form .train-qty { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.build-option .train-card-form .qty-input { width: 4rem; min-width: 0; }
.build-option .train-card-form .train-cost { flex: 0 0 auto; margin: 0; justify-content: center; max-width: 100%; }
.dialog-list .unit-icon-img, .army-unit .unit-icon-img { width: 2em; height: 2em; object-fit: contain; vertical-align: middle; }
/* In-game confirmation window */
dialog.game-dialog.confirm-dialog { width: min(480px, calc(100vw - 2rem)); }
.confirm-dialog .dialog-head h2 { font-size: 1.25rem; }
.confirm-dialog .card-actions { justify-content: flex-end; margin: 1rem 0 0; }
.confirm-dialog .confirm-body.is-warning { color: #e8a08f; }
@media (max-width: 600px) { dialog.game-dialog.confirm-dialog { width: 100vw; max-width: 100vw; } }
/* Quick links bar: every shortcut keeps its own width; long names wrap onto two lines instead of running into the next one. */
.quicklinks a { flex: 0 0 auto; width: 4.9rem; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }
@media (max-width: 700px) { .quicklinks a { width: 4.9rem; min-width: 0; padding: 0.25rem 0.2rem; } }
/* Profile settings */
.settings-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.settings-grid .game-card-art .crest { display: block; }
dialog.game-dialog.profile-text-dialog { width: min(820px, calc(100vw - 2rem)); }
.profile-text-dialog .form { max-width: none; }
/* Quick links editor: drag handle + position number */
.ql-editor { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.35rem; }
.ql-item { display: flex; align-items: center; gap: 0.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.6rem; }
.ql-item.is-on { border-color: var(--accent-dark); }
.ql-item:not(.is-on) { opacity: 0.7; }
.ql-item.is-dragging { opacity: 0.85; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); border-color: var(--accent); }
.ql-item label { flex: 1; display: flex !important; flex-direction: row !important; align-items: center; gap: 0.45rem; cursor: pointer; }
.ql-handle { cursor: grab; touch-action: none; user-select: none; color: var(--muted); letter-spacing: -0.35em; padding: 0.2rem 0.5rem 0.2rem 0.1rem; font-size: 1.1rem; }
.ql-item:not(.is-on) .ql-handle { visibility: hidden; }
.ql-item.is-dragging .ql-handle { cursor: grabbing; }
.ql-pos { width: 3.4rem; text-align: center; }
.ql-pos:disabled { visibility: hidden; }
.ql-item .ql-icon { font-size: 1.2rem; }
.ql-editor .ql-item { margin: 0; }
.quicklinks { scrollbar-width: none; } .quicklinks::-webkit-scrollbar { display: none; }
/* Quick links editor: a big, easy-to-grab drag handle; a narrow position box. */
.ql-handle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; letter-spacing: -0.3em; font-size: 1.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.ql-item.is-on .ql-handle:hover { border-color: var(--accent); color: var(--accent); }
.ql-pos { width: 2.6rem; padding: 0.35rem 0.2rem; -moz-appearance: textfield; }
.ql-pos::-webkit-outer-spin-button, .ql-pos::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ql-item { padding: 0.3rem 0.5rem 0.3rem 0.3rem; }
.ql-editor .ql-item .ql-pos { flex: none; width: 2.6rem !important; max-width: 2.6rem; }
.ql-editor .ql-item label { min-width: 0; justify-content: flex-start; }
.ransom-form { flex-wrap: wrap; }
/* Mail: message rows */
.mail-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.mail-select-all-label { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.4rem; color: var(--muted); }
.mail-rows { display: grid; gap: 0.35rem; }
.mail-row { display: grid; grid-template-columns: auto minmax(8rem, 12rem) 1fr auto; align-items: center; gap: 0.8rem; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 6px; padding: 0.55rem 0.8rem; }
.mail-row.mail-unread { border-left-color: var(--accent); }
.mail-row.mail-unread .mail-row-subject { font-weight: 600; color: var(--accent); }
.mail-row.mail-selected { background: rgba(201, 162, 74, 0.1); border-color: var(--accent-dark); }
.mail-row-subject { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-subject:hover { color: var(--accent); }
.mail-new-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.4rem; vertical-align: 0.1em; }
.mail-row-date { font-size: 0.85em; white-space: nowrap; }
.mail-view.page-panel { max-width: none; }
@media (max-width: 600px) { .mail-row { grid-template-columns: auto 1fr; } .mail-row-subject { grid-column: 2; white-space: normal; } .mail-row-date { grid-column: 2; } }
.daily-card { margin-bottom: 1rem; max-width: 520px; }
.shop-card { margin: 0; }
.shop-card label.game-card-meta { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; }
.shop-card .card-actions { margin-top: auto; }
.achv-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.achv-grid .achv-track { margin: 0; }
.achv-grid .achv-bar { width: 100%; }
.hof-podium { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hof-place-1 { border-left-color: #e8c25a; }
.hof-place-1 .game-card-icon .gi { color: #e8c25a; }
.hof-place-2 { border-left-color: #b8c2cc; }
.hof-place-3 { border-left-color: #c08850; }
.hof-round { margin-bottom: 1.5rem; }
.help-toc.filter-chips { padding: 0.7rem; } .help-toc a.is-active { color: var(--accent); border-color: var(--accent); } .help-section[hidden] { display: none; }
.game-card > .stat-bar { width: 100%; }
button.danger { background: #8f3326; } button.danger:hover { background: var(--error); }
/* Buy Gems packs */
.gem-packs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.gem-pack { align-items: center; text-align: center; }
.gem-pack .game-card-icon .gi { width: 3rem; height: 3rem; }
.gem-pack .card-actions { justify-content: center; margin-top: auto; }
.gem-pack .gem-buy { min-width: 6rem; font-size: 1.05rem; }

/* Player polls (dashboard card, includes/polls.php) */
.poll-card { margin: 0.8rem 0; }
.poll-card .poll-form { align-self: stretch; }
.poll-card .poll-question { margin: 0.1rem 0 0.2rem; font-size: 1.15rem; color: var(--text); }
.poll-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.45rem; margin: 0.5rem 0 0.7rem; }
.poll-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.poll-option:hover { border-color: rgba(201, 162, 74, 0.6); }
.poll-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.poll-option input { accent-color: var(--accent); margin: 0; }
.poll-results { list-style: none; margin: 0.4rem 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; gap: 0.4rem; }
.poll-results li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; align-items: center; gap: 0.6rem; }
.poll-results li.is-mine .poll-result-label { color: var(--accent); font-weight: bold; }
.poll-bar { height: 0.7rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px 0 0 6px; transition: width 0.4s ease; }
.poll-result-count { font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 560px) { .poll-results li { grid-template-columns: 1fr auto; } .poll-results .poll-bar { grid-column: 1 / -1; grid-row: 2; } }