/* The Hearth view and its shared navigation chrome. */
.game-shell{display:block}
.rail{position:sticky;top:0;z-index:20;width:100%;height:auto;display:flex;flex-direction:row;align-items:center;gap:14px;padding:9px max(16px,calc((100vw - 1600px)/2));background:linear-gradient(90deg,#1d2424,#101617 72%);border-right:0;border-bottom:1px solid #48443a;box-shadow:0 4px 24px #0005}
.rail-brand{display:flex;align-items:center;gap:10px;flex:none;padding:0 18px 0 0;border-right:1px solid #47453d}
.rail-brand .sigil{width:43px;height:43px;margin:0;border-radius:9px;background:radial-gradient(circle at 30% 20%,#6b4726,#33281f 70%);box-shadow:0 2px 10px #0007,inset 0 0 0 2px #c9945540;font-size:1.17rem;font-weight:bold}
.rail-brand strong,.rail-brand small{display:block;font-family:Georgia,serif;letter-spacing:.12em;line-height:1.1}
.rail-brand strong{font-size:1rem;color:#f6d6a3}.rail-brand small{font-size:.6rem;color:#bba789;margin-top:4px}
.rail-caption{display:none}
.rail nav{display:flex;flex:1;min-width:0;gap:4px;overflow:auto;scrollbar-width:none}.rail nav::-webkit-scrollbar{display:none}.rail .nav{min-height:39px;display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;padding:8px 11px;border-radius:7px;color:#c5c7ba}
.rail .nav span{width:20px;text-align:center;font-size:1.1rem;color:#a89977}
.rail .nav:hover:not(:disabled){background:#ffffff0a;color:#f5dfb9}
.rail .nav.active{background:linear-gradient(90deg,#71502b7d,#382b1e3b);border-color:#9e724657;box-shadow:inset 3px 0 #e3a955;color:#ffe0ab}
.rail .nav.active span{color:#f4b761}.rail .nav.disabled{opacity:.45}
.rail-foot{flex:none;margin:0;padding:4px 0 4px 14px;border-left:1px solid #343b38;font-size:.72rem}.rail-foot small{padding-left:14px;color:#89938e}
.connection-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#79bc98;box-shadow:0 0 8px #79bc98}
.workspace{max-width:1650px;min-width:0}.bar h2{font:1.6rem Georgia,serif}.bar h2 small{font: .78rem ui-monospace,monospace;margin-left:7px}
.resources{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.resource{min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border-color:#4a473e;background:linear-gradient(140deg,#292923,#1a2020)}
.resource img{flex:none;width:34px;height:34px;filter:drop-shadow(0 2px 3px #0007)}.resource div{min-width:0}.resource span{font-size:.68rem;color:#b8b5a6}.resource strong{display:block;line-height:1.1;font-size:1.1rem}.resource small{font-size:.58rem;white-space:nowrap}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f0b663;outline-offset:2px}
.village-page{padding-bottom:30px}.village-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:8px 0 15px}
.village-heading h1{font:2rem Georgia,serif;margin:0;color:#f4e4c4}.village-heading .muted{margin:4px 0 0;font-size:.83rem}
.village-loyalty{padding:8px 11px;background:#243128;border:1px solid #46604b;border-radius:6px;color:#a9c3ab;font-size:.72rem;white-space:nowrap}.village-loyalty strong{color:#e1ebd9;font-size:.87rem;margin-left:8px}
.village-main{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:14px;align-items:start}.village-scene-panel{padding:0;overflow:hidden;border-radius:10px;border-color:#69573e}
.village-scene-header,.scene-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 13px;background:linear-gradient(90deg,#5a452d,#252b28);color:#f5dbab;font-size:.78rem}
.village-scene-header span,.scene-footer{color:#c2b6a1;font-size:.68rem}.scene-footer{background:#1a201e;border-top:1px solid #6b5a42}
.village-scene{position:relative;aspect-ratio:1376/768;min-height:0;background:#758d55 url('/assets/village-reference.png') center / 100% 100% no-repeat}
.village-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#07110d59,transparent 30%,transparent 80%,#07110d32)}
.scene-building{position:absolute;z-index:1;display:flex;align-items:center;gap:4px;padding:4px 7px 4px 4px;border:1px solid #d6a967a8;border-radius:5px;background:#111915e8;box-shadow:0 3px 10px #000a;color:#f8e7c7;font-size:.71rem;white-space:nowrap;transform:translate(-50%,-50%);transition:background .15s,transform .15s}
.scene-building:hover,.scene-building.active{background:#76502adf;border-color:#f5cb80;transform:translate(-50%,-50%) scale(1.05)}
.scene-level{display:grid;place-items:center;min-width:22px;height:22px;border-radius:3px;background:#9d6a33;color:#fff4d4;font-weight:700}
.scene-hall{left:51%;top:28%}.scene-bough-yard{left:70%;top:29%}.scene-masonry-yard{left:24%;top:70%}.scene-storehouse{left:14%;top:59%}.scene-training-yard{left:28%;top:34%}.scene-wall{left:51%;top:83%}
.village-sidebar{display:grid;gap:10px}.village-info{padding:13px;border-radius:8px;border-color:#4a473e}.village-info h3{font:1.05rem Georgia,serif;color:#f3d5a2;margin:0 0 7px}
.building-detail{background:linear-gradient(160deg,#352b22,#1a2220 65%)}.detail-title{display:flex;gap:11px;align-items:center}.building-glyph{display:grid;place-items:center;width:44px;height:44px;background:#604127;border:1px solid #ae7d4e;border-radius:7px;color:#f7cc86;font-size:1.6rem}
.detail-title h2{font:1.3rem Georgia,serif;margin:0}.detail-title span:not(.building-glyph){color:#bdb4a5;font-size:.7rem}.building-detail p:not(.eyebrow){color:#c8c8b8;font-size:.76rem;line-height:1.5;min-height:34px}
.building-detail small{display:block;color:#9ea69c;font-size:.64rem;line-height:1.4;margin-top:8px}.primary-action{width:100%;background:linear-gradient(#bb854b,#89582e);border-color:#d39b5b;color:#fff5dd;font-weight:700}.primary-action:hover:not(:disabled){background:#b87939}
.village-status-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #404640;font-size:.72rem}.village-status-row span{color:#aeb2a8}.village-status-row strong{text-align:right;font-weight:600}.village-info time{display:block;color:#cda572;font-size:.67rem;margin:-3px 0 7px;text-align:right}
.job-line{padding:3px 0 7px;font-size:.69rem;color:#d7dacd}.job-line time{margin:1px 0 0;text-align:left;color:#cda572}
.sidebar-note{color:#aab2a6;font-size:.68rem;margin:0 0 6px}.production-line{display:flex;align-items:center;gap:7px;padding:5px 0;border-top:1px solid #404640;font-size:.72rem}.production-line img{width:21px;height:21px}.production-line strong{margin-left:auto;color:#e8c38b}
.village-bottom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:14px;margin-top:14px}.village-bottom>.panel{border-radius:8px}.village-bottom h3{font:1.15rem Georgia,serif;color:#f3d5a2}.village-buildings .building-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.village-buildings .building{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;padding:9px;border-color:#434b42;background:#1a2421}.village-buildings .building.active{border-color:#bc854b;background:#3a3024}.building-list-icon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:5px;background:#3e3528;color:#e8b879;font-size:1.3rem}.building-list-copy{min-width:0;flex:1}.building-list-copy strong{display:block;color:#f2ddba;font-size:.78rem}.building-list-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem}.village-buildings .building em{font-style:normal;white-space:nowrap;color:#ebc68a;font-size:.7rem}
.village-companies .unit-list{max-height:122px;overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));font-size:.73rem}.village-companies .recruit{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:8px}.recruit label{display:grid;gap:4px;color:#aaa;font-size:.68rem}.recruit select,.recruit input{min-width:0;width:100%}.recruit button{grid-column:1/-1;background:#62462a;border-color:#a87743;color:#ffe3af}.village-movements{grid-column:1/-1}.village-movements .movement{font-size:.77rem}
@media(max-width:1200px){.village-main{grid-template-columns:minmax(0,1fr) 250px}.village-bottom{grid-template-columns:1fr 1fr}.resources{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.village-main{grid-template-columns:1fr}.village-sidebar{grid-template-columns:repeat(3,minmax(0,1fr))}.village-bottom{grid-template-columns:1fr}.village-movements{grid-column:auto}}
@media(max-width:850px){.rail{position:relative;gap:10px;padding:8px 12px}.rail-brand{padding:0;border:0}.rail-brand strong,.rail-brand small,.rail-foot{display:none}.rail nav{gap:3px}.rail .nav{min-height:37px;padding:6px 9px}.rail .nav span{width:auto}.resources{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.bar-actions{width:100%;flex-wrap:wrap;align-items:end}.resources{grid-template-columns:repeat(2,minmax(0,1fr))}.village-heading{align-items:start;flex-wrap:wrap}.village-heading h1{font-size:1.55rem}.village-loyalty{font-size:.65rem}.village-scene{width:100%;height:auto;aspect-ratio:1376/768}.scene-building{font-size:0;padding:3px}.scene-building-name{display:none}.scene-level{min-width:26px;height:26px;font-size:.72rem}.village-sidebar{grid-template-columns:1fr}.village-buildings .building-list{grid-template-columns:1fr}.scene-footer span:last-child{display:none}}

/* Compact Village chrome and the building pages. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.resources{grid-template-columns:repeat(4,minmax(0,1fr))}
.village-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:45px;margin:0 0 8px;padding:5px 9px;border:1px solid #8b714a;border-radius:4px;background:linear-gradient(#e9d8aa,#cdb785);box-shadow:inset 0 1px #fff4d0,0 3px 12px #0005;color:#3e2c1b;font-family:Georgia,serif}
.village-identity,.village-stocks,.village-stock{display:flex;align-items:center;gap:5px}.village-identity{min-width:0}.village-identity>span{color:#78532e;font-size:1.1rem}.village-identity select{max-width:320px;min-width:180px;padding:3px 19px 3px 3px;border:0;background:transparent;color:#422c16;font-weight:700;text-overflow:ellipsis}.village-identity strong{font-size:.7rem;white-space:nowrap;color:#705433}.village-stocks{flex-wrap:wrap;justify-content:flex-end;gap:0;border:1px solid #a98b5c;border-radius:3px;background:#ead8a8}.village-stock{min-height:28px;padding:2px 7px;border-right:1px solid #b8a075;white-space:nowrap;font: .76rem ui-monospace,monospace}.village-stock:last-child{border-right:0}.village-stock img{width:20px;height:20px}.village-stock strong{font-weight:700}
.village-time{display:flex;align-items:center;gap:6px;margin-left:auto;color:#695034;font: .69rem ui-monospace,monospace;white-space:nowrap}.village-time b{color:#372717;font-size:.76rem;font-variant-numeric:tabular-nums}
.village-queue{margin-top:12px;border-radius:8px}.village-queue .panel-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:11px}.village-queue .panel-head h3{margin:2px 0 0;color:#f0cd96;font:1.12rem Georgia,serif}.village-queue .panel-head>span,.queue-eyebrow{color:#b9baa9;font-size:.69rem}.queue-eyebrow{letter-spacing:.12em}.queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}.queue-card{padding:10px 11px;border:1px solid #5c624f;border-radius:6px;background:linear-gradient(140deg,#26342b,#202721)}.queue-card-top{display:flex;justify-content:space-between;gap:8px;color:#d9b784;font-size:.7rem}.queue-card-top time{font:700 .8rem ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#fff0cb}.queue-card>strong{display:block;margin:8px 0 10px;font-size:.84rem;color:#f1e7d3}.queue-card>small{display:block;margin-top:6px;color:#afb9ad;font-size:.65rem}.queue-track{height:6px;overflow:hidden;border-radius:6px;background:#111913;box-shadow:inset 0 1px 3px #0009}.queue-track span{display:block;width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,#ac712e,#edd18b);transition:width .8s linear}.queue-empty{margin:2px 0;color:#b8bfb2;font-size:.77rem}.village-queue-compact{padding:12px;background:#222b25}.village-queue-compact .queue-grid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.village-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:start}.village-scene-panel{min-width:0}.village-scene{background-image:url('/assets/village-main.png')}.village-scene:after{background:linear-gradient(0deg,#11190b24,transparent 25%,transparent 80%,#11190b18)}
.village-scene .scene-building{left:var(--x);top:var(--y);padding:3px 7px;border:1px solid #f5d996;background:#17211bf0;border-radius:5px;box-shadow:0 3px 8px #000b,0 0 0 2px #2719129e;color:#fff1c3;font-size:.74rem;display:flex;align-items:center;gap:4px;cursor:pointer;z-index:5;transition:all .15s ease}.village-scene .scene-building::before{content:"";position:absolute;inset:-36px -46px;z-index:-1;border-radius:12px;background:transparent;pointer-events:auto}.village-scene .scene-building:hover::before{background:radial-gradient(ellipse at center,rgba(250,215,140,.32) 0%,rgba(250,215,140,.08) 55%,transparent 75%);box-shadow:0 0 16px rgba(245,203,128,.3)}.village-scene .scene-level{width:20px;height:20px;min-width:20px;background:#5d4026;border-radius:3px;font-size:.72rem;font-weight:700;display:grid;place-items:center}.village-scene .scene-building-name{display:inline-block;font-weight:600;font-size:.72rem;letter-spacing:-.2px}.village-scene .scene-building:hover,.village-scene .scene-building:focus-visible,.village-scene .scene-building.active{z-index:10;background:#b97d37;box-shadow:0 0 0 3px #fff2bd9e,0 5px 14px #000a;transform:translate(-50%,-50%) scale(1.08)}
.village-summary{display:grid;gap:9px}.village-summary .panel{padding:12px;border-radius:7px}.village-summary h3,.village-directory h3,.village-outbound h3{font:1.05rem Georgia,serif;color:#f0cd96;margin:0 0 7px}.village-summary small{display:block;margin-top:8px;color:#aeb5a9;font-size:.65rem}.village-summary .production-line{gap:5px;padding:4px 0}.village-summary .production-line strong{font-size:.72rem}.village-summary .job-line{border-top:1px solid #414743;padding:7px 0}.village-summary .job-line strong{display:block}.village-summary .job-line time{color:#d6b88b;font-size:.65rem}.village-summary .muted{font-size:.72rem;margin:6px 0}.garrison-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 7px;font-size:.69rem}.garrison-list span{display:flex;justify-content:space-between;gap:4px;border-bottom:1px solid #39403b;padding:3px 0}.garrison-list strong{color:#f5d197}
.village-summary h4{margin:12px 0 6px;color:#dbbb88;font-size:.75rem;font-weight:600}.village-summary [data-live-due],.village-outbound [data-live-due]{font:700 .72rem ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#f4d4a5}
.village-directory{margin-top:12px;border-radius:8px}.village-directory .panel-head{margin-bottom:8px}.village-directory-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.village-directory-grid button{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:1px 5px;min-width:0;padding:7px;background:#1c2723;text-align:left}.village-directory-grid button span{grid-row:span 2;color:#e8b672;font-size:1.2rem;text-align:center}.village-directory-grid button strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:#f1ddb9}.village-directory-grid button small{color:#afb4a7;font-size:.64rem}.village-outbound{margin-top:12px}
#building-dialog{width:min(550px,calc(100vw - 24px));max-height:calc(100vh - 28px);padding:0;border:1px solid #b58e58;border-radius:9px;background:#1a201e;color:#eee5d3;box-shadow:0 28px 80px #000c;overflow:auto}#building-dialog::backdrop{background:#070b0bc9;backdrop-filter:blur(3px)}.building-dialog-top{display:flex;align-items:center;gap:12px;padding:14px 17px;border-bottom:1px solid #705536;background:linear-gradient(115deg,#59402a,#252923)}.building-dialog-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid #c09154;border-radius:7px;background:#6c4a2d;color:#ffe2a3;font-size:1.5rem}.building-dialog-top small{font-size:.65rem;letter-spacing:.14em;color:#dfbe8a}.building-dialog-top h2{margin:1px 0;font:1.45rem Georgia,serif;color:#fff0d3}.dialog-close{margin-left:auto;border:0;background:transparent;color:#f2dcc0;font-size:1.5rem;padding:0 7px}.building-dialog-body{padding:16px 18px}.building-dialog-body>p{margin:0 0 13px;color:#cbd0c4}.building-effect{padding:10px 12px;border-left:3px solid #dca662;background:#29342b;color:#f1d6a7;font-weight:600}.building-action{margin-top:15px;padding-top:13px;border-top:1px solid #424944}.building-action h3{margin:0 0 8px;font:1.08rem Georgia,serif;color:#f1d3a4}.building-action p{font-size:.76rem;color:#afb6aa}.upgrade-cost{display:flex;gap:15px;flex-wrap:wrap}.upgrade-cost span{display:flex;align-items:center;gap:5px;color:#f4debb;font-size:.85rem}.building-hint{margin:8px 0}.building-action button:not(.dialog-close){background:#8b5c31;border-color:#c59456;color:#fff0d0}.building-action button:disabled{opacity:.5}.building-form{display:grid;grid-template-columns:1fr 100px;gap:8px}.building-form label{display:grid;gap:4px;min-width:0;color:#c5c8b9;font-size:.72rem}.building-form select,.building-form input{width:100%;min-width:0}.building-form button{grid-column:1/-1}.building-form:has(#transfer-target){grid-template-columns:1fr 110px}.building-form:has(#transfer-target) label:first-child{grid-column:1/-1}
@media(max-width:1050px){.village-layout{grid-template-columns:1fr}.village-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.village-directory-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.village-toolbar{align-items:stretch;flex-direction:column;gap:3px}.village-identity select{max-width:calc(100vw - 100px)}.village-stocks{justify-content:space-between}.village-stock{flex:1;justify-content:center;padding:2px 3px;font-size:.66rem}.village-stock img{width:17px;height:17px}.village-summary{grid-template-columns:1fr}.village-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.village-scene-header span,.scene-footer span:last-child{display:none}.village-scene .scene-level{min-width:20px;width:20px;height:20px;font-size:.64rem}}
@media(max-width:700px){.village-time{margin-left:0;justify-content:flex-end}.village-queue .panel-head{align-items:start}}
@media(prefers-reduced-motion:reduce){.queue-track span{transition:none}}

.village-scene .scene-building.is-locked{border-color:#a9a398;color:#d9d7ca;background:#29302bbd}.village-scene .scene-building.is-locked .scene-level{background:#555a55}
.village-directory h4{font:1rem Georgia,serif;color:#bfbdac;margin:18px 0 9px}.locked-buildings button{opacity:.64;background:#1b211e}.locked-buildings button:hover{opacity:.95}.locked-buildings button small{white-space:normal;line-height:1.25}
#building-dialog:has(.building-table){width:min(850px,calc(100vw - 24px))}.building-time{display:block;margin-top:8px;color:#c6ba9d;font-size:.75rem}
.building-table{display:grid;gap:3px}.building-table h4{margin:13px 0 4px;padding:6px 8px;background:#5d452a;color:#f5dfb8;font:.86rem Georgia,serif}.building-table-row{display:grid;grid-template-columns:minmax(165px,1.2fr) minmax(215px,1fr) 105px;align-items:center;gap:8px;min-height:50px;padding:5px 8px;border:1px solid #473d30;background:#2a281f}.building-table-row.locked{opacity:.65}.building-row-name{display:grid;grid-template-columns:30px 1fr;gap:1px 5px;align-items:center;text-align:left;padding:0;border:0;background:none}.building-row-name span{grid-row:span 2;color:#ecc488;font-size:1.3rem}.building-row-name strong{font-size:.8rem;color:#f7e1bd}.building-row-name small{font-size:.66rem;color:#c5b9a4}.row-cost{display:grid;gap:2px}.row-cost .upgrade-cost{gap:7px}.row-cost .upgrade-cost span{font-size:.72rem}.row-cost .upgrade-cost img{width:16px;height:16px}.row-cost small{color:#bdb3a2;font-size:.67rem}.row-requirements{grid-column:2/4;color:#c5bda8;font-size:.75rem}.building-table-row>button:last-child:not(.building-row-name){padding:6px 8px;background:#80552f;border-color:#c99656;color:#ffe7bf;font-size:.76rem}
.unit-rules{display:grid;gap:5px;margin:8px 0 12px}.unit-rule{display:grid;grid-template-columns:minmax(110px,1fr) auto;gap:4px 8px;align-items:center;padding:8px;border:1px solid #3f4a40;border-radius:5px;background:#222a24}.unit-rule strong{color:#f0d5a9;font-size:.8rem}.unit-rule small{grid-column:1/-1;color:#c2c8ba;font-size:.69rem}.unit-rule .upgrade-cost{gap:7px}.unit-rule .upgrade-cost span{font-size:.7rem}.unit-rule .upgrade-cost img{width:15px;height:15px}.unit-rule.locked{opacity:.55}.support-list>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #424a43;font-size:.76rem}.support-list button{padding:5px 8px}
.battle-simulator{display:grid;gap:12px}.simulator-heading{display:flex;align-items:end;justify-content:space-between;gap:12px}.simulator-heading h3{margin:0}.simulator-heading p{margin:4px 0 0}.simulator-heading label{display:grid;gap:4px;min-width:126px;color:#d7d5c9;font-size:.7rem}.simulator-heading input{width:100%}.simulator-table-wrap{overflow-x:auto;border:1px solid #4c4a3c;border-radius:5px}.simulator-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.72rem}.simulator-table th,.simulator-table td{padding:7px 8px;border-bottom:1px solid #41463e;text-align:right;white-space:nowrap}.simulator-table thead{background:#5c442c;color:#ffe4b1}.simulator-table th:first-child,.simulator-table td:first-child{text-align:left}.simulator-table tbody th{color:#efd3a4;font-weight:600}.simulator-table tbody tr:nth-child(even){background:#222922}.simulator-table input{width:86px;padding:4px 6px;text-align:right}.simulator-assumptions{margin:0;color:#aeb6aa;font-size:.68rem;line-height:1.45}.simulator-result{display:grid;gap:9px;padding:11px;border:1px solid #55604c;border-radius:6px;background:#242d25}.simulator-result h4{margin:0;font:1rem Georgia,serif}.simulator-result.attacker-wins{border-color:#6d9d6a}.simulator-result.attacker-wins h4{color:#c1e0ae}.simulator-result.defender-wins{border-color:#a66d5d}.simulator-result.defender-wins h4{color:#f0b5a2}.simulator-totals{display:flex;flex-wrap:wrap;gap:6px}.simulator-totals span{padding:4px 7px;border:1px solid #515e50;border-radius:3px;background:#19211b;color:#c3cbbd;font-size:.68rem}.simulator-totals strong{margin-left:4px;color:#ffe1ac;font-size:.75rem}.simulator-results{min-width:690px}
.simulator-options{display:flex;flex-wrap:wrap;gap:8px}.simulator-options label{min-width:90px}.simulator-options input{max-width:110px}@media(max-width:620px){.simulator-heading{align-items:start;flex-direction:column}}
.world-speed-badge{padding:2px 5px;border:1px solid #b59a65;border-radius:3px;background:#f4e6b9;color:#6b4820;font:700 .65rem ui-sans-serif,system-ui,sans-serif;white-space:nowrap}
.march-units{display:grid;gap:5px;max-height:260px;overflow:auto;margin-top:12px}.march-units>strong{color:#edce9c;font-size:.77rem}.composer .march-units label{display:grid;grid-template-columns:1fr auto 74px;align-items:center;gap:7px;margin:0;padding:4px 0;border-bottom:1px solid #343d37;font-size:.74rem;color:#dfd4c3}.march-units small{color:#aeb4a5}.march-units input{padding:5px;min-width:0}
[hidden]{display:none!important}.auth-panel #toggle-recovery{margin-top:12px;padding:6px 0;border:0;color:#d8bc91;text-decoration:underline}.auth-panel #recover{display:grid;gap:12px}.auth-panel #recover p{margin:0 0 2px;color:#bbb6a7}
@media(max-width:700px){.building-table-row{grid-template-columns:1fr 80px}.building-row-name{grid-column:1/-1}.row-requirements{grid-column:1/-1}.row-cost .upgrade-cost{flex-wrap:wrap}.unit-rule{grid-template-columns:1fr}}
/* Tribal Wars Unit Icons & Widgets */
.unit-icon{width:22px;height:22px;vertical-align:middle;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px #0008;border:1px solid #7c6240}
.unit-icon-sm{width:18px;height:18px;vertical-align:middle;border-radius:2px;object-fit:cover;margin-right:4px}
.unit-icon-table{width:28px;height:28px;vertical-align:middle;border-radius:4px;object-fit:cover;border:1px solid #947146;box-shadow:0 2px 5px #000a}
.unit-header{display:flex;align-items:center;gap:8px}

/* Village View Right Side "Unidades" Widget */
.village-unidades-widget{padding:0!important;border:1px solid #7d603a;border-radius:6px;background:linear-gradient(180deg,#f3e5c0,#e5d1a1);color:#3f2c1b;box-shadow:0 3px 12px #0006;overflow:hidden}
.unidades-head{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;background:linear-gradient(180deg,#e8cf99,#d1b272);border-bottom:1px solid #b39257}
.unidades-head h3{margin:0;font:bold 1.05rem Georgia,serif;color:#3d2712;letter-spacing:.02em}
.unidades-toggle{width:22px;height:22px;border:1px solid #9c7b46;border-radius:3px;background:#f5e2ba;color:#452e18;font-weight:700;display:grid;place-items:center;padding:0;cursor:pointer}
.unidades-subbar{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 9px;background:#e2c992;border-bottom:1px solid #c8a86a;font-size:.76rem;font-weight:700;color:#523a1e}
.subbar-arrow{background:none;border:0;color:#855a29;font-size:.8rem;padding:0 4px;cursor:pointer}
.unidades-list{display:grid;gap:2px;padding:8px 10px;min-height:40px}
.unidades-row{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:.78rem;border-bottom:1px dotted #caa96e}
.unidades-row:last-child{border-bottom:0}
.unidades-count{min-width:24px;text-align:right;color:#24160a}
.unidades-count strong{font-size:.9rem;font-weight:700}
.unidades-label{color:#3a291a;font-weight:600}
.unidades-label small{color:#6c5237;font-weight:400;margin-left:4px}
.unidades-empty{margin:4px 0;color:#6b533b;font-size:.74rem;font-style:italic}
.unidades-divider{margin:8px 0 4px;padding:3px 6px;background:#d8bc82;border-radius:3px;color:#4a331c;font-size:.68rem;font-weight:700}
.unidades-foot{padding:6px 10px;background:#edd7a6;border-top:1px solid #cbb075;text-align:left}
.unidades-recruit-link{background:none!important;border:0!important;padding:0!important;color:#633e14!important;font-weight:700;font-size:.8rem;cursor:pointer;text-decoration:none}
.unidades-recruit-link:hover{text-decoration:underline}
.unidades-pop-line{display:block;padding:5px 10px;background:#dfc68f;color:#5c442c;font-size:.66rem;border-top:1px solid #caa86c}

/* Composer unit line */
.composer-unit-line{display:grid!important;grid-template-columns:32px 1fr 75px!important;align-items:center!important;gap:8px!important;padding:5px 0!important;border-bottom:1px solid #3d463f!important}
.composer-unit-line span{display:flex;flex-direction:column;font-size:.78rem;color:#f0e3cc}
.composer-unit-line span small{color:#a8b0a1}

/* Tribal Wars Reports View System */
.reports-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start;margin-top:6px}
.reports-sidebar{padding:12px;border-radius:8px;border:1px solid #4a4539;background:linear-gradient(170deg,#242b27,#19201d)}
.reports-sidebar h3{margin:0 0 10px;font:1.15rem Georgia,serif;color:#f3d7a8;border-bottom:1px solid #484b42;padding-bottom:6px}
.reports-nav{display:grid;gap:4px}
.rep-nav-btn{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:5px;background:none;border:1px solid transparent;color:#cad0c3;font-size:.8rem;text-align:left;cursor:pointer}
.rep-nav-btn:hover{background:#323d37;color:#fff2d4}
.rep-nav-btn.active{background:linear-gradient(90deg,#76502a,#3d2c1c);border-color:#b5854b;color:#ffe8bf;font-weight:700}

.reports-main-panel{padding:14px;border-radius:8px;border:1px solid #4c463b;background:#18201d}
.reports-top-bar{display:grid;gap:12px;padding:12px 14px;background:#1e2722;border:1px solid #475047;border-radius:6px;margin-bottom:14px}
.reports-filter-section{display:grid;gap:10px}
.reports-search-box{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.reports-search-box label{color:#d5dacd;font-size:.76rem;font-weight:600}
.search-input-group{display:flex;align-items:center;gap:6px;flex:1;max-width:440px}
.search-input-group input{flex:1;min-width:180px;padding:5px 9px;border:1px solid #545b53;border-radius:4px;background:#141a17;color:#fff;font-size:.76rem}
.classic-gold-btn{padding:5px 14px;background:linear-gradient(180deg,#8b6436,#614321);border:1px solid #b78a4c;border-radius:4px;color:#fff2d4;font-weight:700;font-size:.74rem;cursor:pointer}
.classic-gold-btn:hover{background:#9e723e}
.reports-outcome-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.74rem}
.filters-label{color:#b7bea9;font-size:.74rem;font-weight:600}
.filters-pills-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.classic-filter-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:4px;border:1px solid #4c564c;background:#242c27;color:#d5ddd0;font-size:.73rem;cursor:pointer;transition:background .12s,border-color .12s}
.classic-filter-pill:hover{background:#2f3a33;color:#fff}
.classic-filter-pill.active{border-color:#cca058;background:linear-gradient(90deg,#5e4425,#3e2e1c);color:#ffeed0;font-weight:700;box-shadow:inset 0 0 0 1px #e2b76b}
.classic-filter-pill.reset{background:none;border-color:#7a4522;color:#e89e58}
.status-indicator{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.rep-badge{margin-left:auto;padding:1px 6px;border-radius:10px;background:#171d1a;color:#abb2a6;font-size:.67rem;font-weight:700}
.rep-nav-btn.active .rep-badge{background:#412b18;color:#fce4be}

/* Unit troop table greyed-out and active states */
.unit-th-empty .unit-icon-table{opacity:.35;filter:grayscale(70%);border-color:#534a3f}
.unit-th-active .unit-icon-table{opacity:1;filter:drop-shadow(0 2px 4px #000);border-color:#c29452}
.active-val{color:#1a0f00!important;font-weight:700!important;font-size:.84rem}
.zero-val{color:#7d6b53!important;font-size:.75rem}
.loss-val{color:#9c1c1c!important;font-weight:700!important;background:#f5d9cc!important;font-size:.82rem}

/* Remove number spinners */
input.rp-unit-input::-webkit-outer-spin-button,
input.rp-unit-input::-webkit-inner-spin-button,
input[data-march-unit]::-webkit-outer-spin-button,
input[data-march-unit]::-webkit-inner-spin-button,
.march-units input::-webkit-outer-spin-button,
.march-units input::-webkit-inner-spin-button,
.rp-unit-inputs input::-webkit-outer-spin-button,
.rp-unit-inputs input::-webkit-inner-spin-button,
.troop-input-clean::-webkit-outer-spin-button,
.troop-input-clean::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.rp-unit-input,
input[data-march-unit],
.march-units input[type="number"],
.rp-unit-inputs input[type="number"],
.troop-input-clean {
  -moz-appearance: textfield;
  appearance: textfield;
}

.reports-table-wrap{overflow-x:auto}
.reports-table{width:100%;border-collapse:collapse;font-size:.77rem}
.reports-table th{background:#2a342f;color:#edd5aa;padding:8px 9px;text-align:left;border-bottom:2px solid #505c54;font-size:.73rem;letter-spacing:.04em}
.reports-table td{padding:8px 9px;border-bottom:1px solid #2d3631;color:#dbe0d6;vertical-align:middle}
.reports-table tbody tr.report-row{cursor:pointer;transition:background .12s}
.reports-table tbody tr.report-row:hover{background:#232d28}
.col-check{width:36px;text-align:center}
.col-date{width:130px;white-space:nowrap;color:#b2b8ab;font-variant-numeric:tabular-nums}
.col-subject{display:flex;align-items:center;gap:8px}
.report-status-dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 5px currentColor}
.dot-green{background:#4cd964;color:#4cd964}
.dot-yellow{background:#ffd60a;color:#ffd60a}
.dot-red{background:#ff453a;color:#ff453a}
.dot-blue{background:#5ac8fa;color:#5ac8fa}
.report-cmd-icon{font-size:.9rem}
.report-subject-link{background:none;border:0;color:#f0dfc2;font-size:.78rem;text-align:left;cursor:pointer;padding:0}
.report-subject-link:hover{color:#ffd899;text-decoration:underline}
.reports-empty{text-align:center;padding:28px 10px;color:#9ca296;font-style:italic}
.reports-bottom-bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #3c443f}
.danger-btn{background:#7c2d28;border-color:#b94a42;color:#ffdedb;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.75rem}
.danger-btn:hover{background:#963832}
.reports-count{color:#a4aaa0;font-size:.73rem}

/* Detailed Report View (Image 5 Replica) */
.report-detail-panel{max-width:880px;margin:0 auto;border:1px solid #7d6544;background:#18201d;border-radius:8px;padding:16px;box-shadow:0 6px 28px #0009}
.detail-top-nav{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #4a4539;margin-bottom:12px}
.nav-back-btn{background:#543f29;border:1px solid #9c7343;color:#ffe2b6;padding:6px 13px;border-radius:4px;font-weight:600;font-size:.78rem;cursor:pointer}
.nav-back-btn:hover{background:#6c5134}
.detail-header-card{display:grid;gap:5px;padding:10px 14px;background:#242d27;border:1px solid #4d574d;border-radius:6px;margin-bottom:14px}
.detail-subject-line{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#fff0d2}
.detail-time-line{display:flex;align-items:center;gap:8px;color:#abb2a6;font-size:.72rem}
.detail-time-line time{color:#dfc08f;font-weight:700}

/* Battle Banner Header */
.battle-winner-banner{text-align:center;margin-bottom:14px;border:1px solid #6b5538;border-radius:6px;overflow:hidden;background:#201d18}
.winner-title{margin:0;padding:10px 14px;font:bold 1.35rem Georgia,serif;letter-spacing:.03em;border-bottom:1px solid #634f35}
.winner-title.attacker-won{background:linear-gradient(90deg,#5e4428,#29382b,#5e4428);color:#d2f5ba}
.winner-title.defender-won{background:linear-gradient(90deg,#5e2d28,#3a201c,#5e2d28);color:#f7c0b5}
.battle-banner-img-wrap{max-height:220px;overflow:hidden;display:grid;place-items:center;background:#101413}
.battle-banner-img{width:100%;height:auto;object-fit:cover;display:block}

/* Combat Factors (Luck Bar & Morale) */
.combat-factors-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:10px 14px;background:#262d27;border:1px solid #49544a;border-radius:6px;margin-bottom:14px}
.luck-widget{display:grid;gap:5px;flex:1;max-width:360px}
.luck-header{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:#d5dacd}
.luck-val-group{display:flex;align-items:center;gap:6px}
.luck-header strong.luck-neg{color:#ff7b72}
.luck-header strong.luck-pos{color:#7ee787}
.luck-track{position:relative;height:12px;background:#131815;border:1px solid #4f5750;border-radius:6px;overflow:hidden}
.luck-center-mark{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#8b9487;z-index:2}
.luck-fill{position:absolute;top:0;bottom:0;height:100%}
.luck-fill.left{right:50%;background:linear-gradient(90deg,#d33d34,#ff6e65)}
.luck-fill.right{left:50%;background:linear-gradient(90deg,#3ea152,#62d378)}
.luck-clover{font-size:.82rem}
.morale-widget{font-size:.78rem;color:#cdd4c8}
.morale-widget strong{color:#f5dcab;font-size:.88rem;margin-left:5px}

/* Participant Box (Attacker & Defender) */
.participant-box{padding:12px;border:1px solid #5a4f3d;border-radius:6px;margin-bottom:12px;background:#1e2621}
.attacker-box{border-left:4px solid #b87a38}
.defender-box{border-left:4px solid #5c7e63}
.participant-header,.participant-origin{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-bottom:4px}
.participant-role{color:#d3b88b;font-weight:700}
.participant-origin span{color:#9ea597;font-size:.73rem}
.troop-roster-table-wrap{overflow-x:auto;margin-top:10px}
.troop-roster-table{width:100%;border-collapse:collapse;border:1px solid #484f47;text-align:center;font-size:.76rem}
.troop-roster-table th,.troop-roster-table td{padding:5px 6px;border:1px solid #3d453d}
.troop-roster-table thead{background:#2a332d}
.label-col,.row-label{width:95px;text-align:left!important;background:#28312b;color:#ddd6c8;font-weight:600}
.losses-row td{background:#231a19}
.loss-val{color:#ff8178;font-weight:700}
.zero-val{color:#6c7367}

/* Scouting Intel Box */
.scouting-intel-box{padding:12px;border:1px solid #4a6572;border-radius:6px;background:#1a252a;margin-bottom:12px}
.scouting-intel-box h4{margin:0 0 8px;font:bold .95rem Georgia,serif;color:#a8dcf0}
.intel-resources{display:flex;align-items:center;gap:14px;font-size:.78rem;color:#d5e5ec;margin-bottom:8px}
.intel-buildings strong{display:block;margin-bottom:6px;font-size:.76rem;color:#c1d8e2}
.intel-buildings-grid{display:flex;flex-wrap:wrap;gap:6px}
.intel-bldg-badge{padding:3px 7px;border-radius:4px;background:#24363d;border:1px solid #3d5863;color:#d9ecf5;font-size:.72rem}

/* Loot Box */
.loot-box{padding:10px 14px;border:1px solid #78613d;border-radius:6px;background:#29261c;margin-bottom:12px}
.loot-header{display:flex;align-items:center;gap:14px;font-size:.8rem;color:#f3dcaf}
.loot-items{display:flex;align-items:center;gap:12px}
.loot-items span{display:flex;align-items:center;gap:4px;font-weight:700;color:#ffeec9}
.res-icon{width:18px;height:18px;vertical-align:middle}
.loot-capacity{margin-left:auto;color:#bba783;font-size:.74rem}

/* Damage & Loyalty */
.damage-box,.loyalty-box{padding:10px 14px;border:1px solid #575245;border-radius:6px;margin-bottom:12px;background:#212722;font-size:.78rem;color:#ded8c7}
.damage-box h4,.loyalty-box h4{margin:0 0 6px;font:.92rem Georgia,serif;color:#f0d39e}
.damage-box p,.loyalty-box p{margin:2px 0}
.loyalty-box.conquered{border-color:#d49b42;background:#35291b}

/* Quick Action Links Footer */
.report-actions-footer{display:grid;gap:6px;padding-top:10px;border-top:1px solid #484b42;margin-top:14px}
.rep-action-link{background:none!important;border:0!important;padding:4px 0!important;text-align:left;color:#e8b571!important;font-weight:700;font-size:.8rem;cursor:pointer}
.rep-action-link:hover{text-decoration:underline;color:#ffd99b!important}


/* =============================================================
   PRAÇA DE REUNIÕES (RALLY POINT) OVERHAUL
   ============================================================= */

#building-dialog:has(.rally-point-wrap),
#building-dialog.rp-dialog {
  width: min(920px, calc(100vw - 24px));
}

.rp-dialog-body {
  padding: 14px 18px !important;
}

.rally-point-wrap {
  display: grid;
  gap: 14px;
}

.rp-building-desc {
  color: #c9cebe;
  font-size: .78rem;
  line-height: 1.45;
  padding: 8px 12px;
  background: #202722;
  border-left: 3px solid #b88b4f;
  border-radius: 4px;
}
.rp-building-desc p { margin: 0; }

/* Tabs Bar */
.rp-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 2px solid #5a422a;
  background: #171d1a;
  padding: 4px 6px 0;
  border-radius: 5px 5px 0 0;
}

.rp-tab-btn {
  background: #242c26;
  border: 1px solid #454d45;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  color: #dfd2be;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: all .15s ease;
}

.rp-tab-btn:hover {
  background: #363327;
  color: #ffe6bd;
}

.rp-tab-btn.active {
  background: #503823;
  color: #fff2d3;
  border-color: #8c6035;
  border-bottom: 2px solid #e0a359;
  margin-bottom: -2px;
  box-shadow: 0 -2px 6px #0004;
}

.rp-tab-btn.is-future {
  opacity: .55;
  font-style: italic;
  font-size: .72rem;
}
.rp-tab-btn.is-future:hover {
  opacity: .85;
}

.rp-notice-bar {
  padding: 8px 12px;
  background: #47261d;
  border: 1px solid #994c3d;
  color: #ffd8d0;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
}

/* Dispatch Grid Layout */
.rp-commands-view {
  display: grid;
  gap: 14px;
}

.rp-section-header h3 {
  margin: 0;
  font: 1.15rem Georgia, serif;
  color: #f7dfbe;
}

.rp-dispatch-grid {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 740px) {
  .rp-dispatch-grid {
    grid-template-columns: 1fr;
  }
}

.rp-units-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #1b221d;
  border: 1px solid #464a3e;
  border-radius: 6px;
  padding: 10px;
}

@media (max-width: 600px) {
  .rp-units-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rp-unit-column h4 {
  margin: 0 0 8px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #e5c38c;
  border-bottom: 1px solid #453b2f;
  padding-bottom: 4px;
  text-align: center;
}

.rp-unit-inputs {
  display: grid;
  gap: 6px;
}

.rp-unit-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.rp-unit-row.is-empty {
  opacity: .6;
}

.rp-unit-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex: none;
  transition: transform .1s;
}
.rp-unit-icon:hover {
  transform: scale(1.15);
}

.rp-unit-input {
  width: 52px;
  min-width: 44px;
  padding: 3px 4px;
  background: #121814;
  border: 1px solid #455245;
  border-radius: 3px;
  color: #fff;
  font-size: .74rem;
  text-align: right;
}
.rp-unit-input:focus {
  border-color: #d19e57;
  outline: none;
}

.rp-unit-avail {
  font-size: .7rem;
  color: #9ba395;
  cursor: pointer;
  white-space: nowrap;
}
.rp-unit-avail:hover {
  color: #fedfa4;
  text-decoration: underline;
}

/* Templates Sidebar */
.rp-templates-box {
  background: #1e2620;
  border: 1px solid #49493c;
  border-radius: 6px;
  padding: 10px;
}

.rp-templates-box h4 {
  margin: 0 0 8px;
  font-size: .78rem;
  color: #dfc191;
  border-bottom: 1px solid #453b2f;
  padding-bottom: 4px;
}

.rp-template-actions {
  display: grid;
  gap: 6px;
}

.rp-template-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 9px;
  background: #332619 !important;
  border: 1px solid #6b4d2e !important;
  border-radius: 4px;
  color: #f1dfc2 !important;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.rp-template-btn:hover {
  background: #4a3825 !important;
  border-color: #8f673e !important;
  color: #fff0d4 !important;
}

.rp-template-btn.rp-btn-clear {
  justify-content: center;
  background: #262c26 !important;
  border-color: #4b5247 !important;
  color: #bdc5b6 !important;
  margin-top: 4px;
}
.rp-template-btn.rp-btn-clear:hover {
  background: #333a32 !important;
  color: #e5ebe0 !important;
}

.rp-info-icon {
  font-size: .75rem;
  color: #b7a17f;
}

/* Form Bottom: Destination & Action */
.rp-form-bottom {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 650px) {
  .rp-form-bottom {
    grid-template-columns: 1fr;
  }
}

.rp-destination-box,
.rp-actions-box {
  background: #1a221d;
  border: 1px solid #464b40;
  border-radius: 6px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-box-title {
  font-size: .78rem;
  font-weight: 700;
  color: #edd1a1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rp-dest-modes {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rp-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #d1d8cb;
  font-size: .74rem;
  cursor: pointer;
}

.rp-input-with-action {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-target-field {
  flex: 1;
  padding: 7px 9px;
  background: #101612;
  border: 1px solid #4d574d;
  border-radius: 4px;
  color: #fff;
  font-size: .84rem;
  font-family: monospace;
}
.rp-target-field:focus {
  border-color: #e0a359;
  outline: none;
}

.rp-paste-icon {
  font-size: 1.1rem;
  color: #d19f5a;
  cursor: pointer;
  padding: 0 4px;
}

.rp-quick-targets {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.rp-quick-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.rp-quick-title {
  font-size: .69rem;
  color: #a4ad9f;
}

.rp-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rp-quick-tag {
  background: #253127 !important;
  border: 1px solid #425244 !important;
  color: #c9decb !important;
  font-size: .68rem !important;
  padding: 2px 7px !important;
  border-radius: 10px;
  cursor: pointer;
}
.rp-quick-tag:hover {
  background: #364939 !important;
  color: #e4f7e7 !important;
  border-color: #658569 !important;
}

.rp-action-buttons {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.rp-btn-command {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 3px 10px #0005;
}

.rp-btn-attack {
  background: linear-gradient(180deg, #783526, #512217) !important;
  border: 1px solid #a84b39 !important;
  color: #ffefe8 !important;
}
.rp-btn-attack:hover {
  background: linear-gradient(180deg, #914231, #632a1d) !important;
  border-color: #c45b46 !important;
}

.rp-btn-support {
  background: linear-gradient(180deg, #27526f, #183447) !important;
  border: 1px solid #3c7a9f !important;
  color: #e9f4ff !important;
}
.rp-btn-support:hover {
  background: linear-gradient(180deg, #326487, #21445d) !important;
  border-color: #5198c2 !important;
}

/* Active Movements Inside Rally Point */
.rp-active-movements {
  margin-top: 10px;
  background: #19201b;
  border: 1px solid #42473c;
  border-radius: 6px;
  padding: 12px;
}
.rp-active-movements h4 {
  margin: 0 0 10px;
  font-size: .82rem;
  color: #dfc498;
}

.rp-movements-table-wrap {
  overflow-x: auto;
}

.rp-movements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .74rem;
}
.rp-movements-table th,
.rp-movements-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #384138;
  text-align: left;
}
.rp-movements-table thead {
  background: #252e27;
  color: #e5d8be;
}

.rp-mvt-type {
  font-weight: 700;
  font-size: .73rem;
}
.rp-mvt-type.is-attack { color: #f5897c; }
.rp-mvt-type.is-support { color: #7cc3f5; }

.rp-mvt-units {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rp-mvt-unit-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px;
  background: #212923;
  border: 1px solid #434c44;
  border-radius: 3px;
  font-size: .7rem;
}

.rp-status-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .68rem;
  text-transform: capitalize;
}
.rp-status-tag.outbound { background: #443422; color: #ffdb9e; }
.rp-status-tag.returning { background: #26382b; color: #b1e0b9; }

/* Confirmation Screen (Images 2 & 3 Replica) */
.rp-confirmation-card {
  display: grid;
  gap: 14px;
  background: #1c241f;
  border: 1px solid #6b5539;
  border-radius: 6px;
  padding: 16px;
}

.rp-conf-header h3 {
  margin: 0;
  font: 1.25rem Georgia, serif;
  color: #fff0d2;
  border-bottom: 1px solid #574632;
  padding-bottom: 8px;
}

.rp-conf-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.rp-conf-info-table th,
.rp-conf-info-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #374037;
  text-align: left;
}
.rp-conf-info-table th {
  width: 160px;
  color: #d1b88e;
  font-weight: 600;
}

.rp-loot-cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffd899;
  font-weight: 600;
}

.rp-catapult-select {
  padding: 4px 8px;
  background: #121814;
  border: 1px solid #556254;
  border-radius: 4px;
  color: #fff;
  font-size: .78rem;
}

.rp-conf-troops-wrap {
  overflow-x: auto;
  border: 1px solid #495449;
  border-radius: 5px;
}

.rp-conf-table {
  width: 100%;
  min-width: 580px;
}

.rp-conf-note {
  padding: 8px 12px;
  background: #1f2c25;
  border: 1px solid #3a5e4b;
  border-radius: 4px;
  color: #b7e3ca;
  font-size: .74rem;
}
.info-bulb {
  font-size: .85rem;
  color: #72cca1;
}

.rp-conf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #4a3e2f;
}

.rp-btn-back {
  padding: 9px 16px;
  background: #38342c !important;
  border: 1px solid #635847 !important;
  color: #dfd5c4 !important;
  border-radius: 5px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
}
.rp-btn-back:hover {
  background: #4a4539 !important;
  color: #fff !important;
}

/* Troops Tab */
.rp-troops-tab {
  display: grid;
  gap: 14px;
}

.rp-troops-card {
  background: #1b231e;
  border: 1px solid #434c41;
  border-radius: 6px;
  padding: 12px;
}
.rp-troops-card h4 {
  margin: 0 0 10px;
  font-size: .84rem;
  color: #e5cb9e;
  border-bottom: 1px solid #3e443b;
  padding-bottom: 4px;
}

.rp-troops-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rp-troop-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #242e27;
  border: 1px solid #485448;
  border-radius: 5px;
}
.rp-troop-badge.is-foreign {
  background: #222e33;
  border-color: #3f5963;
}

.rp-troop-info strong {
  display: block;
  font-size: .85rem;
  color: #ffeed3;
}
.rp-troop-info span {
  font-size: .72rem;
  color: #b8c0b3;
}
.rp-troop-info small {
  display: block;
  font-size: .68rem;
  color: #92b8c9;
}

.rp-support-abroad-list {
  display: grid;
  gap: 6px;
}

.rp-support-abroad-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #232c25;
  border: 1px solid #465146;
  border-radius: 5px;
}

.rp-abroad-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
}
.rp-abroad-desc strong { color: #f4ddb4; }
.rp-abroad-desc span { color: #abb2a5; }

.rp-recall-btn {
  background: #603a27 !important;
  border: 1px solid #945839 !important;
  color: #ffdfcb !important;
  font-size: .72rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.rp-recall-btn:hover {
  background: #794a32 !important;
}

/* Simulator Tab */
.rp-simulator-tab {
  display: grid;
  gap: 12px;
}

.rp-sim-actions {
  display: flex;
  justify-content: flex-start;
  margin: 6px 0;
}

/* Nearby Tab */
.rp-nearby-tab {
  display: grid;
  gap: 12px;
}

.rp-nearby-list {
  display: grid;
  gap: 8px;
}

.rp-nearby-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #202822;
  border: 1px solid #444f43;
  border-radius: 5px;
}

.rp-nearby-info strong {
  display: block;
  color: #fff0d3;
  font-size: .84rem;
}
.rp-nearby-info span {
  font-size: .74rem;
  color: #d1b88e;
  margin-right: 8px;
}
.rp-nearby-info small {
  font-size: .7rem;
  color: #9aa294;
}

.rp-nearby-btns {
  display: flex;
  gap: 6px;
}

.rp-nearby-action {
  font-size: .74rem;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.rp-nearby-action.rp-action-attack {
  background: #6c2e22 !important;
  border: 1px solid #9b4131 !important;
  color: #ffded8 !important;
}
.rp-nearby-action.rp-action-support {
  background: #234863 !important;
  border: 1px solid #376f96 !important;
  color: #dcefff !important;
}

/* Placeholder Tab */
.rp-placeholder-card {
  text-align: center;
  padding: 40px 20px;
  background: #1d2520;
  border: 1px dashed #594f3e;
  border-radius: 6px;
  display: grid;
  place-items: center;
  gap: 8px;
}

.rp-placeholder-icon {
  font-size: 2.2rem;
}
.rp-placeholder-card h3 {
  margin: 0;
  font: 1.15rem Georgia, serif;
  color: #efd3a3;
}
.rp-placeholder-card p {
  margin: 0;
  color: #b1b8a9;
  font-size: .8rem;
  max-width: 440px;
}
.rp-badge-soon {
  margin-top: 6px;
  padding: 3px 10px;
  background: #473926;
  border: 1px solid #785c3b;
  color: #f7dfbe;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
}


/* =============================================================
   MAP HOVER POPUP & ATTACK INDICATORS (Pictures 1, 2 & 3)
   ============================================================= */

.map-hover {
  display: none;
  pointer-events: none;
  width: 550px !important;
  max-width: min(550px, calc(100vw - 16px), calc(100% - 16px)) !important;
  background: #f4e3b7 !important;
  color: #3b2812 !important;
  border: 2px solid #7c4c1a !important;
  border-radius: 4px;
  box-shadow: 0 10px 32px #000c, inset 0 0 0 1px #fff0cc !important;
  font-family: Georgia, serif !important;
  font-size: 13px;
  padding: 0 !important;
}

.map-hover.visible {
  display: block !important;
}

.map-hover:empty {
  display: none !important;
}

.hover-head {
  padding: 8px 11px;
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #99753e;
  font-size: 14px;
  color: #2b1c09;
}
.hover-head strong { font-weight: 700; }

.hover-info-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hover-info-grid th,
.hover-info-grid td {
  padding: 4px 10px;
  border-bottom: 1px solid #e5ce9e;
  text-align: left;
}
.hover-info-grid th {
  width: 100px;
  font-weight: 700;
  color: #4b361a;
  background: #ecd4a4;
}
.hover-info-grid td {
  color: #241607;
}

.hover-res-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  background: #f7ebcc;
  border-bottom: 1px solid #dfc793;
  font-size: 12px;
  font-weight: 600;
}
.hover-storage {
  margin-left: auto;
  color: #7a5a2e;
}

.hover-pop-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 3px 10px;
  background: #f9eed3;
  border-bottom: 1px solid #e5ce9e;
  font-size: 12px;
}

.hover-troops-table-wrap,
.hover-bldgs-table-wrap,
.hover-times-table-wrap {
  overflow-x: hidden !important;
  border-bottom: 1px solid #ceb37f;
}

.hover-troops-table,
.hover-bldgs-table,
.hover-times-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  text-align: center;
}

.hover-troops-table th, .hover-troops-table td,
.hover-times-table th, .hover-times-table td {
  padding: 4px 0 !important;
  border: 1px solid #dfc999;
  width: 8.333% !important;
  font-family: Arial, Verdana, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: -0.1px;
  white-space: nowrap !important;
  overflow: hidden;
}

.hover-bldgs-table th, .hover-bldgs-table td {
  padding: 4px 0 !important;
  border: 1px solid #dfc999;
  font-family: Arial, Verdana, sans-serif !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
  overflow: hidden;
}
.hover-troops-table thead,
.hover-bldgs-table thead,
.hover-times-table thead {
  background: #ead29f;
}
.hover-troops-table tbody,
.hover-bldgs-table tbody,
.hover-times-table tbody {
  background: #fbf1d8;
  font-family: ui-monospace, monospace;
}

.hover-commands-box {
  background: #edd5a4;
  border-top: 1px solid #ba965c;
  padding: 4px 8px 6px;
  font-size: 11px;
}
.hover-commands-head {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr;
  font-weight: 700;
  padding: 3px 0;
  border-bottom: 1px solid #cca96e;
  color: #4b3419;
}
.hover-command-row {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr;
  padding: 3px 0;
  color: #631d16;
  font-weight: 600;
}

.map-tile-attack-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

.map-tile-axe-img {
  width: 22px;
  height: 22px;
  display: block;
  filter: drop-shadow(0 0 3px #ff2200);
  animation: tileAttackPulse 1s infinite alternate;
}

@keyframes tileAttackPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.3); }
}

/* =============================================================
   TOP BAR ATTACK ALERT (Crossed Axes)
   ============================================================= */

.top-attack-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #96251b, #62140c) !important;
  border: 1px solid #ff5642 !important;
  color: #fff !important;
  padding: 4px 9px !important;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 10px #ff2a1499;
  animation: attackAlertGlow 1.2s infinite alternate;
}
.top-attack-alert-btn strong { font-size: 12px; }
.top-attack-alert-btn .crossed-axes { font-size: 15px; }

@keyframes attackAlertGlow {
  0% { box-shadow: 0 0 6px #ff2a1477; }
  100% { box-shadow: 0 0 16px #ff3820ee; }
}

/* =============================================================
   OVERVIEW TOP BUTTON & DROPDOWN (Pictures 4 & 5)
   ============================================================= */

.ov-dropdown-container {
  position: relative;
  display: inline-block;
}

.ov-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #621915, #3a0d0a) !important;
  border: 1px solid #8e322b !important;
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ad453d, 0 2px 5px #0008;
}
.ov-top-btn:hover {
  background: linear-gradient(180deg, #78211c, #48110d) !important;
  border-color: #ba473e !important;
}
.ov-eye { font-size: 14px; }
.ov-caret { font-size: 10px; color: #ffbcba; }

.ov-dropdown-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 4px;
  min-width: 175px;
  background: #2d100d;
  border: 2px solid #6b221d;
  border-radius: 4px;
  box-shadow: 0 8px 24px #000c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ov-dropdown-popup[hidden] { display: none; }

.ov-drop-item {
  text-align: left;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed #521c17 !important;
  border-radius: 0 !important;
  color: #f7e6e4 !important;
  padding: 7px 12px !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.ov-drop-item:last-child { border-bottom: none !important; }
.ov-drop-item:hover {
  background: #501914 !important;
  color: #fff !important;
}
.ov-drop-item.has-alert {
  color: #ff9a8f !important;
  font-weight: 700;
}

/* =============================================================
   VISUALIZAÇÕES GERAIS (OVERVIEWS) PAGE STYLES
   ============================================================= */

.ov-page-wrap {
  display: grid;
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
}

.ov-header-panel {
  background: #19201c;
  border: 1px solid #485246;
  border-radius: 6px;
  padding: 12px 14px 0;
}

.ov-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ov-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ov-main-icon { font-size: 26px; }
.ov-title-group h2 { margin: 0; font: 1.35rem Georgia, serif; color: #fff0d2; }
.ov-title-group small { color: #a2ab9d; }

.ov-incomings-alert-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #782218 !important;
  border: 1px solid #b54033 !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 4px;
  cursor: pointer;
  animation: attackAlertGlow 1.2s infinite alternate;
}

.ov-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-top: 1px solid #3d463d;
  padding-top: 6px;
}

.ov-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #242c26;
  border: 1px solid #434d43;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  color: #ddd4c2;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  cursor: pointer;
  transition: all .15s ease;
}
.ov-tab-btn:hover { background: #383125; color: #ffe5bd; }
.ov-tab-btn.active {
  background: #503823;
  color: #fff2d3;
  border-color: #8c6035;
  border-bottom: 2px solid #e0a359;
  margin-bottom: -1px;
}
.ov-tab-btn.has-alert {
  border-color: #a8362a;
  color: #ff9e94;
}
.ov-tab-badge {
  background: #91271d;
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 11px;
}

.ov-content-card {
  background: #18201b;
  border: 1px solid #454d43;
  border-radius: 6px;
  padding: 14px;
}

.ov-table-controls {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid #3b443a;
  padding-bottom: 8px;
}
.ov-table-controls h3 { margin: 0; font: 1.15rem Georgia, serif; color: #f5dfbe; }
.ov-table-hint { color: #9da697; font-size: 12px; }

.ov-table-wrap { overflow-x: auto; }

.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ov-table th, .ov-table td {
  padding: 7px 9px;
  border-bottom: 1px solid #374036;
  text-align: left;
}
.ov-table thead {
  background: #252e27;
  color: #e5d8be;
}
.ov-table tbody tr:hover { background: #222b23; }
.ov-table tbody tr.is-active-hearth {
  background: #2f2b20;
  border-left: 3px solid #dca662;
}

.ov-select-village-btn {
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  color: #edd3a4 !important;
  padding: 0 !important;
  cursor: pointer;
}
.ov-select-village-btn:hover { text-decoration: underline; color: #ffe6bd !important; }
.ov-select-village-btn small { display: block; color: #9aa394; }

.ov-cell-res {
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-icon-sm { width: 14px; height: 14px; vertical-align: middle; }
.res-icon-micro { width: 12px; height: 12px; vertical-align: middle; }
.unit-icon-micro { width: 14px; height: 14px; vertical-align: middle; }

.ov-storage-bar-wrap {
  position: relative;
  width: 90px;
  height: 18px;
  background: #111713;
  border: 1px solid #444e43;
  border-radius: 3px;
  overflow: hidden;
}
.ov-storage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #745129, #b58448);
}
.ov-storage-bar-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
}

.ov-mini-troops {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}
.ov-mini-troop {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #212922;
  border: 1px solid #3c463b;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
}

.ov-queue-item {
  font-size: 11px;
  color: #d1b88e;
}

.ov-cell-actions {
  display: flex;
  gap: 4px;
}
.ov-btn-action {
  padding: 4px 8px !important;
  background: #392b1d !important;
  border: 1px solid #634b33 !important;
  color: #ffd8a1 !important;
  font-size: 11px !important;
  border-radius: 3px;
  cursor: pointer;
}
.ov-btn-action:hover {
  background: #503d29 !important;
}

.ov-table-troops th, .ov-table-troops td {
  text-align: center;
  min-width: 34px;
}
.ov-table-buildings th, .ov-table-buildings td {
  text-align: center;
  min-width: 28px;
}
.ov-bldg-header-icon {
  display: block;
  font-size: 14px;
  color: #e5cb9e;
}

.ov-table-totals-row {
  background: #283129 !important;
  border-top: 2px solid #576353;
  font-weight: 700;
  color: #ffe6b6;
}

/* Incomings Table */
.ov-table-incomings tr.is-incoming-attack-row {
  background: #291a18;
}
.ov-table-incomings tr.is-incoming-support-row {
  background: #182329;
}

.ov-empty-card {
  text-align: center;
  padding: 36px 20px;
  background: #1b231d;
  border: 1px dashed #4e5a4c;
  border-radius: 6px;
}
.peace-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.ov-empty-card h4 { margin: 0 0 6px; font: 1.1rem Georgia, serif; color: #bedac5; }
.ov-empty-card p { margin: 0; color: #8e9e8f; font-size: 12px; }

.ov-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ov-group-card {
  background: #202821;
  border: 1px solid #434e41;
  border-radius: 6px;
  padding: 12px;
}
.ov-group-card h4 { margin: 0 0 6px; font: 1rem Georgia, serif; color: #edd2a1; }
.ov-group-card p { margin: 0; color: #a4ad9f; font-size: 12px; }
.ov-group-card.is-future { opacity: .7; }

.ov-placeholder-card {
  text-align: center;
  padding: 40px 20px;
  background: #1c241e;
  border: 1px dashed #594f3e;
  border-radius: 6px;
  display: grid;
  place-items: center;
  gap: 8px;
}
.ov-placeholder-icon { font-size: 32px; }
.ov-placeholder-card h3 { margin: 0; font: 1.15rem Georgia, serif; color: #efd3a3; }
.ov-placeholder-card p { margin: 0; color: #b1b8a9; font-size: 12px; max-width: 440px; }

/* ============================================================ */
/* TRIBAL WARS AUTHENTIC VILLAGE LINKS & VILLAGE INFO SCREEN    */
/* ============================================================ */

/* Village Link Groups in Reports & Overviews */
.tw-village-link-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tw-village-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ff7b5a;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
  text-align: left;
}

.tw-village-link:hover {
  color: #ffa185;
  text-decoration: underline;
}

.tw-inline-village-link {
  background: none;
  border: none;
  padding: 0 2px;
  margin: 0;
  color: #ff8c69;
  font-weight: 700;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline;
}

.tw-inline-village-link:hover {
  color: #ffad94;
  text-decoration: underline;
}

.tw-map-center-btn,
.tw-goto-village-btn,
.tw-send-troops-btn {
  background: #251d16;
  border: 1px solid #6b553e;
  border-radius: 3px;
  color: #e2cca6;
  font-size: 13px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-map-center-btn:hover,
.tw-goto-village-btn:hover,
.tw-send-troops-btn:hover {
  background: #3d2f21;
  border-color: #9f7e58;
  color: #fff;
  transform: translateY(-1px);
}

.tw-goto-village-btn {
  color: #72c5ff;
  border-color: #3b5f7e;
  background: #14222c;
}
.tw-goto-village-btn:hover {
  background: #1e3547;
  border-color: #598fb8;
  color: #a4dcff;
}

.tw-send-troops-btn {
  color: #ff9d72;
  border-color: #7a4635;
  background: #281a17;
}
.tw-send-troops-btn:hover {
  background: #42251e;
  border-color: #b5674c;
  color: #ffbfa3;
}

/* Village Info Screen (Tribal Wars Screen) */
.village-info-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px;
}

.vi-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vi-title {
  margin: 0;
  font: 1.5rem Georgia, serif;
  color: #f7e2bd;
}

.vi-main-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

@media (max-width: 860px) {
  .vi-main-grid {
    grid-template-columns: 1fr;
  }
}

.vi-card {
  background: #1f2720;
  border: 1px solid #485444;
  border-radius: 6px;
  overflow: hidden;
}

.vi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #273128;
  border-bottom: 1px solid #3c493a;
}

.vi-card-head h2,
.vi-card-head h3 {
  margin: 0;
  font: 1.05rem Georgia, serif;
  color: #f4dcb1;
}

.vi-village-icon {
  font-size: 16px;
  color: #ecd5aa;
}

/* Radar Visual Grid */
.vi-radar-wrap {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #171d18;
  border-bottom: 1px solid #364234;
}

.vi-radar-viewport {
  width: 135px;
  height: 135px;
  border: 2px solid #5d4f3b;
  border-radius: 4px;
  background: #111712;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vi-radar-grid {
  display: grid;
  grid-template-columns: repeat(9, 14px);
  grid-template-rows: repeat(9, 14px);
  gap: 1px;
}

.radar-cell {
  background: #1c261e;
  border-radius: 1px;
  width: 14px;
  height: 14px;
}

.radar-cell.radar-center {
  background: #ff007f !important;
  box-shadow: 0 0 8px #ff4da6, inset 0 0 2px #fff;
  border-radius: 2px;
  animation: pulse-target 1.2s infinite ease-in-out;
}

.radar-cell.radar-own {
  background: #2a82e4;
  box-shadow: 0 0 4px #4fa2ff;
}

@keyframes pulse-target {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.vi-radar-caption {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  color: #aeb8a9;
}

/* Specs List */
.vi-specs-list {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #364234;
}

.vi-spec-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.vi-spec-label {
  color: #9ba897;
}

.vi-spec-value {
  color: #f0e0c1;
  font-weight: 600;
}

.vi-spec-value.vi-is-own {
  color: #7ac4ff;
}

/* Actions List */
.vi-actions-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vi-actions-list h3 {
  margin: 0 0 4px;
  font-size: 12px;
  color: #ecd5aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vi-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #252e25;
  border: 1px solid #4e5b4b;
  border-radius: 4px;
  padding: 7px 10px;
  color: #e5ece0;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vi-action-btn:hover {
  background: #354234;
  border-color: #7d8f79;
  color: #fff;
  transform: translateX(2px);
}

.vi-action-btn.primary {
  background: #2a3a2d;
  border-color: #5f8763;
  color: #c9eacb;
  font-weight: 700;
}

.vi-action-btn.primary:hover {
  background: #364c39;
  border-color: #85ba8c;
  color: #fff;
}

.vi-act-icon {
  font-size: 14px;
}

/* Right Column: Notes & Commands */
.vi-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vi-btn-small {
  background: #202b21;
  border: 1px solid #4b5848;
  border-radius: 3px;
  color: #d7e0d3;
  font-size: 11px;
  padding: 2px 7px;
  cursor: pointer;
}
.vi-btn-small:hover {
  background: #324334;
  color: #fff;
}

.vi-notes-body,
.vi-commands-body {
  padding: 12px;
}

.vi-notes-text {
  min-height: 48px;
  font-size: 13px;
  color: #d1d8cb;
  line-height: 1.45;
}

.vi-notes-text p {
  margin: 0;
}

.vi-notes-editor textarea {
  width: 100%;
  background: #141a15;
  border: 1px solid #4a5647;
  border-radius: 4px;
  padding: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  resize: vertical;
}

.vi-notes-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Commands Table */
.vi-commands-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.vi-commands-table th {
  text-align: left;
  padding: 6px 8px;
  background: #1a221b;
  color: #b0bba9;
  font-weight: 600;
  border-bottom: 1px solid #3c493a;
}

.vi-commands-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #283327;
  color: #dbe2d6;
}

.vi-commands-table tr:hover td {
  background: #252f24;
}

.live-vi-countdown {
  font-family: monospace;
  color: #ffd166;
  font-weight: 700;
}

.vi-empty-msg {
  font-style: italic;
  font-size: 12px;
  margin: 0;
}

/* Reports Table in Village Info */
.vi-reports-body {
  padding: 10px;
}

.vi-reports-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.hover-footer-action {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #4b4131;
  text-align: right;
}
.hover-vi-link {
  background: none;
  border: none;
  color: #ff914d;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  font-family: inherit;
}
.hover-vi-link:hover {
  color: #ffb885;
  text-decoration: underline;
}

/* Map Village Context Menu (Tribal Wars interactive tile menu) */
.map-context-menu {
  position: absolute;
  z-index: 100;
  width: 220px;
  background: #1e261f;
  border: 1px solid #7c684d;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: #e5ece0;
  pointer-events: auto;
  user-select: none;
  overflow: hidden;
  animation: mcm-appear 0.12s ease-out;
}

@keyframes mcm-appear {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.mcm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #273328;
  border-bottom: 1px solid #3c4b3a;
}

.mcm-title-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mcm-name {
  font: 700 0.9rem Georgia, serif;
  color: #f7e0b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcm-coords {
  font-size: 11px;
  color: #a4b39f;
}

.mcm-close-btn {
  background: none;
  border: none;
  color: #a2b09d;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
}

.mcm-close-btn:hover {
  color: #fff;
  background: #472626;
}

.mcm-actions {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mcm-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #253026;
  border: 1px solid #485746;
  border-radius: 4px;
  padding: 6px 9px;
  color: #e4ebe0;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.mcm-action-btn:hover {
  background: #354536;
  border-color: #798d76;
  color: #fff;
  transform: translateX(2px);
}

.mcm-action-btn.primary {
  background: #2a3e2e;
  border-color: #5c8861;
  color: #c9eccb;
}

.mcm-action-btn.primary:hover {
  background: #38533d;
  border-color: #83b88a;
  color: #fff;
}

.mcm-icon {
  font-size: 14px;
  line-height: 1;
}


/* ============================================================ */
/* RANKING (LEADERBOARD) & PLAYER PROFILE STYLES               */
/* ============================================================ */

.ranking-layout,
.player-profile-layout {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ranking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ranking-title-group h1,
.profile-top-bar h1 {
  margin: 0 0 4px;
  font: 1.45rem Georgia, serif;
  color: #f7e0b8;
}

.ranking-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ranking-search-box input {
  padding: 6px 12px;
  background: #141b16;
  border: 1px solid #485646;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  width: 200px;
}
.ranking-search-box input:focus {
  outline: none;
  border-color: #dfaa60;
}
.rank-refresh-btn {
  background: #202921;
  border: 1px solid #485646;
  border-radius: 4px;
  color: #f7e0b8;
  padding: 6px 9px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rank-refresh-btn:hover {
  background: #334435;
  border-color: #dfaa60;
}

.ranking-tabs-bar {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #3c483a;
  padding-bottom: 2px;
}

.ranking-tab-btn {
  background: #202921;
  border: 1px solid #435141;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #cbd5c6;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ranking-tab-btn:hover {
  background: #2d3b2f;
  color: #fff;
}
.ranking-tab-btn.active {
  background: #334435;
  border-color: #637a60;
  color: #f5deb7;
}
.ranking-tab-btn.is-future {
  opacity: 0.55;
  cursor: not-allowed;
}

.ranking-table-card {
  background: #1b231c;
  border: 1px solid #3d4a3b;
  border-radius: 6px;
  overflow: hidden;
}

.ranking-table-wrap {
  overflow-x: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ranking-table th {
  background: #253127;
  color: #eeddbf;
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  border-bottom: 1px solid #3c4939;
}

.ranking-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #2a352b;
  color: #dbe4d7;
}

.ranking-table tr:hover td {
  background: #253026;
}

.is-my-rank-row td {
  background: rgba(220, 160, 60, 0.12) !important;
}

.col-rank { width: 80px; font-weight: 700; color: #eeddbf !important; }
.col-points { width: 140px; }
.col-villages { width: 100px; }
.col-avg { width: 150px; }

.rank-player-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #ff8c69;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.rank-player-link:hover {
  color: #ffb89f;
  text-decoration: underline;
}

.me-tag {
  color: #eed19f;
  font-weight: 600;
}

.ranking-loading,
.ranking-empty {
  padding: 24px;
  text-align: center;
  font-style: italic;
  color: #a4b39f;
}

/* Player Profile Layout */
.profile-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-main-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}

@media (max-width: 800px) {
  .profile-main-grid {
    grid-template-columns: 1fr;
  }
}

.profile-card {
  background: #1b231c;
  border: 1px solid #3d4a3b;
  border-radius: 6px;
  overflow: hidden;
}

.profile-card-head {
  padding: 8px 12px;
  background: #253127;
  border-bottom: 1px solid #3c4939;
}
.profile-card-head h2 {
  margin: 0;
  font: 1.05rem Georgia, serif;
  color: #f7e0b8;
}

.profile-stats-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.prof-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px dashed #2d382d;
  padding-bottom: 6px;
}

.prof-stat-row span { color: #9bb097; }
.prof-stat-row strong { color: #f2e4ca; }

.prof-village-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Praça de Reuniões Incoming Alert Box */
.rp-incoming-alert-box {
  background: #281917 !important;
  border: 1px solid #8e382b !important;
  box-shadow: 0 0 14px rgba(230, 60, 40, 0.25) !important;
}
.rp-alert-title {
  color: #ff8672 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.rp-pulse-icon {
  display: inline-block;
  animation: pulse-sword 1.1s infinite ease-in-out;
}
@keyframes pulse-sword {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.is-incoming-attack-row td {
  background: rgba(180, 45, 30, 0.18) !important;
}

.rp-support-incoming-box {
  background: #18232c !important;
  border: 1px solid #3a6280 !important;
}
.rp-support-title {
  color: #8bc6ed !important;
  font-weight: 700;
}
.is-incoming-support-row td {
  background: rgba(40, 100, 150, 0.15) !important;
}

.rp-countdown-tag {
  font-family: monospace;
  color: #ffd166;
  font-weight: 700;
}

/* 1:1 Tribal Wars Continent & Sector Grid Overlay on March Map */
.map-continent-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Sector lines on stage (every 5 fields) */
.sector-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1;
}
.sector-line-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* Continent border lines on stage (every 100 fields: 0, 100, 200, 300, etc.) */
.continent-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #000;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;
}

.continent-line-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #000;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;
}

.continent-line-label {
  position: absolute;
  font: 700 11px Inter, system-ui, sans-serif;
  color: #fff;
  background: rgba(14, 20, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.continent-line-v .label-left {
  top: 14px;
  right: 8px;
}
.continent-line-v .label-right {
  top: 14px;
  left: 8px;
}
.continent-line-h .label-top {
  left: 14px;
  bottom: 8px;
}
.continent-line-h .label-bottom {
  left: 14px;
  top: 8px;
}

/* Dynamic Continent watermark badge on bottom-left of March Map */
.continent-hud-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font: 900 2.2rem 'Cinzel', 'Trajan Pro', Georgia, serif;
  color: #f6dca6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 2px #000;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.08em;
  z-index: 10;
  background: rgba(16, 23, 25, 0.78);
  border: 1px solid rgba(229, 154, 72, 0.4);
  border-radius: 8px;
  padding: 4px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* Mini-Map Continent Elements */
.mini-continent-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mini-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.mini-line-v.is-sector {
  width: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
  z-index: 1;
}
.mini-line-v.is-continent {
  width: 3px;
  background: #000;
  box-shadow: 0 0 3px #fff;
  z-index: 3;
}

.mini-line-h {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.mini-line-h.is-sector {
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 1;
}
.mini-line-h.is-continent {
  height: 3px;
  background: #000;
  box-shadow: 0 0 3px #fff;
  z-index: 3;
}

.mini-continent-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font: 800 12px Georgia, serif;
  color: #f7e0b8;
  background: rgba(16, 22, 17, 0.92);
  border: 1px solid #715535;
  border-radius: 4px;
  padding: 2px 7px;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}


/* ============================================================ */
/* TRIBAL WARS SIDEBAR BALLOON WIDGETS                         */
/* ============================================================ */

.village-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 250px !important;
}

.tw-widget-balloon {
  background: #fbf3df;
  border: 1px solid #7c5c2d;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-family: Arial, Verdana, sans-serif;
  color: #38240f;
  font-size: 11.5px;
  overflow: hidden;
}

.tw-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #dfbe80 0%, #c49c58 100%);
  border-bottom: 1px solid #99743c;
  padding: 4px 7px;
}

.tw-widget-head h3 {
  margin: 0;
  font: italic 700 12.5px Georgia, serif;
  color: #241506;
}

.tw-widget-toggle {
  background: #f0deb4;
  border: 1px solid #8c6834;
  border-radius: 2px;
  width: 15px;
  height: 15px;
  padding: 0;
  font: 700 11px monospace;
  line-height: 13px;
  color: #3b2812;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tw-widget-toggle:hover {
  background: #fff0cb;
}

.tw-widget-body {
  padding: 6px 8px;
  background: #fbf3df;
}

.tw-prod-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dotted #dfcba4;
  font-size: 11.5px;
}
.tw-prod-row:last-child {
  border-bottom: none;
}
.tw-prod-row .res-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.tw-prod-row strong {
  margin-left: auto;
  font-weight: 700;
  color: #1a1005;
}
.tw-prod-row small {
  color: #634b2f;
  font-size: 10px;
}
.tw-prod-row .prod-plus {
  color: #8c6a38;
  font-size: 12px;
  font-weight: bold;
}

.tw-loyalty-row,
.tw-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 11.5px;
}
.tw-loyalty-row strong.loyalty-full {
  color: #226b1a;
}
.tw-loyalty-row strong.loyalty-damaged {
  color: #b52b14;
  font-weight: 700;
}
.tw-loyalty-note {
  font-size: 10px;
  color: #7b4f1f;
  margin-bottom: 4px;
}

.tw-pop-bar-wrap {
  width: 100%;
  height: 8px;
  background: #d8c39b;
  border: 1px solid #9e855c;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.tw-pop-bar {
  height: 100%;
  background: linear-gradient(90deg, #a1702f, #d79c46);
  border-radius: 1px;
}

.tw-effect-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  border-bottom: 1px dotted #dfcba4;
  font-size: 11.5px;
}
.tw-effect-row:last-child {
  border-bottom: none;
}
.tw-effect-row.is-clickable {
  cursor: pointer;
  color: #704416;
}
.tw-effect-row.is-clickable:hover {
  color: #2a1503;
  text-decoration: underline;
}
.tw-effect-icon {
  font-size: 14px;
}
.tw-effect-info strong {
  display: block;
  font-size: 11.5px;
}
.effect-tag-active {
  color: #26731e;
  font-weight: 600;
  font-size: 10px;
}

.tw-empty-note {
  margin: 0;
  font-style: italic;
  color: #7d6549;
  font-size: 11px;
}

.tw-notes-text {
  font-size: 11.5px;
  line-height: 1.4;
  color: #2b1a0a;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 18px;
}
.tw-notes-edit-btn {
  background: transparent;
  border: none;
  padding: 2px 0;
  color: #7a4613;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.tw-notes-edit-btn:hover {
  text-decoration: underline;
}
.tw-notes-editor textarea {
  width: 100%;
  background: #fff8eb;
  border: 1px solid #a3824f;
  border-radius: 2px;
  padding: 4px;
  font-family: inherit;
  font-size: 11px;
  color: #241505;
  box-sizing: border-box;
}
.tw-notes-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.tw-save-btn {
  background: #5d4026;
  border: 1px solid #8e653d;
  color: #fff4d4;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}
.tw-cancel-btn {
  background: #c9b48c;
  border: 1px solid #8c734b;
  color: #3b2812;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}

/* Bonus Village Hover Layout */
.hover-bonus-split {
  display: flex;
  align-items: stretch;
}
.hover-bonus-art-box {
  width: 110px;
  flex: none;
  background: #eeddbb;
  border-right: 1px solid #d4b886;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.hover-bonus-art-box .bonus-art-svg {
  width: 90px;
  height: 72px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
.hover-bonus-content {
  flex: 1;
  min-width: 0;
}
.hover-bonus-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #743e0d;
  padding: 4px 10px;
  background: #fbf2dc;
  border-bottom: 1px solid #dfc793;
}
.hover-head.is-bonus-head {
  border-bottom: 1px solid #c9a566;
}

/* Bigger Troop Icons in Hover Popup */
.hover-times-table th img,
.hover-troops-table th img {
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle;
  object-fit: contain;
}

/* Links in Village Info View */
.vi-player-profile-link {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: #52310f;
  cursor: pointer;
  text-decoration: underline;
}
.vi-player-profile-link:hover {
  color: #925316;
}
.vi-last-report-link {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 11.5px;
  color: #4a2d10;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vi-last-report-link:hover {
  text-decoration: underline;
}

/* =============================================================
   TRIBAL WARS BUILDING QUEUE & REWORKED BUILDING MODAL STYLING
   ============================================================= */

/* Village Top Bar Navigation Switcher */
.village-switcher-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.village-nav-arrow {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border: 1px solid #7c4c1a;
  border-radius: 3px;
  color: #3b2812;
  font-size: 11px;
  font-weight: 700;
  width: 22px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, transform 0.1s;
}
.village-nav-arrow:hover {
  background: linear-gradient(180deg, #ecd4a4, #dfbe80);
}
.village-nav-arrow:active {
  transform: translateY(1px);
}

/* Building Queues Wrapper (Up to 5 concurrent orders) */
.village-queues-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.village-queues-wrapper.is-compact {
  margin-bottom: 12px;
}
.tw-queue-box {
  background: #fbf5e6;
  border: 1px solid #c9a566;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.tw-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #b38b4c;
  color: #31210c;
  font-size: 12px;
  font-weight: 700;
}
.tw-queue-table {
  width: 100%;
  border-collapse: collapse;
}
.tw-queue-row {
  border-bottom: 1px solid #eedec2;
  font-size: 12px;
  color: #3b2812;
}
.tw-queue-row:last-child {
  border-bottom: none;
}
.tw-queue-row.active {
  background: #fffdf7;
}
.tw-queue-row.waiting {
  background: #f8f0dc;
  color: #665030;
}
.tw-queue-row td {
  padding: 8px 12px;
  vertical-align: middle;
}
.tw-queue-order {
  font-weight: 700;
  color: #8c602a;
  margin-right: 6px;
}
.tw-queue-name {
  width: 45%;
}
.tw-queue-name img {
  vertical-align: middle;
  margin-right: 6px;
  width: 20px;
  height: 20px;
}
.tw-queue-time {
  width: 30%;
}
.tw-queue-complete {
  width: 25%;
  text-align: right;
  font-size: 11.5px;
  color: #725732;
}
.tw-queue-active-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tw-queue-countdown {
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: #923400;
}
.tw-queue-wait-time {
  font-family: ui-monospace, monospace;
  color: #6e5837;
}
.tw-queue-bar {
  width: 100%;
  height: 8px;
  background: #d8c39e;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tw-queue-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f39c12, #27ae60);
  border-radius: 4px;
  transition: width 1s linear;
}

/* Modal Description & Effect */
.tw-bldg-desc-banner {
  background: #fbf5e6;
  border: 1px solid #d8c39e;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.tw-bldg-desc-banner p {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: #4b361a;
}
.tw-bldg-effect-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e8449;
  background: #eafaf1;
  border: 1px solid #abebc6;
  border-radius: 3px;
  padding: 3px 8px;
  display: inline-block;
}

/* Building Upgrade Card */
.tw-upgrade-card {
  background: #fbf5e6;
  border: 1px solid #c9a566;
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.tw-upgrade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tw-upgrade-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #3b2812;
}
.tw-upgrade-time {
  font-weight: 700;
  color: #634720;
  font-size: 12px;
}
.tw-upgrade-costs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.tw-upgrade-pop {
  font-size: 12px;
  font-weight: 600;
  color: #4b3519;
  margin-left: auto;
}
.tw-upgrade-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tw-upgrade-hint {
  margin: 0;
  font-size: 11.5px;
  color: #6d532f;
}
.tw-upgrade-hint.has-issue {
  color: #a93226;
  font-weight: 600;
}
.tw-build-btn {
  background: linear-gradient(180deg, #64a638, #427c1f);
  color: #fff;
  border: 1px solid #2e5714;
  border-radius: 3px;
  padding: 5px 13px;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.tw-build-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #74bf41, #4c8f23);
}
.tw-build-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.tw-build-btn:disabled {
  background: #bfb2a0;
  border-color: #8f806e;
  color: #3d2a16;
  font-weight: 700;
  cursor: not-allowed;
  box-shadow: none;
  text-shadow: none;
}
.tw-build-btn.main-upgrade-btn {
  padding: 8px 18px;
  font-size: 13px;
}

/* Headquarters Building Table */
.tw-bldg-section {
  margin-top: 14px;
}
.tw-bldg-table-wrap {
  border: 1px solid #c9a566;
  border-radius: 4px;
  overflow: hidden;
  background: #fbf5e6;
}
.tw-bldg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #3b2812;
}
.tw-bldg-table th {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #b38b4c;
  padding: 6px 10px;
  text-align: left;
  font-size: 11.5px;
  color: #31210c;
}
.tw-bldg-row {
  border-bottom: 1px solid #eedec2;
}
.tw-bldg-row:nth-child(even) {
  background: #f6ecda;
}
.tw-bldg-row.locked {
  opacity: 0.72;
}
.tw-bldg-row td {
  padding: 6px 10px;
  vertical-align: middle;
}
.tw-bldg-group-head td {
  background: #ecd4a4;
  font-weight: 700;
  padding: 5px 10px;
  color: #4b361a;
  border-top: 1px solid #d4b886;
  border-bottom: 1px solid #d4b886;
}
.tw-bldg-name-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.tw-bldg-name-btn:hover strong {
  text-decoration: underline;
  color: #8c5218;
}
.tw-bldg-icon {
  font-size: 13px;
  color: #6a461e;
}
.tw-bldg-level {
  font-weight: 600;
  color: #553b1b;
}
.tw-bldg-queued-tag {
  background: #e67e22;
  color: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 700;
}
.tw-bldg-hint {
  font-size: 11px;
  color: #4a3217;
  font-weight: 600;
  margin-top: 2px;
}
.tw-bldg-costs {
  white-space: nowrap;
}
.tw-bldg-pop {
  white-space: nowrap;
  font-size: 11.5px;
}
.tw-bldg-duration {
  white-space: nowrap;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.tw-bldg-action {
  text-align: right;
  white-space: nowrap;
}
.tw-bldg-maxed {
  font-size: 11.5px;
  color: #452b12;
  font-weight: 600;
  font-style: normal;
}

/* =============================================================
   TRIBAL WARS TROOP MOVEMENTS CARD & HOVER POPOVER (Pictures 1, 2, 4)
   ============================================================= */

/* Barbarians Village: 100% full monochrome grey, remove yellow dirt path */
.map-markers .tile.barbarian b,
.tile.barbarian b,
.tile.barbarian.bonus b {
  filter: grayscale(100%) contrast(1.15) brightness(0.9) drop-shadow(0 4px 2px rgba(20, 30, 15, 0.6)) !important;
}
.mini-grid i.barbarian {
  background: #757575 !important;
  box-shadow: none !important;
}

/* "As suas tropas" Card under the Village Scene (Image 4) */
.tw-troops-card {
  margin-top: 14px;
  background: #fbf5e6;
  border: 1px solid #7c4c1a;
  border-radius: 4px;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-family: Arial, Verdana, sans-serif;
}
.tw-troops-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #99753e;
}
.tw-troops-card-head h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #2b1c09;
}
.tw-troops-card-body {
  padding: 0;
}
.tw-troops-section {
  border-bottom: 1px solid #eedec2;
}
.tw-troops-section:last-child {
  border-bottom: none;
}
.tw-troops-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: #ecd4a4;
  border-bottom: 1px solid #dfc793;
  font-size: 11.5px;
  font-weight: 700;
  color: #3b2812;
}
.tw-troops-section-head span:first-child {
  width: 55%;
}
.tw-troops-section-head span:nth-child(2) {
  width: 25%;
}
.tw-troops-section-head span:nth-child(3) {
  width: 20%;
  text-align: right;
}
.tw-troops-section-head.alert-head {
  background: #f2d7d5;
  color: #922b21;
  border-bottom-color: #d98880;
}
.tw-troops-section-head.support-head {
  background: #d4efdf;
  color: #196f3d;
  border-bottom-color: #a9dfbf;
}
.tw-commands-table {
  width: 100%;
  border-collapse: collapse;
}
.tw-cmd-row {
  border-bottom: 1px solid #f2e4c9;
  font-size: 11.5px;
  position: relative;
}
.tw-cmd-row:last-child {
  border-bottom: none;
}
.tw-cmd-row:hover {
  background: #fff8e8;
}
.tw-cmd-row.is-hostile {
  background: #fdf2e9;
}
.tw-cmd-row td {
  padding: 6px 12px;
  vertical-align: middle;
}
.tw-cmd-title-cell {
  width: 55%;
}
.tw-cmd-arrival-cell {
  width: 25%;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #4a3519;
}
.tw-cmd-countdown-cell {
  width: 20%;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: #923400;
}
.tw-cmd-countdown-cell .countdown-alert {
  color: #c0392b;
  font-weight: 700;
}
.tw-cmd-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
}
.tw-cmd-icon {
  font-size: 13px;
  line-height: 1;
}
.tw-cmd-name {
  color: #743e0d;
  font-weight: 700;
}
.tw-cmd-name:hover {
  text-decoration: underline;
}
.tw-cmd-pencil {
  font-size: 10.5px;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tw-cmd-pencil:hover {
  opacity: 1;
}
.tw-troops-empty {
  padding: 12px;
  margin: 0;
  font-size: 12px;
  color: #795e38;
  font-style: italic;
  text-align: center;
}

/* Troop Count Preview Badges & Authentic TW Hover Tooltip (Picture 2) */
.tw-cmd-troops-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: 4px;
}
.tw-cmd-troops-preview {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tw-cmd-unit-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f0e0bd;
  border: 1px solid #d4be8a;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  color: #3b2812;
}
.tw-cmd-unit-pill img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.tw-cmd-unit-pill b {
  font-family: ui-monospace, monospace;
}

/* The Authentic Tribal Wars Popover Box (Image 2) */
.tw-cmd-tooltip-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  min-width: 170px;
  background: #edd4a4;
  border: 1px solid #7c4c1a;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  padding: 4px 6px;
  pointer-events: none;
  white-space: nowrap;
  margin-top: 4px;
}
.tw-cmd-title-wrap:hover .tw-cmd-tooltip-box,
.tw-cmd-troops-wrapper:hover .tw-cmd-tooltip-box,
.tw-cmd-row:hover .tw-cmd-tooltip-box {
  display: block;
}
.tw-cmd-tooltip-head {
  font-size: 11px;
  font-weight: 700;
  color: #36220d;
  padding: 2px 4px 4px 4px;
  border-bottom: 1px solid #d4ba80;
  margin-bottom: 4px;
}
.tw-cmd-tooltip-table {
  border-collapse: collapse;
  margin: 0 auto;
}
.tw-cmd-tooltip-table th,
.tw-cmd-tooltip-table td {
  padding: 2px 4px;
  text-align: center;
}
.tw-cmd-tooltip-table th img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.tw-cmd-tooltip-table td {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #2b1c09;
}

/* Sidebar Trabalho em curso (Building Queue in Sidebar) */
.tw-work-progress-balloon {
  border: 1px solid #7c4c1a;
  margin-bottom: 12px;
}
.tw-work-progress-balloon .tw-queue-head {
  display: none;
}
.tw-work-progress-balloon .tw-queue-box {
  border: none;
  box-shadow: none;
  background: transparent;
}
.tw-work-progress-balloon .tw-queue-row td {
  padding: 5px 8px;
}


/* =============================================================
   TRIBAL WARS OVERVIEW COMMANDS TAB & DEDICATED COMMAND PAGE
   ============================================================= */

/* Universal Command Links */
.tw-cmd-detail-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #743e0d;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tw-cmd-detail-link:hover {
  text-decoration: underline;
  color: #a84b00;
}
.vi-commands-table .tw-cmd-detail-link,
.rp-movements-table .tw-cmd-detail-link,
.profile-card .tw-cmd-detail-link {
  color: #ffd8a1;
}
.vi-commands-table .tw-cmd-detail-link:hover,
.rp-movements-table .tw-cmd-detail-link:hover,
.profile-card .tw-cmd-detail-link:hover {
  color: #fff;
}

/* Overview Commands Tab (Image 1) */
.tw-commands-overview-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov-groups-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbf3df;
  border: 1px solid #7c5c2d;
  padding: 6px 12px;
  font-size: 11.5px;
  color: #3b2812;
  border-radius: 2px;
}
.ov-groups-title {
  font-weight: 700;
  color: #2b1c09;
}
.ov-group-link {
  color: #743e0d;
  text-decoration: none;
  font-weight: 600;
}
.ov-group-link:hover {
  text-decoration: underline;
}
.ov-group-link.is-all {
  color: #2b1c09;
  font-weight: 700;
}
.ov-cmd-filter-box {
  margin: 2px 0;
}
.ov-filter-toggle {
  background: #f2e2be;
  border: 1px solid #9f7d49;
  padding: 4px 10px;
  font-size: 11.5px;
  color: #3b2812;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ov-filter-toggle:hover {
  background: #fbeed1;
}
.ov-cmd-subtabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid #8c6035;
  background: #ecdcb9;
  padding: 4px 6px 0;
  border-radius: 3px 3px 0 0;
}
.ov-cmd-subtab {
  background: #dfbe80;
  border: 1px solid #99743c;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  color: #3b2812;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ov-cmd-subtab:hover {
  background: #eed5a3;
}
.ov-cmd-subtab.active {
  background: #fbf3df;
  border-color: #8c6035;
  border-bottom: 2px solid #fbf3df;
  margin-bottom: -2px;
  color: #1a0f04;
  font-weight: 700;
}
.tw-cmd-full-table {
  width: 100%;
  border-collapse: collapse;
  background: #fbf3df;
  border: 1px solid #7c5c2d;
  font-size: 11.5px;
  color: #2b1c09;
}
.tw-cmd-full-table th {
  background: linear-gradient(180deg, #dfbe80 0%, #c49c58 100%);
  border: 1px solid #99743c;
  padding: 4px 6px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.tw-cmd-full-table th.tw-th-troop {
  text-align: center;
  width: 32px;
  min-width: 30px;
  padding: 3px 2px;
}
.tw-cmd-full-table th.tw-th-troop img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.tw-cmd-full-table td {
  border: 1px solid #decba5;
  padding: 5px 7px;
  vertical-align: middle;
}
.tw-cmd-full-table tbody tr:nth-child(even) {
  background: #f4e8cc;
}
.tw-cmd-full-table tbody tr:hover {
  background: #fff8e6;
}
.tw-td-cmd {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tw-td-cmd .tw-cmd-detail-link {
  font-weight: 700;
  color: #5c3514;
}
.tw-td-cmd .tw-cmd-detail-link:hover {
  color: #a84b00;
}
.tw-td-origin .tw-village-link {
  font-size: 11.5px;
  font-weight: 600;
  color: #5c3514;
}
.tw-td-origin .tw-village-link:hover {
  color: #a84b00;
}
.tw-td-arrival {
  white-space: nowrap;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.tw-td-unit {
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.tw-td-unit.zero-units {
  color: #9c876b;
}
.tw-td-unit.has-units {
  font-weight: 700;
  color: #000;
}
.ov-cmd-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fbf3df;
  border: 1px solid #7c5c2d;
  border-top: none;
  padding: 6px 12px;
  font-size: 11.5px;
  color: #3b2812;
}
.ov-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
.ov-cmd-actions .tw-cancel-cmd-btn,
.ci-actions-bar .tw-cancel-cmd-btn {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border: 1px solid #7c4c1a;
  border-radius: 3px;
  padding: 4px 14px;
  color: #36220d;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.ov-cmd-actions .tw-cancel-cmd-btn:hover,
.ci-actions-bar .tw-cancel-cmd-btn:hover {
  background: linear-gradient(180deg, #edd4a4, #dfbe80);
}

/* Dedicated Command Info Screen (Image 2) */
.command-info-screen {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ci-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ci-screen-title {
  margin: 0;
  font: 1.35rem Georgia, serif;
  color: #fff0d2;
}
.ci-main-card {
  background: #fbf3df;
  border: 1px solid #7c5c2d;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #38240f;
  font-size: 12px;
}
.ci-details-table {
  width: 100%;
  border-collapse: collapse;
}
.ci-details-table th.ci-head-cell {
  background: linear-gradient(180deg, #dfbe80 0%, #c49c58 100%);
  border: 1px solid #99743c;
  padding: 5px 8px;
  text-align: left;
}
.ci-head-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #241506;
}
.ci-details-table th.ci-field-label {
  width: 130px;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid #decba5;
  background: #f4e8cc;
  color: #3b2812;
  font-weight: 700;
  vertical-align: top;
}
.ci-details-table td {
  padding: 6px 8px;
  border: 1px solid #decba5;
  vertical-align: middle;
}
.ci-entity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.ci-sub-label {
  width: 55px;
  color: #634b2f;
  font-size: 11px;
}
.ci-details-table .tw-village-link {
  font-size: 12px;
  color: #743e0d;
}
.ci-details-table .tw-village-link:hover {
  color: #a84b00;
}
.ci-details-table .vi-player-profile-link {
  font-size: 12px;
  font-weight: 700;
  color: #743e0d;
}
.ci-radar-mini-icon {
  opacity: 0.7;
  font-size: 12px;
}
.ci-rp-link-cell {
  background: #f7eed7;
  padding: 8px 10px !important;
}
.tw-rp-link-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 6px 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #743e0d;
  cursor: pointer;
  display: inline-block;
}
.tw-rp-link-btn:hover {
  text-decoration: underline;
  color: #a84b00;
}
.tw-cmd-journey-bar {
  width: 100%;
  height: 12px;
  background: #e0cca4;
  border: 1px solid #99743c;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.tw-cmd-journey-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #745129, #c49c58);
  transition: width 0.3s ease;
}
.ci-troops-wrap {
  overflow-x: auto;
}
.ci-troops-table {
  width: 100%;
  border-collapse: collapse;
}
.ci-troops-table th {
  background: linear-gradient(180deg, #dfbe80 0%, #c49c58 100%);
  border: 1px solid #99743c;
  padding: 4px;
  text-align: center;
}
.ci-troops-table td {
  border: 1px solid #decba5;
  padding: 6px 4px;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
}
.ci-troops-table td.zero-units {
  color: #9c876b;
}
.ci-troops-table td.has-units {
  font-weight: 700;
  color: #000;
}
.ci-loot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #f4e8cc;
  border: 1px solid #decba5;
  border-radius: 2px;
  font-size: 11.5px;
}
.ci-loot-res {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.ci-loot-sep {
  color: #a89476;
}
.ci-loot-cap {
  font-weight: 700;
  color: #5c3514;
}
.ci-actions-bar {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}
.mono-val {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
}


/* ==========================================================================
   TRIBAL WARS RECRUITMENT SCREEN & QUEUE CANCEL STYLES
   ========================================================================== */

#building-dialog.tw-recruit-dialog {
  width: min(920px, calc(100vw - 24px));
}

.tw-recruit-dialog-body {
  padding: 14px 18px !important;
}

.tw-recruit-wrap {
  display: grid;
  gap: 12px;
}

/* Header Banner */
.tw-recruit-header-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fbf5e6;
  border: 1px solid #d8c39e;
  border-radius: 4px;
  padding: 10px 14px;
}

.tw-facility-icon-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #c09154;
  border-radius: 6px;
  background: linear-gradient(135deg, #704d2e, #47321e);
  color: #ffe4a0;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.tw-facility-desc-wrap h3 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #3b2812;
}

.tw-facility-desc-wrap p {
  margin: 0;
  font-size: 12px;
  color: #5c4324;
  line-height: 1.4;
}

/* Subnavigation Tabs */
.tw-subnav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid #804000;
  padding-bottom: 0;
  margin-top: 2px;
}

.tw-subnav-tab {
  background: #e1cd98;
  border: 1px solid #bda272;
  border-bottom: none;
  font-weight: 600;
  color: #5c3514;
  padding: 6px 14px;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.tw-subnav-tab.active {
  background: #fbf5e6;
  border: 1px solid #804000;
  border-bottom: 2px solid #fbf5e6;
  font-weight: 700;
  color: #2b1704;
  margin-bottom: -2px;
}

.tw-subnav-tab.inactive {
  opacity: 0.6;
  cursor: not-allowed;
}

.tw-subnav-tab.tw-tab-upgrade {
  margin-left: auto;
  background: #ecd4a4;
  font-size: 11.5px;
}

.tw-subnav-tab.tw-tab-upgrade.is-blocked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Facility Queue Box */
.tw-facility-queue-box {
  margin-bottom: 4px;
}

/* Main Recruitment Table */
.tw-recruit-table-wrap {
  border: 1px solid #c9a566;
  border-radius: 4px;
  overflow: hidden;
  background: #fbf5e6;
}

.tw-recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #3b2812;
}

.tw-recruit-table th {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #b38b4c;
  padding: 7px 10px;
  text-align: left;
  font-size: 11.5px;
  color: #31210c;
  font-weight: 700;
}

.tw-th-count, .tw-th-recruit {
  text-align: right !important;
}

.tw-recruit-row {
  border-bottom: 1px solid #eedec2;
}

.tw-recruit-row:nth-child(even) {
  background: #f6ecda;
}

.tw-recruit-row:hover {
  background: #fff8e8;
}

.tw-recruit-row td {
  padding: 6px 10px;
  vertical-align: middle;
}

.tw-td-count {
  text-align: right;
  font-weight: 600;
  color: #4b361a;
  white-space: nowrap;
}

.tw-td-recruit {
  text-align: right;
  white-space: nowrap;
}

.tw-unit-info-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tw-recruit-unit-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

.tw-recruit-unit-icon.is-locked {
  filter: grayscale(80%) opacity(60%);
}

.tw-recruit-unit-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #3b250d;
}

.tw-recruit-unit-name-locked {
  font-size: 12px;
  font-weight: 600;
  color: #796b5a;
}

.tw-needs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tw-need-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: #4b3519;
  font-weight: 600;
}

.tw-need-item img {
  width: 14px;
  height: 14px;
}

.tw-need-item.tw-train-time {
  color: #634720;
  font-family: ui-monospace, monospace;
}

.tw-recruit-input-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

.tw-recruit-input {
  width: 55px;
  padding: 3px 5px;
  border: 1px solid #7d510f;
  border-radius: 3px;
  background: #fffdf5;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.tw-fill-max {
  color: #006699;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.tw-fill-max:hover {
  text-decoration: underline;
  color: #004466;
}

.tw-empty-cell {
  padding: 14px;
  text-align: center;
  color: #8c7352;
  font-style: italic;
}

/* Bottom Action Bar */
.tw-recruit-bottom-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.tw-recruit-submit-btn {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border: 1px solid #7d510f;
  border-radius: 3px;
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3b240b;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: background 0.12s, transform 0.08s;
}

.tw-recruit-submit-btn:hover {
  background: linear-gradient(180deg, #e9cb8e, #d8b273);
}

.tw-recruit-submit-btn:active {
  transform: translateY(1px);
}

/* Locked Units Table */
.tw-locked-heading {
  font-size: 13px;
  font-weight: 700;
  color: #4b361a;
  margin-top: 6px;
}

.tw-locked-table-wrap {
  border: 1px solid #c9a566;
  border-radius: 4px;
  overflow: hidden;
  background: #fbf5e6;
}

.tw-locked-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #3b2812;
}

.tw-locked-table th {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #b38b4c;
  padding: 6px 10px;
  text-align: left;
  font-size: 11.5px;
  color: #31210c;
  font-weight: 700;
}

.tw-locked-row {
  border-bottom: 1px solid #eedec2;
}

.tw-locked-row:nth-child(even) {
  background: #f6ecda;
}

.tw-locked-row td {
  padding: 6px 10px;
  vertical-align: middle;
}

.tw-req-badges-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tw-req-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.tw-req-badge.is-met {
  background: #eafaf1;
  border: 1px solid #a3e4d7;
  color: #1e8449;
}

.tw-req-badge.is-unmet {
  background: #fdedec;
  border: 1px solid #fadbd8;
  color: #c0392b;
}

.tw-req-icon {
  font-size: 12px;
}

/* Server Time Footer */
.tw-server-footer {
  text-align: center;
  font-size: 11px;
  color: #8c7352;
  padding: 8px 0 2px 0;
  border-top: 1px solid #d8c39e;
}

.tw-live-server-clock {
  font-weight: 700;
  color: #5c3514;
}

/* Cancel Build Button */
.tw-cancel-build-btn {
  background: none;
  border: none;
  color: #a84832;
  font-size: 11.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 5px;
  font-family: inherit;
}

.tw-cancel-build-btn:hover {
  color: #d9381e;
}

.tw-queue-cancel {
  text-align: right;
  width: 70px;
}


/* Expanded clickable hit-area for buildings on the village scene */
.scene-building {
  cursor: pointer;
  padding: 5px 9px 5px 5px !important;
  font-size: 0.78rem !important;
}
.scene-building::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -22px;
  right: -22px;
  cursor: pointer;
  z-index: 0;
}
.scene-building > * {
  position: relative;
  z-index: 1;
}


/* =============================================================
   TRIBAL WARS HEADQUARTERS & BUILDINGS MODAL REWORK (1:1 Design)
   ============================================================= */

#building-dialog.tw-bldg-dialog,
#building-dialog.tw-hq-dialog,
#building-dialog:has(.tw-hq-table) {
  width: min(880px, calc(100vw - 24px));
  max-width: 880px;
}

.tw-hq-banner {
  margin-bottom: 12px;
}

.tw-hq-banner-info p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #3b2812;
}

.tw-hq-available-section,
.tw-hq-locked-section {
  margin-top: 12px;
}

.tw-hq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #3b2812;
}

.tw-hq-table th {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border-bottom: 1px solid #b38b4c;
  padding: 6px 8px;
  font-size: 11.5px;
  color: #31210c;
  font-weight: 700;
  white-space: nowrap;
}

.tw-hq-table .th-hq-bldg {
  text-align: left;
  padding-left: 10px;
}

.tw-hq-table .th-hq-necessidade {
  text-align: center;
}

.tw-hq-table .th-hq-action {
  text-align: right;
  padding-right: 12px;
}

.tw-hq-table .th-hq-reqs {
  text-align: left;
  padding-left: 10px;
}

.tw-hq-row {
  border-bottom: 1px solid #eedec2;
  transition: background 0.1s;
}

.tw-hq-row:nth-child(even) {
  background: #f6ecda;
}

.tw-hq-row:nth-child(odd) {
  background: #fbf5e6;
}

.tw-hq-row:hover {
  background: #f2e1c3;
}

.tw-hq-row.is-maxed {
  background: #f2ebd9;
}

.tw-hq-row td {
  padding: 5px 8px;
  vertical-align: middle;
}

.col-hq-bldg {
  text-align: left;
  padding-left: 10px !important;
}

.col-hq-bldg .tw-bldg-name-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 0;
  color: #2b1b0b;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.col-hq-bldg .tw-bldg-name-btn:hover strong {
  text-decoration: underline;
  color: #8c5218;
}

.col-hq-bldg .tw-bldg-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #6a461e;
}

.col-hq-bldg .tw-bldg-level {
  font-weight: 600;
  color: #553b1b;
  font-size: 11.5px;
}

.col-res {
  text-align: right;
  white-space: nowrap;
  width: 68px;
  padding: 5px 6px !important;
}

.res-cost-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3b2812;
}

.res-cost-item .res-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  flex-shrink: 0;
}

.res-cost-item.cost-short,
.hq-pop-pill.cost-short {
  color: #a82e20 !important;
  font-weight: 700;
}

.col-dur {
  text-align: center;
  white-space: nowrap;
  width: 80px;
  padding: 5px 6px !important;
}

.hq-dur-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: #4a3820;
}

.hq-dur-pill .clock-icon {
  font-size: 11px;
  opacity: 0.8;
}

.col-pop {
  text-align: center;
  white-space: nowrap;
  width: 55px;
  padding: 5px 6px !important;
}

.hq-pop-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a3820;
}

.hq-pop-pill .pop-icon {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}

.col-hq-action {
  text-align: right;
  white-space: nowrap;
  width: 125px;
  padding-right: 12px !important;
}

.hq-build-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, #9b6c3b, #6b4720);
  border: 1px solid #4a3014;
  border-radius: 3px;
  color: #fff6e0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.hq-build-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #b07c45, #7d5427);
  border-color: #3b250d;
  color: #ffffff;
}

.hq-build-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.hq-build-btn:disabled,
.hq-build-btn.is-blocked {
  opacity: 0.55;
  cursor: not-allowed;
  background: #8e8377 !important;
  border-color: #635b52 !important;
  color: #eaeaea !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.hq-build-btn .btn-hammer {
  font-size: 11px;
}

.col-hq-maxed-text {
  text-align: center;
  color: #73593b;
  font-style: italic;
  font-weight: 600;
  font-size: 11.5px;
  padding: 6px 10px;
}

.tw-muted-dash {
  color: #a08c70;
  font-size: 13px;
  display: inline-block;
  padding-right: 8px;
}

/* Locked Section */
.tw-hq-locked-table {
  border-top: 1px solid #c9a566;
}

.tw-hq-locked-row {
  border-bottom: 1px solid #eedec2;
  background: #fbf5e6;
}

.tw-hq-locked-row:nth-child(even) {
  background: #f6ecda;
}

.tw-hq-locked-row td {
  padding: 6px 10px;
}

.col-hq-reqs {
  text-align: left;
}

.hq-reqs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.hq-req-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #d4b886;
  background: #fff8eb;
  color: #3b2812;
}

.hq-req-badge.req-missing {
  background: #fdf2f0;
  border-color: #e5b4ad;
  color: #9c2718;
}

.hq-req-badge.req-met {
  background: #f0f7f0;
  border-color: #b5dab5;
  color: #2e7d32;
}

.hq-req-icon {
  font-size: 11.5px;
  color: #6a461e;
}

/* Village Rename Section */
.tw-hq-rename-card {
  background: #f6ecda;
  border: 1px solid #c9a566;
  border-radius: 4px;
  margin-top: 14px;
  padding: 10px 14px;
}

.tw-hq-rename-head h3 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3b2812;
}

.tw-hq-rename-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tw-hq-rename-input {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid #b38b4c;
  border-radius: 3px;
  background: #fffdf8;
  color: #2a1b0a;
  width: 250px;
  max-width: 100%;
}

.tw-hq-rename-input:focus {
  border-color: #6b4720;
  outline: none;
  box-shadow: 0 0 0 2px rgba(213, 173, 112, 0.4);
}

.tw-hq-rename-btn {
  background: linear-gradient(180deg, #dfbe80, #cba465);
  border: 1px solid #8e6c35;
  border-radius: 3px;
  color: #31210c;
  font-weight: 700;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.tw-hq-rename-btn:hover {
  background: linear-gradient(180deg, #ecd194, #d8b274);
}

/* Single Building Upgrades in non-HQ modals */
.tw-single-upgrade-wrap {
  margin-top: 8px;
}

.tw-single-bldg-table .th-hq-necessidade {
  text-align: center;
}

.tw-maxed-notice {
  text-align: center;
  padding: 12px;
  background: #fbf5e6;
  border: 1px solid #c9a566;
  border-radius: 4px;
  color: #553b1b;
  font-weight: 600;
  font-size: 12px;
}


/* Map Village Emoji Badges (Attacking & Supporting) */
.map-tile-badges {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
  display: flex;
  gap: 2px;
  align-items: center;
  pointer-events: auto;
}

.map-tile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  transition: transform 0.15s ease-out;
}

.map-tile-badge:hover {
  transform: scale(1.35);
}

.badge-attack-hostile {
  filter: drop-shadow(0 0 4px #ff1a00) drop-shadow(0 0 8px #ff1a00);
  animation: tileAttackPulse 1s infinite alternate;
}

.badge-attack-outbound {
  filter: drop-shadow(0 0 3px #e67e22) drop-shadow(0 0 6px #d35400);
  animation: tileAttackPulse 1.2s infinite alternate;
}

.badge-support {
  filter: drop-shadow(0 0 3px #27ae60) drop-shadow(0 0 6px #2ecc71);
}

/* Map Zones: Church (Fé) and Watchtower (Torre de Vigia) */
.map-zones-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.map-zone {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.map-zone-church {
  background: radial-gradient(circle, rgba(40, 130, 255, 0.16) 0%, rgba(40, 130, 255, 0.08) 80%, rgba(40, 130, 255, 0.22) 100%);
  border: 2px solid rgba(40, 130, 255, 0.7);
  box-shadow: 0 0 16px rgba(40, 130, 255, 0.2) inset;
}

.map-zone-watchtower {
  background: radial-gradient(circle, rgba(230, 160, 20, 0.10) 0%, rgba(230, 160, 20, 0.04) 80%, rgba(230, 160, 20, 0.18) 100%);
  border: 2px dashed rgba(230, 160, 20, 0.75);
}

.mini-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mini-zone {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.mini-zone-church {
  background: rgba(40, 130, 255, 0.35);
  border: 1px solid rgba(40, 130, 255, 0.85);
}

.mini-zone-watchtower {
  border: 1px dashed rgba(230, 160, 20, 0.85);
}

.tw-watchtower-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fdf5e6;
  border: 1px solid #d4a017;
  color: #7a5000;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85rem;
}

.tw-noble-detected {
  color: #c00000;
  font-weight: 700;
}

/* ============================================================ */
/* ASSISTENTE DE SAQUE (FARM ASSISTANT / AUTO-SAQUE) & MAP DOTS */
/* ============================================================ */

/* Minimap dots */
.mini-grid i.current {
  background: #ffffff !important;
  box-shadow: 0 0 5px #ffffff !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  z-index: 10 !important;
}
.mini-grid i.mine {
  background: #ffff00 !important;
  box-shadow: 0 0 3px #d4af37 !important;
  z-index: 5 !important;
}
.mini-grid i.barbarian {
  background: #757575 !important;
  box-shadow: none !important;
}
.mini-grid i.foreign,
.mini-grid i.player {
  background: #8b3a00 !important;
  box-shadow: none !important;
}
.mini-grid i.tribe {
  background: #0044ff !important;
}
.mini-grid i.ally {
  background: #00d4ff !important;
}

/* Main map village status dots (upper side of village graphic) */
.village-mark-dot {
  position: absolute;
  top: 5px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 6;
}
.map-markers .tile.is-current .village-mark-dot,
.map-markers .tile.selected .village-mark-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff, 0 1px 3px rgba(0, 0, 0, 0.85);
}
.map-markers .tile.is-mine .village-mark-dot {
  background: #ffff00;
  box-shadow: 0 0 4px #d4af37;
}
.map-markers .tile.is-foreign .village-mark-dot {
  background: #8b3a00;
}
.map-markers .tile.barbarian .village-mark-dot,
.map-markers .tile.is-barbarian .village-mark-dot {
  background: #757575;
}

/* Map Context Menu Quick Farm Row */
.mcm-quick-farm-row {
  display: flex;
  gap: 6px;
  padding: 4px 0 3px;
  border-bottom: 1px solid #3c4b3a;
  margin-bottom: 4px;
}
.mcm-farm-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  background: #253026;
  border: 1px solid #485746;
  border-radius: 4px;
  color: #f7e0b8;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mcm-farm-btn:hover {
  background: #354536;
  border-color: #d4af37;
  color: #fff;
  transform: translateY(-1px);
}
.mcm-farm-btn .mcm-badge-a,
.mcm-farm-btn .mcm-badge-b {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  font-weight: 900;
  font-size: 13px;
}
.mcm-badge-a {
  background: #2b4528;
  color: #9fe29f;
  border: 1px solid #4f7d49;
}
.mcm-badge-b {
  background: #25394a;
  color: #9cd2ff;
  border: 1px solid #4a6f8f;
}

/* Assistente de Saque Full Page */
.farm-assistant-shell {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #211d17;
  font-family: Verdana, Arial, sans-serif;
}
.fa-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #7c684d;
  padding-bottom: 6px;
}
.fa-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-title-icon {
  font-size: 24px;
}
.fa-title-wrap h2 {
  margin: 0;
  font: 700 1.5rem Georgia, serif;
  color: #2b1f13;
}
.fa-help-link {
  font-size: 12px;
  color: #69451a;
  cursor: pointer;
}
.fa-help-link:hover {
  text-decoration: underline;
}

.fa-panel {
  background: #f4eed8;
  border: 1px solid #7c684d;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.fa-panel-head {
  background: linear-gradient(180deg, #dfc699 0%, #caa463 100%);
  border-bottom: 1px solid #7c684d;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #3b2812;
}
.fa-panel-body {
  padding: 10px 12px;
}

/* Templates Table */
.fa-templates-table,
.fa-available-table,
.fa-targets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fa-templates-table th,
.fa-available-table th,
.fa-targets-table th {
  background: #e6d3ad;
  border: 1px solid #ba9e73;
  padding: 5px 6px;
  text-align: center;
  font-weight: 700;
  color: #332211;
}
.fa-templates-table td,
.fa-available-table td,
.fa-targets-table td {
  border: 1px solid #c9b48e;
  padding: 5px 6px;
  text-align: center;
  background: #fdfaf0;
}
.fa-unit-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.fa-num-input {
  width: 44px;
  padding: 3px 2px;
  font-size: 12px;
  text-align: center;
  background: #fff;
  border: 1px solid #8e734c;
  border-radius: 3px;
  color: #111;
}
.fa-num-input:focus {
  outline: 2px solid #df9933;
}
.fa-bldg-select {
  padding: 3px 4px;
  font-size: 11px;
  background: #fff;
  border: 1px solid #8e734c;
  border-radius: 3px;
  color: #111;
}
.fa-model-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  border-radius: 4px;
}
.badge-a {
  background: linear-gradient(180deg, #44773a 0%, #294e22 100%);
  color: #bbf0b5;
  border: 1px solid #1c3817;
}
.badge-b {
  background: linear-gradient(180deg, #375b7a 0%, #213c54 100%);
  color: #b2dbff;
  border: 1px solid #142839;
}
.fa-save-btn {
  background: linear-gradient(180deg, #e4a742 0%, #a26514 100%);
  border: 1px solid #573307;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: all 0.15s ease;
}
.fa-save-btn:hover {
  background: linear-gradient(180deg, #f0ba5b 0%, #b8771c 100%);
  transform: translateY(-1px);
}

/* Available Table */
.fa-av-label {
  text-align: left !important;
  font-size: 13px;
  color: #2b1f13;
  width: 140px;
}
.fa-av-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.fa-av-count {
  font-weight: 700;
}
.fa-av-count.has-troops {
  color: #1b5e20;
}
.fa-av-count.zero-troops {
  color: #888;
}

/* Filters */
.fa-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  padding: 4px 6px 12px;
  font-size: 12px;
  color: #3b2812;
  border-bottom: 1px solid #c9b48e;
  margin-bottom: 12px;
}
.fa-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Targets Table */
.fa-targets-table-wrap {
  overflow-x: auto;
}
.fa-targets-table th {
  padding: 6px 8px;
  font-size: 12px;
}
.fa-targets-table td {
  padding: 6px 8px;
}
.fa-th-village,
.fa-td-village {
  text-align: left !important;
  width: 240px;
}
.fa-target-name {
  font-weight: 700;
  color: #2b1f13;
  display: block;
}
.fa-target-coords {
  color: #6b553e;
  font-size: 11px;
}
.fa-th-dist,
.fa-td-dist {
  width: 100px;
}
.fa-td-dist strong {
  color: #2b1f13;
  font-size: 13px;
}
.fa-th-report,
.fa-td-report {
  text-align: left !important;
}
.fa-th-wall,
.fa-td-wall {
  width: 70px;
  font-weight: 700;
}
.fa-th-quick,
.fa-td-quick {
  width: 140px;
}
.fa-quick-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fa-quick-btn {
  width: 32px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #444;
  transition: all 0.12s ease;
}
.fa-btn-a {
  background: linear-gradient(180deg, #44773a 0%, #294e22 100%);
  color: #bbf0b5;
  border-color: #1c3817;
}
.fa-btn-a:hover:not(:disabled) {
  background: linear-gradient(180deg, #56914a 0%, #35622d 100%);
  color: #fff;
  transform: scale(1.08);
}
.fa-btn-b {
  background: linear-gradient(180deg, #375b7a 0%, #213c54 100%);
  color: #b2dbff;
  border-color: #142839;
}
.fa-btn-b:hover:not(:disabled) {
  background: linear-gradient(180deg, #49749a 0%, #2b4d6a 100%);
  color: #fff;
  transform: scale(1.08);
}
.fa-btn-rally {
  background: linear-gradient(180deg, #d3c49e 0%, #ab9768 100%);
  color: #222;
  border-color: #6a5732;
  font-size: 13px;
}
.fa-btn-rally:hover {
  background: linear-gradient(180deg, #e4d7b5 0%, #baa87b 100%);
  transform: scale(1.08);
}
.fa-target-row.is-attacking {
  background: #fdf5e6;
}
.fa-active-march-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #ffe0b2;
  border: 1px solid #ff9800;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #b25900;
}
.fa-empty-state {
  padding: 24px 12px !important;
  color: #69523a;
}
.fa-empty-state p {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}