/* Eggnapped! — game-specific styles on top of the shared kit.css */
html, body { background: #5aa845; }
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6px * var(--u)); }
#coinPill small { font-size: 0.6em; font-weight: 600; color: #ffe680; margin-left: 2px; }
.pill.bag { font-size: calc(16px * var(--u)); min-width: 0; padding: calc(3px * var(--u)) calc(12px * var(--u)) calc(3px * var(--u)) calc(8px * var(--u)); }
.pill.bag.full { background: rgba(34, 197, 94, 0.85); }
.egg-ic { display: inline-block; width: 0.8em; height: 1.05em; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff 0 20%, #fff4dc 21% 70%, #e9d3a6 71%); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12); }

#objective {
  position: absolute; z-index: 4; top: calc(62px * var(--u)); left: 50%; transform: translateX(-50%);
  max-width: 60%; padding: calc(6px * var(--u)) calc(14px * var(--u)); border-radius: 999px;
  background: rgba(8, 30, 56, 0.6); border: 2px solid rgba(255, 255, 255, 0.18);
  font-weight: 600; font-size: calc(15px * var(--u)); text-align: center; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) { #objective { top: calc(102px * var(--u)); max-width: 92%; } }

#gatePrompt {
  position: absolute; z-index: 6; left: 50%; bottom: calc(22px * var(--u)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 18px;
  background: rgba(10, 28, 52, 0.9); border: 2px solid rgba(255, 255, 255, 0.22); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  animation: toastIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
#gateText { display: flex; flex-direction: column; font-weight: 600; font-size: calc(14px * var(--u)); }
#gateText b { font-size: 1.2em; }
#gateText span { display: flex; align-items: center; gap: 4px; opacity: 0.9; }
#gateText .coin { width: 1em; height: 1em; }
#btnGate:disabled { background: #8a96a3; color: #e8edf2; box-shadow: 0 4px 0 #5a6672; cursor: default; }

#panel { padding-top: calc(8px * var(--u)); background: linear-gradient(transparent, rgba(5, 25, 15, 0.45)); }
.shop-title { font-weight: 700; font-size: calc(15px * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }

.banner.danger .b2 { color: #ff5d6c; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 93, 108, 0.6); }
.banner.legend .b2 { color: #ffd23f; text-shadow: 0 4px 0 #a86a00, 0 0 28px rgba(255, 210, 63, 0.7); }
.banner.mythic .b2 { color: #ff7ad9; text-shadow: 0 4px 0 #8a1f5c, 0 0 32px rgba(255, 122, 217, 0.8); }

.logo span:first-child { color: #fff6dc; text-shadow: 0 calc(6px * var(--u)) 0 #c98a4a, 0 calc(12px * var(--u)) calc(22px * var(--u)) rgba(0, 0, 0, 0.35); }
.logo span:last-child { color: #ff9f43; text-shadow: 0 calc(6px * var(--u)) 0 #a8431b, 0 calc(12px * var(--u)) calc(22px * var(--u)) rgba(0, 0, 0, 0.35); }
#title { background: radial-gradient(ellipse at 50% 45%, rgba(20, 60, 20, 0.05), rgba(10, 35, 15, 0.55)); }

.sheet h3 { margin: 12px 0 2px; font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; }
.minebox { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mine { display: flex; flex-direction: column; align-items: center; width: 64px; padding: 2px 2px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 2px solid var(--rc); }
.mine img { width: 56px; height: 52px; object-fit: contain; }
.mine span { font-size: 11px; font-weight: 600; color: #ffe680; }
.dex .cell.on { border-color: color-mix(in srgb, var(--rc) 70%, transparent); }

/* Hints sit under the objective line so they never cover the raccoon (always at screen centre). */
.hint { top: calc(104px * var(--u)); bottom: auto; padding: 8px 16px; font-size: calc(16px * var(--u)); }
.hint .hint-hand { display: none; }
.hint.swipe { top: auto; bottom: 12%; }
.hint.swipe .hint-hand { display: block; }
#toasts { top: calc(150px * var(--u)); }
@media (max-width: 560px) {
  .hint { top: calc(142px * var(--u)); }
  #toasts { top: calc(188px * var(--u)); }
}