:root {
  color-scheme: dark;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --arcade-font: "Arial Black", Impact, "Trebuchet MS", sans-serif;
  --premium-font: "Trebuchet MS", "Gill Sans", "Optima", "Arial Narrow", sans-serif;
  --ink: #0a0908;
  --panel: rgba(12, 14, 14, 0.94);
  --line: #6d3b16;
  --gold: #ffb20f;
  --orange: #ff6a00;
  --green: #4f9e17;
  --tg-top-safe: max(92px, calc(env(safe-area-inset-top, 0px) + 34px), calc(var(--tg-content-safe-area-inset-top, 0px) + 34px));
  --tg-bottom-safe: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --screen-bg-y: max(34px, calc(var(--tg-top-safe) - 58px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #050403;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  color: #fff3da;
  background:
    radial-gradient(circle at 50% 20%, rgba(120, 51, 8, 0.18), transparent 42%),
    #050403;
}

.admin-page-body {
  min-height: 100dvh;
  padding: calc(22px + var(--tg-top-safe)) 14px calc(22px + var(--tg-bottom-safe));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .62)),
    url("assets/tasks-background-v2.png") center top / cover no-repeat,
    #090604;
}

.admin-page {
  width: min(820px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.admin-page-head,
.admin-stats-panel {
  border: 2px solid #5d3415;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 141, 25, .12), transparent 42%),
    rgba(10, 10, 9, .92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 181, 54, .22),
    0 0 22px rgba(255, 97, 13, .12);
}

.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.admin-page-head span {
  display: block;
  color: #ffb02f;
  font: 800 12px/1 var(--premium-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-page-head h1 {
  margin: 4px 0 0;
  color: #fff1c8;
  font: 900 clamp(24px, 7vw, 42px)/.95 var(--arcade-font);
  letter-spacing: .04em;
  text-shadow: 0 2px 0 #4b1604, 0 0 14px rgba(255, 112, 18, .35);
}

.admin-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-page-actions button {
  min-height: 38px;
  border: 2px solid #3a1606;
  border-radius: 5px;
  padding: 0 12px;
  color: #fff0bd;
  background:
    linear-gradient(180deg, rgba(255, 238, 126, .32), transparent 26%),
    linear-gradient(180deg, #ff9a0b 0%, #e55b05 72%, #993108 100%);
  box-shadow: inset 0 0 0 1px #ffc13d, 0 3px 0 #120604;
  font: 800 13px/1 var(--premium-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-stats-panel {
  padding: 14px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-stat-card {
  min-height: 78px;
  border: 1px solid rgba(164, 88, 24, .82);
  border-radius: 7px;
  padding: 9px;
  background:
    linear-gradient(180deg, rgba(95, 53, 17, .58), rgba(12, 9, 7, .9)),
    #100b08;
  box-shadow: inset 0 0 0 1px rgba(255, 180, 63, .12);
}

.admin-stat-card span {
  display: block;
  min-height: 28px;
  color: #d9b983;
  font: 700 10px/1.2 var(--premium-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #fff2cb;
  font: 900 clamp(22px, 6vw, 34px)/1 var(--arcade-font);
  text-shadow: 0 2px 0 #4b1604, 0 0 12px rgba(255, 140, 20, .22);
}

.admin-status {
  margin: 10px 0 0;
  color: #b8905a;
  font: 700 12px/1.3 var(--premium-font);
}

.admin-denied {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255, 88, 35, .5);
  border-radius: 8px;
  color: #ffd1b0;
  background: rgba(47, 12, 6, .72);
  font: 800 14px/1.35 var(--premium-font);
}

.admin-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-section-title span {
  color: #ffb02f;
  font: 800 11px/1 var(--premium-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-section-title strong {
  color: #fff1c8;
  font: 900 18px/1 var(--arcade-font);
  letter-spacing: .04em;
}

.admin-create-form {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr .85fr .75fr .75fr .9fr auto;
  gap: 8px;
  align-items: end;
}

.admin-create-form label {
  display: grid;
  gap: 4px;
  color: #d9b983;
  font: 800 10px/1.2 var(--premium-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-create-form input,
.admin-create-form select {
  min-width: 0;
  height: 34px;
  border: 1px solid #784116;
  border-radius: 5px;
  padding: 0 8px;
  color: #fff0c7;
  background: rgba(7, 6, 5, .88);
  font: 800 12px/1 var(--premium-font);
  outline: none;
}

.admin-create-form button,
.admin-created-task button {
  min-height: 34px;
  border: 2px solid #3a1606;
  border-radius: 5px;
  padding: 0 10px;
  color: #fff0bd;
  background:
    linear-gradient(180deg, rgba(255, 238, 126, .3), transparent 26%),
    linear-gradient(180deg, #ff9a0b 0%, #df5705 74%, #8c2c07 100%);
  box-shadow: inset 0 0 0 1px #ffc13d, 0 2px 0 #120604;
  font: 900 11px/1 var(--premium-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-created-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.admin-created-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(164, 88, 24, .62);
  border-radius: 6px;
  padding: 8px;
  background: rgba(7, 6, 5, .62);
}

.admin-created-task b,
.admin-created-task strong {
  color: #ffe4a7;
  font: 900 12px/1.2 var(--premium-font);
}

.admin-created-task span {
  display: block;
  margin-top: 3px;
  color: #c7a77a;
  font: 700 11px/1.25 var(--premium-font);
}

@media (max-width: 430px) {
  .admin-page-body { padding-inline: 10px; }
  .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-page-head { align-items: flex-start; flex-direction: column; }
  .admin-page-actions { width: 100%; justify-content: stretch; }
  .admin-page-actions button { flex: 1; }
  .admin-create-form { grid-template-columns: 1fr 1fr; }
  .admin-create-form label:nth-child(1),
  .admin-create-form label:nth-child(2),
  .admin-create-form button { grid-column: 1 / -1; }
  .admin-created-task { grid-template-columns: 1fr; }
}

button { font: inherit; color: inherit; }

.loading-screen {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: calc(24px + var(--tg-top-safe)) 22px calc(30px + var(--tg-bottom-safe));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .06) 62%, rgba(0, 0, 0, .62) 100%),
    #080504 url("assets/loading-screen.webp?v=2") center / cover no-repeat;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s ease, visibility .42s ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-ui {
  width: min(76vw, 430px);
  display: grid;
  gap: 12px;
  justify-items: center;
  transform: translateY(-2vh);
}

.loading-ui strong {
  font-family: var(--premium-font);
  font-size: clamp(25px, 7vw, 46px);
  font-weight: 700;
  letter-spacing: .16em;
  color: #ffe7a4;
  text-shadow:
    0 2px 0 #4b1700,
    0 0 8px #ff5c00,
    0 0 22px rgba(255, 106, 0, .82);
  animation: loadingTextPulse 1.4s ease-in-out infinite;
}

.loading-bar {
  position: relative;
  width: 100%;
  height: clamp(24px, 6vw, 36px);
  display: block;
  padding: 5px;
  border: 3px solid #ff7a00;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(90, 20, 0, .88), rgba(24, 7, 1, .96)),
    #150704;
  box-shadow:
    inset 0 0 0 2px rgba(255, 225, 95, .35),
    0 0 7px #ff5a00,
    0 0 22px rgba(255, 88, 0, .78);
  overflow: hidden;
}

.loading-bar i {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--loader-progress, .08) * 100%);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #ff7a00, #ffc333 48%, #fff19a),
    #ff9b00;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .42),
    inset 0 -3px 0 rgba(136, 43, 0, .42),
    0 0 15px rgba(255, 178, 15, .9);
  transition: width .24s ease;
}

.loading-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 8px, rgba(255, 255, 255, 0) 8px 17px);
  mix-blend-mode: screen;
}

@keyframes loadingFill {
  0% { width: 10%; }
  52% { width: 72%; }
  82% { width: 92%; }
  100% { width: 18%; }
}

@keyframes loadingTextPulse {
  0%, 100% { opacity: .84; filter: brightness(.95); }
  50% { opacity: 1; filter: brightness(1.18); }
}

.app-shell { min-height: 100svh; min-height: 100dvh; display: grid; place-items: start center; }

.game {
  position: relative;
  width: min(100%, 720px);
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #0b0806 url("assets/snackify-kitchen.png") center var(--screen-bg-y) / 100% auto no-repeat;
  box-shadow: 0 0 80px #000;
  padding: calc(var(--tg-top-safe) + 10px) 14px calc(92px + var(--tg-bottom-safe));
}

.game[data-screen="tasks"] {
  background: #0b0806 url("assets/tasks-background.png?v=5") center var(--screen-bg-y) / cover no-repeat;
}

.game[data-screen="bonuses"] {
  background: #0b0806 url("assets/bonuses-background.png?v=5") center var(--screen-bg-y) / 121% auto no-repeat;
}

.game[data-screen="friends"] {
  background: #0b0806 url("assets/friends-background-v3.png?v=1") center calc(var(--screen-bg-y) - 24px) / 150% auto no-repeat;
}

.game[data-screen="wallet"] {
  background: #0b0806 url("assets/wallet-background-v2.png?v=3") center var(--screen-bg-y) / 138% auto no-repeat;
}

.game::before { content: none; }

.game::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0 8%, transparent 20% 58%, rgba(5,4,3,.28) 70%, #080706 100%);
}

.panel {
  border: 2px solid #4d321e;
  background: linear-gradient(180deg, rgba(15,18,18,.97), rgba(7,9,9,.96));
  box-shadow: inset 0 0 0 1px #17100c, 0 3px 0 #000;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

.topbar { display: grid; grid-template-columns: 1.45fr 1fr .8fr; gap: 8px; position: relative; z-index: 6; }

.profile { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px; text-align: left; }

.avatar {
  display: grid; place-items: center; flex: 0 0 46px; height: 46px;
  border: 2px solid #e87c16; border-radius: 4px; color: #301406; font-weight: 1000;
  background: radial-gradient(circle at 50% 32%, #ffe0a1 0 24%, transparent 25%), linear-gradient(#f3401e 0 35%, #f49b32 36% 100%);
  text-shadow: 0 1px #fff0bd;
}

.profile-copy { display: grid; min-width: 0; flex: 1; line-height: 1.05; }
.profile-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 3vw, 20px); }
.profile-copy > span:not(.xp-track) { color: #ffd08a; font-size: 11px; margin-top: 4px; }
.xp-track { height: 6px; border-radius: 2px; margin-top: 6px; background: #23140b; overflow: hidden; }
.xp-track i { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, #ff7a00, #ffbf00); }

.currency { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px; }
.currency strong { min-width: 0; flex: 1; font-size: clamp(14px, 3.3vw, 20px); white-space: nowrap; }
.add { width: 28px; height: 32px; padding: 0; border: 2px solid #6e8e39; border-radius: 3px; background: linear-gradient(#70c044,#347d1f); font-size: 25px; line-height: 1; text-shadow: 0 2px #184313; box-shadow: inset 0 0 0 1px #a7e166; }

.coin { display: inline-grid; place-items: center; border-radius: 50%; color: #713700; font-weight: 1000; background: radial-gradient(circle, #fff270 0 20%, #ffc400 22% 56%, #c97400 58% 70%, #ffdb3f 72%); border: 1px solid #7b4100; text-shadow: 0 1px #fff; }
.coin.small { width: 26px; height: 26px; font-size: 11px; }
.coin.tiny { width: 18px; height: 18px; font-size: 8px; }
.gem { width: 25px; height: 25px; transform: rotate(45deg); background: linear-gradient(135deg, #79efff 0 28%, #1479ff 29% 60%, #0b39b5 61%); border: 2px solid #155ac7; clip-path: polygon(50% 0,100% 30%,80% 100%,20% 100%,0 30%); }

.kitchen-scene { position: relative; height: clamp(590px, 105vw, 760px); margin: 0 -14px; touch-action: manipulation; }
.burger-tap {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 58%;
  width: min(36%, 190px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: url("assets/ui/burger.png?v=1") center / contain no-repeat;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 22px rgba(255, 154, 20, .2));
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: 50% 78%;
  -webkit-tap-highlight-color: transparent;
}
.burger-tap.squish { animation: burgerSquish .18s ease-out; }
.burger-tap.tap-locked {
  filter:
    drop-shadow(0 12px 8px rgba(0, 0, 0, .72))
    grayscale(.18)
    brightness(.78)
    saturate(.82);
}
.click-meter-wrap {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 54px;
  width: min(78%, 390px);
  height: clamp(34px, 8.5vw, 48px);
  transform: translateX(-50%);
  pointer-events: none;
}
.click-meter {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 6px;
  border: 2px solid #2b1609;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 202, 94, .18), transparent 38%),
    linear-gradient(180deg, #21140d, #080604);
  box-shadow:
    inset 0 0 0 1px #8b4c1a,
    inset 0 0 0 4px rgba(54, 28, 12, .72),
    inset 0 2px 0 rgba(255, 204, 96, .18),
    0 5px 0 #2a1003,
    0 8px 18px rgba(0, 0, 0, .74),
    0 0 18px rgba(255, 126, 18, .12);
  overflow: hidden;
}
.click-meter::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #3a1d08;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #090604, #1b0d05);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .92),
    0 1px 0 rgba(255, 196, 80, .1);
}
.click-meter-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--click-ratio, 1) * 100%);
  height: 100%;
  border: 1px solid rgba(255, 218, 111, .45);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 250, 180, .74), transparent 32%),
    linear-gradient(90deg, #8e3305 0%, #f07905 38%, #ffb11d 72%, #ffe06b 100%);
  box-shadow:
    inset 0 -2px 0 rgba(100, 35, 0, .7),
    inset 0 1px 0 rgba(255, 248, 177, .4),
    0 0 12px rgba(255, 138, 18, .42);
  transition: width .18s ease-out;
}
.click-meter-wrap.empty { animation: meterEmpty .28s ease-out; }
.click-meter-wrap.depleted .click-meter {
  box-shadow:
    inset 0 0 0 1px #5e3014,
    inset 0 0 0 4px rgba(36, 18, 9, .78),
    inset 0 2px 0 rgba(255, 204, 96, .08),
    0 5px 0 #1b0b03,
    0 8px 18px rgba(0, 0, 0, .74);
}
.click-meter-wrap.depleted .click-meter-fill {
  opacity: .38;
  box-shadow: none;
}
.click-meter-wrap.full .click-meter-fill {
  box-shadow:
    inset 0 -2px 0 rgba(100, 35, 0, .7),
    inset 0 1px 0 rgba(255, 248, 177, .48),
    0 0 18px rgba(255, 178, 32, .58);
}
.cook-button { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(58%, 310px); min-height: 58px; border: 3px solid #4b2105; border-radius: 7px; background: linear-gradient(#ffc33d 0 12%, #e7830d 13% 76%, #a84d08 77%); color: #1c0f07; font-size: clamp(25px, 6vw, 38px); font-weight: 1000; text-shadow: 0 2px #ffe7a1; box-shadow: inset 0 0 0 2px #ffcd54, 0 5px 0 #3e1c05, 0 8px 20px #000; cursor: pointer; }
.cook-button:active { transform: translate(-50%, 4px) scale(.98); box-shadow: inset 0 0 0 2px #ffcd54, 0 1px 0 #3e1c05; }
.coin-pop { position: absolute; z-index: 20; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #7b3b00; font-size: 10px; font-weight: 1000; background: radial-gradient(circle,#fff36b 0 20%,#ffbb00 21% 58%,#b65d00 59% 70%,#ffdc39 71%); border: 1px solid #6b3100; pointer-events: none; animation: fly 750ms cubic-bezier(.15,.75,.25,1) forwards; }
.gain { position: absolute; z-index: 21; color: #fff4cb; font-size: clamp(19px, 5vw, 27px); font-weight: 1000; text-shadow: 0 2px #4e2407,0 0 10px #ff8a00; white-space: nowrap; pointer-events: none; animation: gain .7s ease-out forwards; }

.upgrades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; position: relative; z-index: 4; margin-top: -2px; }
.upgrade { min-width: 0; min-height: 158px; padding: 7px 4px 0; display: grid; justify-items: center; align-content: start; border: 2px solid #4b321f; border-radius: 6px; background: linear-gradient(#121515 0 76%,#4a9715 77%); box-shadow: inset 0 0 0 1px #080808, 0 4px 0 #040302; cursor: pointer; }
.upgrade:active { transform: translateY(2px); }
.upgrade:disabled {
  cursor: default;
}
.upgrade.maxed {
  filter: saturate(.78) brightness(.82);
}
.upgrade.maxed:active {
  transform: none;
}
.upgrade-name { width: 100%; min-height: 32px; display: grid; place-items: center; color: #eee1ce; font-size: clamp(10px,2.5vw,16px); }
.level { color: #ffb535; font-size: clamp(12px,2.8vw,18px); }
.price { align-self: end; width: calc(100% + 8px); min-height: 32px; margin: 4px -4px 0; display: flex; align-items: center; justify-content: center; gap: 3px; background: #4d9b16; font-size: clamp(10px,2.6vw,16px); white-space: nowrap; }
.price b { font-size: 20px; color: #e9ffd2; }
.machine { position: relative; width: 52px; height: 53px; margin: 4px auto; filter: drop-shadow(0 3px 1px #000); }
.grill-machine { border: 5px solid #555; transform: perspective(40px) rotateX(16deg); background: repeating-linear-gradient(90deg,#ef5e18 0 5px,#1e1713 6px 10px); }
.fryer-machine { border: 5px solid #d42d17; border-top: 0; margin-top: 13px; height: 44px; background: repeating-linear-gradient(80deg,#ffbd18 0 5px,#ee6800 6px 9px); }
.drink-machine { border: 6px solid #ddd0bb; background: #c92b20; border-radius: 4px 4px 9px 9px; }
.drink-machine::after { content:""; position:absolute; width:4px; height:26px; background:#ddd; right:-9px; top:-11px; transform:rotate(22deg); }
.delivery-machine::before { content:""; position:absolute; left:2px; top:14px; width:35px; height:22px; border-radius:16px 18px 5px 5px; background:#f3a619; border:3px solid #4c2a10; }
.delivery-machine i { position:absolute; bottom:7px; width:13px; height:13px; border-radius:50%; background:#212525; border:3px solid #999; }
.delivery-machine i:first-child { left:6px; }.delivery-machine i:last-child { right:1px; }
.cashier-machine { border:5px solid #3e4442; border-radius:7px; background:linear-gradient(145deg,#2d3433,#111); }
.cashier-machine::before { content:""; position:absolute; left:9px; top:7px; width:25px; height:13px; background:#5cc9d4; border:3px solid #111; }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 720px); height: calc(82px + var(--tg-bottom-safe)); padding: 7px 8px var(--tg-bottom-safe); display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; background: linear-gradient(#121211,#050504); border-top: 2px solid #4c321e; box-shadow: 0 -8px 24px #000; }
.bottom-nav button { position: relative; min-width: 0; border: 1px solid transparent; border-radius: 5px; display: grid; place-items: center; align-content: center; gap: 3px; background: transparent; color: #c9b48f; font-size: clamp(10px,2.5vw,14px); cursor: pointer; }
.bottom-nav button.active { color:#ffc34f; border-color:#5d3718; background:linear-gradient(rgba(106,55,16,.35),rgba(45,24,10,.2)); }
.nav-icon { display:block; position:relative; width:32px; height:31px; }
.gift-icon { background:linear-gradient(90deg,#198ad2 0 42%,#ff3a22 43% 58%,#1281c5 59%); border-radius:3px; }
.gift-icon::before { content:""; position:absolute; left:-3px; right:-3px; top:6px; height:7px; background:#e83020; }
.task-icon { border:4px solid #bd9152; border-radius:3px; background:#eee0c6; }
.task-icon::before { content:""; position:absolute; width:13px; height:5px; top:-7px; left:5px; border-radius:3px; background:#715334; }
.cafe-icon { border-radius:50% 50% 25% 25%; background:#f5e8ce; }
.cafe-icon::after { content:""; position:absolute; bottom:-5px; left:14px; width:5px; height:15px; background:#f5e8ce; }
.friends-icon::before,.friends-icon::after { content:""; position:absolute; bottom:1px; width:21px; height:24px; border-radius:50% 50% 7px 7px; background:linear-gradient(#f1a66c 0 40%,#db532e 41%); }
.friends-icon::before { left:0; }.friends-icon::after { right:0; filter:brightness(.8); }
.wallet-icon { border:4px solid #8f572b; border-radius:5px; background:#5c351e; }
.wallet-icon::after { content:""; position:absolute; right:-7px; top:8px; width:15px; height:11px; border-radius:3px; background:#a86832; }

.upgrade.flash { animation: flash .4s ease; }
.toast { position:fixed; z-index:50; left:50%; top:16%; transform:translateX(-50%); padding:10px 16px; border:2px solid #b86118; border-radius:5px; background:rgba(14,10,7,.96); color:#ffd172; font-weight:700; animation:toast 1.6s both; }

/* ImageGen UI atlases. Text stays live; all visible game objects and frames are raster art. */
.profile,
.currency,
.upgrade,
.cook-button,
.bottom-nav,
.bottom-nav button.active {
  background-color: #090b0b;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.profile {
  border: 0;
  clip-path: none;
  background-image: url("assets/ui/profile-frame.png");
}

.currency {
  border: 0;
  clip-path: none;
  background-image: url("assets/ui/currency-frame.png");
}

.avatar,
.coin,
.gem,
.machine,
.nav-icon {
  background-color: #090b0b;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 0;
  clip-path: none;
  filter: none;
  color: transparent;
  text-shadow: none;
}

.avatar { background-image: url("assets/ui/chef.png"); }
.coin { background-image: url("assets/ui/coin.png"); }
.gem { transform: none; background-image: url("assets/ui/gem.png"); }
.grill-machine { transform: none; background-image: url("assets/ui/grill.png"); }
.fryer-machine { margin-top: 4px; height: 53px; background-image: url("assets/ui/fryer.png"); }
.drink-machine { background-image: url("assets/ui/drink.png"); }
.delivery-machine { background-image: url("assets/ui/delivery.png"); }
.cashier-machine { background-image: url("assets/ui/cashier.png"); }

.machine::before,
.machine::after,
.machine i,
.nav-icon::before,
.nav-icon::after { display: none; content: none; }

.upgrade {
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 0 #040302;
  background-image: url("assets/ui/upgrade-frame.png");
}

.price {
  background: transparent;
  text-shadow: 0 2px #173906;
}

.cook-button {
  border: 0;
  border-radius: 0;
  background-image: url("assets/ui/cook-button.png");
  box-shadow: 0 8px 20px #000;
}

.cook-button:active {
  box-shadow: 0 3px 10px #000;
}

.bottom-nav {
  border: 0;
  background-image: url("assets/ui/nav-bar.png");
}

.bottom-nav button.active {
  border: 0;
  background-image: url("assets/ui/nav-item.png");
}

.gift-icon { background-image: url("assets/ui/gift.png"); }
.task-icon { background-image: url("assets/ui/tasks.png?v=clean3"); }
.cafe-icon { background-image: url("assets/ui/cafe.png"); }
.friends-icon { background-image: url("assets/ui/friends.png"); }
.wallet-icon { background-image: url("assets/ui/wallet.png"); }

@keyframes fly { to { transform: translate(var(--dx), -180px) rotate(540deg) scale(.4); opacity:0; } }
@keyframes gain { to { transform:translateY(-90px) scale(1.15); opacity:0; } }
@keyframes burgerSquish { 0%{transform:translate(-50%, -50%) scale(1)} 45%{transform:translate(-50%, -50%) scale(.985, .955)} 100%{transform:translate(-50%, -50%) scale(1)} }
@keyframes meterEmpty { 35% { filter: brightness(1.45) saturate(1.4); transform: translateX(-50%) scale(1.025); } }
@keyframes flash { 50% { filter:brightness(1.8); box-shadow:0 0 24px #ff9d00; } }
@keyframes toast { 0%,100%{opacity:0;transform:translate(-50%,-10px)} 12%,85%{opacity:1;transform:translate(-50%,0)} }

@media (max-width: 480px) {
  .game { padding-left: 8px; padding-right: 8px; }
  .topbar { gap: 4px; grid-template-columns: 1.35fr 1fr .72fr; }
  .profile, .currency { padding: 5px; }
  .avatar { flex-basis: 38px; height: 38px; font-size: 12px; }
  .currency .coin.small { width: 21px; height: 21px; }
  .currency .gem { width: 20px; height: 20px; }
  .add { width: 23px; height: 27px; font-size:20px; }
  .kitchen-scene { margin-left:-8px; margin-right:-8px; height:clamp(500px,142vw,680px); }
  .upgrade { min-height:133px; }.machine{width:39px;height:41px}.upgrade-name{min-height:28px}.price{min-height:28px}
}

@media (min-width: 721px) {
  .bottom-nav { left:50%; }
  .kitchen-scene { height:760px; }
}

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

/* Native-proportion layout strips: no frame is stretched independently. */
.topbar {
  height: clamp(48px, 12vw, 86px);
  grid-template-columns: 42% 29% 29%;
  gap: 0;
  padding: 0;
  background: #090b0b url("assets/ui/hud-strip.png?v=clean-currency2") center / 100% 100% no-repeat;
}

.profile,
.currency {
  height: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.profile { padding: 6px 8px; gap: 5px; }
.currency { padding: 7px 6px 7px 9px; gap: 3px; }

.profile {
  align-items: center;
}

.profile .avatar {
  flex: 0 0 clamp(36px, 9.5vw, 58px);
  height: clamp(36px, 9.5vw, 58px);
  background-color: transparent;
  background-size: contain;
}

.profile-copy {
  grid-template-rows: min-content min-content 8px;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding-right: 3px;
  line-height: 1;
}

.profile-copy strong {
  font-family: var(--arcade-font);
  color: #ffe0a5;
  font-size: clamp(10px, 2.65vw, 16px);
  font-weight: 900;
  letter-spacing: .12px;
  text-shadow:
    0 1px 0 #120704,
    1px 0 0 #120704,
    -1px 0 0 #120704,
    0 0 6px rgba(255, 156, 40, .24);
  -webkit-font-smoothing: none;
}

.profile-copy > span:not(.xp-track) {
  margin: 0;
  font-family: var(--arcade-font);
  color: #ffbd55;
  font-size: clamp(8px, 1.95vw, 11px);
  font-weight: 900;
  letter-spacing: .14px;
  text-shadow:
    0 1px 0 #1c0903,
    1px 0 0 #1c0903,
    -1px 0 0 #1c0903,
    0 0 5px rgba(255, 132, 0, .2);
  -webkit-font-smoothing: none;
}

.xp-track {
  position: relative;
  width: min(100%, 96px);
  height: 8px;
  margin: 1px 0 0;
  border: 1px solid #4b2108;
  border-radius: 4px;
  background: linear-gradient(180deg, #140a05, #2b1307);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 178, 55, .22);
  overflow: hidden;
}

.xp-track i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 245, 151, .78), transparent 34%),
    linear-gradient(90deg, #f76800 0%, #ff9d00 48%, #ffd33e 100%);
  box-shadow: inset 0 -1px 0 rgba(129, 47, 0, .55), 0 0 6px rgba(255, 141, 0, .55);
}

.xp-track::after {
  content: "";
  position: absolute;
  inset: 1px 2px auto;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 210, .22);
  pointer-events: none;
}

.add {
  width: clamp(22px, 5.8vw, 34px);
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
}

.topbar .currency strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(11px, 2.65vw, 15px);
  line-height: 1;
  letter-spacing: .25px;
  text-shadow: 0 1px 0 #160905, 0 0 4px rgba(255, 205, 116, .18);
}

.coin {
  background-image: url("assets/ui/coin.png?v=clean2");
}

.gem {
  background-image: url("assets/ui/gem.png?v=clean2");
}

.currency .coin.small,
.currency .gem,
.price .coin.tiny {
  background-color: transparent;
  background-size: contain;
  background-position: center;
}

.currency .coin.small {
  width: clamp(18px, 5.1vw, 28px);
  height: clamp(18px, 5.1vw, 28px);
  flex: 0 0 clamp(18px, 5.1vw, 28px);
}

.currency .gem {
  width: clamp(19px, 5.3vw, 30px);
  height: clamp(19px, 5.3vw, 30px);
  flex: 0 0 clamp(19px, 5.3vw, 30px);
}

.upgrades {
  width: 100%;
  aspect-ratio: 1200 / 485;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.9%;
  margin-top: -42px;
  padding: 0;
  background: #090b0b url("assets/ui/upgrades-strip.png") center / 100% 100% no-repeat;
}

.upgrade {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 7px 3px clamp(21px, 5.6vw, 33px);
  border: 0;
  box-shadow: none;
  background: transparent;
}

.upgrade-name,
.level,
.price,
.upgrade-cta,
.bottom-nav button span:last-child {
  font-family: var(--arcade-font);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .15px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: none;
}

.upgrade-name {
  min-height: 26px;
  color: #f4dfb8;
  font-size: clamp(8px, 2.18vw, 13px);
  text-shadow:
    0 1px 0 #0a0502,
    1px 0 0 #0a0502,
    -1px 0 0 #0a0502,
    0 0 5px rgba(255, 176, 58, .18);
}

.level {
  color: #ffc04b;
  font-size: clamp(9px, 2.32vw, 14px);
  letter-spacing: .2px;
  text-shadow:
    0 1px 0 #2b1204,
    1px 0 0 #2b1204,
    -1px 0 0 #2b1204,
    0 0 6px rgba(255, 144, 0, .25);
}

.machine { width: clamp(38px, 11vw, 68px); height: clamp(38px, 11vw, 68px); margin: 2px auto 0; }
.fryer-machine { height: clamp(38px, 11vw, 68px); margin-top: 2px; }
.price {
  min-height: clamp(21px, 5.8vw, 34px);
  margin-top: auto;
  color: #ffe0a0;
  font-size: clamp(8px, 2.2vw, 13px);
  letter-spacing: .1px;
  text-shadow:
    0 1px 0 #173906,
    1px 0 0 #173906,
    -1px 0 0 #173906,
    0 0 5px rgba(255, 209, 94, .24);
}
.price b { display: none; }
.upgrade-cta {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 4.3%;
  height: 10.8%;
  display: grid;
  place-items: center;
  color: #fff6c8;
  font-size: clamp(7px, 1.95vw, 11px);
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .25px;
  text-shadow:
    0 1px 0 #123a08,
    1px 0 0 #123a08,
    -1px 0 0 #123a08,
    0 0 6px rgba(214, 255, 107, .28);
  -webkit-text-stroke: .18px rgba(27, 67, 10, .88);
  pointer-events: none;
}

.upgrade.maxed {
  filter: saturate(.7) brightness(.82);
}

.upgrade.maxed .price,
.upgrade.maxed .upgrade-cta {
  color: #ffe08b;
  text-shadow:
    0 1px 0 #4a2107,
    1px 0 0 #4a2107,
    -1px 0 0 #4a2107,
    0 0 8px rgba(255, 160, 35, .22);
}

.cook-button {
  width: min(64%, 320px);
  min-height: 0;
  aspect-ratio: 1715 / 380;
  bottom: 8px;
  border: 0;
  background: #090b0b url("assets/ui/cook-button-wide.png") center / 100% 100% no-repeat;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .78);
  font-size: clamp(23px, 6vw, 36px);
}

.bottom-nav {
  --nav-height: clamp(64px, 14vw, 100px);
  height: calc(var(--nav-height) + var(--tg-bottom-safe));
  padding: 7px 8px calc(7px + var(--tg-bottom-safe));
  gap: 6px;
  border: 0;
  border-top: 1px solid rgba(255, 177, 65, .48);
  background-image:
    linear-gradient(180deg, rgba(255, 177, 65, .18), transparent 10px),
    linear-gradient(180deg, #15110d 0%, #0c0b0a 62%, #050505 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 216, 109, .42),
    inset 0 5px 0 rgba(63, 37, 19, .62),
    0 -6px 18px rgba(0, 0, 0, .72);
}

.bottom-nav button,
.bottom-nav button.active {
  border: 1px solid #3e2a19;
  border-radius: 7px;
  padding: 3px 0 2px;
  gap: 1px;
  background-image: none;
  background-color: rgba(7, 8, 8, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 89, .14),
    inset 0 -3px 0 rgba(0, 0, 0, .46),
    0 2px 0 rgba(0, 0, 0, .72);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.bottom-nav button.active {
  color: #ffc34f;
  border-color: #d4822b;
  background-image:
    linear-gradient(180deg, rgba(255, 183, 71, .18), transparent 40%),
    linear-gradient(180deg, rgba(101, 54, 20, .95), rgba(37, 22, 12, .9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 100, .25),
    inset 0 2px 0 rgba(255, 207, 93, .22),
    inset 0 -4px 0 rgba(0, 0, 0, .42),
    0 0 12px rgba(255, 131, 27, .28),
    0 2px 0 rgba(0, 0, 0, .72);
  transform: translateY(-2px);
}

.bottom-nav button:active { transform: translateY(1px); }
.bottom-nav .nav-icon {
  width: clamp(25px, 7vw, 44px);
  height: clamp(25px, 7vw, 44px);
  background-color: transparent;
  background-size: contain;
}
.bottom-nav button span:last-child {
  color: #c8b28d;
  font-size: clamp(8px, 2.1vw, 12px);
  letter-spacing: .12px;
  text-shadow:
    0 1px 0 #070504,
    1px 0 0 #070504,
    -1px 0 0 #070504,
    0 0 5px rgba(255, 194, 92, .13);
}

.bottom-nav button.active span:last-child {
  color: #ffd36c;
  text-shadow:
    0 1px 0 #301305,
    1px 0 0 #301305,
    -1px 0 0 #301305,
    0 0 7px rgba(255, 157, 36, .42);
}

.game[data-screen="tasks"] .home-screen,
.game[data-screen="tasks"] .bonuses-screen,
.game[data-screen="tasks"] .friends-screen,
.game[data-screen="tasks"] .wallet-screen,
.game[data-screen="home"] .tasks-screen,
.game[data-screen="home"] .bonuses-screen,
.game[data-screen="home"] .friends-screen,
.game[data-screen="home"] .wallet-screen,
.game[data-screen="bonuses"] .home-screen,
.game[data-screen="bonuses"] .tasks-screen,
.game[data-screen="bonuses"] .friends-screen,
.game[data-screen="bonuses"] .wallet-screen,
.game[data-screen="friends"] .home-screen,
.game[data-screen="friends"] .tasks-screen,
.game[data-screen="friends"] .bonuses-screen,
.game[data-screen="friends"] .wallet-screen,
.game[data-screen="wallet"] .home-screen,
.game[data-screen="wallet"] .tasks-screen,
.game[data-screen="wallet"] .bonuses-screen,
.game[data-screen="wallet"] .friends-screen {
  display: none;
}

.bonuses-screen {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(9px, 2.1vw, 14px);
  padding: clamp(28px, 7vw, 54px) clamp(6px, 2.2vw, 18px) 0;
}

.bonus-sign-spacer {
  visibility: hidden;
  pointer-events: none;
  width: min(82%, 480px);
  min-height: clamp(116px, 25vw, 194px);
  margin: 0 auto;
}

.bonus-panel {
  position: relative;
  width: min(92%, 595px);
  margin: 0 auto;
  border: 3px solid #2a1307;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 178, 57, .1), transparent 35%),
    linear-gradient(90deg, rgba(105, 53, 16, .18), transparent 28% 72%, rgba(105, 53, 16, .14)),
    linear-gradient(180deg, rgba(25, 23, 18, .98), rgba(10, 9, 7, .99));
  box-shadow:
    inset 0 0 0 1px #9a551b,
    inset 0 0 0 4px rgba(5, 4, 3, .76),
    0 4px 0 #070403,
    0 10px 22px rgba(0, 0, 0, .66);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.daily-card {
  padding: clamp(14px, 3.4vw, 24px);
}

.bonus-title-row {
  display: grid;
  grid-template-columns: clamp(48px, 11vw, 72px) 1fr;
  gap: clamp(10px, 2.4vw, 16px);
  align-items: center;
  margin-bottom: clamp(10px, 2.4vw, 16px);
}

.calendar-icon {
  width: clamp(46px, 10vw, 66px);
  aspect-ratio: 1;
  display: block;
  background: url("assets/ui/daily-login-icon.png?v=1") center / contain no-repeat;
  filter: drop-shadow(0 4px 1px rgba(0, 0, 0, .65)) drop-shadow(0 0 8px rgba(255, 154, 35, .2));
}

.bonus-title-row h2,
.bonus-copy h2 {
  margin: 0;
  color: #ffd36a;
  font-family: var(--premium-font);
  font-size: clamp(20px, 4.8vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 #2d1205,
    0 2px 0 rgba(4, 2, 1, .82),
    0 0 7px rgba(255, 142, 22, .2);
}

.bonus-title-row p,
.bonus-copy p {
  margin: clamp(6px, 1.4vw, 10px) 0 0;
  color: #e7c38c;
  font-family: var(--premium-font);
  font-size: clamp(12px, 3vw, 19px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 #090504, 0 0 4px rgba(255, 160, 48, .12);
}

.daily-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 1.1vw, 8px);
}

.day {
  position: relative;
  min-height: clamp(82px, 18vw, 125px);
  padding: clamp(7px, 1.6vw, 11px) 3px clamp(8px, 1.8vw, 12px);
  display: grid;
  justify-items: center;
  align-content: space-between;
  border: 2px solid #271207;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 184, 57, .09), transparent 38%),
    linear-gradient(180deg, #17120d, #080706);
  box-shadow:
    inset 0 0 0 1px #7e4518,
    inset 0 -3px 0 rgba(0, 0, 0, .42),
    0 3px 0 #050302;
}

.day.active {
  border-color: #ffae25;
  box-shadow:
    inset 0 0 0 1px #ffe16f,
    inset 0 -3px 0 rgba(0, 0, 0, .38),
    0 0 12px rgba(255, 142, 16, .56),
    0 3px 0 #140702;
}

.day.done {
  filter: saturate(.72) brightness(.72);
  opacity: .78;
}

.day.done span,
.day.done b {
  color: #b89a68;
}

.day span {
  color: #f1d4a6;
  font-family: var(--premium-font);
  font-size: clamp(8px, 2.05vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 1px 0 #090504;
}

.day b {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #ffe6a7;
  font-family: var(--premium-font);
  font-size: clamp(17px, 4vw, 27px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 #140704, 0 0 5px rgba(255, 164, 35, .14);
}

.day .coin.tiny,
.day .gem {
  display: inline-block;
  width: clamp(26px, 6vw, 40px);
  height: clamp(26px, 6vw, 40px);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.chest-icon {
  width: clamp(32px, 7vw, 48px);
  height: clamp(27px, 6vw, 40px);
  display: inline-block;
  border: 2px solid #421706;
  border-radius: 7px 7px 4px 4px;
  background:
    radial-gradient(circle at 50% 58%, #ffe274 0 10%, #7a300b 11% 18%, transparent 19%),
    linear-gradient(90deg, transparent 0 45%, #ffd04b 46% 55%, transparent 56%),
    linear-gradient(180deg, #d95510 0 45%, #7c2b0a 46% 100%);
  box-shadow: inset 0 0 0 1px #ffb032, 0 2px 0 #050302;
}

.bonus-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: clamp(12px, 2.6vw, 18px);
  color: #e4c69b;
  font-family: var(--premium-font);
  font-size: clamp(12px, 2.9vw, 19px);
  font-weight: 600;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 #080403;
}

.bonus-timer b {
  color: #ff8d1c;
  font-weight: 700;
  letter-spacing: .045em;
}

.daily-claim-button {
  width: 100%;
  min-height: clamp(42px, 9vw, 62px);
  margin-top: clamp(12px, 2.6vw, 18px);
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .36), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -4px 0 rgba(82, 22, 0, .56),
    0 4px 0 #120604,
    0 0 12px rgba(255, 101, 13, .2);
  font-family: var(--premium-font);
  font-size: clamp(16px, 4vw, 27px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8d2605, 0 2px 0 rgba(63, 14, 0, .65);
}

.daily-claim-button:active {
  transform: translateY(2px);
}

.daily-claim-button[hidden],
.bonus-timer[hidden] {
  display: none;
}

.clock-icon {
  width: clamp(20px, 4.7vw, 30px);
  height: clamp(20px, 4.7vw, 30px);
  display: inline-block;
  flex: 0 0 auto;
  background: url("assets/ui/timer-clock.png?v=1") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 #050302) drop-shadow(0 0 5px rgba(255, 153, 24, .22));
}

.bonus-row {
  min-height: clamp(112px, 23vw, 158px);
  padding: clamp(12px, 3vw, 20px);
  display: grid;
  grid-template-columns: clamp(74px, 18vw, 120px) minmax(0, 1fr) clamp(108px, 25vw, 166px);
  align-items: center;
  gap: clamp(10px, 2.8vw, 20px);
}

.bonus-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 8px rgba(255, 136, 22, .15));
}

.bonus-copy {
  min-width: 0;
}

.bonus-copy strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(8px, 1.8vw, 12px);
  color: #8fe844;
  font-family: var(--premium-font);
  font-size: clamp(12px, 3vw, 20px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 #173807;
}

.bonus-row button {
  min-height: clamp(42px, 9vw, 62px);
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .36), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -4px 0 rgba(82, 22, 0, .56),
    0 4px 0 #120604,
    0 0 12px rgba(255, 101, 13, .2);
  font-family: var(--premium-font);
  font-size: clamp(16px, 4vw, 27px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8d2605, 0 2px 0 rgba(63, 14, 0, .65);
}

.bonus-row button:active {
  transform: translateY(2px);
}

.tasks-screen {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(10px, 2.6vw, 18px);
  padding: clamp(28px, 7.4vw, 54px) clamp(6px, 2.2vw, 18px) 0;
}

.tasks-sign {
  position: relative;
  visibility: hidden;
  pointer-events: none;
  width: min(82%, 480px);
  min-height: clamp(92px, 19vw, 148px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  grid-template-areas:
    "left icon right"
    "left title right";
  align-items: center;
  justify-items: center;
  padding: clamp(14px, 3.5vw, 24px) clamp(10px, 3vw, 22px) clamp(12px, 3vw, 18px);
  border: 3px solid #3e1d0a;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 169, 50, .18), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255, 165, 42, .08) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #4b230d 0%, #211008 100%);
  box-shadow:
    inset 0 0 0 2px #a05a1d,
    inset 0 0 0 5px rgba(21, 9, 3, .8),
    0 8px 0 #080403,
    0 18px 34px rgba(0, 0, 0, .72),
    0 0 28px rgba(255, 91, 12, .18);
  clip-path: polygon(14px 0, calc(50% - 44px) 0, calc(50% - 30px) 12px, calc(50% - 19px) 0, calc(50% + 19px) 0, calc(50% + 30px) 12px, calc(50% + 44px) 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.tasks-sign::before,
.tasks-sign::after {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(44px, 9vw, 72px));
  width: 8px;
  height: clamp(48px, 10vw, 78px);
  background:
    repeating-linear-gradient(180deg, #0b0705 0 7px, #7b4215 7px 11px, #140905 11px 18px);
  filter: drop-shadow(0 2px 0 #000);
}

.tasks-sign::before { left: 18%; }
.tasks-sign::after { right: 18%; }

.tasks-sign strong {
  grid-area: title;
  font-family: var(--premium-font);
  color: #ffcf7a;
  font-size: clamp(39px, 10vw, 72px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: .1em;
  text-shadow:
    0 1px 0 #5a1203,
    0 0 4px #fff2a8,
    0 0 12px #ff670f,
    0 0 24px #ff2e00;
  -webkit-text-stroke: .6px #fff0b5;
}

.tasks-sign-chef {
  grid-area: icon;
  width: clamp(38px, 9vw, 64px);
  height: clamp(30px, 7vw, 50px);
  display: grid;
  place-items: center;
  margin-bottom: -4px;
  color: #ffb85d;
  font-size: clamp(27px, 6vw, 44px);
  line-height: 1;
  text-shadow: 0 0 8px #ff4b00, 0 0 17px #ff2600;
}

.tasks-sign-star {
  color: #ffd36c;
  font-size: clamp(24px, 5.4vw, 38px);
  text-shadow: 0 0 5px #fff2a4, 0 0 12px #ff4c00;
}

.tasks-sign-star:first-child { grid-area: left; }
.tasks-sign-star:last-child { grid-area: right; }

.task-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2vw, 14px);
  width: min(86%, 520px);
  margin: clamp(24px, 5vw, 38px) auto clamp(2px, 1vw, 8px);
}

.task-tabs button {
  min-height: clamp(48px, 10vw, 72px);
  border: 2px solid #371908;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 173, 50, .12), transparent 38%),
    linear-gradient(180deg, #21140c, #0d0906);
  box-shadow:
    inset 0 0 0 1px rgba(160, 91, 29, .6),
    inset 0 -3px 0 rgba(0, 0, 0, .42),
    0 4px 0 #070403;
  color: #8f7b65;
  font-family: var(--premium-font);
  font-size: clamp(16px, 4.3vw, 28px);
  font-weight: 700;
  letter-spacing: .07em;
  text-shadow: 0 1px 0 #080403, 0 0 5px rgba(255, 166, 55, .1);
}

.task-tabs button.active {
  color: #ffd369;
  background:
    linear-gradient(180deg, rgba(255, 190, 69, .24), transparent 42%),
    linear-gradient(180deg, #74340e, #321707);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 76, .52),
    inset 0 -4px 0 rgba(0, 0, 0, .34),
    0 4px 0 #120704,
    0 0 16px rgba(255, 110, 17, .18);
}

.task-list {
  display: grid;
  gap: clamp(8px, 2vw, 14px);
  width: min(92%, 590px);
  min-height: clamp(472px, 102vw, 690px);
  align-content: start;
  margin: 0 auto;
}

.task-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(82px, 18vw, 118px) minmax(0, 1fr) clamp(108px, 25vw, 168px);
  gap: clamp(9px, 2.4vw, 18px);
  align-items: center;
  min-height: clamp(112px, 24vw, 162px);
  padding: clamp(10px, 2.8vw, 18px);
  border: 3px solid #2c1408;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 173, 54, .1), transparent 33%),
    linear-gradient(90deg, rgba(122, 62, 18, .18), transparent 28% 72%, rgba(112, 56, 16, .16)),
    linear-gradient(180deg, rgba(25, 22, 17, .97), rgba(12, 10, 8, .98));
  box-shadow:
    inset 0 0 0 1px #8c4b17,
    inset 0 0 0 4px rgba(5, 4, 3, .78),
    0 4px 0 #080403,
    0 9px 18px rgba(0, 0, 0, .62);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.task-card::before,
.task-card::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #e49b39;
  background: #2a1206;
  box-shadow: 0 0 0 1px #050302;
}

.task-card::before { left: 8px; top: 8px; }
.task-card::after { right: 8px; bottom: 8px; }

.ad-task::before,
.ad-task::after {
  display: none;
}

.task-art {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border: 2px solid #221006;
  border-radius: 5px;
  background-color: #080706;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 82%;
  box-shadow:
    inset 0 0 0 1px #8b4a16,
    inset 0 0 18px rgba(255, 136, 27, .08),
    0 3px 0 #050302;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .7));
}

.task-burger { background-image: url("assets/ui/burger.png?v=1"); }
.task-fries { background-image: url("assets/ui/fryer.png"); }
.task-grill { background-image: url("assets/ui/grill.png"); }
.task-service { background-image: url("assets/ui/reward.png"); }

.task-list[hidden] {
  display: none;
}

.task-ad-watch,
.task-ad-adsgram {
  border-color: transparent;
  background-color: transparent;
  background-size: 78%;
  box-shadow: none;
  filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .72)) drop-shadow(0 0 8px rgba(255, 142, 22, .18));
}

.task-ad-watch { background-image: url("assets/ui/watch-ad-icon.png?v=1"); }

.task-copy {
  display: grid;
  align-content: center;
  gap: clamp(7px, 1.8vw, 12px);
  min-width: 0;
}

.task-copy h3 {
  margin: 0;
  color: #ffeac2;
  font-family: var(--premium-font);
  font-size: clamp(17px, 4.35vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .025em;
  text-shadow:
    0 1px 0 #170805,
    0 0 5px rgba(255, 178, 64, .18);
}

.task-copy small {
  color: #d7b37b;
  font-family: var(--premium-font);
  font-size: clamp(10px, 2.6vw, 17px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 #090504;
}

.task-copy strong {
  color: #ffaf25;
  font-family: var(--premium-font);
  font-size: clamp(18px, 4.6vw, 30px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .045em;
  text-shadow: 0 1px 0 #250d03, 0 0 7px rgba(255, 117, 13, .22);
}

.task-progress {
  position: relative;
  width: 100%;
  height: clamp(17px, 3.6vw, 23px);
  padding: 3px;
  border: 2px solid #211006;
  border-radius: 4px;
  background: linear-gradient(180deg, #070504, #211008);
  box-shadow:
    inset 0 0 0 1px #7d4315,
    0 2px 0 #030201;
}

.task-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border: 1px solid rgba(255, 229, 111, .42);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 246, 151, .72), transparent 36%),
    linear-gradient(90deg, #e35005, #ff8c07 50%, #ffc52c);
  box-shadow: inset 0 -2px 0 rgba(118, 43, 0, .62), 0 0 8px rgba(255, 126, 18, .34);
}

.task-reward {
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(5px, 1.4vw, 9px);
  padding: clamp(6px, 1.8vw, 12px);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 187, 76, .08), transparent 42%),
    rgba(8, 8, 7, .42);
  box-shadow: inset 0 0 0 1px rgba(139, 80, 28, .22);
}

.task-reward > span {
  color: #ffe4b3;
  font-family: var(--premium-font);
  font-size: clamp(14px, 3.3vw, 22px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 #130604, 0 0 4px rgba(255, 171, 53, .12);
}

.task-reward b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff8e1;
  font-family: var(--premium-font);
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #160804, 0 0 5px rgba(255, 179, 65, .14);
}

.task-reward .coin.tiny,
.task-reward .gem {
  display: inline-block;
  width: clamp(23px, 5.6vw, 36px);
  height: clamp(23px, 5.6vw, 36px);
  flex: 0 0 clamp(23px, 5.6vw, 36px);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.task-reward button {
  width: min(100%, 140px);
  min-height: clamp(36px, 8vw, 52px);
  border: 2px solid #3a1606;
  border-radius: 5px;
  color: #ffe7b1;
  background:
    linear-gradient(180deg, rgba(255, 238, 126, .38), transparent 26%),
    linear-gradient(180deg, #ff9a0b 0%, #e55b05 72%, #993108 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -3px 0 rgba(90, 25, 0, .58),
    0 3px 0 #120604,
    0 0 10px rgba(255, 101, 13, .2);
  font-family: var(--premium-font);
  font-size: clamp(14px, 3.6vw, 24px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8d2605, 0 2px 0 rgba(63, 14, 0, .65);
}

.task-card.available .task-reward button:not(:disabled) {
  color: #fff4c7;
  background:
    linear-gradient(180deg, rgba(255, 252, 168, .48), transparent 25%),
    linear-gradient(180deg, #ffbd2f 0%, #f47708 68%, #b94008 100%);
  box-shadow:
    inset 0 0 0 1px #ffe071,
    inset 0 -3px 0 rgba(112, 31, 0, .55),
    0 3px 0 #120604,
    0 0 14px rgba(255, 151, 24, .34);
}

.task-reward button:disabled,
.task-card.claimed .task-reward button {
  color: #a99061;
  background:
    linear-gradient(180deg, rgba(255, 210, 93, .12), transparent 28%),
    linear-gradient(180deg, #5a3718, #2a170d);
  box-shadow:
    inset 0 0 0 1px rgba(188, 108, 34, .45),
    inset 0 -3px 0 rgba(0, 0, 0, .42),
    0 3px 0 #090403;
}

.task-card.complete:not(.available) {
  filter: saturate(.9);
}

#referralLinkLabel {
  cursor: pointer;
}

.task-reward button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -2px 0 rgba(90, 25, 0, .58),
    0 1px 0 #120604;
}

.friends-screen {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(8px, 1.9vw, 13px);
  padding: clamp(24px, 5.5vw, 46px) clamp(8px, 2.2vw, 18px) 0;
}

.friends-sign {
  width: min(82%, 520px);
  min-height: clamp(172px, 34vw, 250px);
  margin: 0 auto clamp(3px, .9vw, 8px);
  display: grid;
  grid-template-columns: clamp(28px, 7vw, 46px) 1fr clamp(28px, 7vw, 46px);
  grid-template-areas:
    "icon icon icon"
    "left title right";
  align-items: center;
  justify-items: center;
  color: #ffcf7a;
  pointer-events: none;
  visibility: hidden;
}

.friends-sign strong {
  grid-area: title;
  font-family: var(--premium-font);
  font-size: clamp(44px, 11vw, 80px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: .1em;
  text-shadow:
    0 1px 0 #5a1203,
    0 0 4px #fff2a8,
    0 0 12px #ff670f,
    0 0 26px #ff2e00;
  -webkit-text-stroke: .65px #fff0b5;
}

.friends-sign-chef {
  grid-area: icon;
  align-self: end;
  margin-bottom: -8px;
  color: #ffb85d;
  font-size: clamp(28px, 6.4vw, 48px);
  line-height: 1;
  text-shadow: 0 0 8px #ff4b00, 0 0 17px #ff2600;
}

.friends-sign-star {
  color: #ffd36c;
  font-size: clamp(24px, 5.4vw, 38px);
  text-shadow: 0 0 5px #fff2a4, 0 0 12px #ff4c00;
}

.friends-sign-star:first-child { grid-area: left; }
.friends-sign-star:last-child { grid-area: right; }

.friend-panel {
  position: relative;
  width: min(92%, 595px);
  margin: 0 auto;
  border: 3px solid #2c1408;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 173, 54, .1), transparent 33%),
    linear-gradient(90deg, rgba(122, 62, 18, .18), transparent 28% 72%, rgba(112, 56, 16, .16)),
    linear-gradient(180deg, rgba(24, 22, 17, .98), rgba(10, 9, 7, .99));
  box-shadow:
    inset 0 0 0 1px #8c4b17,
    inset 0 0 0 4px rgba(5, 4, 3, .78),
    0 4px 0 #080403,
    0 10px 22px rgba(0, 0, 0, .66);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.friends-invite {
  display: grid;
  grid-template-columns: minmax(108px, 34%) minmax(0, 1fr);
  grid-template-areas:
    "art copy"
    "link button";
  align-items: center;
  gap: clamp(8px, 2vw, 14px) clamp(12px, 3vw, 22px);
  min-height: clamp(190px, 37vw, 270px);
  padding: clamp(13px, 3vw, 22px);
}

.friends-hero {
  grid-area: art;
  width: min(100%, 190px);
  aspect-ratio: 1.12;
  justify-self: center;
  align-self: end;
  background: url("assets/ui/friends-hero-v2.png?v=1") center bottom / contain no-repeat;
  filter: drop-shadow(0 6px 2px rgba(0, 0, 0, .72)) drop-shadow(0 0 8px rgba(255, 139, 20, .14));
}

.invite-copy {
  grid-area: copy;
  min-width: 0;
}

.invite-copy h2,
.team-panel h2,
.friends-list-panel h2 {
  margin: 0;
  color: #ffc64d;
  font-family: var(--premium-font);
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #2d1205, 0 2px 0 rgba(4, 2, 1, .78), 0 0 8px rgba(255, 142, 22, .18);
}

.invite-copy p {
  margin: clamp(7px, 1.8vw, 12px) 0 clamp(10px, 2.4vw, 16px);
  color: #e7c38c;
  font-family: var(--premium-font);
  font-size: clamp(13px, 3.2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 #090504;
}

.invite-rewards {
  display: flex;
  width: min(100%, 300px);
  align-items: center;
  gap: clamp(16px, 4vw, 30px);
  padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 18px);
  border: 2px dashed rgba(188, 93, 24, .58);
  border-radius: 6px;
  background: rgba(6, 5, 4, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 147, 29, .08);
}

.invite-rewards span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff1cd;
  font-family: var(--premium-font);
  font-size: clamp(21px, 5.2vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #160804;
}

.invite-url {
  width: min(100%, 340px);
  min-height: clamp(43px, 9vw, 62px);
  justify-content: center;
}

.invite-url b {
  display: block;
  max-width: 100%;
  color: #ff9c22;
  font-family: var(--premium-font);
  font-size: clamp(18px, 4.4vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #220b03, 0 0 7px rgba(255, 136, 18, .22);
}

.invite-link {
  grid-area: link;
  position: relative;
  min-height: clamp(54px, 11vw, 78px);
  padding: clamp(13px, 3vw, 20px) clamp(14px, 3vw, 20px) clamp(8px, 2vw, 12px);
  border: 2px solid #2b1307;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 178, 57, .08), rgba(8, 7, 5, .82));
  box-shadow: inset 0 0 0 1px #8c4b17, 0 3px 0 #050302;
  overflow: visible;
}

.invite-link span {
  position: absolute;
  left: 14px;
  top: -12px;
  padding: 0 7px;
  color: #ffc64d;
  background: #17100b;
  font-family: var(--premium-font);
  font-size: clamp(13px, 3vw, 19px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #100604;
}

.invite-link b {
  display: block;
  color: #ff9c22;
  font-family: var(--premium-font);
  font-size: clamp(18px, 4.5vw, 29px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #220b03, 0 0 7px rgba(255, 136, 18, .22);
}

.invite-coin {
  display: grid;
  place-items: center;
  padding: clamp(9px, 2.4vw, 14px);
}

.invite-coin b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffd36a;
  font-size: clamp(22px, 5.4vw, 34px);
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #160804, 0 0 7px rgba(255, 151, 28, .2);
}

.invite-button {
  grid-area: button;
  min-height: clamp(54px, 11vw, 78px);
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .36), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -4px 0 rgba(82, 22, 0, .56),
    0 4px 0 #120604,
    0 0 12px rgba(255, 101, 13, .2);
  font-family: var(--premium-font);
  font-size: clamp(17px, 4.4vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8d2605, 0 2px 0 rgba(63, 14, 0, .65);
}

.team-panel,
.friends-list-panel {
  padding: clamp(14px, 3.4vw, 22px);
}

.team-panel h2,
.friends-list-panel h2 {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  margin-bottom: clamp(12px, 3vw, 18px);
}

.team-icon,
.team-stat-icon.people {
  width: clamp(30px, 7vw, 45px);
  height: clamp(27px, 6vw, 39px);
  display: inline-block;
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .62));
}

.team-panel .team-icon,
.team-stat-icon.people {
  background: url("assets/ui/team-heading-icon.png?v=1") center / contain no-repeat;
}

.friends-list-panel .team-icon {
  background: url("assets/ui/friends-list-heading-icon.png?v=1") center / contain no-repeat;
}

.team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 24px);
}

.team-stats > div {
  min-height: clamp(70px, 14vw, 102px);
  display: grid;
  grid-template-columns: clamp(38px, 8vw, 56px) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: clamp(9px, 2vw, 14px);
  padding: clamp(9px, 2vw, 14px);
  border: 2px solid #2b1307;
  border-radius: 6px;
  background: rgba(7, 6, 5, .48);
  box-shadow: inset 0 0 0 1px #8c4b17;
}

.team-stats i,
.team-stat-icon {
  grid-row: 1 / 3;
  justify-self: center;
}

.team-stats p {
  margin: 0;
  color: #e7c38c;
  font-family: var(--premium-font);
  font-size: clamp(12px, 3vw, 20px);
  font-weight: 600;
  line-height: 1;
}

.team-stats strong {
  color: #ff9c22;
  font-family: var(--premium-font);
  font-size: clamp(26px, 6vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #160804, 0 0 6px rgba(255, 154, 24, .18);
}

.friend-list {
  display: grid;
  gap: clamp(5px, 1.2vw, 8px);
}

.friend-row {
  display: grid;
  grid-template-columns: clamp(50px, 11vw, 72px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  min-height: clamp(58px, 12vw, 82px);
  padding: clamp(5px, 1.3vw, 8px) clamp(8px, 2vw, 12px);
  border: 2px solid #2b1307;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 178, 57, .06), rgba(8, 7, 5, .48));
  box-shadow: inset 0 0 0 1px rgba(140, 75, 23, .86);
}

.friend-avatar {
  width: clamp(45px, 10vw, 66px);
  aspect-ratio: 1;
  border: 2px solid #251006;
  border-radius: 6px;
  background-color: #080706;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px #8b4a16, 0 3px 0 #050302;
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .62));
}

.friend-a { background-image: url("assets/ui/friends-hero-v2.png?v=1"); background-size: 185%; background-position: 36% 12%; }
.friend-b { background-image: url("assets/ui/chef.png"); background-size: 115%; background-position: center 12%; }
.friend-c { background-image: url("assets/ui/friends-hero-v2.png?v=1"); background-size: 178%; background-position: 75% 8%; }
.friend-d { background-image: url("assets/ui/friends-hero-v2.png?v=1"); background-size: 190%; background-position: 9% 10%; }

.friend-row b {
  display: block;
  color: #ffeac2;
  font-family: var(--premium-font);
  font-size: clamp(18px, 4.4vw, 29px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  text-shadow: 0 1px 0 #170805;
}

.friend-row div span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #82e23d;
  font-family: var(--premium-font);
  font-size: clamp(12px, 3.2vw, 20px);
  font-weight: 600;
  line-height: 1;
}

.friend-row div span i {
  width: clamp(8px, 2vw, 12px);
  height: clamp(8px, 2vw, 12px);
  border-radius: 50%;
  background: #76d733;
  box-shadow: 0 0 6px rgba(118, 215, 51, .46);
}

.friend-row.offline div span {
  color: #b7a58a;
}

.friend-row.offline div span i {
  background: #8e8574;
  box-shadow: none;
}

.friend-row > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffd36a;
  font-family: var(--premium-font);
  font-size: clamp(18px, 4.6vw, 29px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-shadow: 0 1px 0 #160804, 0 0 7px rgba(255, 151, 28, .18);
}

.wallet-screen {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(10px, 2.2vw, 16px);
  padding: clamp(30px, 6.4vw, 54px) clamp(8px, 2.2vw, 18px) 0;
}

.wallet-sign-spacer {
  visibility: hidden;
  pointer-events: none;
  width: min(82%, 520px);
  min-height: clamp(196px, 38vw, 282px);
  margin: 0 auto clamp(4px, 1vw, 10px);
}

.wallet-panel {
  position: relative;
  width: min(92%, 595px);
  margin: 0 auto;
  border: 3px solid #2c1408;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 173, 54, .1), transparent 33%),
    linear-gradient(90deg, rgba(122, 62, 18, .18), transparent 28% 72%, rgba(112, 56, 16, .16)),
    linear-gradient(180deg, rgba(24, 22, 17, .98), rgba(10, 9, 7, .99));
  box-shadow:
    inset 0 0 0 1px #8c4b17,
    inset 0 0 0 4px rgba(5, 4, 3, .78),
    0 4px 0 #080403,
    0 10px 22px rgba(0, 0, 0, .66);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.wallet-panel h2 {
  margin: 0 0 clamp(12px, 3vw, 20px);
  color: #ffc64d;
  font-family: var(--premium-font);
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #2d1205, 0 2px 0 rgba(4, 2, 1, .78), 0 0 8px rgba(255, 142, 22, .18);
}

.balance-panel {
  min-height: clamp(216px, 43vw, 310px);
  padding: clamp(16px, 4vw, 28px);
}

.wallet-balance-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(82px, 17vw, 122px);
  border: 2px solid #2b1307;
  border-radius: 7px;
  background: rgba(6, 5, 4, .5);
  box-shadow: inset 0 0 0 1px #8c4b17;
  overflow: hidden;
}

.wallet-currency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 2.2vw, 16px);
  padding: clamp(8px, 2vw, 14px);
}

.wallet-currency + .wallet-currency {
  border-left: 2px dashed rgba(188, 93, 24, .45);
}

.coin.big,
.gem.big {
  display: inline-block;
  width: clamp(34px, 7.8vw, 54px);
  height: clamp(34px, 7.8vw, 54px);
  flex: 0 0 clamp(34px, 7.8vw, 54px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.wallet-currency strong {
  color: #fff1cd;
  font-family: var(--premium-font);
  font-size: clamp(25px, 6.6vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  text-shadow: 0 2px 0 #160804, 0 0 8px rgba(255, 178, 52, .16);
}

.wallet-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
  margin-top: clamp(18px, 4vw, 28px);
}

.wallet-actions button {
  min-height: clamp(48px, 10vw, 72px);
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .36), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -4px 0 rgba(82, 22, 0, .56),
    0 4px 0 #120604,
    0 0 12px rgba(255, 101, 13, .2);
  font-family: var(--premium-font);
  font-size: clamp(15px, 3.8vw, 25px);
  font-weight: 700;
  letter-spacing: .07em;
  text-shadow: 0 1px 0 #8d2605, 0 2px 0 rgba(63, 14, 0, .65);
}

.wallet-connect-card {
  min-height: clamp(72px, 15vw, 104px);
  padding: clamp(10px, 2.6vw, 16px);
  display: grid;
  grid-template-columns: clamp(38px, 9vw, 58px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
}

.wallet-connect-mark {
  width: clamp(34px, 8vw, 52px);
  height: clamp(34px, 8vw, 52px);
  justify-self: center;
  background: url("assets/ui/gem.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .6));
}

.wallet-connect-card div {
  min-width: 0;
}

.wallet-connect-card strong {
  display: block;
  color: #ffc64d;
  font: 800 clamp(15px, 3.8vw, 24px)/1 var(--premium-font);
  letter-spacing: .08em;
}

.wallet-connect-card p {
  margin: 5px 0 0;
  color: #e7c38c;
  font: 700 clamp(12px, 3.1vw, 18px)/1.1 var(--premium-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-connect-card button {
  min-width: clamp(84px, 22vw, 132px);
  min-height: clamp(34px, 8vw, 48px);
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .34), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow: inset 0 0 0 1px #ffc13d, inset 0 -3px 0 rgba(82, 22, 0, .56), 0 3px 0 #120604;
  font: 800 clamp(11px, 2.8vw, 16px)/1 var(--premium-font);
  letter-spacing: .05em;
  text-shadow: 0 1px 0 #8d2605;
}

.wallet-connect-card button[hidden] {
  display: none;
}

.wallet-connect-card #walletDisconnectButton {
  grid-column: 3;
  margin-top: 0;
  min-width: clamp(78px, 19vw, 118px);
  color: #ffd1b8;
  background: linear-gradient(#542010, #180906);
  border-color: #7f2a17;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 85, .22), 0 3px 0 #120604;
}

.wallet-modal[hidden] {
  display: none;
}

.wallet-modal {
  position: fixed;
  z-index: 88;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: calc(var(--tg-top-safe) + 12px) 12px calc(94px + var(--tg-bottom-safe));
  background: rgba(3, 2, 1, .7);
  backdrop-filter: blur(3px);
}

.wallet-dialog {
  width: min(100%, 560px);
  border: 3px solid #2c1408;
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 173, 54, .12), transparent 30%),
    linear-gradient(180deg, rgba(28, 23, 17, .98), rgba(9, 8, 6, .99));
  box-shadow:
    inset 0 0 0 1px #8c4b17,
    inset 0 0 0 4px rgba(5, 4, 3, .78),
    0 16px 40px rgba(0, 0, 0, .78);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.wallet-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.wallet-dialog header small {
  display: block;
  color: #c98a37;
  font: 700 12px/1 var(--premium-font);
  letter-spacing: .12em;
}

.wallet-dialog header h2 {
  margin: 4px 0 0;
  color: #ffc64d;
  font: 800 clamp(22px, 5.8vw, 34px)/1 var(--premium-font);
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #2d1205, 0 0 8px rgba(255, 142, 22, .18);
}

.wallet-dialog header button {
  width: 36px;
  height: 36px;
  border: 1px solid #7a4318;
  border-radius: 6px;
  background: linear-gradient(#3a210d, #120b07);
  color: #ffd27b;
  font-size: 24px;
  line-height: 1;
}

.wallet-form {
  display: grid;
  gap: 11px;
}

.exchange-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.exchange-switch[hidden] {
  display: none;
}

.exchange-switch button {
  min-height: 40px;
  border: 1px solid #5f3516;
  border-radius: 5px;
  color: #d6b67f;
  background: linear-gradient(#19130e, #080706);
  font: 800 clamp(11px, 3vw, 16px)/1 var(--premium-font);
}

.exchange-switch button.active {
  color: #fff1cd;
  border-color: #a5651f;
  background: linear-gradient(#6a3a10, #1a1109);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 71, .22), 0 0 14px rgba(255, 136, 20, .16);
}

.wallet-form label {
  display: grid;
  gap: 6px;
  color: #e7c38c;
  font: 700 13px/1.2 var(--premium-font);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wallet-form input {
  width: 100%;
  min-height: 46px;
  border: 2px solid #2b1307;
  border-radius: 6px;
  padding: 0 12px;
  color: #fff1cd;
  background: rgba(6, 5, 4, .72);
  box-shadow: inset 0 0 0 1px #8c4b17;
  font: 800 clamp(20px, 5vw, 30px)/1 var(--premium-font);
  outline: none;
}

.wallet-form-note,
.wallet-form-error {
  margin: 0;
  color: #d8bc8c;
  font: 700 clamp(12px, 3vw, 16px)/1.25 var(--premium-font);
}

.wallet-form-error {
  color: #ff8a67;
}

.wallet-form-error[hidden] {
  display: none;
}

.wallet-submit {
  min-height: 50px;
  border: 2px solid #3a1606;
  border-radius: 6px;
  color: #ffe4aa;
  background:
    linear-gradient(180deg, rgba(255, 240, 137, .36), transparent 27%),
    linear-gradient(180deg, #ff9c13 0%, #e45c05 72%, #8d2c07 100%);
  box-shadow:
    inset 0 0 0 1px #ffc13d,
    inset 0 -4px 0 rgba(82, 22, 0, .56),
    0 4px 0 #120604;
  font: 800 clamp(16px, 4vw, 24px)/1 var(--premium-font);
  letter-spacing: .08em;
  text-shadow: 0 1px 0 #8d2605;
}

.history-panel {
  min-height: clamp(238px, 47vw, 348px);
  padding: clamp(16px, 4vw, 26px);
}

.history-list {
  display: grid;
  gap: clamp(6px, 1.4vw, 9px);
}

.history-row {
  display: grid;
  grid-template-columns: clamp(34px, 8vw, 52px) clamp(34px, 8vw, 52px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  min-height: clamp(58px, 12vw, 84px);
  padding: clamp(7px, 1.8vw, 12px) clamp(10px, 2.5vw, 16px);
  border: 2px solid #2b1307;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 178, 57, .06), rgba(8, 7, 5, .48));
  box-shadow: inset 0 0 0 1px rgba(140, 75, 23, .86);
}

.history-row .history-gem {
  grid-column: 1 / 3;
  justify-self: center;
}

.history-row .wallet-history-asset {
  grid-column: auto;
  justify-self: center;
}

.history-row .coin.tiny,
.history-row .history-gem {
  background-color: transparent;
  background-size: contain;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .55));
}

.history-type {
  width: clamp(30px, 7vw, 44px);
  height: clamp(30px, 7vw, 44px);
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff1cd;
  font-family: var(--premium-font);
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 124, .2), 0 2px 0 #050302;
}

.history-type.plus {
  background: linear-gradient(180deg, #4fa33a, #173d17);
  border: 2px solid #d18b20;
}

.history-type.minus {
  background: linear-gradient(180deg, #d64533, #5a100c);
  border: 2px solid #7f2418;
}

.history-row b {
  display: block;
  color: #fff1cd;
  font-family: var(--premium-font);
  font-size: clamp(17px, 4.2vw, 27px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 #160804;
}

.history-row span:not(.history-type) {
  display: block;
  margin-top: 4px;
  color: #e7c38c;
  font-family: var(--premium-font);
  font-size: clamp(13px, 3.2vw, 21px);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 1px 0 #090504;
}

.history-row time {
  color: #d8bc8c;
  font-family: var(--premium-font);
  font-size: clamp(13px, 3.2vw, 21px);
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 0 #090504;
}

@media (max-width: 480px) {
  .topbar { grid-template-columns: 42% 29% 29%; gap: 0; }
  .profile, .currency { padding-top: 5px; padding-bottom: 5px; }
  .profile { padding-left: 6px; padding-right: 4px; }
  .currency { padding-left: 6px; padding-right: 3px; }
  .upgrade { min-height: 0; }
  .machine { width: 38px; height: 38px; }
  .fryer-machine { height: 38px; }
  .tasks-screen { padding-top: 34px; gap: 9px; }
  .tasks-sign { width: 86%; min-height: 92px; grid-template-columns: 28px 1fr 28px; }
  .task-list { width: 96%; gap: 8px; min-height: 440px; }
  .task-card {
    grid-template-columns: 70px minmax(0, 1fr) 94px;
    gap: 8px;
    min-height: 104px;
    padding: 9px;
  }
  .task-copy { gap: 6px; }
  .task-reward { padding: 5px; gap: 4px; }
  .bonuses-screen {
    padding-top: 34px;
    gap: 8px;
  }
  .bonus-sign-spacer {
    width: 86%;
    min-height: 114px;
  }
  .bonus-panel { width: 96%; }
  .daily-card { padding: 12px 9px; }
  .bonus-title-row {
    grid-template-columns: 45px 1fr;
    gap: 9px;
    margin-bottom: 9px;
  }
  .daily-grid { gap: 4px; }
  .day {
    min-height: 74px;
    padding-left: 2px;
    padding-right: 2px;
  }
  .bonus-timer { margin-top: 10px; }
  .bonus-row {
    min-height: 100px;
    padding: 10px;
    grid-template-columns: 64px minmax(0, 1fr) 94px;
    gap: 8px;
  }
  .friends-screen {
    padding-top: 22px;
    gap: 8px;
  }
  .friends-sign {
    width: 88%;
    min-height: 158px;
  }
  .friend-panel { width: 96%; }
  .friends-invite {
    grid-template-columns: 34% minmax(0, 1fr);
    min-height: 188px;
    padding: 12px 10px;
    gap: 9px;
  }
  .friends-hero { width: min(100%, 150px); }
  .invite-copy h2,
  .team-panel h2,
  .friends-list-panel h2 { font-size: clamp(18px, 4.7vw, 27px); }
  .invite-copy p { font-size: clamp(11px, 2.8vw, 16px); }
  .invite-rewards { gap: 12px; padding: 7px 9px; }
  .invite-link,
  .invite-button { min-height: 50px; }
  .invite-url b { font-size: clamp(14px, 3.6vw, 22px); }
  .invite-coin b { font-size: clamp(18px, 4.5vw, 28px); }
  .team-panel,
  .friends-list-panel { padding: 11px 9px; }
  .team-stats { gap: 8px; }
  .friend-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 5px 7px;
  }
  .friend-avatar { width: 44px; }
  .wallet-screen {
    padding-top: 24px;
    gap: 9px;
  }
  .wallet-sign-spacer {
    min-height: 168px;
  }
  .wallet-panel { width: 96%; }
  .balance-panel,
  .history-panel { padding: 12px 10px; }
  .wallet-actions { gap: 7px; }
  .wallet-actions button { min-height: 46px; font-size: clamp(12px, 3.3vw, 20px); }
  .history-row {
    grid-template-columns: 34px 34px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 56px;
    padding: 6px 8px;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  .burger-tap {
    top: 57%;
    width: min(35%, 145px);
  }
  .tasks-screen { padding-top: 24px; gap: 7px; }
  .tasks-sign { min-height: 78px; }
  .task-list { min-height: 389px; }
  .tasks-sign strong { font-size: clamp(31px, 9vw, 48px); }
  .task-tabs button { min-height: 42px; font-size: clamp(13px, 3.7vw, 20px); }
  .task-card {
    grid-template-columns: 60px minmax(0, 1fr) 82px;
    min-height: 92px;
  }
  .task-copy h3 { font-size: clamp(13px, 3.65vw, 20px); }
  .task-copy strong { font-size: clamp(14px, 4vw, 22px); }
  .task-reward > span { font-size: clamp(10px, 2.8vw, 15px); }
  .task-reward b { font-size: clamp(15px, 4vw, 23px); gap: 4px; }
  .task-reward button { min-height: 31px; font-size: clamp(11px, 3.1vw, 17px); }
  .bonuses-screen {
    padding-top: 24px;
    gap: 6px;
  }
  .bonus-sign-spacer { min-height: 86px; }
  .daily-card { padding: 9px 7px; }
  .bonus-title-row {
    grid-template-columns: 36px 1fr;
    margin-bottom: 7px;
  }
  .calendar-icon { width: 36px; }
  .bonus-title-row h2,
  .bonus-copy h2 { font-size: clamp(14px, 4vw, 22px); }
  .bonus-title-row p,
  .bonus-copy p { font-size: clamp(10px, 2.7vw, 15px); }
  .day {
    min-height: 62px;
    border-width: 1px;
  }
  .day span { font-size: clamp(6px, 1.8vw, 10px); }
  .day b { font-size: clamp(12px, 3.4vw, 18px); gap: 2px; }
  .day .coin.tiny,
  .day .gem {
    width: 20px;
    height: 20px;
  }
  .bonus-timer { font-size: clamp(9px, 2.5vw, 14px); margin-top: 7px; }
  .bonus-row {
    min-height: 82px;
    padding: 8px;
    grid-template-columns: 50px minmax(0, 1fr) 76px;
    gap: 7px;
  }
  .bonus-copy strong { font-size: clamp(9px, 2.6vw, 14px); margin-top: 5px; }
  .bonus-row button {
    min-height: 32px;
    font-size: clamp(11px, 3.1vw, 17px);
  }
  .friends-screen {
    padding-top: 16px;
    gap: 6px;
  }
  .friends-sign {
    width: 90%;
    min-height: 128px;
  }
  .friends-sign strong { font-size: clamp(34px, 9.4vw, 50px); }
  .friends-sign-chef { font-size: clamp(24px, 6vw, 35px); margin-bottom: -6px; }
  .friends-invite {
    min-height: 154px;
    padding: 9px 8px;
    grid-template-columns: 30% minmax(0, 1fr);
    gap: 7px;
  }
  .friends-hero { width: min(100%, 104px); }
  .invite-copy h2,
  .team-panel h2,
  .friends-list-panel h2 { font-size: clamp(14px, 4vw, 21px); }
  .invite-copy p { margin: 5px 0 7px; font-size: clamp(9px, 2.6vw, 13px); }
  .invite-rewards span { font-size: clamp(15px, 4vw, 22px); gap: 5px; }
  .invite-link,
  .invite-button { min-height: 42px; }
  .invite-link span { top: -9px; font-size: clamp(9px, 2.6vw, 13px); }
  .invite-link b,
  .invite-button { font-size: clamp(11px, 3.1vw, 17px); }
  .invite-url b { font-size: clamp(11px, 3vw, 16px); }
  .invite-coin b { font-size: clamp(15px, 4vw, 22px); }
  .team-panel,
  .friends-list-panel { padding: 9px 7px; }
  .team-stats > div {
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .team-stats p { font-size: clamp(9px, 2.7vw, 13px); }
  .team-stats strong { font-size: clamp(20px, 5.3vw, 30px); }
  .friend-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 46px;
    gap: 6px;
  }
  .friend-avatar { width: 36px; }
  .friend-row b { font-size: clamp(13px, 3.7vw, 19px); }
  .friend-row div span { font-size: clamp(9px, 2.7vw, 13px); margin-top: 3px; }
  .friend-row > strong { font-size: clamp(13px, 3.7vw, 20px); gap: 4px; }
  .wallet-screen {
    padding-top: 16px;
    gap: 6px;
  }
  .wallet-sign-spacer { min-height: 132px; }
  .wallet-panel h2 { font-size: clamp(15px, 4.1vw, 22px); margin-bottom: 9px; }
  .balance-panel { min-height: 176px; padding: 10px 8px; }
  .wallet-balance-box { min-height: 66px; }
  .wallet-currency { gap: 8px; padding: 7px; }
  .coin.big,
  .gem.big {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .wallet-currency strong { font-size: clamp(19px, 5.4vw, 29px); letter-spacing: .015em; }
  .wallet-actions { margin-top: 12px; gap: 5px; }
  .wallet-actions button {
    min-height: 36px;
    font-size: clamp(9px, 2.7vw, 15px);
    letter-spacing: .035em;
  }
  .history-panel { min-height: 196px; padding: 10px 8px; }
  .history-row {
    grid-template-columns: 28px 28px minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 48px;
    padding: 5px 6px;
  }
  .history-type {
    width: 26px;
    height: 26px;
    font-size: 19px;
  }
  .history-row b { font-size: clamp(12px, 3.5vw, 18px); }
.history-row span:not(.history-type),
.history-row time { font-size: clamp(9px, 2.7vw, 13px); }
}

.admin-shield {
  position: fixed;
  z-index: 80;
  left: 50%;
  top: calc(var(--tg-top-safe) / 2);
  width: 36px;
  height: 40px;
  padding: 0;
  border: 1px solid #8a5a20;
  border-radius: 12px 12px 16px 16px;
  background:
    linear-gradient(135deg, rgba(255, 214, 106, .22), transparent 42%),
    linear-gradient(180deg, #2a1a0d, #0a0908 72%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 153, 24, .16),
    0 0 18px rgba(255, 132, 15, .35),
    0 4px 12px rgba(0, 0, 0, .72);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.admin-shield[hidden],
.admin-screen[hidden] {
  display: none;
}

.admin-shield span {
  position: absolute;
  inset: 7px 8px 6px;
  background: linear-gradient(180deg, #ffbf37, #b65c12 62%, #5a2b0d);
  clip-path: polygon(50% 0, 100% 18%, 88% 74%, 50% 100%, 12% 74%, 0 18%);
  filter: drop-shadow(0 1px 0 #120805);
}

.admin-screen {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: calc(var(--tg-top-safe) + 16px) 12px calc(96px + var(--tg-bottom-safe));
  background: rgba(3, 2, 1, .72);
  backdrop-filter: blur(3px);
}

.admin-card {
  width: min(100%, 640px);
  max-height: calc(100svh - var(--tg-top-safe) - 112px);
  overflow: auto;
  border: 2px solid #6d3b16;
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(53, 30, 12, .95), rgba(10, 9, 8, .98)),
    radial-gradient(circle at 50% 0, rgba(255, 150, 28, .18), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 76, .16), 0 16px 40px rgba(0, 0, 0, .8);
}

.admin-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #ffd37a;
  font-family: var(--premium-font);
}

.admin-head span {
  display: block;
  font-size: 12px;
  color: #c98a37;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-head h2 {
  margin: 2px 0 0;
  color: #fff0c8;
  font-size: clamp(22px, 6vw, 34px);
  letter-spacing: .04em;
}

.admin-head button {
  width: 36px;
  height: 36px;
  border: 1px solid #7a4318;
  border-radius: 6px;
  background: linear-gradient(#3a210d, #120b07);
  color: #ffd27b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-form label {
  display: grid;
  gap: 4px;
  color: #e5bd75;
  font: 700 12px/1.2 var(--premium-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-form input,
.admin-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #5f3516;
  border-radius: 5px;
  padding: 0 10px;
  color: #fff1cf;
  background: #080706;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 166, 45, .08);
}

.admin-form button,
.admin-task-row button {
  border: 1px solid #8c3d0c;
  border-radius: 5px;
  color: #fff0cd;
  font: 900 14px/1 var(--arcade-font);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(#ffb637 0, #ff7900 47%, #b93b04 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 145, .18), 0 3px 0 #3d1708;
  cursor: pointer;
}

.admin-form > button {
  grid-column: 1 / -1;
  min-height: 44px;
}

.admin-task-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.admin-empty {
  margin: 0;
  color: #b78b55;
  text-align: center;
}

.admin-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 76px;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(128, 70, 27, .85);
  border-radius: 6px;
  background: rgba(8, 7, 6, .72);
}

.admin-task-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-task-row b,
.admin-task-row strong {
  color: #fff0c8;
  font-family: var(--premium-font);
}

.admin-task-row span {
  min-width: 0;
  color: #c9a46d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-task-row button {
  min-height: 34px;
  font-size: 11px;
}

@media (max-width: 430px) {
  .admin-card { padding: 11px; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-task-row {
    grid-template-columns: minmax(0, 1fr) 68px;
  }
  .admin-task-row strong {
    grid-column: 1;
  }
  .admin-task-row button {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

.partner-task {
  grid-template-columns: minmax(0, 1fr) clamp(108px, 25vw, 168px);
}

.partner-task .task-art {
  display: none;
}

@media (max-width: 480px) {
  .partner-task {
    grid-template-columns: minmax(0, 1fr) 94px;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  .partner-task {
    grid-template-columns: minmax(0, 1fr) 82px;
  }
}