/* -----------------------------
   GLOBAL STYLES
------------------------------*/

:root{
    --bg-main:#15130f;
    --bg-secondary:#0b0a08;
    --panel:#1c1913;
    --accent:#8a6d3b;
    --accent-hover:#6b5228;
    --text:#d8d0bd;
    --muted:#8a8370;
    --green:#5a6b3a;
    --rust:#8c4a35;
    --border:rgba(200,180,140,0.14);
    --pos:#7fa864;
    --neg:#c96a4a;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
	height: 100vh;
	overflow-y: hidden;

	scrollbar-color: #4a3f2a #15130f;
    scrollbar-width: auto;
}

body{
    font-family: "Courier New", Consolas, monospace;
    background: radial-gradient(circle at top,#241f17,#0b0a08);
    color:var(--text);
	height: 100vh;
	overflow: hidden;
}

#UI{
    position: fixed;
    inset: 0;
    display: none; /* flex */
    flex-direction: column;
	height: 180px;
}


/* -----------------------------
   LOGIN
------------------------------*/

.login-box{
    width:380px;
    max-width:90%;
    margin:auto;

    padding:36px;

    border:1px solid var(--border);
    border-radius:2px;

    background:rgba(21,19,15,0.95);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        inset 0 0 0 1px var(--border);

    text-align:center;
	position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-box h2{
    margin-bottom:26px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:16px;
    color:var(--muted);
}


/* -----------------------------
   LOBBY
------------------------------*/

/* The whole screen is exactly the viewport and never scrolls itself -- only
   #lobbyNationsListWrap (the nations list) scrolls internally, so the lobby
   always fits within the screen regardless of how many nations exist. */
#lobbyScreen{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow:hidden;
}

#lobbyScreen.hidden{
    display:none;
}

#lobbyBox{
    width:100%;
    max-width:920px;
    height:100%;
    max-height:640px;

    display:flex;
    align-items:stretch;

    border:1px solid var(--border);
    border-radius:2px;

    background:rgba(21,19,15,0.95);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.7),
        inset 0 0 0 1px var(--border);

    overflow:hidden;
}

/* Left column: nation settings. */
#lobbySettingsColumn{
    width:300px;
    flex-shrink:0;
    padding:32px 28px;
    border-right:1px solid var(--border);
}

/* Right column: players + nations. Only the nations list (potentially long)
   scrolls -- the column itself never overflows the box. */
#lobbyNationsColumn{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:32px 28px;
    min-height:0;
}

#lobbyPlayersList{
    flex-shrink:0;
    max-height:130px;
    overflow-y:auto;
}

#lobbyNationsListWrap{
    flex:1;
    min-height:0;
    overflow-y:auto;
}

#lobbyBox h2{
    margin-bottom:20px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:16px;
    color:var(--muted);
    text-align:center;
}

#lobbyBox .panelTitle{
    margin-top:20px;
    margin-bottom:8px;
}

#lobbyNationsColumn .panelTitle:first-child{
    margin-top:0;
}

#lobbyMyNationHeader{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

#lobbyMyFlag svg,
.lobbyRowFlag svg{
    width:36px;
    height:24px;
    border:1px solid var(--border);
    display:block;
}

#lobbyMyNationName{
    font-size:15px;
    font-weight:600;
}

.lobbyRowFlag{
    flex-shrink:0;
}

.lobbyRowName{
    flex:1;
}

.lobbyRowMeta{
    color:var(--muted);
    font-size:12px;
}

.lobbyAdminBadge{
    color:var(--pos);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

#lobbyStartGameBtn{
    margin-top:14px;
    background:linear-gradient(180deg,#4a6b35,#33531f);
    border-color:var(--green);
}

#lobbyStartGameBtn:hover{
    background:linear-gradient(180deg,#5a7a41,#3d5c27);
}


/* INPUT */

input{
    width:100%;
    padding:12px 14px;
    margin-bottom:14px;

    border-radius:2px;
    border:1px solid #3a3324;

    background:var(--bg-secondary);
    color:var(--text);

    font-family:inherit;
    font-size:14px;
    outline:none;

    transition:0.2s;
}

input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(138,109,59,0.25);
}

/* Native color swatch -- the generic input's text padding just wastes space
   here (there's no text), so it's overridden down to a small fixed-height
   swatch instead. */
input[type="color"]{
    width:100%;
    height:36px;
    padding:2px;
    cursor:pointer;
}

select{
    width:100%;
    padding:12px 14px;
    margin-bottom:14px;

    border-radius:2px;
    border:1px solid #3a3324;

    background:var(--bg-secondary);
    color:var(--text);

    font-family:inherit;
    font-size:14px;
    outline:none;
}

select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(138,109,59,0.25);
}


/* BUTTON */

button{
    width:100%;
    padding:12px;

    border:1px solid #3a3324;
    border-radius:2px;

    background:linear-gradient(180deg,#4a4028,#332b19);
    color:var(--text);

    font-family:inherit;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.3px;

    cursor:pointer;

    transition:0.15s;
}

button:hover{
    background:linear-gradient(180deg,#5a4e33,#3d3320);
    border-color:var(--accent);
}

button:active{
    background:linear-gradient(180deg,#332b19,#2a2314);
}

#status{
    margin-top:10px;
    font-size:14px;
    color:var(--muted);
}

/* -----------------------------
   CANVAS
------------------------------*/

#game-canvas{
    width: 100%;
    height: 100%;
}

/* ===== TOP BAR ===== */

#topBar {
    height: 120px;
    display: flex;
    background: #201c15;
    border-bottom: 2px solid #3a3324;
}

#leftPanel {
    display: flex;
    flex-direction: column;
}

#flagContainer {
	height: 120px;
    flex: 1;
    border-right: 1px solid #3a3324;
    filter: saturate(0.55) brightness(0.85);
}

#flagContainer svg {
    width: 100%;
    height: 100%;
    display: block;
}

#newsButton:hover {
    background: #4a4a4a;
}

#newsButton img {
    width: 24px;
    height: 24px;
}

/* ===== RIGHT SIDE ===== */

#rightPanel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#resourceRow,
#tabRow {
    display: flex;
    align-items: center;
}

#resourceRow {
	flex: 0.5;
    background: #2c2718;
    border-bottom: 1px solid #3a3324;
    padding: 0 10px;
    justify-content: space-between;
}

#topInfoRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: #2c2718;
    padding: 0 10px;
}

#myNationName {
    flex: 0 0 auto;
    padding: 8px 0;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
}

#gameClockBar {
    flex: 0 0 auto;
    padding: 8px 0;
    font-size: 13px;
    color: var(--muted);
}

.resource {
    margin: 0;
    cursor: default;
    user-select: none;
}

.resRising{
    color:var(--pos);
}

.resFalling{
    color:var(--neg);
}

#tabRow {
    padding: 0 10px;
    gap: 8px;
	flex: 1;
}

.tabButton {
    position: relative;
    flex: 1 1 0;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: #2c2718;
    color: var(--text);
    font-family:inherit;
    cursor: pointer;
    border-radius: 2px;
    width:auto;
}

.tabButton:hover {
    background: #3a3324;
    border-color:var(--accent);
}

.tabButton.active {
    background: var(--accent-hover);
    border-color:var(--accent);
}

.tabBadge{
    position:absolute;
    top:-6px;
    right:-6px;
    display:inline-block;
    min-width:16px;
    padding:0 5px;
    border-radius:8px;
    background:var(--neg);
    color:#1c1913;
    font-size:11px;
    font-weight:600;
    line-height:16px;
    text-align:center;
    box-shadow:0 0 0 1px var(--border);
}

/* A player without a nation (see enterGame's spectatorUI toggle in client.js)
   still gets #UI -- the map, map mode bar, and province panel all work the
   same for them -- just none of the nation-specific chrome, which would
   either show blank or actively error against a null nation. #spectatorBanner
   fills the gap those leave in #topBar with an explanation instead. */
#UI.spectatorUI #leftPanel,
#UI.spectatorUI #resourceRow,
#UI.spectatorUI #tabRow{
    display:none;
}

#spectatorBanner{
    display:none;
    flex:1;
    align-items:center;
    padding:0 16px;
    color:var(--muted);
    font-size:14px;
    background:#2c2718;
}

#UI.spectatorUI #spectatorBanner{
    display:flex;
}

/* ===== CONTENT ===== */

#contentArea {
    flex: 1;
    position: relative;
}

.gamePanel {
    display: none;
    position: absolute;
    inset: 0;
    background: #1c1913;
}

.gamePanel.active {
    display: block;
}

/* Production is the one gamePanel that stacks vertically instead of being a
   single .panelColumns row -- #productionPanel's own ID beats the generic
   .gamePanel.active rule above on specificity, so this wins regardless of
   source order. See index.html's own comment on #productionPanel for why. */
#productionPanel.active {
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    overflow: hidden;
}

/* flex-basis 0 (not auto) is load-bearing here, not a style nit: with auto,
   a flex item's basis is its own *content* size, and #productionQueueList
   filling up with projects made that content size balloon past this item's
   fair share -- .panelColumns' height:100% below can't rein it back in,
   since a percentage height only resolves against a definite ancestor
   height, and an auto-basis item's height isn't definite until *after* its
   content has already been measured to produce that basis (the exact
   circular dependency percentage-height/flex-basis:auto is known to break
   on). Pinning the basis to 0 sidesteps the circularity entirely: growth is
   then purely flex-grow's call, so .panelColumn/.brigadeDrawerContent's own
   overflow-y actually gets to do its job instead of the item just growing
   to swallow whatever's inside it. BUG FIX (see .brigadeDrawer's own
   comment for the matching half of this). */
.productionTop {
    flex: 1 1 0;
    min-height: 0;
}

.productionTop .panelColumns {
    height: 100%;
}

/* Expand/collapse-able drawer holding the brigade catalog, full panel width
   below the compact national-projects/queue strip above -- see
   toggle-brigade-drawer in client.js. flex-grow (not max-height) drives the
   expand/collapse so the split stays proportional to whatever the viewport
   actually has to give, rather than a fixed pixel guess -- matching
   .productionTop's own flex:1 splits the panel evenly, 50/50, whenever
   expanded, both still independently scrollable via .panelColumn/
   .brigadeDrawerContent's own overflow-y. Collapsed, flex drops to a bare
   0 0 auto (just the toggle button's own height) and .productionTop's own
   flex:1 above expands to fill essentially the whole rest of the panel.
   flex-basis 0, not auto, for the same reason as .productionTop's own
   comment above -- otherwise a big enough brigade catalog makes this item
   balloon past its 50% share exactly like the queue did before the fix. */
.brigadeDrawer {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.brigadeDrawer.collapsed {
    flex: 0 0 auto;
}

.brigadeDrawerToggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--panel);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    flex: 0 0 auto;
}

.brigadeDrawerToggle:hover {
    background: #292217;
}

.brigadeDrawerToggleIcon {
    display: inline-block;
    color: var(--accent);
    transition: transform 0.15s ease;
}

.brigadeDrawer.collapsed .brigadeDrawerToggleIcon {
    transform: rotate(-90deg);
}

.brigadeDrawerContent {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.brigadeDrawer.collapsed .brigadeDrawerContent {
    display: none;
}

.closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 36px;
    height: 36px;

    border:1px solid var(--border);
    border-radius: 2px;
    background: var(--rust);
    color: var(--text);
    cursor: pointer;
    font-size: 18px;

	padding: 0px;
}

.closeBtn:hover {
    background: #a25a41;
}

/* ===== TOOLTIP ===== */

#tooltip {
    position: fixed;
    display: none;

    background: rgba(11,10,8,0.95);
    color: var(--text);
    border:1px solid var(--border);

    padding: 6px 10px;
    border-radius: 2px;
    max-width: 280px;

    pointer-events: none;
    z-index: 10000;
    font-size: 12px;
    white-space: pre-line;
}

.tooltipHeader{
    color:#fff;
    font-weight:600;
    margin-bottom:2px;
}

.tooltipNet{
    color:var(--muted);
    margin-bottom:6px;
}

.tooltipNet.tooltipPos{
    color:var(--pos);
}

.tooltipNet.tooltipNeg{
    color:var(--neg);
}

.tooltipRows{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tooltipRow{
    display:flex;
    justify-content:space-between;
    gap:14px;
}

.tooltipNum{
    white-space:nowrap;
}

.tooltipNum.tooltipPos{
    color:var(--pos);
}

.tooltipNum.tooltipNeg{
    color:var(--neg);
}

.tooltipLabel{
    color:#fff;
    white-space:nowrap;
}

/* -----------------------------
   UNIT PANEL (left, floating over the map)
------------------------------*/

#unitPanel{
    position:fixed;
    top:120px;
    left:0;
    width:340px;
    max-width:90vw;
    max-height:calc(100vh - 130px);
    background:rgba(21,19,15,0.97);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:10px 10px 30px rgba(0,0,0,0.5);
    overflow-y:auto;
    padding:16px;
    z-index:2000;
}

#unitPanelContent{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:30px;
}

#unitPanelContent h3{
    font-size:14px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--text);
}

/* -----------------------------
   BATTLE PANEL (left, same floating slot as the unit panel above -- the two
   are mutually exclusive, see selectedBattleId in client.js)
------------------------------*/

#battlePanel{
    position:fixed;
    top:120px;
    left:0;
    width:340px;
    max-width:90vw;
    max-height:calc(100vh - 130px);
    background:rgba(21,19,15,0.97);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:10px 10px 30px rgba(0,0,0,0.5);
    overflow-y:auto;
    padding:16px;
    z-index:2000;
}

#battlePanelContent{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:30px;
}

#battlePanelContent h3{
    font-size:14px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--text);
}

/* Two-column layout: side A's roster on the left, side B's on the right,
   with a thin vertical rule between them standing in for the old "против"
   divider text -- reads as "vs" on sight without needing the word. A CSS
   grid, not two independent flex columns -- a min-height guess on the
   labels (tried first) still broke the moment a nation name wrapped to more
   lines than guessed for. Grid row 1 always sizes to whichever label is
   actually tallest and applies that height to *both* label cells, so the
   two unit lists in row 2 line up exactly no matter how long either
   nation's name is or how many lines it wraps to. Every cell gets an
   explicit grid-column/grid-row (via the battleSideLeft/battleSideRight
   modifiers below, combined with battleSideLabel/battleSideUnits' own row)
   rather than relying on auto-placement to guess it from source order.
   See buildBattleDetailHtml for the five grid children this expects: two
   labels, two unit lists, one divider. */
.battleSides{
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    grid-template-rows:auto 1fr;
    column-gap:10px;
    row-gap:6px;
}

.battleSideLeft{
    grid-column:1;
}

.battleSideRight{
    grid-column:3;
}

.battleDivider{
    grid-column:2;
    grid-row:1 / 3;
    width:1px;
    background:var(--border);
}

.battleSideLabel{
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    font-size:11px;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
}

.battleSideDamage{
    color:var(--neg);
    font-weight:600;
    flex-shrink:0;
}

/* One brigade per row, icon-and-stats only, no name -- see battleUnitRowHtml
   in client.js, which deliberately leaves the brigade name out of the
   rendered HTML; hovering a row (delegated the same way any other
   .brigadeChip-style tooltip is, see battleUnitTooltipText) is what surfaces
   the name and everything else. */
.battleSideUnits{
    grid-row:2;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.battleUnitChip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:5px 8px;
}

.battleUnitLeft{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}

.battleUnitChip.battleUnitRowDead{
    opacity:0.55;
}

.battleUnitChip.clickableUnit{
    cursor:pointer;
}

.battleUnitChip.clickableUnit:hover{
    border-color:var(--accent);
}

.battleUnitIcon{
    width:22px;
    height:22px;
    flex-shrink:0;
}

.battleUnitStats{
    flex-shrink:0;
    text-align:right;
    color:var(--muted);
    line-height:1.3;
    font-size:11px;
}

.battleUnitStats .battleDealt{
    color:var(--pos);
}

.battleUnitStats .battleTaken{
    color:var(--neg);
}

.statLabel{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    margin-bottom:-6px;
}

.provinceMeta{
    font-size:13px;
    color:var(--muted);
}

/* -----------------------------
   PROVINCE PANEL (dedicated tab -- opens over the map, same as Management/
   Production/etc, when a province is selected; see renderProvincePanel)
------------------------------*/

#provincePanelContent{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow-y:auto;
}

#provincePanelContent h3{
    font-size:14px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--text);
}

.provinceHeaderBand{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    padding:14px 16px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
	margin-right: 64px;
}

.provinceHeaderBand h3{
    font-size:16px;
    text-transform:none;
    letter-spacing:normal;
    color:var(--text);
}

.provinceHeaderInfo{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.provinceRow{
    display:flex;
    align-items:stretch;
    flex-shrink:0;
}

/* The last row (Buildings/Construct/Garrison) is the one that can genuinely
   run long -- many buildings, a big catalog, a full garrison -- so instead of
   growing the whole panel past the screen, it absorbs whatever vertical space
   is left after the header band and the Economy/Welfare/Demographics row
   above, and each of its own columns scrolls internally (.panelColumn already
   has overflow-y:auto; min-height:0 here is what lets that actually kick in
   inside a flex:1 row instead of the row just growing to fit its content). */
.provinceRowFill{
    flex:1 1 auto;
    min-height:0;
}

.unitTypeMeta{
    font-size:12px;
    color:var(--muted);
    margin-top:-4px;
    letter-spacing:0.02em;
}

/* Flags one insufficient resource within a cost line (see costText/
   patchCostText in client.js) -- the rest of the line stays --muted so only
   the actual blocker stands out. */
.costShort{
    color:var(--neg);
}

.foreignNote,
.hint{
    font-size:12px;
    color:var(--muted);
    font-style:italic;
}

.unitActions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.unitActions button{
    width:auto;
    padding:6px 10px;
    font-size:12px;
}

.unitNameRow{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.iconBtn{
    width:auto;
    padding:2px 7px;
    font-size:12px;
    line-height:1.4;
}

.renameForm{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.renameForm input{
    width:auto;
    flex:1;
    min-width:140px;
    padding:5px 8px;
    margin:0;
    font-size:14px;
}

.renameForm .iconBtn{
    padding:4px 8px;
}

.unitRow.clickableUnit{
    cursor:pointer;
}

.unitRow.clickableUnit:hover{
    border-color:var(--accent);
}

.espionageRow{
    cursor:pointer;
}

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

.espionageRow.active{
    border-color:var(--accent);
    background:var(--accent-hover);
}

.espionageRow select{
    flex-shrink:0;
    width:auto;
}

/* Espionage detail column (#espionageDetail) -- dense grid of small cards so
   operations + every intel category for one nation fit on one screen without
   scrolling, instead of one long stacked list. See espionageDetailSkeletonHtml/
   espionageBodyHtml in client.js. */
.espHeader{
    display:flex;
    align-items:center;
    gap:10px;
}

.espHeader .panelTitle{
    margin:0;
}

.espHeaderFlag{
    width:36px;
    height:24px;
    flex-shrink:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:2px;
}

.espHeaderFlag svg{
    width:100%;
    height:100%;
    display:block;
}

#espionageDetail{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:12px;
}

#espionageDetail select{
    max-width:260px;
}

#espionageDetail [data-field="espBody"]{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:start;
}

.espSection{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
}

.espSectionTitle{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    margin:0 0 4px;
}

.espSection .provinceMeta{
    margin:0;
    line-height:1.5;
}

.espActionHint{
    margin:2px 0 0;
    line-height:1.3;
}

.espRelGrid{
    display:flex;
    flex-wrap:wrap;
    gap:4px 14px;
}

.espRelRow{
    font-size:12px;
    white-space:nowrap;
}

.militarySection{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:12px;
}

.militarySectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.militarySection h3{
    font-size:15px;
    font-weight:600;
    color:var(--text);
}

#createDivisionBtn{
    width:auto;
    padding:6px 12px;
    font-size:13px;
}

#createDivisionBtn:disabled,
.unitActions button:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.unitList{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.unitRow{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
    font-size:13px;
}

.unitRow.readonly{
    opacity:0.9;
}

/* -----------------------------
   PROVINCES TAB (sortable table of controlled provinces; see
   renderProvincesPanel in client.js). Header and rows share one
   grid-template-columns so every column lines up regardless of how much
   content (e.g. a variable number of resource-deposit icons) a given cell
   holds -- a plain flex row would let that cell's width shove its neighbours
   out of alignment from row to row.
------------------------------*/

.provinceTable{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

/* Rendered as the first row inside .provinceTableBody itself (not a sibling
   outside the scroll area) and pinned there with position:sticky -- that way
   it shares the exact same content width as every data row, scrollbar and
   all, instead of drifting out of alignment with them whenever the list is
   tall enough to scroll (see renderProvincesPanel/provincesHeaderHtml). */
.provinceTableHeader{
    position:sticky;
    top:0;
    z-index:1;
    display:grid;
    grid-template-columns:85px repeat(5, 1fr) 115px;
    gap:8px;
    padding:4px 8px;
    background:var(--bg-secondary);
    flex-shrink:0;
}

.provinceSortHeader{
    width:auto;
    background:none;
    border:none;
    padding:4px 0;
    margin:0;
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--muted);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.3px;
    text-align:left;
    white-space:nowrap;
    cursor:pointer;
}

.provinceSortHeader:hover{
    background:none;
    border:none;
    color:var(--text);
}

.provinceSortHeader.active{
    color:var(--accent);
}

.sortArrow{
    font-size:10px;
}

.provinceTableBody{
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow-y:auto;
    min-height:0;
}

.provinceListRow{
    display:grid;
    grid-template-columns:90px repeat(5, 1fr) 90px;
    gap:8px;
    align-items:center;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
    font-size:13px;
    cursor:pointer;
}

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

.provinceListRow.active{
    border-color:var(--accent);
}

.provinceListLabel{
    font-weight:600;
}

.provinceListStat{
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.notifRow{
    display:flex;
    align-items:baseline;
    gap:8px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-left:3px solid var(--muted);
    border-radius:2px;
    padding:6px 8px;
    font-size:13px;
}

.notifRow.notif-province_lost{
    border-left-color:var(--neg);
}

.notifRow.notif-brigade_lost{
    border-left-color:var(--rust);
}

.notifRow.notif-resource_depleted{
    border-left-color:var(--accent);
}

.notifRow.notif-province_captured{
    border-left-color:var(--pos);
}

.notifRow.notif-capital_lost{
    border-left-color:var(--neg);
    border-left-width:5px;
}

.notifRow.notif-capital_captured{
    border-left-color:var(--pos);
    border-left-width:5px;
}

.notifRow.notif-capital_founded{
    border-left-color:var(--accent);
    border-left-width:5px;
}

.notifRow.notif-nation_destroyed{
    border-left-color:var(--rust);
    border-left-width:5px;
}

.notifRow.notif-construction_completed,
.notifRow.notif-repair_completed,
.notifRow.notif-equipment_produced,
.notifRow.notif-brigade_completed{
    border-left-color:var(--pos);
}

.notifRow.notif-revolt{
    border-left-color:var(--rust);
}

.notifRow.notif-province_assimilated{
    border-left-color:var(--accent);
}

.notifRow.notif-rebels_led{
    border-left-color:var(--rust);
}

/* notif-claim_decayed intentionally left at the base .notifRow's default
   border color -- a background event, not one that needs to stand out the
   way an actual ownership/territory change does. */

.notifIcon{
    flex-shrink:0;
}

.tradeRow{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
    font-size:13px;
}

.tradeRowIcon{
    flex-shrink:0;
    font-size:16px;
}

.tradeRowInfo{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tradeAcceptQty{
    width:70px;
    flex:none;
    margin:0;
    padding:5px 8px;
    font-size:13px;
}

.tradeMarketHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.tradeMarketHeader select{
    width:auto;
    margin:0;
    padding:6px 10px;
    font-size:12px;
}

.notifMessage{
    flex:1;
}

.notifTime{
    color:var(--muted);
    font-size:11px;
    flex-shrink:0;
    white-space:nowrap;
}

.unitLabel{
    min-width:110px;
}

.unitLoc{
    color:var(--muted);
    min-width:70px;
}

.strengthMini{
    color:var(--muted);
    font-size:11px;
}

/* Three vertical bars (strength, morale, entrenchment) shown side by side wherever
   a brigade's state is displayed. No numeric labels -- hover a bar for the exact value. */
.vitalBars{
    display:inline-flex;
    vertical-align:middle;
    align-items:flex-end;
    gap:3px;
    height:26px;
    flex-shrink:0;
}

.vitalBar{
    width:7px;
    height:100%;
    background:#0b0a08;
    border:1px solid var(--border);
    border-radius:1px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    cursor:default;
}

.vitalBarFill{
    width:100%;
}

.vitalStrengthFill{
    background:var(--green);
}

.vitalMoraleFill{
    background:#7a6a2e;
}

.vitalMoraleFill.moraleMid{
    background:#8c6a2e;
}

.vitalMoraleFill.moraleLow{
    background:var(--rust);
}

.vitalEntrenchmentFill{
    background:#4a5a6b;
}

.deselectBtn{
    width:auto;
    padding:2px 7px;
    font-size:11px;
    line-height:1.4;
    margin-left:auto;
    flex-shrink:0;
}

.movingTag{
    color:var(--accent);
    font-size:12px;
}

.battleTag{
    color:#c9704f;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.5px;
}

.supplyTag{
    color:#c9a23c;
}

.supplyTag.supplyTagCutoff{
    color:var(--neg);
}

.supplyMeta{
    color:#c9a23c;
}

.unitRow button,
.divisionHeader button{
    width:auto;
    padding:5px 10px;
    font-size:12px;
}

.divisionCard{
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
    padding:8px;
}

.divisionHeader{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.divisionBrigades{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.brigadeChip{
    display:flex;
    flex-direction:column;
    gap:4px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
    font-size:12px;
}

.brigadeChipHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.brigadeChipName{
    display:flex;
    align-items:center;
    gap:6px;
}

.brigadeChipActions{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.brigadeChipActions button,
.brigadeChipHeader button{
    width:auto;
    padding:4px 8px;
    font-size:11px;
    flex-shrink:0;
}

/* -----------------------------
   GAME PANEL LAYOUT (production / management)
------------------------------*/

.panelColumns{
    display:flex;
    height:100%;
}

.panelColumn{
    flex:1;
    min-width:0;
    min-height:0;
    border:1px solid var(--border);
    border-radius:2px;
    background:var(--bg-secondary);
    padding:14px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.panelColumnWide{
    flex:1.5;
}

.panelTitle{
    font-size:14px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--text);
}

/* Section title + "[?]" info icon on the same row, icon pinned top-right --
   used to move long-winded explanations out of the panel body and into a
   hover tooltip instead (see setupDataTooltips in client.js). */
.sectionHeaderRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.infoIcon{
    flex-shrink:0;
    font-size:11px;
    color:var(--muted);
    border:1px solid var(--border);
    border-radius:2px;
    padding:1px 5px;
    cursor:help;
}

/* Pins the rations slider to the bottom of managementPanel's left column,
   below the (variable-height) data readouts above it -- see index.html. */
.managementRationsBlock{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
}

#icSummary{
    font-size:11px;
    color:var(--muted);
    text-transform:none;
    letter-spacing:0;
}

.globalStat{
    font-size:13px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:8px 10px;
}

.sliderBlock{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.sliderBlock label{
    font-size:13px;
    display:flex;
    justify-content:space-between;
    gap:8px;
}

input[type="range"]{
    width:100%;
    padding:0;
    margin:0;
    accent-color:var(--accent);
}

.checkboxBlock{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    cursor:pointer;
}

.checkboxBlock input[type="checkbox"]{
    accent-color:var(--accent);
    width:16px;
    height:16px;
}

.priorityToggleBtn{
    width:auto;
    padding:4px 10px;
    font-size:12px;
    margin:4px 0;
}

.priorityToggleBtn.active{
    background:linear-gradient(180deg,#5a4e33,#3d3320);
    border-color:var(--accent);
    color:var(--accent);
}

.leadRebelsBtn{
    width:auto;
    padding:4px 10px;
    font-size:12px;
    margin:4px 0;
    background:linear-gradient(180deg,#8c4a35,#6b3527);
    border-color:var(--rust);
}

.leadRebelsBtn:hover{
    background:linear-gradient(180deg,#a25a41,#7a3d2c);
}

.catalogCard{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* Brigade production catalog (see buildBrigadeCatalog in client.js): one
   column per individual stat, one row per unit type. A two-row spanning
   header groups the columns into the five logical sections -- name, stats,
   build (cost/IC/days), upkeep, actions -- each closed off by a thick
   accent-colored .groupEnd rule; the stat columns within a group only get
   the ordinary thin --border rule, and rows are separated the same thin way.
   overflow-x lets it scroll rather than crush its many columns if the
   narrower panel column can't fit them all at once. */
.unitCatalogWrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:2px;
}

.unitCatalogTable{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    background:var(--panel);
}

.unitCatalogTable th{
    text-align:left;
    padding:6px 8px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted);
    white-space:nowrap;
}

.unitCatalogTable thead tr:first-child th{
    text-align:center;
    border-bottom:1px solid var(--border);
}

.unitCatalogTable thead tr:last-child th{
    border-bottom:2px solid var(--accent);
}

.unitCatalogTable td{
    padding:6px 8px;
    vertical-align:middle;
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
}

.unitCatalogTable th{
    border-right:1px solid var(--border);
}

.unitCatalogTable tbody tr:last-child td{
    border-bottom:none;
}

.unitCatalogTable th:last-child,
.unitCatalogTable td:last-child{
    border-right:none;
}

/* Marks the last column of a logical group -- overrides the thin per-column
   rule above with the thick accent one that actually separates the groups.
   Needs the th/td element in the selector to match :last-child's specificity
   above (a bare .groupEnd class loses that tie on specificity alone) --
   "Бой"/"Действия" is both a group end *and* thead row 2's actual last
   cell (Действия itself only lives in row 1, via rowspan), so without this
   the :last-child reset would win and silently drop that one divider. */
.unitCatalogTable th.groupEnd,
.unitCatalogTable td.groupEnd{
    border-right:2px solid var(--accent);
}

.ucName{
    font-weight:600;
    white-space:nowrap;
}

.numCell{
    text-align:center;
    white-space:nowrap;
}

.numCell.muted{
    color:var(--muted);
}

.armorYes{
    color:var(--accent);
    font-weight:600;
}

.ucActions{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:100px;
}

.ucActions button{
    width:auto;
    padding:5px 10px;
    font-size:11px;
}

.catalogHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:14px;
}

.catalogHeader button{
    width:auto;
    padding:6px 12px;
    font-size:12px;
}

.catalogHeader button:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.projectRow{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:8px 10px;
}

.projectInfo{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:13px;
}

.projectBtns{
    display:flex;
    gap:4px;
}

.projectBtns button{
    width:auto;
    padding:4px 8px;
    font-size:12px;
}

.projectBtns button:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.projectRow.paused{
    opacity:0.6;
}

.projectRow.supplyFull{
    background:rgba(127,168,100,0.14);
    border-color:rgba(127,168,100,0.4);
}

.projectRow.supplyPartial{
    background:rgba(184,146,63,0.14);
    border-color:rgba(184,146,63,0.4);
}

.projectRow.supplyNone{
    background:rgba(201,106,74,0.14);
    border-color:rgba(201,106,74,0.4);
}

/* Planned (unpaid, paper-only) entries -- always at the bottom of their
   queue, never draw supply, so they get their own color rather than any of
   the supply states above. */
.projectRow.planned{
    background:rgba(90,130,200,0.16);
    border-color:rgba(90,130,200,0.45);
}

.plannedTag{
    color:#7fa0d8;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.techCard.techDone{
    border-color:var(--accent);
}

.techCard.techUnknown .unitTypeMeta{
    color:var(--muted);
    font-style:italic;
}

.needRow{
    align-items:flex-start;
}

.needRow .projectInfo label{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:13px;
}

.pausedTag{
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.progressTrack{
    height:8px;
    background:#0b0a08;
    border:1px solid var(--border);
    border-radius:1px;
    overflow:hidden;
}

.progressFill{
    height:100%;
    width:0%;
    background:var(--accent);
}

.panelSubtitle{
    font-size:12px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--muted);
    margin:10px 0 6px;
}

.buildingList{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.buildingRow{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:6px 8px;
    font-size:12px;
}

.buildingRow.paused{
    opacity:0.6;
}

.buildingLabel{
    flex:0 0 auto;
    white-space:nowrap;
}

.buildingHpTrack{
    flex:1;
    min-width:30px;
}

.buildingHpText{
    flex:0 0 auto;
    color:var(--muted);
    white-space:nowrap;
}

.buildingRow button{
    width:auto;
    padding:4px 8px;
    font-size:11px;
}

.buildingRow button:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.buildingCatalog{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* -----------------------------
   DIPLOMACY PANEL
------------------------------*/

.diplomacyRow{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:2px;
    padding:8px 10px;
    flex-wrap:wrap;
}

.diplomacyFlag{
    flex:0 0 auto;
    width:28px;
    height:19px;
    border:1px solid var(--border);
    overflow:hidden;
}

.diplomacyFlag svg{
    width:100%;
    height:100%;
    display:block;
}

.diplomacyName{
    flex:1 1 140px;
    min-width:120px;
    font-size:13px;
    font-weight:bold;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.diplomacyNameSub{
    font-size:11px;
    font-weight:normal;
    color:var(--muted);
}

.diplomacyToggles{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:12px;
}

.diplomacyToggles button{
    width:auto;
    padding:4px 8px;
    font-size:11px;
}

.diplomacyToggles button.on{
    border-color:var(--accent);
    color:var(--accent);
}

.diplomacyTheirs{
    flex-basis:100%;
    color:var(--muted);
    font-size:11px;
}

.diplomacyConflictStatus{
    color:var(--muted);
    font-size:12px;
    margin-right:4px;
}

/* -----------------------------
   DEPLOYMENT PANEL (top-right)
------------------------------*/

#deploymentPanel{
    position:fixed;
    top:130px;
    right:0;
    width:250px;
    max-height:40vh;
    overflow-y:auto;
    background:rgba(21,19,15,0.97);
    border-left:1px solid var(--border);
    border-bottom:1px solid var(--border);
    box-shadow:-10px 10px 30px rgba(0,0,0,0.5);
    padding:12px;
    z-index:2000;
    display:flex;
    flex-direction:column;
    gap:8px;
}

#deploymentPanel.hidden{
    display:none;
}

#deploymentPanel h4{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
}

#deploymentList{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.deployRow{
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:2px;
    padding:8px 10px;
    font-size:13px;
    cursor:pointer;
    user-select:none;
}

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

.deployRow.armed{
    border-color:var(--accent);
    background:var(--accent-hover);
}

/* -----------------------------
   MAP MODE BAR (bottom-right, floating over the map)
------------------------------*/

#mapModeBar{
    position:fixed;
    bottom:12px;
    right:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:1500;
}

/* Specificity has to match #mapModeBar's own `display` above (an ID rule
   beats the bare .hidden{display:none} everywhere else in the stylesheet
   relies on) -- same "#id.hidden" override the other floating panels
   (#deploymentPanel etc.) already use for the same reason. */
#mapModeBar.hidden{
    display:none;
}

.mapModeBtn{
    width:34px;
    height:34px;
    padding:0;
    font-size:16px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:rgba(28,25,19,0.9);
    color:var(--text);
    font-family:inherit;
    cursor:pointer;
    border-radius:2px;
}

.mapModeBtn:hover{
    background:#3a3324;
    border-color:var(--accent);
}

.mapModeBtn.active{
    background:var(--accent-hover);
    border-color:var(--accent);
}

/* -----------------------------
   SELECTION HINT / TOAST
------------------------------*/

#selectionHintBanner{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(21,19,15,0.95);
    border:1px solid var(--accent);
    color:var(--text);
    padding:10px 16px;
    border-radius:2px;
    display:flex;
    align-items:center;
    gap:12px;
    z-index:5000;
    font-size:14px;
}

#selectionHintBanner button{
    width:auto;
    padding:4px 10px;
    font-size:12px;
}

#actionToast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(140,74,53,0.95);
    color:var(--text);
    border:1px solid rgba(200,180,140,0.3);
    padding:10px 16px;
    border-radius:2px;
    z-index:5000;
    font-size:13px;
}

/* -----------------------------
   CONFIRM DIALOG
------------------------------*/

#confirmDialog{
    position:fixed;
    inset:0;
    background:rgba(11,10,8,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9000;
}

#confirmDialogBox{
    width:360px;
    max-width:90vw;
    background:rgba(28,25,19,0.98);
    border:1px solid var(--border);
    border-radius:2px;
    padding:24px;
    box-shadow:0 20px 60px rgba(0,0,0,0.7);
}

#confirmDialogMessage{
    font-size:14px;
    line-height:1.5;
    margin-bottom:20px;
}

#confirmDialogActions{
    display:flex;
    gap:10px;
}

#confirmDialogActions button{
    flex:1;
}

#confirmDialogYes{
    background:linear-gradient(180deg,#8c4a35,#6b3527);
    border-color:var(--rust);
}

#confirmDialogYes:hover{
    background:linear-gradient(180deg,#a25a41,#7a3d2c);
}

/* Same overlay shape as #confirmDialog, just wider (it holds a whole
   government/flag form, not one line of text) and independently scrollable
   (a short viewport shouldn't be able to push the confirm/cancel buttons
   off-screen). */
#leadRebelsDialog{
    position:fixed;
    inset:0;
    background:rgba(11,10,8,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9000;
}

#leadRebelsDialogBox{
    width:420px;
    max-width:90vw;
    max-height:90vh;
    overflow-y:auto;
    background:rgba(28,25,19,0.98);
    border:1px solid var(--border);
    border-radius:2px;
    padding:24px;
    box-shadow:0 20px 60px rgba(0,0,0,0.7);
}

#leadRebelsDialogBox h2{
    margin-top:0;
}

#leadRebelsNamePreview{
    font-weight:600;
    color:var(--text);
}

#leadRebelsDialogActions{
    display:flex;
    gap:10px;
    margin-top:16px;
}

#leadRebelsDialogActions button{
    flex:1;
}

#leadRebelsConfirmBtn{
    background:linear-gradient(180deg,#8c4a35,#6b3527);
    border-color:var(--rust);
}

#leadRebelsConfirmBtn:hover{
    background:linear-gradient(180deg,#a25a41,#7a3d2c);
}

/* Above everything, including #confirmDialog -- a lost connection outranks
   whatever the player was doing, confirmation dialogs included. */
#connectionLostOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.82);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20000;
}

#connectionLostBox{
    padding:28px 48px;
    background:rgba(28,25,19,0.98);
    border:1px solid var(--neg);
    border-radius:2px;
    box-shadow:0 20px 60px rgba(0,0,0,0.7);
    color:var(--neg);
    font-size:28px;
    font-weight:700;
    letter-spacing:3px;
    text-align:center;
}

/* -----------------------------
   UTILITIES
------------------------------*/

.hidden{
    display:none;
}

#selectionHintBanner.hidden,
#actionToast.hidden,
#confirmDialog.hidden,
#leadRebelsDialog.hidden,
#connectionLostOverlay.hidden{
    display:none;
}