/* Emojis between friends (js/ui/giftui.js, js/ui/greetui.js): an emoji over a head, the pick of an
   earned emoji (rest camp, camp, your own portrait card), the camp's note of what friends sent, your
   collection in Trophies, and the portrait bar's hi choice with the greeting line above it. */

/* over a head (WorldUI floats) */
.float.emote { font-size: 50px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(255, 220, 120, .75)); text-shadow: none; }
.float.emote.small { font-size: 30px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }

/* ---------- the pick: a row of big emoji buttons ---------- */
.gift-pick { margin: 10px auto 2px; padding: 8px 10px 10px; border-radius: 14px; background: linear-gradient(#4a3a14, #2a2008); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 22px rgba(255, 210, 90, .35); animation: popIn .35s cubic-bezier(.2, 1.6, .4, 1); }
.gp-head { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.gp-ic { font-size: 30px; animation: bob 1.4s ease-in-out infinite; }
.gp-head b, .gp-done b { display: block; font-size: 18px; color: #ffd25a; }
.gp-head small, .gp-done small { display: block; font-size: 14px; font-weight: 600; color: var(--cream); }
.gp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.gp-e { width: 54px; height: 54px; padding: 0; border: none; border-radius: 14px; font-size: 32px; line-height: 1; cursor: pointer; background: linear-gradient(#fff6dc, #e8d6a8); box-shadow: inset 0 -4px 0 #b89a5a, 0 0 0 3px var(--ink); transition: transform .1s; }
.gp-e:hover { transform: translateY(-3px) scale(1.08); }
.gp-e:active { transform: translateY(2px) scale(.95); }
.gp-done { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; min-height: 54px; animation: popIn .3s cubic-bezier(.2, 1.6, .4, 1); }
.gp-big { font-size: 44px; line-height: 1; }
/* the rest camp's pick, on a screen of its own (giftui.js restGift): big and simple */
.modal.gift-modal.solo .panel { width: min(560px, 94vw); padding: 18px 18px 20px; }
.gift-solo .gs-ic { font-size: 54px; line-height: 1; animation: bob 1.4s ease-in-out infinite; }
.gift-solo h2 { margin: 6px 0 2px; font-size: 30px; color: #ffd25a; }
.gift-solo p { margin: 0; font-size: 16px; font-weight: 600; color: var(--cream); }
.gift-solo .gp-row { gap: 10px; margin-top: 14px; }
.gift-solo .gp-e { width: 68px; height: 68px; font-size: 42px; border-radius: 16px; }
.modal.gift-modal .panel { width: min(600px, 94vw); padding: 16px 16px 14px; }
.gift-pick.in-modal { margin: 0 0 6px; }
@media (max-height: 560px) {
  .gift-pick { margin-top: 6px; padding: 6px 8px 8px; }
  .gp-ic { font-size: 24px; }
  .gp-head b { font-size: 16px; }
  .gp-row { gap: 6px; margin-top: 6px; }
  .gp-e { width: 46px; height: 46px; font-size: 27px; border-radius: 12px; }
  .gift-solo .gs-ic { font-size: 40px; }
  .gift-solo h2 { font-size: 24px; }
  .gift-solo .gp-row { gap: 8px; margin-top: 10px; }
  .gift-solo .gp-e { width: 58px; height: 58px; font-size: 34px; }
}

/* ---------- camp ---------- */
/* the reminder while an earned emoji waits (the lesson card's look) */
.gift-card { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: none; border-radius: 14px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--cream);
  background: linear-gradient(#4a3a14, #2a2008); box-shadow: 0 0 0 3px #ffd25a, 0 0 0 6px var(--ink), 0 0 26px rgba(255, 210, 90, .35); animation: giftGlow 2.4s ease-in-out infinite; }
.gift-card b { display: block; font-size: 18px; color: #ffd25a; }
.gift-card span { font-size: 14px; font-weight: 600; }
.gift-card .gc-ic { font-size: 34px; line-height: 1; animation: bob 1.4s ease-in-out infinite; }
@keyframes giftGlow { 50% { box-shadow: 0 0 0 3px #ffe58a, 0 0 0 6px var(--ink), 0 0 30px 6px rgba(255, 210, 90, .55); } }
/* what friends sent while you were away: one short note, then the gifts fly to Trophies */
.gift-note { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: none; border-radius: 14px; text-align: left; font-family: var(--font); color: var(--cream); cursor: pointer;
  background: linear-gradient(#3a2450, #22142e); box-shadow: 0 0 0 3px #ff9ad8, 0 0 0 6px var(--ink), 0 0 26px rgba(255, 140, 210, .45); animation: popIn .35s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .5s, transform .5s; }
.gift-note.out { opacity: 0; transform: translateY(8px) scale(.96); }
.gn-ic { font-size: 34px; line-height: 1; }
.gn-in b { display: block; font-size: 17px; color: #ffc4ea; }
.gn-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 2px; font-size: 22px; line-height: 1.25; }
.gn-one i { font-style: normal; font-size: 16px; font-weight: 700; color: #fff; }
.gn-one small { font-size: 13px; font-weight: 700; margin-left: 1px; color: #ffd25a; }
.gift-fly { position: fixed; z-index: 70; font-size: 34px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.gift-bump { animation: bump .45s; }
@media (max-height: 560px) { .gift-card { padding: 6px 12px; } .gift-card .gc-ic { font-size: 28px; } .gift-note { padding: 8px 12px; } .gn-list { font-size: 19px; } }

/* ---------- your collection (Trophies) ---------- */
.emo-shelf { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 4px 0 6px; }
.emo { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 4px; border-radius: 12px; background: var(--th-tile); box-shadow: 0 0 0 3px var(--ink); }
.emo .i { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.1; }
.emo b { font-size: 15px; color: var(--th-title); }
.emo.off { opacity: .4; filter: grayscale(.8); }
.emo-latest { margin: 2px 0 6px; font-size: 15px; color: var(--th-sub); }
.emo-latest b { color: var(--th-text); }
.emo-latest small { font-size: 12px; color: #ffd25a; }
.emo-act { margin-bottom: 8px; }
.toast .toast-emo { font-size: 1.3em; line-height: 1; vertical-align: -2px; }

/* ---------- the portrait bar ---------- */
/* your card while an earned emoji waits: tap it to send */
.av-gift { position: absolute; left: -14px; top: 24%; z-index: 2; display: flex; align-items: center; justify-content: center; width: clamp(24px, calc(var(--s, 84px) * .4), 34px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(14px, calc(var(--s, 84px) * .24), 20px); background: radial-gradient(#5a2a6a, #24102e); box-shadow: 0 0 0 2px #ffd25a, 0 0 0 4px var(--ink), 0 0 12px 3px rgba(255, 210, 90, .7); animation: bob 1.2s ease-in-out infinite; pointer-events: none; }
/* the hi choice, above the tapped card */
.greet-pop { --pc: #ffd25a; position: absolute; z-index: 12; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 16px; pointer-events: auto;
  background: var(--th-card); box-shadow: 0 0 0 3px var(--pc), 0 0 0 6px var(--ink), 0 10px 24px rgba(0, 0, 0, .45); animation: greetIn .22s cubic-bezier(.2, 1.6, .4, 1); touch-action: manipulation; }
.greet-pop::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: var(--th-card); box-shadow: 3px 3px 0 0 var(--pc); }
.gpp-cap { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--th-text); }
.gpp-cap b { color: color-mix(in srgb, var(--pc) 45%, #fff); }
.gpp-cap small { font-size: 12px; color: var(--th-sub); }
.gpp-row { display: flex; gap: 8px; }
.greet-pop button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 60px; padding: 2px 0 0; border: none; border-radius: 14px; cursor: pointer; font-family: var(--font); color: #3a2a1a;
  background: linear-gradient(#fff6dc, #e8d6a8); box-shadow: inset 0 -4px 0 #b89a5a, 0 0 0 3px var(--ink); }
.greet-pop button span { font-size: 30px; line-height: 1; }
.greet-pop button small { font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.greet-pop button.pop { animation: greetTap .3s; }
.greet-pop .gpp-row.gifts { display: grid; grid-template-columns: repeat(4, 48px); gap: 6px; }
.greet-pop .gpp-row.gifts button { width: 48px; height: 48px; padding: 0; font-size: 28px; }
.greet-pop.gift.me .gpp-row.gifts { margin-bottom: 4px; }
.av-card.tip-glow { animation: tipGlow 1.1s ease-in-out 4; }
@keyframes tipGlow { 50% { filter: drop-shadow(0 0 14px #ffd25a) brightness(1.25); transform: translateY(-6px); } }
.gl-p.all b { color: #ffe08a; }
@keyframes greetIn { from { transform: translateX(-50%) translateY(10px) scale(.7); opacity: 0; } }
@keyframes greetTap { 40% { transform: scale(1.18); } }
/* the greeting line: who said hi to whom, just above the bar */
.greet-line { position: absolute; left: 50%; bottom: 140px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; transition: bottom .2s; }
.gl-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(18, 12, 7, .78); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); animation: glIn .3s cubic-bezier(.2, 1.5, .4, 1); transition: opacity .4s, transform .4s; }
.gl-chip.to-me { background: rgba(60, 40, 6, .9); box-shadow: 0 0 0 2px #ffd25a, 0 0 14px rgba(255, 210, 90, .5); }
.gl-chip.out { opacity: 0; transform: translateY(-8px); }
.gl-chip.bump { animation: glBump .35s; }
.gl-p { display: flex; align-items: center; gap: 4px; }
.gl-p b { text-shadow: 0 1px 0 #000; }
.gl-f { --s: 26px; position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--pc) 40%, #120c07); box-shadow: 0 0 0 2px var(--pc); }
.gl-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.gl-f .av-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--pc) 70%, #fff) 0, var(--pc) 45%, color-mix(in srgb, var(--pc) 45%, #120c07) 100%); }
.gl-f .av-fb span { font-size: 13px; }
.gl-f .av-fb b { display: none; }
.gl-e { font-size: 20px; line-height: 1; }
.gl-to { margin: 0 -2px; font-style: normal; font-size: 11px; opacity: .65; }
@keyframes glIn { from { transform: translateY(10px) scale(.8); opacity: 0; } }
@keyframes glBump { 40% { transform: scale(1.12); } }
@media (max-height: 560px) { .greet-pop button { width: 54px; height: 52px; } .greet-pop button span { font-size: 26px; } .gl-chip { font-size: 12px; } }

.reduce-motion .gp-ic, .reduce-motion .gift-card, .reduce-motion .gift-card .gc-ic, .reduce-motion .av-gift { animation: none; }