*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#111;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:14px;min-width:1940px}
.top{height:28px;background:linear-gradient(#5b260b,#2a1004);border-bottom:2px solid #000;display:flex;align-items:center;gap:10px;padding:0 8px}
.top a{color:#fff;text-decoration:none;background:#55220b;border:1px solid #a66b30;padding:3px 8px}
.game{position:relative;width:1900px;height:820px;margin:10px auto;overflow:hidden;border:2px solid #050505;background:#2e7e16}
.world-screen{width:640px;height:360px}
/* STEP164-171: единая масштабируемая обёртка тайлов/объектов карты Мира.
Все дочерние элементы позиционируются абсолютно внутри неё в базовых
(немасштабированных) пикселях.
STEP171: сам масштаб теперь применяется через CSS zoom (как у #castleField Замка,
см. applyCastleZoom() в castle_view.php), а не через transform:scale(). Причины:
1) transform:scale() растягивает уже отрисованный битмап целиком — детальные спрайты
(замки/боты) при этом слегка размываются. zoom масштабирует каждый элемент
отдельно на уровне layout, без растягивания готового битмапа — картинки остаются
четкими на любом уровне зума (в т.ч. на некруглых значениях процента).
2) transform создает новый stacking context — из-за этого подсветка тайла (clip-path)
при наведении иногда на долю секунды отрисовывалась без обрезки (прямоугольником
вместо ромба). У zoom такой проблемы нет — стекинг-контекст не создается, все
дочерние элементы остаются в одном общем контексте, как и до STEP164, и их
относительный порядок отрисовки по-прежнему полностью определяется z-index.
3) transform:scale(), особенно вместе с несколькими одновременными GPU-промоутнутыми
слоями (STEP165/166), на слабых мобильных GPU мог приводить к неполной отрисовке
карты (в отличие от эмуляции мобильного экрана в DevTools на ПК, где рендер идёт
на десктопном GPU). zoom не требует отдельного GPU-композитного слоя вовсе.
- pointer-events:none на самой обёртке — она прозрачный div без фона, но по
умолчанию всё равно перехватывает клики по всей своей площади. Кликабельные
элементы (сами тайлы) принудительно включают pointer-events:auto через !important.
- Явные width/height у обёртки не нужны (дочерние элементы позиционируются абсолютно
независимо от размера родителя, а pointer-events:none снимает вопрос кликабельности
пустой области) — при zoom процентная ширина/высота элемента, зависящая от его же
собственного масштаба, могла бы давать путаницу, поэтому не задаем их вовсе. */
.world-field{
position:absolute;
pointer-events:none;
}
.tile{position:absolute;width:64px;height:32px;background-size:64px 32px}.obj{position:absolute;transform:translate(-50%,-70%);cursor:pointer}
.panel{position:absolute;left:4px;top:4px;width:210px;min-height:94px;background:rgba(80,32,8,.92);border:1px solid #d2a060;padding:5px;font-size:18px;line-height:1.25;text-shadow:1px 1px #000;z-index:5000}
.coords{position:absolute;left:280px;bottom:10px;font-size:22px;text-shadow:1px 1px #000;z-index:5000}
.arrow{position:absolute;width:32px;height:24px;z-index:3000}.arrow.up{left:304px;top:4px}.arrow.down{left:304px;bottom:4px}.arrow.left{left:8px;top:168px}.arrow.right{right:8px;top:168px}
.menu{position:absolute;left:4px;bottom:3px;background:#eee;color:#210;padding:3px;border-radius:4px;border:1px solid #000;z-index:5000}
.castle-screen{background:#297914;width:1900px;height:820px}.castle-stage{position:absolute;left:290px;top:0;right:370px;bottom:0;overflow:auto;z-index:100}.castle-field{position:absolute;left:0;top:70px;width:2300px;height:1350px;z-index:100;transform-origin:0 0;transition:transform .12s ease-out}
.castle-tile{position:absolute;cursor:pointer}.iso{position:absolute;width:64px;height:32px;background:url('assets/ground/grass.png') center/64px 32px}.building{position:absolute;cursor:pointer}.townhall{filter:drop-shadow(0 0 8px rgba(255,238,0,.95))}
.build-panel{position:absolute;right:20px;top:10px;width:340px;max-height:795px;overflow:auto;background:rgba(60,25,8,.94);border:1px solid #d2a060;padding:8px;line-height:1.5;z-index:5000}
.msg{max-width:1900px;margin:8px auto;background:#262626;padding:8px;border:1px solid #444}.btn{display:inline-block;color:#fff;background:#6b2b12;border:1px solid #c9914a;padding:4px 8px;text-decoration:none;margin:2px}
.small{font-size:12px;color:#ddd}.wall{position:absolute;transform:translate(-50%,-70%);pointer-events:none}.road{opacity:.9}.building-anchor{transform:translate(-50%,-100%)}.building-center{transform:translate(-50%,-50%)}.building-manual{transform:none}
.cell-label{position:absolute;min-width:28px;text-align:center;font:bold 10px Arial;background:rgba(255,255,0,.82);color:#000;border:1px solid #000;line-height:10px;pointer-events:none}.building-label{position:absolute;min-width:58px;text-align:center;font:bold 11px Arial;background:rgba(0,0,0,.75);color:#fff;border:1px solid #fff;line-height:12px;padding:1px 3px;pointer-events:none;text-shadow:1px 1px #000}.town-label{background:rgba(110,20,20,.85)}.debug-link{color:#ffe080;text-decoration:underline}
.building-selector{position:absolute;left:12px;top:10px;width:270px;max-height:795px;overflow:auto;background:rgba(245,235,210,.96);color:#2b1608;border:1px solid #8b5a20;padding:6px;z-index:6000;font-size:12px;line-height:1.35}.building-selector a{display:block;color:#3b1705;text-decoration:none;padding:1px 3px;border-bottom:1px solid rgba(120,80,40,.18)}.building-selector a.active{background:#8b3f13;color:#fff;font-weight:bold}
.zoom-controls{position:absolute;left:300px;top:10px;display:flex;align-items:center;gap:4px;background:rgba(245,235,210,.96);color:#2b1608;border:1px solid #8b5a20;padding:5px;z-index:6500}.zoom-controls button{cursor:pointer;background:#8b3f13;color:#fff;border:1px solid #d2a060;padding:3px 8px;font-weight:bold}.zoom-controls span{display:inline-block;min-width:52px;text-align:center;font-weight:bold}
.castle-ground-tile{image-rendering:auto;}
.castle-build-cell{filter:brightness(1.08);}
.castle-build-cell:hover{filter:brightness(1.18);}
.cell-marker{position:absolute;width:22px;height:22px;border:2px solid #ffea00;border-radius:50%;box-shadow:0 0 8px #ffea00;z-index:5000;pointer-events:none;}
.build-msg{background:#2b5b14;border:1px solid #b8e35a;color:#fff;padding:5px;margin:5px 0;}
.build-panel select{width:210px;margin:6px 0;color:#111;}
.build-panel button{background:#7b3514;color:#fff;border:1px solid #d2a060;padding:4px 8px;cursor:pointer;}
/* Build confirmation modal with original menu graphics */
.modal-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.25);z-index:8000;}
.build-modal{position:absolute;left:50%;top:50%;width:430px;min-height:330px;transform:translate(-50%,-50%);background:url('assets/menu/background.png') repeat;border:1px solid #241103;box-shadow:0 0 18px #000;z-index:8100;color:#2b1708;padding:18px 18px 55px 18px;font-family:Arial,Helvetica,sans-serif;}
.modal-corner{position:absolute;z-index:8120;pointer-events:none;}
.modal-corner-lt{left:-3px;top:-3px}.modal-corner-rt{right:-3px;top:-3px}.modal-corner-rb{right:-3px;bottom:-3px}.modal-corner-lb{left:-3px;bottom:-3px}
.modal-close{position:absolute;right:9px;top:6px;z-index:8130;background:#5b260b;color:#ffe7a3;border:1px solid #b98b49;width:22px;height:22px;line-height:18px;cursor:pointer;font-weight:bold;}
.modal-scroll{height:250px;overflow-y:auto;padding:8px 12px 8px 8px;background:rgba(255,244,205,.42);border:1px solid rgba(70,35,8,.35);}
.modal-scroll::-webkit-scrollbar{width:18px;}
.modal-scroll::-webkit-scrollbar-track{background:url('assets/menu/scroll_bg.png') repeat-y center top;}
.modal-scroll::-webkit-scrollbar-thumb{background:url('assets/menu/scroll.png') repeat-y center top;border:0;}
.modal-title{text-align:center;font:bold 18px Arial;color:#4b2108;text-shadow:1px 1px rgba(255,230,150,.8);margin-bottom:8px;}
.modal-content-row{display:flex;gap:12px;align-items:center;margin-bottom:8px;}
.modal-building-image{max-width:92px;max-height:92px;object-fit:contain;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45));}
.modal-main-info{font-size:13px;line-height:1.45;}
.resource-line{display:flex;flex-wrap:wrap;gap:7px 10px;margin:9px 0;padding:6px;background:rgba(70,35,8,.12);border:1px solid rgba(70,35,8,.2);}
.resource-item{display:inline-flex;align-items:center;gap:3px;font-weight:bold;color:#2b1708;min-width:58px;}
.resource-item img{vertical-align:middle;image-rendering:auto;}
.modal-description{font-size:13px;line-height:1.35;white-space:normal;color:#2b1708;}
.image-build-button{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:153px;height:28px;background:url('assets/menu/button.png') no-repeat center center;border:0;padding:0;color:#fff;text-shadow:1px 1px #000;font:bold 14px Arial;cursor:pointer;}
.image-build-button:active{background-image:url('assets/menu/button21.png');}
.image-build-button span{position:relative;top:0;}
.build-select-link{display:block;width:100%;text-align:left;color:#3b1705;background:transparent;border:0;border-bottom:1px solid rgba(120,80,40,.18);padding:2px 3px;cursor:pointer;font:12px Arial;}
.build-select-link:hover,.build-select-link.active{background:#8b3f13;color:#fff;font-weight:bold;}
/* Building info modal */
.info-modal{min-height:355px;}
.info-actions{position:absolute;left:0;right:0;bottom:15px;text-align:center;z-index:8200;display:flex;justify-content:center;gap:14px;}
.info-actions form{display:inline-block;margin:0;position:relative;width:153px;height:28px;}
.info-actions .image-build-button.info-button{position:relative;left:auto;bottom:auto;transform:none;display:block;}
.info-actions .image-build-button.danger span{color:#ffe0d0;}
/* Vertical action buttons in building info window */
.info-modal{min-height:420px;padding-bottom:105px;}
.info-actions{position:absolute;left:0;right:0;bottom:18px;text-align:center;z-index:8200;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;}
.info-actions form{display:block;margin:0;position:relative;width:153px;height:28px;}
.info-actions .image-build-button.info-button{position:relative;left:auto;bottom:auto;transform:none;display:block;width:153px;height:28px;}
.info-actions .image-build-button.danger span{color:#ffe0d0;}
/* Hard fix: building info window action buttons must never overlap. */
.info-modal{
min-height:420px !important;
padding-bottom:145px !important;
}
.info-actions{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:18px !important;
height:112px !important;
text-align:center !important;
z-index:8200 !important;
}
.info-actions form{
display:block !important;
width:auto !important;
height:28px !important;
margin:0 auto 10px auto !important;
}
.info-actions form:last-child{
margin-bottom:0 !important;
}
/* КНОПКА */
.info-action-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:153px !important;
height:28px !important;
padding:0 16px !important;
/* тёмная контрастная база */
background: linear-gradient(
to bottom,
#6a3b0a 0%,
#4a2606 50%,
#3a1d04 100%
);
/* рамка */
border:2px solid #d2b46c !important;
outline:1px solid #2a1403;
border-radius:6px;
/* объём + отделение от фона */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -2px 0 rgba(0,0,0,0.5),
0 3px 6px rgba(0,0,0,0.6);
color:#fff !important;
text-shadow:1px 1px 2px #000;
font:bold 14px Arial !important;
letter-spacing:0.5px;
cursor:pointer;
transition:all 0.1s ease;
}
/* Hover */
.info-action-button:hover{
background: linear-gradient(
to bottom,
#7a4a12,
#5a2f08,
#452205
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -2px 0 rgba(0,0,0,0.6),
0 4px 8px rgba(0,0,0,0.7);
}
/* Нажатие */
.info-action-button:active{
transform:translateY(2px);
box-shadow:
inset 0 3px 6px rgba(0,0,0,0.7),
0 1px 2px rgba(0,0,0,0.6);
}
/* Danger (Снести) */
.info-action-button.danger{
background: linear-gradient(
to bottom,
#7a1e1e,
#5a1414,
#3a0d0d
);
border-color:#d28a6c !important;
}
/* Top resource bar */
.top{height:36px;}
.top-resources{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:10px;}
.top-resource-item{display:inline-flex;align-items:center;gap:4px;min-width:115px;color:#ffe8a6;font:bold 13px Arial;text-shadow:1px 1px #000;}
.top-resource-item img{max-width:18px;max-height:18px;image-rendering:auto;}
/* Stable click model: map/building images are visual only; transparent hitboxes receive clicks. */
.castle-field .castle-tile,
.castle-field .fence-tile,
.castle-field .rov-tile,
.castle-field .building-manual {
pointer-events: none !important;
}
.castle-hitbox-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 4600;
pointer-events: none;
}
.castle-cell-hitbox {
position: absolute;
width: 300px;
height: 147px;
cursor: pointer;
pointer-events: auto;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: rgba(255, 255, 0, 0.01);
}
.castle-cell-hitbox:hover {
background: rgba(255, 238, 0, 0.18);
}
.building-cell-hitbox {
position: absolute;
width: 300px;
height: 147px;
margin-top: 0;
cursor: pointer;
pointer-events: auto;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: rgba(0, 180, 255, 0.01);
z-index: 20;
}
.building-cell-hitbox:hover {
background: rgba(0, 180, 255, 0.12);
}
.cell-marker {
z-index: 7000 !important;
}
/* Construction timer */
.construction-building{opacity:0.95;}
#infoBuildStatus,#infoBuildTimer{margin-top:3px;color:#ffe9b0;}
.construction-countdown{color:#fff3a0;}
/* Timer hitbox rebuild fix */
.castle-field .construction-building,
.castle-field .building,
.castle-field .castle-tile,
.castle-field .fence-tile,
.castle-field .rov-tile {
pointer-events: none !important;
}
.castle-hitbox-layer {
z-index: 4600 !important;
pointer-events: none !important;
}
.castle-cell-hitbox,
.building-cell-hitbox {
pointer-events: auto !important;
}
/* Unit training modal */
.unit-training-modal{
width:360px;
min-height:470px;
}
.unit-training-scroll{
max-height:390px;
overflow-y:auto;
padding-right:8px;
}
.unit-card{
margin:8px 0 12px 0;
padding:8px;
color:#eee;
background:rgba(0,0,0,0.20);
border-top:1px solid rgba(255,220,130,0.25);
border-bottom:1px solid rgba(0,0,0,0.35);
}
.unit-head{
display:flex;
gap:8px;
align-items:flex-start;
margin-bottom:4px;
}
.unit-image{
width:42px;
max-height:56px;
object-fit:contain;
image-rendering:auto;
}
.unit-cost .resource-item{
margin-right:4px;
}
.unit-stats{
line-height:16px;
font-size:13px;
margin-top:4px;
}
.unit-stat img{
width:14px;
height:14px;
vertical-align:middle;
margin-right:3px;
}
.unit-description,
.unit-requires{
font-size:12px;
color:#f2ddb4;
margin-top:6px;
}
.unit-train-row{
margin-top:8px;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
font-size:12px;
}
.unit-count-input{
width:52px;
background:#e8dfbd;
border:1px solid #5b3517;
color:#160b05;
padding:2px 4px;
}
.unit-train-button{
width:120px !important;
height:28px !important;
font-size:13px !important;
}
/* Locked units in training window */
.unit-card-locked { opacity: 0.68; }
.unit-locked-note { color: #ffcc99; font-weight: bold; margin: 4px 0; }
.unit-train-button:disabled, .unit-count-input:disabled { opacity: 0.55; cursor: default; }
/* Unit training queue */
.training-queue-box{
margin:8px 0 12px 0;
padding:7px;
background:rgba(40,18,7,0.35);
border:1px solid rgba(255,220,130,0.35);
color:#f7e7c4;
}
.training-queue-title{
font-weight:bold;
text-align:center;
margin-bottom:6px;
color:#ffe7a3;
}
.training-queue-row{
display:flex;
align-items:center;
gap:8px;
padding:4px 0;
border-top:1px solid rgba(255,255,255,0.08);
}
.training-queue-row:first-of-type{border-top:0;}
.training-queue-icon{
width:30px;
max-height:42px;
object-fit:contain;
}
.training-queue-text{
font-size:12px;
line-height:1.25;
}
.unit-train-form{margin:0;}
/* Army management modal */
.army-modal{
width:430px;
min-height:430px;
}
.army-scroll{
max-height:350px;
overflow-y:auto;
}
.army-card{
margin:8px 0 12px 0;
padding:8px;
color:#f7e7c4;
background:rgba(40,18,7,0.35);
border:1px solid rgba(255,220,130,0.35);
}
.army-title{
text-align:center;
font-weight:bold;
color:#ffe7a3;
margin-bottom:7px;
}
.army-badge{
font-size:11px;
color:#d5ffb8;
}
.army-unit-row{
display:flex;
align-items:center;
gap:8px;
padding:4px 0;
border-top:1px solid rgba(255,255,255,0.08);
}
.army-unit-row:first-of-type{border-top:0;}
.army-unit-icon{
width:32px;
max-height:44px;
object-fit:contain;
}
.army-empty{
font-size:12px;
color:#f2ddb4;
text-align:center;
padding:8px 4px;
}
.info-modal{padding-bottom:175px !important;}
.info-actions{height:150px !important;}
.army-intro{
margin:4px 0 10px 0;
color:#f6e7c6;
text-align:center;
}
.army-summary-card{
padding:10px;
}
.army-summary-head{
display:flex;
align-items:center;
gap:10px;
}
.army-summary-icon{
width:48px;
max-height:54px;
object-fit:contain;
flex:0 0 auto;
}
.army-summary-main{
flex:1 1 auto;
}
.army-summary-count{
text-align:center;
color:#fff1c8;
font-size:14px;
}
.army-manage-button{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
display:block;
width:260px;
height:36px;
margin:8px auto 0 auto;
padding:0;
border:0;
background:url('assets/menu/button.png') no-repeat center center;
background-size:100% 100%;
color:#fff;
text-shadow:1px 1px #000;
font:bold 18px Georgia, serif;
cursor:pointer;
}
.army-manage-button:disabled{
opacity:.55;
cursor:default;
}
.army-back-button{
display:block;
margin:0 auto 8px auto;
padding:6px 12px;
color:#fff4d0;
background:rgba(72,30,13,.65);
border:1px solid rgba(255,220,130,.55);
cursor:pointer;
}
.army-actions-note{
margin:10px 0 8px 0;
padding:8px;
color:#f6e7c6;
text-align:center;
border-top:1px solid rgba(255,255,255,0.08);
}
/* ============================================================
FINAL BUTTON FIX: CSS-drawn buttons, no image backgrounds
Applies to building info actions, build modal buttons,
unit training buttons and army management buttons.
Put this block at the END of style.css.
============================================================ */
/* Shared visual style for all menu/action buttons */
.image-build-button,
.info-action-button,
.unit-train-button,
.army-manage-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:153px !important;
height:28px !important;
padding:0 16px !important;
background-image:none !important;
background:
linear-gradient(to bottom,
#74420f 0%,
#542b08 48%,
#371804 100%
) !important;
border:2px solid #d9bd74 !important;
outline:1px solid #1f0d02 !important;
border-radius:6px !important;
box-shadow:
inset 0 1px 0 rgba(255,244,190,.35),
inset 0 -2px 0 rgba(0,0,0,.55),
0 3px 6px rgba(0,0,0,.65) !important;
color:#fff !important;
text-shadow:
1px 1px 0 #000,
0 0 2px #000 !important;
font:bold 14px Arial, Helvetica, sans-serif !important;
letter-spacing:.25px !important;
line-height:normal !important;
cursor:pointer !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* Reset old inner text offset from image-based buttons */
.image-build-button span,
.info-action-button span,
.unit-train-button span,
.army-manage-button span{
position:static !important;
top:auto !important;
line-height:normal !important;
}
/* Hover */
.image-build-button:hover,
.info-action-button:hover,
.unit-train-button:hover,
.army-manage-button:hover{
background-image:none !important;
background:
linear-gradient(to bottom,
#89551a 0%,
#63340b 48%,
#421f05 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,248,205,.45),
inset 0 -2px 0 rgba(0,0,0,.6),
0 4px 8px rgba(0,0,0,.75) !important;
}
/* Active: do not restore old button.png/button21.png */
.image-build-button:active,
.info-action-button:active,
.unit-train-button:active,
.army-manage-button:active{
background-image:none !important;
background:
linear-gradient(to bottom,
#3b1904 0%,
#552907 55%,
#6c3a0d 100%
) !important;
transform:translateY(2px) !important;
box-shadow:
inset 0 3px 6px rgba(0,0,0,.72),
0 1px 2px rgba(0,0,0,.65) !important;
}
/* Danger/destructive button */
.info-action-button.danger,
.image-build-button.danger{
background-image:none !important;
background:
linear-gradient(to bottom,
#873325 0%,
#642014 50%,
#421006 100%
) !important;
border-color:#e0a071 !important;
color:#ffe0d0 !important;
}
.info-action-button.danger:hover,
.image-build-button.danger:hover{
background-image:none !important;
background:
linear-gradient(to bottom,
#9a402f 0%,
#732719 50%,
#4c1408 100%
) !important;
}
/* Building info modal: vertical buttons without old image artifacts */
.info-modal{
min-height:420px !important;
padding-bottom:175px !important;
}
.info-actions{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:18px !important;
height:150px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
text-align:center !important;
z-index:8200 !important;
}
.info-actions form{
display:block !important;
position:static !important;
width:auto !important;
height:28px !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
}
.info-actions .image-build-button,
.info-actions .image-build-button.info-button,
.info-actions .info-action-button{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
display:inline-flex !important;
width:auto !important;
min-width:153px !important;
height:28px !important;
margin:0 !important;
}
/* Build confirmation modal keeps its button centered at the bottom */
.build-modal > .image-build-button,
.build-modal form > .image-build-button{
position:absolute !important;
left:50% !important;
bottom:16px !important;
transform:translateX(-50%) !important;
}
/* Build confirmation active state: keep centered while pressed */
.build-modal > .image-build-button:active,
.build-modal form > .image-build-button:active{
transform:translateX(-50%) translateY(2px) !important;
}
/* Unit training modal buttons should fit inside compact rows */
.unit-train-button{
min-width:120px !important;
width:auto !important;
height:28px !important;
font-size:13px !important;
}
/* Army modal large action button */
.army-manage-button{
width:260px !important;
min-width:260px !important;
height:36px !important;
margin:8px auto 0 auto !important;
font:bold 18px Georgia, serif !important;
}
/* Disabled state */
.image-build-button:disabled,
.info-action-button:disabled,
.unit-train-button:disabled,
.army-manage-button:disabled{
opacity:.55 !important;
cursor:default !important;
transform:none !important;
}
/* ===== FIX: центрирование кнопки в окне армии ===== */
.army-summary-card{
display:flex;
flex-direction:column;
align-items:center;
}
/* ============================================================
FIX: unit training modal scroll area
Окно тренировки не имеет нижней action-кнопки, поэтому общий
.build-modal padding-bottom:55px и .modal-scroll height:250px
оставляли большую пустую область снизу.
============================================================ */
#unitTrainingModal.build-modal.unit-training-modal{
width:360px !important;
height:470px !important;
min-height:0 !important;
/* одинаковые внешние отступы внутри окна */
padding:18px !important;
box-sizing:border-box !important;
}
/* Делаем scroll-блок настоящей рабочей областью окна.
absolute + top/right/bottom/left надежнее flex здесь, потому что
старый .modal-scroll задает фиксированную height:250px. */
#unitTrainingModal .modal-scroll.unit-training-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}
/* Заголовок остается внутри scroll-блока, но получает аккуратный отступ */
#unitTrainingModal .modal-title{
margin:0 0 10px 0 !important;
}
/* Убираем лишние зазоры первой и последней карточки */
#unitTrainingModal .unit-card:first-child{
margin-top:0 !important;
}
#unitTrainingModal .unit-card:last-child{
margin-bottom:0 !important;
}
/* ============================================================
FINAL FIX: окно армии — ровные отступы без поломки кнопок
Мягкий фикс: не используем position:absolute, чтобы не ломать layout.
============================================================ */
.army-modal{
padding:18px !important;
box-sizing:border-box !important;
}
.army-modal .army-scroll{
max-height:none !important;
height:auto !important;
overflow-y:auto !important;
margin:0 !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
.army-modal .army-card:first-child{
margin-top:0 !important;
}
.army-modal .army-card:last-child{
margin-bottom:0 !important;
}
.army-modal .army-summary-card{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
/* ============================================================
FINAL FIX: кнопки управления в окне армии как в окне здания
============================================================ */
.army-modal .army-manage-button{
width:auto !important;
min-width:153px !important;
height:28px !important;
padding:0 16px !important;
margin:8px auto 0 auto !important;
font:bold 14px Arial, Helvetica, sans-serif !important;
letter-spacing:.25px !important;
line-height:normal !important;
}
.army-modal .army-manage-button:active{
transform:translateY(2px) !important;
}
/* ============================================================
FIX: центрирование кнопки "Переформировать" в окне армии
Точечно только для кнопки openArmyReform(...)
============================================================ */
.army-modal button.info-action-button.army-manage-button[onclick^="openArmyReform"]{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:153px !important;
min-width:153px !important;
height:28px !important;
margin:10px auto 0 auto !important;
padding:0 16px !important;
float:none !important;
clear:both !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
text-align:center !important;
}
/* ============================================================
FIX: центрирование кнопки "Тренировать"
============================================================ */
.unit-train-row{
justify-content:space-between !important;
}
.unit-train-row .unit-train-button{
flex-basis:55% !important;
display:flex !important;
justify-content:center !important;
margin:8px auto 0 auto !important;
}
/* ============================================================
FIX: выравнивание input в окне переформирования армии
============================================================ */
.army-modal .army-unit-row{
display:flex !important;
align-items:center !important;
}
/* текстовая часть занимает всё доступное место */
.army-modal .army-unit-row > div{
flex:1 1 auto !important;
min-width:0 !important;
}
/* input выстраиваются в одну колонку */
.army-modal .army-unit-row input{
width:60px !important;
margin-left:10px !important;
flex:0 0 auto !important;
}
/* ============================================================
UI SYSTEM v2: modal/button/grid foundation
Keep this block at the very end of style.css.
New windows should use .ui-modal, .ui-modal__body, .game-button,
.ui-grid, .ui-actions and specific modifiers.
============================================================ */
:root{
--ui-modal-w:430px;
--ui-modal-pad:18px;
--ui-modal-body-pad-y:10px;
--ui-modal-body-pad-x:12px;
--ui-btn-min-w:153px;
--ui-btn-h:28px;
--ui-brown-1:#74420f;
--ui-brown-2:#542b08;
--ui-brown-3:#371804;
--ui-gold:#d9bd74;
--ui-dark:#1f0d02;
--ui-text:#fff;
}
/* ---------- Buttons ---------- */
.game-button,
.image-build-button,
.info-action-button,
.unit-train-button,
.army-manage-button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:var(--ui-btn-min-w) !important;
width:auto !important;
height:var(--ui-btn-h) !important;
padding:0 16px !important;
margin:0 auto !important;
border:2px solid var(--ui-gold) !important;
outline:1px solid var(--ui-dark) !important;
border-radius:6px !important;
background-image:none !important;
background:linear-gradient(to bottom,var(--ui-brown-1) 0%,var(--ui-brown-2) 48%,var(--ui-brown-3) 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,244,190,.35), inset 0 -2px 0 rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.65) !important;
color:var(--ui-text) !important;
text-shadow:1px 1px 0 #000,0 0 2px #000 !important;
font:bold 14px Arial,Helvetica,sans-serif !important;
letter-spacing:.25px !important;
line-height:normal !important;
text-align:center !important;
cursor:pointer !important;
box-sizing:border-box !important;
overflow:hidden !important;
float:none !important;
clear:none !important;
}
.game-button span,
.image-build-button span,
.info-action-button span,
.unit-train-button span,
.army-manage-button span{position:static !important;top:auto !important;line-height:normal !important;}
.game-button:hover,
.image-build-button:hover,
.info-action-button:hover,
.unit-train-button:hover,
.army-manage-button:hover{
background-image:none !important;
background:linear-gradient(to bottom,#89551a 0%,#63340b 48%,#421f05 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,248,205,.45), inset 0 -2px 0 rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.75) !important;
}
.game-button:active,
.image-build-button:active,
.info-action-button:active,
.unit-train-button:active,
.army-manage-button:active{
transform:translateY(2px) !important;
background-image:none !important;
background:linear-gradient(to bottom,#3b1904 0%,#552907 55%,#6c3a0d 100%) !important;
box-shadow:inset 0 3px 6px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.65) !important;
}
.game-button:disabled,
.image-build-button:disabled,
.info-action-button:disabled,
.unit-train-button:disabled,
.army-manage-button:disabled{opacity:.55 !important;cursor:default !important;transform:none !important;}
.game-button.danger,
.info-action-button.danger,
.image-build-button.danger{background:linear-gradient(to bottom,#873325 0%,#642014 50%,#421006 100%) !important;border-color:#e0a071 !important;color:#ffe0d0 !important;}
/* Legacy build button positioning inside build modal */
#buildModal .image-build-button,
#buildModal form > .image-build-button{position:absolute !important;left:50% !important;bottom:16px !important;transform:translateX(-50%) !important;}
#buildModal .image-build-button:active,
#buildModal form > .image-build-button:active{transform:translateX(-50%) translateY(2px) !important;}
/* ---------- Modal base ---------- */
.ui-modal,
.build-modal{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:var(--ui-modal-w);
min-height:330px;
background:url('assets/menu/background.png') repeat;
border:1px solid #241103;
box-shadow:0 0 18px #000;
z-index:8100;
color:#2b1708;
padding:var(--ui-modal-pad);
font-family:Arial,Helvetica,sans-serif;
box-sizing:border-box;
}
.ui-modal__body,
.modal-scroll{
overflow-y:auto;
padding:var(--ui-modal-body-pad-y) var(--ui-modal-body-pad-x);
background:rgba(255,244,205,.42);
border:1px solid rgba(70,35,8,.35);
box-sizing:border-box;
}
.ui-modal__title,
.modal-title{text-align:center;font:bold 18px Arial;color:#4b2108;text-shadow:1px 1px rgba(255,230,150,.8);margin:0 0 10px 0;}
.ui-modal__close,.modal-close{position:absolute;right:9px;top:6px;z-index:8130;background:#5b260b;color:#ffe7a3;border:1px solid #b98b49;width:22px;height:22px;line-height:18px;cursor:pointer;font-weight:bold;}
.ui-actions{display:flex;align-items:center;justify-content:center;gap:8px;}
.ui-actions--stack{flex-direction:column;}
.ui-action-form{display:block !important;position:static !important;width:auto !important;height:var(--ui-btn-h) !important;margin:0 !important;padding:0 !important;text-align:center !important;}
/* Modal variants */
#buildModal.ui-modal--build{width:430px;min-height:330px;padding:18px 18px 55px 18px;}
#buildModal .ui-modal__body{height:250px;}
#buildingInfoModal.ui-modal--info{width:430px;min-height:420px;padding:18px 18px 175px 18px;}
#buildingInfoModal .ui-modal__body{height:250px;}
#buildingInfoModal .info-actions{position:absolute !important;left:0 !important;right:0 !important;bottom:18px !important;height:150px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:8px !important;z-index:8200 !important;text-align:center !important;}
#unitTrainingModal.ui-modal--training{width:360px !important;height:470px !important;min-height:0 !important;padding:18px !important;}
#unitTrainingModal .ui-modal__body{position:absolute !important;left:18px !important;right:18px !important;top:18px !important;bottom:18px !important;width:auto !important;height:auto !important;min-height:0 !important;max-height:none !important;margin:0 !important;}
#armyModal.ui-modal--army{width:430px;min-height:430px;padding:18px !important;}
#armyModal .ui-modal__body,.army-modal .army-scroll{max-height:none !important;height:auto !important;margin:0 !important;padding:10px 12px !important;box-sizing:border-box !important;}
/* ---------- Grid helpers ---------- */
.ui-grid{display:grid;gap:8px;align-items:center;}
.ui-grid--two{grid-template-columns:1fr auto;}
.ui-grid--three{grid-template-columns:auto 1fr auto;}
.ui-info-row,.modal-content-row{display:grid !important;grid-template-columns:auto 1fr !important;gap:12px !important;align-items:center !important;}
/* Training window grid */
.unit-training-modal .unit-card{margin:0 0 10px 0 !important;padding:8px;color:#eee;background:rgba(0,0,0,.20);border-top:1px solid rgba(255,220,130,.25);border-bottom:1px solid rgba(0,0,0,.35);}
.unit-training-modal .unit-card:last-child{margin-bottom:0 !important;}
.unit-train-row{display:grid !important;grid-template-columns:auto 1fr !important;align-items:center !important;gap:8px !important;margin-top:8px !important;}
.unit-train-row .unit-train-button{grid-column:1 / -1 !important;justify-self:center !important;min-width:153px !important;width:auto !important;flex-basis:auto !important;margin:8px auto 0 auto !important;}
.unit-train-button{min-width:120px !important;height:28px !important;font-size:13px !important;}
/* Army cards and reform grid */
.army-summary-card{display:flex !important;flex-direction:column !important;align-items:center !important;padding:10px !important;}
.army-summary-head{display:grid !important;grid-template-columns:auto 1fr !important;align-items:center !important;gap:10px !important;width:100% !important;}
.army-manage-button{min-width:153px !important;width:auto !important;height:28px !important;margin:8px auto 0 auto !important;font:bold 14px Arial,Helvetica,sans-serif !important;}
.army-reform-form{display:block !important;width:100% !important;}
.army-reform-row{display:grid !important;grid-template-columns:42px 1fr 60px !important;align-items:center !important;column-gap:8px !important;width:100% !important;}
.army-reform-row .army-unit-icon{justify-self:start !important;}
.army-reform-unit{justify-self:stretch !important;min-width:0 !important;}
.army-reform-input{justify-self:end !important;width:60px !important;min-width:60px !important;margin-left:0 !important;}
.army-reform-target{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important;margin:10px 0 8px 0 !important;padding:0 !important;text-align:left !important;}
.army-target-option{display:grid !important;grid-template-columns:18px 1fr 96px !important;align-items:center !important;column-gap:6px !important;width:100% !important;margin:0 !important;padding:0 !important;line-height:20px !important;}
.army-target-option input[type="radio"]{width:auto !important;min-width:0 !important;height:auto !important;margin:0 !important;padding:0 !important;flex:none !important;}
.army-target-label{display:block !important;white-space:normal !important;}
.army-name-input,.army-target-select{width:96px !important;min-width:96px !important;max-width:96px !important;height:22px !important;margin:0 !important;padding:2px 4px !important;box-sizing:border-box !important;}
.army-reform-form > button.info-action-button.army-manage-button[type="submit"]{display:flex !important;justify-content:center !important;min-width:153px !important;width:auto !important;margin:12px auto 0 auto !important;}
/* Inputs */
.unit-count-input{background:#e8dfbd;border:1px solid #5b3517;color:#160b05;padding:2px 4px;box-sizing:border-box;}
/* ============================================================
BUILD SELECTION WINDOW
Открывается по клику на свободную клетку замка.
============================================================ */
#buildModal.ui-modal--build-select{
width:430px !important;
height:470px !important;
min-height:0 !important;
padding:18px !important;
box-sizing:border-box !important;
}
#buildModal.ui-modal--build-select .ui-modal__title{
margin:0 0 10px 0 !important;
}
#buildModal .build-selection-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:50px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
}
.build-choice-card{
margin:0 0 10px 0 !important;
padding:8px !important;
color:#f7e7c4;
background:rgba(40,18,7,.30);
border:1px solid rgba(255,220,130,.25);
box-sizing:border-box;
}
.build-choice-card:last-child{margin-bottom:0 !important;}
.build-choice-card-locked{opacity:.72;}
.build-choice-head{
display:grid;
grid-template-columns:52px 1fr;
align-items:center;
gap:10px;
margin-bottom:6px;
}
.build-choice-image{
width:48px;
max-height:58px;
object-fit:contain;
filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45));
}
.build-choice-main b{
color:#ffe7a3;
text-shadow:1px 1px #000;
}
.build-choice-cost{
margin:6px 0 0 0 !important;
}
.build-choice-meta{
font-size:12px;
line-height:1.35;
color:#f6e7c6;
margin:6px 0;
}
.build-choice-description{
color:#f2ddb4 !important;
font-size:12px !important;
margin-top:6px;
}
.build-choice-locked-note{
margin:6px 0 0 0;
color:#ffcc99;
font-weight:bold;
font-size:12px;
line-height:1.35;
}
.build-choice-form{
display:flex;
justify-content:center;
margin:8px 0 0 0;
}
.build-choice-button{
min-width:153px !important;
height:28px !important;
font:bold 14px Arial,Helvetica,sans-serif !important;
}
.build-panel .small{
display:block;
margin-top:4px;
}
/* ============================================================
BUILD SELECTION WINDOW refinements
Заголовок окна находится внутри scroll-панели и отделен линией.
Карточки сортируются JS: доступные сначала, затем по стоимости дерева.
============================================================ */
#buildModal.ui-modal--build-select{
width:430px !important;
height:470px !important;
min-height:0 !important;
padding:18px !important;
box-sizing:border-box !important;
}
#buildModal .build-selection-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
box-sizing:border-box !important;
overflow-y:auto !important;
}
.ui-panel-title,
.build-selection-title{
color:#ffe7a3 !important;
text-align:center !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
text-shadow:1px 1px #000 !important;
margin:0 0 10px 0 !important;
padding:0 0 8px 0 !important;
border-bottom:1px solid rgba(255,220,130,.35) !important;
}
.build-choice-meta,
.build-choice-meta b{
color:#fff !important;
}
/* ============================================================
UI MODAL HEADER SYSTEM
Фиксированная верхняя панель заголовка + отдельная scroll-область.
Используется для окон типа "Тренировка" и "Постройка".
============================================================ */
.ui-modal .ui-modal__header{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 32px 8px 32px !important;
box-sizing:border-box !important;
border-bottom:2px solid rgba(80,35,10,.70) !important;
box-shadow:0 2px 0 rgba(255,220,130,.22) !important;
z-index:8125 !important;
pointer-events:none !important;
}
.ui-modal .ui-modal__header .ui-modal__title{
margin:0 !important;
padding:0 !important;
color:#ffe7a3 !important;
text-align:center !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
line-height:22px !important;
text-shadow:
1px 1px 0 #000,
0 0 3px rgba(0,0,0,.85) !important;
border:0 !important;
box-shadow:none !important;
}
/* Область прокрутки начинается ниже заголовка.
Верхняя панель всегда остается на месте. */
#unitTrainingModal .modal-scroll.unit-training-scroll,
#buildModal .modal-scroll.build-selection-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:66px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}
/* Для нового заголовка старый title-стиль внутри body больше не нужен. */
#unitTrainingModal .unit-training-scroll .ui-modal__title,
#buildModal .build-selection-scroll .ui-modal__title,
#buildModal .build-selection-title{
display:none !important;
}
/* У окна постройки и тренировки одинаковые размеры и отступы. */
#unitTrainingModal.ui-modal,
#buildModal.ui-modal--build-select{
padding:18px !important;
box-sizing:border-box !important;
}
/* ============================================================
ACTION BUTTON VISIBILITY RULES
JS toggles .is-hidden because older action-form rules use !important.
============================================================ */
.ui-action-form.is-hidden,
.info-actions .ui-action-form.is-hidden{
display:none !important;
}
/* ============================================================
BUILDING INFO MODAL: fixed header + flexible bottom actions
============================================================ */
#buildingInfoModal.ui-modal--info{
width:430px !important;
height:470px !important;
min-height:0 !important;
padding:18px !important;
box-sizing:border-box !important;
}
#buildingInfoModal .ui-modal__header{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 32px 8px 32px !important;
box-sizing:border-box !important;
border-bottom:2px solid rgba(80,35,10,.70) !important;
box-shadow:0 2px 0 rgba(255,220,130,.22) !important;
z-index:8125 !important;
pointer-events:none !important;
}
#buildingInfoModal .ui-modal__header .ui-modal__title{
margin:0 !important;
padding:0 !important;
color:#ffe7a3 !important;
text-align:center !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
line-height:22px !important;
text-shadow:
1px 1px 0 #000,
0 0 3px rgba(0,0,0,.85) !important;
}
/* Контент здания прокручивается отдельно от шапки и кнопок */
#buildingInfoModal .info-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:66px !important;
bottom:126px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}
/* Кнопки всегда прижаты вниз. Если кнопок мало — они остаются внизу. */
#buildingInfoModal .info-actions{
position:absolute !important;
left:18px !important;
right:18px !important;
bottom:18px !important;
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
z-index:8200 !important;
}
#buildingInfoModal .info-actions .ui-action-form{
display:block !important;
width:auto !important;
height:28px !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
}
#buildingInfoModal .info-actions .ui-action-form.is-hidden{
display:none !important;
}
#buildingInfoModal .info-action-button{
min-width:153px !important;
height:28px !important;
}
/* Статус нехватки ресурсов */
.ui-status-note{
margin:6px 0 8px 0 !important;
padding:6px 8px !important;
color:#ffdfb8 !important;
font-size:12px !important;
line-height:1.35 !important;
background:rgba(80,25,10,.28) !important;
border:1px solid rgba(255,180,120,.28) !important;
}
/* Disabled buttons */
.game-button:disabled,
.info-action-button:disabled{
opacity:.55 !important;
cursor:default !important;
filter:grayscale(.25) !important;
}
/* Army modal: center old/long disband button with the same button system */
.army-modal form .army-manage-button,
.army-modal button.army-manage-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:10px auto 0 auto !important;
width:auto !important;
min-width:153px !important;
height:28px !important;
font:bold 14px Arial, Helvetica, sans-serif !important;
line-height:normal !important;
}
.army-modal form{
text-align:center !important;
}
/* ============================================================
BUILDING INFO POLISH
- one max-level message
- missing resources with icons
- scroll area adapts to number of visible bottom buttons
============================================================ */
#buildingInfoModal #infoCost .info-max-level-note{
color:#2b1708 !important;
font-weight:bold !important;
}
#buildingInfoModal #infoUpgradeNote{
align-items:center !important;
gap:6px !important;
flex-wrap:wrap !important;
}
#buildingInfoModal #infoUpgradeNote .missing-resource-list{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
#buildingInfoModal #infoUpgradeNote .missing-resource-item{
min-width:auto !important;
color:#fff !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
}
#buildingInfoModal #infoUpgradeNote .missing-resource-item img{
width:14px !important;
height:14px !important;
margin-right:3px !important;
}
/* Автоматический резерв под нижние кнопки в зависимости от их количества */
#buildingInfoModal.ui-actions-count-0 .info-scroll{ bottom:18px !important; }
#buildingInfoModal.ui-actions-count-1 .info-scroll{ bottom:58px !important; }
#buildingInfoModal.ui-actions-count-2 .info-scroll{ bottom:94px !important; }
#buildingInfoModal.ui-actions-count-3 .info-scroll{ bottom:130px !important; }
#buildingInfoModal.ui-actions-count-4 .info-scroll{ bottom:166px !important; }
#buildingInfoModal .info-actions{
justify-content:flex-end !important;
}
/* Center max level text */
#buildingInfoModal #infoCost{
text-align:center !important;
}
#buildingInfoModal #infoCost .info-max-level-note{
display:block !important;
text-align:center !important;
width:100% !important;
}
/* ============================================================
FIX: icons in "missing resources" line must not stretch
============================================================ */
#buildingInfoModal #infoUpgradeNote .missing-resource-item{
display:inline-flex !important;
align-items:center !important;
gap:3px !important;
min-width:auto !important;
width:auto !important;
height:auto !important;
line-height:14px !important;
}
#buildingInfoModal #infoUpgradeNote .missing-resource-item img{
display:inline-block !important;
flex:0 0 auto !important;
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
object-fit:contain !important;
vertical-align:middle !important;
image-rendering:auto !important;
margin:0 3px 0 0 !important;
}
/* Army movement lock note */
.army-busy-note{
margin:6px 0 8px 0 !important;
padding:6px 8px !important;
color:#ffdfb8 !important;
font-size:12px !important;
line-height:1.35 !important;
text-align:center !important;
background:rgba(80,25,10,.28) !important;
border:1px solid rgba(255,180,120,.28) !important;
}
/* ============================================================
BATTLE REPORT MODAL UI
============================================================ */
.battle-report-page{
background:#050505 !important;
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-family:Arial, Helvetica, sans-serif !important;
}
.battle-report-shell.battle-report-modal{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:min(860px, calc(100vw - 16px)) !important;
min-height:calc(100vh - 24px) !important;
margin:8px auto !important;
padding:70px 18px 24px 18px !important;
color:#fff !important;
background:url('assets/menu/background.png') repeat !important;
border:1px solid #241103 !important;
box-shadow:0 0 18px #000 !important;
}
.battle-report-topbar{
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
height:54px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:20px !important;
background:linear-gradient(to bottom,#7b151b,#310507) !important;
border-bottom:2px solid rgba(255,220,130,.45) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.55) !important;
z-index:3 !important;
}
.battle-report-topbar a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
height:36px !important;
border-radius:7px !important;
text-decoration:none !important;
font-size:26px !important;
color:#fff !important;
text-shadow:1px 1px 2px #000 !important;
background:rgba(255,255,255,.08) !important;
}
.battle-report-header{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
height:auto !important;
padding:16px 10px 18px 10px !important;
margin:0 0 10px 0 !important;
border-bottom:2px solid rgba(255,220,130,.55) !important;
box-shadow:0 2px 0 rgba(0,0,0,.55) !important;
pointer-events:auto !important;
}
.battle-report-title{
color:#fff !important;
font:bold 34px Georgia, "Times New Roman", serif !important;
line-height:1.15 !important;
text-align:center !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-report-scroll{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#fff !important;
}
.battle-section{
margin:0 0 14px 0 !important;
border-top:2px solid rgba(255,220,130,.35) !important;
border-bottom:2px solid rgba(0,0,0,.55) !important;
}
.battle-section-title{
padding:9px 10px !important;
text-align:center !important;
color:#fff !important;
font:bold 22px Georgia, "Times New Roman", serif !important;
text-transform:uppercase !important;
letter-spacing:.5px !important;
background:linear-gradient(to bottom,#77161b,#340506) !important;
border-top:1px solid rgba(255,220,130,.4) !important;
border-bottom:1px solid rgba(255,220,130,.4) !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-trophies,
.battle-side,
.battle-army-card,
.battle-date-section{
margin:12px !important;
padding:18px 22px !important;
background:rgba(70,25,5,.38) !important;
border:1px solid rgba(176,86,24,.75) !important;
border-radius:16px !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.25) !important;
}
.battle-trophies{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:18px 26px !important;
flex-wrap:wrap !important;
min-height:70px !important;
}
.battle-trophy{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
color:#fff !important;
font:bold 24px Georgia, "Times New Roman", serif !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-trophy img{
width:auto !important;
height:auto !important;
max-width:30px !important;
max-height:30px !important;
object-fit:contain !important;
image-rendering:auto !important;
}
.battle-side{
color:#fff !important;
font:22px Georgia, "Times New Roman", serif !important;
line-height:1.55 !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-side h3{
margin:0 0 8px 0 !important;
color:#fff !important;
font:bold 28px Georgia, "Times New Roman", serif !important;
}
.battle-side-icon{
display:inline-block !important;
width:42px !important;
text-align:center !important;
margin-right:8px !important;
}
.battle-side-line b{
color:#fff !important;
border-bottom:1px solid rgba(255,255,255,.65) !important;
}
.battle-loss-total{
margin-top:8px !important;
color:#fff !important;
font:24px Georgia, "Times New Roman", serif !important;
text-align:center !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-army-card{
color:#fff !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-army-name{
text-align:center !important;
font:26px Georgia, "Times New Roman", serif !important;
margin-bottom:6px !important;
}
.battle-unit-losses{
margin-top:18px !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
.battle-unit-loss-row{
display:grid !important;
grid-template-columns:42px 1fr auto !important;
align-items:center !important;
column-gap:10px !important;
min-height:38px !important;
color:#fff !important;
font:24px Georgia, "Times New Roman", serif !important;
line-height:1.15 !important;
}
.battle-unit-icon{
width:34px !important;
height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.battle-unit-icon img{
width:auto !important;
height:auto !important;
max-width:34px !important;
max-height:34px !important;
object-fit:contain !important;
image-rendering:auto !important;
filter:drop-shadow(1px 2px 2px rgba(0,0,0,.65)) !important;
}
/* STEP180: значки разделов боевого отчёта (Стороны/Армии/Общие потери/Трофеи) —
config/battle_report_section_icons_config.php, battle_section_icon_html() в
battle_report.php. Размер уже посчитан и округлен в PHP (см. --bsi-w/h-desktop/mobile
в inline-style каждой картинки) — тут просто применяем нужную пару переменных под
десктоп/мобильный экран, без дробного calc(), чтобы не размывалось. */
.battle-section-icon{
display:inline-block !important;
vertical-align:middle !important;
width:var(--bsi-w-desktop, 24px) !important;
height:var(--bsi-h-desktop, 24px) !important;
object-fit:contain !important;
flex:none !important;
margin-right:7px !important;
filter:drop-shadow(1px 2px 2px rgba(0,0,0,.6)) !important;
}
html.mobile-runtime .battle-section-icon{
width:var(--bsi-w-mobile, 22px) !important;
height:var(--bsi-h-mobile, 22px) !important;
}
.battle-side-title,
.battle-section-title,
.battle-loss-total{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
}
.battle-side-title{
justify-content:flex-start !important;
}
.battle-loss-total .battle-section-icon{
margin-right:6px !important;
}
.battle-unit-name{
min-width:0 !important;
overflow-wrap:anywhere !important;
}
.battle-unit-count{
white-space:nowrap !important;
text-align:right !important;
}
.battle-empty{
margin:12px !important;
padding:18px !important;
text-align:center !important;
color:#ffe7a3 !important;
font:20px Georgia, "Times New Roman", serif !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-date-section{
text-align:center !important;
font:24px Georgia, "Times New Roman", serif !important;
color:#fff !important;
text-shadow:2px 2px 3px #000 !important;
}
.battle-report-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:24px !important;
padding:18px 70px 24px 70px !important;
}
.battle-big-action{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
min-height:104px !important;
padding:12px !important;
color:#fff !important;
text-decoration:none !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
border:4px solid #d9bd74 !important;
border-radius:14px !important;
background:linear-gradient(to bottom,#3d1705,#120602) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 8px rgba(0,0,0,.65) !important;
}
.battle-big-action:first-letter{
font-size:44px !important;
}
.battle-big-action.danger{
background:linear-gradient(to bottom,#4b1208,#1a0502) !important;
}
.battle-big-action span{
margin-top:4px !important;
}
@media (max-width: 720px){
.battle-report-shell.battle-report-modal{
width:100vw !important;
min-height:100vh !important;
margin:0 !important;
border-left:0 !important;
border-right:0 !important;
}
.battle-report-title{
font-size:28px !important;
}
.battle-side,
.battle-loss-total,
.battle-unit-loss-row{
font-size:20px !important;
}
.battle-unit-loss-row{
grid-template-columns:38px 1fr !important;
}
.battle-unit-count{
grid-column:2 !important;
text-align:left !important;
}
.battle-report-actions{
padding:14px 36px 20px 36px !important;
gap:18px !important;
}
}
/* ============================================================
BATTLE REPORT UI - compact version based on UI_SYSTEM_GUIDE modal system
============================================================ */
.battle-report-page{
margin:0 !important;
padding:0 !important;
min-width:0 !important;
background:#071f06 !important;
color:#fff !important;
font-family:Arial, Helvetica, sans-serif !important;
}
.battle-report-modal{
width:430px !important;
height:470px !important;
min-height:0 !important;
padding:18px !important;
color:#fff !important;
box-sizing:border-box !important;
}
.battle-report-modal .battle-report-fixed-header{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 32px 8px 32px !important;
box-sizing:border-box !important;
border-bottom:2px solid rgba(80,35,10,.70) !important;
box-shadow:0 2px 0 rgba(255,220,130,.22) !important;
z-index:8125 !important;
pointer-events:none !important;
}
.battle-report-modal .battle-report-fixed-header .ui-modal__title{
margin:0 !important;
padding:0 !important;
color:#ffe7a3 !important;
text-align:center !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
line-height:22px !important;
text-shadow:1px 1px 0 #000,0 0 3px rgba(0,0,0,.85) !important;
}
.battle-report-modal .battle-report-body{
position:absolute !important;
left:18px !important;
right:18px !important;
top:66px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
color:#fff !important;
background:rgba(255,244,205,.32) !important;
border:1px solid rgba(70,35,8,.35) !important;
}
.battle-report-body .battle-section{
margin:0 0 10px 0 !important;
border:0 !important;
}
.battle-report-body .battle-section-title{
margin:0 0 8px 0 !important;
padding:6px 8px !important;
text-align:center !important;
color:#ffe7a3 !important;
font:bold 15px Arial, Helvetica, sans-serif !important;
text-transform:uppercase !important;
letter-spacing:.3px !important;
background:linear-gradient(to bottom,#6f1518,#3a0707) !important;
border:1px solid rgba(255,220,130,.45) !important;
text-shadow:1px 1px 2px #000 !important;
}
.general-report-card{margin-bottom:8px}
.general-report-head{color:#ffe08a;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.general-report-bonuses{font-size:12.5px;color:#e9c988;margin-bottom:3px}
.general-report-xp{margin-top:6px;padding:6px 9px;border-radius:8px;background:rgba(120,200,120,.15);border:1px solid rgba(120,200,120,.35);color:#a9e79a;font-size:13px}
.army-general-row-nwind{border-left:3px solid rgba(226,176,86,.7) !important;background:rgba(226,176,86,.08) !important}
.general-report-levelup{margin-top:6px;padding:6px 9px;border-radius:8px;background:rgba(120,200,120,.15);border:1px solid rgba(120,200,120,.35);color:#a9e79a;font-size:13px}
.general-report-injured{margin-top:6px;padding:6px 9px;border-radius:8px;background:rgba(220,100,90,.15);border:1px solid rgba(220,100,90,.35);color:#f0a3a3;font-size:13px}
.battle-report-body .battle-card,
.battle-report-body .battle-side,
.battle-report-body .battle-trophies,
.battle-report-body .battle-date-card{
margin:0 0 8px 0 !important;
padding:8px !important;
color:#fff !important;
background:rgba(70,25,5,.35) !important;
border:1px solid rgba(176,86,24,.55) !important;
border-radius:8px !important;
box-shadow:inset 0 0 10px rgba(0,0,0,.18) !important;
text-shadow:1px 1px 2px #000 !important;
}
.battle-report-body .battle-trophies{
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:8px 14px !important;
min-height:36px !important;
}
.battle-report-body .battle-trophy{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
color:#fff !important;
font:bold 15px Arial, Helvetica, sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.battle-report-body .battle-trophy img{
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
object-fit:contain !important;
}
.battle-report-body .battle-side{
font:14px Arial, Helvetica, sans-serif !important;
line-height:1.45 !important;
}
.battle-report-body .battle-side-title{
display:flex !important;
align-items:center !important;
gap:6px !important;
margin-bottom:4px !important;
color:#ffe7a3 !important;
font:bold 16px Arial, Helvetica, sans-serif !important;
}
.battle-report-body .battle-loss-total{
margin-top:6px !important;
text-align:center !important;
color:#fff !important;
font:bold 14px Arial, Helvetica, sans-serif !important;
}
.battle-report-body .battle-army-name{
margin-bottom:4px !important;
text-align:center !important;
color:#ffe7a3 !important;
font:bold 15px Arial, Helvetica, sans-serif !important;
}
.battle-report-body .battle-unit-losses{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
margin-top:8px !important;
}
.battle-report-body .battle-unit-loss-row{
display:grid !important;
grid-template-columns:26px 1fr auto !important;
align-items:center !important;
column-gap:6px !important;
min-height:26px !important;
color:#fff !important;
font:13px Arial, Helvetica, sans-serif !important;
line-height:1.2 !important;
}
.battle-report-body .battle-unit-icon{
width:24px !important;
height:24px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.battle-report-body .battle-unit-icon img{
width:auto !important;
height:auto !important;
max-width:24px !important;
max-height:24px !important;
object-fit:contain !important;
filter:drop-shadow(1px 1px 1px rgba(0,0,0,.65)) !important;
}
.battle-report-body .battle-unit-name{
min-width:0 !important;
overflow-wrap:anywhere !important;
}
.battle-report-body .battle-unit-count{
white-space:nowrap !important;
text-align:right !important;
font-weight:bold !important;
}
.battle-report-body .battle-empty{
margin:0 0 8px 0 !important;
padding:8px !important;
text-align:center !important;
color:#ffe7a3 !important;
font:13px Arial, Helvetica, sans-serif !important;
background:rgba(70,25,5,.25) !important;
border:1px solid rgba(176,86,24,.35) !important;
border-radius:8px !important;
}
.battle-report-body .battle-date-card{
text-align:center !important;
font:13px Arial, Helvetica, sans-serif !important;
}
.battle-report-body .battle-report-actions{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
padding:4px 0 2px 0 !important;
}
.battle-report-body .battle-report-actions .info-action-button{
min-width:120px !important;
height:28px !important;
text-decoration:none !important;
}
@media (max-width:720px){
.battle-report-modal{
width:calc(100vw - 12px) !important;
height:calc(100vh - 12px) !important;
}
}
/* ============================================================
AUTH UI
============================================================ */
.auth-page{
margin:0 !important;
padding:0 !important;
min-width:0 !important;
background:#071f06 !important;
color:#fff !important;
font-family:Arial, Helvetica, sans-serif !important;
}
.auth-modal{
width:430px !important;
height:470px !important;
min-height:0 !important;
padding:18px !important;
box-sizing:border-box !important;
}
.auth-modal-register{
height:560px !important;
}
.auth-modal .auth-header{
position:absolute !important;
left:18px !important;
right:18px !important;
top:18px !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 32px 8px 32px !important;
box-sizing:border-box !important;
border-bottom:2px solid rgba(80,35,10,.70) !important;
box-shadow:0 2px 0 rgba(255,220,130,.22) !important;
z-index:8125 !important;
}
.auth-modal .auth-header .ui-modal__title{
margin:0 !important;
color:#ffe7a3 !important;
font:bold 18px Arial, Helvetica, sans-serif !important;
text-shadow:1px 1px 0 #000,0 0 3px rgba(0,0,0,.85) !important;
}
.auth-modal .auth-body{
position:absolute !important;
left:18px !important;
right:18px !important;
top:66px !important;
bottom:18px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 12px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}
.auth-form{
display:flex !important;
flex-direction:column !important;
gap:9px !important;
color:#fff !important;
}
.auth-form label{
display:flex !important;
flex-direction:column !important;
gap:4px !important;
color:#fff !important;
font:bold 13px Arial, Helvetica, sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.auth-input{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
}
.auth-error,
.auth-success,
.auth-question{
margin:0 0 10px 0 !important;
padding:8px !important;
border-radius:7px !important;
font:bold 13px Arial, Helvetica, sans-serif !important;
}
.auth-error{background:rgba(120,20,10,.45) !important;color:#ffd7c8 !important;border:1px solid rgba(255,150,110,.35) !important;}
.auth-success{background:rgba(20,100,30,.45) !important;color:#d7ffd7 !important;border:1px solid rgba(120,255,140,.35) !important;}
.auth-question{background:rgba(70,25,5,.35) !important;color:#ffe7a3 !important;border:1px solid rgba(176,86,24,.55) !important;}
.auth-links{
display:flex !important;
justify-content:center !important;
flex-wrap:wrap !important;
gap:10px !important;
margin:12px 0 !important;
}
.auth-links a,
.top-user{
color:#ffe7a3 !important;
text-shadow:1px 1px 2px #000 !important;
}
/* Battle report read/unread markers */
.battle-report-list-card.is-unread{
border-color:#ffd76a !important;
box-shadow:0 0 10px rgba(255,215,106,.35) !important;
background:#2a1f12 !important;
}
.battle-report-list-card.is-read{
opacity:.78 !important;
}
.report-new-badge{
display:inline-block !important;
padding:2px 5px !important;
margin-right:5px !important;
color:#2b1200 !important;
background:#ffd76a !important;
border-radius:4px !important;
font:bold 11px Arial, Helvetica, sans-serif !important;
}
/* ============================================================
Account / player profile pages
============================================================ */
.top-user-link{color:#ffe7a3 !important;background:transparent !important;border:0 !important;padding:0 !important;text-decoration:underline !important;}
.account-page{max-width:1180px;margin:16px auto 40px auto;color:#f8ead0;}
.account-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:18px 20px;background:linear-gradient(180deg,rgba(91,38,11,.96),rgba(42,16,4,.96));border:1px solid #b98b49;box-shadow:0 4px 16px rgba(0,0,0,.45);}
.account-header h1{margin:2px 0 4px 0;color:#ffe7a3;text-shadow:1px 1px #000;font-size:28px;}
.account-kicker{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#d2b46c;font-weight:bold;}
.account-muted{color:#d8c3a1;font-size:13px;}
.account-race-badge{min-width:130px;text-align:center;padding:9px 14px;border:1px solid #d2b46c;border-radius:8px;background:linear-gradient(to bottom,#6a3b0a,#3a1d04);color:#fff;font:bold 16px Arial;text-shadow:1px 1px #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.45);}
.account-race-human{border-color:#d2b46c;}
.account-race-elf{border-color:#8bd26c;}
.account-race-dwarv{border-color:#c99555;}
.account-grid{display:grid;gap:14px;margin-bottom:14px;}
.account-grid-main{grid-template-columns:repeat(4,1fr);}
.account-grid-two{grid-template-columns:1fr 1fr;}
.account-card{background:rgba(38,26,18,.96);border:1px solid #6e4a24;box-shadow:0 3px 12px rgba(0,0,0,.35);padding:14px;}
.account-card h2{margin:0 0 10px 0;color:#ffe7a3;font-size:18px;text-shadow:1px 1px #000;border-bottom:1px solid rgba(210,180,108,.35);padding-bottom:7px;}
.account-row,.account-resource-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.account-row:last-child,.account-resource-line:last-child{border-bottom:0;}
.account-row span,.account-resource-line span{color:#d8c3a1;}
.account-row b,.account-resource-line b{color:#fff1c5;text-align:right;}
.account-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.account-stat-grid div{background:rgba(0,0,0,.22);border:1px solid rgba(210,180,108,.25);padding:8px;text-align:center;}
.account-stat-grid b{display:block;color:#ffe7a3;font-size:22px;line-height:1.1;}
.account-stat-grid span{display:block;color:#d8c3a1;font-size:12px;margin-top:3px;}
.account-list-item{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.account-list-item:last-child{border-bottom:0;}
.account-list-item b{display:block;color:#fff1c5;}
.account-list-item span{display:block;color:#d8c3a1;font-size:13px;margin-top:3px;}
.account-list-item-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.account-list-item-row b{display:inline-block;}
.account-list-item-row span{display:inline-block;margin-top:0;text-align:right;}
.account-list-item a{color:#ffe7a3;text-decoration:none;}
.account-list-item a:hover{text-decoration:underline;}
@media (max-width:1200px){.account-page{margin-left:12px;margin-right:12px}.account-grid-main{grid-template-columns:repeat(2,1fr)}.account-grid-two{grid-template-columns:1fr}}
/* ============================================================
Player messages MVP
============================================================ */
.messages-page .account-header{align-items:center;gap:14px;}
.message-tabs{display:flex;gap:10px;align-items:center;}
.message-tab{display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:8px 12px;border:1px solid rgba(210,180,108,.55);border-radius:8px;background:rgba(35,18,5,.45);color:#ffe7b0;text-decoration:none;font-weight:bold;}
.message-tab.active,.message-tab:hover{background:rgba(106,59,10,.75);color:#fff;}
.message-list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;margin:0 0 8px 0;border:1px solid rgba(210,180,108,.28);border-radius:8px;background:rgba(0,0,0,.18);}
.message-list-item.message-unread{border-color:rgba(255,220,120,.78);background:rgba(90,55,10,.32);}
.message-list-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.message-list-main a{color:#ffe7b0;text-decoration:none;}
.message-list-main a:hover{text-decoration:underline;}
.message-list-date{white-space:nowrap;color:#d7bf8b;font-size:13px;}
.message-form{display:flex;flex-direction:column;gap:10px;}
.message-form label{font-weight:bold;color:#ffe7b0;}
.message-form input,.message-form select,.message-form textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #6b4f1d;border-radius:6px;background:#1b1006;color:#fff;font:14px Arial;}
.message-form textarea{resize:vertical;line-height:1.4;}
.message-form button{align-self:center;margin-top:6px;}
.message-body{white-space:normal;line-height:1.45;color:#fff4d0;}
.message-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.message-notice{border-color:rgba(120,220,120,.5);color:#dfffdc;}
.message-error{border-color:rgba(255,120,90,.65);color:#ffd5c8;}
.account-profile-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
/* ============================================================
Battle reports / army movements page refresh
============================================================ */
.battle-reports-page .message-list-date a,
.army-movements-page .message-list-date a{
color:#ffe7b0;
text-decoration:none;
}
.battle-reports-page .message-list-date a:hover,
.army-movements-page .message-list-date a:hover{
text-decoration:underline;
}
.battle-reports-page .battle-report-list-card,
.army-movements-page .movement-list-item{
border-radius:8px !important;
}
.battle-reports-page .battle-report-list-card.is-read{
opacity:.86 !important;
}
.movement-pill{
display:inline-block;
margin-left:7px;
padding:2px 7px;
border:1px solid rgba(210,180,108,.45);
border-radius:999px;
background:rgba(106,59,10,.45);
color:#ffe7b0;
font:bold 12px Arial, Helvetica, sans-serif;
vertical-align:middle;
}
.army-movements-page .message-list-date b{
color:#ffe7a3;
}
@media (max-width:720px){
.battle-reports-page .message-list-item,
.army-movements-page .message-list-item{
align-items:flex-start;
flex-direction:column;
}
.battle-reports-page .message-list-date,
.army-movements-page .message-list-date{
white-space:normal;
text-align:left;
}
}
/* ============================================================
Attack / scout page refresh
============================================================ */
.attack-page .account-card.message-error{
background:rgba(70,22,12,.96);
}
.attack-form{
max-width:560px;
margin:0 auto;
}
.attack-form select{
margin-top:6px;
}
.attack-mission-choice{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
justify-content:center;
margin:2px 0 4px 0;
}
.attack-mission-choice label{
display:inline-flex;
align-items:center;
gap:7px;
min-width:128px;
justify-content:center;
padding:8px 12px;
border:1px solid rgba(210,180,108,.55);
border-radius:8px;
background:rgba(35,18,5,.45);
color:#ffe7b0;
cursor:pointer;
}
.attack-mission-choice input{
width:auto !important;
margin:0;
}
.attack-result-text{
color:#fff4d0;
line-height:1.45;
margin-top:0;
}
.attack-page .message-actions{
justify-content:center;
}
@media (max-width:720px){
.attack-form{
max-width:none;
}
.attack-mission-choice{
align-items:stretch;
flex-direction:column;
}
}
/* ============================================================
MAIN PAGE / TOP BAR UI REFRESH
============================================================ */
.main-game-body{
background:
radial-gradient(circle at 50% 0%, rgba(133,64,18,.35), transparent 420px),
#090604 !important;
color:#fff !important;
}
.game-topbar{
position:relative;
min-height:112px;
margin:0 auto 10px auto;
padding:10px 18px;
background:linear-gradient(to bottom,#4e1f08,#1c0802);
border-bottom:2px solid rgba(255,220,130,.45);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(0,0,0,.65);
display:flex;
justify-content:center;
align-items:flex-start;
z-index:9000;
}
.game-topbar-center{
position:absolute;
left:50%;
top:8px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
min-width:720px;
pointer-events:auto;
}
.game-topbar-icons{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
}
.game-notify-icon{
position:relative;
width:auto;
height:auto;
min-width:0;
min-height:0;
display:inline-flex;
align-items:center;
justify-content:center;
padding:4px;
border-radius:12px;
text-decoration:none;
background:rgba(0,0,0,.22);
border:1px solid rgba(255,220,130,.38);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.55);
box-sizing:border-box;
}
.game-notify-icon:hover{
filter:brightness(1.12);
transform:translateY(-1px);
}
.game-notify-icon img{
display:block;
width:auto;
height:auto;
max-width:none;
max-height:none;
object-fit:contain;
image-rendering:auto;
filter:drop-shadow(1px 2px 2px rgba(0,0,0,.65));
}
.game-notify-badge{
position:absolute;
right:-7px;
top:-6px;
min-width:19px;
height:19px;
padding:0 5px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:linear-gradient(to bottom,#e12b22,#7a0808);
border:1px solid #ffd58a;
border-radius:10px;
font:bold 11px Arial, Helvetica, sans-serif;
text-shadow:1px 1px #000;
box-shadow:0 2px 4px rgba(0,0,0,.65);
}
.game-topbar-resources{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
padding:5px 14px;
border-radius:14px;
background:rgba(0,0,0,.24);
border:1px solid rgba(255,220,130,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.game-topbar-resources .top-resource-item{
min-width:auto;
display:inline-flex;
align-items:center;
gap:4px;
color:#ffe8a6;
font:bold 13px Arial, Helvetica, sans-serif;
text-shadow:1px 1px 2px #000;
white-space:nowrap;
}
.game-topbar-resources .top-resource-item img{
max-width:18px;
max-height:18px;
object-fit:contain;
}
.game-topbar-right{
margin-left:auto;
min-width:560px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:7px;
}
.game-topbar-nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:7px;
flex-wrap:wrap;
}
.game-topbar-nav a,
.game-topbar-user a{
color:#fff;
text-decoration:none;
text-shadow:1px 1px 2px #000;
}
.game-topbar-nav a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:74px;
height:29px;
padding:0 10px;
background:linear-gradient(to bottom,#6a3b0a,#3a1d04);
border:1px solid #d2b46c;
outline:1px solid #2a1403;
border-radius:7px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.55);
font:bold 13px Arial, Helvetica, sans-serif;
}
.game-topbar-nav a:hover,
.game-topbar-user a:hover{
filter:brightness(1.15);
}
.game-topbar-user{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
color:#ffe8a6;
font:bold 13px Arial, Helvetica, sans-serif;
text-shadow:1px 1px 2px #000;
}
.game-topbar-user-link{
color:#fff3c4 !important;
border-bottom:1px solid rgba(255,220,130,.55);
}
.game-topbar-logout{
display:inline-flex;
align-items:center;
justify-content:center;
height:24px;
padding:0 10px;
border-radius:6px;
background:linear-gradient(to bottom,#7a1e1e,#3a0d0d);
border:1px solid #d28a6c;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.5);
}
.main-game-body .game{
margin-top:14px;
border:2px solid rgba(255,220,130,.38);
box-shadow:0 0 18px rgba(0,0,0,.75);
}
.main-game-body .msg{
max-width:900px;
margin:12px auto 18px auto;
padding:10px 14px;
text-align:center;
color:#ffe8a6;
background:url('assets/menu/background.png') repeat;
border:1px solid rgba(255,220,130,.35);
border-radius:12px;
box-shadow:0 3px 8px rgba(0,0,0,.45);
}
/* ============================================================
FUTURE TOPBAR ICONS
Дополнительные иконки верхнего меню управляются из:
config/topbar_icons_config.php
============================================================ */
.game-topbar-icons{
width:auto !important;
max-width:760px;
margin:0 auto;
flex-wrap:wrap;
row-gap:6px;
}
.game-notify-icon--future{
padding:5px !important;
}
.game-notify-icon--future img{
width:auto !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
}
/* ============================================================
Incoming/outgoing attack indicators
============================================================ */
.movement-pill-danger{
border-color:rgba(220,90,70,.75) !important;
background:rgba(105,20,12,.70) !important;
color:#ffd6c9 !important;
}
.army-movements-page .incoming-attack-item{
border-color:rgba(220,90,70,.42) !important;
box-shadow:0 0 0 1px rgba(220,90,70,.14), 0 4px 12px rgba(0,0,0,.22) !important;
}
/* ============================================================
Admin test tools
============================================================ */
.admin-tools-form{
display:flex;
flex-direction:column;
gap:8px;
margin-top:12px;
}
.admin-tools-form label{
color:#f1d9a0;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}
.admin-tools-input{
width:100%;
box-sizing:border-box;
padding:8px 10px;
border-radius:8px;
border:1px solid rgba(210,180,108,.75);
background:rgba(31,17,7,.85);
color:#fff3d0;
outline:none;
}
.admin-tools-checkbox{
display:flex;
align-items:center;
gap:8px;
font-weight:normal !important;
}
.admin-tools-inline-form{
margin-bottom:14px;
}
.admin-tools-notice{
margin-bottom:12px;
padding:12px 14px !important;
}
.admin-tools-ok{
border-color:rgba(116,190,92,.75) !important;
color:#dfffce;
}
.admin-tools-error{
border-color:rgba(210,90,70,.85) !important;
color:#ffd2c7;
}
.admin-tools-table-wrap{
overflow-x:auto;
}
.admin-tools-table{
width:100%;
border-collapse:collapse;
color:#f7e5b8;
}
.admin-tools-table th,
.admin-tools-table td{
padding:8px 10px;
border-bottom:1px solid rgba(210,180,108,.25);
text-align:left;
}
.admin-tools-table th{
color:#ffd98a;
font-size:13px;
text-transform:uppercase;
}
/* ============================================================
Army movements clickable route links
============================================================ */
.army-movements-page .movement-link{
color:#ffe7b0;
text-decoration:none;
border-bottom:1px dotted rgba(255,231,176,.55);
}
.army-movements-page .movement-link:hover{
color:#fff3cf;
border-bottom-color:rgba(255,243,207,.95);
}
/* ===== Trade / market modal MVP ===== */
#buildingInfoModal.ui-actions-count-5 .info-scroll{ bottom:202px !important; }
.trade-modal{
width:560px !important;
min-height:520px !important;
padding-bottom:18px !important;
}
.trade-scroll{
position:absolute !important;
left:18px !important;
right:18px !important;
top:58px !important;
bottom:18px !important;
height:auto !important;
max-height:none !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
.trade-send-form{
display:flex;
flex-direction:column;
gap:10px;
margin:10px 0 12px 0;
}
.trade-send-form label{
color:#f5e6c8;
font:bold 13px Arial;
}
.trade-send-form select,
.trade-send-form input{
background:#1f1207;
color:#fff4d0;
border:1px solid #9a7434;
border-radius:5px;
padding:5px 7px;
box-sizing:border-box;
}
.trade-resource-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 10px;
}
.trade-resource-grid label{
display:flex;
align-items:center;
gap:6px;
justify-content:space-between;
}
.trade-resource-grid img{
width:18px;
height:18px;
}
.trade-resource-grid input{
width:95px;
}
.trade-send-button{
align-self:center;
min-width:153px !important;
}
.trade-movement-row{
align-items:flex-start;
}
.trade-queue-box{
margin-top:8px;
}
.trade-resource-item{
display:inline-flex;
align-items:center;
gap:3px;
margin-right:6px;
white-space:nowrap;
color:#fff4d0;
}
.trade-resource-item img{
width:18px;
height:18px;
vertical-align:middle;
}
/* ============================================================
Trade modal: stable resource icons + coordinate target inputs
============================================================ */
.trade-resource-grid img,
.trade-resource-item img{
display:inline-block !important;
flex:0 0 auto !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
max-width:18px !important;
max-height:18px !important;
object-fit:contain !important;
vertical-align:middle !important;
image-rendering:auto !important;
}
.trade-resource-item{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
line-height:18px !important;
}
.trade-coords-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 10px;
color:#f5e6c8;
font:bold 13px Arial;
}
.trade-coords-row span{
flex:1 1 100%;
color:#ffd98a;
}
.trade-coords-row label{
display:inline-flex;
align-items:center;
gap:5px;
margin:0;
}
.trade-coords-row input{
width:82px;
}
.trade-coords-note{
margin-top:-4px;
font-size:12px;
opacity:.9;
}
/* ============================================================
FIX v2: trade modal target chooser centered + resource icons
============================================================ */
#tradeModal .trade-send-form{
align-items:center !important;
text-align:center !important;
}
#tradeModal .trade-target-choice,
#tradeModal .trade-send-form > label:first-child{
width:100% !important;
max-width:420px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
margin:0 auto !important;
}
#tradeModal #tradeTargetSelect{
width:100% !important;
max-width:420px !important;
text-align:center !important;
}
#tradeModal .trade-coords-row{
width:100% !important;
max-width:420px !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:8px 10px !important;
margin:0 auto !important;
text-align:center !important;
}
#tradeModal .trade-coords-row span{
flex:1 1 100% !important;
text-align:center !important;
}
#tradeModal .trade-coords-row label{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
#tradeModal .trade-coords-note{
max-width:420px !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
#tradeModal .trade-resource-grid{
width:100% !important;
max-width:420px !important;
margin:0 auto !important;
}
#tradeModal .trade-resource-grid label{
justify-content:center !important;
}
#tradeModal .trade-resource-grid img,
#tradeModal .trade-resource-item img,
#tradeModal img.trade-resource-icon{
display:inline-block !important;
flex:0 0 18px !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
min-height:18px !important;
max-width:18px !important;
max-height:18px !important;
object-fit:contain !important;
vertical-align:middle !important;
image-rendering:auto !important;
margin:0 3px 0 0 !important;
padding:0 !important;
}
#tradeModal .trade-resource-item{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:3px !important;
min-width:auto !important;
width:auto !important;
height:auto !important;
line-height:18px !important;
white-space:nowrap !important;
}
/* ============================================================
FIX v3: trade modal resource icons use original small asset size
============================================================
Resource icons in assets/res are small pixel icons (wood/stone/iron/food = 13x8).
Do not force them into 18x18, otherwise they look enlarged and stretched.
*/
#tradeModal .trade-resource-grid img,
#tradeModal .trade-resource-item img,
#tradeModal img.trade-resource-icon,
.trade-modal .trade-resource-grid img,
.trade-modal .trade-resource-item img,
.trade-modal img.trade-resource-icon{
display:inline-block !important;
flex:0 0 auto !important;
width:auto !important;
height:auto !important;
min-width:0 !important;
min-height:0 !important;
max-width:13px !important;
max-height:12px !important;
object-fit:contain !important;
vertical-align:middle !important;
image-rendering:auto !important;
margin:0 3px 0 0 !important;
padding:0 !important;
}
#tradeModal .trade-resource-item,
.trade-modal .trade-resource-item{
display:inline-flex !important;
align-items:center !important;
gap:3px !important;
line-height:14px !important;
}
/* ============================================================
FIX: trade modal links and 1-minute cancel button
============================================================ */
#tradeModal a.trade-link,
.trade-modal a.trade-link{
color:#ffd98a !important;
text-decoration:none !important;
border-bottom:1px dotted rgba(255,217,138,.55) !important;
text-shadow:1px 1px 1px rgba(0,0,0,.85) !important;
}
#tradeModal a.trade-link:hover,
.trade-modal a.trade-link:hover{
color:#fff1bd !important;
border-bottom-color:rgba(255,241,189,.95) !important;
}
.trade-cancel-form{
display:block !important;
margin:8px auto 0 auto !important;
text-align:center !important;
}
.trade-cancel-button{
min-width:145px !important;
height:26px !important;
font-size:12px !important;
padding:0 12px !important;
color:#ffe0d0 !important;
}
/* ============================================================
FIX: trade auto merchants, centered cancel button and estimate
============================================================ */
#tradeModal .trade-estimate-box,
.trade-modal .trade-estimate-box{
text-align:center !important;
margin:8px auto 10px auto !important;
padding:7px 10px !important;
max-width:360px !important;
border:1px solid rgba(210,180,108,.35) !important;
border-radius:6px !important;
background:rgba(35,15,5,.35) !important;
color:#f7e7c4 !important;
}
#tradeModal .trade-estimate-warning,
.trade-modal .trade-estimate-warning{
color:#ffb090 !important;
font-weight:bold !important;
}
#tradeModal .trade-movement-row .training-queue-text,
.trade-modal .trade-movement-row .training-queue-text{
width:100% !important;
}
#tradeModal .trade-cancel-form,
.trade-modal .trade-cancel-form{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
margin:9px auto 0 auto !important;
padding:0 !important;
text-align:center !important;
}
#tradeModal .trade-cancel-button,
.trade-modal .trade-cancel-button{
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
width:auto !important;
min-width:145px !important;
margin:0 auto !important;
}
/* ============================================================
FIX: exact center for cancel trade button inside movement card
============================================================ */
#tradeModal .trade-cancel-wrap,
.trade-modal .trade-cancel-wrap{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
margin:10px 0 0 0 !important;
padding:0 !important;
text-align:center !important;
}
#tradeModal .trade-cancel-wrap .trade-cancel-form,
.trade-modal .trade-cancel-wrap .trade-cancel-form{
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
width:auto !important;
max-width:none !important;
margin:0 auto !important;
padding:0 !important;
text-align:center !important;
}
#tradeModal .trade-cancel-wrap .trade-cancel-button,
.trade-modal .trade-cancel-wrap .trade-cancel-button{
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
width:auto !important;
min-width:145px !important;
margin:0 auto !important;
}
/* ============================================================
Market lots MVP inside trade modal
============================================================ */
#tradeModal .trade-market-tabs,
.trade-modal .trade-market-tabs{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
margin:10px auto 12px auto !important;
text-align:center !important;
}
#tradeModal .trade-tab-button,
.trade-modal .trade-tab-button{
min-width:105px !important;
height:28px !important;
font-size:13px !important;
padding:0 12px !important;
}
#tradeModal .trade-tab-button.is-active,
.trade-modal .trade-tab-button.is-active{
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.38),
inset 0 -2px 0 rgba(0,0,0,0.6),
0 0 8px rgba(255,217,138,0.35) !important;
color:#fff6cc !important;
}
#tradeModal .trade-tab-panel,
.trade-modal .trade-tab-panel{
margin:8px auto 12px auto !important;
padding:8px 10px !important;
max-width:470px !important;
border:1px solid rgba(210,180,108,.28) !important;
background:rgba(35,15,5,.22) !important;
box-sizing:border-box !important;
}
#tradeModal .trade-lot-form,
.trade-modal .trade-lot-form{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:9px !important;
margin:8px auto 0 auto !important;
text-align:center !important;
}
#tradeModal .trade-lot-row,
.trade-modal .trade-lot-row{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:10px !important;
flex-wrap:wrap !important;
width:100% !important;
}
#tradeModal .trade-lot-row label,
.trade-modal .trade-lot-row label{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:4px !important;
color:#f5e6c8 !important;
font:bold 13px Arial !important;
}
#tradeModal .trade-lot-row input,
#tradeModal .trade-lot-row select,
.trade-modal .trade-lot-row input,
.trade-modal .trade-lot-row select{
background:#1f1207 !important;
color:#fff4d0 !important;
border:1px solid #9a7434 !important;
border-radius:5px !important;
padding:5px 7px !important;
min-width:120px !important;
box-sizing:border-box !important;
}
#tradeModal .trade-lot-card,
.trade-modal .trade-lot-card{
margin:7px 0 !important;
}
#tradeModal .trade-buy-form,
.trade-modal .trade-buy-form{
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin:8px auto 0 auto !important;
text-align:center !important;
}
#tradeModal .trade-buy-button,
.trade-modal .trade-buy-button{
min-width:110px !important;
height:26px !important;
font-size:12px !important;
}
#tradeModal .trade-buy-button:disabled,
.trade-modal .trade-buy-button:disabled{
opacity:.55 !important;
cursor:not-allowed !important;
filter:grayscale(0.35) !important;
}
#tradeModal .trade-ok,
.trade-modal .trade-ok{
color:#caff9a !important;
font-weight:bold !important;
}
#tradeModal .trade-direct-title,
.trade-modal .trade-direct-title{
margin-top:12px !important;
}
/* ============================================================
Market UI refactor: buttons in main market window + separate lot modals
============================================================ */
#marketMainActions.market-main-actions{
display:grid;
grid-template-columns:repeat(2, minmax(120px, 153px));
justify-content:center;
align-items:center;
gap:8px 10px;
margin:12px auto 4px auto;
padding:10px;
max-width:340px;
border:1px solid rgba(210,180,108,.28);
background:rgba(35,15,5,.16);
box-sizing:border-box;
}
#marketMainActions.market-main-actions .game-button{
width:153px !important;
min-width:153px !important;
height:28px !important;
font-size:13px !important;
}
.market-lots-modal .market-filter-row{
display:flex;
justify-content:center;
align-items:center;
margin:6px auto 10px auto;
text-align:center;
}
.market-lots-modal .market-filter-row label{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
color:#3f1b08;
font-weight:bold;
}
.market-lots-modal .market-filter-row select,
.market-lots-modal .trade-lot-row select,
.market-lots-modal .trade-lot-row input{
background:#f3dfaa;
border:1px solid #7a4a18;
color:#2b1204;
border-radius:4px;
padding:3px 5px;
box-sizing:border-box;
}
.market-lots-modal .trade-buy-form,
.market-lots-modal .trade-lot-form{
text-align:center;
}
.market-lots-modal .trade-lot-card .game-button{
margin:8px auto 0 auto !important;
}
/* ============================================================
Market lot modal polish: separate framed cards and centered buttons
============================================================ */
.market-lots-modal .trade-scroll{
padding:12px 14px !important;
box-sizing:border-box !important;
}
.market-lots-modal #marketLotsList,
.market-lots-modal #myMarketLotsList{
width:100% !important;
max-width:640px !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
.market-lots-modal .trade-lot-card,
.market-lots-modal .trade-lot-form{
display:block !important;
width:100% !important;
max-width:610px !important;
margin:10px auto 12px auto !important;
padding:12px 14px !important;
box-sizing:border-box !important;
background:rgba(58, 31, 13, 0.46) !important;
border:1px solid rgba(255, 220, 130, 0.38) !important;
border-radius:8px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.24),
0 2px 5px rgba(0,0,0,0.25) !important;
color:#f7e7c4 !important;
text-shadow:1px 1px 1px rgba(0,0,0,0.65) !important;
}
.market-lots-modal .trade-lot-card .training-queue-text{
display:block !important;
width:100% !important;
font-size:14px !important;
line-height:1.45 !important;
color:#f7e7c4 !important;
box-sizing:border-box !important;
}
.market-lots-modal .trade-lot-card b,
.market-lots-modal .trade-lot-form b{
color:#ffe7a3 !important;
}
.market-lots-modal .trade-lot-card a.trade-link,
.market-lots-modal a.trade-link{
color:#ffd98a !important;
text-decoration:none !important;
border-bottom:1px dotted rgba(255,217,138,.55) !important;
}
.market-lots-modal .trade-lot-card a.trade-link:hover,
.market-lots-modal a.trade-link:hover{
color:#fff1bd !important;
border-bottom-color:rgba(255,241,189,.95) !important;
}
.market-lots-modal .trade-buy-form{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
margin:10px auto 0 auto !important;
padding:0 !important;
text-align:center !important;
}
.market-lots-modal .trade-buy-form .game-button,
.market-lots-modal .trade-lot-form .game-button,
.market-lots-modal .trade-cancel-button,
.market-lots-modal .trade-buy-button,
.market-lots-modal .trade-send-button{
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
width:auto !important;
min-width:153px !important;
margin:0 auto !important;
}
.market-lots-modal .trade-lot-form{
text-align:center !important;
}
.market-lots-modal .trade-lot-form .trade-lot-row{
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
margin:6px auto !important;
width:100% !important;
}
.market-lots-modal .trade-lot-form .trade-coords-note{
max-width:430px !important;
margin:10px auto !important;
color:#f7e7c4 !important;
}
.market-lots-modal .trade-ok{
color:#caff9a !important;
font-weight:bold !important;
}
.market-lots-modal .trade-estimate-warning{
color:#ffb090 !important;
font-weight:bold !important;
}
/* ============================================================
UI REFACTOR PHASE 1 — responsive common modal/framework layer
2026-05-14
Purpose: one shared style for future windows, messages, market,
alliances and mobile full-screen modal mode.
============================================================ */
:root{
--game-link:#ffe7a3;
--game-link-hover:#fff4c7;
--game-panel-bg:rgba(86,49,24,.58);
--game-panel-border:rgba(233,194,112,.36);
--game-input-bg:#211004;
--game-input-border:#8d642b;
--game-input-text:#fff2c8;
--resource-icon-w:13px;
--resource-icon-h:8px;
}
/* One visual language for links in pages and modals */
a.game-link,
a.trade-link,
.account-page a,
.messages-page a,
.report-page a,
.movements-page a,
.market-lots-modal a,
.trade-modal a{
color:var(--game-link) !important;
text-decoration:none !important;
font-weight:bold;
text-shadow:1px 1px 0 #000,0 0 3px rgba(0,0,0,.75);
}
a.game-link:hover,
a.trade-link:hover,
.account-page a:hover,
.messages-page a:hover,
.report-page a:hover,
.movements-page a:hover,
.market-lots-modal a:hover,
.trade-modal a:hover{
color:var(--game-link-hover) !important;
text-decoration:underline !important;
}
/* Unified resource icon system. Use these classes for all new UI. */
.resource-icon,
.resource-icon--small,
.resource-line img,
.trade-resource-icon,
.trade-cargo-icon,
.top-resource-item img{
display:inline-block !important;
width:auto !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
min-width:0 !important;
min-height:0 !important;
object-fit:contain !important;
vertical-align:middle !important;
image-rendering:auto;
}
.resource-icon--small,
.trade-resource-icon,
.trade-cargo-icon{width:var(--resource-icon-w) !important;height:var(--resource-icon-h) !important;}
.resource-icon--medium{width:18px !important;height:auto !important;}
.resource-icon--large{width:24px !important;height:auto !important;}
/* Unified form controls for future windows */
.game-input,
.game-select,
.game-textarea,
.ui-modal input[type="text"],
.ui-modal input[type="number"],
.ui-modal select,
.ui-modal textarea,
.account-page input,
.account-page select,
.account-page textarea,
.messages-page input,
.messages-page select,
.messages-page textarea{
background:var(--game-input-bg) !important;
border:1px solid var(--game-input-border) !important;
color:var(--game-input-text) !important;
border-radius:6px !important;
box-shadow:inset 0 1px 4px rgba(0,0,0,.65),0 1px 0 rgba(255,220,130,.12) !important;
box-sizing:border-box !important;
outline:none !important;
}
.game-input:focus,
.game-select:focus,
.game-textarea:focus,
.ui-modal input[type="text"]:focus,
.ui-modal input[type="number"]:focus,
.ui-modal select:focus,
.ui-modal textarea:focus{
border-color:#e2bf72 !important;
box-shadow:inset 0 1px 4px rgba(0,0,0,.65),0 0 0 2px rgba(226,191,114,.24) !important;
}
.game-form-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0;}
.game-form-stack{display:flex;flex-direction:column;align-items:center;gap:10px;}
/* Unified cards/panels for future pages and modal content */
.ui-card,
.game-card,
.trade-lot-card,
.trade-queue-box,
.training-queue-box{
background:var(--game-panel-bg) !important;
border:1px solid var(--game-panel-border) !important;
box-shadow:inset 0 1px 0 rgba(255,230,150,.12),0 2px 8px rgba(0,0,0,.25) !important;
border-radius:7px !important;
box-sizing:border-box !important;
}
.ui-card{padding:12px;margin:10px 0;}
.ui-card__actions,.game-card-actions{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
/* Shared modal/backdrop behavior for old and new modal markup */
.ui-modal-backdrop,
.modal-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.35);
z-index:8000;
}
body.has-open-modal{overflow:hidden;}
.ui-modal,.build-modal{max-width:calc(100vw - 24px);}
.ui-modal__body,.modal-scroll{-webkit-overflow-scrolling:touch;}
/* Larger close target, but still keeps the old visual style */
.ui-modal__close,
.modal-close{
min-width:26px !important;
min-height:26px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
border-radius:2px !important;
}
/* Mobile full-screen modal mode. Desktop stays centered. */
@media (max-width: 760px), (max-height: 620px){
html,body{max-width:100%;overflow-x:hidden;}
.ui-modal,
.build-modal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:100dvh !important;
min-height:0 !important;
max-height:100dvh !important;
padding:12px !important;
border:0 !important;
border-radius:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.modal-corner{display:none !important;}
.ui-modal .ui-modal__header,
#buildingInfoModal .ui-modal__header,
#unitTrainingModal .ui-modal__header,
#buildModal .ui-modal__header{
position:absolute !important;
left:12px !important;
right:48px !important;
top:12px !important;
height:42px !important;
padding:0 8px 8px 8px !important;
}
.ui-modal__close,
.modal-close{
right:12px !important;
top:12px !important;
width:34px !important;
height:34px !important;
font-size:22px !important;
z-index:9000 !important;
}
.ui-modal__body,
.modal-scroll,
#unitTrainingModal .modal-scroll.unit-training-scroll,
#buildModal .modal-scroll.build-selection-scroll,
#marketBuyModal .modal-scroll,
#marketSellModal .modal-scroll,
#marketMyLotsModal .modal-scroll,
#tradeModal .modal-scroll{
position:absolute !important;
left:12px !important;
right:12px !important;
top:64px !important;
bottom:12px !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}
/* Building info has bottom action buttons, so keep body above footer. */
#buildingInfoModal .info-scroll,
#buildingInfoModal .ui-modal__body{
bottom:178px !important;
}
#buildingInfoModal .info-actions{
left:12px !important;
right:12px !important;
bottom:12px !important;
height:154px !important;
gap:7px !important;
}
.game-button,
.image-build-button,
.info-action-button,
.unit-train-button,
.army-manage-button{
min-width:142px !important;
max-width:calc(100vw - 42px) !important;
white-space:normal !important;
}
.game-form-row,
.ui-actions{gap:8px;}
.ui-actions:not(.ui-actions--stack){flex-wrap:wrap;}
.trade-resource-grid,
.market-resource-grid{
grid-template-columns:1fr !important;
max-width:360px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.unit-train-row,
.army-reform-row,
.ui-grid--two,
.ui-grid--three{
grid-template-columns:1fr !important;
}
.game-topbar{
position:relative !important;
min-height:0 !important;
padding:8px !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}
.game-topbar-center{order:1;width:100%;}
.game-topbar-right{order:2;width:100%;align-items:center !important;text-align:center !important;}
.game-topbar-nav{justify-content:center !important;flex-wrap:wrap !important;}
.game-topbar-icons{justify-content:center !important;flex-wrap:wrap !important;}
.game-topbar-resources{justify-content:center !important;flex-wrap:wrap !important;}
}
/* ============================================================
MOBILE UX PHASE 2: fullscreen windows + bottom navigation bar
============================================================ */
:root{
--mobile-bottom-bar-h:58px;
--mobile-safe-bottom:env(safe-area-inset-bottom, 0px);
}
.mobile-action-bar{display:none;}
@media (max-width:760px){
html,body{
width:100%;
max-width:100%;
min-height:100%;
overflow-x:hidden !important;
touch-action:manipulation;
-webkit-text-size-adjust:100%;
}
body.main-game-body,
body{
padding-bottom:calc(var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
/* iOS/Android browsers zoom inputs below 16px; keep forms readable. */
input,select,textarea,button{
font-size:16px !important;
}
/* On phones the topbar keeps only indicators/resources visible by default.
Text navigation opens from the bottom Menu button. */
.game-topbar{
position:sticky !important;
top:0 !important;
z-index:7400 !important;
}
.game-topbar-center{
width:100% !important;
}
.game-topbar-right{
display:none !important;
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:calc(var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom) + 10px) !important;
width:auto !important;
max-height:55vh !important;
overflow-y:auto !important;
padding:12px !important;
border:1px solid #b98a43 !important;
border-radius:10px !important;
background:rgba(42,22,8,.96) !important;
box-shadow:0 4px 18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,230,150,.12) !important;
z-index:9600 !important;
}
body.mobile-menu-open .game-topbar-right{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:10px !important;
}
.game-topbar-nav{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
width:100% !important;
}
.game-topbar-nav a,
.game-topbar-user a,
.game-topbar-user span{
text-align:center !important;
}
/* The bottom bar is prepared for future icons. For now text labels are used. */
.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) + var(--mobile-safe-bottom)) !important;
padding:7px 12px calc(7px + var(--mobile-safe-bottom)) 12px !important;
box-sizing:border-box !important;
align-items:center !important;
justify-content:space-between !important;
pointer-events:none !important;
z-index:9700 !important;
background:linear-gradient(to top, rgba(20,10,3,.95), rgba(20,10,3,.72), rgba(20,10,3,0)) !important;
}
.mobile-action-button{
pointer-events:auto !important;
min-width:86px !important;
height:42px !important;
padding:0 14px !important;
border:2px solid #d2b46c !important;
outline:1px solid #2a1403 !important;
border-radius:9px !important;
background:linear-gradient(to bottom,#6a3b0a 0%,#4a2606 50%,#3a1d04 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.65) !important;
color:#fff6d0 !important;
text-shadow:1px 1px 2px #000 !important;
font:bold 16px Arial, sans-serif !important;
letter-spacing:.3px !important;
cursor:pointer !important;
}
.mobile-action-button:active{
transform:translateY(2px) !important;
box-shadow:inset 0 3px 6px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.65) !important;
}
/* Fullscreen modals reserve space for the bottom controls. */
.ui-modal,
.build-modal{
height:100vh !important;
height:100dvh !important;
max-height:100dvh !important;
padding-bottom:calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
.ui-modal__body,
.modal-scroll,
#unitTrainingModal .modal-scroll.unit-training-scroll,
#buildModal .modal-scroll.build-selection-scroll,
#marketBuyModal .modal-scroll,
#marketSellModal .modal-scroll,
#marketMyLotsModal .modal-scroll,
#tradeModal .modal-scroll{
bottom:calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
#buildingInfoModal .info-scroll,
#buildingInfoModal .ui-modal__body{
bottom:calc(178px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
#buildingInfoModal .info-actions{
bottom:calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
/* Game area: avoid forcing manual zoom where possible. */
.game,
.world-screen,
.castle-screen,
.land-screen{
max-width:100vw !important;
overflow:auto !important;
-webkit-overflow-scrolling:touch !important;
box-sizing:border-box !important;
}
.msg{
margin-bottom:calc(var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom) + 12px) !important;
}
}
/* ============================================================
MOBILE UX PHASE 3: real phone layout fixes
Fixes phones that keep a wide desktop layout viewport and makes
modals fullscreen through runtime body classes as well as media.
============================================================ */
@media (max-width:980px), (pointer:coarse){
html,
body{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow-x:hidden !important;
}
body.main-game-body{
min-width:0 !important;
margin:0 !important;
}
.game-topbar{
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
margin:0 !important;
padding:6px 6px 7px 6px !important;
box-sizing:border-box !important;
border-left:0 !important;
border-right:0 !important;
}
.game-topbar-center{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
min-width:0 !important;
width:100% !important;
max-width:100% !important;
gap:3px !important;
}
.game-topbar-icons{
gap:6px !important;
flex-wrap:nowrap !important;
max-width:100% !important;
overflow:hidden !important;
}
.game-notify-icon{
padding:2px !important;
border-radius:8px !important;
flex:0 0 auto !important;
}
.game-notify-icon img{
max-width:30px !important;
max-height:30px !important;
width:auto !important;
height:auto !important;
}
.game-notify-badge{
right:-4px !important;
top:-5px !important;
min-width:15px !important;
height:15px !important;
padding:0 3px !important;
font-size:9px !important;
}
.game-topbar-resources{
width:auto !important;
max-width:calc(100vw - 16px) !important;
gap:5px !important;
padding:3px 7px !important;
overflow:hidden !important;
flex-wrap:nowrap !important;
box-sizing:border-box !important;
}
.game-topbar-resources .top-resource-item{
gap:2px !important;
font-size:10px !important;
line-height:1 !important;
}
.game-topbar-resources .top-resource-item img{
max-width:13px !important;
max-height:13px !important;
}
.game-topbar-right{
min-width:0 !important;
}
.game,
.world-screen,
.castle-screen,
.land-screen{
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:calc(100dvh - 86px - var(--mobile-bottom-bar-h) - var(--mobile-safe-bottom)) !important;
min-height:360px !important;
margin:0 auto !important;
border-left:0 !important;
border-right:0 !important;
overflow:auto !important;
box-sizing:border-box !important;
-webkit-overflow-scrolling:touch !important;
}
/* On the castle screen the old 1900px scene is too wide for phones.
Keep the clickable map usable by scaling the inner castle layer. */
.castle-screen .castle-field{
left:50% !important;
top:34px !important;
width:1000px !important;
height:700px !important;
transform:translateX(-50%) scale(.48) !important;
transform-origin:top center !important;
}
.world-screen{
height:calc(100dvh - 86px - var(--mobile-bottom-bar-h) - var(--mobile-safe-bottom)) !important;
}
.land-screen{
height:calc(100dvh - 86px - var(--mobile-bottom-bar-h) - var(--mobile-safe-bottom)) !important;
}
.msg{
display:none !important;
}
/* Fullscreen legacy and new modals on real phones. */
.ui-modal,
.build-modal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:100dvh !important;
min-height:0 !important;
max-height:100dvh !important;
margin:0 !important;
padding:12px 12px calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) 12px !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
z-index:9500 !important;
}
.modal-corner{
display:none !important;
}
.ui-modal__body,
.modal-scroll,
.info-scroll,
.army-scroll,
.unit-training-scroll,
#unitTrainingModal .modal-scroll.unit-training-scroll,
#buildModal .modal-scroll.build-selection-scroll,
#marketBuyModal .modal-scroll,
#marketSellModal .modal-scroll,
#marketMyLotsModal .modal-scroll,
#tradeModal .modal-scroll{
position:absolute !important;
left:12px !important;
right:12px !important;
top:58px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
-webkit-overflow-scrolling:touch !important;
}
.modal-title,
.ui-modal__title{
font-size:22px !important;
line-height:1.15 !important;
margin:4px 44px 8px 44px !important;
text-align:center !important;
}
.modal-close,
.ui-modal__close{
position:absolute !important;
right:12px !important;
top:12px !important;
width:36px !important;
height:36px !important;
z-index:9800 !important;
}
#buildingInfoModal .info-scroll,
#buildingInfoModal .ui-modal__body{
bottom:calc(172px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
}
#buildingInfoModal .info-actions{
left:12px !important;
right:12px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h) + var(--mobile-safe-bottom)) !important;
height:150px !important;
}
}
/* Runtime mobile class from JS. This catches Android browsers that report a
desktop-ish CSS viewport while still being a touch phone. */
body.mobile-runtime .game-topbar-center{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
min-width:0 !important;
width:100% !important;
}
body.mobile-runtime .game-topbar-right{min-width:0 !important;}
body.mobile-runtime .ui-modal,
body.mobile-runtime .build-modal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:100dvh !important;
max-height:100dvh !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
/* ============================================================
MOBILE HARD FIX PHASE 4
Runtime class is added to before CSS and to by JS.
This block intentionally does not rely on media queries: it fixes
Android browsers that keep a desktop layout viewport.
============================================================ */
html.mobile-runtime,
html.mobile-runtime body{
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
background:#080604 !important;
}
html.mobile-runtime body.main-game-body{
min-width:0 !important;
overflow-x:hidden !important;
padding-bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime .game-topbar{
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
min-height:56px !important;
height:auto !important;
margin:0 !important;
padding:5px 4px 6px 4px !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
box-sizing:border-box !important;
overflow:visible !important;
z-index:9000 !important;
}
html.mobile-runtime .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:2px !important;
}
html.mobile-runtime .game-topbar-icons{
width:100% !important;
max-width:100vw !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:5px !important;
flex-wrap:nowrap !important;
overflow:hidden !important;
}
html.mobile-runtime .game-notify-icon{
flex:0 0 auto !important;
padding:2px !important;
border-radius:8px !important;
}
html.mobile-runtime .game-notify-icon img{
max-width:29px !important;
max-height:29px !important;
width:auto !important;
height:auto !important;
}
html.mobile-runtime .game-notify-badge{
min-width:15px !important;
height:15px !important;
padding:0 3px !important;
right:-4px !important;
top:-5px !important;
font-size:9px !important;
}
html.mobile-runtime .game-topbar-resources{
width:auto !important;
max-width:calc(100vw - 10px) !important;
padding:2px 6px !important;
gap:4px !important;
flex-wrap:nowrap !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item{
font-size:9px !important;
line-height:1 !important;
gap:1px !important;
white-space:nowrap !important;
}
html.mobile-runtime .game-topbar-resources .top-resource-item img{
max-width:12px !important;
max-height:12px !important;
width:auto !important;
height:auto !important;
}
html.mobile-runtime .game-topbar-right{
display:none !important;
position:fixed !important;
left:8px !important;
right:8px !important;
bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
width:auto !important;
min-width:0 !important;
padding:10px !important;
border:1px solid rgba(210,180,108,.75) !important;
border-radius:10px !important;
background:rgba(45,20,7,.97) !important;
z-index:9900 !important;
box-shadow:0 4px 18px rgba(0,0,0,.75) !important;
}
html.mobile-runtime body.mobile-menu-open .game-topbar-right{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
html.mobile-runtime .game-topbar-nav{
justify-content:center !important;
flex-wrap:wrap !important;
gap:6px !important;
}
html.mobile-runtime .game,
html.mobile-runtime .world-screen,
html.mobile-runtime .castle-screen,
html.mobile-runtime .land-screen{
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:calc(100dvh - 62px - var(--mobile-bottom-bar-h, 58px) - env(safe-area-inset-bottom, 0px)) !important;
min-height:0 !important;
margin:0 !important;
border-left:0 !important;
border-right:0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
background:#0b0b0b !important;
}
html.mobile-runtime .castle-screen{
position:relative !important;
}
html.mobile-runtime .castle-screen .castle-field{
position:absolute !important;
left:50% !important;
top:12px !important;
width:1000px !important;
height:700px !important;
transform:translateX(-50%) scale(.42) !important;
transform-origin:top center !important;
z-index:100 !important;
}
html.mobile-runtime .build-panel,
html.mobile-runtime .building-selector,
html.mobile-runtime .msg,
html.mobile-runtime .panel,
html.mobile-runtime .coords,
html.mobile-runtime .menu{
display:none !important;
}
/* Fullscreen all legacy/new modals. They live inside .game, so use fixed and
repeat every critical property with the runtime html selector. */
html.mobile-runtime .ui-modal,
html.mobile-runtime .build-modal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:100dvh !important;
min-height:0 !important;
max-height:100dvh !important;
margin:0 !important;
padding:12px 12px calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) 12px !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
z-index:9500 !important;
background:url('assets/menu/background.png') repeat !important;
}
html.mobile-runtime .modal-backdrop,
html.mobile-runtime .ui-modal-backdrop{
position:fixed !important;
left:0 !important;
top:0 !important;
width:100vw !important;
height:100dvh !important;
z-index:9400 !important;
}
html.mobile-runtime .modal-corner{display:none !important;}
html.mobile-runtime .modal-close,
html.mobile-runtime .ui-modal__close{
position:absolute !important;
right:12px !important;
top:12px !important;
width:36px !important;
height:36px !important;
z-index:9800 !important;
}
html.mobile-runtime .modal-title,
html.mobile-runtime .ui-modal__title{
font-size:22px !important;
line-height:1.15 !important;
margin:4px 46px 10px 46px !important;
text-align:center !important;
}
html.mobile-runtime .ui-modal__body,
html.mobile-runtime .modal-scroll,
html.mobile-runtime .info-scroll,
html.mobile-runtime .army-scroll,
html.mobile-runtime .unit-training-scroll,
html.mobile-runtime #unitTrainingModal .modal-scroll.unit-training-scroll,
html.mobile-runtime #buildModal .modal-scroll.build-selection-scroll,
html.mobile-runtime #marketBuyModal .modal-scroll,
html.mobile-runtime #marketSellModal .modal-scroll,
html.mobile-runtime #marketMyLotsModal .modal-scroll,
html.mobile-runtime #tradeModal .modal-scroll{
position:absolute !important;
left:12px !important;
right:12px !important;
top:58px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
overflow-y:auto !important;
box-sizing:border-box !important;
-webkit-overflow-scrolling:touch !important;
}
html.mobile-runtime #buildingInfoModal .info-scroll,
html.mobile-runtime #buildingInfoModal .ui-modal__body{
bottom:calc(172px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal .info-actions{
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
height:150px !important;
z-index:9700 !important;
}
html.mobile-runtime .mobile-action-bar{
display:flex !important;
}
/* ============================================================
MOBILE UX PHASE 5: modal stacking + compact building info
- child modals should not show building info behind them
- market action buttons stack on phone
- body height is calculated by visible action count
- topbar/bottom bar stay fixed while castle viewport is zoomed/panned
============================================================ */
html.mobile-runtime .game-topbar{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
min-height:62px !important;
}
html.mobile-runtime .game,
html.mobile-runtime .world-screen,
html.mobile-runtime .castle-screen,
html.mobile-runtime .land-screen{
margin-top:62px !important;
height:calc(100dvh - 62px - var(--mobile-bottom-bar-h, 58px) - env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #marketMainActions.market-main-actions{
display:grid !important;
grid-template-columns:minmax(190px, 280px) !important;
justify-content:center !important;
justify-items:center !important;
gap:8px !important;
max-width:320px !important;
width:100% !important;
margin:10px auto !important;
padding:10px !important;
}
html.mobile-runtime #marketMainActions.market-main-actions .game-button{
width:100% !important;
min-width:0 !important;
max-width:280px !important;
height:42px !important;
font-size:16px !important;
}
html.mobile-runtime #buildingInfoModal .info-actions{
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
}
html.mobile-runtime #buildingInfoModal .info-actions .ui-action-form.is-hidden,
html.mobile-runtime #buildingInfoModal .info-actions .ui-action-form[style*="display: none"]{
display:none !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-0 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-0 .ui-modal__body{
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-1 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-1 .ui-modal__body{
bottom:calc(66px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-2 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-2 .ui-modal__body{
bottom:calc(116px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-3 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-3 .ui-modal__body{
bottom:calc(164px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-4 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-4 .ui-modal__body{
bottom:calc(212px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime #buildingInfoModal.ui-actions-count-5 .info-scroll,
html.mobile-runtime #buildingInfoModal.ui-actions-count-5 .ui-modal__body{
bottom:calc(260px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime .castle-screen{
touch-action:none !important;
overscroll-behavior:contain !important;
}
html.mobile-runtime .castle-screen .castle-field{
transform:translateX(-50%) translate(var(--castle-pan-x, 0px), var(--castle-pan-y, 0px)) scale(var(--castle-mobile-scale, .42)) !important;
transform-origin:top center !important;
will-change:transform !important;
}
/* STEP167: на Мире и Землях, как и на Замке, свой собственный контрол масштаба
(кнопки +/-), поэтому нативный pinch-zoom браузера (масштабирующий ВЕСЬ интерфейс
страницы, а не только карту) должен быть отключен на этих экранах так же, как он
уже отключен на Замке. Раньше touch-action:none стоял только для .castle-screen —
отсюда и разница в поведении, о которой сообщил пользователь ("Земли и Мир
приближают интерфейс" при pinch, а Замок — нет).
Мир целиком управляется собственным JS (свайп через touchstart/touchmove/touchend,
без нативного scroll), поэтому touch-action:none на .world-screen ничего не ломает.
Земли же, в отличие от Мира, панорамируются через НАТИВНЫЙ scroll контейнера
.land-stage (scrollLeft/scrollTop в JS) — если просто выключить touch-action на
всём .land-screen, сломается сама прокрутка пальцем. Поэтому здесь точно так же,
как у Замка (.castle-stage/.castle-field), отдельно возвращаем touch-action:pan-x
pan-y на сам скролл-контейнер и поле земель — это блокирует ТОЛЬКО pinch-zoom,
прокрутка пальцем продолжает работать нативно. */
html.mobile-runtime .world-screen,
html.mobile-runtime .land-screen{
touch-action:none !important;
overscroll-behavior:contain !important;
}
html.mobile-runtime .land-stage,
html.mobile-runtime .land-field{
touch-action:pan-x pan-y !important;
}
html.mobile-runtime .unit-training-modal,
html.mobile-runtime #unitTrainingModal{
z-index:9900 !important;
}
html.mobile-runtime #unitTrainingModalBackdrop{
z-index:9850 !important;
}
/* ============================================================
MOBILE UX PHASE 6: portal-safe fullscreen modals
Старые модалки создаются внутри сцены замка. На Android fixed-элементы
внутри transform-контейнера ведут себя как absolute, поэтому JS переносит
модалки в body, а этот блок жёстко фиксирует их по реальному viewport.
============================================================ */
html.mobile-runtime{
--mobile-vh:1vh;
}
html.mobile-runtime body.has-open-modal{
overflow:hidden !important;
touch-action:none !important;
}
html.mobile-runtime body > .ui-modal,
html.mobile-runtime body > .build-modal,
html.mobile-runtime .ui-modal.mobile-portal,
html.mobile-runtime .build-modal.mobile-portal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:calc(var(--mobile-vh, 1vh) * 100) !important;
min-height:0 !important;
max-height:calc(var(--mobile-vh, 1vh) * 100) !important;
margin:0 !important;
padding:12px 12px calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) 12px !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
z-index:9900 !important;
background:url('assets/menu/background.png') repeat !important;
touch-action:auto !important;
}
html.mobile-runtime body > .modal-backdrop,
html.mobile-runtime body > .ui-modal-backdrop,
html.mobile-runtime .modal-backdrop.mobile-portal,
html.mobile-runtime .ui-modal-backdrop.mobile-portal{
position:fixed !important;
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
width:100vw !important;
height:calc(var(--mobile-vh, 1vh) * 100) !important;
transform:none !important;
z-index:9800 !important;
}
html.mobile-runtime body > .ui-modal .modal-title,
html.mobile-runtime body > .build-modal .modal-title,
html.mobile-runtime body > .ui-modal .ui-modal__title,
html.mobile-runtime body > .build-modal .ui-modal__title{
position:relative !important;
z-index:2 !important;
font-size:22px !important;
line-height:1.15 !important;
margin:4px 52px 12px 52px !important;
text-align:center !important;
}
html.mobile-runtime body > .ui-modal .modal-close,
html.mobile-runtime body > .build-modal .modal-close,
html.mobile-runtime body > .ui-modal .ui-modal__close,
html.mobile-runtime body > .build-modal .ui-modal__close{
position:absolute !important;
right:14px !important;
top:14px !important;
width:44px !important;
height:44px !important;
z-index:10020 !important;
font-size:28px !important;
}
html.mobile-runtime body > .ui-modal .modal-corner,
html.mobile-runtime body > .build-modal .modal-corner{
display:none !important;
}
html.mobile-runtime body > .ui-modal .ui-modal__body,
html.mobile-runtime body > .build-modal .ui-modal__body,
html.mobile-runtime body > .ui-modal .modal-scroll,
html.mobile-runtime body > .build-modal .modal-scroll,
html.mobile-runtime body > .ui-modal .info-scroll,
html.mobile-runtime body > .build-modal .info-scroll,
html.mobile-runtime body > .ui-modal .army-scroll,
html.mobile-runtime body > .build-modal .army-scroll,
html.mobile-runtime body > .ui-modal .unit-training-scroll,
html.mobile-runtime body > .build-modal .unit-training-scroll{
position:absolute !important;
left:12px !important;
right:12px !important;
top:72px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
box-sizing:border-box !important;
touch-action:pan-y !important;
}
/* Окно информации о здании: снизу отдельная зона кнопок. */
html.mobile-runtime body > #buildingInfoModal .info-actions{
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
z-index:10000 !important;
}
html.mobile-runtime body > #buildingInfoModal .info-actions form{
width:100% !important;
max-width:330px !important;
height:auto !important;
margin:0 auto !important;
}
html.mobile-runtime body > #buildingInfoModal .info-actions .game-button,
html.mobile-runtime body > #buildingInfoModal .info-actions .info-action-button{
width:100% !important;
min-width:0 !important;
max-width:330px !important;
height:42px !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-0 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-0 .ui-modal__body{
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-1 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-1 .ui-modal__body{
bottom:calc(66px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-2 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-2 .ui-modal__body{
bottom:calc(116px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-3 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-3 .ui-modal__body{
bottom:calc(166px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-4 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-4 .ui-modal__body{
bottom:calc(216px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-5 .info-scroll,
html.mobile-runtime body > #buildingInfoModal.ui-actions-count-5 .ui-modal__body{
bottom:calc(266px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
/* Дочерние полноэкранные окна поверх окна информации. */
html.mobile-runtime body > #unitTrainingModal,
html.mobile-runtime body > #armyModal,
html.mobile-runtime body > #tradeModal,
html.mobile-runtime body > #marketBuyModal,
html.mobile-runtime body > #marketSellModal,
html.mobile-runtime body > #marketMyLotsModal{
z-index:10100 !important;
}
html.mobile-runtime body > #unitTrainingModalBackdrop,
html.mobile-runtime body > #armyModalBackdrop,
html.mobile-runtime body > #tradeModalBackdrop,
html.mobile-runtime body > #marketBuyModalBackdrop,
html.mobile-runtime body > #marketSellModalBackdrop,
html.mobile-runtime body > #marketMyLotsModalBackdrop{
z-index:10090 !important;
}
html.mobile-runtime body > #unitTrainingModal .modal-scroll.unit-training-scroll{
top:72px !important;
bottom:calc(12px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
overflow-y:auto !important;
}
html.mobile-runtime body > #unitTrainingModal .unit-card{
margin-left:0 !important;
margin-right:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
html.mobile-runtime body > #unitTrainingModal .unit-train-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
html.mobile-runtime body > #unitTrainingModal .unit-train-button{
width:100% !important;
max-width:330px !important;
min-width:0 !important;
margin:8px auto 0 auto !important;
}
html.mobile-runtime body > #buildingInfoModal #marketMainActions.market-main-actions{
display:grid !important;
grid-template-columns:1fr !important;
justify-items:center !important;
gap:8px !important;
width:100% !important;
max-width:330px !important;
margin:12px auto !important;
padding:10px !important;
box-sizing:border-box !important;
}
html.mobile-runtime body > #buildingInfoModal #marketMainActions.market-main-actions .game-button{
width:100% !important;
max-width:310px !important;
min-width:0 !important;
height:42px !important;
}
/* ============================================================
MOBILE UX PHASE 7: CSS-only stable fullscreen modals
Без переноса модалок в body. Исправляет высоту окна, скролл внутри
модалок и видимость замка сбоку при открытом окне.
============================================================ */
html.mobile-runtime{
--mobile-app-h:100vh;
}
html.mobile-runtime body.has-open-modal,
html.mobile-runtime body.has-open-modal.main-game-body{
overflow:hidden !important;
width:100vw !important;
max-width:100vw !important;
}
/* Во время открытого окна отключаем жесты на сцене замка, но не на самой модалке. */
html.mobile-runtime body.has-open-modal .castle-screen{
touch-action:auto !important;
overflow:visible !important;
}
html.mobile-runtime body.has-open-modal .castle-field,
html.mobile-runtime body.has-open-modal .build-panel,
html.mobile-runtime body.has-open-modal .building-selector,
html.mobile-runtime body.has-open-modal .cell-marker{
visibility:hidden !important;
pointer-events:none !important;
}
/* Главный fullscreen-режим для старых и новых окон. */
html.mobile-runtime body.has-open-modal .ui-modal,
html.mobile-runtime body.has-open-modal .build-modal,
html.mobile-runtime .ui-modal.is-open,
html.mobile-runtime .build-modal.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:var(--mobile-app-h, 100vh) !important;
min-height:var(--mobile-app-h, 100vh) !important;
max-height:var(--mobile-app-h, 100vh) !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
z-index:10000 !important;
background:url('assets/menu/background.png') repeat !important;
touch-action:auto !important;
}
html.mobile-runtime body.has-open-modal .modal-backdrop,
html.mobile-runtime body.has-open-modal .ui-modal-backdrop{
position:fixed !important;
left:0 !important;
top:0 !important;
width:100vw !important;
height:var(--mobile-app-h, 100vh) !important;
max-height:var(--mobile-app-h, 100vh) !important;
transform:none !important;
z-index:9990 !important;
}
html.mobile-runtime body.has-open-modal .modal-corner,
html.mobile-runtime .ui-modal.is-open .modal-corner,
html.mobile-runtime .build-modal.is-open .modal-corner{
display:none !important;
}
html.mobile-runtime body.has-open-modal .modal-title,
html.mobile-runtime body.has-open-modal .ui-modal__title{
position:relative !important;
z-index:2 !important;
height:58px !important;
line-height:58px !important;
margin:0 64px 0 64px !important;
padding:0 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
text-align:center !important;
font-size:22px !important;
}
html.mobile-runtime body.has-open-modal .modal-close,
html.mobile-runtime body.has-open-modal .ui-modal__close{
position:absolute !important;
right:14px !important;
top:10px !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
z-index:10030 !important;
font-size:28px !important;
}
/* Обычные полноэкранные окна: тело скроллится до нижней панели. */
html.mobile-runtime body.has-open-modal .ui-modal__body,
html.mobile-runtime body.has-open-modal .modal-scroll,
html.mobile-runtime body.has-open-modal .army-scroll,
html.mobile-runtime body.has-open-modal .unit-training-scroll,
html.mobile-runtime body.has-open-modal #unitTrainingModal .modal-scroll.unit-training-scroll,
html.mobile-runtime body.has-open-modal #buildModal .modal-scroll.build-selection-scroll,
html.mobile-runtime body.has-open-modal #marketBuyModal .modal-scroll,
html.mobile-runtime body.has-open-modal #marketSellModal .modal-scroll,
html.mobile-runtime body.has-open-modal #marketMyLotsModal .modal-scroll,
html.mobile-runtime body.has-open-modal #tradeModal .modal-scroll{
position:absolute !important;
left:14px !important;
right:14px !important;
top:70px !important;
bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
}
/* Окно информации о здании имеет отдельную нижнюю зону действий. */
html.mobile-runtime body.has-open-modal #buildingInfoModal .info-actions{
position:absolute !important;
left:14px !important;
right:14px !important;
bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
align-items:center !important;
gap:8px !important;
z-index:10020 !important;
}
html.mobile-runtime body.has-open-modal #buildingInfoModal .info-actions form,
html.mobile-runtime body.has-open-modal #buildingInfoModal .info-actions .ui-action-form{
width:100% !important;
max-width:340px !important;
margin:0 auto !important;
}
html.mobile-runtime body.has-open-modal #buildingInfoModal .info-actions .game-button,
html.mobile-runtime body.has-open-modal #buildingInfoModal .info-actions .info-action-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
height:44px !important;
}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-0 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-0 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px) !important;}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-1 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-1 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 68px) !important;}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-2 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-2 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 120px) !important;}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-3 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-3 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 172px) !important;}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-4 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-4 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 224px) !important;}
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-5 .info-scroll,
html.mobile-runtime body.has-open-modal #buildingInfoModal.ui-actions-count-5 .ui-modal__body{bottom:calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 276px) !important;}
/* Внутренние окна поверх информации о здании. */
html.mobile-runtime body.has-open-modal #unitTrainingModal,
html.mobile-runtime body.has-open-modal #armyModal,
html.mobile-runtime body.has-open-modal #tradeModal,
html.mobile-runtime body.has-open-modal #marketBuyModal,
html.mobile-runtime body.has-open-modal #marketSellModal,
html.mobile-runtime body.has-open-modal #marketMyLotsModal{
z-index:10100 !important;
}
html.mobile-runtime body.has-open-modal #unitTrainingModal .unit-card{
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime body.has-open-modal #unitTrainingModal .unit-head{
align-items:flex-start !important;
}
html.mobile-runtime body.has-open-modal #unitTrainingModal .unit-image{
flex:0 0 auto !important;
}
html.mobile-runtime body.has-open-modal #unitTrainingModal .unit-train-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
html.mobile-runtime body.has-open-modal #unitTrainingModal .unit-train-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
margin:8px auto 0 auto !important;
}
/* ============================================================
MOBILE UX PHASE 8: legacy modal compatibility + scroll fix
Старые open*() функции показывают окна через style.display=block.
JS теперь добавляет .is-open, а эти правила дают стабильный fullscreen
без пустого нижнего куска и с нормальным скроллом.
============================================================ */
html.mobile-runtime{
--mobile-modal-header-h:62px;
}
html.mobile-runtime .ui-modal.is-open,
html.mobile-runtime .build-modal.is-open,
html.mobile-runtime body.has-open-modal .ui-modal.is-open,
html.mobile-runtime body.has-open-modal .build-modal.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:var(--mobile-app-h, 100vh) !important;
min-height:0 !important;
max-height:var(--mobile-app-h, 100vh) !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
z-index:12000 !important;
background:url('assets/menu/background.png') repeat !important;
}
html.mobile-runtime .modal-backdrop.is-open,
html.mobile-runtime .ui-modal-backdrop.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
height:var(--mobile-app-h, 100vh) !important;
transform:none !important;
z-index:11980 !important;
}
html.mobile-runtime .ui-modal.is-open .modal-corner,
html.mobile-runtime .build-modal.is-open .modal-corner{
display:none !important;
}
html.mobile-runtime .ui-modal.is-open .modal-title,
html.mobile-runtime .build-modal.is-open .modal-title,
html.mobile-runtime .ui-modal.is-open .ui-modal__title,
html.mobile-runtime .build-modal.is-open .ui-modal__title{
position:absolute !important;
left:62px !important;
right:62px !important;
top:0 !important;
height:var(--mobile-modal-header-h, 62px) !important;
line-height:var(--mobile-modal-header-h, 62px) !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
font-size:21px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
z-index:2 !important;
}
html.mobile-runtime .ui-modal.is-open .modal-close,
html.mobile-runtime .build-modal.is-open .modal-close,
html.mobile-runtime .ui-modal.is-open .ui-modal__close,
html.mobile-runtime .build-modal.is-open .ui-modal__close{
position:absolute !important;
top:8px !important;
right:10px !important;
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
z-index:12100 !important;
font-size:28px !important;
}
html.mobile-runtime .ui-modal.is-open .ui-modal__body,
html.mobile-runtime .build-modal.is-open .ui-modal__body,
html.mobile-runtime .ui-modal.is-open .modal-scroll,
html.mobile-runtime .build-modal.is-open .modal-scroll,
html.mobile-runtime .ui-modal.is-open .info-scroll,
html.mobile-runtime .build-modal.is-open .info-scroll,
html.mobile-runtime .ui-modal.is-open .army-scroll,
html.mobile-runtime .build-modal.is-open .army-scroll,
html.mobile-runtime .ui-modal.is-open .unit-training-scroll,
html.mobile-runtime .build-modal.is-open .unit-training-scroll{
position:absolute !important;
left:12px !important;
right:12px !important;
top:var(--mobile-modal-header-h, 62px) !important;
bottom:10px !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px 10px calc(76px + env(safe-area-inset-bottom, 0px)) 10px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
}
/* Здание с нижними action-кнопками: кнопки поверх фона, тело скроллится под них. */
html.mobile-runtime #buildingInfoModal.is-open .info-actions{
position:absolute !important;
left:12px !important;
right:12px !important;
bottom:calc(10px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
height:auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
z-index:12050 !important;
}
html.mobile-runtime #buildingInfoModal.is-open .info-actions form,
html.mobile-runtime #buildingInfoModal.is-open .info-actions .ui-action-form{
width:100% !important;
max-width:340px !important;
height:auto !important;
margin:0 auto !important;
}
html.mobile-runtime #buildingInfoModal.is-open .info-actions .game-button,
html.mobile-runtime #buildingInfoModal.is-open .info-actions .info-action-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
height:42px !important;
}
html.mobile-runtime #buildingInfoModal.is-open .info-scroll,
html.mobile-runtime #buildingInfoModal.is-open .ui-modal__body{
bottom:10px !important;
padding-bottom:calc(230px + var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px)) !important;
}
/* Дочерние окна над информацией о здании. */
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #armyModal.is-open,
html.mobile-runtime #tradeModal.is-open,
html.mobile-runtime #marketBuyModal.is-open,
html.mobile-runtime #marketSellModal.is-open,
html.mobile-runtime #marketMyLotsModal.is-open{
z-index:12300 !important;
}
html.mobile-runtime #unitTrainingModalBackdrop.is-open,
html.mobile-runtime #armyModalBackdrop.is-open,
html.mobile-runtime #tradeModalBackdrop.is-open,
html.mobile-runtime #marketBuyModalBackdrop.is-open,
html.mobile-runtime #marketSellModalBackdrop.is-open,
html.mobile-runtime #marketMyLotsModalBackdrop.is-open{
z-index:12280 !important;
}
html.mobile-runtime #marketMainActions.market-main-actions{
display:grid !important;
grid-template-columns:minmax(0, 1fr) !important;
gap:8px !important;
width:100% !important;
max-width:330px !important;
margin:10px auto !important;
}
html.mobile-runtime #marketMainActions.market-main-actions .game-button{
width:100% !important;
min-width:0 !important;
height:42px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
margin:8px auto 0 auto !important;
}
/* ============================================================
MOBILE UX PHASE 9: stable body-portal + flex modal layout
Final override for old building/training modals on phones.
- opened modals are moved to body by GameModal.open()
- modal layout is normal flex, not absolute overlays
- scroll is inside the modal body
- building action buttons no longer overlap content
============================================================ */
html.mobile-runtime body > .ui-modal.is-open,
html.mobile-runtime body > .build-modal.is-open,
html.mobile-runtime body > .ui-modal.mobile-portal.is-open,
html.mobile-runtime body > .build-modal.mobile-portal.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
display:flex !important;
flex-direction:column !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:var(--mobile-app-h, 100vh) !important;
min-height:0 !important;
max-height:var(--mobile-app-h, 100vh) !important;
margin:0 !important;
padding:0 12px calc(var(--mobile-bottom-bar-h, 58px) + env(safe-area-inset-bottom, 0px) + 12px) 12px !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:url('assets/menu/background.png') repeat !important;
z-index:13000 !important;
}
html.mobile-runtime body > .ui-modal-backdrop.is-open,
html.mobile-runtime body > .modal-backdrop.is-open,
html.mobile-runtime body > .ui-modal-backdrop.mobile-portal.is-open,
html.mobile-runtime body > .modal-backdrop.mobile-portal.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
height:var(--mobile-app-h, 100vh) !important;
transform:none !important;
z-index:12980 !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header{
position:relative !important;
flex:0 0 64px !important;
height:64px !important;
min-height:64px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
padding:0 58px !important;
margin:0 !important;
z-index:2 !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header .modal-title,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header .modal-title,
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header .ui-modal__title,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header .ui-modal__title{
position:static !important;
left:auto !important;
right:auto !important;
top:auto !important;
width:100% !important;
height:auto !important;
line-height:1.15 !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
font-size:22px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__body,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__body,
html.mobile-runtime body > .ui-modal.is-open > .modal-scroll,
html.mobile-runtime body > .build-modal.is-open > .modal-scroll,
html.mobile-runtime body > .ui-modal.is-open > .info-scroll,
html.mobile-runtime body > .build-modal.is-open > .info-scroll,
html.mobile-runtime body > .ui-modal.is-open > .army-scroll,
html.mobile-runtime body > .build-modal.is-open > .army-scroll,
html.mobile-runtime body > .ui-modal.is-open > .unit-training-scroll,
html.mobile-runtime body > .build-modal.is-open > .unit-training-scroll{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:1 1 auto !important;
width:100% !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:10px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
}
/* Building info: actions become a normal footer, not an overlay. */
html.mobile-runtime body > #buildingInfoModal.is-open .info-scroll,
html.mobile-runtime body > #buildingInfoModal.is-open .ui-modal__body{
position:relative !important;
flex:1 1 auto !important;
bottom:auto !important;
padding-bottom:10px !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:0 0 auto !important;
height:auto !important;
min-height:0 !important;
width:100% !important;
max-width:360px !important;
margin:10px auto 0 auto !important;
padding:0 0 4px 0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
z-index:2 !important;
box-sizing:border-box !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions form,
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .ui-action-form{
width:100% !important;
max-width:340px !important;
height:auto !important;
margin:0 auto !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .game-button,
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .info-action-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
height:44px !important;
}
html.mobile-runtime body > #marketMainActions.market-main-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
width:100% !important;
max-width:330px !important;
margin:12px auto !important;
padding:10px !important;
box-sizing:border-box !important;
}
html.mobile-runtime body > #marketMainActions.market-main-actions .game-button{
width:100% !important;
max-width:310px !important;
min-width:0 !important;
height:42px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-card,
html.mobile-runtime body > #armyModal.is-open .army-card,
html.mobile-runtime body > #tradeModal.is-open .trade-card,
html.mobile-runtime body > #marketBuyModal.is-open .market-lot-card,
html.mobile-runtime body > #marketMyLotsModal.is-open .market-lot-card{
max-width:100% !important;
box-sizing:border-box !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-button{
width:100% !important;
max-width:340px !important;
min-width:0 !important;
margin:8px auto 0 auto !important;
}
/* ============================================================
MOBILE UX PHASE 10: tuned fullscreen proportions
- smaller mobile controls
- building action buttons stay near content, not at page bottom
- market action grid no overlap
============================================================ */
html.mobile-runtime{
--mobile-modal-header-h:56px;
--mobile-bottom-bar-h:64px;
}
html.mobile-runtime .mobile-action-bar{
height:var(--mobile-bottom-bar-h, 64px) !important;
padding:7px 16px calc(7px + env(safe-area-inset-bottom, 0px)) 16px !important;
}
html.mobile-runtime .mobile-action-button{
min-width:116px !important;
height:42px !important;
min-height:42px !important;
font-size:17px !important;
border-radius:10px !important;
}
html.mobile-runtime body > .ui-modal.is-open,
html.mobile-runtime body > .build-modal.is-open{
padding:0 10px calc(var(--mobile-bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px) 10px !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header{
flex-basis:56px !important;
height:56px !important;
min-height:56px !important;
padding:0 54px !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header .modal-title,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header .modal-title,
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__header .ui-modal__title,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__header .ui-modal__title{
font-size:20px !important;
}
html.mobile-runtime body > .ui-modal.is-open .modal-close,
html.mobile-runtime body > .build-modal.is-open .modal-close,
html.mobile-runtime body > .ui-modal.is-open .ui-modal__close,
html.mobile-runtime body > .build-modal.is-open .ui-modal__close{
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
font-size:25px !important;
}
html.mobile-runtime body > .ui-modal.is-open > .ui-modal__body,
html.mobile-runtime body > .build-modal.is-open > .ui-modal__body,
html.mobile-runtime body > .ui-modal.is-open > .modal-scroll,
html.mobile-runtime body > .build-modal.is-open > .modal-scroll,
html.mobile-runtime body > .ui-modal.is-open > .army-scroll,
html.mobile-runtime body > .build-modal.is-open > .army-scroll,
html.mobile-runtime body > .ui-modal.is-open > .unit-training-scroll,
html.mobile-runtime body > .build-modal.is-open > .unit-training-scroll{
font-size:14px !important;
line-height:1.28 !important;
padding:8px !important;
}
/* Building info window is usually short: keep actions directly after the content. */
html.mobile-runtime body > #buildingInfoModal.is-open .info-scroll,
html.mobile-runtime body > #buildingInfoModal.is-open .ui-modal__body{
flex:0 1 auto !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 64px) - env(safe-area-inset-bottom, 0px) - 190px) !important;
padding:8px !important;
margin-bottom:8px !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions{
flex:0 0 auto !important;
margin:4px auto 0 auto !important;
gap:7px !important;
max-width:300px !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions form,
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .ui-action-form{
max-width:300px !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .game-button,
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .info-action-button{
height:38px !important;
max-width:300px !important;
font-size:15px !important;
}
html.mobile-runtime body > #marketMainActions.market-main-actions{
grid-template-columns:1fr 1fr !important;
max-width:320px !important;
gap:7px !important;
padding:8px !important;
}
html.mobile-runtime body > #marketMainActions.market-main-actions .game-button{
height:38px !important;
max-width:none !important;
font-size:14px !important;
padding:0 8px !important;
}
html.mobile-runtime .game-button,
html.mobile-runtime .info-action-button,
html.mobile-runtime .unit-train-button,
html.mobile-runtime .army-manage-button{
min-height:38px !important;
font-size:15px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-image{
width:46px !important;
height:auto !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card{
padding:8px !important;
}
/* ============================================================
MOBILE UX PHASE 11: real content mobile layout
Keep real game mechanics/HTML and only adapt the layout.
============================================================ */
html.mobile-runtime body > #unitTrainingModal.is-open .unit-training-scroll{
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
padding:8px 10px 14px 10px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-card{
display:block !important;
padding:10px !important;
margin:0 0 10px 0 !important;
border:1px solid rgba(85,48,22,0.45) !important;
border-radius:7px !important;
background:rgba(105,70,42,0.32) !important;
box-shadow:inset 0 1px 0 rgba(255,235,180,0.12) !important;
color:#241406 !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-head{
display:flex !important;
align-items:flex-start !important;
gap:10px !important;
margin:0 0 7px 0 !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-head b{
display:block !important;
color:#fff1bd !important;
text-shadow:1px 1px 2px #000 !important;
font-size:16px !important;
margin-bottom:4px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-image{
flex:0 0 auto !important;
width:44px !important;
max-width:44px !important;
max-height:58px !important;
object-fit:contain !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .resource-line.unit-cost{
display:flex !important;
flex-wrap:wrap !important;
gap:4px 8px !important;
align-items:center !important;
font-size:13px !important;
color:#2b1708 !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .resource-item img,
html.mobile-runtime body > #unitTrainingModal.is-open .unit-cost img{
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
vertical-align:middle !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-stats{
display:block !important;
margin-top:6px !important;
font-size:13px !important;
line-height:1.28 !important;
color:#f7ead0 !important;
text-shadow:1px 1px 1px rgba(0,0,0,0.65) !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-stat{
display:block !important;
margin:1px 0 !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-stat img{
width:14px !important;
height:14px !important;
max-width:14px !important;
max-height:14px !important;
margin-right:3px !important;
vertical-align:middle !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-description,
html.mobile-runtime body > #unitTrainingModal.is-open .unit-requires,
html.mobile-runtime body > #unitTrainingModal.is-open .unit-locked-note{
display:block !important;
font-size:12px !important;
line-height:1.25 !important;
margin-top:6px !important;
color:#fff2c9 !important;
text-shadow:1px 1px 1px rgba(0,0,0,0.75) !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-form{
margin-top:8px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-row{
display:grid !important;
grid-template-columns:auto auto !important;
justify-content:center !important;
align-items:center !important;
gap:7px 12px !important;
font-size:13px !important;
color:#fff2c9 !important;
text-shadow:1px 1px 1px rgba(0,0,0,0.75) !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-row label{
display:flex !important;
align-items:center !important;
gap:5px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-count-input{
width:58px !important;
height:26px !important;
min-height:26px !important;
padding:2px 5px !important;
box-sizing:border-box !important;
font-size:15px !important;
text-align:center !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .unit-train-button{
grid-column:1 / -1 !important;
justify-self:center !important;
align-self:center !important;
width:170px !important;
max-width:170px !important;
min-width:153px !important;
height:34px !important;
min-height:34px !important;
margin:2px auto 0 auto !important;
font-size:14px !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .training-queue-box{
margin:0 0 10px 0 !important;
padding:8px !important;
border-radius:7px !important;
background:rgba(30,15,5,0.28) !important;
}
html.mobile-runtime body > #unitTrainingModal.is-open .training-queue-row{
align-items:center !important;
}
/* keep building action buttons close to content, but never cover it */
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions{
position:relative !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
height:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
margin:6px auto 0 auto !important;
padding:0 0 8px 0 !important;
z-index:2 !important;
}
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .game-button,
html.mobile-runtime body > #buildingInfoModal.is-open .info-actions .info-action-button{
width:190px !important;
min-width:190px !important;
max-width:220px !important;
}
/* ============================================================
UI MODAL V2 - unified container test (Barracks first)
============================================================ */
.game-modal-v2-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
z-index:12000;
}
.game-modal-v2{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:12010;
width:min(520px, calc(100vw - 28px));
max-height:min(720px, calc(100vh - 38px));
display:flex;
flex-direction:column;
box-sizing:border-box;
overflow:hidden;
padding:0;
color:#2b1708;
font-family:Arial, Helvetica, sans-serif;
background:url('assets/menu/background.png') repeat;
border:2px solid #4b2609;
box-shadow:0 10px 32px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,220,145,.18);
}
.game-modal-v2__header{
position:relative;
flex:0 0 auto;
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
padding:16px 72px 12px 72px;
box-sizing:border-box;
border-bottom:2px solid rgba(207,165,89,.55);
}
.game-modal-v2__title{
color:#ffe8a5;
text-shadow:2px 2px 2px #000;
font:bold 28px Arial, Helvetica, sans-serif;
text-align:center;
line-height:1.15;
}
.game-modal-v2__close{
position:absolute;
right:14px;
top:12px;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(92,43,9,.95);
border:2px solid #d6ad63;
color:#ffe8a5;
font:bold 32px Arial;
line-height:1;
cursor:pointer;
box-shadow:0 2px 7px rgba(0,0,0,.5);
}
.game-modal-v2__body{
flex:1 1 auto;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:16px 18px 20px 18px;
box-sizing:border-box;
min-height:0;
}
.game-modal-v2-card{
background:rgba(189,151,113,.62);
border:1px solid rgba(70,35,10,.42);
box-shadow:inset 0 0 0 1px rgba(255,232,180,.12);
border-radius:4px;
padding:12px;
margin:0 0 12px 0;
box-sizing:border-box;
}
.building-v2-summary{
display:grid;
grid-template-columns:92px 1fr;
gap:14px;
align-items:center;
}
.building-v2-image{
max-width:86px;
max-height:86px;
object-fit:contain;
display:block;
margin:auto;
}
.building-v2-info{
font-size:16px;
line-height:1.45;
}
.building-v2-cost .resource-item img,
.game-modal-v2 .resource-item img{
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
vertical-align:middle;
}
.game-modal-v2__time{
display:inline-block;
margin-left:10px;
font-weight:bold;
}
.game-modal-v2__status{
text-align:center;
font-weight:bold;
}
.building-v2-description{
margin:10px 2px 14px 2px;
color:#2b1708;
font-size:16px;
line-height:1.35;
}
.building-v2-actions-grid{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:10px;
margin:12px 0;
}
.game-modal-v2-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:14px 0 0 0;
}
.game-modal-v2-actions form{margin:0 !important;padding:0 !important;display:block !important;width:auto !important;height:auto !important;}
.game-modal-v2 .game-button,
.game-modal-v2 .info-action-button{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:160px !important;
width:auto !important;
height:40px !important;
padding:0 22px !important;
margin:0 auto !important;
border:2px solid #d2b46c !important;
outline:1px solid #2a1403 !important;
border-radius:8px !important;
background:linear-gradient(to bottom,#7a430b 0%,#502605 55%,#321404 100%) !important;
color:#fff !important;
text-shadow:1px 1px 2px #000 !important;
font:bold 16px Arial !important;
letter-spacing:.2px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.55) !important;
cursor:pointer;
box-sizing:border-box !important;
}
.game-modal-v2 .game-button.danger,
.game-modal-v2 .info-action-button.danger{
background:linear-gradient(to bottom,#8c3325 0%,#641b13 55%,#3a0d0d 100%) !important;
border-color:#d28a6c !important;
}
/* Training modal cleanup for the v2 flow */
#unitTrainingModal.is-open,
#unitTrainingModal[style*="block"]{
z-index:12020 !important;
}
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"]{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--app-height, 100vh) - 86px) !important;
max-height:calc(var(--app-height, 100vh) - 86px) !important;
min-height:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="block"] .ui-modal__header{
flex:0 0 auto !important;
position:relative !important;
height:auto !important;
min-height:70px !important;
padding:16px 70px 12px 22px !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:1 1 auto !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 14px 14px 14px !important;
padding:10px !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-card{
background:rgba(189,151,113,.58) !important;
border:1px solid rgba(70,35,10,.42) !important;
border-radius:6px !important;
padding:12px !important;
margin:0 0 12px 0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-row,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-row{
display:grid !important;
grid-template-columns:1fr auto !important;
gap:8px 10px !important;
align-items:center !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-row label,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-row label{display:flex !important;align-items:center !important;gap:8px !important;}
html.mobile-runtime #unitTrainingModal.is-open .unit-count-input,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-count-input{width:82px !important;height:34px !important;}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-button,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-button{
grid-column:1 / -1 !important;
justify-self:center !important;
width:auto !important;
min-width:170px !important;
flex:none !important;
}
@media (max-width: 700px){
.game-modal-v2{
left:0;
top:0;
right:0;
bottom:auto;
transform:none;
width:100vw;
max-width:100vw;
height:calc(var(--app-height, 100vh) - 86px);
max-height:calc(var(--app-height, 100vh) - 86px);
border-left:0;
border-right:0;
}
.game-modal-v2__header{
min-height:68px;
padding:14px 70px 10px 22px;
}
.game-modal-v2__title{font-size:24px;}
.game-modal-v2__close{right:14px;top:10px;width:46px;height:46px;font-size:34px;}
.game-modal-v2__body{padding:12px 14px 18px 14px;}
.building-v2-summary{grid-template-columns:76px 1fr;gap:10px;}
.building-v2-image{max-width:72px;max-height:72px;}
.building-v2-info,.building-v2-description{font-size:15px;}
.building-v2-actions-grid{grid-template-columns:1fr;gap:8px;}
.game-modal-v2 .game-button{width:100% !important;max-width:320px !important;min-width:0 !important;height:38px !important;font-size:15px !important;}
.game-modal-v2-actions{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;}
.game-modal-v2-actions form{width:100% !important;text-align:center !important;}
}
/* ============================================================
MOBILE MODAL V2 PHASE 12: real barracks container fixes
- fixes desktop v2 description/buttons
- reserves space for mobile bottom bar
- restores scroll in real training modal
============================================================ */
/* Desktop/PC polishing for new v2 building modal */
.game-modal-v2 .building-v2-description{
background:rgba(189,151,113,.42);
border:1px solid rgba(70,35,10,.28);
border-radius:4px;
padding:10px 12px;
margin:0 0 12px 0;
color:#2b1708;
text-shadow:none;
}
.game-modal-v2 .training-queue-box{
background:rgba(60,26,8,.34);
border:1px solid rgba(214,173,99,.36);
border-radius:6px;
padding:10px 12px;
margin:0 0 12px 0;
color:#ffe8b2;
text-shadow:1px 1px 2px #000;
}
.game-modal-v2 .training-queue-title{
text-align:center;
font-weight:bold;
margin-bottom:6px;
}
.game-modal-v2 .training-queue-row{
display:flex;
align-items:center;
gap:8px;
padding:6px 0;
border-top:1px solid rgba(255,226,160,.12);
}
.game-modal-v2 .training-queue-row:first-of-type{border-top:0;}
.game-modal-v2 .training-queue-icon{
width:34px;
max-width:34px;
height:auto;
object-fit:contain;
}
.game-modal-v2-actions{
align-items:center;
}
.game-modal-v2-actions > button,
.game-modal-v2-actions > form{
flex:0 0 auto !important;
}
.game-modal-v2-actions form button,
.game-modal-v2-actions > button{
min-width:160px !important;
}
/* Mobile: the real viewport must end above the fixed bottom menu. */
html.mobile-runtime{
--mobile-bottom-bar-h:78px;
--mobile-modal-side-gap:12px;
}
html.mobile-runtime .game-modal-v2{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:calc(var(--mobile-bottom-bar-h, 78px) + 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;
z-index:12500 !important;
}
html.mobile-runtime .game-modal-v2__header{
flex:0 0 62px !important;
min-height:62px !important;
height:62px !important;
padding:8px 66px 8px 18px !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-modal-v2__title{
font-size:22px !important;
line-height:1.1 !important;
}
html.mobile-runtime .game-modal-v2__close{
width:44px !important;
height:44px !important;
right:16px !important;
top:9px !important;
font-size:30px !important;
}
html.mobile-runtime .game-modal-v2__body{
flex:1 1 auto !important;
min-height:0 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
padding:10px var(--mobile-modal-side-gap, 12px) 14px var(--mobile-modal-side-gap, 12px) !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-modal-v2-card{
padding:9px !important;
margin-bottom:9px !important;
}
html.mobile-runtime .building-v2-summary{
grid-template-columns:62px 1fr !important;
gap:8px !important;
}
html.mobile-runtime .building-v2-image{
max-width:58px !important;
max-height:58px !important;
}
html.mobile-runtime .building-v2-info,
html.mobile-runtime .building-v2-description{
font-size:14px !important;
line-height:1.28 !important;
}
html.mobile-runtime .building-v2-cost{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:center !important;
gap:7px 12px !important;
}
html.mobile-runtime .game-modal-v2 .resource-item{
white-space:nowrap !important;
}
html.mobile-runtime .game-modal-v2 .resource-item img{
max-width:17px !important;
max-height:17px !important;
}
html.mobile-runtime .building-v2-actions-grid{
grid-template-columns:1fr 1fr !important;
gap:8px !important;
margin:10px 0 !important;
}
html.mobile-runtime .game-modal-v2-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
justify-items:center !important;
margin:10px 0 0 0 !important;
}
html.mobile-runtime .game-modal-v2 .game-button,
html.mobile-runtime .game-modal-v2 .info-action-button{
width:100% !important;
max-width:310px !important;
min-width:0 !important;
height:38px !important;
min-height:38px !important;
font-size:15px !important;
padding:0 12px !important;
}
html.mobile-runtime .game-modal-v2-actions form{
width:100% !important;
max-width:310px !important;
text-align:center !important;
}
html.mobile-runtime .game-modal-v2-actions form button{
width:100% !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-box{
padding:8px !important;
margin-bottom:10px !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-icon{
width:30px !important;
max-width:30px !important;
}
/* Mobile: real unit training modal, not test content. */
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"]{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:calc(var(--mobile-bottom-bar-h, 78px) + env(safe-area-inset-bottom, 0px)) !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
transform:none !important;
margin:0 !important;
padding:0 !important;
border-left:0 !important;
border-right:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
background:url('assets/menu/background.png') repeat !important;
box-sizing:border-box !important;
z-index:12600 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-corner,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-corner{
display:none !important;
}
html.mobile-runtime #unitTrainingModal.is-open > .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="block"] > .ui-modal__header{
flex:0 0 62px !important;
min-height:62px !important;
height:62px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:8px 66px 8px 18px !important;
border-bottom:2px solid rgba(207,165,89,.55) !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal.is-open #unitTrainingTitle,
html.mobile-runtime #unitTrainingModal[style*="block"] #unitTrainingTitle{
font-size:20px !important;
line-height:1.1 !important;
color:#ffe8a5 !important;
text-shadow:2px 2px 2px #000 !important;
text-align:center !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-close,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-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;
z-index:2 !important;
}
html.mobile-runtime #unitTrainingModal.is-open > .unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] > .unit-training-scroll,
html.mobile-runtime #unitTrainingModal.is-open > .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] > .modal-scroll.unit-training-scroll{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
width:auto !important;
margin:10px var(--mobile-modal-side-gap, 12px) 12px var(--mobile-modal-side-gap, 12px) !important;
padding:9px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
box-sizing:border-box !important;
background:rgba(189,151,113,.48) !important;
border:1px solid rgba(70,35,10,.42) !important;
}
html.mobile-runtime #unitTrainingModal.is-open #unitTrainingList,
html.mobile-runtime #unitTrainingModal[style*="block"] #unitTrainingList{
display:block !important;
min-height:0 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-card{
color:#2b1708 !important;
text-shadow:none !important;
background:rgba(189,151,113,.62) !important;
border:1px solid rgba(70,35,10,.42) !important;
border-radius:7px !important;
padding:10px !important;
margin:0 0 10px 0 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-head,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-head{
display:flex !important;
align-items:flex-start !important;
gap:10px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-head b,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-head b{
color:#ffe8a5 !important;
text-shadow:1px 1px 2px #000 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-description,
html.mobile-runtime #unitTrainingModal.is-open .unit-requires,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-description,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-requires{
color:#2b1708 !important;
text-shadow:none !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-stats,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-stats{
color:#2b1708 !important;
text-shadow:none !important;
font-size:13px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-row,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-row{
color:#2b1708 !important;
text-shadow:none !important;
display:grid !important;
grid-template-columns:auto auto !important;
justify-content:center !important;
align-items:center !important;
gap:7px 12px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-button,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-button{
grid-column:1 / -1 !important;
justify-self:center !important;
width:180px !important;
max-width:180px !important;
min-width:153px !important;
margin:4px auto 0 auto !important;
}
/* ============================================================
HOTFIX: modal v2 visibility + desktop actions alignment
============================================================ */
.game-modal-v2:not(.is-open),
.game-modal-v2-backdrop:not(.is-open){
display:none !important;
}
html.mobile-runtime .game-modal-v2:not(.is-open),
html.mobile-runtime .game-modal-v2-backdrop:not(.is-open){
display:none !important;
}
.game-modal-v2-actions{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:12px 48px !important;
width:100% !important;
margin:14px auto 0 auto !important;
}
.game-modal-v2-actions > form,
.game-modal-v2-actions > button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:180px !important;
min-width:180px !important;
max-width:180px !important;
height:40px !important;
margin:0 !important;
padding:0 !important;
line-height:0 !important;
box-sizing:border-box !important;
}
.game-modal-v2-actions > form > button,
.game-modal-v2-actions > button{
width:180px !important;
min-width:180px !important;
max-width:180px !important;
height:40px !important;
margin:0 !important;
}
@media (max-width:700px){
.game-modal-v2-actions{
display:grid !important;
grid-template-columns:1fr !important;
justify-items:center !important;
align-items:center !important;
gap:8px !important;
margin:10px auto 0 auto !important;
}
.game-modal-v2-actions > form,
.game-modal-v2-actions > button,
.game-modal-v2-actions > form > button{
width:100% !important;
max-width:310px !important;
min-width:0 !important;
height:38px !important;
line-height:normal !important;
}
}
/* ============================================================
HOTFIX PHASE 13: barracks v2 description + training modal active layer
============================================================ */
.game-modal-v2 .building-v2-description{
text-align:center !important;
display:block !important;
width:100% !important;
box-sizing:border-box !important;
}
/* The training modal is a child window opened after the v2 building modal.
It must always be above every backdrop; otherwise the window looks visible
but taps/scroll are intercepted by the overlay. */
#unitTrainingModal.is-open,
#unitTrainingModal[style*="block"]{
z-index:15020 !important;
pointer-events:auto !important;
}
#unitTrainingModalBackdrop.is-open,
#unitTrainingModalBackdrop[style*="block"]{
z-index:15000 !important;
pointer-events:auto !important;
}
#buildingModalV2Backdrop:not(.is-open),
#buildingModalV2:not(.is-open){
pointer-events:none !important;
}
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"]{
z-index:15020 !important;
pointer-events:auto !important;
touch-action:auto !important;
}
html.mobile-runtime #unitTrainingModalBackdrop.is-open,
html.mobile-runtime #unitTrainingModalBackdrop[style*="block"]{
z-index:15000 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll{
pointer-events:auto !important;
touch-action:pan-y !important;
overscroll-behavior:contain !important;
}
html.mobile-runtime #unitTrainingModal.is-open input,
html.mobile-runtime #unitTrainingModal.is-open button,
html.mobile-runtime #unitTrainingModal[style*="block"] input,
html.mobile-runtime #unitTrainingModal[style*="block"] button{
pointer-events:auto !important;
}
/* Compact, stable mobile training form row. */
html.mobile-runtime #unitTrainingModal.is-open .unit-train-row,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-row{
display:grid !important;
grid-template-columns:auto auto !important;
justify-content:center !important;
align-items:center !important;
gap:7px 12px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-train-button,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-train-button{
grid-column:1 / -1 !important;
justify-self:center !important;
width:190px !important;
max-width:190px !important;
min-width:153px !important;
margin:6px auto 0 auto !important;
}
/* ============================================================
HOTFIX PHASE 14: safe mobile training modal without blocking backdrop
============================================================ */
html.mobile-runtime #unitTrainingModalBackdrop,
html.mobile-runtime #unitTrainingModalBackdrop.is-open,
html.mobile-runtime #unitTrainingModalBackdrop[style*="block"]{
display:none !important;
pointer-events:none !important;
opacity:0 !important;
visibility:hidden !important;
}
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"]{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 62px) - env(safe-area-inset-bottom, 0px)) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 62px) - env(safe-area-inset-bottom, 0px)) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
z-index:20000 !important;
pointer-events:auto !important;
touch-action:auto !important;
opacity:1 !important;
visibility:visible !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
pointer-events:auto !important;
touch-action:pan-y !important;
opacity:1 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-card{
pointer-events:auto !important;
opacity:1 !important;
}
html.mobile-runtime #unitTrainingModal.is-open input,
html.mobile-runtime #unitTrainingModal.is-open button,
html.mobile-runtime #unitTrainingModal[style*="block"] input,
html.mobile-runtime #unitTrainingModal[style*="block"] button{
pointer-events:auto !important;
}
/* ============================================================
PHASE 15: Modal V2 actions before queue + compact mobile scroll
============================================================ */
.game-modal-v2 .building-v2-queue{
width:100% !important;
box-sizing:border-box !important;
margin:12px 0 0 0 !important;
}
.game-modal-v2 .building-v2-queue:empty{
display:none !important;
}
.game-modal-v2 .training-queue-box{
margin:0 auto !important;
width:100% !important;
box-sizing:border-box !important;
max-height:180px !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.game-modal-v2-actions{
order:20 !important;
}
.game-modal-v2 .building-v2-queue{
order:30 !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-box{
max-height:220px !important;
}
html.mobile-runtime .game-modal-v2 .building-v2-queue{
margin-top:10px !important;
}
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"]{
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 62px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 62px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll{
margin-bottom:8px !important;
}
/* ============================================================
PHASE 16: mobile v2 modal scroll/bottom-space stabilization
============================================================ */
html.mobile-runtime{
--mobile-bottom-bar-h:92px;
}
/* V2 building modal: keep whole window above bottom controls and let body scroll. */
html.mobile-runtime .game-modal-v2.is-open,
html.mobile-runtime .game-modal-v2[style*="flex"],
html.mobile-runtime .game-modal-v2[style*="block"]{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-modal-v2__body{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding-bottom:14px !important;
}
/* Queue inside building info: independent short scroll, never under bottom controls. */
html.mobile-runtime .game-modal-v2 .building-v2-queue{
margin-top:10px !important;
margin-bottom:0 !important;
min-height:0 !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-box{
max-height:min(150px, 22vh) !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding-bottom:4px !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-row{
min-height:52px !important;
}
/* Unit training modal: make the scroll area occupy all available space; remove wood gap. */
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"],
html.mobile-runtime #unitTrainingModal[style*="flex"]{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
box-sizing:border-box !important;
padding:0 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="block"] .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="flex"] .ui-modal__header{
flex:0 0 auto !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="flex"] .modal-scroll.unit-training-scroll{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:none !important;
margin:0 12px 0 12px !important;
padding:10px 10px 12px 10px !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal .unit-card:last-child{
margin-bottom:6px !important;
}
/* ============================================================
PHASE 17: mobile modal compact max-height + reliable inner scroll
Fixes: no huge wood gap, queue scroll in barracks info, training scroll.
============================================================ */
html.mobile-runtime{
--mobile-bottom-bar-h:92px;
--mobile-modal-max-h:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 10px);
}
/* New V2 building modal should be compact when content is short,
but never exceed screen height above the bottom controls. */
html.mobile-runtime .game-modal-v2.is-open,
html.mobile-runtime .game-modal-v2[style*="flex"],
html.mobile-runtime .game-modal-v2[style*="block"]{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:100vw !important;
max-width:100vw !important;
height:auto !important;
min-height:0 !important;
max-height:var(--mobile-modal-max-h) !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
transform:none !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-modal-v2__header{
flex:0 0 auto !important;
}
html.mobile-runtime .game-modal-v2__body{
flex:0 1 auto !important;
min-height:0 !important;
height:auto !important;
max-height:calc(var(--mobile-modal-max-h) - 64px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding-bottom:10px !important;
}
/* Barracks training queue inside the building info: independent scroll,
kept short enough so it does not collide with the bottom mobile buttons. */
html.mobile-runtime .game-modal-v2 .building-v2-queue{
display:block !important;
margin-top:9px !important;
margin-bottom:2px !important;
min-height:0 !important;
max-height:150px !important;
overflow:hidden !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-box{
max-height:145px !important;
min-height:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding:8px 10px 6px 10px !important;
margin:0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime .game-modal-v2 .training-queue-row{
min-height:46px !important;
padding:5px 0 !important;
}
/* Unit training modal: compact max-height. It shrinks to content if short,
but becomes scrollable if the unit list is long. */
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"],
html.mobile-runtime #unitTrainingModal[style*="flex"]{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:100vw !important;
max-width:100vw !important;
height:auto !important;
min-height:0 !important;
max-height:var(--mobile-modal-max-h) !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
transform:none !important;
padding:0 !important;
box-sizing:border-box !important;
z-index:20000 !important;
}
html.mobile-runtime #unitTrainingModal.is-open .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="block"] .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="flex"] .ui-modal__header{
flex:0 0 auto !important;
}
html.mobile-runtime #unitTrainingModal.is-open .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="flex"] .modal-scroll.unit-training-scroll{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:0 1 auto !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:calc(var(--mobile-modal-max-h) - 72px) !important;
margin:0 12px 10px 12px !important;
padding:10px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModal .unit-card:last-child{
margin-bottom:0 !important;
}
/* ============================================================
PHASE 18 HOTFIX: mobile unit training modal must keep a real body
Previous compact auto-height mode could collapse the content area,
leaving only the header over a black page. For the training list we
use full available height and an internal scroll area.
============================================================ */
html.mobile-runtime #unitTrainingModal.is-open,
html.mobile-runtime #unitTrainingModal[style*="block"],
html.mobile-runtime #unitTrainingModal[style*="flex"]{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
transform:none !important;
padding:0 !important;
box-sizing:border-box !important;
z-index:20000 !important;
background-color:#4b1705 !important;
}
html.mobile-runtime #unitTrainingModal.is-open > .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="block"] > .ui-modal__header,
html.mobile-runtime #unitTrainingModal[style*="flex"] > .ui-modal__header{
flex:0 0 auto !important;
display:flex !important;
}
html.mobile-runtime #unitTrainingModal.is-open > .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="block"] > .modal-scroll.unit-training-scroll,
html.mobile-runtime #unitTrainingModal[style*="flex"] > .modal-scroll.unit-training-scroll{
display:block !important;
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
flex:1 1 auto !important;
width:auto !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 12px 8px 12px !important;
padding:10px 10px 8px 10px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
box-sizing:border-box !important;
background:rgba(190,150,105,.72) !important;
border:1px solid rgba(255,220,150,.32) !important;
}
html.mobile-runtime #unitTrainingModal.is-open #unitTrainingList,
html.mobile-runtime #unitTrainingModal[style*="block"] #unitTrainingList,
html.mobile-runtime #unitTrainingModal[style*="flex"] #unitTrainingList{
display:block !important;
min-height:1px !important;
}
html.mobile-runtime #unitTrainingModal.is-open .unit-card,
html.mobile-runtime #unitTrainingModal[style*="block"] .unit-card,
html.mobile-runtime #unitTrainingModal[style*="flex"] .unit-card{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ============================================================
PHASE 19: independent V2 training modal for mobile
Старое окно #unitTrainingModal конфликтовало с накопленными mobile overrides.
На телефоне открываем отдельный .unit-training-modal-v2 с тем же реальным HTML.
============================================================ */
.unit-training-modal-v2:not(.is-open),
#unitTrainingModalV2Backdrop:not(.is-open){
display:none !important;
}
.unit-training-modal-v2{
width:min(560px, calc(100vw - 28px));
}
.unit-training-modal-v2 .unit-training-v2-scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.unit-training-modal-v2 .unit-card{
background:rgba(189,151,113,.62) !important;
border:1px solid rgba(70,35,10,.42) !important;
border-radius:7px !important;
padding:12px !important;
margin:0 0 12px 0 !important;
box-sizing:border-box !important;
color:#2b1708 !important;
text-shadow:none !important;
}
.unit-training-modal-v2 .unit-head{
display:flex !important;
align-items:flex-start !important;
gap:12px !important;
margin-bottom:8px !important;
}
.unit-training-modal-v2 .unit-head b{
color:#ffe8a5 !important;
text-shadow:1px 1px 2px #000 !important;
font-size:18px !important;
}
.unit-training-modal-v2 .unit-image{
flex:0 0 auto !important;
width:54px !important;
max-width:54px !important;
max-height:72px !important;
object-fit:contain !important;
}
.unit-training-modal-v2 .resource-line.unit-cost{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:6px 12px !important;
margin-top:6px !important;
}
.unit-training-modal-v2 .resource-item img,
.unit-training-modal-v2 .unit-cost img{
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
vertical-align:middle !important;
}
.unit-training-modal-v2 .unit-stats{
display:block !important;
margin-top:8px !important;
line-height:1.35 !important;
color:#2b1708 !important;
text-shadow:none !important;
}
.unit-training-modal-v2 .unit-stat{
margin:2px 0 !important;
}
.unit-training-modal-v2 .unit-stat img{
width:16px !important;
height:16px !important;
max-width:16px !important;
max-height:16px !important;
margin-right:4px !important;
vertical-align:middle !important;
}
.unit-training-modal-v2 .unit-description,
.unit-training-modal-v2 .unit-requires,
.unit-training-modal-v2 .unit-locked-note{
color:#2b1708 !important;
text-shadow:none !important;
margin-top:8px !important;
line-height:1.3 !important;
}
.unit-training-modal-v2 .unit-train-form{
margin-top:10px !important;
}
.unit-training-modal-v2 .unit-train-row{
display:grid !important;
grid-template-columns:auto auto !important;
align-items:center !important;
justify-content:center !important;
gap:8px 16px !important;
}
.unit-training-modal-v2 .unit-train-row label{
display:flex !important;
align-items:center !important;
gap:7px !important;
}
.unit-training-modal-v2 .unit-count-input{
width:72px !important;
height:32px !important;
min-height:32px !important;
text-align:center !important;
box-sizing:border-box !important;
}
.unit-training-modal-v2 .unit-train-button{
grid-column:1 / -1 !important;
justify-self:center !important;
width:190px !important;
max-width:190px !important;
min-width:153px !important;
height:36px !important;
min-height:36px !important;
margin:6px auto 0 auto !important;
}
html.mobile-runtime #unitTrainingModalV2Backdrop.is-open{
display:none !important;
pointer-events:none !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
box-sizing:border-box !important;
z-index:24000 !important;
background:url('assets/menu/background.png') repeat !important;
border-left:0 !important;
border-right:0 !important;
}
html.mobile-runtime #unitTrainingModalV2 .game-modal-v2__header{
flex:0 0 62px !important;
min-height:62px !important;
height:62px !important;
padding:8px 66px 8px 18px !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModalV2 .game-modal-v2__title{
font-size:20px !important;
line-height:1.1 !important;
}
html.mobile-runtime #unitTrainingModalV2 .game-modal-v2__close{
width:44px !important;
height:44px !important;
right:16px !important;
top:9px !important;
font-size:30px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-training-v2-scroll{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
margin:0 12px 8px 12px !important;
padding:10px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
background:rgba(190,150,105,.72) !important;
border:1px solid rgba(255,220,150,.32) !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-card{
padding:10px !important;
margin-bottom:10px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-image{
width:46px !important;
max-width:46px !important;
max-height:62px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-head b{
font-size:16px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-stats{
font-size:13px !important;
line-height:1.28 !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-description,
html.mobile-runtime #unitTrainingModalV2 .unit-requires,
html.mobile-runtime #unitTrainingModalV2 .unit-locked-note{
font-size:12px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-train-row{
grid-template-columns:auto auto !important;
gap:7px 12px !important;
font-size:13px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-count-input{
width:58px !important;
height:28px !important;
min-height:28px !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-train-button{
width:180px !important;
max-width:180px !important;
min-width:153px !important;
height:34px !important;
min-height:34px !important;
}
/* ============================================================
PHASE 20: mobile Barracks V2 stable layout
- The building modal now fills the safe mobile area with wood background,
so there is no black empty area when the training queue is empty.
- The modal body is the main scroll container.
- The training queue is an independent compact scroll block when it exists.
============================================================ */
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;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
transform:none !important;
box-sizing:border-box !important;
background:url('assets/menu/background.png') repeat !important;
z-index:19000 !important;
}
html.mobile-runtime #buildingModalV2 .game-modal-v2__header{
flex:0 0 auto !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;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding:12px 12px 18px 12px !important;
box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .building-v2-description{
text-align:center !important;
}
html.mobile-runtime #buildingModalV2 .building-v2-queue:empty{
display:none !important;
}
html.mobile-runtime #buildingModalV2 .building-v2-queue{
display:block !important;
margin:10px 0 0 0 !important;
padding:0 !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
}
html.mobile-runtime #buildingModalV2 .training-queue-box{
display:block !important;
max-height:clamp(120px, 26vh, 210px) !important;
min-height:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding:10px 12px !important;
margin:0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .training-queue-row{
min-height:48px !important;
padding:6px 0 !important;
}
/* ============================================================
ANDROID MOBILE FIX: Barracks V2 queue scroll
Работает только в mobile-runtime. Вся Казарма остаётся одним
fullscreen-окном, а очередь не блокируется масштабированием замка.
============================================================ */
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:auto !important;
width:100vw !important;
max-width:100vw !important;
height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
max-height:calc(var(--mobile-app-h, 100vh) - var(--mobile-bottom-bar-h, 92px) - env(safe-area-inset-bottom, 0px) - 6px) !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
background:url('assets/menu/background.png') repeat !important;
z-index:19000 !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;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
padding-bottom:18px !important;
}
html.mobile-runtime #buildingModalV2 .building-v2-queue{
display:block !important;
margin:10px 0 0 0 !important;
padding:0 !important;
max-height:none !important;
overflow:visible !important;
}
html.mobile-runtime #buildingModalV2 .training-queue-box{
display:block !important;
width:100% !important;
max-height:none !important;
overflow:visible !important;
-webkit-overflow-scrolling:auto !important;
touch-action:auto !important;
padding:8px 10px !important;
margin:0 0 12px 0 !important;
box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2 .training-queue-row{
min-height:46px !important;
padding:6px 0 !important;
}
/* ============================================================
ANDROID FIX: unit training V2 top separator spacing
The top border/separator of the training scroll area was too close
to the first unit card and visually overlapped the content on Android.
============================================================ */
html.mobile-runtime #unitTrainingModalV2 .unit-training-v2-scroll{
margin-top:12px !important;
padding-top:16px !important;
border-top-color:rgba(255,220,150,.22) !important;
}
html.mobile-runtime #unitTrainingModalV2 .unit-training-v2-scroll .unit-card:first-child{
margin-top:0 !important;
}
/* ============================================================
DESKTOP ONLY: styled scrollbar for Barracks training queue
Android/mobile uses its own native scrolling rules above.
============================================================ */
html:not(.mobile-runtime) #buildingModalV2 .training-queue-box{
scrollbar-width:thin;
scrollbar-color:#8a6a3d rgba(45,20,5,.55);
}
html:not(.mobile-runtime) #buildingModalV2 .training-queue-box::-webkit-scrollbar{
width:18px;
}
html:not(.mobile-runtime) #buildingModalV2 .training-queue-box::-webkit-scrollbar-track{
background:url('assets/menu/scroll_bg.png') repeat-y center top;
border-left:1px solid rgba(255,220,150,.18);
}
html:not(.mobile-runtime) #buildingModalV2 .training-queue-box::-webkit-scrollbar-thumb{
background:url('assets/menu/scroll.png') repeat-y center top;
border:0;
min-height:42px;
}
html:not(.mobile-runtime) #buildingModalV2 .training-queue-box::-webkit-scrollbar-button{
height:16px;
background:#4b260c;
}
/* ============================================================
V2 desktop polish: child market windows + aligned action grid
============================================================ */
@media (min-width:701px){
.game-modal-v2 .building-v2-actions-grid,
.game-modal-v2 .game-modal-v2-actions{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 280px)) !important;
justify-content:center !important;
justify-items:center !important;
align-items:center !important;
gap:12px 44px !important;
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
.game-modal-v2 .building-v2-actions-grid > .game-button,
.game-modal-v2 .game-modal-v2-actions > button,
.game-modal-v2 .game-modal-v2-actions > form,
.game-modal-v2 .game-modal-v2-actions > form > button{
width:280px !important;
min-width:280px !important;
max-width:280px !important;
box-sizing:border-box !important;
margin:0 !important;
}
}
/* ============================================================
HOTFIX: desktop V2 market button layout restore
Keeps Android/mobile rules untouched. The previous generic desktop
grid made the market buttons too wide and caused horizontal overflow.
============================================================ */
@media (min-width:701px){
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2__body{
overflow-x:hidden !important;
}
html:not(.mobile-runtime) #buildingModalV2 .market-main-actions.building-v2-actions-grid,
html:not(.mobile-runtime) #buildingModalV2 .market-v2-actions{
display:grid !important;
grid-template-columns:repeat(2, 220px) !important;
justify-content:center !important;
justify-items:center !important;
align-items:center !important;
gap:12px 48px !important;
width:auto !important;
max-width:520px !important;
margin:12px auto !important;
padding:0 !important;
box-sizing:border-box !important;
overflow:visible !important;
}
html:not(.mobile-runtime) #buildingModalV2 .market-main-actions.building-v2-actions-grid > .game-button,
html:not(.mobile-runtime) #buildingModalV2 .market-v2-actions > button,
html:not(.mobile-runtime) #buildingModalV2 .market-v2-actions > form,
html:not(.mobile-runtime) #buildingModalV2 .market-v2-actions > form > button{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:40px !important;
min-height:40px !important;
margin:0 !important;
padding:0 14px !important;
box-sizing:border-box !important;
line-height:normal !important;
}
html:not(.mobile-runtime) #buildingModalV2 .market-v2-actions > form{
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
}
}
/* ============================================================
HOTFIX: desktop V2 standard building action buttons
Market has its own compact grid above. Other buildings (Barracks,
HQ, etc.) should use the same compact button size and centered odd row.
Android/mobile rules are intentionally untouched.
============================================================ */
@media (min-width:701px){
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions){
display:grid !important;
grid-template-columns:repeat(2, 180px) !important;
justify-content:center !important;
justify-items:center !important;
align-items:center !important;
gap:12px 44px !important;
width:auto !important;
max-width:420px !important;
margin:14px auto 0 auto !important;
padding:0 !important;
box-sizing:border-box !important;
overflow:visible !important;
}
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions) > form,
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions) > button,
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions) > form > button{
width:180px !important;
min-width:180px !important;
max-width:180px !important;
height:40px !important;
min-height:40px !important;
margin:0 !important;
padding:0 14px !important;
box-sizing:border-box !important;
line-height:normal !important;
}
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions) > form{
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
}
html:not(.mobile-runtime) #buildingModalV2 .game-modal-v2-actions:not(.market-v2-actions) > :last-child:nth-child(odd){
grid-column:1 / -1 !important;
justify-self:center !important;
}
}
/* ============================================================
Android/mobile market child modals polish
- child market/trade windows should not look dimmed
- bottom Menu/Close bar must stay above these windows
- resource amount inputs in trade form align cleanly
Desktop rules are untouched.
============================================================ */
html.mobile-runtime .mobile-action-bar{
z-index:14000 !important;
display:flex !important;
}
html.mobile-runtime #tradeModal.is-open,
html.mobile-runtime #marketBuyModal.is-open,
html.mobile-runtime #marketSellModal.is-open,
html.mobile-runtime #marketMyLotsModal.is-open{
z-index:13200 !important;
opacity:1 !important;
filter:none !important;
background:url('assets/menu/background.png') repeat !important;
}
html.mobile-runtime #tradeModalBackdrop.is-open,
html.mobile-runtime #marketBuyModalBackdrop.is-open,
html.mobile-runtime #marketSellModalBackdrop.is-open,
html.mobile-runtime #marketMyLotsModalBackdrop.is-open{
z-index:13180 !important;
background:transparent !important;
opacity:0 !important;
pointer-events:none !important;
}
html.mobile-runtime #tradeModal.is-open .trade-scroll,
html.mobile-runtime #marketBuyModal.is-open .trade-scroll,
html.mobile-runtime #marketSellModal.is-open .trade-scroll,
html.mobile-runtime #marketMyLotsModal.is-open .trade-scroll{
bottom:calc(var(--mobile-bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
padding-bottom:18px !important;
opacity:1 !important;
filter:none !important;
}
html.mobile-runtime #tradeModal .trade-resource-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
width:100% !important;
max-width:430px !important;
margin:12px auto 10px auto !important;
}
html.mobile-runtime #tradeModal .trade-resource-grid label{
display:grid !important;
grid-template-columns:24px minmax(88px, 1fr) minmax(118px, 42vw) !important;
align-items:center !important;
justify-content:normal !important;
gap:8px !important;
width:100% !important;
margin:0 auto !important;
text-align:left !important;
color:#f4e7c9 !important;
font:bold 18px Arial, sans-serif !important;
}
html.mobile-runtime #tradeModal .trade-resource-grid img.trade-resource-icon,
html.mobile-runtime #tradeModal .trade-resource-grid label > img{
width:13px !important;
height:auto !important;
max-width:13px !important;
max-height:none !important;
justify-self:center !important;
}
html.mobile-runtime #tradeModal .trade-resource-grid input{
width:100% !important;
min-width:0 !important;
max-width:170px !important;
height:44px !important;
justify-self:start !important;
box-sizing:border-box !important;
font-size:20px !important;
}
html.mobile-runtime #tradeModal .trade-send-button{
display:block !important;
margin:12px auto 0 auto !important;
width:100% !important;
max-width:260px !important;
}
html.mobile-runtime #tradeModal .trade-coords-row{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:8px 12px !important;
text-align:center !important;
}
html.mobile-runtime #tradeModal .trade-coords-row > span{
flex:0 0 100% !important;
}
html.mobile-runtime #tradeModal .trade-coords-row label{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
margin:0 !important;
}
html.mobile-runtime #tradeModal .trade-coords-row input{
width:94px !important;
height:40px !important;
font-size:18px !important;
}
/* ============================================================
ANDROID/MOBILE SUBWINDOW V2 COMMON CONTAINER - clean override
База: визуально такой же тип окна, как V2 окно здания:
дерево снаружи, светлая scroll-подложка внутри, нижняя черная зона
под будущий bottom-topbar. Только Android/mobile.
============================================================ */
html.mobile-runtime{
--subwindow-header-h:92px;
--subwindow-bottom-h:92px;
--subwindow-side:14px;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open,
html.mobile-runtime body > #tradeModal.is-open,
html.mobile-runtime body > #marketBuyModal.is-open,
html.mobile-runtime body > #marketSellModal.is-open,
html.mobile-runtime body > #marketMyLotsModal.is-open{
position:fixed !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
transform:none !important;
width:100vw !important;
max-width:100vw !important;
min-width:0 !important;
height:var(--mobile-app-h, 100vh) !important;
max-height:var(--mobile-app-h, 100vh) !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:url('assets/menu/background.png') repeat !important;
z-index:14000 !important;
color:#2a170c !important;
}
/* затемнение выключаем для дочерних окон, чтобы оно не делало окно "неактивным" */
html.mobile-runtime #unitTrainingModalV2Backdrop.is-open,
html.mobile-runtime body > #tradeModalBackdrop.is-open,
html.mobile-runtime body > #marketBuyModalBackdrop.is-open,
html.mobile-runtime body > #marketSellModalBackdrop.is-open,
html.mobile-runtime body > #marketMyLotsModalBackdrop.is-open{
display:none !important;
opacity:0 !important;
pointer-events:none !important;
}
/* единая шапка */
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open > .game-modal-v2__header,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__header,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__header,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__header,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__header{
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
width:100% !important;
height:var(--subwindow-header-h) !important;
min-height:var(--subwindow-header-h) !important;
margin:0 !important;
padding:0 72px 0 20px !important;
box-sizing:border-box !important;
background:url('assets/menu/background.png') repeat !important;
border:0 !important;
border-bottom:3px solid rgba(211,161,78,.85) !important;
box-shadow:0 2px 0 rgba(0,0,0,.45) !important;
z-index:6 !important;
overflow:hidden !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open > .game-modal-v2__header::before,
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open > .game-modal-v2__header::after,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__header::before,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__header::after,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__header::before,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__header::after,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__header::before,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__header::after,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__header::before,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__header::after{
content:none !important;
display:none !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .game-modal-v2__title,
html.mobile-runtime body > #tradeModal.is-open .ui-modal__title,
html.mobile-runtime body > #marketBuyModal.is-open .ui-modal__title,
html.mobile-runtime body > #marketSellModal.is-open .ui-modal__title,
html.mobile-runtime body > #marketMyLotsModal.is-open .ui-modal__title,
html.mobile-runtime body > #tradeModal.is-open .modal-title,
html.mobile-runtime body > #marketBuyModal.is-open .modal-title,
html.mobile-runtime body > #marketSellModal.is-open .modal-title,
html.mobile-runtime body > #marketMyLotsModal.is-open .modal-title{
display:block !important;
width:100% !important;
height:var(--subwindow-header-h) !important;
line-height:var(--subwindow-header-h) !important;
margin:0 !important;
padding:0 !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size:24px !important;
font-weight:700 !important;
color:#ffe9a8 !important;
text-shadow:0 2px 2px #000 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .game-modal-v2__close,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__close,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__close,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__close,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__close,
html.mobile-runtime body > #tradeModal.is-open > .modal-close,
html.mobile-runtime body > #marketBuyModal.is-open > .modal-close,
html.mobile-runtime body > #marketSellModal.is-open > .modal-close,
html.mobile-runtime body > #marketMyLotsModal.is-open > .modal-close{
position:absolute !important;
right:14px !important;
top:18px !important;
left:auto !important;
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
z-index:10 !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .modal-corner,
html.mobile-runtime body > #tradeModal.is-open .modal-corner,
html.mobile-runtime body > #marketBuyModal.is-open .modal-corner,
html.mobile-runtime body > #marketSellModal.is-open .modal-corner,
html.mobile-runtime body > #marketMyLotsModal.is-open .modal-corner{
display:none !important;
}
/* единая светлая прокручиваемая область */
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open > .unit-training-v2-scroll,
html.mobile-runtime body > #tradeModal.is-open > .modal-scroll,
html.mobile-runtime body > #marketBuyModal.is-open > .modal-scroll,
html.mobile-runtime body > #marketSellModal.is-open > .modal-scroll,
html.mobile-runtime body > #marketMyLotsModal.is-open > .modal-scroll,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__body,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__body,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__body,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__body{
position:absolute !important;
left:var(--subwindow-side) !important;
right:var(--subwindow-side) !important;
top:calc(var(--subwindow-header-h) + 14px) !important;
bottom:calc(var(--subwindow-bottom-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
width:auto !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
min-width:0 !important;
min-height:0 !important;
margin:0 !important;
padding:18px 18px 44px 18px !important;
box-sizing:border-box !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain !important;
touch-action:pan-y !important;
background:rgba(198,158,117,.78) !important;
border:2px solid rgba(230,195,125,.40) !important;
border-radius:0 !important;
box-shadow:inset 0 0 0 1px rgba(64,32,12,.28) !important;
z-index:2 !important;
color:#2a170c !important;
scrollbar-width:none !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open > .unit-training-v2-scroll::-webkit-scrollbar,
html.mobile-runtime body > #tradeModal.is-open > .modal-scroll::-webkit-scrollbar,
html.mobile-runtime body > #marketBuyModal.is-open > .modal-scroll::-webkit-scrollbar,
html.mobile-runtime body > #marketSellModal.is-open > .modal-scroll::-webkit-scrollbar,
html.mobile-runtime body > #marketMyLotsModal.is-open > .modal-scroll::-webkit-scrollbar,
html.mobile-runtime body > #tradeModal.is-open > .ui-modal__body::-webkit-scrollbar,
html.mobile-runtime body > #marketBuyModal.is-open > .ui-modal__body::-webkit-scrollbar,
html.mobile-runtime body > #marketSellModal.is-open > .ui-modal__body::-webkit-scrollbar,
html.mobile-runtime body > #marketMyLotsModal.is-open > .ui-modal__body::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
/* внутренние списки больше не имеют собственных scroll/позиционирования */
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open #unitTrainingListV2,
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open #unitTrainingList,
html.mobile-runtime body > #tradeModal.is-open .trade-scroll,
html.mobile-runtime body > #tradeModal.is-open #tradeMovementsList,
html.mobile-runtime body > #tradeModal.is-open #incomingTradeMovementsList,
html.mobile-runtime body > #marketBuyModal.is-open .trade-scroll,
html.mobile-runtime body > #marketBuyModal.is-open #marketLotsList,
html.mobile-runtime body > #marketSellModal.is-open .trade-scroll,
html.mobile-runtime body > #marketMyLotsModal.is-open .trade-scroll,
html.mobile-runtime body > #marketMyLotsModal.is-open #myMarketLotsList{
position:static !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
height:auto !important;
max-height:none !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
transform:none !important;
box-sizing:border-box !important;
}
/* карточки в одном стиле */
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .unit-card,
html.mobile-runtime body > #tradeModal.is-open .trade-card,
html.mobile-runtime body > #tradeModal.is-open .trade-movement-row,
html.mobile-runtime body > #marketBuyModal.is-open .trade-lot-card,
html.mobile-runtime body > #marketSellModal.is-open .trade-lot-form,
html.mobile-runtime body > #marketMyLotsModal.is-open .trade-lot-card{
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 0 18px 0 !important;
padding:16px !important;
box-sizing:border-box !important;
background:rgba(96,58,28,.28) !important;
border:1px solid rgba(80,40,14,.35) !important;
border-radius:10px !important;
color:#2a170c !important;
box-shadow:none !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .unit-card:first-child,
html.mobile-runtime body > #marketBuyModal.is-open .trade-lot-card:first-child,
html.mobile-runtime body > #marketMyLotsModal.is-open .trade-lot-card:first-child,
html.mobile-runtime body > #tradeModal.is-open .trade-movement-row:first-child{
margin-top:0 !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .unit-card:last-child,
html.mobile-runtime body > #marketBuyModal.is-open .trade-lot-card:last-child,
html.mobile-runtime body > #marketMyLotsModal.is-open .trade-lot-card:last-child,
html.mobile-runtime body > #tradeModal.is-open .trade-movement-row:last-child{
margin-bottom:52px !important;
}
/* нижняя черная зона под будущий нижний бар */
html.mobile-runtime .mobile-action-bar{
display:flex !important;
height:calc(var(--subwindow-bottom-h) + env(safe-area-inset-bottom, 0px)) !important;
min-height:calc(var(--subwindow-bottom-h) + env(safe-area-inset-bottom, 0px)) !important;
background:linear-gradient(to bottom, rgba(18,10,5,.82), rgba(0,0,0,.96)) !important;
border-top:2px solid rgba(197,151,72,.42) !important;
z-index:20000 !important;
}
/* кнопки и поля внутри подокон */
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .game-button,
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .unit-train-button,
html.mobile-runtime body > #tradeModal.is-open .game-button,
html.mobile-runtime body > #tradeModal.is-open .trade-send-button,
html.mobile-runtime body > #marketBuyModal.is-open .game-button,
html.mobile-runtime body > #marketSellModal.is-open .game-button,
html.mobile-runtime body > #marketMyLotsModal.is-open .game-button,
html.mobile-runtime body > #marketMyLotsModal.is-open .trade-cancel-button{
width:100% !important;
max-width:330px !important;
min-width:0 !important;
margin:10px auto 0 auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open .unit-train-row,
html.mobile-runtime body > #tradeModal.is-open .trade-resource-grid,
html.mobile-runtime body > #marketSellModal.is-open .trade-lot-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
}
html.mobile-runtime #unitTrainingModalV2.unit-training-modal-v2.is-open input,
html.mobile-runtime body > #tradeModal.is-open input,
html.mobile-runtime body > #tradeModal.is-open select,
html.mobile-runtime body > #marketBuyModal.is-open input,
html.mobile-runtime body > #marketBuyModal.is-open select,
html.mobile-runtime body > #marketSellModal.is-open input,
html.mobile-runtime body > #marketSellModal.is-open select,
html.mobile-runtime body > #marketMyLotsModal.is-open input,
html.mobile-runtime body > #marketMyLotsModal.is-open select{
max-width:320px !important;
box-sizing:border-box !important;
}
/* ANDROID/MOBILE SUBWINDOWS: use the same working Building V2 window.
The real old modal content is temporarily moved into #buildingModalV2Body,
so IDs/forms stay unique and JS logic keeps working. */
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow{
display:flex !important;
flex-direction:column !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow #buildingModalV2Body.game-modal-v2__body--subwindow{
position:relative !important;
display:block !important;
flex:1 1 auto !important;
min-height:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
padding:0 28px 138px 28px !important;
box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent{
position:static !important;
inset:auto !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
display:block !important;
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
overflow:visible !important;
padding:16px 24px 28px 24px !important;
margin:0 auto !important;
box-sizing:border-box !important;
background:rgba(204, 164, 118, 0.72) !important;
border:2px solid rgba(255, 232, 170, 0.22) !important;
border-radius:8px !important;
box-shadow:inset 0 0 0 1px rgba(72,35,12,.24) !important;
color:#24160f !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent::before,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent::after{
display:none !important;
content:none !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent > .ui-modal__header,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent > .modal-title,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .modal-corner,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .modal-close{
display:none !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .training-queue-title{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
margin:6px 0 12px 0 !important;
padding:0 !important;
text-align:center !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-lot-card,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .unit-card,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-lot-form,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .training-queue-box,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-queue-box{
max-width:100% !important;
box-sizing:border-box !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .unit-card{
margin:0 0 18px 0 !important;
padding:16px 18px !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .unit-training-scroll,
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-scroll{
overflow:visible !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-resource-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
align-items:center !important;
justify-items:center !important;
max-width:420px !important;
margin:14px auto !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-resource-grid label{
display:grid !important;
grid-template-columns:24px 120px minmax(110px, 170px) !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
gap:8px !important;
text-align:left !important;
}
html.mobile-runtime #buildingModalV2.game-modal-v2--subwindow .mobile-building-v2-subcontent .trade-resource-grid input{
width:100% !important;
box-sizing:border-box !important;
}
/* ============================================================
BUILD SELECTION WINDOW V2
------------------------------------------------------------
The new-building picker now uses the same game-modal-v2 shell
as building info windows. The legacy #buildModal remains only
as fallback for old scripts.
============================================================ */
.game-modal-v2--build-select{
width:520px !important;
max-width:calc(100vw - 40px) !important;
}
.game-modal-v2__body--build-select{
padding:12px 14px 16px 14px !important;
}
.build-v2-selection-list{
display:flex;
flex-direction:column;
gap:10px;
width:100%;
box-sizing:border-box;
}
.game-modal-v2 .build-choice-card{
width:100% !important;
margin:0 !important;
padding:10px 11px !important;
background:rgba(189,151,113,.45) !important;
border:1px solid rgba(70,35,10,.35) !important;
border-radius:8px !important;
box-sizing:border-box !important;
color:#2b1708 !important;
}
.game-modal-v2 .build-choice-card-locked{
opacity:.78 !important;
}
.game-modal-v2 .build-choice-head{
display:grid !important;
grid-template-columns:58px 1fr !important;
align-items:center !important;
gap:11px !important;
margin-bottom:7px !important;
}
.game-modal-v2 .build-choice-image{
width:54px !important;
max-height:62px !important;
object-fit:contain !important;
}
.game-modal-v2 .build-choice-main b{
color:#fff0bd !important;
text-shadow:1px 1px 2px #000 !important;
font-size:17px !important;
}
.game-modal-v2 .build-choice-meta,
.game-modal-v2 .build-choice-description,
.game-modal-v2 .build-choice-locked-note{
color:#2b1708 !important;
text-shadow:none !important;
}
.game-modal-v2 .build-choice-meta{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:3px 10px !important;
font-size:13px !important;
line-height:1.3 !important;
margin:7px 0 !important;
}
.game-modal-v2 .build-choice-description{
text-align:center !important;
font-size:13px !important;
line-height:1.3 !important;
margin:8px auto 0 auto !important;
}
.game-modal-v2 .build-choice-locked-note{
text-align:center !important;
color:#5b1c10 !important;
font-weight:bold !important;
margin-top:8px !important;
}
.game-modal-v2 .build-choice-form{
display:flex !important;
justify-content:center !important;
margin:9px auto 0 auto !important;
}
.game-modal-v2 .build-choice-button{
width:153px !important;
min-width:153px !important;
max-width:180px !important;
height:30px !important;
}
/* ============================================================
Experimental responsive building page test
============================================================ */
.building-responsive-test-page .building-page-layout-test{align-items:start;}
.building-page-card-test h2,.building-training-page-test h2{text-align:center;}
.building-page-info-test{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:6px 0 12px;}
.building-page-image-test{width:96px;height:96px;object-fit:contain;image-rendering:auto;}
.building-page-facts-test{min-width:220px;max-width:340px;flex:1 1 240px;}
.building-page-cost-test{justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0;}
/* STEP338: полоса прогресса строительства/улучшения/сноса — тот же стиль, что и у
Советника (advisor.php), переиспользуется на всех страницах зданий. */
.nwind-build-progress-bar{height:10px;border-radius:6px;background:rgba(0,0,0,.35);overflow:hidden;margin:8px 0 4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4);}
.nwind-build-progress-fill{height:100%;background:linear-gradient(90deg,#f2d985,#9a6723);transition:width 1s linear;}
.building-page-description-test{text-align:center;color:#fff1c5;line-height:1.45;margin:12px auto;max-width:720px;}
.building-page-actions-test{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.building-page-actions-test .game-button{min-width:153px;}
.building-page-queue-test{display:flex;flex-direction:column;gap:8px;}
.building-test-note{text-align:center;margin:-4px 0 12px;}
.unit-page-card-grid-test{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.unit-page-card-test{margin:0 !important;}
.unit-page-head-test{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.unit-page-image-test{width:var(--unit-page-image-size, 72px);height:var(--unit-page-image-size, 72px);object-fit:contain;flex:0 0 auto;}
.unit-page-head-test h3{margin:0 0 6px;color:#ffe7a3;text-shadow:1px 1px #000;font-size:18px;}
/* STEP294: юнит теперь показывается картинкой сверху по центру, название и стоимость
ниже (тоже по центру) — вместо прежнего расположения "картинка сбоку от текста".
Размер картинки регулируется в config/unit_page_image_config.php через
CSS-переменные --unit-page-image-size / --unit-page-image-size-mobile. */
.unit-page-head-stacked-test{flex-direction:column;text-align:center;align-items:center;gap:8px;}
.unit-page-head-stacked-test h3{margin:0 0 4px;}
.unit-page-cost-test{gap:8px;flex-wrap:wrap;}
.unit-page-stats-test{grid-template-columns:repeat(3,1fr);margin:10px 0;}
.unit-page-desc-test{min-height:42px;line-height:1.4;}
.unit-page-form-test{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.unit-page-form-test input[type="number"]{width:76px;text-align:center;padding:7px 8px;}
.unit-page-form-test .game-button{min-width:145px;}
@media (max-width:760px){
.building-responsive-test-page .account-header{align-items:flex-start;flex-direction:column;}
.building-page-info-test{align-items:center;}
.building-page-image-test{width:82px;height:82px;}
.building-page-actions-test .game-button{min-width:140px;}
.unit-page-card-grid-test{grid-template-columns:1fr;}
.unit-page-head-test{align-items:center;}
.unit-page-image-test{width:var(--unit-page-image-size-mobile, 64px);height:var(--unit-page-image-size-mobile, 64px);}
.unit-page-stats-test{grid-template-columns:repeat(2,1fr);}
.unit-page-form-test{flex-direction:column;gap:8px;}
}
/* ============================================================
Responsive building page test - narrow desktop variant
This test page intentionally uses a phone-like vertical layout
even on desktop, so it can be compared with the V2 overlay UI.
============================================================ */
.building-responsive-test-page{
max-width:760px !important;
width:calc(100% - 32px) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.building-responsive-test-page .account-header{
align-items:center !important;
text-align:center !important;
gap:12px !important;
}
.building-responsive-test-page .building-page-layout-test{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
.building-responsive-test-page .unit-page-card-grid-test{
grid-template-columns:1fr !important;
max-width:680px !important;
margin:0 auto !important;
}
.building-responsive-test-page .account-card{
width:100% !important;
box-sizing:border-box !important;
}
.building-responsive-test-page .building-page-info-test{
max-width:620px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.building-responsive-test-page .building-page-facts-test{
flex:0 1 360px !important;
}
.building-responsive-test-page .unit-page-head-test{
justify-content:center !important;
}
.building-responsive-test-page .unit-page-head-test > div{
min-width:0 !important;
}
.building-responsive-test-page .unit-page-form-test{
max-width:460px !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media (min-width:900px){
.building-responsive-test-page{
max-width:720px !important;
}
}
@media (max-width:760px){
.building-responsive-test-page{
width:calc(100% - 20px) !important;
max-width:none !important;
}
}
/* ============================================================
Responsive building page test - unit list polish
============================================================ */
.building-responsive-test-page .building-training-page-test{
background:
linear-gradient(rgba(70, 36, 13, 0.30), rgba(25, 12, 4, 0.20)),
rgba(42, 20, 7, 0.52) !important;
border:1px solid rgba(255,220,130,0.32) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 3px 10px rgba(0,0,0,0.28) !important;
}
.building-responsive-test-page .unit-page-card-grid-test{
padding:10px !important;
border-radius:10px !important;
background:rgba(20, 10, 4, 0.28) !important;
border:1px solid rgba(255,220,130,0.18) !important;
box-sizing:border-box !important;
}
@media (min-width:761px){
.building-responsive-test-page .unit-page-card-grid-test{
max-height:620px !important;
overflow-y:auto !important;
padding-right:12px !important;
scrollbar-width:thin;
scrollbar-color:#b89245 rgba(35, 18, 6, 0.55);
}
.building-responsive-test-page .unit-page-card-grid-test::-webkit-scrollbar{width:10px;}
.building-responsive-test-page .unit-page-card-grid-test::-webkit-scrollbar-track{
background:rgba(35,18,6,.55);
border-radius:8px;
box-shadow:inset 0 0 3px rgba(0,0,0,.55);
}
.building-responsive-test-page .unit-page-card-grid-test::-webkit-scrollbar-thumb{
background:linear-gradient(#e0c172,#8c6122);
border:1px solid #3a2109;
border-radius:8px;
}
}
.building-responsive-test-page .unit-page-card-test{
background:rgba(66, 35, 14, 0.58) !important;
border:1px solid rgba(255,220,130,0.35) !important;
border-radius:10px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 2px 7px rgba(0,0,0,0.25) !important;
}
.building-responsive-test-page .unit-page-stats-test{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
margin:10px auto !important;
max-width:420px !important;
}
.building-responsive-test-page .unit-page-stat-row-test{
display:grid !important;
grid-template-columns:22px 1fr auto !important;
align-items:center !important;
gap:8px !important;
min-height:28px !important;
padding:4px 8px !important;
box-sizing:border-box !important;
border-radius:6px !important;
background:rgba(18, 9, 3, 0.26) !important;
border:1px solid rgba(255,220,130,0.16) !important;
color:#f7e7c4 !important;
text-shadow:1px 1px 1px rgba(0,0,0,.65) !important;
}
.building-responsive-test-page .unit-page-stat-row-test img{
width:18px !important;
height:18px !important;
object-fit:contain !important;
display:block !important;
}
.building-responsive-test-page .unit-page-stat-row-test span{
text-align:left !important;
font-size:13px !important;
}
.building-responsive-test-page .unit-page-stat-row-test b{
color:#ffe7a3 !important;
font-size:14px !important;
}
@media (max-width:760px){
.building-responsive-test-page .unit-page-card-grid-test{
max-height:none !important;
overflow:visible !important;
padding:8px !important;
}
.building-responsive-test-page .unit-page-stats-test{
max-width:100% !important;
}
.building-responsive-test-page .unit-page-stat-row-test{
grid-template-columns:22px 1fr auto !important;
min-height:30px !important;
}
}
/* ============================================================
Responsive building page test - contrast + separated screens
============================================================ */
.building-responsive-test-page .account-card{
background:
linear-gradient(rgba(98, 55, 20, 0.38), rgba(33, 15, 5, 0.30)),
rgba(54, 27, 9, 0.70) !important;
border:1px solid rgba(255, 218, 132, 0.42) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.14),
0 4px 12px rgba(0,0,0,0.32) !important;
}
.building-responsive-test-page .building-page-card-test,
.building-responsive-test-page .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, 0.78) !important;
}
.building-responsive-test-page .building-page-image-test,
.building-responsive-test-page .unit-page-image-test{
filter:contrast(1.12) saturate(1.12) brightness(1.04);
background:rgba(22, 10, 3, .30);
border:1px solid rgba(255,220,130,.22);
border-radius:10px;
box-shadow:inset 0 0 12px rgba(255,220,130,.10), 0 2px 8px rgba(0,0,0,.30);
padding:4px;
box-sizing:border-box;
}
.building-responsive-test-page .building-page-facts-test{
background:rgba(18, 8, 2, 0.28);
border:1px solid rgba(255,220,130,.18);
border-radius:10px;
padding:8px;
box-sizing:border-box;
}
.building-responsive-test-page .unit-page-card-test{
background:
linear-gradient(rgba(92, 50, 18, 0.42), rgba(31, 14, 4, 0.30)),
rgba(61, 31, 10, 0.76) !important;
border:1px solid rgba(255, 220, 130, 0.44) !important;
}
.building-responsive-test-page .unit-page-stats-test{
background:rgba(12, 6, 2, 0.20);
border:1px solid rgba(255,220,130,.14);
border-radius:10px;
padding:8px;
box-sizing:border-box;
}
.building-responsive-test-page .unit-page-stat-row-test{
background:rgba(9, 4, 1, 0.34) !important;
border-color:rgba(255, 225, 145, 0.22) !important;
}
.building-responsive-test-page .building-page-queue-test{
max-height:210px;
overflow-y:auto;
padding:8px;
border-radius:10px;
background:rgba(14, 7, 2, .22);
border:1px solid rgba(255,220,130,.16);
box-sizing:border-box;
}
.building-responsive-test-page .building-training-top-actions-test{
margin:8px auto 14px !important;
}
.training-started-overlay-test{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(0,0,0,.48);
box-sizing:border-box;
}
.training-started-box-test{
width:min(420px, calc(100vw - 34px));
text-align:center;
padding:18px 16px 16px;
border-radius:14px;
background:
radial-gradient(circle at 50% 0%, rgba(255,226,145,.18), transparent 50%),
linear-gradient(#5b3312, #281206);
border:2px solid rgba(216, 178, 96, .90);
box-shadow:0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
color:#f7e7c4;
}
.training-started-box-test h3{
margin:0 0 8px;
color:#ffe7a3;
text-shadow:1px 1px #000;
}
.training-started-box-test p{
margin:0 auto 14px;
line-height:1.45;
}
@media (max-width:760px){
.building-responsive-test-page .building-page-queue-test{
max-height:160px !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}
.building-responsive-test-page .unit-page-card-grid-test{
background:rgba(20,10,4,.34) !important;
border-color:rgba(255,220,130,.24) !important;
}
.building-responsive-test-page .unit-page-form-test input[type="number"]{
width:64px !important;
max-width:64px !important;
height:30px !important;
padding:4px 6px !important;
box-sizing:border-box !important;
}
.training-started-box-test{
padding:16px 14px 14px;
}
}
/* ============================================================
Responsive building page test - final scroll/confirm polish
============================================================ */
.building-responsive-test-page{
overflow-x:hidden !important;
}
.building-responsive-test-page .building-page-queue-test{
scrollbar-width:thin !important;
scrollbar-color:#d7b764 rgba(35,18,6,.58) !important;
}
.building-responsive-test-page .building-page-queue-test::-webkit-scrollbar{
width:10px !important;
}
.building-responsive-test-page .building-page-queue-test::-webkit-scrollbar-track{
background:rgba(35,18,6,.58) !important;
border-radius:8px !important;
box-shadow:inset 0 0 4px rgba(0,0,0,.55) !important;
}
.building-responsive-test-page .building-page-queue-test::-webkit-scrollbar-thumb{
background:linear-gradient(#f2d985,#9a6723) !important;
border:1px solid #3a2109 !important;
border-radius:8px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.building-responsive-test-page .building-page-queue-test .message-list-item{
flex:0 0 auto !important;
}
.training-started-overlay-test{
display:none !important;
}
.training-started-overlay-test.is-visible{
display:flex !important;
}
.training-started-box-test [data-training-ok]{
min-width:130px !important;
margin:0 auto !important;
}
@media (min-width:761px){
.building-responsive-test-page .building-page-queue-test{
max-height:235px !important;
padding-right:10px !important;
}
}
@media (max-width:760px){
.building-responsive-test-page{
min-height:100dvh !important;
box-sizing:border-box !important;
}
.building-responsive-test-page .building-page-queue-test{
max-height:230px !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
-webkit-overflow-scrolling:touch !important;
}
.training-started-overlay-test{
align-items:center !important;
justify-content:center !important;
min-height:100dvh !important;
}
}
/* ============================================================
Responsive building test - resource pills + queue icons/timers
============================================================ */
.building-responsive-test-page .resource-pill-test{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
min-height:24px !important;
padding:4px 8px !important;
border-radius:9px !important;
background:
linear-gradient(rgba(106, 57, 20, .58), rgba(31, 14, 4, .42)),
rgba(24, 11, 3, .62) !important;
border:1px solid rgba(255, 223, 142, .34) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 1px 4px rgba(0,0,0,.24) !important;
color:#ffe8ad !important;
text-shadow:1px 1px 1px rgba(0,0,0,.80) !important;
font-weight:bold !important;
box-sizing:border-box !important;
}
.building-responsive-test-page .resource-pill-test img{
width:auto !important;
height:auto !important;
max-width:18px !important;
max-height:18px !important;
object-fit:contain !important;
flex:0 0 auto !important;
filter:contrast(1.08) saturate(1.12) !important;
}
.building-responsive-test-page .building-page-cost-test{
padding:8px !important;
border-radius:12px !important;
background:rgba(14, 7, 2, .20) !important;
border:1px solid rgba(255, 220, 130, .14) !important;
}
.building-responsive-test-page .unit-page-cost-test{
justify-content:center !important;
padding:6px !important;
border-radius:10px !important;
background:rgba(14, 7, 2, .18) !important;
border:1px solid rgba(255, 220, 130, .12) !important;
}
.building-responsive-test-page .building-queue-row-test{
display:grid !important;
grid-template-columns:42px 1fr !important;
align-items:center !important;
gap:10px !important;
min-height:46px !important;
padding:7px 9px !important;
border-radius:10px !important;
background:
linear-gradient(rgba(84, 44, 15, .42), rgba(24, 11, 3, .28)),
rgba(30, 14, 4, .60) !important;
border:1px solid rgba(255, 220, 130, .24) !important;
box-sizing:border-box !important;
}
.building-responsive-test-page .building-queue-unit-icon-test{
width:38px !important;
height:38px !important;
object-fit:contain !important;
display:block !important;
border-radius:8px !important;
background:rgba(8, 4, 1, .35) !important;
border:1px solid rgba(255,220,130,.18) !important;
padding:2px !important;
box-sizing:border-box !important;
filter:contrast(1.08) saturate(1.08) !important;
}
.building-responsive-test-page .building-queue-row-test .message-list-main{
min-width:0 !important;
}
.building-responsive-test-page .queue-countdown-test{
color:#ffe7a3 !important;
font-variant-numeric:tabular-nums !important;
letter-spacing:.2px !important;
}
@media (max-width:760px){
.building-responsive-test-page .resource-pill-test{
min-height:23px !important;
padding:4px 7px !important;
font-size:13px !important;
}
.building-responsive-test-page .building-page-queue-test{
max-height:260px !important;
}
.building-responsive-test-page .building-queue-row-test{
grid-template-columns:40px 1fr !important;
min-height:45px !important;
padding:7px 8px !important;
}
.building-responsive-test-page .building-queue-unit-icon-test{
width:36px !important;
height:36px !important;
}
}
/* ============================================================
Responsive real building page - V2 data compatibility fixes
============================================================ */
.building-responsive-test-page .building-main-actions-test{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
max-width:460px !important;
margin:14px auto 0 !important;
align-items:center !important;
}
.building-responsive-test-page .building-main-actions-test form{
margin:0 !important;
width:100% !important;
}
.building-responsive-test-page .building-main-actions-test .game-button{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.building-responsive-test-page .building-main-actions-test form:first-child:last-child,
.building-responsive-test-page .building-main-actions-test > .game-button:first-child:last-child{
grid-column:1 / -1 !important;
}
.building-responsive-test-page .unit-page-head-test{
display:grid !important;
grid-template-columns:76px minmax(0,1fr) !important;
align-items:center !important;
justify-content:stretch !important;
}
/* STEP294: у новой "столбиковой" шапки (картинка сверху по центру, название под ней)
предыдущее правило выше принудительно ставило grid с боковой колонкой под картинку
— здесь явно переключаем именно эту раскладку обратно на вертикальный flex. */
.building-responsive-test-page .unit-page-head-stacked-test{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
text-align:center !important;
align-items:center !important;
}
.building-responsive-test-page .unit-page-head-stacked-test h3{
text-align:center !important;
}
.building-responsive-test-page .unit-page-head-test > div{
min-width:0 !important;
}
.building-responsive-test-page .unit-page-head-test:not(.unit-page-head-stacked-test) h3{
text-align:left !important;
}
.building-responsive-test-page .unit-page-image-test{
width:var(--unit-page-image-size, 72px) !important;
height:var(--unit-page-image-size, 72px) !important;
}
.building-responsive-test-page .unit-page-form-test label{
white-space:nowrap !important;
}
@media (max-width:760px){
.building-responsive-test-page .building-main-actions-test{
grid-template-columns:1fr !important;
max-width:280px !important;
}
.building-responsive-test-page .unit-page-head-test{
grid-template-columns:66px minmax(0,1fr) !important;
gap:10px !important;
}
.building-responsive-test-page .unit-page-head-stacked-test{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
text-align:center !important;
}
.building-responsive-test-page .unit-page-image-test{
width:var(--unit-page-image-size-mobile, 64px) !important;
height:var(--unit-page-image-size-mobile, 64px) !important;
}
}
/* NWIND responsive page buttons/modals */
.building-responsive-test-page .nwind-upgrade-row{display:flex;justify-content:center;margin:14px 0 10px;}
.building-responsive-test-page .nwind-manage-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px;}
.building-responsive-test-page .nwind-demolish-row{display:flex;justify-content:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,204,102,.22);}
.building-responsive-test-page .nwind-upgrade-btn{background:linear-gradient(180deg,#2f7d25,#175a16);border-color:#b8e35a;color:#fff7c8;box-shadow:0 0 0 1px rgba(184,227,90,.25),0 3px 8px rgba(0,0,0,.35);min-width:190px;}
.building-responsive-test-page .nwind-upgrade-btn:hover{filter:brightness(1.12);}
.building-responsive-test-page .nwind-inline-form{display:inline-block;margin:0;}
.building-responsive-test-page .nwind-modal-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
.building-responsive-test-page .nwind-cancel-btn{background:linear-gradient(#523015,#271204);}
@media(max-width:700px){.building-responsive-test-page .nwind-manage-row{flex-direction:column;align-items:stretch}.building-responsive-test-page .nwind-manage-row .game-button,.building-responsive-test-page .nwind-demolish-row .game-button,.building-responsive-test-page .nwind-upgrade-btn{width:100%;}}
/* NWIND: fixed action button colors/order */
.building-responsive-test-page .nwind-upgrade-btn,
.building-responsive-test-page .nwind-upgrade-btn.game-button,
.building-responsive-test-page .nwind-upgrade-btn.info-action-button{
background: linear-gradient(180deg,#39a735 0%,#258020 52%,#155914 100%) !important;
border-color: #b8e35a !important;
color: #fff7c8 !important;
box-shadow: 0 0 0 1px rgba(184,227,90,.30), 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18) !important;
min-width: 190px;
}
.building-responsive-test-page .nwind-upgrade-btn:hover,
.building-responsive-test-page .nwind-upgrade-btn.game-button:hover{
filter: brightness(1.12);
}
.building-responsive-test-page .nwind-demolish-row{
display:flex;
justify-content:center;
margin:12px 0 0;
padding-top:12px;
border-top:1px solid rgba(255,204,102,.22);
}
.building-responsive-test-page .nwind-manage-row + .nwind-demolish-row{
margin-top:12px;
}
.building-responsive-test-page .nwind-faq-build-row{
display:flex;
justify-content:center;
margin-top:10px;
}
/* ============================================================
NWind training unit description polish
============================================================ */
.building-responsive-test-page .unit-page-desc-test{
display:block !important;
width:100% !important;
max-width:420px !important;
min-height:0 !important;
margin:10px auto 12px !important;
padding:9px 12px !important;
box-sizing:border-box !important;
text-align:center !important;
line-height:1.45 !important;
color:#f3dfb3 !important;
background:rgba(14, 7, 2, 0.30) !important;
border:1px solid rgba(255, 220, 130, 0.28) !important;
border-radius:10px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.18) !important;
text-shadow:1px 1px 1px rgba(0,0,0,.58) !important;
}
.building-responsive-test-page .unit-page-desc-test:empty{
display:none !important;
}
@media (max-width:760px){
.building-responsive-test-page .unit-page-desc-test{
max-width:100% !important;
margin:9px auto 11px !important;
padding:8px 10px !important;
}
}
/* ============================================================
NWIND desktop shell: castle and new pages share top/bottom HUD
============================================================ */
@media (min-width: 761px){
body.castle-nwind-shell{
min-width:0 !important;
overflow-x:hidden !important;
padding-bottom:108px !important;
}
body.castle-nwind-shell .game-topbar-right{
display:none !important;
}
body.castle-nwind-shell .game-topbar,
body.nwind-page-shell .game-topbar.nwind-topbar-only{
min-height:112px !important;
margin-bottom:10px !important;
}
body.castle-nwind-shell .game-topbar-center,
body.nwind-page-shell .game-topbar-center{
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
min-width:720px !important;
}
body.castle-nwind-shell .game.castle-screen{
width:760px !important;
height:720px !important;
margin:14px auto 112px !important;
border:1px solid rgba(255,204,102,.62) !important;
background:#247714 !important;
overflow:hidden !important;
}
body.castle-nwind-shell .castle-field{
left:-120px !important;
top:74px !important;
}
body.castle-nwind-shell .build-panel,
body.castle-nwind-shell .build-panel-hidden,
body.castle-nwind-shell > .msg{
display:none !important;
}
body.castle-nwind-shell .nwind-bottom-bar,
body.nwind-page-shell .nwind-bottom-bar{
display:flex !important;
}
body.nwind-page-shell{
min-width:0 !important;
padding-bottom:108px !important;
overflow-x:hidden !important;
}
body.nwind-page-shell .top{
display:none !important;
}
body.nwind-page-shell .account-page.building-responsive-test-page{
margin-top:14px !important;
}
}
/* ============================================================
NWIND shell cleanup: remove legacy mobile panels on desktop,
center new page headers, and make castle viewport framed.
============================================================ */
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;
}
body.castle-nwind-shell.mobile-settings-open,
body.castle-nwind-shell.mobile-menu-open,
body.nwind-page-shell.mobile-settings-open,
body.nwind-page-shell.mobile-menu-open{
overflow-x:hidden !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{
min-height:100vh !important;
overflow-y:hidden !important;
padding-bottom:88px !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:none !important;
margin:0 auto !important;
border:2px solid rgba(214,174,92,.9) !important;
border-top-width:2px !important;
border-bottom-width:2px !important;
border-radius:0 0 18px 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:2px solid rgba(214,174,92,.9) !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 battle report detail compact style
============================================================ */
body.main-game-body.nwind-page-shell.nwind-report-detail-page-body,
body.main-game-body.nwind-page-shell.battle-report-page-nwind{
font-family: Arial, Helvetica, sans-serif !important;
}
body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page{
width:720px !important;
max-width:calc(100vw - 32px) !important;
margin:14px auto 104px !important;
}
.nwind-report-detail-page .account-header{
padding:16px 20px !important;
margin-bottom:14px !important;
}
.nwind-report-detail-page .account-header h1{
font-family:Arial, Helvetica, sans-serif !important;
font-size:28px !important;
line-height:1.15 !important;
margin:2px 0 4px !important;
}
.nwind-report-detail-page .account-kicker{
font-size:12px !important;
letter-spacing:2px !important;
}
.nwind-report-detail-page .account-muted{
font-size:14px !important;
line-height:1.35 !important;
}
.nwind-report-detail-page .account-card.nwind-report-detail-card{
padding:16px !important;
background:linear-gradient(180deg,rgba(79,34,10,.96),rgba(42,16,4,.96)) !important;
border:1px solid rgba(185,139,73,.85) !important;
border-radius:0 !important;
box-shadow:0 4px 16px rgba(0,0,0,.45) !important;
}
.nwind-report-detail-page .battle-section{
margin:0 0 14px 0 !important;
border-top:1px solid rgba(185,139,73,.55) !important;
border-bottom:0 !important;
}
.nwind-report-detail-page .battle-section-title{
margin:0 0 10px 0 !important;
padding:8px 10px !important;
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:20px !important;
font-weight:700 !important;
text-transform:none !important;
letter-spacing:0 !important;
background:transparent !important;
border-top:0 !important;
border-bottom:1px solid rgba(185,139,73,.55) !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-trophies,
.nwind-report-detail-page .battle-side,
.nwind-report-detail-page .battle-card,
.nwind-report-detail-page .battle-date-card,
.nwind-report-detail-page .battle-army-card,
.nwind-report-detail-page .battle-date-section{
margin:10px 0 !important;
padding:12px 14px !important;
background:rgba(45,17,4,.62) !important;
border:1px solid rgba(155,105,42,.75) !important;
border-radius:10px !important;
box-shadow:inset 0 0 10px rgba(0,0,0,.18) !important;
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;
line-height:1.45 !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-side-title{
margin-bottom:6px !important;
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:18px !important;
line-height:1.2 !important;
}
.nwind-report-detail-page .battle-loss-total,
.nwind-report-detail-page .battle-army-name{
margin-top:8px !important;
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;
line-height:1.35 !important;
text-align:center !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-trophies{
min-height:42px !important;
gap:10px 14px !important;
}
.nwind-report-detail-page .battle-trophy{
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;
font-weight:700 !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-trophy img{
max-width:22px !important;
max-height:22px !important;
}
.nwind-report-detail-page .battle-unit-losses{
margin-top:10px !important;
gap:8px !important;
}
.nwind-report-detail-page .battle-unit-loss-row{
grid-template-columns:36px 1fr auto !important;
min-height:36px !important;
padding:6px 8px !important;
background:rgba(29,10,2,.55) !important;
border:1px solid rgba(155,105,42,.55) !important;
border-radius:8px !important;
color:#ffe7a3 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:14px !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-unit-icon,
.nwind-report-detail-page .battle-unit-icon img{
width:30px !important;
height:30px !important;
max-width:30px !important;
max-height:30px !important;
}
.nwind-report-detail-page .battle-empty{
margin:8px 0 !important;
padding:12px !important;
color:#d8c08a !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;
text-shadow:1px 1px #000 !important;
}
.nwind-report-detail-page .battle-report-actions{
display:none !important;
}
@media (max-width:760px){
body.main-game-body.nwind-page-shell .account-page.nwind-report-detail-page{
width:auto !important;
max-width:none !important;
margin:10px 8px 96px !important;
}
.nwind-report-detail-page .account-header h1{font-size:24px !important;}
.nwind-report-detail-page .account-card.nwind-report-detail-card{padding:10px !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 optional old background texture, modeled after building_page_test.php
Toggle: Settings -> Фон окон. Texture stays behind/around the dark window shell.
============================================================ */
html.nwind-bg-texture-enabled body.main-game-body.nwind-page-shell,
html.nwind-bg-texture-enabled body.main-game-body.castle-nwind-shell,
body.nwind-bg-texture-enabled.main-game-body.nwind-page-shell,
body.nwind-bg-texture-enabled.main-game-body.castle-nwind-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:rgba(20,12,5,.72) !important;
border:1px solid rgba(210,166,88,.42) !important;
box-shadow:0 0 22px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04) !important;
border-radius:18px !important;
overflow:hidden !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:rgba(18,12,6,.82) !important;
border-color:rgba(210,166,88,.35) !important;
box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035) !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:rgba(18,12,6,.94) !important;
border:1px solid rgba(210,166,88,.48) !important;
box-shadow:0 18px 42px rgba(0,0,0,.65) !important;
border-radius:18px !important;
}
html.nwind-bg-texture-enabled body.main-game-body.castle-nwind-shell .game.castle-screen,
body.nwind-bg-texture-enabled.main-game-body.castle-nwind-shell .game.castle-screen{
box-shadow:0 0 0 1px rgba(255,238,166,.18) inset, 0 0 26px rgba(0,0,0,.88) !important;
}
.nwind-settings-toggle{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
color:#ffe7a3 !important;
padding:8px 10px !important;
border-radius:10px !important;
border:1px solid rgba(255,204,102,.25) !important;
background:rgba(0,0,0,.18) !important;
cursor:pointer !important;
font-weight:700 !important;
}
.nwind-settings-toggle input{
width:18px !important;
height:18px !important;
accent-color:#9b6b1f !important;
}
/* NWIND bg exact mode helper: main colors are finalized in mobile_v2.css loaded after this file. */
/* ============================================================
NWIND world castle card and attack page
============================================================ */
.nwind-world-castle-page .nwind-world-castle-card,
.nwind-attack-page .nwind-attack-card{
text-align:center;
}
.nwind-world-castle-icon{
display:flex;
align-items:center;
justify-content:center;
}
.nwind-world-castle-icon .building-page-image-test{
object-fit:contain;
padding:8px;
}
.nwind-world-castle-desc{
margin:14px auto;
max-width:620px;
}
.nwind-world-actions .game-button{
min-width:150px;
}
.nwind-attack-facts{
max-width:520px;
margin:14px auto 0;
}
.nwind-attack-form{
max-width:560px;
margin:0 auto;
}
.nwind-radio-row{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin:10px 0 14px;
}
.nwind-radio-row label{
min-width:130px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 14px;
border:1px solid rgba(190,142,58,.75);
border-radius:10px;
background:rgba(48,20,7,.7);
color:#ffe7a3;
font-weight:bold;
text-shadow:1px 1px #000;
}
.nwind-radio-row input[type="radio"]{
width:18px;
height:18px;
accent-color:#d7a23d;
}
@media (max-width:700px){
.nwind-world-actions{display:flex;flex-direction:column;align-items:stretch;}
.nwind-world-actions .game-button{width:100%;}
}
/* ============================================================
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 world location shell: map screen aligned with castle shell
============================================================ */
@media (min-width:761px){
body.main-game-body.world-nwind-shell{
min-width:0 !important;
overflow:hidden !important;
padding-bottom:88px !important;
}
body.world-nwind-shell .game-topbar-right,
body.world-nwind-shell > .msg{
display:none !important;
}
body.main-game-body.world-nwind-shell .game-topbar{
min-height:112px !important;
margin-bottom:0 !important;
position:relative !important;
z-index:5 !important;
border-bottom:1px solid rgba(214,174,92,.9) !important;
box-shadow:0 12px 24px rgba(0,0,0,.55) !important;
}
body.main-game-body.world-nwind-shell .game-topbar-center{
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
min-width:720px !important;
}
body.main-game-body.world-nwind-shell .game.world-screen{
width:760px !important;
height:calc(100vh - 112px - 88px) !important;
min-height:560px !important;
max-height:none !important;
margin:0 auto !important;
border:2px solid rgba(214,174,92,.92) !important;
border-radius:18px !important;
background:#247714 !important;
overflow:hidden !important;
box-shadow:0 0 0 1px rgba(255,238,166,.18) inset, 0 0 26px rgba(0,0,0,.88) !important;
}
body.main-game-body.world-nwind-shell .tile{
transform:translate(60px, 98px) !important;
}
body.main-game-body.world-nwind-shell .obj{
margin-left:60px !important;
margin-top:98px !important;
}
body.main-game-body.world-nwind-shell .arrow{
width:46px !important;
height:34px !important;
padding:5px !important;
border-radius:12px !important;
border:1px solid rgba(255,214,120,.65) !important;
background:linear-gradient(#7b3a12,#3b1607) !important;
box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
body.main-game-body.world-nwind-shell .arrow.up{left:357px !important;top:18px !important;}
body.main-game-body.world-nwind-shell .arrow.down{left:357px !important;bottom:18px !important;}
body.main-game-body.world-nwind-shell .arrow.left{left:18px !important;top:50% !important;transform:translateY(-50%) !important;}
body.main-game-body.world-nwind-shell .arrow.right{right:18px !important;top:50% !important;transform:translateY(-50%) !important;}
body.main-game-body.world-nwind-shell .panel{
left:auto !important;
right:18px !important;
top:18px !important;
width:250px !important;
min-height:0 !important;
padding:10px 12px !important;
background:rgba(63,27,9,.94) !important;
border:1px solid rgba(214,174,92,.9) !important;
border-radius:12px !important;
color:#ffe7a3 !important;
font-size:14px !important;
line-height:1.35 !important;
text-align:left !important;
box-shadow:0 12px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
body.main-game-body.world-nwind-shell .coords{
left:50% !important;
bottom:18px !important;
transform:translateX(-50%) !important;
padding:6px 18px !important;
min-width:120px !important;
text-align:center !important;
color:#ffe7a3 !important;
font:bold 18px Arial, sans-serif !important;
background:rgba(48,20,7,.9) !important;
border:1px solid rgba(214,174,92,.9) !important;
border-radius:999px !important;
box-shadow:0 8px 20px rgba(0,0,0,.35) !important;
}
body.main-game-body.world-nwind-shell .menu{
display:none !important;
}
body.main-game-body.world-nwind-shell .nwind-bottom-bar{
display:flex !important;
border-top:0 !important;
box-shadow:0 -12px 24px rgba(0,0,0,.55) !important;
}
}
@media (max-width:760px){
body.main-game-body.world-nwind-shell{
min-width:0 !important;
overflow-x:hidden !important;
padding-bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important;
}
body.main-game-body.world-nwind-shell .game-topbar-right,
body.main-game-body.world-nwind-shell > .msg{
display:none !important;
}
body.main-game-body.world-nwind-shell .game.world-screen{
width:calc(100vw - 18px) !important;
height:calc(100vh - 132px - 86px) !important;
min-height:460px !important;
margin:8px auto 0 !important;
border:1px solid rgba(214,174,92,.9) !important;
border-radius:16px !important;
background:#247714 !important;
overflow:hidden !important;
box-shadow:0 0 0 1px rgba(255,238,166,.12) inset, 0 0 18px rgba(0,0,0,.75) !important;
}
body.main-game-body.world-nwind-shell .panel{
left:10px !important;
top:10px !important;
width:210px !important;
min-height:0 !important;
font-size:12px !important;
border-radius:10px !important;
background:rgba(63,27,9,.94) !important;
border:1px solid rgba(214,174,92,.8) !important;
}
body.main-game-body.world-nwind-shell .coords{
left:50% !important;
bottom:10px !important;
transform:translateX(-50%) !important;
background:rgba(48,20,7,.9) !important;
border:1px solid rgba(214,174,92,.8) !important;
border-radius:999px !important;
padding:5px 14px !important;
font-size:16px !important;
}
body.main-game-body.world-nwind-shell .menu{display:none !important;}
}
/* ============================================================
NWIND world location cleanup: hide bottom panels by default
and keep all four map arrows visible.
============================================================ */
.nwind-bottom-panel{
display:none !important;
position:fixed !important;
left:50% !important;
bottom:96px !important;
transform:translateX(-50%) !important;
z-index:10050 !important;
min-width:220px !important;
max-width:calc(100vw - 32px) !important;
padding:12px 14px !important;
background:linear-gradient(180deg,rgba(92,37,10,.98),rgba(48,18,6,.98)) !important;
border:1px solid rgba(255,214,120,.86) !important;
border-radius:14px !important;
box-shadow:0 14px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06) !important;
color:#ffe7a3 !important;
text-align:center !important;
}
body.nwind-menu-open .nwind-bottom-panel-menu,
body.nwind-settings-open .nwind-bottom-panel-settings{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
align-items:stretch !important;
}
/* STEP182: зазор МЕЖДУ кнопками панели "Настройки" теперь настраивается через
config/menu_niz/menu_niz_settings_config.php (panel.desktop.gap/panel.mobile.gap),
как и в основном Меню. Правило идет ПОСЛЕ общего (выше) и с !important, поэтому
переопределяет фиксированный gap:8px именно для панели настроек. */
body.nwind-settings-open .nwind-bottom-panel-settings{
gap:var(--nws-panel-gap-desktop, 8px) !important;
}
html.mobile-runtime body.nwind-settings-open .nwind-bottom-panel-settings{
gap:var(--nws-panel-gap-mobile, 7px) !important;
}
.nwind-bottom-panel a,
.nwind-bottom-panel button,
.nwind-settings-toggle{
display:block !important;
color:#ffe7a3 !important;
text-decoration:none !important;
font-weight:700 !important;
padding:7px 10px !important;
border-radius:10px !important;
border:1px solid rgba(214,174,92,.55) !important;
background:rgba(45,16,5,.72) !important;
}
.nwind-bottom-panel button{font:inherit !important;cursor:pointer !important;}
.nwind-bottom-panel-title{font-weight:800 !important;color:#fff0b8 !important;margin-bottom:4px !important;}
/* STEP181: значки перед пунктами панели "Настройки" (Ресурсы/Аккаунт/Выход и т.д.) —
config/menu_niz_settings_config.php. Размер каждой иконки уже посчитан и округлен в
PHP (см. --nsi-w/h-desktop/mobile в inline-style картинки), тут просто применяем нужную
пару переменных под десктоп/мобильный экран — без дробного calc(), чтобы не размывалось
(тот же прием, что и для иконок нижнего меню, см. Last_update.txt STEP177-181). */
.nwind-bottom-panel-settings a{
display:flex !important;
align-items:center !important;
gap:var(--nws-icon-gap-desktop, 9px) !important;
}
html.mobile-runtime .nwind-bottom-panel-settings a{
gap:var(--nws-icon-gap-mobile, 8px) !important;
}
/* STEP183: у ссылок панели (в т.ч. Настроек) в mobile_v2.css задан отдельный
margin:7px 0 — он складывается СВЕРХУ flex-зазора (gap) панели, поэтому даже при
gap:0 в конфиге между кнопками оставался лишний отступ (7px сверху + 7px снизу
соседней кнопки = 14px), и настройка gap в menu_niz_settings_config.php визуально
не давала полного эффекта. У кнопок основного Меню такого margin нет (там
margin:0 !important), поэтому зазор ощущался разным. Обнуляем margin именно для
панели Настроек — теперь весь зазор между кнопками управляется только через gap. */
.nwind-bottom-panel-settings a{
margin:0 !important;
}
.nwind-settings-link-icon{
display:inline-block !important;
flex:none !important;
width:var(--nsi-w-desktop, 22px) !important;
height:var(--nsi-h-desktop, 22px) !important;
object-fit:contain !important;
filter:drop-shadow(1px 2px 2px rgba(0,0,0,.6)) !important;
}
html.mobile-runtime .nwind-settings-link-icon{
width:var(--nsi-w-mobile, 20px) !important;
height:var(--nsi-h-mobile, 20px) !important;
}
@media (min-width:761px){
body.main-game-body.world-nwind-shell .arrow.down{
left:357px !important;
bottom:70px !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:5000 !important;
}
body.main-game-body.world-nwind-shell .coords{
z-index:4000 !important;
}
}
@media (max-width:760px){
body.main-game-body.world-nwind-shell .arrow.down{
bottom:58px !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
z-index:5000 !important;
}
}
/* NWind world cleanup + compact info rows */
body.main-game-body.world-nwind-shell .nwind-bottom-panel,
body.main-game-body.world-nwind-shell .mobile-settings-panel,
body.main-game-body.world-nwind-shell .mobile-menu-panel,
body.main-game-body.world-nwind-shell #mobileSettingsPanel,
body.main-game-body.world-nwind-shell #mobileActionBar,
body.main-game-body.world-nwind-shell [class*="settings-panel"],
body.main-game-body.world-nwind-shell [id*="Settings"],
body.main-game-body.world-nwind-shell [id*="settings"]{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
.nwind-info-lines{
width:min(520px, 100%) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.nwind-info-lines > div{
display:flex !important;
align-items:baseline !important;
justify-content:flex-start !important;
gap:6px !important;
text-align:left !important;
}
.nwind-info-lines > div span{
flex:0 0 150px !important;
text-align:right !important;
white-space:nowrap !important;
}
.nwind-info-lines > div b{
flex:1 1 auto !important;
text-align:left !important;
min-width:0 !important;
}
/* ============================================================
NWIND bottom bar variables + World desktop gap/menu fix
Fixed build: unified bottom controls 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;
}
.nwind-bottom-bar{
min-height:var(--nwind-bottom-bar-height) !important;
height:calc(var(--nwind-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
padding:var(--nwind-bottom-bar-padding-top) var(--nwind-bottom-bar-padding-x) calc(var(--nwind-bottom-bar-padding-top) + env(safe-area-inset-bottom, 0px)) var(--nwind-bottom-bar-padding-x) !important;
gap:var(--nwind-bottom-button-gap) !important;
z-index:12000 !important;
pointer-events:auto !important;
}
.nwind-bottom-button{
width:var(--nwind-bottom-button-size) !important;
height:var(--nwind-bottom-button-size) !important;
padding:6px !important;
box-sizing:border-box !important;
pointer-events:auto !important;
}
.nwind-bottom-icon{
width:var(--nwind-bottom-icon-size) !important;
height:var(--nwind-bottom-icon-size) !important;
}
.nwind-bottom-panel{
bottom:calc(var(--nwind-bottom-panel-offset) + env(safe-area-inset-bottom, 0px)) !important;
z-index:12050 !important;
}
body.main-game-body.world-nwind-shell .nwind-bottom-panel{
display:none !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:none !important;
}
body.main-game-body.world-nwind-shell.nwind-menu-open .nwind-bottom-panel-menu,
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;
}
@media (min-width:761px){
body.main-game-body.world-nwind-shell{
padding-bottom:var(--nwind-bottom-bar-height) !important;
}
body.main-game-body.world-nwind-shell .game.world-screen{
height:calc(100vh - 112px - var(--nwind-bottom-bar-height)) !important;
margin:0 auto 0 !important;
border-bottom-left-radius:18px !important;
border-bottom-right-radius:18px !important;
}
body.main-game-body.world-nwind-shell .nwind-bottom-bar{
min-height:var(--nwind-bottom-bar-height) !important;
height:var(--nwind-bottom-bar-height) !important;
padding:var(--nwind-bottom-bar-padding-top) var(--nwind-bottom-bar-padding-x) !important;
gap:var(--nwind-bottom-button-gap) !important;
border-top:2px solid rgba(214,174,92,.78) !important;
}
body.main-game-body.world-nwind-shell .menu,
body.main-game-body.world-nwind-shell .mobile-settings-panel,
body.main-game-body.world-nwind-shell .mobile-menu-panel,
body.main-game-body.world-nwind-shell #mobileSettingsPanel,
body.main-game-body.world-nwind-shell #mobileActionBar,
body.main-game-body.world-nwind-shell [class*="settings-panel"],
body.main-game-body.world-nwind-shell [id*="Settings"],
body.main-game-body.world-nwind-shell [id*="settings"]{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
}
@media (max-width:760px){
.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;
}
.nwind-bottom-button{
width:var(--nwind-bottom-button-mobile-size) !important;
height:var(--nwind-bottom-button-mobile-size) !important;
}
.nwind-bottom-icon{
width:var(--nwind-bottom-icon-mobile-size) !important;
height:var(--nwind-bottom-icon-mobile-size) !important;
}
.nwind-bottom-panel{
bottom:calc(var(--nwind-bottom-bar-mobile-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
z-index:12050 !important;
}
}
/* ============================================================
FIX 2026-05-17: NWIND bottom bar variables final override
These variables are the single tuning point 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;
--nwind-world-desktop-top-offset:112px;
}
html.nwind-bg-texture-enabled body.main-game-body.world-nwind-shell,
body.nwind-bg-texture-enabled.main-game-body.world-nwind-shell{
background:#080604 url('assets/menu/background.png') repeat !important;
}
body.main-game-body .nwind-bottom-bar{
min-height:var(--nwind-bottom-bar-height) !important;
height:calc(var(--nwind-bottom-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
padding:var(--nwind-bottom-bar-padding-top) var(--nwind-bottom-bar-padding-x) calc(var(--nwind-bottom-bar-padding-top) + env(safe-area-inset-bottom, 0px)) var(--nwind-bottom-bar-padding-x) !important;
gap:var(--nwind-bottom-button-gap) !important;
align-items:flex-start !important;
z-index:12000 !important;
pointer-events:auto !important;
}
body.main-game-body .nwind-bottom-button{
width:var(--nwind-bottom-button-size) !important;
height:var(--nwind-bottom-button-size) !important;
min-width:var(--nwind-bottom-button-size) !important;
min-height:var(--nwind-bottom-button-size) !important;
padding:6px !important;
box-sizing:border-box !important;
pointer-events:auto !important;
}
body.main-game-body .nwind-bottom-icon{
width:var(--nwind-bottom-icon-size) !important;
height:var(--nwind-bottom-icon-size) !important;
}
body.main-game-body .nwind-bottom-panel{
bottom:calc(var(--nwind-bottom-panel-offset) + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width:761px){
body.main-game-body.world-nwind-shell{
background:#080604 url('assets/menu/background.png') repeat !important;
padding-bottom:var(--nwind-bottom-bar-height) !important;
}
body.main-game-body.world-nwind-shell .game.world-screen{
height:calc(100vh - var(--nwind-world-desktop-top-offset) - var(--nwind-bottom-bar-height)) !important;
margin:0 auto 0 !important;
}
body.main-game-body.world-nwind-shell .nwind-bottom-bar{
height:var(--nwind-bottom-bar-height) !important;
min-height:var(--nwind-bottom-bar-height) !important;
padding:var(--nwind-bottom-bar-padding-top) var(--nwind-bottom-bar-padding-x) !important;
gap:var(--nwind-bottom-button-gap) !important;
}
}
@media (max-width:760px){
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;
}
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;
}
body.main-game-body .nwind-bottom-icon{
width:var(--nwind-bottom-icon-mobile-size) !important;
height:var(--nwind-bottom-icon-mobile-size) !important;
}
body.main-game-body .nwind-bottom-panel{
bottom:calc(var(--nwind-bottom-bar-mobile-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ============================================================
NWIND world map hover/click cell highlight + info panel update
============================================================ */
body.main-game-body.world-nwind-shell .world-tile{
cursor:pointer !important;
z-index:1 !important;
}
body.main-game-body.world-nwind-shell .world-tile::after{
content:"";
position:absolute;
inset:0;
clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
border:2px solid transparent;
background:transparent;
pointer-events:none;
opacity:0;
transition:opacity .12s ease, background .12s ease, filter .12s ease;
}
body.main-game-body.world-nwind-shell .world-tile:hover::after{
opacity:1;
background:rgba(255,230,0,.22);
filter:drop-shadow(0 0 5px rgba(255,230,0,.9));
}
body.main-game-body.world-nwind-shell .world-tile.world-tile-selected::after{
opacity:1;
background:rgba(255,220,0,.34);
filter:drop-shadow(0 0 7px rgba(255,235,0,1));
}
body.main-game-body.world-nwind-shell .obj{
z-index:20 !important;
}
body.main-game-body.world-nwind-shell .panel{
text-align:left !important;
}
/* ============================================================
NWIND world castle/bot info layout polish
============================================================ */
.nwind-world-castle-page .building-page-card-grid-test,
.nwind-attack-page .building-page-card-grid-test{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:18px !important;
}
.nwind-world-castle-page .nwind-world-castle-icon{
margin-bottom:10px !important;
}
.nwind-world-castle-page .nwind-info-lines,
.nwind-attack-page .nwind-info-lines,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines{
width:min(460px, 100%) !important;
max-width:460px !important;
margin:12px auto 0 !important;
text-align:left !important;
}
.nwind-world-castle-page .nwind-info-lines > div,
.nwind-attack-page .nwind-info-lines > div,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:170px minmax(0,1fr) !important;
gap:10px !important;
align-items:baseline !important;
justify-content:center !important;
text-align:left !important;
}
.nwind-world-castle-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-info-lines > div span{
text-align:left !important;
white-space:nowrap !important;
}
.nwind-world-castle-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-info-lines > div b{
text-align:left !important;
min-width:0 !important;
}
.mobile-world-current-coords{
display:none;
}
.nwind-world-bot-actions{
justify-content:center !important;
}
.nwind-world-bot-actions .game-button{
min-width:190px !important;
}
/* ============================================================
FIX: compact world castle/bot/attack info cards
Keeps the label/value rows centered as a compact two-column block.
============================================================ */
.nwind-world-castle-page .building-page-card-grid-test,
.nwind-attack-page .building-page-card-grid-test{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:8px !important;
}
.nwind-world-castle-page .nwind-world-castle-icon{
margin:0 0 4px 0 !important;
}
.nwind-world-castle-page .nwind-info-lines,
.nwind-world-bot-page .nwind-info-lines,
.nwind-attack-page .nwind-info-lines,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines{
width:auto !important;
min-width:min(460px, 92%) !important;
max-width:min(460px, 92%) !important;
min-height:0 !important;
height:auto !important;
flex:0 0 auto !important;
margin:8px auto 0 !important;
padding:10px 12px !important;
box-sizing:border-box !important;
}
.nwind-world-castle-page .nwind-info-lines > div,
.nwind-world-bot-page .nwind-info-lines > div,
.nwind-attack-page .nwind-info-lines > div,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:170px minmax(0,1fr) !important;
gap:10px !important;
align-items:baseline !important;
justify-content:center !important;
text-align:left !important;
line-height:1.25 !important;
margin:0 !important;
padding:0 !important;
}
.nwind-world-castle-page .nwind-info-lines > div span,
.nwind-world-bot-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-info-lines > div span{
text-align:left !important;
white-space:nowrap !important;
}
.nwind-world-castle-page .nwind-info-lines > div b,
.nwind-world-bot-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-info-lines > div b{
text-align:left !important;
white-space:normal !important;
min-width:0 !important;
}
/* ============================================================
NWIND FIX: centered two-column info rows for world/attack cards
Scope: world_castle_page.php, world_bots_page.php, attack.php only.
Mobile overrides stay in mobile_v2.css.
============================================================ */
.nwind-world-castle-page .nwind-info-lines,
.nwind-world-bot-page .nwind-info-lines,
.nwind-attack-page .nwind-info-lines,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines{
display:block !important;
width:fit-content !important;
min-width:360px !important;
max-width:min(520px, 92%) !important;
margin-left:auto !important;
margin-right:auto !important;
}
.nwind-world-castle-page .nwind-info-lines > div,
.nwind-world-bot-page .nwind-info-lines > div,
.nwind-attack-page .nwind-info-lines > div,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:max-content max-content !important;
justify-content:center !important;
column-gap:18px !important;
align-items:baseline !important;
text-align:left !important;
}
.nwind-world-castle-page .nwind-info-lines > div span,
.nwind-world-bot-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-info-lines > div span{
display:block !important;
width:145px !important;
text-align:left !important;
white-space:nowrap !important;
}
.nwind-world-castle-page .nwind-info-lines > div b,
.nwind-world-bot-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-info-lines > div b{
display:block !important;
min-width:160px !important;
text-align:left !important;
white-space:nowrap !important;
}
/* ============================================================
NWIND FIX 2026-05-19: world/attack info blocks same width as desc
and centered two-column rows. Desktop/base rules.
============================================================ */
.nwind-world-castle-page .nwind-world-castle-desc,
.nwind-world-bot-page .nwind-world-castle-desc,
.nwind-attack-page .nwind-world-castle-desc{
width:min(620px, calc(100% - 28px)) !important;
max-width:min(620px, calc(100% - 28px)) !important;
box-sizing:border-box !important;
}
.nwind-world-castle-page .nwind-info-lines,
.nwind-world-bot-page .nwind-info-lines,
.nwind-attack-page .nwind-info-lines,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines{
width:min(620px, calc(100% - 28px)) !important;
max-width:min(620px, calc(100% - 28px)) !important;
min-width:0 !important;
box-sizing:border-box !important;
margin-left:auto !important;
margin-right:auto !important;
}
.nwind-world-castle-page .nwind-info-lines > div,
.nwind-world-bot-page .nwind-info-lines > div,
.nwind-attack-page .nwind-info-lines > div,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:150px minmax(150px, 1fr) !important;
column-gap:16px !important;
justify-content:center !important;
align-items:baseline !important;
width:fit-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:left !important;
}
.nwind-world-castle-page .nwind-info-lines > div span,
.nwind-world-bot-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div span{
width:auto !important;
min-width:0 !important;
text-align:left !important;
white-space:nowrap !important;
}
.nwind-world-castle-page .nwind-info-lines > div b,
.nwind-world-bot-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div b{
min-width:0 !important;
text-align:left !important;
white-space:nowrap !important;
}
/* ============================================================
FIX 2026-05-19: restore desktop centered two-column info cards.
Scope only: world_castle_page.php, world_bots_page.php, attack.php.
Mobile keeps its own rules in mobile_v2.css.
============================================================ */
@media (min-width:761px){
.nwind-world-castle-page .nwind-info-lines,
.nwind-world-bot-page .nwind-info-lines,
.nwind-attack-page .nwind-info-lines,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines{
width:min(520px, 92%) !important;
max-width:min(520px, 92%) !important;
min-width:0 !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
text-align:left !important;
}
.nwind-world-castle-page .nwind-info-lines > div,
.nwind-world-bot-page .nwind-info-lines > div,
.nwind-attack-page .nwind-info-lines > div,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:170px max-content !important;
column-gap:16px !important;
width:max-content !important;
max-width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
justify-content:center !important;
align-items:baseline !important;
text-align:left !important;
line-height:1.28 !important;
}
.nwind-world-castle-page .nwind-info-lines > div span,
.nwind-world-bot-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-info-lines > div span,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div span{
width:auto !important;
min-width:0 !important;
text-align:left !important;
white-space:nowrap !important;
}
.nwind-world-castle-page .nwind-info-lines > div b,
.nwind-world-bot-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-info-lines > div b,
.nwind-attack-page .nwind-attack-facts.nwind-info-lines > div b{
width:auto !important;
min-width:0 !important;
text-align:left !important;
white-space:nowrap !important;
}
}
/* ============================================================
NWIND FINAL FIX 2026-05-19: desktop info columns alignment.
Keeps world castle, bot and attack info blocks centered as a
compact two-column table. Does not affect mobile runtime.
============================================================ */
@media (min-width:761px){
body:not(.mobile-runtime) .nwind-world-castle-page .nwind-info-lines,
body:not(.mobile-runtime) .nwind-world-bot-page .nwind-info-lines,
body:not(.mobile-runtime) .nwind-attack-page .nwind-info-lines,
body:not(.mobile-runtime) .nwind-attack-page .nwind-attack-facts.nwind-info-lines{
width:min(520px, 92%) !important;
max-width:min(520px, 92%) !important;
min-width:0 !important;
height:auto !important;
min-height:0 !important;
margin-left:auto !important;
margin-right:auto !important;
padding:12px 14px !important;
box-sizing:border-box !important;
text-align:left !important;
}
body:not(.mobile-runtime) .nwind-world-castle-page .nwind-info-lines > div,
body:not(.mobile-runtime) .nwind-world-bot-page .nwind-info-lines > div,
body:not(.mobile-runtime) .nwind-attack-page .nwind-info-lines > div,
body:not(.mobile-runtime) .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div{
display:grid !important;
grid-template-columns:170px 190px !important;
column-gap:18px !important;
justify-content:center !important;
align-items:baseline !important;
width:100% !important;
max-width:100% !important;
margin:0 auto !important;
padding:0 !important;
text-align:left !important;
line-height:1.25 !important;
}
body:not(.mobile-runtime) .nwind-world-castle-page .nwind-info-lines > div span,
body:not(.mobile-runtime) .nwind-world-bot-page .nwind-info-lines > div span,
body:not(.mobile-runtime) .nwind-attack-page .nwind-info-lines > div span,
body:not(.mobile-runtime) .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div span,
body:not(.mobile-runtime) .nwind-world-castle-page .nwind-info-lines > div b,
body:not(.mobile-runtime) .nwind-world-bot-page .nwind-info-lines > div b,
body:not(.mobile-runtime) .nwind-attack-page .nwind-info-lines > div b,
body:not(.mobile-runtime) .nwind-attack-page .nwind-attack-facts.nwind-info-lines > div b{
display:block !important;
width:auto !important;
min-width:0 !important;
text-align:left !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
}
/* ============================================================
STEP27: castle viewport fill + NWIND themed scrollbars.
Fixes transferred 300x147 castle renderer being clipped into a
narrow central column by old left/right stage offsets.
============================================================ */
body.main-game-body.castle-nwind-shell .game.castle-screen{
position:relative !important;
}
body.main-game-body.castle-nwind-shell .castle-stage{
position:absolute !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
width:auto !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
overflow:auto !important;
z-index:100 !important;
box-sizing:border-box !important;
scrollbar-width:thin;
scrollbar-color:#9a6b2f rgba(41,18,7,.72);
}
body.main-game-body.castle-nwind-shell .castle-stage::-webkit-scrollbar{
width:13px;
height:13px;
}
body.main-game-body.castle-nwind-shell .castle-stage::-webkit-scrollbar-track{
background:linear-gradient(180deg, rgba(38,18,8,.92), rgba(83,36,12,.82));
border:1px solid rgba(214,174,92,.46);
border-radius:10px;
}
body.main-game-body.castle-nwind-shell .castle-stage::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, #d9ad57, #8a4b18 55%, #5b250b);
border:2px solid rgba(45,18,6,.95);
border-radius:10px;
box-shadow:inset 0 1px 0 rgba(255,236,155,.55), 0 0 5px rgba(0,0,0,.45);
}
body.main-game-body.castle-nwind-shell .castle-stage::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, #f0c76a, #a45a20 55%, #6e300d);
}
body.main-game-body.castle-nwind-shell .castle-stage::-webkit-scrollbar-corner{
background:rgba(41,18,7,.88);
}
body.main-game-body.castle-nwind-shell .zoom-controls{
left:50% !important;
top:var(--castle-zoom-controls-top, 12px) !important;
transform:translateX(-50%) !important;
z-index:7000 !important;
border:2px solid rgba(214,174,92,.86) !important;
border-radius:8px !important;
background:rgba(63,28,10,.94) !important;
color:#ffe8a5 !important;
box-shadow:0 4px 12px rgba(0,0,0,.55) !important;
}
body.main-game-body.castle-nwind-shell .zoom-controls button{
border-radius:4px !important;
background:linear-gradient(180deg,#8b4a18,#4b1c08) !important;
border:1px solid #e4b85d !important;
color:#fff3bf !important;
}
body.main-game-body.castle-nwind-shell .zoom-controls span{
color:#fff2bc !important;
}
@media (max-width:760px){
body.main-game-body.castle-nwind-shell .castle-stage{
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
width:auto !important;
height:auto !important;
overflow:auto !important;
-webkit-overflow-scrolling:touch !important;
}
body.main-game-body.castle-nwind-shell .zoom-controls{
left:50% !important;
top:var(--castle-zoom-controls-mobile-top, 44px) !important;
transform:translateX(-50%) scale(.92) !important;
transform-origin:top center !important;
}
}
/* ============================================================
STEP28: castle image quality fix.
CSS zoom is used by JS instead of transform:scale() on browsers
that support it, so 300x147 tiles/buildings stay crisp in normal
mode exactly like in debug/show=all.
============================================================ */
body.main-game-body.castle-nwind-shell .castle-field{
transition:none !important;
transform-origin:0 0 !important;
}
body.main-game-body.castle-nwind-shell .castle-field img,
body.main-game-body.castle-nwind-shell .castle-tile,
body.main-game-body.castle-nwind-shell .building,
body.main-game-body.castle-nwind-shell .building-manual,
body.main-game-body.castle-nwind-shell .fence-tile,
body.main-game-body.castle-nwind-shell .rov-tile{
image-rendering:auto !important;
backface-visibility:visible !important;
-webkit-backface-visibility:visible !important;
}
/* ============================================================
NWIND building pages - larger high quality building previews
Step 29: new castle/building assets are higher resolution, so
building info windows display them larger. World target icons keep
their own compact size.
============================================================ */
.building-responsive-test-page:not(.nwind-world-castle-page) .building-page-image-test{
width:156px !important;
height:156px !important;
max-width:156px !important;
max-height:156px !important;
object-fit:contain !important;
image-rendering:auto !important;
padding:6px !important;
}
.building-responsive-test-page:not(.nwind-world-castle-page) .building-page-info-test{
gap:22px !important;
}
.building-responsive-test-page:not(.nwind-world-castle-page) .building-page-facts-test{
flex:1 1 300px !important;
max-width:360px !important;
}
@media (max-width:760px){
.building-responsive-test-page:not(.nwind-world-castle-page) .building-page-image-test{
width:128px !important;
height:128px !important;
max-width:128px !important;
max-height:128px !important;
padding:5px !important;
}
.building-responsive-test-page:not(.nwind-world-castle-page) .building-page-info-test{
gap:14px !important;
}
}
/* ============================================================
STEP31: stable mobile castle centering.
The old mobile fallback scaled .castle-field with transform and shifted it
with left:50%, while the new renderer uses JS zoom + scroll math. Reset the
mobile transform in the NWIND castle shell so mobile_home_center_x/y in
config/castle_view_config.php always use real castle-field coordinates.
============================================================ */
html.mobile-runtime body.main-game-body.castle-nwind-shell .castle-screen .castle-field{
position:absolute !important;
left:0 !important;
top:70px !important;
width:2300px !important;
height:1350px !important;
transform:none !important;
transform-origin:0 0 !important;
z-index:100 !important;
}
@media (max-width:760px){
body.main-game-body.castle-nwind-shell .castle-screen .castle-field{
position:absolute !important;
left:0 !important;
top:70px !important;
width:2300px !important;
height:1350px !important;
transform:none !important;
transform-origin:0 0 !important;
z-index:100 !important;
}
}
body.main-game-body.castle-nwind-shell .castle-stage{
touch-action:pan-x pan-y !important;
overscroll-behavior:contain !important;
}
body.main-game-body.castle-nwind-shell .castle-field{
touch-action:pan-x pan-y !important;
}
/* ============================================================
STEP34: NWIND Lands view.
Separate land renderer based on the castle viewport/zoom pattern.
============================================================ */
body.main-game-body.land-nwind-shell{
background:#120804;
overflow:hidden;
}
body.main-game-body.land-nwind-shell .land-screen.land-nwind-screen{
position:relative;
width:min(96vw, 1180px);
height:calc(100vh - 148px);
min-height:560px;
margin:0 auto;
overflow:hidden;
border:2px solid #b9822a;
border-radius:18px;
background:#13710f;
box-shadow:0 0 0 1px rgba(255,230,150,.18) inset, 0 14px 28px rgba(0,0,0,.45);
}
body.main-game-body.land-nwind-shell .land-stage{
position:absolute;
inset:0;
overflow:auto;
background:#13710f;
scrollbar-width:thin;
scrollbar-color:#8c5a19 #2b1308;
touch-action:pan-x pan-y;
overscroll-behavior:contain;
}
body.main-game-body.land-nwind-shell .land-stage::-webkit-scrollbar{width:13px;height:13px;}
body.main-game-body.land-nwind-shell .land-stage::-webkit-scrollbar-track{background:#2b1308;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,215,120,.22);}
body.main-game-body.land-nwind-shell .land-stage::-webkit-scrollbar-thumb{background:linear-gradient(#b9822a,#6b3b0e);border-radius:10px;border:2px solid #2b1308;}
body.main-game-body.land-nwind-shell .land-stage::-webkit-scrollbar-corner{background:#2b1308;}
body.main-game-body.land-nwind-shell .land-field{
position:absolute;
left:0;
top:70px;
transform-origin:0 0;
touch-action:pan-x pan-y;
}
body.main-game-body.land-nwind-shell .land-tile,
body.main-game-body.land-nwind-shell .land-building,
body.main-game-body.land-nwind-shell .land-cell-hitbox,
body.main-game-body.land-nwind-shell .land-cell-marker{
position:absolute;
}
body.main-game-body.land-nwind-shell .land-tile{
user-select:none;
pointer-events:none;
image-rendering:auto;
}
body.main-game-body.land-nwind-shell .land-tile-BP1{filter:none;}
body.main-game-body.land-nwind-shell .land-tile-BP2{filter:brightness(1.04);}
body.main-game-body.land-nwind-shell .land-tile-BP3{filter:saturate(1.05);}
body.main-game-body.land-nwind-shell .land-tile-BP4{filter:brightness(.98);}
body.main-game-body.land-nwind-shell .land-tile-BP5{filter:saturate(.94);}
body.main-game-body.land-nwind-shell .land-tile-BP6{filter:brightness(1.08) saturate(.96);}
body.main-game-body.land-nwind-shell .land-cell-hitbox{
width:150px;
height:74px;
transform:translate(75px, 36px) rotate(45deg) skew(-18deg,-18deg);
transform-origin:center center;
cursor:pointer;
z-index:3000;
background:rgba(255,255,255,0);
}
body.main-game-body.land-nwind-shell .land-cell-hitbox:hover{
background:rgba(255,238,150,.16);
outline:1px solid rgba(255,218,100,.45);
}
body.main-game-body.land-nwind-shell .land-info-panel{
position:absolute;
left:16px;
bottom:14px;
z-index:4200;
min-width:210px;
padding:10px 14px;
border:1px solid #9d6a25;
border-radius:12px;
background:rgba(54,24,8,.92);
color:#ffe8a8;
text-shadow:1px 1px 0 #000;
box-shadow:0 4px 12px rgba(0,0,0,.35);
}
body.main-game-body.land-nwind-shell .land-zoom-controls{
position:absolute;
top:var(--land-zoom-controls-top, 12px);
left:50%;
transform:translateX(-50%);
z-index:4300;
display:flex;
align-items:center;
gap:6px;
padding:6px;
border:2px solid #c9943e;
border-radius:10px;
background:rgba(73,31,8,.94);
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
body.main-game-body.land-nwind-shell .land-zoom-controls button,
body.main-game-body.land-nwind-shell .land-zoom-controls span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:30px;
height:28px;
padding:0 9px;
border:1px solid #e7bd6a;
border-radius:6px;
background:linear-gradient(#8b4b14,#5b2908);
color:#fff1b6;
font-weight:bold;
text-shadow:1px 1px 0 #000;
}
body.main-game-body.land-nwind-shell .land-zoom-controls span{background:#fff4d2;color:#3b1d08;text-shadow:none;}
body.main-game-body.land-nwind-shell .land-cell-marker{
width:20px;
height:20px;
z-index:3500;
border:2px solid #ffef8f;
border-radius:50%;
box-shadow:0 0 8px #ffe35d;
pointer-events:none;
}
@media (max-width:760px){
body.main-game-body.land-nwind-shell .land-screen.land-nwind-screen{
width:100vw;
height:calc(100vh - 118px);
min-height:480px;
border-radius:0;
border-left:0;
border-right:0;
}
body.main-game-body.land-nwind-shell .land-zoom-controls{
top:var(--land-zoom-controls-mobile-top, 44px);
}
body.main-game-body.land-nwind-shell .land-info-panel{
left:8px;
bottom:8px;
min-width:170px;
max-width:72vw;
font-size:13px;
padding:8px 10px;
}
}
/* STEP35: Lands view polish, bottom menu integration and correct diamond hitboxes. */
body.main-game-body.land-nwind-shell .land-resource{
position:absolute;
user-select:none;
pointer-events:none;
image-rendering:auto;
}
body.main-game-body.land-nwind-shell .land-cell-hitbox{
transform:none !important;
clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background:rgba(255,255,255,0) !important;
outline:none !important;
}
body.main-game-body.land-nwind-shell .land-cell-hitbox:hover{
background:rgba(255,238,150,.18) !important;
box-shadow:0 0 10px rgba(255,230,120,.65) inset;
}
body.main-game-body.land-nwind-shell .land-cell-marker{
border:0 !important;
border-radius:0 !important;
clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background:rgba(255,238,150,.16);
box-shadow:0 0 0 2px rgba(255,235,130,.95) inset, 0 0 12px rgba(255,230,90,.75);
}
body.main-game-body.land-nwind-shell .land-info-panel{
bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width:760px){
body.main-game-body.land-nwind-shell .land-info-panel{
bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* STEP38: Lands clean viewport and direct build click. */
@media (min-width:761px){
body.main-game-body.land-nwind-shell{
min-height:100vh !important;
overflow:hidden !important;
padding-bottom:88px !important;
}
body.main-game-body.land-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.land-nwind-shell .land-screen.land-nwind-screen{
width:760px !important;
height:calc(100vh - 112px - 88px) !important;
min-height:560px !important;
max-height:none !important;
margin:0 auto !important;
border:2px solid rgba(214,174,92,.92) !important;
border-radius:18px !important;
background:#13710f !important;
overflow:hidden !important;
box-shadow:0 0 0 1px rgba(255,238,166,.18) inset, 0 0 26px rgba(0,0,0,.88) !important;
}
body.main-game-body.land-nwind-shell .nwind-bottom-bar{
border-top:0 !important;
box-shadow:0 -12px 24px rgba(0,0,0,.55) !important;
}
}
body.main-game-body.land-nwind-shell .land-info-panel{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
/* ============================================================
STEP39: shared location width config + Lands legacy cleanup.
Config: config/location_view_config.php -> desktop_container_width.
Mobile keeps full-width responsive behavior.
============================================================ */
@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;
}
}
/* Lands uses NWIND bottom bar only. Hide old/settings remnants that can leak under the viewport. */
body.main-game-body.land-nwind-shell .mobile-settings-panel,
body.main-game-body.land-nwind-shell .mobile-menu-panel,
body.main-game-body.land-nwind-shell #mobileSettingsPanel,
body.main-game-body.land-nwind-shell #mobileActionBar,
body.main-game-body.land-nwind-shell [class*="settings-panel"],
body.main-game-body.land-nwind-shell [id*="Settings"],
body.main-game-body.land-nwind-shell [id*="settings"],
body.main-game-body.land-nwind-shell [data-mobile-settings],
body.main-game-body.land-nwind-shell [data-mobile-menu]{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !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;
}
}
/* ============================================================
Step74: tiled location background for Castle/Lands.
Uses public/assets/ground/mb0.png. Works on PC and mobile.
============================================================ */
body.castle-nwind-shell .game.castle-screen,
body.castle-nwind-shell .game.land-screen,
body.castle-nwind-shell .castle-screen,
body.castle-nwind-shell .land-screen,
.game.castle-screen,
.game.land-screen,
.castle-screen,
.land-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;
}
html.mobile-runtime .game.castle-screen,
html.mobile-runtime .game.land-screen,
html.mobile-runtime .castle-screen,
html.mobile-runtime .land-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;
}
/* ============================================================
Step75: hard fix tiled mb0.png background for Castle/Lands.
Applied to screen and scroll-stage, PC + mobile.
STEP184: у .game.castle-screen фон и так статичен (это внешний
зафиксированный вьюпорт, не скроллится) — так и должно быть, это только
рамка-подложка на случай если контент меньше вьюпорта. А вот
.castle-stage/.land-stage — это САМ прокручиваемый контейнер: по умолчанию
background-attachment:scroll держит фон неподвижным относительно СОБСТВЕННОГО
бокса элемента, даже когда его содержимое прокручивается — отсюда и был эффект
"замок/земли летают" (трава оставалась на месте, а домики уезжали при
прокрутке). background-attachment:local заставляет фон прокручиваться ВМЕСТЕ
с содержимым контейнера — трава теперь "лежит под" домиками и двигается
вместе с ними.
============================================================ */
body.main-game-body.castle-nwind-shell .game.castle-screen,
body.main-game-body.land-nwind-shell .land-screen.land-nwind-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.castle-nwind-shell .castle-stage,
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;
background-attachment:local !important;
}
html.mobile-runtime body.main-game-body.castle-nwind-shell .game.castle-screen,
html.mobile-runtime body.main-game-body.land-nwind-shell .land-screen.land-nwind-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;
}
html.mobile-runtime body.main-game-body.castle-nwind-shell .castle-stage,
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;
background-attachment:local !important;
}
/* STEP80: World mobile/desktop navigation arrows must stay above map objects. */
body.main-game-body.world-nwind-shell .world-nav-arrow,
body.main-game-body.world-nwind-shell .arrow{
z-index:12000 !important;
pointer-events:auto !important;
}
body.main-game-body.world-nwind-shell .arrow{
background:linear-gradient(#7b3a12,#3b1607) !important;
border:1px solid rgba(255,214,120,.78) !important;
border-radius:12px !important;
box-shadow:0 5px 12px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.10) !important;
padding:5px !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .arrow{
z-index:12000 !important;
width:46px !important;
height:34px !important;
background:linear-gradient(#7b3a12,#3b1607) !important;
border:1px solid rgba(255,214,120,.78) !important;
border-radius:12px !important;
box-shadow:0 5px 12px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.10) !important;
padding:5px !important;
}
/* STEP81: world arrow centering and battle report configurable unit icon size. */
body.main-game-body.world-nwind-shell .world-nav-arrow-up,
body.main-game-body.world-nwind-shell .world-nav-arrow-down{
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
z-index:12000 !important;
display:block !important;
width:46px !important;
height:34px !important;
}
body.main-game-body.world-nwind-shell .world-nav-arrow-up{top:18px !important;}
body.main-game-body.world-nwind-shell .world-nav-arrow-down{bottom:76px !important;}
body.main-game-body.world-nwind-shell .world-nav-arrow-up .arrow,
body.main-game-body.world-nwind-shell .world-nav-arrow-down .arrow{
left:0 !important;
top:0 !important;
bottom:auto !important;
}
.nwind-report-detail-page .battle-unit-icon img{
width:var(--battle-unit-icon-size,34px) !important;
height:var(--battle-unit-icon-size,34px) !important;
object-fit:contain !important;
}
/* STEP82: desktop world bottom arrow is raised above the coordinate plate. */
body.main-game-body.world-nwind-shell .world-nav-arrow-down{
bottom:76px !important;
}
html.mobile-runtime body.main-game-body.world-nwind-shell .world-nav-arrow-down{
bottom:18px !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. */
@media (max-width:760px){
body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-loss-row,
body.battle-report-page-nwind .battle-unit-loss-row,
.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;
}
body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-name,
body.battle-report-page-nwind .battle-unit-name,
.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;
}
body.battle-report-page-nwind .nwind-report-detail-card .battle-unit-count,
body.battle-report-page-nwind .battle-unit-count,
.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: topbar resource icons configurable through config/topbar_icons_config.php -> resources. */
.game-topbar-resources{
gap:var(--topbar-resource-gap-desktop,12px) !important;
}
.game-topbar-resources .top-resource-item{
gap:var(--topbar-resource-item-gap-desktop,4px) !important;
font-size:var(--topbar-resource-font-size-desktop,13px) !important;
}
.game-topbar-resources .top-resource-item img{
width:var(--topbar-resource-icon-size-desktop,18px) !important;
height:var(--topbar-resource-icon-size-desktop,18px) !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
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: new World map tiles 300x190 + optional stone overlay.
The World no longer uses old 64x32 grass squares. Tile size and stone
random overlay are configured in config/world_object_offsets_config.php. */
body.main-game-body.world-nwind-shell .world-tile-new{
position:absolute !important;
transform:none !important;
background-repeat:no-repeat !important;
background-size:100% 100% !important;
background-position:center center !important;
pointer-events:auto !important;
}
body.main-game-body.world-nwind-shell .world-stone-overlay{
position:absolute !important;
transform:translate(-50%,-65%) !important;
transform-origin:50% 100% !important;
pointer-events:none !important;
user-select:none !important;
}
body.main-game-body.world-nwind-shell .game.world-screen .obj{
margin-left:0 !important;
margin-top:0 !important;
}
body.main-game-body.world-nwind-shell .game.world-screen .tile.world-tile-new{
transform:none !important;
}
body.main-game-body.world-nwind-shell .world-tile-new::after{
inset:0 !important;
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) !important;
}
/* STEP109: World zoom controls */
body.main-game-body.world-nwind-shell .world-zoom-controls{
position:absolute;
top:var(--world-controls-top,18px);
left:50%;
transform:translateX(calc(-50% + var(--world-controls-offset-x, 0px)));
z-index:3100;
display:flex;
align-items:center;
gap:6px;
padding:5px 8px;
border:1px solid rgba(242,190,93,.75);
border-radius:10px;
background:linear-gradient(180deg,rgba(111,55,16,.96),rgba(50,18,5,.96));
box-shadow:0 5px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
color:#ffe8ad;
font-weight:700;
text-shadow:0 1px 0 #000;
}
body.main-game-body.world-nwind-shell .world-zoom-btn,
body.main-game-body.world-nwind-shell .world-home-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 7px;
border:1px solid rgba(255,218,130,.65);
border-radius:6px;
background:rgba(54,20,5,.88);
color:#ffe8ad;
text-decoration:none;
box-sizing:border-box;
}
/* STEP186: размер кнопки "Мой замок" — раньше на мобильных текст переносился на 2 строки
и не помещался в кнопку (высота была фиксирована). Теперь размер настраивается через
config/world_view_config.php (home_button.desktop/mobile), а white-space:nowrap вместе
с auto-высотой не даёт тексту переноситься/обрезаться на любом экране. */
body.main-game-body.world-nwind-shell .world-home-btn{
min-width:var(--world-home-btn-min-w-desktop, 78px);
height:auto;
min-height:24px;
padding:4px var(--world-home-btn-pad-x-desktop, 8px);
font-size:var(--world-home-btn-font-desktop, 14px);
white-space:nowrap;
}
@media(max-width:820px){
body.main-game-body.world-nwind-shell .world-zoom-controls{top:var(--world-controls-mobile-top,18px);transform:translateX(calc(-50% + var(--world-controls-mobile-offset-x, 0px)));}
body.main-game-body.world-nwind-shell .world-home-btn{
min-width:var(--world-home-btn-min-w-mobile, 66px);
padding:4px var(--world-home-btn-pad-x-mobile, 6px);
font-size:var(--world-home-btn-font-mobile, 12px);
}
}
/* 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: World clicks are handled by isometric tiles, not by castle/bot images. */
body.main-game-body.world-nwind-shell .world-object-visual,
body.main-game-body.world-nwind-shell .obj.world-object-visual,
body.main-game-body.world-nwind-shell .world-stone-overlay{
pointer-events:none !important;
user-select:none !important;
}
body.main-game-body.world-nwind-shell .world-tile{
cursor:pointer;
pointer-events:auto !important;
}
body.main-game-body.world-nwind-shell .world-tile-has-target{
cursor:pointer;
}
/* STEP116: World tile highlight is a separate overlay above castles/bots.
Tile itself handles clicks; highlight layer is visual only and can be tuned in
config/world_object_offsets_config.php -> tile_highlight. */
body.main-game-body.world-nwind-shell .world-tile-highlight{
position:absolute !important;
pointer-events:none !important;
user-select:none !important;
opacity:0;
background:transparent;
transition:opacity .12s ease, background .12s ease, box-shadow .12s ease;
box-sizing:border-box;
}
/* STEP164: подсветка при наведении раньше включалась чисто через CSS-селектор соседнего
элемента (.world-tile:hover + .world-tile-highlight), что требовало, чтобы подсветка шла
в DOM сразу за своим тайлом. Теперь подсветка вынесена в отдельный .world-field слой
(см. index.php), поэтому hover-состояние переключается явно через JS-класс
world-tile-highlight-hover (см. функции worldTileHover/worldTileUnhover). */
body.main-game-body.world-nwind-shell .world-tile-highlight.world-tile-highlight-hover{
opacity:1;
background:var(--world-tile-highlight-hover, rgba(255,230,0,.22));
box-shadow:var(--world-tile-highlight-shadow-hover, 0 0 7px rgba(255,230,0,.95));
}
body.main-game-body.world-nwind-shell .world-tile-highlight.world-tile-highlight-selected{
opacity:1;
background:var(--world-tile-highlight-selected, rgba(255,220,0,.36));
box-shadow:var(--world-tile-highlight-shadow-selected, 0 0 9px rgba(255,235,0,1));
}
/* Old pseudo highlight is disabled, otherwise it stays below objects with the tile. */
body.main-game-body.world-nwind-shell .world-tile::after,
body.main-game-body.world-nwind-shell .world-tile-new::after{
display:none !important;
}
/* STEP117: make world tile highlight visible above objects; highlight div is rendered per tile. */
body.main-game-body.world-nwind-shell .world-tile-highlight{
mix-blend-mode:screen;
border:1px solid rgba(255,245,80,.45);
}
/* 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;
}
/* STEP409: раньше топбар на странице Замок (index.php) и топбар внутри
отдельных страниц зданий (_topbar.php) могли визуально показывать РАЗНЫЙ
размер шрифта ресурсов — хотя оба используют один и тот же конфиг
(config/topbar_icons_config.php) и одну и ту же CSS-переменную, где-то по
пути в каскаде правило перебивалось другим (например по @media (max-width:
980px), которое реагирует на ширину окна браузера, а не только на реальный
мобильный телефон). Этот блок стоит в самом конце файла специально — чтобы
гарантированно оказаться последним в каскаде и окончательно унифицировать
размер в обоих местах, независимо от остальных правил выше.
Заодно с этим же шагом убрана вместимость ("/200") из отображения ресурсов
в топбаре — теперь показывается только текущее количество, что и решает
проблему "не помещается". */
.game-topbar .game-topbar-resources .top-resource-item{
font-size:var(--topbar-resource-font-size-desktop,13px) !important;
}
html.mobile-runtime .game-topbar .game-topbar-resources .top-resource-item{
font-size:var(--topbar-resource-font-size-mobile,9px) !important;
}
@media (max-width:980px), (pointer:coarse){
.game-topbar .game-topbar-resources .top-resource-item{
font-size:var(--topbar-resource-font-size-mobile,9px) !important;
}
}