/* Game UI tokens: static/css/tokens.css (loaded from layout.html) */
/* Game shell: static/css/game-shell.css, game-experience.css, game-war.css */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/MaterialIcons-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/MaterialIconsOutlined.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/MaterialIconsRound.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/MaterialIconsSharp.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons Two Tone';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/MaterialIconsTwoTone.otf') format('opentype');
    font-display: swap;
}

/* Global transition removed — was slowing paint on large pages */

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    vertical-align: middle;
    margin-right: 5px;
    padding-bottom: 2px;
    font-size: inherit;
    /* Preferred icon size */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.landingicon {
    top: 2.5px;
    color: #fff !important;
}

/* Font Awesome flag sizing & alignment so it replaces material icon ligatures cleanly */
.fa-flag {
    position: relative;
    top: 5px;
    right: 5px;
    font-size: inherit;
    vertical-align: middle;
    margin-right: 8px;
}

/* Ensure flag inherits menu/text color */
.menubara .fa-flag,
.dropdown-content a .fa-flag,
.templatediv .fa-flag {
    color: inherit !important;
}

/* Make large icons scale correctly */
.fa-flag.iconlarge {
    font-size: 40px !important;
}

.red {
    color: red !important;
}

.blue {
    color: #00a7e1 !important;
}

.iconblue {
    color: #00a7e1 !important;
    font-size: 30px !important;
    cursor: pointer;
    transition: all 0.2s linear;
    vertical-align: middle;
    user-select: none;
    border: none;
    background: transparent;
    margin: 0;
}

.iconred {
    color: red !important;
    font-size: 30px !important;
    cursor: pointer;
    transition: all 0.2s linear;
    vertical-align: middle;
    user-select: none;
    border: none;
    background: transparent;
    margin: 0;
}

.iconblue:hover,
.iconred:hover {
    opacity: 0.6;
}

.iconbutton {
    border: none;
    background: transparent;
}

.iconlarge {
    font-size: 40px !important;
}

.iconbig {
    font-size: 60px !important;
}

.iconright {
    right: 0px;
    left: 5px;
}


/*Animations*/

@keyframes navbarparentload {
    from {
        top: -55px;
        opacity: 0;
    }
    to {}
}

@keyframes textload {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bar1 {
    0% {}
    50% {
        width: 0px;
        opacity: 0;
        background: white;
    }
    100% {
        background: #00a7e1;
    }
}

@keyframes bar2 {
    0% {}
    50% {
        width: 0px;
        opacity: 0;
        background: white;
    }
    100% {
        width: 20px;
        background: #00a7e1;
    }
}

@keyframes bar3 {
    0% {}
    50% {
        width: 0px;
        opacity: 0;
        background: white;
    }
    100% {
        background: #00a7e1;
    }
}

@keyframes templatedivtitleload {
    0% {
        opacity: 0;
        pointer-events: none;
        top: -15px;
    }
    50% {
        opacity: 0;
        pointer-events: none;
        top: -15px;
    }
    100% {
        opacity: 1;
        pointer-events: all;
        top: 0px;
    }
}

@keyframes templatedivcontentload {
    0% {
        opacity: 0;
        pointer-events: none;
        top: 15px;
    }
    50% {
        opacity: 0;
        pointer-events: none;
        top: 15px;
    }
    100% {
        opacity: 1;
        pointer-events: all;
        top: 0px;
    }
}

@keyframes templatelandingpagebuttonload {
    0% {
        opacity: 0;
        pointer-events: none;
        top: 8px;
    }
    50% {
        opacity: 0;
        pointer-events: none;
        top: 8px;
    }
    100% {
        opacity: 1;
        pointer-events: all;
        top: -5px;
    }
}

@keyframes toppergradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes borderpulse {
    20% {
        border-color: var(--foregroundThree);
    }
    50% {
        border-color: #00a7e1;
    }
    80% {
        border-color: var(--foregroundThree);
    }
}

@keyframes unitimage {
    0% {
        animation: unitimage 2s;
        position: fixed;
        left: 50px;
        right: 50px;
        bottom: -50px;
        margin: auto;
        z-index: 1;
        width: 80%;
        max-height: 80%;
        height: 80%;
        box-shadow: rgba(0, 0, 0, 0.7) 0 0 0 10000px;
        opacity: 0;
    }
    25% {
        opacity: 0;
        width: 20%;
        max-height: 20%;
    }
}

@keyframes scrolldownchild {
    0% {
        top: 5px;
    }
    25% {
        top: 5px;
        opacity: 1;
    }
    50% {}
    75% {}
    100% {
        top: 25px;
        opacity: 0;
    }
}

@keyframes scrolldownparentload {
    0% {
        bottom: 0px;
        opacity: 0;
    }
    100% {
        bottom: 15px;
        opacity: 1;
    }
}

@keyframes fade {
    from {
        right: -25px;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

*::selection {
    color: white;
    background: #00a7e1 !important;
}

/* Do NOT set color-scheme on html — Safari uses it to tint the browser toolbar,
   which looked like the theme changing when hovering the navbar vs the page. */

/* Color tokens (.theme-light / .theme-dark) moved to static/css/tokens.css — see that file for the canonical source. */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
    background: var(--background) !important;
    padding: 0;
    margin: 0;
    animation: textload 0.5s;
    transition: background-color 0.2s ease;
    overflow-x: clip;
    overflow-y: auto;
}

/* Full-width strip under navbar so Safari never samples light hero gaps at the top edge */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #1c2029;
    z-index: 999;
    pointer-events: none;
}

* {
    scroll-behavior: smooth;
    font-family: 'Roboto', system-ui, sans-serif;
}

a {
    text-decoration: none;
}

p {
    line-height: 30px;
    font-weight: 200;
}

label {
    text-align: center;
    display: block !important;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    font-size: 16px;
    color: var(--text-secondary);
}

.background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -5;
}


/*navbarparent*/

.navbarparent {
    background: #1c2029;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 55px;
    z-index: 1000;
    top: 0;
    animation: navbarparentload 0.5s;
    padding: 0 5%;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid var(--accent);
    transition: box-shadow 0.2s ease;
}

/* No background change on hover — Safari samples the top edge for toolbar tinting */
.navbarparent:hover {
    background-color: #1c2029;
}

/*
 * Scroll recovery: legacy layout nested .templatecontainer inside fixed
 * .navbarparent (logged-out pages). Fixed ancestors do not expand document
 * scrollHeight — players cannot scroll. Until template fix deploys, restore
 * normal document flow and pin only the nav chrome.
 */
.navbarparent:has(.templatecontainer) {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
}

.navbarparent:has(.templatecontainer)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: #1c2029;
    z-index: 999;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid var(--accent);
}

.navbarparent:has(.templatecontainer) > .navbarparenttitle,
.navbarparent:has(.templatecontainer) > .navbarparentloginsignupdiv,
.navbarparent:has(.templatecontainer) > .menubar,
.navbarparent:has(.templatecontainer) > .navbar-theme-toggle {
    position: fixed;
    z-index: 1001;
    top: 0;
}

.navbarparent:has(.templatecontainer) > .navbarparentloginsignupdiv {
    right: 5%;
    left: auto;
}

.navbarparent:has(.templatecontainer) > .templatecontainer {
    margin-top: 55px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    background: var(--background);
}

html:has(.navbarparent .templatecontainer),
body:has(.navbarparent .templatecontainer) {
    overflow-y: auto;
    height: auto;
    min-height: 100%;
}

.navbarparenttitle {
    font-weight: bold;
    font-size: 26px;
    float: left;
    margin-left: 2px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    height: 0px;
    line-height: 55px;
}

.navbarparenttitle:hover {
    color: rgba(255, 255, 255, 0.7);
}

.navbarparenttitleimage {
    height: 45px;
    width: 45px;
    margin: 5px;
    float: left;
    margin-right: 10px;
    user-select: none;
}

.menubar {
    width: 45px;
    margin-left: 5px;
    height: 45px;
    margin-top: 5px;
    transition: all 0.2s;
    cursor: pointer;
    float: left;
}

@media all and (min-width: 856px) {
    .menubar {
        display: none;
    }
}

.menubar:hover {
    opacity: 0.5;
}

.menubarclick {
    margin-left: 0;
    margin-right: 5px;
}

.bar1,
.bar2,
.bar3 {
    width: 30px;
    height: 4.5px;
    background: rgb(240, 240, 240);
    margin: 8.5px;
    transition: all 0.3s ease;
    border-radius: 2px;
    position: relative;
}

.barclick1 {
    background-color: rgb(240, 240, 240);
    top: 0;
    transform: translateY(13px) rotate(45deg);
    width: 30px;
}

.barclick2 {
    background-color: rgb(240, 240, 240);
    width: 30px;
    opacity: 0;
}

.barclick3 {
    background-color: rgb(240, 240, 240);
    top: 0;
    transform: translateY(-13px) rotate(-45deg);
    width: 30px;
}

.menubardiv {
    width: 250px;
    background: #1c2029;
    position: fixed;
    left: 0px;
    top: 55px;
    bottom: 0;
    margin-left: -250px;
    z-index: 1000;
    transition: margin 0.4s ease;
    overflow: hidden;
    font-size: 19px;
    padding-bottom: 20px;
    border-right: 1px solid var(--border);
}

@media all and (max-width: 856px) {
    .menubardiv {
        width: 280px;
        margin-left: -280px;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Safari mobile white-out fix: kill all blur on mobile */
    .templatedivflex2left,
    .templatedivflex2right,
    .templatetable,
    .chart-wrapper,
    .templatesidenav,
    .side-nav,
    .sidebar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.menubardivshow {
    margin: 0;
    /* Dimming is handled by .menubar-backdrop now, scoped to below the fixed
       navbar. The old giant box-shadow used to paint over the navbar too,
       darkening the title/icons that should stay legible while open. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Tap-anywhere-outside-to-close backdrop. Scoped to below the fixed navbar
   (top: 55px) so the title/icons stay legible while the drawer is open. */
.menubar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: 55px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    padding: 0;
    cursor: default;
    /* Belt-and-braces beyond `display`: a real report (province pages
       specifically, cause not pinned down) had this backdrop rendering
       and intercepting every tap on page load despite lacking the
       -show class -- opacity/pointer-events give a second, independent
       gate so a `display` override elsewhere can no longer make the
       whole page untappable on its own. */
    opacity: 0;
    pointer-events: none;
}

.menubar-backdrop.menubar-backdrop-show {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.menubardiv::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.menubardiv::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.menubardiv::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.menubardiv h3 {
    color: var(--accent);
    margin: 18px;
    margin-left: 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

@media all and (max-width: 600px) {
    .menubardiv h3 {
        margin: 18px auto;
        text-align: center;
    }
}

.menubara {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    line-height: 1.2;
    text-align: left;
    padding: 11px 20px;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    position: relative;
    font-weight: normal;
    font-size: 15px;
    /* button.menubara (Theme / Toggle HUD) must not show native button chrome */
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.menubara .material-icons-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.menubara:hover {
    color: rgb(255, 255, 255);
    background: rgba(0, 167, 225, 0.15);
    border-left: 3px solid var(--accent);
    padding-left: 17px;
}

.menubaranotification {
    position: relative;
    background: red;
    color: white;
    border-radius: 100%;
    font-size: 11px;
    top: -10px;
    margin-left: 4px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 3px 0px, rgba(39, 41, 59, 0.15) 0px 2px 5px 0px;
    text-align: center;
    padding: 4px 7px;
}

@media all and (max-width: 620px) {
    .navbarparentloginsignupdiv {
        display: none;
    }
}

.loginsignup {
    float: right;
    width: fit-content;
    width: -moz-fit-content;
    transition: all 0.2s;
    line-height: 35px;
    border: 2.5px transparent solid;
    padding: 0 10px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    margin: 7.5px 7.5px;
}

.loginsignup:hover {
    color: rgba(255, 255, 255, 0.55);
}

.dropbtn {
    cursor: pointer;
    height: 55px;
    transition: all 0.3s;
    padding: 0 6px;
}

.dropbtnchild {
    color: white;
    font-size: 20px;
    line-height: 45px;
    border: none;
    height: 45px;
    margin: 5px 0;
    border-radius: 4px;
    transition: all 0.2s;
    width: max-content;
    background: #1c2029;
    padding: 0 12px;
    cursor: pointer;
}

.dropbtn:hover .dropbtnchild {
    opacity: 1 !important;
    box-shadow: inset rgba(255, 255, 255, 0.103) 0 0 10000px 0;
    background: #1c2029;
}

.dropbtn:hover {
    opacity: 1 !important;
}

.dropbtn span {
    transition: 0.4s;
}

.dropdown:hover button span {
    transform: rotate(180deg);
}

.dropdown {
    position: relative;
    float: right;
    width: fit-content;
    width: -moz-fit-content;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 16px;
    color: white;
    user-select: none;
}

@media all and (max-width: 857px) {
    .dropdown {
        display: none;
    }
}

.dropdown-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    right: -15px;
    top: 80px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
}

.dropdown-contentchild {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: #1c2029;
    min-width: 200px;
    width: max-content;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-contentchild:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0 12px 22px 2px, rgba(0, 0, 0, 0.075) 0 12px 12px;
}

.dropdown-content a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: block;
    transition: all 0.2s;
    padding: 8px 14px;
    margin: 4px 6px;
    border-radius: 6px;
    font-weight: normal;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: rgba(0, 167, 225, 0.15);
    color: white;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    pointer-events: all;
    top: 50px;
}

.dropdown:hover .dropbtn {
    opacity: 0.6;
}

.dropdown:hover .dropbtnchild {
    box-shadow: inset rgba(255, 255, 255, 0.103) 0 0 10000px 0;
}

.resourcediv {
    top: 150px;
    right: 20px;
    position: fixed;
    background-color: #1c2029;
    width: 56px;
    z-index: 11000 !important;
    height: 56px;
    transition: all 0.4s ease-in-out;
    box-shadow: rgba(58, 59, 69, 0.4) 0px 0px 6px 0px;
    border-radius: 100px;
}

@media all and (max-width: 500px) {
    .resourcediv {
        top: 60px;
        right: 5px;
    }
}

.resourcediv:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px 0px;
}

.resourcedivshow {
    right: 200px !important;
}

.resourcedivchild {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    width: 56px;
    height: 56px;
    cursor: pointer;
}

.resourcedivchild:hover {
    opacity: 0.6;
    cursor: pointer;
}

.resourceicon {
    font-size: 46px !important;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    color: white;
}

.resourceicontext {
    opacity: 0;
    position: absolute;
    display: none;
    font-family: inherit;
    font-weight: 500;
    padding-left: 20px;
    font-size: 26px;
    text-align: center;
    line-height: 56px;
    vertical-align: middle;
    color: white;
}

.resourcedivcontent {
    position: fixed;
    top: 75px;
    right: 0px;
    bottom: 0px;
    background-color: #1c2029;
    width: 200px;
    margin-right: -200px;
    transition: all 0.4s ease;
    padding-top: 60px;
    padding-bottom: 20px;
    color: white;
    overflow-y: scroll;
}

@media all and (max-width: 500px) {
    .resourcedivcontent {
        top: 60px;
    }
}

.resourcedivcontentshow {
    margin: 0;
    box-shadow: rgba(58, 59, 69, 0.4) 0px 0px 6px 0px;
}

.resourcedivcontent::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.resourcedivcontent::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.resourcedivcontent::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.resource-section-label {
    font-size: 8pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    margin: 14px 6px 4px;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.resourcetagparent {
    text-align: left;
    padding: 0px 10px;
    margin: 8px 6px;
    font-size: 11.5pt;
    cursor: pointer;
    transition: all 0.3s;
    width: calc(100% - 8px);
    box-shadow: inset rgba(58, 59, 69, 0.4) 0px 2px 9px 0px;
    border-radius: 4px;
    position: relative;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.resourcetagparent:hover {
    background: rgba(0, 167, 225, 0.15);
}

.resourcetagparent:focus {
    background: rgba(0, 167, 225, 0.15);
    height: auto;
    outline: none;
}

.resourcetagparent img {
    width: 30px;
    height: 30px;
}

.resourcetag {
    flex: 1;
    min-width: 0;
    margin: 0;
    margin-left: 5px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resourceinfo {
    transition: all 0s;
    width: 100%;
    pointer-events: none;
    line-height: 30px;
    opacity: 0;
    position: absolute;
    display: none;
    padding: 6px;
    font-size: 14px;
}

.resourcetagparent:focus .resourceinfo {
    pointer-events: all;
    opacity: 1;
    transition: all 0.3s;
    display: block;
    position: static;
}

@media all and (max-width: 768px) {
    .resourcediv {
        top: 62px !important;
        right: 8px !important;
        z-index: 11000 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .resourcedivshow {
        right: 180px !important;
        width: 56px !important;
        border-radius: 100px !important;
        padding-left: 0 !important;
        background-color: #1c2029 !important;
    }

    .resourcedivshow .resourcedivchild {
        width: 56px !important;
    }

    .resourcedivcontent {
        top: 62px !important;
        width: 180px !important;
        max-width: 78vw !important;
        right: 0 !important;
        margin-right: -180px !important;
        z-index: 10999 !important;
        overflow-x: hidden !important;
    }

    .resourcedivcontentshow {
        margin-right: 0 !important;
    }

    .resourcetagparent {
        min-height: 36px !important;
        margin: 6px 6px !important;
        padding: 0 8px !important;
    }

    .resourcetag {
        font-size: 12px !important;
        line-height: 36px !important;
    }

    .resourceinfo {
        display: none !important;
        opacity: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
    }

    .resourcetagparent:focus .resourceinfo {
        display: none !important;
        opacity: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
    }
}

.purchasediv {
    position: fixed;
    right: 26px;
    bottom: 8px;
    width: fit-content;
    width: -moz-fit-content;
    z-index: 9999;
    margin: auto 0;
    margin-bottom: 40px;
}

.purchasediv div {
    width: 100%;
    background: #1c2029;
    color: #ffffff;
    box-shadow: 0 0 20px 0 rgba(58, 59, 69, .55);
    padding: 12px 20px;
    justify-self: end;
    height: min-content;
    margin: auto;
    opacity: 1;
    pointer-events: auto;
    border-left: 3px solid #00a7e1;
    border-radius: 4px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.purchasediv div h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
}


/*CONTENT*/

.resourceparent {
    margin: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource {
    width: 20px;
    height: 20px;
}

.resourceparent strong {
    font-weight: normal;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.left {
    text-align: left;
    display: block;
}

.right {
    text-align: right;
    display: block;
}

.vanilla {
    margin: 2px !important;
    padding: 0px !important;
}

.nopad {
    padding: 0 !important;
}

.nomarg {
    margin: 0 !important;
}

.strongpadding {
    padding: 40px;
}

.strongmargin {
    margin: 40px;
}

.fit {
    width: fit-content;
    width: -moz-fit-content;
}

.min {
    width: min-content !important;
}

.minheight {
    height: min-content;
}

.initial {
    all: initial;
    font-family: inherit;
}

.center {
    margin: auto;
    text-align: center;
    justify-self: center;
}

.middle {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.hidden {
    display: none;
}

.space {
    justify-content: space-around !important;
}

.full {
    opacity: 1;
}

.flexwrap {
    flex-wrap: wrap;
}

.bold {
    font-weight: bold;
}

.block {
    display: block !important;
}

.large {
    font-size: 25px;
}

.medium {
    font-size: 19px;
}

.mediumsmall {
    font-size: 16.5px;
}

.small {
    font-size: 14.5px;
}

.whiteblue {
    background: var(--background);
}

@media all and (max-width: 1055px) {
    .whiteblue {
        flex-direction: column-reverse !important;
    }
}

.imageborder {
    background: var(--foregroundFive);
    padding: 2.5px;
}

.width100 {
    width: 100% !important;
}

.nopointer {
    cursor: default !important;
}

.block {
    display: block;
}

.grecaptcha-badge {
    bottom: 90px;
    box-shadow: none;
}

.warflexparentcolors {
    background: var(--foreground);
    border: 1.5px solid var(--border);
    transition: all 0.3s ease-in-out;
    width: 95%;
    margin: 12px auto;
    position: relative !important;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 10px 26px 0px;
    border-radius: 4px;
}

.templatecontainer {
    min-height: 100vh;
    margin-top: -90px;
    background: var(--background);
}

.templatediv {
    background: var(--foreground);
    width: 90%;
    margin: 50px auto;
    margin-top: 180px;
    padding-bottom: 25px;
    overflow: visible;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease;
}

@media all and (max-width: 750px) {
    .templatediv {
        width: 90%;
    }
}

.templatedivtopper {
    padding: 15px 0;
    transition: all 0.2s;
    background-size: 400% 400%;
    margin-bottom: 10px;
    position: relative;
    background: var(--foregroundEight);
    background-attachment: fixed;
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

@media all and (max-width: 750px) {
    .templatedivtopper {
        background-attachment: unset;
    }
}

.templatedivtopper img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

.noboxshadowtopper h1 {
    box-shadow: rgba(0, 0, 0, 0.06) 0 3px 4px 1px, rgba(0, 0, 0, 0.1) 0 12px 32px 0;
}

.countrytopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/country.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.provincestopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/provinces.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.provincetopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/province.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position-y: 80%;
}

.markettopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/market.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.peaceTopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/peaceTopper.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position-y: 55%;
}

.wartopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/war.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.rankingstopper {
    overflow: hidden;
    text-align: center;
    background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("images/washington.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.rankingstopper .templatedivtitle {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.militarytopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/military.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.establishcoalitiontopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/establishcoalition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.coalitionstopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/coalitions.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.coalitiontopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/coalition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.countriestopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/countries.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.marketoffertopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/marketoffer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.recruitmentdivtopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/recruitment.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position-y: center;
}

.businessestopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/businesses.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.assemblytopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/assembly.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

.upgradestopper {
    overflow: hidden;
    text-align: center;
    background-image: url("images/upgrades.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
}

/* Atmosphere pass: vivid but readable topper overlays (no layout changes) */
.countrytopper,
.provincestopper,
.provincetopper,
.markettopper,
.peaceTopper,
.wartopper,
.militarytopper,
.establishcoalitiontopper,
.coalitionstopper,
.coalitiontopper,
.countriestopper,
.marketoffertopper,
.recruitmentdivtopper,
.businessestopper,
.assemblytopper,
.upgradestopper {
    position: relative;
    isolation: isolate;
}

.countrytopper::before,
.provincestopper::before,
.provincetopper::before,
.markettopper::before,
.peaceTopper::before,
.wartopper::before,
.militarytopper::before,
.establishcoalitiontopper::before,
.coalitionstopper::before,
.coalitiontopper::before,
.countriestopper::before,
.marketoffertopper::before,
.recruitmentdivtopper::before,
.businessestopper::before,
.assemblytopper::before,
.upgradestopper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 167, 225, 0.34), transparent 46%),
        radial-gradient(circle at 82% 76%, rgba(212, 168, 67, 0.26), transparent 44%),
        linear-gradient(180deg, rgba(8, 12, 22, 0.36), rgba(8, 12, 22, 0.62));
    mix-blend-mode: screen;
    opacity: 0.95;
    z-index: 0;
}

.countrytopper::after,
.provincestopper::after,
.provincetopper::after,
.markettopper::after,
.peaceTopper::after,
.wartopper::after,
.militarytopper::after,
.establishcoalitiontopper::after,
.coalitionstopper::after,
.coalitiontopper::after,
.countriestopper::after,
.marketoffertopper::after,
.recruitmentdivtopper::after,
.businessestopper::after,
.assemblytopper::after,
.upgradestopper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.10) 50%, transparent 100%);
    width: 60%;
    transform: translateX(-100%);
    will-change: transform;
    animation: toppershimmer 12s ease-in-out infinite;
    z-index: 0;
}

.countrytopper .templatedivtitle,
.provincestopper .templatedivtitle,
.provincetopper .templatedivtitle,
.markettopper .templatedivtitle,
.peaceTopper .templatedivtitle,
.wartopper .templatedivtitle,
.militarytopper .templatedivtitle,
.establishcoalitiontopper .templatedivtitle,
.coalitionstopper .templatedivtitle,
.coalitiontopper .templatedivtitle,
.countriestopper .templatedivtitle,
.marketoffertopper .templatedivtitle,
.recruitmentdivtopper .templatedivtitle,
.businessestopper .templatedivtitle,
.assemblytopper .templatedivtitle,
.rankingstopper .templatedivtitle,
.upgradestopper .templatedivtitle {
    position: relative;
    z-index: 1;
}

@keyframes toppershimmer {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(280%); }
    100% { transform: translateX(-100%); }
}

.templatedivtitle {
    text-align: center;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    font-size: 40px;
    animation: templatedivtitleload 1.5s;
    margin: 0;
    padding: 0px;
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    padding: 10px 20px;
    background-color: var(--accent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-transform: capitalize;
    font-weight: bold;
    border-radius: var(--game-radius-md, 12px);
}

.advert {
    text-align: center;
}

.advertimage {
    width: 80%;
    height: 20vh;
    padding: 8px;
    margin: 25px auto;
    margin-top: 0px;
    box-shadow: rgba(58, 59, 69, 0.15) 0px 0px 48px 0px;
    object-fit: cover;
    transition: all 0.3s;
    cursor: pointer;
}

.advertimage:hover {
    transform: scale(0.985);
}

.templatedivad {
    width: 80%;
    height: 20vh;
    margin: 15px auto;
    background: black;
}

.templatedivcontent {
    color: var(--colorOne);
    animation: templatedivcontentload 0.85s;
    position: relative;
    font-size: 18px;
}

.templatecontentheaderleft {
    background: var(--foregroundThree);
    font-size: 22px;
    margin: 20px 6px;
    padding: 10px 16px;
    color: var(--colorOne);
    border-radius: var(--game-radius-sm, 8px);
    font-weight: 600;
    text-align: center;
    border-left: 4px solid var(--accent);
}

.templatecontentheadercenter {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--colorOne);
    padding-bottom: 8px;
    margin-bottom: 4px;
    position: relative;
}

.templatecontentpleft {
    color: var(--text-secondary);
    text-align: justify;
    margin-top: 0;
    width: 80%;
    margin: 30px auto;
}

@media all and (max-width: 1050px) {
    .templatecontentpleft {
        text-align: center !important;
    }
}

.templatecontentpcenter {
    text-align: center;
    font-size: 17px;
    color: var(--text-secondary);
    margin-top: 0;
}

.d-flex-center {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.templatedivbutton {
    width: fit-content;
    width: -moz-fit-content;
    margin: 5px;
    padding: 8px 32px;
    line-height: 27.2px;
    text-decoration: none;
    color: white;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    text-align: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    letter-spacing: normal;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    animation: templatedivcontentload 1.25s;
    position: relative;
    font-weight: 600;
}

.templatedivbutton:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    color: white;
}

.templatedivbutton:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.templatedivbutton-secondary {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: none;
}

.templatedivbutton-secondary:hover {
    background: var(--accent-subtle);
    box-shadow: none;
    transform: translateY(-1px);
    color: var(--accent);
}

.templatedivbutton-danger {
    background: var(--danger);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.templatedivbutton-danger:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.templatedivbutton-success {
    background: var(--success);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.templatedivbutton-success:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.templatedivbutton:focus {
    box-shadow: inset rgba(39, 41, 59, 0.5) 0px 0px 150px 2px, rgba(0, 0, 0, 0.15) 0 8px 16px 0;
}

.templatedivbutton span {
    font-size: 1.3rem;
    right: 8px;
}

.templatecenteredbutton {
    transition: all 0.2s;
    margin: 5px auto;
}

.smallactionbutton {
    text-transform: capitalize;
    margin: 0px auto;
    float: none;
    letter-spacing: 0;
}

.templateclosedbutton {
    background: rgba(0, 167, 225, 0.3);
    cursor: not-allowed;
    color: var(--text-secondary);
    position: relative;
}

.templateclosedbutton:hover {
    box-shadow: none;
    background: #00a9e170;
}

.templateclosedbutton::after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    position: absolute;
    text-transform: none;
    top: 120%;
    left: 0;
    right: 0;
    background: var(--background);
    box-shadow: rgba(0, 0, 0, 0.075) 0 12px 22px 0;
    color: var(--colorOne);
    padding: 8px;
    font-size: 15px;
    z-index: 1;
}

.templateclosedbutton:hover::after {
    opacity: 1;
    pointer-events: all;
}

.nuclearreactordisabledbutton {
    content: "You require the Nuclear Testing Facility project to build a Nuclear Reactor";
}

.borderbutton {
    background: #00a9e1;
}

.borderbutton:hover {
    color: white;
    opacity: 0.7;
}

.borderbutton:focus {
    box-shadow: rgba(39, 41, 59, .7) 0px 4px 6px 0px;
}

.discordbutton {
    background: #7289da;
    margin-top: 17px;
}

.smallheader {
    font-size: 1.2rem;
}

.templatelink {
    color: #00a7e1;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: transparent;
    outline: none;
    font-size: inherit;
}

.templatelink:hover {
    color: rgb(88, 196, 231);
}

.templatediv ul {
    color: var(--colorOne);
    padding: 0;
    text-align: center;
    font-weight: 400;
    font-size: 17px;
}

.templatecheckmarklabel {
    display: block;
    position: relative;
    padding-left: 25px;
    margin: 12px auto;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.templatecheckmarklabel input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.templatecheckmark {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background: linear-gradient(180deg, var(--foregroundFour) 50%, #00a7e1 50%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    transition: all 0.3s ease;
}

.templatecheckmarklabel input:checked~.templatecheckmark {
    background-position: 0% 100%;
}

.templatecheckmarklabel:after {
    content: "";
    position: absolute;
    display: none;
}

.templatecheckmarklabel input:checked~.templatecheckmark:after {
    display: block;
}

.templatecheckmarklabel .templatecheckmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.radiodivparent {
    justify-content: center !important;
    flex-wrap: wrap;
    border: none;
    user-select: none;
}

.radiodiv {
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 10px 0 !important;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    border-radius: 4px;
}

.radiodiv:hover {
    background: var(--foreground);
    box-shadow: rgba(0, 0, 0, 0.075) 0 12px 22px 0;
}

.radioleft {
    display: block;
    position: relative;
    float: left;
    width: fit-content;
    width: -moz-fit-content;
    margin: 0 auto;
}

.radioleft input {
    position: absolute;
    visibility: hidden;
}

.radioleft label {
    position: relative;
    font-size: 0.95rem;
    padding: 10px 20px 0px 40px;
    margin: 10px auto;
    height: 30px;
    z-index: 9;
    cursor: pointer;
    width: fit-content;
    width: -moz-fit-content;
    transition: all 0.25s;
    color: var(--colorOne);
    opacity: 1 !important;
}

.radioleft .check {
    position: absolute;
    border: 3px solid var(--colorOne);
    border-radius: 100%;
    height: 15px;
    width: 15px;
    top: 15px;
    bottom: 0;
    left: 10px;
    z-index: 5;
    transition: all .25s;
    margin: auto;
    opacity: 0.8 !important;
}

.radioleft:hover .check {
    opacity: 0.6;
}

.radioleft .check::before {
    position: absolute;
    content: '';
    border-radius: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0px;
    width: 0px;
    left: 0px;
    right: 0;
    transition: all 0.25s;
    background-color: rgba(0, 0, 0, 0);
}

.radioleft input:checked~.check {
    border: 3px solid #00a7e1;
    box-shadow: #00a9e190 0 0 22px 0;
}

.radioleft input:checked~.check::before {
    background: #00a7e1;
    height: 10px;
    width: 10px;
}

.radiodiv:hover .radioright {
    opacity: 0.8;
    pointer-events: all;
}

.radiodiv:hover .radioright div {
    top: 0;
}

.radioright {
    opacity: 0;
    pointer-events: none;
    color: var(--colorOne);
    font-size: 15px;
    width: fit-content;
    width: -moz-fit-content;
    transition: all 0.4s ease;
}

.radioright div {
    position: relative;
    top: -10px;
    transition: all 0.4s ease;
}

/* Touch devices can't hover, so the reveal-on-hover .radioright description
   would otherwise stay invisible (opacity: 0) while still reserving its
   layout height in the flex column — visible as large empty gaps. */
@media (hover: none) {
    .radioright {
        opacity: 0.8;
        pointer-events: all;
    }

    .radioright div {
        top: 0;
    }
}

.templateselect {
    padding: 10px 12px;
    margin: 8px auto;
    outline: none;
    font-size: 15px;
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--foreground);
    border: 1.5px solid var(--border);
    color: var(--colorOne);
    float: none;
    border-radius: 8px;
    box-sizing: border-box;
}

.templateselect:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.1);
}

.templateselect:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.15);
}

.templateselect option {
    background: var(--background);
}

.imageinput {
    display: block;
    padding-left: 25px;
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    padding-top: 5px;
    outline: none;
    font-size: 15px;
    margin: 12px auto;
    transition: all 0.2s ease;
    background: var(--foreground);
    border: 1.5px solid var(--border);
    color: var(--colorOne);
    float: none;
    opacity: 1;
    border-radius: 8px;
}

.imageinput:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.1);
}

.imageinput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.15);
}

.imageinput input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.templatetextarea {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px;
    outline: none;
    font-size: 15px;
    transition: all 0.2s ease;
    background: var(--foreground);
    min-width: 40vw;
    min-height: 40vh;
    max-width: 40vw;
    max-height: 40vh;
    border: 1.5px solid var(--border);
    color: var(--colorOne);
    float: none;
}

@media all and (max-width: 600px) {
    .templatetextarea {
        min-width: 60vw;
        max-width: 60vw;
    }
}

.templatetextarea:hover {
    box-shadow: rgba(39, 41, 59, 0.15) 0px 6px 10px 0px;
}

.templatetextarea:focus {
    background-position: -100% 0%;
    box-shadow: rgba(39, 41, 59, 0.15) 0px 6px 10px 0px;
}

.templatetextarea::placeholder {
    color: var(--colorOne);
}

.infodiv {
    background: var(--foreground);
    border: 1.5px solid var(--border);
    padding: 16px;
    width: fit-content;
    width: -moz-fit-content;
    max-width: 95%;
    margin: 16px auto;
    box-shadow: var(--shadow-card);
    border-radius: var(--game-radius-md, 12px);
    box-sizing: border-box;
}

.infodiv div div {
    padding: 8px 20px;
    margin: auto;
}

.notificationdiv {
    margin: auto;
    max-width: 20%;
    flex-wrap: wrap;
}

.notificationdiv div {
    margin: 0 10px;
    padding: 0;
    width: fit-content;
    width: -moz-fit-content;
}

.notificationdiv ul {
    background: #1c2029;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 10px 14px !important;
    margin: 6px 0 !important;
    font-size-adjust: 16px;
    justify-self: end;
    height: fit-content;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    text-align: left;
}

.templatedivflex2 {
    display: flex;
    justify-content: center;
}

@media all and (max-width: 1055px) {
    .templatedivflex2 {
        flex-direction: column;
    }
}

.divflex2full {
    border-bottom: solid 3px var(--foregroundThree);
    align-items: center;
    width: 98%;
    margin: auto;
    height: min-content;
    justify-content: center;
    animation: borderpulse 4s infinite;
    display: flex;
    flex-wrap: wrap;
}

.divflex2full div {
    width: fit-content;
    width: -moz-fit-content;
    padding: 0;
    text-align: center;
    margin: 10px auto;
}

@media all and (max-width: 1055px) {
    .divflex2full div {
        width: 46%;
    }
}

@media all and (max-width: 600px) {
    .divflex2full div {
        width: 100%;
    }
}

.divflex2center {
    height: min-content;
    width: fit-content;
    width: -moz-fit-content;
    justify-items: center;
    justify-self: center;
    margin: auto;
    float: none;
    text-align: center;
}

.divflex2center div {
    height: min-content;
    width: max-content;
    justify-items: center;
    justify-self: center;
    padding: 6px;
    margin: auto;
    float: none;
}

@media all and (max-width: 1055px) {
    .divflex2center {
        width: 100%;
    }
}

.divflex2full select,
input,
button {
    margin: auto 2%;
    float: none;
}

.templateflexfullinput {
    float: none;
    margin: 0px auto;
}

.templatedivflex2left,
.templatedivflex2right {
    flex: 1;
    min-width: 0;
    margin: 20px auto;
    padding: 8px;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Ensure all tables in flex columns have consistent width */
.templatedivflex2left .templatetable,
.templatedivflex2right .templatetable {
    width: 100%;
    box-sizing: border-box;
}

/* Ensure equal flex sizing */
.templatedivflex2 {
    align-items: stretch;
}

.flex2rightfloatright {
    text-align: right;
}

@media all and (max-width: 1055px) {
    .templatedivflex2left,
    .templatedivflex2right {
        width: 90%;
        margin: 20px auto;
        float: none;
        justify-content: center;
        text-align: center;
    }
}

.flexchildvanilla {
    margin: 6px;
    padding: 0px;
}

.templatesidemenuflexparent {
    padding: 0;
    margin: 0;
    justify-content: stretch;
    align-items: stretch;
}

.templatefullwidthflexchild {
    width: 90%;
    margin: 0;
    padding: 0;
}

.stickyflexmenu {
    margin-top: 20px;
    padding: 0;
    min-width: 10% !important;
    height: 100%;
    background: var(--foregroundTwo);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    border: 1px solid var(--border);
}

@media all and (max-width: 600px) {
    .stickyflexmenu {
        left: 2.5%;
    }
}

.stickyflexmenu h3 {
    color: #00a9e1e1;
    margin-left: 10px;
    margin: 18px;
}

@media all and (max-width: 600px) {
    .stickyflexmenu h3 {
        margin: auto;
        text-align: center;
    }
}

.smalltable td {
    line-height: 40px !important;
    height: 0px !important;
    margin: 0;
    padding: 0;
}

.talltabletd {
    line-height: 60px;
}

.templatetable {
    padding: 0;
    margin: 10px auto;
    width: 90%;
    background: var(--tableTwo);
    border: 1px solid var(--border);
    border-radius: 8px;
    border-collapse: initial;
    border-spacing: 0;
    align-items: center;
    overflow: hidden;
}

.templatetable tr {
    border-collapse: collapse;
}

.templatetable th {
    height: 40px;
    background-color: var(--accent);
    color: white;
    font-size: 15px;
    column-span: 1;
    letter-spacing: 0.8px;
    font-weight: 600;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 14px;
}

.templatetable th:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.templatetable th:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.templatetable tr:nth-child(odd) {
    background: var(--tableOne);
}

.templatetable tr:nth-child(even) {
    background: var(--tableTwo);
}

.templatetable tbody tr:hover {
    background: var(--accent-subtle);
    transition: background 0.15s ease;
}

.templatetable td {
    margin: 0px;
    padding: 10px 14px;
    width: 50%;
    min-width: 40px;
    text-align: left;
    display: table-cell;
    font-weight: normal;
    color: var(--colorOne);
    font-size: 14px;
    position: relative;
    line-height: 1.5;
    height: auto;
    white-space: normal;
    overflow: visible;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.templatetable td:nth-child(even) {
    text-align: right;
}

.templatesmalltd {
    font-size: 12px !important;
}

.templatetable .anchor,
.templatetable2 .anchor {
    color: #00a7e1;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
    float: none;
    justify-self: center;
    width: 100%;
    margin: 3px auto;
    font-weight: normal;
}

.templatetable .anchor a,
.templatetable2 .anchor a {
    display: block;
    width: fit-content;
    width: -moz-fit-content;
    padding: 12px 15%;
}


/*table2*/

.templateoutertablediv {
    padding: 8px;
    width: 90%;
    margin: 25px auto;
    background: var(--tableTwo);
    box-shadow: rgba(58, 59, 69, 0.15) 0px 0px 48px 0px;
    border-radius: 4px;
}

.templatetable2 {
    margin: 0px auto;
    width: 100%;
    box-shadow: none;
    border-collapse: collapse;
}

.templatetable2 th {
    column-span: all;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 3px 0px, rgba(39, 41, 59, 0.15) 0px 2px 5px 0px;
}

.templatetable2 td {
    text-align: center;
    height: 45px;
    width: 23%;
    float: none;
    display: table-cell;
}

/* Infrastructure table with 3 equal columns.
   table-layout: fixed keeps columns at their declared width instead of
   growing with long cell content (e.g. "Dist. Centers / Food Banks"),
   which was pushing the table wider than its container on mobile and
   clipping the .menuflex2 category tab row off-screen with no scroll hint. */
.smalltable.templatetable2 {
    table-layout: fixed;
}
.smalltable.templatetable2 td {
    width: 33.33%;
}

.smalltable.templatetable2 td:first-child {
    width: 33.33%;
    max-width: none;
    padding: 8px;
}

/* Narrow width for ranking number column */
.templatetable2 td:first-child,
.templatetable2 th:first-child {
    width: auto;
    max-width: none;
    padding: 2px;
    font-size: 14px;
    line-height: 1.2;
}

.templatetable2 td:nth-child(even) {
    text-align: center;
    float: none;
}

.highlight-row {
    background: rgba(0, 167, 225, 0.15) !important;
    border-left: 3px solid #00a7e1 !important;
}

.templatetable a,
.templatetable2 a {
    color: #00a7e1;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.templatetable a:hover,
.templatetable2 a:hover {
    color: rgb(88, 196, 231);
}


/*Table3*/

.templatetable3 {
    border-collapse: collapse;
    margin: 8px 0px;
}

.templatetable3 tr {
    background: rgba(255, 255, 255, 0) !important;
}

.templatetable3 td {
    display: table-cell;
    text-align: right !important;
    float: none !important;
    margin: 0 !important;
    padding: 8px 0px !important;
}

.templatetable3 td:nth-child(even) {
    padding-left: 5px;
}


/**/

.inverttable {
    background: var(--tableOne);
}

.inverttable tr:nth-child(odd) {
    background: var(--tableTwo);
}

.inverttable tr:nth-child(even) {
    background: var(--tableOne);
}


/*flexbox*/

.menuflex2 {
    justify-content: center;
    text-align: center;
    width: 85%;
    margin: 10px auto;
    box-shadow: rgba(39, 41, 59, 0.11) 0px 2px 20px 1px;
    padding: 0;
    overflow: hidden;
    flex-direction: row;
    border-radius: 4px;
    height: 45px;
}

/* Horizontal tab strip (coalition page section switcher,
   General/Bank/Government/Diplomacy/Tax/Settings). 6 tab labels don't
   all fit one mobile screen width, so this scrolls horizontally.
   justify-content: flex-start overrides .menuflex2's centered layout
   above -- centering an overflowing flex row starts the scroll
   position mid-content, clipping both the first and last tab labels. */
.templatedivflex2.menuflex2 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-right: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Whatever tab label sits at the right edge gets hard-clipped
       mid-word as the strip scrolls (e.g. "Government" -> "GOVERNM").
       Fade it out instead of chopping it off flush against the card
       border, and add trailing space so the last tab isn't flush
       against the edge once fully scrolled into view either. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

.templatedivflex2.menuflex2 > div {
    flex-shrink: 0 !important;
    padding: 0 14px;
}

.menuflex2 div {
    cursor: pointer;
    margin: 0px;
    padding: 0;
    transition: all 0.2s ease-out;
    border-radius: 0px;
    text-transform: uppercase;
    user-select: none;
    border-collapse: collapse;
    background: var(--foregroundFive);
    position: relative;
    color: var(--colorOne);
    height: 100%;
    height: 45px;
}

.menuflex2 div h3 {
    margin: 0;
    padding: 0;
    font-size: 19px;
    letter-spacing: 0.5px;
    color: var(--colorOne);
    font-weight: 400;
    height: 20px;
    line-height: 45px;
}

.menuflex2 div:hover {
    color: var(--colorOne);
    background: var(--foregroundFour);
}

.menuflex2 a {
    cursor: pointer;
    margin: 0px;
    padding: 0;
    transition: all 0.2s ease-out;
    border-radius: 0px;
    text-transform: uppercase;
    user-select: none;
    border-collapse: collapse;
    background: var(--foregroundFive);
    position: relative;
    display: block;
    color: var(--colorOne);
    height: 100%;
    height: 45px;
}

.menuflex2 a h3 {
    margin: 0;
    padding: 0;
    font-size: 19px;
    letter-spacing: 0.5px;
    color: var(--colorOne);
    font-weight: 400;
    height: 20px;
    line-height: 45px;
}

.menuflex2 a:hover {
    color: var(--colorOne);
    background: var(--foregroundFour);
}

.menuflex2notification {
    position: relative;
    background: red;
    color: white;
    border-radius: 100%;
    font-size: 11px;
    top: -10px;
    margin-left: 0px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(39, 41, 59, 0.1) 0px 2px 4px 0px;
    text-align: center;
    padding: 3px 5.69px;
}

.notificationyellow {
    background: rgb(245, 245, 35);
    color: black;
}

.notificationicon {
    font-size: 17px !important;
    padding: 3.1px 3px;
    top: -5px;
    left: 4px;
}

.warning {
    color: red !important;
}

.redactionbutton {
    background: red;
}

.progressbarparent {
    margin: 12px auto;
    border-radius: 0px;
    width: 90%;
    background-color: var(--foreground);
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0px, rgba(0, 0, 0, 0.03) 0 12px 32px 0;
    border-radius: 4px;
    overflow: hidden;
}

.progressbarparentlight {
    background-color: var(--foregroundThree);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px 0px, rgba(0, 0, 0, 0.03) 0 12px 32px 0;
}

.progressbarchild {
    background: #00a7e1;
    padding: 15px;
    font-size: 17px;
}

.progressbargreen {
    background: rgb(26, 196, 26);
}

.progressbarchildtext {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    width: -moz-fit-content;
    font-weight: normal;
    color: var(--colorOne);
    line-height: 30px;
}

.video {
    height: 0;
    width: 0;
}


/* Rich text and rich descriptions */

.richDescription {
    text-align: center;
}

.richDescription ul {
    margin: 10px auto;
    width: fit-content;
    padding-left: 20px;
    text-align: initial !important;
}

.richDescription a {
    color: #00a7e1;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: transparent;
    outline: none;
    font-size: inherit;
}

.richDescription a:hover {
    color: rgb(88, 196, 231);
}

.richDescription hr {
    border: none;
    border-bottom: solid 3px var(--foregroundThree);
    animation: borderpulse 4s infinite;
}

.richDescription img {
    margin: auto;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.rich-video {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 14px auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rich-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.editor-toolbar {
    margin-top: 5px !important;
    padding: 0 !important;
}

.CodeMirror {
    padding: initial !important;
    margin: initial !important;
}

.CodeMirror div {
    padding: initial !important;
    margin: initial !important;
}

.CodeMirror-scroll {
    border: 5px solid transparent;
}


/*LANDING PAGE*/

.landingpagediv {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent;
    overflow: visible;
}

body:has(.landingpagediv) .templatecontainer {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    max-width: none;
    background: transparent;
    overflow: visible;
}

body:has(.landingpagediv) .landingpagediv.templatediv {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0 !important;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.landingtopper {
    min-height: calc(100vh - 110px);
    align-items: center;
    background: transparent;
    margin: 0;
    padding: 0;
}

.landingparent {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: visible;
    margin: 0;
    background-color: transparent;
    height: max-content;
    box-shadow: none;
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("images/coalition.jpg?v=2");
    min-height: calc(100vh - 55px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: none;
    padding-top: 55px;
    box-sizing: border-box;
}

@media all and (max-width: 800px) {
    .landingparent {
        flex-direction: column;
    }
}

.landingchild {
    width: 90%;
    padding: 0px 5%;
    margin: 0;
}

@media all and (max-width: 800px) {
    .landingchild {
        text-align: center;
    }
}

.landingchildleft {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    height: fit-content;
    margin: auto;
    position: relative;
}

.landingheader {
    font-size: 48px;
    color: white;
    border-radius: 45px;
    margin-bottom: 40px;
    margin-top: 75px;
    font-weight: 700;
    text-align: center;
}

.landingblueheader {
    color: #00a7e1;
    animation: templatedivcontentload 2s !important;
    position: relative;
    top: 0;
}

.landingwhiteheader {
    animation: templatedivcontentload 2.4s;
    position: relative;
    top: 0;
}

.landingcontent {
    color: var(--colorOne);
    margin: 30px auto;
    font-size: 18px;
    line-height: 25px;
    color: white;
    width: 50%;
    line-height: 35px;
    font-weight: 350;
    animation: templatedivcontentload 1.25s;
    position: relative;
    top: 0;
}

@media all and (max-width: 600px) {
    .landingcontent {
        width: 90%;
    }
}

.landingchildcontainerparent {
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    justify-content: center;
    margin: 30px auto;
    margin-bottom: 20px;
    vertical-align: bottom;
    flex-wrap: wrap;
    top: 0;
    position: static;
}

.landingchildcontainerchild {
    width: fit-content;
    width: -moz-fit-content;
    margin: 10px;
}

.landingbutton {
    padding: 8px 50px;
    font-size: 20px;
    box-shadow: inset rgba(39, 41, 59, 0.0) 0px 0px 0px 0px, rgba(39, 41, 59, 0.25) 0px 2px 5px 0px;
    background-color: #00a7e1;
}

.landingloginbutton {
    background: transparent;
    border: 2px solid #00a7e1;
}

.landingloginbutton:hover {
    box-shadow: inset rgba(39, 41, 59, 0) 0px 0px 150px 2px, rgba(0, 0, 0, 0.15) 0 4px 10px 0;
    background: #00a7e1;
}

.landingloginbutton:focus {
    box-shadow: inset rgba(39, 41, 59, 0.5) 0px 0px 150px 2px, rgba(0, 0, 0, 0.15) 0 8px 16px 0;
    background: #00a7e1;
}

.landingunitimage {
    width: 80%;
    max-height: 425px;
    box-shadow: 0 20px 50px 10px rgba(39, 41, 59, 0.2);
    user-select: none;
    object-fit: cover;
    position: relative;
    z-index: 0;
    top: 0;
    outline: none;
    border-radius: 4px;
    animation-duration: 1.5s;
}

.discordlink {
    width: 65%;
    border: none;
    display: block;
    margin: 10px auto;
    height: 450px;
    position: relative;
    top: -5px;
    transition: all 0.3s;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 32px 2px, #00a9e140 0px 8px 0px 0px;
}

.discordlink:hover {
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
}

@media all and (max-width: 600px) {
    .discordlink {
        width: 85%;
    }
}

.cardcontainer {
    width: 90%;
    margin: auto;
}

.cardparent {
    margin: 0;
    padding: 0px;
    position: relative;
    top: 0px;
    transition: all 0.3s;
}

.cardparent1 {
    animation-delay: 0.3s;
    animation-duration: 1.5s;
}

.cardparent2 {
    animation-delay: 0.6s;
    animation-duration: 1.5s;
    padding: 0 50px;
}

.cardparent3 {
    animation-delay: 0.9s;
    animation-duration: 1.5s;
}

@media all and (max-width: 1055px) {
    .cardparent {
        width: 50%;
        margin: 50px auto;
    }
}

@media all and (max-width: 600px) {
    .cardparent {
        width: 90%;
        margin: 50px auto;
    }
}

.cardcontainer:hover .cardparent {
    opacity: 0.4;
    transition: all 0.6s;
}

@media all and (max-width: 1055px) {
    .cardcontainer:hover .cardparent {
        opacity: 1;
        transition: all 0.3s;
        cursor: default;
    }
}

.cardparent:hover {
    opacity: 1 !important;
}

.cardparent:hover .cardimage {
    box-shadow: rgba(0, 0, 0, 0.322) 0 18px 48px 0, rgba(0, 0, 0, 0.2) 0 4px 12px 2px;
}

.cardtitle {
    margin: 0;
    top: -113.5px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    width: 100%;
    color: white;
    font-size: 30px;
    cursor: default;
    user-select: none;
}

.cardimage {
    width: 100%;
    height: 275px;
    user-select: none;
    object-fit: cover;
    position: relative;
    z-index: 0;
    top: 0;
    transition: all 0.4s ease-in-out;
    animation: templatedivcontentload 1.25s;
    outline: none;
    filter: brightness(75%);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 8px 24px 0;
}

.cardcontent {
    padding: 0 15px;
    margin-top: -24px;
}

.landingcontactdiv {
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    border-radius: 4px;
}

@media all and (max-width: 600px) {
    .landingcontactdiv {
        width: calc(90% - 40px);
        margin: 50px auto;
    }
}

.landingpagecontent {
    width: 70%;
    margin: auto;
}

.getStartedContainer {
    background: var(--foregroundEight);
    padding: 60px 0;
    margin: 15px 0;
}

.getStartedContainer .templatedivbutton {
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
}


/*LOGINSIGNUP*/

.loginsignupdiv {
    left: 0;
    right: 0;
    height: min-content;
    width: min(900px, 92%);
}

@media all and (max-width: 750px) {
    .loginsignupdiv {
        width: 90%;
    }
}

.slidecontainer {
    width: 75%;
    margin: 20px auto;
}

@media all and (max-width: 600px) {
    .slidecontainer {
        width: 90%;
    }
}

.slideparent {
    display: none;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 0.6s;
}

.slide1 {
    display: block;
}

.slidechild {
    position: relative;
}

.slidebottom {
    margin: 40px 0;
}

.slideimage {
    width: 100%;
    height: 500px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.125) 0 3px 4px 1px, rgba(0, 0, 0, 0.2) 0 12px 32px 0;
    position: relative;
    object-fit: cover;
    right: 0;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 0.6s;
}

.listcontainer {
    margin: auto;
    width: fit-content;
    width: -moz-fit-content;
}

.slidelist {
    display: flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 17px;
    color: var(--colorOne);
}

.arrowright {
    right: 0;
}

.arrowleft {
    left: 0;
}

.arrowparent {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 20px;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    transition: 0.3s;
    border-radius: 100%;
    background: #42444e;
    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 4px 1px;
    user-select: none;
}

.arrowparent:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 4px 1px, rgba(0, 0, 0, 0.075) 0 12px 12px, inset rgba(214, 214, 214, 0.3) 0 0 10000px 0;
}

.arrowchild {
    font-size: 20px;
    line-height: 50px;
}

.loginsignupinput {
    padding: 12px 14px;
    outline: none;
    font-size: 15px;
    transition: all 0.2s ease;
    display: block;
    margin: 8px auto;
    background: var(--foreground);
    border: 1.5px solid var(--border);
    color: var(--colorOne);
    float: none;
    border-radius: 8px;
    line-height: normal;
    font-weight: 400;
    box-sizing: border-box;
}

.loginsignupinput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.15);
}

.loginsignupinput::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.loginsignupbutton {
    float: right;
    margin: 10px;
    margin-bottom: -15px;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 14px;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    outline: none;
    text-align: center;
}

.loginsignupforgot {
    color: var(--accent);
    padding: 2px;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
}

.loginsignupforgot:hover {
    color: var(--accent-hover);
}

.login,
.signup {
    position: absolute;
    top: 5px;
    left: 5px;
}

.signup {
    top: -4px;
}

.forgotpasscode {
    display: block;
    text-align: center;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
}

.loginsignuplink {
    padding: 18px;
    width: 50%;
    font-size: 25px;
    display: block;
    margin: 15px auto;
}


/*COUNTRY*/

/* Country banner: flex layout with bounded height. The old float + raw-vw
   sizing let tall flags crop their artwork (object-fit: cover) and behave
   unpredictably across viewports; contain + letterbox never crops. */
/* Country banner: a wide biome backdrop with the nation flag as a small
   framed badge tucked into the top-left (inset from the edge), and the
   coalition flag mirrored top-right. */
.countryimagediv {
    position: relative;
    padding: 0;
    margin: 15px auto;
    display: block;
    width: 95%;
    height: clamp(150px, 20vw, 240px);
    overflow: hidden;
    background-image: url("images/tundra.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    user-select: none;
    border-radius: 8px;
    transition: none;
}

.countryimage {
    position: absolute;
    top: 16px;
    left: 16px;
    width: auto;
    height: clamp(84px, 11vw, 132px);
    max-width: 40%;
    object-fit: cover;
    background: rgba(10, 16, 26, 0.35);
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    user-select: initial;
}

.countrycoalitionimage {
    position: absolute;
    top: 16px;
    right: 16px;
    width: auto;
    height: clamp(84px, 11vw, 132px);
    max-width: 40%;
    object-fit: cover;
    background: rgba(10, 16, 26, 0.35);
    border: 3px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    user-select: initial;
}

.countryanthem {
    width: 16vw;
    height: 9vw;
}

.view img {
    display: initial !important;
}

.view,
.revenue,
.news,
.actions,
.edit {
    display: none;
}

.viewclick,
.revenueclick,
.newsclick,
.actionsclick,
.editclick {
    display: initial;
}

.countryviewclick,
.countryrevenueclick,
.countrynewsclick,
.countryactionsclick,
.countryeditclick {
    background: #00a7e1 !important;
}

.countryviewclick h3,
.countryrevenueclick h3,
.countrynewsclick h3,
.countryactionsclick h3,
.countryeditclick h3 {
    color: var(--colorTwo) !important;
}


/*PROVINCE*/

.notificationparent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media all and (max-width: 600px) {
    .notificationparent {
        flex-direction: column;
    }
}

.notificationchild {
    margin: 8px;
    line-height: 30px;
}

.notificationchildleft,
.notificationchildright {
    padding: 6px 20px !important;
    border-radius: 8px;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    transition: all 0.2s ease;
}

.notificationchildleft {
    background: var(--success);
}

.notificationchildright {
    background: var(--danger);
}

.provinceimage {
    margin-top: -15px;
    width: 100%;
    height: 20vh;
    background: var(--foregroundThree);
}

.city,
.land {
    display: none;
}

.cityclick,
.landclick {
    display: initial;
}

.provincecityclick,
.provincelandclick {
    background: #00a7e1 !important;
    color: white !important;
}

.provincecityclick h3,
.provincelandclick h3 {
    color: var(--colorTwo) !important;
}

.electricity,
.retail,
.works {
    display: none;
}

.electricityclick,
.retailclick,
.worksclick {
    display: initial;
}

.cityelectricityclick,
.cityretailclick,
.cityworksclick {
    background: #00a7e1 !important;
    color: white !important;
}

.cityelectricityclick h3,
.cityretailclick h3,
.cityworksclick h3 {
    color: var(--colorTwo) !important;
}

.military,
.industry,
.processing {
    display: none;
}

.militaryclick,
.industryclick,
.processingclick {
    display: initial;
}

.landmilitaryclick,
.landindustryclick,
.landprocessingclick {
    background: #00a7e1 !important;
    color: white !important;
}

.landmilitaryclick h3,
.landindustryclick h3,
.landprocessingclick h3 {
    color: var(--colorTwo) !important;
}

.provincesettingsbuttonshow {
    box-shadow: inset rgba(39, 41, 59, 0.5) 0px 0px 150px 2px, rgba(0, 0, 0, 0.15) 0 8px 16px 0;
}

.provincesettingsparent {
    opacity: 0;
    pointer-events: none;
    height: 0;
    transition: all 0s;
    position: relative;
    top: -25px;
}

.provincesettingsparentshow {
    top: 0;
    opacity: 1;
    pointer-events: all;
    height: auto;
    transition: all 0.3s;
}

.tooltipparent {
    position: relative;
    font-weight: initial;
    cursor: default;
    padding: 8px 0;
}

.tooltip {
    position: absolute;
    top: -60px;
    transform: translateY(-60%);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--foregroundTwo);
    color: var(--colorOne);
    max-width: 300px;
    width: max-content;
    transition: all 0.3s;
    pointer-events: none;
    opacity: 0;
}

.tooltipparent:hover .tooltip,
.tooltipparent:focus .tooltip {
    opacity: 1;
    top: -40px;
    transform: translateY(-60%);
    box-shadow: rgb(0 0 0 / 10%) 0 4px 22px 2px, rgb(0 0 0 / 6%) 0 4px 12px;
}

.tooltipparent:focus .tooltip {
    pointer-events: all;
}

.tooltipparent {
    outline: none;
}


/*MILITARY*/

.menuflex {
    align-items: center;
    justify-content: center;
}

.menuflex p {
    text-align: left;
}

.menuflex div {
    text-align: center;
}

.smallimage {
    height: max-content;
    align-items: center;
    margin: auto;
    margin: 60px 0;
}

.smallimage img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
    height: 297px;
}

@media all and (max-width: 750px) {
    .smallimage {
        display: none !important;
        height: 0;
        width: 0;
        padding: 0;
    }
    .smallimage img {
        display: none;
        height: 0;
        width: 0;
    }
}

.unitimage {
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 425px;
    box-shadow: 0 20px 50px 10px rgba(39, 41, 59, 0.2);
    user-select: none;
    object-fit: cover;
    position: relative;
    z-index: 0;
    top: 0;
    outline: none;
    border-radius: 4px;
    transition: all 0.3s;
    animation: templatedivcontentload 1.25s;
}

.purchasemilitarydiv {
    height: min-content;
}

.land,
.air,
.water,
.special {
    display: none;
}

.landclick,
.airclick,
.waterclick,
.specialclick {
    display: initial;
}

.militarylandclick,
.militaryairclick,
.militarywaterclick,
.militaryspecialclick {
    background: #00a7e1 !important;
    color: white !important;
}

.militarylandclick h3,
.militaryairclick h3,
.militarywaterclick h3,
.militaryspecialclick h3 {
    color: var(--colorTwo) !important;
}


/*Coalitions*/

.recruitmentlabel {
    line-height: 60.8px;
    height: 60.8px;
    margin: 0;
}


/*create_coalition*/

.coalitionimagepreview {
    margin: auto;
    text-align: center;
    justify-content: center;
    text-align: center;
    padding: 0 !important;
}

.coalitionimagepreview image {
    margin: auto;
}


/*WARS*/

.warflexparent {
    background: var(--foreground);
    border: 1.5px solid var(--border);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    width: 95%;
    margin: 12px auto;
    position: relative !important;
    border-radius: 4px;
    padding: 8px 0;
}

.warflexparent:hover {
    box-shadow: rgba(0, 0, 0, 0.10) 0px 6px 16px 0.5px;
}

.warflexparent image:hover {
    transform: scale(1);
}

.warflexparent img {
    height: 200px;
}

.warflexlink {
    position: absolute;
    display: block;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.borderbottom {
    flex-direction: row;
}

.borderbottom div {
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 3px 0px, rgba(39, 41, 59, 0.15) 0px 2px 5px 0px;
    background: #00a7e1;
    transition: all 0.3s;
    transform: scale(0.995);
    margin: 12px !important;
}

@media all and (max-width: 1055px) {
    .borderbottom div {
        margin-left: auto;
        margin-right: auto;
    }
}

.borderbottom div:hover {
    transform: scale(0.985);
}

.borderbottom div h2 {
    color: rgb(255, 255, 255) !important;
}


/*Coalition info 2x2 grid*/
.coalition-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;
    margin: 10px 0 20px;
}
.coalition-info-card {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    min-height: 200px;
}
.coalition-info-table {
    width: 100% !important;
    margin: 0 !important;
    flex: 1;
    height: 100%;
}
@media all and (max-width: 768px) {
    .coalition-info-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

/*Coalition*/

.general,
.join,
.bank,
.government,
.diplomacy,
.tax,
.settings {
    display: none;
}

.generalclick,
.joinclick,
.bankclick,
.governmentclick,
.diplomacyclick,
.taxclick,
.settingsclick {
    display: initial;
}

.coalitiongeneralclick,
.coalitionjoinclick,
.coalitionbankclick,
.coalitiongovclick,
.coalitiondiplomacyclick,
.coalitiontaxclick,
.coalitionsettingsclick {
    background: #00a7e1 !important;
    color: white !important;
}

.coalitiongeneralclick h3,
.coalitionjoinclick h3,
.coalitionbankclick h3,
.coalitiongovclick h3,
.coalitiondiplomacyclick h3,
.coalitiontaxclick h3,
.coalitionsettingsclick h3 {
    color: var(--colorTwo) !important;
}

.scrolltable {
    max-height: 20vh;
    overflow: scroll;
}

/* Coalition bank contribution cards */
.contrib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 20px;
}
@media all and (max-width: 700px) {
    .contrib-grid { grid-template-columns: 1fr; }
}
.contrib-card {
    background: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.contrib-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--foreground2);
    border-bottom: 1px solid var(--border);
}
.contrib-flag {
    width: 36px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.contrib-name {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--colorOne);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contrib-name:hover { color: var(--accent); }
.contrib-resources {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contrib-res-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
}
.contrib-res-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.contrib-res-name {
    flex: 1;
    color: var(--text-secondary);
}
.contrib-res-amt {
    font-weight: 600;
    color: var(--colorOne);
}


/*DEFENSE*/

.unitcardparent {
    margin: 55px 0;
    text-align: center;
    animation: inquriesload 1s;
    justify-content: center;
    display: initial;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

@media all and (max-width: 1055px) {
    .unitcard {
        justify-content: center;
    }
}

.unitcard {
    float: left;
    margin: 10px;
    border-radius: 8px;
    align-self: stretch;
    top: -5px;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px 1px, #00a9e140 0px 8px 0px 0px;
    transition: all 0.3s ease-in-out;
    background: var(--tableTwo);
    cursor: pointer;
    opacity: 1;
    user-select: none;
    width: 350px;
    height: 350px;
}

.unitcard img {
    pointer-events: none;
}

.unitcard:hover {
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
}

.unitcard:focus {
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
}

.unitcardcheck {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    width: 100%;
    background: #00a9e1;
    color: white;
    padding: 8px 0;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -2px 8px 0;
    opacity: 0;
    user-select: none;
    transition: bottom 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
    font-size: 1.2rem;
}

.unitcard input[type=checkbox]:checked~.unitcardcheck {
    opacity: 1;
    bottom: 0;
    transition: bottom 0.25s ease, opacity 0.2s ease;
}


/*UPGRADES*/

.economic,
.military {
    display: none;
}

.economicclick,
.militaryclick {
    display: initial;
}

.upgradeseconomicclick,
.upgradesmilitaryclick {
    background: #00a7e1 !important;
    color: white !important;
}

.upgradeseconomicclick h3,
.upgradesmilitaryclick h3 {
    color: var(--colorTwo) !important;
}


/*POlICIES*/

.policyHeader {
    text-align: center;
    font-weight: 500;
}

.radiodivContentShow {
    opacity: 0.7;
}


/*TUTORIAL*/

.tutorialdiv {
    position: relative;
    overflow: hidden;
}

.tutorialiframe {
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.125) 0 3px 4px 1px, rgba(0, 0, 0, 0.2) 0 12px 32px 0;
    width: 480px;
    height: 270px;
}

@media all and (max-width: 700px) {
    .tutorialiframe {
        width: 320px;
        height: 180px;
    }
}

.checkmarkparent {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: min-content;
    width: min-content;
    padding: 50px;
    background: #00a7e1;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.2) 0 4px 12px 0, rgba(0, 0, 0, 0.2) 0 0 0 10000px;
    width: 80%;
    padding: 6px 0;
    color: white;
    opacity: 0;
    pointer-events: none;
}

.tutorialdivactive {
    pointer-events: none;
}

.tutorialdivactive .templatedivflex2left {
    opacity: 0.5;
    animation-duration: 1.5s;
}

.tutorialdivactive .checkmarkparent {
    opacity: 1;
}


.tutorialfooter {
    margin-top: 30px;
    padding: 20px;
    background: rgba(0, 167, 225, 0.1);
    border-radius: 8px;
    border-left: 4px solid #00a7e1;
    text-align: center;
}

.tutorialfooter .templatelink {
    color: #00a7e1;
    text-decoration: none;
    font-weight: bold;
}

.tutorialfooter .templatelink:hover {
    text-decoration: underline;
}

/*ERROR*/

.errordiv {
    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 4px 0px, rgba(0, 0, 0, 0.1) 0 12px 32px 0;
}


/* Small, muted label used for projected revenue values */
.muted {
    color: inherit; /* keep color consistent with theme */
    opacity: 0.7; /* visually subtle */
    font-size: 0.85em; /* slightly smaller */
    margin-left: 6px;
    vertical-align: middle;
    cursor: help; /* hint that a tooltip is available */
}

/*FOOTER*/

footer {
    padding: 2rem 2rem 2rem 2rem;
    background: var(--foregroundSeven);
    color: var(--colorOne);
}

.footerchild {
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    text-align: left;
}

.footer-sitemap {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.9rem;
}

.footer-sitemap a {
    color: var(--colorOne);
    text-decoration: none;
    opacity: 0.85;
}

.footer-sitemap a:hover {
    opacity: 1;
    text-decoration: underline;
}

.referral-invite-banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: rgba(76, 175, 80, 0.15);
    border-left: 3px solid #4caf50;
    border-radius: 4px;
}

.referral-panel .referral-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0.75rem 0;
}

.referral-link-input {
    flex: 1 1 280px;
    min-width: 0;
}

.referral-code-line code {
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.referral-subheader {
    margin-top: 1.25rem;
    font-size: 1rem;
}

.referral-milestone-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.55;
}

.referral-pending-tag {
    opacity: 0.75;
    font-size: 0.85em;
}

.footertitle {
    width: 100%;
    float: none;
    text-align: left;
    margin: 0;
    color: var(--colorOne);
    font-weight: normal;
    cursor: default;
    height: auto;
    display: flex;
    align-items: center;
}

.footertitle:hover {
    color: var(--colorOne);
}

.footertitleicon {
    float: none;
    margin: 0;
    margin-right: 10px;
}

.footericon {
    padding: 10px;
    transition: all 0.6s ease;
}

.footericon:hover {
    transform: rotate(360deg) scale(1.2);
    filter: brightness(75%);
}

.discordicon {
    color: #7289da;
}

.forumicon {
    color: #00a7e1;
}

.twittericon {
    color: rgba(29, 161, 242, 1.00);
}

.youtubeicon {
    color: #ff0000;
}

.redditicon {
    color: rgb(255, 69, 0);
}

/* Trade Agreements button styles */
.successbutton {
    background: rgb(26, 196, 26) !important;
}

.successbutton:hover {
    background: rgb(20, 160, 20) !important;
}

.dangerbutton {
    background: #dc3545 !important;
}

.dangerbutton:hover {
    background: #c82333 !important;
}

.warningtext {
    color: #ffc107;
}

.successtext {
    color: rgb(26, 196, 26);
}

.templatecenteredcontent {
    text-align: center;
    padding: 40px;
    color: #888;
}
/* ============================================
   LAYOUT CONSISTENCY FIXES
   ============================================ */

/* Consistent form grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.form-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media all and (max-width: 600px) {
    .form-grid,
    .form-grid.cols-3,
    .form-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

/* Make inputs and selects same size when in flex containers */
.infodiv .templatedivflex2left,
.infodiv .templatedivflex2right {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    padding: 4px;
    margin: 4px;
}

.infodiv .loginsignupinput,
.infodiv .templateselect {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
}

/* Ensure consistent flex child sizing */
.templatedivflex2left,
.templatedivflex2right {
    box-sizing: border-box;
}

/* Two-column content alignment fix */
.templatedivcontent .templatedivflex2 {
    align-items: flex-start;
}

/* Fix revenue page alignment */
.revenue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

@media all and (max-width: 800px) {
    .revenue-grid {
        grid-template-columns: 1fr;
    }
}

/* Consistent table in two-column layout */
.templatedivflex2left .infotable,
.templatedivflex2right .infotable {
    width: 100%;
}

/* Fix for uneven padding in flex children */
.templatedivflex2 > div {
    box-sizing: border-box;
}

/* Ensure buttons in flex containers align properly */
.templatedivflex2 .templatedivbutton {
    white-space: nowrap;
}

/* Equal-height card rows — framework-proof utility class.
   Forces side-by-side columns to stretch to equal height
   and pushes bottom content (tables, lists) to align horizontally.
   !important beats .templatedivcontent .templatedivflex2{flex-start} */
.templatedivflex2.card-align-row {
    align-items: stretch !important;
}

.card-align-row > .templatedivflex2left,
.card-align-row > .templatedivflex2right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Push tables/lists/divs to the bottom for perfect alignment, regardless of siblings.
   Covers: tables, lists, and div wrappers around them. !important ensures this
   overrides any margin applied to .templatetable (margin: 4px auto) */
.card-align-row .templatedivflex2left > .templatetable,
.card-align-row .templatedivflex2right > .templatetable,
.card-align-row .templatedivflex2left > table,
.card-align-row .templatedivflex2right > table,
.card-align-row .templatedivflex2left > ul,
.card-align-row .templatedivflex2right > ul,
.card-align-row .templatedivflex2left > div:last-child,
.card-align-row .templatedivflex2right > div:last-child {
    margin-top: auto !important;
}

/* Mobile fix: force country-profile stat blocks to stack vertically
   on phones so they don't squeeze side-by-side.  The existing 1055px
   breakpoint already sets flex-direction:column on .templatedivflex2,
   but height:100% on children and min-width:0 can still let them
   appear squished in narrower viewports.  This rule tightens things
   for phone-sized screens. */
@media all and (max-width: 768px) {
    .templatedivflex2.card-align-row {
        flex-direction: column !important;
    }
    .card-align-row > .templatedivflex2left,
    .card-align-row > .templatedivflex2right {
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
        flex: none !important;
    }
}

/* ============================================
   UTILITY CLASSES (reduce inline styles)
   ============================================ */

/* Margins */
.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.m-12 { margin: 12px 0 !important; }

/* Text alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Full width */
.w-full { width: 100% !important; }
.w-100 { width: 100% !important; }

/* Colors */
.text-green { color: #4CAF50 !important; }
.text-red { color: #dc3545 !important; }
.text-yellow { color: #ffc107 !important; }
.text-muted { color: #888 !important; }
.text-light { color: #ccc !important; }

/* Display */
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Vertical alignment */
.valign-middle { vertical-align: middle !important; }

/* Progress bar widths for dynamic styles */
.progressbarchild {
    transition: width 0.3s ease;
}

/* Coalition flag inline style replacement */
.col-flag-small {
    width: 24px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
    object-fit: cover;
}

/* Result count info styling (replaces inline) */
.result-info {
    text-align: center;
    margin: 10px 0;
    color: #888;
}

/* ============================================
   MODERN PAGINATION (Style #2 Design)
   ============================================ */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.pagination-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 14px 20px;
    background: var(--foreground);
    border-radius: 50px;
    border: 1px solid var(--border);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px 0;
}

/* Navigation buttons (prev/next arrows) */
.pagination-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 1px solid var(--border);
    background: var(--foreground);
    color: var(--colorOne);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-weight: bold;
}

.pagination-nav-btn:hover:not(.pagination-nav-btn-disabled) {
    background: var(--foregroundFour);
    border-color: #00a7e1;
    color: #00a7e1;
    transform: scale(1.05);
}

.pagination-nav-btn-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Page number buttons (pill shape) */
.pagination-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    background: var(--foreground);
    color: var(--colorOne);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.pagination-page-btn:hover {
    background: var(--foregroundFour);
    border-color: #00a7e1;
    color: #00a7e1;
    transform: translateY(-1px);
}

/* Active page button */
.pagination-page-btn-active {
    background-color: #00a7e1;
    color: white;
    border-color: #00a7e1;
    font-weight: bold;
    box-shadow: rgba(0, 167, 225, 0.25) 0 4px 12px 0;
}

.pagination-page-btn-active:hover {
    background-color: #0096c7;
    border-color: #0096c7;
    transform: translateY(-1px);
}

/* Ellipsis for page gaps */
.pagination-ellipsis {
    color: var(--colorOne);
    opacity: 0.6;
    font-weight: bold;
    margin: 0 2px;
}

/* Dropdown for per-page selection */
.pagination-dropdown {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--foreground);
    color: var(--colorOne);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: fit-content;
}

.pagination-dropdown:hover,
.pagination-dropdown:focus {
    border-color: #00a7e1;
    background: var(--foregroundFour);
    outline: none;
}

.pagination-dropdown option {
    background: var(--background);
    color: var(--colorOne);
}

/* Label text for "Go to page" */
.pagination-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--colorOne);
    white-space: nowrap;
}

/* Input field for "Go to page" */
.pagination-input {
    width: 70px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--foreground);
    color: var(--colorOne);
    border-radius: 20px;
    font-size: 13px;
    text-align: center;
    transition: all 0.2s ease;
}

.pagination-input:hover,
.pagination-input:focus {
    border-color: #00a7e1;
    background: var(--foregroundFour);
    outline: none;
}

.pagination-input::placeholder {
    color: var(--colorOne);
    opacity: 0.5;
}

/* Button for "Go" action */
.pagination-button {
    padding: 8px 20px;
    border: 1px solid #00a7e1;
    background: #00a7e1;
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pagination-button:hover,
.pagination-button:focus {
    background: #0088b5;
    border-color: #0088b5;
    box-shadow: rgba(0, 167, 225, 0.3) 0 4px 12px 0;
    outline: none;
}

.pagination-button:active {
    transform: scale(0.95);
}

/* Form wrapper styling */
.pagination-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile responsiveness for pagination */
@media all and (max-width: 1200px) {
    .pagination-row {
        gap: 8px;
        padding: 12px 16px;
    }

    .pagination-nav-btn,
    .pagination-page-btn {
        font-size: 12px;
        min-width: 32px;
        height: 32px;
    }
}

@media all and (max-width: 768px) {
    .pagination-container {
        margin: 20px auto;
        padding: 10px;
    }

    .pagination-row {
        flex-direction: column;
        gap: 10px;
        border-radius: 12px;
    }

    .pagination-form {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .pagination-input {
        width: 100%;
    }

    .pagination-button {
        width: 100%;
    }

    .pagination-dropdown {
        width: auto;
    }
}

@media all and (max-width: 500px) {
    .pagination-row {
        padding: 8px 12px;
    }

    .pagination-page-btn {
        padding: 0 8px;
        font-size: 11px;
    }

    .pagination-nav-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 14px;
    }
}

/* Canvas chart styling */
canvas {
    max-width: 100% !important;
    display: block !important;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 280px;
    background: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin: 16px auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Flash message container */
ul.flashes {
    list-style: none;
    padding: 0;
    margin: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

/* Combat stats box (military page) */
.combat-stats-box {
    margin: 10px 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.combat-stats-box p {
    margin: 5px 0;
}

/* Login/signup pages: transparent container, hidden footer */
html:has(.loginsignupdiv),
body:has(.loginsignupdiv) {
    background: transparent !important;
}
body:has(.loginsignupdiv) .templatecontainer {
    background: transparent !important;
}
body:has(.loginsignupdiv) .footer {
    display: none;
}

/* Login page helper classes */
.login-signup-link {
    margin-top: 20px;
}
.login-error-msg {
    color: #f44336;
    margin-top: 10px;
}

/* Verification success banner (login page) */
.verification-success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4CAF50;
    color: #4CAF50;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
}

/* === UI polish === */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--foreground);
    color: var(--colorOne);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    box-shadow: var(--shadow-card-hover);
    animation: slideInRight 0.3s ease-out;
    pointer-events: auto;
}

.toast-message {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.toast-dismiss {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.toast-dismiss:hover {
    color: var(--accent);
}

.toast-dismiss .material-icons-outlined {
    top: 0;
    right: 0;
    font-size: 20px;
}

.theme-toggle-btn {
    float: right;
    margin: 16px 16px 0 0;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    background: transparent;
    opacity: 0.8;
}

.theme-toggle-btn .material-icons-outlined {
    top: 0;
    right: 0;
    font-size: 22px;
}

.theme-toggle-btn [data-theme-toggle-icon] {
    display: block;
}

.text-muted {
    color: var(--text-secondary) !important;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    width: 90%;
    max-width: 900px;
    margin: 32px auto 48px;
    padding: 0 16px;
    box-sizing: border-box;
}

.quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--colorOne);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    min-height: 100px;
}

.quick-link-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.quick-link-card .material-icons-outlined {
    font-size: 32px !important;
    top: 0;
    right: 0;
    color: var(--accent);
}

.quick-link-card span:last-child {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.empty-state-page .empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 24px auto;
    max-width: 520px;
}

.empty-state-page .empty-state-actions .templatedivbutton {
    flex: 1 1 200px;
    max-width: 100%;
}

/* === UI utilities (phase 2) === */
.text-center { text-align: center !important; }
.text-success { color: var(--success) !important; font-weight: 600; }
.text-danger { color: var(--danger) !important; }
.text-accent { color: var(--accent) !important; font-weight: 600; }
.font-semibold { font-weight: 600; }
.font-normal-sub { font-weight: normal; opacity: 0.8; }
.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.mb-md { margin-bottom: 15px; }
.table-mt { margin-top: 10px; }
.pt-cell { padding-top: 10px; }
.chart-canvas-responsive {
    max-width: 100%;
    max-height: 450px;
    margin: 20px auto;
}
.w-full { width: 100%; }
.inline-form { display: inline; }
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px auto;
    width: 95%;
}
.stat-card {
    margin: 0;
    padding: 16px;
    text-align: center;
    background: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--game-radius-md, 12px);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-card-wide { margin: 0; grid-column: 1 / -1; text-align: center; }
.stat-value { font-size: 18px; font-weight: bold; color: var(--colorOne); }
.stat-label { display: block; margin-bottom: 8px; }
.dismiss-notification {
    color: var(--danger) !important;
    position: absolute;
    right: 2%;
    cursor: pointer;
}
.demographic-children { border-left: 4px solid rgba(54, 162, 235, 0.8); }
.demographic-children .material-icons-outlined { color: rgba(54, 162, 235, 1); }
.demographic-children td:last-child { color: rgba(54, 162, 235, 0.9); font-weight: 600; }
.demographic-working { border-left: 4px solid rgba(75, 192, 92, 0.8); }
.demographic-working .material-icons-outlined { color: rgba(75, 192, 92, 1); }
.demographic-working td:last-child { color: rgba(75, 192, 92, 0.9); font-weight: 600; }
.demographic-elderly { border-left: 4px solid rgba(220, 88, 88, 0.8); }
.demographic-elderly .material-icons-outlined { color: rgba(220, 88, 88, 1); }
.demographic-elderly td:last-child { color: rgba(220, 88, 88, 0.9); font-weight: 600; }
.pagination-bar {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
}
.pagination-bar .templatedivbutton.smallactionbutton.is-current {
    background: #444;
    pointer-events: none;
}
.th-sort-link {
    color: inherit;
    text-decoration: none;
}
.flag-thumb {
    width: 24px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
    object-fit: cover;
}
.researched-badge {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 5px auto !important;
    width: max-content !important;
    padding: 8px 32px !important;
    line-height: 27.2px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-align: center !important;
}
.researched-badge .material-icons-outlined {
    font-size: 1.3rem !important;
    vertical-align: middle;
}
.navbar-theme-toggle {
    float: right;
    margin: 10px 12px 0 0;
}

@media all and (max-width: 620px) {
    .navbarparentloginsignupdiv {
        display: none;
    }
    .navbar-theme-toggle {
        display: flex !important;
        margin-right: 8px;
    }
}

@media all and (min-width: 621px) {
    .menubara-theme-toggle {
        display: none;
    }
}

@media all and (max-width: 620px) {
    .menubara-theme-toggle {
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }
    .menubara-theme-toggle .material-icons-outlined {
        top: 5px;
        right: 5px;
    }
}

/* === UI hotfix: auth pages & forms === */
.loginsignupdiv.templatediv {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #e2e8f0;
}

.loginsignupdiv .templatedivtopper {
    background: transparent;
    border-bottom: none;
    margin-bottom: 0;
}

.loginsignupdiv .templatedivtitle {
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
}

.loginsignupdiv .templatedivcontent {
    padding: 12px 16px 24px;
    background: transparent;
}

.loginsignupdiv .templatedivcontent > p,
.loginsignupdiv .templatedivcontent > label,
.loginsignupdiv .referral-invite-banner {
    color: #e2e8f0 !important;
}

.loginsignupdiv .auth-panel p,
.loginsignupdiv .auth-panel ul,
.loginsignupdiv .auth-panel li,
.loginsignupdiv .auth-panel h2 {
    color: #1e293b !important;
    font-weight: 500;
}

.loginsignupdiv .signup-biome-copy p,
.loginsignupdiv .signup-biome-copy .signup-biome-title,
.loginsignupdiv .signup-biome-copy ul.medium,
.loginsignupdiv .signup-biome-resources .slidelist {
    color: #0f172a !important;
    font-weight: 500 !important;
}

.loginsignupdiv .signup-biome-copy p,
.loginsignupdiv .signup-biome-copy .templatecontentpleft,
.loginsignupdiv .signup-biome-copy .landingpagecontent {
    line-height: 1.55;
}

.loginsignupdiv .signup-biome-copy ul.medium {
    font-weight: 600 !important;
    margin: 0.75rem 0 0.35rem;
    list-style: none;
    padding: 0;
    text-align: center;
}

.loginsignupdiv .auth-panel .templatecontentheaderleft {
    background: #f1f5f9;
    color: #0f172a !important;
}

.theme-dark .loginsignupdiv .auth-panel p,
.theme-dark .loginsignupdiv .auth-panel ul,
.theme-dark .loginsignupdiv .auth-panel li,
.theme-dark .loginsignupdiv .auth-panel h2 {
    color: #e8edf5 !important;
}

.theme-dark .loginsignupdiv .signup-biome-copy p,
.theme-dark .loginsignupdiv .signup-biome-copy .signup-biome-title,
.theme-dark .loginsignupdiv .signup-biome-copy ul.medium,
.theme-dark .loginsignupdiv .signup-biome-resources .slidelist {
    color: #e8edf5 !important;
}

.theme-dark .loginsignupdiv .auth-panel .templatecontentheaderleft {
    background: #262b36;
    color: #e8edf5 !important;
}

.auth-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.auth-panel {
    flex: 1 1 280px;
    max-width: 420px;
    padding: 24px 20px;
    background: var(--foregroundTwo);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
}

.loginsignupdiv .auth-panel {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.theme-dark .loginsignupdiv .auth-panel {
    background: #1c2029;
    border-color: var(--border);
}

.loginsignupdiv .auth-note {
    color: #475569 !important;
    text-align: center;
    font-size: 0.85rem;
    margin-top: -10px;
    margin-bottom: 20px;
}

.auth-panel .templatecontentheadercenter,
.auth-panel h2.templatecontentheadercenter {
    margin-top: 0;
    color: var(--colorOne);
}

.loginsignupdiv .auth-panel .templatecontentheadercenter,
.loginsignupdiv .auth-panel h2.templatecontentheadercenter {
    color: #0f172a !important;
}

.theme-dark .loginsignupdiv .auth-panel .templatecontentheadercenter,
.theme-dark .loginsignupdiv .auth-panel h2.templatecontentheadercenter {
    color: #e8edf5 !important;
}

.auth-panel .loginsignupinput {
    width: 100%;
    max-width: 100%;
}

.auth-row-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 16px;
}

.auth-panel .templatedivbutton {
    margin: 16px auto 8px;
}

.auth-panel-wide {
    flex: 1 1 100%;
    max-width: 100%;
}

.auth-panel-wide .slidecontainer {
    width: 90%;
}

.trade-agreement-form {
    max-width: 720px;
    margin: 20px auto;
    padding: 24px;
}

.trade-agreement-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
}

@media all and (max-width: 700px) {
    .trade-agreement-form .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.trade-agreement-form .form-field {
    width: 100%;
    min-width: 0;
}

.trade-agreement-form .form-label {
    display: block;
    text-align: left;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colorOne);
    width: 100%;
}

.trade-agreement-form .templateselect,
.trade-agreement-form .loginsignupinput {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.trade-agreement-form .form-actions {
    text-align: center;
    margin-top: 8px;
}

.trade-agreement-form .templatedivbutton {
    margin: 8px auto;
}

/* Override broken divflex2center sizing inside structured forms */
.trade-agreement-form .form-grid-2 .templatedivflex2left,
.trade-agreement-form .form-grid-2 .templatedivflex2right,
.auth-columns .templatedivflex2left,
.auth-columns .templatedivflex2right {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Tutorial page — escape default white templatediv card */
html.page-tutorial .tutorial-academy.templatediv {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.page-tutorial .templatecontainer {
    width: min(1280px, 96%) !important;
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
}

html.page-tutorial .resourcediv,
html.page-tutorial .resourcedivcontent {
    display: none !important;
}

/* === GAME UI BUNDLE (auto-generated) === */

/* --- static/css/tokens.css --- */
/**
 * Game UI design tokens — canonical source for color/spacing/radius tokens
 * (relocated from static/style.css's hand-written .theme-light/.theme-dark
 * blocks, which previously lived above the auto-generated bundle marker).
 */
.theme-light {
    --background: #eef1f5;
    --foreground: #ffffff;
    --foregroundTwo: #f8f9fc;
    --foregroundThree: #f0f2f7;
    --foregroundFour: #e8ecf3;
    --foregroundFive: #f4f6fa;
    --foregroundSix: #f0f2f7;
    --foregroundSeven: #e8ecf3;
    --foregroundEight: #e3e8f0;
    --border: #d0d7e2;
    --tableOne: #f4f6fa;
    --tableTwo: #ffffff;
    --colorOne: #1a2332;
    --colorTwo: #ffffff;
    --accent: #00a7e1;
    --accent-hover: #0090c4;
    --accent-subtle: #e6f6fc;
    --gold: #d4a843;
    --success: #2d9f6f;
    --danger: #d35649;
    --text-secondary: #5c6b7f;
    --shadow-card: 0 2px 12px rgba(26, 35, 50, 0.08);
    --shadow-card-hover: 0 4px 20px rgba(26, 35, 50, 0.12);
}

.theme-dark {
    --background: #13171e;
    --foreground: #1c2029;
    --foregroundTwo: #212630;
    --foregroundThree: #262b36;
    --foregroundFour: #2a3040;
    --foregroundFive: #1e2330;
    --foregroundSix: #262b36;
    --foregroundSeven: #1a1e28;
    --foregroundEight: #1c2029;
    --border: #2a3040;
    --tableOne: #1c2029;
    --tableTwo: #212630;
    --colorOne: #e0e4ea;
    --colorTwo: #ffffff;
    --accent: #00a7e1;
    --accent-hover: #33b8e8;
    --accent-subtle: #0a2a3a;
    --gold: #e0b84d;
    --success: #3ab87e;
    --danger: #e05a4d;
    --text-secondary: #8b95a5;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
}

:root {
    --game-radius-sm: 8px;
    --game-radius-md: 12px;
    --game-radius-lg: 16px;
    --game-radius-xl: 24px;
    --game-space-xs: 4px;
    --game-space-sm: 8px;
    --game-space-md: 16px;
    --game-space-lg: 24px;
    --game-space-xl: 32px;
    --game-font-display: "Roboto", system-ui, sans-serif;
    --game-panel-bg: var(--foreground);
    --game-panel-border: var(--border);
    --game-hud-height: 52px;
    --game-navbar-height: 55px;
    --game-bottom-nav-height: 0px;
    --game-safe-bottom: env(safe-area-inset-bottom, 0px);
    --game-glow-accent: 0 0 12px rgba(0, 167, 225, 0.35);
    --game-card-shadow: var(--shadow-card);
}

.theme-dark {
    --game-panel-bg: var(--foregroundTwo);
}


/* --- static/css/game-shell.css --- */
/**
 * Mobile game shell: resource HUD strip (no bottom tab bar)
 */

body.game-shell-active {
    padding-bottom: var(--game-safe-bottom);
}

body.game-shell-active .footer {
    display: none;
}

body.game-shell-active .templatecontainer {
    padding-bottom: var(--game-space-md);
}

body.game-shell-active .templatediv {
    margin-top: var(--game-space-md);
}

/* Compact resource HUD (below fixed navbar) */
.game-hud {
    display: none;
    position: sticky;
    top: var(--game-navbar-height, 55px);
    z-index: 900;
    background: linear-gradient(180deg, var(--foreground) 0%, rgba(28, 32, 41, 0.92) 100%);
    border-bottom: 1px solid var(--border);
    padding: var(--game-space-sm) var(--game-space-md);
    gap: var(--game-space-sm);
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Whichever resource chip sits at the edge gets sliced mid-icon/
       mid-number as the strip scrolls. Fade it out instead of a hard
       cut, since this strip is visible on nearly every page. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--game-space-md), black calc(100% - var(--game-space-md)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--game-space-md), black calc(100% - var(--game-space-md)), transparent 100%);
}

.game-hud::-webkit-scrollbar {
    display: none;
}

body.game-shell-active .game-hud {
    display: flex;
}

.game-hud-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Read-only status display, not a primary action control -- the
       44px touch-target minimum is for things you tap to DO something.
       This is tappable (opens more detail) but doesn't need a full
       button's footprint; a real single tap on a slightly-shorter chip
       is still comfortably reliable. Compare Politics & War, which
       fits 10+ resources in one strip using small icon+number pairs
       instead of full button chips -- this is the same idea, just less
       extreme so it stays easy to tap. */
    min-height: 30px;
    padding: 4px 8px;
    background: var(--foregroundThree);
    border-radius: var(--game-radius-md);
    border: 1px solid var(--border);
    flex-shrink: 0;
    /* On at least the coalition page, this chip's computed width
       balloons to ~468px (nearly the full HUD strip) even though
       nothing in the stylesheets sets a width on it and flex-grow is
       0 -- couldn't pin the exact source. Forcing it explicitly is a
       direct, verified fix regardless of the cause. */
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--colorOne);
    position: relative;
    overflow: hidden;
}

.theme-dark .game-hud-chip {
    color: var(--colorTwo);
}

.game-hud-chip img.resource,
.game-hud-chip .game-hud-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.game-hud-chip .game-hud-value {
    font-weight: 600;
    white-space: nowrap;
}

.game-hud-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, transparent 10%, rgba(255, 255, 255, 0.16) 45%, transparent 70%);
    transform: translateX(-120%);
    animation: hud-chip-glint 7.5s ease-in-out infinite;
}

.game-hud .material-icons-outlined {
    position: static;
    top: auto;
    right: auto;
}

.game-hud-expand {
    margin-left: auto;
    flex-shrink: 0;
}

/* Market mobile offer cards */
.game-market-card {
    padding: var(--game-space-md);
    border-radius: var(--game-radius-lg);
    background: var(--foregroundThree);
    border: 1px solid var(--border);
    margin-bottom: var(--game-space-sm);
    position: relative;
    overflow: hidden;
}

.game-market-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--game-space-sm);
    font-weight: 600;
}

.game-market-card-type {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 167, 225, 0.15);
    color: var(--accent);
}

.game-market-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: var(--game-space-sm);
    color: var(--text-secondary);
}

.game-market-card-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.game-market-card-form .loginsignupinput {
    flex: 1;
    min-height: 44px;
}

/* Bottom navigation */
.game-bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: calc(var(--game-bottom-nav-height) + var(--game-safe-bottom));
    padding-bottom: var(--game-safe-bottom);
    background: var(--foreground);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

body.game-shell-active .game-bottom-nav {
    display: flex;
}

.game-bottom-nav-inner {
    display: flex;
    width: 100%;
    height: var(--game-bottom-nav-height);
    align-items: stretch;
    justify-content: space-around;
}

.game-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
}

.game-nav-item .material-icons-outlined {
    font-size: 1.35rem;
}

.game-nav-item.is-active,
.game-nav-item:hover,
.game-nav-item:focus-visible {
    color: var(--accent);
}

.game-nav-item.is-active {
    text-shadow: var(--game-glow-accent);
}

/* Hide desktop dropdown nav on mobile when shell active */
@media (max-width: 857px) {
    body.game-shell-active .navbarparentloginsignupdiv {
        display: none !important;
    }

    body.game-shell-active .resourcediv {
        display: none;
    }

    body.game-shell-active .resourcedivcontent {
        display: none;
    }
}

/* More menu sheet */
.game-more-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}

.game-more-sheet.is-open {
    display: block;
    pointer-events: auto;
}

.game-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.game-more-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--foreground);
    border-radius: var(--game-radius-xl) var(--game-radius-xl) 0 0;
    padding: var(--game-space-lg) var(--game-space-md);
    padding-bottom: calc(var(--game-bottom-nav-height) + var(--game-safe-bottom) + var(--game-space-md));
}

.game-more-panel a {
    display: flex;
    align-items: center;
    gap: var(--game-space-sm);
    min-height: 48px;
    padding: var(--game-space-sm);
    color: inherit;
    text-decoration: none;
    border-radius: var(--game-radius-sm);
}

.game-more-panel a:hover {
    background: var(--foregroundThree);
}

/* Province / country cards (mobile) */
.game-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--game-space-md);
}

.game-province-card {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: var(--game-space-md);
    padding: var(--game-space-md);
    background: var(--game-panel-bg);
    border: 1px solid var(--game-panel-border);
    border-radius: var(--game-radius-lg);
    box-shadow: var(--game-card-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.game-province-card:active {
    transform: scale(0.98);
}

.game-province-card::after,
.game-market-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 86% 14%, rgba(0, 167, 225, 0.16), transparent 44%);
    opacity: 0.85;
}

body.game-reduced-motion .game-province-card,
body.game-reduced-motion .game-nav-item,
body.game-reduced-motion * {
    transition: none !important;
}

body.game-reduced-motion .game-hud-chip::after,
body.game-reduced-motion .game-province-card::after,
body.game-reduced-motion .game-market-card::after {
    animation: none !important;
    opacity: 0.45;
}

.game-province-card-stats {
    display: grid;
    gap: 4px;
    font-size: 0.9rem;
}

.game-province-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--game-space-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.game-province-card-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--game-radius-md);
    border: 2px solid var(--border);
}

@media (min-width: 858px) {
    .game-card-list--mobile-only {
        display: none;
    }
}

@media (max-width: 857px) {
    .game-table-fallback--hide-mobile {
        display: none !important;
    }
}

/* War unit cards enhancement */
.game-unit-card-grid .warflexparent {
    border-radius: var(--game-radius-md);
    overflow: hidden;
}

@keyframes hud-chip-glint {
    0%,
    70% {
        transform: translateX(-130%);
    }
    90% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Timer badge on HUD */
.game-tick-badge {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    white-space: nowrap;
}

/* Countries list map stub (no world map v1) */
.game-world-stub {
    padding: var(--game-space-lg);
    text-align: center;
    background: var(--foregroundThree);
    border-radius: var(--game-radius-lg);
    border: 1px dashed var(--border);
    margin-bottom: var(--game-space-md);
}

.game-world-stub .material-icons-outlined {
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.7;
}


/* --- static/css/game-layout.css --- */
/**
 * Global game layout alignment — content column, ads, cards, floating HUD
 */

:root {
    --page-content-max: 1200px;
    --game-breakpoint-md: 768px;
    --game-breakpoint-lg: 1024px;
}

/* --- Shared responsive panel utilities --- */
.game-stack {
    display: flex;
    flex-direction: column;
    gap: var(--game-space-md, 16px);
    width: 100%;
}

.game-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--game-space-md, 16px);
    width: 100%;
}

@media (min-width: 768px) {
    .game-panel-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.game-shell-active .infodiv {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body.game-shell-active .infodiv .templatedivflex2left,
    body.game-shell-active .infodiv .templatedivflex2right {
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .game-panel-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Content column (player ads disabled) --- */
.templatecontainer {
    margin-top: 0;
    max-width: var(--page-content-max);
    margin-left: auto;
    margin-right: auto;
}

body:not(.game-shell-active) .templatediv {
    margin-top: calc(var(--game-navbar-height, 55px) + var(--game-space-lg, 24px));
}

/* --- Content column spine --- */
body.game-shell-active .templatecontainer {
    margin-top: var(--game-navbar-height, 55px);
}

.templatedivcontent {
    padding: 0 var(--game-space-md, 16px) var(--game-space-lg, 24px);
    box-sizing: border-box;
}

.templatedivcontent > .menuflex2,
.templatedivcontent > .templatedivflex2.menuflex2,
.templatedivcontent .menuflex2.width100 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* --- Building / war / list cards --- */
.templatedivcontent .warflexparentcolors,
.templatedivcontent .warflexparent.card-align-row,
.templatedivcontent a > .warflexparent.card-align-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    border-radius: var(--game-radius-sm, 4px);
}

.templatedivcontent .warflexparentcolors.card-align-row,
.templatedivcontent .warflexparent.card-align-row {
    align-items: stretch !important;
}

.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2left,
.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2right,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2left,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2right {
    margin: 0;
    align-self: stretch;
}

.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2left,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2left {
    padding: 0 var(--game-space-md, 16px) var(--game-space-md, 16px) var(--game-space-md, 16px);
    display: flex;
    flex-direction: column;
}

.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2left > :first-child,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2left > :first-child {
    margin-top: var(--game-space-md, 16px);
}

.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2right,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2right,
.templatedivcontent .province-card-media,
.templatedivcontent .province-list-card-media {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.templatedivcontent .warflexparentcolors.card-align-row > .templatedivflex2left .templatetable,
.templatedivcontent .warflexparent.card-align-row > .templatedivflex2left .templatetable {
    margin: 0;
    width: 100%;
    flex: 1;
}

.templatedivcontent .warflexparentcolors .unitimage,
.templatedivcontent .province-card-media .unitimage,
.templatedivcontent .province-list-card-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    flex: 1;
    align-self: stretch;
}

.templatedivcontent .warflexparent.card-align-row img {
    height: auto;
}

/* --- Tab navigation --- */
.menuflex2 {
    width: 100%;
    min-height: 48px;
    height: auto;
    overflow: visible;
}

.menuflex2 div,
.menuflex2 a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: auto;
    padding: 6px 10px;
    gap: 4px;
}

.menuflex2 div h3,
.menuflex2 a h3 {
    height: auto;
    line-height: 1.2;
    font-size: 17px;
}

.menuflex2 .material-icons-outlined,
.menuflex2 .notificationicon {
    top: 0;
    right: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

.menuflex2notification {
    top: -6px;
}

/* --- Floating resource ($) panel --- */
.resourcediv,
.resourcedivcontent {
    top: calc(var(--game-navbar-height, 55px) + 12px);
}

.resourcediv .material-icons-outlined,
.resourcedivcontent .material-icons-outlined {
    top: 0;
    right: 0;
}

.resourcedivchild {
    align-items: center;
    justify-content: center;
}

.resourceicon.material-icons-outlined {
    margin-left: 0;
}

@media all and (max-width: 500px) {
    .resourcediv,
    .resourcedivcontent {
        top: calc(var(--game-navbar-height, 55px) + 8px);
        right: 8px;
    }
}

/* --- Section headers inside cards --- */
.templatedivcontent .templatecontentheaderleft {
    margin: var(--game-space-md, 16px) 0;
}

.templatedivcontent .templatetable {
    margin: var(--game-space-sm, 8px) 0;
}

/* Market filters — full-width responsive grid */
body.page-market .market-filters.game-panel-grid {
    align-items: end;
}

body.page-market .market-filters .templateselect,
body.page-market .market-filters .loginsignupinput {
    width: 100%;
    box-sizing: border-box;
}

body.page-market .market-actions.game-panel-grid--2 {
    margin-top: var(--game-space-md, 16px);
}

body.page-market .market-actions .templatedivbutton {
    width: 100%;
    box-sizing: border-box;
}

/* Country tab panels */
body.page-country .templatedivcontent .infodiv {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.page-country .country-overview-grid {
        width: 100%;
    }
}

/* --- Side ad rails (house ads + player banners) -------------------------- */
/* Desktop-only: fixed rails on the flanks. They MUST NOT appear on tablets or
   phones (some tablets report a wide layout viewport, which used to leak the
   rails full-width into the page — player-reported). Gate on both a wide
   viewport AND a fine pointer so touch devices never show them, and force-hide
   below the breakpoint as a belt-and-suspenders override. */
.side-ad-rail {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    width: 168px;
    z-index: 40;
    display: none;
}
.side-ad-rail--left { left: 14px; }
.side-ad-rail--right { right: 14px; }

@media (min-width: 1500px) and (pointer: fine) {
    .side-ad-rail { display: block; }
    body.has-side-ads .templatediv { width: calc(90% - 380px); }
}

@media (max-width: 1499px), (pointer: coarse) {
    .side-ad-rail { display: none !important; }
    body.has-side-ads .templatediv { width: 90%; }
}

.house-ad {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 290px;
    padding: 18px 16px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #23324a, #101a2b);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 28px rgba(4, 10, 22, 0.35);
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.house-ad.is-showing { opacity: 1; transform: none; }
.house-ad.is-leaving { position: absolute; inset: 0; opacity: 0; transform: translateY(-14px) scale(0.97); }

/* shine sweep — the flash in "flashy" */
.house-ad::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -80%;
    width: 42%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: rotate(12deg);
    animation: house-ad-shine 5.5s ease-in-out infinite;
}
@keyframes house-ad-shine {
    0%, 55% { left: -80%; }
    85%, 100% { left: 130%; }
}

.house-ad-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    animation: house-ad-bob 3.2s ease-in-out infinite;
}
.house-ad-icon .material-icons-outlined { font-size: 1.6rem; color: #fff; position: static; }
@keyframes house-ad-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.house-ad-title { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.house-ad-sub { font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); flex: 1; }
.house-ad-cta {
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.92);
    color: #14213d;
}
.house-ad:hover .house-ad-cta { background: #fff; }
.house-ad:hover { transform: translateY(-3px) scale(1.01); }

/* per-ad palettes */
.house-ad--invite      { background: linear-gradient(160deg, #14532d, #22c55e 130%); }
.house-ad--discord     { background: linear-gradient(160deg, #2b2f77, #5865f2 130%); }
.house-ad--coalitions  { background: linear-gradient(160deg, #713f12, #eab308 145%); }
.house-ad--market      { background: linear-gradient(160deg, #134e4a, #14b8a6 135%); }
.house-ad--wars        { background: linear-gradient(160deg, #7f1d1d, #ef4444 140%); }
.house-ad--rankings    { background: linear-gradient(160deg, #4c1d95, #a855f7 135%); }
.house-ad--mass        { background: linear-gradient(160deg, #1e3a8a, #3b82f6 135%); }
.house-ad--mechanics   { background: linear-gradient(160deg, #164e63, #06b6d4 135%); }
.house-ad--giveaways   { background: linear-gradient(160deg, #831843, #f97316 150%); }
.house-ad--advertise   { background: linear-gradient(160deg, #111827, #00a7e1 160%); }

.house-ad--player { padding: 0; min-height: 0; }
.house-ad--player img { width: 100%; display: block; border-radius: 16px; }
.house-ad--player .house-ad-playertag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .house-ad, .house-ad.is-leaving { transition: none; }
    .house-ad::after, .house-ad-icon { animation: none; }
}

/* Mobile First Enhancements (Agent) */
@media (max-width: 768px) {
    .templatetable, .templatetable2, .templatetable3 {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* Freeze the first column (row label -- name, unit, etc.) so scrolling
       a wide table horizontally never loses the thing each row is about.
       Needs an explicit opaque background since sticky cells paint over
       whatever scrolls underneath them; matched to the existing
       odd/even row striping and header/hover backgrounds so it's
       invisible as a seam, not a new visual element. */
    .templatetable th:first-child,
    .templatetable2 th:first-child,
    .templatetable3 th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .templatetable td:first-child,
    .templatetable2 td:first-child,
    .templatetable3 td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .templatetable tr:nth-child(odd) td:first-child,
    .templatetable2 tr:nth-child(odd) td:first-child,
    .templatetable3 tr:nth-child(odd) td:first-child {
        background: var(--tableOne);
    }
    .templatetable tr:nth-child(even) td:first-child,
    .templatetable2 tr:nth-child(even) td:first-child,
    .templatetable3 tr:nth-child(even) td:first-child {
        background: var(--tableTwo);
    }
    .templatetable tbody tr:hover td:first-child,
    .templatetable2 tbody tr:hover td:first-child,
    .templatetable3 tbody tr:hover td:first-child {
        background: var(--accent-subtle);
    }

    .menuflex2, .menuflex {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .loginsignupinput, .templateselect, .templatedivbutton,
    .templatedivbutton-secondary, .templatedivbutton-danger, .templatedivbutton-success {
        width: 100% !important;
        box-sizing: border-box;
        min-height: 44px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .templatedivflex2, .warflexparentcolors, .warflexparent {
        flex-direction: column !important;
    }
    
    .warflexparentcolors > div, .warflexparent > div {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .templatedivcontent img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* ============================================================
   Mobile density corrections — verified against real device
   screenshots. The broad "stack everything full-width" rules
   above stopped overflow but made nav/tab/action rows sparse and
   endlessly scrolling. These restore compact, app-like layouts.
   ============================================================ */
@media (max-width: 768px) {
    /* Header title must sit next to the logo, not overflow */
    .navbarparenttitle {
        font-size: 16px !important;
        line-height: 52px !important;
        margin-left: 0;
        white-space: nowrap;
    }
    .navbarparenttitleimage {
        height: 34px !important;
        width: 34px !important;
        margin: 10px 8px 10px 6px !important;
    }

    /* Tab bars stay a single horizontal row of equal tabs */
    .templatedivflex2.menuflex2 {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
    }
    .menuflex2 > .templatedivflex2left,
    .menuflex2 > .templatedivflex2right {
        flex: 1 1 0 !important;
        width: auto !important;
        margin: 0 !important;
        min-width: 0;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .menuflex2 .smallheader {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
        display: block;
    }
    /* When something else (e.g. body.page-province's 44px touch-target rule)
       forces .smallheader itself to display:flex, text-overflow:ellipsis on
       the flex container stops working — it only applies to block/inline
       overflow, not to a flex item's children. Wrap the label text in its
       own span so it still truncates correctly regardless of what the
       parent's display is; the notification badge stays fixed-size next
       to it instead of being squeezed. */
    .menuflex2-label-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1 1 auto;
    }
    .menuflex2 .smallheader .menuflex2notification {
        flex-shrink: 0;
    }

    /* Action-button strips become a compact 2-column grid instead of
       five giant full-width stacked blocks */
    .wars-action-strip,
    .templatedivflex2.divflex2full:has(.smallactionbutton) {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        flex-direction: row !important;
    }
    .wars-action-strip > div,
    .templatedivflex2.divflex2full:has(.smallactionbutton) > div {
        width: auto !important;
        margin: 0 !important;
    }
    .smallactionbutton {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        min-height: 44px;
        font-size: 0.84375rem !important; /* 13.5px */
        letter-spacing: 0 !important;
        border-radius: 6px !important;
        background: var(--foreground) !important;
        border: 1px solid var(--border) !important;
        color: var(--colorOne) !important;
        box-shadow: none !important;
    }
    .smallactionbutton .material-icons-outlined {
        font-size: 16px !important;
        color: var(--accent);
    }
    .smallactionbutton:hover,
    .smallactionbutton:active {
        transform: none;
        box-shadow: none;
    }

    /* Standing-military chips: a real 2-column grid (was unstyled → a
       plain tall vertical list) */
    .wars-mil-grid.game-card-list--mobile-only {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-top: 10px;
    }
    .wars-mil-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 10px;
        min-height: 44px;
        box-sizing: border-box;
        background: var(--foreground);
        border: 1px solid var(--border);
        color: var(--colorOne);
        border-radius: 6px;
        font-size: 0.875rem;
    }
    .wars-mil-chip .material-icons-outlined {
        font-size: 18px;
        color: var(--accent, #00a9e1);
        flex-shrink: 0;
    }

    /* Tighter section spacing overall for density */
    .templatedivcontent { padding: 0 12px 16px; font-size: 16px; }
}

@media (max-width: 480px) {
    /* Keep standalone buttons tappable but not enormous */
    .templatedivbutton { padding: 10px 16px !important; margin: 4px 0 !important; }
}


/* --- static/css/game-experience.css --- */
/**
 * Interactive province base — strategy-game feel (CSS art, no low-res photos).
 */

/* Reset global icon nudge inside province UI (style.css sets top/right on all icons) */
.province-base-section .material-icons-outlined,
.province-base-slot-sheet .material-icons-outlined,
.province-view-nudge .material-icons-outlined,
.province-onboarding .material-icons-outlined {
    position: static;
    top: auto;
    right: auto;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .province-dock-buildings {
        grid-template-columns: 1fr !important;
    }
    .province-base-building-row {
        min-height: 44px;
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
    }
    .province-dock-card {
        min-height: 44px;
    }
    .province-base-build-btn {
        width: 100%;
        margin-top: 8px;
    }
    .province-base-header {
        display: flex;
        flex-direction: column;
    }
    .province-base-vitals {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .province-base-toggle,
    .province-view-nudge-btn,
    .province-base-sheet-close,
    .province-dock-expand,
    .province-base-build-btn {
        min-height: 44px;
        min-width: 44px;
    }
    .province-base-arena {
        overflow: hidden;
    }
    .province-map-stage {
        max-width: 100%;
    }
}


#province-classic-view[hidden],
#province-base-view[hidden] {
    display: none !important;
}

body.province-base-view-active .provincetopper {
    display: none;
}

body.province-base-view-active .templatediv {
    margin-top: var(--game-space-md);
}

body.game-shell-active.province-base-view-active .templatediv {
    margin-top: var(--game-space-sm);
}

@media (min-width: 856px) {
    body.province-base-view-active .templatediv {
        margin-top: var(--game-space-md);
    }

    body.game-shell-active.province-base-view-active .templatediv {
        margin-top: var(--game-space-sm);
    }
}

.province-onboarding {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(0, 167, 225, 0.25), rgba(45, 159, 111, 0.15));
    border-bottom: 1px solid rgba(0, 167, 225, 0.35);
    font-size: 0.88rem;
    line-height: 1.4;
}

.province-onboarding .material-icons-outlined {
    color: var(--accent);
    flex-shrink: 0;
}

.province-map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* District zone map: canvas fills the stage; zones grow cell-by-cell. */
.province-zone-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    border-radius: 10px;
}

.province-map-paths {
    animation: path-pulse 4s ease-in-out infinite;
}

@keyframes path-pulse {
    0%, 100% { stroke-opacity: 0.15; }
    50% { stroke-opacity: 0.35; }
}

.province-base-section {
    position: relative;
    margin: 0 0 var(--game-space-lg);
    border-radius: var(--game-radius-xl);
    overflow: hidden;
    border: 2px solid rgba(0, 167, 225, 0.35);
    box-shadow:
        0 0 40px rgba(0, 167, 225, 0.12),
        0 12px 40px rgba(0, 0, 0, 0.35);
}

.province-base-title-block h2 {
    margin: 0;
}

.province-base-stats {
    display: contents;
}

.province-base-vitals {
    grid-area: vitals;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

/* The header sits on dark glass in BOTH themes, so its text must be light —
   theme text vars go dark-on-dark in light mode. */
.province-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

.province-stat-chip .material-icons-outlined {
    font-size: 0.95rem;
    color: var(--accent);
    line-height: 1;
    display: inline-flex;
}

.province-base-arena {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(58vh, 520px);
    padding: 20px 12px 24px;
    background: var(--province-biome-sky, linear-gradient(180deg, #1a3a5c, #1e5c38));
    overflow: hidden;
}

/* Square stage shared by the SVG (rings/spokes) and the DOM nodes, so the
   districts sit exactly on the spoke endpoints instead of being flung to the
   container edges by a grid. Coordinates mirror the 400x400 viewBox. */
.province-map-stage {
    position: relative;
    width: min(100%, 540px);
    aspect-ratio: 1 / 1;
}

.province-base-arena::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Layered depth: hub spotlight, halo behind the stage, edge vignette,
       a cartographic dot grid across the WHOLE arena (the vignette fades it
       toward the edges), and a low ground plane. */
    background:
        radial-gradient(circle 170px at 50% 47%, rgba(255, 255, 255, 0.10) 0%, transparent 72%),
        radial-gradient(circle 340px at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 74%),
        radial-gradient(ellipse 145% 125% at 50% 50%, transparent 50%, rgba(10, 18, 30, 0.38) 100%),
        radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px),
        radial-gradient(ellipse 130% 38% at 50% 108%, var(--province-biome-ground, #1e5c38) 0%, transparent 62%);
    background-size: auto, auto, auto, 26px 26px, auto;
    pointer-events: none;
}

.province-base-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.province-base-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    animation: province-float 8s ease-in-out infinite;
}

.province-base-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.province-base-particles span:nth-child(2) { left: 30%; top: 60%; animation-delay: 1.5s; }
.province-base-particles span:nth-child(3) { left: 70%; top: 30%; animation-delay: 3s; }
.province-base-particles span:nth-child(4) { left: 85%; top: 70%; animation-delay: 0.8s; }
.province-base-particles span:nth-child(5) { left: 50%; top: 15%; animation-delay: 2.2s; }

@keyframes province-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-12px) scale(1.2); opacity: 0.7; }
}

.province-base-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title toggle"
        "meta meta"
        "vitals vitals";
    align-items: start;
    gap: var(--game-space-sm) var(--game-space-md);
    padding: var(--game-space-md);
    background: rgba(28, 32, 41, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.province-base-title-block {
    grid-area: title;
    min-width: 0;
}

.province-base-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.province-base-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.province-base-header h2 .material-icons-outlined {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.province-base-toggle {
    grid-area: toggle;
    justify-self: end;
    align-self: start;
}

.province-vital {
    min-width: 0;
}

.province-vital-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.province-vital-label .material-icons-outlined {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.province-vital-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.province-vital-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.province-vital-fill--happy {
    background: linear-gradient(90deg, #2d9f6f, #5cd39a);
}

.province-vital-fill--pollution {
    background: linear-gradient(90deg, #8b6914, #d35649);
}

.province-vital-fill--power {
    background: linear-gradient(90deg, #00a7e1, #5cd4f0);
}

@media (min-width: 900px) {
    .province-base-header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto;
        grid-template-areas: "title meta vitals toggle";
        align-items: center;
    }

    .province-base-vitals {
        grid-template-columns: repeat(3, minmax(72px, 1fr));
    }
}

.province-base-header .province-base-toggle {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--game-radius-md);
    border: 1px solid var(--accent);
    background: rgba(0, 167, 225, 0.15);
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.15s, background 0.15s;
}

.province-base-toggle:active {
    transform: scale(0.96);
}

/* Map scenery */
/* Central capital hub — anchored by the PLATFORM so the disc sits exactly on
   the SVG landing pad; the label hangs below without shifting the center. */
.province-map-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    pointer-events: none;
}

.province-map-hub-platform {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--accent, #00a7e1), #036a92);
    border: 3px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 8px rgba(255, 255, 255, 0.12);
}

.province-map-hub-icon {
    font-size: 2rem;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    line-height: 1;
}

.province-map-hub-skyline {
    display: none;
}

.province-hub-block {
    display: block;
    width: 10px;
    height: calc(12px + var(--hub-i) * 3px);
    max-height: 36px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #7eb8f0, #3d5a7a);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    animation: hub-rise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--hub-i) * 0.04s);
}

@keyframes hub-rise {
    from { transform: scaleY(0); opacity: 0; }
}

.province-map-hub-label {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: 160px;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 1.2;
}

.province-map-hub-empty {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    translate: -50% 0;
    width: max-content;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    line-height: 1.25;
    max-width: 140px;
    animation: pulse-hint 2s ease infinite;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* District nodes — 3×4 grid (hub occupies center rows) */
.province-map-nodes {
    display: contents;
}

.province-map-node {
    --slot-gradient: linear-gradient(145deg, #333, #555);
    --slot-glow: rgba(0, 167, 225, 0.4);
    position: absolute;
    /* positioned via left/top per district; translate composes with the
       transform used by hover/pop animations. left/top transition lets pins
       drift smoothly as their zone's centroid moves during growth. */
    translate: -50% -50%;
    transition: left 0.9s ease, top 0.9s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 112px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #fff;
    font: inherit;
    text-align: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: node-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    z-index: 2;
}

.province-map-node:nth-child(1) { animation-delay: 0.05s; }
.province-map-node:nth-child(2) { animation-delay: 0.1s; }
.province-map-node:nth-child(3) { animation-delay: 0.15s; }
.province-map-node:nth-child(4) { animation-delay: 0.2s; }
.province-map-node:nth-child(5) { animation-delay: 0.25s; }
.province-map-node:nth-child(6) { animation-delay: 0.3s; }
.province-map-node:nth-child(7) { animation-delay: 0.35s; }

@keyframes node-pop {
    from { opacity: 0; transform: scale(0.7); }
}

/* Spoke-endpoint coordinates, as % of the 400x400 viewBox:
   (200,70) (90,115) (310,115) (55,205) (345,205) (115,330) (285,330) */
.province-map-node--power { left: 50%; top: 17.5%; }
.province-map-node--food { left: 22.5%; top: 28.75%; }
.province-map-node--retail { left: 77.5%; top: 28.75%; }
.province-map-node--mines { left: 13.75%; top: 51.25%; }
.province-map-node--industry { left: 86.25%; top: 51.25%; }
.province-map-node--civic { left: 28.75%; top: 82.5%; }
.province-map-node--military { left: 71.25%; top: 82.5%; }

.province-map-node:hover,
.province-map-node:focus-visible,
.province-map-node.is-selected {
    transform: translateY(-2px);
    outline: none;
    z-index: 5;
}

.province-map-node.is-selected .province-map-node-pin {
    box-shadow: 0 0 0 3px #fff, 0 0 24px var(--slot-glow);
}

.province-map-node-pin {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--slot-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 10px 28px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.province-map-node-pin::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 46%, transparent 70%);
    transform: translateX(-130%);
    animation: province-node-glint 9s ease-in-out infinite;
}

.province-map-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.province-map-node-icon .material-icons-outlined {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.province-map-node-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1c2029;
    border: 2px solid #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.province-map-node.has-buildings .province-map-node-qty {
    background: var(--slot-accent, #00a7e1);
}

.province-map-node-label {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    width: 100%;
    line-height: 1.2;
}

.province-map-node-skyline,
.province-map-node-chips {
    display: none;
}

.province-node-block {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 14px;
    height: var(--block-h, 12px);
    min-height: 8px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.35));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.province-node-block .material-icons-outlined {
    font-size: 0.65rem;
    margin-bottom: 2px;
    opacity: 0.9;
}

.province-node-block--empty {
    width: 20px;
    height: 8px;
    opacity: 0.35;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    background: transparent;
}

.province-map-node-chips {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.province-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.province-chip .material-icons-outlined {
    font-size: 0.75rem;
}

.province-map-node-cta {
    margin-top: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 167, 225, 0.45);
    animation: pulse-hint 2s ease infinite;
    white-space: nowrap;
}

.province-map-node.is-empty .province-map-node-pin {
    opacity: 0.92;
}

.province-map-node.pulse-hint .province-map-node-pin {
    animation: node-hint-pulse 1.8s ease-in-out infinite;
}

@keyframes node-hint-pulse {
    0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 255, 255, 0); }
}

.province-dock-card.is-suggested,
.province-base-building-row.is-suggested {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 167, 225, 0.35);
}

/* Inline dock (desktop / tablet) — follows the page theme; a hardcoded dark
   background here made light-theme text and cards unreadable/clashing. */
.province-dock {
    margin: 0;
    padding: var(--game-space-md);
    background: var(--game-panel-bg, var(--foregroundTwo));
    border-top: 1px solid var(--game-panel-border, var(--border));
}

.province-dock[hidden] {
    display: none !important;
}

.province-dock-header {
    display: flex;
    align-items: center;
    gap: var(--game-space-md);
    margin-bottom: var(--game-space-md);
}

.province-dock-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
}

.province-dock-icon .material-icons-outlined {
    font-size: 1.5rem;
    color: #fff;
}

.province-dock-titles h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-color);
}

.province-dock-titles p {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.province-dock-expand {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--foregroundThree);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.province-dock-buildings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.province-dock-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
    border-radius: var(--game-radius-md);
    background: var(--foregroundThree);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.province-base-building-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 82% 18%, rgba(92, 212, 240, 0.18), transparent 45%);
}

.province-dock-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.province-dock-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 167, 225, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.province-dock-card-icon .material-icons-outlined {
    font-size: 1.25rem;
    line-height: 1;
    position: static;
    top: auto;
    right: auto;
}

.province-dock-card-name {
    font-weight: 600;
    font-size: 0.88rem;
    flex: 1;
}

.province-dock-card-qty {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
}

.province-dock-hint {
    margin: var(--game-space-md) 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 720px) {
    .province-base-arena {
        min-height: 400px;
        gap: 6px 8px;
        padding: 10px 8px 14px;
    }

    .province-map-hub {
        width: 84px;
        height: 84px;
    }

    .province-map-hub-platform {
        width: 64px;
        height: 64px;
    }

    .province-map-hub-icon {
        font-size: 1.6rem;
    }

    .province-map-node {
        width: 96px;
    }

    .province-map-node-pin {
        width: 52px;
        height: 52px;
    }

    .province-map-node-icon .material-icons-outlined {
        font-size: 1.45rem;
    }

    .province-map-node-label {
        font-size: 0.7rem;
    }

    .province-map-node-cta {
        font-size: 0.6rem;
        padding: 2px 8px;
    }

    .province-dock {
        display: none !important;
    }
}

/* Interactive bottom sheet */
.province-base-slot-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    max-height: 72vh;
    pointer-events: none;
}

.province-base-slot-sheet.is-open {
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    animation: sheet-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sheet-up {
    from { transform: translateY(100%); opacity: 0; }
}

.province-base-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: -1;
}

.province-base-sheet-panel {
    margin-top: auto;
    background: var(--foreground);
    border-radius: var(--game-radius-xl) var(--game-radius-xl) 0 0;
    padding: var(--game-space-md);
    padding-bottom: calc(var(--game-safe-bottom) + var(--game-space-lg));
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(72vh, calc(100dvh - var(--game-navbar-height, 55px) - 48px));
}

.province-base-sheet-header {
    display: flex;
    align-items: center;
    gap: var(--game-space-md);
    padding-bottom: var(--game-space-md);
    border-bottom: 1px solid var(--border);
}

.province-base-sheet-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sheet-gradient, var(--accent));
    box-shadow: 0 4px 16px var(--sheet-glow, rgba(0, 167, 225, 0.3));
}

.province-base-sheet-icon .material-icons-outlined {
    font-size: 1.75rem;
    color: #fff;
}

.province-base-sheet-title {
    margin: 0;
    font-size: 1.2rem;
}

.province-base-sheet-sub {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.province-base-sheet-close {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--foregroundThree);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.province-base-building-list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    margin: var(--game-space-md) 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
}

.province-base-building-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    /* Rows live in a height-capped flex column (.province-base-building-list);
       without this they COMPRESS to fit instead of scrolling, clipping their
       text and buttons (player-reported on mobile). */
    flex-shrink: 0;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--game-radius-md);
    background: var(--foregroundThree);
    border: 1px solid var(--border);
    transition: border-color 0.15s, transform 0.15s;
    position: relative;
    overflow: hidden;
}

.province-base-building-row.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.province-base-building-row.is-success {
    border-color: var(--success);
    animation: build-flash 0.5s ease;
}

@keyframes build-flash {
    0% { background: rgba(45, 159, 111, 0.35); }
    100% { background: var(--foregroundThree); }
}

.province-base-building-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.province-base-building-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
}

.province-base-building-qty {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 36px;
    text-align: center;
    color: var(--accent);
}

.province-base-build-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 44px;
    border: none;
    border-radius: var(--game-radius-md);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.province-base-build-btn:hover {
    background: var(--accent-hover);
}

.province-base-build-btn:active {
    transform: translateY(1px);
}

/* Pin the button to the card's bottom edge so every card in a row aligns,
   regardless of how many lines the cost description wraps to. */
.province-dock-card .province-base-build-btn {
    margin-top: auto;
    width: 100%;
}

.province-base-build-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.province-base-sheet-footer {
    display: flex;
    gap: 10px;
}

.province-base-sheet-footer .templatedivbutton {
    flex: 1;
}

.province-base-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--game-safe-bottom) + 24px);
    transform: translateX(-50%) translateY(20px);
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    font-weight: 600;
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
}

.province-base-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Hide legacy phaser canvas (optional phaser mode) */
.province-base-canvas-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    display: none !important;
    touch-action: none;
}

body.province-base-phaser-active .province-base-canvas-wrap {
    display: block !important;
    min-height: 220px;
}

body.province-base-phaser-active .province-map-nodes {
    display: none;
}

#province-base-canvas {
    width: 100%;
    height: 100%;
}

body.game-reduced-motion .province-map-node,
body.game-reduced-motion .province-hub-block,
body.game-reduced-motion .province-base-particles span {
    animation: none;
}

body.game-reduced-motion .province-map-node-pin::after {
    animation: none !important;
}

/* HUD polish */
.game-hud-chip {
    transition: transform 0.15s, box-shadow 0.15s;
}

.game-hud-chip:active {
    transform: scale(0.95);
}

.game-resource-drawer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1050;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--foreground);
    border-bottom: 1px solid var(--border);
    padding: var(--game-space-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: drawer-down 0.3s ease;
}

.game-resource-drawer.is-open {
    display: block;
}

@keyframes drawer-down {
    from { transform: translateY(-100%); }
}

.province-view-nudge {
    display: flex;
    align-items: center;
    gap: var(--game-space-sm);
    margin: 0 0 var(--game-space-md);
    padding: var(--game-space-sm) var(--game-space-md);
    border-radius: var(--game-radius-md);
    background: linear-gradient(90deg, rgba(0, 167, 225, 0.2), rgba(45, 159, 111, 0.15));
    border: 1px solid rgba(0, 167, 225, 0.35);
    font-size: 0.9rem;
}

.province-view-nudge[hidden] {
    display: none !important;
}

.province-view-nudge-btn {
    background: var(--accent, #00a7e1);
    color: #fff;
    border: none;
    border-radius: var(--game-radius-sm);
    padding: 2px 10px;
    cursor: pointer;
    font-weight: 600;
}

.province-base-hint {
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 0;
}

@keyframes province-node-glint {
    0%,
    74% {
        transform: translateX(-130%);
    }
    90%,
    100% {
        transform: translateX(130%);
    }
}

.tutorial-reward-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 10050;
    max-width: min(520px, 92vw);
    padding: 12px 18px;
    border-radius: var(--game-radius-md, 12px);
    background: var(--foregroundThree, #1e2a33);
    border: 1px solid var(--success, #2d9f6f);
    color: var(--text-primary, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
    text-align: center;
    font-size: 0.92rem;
}

.tutorial-reward-toast.is-show {
    transform: translateX(-50%) translateY(0);
}

body.page-market .templatetable2 {
    table-layout: fixed;
}

body.page-market .templatetable2 td:first-child,
body.page-market .templatetable2 th:first-child {
    width: 15%;
    max-width: none;
    padding: 8px;
    font-size: inherit;
    line-height: inherit;
}

body.page-market .templatetable2 th:nth-child(1),
body.page-market .templatetable2 td:nth-child(1) {
    width: 15%;
}

body.page-market .templatetable2 th:nth-child(2),
body.page-market .templatetable2 td:nth-child(2) {
    width: 10%;
}

body.page-market .templatetable2 th:nth-child(3),
body.page-market .templatetable2 td:nth-child(3) {
    width: 18%;
}

body.page-market .templatetable2 th:nth-child(4),
body.page-market .templatetable2 td:nth-child(4) {
    width: 22%;
}

body.page-market .templatetable2 th:nth-child(5),
body.page-market .templatetable2 td:nth-child(5) {
    width: 35%;
}

body.page-market .market-purchase-cell {
    overflow: hidden;
    padding: 4px 6px;
}

body.page-market .market-purchase-flex {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

body.page-market .market-purchase-flex .templatedivflex2left {
    margin: 0;
    padding: 4px;
    flex: 0 1 auto;
}

body.page-market .market-input-wrap {
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
}

body.page-market .market-purchase-input {
    display: block;
    width: 92px;
    max-width: 100%;
    margin: 0;
    padding: 8px 24px 8px 8px;
    font-size: 14px;
    box-sizing: border-box;
}

body.page-market .market-purchase-btn {
    margin: 0;
    padding: 8px 14px;
    letter-spacing: 0.6px;
    font-size: 0.82rem;
}

body.page-market .game-market-card-form.market-purchase-form {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

body.page-market .game-market-card-form .market-purchase-input {
    flex: 1 1 auto;
    width: auto;
}

body.page-market .market-offer-hint {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: help;
    line-height: 1;
    opacity: 0.55;
    z-index: 1;
}

body.page-market .market-offer-hint .material-icons-outlined {
    font-size: 14px;
}

body.page-market .market-offer-hint:hover,
body.page-market .market-offer-hint:focus-visible {
    opacity: 1;
    color: var(--accent, #00a7e1);
    outline: none;
}

/* Rankings — equal-height side-by-side leaderboard tables */
body.page-rankings .card-align-row {
    align-items: stretch !important;
}

body.page-rankings .card-align-row > .templatedivflex2left {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
}

body.page-rankings .rankings-table {
    width: 100%;
    margin: 0 !important;
    flex: 1 1 auto;
    table-layout: fixed;
}

body.page-rankings .rankings-table tbody tr {
    height: 44px;
}

body.page-rankings .rankings-table tbody td {
    height: 44px;
    max-height: 44px;
    padding: 6px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

body.page-rankings .rankings-table tbody td:first-child {
    width: 56px;
    text-align: center;
}

body.page-rankings .rankings-table tbody td:last-child {
    width: 32%;
    text-align: right;
}

body.page-rankings .rankings-table tbody td a {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.onboarding-checklist {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: rgba(93, 173, 226, 0.12);
    border-left: 3px solid var(--accent, #5dade2);
    border-radius: 4px;
}

.onboarding-checklist-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.onboarding-checklist-steps {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.onboarding-checklist-steps li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.onboarding-checklist-steps .onboarding-done {
    opacity: 0.75;
}

.onboarding-tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.onboarding-tutorial-modal[hidden] {
    display: none;
}

.onboarding-tutorial-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 18, 0.82);
}

.onboarding-tutorial-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 28rem);
    padding: 2rem 1.5rem 1.35rem;
    border-radius: 12px;
    border: 1px solid rgba(93, 173, 226, 0.45);
    background: linear-gradient(165deg, #1a2233 0%, #121820 100%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    text-align: center;
    box-sizing: border-box;
}

.onboarding-tutorial-panel .material-icons-outlined {
    position: static;
    top: auto;
    right: auto;
    line-height: 1;
}

.onboarding-tutorial-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9aa8bc;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.onboarding-tutorial-close:hover,
.onboarding-tutorial-close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.onboarding-tutorial-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 0.75rem;
    border-radius: 50%;
    background: rgba(93, 173, 226, 0.18);
    color: var(--accent, #5dade2);
    flex-shrink: 0;
}

.onboarding-tutorial-icon .material-icons-outlined {
    font-size: 1.85rem;
}

.onboarding-tutorial-title {
    margin: 0 0 0.65rem;
    font-size: 1.35rem;
    line-height: 1.25;
}

.onboarding-tutorial-lead {
    margin: 0 0 1rem;
    color: #c5d0df;
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 22rem;
}

.onboarding-tutorial-rewards {
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    list-style: none;
    border-radius: 8px;
    background: rgba(93, 173, 226, 0.1);
    box-sizing: border-box;
}

.onboarding-tutorial-rewards li {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    align-items: center;
    gap: 0.55rem;
    margin: 0.4rem 0;
    font-size: 0.88rem;
    color: #dce6f2;
    text-align: left;
}

.onboarding-tutorial-rewards .material-icons-outlined {
    font-size: 1.1rem;
    color: var(--accent, #5dade2);
    justify-self: center;
}

.onboarding-tutorial-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
}

.onboarding-tutorial-panel .onboarding-tutorial-cta.templatedivbutton {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    top: 0;
    animation: none;
    transform: none;
}

.onboarding-tutorial-panel .onboarding-tutorial-cta.templatedivbutton:hover,
.onboarding-tutorial-panel .onboarding-tutorial-cta.templatedivbutton:active,
.onboarding-tutorial-panel .onboarding-tutorial-cta.templatedivbutton:focus {
    transform: none;
    top: 0;
}

.onboarding-tutorial-later {
    border: none;
    background: transparent;
    color: #9aa8bc;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0.35rem;
    align-self: center;
}

.onboarding-tutorial-later:hover,
.onboarding-tutorial-later:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.onboarding-tutorial-footnote {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: #7f8ea3;
    max-width: 20rem;
}

.economy-heartbeat-warn {
    color: #e67e22;
    font-weight: 600;
}

.distribution-alert {
    border-left: 3px solid #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

@media (max-width: 720px) {
    .templatetable,
    .templatetable2 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .templatetable tr {
        min-width: 520px;
    }
}

/* Immersion & Engagement Styles */
@keyframes subtleDrift {
    0% { background-position: left center; }
    100% { background-position: right center; }
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    80% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.news-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-family: monospace;
    padding: 5px 0;
    z-index: 10000;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid #333;
}

.news-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: tickerScroll 30s linear infinite;
}

@keyframes tickerScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.province-base-building-row > div:first-child {
    min-width: 0;
}

/* Market Mobile First Base Fixes */
@media (max-width: 768px) {
    body.page-market .templateoutertablediv,
    body.page-market .templatetable,
    body.page-market table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.page-market input[type="number"], 
    body.page-market input[type="text"], 
    body.page-market select, 
    body.page-market button, 
    body.page-market .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    body.page-market form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    body.page-market input, 
    body.page-market select, 
    body.page-market button, 
    body.page-market .btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    body.page-market button, 
    body.page-market .btn {
        margin-top: 8px;
    }
    
    body.page-market .market-purchase-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    body.page-market .templatedivflex2 {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    body.page-market img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body.page-market {
        font-size: 14px;
    }
}

/* Coalition Mobile First Base Fixes */
@media (max-width: 768px) {
    body.page-coalition .templateoutertablediv,
    body.page-coalition .templatetable,
    body.page-coalition table,
    body.page-coalitions .templateoutertablediv,
    body.page-coalitions .templatetable,
    body.page-coalitions table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.page-coalition input[type="number"], 
    body.page-coalition input[type="text"], 
    body.page-coalition select, 
    body.page-coalition button, 
    body.page-coalition .btn,
    body.page-coalitions input[type="number"], 
    body.page-coalitions input[type="text"], 
    body.page-coalitions select, 
    body.page-coalitions button, 
    body.page-coalitions .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    body.page-coalition form, body.page-coalitions form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    body.page-coalition input, 
    body.page-coalition select, 
    body.page-coalition button, 
    body.page-coalition .btn,
    body.page-coalitions input, 
    body.page-coalitions select, 
    body.page-coalitions button, 
    body.page-coalitions .btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    body.page-coalition button, 
    body.page-coalition .btn,
    body.page-coalitions button, 
    body.page-coalitions .btn {
        margin-top: 8px;
    }
    
    body.page-coalition .templatedivflex2:not(.menuflex2),
    body.page-coalitions .templatedivflex2:not(.menuflex2) {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    body.page-coalition img, body.page-coalitions img, .coalitionimage {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body.page-coalition, body.page-coalitions {
        font-size: 14px;
    }
}

/* Rankings/Statistics Mobile First Base Fixes */
@media (max-width: 768px) {
    body.page-rankings .templateoutertablediv,
    body.page-rankings .templatetable,
    body.page-rankings table,
    body.page-statistics .templateoutertablediv,
    body.page-statistics .templatetable,
    body.page-statistics table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body.page-rankings input[type="number"], 
    body.page-rankings input[type="text"], 
    body.page-rankings select, 
    body.page-rankings button, 
    body.page-rankings .btn,
    body.page-statistics input[type="number"], 
    body.page-statistics input[type="text"], 
    body.page-statistics select, 
    body.page-statistics button, 
    body.page-statistics .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    body.page-rankings form, body.page-statistics form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    body.page-rankings input, 
    body.page-rankings select, 
    body.page-rankings button, 
    body.page-rankings .btn,
    body.page-statistics input, 
    body.page-statistics select, 
    body.page-statistics button, 
    body.page-statistics .btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    body.page-rankings button, 
    body.page-rankings .btn,
    body.page-statistics button, 
    body.page-statistics .btn {
        margin-top: 8px;
    }
    
    body.page-rankings .templatedivflex2,
    body.page-statistics .templatedivflex2 {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    body.page-rankings img, body.page-statistics img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    body.page-rankings, body.page-statistics {
        font-size: 14px;
    }
}


/* --- static/css/game-country.css --- */
/**
 * Country page — mobile game hub
 */
body.game-shell-active.page-country .templatediv {
    /* Keep country tabs clear of fixed navbar + shell chrome */
    margin-top: 100px;
}

body.page-country .menuflex2 {
    min-height: 52px;
    height: auto;
    overflow: visible;
}

body.page-country .menuflex2 div,
body.page-country .menuflex2 a {
    min-height: 52px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

body.page-country .menuflex2 div h3,
body.page-country .menuflex2 a h3 {
    height: auto;
    line-height: 1.2;
    font-size: 17px;
}

.country-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 1fr);
    align-items: start;
    gap: 16px;
    width: 100%;
}

.country-overview-grid > .templatedivflex2left,
.country-overview-grid > .templatedivflex2right {
    margin: 0;
    padding: 0;
    width: auto;
    flex: none;
    min-width: 0;
}

.country-overview-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.country-overview-column > .templatetable {
    margin: 0;
}

.country-overview-grid .material-icons-outlined {
    top: 0;
    right: 0;
    vertical-align: middle;
}

.country-demographics-panel {
    border: 1px solid var(--border);
    border-radius: var(--game-radius-md);
    background: var(--foregroundThree);
    padding: 12px;
}

.country-demographics-panel .templatecontentheaderleft {
    margin: 0;
}

.country-demographics-subtitle {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.country-demographics-chart-wrap {
    position: relative;
    min-height: 240px;
    height: 260px;
    border: 1px solid var(--border);
    border-radius: var(--game-radius-md);
    background: transparent;
    padding: 8px;
}

.country-demographics-chart-wrap .chart-canvas-responsive {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
}

.country-demographics-fallback {
    margin-top: 8px;
    display: grid;
    gap: 8px;
}

.country-demographics-fallback-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 8px;
}

.country-demographics-fallback-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-demographics-fallback-stack {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: rgba(255, 255, 255, 0.08);
}

.country-demographics-fallback-stack .segment-children {
    background: rgba(54, 162, 235, 0.9);
}

.country-demographics-fallback-stack .segment-working {
    background: rgba(75, 192, 92, 0.9);
}

.country-demographics-fallback-stack .segment-elderly {
    background: rgba(220, 88, 88, 0.9);
}

.country-demographics-fallback-total {
    font-size: 0.78rem;
    font-weight: 600;
}

.country-demographics-empty {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 1200px) {
    .country-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .country-overview-column--demographics {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    body.page-country .country-overview-grid {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .country-overview-grid {
        grid-template-columns: 1fr;
    }

    .country-demographics-fallback-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 857px) {
    body.game-shell-active.page-country .templatediv {
        margin-top: 90px;
    }

    body.page-country .menuflex2 {
        min-height: 48px;
    }

    body.page-country .menuflex2 div,
    body.page-country .menuflex2 a {
        min-height: 48px;
    }

    body.page-country .menuflex2 div h3,
    body.page-country .menuflex2 a h3 {
        font-size: 15px;
    }

    body.game-shell-active .game-country-hub {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--game-space-sm);
        margin-bottom: var(--game-space-md);
    }

    body.game-shell-active .game-country-hub a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 72px;
        padding: var(--game-space-sm);
        background: var(--game-panel-bg);
        border: 1px solid var(--game-panel-border);
        border-radius: var(--game-radius-md);
        text-decoration: none;
        color: inherit;
        font-size: 0.8rem;
        font-weight: 500;
        gap: 4px;
    }

    body.game-shell-active .game-country-hub a:active {
        transform: scale(0.97);
        border-color: var(--accent);
    }

    body.game-shell-active .game-country-hub .material-icons-outlined {
        font-size: 1.5rem;
        color: var(--accent);
    }

    body.game-shell-active .countryimagediv {
        margin-bottom: var(--game-space-md);
    }

    body.game-shell-active .menuflex2 {
        flex-wrap: wrap;
        gap: var(--game-space-xs);
    }

    body.game-shell-active .menuflex2 .templatedivflex2left {
        flex: 1 1 30%;
        min-width: 80px;
    }
}

@media (min-width: 858px) {
    .game-country-hub {
        display: none;
    }
}

/* --- Nation customization (EDIT tab) --- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.country-customize-intro {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--game-radius-md);
    border: 1px solid var(--game-panel-border);
    background: linear-gradient(135deg, rgba(93, 173, 226, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.country-customize-panel {
    border: 1px solid var(--border);
    border-radius: var(--game-radius-md);
    background: var(--foregroundThree);
    padding: 16px;
}

.country-customize-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.country-customize-section {
    padding: 14px;
    border-radius: var(--game-radius-md);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.14);
}

.country-customize-section-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.country-customize-section-icon {
    font-size: 1.75rem;
    color: var(--accent);
    flex-shrink: 0;
}

.country-customize-section-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
}

.country-customize-section-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.country-flag-studio-body {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 16px;
    align-items: center;
}

.country-flag-preview-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--game-radius-md);
    border: 2px dashed var(--accent);
    background: linear-gradient(145deg, rgba(93, 173, 226, 0.08), rgba(0, 0, 0, 0.35));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
}

.country-flag-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}

.country-flag-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.country-flag-preview-placeholder .material-icons-outlined {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.85;
}

.country-flag-upload {
    min-height: 52px;
}

.country-biome-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #e8a87c;
}

.country-biome-warning .material-icons-outlined {
    font-size: 1rem;
    margin-top: 2px;
}

.country-biome-current {
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.country-biome-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.country-biome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: var(--game-radius-md);
    background: var(--foreground);
    cursor: pointer;
    text-align: left;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.country-biome-card:hover,
.country-biome-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(93, 173, 226, 0.25);
    outline: none;
}

.country-biome-card.is-current {
    border-color: rgba(93, 173, 226, 0.55);
}

.country-biome-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(93, 173, 226, 0.35);
}

.country-biome-card-art {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.country-biome-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.country-biome-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
}

.country-biome-card-icon {
    font-size: 1rem;
    color: var(--accent);
}

.country-biome-card-label {
    font-size: 0.88rem;
    font-weight: 600;
}

.country-biome-card-tagline {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.country-biome-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--accent);
    color: #0d1117;
}

.country-biome-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.country-biome-pick-hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--accent);
}

.country-lore-prompts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.country-lore-prompts-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-right: 4px;
}

.country-lore-prompt-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(93, 173, 226, 0.1);
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.country-lore-prompt-chip:hover,
.country-lore-prompt-chip:focus-visible {
    border-color: var(--accent);
    background: rgba(93, 173, 226, 0.22);
    outline: none;
}

.country-lore-editor-wrap .CodeMirror,
.country-lore-editor-wrap .editor-toolbar {
    border-radius: var(--game-radius-md);
}

body.page-country .country-lore-editor-wrap .CodeMirror {
    min-height: 220px;
    background: var(--foreground);
    color: var(--text-primary, #e8eaed);
    border: 1px solid var(--border);
}

body.page-country .country-lore-editor-wrap .editor-toolbar {
    border: 1px solid var(--border);
    background: var(--foregroundThree);
    opacity: 1;
}

body.page-country .country-lore-editor-wrap .editor-toolbar a {
    color: var(--text-secondary) !important;
}

body.page-country .country-lore-editor-wrap .editor-toolbar a:hover,
body.page-country .country-lore-editor-wrap .editor-toolbar a.active {
    background: rgba(93, 173, 226, 0.2);
    border-color: transparent;
}

.country-customize-save {
    margin-top: 4px;
}

@media (max-width: 720px) {
    .country-flag-studio-body {
        grid-template-columns: 1fr;
    }

    .country-biome-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-biome-card {
        transition: none;
    }
}

/* Demographics panel — Population Breakdown compact 3-col row */
.country-demographics-panel .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
}

.country-demographics-panel .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 6px !important;
    text-align: center !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
    min-height: unset !important;
}

.country-demographics-panel .stat-card .stat-label {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    margin-bottom: 4px !important;
}

.country-demographics-panel .stat-card .stat-label .material-icons-outlined {
    font-size: 0.9rem !important;
    color: var(--accent) !important;
}

.country-demographics-panel .stat-card .stat-value {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Overview tab — tighten General / Affairs / Other tables */
.country-overview-column .templatetable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Section header row — slim accent bar instead of big blue block */
.country-overview-column .templatetable tr:first-child th {
    background: transparent;
    border-bottom: 2px solid var(--accent, #4da8da);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 8px 5px;
    text-align: left;
}

/* Data rows */
.country-overview-column .templatetable td {
    padding: 5px 8px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    vertical-align: middle;
}

.country-overview-column .templatetable tr:last-child td {
    border-bottom: none;
}

/* Label column — icon + text, never wraps */
.country-overview-column .templatetable td:first-child {
    white-space: nowrap;
    color: var(--text-secondary);
    width: 1%;
    padding-right: 14px;
}

/* Value column — right-aligned, allows wrapping for long values */
.country-overview-column .templatetable td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* Inline icon alignment */
.country-overview-column .templatetable .material-icons-outlined {
    font-size: 0.95rem;
    vertical-align: middle;
    margin-right: 4px;
    color: var(--accent, #4da8da);
    opacity: 0.85;
}

/* Revenue tab — compact stat rows */
body.page-country .revenue .stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 4px;
    width: 100%;
}
body.page-country .revenue .stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    margin: 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
    border-radius: 0;
    text-align: left;
}
body.page-country .revenue .stat-card:first-child {
    border-radius: 6px 6px 0 0;
}
body.page-country .revenue .stat-card:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}
body.page-country .revenue .stat-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #888);
    white-space: nowrap;
}
body.page-country .revenue .stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    text-align: right;
}


/* --- Province banner cards (country + provinces lists) ------------------ */
/* The photo IS the card: full-bleed image, navy scrim rising from the left,
   name + statline overlaid. Replaces the old half-empty two-column card. */
.province-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 128px;
    margin: 14px 0;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    background: #0a1526;
    box-shadow: 0 1px 3px rgba(4, 10, 22, 0.28);
    text-decoration: none;
}
.province-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 0.25s ease;
}
.province-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 21, 38, 0.92) 0%,
        rgba(10, 21, 38, 0.62) 46%,
        rgba(10, 21, 38, 0.12) 100%
    );
    z-index: 0;
}
.province-banner__body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 14px 18px 12px;
}
.province-banner__name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(4, 10, 22, 0.55);
}
.province-banner__name .material-icons-outlined {
    font-size: 1.25rem;
    color: var(--accent, #00a7e1);
}
.province-banner .province-stat-row {
    margin: 0;
}
.province-banner .province-stat-pill--onphoto {
    background: rgba(8, 16, 30, 0.55);
    color: #f2f6fa;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.province-banner .province-stat-pill--onphoto .material-icons-outlined {
    color: var(--accent, #00a7e1);
}
.province-banner .province-stat-pill--warn {
    background: rgba(122, 32, 32, 0.68);
}
.province-banner .province-stat-pill--warn .material-icons-outlined {
    color: #ffb4a8;
}
.province-banner:hover .province-banner__img,
.province-banner:focus-visible .province-banner__img {
    transform: scale(1.03);
}
.province-banner:focus-visible {
    outline: 2px solid var(--accent, #00a7e1);
    outline-offset: 2px;
}
@media (max-width: 700px) {
    .province-banner { min-height: 104px; }
    .province-banner__body { padding: 10px 12px 9px; }
    .province-banner__name { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .province-banner__img { transition: none; }
    .province-banner:hover .province-banner__img,
    .province-banner:focus-visible .province-banner__img { transform: none; }
}

/* --- MOBILE UI FIXES FOR PHONE WIDTH (~390px) --- */
@media (max-width: 480px) {
    /* 1. Fix VIEW/REVENUE/NEWS/EDIT tab bar for tiny tap targets */
    body.page-country .menuflex2 {
        gap: 8px !important;
        padding: 0 4px;
    }
    body.page-country .menuflex2 .templatedivflex2left {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        min-height: 48px !important; /* Proper touch target height */
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--game-radius-sm, 8px);
        margin: 0 !important;
        justify-content: center;
    }
    body.page-country .menuflex2 .templatedivflex2left:active {
        background: rgba(255, 255, 255, 0.12);
    }

    /* 2. Keep the nation/coalition flags as small corner badges, not full-bleed —
       game-layout.css's ".templatedivcontent img { max-width: 100% }" mobile
       reset otherwise outranks the base .countryimage sizing by specificity. */
    .countryimagediv .countryimage,
    .countryimagediv .countrycoalitionimage {
        width: auto;
        max-width: 40%;
        height: clamp(64px, 20vw, 132px);
        object-fit: cover;
    }

    /* 3. Fix tables/sections wider than screen */
    .country-overview-column .templatetable {
        table-layout: fixed;
        width: 100%;
    }
    .country-overview-column .templatetable td:last-child {
        word-break: break-word; /* Prevent long strings from stretching layout */
    }

    /* 4. Fix stat & demographics cards being squished */
    .country-demographics-panel .stat-grid {
        grid-template-columns: 1fr !important; /* Stack vertically */
    }
    
    /* Stack buildings cards instead of squeezing them */
    .view .stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    /* Make revenue rows a bit taller for tapping */
    body.page-country .revenue .stat-card {
        padding: 10px 8px; 
    }
}

/* --- Coalition Recommendation Widget --- */
.coalition-recommendations-widget {
    margin-bottom: 24px;
}

.coalition-rec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px;
}

@media (min-width: 768px) {
    .coalition-rec-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coalition-rec-card {
    background-color: var(--foreground, #252b36);
    border: 1px solid var(--border, #373e4f);
    border-radius: var(--game-radius-md, 12px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.coalition-rec-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.coalition-rec-flag {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.coalition-rec-icon {
    font-size: 32px;
    color: var(--accent, #90caf9);
}

.coalition-rec-title-group {
    flex: 1;
}

.coalition-rec-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.coalition-rec-name a {
    color: var(--text-primary, #ffffff);
    text-decoration: none;
}

.coalition-rec-name a:hover {
    color: var(--accent, #90caf9);
}

.coalition-rec-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #9aa0a6);
}

.coalition-rec-desc {
    font-size: 0.85rem;
    color: var(--text-primary, #d1d5db);
    margin: 0 0 16px 0;
    line-height: 1.4;
    flex: 1;
}

.coalition-rec-actions {
    display: flex;
    justify-content: flex-end;
}

.coalition-rec-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    margin: 0 !important;
}



/* --- static/css/game-province.css --- */
/**
 * Province page — classic + base view alignment
 */

body.game-shell-active.page-province .templatediv {
    margin-top: calc(var(--game-navbar-height, 55px) + var(--game-space-md, 16px));
}

body.page-province .templatedivcontent .templatedivflex2.menuflex.warflexparentcolors {
    align-items: stretch;
}

body.page-province .provincetopper,
body.page-province .provincestopper {
    margin: 0;
    border-radius: var(--game-radius-md, 12px) var(--game-radius-md, 12px) 0 0;
}

body.page-province .templatedivflex2left .templatetable,
body.page-province .templatedivflex2right .templatetable {
    width: 100%;
}

body.page-province .material-icons-outlined.iconlarge {
    top: 0;
    right: 0;
    vertical-align: middle;
}

/* Province list — desktop cards */
body.page-provinces .province-list-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

body.page-provinces .province-list-card {
    margin: 8px 0;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    align-items: stretch;
    min-height: 0;
}

body.page-provinces .province-list-card:hover {
    box-shadow: rgba(0, 0, 0, 0.12) 0 4px 12px 0;
}

body.page-provinces .province-list-card-stats {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

body.page-provinces .province-list-card-stats .templatetable {
    margin: 0;
    border-radius: 0;
}

body.page-provinces .province-list-card-stats h2 {
    margin: 0 0 6px !important;
    font-size: 1rem;
}

body.page-provinces .province-list-card-media {
    min-width: 38%;
    max-width: 42%;
    overflow: hidden;
}

body.page-provinces .province-list-card-image {
    min-height: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Province list — mobile cards */
body.page-provinces .game-province-card-thumb img,
body.page-provinces .game-province-card-thumb {
    overflow: hidden;
    border-radius: var(--game-radius-sm, 8px);
}

body.page-provinces .game-province-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Province banner + edit panel */
.provincetopper--custom {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.provincetopper--custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 0;
}

.provincetopper--custom .templatedivtitle {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.province-settings-panel {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.province-settings-hint {
    margin: 0 0 var(--game-space-md, 16px);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.province-settings-preview {
    border: 1px solid var(--border);
    border-radius: var(--game-radius-md, 12px);
    overflow: hidden;
    margin-bottom: var(--game-space-md, 16px);
    background: var(--foregroundThree);
}

.province-settings-preview-image {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}

.province-settings-form,
.province-settings-remove-form {
    margin-top: var(--game-space-md, 16px);
}

.province-settings-label {
    display: block;
    margin-bottom: var(--game-space-sm, 8px);
    font-weight: 600;
}

.province-settings-file {
    width: 100%;
    box-sizing: border-box;
}

.province-settings-save,
.province-settings-remove {
    margin-top: var(--game-space-md, 16px);
    width: 100%;
}

.province-settings-remove {
    background: var(--foregroundThree);
}

/* Status cards */
.province-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--game-space-md, 16px);
    width: 100%;
    margin: var(--game-space-md, 16px) 0;
}

.province-status-card {
    display: flex;
    flex-direction: column;
    gap: var(--game-space-sm, 8px);
    padding: var(--game-space-md, 16px);
    border-radius: var(--game-radius-md, 12px);
    border: 1px solid var(--border);
    background: var(--foregroundThree);
    min-height: 72px;
}

.province-status-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--game-space-sm, 8px);
    font-weight: 600;
    line-height: 1.35;
}

.province-status-card__head .material-icons-outlined {
    flex-shrink: 0;
    font-size: 22px;
    top: 0;
    right: 0;
}

.province-status-card__detail {
    margin: 0;
    padding-left: 30px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.province-status-card__detail--warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--warning, #c9a227);
}

.province-status-card__detail--warn .material-icons-outlined {
    font-size: 18px;
    top: 0;
    right: 0;
}

.province-status-card--ok {
    border-color: rgba(45, 159, 111, 0.45);
    background: linear-gradient(135deg, rgba(45, 159, 111, 0.12), var(--foregroundThree));
}

.province-status-card--ok .province-status-card__head .material-icons-outlined {
    color: var(--success, #2d9f6f);
}

.province-status-card--bad {
    border-color: rgba(220, 88, 88, 0.45);
    background: linear-gradient(135deg, rgba(220, 88, 88, 0.12), var(--foregroundThree));
}

.province-status-card--bad .province-status-card__head .material-icons-outlined {
    color: var(--danger, #dc5858);
}

@media (min-width: 768px) {
    .province-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .province-status-card {
        height: 100%;
    }
}

/* Province info two-column layout.
   align-items: stretch (not start) so both columns match the taller
   one's height — .province-info-stats gets real card chrome below so
   that stretch has something visible to fill instead of leaving a
   blank gap of page background under the shorter column. */
.province-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--game-space-md, 16px);
    width: 100%;
    /* !important: a sitewide rule (.templatedivcontent .templatedivflex2 {
       align-items: flex-start }) outranks this on specificity because
       this element also carries the generic .templatedivflex2 class —
       and flex-start is a different value than the stretch we need here,
       unlike other grids that happened to already want start/flex-start
       (identical values, so no conflict was ever visible there). */
    align-items: stretch !important;
}

.province-info-grid > .templatedivflex2left,
.province-info-grid > .templatedivflex2right {
    margin: 0;
    width: 100%;
    max-width: none;
}

/* .templatetable already has its own card background/border/radius —
   don't wrap it in a second card, just make it (not a plain div) the
   thing that stretches, so its existing visible chrome fills the
   available height instead of a wrapper nobody can see. */
.province-info-stats {
    display: flex;
    flex-direction: column;
}

.province-info-stats > .templatetable {
    flex: 1;
    width: 100%;
    margin: 0;
}

.province-info-demographics .chart-wrapper {
    max-width: none;
    width: 100%;
    /* Fixed, not min-height: the base .chart-wrapper rule sets a real
       height:280px + overflow:hidden cap, but this override replaced it
       with an open-ended min-height with nothing to cap the top end.
       Chart.js's canvas here uses responsive:true + maintainAspectRatio:
       false, which sizes the canvas to fill its container — with no max
       height, a taller container (e.g. from the sibling column
       stretching to match) lets the canvas grow unbounded instead of
       staying clipped, which is what produced a huge blank canvas
       overflowing past the visible card. */
    height: 280px;
    min-height: 280px;
    margin: var(--game-space-sm, 8px) 0;
}

.chart-wrapper--empty .chart-wrapper__empty-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.chart-wrapper__empty-msg[hidden] {
    display: none !important;
}

@media (min-width: 768px) {
    .province-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Owner tools — Quick Build + purchase */
.province-owner-tools {
    width: 100%;
    margin: var(--game-space-md, 16px) 0;
}

.province-owner-tools .infodiv {
    width: 100%;
    max-width: 100%;
}

.province-purchase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--game-space-md, 16px);
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.province-purchase-panel {
    height: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .province-purchase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Province list cards — desktop alignment */
body.page-provinces .province-list-card.warflexparent.card-align-row {
    align-items: stretch;
}

body.page-provinces .province-list-card-media {
    flex: 0 0 38%;
    max-width: 42%;
}

/* Province list — compact stat grid */
body.page-provinces .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
    margin: 8px 0 4px;
    width: 100%;
}
body.page-provinces .stat-card {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    text-align: left;
    background: var(--card-bg, rgba(0,0,0,0.04));
    border-radius: 6px;
    min-width: 0;
}
body.page-provinces .stat-card .stat-label {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
    color: var(--text-muted, #888);
    font-weight: 600;
}
body.page-provinces .stat-card .stat-label .material-icons-outlined {
    font-size: 14px;
}
body.page-provinces .stat-card .stat-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--colorOne);
    margin-left: auto;
    white-space: nowrap;
}

/* Country page — compact province stat pills */
.province-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}
.province-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--card-bg, rgba(0,0,0,0.05));
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}
.province-stat-pill .material-icons-outlined {
    font-size: 14px;
    color: var(--colorOne);
}

/* --- Fix Purchase Cities / Purchase Land button overlapping the amount input ---
   The legacy .divflex2center forces max-content column widths (input + button),
   which overlap in the constrained card, hiding the Land amount field behind the
   Purchase button (player-reported). Give these forms a clean side-by-side flex
   that wraps on mobile: input takes the space, button sizes to its label. */
body.page-province .templatedivflex2.divflex2center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
body.page-province .templatedivflex2.divflex2center > div {
    width: auto !important;      /* undo .divflex2center div { width: max-content } */
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
body.page-province .templatedivflex2.divflex2center .templatedivflex2left {
    flex: 1 1 200px;
}
body.page-province .templatedivflex2.divflex2center .templatedivflex2right {
    flex: 0 0 auto;
}
body.page-province .templatedivflex2.divflex2center .templatedivflex2left input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}
body.page-province .templatedivflex2.divflex2center .templatedivflex2right button {
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* Stack on phones so the button never crowds the input */
    body.page-province .templatedivflex2.divflex2center .templatedivflex2left,
    body.page-province .templatedivflex2.divflex2center .templatedivflex2right {
        flex: 1 1 100%;
    }
    body.page-province .templatedivflex2.divflex2center .templatedivflex2right button,
    body.page-province .templatedivflex2.divflex2center .templatedivflex2left button {
        width: 100%;
    }
    body.page-province .purchasemilitarydiv .templatedivflex2.divflex2center {
        flex-direction: column;
        gap: 8px;
    }
    body.page-province .purchasemilitarydiv input,
    body.page-province .province-owner-build input,
    body.page-province .province-owner-build select {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    body.page-province .templatedivflex2.menuflex {
        flex-direction: column;
    }
    body.page-province .province-card-media {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 16px;
        max-width: 100%;
    }
    body.page-province .province-card-media img.unitimage {
        max-width: 100%;
        max-height: 200px;
        object-fit: contain;
    }
    body.page-province button,
    body.page-province .templatedivbutton,
    body.page-province input,
    body.page-province select,
    body.page-province .smallheader,
    body.page-province .templatedivflex2left[onclick] {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.page-province input {
        justify-content: flex-start;
    }
}

/* Energy Balance panel — production/consumption breakdown on /province */
.energy-balance-panel .energy-balance-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--game-radius-sm, 8px);
    font-weight: 600;
    margin: 8px 0;
}
.energy-balance-status--ok {
    background: rgba(46, 204, 113, 0.12);
    color: var(--success, #2ecc71);
}
.energy-balance-status--deficit {
    background: rgba(231, 76, 60, 0.12);
    color: var(--danger, #e74c3c);
}
.energy-balance-status--warn {
    background: rgba(241, 196, 15, 0.12);
    color: var(--accent, #f1c40f);
    font-weight: 500;
}
.energy-breakdown-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 16px;
}
.energy-breakdown-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
}
.energy-breakdown-table th,
.energy-breakdown-table td {
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}
.energy-breakdown-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
}
.energy-row--limited td {
    color: var(--danger, #e74c3c);
}

@media (max-width: 480px) {
    .energy-balance-panel .energy-balance-status {
        font-size: 0.9rem;
    }
    .energy-breakdown-table {
        min-width: 380px;
    }
}


/* --- static/css/game-war.css --- */
/**
 * War / military screens — mobile game card polish
 */

body.page-war .wartopper {
    margin: 0;
    border-radius: var(--game-radius-md, 12px) var(--game-radius-md, 12px) 0 0;
}

body.page-war .material-icons-outlined.iconlarge {
    top: 0;
    right: 0;
    vertical-align: middle;
}

@media (max-width: 857px) {
    body.game-shell-active .warflexparent.templatedivflex2 {
        flex-direction: column;
    }

    body.game-shell-active .warflexparent .unitimage {
        max-height: 140px;
        width: 100%;
        object-fit: cover;
        border-radius: var(--game-radius-md);
    }

    body.game-shell-active .unitcardparent,
    body.game-shell-active .warchoose-unit-card,
    body.game-shell-active .warflexparent .templatedivflex2left {
        min-height: 44px;
    }

    body.game-shell-active input[type="checkbox"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
}

.game-war-result-banner {
    padding: var(--game-space-md);
    border-radius: var(--game-radius-lg);
    background: linear-gradient(135deg, var(--foregroundThree), var(--foreground));
    border: 1px solid var(--border);
    margin-bottom: var(--game-space-md);
    text-align: center;
}

.game-war-result-banner.victory {
    border-color: var(--success);
    box-shadow: 0 0 16px rgba(45, 159, 111, 0.25);
}

.game-war-result-banner.defeat {
    border-color: var(--danger);
}

.game-unit-card-grid .unitcard {
    border-radius: var(--game-radius-lg);
    border: 2px solid var(--border);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.game-unit-card-grid .unitcard:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 167, 225, 0.2);
    border-color: rgba(0, 167, 225, 0.5);
    z-index: 2;
}

.game-unit-card-grid .unitcard::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
}

.game-unit-card-grid .unitcard:hover::after {
    left: 150%;
}

.game-unit-card-grid .unitcard-selected {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 167, 225, 0.4), inset 0 0 10px rgba(0, 167, 225, 0.1);
    transform: translateY(-2px) scale(1.03);
}

.game-unit-card-grid .unitimage {
    border-radius: var(--game-radius-md);
    background: var(--foregroundThree);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.game-unit-card-grid .unitcard:hover .unitimage {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.05);
}

/* Animations for Attacks */
@keyframes screenShake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

.attack-shake {
    animation: screenShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes attackExplosion {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.particle-explosion {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ff4500 10%, #ffa500 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: attackExplosion 0.5s ease-out forwards;
    z-index: 9999;
    mix-blend-mode: screen;
}

@keyframes pulseAttack {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 69, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

.btn-attack-pulse {
    animation: pulseAttack 1.5s infinite;
}

/* Full-width war panels on laptop */
body.page-war .templatedivcontent .infodiv,
body.page-military .templatedivcontent .infodiv {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.page-war .game-unit-card-grid.unitcardparent,
    body.page-war .game-unit-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--game-space-md, 16px);
        width: 100%;
    }

    body.page-war .game-unit-card-grid .unitcard,
    body.page-war .game-unit-card-grid .templatedivflex2left {
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    body.page-war .game-unit-card-grid.unitcardparent,
    body.page-war .game-unit-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Battle report — mobile: stack panels, shrink header font */
@media (max-width: 700px) {
    .battle-report-container {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .combatant-panel {
        flex: 1 1 100% !important;
        padding: 12px !important;
    }

    .combatant-header {
        font-size: 1.05em !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    .winner-banner {
        font-size: 1.3em !important;
        padding: 10px !important;
        letter-spacing: 1px !important;
    }

    .unit-name {
        font-size: 0.95em !important;
    }

    .casualty-counter {
        font-size: 0.8em !important;
    }
}

/* Mobile First Base Fixes — scoped to the wars page so these broad
   element selectors never leak onto other pages. */
@media (max-width: 768px) {
    /* No horizontal scroll for tables */
    body.page-war .templateoutertablediv,
    body.page-war .templatetable,
    body.page-war table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Minimum tap targets */
    body.page-war input[type="number"],
    body.page-war input[type="text"],
    body.page-war select,
    body.page-war button,
    body.page-war .btn,
    body.page-war .unitcard {
        min-height: 44px;
    }

    /* Full width forms and stack buttons */
    body.page-war form {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    body.page-war form input,
    body.page-war form select,
    body.page-war form button,
    body.page-war form .btn {
        width: 100%;
        box-sizing: border-box;
    }
    body.page-war form button,
    body.page-war form .btn {
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    /* Images bounded (no !important so deliberately-sized art can override) */
    body.page-war img,
    body.page-war .unitimage {
        max-width: 100%;
        height: auto;
    }
}


/* --- static/css/game-touch.css --- */
/* =====================================================================
 * game-touch.css — touch / gesture polish for Affairs and Order
 * Scoped to html.has-touch (set by touch-gestures.js) so desktop is
 * completely unaffected. Mobile-first: these rules only ever apply on
 * touch-capable devices.
 * ===================================================================== */

/* Kill the grey tap flash and clean up touch callouts everywhere. */
html.has-touch {
    -webkit-tap-highlight-color: transparent;
}
html.has-touch button,
html.has-touch .button,
html.has-touch .btn,
html.has-touch a,
html.has-touch [role="button"],
html.has-touch .templatebutton,
html.has-touch .card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Instant press feedback (added by touch-gestures.js on touchstart). */
html.has-touch .touch-active {
    transform: scale(0.97);
    filter: brightness(0.94);
    transition: transform .06s ease, filter .06s ease;
}
html.has-touch.game-reduced-motion .touch-active {
    transform: none;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    html.has-touch .touch-active { transform: none; }
}

/* Comfortable tap targets on real touch devices (belt-and-suspenders on
   top of the per-page @media rules). */
@media (pointer: coarse) {
    .navbardropbtn,
    .menubardiv a,
    .templatebutton,
    .button,
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }
    /* +/- steppers and small icon buttons need a real hit area */
    .stepper-btn,
    .qty-btn,
    .icon-btn,
    .amount-stepper button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Momentum scrolling for any horizontally-scrollable region on touch. */
@media (pointer: coarse) {
    .templatetable,
    .templatetable2,
    .templatetable3,
    .table-scroll,
    [data-scroll-x] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    /* subtle affordance that a table scrolls sideways */
    .table-scroll { position: relative; }
}

/* ---------------------------------------------------------------------
 * Zoomable media ([data-zoomable]) — pinch / pan / double-tap zoom.
 * The element is transformed by JS; keep it clipped and above siblings
 * while zoomed so panning doesn't reveal page chrome underneath.
 * ------------------------------------------------------------------- */
[data-zoomable] {
    touch-action: none;
    cursor: grab;
    max-width: 100%;
}
[data-zoomable].is-zoomed {
    cursor: grabbing;
    position: relative;
    z-index: 5;
    -webkit-user-select: none;
    user-select: none;
}
/* wrap zoomable media in .zoomable-wrap to clip the panned overflow */
.zoomable-wrap {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    border-radius: 8px;
    touch-action: none;
}
.zoomable-wrap::after {
    content: "pinch to zoom";
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    pointer-events: none;
    opacity: .0;
    transition: opacity .3s ease;
}
@media (pointer: coarse) {
    .zoomable-wrap::after { opacity: .8; }
    .zoomable-wrap:has(.is-zoomed)::after { opacity: 0; }
}

/* Swipe-nav zones get a horizontal touch-action so vertical scroll still
   works but horizontal swipes are ours to interpret. */
[data-swipe-nav] {
    touch-action: pan-y;
}