/* Feelings Box redesign (additive override, loaded after main.css):
   1. Each container choice looks like its real material — transparent glass,
      metal lock box with keyhole, wood-grain pot with overhanging lid,
      cardboard box with flaps/seams/tape.
   2. Feelings entering the box settle calmly (soft drift + brief warm glow)
      instead of the springy pop. */

/* Lids may overhang the container, so let them show past the box edge.
   Feelings sit above the material decorations. */
.jar{overflow:visible;margin:36px auto 8px} /* extra top margin makes room for overhanging lids/flaps */
.jar .drop-hint{z-index:1}
.jar .feelball{position:relative;z-index:2}

/* ---------- Glass Jar: transparent, refractive ---------- */
.jar.c-glass{
  border:2.5px solid rgba(148,183,205,.55);border-top:none;
  border-radius:12px 12px 34px 34px;
  background:
    linear-gradient(105deg,rgba(255,255,255,0) 62%,rgba(255,255,255,.34) 70%,rgba(255,255,255,0) 79%),
    linear-gradient(180deg,rgba(219,238,246,.18),rgba(186,215,229,.38));
  box-shadow:
    inset 0 -12px 16px -8px rgba(255,255,255,.65),
    inset 7px 0 10px -7px rgba(255,255,255,.9),
    inset -7px 0 10px -7px rgba(122,160,180,.5),
    0 6px 14px rgba(90,72,44,.1);
}
.jar.c-glass::before{ /* tall light streak down the left side */
  content:"";position:absolute;left:13px;top:12px;bottom:16px;width:13px;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.12) 68%,rgba(255,255,255,.55));
  pointer-events:none;z-index:3;
}
.jar.c-glass::after{ /* thin echo streak on the right */
  content:"";position:absolute;right:18px;top:22px;bottom:30px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05));
  pointer-events:none;z-index:3;
}
.jar.c-glass .lid{
  width:158px;height:16px;top:-12px;border-radius:8px;
  background:linear-gradient(180deg,#C08B4F,#A9743F);border:2px solid var(--wood-deep);
  box-shadow:0 2px 4px rgba(90,72,44,.25);
}
.jar.c-glass .lid::after{content:"";position:absolute;left:9px;right:9px;top:2px;height:4px;border-radius:3px;background:rgba(255,246,222,.4)}

/* ---------- Lock Box: brushed metal, rivets, keyhole ---------- */
.jar.c-lock{
  border:2.5px solid #6C747E;border-top:none;border-radius:7px 7px 10px 10px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px,rgba(30,40,50,.05) 5px 7px),
    linear-gradient(180deg,#D8DDE4 0%,#B7BEC8 55%,#99A0AB 100%);
  box-shadow:
    inset 0 10px 12px -9px rgba(255,255,255,.9),
    inset 0 -12px 16px -9px rgba(30,40,50,.4),
    0 6px 14px rgba(60,66,74,.18);
}
.jar.c-lock::after{ /* corner rivets */
  content:"";position:absolute;inset:8px;pointer-events:none;
  background:
    radial-gradient(circle at 4px 4px,#78818C 0 3.5px,rgba(255,255,255,.55) 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 4px) 4px,#78818C 0 3.5px,rgba(255,255,255,.55) 4px,transparent 5px),
    radial-gradient(circle at 4px calc(100% - 4px),#78818C 0 3.5px,rgba(255,255,255,.4) 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#78818C 0 3.5px,rgba(255,255,255,.4) 4px,transparent 5px);
}
.jar.c-lock .lid{
  width:164px;height:16px;top:-12px;border-radius:5px;
  background:linear-gradient(180deg,#C9CFD7,#98A0AB);border:2px solid #6C747E;
  box-shadow:0 2px 4px rgba(60,66,74,.3);
}
.jar.c-lock .lid::after{content:"";position:absolute;left:10px;right:10px;top:2px;height:3px;border-radius:3px;background:rgba(255,255,255,.5)}
.jar.c-lock .lock-badge{ /* metal escutcheon plate with a cut keyhole, replacing the padlock emoji */
  font-size:0;width:32px;height:42px;top:32%;filter:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Crect x='1' y='1' width='30' height='40' rx='8' fill='%23848D98' stroke='%235F6873' stroke-width='2'/%3E%3Ccircle cx='16' cy='15' r='5.5' fill='%23343B44'/%3E%3Cpath d='M13 19 L19 19 L22 32 L10 32 Z' fill='%23343B44'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Wooden-Lid Pot: wood grain + overhanging lid with knob ---------- */
.jar.c-crock{
  border:2.5px solid #8A6538;border-top:none;border-radius:14px 14px 44px 44px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238A6538' stroke-width='1.5'%3E%3Cpath d='M22 0 C18 40 26 70 21 110 C18 140 24 160 22 180' stroke-opacity='.3'/%3E%3Cpath d='M50 0 C54 30 46 80 52 120 C55 150 49 165 51 180' stroke-opacity='.24'/%3E%3Cpath d='M76 0 C72 42 80 78 75 118 C72 148 78 166 76 180' stroke-opacity='.2'/%3E%3Cpath d='M98 0 C94 45 102 75 97 115 C94 145 100 165 98 180' stroke-opacity='.28'/%3E%3Cpath d='M127 0 C131 35 123 85 129 125 C131 150 126 168 128 180' stroke-opacity='.24'/%3E%3C/g%3E%3Cellipse cx='106' cy='124' rx='4.5' ry='7' fill='none' stroke='%238A6538' stroke-opacity='.35' stroke-width='1.5'/%3E%3Cellipse cx='106' cy='124' rx='1.8' ry='3' fill='%238A6538' fill-opacity='.4'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    linear-gradient(180deg,#DDB781,#C99C61 60%,#B2854C);
  box-shadow:
    inset 0 10px 12px -10px rgba(255,235,200,.85),
    inset 0 -14px 20px -11px rgba(90,60,20,.4),
    inset 8px 0 12px -10px rgba(255,235,200,.5),
    0 6px 14px rgba(90,72,44,.14);
}
.jar.c-crock .lid{
  width:174px;height:18px;top:-15px;border-radius:9px;
  background:repeating-linear-gradient(90deg,rgba(124,83,39,.22) 0 2px,transparent 2px 16px),linear-gradient(180deg,#BC8D54,#996C3B);
  border:2px solid #7C5327;box-shadow:0 3px 5px rgba(90,60,20,.3);
}
.jar.c-crock .lid::before{ /* knob */
  content:"";position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  width:26px;height:13px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#BC8D54,#8F6236);border:2px solid #7C5327;
}
.jar.c-crock .lid::after{content:"";position:absolute;left:8px;right:8px;top:2px;height:3px;border-radius:3px;background:rgba(255,235,200,.4)}

/* ---------- Cardboard Box: kraft corrugation, open flaps, tape, seams ---------- */
.jar.c-card{
  border:2.5px solid #A9804C;border-top:none;border-radius:3px;
  background:
    repeating-linear-gradient(0deg,rgba(160,120,70,.08) 0 3px,transparent 3px 10px),
    linear-gradient(180deg,#DFC193,#CBA671);
  box-shadow:
    inset 9px 0 12px -10px rgba(120,85,40,.55),
    inset -9px 0 12px -10px rgba(120,85,40,.55),
    inset 0 -10px 12px -10px rgba(120,85,40,.45),
    0 6px 14px rgba(90,72,44,.12);
}
.jar.c-card::before{ /* fold edge where the flaps meet the box */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:rgba(120,85,40,.38);pointer-events:none;
}
.jar.c-card .lid{ /* replace the flat bar with two slightly-open flaps */
  width:150px;height:14px;top:-12px;background:transparent;border:none;border-radius:0;
}
.jar.c-card .lid::before,.jar.c-card .lid::after{
  content:"";position:absolute;bottom:-2px;width:70px;height:24px;
  background:linear-gradient(180deg,#E6CB9E,#D2B077);border:2px solid #A9804C;border-radius:3px 3px 0 0;
  box-shadow:inset 0 -5px 6px -4px rgba(120,85,40,.4);
}
.jar.c-card .lid::before{left:2px;transform:rotate(-5deg);transform-origin:bottom left}
.jar.c-card .lid::after{right:2px;transform:rotate(5deg);transform-origin:bottom right}
.jar.c-card .tape{ /* packing tape over the flap seam */
  top:-24px;height:48px;left:calc(50% - 9px);width:18px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,235,.78),rgba(244,232,205,.62));
  border-left:1px solid rgba(170,130,80,.45);border-right:1px solid rgba(170,130,80,.45);
  box-shadow:0 1px 2px rgba(120,85,40,.18);
}

/* ---------- Picker swatches: mini versions of the same materials ---------- */
.bp-glass{
  border-color:rgba(148,183,205,.7);
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.8) 38%,rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(214,235,244,.45),rgba(183,214,229,.65));
}
.bp-lock{
  font-size:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Ccircle cx='16' cy='13' r='7' fill='%23343B44'/%3E%3Cpath d='M12 18 L20 18 L24 38 L8 38 Z' fill='%23343B44'/%3E%3C/svg%3E") center 55%/11px 15px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#D6DBE2,#9AA1AC);
}
.bp-crock{
  background:
    repeating-linear-gradient(90deg,rgba(124,83,39,.18) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,#EAD9BE,#D9BE95);
}
.bp-crock::before{left:-3px;right:-3px;height:8px;top:-5px;border-radius:5px}
.bp-card{
  background:
    repeating-linear-gradient(0deg,rgba(160,120,70,.1) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#DDBE8F,#C8A26C);
}
.bp-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(120,85,40,.4)}

/* ---------- Calm settle instead of celebratory pop ----------
   A feeling drifts gently into place with a brief, soft glow that fades —
   no bounce, no sparkle. */
.jar .feelball{animation:feelSettle .9s ease-out both}
@keyframes feelSettle{
  0%{transform:translateY(-12px) scale(.97);opacity:0;box-shadow:inset 0 -3px 6px rgba(0,0,0,.08)}
  45%{transform:translateY(0) scale(1);opacity:1;box-shadow:inset 0 -3px 6px rgba(0,0,0,.08),0 0 10px 3px rgba(240,222,170,.45)}
  100%{transform:translateY(0) scale(1);opacity:1;box-shadow:inset 0 -3px 6px rgba(0,0,0,.08),0 0 0 0 rgba(240,222,170,0)}
}