:root{--ub950:#031a38;--ub900:#062b5d;--ub800:#084b9b;--ub700:#1267c4;--ub500:#2b91ef;--ub300:#80c7ff;--ub100:#0b356a;--ub050:#082754;--uink:#f4faff}

/* Portrait HUD: no legacy XP strip, compact three-digit resource counters. */
#lobby .base-hud-tl{left:10px!important;top:10px!important;width:70px!important;max-width:70px!important}
#lobby .base-hud-tl .profile-hud{position:relative!important;width:70px!important;height:70px!important;padding:0!important;display:block!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
#lobby .profile-avatar-img{width:62px!important;height:62px!important;display:block!important;object-fit:cover!important;object-position:50% 22%!important;border:3px solid #fff!important;border-radius:50%!important;background:var(--ub900)!important;box-shadow:0 0 0 3px var(--ub700),0 4px 10px #0009!important}
#lobby .base-hud-tl .ph-lvl{position:absolute!important;right:0!important;bottom:0!important;min-width:34px!important;padding:3px 6px!important;color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border:2px solid #fff!important;border-radius:11px!important;font:900 9px/1 system-ui!important;box-shadow:0 2px 4px #0008!important}
#lobby .base-hud-tl .ph-xp{display:none!important}
#lobby .base-hud-tr{left:88px!important;right:54px!important;top:17px!important;gap:6px!important}
#lobby .base-hud-tr .coins{height:36px!important;padding:3px 5px 3px 9px!important;border:2px solid var(--ub300)!important;border-radius:18px!important;background:linear-gradient(#176fd0,#084b9b)!important;box-shadow:inset 0 2px #ffffff4d,0 3px #052b59,0 6px 11px #0007!important}
/* ЛІЧИЛЬНИКИ РОСТУТЬ ВЛІВО, А НЕ ЗАЙМАЮТЬ МІСЦЕ НАПЕРЕД.

   Було: у монет min-width 96px і flex:1 1 auto, тобто пігулка тяглась
   на весь вільний простір незалежно від числа — «150» плавало в
   порожній колбі на пів екрана. Енергія й зірки мали жорсткі 76 і 70.

   Стало: кожна пігулка завширшки рівно як її вміст, а вся група
   притиснута до правого краю (до шестерні). Іконка ресурсу стоїть у
   правому кінці пігулки, тому росте вона саме вліво — рівно як просив
   сенс: число довше, колба довша, іконка на місці.

   min-width:0 на пігулці й на числі потрібні обидва: без них flex не
   дає елементу стиснутись нижче за ширину вмісту, і на семизначних
   сумах група полізла б під аватар замість того, щоб обрізатись. */
#lobby .base-hud-tr{justify-content:flex-end!important}
#lobby .base-hud-tr .coins,
#lobby .base-hud-tr .coins:first-child,
#lobby .base-hud-tr .coins.energy,
#lobby .base-hud-tr .coins.stars{
  flex:0 1 auto!important;width:auto!important;min-width:0!important
}
#lobby .base-hud-tr .coins b{min-width:0!important;text-align:right!important}
#lobby .base-hud-tr .coins b{font:900 11px/1 system-ui!important;color:#fff!important;overflow:hidden!important}
#lobby .base-hud-tr .coin-ic{width:25px!important;height:25px!important;flex:0 0 25px!important;background-size:contain!important}
#lobby #btnSettings{right:8px!important;top:15px!important;width:40px!important;height:40px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:3px solid #fff!important;border-radius:50%!important;background:linear-gradient(#2b91ef,#1267c4)!important;color:#fff!important;font:900 24px/1 system-ui!important;line-height:1!important;text-indent:0!important;box-shadow:0 0 0 3px var(--ub900),0 5px 10px #0008!important;transform:none!important}

/* Full-screen profile using the same hierarchy measured in E:\pp. */
.profile-picker{position:fixed!important;inset:0!important;z-index:100000!important;display:none!important;padding:0!important;background:var(--ub950)!important;backdrop-filter:none!important}
.profile-picker.show{display:block!important}
.profile-picker-card{width:100%!important;height:100%!important;max-width:none!important;padding:0!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,#082754,#03172f)!important;color:#fff!important;box-shadow:none!important;overflow:auto!important}
.profile-picker-card>header{position:sticky!important;top:0!important;z-index:2!important;height:74px!important;margin:0!important;padding:0 14px!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;border:0!important;border-bottom:3px solid #258bea!important;border-radius:0!important;background:linear-gradient(#0c3e7d,#062b5d)!important}
.profile-brand{justify-self:start;font:900 12px/1 system-ui;letter-spacing:.12em;color:#84caff}.profile-picker-card h2{margin:0!important;font:900 22px/1 system-ui!important;letter-spacing:.07em!important;color:#fff!important;text-shadow:0 2px #031a38!important}.profile-picker-close{justify-self:end}
.profile-picker-body{width:min(376px,calc(100% - 28px));margin:0 auto;padding:22px 0 36px;text-align:center}.profile-summary{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;border:2px solid #318bd8;border-radius:20px;background:linear-gradient(145deg,#0b4384,#072b59);box-shadow:inset 0 2px #ffffff18,0 8px 20px #0004}#profileCurrentAvatar{width:104px;height:104px;display:block;object-fit:cover;object-position:50% 22%;border:4px solid #fff;border-radius:50%;background:#0b4b91;box-shadow:0 0 0 4px #2b91ef,0 6px 14px #0008}.profile-data{width:100%;min-width:0;display:grid;justify-items:center;gap:8px}.profile-data label,.profile-picker-body h3{font:900 13px/1 system-ui;letter-spacing:.1em;color:#80c7ff}.profile-data input{width:min(300px,100%);height:44px;box-sizing:border-box;padding:0 12px;border:2px solid #4aa2ed;border-radius:10px;background:#031a38;color:#fff;font:900 17px/1 system-ui;text-align:center;box-shadow:inset 0 2px 5px #0006}.profile-stats-row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;font:900 12px/1 system-ui;color:#d9edff}.profile-stats-row i{font-style:normal}.profile-picker-body h3{margin:24px 0 12px;font-size:15px;text-align:center}
.profile-avatar-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;padding:14px!important;border:2px solid #318bd8!important;border-radius:20px!important;background:linear-gradient(145deg,#0b4384,#072b59)!important;box-shadow:inset 0 2px #ffffff18,0 8px 20px #0004}.profile-avatar-option{width:100%!important;aspect-ratio:1!important;padding:0!important;overflow:hidden!important;border:3px solid #4c91cd!important;border-radius:16px!important;background:#0a478a!important;box-shadow:0 4px 0 #05254d!important;transform:none!important}.profile-avatar-option img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:50% 22%!important}.profile-avatar-option.selected{border-color:#fff!important;outline:4px solid #2b91ef!important;box-shadow:0 0 16px #58b4ff!important}.profile-save{width:min(340px,100%);height:58px;margin:24px auto 0;display:block;border:3px solid #80c7ff;border-radius:15px;background:linear-gradient(#35a1ff,#1267c4);color:#fff;font:900 18px/1 system-ui;letter-spacing:.08em;text-shadow:0 2px #062b5d;box-shadow:inset 0 2px #ffffff55,0 5px #062b5d,0 10px 18px #0005}

/* One blue system for all dynamic and static panels. */
#condWrap,#roomsWrap,#swapWrap,#locPanel,#stockPanel,#audioPanel{background:#021227b8!important}
#condCard,#roomsCard,#swapCard,.loc-card,.stock-card,#audioPanel .ap-card{color:var(--uink)!important;background:var(--ub100)!important;border:3px solid var(--ub900)!important;box-shadow:inset 0 0 0 3px var(--ub500),0 16px 36px #0008!important}
#condCard .banner,#roomsCard .banner,#swapCard .banner,.loc-bar,#audioPanel .ap-bar{margin:0!important;border:0!important;border-bottom:3px solid var(--ub300)!important;border-radius:12px 12px 0 0!important;background:linear-gradient(#2b91ef,#1267c4)!important;box-shadow:inset 0 2px #ffffff42!important}
#condCard .banner h3,#roomsCard .banner h3,#swapCard .banner h3,#swapCard .banner p,.loc-title,#audioPanel .ap-title{color:#fff!important;text-shadow:0 2px var(--ub900)!important}
.profile-picker-close,#condClose,#roomsClose,#swapClose,#locClose,#stockClose{width:42px!important;height:42px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent url("../art/generated/ui/close.png") center/contain no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:none!important;filter:none!important}
#condClose,#roomsClose,#swapClose,#locClose,#stockClose{top:8px!important;right:8px!important}
#condCard .bd,#roomsCard .bd,#swapCard .bd,.loc-body,.stock-list{background:var(--ub100)!important}
#condCard .prog,#condCard .task,#roomsCard .room,#roomsCard .act,#swapCard .swz,#swapCard .till,.loc-preview,.loc-mech,.loc-gate,.loc-meters{color:var(--uink)!important;background:var(--ub050)!important;border-color:#79acd8!important;box-shadow:none!important}
#swapCard .swz>header,#swapCard .swz-give>header,#swapCard .swz-take>header{color:#fff!important;background:var(--ub700)!important;border-color:var(--ub900)!important;box-shadow:none!important}
#swapCard .pick .t{color:var(--uink)!important;background:#c7e4ff!important;box-shadow:0 2px #78a9d3!important}#swapCard .pick .t.on{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;box-shadow:0 2px #062b5d!important}
#swapCard .pick .t i,#swapCard .deal .side i,#stockPanel .res-ic,.req .res-ic{image-rendering:auto!important;background-size:contain!important}#swapCard .deal{background:#d6eaff!important;box-shadow:inset 0 0 0 2px #79acd8!important}#swapCard .deal .side s,#swapCard .rateline,#swapCard .rateline .alt{color:#456b91!important}#swapCard .qty .n{color:var(--uink)!important}
#swapCard .qty button,#swapCard .qty .max,#swapCard .go,#roomsCard .buy,#roomsCard .claim,#locPlay,#locUpgrade,#audioPanel button{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:var(--ub900)!important;text-shadow:0 2px var(--ub900)!important;box-shadow:inset 0 2px #ffffff55,0 4px var(--ub900)!important}#swapCard .go:disabled,#locUpgrade:disabled{background:linear-gradient(#7ca7ce,#567b9e)!important;color:#e9f5ff!important;filter:none!important}
.stock-group h3,.stock-cap{color:var(--uink)!important;background:transparent!important;border-color:#72a8d8!important}.stock-item{background:var(--ub050)!important;border-color:#8ab6dd!important;box-shadow:0 2px #7597b6!important}

/* Runtime class names used by stock and rooms. */
#stockPanel .sg-title{color:var(--uink)!important;border-color:#6da4d3!important}
#stockPanel .stk-tile{background:var(--ub050)!important;border-color:#8ab6dd!important;box-shadow:0 2px #7597b6!important}
#stockPanel .stk-tile:not(.zero){background:#d4eaff!important}
#roomsCard .rcard{background:var(--ub050)!important;border-color:var(--ub900)!important;box-shadow:0 4px #7a9ab7!important}
#roomsCard .rcard .nm{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:var(--ub900)!important;text-shadow:0 2px var(--ub900)!important}
#roomsCard .rcard .pic{border-color:#6fa2d0!important}
#roomsCard .rcard .bar{background:#9fc8ed!important;border-color:var(--ub900)!important}
#roomsCard .rcard .bar i{background:linear-gradient(90deg,#2b91ef,#70c5ff)!important}
#roomsCard .rcard .go{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:var(--ub900)!important;box-shadow:0 4px var(--ub900)!important}
#roomsCard .bal{color:var(--uink)!important;background:#d4eaff!important;border-color:#6da4d3!important}

/* Settings: fixed rows and a compact, consistent action area. */
#audioPanel .card{width:min(400px,calc(100vw - 28px))!important;padding:0 18px 18px!important;border:3px solid var(--ub900)!important;border-radius:22px!important;background:linear-gradient(180deg,var(--ub700) 0 70px,var(--ub100) 70px)!important;box-shadow:inset 0 0 0 3px var(--ub500),0 16px 36px #0008!important}
#audioPanel .ap-title{height:70px!important;margin:0 -18px 10px!important;display:grid!important;place-items:center!important;color:#fff!important;font-size:20px!important}
#audioPanel .ap-row{height:50px!important;margin:0!important;display:grid!important;grid-template-columns:92px minmax(0,1fr) 38px!important;gap:8px!important;align-items:center!important;color:var(--uink)!important}
#audioPanel .ap-label{font-size:12px!important;color:var(--uink)!important}
#audioPanel .ap-val{text-align:right!important;color:var(--uink)!important}
#audioPanel .ap-row input{width:100%!important;margin:0!important}
#audioPanel #apHapticRow{grid-template-columns:92px 1fr!important}
#audioPanel .ap-toggle{justify-self:start!important;width:110px!important;height:38px!important}
#audioPanel .ap-btns{margin-top:8px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
#audioPanel #btnMute{grid-column:1/-1!important;width:190px!important;height:40px!important;justify-self:center!important}
#audioPanel #apReset,#audioPanel #apClose{width:100%!important;height:44px!important;margin:0!important;font-size:11px!important}
@media(max-width:380px){#lobby .base-hud-tr{left:84px!important;gap:4px!important}#lobby .base-hud-tr .coins:first-child{min-width:82px!important}.profile-picker-body{width:calc(100% - 20px)}.profile-summary{padding:14px}#profileCurrentAvatar{width:88px;height:88px}.profile-avatar-grid{gap:9px!important;padding:11px!important}}

/* Dark-blue surface system: profile is the color reference for every screen. */
#condCard,#roomsCard,#swapCard,.loc-card,.stock-card,#audioPanel .card,
#demoEnd .card,.choice-card,.shop-card,.col-card,.lb-card,.collect .collect-body{
  color:#f4faff!important;background:linear-gradient(145deg,#0b4384,#072b59)!important;
  border-color:#318bd8!important;box-shadow:inset 0 2px #ffffff18,0 8px 20px #0005!important
}
#condCard .bd,#roomsCard .bd,#swapCard .bd,.loc-body,.stock-list{
  color:#f4faff!important;background:linear-gradient(180deg,#082754,#031a38)!important
}
#condCard .prog,#condCard .task,#roomsCard .rcard,#roomsCard .act,#roomView .task,
#roomView .box,#swapCard .swz,#swapCard .till,#swapCard .deal,.loc-preview,.loc-mech,
.loc-gate,.loc-meters,#stockPanel .stk-tile,#stockPanel .stk-sum{
  color:#f4faff!important;background:linear-gradient(145deg,#0b4384,#072b59)!important;
  border-color:#318bd8!important;box-shadow:inset 0 2px #ffffff12,0 4px 10px #0004!important
}
#condCard .cap,#condCard .task .nm,#roomsCard .ttl,#roomsCard .task,#roomsCard .why,
.loc-mech,.loc-mech *,#stockPanel .sg-title,#stockPanel .stk-sum,#stockPanel .stk-n,
#swapCard .qty .n,#swapCard .deal{color:#f4faff!important}
#condCard .task .sub,#swapCard .deal .side s,#swapCard .rateline,#swapCard .rateline .alt,
#stockPanel .stk-lab,#roomsCard .why{color:#a9d6ff!important}
#condCard .bar,#roomsCard .bar{background:#031a38!important;border-color:#318bd8!important}
#condCard .cost i,#roomsCard .pay,#roomsCard .gift{color:#f4faff!important;background:#0b356a!important;border-color:#318bd8!important}
#swapCard .pick .t{color:#f4faff!important;background:#0b356a!important;box-shadow:0 2px #031a38!important}
#swapCard .deal{box-shadow:inset 0 0 0 2px #318bd8!important}
#stockPanel .stk-tile:not(.zero){background:linear-gradient(145deg,#1267c4,#084b9b)!important}
#stockPanel .stk-tile.zero{background:linear-gradient(145deg,#0b356a,#082754)!important;opacity:.72}
#stockPanel .stk-sum{background:#0b356a!important}
#roomsCard .bal{color:#fff!important;background:#0b356a!important;border-color:#318bd8!important}
#roomsCard .rcard .pic{background:#031a38!important;border-color:#318bd8!important}
#roomView .stage{background:#031a38!important}
#roomView .act{background:linear-gradient(180deg,#082754,#031a38)!important}
.loc-art{background:linear-gradient(180deg,#0b4384,#072b59)!important;border-color:#318bd8!important}
.loc-give,.loc-reward,.loc-req,.loc-row,.loc-stat{color:#f4faff!important}
#audioPanel .card{background:linear-gradient(180deg,#1267c4 0 70px,#082754 70px,#031a38 100%)!important}
#audioPanel .ap-label,#audioPanel .ap-val{color:#f4faff!important}
#audioPanel input[type="range"]{background:#031a38!important;border-color:#318bd8!important}
#collections,#shop,#leaderboard,#demoEnd{background:#031a38ee!important}
#collections .collect-title,#shop .shop-title,#leaderboard .lb-title{color:#fff!important;text-shadow:0 2px #031a38!important}
.col-card,.shop-card{background:linear-gradient(145deg,#0b4384,#072b59)!important;border-color:#318bd8!important}
.col-card .col-name,.shop-card .sc-name{color:#fff!important}.col-card .col-sub,.shop-card .sc-sub{color:#a9d6ff!important}
#collections .col-card{background:linear-gradient(145deg,#0b4384,#072b59)!important;border:3px solid #318bd8!important;box-shadow:inset 0 2px #ffffff18,0 6px #031a38!important}
#collections .col-card .col-name{color:#fff!important}#collections .col-card .col-sub{color:#a9d6ff!important}
#leaderboard .lb-row{color:#f4faff!important;background:#0b356a!important;border-color:#318bd8!important}
#leaderboard .lb-chip{color:#a9d6ff!important;background:#0b356a!important;border:2px solid #318bd8!important;box-shadow:0 4px #031a38!important}
#leaderboard .lb-chip.active{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:#80c7ff!important;box-shadow:0 4px #062b5d!important}
#leaderboard .lb-row{border:2px solid #318bd8!important;box-shadow:0 3px #031a38!important}
#leaderboard .lb-rank,#leaderboard .lb-score{color:#80c7ff!important}
#demoEnd .de-sub,.choice-card{color:#d9edff!important}
#btAsk{background:#021227d9!important}#btAskPanel{color:#f4faff!important;background:linear-gradient(145deg,#0b4384,#072b59)!important;border-color:#318bd8!important}#btAskPanel input{color:#fff!important;background:#031a38!important;border-color:#318bd8!important}

/* Specific legacy selectors that otherwise outrank the shared tokens. */
.loc-body>.lb-title{color:#fff!important;border-color:#318bd8!important}
.loc-art{border:3px solid #318bd8!important}
.loc-body .res-chip{color:#f4faff!important;background:#0b356a!important;border-color:#318bd8!important}
.loc-body .res-chip.coin{color:#fff!important;background:linear-gradient(#1267c4,#084b9b)!important}
#condCard .task .ico{background:#0b356a!important;border-color:#318bd8!important}
#roomsCard .rcard .bar{background:#031a38!important;border-color:#318bd8!important}

/* Shop, collections and leaderboard use the same chrome and close control. */
#shop .col-topbar,#collections .col-topbar,#leaderboard .col-topbar{
  background:linear-gradient(#0c3e7d,#062b5d)!important;border-bottom:3px solid #2b91ef!important;box-shadow:none!important
}
#shop .col-title,#collections .col-title,#leaderboard .col-title{color:#fff!important;text-shadow:0 2px #031a38!important}
#shop .collect-close,#collections .collect-close,#leaderboard .collect-close,
#vhsPlayer .collect-close,#boombox .collect-close{
  width:42px!important;height:42px!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent url("../art/generated/ui/close.png") center/contain no-repeat!important;
  color:transparent!important;font-size:0!important;box-shadow:none!important
}
#shop .lb-tabs,#collections .lb-tabs,#leaderboard .lb-tabs{background:#031a38!important}
#shop .lb-tab,#collections .lb-tab,#leaderboard .lb-tab{color:#a9d6ff!important;background:#0b356a!important;border-color:#318bd8!important}
#shop .lb-tab.active,#collections .lb-tab.active,#leaderboard .lb-tab.active{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;box-shadow:inset 0 2px #ffffff55,0 4px #062b5d!important}
#shop .shop-balance{color:#fff!important}
#shop .shop-card{background:linear-gradient(145deg,#0b4384,#072b59)!important;border:2px solid #318bd8!important}
#shop .bn-title{color:#80c7ff!important}
#shop .bn-row{color:#f4faff!important;background:#082754!important;border:2px solid #318bd8!important;box-shadow:0 3px #031a38!important}
#shop .bn-row .bn-lbl{color:#a9d6ff!important}
#shop .bn-row .bn-num{color:#fff!important}
#shop .sc-buy{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:#80c7ff!important;box-shadow:0 5px #062b5d!important}
#shop .sc-tag{color:#fff!important;background:linear-gradient(#ff7658,#e83b20)!important}

/* Media / trophy viewers keep their content art, but all surrounding UX is blue. */
.collect .collect-topbar{background:linear-gradient(#0c3e7d,#062b5d)!important;border-bottom:3px solid #2b91ef!important;box-shadow:none!important}
.collect .collect-title,.collect .shelf-label{color:#fff!important;text-shadow:0 2px #031a38!important}
.collect .collect-actions .px-btn{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:#80c7ff!important;box-shadow:0 4px #062b5d!important}
.collect .collect-body{background:linear-gradient(180deg,#082754,#031a38)!important}
.collect .cassette,.collect .track-row,.collect .gallery-item{border-color:#318bd8!important;box-shadow:0 3px #031a38!important}

/* Global entry/actions and assistant dialog. */
.cz-play-face,.px-btn.cyan,.px-btn.green{
  color:#fff!important;background:linear-gradient(#35a1ff,#1267c4)!important;
  border-color:#80c7ff!important;text-shadow:0 2px #062b5d!important;
  box-shadow:inset 0 3px #ffffff55,0 6px #062b5d,0 12px 20px #0005!important
}
.zoras-box{color:#f4faff!important;background:linear-gradient(145deg,#0b4384,#072b59)!important;border-color:#318bd8!important;box-shadow:inset 0 2px #ffffff18,0 8px 20px #0006!important}
.zoras-box .who{color:#80c7ff!important}.zoras-box #zorasText,.zoras-box #puzZorasText,.zoras-box #crtZorasText{color:#f4faff!important}
.zoras-box .dlg-next{color:#fff!important;background:linear-gradient(#2b91ef,#1267c4)!important;border-color:#80c7ff!important}
#toast{color:#fff!important;background:#062b5d!important;border-color:#318bd8!important}


/* =====================================================================
   ДОВЕДЕННЯ ДО КІНЦЯ

   Усе нижче — місця, де темно-синя система не спрацювала, бо їх тримали
   правила з casual.css із !important і більшою вагою селектора. Кожне
   перевірене знімком екрана, а не на око.
===================================================================== */

/* ---- ВЕРХНЯ СМУГА ГРИ ----
   Найпомітніша дірка: полотно гри вже синє (games/reforge/js/render.js,
   PAL), а смуга над ним лишалась кремовою з дерев'яним кантом. Виходило,
   що гра синя, а рамка навколо неї — зі старого скіна. */
#puzzle .puz-head,.puz-head{
  background:linear-gradient(180deg,#0c3e7d,#062b5d)!important;
  border-bottom:3px solid #2b91ef!important;
  box-shadow:0 4px 10px #0006!important
}
.puz-title,#puzTitle .pt-loc{color:#fff!important;text-shadow:0 2px #031a38!important}
#puzTitle .pt-score{color:#7ee06a!important;text-shadow:none!important}   /* приріст — семантика, лишається зеленим */
#puzTitle .pt-combo{
  color:#fff!important;background:linear-gradient(180deg,#2b91ef,#1267c4)!important;
  border-color:#80c7ff!important;text-shadow:0 1px #062b5d!important
}

/* ---- ДРУГОРЯДНА КНОПКА ----
   «‹ БАЗА», «♪ СТРІЧКА», «ПІДКАЗКА», «ЗАКРИТИ» — усе це .px-btn.ghost,
   тобто «паперова кнопка з дерев'яним кантом». Тепер синя.
   :not(.ap-reset) — щоб не з'їсти червону «СКИНУТИ ПРОГРЕС»: руйнівна
   дія мусить лишатись червоною, це семантика, а не тема. */
.px-btn.ghost:not(.ap-reset){
  color:#fff!important;text-shadow:0 2px #062b5d!important;
  background:linear-gradient(180deg,#2b91ef,#1267c4)!important;
  box-shadow:inset 0 2px #ffffff4d,0 4px #062b5d,0 8px 14px #0005!important
}
.px-btn.ghost:not(.ap-reset):active{
  box-shadow:inset 0 2px #ffffff4d,0 1px #062b5d,0 3px 7px #0005!important
}

/* ---- СКЛАД: РЯДОК-ПІДСУМОК ----
   Числа були кольору --cz-ink (темно-коричневий) на темно-синьому — на
   знімку вони просто зникали. */
#stockPanel .stk-sum{color:#a9d6ff!important;background:#0b356a!important;box-shadow:inset 0 2px #ffffff12!important}
#stockPanel .stk-sum b{color:#fff!important}
#stockPanel .stk-n{color:#fff!important}
#stockPanel .stk-tile.zero .stk-n{color:#7ea9d6!important}

/* ---- ПАНЕЛЬ ЛОКАЦІЇ: ЗАЛИШКИ ДЕРЕВА ----
   Внутрішня рамка прев'ю і роздільник над кнопками малювались
   коричневим rgba(192,122,52) — єдині два теплі штрихи на синій картці,
   і саме тому найпомітніші. */
.loc-art{
  background:radial-gradient(120% 90% at 50% 108%,rgba(43,145,239,.35),rgba(43,145,239,0) 62%),
             linear-gradient(180deg,#0b4384 0%,#072b59 100%)!important;
  box-shadow:inset 0 0 0 3px #318bd8,inset 0 4px 10px #0004!important
}
.loc-acts{border-top:3px solid #318bd8!important}

/* ---- ВКЛАДКИ ДОШКИ ПОШАНИ ----
   Неактивна вкладка лишалась кремовою з коричневою підкладкою; активна
   була зеленою. Тепер обидві в системі, а зелений звільнився під те, що
   він і має означати. */
.lb-tab,.lb-chip{
  color:#a9d6ff!important;background:linear-gradient(180deg,#0e4b90,#0b356a)!important;
  box-shadow:inset 0 2px #ffffff1a,0 3px #031a38!important
}
.lb-tab.active,.lb-chip.active{
  color:#fff!important;background:linear-gradient(180deg,#2b91ef,#1267c4)!important;
  box-shadow:inset 0 2px #ffffff55,0 3px #062b5d!important;text-shadow:0 1px #062b5d!important
}

/* ---- ПОЛЕ ГРИ: ЩО НАВКОЛО ПОЛОТНА ----
   Полотно гри — 720x1280 і майже ніколи не збігається з екраном; смуги
   по краях показують те, що під ним. casual.css фарбував #puzzle у
   світло-блакитний, але на екрані лишалась чорна смуга під смугою
   «‹ БАЗА» — її давав сам iframe. Фарбуємо обидва в той самий колір, що
   й фон бази, тому шва більше не видно взагалі. */
#puzzle{background:#031a38!important}
#puzFrame{background:#031a38!important;border:0!important}


/* =====================================================================
   ДВА ВИНЯТКИ З СИНЬОЇ СИСТЕМИ

   Обидва — не «забули пофарбувати», а свідомі відступи. Система задає
   тло й хром; ці дві речі мусять із нього ВИСТУПАТИ.
===================================================================== */

/* ---- «ГРАТИ» В ЛОББІ — ЗЕЛЕНА ----
   Єдина кнопка в грі, яка веде з бази у власне гру. Поки вона була
   синьою, вона нічим не відрізнялась від «ПОКРАЩИТИ» поруч і від решти
   хрому — тобто головна дія екрана виглядала як звичайний пункт.
   Зелений тут не тема, а вказівник: іди сюди.
   Береться з наявних токенів казуального скіна, а не з нового відтінку,
   щоб зелений у грі лишався ОДИН. */
#locPlay,#locPlay.px-btn,#locPlay.px-btn.cyan{
  color:#fff!important;text-shadow:0 2px #2c7410!important;
  background:linear-gradient(180deg,#7fd93a,#46ab16)!important;
  border-color:#a9ef5c!important;
  box-shadow:inset 0 3px #ffffff66,0 6px #2c7410,0 12px 20px #0005!important
}
#locPlay:active{box-shadow:inset 0 3px #ffffff66,0 2px #2c7410,0 5px 10px #0005!important}
#locPlay:disabled{filter:saturate(.35) brightness(.8)!important}

/* ---- ГОЛОВНЕ МЕНЮ — КОМПАКТНА PLAY-КНОПКА З E:\pp ---- */
#menu .cz-play{
  top:18%!important;
  width:clamp(112px,31vw,138px)!important;
  aspect-ratio:218/221!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:transparent url("../art/ui/pp-play.png?v=20260830-menu-play1") center/contain no-repeat!important;
  filter:drop-shadow(0 9px 14px rgba(15,55,4,.48))!important;
}
#menu .cz-play .cz-play-face{display:none!important}

/* Lobby HUD: 150% icon scale, icon-only left rail, intermittent E:\pp-style idle motion. */

/* ---- ПРОФІЛЬ УДВІЧІ МЕНШИЙ, ЛІЧИЛЬНИКИ НА ВИВІЛЬНЕНУ ШИРИНУ ----

   Аватар був 101 px — чверть ширини екрана під картинку, яку гравець
   дивиться раз. Лічильники за нього тулились у залишок і мусили жити з
   обрізанням цифр. Аватар удвічі менший (50 px), а все, що звільнилось,
   пішло лічильникам: тепер вони починаються від 66 px, а не від 116.

   Ширина лічильника — за вмістом плюс частка вільного місця. Частку
   ділимо за МАКСИМАЛЬНОЮ довжиною числа: монети 5 знаків, енергія 3,
   зірки 3 — тому 5:3:3. Так лічильник, у якому може стояти 99999,
   отримує більше запасу, ніж той, де більш ніж «100» не буває, а поки
   чисел мало — усі троє однаково розтягнуті на всю смугу. Жодного
   обрізання: число завжди має свою ширину, решта — розтяг. */
#lobby .base-hud-tl{left:10px!important;top:10px!important;width:50px!important;max-width:50px!important}
#lobby .base-hud-tl .profile-hud{width:50px!important;height:50px!important;max-width:50px!important}
#lobby .profile-avatar-img{width:46px!important;height:46px!important;border-width:2px!important;box-shadow:0 0 0 2px var(--sys-blue),0 3px 6px rgba(0,0,0,.58)!important}
#lobby .base-hud-tl .ph-lvl{right:-4px!important;bottom:-4px!important;min-width:30px!important;padding:2px 5px!important;font-size:8px!important;border-width:2px!important}
#lobby .base-hud-tr{left:66px!important;right:72px!important;top:14px!important;gap:5px!important}
#lobby .base-hud-tr .coins{
  flex:0 1 auto!important;width:auto!important;min-width:0!important;
  height:50px!important;padding:4px 5px 4px 10px!important;border-radius:25px!important;
  justify-content:space-between!important;
}
#lobby .base-hud-tr .coins:first-child{flex-grow:5!important}
#lobby .base-hud-tr .coins.energy{flex-grow:3!important}
#lobby .base-hud-tr .coins.stars{flex-grow:3!important}
#lobby .base-hud-tr .coins b{
  font-size:13px!important;max-width:none!important;overflow:visible!important;
  text-align:left!important;white-space:nowrap!important;
}
#lobby .base-hud-tr .coins .coin-ic{width:38px!important;height:38px!important;flex:0 0 38px!important}
#lobby #btnSettings{right:7px!important;top:20px!important;width:60px!important;height:60px!important}
#lobby .base-rail{left:10px!important;top:52%!important;gap:7px!important}
#lobby .rail-chip{min-width:97px!important}
/* 97, а не 87: полотно іконки виросло на товщину канта (x1.113), тож
   без цієї поправки сам малюнок став би дрібнішим за попередній. */
#lobby .rail-chip .rc-ico{width:97px!important;height:97px!important}
#lobby .rail-chip .rc-lab{display:none!important}

.lobby-idle-bounce{animation:lobbyIdleBounce 1.2s cubic-bezier(.28,.84,.42,1)!important;transform-origin:50% 92%}
.lobby-idle-shake{animation:lobbyIdleShake 1.3s ease!important;transform-origin:50% 82%}
.lobby-idle-glow{animation:lobbyIdleGlow 1.4s ease!important}
@keyframes lobbyIdleBounce{0%{transform:translateY(0) scale(1)}14%{transform:translateY(0) scale(1.06,.94)}38%{transform:translateY(-5%) scale(.97,1.03)}58%{transform:translateY(0) scale(1.05,.95)}74%{transform:translateY(-2%) scale(.99,1.01)}100%{transform:translateY(0) scale(1)}}
@keyframes lobbyIdleShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg)}25%{transform:rotate(8deg)}40%{transform:rotate(-7deg)}55%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}85%{transform:rotate(2deg)}}
@keyframes lobbyIdleGlow{0%,100%{filter:brightness(1) drop-shadow(0 3px 4px #0008)}45%{filter:brightness(1.3) drop-shadow(0 0 12px #fff9)}75%{filter:brightness(1.08) drop-shadow(0 3px 4px #0008)}}
@media (prefers-reduced-motion:reduce){.lobby-idle-bounce,.lobby-idle-shake,.lobby-idle-glow{animation:none!important}}

/* ---- КНОПКА СКИДАННЯ НА ТИТУЛЬНОМУ ЕКРАНІ ----
   Правий нижній кут: там вивіска й трава, тобто найтихіше місце кадру,
   і воно не сперечається з «ГРАТИ» в небі. Червона, бо дія руйнівна —
   той самий виняток із синьої системи, що й «СКИНУТИ ПРОГРЕС». */
#menu .menu-reset{
  position:absolute!important;right:10px!important;bottom:12px!important;z-index:3!important;
  min-height:0!important;padding:7px 13px!important;border-radius:999px!important;
  color:#fff!important;font:800 11px/1 system-ui!important;letter-spacing:.05em!important;
  background:linear-gradient(180deg,#ff7658,#e83b20)!important;border-color:#ffb199!important;
  text-shadow:0 1px #7a1c0c!important;box-shadow:inset 0 2px #ffffff44,0 4px #7a1c0c!important
}
#menu .menu-reset.armed{
  background:linear-gradient(180deg,#ffd35c,#e8a020)!important;color:#2a1400!important;
  text-shadow:none!important;box-shadow:inset 0 2px #ffffff88,0 4px #8a5a00!important
}

/* ---- ХМАРКА ДІАЛОГУ — БІЛА ----
   Синя хмарка на синьому екрані читалась як ще одна панель інтерфейсу,
   і репліка тонула серед лічильників та чипів. Біла — єдина світла
   пляма на екрані: погляд іде до неї сам, а Булочка нарешті звучить як
   персонаж, а не як системне повідомлення.

   Хвостик фарбуємо окремо: він намальований як квадрат, повернутий на
   45°, з ДВОМА кільцями через box-shadow (див. css/base.css). Забудеш
   його — і біла хмарка висітиме над темним шипом. */
#lobby .zoras-box, #btPandaHost .zoras-box, #puzzle .puz-zoras .zoras-box, .zoras-box{
  color:#0b2340!important;
  background:linear-gradient(180deg,#ffffff,#eaf3ff)!important;
  border-color:#ffffff!important;
  box-shadow:inset 0 2px #fff,0 6px 0 #0b356a,0 12px 22px #0007!important
}
/* ---- ХВОСТИК — ЧАСТИНА ХМАРКИ, А НЕ ОКРЕМА СТРІЛКА ----

   Було: квадрат, повернутий на 45°, з власним кільцем через box-shadow.
   Кільце обводило його З УСІХ БОКІВ, а темна «губа» хмарки (0 6px 0)
   йшла рівною лінією поперек — і під білою хмаркою висів окремий
   трикутник із власним контуром. Гравець бачив два предмети там, де
   мусив бачити один.

   Стало: SVG, у якому ЗАЛИВКА замкнена (трикутник), а ОБВОДКА —
   розімкнена ламана лише по двох косих боках. Верхньої лінії немає в
   принципі. Хвостик стоїть рівно на нижньому краї хмарки (top:100%),
   тому його біла заливка перекриває темну губу саме в тому місці, де
   він росте: біле тіло перетікає в хвостик без шва, а темний кант губи
   переходить у темний кант хвостика. Виступ обводки вище нуля зрізає
   viewBox — SVG за замовчуванням обрізає все за межами кадру. */
#lobby .zoras-box::before, #btPandaHost .zoras-box::before, #puzzle .puz-zoras .zoras-box::before{
  left:26px!important;top:100%!important;bottom:auto!important;
  width:32px!important;height:30px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M0 0 16 29 32 0Z' fill='%23eaf3ff'/%3E%3Cpath d='M0 0 16 29 32 0' fill='none' stroke='%230b356a' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  transform:none!important;
  clip-path:none!important;
  border:0!important;border-radius:0!important;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.34));
  pointer-events:none;
}
.zoras-box .who{color:#1267c4!important;text-shadow:none!important}
.zoras-box #zorasText,.zoras-box #puzZorasText,.zoras-box #crtZorasText,
#zorasText,#puzZorasText{color:#0b2340!important}
/* Кнопка «ДАЛІ» лишається синьою: вона — керування, а не мова. */
.zoras-box .dlg-next{
  color:#fff!important;background:linear-gradient(180deg,#2b91ef,#1267c4)!important;
  border-color:#80c7ff!important;text-shadow:0 1px #062b5d!important
}


/* =====================================================================
   СМУГА НАД ГРОЮ

   Вихід — іконка без підпису, назва точки — з її рівнем. Слово «БАЗА»
   на кнопці й окрема кнопка «НА КАРТУ БАЗИ» на екрані результату
   робили одне й те саме, тому лишився один вихід, і він тепер займає
   стільки місця, скільки заслуговує другорядна дія.
===================================================================== */
#puzzle .puz-head .puz-exit{
  flex:0 0 auto!important;width:28px!important;min-width:28px!important;
  height:28px!important;min-height:28px!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:50%!important;font:900 13px/1 system-ui!important;letter-spacing:0!important;
  color:#fff!important;background:linear-gradient(180deg,#2b91ef,#1267c4)!important;
  border:2px solid #80c7ff!important;text-shadow:0 1px #062b5d!important;
  box-shadow:inset 0 1px #ffffff55,0 2px #062b5d!important
}
#puzzle .puz-head{height:36px!important;gap:6px!important;padding:4px 10px!important}
#puzzle #puzFrame{top:36px!important;height:calc(100% - 36px)!important}
/* Назва точки тримає весь вільний простір, тому «ШТАБ · РІВ. 3»
   лишається по центру смуги, а не тулиться до кнопки. */
#puzzle .puz-title{flex:1 1 auto!important;display:flex!important;
  align-items:center!important;justify-content:center!important;gap:7px!important;
  font-size:13px!important;letter-spacing:.08em!important}
#puzTitle .pt-loc{color:#fff!important;text-shadow:0 2px #031a38!important}
#puzTitle .pt-lvl{
  color:#0b2340!important;background:linear-gradient(180deg,#a9d6ff,#6fb4f0)!important;
  border-radius:999px!important;padding:3px 10px!important;
  font:900 12px/1 system-ui!important;letter-spacing:.06em!important;text-shadow:none!important
}


/* =====================================================================
   ЛОББІ: ВЕРХНІЙ РЯД І БІЧНА РЕЙКА — ДОВЕДЕННЯ

   Тримається останнім у файлі: усе вище теж написано з !important, і
   переписати його можна лише звідси.
===================================================================== */

/* ---- ШИРИНА ЛІЧИЛЬНИКА ЙДЕ ЗА ЧИСЛОМ ----

   Було: flex-grow 5/3/3 — фіксована пропорція. Пілюля монет виходила
   однаковою і при «150», і при «99999», а justify-content:space-between
   розганяв число й іконку в різні кінці, лишаючи посередині дірку. На
   зірках із «0» ця дірка займала пів пілюлі й читалась як зламаний
   віджет.

   Стало: базова ширина — САМ ВМІСТ (flex-basis:auto), тобто число з
   іконкою; залишок смуги ділиться порівну. Довше число — ширша пілюля,
   рівно як просив власник. Вміст центрується, тож дірки немає ніде:
   ні при «0», ні при «99999». Обрізання немає взагалі — 5 знаків монет,
   3 енергії й 3 зірок влазять з запасом. */
/* ---- ПІЛЮЛЯ НИЖЧА, А ЧИСЛО В НІЙ БІЛЬШЕ ----

   Було: 50 px висоти, іконка 36, число 14. Тобто цифра займала 28%
   висоти власної пілюлі, а решту з'їдали поля — лічильник виглядав
   великим, і саме те, заради чого він існує (число), було в ньому
   найдрібнішим. Читалось як порожня капсула з підписом дрібним шрифтом.

   Стало: пілюля на чверть нижча (38), іконка на чверть менша (27), а
   число виросло до 17 — тепер це 45% висоти, і воно головне.
   Горизонтальний розмір лишається за смугою: ряд затиснутий між
   аватаром (закінчується на 60) і шестернею (починається на 380), і
   звужувати пілюлі означало б лишити між ними дірки.

   ВИСОТА СМУГИ — 50, а не «скільки вийде». Аватар і шестерня заввишки
   50 і стоять з y=10; якби ряд обіймав самі пілюлі, ті сіли б на 38 і
   поїхали на 6 px вище за спільний центр. Явна висота плюс
   align-items:center лишає всі три блоки на одній осі. */
#lobby .base-hud-tr{left:66px!important;right:70px!important;top:10px!important;
  height:50px!important;align-items:center!important;gap:5px!important}
#lobby .base-hud-tr .coins{
  flex:1 1 auto!important;width:auto!important;min-width:0!important;
  height:38px!important;padding:0 7px!important;border-radius:19px!important;
  justify-content:center!important;gap:4px!important;
}
#lobby .base-hud-tr .coins:first-child,
#lobby .base-hud-tr .coins.energy,
#lobby .base-hud-tr .coins.stars{flex-grow:1!important}
#lobby .base-hud-tr .coins b{
  font-size:17px!important;max-width:none!important;overflow:visible!important;
  white-space:nowrap!important;flex:0 0 auto!important;
}
#lobby .base-hud-tr .coins .coin-ic{width:27px!important;height:27px!important;flex:0 0 27px!important}
/* Енергія й зірки мають ВЛАСНІ правила в css/generated-skin.css (там
   енергія зафіксована на 10 px і обидві обрізані по max-width:30). Ті
   селектори несуть зайвий клас, тобто специфічніші за загальний
   `.coins b` вище, і без цього рядка «100» лишалось би вдвічі дрібнішим
   за сусідні монети — рівно та строкатість, від якої ми й пішли. */
#lobby .base-hud-tr .coins.energy b,
#lobby .base-hud-tr .coins.stars b{
  font-size:17px!important;max-width:none!important;overflow:visible!important;
}

/* ---- ОДНА ЛІНІЯ ДЛЯ ВСЬОГО РЯДУ ----
   Аватар, три пілюлі й шестерня стояли на трьох різних верхніх краях і
   мали три різні висоти — ряд «плив». Тепер усі три блоки заввишки 50 і
   починаються з y=10, тобто мають спільний центр. Шестерня зрівняна з
   аватаром: налаштування не можуть важити більше за самого гравця. */
#lobby .base-hud-tl{top:10px!important}
#lobby #btnSettings{right:10px!important;top:10px!important;width:50px!important;height:50px!important;
  font-size:22px!important}
#lobby .base-hud-tl .ph-lvl{right:-3px!important;bottom:-3px!important;min-width:30px!important;
  padding:2px 5px!important;font-size:8px!important}

/* ---- РЕЙКА НЕ ЗАХОДИТЬ ПІД ПАНДУ ----
   П'ять чипів по 97 px — це 513 px колонки. При top:52% нижній чип
   («МАГАЗИН») опинявся рівно там, куди виходить Сержант Булочка: перші
   хвилини гри новий гравець бачив мішок, наполовину закритий пандою.
   45% піднімає колонку так, що її низ закінчується вище за док. */
#lobby .base-rail{top:45%!important}

/* ---- ПІДКАЗКА КАРТИ — У ПРАВИЙ КУТ ----
   По центру внизу її лівий край ховався за пандою, і гравець читав
   «…и по локації · тягни, щоб рухати карту». Праворуч унизу вільно
   завжди: панда виходить тільки зліва. */
#lobby .base-hint{
  left:auto!important;right:10px!important;transform:none!important;
  max-width:calc(100% - 156px)!important;
}


/* =====================================================================
   ПОПАП ЛОКАЦІЇ — БЕЗ ПОПАПА В ПОПАПІ

   Було: панель у рамці, всередині неї — рамка навколо картинки будівлі
   НА ВСЮ ШИРИНУ, під нею рамка навколо схеми поля, під нею рамка
   навколо «зруйновано». Чотири вкладені рамки, і в найширшій з них —
   дрібна будівля посеред порожнечі. Читалось як попап усередині попапа.

   Стало: одна зовнішня рамка (сама картка) і жодної внутрішньої.
   Картинка будівлі — КВАДРАТНА ІКОНКА ЗЛІВА, праворуч від неї сітка
   того, що точка дає. Нижче — характеристики поля міні-гри й кнопки.
   Ширина панелі пішла на зміст, а не на поля.

   Нутрощі картки ТЕМНО-СИНІ (#082754 -> #031a38), тому все тут —
   світле по темному. Плитки не білі, а прозоро-блакитні: біла плашка на
   темному тлі знову зробила б «карточку в карточці».
===================================================================== */
/* ---- ОДНА РАМКА, А НЕ ДВІ ----

   Картка мала внутрішній відступ 18 px, а шапка й тіло всередині —
   власне тло й власні заокруглені кути. Виходила ДРУГА картка всередині
   першої: зайвий кант по колу, а зміст на 36 px вужчий, ніж місце, яке
   попап уже займає. Прибираємо відступ — шапка, тіло й кнопки виходять
   на край самої картки, і ці 36 px ідуть у плитки й кнопки.

   Кути шапки підганяємо під зовнішній радіус мінус кант (28 - 3), бо
   тепер вона і є верх картки. */
#locPanel .loc-card{padding:0!important;overflow:hidden!important}
#locPanel .loc-bar{
  border-radius:25px 25px 0 0!important;
  padding:12px 16px 10px!important;
}
#locPanel .loc-body{padding:14px 16px 10px!important}
#locPanel .loc-acts{padding:12px 16px 14px!important}

#locPanel .loc-head{
  display:flex!important;gap:12px!important;align-items:stretch!important;
  margin:0 0 12px!important;
}
#locPanel .loc-head .loc-art{
  flex:0 0 128px!important;width:128px!important;height:128px!important;
  margin:0!important;padding:0!important;position:relative!important;
  border:0!important;border-radius:16px!important;
  background:linear-gradient(180deg,#0e4f96,#06305f)!important;
  box-shadow:inset 0 0 0 2px rgba(169,214,255,.30)!important;
  overflow:hidden!important;
}
#locPanel .loc-head .loc-art-im{
  position:absolute!important;inset:6px!important;
  background-size:contain!important;background-position:center!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))!important;
}
#locPanel .loc-head .lv-pips{position:absolute!important;left:7px!important;top:7px!important;z-index:2}
#locPanel .loc-head-r{flex:1 1 auto!important;min-width:0!important;display:flex!important;
  flex-direction:column!important;gap:7px!important;justify-content:center!important}

/* «ДАЄ» — сітка, а не рядок, що переноситься: у сітці око бачить
   КІЛЬКІСТЬ видів одним поглядом.

   ЧОМУ КІЛЬКІСТЬ СТОВПЦІВ ЗМІННА. Три було зашито намертво — і на
   першому рівні, де точка дає один ресурс, у шапці стояли дві дрібні
   плитки з іконкою на 34 px і порожня третина поруч. Місце в
   найпомітнішій частині картки лежало без діла, а те, заради чого сюди
   заходять, було найдрібнішим на екрані.

   Тепер сітка бере рівно стільки стовпців, скільки треба, і плитка
   росте до вільного місця. Розмір іконки падає лише тоді, коли видів
   справді стало більше, — тобто коли є що ущільнювати. data-n ставить
   js/baseui.js (sizeRow). */
#locPanel .loc-head-r .res-row{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;margin:0!important;
}
#locPanel .loc-head-r .res-row[data-n="1"]{grid-template-columns:1fr!important}
#locPanel .loc-head-r .res-row[data-n="2"]{grid-template-columns:repeat(2,1fr)!important}
#locPanel .loc-head-r .res-row[data-n="3"]{grid-template-columns:repeat(3,1fr)!important}
#locPanel .loc-head-r .res-row[data-n="4"]{grid-template-columns:repeat(2,1fr)!important}

#locPanel .res-chip{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:58px!important;padding:4px!important;
  border:0!important;border-radius:14px!important;
  background:rgba(169,214,255,.12)!important;
  box-shadow:inset 0 0 0 2px rgba(169,214,255,.26)!important;
}
/* background-size у базовому .res-ic зашитий у 24px, тобто картинка
   лишалась 24-піксельною в скільки завгодно великій плитці. contain
   прив'язує її до самої плитки — тепер розмір іконки задає сітка. */
#locPanel .res-chip .res-ic{
  width:44px!important;height:44px!important;
  background-size:contain!important;background-repeat:no-repeat!important;
  background-position:center!important;
}
/* Одна-дві плитки в ряду — місця вдосталь, іконка йде на всю висоту. */
#locPanel .res-row[data-n="1"] .res-chip,
#locPanel .res-row[data-n="2"] .res-chip{min-height:58px!important}
#locPanel .res-row[data-n="1"] .res-chip .res-ic,
#locPanel .res-row[data-n="2"] .res-chip .res-ic{width:46px!important;height:46px!important}
/* Три й більше — ущільнюємо, але не дрібніше за попередній розмір. */
#locPanel .res-row[data-n="3"] .res-chip,
#locPanel .res-row[data-n="4"] .res-chip{min-height:52px!important}
#locPanel .res-row[data-n="3"] .res-chip .res-ic,
#locPanel .res-row[data-n="4"] .res-chip .res-ic{width:38px!important;height:38px!important}
#locPanel .res-row[data-n="5"] .res-chip,
#locPanel .res-row[data-n="6"] .res-chip{min-height:46px!important}
#locPanel .res-row[data-n="5"] .res-chip .res-ic,
#locPanel .res-row[data-n="6"] .res-chip .res-ic{width:32px!important;height:32px!important}

#locPanel .res-chip.coin{
  background:linear-gradient(180deg,#ffd97a,#f0a72c)!important;
  box-shadow:inset 0 0 0 2px #fff0c2!important;
}
#locPanel .res-chip.coin b{color:#41240a!important;font:900 17px/1 system-ui!important}
#locPanel .res-row[data-n="5"] .res-chip.coin b,
#locPanel .res-row[data-n="6"] .res-chip.coin b{font-size:14px!important}
#locPanel .res-chip.new{box-shadow:inset 0 0 0 2px #f0a72c!important;background:rgba(240,167,44,.16)!important}

#locPanel .lb-title{
  margin:0!important;padding:0!important;border:0!important;
  color:#8fc9ff!important;font:900 10px/1 system-ui!important;letter-spacing:.14em!important;
}
#locPanel .lb-title.ok{color:#9ff08a!important}
#locPanel .lb-title.miss{color:#ff9f86!important}
#locPanel .loc-body > .lb-title{margin:12px 0 6px!important}

#locPanel .loc-gate{
  margin:0!important;padding:6px 10px!important;border:0!important;border-radius:10px!important;
  background:rgba(224,58,28,.22)!important;color:#ffb7a3!important;
  font:900 9px/1.3 system-ui!important;letter-spacing:.06em!important;
}
#locPanel .loc-gate.max{background:rgba(126,224,106,.18)!important;color:#a8f096!important}

/* Схема поля: без власної коробки — просто блок на всю ширину картки. */
#locPanel .loc-mech,
#locPanel .loc-mech-wrap .loc-mech{
  margin:0!important;padding:9px 11px!important;
  border:0!important;border-radius:14px!important;
  background:rgba(169,214,255,.10)!important;
  box-shadow:none!important;
  display:flex!important;gap:11px!important;align-items:center!important;
}
#locPanel .loc-mech-wrap{margin:0!important}
#locPanel .lm-quirk{
  margin:7px 0 0!important;padding:7px 11px!important;border:0!important;border-radius:11px!important;
  background:rgba(169,214,255,.10)!important;color:#cfe7ff!important;
  font:800 9px/1.4 system-ui!important;
}
#locPanel .lm-k{color:#a9d6ff!important;opacity:.9!important}
#locPanel .lm-v{color:#ffd97a!important}
#locPanel .lm-bar .lm-p{background:#123a68!important;border-color:#0a2647!important}
#locPanel .lm-bar .lm-p.on{background:#ffd97a!important}

/* Ціна апгрейду: сітка на два стовпці, кожна комірка — окрема плитка. */
#locPanel .req-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
#locPanel .req{
  border:0!important;border-radius:12px!important;padding:10px 12px!important;
  background:rgba(169,214,255,.12)!important;
  box-shadow:inset 0 0 0 2px rgba(169,214,255,.26)!important;
  color:#eaf3ff!important;
}
#locPanel .req.wide{grid-column:1 / -1!important}
#locPanel .req.miss{background:rgba(224,58,28,.16)!important;box-shadow:inset 0 0 0 2px rgba(255,120,90,.45)!important}
/* Комірка ресурсу — це лише іконка й «маю/треба»: без підпису їй нічого
   розпихати по краях, і пара має триматись купи. Комірка з підписом
   (монети) навпаки лишається розтягнутою — там ліворуч назва. */
#locPanel .req{display:flex!important;align-items:center!important;gap:8px!important;
  justify-content:flex-start!important}
#locPanel .req.wide{justify-content:space-between!important}
#locPanel .req-name{color:#a9d6ff!important;font-size:11px!important}
#locPanel .req-num{color:#9ff08a!important;font-size:14px!important;font-weight:900!important}
#locPanel .req.miss .req-num{color:#ffb7a3!important}
/* Рецепт читають так само, як шапку: іконка = назва ресурсу. На 24 px
   вона переставала бути назвою й ставала кольоровою крапкою поруч із
   дробом — а дріб сам по собі не каже, ЧОГО саме бракує. */
#locPanel .req .res-ic{width:34px!important;height:34px!important;background-size:contain!important}
#locPanel .req-coin{width:auto!important}
#locPanel .req-coin.gen-coin{width:26px!important;height:26px!important}


/* =====================================================================
   ХМАРКА «ЙДУТЬ РОБОТИ» НА КАРТІ  (js/basebuild.js)

   Накриває будівлю, тримає зворотний відлік і одну дію — прискорити за
   енергію. Більше на ній немає нічого: усе, що можна сказати словами,
   уже сказано тим, що будівлю не видно.
===================================================================== */
.build-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.bld-cloud{
  position:absolute;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
}
/* Туман малює js/basebuild.js на полотні (див. там же, чому не кола).
   Тут лишається тільки покласти його на місце: ширший за саму хмарку,
   з виносом угору й убік, бо пасма мають виходити за межі ділянки —
   рівно по краю накриття туман знову виглядав би вирізаним.

   filter:drop-shadow, а не box-shadow: тінь мусить іти за формою
   пасом, а не за прямокутником полотна. */
.bld-cloud .bc-fog{
  position:absolute;display:block;pointer-events:none;
  /* геометрію ставить js/basebuild.js — вона рахується від ділянки */
  filter:drop-shadow(0 5px 9px rgba(6,26,52,.34));
}
.bld-cloud .bc-sign{
  /* Відступ рахується від ШИРИНИ хмарки, і 26% ставили весь стовпчик
     (підпис -> таймер -> кнопка) помітно нижче оптичного центру
     туману: написи звисали з-під хмари на траву, замість того щоб
     лежати на ній. Туман тепер починається на 46% ширини ВИЩЕ за верх
     коробки (див. js/basebuild.js), тож і стовпчик має піднятись. */
  position:relative;z-index:2;margin-top:2%;
  padding:2px 7px;border-radius:7px;
  background:rgba(6,26,52,.82);color:#ffd97a;
  font:900 7px/1 system-ui;letter-spacing:.09em;white-space:nowrap;
}
.bld-cloud .bc-time{
  position:relative;z-index:2;margin-top:3px;
  padding:3px 9px;border-radius:9px;
  background:#0b4384;border:2px solid #a9d6ff;color:#fff;
  font:900 13px/1 system-ui;letter-spacing:.06em;
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}
/* Єдина дія — і вона єдина, що ловить палець. */
.bld-cloud .bc-rush{
  position:relative;z-index:3;margin-top:5px;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;gap:3px;
  padding:4px 10px 4px 6px;border-radius:999px;
  background:linear-gradient(180deg,#79c943,#3f8a1d);
  border:2px solid #fff;color:#fff;
  font:900 12px/1 system-ui;
  box-shadow:0 3px 0 #2c5f14,0 5px 10px rgba(0,0,0,.42);
  animation:bc-pulse 1.6s ease-in-out infinite;
}
.bld-cloud .bc-rush:active{transform:translateY(2px);box-shadow:0 1px 0 #2c5f14}
.bld-cloud .bc-rush .bc-en{
  display:block;width:20px;height:20px;
  background:url("../art/generated/ui/energy.png") center/contain no-repeat;
}
.bld-cloud .bc-rush.poor{
  background:linear-gradient(180deg,#8fa3b8,#5c7186);
  box-shadow:0 3px 0 #3b4c5c;animation:none;
}
@keyframes bc-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.bld-cloud.pop{animation:bc-pop .4s ease-out forwards;pointer-events:none}
.bld-cloud.pop .bc-rush{pointer-events:none}
@keyframes bc-pop{
  0%{transform:scale(1);opacity:1}
  40%{transform:scale(1.18);opacity:.85}
  100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .bld-cloud .bc-rush{animation:none}
}