/* ============================================================
   GARIKI — Fantasy Idle Economy · Mobile Game UI System
   Shared visual language for ALL screens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=MedievalSharp&display=swap');

:root{
  /* === gold spectrum === */
  --gold-100:#FFE9A8;
  --gold-200:#FFD56B;
  --gold-300:#F5B83C;
  --gold-400:#E08A18;
  --gold-500:#A55B0E;
  --gold-600:#7A4012;
  --gold-700:#4A2608;

  /* === warm wood === */
  --wood-100:#E8C492;
  --wood-200:#C39265;
  --wood-300:#8B5530;
  --wood-400:#6B3F1E;
  --wood-500:#4A2C18;
  --wood-600:#2E1A0E;

  /* === magic purple === */
  --magic-100:#EADBFF;
  --magic-200:#C9A6FF;
  --magic-300:#9C6BFF;
  --magic-400:#7C3AED;
  --magic-500:#5B21B6;
  --magic-600:#3B0F8A;
  --magic-700:#220655;

  /* === sky === */
  --sky-100:#BAE2FF;
  --sky-200:#67B7FF;
  --sky-300:#3B82F6;
  --sky-400:#1E40AF;
  --sky-500:#0B1F5C;
  --sky-600:#050A2C;

  /* === green accents === */
  --green-200:#86EFAC;
  --green-300:#22C55E;
  --green-400:#15803D;
  --green-500:#0B4A24;

  /* === status === */
  --red-300:#EF4444;
  --red-400:#B91C1C;

  /* === stage backdrop === */
  --bg-deep:    radial-gradient(120% 80% at 50% 0%, #2A1664 0%, #160C45 38%, #0A0823 72%, #050414 100%);
  --bg-haze:    radial-gradient(60% 40% at 50% 30%, rgba(156,107,255,0.45), transparent 70%);
  --bg-stars:   radial-gradient(2px 2px at 20% 12%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 70% 25%, #C9A6FF, transparent 60%), radial-gradient(1.2px 1.2px at 35% 60%, #fff, transparent 60%), radial-gradient(1px 1px at 85% 70%, #FFE9A8, transparent 60%), radial-gradient(1.4px 1.4px at 15% 80%, #fff, transparent 60%);

  /* shadows / glows */
  --shadow-card: 0 10px 28px rgba(5,4,20,0.55), 0 2px 0 rgba(255,233,168,0.08) inset;
  --glow-gold:   0 0 24px rgba(245,184,60,0.55), 0 0 60px rgba(245,184,60,0.25);
  --glow-magic:  0 0 28px rgba(156,107,255,0.6), 0 0 70px rgba(124,58,237,0.35);
  --glow-cyan:   0 0 22px rgba(103,183,255,0.55);
  --glow-green:  0 0 22px rgba(34,197,94,0.55);

  /* type */
  --font-display:'Cinzel', 'Trajan Pro', 'Iowan Old Style', Georgia, serif;
  --font-fancy:  'MedievalSharp', 'Cinzel', serif;
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* device */
  --device-w: 390px;
  --device-h: 844px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:var(--font-body);
  color:#F4E9D4;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  background:#050414;
  /* Telegram WebApp: kill the document-level rubber-band so the page can't be
     dragged up into a black gap, and an over-pull won't trigger the close gesture. */
  overscroll-behavior:none;
}
/* The tall scrollable city map: contain its overscroll so reaching the top/bottom
   neither bounces into the dark backdrop nor chains to Telegram's swipe-to-close. */
.map-scroll{ overscroll-behavior:none; }

/* ============================================================
   STAGE — vertical 9:16 device frame for Telegram WebApp preview
   ============================================================ */
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    var(--bg-stars),
    var(--bg-haze),
    var(--bg-deep);
  background-size:600px 600px, auto, auto;
}
.device{
  position:relative;
  width:var(--device-w);
  height:var(--device-h);
  border-radius:48px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 0 0 10px #0a0814,
    0 0 0 12px #2a1a48,
    0 0 0 13px #4a2c80,
    0 40px 80px rgba(70,30,160,0.45),
    0 0 120px rgba(124,58,237,0.35);
}
.device::before{
  /* Dynamic Island */
  content:"";
  position:absolute;
  top:14px;left:50%;
  transform:translateX(-50%);
  width:120px;height:34px;
  background:#000;
  border-radius:20px;
  z-index:200;
}

/* When rendered in a tight iframe (gallery preview), the device fills the
   viewport edge-to-edge — the parent provides the phone frame chrome. */
@media (max-width:500px){
  .stage{padding:0;background:none;}
  .device{
    /* Sizing on phones is done by the injected fit script: the fixed 390px design
       is zoom-scaled to fill the viewport width, so the scene background and the
       DOM building overlays scale together and stay aligned. (A plain max-width
       drop stretched only the width → scene cover-scale drifted and labels flew off.) */
    border-radius:0;
    box-shadow:none;
  }
  .device::before{display:none;}
}

/* ============================================================
   SCENE — magical sky background inside the device
   ============================================================ */
.scene{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,4,28,0) 0%, rgba(8,4,28,0) 60%, rgba(8,4,28,0.35) 100%),
    url("../mpi8uzu9-ChatGPT-Image-23-трав.-2026-р._-14_07_03.png") center center / cover no-repeat,
    #1F0F58;
  overflow:hidden;
}
.scene::before,
.scene::after{display:none;}

/* floating islands silhouette */
.island{
  position:absolute;
  border-radius:50% 50% 40% 40%/60% 60% 40% 40%;
  background:
    radial-gradient(60% 60% at 50% 20%, #6B9F3A 0%, #3F7028 38%, #2A4E1B 70%),
    #2A4E1B;
  box-shadow:0 30px 60px rgba(0,0,0,0.45), inset 0 -16px 0 rgba(0,0,0,0.25);
}
.island::before{
  content:"";
  position:absolute;
  inset:auto -10% -40% -10%;
  height:60%;
  background:
    radial-gradient(60% 100% at 50% 0%, #5C3B1A 0%, #3A220E 50%, transparent 80%);
  filter:blur(0.5px);
}
.island.small{width:140px;height:60px;}
.island.mid{width:200px;height:80px;}

/* ============================================================
   HUD — top resource bar
   ============================================================ */
.hud{
  position:absolute;
  top:58px;left:14px;right:14px;
  display:flex;align-items:center;gap:8px;
  z-index:50;
}
.hud-avatar{
  width:44px;height:44px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #FFE9A8 0%, #F5B83C 35%, #A55B0E 70%, #4A2608 100%);
  border:3px solid var(--gold-200);
  box-shadow:0 2px 6px rgba(0,0,0,0.5), 0 0 12px rgba(245,184,60,0.4);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;color:#3A2008;font-size:18px;
  flex:0 0 auto;
}
.hud-avatar .lvl{
  position:absolute;
  bottom:-4px;left:50%;transform:translateX(-50%);
  font-size:9px;background:#3A2008;color:var(--gold-200);
  padding:2px 6px;border-radius:8px;border:1px solid var(--gold-300);
  letter-spacing:.06em;
}
.hud-res{
  flex:1;display:flex;gap:6px;
}
.res-pill{
  flex:1;
  display:flex;align-items:center;gap:6px;
  padding:5px 8px 5px 4px;border-radius:18px;
  background:linear-gradient(180deg, #2E1A0E, #1A0F08);
  border:1.5px solid var(--gold-400);
  box-shadow:0 2px 0 rgba(255,233,168,0.12) inset, 0 4px 10px rgba(0,0,0,0.5);
  font-family:var(--font-display);font-weight:700;
  font-size:12px;color:var(--gold-100);
  letter-spacing:.02em;
  min-width:0;
}
.res-pill .icon{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 auto;
  font-size:13px;
  background:radial-gradient(circle at 35% 30%, #FFE9A8 0%, #F5B83C 40%, #7A4012 90%);
  box-shadow:0 0 6px rgba(245,184,60,0.7), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.res-pill.silver .icon{background:radial-gradient(circle at 35% 30%, #fff 0%, #cfd8e3 38%, #6c7a8b 90%);box-shadow:0 0 6px rgba(186,226,255,0.7), inset 0 -2px 0 rgba(0,0,0,0.2);}
.res-pill.magic .icon{
  background: url("../mpidc614-ChatGPT-Image-23-трав.-2026-р._-16_12_17.png") center/cover no-repeat;
  box-shadow:none;
  font-size:0;color:transparent;text-indent:-9999px;
  border:0;
}
.res-pill.ton .icon{background:radial-gradient(circle at 35% 30%, #BAE2FF 0%, #3B82F6 40%, #0B1F5C 95%);box-shadow:0 0 8px rgba(103,183,255,0.7);color:#fff;}
.res-pill .val{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
}
.res-pill .plus{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, #86EFAC, #22C55E 55%, #0B4A24);
  border:1.5px solid #fff;font-weight:800;color:#fff;font-size:13px;
  box-shadow:0 0 8px rgba(34,197,94,0.7);
  font-family:var(--font-body);
}
.hud-side{
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;
}
.icon-btn{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(180deg, var(--wood-300), var(--wood-500));
  border:2px solid var(--gold-300);
  display:grid;place-items:center;color:var(--gold-100);
  box-shadow:0 3px 0 var(--wood-600), 0 0 8px rgba(245,184,60,0.25);
  font-size:16px;
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.botnav{
  position:absolute;left:10px;right:10px;bottom:18px;
  height:74px;
  background:
    linear-gradient(180deg, #6B3F1E 0%, #4A2C18 70%, #2E1A0E 100%);
  border:2.5px solid var(--gold-300);
  border-radius:22px;
  box-shadow:
    0 0 0 1px rgba(255,233,168,0.4) inset,
    0 -4px 0 rgba(0,0,0,0.35) inset,
    0 12px 30px rgba(0,0,0,0.55);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:6px 10px;
  z-index:50;
}
.botnav::before,.botnav::after{
  content:"";position:absolute;top:-1px;width:14px;height:14px;
  background:radial-gradient(circle at 35% 30%, #FFE9A8, #F5B83C 50%, #7A4012);
  border:1.5px solid #2E1A0E;border-radius:50%;
}
.botnav::before{left:-1px;}
.botnav::after{right:-1px;}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#D4A574;font-family:var(--font-display);font-weight:600;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  position:relative;
  text-decoration:none;
}
.nav-item .glyph{
  width:30px;height:30px;display:grid;place-items:center;font-size:18px;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.nav-item.active{color:#FFE9A8;}
.nav-item.active::before{
  content:"";position:absolute;inset:2px;border-radius:14px;
  background:radial-gradient(60% 70% at 50% 40%, rgba(245,184,60,0.45), transparent 70%);
  z-index:-1;
}
.nav-item.active .glyph{
  filter:drop-shadow(0 0 6px rgba(245,184,60,0.9));
}

/* ============================================================
   PANELS, CARDS, BUTTONS — the shared fantasy chrome
   ============================================================ */
.panel{
  background:
    linear-gradient(180deg, #6B3F1E 0%, #4A2C18 100%);
  border:2.5px solid var(--gold-300);
  border-radius:18px;
  box-shadow:
    0 0 0 1px rgba(255,233,168,0.35) inset,
    0 -3px 0 rgba(0,0,0,0.35) inset,
    0 10px 24px rgba(0,0,0,0.5);
  position:relative;
}
.panel.dark{
  background:linear-gradient(180deg, #2E1A0E 0%, #1A0F08 100%);
}
.panel.scroll{
  background:
    radial-gradient(120% 60% at 50% 0%, #F3D89B 0%, #E0B873 30%, #C18A47 60%, #9A6433 100%);
  border:none;border-radius:8px;
  box-shadow:
    0 0 0 2px #5A3415 inset,
    0 0 0 4px #C18A47 inset,
    0 14px 30px rgba(0,0,0,0.55);
  color:#3A2008;
}
.panel-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FFE9A8;
  text-shadow:0 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(245,184,60,0.45);
}

/* TITLE BANNER — the scrolled ribbon header used at top of pages */
.banner{
  position:relative;
  margin:0 auto;
  padding:10px 28px;
  background:
    linear-gradient(180deg, #C77B1F 0%, #A55B0E 60%, #7A4012 100%);
  border:2px solid #FFE9A8;
  border-radius:16px;
  box-shadow:
    0 0 0 1px #2E1A0E inset,
    0 0 18px rgba(245,184,60,0.6),
    0 6px 14px rgba(0,0,0,0.55);
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFF5DA;
  text-shadow:0 2px 0 #5A3415, 0 0 8px rgba(245,184,60,0.7);
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:center;
}
.banner::before,.banner::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:32px;
  background:
    linear-gradient(180deg, #A55B0E 0%, #7A4012 100%);
  border:2px solid #FFE9A8;
  box-shadow:0 0 8px rgba(245,184,60,0.5);
}
.banner::before{
  left:-12px;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
  border-radius:0 0 0 0;
}
.banner::after{
  right:-12px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

/* BUTTON */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;
  border-radius:14px;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  border:2px solid;
  cursor:pointer;
  position:relative;
  text-decoration:none;
  color:#FFF5DA;
  text-shadow:0 2px 0 rgba(0,0,0,0.45);
  user-select:none;
}
.btn.gold{
  background:linear-gradient(180deg, #FFD56B 0%, #F5B83C 45%, #C77B1F 100%);
  border-color:#FFE9A8;
  color:#3A2008;
  text-shadow:0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 1px #5A3415 inset,
    0 -3px 0 rgba(0,0,0,0.25) inset,
    0 3px 0 #7A4012,
    0 0 14px rgba(245,184,60,0.6);
}
.btn.green{
  background:linear-gradient(180deg, #86EFAC 0%, #22C55E 45%, #15803D 100%);
  border-color:#D2FAD8;color:#0B2C16;
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
  box-shadow:
    0 0 0 1px #0B4A24 inset,
    0 -3px 0 rgba(0,0,0,0.25) inset,
    0 3px 0 #0B4A24,
    0 0 14px rgba(34,197,94,0.55);
}
.btn.purple{
  background:linear-gradient(180deg, #C9A6FF 0%, #9C6BFF 45%, #5B21B6 100%);
  border-color:#EADBFF;
  box-shadow:
    0 0 0 1px #220655 inset,
    0 -3px 0 rgba(0,0,0,0.3) inset,
    0 3px 0 #220655,
    0 0 14px rgba(156,107,255,0.6);
}
.btn.blue{
  background:linear-gradient(180deg, #BAE2FF 0%, #3B82F6 45%, #1E40AF 100%);
  border-color:#DCEDFF;
  box-shadow:
    0 0 0 1px #0B1F5C inset,
    0 -3px 0 rgba(0,0,0,0.3) inset,
    0 3px 0 #0B1F5C,
    0 0 14px rgba(59,130,246,0.55);
}
.btn.wood{
  background:linear-gradient(180deg, var(--wood-300), var(--wood-500));
  border-color:var(--gold-300);
  box-shadow:
    0 0 0 1px var(--wood-600) inset,
    0 -3px 0 rgba(0,0,0,0.3) inset,
    0 3px 0 var(--wood-600);
}
.btn.red{
  background:linear-gradient(180deg, #FCA5A5 0%, #EF4444 45%, #991B1B 100%);
  border-color:#FECACA;
  box-shadow:
    0 0 0 1px #4B0F0F inset,
    0 -3px 0 rgba(0,0,0,0.3) inset,
    0 3px 0 #4B0F0F,
    0 0 14px rgba(239,68,68,0.55);
}
.btn.disabled, .btn[disabled]{
  filter:grayscale(0.6) brightness(0.7);
  pointer-events:none;
}
.btn.lg{padding:14px 24px;font-size:15px;border-radius:18px;}
.btn.sm{padding:6px 12px;font-size:11px;border-radius:10px;}
.btn .price{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(0,0,0,0.25);padding:2px 8px;border-radius:8px;font-size:11px;
}

/* CARD — a hero/item card with rarity glow */
.card{
  position:relative;
  background:
    linear-gradient(180deg, #5B2C8A 0%, #3B0F8A 100%);
  border:2px solid var(--gold-300);
  border-radius:16px;
  padding:8px 8px 10px;
  box-shadow:
    0 0 0 1px rgba(255,233,168,0.4) inset,
    0 0 18px rgba(124,58,237,0.4),
    0 8px 18px rgba(0,0,0,0.55);
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.card.rarity-common{
  background:linear-gradient(180deg, #4A3F2A 0%, #2E2618 100%);
  box-shadow:0 0 0 1px rgba(255,233,168,0.3) inset, 0 8px 18px rgba(0,0,0,0.55);
}
.card.rarity-rare{
  background:linear-gradient(180deg, #1E40AF 0%, #0B1F5C 100%);
  box-shadow:0 0 0 1px rgba(186,226,255,0.4) inset, 0 0 20px rgba(59,130,246,0.55), 0 8px 18px rgba(0,0,0,0.55);
}
.card.rarity-epic{
  background:linear-gradient(180deg, #5B2C8A 0%, #3B0F8A 100%);
  box-shadow:0 0 0 1px rgba(234,219,255,0.4) inset, 0 0 22px rgba(156,107,255,0.7), 0 8px 18px rgba(0,0,0,0.55);
}
.card.rarity-legendary{
  background:linear-gradient(180deg, #C77B1F 0%, #7A4012 100%);
  box-shadow:0 0 0 1px rgba(255,233,168,0.7) inset, 0 0 24px rgba(245,184,60,0.85), 0 8px 18px rgba(0,0,0,0.55);
}
.card.rarity-mythic{
  background:linear-gradient(180deg, #EF4444 0%, #7C1D1D 100%);
  box-shadow:0 0 0 1px rgba(254,202,202,0.6) inset, 0 0 24px rgba(239,68,68,0.85), 0 8px 18px rgba(0,0,0,0.55);
}

.rarity-tag{
  position:absolute;top:-6px;right:-6px;
  font-family:var(--font-display);font-weight:800;font-size:9px;
  padding:3px 8px;border-radius:8px;letter-spacing:.1em;
  border:1.5px solid #fff;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
  z-index:3;
}
.rarity-tag.common{background:linear-gradient(180deg, #94A3B8, #475569);}
.rarity-tag.rare{background:linear-gradient(180deg, #60A5FA, #1E40AF);}
.rarity-tag.epic{background:linear-gradient(180deg, #C084FC, #5B21B6);box-shadow:0 0 8px rgba(192,132,252,0.7);}
.rarity-tag.legendary{background:linear-gradient(180deg, #FFD56B, #A55B0E);box-shadow:0 0 10px rgba(245,184,60,0.8);color:#3A2008;text-shadow:0 1px 0 rgba(255,255,255,0.3);}
.rarity-tag.mythic{background:linear-gradient(180deg, #FCA5A5, #991B1B);box-shadow:0 0 10px rgba(239,68,68,0.8);}

/* portrait inside cards */
.portrait{
  position:relative;
  height:104px;
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 35%, #FFE9A8 0%, transparent 60%),
    linear-gradient(180deg, #2E1A0E 0%, #1A0F08 100%);
  border:2px solid var(--gold-400);
  display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.5) inset;
}
.portrait .gariki{font-size:60px;line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55));}

/* stat row */
.stat-row{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;border-radius:10px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,233,168,0.18);
  font-size:11px;color:#FFE9A8;
  font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
}
.stat-row .lbl{color:#D4A574;text-transform:uppercase;font-size:9px;letter-spacing:.1em;}
.stat-row .val{margin-left:auto;color:#FFF5DA;text-shadow:0 1px 0 rgba(0,0,0,0.6);}

/* utilities */
.scrollable{overflow-y:auto;}
.scrollable::-webkit-scrollbar{display:none}

/* ==== gariki character art (CSS-only) ==== */
.gar{
  --skin:#F4C28A;
  --robe:#7C3AED;
  --robe2:#5B21B6;
  --eye:#1E1B3B;
  position:relative;
  width:84px;height:90px;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,0.55));
}
.gar .body{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:54px;
  background:linear-gradient(180deg, var(--robe) 0%, var(--robe2) 100%);
  border-radius:34px 34px 12px 12px / 30px 30px 10px 10px;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,0.25);
}
.gar .body::before{
  /* robe trim */
  content:"";position:absolute;left:8px;right:8px;top:18px;height:4px;
  background:linear-gradient(180deg, #FFD56B, #C77B1F);
  border-radius:2px;
}
.gar .head{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FFF 0%, var(--skin) 40%, #B07A4B 90%);
  box-shadow:0 3px 0 rgba(0,0,0,0.2) inset;
}
.gar .eye{
  position:absolute;top:22px;width:6px;height:8px;border-radius:50%;
  background:var(--eye);
}
.gar .eye.l{left:14px;}
.gar .eye.r{right:14px;}
.gar .eye::after{
  content:"";position:absolute;left:1px;top:1px;width:2px;height:2px;background:#fff;border-radius:50%;
}
.gar .hat{
  position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  width:62px;height:32px;
}
.gar .hat::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:linear-gradient(180deg, var(--robe), var(--robe2));
  border-radius:14px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3);
}
.gar .hat::after{
  content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:0;height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-bottom:32px solid var(--robe);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.2));
}
.gar .star{
  position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  width:14px;height:14px;
  background:radial-gradient(circle, #FFE9A8 0%, #F5B83C 40%, #7A4012 100%);
  clip-path:polygon(50% 0%, 61% 38%, 98% 38%, 68% 60%, 79% 98%, 50% 76%, 21% 98%, 32% 60%, 2% 38%, 39% 38%);
  filter:drop-shadow(0 0 6px rgba(245,184,60,0.9));
  z-index:2;
}
.gar .beard{
  position:absolute;left:50%;top:46px;transform:translateX(-50%);
  width:34px;height:18px;
  background:radial-gradient(60% 100% at 50% 0%, #fff 0%, #D4D4D4 60%, #94A3B8 100%);
  border-radius:0 0 18px 18px;
}
.gar.green{ --robe:#22C55E; --robe2:#15803D; --skin:#86EFAC; }
.gar.blue{ --robe:#3B82F6; --robe2:#1E40AF; --skin:#FDE68A; }
.gar.red{ --robe:#EF4444; --robe2:#7C1D1D; --skin:#F4C28A; }
.gar.gold{ --robe:#F5B83C; --robe2:#A55B0E; --skin:#F4C28A; }
.gar.cyan{ --robe:#22D3EE; --robe2:#0E7490; --skin:#FDE68A; }

/* ==== big cauldron ==== */
.cauldron{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);
  width:240px;height:180px;
  z-index:10;
}
.cauldron .body{
  position:absolute;left:0;right:0;bottom:0;height:140px;
  background:
    radial-gradient(120% 60% at 50% 0%, #6E7682 0%, #3A4350 40%, #1A1F2A 100%);
  border-radius:50% 50% 30% 30%/40% 40% 30% 30%;
  box-shadow:
    inset 0 -16px 22px rgba(0,0,0,0.65),
    inset 0 8px 0 rgba(255,255,255,0.08),
    0 30px 60px rgba(0,0,0,0.6);
}
.cauldron .rim{
  position:absolute;left:-6px;right:-6px;top:8px;height:30px;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFE9A8 0%, #F5B83C 30%, #7A4012 75%, #4A2608 100%);
  border-radius:50%/40px;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.45),
    inset 0 3px 0 rgba(255,255,255,0.35),
    0 0 18px rgba(245,184,60,0.6);
}
.cauldron .brew{
  position:absolute;left:18px;right:18px;top:18px;height:30px;
  border-radius:50%/14px;
  background:
    radial-gradient(60% 100% at 50% 0%, #C9A6FF 0%, #9C6BFF 60%, #5B21B6 100%);
  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.45),
    0 0 24px rgba(156,107,255,0.7);
}
.cauldron .smoke{
  position:absolute;left:50%;bottom:90%;transform:translateX(-50%);
  width:160px;height:120px;
  background:
    radial-gradient(40% 40% at 30% 80%, rgba(201,166,255,0.6), transparent 70%),
    radial-gradient(40% 40% at 60% 60%, rgba(201,166,255,0.5), transparent 70%),
    radial-gradient(40% 40% at 45% 30%, rgba(234,219,255,0.55), transparent 70%),
    radial-gradient(40% 40% at 75% 20%, rgba(201,166,255,0.4), transparent 70%);
  filter:blur(2px);
  pointer-events:none;
}
.cauldron .legs{
  position:absolute;left:8%;right:8%;bottom:-14px;height:20px;
  display:flex;justify-content:space-between;
}
.cauldron .legs::before,.cauldron .legs::after{
  content:"";width:24px;height:24px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, #3A4350 0%, #14181F 100%);
}

/* slot ring for gariki around cauldron */
.slot{
  position:absolute;width:64px;height:64px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,233,168,0.18), transparent 60%),
    linear-gradient(180deg, var(--wood-300), var(--wood-500));
  border:2.5px solid var(--gold-300);
  display:grid;place-items:center;
  box-shadow:
    0 0 0 1px rgba(255,233,168,0.3) inset,
    0 0 12px rgba(245,184,60,0.4),
    0 6px 12px rgba(0,0,0,0.55);
  z-index:12;
}
.slot.empty::before{
  content:"+";font-family:var(--font-display);font-weight:800;
  color:rgba(255,233,168,0.55);font-size:30px;
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
}
.slot .gar{transform:scale(0.65);transform-origin:center;width:84px;height:90px;position:absolute;left:50%;top:50%;margin-left:-42px;margin-top:-45px;}
.slot .lvl{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg, #FFD56B, #A55B0E);
  color:#3A2008;font-family:var(--font-display);font-weight:800;font-size:10px;
  padding:1px 6px;border-radius:8px;border:1.5px solid #FFE9A8;letter-spacing:.04em;
  z-index:3;
}

/* progress bar */
.bar{
  position:relative;
  height:10px;
  background:rgba(0,0,0,0.4);border-radius:6px;
  border:1.5px solid var(--wood-500);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,233,168,0.15);
}
.bar > i{
  display:block;height:100%;
  background:linear-gradient(180deg, #FFE9A8 0%, #F5B83C 50%, #C77B1F 100%);
  box-shadow:0 0 8px rgba(245,184,60,0.7);
  border-radius:5px;
}
.bar.green > i{background:linear-gradient(180deg, #86EFAC 0%, #22C55E 50%, #15803D 100%);box-shadow:0 0 8px rgba(34,197,94,0.7);}
.bar.purple > i{background:linear-gradient(180deg, #C9A6FF 0%, #9C6BFF 50%, #5B21B6 100%);box-shadow:0 0 8px rgba(156,107,255,0.7);}
.bar.blue > i{background:linear-gradient(180deg, #BAE2FF 0%, #3B82F6 50%, #1E40AF 100%);box-shadow:0 0 8px rgba(59,130,246,0.7);}

/* sparkle helper */
.sparkle{position:absolute;pointer-events:none;font-size:14px;animation:spk 2.4s infinite ease-in-out;}
@keyframes spk{0%,100%{opacity:0.2;transform:scale(0.7)}50%{opacity:1;transform:scale(1.2)}}

/* common screen layout */
.screen-pad{padding:108px 14px 110px;}
.title-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.back-btn{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(180deg, var(--wood-300), var(--wood-500));
  border:2px solid var(--gold-300);
  display:grid;place-items:center;color:#FFE9A8;font-size:18px;
  font-family:var(--font-display);font-weight:800;
  box-shadow:0 3px 0 var(--wood-600);
  flex:0 0 auto;
}

/* tabs row */
.tabs{display:flex;gap:6px;padding:4px;
  background:rgba(0,0,0,0.4);border:1.5px solid var(--wood-500);border-radius:14px;}
.tab{
  flex:1;padding:8px 6px;text-align:center;border-radius:10px;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#D4A574;
}
.tab.active{
  background:linear-gradient(180deg, #C77B1F, #7A4012);
  color:#FFF5DA;
  box-shadow:0 0 0 1px #FFE9A8 inset, 0 0 10px rgba(245,184,60,0.4);
}

/* coin/gem icons used inline */
.ico{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;flex:0 0 auto;}
.ico.gold{background:radial-gradient(circle at 35% 30%, #FFE9A8, #F5B83C 50%, #7A4012);box-shadow:0 0 6px rgba(245,184,60,0.7);color:#3A2008;}
.ico.silver{background:radial-gradient(circle at 35% 30%, #fff, #CFD8E3 40%, #6C7A8B);box-shadow:0 0 6px rgba(203,213,225,0.6);color:#1f2937;}
.ico.magic{
  background: url("../mpidc614-ChatGPT-Image-23-трав.-2026-р._-16_12_17.png") center/cover no-repeat;
  box-shadow:0 0 8px rgba(156,107,255,0.7);
  font-size:0;color:transparent;text-indent:-9999px;
}
.ico.ton{background:radial-gradient(circle at 35% 30%, #BAE2FF, #3B82F6 50%, #0B1F5C);box-shadow:0 0 8px rgba(103,183,255,0.7);color:#fff;}
.ico.green{background:radial-gradient(circle at 35% 30%, #86EFAC, #22C55E 50%, #0B4A24);box-shadow:0 0 6px rgba(34,197,94,0.7);color:#fff;}

/* divider */
.divider{height:1.5px;background:linear-gradient(90deg, transparent, var(--gold-400) 20%, var(--gold-200) 50%, var(--gold-400) 80%, transparent);margin:10px 0;border-radius:1px;opacity:.7;}

/* helper: vertical center label inside icon */
.glow-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  box-shadow:0 0 18px 4px currentColor;opacity:.6;
}