/* Islora site: the Dock pets (assets/js/sim/pets.js). Layers, bottom to top: the desktop, the pet behind the bar
   (clipped where the bar is), Alt Dock's glass and icons, the pet in front, the settings box, the pet's menu.
   Sizes are the app's: icon 49 pt, slot 61, bar 75 tall with radius 24, 5 pt above the screen's bottom. */
[data-sim="pets"] .cv { cursor: default; touch-action: pan-y; }
[data-sim="pets"] .layer { position: absolute; inset: 0; pointer-events: none; }
[data-sim="pets"] .layer > * { pointer-events: auto; }

/* ---------- Alt Dock ---------- */
[data-sim="pets"] .bar {
  position: absolute; height: 75px; bottom: 5px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(28,29,34,.52);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
[data-sim="pets"] .bar::after { /* the rim: light on top, fading down (0.8 pt) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-sim="pets"] .tile { position: absolute; width: 61px; height: 57px; cursor: pointer; }
[data-sim="pets"] .tile .stack { position: absolute; left: 6px; bottom: 0; width: 49px; height: 56px; transform-origin: 0 100%;
  transition: transform .35s cubic-bezier(.3,1.9,.45,1), opacity .35s; }
[data-sim="pets"] .tile.fallen .stack { transform: translateY(117.6px) rotate(75deg); opacity: 0; transition: transform .55s cubic-bezier(.5,0,.9,.5), opacity .55s cubic-bezier(.5,0,.9,.5); }
[data-sim="pets"] .tile .lift { position: absolute; left: 0; top: 0; width: 49px; height: 49px; transform-origin: 50% 100%;
  transition: transform .26s cubic-bezier(.3,1.25,.5,1), filter .26s; }
[data-sim="pets"] .tile:hover .lift { transform: translateY(-10px) scale(1.12); filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
[data-sim="pets"] .tile .hop { width: 49px; height: 49px; }
[data-sim="pets"] .tile img.ic { display: block; width: 49px; height: 49px; }
[data-sim="pets"] .tile .dot { position: absolute; left: 22.5px; bottom: 0; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.8); box-shadow: 0 .3px .8px rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
[data-sim="pets"] .tile.run .dot { opacity: 1; }
[data-sim="pets"] .tile .badge {
  position: absolute; right: -3.9px; top: -2.9px; min-width: 17.6px; height: 17.6px; padding: 0 4.9px; border-radius: 9px;
  background: #ff3b30; box-shadow: 0 1px 1.5px rgba(0,0,0,.3);
  font: 600 10.8px/17.6px -apple-system, BlinkMacSystemFont, var(--ui); text-align: center; color: #fff;
  transform: scale(.2); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s;
}
[data-sim="pets"] .tile.badged .badge { transform: none; opacity: 1; }
[data-sim="pets"] .tile .name {
  position: absolute; left: 50%; top: -39.8px; transform: translateX(-50%); padding: 4px 9px; border-radius: 20px; white-space: nowrap;
  font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, var(--ui); background: rgba(0,0,0,.72); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.16);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
[data-sim="pets"] .tile:hover .name { opacity: 1; }
[data-sim="pets"] .sepr { position: absolute; width: 13px; height: 49px; }
[data-sim="pets"] .sepr::after { content: ""; position: absolute; left: 6px; top: 7px; width: 1px; height: 35.3px; border-radius: 1px; background: rgba(255,255,255,.24); }

/* ---------- the pet and what goes with it ---------- */
[data-sim="pets"] .back { clip-path: var(--clip); }
[data-sim="pets"] .pet { position: absolute; left: 0; top: 0; background-repeat: no-repeat; will-change: transform; cursor: grab; touch-action: none; }
[data-sim="pets"] .pet.held { cursor: grabbing; }
[data-sim="pets"] .shade { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.16) 55%, rgba(0,0,0,0)); }
[data-sim="pets"] .yarn { position: absolute; left: 0; top: 0; width: 14px; height: 14px; pointer-events: none; }
[data-sim="pets"] .yarn svg { display: block; animation: pt-spin .9s linear infinite; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
[data-sim="pets"] .bowl { position: absolute; width: 24px; height: 12px; pointer-events: none; }
[data-sim="pets"] .bubble { position: absolute; width: 30px; height: 26px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
[data-sim="pets"] .bubble i { position: absolute; background: #fff; border-radius: 9px; }
[data-sim="pets"] .bubble .sy { position: absolute; left: 4px; top: 2px; width: 26px; height: 18px; display: grid; place-items: center; }
[data-sim="pets"] .bubble .sy span { display: block; height: 10px; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-sim="pets"] .heart { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: #ff6b94; -webkit-mask: url('/assets/ui/sym-heart-fill.png') center / 10px auto no-repeat; mask: url('/assets/ui/sym-heart-fill.png') center / 10px auto no-repeat;
  animation: pt-heart 1.8s linear both; }
@keyframes pt-heart {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  10% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.2); }
}
[data-sim="pets"] .scratch { position: absolute; width: 26px; height: 14px; margin: -7px 0 0 -13px; pointer-events: none; animation: pt-fade 40s linear both; }
@keyframes pt-fade { 0% { opacity: 0; } 1% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
[data-sim="pets"] .go { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75); animation: pt-go .7s ease-out both; }
@keyframes pt-go { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- the settings box (Ayarlar › Alt Dock › Evcil hayvan) ---------- */
[data-sim="pets"] .pbox {
  position: absolute; left: 20px; top: 20px; width: 318px; padding: 15px 16px 14px; border-radius: 18px; transform-origin: 0 0;
  background: rgba(30,31,36,.74); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.35);
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, var(--ui);
}
[data-sim="pets"] .pbox .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
[data-sim="pets"] .pbox .hd b { font: 600 15px/1.2 var(--ui); }
[data-sim="pets"] .pbox .hd span { color: var(--ink-2); font-size: 11.5px; white-space: nowrap; }
[data-sim="pets"] .pbox .kinds { display: flex; gap: 2px; margin: 10px 0 11px; padding: 2px; border-radius: 9px; background: rgba(255,255,255,.07); }
[data-sim="pets"] .pbox .kinds button { flex: 1; min-width: 0; border: 0; padding: 4px 0; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
[data-sim="pets"] .pbox .kinds button.on { background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
[data-sim="pets"] .need { display: flex; align-items: center; gap: 10px; height: 18px; }
[data-sim="pets"] .need + .need { margin-top: 4px; }
[data-sim="pets"] .need .l { width: 52px; }
[data-sim="pets"] .need .tr { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
[data-sim="pets"] .need .tr i { display: block; height: 100%; border-radius: 4px; background: var(--c); transition: width .6s ease; }
[data-sim="pets"] .need .v { width: 34px; text-align: right; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-sim="pets"] .pbox .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
[data-sim="pets"] .pbox .acts button { border: 0; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.14); }
[data-sim="pets"] .pbox .acts button:hover { background: rgba(255,255,255,.2); }
[data-sim="pets"] .pbox .note { margin-top: 10px; font-size: 10.5px; color: var(--ink-3); }
[data-sim="pets"] .cv.small .pbox { transform: scale(1.3); }
[data-sim="pets"] .cv.small .pbox .note { display: none; }

/* ---------- the pet's menu (a macOS menu) ---------- */
[data-sim="pets"] .menu {
  position: absolute; z-index: 60; min-width: 200px; padding: 5px; border-radius: 9px; transform-origin: 0 0;
  background: rgba(38,38,42,.82); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.16), 0 0 0 .5px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45);
  font: 13px/1 -apple-system, BlinkMacSystemFont, var(--ui); animation: pt-menu .12s ease-out;
}
@keyframes pt-menu { from { opacity: 0; } }
[data-sim="pets"] .menu .mi { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 22px; border-radius: 5px; white-space: nowrap; position: relative; }
[data-sim="pets"] .menu .mi.lb { color: rgba(255,255,255,.45); font-size: 12px; }
[data-sim="pets"] .menu button.mi { width: 100%; border: 0; background: transparent; text-align: left; cursor: default; }
[data-sim="pets"] .menu button.mi:hover { background: #0a64d8; }
[data-sim="pets"] .menu .mi.ck::before { content: "✓"; position: absolute; left: 8px; font-size: 11px; }
[data-sim="pets"] .menu hr { border: 0; height: 1px; margin: 5px 10px; background: rgba(255,255,255,.12); }
[data-sim="pets"] .cv.small .menu { transform: scale(1.5); }

/* hint chip and the notification trigger: top right, clear of the Dock */
[data-sim="pets"] .try { left: auto; right: 20px; top: 20px; bottom: auto; transform: none; }
[data-sim="pets"] .ctl {
  position: absolute; z-index: 40; right: 20px; top: 66px; display: flex; gap: 8px;
}
[data-sim="pets"] .ctl button {
  display: flex; align-items: center; gap: 7px; border: 0; padding: 8px 14px; border-radius: 18px; cursor: pointer;
  font-size: 14px; font-weight: 600; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14);
}
[data-sim="pets"] .ctl button:hover { background: rgba(0,0,0,.6); }
[data-sim="pets"] .ctl img { height: 14px; }
/* phones: the canvas is drawn at about half size, so the box, the menu and the chips are drawn larger */
[data-sim="pets"] .cv.small .try, [data-sim="pets"] .cv.small .ctl { transform: scale(1.6); transform-origin: 100% 0; }
[data-sim="pets"] .cv.small .ctl { top: 20px; }
[data-sim="pets"] .cv.small .try { top: 100px; }

/* the phone canvas (420 × 560): the strip on top, the pet's settings under it, text no smaller than ~10 px on screen */
[data-sim="pets"] .pet { -webkit-touch-callout: none; }
[data-sim="pets"] .cv.ph .try { left: 14px; right: auto; top: 14px; font-size: 15px; }
[data-sim="pets"] .cv.ph .ctl { right: 14px; top: 14px; }
[data-sim="pets"] .cv.ph .ctl button { font-size: 15px; padding: 9px 14px; }
[data-sim="pets"] .cv.ph .pbox { left: 14px; right: 14px; top: 314px; width: auto; padding: 14px 16px; font-size: 14px; }
[data-sim="pets"] .cv.ph .pbox .hd b { font-size: 17px; }
[data-sim="pets"] .cv.ph .pbox .hd span { font-size: 14px; }
[data-sim="pets"] .cv.ph .pbox .kinds { margin: 10px 0; }
[data-sim="pets"] .cv.ph .pbox .kinds button { font-size: 13.5px; padding: 6px 0; }
[data-sim="pets"] .cv.ph .need { height: 22px; }
[data-sim="pets"] .cv.ph .need .l { width: 64px; }
[data-sim="pets"] .cv.ph .need .tr { height: 8px; }
[data-sim="pets"] .cv.ph .need .v { width: 40px; font-size: 13px; }
[data-sim="pets"] .cv.ph .pbox .acts { gap: 7px; margin-top: 12px; }
[data-sim="pets"] .cv.ph .pbox .acts button { flex: 1 1 auto; font-size: 14px; padding: 8px 10px; }
[data-sim="pets"] .cv.ph .pbox .note { display: none; }
[data-sim="pets"] .cv.ph .menu { font-size: 14px; }
[data-sim="pets"] .cv.ph .menu .mi { height: 26px; }