/* AuraViva R6.2.1 HOME FULLSCREEN
   Presentation only. Mother/state/persistence untouched. */
:root{
  --r621-safe-h:30px;
  --av-safe-footer-h:30px;
}
/* ---------- HOME / SCENE ---------- */
@media(max-width:600px){
  html,
  body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
  }
  #app{
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
  }
  .scene{
    position:absolute !important;
    inset:
      0
      0
      calc(var(--r621-safe-h) + env(safe-area-inset-bottom))
      0 !important;
    width:auto !important;
    height:auto !important;
    overflow:hidden !important;
    background:#f4f3ef !important;
  }
  .video-wrap{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  #avatarVideo{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:transparent !important;
  }
  #stageBackdrop{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    opacity:.10 !important;
    filter:none !important;
    transform:none !important;
  }
  .scene:after{
    display:none !important;
  }
  .scan,
  .noise,
  .avatar-name,
  .fit-badge,
  #arrivalCard,
  .age-badge,
  .more-trigger{
    display:none !important;
  }
  /* ---------- HEADER ---------- */
  .top{
    position:absolute !important;
    z-index:34 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:auto !important;
    padding:
      calc(10px + env(safe-area-inset-top))
      14px
      0
      14px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }
  .brand{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .brandmark,
  .brand small{
    display:none !important;
  }
  .brand b{
    display:block !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
    font-weight:720 !important;
    color:#4f5867 !important;
    text-shadow:0 1px 8px rgba(255,255,255,.72);
  }
  .level{
    display:none !important;
  }
  /* ---------- XP ---------- */
  #r621XpBadge{
    position:absolute;
    z-index:35;
    right:15px;
    top:calc(11px + env(safe-area-inset-top));
    font-size:15px;
    line-height:1;
    letter-spacing:.12em;
    font-weight:720;
    color:#566070;
    text-shadow:0 1px 8px rgba(255,255,255,.9);
    pointer-events:none;
  }
  /* ---------- ORBITA ---------- */
  #r621OrbitaBadge{
    appearance:none;
    -webkit-appearance:none;
    position:absolute;
    z-index:34;
    right:12px;
    top:calc(48px + env(safe-area-inset-top));
    width:76px;
    height:76px;
    border-radius:50%;
    border:3px solid transparent;
    background:
      linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.82)) padding-box,
      conic-gradient(
        #82e2bb 0deg,
        #76ddec 105deg,
        #8298f6 220deg,
        #b18cf2 310deg,
        #82e2bb 360deg
      ) border-box;
    box-shadow:
      0 7px 24px rgba(70,88,115,.12),
      inset 0 0 18px rgba(255,255,255,.75);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0;
    color:#5d6571;
    cursor:pointer;
    touch-action:manipulation;
  }
  #r621OrbitaBadge span{
    display:block;
    font-size:10px;
    line-height:1;
    letter-spacing:.05em;
    font-weight:800;
  }
  #r621OrbitaBadge strong{
    display:block;
    margin-top:4px;
    font-size:22px;
    line-height:1;
    font-weight:500;
  }
  #r621OrbitaBadge:active{
    transform:scale(.96);
  }
  /* ---------- LEFT CARE RAIL ---------- */
  #r621CareRail{
    position:absolute;
    z-index:32;
    left:10px;
    top:29%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    pointer-events:auto;
  }
  #r621CareRail .r62-need{
    position:relative !important;
    inset:auto !important;
    width:52px !important;
    min-width:52px !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
  }
  #r621CareRail .r62-need > span{
    order:1;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(255,255,255,.90) !important;
    box-shadow:
      0 7px 20px rgba(70,88,115,.12),
      inset 0 0 18px rgba(255,255,255,.72) !important;
    font-size:0 !important;
    line-height:0 !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  #r621CareRail .r621-care-svg{
    width:26px;
    height:26px;
    display:block;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #r621CareRail .r62-need-track{
    order:2;
    position:relative !important;
    inset:auto !important;
    width:38px !important;
    height:4px !important;
    min-height:4px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.75) !important;
    box-shadow:0 1px 5px rgba(50,65,90,.08) !important;
  }
  #r621CareRail .r62-need-track i{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
    height:100% !important;
    width:100%;
    border-radius:999px !important;
    transition:width .25s ease !important;
  }
  #r621CareRail [data-r62-need="hunger"]{
    color:#e99d2f;
  }
  #r621CareRail [data-r62-need="hunger"] .r62-need-track i{
    background:#e99d2f !important;
  }
  #r621CareRail [data-r62-need="hydration"]{
    color:#4ca7ed;
  }
  #r621CareRail [data-r62-need="hydration"] .r62-need-track i{
    background:#4ca7ed !important;
  }
  #r621CareRail [data-r62-need="bond"]{
    color:#e7687a;
  }
  #r621CareRail [data-r62-need="bond"] .r62-need-track i{
    background:#e7687a !important;
  }
  #r621CareRail [data-r62-need="energy"]{
    color:#8367d8;
  }
  #r621CareRail [data-r62-need="energy"] .r62-need-track i{
    background:#8367d8 !important;
  }
  #r621CareRail .r62-need:active > span{
    transform:scale(.94);
  }
  /* ---------- RIGHT TOOL RAIL ---------- */
  .av-tool-rail{
    position:absolute !important;
    z-index:32 !important;
    right:10px !important;
    left:auto !important;
    top:29% !important;
    bottom:auto !important;
    width:48px !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .av-tool-btn,
  .av-tool-rail .r6-sign-orb{
    position:static !important;
    inset:auto !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.90) !important;
    background:rgba(255,255,255,.84) !important;
    color:#626a76 !important;
    box-shadow:
      0 7px 20px rgba(70,88,115,.12),
      inset 0 0 18px rgba(255,255,255,.70) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    font-size:21px !important;
  }
  /* ---------- VITALIDAD ---------- */
  #r62VitalHud{
    position:absolute !important;
    z-index:33 !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:9px !important;
    transform:translateX(-50%) !important;
    width:min(58vw,245px) !important;
    min-height:42px !important;
    margin:0 !important;
    padding:7px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    box-shadow:0 7px 22px rgba(70,88,115,.12) !important;
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
  }
  #r62VitalHud .r62-vital-title{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 !important;
    white-space:nowrap !important;
  }
  #r62VitalHud .r62-vital-title:before{
    content:"";
    width:15px;
    height:15px;
    display:block;
    border-radius:80% 20% 80% 20%;
    background:#54c878;
    transform:rotate(-35deg);
    box-shadow:7px 4px 0 -4px #54c878;
  }
  #r62VitalHud .r62-vital-title span{
    font-size:12px !important;
    line-height:1 !important;
    font-weight:650 !important;
    letter-spacing:.01em !important;
    color:#5e6670 !important;
  }
  #r62VitalHud .r62-vital-title b{
    display:none !important;
  }
  #r62VitalHud .r62-vital-track{
    position:relative !important;
    inset:auto !important;
    flex:1 !important;
    width:auto !important;
    height:7px !important;
    min-height:7px !important;
    margin:0 !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:#dde1e4 !important;
  }
  #r62VitalHud .r62-vital-track i{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
    height:100% !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#4ecb8d,#7cda87) !important;
  }
  /* ---------- SAFETY STRIP ---------- */
  .av-safe-footer{
    position:absolute !important;
    z-index:40 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    min-height:
      calc(var(--r621-safe-h) + env(safe-area-inset-bottom)) !important;
    height:auto !important;
    padding:
      2px
      max(8px,env(safe-area-inset-left))
      calc(2px + env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-right)) !important;
    gap:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    text-align:center !important;
    background:rgba(252,250,246,.96) !important;
    border-top:1px solid rgba(122,136,158,.10) !important;
    box-shadow:none !important;
  }
  .av-safe-footer,
  .av-safe-footer *{
    font-size:10px !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    margin:0 !important;
  }
  /* Moment remains contextual, not permanent */
  .r6-moment{
    left:68px !important;
    right:68px !important;
    bottom:72px !important;
  }
}
@media(max-width:359px){
  #r621CareRail{
    left:6px;
    gap:6px;
  }
  .av-tool-rail{
    right:6px !important;
    gap:6px !important;
  }
  #r621CareRail .r62-need,
  #r621CareRail .r62-need > span,
  .av-tool-btn,
  .av-tool-rail .r6-sign-orb{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }
  #r621CareRail .r62-need{
    height:59px !important;
  }
  #r621OrbitaBadge{
    width:70px;
    height:70px;
  }
  #r62VitalHud{
    width:min(62vw,220px) !important;
  }
}
/* AURAVIVA_TOP_HEADER_R1_SAFE
   Wide-viewport / narrow-app header parity fix.
   Presentation only: avatar, Mother, FSM, media and mobile <=600px untouched.
*/
@media (min-width:601px){
  .top{
    position:absolute !important;
    z-index:34 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:auto !important;
    padding:10px 14px 0 14px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }

  .brand{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .brandmark,
  .brand small{
    display:none !important;
  }

  .brand b{
    display:block !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
    font-weight:720 !important;
    color:#4f5867 !important;
    text-shadow:0 1px 8px rgba(255,255,255,.72) !important;
  }

  .level{
    display:none !important;
  }

  #r621XpBadge{
    position:absolute !important;
    z-index:35 !important;
    left:auto !important;
    right:15px !important;
    top:11px !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    font-weight:720 !important;
    color:#566070 !important;
    text-shadow:0 1px 8px rgba(255,255,255,.90) !important;
    pointer-events:none !important;
  }

  #r62VitalHud{
    position:absolute !important;
    z-index:33 !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:9px !important;
    transform:translateX(-50%) !important;
    width:min(58%,245px) !important;
  }
}