/* ============ Висотка Мрій — стилі v0.5 ============ */
:root {
  --bg0: #060b20;
  --text: #eef3ff;
  --muted: #93a3d6;
  --cyan: #3fd3ff;
  --gold: #ffc531;
  --gold-d: #a86400;
  --green: #3ccf5a;
  --green-d: #1b7a2c;
  --red: #ff4d5e;
  --display: 'Russo One', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shaft: 66px;
  --fh: 158px;
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); }
body { font-family: var(--body); color: var(--text); user-select: none; -webkit-user-select: none; }
img { -webkit-user-drag: none; pointer-events: none; }
button { font-family: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
#app { position: relative; max-width: 500px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: #2a6fc0; }

/* ---------- Небо, погода ---------- */
#sky { position: absolute; inset: 0; z-index: 0; transition: background 4s; background: linear-gradient(#2f8de6 0%, #6cc3f5 55%, #b9e6ff 100%); }
#app.w-rain #sky, #app.w-snow #sky { background: linear-gradient(#5b7aa6 0%, #8fa9c9 60%, #c3d3e6 100%); }
#app.w-storm #sky { background: linear-gradient(#273450 0%, #4a5a7a 60%, #6f7f9c 100%); }
#app.evening #sky { background: linear-gradient(#2b2f78 0%, #c25f8c 55%, #f4b27a 100%); }
#app.night #sky { background: linear-gradient(#030716 0%, #0d1745 60%, #1d2b66 100%); }
#stars { position: absolute; inset: 0; opacity: 0; transition: opacity 4s; }
#app.night #stars { opacity: 1; }
.star-dot { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: twinkle 3s infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
#sun { position: absolute; right: 30px; top: 120px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(#fffbe0, #ffd54f 55%, rgba(255,213,79,0) 72%); transition: 4s; }
#app.w-rain #sun, #app.w-storm #sun, #app.w-snow #sun { opacity: .25; }
#app.evening #sun { background: radial-gradient(#ffe0b2, #ff8a50 60%, rgba(255,138,80,0) 72%); top: 170px; }
#app.night #sun { background: radial-gradient(#fff, #dfe8ff 55%, rgba(223,232,255,0) 70%); width: 48px; height: 48px; opacity: 1; }
#clouds { position: absolute; inset: 0; }
.cloud { position: absolute; left: -90px; animation: drift linear infinite; }
#app.night .cloud { filter: brightness(.55); }
@keyframes drift { to { transform: translateX(calc(500px + 200px)); } }
#weather-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .6s; }
@keyframes flash { 10% { opacity: .55; } 20% { opacity: .05; } 30% { opacity: .4; } 100% { opacity: 0; } }

/* ---------- Верхня панель ---------- */
#topbar { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(8px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))) 10px 10px;
  background: linear-gradient(#22378a, #121f52 60%, #0c1640); border-bottom: 2px solid #4a63c4; border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.res { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; height: 34px; padding: 0 8px 0 28px; border-radius: 17px; color: #fff; font-family: var(--display); font-size: 15px; cursor: pointer;
  background: linear-gradient(#08102c, #172760); border: 2px solid #5770d0; box-shadow: inset 0 3px 6px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.08); }
.res img { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.res span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .3px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#res-coins span { color: #ffe27a; }
#res-bucks span { color: #9ff5a6; }
.res .plus { margin-right: -4px; background: linear-gradient(#7cf08f, #1f9a37); border: 2px solid #d5ffdc; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: 17px; line-height: 1; flex: none; box-shadow: 0 2px 0 var(--green-d); font-family: var(--body); font-weight: 900; }
.res.pop span { animation: popnum .35s; }
@keyframes popnum { 50% { transform: scale(1.25); } }
#lvl { position: relative; width: 132px; height: 50px; cursor: pointer; }
.lvl-star { position: absolute; left: 0; top: 0; width: 52px; height: 50px; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.lvl-star b { position: absolute; inset: 4px 0 0; display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; text-shadow: 0 2px 0 #8a4a00, 0 0 4px #8a4a00; }
#lvl-bar { position: absolute; left: 26px; right: 0; top: 14px; height: 22px; border-radius: 0 12px 12px 0; overflow: hidden;
  background: linear-gradient(#101c4a, #1a2a66); border: 2px solid #5770d0; border-left: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
#lvl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; border-radius: 0 10px 10px 0; background: linear-gradient(#5b86ff, #3a62d8); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: width .5s; }

#side-left { position: absolute; left: 8px; right: 60px; top: calc(78px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); z-index: 5; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; align-items: center; pointer-events: none; }
#side-left > * { pointer-events: auto; }
.chip.tg { cursor: pointer; padding: 2px 8px 2px 2px; }
.chip.tg .tgimgs { display: flex; }
.chip.tg .tgimgs img + img { margin-left: -12px; }
.chip.tg .tgarr { font-style: normal; font-size: 11px; color: #9fe6ff; margin: 0 2px; }
.chip.tg:active { transform: scale(.95); }
.chip { display: flex; align-items: center; gap: 4px; background: rgba(8,14,40,.8); border: 1px solid #34489a; color: #fff; font-size: 12px; font-weight: 900; padding: 2px 9px 2px 2px; border-radius: 14px; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); }
.chip img { width: 24px; height: 24px; object-fit: contain; }
.badge { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; z-index: 3; animation: badgepop 1.6s infinite; }
@keyframes badgepop { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.18); } }

/* ---------- Вежа ---------- */
#scroller { position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
#scroller::-webkit-scrollbar { display: none; }
#tower { position: relative; padding: 120px 50px 0 8px; display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; }

/* дах: навігація, новий поверх, зірки вежі */
#roof { position: relative; display: flex; flex-direction: column; align-items: stretch; }
/* хаб на даху: 3×3, іконки без рамок, підписи-хмаринки */
.roof-hub { display: flex; flex-direction: column; gap: 14px; margin: 0 -50px 0 -8px; padding: 0 14px; }
.hrow { display: flex; align-items: flex-end; }
.hrow .rn { flex: 1; }
.hrow.r1 { justify-content: space-around; padding: 0 4px; }
.hrow.r1 .rn { max-width: 88px; }
.hrow.r1 .rn:nth-child(2) { transform: translateY(-22px); }
.hrow.r1 .rn:nth-child(3) { transform: translateY(-16px); }

.hrow.r1 .rn > img { width: 56px; height: 56px; }
.hrow.r2 { justify-content: space-between; padding: 0 0; }
.hrow.r2 .rn:first-child { transform: translateY(6px); }
.hrow.r2 .rn:last-child { transform: translateY(-2px); }
.hrow.r2 .cupbtn { transform: translateY(-10px); }
.hrow.r3 { justify-content: space-between; padding: 0 18px 0 22px; }
.hrow.r3 .rn { flex: 0 0 96px; }
.hrow.r3 #build-btn { flex: none; }
.rn { position: relative; border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer; width: 100%; max-width: 104px; -webkit-tap-highlight-color: transparent; }
.rn > img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); transition: transform .12s; position: relative; z-index: 1; margin-bottom: -6px; }
.rn:active > img { transform: scale(.88); }
.rn small { position: relative; z-index: 2; font-size: 11px; line-height: 1.1; text-align: center; font-weight: 900; color: #1d2c6e; padding: 3px 10px 3px; border-radius: 12px; background: linear-gradient(#ffffff, #dfe9ff); white-space: nowrap;
  box-shadow: 0 3px 0 #9fb2e6, 0 5px 8px rgba(0,0,0,.3); }
.rn small::before, .rn small::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: #fff; }
.rn small::before { width: 16px; height: 16px; left: 9px; top: -6px; }
.rn small::after { width: 12px; height: 12px; right: 11px; top: -4px; }
.rn .badge { top: -2px; right: 18%; z-index: 3; }
.rn.wiggle > img { animation: wiggle 1.4s infinite; }
.rn.cupbtn > img { width: 76px; height: 76px; filter: drop-shadow(0 0 12px rgba(255,197,49,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.cupbar { position: relative; z-index: 2; width: 86px; height: 18px; border-radius: 10px; background: #0a1236; border: 2px solid #fff; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.cupbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#9ff5a6, #2fbf4a); border-radius: 8px; transition: width .4s; }
.cupbar span { position: relative; display: block; text-align: center; font-family: var(--display); font-size: 11px; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.cupbar.big { width: 100%; max-width: 260px; height: 24px; margin: 8px auto 0; }
.cupbar.big span { font-size: 13px; line-height: 20px; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg) scale(1.1); } 80% { transform: rotate(12deg) scale(1.1); } 90% { transform: rotate(-6deg); } }
/* табло «Новий поверх», прикріплене до даху */
#build-btn.board { position: relative; border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 108px; align-self: end; margin-bottom: -34px; -webkit-tap-highlight-color: transparent; }
.bd-screen { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; gap: 4px; padding: 6px 6px 8px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, #1e3a9a, #0c1748 70%); border: 3px solid #d7e2ff; box-shadow: 0 0 0 2px #24348a, 0 0 16px rgba(63,211,255,.45), inset 0 0 12px rgba(63,211,255,.35); }
.bd-screen::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: shine 4s infinite; }
.bd-screen img { width: 36px; height: 36px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.bd-screen span { font-family: var(--display); font-size: 13px; line-height: 1.05; color: #fff; text-align: left; text-shadow: 0 0 6px rgba(63,211,255,.9); }
.bd-price { position: relative; z-index: 3; display: flex; align-items: center; gap: 3px; margin-top: -9px; padding: 1px 10px 1px 4px; border-radius: 12px; background: linear-gradient(#fff3a0, #ffc531); border: 2px solid #fff; box-shadow: 0 3px 0 #b5740a; font-family: var(--display); font-size: 13px; color: #4a2a00; }
.bd-price img { width: 18px; height: 18px; }
.bd-legs { position: relative; z-index: 1; width: 64%; height: 40px; margin-top: -6px; display: flex; justify-content: space-between; }
.bd-legs i { width: 6px; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #6b7aa8, #e6ecff 45%, #7c8bb8); box-shadow: 0 0 0 1px rgba(10,18,60,.6); }
.bd-legs::before { content: ''; position: absolute; left: 3px; right: 3px; top: 12px; height: 3px; background: #9aa8d0; }
#build-btn.disabled .bd-price { filter: saturate(.3) brightness(.85); }
#build-btn:active .bd-screen { transform: scale(.95); }
/* дах: палуба через усю ширину + скляний паркан */
.roof-deck { position: relative; margin-top: 36px; padding: 8px 10px 10px calc(var(--shaft) + 8px); border-radius: 10px 10px 0 0;
  background: linear-gradient(#2a40a0, #142160); border: 4px solid #c9d4f0; border-bottom: none; box-shadow: 0 -4px 16px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.18); }
.glassrail { position: absolute; left: -4px; right: -4px; bottom: calc(100% + 4px); height: 26px; pointer-events: none;
  background:
    linear-gradient(90deg, #8c99c4, #f3f6ff 50%, #8c99c4) left bottom / 6px 100% no-repeat,
    linear-gradient(90deg, #8c99c4, #f3f6ff 50%, #8c99c4) right bottom / 6px 100% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 44px, #c3cdea 44px 47px, transparent 47px 48px),
    linear-gradient(115deg, rgba(190,230,255,.10) 0 30%, rgba(255,255,255,.32) 34%, rgba(190,230,255,.12) 40% 70%, rgba(255,255,255,.22) 74%, rgba(190,230,255,.10) 78%),
    linear-gradient(rgba(70,140,230,.32), rgba(40,90,190,.5)); }
.glassrail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(#e2e9fb, #a9b5d8); }
.glassrail .hr { position: absolute; left: -2px; right: -2px; top: -3px; height: 6px; border-radius: 3px; background: linear-gradient(#ffffff, #aab6da 60%, #6f7da8); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.deck-in { position: relative; }
#tower-stars { display: flex; justify-content: center; gap: 4px; padding: 5px 12px 6px; margin: 0 auto; width: max-content; border-radius: 16px; background: linear-gradient(#0a1236, #111d52); border: 1px solid rgba(160,190,255,.25); box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.12); }
.tstar { position: relative; width: 36px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.75)); }
.ts-in { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3d4f8f, #222f63 70%); clip-path: polygon(50% 2%, 62% 35%, 97% 36%, 69% 57%, 79% 92%, 50% 72%, 21% 92%, 31% 57%, 3% 36%, 38% 35%); }
.ts-in i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#fff6b0, #ffd23a 45%, #f39200 85%); }
.ts-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.55) 0 24%, transparent 25%); pointer-events: none; }
.roof-sign { margin-top: 6px; text-align: center; font-family: var(--display); font-size: 11px; letter-spacing: 3px; color: #9fe6ff; text-shadow: 0 0 6px rgba(63,211,255,.7); }
/* машинне відділення ліфта — вбудоване в дах */
.liftcap { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--shaft) - 4px); z-index: 1; border-right: 3px solid #c9d4f0; border-radius: 6px 0 0 0; overflow: hidden; background: linear-gradient(90deg, #0f1a4a, #24368c 50%, #0f1a4a); }
.lc-box { position: absolute; inset: 0; }
.lc-box::before { content: ''; position: absolute; left: 8px; right: 8px; top: 9px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(90deg, #4a5c9c 0 3px, #18245e 3px 7px); }
.lc-box::after { content: ''; position: absolute; left: 8px; right: 8px; top: 30px; bottom: 10px; border-radius: 3px; background: linear-gradient(115deg, rgba(160,220,255,.22), rgba(255,255,255,.4) 40%, rgba(160,220,255,.18) 46%); border: 1px solid rgba(220,235,255,.5); }
.lc-box i { position: absolute; right: 6px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #3fd3ff; box-shadow: 0 0 8px #3fd3ff; animation: blink 2s infinite; z-index: 1; }
@keyframes blink { 50% { opacity: .3; } }

#floors-wrap { position: relative; }
#floors { position: relative; display: flex; flex-direction: column-reverse; }

/* шахта ліфта */
#shaft { position: absolute; left: 0; top: 0; bottom: 0; width: var(--shaft); overflow: hidden;
  background: linear-gradient(90deg, #0a1030 0, #1a2560 20%, #22307a 50%, #1a2560 80%, #0a1030 100%);
  border-left: 4px solid #c9d4f0; border-right: 4px solid #c9d4f0; box-shadow: inset 0 0 18px rgba(0,0,0,.7); }
#shaft::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 calc(var(--fh) - 2px), rgba(255,255,255,.18) calc(var(--fh) - 2px) var(--fh)); }
.rail { position: absolute; top: 0; bottom: 0; width: 4px; background: linear-gradient(90deg, #5b6a9e, #e0e8ff, #5b6a9e); }
.rail.l { left: 6px; } .rail.r { right: 6px; }
.motor { position: absolute; top: 0; left: 8px; right: 8px; height: 16px; background: linear-gradient(#69779f, #2d375c); border-radius: 0 0 8px 8px; z-index: 2; }
.motor::after { content: ''; position: absolute; left: 50%; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ffc531; box-shadow: 0 0 8px #ffc531; }
.pit { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(45deg, #ffc531 0 8px, #1d1d1d 8px 16px); }
#car { position: absolute; left: 10px; right: 10px; height: 96px; bottom: 12px; z-index: 3; transition-property: bottom; transition-timing-function: cubic-bezier(.5,0,.5,1); cursor: pointer; }
#car::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 4000px; background: linear-gradient(#1a2350, #8a96c8); transform: translateX(-50%); }
#car .cab { position: relative; width: 100%; height: 88px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
#car .platform { position: absolute; left: -4px; right: -4px; bottom: 0; height: 10px; border-radius: 3px; background: linear-gradient(#e0e6f5, #7d89ad); border-bottom: 3px solid #ffc531; box-shadow: 0 3px 6px rgba(0,0,0,.6); }
#car .riders { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 0; opacity: 0; transition: opacity .25s; }
#car .riders img { height: 34px; margin: 0 -5px; }
#car.busy .riders { opacity: 1; }
#car.moving .cab { filter: drop-shadow(0 0 10px rgba(63,211,255,.85)); }
.led { position: absolute; left: calc(-1 * var(--shaft) + 8px); top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #23305e; z-index: 4; pointer-events: none; transition: .3s; }
.floor.here .led { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* ---------- Поверх (як в оригіналі) ---------- */
.floor { position: relative; height: var(--fh); margin-left: var(--shaft); cursor: pointer;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 8%, transparent 92%, rgba(255,255,255,.06)), repeating-linear-gradient(90deg, #1b2a5e 0 34px, #18265a 34px 36px);
  border-left: 4px solid #c9d4f0; border-right: 4px solid #c9d4f0; border-bottom: 10px solid #9aa6c8; box-shadow: inset 0 -3px 0 #e0e6f5; }
.floor::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 10px; background: linear-gradient(#d7deef, #8a96b8 70%, #6a759a); pointer-events: none; }
.floor:active .fpic { filter: brightness(1.08); }
.fhead { position: absolute; left: 6px; top: 6px; z-index: 4; display: flex; align-items: stretch; height: 24px; max-width: calc(100% - 122px); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.fno { min-width: 28px; padding: 0 5px; display: grid; place-items: center; border-radius: 7px 0 0 7px; font-family: var(--display); font-size: 13px; color: #3d2200;
  background: linear-gradient(#fff3a0, #ffc531); border: 2px solid #fff; border-right: none; }
.fname { display: flex; align-items: center; padding: 0 12px 0 8px; border-radius: 0 12px 12px 0; font-family: var(--display); font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(color-mix(in srgb, var(--cat, #3a52a8) 80%, #fff 20%), var(--cat, #3a52a8)); border: 2px solid #fff; border-left: none; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.fbox { position: absolute; right: 6px; top: 4px; z-index: 4; width: 108px; padding: 4px; border-radius: 12px; background: linear-gradient(#f4f7ff, #cfd9f5); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.sicons { display: flex; gap: 3px; }
.si { flex: 1; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(#5aaaf5, #2a6fe0); border: 1.5px solid #1a4fa0; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.si img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.si.lock { background: #9aa4c0; border-color: #7a84a0; }
.si.lock img { opacity: .6; }
.si.empty { background: linear-gradient(#ff9fae, #e0445c); border-color: #a32239; }
.si.unload { background: linear-gradient(#7cf08f, #1f9a37); border-color: #156b26; animation: sipulse 1s infinite; }
.si.cash { background: linear-gradient(#fff3a0, #f3a600); border-color: #a86400; animation: sipulse 1s infinite; }
.si.sell { background: linear-gradient(#ffb3dc, #e04a9a); border-color: #9c2766; }
@keyframes sipulse { 50% { transform: scale(1.08); } }
.sbar { position: relative; height: 15px; margin-top: 4px; border-radius: 8px; overflow: hidden; background: #24305e; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7cf08f, #2fb24a); transition: width .5s; }
.sbar.sell i { background: linear-gradient(#ffb3dc, #e04a9a); }
.sbar.deliver i { background: linear-gradient(#9fe0ff, #2a8fe0); }
.sbar.gold i { background: linear-gradient(#fff3a0, #f3a600); }
.sbar.build i { background: linear-gradient(#ffe17a, #ff9d00); }
.sbar span { position: relative; display: block; text-align: center; font-size: 10px; font-weight: 900; line-height: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); white-space: nowrap; }
.sbar.red { background: #a32239; } .sbar.blue { background: #2a5fc0; }
.fpic { position: absolute; left: 6px; top: 34px; right: 76px; bottom: 6px; z-index: 2; overflow: hidden; border-radius: 12px;
  border: 3px solid #e6ecff; box-shadow: 0 0 0 2px #0d1640, inset 0 0 12px rgba(0,0,0,.35);
  background:
    linear-gradient(transparent 70%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.25) 72%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.12) 22px 24px) 0 100% / 100% 30% no-repeat,
    linear-gradient(transparent 70%, #b9845a 70%, #8f5f3a),
    linear-gradient(color-mix(in srgb, var(--cat, #3a52a8) 35%, #f5f0ff), color-mix(in srgb, var(--cat, #3a52a8) 18%, #fff)); }
.pic-room { position: absolute; left: 2px; bottom: 2px; height: 96%; max-width: 62%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.fpic:not(.building):not(.ready):not(.hotelpic) .pic-room { width: 118px; max-width: 66%; object-fit: fill; }
.fpic.hotelpic .pic-room { width: 118px; object-fit: fill; }
.shelf { position: absolute; right: 6px; top: 8px; display: flex; gap: 2px; padding: 0 3px 3px; border-bottom: 4px solid #8f5f3a; }
.shelf img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.crew { position: absolute; right: 6px; bottom: 2px; display: flex; align-items: flex-end; gap: 5px; }
.crew img { height: 62px; transform: scaleX(-1); filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.stars5 { display: flex; gap: 2px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); }
.stars5 i { width: 14px; height: 14px; background: radial-gradient(circle at 50% 40%, #8c96b8, #5a6488 75%); clip-path: polygon(50% 2%, 62% 35%, 97% 36%, 69% 57%, 79% 92%, 50% 72%, 21% 92%, 31% 57%, 3% 36%, 38% 35%); }
.stars5 i.on { background: linear-gradient(160deg, rgba(255,255,255,.75) 0 22%, transparent 23%), linear-gradient(#fff6b0, #ffd23a 45%, #f39200 90%); }
.stars5.onpic { position: absolute; left: 6px; bottom: 4px; padding: 3px 5px; border-radius: 9px; background: linear-gradient(rgba(13,22,64,.75), rgba(13,22,64,.55)); border: 1px solid rgba(255,255,255,.25); filter: none; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.stars5.onpic i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.stars5.big { justify-content: center; gap: 6px; margin: 4px 0 8px; }
.stars5.big i { width: 30px; height: 30px; }
.fbtn { position: absolute; right: 6px; bottom: 14px; z-index: 4; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, #fff3a0, #ffc531 55%, #e08a00); border: 3px solid #fff; box-shadow: 0 5px 0 #a86400, 0 8px 14px rgba(0,0,0,.45); transition: transform .1s; }
.fbtn:active { transform: translateY(3px) scale(.96); }
.fbtn img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.fbtn b { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 9px; font-family: var(--display); font-weight: 400; font-size: 11px; color: #3d2200; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.fbtn.gold { animation: bob 1.2s ease-in-out infinite; }
.fbtn.green { background: radial-gradient(circle at 50% 30%, #c4ffcb, #47d860 55%, #1b8f33); box-shadow: 0 5px 0 #146a26, 0 8px 14px rgba(0,0,0,.45); animation: bob 1.2s ease-in-out infinite; }
.fbtn.blue { background: radial-gradient(circle at 50% 30%, #d5ecff, #5ab8ff 55%, #2a6fe0); box-shadow: 0 5px 0 #173f99, 0 8px 14px rgba(0,0,0,.45); }
.fbtn.red { background: radial-gradient(circle at 50% 30%, #ffd6dc, #ff7a88 55%, #d92c45); box-shadow: 0 5px 0 #8a1526, 0 8px 14px rgba(0,0,0,.45); }
.fbtn.violet { background: radial-gradient(circle at 50% 30%, #eadcff, #a985ff 55%, #6a3ae0); box-shadow: 0 5px 0 #43219a, 0 8px 14px rgba(0,0,0,.45); }
.fbtn.dim { background: radial-gradient(circle at 50% 30%, #f0f3ff, #b9c3e0 60%, #8a94b8); box-shadow: 0 5px 0 #5a6488, 0 8px 14px rgba(0,0,0,.35); }
.fbtn.dim img { opacity: .75; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* будівництво й готовий поверх */
.fpic.building { background: repeating-linear-gradient(-45deg, #ffd34d 0 16px, #2b2b2b 16px 32px); }
.fpic.building::after { content: ''; position: absolute; inset: 8px; border-radius: 6px; background: rgba(20,30,70,.82); }
.fpic.building > * { z-index: 1; }
.fpic.building .pic-room { animation: crane 2.4s ease-in-out infinite; transform-origin: bottom center; height: 88%; }
@keyframes crane { 50% { transform: rotate(-3deg); } }
.cat-ghost { position: absolute; left: 44%; bottom: 6px; height: 74%; opacity: .35; }
.builder { position: absolute; right: 8px; bottom: 6px; height: 70px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.fpic.ready { box-shadow: 0 0 0 2px #0d1640, 0 0 16px var(--cat); }
.fpic.ready::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 22px var(--cat); animation: softglow 2.4s ease-in-out infinite; }
@keyframes softglow { 50% { opacity: .35; } }
.pic-note { position: absolute; right: 8px; bottom: 10px; max-width: 46%; font-weight: 900; font-size: 12px; color: #1d2a60; text-align: right; }

/* готель */
.hinfo { display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.hinfo div { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 12px; color: #1d2a60; }
.hinfo img { width: 22px; height: 22px; object-fit: contain; }
.fpic.hotelpic { --cat: #ffc531; }
.hotel-sign { position: absolute; left: 36%; top: 6px; white-space: nowrap; padding: 1px 8px; border-radius: 6px; font-family: var(--display); font-size: 10px; letter-spacing: 1px; color: #ffe8a0; background: #2a2160; border: 1.5px solid #ffc531; }

/* ---------- Вестибюль ---------- */
.floor.lobby { border-bottom-color: #6d4c41; }
.lobby-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 54px), linear-gradient(#2a3d80, #1b2a62); }
.lobby-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(#f0f3fb, #bfc8e2); border-top: 3px solid #fff; }
.lobby-floor::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(40,60,120,.18) 38px 40px), linear-gradient(transparent 48%, rgba(40,60,120,.12) 48% 52%, transparent 52%); }
.neon { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); font-family: var(--display); font-size: 15px; letter-spacing: 4px; color: #c9f4ff; text-shadow: 0 0 4px #3fd3ff, 0 0 12px #3fd3ff, 0 0 22px #1aa0ff; white-space: nowrap; animation: neon 4s infinite; }
@keyframes neon { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .5; } 96% { opacity: 1; } 97% { opacity: .6; } }
.desk { position: absolute; left: 14px; bottom: 28px; width: 104px; height: 40px; border-radius: 8px 8px 0 0; background: linear-gradient(#e9eefc, #b7c3e8); border-top: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.desk::before { content: 'RECEPTION'; position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-family: var(--display); font-size: 9px; letter-spacing: 2px; color: #2a3d80; }
.desk::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); border-radius: 2px; }
.desk img { position: absolute; left: 50%; bottom: 100%; width: 26px; transform: translateX(-50%); }
.plant { position: absolute; bottom: 26px; height: 58px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.chandelier { position: absolute; left: 50%; top: 58px; width: 46px; height: 16px; transform: translateX(-50%); border-radius: 0 0 24px 24px; background: linear-gradient(#fff6d0, #ffd36a); box-shadow: 0 0 22px 6px rgba(255,214,110,.55); }
.carpet { position: absolute; bottom: 0; right: 10px; width: 150px; height: 12px; background: linear-gradient(#d23b4f, #9c1e30); border-top: 2px solid #ffcc4d; transform: skewX(-30deg); }
.gdoor { position: absolute; right: 74px; bottom: 28px; width: 70px; height: 96px; border-radius: 10px 10px 0 0; padding: 12px 6px 0; background: linear-gradient(#5b6b9e, #2c3866); border: 2px solid #9fb0e6; display: flex; gap: 2px; overflow: hidden; }
.gdoor::before { content: ''; position: absolute; left: 6px; right: 6px; top: 4px; height: 3px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.gdoor i { flex: 1; position: relative; background: linear-gradient(115deg, rgba(190,235,255,.55), rgba(90,170,230,.35) 40%, rgba(190,235,255,.45) 55%, rgba(80,150,220,.35)); border: 1px solid rgba(255,255,255,.5); }
.lv2 .lobby-scene { background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 3px, transparent 3px 60px), linear-gradient(#34488e, #22326e); }
.lv3 .lobby-scene { background: repeating-linear-gradient(90deg, rgba(255,214,110,.1) 0 3px, transparent 3px 60px), linear-gradient(#3b4a8a, #262f66); }
.lv4 .lobby-scene { background: repeating-linear-gradient(90deg, rgba(255,214,110,.14) 0 3px, transparent 3px 60px), linear-gradient(#3b2f6a, #221c4a); }
.lv4 .neon, .lv5 .neon { color: #fff3c4; text-shadow: 0 0 4px #ffc531, 0 0 12px #ffc531, 0 0 22px #ff9d00; }
.lv4 .gdoor, .lv5 .gdoor { border-color: #ffd36a; background: linear-gradient(#8a6a2a, #4a3612); }
.lv5 .lobby-scene { background: repeating-linear-gradient(90deg, rgba(255,79,168,.12) 0 3px, transparent 3px 60px), linear-gradient(#2a1450, #120a30); }
.lv5 .lobby-floor { background: linear-gradient(#f4e6b8, #c9a24a); }
.queue { position: absolute; right: 84px; bottom: 26px; width: 110px; height: 70px; z-index: 3; pointer-events: none; }
.queue img { position: absolute; bottom: 0; height: 62px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.queue img.vip { height: 70px; filter: drop-shadow(0 0 8px #ffd54f); }
.qcount { position: absolute; right: 6px; top: 6px; z-index: 4; display: flex; align-items: center; gap: 3px; padding: 2px 10px 2px 3px; border-radius: 14px; background: linear-gradient(#f4f7ff, #cfd9f5); border: 2px solid #fff; color: #1d2a60; font-family: var(--display); font-size: 13px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.qcount img { width: 24px; height: 24px; object-fit: contain; }

/* ---------- Земля, трава, дерева, ліхтарі ---------- */
.ground { position: relative; z-index: 4; height: 196px; margin: 0 -50px 0 -8px; overflow: visible;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cg stroke='%23a6ec7c' stroke-width='1.8' opacity='.6'%3E%3Cpath d='M4 30 Q5 20 2 13'/%3E%3Cpath d='M10 30 Q11 22 14 16'/%3E%3Cpath d='M26 30 Q25 21 27 14'/%3E%3Cpath d='M33 30 Q35 20 34 12'/%3E%3Cpath d='M43 30 Q42 22 45 17'/%3E%3C/g%3E%3Cg stroke='%23206b1f' stroke-width='1.6' opacity='.55'%3E%3Cpath d='M18 30 Q19 22 16 17'/%3E%3Cpath d='M38 30 Q39 23 41 19'/%3E%3Cpath d='M7 30 Q6 25 8 21'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 6px / 48px 30px repeat,
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(#6fd257, #46a83c 40%, #2f8a30); }
.ground::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(rgba(0,0,0,.32), transparent); }
#app.night .ground { filter: brightness(.6); }
.grass-edge { position: absolute; left: 0; right: 0; top: -12px; height: 16px; z-index: 6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16 L3 6 L6 16 L9 3 L12 16 L15 8 L18 16 L21 2 L24 16 L27 7 L30 16 L33 4 L36 16 L39 9 L40 16Z' fill='%2357be47'/%3E%3Cpath d='M0 16 L4 10 L8 16 L13 9 L17 16 L22 11 L26 16 L31 8 L35 16 L40 12 L40 16Z' fill='%233c9a35'/%3E%3C/svg%3E") repeat-x; background-size: 40px 16px; }
.flowers { position: absolute; left: 0; right: 0; top: 18px; height: 90px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg%3E%3Ccircle cx='10' cy='14' r='2.6' fill='%23ffe066'/%3E%3Ccircle cx='52' cy='40' r='2.6' fill='%23ff8fb8'/%3E%3Ccircle cx='74' cy='10' r='2.3' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='48' r='2.3' fill='%23b88cff'/%3E%3Ccircle cx='82' cy='52' r='2' fill='%23ffe066'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='.85'%3E%3Ccircle cx='10' cy='14' r='.9'/%3E%3Ccircle cx='52' cy='40' r='.9'/%3E%3Ccircle cx='30' cy='48' r='.9'/%3E%3C/g%3E%3C/svg%3E") repeat; background-size: 90px 60px; }
#app.w-snow .flowers { opacity: 0; }
#app.w-snow .ground::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(245,250,255,.9), rgba(220,232,248,.75)); border-radius: 8px 8px 0 0; }
#app.w-snow .grass-edge { filter: brightness(2.2) saturate(.2); }
.tree { position: absolute; bottom: 92px; z-index: 5; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.lamp { position: absolute; bottom: 76px; width: 6px; height: 104px; z-index: 7; border-radius: 3px; background: linear-gradient(90deg, #121829, #4a5577 45%, #121829); }
.lamp::before { content: ''; position: absolute; left: -9px; top: -26px; width: 24px; height: 28px; border-radius: 10px 10px 4px 4px;
  background: radial-gradient(circle at 50% 60%, #fff6c8, #ffd36a 45%, #b07a10 75%); border: 3px solid #1c2335; box-shadow: 0 0 18px 6px rgba(255,214,110,.45); }
.lamp::after { content: ''; position: absolute; left: -7px; bottom: -4px; width: 20px; height: 10px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#4a5577, #121829); }
.lamp i { position: absolute; left: -6px; top: -36px; width: 18px; height: 10px; border-radius: 50% 50% 2px 2px; background: #1c2335; }
#app.night .lamp::before, #app.evening .lamp::before { box-shadow: 0 0 34px 16px rgba(255,214,110,.6); }
.sidewalk { position: absolute; left: 0; right: 0; bottom: 64px; height: 14px; z-index: 6; background: repeating-linear-gradient(90deg, #d7dce6 0 30px, #b4bac6 30px 32px); border-top: 3px solid #f0f3f8; border-bottom: 3px solid #7d8496; }
.road { position: absolute; left: 0; right: 0; bottom: 4px; height: 60px; z-index: 6; background: linear-gradient(#3a3f4f, #2a2e3c 55%, #333849); box-shadow: inset 0 3px 6px rgba(0,0,0,.45); }
.road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #ffd34d 0 28px, transparent 28px 48px); }
.road::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-top: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); }
.crosswalk { position: absolute; top: 0; bottom: 0; left: 46%; width: 50px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.8) 0 7px, transparent 7px 14px); }

/* ---------- Нижня панель ---------- */
#bottombar { position: relative; z-index: 6; display: flex; justify-content: space-around; align-items: flex-end; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(#22378a, #121f52 55%, #0a1230); border-top: 2px solid #4a63c4; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.nav { position: relative; border: none; background: none; color: #dfe7ff; font-weight: 900; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 2px; cursor: pointer; flex: 1; }
.nav .tile { width: 48px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(#f4f7ff, #b9c6ea); border: 2px solid #fff; box-shadow: 0 3px 0 #5a6aa0, 0 4px 8px rgba(0,0,0,.35); transition: transform .1s; }
.nav .tile img { width: 34px; height: 34px; object-fit: contain; }
.nav:active .tile { transform: translateY(2px); box-shadow: 0 1px 0 #5a6aa0; }
.nav .badge { top: -4px; right: calc(50% - 30px); }
.nav.big { margin-top: -30px; }
.nav.big .disc { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2f4fae, #0f1a44 70%); border: 4px solid var(--gold); display: grid; place-items: center; box-shadow: 0 0 0 3px #0a1230, 0 6px 16px rgba(0,0,0,.5), inset 0 0 14px rgba(63,211,255,.35); overflow: hidden; }
.nav.big .disc img { width: 42px; height: 62px; object-fit: contain; }
.nav.glow .disc { animation: pulse .9s infinite; }
@keyframes pulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 3px #0a1230, 0 0 22px 6px rgba(255,197,49,.65); } }

.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: shine 3.2s infinite; pointer-events: none; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- Модальні вікна ---------- */
#modal-bg { position: absolute; inset: 0; background: rgba(2,6,20,.66); backdrop-filter: blur(2px); z-index: 20; display: none; align-items: flex-end; justify-content: center; }
#modal-bg.show { display: flex; }
#modal { width: 100%; max-height: 88%; background: linear-gradient(#141f4a, #0b1332); border-radius: 26px 26px 0 0; border: 2px solid #4a63c4; border-bottom: none; display: flex; flex-direction: column; animation: up .24s cubic-bezier(.2,.9,.3,1.2); overflow: hidden; box-shadow: 0 -10px 30px rgba(0,0,0,.6); }
@keyframes up { from { transform: translateY(40%); opacity: .3; } }
.m-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat, #3a52a8) 85%, #fff 10%), color-mix(in srgb, var(--cat, #3a52a8) 55%, #050a20)); border-bottom: 3px solid var(--gold); }
.m-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 14% 50%, rgba(255,255,255,.3), transparent 55%), repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px); }
.m-head img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); position: relative; }
.m-head > div { position: relative; min-width: 0; }
.m-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.35); text-wrap: balance; }
.m-head p { margin: 1px 0 0; font-size: 12.5px; opacity: .95; font-weight: 800; }
.m-close { position: relative; margin-left: auto; background: linear-gradient(#ff7a88, #e0344c); border: 2px solid #fff; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; font-weight: 900; cursor: pointer; flex: none; box-shadow: 0 3px 0 #8a1526; }
.m-body { padding: 12px 12px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.m-body h3 { display: flex; align-items: center; gap: 8px; margin: 14px 2px 8px; font-family: var(--display); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); }
.m-body h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(63,211,255,.5), transparent); }
.m-body h3:first-child { margin-top: 2px; }

.row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#1c2b5e, #15214b); border: 1px solid #2f4390; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 0 rgba(0,0,0,.25); }
.row > img { width: 50px; height: 50px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.row > img.tall { width: 34px; height: 62px; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 900; font-size: 15px; }
.row .meta { font-size: 12px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.row .meta b { color: #fff; }
.row .meta img { width: 16px; height: 16px; object-fit: contain; }
.row.hl { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(255,197,49,.25), 0 3px 0 rgba(0,0,0,.25); }
.row.emp > img { width: 64px; height: 64px; }
.row.ach > img { width: 56px; height: 56px; }
.pips { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.pips i { flex: 1; min-width: 6px; max-width: 16px; height: 6px; border-radius: 3px; background: #2a3a78; }
.pips i.on { background: linear-gradient(#7ee36f, #2fb24a); box-shadow: 0 0 5px rgba(60,207,90,.6); }
.mini-prog { height: 8px; background: #0a1230; border: 1px solid #2f4390; border-radius: 5px; overflow: hidden; margin-top: 4px; }
.mini-prog i { display: block; height: 100%; background: linear-gradient(#7ee36f, #2fb24a); }
.mini-prog.ghost { opacity: 0; }

.btn { position: relative; overflow: hidden; border: none; border-radius: 12px; padding: 8px 12px; font-weight: 900; font-size: 14px; cursor: pointer; background: linear-gradient(#5fe07a, #23a03a); color: #fff; box-shadow: 0 3px 0 var(--green-d), inset 0 1px 0 rgba(255,255,255,.4); display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.btn img { width: 18px; height: 18px; object-fit: contain; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-d); }
.btn.green { background: linear-gradient(#5fe07a, #1f9a37); box-shadow: 0 3px 0 var(--green-d), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.blue { background: linear-gradient(#5ab8ff, #2a6fe0); box-shadow: 0 3px 0 #173f99, inset 0 1px 0 rgba(255,255,255,.4); }
.btn.gold { background: linear-gradient(#ffdb5e, #f39c00); color: #3d2200; box-shadow: 0 3px 0 var(--gold-d), inset 0 1px 0 rgba(255,255,255,.5); text-shadow: none; }
.btn.red { background: linear-gradient(#ff7a88, #e0344c); box-shadow: 0 3px 0 #8a1526, inset 0 1px 0 rgba(255,255,255,.4); }
.btn.purple { background: linear-gradient(#b48cff, #7040e8); box-shadow: 0 3px 0 #43219a, inset 0 1px 0 rgba(255,255,255,.4); }
.btn.gray { background: #2a3766; box-shadow: 0 3px 0 #141c3e; color: #8e9bc8; text-shadow: none; cursor: default; }
.btn.poor { filter: saturate(.35) brightness(.8); }
.btn.wide { width: 100%; padding: 11px; font-size: 15px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.tab { border: 1.5px solid #3a52a8; border-radius: 20px; padding: 6px 12px; font-weight: 900; font-size: 13px; color: #b9c6f0; background: #121d45; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tab img { width: 22px; height: 22px; object-fit: contain; }
.tab.on { color: #3d2200; background: linear-gradient(#ffdb5e, #f39c00); border-color: #fff3c4; box-shadow: 0 2px 0 var(--gold-d); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.card { position: relative; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: linear-gradient(#1f2f66, #141f4a); border: 1px solid #34489a; }
.card > img { height: 84px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.card .name { font-family: var(--display); font-size: 13px; }
.card .meta { font-size: 11px; color: var(--muted); font-weight: 800; min-height: 15px; }
.note { background: linear-gradient(#2a2a5e, #1d1f4a); border: 1px solid #5a4ea8; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 700; color: #e4dcff; margin-bottom: 10px; line-height: 1.4; }
.note.small { font-size: 12px; padding: 8px 10px; }
.statline { display: flex; gap: 8px; margin-bottom: 10px; }
.stat { flex: 1; background: linear-gradient(#1c2b5e, #131e45); border: 1px solid #2f4390; border-radius: 12px; padding: 8px 4px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; color: #fff; }
.stat span { font-size: 11px; color: var(--muted); font-weight: 800; }

/* категорії будівництва */
.catlist { display: flex; flex-direction: column; gap: 10px; }
.catcard { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 8px; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 30%, #101a42), #111b42 65%); border: 2px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.catcard:active { transform: scale(.98); }
.catcard > img { width: 90px; height: 90px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.catcard .grow { flex: 1; min-width: 0; }
.catcard .name { font-family: var(--display); font-size: 19px; color: #fff; text-shadow: 0 0 10px var(--c); }
.catcard .meta { font-size: 12px; color: #c4cff3; font-weight: 700; margin: 2px 0 6px; }
.catcard .count { display: inline-block; font-size: 11px; font-weight: 900; color: var(--c); background: rgba(0,0,0,.35); padding: 1px 8px; border-radius: 8px; margin-bottom: 6px; }
.catcard.done { filter: grayscale(.8); opacity: .6; cursor: default; }

/* товари у вікні поверху */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 16px; text-align: center; background: linear-gradient(#22357a, #131e4a); border: 2px solid #3a52a8; min-width: 0; }
.pcard.unload { border-color: #7cf08f; box-shadow: 0 0 12px rgba(124,240,143,.35); }
.pcard.cash { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,197,49,.4); }
.pcard.off { opacity: .6; }
.pimg { position: relative; width: 100%; height: 64px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a55b0, #0e1840 75%); border: 1px solid #4a63c4; }
.pimg > img { height: 52px; max-width: 90%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.pstate { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.pstate img { width: 18px; height: 18px; object-fit: contain; }
.pname { font-weight: 900; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmeta { font-size: 10.5px; color: var(--muted); font-weight: 800; min-height: 14px; }
.pcard .mini-prog { width: 100%; margin: 0; }
.pval { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-size: 12px; color: #ffe27a; }
.pval img { width: 15px; height: 15px; }
.pcard .btn { width: 100%; padding: 7px 4px; font-size: 13px; }

/* працівники */
.crewgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.wframe { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 10px; border-radius: 16px; background: linear-gradient(#22357a, #131e4a); border: 2px solid #3a52a8; min-width: 0; }
.wframe.dream { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,197,49,.35); }
.wpic { position: relative; width: 100%; height: 88px; border-radius: 12px; display: grid; place-items: end center; background: radial-gradient(circle at 50% 30%, #3a55b0, #0e1840 75%); border: 1px solid #4a63c4; overflow: hidden; }
.wpic img { height: 82px; object-fit: contain; }
.wh { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #ffc531; color: #3d2200; font-size: 15px; display: grid; place-items: center; font-weight: 900; }
.wframe.empty .wpic { place-items: center; border-style: dashed; }
.wframe.empty .wpic img { height: 40px; opacity: .45; }
.wname { font-weight: 900; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wframe .btn { width: 100%; padding: 6px 4px; font-size: 12px; }
.rank { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 8px; background: #2a3766; color: #b9c6f0; vertical-align: middle; }
.rank.r1 { background: #2a6fe0; color: #fff; }
.rank.r2 { background: linear-gradient(#ffdb5e, #f39c00); color: #3d2200; }
.happy { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 8px; background: #2fb24a; color: #fff; vertical-align: middle; }

/* панель покращення */
.uppanel { position: relative; margin-top: 14px; padding: 22px 12px 12px; border-radius: 18px; background: linear-gradient(#2a2160, #171640); border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(255,197,49,.25), inset 0 1px 0 rgba(255,255,255,.12); text-align: center; }
.up-title { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 4px 22px; border-radius: 8px; white-space: nowrap; font-family: var(--display); font-size: 14px; color: #3d2200; background: linear-gradient(#ffe27a, #f39c00); box-shadow: 0 3px 0 var(--gold-d); }
.up-eff { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; }
.up-eff span { font-size: 12px; font-weight: 800; color: #d8d0ff; background: rgba(0,0,0,.3); border-radius: 8px; padding: 3px 8px; }
.up-eff b { color: #7cf08f; }
.up-buy .btn { min-width: 60%; }

/* картки магазину */
.shopcard { margin-bottom: 12px; padding: 10px; border-radius: 16px; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #3a52a8; }
.sc-title { font-family: var(--display); font-size: 15px; color: #ffe27a; margin-bottom: 4px; }
.sc-body { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.sc-body > img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.sc-body > img.tall { width: 40px; height: 66px; }
.sc-body > img.veh { width: 86px; height: 62px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.sc-body .grow { flex: 1; min-width: 0; }
.sc-body .meta { font-size: 12.5px; color: #c4cff3; font-weight: 700; line-height: 1.35; }
.dstats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dstats span { flex: 1 1 40%; padding: 6px 8px; border-radius: 10px; background: #0a1230; border: 1px solid #23336e; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.dstats b { display: block; font-family: var(--display); font-weight: 400; font-size: 14px; color: #7cf08f; }
.sc-foot { margin-top: 6px; text-align: center; font-size: 11px; font-weight: 800; color: #7080b8; }
.shopcard .btn.wide { margin-top: 4px; }

/* послуги */
.svc { border-radius: 16px; padding: 10px; margin-bottom: 10px; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #34489a; }
.svc.active { border-color: #7cf08f; box-shadow: 0 0 14px rgba(124,240,143,.25); }
.svc-head { display: flex; gap: 10px; align-items: center; }
.svc-head > img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.svc-head > img.tall { width: 38px; height: 64px; }
.svc .name { font-family: var(--display); font-size: 15px; }
.svc .meta { font-size: 12px; color: var(--muted); font-weight: 700; }
.svc-on { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 900; color: #0a3a14; background: #7cf08f; border-radius: 8px; padding: 1px 8px; }
.seg { display: flex; gap: 4px; margin-top: 8px; background: #0a1230; border: 1px solid #2f4390; border-radius: 12px; padding: 3px; }
.seg button { flex: 1; border: none; background: none; border-radius: 9px; padding: 6px 2px; font-weight: 900; font-size: 13px; color: #b9c6f0; cursor: pointer; }
.seg button.on { background: linear-gradient(#ffdb5e, #f39c00); color: #3d2200; box-shadow: 0 2px 0 var(--gold-d); }
.svc-buy { display: flex; justify-content: flex-end; margin-top: 8px; }

/* завдання, кубки */
.qcard { position: relative; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; text-align: center; background: linear-gradient(#1c2b5e, #15214b); border: 1px solid #2f4390; }
.qcard.hl { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,197,49,.25); }
.qcard.done { opacity: .6; }
.q-title { font-family: var(--display); font-size: 15px; color: #ffe27a; }
.q-text { font-size: 14px; font-weight: 800; margin: 2px 0 6px; }
.q-foot { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.q-rew { display: flex; align-items: center; gap: 3px; color: #fff; }
.q-rew img { width: 16px; height: 16px; }
.q-ok { margin-top: 6px; font-weight: 900; color: #7cf08f; }
.qcard .btn { margin-top: 8px; }
.cupgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cup { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 16px; text-align: center; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #34489a; min-width: 0; }
.cup > img { height: 70px; object-fit: contain; filter: grayscale(1) brightness(.45); }
.cup.ready > img, .cup.got > img { filter: drop-shadow(0 0 10px rgba(255,197,49,.6)); }
.cup.got { border-color: var(--gold); }
.cup.ready { border-color: #7cf08f; box-shadow: 0 0 14px rgba(124,240,143,.35); }
.cname { font-family: var(--display); font-size: 12px; color: #ffe27a; }
.ctext { font-size: 10.5px; font-weight: 800; color: var(--muted); line-height: 1.25; }
.cup .mini-prog { width: 100%; }
.cup .btn { width: 100%; padding: 6px 2px; font-size: 13px; }
.crew-r { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 900; color: #9ff5a6; }
.crew-r img { width: 16px; height: 16px; }

.daily { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dday { background: linear-gradient(#1f2f66, #141f4a); border: 2px solid #34489a; border-radius: 14px; padding: 8px 4px; text-align: center; font-weight: 900; font-size: 12px; position: relative; }
.dday img { width: 42px; height: 42px; object-fit: contain; display: block; margin: 4px auto; }
.dday.got { opacity: .45; }
.dday.got::after { content: '✓'; position: absolute; top: 4px; right: 8px; color: var(--green); font-size: 18px; }
.dday.today { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,197,49,.45); }
.dday.big { grid-column: span 2; }
.switch { width: 54px; height: 30px; border-radius: 15px; background: #2a3766; border: 1.5px solid #3a52a8; position: relative; cursor: pointer; flex: none; transition: .2s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 2px; width: 23px; height: 23px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch.on { background: var(--green); border-color: #9cf5ad; }
.switch.on::after { left: 26px; }

/* ---------- Нагороди ---------- */
#reward { position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(rgba(30,45,120,.9), rgba(3,6,20,.97)); color: #fff; text-align: center; padding: 20px; }
#reward.show { display: flex; }
#reward .rays { position: absolute; width: 560px; height: 560px; left: 50%; top: 42%; margin: -280px 0 0 -280px; background: repeating-conic-gradient(rgba(255,214,110,.22) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 14s linear infinite; -webkit-mask: radial-gradient(#000 20%, transparent 65%); mask: radial-gradient(#000 20%, transparent 65%); }
@keyframes spin { to { transform: rotate(360deg); } }
#reward .ribbon { position: relative; padding: 8px 34px; margin-bottom: 8px; font-family: var(--display); font-size: 22px; color: #3d2200; background: linear-gradient(#ffe27a, #f39c00); border-radius: 6px; box-shadow: 0 4px 0 var(--gold-d), 0 8px 18px rgba(0,0,0,.4); }
#reward .big { position: relative; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
#reward .big.shake { animation: chestshake .5s ease-in-out 3; }
@keyframes chestshake { 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
#reward .big.open { animation: popin .55s; }
#reward .big.flipin { animation: flipin .8s; }
@keyframes popin { from { transform: scale(.3); } 70% { transform: scale(1.15); } }
@keyframes flipin { from { transform: perspective(600px) rotateY(180deg) scale(.4); opacity: 0; } 60% { transform: perspective(600px) rotateY(-15deg) scale(1.1); opacity: 1; } }
#reward .sub2 { position: relative; font-family: var(--display); font-size: 20px; margin: 4px 0 0; text-shadow: 0 0 12px var(--cyan); }
#reward .items { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 12px 0 18px; min-height: 60px; }
#reward .item { background: linear-gradient(#22357a, #131e4a); border: 1px solid #4a63c4; border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; font-weight: 900; animation: popin .45s both; }
#reward .item img { width: 46px; height: 46px; object-fit: contain; }
#reward p { position: relative; margin: 0 0 14px; opacity: .85; font-weight: 700; max-width: 320px; }

/* ---------- Сповіщення ---------- */
#toast { position: absolute; left: 50%; top: calc(80px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); transform: translateX(-50%) translateY(-20px); background: linear-gradient(#1f2f66, #0f1840); border: 1.5px solid #4a63c4; color: #fff; padding: 9px 16px 9px 10px; border-radius: 16px; font-weight: 800; font-size: 14px; z-index: 70; opacity: 0; transition: .25s; pointer-events: none; width: max-content; max-width: 88%; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
#toast img { width: 34px; height: 34px; object-fit: contain; flex: none; }
#modal-bg.show ~ #toast { top: calc(10px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fly { position: absolute; z-index: 65; pointer-events: none; font-family: var(--display); font-size: 18px; color: #fff; text-shadow: 0 2px 0 #7a4b00, 0 0 6px #7a4b00; display: flex; align-items: center; gap: 2px; animation: flyup 1.1s ease-out forwards; }
.fly img { width: 26px; height: 26px; }
@keyframes flyup { to { transform: translateY(-70px); opacity: 0; } }
.coin-fly { position: absolute; z-index: 66; width: 26px; height: 26px; pointer-events: none; transition: transform .7s cubic-bezier(.5,-0.3,.7,1), opacity .7s; }
.confetti { position: absolute; top: -12px; width: 8px; height: 14px; z-index: 61; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.sparkle { position: absolute; z-index: 7; width: 14px; height: 14px; pointer-events: none; background: radial-gradient(#fff, rgba(255,230,120,.8) 30%, transparent 70%); animation: sparkle .8s ease-out forwards; }
@keyframes sparkle { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.8) translateY(-16px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* бічні кнопки праворуч */
#side-right { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.sbtn { position: relative; width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #3a5cc8, #16245a 70%); border: 3px solid #ffc531; box-shadow: 0 4px 0 #0a1230, 0 6px 12px rgba(0,0,0,.4); }
.sbtn:active { transform: translateY(2px); }
.sbtn img { width: 26px; height: 34px; object-fit: contain; }
.sbtn .arr { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
.sbtn .arr.up { border-bottom: 14px solid #7cf08f; margin-top: -3px; }
.sbtn .arr.down { border-top: 14px solid #7cf08f; margin-top: 3px; }
.sbtn .badge { top: -6px; right: -6px; }
#car.call .cab { animation: callglow 1s infinite; }
@keyframes callglow { 50% { filter: drop-shadow(0 0 10px #ffc531) drop-shadow(0 0 4px #fff); } }

/* центральна кнопка операцій */
.nav.big { margin-top: -30px; }
.nav.big .disc { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; border: 4px solid #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #d5ecff, #5ab8ff 55%, #2a6fe0); box-shadow: 0 0 0 3px #0a1230, 0 6px 16px rgba(0,0,0,.5); }
.nav.big .disc img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.nav.big.op-unload .disc { background: radial-gradient(circle at 50% 30%, #c4ffcb, #47d860 55%, #1b8f33); }
.nav.big.op-cash .disc { background: radial-gradient(circle at 50% 30%, #fff3a0, #ffc531 55%, #e08a00); }
.nav.big.op-deliver .disc, .nav.big.op-sell .disc { background: radial-gradient(circle at 50% 30%, #eadcff, #a985ff 55%, #6a3ae0); }
.nav.big.op-idle .disc { background: radial-gradient(circle at 50% 30%, #f0f3ff, #8a94b8 70%); }
.nav.big:not(.op-idle):not(.op-deliver):not(.op-sell) .disc { animation: pulse 1.1s infinite; }
.nav.big .badge { top: -4px; right: calc(50% - 40px); }
.nav .lbl { margin-top: 2px; }

/* значки в картках товарів — світло-сині кружки */
.pstate { background: radial-gradient(circle at 50% 30%, #d9f3ff, #7fd0ff 70%); border: 2px solid #fff; }
.wb { position: absolute; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #d9f3ff, #7fd0ff 70%); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.wb.l { left: 4px; } .wb.r { right: 4px; }
.wb img { width: 18px; height: 18px; object-fit: contain; }
.rank { display: inline-flex; align-items: center; gap: 3px; }
.rank img, .happy img { width: 13px; height: 13px; object-fit: contain; }
.happy { display: inline-flex; align-items: center; gap: 3px; }

/* вікно операцій */
.tcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; }
.optop { margin-bottom: 10px; }
.oprow > img { width: 54px; height: 54px; }
.opno { min-width: 28px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-family: var(--display); font-size: 13px; color: #3d2200; background: linear-gradient(#fff3a0, #ffc531); flex: none; }
.oprow .sicons { margin-top: 4px; max-width: 110px; }
.si.mini { height: 22px; border-radius: 6px; }
.si.mini img { width: 16px; height: 16px; }

/* кубки */
.cupstrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.cupmini { position: relative; flex: none; width: 46px; height: 52px; border-radius: 12px; border: 2px solid #2f4390; background: #0f1a44; padding: 3px; cursor: pointer; }
.cupmini img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.5); }
.cupmini.got img { filter: none; }
.cupmini.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,197,49,.5); }
.cupmini .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.cuphero { position: relative; overflow: hidden; text-align: center; padding: 14px 10px 12px; margin-bottom: 10px; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #2f4fae, #0f1a44 70%); border: 2px solid var(--gold); }
.cuprays { position: absolute; left: 50%; top: 40%; width: 360px; height: 360px; margin: -180px 0 0 -180px; background: repeating-conic-gradient(rgba(255,214,110,.2) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 18s linear infinite; -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); pointer-events: none; }
.cuphero > img { position: relative; height: 120px; object-fit: contain; filter: grayscale(.85) brightness(.75) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cuphero.got > img { filter: drop-shadow(0 0 16px rgba(255,197,49,.8)); }
.cupname { position: relative; font-family: var(--display); font-size: 20px; color: #ffe27a; margin-top: 4px; }
.cupcount { position: relative; font-weight: 900; font-size: 13px; color: #cfd9ff; }
.cuprew { position: relative; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-weight: 900; font-size: 13px; color: #9ff5a6; }
.cuprew img { width: 18px; height: 18px; }
.ctasks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ctask { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(#1c2b5e, #15214b); border: 1px solid #2f4390; }
.ctask.ok { border-color: #3ccf5a; background: linear-gradient(#1c4a3a, #12302a); }
.cchk { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: #2a3a78; color: #cfd9ff; }
.ctask.ok .cchk { background: #3ccf5a; color: #fff; }
.ct-name { font-weight: 800; font-size: 13px; }
.ctask > b { font-family: var(--display); font-weight: 400; font-size: 13px; color: #ffe27a; white-space: nowrap; }
.empbar { position: relative; height: 16px; margin-top: 5px; border-radius: 8px; overflow: hidden; background: #0a1230; border: 1px solid #2f4390; }
.empbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7cf08f, #2fb24a); }
.empbar span { position: relative; display: block; text-align: center; font-size: 10px; font-weight: 900; line-height: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }

/* v0.7 */
.ophead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#2a3f94, #18265e); border: 2px solid #3f58b8; }
.ophead img { width: 40px; height: 40px; object-fit: contain; }
.ophead b { font-family: var(--display); font-size: 17px; flex: 1; }
.ophead span { font-weight: 900; font-size: 12px; color: #cfd9ff; }
.soon { text-align: center; padding: 20px 10px 26px; }
.soon img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); animation: bob 2.4s ease-in-out infinite; }
.soon b { display: block; font-family: var(--display); font-size: 24px; color: #ffe27a; margin: 8px 0 4px; }
.soon p { color: #cfd9ff; font-weight: 800; font-size: 13px; }
#nav-ops:disabled { opacity: .55; filter: grayscale(.7); }

/* v0.8 */
.hinfo .hsub { font-size: 9px; font-weight: 900; color: #5a6a9a; text-align: center; }
.rec { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 8px; background: linear-gradient(#7cf08f, #2fb24a); color: #fff; vertical-align: middle; }
.askbox { text-align: center; padding: 6px 4px 12px; }
.askq { display: flex; justify-content: center; gap: 2px; margin-bottom: 8px; }
.askq img { height: 70px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.askbox p { color: #cfd9ff; font-weight: 800; font-size: 14px; }
/* магазин: квадратні вкладки */
.stabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.stab { position: relative; aspect-ratio: 1 / 1; border: none; cursor: pointer; padding: 6px 2px 5px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(#2a3d8c, #16214f); box-shadow: inset 0 0 0 2px #3a52a8, inset 0 2px 0 rgba(255,255,255,.15), 0 3px 0 #0a1230; color: #b9c6f0; transition: transform .1s; }
.stab .sti { flex: 1; display: grid; place-items: center; }
.stab .sti img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.stab .stl { font-size: 10.5px; font-weight: 900; letter-spacing: .2px; white-space: nowrap; }
.stab.on { background: radial-gradient(circle at 50% 30%, #fff1a8, #ffc531 55%, #e68a00); color: #4a2a00; box-shadow: inset 0 0 0 2px #fff3c4, 0 3px 0 #a86400, 0 0 14px rgba(255,197,49,.55); transform: translateY(-2px); }
.stab.on .sti img { transform: scale(1.1); }
.stab:active { transform: scale(.94); }
/* скрині */
.chestgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chestcard { position: relative; text-align: center; padding: 10px 8px; border-radius: 16px; background: radial-gradient(circle at 50% 30%, #3a4fb0, #16214f 70%); border: 2px solid #4a62c8; }
.chestcard.c-purple { border-color: #b07cff; } .chestcard.c-red { border-color: #ff7a8c; } .chestcard.c-wood { border-color: #c99a5a; }
.chestcard img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation: bob 2.6s ease-in-out infinite; }
.chestcard .name { font-family: var(--display); font-size: 15px; }
.chestcard .meta { font-size: 11px; color: #b9c6f0; font-weight: 800; margin: 2px 0 8px; }
.chestcard .cnt { position: absolute; top: 6px; right: 8px; font-family: var(--display); font-size: 15px; color: #ffe27a; }
/* VIP-завдання */
.vcard { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #6a5a2a; }
.vcard.hl { border-color: #7cf08f; box-shadow: 0 0 12px rgba(124,240,143,.3); }
.vcard.done { opacity: .6; }
.vcard .vic { width: 44px; height: 44px; object-fit: contain; flex: none; }
.vcard .name { font-weight: 900; font-size: 14px; margin-bottom: 4px; }
.vcard .meta { font-size: 11px; color: #b9c6f0; font-weight: 800; }
.vrew { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vrew span { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 900; color: #ffe27a; background: rgba(0,0,0,.25); padding: 1px 6px 1px 2px; border-radius: 8px; }
.vrew img { width: 16px; height: 16px; object-fit: contain; }
/* профіль */
.prof { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 8px 10px; border-radius: 16px; background: radial-gradient(circle at 15% 30%, #3a5cc8, #16214f 75%); border: 1.5px solid #4a62c8; }
.pava { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.pava i { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: linear-gradient(#fff3a0, #ffc531); color: #4a2a00; border: 2px solid #fff; }
.pname { width: 100%; font: 400 16px var(--display); color: #fff; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 3px 8px; margin-bottom: 6px; }
.plvl { position: relative; display: flex; align-items: center; height: 34px; }
.plvl .lstar { position: absolute; left: 0; top: 0; z-index: 2; width: 36px; height: 34px; display: grid; place-items: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.plvl .lstar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.6) 0 22%, transparent 23%), linear-gradient(#fff6b0, #ffd23a 45%, #f39200 90%); clip-path: polygon(50% 2%, 62% 35%, 97% 36%, 69% 57%, 79% 92%, 50% 72%, 21% 92%, 31% 57%, 3% 36%, 38% 35%); }
.plvl .lstar b { position: relative; font-family: var(--display); font-size: 12px; color: #5a2e00; margin-top: 3px; }
.pbar { position: absolute; left: 18px; right: 0; top: 8px; height: 18px; border-radius: 0 10px 10px 0; background: #0a1236; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 9px 9px 0; background: linear-gradient(#7aa2ff, #3a62d8); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.pbar span { position: relative; display: block; padding-left: 16px; text-align: center; font-size: 10.5px; font-weight: 900; line-height: 18px; text-shadow: 0 1px 2px #000; }
.avagrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 10px; max-height: 210px; overflow-y: auto; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.2); }
.avagrid button { border: none; background: none; padding: 0; border-radius: 50%; cursor: pointer; aspect-ratio: 1; }
.avagrid button.on { box-shadow: 0 0 0 3px #ffc531, 0 0 10px rgba(255,197,49,.7); }
.avagrid img { width: 100%; height: 100%; display: block; }
.pchips { display: flex; gap: 5px; margin-bottom: 10px; }
.pchips > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 2px 5px; border-radius: 12px; background: linear-gradient(#1f2f66, #141f4a); border: 1px solid #2f4390; }
.pchips img { width: 24px; height: 24px; object-fit: contain; }
.pchips b { font-family: var(--display); font-weight: 400; font-size: 14px; line-height: 1.1; }
.pchips span { font-size: 9px; font-weight: 900; color: #9fb0e0; white-space: nowrap; }
.psec { margin-bottom: 10px; padding: 8px; border-radius: 14px; background: linear-gradient(#1a2858, #121c44); border: 1px solid #2f4390; }
.pst { display: flex; justify-content: center; align-items: center; gap: 6px; font-family: var(--display); font-size: 14px; color: #ffe27a; margin-bottom: 6px; }
.pst em { font-style: normal; font-family: var(--body, inherit); font-weight: 900; font-size: 11px; color: #9fb0e0; }
.pemp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pemp > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 1px; border-radius: 10px; background: rgba(0,0,0,.2); border-top: 3px solid var(--c); }
.pemp > div > img { width: 34px; height: 34px; object-fit: contain; }
.pemp span { font-size: 8.5px; font-weight: 900; color: #cfd9ff; white-space: nowrap; }
.pemp b { display: flex; align-items: center; gap: 1px; font-size: 10px; font-weight: 900; color: #9ff5a6; }
.pemp b img { width: 11px; height: 11px; }
.pstaff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pstaff > div { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 10px; background: rgba(0,0,0,.2); }
.pstaff img { width: 24px; height: 24px; object-fit: contain; }
.pstaff span { font-size: 10px; font-weight: 900; color: #9fb0e0; }
.pstaff b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; }
.ptech { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ptech > div { display: flex; flex-direction: column; align-items: center; }
.ptech img { width: 100%; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ptech .off img { filter: grayscale(1) brightness(.5); }
.ptech b { font-size: 10px; font-weight: 900; color: #ffe27a; }
.pfoot { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 6px; font-size: 11px; font-weight: 800; color: #cfd9ff; }
.pfoot span { display: inline-flex; align-items: center; gap: 3px; }
.pfoot img { width: 18px; height: 18px; object-fit: contain; }
/* колекції */
.ctop { margin-bottom: 10px; }
.ctask2 { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(#1f2f66, #141f4a); border: 2px solid var(--q); box-shadow: 0 0 12px color-mix(in srgb, var(--q) 35%, transparent); }
.ctask2 .cti { width: 42px; height: 42px; object-fit: contain; }
.ctask2 .name { font-weight: 900; font-size: 14px; }
.ctask2 .meta { font-size: 11px; color: #b9c6f0; font-weight: 800; margin: 2px 0; }
.cday { text-align: center; font-size: 11px; font-weight: 800; color: #9fb0e0; margin-top: 6px; }
.qpill { display: inline-block; font-size: 9.5px; font-weight: 900; padding: 1px 7px; border-radius: 8px; color: #fff; background: var(--q); text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.coll { margin-bottom: 10px; padding: 8px; border-radius: 14px; background: linear-gradient(#1a2858, #121c44); border: 1.5px solid color-mix(in srgb, var(--q) 60%, #2f4390); }
.coll.full { box-shadow: 0 0 14px color-mix(in srgb, var(--q) 50%, transparent); }
.chead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.chead b { font-family: var(--display); font-weight: 400; font-size: 15px; }
.chead em { margin-left: auto; font-style: normal; font-weight: 900; font-size: 12px; color: #ffe27a; }
.citems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ci { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 3px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--q) 35%, #1c2b5e), #111a40 75%); border: 1px solid color-mix(in srgb, var(--q) 50%, transparent); }
.ci img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ci.off { background: #0e1638; border-color: #24305e; }
.ci.off img { filter: grayscale(1) brightness(.35); }
.ci span { font-size: 8.5px; font-weight: 800; color: #b9c6f0; text-align: center; line-height: 1.1; min-height: 19px; }
.ci i { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 10px; font-weight: 900; color: #ffe27a; }
.cfoot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cfoot .vrew { flex: 1; margin: 0; }

.av { display: block; width: 100%; height: 100%; border-radius: 50%; background: url(images/avatars.png) 0 0 / 1000% 500% no-repeat; }

/* v0.10 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pshelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 0 6px; }
.pshelf > div { width: 62px; display: flex; flex-direction: column; align-items: center; }
.pshelf img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,197,49,.55)); }
.pshelf span { font-size: 8.5px; font-weight: 900; color: #ffe27a; text-align: center; line-height: 1.1; }
.pnote { text-align: center; font-size: 10px; font-weight: 800; color: #8a9ac8; margin-top: 5px; }
.pach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pa { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 10px; background: rgba(0,0,0,.2); }
.pa img { width: 34px; height: 34px; object-fit: contain; }
.pa.off img { filter: grayscale(1) brightness(.55); }
.pa .stars5 i { width: 9px; height: 9px; }
.avagrid { max-height: none; }
/* скрині в магазині: 4 в ряд */
.chestrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.chc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px 6px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #3a4fb0, #16214f 75%); border: 2px solid #4a62c8; }
.chc.c-purple { border-color: #b07cff; } .chc.c-red { border-color: #ff7a8c; } .chc.c-wood { border-color: #c99a5a; }
.chc img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.chc .name { font-size: 11px; font-weight: 900; }
.chc .btn { width: 100%; padding: 6px 2px; font-size: 12px; }
.chc .btn img { width: 15px; height: 15px; }
.chinfo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: #b9c6f0; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.2); }
.chinfo b { color: #fff; }
/* лабіринт */
.mzhead { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: #cfd9ff; }
.mzhead span { display: inline-flex; align-items: center; gap: 3px; }
.mzhead .kk { padding: 2px 10px 2px 4px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid #c99a5a; }
.mzhead img { width: 26px; height: 26px; object-fit: contain; }
.mzhead b { color: #ffe27a; font-family: var(--display); font-weight: 400; font-size: 15px; }
.mzsteps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 6px; }
.mzsteps i { height: 18px; border-radius: 6px; background: #24305e; font-style: normal; font-size: 10px; font-weight: 900; color: #6f7fb0; display: grid; place-items: center; }
.mzsteps i.done { background: linear-gradient(#7cf08f, #2fb24a); color: #fff; }
.mzsteps i.cur { background: linear-gradient(#9fe0ff, #2a8fe0); color: #fff; box-shadow: 0 0 8px #3fd3ff; }
.mzsteps i.g:not(.done):not(.cur) { background: linear-gradient(#ffe27a, #b5740a); color: #4a2a00; }
.mztitle { text-align: center; font-family: var(--display); font-size: 15px; color: #ffe27a; margin-bottom: 8px; }
.mzwrap { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.5); border: 2px solid #6b4430; }
.mzstage { position: relative; padding: 26px 8px 14px; transition: transform .75s cubic-bezier(.5,0,.8,.4);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,190,110,.28), transparent 60%), linear-gradient(transparent 80%, #3a2418 80%, #2a180f), repeating-linear-gradient(90deg, #6b4430 0 46px, #5e3b29 46px 48px), repeating-linear-gradient(0deg, transparent 0 20px, rgba(0,0,0,.18) 20px 22px), #5e3b29; }
.mzstage.final { background: radial-gradient(ellipse at 50% 40%, rgba(255,220,120,.5), transparent 65%), linear-gradient(transparent 80%, #4a3510 80%, #2a1d08), repeating-linear-gradient(90deg, #8a6a2a 0 46px, #7a5c22 46px 48px), #7a5c22; }
.mzstage.zoom { transform: scale(3.2); }
.mztorch { position: absolute; top: 18px; width: 10px; height: 34px; border-radius: 3px; background: linear-gradient(#8a6a4a, #3a2418); }
.mztorch::before { content: ''; position: absolute; left: -6px; top: -16px; width: 22px; height: 22px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff6c0, #ffb02e 45%, rgba(255,90,0,0) 70%); animation: flick 1.2s infinite alternate; }
.mztorch.l { left: 8px; } .mztorch.r { right: 8px; }
@keyframes flick { from { transform: scale(1) translateY(0); opacity: .9; } to { transform: scale(1.12) translateY(-2px); opacity: 1; } }
.mzdoors { display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding: 0 14px; }
.mzdoor { position: relative; flex: 1; max-width: 116px; height: 168px; cursor: pointer; transition: transform .2s; }
.mzdoor img { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.6)); transition: opacity .45s ease; }
.mzdoor .nx { opacity: 0; }
.mzdoor.open .nx { opacity: 1; } .mzdoor.open .cur { opacity: 0; }
.mzdoor:not(.open):active { transform: scale(.96); }
.mzdoor.gold img { filter: sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.15) drop-shadow(0 0 12px rgba(255,200,60,.9)); }
.mzdoor.gold.open .nx { filter: drop-shadow(0 0 14px rgba(255,200,60,.9)); }
.mzdoor.lit .cur { filter: brightness(.6) drop-shadow(0 6px 6px rgba(0,0,0,.6)); }
.mzx { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 46px; font-weight: 900; color: #ff3b4e; text-shadow: 0 2px 6px #000; pointer-events: none; }
.mzdoor.shake { animation: chestshake .25s 3; }
#mzfade { position: absolute; inset: 0; background: #05081a; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
#mzfade.on { opacity: 1; }
.mzloot { padding: 8px; border-radius: 12px; background: rgba(0,0,0,.2); margin-bottom: 10px; }
.mzshop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.mzs { position: relative; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; color: #fff;
  background: radial-gradient(circle at 50% 30%, #8a4a2a, #3a1d10 80%); box-shadow: inset 0 0 0 2px #c99a5a, 0 3px 0 #1a0d06; }
.mzs:active { transform: scale(.95); }
.mzs > img { width: 40px; height: 40px; object-fit: contain; }
.mzs b { font-size: 12px; font-weight: 900; }
.mzs em { display: flex; align-items: center; gap: 2px; font-style: normal; font-weight: 900; font-size: 12px; padding: 1px 8px; border-radius: 8px; background: linear-gradient(#7cf08f, #1f9a37); }
.mzs em img { width: 15px; height: 15px; }
.mzs.off { filter: grayscale(.8) brightness(.7); }
.mzs .tag { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 900; padding: 1px 7px; border-radius: 8px; background: #e0344c; border: 1.5px solid #fff; white-space: nowrap; }
.mzrules { font-size: 11px; }
/* донат */
.donote { text-align: center; }
.dongrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.don { position: relative; border: none; cursor: pointer; padding: 8px 4px 8px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff;
  background: radial-gradient(circle at 50% 30%, #2f8f4a, #123a22 75%); box-shadow: inset 0 0 0 2px #3fbf5a, 0 3px 0 #0a2a14; transition: transform .1s; }
.don:active { transform: scale(.94); }
.don > img { width: 74px; height: 64px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.5)); }
.don b { display: flex; align-items: center; gap: 3px; font-family: var(--display); font-weight: 400; font-size: 16px; }
.don b img { width: 20px; height: 20px; }
.don .price { width: 100%; padding: 4px 0; border-radius: 10px; font-weight: 900; font-size: 13px; color: #4a2a00; background: linear-gradient(#fff3a0, #ffc531); box-shadow: 0 2px 0 #b5740a; }
.don .tag { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 900; padding: 1px 8px; border-radius: 8px; background: #e0344c; border: 1.5px solid #fff; white-space: nowrap; }
.don.best .tag { background: #7a4fe0; }
.don.hot, .don.best { box-shadow: inset 0 0 0 2px #ffc531, 0 3px 0 #0a2a14, 0 0 12px rgba(255,197,49,.4); }

/* v0.12 */
#reward .isep { flex-basis: 100%; font-family: var(--display); font-size: 14px; color: #9fe6ff; margin-top: 2px; }
#reward .item.sm { padding: 6px 9px; font-size: 13px; }
#reward .item.sm img { width: 34px; height: 34px; }
.cupperm { position: relative; margin-top: 4px; font-size: 11px; font-weight: 900; color: #ffe27a; }
.pchips > div { padding: 7px 4px 6px; }
.pchips span { white-space: normal; text-align: center; line-height: 1.1; }
.ptech > div { position: relative; padding: 4px 1px 0; border-radius: 10px 10px 8px 8px; background: radial-gradient(circle at 50% 35%, #2c3f88, #141f4a 80%); border: 1px solid #34489a; overflow: hidden; }
.ptech img { height: 28px; }
.ptech b { display: block; width: calc(100% + 2px); margin: 3px -1px 0; text-align: center; font-size: 10px; line-height: 15px; color: #fff; background: linear-gradient(#3a5cc8, #22378a); }
.ptech .max { border-color: #ffc531; }
.ptech .max b { background: linear-gradient(#ffd23a, #e08a00); color: #4a2a00; }
.pstars { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.pstars .tstar { width: 26px; height: 25px; }
.ccancel { display: block; width: 100%; margin-top: 6px; border: none; background: none; cursor: pointer; font-size: 11px; font-weight: 900; color: #ff8fa0; text-align: center; }
.ccancel.off { color: #6f7fb0; cursor: default; }
/* центр зайнятості */
.jcbtn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border: none; cursor: pointer; border-radius: 16px; color: #fff; text-align: left;
  background: linear-gradient(110deg, #1f8f8a, #1a5f9a); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 3px 0 #0d3a50, 0 0 14px rgba(63,211,255,.25); }
.jcbtn img { width: 40px; height: 40px; object-fit: contain; }
.jcbtn span { flex: 1; display: flex; flex-direction: column; }
.jcbtn b { font-family: var(--display); font-weight: 400; font-size: 16px; }
.jcbtn small { font-size: 11px; font-weight: 800; color: #cfeffa; }
.jcbtn i { font-style: normal; font-size: 26px; font-weight: 900; }
.jcbtn:active { transform: scale(.98); }
.jcfull { text-align: center; color: #ffb3c0; }
.jcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.jc { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 16px;
  background: radial-gradient(circle at 50% 28%, #2f8f9a, #142a4f 70%); border: 2px solid #2f7a9a; }
.jc.spec { background: radial-gradient(circle at 50% 28%, #7a4fe0, #22164f 70%); border-color: #b07cff; box-shadow: 0 0 12px rgba(176,124,255,.35); }
.jcava { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 35%, #bfe8ff, #3a7ae0 75%); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.jcava img { height: 92px; margin-bottom: -26px; }
.jcname { font-weight: 900; font-size: 13px; margin-top: 3px; }
.jcdream { display: flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 800; color: #cfeffa; text-align: center; line-height: 1.1; min-height: 22px; }
.jcdream img { width: 12px; height: 12px; flex: none; }
.jc .btn { width: 100%; padding: 6px 2px; font-size: 13px; margin-top: 2px; }
.jcrank { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 8px; background: rgba(0,0,0,.4); color: #ffe27a; z-index: 1; }
.jcrank img { width: 12px; height: 12px; }
.jc.hired .jcava, .jc.hired .jcname, .jc.hired .jcdream { filter: grayscale(.8) brightness(.6); }
.jcband { width: calc(100% + 30px); margin-top: 4px; padding: 5px 0; text-align: center; font-family: var(--display); font-size: 13px; color: #fff; background: linear-gradient(#7cf08f, #1f9a37); transform: rotate(-6deg); box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* v0.13 сертифікати */
.certrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.cert { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 16px; text-align: center;
  background: radial-gradient(circle at 50% 25%, #3a5cc8, #141f4a 75%); border: 2px dashed #8fb0ff; }
.cert.on { border: 2px solid #7cf08f; box-shadow: 0 0 14px rgba(124,240,143,.4); }
.cert .cpct { position: absolute; top: 6px; right: 8px; font-family: var(--display); font-size: 18px; color: #ffe27a; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.cert img { width: 46px; height: 46px; object-fit: contain; }
.cert .name { font-weight: 900; font-size: 13px; }
.cert .meta { font-size: 11px; font-weight: 800; color: #b9c6f0; min-height: 28px; }
.cert .btn { width: 100%; font-size: 13px; padding: 7px 4px; }
.cert .con { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 900; color: #9ff5a6; }
.cert .con img { width: 16px; height: 16px; }
.cert .btn img { width: 18px; height: 18px; }

/* v0.14 жителі / готель */
.rtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.rtab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: none; cursor: pointer; border-radius: 14px; color: #b9c6f0; font-weight: 900; font-size: 12px;
  background: linear-gradient(#22357a, #141f4a); box-shadow: inset 0 0 0 1.5px #3a52a8; }
.rtab img { width: 26px; height: 26px; object-fit: contain; }
.rtab b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; }
.rtab.on { color: #4a2a00; background: radial-gradient(circle at 50% 30%, #fff1a8, #ffc531 60%, #e68a00); box-shadow: inset 0 0 0 2px #fff3c4, 0 3px 0 #a86400; }
.rtab.on b { color: #4a2a00; }
.rbtns { display: flex; flex-direction: column; gap: 5px; }
.rbtns .btn { padding: 6px 10px; font-size: 12px; }
.hhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 6px; }
.hhead h3 { margin: 0; }
.hhead .btn { padding: 6px 10px; font-size: 12px; }
.hhead .btn img { width: 16px; height: 16px; }
/* налаштування */
.setsec { margin-bottom: 12px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(#1a2858, #121c44); border: 1px solid #2f4390; }
.sett { font-family: var(--display); font-size: 14px; color: #ffe27a; margin-bottom: 4px; }
.setrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); }
.setrow:first-of-type { border-top: none; }
.setrow > img, .setrow span img { width: 30px; height: 30px; object-fit: contain; }
.setrow > span { flex: 1; font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.setrow.col { flex-direction: column; align-items: stretch; gap: 6px; }
.setrow.sub2 { border-top: none; padding: 0 0 5px 40px; margin-top: -4px; }
.setrow.sub2 em { font-style: normal; font: 800 11.5px var(--body); color: #9fb2e8; }
.setrow.vol input { flex: 1.4; accent-color: #ffc531; height: 22px; }
.setrow.vol b { width: 40px; text-align: right; font-size: 13px; color: #ffe27a; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg3 button { padding: 8px 4px; border: none; cursor: pointer; border-radius: 12px; font-weight: 900; font-size: 13px; color: #b9c6f0; background: #121d45; box-shadow: inset 0 0 0 1.5px #3a52a8; }
.seg3 button.on { color: #4a2a00; background: linear-gradient(#ffdb5e, #f39c00); box-shadow: inset 0 0 0 2px #fff3c4; }
.langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 4px; }
.langs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border: none; cursor: pointer; border-radius: 12px; font-weight: 900; font-size: 12px; color: #cfd9ff; background: #121d45; box-shadow: inset 0 0 0 1.5px #3a52a8; }
.langs button i { font-style: normal; font-size: 20px; }
.langs button.on { color: #4a2a00; background: linear-gradient(#ffdb5e, #f39c00); box-shadow: inset 0 0 0 2px #fff3c4; }
/* якість / анімації */
#app.noanim *:not(#car), #app.noanim *::before, #app.noanim *::after { animation: none !important; transition-duration: 0s !important; }
#app.q-low #clouds, #app.q-low #weather-fx, #app.q-low #stars { display: none; }
#app.q-low .tree, #app.q-low .fpic, #app.q-low .crew img { filter: none !important; }
#app.q-mid #clouds > *:nth-child(even) { display: none; }

/* v0.15 */
.certrow { margin-bottom: 14px; }
.setrow.vol input[type=range] { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 6px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #ffd23a 0, #f39c00 var(--p, 80%), #0a1236 var(--p, 80%)); box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1.5px #3a52a8; }
.setrow.vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe27a 45%, #e08a00); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(255,197,49,.6); }
.setrow.vol input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe27a 45%, #e08a00); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.setrow.vol b { min-width: 46px; padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,.3); text-align: center; }
/* лотерея */
.ltgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: none; cursor: pointer; border-radius: 18px; color: #fff;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--c) 70%, #fff 10%), color-mix(in srgb, var(--c) 35%, #0a1236) 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff 30%), 0 4px 0 rgba(0,0,0,.4); transition: transform .12s; }
.lt:active { transform: scale(.95); }
.lt > img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.lt b { font-family: var(--display); font-weight: 400; font-size: 15px; }
.lt small { font-size: 10.5px; font-weight: 800; color: #e6ecff; opacity: .9; }
.lt .btn { width: 100%; padding: 7px 4px; font-size: 14px; }
.lt .btn img { width: 18px; height: 18px; }
.ltwin { font-size: 11px; font-weight: 900; color: #ffe27a; }
.scratch { position: relative; margin: 2px auto 12px; max-width: 300px; padding: 16px 14px 12px; border-radius: 20px; text-align: center;
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--c) 75%, #fff 15%), color-mix(in srgb, var(--c) 40%, #0a1236) 80%); box-shadow: inset 0 0 0 3px #ffe27a, 0 8px 20px rgba(0,0,0,.5); }
.scratch .st { font-family: var(--display); font-size: 20px; color: #ffe27a; text-shadow: 0 2px 0 rgba(0,0,0,.4); letter-spacing: 1px; }
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 8px; }
.sc { position: relative; aspect-ratio: 1; border-radius: 14px; background: #f4f6ff; display: grid; place-items: center; overflow: hidden; cursor: pointer; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.sc img { width: 72%; height: 72%; object-fit: contain; }
.sc .cover { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #c9cfdf 0 6px, #b3bacb 6px 12px); display: grid; place-items: center; font-size: 22px; color: #8a92a8; transition: opacity .35s, transform .35s; }
.sc.open .cover { opacity: 0; transform: scale(1.3); pointer-events: none; }
.sc.win { box-shadow: inset 0 0 0 3px #3ccf5a, 0 0 12px rgba(124,240,143,.8); }
.sc.win img { animation: popin .5s; }
.sres { min-height: 26px; font-weight: 900; font-size: 15px; color: #fff; }
.sres b { color: #9ff5a6; }

/* v0.16 — дорога */
.road .traffic { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.road .crosswalk { z-index: 1; }
.tcar { position: absolute; left: 0; height: auto; will-change: transform; filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.tcar.l0 { bottom: 29px; z-index: 1; }
.tcar.l1 { bottom: 4px; z-index: 2; }
/* зірки розвитку експертів */
.chw { position: relative; flex: none; }
.estar { position: absolute; right: -6px; top: -4px; width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.crew .cw { position: relative; display: inline-block; }
.crew .cw > img:first-child { height: 62px; transform: scaleX(-1); filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.crew .cw .estar { right: -8px; top: -2px; width: 22px; height: 22px; }
.crew > .cw + .cw { margin-left: 0; }
.wframe .wb.r img { width: 22px; height: 22px; }
/* стрічка на добудованому поверсі */
.fpic.ready .ribbon { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.ribbon .rl, .ribbon .rr { position: absolute; top: 50%; height: 22px; margin-top: -11px; width: 50%; background: linear-gradient(#ff6b7d, #e0283f 55%, #a8122a); box-shadow: 0 3px 6px rgba(0,0,0,.4); transition: transform .8s cubic-bezier(.5,0,.6,1), opacity .8s; }
.ribbon .rl { left: 0; border-radius: 0 4px 4px 0; transform-origin: left center; }
.ribbon .rr { right: 0; border-radius: 4px 0 0 4px; transform-origin: right center; }
.ribbon .bow { position: absolute; left: 50%; top: 50%; width: 34px; height: 26px; margin: -13px 0 0 -17px; z-index: 1; background: radial-gradient(circle at 50% 50%, #ffd23a 0 5px, transparent 6px), radial-gradient(ellipse at 22% 50%, #ff6b7d 0 9px, #c0182f 10px, transparent 11px), radial-gradient(ellipse at 78% 50%, #ff6b7d 0 9px, #c0182f 10px, transparent 11px); transition: transform .6s, opacity .6s; }
.ribbon b { position: relative; z-index: 2; margin-top: 44px; padding: 3px 10px; border-radius: 10px; font-family: var(--display); font-weight: 400; font-size: 13px; color: #fff; background: rgba(10,18,48,.8); border: 1px solid rgba(255,255,255,.3); }
.ribbon small { position: relative; z-index: 2; margin-top: 3px; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.ribbon.cut .rl { transform: rotate(28deg) translateY(30px); opacity: 0; }
.ribbon.cut .rr { transform: rotate(-28deg) translateY(30px); opacity: 0; }
.ribbon.cut .bow { transform: scale(1.8); opacity: 0; }
.ribbon.cut b, .ribbon.cut small { opacity: 0; transition: opacity .3s; }
.ribbon::after { content: '✂'; position: absolute; left: 50%; top: 50%; margin: -40px 0 0 30px; font-size: 26px; color: #fff; text-shadow: 0 2px 4px #000; opacity: 0; }
.ribbon.cut::after { animation: snip .6s ease-out; }
@keyframes snip { 0% { opacity: 1; transform: translateX(10px) rotate(-20deg); } 50% { opacity: 1; transform: translateX(-40px) rotate(10deg); } 100% { opacity: 0; transform: translateX(-60px); } }
/* лотерея: темно-синя, анімація стирання */
.scratch { background: radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--c) 55%, #1a2a6a), #0c1438 80%); }
.sc { background: radial-gradient(circle at 50% 35%, #2c4396, #121c48 80%); box-shadow: inset 0 0 0 1.5px rgba(160,190,255,.35), inset 0 3px 8px rgba(0,0,0,.5); }
.sc img { filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.sc .cover { background: linear-gradient(135deg, rgba(255,255,255,.18) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #3a4f9c 0 5px, #2e4088 5px 10px); box-shadow: inset 0 0 0 2px rgba(255,215,90,.55); color: #ffe27a; font-family: var(--display); font-size: 24px; }
.sc .cover i { font-style: normal; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.sc.open .cover { display: none; }
.sc.just .cover { display: grid; animation: scratchOut .55s ease-in forwards; animation-delay: var(--d, 0s); }
.sc.just img { animation: popin .5s both; animation-delay: calc(var(--d, 0s) + .25s); }
@keyframes scratchOut { 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } 60% { clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%, 0 70%); opacity: 1; } 100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); opacity: 0; } }
.sc.just::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(255,240,170,.9) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,240,170,.9) 0 2px, transparent 3px), radial-gradient(circle at 45% 80%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px); animation: dust .7s ease-out forwards; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes dust { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5) translateY(-8px); } }
.sc.win { box-shadow: inset 0 0 0 3px #7cf08f, 0 0 14px rgba(124,240,143,.7); }
/* досягнення в профілі: 7 в рядок */
.pach.p7 { grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pach.p7 .pa { padding: 4px 1px; }
.pach.p7 .pa img { width: 30px; height: 30px; }
.pach.p7 .stars5 i { width: 6px; height: 6px; }
.pach.p7 .stars5 { gap: 1px; }
/* деталі даху */
.deck-in::before, .deck-in::after { content: ''; position: absolute; top: 4px; width: 26px; height: 18px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #8a96c0 0 2px, #4a5788 2px 4px); box-shadow: inset 0 0 0 1.5px #c9d4f0, 0 2px 3px rgba(0,0,0,.5); }
.deck-in::before { left: -2px; } .deck-in::after { right: -2px; }
.roof-deck { background:
  repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.05) 38px 40px),
  repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,0,0,.12) 14px 15px),
  linear-gradient(#2a40a0, #142160); }
.roof-sign { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); padding: 2px 14px; border-radius: 8px; background: linear-gradient(#0a1236, #142060); border: 1px solid rgba(63,211,255,.45); box-shadow: 0 0 10px rgba(63,211,255,.35), inset 0 0 8px rgba(63,211,255,.25); }
.glassrail::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: repeating-linear-gradient(90deg, #ffe27a 0 3px, transparent 3px 47px); filter: drop-shadow(0 0 3px #ffd23a); animation: blink 2.4s infinite; }
.crew .cw .estar { height: 22px; transform: none; }
.ribbon .rl, .ribbon .rr { top: 42%; }
.ribbon .bow { top: 42%; }
.ribbon b { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: 11.5px; padding: 2px 9px; }
.ribbon small { display: none; }
.fpic.ready .pic-room { opacity: .9; }

/* v0.17 — машини, лабіринт, лотерея, портрети */
.tcar.l0 { bottom: 33px; }
.tcar.l1 { bottom: 7px; }
.mzsteps i { transition: background .3s, box-shadow .3s, transform .3s; }
.mzsteps i.back { background: linear-gradient(#ff8fa0, #c0182f); color: #fff; transform: scale(.85); }
.sc.just .cover { animation: none; -webkit-mask-image: linear-gradient(115deg, #000 40%, transparent 60%); mask-image: linear-gradient(115deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; animation: scratchSmooth .9s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes scratchSmooth { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.sc.just img { animation: popin .6s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--d, 0s) + .45s); }
.ltcnt { position: absolute; top: 8px; right: 10px; font-family: var(--display); font-size: 16px; color: #ffe27a; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.lt .btn + .btn { margin-top: 2px; }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g3 .card.ex img { width: 56px; height: 56px; }
.grid.g3 .card.ex .name { font-size: 12px; }
.pframe { position: relative; flex: none; width: 54px; height: 60px; border-radius: 14px; overflow: hidden; display: block;
  background: radial-gradient(circle at 50% 30%, #4f78e8, #1a2a6a 75%); border: 2px solid #8fb0ff; box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 0 8px rgba(0,0,0,.4); }
.pframe img { position: absolute; left: 50%; top: 4px; height: 118px; transform: translateX(-50%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.row.hl .pframe { border-color: #ffc531; background: radial-gradient(circle at 50% 30%, #ffcf5a, #8a4a10 80%); }
.chw { display: block; }
.chw .estar { right: -7px; top: -7px; z-index: 2; }

/* поверхи: стіни з текстурою, сучасні перекриття */
.floor {
  background:
    linear-gradient(180deg, rgba(120,190,255,.16) 0, rgba(120,190,255,0) 10px),
    linear-gradient(0deg, rgba(0,0,0,.28) 0, transparent 14px),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.18) 58px 59px, rgba(255,255,255,.05) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(0,0,0,.08) 39px 40px),
    linear-gradient(90deg, #17245a, #1e2f6e 15%, #213478 50%, #1e2f6e 85%, #17245a);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 12px solid transparent;
  border-image: linear-gradient(90deg, #8a96c0, #f0f4ff 40%, #8a96c0) 1; box-shadow: inset 0 2px 0 rgba(140,200,255,.35); }
.floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(160,220,255,.9) 0 18px, rgba(160,220,255,.25) 18px 22px); filter: blur(.4px); box-shadow: 0 0 8px rgba(120,200,255,.6); }
.floor::after { left: -4px; right: -4px; bottom: -12px; height: 12px;
  background:
    radial-gradient(circle, #f4f7ff 0 1.4px, #6a759a 1.6px, transparent 2.2px) 6px 50% / 24px 100% repeat-x,
    linear-gradient(#f0f4ff, #c3cce4 35%, #7f8bb0 70%, #4f5a80); box-shadow: 0 3px 6px rgba(0,0,0,.45); }
.floor .fpic { box-shadow: 0 0 0 2px #0d1640, 0 6px 12px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.35); }
/* шахта ліфта: скляна, зі сталевими фермами */
#shaft { border-left: 4px solid transparent; border-right: 4px solid transparent; border-image: linear-gradient(90deg, #8a96c0, #f0f4ff 50%, #8a96c0) 1;
  background:
    linear-gradient(100deg, transparent 0 30%, rgba(255,255,255,.08) 34%, transparent 40%, transparent 70%, rgba(255,255,255,.05) 74%, transparent 78%),
    repeating-linear-gradient(45deg, transparent 0 46px, rgba(160,180,230,.10) 46px 48px),
    repeating-linear-gradient(-45deg, transparent 0 46px, rgba(160,180,230,.10) 46px 48px),
    linear-gradient(90deg, #070c26 0, #142058 18%, #1b2a6e 50%, #142058 82%, #070c26 100%); }
#shaft::before { background: repeating-linear-gradient(transparent 0 calc(var(--fh) - 4px), rgba(220,230,255,.35) calc(var(--fh) - 4px) calc(var(--fh) - 2px), rgba(0,0,0,.35) calc(var(--fh) - 2px) var(--fh)); }
.rail { width: 5px; background: linear-gradient(90deg, #3e4a78, #f4f7ff 45%, #9aa6cf 60%, #3e4a78); box-shadow: 0 0 4px rgba(0,0,0,.5); }
.rail::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 30px, rgba(0,0,0,.35) 30px 32px); }
.motor { height: 18px; background: linear-gradient(#9aa6cf, #4a5788 50%, #222c58); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
#car .platform { background: linear-gradient(#f4f7ff, #aab6da 50%, #6f7da8); border-bottom: 3px solid #3fd3ff; box-shadow: 0 3px 6px rgba(0,0,0,.6), 0 2px 10px rgba(63,211,255,.5); }

.tcar.l0 { bottom: 38px; }
.tcar.l1 { bottom: 12px; }
.road .traffic { overflow: visible; }

.pshelf { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; justify-items: center; }
.pshelf > div { width: auto; }
.pshelf img { width: 38px; height: 38px; }

.grid.g3 .card .btn img { width: 18px; height: 18px; }
.grid.g3 .card .btn { padding: 7px 6px; font-size: 14px; }
.pshelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }
.pshelf > div { width: 12.5%; display: flex; justify-content: center; }
.ebon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.ebon span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 2px; border-radius: 8px; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); }
.ebon span:nth-child(1) { color: #9fe6ff; } .ebon span:nth-child(2) { color: #ffe27a; } .ebon span:nth-child(3) { color: #9ff5a6; }
.ebon img { width: 15px; height: 15px; object-fit: contain; }
.ebon em { font-style: normal; font-size: 10px; font-weight: 900; color: #cfd9ff; }

/* v0.20 — пропуск у ряді, вертоліт, паркінг, щаслива година, мільйонер */
.hrow.r1 .rn { max-width: 74px; }
.hrow.r1 .rn > img { width: 50px; height: 50px; }
.hrow.r1 .rn small { font-size: 10px; padding: 3px 7px; }

#helipad { position: absolute; right: 8px; bottom: calc(100% + 2px); width: 70px; height: 40px; z-index: 3; cursor: pointer; }
#helipad .hpad { position: absolute; left: 4px; right: 4px; bottom: 0; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, #3a4a80 0 55%, #ffd23a 56% 62%, #2a3566 63%); box-shadow: 0 2px 4px rgba(0,0,0,.5); display: grid; place-items: center; }
#helipad .hpad b { font-family: var(--display); font-weight: 400; font-size: 10px; color: #ffe27a; transform: scaleY(.6); }
#helipad .heli { position: absolute; left: 50%; bottom: 6px; width: 64px; transform: translate(-50%, -140px) scale(.6); opacity: 0; transition: transform 1.6s cubic-bezier(.3,.8,.4,1), opacity .8s; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
#helipad.landed .heli { transform: translate(-50%, 0) scale(1); opacity: 1; animation: hbob 2.4s ease-in-out infinite 1.6s; }
@keyframes hbob { 50% { transform: translate(-50%, -2px) scale(1); } }
#helipad .htime { position: absolute; right: -2px; top: -16px; min-width: 18px; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 900; color: #fff; background: rgba(10,18,48,.85); border: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
#helipad.landed .htime { background: #e0344c; animation: badgepop 1.4s infinite; }
#helipad.done .htime { background: #2fb24a; }
.helibox { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(#22357a, #141f4a); border: 1.5px solid #d0342c; }
.helibox .hvip { height: 70px; }
.helibox .name { font-weight: 900; font-size: 15px; margin-bottom: 3px; }
.helibox .meta { font-size: 12px; color: #cfd9ff; font-weight: 800; }
#parking { position: relative; margin: 0 -50px 96px -8px; padding: 8px 10px 12px; z-index: 4;
  background: linear-gradient(rgba(0,0,0,.35), transparent 12px), repeating-linear-gradient(90deg, #2a2f3e 0 60px, #262b38 60px 62px), #2a2f3e; border-top: 4px solid #555c70; box-shadow: inset 0 8px 14px rgba(0,0,0,.5); }
#parking::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 4px; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,240,180,.9) 40px 70px, transparent 70px 110px); filter: blur(1px); opacity: .8; }
.pk-head { position: relative; display: flex; align-items: center; gap: 8px; margin: 8px 4px 6px; }
.pk-head span { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #2a6fe0; color: #fff; font-weight: 900; font-size: 15px; border: 2px solid #fff; }
.pk-head b { font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; }
.pk-head em { margin-left: auto; font-style: normal; font-weight: 900; font-size: 12px; color: #ffe27a; }
.pk-lot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid rgba(255,255,255,.7); }
.pk-slot { position: relative; height: 62px; display: flex; align-items: center; justify-content: center; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); cursor: pointer; }
.pk-slot:nth-child(4n+1) { border-left: 2px solid rgba(255,255,255,.7); }
.pk-slot img { width: 86%; max-height: 50px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)); }
.pk-slot.empty img { filter: grayscale(1) brightness(.35); }
.pk-slot i { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 5px; }
.chip.wchip em { font-style: normal; font-size: 10px; color: #9ff5a6; margin-left: 4px; }
.chip.hh { cursor: pointer; border-color: #ffc531; color: #ffe27a; }
.chip.hh:not(.on) { animation: badgepop 2.2s infinite; }
.chip.hh.on { background: linear-gradient(90deg, rgba(255,170,0,.85), rgba(200,90,0,.85)); color: #fff; }
.hhbig { width: 90px; height: 90px; object-fit: contain; margin-bottom: 6px; }
.chip.hh.wait { border-color: rgba(255,197,49,.35); color: #b9c6e6; opacity: .78; animation: none; }
.hhgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.hhgrid > div { background: rgba(10,20,48,.5); border: 1px solid rgba(255,197,49,.25); border-radius: 14px; padding: 10px 4px; text-align: center; }
.hhgrid img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 4px; }
.hhgrid b { display: block; color: #ffd978; font-size: 17px; line-height: 1.1; }
.hhgrid small { display: block; color: #9fb0d8; font-size: 11px; margin-top: 2px; }
.hhnow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 14px; font-size: 15px; color: #fff;
  background: linear-gradient(90deg, rgba(255,170,0,.85), rgba(200,90,0,.85)); box-shadow: 0 4px 14px rgba(255,150,0,.25); }
.hhnow img { width: 26px; height: 26px; object-fit: contain; }
.milcar { position: absolute; left: 44%; bottom: 33px; width: 70px; z-index: 5; cursor: pointer; transition: transform 1.2s ease-in, opacity 1.2s; }
.milcar > img { width: 100%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.milcar.leave { transform: translateX(320px); opacity: 0; }
.milbub { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 12px; background: #ffc531; color: #4a2a00; font-weight: 900; font-size: 14px; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5); animation: bob 1s ease-in-out infinite; }
.milbub img { width: 20px; height: 20px; }
.road { overflow: visible; }
/* пропуск */
.passtop { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 10px; border-radius: 16px; background: radial-gradient(circle at 15% 30%, #7a4fe0, #1a1450 80%); border: 1.5px solid #b07cff; }
.plv { width: 58px; height: 58px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, #fff1a8, #ffc531 55%, #e08a00); color: #4a2a00; border: 3px solid #fff; }
.plv b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.plv small { font-size: 9px; font-weight: 900; }
.pbar2 { position: relative; height: 18px; border-radius: 9px; background: #0a1236; overflow: hidden; margin-bottom: 4px; }
.pbar2 i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#d0a8ff, #7a4fe0); }
.pbar2 span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 900; line-height: 18px; }
.passtop .meta { font-size: 10px; color: #d8ccff; font-weight: 800; }
.passhead { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; margin: 10px 0 4px; font-size: 11px; font-weight: 900; color: #9fb0e0; text-align: center; }
.passhead .pr { color: #d0a8ff; }
.passlist { display: flex; flex-direction: column; gap: 5px; }
.prow { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: stretch; opacity: .65; }
.prow.open { opacity: 1; }
.pnum { display: grid; place-items: center; border-radius: 10px; font-family: var(--display); font-size: 14px; background: #16214f; color: #cfd9ff; }
.prow.open .pnum { background: linear-gradient(#ffdb5e, #f39c00); color: #4a2a00; }
.pcell { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #2f4390; font-size: 12px; font-weight: 900; }
.pcell:last-child { background: linear-gradient(#3a2a7a, #1e1450); border-color: #6a4fc0; }
.pcell img { width: 30px; height: 30px; object-fit: contain; }
.pcell.can { cursor: pointer; border-color: #7cf08f; box-shadow: 0 0 10px rgba(124,240,143,.45); animation: sipulse 1.4s infinite; }
.pcell.got { opacity: .55; }
.pcell i { position: absolute; right: 6px; font-style: normal; font-size: 12px; }
.milcar { bottom: 60px; left: 56%; z-index: 7; width: 64px; }
#parking { margin-bottom: 0; padding-bottom: 104px; }
#helipad { bottom: calc(100% - 6px); right: 2px; width: 58px; }
#helipad .heli { width: 54px; }

/* v0.21 — дуга першого ряду, відступ хаба */
.hrow.r1 .rn:nth-child(1), .hrow.r1 .rn:nth-child(5) { transform: translateY(6px) !important; }
.hrow.r1 .rn:nth-child(2), .hrow.r1 .rn:nth-child(4) { transform: translateY(-12px) !important; }
.hrow.r1 .rn:nth-child(3) { transform: translateY(-24px) !important; }
.roof-hub { gap: 20px; padding-top: 18px; margin-bottom: 14px; }
/* вертолітний майданчик */
#helipad { right: 6px; bottom: calc(100% + 4px); width: 96px; height: 70px; }
#helipad::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 20px;
  background: linear-gradient(60deg, transparent 45%, #9aa6cf 46% 54%, transparent 55%) 0 0 / 16px 100%, linear-gradient(-60deg, transparent 45%, #9aa6cf 46% 54%, transparent 55%) 0 0 / 16px 100%;
  border-top: 3px solid #c9d4f0; border-bottom: 3px solid #c9d4f0; }
#helipad .hpad { left: 0; right: 0; bottom: 10px; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, transparent 0 30%, #ffd23a 31% 34%, transparent 35%), radial-gradient(ellipse, #2a3566 0 62%, #ffd23a 63% 67%, #1a2350 68%);
  border: 2px solid #e2e9fb; box-shadow: 0 4px 8px rgba(0,0,0,.55), 0 0 12px rgba(63,211,255,.35); }
#helipad .hpad::before, #helipad .hpad::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3fd3ff; box-shadow: 0 0 6px #3fd3ff; animation: blink 1.6s infinite; }
#helipad .hpad::before { left: 4px; } #helipad .hpad::after { right: 4px; animation-delay: .8s; }
#helipad .hpad b { font-size: 12px; color: #fff; }
#helipad .heli { width: 88px; bottom: 16px; }
#helipad .htime { top: -8px; right: -4px; }
/* лотерея: плавне стирання монеткою */
.sc.just .cover { -webkit-mask-image: linear-gradient(120deg, #000 30%, rgba(0,0,0,.5) 45%, transparent 60%); mask-image: linear-gradient(120deg, #000 30%, rgba(0,0,0,.5) 45%, transparent 60%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%; animation: scratchSmooth 1.1s cubic-bezier(.45,.05,.35,1) forwards; animation-delay: var(--d, 0s); }
.sc.just::before { content: ''; position: absolute; z-index: 3; width: 34px; height: 34px; left: -20%; top: -20%; pointer-events: none;
  background: url(images/icons/coin.png) center / contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5));
  animation: coinScratch 1.1s cubic-bezier(.45,.05,.35,1) forwards; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes coinScratch { 0% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 10% { opacity: 1; }
  30% { transform: translate(60%, 90%) rotate(10deg); } 55% { transform: translate(150%, 30%) rotate(-10deg); } 80% { transform: translate(200%, 160%) rotate(15deg); opacity: 1; } 100% { transform: translate(260%, 220%); opacity: 0; } }
/* сезонний пропуск */
.ptrack { margin-top: 10px; border-radius: 18px; padding: 10px 0 8px; background: radial-gradient(ellipse at 50% 0, rgba(176,124,255,.25), transparent 60%), linear-gradient(#141a48, #0c1236); border: 1.5px solid #4a3a9a; }
.plabels { display: flex; justify-content: space-between; padding: 0 12px 6px; font-size: 11px; font-weight: 900; color: #9fb0e0; }
.plabels .pr { color: #ffd23a; }
.pscroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 8px; scroll-snap-type: x proximity; }
.pcol { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: center; opacity: .7; }
.pcol.open { opacity: 1; }
.pcol.big { width: 96px; }
.pnode { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 13px; color: #9fb0e0; background: #1a2350; border: 2px solid #3a4f9a; position: relative; }
.pnode::before, .pnode::after { content: ''; position: absolute; top: 50%; width: 30px; height: 4px; margin-top: -2px; background: #2a3566; z-index: -1; }
.pnode::before { right: 100%; } .pnode::after { left: 100%; }
.pcol.open .pnode { color: #4a2a00; background: radial-gradient(circle at 40% 30%, #fff1a8, #ffc531 60%, #e08a00); border-color: #fff; }
.pcol.open .pnode::before, .pcol.open .pnode::after { background: linear-gradient(90deg, #ffc531, #f39c00); }
.pcol.cur .pnode { box-shadow: 0 0 0 3px rgba(176,124,255,.6), 0 0 14px #b07cff; }
.pscard { position: relative; width: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: 16px; text-align: center; font-size: 11.5px; font-weight: 900; }
.pscard img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.pcol.big .pscard img { width: 56px; height: 56px; }
.pscard.prem { background: radial-gradient(circle at 50% 25%, #ffd76a, #b5740a 55%, #3a1e58 100%); border: 2px solid #ffe27a; color: #fff; text-shadow: 0 1px 2px #000; box-shadow: 0 0 12px rgba(255,197,49,.3); }
.pscard.free { background: radial-gradient(circle at 50% 25%, #3a5cc8, #141f4a 75%); border: 2px solid #4a62c8; }
.pscard.lock { filter: grayscale(.4) brightness(.75); }
.pscard.got { filter: brightness(.6); }
.pscard.can { cursor: pointer; animation: sipulse 1.4s infinite; box-shadow: 0 0 16px rgba(124,240,143,.7); border-color: #7cf08f; }
.pscard i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 12px; }
.pscard i.ok { color: #7cf08f; }
.mzskip { margin-bottom: 10px; }
.mzskip img { width: 20px; height: 20px; }
#bottombar { border-radius: 0; }
.roof-hub { margin-bottom: 70px; }
#build-btn.board { margin-bottom: -104px; }
.bd-legs { height: 108px; }
#helipad { right: 34px; }
#helipad .heli { left: 50%; bottom: 18px; transform: translate(-50%, -140px) scale(.6); margin-left: -2px; }
#helipad.landed .heli { transform: translate(-50%, 0) scale(1); }
#build-btn.board { width: 124px; }
.bd-screen img { width: 42px; height: 42px; }
.bd-screen span { font-size: 15px; }
.bd-price { font-size: 15px; padding: 2px 12px 2px 5px; }
#helipad { right: 16px; }
.pscroll { position: relative; gap: 0; }
.pcol { width: 92px; padding: 0 4px; }
.pcol.big { width: 104px; }
.pscard { height: 100px; min-height: 0; overflow: hidden; font-size: 10.5px; line-height: 1.15; }
.pnode { z-index: 1; }
.pnode::before, .pnode::after { width: 34px; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(#2a3566, #1a2350); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.pcol.big .pnode::before, .pcol.big .pnode::after { width: 40px; }
.pcol.open .pnode::before, .pcol.open .pnode::after { background: linear-gradient(#ffe27a, #f39c00); box-shadow: 0 0 6px rgba(255,197,49,.6); }
/* лотерея: монетка йде першою, шар стирається за нею */
.sc.just .cover { -webkit-mask-image: linear-gradient(135deg, transparent 0 46%, #000 54% 100%); mask-image: linear-gradient(135deg, transparent 0 46%, #000 54% 100%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  animation: scratchFollow 1.1s linear forwards; animation-delay: calc(var(--d, 0s) + .18s); }
@keyframes scratchFollow { from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.sc.just::before { left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; animation: coinFollow 1.1s linear forwards; animation-delay: var(--d, 0s); }
@keyframes coinFollow { 0% { opacity: 0; transform: translate(-10px, -10px) rotate(-25deg); } 8% { opacity: 1; }
  25% { transform: translate(30px, 12px) rotate(-5deg); } 45% { transform: translate(22px, 46px) rotate(10deg); } 65% { transform: translate(62px, 40px) rotate(-8deg); }
  85% { transform: translate(70px, 78px) rotate(12deg); opacity: 1; } 100% { transform: translate(100px, 100px) rotate(20deg); opacity: 0; } }
.sc.just img { animation-delay: calc(var(--d, 0s) + 1s); }
.sc.just::after { animation-delay: calc(var(--d, 0s) + .9s); }
.sc.just .cover { display: grid; opacity: 1 !important; transform: none !important; transition: none !important; }
.sc.just .cover { -webkit-mask-image: none !important; mask-image: none !important; animation: scratchClip 1s linear forwards !important; animation-delay: calc(var(--d, 0s) + .2s) !important; }
@keyframes scratchClip {
  0%   { clip-path: polygon(0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); } }
/* описи по центру */
.note, .note.small, .meta.desc, .sc-body .meta, .svc-head .meta, .askbox p, .mzrules, .soon p, .chinfo, .sc-foot { text-align: center; }
.sc-body, .svc-head { align-items: center; }


/* ---------- Доріжка до вежі ---------- */
.walkway { position: absolute; right: 128px; bottom: 78px; width: 70px; height: 118px; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.28), transparent 18px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%2398a0b4'/%3E%3Crect x='1' y='1' width='22' height='10' rx='1.5' fill='%23e3e7f0'/%3E%3Crect x='25' y='1' width='22' height='10' rx='1.5' fill='%23d4d9e4'/%3E%3Crect x='-11' y='13' width='22' height='10' rx='1.5' fill='%23d9dee8'/%3E%3Crect x='13' y='13' width='22' height='10' rx='1.5' fill='%23e8ebf2'/%3E%3Crect x='37' y='13' width='22' height='10' rx='1.5' fill='%23d9dee8'/%3E%3C/svg%3E") 0 0 / 24px 12px;
  border-left: 5px solid #5d6680; border-right: 5px solid #5d6680; box-shadow: inset 4px 0 4px rgba(0,0,0,.18), inset -4px 0 4px rgba(0,0,0,.18); }
.walkway::before, .walkway::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: #c9cfdc; }
.walkway::before { left: -3px; } .walkway::after { right: -3px; }
.walkway .mat { position: absolute; left: 10px; right: 10px; top: 3px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(90deg, #8a1f2f 0 3px, #a8263a 3px 6px); border: 1.5px solid #ffd36a; box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.walkway .inlay { position: absolute; left: 50%; top: 22px; bottom: 0; width: 10px; margin-left: -5px; background: repeating-linear-gradient(#3c4560 0 10px, #56607e 10px 12px); box-shadow: 0 0 0 1.5px #c9cfdc; }
.walkway .hg { position: absolute; top: 26px; bottom: 10px; width: 9px; border-radius: 5px; background: radial-gradient(circle at 50% 20%, #ff8fb8 0 1.6px, transparent 2.2px) 0 0 / 9px 14px, radial-gradient(circle at 50% 70%, #ffe066 0 1.6px, transparent 2.2px) 0 0 / 9px 14px, linear-gradient(90deg, #2a7426, #4fbf4a 50%, #2a7426); box-shadow: 0 2px 2px rgba(0,0,0,.35); }
.walkway .hg.l { left: 2px; } .walkway .hg.r { right: 2px; }
.walkway .bl { position: absolute; width: 5px; height: 12px; border-radius: 2px 2px 1px 1px; background: linear-gradient(#fff3b8 0 4px, #2e3550 4px); box-shadow: 0 -2px 7px rgba(255,220,120,.95); z-index: 1; }
.walkway .l1 { left: 13px; bottom: 6px; } .walkway .r1 { right: 13px; bottom: 6px; }
.walkway .l2 { left: 13px; top: 40px; } .walkway .r2 { right: 13px; top: 40px; }
/* ---------- Паркінг (вид зверху) ---------- */
.parking { position: absolute; left: 2px; bottom: 60px; width: 150px; height: 126px; z-index: 4; pointer-events: none; }
.pk-lot { position: absolute; left: 0; right: 0; top: 14px; bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 22px; border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.05) 0 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(#454b5f, #343a4c);
  border: 3px solid #c3c9d8; box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4); }
.pk-bay { position: relative; border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; }
.pk-bay:first-child { border-left: 2px solid rgba(255,255,255,.85); }
.pk-bay::before { content: ''; position: absolute; left: 50%; top: 3px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #ffd34d; }
.pk-bay[data-b="3"]::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px; background: #2f7ae0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5.5 1 3 5.5h2L4.5 9 7 4.5H5z' fill='white'/%3E%3C/svg%3E") center/70% no-repeat; opacity: .8; }
.pk-bay img { position: relative; z-index: 1; width: 26px; max-height: 92%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.6)); opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s ease; }
.pk-bay img.in { opacity: 1; transform: none; }
.pk-aisle { grid-column: 1 / -1; position: relative; }
.pk-aisle i { position: absolute; left: 8px; right: 30px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 14px); opacity: .7; }
.pk-aisle::after { content: '➜'; position: absolute; right: 8px; top: 2px; font-size: 13px; color: rgba(255,255,255,.7); transform: rotate(90deg); }
.pk-drive { position: absolute; right: 6px; bottom: -4px; width: 30px; height: 26px; background: linear-gradient(#3a3f4f, #2e3343); border-left: 2px solid #c3c9d8; border-right: 2px solid #c3c9d8; }
.pk-drive::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: repeating-linear-gradient(90deg, #ffd34d 0 4px, #222 4px 8px); opacity: .8; }
.pk-bar { position: absolute; left: -10px; top: 2px; width: 8px; height: 12px; border-radius: 2px; background: linear-gradient(#e0e6f5, #7d89ad); }
.pk-bar i { position: absolute; left: 4px; top: 3px; width: 36px; height: 4px; border-radius: 2px; transform-origin: left center; transform: rotate(-62deg); background: repeating-linear-gradient(90deg, #e0283f 0 6px, #fff 6px 12px); }
.pk-sign { position: absolute; left: 6px; top: -18px; width: 4px; height: 32px; background: linear-gradient(90deg, #4a5577, #c9d4f0, #4a5577); }
.pk-sign b { position: absolute; left: -9px; top: -20px; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font: 900 15px/1 var(--body); color: #fff; background: linear-gradient(#3a8bff, #1f5fd0); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.pk-ev { position: absolute; right: 2px; top: -2px; width: 12px; height: 18px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#2fb24a, #157a2a); border: 1.5px solid #e0f5e6; }
.pk-ev i { position: absolute; left: 2px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #9fe6ff; box-shadow: 0 0 6px #3fd3ff; animation: blink 1.6s infinite; }
.pk-hedge { position: absolute; left: 16px; right: 18px; top: 2px; height: 11px; border-radius: 6px 6px 2px 2px; background: radial-gradient(circle at 20% 40%, #58c24a 0 5px, transparent 6px) 0 0 / 11px 11px, linear-gradient(#3e9a35, #2a7426); }
#app.w-snow .pk-hedge, #app.w-snow .walkway .hg { filter: brightness(1.8) saturate(.3); }
.parking { z-index: 7; }
.pk-drive { bottom: -6px; height: 26px; }
.sidewalk { z-index: 6; }
.pk-led { position: absolute; left: 22px; top: -20px; display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; background: #0a0f24; border: 1.5px solid #6a759a; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.pk-led b { font: 900 10px/1 var(--body); color: #fff; background: #1f5fd0; border-radius: 3px; padding: 1px 3px; }
.pk-led span { font: 900 12px/1 var(--display); color: #7cf08f; text-shadow: 0 0 6px #3ccf5a; min-width: 9px; text-align: center; }
.pk-led::after { content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: 8px; margin-left: -1.5px; background: #6a759a; }
.pk-booth { position: absolute; right: 40px; bottom: 0; width: 22px; height: 24px; border-radius: 3px 3px 0 0; background: linear-gradient(#e7ebf3, #aab4cc); border: 1.5px solid #6a759a; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.pk-booth::before { content: ''; position: absolute; left: -3px; right: -3px; top: -5px; height: 5px; border-radius: 2px; background: linear-gradient(#ff6b7d, #c0182f); }
.pk-booth i { position: absolute; left: 3px; right: 3px; top: 4px; height: 9px; border-radius: 2px; background: linear-gradient(135deg, #bfe8ff, #4a8fd8); box-shadow: 0 0 5px rgba(160,220,255,.8); }
.pk-pole { position: absolute; top: 4px; width: 3px; height: 22px; background: linear-gradient(90deg, #4a5577, #c9d4f0); }
.pk-pole::before { content: ''; position: absolute; left: -4px; top: -4px; width: 11px; height: 5px; border-radius: 3px; background: #fff6c8; box-shadow: 0 0 10px 4px rgba(255,220,120,.55); }
.pk-pole.l { left: 3px; } .pk-pole.r { right: 18px; }
#app.night .pk-pole::before, #app.evening .pk-pole::before { box-shadow: 0 0 18px 8px rgba(255,220,120,.7); }

.mzshop { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mzs b { font-size: 11px; } .mzs > img { width: 34px; height: 34px; }
.mzs .tag { font-size: 8px; padding: 1px 5px; }
/* бокові колони вежі */
.floor { border-left-width: 8px; border-right-width: 8px;
  border-image: linear-gradient(90deg, #3a4670 0, #c9d4f0 18%, #f4f7ff 30%, #2a6fe0 42%, #3fd3ff 50%, #2a6fe0 58%, #f4f7ff 70%, #c9d4f0 82%, #3a4670 100%) 1; }
.floor::after { left: 0; right: 0; }
#shaft { border-left-width: 6px; border-right-width: 6px; border-image: linear-gradient(90deg, #3a4670, #c9d4f0 25%, #f4f7ff 45%, #3fd3ff 50%, #f4f7ff 55%, #c9d4f0 75%, #3a4670) 1; }
/* живі кнопки на даху */
@keyframes rnBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.06); } }
@keyframes rnGlow { 0%, 100% { filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); } 50% { filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,230,140,.75)); } }
.roof-hub .rn:not(.wiggle) > img { animation: rnBreath 3.2s ease-in-out infinite, rnGlow 3.2s ease-in-out infinite; }
.roof-hub .hrow .rn:nth-child(2) > img { animation-delay: -.6s, -.6s; }
.roof-hub .hrow .rn:nth-child(3) > img { animation-delay: -1.2s, -1.2s; }
.roof-hub .hrow .rn:nth-child(4) > img { animation-delay: -1.8s, -1.8s; }
.roof-hub .hrow .rn:nth-child(5) > img { animation-delay: -2.4s, -2.4s; }
.roof-hub .hrow.r2 .rn > img { animation-duration: 3.8s, 3.8s; }
.roof-hub .rn.cupbtn > img { animation: rnBreath 4s ease-in-out infinite, cupShine 2.6s ease-in-out infinite; }
@keyframes cupShine { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255,197,49,.5)) drop-shadow(0 4px 4px rgba(0,0,0,.4)); } 50% { filter: drop-shadow(0 0 22px rgba(255,214,90,.95)) drop-shadow(0 4px 4px rgba(0,0,0,.4)); } }
.roof-hub .rn small { transition: transform .2s; }
.roof-hub .rn:active small { transform: scale(.92); }
#build-btn.board .bd-screen { animation: boardPulse 2.8s ease-in-out infinite; }
@keyframes boardPulse { 0%, 100% { box-shadow: 0 0 0 2px #24348a, 0 0 16px rgba(63,211,255,.45), inset 0 0 12px rgba(63,211,255,.35); } 50% { box-shadow: 0 0 0 2px #24348a, 0 0 26px rgba(63,211,255,.85), inset 0 0 16px rgba(63,211,255,.55); } }
#build-btn.board .bd-price { animation: rnBreath 2.8s ease-in-out infinite; }
/* текстуровані колони вежі (поверх бордюрів поверхів) */
.floor { border-image: none; border-left: 10px solid #1a2350; border-right: 10px solid #1a2350; }
#floors::before, #floors::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; z-index: 6; pointer-events: none;
  background:
    radial-gradient(circle, #ffe27a 0 1.3px, #8a5a10 1.6px, transparent 2.2px) 50% 6px / 100% 22px repeat-y,
    linear-gradient(90deg, transparent 38%, rgba(63,211,255,.85) 46% 54%, transparent 62%),
    repeating-linear-gradient(transparent 0 40px, rgba(0,0,0,.35) 40px 41px, rgba(255,255,255,.18) 41px 42px),
    linear-gradient(90deg, #121a42 0, #2c3d86 25%, #8fa6e8 48%, #c9d6ff 52%, #2c3d86 75%, #121a42 100%);
  box-shadow: 0 0 6px rgba(0,0,0,.5); }
#floors::before { left: calc(var(--shaft)); }
#floors::after { right: 0; }
#floors::before, #floors::after { animation: colGlow 4s ease-in-out infinite; }
@keyframes colGlow { 50% { filter: brightness(1.15) saturate(1.2); } }
/* шахта: лише ліва колона в тому ж стилі */
#shaft { border-image: none !important; border-left: 10px solid #1a2350; border-right: 0; }
#shaft::after { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; z-index: 5; pointer-events: none;
  background:
    radial-gradient(circle, #ffe27a 0 1.3px, #8a5a10 1.6px, transparent 2.2px) 50% 6px / 100% 22px repeat-y,
    linear-gradient(90deg, transparent 38%, rgba(63,211,255,.85) 46% 54%, transparent 62%),
    repeating-linear-gradient(transparent 0 40px, rgba(0,0,0,.35) 40px 41px, rgba(255,255,255,.18) 41px 42px),
    linear-gradient(90deg, #121a42 0, #2c3d86 25%, #8fa6e8 48%, #c9d6ff 52%, #2c3d86 75%, #121a42 100%);
  animation: colGlow 4s ease-in-out infinite; }
#shaft { overflow: visible; }
#shaft > .rail, #shaft > #car { }
/* пошта й новини вгорі праворуч */
#side-left { right: 108px; }
#top-icons { position: absolute; right: 10px; top: calc(78px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); z-index: 6; display: flex; gap: 8px; }
.ticon { position: relative; width: 42px; height: 42px; border: none; padding: 0; cursor: pointer; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3a5cc8, #142060 75%); box-shadow: 0 0 0 2px #8fb0ff, 0 4px 8px rgba(0,0,0,.45), inset 0 0 8px rgba(63,211,255,.35); display: grid; place-items: center; }
.ticon img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.ticon b { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font: 900 11px/1 var(--body); color: #fff;
  background: radial-gradient(circle at 40% 30%, #2a4aa8, #0a1236); border: 2px solid #8fb0ff; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.ticon:active { transform: scale(.92); }
.mailrow, .newsrow { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #2f4390; }
.mailrow.new, .newsrow.new { border-color: #3fd3ff; box-shadow: 0 0 10px rgba(63,211,255,.3); }
.mailrow .mi, .newsrow > img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.mailrow .name, .newsrow .name { font-weight: 900; font-size: 14px; }
.mailrow .meta, .newsrow .meta { font-size: 12px; color: #cfd9ff; font-weight: 700; text-align: left; }
.mfrom { font-size: 10px; font-weight: 800; color: #8fa0d0; }
/* 7 кнопок у нижньому меню */
.nav { font-size: 9.5px; padding: 0; min-width: 0; }
.nav .tile { width: 42px; height: 40px; border-radius: 12px; }
.nav .tile img { width: 28px; height: 28px; }
.nav.big { flex: 1.3; }
.nav.big .disc { width: 64px !important; height: 64px !important; }
.nav.big .disc img { width: 40px !important; height: 40px !important; }
.nav .badge { right: calc(50% - 26px); }
.nav { font-size: 8.8px; letter-spacing: -.2px; white-space: nowrap; }
/* трос, прикріплений до кабіни, і механізм угорі шахти */
#car::before { bottom: calc(100% - 8px); width: 3px; background: linear-gradient(90deg, #4a5577, #e0e8ff, #4a5577); z-index: -1; }
#car::after { content: ''; position: absolute; left: 50%; top: 2px; width: 16px; height: 9px; margin-left: -8px; border-radius: 3px 3px 2px 2px; z-index: 2;
  background: linear-gradient(#e0e6f5, #6f7da8); border: 1.5px solid #2a3566; box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.motor { left: 2px; right: 2px; height: 34px; border-radius: 0 0 10px 10px; z-index: 4; overflow: visible;
  background: linear-gradient(90deg, #1a2350, #4a5788 30%, #8fa0d0 50%, #4a5788 70%, #1a2350); border-bottom: 3px solid #ffc531; box-shadow: 0 4px 8px rgba(0,0,0,.6); }
.motor::before { content: ''; position: absolute; left: 50%; top: 4px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle, #ffd23a 0 3px, #2a3566 3.5px 5px, transparent 5.5px), repeating-conic-gradient(#c9d4f0 0 18deg, #5d6a96 18deg 36deg);
  border: 3px solid #2a3566; box-shadow: 0 0 0 1.5px #c9d4f0, inset 0 0 4px rgba(0,0,0,.6); }
.motor::after { content: ''; position: absolute; left: 4px; top: 8px; width: 10px; height: 16px; margin: 0; border-radius: 2px; background: repeating-linear-gradient(#3a4670 0 2px, #1a2350 2px 4px); box-shadow: 30px 0 0 #000 inset; }
#shaft.moving .motor::before { animation: spin .6s linear infinite; }
#car::after { top: 15px; } #car::before { bottom: calc(100% - 18px); }
#car::before { display: none; }
#shaft .rope { position: absolute; left: 50%; top: 34px; width: 3px; margin-left: -1.5px; z-index: 2; background: linear-gradient(90deg, #4a5577, #e0e8ff, #4a5577); box-shadow: 0 0 2px rgba(0,0,0,.5); }
/* темно-сині замість білих */
.nav .tile { background: radial-gradient(circle at 50% 25%, #3a5cc8, #142060 80%); border: 2px solid #6f8fe0; box-shadow: 0 3px 0 #0a1236, 0 4px 8px rgba(0,0,0,.45), inset 0 0 8px rgba(63,211,255,.3); }
.fbtn.dim { background: radial-gradient(circle at 50% 30%, #3a5cc8, #1a2a6a 60%, #0f1a44); border: 2px solid #6f8fe0; box-shadow: 0 5px 0 #0a1236, 0 8px 14px rgba(0,0,0,.45), inset 0 0 10px rgba(63,211,255,.3); }
.fbtn.dim img { opacity: .9; }
.fbtn b { background: #142060; color: #fff; border: 1.5px solid #6f8fe0; }
.fbox { background: linear-gradient(#22357a, #131e4a); border: 2px solid #4a63c4; }
.fbox .hinfo b, .hinfo b { color: #fff; }
.hinfo .hsub { color: #9fb0e0; }
.sbar { background: #0a1236; }
.si.lock { background: #2a3566; border-color: #4a5788; }
/* механізм ліфта */
.motor { left: 0; right: 0; height: 44px; border-radius: 0 0 12px 12px; overflow: visible; border-bottom: none;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.06) 6px 7px), linear-gradient(#0f1640, #22307a 55%, #141f52); box-shadow: 0 5px 10px rgba(0,0,0,.6), inset 0 -2px 0 rgba(63,211,255,.4); }
.motor::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; top: auto; width: auto; height: 6px; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(45deg, #ffc531 0 5px, #1a1a22 5px 10px); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.motor::before { top: 6px; width: 30px; height: 30px; margin-left: -15px; border: 3px solid #0a1236;
  background: radial-gradient(circle, #ffd23a 0 3.5px, #0a1236 4px 6px, transparent 6.5px), repeating-conic-gradient(#d7e1ff 0 14deg, #4a5a98 14deg 30deg);
  box-shadow: 0 0 0 2px #8fb0ff, 0 0 10px rgba(63,211,255,.5), inset 0 0 5px rgba(0,0,0,.6); }
.motor .mg { position: absolute; left: 5px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #0a1236 0 3px, transparent 3.5px), repeating-conic-gradient(#9aa8d8 0 20deg, #2a3566 20deg 40deg); border: 2px solid #0a1236; box-shadow: 0 0 0 1px #6f8fe0; }
.motor .mp { position: absolute; right: 5px; top: 8px; width: 12px; height: 20px; border-radius: 3px; background: repeating-linear-gradient(#3a4670 0 2px, #0a1236 2px 4px); border: 1px solid #6f8fe0; }
.motor .ml { position: absolute; right: 8px; top: 31px; width: 6px; height: 6px; border-radius: 50%; background: #2fd35a; box-shadow: 0 0 6px #2fd35a; animation: blink 2s infinite; }
#shaft.moving .motor .mg { animation: spin .4s linear infinite reverse; }
#shaft.moving .motor .ml { background: #ffc531; box-shadow: 0 0 8px #ffc531; animation: blink .4s infinite; }
#shaft .rope { top: 36px; }
/* ---------- Екран завантаження ---------- */
#loader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #0a1236; transition: opacity .8s ease, transform .8s ease; }
#loader.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.ld-bg { position: absolute; inset: 0; background: url(images/splash.jpg) center 20% / cover no-repeat; animation: ldZoom 14s ease-in-out infinite alternate; }
@keyframes ldZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.ld-shade { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(6,10,40,.55) 75%, rgba(6,10,40,.92)); }
.ld-ver { position: absolute; left: 14px; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); padding: 4px 12px; border-radius: 12px; font-family: var(--display); font-size: 15px; color: #fff;
  background: linear-gradient(rgba(20,32,96,.85), rgba(10,18,54,.85)); border: 2px solid #ffd23a; box-shadow: 0 3px 8px rgba(0,0,0,.45); text-shadow: 0 2px 0 rgba(0,0,0,.4); letter-spacing: .5px; }
.ld-bottom { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 0 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-tip { font-family: var(--display); font-size: 17px; color: #fff; text-shadow: 0 2px 0 #0a1236, 0 0 12px rgba(63,211,255,.6); text-align: center; min-height: 22px; }
.ld-tip.in { animation: ldTip .5s ease; }
@keyframes ldTip { from { opacity: 0; transform: translateY(8px); } }
.ld-bar { position: relative; width: 100%; max-width: 420px; height: 26px; border-radius: 14px; background: rgba(6,10,40,.85); border: 2px solid #ffd23a; box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.6); overflow: hidden; }
.ld-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px; background: linear-gradient(#ffe27a, #ffc531 45%, #e08a00); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 12px rgba(255,197,49,.7); }
.ld-bar i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 8px, transparent 8px 16px); animation: ldStripe .8s linear infinite; }
@keyframes ldStripe { to { background-position: 22px 0; } }
.ld-bar span { position: relative; display: block; text-align: center; font-family: var(--display); font-size: 13px; line-height: 22px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.ld-company { align-self: flex-end; font-family: var(--display); font-size: 13px; color: #ffe27a; text-shadow: 0 2px 0 #0a1236; letter-spacing: .5px; padding: 3px 10px; border-radius: 10px; background: rgba(6,10,40,.6); border: 1px solid rgba(255,214,90,.5); }
.ld-company small { font-family: var(--body); font-weight: 800; font-size: 10px; color: #cfd9ff; margin-right: 3px; }
#loader { left: 50%; right: auto; width: 100%; max-width: 500px; transform: translateX(-50%); }
#loader.out { transform: translateX(-50%) scale(1.06); }
body { background: #070b22; }
/* лоадер: версія, компанія, затемнення */
.ld-ver { display: flex; flex-direction: column; align-items: center; padding: 5px 14px 6px; border-radius: 14px; line-height: 1;
  background: linear-gradient(160deg, rgba(42,74,168,.92), rgba(10,18,54,.92)); border: 2px solid #ffd23a; box-shadow: 0 0 0 2px rgba(10,18,54,.6), 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.ld-ver small { font: 800 9px/1 var(--body); color: #9fe6ff; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 3px; }
.ld-ver b { font-family: var(--display); font-weight: 400; font-size: 20px; color: #ffe27a; text-shadow: 0 2px 0 #8a4a00, 0 0 10px rgba(255,197,49,.6); }
.ld-company { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 14px; background: linear-gradient(160deg, rgba(42,74,168,.85), rgba(10,18,54,.9)); border: 1.5px solid rgba(255,214,90,.7); box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.ld-company i { width: 26px; height: 26px; border-radius: 8px; background: radial-gradient(circle at 40% 30%, #fff1a8, #ffc531 55%, #e08a00); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
.ld-company span { display: flex; flex-direction: column; line-height: 1.05; }
.ld-company small { font: 800 8.5px/1 var(--body); color: #9fb0e0; text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 2px; }
.ld-company b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; letter-spacing: .3px; }
.ld-company em { font-style: normal; color: #ffd23a; }
#loader::after { content: ''; position: absolute; inset: 0; background: #05081a; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
#loader.dark::after { opacity: 1; }
#fadein { position: fixed; left: 50%; top: 0; bottom: 0; width: 100%; max-width: 500px; transform: translateX(-50%); z-index: 9999; background: #05081a; opacity: 1; transition: opacity .9s ease; pointer-events: none; }
#fadein.go { opacity: 0; }
/* вазон у вестибюлі замість яблуні */
.potplant { position: absolute; left: 128px; bottom: 26px; width: 30px; height: 56px; z-index: 1;
  background: radial-gradient(ellipse at 50% 30%, #5fd35a 0 9px, transparent 10px), radial-gradient(ellipse at 25% 45%, #3fae3a 0 8px, transparent 9px), radial-gradient(ellipse at 75% 45%, #3fae3a 0 8px, transparent 9px), radial-gradient(ellipse at 50% 55%, #2a8a2a 0 9px, transparent 10px), linear-gradient(transparent 62%, #c9d4f0 62% 66%, #4a5788 66%, #2a3566);
  border-radius: 0 0 6px 6px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.ld-company { padding: 6px 14px; }
/* ---------- вхід / реєстрація ---------- */
#loader.authing .ld-bottom { opacity: 0; pointer-events: none; }
.auth { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 0 14px; z-index: 5; animation: up .45s ease; transition: opacity .35s, transform .35s; }
.auth.out { opacity: 0; transform: translateY(30px); }
.au-card { max-width: 420px; margin: 0 auto; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(34,55,138,.96), rgba(10,18,54,.97)); border: 2px solid #ffd23a; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.au-tabs button { padding: 9px; border: none; border-radius: 12px; cursor: pointer; font: 400 15px var(--display); color: #b9c6f0; background: #121d45; box-shadow: inset 0 0 0 1.5px #3a52a8; }
.au-tabs button.on { color: #4a2a00; background: linear-gradient(#ffdb5e, #f39c00); box-shadow: inset 0 0 0 2px #fff3c4; }
.au-title { text-align: center; font-family: var(--display); font-size: 17px; color: #ffe27a; margin-bottom: 8px; text-shadow: 0 2px 0 #0a1236; }
.au-card label { display: block; font-size: 12px; font-weight: 900; color: #cfd9ff; margin-bottom: 8px; }
.au-card input { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 1.5px solid #3a52a8; background: #0a1236; color: #fff; font: 800 15px var(--body); outline: none; }
.au-card input:focus { border-color: #3fd3ff; box-shadow: 0 0 0 3px rgba(63,211,255,.25); }
.au-err { min-height: 18px; text-align: center; font-size: 12.5px; font-weight: 900; color: #ff8fa0; margin-bottom: 6px; }
.au-note { margin-top: 8px; text-align: center; font-size: 11px; font-weight: 800; color: #9fb0e0; }
.netst { font-style: normal; font-size: 11px; font-weight: 900; color: #ff8fa0; }
.netst.on { color: #7cf08f; }
/* ---------- форум / чат / рейтинг ---------- */
.fchat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fmsg { display: flex; gap: 8px; align-items: flex-start; }
.fmsg.mine { flex-direction: row-reverse; }
.fav { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #6f8fe0; }
.fb { max-width: 78%; padding: 7px 10px; border-radius: 14px; background: linear-gradient(#22357a, #16224f); border: 1px solid #3a52a8; }
.fmsg.mine .fb { background: linear-gradient(#2a6a4a, #164a32); border-color: #3ccf5a; }
.fn { font-size: 11px; font-weight: 900; color: #ffe27a; } .fn small { color: #8fa0d0; font-weight: 800; }
.ft { font-size: 13px; font-weight: 700; color: #fff; word-wrap: break-word; white-space: pre-wrap; }
.fsend { position: sticky; bottom: -14px; display: flex; gap: 6px; padding: 8px 0; background: linear-gradient(transparent, #0f1a44 30%); }
.fsend input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #3a52a8; background: #0a1236; color: #fff; font: 800 14px var(--body); outline: none; }
.ftopic { padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; cursor: pointer; background: linear-gradient(#1f2f66, #141f4a); border: 1.5px solid #2f4390; }
.ftopic b { display: block; font-size: 14px; } .ftopic small { font-size: 11px; color: #9fb0e0; font-weight: 800; }
.ftitle { font-family: var(--display); font-size: 17px; color: #ffe27a; margin-bottom: 8px; text-align: center; }
.ftop { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.frow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #16214f; border: 1px solid #2f4390; font-weight: 900; }
.frow.me { border-color: #ffc531; box-shadow: 0 0 8px rgba(255,197,49,.4); }
.frow .fpos { width: 24px; text-align: center; font-family: var(--display); font-weight: 400; color: #ffe27a; }
.frow:nth-child(1) .fpos { color: #ffd23a; font-size: 18px; } .frow em { font-style: normal; color: #9ff5a6; font-size: 12px; }
/* ---------- продуктивність на мобільних ---------- */
html, body { height: 100%; height: 100dvh; overscroll-behavior: none; touch-action: manipulation; }
#app { height: 100%; height: 100dvh; }
@supports not (height: 100dvh) { #app { height: calc(var(--vh, 1vh) * 100); } }
#scroller { will-change: scroll-position; }
.floor { contain: layout style; }
.chip, #modal-bg { backdrop-filter: none; }
#modal { will-change: transform; }
/* фільтри більше не анімуються (дуже важко для слабких телефонів) — лише трансформації */
.roof-hub .rn:not(.wiggle) > img { animation: rnBreath 3.2s ease-in-out infinite !important; animation-delay: inherit; }
.roof-hub .rn.cupbtn > img { animation: rnBreath 4s ease-in-out infinite !important; filter: drop-shadow(0 0 10px rgba(255,197,49,.6)) drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
#floors::before, #floors::after, #shaft::after { animation: none !important; }
#car.call .cab { animation: callpulse 1s ease-in-out infinite; filter: drop-shadow(0 0 8px #ffc531); }
@keyframes callpulse { 50% { transform: scale(1.04); } }
#build-btn.board .bd-screen { animation: none; }
/* трос — частина кабіни, обрізається шахтою */
#shaft { overflow: hidden !important; }
#car .rope2 { position: absolute; left: 50%; bottom: calc(100% - 18px); width: 3px; height: 4000px; margin-left: -1.5px; z-index: -1; background: linear-gradient(90deg, #4a5577, #e0e8ff, #4a5577); }
.motor { z-index: 6; }
#shaft::after { display: none; }
#floors-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 7; pointer-events: none;
  background:
    radial-gradient(circle, #ffe27a 0 1.3px, #8a5a10 1.6px, transparent 2.2px) 50% 6px / 100% 22px repeat-y,
    linear-gradient(90deg, transparent 38%, rgba(63,211,255,.85) 46% 54%, transparent 62%),
    repeating-linear-gradient(transparent 0 40px, rgba(0,0,0,.35) 40px 41px, rgba(255,255,255,.18) 41px 42px),
    linear-gradient(90deg, #121a42 0, #2c3d86 25%, #8fa6e8 48%, #c9d6ff 52%, #2c3d86 75%, #121a42 100%); }
/* низька якість: без тіней-фільтрів */
#app.q-low img, #app.q-low .crew img, #app.q-low .rn > img, #app.q-low .tcar, #app.q-low .pcar { filter: none !important; }
#app.q-low .roof-hub .rn > img, #app.q-low .ld-bg { animation: none !important; }
#app.q-low .fpic { box-shadow: none; }
#app.q-mid .roof-hub .rn > img { animation-duration: 5s !important; }
/* екран «гра на іншому пристрої» */
#net-lock { position: fixed; inset: 0; z-index: 9998; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4,8,28,.88); }
#net-lock.show { display: flex; }
.nl-card { max-width: 340px; text-align: center; padding: 20px 16px; border-radius: 20px; background: linear-gradient(160deg, #22378a, #0a1236); border: 2px solid #ffd23a; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.nl-card img { width: 64px; height: 64px; object-fit: contain; }
.nl-card b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: #ffe27a; margin: 6px 0; }
.nl-card p { font-size: 13px; font-weight: 800; color: #cfd9ff; margin: 0 0 14px; }

/* ---------- індикатор синхронізації з базою ---------- */
#ti-sync svg { display: block; fill: currentColor; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
#ti-sync .ck { fill: none; stroke: #0d1738; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
#ti-sync.sync-ok { color: #4fe07a; } #ti-sync.sync-ok .ck { opacity: 1; }
#ti-sync.sync-wait { color: #ffc531; } #ti-sync.sync-wait svg { animation: syncPulse 1s ease-in-out infinite; }
#ti-sync.sync-off { color: #ff5a5a; } #ti-sync.sync-lock { color: #8fa3d9; }
@keyframes syncPulse { 50% { opacity: .45; } }
body.q-low #ti-sync.sync-wait svg { animation: none; }

/* ---------- інтер'єр поверху: замість коричневої підлоги — світла глянцева підлога в кольорі бізнесу ---------- */
.fpic {
  background:
    linear-gradient(transparent 76%, rgba(255,255,255,.95) 76%, rgba(255,255,255,.95) 77%, transparent 77%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.32) 34px 35px) 0 100% / 100% 23% no-repeat,
    linear-gradient(transparent 77%, color-mix(in srgb, var(--cat, #3a52a8) 22%, #e8eefc) 77%, color-mix(in srgb, var(--cat, #3a52a8) 38%, #b9c6e6)),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.22) 46px 48px) 0 0 / 100% 76% no-repeat,
    radial-gradient(ellipse 60% 70% at 70% 30%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--cat, #3a52a8) 30%, #f3f6ff), color-mix(in srgb, var(--cat, #3a52a8) 16%, #fff) 76%); }
/* працівники стоять «за кадром» знизу — обрізані ноги ховаються за рамкою */
.crew { bottom: -20px; }
.crew .cw > img:first-child, .crew img { height: 70px; }
.crew .cw .estar { top: 0; }

/* ---------- профіль гравця ---------- */
.pl-av, .pl-n, .dmhead { cursor: pointer; }
.pl-av { position: relative; overflow: visible; }
.pl-av .av { border-radius: 50%; }
.ondot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3ccf5a; border: 2px solid #0f1a44; }
.pl-n { text-decoration: underline dotted rgba(255,255,255,.4); text-underline-offset: 3px; }
.pp-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 10px 12px; margin-bottom: 10px; border-radius: 18px;
  background: radial-gradient(circle at 50% 0, #3a5cc8, #142060 75%); border: 1.5px solid #5a78e0; box-shadow: inset 0 0 18px rgba(63,211,255,.18); }
.pp-ava { position: relative; width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 3px #ffc531, 0 0 18px rgba(255,197,49,.45); margin-bottom: 8px; }
.pp-ava .ondot { width: 18px; height: 18px; right: 3px; bottom: 3px; border-width: 3px; }
.pp-name { font-family: var(--display); font-size: 20px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.pp-seen { font-size: 12px; font-weight: 800; margin-top: 2px; } .pp-on { color: #6bf08a; } .pp-off { color: #9fb2e8; }
.pp-since { font-size: 11px; color: #9fb2e8; font-weight: 700; margin-top: 2px; }
.pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.pp-grid > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; border-radius: 12px; background: #16214f; border: 1px solid #2f4390; }
.pp-grid img { width: 26px; height: 26px; object-fit: contain; }
.pp-grid b { font-family: var(--display); font-size: 14px; color: #ffe27a; font-weight: 400; }
.pp-grid small { font-size: 9.5px; color: #b9c8f2; font-weight: 800; line-height: 1.1; text-align: center; }
.pp-earn { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px; border-radius: 12px; background: #16214f; border: 1px solid #2f4390; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.pp-earn img { width: 22px; height: 22px; } .pp-earn b { color: #ffe27a; }
.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-btns .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding-left: 6px; padding-right: 6px; }
.pp-btns .btn:first-child { grid-column: 1 / -1; }
.pp-btns .btn img { width: 20px; height: 20px; object-fit: contain; }
.pp-btns .btn[disabled] { opacity: .45; filter: grayscale(.7); }
/* ---------- особисті повідомлення ---------- */
.dmopen { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.dmopen img { width: 22px; height: 22px; }
.dmrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: #16214f; border: 1px solid #2f4390; cursor: pointer; }
.dmrow.new { border-color: #b07cff; box-shadow: 0 0 10px rgba(176,124,255,.35); }
.dmrow .fav { width: 42px; height: 42px; }
.dmrow .grow { min-width: 0; }
.dmn { font-weight: 900; font-size: 14px; color: #fff; } .dmn small { color: #9fb2e8; font-weight: 700; font-size: 11px; margin-left: 4px; }
.dmt { font-size: 12px; color: #b9c8f2; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: #e0303c; color: #fff; font-size: 12px; }
.dmrow .btn img { width: 20px; height: 20px; }
.dmhead { position: sticky; top: -14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: -4px 0 10px; border-radius: 14px; background: #1b2a66; border: 1px solid #4a63c4; }
.dmhead .fav { width: 40px; height: 40px; } .dmhead b { display: block; font-size: 15px; } .dmhead small { font-size: 11px; color: #9fb2e8; font-weight: 800; }
.dmprof { font-size: 12px; font-weight: 900; color: #ffe27a; white-space: nowrap; }
#dm-list .fmsg .fb { max-width: 82%; } #dm-list .fn { text-align: right; } #dm-list .fn small { font-size: 10px; }
#dm-list .fmsg:not(.mine) .fn { text-align: left; }
/* ---------- поле вводу не ховається під клавіатурою ---------- */
.fsend input, .auth input { font-size: 16px !important; } /* iOS не збільшує сторінку */
body.kb-open #modal-bg { bottom: var(--kb, 0px); }
body.kb-open #modal { max-height: calc(var(--vvh, 100%) - 12px); }
body.kb-open .fsend { position: sticky; bottom: -14px; z-index: 3; }
body.kb-open .auth { bottom: calc(var(--kb, 0px) + 8px); }
.dmhead .grow, .dmrow .grow { flex: 1; }

/* ---------- табло «Виручка за годину» під VIP-завданнями (прикріплене до даху) ---------- */
.hrow.r3 .vipcol { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; align-self: flex-end; margin-bottom: -104px; }
.hrow.r3 .vipcol .rn { flex: none; width: 96px; margin-bottom: 8px; }
#rev-board { position: relative; width: 104px; display: flex; flex-direction: column; align-items: center; }
.rb-screen { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; gap: 4px; padding: 5px 5px 7px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, #135c3a, #0a2a24 70%); border: 3px solid #d7ffe6; box-shadow: 0 0 0 2px #14603a, 0 0 14px rgba(76,224,122,.45), inset 0 0 12px rgba(76,224,122,.3); }
.rb-screen img { width: 26px; height: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.rb-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.rb-txt small { font: 900 9px/1.1 var(--body); color: #b9f5cf; white-space: nowrap; }
.rb-txt b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; text-shadow: 0 0 6px rgba(76,224,122,.9); white-space: nowrap; transition: color .3s; }
.rb-rec { position: relative; z-index: 3; margin-top: -8px; padding: 1px 8px; border-radius: 10px; background: linear-gradient(#fff3a0, #ffc531); border: 2px solid #fff; box-shadow: 0 2px 0 #b5740a;
  font: 900 9px/1.3 var(--body); color: #5a3400; white-space: nowrap; } .rb-rec b { font-family: var(--display); font-weight: 400; font-size: 11px; }
#rev-board .bd-legs { height: 70px; width: 56%; }
#rev-board.up .rb-txt b { animation: revUp .9s ease; } #rev-board.down .rb-txt b { animation: revDown .9s ease; }
@keyframes revUp { 0% { color: #7dffa0; transform: scale(1.18); } 100% { color: #fff; transform: none; } }
@keyframes revDown { 0% { color: #ff9a9a; transform: scale(.9); } 100% { color: #fff; transform: none; } }
#app.q-low #rev-board.up .rb-txt b, #app.q-low #rev-board.down .rb-txt b { animation: none; }

/* ---------- бан ---------- */
#net-ban { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,8,28,.94); }
#net-ban .nl-card { border-color: #ff5a5a; }
/* ---------- профіль іншого гравця ---------- */
.pava.other { cursor: default; position: relative; overflow: visible; }
.pava.other .ondot { width: 16px; height: 16px; right: 0; bottom: 0; border-width: 3px; z-index: 2; }
.pname-st { display: block; font-family: var(--display); font-size: 19px; color: #fff; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pseen { font-size: 11.5px; font-weight: 800; margin: -1px 0 4px; }
.prof + .pchips, .psec + .pp-btns, .note + .pp-btns { margin-top: 10px; }
/* ---------- акції в новинах ---------- */
.promo-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 10px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--pc) 70%, #fff 10%), color-mix(in srgb, var(--pc) 35%, #0a1236) 70%); border: 2px solid color-mix(in srgb, var(--pc) 60%, #fff); box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 45%, transparent); }
.promo-card > img { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.promo-card .pc-tag { font-size: 10.5px; font-weight: 900; color: #ffe27a; text-transform: uppercase; letter-spacing: .3px; }
.promo-card .name { font-family: var(--display); font-size: 16px; color: #fff; }
.promo-card .meta { font-size: 12px; font-weight: 700; color: #e6ecff; }
.promo-card .vrew { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.adm-btn img { width: 30px !important; height: 30px !important; }
.adm-btn { background: radial-gradient(circle at 50% 30%, #ffd75a, #a8650a 75%) !important; box-shadow: 0 0 0 2px #fff3a0, 0 4px 8px rgba(0,0,0,.45), 0 0 14px rgba(255,197,49,.6) !important; }

/* ===================================================================
   АДМІН-ПАНЕЛЬ — окремий стиль «нічний пульт керування»
   =================================================================== */
#adm, .adm-float { --a-bg: #060a1c; --a-card: rgba(20,30,70,.72); --a-line: rgba(120,160,255,.18); --a-gold: #ffc531; --a-cyan: #3fd3ff; --a-txt: #e9eeff; --a-mut: #8e9cc8;
  position: absolute; inset: 0; z-index: 70; display: none; flex-direction: column; color: var(--a-txt); font-family: var(--body); background: var(--a-bg); }
#adm.show { display: flex; animation: admIn .28s ease; }
@keyframes admIn { from { opacity: 0; transform: translateY(14px); } }
.adm-bg { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(600px 300px at 100% 0, rgba(255,197,49,.14), transparent 70%), radial-gradient(500px 400px at 0 30%, rgba(63,211,255,.12), transparent 70%),
  linear-gradient(rgba(120,160,255,.05) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(120,160,255,.05) 1px, transparent 1px) 0 0 / 28px 100%; }
.adm-top { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(10px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))) 14px 10px; border-bottom: 1px solid var(--a-line);
  background: linear-gradient(180deg, rgba(255,197,49,.12), transparent); }
.adm-top > img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,197,49,.6)); }
.adm-top b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .5px; background: linear-gradient(90deg, #fff3a0, #ffc531); -webkit-background-clip: text; background-clip: text; color: transparent; }
.adm-top small { font-size: 11px; font-weight: 800; color: var(--a-mut); }
.adm-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--a-line); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; cursor: pointer; }
.adm-nav { position: relative; display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--a-line); flex: none; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-nav button { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: var(--a-mut); font: 900 12.5px var(--body); cursor: pointer; transition: all .2s; }
.adm-nav button img { width: 22px; height: 22px; object-fit: contain; }
.adm-nav button.on { color: #1a1200; background: linear-gradient(#fff3a0, #ffc531); border-color: #fff3a0; box-shadow: 0 0 14px rgba(255,197,49,.45); }
.adm-main { position: relative; flex: 1; overflow-y: auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.adm-main section { margin-bottom: 12px; }
.adm-card { padding: 12px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); backdrop-filter: blur(6px); }
.adm-card.glow { border-color: rgba(255,197,49,.45); box-shadow: 0 0 22px rgba(255,197,49,.12) inset; }
.adm-card h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.adm-card h3 small { font: 800 10.5px var(--body); color: var(--a-mut); }
.adm-load { display: flex; justify-content: center; gap: 6px; padding: 40px 0; } .adm-load i { width: 10px; height: 10px; border-radius: 50%; background: var(--a-gold); animation: admDot 1s infinite ease-in-out; }
.adm-load i:nth-child(2) { animation-delay: .15s; } .adm-load i:nth-child(3) { animation-delay: .3s; }
@keyframes admDot { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: none; } }
.adm-empty { padding: 18px; text-align: center; color: var(--a-mut); font-weight: 800; font-size: 13px; }
/* KPI */
.adm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpi { position: relative; padding: 10px 10px 10px 50px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-line); overflow: hidden; min-height: 62px; }
.kpi::after { content: ''; position: absolute; right: -20px; top: -20px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(rgba(63,211,255,.18), transparent 70%); }
.kpi img { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; object-fit: contain; }
.kpi span { display: block; font-size: 10.5px; font-weight: 900; color: var(--a-mut); text-transform: uppercase; letter-spacing: .3px; }
.kpi b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; color: #fff; line-height: 1.15; }
.kpi small { font-size: 10.5px; font-weight: 800; color: #6fe3a0; }
/* графіки */
.adm-grid2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .adm-grid2 { grid-template-columns: 1fr 1fr; } .adm-kpis { grid-template-columns: repeat(4, 1fr); } }
.adm-chart { position: relative; padding: 10px 10px 4px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); }
.adm-chart.empty { padding: 30px; text-align: center; color: var(--a-mut); font-weight: 800; font-size: 12px; }
.adm-ch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.adm-ch-head span { font-size: 11.5px; font-weight: 900; color: var(--a-mut); }
.adm-ch-head b { font-family: var(--display); font-weight: 400; font-size: 17px; color: #fff; }
.adm-chart svg { display: block; width: 100%; height: 130px; overflow: visible; touch-action: pan-y; }
.adm-chart .g { stroke: rgba(150,180,255,.12); stroke-width: 1; }
.adm-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.adm-chart text { fill: var(--a-mut); font: 800 9px var(--body); }
.adm-chart .hx { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.adm-chart .hd, .adm-chart .lastdot { stroke: var(--a-bg); stroke-width: 2; }
.adm-tip { position: absolute; top: 30px; transform: translateX(-50%); padding: 4px 8px; border-radius: 8px; background: #fff; color: #0a1236; pointer-events: none; opacity: 0; transition: opacity .15s; text-align: center; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.adm-tip.on { opacity: 1; } .adm-tip small { display: block; font: 800 9.5px var(--body); color: #5a6890; } .adm-tip b { font-family: var(--display); font-weight: 400; font-size: 14px; }
.adm-hbars .hb { display: grid; grid-template-columns: 82px 1fr 40px 34px; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.adm-hbars .hb span { color: var(--a-mut); } .adm-hbars i { height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.adm-hbars em { display: block; height: 100%; border-radius: 6px; min-width: 2px; } .adm-hbars b { text-align: right; } .adm-hbars small { color: var(--a-mut); text-align: right; }
/* списки */
.adm-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-line); cursor: pointer; transition: border-color .2s, transform .1s; }
.adm-row:active { transform: scale(.985); } .adm-row:hover { border-color: rgba(255,197,49,.4); } .adm-row.static { cursor: default; } .adm-row.dim { opacity: .55; }
.adm-row .grow { min-width: 0; } .adm-row b { display: block; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row small { display: block; font-size: 11px; font-weight: 800; color: var(--a-mut); } .adm-row .msg { display: block; font-size: 12.5px; font-weight: 700; color: #cfd9ff; word-break: break-word; }
.adm-row .pos { width: 22px; text-align: center; font-family: var(--display); font-weight: 400; color: var(--a-gold); flex: none; }
.adm-row .ri { width: 34px; height: 34px; object-fit: contain; flex: none; }
.av-s { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(120,160,255,.45); cursor: pointer; }
.av-l { position: relative; width: 72px; height: 72px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--a-gold), 0 0 18px rgba(255,197,49,.4); }
.av-s i.on, .av-l i.on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3ccf5a; border: 2px solid var(--a-bg); }
.av-l i.on { width: 16px; height: 16px; }
.id { font-weight: 800; color: var(--a-mut); font-size: 11px; } .onl { color: #6bf08a; }
.tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 6px; font: 900 9px/1.5 var(--body); font-style: normal; vertical-align: middle; background: rgba(255,255,255,.1); color: var(--a-mut); }
.tag.adm { background: linear-gradient(#fff3a0, #ffc531); color: #3d2200; } .tag.ban { background: #e0303c; color: #fff; } .tag.mute { background: #d4900a; color: #fff; }
.money-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.money { display: inline-flex; align-items: center; gap: 3px; font-family: var(--display); font-weight: 400; font-size: 12.5px; white-space: nowrap; }
.money img { width: 16px; height: 16px; object-fit: contain; } .money.b { color: #8ff5ad; } .money.c { color: #ffe27a; }
.adm-search { display: flex; gap: 8px; margin-bottom: 8px; } .adm-search input { flex: 1; min-width: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.adm-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: var(--a-mut); font: 900 12px var(--body); cursor: pointer; }
.adm-chips button.on { background: rgba(63,211,255,.18); border-color: var(--a-cyan); color: #fff; }
.adm-chips select { margin-left: auto; }
.adm-count { font-size: 12px; font-weight: 800; color: var(--a-mut); margin: 0 2px 8px; }
.adm-pager { display: flex; justify-content: center; align-items: center; gap: 14px; font-weight: 900; }
/* форми */
#adm input, #adm textarea, #adm select { box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(120,160,255,.3); background: rgba(5,10,30,.7); color: #fff; font: 800 16px var(--body); outline: none; transition: border-color .2s, box-shadow .2s; }
#adm select { font-size: 14px; padding: 8px 10px; }
#adm input:focus, #adm textarea:focus, #adm select:focus { border-color: var(--a-gold); box-shadow: 0 0 0 3px rgba(255,197,49,.18); }
#adm textarea { width: 100%; resize: vertical; }
.adm-f { display: block; margin-bottom: 10px; } .adm-f > span { display: block; font-size: 11.5px; font-weight: 900; color: var(--a-mut); margin: 0 0 4px 2px; } .adm-f > span small { font-weight: 700; }
.adm-f > input { width: 100%; }
.adm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .adm-2 input { width: 100%; font-size: 13px !important; }
.adm-b { padding: 10px 14px; border-radius: 12px; border: 0; font: 900 13px var(--body); cursor: pointer; color: #fff; background: rgba(255,255,255,.08); transition: transform .1s, filter .2s; }
.adm-b:active { transform: scale(.96); } .adm-b[disabled] { opacity: .4; }
.adm-b.gold { background: linear-gradient(#fff3a0, #ffc531); color: #2a1a00; box-shadow: 0 3px 0 #a8650a, 0 0 16px rgba(255,197,49,.3); }
.adm-b.danger { background: linear-gradient(#ff6b74, #c81e2a); box-shadow: 0 3px 0 #7a0d15; }
.adm-b.warn { background: linear-gradient(#ffb24a, #d4740a); box-shadow: 0 3px 0 #7a4200; }
.adm-b.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--a-line); }
.adm-b.wide { display: block; width: 100%; margin-top: 8px; } .adm-b.sq { width: 36px; height: 36px; padding: 0; flex: none; }
.adm-back { border: 0; background: none; color: var(--a-cyan); font: 900 13px var(--body); padding: 2px 0 10px; cursor: pointer; }
.adm-sw { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; font-weight: 800; font-size: 13px; }
.adm-sw input { display: none; } .adm-sw i { position: relative; width: 44px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.12); transition: background .2s; flex: none; }
.adm-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.adm-sw input:checked + i { background: linear-gradient(90deg, #ffc531, #ff9a1a); } .adm-sw input:checked + i::after { transform: translateX(20px); }
.adm-sw input:disabled + i { opacity: .5; }
/* гравець */
.adm-hero { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: radial-gradient(circle at 0 0, rgba(255,197,49,.18), transparent 60%), var(--a-card); border: 1px solid rgba(255,197,49,.3); }
.adm-hero b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; color: #fff; } .adm-hero small { display: block; font-size: 11.5px; font-weight: 800; color: var(--a-mut); margin-top: 1px; }
.adm-hero .tags { margin-top: 5px; } .adm-hero .tags .tag:first-child { margin-left: 0; } .adm-hero .reason { color: #ff9a9a; }
.adm-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.adm-stats4 div { text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--a-card); border: 1px solid var(--a-line); }
.adm-stats4 b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--a-gold); } .adm-stats4 small { font-size: 10.5px; font-weight: 800; color: var(--a-mut); }
.adm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-nums { display: grid; grid-template-columns: 1fr; gap: 8px; }
.adm-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-num > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; } .adm-num > span img { width: 24px; height: 24px; object-fit: contain; }
.adm-num > div { display: flex; align-items: center; gap: 4px; }
.adm-num input { width: 120px; text-align: center; padding: 8px 6px !important; font-family: var(--display) !important; font-weight: 400 !important; }
.adm-num button { width: 34px; height: 38px; border-radius: 10px; border: 1px solid var(--a-line); background: rgba(255,255,255,.06); color: #fff; font: 900 18px var(--body); cursor: pointer; }
.adm-hist div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--a-line); font-size: 12px; }
.adm-hist em { font-style: normal; font-weight: 900; color: var(--a-cyan); } .adm-hist span { color: #cfd9ff; font-weight: 700; word-break: break-word; } .adm-hist small { color: var(--a-mut); font-weight: 800; white-space: nowrap; }
.danger-zone { border-color: rgba(255,90,90,.35); } .danger-zone h3 { color: #ff9a9a; }
/* подарунки */
.adm-rw { display: flex; gap: 6px; margin-bottom: 6px; } .adm-rw select { flex: 1; min-width: 0; } .adm-rw input { width: 96px; text-align: center; }
.adm-preset { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.adm-preset button { display: flex; gap: 4px; padding: 5px 8px; border-radius: 10px; border: 1px dashed rgba(255,197,49,.45); background: rgba(255,197,49,.06); cursor: pointer; }
.rchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 3px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); font: 900 11.5px var(--body); color: #fff; }
.rchip img { width: 18px; height: 18px; object-fit: contain; }
.adm-dlg .rchips { justify-content: center; }
/* акції */
.adm-promo { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; border-radius: 16px; cursor: pointer;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--pc) 55%, transparent), transparent 70%), var(--a-card); border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent); }
.adm-promo > img { width: 46px; height: 46px; object-fit: contain; flex: none; } .adm-promo .grow { min-width: 0; }
.adm-promo b { display: block; font-size: 14.5px; color: #fff; } .adm-promo small { display: block; font-size: 11px; font-weight: 800; color: #cfd9ff; }
.adm-promo.big { cursor: default; padding: 16px; box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 35%, transparent); } .adm-promo.big > img { width: 60px; height: 60px; }
.adm-promo.big b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.pst { text-align: right; flex: none; } .st { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 900 10px/1.5 var(--body); font-style: normal; }
.st.live { background: #1f9a37; color: #fff; box-shadow: 0 0 10px rgba(60,207,90,.5); } .st.soon { background: #2a6fe0; color: #fff; } .st.end, .st.off { background: rgba(255,255,255,.12); color: var(--a-mut); }
.adm-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.adm-icons button { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); cursor: pointer; padding: 4px; }
.adm-icons button img { width: 100%; height: 100%; object-fit: contain; } .adm-icons button.on { border-color: var(--a-gold); background: rgba(255,197,49,.14); box-shadow: 0 0 10px rgba(255,197,49,.35); }
.adm-colors { display: flex; gap: 8px; flex-wrap: wrap; } .adm-colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.adm-colors button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--a-gold); }
/* журнал */
.adm-log { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: var(--a-card); border: 1px solid var(--a-line); }
.adm-log .grow { min-width: 0; } .adm-log b { display: block; font-size: 13px; } .adm-log small { display: block; font-size: 11px; font-weight: 700; color: var(--a-mut); word-break: break-word; }
.adm-log .who { text-align: right; flex: none; }
.lk { flex: none; min-width: 74px; text-align: center; padding: 3px 6px; border-radius: 8px; font: 900 10px var(--body); font-style: normal; background: rgba(63,211,255,.15); color: var(--a-cyan); }
.lk.ban, .lk.delete, .lk.reset { background: rgba(224,48,60,.2); color: #ff8a92; } .lk.give, .lk.promo { background: rgba(60,207,90,.18); color: #7dffa0; } .lk.mute { background: rgba(212,144,10,.2); color: #ffc46b; }
/* діалоги й тости */
.adm-dlg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,4,14,.75); animation: admIn .2s ease; }
.adm-dlg-card { width: 100%; max-width: 340px; padding: 18px 16px 14px; border-radius: 18px; background: linear-gradient(160deg, #1a2760, #0a1030); border: 1px solid rgba(255,197,49,.4); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.adm-dlg-card > b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; color: #fff; margin-bottom: 6px; }
.adm-dlg-card p { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #cfd9ff; } .adm-dlg-card input { width: 100%; margin: 8px 0 4px; }
.adm-dlg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.adm-chips.dur { justify-content: center; }
.adm-toast { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 6; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: #fff; color: #0a1236; font: 900 13px var(--body); box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: admIn .2s ease; transition: opacity .3s; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.adm-toast.bad { background: #e0303c; color: #fff; } .adm-toast.out { opacity: 0; }

.adm-top .grow { flex: 1; min-width: 0; }
.adm-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); } .adm-icons button { min-width: 0; }
.adm-2 { grid-template-columns: 1fr; } .adm-2 input { min-width: 0; }
@media (min-width: 420px) { .adm-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.prof > .grow { flex: 1; min-width: 0; }
.pava.other i.ondot { background: #3ccf5a; width: 16px; height: 16px; right: 2px; bottom: 2px; border: 3px solid #1b2a66; font-size: 0; }

/* ---------- парковка: трохи правіше, знак «P» намальований на асфальті в куті ---------- */
.parking { left: 16px; }
.pk-sign { display: none; }
.pk-led { left: 5px; top: auto; bottom: 20px; height: 18px; padding: 0 5px 0 3px; gap: 3px; border-radius: 4px; background: rgba(31,95,208,.78); border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 6px rgba(0,0,0,.25); transform: perspective(60px) rotateX(18deg); transform-origin: bottom; z-index: 2; }
.pk-led::after { display: none; }
.pk-led b { background: none; padding: 0; font-size: 12px; }
.pk-led span { font-size: 11px; color: #fff; text-shadow: none; opacity: .9; }
.pk-aisle i { left: 46px; }
/* ---------- ліхтарі світяться ввечері та вночі ---------- */
.lamp .lglow { position: absolute; left: 50%; top: -6px; width: 120px; height: 110px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 1.5s;
  background: radial-gradient(ellipse 50% 18% at 50% 100%, rgba(255,221,130,.55), transparent 70%), linear-gradient(rgba(255,226,140,.38), rgba(255,226,140,0) 95%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
#app.evening .lamp .lglow { opacity: .6; } #app.night .lamp .lglow { opacity: 1; }
#app.night .lamp, #app.evening .lamp { filter: brightness(1.65); }
#app.night .lamp::before { background: radial-gradient(circle at 50% 60%, #fff, #fff2b0 40%, #ffc640 75%); box-shadow: 0 0 30px 14px rgba(255,214,110,.75), 0 0 70px 30px rgba(255,200,80,.35); }
#app.day .lamp::before { background: radial-gradient(circle at 50% 60%, #e9eef8, #b9c4dc 50%, #7d89a8 80%); box-shadow: none; }
#app.q-low .lamp .lglow { mix-blend-mode: normal; }

/* ---------- адмінка: компактні плитки показників (іконка → назва → значення) ---------- */
.adm-kpis { gap: 6px; }
.kpi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 8px 6px 7px; min-height: 0; }
.kpi::after { right: -26px; top: -26px; }
.kpi img { position: static; transform: none; width: 24px; height: 24px; margin-bottom: 2px; }
.kpi span { font-size: 9.5px; line-height: 1.15; letter-spacing: .2px; min-height: 22px; display: flex; align-items: center; justify-content: center; }
.kpi b { font-size: 17px; line-height: 1.1; white-space: nowrap; }
.kpi small { font-size: 9.5px; line-height: 1.15; color: #6fe3a0; }
@media (min-width: 640px) { .adm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* покарання */
.adm-sanc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--a-line); }
.adm-sanc > img { width: 28px; height: 28px; object-fit: contain; flex: none; } .adm-sanc .grow { min-width: 0; }
.adm-sanc b { display: block; font-size: 13.5px; } .adm-sanc small { display: block; font-size: 11px; font-weight: 700; color: var(--a-mut); word-break: break-word; }
.adm-sanc.active { border-color: rgba(255,90,90,.5); background: rgba(224,48,60,.08); } .adm-sanc .act { color: #ff9a9a; font-weight: 900; }
.adm-sanc .adm-b { flex: none; padding: 8px 12px; }
.adm-dlg-err { min-height: 16px; color: #ff9a9a; font-weight: 800; font-size: 12px; }
.adm-dlg-card .adm-f { text-align: left; } .adm-dlg-card textarea { width: 100%; }
/* акції: типи, категорії, пакети */
.adm-ptypes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.adm-ptypes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; }
.adm-ptypes button img { width: 34px; height: 34px; object-fit: contain; } .adm-ptypes b { font-size: 13.5px; } .adm-ptypes small { font-size: 10.5px; font-weight: 800; color: var(--a-mut); }
.adm-ptypes button.on { border-color: var(--a-gold); background: rgba(255,197,49,.12); box-shadow: 0 0 14px rgba(255,197,49,.25); }
.adm-ptypes.mini button { border-style: dashed; border-color: rgba(255,197,49,.5); }
.adm-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.adm-cats button { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: var(--a-mut); font: 900 12px var(--body); cursor: pointer; text-align: left; }
.adm-cats button img { width: 22px; height: 22px; object-fit: contain; flex: none; } .adm-cats button.on { color: #fff; border-color: #ff6b74; background: rgba(224,48,60,.18); }
.adm-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.adm-packs button { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; min-height: 58px; justify-content: center; }
.adm-packs img { width: 28px; height: 28px; object-fit: contain; } .adm-packs b { font-size: 12px; } .adm-packs small { font-size: 9.5px; color: var(--a-mut); font-weight: 800; }
.adm-packs button.on { border-color: #4fe07a; background: rgba(60,207,90,.16); }
.pct-in { width: 74px !important; padding: 6px 8px !important; font-size: 14px !important; text-align: center; }
.pctv { color: var(--a-gold); font-family: var(--display); font-weight: 400; font-size: 14px; }
.ptype { display: inline-block; padding: 1px 6px; margin-bottom: 2px; border-radius: 5px; font: 900 9px/1.5 var(--body); font-style: normal; background: #e0303c; color: #fff; } .ptype.donate { background: #1f9a37; }
.adm-promo small.dim { opacity: .7; }
.adm-prev { margin-bottom: 12px; }
/* у грі: чипи акцій, бонуси донату */
.chip.promo { cursor: pointer; border-color: var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 85%, #000 0%), color-mix(in srgb, var(--pc) 55%, #0a1236)); animation: badgepop 2.6s infinite; }
.promo-card .pc-deal { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.35); font: 900 12px var(--body); color: #fff3a0; }
.don { position: relative; }
.don-bonus { position: absolute; right: -4px; top: -6px; z-index: 2; padding: 2px 7px; border-radius: 9px; background: linear-gradient(#ff6b74, #c81e2a); color: #fff; font: 900 12px/1.3 var(--display); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: badgepop 1.8s infinite; }
.don-plus { display: block; font-style: normal; font-size: 12px; color: #7dffa0; }
.don-timer { text-align: center; margin-top: 8px; }
.nl-card p.small { font-size: 11.5px; opacity: .8; }
.don-bonus { right: 4px; top: auto; bottom: 64px; font-size: 11px; padding: 1px 6px; }

/* ===================================================================
   ПК-версія: фон нічного міста з затемненими кутами та стильна рамка навколо екрана гри
   =================================================================== */
#pc-bg, #pc-frame { display: none; }
@media (min-width: 620px) and (min-aspect-ratio: 4/5) {
  html, body { background: #050a20; }
  #pc-bg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(5,10,32,0) 30%, rgba(5,10,32,.55) 70%, rgba(3,6,20,.92) 100%),
      linear-gradient(180deg, rgba(3,6,20,.35), rgba(3,6,20,0) 25%, rgba(3,6,20,0) 70%, rgba(3,6,20,.6)),
      url(images/images_backlogo.jpg) center / cover no-repeat; }
  #pc-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 34% 60% at 50% 50%, rgba(5,10,32,.55), transparent 75%); }
  #app { z-index: 1; height: calc(100dvh - 28px); margin-top: 14px; border-radius: 26px; max-width: 470px;
    box-shadow: 0 0 0 2px rgba(255,214,110,.85), 0 0 0 6px #0d1847, 0 0 0 8px rgba(120,190,255,.55), 0 0 40px 10px rgba(63,150,255,.35), 0 30px 80px rgba(0,0,0,.75); }
  #pc-frame { display: block; position: fixed; left: 50%; top: 14px; bottom: 14px; width: 470px; transform: translateX(-50%); z-index: 2; pointer-events: none; border-radius: 26px; }
  /* світні «колони» з боків */
  #pc-frame::before, #pc-frame::after { content: ''; position: absolute; top: 60px; bottom: 60px; width: 4px; border-radius: 2px;
    background: linear-gradient(transparent, #3fd3ff 20%, #fff 50%, #3fd3ff 80%, transparent); box-shadow: 0 0 14px 3px rgba(63,211,255,.6); animation: pcGlow 4s ease-in-out infinite; }
  #pc-frame::before { left: -14px; } #pc-frame::after { right: -14px; animation-delay: -2s; }
  @keyframes pcGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  /* золоті кутики */
  #pc-frame .c { position: absolute; width: 34px; height: 34px; border: 3px solid #ffd76a; filter: drop-shadow(0 0 6px rgba(255,200,80,.8)); }
  #pc-frame .tl { left: -11px; top: -11px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
  #pc-frame .tr { right: -11px; top: -11px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
  #pc-frame .bl { left: -11px; bottom: -11px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
  #pc-frame .br { right: -11px; bottom: -11px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
  #pc-frame .c::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff3a0; box-shadow: 0 0 8px 2px #ffc531; }
  #pc-frame .tl::after { left: -5px; top: -5px; } #pc-frame .tr::after { right: -5px; top: -5px; } #pc-frame .bl::after { left: -5px; bottom: -5px; } #pc-frame .br::after { right: -5px; bottom: -5px; }
  body.q-low #pc-frame::before, body.q-low #pc-frame::after { animation: none; }
}

/* ---------- адмінка: ігрові поля вибору, лічильники, навігація, журнал ---------- */
#adm input, #adm textarea { background: linear-gradient(#0a1238, #070d2a); border: 2px solid #2f4a9e; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05); border-radius: 14px; }
.asel { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 6px 10px 6px 6px; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: 900 14px var(--body);
  background: linear-gradient(#24388a, #15225e); border: 2px solid #4a6ad8; box-shadow: 0 3px 0 #0c1440, inset 0 1px 0 rgba(255,255,255,.18); transition: transform .1s; }
.asel:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c1440, inset 0 1px 0 rgba(255,255,255,.18); }
.asel img { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.asel span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asel .chev { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(#fff3a0, #ffc531); box-shadow: 0 2px 0 #a8650a; position: relative; }
.asel .chev::after { content: ''; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-right: 3px solid #5a3400; border-bottom: 3px solid #5a3400; transform: rotate(45deg); }
.adm-sortrow { margin: -2px 0 8px; } .adm-sortrow .asel { flex: none; width: 100%; }
.adm-rw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--a-line); }
.adm-rw .asel { flex: 1 1 130px; }
.astep { display: flex; align-items: center; flex: 1 1 130px; border-radius: 14px; overflow: hidden; border: 2px solid #4a6ad8; background: #070d2a; box-shadow: 0 3px 0 #0c1440; }
.astep button { flex: none; width: 36px; height: 40px; border: 0; color: #fff; font: 900 20px var(--body); background: linear-gradient(#2f4a9e, #1b2b6e); cursor: pointer; }
.astep button:active { filter: brightness(1.3); }
#adm .astep input { flex: 1; min-width: 0; width: 60px; border: 0; border-radius: 0; box-shadow: none; text-align: center; padding: 8px 2px; font-family: var(--display); font-weight: 400; background: transparent; }
.adm-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border-radius: 14px; border: 2px dashed rgba(255,197,49,.55); background: rgba(255,197,49,.06); color: #ffe27a; font: 900 13px var(--body); cursor: pointer; }
.adm-add b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#fff3a0, #ffc531); color: #5a3400; font-size: 16px; }
.adm-sheet-bg { position: absolute; inset: 0; z-index: 7; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,4,14,.7); animation: admIn .18s ease; }
.adm-sheet { width: 100%; max-width: 480px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: linear-gradient(160deg, #1d2d73, #0a1030); border: 2px solid rgba(255,197,49,.5); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
.adm-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .adm-sheet-h b { font-family: var(--display); font-weight: 400; font-size: 18px; color: #ffe27a; }
.adm-sheet-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.adm-sheet-g button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; border: 2px solid #3a54b8; background: linear-gradient(#22357f, #141f55); color: #fff; font: 900 12px var(--body); cursor: pointer; box-shadow: 0 3px 0 #0c1440; }
.adm-sheet-g button img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.adm-sheet-g button.on { border-color: #ffc531; background: linear-gradient(#5a4a12, #2a2008); box-shadow: 0 3px 0 #6a4a00, 0 0 14px rgba(255,197,49,.4); }
.adm-sheet-g button i { position: absolute; right: 6px; top: 4px; font-style: normal; color: #7dffa0; font-size: 14px; }
/* навігація сторінками */
.adm-pg { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 12px 0 2px; flex-wrap: wrap; }
.adm-pg button { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 12px; border: 2px solid #3a54b8; background: linear-gradient(#22357f, #141f55); color: #cfd9ff; font: 900 14px var(--body); cursor: pointer; box-shadow: 0 3px 0 #0c1440; }
.adm-pg button.cur { color: #3d2200; border-color: #fff3a0; background: linear-gradient(#fff3a0, #ffc531); box-shadow: 0 3px 0 #a8650a, 0 0 12px rgba(255,197,49,.5); }
.adm-pg button.arr, .adm-pg button.edge { color: #3fd3ff; } .adm-pg button[disabled]:not(.cur) { opacity: .3; cursor: default; }
.adm-pg button:not([disabled]):active { transform: translateY(2px); box-shadow: 0 1px 0 #0c1440; }
.adm-pg span { color: var(--a-mut); font-weight: 900; padding: 0 2px; }
.adm-pg-info { text-align: center; font-size: 11px; font-weight: 800; color: var(--a-mut); margin-bottom: 6px; }
/* журнал: зліва час, справа хто → кому, що зроблено */
.adm-logs { display: flex; flex-direction: column; gap: 6px; }
.lg { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: var(--a-card); border: 1px solid var(--a-line); }
.lg-time { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: rgba(63,211,255,.08); border-right: 1px solid var(--a-line); }
.lg-time b { font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; } .lg-time small { font-size: 10px; font-weight: 800; color: var(--a-mut); }
.lg-body { flex: 1; min-width: 0; padding: 7px 10px; display: flex; flex-direction: column; gap: 5px; }
.lg-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lg-p { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 46%; } .lg-p[data-player] { cursor: pointer; }
.lg-p b { font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-av { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(120,160,255,.55); overflow: hidden; display: grid; place-items: center; background: #16214f; }
.lg-av i { font-style: normal; font-size: 12px; }
.lg-arr { flex: none; font-style: normal; color: var(--a-gold); font-size: 12px; }
.lg-obj { font-size: 12.5px; font-weight: 900; color: #cfd9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lg-act { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lg-act .lk { min-width: 0; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; }
.lg-act .lk i { font-style: normal; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 10px; }
.lg-act span { font-size: 11.5px; font-weight: 700; color: var(--a-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lg.lk-ban, .lg.lk-delete, .lg.lk-reset { border-left: 3px solid #e0303c; } .lg.lk-give, .lg.lk-promo { border-left: 3px solid #3ccf5a; } .lg.lk-mute, .lg.lk-dmban { border-left: 3px solid #d4900a; } .lg.lk-edit { border-left: 3px solid #3fd3ff; }
.lk.dmban { background: rgba(212,144,10,.2); color: #ffc46b; } .lk.unban, .lk.unmute { background: rgba(60,207,90,.18); color: #7dffa0; }
.adm-rw .asel { flex: 1 1 calc(50% - 6px); font-size: 13px; }
.adm-rw:not(:has(.asel + .asel)) .asel { flex-basis: 100%; }
.adm-rw .astep { flex: 1 1 60%; }

/* ---------- рамка ПК: кутики точно повторюють заокруглення екрана гри ---------- */
@media (min-width: 620px) and (min-aspect-ratio: 4/5) {
  #pc-frame .c { width: 46px; height: 46px; border-width: 3px; }
  #pc-frame .tl { left: -9px; top: -9px; border-radius: 35px 0 0 0; } #pc-frame .tr { right: -9px; top: -9px; border-radius: 0 35px 0 0; }
  #pc-frame .bl { left: -9px; bottom: -9px; border-radius: 0 0 0 35px; } #pc-frame .br { right: -9px; bottom: -9px; border-radius: 0 0 35px 0; }
  #pc-frame .tl::after { left: 16px; top: -5px; } #pc-frame .tr::after { right: 16px; top: -5px; } #pc-frame .bl::after { left: 16px; bottom: -5px; } #pc-frame .br::after { right: 16px; bottom: -5px; }
}
/* ---------- чат: аватар, під ним час, темно-синя хмаринка ---------- */
.fchat { gap: 10px; }
.cm { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.cm.mine { flex-direction: row-reverse; }
.cm-side { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cm-side .fav { width: 38px; height: 38px; box-shadow: 0 0 0 2px #6f8fe0, 0 2px 6px rgba(0,0,0,.4); }
.cm.mine .cm-side .fav { box-shadow: 0 0 0 2px #ffc531, 0 2px 6px rgba(0,0,0,.4); }
.cm-side time { font: 900 9.5px/1.1 var(--body); color: #9fb2e8; text-align: center; white-space: nowrap; padding: 2px 5px; border-radius: 6px; background: rgba(8,14,40,.75); border: 1px solid #2f4390; }
.cm-bub { position: relative; min-width: 0; max-width: calc(100% - 60px); padding: 7px 11px 8px; border-radius: 4px 16px 16px 16px;
  background: linear-gradient(160deg, #1d2f72, #142158); border: 1.5px solid #34489a; box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.cm.mine .cm-bub { border-radius: 16px 4px 16px 16px; background: linear-gradient(160deg, #26408f, #1a2c6e); border-color: #4f6cd0; }
.cm-bub::before { content: ''; position: absolute; top: -1.5px; left: -8px; width: 10px; height: 12px; background: #1d2f72; border-top: 1.5px solid #34489a; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cm.mine .cm-bub::before { left: auto; right: -8px; background: #26408f; border-color: #4f6cd0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cm-nick { font: 900 12px var(--body); color: #ffe27a; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm.mine .cm-nick { color: #9fe8ff; text-align: right; }
.cm-text { font: 700 13.5px/1.35 var(--body); color: #eef2ff; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.cm-del { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #e0303c; color: #fff; font: 900 11px/1 var(--body); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.cm.mine .cm-del { right: auto; left: -8px; }
#dm-list .ft, .fmsg .ft { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
#dm-list .fmsg .fb { background: linear-gradient(160deg, #1d2f72, #142158); border: 1.5px solid #34489a; border-radius: 4px 16px 16px 16px; }
#dm-list .fmsg.mine .fb { background: linear-gradient(160deg, #26408f, #1a2c6e); border-color: #4f6cd0; border-radius: 16px 4px 16px 16px; }
/* ---------- власні смайлики ---------- */
img.emo { width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; object-fit: contain; }
.cm-text.jumbo img.emo { width: 38px; height: 38px; }
.fsend { position: sticky; align-items: center; }
.emo-btn { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid #3a52a8; background: linear-gradient(#22357f, #141f55); display: grid; place-items: center; cursor: pointer; padding: 0; }
.emo-btn img { width: 28px; height: 28px; object-fit: contain; }
.emo-pick { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6; padding: 8px; border-radius: 16px; background: linear-gradient(160deg, #1d2d73, #0a1238); border: 2px solid #ffc531; box-shadow: 0 -8px 24px rgba(0,0,0,.55); animation: up .18s ease; }
.emo-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .emo-h b { font-family: var(--display); font-weight: 400; font-size: 15px; color: #ffe27a; }
.emo-x { width: 30px; height: 30px; border-radius: 10px; border: 0; background: #e0303c; color: #fff; font: 900 13px var(--body); cursor: pointer; }
.emo-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 196px; overflow-y: auto; }
.emo-g button { aspect-ratio: 1; border: 0; border-radius: 10px; background: rgba(255,255,255,.05); padding: 3px; cursor: pointer; }
.emo-g button img { width: 100%; height: 100%; object-fit: contain; } .emo-g button:active, .emo-g button.pop { animation: emoPop .3s ease; background: rgba(255,197,49,.25); }
@keyframes emoPop { 50% { transform: scale(1.25); } }
/* ---------- подарунки ---------- */
.gshelf { cursor: pointer; } .gshelf .pst { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .gs-all { margin-left: auto; font: 900 12px var(--body); color: #ffe27a; }
.gs-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gs-it { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 35%, rgba(255,214,110,.25), rgba(10,18,54,.6) 70%); border: 1.5px solid #34489a; display: grid; place-items: center; padding: 3px; }
.gs-it img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.glist { display: flex; flex-direction: column; gap: 8px; }
.gcard { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, #1f2e70, #121c4e); border: 1.5px solid #4a63c4; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.gc-img { flex: none; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(255,214,110,.35), rgba(10,18,54,.7) 70%); border: 1.5px solid #ffc531; }
.gc-img img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.gcard .grow { min-width: 0; } .gc-name { font-family: var(--display); font-size: 15px; color: #fff; }
.gc-from { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 800 12px var(--body); color: #b9c8f2; flex-wrap: wrap; } .gc-from .fav { width: 24px; height: 24px; } .gc-from b { color: #ffe27a; cursor: pointer; }
.gc-from time { margin-left: auto; font-size: 10.5px; color: #8e9cc8; }
.gc-text { margin-top: 6px; padding: 6px 10px; border-radius: 4px 12px 12px 12px; background: rgba(8,14,40,.6); border: 1px solid #2f4390; font: 700 13px/1.35 var(--body); color: #eef2ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.gshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 10px; }
.gsi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 14px; border: 2px solid #34489a; background: linear-gradient(#1f2e70, #121c4e); color: #fff; cursor: pointer; }
.gsi > img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.gsi span { font: 800 10.5px/1.15 var(--body); text-align: center; min-height: 24px; display: flex; align-items: center; }
.gsi b { display: flex; align-items: center; gap: 2px; font-family: var(--display); font-weight: 400; font-size: 12.5px; color: #8ff5ad; } .gsi b img { width: 16px; height: 16px; }
.gsi.on { border-color: #ffc531; background: linear-gradient(#5a4a12, #2a2008); box-shadow: 0 0 14px rgba(255,197,49,.45); } .gsi.poor b { color: #ff9a9a; }
.gift-form { position: sticky; bottom: -14px; padding: 8px 0 4px; background: linear-gradient(transparent, #0f1a44 25%); }
.gift-form .fsend { position: relative; bottom: auto; padding: 0 0 6px; background: none; }
.ib { width: 18px; height: 18px; vertical-align: -3px; }
.gift-b img { width: 22px; height: 22px; }
.padm { border-color: rgba(255,197,49,.5) !important; } .padm-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .padm-b .btn { font-size: 13px; padding: 8px 6px; }
/* ---------- оголошення та технічні роботи ---------- */
#g-banner { position: absolute; left: 8px; right: 8px; top: calc(70px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); z-index: 8; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border-radius: 13px; overflow: hidden;
  background: linear-gradient(90deg, rgba(208,52,44,.92), rgba(122,79,224,.92)); border: 1.5px solid rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(0,0,0,.4); pointer-events: none; }
#g-banner > img { width: 20px; height: 20px; flex: none; }
.gb-run { flex: 1; overflow: hidden; white-space: nowrap; } .gb-run span { display: inline-block; padding-left: 100%; font: 900 12.5px/26px var(--body); color: #fff; animation: gbRun 16s linear infinite; }
.gb-run img.emo { width: 18px; height: 18px; }
@keyframes gbRun { to { transform: translateX(-100%); } }
#net-maint { position: absolute; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,8,28,.92); }
/* ---------- адмінка: нові розділи ---------- */
.adm-live { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 900; } .adm-live i { width: 10px; height: 10px; border-radius: 50%; background: #3ccf5a; box-shadow: 0 0 10px #3ccf5a; animation: admDot 1.4s infinite; }
.adm-live .adm-b { margin-left: auto; }
.adm-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: 10px; }
.adm-gtop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .adm-gtop div { text-align: center; } .adm-gtop img { width: 100%; max-width: 54px; aspect-ratio: 1; object-fit: contain; }
.adm-gtop b { display: block; color: var(--a-gold); font-family: var(--display); font-weight: 400; } .adm-gtop small { font-size: 9px; color: var(--a-mut); font-weight: 800; }
.lg-gift { width: 26px; height: 26px; object-fit: contain; flex: none; } .lg-del { align-self: center; margin-right: 8px; width: 30px !important; height: 30px !important; }
.lg-act span b { color: #fff; }
.adm-dbg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .adm-dbg div { text-align: center; padding: 6px 2px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--a-line); }
.adm-dbg b { display: block; font-family: var(--display); font-weight: 400; color: #fff; } .adm-dbg small { font-size: 9.5px; color: var(--a-mut); font-weight: 800; }
.adm-actions.three { grid-template-columns: 1fr; } .adm-hint { display: block; margin-top: -4px; font-size: 11px; color: var(--a-mut); font-weight: 700; }
.fsend-like input { width: 100%; }
.adm-float { position: absolute; inset: 0; z-index: 80; display: block !important; background: none; } .adm-float .adm-dlg { position: absolute; }
.adm-float textarea, .adm-float input { box-sizing: border-box; width: 100%; padding: 10px 12px; border-radius: 14px; border: 2px solid #2f4a9e; background: #070d2a; color: #fff; font: 800 16px var(--body); outline: none; }
#m-head { flex: none; }
#g-banner { top: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; z-index: 5; }

/* ---------- чат/форум на 85% висоти екрана ---------- */
#modal.tall { height: 85%; max-height: 85%; }
#modal.tall #m-body { flex: 1; }
.rtabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.rtab { font-size: 12px; padding-left: 2px; padding-right: 2px; }
/* смайлики відкриваються ПІД полем вводу й піднімають усе вгору (як у месенджерах) */
.fsend { flex-wrap: wrap; row-gap: 8px; }
.fsend .emo-pick { position: static; flex: 0 0 100%; order: 10; bottom: auto; left: auto; right: auto; margin: 0; border-radius: 16px; animation: emoIn .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
@keyframes emoIn { from { opacity: 0; transform: translateY(12px); } }
.fsend .emo-g { max-height: 210px; }
.emo-btn.on { border-color: #ffc531; box-shadow: 0 0 10px rgba(255,197,49,.5); }
/* ---------- профіль: блок дій угорі ---------- */
.pact { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pact .btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.pact .btn img { width: 22px; height: 22px; object-fit: contain; }
.pact-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pact .btn[disabled] { opacity: .45; filter: grayscale(.7); }
.pact .note { margin: 0; }
/* ---------- вкладка «Онлайн» ---------- */
.onl-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; font-weight: 900; font-size: 13px; color: #cfd9ff; } .onl-head b { color: #7dffa0; }
.onl-head i { width: 10px; height: 10px; border-radius: 50%; background: #3ccf5a; box-shadow: 0 0 10px #3ccf5a; animation: softglow 1.6s infinite; }
.frow .fav { position: relative; overflow: visible; } .frow .fav .av { border-radius: 50%; }
.frow .grow { min-width: 0; } .onl-sub { display: block; font-size: 10.5px; font-weight: 800; color: #8e9cc8; }
#modal.tall #m-body { min-height: 0; }
.frow .grow { flex: 1; }

/* ---------- чат: поле вводу завжди внизу, смайлики піднімають його разом із собою ---------- */
#modal.tall #m-body { display: flex; flex-direction: column; }
#modal.tall #m-body > * { flex-shrink: 0; }
#modal.tall #m-body > .fsend { margin-top: auto; }
#modal.tall #m-body > .fchat { margin-bottom: 10px; }
.pl-n { text-decoration: none !important; }
/* поле вводу і кнопка надсилання */
.fsend { gap: 8px; padding: 10px 0 6px; background: linear-gradient(transparent, #0f1a44 18%); }
.ce-in { flex: 1; min-width: 0; min-height: 22px; max-height: 96px; overflow-y: auto; padding: 10px 14px; border-radius: 22px; outline: none; cursor: text;
  background: linear-gradient(#0a1238, #08102e); border: 2px solid #34489a; color: #fff; font: 800 15px/1.35 var(--body); white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45); transition: border-color .2s, box-shadow .2s; -webkit-user-select: text; user-select: text; }
.ce-in:focus { border-color: #3fd3ff; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(63,211,255,.18); }
.ce-in:empty::before { content: attr(data-ph); color: #7d8bbd; pointer-events: none; }
.ce-in img.emo { width: 22px; height: 22px; vertical-align: -5px; }
.emo-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #34489a; background: radial-gradient(circle at 50% 30%, #2a3f94, #141f55 75%); box-shadow: 0 3px 0 #0a1236; }
.emo-btn img { width: 30px; height: 30px; }
.send-b { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff3a0; cursor: pointer; position: relative;
  background: radial-gradient(circle at 50% 30%, #ffe27a, #ff9a1a 75%); box-shadow: 0 3px 0 #a8650a, 0 0 14px rgba(255,197,49,.45); transition: transform .1s; }
.send-b:active { transform: scale(.9); }
.send-b i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -9px 0 0 -6px; border-left: 18px solid #5a2e00; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* смайлики по центру */
.emo-g { grid-template-columns: repeat(auto-fill, 42px); justify-content: center; }
/* поява нових повідомлень */
.cm-new { animation: msgIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.cm.mine.cm-new, .fmsg.mine.cm-new { animation-name: msgInMine; }
@keyframes msgIn { from { opacity: 0; transform: translate(-14px, 12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes msgInMine { from { opacity: 0; transform: translate(14px, 12px) scale(.94); } to { opacity: 1; transform: none; } }
#app.q-low .cm-new { animation-duration: .2s; }

/* ===================================================================
   КОРПОРАЦІЇ
   =================================================================== */
.crole { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 2px; margin: 2px 0; border-radius: 999px; font: 900 10.5px/1.5 var(--body); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); vertical-align: middle; }
.crole img { width: 18px; height: 18px; object-fit: contain; }
.crole.r4 { background: linear-gradient(90deg, #8a5a00, #c99a1c); border-color: #ffe27a; } .crole.r3 { background: linear-gradient(90deg, #5a2a9a, #7a4fe0); border-color: #b07cff; }
.crole.r2 { background: linear-gradient(90deg, #1b4fa8, #2a6fe0); border-color: #6fa6ff; } .crole.r1 { background: linear-gradient(90deg, #14603a, #1f9a37); border-color: #6bf08a; }
/* головна сторінка */
.cl-hero { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 12px; background: radial-gradient(ellipse at 50% 120%, #3fd3ff55, transparent 60%), linear-gradient(#0b1650, #1d2f8a 70%, #2a4fc0); border: 2px solid #4a6ad8; box-shadow: inset 0 0 30px rgba(63,211,255,.25); }
.cl-sky { position: relative; height: 150px; }
.cl-b { position: absolute; bottom: -6px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation: clRise .8s cubic-bezier(.2,.9,.3,1.2) both; }
.cl-b.b0 { left: 2%; width: 26%; animation-delay: .05s; } .cl-b.b1 { left: 20%; width: 24%; bottom: 4px; animation-delay: .15s; } .cl-b.b2 { left: 36%; width: 30%; bottom: 10px; z-index: 2; animation-delay: .25s; }
.cl-b.b3 { left: 58%; width: 24%; bottom: 4px; animation-delay: .35s; } .cl-b.b4 { left: 74%; width: 26%; animation-delay: .45s; }
@keyframes clRise { from { opacity: 0; transform: translateY(30px); } }
.cl-txt { position: relative; padding: 10px 14px 14px; background: linear-gradient(transparent, rgba(5,10,32,.85) 30%); }
.cl-txt b { font-family: var(--display); font-weight: 400; font-size: 22px; color: #ffe27a; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.cl-txt p { margin: 2px 0 0; font: 800 12.5px/1.35 var(--body); color: #dbe6ff; }
.cl-inv { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(90deg, rgba(255,197,49,.25), rgba(122,79,224,.25)); border: 2px solid #ffc531; animation: softglow 2s infinite; }
.cl-inv > img { width: 52px; height: 52px; object-fit: contain; } .cl-inv b { display: block; font-size: 15px; } .cl-inv small { color: #dbe6ff; font-weight: 800; }
.inv-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .inv-b .btn { padding: 7px 12px; font-size: 13px; }
.cl-bonus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cl-bonus > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; border-radius: 14px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; }
.cl-bonus img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.cl-bonus b { font: 900 13px var(--body); color: #fff; } .cl-bonus span { font: 800 11px/1.25 var(--body); color: #b9c8f2; } .cl-bonus em { font-style: normal; font: 900 11px var(--body); color: #7dffa0; margin-top: 2px; }
.cl-bonus.small img { width: 54px; height: 54px; }
.cl-role { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #2f4390; } .cl-role span { font: 700 12px/1.3 var(--body); color: #cfd9ff; } .cl-role .crole { flex: none; }
.cl-how > div { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .cl-how img { width: 38px; height: 38px; object-fit: contain; flex: none; } .cl-how span { font: 700 12.5px/1.35 var(--body); color: #dbe6ff; }
.cl-create { margin-top: 6px; }
.cc-prev { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: #16214f; border: 1.5px solid #34489a; }
.cc-prev > img { width: 70px; height: 70px; object-fit: contain; } .cc-prev small { font: 900 11px var(--body); color: #9fb2e8; }
.cc-prev input { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 2px solid #34489a; background: #0a1236; color: #fff; font: 900 16px var(--body); outline: none; }
.cemb { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.cemb button { aspect-ratio: 1; padding: 3px; border-radius: 12px; border: 2px solid #2f4390; background: #111b4a; cursor: pointer; } .cemb img { width: 100%; height: 100%; object-fit: contain; }
.cemb button.on { border-color: #ffc531; background: rgba(255,197,49,.18); box-shadow: 0 0 10px rgba(255,197,49,.5); }
/* сторінка корпорації */
.cp-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; margin-bottom: 10px; background: radial-gradient(circle at 0 50%, rgba(255,197,49,.25), transparent 60%), linear-gradient(#1d2f72, #111b4a); border: 2px solid #4a6ad8; flex-wrap: wrap; }
.cp-em { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.cp-head .grow { min-width: 0; } .cp-head b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-meta { display: flex; gap: 8px; font: 900 11.5px var(--body); color: #b9c8f2; margin: 2px 0; }
.cp-bud { display: flex; flex-direction: column; gap: 4px; margin-left: auto; } .cp-bud span { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.35); font-family: var(--display); font-size: 13px; color: #fff; } .cp-bud img { width: 18px; height: 18px; }
.ctabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.ctabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 1.5px solid #34489a; background: linear-gradient(#1b2a66, #111b4a); color: #b9c8f2; font: 900 10px var(--body); cursor: pointer; }
.ctabs img { width: 28px; height: 28px; object-fit: contain; } .ctabs button.on { color: #3d2200; background: linear-gradient(#fff3a0, #ffc531); border-color: #fff3a0; }
.cbld { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; }
.cbld.zero .cb-img img { filter: grayscale(.6) brightness(.8); }
.cb-img { position: relative; flex: none; width: 76px; height: 76px; } .cb-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.cb-lv { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: #0a1236; border: 1.5px solid #ffc531; font: 900 10.5px/1.5 var(--display); color: #ffe27a; white-space: nowrap; }
.cbld .grow { min-width: 0; } .cbld b { font: 900 14px var(--body); color: #fff; } .cb-bonus { font: 900 12px var(--body); color: #7dffa0; } .cb-next { font: 700 11px var(--body); color: #9fb2e8; } .cb-next.max { color: #ffe27a; }
.cb-bar { position: relative; height: 10px; margin: 4px 0; border-radius: 6px; background: #0a1236; overflow: hidden; border: 1px solid #2f4390; } .cb-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3fd3ff, #7dffa0); border-radius: 6px; }
.cb-bar span { position: relative; display: block; text-align: center; font: 900 9px/10px var(--body); color: #fff; text-shadow: 0 1px 2px #000; }
.ctask .cb-bar { height: 14px; } .ctask .cb-bar span { line-height: 14px; font-size: 10px; }
.cbld .btn { flex: none; display: flex; align-items: center; gap: 3px; padding: 8px 10px; font-size: 13px; } .cbld .btn[disabled] { opacity: .5; }
.cmem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: #16214f; border: 1px solid #2f4390; }
.cmem .fav { width: 42px; height: 42px; position: relative; overflow: visible; } .cmem .grow { min-width: 0; } .cmem b { display: block; font: 900 14px var(--body); color: #fff; cursor: pointer; }
.cmem small { display: block; font: 800 10.5px var(--body); color: #9fb2e8; } .cm-act { display: flex; gap: 4px; } .cm-act .btn { padding: 6px 9px; font-size: 12px; }
.ctask { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; }
.ctask.in { border-color: #3ccf5a; box-shadow: 0 0 12px rgba(60,207,90,.3); } .ctask > img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ctask .grow { min-width: 0; } .ctask b { font: 900 13px var(--body); color: #fff; } .ctask small { display: block; font: 800 11px var(--body); color: #9fb2e8; } .ctask small b { color: #ffe27a; font-size: 11px; }
.ctask .vrew { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .ctask .btn { flex: none; padding: 8px 12px; font-size: 13px; }
.ct-in { flex: none; font: 900 11px var(--body); color: #7dffa0; text-align: center; max-width: 70px; }
.ccoll { padding: 8px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; } .ccoll.full { border-color: #ffc531; box-shadow: 0 0 14px rgba(255,197,49,.35); }
.cc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .cc-h img { width: 34px; height: 34px; } .cc-h b { font: 900 13px var(--body); color: #fff; flex: 1; } .cc-h em { font-style: normal; font: 900 12px var(--body); color: #ffe27a; }
.cc-h .btn { padding: 6px 10px; font-size: 12px; }
.cc-g { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .cc-g > div { position: relative; } .cc-g img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.cc-g > div.off img { filter: grayscale(1) brightness(.35); } .cc-g b { position: absolute; right: -2px; bottom: -2px; padding: 0 4px; border-radius: 6px; background: #ffc531; color: #3d2200; font: 900 9px/1.4 var(--body); }
.cbud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.cbud > div { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; }
.cbud img { width: 40px; height: 40px; } .cbud b { font-family: var(--display); font-weight: 400; font-size: 18px; color: #fff; } .cbud small { font: 800 10.5px var(--body); color: #9fb2e8; }
.cdon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cdon img { width: 30px; height: 30px; flex: none; }
.cdon input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid #34489a; background: #0a1236; color: #fff; font: 900 16px var(--display); outline: none; } .cdon small { flex: none; font: 800 10.5px var(--body); color: #9fb2e8; text-align: right; max-width: 92px; }
.clog > div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #2f4390; font-size: 12px; }
.clog em { font-style: normal; font-weight: 900; color: #3fd3ff; } .clog span { color: #dbe6ff; font-weight: 700; overflow-wrap: anywhere; } .clog small { color: #8e9cc8; font-weight: 800; white-space: nowrap; }
.crp { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; margin-bottom: 6px; padding: 10px; border-radius: 14px; border: 1.5px solid #34489a; background: #16214f; color: #fff; text-align: left; cursor: pointer; }
.crp.on { border-color: #ffc531; } .crp small { font: 700 11.5px var(--body); color: #b9c8f2; } .crp em { font-style: normal; font: 900 11px var(--body); color: #ffc531; }
.pcorp { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 4px; padding: 2px 10px 2px 2px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid #4a63c4; font: 900 12px var(--body); color: #fff; cursor: pointer; }
.pcorp img { width: 24px; height: 24px; object-fit: contain; } .pcorp small { color: #ffe27a; font-size: 10px; }
/* рейтинг/онлайн: підвкладки та сторінки */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.seg2 button { padding: 8px; border-radius: 12px; border: 1.5px solid #34489a; background: #16214f; color: #b9c8f2; font: 900 13px var(--body); cursor: pointer; }
.seg2 button.on { background: linear-gradient(#3fd3ff, #2a6fe0); color: #fff; border-color: #9fe8ff; }
.ctop-em { width: 34px; height: 34px; object-fit: contain; flex: none; } .fpos img.medal { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.onl-sub img.ib { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.gpg { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 10px 0 4px; flex-wrap: wrap; }
.gpg button { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 11px; border: 2px solid #3a54b8; background: linear-gradient(#22357f, #141f55); color: #cfd9ff; font: 900 13px var(--body); cursor: pointer; box-shadow: 0 3px 0 #0c1440; }
.gpg button.cur { color: #3d2200; border-color: #fff3a0; background: linear-gradient(#fff3a0, #ffc531); box-shadow: 0 3px 0 #a8650a; } .gpg button.arr, .gpg button.edge { color: #3fd3ff; }
.gpg button[disabled]:not(.cur) { opacity: .3; } .gpg span { color: #8e9cc8; font-weight: 900; }
.mailrow .inv-b { flex-direction: column; } .mailrow .inv-b .btn { padding: 6px 10px; font-size: 12px; }
.cc-g > div.off img { opacity: .28; filter: grayscale(1) !important; }
.cc-g > div:not(.off) img { box-shadow: 0 0 8px rgba(255,214,110,.45); }

/* ---------- корпорації v2 ---------- */
.ctabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-row { display: flex; align-items: center; gap: 6px; font: 800 12px var(--body); color: #b9c8f2; margin: 2px 0; } .cp-row img { width: 20px; height: 20px; object-fit: contain; } .cp-row b { color: #fff; font-size: 13px; }
.cmem2 { padding: 10px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(160deg, #1d2f72, #111b4a); border: 1.5px solid #34489a; }
.cm2-top { display: flex; align-items: center; gap: 10px; } .cm2-top .fav { width: 46px; height: 46px; position: relative; overflow: visible; flex: none; }
.cm2-top .grow { min-width: 0; } .cm2-top b { display: block; font: 900 15px var(--body); color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm2-lv { font: 900 11px var(--body); color: #ffe27a; }
.cm2-act { display: flex; flex-direction: column; gap: 5px; margin-left: auto; flex: none; } .cm2-act .btn { padding: 6px 10px; font-size: 12px; min-width: 96px; }
.cm2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.cm2-stats > div { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: rgba(5,10,32,.55); border: 1px solid #2f4390; }
.cm2-stats img { width: 24px; height: 24px; object-fit: contain; } .cm2-stats b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; } .cm2-stats small { font: 800 9.5px var(--body); color: #9fb2e8; text-align: center; }
/* споруди */
.cbld2 { display: flex; gap: 10px; padding: 10px; margin-bottom: 10px; border-radius: 18px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 0 100%, rgba(63,211,255,.22), transparent 55%), linear-gradient(160deg, #1f3480, #0e1744); border: 2px solid #3c58c4; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.cbld2.boosted { border-color: #b07cff; box-shadow: 0 0 18px rgba(176,124,255,.45), inset 0 0 20px rgba(176,124,255,.15); }
.cbld2.zero .cb2-art img { filter: grayscale(.7) brightness(.7); }
.cb2-art { position: relative; flex: none; width: 92px; height: 104px; display: flex; align-items: flex-end; justify-content: center; }
.cb2-glow { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(63,211,255,.55), transparent 70%); }
.cb2-art img { position: relative; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.cb2-lv { position: absolute; top: 0; left: 0; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffe27a, #c98a0a); border: 2px solid #fff; color: #3d2200; font: 400 13px/1 var(--display); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cbld2 .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb2-name { font-family: var(--display); font-size: 16px; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x2 { font-style: normal; padding: 1px 7px; border-radius: 8px; background: linear-gradient(#b48cff, #7040e8); font: 900 10.5px/1.5 var(--body); color: #fff; animation: badgepop 2s infinite; }
.cb2-bonus { font: 900 12.5px var(--body); color: #7dffa0; } .cb2-next { font: 700 11px var(--body); color: #9fb2e8; }
.cb2-pips { display: grid; grid-template-columns: repeat(30, 1fr); gap: 1.5px; } .cb2-pips i { height: 6px; border-radius: 2px; background: #0a1236; border: 1px solid #253a86; }
.cb2-pips i.on { background: linear-gradient(#7dffa0, #3fd3ff); border-color: #9fe8ff; }
.cb2-btns { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .cb2-btns .btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 7px 6px; font-size: 12px; white-space: nowrap; }
.cb2-btns .btn[disabled] { opacity: .45; }
/* колекції по черзі */
.ccol-top { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; background: #16214f; border: 1px solid #2f4390; font: 800 12px var(--body); color: #b9c8f2; } .ccol-top b { color: #ffe27a; }
.ccol-act { padding: 12px; margin-bottom: 10px; border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(255,197,49,.2), transparent 60%), linear-gradient(160deg, #22377f, #111b4a); border: 2px solid #ffc531; box-shadow: 0 0 18px rgba(255,197,49,.25); }
.cca-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cca-h img { width: 46px; height: 46px; } .cca-h b { display: block; font-family: var(--display); font-size: 17px; color: #fff; } .cca-h small { font: 800 11.5px var(--body); color: #ffe27a; }
.cca-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.cca-g > div { position: relative; border-radius: 14px; overflow: hidden; } .cca-g img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; opacity: .32; filter: grayscale(1) !important; transition: all .3s; }
.cca-g > div.got img { opacity: 1; filter: none !important; box-shadow: 0 0 10px rgba(255,214,110,.5); }
.cca-g i { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #3ccf5a; color: #fff; font: 900 11px/18px var(--body); text-align: center; font-style: normal; }
.cca-rw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 800 12px var(--body); color: #dbe6ff; } .cca-rw span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; font-family: var(--display); }
.cca-rw img { width: 16px; height: 16px; } .cca-rw small { width: 100%; color: #7dffa0; font-weight: 900; }
.ccol-lock { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 14px; background: #1a1f33; border: 1px solid #333a55; filter: grayscale(.85); opacity: .75; }
.ccol-lock > img { width: 34px; height: 34px; } .ccol-lock b { display: block; font: 900 13px var(--body); color: #c9cfe0; } .ccol-lock small { font: 800 10.5px var(--body); color: #8e94a8; }
.ccl-rw { display: flex; align-items: center; gap: 3px; font: 800 10.5px var(--body); color: #c9cfe0; white-space: nowrap; } .ccl-rw img { width: 14px; height: 14px; }
/* бюджет */
.cbud2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cbx { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 18px; background: linear-gradient(160deg, #1f3480, #0e1744); border: 2px solid #3c58c4; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.cbx.b { border-color: #3ccf5a; } .cbx.c { border-color: #ffc531; } .cbx.x { grid-column: 1 / -1; border-color: #3fd3ff; }
.cbx > img { width: 44px; height: 44px; object-fit: contain; flex: none; } .cbx b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: #fff; } .cbx small { font: 800 10.5px var(--body); color: #9fb2e8; }
.cbx .cb-bar { margin-top: 6px; height: 10px; } .cbx.x .grow { min-width: 0; flex: 1; }
.cdon2 { margin-top: 12px; padding: 14px 12px; border-radius: 18px; background: #16214f; border: 1.5px solid #34489a; } .cdon2 .pst { margin-bottom: 10px; }
.cd2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cd2 img { width: 34px; height: 34px; flex: none; }
.cd2 input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 2px solid #34489a; background: #0a1236; color: #fff; font: 400 18px var(--display); outline: none; } .cd2 input:focus { border-color: #3fd3ff; }
.cd2 span { flex: none; display: flex; flex-direction: column; align-items: flex-end; font: 400 13px var(--display); color: #fff; } .cd2 span small { font: 800 9.5px var(--body); color: #9fb2e8; }
/* налаштування */
.cset { padding: 12px; margin-bottom: 10px; border-radius: 16px; background: #16214f; border: 1.5px solid #34489a; } .cset .pst { margin-bottom: 8px; }
.cset-row { display: flex; gap: 8px; } .cset-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid #34489a; background: #0a1236; color: #fff; font: 900 16px var(--body); outline: none; }
/* рейтинг корпорацій */
.ctr { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 16px; cursor: pointer; background: linear-gradient(160deg, #1d2f72, #111b4a); border: 1.5px solid #34489a; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.ctr.p1 { border-color: #ffc531; box-shadow: 0 0 14px rgba(255,197,49,.35); } .ctr.p2 { border-color: #c9d4f0; } .ctr.p3 { border-color: #d0864a; } .ctr.me { outline: 2px solid #3ccf5a; }
.ctr-pos { width: 30px; text-align: center; font-family: var(--display); font-weight: 400; color: #ffe27a; flex: none; } .ctr-pos .medal { width: 30px; height: 30px; }
.ctr-em { position: relative; flex: none; width: 50px; height: 50px; } .ctr-em img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ctr-em i { position: absolute; right: -4px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: linear-gradient(#3fd3ff, #2a6fe0); border: 2px solid #fff; color: #fff; font: 400 11px/16px var(--display); font-style: normal; text-align: center; }
.ctr .grow { min-width: 0; } .ctr-name { font-family: var(--display); font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctr-meta { display: flex; gap: 10px; font: 800 11px var(--body); color: #b9c8f2; } .ctr-meta span { display: inline-flex; align-items: center; gap: 3px; } .ctr-meta img { width: 16px; height: 16px; object-fit: contain; }
.ctr .cb-bar { height: 6px; margin: 4px 0 0; }
.ctr-lv { flex: none; display: flex; align-items: center; gap: 3px; font-style: normal; font-family: var(--display); font-size: 15px; color: #7dffa0; } .ctr-lv img { width: 22px; height: 22px; }
/* подарунки в профілі по центру; готель */
.gs-row { display: flex; justify-content: center; flex-wrap: wrap; } .gs-row .gs-it { width: calc((100% - 30px) / 6); max-width: 64px; }
.gshelf .pst { justify-content: center; } .gshelf .gs-all { margin-left: 8px; }
.hbottom { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cb2-btns .btn { min-width: 0; } .cb2-btns .btn:first-child { flex: 1.3 1 0; }
.x2b { padding: 0 5px; margin-right: 3px; border-radius: 6px; background: rgba(255,255,255,.22); font: 400 12px/1.4 var(--display); }

/* ===== v0.39: завдання корпорації ===== */
.ct3-head { padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; text-align: center; background: linear-gradient(160deg, #22377f, #111b4a); border: 1.5px solid #3c58c4; }
.ct3-head > .ct3-ht { display: flex; align-items: center; justify-content: center; gap: 8px; font: 900 13px var(--body); color: #dbe6ff; }
.ct3-ht img { width: 30px; height: 30px; } .ct3-ht b { margin-left: 6px; padding: 2px 9px; border-radius: 10px; background: rgba(0,0,0,.35); font: 400 14px var(--display); color: #ffe27a; }
.ct3-head > small { display: block; margin: 6px 0; font: 700 11px/1.35 var(--body); color: #9fb2e8; }
.ct3-rwl { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 4px 0; }
.ct3-rwl span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); font: 800 11px var(--body); color: #fff; }
.ct3-rwl img { width: 15px; height: 15px; object-fit: contain; }
.ctask3 { display: grid; grid-template-columns: 58px minmax(0, 1fr) 60px; gap: 7px; align-items: stretch; padding: 8px; margin-bottom: 10px; border-radius: 18px;
  background: linear-gradient(160deg, #1d2f70, #101a48); border: 1.5px solid #34489a; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.ctask3.taken { border-color: #4f6cd0; } .ctask3.in { border-color: #3ccf5a; box-shadow: 0 0 14px rgba(60,207,90,.35), 0 6px 14px rgba(0,0,0,.3); }
.ct3-l, .ct3-r { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 14px; background: rgba(5,10,40,.55); border: 1px solid rgba(120,150,255,.18); text-align: center; }
.ct3-l img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); } .ct3-l small { font: 900 9.5px var(--body); color: #9fb2e8; text-transform: uppercase; letter-spacing: .3px; }
.ct3-r i { font-style: normal; font-size: 18px; } .ct3-r b { font: 400 12px/1.15 var(--display); color: #ffe27a; } .ct3-r small { font: 800 9px/1.2 var(--body); color: #9fb2e8; }
.ct3-m { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: center; }
.ct3-n { font: 900 13.5px/1.25 var(--body); color: #fff; } .ctask3 .cb-bar { height: 15px; margin: 0; } .ctask3 .cb-bar span { line-height: 15px; font-size: 10px; }
.ct3-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ct3-p { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px 2px 2px; border-radius: 14px; background: rgba(79,108,208,.25); border: 1px solid #4f6cd0; font: 800 11px var(--body); color: #dbe6ff; }
.ct3-p > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.ct3-p .fav { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px #6f8fe0; } .ct3-p em { font-style: normal; font-size: 9px; padding: 0 5px; border-radius: 6px; background: #ffc531; color: #3d2200; }
.ct3-p.tk { border-color: #ffc531; background: rgba(255,197,49,.14); } .ct3-p.me { color: #7dffa0; }
.ct3-none { font: 800 11px var(--body); color: #7f8fc0; padding: 3px 0; }
.ct3-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 7px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.ct3-btns .btn { padding: 8px 14px; font-size: 13px; border-radius: 12px; } .ct3-btns .btn.red { padding: 8px 10px; font-size: 12px; }
.ct3-btns .btn[disabled] { opacity: .6; } .ct3-go { min-width: 60%; font-size: 14px !important; letter-spacing: .2px; }
.ct3-tag { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 12px; background: linear-gradient(#2a7a45, #1a5230); border: 1px solid #3ccf5a; font: 900 12.5px var(--body); color: #c9ffd6; }
/* особисте завдання колекції */
.cpt { margin-bottom: 10px; border-color: #ffc531 !important; background: radial-gradient(circle at 50% 0, rgba(255,197,49,.16), transparent 65%), linear-gradient(160deg, #22377f, #111b4a); }
.cpt-empty { padding: 10px; border-radius: 18px; border: 1.5px solid; text-align: center; }
.cpt-h { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 4px; } .cpt-h img { width: 40px; height: 40px; }
.cpt-h b { display: block; font: 400 15px var(--display); color: #fff; } .cpt-h small { font: 700 11px/1.3 var(--body); color: #b9c8f2; }
.cpt-empty .ct3-btns { margin-top: 6px; }
.cpt-k { align-self: center; padding: 1px 8px; border-radius: 8px; background: #ffc531; color: #3d2200; font: 900 9.5px var(--body); text-transform: uppercase; }
/* колекції: 8 предметів в один ряд, повні іконки категорій */
.cca-g { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.cca-g > div { border-radius: 9px; } .cca-g i { width: 14px; height: 14px; right: 2px; top: 2px; font-size: 9px; line-height: 14px; }
.cca-h img, .ccol-lock > img { object-fit: contain; } .cca-h img { width: 54px; height: 54px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); } .ccol-lock > img { width: 40px; height: 40px; }
/* будівництво споруд */
.cb2-build { padding: 5px 7px; border-radius: 10px; background: rgba(255,197,49,.1); border: 1px solid rgba(255,197,49,.45); }
.cb2-bt { display: flex; align-items: center; gap: 5px; font: 900 11.5px var(--body); color: #ffe27a; } .cb2-bt img { width: 18px; height: 18px; }
.cb2-bt b { margin-left: auto; font: 400 12px var(--display); color: #fff; }
.cb2-build .cb-bar i { background: linear-gradient(90deg, #ffc531, #ffe27a); }
.cbld2.building { border-color: #ffc531; }
.cb2-pips i.bld { background: #ffc531; animation: pipb 1s ease-in-out infinite alternate; } @keyframes pipb { to { opacity: .35; } }
.bt-t { margin-left: 5px; padding: 0 4px; border-radius: 6px; background: rgba(0,0,0,.25); font: 800 10px var(--body); }
.cb2-btns .btn.bx2 { flex: 1.6 1 0; min-width: 140px; } .cb2-btns .x2b { white-space: nowrap; font-size: 11.5px; }
.cbld2 + .cbld2 { margin-top: 0; } .cbx.x { margin-bottom: 10px; } .cbud2 .cbx.x { margin-bottom: 0; }
/* видалення повідомлень у чаті корпорації */
.cm-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; background: #e0413a; color: #fff; font: 900 11px/1 var(--body); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.5); z-index: 2; }
.cm.mine .cm-del { right: auto; left: -7px; }
.cb2-btns .btn, .cb2-btns .btn:first-child, .cb2-btns .btn.bx2 { flex: 1 1 100%; min-width: 0; padding: 8px 8px; font-size: 12.5px; }
.cb2-btns .x2b { background: rgba(255,255,255,.25); padding: 1px 8px; margin-right: 6px; }
.ct3-btns .btn.gray[disabled] { white-space: normal; font-size: 11.5px; padding: 7px 10px; opacity: .75; }
.cb2-btns .x2b { background: rgba(30,0,80,.35); color: #fff; font-size: 12.5px; letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* ===== v0.40 ===== */
.cpx { position: relative; overflow: hidden; } .cpx em { position: relative; font-style: normal; font-size: 11.5px; z-index: 1; }
.cpx i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #3fd3ff, #7dffa0); }
.cpx img { position: relative; z-index: 1; }
.ctabs { display: flex; flex-wrap: wrap; justify-content: center; } .ctabs button { width: calc((100% - 12px) / 4); }
/* споруди: верх — картинка й інфо, далі на всю ширину будівництво і кнопки в один ряд */
.cbld2 { flex-direction: column; gap: 8px; } .cb2-top { display: flex; gap: 10px; align-items: flex-start; } .cb2-top .grow { flex: 1; }
.cb2-build { margin: 0; padding: 8px 10px; border-radius: 12px; background: #070d2c; border: 1px solid rgba(255,197,49,.55); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.cb2-build .cb-bar { margin-top: 6px; height: 9px; background: #02051a; }
.cb2-btns { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
.cb2-btns .btn, .cb2-btns .btn:first-child, .cb2-btns .btn.bx2 { flex: 1 1 0; min-width: 0; padding: 9px 6px; font-size: 13px; }
.cb2-btns .x2b { font-size: 11.5px; padding: 1px 6px; margin-right: 4px; }
/* завдання: центр у темно-синьому блоці, кнопки без окремої підкладки */
.ct3-m { padding: 8px; border-radius: 14px; background: #0b1440; border: 1px solid rgba(120,150,255,.22); box-shadow: inset 0 2px 8px rgba(0,0,0,.35); }
.ct3-btns { padding: 0; background: none; border: none; border-radius: 0; margin-top: 2px; }
.ct3-r { gap: 5px; } .ct3-r img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.ct3-r b { font-size: 10.5px; line-height: 1.2; word-break: break-word; }
.ctask3 { grid-template-columns: 56px minmax(0, 1fr) 54px; }
.ct3-rw3 { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 5px; margin-top: 6px; }
.ct3-rw3 > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px; border-radius: 12px; background: linear-gradient(#0d1748, #070d2c); border: 1px solid rgba(255,197,49,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.ct3-rw3 small { margin: 0 0 1px; font: 900 9.5px var(--body); color: #ffe27a; text-transform: uppercase; letter-spacing: .3px; }
.ct3-rw3 span { display: inline-flex; align-items: center; gap: 3px; font: 400 12px var(--display); color: #fff; white-space: nowrap; }
.ct3-rw3 img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.ct3-rwl img { width: 15px !important; height: 15px !important; }
/* особисте завдання: кнопка без підкладки */
.cpt-take { margin-top: 8px; padding: 10px 26px !important; }
/* колекції: квадратні предмети без спотворень */
.cca-g > div { aspect-ratio: 1; background: #070d2c; } .cca-g img { width: 100% !important; height: 100% !important; aspect-ratio: auto; object-fit: contain; }
/* машини їдуть поверх шлагбаума */
.road { z-index: 8; }
.ct3-l small { font-size: 8.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtabs.ft3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ===== v0.41 ===== */
.ct3-rw4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 2px 0; }
.ct3-rw4 > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; background: linear-gradient(#0d1748, #070d2c); border: 1px solid rgba(255,197,49,.35); }
.ct3-rw4 img { width: 22px; height: 22px; object-fit: contain; } .ct3-rw4 b { font: 400 11.5px var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cpt-empty .ct3-rw4 { margin: 8px 0 2px; }
.ctask3.done { opacity: .62; filter: saturate(.55); border-color: #3ccf5a; }
.ctask3.done .cb-bar i { background: linear-gradient(90deg, #3ccf5a, #7dffa0); }
.ct3-done { display: inline-flex; padding: 6px 14px; border-radius: 12px; background: rgba(60,207,90,.18); border: 1px solid #3ccf5a; font: 900 12.5px var(--body); color: #9dffb4; }
.ctask3.done .ct3-r b { color: #7dffa0; }
.ct3-p em { display: none; }
#nav-corp { position: relative; } #nav-corp .nplus { position: absolute; top: -6px; right: calc(50% - 30px); width: 22px; height: 22px; object-fit: contain; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: npl 1.2s ease-in-out infinite alternate; pointer-events: none; }
@keyframes npl { to { transform: scale(1.15); } }
.ctask3.claim { border-color: #ffc531; box-shadow: 0 0 16px rgba(255,197,49,.45), 0 6px 14px rgba(0,0,0,.3); }
.ctask3.claim .cb-bar i { background: linear-gradient(90deg, #3ccf5a, #7dffa0); }
/* предмети колекцій — повністю, без обрізання країв */
.cca-g > div { overflow: visible; border-radius: 0; background: none; } .cca-g img { border-radius: 0; box-shadow: none !important; }
.cca-g > div.got img { filter: drop-shadow(0 0 5px rgba(255,214,110,.55)) !important; }
/* поки відкрите вікно — анімації вежі на паузі (менше навантаження на телефон) */
#app.m-open #tower *, #app.m-open #sky * { animation-play-state: paused !important; }
/* ===== v0.44 ===== */
.fnav-col { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.fnav-col .m-close { margin-left: 0; }
.fnav { display: flex; gap: 6px; }
.fnav-b { width: 34px; height: 30px; padding: 0; border-radius: 10px; border: 2px solid rgba(255,255,255,.85); background: linear-gradient(#3a63e0, #1d3aa8); box-shadow: 0 3px 0 #0f2170; cursor: pointer; display: grid; place-items: center; }
.fnav-b img { width: 22px; height: 22px; object-fit: contain; } .fnav-b.l img { transform: rotate(-90deg); } .fnav-b.r img { transform: rotate(90deg); }
.fnav-b[disabled] { opacity: .35; filter: grayscale(1); cursor: default; box-shadow: none; }
.fnav-b:not([disabled]):active { transform: translateY(2px); box-shadow: 0 1px 0 #0f2170; }
.pinfo { margin-top: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #2a1f6e, #15114a); border: 1.5px solid #7a4fe0; }
.pinfo .pst { margin-bottom: 8px; }
.pi-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 5px; border-radius: 12px; background: rgba(0,0,0,.25); }
.pi-row img { width: 34px; height: 34px; object-fit: contain; flex: none; } .pi-row b { display: block; font: 900 13px var(--body); color: #fff; } .pi-row small { font: 700 11px var(--body); color: #b9b3e8; }
.pi-row em { font-style: normal; font: 400 16px var(--display); color: #ffe27a; padding: 2px 10px; border-radius: 10px; background: rgba(255,197,49,.15); }
.pi-note { margin-top: 8px; font: 700 12px/1.45 var(--body); color: #d6d0ff; } .pi-note b { color: #ffe27a; }
/* ===== v0.45: донат ===== */
.don-cf { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 10px; padding: 10px 14px; border-radius: 16px; background: rgba(0,0,0,.25); width: max-content; max-width: 100%; }
.don-cf > img { width: 52px; height: 52px; object-fit: contain; } .don-cf b { display: inline-flex; align-items: center; gap: 4px; font: 400 22px var(--display); color: #fff; } .don-cf b img { width: 24px; height: 24px; }
.don-cf span { padding: 3px 10px; border-radius: 10px; background: #1f9a37; font: 900 15px var(--body); color: #fff; }
.don-cf-bonus { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,120,30,.18); border: 1px solid rgba(255,160,60,.6); font: 900 12.5px var(--body); color: #ffd38a; }
.don-cf-note { margin-top: 8px; font: 700 12px/1.4 var(--body); color: #b9c6f0; }
.adm-dseg { display: flex; gap: 6px; margin: 4px 0 10px; } .adm-dseg button { flex: 1; padding: 9px 6px; border-radius: 12px; border: 1px solid #34489a; background: #131d4a; color: #c9d4ff; font: 900 13px var(--body); cursor: pointer; }
.adm-dseg button.on { background: linear-gradient(#3a63e0, #1d3aa8); color: #fff; border-color: #7fa2ff; } .adm-dseg i { font-style: normal; padding: 0 7px; border-radius: 9px; background: #e0303c; color: #fff; }
.adm-dons { display: flex; flex-direction: column; gap: 8px; }
.adm-don { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, #1d2f70, #101a48); border: 1.5px solid #34489a; }
.adm-don.pending { border-color: #ffc531; } .adm-don.done { border-color: #3ccf5a; opacity: .85; } .adm-don.rejected { border-color: #7a3040; opacity: .7; }
.ad-av { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #6f8fe0; cursor: pointer; }
.adm-don .grow { min-width: 0; flex: 1; } .ad-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ad-top b { font: 900 15px var(--body); color: #fff; cursor: pointer; } .ad-top small { font: 700 11px var(--body); color: #8fa0d8; }
.ad-sum { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .ad-sum img { width: 20px; height: 20px; } .ad-sum b { font: 400 18px var(--display); color: #ffe27a; } .ad-sum span { padding: 2px 9px; border-radius: 9px; background: #1f9a37; font: 900 12.5px var(--body); color: #fff; }
.ad-bonus { margin-top: 4px; font: 800 11.5px var(--body); color: #ffd38a; }
.ad-st { display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 9px; font: 900 11px var(--body); font-style: normal; } .ad-st.ok { background: rgba(60,207,90,.2); color: #7dffa0; } .ad-st.no { background: rgba(224,48,60,.2); color: #ff9aa5; } .ad-st.wait { background: rgba(255,197,49,.2); color: #ffe27a; }
.ad-act { display: flex; gap: 6px; flex: none; }
.ad-act button { width: 74px; padding: 7px 2px 6px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; border: 1.5px solid; }
.ad-act small { font: 900 9.5px var(--body); color: #fff; } .ad-act img { width: 26px; height: 26px; object-fit: contain; } .ad-act b { font: 900 20px/26px var(--body); color: #fff; }
.ad-ok { background: linear-gradient(#2fbf55, #17863a); border-color: #7dffa0 !important; box-shadow: 0 3px 0 #0e5a26; } .ad-no { background: linear-gradient(#ff5a6a, #c02236); border-color: #ffb3bd !important; box-shadow: 0 3px 0 #7a1020; }
.ad-sum span, .ad-sum b { white-space: nowrap; } .ad-sum { flex-wrap: wrap; }
/* ===== v0.46: плавне гортання вежі ===== */
#scroller { will-change: auto; }
.cl-create { margin: 14px 0 16px !important; }
/* ===== v0.48: легка вежа ===== */
/* фільтри-тіні всередині поверхів — найдорожче для відеокарти телефона (сотні окремих поверхонь); прибираємо, вигляд майже не змінюється */
.floor .fhead, .floor .si img, .floor .pic-room, .floor .shelf img, .floor .crew img, .floor .stars5, .floor .stars5.onpic i, .floor .fbtn img, .floor .builder, .floor .cat-ghost { filter: none !important; }
.floor .fhead { box-shadow: 0 2px 3px rgba(0,0,0,.3); border-radius: 12px; }
.floor { transform: none; backface-visibility: visible; contain: layout style; }
#floors { background-color: #15214f; }
/* ніч: затемнення землі накладкою замість фільтра (фільтр перемальовував усю землю з машинами щокадру) */
#app.night .ground { filter: none; }
#app.night .ground::after { content: ''; position: absolute; inset: 0; background: rgba(4,8,36,.42); pointer-events: none; z-index: 9; }
.adm-card { backdrop-filter: none; }

/* ===== v0.48b: ще легше ===== */
/* блиск на кнопках — рух через transform (раніше анімувався left і щокадру перераховувалась розмітка) */
@keyframes shine { 0%, 70% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
@keyframes pulse { 50% { transform: scale(1.07); } }
#build-btn.board .bd-screen { animation: none; box-shadow: 0 0 0 2px #24348a, 0 0 18px rgba(63,211,255,.55), inset 0 0 12px rgba(63,211,255,.4); }
/* тіні-фільтри на землі й машинах — найдорожчі під час руху */
.plant, .queue img:not(.vip), .tree, .tcar, .pk-bay img, .milcar > img, .pk-slot img, .lamp { filter: none !important; }
#app.night .lamp, #app.evening .lamp { filter: none !important; }
#app.night .cloud { filter: none; opacity: .55; }

/* ===== v1.0: легка вежа — без розмитих тіней і складних обрізань у поверхах ===== */
.stars5 i { clip-path: none !important; background: url(images/ui/star_off.png) center / contain no-repeat !important; }
.stars5 i.on { background: url(images/ui/star_on.png) center / contain no-repeat !important; }
.floor .fbtn { box-shadow: 0 5px 0 rgba(0,0,0,.38) !important; }
.floor .fpic { box-shadow: 0 0 0 2px #0d1640 !important; }
.floor .fpic.ready::before { box-shadow: inset 0 0 0 3px var(--cat) !important; animation: none !important; }
#floors .si { box-shadow: none !important; }
#floors *, #floors *::before, #floors *::after { text-shadow: none !important; }
#floors .fhead, #floors .fname, #floors .fhead b { text-shadow: 0 1px 0 rgba(0,0,0,.55) !important; }
.floor .stars5 { filter: none !important; }
.rail { box-shadow: none !important; }

/* ===== v1.1: турнір кубків ===== */
.tour-box { display: flex; align-items: center; gap: 8px; padding: 10px; margin-bottom: 10px; border-radius: 16px; background: radial-gradient(circle at 15% 0, rgba(255,197,49,.25), transparent 60%), linear-gradient(160deg, #3a2a7a, #1a1450); border: 2px solid #ffc531; }
.tour-box.rest { border-color: #6f7fb8; filter: saturate(.7); }
.tour-box > img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.tour-box .grow { min-width: 0; } .tour-box .grow b { display: block; font: 400 15px var(--display); color: #ffe27a; } .tour-box .grow small { font: 800 11px var(--body); color: #d6d0ff; } .tour-box .grow small b { display: inline; font: 900 11px var(--body); color: #fff; }
.tour-me { flex: none; min-width: 46px; padding: 4px 6px; border-radius: 10px; background: rgba(0,0,0,.3); text-align: center; } .tour-me b { display: block; font: 400 16px var(--display); color: #fff; } .tour-me small { font: 800 9px var(--body); color: #c9c3f0; }
.tour-btn { flex: none; padding: 8px 10px !important; font-size: 12px !important; }
.tour-chip { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px 1px 3px; border-radius: 10px; background: linear-gradient(#ffe27a, #f0a500); color: #3d2200; font: 900 11px var(--body); vertical-align: middle; }
.tour-chip img { width: 16px; height: 16px; object-fit: contain; }
.ct3-cups { display: flex; align-items: center; justify-content: center; gap: 4px; } .ct3-cups .tour-chip { margin: 0; } .ct3-cups small { font: 800 10px var(--body); color: #c9c3f0; }
.tour-head { display: flex; align-items: center; gap: 8px; padding: 10px; margin: 8px 0; border-radius: 14px; background: linear-gradient(160deg, #3a2a7a, #1a1450); border: 1.5px solid #ffc531; }
.tour-head > img { width: 44px; height: 44px; } .tour-head b { display: block; font: 400 16px var(--display); color: #ffe27a; } .tour-head small { font: 800 11px var(--body); color: #d6d0ff; } .tour-head small b { display: inline; font: 900 11px var(--body); color: #fff; }
.tour-head > span { font: 900 11px var(--body); color: #c9c3f0; text-align: right; }
.tour-list { display: flex; flex-direction: column; gap: 6px; }
.tour-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 14px; background: linear-gradient(160deg, #1d2f70, #101a48); border: 1.5px solid #34489a; cursor: pointer; }
.tour-row.p1 { border-color: #ffc531; } .tour-row.p2 { border-color: #c9d4f0; } .tour-row.p3 { border-color: #d9884a; } .tour-row.me { box-shadow: 0 0 0 2px #3ccf5a inset; }
.tr-pl { width: 30px; flex: none; text-align: center; font: 400 15px var(--display); color: #fff; } .tr-pl .medal { width: 28px; height: 28px; }
.tour-row .fav { width: 32px; height: 32px; } .tr-em { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tr-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 13px var(--body); color: #fff; }
.tr-c, .tr-p { display: inline-flex; align-items: center; gap: 3px; flex: none; font: 400 13px var(--display); color: #ffe27a; } .tr-p { color: #7dffa0; font-size: 12px; } .tr-c img, .tr-p img { width: 16px; height: 16px; object-fit: contain; }
.tour-rules { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.25); } .tour-rules p { margin: 5px 0; font: 700 12px/1.4 var(--body); color: #d6dcf5; }
/* системні повідомлення в чаті корпорації */
.cm-sys { position: relative; display: flex; gap: 8px; align-items: flex-start; margin: 6px 4px; padding: 9px 11px; border-radius: 14px; background: linear-gradient(160deg, #3a2a7a, #1a1450); border: 1.5px solid #ffc531; }
.cm-sys > img { width: 30px; height: 30px; flex: none; } .cm-sys small { display: block; font: 900 10.5px var(--body); color: #ffe27a; } .cm-sys span { font: 800 12.5px/1.4 var(--body); color: #fff; }
/* новина з підсумками турніру */
.tn-list { margin: 8px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.tn-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.25); font: 800 12px var(--body); color: #fff; } .tn-row.top { background: rgba(255,197,49,.14); }
.tn-pl { width: 24px; text-align: center; } .tn-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-cups, .tn-prize { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .tn-prize { color: #7dffa0; } .tn-ic { width: 15px; height: 15px; object-fit: contain; vertical-align: middle; }
.tn-foot { font: 700 11px var(--body); color: #b9c6f0; }
/* щоденний подарунок: менеджер ширший, скриня вужча — текст в один рядок */
.daily { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.dday { grid-column: span 2; }
.daily .dday:nth-child(6) { grid-column: span 4; white-space: nowrap; }
.dday.big { grid-column: span 2; }
/* правила турніру */
.tour-rules { padding: 12px; background: linear-gradient(160deg, #24196a, #120d40); border: 1.5px solid rgba(255,197,49,.45); }
.tr-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 10px; font: 400 16px var(--display); color: #ffe27a; }
.tr-title img { width: 28px; height: 28px; object-fit: contain; } .tr-title.sm { margin: 14px 0 8px; font-size: 14px; } .tr-title.sm img { width: 22px; height: 22px; }
.tr-rule { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.tr-rule > img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tr-rule b { color: #ffe27a; } .tr-rule > div > b:first-child { display: block; margin-bottom: 2px; font: 900 13px var(--body); color: #fff; }
.tr-rule span { font: 700 12px/1.45 var(--body); color: #d6d0ff; } .tr-rule .ri { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; }
.tr-prizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-prizes > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.tr-prizes > div.p1 { border-color: #ffc531; background: rgba(255,197,49,.14); } .tr-prizes > div.p2 { border-color: #c9d4f0; } .tr-prizes > div.p3 { border-color: #d9884a; }
.tr-prizes b { font: 400 14px var(--display); color: #fff; line-height: 26px; } .tr-prizes b .medal { width: 26px; height: 26px; vertical-align: middle; }
.tr-prizes span { display: inline-flex; align-items: center; gap: 2px; font: 900 11.5px var(--body); color: #7dffa0; white-space: nowrap; } .tr-prizes span img { width: 14px; height: 14px; object-fit: contain; }
.mt-ic { font-style: normal; font-size: 11px; margin-left: 5px; opacity: .55; cursor: pointer; vertical-align: 1px; } .mt.trd { } .mt-ic:active { opacity: 1; }

/* ===== Навчання ===== */
#tut { position: absolute; inset: 0; z-index: 50; pointer-events: none; font-family: inherit; overflow: hidden; contain: layout paint; }
#tut.track .tt-hole, #tut.track .tt-hand { transition: none; }
#tut.stuck .tt-next { animation: ttPulse 1.2s ease infinite; }
#tut.hide { display: none; }
#tut.bye { opacity: 0; transition: opacity .35s; }
#tut .tt-catch { position: absolute; inset: 0; pointer-events: auto; }
#tut.pass .tt-catch, #tut.inmodal .tt-catch, #tut.final .tt-catch { display: none; }
#tut .tt-dim { position: absolute; left: 0; top: 0; width: 0; height: 0; background: rgba(3,8,28,.66); pointer-events: auto; transition: opacity .3s; }
#tut .tt-hole { position: absolute; left: 0; top: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px #ffd34d, 0 0 18px 4px rgba(255,211,77,.75); animation: ttHole 1.4s ease-in-out infinite; transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s, height .35s; will-change: transform; }
#tut.nohole .tt-hole, #tut.nohole .tt-hand { opacity: 0; }
#tut .tt-hand { position: absolute; left: 0; top: 0; font-size: 40px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
#tut:not(.act) .tt-hand { opacity: 0; }
#tut.wait .tt-hand { opacity: 0; }
#tut .tt-hand i { display: block; font-style: normal; animation: ttBob .9s ease-in-out infinite; }
@keyframes ttBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
#tut .tt-hand.up i { animation-name: ttBobUp; }
@keyframes ttBobUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
#tut.act:not(.wait):not(.inmodal):not(.nohole) .tt-hand { opacity: 1; }
@keyframes ttHole { 0%,100% { box-shadow: 0 0 0 3px #ffd34d, 0 0 14px 3px rgba(255,211,77,.6); } 50% { box-shadow: 0 0 0 4px #fff2b0, 0 0 30px 10px rgba(255,211,77,.9); } }
#tut .tt-card { position: absolute; left: 10px; right: 10px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; display: flex; align-items: flex-end; transition: top .35s, bottom .35s; }
#tut.cardtop .tt-card { bottom: auto; top: calc(74px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); }
#tut .tt-girl { position: absolute; left: -6px; bottom: 0; height: 168px; width: auto; max-width: 138px; object-fit: contain; object-position: bottom; z-index: 2; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); pointer-events: none; }
#tut .tt-bub { position: relative; flex: 1; margin-left: 0; padding: 12px 12px 10px 122px; min-height: 120px; border-radius: 20px; background: linear-gradient(160deg, #23367f, #111a46 70%); border: 2px solid var(--gc, #ffd34d); box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); color: #fff; }
#tut .tt-name { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#tut .tt-name b { font-family: var(--display); font-size: 17px; color: var(--gc, #ffd34d); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#tut .tt-name span { font-size: 11px; font-weight: 800; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
#tut .tt-txt { font-size: 14.5px; font-weight: 800; line-height: 1.35; min-height: 58px; }
#tut .tt-row { display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; gap: 8px; }
#tut .tt-skip { background: none; border: 0; color: #9fb0e8; font-size: 12px; font-weight: 800; text-decoration: underline; padding: 4px 0; font-family: inherit; }
#tut .tt-next { min-width: 110px; padding: 8px 18px; font-size: 15px; }
#tut .tt-next[hidden] { display: none; }
#tut .tt-card.in .tt-girl { animation: ttGirl .55s cubic-bezier(.2,1.3,.4,1) both; }
#tut .tt-card.in .tt-bub { animation: ttBub .45s cubic-bezier(.2,1.2,.4,1) both; }
#tut .tt-card.pulse .tt-bub { animation: ttPulse .4s ease; }
@keyframes ttGirl { from { transform: translateX(-60px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ttBub { from { transform: translateY(18px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ttPulse { 50% { transform: scale(1.025); } }
/* під час відкритого вікна — компактна підказка зверху, вікно доступне */
#tut.inmodal .tt-dim, #tut.inmodal .tt-hole, #tut.inmodal .tt-hand { opacity: 0; pointer-events: none; }
#tut.inmodal .tt-card { top: calc(6px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); bottom: auto; }
#tut.inmodal .tt-girl { height: 92px; max-width: 80px; }
#tut.inmodal .tt-bub { padding: 8px 10px 8px 78px; min-height: 0; }
#tut.inmodal .tt-txt { font-size: 13px; min-height: 0; }
#tut.inmodal .tt-row { display: none; }
#tut.inmodal .tt-name span { display: none; }
.tut-glow { position: relative; z-index: 3; animation: tutGlow 1.2s ease-in-out infinite !important; }
@keyframes tutGlow { 0%,100% { box-shadow: 0 0 0 3px #ffd34d, 0 0 12px 3px rgba(255,211,77,.7); } 50% { box-shadow: 0 0 0 5px #fff2b0, 0 0 26px 9px rgba(255,211,77,.95); } }
/* фінал */
#tut .tt-final { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; background: radial-gradient(rgba(40,55,140,.92), rgba(3,6,20,.97)); overflow: hidden; }
#tut.final .tt-final { display: flex; animation: ttFade .4s both; }
#tut.final .tt-card, #tut.final .tt-dim, #tut.final .tt-hole, #tut.final .tt-hand { display: none; }
#tut .tt-final .rays { position: absolute; width: 620px; height: 620px; left: 50%; top: 38%; margin: -310px 0 0 -310px; background: repeating-conic-gradient(rgba(255,214,110,.2) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 16s linear infinite; -webkit-mask: radial-gradient(#000 20%, transparent 65%); mask: radial-gradient(#000 20%, transparent 65%); }
#tut .tt-fgirl { position: relative; height: 250px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); animation: ttGirl .7s cubic-bezier(.2,1.3,.4,1) both; margin-bottom: -18px; z-index: 2; }
#tut .tt-fbox { position: relative; width: min(340px, 92%); background: linear-gradient(160deg, #24398a, #101944); border: 2px solid #ffd34d; border-radius: 22px; padding: 30px 16px 18px; text-align: center; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: ttBub .55s .15s both; }
#tut .tt-fbox .ribbon { position: relative; display: inline-block; margin-bottom: 4px; white-space: nowrap; padding: 6px 22px; font-family: var(--display); font-size: 19px; color: #3d2200; background: linear-gradient(#ffe27a, #f39c00); border-radius: 8px; box-shadow: 0 4px 0 var(--gold-d), 0 8px 18px rgba(0,0,0,.4); }
#tut .tt-ftxt { font-weight: 800; font-size: 15px; line-height: 1.35; margin: 6px 0 10px; }
#tut .tt-fprize { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 34px; color: #7dff9a; text-shadow: 0 3px 0 rgba(0,0,0,.4); margin-bottom: 14px; animation: popin .6s .45s both; }
#tut .tt-fprize img { width: 52px; height: 52px; object-fit: contain; }
#tut .tt-get { width: 100%; font-size: 17px; padding: 12px; }
#tut .tt-get img { width: 24px; height: 24px; vertical-align: middle; }
@keyframes ttFade { from { opacity: 0; } to { opacity: 1; } }
/* підтвердження пропуску */
#tut .tt-ask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,20,.7); pointer-events: auto; z-index: 5; }
#tut.asking .tt-ask { display: flex; }
#tut .tt-askbox { width: min(320px, 88%); background: linear-gradient(#22357a, #131e4a); border: 2px solid #4a63c4; border-radius: 18px; padding: 16px; color: #fff; text-align: center; font-weight: 800; animation: ttBub .3s both; }
#tut .tt-askbox p { margin: 0 0 14px; line-height: 1.35; }
#tut .tt-askbox div { display: flex; gap: 10px; } #tut .tt-askbox .btn { flex: 1; }
body.lite #tut .tt-hole, body.lite .tut-glow { animation: none !important; }
/* оптимізація: анімації лише на видимих частинах вежі */
.floor:not(.vis), .floor:not(.vis) *, #roof:not(.vis) *, .parking:not(.vis) *, .road:not(.vis) * { animation: none !important; }
/* вибір мови на екрані входу */
.au-lang { position: absolute; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); right: 12px; z-index: 9; font-family: inherit; }
.au-lang .al-btn { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1.5px solid rgba(255,214,110,.75); background: linear-gradient(160deg, rgba(36,57,138,.92), rgba(15,24,64,.92)); color: #fff; font: 800 14px/1 inherit; font-family: inherit; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(6px); cursor: pointer; }
.au-lang .al-btn i { font-style: normal; font-size: 19px; line-height: 1; }
.au-lang .al-btn b { font-size: 11px; opacity: .8; transition: transform .25s; }
.au-lang.open .al-btn b { transform: rotate(180deg); }
.au-lang .al-list { position: absolute; right: 0; top: calc(100% + 8px); width: 196px; padding: 6px; border-radius: 18px; background: linear-gradient(170deg, #24398a, #0f1840); border: 1.5px solid #4a63c4; box-shadow: 0 16px 36px rgba(0,0,0,.6); transform-origin: top right; transform: scale(.85) translateY(-8px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,1.2,.4,1), opacity .18s; max-height: 70vh; overflow-y: auto; }
.au-lang.open .al-list { transform: none; opacity: 1; pointer-events: auto; }
.au-lang .al-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: #fff; font: 800 14.5px inherit; font-family: inherit; text-align: left; cursor: pointer; opacity: 0; transform: translateX(10px); transition: background .15s; }
.au-lang.open .al-list button { animation: alIn .28s var(--d, 0ms) both; }
@keyframes alIn { to { opacity: 1; transform: none; } }
.au-lang .al-list button i { font-style: normal; font-size: 20px; line-height: 1; }
.au-lang .al-list button span { flex: 1; }
.au-lang .al-list button em { font-style: normal; color: #7dff9a; font-weight: 900; }
.au-lang .al-list button:hover, .au-lang .al-list button:active { background: rgba(255,255,255,.08); }
.au-lang .al-list button.on { background: linear-gradient(90deg, rgba(255,211,77,.22), rgba(255,211,77,.06)); box-shadow: inset 0 0 0 1px rgba(255,211,77,.5); }
#tut .tt-txt .tt-b { opacity: 0; }
.setrow.sub { padding-left: 14px; }
.setrow.sub img { width: 24px; height: 24px; }
.setrow.sub span { font-size: 13.5px; opacity: .92; }
/* відповідь на повідомлення */
#m-body [data-rid] { position: relative; touch-action: pan-y; }
#m-body [data-rid]::before { content: '↩'; position: absolute; left: -34px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: #fff; background: linear-gradient(#5aaaf5, #2a6fe0); box-shadow: 0 2px 8px rgba(0,0,0,.4); opacity: var(--rp, 0); transform: scale(calc(.5 + var(--rp, 0) * .5)); pointer-events: none; }
#m-body [data-rid].rdrag { z-index: 2; }
#m-body [data-rid].rback { transition: transform .22s cubic-bezier(.2,1.3,.4,1); }
#m-body [data-rid].rflash { animation: rFlash 1.2s ease; }
@keyframes rFlash { 0%, 40% { filter: brightness(1.45) drop-shadow(0 0 8px rgba(255,211,77,.8)); } 100% { filter: none; } }
.rq { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 5px; padding: 4px 8px; border-left: 3px solid #ffd34d; border-radius: 8px; background: rgba(0,0,0,.22); font-size: 12px; line-height: 1.25; cursor: pointer; max-width: 100%; overflow: hidden; }
.rq b { color: #ffd34d; font-weight: 900; font-size: 11.5px; }
.rq span { opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.rq.gone { cursor: default; font-style: italic; border-left-color: #8a94b8; }
.rq img.emo { width: 16px; height: 16px; vertical-align: -3px; }
.rbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 -2px; padding: 7px 8px 7px 10px; border-radius: 14px 14px 6px 6px; background: linear-gradient(#22357a, #182660); border: 1.5px solid #3f5bc0; border-left: 4px solid #ffd34d; animation: ttBub .25s both; }
.rbar .rbar-ic { font-style: normal; font-size: 18px; color: #ffd34d; font-weight: 900; }
.rbar .grow { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.25; }
.rbar .grow b { color: #ffd34d; font-size: 12px; }
.rbar .grow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.rbar .grow img.emo { width: 16px; height: 16px; vertical-align: -3px; }
.rbar-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.adm-plog { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.adm-plog .pl-r { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 12px; }
.adm-plog .pl-r.ok b { color: #7dff9a; } .adm-plog .pl-r.bad b { color: #ff8a8a; }
.adm-plog .pl-r span { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-plog .pl-r time { opacity: .6; font-size: 11px; }
@media (max-width: 520px) { .adm-plog .pl-r { grid-template-columns: 1fr auto; } .adm-plog .pl-r span { grid-column: 1 / -1; } }

/* ================= Адмін-панель v1.8: рівні блоки, центрування ================= */
#adm .adm-top { justify-content: center; text-align: center; }
#adm .adm-top .grow { flex: 0 1 auto; }
#adm .adm-top > img { position: absolute; left: 14px; top: calc(50% + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px)) / 2); transform: translateY(-50%); }
#adm .adm-top .adm-x { position: absolute; right: 12px; top: calc(50% + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px)) / 2); transform: translateY(-50%); }
#adm .adm-main { padding-top: 14px; }
#adm .adm-main > section, #adm .adm-main > div, #adm .adm-main > nav { max-width: 760px; margin-left: auto; margin-right: auto; }
#adm .adm-main section { margin-bottom: 12px; }
/* заголовки карток — по центру, з тонкою лінією */
#adm .adm-card h3 { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid var(--a-line); }
#adm .ac-h { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: 10px; margin: -2px 0 12px; border-bottom: 1px solid var(--a-line); position: relative; }
#adm .ac-h::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 56px; height: 2px; margin-left: -28px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--a-gold), transparent); }
#adm .ac-h img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); margin-bottom: 2px; }
#adm .ac-h b { font-family: var(--display); font-weight: 400; font-size: 17px; color: #fff; letter-spacing: .3px; }
#adm .ac-h small { font-size: 11px; font-weight: 800; color: var(--a-mut); }
#adm .ac-h .act { color: #ff8a8a; }
#adm .adm-card { padding: 14px; border-radius: 18px; background: linear-gradient(165deg, rgba(34,50,112,.78), rgba(14,22,58,.86)); box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07); }
#adm .adm-card.hero-card { border-color: rgba(63,211,255,.35); }
#adm .adm-sub { margin: 14px 0 8px; text-align: center; font: 900 11px var(--body); letter-spacing: .6px; text-transform: uppercase; color: var(--a-mut); }
#adm .adm-hint.c { text-align: center; margin: 2px 0 6px; }
/* рівні плитки значень */
#adm .adm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#adm .adm-tiles.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#adm .adm-tiles > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 58px; padding: 7px 3px; border-radius: 12px; text-align: center; background: rgba(5,10,30,.45); border: 1px solid var(--a-line); }
#adm .adm-tiles b { font-family: var(--display); font-weight: 400; font-size: 15px; color: #fff; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adm .adm-tiles small { margin-top: 2px; font-size: 9.5px; font-weight: 800; line-height: 1.15; color: var(--a-mut); }
#adm .adm-tiles .ok { border-color: rgba(79,224,122,.45); background: rgba(31,154,55,.14); } #adm .adm-tiles .ok b { color: #7dff9a; }
#adm .adm-tiles .warn { border-color: rgba(255,178,74,.5); background: rgba(212,116,10,.14); } #adm .adm-tiles .warn b { color: #ffc46b; }
#adm .adm-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; }
#adm .adm-kpis .kpi { min-height: 92px; justify-content: center; border-radius: 16px; background: linear-gradient(165deg, rgba(34,50,112,.8), rgba(14,22,58,.88)); }
#adm .adm-kpis .kpi b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* дві картки поруч однакової висоти */
#adm .adm-grid2.eq { display: grid; gap: 12px; margin-bottom: 12px; align-items: stretch; }
#adm .adm-grid2.eq > section { margin: 0; display: flex; flex-direction: column; }
#adm .adm-grid2.eq > section > .adm-b.wide:last-child { margin-top: auto; }
#adm .adm-grid2 > .adm-chart { margin: 0; }
/* кнопки-інструменти рівною сіткою */
#adm .adm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#adm .adm-tools.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#adm .adm-tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 98px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--a-line); background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.02)); color: #fff; font-family: var(--body); text-align: center; cursor: pointer; transition: transform .1s, border-color .2s, background .2s; }
#adm .adm-tools.c3 button { min-height: 84px; }
#adm .adm-tools button:active { transform: scale(.96); }
#adm .adm-tools button:hover { border-color: rgba(255,197,49,.55); }
#adm .adm-tools button img { width: 30px; height: 30px; object-fit: contain; }
#adm .adm-tools button b { font-size: 12px; font-weight: 900; line-height: 1.15; }
#adm .adm-tools button small { font-size: 10px; font-weight: 700; color: var(--a-mut); line-height: 1.15; }
#adm .adm-tools button.busy { opacity: .55; pointer-events: none; animation: admBusy .8s ease-in-out infinite alternate; }
@keyframes admBusy { to { border-color: var(--a-gold); } }
/* оголошення: живий біжучий рядок */
#adm .adm-marq { overflow: hidden; white-space: nowrap; margin-bottom: 10px; padding: 7px 0; border-radius: 10px; background: linear-gradient(90deg, #ffc531, #ff9a1a); color: #2a1a00; font-weight: 900; font-size: 13px; }
#adm .adm-marq span { display: inline-block; padding-left: 100%; animation: admMarq 12s linear infinite; }
#adm .adm-marq.off { background: rgba(255,255,255,.06); color: var(--a-mut); } #adm .adm-marq.off span { animation: none; padding-left: 0; width: 100%; text-align: center; }
@keyframes admMarq { to { transform: translateX(-100%); } }
#adm .adm-sw.big { justify-content: center; margin: 4px 0 12px; font-size: 14px; }
#adm .adm-sw.big i { width: 54px; height: 30px; border-radius: 15px; } #adm .adm-sw.big i::after { width: 24px; height: 24px; } #adm .adm-sw.big input:checked + i::after { transform: translateX(24px); }
#adm .adm-sw.big input:checked + i { background: linear-gradient(90deg, #ff6b74, #c81e2a); }
/* пуші: вибір дії, прев’ю, журнал */
#adm .adm-opens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#adm .adm-opens button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 12px; border: 1px solid var(--a-line); background: rgba(255,255,255,.04); color: var(--a-mut); font-family: var(--body); cursor: pointer; }
#adm .adm-opens button img { width: 24px; height: 24px; object-fit: contain; } #adm .adm-opens button small { font-size: 10px; font-weight: 900; }
#adm .adm-opens button.on { border-color: var(--a-gold); background: rgba(255,197,49,.14); color: #fff; box-shadow: 0 0 12px rgba(255,197,49,.25); }
#adm .adm-phone { margin: 6px auto 10px; max-width: 360px; padding: 12px; border-radius: 22px; background: linear-gradient(160deg, #1b2240, #0c1024); border: 1px solid rgba(255,255,255,.08); }
#adm .ap-n { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.93); color: #1b1f2e; text-align: left; }
#adm .ap-n img { width: 34px; height: 34px; border-radius: 9px; background: #0a1236; padding: 3px; object-fit: contain; flex: none; }
#adm .ap-n .grow { min-width: 0; } #adm .ap-n small { display: block; font-size: 10px; font-weight: 800; color: #6b7185; }
#adm .ap-n b { display: block; font-size: 13.5px; font-weight: 900; } #adm .ap-n span { display: block; font-size: 12.5px; font-weight: 700; color: #3a3f52; word-break: break-word; }
#adm .adm-2b { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
#adm .adm-2b .adm-b { margin: 0; padding: 12px; }
#adm .adm-seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 0 8px; padding: 4px; border-radius: 12px; background: rgba(5,10,30,.5); }
#adm .adm-seg3 button { padding: 7px 4px; border: 0; border-radius: 9px; background: none; color: var(--a-mut); font: 900 12px var(--body); cursor: pointer; }
#adm .adm-seg3 button.on { background: linear-gradient(#fff3a0, #ffc531); color: #2a1a00; }
#adm .adm-det { margin-top: 10px; text-align: center; } #adm .adm-det summary { cursor: pointer; font-size: 12px; font-weight: 900; color: var(--a-cyan); }
#adm .adm-det code { word-break: break-all; }
#adm .adm-hbars .hb { grid-template-columns: 96px 1fr 52px 40px; }
#adm .adm-hbars .hb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* інші вкладки: рівні відступи й центровані порожні стани */
#adm .adm-empty { text-align: center; }
#adm .adm-count, #adm .adm-live { justify-content: center; text-align: center; }
#adm .adm-actions .adm-b { min-height: 44px; }
@media (max-width: 520px) { #adm .adm-plog .pl-r { grid-template-columns: 1fr auto; grid-template-areas: "b t" "s s"; row-gap: 2px; padding: 6px 9px; } #adm .adm-plog .pl-r b { grid-area: b; } #adm .adm-plog .pl-r time { grid-area: t; } #adm .adm-plog .pl-r span { grid-area: s; } }
#adm .adm-row .money-col { min-width: 78px; align-items: flex-end; text-align: right; }
#adm .adm-row .money-col .money { justify-content: flex-end; }

/* ================= Адмін-панель v1.8.1: навігація-перемикач, рівні блоки ================= */
#adm { container-type: inline-size; }
#adm .adm-nav { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; overflow: visible; border-bottom: 0; background: none; }
#adm .an-arr { flex: none; width: 44px; height: 52px; border-radius: 14px; border: 1px solid var(--a-line); background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02)); color: #fff; font: 900 26px/1 var(--body); cursor: pointer; transition: transform .1s, background .2s; }
#adm .an-arr:active { transform: scale(.92); background: rgba(255,197,49,.2); }
#adm .an-cur { position: relative; flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; border-radius: 16px; border: 1px solid rgba(255,197,49,.55); background: linear-gradient(165deg, rgba(60,70,150,.85), rgba(22,30,80,.9)); box-shadow: 0 0 18px rgba(255,197,49,.18), inset 0 1px 0 rgba(255,255,255,.12); color: #fff; text-align: left; cursor: pointer; }
#adm .an-cur > img { width: 38px; height: 38px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
#adm .an-cur.flip > img { animation: anPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes anPop { from { transform: scale(.5) rotate(-12deg); opacity: 0; } }
#adm .an-cur .grow { min-width: 0; }
#adm .an-cur b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.1; background: linear-gradient(90deg, #fff3a0, #ffc531); -webkit-background-clip: text; background-clip: text; color: transparent; }
#adm .an-cur small { display: block; font-size: 10.5px; font-weight: 800; color: var(--a-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#adm .an-cur .chev { flex: none; width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(#fff3a0, #ffc531); position: relative; }
#adm .an-cur .chev::after { content: ''; position: absolute; left: 8px; top: 7px; width: 7px; height: 7px; border: solid #3d2200; border-width: 0 3px 3px 0; transform: rotate(45deg); }
#adm .an-badge, #adm .an-grid i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3b4a; color: #fff; font: 900 11px/20px var(--body); font-style: normal; text-align: center; box-shadow: 0 0 10px rgba(255,59,74,.6); }
#adm .an-badge[hidden] { display: none; }
#adm .an-dots { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--a-line); flex: none; justify-content: space-between; }
#adm .an-dots::-webkit-scrollbar { display: none; }
#adm .an-dots button { position: relative; flex: 1 0 30px; height: 34px; min-width: 30px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.04); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; }
#adm .an-dots button img { width: 22px; height: 22px; object-fit: contain; opacity: .55; transition: opacity .2s, transform .2s; }
#adm .an-dots button:hover img { opacity: .9; }
#adm .an-dots button.on { background: rgba(255,197,49,.18); border-color: rgba(255,197,49,.6); }
#adm .an-dots button.on img { opacity: 1; transform: scale(1.1); }
#adm .an-dots button.dot::after { content: ''; position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #ff3b4a; box-shadow: 0 0 6px #ff3b4a; }
/* аркуш з усіма розділами */
#adm .an-sheet .adm-sheet-h b { font-family: var(--display); font-weight: 400; }
#adm .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 2px 6px; }
#adm .an-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px 10px; border-radius: 16px; border: 1px solid var(--a-line); background: linear-gradient(165deg, rgba(40,56,120,.85), rgba(16,24,62,.9)); color: #fff; font-family: var(--body); cursor: pointer; animation: anIn .3s var(--d, 0ms) both cubic-bezier(.2,1.2,.4,1); }
@keyframes anIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
#adm .an-grid button img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
#adm .an-grid button b { font-size: 13px; font-weight: 900; }
#adm .an-grid button small { font-size: 9.5px; font-weight: 700; color: var(--a-mut); line-height: 1.15; text-align: center; }
#adm .an-grid button.on { border-color: var(--a-gold); box-shadow: 0 0 16px rgba(255,197,49,.35); background: linear-gradient(165deg, rgba(120,90,20,.55), rgba(40,30,10,.7)); }
#adm .an-grid button i { position: absolute; right: 6px; top: 6px; }
#adm .an-grid button:active { transform: scale(.95); }
/* ширина панелі завжди як у гри — жодних «десктопних» розкладок */
#adm .adm-kpis, #adm .adm-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
#adm .adm-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#adm .adm-grid2, #adm .adm-grid2.eq { grid-template-columns: minmax(0, 1fr) !important; }
#adm .adm-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #adm .adm-tools.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#adm .adm-kpis .kpi { min-height: 104px; padding: 10px 5px 9px; gap: 2px; }
#adm .adm-kpis .kpi img { width: 30px; height: 30px; margin-bottom: 3px; }
#adm .adm-kpis .kpi span { min-height: 0; font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 900; color: #b9c6f0; }
#adm .adm-kpis .kpi b { font-size: 19px; white-space: nowrap; overflow: visible; text-overflow: clip; }
#adm .adm-kpis .kpi small { font-size: 9.5px; color: #6fe3a0; }
#adm .adm-kpis.k4 .kpi { min-height: 86px; } #adm .adm-kpis.k4 .kpi b { font-size: 17px; }
#adm .adm-kpis .kpi.hot { border-color: rgba(255,90,90,.6); box-shadow: 0 0 18px rgba(255,59,74,.25); } #adm .kpi.hot b { color: #ff9a9a; }
@container (max-width: 380px) { #adm .adm-kpis .kpi b { font-size: 16px; } #adm .adm-tiles.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* порожні стани з іконкою */
#adm .adm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px; color: var(--a-mut); font-weight: 800; }
#adm .adm-empty img { width: 46px; height: 46px; object-fit: contain; opacity: .8; filter: grayscale(.2) drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
#adm .adm-card.mini-h { padding: 12px 12px 2px; } #adm .adm-card.mini-h .ac-h { border-bottom: 0; margin-bottom: 4px; } #adm .adm-card.mini-h .ac-h::after { display: none; }
/* рядок гравця: окремі блоки */
#adm .adm-plist { display: flex; flex-direction: column; gap: 8px; }
#adm .adm-prow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: linear-gradient(165deg, rgba(34,50,112,.78), rgba(14,22,58,.86)); border: 1px solid var(--a-line); cursor: pointer; transition: transform .12s, border-color .2s; }
#adm .adm-prow:active { transform: scale(.98); } #adm .adm-prow:hover { border-color: rgba(255,197,49,.5); }
#adm .adm-prow .av-s { position: relative; flex: none; width: 50px; height: 50px; }
#adm .pr-pos { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--body); color: #fff; background: rgba(255,255,255,.1); }
#adm .pr-pos.p1 { background: linear-gradient(#fff3a0, #ffc531); color: #3d2200; } #adm .pr-pos.p2 { background: linear-gradient(#f4f7ff, #9fb0d0); color: #1a2240; } #adm .pr-pos.p3 { background: linear-gradient(#ffc39a, #c4703a); color: #2a1200; }
#adm .pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#adm .pr-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
#adm .pr-name > b { font-size: 15px; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#adm .pr-name .tag { flex: none; }
#adm .pr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#adm .pc { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border-radius: 8px; background: rgba(5,10,30,.55); border: 1px solid var(--a-line); font-size: 11px; font-weight: 900; color: #cfd8ff; white-space: nowrap; }
#adm .pc img { width: 15px; height: 15px; object-fit: contain; }
#adm .pc.id { padding: 0 7px; color: var(--a-cyan); font-family: ui-monospace, monospace; }
#adm .pc.on { color: #7dff9a; border-color: rgba(79,224,122,.5); background: rgba(31,154,55,.15); } #adm .pc.on i { width: 7px; height: 7px; border-radius: 50%; background: #3ccf5a; box-shadow: 0 0 6px #3ccf5a; margin: 0 2px; }
#adm .pr-money { flex: none; display: flex; flex-direction: column; gap: 4px; width: 96px; }
#adm .m { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 5px; border-radius: 9px; font-size: 13px; }
#adm .m img { width: 18px; height: 18px; object-fit: contain; flex: none; }
#adm .m b { flex: 1; text-align: right; font-weight: 900; white-space: nowrap; }
#adm .m.b { background: rgba(31,154,55,.18); border: 1px solid rgba(79,224,122,.35); color: #8dffab; }
#adm .m.c { background: rgba(212,144,10,.18); border: 1px solid rgba(255,197,49,.35); color: #ffd76a; }
#adm .m.g { background: rgba(31,154,55,.22); border: 1px solid rgba(79,224,122,.45); color: #8dffab; justify-content: center; }
#adm .adm-plist.mini .adm-prow { padding: 7px 8px; } #adm .adm-plist.mini .av-s { width: 38px; height: 38px; } #adm .adm-plist.mini .pr-money { width: auto; }
@container (max-width: 360px) { #adm .pr-money { width: 84px; } #adm .adm-prow .av-s { width: 42px; height: 42px; } }
/* фільтри й пошук */
#adm .adm-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
#adm .adm-chips button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; font-size: 11px; min-width: 0; }
#adm .adm-chips button img { width: 20px; height: 20px; object-fit: contain; }
#adm .adm-chips.dur, #adm .adm-f .adm-chips { display: flex; flex-wrap: wrap; } #adm .adm-chips.dur button, #adm .adm-f .adm-chips button { flex-direction: row; padding: 6px 12px; }
#adm .adm-count { display: flex; align-items: center; justify-content: center; gap: 6px; } #adm .adm-count img { width: 18px; height: 18px; }
/* живий лічильник онлайну */
#adm .adm-livecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(79,224,122,.4); background: linear-gradient(165deg, rgba(20,90,60,.55), rgba(10,30,40,.8)); }
#adm .lc-pulse { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; }
#adm .lc-pulse i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #3ccf5a; animation: lcP 1.6s ease-out infinite; }
@keyframes lcP { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
#adm .lc-pulse img { width: 34px; height: 34px; }
#adm .adm-livecard small { display: block; font-size: 11px; font-weight: 900; color: #9fe8b8; } #adm .adm-livecard b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; color: #fff; line-height: 1; } #adm .adm-livecard span { font-size: 10px; color: var(--a-mut); font-weight: 700; }
/* картка гравця: валюти окремими блоками */
#adm .adm-pmoney { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#adm .adm-pmoney div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--a-line); }
#adm .adm-pmoney img { width: 30px; height: 30px; object-fit: contain; } #adm .adm-pmoney small { font-size: 10.5px; font-weight: 900; color: var(--a-mut); } #adm .adm-pmoney b { font-family: var(--display); font-weight: 400; font-size: 18px; color: #fff; }
#adm .adm-pmoney .b { background: rgba(31,154,55,.16); border-color: rgba(79,224,122,.35); } #adm .adm-pmoney .c { background: rgba(212,144,10,.16); border-color: rgba(255,197,49,.35); } #adm .adm-pmoney .k { background: rgba(120,90,255,.16); border-color: rgba(176,124,255,.35); }
/* донат */
#adm .adm-seg3.two { grid-template-columns: 1fr 1fr; margin: 0 0 10px; }
#adm .adm-seg3 button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; }
#adm .adm-seg3 button img { width: 20px; height: 20px; object-fit: contain; }
#adm .adm-seg3 button i { min-width: 18px; height: 18px; border-radius: 9px; background: #ff3b4a; color: #fff; font: 900 10.5px/18px var(--body); font-style: normal; padding: 0 5px; }
#adm .ad-sum { display: flex; gap: 6px; margin: 4px 0; } #adm .ad-sum .m { height: 28px; }
#adm .adm-grid2 .adm-chart { margin: 0; }
#adm .adm-sanc { display: flex; align-items: center; gap: 10px; } #adm .adm-sanc .grow { flex: 1; min-width: 0; } #adm .adm-sanc > img { width: 30px; height: 30px; object-fit: contain; flex: none; }
#adm .adm-hero .pr-chips { margin: 5px 0 4px; }
#adm .adm-hero .grow > b { font-size: 20px; }
#adm .adm-chart:not(.hov) .hx, #adm .adm-chart:not(.hov) .hd { opacity: 0; }
#adm .adm-chart { padding: 12px 12px 6px; border-radius: 18px; background: linear-gradient(165deg, rgba(34,50,112,.78), rgba(14,22,58,.86)); box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07); }
#adm .adm-ch-head span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #cfd8ff; }
#adm .adm-ch-head span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
#adm .adm-ch-head b { color: var(--c); text-shadow: 0 0 12px rgba(0,0,0,.4); }
#adm .adm-grid2 { gap: 12px; margin-bottom: 12px; }
/* ================= v1.8.2: плавні переходи та нові блоки ================= */
#adm .adm-main { overflow-anchor: none; scrollbar-gutter: stable; }
#adm .adm-main.busy > * { opacity: .55; pointer-events: none; transition: opacity .15s; }
#adm .adm-main.enter > * { animation: admFade .22s ease both; }
@keyframes admFade { from { opacity: 0; } }
#adm .an-dots { position: relative; }
#adm.loading .an-dots::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 35%; background: linear-gradient(90deg, transparent, var(--a-gold), transparent); animation: admBar .9s linear infinite; }
@keyframes admBar { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
#adm .an-cur, #adm .an-arr, #adm .an-dots button { -webkit-tap-highlight-color: transparent; }
/* онлайн: компактна смужка */
#adm .adm-onl { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 14px; border: 1px solid rgba(79,224,122,.4); background: linear-gradient(90deg, rgba(31,154,55,.25), rgba(14,22,58,.6)); }
#adm .adm-onl b { font-family: var(--display); font-weight: 400; font-size: 22px; color: #fff; line-height: 1; }
#adm .adm-onl .t { flex: 1; font-size: 12px; font-weight: 900; color: #9fe8b8; }
#adm .lc-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ccf5a; box-shadow: 0 0 0 0 rgba(60,207,90,.7); animation: lcDot 1.6s ease-out infinite; flex: none; }
@keyframes lcDot { to { box-shadow: 0 0 0 10px rgba(60,207,90,0); } }
#adm .adm-ib { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--a-line); background: rgba(255,255,255,.06); display: grid; place-items: center; cursor: pointer; flex: none; }
#adm .adm-ib img { width: 18px; height: 18px; object-fit: contain; } #adm .adm-ib:active { transform: scale(.92); }
#adm .adm-kpis.sm .kpi { min-height: 86px; } #adm .adm-kpis.sm .kpi b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* кільця утримання */
#adm .adm-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#adm .adm-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; }
#adm .adm-ring .rg { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); box-shadow: 0 0 18px rgba(0,0,0,.35); position: relative; }
#adm .adm-ring .rg::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #121a44; }
#adm .adm-ring .rg b { position: relative; font-family: var(--display); font-weight: 400; font-size: 22px; color: #fff; }
#adm .adm-ring span { font-size: 12.5px; font-weight: 900; color: #fff; } #adm .adm-ring small { font-size: 10.5px; font-weight: 800; color: var(--a-mut); }
/* 4 швидкі дії */
#adm .adm-tools.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
#adm .adm-tools.c4 button { min-height: 80px; padding: 8px 3px; } #adm .adm-tools.c4 button img { width: 28px; height: 28px; } #adm .adm-tools.c4 button b { font-size: 11.5px; } #adm .adm-tools.c4 button small { font-size: 9.5px; }
/* історія дій гравця */
#adm .adm-hist { display: flex; flex-direction: column; gap: 5px; max-height: 360px; overflow-y: auto; }
#adm .adm-hist .hi { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 11px; background: rgba(5,10,30,.45); border: 1px solid var(--a-line); }
#adm .adm-hist img { width: 26px; height: 26px; object-fit: contain; flex: none; }
#adm .adm-hist .grow { min-width: 0; } #adm .adm-hist b { display: block; font-size: 12.5px; font-weight: 900; color: #fff; }
#adm .adm-hist small { display: block; font-size: 11px; font-weight: 700; color: var(--a-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#adm .adm-hist time { font-size: 10.5px; font-weight: 800; color: var(--a-mut); white-space: nowrap; }
/* повідомлення в чат */
#adm .adm-send { display: flex; gap: 8px; } #adm .adm-send input { flex: 1; min-width: 0; } #adm .adm-send .adm-b { flex: none; }
img.ri, #toast span img.ri, .don-cf-bonus img.ri { display: inline-block; width: auto !important; height: 1.25em !important; margin: 0 2px 0 1px !important; vertical-align: -.28em; position: static !important; flex: none; filter: none; }
#adm .adm-ib { color: #fff; font: 900 18px/1 var(--body); }
#adm .adm-row { display: flex; align-items: center; gap: 10px; } #adm .adm-row > .grow { flex: 1; min-width: 0; }
#adm .adm-row .msg { display: block; word-break: break-word; } #adm .adm-row .msg img { height: 1.3em; vertical-align: -.3em; }

/* ======================= Банер подій ======================= */
#gbanner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 60;
  width: min(440px, calc(100% - 16px)); pointer-events: none; }
#gbanner.in .gb { animation: gbIn .38s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes gbIn { from { opacity: 0; transform: translateY(-22px) scale(.95); } to { opacity: 1; transform: none; } }
.gb { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 16px;
  background: linear-gradient(135deg, #1d3f8f, #14255e 70%); border: 1.5px solid #ffc531;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.gb::before { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255,197,49,.5); animation: gbPulse 2.4s infinite; }
@keyframes gbPulse { 0% { box-shadow: 0 0 0 0 rgba(255,197,49,.45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255,197,49,0); } }
.gb-ic { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.gb-txt { flex: 1; min-width: 0; }
.gb-txt b { display: block; font: 900 14px var(--body); color: #fff; line-height: 1.15; }
.gb-txt small { display: block; font: 800 11px var(--body); color: #cfe0ff; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-txt small b { display: inline; color: #ffd978; }
.gb-go { flex: none; padding: 8px 13px; border: 0; border-radius: 11px; font: 900 13px var(--body); color: #3a2200; cursor: pointer;
  background: linear-gradient(#ffd96b, #f0a81e); box-shadow: 0 3px 0 #a76b00, 0 5px 10px rgba(0,0,0,.35); }
.gb-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #a76b00; }
.gb-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #cfe0ff;
  font: 900 13px var(--body); cursor: pointer; }
.gb-x:active { background: rgba(255,255,255,.22); }
.m-open #gbanner { display: none; }

/* ======================= Інвестори в корпорацію ======================= */
.inv-load { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: #9fb2e8; font: 800 13px var(--body); }
.inv-load img { width: 56px; height: 56px; object-fit: contain; opacity: .7; animation: ihFloat 1.6s ease-in-out infinite alternate; }

/* --- шапка --- */
.ivhero { position: relative; text-align: center; padding: 18px 14px 14px; margin-bottom: 10px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(90% 90% at 50% 0%, #2a57c4 0%, #16286a 45%, #0d1840 100%); border: 1.5px solid #3f62cc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.35); }
.ivhero::before { content: ''; position: absolute; top: -60%; left: -40%; width: 60%; height: 220%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform: rotate(18deg); animation: ivShine 5.5s ease-in-out infinite; }
@keyframes ivShine { 0%, 65% { transform: translateX(-60%) rotate(18deg); } 100% { transform: translateX(320%) rotate(18deg); } }
.ivhero-art { position: relative; width: 92px; height: 92px; margin: 0 auto 6px; }
.ivh-glow { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,210,110,.38), transparent 68%); animation: ivGlow 3.2s ease-in-out infinite alternate; }
@keyframes ivGlow { from { transform: scale(.88); opacity: .65; } to { transform: scale(1.1); opacity: 1; } }
.ivh-main { position: relative; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.5)); }
.ivh-s { position: absolute; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.ivh-s.a { right: -6px; top: 2px; animation: ihFloat 2.8s ease-in-out infinite alternate; }
.ivh-s.b { left: -8px; bottom: 4px; animation: ihFloat 3.6s ease-in-out infinite alternate; animation-delay: -1.7s; }
@keyframes ihFloat { from { transform: translateY(5px); } to { transform: translateY(-7px); } }
.ivhero-t { display: block; font-family: var(--display); font-size: 25px; letter-spacing: .5px; color: #ffe27a; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.ivhero-p { margin: 4px auto 0; max-width: 300px; font: 800 12px/1.4 var(--body); color: #cfe0ff; }
.ivdays { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.ivdays span { min-width: 30px; padding: 4px 0; border-radius: 9px; font: 900 11px var(--body); color: #ffe9b0; text-transform: uppercase;
  background: rgba(255,197,49,.14); border: 1px solid rgba(255,197,49,.35); }

/* --- стан --- */
.ivstatus { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px;
  font: 800 12.5px var(--body); color: #cfe0ff; background: #16214f; border: 1.5px solid #34489a; }
.ivstatus i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #7a8cc0; }
.ivstatus b { color: #ffd978; }
.ivstatus.on { border-color: #3ccf5a; color: #c9ffd8; box-shadow: 0 0 14px rgba(60,207,90,.2); }
.ivstatus.on i { background: #3ccf5a; animation: ivDot 1.8s ease-in-out infinite; }
@keyframes ivDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(60,207,90,.6); } 60% { box-shadow: 0 0 0 7px rgba(60,207,90,0); } }
.ivstatus.wait i { background: #ffc531; }
.ivstatus.off { opacity: .8; }

.ivsec { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 8px;
  font-family: var(--display); font-size: 13px; color: #ffe27a; text-transform: uppercase; letter-spacing: .6px; }
.ivsec::before, .ivsec::after { content: ''; height: 1px; flex: 1; max-width: 70px; background: linear-gradient(90deg, transparent, rgba(255,197,49,.45)); }
.ivsec::after { background: linear-gradient(270deg, transparent, rgba(255,197,49,.45)); }

/* --- режими --- */
.ivmodes { display: flex; flex-direction: column; gap: 8px; }
.ivm { position: relative; display: block; width: 100%; text-align: center; padding: 11px 10px 10px; border-radius: 18px; cursor: pointer; color: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 22%, #16214f), #101a46); border: 1.5px solid color-mix(in srgb, var(--mc) 55%, #34489a);
  transition: transform .18s ease, box-shadow .18s ease; }
.ivm:disabled { cursor: default; }
.ivm.on { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc), 0 6px 18px color-mix(in srgb, var(--mc) 40%, transparent); transform: translateY(-1px); }
.ivm-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ivm-top img { width: 38px; height: 38px; object-fit: contain; }
.ivm-top b { font: 900 16px var(--body); color: #fff; }
.ivm-top em { font-style: normal; font: 900 11.5px var(--body); color: #06270f; padding: 3px 9px; border-radius: 9px;
  background: linear-gradient(#ffd96b, #f0a81e); white-space: nowrap; }
.ivm-rw { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 9px; }
.ivm-rw span { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 9px; font: 900 11.5px var(--body); color: #ffe9b0;
  background: rgba(4,10,32,.5); border: 1px solid rgba(120,150,230,.25); }
.ivm-rw span.me { color: #7dffa0; border-color: rgba(60,207,90,.4); }
.ivm-rw img { width: 14px; height: 14px; object-fit: contain; }
.ivm-rev { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; font: 900 12px var(--body); color: #cfe0ff; }
.ivm-rev img { width: 16px; height: 16px; object-fit: contain; }
.ivm-rev small { font: 800 10px var(--body); color: #8fa3d8; }
.ivm-tick { position: absolute; top: 8px; right: 10px; font-style: normal; font: 900 15px var(--body); color: var(--mc); }

.ivgo { margin: 12px 0 6px; }
.ivhint { text-align: center; font: 800 11.5px/1.4 var(--body); color: #9fb2e8; margin: 6px 0 2px; }
.ivhint.warn { color: #ffd978; }

/* --- коротко --- */
.ivrules { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ivr { text-align: center; padding: 10px 6px; border-radius: 14px; background: rgba(10,18,54,.55); border: 1px solid #2b3c80; }
.ivr img { width: 30px; height: 30px; object-fit: contain; display: block; margin: 0 auto 5px; }
.ivr b { display: block; font: 900 12px var(--body); color: #fff; }
.ivr small { display: block; font: 800 10.5px/1.3 var(--body); color: #9fb2e8; margin-top: 1px; }

/* --- підсумок минулих --- */
.ivlast { border-radius: 16px; padding: 11px; background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; }
.ivlast.ok { border-color: #3ccf5a; } .ivlast.no { border-color: #d2402f; }
.ivl-h { display: flex; align-items: center; gap: 10px; }
.ivl-h img { width: 40px; height: 40px; object-fit: contain; }
.ivl-h div { flex: 1; text-align: left; }
.ivl-h b { display: block; font: 900 14px var(--body); color: #fff; }
.ivl-h small { display: block; font: 800 11px var(--body); color: #9fb2e8; }
.ivl-h em { font-style: normal; font-family: var(--display); font-size: 20px; }
.ivlast.ok .ivl-h em { color: #7dffa0; } .ivlast.no .ivl-h em { color: #ff8b7a; }
.ivl-p { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 9px; }
.ivl-p span { font: 800 11px var(--body); color: #9fb2e8; background: rgba(0,0,0,.25); border-radius: 9px; padding: 4px 8px; }
.ivl-p span.pay { color: #ffe9b0; } .ivl-p span b { color: #fff; }

/* --- живі переговори --- */
.ivlive { position: relative; text-align: center; border-radius: 20px; padding: 14px 12px 12px; margin-bottom: 10px; overflow: hidden;
  background: radial-gradient(110% 110% at 50% 0%, color-mix(in srgb, var(--mc) 42%, #16214f) 0%, #0f1943 70%); border: 1.5px solid var(--mc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.ivlive-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 11px; font: 900 11.5px var(--body); color: #fff;
  background: rgba(4,10,32,.45); border: 1px solid rgba(255,255,255,.16); }
.ivlive-tag img { width: 18px; height: 18px; object-fit: contain; }
.ivlive-t { font-family: var(--display); font-size: 19px; color: #ffe27a; margin-top: 8px; }
.ivlive-sub { margin-top: 8px; font: 800 11.5px var(--body); color: #cfe0ff; }
.ivlive-sub b { color: #ffd978; font-variant-numeric: tabular-nums; }
.ivclock { margin: 8px 0 10px; }
.ivclock b { display: block; font-family: var(--display); font-size: 36px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ivclock small { display: block; font: 800 11px var(--body); color: #cfe0ff; margin-top: 3px; }
.ivgoal { display: flex; align-items: center; gap: 10px; margin: 11px 0 0; }
.ivl-sec { flex: none; font-style: normal; font-family: var(--display); font-size: 27px; line-height: 1; color: #ffe27a; min-width: 52px;
  padding: 7px 4px; border-radius: 13px; background: rgba(4,10,32,.5); border: 1px solid rgba(255,197,49,.35); font-variant-numeric: tabular-nums; }
.ivl-sec.hot { color: #ff8b7a; border-color: rgba(255,120,100,.6); background: rgba(90,20,15,.45); animation: ivPulse .9s ease-in-out infinite alternate; }
@keyframes ivPulse { from { box-shadow: 0 0 0 0 rgba(255,120,100,0); } to { box-shadow: 0 0 14px 2px rgba(255,120,100,.45); } }
.ivgoal .ivbar { flex: 1; margin: 0; }

/* смужки рухаються через transform — браузер не перераховує верстку щокадру */
.ivbar { position: relative; height: 12px; margin-top: 9px; border-radius: 7px; overflow: hidden;
  background: rgba(4,10,32,.65); border: 1px solid rgba(90,120,210,.45); box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
.ivbar > i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); border-radius: 6px;
  background: linear-gradient(90deg, #3fd3ff, #7dffa0); box-shadow: 0 0 10px rgba(80,220,160,.45); }
.ivbar > span { position: relative; display: block; text-align: center; font: 900 11px/22px var(--body); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.ivbar.big { height: 24px; border-radius: 12px; }
.ivbar.big > i { border-radius: 11px; }
.ivbar.big::after { content: ''; position: absolute; right: 3px; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.4); }
.ivbar.thin { height: 6px; margin-top: 8px; border-radius: 4px; }
.ivbar.thin > i { border-radius: 3px; background: linear-gradient(90deg, #ffd96b, #ff8b3a); box-shadow: 0 0 8px rgba(255,160,60,.5); }

.ivme { text-align: center; padding: 11px; margin-bottom: 9px; border-radius: 16px; background: #16214f; border: 1.5px solid #34489a; }
.ivme.ok { border-color: #3ccf5a; } .ivme.no { border-color: #d2402f; }
.ivme img { width: 32px; height: 32px; object-fit: contain; display: block; margin: 0 auto 5px; }
.ivme b { font: 900 13px var(--body); color: #fff; }
.ivme small { display: block; font: 800 11.5px var(--body); color: #9fb2e8; margin-top: 3px; }
.ivme small b { color: #7dffa0; }

/* --- питання --- */
.ivq { border-radius: 20px; padding: 13px 12px; margin-bottom: 10px; background: linear-gradient(#20307a, #141f52); border: 1.5px solid #4a63c8;
  animation: ivQIn .28s ease-out both; }
@keyframes ivQIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ivq-who { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 8px; }
.ivq-who img { width: 30px; height: 30px; object-fit: contain; }
.ivq-who span { font: 800 10.5px var(--body); color: #9fb2e8; text-transform: uppercase; letter-spacing: .5px; }
.ivq-t { text-align: center; font: 900 16px/1.32 var(--body); color: #fff; margin-bottom: 11px; }
.ivq-opts { display: flex; flex-direction: column; gap: 6px; }
.ivo { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 11px 10px; border-radius: 14px; cursor: pointer;
  background: #16214f; border: 1.5px solid #34489a; color: #fff; font: 800 13px/1.25 var(--body); transition: transform .12s ease, background .15s ease; }
.ivo i { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-style: normal;
  font: 900 12px var(--body); background: rgba(255,255,255,.1); color: #cfe0ff; }
.ivo:not(.lock):active { transform: scale(.98); background: #1d2d6b; }
.ivo.lock { cursor: default; }
.ivo.dim { opacity: .5; }
.ivo.right { border-color: #3ccf5a; background: rgba(60,207,90,.2); } .ivo.right i { background: #3ccf5a; color: #06270f; }
.ivo.wrong { border-color: #d2402f; background: rgba(210,64,47,.2); } .ivo.wrong i { background: #d2402f; color: #fff; }
.ivq-wait { margin-top: 10px; text-align: center; font: 800 13px var(--body); color: #9fb2e8; }
.ivq-wait b.ok { color: #7dffa0; } .ivq-wait b.no { color: #ff8b7a; }

.ivsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ivsum > div { text-align: center; padding: 8px 3px; border-radius: 13px; background: rgba(10,18,54,.6); border: 1px solid #2b3c80; }
.ivsum img { width: 24px; height: 24px; object-fit: contain; }
.ivsum b { display: block; font: 900 15px var(--body); color: #ffe27a; margin-top: 2px; }
.ivsum small { display: block; font: 800 10px var(--body); color: #8fa3d8; }

.ivparts { display: flex; flex-direction: column; gap: 5px; }
.ivp { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 13px; background: #16214f; border: 1px solid #2f4390; }
.ivp .fav { width: 32px; height: 32px; flex: none; position: relative; overflow: visible; }
.ivp b { flex: 1; min-width: 0; font: 900 12.5px var(--body); color: #fff; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivp small { flex: none; font: 800 10.5px var(--body); color: #9fb2e8; }
.ivp em { flex: none; min-width: 42px; text-align: right; font-style: normal; font: 900 13px var(--body); color: #7dffa0; }

/* слабкі пристрої: прибираємо сяйва й важкі тіні */
#app.q-low .ivhero::before, #app.q-low .ivh-glow { display: none; }
#app.q-low .ivbar > i, #app.q-low .ivm.on { box-shadow: none; }
#app.q-low .ivh-main, #app.q-low .ivh-s { filter: none; }

/* ======================= Бонус-коди в адмін-панелі ======================= */
.adm-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; }
.adm-code-v { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1.5px; font-size: 15px; }
.code-row.off { opacity: .6; }
.code-row.off .adm-code-v { text-decoration: line-through; }
.adm-row-act { display: flex; gap: 4px; flex: none; }
.adm-b.sq { width: 34px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.adm-b.ok { background: linear-gradient(#3ccf5a, #22a03f); color: #fff; }

/* ======================= Коди в налаштуваннях гри ======================= */
.cdbox { background: linear-gradient(#1b2a66, #111b4a); border: 1.5px solid #34489a; border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.cd-h { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.cd-h img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.cd-h b { display: block; font: 900 14px var(--body); color: #fff; }
.cd-h small { display: block; font: 800 11px/1.3 var(--body); color: #9fb2e8; margin-top: 1px; }
.cd-note { margin-top: 8px; font: 800 12px var(--body); color: #9fb2e8; text-align: center; }
.cd-note b { color: #ffd978; font-size: 13px; }
.cd-done { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px 10px; border-radius: 12px;
  font: 800 12px var(--body); color: #7dffa0; background: rgba(60,207,90,.12); border: 1px solid rgba(60,207,90,.35); }
.cd-in { display: flex; gap: 6px; margin-top: 8px; }
.cd-in input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase;
  background: #0a1236; border: 1.5px solid #2f4390; border-radius: 12px; color: #fff; font-weight: 800; font-size: 15px; padding: 10px 12px; }
.cd-in input::placeholder { letter-spacing: 1px; color: #5f7099; }
.cd-in .btn { flex: none; }
.cd-my { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; border-radius: 13px; background: rgba(10,18,54,.6); border: 1px solid #2b3c80; }
.cd-my img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.cd-my .grow { min-width: 0; }
.cd-my small { display: block; font: 800 11px var(--body); color: #9fb2e8; }
.cd-my b { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; font-size: 17px; color: #ffe27a; }
.cd-copy { flex: none; padding: 8px 12px; border: 0; border-radius: 11px; font: 900 12px var(--body); color: #06270f; cursor: pointer;
  background: linear-gradient(#7dffa0, #3ccf5a); }
.cd-copy:active { transform: translateY(1px); }

/* ======================= Корпорації в адмін-панелі ======================= */
.corp-row { cursor: pointer; }
.cemb { object-fit: contain; }
.cemb.big { width: 64px; height: 64px; object-fit: contain; flex: none; }
.adm-corp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.adm-corp-top .grow { min-width: 0; }
.adm-xp { position: relative; height: 20px; border-radius: 10px; overflow: hidden; background: rgba(4,10,32,.6); border: 1px solid rgba(90,120,210,.4); }
.adm-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3fd3ff, #7dffa0); }
.adm-xp span { position: relative; display: block; text-align: center; font: 900 11px/20px var(--body); color: #fff; text-shadow: 0 1px 2px #000; }
.adm-blds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; }
.adm-bld { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 12px; background: rgba(10,18,54,.5); border: 1px solid #2b3c80; }
.adm-bld img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.adm-bld b { flex: 1; min-width: 0; font: 800 11.5px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bld input { width: 54px; flex: none; text-align: center; }
.cmem-row.dir { border-color: rgba(255,197,49,.5); }
.dirtag { font: 900 11px var(--body); color: #06270f; padding: 5px 9px; border-radius: 9px; background: linear-gradient(#ffd96b, #f0a81e); white-space: nowrap; }
.adm-sel { padding: 6px 8px; border-radius: 10px; font: 800 12px var(--body); }
.adm-search { display: flex; gap: 6px; }
.adm-search input { flex: 1; min-width: 0; }
/* ---- застосунок Android ---- */
.au-corner { position: absolute; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-sat, 0px))); right: 12px; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.au-corner .au-lang { position: relative; top: auto; right: auto; }
.au-apk { display: flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; border: 1.5px solid #7dff9a; background: linear-gradient(160deg, #2fbf5b, #137a35); color: #fff; font: 900 14px var(--body, inherit); text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.au-apk svg { width: 20px; height: 20px; color: #d9ffe3; }
.au-apk:active { transform: scale(.95); }
.apk-card { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid rgba(125,255,154,.6); background: linear-gradient(160deg, rgba(34,140,70,.55), rgba(12,40,30,.75)); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.apk-card .apk-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, #3ddc72, #15843a); color: #eaffef; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.apk-card .apk-ic svg { width: 28px; height: 28px; }
.apk-card .grow { min-width: 0; } .apk-card b { display: block; color: #fff; font-size: 15px; } .apk-card small { display: block; color: #bff5cc; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.apk-card .apk-dl { flex: none; padding: 9px 14px; font-size: 14px; text-decoration: none; }
/* ---- сторінки списків жителів ---- */
.rpbox { margin: 10px 0 4px; padding: 10px 10px 8px; border-radius: 18px; background: linear-gradient(165deg, rgba(40,58,130,.85), rgba(16,24,64,.9)); border: 1.5px solid rgba(120,160,255,.35); box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
.rpager { display: flex; align-items: center; gap: 8px; }
.rpager .rp-arr { flex: none; width: 44px; height: 40px; border-radius: 13px; border: 0; background: linear-gradient(#5f8cff, #2c55d6); color: #fff; font: 900 24px/1 inherit; font-family: inherit; box-shadow: 0 3px 0 #1a3590; cursor: pointer; }
.rpager .rp-arr:disabled { opacity: .35; box-shadow: none; }
.rpager .rp-arr:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #1a3590; }
.rp-nums { flex: 1; display: flex; justify-content: center; gap: 6px; }
.rp-nums button { min-width: 38px; height: 38px; padding: 0 6px; border-radius: 12px; border: 1.5px solid rgba(150,180,255,.35); background: rgba(6,12,40,.55); color: #cfd8ff; font: 900 15px inherit; font-family: inherit; cursor: pointer; }
.rp-nums button.on { background: linear-gradient(#fff27a, #ffc531); color: #3d2200; border-color: #fff3a0; box-shadow: 0 0 12px rgba(255,197,49,.5); opacity: 1; }
.rp-info { margin-top: 6px; text-align: center; font-size: 11.5px; font-weight: 800; color: #9fb0e8; }
h3.rsub { margin: 12px 2px 6px; }
.ct3-rw3 { grid-template-columns: 1fr 1fr; }
/* ================= v1.9.2: легші ефекти та плавність ================= */
/* довгі списки у вікнах: браузер не малює рядки за межами екрана */
#m-body .row, #m-body .cmem2, #m-body .ctask3, #m-body .mailrow, #m-body .newsrow, #m-body .cbld2, #m-body .ivp { content-visibility: auto; contain-intrinsic-size: auto 86px; }
#m-body { overscroll-behavior: contain; scrollbar-width: none; }
#m-body::-webkit-scrollbar { display: none; }
#m-body .shine::after { animation-duration: 4.6s; }
.btn, .rtab, .ctabs button, .rp-nums button, .rp-arr { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.rtabs .rtab, .ctabs button { transition: background .18s, color .18s, box-shadow .18s; }
/* слабкий телефон / режим «низька якість»: без нескінченних анімацій у вікнах */
body.q-low #m-body *, body.q-low #m-body *::before, body.q-low #m-body *::after { animation-iteration-count: 1 !important; }
body.q-low .shine::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
.ctabs button { position: relative; }
.ctabs .ctplus { position: absolute; top: -6px; right: -4px; width: 22px !important; height: 22px !important; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); animation: ctPlus 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes ctPlus { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
#app.adm-open #tower *, #app.adm-open #sky * { animation-play-state: paused !important; }