/* ============================================================
   MOBILE V2 OVERRIDE LAYER
   ------------------------------------------------------------
   This file is loaded AFTER public/style.css and is the safe
   place for Android/mobile-only UI fixes.

   Rule:
   - desktop/PC styles stay in style.css;
   - mobile fixes must be scoped with html.mobile-runtime;
   - do not put generic desktop selectors here.

   Current target:
   - shared V2 building-modal container on Android;
   - subwindows reuse the building modal container;
   - fixed bottom mobile bar is preserved;
   - content scrolls inside the modal body.
   ============================================================ */

html.mobile-runtime{
    --mobile-bottom-bar-h:92px;
    --mobile-modal-header-h:64px;
    --mobile-modal-gap:12px;
}

/* Fixed bottom controls used by the current Android layout. */
html.mobile-runtime .mobile-action-bar{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:linear-gradient(to bottom, rgba(20,9,2,.88), rgba(4,2,0,.98)) !important;
    border-top:1px solid rgba(205,165,85,.45) !important;
    z-index:30000 !important;
}

html.mobile-runtime .mobile-action-button{
    min-width:118px !important;
    height:48px !important;
    border:2px solid #d2b46c !important;
    border-radius:10px !important;
    background:linear-gradient(to bottom,#7a430b 0%,#502605 55%,#321404 100%) !important;
    color:#fff3c7 !important;
    font:bold 19px Arial, sans-serif !important;
    text-shadow:1px 1px 2px #000 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 9px rgba(0,0,0,.65) !important;
}

/* Universal Android/mobile V2 window. Used by building windows and subwindows. */
html.mobile-runtime #buildingModalV2.game-modal-v2.is-open,
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="flex"],
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="block"]{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-left:0 !important;
    border-right:0 !important;
    background:url('assets/menu/background.png') repeat !important;
    z-index:19000 !important;
}

html.mobile-runtime #buildingModalV2 .game-modal-v2__header{
    flex:0 0 var(--mobile-modal-header-h) !important;
    height:var(--mobile-modal-header-h) !important;
    min-height:var(--mobile-modal-header-h) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    padding:8px 66px 8px 18px !important;
    box-sizing:border-box !important;
    border-bottom:2px solid rgba(207,165,89,.55) !important;
}

html.mobile-runtime #buildingModalV2 .game-modal-v2__title{
    display:block !important;
    max-width:calc(100vw - 96px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:22px !important;
    line-height:1.1 !important;
    text-align:center !important;
}

html.mobile-runtime #buildingModalV2 .game-modal-v2__close{
    position:absolute !important;
    right:16px !important;
    top:9px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    font-size:30px !important;
    line-height:1 !important;
    z-index:2 !important;
}

html.mobile-runtime #buildingModalV2 .game-modal-v2__body{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    width:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    padding:12px var(--mobile-modal-gap) 18px var(--mobile-modal-gap) !important;
    box-sizing:border-box !important;
}

/* Use one light content surface everywhere. */
html.mobile-runtime #buildingModalV2 .game-modal-v2-card,
html.mobile-runtime #buildingModalV2 .building-v2-card,
html.mobile-runtime #buildingModalV2 .market-lot-card,
html.mobile-runtime #buildingModalV2 .trade-card,
html.mobile-runtime #buildingModalV2 .unit-card{
    background:rgba(189,151,113,.62) !important;
    border:1px solid rgba(70,35,10,.42) !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
}

/* Mobile buttons inside V2 windows. */
html.mobile-runtime #buildingModalV2 .game-button,
html.mobile-runtime #buildingModalV2 .info-action-button,
html.mobile-runtime #buildingModalV2 .unit-train-button{
    width:100% !important;
    max-width:310px !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 12px !important;
    font-size:15px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

html.mobile-runtime #buildingModalV2 .building-v2-actions-grid,
html.mobile-runtime #buildingModalV2 .game-modal-v2-actions,
html.mobile-runtime #buildingModalV2 .market-actions,
html.mobile-runtime #buildingModalV2 .trade-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin:10px auto !important;
    box-sizing:border-box !important;
}

/* Training queue in building info: it follows the main body scroll on Android. */
html.mobile-runtime #buildingModalV2 .building-v2-queue,
html.mobile-runtime #buildingModalV2 .training-queue-box{
    max-height:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto !important;
    touch-action:auto !important;
}

/* Resource / trade form alignment on Android. */
html.mobile-runtime #buildingModalV2 .trade-resource-grid,
html.mobile-runtime #buildingModalV2 .resource-input-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    gap:9px !important;
}

html.mobile-runtime #buildingModalV2 .trade-resource-grid label,
html.mobile-runtime #buildingModalV2 .resource-input-row{
    display:grid !important;
    grid-template-columns:92px minmax(110px, 170px) !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:290px !important;
    box-sizing:border-box !important;
}

html.mobile-runtime #buildingModalV2 input,
html.mobile-runtime #buildingModalV2 select,
html.mobile-runtime #buildingModalV2 textarea{
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* Hide old subwindow shells on Android when their content is rendered through buildingModalV2. */
html.mobile-runtime #unitTrainingModal:not(.is-open),
html.mobile-runtime #tradeModal:not(.is-open),
html.mobile-runtime #marketBuyModal:not(.is-open),
html.mobile-runtime #marketSellModal:not(.is-open),
html.mobile-runtime #marketMyLotsModal:not(.is-open){
    display:none !important;
}

/* No visible custom scrollbars on Android. */
html.mobile-runtime #buildingModalV2 *::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
}

/* ============================================================
   Android/mobile V2 polish pass: 2026-05-15
   ------------------------------------------------------------
   Keep all rules scoped to html.mobile-runtime so PC UI is safe.
   Fixes:
   - unified mobile card/list layout for market lots;
   - centered training quantity/available row;
   - mobile sell-lot form visual alignment;
   - bottom Menu/Close bar stays clickable above every V2 window.
   ============================================================ */

html.mobile-runtime .mobile-action-bar{
    z-index:70000 !important;
    pointer-events:auto !important;
}
html.mobile-runtime .mobile-action-button{
    pointer-events:auto !important;
    cursor:pointer !important;
    opacity:1 !important;
}
html.mobile-runtime #buildingModalV2,
html.mobile-runtime #buildingModalV2Backdrop{
    z-index:19000 !important;
}
html.mobile-runtime #buildingModalV2 .game-modal-v2__body{
    padding-bottom:22px !important;
}

/* Training: centered Quantity / Available / Train control row. */
html.mobile-runtime #buildingModalV2 .unit-train-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin:12px auto 0 auto !important;
    text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row label{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:290px !important;
    margin:0 auto !important;
    text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row span{
    display:block !important;
    width:100% !important;
    max-width:290px !important;
    margin:0 auto !important;
    text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .unit-count-input{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    height:40px !important;
    text-align:center !important;
    border:2px solid rgba(201,164,91,.8) !important;
    border-radius:7px !important;
    background:#160800 !important;
    color:#fff3c7 !important;
    font:bold 21px Arial, sans-serif !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.65) !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row .unit-train-button{
    margin-top:4px !important;
}

/* Market lot cards: equal card rhythm and equal buttons. */
html.mobile-runtime #buildingModalV2 #myMarketLotsList,
html.mobile-runtime #buildingModalV2 #marketLotsList{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-card{
    display:block !important;
    width:100% !important;
    min-height:132px !important;
    padding:14px 12px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-card .training-queue-text{
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
    min-height:104px !important;
    box-sizing:border-box !important;
    line-height:1.28 !important;
    text-align:left !important;
}
html.mobile-runtime #buildingModalV2 .trade-buy-form{
    width:100% !important;
    margin:8px auto 0 auto !important;
    display:flex !important;
    justify-content:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-buy-button,
html.mobile-runtime #buildingModalV2 .trade-cancel-button{
    width:100% !important;
    max-width:310px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 auto !important;
    font-size:16px !important;
}

/* Sell resource form: stacked, centered, game-styled fields. */
html.mobile-runtime #buildingModalV2 .trade-lot-form{
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
    justify-items:center !important;
    align-items:center !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row label{
    display:grid !important;
    grid-template-columns:92px minmax(130px, 190px) !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:300px !important;
    margin:0 auto !important;
    text-align:right !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row select,
html.mobile-runtime #buildingModalV2 .trade-lot-row input{
    width:100% !important;
    max-width:190px !important;
    min-width:130px !important;
    height:40px !important;
    padding:0 9px !important;
    border:2px solid rgba(201,164,91,.75) !important;
    border-radius:7px !important;
    background:#160800 !important;
    color:#fff3c7 !important;
    font:bold 18px Arial, sans-serif !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.65) !important;
    appearance:auto !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-form .trade-send-button{
    width:100% !important;
    max-width:310px !important;
    height:44px !important;
    margin-top:4px !important;
}
html.mobile-runtime #buildingModalV2 .trade-coords-note{
    width:100% !important;
    max-width:315px !important;
    margin:4px auto !important;
    text-align:center !important;
    line-height:1.25 !important;
}

/* ============================================================
   Android/mobile V2 polish pass 2
   - compact training amount control;
   - compact, equal My Lots cards without separator dots;
   - game styled dropdown/select fields;
   - bottom Menu/Close must stay clickable.
   ============================================================ */

html.mobile-runtime .mobile-action-bar,
html.mobile-runtime .mobile-action-bar *{
    pointer-events:auto !important;
}
html.mobile-runtime .mobile-action-bar{
    z-index:90000 !important;
}
html.mobile-runtime #buildingModalV2{
    z-index:19000 !important;
}

/* Training quantity: use compact field, centered with available amount. */
html.mobile-runtime #buildingModalV2 .unit-train-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    align-items:center !important;
    gap:7px !important;
    max-width:320px !important;
    margin:12px auto 0 auto !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row label{
    display:grid !important;
    grid-template-columns:auto 118px !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:285px !important;
    margin:0 auto !important;
    text-align:right !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row span{
    width:100% !important;
    max-width:285px !important;
    text-align:center !important;
    margin:0 auto !important;
}
html.mobile-runtime #buildingModalV2 .unit-count-input{
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 9px !important;
    text-align:center !important;
    border:2px solid rgba(201,164,91,.75) !important;
    border-radius:7px !important;
    background:#160800 !important;
    color:#fff3c7 !important;
    font:bold 18px Arial, sans-serif !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.65) !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row .unit-train-button{
    width:100% !important;
    max-width:285px !important;
    height:42px !important;
    min-height:42px !important;
    margin-top:4px !important;
}

/* One shared mobile field style for selects and inputs in V2 windows. */
html.mobile-runtime #buildingModalV2 select,
html.mobile-runtime #buildingModalV2 input[type="number"],
html.mobile-runtime #buildingModalV2 input[type="text"]{
    border:2px solid rgba(201,164,91,.75) !important;
    border-radius:7px !important;
    background:#160800 !important;
    color:#fff3c7 !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.65) !important;
    font:bold 18px Arial, sans-serif !important;
    min-height:38px !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 select{
    padding:0 30px 0 10px !important;
    appearance:auto !important;
    -webkit-appearance:menulist !important;
}

/* Trade recipient select and coordinate inputs: centered and clean. */
html.mobile-runtime #buildingModalV2 .trade-target-choice,
html.mobile-runtime #buildingModalV2 .market-filter-row label{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
    max-width:330px !important;
    margin:0 auto 10px auto !important;
    text-align:center !important;
    justify-items:center !important;
}
html.mobile-runtime #buildingModalV2 #tradeTargetSelect,
html.mobile-runtime #buildingModalV2 #marketLotFilter{
    width:100% !important;
    max-width:330px !important;
    height:44px !important;
}
html.mobile-runtime #buildingModalV2 .trade-coords-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    justify-items:center !important;
    align-items:center !important;
    max-width:300px !important;
    margin:8px auto !important;
    text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-coords-row > span{
    grid-column:1 / -1 !important;
    font-weight:bold !important;
    color:#fff0bd !important;
}
html.mobile-runtime #buildingModalV2 .trade-coords-row label{
    display:grid !important;
    grid-template-columns:auto 92px !important;
    gap:6px !important;
    align-items:center !important;
    justify-content:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-coords-row input{
    width:92px !important;
    max-width:92px !important;
}

/* Resource cargo fields: base mobile size. */
html.mobile-runtime #buildingModalV2 .trade-resource-grid label,
html.mobile-runtime #buildingModalV2 .resource-input-row{
    grid-template-columns:108px 145px !important;
    max-width:285px !important;
}
html.mobile-runtime #buildingModalV2 .trade-resource-grid input,
html.mobile-runtime #buildingModalV2 .resource-input-row input{
    width:145px !important;
    max-width:145px !important;
    height:40px !important;
}

/* Sell lot form: two clean dropdown/amount groups. */
html.mobile-runtime #buildingModalV2 .trade-lot-form{
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
    gap:12px !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    width:100% !important;
    justify-items:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row label{
    display:grid !important;
    grid-template-columns:95px 170px !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    max-width:300px !important;
    text-align:right !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row select,
html.mobile-runtime #buildingModalV2 .trade-lot-row input{
    width:170px !important;
    max-width:170px !important;
    height:40px !important;
}

/* My lots: compact equal cards, no bullet-dot separators. */
html.mobile-runtime #buildingModalV2 #myMarketLotsList{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
    max-width:330px !important;
    margin:0 auto !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-card--mine,
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-lot-card{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:11px 12px !important;
    margin:0 auto !important;
    border-radius:8px !important;
    overflow:visible !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-card--mine .trade-lot-content,
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-lot-card .training-queue-text{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    min-height:0 !important;
    height:auto !important;
    line-height:1.25 !important;
    text-align:left !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-title{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    color:#fff3c7 !important;
    text-shadow:1px 1px 2px #000 !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-status{
    font-size:15px !important;
    opacity:.9 !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-resources{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-meta{
    font-size:14px !important;
}
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-buy-form{
    margin-top:4px !important;
}
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-cancel-button{
    width:100% !important;
    max-width:270px !important;
    height:40px !important;
    min-height:40px !important;
    font-size:15px !important;
}

/* ============================================================
   Android/mobile V2 polish pass 3
   - compact numeric inputs (training and market sell);
   - cleaner in-window dropdowns;
   - compact equal My Lots cards without visual separator dots;
   - keep PC untouched.
   ============================================================ */

html.mobile-runtime #buildingModalV2 .unit-train-row{
    max-width:300px !important;
    gap:6px !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row label{
    grid-template-columns:auto 76px !important;
    max-width:245px !important;
    gap:8px !important;
}
html.mobile-runtime #buildingModalV2 .unit-count-input,
html.mobile-runtime #buildingModalV2 input.unit-count-input{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 6px !important;
    font:bold 18px Arial, sans-serif !important;
}
html.mobile-runtime #buildingModalV2 .unit-train-row span{
    max-width:245px !important;
    font-size:16px !important;
}

/* Compact numeric fields for sell/resource forms, using the trade form as baseline. */
html.mobile-runtime #buildingModalV2 .trade-lot-row input,
html.mobile-runtime #buildingModalV2 .trade-resource-grid input,
html.mobile-runtime #buildingModalV2 .resource-input-row input{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 7px !important;
    text-align:center !important;
    font:bold 17px Arial, sans-serif !important;
}

/* In-window game dropdowns: dark, compact, aligned. */
html.mobile-runtime #buildingModalV2 select,
html.mobile-runtime #buildingModalV2 .trade-lot-row select,
html.mobile-runtime #buildingModalV2 #tradeTargetSelect,
html.mobile-runtime #buildingModalV2 #marketLotFilter{
    height:38px !important;
    min-height:38px !important;
    max-width:230px !important;
    width:100% !important;
    padding:0 32px 0 12px !important;
    border:2px solid rgba(201,164,91,.78) !important;
    border-radius:8px !important;
    background-color:#160800 !important;
    color:#fff3c7 !important;
    font:bold 17px Arial, sans-serif !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.12) !important;
    appearance:auto !important;
    -webkit-appearance:menulist !important;
}
html.mobile-runtime #buildingModalV2 #tradeTargetSelect{
    max-width:310px !important;
    height:42px !important;
}

/* Sell form: labels above controls, visually cleaner on narrow Android screens. */
html.mobile-runtime #buildingModalV2 .trade-lot-form{
    max-width:310px !important;
    gap:12px !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
    align-items:start !important;
    justify-items:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row label{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
    width:100% !important;
    max-width:145px !important;
    text-align:center !important;
    justify-items:center !important;
    color:#fff0bd !important;
    font:bold 16px Arial, sans-serif !important;
    text-shadow:1px 1px 2px #000 !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row label select,
html.mobile-runtime #buildingModalV2 .trade-lot-row label input{
    width:100% !important;
    max-width:145px !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-row label input{
    max-width:96px !important;
}

/* Trade send resources: resource name + compact amount field. */
html.mobile-runtime #buildingModalV2 .trade-resource-grid label,
html.mobile-runtime #buildingModalV2 .resource-input-row{
    grid-template-columns:115px 96px !important;
    max-width:235px !important;
    gap:8px !important;
}

/* My lots compact card layout. */
html.mobile-runtime #buildingModalV2 #myMarketLotsList{
    max-width:320px !important;
    gap:9px !important;
}
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-lot-card,
html.mobile-runtime #buildingModalV2 .trade-lot-card--mine{
    min-height:0 !important;
    padding:10px 11px !important;
    border-radius:8px !important;
}
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-lot-card .training-queue-text,
html.mobile-runtime #buildingModalV2 .trade-lot-card--mine .trade-lot-content{
    gap:6px !important;
    min-height:0 !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-title{
    justify-content:flex-start !important;
    gap:8px !important;
    font-size:16px !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-status::before{
    content:'— ' !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-resources{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    align-items:center !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-resource-line{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
    justify-items:start !important;
    min-width:0 !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-resource-line em{
    font-style:normal !important;
    color:#2b1708 !important;
    font-size:14px !important;
    text-shadow:none !important;
}
html.mobile-runtime #buildingModalV2 .trade-lot-resource-line .trade-resource-item{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
}
html.mobile-runtime #buildingModalV2 #myMarketLotsList .trade-cancel-button{
    max-width:230px !important;
    height:38px !important;
    min-height:38px !important;
    font-size:15px !important;
}

/* Keep mobile bottom controls active over all V2 windows. */
html.mobile-runtime .mobile-action-bar,
html.mobile-runtime .mobile-action-bar *{
    pointer-events:auto !important;
}

/* Android/mobile V2: armies inside common buildingModalV2 container */
html.mobile-runtime #buildingModalV2 .mobile-building-v2-subcontent #armyList,
html.mobile-runtime #buildingModalV2 #armyList{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:0 0 12px 0 !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .army-intro,
html.mobile-runtime #buildingModalV2 .army-empty,
html.mobile-runtime #buildingModalV2 .army-actions-note{
    text-align:center !important;
    color:#2b1708 !important;
    text-shadow:none !important;
    font-size:15px !important;
    line-height:1.25 !important;
}
html.mobile-runtime #buildingModalV2 .army-card{
    width:100% !important;
    max-width:320px !important;
    margin:0 auto !important;
    padding:12px !important;
    border:1px solid rgba(77,42,18,.38) !important;
    border-radius:10px !important;
    background:rgba(92,48,20,.22) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.18) !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .army-summary-head,
html.mobile-runtime #buildingModalV2 .army-unit-row,
html.mobile-runtime #buildingModalV2 .army-reform-row{
    display:grid !important;
    grid-template-columns:52px 1fr auto !important;
    gap:10px !important;
    align-items:center !important;
}
html.mobile-runtime #buildingModalV2 .army-summary-icon,
html.mobile-runtime #buildingModalV2 .army-unit-icon{
    width:42px !important;
    height:auto !important;
    object-fit:contain !important;
}
html.mobile-runtime #buildingModalV2 .army-title{
    color:#fff0bd !important;
    text-shadow:1px 1px 2px #000 !important;
    font:bold 18px Arial, sans-serif !important;
    margin-bottom:6px !important;
}
html.mobile-runtime #buildingModalV2 .army-summary-count,
html.mobile-runtime #buildingModalV2 .army-reform-unit{
    color:#2b1708 !important;
    text-shadow:none !important;
    font-size:15px !important;
}
html.mobile-runtime #buildingModalV2 .army-badge{
    display:inline-block !important;
    padding:2px 6px !important;
    border-radius:8px !important;
    background:rgba(40,20,8,.42) !important;
    color:#ffe8a5 !important;
    font-size:12px !important;
}
html.mobile-runtime #buildingModalV2 .army-manage-button,
html.mobile-runtime #buildingModalV2 .army-back-button{
    display:block !important;
    width:100% !important;
    max-width:250px !important;
    min-height:38px !important;
    margin:10px auto 0 auto !important;
}
html.mobile-runtime #buildingModalV2 .army-reform-form{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}
html.mobile-runtime #buildingModalV2 .army-reform-input,
html.mobile-runtime #buildingModalV2 .army-name-input,
html.mobile-runtime #buildingModalV2 .army-target-select{
    width:96px !important;
    max-width:160px !important;
    height:38px !important;
    border-radius:8px !important;
    background:#160800 !important;
    color:#fff3c7 !important;
    border:2px solid rgba(201,164,91,.78) !important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.7) !important;
    font:bold 16px Arial, sans-serif !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .army-name-input,
html.mobile-runtime #buildingModalV2 .army-target-select{
    width:100% !important;
    max-width:230px !important;
}

/* ============================================================
   Android/mobile V2 bottom bar safe fix
   ------------------------------------------------------------
   The bottom controls must stay above every V2 window/backdrop,
   but without global click-capture hacks. Click behavior is handled
   in game_modal_manager.js through closeBuildingModalV2().
   ============================================================ */
html.mobile-runtime .mobile-action-bar{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
}
html.mobile-runtime .mobile-action-bar .mobile-action-button{
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(255,255,255,.15) !important;
}
html.mobile-runtime #buildingModalV2Backdrop{
    z-index:18000 !important;
}
html.mobile-runtime #buildingModalV2{
    z-index:19000 !important;
}

/* ============================================================
   Android/mobile bottom bar mode switch: Menu/Settings on main,
   Back/Close inside every V2/legacy modal. Isolated mobile CSS.
   ============================================================ */
html.mobile-runtime .mobile-action-bar{
    pointer-events:auto !important;
    z-index:2147483000 !important;
}
html.mobile-runtime .mobile-action-bar .mobile-action-button{
    pointer-events:auto !important;
    min-width:126px !important;
    height:42px !important;
    line-height:40px !important;
    text-align:center !important;
}
html.mobile-runtime .mobile-action-bar .mobile-action-button.is-back-mode,
html.mobile-runtime .mobile-action-bar .mobile-action-button.is-close-mode{
    border-color:#d2b46c !important;
}
html.mobile-runtime .mobile-settings-panel{
    display:none;
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(var(--mobile-bottom-bar-h, 92px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index:2147482500 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    border:2px solid #8a5a2b !important;
    border-radius:12px !important;
    background:rgba(42, 24, 10, 0.96) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,240,190,.18) !important;
}
html.mobile-runtime body.mobile-settings-open .mobile-settings-panel{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}
html.mobile-runtime .mobile-settings-title{
    text-align:center !important;
    color:#f5d58a !important;
    font:bold 15px Arial, sans-serif !important;
    text-shadow:1px 1px 2px #000 !important;
    margin-bottom:2px !important;
}
html.mobile-runtime .mobile-settings-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
    border:1px solid #d2b46c !important;
    border-radius:8px !important;
    background:linear-gradient(to bottom,#6a3b0a,#4a2606 55%,#321704) !important;
    color:#ffe6a5 !important;
    text-decoration:none !important;
    text-shadow:1px 1px 2px #000 !important;
    font:bold 14px Arial, sans-serif !important;
}
html.mobile-runtime .mobile-settings-link--button{
    width:100% !important;
    cursor:pointer !important;
}
html.mobile-runtime body.mobile-window-open.mobile-menu-open .game-topbar-right,
html.mobile-runtime body.mobile-window-open.mobile-settings-open .mobile-settings-panel{
    display:none !important;
}

/* ============================================================
   Android/mobile: new-building picker through the shared V2 shell
   ============================================================ */
html.mobile-runtime #buildingModalV2.game-modal-v2--build-select{
    width:100vw !important;
    max-width:100vw !important;
}
html.mobile-runtime #buildingModalV2 .game-modal-v2__body--build-select{
    padding:12px var(--mobile-modal-gap) 18px var(--mobile-modal-gap) !important;
}
html.mobile-runtime #buildingModalV2 .build-v2-selection-list{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:11px !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-card{
    padding:11px 12px !important;
    border-radius:8px !important;
    background:rgba(189,151,113,.62) !important;
    border:1px solid rgba(70,35,10,.42) !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-head{
    grid-template-columns:54px 1fr !important;
    gap:10px !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-image{
    width:50px !important;
    max-height:58px !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-main b{
    font-size:17px !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-meta{
    grid-template-columns:1fr !important;
    gap:3px !important;
    text-align:center !important;
    font-size:14px !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-description{
    font-size:14px !important;
    text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .build-choice-button{
    width:100% !important;
    max-width:280px !important;
    height:38px !important;
}

/* ============================================================
   Android/mobile topbar and bottom navigation polish
   2026-05-15
   ------------------------------------------------------------
   Mobile-only. Keeps desktop untouched.
   Goal:
   - make the top HUD a little taller so notification badges fit;
   - give the bottom black zone a proper game bar background for
     Menu/Settings or Back/Close controls.
   ============================================================ */
html.mobile-runtime{
    --mobile-bottom-bar-h:104px;
    --mobile-topbar-icon-size:34px;
    --mobile-topbar-badge-size:17px;
}

html.mobile-runtime body.main-game-body{
    padding-bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* Taller, safer mobile top HUD. */
html.mobile-runtime .game-topbar{
    min-height:72px !important;
    padding:8px 4px 8px 4px !important;
    overflow:visible !important;
    background:linear-gradient(to bottom, rgba(96,35,10,.98) 0%, rgba(58,22,8,.98) 58%, rgba(25,10,4,.98) 100%) !important;
    border-bottom:2px solid rgba(214,174,92,.55) !important;
}
html.mobile-runtime .game-topbar-center{
    overflow:visible !important;
    gap:4px !important;
}
html.mobile-runtime .game-topbar-icons{
    min-height:40px !important;
    overflow:visible !important;
    gap:6px !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
}
html.mobile-runtime .game-notify-icon{
    width:auto !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:3px !important;
    overflow:visible !important;
    position:relative !important;
    box-sizing:border-box !important;
}
html.mobile-runtime .game-notify-icon img{
    max-width:var(--mobile-topbar-icon-size) !important;
    max-height:var(--mobile-topbar-icon-size) !important;
}
html.mobile-runtime .game-notify-badge{
    min-width:var(--mobile-topbar-badge-size) !important;
    height:var(--mobile-topbar-badge-size) !important;
    line-height:var(--mobile-topbar-badge-size) !important;
    right:-5px !important;
    top:-6px !important;
    padding:0 4px !important;
    font-size:10px !important;
    border-width:1px !important;
    z-index:4 !important;
}
html.mobile-runtime .game-topbar-resources{
    min-height:20px !important;
    padding:3px 8px !important;
    margin-top:2px !important;
    overflow:visible !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item{
    font-size:10px !important;
    line-height:1.1 !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item img{
    max-width:13px !important;
    max-height:13px !important;
}

/* Bottom bar: proper game panel placed in the reserved black zone. */
html.mobile-runtime .mobile-action-bar{
    height:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding:14px 18px calc(16px + env(safe-area-inset-bottom, 0px)) 18px !important;
    align-items:center !important;
    background:
        linear-gradient(to bottom, rgba(48,27,12,.55) 0%, rgba(9,5,2,.96) 18%, rgba(2,1,0,.99) 100%) !important;
    border-top:2px solid rgba(197,161,82,.64) !important;
    box-shadow:0 -7px 18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,225,150,.12) !important;
}
html.mobile-runtime .mobile-action-bar::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:4px !important;
    height:1px !important;
    background:rgba(255,226,147,.28) !important;
    pointer-events:none !important;
}
html.mobile-runtime .mobile-action-bar .mobile-action-button{
    min-width:132px !important;
    height:52px !important;
    line-height:48px !important;
    border-radius:12px !important;
    border:3px solid #d7b96f !important;
    background:linear-gradient(to bottom,#87500f 0%,#6b3507 45%,#3a1704 100%) !important;
    color:#fff4c8 !important;
    font:bold 20px Arial, sans-serif !important;
    box-shadow:inset 0 2px 0 rgba(255,242,185,.22), inset 0 -3px 5px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.75) !important;
}
html.mobile-runtime .mobile-action-bar .mobile-action-button:active{
    transform:translateY(1px) !important;
    filter:brightness(1.08) !important;
}

/* Keep V2 windows above the game, but below the bottom navigation. */
html.mobile-runtime #buildingModalV2.game-modal-v2.is-open,
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="flex"],
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="block"]{
    bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   Android/mobile bottom bar visual restyle
   2026-05-15
   ------------------------------------------------------------
   Final mobile-only override: replace the temporary black bottom
   panel with the same wood/game style used by V2 windows.
   Keep behavior unchanged; this is visual CSS only.
   ============================================================ */
html.mobile-runtime{
    --mobile-bottom-bar-h:104px;
}

html.mobile-runtime .mobile-action-bar{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding:14px 24px calc(14px + env(safe-area-inset-bottom, 0px)) 24px !important;
    align-items:center !important;
    justify-content:space-between !important;
    box-sizing:border-box !important;
    z-index:2147483000 !important;
    pointer-events:auto !important;
    background-color:#5b2408 !important;
    background-image:
        linear-gradient(to bottom, rgba(126,52,14,.96) 0%, rgba(91,35,9,.98) 42%, rgba(53,18,5,.99) 100%),
        url('assets/menu/background.png') !important;
    background-repeat:repeat !important;
    border-top:3px solid #b9823c !important;
    border-bottom:0 !important;
    box-shadow:
        0 -8px 18px rgba(0,0,0,.55),
        inset 0 2px 0 rgba(255,219,135,.24),
        inset 0 -5px 12px rgba(24,8,2,.70) !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
}

html.mobile-runtime .mobile-action-bar::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:6px !important;
    height:2px !important;
    background:linear-gradient(to right, rgba(92,45,16,.15), rgba(255,226,146,.55), rgba(92,45,16,.15)) !important;
    pointer-events:none !important;
}

html.mobile-runtime .mobile-action-bar::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:22px !important;
    background:linear-gradient(to bottom, rgba(28,10,3,0), rgba(14,4,1,.55)) !important;
    pointer-events:none !important;
}

html.mobile-runtime .mobile-action-bar .mobile-action-button{
    position:relative !important;
    z-index:2 !important;
    min-width:132px !important;
    max-width:42vw !important;
    height:54px !important;
    line-height:50px !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    border-radius:13px !important;
    border:3px solid #e0c176 !important;
    background:linear-gradient(to bottom,#925918 0%,#6f3708 48%,#3f1804 100%) !important;
    color:#fff4c8 !important;
    font:bold 20px Arial, sans-serif !important;
    text-align:center !important;
    text-shadow:0 2px 2px #000 !important;
    box-shadow:
        inset 0 2px 0 rgba(255,244,198,.25),
        inset 0 -4px 7px rgba(0,0,0,.48),
        0 5px 12px rgba(0,0,0,.65) !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(255,255,255,.15) !important;
}

html.mobile-runtime .mobile-action-bar .mobile-action-button:active{
    transform:translateY(1px) !important;
    filter:brightness(1.08) !important;
}

/* ============================================================
   Android/mobile bottom bar icons
   2026-05-15
   - bottom bar color is matched to mobile topbar;
   - text labels are replaced by menu icons;
   - button frame adapts to icon image size.
   ============================================================ */
html.mobile-runtime{
    --mobile-bottom-bar-h:92px;
}

html.mobile-runtime .mobile-action-bar{
    background:linear-gradient(to bottom, rgba(96,35,10,.98) 0%, rgba(58,22,8,.98) 58%, rgba(25,10,4,.98) 100%) !important;
    border-top:2px solid rgba(214,174,92,.55) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 -3px 10px rgba(0,0,0,.65) !important;
    padding:10px 24px calc(10px + env(safe-area-inset-bottom, 0px)) 24px !important;
}

html.mobile-runtime .mobile-action-bar::before{
    top:0 !important;
    height:1px !important;
    background:rgba(255,220,130,.45) !important;
}

html.mobile-runtime .mobile-action-bar::after{
    display:none !important;
}

html.mobile-runtime .mobile-action-bar .mobile-action-button{
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    line-height:normal !important;
    padding:5px !important;
    border-radius:10px !important;
    border:2px solid rgba(224,193,118,.92) !important;
    background:linear-gradient(to bottom,#7b310b 0%,#5b2308 58%,#2a0e03 100%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:content-box !important;
}

html.mobile-runtime .mobile-action-bar .mobile-action-button .mobile-action-icon{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    pointer-events:none !important;
}

html.mobile-runtime .mobile-action-bar .mobile-action-button .mobile-action-label{
    display:none !important;
}

/* ============================================================
   Android/mobile bottom bar tuning variables
   2026-05-15
   Edit only these variables to tune the mobile bottom HUD:
   --mobile-bottom-bar-height      = full bottom bar height;
   --mobile-bottom-icon-top-offset = distance from top of bar to icon buttons;
   --mobile-bottom-content-gap     = extra safe space for modal/page content.
   The legacy --mobile-bottom-bar-h variable is kept as an alias so all
   existing V2 modal calculations continue to work.
   ============================================================ */
html.mobile-runtime{
    --mobile-bottom-bar-height:80px;/*Отступ нижнего топ бара */
    --mobile-bottom-icon-top-offset:8px;/*Высота до верха иконок нижнего топ бара */
    --mobile-bottom-content-gap:12px;
    --mobile-bottom-bar-h:var(--mobile-bottom-bar-height);
}

html.mobile-runtime .mobile-action-bar{
    height:calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
    min-height:calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding:var(--mobile-bottom-icon-top-offset) 24px calc(var(--mobile-bottom-content-gap) + env(safe-area-inset-bottom, 0px)) 24px !important;
    align-items:flex-start !important;
}

html.mobile-runtime #buildingModalV2.game-modal-v2.is-open,
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="flex"],
html.mobile-runtime #buildingModalV2.game-modal-v2[style*="block"]{
    bottom:calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
}

html.mobile-runtime #buildingModalV2 .game-modal-v2__body,
html.mobile-runtime #buildingModalV2 .game-modal-v2__content,
html.mobile-runtime #buildingModalV2 .building-v2-body{
    padding-bottom:var(--mobile-bottom-content-gap) !important;
}

/* ============================================================
   NWind responsive pages bottom topbar
   Shared desktop + mobile controls for new responsive windows.
   ============================================================ */
body.nwind-has-bottom-bar .building-responsive-test-page,
body.nwind-has-bottom-bar .account-page{
    padding-bottom:112px !important;
}
.nwind-bottom-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9500;
    min-height:78px;
    padding:9px 22px calc(9px + env(safe-area-inset-bottom, 0px)) 22px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:34px;
    box-sizing:border-box;
    background:linear-gradient(to bottom, rgba(96,35,10,.98) 0%, rgba(58,22,8,.98) 58%, rgba(25,10,4,.99) 100%);
    border-top:2px solid rgba(214,174,92,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 -4px 14px rgba(0,0,0,.7);
}
.nwind-bottom-bar::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:1px;
    background:rgba(255,220,130,.45);
    pointer-events:none;
}
.nwind-bottom-button{
    position:relative;
    z-index:1;
    border:2px solid rgba(224,193,118,.92);
    border-radius:12px;
    background:linear-gradient(to bottom,#7b310b 0%,#5b2308 58%,#2a0e03 100%);
    color:#fff4c8;
    min-width:126px;
    min-height:54px;
    padding:5px 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font:bold 15px Arial, sans-serif;
    text-shadow:0 2px 2px #000;
    box-shadow:inset 0 2px 0 rgba(255,244,198,.22), inset 0 -4px 7px rgba(0,0,0,.48), 0 5px 12px rgba(0,0,0,.6);
    touch-action:manipulation;
}
.nwind-bottom-button:active{
    transform:translateY(1px);
    filter:brightness(1.08);
}
.nwind-bottom-icon{
    display:block;
    width:46px;
    height:46px;
    object-fit:contain;
    pointer-events:none;
}
.nwind-bottom-panel{
    position:fixed;
    left:50%;
    bottom:calc(92px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%) translateY(12px);
    z-index:9490;
    width:min(360px, calc(100vw - 28px));
    max-height:min(56vh, 420px);
    overflow:auto;
    opacity:0;
    pointer-events:none;
    padding:14px;
    box-sizing:border-box;
    border-radius:18px;
    border:1px solid rgba(222,177,95,.65);
    background:linear-gradient(180deg, rgba(67,31,12,.98), rgba(29,12,5,.98));
    box-shadow:0 14px 36px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.11);
    transition:opacity .14s ease, transform .14s ease;
}
body.nwind-menu-open .nwind-bottom-panel-menu,
body.nwind-settings-open .nwind-bottom-panel-settings{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.nwind-bottom-panel-title{
    color:#ffe2a1;
    text-align:center;
    font:bold 17px Arial, sans-serif;
    margin-bottom:10px;
    text-shadow:0 2px 2px #000;
}
.nwind-bottom-panel a,
.nwind-bottom-panel-close{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:7px 0;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(214,174,92,.45);
    background:rgba(255,232,170,.09);
    color:#fff3ca;
    text-align:center;
    text-decoration:none;
    font:bold 14px Arial, sans-serif;
}
.nwind-bottom-panel-close{cursor:pointer;}
@media (max-width: 700px){
    body.nwind-has-bottom-bar .building-responsive-test-page,
    body.nwind-has-bottom-bar .account-page{
        padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .nwind-bottom-bar{
        min-height:80px;
        padding:8px 24px calc(8px + env(safe-area-inset-bottom, 0px)) 24px;
        gap:clamp(26px, 14vw, 70px);
    }
    .nwind-bottom-button{
        min-width:0;
        width:auto;
        min-height:0;
        padding:5px;
        border-radius:10px;
        gap:0;
        box-sizing:content-box;
    }
    .nwind-bottom-button span{display:none;}
    .nwind-bottom-icon{width:46px;height:46px;}
    .nwind-bottom-panel{bottom:calc(88px + env(safe-area-inset-bottom, 0px));}
}


/* ============================================================
   NWind HUD final desktop polish: icon-only bottom controls,
   framed castle viewport and clean scrolling.
   ============================================================ */
.nwind-bottom-button span,
.nwind-bottom-label{display:none !important;}
.nwind-bottom-button{
    min-width:0 !important;
    width:auto !important;
    min-height:0 !important;
    padding:6px !important;
    gap:0 !important;
    border-radius:12px !important;
}
.nwind-bottom-icon{width:46px !important;height:46px !important;}
.nwind-bottom-panel{
    left:50% !important;
    bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%) translateY(12px) !important;
    z-index:9490 !important;
    width:min(360px, calc(100vw - 28px)) !important;
    padding:14px !important;
    border-radius:18px !important;
    border:1px solid rgba(222,177,95,.65) !important;
    background:linear-gradient(180deg, rgba(67,31,12,.98), rgba(29,12,5,.98)) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.11) !important;
    color:#fff3ca !important;
    font:bold 14px Arial, sans-serif !important;
}
body.nwind-menu-open .nwind-bottom-panel-menu,
body.nwind-settings-open .nwind-bottom-panel-settings{
    transform:translateX(-50%) translateY(0) !important;
}

@media (min-width:761px){
    html, body.main-game-body.castle-nwind-shell{
        min-height:100vh !important;
        background:#050505 !important;
        overflow-x:hidden !important;
    }
    body.main-game-body.castle-nwind-shell{
        padding-bottom:88px !important;
    }
    body.main-game-body.castle-nwind-shell .game-topbar{
        min-height:112px !important;
        margin-bottom:0 !important;
        border-bottom:2px solid rgba(214,174,92,.72) !important;
    }
    body.main-game-body.castle-nwind-shell .game.castle-screen{
        width:760px !important;
        height:calc(100vh - 112px - 88px) !important;
        min-height:560px !important;
        max-height:760px !important;
        margin:0 auto !important;
        border:2px solid rgba(214,174,92,.78) !important;
        border-top:0 !important;
        border-bottom:0 !important;
        box-shadow:0 0 0 1px rgba(255,238,166,.12) inset, 0 0 22px rgba(0,0,0,.82) !important;
        background:#247714 !important;
        overflow:hidden !important;
    }
    body.main-game-body.castle-nwind-shell .castle-field{
        left:-120px !important;
        top:55px !important;
    }
    body.main-game-body.castle-nwind-shell .nwind-bottom-bar,
    body.main-game-body.nwind-page-shell .nwind-bottom-bar{
        min-height:88px !important;
        height:88px !important;
        padding:10px 24px !important;
        gap:42px !important;
        border-top:2px solid rgba(214,174,92,.78) !important;
    }
    body.main-game-body.castle-nwind-shell .msg,
    body.main-game-body.castle-nwind-shell .build-panel,
    body.main-game-body.castle-nwind-shell .build-panel-hidden,
    body.main-game-body.castle-nwind-shell .game-topbar-right{
        display:none !important;
    }
    body.main-game-body.nwind-page-shell{
        padding-bottom:88px !important;
        background:#050505 !important;
    }
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page{
        margin-bottom:0 !important;
        padding-bottom:18px !important;
    }
    body.main-game-body.nwind-page-shell .nwind-bottom-bar .nwind-bottom-button{
        width:auto !important;
        padding:6px !important;
    }
}


/* NWIND cleanup: old V2 mobile panel must not appear in new shell/pages. */
body.castle-nwind-shell #mobileSettingsPanel,
body.castle-nwind-shell #mobileActionBar,
body.nwind-page-shell #mobileSettingsPanel,
body.nwind-page-shell #mobileActionBar{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.account-header.nwind-centered-header{
    justify-content:center !important;
    text-align:center !important;
}
.account-header.nwind-centered-header > div{width:100% !important;}
@media (min-width:761px){
    body.main-game-body.castle-nwind-shell{overflow-y:hidden !important;}
    body.main-game-body.castle-nwind-shell .game.castle-screen{
        border-radius:0 0 18px 18px !important;
        border:2px solid rgba(214,174,92,.9) !important;
        height:calc(100vh - 112px - 88px) !important;
        margin:0 auto !important;
        max-height:none !important;
    }
}


/* ============================================================
   NWIND final polish: castle frame, legacy leftovers, list pages
   ============================================================ */
body.castle-nwind-shell .mobile-settings-panel,
body.castle-nwind-shell .mobile-menu-panel,
body.castle-nwind-shell [class*="settings-panel"],
body.castle-nwind-shell [id*="Settings"],
body.castle-nwind-shell [id*="settings"],
body.castle-nwind-shell [data-mobile-settings],
body.castle-nwind-shell [data-mobile-menu]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.nwind-subheader-centered{justify-content:center !important;text-align:center !important;}
.nwind-subheader-centered > div{width:100% !important;}
.nwind-header-action{margin-top:12px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
@media (min-width:761px){
    body.main-game-body.castle-nwind-shell .game-topbar{
        border-bottom:0 !important;
        margin-bottom:0 !important;
        position:relative !important;
        z-index:5 !important;
        box-shadow:0 12px 24px rgba(0,0,0,.55) !important;
    }
    body.main-game-body.castle-nwind-shell .game.castle-screen{
        width:760px !important;
        height:calc(100vh - 112px - 88px) !important;
        margin:0 auto !important;
        border:2px solid rgba(214,174,92,.92) !important;
        border-top-width:2px !important;
        border-bottom-width:2px !important;
        border-radius:18px !important;
        box-shadow:0 0 0 1px rgba(255,238,166,.18) inset, 0 0 26px rgba(0,0,0,.88) !important;
        background:#247714 !important;
        overflow:hidden !important;
    }
    body.main-game-body.castle-nwind-shell .nwind-bottom-bar{
        border-top:0 !important;
        box-shadow:0 -12px 24px rgba(0,0,0,.55) !important;
    }
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-list-page{
        width:720px !important;
        max-width:calc(100vw - 32px) !important;
        margin:14px auto 104px !important;
    }
    body.main-game-body.nwind-page-shell .account-grid.account-grid-two{
        grid-template-columns:1fr !important;
    }
}


/* ============================================================
   NWIND report detail + desktop topbar line fix
   ============================================================ */
@media (min-width:761px){
    body.main-game-body.castle-nwind-shell .game-topbar{
        border-bottom:2px solid rgba(214,174,92,.82) !important;
    }
    body.main-game-body.castle-nwind-shell .game.castle-screen{
        border-top-left-radius:18px !important;
        border-top-right-radius:18px !important;
    }
    body.main-game-body.nwind-page-shell .game-topbar{
        border-bottom:2px solid rgba(214,174,92,.82) !important;
        box-shadow:0 12px 24px rgba(0,0,0,.55) !important;
    }
}
.nwind-report-detail-page .account-header{
    margin-bottom:14px !important;
}
.nwind-report-detail-card{
    padding:18px !important;
}
.nwind-report-detail-card .battle-section{
    margin:0 0 14px !important;
}
.nwind-report-detail-card .battle-section-title{
    text-align:center !important;
    color:#ffe69c !important;
    font-weight:800 !important;
    text-shadow:1px 1px 0 #000 !important;
    margin:0 0 10px !important;
}
.nwind-report-detail-card .battle-card,
.nwind-report-detail-card .battle-side{
    background:rgba(43,18,4,.58) !important;
    border:1px solid rgba(214,174,92,.46) !important;
    border-radius:12px !important;
    padding:12px !important;
    color:#ffeec6 !important;
}
.nwind-report-detail-card .battle-side{
    margin:8px 0 !important;
}
.nwind-report-detail-card .battle-side-title,
.nwind-report-detail-card .battle-army-name,
.nwind-report-detail-card .battle-loss-total{
    color:#ffe69c !important;
}
.nwind-report-detail-card .battle-unit-loss-row{
    display:grid !important;
    grid-template-columns:46px 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:8px !important;
    margin:6px 0 !important;
    background:rgba(31,11,2,.48) !important;
    border:1px solid rgba(214,174,92,.32) !important;
    border-radius:10px !important;
}
.nwind-report-detail-card .battle-unit-icon img{
    width:38px !important;
    height:38px !important;
    object-fit:contain !important;
}
.nwind-centered-actions{
    display:flex !important;
    justify-content:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    margin-top:16px !important;
}
@media (max-width:760px){
    .nwind-report-detail-card .battle-unit-loss-row{
        grid-template-columns:42px 1fr !important;
    }
    .nwind-report-detail-card .battle-unit-count{
        grid-column:2 !important;
        justify-self:start !important;
    }
}


/* ============================================================
   NWIND scroll gap + report/message detail final fixes
   ============================================================ */
body.main-game-body.nwind-page-shell{
    padding-bottom:88px !important;
    min-height:100vh !important;
    box-sizing:border-box !important;
    background:#050505 !important;
}
body.nwind-has-bottom-bar .building-responsive-test-page,
body.nwind-has-bottom-bar .account-page{
    padding-bottom:0 !important;
}
body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
body.main-game-body.nwind-page-shell .account-page.messages-page{
    margin-bottom:0 !important;
}
body.main-game-body.nwind-page-shell .account-page.battle-report-page.nwind-report-detail-page{
    background:transparent !important;
    padding:0 !important;
    color:#f8ead0 !important;
}
body.main-game-body.nwind-page-shell .account-page.battle-report-page.nwind-report-detail-page::after,
body.main-game-body.nwind-page-shell .account-card.nwind-report-detail-card::after{
    display:none !important;
    content:none !important;
}
body.main-game-body.nwind-page-shell .account-card.nwind-report-detail-card{
    margin-bottom:0 !important;
}
body.main-game-body.nwind-page-shell .message-detail-card{
    line-height:1.55 !important;
    white-space:normal !important;
}
body.main-game-body.nwind-page-shell .message-meta-card .account-row a,
body.main-game-body.nwind-page-shell .message-detail-card a{
    color:#ffe7a3 !important;
}
@media (min-width:761px){
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
    body.main-game-body.nwind-page-shell .account-page.messages-page{
        width:720px !important;
        max-width:calc(100vw - 32px) !important;
        margin:14px auto 0 !important;
    }
}
@media (max-width:760px){
    body.main-game-body.nwind-page-shell{
        padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
    body.main-game-body.nwind-page-shell .account-page.messages-page{
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }
}


/* ============================================================
   NWIND background EXACT mode like building_page_test.php
   - background.png is page background only;
   - nwind window keeps its own brown/dark panel colors;
   - rounded shell is preserved on all 4 corners;
   - bottom gap mirrors top gap.
   ============================================================ */
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell{
    background:#080604 url('assets/menu/background.png') repeat !important;
}

html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-page.messages-page,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-page.nwind-list-page,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-page.messages-page{
    background:linear-gradient(rgba(78,39,13,.96), rgba(34,15,5,.96)) !important;
    border:1px solid rgba(210,166,88,.78) !important;
    border-radius:18px !important;
    box-shadow:0 0 0 1px rgba(255,238,166,.09) inset, 0 10px 28px rgba(0,0,0,.62) !important;
    overflow:hidden !important;
}

html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-header.nwind-centered-header,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-header.nwind-centered-header{
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,220,130,.55) !important;
    border-radius:0 !important;
    background:linear-gradient(rgba(96,43,14,.92), rgba(66,25,8,.92)) !important;
    box-shadow:none !important;
}

html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .account-card,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .nwind-market-card,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .nwind-note,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .nwind-empty-note,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .account-card,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .nwind-market-card,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .nwind-note,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .nwind-empty-note{
    background:linear-gradient(rgba(98,55,20,.38), rgba(33,15,5,.30)), rgba(54,27,9,.70) !important;
    border:1px solid rgba(255,218,132,.42) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.32) !important;
}

html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .building-page-card-test,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .building-training-page-test,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .building-page-card-test,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .building-training-page-test{
    background:radial-gradient(circle at 50% 0%, rgba(255,226,145,.14), transparent 42%), linear-gradient(rgba(90,49,18,.42), rgba(29,13,4,.34)), rgba(48,23,7,.78) !important;
}

html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .training-started-box-test,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .nwind-confirm-box,
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell .nwind-market-confirm-box,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .training-started-box-test,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .nwind-confirm-box,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell .nwind-market-confirm-box{
    background:linear-gradient(rgba(98,55,20,.96), rgba(33,15,5,.96)) !important;
    border:1px solid rgba(255,218,132,.58) !important;
    border-radius:18px !important;
    box-shadow:0 18px 42px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

@media (min-width:761px){
    body.main-game-body.nwind-page-shell{padding-bottom:112px !important;}
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
    body.main-game-body.nwind-page-shell .account-page.messages-page{
        width:720px !important;
        max-width:calc(100vw - 32px) !important;
        margin:16px auto 28px !important;
    }
    body.main-game-body.nwind-page-shell .nwind-bottom-bar{
        box-shadow:0 -10px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16) !important;
    }
}
@media (max-width:760px){
    body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
    body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
    body.main-game-body.nwind-page-shell .account-page.messages-page{
        margin:10px auto 16px !important;
        max-width:calc(100vw - 14px) !important;
        border-radius:16px !important;
    }
}


/* ============================================================
   NWIND world castle + attack polish
   ============================================================ */
.nwind-world-castle-page .building-page-card-grid-test{
    justify-content:center !important;
    align-items:center !important;
}
.nwind-world-castle-page .building-page-facts-test,
.nwind-attack-page .nwind-attack-facts,
.nwind-info-column{
    max-width:460px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:left !important;
}
.nwind-world-castle-page .building-page-facts-test div,
.nwind-attack-page .nwind-attack-facts div,
.nwind-info-column div{
    display:grid !important;
    grid-template-columns:170px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
}
.nwind-world-castle-page .building-page-facts-test span,
.nwind-attack-page .nwind-attack-facts span,
.nwind-info-column span{
    text-align:left !important;
}
.nwind-world-castle-page .building-page-facts-test b,
.nwind-attack-page .nwind-attack-facts b,
.nwind-info-column b{
    text-align:left !important;
}
.building-responsive-test-page .nwind-danger-btn,
.building-responsive-test-page .nwind-danger-btn.game-button,
.building-responsive-test-page .nwind-danger-btn.info-action-button{
    background:linear-gradient(180deg,#8e3a24,#5b120b) !important;
    border-color:#f2b17a !important;
    color:#fff4c8 !important;
    box-shadow:0 0 0 1px rgba(255,210,150,.20),0 3px 8px rgba(0,0,0,.35) !important;
}
.nwind-scout-warning{
    max-width:560px !important;
    margin:12px auto !important;
    text-align:center !important;
}
@media(max-width:700px){
    .nwind-world-castle-page .building-page-facts-test div,
    .nwind-attack-page .nwind-attack-facts div,
    .nwind-info-column div{grid-template-columns:1fr !important;gap:2px !important;text-align:center !important;}
    .nwind-world-castle-page .building-page-facts-test span,
    .nwind-world-castle-page .building-page-facts-test b,
    .nwind-attack-page .nwind-attack-facts span,
    .nwind-attack-page .nwind-attack-facts b,
    .nwind-info-column span,.nwind-info-column b{text-align:center !important;}
}

/* ============================================================
   NWIND rollback-safe mobile world fix from arrows build
   2026-05-17
   - do not touch Castle mobile layout;
   - only World location + nwind pages opened from World;
   - prevent pages from sliding under sticky top HUD;
   - keep all four world map arrows visible.
   ============================================================ */
html.mobile-runtime body.main-game-body.world-nwind-shell{
    min-width:0 !important;
    overflow-x:hidden !important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .game-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:7600 !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .game.world-screen{
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    height:calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)) !important;
    min-height:460px !important;
    margin:10px auto 0 !important;
    border:2px solid rgba(214,174,92,.86) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:20 !important;
    pointer-events:auto !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow.up{
    left:50% !important;
    top:14px !important;
    transform:translateX(-50%) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow.down{
    left:50% !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow.left{
    left:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow.right{
    right:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .mobile-settings-panel,
html.mobile-runtime body.main-game-body.world-nwind-shell .mobile-menu-panel,
html.mobile-runtime body.main-game-body.world-nwind-shell #mobileSettingsPanel,
html.mobile-runtime body.main-game-body.world-nwind-shell #mobileActionBar,
html.mobile-runtime body.main-game-body.world-nwind-shell [class*="settings-panel"],
html.mobile-runtime body.main-game-body.world-nwind-shell [id*="Settings"],
html.mobile-runtime body.main-game-body.world-nwind-shell [id*="settings"],
html.mobile-runtime body.main-game-body.world-nwind-shell [data-mobile-settings],
html.mobile-runtime body.main-game-body.world-nwind-shell [data-mobile-menu]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* nwind pages opened from World: top HUD is sticky, so add a real safe gap. */
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:7600 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.messages-page{
    margin-top:14px !important;
    margin-bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:calc(100vw - 14px) !important;
}

/* Keep the shared nwind bottom bar identical on World and nwind pages. */
html.mobile-runtime body.main-game-body.world-nwind-shell .nwind-bottom-bar,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-bottom-bar{
    min-height:86px !important;
    height:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    padding:8px 28px calc(8px + env(safe-area-inset-bottom, 0px)) 28px !important;
    gap:clamp(72px, 34vw, 190px) !important;
    justify-content:center !important;
    align-items:center !important;
}


/* Mobile compact one-line info rows for world castle and attack target */
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-info-lines{
    width:100% !important;
    max-width:calc(100vw - 42px) !important;
    padding:12px 14px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div{
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:6px !important;
    text-align:left !important;
    font-size:16px !important;
    line-height:1.28 !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div span{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    text-align:left !important;
    white-space:nowrap !important;
    font-size:16px !important;
    font-weight:400 !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div b{
    flex:1 1 auto !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    font-size:16px !important;
}

/* ============================================================
   NWIND mobile bottom bar variables + clickability fix
   Shared for Castle, World and nwind pages.
   ============================================================ */
:root{
    --nwind-bottom-bar-height:88px;
    --nwind-bottom-bar-padding-top:10px;
    --nwind-bottom-bar-padding-x:24px;
    --nwind-bottom-button-gap:42px;
    --nwind-bottom-button-size:64px;
    --nwind-bottom-icon-size:46px;
    --nwind-bottom-panel-offset:96px;
    --nwind-bottom-bar-mobile-height:86px;
    --nwind-bottom-bar-mobile-padding-top:8px;
    --nwind-bottom-bar-mobile-padding-x:28px;
    --nwind-bottom-button-mobile-gap:clamp(72px, 34vw, 190px);
    --nwind-bottom-button-mobile-size:64px;
    --nwind-bottom-icon-mobile-size:46px;
}
html.mobile-runtime .nwind-bottom-bar{
    min-height:var(--nwind-bottom-bar-mobile-height) !important;
    height:calc(var(--nwind-bottom-bar-mobile-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding:var(--nwind-bottom-bar-mobile-padding-top) var(--nwind-bottom-bar-mobile-padding-x) calc(var(--nwind-bottom-bar-mobile-padding-top) + env(safe-area-inset-bottom, 0px)) var(--nwind-bottom-bar-mobile-padding-x) !important;
    gap:var(--nwind-bottom-button-mobile-gap) !important;
    z-index:12000 !important;
    pointer-events:auto !important;
}
html.mobile-runtime .nwind-bottom-button{
    width:var(--nwind-bottom-button-mobile-size) !important;
    height:var(--nwind-bottom-button-mobile-size) !important;
    padding:6px !important;
    box-sizing:border-box !important;
    pointer-events:auto !important;
}
html.mobile-runtime .nwind-bottom-icon{
    width:var(--nwind-bottom-icon-mobile-size) !important;
    height:var(--nwind-bottom-icon-mobile-size) !important;
}
html.mobile-runtime .nwind-bottom-panel{
    bottom:calc(var(--nwind-bottom-bar-mobile-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:12050 !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .nwind-bottom-panel{
    display:none !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell.nwind-menu-open .nwind-bottom-panel-menu,
html.mobile-runtime body.main-game-body.world-nwind-shell.nwind-settings-open .nwind-bottom-panel-settings{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    flex-direction:column !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell{
    padding-bottom:calc(var(--nwind-bottom-bar-mobile-height) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .game.world-screen{
    height:calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .nwind-bottom-bar,
html.mobile-runtime body.main-game-body.castle-nwind-shell .nwind-bottom-bar,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-bottom-bar{
    justify-content:center !important;
    align-items:center !important;
}

/* ============================================================
   FIX 2026-05-17: mobile final bottom bar variable override
   Edit these values to tune bottom bar on mobile without touching layout rules.
   ============================================================ */
:root{
    --nwind-bottom-bar-mobile-height:86px;
    --nwind-bottom-bar-mobile-padding-top:8px;
    --nwind-bottom-bar-mobile-padding-x:28px;
    --nwind-bottom-button-mobile-gap:clamp(72px, 34vw, 190px);
    --nwind-bottom-button-mobile-size:64px;
    --nwind-bottom-icon-mobile-size:46px;
}
html.mobile-runtime body.main-game-body .nwind-bottom-bar{
    min-height:var(--nwind-bottom-bar-mobile-height) !important;
    height:calc(var(--nwind-bottom-bar-mobile-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding:var(--nwind-bottom-bar-mobile-padding-top) var(--nwind-bottom-bar-mobile-padding-x) calc(var(--nwind-bottom-bar-mobile-padding-top) + env(safe-area-inset-bottom, 0px)) var(--nwind-bottom-bar-mobile-padding-x) !important;
    gap:var(--nwind-bottom-button-mobile-gap) !important;
    align-items:flex-start !important;
    pointer-events:auto !important;
    z-index:12000 !important;
}
html.mobile-runtime body.main-game-body .nwind-bottom-button{
    width:var(--nwind-bottom-button-mobile-size) !important;
    height:var(--nwind-bottom-button-mobile-size) !important;
    min-width:var(--nwind-bottom-button-mobile-size) !important;
    min-height:var(--nwind-bottom-button-mobile-size) !important;
    padding:6px !important;
    box-sizing:border-box !important;
    pointer-events:auto !important;
}
html.mobile-runtime body.main-game-body .nwind-bottom-icon{
    width:var(--nwind-bottom-icon-mobile-size) !important;
    height:var(--nwind-bottom-icon-mobile-size) !important;
}
html.mobile-runtime body.main-game-body .nwind-bottom-panel{
    bottom:calc(var(--nwind-bottom-bar-mobile-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:12050 !important;
}


/* ============================================================
   NWIND mobile world castle/attack info polish
   - add space between castle icon and info block;
   - keep label and value on one row: "Название: значение".
   ============================================================ */
html.mobile-runtime .nwind-world-castle-page .building-page-card-grid-test{
    gap:16px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-world-castle-icon{
    margin-bottom:14px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-info-lines{
    width:100% !important;
    max-width:100% !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div{
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:6px !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:clamp(14px, 3.8vw, 17px) !important;
    line-height:1.35 !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div span{
    flex:0 0 auto !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-size:inherit !important;
    font-weight:400 !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div b{
    flex:0 1 auto !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    min-width:0 !important;
    font-size:inherit !important;
}

/* ============================================================
   Mobile World: current coordinate badge + keep info rows one-line
   ============================================================ */
html.mobile-runtime body.main-game-body.world-nwind-shell .mobile-world-current-coords{
    display:block !important;
    position:absolute !important;
    left:18px !important;
    top:98px !important;
    z-index:80 !important;
    min-width:86px !important;
    padding:5px 10px !important;
    border:1px solid rgba(245,190,88,.95) !important;
    border-radius:14px !important;
    background:rgba(58,25,8,.86) !important;
    color:#ffe999 !important;
    font-weight:bold !important;
    text-align:center !important;
    text-shadow:1px 1px #000 !important;
    box-shadow:0 4px 10px rgba(0,0,0,.35) !important;
    pointer-events:none !important;
}
html.mobile-runtime .nwind-world-castle-page .building-page-card-grid-test,
html.mobile-runtime .nwind-attack-page .building-page-card-grid-test{
    gap:18px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-world-castle-icon{
    margin-bottom:16px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:baseline !important;
    gap:6px !important;
    white-space:nowrap !important;
}

/* ============================================================
   FIX: mobile world coordinate badge position + compact info rows
   ============================================================ */
html.mobile-runtime body.main-game-body.world-nwind-shell .mobile-world-current-coords{
    left:16px !important;
    top:16px !important;
}
html.mobile-runtime .nwind-world-castle-page .building-page-card-grid-test,
html.mobile-runtime .nwind-world-bot-page .building-page-card-grid-test,
html.mobile-runtime .nwind-attack-page .building-page-card-grid-test{
    gap:10px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-world-castle-icon,
html.mobile-runtime .nwind-world-bot-page .nwind-world-castle-icon{
    margin:0 0 8px 0 !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-info-lines{
    min-width:0 !important;
    width:calc(100% - 18px) !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:6px auto 0 !important;
    padding:10px 12px !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:baseline !important;
    gap:6px !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
}

/* ============================================================
   NWIND FIX 2026-05-19: mobile top HUD safe spacing for nwind pages.
   Castle/World location HUD already uses this visual size; apply it to
   all nwind pages so notification counters are not clipped.
   ============================================================ */
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar{
    min-height:82px !important;
    padding:12px 4px 8px 4px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-center,
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons,
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon{
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons{
    min-height:44px !important;
    padding-top:2px !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-badge{
    top:-4px !important;
    right:-5px !important;
    z-index:8 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.building-responsive-test-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.nwind-list-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page,
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page.messages-page{
    margin-top:12px !important;
}

/* ============================================================
   NWIND FIX 2026-05-19: mobile two-column info rows and equal card widths.
   Scope: world_castle_page.php, world_bots_page.php, attack.php.
   ============================================================ */
html.mobile-runtime .nwind-world-castle-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-world-bot-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-attack-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines{
    width:calc(100% - 28px) !important;
    max-width:620px !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
    display:grid !important;
    grid-template-columns:minmax(112px, 42%) minmax(0, 1fr) !important;
    column-gap:8px !important;
    justify-content:center !important;
    align-items:baseline !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    line-height:1.28 !important;
    white-space:normal !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div span{
    text-align:left !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 3.6vw, 16px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div b{
    text-align:left !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 3.6vw, 16px) !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* ============================================================
   FIX 2026-05-19: nwind mobile top HUD = same safe HUD as Castle/World.
   Fixes clipped notification counters without changing JS or page logic.
   ============================================================ */
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    min-height:72px !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 4px 8px 4px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    position:sticky !important;
    top:0 !important;
    z-index:7600 !important;
    background:linear-gradient(to bottom, rgba(96,35,10,.98) 0%, rgba(58,22,8,.98) 58%, rgba(25,10,4,.98) 100%) !important;
    border-bottom:2px solid rgba(214,174,92,.55) !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-center{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    gap:4px !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons{
    width:100% !important;
    max-width:100vw !important;
    min-height:40px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:3px !important;
    border-radius:8px !important;
    overflow:visible !important;
    position:relative !important;
    box-sizing:border-box !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon img{
    max-width:var(--mobile-topbar-icon-size,34px) !important;
    max-height:var(--mobile-topbar-icon-size,34px) !important;
    width:auto !important;
    height:auto !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-badge{
    min-width:var(--mobile-topbar-badge-size,17px) !important;
    height:var(--mobile-topbar-badge-size,17px) !important;
    line-height:var(--mobile-topbar-badge-size,17px) !important;
    right:-5px !important;
    top:-6px !important;
    padding:0 4px !important;
    font-size:10px !important;
    border-width:1px !important;
    z-index:20 !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources{
    width:auto !important;
    max-width:calc(100vw - 10px) !important;
    min-height:20px !important;
    padding:3px 8px !important;
    margin-top:2px !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources .top-resource-item{
    font-size:10px !important;
    line-height:1.1 !important;
    gap:1px !important;
    white-space:nowrap !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources .top-resource-item img{
    max-width:13px !important;
    max-height:13px !important;
    width:auto !important;
    height:auto !important;
}

/* Keep mobile two-column info rows, equal width with description card. */
html.mobile-runtime .nwind-world-castle-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-world-bot-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-attack-page .nwind-world-castle-desc,
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-info-lines,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines{
    width:calc(100% - 28px) !important;
    max-width:620px !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
    display:grid !important;
    grid-template-columns:minmax(112px, 42%) minmax(0, 1fr) !important;
    column-gap:8px !important;
    justify-content:center !important;
    align-items:baseline !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    line-height:1.28 !important;
    white-space:normal !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div span,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div span{
    text-align:left !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 3.6vw, 16px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
html.mobile-runtime .nwind-world-castle-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-world-bot-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-info-lines > div b,
html.mobile-runtime .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div b{
    text-align:left !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 3.6vw, 16px) !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* ============================================================
   NWIND FINAL FIX 2026-05-19: mobile HUD and info rows.
   These rules apply only when the early mobile-runtime flag exists.
   They mirror the safe Castle/World HUD dimensions and keep event
   counters visible on all nwind pages, including building_info_page.
   ============================================================ */
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar{
    height:auto !important;
    min-height:104px !important;
    max-height:none !important;
    padding-top:max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom:8px !important;
    overflow:visible !important;
    position:sticky !important;
    top:0 !important;
    z-index:9000 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-center,
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons,
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources{
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons{
    min-height:50px !important;
    padding-top:7px !important;
    padding-bottom:3px !important;
    gap:7px !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon{
    min-width:44px !important;
    min-height:44px !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon img{
    max-width:38px !important;
    max-height:38px !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-badge{
    top:-7px !important;
    right:-6px !important;
    z-index:50 !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .account-page{
    margin-top:12px !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-info-lines,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-attack-facts.nwind-info-lines{
    width:calc(100% - 28px) !important;
    max-width:620px !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:auto !important;
    min-height:0 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-info-lines > div,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-attack-facts.nwind-info-lines > div{
    display:grid !important;
    grid-template-columns:minmax(116px, 42%) minmax(0, 1fr) !important;
    column-gap:8px !important;
    justify-content:center !important;
    align-items:baseline !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-info-lines > div span,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-attack-facts.nwind-info-lines > div span,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-info-lines > div b,
html.mobile-runtime body.main-game-body.nwind-page-shell .nwind-attack-facts.nwind-info-lines > div b{
    display:block !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* ============================================================
   NWIND TOP HUD SIZE SYNC 2026-05-19
   Make nwind mobile upper HUD visually identical to Castle/World.
   This final override intentionally uses the base mobile HUD sizes.
   ============================================================ */
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar{
    min-height:72px !important;
    height:auto !important;
    max-height:none !important;
    padding:8px 4px 8px 4px !important;
    overflow:visible !important;
    position:sticky !important;
    top:0 !important;
    z-index:9000 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-center{
    gap:4px !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-icons{
    min-height:40px !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
    gap:6px !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon{
    width:auto !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:3px !important;
    overflow:visible !important;
    position:relative !important;
    box-sizing:border-box !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-icon img{
    max-width:var(--mobile-topbar-icon-size,34px) !important;
    max-height:var(--mobile-topbar-icon-size,34px) !important;
    width:auto !important;
    height:auto !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-notify-badge{
    min-width:var(--mobile-topbar-badge-size,17px) !important;
    height:var(--mobile-topbar-badge-size,17px) !important;
    line-height:var(--mobile-topbar-badge-size,17px) !important;
    right:-5px !important;
    top:-6px !important;
    padding:0 4px !important;
    font-size:10px !important;
    border-width:1px !important;
    z-index:50 !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources{
    min-height:20px !important;
    padding:3px 8px !important;
    margin-top:2px !important;
    gap:4px !important;
    overflow:visible !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources .top-resource-item{
    font-size:10px !important;
    line-height:1.1 !important;
}
html.mobile-runtime body.main-game-body.nwind-page-shell .game-topbar-resources .top-resource-item img{
    max-width:13px !important;
    max-height:13px !important;
}


/* ============================================================
   STEP40: shared location width final override.
   mobile_v2.css is loaded after style.css, so Castle needs this
   rule there too. Keep this as the last desktop width rule.
   ============================================================ */
@media (min-width:761px){
    body.main-game-body.castle-nwind-shell .game.castle-screen,
    body.main-game-body.land-nwind-shell .land-screen.land-nwind-screen,
    body.main-game-body.world-nwind-shell .game.world-screen{
        width:var(--nwind-location-desktop-width, 760px) !important;
        max-width:calc(100vw - 24px) !important;
        box-sizing:border-box !important;
    }
}


/* ============================================================
   Step75: hard fix tiled mb0.png background for Castle/Lands.
   Applied to screen and scroll-stage, PC + mobile.
   ============================================================ */
body.main-game-body.castle-nwind-shell .game.castle-screen,
body.main-game-body.castle-nwind-shell .castle-stage,
body.main-game-body.land-nwind-shell .land-screen.land-nwind-screen,
body.main-game-body.land-nwind-shell .land-stage{
    background-color:#247714 !important;
    background-image:url('assets/ground/mb0.png') !important;
    background-repeat:repeat !important;
    background-size:auto !important;
    background-position:0 0 !important;
}
html.mobile-runtime body.main-game-body.castle-nwind-shell .game.castle-screen,
html.mobile-runtime body.main-game-body.castle-nwind-shell .castle-stage,
html.mobile-runtime body.main-game-body.land-nwind-shell .land-screen.land-nwind-screen,
html.mobile-runtime body.main-game-body.land-nwind-shell .land-stage{
    background-color:#247714 !important;
    background-image:url('assets/ground/mb0.png') !important;
    background-repeat:repeat !important;
    background-size:auto !important;
    background-position:0 0 !important;
}

/* STEP80: keep world arrows clickable over castles/bots on mobile. */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow,
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow{
    z-index:12000 !important;
    pointer-events:auto !important;
}


/* STEP81 mobile: keep up/down world arrows centered. */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow-up,
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow-down{
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:12000 !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow-up .arrow,
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow-down .arrow{
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
}

html.mobile-runtime .nwind-report-detail-page .battle-unit-icon img{
    width:var(--battle-unit-icon-size-mobile,34px) !important;
    height:var(--battle-unit-icon-size-mobile,34px) !important;
    object-fit:contain !important;
}


/* STEP87: battle_report_unit_icons_config.php hard override for report detail icons. */
body.battle-report-page-nwind .battle-unit-icon,
body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-icon{
    width:var(--battle-unit-icon-size,34px) !important;
    height:var(--battle-unit-icon-size,34px) !important;
    min-width:var(--battle-unit-icon-size,34px) !important;
    min-height:var(--battle-unit-icon-size,34px) !important;
}
body.battle-report-page-nwind .battle-unit-icon img,
body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-icon img{
    width:var(--battle-unit-icon-size,34px) !important;
    height:var(--battle-unit-icon-size,34px) !important;
    max-width:var(--battle-unit-icon-size,34px) !important;
    max-height:var(--battle-unit-icon-size,34px) !important;
    object-fit:contain !important;
}
html.mobile-runtime body.battle-report-page-nwind .battle-unit-icon,
html.mobile-runtime body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-icon{
    width:var(--battle-unit-icon-size-mobile,34px) !important;
    height:var(--battle-unit-icon-size-mobile,34px) !important;
    min-width:var(--battle-unit-icon-size-mobile,34px) !important;
    min-height:var(--battle-unit-icon-size-mobile,34px) !important;
}
html.mobile-runtime body.battle-report-page-nwind .battle-unit-icon img,
html.mobile-runtime body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-icon img{
    width:var(--battle-unit-icon-size-mobile,34px) !important;
    height:var(--battle-unit-icon-size-mobile,34px) !important;
    max-width:var(--battle-unit-icon-size-mobile,34px) !important;
    max-height:var(--battle-unit-icon-size-mobile,34px) !important;
    object-fit:contain !important;
}

/* STEP88: battle report mobile rows - keep amount on the right like desktop. */
html.mobile-runtime body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-loss-row,
html.mobile-runtime body.battle-report-page-nwind .battle-unit-loss-row,
html.mobile-runtime .nwind-report-detail-page .battle-unit-loss-row{
    display:grid !important;
    grid-template-columns:minmax(34px, var(--battle-unit-icon-size-mobile,34px)) minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:10px !important;
}
html.mobile-runtime body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-name,
html.mobile-runtime body.battle-report-page-nwind .battle-unit-name,
html.mobile-runtime .nwind-report-detail-page .battle-unit-name{
    grid-column:2 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:normal !important;
}
html.mobile-runtime body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-count,
html.mobile-runtime body.battle-report-page-nwind .battle-unit-count,
html.mobile-runtime .nwind-report-detail-page .battle-unit-count{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-weight:700 !important;
    padding-left:8px !important;
}


/* STEP89: mobile topbar resource icon config variables. */
html.mobile-runtime .game-topbar-resources{
    gap:var(--topbar-resource-gap-mobile,4px) !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item{
    gap:var(--topbar-resource-item-gap-mobile,1px) !important;
    font-size:var(--topbar-resource-font-size-mobile,9px) !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item img{
    width:var(--topbar-resource-icon-size-mobile,12px) !important;
    height:var(--topbar-resource-icon-size-mobile,12px) !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
}

/* STEP107 mobile: new World tiles must not inherit old 64x32 transform. */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-tile-new{
    transform:none !important;
    background-size:100% 100% !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .game.world-screen .obj{
    margin-left:0 !important;
    margin-top:0 !important;
}

/* STEP109: mobile World zoom controls */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-zoom-controls{
    top:var(--world-controls-mobile-top,18px) !important;
}


/* STEP113: world zoom controls mobile offset from world_view_config.php */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-zoom-controls{
    top:var(--world-controls-mobile-top,18px) !important;
    transform:translateX(calc(-50% + var(--world-controls-mobile-offset-x, 0px))) !important;
}


/* STEP114: точная область клика/подсветки тайлов Мира.
   Форма также дублируется inline из world_object_offsets_config.php. */
body.main-game-body.world-nwind-shell .world-tile-new{
    background-size:100% 100% !important;
    background-repeat:no-repeat !important;
    cursor:pointer !important;
}
body.main-game-body.world-nwind-shell .world-tile-new::after{
    clip-path:inherit !important;
    -webkit-clip-path:inherit !important;
}

/* STEP115 mobile: World tile hitboxes own clicks; objects are visual only. */
html.mobile-runtime body.main-game-body.world-nwind-shell .world-object-visual,
html.mobile-runtime body.main-game-body.world-nwind-shell .obj.world-object-visual,
html.mobile-runtime body.main-game-body.world-nwind-shell .world-stone-overlay{
    pointer-events:none !important;
    user-select:none !important;
}


/* STEP121: world viewport background uses mb0 grid like Castle/Lands. */
body.main-game-body.world-nwind-shell .game.world-screen{
    background-color:#247714 !important;
    background-image:url('assets/ground/mb0.png') !important;
    background-repeat:repeat !important;
    background-size:auto !important;
    background-position:0 0 !important;
}
body.main-game-body.world-nwind-shell .world-map-layer,
body.main-game-body.world-nwind-shell .world-tile-layer{
    background-color:transparent !important;
}