/* ============================================================
   Growvia — HUD idle tycoon The Viaz (tycoon.js).
   Warna aksen per skill lewat .acc-<warna>.
   ============================================================ */

.ty-coll { --acc: var(--green); --acc-dk: #3a5a12; }
.ty-road { height: 6px; background: #150f0a; border: 2px solid var(--line); overflow: hidden; }
.ty-road i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-dk), var(--acc)); transform-origin: left; transition: transform .6s ease-out; }
.ty-road.wide { height: 8px; margin-bottom: 10px; }
.acc-green { --acc: #8ac926; --acc-dk: #3a5a12; }
.acc-gold { --acc: #f2b23a; --acc-dk: #5a3f0c; }
.acc-blue { --acc: #4fa8e0; --acc-dk: #173d57; }
.acc-red { --acc: #e05252; --acc-dk: #5a1612; }

/* Koleksi */
.ty-coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.ty-coll-cell {
  --rc: #b9b3a6;
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--bg2); border: 2px solid var(--line);
  transition: transform .15s ease;
}
.ty-coll-cell.r-uncommon { --rc: var(--green); } .ty-coll-cell.r-rare { --rc: var(--blue); }
.ty-coll-cell.r-epic { --rc: var(--purple); } .ty-coll-cell.r-legendary { --rc: var(--gold); }
.main .ty-coll-cell img { width: 30px; height: 30px; filter: brightness(0) opacity(.35); }
.ty-coll-cell.found { border-color: var(--rc); box-shadow: inset 0 0 10px color-mix(in srgb, var(--rc) 30%, transparent); }
.main .ty-coll-cell.found img { filter: none; }
.ty-coll-cell.found:hover { transform: translateY(-2px) scale(1.06); }

/* Partikel hadiah */
.ty-float {
  position: fixed; z-index: 120; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px; transform: translate(-50%, 0);
  font-family: var(--font-pixel); font-size: 13px; color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  animation: ty-rise 1.5s ease-out both;
}
.ty-float img { width: 18px; height: 18px; }
.ty-float.gold { color: var(--gold); }
.ty-float.xp { color: #c99af0; }
.ty-float.neg { color: #ff8f85; }
.ty-coin {
  position: fixed; z-index: 119; width: 18px; height: 18px; pointer-events: none;
  animation: ty-fly 1s cubic-bezier(.5, -0.4, .7, 1) both;
}
.stat-chip.money.ty-bump { animation: ty-bump .45s ease-out; }

/* Naik level */
.ty-levelup {
  --acc: var(--green);
  position: fixed; left: 50%; top: 30%; z-index: 130; pointer-events: none;
  display: grid; justify-items: center; gap: 6px; padding: 18px 30px;
  transform: translate(-50%, -50%);
  background: rgba(18, 14, 10, .92); border: 3px solid var(--acc);
  box-shadow: 0 0 0 3px #000, 0 0 40px color-mix(in srgb, var(--acc) 60%, transparent);
  animation: ty-lu 2.6s ease-out both;
}
.ty-lu-rays {
  position: absolute; inset: -60px; z-index: -1;
  background: repeating-conic-gradient(color-mix(in srgb, var(--acc) 35%, transparent) 0 8deg, transparent 8deg 22deg);
  border-radius: 50%; animation: ty-spin 6s linear infinite; opacity: .7;
  mask: radial-gradient(circle, #000 35%, transparent 70%);
}
.ty-lu-label { font-family: var(--font-pixel); font-size: 18px; color: var(--acc); text-shadow: 3px 3px 0 #000; }
.ty-lu-lv { font-family: var(--font-pixel); font-size: 11px; color: var(--head); }

/* Keyframes */
@keyframes ty-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ty-scan { from { left: -40%; } to { left: 100%; } }
@keyframes ty-beat { 50% { transform: scale(1.15); } }
@keyframes ty-float { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes ty-nudge { 50% { transform: translateX(3px); } }
@keyframes ty-glow { 50% { box-shadow: 0 0 10px rgba(242, 178, 58, .45); } }
@keyframes ty-btn { 50% { box-shadow: 0 3px 0 #1c1410, 0 0 14px rgba(242, 178, 58, .8); } }
@keyframes ty-shine { 0%, 40% { left: -45%; } 100% { left: 115%; } }
@keyframes ty-rise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -12px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}
@keyframes ty-fly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { transform: translate(0, -24px) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: .2; }
}
@keyframes ty-bump { 40% { transform: scale(1.15); box-shadow: 0 0 14px rgba(242, 178, 58, .9); } }
@keyframes ty-spin { to { transform: rotate(360deg); } }
@keyframes ty-lu {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* Responsif */
@media (max-width: 860px) { .ty-lu-label { font-size: 14px; } }