/* Cartoony font for the entire calculator */
    body { font-family: 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif; }
    main.calculator { background:#18181c; border-radius:18px; padding:24px; box-shadow:0 4px 24px #0008; flex:2; position:relative; z-index:1 }
    .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
    .trade-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));border-radius:14px;padding:18px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
    .trade-box h2{margin:0 0 12px 0;font-weight:800;color:#fff;text-align:center}
    .slots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
    .slot{height:92px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;border:1px solid rgba(255,255,255,0.03);overflow:visible}
    .slot img{max-width:80px;max-height:80px;border-radius:10px}
    .add-icon{font-size:36px;color:#2ae0d5}
    .slots .slot{border:1px dashed rgba(42,224,213,0.18)}
    /* Total box style (larger, teal/green to match site) */
    .total-box{background:linear-gradient(180deg,#e6fff8,#dbfff2);border-radius:12px;padding:12px 18px;color:#00664d;font-weight:800;border:2px solid rgba(42,224,213,0.16);display:inline-block;margin-top:8px}
    .value-pill{margin-top:12px;background:linear-gradient(90deg,#1b2430,#2a2f3f);border-radius:28px;padding:10px 18px;color:#cfe8ff;text-align:center;border:1px solid rgba(255,255,255,0.06)}
    .center-row{text-align:center;margin:14px 0}
    .muted{color:#c1c7d8}
    .small-btn{background:#17314a;color:#fff;padding:8px 14px;border-radius:10px;border:none;cursor:pointer}

    /* Modal */
    .picker-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:86%;max-width:980px;background:linear-gradient(180deg,#0f2a45,#09203a);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.6);padding:18px;z-index:2000}
    .picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-height:420px;overflow:auto;padding:8px}
    .pet-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));border-radius:10px;padding:10px;text-align:center;cursor:pointer}
    .pet-card img{width:100%;height:80px;object-fit:contain;border-radius:8px}
    .pet-card p{margin:6px 0 0 0;font-size:0.86em;color:#fff}
    .picker-top{display:flex;gap:12px;align-items:center;justify-content:space-between}
    .search{flex:1;max-width:520px}
    .close-x{background:transparent;border:none;color:#ff4d6d;font-size:28px;cursor:pointer;font-weight:bold;padding:6px 10px;transition:transform .12s,color .12s}
    .close-x:hover{transform:scale(1.15);color:#ff6b85}

    /* Neon-style search input for picker modal */
    #searchInput{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:2px solid rgba(42,224,213,0.36) !important;
      background:linear-gradient(90deg, rgba(42,224,213,0.06), rgba(255,255,255,0.02)) !important;
      color:#eaffff !important;
      box-shadow:0 0 10px rgba(42,224,213,0.12) !important;
      outline:none;
      transition:box-shadow .15s ease, border-color .12s ease, transform .06s ease;
    }
    #searchInput:focus{
      border-color:#2ae0d5 !important;
      box-shadow:0 0 22px rgba(42,224,213,0.26), inset 0 0 8px rgba(42,224,213,0.08) !important;
      transform:translateY(-1px);
    }
    #searchInput::placeholder{ color: rgba(255,255,255,0.75) !important; }

    /* Responsive picker: desktop 6, tablet 4, phone 2 */
    @media (max-width:900px){ .picker-grid{grid-template-columns:repeat(4,1fr)} .pet-card img{height:68px} }
    @media (max-width:600px){ 
      .calc-grid{grid-template-columns:1fr} 
      .picker-grid{grid-template-columns:repeat(2,1fr)} 
      .pet-card img{height:64px} 
    }

    /* On small screens hide the large decorative avatar circles so they don't overlap the calculator */
    @media (max-width:600px){
      .left-avatar, .right-avatar{ display:none !important; }
      .inner-shell{ padding-left:12px; padding-right:12px; }
    }

    /* small remove X in corner - positioned OUTSIDE the pet box */
    .slot-remove-btn{
      position:absolute;
      right:-12px;
      top:-12px;
      width:28px;
      height:28px;
      border-radius:50%;
      background:#ff4d6d;
      border:2px solid rgba(255,255,255,0.12);
      color:#fff;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index:1200;
      opacity:1;
      box-shadow:0 6px 18px rgba(255,77,109,0.18);
      transition:transform .12s,box-shadow .12s
    }
    .slot-remove-btn:hover{
      transform:translateY(-2px) scale(1.05);
      box-shadow:0 12px 30px rgba(255,77,109,0.3)
    }

    /* Variant label above pet box (no background) */
    .slot-variant-label{
      position:absolute;
      top:-14px;
      left:50%;
      transform:translateX(-50%);
      color:#000;
      font-weight:800;
      font-size:0.95rem;
      padding:0 6px;
      background:transparent;
      border-radius:4px;
      z-index:1300;
      pointer-events:none;
    }

    /* Extra trade row (second calculator) */
    .extra-trade-row{margin-top:18px;display:flex;flex-direction:column;gap:12px}
    .trade-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .trade-row-close{position:absolute;right:8px;top:8px;background:#ff4d6d;color:#fff;border:none;border-radius:8px;padding:6px 10px;cursor:pointer}
    @media (max-width:900px){ .trade-row{grid-template-columns:1fr} }

    /* Custom scrollbar (WebKit/Blink) */
    *::-webkit-scrollbar{width:12px;height:12px}
    *::-webkit-scrollbar-track{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:10px}
    *::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2ae0d5,#1877d9);border-radius:10px;border:3px solid rgba(0,0,0,0.25)}
    *::-webkit-scrollbar-thumb:hover{filter:brightness(1.08)}

    /* Firefox scrollbar */
    html{scrollbar-width:thin;scrollbar-color:#2ae0d5 rgba(255,255,255,0.02)}

    /* Calculator chrome styling to match screenshot, using site colors */
    .calc-chrome{
      max-width:1400px;
      margin:18px auto;
      border-radius:22px;
      padding:18px;
      background:linear-gradient(180deg,#0d0d0e13,#4a3fb05d);
      box-shadow:0 20px 60px rgba(0,0,0,0.5);
      position:relative;
      border:8px solid #000;
      border-bottom:12px solid #000;
      border-right:12px solid #000
    }
    /* Back button placement: centered below topbar */
    .back-row{display:flex;justify-content:center;padding:16px 12px;z-index:40}
    .back-btn{background:#0b7285;color:#fff;padding:10px 16px;border-radius:10px;border:3px solid #000;font-weight:800;text-decoration:none;box-shadow:4px 4px 0 rgba(0,0,0,0.25);display:inline-block;font-size:0.95rem}
    .back-btn:active{transform:translate(2px,2px)}
    .calc-top{padding:6px 12px}
    .progress-wrap{position:relative}
    /* progress bar: left = green, middle = yellow, right = red */
    .progress-bar{
      height:22px;
      border-radius:18px;
      overflow:hidden;
      background:linear-gradient(90deg,#16332a 0%,#ffc847 50%,#ff6b6b 100%);
      position:relative;
      border:4px solid #000
    }
    .progress-bar .seg{position:absolute;top:0;bottom:0}
    .progress-bar .seg.low{left:0;width:33.33%;background:linear-gradient(90deg,#2ae0a8,#18b98f)}
    .progress-bar .seg.mid{left:33.33%;width:33.33%;background:linear-gradient(90deg,#ffc847,#ffd24d)}
    .progress-bar .seg.high{left:66.66%;right:0;background:linear-gradient(90deg,#ff6b6b,#ff3b3b)}
    .progress-bar .indicator{
      position:absolute;
      left:6%;
      top:-8px;
      width:16px;
      height:16px;
      background:#000;
      border-radius:2px;
      transform:translateX(-50%) rotate(45deg);
      box-shadow:0 4px 8px rgba(0,0,0,0.5);
      transition:left .22s ease
    }
    .calc-labels{
      display:flex;
      justify-content:space-between;
      margin-top:10px;
      color:#fff;
      font-weight:800;
      font-size:1.3em;
      text-shadow:3px 3px 0px rgba(0,0,0,0.5);
      border-top:3px solid #000;
      padding-top:12px;
      font-family:'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif
    }

    .calc-body{
      display:flex;
      align-items:stretch;
      gap:20px;
      padding:20px
    }
    .avatar{
      width:84px;
      height:84px;
      border-radius:50%;
      background:#fff;
      border:6px solid #d6f7f1;
      box-shadow:0 6px 20px rgba(0,0,0,0.25);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .left-avatar{
      margin-left:-40px;
      margin-top: 60px;
      background-image: url('/moonvalues/images/youpfp.png');
      align-self: flex-end;
    }
    .right-avatar{
      margin-right:-40px;
      background-image: url('/moonvalues/images/otherpfp.png');
      margin-top: 60px;
      align-self: flex-end;
    }
    .inner-shell{
      flex:1;
      background:#dff8f4;
      border-radius:14px;
      padding:20px;
      display:flex;
      align-items:center;
      gap:12px;
      position:relative;
      border:6px solid #000;
      box-shadow:6px 6px 0px rgba(0,0,0,0.3)
    }
    .panel{
      flex:1.5;
      background:#fff;
      border-radius:12px;
      padding:18px;
      display:flex;
      flex-direction:column;
      box-shadow:inset 0 0 0 6px rgba(13,141,121,0.03);
      min-height:380px;
      max-width:none;
      border:5px solid #000;
      box-shadow:8px 8px 0px rgba(0,0,0,0.2);
      position:relative;
    }
    .panel-top{
      display:flex;
      justify-content:center;
      align-items:center;
      margin-bottom:16px
    }
    .panel-title{display:none}
    .panel-body{
      flex:1;
      padding:12px;
      display:flex;
      align-items:flex-start;
      width:100%
    }
    .panel-foot{
      text-align:right;
      margin-top:auto;
      padding-top:12px
    }
    .panel-foot .clear-btn{
      min-width:120px;
      padding:10px 16px;
      background:#ff3333;
      color:#fff;
      border:4px solid #000;
      border-radius:12px;
      font-weight:800;
      font-size:1.1em;
      cursor:pointer;
      box-shadow:4px 4px 0px rgba(0,0,0,0.3);
      transition:all .1s;
      font-family:'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif
    }
    .panel-foot .clear-btn:hover{
      transform:translate(2px, 2px);
      box-shadow:2px 2px 0px rgba(0,0,0,0.3)
    }
    .panel-foot .clear-btn:active{
      transform:translate(4px, 4px);
      box-shadow:0px 0px 0px rgba(0,0,0,0.3)
    }
    .swap-col{
      width:48px;
      display:flex;
      align-items:center;
      justify-content:center
    }
    .swap-icon{
      background:linear-gradient(180deg,#fff,#f0f0f0);
      border-radius:50%;
      width:56px;
      height:56px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:26px;
      color:#2ae0a8;
      border:6px solid #000;
      box-shadow:6px 6px 0px rgba(0,0,0,0.25)
    }
    
    /* Slot styling - flow slots left-to-right with no gaps */
    .slots{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      gap: 20px; /* no gap between slots */
      width:100%;
      justify-content:flex-start;
      align-items:flex-start;
      margin:0;
      flex-shrink:0;
      padding-left:0;
    }
    
    .slot{
      width:90px;
      height:90px;
      border-radius:10px;
      background:linear-gradient(180deg,#fafafa,#f2f2f2);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      border:3px solid #000;
      box-shadow:3px 3px 0px rgba(0,0,0,0.15);
      overflow:visible;
      flex-direction:column;
      padding:8px;
      box-sizing:border-box
    }
    
    .slot img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      border-radius:8px;
      position:relative;
      z-index:1;
      display:block;
      margin:0 auto
    }
    
    .slot .add-icon{
      font-size:26px;
      color:#0e8a79
    }
    
    .slot-value-input{
      position:absolute;
      left:8px;
      bottom:8px;
      transform:none;
      background:transparent;
      border:none;
      outline:none;
      box-shadow:none;
      -webkit-appearance:none;
      appearance:none;
      color:#000;
      padding:4px 6px;
      font-weight:700;
      font-size:0.9em;
      width:auto;
      min-width:44px;
      text-align:left;
      box-sizing:border-box;
      z-index:5;
      line-height:1
    }
    
    .total-box{
      background:#eafff4;
      border-radius:10px;
      padding:10px 14px;
      color:#00664d;
      font-weight:800;
      border:3px solid #000;
      font-size:0.95rem;
      box-shadow:3px 3px 0px rgba(0,0,0,0.2)
    }
    
    /* Removed separate value-difference box — trade status text contains the value message */
    .trade-status{
      text-align:center;
      padding:12px 12px;
      font-size:1.2em;
      font-weight:900;
      margin-top:10px;
      border-radius:8px;
      font-family:'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif;
      text-shadow:2px 2px 0px rgba(0,0,0,0.3);
      max-width:600px;
      margin-left:auto;
      margin-right:auto;
      border:3px solid #000
    }
    
    /* swapped colors so messages and colors align correctly */
    /* Text-only cartoony status: no background or border; use outlined text in color */
    .trade-status{
      text-align:center;
      padding:0;
      font-size:1.25rem;
      font-weight:900;
      margin-top:10px;
      border-radius:0;
      font-family:'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif;
      /* heavy outline via multiple text-shadows for cartoony border */
      text-shadow:2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
      max-width:900px;
      margin-left:auto;
      margin-right:auto;
      background:transparent !important;
      border:none !important;
    }
    
    /* Colors applied to the text itself (no box) */
    .trade-status.good{ color: #2ae0a8; }
    .trade-status.fair{ color: #ffc847; }
    .trade-status.bad{ color: #ff6b6b; }

    /* Responsive: larger tablet -> phones */
    @media (max-width:1200px){
      .calc-chrome{max-width:100%;padding:14px}
    }

    @media (max-width:900px){
      .calc-chrome{
        padding:12px;
        border-width:6px;
        box-shadow:0 14px 40px rgba(0,0,0,0.45)
      }
      .calc-body{
        flex-direction:column;
        gap:12px;
        padding:12px
      }
      .inner-shell{
        flex-direction:column;
        gap:12px;
        padding:12px
      }
      .swap-col{display:none}
      /* Show avatar elements on tablet */
      .avatar{display:block !important}
      .panel{
        width:100%;
        flex:none;
        min-height:240px;
        padding:12px
      }
      .panel-top{margin-bottom:10px}
      
      /* Tablet slot adjustments: flow left-to-right and adjust slot size */
      .slots{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:0;
        justify-content:flex-start;
        padding-left:0;
        width:100%;
        flex-shrink:0;
        margin:0;
      }
      .slot{
        width:76px;
        height:76px;
      }
      .slot img{
        width:48px;
        height:58px;
      }
      .progress-bar{height:18px;border-radius:14px}
      .progress-bar .indicator{top:-7px;width:14px;height:14px}
      .trade-status{font-size:1.05rem}
      
      /* Tablet remove button positioning */
      .slot-remove-btn{
        right:-10px;
        top:-10px;
        width:26px;
        height:26px;
        font-size:14px
      }
    }

    @media (max-width:600px){
      .content-container{padding:0 12px}
      .calc-chrome{
        padding:10px;
        border-radius:16px
      }
      .calc-body{
        gap:10px;
        padding:10px;
        flex-direction:column
      }
      .inner-shell{
        padding:10px;
        flex-direction:column
      }
      .panel{
        min-height:200px;
        padding:10px;
        position:relative
      }
      .panel-top{
        margin-bottom:10px;
        justify-content:flex-start;
        align-items:center;
        gap:12px;
        position:relative;
        height:64px
      }
      .total-box{
        margin:0;
        padding:8px 12px;
        font-size:0.85rem
      }
      
      /* Phone slot adjustments: flow left-to-right with tighter slot size */
      .slots{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:0;
        justify-content:flex-start;
        padding-left:0;
        width:100%;
        flex-shrink:0;
        margin:0;
      }
      .slot{
        width:66px;
        height:66px;
        flex-direction:column;
        padding:6px;
      }
      .slot img{
        width:48px;
        height:48px;
        margin-bottom:4px;
      }
      
      /* Phone value input positioning */
      .slot-value-input{
        position:static;
        transform:none;
        background:transparent;
        border:none;
        outline:none;
        color:#000;
        padding:2px 4px;
        font-weight:700;
        font-size:0.8em;
        width:100%;
        text-align:center;
        box-sizing:border-box;
        z-index:5;
        line-height:1;
        margin-top:2px
      }
      
      .progress-bar{height:16px}
      .progress-bar .indicator{top:-6px;width:12px;height:12px}
      .trade-status{font-size:1rem}
      
      /* Show avatar elements on phone */
      .left-avatar, .right-avatar{display:block  !important}
      
      /* Position avatars inside each panel via ::before or move to panel */
      .offer-panel::before{
        content:'';
        position:absolute;
        top:10px;
        right:10px;
        width:64px;
        height:64px;
        background:#fff;
        border-radius:50%;
        border:6px solid #d6f7f1;
        box-shadow:0 6px 20px rgba(0,0,0,0.25);
        z-index:10;
        background-image: url('/moonvalues/images/youpfp.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .request-panel::before{
        content:'';
        position:absolute;
        top:10px;
        right:10px;
        width:64px;
        height:64px;
        background:#fff;
        border-radius:50%;
        border:6px solid #d6f7f1;
        box-shadow:0 6px 20px rgba(0,0,0,0.25);
        z-index:10;
        background-image: url('/moonvalues/images/otherpfp.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      /* On phones hide only the inner-shell decorative circles; keep per-panel circles */
      .inner-shell::before, .inner-shell::after{
        display:none !important;
      }
      
      /* Phone remove button positioning */
      .slot-remove-btn{
        right:-8px;
        top:-8px;
        width:24px;
        height:24px;
        font-size:12px
      }
      
      /* Phone variant label positioning */
      .slot-variant-label{
        top:-12px;
        font-size:0.8rem
      }
    }

    @media (max-width:420px){
      .calc-chrome{
        padding:8px;
        border-radius:12px
      }
      .panel{
        min-height:180px;
        padding:8px;
        position:relative
      }
      .panel-top{
        margin-bottom:8px;
        justify-content:flex-start;
        align-items:center;
        gap:8px;
        position:relative;
        height:56px
      }
      .total-box{
        margin:0;
        padding:6px 10px;
        font-size:0.8rem
      }
      
      /* Very small phone adjustments: flow left-to-right with smallest slots */
      .slots{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:0;
        justify-content:flex-start;
        padding-left:0;
        width:100%;
        flex-shrink:0;
        margin:0;
      }
      .slot{
        width:60px;
        height:60px;
        padding:4px;
      }
      .slot img{
        width:44px;
        height:44px;
        margin-bottom:2px;
      }
      
      .progress-bar{height:14px}
      .progress-bar .indicator{top:-5px;width:10px;height:10px}
      .trade-status{font-size:0.95rem}
      
      /* Show avatar elements on very small phones */
      .left-avatar, .right-avatar{display:block !important}
      
      /* Position avatars inside each panel */
      .offer-panel::before{
        content:'';
        position:absolute;
        top:8px;
        right:8px;
        width:56px;
        height:56px;
        background:#fff;
        border-radius:50%;
        border:6px solid #d6f7f1;
        box-shadow:0 6px 20px rgba(0,0,0,0.25);
        z-index:10;
        background-image: url('/moonvalues/images/youpfp.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .request-panel::before{
        content:'';
        position:absolute;
        top:8px;
        right:8px;
        width:56px;
        height:56px;
        background:#fff;
        border-radius:50%;
        border:6px solid #d6f7f1;
        box-shadow:0 6px 20px rgba(0,0,0,0.25);
        z-index:10;
        background-image: url('/moonvalues/images/otherpfp.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      /* hide inner-shell circles on very small phones; keep per-panel circles visible */
      .inner-shell::before, .inner-shell::after{
        display:none !important;
      }
      
      /* Small phone remove button positioning */
      .slot-remove-btn{
        right:-6px;
        top:-6px;
        width:22px;
        height:22px;
        font-size:11px
      }
    }

    /* Desktop: place circles at the inner-shell corners using pseudo-elements.
       Hide the floating avatar elements on desktop so we don't duplicate. */
    @media (min-width:901px){
      .calc-chrome .left-avatar, .calc-chrome .right-avatar{ display:none !important; }
      .inner-shell::before, .inner-shell::after{
        content: '';
        position: absolute;
        top: -34px;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #fff;
        border: 6px solid #d6f7f1;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        z-index: 50;
        pointer-events: none;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .inner-shell::before{ 
        left: -34px; 
        background-image: url('/moonvalues/images/youpfp.png');
      }
      .inner-shell::after{ 
        right: -34px; 
        background-image: url('/moonvalues/images/otherpfp.png');
      }
    }

    /* Final visibility overrides: ensure the correct pair shows per breakpoint.
       Desktop (>=901px): show inner-shell circles only. Mobile (<=900px): show avatar elements only.
       Tablet (601px-900px): show avatar elements. */
    @media (min-width:901px){
      .inner-shell::before, .inner-shell::after{ display:block !important; }
      .offer-panel::before, .request-panel::before{ display:none !important; }
      .left-avatar, .right-avatar, .calc-chrome .left-avatar, .calc-chrome .right-avatar{ display:none !important; }
    }
    @media (max-width:900px){
      .inner-shell::before, .inner-shell::after{ display:none !important; }
      .offer-panel::before, .request-panel::before{ display:block !important; }
      .left-avatar, .right-avatar{ display:block !important; }
    }

    /* Strong override: hide all floating/avatar circles on small screens to prevent overlap
       This block intentionally comes last so it overrides earlier media-query rules. */
    @media (max-width:900px){
      .left-avatar, .right-avatar, .calc-chrome .left-avatar, .calc-chrome .right-avatar { display: none !important; }
      .offer-panel::before, .request-panel::before, .inner-shell::before, .inner-shell::after { display: none !important; }
    }

    /* Option A: Move image down by percentage */
.inner-shell::after{ 
  right: -34px; 
  background-image: url('/moonvalues/images/otherpfp.png');
  background-position: center 80%; /* 50% is center, 100% is bottom */
}

/* Option B: Move image down by pixels */
.inner-shell::after{ 
  right: -34px; 
  background-image: url('/moonvalues/images/otherpfp.png');
  background-position: center 8px; /* Pixels from top */
}

  /* Yellow guy - make smaller */
  .inner-shell::before{ 
    left: -34px; 
    background-image: url('/moonvalues/images/youpfp.png');
    background-size: 100%; /* Reduce size */
    background-position: center 13px; /* Keep centered */
  }
  
  /* Gray guy - keep your positioning */
  .inner-shell::after{ 
    right: -34px; 
    background-image: url('/moonvalues/images/otherpfp.png');
    background-position: center 13px;
    background-size: 100%; /* Match the same size as yellow */
  }