/* Recruitment shares the original game art; its blue/gold frame is native UI. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
.military-actions{position:absolute;display:flex;gap:9px;transform:translateX(-50%);pointer-events:none;z-index:6}
.military-actions[hidden]{display:none}
.military-actions button{pointer-events:auto;position:relative;width:52px;min-height:47px;padding:8px;background:linear-gradient(145deg,#2360ae,#082c66);color:#ffdd79;border:2px solid #efbd54;border-radius:11px;box-shadow:inset 0 0 0 2px #072251,0 3px 6px #0013279c;display:grid;place-items:center}
.military-actions svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #001327)}
.military-actions small{position:absolute;top:48px;left:50%;transform:translateX(-50%);color:#fff7db;font-size:9px;font-weight:700;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap}
.military-actions button:disabled{opacity:.55}
.modal[data-presentation=royal]{background:#041324b5;backdrop-filter:blur(5px)}
.modal[data-presentation=royal] .modal-card{padding:0;max-width:520px;border:0;background:transparent;border-radius:18px;overflow:visible;box-shadow:0 20px 80px #0009}
.royal-panel{color:#081841;background:linear-gradient(115deg,#f8f0dc,#eaddbf);border:6px solid #e4ac3d;border-radius:17px;box-shadow:0 0 0 3px #153973,inset 0 0 0 4px #164c8c,inset 0 0 0 7px #ffdb82;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);display:flex;flex-direction:column;overflow:hidden}
.royal-heading{display:flex;align-items:center;gap:10px;padding:10px 9px 10px 18px;border-bottom:4px solid #e9b54f;background:radial-gradient(ellipse at 20% 0,#256cbe,transparent 70%),linear-gradient(120deg,#174f97,#07306d);box-shadow:inset 0 0 0 2px #fff0bd75;flex:none}
.royal-heading h2{flex:1;margin:0;text-align:center;font:800 clamp(20px,3.6vw,31px)/1.13 system-ui;color:#fff0c6;text-shadow:0 3px 1px #031b3c,0 0 2px #041632;letter-spacing:-.8px}
.royal-icon{display:grid;place-items:center;flex:none;min-height:44px;width:44px;height:44px;padding:9px;background:linear-gradient(145deg,#236abe,#093b83);color:#ffda73;border:3px solid #e7b13f;border-radius:11px;box-shadow:inset 0 0 0 2px #06275e,0 2px 0 #815821;font-size:29px;font-weight:900;line-height:1}
.royal-icon:hover{background:linear-gradient(145deg,#3586de,#165094)}
.royal-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 #072b54)}
.royal-body{padding:14px 18px 16px;overflow-y:auto;min-height:0;scrollbar-color:#e3ad3c #e7d6ae;scrollbar-width:thin}
.building-portrait{text-align:center;display:flex;flex-direction:column;align-items:center;margin:-8px 0 12px}
.building-portrait img{width:100%;height:clamp(135px,27dvh,280px);object-fit:contain;filter:drop-shadow(0 6px 5px #b79d7a50)}
.building-portrait strong{font-size:29px;line-height:1.1;font-weight:900;letter-spacing:-1px}
.royal-bar{background:linear-gradient(110deg,#205fa9,#073370);border:2px solid #e2b35a;border-radius:8px 8px 1px 1px;box-shadow:inset 0 0 0 2px #093769,0 1px 0 #fff5cd;color:#fff0cc;text-align:center;font:800 21px/1.2 system-ui;padding:8px 24px;margin:0;position:relative;text-shadow:0 2px 0 #06172c}
.royal-bar:before,.royal-bar:after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);color:#ffcf64;font-size:17px;text-shadow:0 2px 1px #8a521e}.royal-bar:before{left:10px}.royal-bar:after{right:10px}
.building-description{text-align:center;font-weight:650;font-size:15px;line-height:1.5;padding:16px 10px;margin:0 0 10px;border:2px solid #d8c29877;border-radius:0 0 13px 13px;background:#fbf3e06b}
.building-bonuses{margin:0;border:2px solid #d8c29877;border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
.building-bonuses>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;background:#fff6e199}
.building-bonuses>div:nth-child(even){background:#dfcdae55}.building-bonuses dt{font-size:15px;font-weight:750;max-width:48%}.building-bonuses dd{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;margin:0;font-size:23px;font-weight:900;font-variant-numeric:tabular-nums}
.base-value{color:#071944}.bonus-value{color:#168742}.royal-note{color:#685d43;font-size:11px;line-height:1.4;margin:10px 2px}
.royal-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;border:3px solid #d99a2d;border-radius:13px;font-weight:850;font-size:23px;box-shadow:inset 0 0 0 2px #fff3b98f,inset 0 0 0 4px #bb781b55,0 3px 0 #9f6926,0 5px 9px #172d4b40;padding:9px 12px;color:#08245a;line-height:1.13}
.gold-button{background:linear-gradient(#fff694 0%,#ffda38 22%,#ffc31f 68%,#f4a522)}.gold-button:hover{background:linear-gradient(#fffac4,#ffea59 28%,#ffcf2d)}
.blue-button{color:#fff5d7;background:linear-gradient(#337fd7,#1261bc 38%,#06418e);text-shadow:0 2px 0 #062653}.blue-button:hover{background:linear-gradient(#579cf2,#1b70d4 45%,#124f98)}
.royal-text{display:block;margin:8px auto -5px;min-height:35px;background:none;border:0;padding:7px;color:#245792;font-size:12px;text-decoration:underline}.royal-text:hover{background:#c6b78e33}
.building-details .royal-body{display:flex;flex-direction:column;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 120px)}
.building-details .building-description{flex:none;border-radius:12px;margin-bottom:14px}.building-details .royal-note{flex:none}
.military-table-scroll{overflow:auto;min-height:130px;max-height:60dvh;border:2px solid #dfbc79;border-radius:12px;scrollbar-color:#e4b247 #164883;scrollbar-width:thin;overscroll-behavior:contain;position:relative}
.military-table{border-collapse:separate;border-spacing:0;width:100%;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.military-table thead{position:sticky;top:0;z-index:1;background:linear-gradient(#1b5da9,#0c3878);color:#fff3d6;font-size:15px;text-shadow:0 2px 0 #062653}
.military-table th,.military-table td{padding:13px 8px}.military-table tbody th,.military-table tbody td{border-top:2px solid transparent;border-bottom:2px solid transparent;font-weight:800;white-space:nowrap}
.military-table tbody tr:nth-child(even){background:#dcc69f55}.military-table tbody tr:nth-child(odd){background:#fff5e27d}.military-table tbody .current-level{background:linear-gradient(#fff3a0,#ffe26c)}
.military-table tbody .current-level>*{border-color:#eeb71a}.military-table .current-level>:first-child{border-left:2px solid #eeb71a;border-radius:10px 0 0 10px}.military-table .current-level>:last-child{border-right:2px solid #eeb71a;border-radius:0 10px 10px 0}

.modal[data-presentation=recruit]{padding:0;background:#07336f;backdrop-filter:none}
.modal[data-presentation=recruit] .modal-card{max-width:none;max-height:none;width:100%;height:100%;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);border:0;border-radius:0;background:radial-gradient(ellipse at 40% 45%,#1769bc,#032651 75%);overflow:hidden}
.recruit-screen{height:100%;display:flex;flex-direction:column;color:#0b2050;min-height:0;font-weight:600}
.recruit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,1.03fr);flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.recruit-stage{display:flex;flex-direction:column;min-height:300px;position:relative;background:radial-gradient(ellipse at 50% 55%,#39b9fd50,transparent 62%),radial-gradient(ellipse at 60% 20%,#1d74cdbf,#042452 90%)}
.recruit-heading{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px 7px;flex:none;color:#fff0c6;text-align:center}
.recruit-heading h2{font:900 clamp(24px,3.5vw,42px)/1.03 system-ui;letter-spacing:-1.3px;margin:0 0 5px;text-shadow:0 3px 1px #031431,1px 0 2px #061a30}
.recruit-heading p{margin:0;font-size:16px;font-weight:750;color:#fff2ce;text-shadow:0 2px 0 #042a54}.rank-rule{color:#f8c957;font-size:13px;padding:0 12px}
.recruit-hero{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;position:relative;isolation:isolate;padding:14px 12px 37px}
.hero-warrior{position:relative;width:88%;height:100%;max-height:600px;z-index:1;filter:drop-shadow(0 12px 9px #001c47)}
.summoning-circle{position:absolute;left:13%;width:74%;aspect-ratio:1;top:9%;border:2px solid #94e1ff42;border-radius:50%;box-shadow:0 0 0 8px #39a9df25,0 0 0 10px #88dbfc36,0 0 38px #3ac3f83d,inset 0 0 42px #3ebbf437;background:repeating-conic-gradient(from 10deg,transparent 0deg 28deg,#64bfff22 28deg 30deg);z-index:0}
.summoning-circle:after{content:'✧';font-size:180px;color:#87e2ff1c;position:absolute;inset:0;display:grid;place-items:center}
.recruit-building-name{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#bedefe;font-size:12px;letter-spacing:.8px}
.recruit-console{background:linear-gradient(120deg,#fcf5e0,#e8d9b7);border:4px solid #dba848;border-radius:17px 0 0 17px;box-shadow:inset 0 0 0 2px #fff2c0;color:#0b1c4c;padding:10px 16px 10px;overflow-y:auto;min-width:0;scrollbar-color:#d0a24f #e5d6b5;scrollbar-width:thin}
.recruit-console>.royal-bar{margin:-8px -14px 6px;border-radius:11px 0 0 0;font-size:24px;padding:10px 28px}
.rank-carousel{display:flex;align-items:center;gap:4px;margin:8px -7px 2px;min-width:0}.rank-arrow{width:31px;height:48px;min-height:48px;padding:7px 4px;border-width:2px;border-radius:11px}
.rank-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(58px,calc((100% - 24px)/5),106px);gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;min-width:0;flex:1;padding:8px 2px;position:relative;overscroll-behavior-x:contain}
.rank-strip::-webkit-scrollbar{display:none}
.rank-card{position:relative;scroll-snap-align:center;border:3px solid #c59848;background:radial-gradient(ellipse at center,#fffcdf,#ecdbb4);border-radius:11px;box-shadow:inset 0 0 0 2px #fff4c3,0 0 0 1px #123b6e;min-height:0;height:150px;padding:7px 1px 25px;display:flex;align-items:flex-end;justify-content:center;transition:box-shadow .15s}
.rank-card:hover{background:#fff0be}.rank-card.selected-rank{border-color:#ffdb5f;box-shadow:0 0 0 3px #3abcd7,0 0 10px #13b8e8,inset 0 0 0 2px #fffad5;z-index:1}
.rank-card .troop-art{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #977c6038)}
.rank-plaque{position:absolute;bottom:-2px;left:13%;right:13%;padding:2px 2px;border:2px solid #eac064;border-radius:6px;background:linear-gradient(#2267a9,#073970);color:#fff5d7;font:800 17px/1 system-ui;box-shadow:0 1px 2px #55330d}
.rank-lock{position:absolute;top:3px;left:0;right:0;color:#765e34;font-size:9px;background:#fff0ced9;line-height:15px}.locked-rank .troop-art{opacity:.6;filter:saturate(.6)}.rank-card:disabled{opacity:1}
.owned-count{text-align:center;font-size:14px;font-weight:700;margin:4px 0 7px;font-variant-numeric:tabular-nums}
.recruit-selects{display:flex;gap:8px;margin-bottom:3px}.recruit-selects>label{flex:1;min-width:0}
#recruit-form label{color:#19335a;font-size:12px;font-weight:700;margin:0}
#recruit-form select{font:600 12px system-ui;min-height:36px;padding:6px 8px;background:#fff5dd;border:1px solid #c3a66c;color:#102851;margin:3px 0 5px}
.recruit-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;border:2px solid #cfab63;border-radius:12px;background:#f9edcd;box-shadow:inset 0 0 0 2px #fff6e3;padding:6px}
.recruit-resource{display:flex;align-items:center;gap:7px;min-height:33px;padding:3px 6px;background:#e5d2a830;border-radius:6px;font-size:13px;font-variant-numeric:tabular-nums;min-width:0}
.recruit-resource>span{min-width:0;overflow-wrap:anywhere}.recruit-resource img{width:29px;height:29px;object-fit:contain;flex:none}.resource-balance{font-weight:800}
.recruit-resource.provisions{grid-column:1/-1;min-height:20px;justify-content:center;background:none;padding:0;font-size:11px}.provisions-icon{color:#926128;font-size:25px;line-height:1}.provisions .provisions-icon{font-size:21px}.shortage{color:#a3382b}
.quantity-label{display:flex;justify-content:space-between;align-items:baseline;gap:7px;margin-top:9px}.quantity-label>span{font-size:10px;color:#6d6245}
.recruit-quantity{display:grid;grid-template-columns:42px minmax(30px,1fr) 42px 84px;gap:6px;align-items:center;margin:4px 0 0}
.recruit-quantity .royal-icon{height:42px;width:42px;min-height:42px;padding:3px;font-size:30px}
#recruit-form #recruit-count{font-size:18px;font-weight:800;text-align:center;border:2px solid #ccb17a;box-shadow:inset 0 0 0 2px #fff6e0;border-radius:9px;background:#fff3d6;color:#0c2554;min-height:42px;height:42px;margin:0;padding:5px;width:100%;appearance:textfield;font-variant-numeric:tabular-nums}
#recruit-count::-webkit-inner-spin-button,#recruit-count::-webkit-outer-spin-button{appearance:none;margin:0}
#recruit-form #recruit-slider{appearance:none;margin:0;padding:0;width:100%;height:40px;min-height:40px;border:0;background:transparent;accent-color:#eeb741;cursor:pointer}
#recruit-slider::-webkit-slider-runnable-track{height:17px;border:2px solid #d5a350;border-radius:12px;background:linear-gradient(#38aeec,#0053ae);box-shadow:inset 0 0 0 2px #082a6377}
#recruit-slider::-webkit-slider-thumb{appearance:none;width:30px;height:30px;background:linear-gradient(135deg,#fff195,#eeaa1d);border:2px solid #bf8829;box-shadow:inset 0 0 0 2px #ffe9a2,0 2px 2px #724b2677;border-radius:50%;margin-top:-9px}
#recruit-slider::-moz-range-track{height:13px;border:2px solid #d5a350;border-radius:12px;background:#1574c9}#recruit-slider::-moz-range-thumb{width:26px;height:26px;border:2px solid #bc8b37;border-radius:50%;background:#f7ca43}
.base-recruit-time{text-align:center;font-size:11px;font-weight:500;margin:5px 0 7px;font-variant-numeric:tabular-nums}
.recruit-warning{color:#a33524;font-size:12px;margin:5px 0;text-align:center}.recruit-warning:empty{display:none}
.recruit-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.recruit-buttons .royal-button{font-size:23px;min-width:0;padding:8px 4px;min-height:65px}
.button-sub{display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px;font-variant-numeric:tabular-nums}.button-sub img{width:23px;height:23px;object-fit:contain}
.instant-note{text-align:center;color:#776542;font-size:9px;font-weight:500;line-height:1.35;margin:8px 0 5px}
.recruit-extras{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:5px}.recruit-extras button{background:#0c377917;border:1px solid #c6b079;color:#164781;min-height:36px;padding:6px 8px;font-size:10px;font-weight:700;border-radius:7px}.recruit-extras>span{font-size:10px;flex-basis:100%;text-align:center}
.recruit-console .recruit-progress{border:2px solid #cbaa69;border-radius:12px;background:#fcf2d87a;padding:9px 12px;margin:5px 0 8px;color:#0e2a55;font-size:12px;font-variant-numeric:tabular-nums}
.recruit-console .recruit-progress p{display:flex;justify-content:space-between;gap:6px;margin:0 0 6px}.recruit-console .recruit-progress p:first-child{font-size:13px;flex-wrap:wrap}.recruit-console .recruit-progress progress{height:10px;accent-color:#1261b6}.recruit-console .recruit-progress small{color:#716447;font-size:10px}
.recruit-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;min-height:73px;background:#083b7a;border:3px solid #d8a745;border-radius:4px 4px 12px 12px;box-shadow:inset 0 0 0 2px #fff0af66;overflow:hidden}
.recruit-navigation button{border:0;border-right:2px solid #d4a247;border-radius:0;background:linear-gradient(#12569d,#063774);color:#fff3d6;min-height:68px;padding:5px 6px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;font-size:16px;text-shadow:0 2px 0 #09264f;min-width:0}
.recruit-navigation button:last-child{border-right:0}.recruit-navigation button img{height:57px;width:63px;object-fit:contain;filter:drop-shadow(0 2px 2px #001e3f)}
.recruit-navigation button[aria-current=page]{background:linear-gradient(#fff5c9,#e7d3a5);color:#08214e;text-shadow:none;box-shadow:inset 0 0 0 2px #fff3be}.recruit-navigation button:disabled{opacity:.5}.recruit-navigation small{font-size:9px}
@media(min-width:1100px){.recruit-console{padding:18px 28px}.recruit-console>.royal-bar{margin:-16px -26px 12px}.rank-card{height:180px}.rank-carousel{margin:12px 0 10px}.recruit-resource{min-height:40px;font-size:15px}.owned-count{margin:10px 0 12px}.recruit-buttons .royal-button{min-height:78px;font-size:27px}.recruit-extras{margin-top:12px}}
@media(max-width:650px){
 .modal[data-presentation=royal]{padding:calc(var(--safe-top) + 9px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 9px) calc(var(--safe-left) + 10px)}
 .royal-panel{border-width:4px;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 22px)}.royal-heading{padding:9px 7px 9px 11px;gap:4px}.royal-heading h2{font-size:23px}.royal-heading .royal-icon{width:42px;height:42px;min-height:42px}.royal-body{padding:10px 11px 12px}.building-bonuses dt{font-size:13px}.building-bonuses dd{font-size:20px}.building-description{font-size:13px;padding:12px 7px}.royal-bar{font-size:19px;padding:7px 24px}.royal-button{font-size:24px}.military-table{font-size:14px}.military-table thead{font-size:12px}.military-table th,.military-table td{padding:12px 5px}
 .recruit-layout{display:block}.recruit-stage{height:clamp(210px,30dvh,310px);min-height:0}.recruit-heading{padding:8px 11px 2px;gap:7px}.recruit-heading h2{font-size:30px}.recruit-heading p{font-size:12px}.recruit-heading .royal-icon{width:42px;height:42px;min-height:42px}.recruit-hero{padding:5px 12px 22px}.hero-warrior{width:73%;max-height:none}.recruit-building-name{font-size:9px;bottom:5px}.summoning-circle{width:51%;left:24%;top:0}
 .recruit-console{overflow:visible;border-width:3px;border-radius:12px 12px 0 0;padding:8px 10px}.recruit-console>.royal-bar{border-radius:8px 8px 1px 1px;margin:-6px -8px 3px;font-size:19px;padding:7px 24px}.rank-card{height:108px;padding:6px 1px 20px;border-width:2px}.rank-carousel{margin:4px -5px 0;gap:3px}.rank-strip{gap:5px;grid-auto-columns:clamp(49px,calc((100% - 20px)/5),90px);padding:6px 2px}.rank-arrow{width:25px;height:43px;min-height:43px;padding:5px 3px}.rank-plaque{font-size:14px;padding:3px 1px}.rank-lock{font-size:8px;line-height:13px}.owned-count{font-size:12px;margin:2px 0 5px}
 .recruit-resource{min-height:28px;font-size:11px;padding:1px 3px;gap:5px}.recruit-resource img{width:24px;height:24px}.recruit-resources{padding:5px;gap:2px}.recruit-resource.provisions{min-height:16px;font-size:10px}.provisions .provisions-icon{font-size:16px}.recruit-quantity{grid-template-columns:38px minmax(25px,1fr) 38px 77px;gap:5px}.recruit-quantity .royal-icon{width:38px;height:38px;min-height:38px;font-size:26px}#recruit-form #recruit-count{height:38px;min-height:38px;font-size:16px}.quantity-label{margin-top:7px}.recruit-buttons{gap:8px}.recruit-buttons .royal-button{font-size:20px;min-height:60px;padding:6px 3px}.button-sub{font-size:15px}.button-sub img{height:20px;width:20px}.recruit-extras{margin-top:2px}.recruit-extras button{font-size:9px;min-height:32px;padding:5px 7px}.instant-note{font-size:8px}
 .recruit-navigation{min-height:63px;border-width:2px}.recruit-navigation button{min-height:59px;flex-direction:column;gap:1px;font-size:10px;line-height:1.1;padding:3px 2px;border-right-width:1px}.recruit-navigation button img{width:42px;height:35px}.recruit-navigation small{font-size:8px}
}
@media(orientation:landscape) and (max-height:550px){.recruit-layout{grid-template-columns:minmax(240px,42%) minmax(0,58%)}.recruit-stage{min-height:200px}.recruit-heading{padding:7px 10px}.recruit-heading h2{font-size:25px}.recruit-heading p{font-size:12px}.recruit-heading .royal-icon{width:40px;height:40px;min-height:40px}.recruit-hero{padding-top:3px}.recruit-console{padding:8px 13px;overflow-y:auto}.rank-card{height:115px}.recruit-console>.royal-bar{font-size:19px}.recruit-navigation{min-height:52px}.recruit-navigation button{min-height:46px;font-size:12px;padding:2px 6px;gap:7px}.recruit-navigation button img{height:40px;width:43px}.royal-panel{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 25px)}.building-portrait img{height:155px}}
@media(prefers-reduced-motion:reduce){.rank-strip{scroll-behavior:auto}}
@media(max-width:650px) and (max-height:800px) and (orientation:portrait){.recruit-stage{height:clamp(155px,24dvh,188px)}.rank-card{height:95px}.recruit-heading h2{font-size:27px}.recruit-heading p{font-size:11px}.recruit-extras button{min-height:28px}.recruit-console .royal-bar{padding-top:6px;padding-bottom:6px}.recruit-resource{min-height:25px}}
/* 0.14: common building actions and the cream / gold base style. */
.military-actions button[hidden]{display:none}.building-portrait{position:relative}.building-skin-icon{position:absolute;left:0;top:4px;z-index:1;background:linear-gradient(#fff4cf,#e8bc65)!important;color:#815520!important;box-shadow:inset 0 0 0 2px #fff5cf,0 3px 4px #54351240}.building-skin-icon svg{fill:#c59036;stroke:#815520}
.move-actions button,.move-actions [data-do=cancelMove],.move-actions [data-do=applyMove]{border:2px solid #b77a24;background:linear-gradient(#fff8d9,#e8bf72);box-shadow:inset 0 0 0 2px #fff0bb,0 2px 5px #2c190c70}.move-actions svg{stroke:#8c5d1d;filter:drop-shadow(0 1px 0 #fff6d5)}
#activity-body{border-color:#c3984b}#activity-toggle span{background:linear-gradient(125deg,#fff7d5 12%,#e4b456 60%,#a56d21);filter:drop-shadow(0 1px 1px #493011);border-left:2px solid #fff3c9}
.resource canvas{width:31px;height:30px;display:block}.hero-portrait canvas{width:100%;height:100%;display:block}.hero-portrait:has(canvas){height:310px;background:radial-gradient(ellipse at 50% 65%,#365fa0,#102847 75%)}
@media(max-width:600px){#resources{gap:0}#resources .resource{width:30px;min-width:30px}#resources .resource span{font-size:9px}.resource img,.resource canvas{width:24px;height:26px}#player-names{min-width:32px}#player-name{font-size:9px}#city-name{font-size:8px}#player-summary{gap:2px}#hud{gap:2px;padding-inline:4px}.hero-portrait:has(canvas){height:260px}}
@media(max-width:370px){#resources .resource{width:28px;min-width:28px}#settings{width:23px;min-width:23px}#player-power{min-width:25px}#player-names{min-width:25px}#player-power b{font-size:9px}}
.city-defense-card{margin:20px 30px;max-width:780px}.city-guard-status{position:absolute;bottom:calc(var(--safe-bottom) + 14px);left:calc(var(--safe-left) + 12px);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 24px);padding:9px 14px;background:#183359d9;color:#ffedc2;border:1px solid #dfb75f;border-radius:8px;font:600 12px/1.4 system-ui;pointer-events:none}.city-guard-status[hidden]{display:none}
.building-income canvas{display:block;width:100%;height:100%}
/* 0.15: one shared HUD row; settings sits directly below the square avatar. */
:root{--hud-inset:18px;--hud-height:64px}
#hud{display:flex;flex-direction:row;align-items:center;padding:4px var(--hud-inset);gap:14px}
#player-summary{flex:0 1 auto;gap:8px;min-width:0;overflow:hidden}
#player-avatar{width:46px;height:46px;min-width:46px;min-height:46px}
#player-names{flex:1;min-width:0;max-width:300px}
#player-heading{display:flex;align-items:center;justify-content:flex-start;gap:.25em;min-width:0;white-space:nowrap;font-size:14px;line-height:22px}
#player-name{flex:0 1 auto;min-width:0;max-width:180px;font-size:inherit;line-height:inherit}
#player-power{display:inline-flex;flex:none;flex-direction:row;align-items:center;gap:2px;padding:0;min-height:22px;min-width:0;border-radius:3px}
#player-power img{width:22px;height:22px}#player-power b{font-size:12px;line-height:22px;max-width:none}
#home{min-height:20px;height:auto;max-width:100%;width:100%;padding:0}#city-name{font-size:12px;line-height:20px}
#resources{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:10px;width:auto;margin-left:auto}
#resources .resource{width:54px;min-width:54px;min-height:48px;padding:0}#resources .resource span{font-size:12px;line-height:16px;white-space:nowrap}
#city-bar{left:calc(var(--safe-left) + var(--hud-inset));right:calc(var(--safe-right) + var(--hud-inset))}
#city-bar #settings{width:46px;min-width:46px;min-height:50px;margin:0;padding:3px 0;font-size:27px;line-height:32px;color:#ffe2a0;text-shadow:0 2px 3px #213240}
@media(max-width:800px){#hud{gap:8px}#resources{gap:2px}#resources .resource{width:42px;min-width:42px}}
@media(max-width:600px){
 :root{--hud-inset:6px;--hud-height:59px}
 #hud{padding:3px var(--hud-inset);gap:4px}
 #player-summary{flex:1;gap:5px;width:auto;height:auto}
 #player-names{max-width:none;min-width:0}#player-heading{font-size:10px;line-height:19px;gap:.25em}
 #player-name{font-size:inherit;min-width:0;max-width:100%}
 #player-power{min-height:19px;gap:1px}#player-power img{width:16px;height:18px}#player-power b{font-size:10px;line-height:19px}
 #home{min-height:19px}#city-name{font-size:10px;line-height:19px}
 #resources{gap:1px}#resources .resource{width:34px;min-width:34px;min-height:48px}
 #resources .resource span{font-size:9px;line-height:15px;letter-spacing:-.15px}
 .resource img,.resource canvas{width:25px;height:29px}
 #city-bar #settings{font-size:25px}
}
@media(max-width:370px){#resources .resource{width:32px;min-width:32px}#player-summary{gap:4px}#hud{gap:3px}#player-heading{font-size:9px}#player-power b{font-size:9px}}
/* Embedded compact numbers have identical metrics on Android and desktop. */
@font-face{font-family:EtherDigits;src:url('/web/fonts/ether-digits.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
#resources .resource span,#player-power b{font-family:EtherDigits,Arial,sans-serif;letter-spacing:0}
@media(max-width:340px){#resources .resource{width:29px;min-width:29px}#resources .resource span{font-size:8.5px}#player-power img{width:15px}}

@media(max-width:600px){#resources .resource span{font-size:10px}}
@media(max-width:340px){#resources .resource span{font-size:9px}}
@media(max-width:340px){#resources .resource{width:31px;min-width:31px}}
/* Half a second up, half a second down, four seconds at rest. */
.rank-upgrade-arrow{position:absolute;left:3px;top:5px;width:22px;height:28px;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 1px #153916a0);animation:rank-upgrade-bounce 5s infinite;transform:translateY(0)}
.rank-upgrade-arrow svg{width:100%;height:100%;display:block}.recruit-hero-art{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;max-width:100%}.recruit-hero-art .rank-upgrade-arrow{left:4%;top:8%;width:29px;height:36px}
@keyframes rank-upgrade-bounce{0%{transform:translateY(0);animation-timing-function:ease-in-out}10%{transform:translateY(-8px);animation-timing-function:ease-in-out}20%,100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.rank-upgrade-arrow{animation:none}}
.recruit-hero-art{width:100%;min-width:0}.recruit-hero-art .hero-warrior{height:100%;object-fit:contain}.recruit-hero-art .rank-upgrade-arrow{left:17%;top:8%}

/* All class and tier statistics come from the shared balance model. */
.recruit-combat-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:10px 12px;color:#112958}
.recruit-combat-stats>div{text-align:center;min-width:48px}.recruit-combat-stats dt{font-size:11px;font-weight:600}.recruit-combat-stats dd{margin:2px 0 0;font-size:15px;font-weight:800}

/* 0.21: blue / gold / black left toggle; accessible rank-upgrade buttons. */
#activity-toggle{width:38px;min-width:38px;height:52px;min-height:52px;padding:7px;border:2px solid #eebe54;border-radius:0 11px 11px 0;background:linear-gradient(145deg,#2360ae,#082c66);box-shadow:0 0 0 1px #080d15,inset 0 0 0 2px #07182f,0 3px 6px #0008}
#activity-toggle span{width:17px;height:27px;background:linear-gradient(125deg,#fff0b0,#efbd54 65%,#aa7423);border:0;filter:drop-shadow(0 1px 1px #000)}
#activity-toggle:hover{background:linear-gradient(145deg,#367fd0,#104685)}
.rank-item{position:relative;min-width:0;scroll-snap-align:center}
.rank-item .rank-card{width:100%}
button.rank-upgrade-arrow{pointer-events:auto;min-height:36px;width:32px;height:36px;min-width:0;padding:4px;background:none;border:0;border-radius:3px;box-shadow:none;color:inherit;cursor:pointer}
button.rank-upgrade-arrow:hover{background:#fff4b440}
button.rank-upgrade-arrow:disabled{opacity:.45;cursor:default}
button.rank-upgrade-arrow svg{pointer-events:none}
.upgrade-warnings{background:#f5dec1;color:#852d24;border:1px solid #c59451;border-radius:9px;padding:10px 12px;margin:12px 0;font-weight:700}
.upgrade-warnings p{margin:4px 0}
.troop-promotion-art{display:flex;align-items:center;justify-content:center;gap:12px;height:210px;color:#143565;font-size:28px}
.troop-promotion-art .troop-art{width:40%;height:100%;object-fit:contain}
.troop-promotion-quantity{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center}
.troop-promotion-quantity input{color:#12335c;background:#fff4d9;border:2px solid #c69a49}
.troop-promotion-quantity input[type=range]{accent-color:#1766ad}